/*
Theme Name: Shazday
Theme URI: https://shazday.com
Author: Shazday Fruits (built by MasterClaude hub-dev)
Description: Custom WooCommerce theme for shazday.com. Home/Our Story follow the designer's
 Figma; Shop/Product/Cart/Checkout/Contact follow the drafted mockup
 (design/shazday-pages-mockup.html) and design-tokens.md. Mobile-first, native WooCommerce
 templates/hooks (no page builder).
Version: 0.2.3
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
Text Domain: shazday
License: Proprietary
*/

/* ==========================================================================
   1. DESIGN TOKENS — mirrors design-tokens.md exactly (source of truth per
   the [DEV] spec; the Figma Style Guide's own captions are known-wrong).
   ========================================================================== */
:root{
  /* The design has ONE appearance — light. Declaring it stops the browser's own
     UA dark treatment (form controls, scrollbars, canvas) from re-introducing a
     dark surface underneath a light design. See the SINGLE APPEARANCE note below. */
  color-scheme: light;

  --green-900:#3B591A; --green-700:#4A6F21; --green-600:#598527; --green-500:#75994B; --green-100:#E4EDD6;
  --orange-600:#F47521; --orange-100:#FDE6D3;
  --navy-900:#0D2234;
  --accent-blue:#0293BD;

  --gray-50:#FAFAFA; --gray-100:#F5F5F5; --gray-200:#EEEEEE; --gray-300:#E0E0E0; --gray-400:#BDBDBD;
  --gray-500:#9E9E9E; --gray-600:#757575; --gray-700:#616161; --gray-800:#424242; --gray-900:#212121;

  --paper:#FBFAF5; --surface:#FFFFFF; --mist:#F1F5EC; --blush:#FCEFE7;
  /* C9 diff #8 — the Figma "Empowering Farmers" panel background, plus the
     sticky-note paper colour used in that collage. */
  --peach:#FFF5F2; --note:#FFE9B8;
  --line: rgba(13,34,52,0.12); --line-strong: rgba(13,34,52,0.22);
  --ink: var(--navy-900); --muted: rgba(13,34,52,0.62); --faint: rgba(13,34,52,0.42);

  --success:#2EBE78; --success-bg:#E4F9EF; --danger:#EB2B2B; --danger-bg:#FFE8E8;

  --shadow: 0 1px 2px rgba(13,34,52,.06), 0 12px 28px -12px rgba(13,34,52,.18);
  --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --radius-pill: 999px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* C9 diff #1 — Figma's section headings are Josefin Sans Bold. Loaded from
     the same single Google Fonts request as Inter (functions.php). Fallback
     chain keeps a geometric-ish face if the webfont fails. */
  --font-display: 'Josefin Sans', 'Century Gothic', 'Futura', var(--font-body);

  /* v0.2.2 (C1 N1): FIGMA TEXT STYLES for Home / Our Story / header / footer. Values are
     Figma's own (get_design_context of Our Story 157:36609, whose header and footer are the
     same components as Home's, plus the Style Guide 157:43077 text styles), NOT read off a
     screenshot. v0.2.0/0.2.1 sizes were estimated from 0.37-0.51x screenshots (R10), which is
     why small text ran 1-3px small and too light. Sizes apply from the 1180px desktop layout
     up (the 1440 frame); colours apply at every width. */
  --fx-ink:#202020;                    /* section headings (Josefin Sans Bold) */
  --fx-text:#707070;                   /* subtitles, How We Work body + kicker, sticky notes */
  --fx-nav:rgba(25,24,37,.5);          /* nav links: Inter Medium 16 / 1.2 */
  --fx-nav-current:#222831;            /* current nav item: Inter Bold */
  --fx-foot-about:rgba(25,24,37,.5);   /* footer blurb: Inter Medium 20 / 1.6 */
  --fx-foot-title:#191825;             /* footer column titles: Inter Bold 23 / 1.2 */
  --fx-foot-link:rgba(25,24,37,.75);   /* footer links + contact: Inter Regular 18 / 1.6 */
  --fx-card-title:#232323;             /* Innovation card / news card titles: Inter Bold 20 */
  --fx-card-text:#736E6E;              /* Innovation card body (Figma: Open Sans 14) */
  --fx-guide:#C0C0C0;                  /* How We Work dashed guide lines (N4) */
  --fs-nav:16px;      --lh-nav:1.2;    --gap-nav:64px;
  --fs-h2-section:48px; --lh-h2:1.3;   /* Our Values / How We Work / Empowering Farmers / Latest News */
  --fs-lede:16px;     --lh-lede:1.5;   /* section subtitles: Inter Regular 16 / 1.5 */
  --fs-kicker:20px;   --lh-kicker:1.5; /* "How we work": Inter Medium 20 */
  --fs-hww:16px;      --lh-hww:1.6;    /* How We Work body: Inter Regular 16 / 1.6, 476px wide */
  --fs-note:20px;     --lh-note:1.5;   /* sticky notes: Inter Medium 20 / 1.5 */
  --fs-callout-title:20px; --fs-callout:14px; --lh-callout:1.4;
  --fs-btn-more:20px;  /* "View more" (Home): measured 14px cap height on the 1x frame = Inter 20 */
  --fs-photo-title:20px; --fs-photo-text:16px; /* Empowering Farmers photo-card captions */
  --fs-news-title:20px; --fs-news:16px; --fs-more:16px;
  --fs-foot-about:20px; --lh-foot-about:1.6;
  --fs-foot-title:23px; --lh-foot-title:1.2;
  --fs-foot-link:18px;  --lh-foot-link:1.6; --gap-foot:32px;
  --social-size:32px; --social-glyph-box:32px; --gap-social:32px; /* glyph draws ~22px */
}
/* ==========================================================================
   SINGLE APPEARANCE — no dark mode. REMOVED 2026-08-13 (hub-dev, rendered-vs-
   Figma pass).

   THIS WAS THE BUG Ovais reported on 2026-08-12: "the visual currently of the
   site is nowhere close to what is there in figma. even the background is
   incorrect."

   The theme used to ship a `@media (prefers-color-scheme: dark)` block here
   that repainted --paper (the page background) from #FBFAF5 to #0F2434, plus
   every surface, line, ink value AND the brand green/orange. Windows 10/11
   defaults a lot of machines to dark, Ovais's included (verified: HKCU\...\
   Themes\Personalize\AppsUseLightTheme = 0), so his browser reported
   prefers-color-scheme: dark and he was served a dark-navy page against a
   light Figma design. Proven by rendering the same staging URL twice at the
   same moment, changing nothing but the media feature — dark navy vs. the
   intended warm off-white.

   Why it is deleted rather than corrected:
     1. There is no dark design to be faithful to. The Figma file
        (GZeUU0GEAuGXm0wY7rp2NA) contains exactly three frames — Home
        157:21770, Our Story 157:36609, Style Guide 157:43077 — and one
        appearance. The dark palette was invented by the build, not extracted.
     2. design-tokens.md lists the Bases as White #FFFFFF, Blue-Gray #F6F7FA
        and Navy #0D2234, and scopes Navy to "Dark text, footer background
        elements" — never a page surface.
     3. It broke BRAND colour, not just chrome: green #598527 -> #7CA646 and
        orange #F47521 -> #FF8A3D. A brand palette should not shift with an OS
        setting.

   If a dark appearance is ever actually wanted, it needs a Figma dark design
   first, and the brand green/orange must stay put. Do not re-add it by
   inference.
   ========================================================================== */

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto !important; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
/* C9 diff #1 — SECTION HEADINGS are Josefin Sans Bold in Figma (Our Values /
   How We Work / Empowering Farmers / Latest News / Where It All Began — all
   <h2>). Josefin Sans tops out at 700, so 800 would be a synthesized fake
   bold; and it is a wide geometric face, so the -0.02em body tracking is
   released. h1 and h3/h4 deliberately stay on Inter: the fidelity check only
   flagged the section headings, and widening the change would introduce an
   unverified diff of its own. */
h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.005em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; }
::selection{ background:var(--green-100); color:var(--green-900); }
:focus-visible{ outline:2.5px solid var(--orange-600); outline-offset:2px; border-radius:4px; }
.screen-reader-text{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.container{ width:100%; max-width:1360px; margin:0 auto; padding:0 20px; }

.eyebrow{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--orange-600); }
.eyebrow.muted{ color:var(--faint); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-pill); font-weight:700; font-size:14.5px;
  padding:13px 26px; border:1px solid transparent; white-space:nowrap;
  transition:transform .12s ease; cursor:pointer;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--green-600); color:#fff; }
.btn-primary:hover{ background:var(--green-700); color:#fff; }
.btn-outline{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--mist); }
.btn-ghost{ color:var(--muted); font-weight:600; background:none; border:none; }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-block{ width:100%; }

.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }
.trust-badge{
  display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px;
  border-radius:var(--radius-pill); background:var(--mist); border:1px solid var(--line);
  font-size:12.5px; font-weight:700; color:var(--muted);
}
.trust-badge .ic{ width:24px; height:24px; border-radius:50%; flex:none; }
.ic-organic{ background:var(--green-100); }
.ic-chem{ background:var(--orange-100); }
.ic-gmo{ background:#DDEEF7; }
.ic-fresh{ background:#F7E3EE; }

/* placeholder product art — no fake photos; used until real photography lands (see O4) */
.pshot{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; background-size:cover; background-position:center; }
.pshot::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.35), transparent 60%); pointer-events:none; }
.pshot.has-photo::after{ display:none; }
.tone-0{ background:linear-gradient(155deg,#F5A25B,#D9702B); }
.tone-1{ background:linear-gradient(155deg,#7A2436,#3E0F1B); }
.tone-2{ background:linear-gradient(155deg,#3B2A3E,#17101B); }
.tone-3{ background:linear-gradient(155deg,#E4C793,#B4884A); }
.tone-4{ background:linear-gradient(155deg,#5C4E9E,#2A2455); }
.tone-5{ background:linear-gradient(155deg,#B7C97A,#5A7A2E); }

/* Clearly-marked placeholder art (C9). .is-placeholder is the block itself;
   .ph-note is the label INSIDE it and is only ever printed for logged-in
   admins (see shazday_placeholder_note()), so a forgotten placeholder can't
   shout "placeholder" at a customer. .admin-note is the same idea for a
   standalone line of guidance under a section. */
.is-placeholder{ position:relative; }
.ph-note{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:3;
  font-size:10.5px; font-weight:700; line-height:1.35; text-align:center;
  color:#fff; background:rgba(13,34,52,.62); border:1px dashed rgba(255,255,255,.55);
  border-radius:6px; padding:5px 6px;
}
.admin-note{
  font-size:12px; font-weight:600; color:var(--muted); margin-top:14px;
  border-left:3px dashed var(--line-strong); padding-left:10px; max-width:62ch;
}
.ph-inline{ font-style:italic; }

/* ==========================================================================
   3. SITE HEADER / FOOTER (shared across every template — header.php / footer.php)
   ========================================================================== */
/* Rebuilt 2026-10-21 from the Figma header/footer (Home 157:21770). Header:
   script logo left, nav right, transparent over the page (the Figma glows show
   through), no border, not sticky. Footer: #FFF5F2 band, logo + about + filled
   green social icons, then Company / Online Store / Contact Us columns. */
.site-header{
  position:relative; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:transparent;
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; }
.brand img, .brand .brand-logo{ height:44px; width:auto; max-height:none; }
/* list-style:none (2026-08-13): blockified flex items keep their list markers. */
.site-nav{ display:none; gap:var(--gap-nav); font-size:var(--fs-nav); line-height:var(--lh-nav); font-weight:500; color:var(--fx-nav); list-style:none; }
.site-nav a:hover{ color:var(--ink); }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a{ color:var(--fx-nav-current); font-weight:700; }
.header-actions{ display:flex; align-items:center; gap:14px; }
.cart-btn{ position:relative; width:38px; height:38px; border-radius:50%; background:var(--mist); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; }
.cart-btn.is-empty{ display:none; }
.cart-btn svg{ width:17px; height:17px; stroke:var(--ink); }
.cart-count{ position:absolute; top:-4px; right:-4px; background:var(--orange-600); color:#fff; font-size:10px; font-weight:800; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.menu-toggle{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:1px solid var(--line); }
.menu-toggle svg{ width:18px; height:18px; stroke:var(--ink); }
.mobile-nav{ display:none; flex-direction:column; gap:2px; padding:10px 20px 18px; border-bottom:1px solid var(--line); list-style:none; position:relative; z-index:39; background:#fff; }
.mobile-nav li, .mobile-nav ul{ list-style:none; }
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ padding:10px 4px; font-weight:600; font-size:15px; border-bottom:1px solid var(--line); }

.site-footer{ background:#FFF5F2; padding:44px 20px 40px; }
.footer-inner{ max-width:1104px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:30px 20px; }
.site-footer .about{ grid-column:1/-1; }
.site-footer .about .brand-logo{ height:50px; }
.site-footer .about p{ color:var(--fx-foot-about); font-weight:500; font-size:15px; line-height:1.75; max-width:17em; margin-top:18px; }
.site-footer h4{ font-size:17px; font-weight:700; letter-spacing:0; color:var(--fx-foot-title); margin-bottom:22px; }
.site-footer ul{ list-style:none; display:flex; flex-direction:column; gap:22px; }
.site-footer a, .site-footer li span{ color:var(--fx-foot-link); font-size:14px; line-height:1.55; }
.site-footer a:hover{ color:var(--ink); }
.footer-contact ul{ gap:22px; }
.footer-contact li span{ display:block; max-width:15em; }
.social-row{ display:flex; gap:16px; margin-top:34px; }
.social-row a{ width:33px; height:33px; border-radius:50%; background:var(--green-600); color:#fff; display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--green-700); color:#fff; }
.social-row svg{ width:19px; height:19px; fill:currentColor; }
/* v0.2.2 N5: Figma's footer icons are 32px green discs, 32px apart, with a ~22px glyph. The
   glyph paths fill ~17 of their 24-unit box (facebook 17 tall, instagram 14), so a 32px svg box
   draws a ~22px glyph; it was 19px (an ~13px glyph). */
@media (min-width:1180px){
  .social-row{ gap:var(--gap-social); }
  .social-row a{ width:var(--social-size); height:var(--social-size); }
  .social-row svg{ width:var(--social-glyph-box); height:var(--social-glyph-box); flex:none; }
}

/* ==========================================================================
   4. SHARED CARDS + GENERIC SECTIONS — used by the shop loop
   (woocommerce/content-product.php), the blog index/archive and 404.
   Home and Our Story no longer use these: since the 2026-10-21 Figma rebuild
   they are styled in section 13 (".fx-*" classes). The old token-based Home /
   Our Story rules (.hero-collage, .prov-ring, .cat-card, .story-hero,
   .hww-row, .farmers, .quote-card, .sticky ...) were deleted with their markup.
   ========================================================================== */
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.section{ padding:44px 20px; }
.section-head{ max-width:640px; margin-bottom:28px; }
.section-head h2{ font-size:26px; margin-top:8px; }
.section-head p{ color:var(--muted); font-size:14.5px; margin-top:10px; }
.section-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; }
.grid-products{ display:grid; grid-template-columns:1fr; gap:18px; list-style:none; }
.pcard{ position:relative; border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; display:flex; flex-direction:column; gap:12px; background:var(--surface); }
.pcard:hover{ box-shadow:var(--shadow); }
.pcard .cat{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.pcard h3{ font-size:15.5px; font-weight:700; letter-spacing:0; margin-top:2px; line-height:1.3; }
.pcard .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:2px; }
.pcard .price{ font-weight:800; font-size:15.5px; }
.pcard .price small{ font-weight:600; font-size:11.5px; color:var(--faint); }
.pcard .price.price-tbd{ font-weight:700; font-size:12.5px; color:var(--faint); }
.add-cart{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:var(--radius-pill); border:none;
  background:var(--green-600); color:#fff; text-decoration:none;
  font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  line-height:1; white-space:nowrap; text-align:center;
}
.add-cart:hover{ background:var(--green-700); color:#fff; }
.add-cart[disabled], .add-cart.disabled{ background:var(--gray-400); cursor:not-allowed; }
.pcard .add-cart{ flex:1 1 auto; }
.grid-products a.pcard-link{ text-decoration:none; }
.pcard .add_to_cart_button.loading{ opacity:.65; pointer-events:none; }
.pcard .add_to_cart_button.loading::after{ content:""; width:13px; height:13px; margin-left:4px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:shazday-spin .6s linear infinite; }
.pcard .added_to_cart{ font-size:11px; font-weight:700; color:var(--green-700); margin-top:6px; display:block; }
@keyframes shazday-spin{ to{ transform:rotate(360deg); } }
.news-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.news-card{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); }
.news-card .art{ aspect-ratio:16/9; background:linear-gradient(155deg,var(--green-500),var(--green-900)); }
.news-card .body{ padding:16px; }
.news-card .date{ font-size:11.5px; color:var(--faint); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.news-card h3{ font-size:15px; margin-top:8px; }
.news-card p{ font-size:13px; color:var(--muted); margin-top:8px; }
.news-empty{ color:var(--faint); font-size:14px; }

/* ==========================================================================
   6. SHOP (WooCommerce archive-product.php override)
   ========================================================================== */
.shop-hero{ padding:26px 20px 22px; border-bottom:1px solid var(--line); background:var(--mist); }
.shop-hero h1{ font-size:26px; margin-top:8px; }
.shop-hero p{ color:var(--muted); font-size:14.5px; margin-top:8px; max-width:56ch; }
.shop-body{ display:grid; grid-template-columns:1fr; gap:0; }
.filters{ padding:24px 20px; border-bottom:1px solid var(--line); }
.filters h4{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); margin-bottom:14px; }
.filters ul{ list-style:none; margin:0 0 26px; display:flex; flex-direction:column; gap:3px; }
.filters li a{ display:flex; justify-content:space-between; padding:9px 10px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--muted); }
.filters li a.is-current{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.filters li a:hover{ color:var(--ink); }
.filters .count{ font-size:11.5px; color:var(--faint); font-weight:700; }
.shop-grid-wrap{ padding:24px 20px; }
.shop-grid-wrap .grid-products{ padding:0; }
.woocommerce-result-count, .woocommerce-ordering{ font-size:13px; color:var(--muted); margin-bottom:16px; }
.woocommerce-pagination ul{ display:flex; gap:6px; list-style:none; margin-top:26px; }
.woocommerce-pagination a, .woocommerce-pagination span{ display:flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); font-size:13px; font-weight:700; }
.woocommerce-pagination .current{ background:var(--green-600); color:#fff; border-color:var(--green-600); }

/* ==========================================================================
   7. PRODUCT DETAIL
   ========================================================================== */
.crumbs{ padding:16px 20px 0; font-size:12.5px; color:var(--faint); font-weight:600; }
.crumbs a:hover{ color:var(--ink); }
.pd-body{ display:grid; grid-template-columns:1fr; gap:28px; padding:20px 20px 8px; }
.pd-gallery{ display:flex; flex-direction:column; gap:12px; }
.pd-gallery .pshot{ aspect-ratio:4/3; }
/* Native WooCommerce product gallery (woocommerce_show_product_images(),
   fired via woocommerce_before_single_product_summary — see
   content-single-product.php). Thumbnail strip + zoom/lightbox/slider
   behaviour come from WC's own JS (wc-single-product.js), enabled by the
   wc-product-gallery-* theme-support flags in functions.php — restyled
   here, not rebuilt. */
.woocommerce-product-gallery__wrapper{ border-radius:var(--radius-md); overflow:hidden; }
.woocommerce-product-gallery__image img{ border-radius:var(--radius-md); aspect-ratio:4/3; object-fit:cover; }
.flex-control-nav{ display:flex; gap:10px; list-style:none; margin-top:12px; padding:0; }
.flex-control-nav li img{ width:64px; height:64px; border-radius:var(--radius-sm); object-fit:cover; border:2px solid transparent; cursor:pointer; }
.flex-control-nav li img.flex-active{ border-color:var(--green-600); }
.pd-info h1{ font-size:24px; }
/* Native WooCommerce single-product elements (woocommerce_single_product_summary
   hook: title/rating/price/stock/short-description/add-to-cart/meta) —
   mapped to the mockup's look via their real WC classes, not overridden. */
.pd-info .price{ font-size:22px; font-weight:800; margin-top:10px; display:block; }
.pd-info .price.price-tbd{ font-size:15px; font-weight:700; color:var(--faint); }
.pd-info .price ins{ text-decoration:none; }
.pd-info .price del{ opacity:.5; font-size:15px; margin-right:8px; }
.pd-info p.stock{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--success); background:var(--success-bg); padding:5px 12px; border-radius:var(--radius-pill); margin-top:12px; }
.pd-info p.stock::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--success); flex:none; }
.pd-info p.stock.out-of-stock{ color:var(--danger); background:var(--danger-bg); }
.pd-info p.stock.out-of-stock::before{ background:var(--danger); }
.pd-info .woocommerce-product-details__short-description{ color:var(--muted); font-size:14.5px; margin-top:16px; max-width:52ch; }
.pd-info .product_meta{ font-size:12px; color:var(--faint); margin-top:18px; }
.pd-info .product_meta > span{ display:block; margin-top:4px; }
.pd-desc{ color:var(--muted); font-size:14.5px; margin-top:16px; max-width:52ch; }
.pd-badges{ margin-top:20px; }
.pd-ship{ font-size:12.5px; color:var(--faint); margin-top:14px; font-weight:600; }
.related{ padding:30px 20px 40px; border-top:1px solid var(--line); margin-top:20px; }
.related h2{ font-size:16px; margin-bottom:16px; }

/* WooCommerce's own add-to-cart form on the product page (quantity input
   styling is shared/generalized in the CART section below). */
.woocommerce div.product form.cart{ margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.woocommerce div.product .qty::-webkit-inner-spin-button{ opacity:1; }
.woocommerce div.product form.cart .button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-pill); font-weight:700; font-size:14.5px; padding:13px 26px; border:none; background:var(--green-600); color:#fff; }
.woocommerce div.product form.cart .button:hover{ background:var(--green-700); }
.woocommerce div.product form.cart .button.disabled{ background:var(--gray-400); }

/* WooCommerce native tabs (description/reviews) restyled to match the accordion language */
.woocommerce-tabs{ margin-top:30px; border-top:1px solid var(--line); }
.woocommerce-tabs ul.tabs{ list-style:none; display:flex; gap:6px; padding:16px 0 0; }
.woocommerce-tabs ul.tabs li{ font-weight:700; font-size:13.5px; }
.woocommerce-tabs ul.tabs li a{ padding:9px 14px; border-radius:var(--radius-pill); display:block; color:var(--muted); }
.woocommerce-tabs ul.tabs li.active a{ background:var(--green-100); color:var(--green-900); }
.woocommerce-tabs .panel{ padding:18px 2px; color:var(--muted); font-size:13.5px; max-width:60ch; }
.woocommerce-tabs .panel h2{ font-size:15px; color:var(--ink); margin-bottom:8px; }

/* related products block (native WC hook, not template override) */
.related.products{ padding:30px 20px 40px; border-top:1px solid var(--line); margin-top:20px; }
.related.products > h2{ font-size:16px; margin-bottom:16px; }
.related.products ul.products{ list-style:none; display:grid; grid-template-columns:1fr; gap:18px; padding:0; }
.related.products ul.products li.product{ border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; }
.related.products ul.products li.product img{ border-radius:var(--radius-sm); aspect-ratio:1/1; object-fit:cover; }
.related.products ul.products li.product .woocommerce-loop-product__title{ font-size:14.5px; font-weight:700; margin-top:10px; display:block; }
.related.products ul.products li.product .price{ font-weight:800; font-size:14.5px; margin-top:6px; display:block; }

/* ==========================================================================
   8. CART (woocommerce/cart/cart.php override)
   ========================================================================== */
.cart-body{ display:grid; grid-template-columns:1fr; gap:0; }
.cart-list{ padding:24px 20px; }
.cart-list h1{ font-size:22px; margin-bottom:18px; }
.cart-row{ display:grid; grid-template-columns:64px 1fr; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-row .pshot{ width:64px; height:64px; aspect-ratio:auto; border-radius:var(--radius-sm); }
.cart-row .meta{ display:flex; flex-direction:column; gap:6px; }
.cart-row .nm{ font-weight:700; font-size:14.5px; }
.cart-row .cat{ font-size:12px; color:var(--faint); }
.cart-row .row-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; grid-column:1/-1; }
.cart-row .rm{ font-size:12px; color:var(--faint); font-weight:600; background:none; border:none; padding:0; }
.cart-row .rm:hover{ color:var(--danger); }
.cart-row .linetotal{ font-weight:800; font-size:14.5px; }
.cart-empty{ padding:40px 20px; text-align:center; color:var(--muted); }
.summary{ padding:24px 20px; background:var(--mist); }
.summary h2{ font-size:15px; margin-bottom:18px; }
.sum-line{ display:flex; justify-content:space-between; font-size:14px; color:var(--muted); padding:8px 0; }
.sum-line.total{ color:var(--ink); font-weight:800; font-size:16.5px; border-top:1px solid var(--line-strong); margin-top:8px; padding-top:16px; }
.sum-note{ font-size:11.5px; color:var(--faint); margin-top:6px; }
.cart-coupon{ display:flex; gap:8px; margin:16px 0; }
.cart-coupon input{ flex:1; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; font-size:13px; }

/* WooCommerce's own quantity input + proceed-to-checkout button, used
   as-is (native) and restyled to the token system. */
.woocommerce .quantity{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-pill); overflow:hidden; }
.woocommerce .quantity .qty{ width:48px; border:none; text-align:center; font-weight:700; font-size:14px; padding:9px 0; background:transparent; color:var(--ink); }
.summary .wc-proceed-to-checkout{ display:block; width:100%; text-align:center; margin-top:22px; border-radius:var(--radius-pill); font-weight:700; font-size:14.5px; padding:13px 26px; background:var(--green-600); color:#fff; }
.summary .wc-proceed-to-checkout:hover{ background:var(--green-700); }

/* ==========================================================================
   9. CHECKOUT (woocommerce/checkout/form-checkout.php override)
   ========================================================================== */
.steps{ display:flex; gap:10px; padding:20px 20px 0; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--faint); }
.step .n{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:12px; }
.step.is-done .n{ background:var(--green-600); border-color:var(--green-600); color:#fff; }
.step.is-current{ color:var(--ink); }
.step.is-current .n{ border-color:var(--green-600); color:var(--green-600); }
.step-sep{ width:28px; height:1px; background:var(--line-strong); align-self:center; }
.co-body{ display:grid; grid-template-columns:1fr; gap:0; padding-top:8px; }
.co-form{ padding:20px 20px 40px; display:flex; flex-direction:column; gap:24px; }
.field-group h3{ font-size:14px; margin-bottom:14px; }
.field-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:700; color:var(--muted); }
.field input, .field textarea, .field select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select{
  border:1px solid var(--line-strong) !important; border-radius:var(--radius-sm) !important; padding:11px 13px !important;
  font-size:14px !important; font-family:inherit !important; background:var(--surface) !important; color:var(--ink) !important; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2.5px solid var(--orange-600); outline-offset:0; border-color:transparent; }
.woocommerce form .form-row{ margin:0 0 14px; }
.woocommerce form .form-row label{ font-size:12px; font-weight:700; color:var(--muted); }

/* WooCommerce's native payment method list, restyled as the mockup's pay-option cards
   WITHOUT overriding checkout/payment.php — keeps whatever gateways are enabled in
   WooCommerce Settings > Payments driving the markup, satisfying the "configurable,
   not hard-locked" payment requirement. */
.woocommerce-checkout #payment ul.payment_methods{ list-style:none; padding:0; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{
  border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:16px; margin-bottom:10px;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.pay-option-selected{ border-color:var(--green-600); background:var(--green-100); }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label{ font-weight:700; font-size:14px; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"]{ accent-color:var(--green-600); margin-right:10px; }
.woocommerce-checkout #payment div.payment_box{ font-size:12.5px; color:var(--muted); margin-top:10px; padding:12px; background:var(--surface); border-radius:var(--radius-sm); }
.woocommerce-checkout #payment div.form-row.place-order{ margin-top:20px; }
.woocommerce-checkout #payment #place_order{
  width:100%; border-radius:var(--radius-pill); font-weight:700; font-size:14.5px; padding:13px 26px; border:none; background:var(--green-600); color:#fff;
}
.woocommerce-checkout #payment #place_order:hover{ background:var(--green-700); }

/* WooCommerce's native billing/shipping field wrappers (checkout/form-billing.php,
   checkout/form-shipping.php) — two-column responsive grid, matching the
   mockup's .field-grid without a template override of those two files. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px;
}
@media (min-width:640px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper{ grid-template-columns:1fr 1fr; }
}
.woocommerce form .form-row-wide{ grid-column:1/-1; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3{ font-size:14px; margin-bottom:0; }
#ship-to-different-address{ list-style:none; margin-top:18px; font-size:13.5px; font-weight:600; }
#ship-to-different-address label{ display:flex; align-items:center; gap:8px; }
.woocommerce-shipping-fields > h3 ~ p.form-row{ margin-top:14px; }

/* WooCommerce's native order-review table (checkout/review-order.php) —
   restyled with tokens rather than overridden, so cart-quantity/coupon/tax
   recalculation on the checkout page stays exactly WooCommerce's own AJAX
   behaviour. */
.woocommerce-checkout-review-order-table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:13.5px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td{ padding:8px 0; text-align:left; }
.woocommerce-checkout-review-order-table thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); border-bottom:1px solid var(--line); }
.woocommerce-checkout-review-order-table .cart-subtotal th, .woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .shipping th, .woocommerce-checkout-review-order-table .shipping td,
.woocommerce-checkout-review-order-table .tax-rate th, .woocommerce-checkout-review-order-table .tax-rate td{ color:var(--muted); border-top:1px solid var(--line); }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td{ font-weight:800; font-size:16.5px; border-top:1px solid var(--line-strong); }
.woocommerce-checkout-review-order-table td.product-total{ text-align:right; font-weight:700; }

/* ==========================================================================
   10. CONTACT (page-templates/template-contact.php)
   ========================================================================== */
.contact-body{ display:grid; grid-template-columns:1fr; gap:0; }
.contact-info{ padding:28px 20px; display:flex; flex-direction:column; gap:22px; border-bottom:1px solid var(--line); }
.contact-info h1{ font-size:24px; }
.contact-info > p{ color:var(--muted); font-size:14.5px; max-width:44ch; }
.info-card{ display:flex; gap:14px; align-items:flex-start; }
.info-card .ic{ width:42px; height:42px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; flex:none; }
.info-card .ic svg{ width:19px; height:19px; stroke:var(--green-700); }
.info-card .t{ font-weight:700; font-size:14.5px; }
.info-card .d{ font-size:13.5px; color:var(--muted); margin-top:3px; }
.mapcard{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); position:relative; height:150px; background:linear-gradient(180deg, var(--mist), var(--blush)); }
.mapcard .pin{ position:absolute; left:14px; bottom:14px; font-size:12px; font-weight:700; background:var(--surface); padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--line); }
.contact-form{ padding:28px 20px; display:flex; flex-direction:column; gap:16px; }
.form-notice{ padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; }
.form-notice.success{ background:var(--success-bg); color:var(--green-900); }
.form-notice.error{ background:var(--danger-bg); color:var(--danger); }
.field-hp{ position:absolute; left:-9999px; top:-9999px; }

/* ==========================================================================
   11. GENERIC WOOCOMMERCE NOTICES / MISC / MY ACCOUNT — token-consistent
   baseline (not individually art-directed against the mockup, which doesn't
   cover these screens; a visual pass here is a fair follow-up once real
   traffic needs it).
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice{
  background:var(--mist); border-left:4px solid var(--green-600); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:13.5px; margin:0 0 20px; list-style:none;
}
.woocommerce-error{ background:var(--danger-bg); border-left-color:var(--danger); }
.woocommerce-message a.button, .woocommerce-error a.button{
  border-radius:var(--radius-pill); background:var(--green-600); color:#fff; padding:6px 14px; font-weight:700; font-size:12.5px; margin-left:10px;
}
.star-rating{ color:var(--orange-600); }
.woocommerce span.onsale{
  background:var(--orange-600); color:#fff; font-weight:800; font-size:11px; border-radius:var(--radius-pill);
  padding:3px 10px; position:absolute; top:10px; left:10px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a{ display:block; padding:9px 12px; border-radius:var(--radius-sm); font-weight:600; font-size:14px; }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{ background:var(--green-100); color:var(--green-900); }

/* WP core block basics so page content typed into Gutenberg (Our Story body,
   blog posts) inherits the same type system */
.entry-content{ padding:0 20px 40px; max-width:760px; margin:0 auto; font-size:15.5px; color:var(--muted); }
.entry-content > *{ margin-top:1.1em; }
.entry-content h2{ font-size:22px; color:var(--ink); }
.entry-content h3{ font-size:18px; color:var(--ink); }
.entry-content a{ color:var(--green-700); text-decoration:underline; }
.entry-content img{ border-radius:var(--radius-md); }

/* ==========================================================================
   12. RESPONSIVE — mobile-first base above; desktop promotions below.
   ========================================================================== */
@media (min-width:640px){
  .grid-products{ grid-template-columns:repeat(2,1fr); }
  .related.products ul.products{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:861px){
  .site-header{ padding:22px 40px; }
  .site-nav{ display:flex; }
  .menu-toggle{ display:none; }

  .section{ padding:64px 40px; }
  .grid-products{ grid-template-columns:repeat(3,1fr); }



  .news-grid{ grid-template-columns:repeat(3,1fr); }

  .shop-hero{ padding:34px 40px 26px; }
  .shop-body{ grid-template-columns:230px 1fr; }
  .filters{ padding:30px 24px; border-right:1px solid var(--line); border-bottom:none; }
  .shop-grid-wrap{ padding:30px 32px; }
  .shop-grid-wrap .grid-products{ grid-template-columns:repeat(3,1fr); }

  .crumbs{ padding:18px 40px 0; }
  .pd-body{ grid-template-columns:1fr 1fr; gap:44px; padding:24px 40px 8px; }
  .related, .related.products{ padding:36px 40px 44px; }
  .related.products ul.products{ grid-template-columns:repeat(4,1fr); }

  .cart-body{ grid-template-columns:1.6fr 1fr; }
  .cart-list{ padding:34px 40px; border-right:1px solid var(--line); }
  .cart-row{ grid-template-columns:64px 1fr auto auto; }
  .cart-row .row-actions{ display:contents; }
  .summary{ padding:34px 40px; }

  .steps{ padding:26px 40px 0; }
  .co-body{ grid-template-columns:1.5fr 1fr; }
  .co-form{ padding:28px 40px 40px; border-right:1px solid var(--line); }
  .field-grid{ grid-template-columns:1fr 1fr; }
  .field.full, .woocommerce form .form-row-wide{ grid-column:span 2; }

  .contact-body{ grid-template-columns:1fr 1fr; }
  .contact-info{ padding:40px; border-right:1px solid var(--line); border-bottom:none; }
  .contact-form{ padding:40px; }
}

/* ==========================================================================
   13. FIGMA BUILD: Home (157:21770) + Our Story (157:36609). 2026-10-21,
   hub-dev, Shazday [DEV] 20261021-163000-shazday-f2x.

   Built from the frames, not from the tokens. Desktop geometry (>=1180px) is
   transcribed from the 1440px frames: content column 1104px (168px margins),
   section headings Josefin Sans 40px, body Inter. Decorative positions are
   absolute px offsets measured on the frame, so they are exact at 1440 and
   stay centred on wider screens. Below 1180px every section falls back to a
   normal flow layout (no absolute art), which is what the 390px render shows.
   ========================================================================== */
body.is-figma{ background-color:#fff; background-repeat:no-repeat; }
/* Decorative art deliberately runs past the content column; clip it on the x axis
   only (overflow-x:clip keeps y visible, so the orbit ring may overlap the next
   section exactly as in the frame) so the page never scrolls sideways. */
.fx-hero, .fx-prov, .fx-picks, .fx-cats, .fx-story-hero, .fx-values, .fx-hww{ overflow-x:clip; }
body.fx-home{
  background-image:
    radial-gradient(560px 560px at 0 0, rgba(213,225,199,.95), rgba(213,225,199,0) 70%),
    radial-gradient(380px 520px at 100% 980px, rgba(253,222,201,.85), rgba(253,222,201,0) 72%);
}
body.fx-story{
  background-image:
    radial-gradient(520px 520px at 0 860px, rgba(222,231,213,.95), rgba(222,231,213,0) 70%),
    radial-gradient(420px 560px at 100% 1380px, rgba(253,222,201,.8), rgba(253,222,201,0) 72%);
}
.fx-wrap{ width:min(1104px, 100% - 40px); margin-inline:auto; position:relative; }
.fx-h2, .fx-display, .fx-h3{ font-family:var(--font-display); font-weight:700; color:var(--fx-ink); letter-spacing:0; }
.fx-h2{ font-size:30px; line-height:1.25; }
.fx-h3{ font-size:26px; line-height:1.2; }
.fx-lede{ color:var(--fx-text); font-size:15px; line-height:1.7; margin-top:14px; }
.fx-head{ text-align:center; max-width:680px; margin:0 auto; }
.fx-accent{ color:var(--orange-600); }
.fx-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); font-weight:600; font-size:15px; padding:15px 44px; line-height:1.2; white-space:nowrap; transition:transform .12s ease; }
.fx-btn:active{ transform:scale(.97); }
.fx-btn-green{ background:var(--green-600); color:#fff; box-shadow:0 20px 34px -12px rgba(89,133,39,.55), 0 10px 24px -8px rgba(0,0,0,.12); }
.fx-btn-green:hover{ background:var(--green-700); color:#fff; }
.fx-btn-outline{ border:1.5px solid var(--orange-600); color:var(--orange-600); background:#fff; padding:13px 56px; margin-top:26px; }
.fx-btn-outline:hover{ background:#FFF5EE; }
.fx-float, .fx-leaf{ position:absolute; pointer-events:none; user-select:none; display:none; }
.fx-arrow{ display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--orange-600); color:#fff; align-items:center; justify-content:center; flex:none; }
.fx-arrow svg{ width:16px; height:16px; stroke-width:2.4; }
.fx-ring{ position:absolute; border-radius:50%; border:1.5px solid #F8D9CD; pointer-events:none; }

/* ---------- Home: hero ---------- */
.fx-hero{ position:relative; padding:28px 0 40px; }
.fx-hero-grid{ display:flex; flex-direction:column; gap:30px; }
.fx-display{ font-size:44px; line-height:1.22; max-width:410px; }
.fx-hero-copy .fx-btn{ margin-top:30px; }
.fx-hero-media{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fx-tile{ width:100%; border-radius:24px; object-fit:cover; display:block; }
.fx-tile-a, .fx-tile-b{ aspect-ratio:270/298; }
.fx-tile-c{ grid-column:2; grid-row:1 / span 2; height:100%; }
.fx-path{ display:none; }
.fx-badge{ position:absolute; width:52px; height:52px; border-radius:50%; background:var(--orange-600); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -8px rgba(244,117,33,.6); }
.fx-badge svg{ width:26px; height:26px; }
.fx-badge-1{ left:-12px; top:46%; }
.fx-badge-2{ right:24%; bottom:-22px; }

/* ---------- Home: provenance ---------- */
.fx-prov{ position:relative; padding:56px 0 30px; overflow:hidden; }
.fx-prov-stage{ position:relative; width:min(1104px, 100% - 40px); margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.fx-map, .fx-ring-outer, .fx-ring-inner, .fx-dots, .fx-tag, .fx-pin, .fx-prov-path{ display:none; }
.fx-prov-path{ position:absolute; left:0; top:0; width:1104px; height:300px; overflow:visible; }
.fx-prov-path path{ stroke:#598527; stroke-width:1.6; stroke-dasharray:7 7; fill:none; }
.fx-prov-copy{ order:-1; text-align:center; max-width:580px; }
.fx-prov-copy .fx-h2{ font-size:30px; }
.fx-prov-icons{ list-style:none; display:grid; grid-template-columns:repeat(3, 76px); gap:18px 26px; justify-content:center; margin-top:30px; }
.fx-prov-icon{ width:76px; height:76px; border-radius:50%; background:#E8EEE1; color:var(--green-600); display:flex; align-items:center; justify-content:center; }
.fx-prov-icon svg{ width:40px; height:40px; stroke-width:1.5; }

/* ---------- Home: Top-Rated Harvest Picks ---------- */
.fx-picks{ position:relative; padding:56px 0 50px; }
.fx-cards{ position:relative; display:grid; grid-template-columns:1fr; gap:22px; margin-top:44px; }
.fx-card{ position:relative; z-index:1; background:#fff; border-radius:12px; box-shadow:0 6px 30px rgba(0,0,0,.07); padding:21px 15px 30px; display:flex; flex-direction:column; }
.fx-card-link{ display:flex; flex-direction:column; }
.fx-well{ display:flex; align-items:center; justify-content:center; background:#E4EBDC; border-radius:10px; height:189px; overflow:hidden; }
.fx-well .pshot{ width:58%; height:72%; aspect-ratio:auto; border-radius:8px; box-shadow:0 10px 20px -10px rgba(0,0,0,.35); }
.fx-well .pshot.has-photo{ width:100%; height:100%; box-shadow:none; border-radius:0; background:#E4EBDC; }
.fx-well .pshot.has-photo img{ width:100%; height:100%; object-fit:contain; }
.fx-card-name{ font-size:19px; font-weight:600; color:#1E1E1E; margin-top:24px; line-height:1.3; }
.fx-card-size{ font-size:15px; color:#555; margin-top:8px; min-height:1.4em; }
.fx-card-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:42px; }
.fx-card-price, .fx-card-price .amount, .fx-card-price .price{ font-size:22px; font-weight:700; color:#2A2A2A; }
.fx-card-price ins{ text-decoration:none; }
.fx-card-price del{ font-size:14px; opacity:.5; margin-right:6px; }
.fx-card-price .price-tbd{ font-size:13px; color:var(--faint); }
.fx-card .add-cart{ padding:14px 26px; font-size:13px; font-weight:600; letter-spacing:.02em; }
.fx-card .add_to_cart_button.loading{ opacity:.65; pointer-events:none; }
.fx-card .added_to_cart{ font-size:11px; font-weight:700; color:var(--green-700); }
.fx-empty{ color:var(--faint); text-align:center; grid-column:1/-1; }

/* ---------- Home: Explore other categories ---------- */
.fx-cats{ position:relative; padding:60px 0 60px; }
.fx-mosaic{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; }
.fx-tile-card{ position:relative; z-index:1; background:#fff; border-radius:12px; box-shadow:0 6px 30px rgba(0,0,0,.07); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:20px 14px 18px; min-height:220px; }
.fx-tile-card.is-wide{ grid-column:span 2; }
.fx-tile-card img{ max-height:150px; max-width:100%; width:auto; object-fit:contain; }
.fx-tile-label{ align-self:flex-end; display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:#151515; margin-top:12px; text-align:right; }

/* ---------- Home: Available at ---------- */
.fx-retail{ padding:50px 0 70px; text-align:center; }
/* v0.2.3 (t8x): only SET logos render, so the columns follow the count (front-page.php sets
   --fx-logos-n = 1..4 and --fx-logos-m = min(n,2)); a single logo is centred, not left in cell 1.
   With all four set this is exactly the v0.2.2 grid. */
.fx-logos{ display:grid; grid-template-columns:repeat(var(--fx-logos-m, 2), 1fr); gap:28px 10px; margin-top:40px; align-items:center; justify-items:center; }
.fx-logo{ max-height:64px; max-width:150px; object-fit:contain; }

/* ---------- Our Story: S1 hero ---------- */
.fx-story-hero{ position:relative; padding:40px 0 60px; overflow:hidden; }
.fx-arc, .fx-dotgrid{ position:absolute; pointer-events:none; display:none; }
.fx-ring-stage{ position:relative; width:min(1104px, 100% - 40px); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 6px; }
.fx-ring-story{ display:none; }
.fx-ring-item{ height:36px; width:auto; }
.fx-story-copy{ flex-basis:100%; text-align:center; margin-top:18px; }
.fx-story-copy .fx-lede{ max-width:661px; margin-inline:auto; }

/* ---------- Our Story: S2 values ---------- */
.fx-values{ position:relative; padding:40px 0 60px; }
.fx-values-art{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; margin-top:30px; }
.fx-branch, .fx-values-img{ width:min(504px, 100%); height:auto; }
.fx-connector{ display:none; }
.fx-callout{ background:#fff; border-radius:10px; box-shadow:0 8px 34px rgba(0,0,0,.08); padding:22px 24px; max-width:347px; }
.fx-callout h3{ font-size:17px; font-weight:700; letter-spacing:0; color:var(--fx-card-title); }
.fx-callout p{ font-size:13px; line-height:1.6; color:var(--fx-card-text); margin-top:10px; }

/* ---------- Our Story: S3 How We Work ---------- */
.fx-hww{ position:relative; padding:50px 0 60px; }
.fx-guide{ display:none; }
.fx-hww-row{ display:flex; flex-direction:column; gap:22px; margin-top:44px; }
.fx-kicker{ display:block; font-size:15px; font-weight:500; color:var(--fx-text); }
.fx-hww-text .fx-h3{ margin-top:12px; }
.fx-hww-text p{ color:var(--fx-text); font-size:14px; line-height:1.9; margin-top:22px; }
.fx-hww-photo{ position:relative; z-index:1; width:100%; aspect-ratio:540/496; object-fit:cover; border-radius:20px; } /* v0.2.1: above .fx-guide, as in Figma */

/* ---------- Our Story: S4 Empowering Farmers ---------- */
.fx-farmers{ background:#FFF5F2; padding:56px 0 60px; }
.fx-collage{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px; }
.fx-note{
  position:relative; background:#DEE7D4; color:var(--fx-text); font-weight:500; font-size:15px; line-height:1.7;
  padding:56px 18px 22px; min-height:200px; box-shadow:0 6px 14px -8px rgba(0,0,0,.18);
  clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}
.fx-note::after{ content:""; position:absolute; right:0; top:0; width:46px; height:46px; background:#A9C291; clip-path:polygon(0 0, 0 100%, 100% 100%); }
.fx-note-1{ transform:rotate(2deg); }
.fx-note-2{ transform:rotate(-2deg); }
.fx-note-3{ transform:rotate(1.5deg); }
.fx-note-4{ transform:rotate(-2.5deg); }
.fx-photo-card{ margin:0; background:#fff; padding:12px 12px 14px; box-shadow:0 4px 18px rgba(0,0,0,.05); display:flex; flex-direction:column; }
.fx-photo-card.is-wide{ grid-column:span 2; }
.fx-photo-card img{ width:100%; aspect-ratio:263/280; object-fit:cover; }
.fx-photo-card.is-wide img{ aspect-ratio:530/275; }
.fx-photo-empty{ display:flex; align-items:center; justify-content:center; background:#F6F6F6; aspect-ratio:530/275; color:#C4C4C4; }
.fx-photo-empty svg{ width:64px; height:64px; stroke-width:1.4; }
.fx-photo-card figcaption{ text-align:center; margin-top:10px; display:flex; flex-direction:column; gap:3px; }
.fx-photo-card strong{ font-size:16px; font-weight:600; color:#151515; }
.fx-photo-card figcaption span{ font-size:12.5px; color:#6B6B6B; }

/* ---------- Our Story: S5 Latest News ---------- */
.fx-news{ padding:60px 0 70px; }
.fx-news-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:44px; }
.fx-news-card{ background:#fff; border-radius:12px; box-shadow:0 6px 30px rgba(0,0,0,.07); padding:15px 15px 26px; display:flex; flex-direction:column; }
.fx-news-art{ display:block; width:100%; height:189px; border-radius:10px; background:#E4EBDC; object-fit:cover; }
.fx-news-card h3{ font-size:17px; font-weight:700; letter-spacing:0; color:#151515; margin-top:20px; }
.fx-news-card p{ font-size:13.5px; line-height:1.6; color:#444; margin-top:8px; }
.fx-more{ align-self:flex-end; display:inline-flex; align-items:center; gap:12px; font-size:13.5px; font-weight:700; color:#151515; margin-top:16px; }
.fx-news-card.is-soon h3, .fx-news-card.is-soon p{ color:#9A9A9A; }

/* ---------- tablet ---------- */
@media (min-width:640px){
  .fx-cards{ grid-template-columns:repeat(2, 1fr); }
  .fx-mosaic{ grid-template-columns:repeat(4, 1fr); }
  .fx-logos{ grid-template-columns:repeat(var(--fx-logos-n, 4), 1fr); }
  .fx-news-grid{ grid-template-columns:repeat(3, 1fr); }
  .fx-collage{ grid-template-columns:repeat(4, 1fr); }
  .fx-hww-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
  .fx-hww-row.is-flip .fx-hww-photo{ order:-1; }
  .footer-inner{ grid-template-columns:2fr 1fr 1fr 1fr; }
  .site-footer .about{ grid-column:auto; }
}
@media (min-width:861px){
  /* v0.2.2: Figma header = py 32 around the 46px logo (110px band) with the nav flush right.
     space-between used to centre the nav between the logo and the (empty) cart/menu box. */
  .site-header{ padding:33px max(20px, calc((100% - 1104px) / 2)); justify-content:flex-start; gap:0; }
  .site-nav{ margin-left:auto; }
  .cart-btn{ margin-left:24px; }
  .fx-cards{ grid-template-columns:repeat(3, 1fr); }
}

/* ---------- desktop: the 1440 frame geometry ---------- */
@media (min-width:1180px){
  .fx-h2{ font-size:42px; line-height:var(--lh-h2); }
  .fx-cats .fx-h2, .fx-retail .fx-h2,
  .fx-values .fx-h2, .fx-hww .fx-h2, .fx-farmers .fx-h2, .fx-news .fx-h2{ font-size:var(--fs-h2-section); }
  .fx-head{ max-width:667px; }
  .fx-lede{ font-size:var(--fs-lede); line-height:var(--lh-lede); margin-top:16px; }
  .fx-float, .fx-leaf{ display:block; }

  /* hero: copy column 515px, art column from x=683 */
  .fx-hero{ padding:0; height:752px; }
  .fx-hero-grid{ display:grid; grid-template-columns:515px 1fr; gap:0; height:100%; }
  .fx-hero-copy{ padding-top:190px; }
  .fx-display{ font-size:70px; line-height:84px; max-width:450px; }
  .fx-hero-copy .fx-btn{ margin-top:46px; padding:17px 50px; }
  .fx-hero-media{ display:block; height:100%; }
  .fx-tile{ position:absolute; aspect-ratio:auto; }
  .fx-tile-a{ left:0; top:101px; width:270px; height:298px; }
  .fx-tile-b{ left:0; top:433px; width:270px; height:300px; }
  .fx-tile-c{ left:302px; top:218px; width:272px; height:398px; }
  .fx-path{ display:block; position:absolute; left:-120px; top:-108px; width:900px; height:900px; overflow:visible; }
  .fx-path path{ stroke:#598527; stroke-width:1.6; stroke-dasharray:7 7; fill:none; }
  .fx-badge{ width:64px; height:64px; }
  .fx-badge svg{ width:30px; height:30px; }
  .fx-badge-1{ left:-52px; top:385px; }
  .fx-badge-2{ left:317px; top:701px; right:auto; bottom:auto; }

  /* provenance: 1104 x 1040 stage, ring centre (552, 570) */
  .fx-prov{ padding:0; height:1040px; overflow:visible; overflow-x:clip; }
  .fx-prov-stage{ display:block; height:100%; }
  .fx-map{ display:block; position:absolute; left:-148px; top:215px; width:1095px; height:740px; fill:#FFF0E6; }
  .fx-ring-outer, .fx-ring-inner{ display:block; }
  .fx-ring-outer{ width:1100px; height:1100px; left:2px; top:20px; }
  .fx-ring-inner{ width:840px; height:840px; left:132px; top:150px; }
  .fx-dots{ display:block; position:absolute; width:68px; height:300px; background:url(assets/img/decor-diamonds.svg) no-repeat; }
  .fx-dots-a{ left:-99px; top:42px; height:216px; }
  .fx-dots-b{ left:1104px; top:919px; }
  .fx-pin{ display:block; position:absolute; left:616px; top:168px; width:120px; height:120px; color:var(--green-600); }
  .fx-pin svg{ width:100%; height:100%; stroke-width:1.2; }
  .fx-pin svg path{ fill:var(--green-600); }
  .fx-pin svg circle{ fill:#fff; }
  .fx-prov-copy{ position:absolute; left:262px; top:452px; width:580px; }
  .fx-prov-copy .fx-h2{ font-size:42px; line-height:56px; }
  .fx-prov-path{ display:block; }
  .fx-prov-icons{ display:block; margin:0; }
  .fx-prov-icon{ position:absolute; width:100px; height:100px; left:calc(552px + var(--dx) - 50px); top:calc(570px + var(--dy) - 50px); }
  .fx-prov-icon svg{ width:60px; height:60px; stroke-width:1.9; }
  .fx-tag{ display:block; position:absolute; transform:translate(-50%, -50%); color:#fff; font-size:14.5px; font-weight:500; padding:8px 17px; border-radius:2px; white-space:nowrap; }
  .fx-tag::before{ content:""; position:absolute; width:16px; height:18px; background:inherit; clip-path:polygon(0 0, 100% 55%, 45% 60%, 25% 100%); top:-27px; left:-14px; }
  .fx-tag-1{ left:177px; top:410px; background:#A757A4; }
  .fx-tag-2{ left:937px; top:713px; background:#2D4F9E; }
  .fx-tag-2::before{ left:auto; right:-14px; transform:scaleX(-1); }
  .fx-tag-3{ left:325px; top:897px; background:#EE2A7B; }
  .fx-float-walnut{ left:920px; top:468px; }
  .fx-float-almond{ left:-34px; top:668px; } /* v0.2.1: image grew 5px left (1x re-crop) */

  /* picks */
  .fx-picks{ padding:40px 0 60px; } /* v0.2.2 N3: was 110; the categories heading sat 50px low */
  /* "View more": Figma outline pill 211 x 54, 2px orange border, Inter SemiBold 20, 16px under the subtitle. */
  .fx-btn-outline{ font-size:var(--fs-btn-more); padding:13px 52px; border-width:2px; margin-top:24px; }
  .fx-cards{ grid-template-columns:repeat(3, 343px); gap:25px; justify-content:center; margin-top:64px; }
  .fx-card{ min-height:417px; }
  .fx-float-apricot-l{ left:0; top:43px; }
  .fx-float-apricot-r{ right:0; top:297px; }
  .fx-float-shell-1{ left:-117px; top:295px; z-index:0; }
  .fx-float-shell-2{ left:74px; top:417px; z-index:0; }

  /* categories mosaic: 4 x 252, gap 25 / 24, rows 300 (v0.2.2 N2: Figma tiles are 300 tall, 24 apart,
     51px under the subtitle; were 298 / 25 / 54) */
  .fx-cats{ padding:170px 0 122px; } /* v0.2.2 N3: bottom was 150 */
  .fx-leaf-r{ right:0; top:-47px; } /* v0.2.1: image now runs to the frame edge */
  .fx-leaf-l{ left:0; top:630px; }
  .fx-mosaic{ grid-template-columns:repeat(4, 252px); grid-auto-rows:300px; gap:24px 25px; justify-content:center; margin-top:51px; }
  .fx-tile-card{ padding:30px 24px 24px 16px; min-height:0; }
  .fx-tile-card img{ max-height:212px; }
  /* N2: Inter SemiBold 16, 16px from the tile's left / 24 from its right and bottom, so
     "Industrial ingredients" + arrow (212px) fits the 252px tile on one line, as in Figma. */
  .fx-tile-label{ font-size:16px; gap:12px; white-space:nowrap; margin-top:0; }
  .fx-float-mulberry{ left:-107px; top:28px; z-index:0; }
  .fx-float-almond-2{ left:889px; top:612px; z-index:0; }

  /* available at */
  .fx-retail{ padding:120px 0 193px; } /* v0.2.2 N3: bottom was 200, logos margin 84 */
  .fx-logos{ grid-template-columns:repeat(var(--fx-logos-n, 4), 312px); justify-content:center; margin-top:64px; width:calc(312px * var(--fx-logos-n, 4)); margin-left:calc((1104px - 312px * var(--fx-logos-n, 4)) / 2); }

  /* footer columns at x = 0 / 420 / 649 / 908 of the 1104 column */
  .site-footer{ padding:48px 0; } /* Figma py 48 (was 47 / 64) */
  .footer-inner{ grid-template-columns:420px 229px 259px 196px; gap:0; }
  .site-footer .about p{ font-size:var(--fs-foot-about); line-height:var(--lh-foot-about); margin-top:32px; max-width:256px; } /* Figma box 278 holds a hard break before "principles." (6 lines); 256 gives the same 6 lines without a copy change */
  .site-footer h4{ font-size:var(--fs-foot-title); line-height:var(--lh-foot-title); margin-bottom:var(--gap-foot); }
  .site-footer a, .site-footer li span{ font-size:var(--fs-foot-link); line-height:var(--lh-foot-link); }
  .site-footer ul, .footer-contact ul{ gap:var(--gap-foot); }
  .footer-contact li span{ max-width:203px; }
  .social-row{ margin-top:64px; }

  /* Our Story S1: ring centre (552, 341) of the stage, radius 261 */
  .fx-story-hero{ padding:0; height:792px; overflow:visible; overflow-x:clip; }
  .fx-arc{ display:block; border-radius:50%; border:1.2px solid #F8D9CD; }
  .fx-arc-a{ width:1016px; height:1016px; left:-638px; top:-656px; }
  .fx-arc-b{ width:1140px; height:1140px; left:calc(100% - 350px); top:300px; }
  .fx-dotgrid{ display:block; }
  .fx-dotgrid-a{ left:15px; top:79px; width:117px; height:204px; background:url(assets/img/decor-dots-a.svg) no-repeat; }
  .fx-dotgrid-b{ right:11px; top:604px; width:171px; height:150px; background:url(assets/img/decor-dots-b.svg) no-repeat; }
  .fx-ring-stage{ display:block; height:100%; }
  .fx-ring-story{ display:block; width:522px; height:522px; left:291px; top:80px; border-color:#FBE3DA; }
  .fx-ring-item{ position:absolute; height:auto; left:calc(552px + var(--dx)); top:calc(341px + var(--dy)); transform:translate(-50%, -50%); }
  .fx-story-copy{ position:absolute; left:221px; top:250px; width:661px; margin:0; }
  .fx-story-copy .fx-h2{ font-size:40px; line-height:54px; }
  .fx-story-copy .fx-lede{ font-size:14px; line-height:24px; margin-top:20px; }

  /* S2 values: art box 1104 x 460 */
  /* v0.2.2 N3: section tops from Figma's own block positions (Our Values block top 941,
     Innovation card 1148, How We Work block 1839, rows 2102 / +562, Culture panel 3942-5094,
     Latest News block 5258, cards 5453, footer 6087). Was: values 44/110 + art 36, hww 180/218,
     row 1 at 140 then 66, farmers 100/106 + collage 56, news 170/177 + grid 74. */
  .fx-values{ padding:39px 0 110px; }
  .fx-values-art{ display:block; height:460px; margin-top:13px; }
  .fx-branch, .fx-values-img{ position:absolute; left:301px; top:183px; width:504px; }
  .fx-connector{ display:block; position:absolute; left:731px; top:274px; width:260px; height:120px; }
  .fx-callout{ position:absolute; left:797px; top:68px; width:348px; padding:24px; }
  .fx-callout h3{ font-size:var(--fs-callout-title); line-height:normal; }
  .fx-callout p{ font-size:var(--fs-callout); line-height:var(--lh-callout); margin-top:8px; }

  /* S3 How We Work: two 540px columns inside the 1104 column, guides at 12 / 552 / 1092 */
  .fx-hww{ padding:189px 0 216px; }
  /* N4: Figma's guides are 1px #C0C0C0 lines dashed 4px on / 4px off (read off the frame's own
     pixels at x = 180 / 720 / 1260). They were 1px dashed #E2E2E2 borders, which read as a faint
     solid line. Drawn as an explicit gradient dash so every browser gives the same 4/4 pattern. */
  .fx-guide{ display:block; position:absolute; top:150px; bottom:-216px; width:1px;
    background:repeating-linear-gradient(to bottom, var(--fx-guide) 0 4px, transparent 4px 8px); }
  .fx-guide-1{ left:12px; }
  .fx-guide-2{ left:552px; }
  .fx-guide-3{ left:1092px; }
  .fx-hww-row{ grid-template-columns:540px 540px; gap:0; justify-content:center; margin-top:62px; }
  .fx-hww .fx-head + .fx-hww-row{ margin-top:137px; }
  /* Figma rows: 476px text + 64px gap + 540x500 photo (radius 32), 62px between rows;
     kicker 20 / 1.5, 12px to the 40px title (line-height 1.5), 24px to the body. */
  .fx-hww-row .fx-hww-text{ padding:0 64px 0 0; }
  .fx-hww-row.is-flip .fx-hww-text{ padding:0 0 0 64px; }
  .fx-hww-text p{ font-size:var(--fs-hww); line-height:var(--lh-hww); margin-top:24px; }
  .fx-kicker{ font-size:var(--fs-kicker); line-height:var(--lh-kicker); }
  .fx-hww-photo{ height:500px; border-radius:32px; }
  .fx-hww-text .fx-h3{ font-size:40px; line-height:1.5; margin-top:12px; }

  /* S4 Empowering Farmers: collage box 1161 x 840, Figma offsets */
  .fx-farmers{ padding:93px 0 101px; }
  .fx-collage{ display:block; position:relative; width:1161px; height:780px; margin:52px 0 0 calc((1104px - 1161px) / 2); }
  .fx-collage > *{ position:absolute; }
  .fx-note{ width:249px; height:310px; font-size:var(--fs-note); line-height:var(--lh-note); padding:66px 20px 20px; }
  .fx-note-1{ left:15px; top:10px; }
  .fx-note-2{ left:291px; top:4px; }
  .fx-note-3{ left:638px; top:432px; }
  .fx-note-4{ left:914px; top:420px; }
  .fx-photo-card{ width:293px; padding:15px 15px 18px; }
  /* N1: Figma card captions = title Inter SemiBold 20 / 1.5 #212121, line Inter Regular 16 #424242 */
  .fx-photo-card strong{ font-size:var(--fs-photo-title); line-height:1.5; color:var(--gray-900); }
  .fx-photo-card figcaption span{ font-size:var(--fs-photo-text); line-height:1.5; color:var(--gray-800); }
  .fx-photo-card figcaption{ gap:0; }
  .fx-photo-card.is-wide{ left:584px; top:0; width:573px; }
  .fx-photo-card.is-farmer{ left:0; top:401px; }
  .fx-photo-card.is-mulberry{ left:315px; top:401px; }
  .fx-photo-card img{ height:280px; aspect-ratio:auto; }
  .fx-photo-card.is-wide img, .fx-photo-empty{ height:276px; aspect-ratio:auto; }

  /* S5 Latest News: 3 x 341, gap 31 */
  .fx-news{ padding:164px 0 189px; }
  .fx-news-grid{ grid-template-columns:repeat(3, 341px); gap:31px; justify-content:center; margin-top:69px; }
  .fx-news-card{ min-height:445px; padding:16px 15px 26px; }
  .fx-news-art{ height:190px; }
  .fx-news-card h3{ font-size:var(--fs-news-title); color:var(--fx-card-title); margin-top:16px; }
  .fx-news-card p{ font-size:var(--fs-news); line-height:normal; color:var(--fx-card-title); }
  .fx-more{ font-size:var(--fs-more); }
}