picks up the global 1.5rem block gap under the header. On a paper background that was invisible; under a photographic hero band it is a cream stripe between the announcement bar and the photograph. Only collapse it when the band is actually there. */ .wp-site-blocks > main:has(> .a7-hero--photo:first-child) { margin-block-start: 0; } .a7-header { backdrop-filter: blur(16px); background: rgba(251, 248, 241, 0.90); border-bottom: 1px solid var(--a7-border); position: sticky; top: 0; z-index: 20; } .a7-header .a7-announce { background: var(--a7-red); margin-block: 0; padding-block: 0.45rem; } .a7-announce__text { color: var(--a7-white); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; margin: 0; } .a7-announce__text strong { font-weight: 700; } .a7-logo img { display: block; height: 58px; max-width: none; width: auto; } .a7-nav a { text-decoration: none; } .a7-nav a:hover { color: var(--a7-moss-deep); } /* Keep the nav cluster (links / hamburger + cart) vertically centered and tidy; the mini-cart sits to the right of the hamburger on mobile. */ .a7-nav { align-items: center; } /* ── Mini-cart button ────────────────────────────────────────────────────── */ .wc-block-mini-cart__button { background: transparent; border: 0; border-radius: 999px; color: var(--a7-ink); cursor: pointer; padding: 0.4rem; transition: color 140ms ease, background-color 140ms ease; } .wc-block-mini-cart__button:hover { background: rgba(31, 26, 20, 0.06); color: var(--a7-red); } .wc-block-mini-cart__button svg { height: 1.55rem; width: 1.55rem; } .wc-block-mini-cart__badge { background: var(--a7-red); color: #fff; } /* Hamburger toggle: brand ink, comfortable tap target. */ .a7-nav .wp-block-navigation__responsive-container-open, .a7-nav .wp-block-navigation__responsive-container-close { color: var(--a7-ink); } .a7-nav .wp-block-navigation__responsive-container-open:hover { color: var(--a7-red); } /* ── Mobile menu overlay ─────────────────────────────────────────────────── */ /* Branded cream sheet, centered links with even rhythm and large tap targets, instead of the cramped right-justified default. */ .wp-block-navigation__responsive-container.is-menu-open { align-items: center; background-color: var(--a7-paper); display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 4rem 1.5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: center; flex-direction: column; justify-content: center; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center; gap: 1.25rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--a7-ink); font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.85rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.35rem 0.75rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--a7-red); } .a7-button .wp-block-button__link, .wp-block-button.is-style-fill .wp-block-button__link { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px rgba(31, 26, 20, 0.08); transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .a7-button .wp-block-button__link:hover, .wp-block-button.is-style-fill .wp-block-button__link:hover { background: var(--a7-red-deep); box-shadow: 0 12px 28px rgba(31, 26, 20, 0.14); transform: translateY(-1px); } .a7-button .wp-block-button__link:active, .wp-block-button.is-style-fill .wp-block-button__link:active { transform: scale(0.98); } .a7-pill { border: 1px solid var(--a7-border); border-radius: 999px; color: var(--a7-moss); display: inline-flex; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.45rem 0.8rem; text-transform: uppercase; width: fit-content; } .a7-script { color: var(--a7-berry); font-family: Caveat, "Brush Script MT", cursive; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.9; } .a7-signature { color: var(--a7-berry); font-family: Caveat, "Brush Script MT", cursive; font-size: 1.75rem; font-weight: 600; margin-top: 1.25rem; } .a7-review-stars { color: var(--a7-yellow); font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1; margin-bottom: 0.85rem; } .a7-hero-card, .a7-card { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 20px; box-shadow: var(--a7-shadow); } .a7-hero-card { position: relative; } .a7-hero-sticker { background: var(--a7-yellow); border-radius: 12px; box-shadow: 0 8px 20px rgba(31, 26, 20, 0.18); color: var(--a7-ink); font-family: Caveat, "Brush Script MT", cursive; font-size: 1.5rem; font-weight: 700; line-height: 1; padding: 0.5rem 1rem; position: absolute; right: 1rem; top: -0.85rem; transform: rotate(-6deg); z-index: 2; } .a7-hero-stamps { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; } .a7-stamp { align-items: center; color: var(--a7-muted); display: flex; font-size: 0.9rem; font-weight: 500; gap: 0.5rem; } .a7-stamp svg { color: var(--a7-moss); flex-shrink: 0; height: 18px; width: 18px; } .a7-hero-logo { margin: 0; } .a7-hero-logo img { border-radius: 16px; box-shadow: 0 16px 40px rgba(200, 51, 42, 0.20); display: block; width: 100%; } /* ── Hero showpiece ──────────────────────────────────────────────────────── */ /* The hero leads with the actual jar rather than the logo. The product photos are tall (3:4) on a light studio backdrop, so the frame crops to a portrait plate and lets the sand background carry the brand warmth. */ .a7-hero-showpiece { margin: 0; } .a7-hero-showpiece__frame { background: var(--a7-paper-2); border: 1px solid var(--a7-border); border-radius: 20px; box-shadow: var(--a7-shadow); display: block; overflow: hidden; position: relative; } /* 781px is where core stacks wp-block-columns. The showpiece used to be pulled above the copy here (`order: -1`) so the jar was not a full screen down — which put a jar (or, when the catalog lookup misses, the brand mark) directly on top of the headline with only the column gap between them. That adjacency is the mobile collision the client reported. The hero now leads with its own photograph, so the copy can come first: nothing sits between the header logo and the h1, and the showpiece follows the CTAs where it reads as the next step rather than a lid on the headline. Matched to 1000px, where this theme force-stacks columns, not core's 781px. */ @media (max-width: 1000px) { .a7-hero-columns { row-gap: 2.5rem; } .a7-hero-columns > .wp-block-column:last-child { order: 0; } } .a7-hero-showpiece__eyebrow { background: var(--a7-paper); border: 1px solid var(--a7-border); border-radius: 999px; color: var(--a7-moss); font-size: 0.72rem; font-weight: 700; left: 1rem; letter-spacing: 0.12em; padding: 0.4rem 0.75rem; position: absolute; text-transform: uppercase; top: 1rem; } .a7-hero-showpiece__frame img { aspect-ratio: 4 / 5; display: block; /* The image now carries intrinsic width/height attributes (no layout shift while it loads). Those are presentational hints, and a `height` hint beats `aspect-ratio` unless height is explicitly auto. */ height: auto; object-fit: cover; transition: transform 480ms ease; width: 100%; } .a7-hero-showpiece__frame:hover img { transform: scale(1.02); } .a7-hero-showpiece__caption { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; justify-content: space-between; padding: 1rem 0.25rem 0; } .a7-hero-showpiece__name { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.15rem; font-weight: 600; } .a7-hero-showpiece__price { color: var(--a7-berry); font-weight: 800; } /* ── Hero photo band ─────────────────────────────────────────────────────── */ /* The hero is a photograph with the copy set on it, not a photo pasted beside text. Two decisions hold it together: 1. The image is an in the flow (absolutely positioned, object-fit cover), not a CSS background — that is the only way to get srcset, an intrinsic size, and fetchpriority on the LCP element. 2. Legibility comes from a scrim, not from hoping the photo is dark enough. The gradient is opaque where the copy is and thins toward the showpiece, so the sea and sky still read as a photograph. Cream (#FBF8F1) over the dense end of the scrim is ~13:1; the yellow pill and price ~8:1. */ /* Doubled class throughout this block: `.a7-section` and its 640px override own `padding-block` later in this file, and a single class would lose on source order. */ .a7-hero.a7-hero--photo { background: var(--a7-paper-2); isolation: isolate; overflow: hidden; /* Shorter than the stock `.a7-section` rhythm: a photographic band reads as a picture, and 7rem of padding on top of a 4:5 showpiece pushed it past a laptop viewport. */ padding-block: clamp(2.75rem, 5.5vw, 4.5rem); position: relative; } /* Two classes deep on purpose: WordPress' own `body .is-layout-constrained > :where(:not(.alignwide)…)` rule is (0,1,1) and otherwise clamps the backdrop to the 760px content width. */ .a7-hero--photo > .a7-hero__media { display: block; height: 100%; inset: 0; max-width: none; position: absolute; width: 100%; z-index: 0; } .a7-hero__img { display: block; height: 100%; object-fit: cover; /* Bias up-frame: crops most of the (garbled-label) jars out of the bottom of the render and keeps the horizon, sea, and palm canopy — the part of the photograph actually doing the work. */ object-position: 55% 26%; width: 100%; } /* Three layers, each doing one job — all cream, never ink: the band must read as daylight (merchant feedback 2026-08-05: the dark treatment read as a storm, not food): 1. left-to-right — the reading scrim, dense under the copy, thin over the sea; 2. top-to-bottom — settles the band into the page; 3. bottom-left radial — the render's jars sit in that corner with their AI-garbled labels, and no crop can push them out of a band this wide, so they are dissolved into bright haze and read as shapes on sand. */ .a7-hero--photo::before { background: radial-gradient( 130% 95% at 6% 112%, rgba(251, 248, 241, 0.96) 0%, rgba(251, 248, 241, 0.78) 38%, rgba(251, 248, 241, 0.30) 62%, rgba(251, 248, 241, 0) 78% ), linear-gradient( 98deg, rgba(251, 248, 241, 0.92) 0%, rgba(251, 248, 241, 0.86) 34%, rgba(251, 248, 241, 0.55) 56%, rgba(251, 248, 241, 0.20) 78%, rgba(251, 248, 241, 0.08) 100% ), linear-gradient(to bottom, rgba(251, 248, 241, 0.28), rgba(251, 248, 241, 0.05) 45%, rgba(251, 248, 241, 0.30)); content: ""; inset: 0; position: absolute; z-index: 1; } .a7-hero--photo > .wp-block-columns { position: relative; z-index: 2; } .a7-hero--photo h1 { color: var(--a7-ink); text-shadow: 0 1px 24px rgba(251, 248, 241, 0.55); } .a7-hero--photo .a7-pill { background: rgba(251, 248, 241, 0.62); border-color: rgba(31, 26, 20, 0.16); color: var(--a7-moss-deep); } /* The lede and stamps run furthest into the thin end of the scrim, where the photo behind them is busiest. The halo is the fallback for that stretch. */ .a7-hero--photo .a7-hero__lede, .a7-hero--photo .a7-stamp { text-shadow: 0 1px 14px rgba(251, 248, 241, 0.85); } .a7-hero--photo .a7-stamp { color: rgba(31, 26, 20, 0.82); } .a7-hero--photo .a7-stamp svg { color: var(--a7-moss); } /* Cap the showpiece rather than letting it fill 44% of a wide container: a 4:5 frame at full column width is 660px tall, which sets the whole band's height and buries the horizon behind the card. */ .a7-hero--photo .a7-hero-showpiece { margin-inline: auto 0; max-width: 25rem; } .a7-hero--photo .a7-hero-showpiece__frame { border-color: rgba(31, 26, 20, 0.12); box-shadow: 0 24px 60px rgba(31, 26, 20, 0.18); } .a7-hero--photo .a7-hero-showpiece__name { color: var(--a7-ink); } .a7-hero--photo .a7-hero-showpiece__price { color: var(--a7-moss-deep); } /* Fallback column (no catalog image): thin the logo plate to a frame so it sits on the photograph without reading as a solid block. */ .a7-hero--photo .a7-hero-card { background: rgba(251, 248, 241, 0.55); border-color: rgba(31, 26, 20, 0.12); } /* Mobile: the photograph stops being a backdrop and becomes a plate. A phone hero band is about 1:3.5. Cover-cropping a 3:2 beach into that shape yields a vertical sliver of no particular subject, and the scrim needed to keep copy legible over the full height turns the whole screen into a dark rectangle — which is what the first pass did. So on phones the media leaves absolute positioning, sits in the flow as a full-bleed 3:2 strip under the header, and fades into the band's own paper. The copy then sits on flat paper where nothing threatens it, the composition survives, and the jars in the render are small enough at 390px to read as jars on a beach rather than as five labels with the wrong words on them. */ /* 1000px, not core's 781px column-stacking point: this theme force-stacks every `wp-block-columns` at 1000px (see the h1/columns block below), so that is the width where the hero copy starts spanning the full band and the left-to-right scrim stops lining up with it. */ @media (max-width: 1000px) { .a7-hero.a7-hero--photo { padding-block: 0 clamp(2.75rem, 8vw, 3.5rem); } .a7-hero--photo > .a7-hero__media { height: auto; inset: auto; margin-bottom: clamp(1.75rem, 6vw, 2.25rem); position: static; } .a7-hero--photo .a7-hero-showpiece { margin-inline: 0; max-width: 22rem; } .a7-hero__img { aspect-ratio: 3 / 2; height: auto; /* Soft bottom edge so the strip dissolves into the band instead of ruling a hard line across the screen. */ mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); object-position: 55% 62%; } /* Nothing sits over the photograph now — the scrim is just a soft vignette under the announcement bar, kept light so the strip stays sunny. */ .a7-hero--photo::before { background: linear-gradient( to bottom, rgba(16, 12, 8, 0.18) 0%, rgba(16, 12, 8, 0.06) 16%, rgba(16, 12, 8, 0) 30% ); } } /* ── Page intro plate ────────────────────────────────────────────────────── */ /* about / contact / faq / shop share this band. The plate is a contained frame rather than a bleed, so the copy stays ink-on-paper and needs no scrim — the photograph earns its place without putting text at risk. */ .a7-page-intro--media .a7-page-intro__inner { align-items: center; display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); } .a7-page-intro--media .a7-page-intro__copy { margin: 0; max-width: none; } /* 11ch is the measure for a text-only intro sitting on a 1200px band. Beside a plate the column is already half that width, so the cap would force four- and five-line headlines. */ .a7-page-intro--media h1 { max-width: 20ch; } .a7-page-intro--media .a7-page-lede { max-width: 46ch; } /* Two classes: WordPress' `body .is-layout-flow > * + *` block-gap rule is (0,1,1) and would otherwise push the plate down out of vertical centre. */ .a7-page-intro--media .a7-page-intro__figure { margin: 0; } .a7-page-intro__picture img, .a7-page-intro__figure > img { aspect-ratio: 4 / 3; background: var(--a7-paper-2); border: 1px solid var(--a7-border); border-radius: 20px; box-shadow: var(--a7-shadow); display: block; height: auto; object-fit: cover; width: 100%; } .a7-page-intro__caption { color: var(--a7-muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; margin-top: 0.85rem; text-transform: uppercase; } @media (max-width: 900px) { .a7-page-intro--media .a7-page-intro__inner { grid-template-columns: minmax(0, 1fr); } /* Copy first when stacked: the h1 stays the first thing under the header on every page, and the plate is not a block sitting on the headline. */ .a7-page-intro--media .a7-page-intro__copy { order: 0; } .a7-page-intro__figure { order: 1; } .a7-page-intro--media h1, .a7-page-intro--media .a7-page-lede { max-width: none; } /* Stacked, the plate spans the full gutter, and a 4:3 frame at 728px is 546px tall — it would push the FAQ list or the product grid off the first screen. Crop to a shorter letterbox instead of shrinking it. */ .a7-page-intro__picture img, .a7-page-intro__figure > img { aspect-ratio: 3 / 2; max-height: 22rem; } } /* ── Ingredient card (story strip) ───────────────────────────────────────── */ .a7-ingredient-card { padding: clamp(1.5rem, 2.6vw, 2rem); } .a7-ingredient-card__title { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1rem; } .a7-ingredient-card__note { color: var(--a7-muted); margin: 0 0 1rem; } .a7-ingredient-list { columns: 2; column-gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .a7-ingredient-list li { break-inside: avoid; color: var(--a7-muted); font-size: 0.95rem; line-height: 1.5; padding: 0.3rem 0 0.3rem 1rem; position: relative; } .a7-ingredient-list li::before { background: var(--a7-moss); border-radius: 50%; content: ""; height: 5px; left: 0; position: absolute; top: 0.75rem; width: 5px; } .a7-provenance { color: var(--a7-muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; margin-top: 1.75rem; text-transform: uppercase; } /* ── Ordering assurances ─────────────────────────────────────────────────── */ .a7-assurances { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); list-style: none; margin: 0; padding: 0; } .a7-assurance { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); padding: clamp(1.25rem, 2.2vw, 1.6rem); } .a7-assurance__icon { color: var(--a7-moss); height: 26px; width: 26px; } .a7-assurance h3 { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 600; line-height: 1.2; margin: 0.85rem 0 0.5rem; } .a7-assurance p { color: var(--a7-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; } .a7-assurances__footnote { color: var(--a7-muted); font-size: 0.95rem; margin-top: 1.75rem; } .a7-section { padding-block: clamp(4rem, 9vw, 7rem); } .a7-section-tight { padding-block: clamp(3rem, 7vw, 5rem); } .a7-page-intro { background: var(--a7-paper); padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); } .a7-page-intro h1 { max-width: 11ch; } .a7-page-lede { color: #3a3128; font-size: 1.2rem; line-height: 1.7; max-width: 700px; } .a7-muted-copy { color: var(--a7-muted); font-size: 1.1rem; line-height: 1.7; } .a7-callout, .a7-contact-panel, .a7-info-card, .a7-faq-item, .a7-shop-note { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); } .a7-callout, .a7-contact-panel, .a7-info-card { padding: clamp(1.25rem, 2.4vw, 2rem); } .a7-info-card h3 { font-size: 1.45rem; margin-top: 0; } .a7-info-card p { color: var(--a7-muted); } .a7-shop-note { align-items: center; color: var(--a7-muted); display: flex; gap: 1rem; margin-bottom: 1.5rem; padding: 0.9rem 1rem; } .a7-shop-note p { margin: 0; } .a7-product-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 2rem; } .a7-product-card { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 220ms ease, transform 220ms ease; } .a7-product-card:hover { box-shadow: var(--a7-shadow); transform: translateY(-2px); } /* Homepage featured grid (plugin shortcode markup, theme-styled). Same 4:5 framing as the shop cards — this grid was showing the same cropped-to-a-band jar, from a 'large' (768x1024) source rather than an undersized one. */ .a7-product-card__image { aspect-ratio: 4 / 5; background: var(--a7-paper-2); overflow: hidden; } .a7-product-card__image img { height: 100%; object-fit: cover; transition: transform 420ms ease; width: 100%; } .a7-product-card:hover .a7-product-card__image img { transform: scale(1.02); } .a7-product-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.85rem; padding: 1.25rem; } .a7-product-card__kicker { color: var(--a7-moss); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .a7-product-card__title { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1.15; margin: 0; } .a7-product-card__summary { color: var(--a7-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; } .a7-product-card__footer { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; margin-top: auto; } .a7-product-card__price { color: var(--a7-berry); font-weight: 800; } .a7-product-card__link { background: var(--a7-red); border-radius: 999px; color: #fff; font-size: 0.9rem; font-weight: 700; padding: 0.7rem 1.25rem; text-decoration: none; white-space: nowrap; } .a7-product-card__link:hover { background: var(--a7-red-deep); color: #fff; } .a7-product-card__link--preview, .a7-product-card__link--preview:hover { background: var(--a7-paper-2); color: var(--a7-muted); cursor: default; } .a7-faq-list { display: grid; gap: 0.85rem; } /* The list sits in a constrained-layout group, which caps and centers every child at content-size. Grid rows then shrink-wrapped each

to its question text, so the accordion rendered as a ragged centered stack. Force the rows back to full width; the group's own .alignwide sets the outer bound. Selector is body-prefixed to outrank WP's constrained-layout rule. */ body .wp-block-group.a7-faq-list > * { margin-inline: 0; max-width: 100%; width: 100%; } .a7-faq-item { padding: 1.1rem 1.25rem; } .a7-faq-item summary { color: var(--a7-ink); cursor: pointer; font-weight: 800; } .a7-faq-item p { color: var(--a7-muted); margin-bottom: 0; } .a7-contact-panel { min-height: 100%; } .a7-contact-list { display: grid; gap: 0.85rem; list-style: none; padding-left: 0; } .a7-contact-list li { align-items: baseline; border-bottom: 1px solid var(--a7-border); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; padding-bottom: 0.85rem; } .a7-contact-list strong { color: var(--a7-muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .a7-footer { background: var(--a7-ink); color: var(--a7-paper); } .a7-footer a { color: var(--a7-paper); } .a7-footer-logo { background: var(--a7-white); border-radius: 12px; display: inline-block; padding: 0.6rem 0.85rem; } .a7-footer-logo img { border-radius: 0; display: block; } .a7-footer-nav { list-style: none; margin: 0; padding-left: 0; } .a7-footer-nav li { margin: 0 0 0.4rem; } .a7-footer-nav li:last-child { margin-bottom: 0; } .a7-footer .a7-social { gap: 0.6rem; margin-top: 1.25rem; } .a7-footer .a7-social .wp-social-link { background: rgba(251, 248, 241, 0.08); border-radius: 50%; height: 38px; margin: 0; transition: background-color 180ms ease; width: 38px; } .a7-footer .a7-social .wp-social-link:hover { background: rgba(251, 248, 241, 0.18); } .a7-footer .a7-social .wp-social-link a { align-items: center; color: var(--a7-paper); display: flex; height: 100%; justify-content: center; padding: 0; width: 100%; } .a7-footer .a7-social .wp-social-link svg { height: 18px; width: 18px; } .a7-footer .a7-restock-btn .wp-block-button__link:hover { background: var(--a7-yellow); filter: brightness(0.94); } .a7-footer-disclaimer { color: var(--a7-paper); max-width: 46ch; opacity: 0.7; text-align: right; } .a7-footer-legal { margin: 0.2rem 0 0; opacity: 0.75; } .a7-footer-legal__sep { color: var(--a7-muted); margin: 0 0.4em; opacity: 0.6; } @media (max-width: 640px) { .a7-footer-bottom { flex-direction: column; align-items: center; text-align: center; } .a7-footer-bottom > .wp-block-group { align-items: center; } .a7-footer-disclaimer { text-align: center; max-width: none; } } @media (max-width: 1000px) { /* 1.04 is a display line-height: it works for a one- or two-word desktop headline and fails on a phone, where every h1 here wraps to three lines and Fraunces' descenders run into the cap-heights of the line below. 1.14 is the smallest value that clears them at 2.75rem. */ h1, .has-display-font-size { font-size: 2.75rem !important; line-height: 1.14 !important; text-wrap: balance; } h2, .has-heading-2-font-size { font-size: 2.2rem !important; line-height: 1.12 !important; } .wp-block-columns { flex-wrap: wrap !important; } .wp-block-columns > .wp-block-column { flex-basis: 100% !important; width: 100% !important; } .a7-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .a7-section { padding-block: 3.5rem; } .a7-section-tight { padding-block: 3rem; } .alignwide { margin-left: auto !important; margin-right: auto !important; max-width: calc(100vw - 2.5rem) !important; width: calc(100vw - 2.5rem) !important; } .wp-site-blocks, .wp-block-group, .wp-block-columns, .wp-block-column { box-sizing: border-box; max-width: 100%; } /* Keep the top bar a single horizontal row on mobile: logo left, cart + hamburger right. (Was a left-aligned vertical stack.) */ .a7-header > .wp-block-group.alignwide { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; } .a7-hero-card { overflow: visible; } .a7-product-grid { grid-template-columns: 1fr; } .a7-ingredient-list { columns: 1; } .a7-logo img { height: 46px; } } /* WooCommerce overrides */ /* ── Product collection grid ─────────────────────────────────────────────── */ .wp-block-woocommerce-product-collection .wc-block-product-template, .wc-block-grid__products { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } /* ── Shop toolbar: result count flush left, sorting flush right ──────────── */ /* The group is alignwide so its edges line up with the product grid below. WooCommerce ships its own margins on both blocks; zero them so the row sits on one baseline instead of drifting. */ .a7-shop-toolbar { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); row-gap: 0.75rem; } .a7-shop-toolbar .woocommerce-result-count, .a7-shop-toolbar .woocommerce-ordering, .a7-shop-toolbar .wc-block-product-results-count, .a7-shop-toolbar .wc-block-catalog-sorting { margin: 0; } .a7-shop-toolbar .woocommerce-result-count { color: var(--a7-muted); font-size: 0.92rem; text-align: left; } @media (max-width: 640px) { .a7-shop-toolbar { justify-content: flex-start; } } /* ── Catalog ordering dropdown (brand the raw native without JS and WC's p.stars anchors with it — both are branded. */ #reviews .woocommerce-Reviews-title { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.4rem; font-weight: 700; margin: 0 0 0.5rem; } #reviews .woocommerce-noreviews { color: var(--a7-muted); margin: 0 0 1.5rem; } #reviews .comment-reply-title { color: var(--a7-ink); display: block; font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.4rem; font-weight: 500; margin: 0 0 1.25rem; } #reviews .comment-form { display: grid; gap: 1.15rem; margin-top: 0.5rem; max-width: 640px; } #reviews .comment-form .comment-notes { color: var(--a7-muted); font-size: 0.85rem; margin: 0; } #reviews .comment-form .required { color: var(--a7-red); } #reviews .comment-form > p, #reviews .comment-form .comment-form-rating { margin: 0; } #reviews .comment-form label { color: var(--a7-ink); display: block; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.35rem; } #reviews .comment-form input#author, #reviews .comment-form input#email, #reviews .comment-form textarea#comment { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 8px; color: var(--a7-ink); font-family: inherit; font-size: 1rem; font-weight: 400; padding: 0.65rem 0.8rem; width: 100%; } #reviews .comment-form textarea#comment { min-height: 120px; resize: vertical; } #reviews .comment-form input#author:focus, #reviews .comment-form input#email:focus, #reviews .comment-form textarea#comment:focus { border-color: var(--a7-red); outline: 2px solid rgba(200, 51, 42, 0.18); } /* Rating control as a native for p.stars a when its rating JS runs — this is what actually shows in-browser). Recolor WC's native star glyphs only — muted default, brand yellow on hover/selection — leaving WC's content/text-indent intact so the glyphs render correctly. */ #reviews .comment-form-rating p.stars { font-size: 1.5rem; line-height: 1; } #reviews .comment-form-rating p.stars a { color: var(--a7-muted); transition: color 120ms ease; } #reviews .comment-form-rating p.stars:hover a, #reviews .comment-form-rating p.stars a:hover, #reviews .comment-form-rating p.stars a:hover ~ a, #reviews .comment-form-rating p.stars.selected a.active, #reviews .comment-form-rating p.stars.selected a.active ~ a, #reviews .comment-form-rating p.stars.selected a:not(.active) { color: var(--a7-yellow); } /* Consent row: inline checkbox + muted label. */ #reviews .comment-form-cookies-consent { align-items: center; display: flex; gap: 0.5rem; } #reviews .comment-form-cookies-consent input { accent-color: var(--a7-red); margin: 0; } #reviews .comment-form-cookies-consent label { color: var(--a7-muted); font-weight: 400; margin: 0; } #reviews .comment-form .form-submit { margin-top: 0.25rem; } #reviews .comment-form .form-submit input#submit { width: auto; } /* ── Quantity + add-to-cart row ──────────────────────────────────────────── */ /* Verified 2026-06-01 (headless 360–768px + live computed styles): the PDP and shop-archive add-to-cart render cleanly — no "jammed qty/button" symptom. The WC `.wp-block-add-to-cart-form` wrapper is display:block, not a competing flex container, so `form.cart` below is the only flex layer (qty + button sit in a row above 640px, stacked at ≤640px). WooCommerce's block stylesheet overrides the `.qty` width below to ~76px; left as-is — functionally fine. */ .woocommerce form.cart { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; } /* Buy Now: dark companion to the red Add-to-cart pill, straight to checkout. */ .woocommerce form.cart .a7-buy-now-button, .woocommerce form.cart button.button.a7-buy-now-button { background: var(--a7-ink); } .woocommerce form.cart .a7-buy-now-button:hover, .woocommerce form.cart button.button.a7-buy-now-button:hover { background: #000; box-shadow: 0 8px 24px rgba(31, 26, 20, 0.28); } /* Quantity stepper: branded − / + group that replaces the OS-native number spinner so the PDP quantity matches the sort dropdown + the Cart block stepper. The wrapper is styled whether or not the JS enhancement has run, so it degrades to a plain branded box with JS off. */ .woocommerce div.product form.cart .quantity { align-items: stretch; background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 999px; display: inline-flex; overflow: hidden; } .woocommerce div.product form.cart .quantity .a7-qty-step { background: transparent; border: 0; color: var(--a7-ink); cursor: pointer; font-size: 1.2rem; font-weight: 600; line-height: 1; padding: 0 0.95rem; transition: background-color 140ms ease, color 140ms ease; } .woocommerce div.product form.cart .quantity .a7-qty-step:hover { background: var(--a7-red); color: #fff; } .woocommerce div.product form.cart .quantity input.qty { -moz-appearance: textfield; appearance: textfield; background: transparent; border: 0; border-radius: 0; color: var(--a7-ink); font-size: 1rem; font-weight: 600; padding: 0.85rem 0; text-align: center; width: 2.75rem; } .woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button, .woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── Responsive grid breakpoints ─────────────────────────────────────────── */ @media (max-width: 1000px) { .wp-block-woocommerce-product-collection .wc-block-product-template, .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .wp-block-woocommerce-product-collection .wc-block-product-template, .wc-block-grid__products { grid-template-columns: 1fr; } /* Phones: quantity stepper sized to its content on its own row, then Add to cart + Buy Now as equal-width halves below. The ::after is a zero-height full-width flex break placed (via order) between the stepper and the buttons, so the stepper pill wraps its controls instead of stretching to the full row width (which left an empty pill beside it). */ .woocommerce form.cart { flex-direction: row; flex-wrap: wrap; align-items: stretch; column-gap: 1rem; row-gap: 0.85rem; } .woocommerce div.product form.cart .quantity { flex: 0 0 auto; order: 0; } .woocommerce form.cart::after { content: ""; flex: 0 0 100%; height: 0; order: 1; } .woocommerce form.cart .single_add_to_cart_button { flex: 1 1 0; min-width: 0; order: 2; text-align: center; } } /* ── Related products: match the shop grid ───────────────────────────────── */ /* WC renders this template as a 5-up flex row (`is-flex-container columns-5`), which collapses to skinny, spread-out cards whenever fewer than 5 related items exist. The shop uses a different template (`__responsive`, gridded above), so scoping to `.is-flex-container` re-homes only the related row onto the same 3-up grid — cards fill the row and match the shop. Grid stretch gives equal-height rows, so no per-item width math or `height:100%` is needed. */ .wc-block-product-template.is-flex-container { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); } .wc-block-product-template.is-flex-container > li.wc-block-product { display: flex !important; flex-direction: column; width: auto !important; /* cancel WC's columns-N calc() flex width */ } .wc-block-product-template.is-flex-container > li.wc-block-product > .wp-block-woocommerce-product-button { margin-top: auto; } @media (max-width: 1000px) { .wc-block-product-template.is-flex-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .wc-block-product-template.is-flex-container { grid-template-columns: 1fr; } } .wc-block-product-template .wc-block-product { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem; transition: box-shadow 220ms ease, transform 220ms ease; } /* left-align content; push the button to the bottom so card footers line up */ .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-price, .wc-block-product-template .wc-block-product .wc-block-components-product-price, .wc-block-product-template .wc-block-product .price { text-align: left; } .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button, .wc-block-product-template .wc-block-product .wp-block-button { margin-top: auto; text-align: left; } .wc-block-product-template .wc-block-product:hover { box-shadow: var(--a7-shadow); transform: translateY(-2px); } /* ── Product title: prevent crush / word-break ───────────────────────────── */ .wc-block-product-template .wc-block-product .wp-block-post-title { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1.25; word-break: normal; overflow-wrap: break-word; text-align: left !important; } /* ── Product image: 4:5 aspect ratio (see the base rule above) ──────────── */ .wc-block-product-template .wc-block-product .wc-block-components-product-image, .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image { aspect-ratio: 4 / 5; background: var(--a7-paper-2); border-radius: 10px; margin-bottom: 0.85rem; overflow: hidden; } /* Card polish: the whole card lifts on hover, so let the photo push in with it rather than sitting flat inside a moving frame. */ .wc-block-product-template .wc-block-product .wc-block-components-product-image img, .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img { transition: transform 420ms ease; } .wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img, .wc-block-product-template .wc-block-product:hover .wp-block-woocommerce-product-image img { transform: scale(1.03); } .wc-block-product-template .wc-block-product .wc-block-components-product-image img, .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img { height: 100%; object-fit: cover; width: 100%; } /* ── Fix circular buttons in product collection ──────────────────────────── */ .wc-block-product-template .wp-block-button.wc-block-components-product-button { align-items: flex-start; display: block; margin-top: 0.75rem; white-space: nowrap; } .wc-block-product-template .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button, .wc-block-product-template .wp-block-button.wc-block-components-product-button .wp-block-button__link { display: inline-block !important; padding: 0.75rem 1.4rem; white-space: nowrap; width: auto !important; } /* ── Out-of-stock badge: archive card ────────────────────────────────────── */ .woocommerce ul.products li.product.outofstock, .wc-block-product-template .wc-block-product.outofstock { position: relative; } .woocommerce ul.products li.product.outofstock::before, .wc-block-product-template .wc-block-product.outofstock::before { background: var(--a7-ink); border-radius: 999px; color: var(--a7-paper); content: "Sold out"; font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.4rem 0.9rem; position: absolute; right: 1rem; text-transform: uppercase; top: 1rem; z-index: 2; } .woocommerce ul.products li.product.outofstock img, .wc-block-product-template .wc-block-product.outofstock img { filter: grayscale(0.35); opacity: 0.85; } .woocommerce ul.products li.product.outofstock .button, .wc-block-product-template .wc-block-product.outofstock .button, .wc-block-product-template .wc-block-product.outofstock .wp-block-button__link, .wc-block-product-template .wc-block-product.outofstock .wc-block-components-product-button__button { background: var(--a7-paper-2); color: var(--a7-muted); pointer-events: none; } /* ── Out-of-stock pill: PDP ──────────────────────────────────────────────── */ .woocommerce .stock.out-of-stock { background: var(--a7-ink); border-radius: 999px; color: var(--a7-paper); display: inline-block; font-family: Inter, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.45rem 0.9rem; text-transform: uppercase; } /* ── Contact form ────────────────────────────────────────────────────────── */ .a7-contact-form { display: grid; gap: 1rem; margin-top: 0.5rem; } .a7-contact-form label { color: var(--a7-ink); display: grid; font-size: 0.9rem; font-weight: 600; gap: 0.35rem; } .a7-contact-form .a7-optional { color: var(--a7-muted); font-weight: 400; } .a7-contact-form input[type="text"], .a7-contact-form input[type="email"], .a7-contact-form input[type="tel"], .a7-contact-form textarea { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 8px; font-family: inherit; font-size: 1rem; font-weight: 400; padding: 0.65rem 0.8rem; width: 100%; } .a7-contact-form input:focus, .a7-contact-form textarea:focus { border-color: var(--a7-red); outline: 2px solid rgba(200, 51, 42, 0.18); } .a7-contact-form .a7-form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .a7-contact-form .a7-form-row { grid-template-columns: 1fr; } } /* Honeypot — visually gone, still in the DOM for bots. */ .a7-contact-form .a7-field-website { position: absolute; left: -9999px; height: 0; margin: 0; overflow: hidden; } .a7-contact-form__submit { background: var(--a7-red); border: none; border-radius: 999px; color: #fff; cursor: pointer; font-size: 0.9rem; font-weight: 700; justify-self: start; padding: 0.85rem 1.8rem; transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .a7-contact-form__submit:hover { background: var(--a7-red-deep); box-shadow: 0 8px 24px rgba(200, 51, 42, 0.22); transform: translateY(-1px); } .a7-form-notice { border-radius: 8px; font-weight: 600; margin: 0; padding: 0.85rem 1rem; } .a7-form-notice--ok { background: #eef6ec; border: 1px solid #cbe3c4; color: #2f5d2a; } .a7-form-notice--err { background: #fdf0ef; border: 1px solid #f0cfcc; color: #8c2722; } /* ── Footer newsletter / restock opt-in ──────────────────────────────────── */ /* Top-align the footer columns. They sit in a CSS grid that stretches every column to the tallest one (the brand block); without this the short Restock column gets stretched and its form floats down with a big gap above it. */ .a7-footer .is-layout-grid { align-items: start; } .a7-newsletter-form .a7-field-website { position: absolute; left: -9999px; height: 0; margin: 0; overflow: hidden; } .a7-newsletter-form { margin-top: 0.75rem; max-width: 20rem; } .a7-newsletter-row { display: flex; flex-direction: column; gap: 0.5rem; } .a7-newsletter-form input[type="email"] { background: var(--a7-paper); border: 1px solid transparent; border-radius: 999px; box-sizing: border-box; color: var(--a7-ink); font-size: 0.95rem; padding: 0.7rem 1.1rem; width: 100%; } .a7-newsletter-form input[type="email"]::placeholder { color: var(--a7-muted); } .a7-newsletter-form input[type="email"]:focus { border-color: var(--a7-yellow); outline: none; } .a7-newsletter-form__submit { background: var(--a7-yellow); border: none; border-radius: 999px; color: var(--a7-ink); cursor: pointer; font-size: 0.9rem; font-weight: 700; padding: 0.7rem 1.4rem; text-align: center; transition: filter 160ms ease, transform 160ms ease; width: 100%; } .a7-newsletter-form__submit:hover { filter: brightness(1.06); transform: translateY(-1px); } .a7-nl-notice { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.5rem; } .a7-nl-notice--ok { color: #b9e6a8; } .a7-nl-notice--err { color: #f4b8b2; } /* ── Sarsaparilla spotlight ──────────────────────────────────────────────── */ .a7-spotlight-card { padding: 1.25rem; position: relative; } .a7-spotlight-card img { border-radius: 16px; display: block; /* Cancel the intrinsic `height` presentational hint so the natural 3:4 ratio is driven by width, as it was when this was a bare . */ height: auto; width: 100%; } .a7-spotlight-price { color: var(--a7-berry); font-size: 1.5rem; font-weight: 700; margin-top: 0.5rem; } .a7-contact-form .a7-optin { align-items: center; display: flex; flex-direction: row; font-weight: 500; gap: 0.5rem; } .a7-contact-form .a7-optin input { accent-color: var(--a7-red); height: 1.05rem; width: 1.05rem; } /* ── Keyboard focus visibility (WCAG 2.4.7) ──────────────────────────────── */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--a7-red); outline-offset: 2px; border-radius: 4px; } /* footer sits on a dark bg — use a light ring there for contrast */ .a7-footer :where(a, button, input):focus-visible { outline-color: var(--a7-paper); } /* Spotlight Buy Now: dark companion to the red "Shop the blend" on the home feature. */ .a7-spotlight .a7-buy-now .wp-block-button__link { background: var(--a7-ink); color: #fff; } .a7-spotlight .a7-buy-now .wp-block-button__link:hover { background: #000; box-shadow: 0 12px 28px rgba(31, 26, 20, 0.2); transform: translateY(-1px); } /* ── Empty cart state ─────────────────────────────────────────────────────── */ /* The empty-cart block ships a centered icon + "Your cart is currently empty!" title, a dotted divider, a "New in store" heading, and a product grid. The grid is the LEGACY `wc-block-grid` markup (Products New widget), a different class namespace from the shop/related templates — so it inherits none of the card chrome and its button falls back to WC's cramped default. The rules below tidy the heading stack and re-home the legacy grid onto the same look as the shop: framed cards, even columns, pill buttons. */ .wp-block-woocommerce-empty-cart-block { margin: 0 auto; max-width: 1000px; padding: 1rem 0 0; text-align: center; } .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin: 0.5rem 0 0; } /* Tighten the dotted divider into a short, centered rule between the title and the "New in store" section so the two halves read as one composition. */ .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { color: var(--a7-muted); margin: 1.75rem auto; max-width: 16rem; opacity: 0.6; } /* "New in store" heading: brand serif, matches the related-products heading. */ .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 0 1.75rem; } /* Re-home the legacy grid onto an even grid like the shop. The base `.wc-block-grid__products` rule above sets `display:grid` (3-up, → 2-up → 1-up at the breakpoints); here we widen to a clean 4-up row so the four catalog items sit on one even line with no stranded card. */ .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; text-align: left; } @media (max-width: 1000px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: 1fr; } } /* Card chrome — mirror `.wc-block-product-template .wc-block-product`. WC's `all-products.css` caps the legacy card with `flex:1 0 25%; max-width:25%` via `.wc-block-grid.has-4-columns .wc-block-grid__product` (specificity 0,3,0). In a grid container the flex is inert, but `max-width:25%` resolves against the 232px track and crushes the card to ~58px. We match that 0,3,0 specificity (via the `.wc-block-grid` wrapper class) and win on source order — theme CSS loads after WC's — to reset the cap. `min-width:0` lets the card fill the track without overflow from long titles. */ .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); display: flex; flex-direction: column; flex: 0 1 auto; margin: 0; max-width: none; min-width: 0; overflow: hidden; padding: 1.25rem; transition: box-shadow 220ms ease, transform 220ms ease; width: auto; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover { box-shadow: var(--a7-shadow); transform: translateY(-2px); } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link { color: inherit; text-decoration: none; } /* Product image: 4:5 framed thumbnail, same as the shop cards. */ .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { aspect-ratio: 4 / 5; border-radius: 10px; margin-bottom: 0.85rem; overflow: hidden; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { height: 100%; object-fit: cover; width: 100%; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { font-family: 'A7Amp', Fraunces, Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1.25; margin-bottom: 0.5rem; text-align: left; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { font-weight: 700; margin-bottom: 0.75rem; text-align: left; } /* Push the button to the card footer so rows line up, and give it the brand pill treatment (the legacy button isn't covered by the global pill rule). */ .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { margin-top: auto; text-align: left; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link { background: var(--a7-red); border: none; border-radius: 999px; color: #fff; display: inline-block; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.9rem; font-weight: 700; padding: 0.75rem 1.4rem; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; white-space: nowrap; width: auto; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: var(--a7-red-deep); box-shadow: 0 8px 24px rgba(200, 51, 42, 0.22); color: #fff; transform: translateY(-1px); }