; in WordPress it is a real permalink , so give the anchor its block box. .gs-rback likewise becomes a link instead of a button. */ a.gs-rcard { display: block; } a.gs-rback { display: inline-block; } /* Offline fallback page (PWA layer) — served at /offline/ by inc/pwa.php. Ported from the prototype offline.html; its inline styles live here so the template stays markup-only. */ .gs-offline { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; } .gs-offline__box { max-width: 420px; } .gs-offline__flame { margin-bottom: 20px; } .gs-offline__title { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--text-bright); margin: 0 0 10px; } .gs-offline__copy { font-size: 15px; line-height: 1.6; color: var(--text-3); margin: 0 0 24px; } .gs-offline__retry { height: 50px; padding: 0 24px; } .gs-offline__brand { margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } /* ---- PACK SIZE picker (progressive enhancement over Woo's variation select) ---- main.js renders .gs-pdp__packs cards and moves the native pushing 52px of horizontal scroll on checkout and 18px on every PDP. Make the clip authoritative and pin it to the origin. */ .gs-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; left: 0 !important; top: auto !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; overflow: hidden !important; white-space: nowrap !important; } /* 4. Header overflowed at 320px — the hamburger was sliced by the screen edge on every page. Tighten the lockup and gaps below 360px. */ @media (max-width: 360px) { :root { --pad-x: 12px; } .gs-logo__name { font-size: 19px; } .gs-logo__mark { width: 24px; height: 28px; } .gs-logo { gap: 8px; } .gs-header__actions { gap: 4px; } } /* 5. Checkout/cart grid computed a 334px track inside a 248px box, so every section rendered wider than the phone. `1fr` resolves to minmax(auto,1fr), and the auto minimum was the fixed 300px Turnstile widget. */ @media (max-width: 900px) { .gs-cart-layout, .gs-co-layout { grid-template-columns: minmax(0, 1fr); } } .cf-turnstile { max-width: 100%; overflow-x: auto; } /* 6. Homepage scrolled 56px sideways: the doneness legend is nowrap inside a nowrap flex header, so it pushed the row past the viewport. */ @media (max-width: 700px) { .gs-section__head { flex-wrap: wrap; row-gap: 6px; } .gs-done__legend { white-space: normal; } } /* ---- Category badges, styled like Fresh/Frozen ---- The Fresh (green) and Frozen (blue) pills were the only styled badges; every category fell back to plain gold text. Same pill treatment, tinted per category so the badge tells you something at a glance. Arabic slugs (-ar) map to the same colour family in PHP. */ .gs-card__badge--cat { border: 1px solid transparent; backdrop-filter: blur(3px); } .gs-card__badge--cat-beef { background: rgba(140,47,35,.22); color: #E39485; border-color: rgba(140,47,35,.45); } .gs-card__badge--cat-lamb { background: rgba(176,106,74,.20); color: #E0A98A; border-color: rgba(176,106,74,.42); } .gs-card__badge--cat-poultry { background: rgba(212,162,78,.18); color: #E7C07A; border-color: rgba(212,162,78,.42); } .gs-card__badge--cat-seafood { background: rgba(96,150,178,.20); color: #9FC8DC; border-color: rgba(96,150,178,.42); } .gs-card__badge--cat-sausages { background: rgba(154,110,60,.22); color: #DCB183; border-color: rgba(154,110,60,.44); } /* Fresh/Frozen get the same border treatment so the set reads as one family. */ .gs-card__badge--fresh { border: 1px solid rgba(123,191,112,.42); } .gs-card__badge--frozen { border: 1px solid rgba(110,160,192,.45); } /* ---- 4 · Payment — Woo's gateway list wearing the prototype's card look ---- woocommerce_checkout_payment() still renders it (so gateways, radios, the Place Order button and terms all behave natively); this only restyles it from a bulleted list into one large tappable option per method. */ .gs-cosec--pay .wc_payment_methods, .gs-cosec--pay ul.payment_methods { list-style: none; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; } .gs-cosec--pay ul.payment_methods > li { list-style: none; margin: 0; border: 1.5px solid var(--hairline-2); border-radius: 11px; background: var(--bg); padding: 0; overflow: hidden; transition: border-color .2s, background .2s; } .gs-cosec--pay ul.payment_methods > li:hover { border-color: rgba(212,162,78,.45); } .gs-cosec--pay ul.payment_methods > li:has(input:checked) { border-color: var(--gold); background: rgba(212,162,78,.08); } /* The whole row is the target — not just the 14px radio. */ .gs-cosec--pay ul.payment_methods > li > label { display: flex; align-items: center; gap: 12px; padding: 15px 16px; min-height: 60px; margin: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); } .gs-cosec--pay ul.payment_methods input[type="radio"] { width: 20px; height: 20px; accent-color: var(--gold); flex-shrink: 0; margin: 0; } .gs-cosec--pay ul.payment_methods > li:has(input:checked) > label { color: var(--text-bright); } /* Gateway blurb sits under the title, quiet, like the design's . */ .gs-cosec--pay .payment_box { background: transparent; border: 0; margin: 0; padding: 0 16px 14px 48px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); } .gs-cosec--pay .payment_box::before { display: none; } .gs-cosec--pay .payment_box p:last-child { margin-bottom: 0; } .gs-cosec--pay .woocommerce-terms-and-conditions-wrapper { margin-top: 14px; } .gs-cosec--pay #place_order { width: 100%; min-height: 54px; margin-top: 14px; background: var(--gold); color: var(--surface-ink); border: 0; border-radius: 11px; font-family: var(--font-display); font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: var(--sh-cta); } .gs-cosec--pay #place_order:hover { background: var(--gold-bright); } /* The closed off-canvas nav drawer is parked off-screen with a transform. Even as position:fixed it still extended the document's scroll area, so every page carried ~18px of phantom horizontal scroll. `clip` rather than `hidden`: hidden on the root creates a scroll container and breaks position:sticky, which the header depends on. */ html { overflow-x: clip; } @supports not (overflow-x: clip) { /* Older engines: contain the drawer instead of clipping the root. */ .gs-drawer:not(.is-open) { display: none; } } /* ---- My Account → Account details (branded panel) ---- */ .gs-acctform { display: flex; flex-direction: column; gap: 16px; } .gs-acctform__card { background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: var(--r-card, 16px); padding: clamp(16px, 3vw, 24px); } .gs-acctform__h { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-bright); margin: 0 0 4px; } .gs-acctform__note { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; } .gs-acctform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; } .gs-acctform__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .gs-acctform__field--wide { grid-column: 1 / -1; } .gs-acctform__field > span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } .gs-acctform__field em { color: var(--brick); font-style: normal; } .gs-acctform__field .gs-input { width: 100%; height: 48px; padding: 0 14px; font-size: 16px; } .gs-acctform__field small { font-size: 12px; color: var(--text-dim); } .gs-acctform__actions { display: flex; } .gs-acctform__save { min-height: 52px; padding: 0 28px; border: 0; border-radius: 11px; background: var(--gold); color: var(--surface-ink); font-family: var(--font-display); font-weight: 700; font-size: 15.5px; cursor: pointer; box-shadow: var(--sh-cta); } .gs-acctform__save:hover { background: var(--gold-bright); } @media (max-width: 640px) { .gs-acctform__grid { grid-template-columns: 1fr; } .gs-acctform__save { width: 100%; } } /* ───────────────────────────────────────────────────────────────────────── Tap targets An audit at phone width found 18 controls under 40px — including the quick-add button, every footer link and the "VIEW" link on a product card. These are all comfortable to click with a cursor and awkward to hit with a thumb, which is the only way most of this shop will ever be used. Two techniques, chosen per case rather than applied uniformly: - Real padding where the control sits in a stack and neighbours can simply move apart (footer links, buttons). The extra space is also an improvement to read. - A transparent ::after overlay where the layout is tight and padding would shift the design (inline links inside a card). This grows only the hit area, leaving every visible edge exactly where it was. Hit areas must never OVERLAP. Two 44px targets 20px apart means half the taps on one land on the other — measurably worse than the small target it replaced. So horizontal growth is used sparingly, and where items sit close together on one line the vertical axis is grown instead: that is the axis a thumb actually misses. ───────────────────────────────────────────────────────────────────────── */ /* Quick-add: a primary action at 35px tall. */ .gs-card__qa-btn { min-height: 44px; padding: 10px 14px; } /* Quick add was a HOVER reveal: the panel sits at opacity 0, translated 120% down, and slides up when the card is hovered. That is a nice desktop flourish and it means the feature does not exist on a phone -- there is no hover, so the panel never appears. Worse, it stayed pointer-active while invisible, so an invisible button sat across the top of the product title and could swallow a tap meant to open the product. On any device whose primary input cannot hover, the panel is simply part of the card: always visible, always where the thumb expects it. */ @media (hover: none) { /* Reveal it in place — do NOT change its position. An earlier attempt also set position:static, which moved the panel to the TOP of the card above the photo and buried the category badge behind it. That was chasing a phantom: the panel appeared to overlap the product title only because its HIDDEN state is translateY(120%), which parks it below the image. Measuring the hidden state and "fixing" the result broke a layout that was correct. It is absolutely positioned against .gs-card__media by design and belongs at the bottom of the photo. */ .gs-card__qa { transform: translateY(0); opacity: 1; /* The transition exists only to animate the hover reveal; with no hover there is nothing to animate, and leaving it makes the panel fade whenever the card is tapped. */ transition: none; } } /* Belt and braces for anything that still renders it hidden: a control at opacity 0 must not be tappable. */ .gs-card__qa[style*="opacity: 0"], .gs-card:not(:hover) .gs-card__qa { pointer-events: none; } @media (hover: none) { .gs-card:not(:hover) .gs-card__qa { pointer-events: auto; } } /* Product name inside a card — grow the hit area, keep the type where it is. */ .gs-card__name { position: relative; } .gs-card__name::after { content: ''; position: absolute; inset: -9px 0; } /* "VIEW" — 47x17. Grown both ways; it sits alone on its row. */ .gs-card__view { position: relative; min-height: 20px; } /* -11px, not more: the title sits 21px above this, and two overlays that each claimed 13px met in the middle -- a tap on the gap would have been a coin flip between opening the product and opening the product a different way. */ .gs-card__view::after { content: ''; position: absolute; inset: -11px -12px; } /* Footer link column: 21px rows in a vertical stack, so padding is free. */ .gs-footer__links a { display: block; padding: 11px 0; } .gs-footer__links { gap: 0; } /* padding now provides the rhythm */ .gs-footer__wa { padding: 11px 0; margin-bottom: 4px; } /* Breadcrumbs sit on one line, so growing them sideways would overlap the neighbour. Vertical only, plus a wider gap so the separators still read. */ .gs-crumbs { gap: 10px; } .gs-crumbs a { position: relative; display: inline-block; } .gs-crumbs a::after { content: ''; position: absolute; inset: -14px -5px; } /* Header logo at 36px — the most-tapped link on the site. */ .gs-logo { min-height: 44px; } /* Variation labels ("Pack size") are label[for], so they are tappable and focus the control. Cheap to make them worth aiming at. */ .variations th.label label, .gs-variations th.label label { display: inline-block; padding: 12px 0; } /* Shop filters — the chips and pills are the most-tapped controls on the busiest page, and both landed at 36px. They sit in a stack (chips) and a wrapping row (pills), so real padding is safe: neighbours just move apart, and the extra breathing room reads better at a glance too. */ .gs-chip { min-height: 44px; padding: 10px; } .gs-pill { min-height: 44px; padding: 10px 15px; } /* The pill row wraps; keep a gap wide enough that two 44px targets on adjacent lines cannot be confused for one another. */ .gs-pills, .gs-filters__pills { row-gap: 10px; } /* Pagination — a 39px box for a link people hit repeatedly while browsing. */ .woocommerce-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Price slider. The native track is 16px tall, which is a thin thing to catch with a thumb — and unlike a button you have to land on it AND drag. Give the control a 44px touch height while leaving the track looking as slim as it did, and enlarge the handle itself, which is the part being grabbed. */ .gs-range input[type="range"] { height: 44px; background: transparent; /* the 44px is touch area, not a visible bar */ -webkit-appearance: none; appearance: none; } .gs-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--gold), var(--hairline-2)); } .gs-range input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hairline-2); } .gs-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface-ink); margin-top: -10px; /* centre the 24px handle on the 4px track */ box-shadow: 0 2px 8px rgba(0,0,0,0.45); } .gs-range input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface-ink); box-shadow: 0 2px 8px rgba(0,0,0,0.45); } /* Cart line controls. The steppers declare width:40px but measured 22px on a phone: .gs-qty is an inline-flex row and the buttons were shrinking to fit beside a 54px number field. flex-shrink is the actual bug — a declared width means nothing to a flex item that is allowed to give it up. These are the most-tapped controls in the cart and the two of them sit side by side, so a miss is not a near-miss; it changes the quantity in the wrong direction. */ .gs-qty__btn { flex: 0 0 44px; width: 44px; min-width: 44px; } .gs-qty input.qty { flex: 0 1 auto; min-width: 44px; } /* "Remove" was 20px tall. It is also destructive, so it deserves to be deliberate rather than merely reachable — padding, not an invisible overlay the customer cannot see the edges of. */ .gs-line__remove { padding: 12px 4px; } /* Line-item title: grow the hit area without moving the type. */ .gs-line__name { position: relative; display: inline-block; } .gs-line__name::after { content: ''; position: absolute; inset: -10px 0; } /* The stepper must not be shrunk below its own contents. It sits in a flex row with "Remove", was flex:0 1 auto, and gave up 22px — which .gs-qty's overflow:hidden then CLIPPED, so the minus button was sliced in half and read as a stray dot. Widening the buttons alone made that worse; the container is the thing that has to stop shrinking. */ .gs-qty { flex: 0 0 auto; min-width: fit-content; } /* With a full-width stepper the row can exceed the line on a narrow phone, so let "Remove" drop to its own line rather than squeezing the stepper again. */ .gs-line__ctl { flex-wrap: wrap; row-gap: 10px; } /* The floating WhatsApp button is fixed bottom-right at 56px and sits ON TOP of whatever the page happens to rest under it — on the cart that is the promo "Apply" button, on checkout it covered the Turnstile widget. A support shortcut is not worth blocking a control the customer is trying to press. Two parts: keep it clear of the very bottom of the document (so the last action on any page is never trapped beneath it), and shift it out of the way on narrow screens where the gap either side is smallest. */ body { padding-bottom: 92px; } @media (min-width: 900px) { body { padding-bottom: 0; } } /* desktop has room */ /* Anything the customer must be able to press near the bottom-right gets a reserved lane on phones. */ @media (max-width: 899px) { .gs-cart__actions, .gs-coupon { padding-right: 0; } .gs-coupon { flex-basis: 100%; } /* promo + Apply take a full row … */ .gs-cart__actions .button, .gs-cart__actions .gs-btn { flex-basis: 100%; } } /* Leaflet's own zoom buttons are 30px — below target on the one screen where the customer is pinning their front door, and the map is the thing the whole address depends on. Leaflet ships these unstyled by design. */ /* !important because leaflet.css is a vendored stylesheet enqueued after the design system, and its own .leaflet-touch .leaflet-bar a rule sets 30px. Overriding vendor CSS is what this is for. */ .leaflet-touch .leaflet-bar a, .leaflet-bar a, .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 20px !important; } /* WooCommerce's "have a coupon? click here" toggle is a bare inline link. */ .woocommerce-form-coupon-toggle a, a.showcoupon { display: inline-block; padding: 12px 4px; } /* NOT padded, deliberately: elements stacked above their own input. They are 18px tall and they are not what anyone aims at — the 46px field directly beneath is. Growing every form label would add ~200px to checkout to fix a problem no customer has. Labels that ARE the control (checkboxes, radios, the payment method rows) are sized where they are defined. */ /* Checkboxes rendered at 13px — the browser default, never restyled. "Create an account?" and "Ship to a different address?" are both decisions that change what happens to the order, and both were a 13px square. The wrapping label is tappable too, but the box is what people aim at. */ .woocommerce-form__input-checkbox, input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--gold); flex: 0 0 auto; } /* Make the whole row the target, not just the box. */ .woocommerce-form__label-for-checkbox, label.checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; } /* Turnstile. The widget renders a fixed 300px box. The card it sits in is 257px wide on a 375px phone, so on the login form and at checkout it was cut off down the right-hand side with its own little scrollbar under it — a verification control that looks broken, on the two screens where a customer is deciding whether to trust the site with their details. data-size="flexible" is requested in the markup, but Cloudflare's script still lays it out at 300px, so scale it down to fit rather than clipping it. Clipping would hide part of a control the customer has to interact with; scaling keeps all of it visible and clickable. 300 x 0.85 = 255, inside 257. The wrapper's height is corrected to match so it does not leave a gap. */ .cf-turnstile { max-width: 100%; } @media (max-width: 430px) { .cf-turnstile { transform: scale(0.85); transform-origin: left center; /* 65px widget scaled to ~55px — reclaim the 10px the transform leaves behind. */ margin-bottom: -10px; } } /* Social row. Sits under "Get in touch" beside the WhatsApp link. Icon-only, because the marks are recognised faster than the words and the footer column is narrow — the destination is carried in aria-label for anyone who cannot see them. 44px targets like every other control on the site. */ .gs-social { display: flex; gap: 10px; margin: 4px 0 12px; } .gs-social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline-2); color: var(--text-3); transition: color .2s, border-color .2s, transform .2s; } .gs-social__link:hover { color: var(--gold); border-color: rgba(212, 162, 78, 0.45); transform: translateY(-2px); } .gs-social__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Each platform lights up in its own colour on hover — recognisable without painting the footer in brand colours that are not ours. */ .gs-social__link--instagram:hover { color: #E1306C; border-color: rgba(225, 48, 108, 0.5); } .gs-social__link--facebook:hover { color: #1877F2; border-color: rgba(24, 119, 242, 0.5); } @media (prefers-reduced-motion: reduce) { .gs-social__link:hover { transform: none; } } /* Thank-you page — when and where, right under the order overview. */ .gs-thanks-delivery { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--hairline-2); border-inline-start: 3px solid var(--gold); border-radius: 12px; background: var(--surface); } .gs-thanks-delivery h2 { font-size: 18px; margin: 0 0 10px; } .gs-thanks-delivery dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 10px; } .gs-thanks-delivery dt { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; } .gs-thanks-delivery dd { margin: 0; font-size: 16px; color: var(--text); } .gs-thanks-delivery p { margin: 0; font-size: 13px; } /* Order-received page: WooCommerce's own overview, order table and address blocks printed as bare browser defaults under the styled delivery card -- a bulleted list, an unruled table, italic addresses. Same card language as .gs-thanks-delivery; totals line up as figures; the grand total reads first. */ .woocommerce-order-received .woocommerce-thankyou-order-received { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-bright); margin: 0 0 16px; text-wrap: balance; } .woocommerce-order-received .woocommerce-order-overview { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--hairline-2); border: 1px solid var(--hairline-2); border-radius: 12px; overflow: hidden; } .woocommerce-order-received .woocommerce-order-overview li { margin: 0; padding: 12px 14px; background: var(--surface); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .woocommerce-order-received .woocommerce-order-overview li strong { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; } .woocommerce-order-received .woocommerce-order-overview + p { margin: 10px 0 0; font-size: 13px; color: var(--text-3); } .woocommerce-order-received .woocommerce-order-details, .woocommerce-order-received .woocommerce-customer-details { margin: 22px 0 0; padding: 18px 20px; border: 1px solid var(--hairline-2); border-radius: 12px; background: var(--surface); } .woocommerce-order-received .woocommerce-order-details__title, .woocommerce-order-received .woocommerce-column__title { font-size: 18px; margin: 0 0 12px; } .woocommerce-order-received .woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .woocommerce-order-received .woocommerce-table--order-details th, .woocommerce-order-received .woocommerce-table--order-details td { padding: 10px 0; border-bottom: 1px solid var(--hairline); text-align: start; vertical-align: top; font-weight: 400; } .woocommerce-order-received .woocommerce-table--order-details thead th { padding-top: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .woocommerce-order-received .woocommerce-table--order-details td:last-child, .woocommerce-order-received .woocommerce-table--order-details th:last-child { text-align: end; padding-inline-start: 12px; white-space: nowrap; } .woocommerce-order-received .woocommerce-table--order-details .product-name a { color: var(--text); text-decoration: none; } .woocommerce-order-received .woocommerce-table--order-details .product-quantity { color: var(--text-dim); font-weight: 400; } .woocommerce-order-received .woocommerce-table--order-details .wc-item-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--text-dim); } .woocommerce-order-received .woocommerce-table--order-details .wc-item-meta p { display: inline; margin: 0; } .woocommerce-order-received .woocommerce-table--order-details tfoot th { color: var(--text-3); } .woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; } .woocommerce-order-received .woocommerce-table--order-details tfoot tr:has(.gs-grand-total) th, .woocommerce-order-received .woocommerce-table--order-details tfoot tr:has(.gs-grand-total) td { font-weight: 700; font-size: 17px; color: var(--gold-bright); border-top: 1px solid var(--hairline-3); } .woocommerce-order-received .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .woocommerce-order-received .woocommerce-customer-details .col2-set > * { float: none; width: auto; min-width: 0; } .woocommerce-order-received .woocommerce-customer-details address { font-style: normal; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; } .woocommerce-order-received .woocommerce-customer-details address p { margin: 6px 0 0; } /* Phone numbers and emails are left-to-right even on the Arabic page; without isolation "+961..." rendered as "961...+". */ .woocommerce-order-received .woocommerce-customer-details--phone, .woocommerce-order-received .woocommerce-customer-details--email { direction: ltr; unicode-bidi: isolate; text-align: start; } .gs-rtl.woocommerce-order-received .woocommerce-customer-details--phone, .gs-rtl.woocommerce-order-received .woocommerce-customer-details--email { text-align: right; } .woocommerce-order-received .gs-wa-order { margin-top: 20px; } /* Checkout and the order-received page carry their own WhatsApp links (the delivery-area note, "Message us about this order"); on a phone the floating bubble only ever sat over the totals and the Place order button. */ @media (max-width: 768px) { body.woocommerce-checkout .gs-wa-float { display: none; } } /* The cart-actions rule that gives every .button a full row (to keep it clear of the WhatsApp bubble) also caught the promo Apply button: the input shrank to a stub and Apply ran off the edge. The coupon row keeps its own shape. */ .gs-coupon { display: flex; gap: 8px; align-items: center; } .gs-coupon .gs-input { flex: 1 1 auto; min-width: 0; } .gs-cart__actions .gs-coupon .button, .gs-coupon .gs-coupon__btn { flex: 0 0 auto; width: auto; min-height: 46px; padding: 0 18px; } .gs-summary__from { font-size: 13px; color: var(--text-3); } /* ========================================================================== Site-audit fixes (October 2026) ========================================================================== */ /* Prices built in the browser (pack cards, live header price, buy bar) are an isolated left-to-right run, so "$35.00" keeps its shape in an Arabic line. */ .gs-money { direction: ltr; unicode-bidi: isolate; } /* Cart: quantities save themselves (main.js initCartAutoUpdate). The Update button stays in the markup as the no-JavaScript path. */ html.gs-cart-auto .woocommerce-cart-form button.gs-cart__update { display: none; } .woocommerce-cart-form.is-updating .gs-summary, .woocommerce-cart-form.is-updating .gs-line__total, .woocommerce-cart-form.is-updating .gs-freebar, .woocommerce-cart-form.is-updating .gs-actionbar__v { opacity: .5; transition: opacity .15s ease; } /* The Checkout buttons are submit buttons now (WooCommerce "proceed": save the quantities on screen, then go to checkout). Same look as the old links. */ .wc-proceed-to-checkout { margin: 0; padding: 0; } button.gs-summary__cta, button.gs-actionbar__go { font: inherit; font-weight: 700; border: 0; cursor: pointer; } button.gs-summary__cta { font-size: 15.5px; } /* Breadcrumbs: every link a target at least 24px square (WCAG 2.5.8). */ .woocommerce-breadcrumb a, .gs-crumbs a { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; vertical-align: middle; } /* Footer bottom bar (© line, payments): #6E6557 was 3.4:1 on the footer charcoal; #8F8574 is 5.4:1 and still reads as the quiet line. */ .gs-footer__bar-inner { color: #8F8574; } /* Recipes hub on an Arabic page: the note that the recipes are English. */ .gs-rintro--lang { margin-top: 10px; font-size: 14px; color: var(--text-dim); } /* The live price's unit sits after the price in either direction. */ .gs-pdp__price--live .unit { margin-left: 0; margin-inline-start: 6px; } /* ------------------------------------------------------------------------- Product choices: source · marbling · chilled/frozen · pack (main.js initPackPicker, inc/variations.php). Mobile-first; WooCommerce's selects stay underneath. ------------------------------------------------------------------------- */ /* The variations form is a flex-wrap row (quantity + button): the picker takes a full line of its own and one column that never grows past the panel. Without the full line it shrank to its content where a product has no source cards (Wagyu Ribeye), and the marbling chips stacked as wide boxes. */ .gs-varpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 4px 0 18px; flex: 0 0 100%; width: 100%; min-width: 0; } .gs-varpick .gs-pdp__packs { margin-bottom: 0; } .gs-vp__h { margin: 0 0 8px; } /* Source: three cards */ .gs-vp__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gs-src { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px 12px 11px; text-align: start; cursor: pointer; background: var(--surface); border: 1px solid var(--hairline-3); border-radius: 12px; color: var(--text); transition: border-color .2s, background .2s, box-shadow .2s; } .gs-src:hover:not(:disabled) { border-color: rgba(212,162,78,0.5); } .gs-src__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--text-bright); padding-inline-end: 18px; } .gs-src__blurb { font-size: 12px; line-height: 1.4; color: var(--text-dim); } .gs-src__from { margin-top: auto; padding-top: 4px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--gold); } .gs-src.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 10px 24px rgba(0,0,0,0.35); background: linear-gradient(160deg, rgba(212,162,78,0.16), var(--surface) 70%); } .gs-src.is-active::after, .gs-tog.is-active::after { content: none; } .gs-src.is-active::before { content: ""; position: absolute; top: 10px; inset-inline-end: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A140C' stroke-width='3.2'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; } .gs-src:disabled, .gs-tog:disabled, .gs-pdp__pack:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; } .gs-src:focus-visible, .gs-tog:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Chilled / frozen: a two-way toggle */ .gs-vp__toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 380px; padding: 4px; background: var(--surface-2); border: 1px solid var(--hairline-3); border-radius: var(--r-pill); } .gs-tog { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; background: none; border: 0; border-radius: var(--r-pill); color: var(--text-2); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background .2s, color .2s; } .gs-tog svg { flex: none; opacity: 0.8; } /* Fresh gold, Frozen cream: the same two colours as the cards' pills. */ .gs-tog.is-active { background: #D4A24E; color: #141210; box-shadow: 0 6px 16px rgba(0,0,0,0.35); } .gs-tog.is-active[data-frozen] { background: #F4EEE2; color: #141210; } .gs-vp__hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); } /* Pack chips: unavailable and sold-out states */ .gs-pdp__pack.is-soldout .gs-pdp__pack-p { color: #C77461; } /* Marbling (pa_grade): chips lower to higher, the price of each beside it, and "Higher score = more marbling" under the heading. Shown only when the chosen source has two grades or more; one grade is a quiet line instead. (The cream spec card — source / kept / net wt / SKU / price — that sat here was removed, owner October 2026: the price per kg and the estimate lead the page, and the choices say the rest.) */ .gs-vp__note { margin: -4px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); } /* Compact chips side by side — two or three a row on every screen, like the pack chips, never full-width boxes stacked (round 3). */ .gs-varpick .gs-vp__grades, .gs-varpick--multi .gs-vp__grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .gs-vp__grades .gs-pdp__pack { min-width: 0; padding: 9px 12px; gap: 2px; } .gs-vp__grades .gs-pdp__pack-l { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-size: 15px; } .gs-vp__grades .gs-pdp__pack-p { white-space: nowrap; font-size: 11.5px; } .gs-grade__only { font-size: 11px; line-height: 1.3; color: var(--text-dim); } .gs-grade__only[hidden] { display: none; } .gs-pdp__pack.is-active .gs-grade__only { color: var(--text-2); } /* Phones: the chosen chip is cream (mobile.css), so its note is in ink. */ @media (max-width: 860px) { .gs-pdp__pack.is-active .gs-grade__only { color: #5A4F40; } } .gs-pdp__pack[hidden] { display: none; } .gs-vp__gradenote { margin: -6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); } .gs-vp__gradenote[hidden] { display: none; } .gs-vp__desc { max-width: 560px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); } .gs-vp__desc p { margin: 0 0 8px; } .gs-vp__desc p:last-child { margin-bottom: 0; } /* WooCommerce prints the same description above the button: ours is enough. */ .gs-varpick--multi ~ .single_variation_wrap .woocommerce-variation-description { display: none; } /* The kilo price, clearly beside the piece price (not small print). */ .gs-pdp__perkg { display: inline-flex; align-items: baseline; gap: 2px; margin-inline-start: 12px; vertical-align: 0.25em; padding: 4px 10px; border: 1px solid var(--hairline-3); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; } /* Sold by weight: kilo price leads, then the usual weights and the note. */ .gs-pdp__est { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; color: var(--text-2); } .gs-pdp__est bdi { font-family: var(--font-mono); font-size: 13.5px; color: var(--text); } .gs-pdp__weighnote { display: block; margin-top: 8px; padding-inline-start: 12px; border-inline-start: 2px solid var(--gold); font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; color: var(--text-dim); } /* Cart / checkout: an estimate until it is cut. */ .gs-est__approx { color: var(--gold); } .gs-est__note { font-size: 11.5px; color: var(--text-dim); font-weight: 400; font-family: var(--font-body); white-space: normal; } /* Phones: sources stack as rows (name + from price, the line under). */ @media (max-width: 600px) { .gs-vp__sources { grid-template-columns: 1fr; gap: 6px; } .gs-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 11px 14px; } .gs-src__name { grid-column: 1; padding-inline-end: 0; } .gs-src__from { grid-column: 2; grid-row: 1; margin: 0; padding: 0; white-space: nowrap; } .gs-src__blurb { grid-column: 1 / -1; } .gs-src.is-active::before { top: auto; bottom: 10px; } .gs-vp__toggle { max-width: none; } } /* Cards: the sources a cut comes in, as small chips under its name. */ .gs-card__sources { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; padding: 0; } .gs-card__sources li { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: var(--r-pill); border: 1px solid rgba(212,162,78,0.35); color: var(--gold-bright); background: rgba(212,162,78,0.06); } .gs-rtl .gs-card__sources li { font-family: var(--font-body); letter-spacing: 0; font-size: 11px; } .gs-vp__hint[hidden], .gs-vp__desc[hidden] { display: none; } /* Pack chips in the beef picker read "300 g piece": one line, not shouted. */ .gs-varpick--multi .gs-pdp__packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; } .gs-varpick--multi .gs-pdp__pack { min-width: 0; } .gs-varpick--multi .gs-pdp__pack-l { text-transform: none; white-space: nowrap; font-size: 15px; letter-spacing: 0; } .gs-vp[hidden] { display: none; } /* Arabic: no letter-spacing or mono face on Arabic words (it breaks the joins). */ .gs-rtl .gs-src__from, .gs-rtl .gs-pdp__packs-label { font-family: var(--font-body); letter-spacing: 0; text-transform: none; } .gs-rtl .gs-src__from { font-size: 12.5px; } .gs-rtl .gs-src__from .gs-money { font-family: var(--font-mono); } /* An Arabic grade name ("درجة تعريق 4–5") reads right to left; its figures are isolated. */ .gs-rtl .gs-vp__grades .gs-pdp__pack-l { direction: rtl; font-family: var(--font-body); font-size: 14px; } .gs-rtl .gs-grade__only { font-size: 12px; } /* ------------------------------------------------------------------------- Calmer product page (Oct 2026): essentials first, the rest folded. ------------------------------------------------------------------------- */ .gs-pdp__assure { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 18px; font-size: 13px; color: var(--text-dim); } .gs-pdp__assure span { display: inline-flex; align-items: center; gap: 7px; } .gs-pdp__assure svg { color: var(--gold); flex: none; } /* "How to cook it" is Version 1's open section again (the .gs-cook rules above): the video shows straight away, with its charcoal / pan tabs. */ /* Arabic in the hero gallery: body face, no letter-spacing. */ .gs-rtl .gs-heroD__all, .gs-rtl .gs-heroD__cutline, .gs-rtl .gs-herotoggle__tab { font-family: var(--font-body); letter-spacing: 0; text-transform: none; } .gs-rtl .gs-heroD__all { font-size: 13px; } .gs-heroD__shop bdi { font-family: var(--font-mono); } .gs-card__from { font-family: var(--font-body); font-size: 11.5px; color: var(--text-dim); margin-inline-end: 2px; } /* On the cream pack label (phones) the sources read as one quiet ink line. */ @media (max-width: 860px) { .gs-card__sources { flex-wrap: nowrap; overflow: hidden; gap: 3px; margin: 0 0 3px; } .gs-card__sources li { flex: none; padding: 2px 5px; font-size: 8.5px; letter-spacing: 0.04em; color: #6E6557; border-color: #DCCFB8; background: none; } .gs-rtl .gs-card__sources li { font-size: 10px; } } /* ------------------------------------------------------------------------- Fresh / Frozen pills (Oct 2026, final site). The original small rounded pill on the card photo, top-left, two side by side when a cut is sold both ways — made clean, in the brand's colours (owner): Fresh a solid GOLD pill, Frozen a solid CREAM pill, charcoal text and icon, a hairline border. No transparency, no backdrop-filter, no glow, no text-shadow, no gradient; whole-pixel sizes and the browser's default font smoothing, so they stay sharp at 1x and 2x on dark and light photographs. Same pills on every card (home, shop, related); the product page photo has none (its Fresh / Frozen toggle uses the same two colours, below). Markup: grillsons_card_temps_html() in inc/template-helpers.php. ------------------------------------------------------------------------- */ .gs-card__temps { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); pointer-events: none; } [dir="rtl"] .gs-card__temps { left: auto; right: 12px; } .gs-card__temp { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border: 1px solid rgba(20, 18, 16, .15); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #141210; } [dir="rtl"] .gs-card__temp { padding: 0 7px 0 8px; } .gs-card__temp svg { flex: none; display: block; width: 11px; height: 11px; } .gs-card__temp--fresh { background: #D4A24E; } .gs-card__temp--frozen { background: #F4EEE2; } .gs-rtl .gs-card__temp { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 0 9px; } /* The older Fresh / Frozen / "Keep cold" badges (a cut with no category, a chilled jar): the same two solid colours. */ .gs-card__badge--fresh, .gs-card__badge--frozen { -webkit-backdrop-filter: none; backdrop-filter: none; color: #141210; font-weight: 700; border: 1px solid rgba(20, 18, 16, .15); } .gs-card__badge--fresh { background: #D4A24E; } .gs-card__badge--frozen { background: #F4EEE2; } /* Phones: a size smaller, same corner as the category badge. */ @media (max-width: 860px) { .gs-card__temps { top: 8px; left: 8px; gap: 4px; max-width: calc(100% - 16px); } [dir="rtl"] .gs-card__temps { left: auto; right: 8px; } .gs-card__temp { height: 20px; padding: 0 6px 0 6px; gap: 4px; font-size: 10.5px; letter-spacing: 0.1em; } .gs-card__temp svg { width: 10px; height: 10px; } .gs-rtl .gs-card__temp { font-size: 11.5px; letter-spacing: 0; padding: 0 8px; } } /* Product page add-to-cart (Oct 2026, final site): one line. "Add to cart · EST. $79.00" with a small "est." before the price; where that does not fit (a phone, beside the quantity stepper) main.js adds .gs-buybtn--tight and the button says only "Add to cart" (the sticky bar shows the estimate). */ .gs-pdp__panel form.cart .single_add_to_cart_button { white-space: nowrap; overflow: hidden; text-overflow: clip; } /* Phones: the buy row is the screen's width. contain: inline-size keeps the one-line text from widening the button (and the row, and the page): the button takes the room beside the stepper, and main.js reads whether the words fit. */ @media (max-width: 860px) { .gs-pdp__panel form.cart .single_add_to_cart_button { contain: inline-size; } } .gs-buybtn__est { font-size: 0.7em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; } .gs-rtl .gs-buybtn__est { font-size: 0.82em; letter-spacing: 0; text-transform: none; } .gs-buybtn--tight .gs-buybtn__price { display: none; }