:root {
  --green-900: #084b2d;
  --green-800: #0b5b35;
  --green-700: #0f6a3d;
  --green-600: #21844c;
  --lime: #9ab83f;
  --lime-soft: #e9f0cf;
  --cream: #fbf8ef;
  --sand: #f3ead9;
  --gold: #c39a43;
  --ink: #1f2a24;
  --muted: #68736c;
  --line: #e4e8e3;
  --white: #fff;
  --shadow: 0 18px 50px rgba(17, 68, 41, .10);
  --radius: 20px;
  --container: 1200px;
}

/* UAE Dirham symbol (U+20C3) — self-hosted from the MIT-licensed "dirham"
   package (github.com/pooyagolchian/dirham), sans variant. unicode-range
   means the browser only pulls this tiny font for that one codepoint;
   every other character keeps rendering in Inter. No markup changes
   needed anywhere — the symbol is emitted by the woocommerce_currency_symbol
   filter in inc/woocommerce.php and just falls through to this font. */
@font-face {
  font-family: "Dirham-Sans";
  src: url("../fonts/dirham-sans.woff2") format("woff2"),
       url("../fonts/dirham-sans.woff") format("woff"),
       url("../fonts/dirham-sans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20C3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, "Dirham-Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.section { padding: 68px 0; }
.section--compact { padding: 48px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 1000; padding: 10px 14px; background: var(--white); transform: translateY(-140%); }
.skip-link:focus { transform: translateY(0); }

.announcement { background: var(--green-900); color: var(--white); font-size: .78rem; }
.announcement__inner { min-height: 34px; display: flex; align-items: center; justify-content: center; }
.announcement p { margin: 0; }
/* Welcome text + translate widget travel together as one group (so the
   widget stays right next to the text at any breakpoint, including mobile
   where .announcement__links below is hidden) rather than being pushed to
   the opposite end of the bar. */
.announcement__welcome { display: flex; align-items: center; gap: 14px; }
/* GTranslate's own widget renders inside #announcement-translate but is
   never shown — it's an inline-EXPANDING accordion, not an overlay dropdown
   (see gtranslate-dropdown.js), so it's kept off-screen while that script
   builds a real overlay dropdown from its scraped flags/labels, inserted as
   this element's next sibling. */
.announcement__translate { display: none; }
.gt-dropdown__toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 160px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.08); color: var(--white); font-size: .7rem; font-weight: 700; cursor: pointer; }
.gt-dropdown__toggle:hover { background: rgba(255,255,255,.16); }
.gt-dropdown__toggle span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gt-dropdown__flag { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 2px; object-fit: cover; }
.gt-dropdown__list { z-index: 999999; margin: 0; padding: 6px 0; max-height: 280px; overflow-y: auto; min-width: 190px; list-style: none; border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.gt-dropdown__list[hidden] { display: none; }
.gt-dropdown__option { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--ink); font-size: .8rem; font-weight: 650; cursor: pointer; }
.gt-dropdown__option:hover { color: var(--green-700); background: var(--cream); }
.gt-dropdown__option[aria-selected="true"] { color: var(--green-700); font-weight: 800; }
.gt-dropdown__option .gt-dropdown__flag { width: 18px; height: 18px; }
.announcement__links { display: none; gap: 18px; }

.site-header { position: relative; z-index: 40; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.mobile-header { min-height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.mobile-header__actions { justify-self: end; display: flex; align-items: center; gap: 2px; }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; color: var(--green-900); background: transparent; }
.icon-button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(154, 184, 63, .45); outline-offset: 2px; }
.brand { width: 102px; justify-self: center; }
.brand img { width: 100%; aspect-ratio: 3.2 / 1; object-fit: contain; }
.cart-count { position: absolute; right: 2px; top: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; color: var(--white); background: var(--lime); font-size: .68rem; font-weight: 800; }
.desktop-header, .main-nav { display: none; }

.mobile-drawer, .search-sheet { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; }
.mobile-drawer.is-open, .search-sheet.is-open { pointer-events: auto; visibility: visible; }
.mobile-drawer__backdrop, .search-sheet__backdrop { position: absolute; inset: 0; border: 0; background: rgba(6, 28, 17, .58); opacity: 0; transition: opacity .25s ease; }
.mobile-drawer.is-open .mobile-drawer__backdrop, .search-sheet.is-open .search-sheet__backdrop { opacity: 1; }
.mobile-drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(86vw, 360px); padding: 18px 22px; background: var(--white); transform: translateX(-102%); transition: transform .3s ease; overflow-y: auto; }
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mobile-drawer__head img { width: 112px; aspect-ratio: 3.2 / 1; object-fit: contain; }
.mobile-drawer__head .icon-button { font-size: 1.8rem; }
.mobile-drawer nav { display: grid; margin-top: 16px; }
.mobile-drawer nav > a, .mobile-drawer summary { padding: 13px 2px; border-bottom: 1px solid var(--line); font-weight: 700; list-style: none; }
.mobile-drawer summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.mobile-drawer summary::-webkit-details-marker { display: none; }
.mobile-drawer summary::after { content: "⌄"; color: var(--muted); }
.mobile-drawer details[open] summary::after { content: "⌃"; }
.mobile-drawer details a { display: block; padding: 10px 18px; color: var(--muted); }
.drawer-contact { display: block; margin-top: 24px; padding: 13px 16px; border-radius: 12px; color: var(--white); background: var(--green-700); text-align: center; font-weight: 800; }

.search-sheet { display: grid; place-items: start center; padding-top: 70px; }
.search-sheet__form { position: relative; z-index: 1; width: min(92vw, 600px); padding: 22px; border-radius: 18px; background: var(--white); transform: translateY(-30px); opacity: 0; transition: .25s ease; }
.search-sheet.is-open .search-sheet__form { transform: translateY(0); opacity: 1; }
.search-sheet__form > label { display: block; margin-bottom: 10px; font-weight: 800; }
.search-sheet__form > div { display: grid; grid-template-columns: 1fr auto; }
.search-sheet input { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.search-sheet button[type="submit"] { border: 0; padding: 0 18px; border-radius: 0 12px 12px 0; color: var(--white); background: var(--green-700); font-weight: 800; }
.search-sheet p { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }

.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero-track { position: relative; min-height: 700px; }
.hero-slide { position: absolute; inset: 0; min-height: 700px; padding: 52px 0 70px; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
.hero-slide--organic { background: linear-gradient(to bottom, var(--white), rgba(255,255,255,0) 220px), radial-gradient(circle at 80% 25%, rgba(154,184,63,.2), transparent 28%), linear-gradient(145deg, #fffdf7, #f4f0df); }
.hero-slide--tea { background: linear-gradient(145deg, #f8f1e7, #ede8d8); }
.hero-slide__inner { display: grid; gap: 24px; }
.hero-copy { text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--green-700); font-size: .76rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--lime); }
.eyebrow--light { color: #e8f2cf; }
.eyebrow--light::before { background: #d4e69c; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; color: var(--green-900); line-height: 1.08; letter-spacing: -.025em; }
h1 { margin-bottom: 18px; font-size: clamp(2.5rem, 12vw, 4.8rem); }
h2 { margin-bottom: 16px; font-size: clamp(2rem, 8vw, 3.5rem); }
.hero-copy > p { max-width: 620px; margin: 0 auto 24px; color: var(--muted); font-size: 1rem; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: .9rem; font-weight: 850; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: var(--white); background: var(--green-700); box-shadow: 0 12px 30px rgba(15,106,61,.2); }
.button--outline { border-color: var(--green-700); color: var(--green-700); background: transparent; }
.button--light { color: var(--green-900); background: var(--white); }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green-700); font-size: .9rem; font-weight: 800; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.hero-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--green-800); font-size: .8rem; font-weight: 750; }
.hero-points li::before { content: "✓"; margin-right: 6px; color: var(--lime); }
.hero-visual { position: relative; display: grid; place-items: center; min-height: 300px; }
.hero-visual > img { position: relative; z-index: 2; width: min(100%, 520px); filter: drop-shadow(0 24px 20px rgba(15, 69, 41, .16)); }
.hero-orbit { position: absolute; border-radius: 50%; background: rgba(154,184,63,.16); }
.hero-orbit--one { width: 290px; height: 290px; }
.hero-orbit--two { width: 210px; height: 210px; border: 1px dashed rgba(15,106,61,.25); background: transparent; }
.hero-badge { position: absolute; right: 4%; bottom: 12px; z-index: 3; width: 94px; height: 94px; display: grid; place-content: center; border: 6px solid rgba(255,255,255,.7); border-radius: 50%; color: var(--white); background: var(--green-700); text-align: center; box-shadow: var(--shadow); }
.hero-badge strong { font-family: Georgia, serif; font-size: 1.45rem; line-height: 1; }
.hero-badge span { max-width: 64px; font-size: .62rem; line-height: 1.1; text-transform: uppercase; }
.hero-visual--tea img { max-width: 360px; }
.hero-controls { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero-controls > button:not(.hero-pause) { width: 28px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(8,75,45,.2); }
.hero-controls > button.is-active:not(.hero-pause) { background: var(--green-700); }
.hero-pause { width: 30px; height: 30px; border: 1px solid rgba(8,75,45,.2); border-radius: 50%; color: var(--green-800); background: rgba(255,255,255,.7); font-size: .7rem; }

.section-heading { margin-bottom: 28px; }
.section-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 8vw, 3.2rem); }
.section-heading--center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-heading--center .eyebrow { justify-content: center; }
.section-heading--split { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.hide-mobile { display: none; }

.category-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 12px; overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.category-chip { scroll-snap-align: start; padding: 12px 10px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); text-align: center; transition: .2s ease; }
.category-chip:hover { transform: translateY(-4px); border-color: rgba(154,184,63,.7); box-shadow: var(--shadow); }
.category-chip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.category-chip span { display: block; margin-top: 10px; color: var(--green-900); font-size: .82rem; font-weight: 800; line-height: 1.3; }

.products-section { background: #fcfdfb; }
.product-tabs { display: flex; max-width: 100%; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.product-tabs button { white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--white); font-size: .78rem; font-weight: 750; }
.product-tabs button.is-active { border-color: var(--green-700); color: var(--white); background: var(--green-700); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.product-card { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card[hidden] { display: none; }
.product-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.08; padding: 14px; background: #fbfcfa; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-badge { position: absolute; left: 9px; top: 9px; z-index: 2; padding: 4px 7px; border-radius: 999px; color: var(--white); background: var(--green-700); font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.product-badge--sale { background: #a3482f; }
.wishlist-button { position: absolute; right: 8px; top: 8px; z-index: 2; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--green-800); background: rgba(255,255,255,.9); font-size: 1.1rem; }
.wishlist-button.is-active { color: #a3482f; background: #fff3f0; }
.product-card__body { padding: 12px; }
.product-category { margin-bottom: 4px; color: var(--green-600); font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.product-card h3 { min-height: 2.8em; margin-bottom: 12px; color: var(--ink); font-size: .87rem; line-height: 1.4; }
.product-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card__bottom strong { color: var(--green-900); font-size: .78rem; }
.product-card__bottom s { display: block; color: #929a95; font-size: .65rem; font-weight: 500; }
.add-to-cart { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--white); background: var(--green-700); font-size: 1.25rem; line-height: 1; }
.section-cta { margin-top: 28px; text-align: center; }

.quality-strip { background: var(--green-900); color: var(--white); overflow: hidden; }
.quality-strip__inner { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; gap: 30px; padding-block: 15px; overflow-x: auto; font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; scrollbar-width: none; }
.quality-strip__inner span::before { content: "✦"; margin-right: 10px; color: var(--lime); }

.story-grid { display: grid; gap: 36px; }
.story-visual { position: relative; }
.story-visual__panel { min-height: 340px; display: grid; place-items: center; border-radius: 36% 64% 51% 49% / 50% 42% 58% 50%; background: linear-gradient(145deg, var(--lime-soft), #f5f0dd); overflow: hidden; }
.story-visual__panel img { width: 94%; filter: drop-shadow(0 18px 18px rgba(8,75,45,.12)); }
.story-stat { position: absolute; right: 0; bottom: -18px; min-width: 128px; padding: 16px; border-radius: 16px; color: var(--white); background: var(--green-700); box-shadow: var(--shadow); }
.story-stat strong { display: block; font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.story-stat span { font-size: .72rem; }
.story-copy > p { color: var(--muted); }
.story-features { display: grid; gap: 12px; margin: 24px 0; }
.story-features > div { display: flex; gap: 12px; align-items: flex-start; }
.story-features > div > span { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--lime-soft); font-weight: 900; }
.story-features p { display: grid; margin: 0; line-height: 1.35; }
.story-features small { color: var(--muted); }

.service-benefits { background: var(--cream); }
.service-benefits__grid { display: grid; gap: 12px; }
.service-benefits article { display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: 16px; background: var(--white); }
.service-icon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--green-900); background: var(--lime-soft); font-size: 1.25rem; }
.service-benefits h3 { margin-bottom: 2px; color: var(--green-900); font-size: .98rem; }
.service-benefits p { margin: 0; color: var(--muted); font-size: .8rem; }

.sustainability { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(135deg, var(--green-900), var(--green-700)); }
.sustainability::before { content: ""; position: absolute; inset: auto -20% -35% auto; width: 520px; height: 520px; border-radius: 50%; background: rgba(154,184,63,.14); }
.sustainability__inner { position: relative; display: grid; gap: 38px; }
.sustainability h2 { color: var(--white); }
.sustainability__copy > p { color: rgba(255,255,255,.78); }
.sustainability__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }
.sustainability__stats div { padding: 14px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.06); text-align: center; }
.sustainability__stats strong { display: block; font-family: Georgia, serif; font-size: 1.25rem; }
.sustainability__stats span { display: block; font-size: .62rem; color: rgba(255,255,255,.72); }
.sustainability__art { position: relative; min-height: 300px; border-radius: 20px; background: linear-gradient(#b9dbce 0 56%, #4e8b52 56% 100%); overflow: hidden; }
.sustainability__art img { position: absolute; z-index: 4; right: 8%; bottom: 8%; width: 160px; filter: drop-shadow(0 15px 15px rgba(0,0,0,.2)); }
.sun { position: absolute; top: 28px; right: 32px; width: 56px; height: 56px; border-radius: 50%; background: #f5d16d; box-shadow: 0 0 0 15px rgba(245,209,109,.18); }
.hill { position: absolute; bottom: 0; border-radius: 50% 50% 0 0; }
.hill--one { left: -10%; width: 75%; height: 48%; background: #6ca461; }
.hill--two { right: -12%; width: 72%; height: 38%; background: #3f7c49; }
.palm { position: absolute; z-index: 3; bottom: 22%; color: #205f37; font-size: 5.5rem; transform: rotate(180deg); }
.palm--one { left: 12%; }
.palm--two { left: 36%; font-size: 4rem; }

.offer-banner { padding-block: 48px; }
.offer-banner__inner { position: relative; display: grid; gap: 20px; padding: 32px 24px; border-radius: 24px; color: var(--white); background: linear-gradient(135deg, #8b4a28, #bf7c3c); overflow: hidden; }
.offer-banner h2 { color: var(--white); }
.offer-banner p { color: rgba(255,255,255,.8); }
.offer-banner img { width: 100%; max-height: 260px; object-fit: contain; filter: drop-shadow(0 18px 15px rgba(0,0,0,.18)); }

.arrival-grid { display: grid; gap: 14px; }
.arrival-feature { display: grid; gap: 16px; padding: 28px 22px; border-radius: 20px; background: linear-gradient(145deg, #ede7da, #f8f4eb); overflow: hidden; }
.arrival-feature > div > span, .arrival-mini span { color: var(--green-700); font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.arrival-feature h3 { margin: 10px 0; font-family: Georgia, serif; color: var(--green-900); font-size: 1.75rem; line-height: 1.1; }
.arrival-feature p { color: var(--muted); }
.arrival-feature img { width: 100%; max-height: 300px; object-fit: contain; }
.arrival-mini { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 18px; }
.arrival-mini img { width: 120px; height: 120px; object-fit: contain; border-radius: 14px; background: #fbfcfa; }
.arrival-mini h3 { margin: 5px 0 8px; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.arrival-mini strong { color: var(--green-800); }

.testimonials { background: var(--cream); }
.testimonial-grid { display: grid; gap: 14px; }
.testimonial-grid figure { margin: 0; padding: 24px; border: 1px solid rgba(154,184,63,.25); border-radius: 18px; background: var(--white); }
.stars { color: var(--gold); letter-spacing: .12em; }
.testimonial-grid blockquote { margin: 14px 0 22px; color: #3f4c44; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.55; }
.testimonial-grid figcaption { display: flex; gap: 10px; align-items: center; }
.testimonial-grid figcaption > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--green-700); font-size: .72rem; font-weight: 850; }
.testimonial-grid figcaption div { display: grid; }
.testimonial-grid figcaption small { color: var(--muted); }

.certification-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.certification-row span { min-height: 74px; display: grid; place-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 50%; color: var(--green-800); background: var(--white); text-align: center; font-family: Georgia, serif; font-size: .9rem; font-weight: 750; }

.journal-grid { display: grid; gap: 16px; }
.journal-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; }
.journal-card__image { position: relative; width: 112px; height: 130px; border-radius: 12px; background-position: center; background-size: cover; }
.journal-card__image--one { background-image: linear-gradient(rgba(8,75,45,.18),rgba(8,75,45,.18)), url('../img/cat-superfoods.webp'); }
.journal-card__image--two { background-image: linear-gradient(rgba(8,75,45,.18),rgba(8,75,45,.18)), url('../img/cat-culinary.webp'); }
.journal-card__image--three { background-image: linear-gradient(rgba(8,75,45,.18),rgba(8,75,45,.18)), url('../img/cat-fruits.webp'); }
.journal-card__image span { position: absolute; left: 8px; top: 8px; width: 44px; padding: 6px; border-radius: 8px; color: var(--white); background: var(--green-700); text-align: center; font-weight: 850; line-height: 1; }
.journal-card__image small { font-size: .55rem; }
.journal-card > div:last-child > p { margin-bottom: 5px; color: var(--green-600); font-size: .63rem; font-weight: 750; text-transform: uppercase; }
.journal-card h3 { margin-bottom: 10px; color: var(--green-900); font-family: Georgia, serif; font-size: 1rem; line-height: 1.35; }

.newsletter { padding: 54px 0; color: var(--white); background: var(--green-700); }
.newsletter__inner { display: grid; gap: 22px; }
.newsletter h2 { color: var(--white); }
.newsletter p { margin-bottom: 0; color: rgba(255,255,255,.75); }
.newsletter__form { display: grid; grid-template-columns: 1fr auto; }
.newsletter__form input { min-width: 0; padding: 14px; border: 0; border-radius: 12px 0 0 12px; }
.newsletter__form button { border: 0; padding: 0 18px; border-radius: 0 12px 12px 0; color: var(--green-900); background: var(--lime); font-weight: 850; }

.site-footer { padding: 56px 0 24px; color: rgba(255,255,255,.75); background: #073b25; }
.footer-grid { display: grid; gap: 30px; }
.footer-brand img { width: 150px; aspect-ratio: 3.2 / 1; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p, .footer-grid > div:last-child p { max-width: 400px; font-size: .85rem; }
.footer-grid h2 { margin-bottom: 12px; color: var(--white); font-family: inherit; font-size: .95rem; letter-spacing: 0; }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 8px; }
.footer-grid a { font-size: .84rem; }
.footer-grid a:hover { color: var(--white); }
.social-row { display: flex; gap: 8px; }
.social-row a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: var(--white); font-weight: 800; }
.footer-bottom { display: flex; flex-direction: column; gap: 4px; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .72rem; }
.footer-bottom p { margin: 0; }

.whatsapp-fab { position: fixed; right: 18px; bottom: 18px; z-index: 35; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: #1fa855; box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: 1.4rem; }

/* Floating mini-cart bucket — mirrors .whatsapp-fab's size/shadow, stacked
   directly above it on the same (right) side rather than the opposite
   corner. .mini-cart-panel is opened/closed + animated by mini-cart-fab.js
   (GSAP); the [hidden] attribute is the no-JS/reduced-motion fallback.
   z-index is above .site-header's (40) since the panel opens upward and,
   on short viewports, can extend up behind the header otherwise. */
.mini-cart-fab { position: fixed; right: 18px; bottom: 84px; z-index: 45; }
.mini-cart-fab__toggle { position: relative; width: 52px; height: 52px; border: 0; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--green-700); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.mini-cart-panel { position: absolute; right: 0; bottom: 64px; width: min(320px, calc(100vw - 36px)); max-height: min(70vh, 480px); overflow-x: hidden; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); transform-origin: bottom right; }
.mini-cart-panel[hidden] { display: none; }
.mini-cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mini-cart-panel__head strong { color: var(--green-900); font-size: .9rem; }
.mini-cart-panel__close { border: 0; padding: 2px 4px; color: var(--muted); background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.mini-cart-panel__close:hover { color: var(--ink); }

.mini-cart-panel .woocommerce-mini-cart { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mini-cart-panel .mini_cart_item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 20px 6px 0; border-bottom: 1px solid var(--line); font-size: .76rem; line-height: 1.25; }
.mini-cart-panel .mini_cart_item .variation { flex: 1 1 100%; margin: 0; padding-left: 40px; color: var(--muted); font-size: .7rem; }
.mini-cart-panel .mini_cart_item .variation p { margin: 0; }
.mini-cart-panel .mini_cart_item:last-child { border-bottom: 0; }
.mini-cart-panel .mini_cart_item > a:not(.remove) { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 700; text-decoration: none; }
.mini-cart-panel .mini_cart_item > a:not(.remove):hover { color: var(--green-700); }
.mini-cart-panel .mini_cart_item > a:not(.remove) > img { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: #fbfcfa; }
.mini-cart-panel .mini_cart_item a:not(.remove) { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.mini-cart-panel .mini_cart_item .quantity { flex: 0 0 auto; margin-left: auto; padding-right: 6px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.mini-cart-panel .mini_cart_item .remove { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: .9rem; line-height: 1; text-decoration: none; }
.mini-cart-panel .mini_cart_item .remove:hover { color: #a3482f; background: #fff3f0; }
.mini-cart-panel .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--green-900); font-weight: 850; font-size: .88rem; }
.mini-cart-panel .woocommerce-mini-cart__buttons { display: grid; gap: 6px; margin: 10px 0 0; }
.mini-cart-panel .wc-forward { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 18px; border: 1px solid var(--green-700); border-radius: 999px; color: var(--green-700); background: transparent; font-size: .78rem; font-weight: 800; text-decoration: none; }
.mini-cart-panel .wc-forward.checkout { color: var(--white); background: var(--green-700); }
.mini-cart-panel .woocommerce-mini-cart__empty-message { margin: 14px 0; color: var(--muted); font-size: .82rem; text-align: center; }

/* GTranslate's floating language switcher (plugin-configured position:fixed,
   inline style top:20px;right:20px) defaults to sitting right on top of the
   announcement bar / header cart badge at that position. Relocate it to the
   top of the same right-side FAB stack as the WhatsApp button and mini-cart
   bucket instead — needs !important to beat the plugin's inline style. */
#gt_float_wrapper { top: auto !important; bottom: 150px !important; right: 18px !important; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; padding: 10px 16px; border-radius: 999px; color: var(--white); background: var(--green-900); font-size: .8rem; font-weight: 750; transform: translate(-50%, 130px); opacity: 0; transition: .25s ease; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 560px) {
  .container { width: min(100% - 48px, var(--container)); }
  .category-scroller { grid-auto-columns: 28%; }
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  .certification-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 768px) {
  .section { padding: 88px 0; }
  .section--compact { padding: 58px 0; }
  .hero-track, .hero-slide { min-height: 590px; }
  .hero-slide { padding: 70px 0; }
  .hero-slide__inner { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .hero-copy { text-align: left; }
  .hero-copy > p { margin-left: 0; }
  .hero-actions, .hero-points { justify-content: flex-start; }
  .hero-visual { min-height: 420px; }
  .category-scroller { grid-auto-flow: initial; grid-template-columns: repeat(4,1fr); overflow: visible; }
  .hide-mobile { display: inline-flex; }
  .section-heading--split { align-items: center; }
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
  .product-card__body { padding: 16px; }
  .product-card h3 { font-size: .98rem; }
  .story-grid { grid-template-columns: .95fr 1.05fr; align-items: center; gap: 68px; }
  .story-visual__panel { min-height: 500px; }
  .service-benefits__grid { grid-template-columns: repeat(3,1fr); }
  .sustainability__inner { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .sustainability__art { min-height: 430px; }
  .offer-banner__inner { grid-template-columns: 1.05fr .95fr; align-items: center; padding: 44px; }
  .arrival-grid { grid-template-columns: 1.25fr .75fr; }
  .arrival-feature { grid-row: span 2; grid-template-columns: 1fr .8fr; align-items: center; padding: 38px; }
  .testimonial-grid { grid-template-columns: repeat(3,1fr); }
  .certification-row { grid-template-columns: repeat(6,1fr); }
  .journal-grid { grid-template-columns: repeat(3,1fr); }
  .journal-card { display: block; padding: 0; overflow: hidden; }
  .journal-card__image { width: 100%; height: 220px; border-radius: 0; }
  .journal-card > div:last-child { padding: 20px; }
  .newsletter__inner { grid-template-columns: 1fr minmax(360px,.8fr); align-items: center; }
  .footer-grid { grid-template-columns: 1.4fr .75fr 1fr 1.2fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .announcement__inner { justify-content: space-between; }
  .announcement__links { display: flex; }
  .mobile-header { display: none; }
  .desktop-header { min-height: 105px; display: grid; grid-template-columns: 170px minmax(320px,1fr) auto auto; gap: 24px; align-items: center; }
  .brand--desktop { width: 160px; }
  .site-search { display: grid; grid-template-columns: 140px 1fr 48px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .site-search select, .site-search input { min-width: 0; border: 0; background: var(--white); }
  .site-search select { padding: 0 14px; border-right: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
  .site-search input { padding: 13px 16px; }
  .site-search button { display: grid; place-items: center; padding: 0; border: 0; color: var(--white); background: var(--green-700); }
  .site-search button svg { display: block; }
  .header-contact { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
  .header-contact__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--lime-soft); }
  .header-contact span:last-child, .desktop-cart-count { display: grid; }
  .header-contact small, .desktop-cart small { color: var(--muted); font-size: .65rem; }
  .header-contact strong, .desktop-cart strong { color: var(--green-900); font-size: .78rem; }
  .header-actions { display: flex; align-items: center; gap: 10px; }
  .header-actions > a:not(.desktop-cart) { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green-900); }
  .desktop-cart { display: flex; align-items: center; gap: 8px; }
  .main-nav { display: block; color: var(--white); background: var(--green-700); }
  .main-nav__inner { min-height: 52px; display: flex; align-items: stretch; }
  .category-menu-button { width: 220px; display: flex; align-items: center; gap: 10px; border: 0; padding: 0 18px; color: var(--green-900); background: var(--lime); font-size: .8rem; font-weight: 850; }
  .desktop-menu { display: flex; align-items: stretch; gap: 2px; margin: 0 0 0 20px; padding: 0; list-style: none; }
  .desktop-menu > li { position: relative; display: flex; }
  .desktop-menu a { height: 52px; display: flex; align-items: center; gap: 5px; padding: 0 15px; font-size: .8rem; font-weight: 750; white-space: nowrap; }
  .desktop-menu a:hover, .desktop-menu a.is-active { background: rgba(255,255,255,.08); }
  .submenu-caret { font-size: .6rem; transition: transform .15s ease; }
  .desktop-menu li:hover > a .submenu-caret, .desktop-menu li:focus-within > a .submenu-caret { transform: rotate(180deg); }
  .nav-offer { margin-left: auto; display: grid; place-items: center; padding: 0 4px; color: #eff8d5; font-size: .78rem; font-weight: 800; }

  /* "Browse Categories" mega menu. The mockup's category-menu-button was a
     static, unwired <button> (no panel at all — see CLAUDE.md), so this
     whole panel is new. Opens on :hover/:focus-within like the plain
     .sub-menu dropdowns below, plus a JS .is-open class for touch/click
     (site.js) since hover doesn't apply there. Kept out of the flex stretch
     so the button's own height is unaffected by the invisible panel. */
  .category-menu { position: relative; display: flex; }
  .category-mega-menu { position: absolute; top: 100%; left: 0; z-index: 60; width: min(760px, calc(100vw - 32px)); margin-top: 0; padding: 22px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; background: var(--white); border-radius: 0 0 20px 20px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
  .category-menu:hover .category-mega-menu, .category-menu:focus-within .category-mega-menu, .category-menu.is-open .category-mega-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .18s ease, transform .18s ease, visibility 0s; }
  .category-mega-menu__categories { display: grid; gap: 2px; align-content: start; }
  .category-mega-menu__categories a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-size: .84rem; font-weight: 700; text-decoration: none; }
  .category-mega-menu__categories a:hover, .category-mega-menu__categories a.is-active { color: var(--green-700); background: var(--cream); }
  .category-mega-menu__categories img { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; }
  /* Right column: a fixed border/padding wrapper, holding one
     [data-products-for] panel per category (all rendered up front — see
     heritage_category_mega_menu()) — site.js shows/hides them on
     hover/focus of the matching category link, everything else stays put. */
  .category-mega-menu__products-wrap { min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
  .category-mega-menu__products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-content: start; }
  .category-mega-menu__products[hidden] { display: none; }
  .category-mega-menu__products-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .category-mega-menu__products-head span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
  .category-mega-menu__products-head a { color: var(--green-700); font-size: .76rem; font-weight: 800; text-decoration: none; }
  .category-mega-menu__product { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
  .category-mega-menu__product img { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--line); background: #fbfcfa; object-fit: contain; }
  .category-mega-menu__product span { font-size: .76rem; font-weight: 700; line-height: 1.3; }
  .category-mega-menu__product strong { color: var(--green-900); font-size: .78rem; }

  /* Dropdown submenus for items with children (e.g. Services > Coconut
     Plantation/Manufacturing, Shop > Our Offers) — the mockup's own nav
     never had these, this is new to support the site's real menu content. */
  .desktop-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 60; display: none; flex-direction: column; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; border-radius: 0 0 14px 14px; background: var(--white); box-shadow: var(--shadow); }
  .desktop-menu li:hover > .sub-menu, .desktop-menu li:focus-within > .sub-menu { display: flex; }
  .desktop-menu .sub-menu a { height: auto; padding: 10px 18px; color: var(--ink); font-weight: 650; }
  .desktop-menu .sub-menu a:hover, .desktop-menu .sub-menu a.is-active { color: var(--green-700); background: var(--cream); }
  .hero-track, .hero-slide { min-height: 620px; }
  .hero-slide__inner { gap: 50px; }
  .hero-copy > p { font-size: 1.08rem; }
  .category-scroller { grid-template-columns: repeat(8,1fr); gap: 14px; }
  .product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .product-grid .product-card:nth-child(n+5) { display: none; }
  .product-card[hidden] { display: none !important; }
  .quality-strip__inner { justify-content: space-between; overflow: visible; }
  .whatsapp-fab { right: 26px; bottom: 26px; }
  .mini-cart-fab { right: 26px; bottom: 92px; }
  #gt_float_wrapper { right: 26px !important; bottom: 158px !important; }
}

@media (min-width: 1280px) {
  .container { width: min(100% - 64px, var(--container)); }
  .product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@supports (content-visibility: auto) {
  main > section:not(.hero):not(.category-shortcuts) { content-visibility: auto; contain-intrinsic-size: 800px; }
}

/* ==========================================================================
   Inner-page components (page hero, panels, shop/product/cart/checkout,
   account, auth, blog, contact, b2b, prose, 404) — shared across templates
   ========================================================================== */
.page-hero{padding:34px 0;background:linear-gradient(145deg,#fffdf7,#f2eedf);border-bottom:1px solid var(--line)}
.page-hero__inner{display:grid;gap:10px}.page-hero h1{margin:0;font-size:clamp(2.25rem,10vw,4rem)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:.78rem}.breadcrumbs a{color:var(--green-700);font-weight:750}.breadcrumbs span+span:before,.breadcrumbs a+span:before,.breadcrumbs a+a:before{content:'›';margin-right:8px;color:#a6aea8}
.page-intro{max-width:760px;margin:10px 0 0;color:var(--muted)}
.content-pad{padding:44px 0 72px}.panel{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(17,68,41,.05)}
.panel__head{padding:18px 20px;border-bottom:1px solid var(--line)}.panel__body{padding:20px}
.panel h2,.panel h3{font-family:inherit;letter-spacing:0}.panel h2{font-size:1.2rem}.panel h3{font-size:1rem;color:var(--green-900)}
.muted{color:var(--muted)}.small{font-size:.82rem}.price{color:var(--green-900);font-weight:850}.sale-price s{display:block;color:#929a95;font-size:.75em;font-weight:500}
.field{display:grid;gap:7px}.field label{font-size:.82rem;font-weight:800;color:var(--green-900)}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}.field textarea{min-height:125px;resize:vertical}
.form-grid{display:grid;gap:14px}.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.checkbox{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:.82rem}.checkbox input{margin-top:4px}
.shop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.shop-toolbar p{margin:0;color:var(--muted);font-size:.82rem}.shop-toolbar select{padding:11px 36px 11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.shop-layout{display:grid;gap:24px}.filter-panel{padding:18px}.filter-panel details{border-bottom:1px solid var(--line);padding:14px 0}.filter-panel details:first-child{padding-top:0}.filter-panel summary{font-weight:850;color:var(--green-900);cursor:pointer}.filter-list{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.84rem}.filter-list a,.filter-list label{display:flex;justify-content:space-between;gap:12px}.filter-list input{margin-right:6px}
.product-grid--page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-grid--page .product-card{min-width:0}
.pagination{display:flex;justify-content:center;gap:7px;margin-top:28px}.pagination a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-weight:800}.pagination a.is-current{color:#fff;background:var(--green-700);border-color:var(--green-700)}
.category-banner{display:grid;gap:18px;align-items:center;padding:24px;border-radius:22px;background:linear-gradient(135deg,var(--green-900),var(--green-700));color:#fff;margin-bottom:26px;overflow:hidden}.category-banner h2{color:#fff;margin-bottom:8px}.category-banner p{color:rgba(255,255,255,.75);margin-bottom:0}.category-banner img{max-height:210px;justify-self:center;object-fit:contain;filter:drop-shadow(0 15px 12px rgba(0,0,0,.18))}
.product-layout{display:grid;gap:30px}.product-gallery{display:grid;gap:10px}.product-gallery__main{position:relative;display:grid;place-items:center;min-height:350px;padding:24px;border-radius:22px;background:#f8faf6;border:1px solid var(--line)}.product-gallery__main img{max-height:460px;object-fit:contain}.product-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.product-thumb{padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}.product-thumb img{width:100%;height:86px;object-fit:contain}.product-thumb.is-current{border-color:var(--green-700)}
.product-summary .eyebrow{margin-bottom:7px}.product-summary h1{font-size:clamp(2rem,9vw,3.5rem)}.rating-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:13px;color:var(--muted);font-size:.82rem}.rating-row strong{color:var(--gold);letter-spacing:.08em}.product-price{font-size:1.55rem;margin-bottom:14px}.product-copy{color:var(--muted)}.stock-pill{display:inline-flex;margin:6px 0 18px;padding:7px 12px;border-radius:999px;background:#e8f4ec;color:var(--green-800);font-size:.76rem;font-weight:850}.stock-pill.is-out{background:#fff0eb;color:#a43d25}.purchase-row{display:grid;grid-template-columns:104px 1fr;gap:10px;margin:16px 0}
/* Tag-qualified div.qty, not bare .qty: WooCommerce's own quantity <input>
   also carries class="qty" (input-text qty text), so an unqualified .qty
   rule here would apply this same grid/border-radius/overflow box model
   to that input too, clipping the +/- stepper. */
div.qty{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;align-self:center;height:32px;border:1px solid var(--line);border-radius:999px;overflow:hidden}.qty button{height:32px;border:0;background:#f5f7f4;cursor:pointer}.qty .quantity{min-width:0}.qty input{height:32px;width:100%;min-width:0;border:0;text-align:center;font-weight:800}
/* Hide the browser's own native up/down spinner on the number input —
   we already have our own +/- buttons either side of it (data-qty-decrease/
   data-qty-increase), so the native one is a redundant second control
   crammed inside the same small field. */
.qty input[type=number]::-webkit-outer-spin-button,.qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield;appearance:textfield}.wide-button{width:100%;border:0}.product-meta{display:grid;gap:7px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}.product-meta strong{color:var(--ink)}
.product-assurances{display:grid;gap:10px;margin-top:20px}.product-assurances div{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:var(--cream);font-size:.8rem}.product-assurances span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--lime-soft)}
.tabs{margin-top:38px}.tabs__nav{display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--line)}.tabs__nav a{white-space:nowrap;padding:12px 15px;color:var(--muted);font-weight:800;font-size:.84rem}.tabs__nav a.is-active{color:var(--green-700);border-bottom:3px solid var(--green-700)}.tabs__content{padding:24px 0;color:var(--muted)}.spec-table{width:100%;border-collapse:collapse}.spec-table th,.spec-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:.83rem}.spec-table th{width:42%;color:var(--green-900)}
.cart-layout,.checkout-layout{display:grid;gap:22px}.cart-list{display:grid;gap:2px}
.cart-list.is-updating,.cart_totals.is-updating,.cart-item.is-updating{opacity:.55;pointer-events:none;transition:opacity .15s ease}
/* Compact single row, in exactly the markup's own order — image, name+meta,
   qty, remove link, price — as flex siblings (not nested), so this order
   is real and enforced here rather than incidental to a stacked layout.
   flex-wrap lets the row degrade gracefully on narrow screens (qty/remove/
   price drop to a second line together) while keeping that same order,
   without a separate mobile grid-template. */
.cart-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-item:first-child{padding-top:0}
.cart-item:last-child{border-bottom:0}
.cart-item img{flex:0 0 52px;width:52px;height:52px;object-fit:contain;border-radius:10px;background:#f8faf6}
.cart-item__info{flex:1 1 150px;min-width:0}
.cart-item__info h3{margin:0 0 2px;font-size:.86rem;line-height:1.3}
.cart-item__meta{margin:0;color:var(--muted);font-size:.7rem}
.cart-item div.qty{flex:0 0 auto;width:88px}
.product-remove{flex:0 0 auto}
.remove-link{border:0;background:transparent;color:#a24a3c;font-size:.72rem;padding:4px 0}
.cart-item__price{flex:0 0 auto;margin-left:auto;text-align:right;font-size:.86rem}
.cart-item__price strong{color:var(--green-900)}
.coupon-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}.coupon-row input{min-width:0;padding:12px;border:1px solid var(--line);border-radius:12px}.coupon-row button{border:0;border-radius:12px;padding:0 15px;background:var(--green-900);color:#fff;font-weight:800}
.summary-lines{display:grid;gap:12px}.summary-line{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.85rem}.summary-line strong{color:var(--ink)}.summary-line--total{padding-top:13px;border-top:1px solid var(--line);font-size:1rem}.summary-line--total strong{color:var(--green-800);font-size:1.15rem}.summary-note{padding:12px;border-radius:12px;background:var(--cream);font-size:.76rem;color:var(--muted)}.sticky-summary{align-self:start}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:24px}.step{display:grid;gap:5px;justify-items:center;color:var(--muted);font-size:.7rem;text-align:center}.step span{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;font-weight:850}.step.is-active{color:var(--green-800)}.step.is-active span{color:#fff;background:var(--green-700);border-color:var(--green-700)}
.payment-option{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:14px;border:1px solid var(--line);border-radius:13px;margin-top:9px}.payment-option input{margin-top:4px}.payment-option strong{display:block;color:var(--green-900)}.payment-option p{margin:3px 0 0;color:var(--muted);font-size:.76rem}
.success-card{text-align:center;padding:30px 20px}.success-icon{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;background:var(--lime-soft);color:var(--green-700);font-size:2rem}.order-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0}.order-meta div{padding:13px;border-radius:12px;background:var(--cream)}.order-meta small{display:block;color:var(--muted)}
.account-layout{display:grid;gap:20px}.account-nav{display:grid;padding:10px}.account-nav a{padding:12px 13px;border-radius:11px;color:var(--muted);font-size:.84rem;font-weight:750}.account-nav a.is-active{color:#fff;background:var(--green-700)}.account-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.account-stat{padding:18px;border:1px solid var(--line);border-radius:15px}.account-stat strong{display:block;font-family:Georgia,serif;color:var(--green-900);font-size:1.55rem}.account-stat span{color:var(--muted);font-size:.76rem}.order-table{width:100%;border-collapse:collapse}.order-table th,.order-table td{padding:12px 8px;border-bottom:1px solid var(--line);font-size:.78rem;text-align:left}.order-table th{color:var(--green-900)}
.auth-shell{max-width:520px;margin:0 auto}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px;border-bottom:1px solid var(--line)}.auth-tabs a{padding:12px;text-align:center;font-weight:800;color:var(--muted)}.auth-tabs a.is-active{color:var(--green-700);border-bottom:3px solid var(--green-700)}
.empty-state{max-width:650px;margin:0 auto;text-align:center;padding:42px 20px}.empty-state__icon{width:92px;height:92px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;background:var(--lime-soft);font-size:2.4rem}.empty-state h2{font-size:2.1rem}.empty-state p{color:var(--muted)}
.prose{max-width:820px}.prose h2{margin-top:34px;font-size:2rem}.prose h3{margin-top:24px;color:var(--green-900)}.prose p,.prose li{color:var(--muted)}.prose img{margin:24px 0;border-radius:22px;background:var(--cream)}.prose blockquote{margin:28px 0;padding:22px;border-left:4px solid var(--lime);border-radius:0 14px 14px 0;background:var(--cream);color:var(--green-900);font-family:Georgia,serif;font-size:1.25rem}.prose ul{padding-left:20px}.two-col-content{display:grid;gap:28px;align-items:start}.toc{padding:18px}.toc h2{font-size:1rem}.toc a{display:block;padding:8px 0;color:var(--muted);font-size:.8rem}.toc a:hover{color:var(--green-700)}
.feature-grid{display:grid;gap:12px}.feature-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}.feature-card__icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:14px;border-radius:50%;background:var(--lime-soft);font-size:1.3rem}.feature-card h3{color:var(--green-900);margin-bottom:7px}.feature-card p{margin:0;color:var(--muted);font-size:.84rem}
.split-section{display:grid;gap:28px;align-items:center}.split-section img{width:100%;max-height:480px;object-fit:contain;border-radius:24px;background:linear-gradient(145deg,var(--lime-soft),var(--cream));padding:24px}.split-section p{color:var(--muted)}
.b2b-product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.b2b-product{padding:16px;border:1px solid var(--line);border-radius:16px;text-align:center}.b2b-product img{height:140px;width:100%;object-fit:contain}.b2b-product h3{min-height:2.7em;font-size:.88rem;color:var(--green-900)}
.contact-grid{display:grid;gap:18px}.contact-card{padding:22px;border:1px solid var(--line);border-radius:18px}.contact-card__icon{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:var(--lime-soft);margin-bottom:12px}.contact-card h3{color:var(--green-900)}.contact-card p,.contact-card a{color:var(--muted);font-size:.84rem}.map-placeholder{min-height:310px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,#e7f0e6,#f7f2e6);color:var(--green-800);text-align:center;padding:20px}
.blog-grid{display:grid;gap:16px}.blog-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff}.blog-card img{width:100%;height:220px;object-fit:cover;background:var(--cream)}.blog-card__body{padding:18px}.blog-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--green-600);font-size:.68rem;text-transform:uppercase;font-weight:800}.blog-card h2,.blog-card h3{font-family:Georgia,serif;color:var(--green-900)}.blog-card h3{font-size:1.25rem;margin:9px 0}.blog-card p{color:var(--muted);font-size:.84rem}.featured-article{display:grid;overflow:hidden;border-radius:24px;background:var(--green-900);color:#fff}.featured-article img{width:100%;height:300px;object-fit:contain;background:#f3f6ef;padding:22px}.featured-article__copy{padding:26px}.featured-article h2{color:#fff}.featured-article p{color:rgba(255,255,255,.75)}
.search-page-form{display:grid;grid-template-columns:1fr auto;max-width:720px}.search-page-form input{min-width:0;padding:15px;border:1px solid var(--line);border-radius:14px 0 0 14px}.search-page-form button{border:0;padding:0 22px;border-radius:0 14px 14px 0;background:var(--green-700);color:#fff;font-weight:850}.search-tabs{display:flex;gap:8px;margin:24px 0;overflow:auto}.search-tabs a{padding:9px 14px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;font-size:.78rem;font-weight:800}.search-tabs a.is-active{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.not-found{min-height:62vh;display:grid;place-items:center;text-align:center}.not-found strong{display:block;font-family:Georgia,serif;color:var(--lime);font-size:clamp(6rem,35vw,13rem);line-height:.8}.not-found h1{font-size:clamp(2rem,9vw,3.4rem)}.not-found p{max-width:560px;margin-inline:auto;color:var(--muted)}
.mobile-filter-button{display:inline-flex}.desktop-only{display:none}
.filter-panel.is-open{display:block!important;margin-bottom:20px}
@media(min-width:700px){
  .form-grid--2,.contact-grid,.feature-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}.b2b-product-grid{grid-template-columns:repeat(3,1fr)}.product-grid--page{grid-template-columns:repeat(3,minmax(0,1fr))}.category-banner{grid-template-columns:1.4fr .6fr}.order-meta{grid-template-columns:repeat(4,1fr)}.account-stats{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:980px){
  .content-pad{padding:58px 0 88px}.shop-layout{grid-template-columns:260px minmax(0,1fr)}.product-grid--page{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mobile-filter-button{display:none}.desktop-only{display:block}.product-layout{grid-template-columns:minmax(0,1.03fr) minmax(380px,.97fr);gap:52px}.cart-layout{grid-template-columns:minmax(0,1.5fr) minmax(320px,.65fr)}.checkout-layout{grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr)}.sticky-summary{position:sticky;top:24px}.account-layout{grid-template-columns:230px minmax(0,1fr)}.two-col-content{grid-template-columns:minmax(0,1fr) 260px}.toc{position:sticky;top:24px}.split-section{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(4,1fr)}.contact-grid{grid-template-columns:repeat(3,1fr)}.blog-grid{grid-template-columns:repeat(3,1fr)}.featured-article{grid-template-columns:1.1fr .9fr}.featured-article img{height:100%}.form-grid--2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1180px){.product-grid--page{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Interaction / accessibility helpers */
:where(button,a,input,select,textarea,summary){touch-action:manipulation}
:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #f2b84b;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* WooCommerce structural resets so core WooCommerce markup adopts theme styling */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{min-width:0}
@media(min-width:700px){.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.woocommerce-message,.woocommerce-error,.woocommerce-info{list-style:none;margin:0 0 20px;padding:14px 18px;border-radius:12px;background:var(--cream);color:var(--green-900);font-size:.85rem}
.woocommerce-error{background:#fff0eb;color:#a43d25}
/* WooCommerce's cart.js moves focus to role="alert" notices after an AJAX
   cart update (an accessibility feature, so screen readers announce it) —
   without this, that focus falls back to the browser's harsh default
   solid-black outline instead of the site's usual soft focus ring. */
.woocommerce-message:focus-visible,.woocommerce-error:focus-visible,.woocommerce-info:focus-visible{outline:3px solid rgba(154,184,63,.45);outline-offset:2px}

/* WooCommerce renders the loop add-to-cart control as <a>, not <button> —
   restore the icon centering the mockup's <button> got for free. The generic
   .button class (also applied by WC core) sets min-height:48px at the same
   specificity as .add-to-cart's height:34px, so min-height must be reset
   here too or the circle stretches into a pill. */
a.add-to-cart,a.wishlist-button{display:inline-flex;align-items:center;justify-content:center;padding:0;min-height:0;line-height:1;text-decoration:none}
a.add-to-cart svg{width:16px;height:16px;stroke-width:2.1}
a.add-to-cart.loading{opacity:.7;pointer-events:none}
a.add-to-cart.loading svg{animation:heritage-cart-spin .6s linear infinite}
a.add-to-cart::after{display:none}
@keyframes heritage-cart-spin{to{transform:rotate(360deg)}}
@keyframes heritage-add-pulse{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.add-to-cart.is-added{animation:heritage-add-pulse .5s ease}
.add-to-cart.is-added svg{display:none}
.add-to-cart.is-added::before{content:"✓"}
@media (prefers-reduced-motion: reduce){a.add-to-cart.loading svg{animation:none}}
@keyframes heritage-badge-bump{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.cart-count.is-bumped{animation:heritage-badge-bump .45s ease}
@media (prefers-reduced-motion: reduce){.add-to-cart.is-added,.cart-count.is-bumped{animation:none}}

/* woo-smart-wishlist's button (relocated by site.js into .product-card__media,
   top-right — same slot the mockup's own wishlist heart used to occupy).
   Text ("Add to wishlist") is visually hidden via font-size:0 but stays in
   the accessible name for screen readers. */
.product-card__media .woosw-btn{position:absolute;right:8px;top:8px;z-index:2;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--green-800);background:rgba(255,255,255,.9);font-size:0;line-height:1}
.product-card__media .woosw-btn::before{content:"♡";font-size:1.1rem}
.product-card__media .woosw-btn.woosw-btn-added::before,.product-card__media .woosw-btn.woosw-added::before{content:"♥"}
.product-card__media .woosw-btn.woosw-btn-added,.product-card__media .woosw-btn.woosw-added{color:#a3482f;background:#fff3f0}

/* woo-smart-compare + woo-smart-quick-view, wrapped by site.js into a
   two-icon row under the card body. */
.product-card__quickactions{display:flex}
.product-card__quickactions .woosc-btn,.product-card__quickactions .woosq-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;margin:0;border:0;border-top:1px solid var(--line);color:var(--muted);background:#fff;font-size:0;line-height:1;transition:.15s ease}
.product-card__quickactions .woosc-btn{border-right:1px solid var(--line)}
.product-card__quickactions .woosc-btn::before{content:"⇄";font-size:.95rem}
.product-card__quickactions .woosq-btn::before{content:"👁";font-size:.95rem}
.product-card__quickactions .woosc-btn:hover,.product-card__quickactions .woosq-btn:hover{color:var(--green-700);background:var(--cream)}
/* Quick View modal (woo-smart-quick-view plugin) renders the product title
   as a plain <h1> inside WooCommerce's own .summary wrapper, not our
   .product-summary — so it falls through to the sitewide hero-sized
   h1{font-size:clamp(2.5rem,12vw,4.8rem)} above, which is far too large
   inside a 920px-wide popup. */
.woosq-popup h1{font-size:clamp(1.25rem,3vw,1.75rem);margin-bottom:10px}

/* Bridge WooCommerce's native ordering/result-count/pagination markup to the mockup's shop-toolbar/.pagination look */
.shop-toolbar .woocommerce-result-count{margin:0;color:var(--muted);font-size:.82rem;order:2}
.shop-toolbar .woocommerce-ordering{order:3}
.shop-toolbar .woocommerce-ordering select{padding:11px 36px 11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit}
.mobile-filter-button{order:1}
.woocommerce-pagination{margin-top:28px}
.woocommerce-pagination ul.page-numbers{display:flex;justify-content:center;gap:7px;list-style:none;margin:0;padding:0}
.woocommerce-pagination .page-numbers li{display:contents}
.woocommerce-pagination .page-numbers a,.woocommerce-pagination .page-numbers span{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-weight:800;color:var(--ink)}
.woocommerce-pagination .page-numbers .current{color:#fff;background:var(--green-700);border-color:var(--green-700)}
.woocommerce-pagination .page-numbers .dots{border-color:transparent}

/* WC_Widget_Price_Filter's jQuery-UI slider markup — unstyled by default since
   woocommerce_enqueue_styles is emptied out (see inc/woocommerce.php) and no
   jquery-ui theme CSS is loaded either, so every piece here is drawn from
   scratch to match the filter-panel look. */
.price_slider_wrapper{margin:14px 2px 4px}
.price_slider{position:relative;height:4px;margin:10px 6px 22px;border-radius:2px;background:var(--line)}
.price_slider .ui-slider-range{position:absolute;top:0;height:100%;border-radius:2px;background:var(--green-700)}
.price_slider .ui-slider-handle{position:absolute;top:50%;z-index:1;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--white);border:2px solid var(--green-700);box-shadow:var(--shadow);cursor:pointer;transform:translateY(-50%);outline:none}
.price_slider .ui-slider-handle:focus{box-shadow:0 0 0 4px var(--lime-soft)}
.price_slider_amount{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.price_slider_amount .price_label{order:1;flex-basis:100%;color:var(--muted);font-size:.82rem}
.price_slider_amount .price_label .from,.price_slider_amount .price_label .to{color:var(--green-900);font-weight:750}
.price_slider_amount button.button{order:2;margin-left:auto;padding:8px 16px;border:0;border-radius:10px;background:var(--green-700);color:#fff;font-size:.78rem;font-weight:750;cursor:pointer}
.price_slider_amount button.button:hover{background:var(--green-800)}
.price_slider_amount .clear{clear:both}

/* WooCommerce's default get_price_html() markup (<del>/<ins>) bridged to the mockup's .sale-price look */
.product-price del{display:block;color:#929a95;font-size:.75em;font-weight:500;text-decoration:line-through;order:1}
.product-price ins{text-decoration:none;order:2}
.product-price{display:flex;flex-direction:column;align-items:flex-start}
.product-card__bottom del{display:block;color:#929a95;font-size:.65rem;font-weight:500;text-decoration:line-through}
.product-card__bottom ins{text-decoration:none}
[data-tab-panel][hidden]{display:none}
.field--full{grid-column:1/-1}
.field .woocommerce-input-wrapper{display:block}
.field.woocommerce-invalid input,.field.woocommerce-invalid select{border-color:#a3482f}
.wc_payment_methods{display:grid;gap:0}
.payment_box{grid-column:1/-1;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:.82rem;color:var(--muted)}

/* Contact Form 7 output restyled to the mockup's .form-grid/.field look, whatever field markup the admin builds in wp-admin */
.wpcf7-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.wpcf7-form p{display:grid;gap:7px;margin:0}
.wpcf7-form label{display:grid;gap:7px;font-size:.82rem;font-weight:800;color:var(--green-900)}
.wpcf7-form label>br{display:none}
.wpcf7-form input.wpcf7-form-control,.wpcf7-form select.wpcf7-form-control,.wpcf7-form textarea.wpcf7-form-control{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit}
.wpcf7-form textarea.wpcf7-form-control{min-height:125px;resize:vertical}
.wpcf7-form p:has(textarea),.wpcf7-form p:has(input[type=submit]){grid-column:1/-1}
.wpcf7-form .wpcf7-submit{border:1px solid transparent;border-radius:999px;padding:0 22px;min-height:48px;font-weight:850;color:#fff;background:var(--green-700)}
.wpcf7-form .wpcf7-spinner{margin-inline-start:10px}
.wpcf7-response-output{grid-column:1/-1;margin:0 0 14px!important;padding:14px 18px!important;border-radius:12px!important;border:0!important;font-size:.85rem}
.wpcf7 form.sent .wpcf7-response-output{background:var(--cream);color:var(--green-900)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.payment-required .wpcf7-response-output{background:#fff0eb;color:#a43d25}
.wpcf7-not-valid-tip{grid-column:1/-1;color:#a43d25;font-size:.76rem}
@media(max-width:699px){.wpcf7-form{grid-template-columns:1fr}}