/* ==========================================================================
   Gramco Spices — Front-end design system
   Bootstrap 5.3 + custom tokens. All brand values live in :root below.
   Sections:
   01 Tokens            08 Category cards      15 Product page
   02 Bootstrap bridge  09 Difference band     16 Cart & checkout
   03 Base & type       10 Product cards       17 Story page
   04 Buttons           11 Rails & editorial   18 Mini cart / offcanvas
   05 Top bar & header  12 Gifting             19 Mobile tab bar
   06 Hero              13 Journal & newsletter 20 Motion utilities
   07 Trust strip       14 Shop & filters      21 Footer
   ========================================================================== */

/* 01 — Tokens ------------------------------------------------------------ */
:root {
  /* Colour */
  --g-green-950: #071E10;
  --g-green-900: #0D3019;
  --g-green-800: #123A22;
  --g-green-700: #1B5232;
  --g-green-500: #3F7A55;
  --g-sage-100:  #E6EDE1;
  --g-gold-700:  #8A6420;   /* gold text on cream (AA) */
  --g-gold-500:  #D9A944;   /* decorative lines */
  --g-gold-400:  #E7BC63;
  --g-gold-300:  #F3D184;
  --g-cream-50:  #FFFDF8;
  --g-cream-100: #FBF6EC;   /* page background */
  --g-cream-200: #F6EFE1;
  --g-cream-300: #EFE5D1;
  --g-sand-400:  #E0D3B7;
  --g-ink:       #1E1B16;
  --g-ink-2:     #4A4337;
  --g-ink-3:     #6B6253;
  --g-turmeric:  #C8902A;
  --g-chilli:    #9E2B25;

  /* Type */
  --g-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --g-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-ml: "Noto Serif Malayalam", "Playfair Display", serif;
  --g-fs-xs: .875rem;   /* 14 */
  --g-fs-sm: 1rem;      /* 16 */
  --g-fs-md: 1.125rem;  /* 18 */
  --g-fs-lg: 1.375rem;  /* 22 */
  --g-fs-xl: 1.75rem;   /* 28 */
  --g-fs-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);  /* 28→36 */
  --g-fs-3xl: clamp(2.125rem, 1.3rem + 2.6vw, 3rem);    /* 34→48 */
  --g-fs-4xl: clamp(2.5rem, 1.4rem + 3.8vw, 4rem);      /* 40→64 */
  --g-fs-5xl: clamp(2.75rem, 1.4rem + 5vw, 5rem);       /* 44→80 */

  /* Space (8px system) */
  --g-s1: .5rem; --g-s2: 1rem; --g-s3: 1.5rem; --g-s4: 2rem;
  --g-s6: 3rem; --g-s8: 4rem; --g-s12: 6rem; --g-s16: 8rem;
  --g-section: clamp(5rem, 3rem + 7vw, 9rem);
  --g-section-sm: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Radius */
  --g-r-sm: 8px; --g-r-md: 14px; --g-r-lg: 20px; --g-r-xl: 28px; --g-r-pill: 999px;

  /* Elevation — warm, layered */
  --g-sh-1: 0 1px 2px rgba(48,32,12,.06), 0 4px 14px rgba(48,32,12,.06);
  --g-sh-2: 0 1px 2px rgba(48,32,12,.06), 0 10px 24px rgba(48,32,12,.08), 0 26px 60px rgba(48,32,12,.08);
  --g-sh-3: 0 2px 6px rgba(10,30,16,.10), 0 20px 44px rgba(10,30,16,.16), 0 44px 100px rgba(10,30,16,.16);
  --g-sh-gold: 0 8px 20px rgba(140,96,24,.28), inset 0 1px 0 rgba(255,255,255,.55);

  /* Motion */
  --g-ease: cubic-bezier(.25,.1,.25,1);      /* soft, no overshoot */
  --g-ease-out: cubic-bezier(.16,1,.3,1);    /* long, gentle settle (reveals) */
  --g-t-fast: 250ms;
  --g-t-med: 800ms;
  --g-t-slow: 1000ms;
  --g-stagger: 80ms;

  /* Layout */
  --g-header-h: 84px;
  --g-container: 1320px;
}

/* 02 — Bootstrap bridge -------------------------------------------------- */
:root, [data-bs-theme=light] {
  --bs-body-font-family: var(--g-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--g-ink);
  --bs-body-color-rgb: 30,27,22;
  --bs-body-bg: var(--g-cream-100);
  --bs-heading-color: var(--g-green-800);
  --bs-emphasis-color: var(--g-ink);
  --bs-secondary-color: var(--g-ink-2);
  --bs-link-color: var(--g-green-800);
  --bs-link-color-rgb: 18,58,34;
  --bs-link-hover-color: var(--g-green-950);
  --bs-link-hover-color-rgb: 7,30,16;
  --bs-primary: var(--g-green-800);
  --bs-primary-rgb: 18,58,34;
  --bs-border-color: var(--g-cream-300);
  --bs-border-radius: var(--g-r-sm);
  --bs-border-radius-lg: var(--g-r-md);
  --bs-focus-ring-color: rgba(217,169,68,.45);
  --bs-success: #2E7D4F;
  --bs-success-rgb: 46,125,79;
  --bs-danger: var(--g-chilli);
  --bs-form-invalid-color: var(--g-chilli);
  --bs-form-invalid-border-color: var(--g-chilli);
  --bs-form-valid-border-color: #2E7D4F;
}
.container-g { max-width: var(--g-container); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.form-control, .form-select {
  border-radius: var(--g-r-sm); border-color: var(--g-sand-400); background-color: var(--g-cream-50);
  padding: .8rem 1rem; font-size: 1rem; transition: border-color var(--g-t-fast) var(--g-ease), box-shadow var(--g-t-fast) var(--g-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--g-gold-500); box-shadow: 0 0 0 .25rem rgba(217,169,68,.22); background-color: #fff; }
.form-label { font-weight: 600; font-size: var(--g-fs-xs); color: var(--g-ink-2); margin-bottom: .4rem; }
.form-check-input:checked { background-color: var(--g-green-800); border-color: var(--g-green-800); }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(217,169,68,.3); border-color: var(--g-gold-500); }
.offcanvas { --bs-offcanvas-bg: var(--g-cream-100); }
.modal-content { border: 0; border-radius: var(--g-r-xl); box-shadow: var(--g-sh-3); background: var(--g-cream-100); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--g-cream-300); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--g-green-800); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(217,169,68,.25); }
.accordion-button { font-weight: 700; padding-inline: 0; }
.accordion-body { padding-inline: 0; color: var(--g-ink-2); }
.nav-tabs { --bs-nav-tabs-border-color: var(--g-cream-300); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; }
.toast { --bs-toast-bg: var(--g-green-900); --bs-toast-color: #fff; border: 0; border-radius: var(--g-r-md); box-shadow: var(--g-sh-3); }

/* 03 — Base & type ------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--g-font-body); color: var(--g-ink); background: var(--g-cream-100); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
/* Paper grain over the whole page — very subtle */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2000; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; }
h1, h2, h3, .g-display { font-family: var(--g-font-display); font-weight: 600; letter-spacing: -.012em; line-height: 1.08; color: var(--g-green-800); }
h4, h5, h6 { font-family: var(--g-font-body); font-weight: 700; color: var(--g-ink); }
p { color: var(--g-ink-2); }
::selection { background: var(--g-gold-300); color: var(--g-green-950); }
:focus-visible { outline: 2px solid var(--g-gold-500); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 1rem; top: -60px; z-index: 3000; background: var(--g-green-900); color: #fff; padding: .75rem 1rem; border-radius: var(--g-r-sm); }
.skip-link:focus { top: 1rem; color: #fff; }

.g-eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--g-font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--g-gold-700); margin-bottom: 1rem; }
.g-eyebrow--light { color: var(--g-gold-300); }
.g-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.g-eyebrow--center::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.g-h1 { font-size: var(--g-fs-5xl); }
.g-h2 { font-size: var(--g-fs-3xl); }
.g-h3 { font-size: var(--g-fs-2xl); }
.g-lead { font-size: var(--g-fs-md); line-height: 1.7; color: var(--g-ink-2); max-width: 38rem; }
.g-ml { font-family: var(--g-font-ml); font-weight: 500; color: var(--g-gold-700); letter-spacing: 0; }
.g-italic { font-style: italic; font-weight: 500; }
.g-section { padding-block: var(--g-section); position: relative; }
.g-section-sm { padding-block: var(--g-section-sm); position: relative; }
.g-section-head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.g-section-head--center { text-align: center; }
.g-section-head--center .g-lead { margin-inline: auto; }
.g-ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--g-gold-500); }
.g-ornament::before, .g-ornament::after { content: ""; height: 1px; width: clamp(40px, 8vw, 90px); background: linear-gradient(90deg, transparent, currentColor); }
.g-ornament::after { transform: scaleX(-1); }
.text-ink-2 { color: var(--g-ink-2) !important; }
.text-ink-3 { color: var(--g-ink-3) !important; }
.bg-cream-200 { background: var(--g-cream-200); }
.bg-green-texture {
  background-color: var(--g-green-800);
  background-image: radial-gradient(ellipse 80% 70% at 85% 0%, rgba(78,140,96,.35), transparent 60%), radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,0,0,.35), transparent 60%);
  color: #fff;
}
.bg-green-texture h2, .bg-green-texture h3 { color: #fff; }
.bg-green-texture p { color: #DCE3D6; }

/* 04 — Buttons ----------------------------------------------------------- */
.btn-g {
  --g-btn-bg: var(--g-green-800); --g-btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 52px; padding: .875rem 1.75rem; border: 0; border-radius: var(--g-r-pill);
  font-family: var(--g-font-body); font-size: 1rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
  color: var(--g-btn-fg); background: var(--g-btn-bg); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: box-shadow var(--g-t-fast) var(--g-ease), background-color var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease), filter var(--g-t-fast) var(--g-ease), transform 120ms var(--g-ease);
}
.btn-g svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform var(--g-t-fast) var(--g-ease); }
.btn-g:hover { color: var(--g-btn-fg); }
.btn-g:hover svg.g-arrow-ico { transform: translateX(3px); }
.btn-g:active { transform: scale(.985); transition-duration: 80ms; }
.btn-gold { --g-btn-fg: var(--g-green-950); background: linear-gradient(180deg, var(--g-gold-300), #D9A23F); box-shadow: var(--g-sh-gold); }
.btn-gold:hover { box-shadow: 0 10px 26px rgba(140,96,24,.32), inset 0 1px 0 rgba(255,255,255,.6); filter: brightness(1.03); }
.btn-green { background: linear-gradient(180deg, var(--g-green-700), var(--g-green-900)); box-shadow: 0 8px 18px rgba(13,48,25,.25), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-green:hover { box-shadow: 0 10px 24px rgba(13,48,25,.28), inset 0 1px 0 rgba(255,255,255,.14); filter: brightness(1.12); }
.btn-outline { --g-btn-fg: var(--g-green-800); background: transparent; box-shadow: inset 0 0 0 1.5px var(--g-green-800); }
.btn-outline:hover { --g-btn-fg: #fff; background: var(--g-green-800); }
.btn-outline-light { --g-btn-fg: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1.5px rgba(243,209,132,.7); backdrop-filter: blur(4px); }
.btn-outline-light:hover { --g-btn-fg: var(--g-green-950); background: var(--g-gold-300); }
.btn-sm-g { min-height: 44px; padding: .625rem 1.25rem; font-size: .9375rem; }
.btn-block { width: 100%; }
.g-link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--g-green-800); text-decoration: none; padding-block: .5rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--g-t-fast) var(--g-ease); }
.g-link-arrow:hover { background-size: 100% 1.5px; color: var(--g-green-950); }
.g-link-arrow svg { width: 16px; height: 16px; transition: transform var(--g-t-fast) var(--g-ease); }
.g-link-arrow:hover svg { transform: translateX(4px); }
.g-icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--g-ink); background: transparent; position: relative; transition: background var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease); }
.g-icon-btn:hover { background: var(--g-cream-300); color: var(--g-green-800); }
.g-icon-btn svg { width: 22px; height: 22px; }
.g-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--g-gold-400); color: var(--g-green-950); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--g-cream-100); }
.g-badge.is-bump { animation: gBump .5s var(--g-ease); }
@keyframes gBump { 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* 05 — Top bar & header -------------------------------------------------- */
.g-topbar { background: var(--g-green-900); color: #EFE6CF; font-size: .8125rem; }
.g-topbar a { color: #EFE6CF; text-decoration: none; }
.g-topbar a:hover { color: var(--g-gold-300); }
.g-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.g-topbar__items { display: flex; gap: 1.75rem; align-items: center; }
.g-topbar__items span { display: inline-flex; align-items: center; gap: .5rem; }
.g-topbar__items svg { width: 15px; height: 15px; color: var(--g-gold-400); }
.g-topbar__ticker { overflow: hidden; white-space: nowrap; text-align: center; width: 100%; }

.g-header { position: sticky; top: 0; z-index: 1030; background: rgba(251,246,236,.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: box-shadow var(--g-t-fast) var(--g-ease), border-color var(--g-t-fast) var(--g-ease), background var(--g-t-fast) var(--g-ease); }
.g-header.is-scrolled { background: rgba(251,246,236,.94); border-bottom-color: var(--g-cream-300); box-shadow: 0 10px 30px rgba(48,32,12,.07); }
.g-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; min-height: var(--g-header-h); }
.g-logo img { height: 60px; width: auto; display: block; }
.g-nav { display: flex; justify-content: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.g-nav a { position: relative; font-weight: 600; font-size: .9688rem; color: var(--g-ink); text-decoration: none; padding: .75rem 0; display: inline-block; }
.g-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1.5px; background: var(--g-gold-500); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--g-ease); }
.g-nav a:hover { color: var(--g-green-800); }
.g-nav a:hover::after, .g-nav a.is-active::after { transform: scaleX(1); }
.g-nav a.is-active { color: var(--g-green-800); }
.g-header__actions { display: flex; align-items: center; gap: .25rem; justify-content: flex-end; }
@media (max-width: 991.98px) {
  :root { --g-header-h: 64px; }
  .g-header__inner { grid-template-columns: 44px 1fr auto; gap: .5rem; }
  .g-logo { justify-self: center; }
  .g-logo img { height: 44px; }
}
.g-search { display: none; padding-bottom: 1rem; }
.g-search.is-open { display: block; animation: gFadeDown 350ms var(--g-ease); }
.g-search__field { position: relative; }
.g-search__field input { padding-left: 3rem; border-radius: var(--g-r-pill); min-height: 52px; }
.g-search__field svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--g-ink-3); }
@keyframes gFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Mobile menu */
.g-mmenu .offcanvas-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--g-cream-300); }
.g-mmenu__nav { list-style: none; margin: 0; padding: .5rem 1.25rem; }
.g-mmenu__nav a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--g-cream-300); font-family: var(--g-font-display); font-size: 1.375rem; color: var(--g-green-800); text-decoration: none; }
.g-mmenu__nav a::after { content: "›"; color: var(--g-gold-700); font-family: var(--g-font-body); }
.g-mmenu__foot { margin-top: auto; padding: 1.25rem; background: var(--g-cream-200); font-size: .9rem; }

/* 06 — Hero -------------------------------------------------------------- */
.g-hero { position: relative; background: var(--g-green-900); overflow: hidden; isolation: isolate; }
.g-hero .carousel-item { position: relative; overflow: hidden; }
.g-hero__slide { display: block; position: relative; aspect-ratio: 1774 / 760; overflow: hidden; }
.g-hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.g-hero .carousel-fade .carousel-item { transition: opacity 1.2s var(--g-ease); }
.g-hero .carousel-fade .active.carousel-item-start, .g-hero .carousel-fade .active.carousel-item-end { transition: opacity 0s 1.2s; }
.g-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(4,18,9,.35)); pointer-events: none; }
.g-hero__controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 84px; pointer-events: none; }
.g-hero__controls .container-g { display: flex; align-items: center; justify-content: center; position: relative; }
.g-hero__controls .g-hero__arrows { position: absolute; right: clamp(1rem, 3vw, 2rem); }
.g-hero__dots { display: flex; gap: .5rem; pointer-events: auto; }
.g-hero__dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.55); transition: width 400ms var(--g-ease), background var(--g-t-fast); }
.g-hero__dots button.active { width: 34px; background: var(--g-gold-400); }
.g-hero__arrows { display: flex; gap: .5rem; pointer-events: auto; }
.g-hero__arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(243,209,132,.6); background: rgba(7,30,16,.35); color: #fff; backdrop-filter: blur(6px); display: inline-flex; align-items: center; justify-content: center; transition: background var(--g-t-fast), color var(--g-t-fast), transform var(--g-t-fast) var(--g-ease); }
.g-hero__arrows button:hover { background: var(--g-gold-300); color: var(--g-green-950); }
.g-hero__arrows svg { width: 18px; height: 18px; }
/* Mobile hero (HTML text) */
.g-hero-m { position: relative; min-height: 600px; background: var(--g-green-900); overflow: hidden; color: #fff; display: flex; flex-direction: column; }
.g-hero-m__media { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; }
.g-hero-m__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: gSettle 2.6s var(--g-ease-out) both; }
.g-hero-m__media::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(180deg, var(--g-green-900), rgba(13,48,25,0)); z-index: 1; }
.g-hero-m__body { position: relative; z-index: 2; padding: 2.75rem 1.5rem 0; }
.g-hero-m h1 { color: #fff; font-size: 2.875rem; text-shadow: 0 6px 30px rgba(0,0,0,.3); }
.g-hero-m p { color: #E6E0CF; max-width: 20rem; }
@keyframes gSettle { from { transform: scale(1.04); opacity: .6; } to { transform: scale(1); opacity: 1; } }

/* Page hero (inner pages) */
.g-pagehero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--g-green-900); }
.g-pagehero__media { position: absolute; inset: 0; z-index: -1; }
.g-pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.g-pagehero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,30,16,.92) 0%, rgba(7,30,16,.65) 45%, rgba(7,30,16,.15) 100%); }
.g-pagehero__inner { padding-block: clamp(4rem, 3rem + 6vw, 8.5rem); max-width: 40rem; }
.g-pagehero h1 { color: #fff; font-size: var(--g-fs-4xl); }
.g-pagehero p { color: #E3DDCB; font-size: var(--g-fs-md); }
.g-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; margin-bottom: 1.25rem; color: #CFC7B3; list-style: none; padding: 0; }
.g-crumbs a { color: #EFE6CF; text-decoration: none; }
.g-crumbs a:hover { color: var(--g-gold-300); }
.g-crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.g-crumbs--dark { color: var(--g-ink-3); }
.g-crumbs--dark a { color: var(--g-ink-2); }
.g-crumbs--dark a:hover { color: var(--g-green-800); }

/* Text line reveal (used in hero headings) */
.g-lines .g-ln { display: block; overflow: hidden; padding-bottom: .06em; }
.g-lines .g-ln > span { display: inline-block; transform: translateY(105%); transition: transform 1100ms var(--g-ease-out); transition-delay: calc(var(--i, 0) * 110ms + 120ms); }
.g-lines.is-in .g-ln > span { transform: none; }

/* 07 — Trust strip ------------------------------------------------------- */
.g-trust { position: relative; z-index: 4; margin-top: -56px; }
.g-trust__card { background: linear-gradient(180deg, #fff, var(--g-cream-50)); border-radius: var(--g-r-lg); box-shadow: var(--g-sh-3); padding: 1.5rem 1rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.g-trust__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(231,188,99,.7), rgba(231,188,99,0) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.g-trust__item { display: flex; align-items: center; justify-content: center; gap: .875rem; padding: .5rem 1rem; }
.g-trust__item + .g-trust__item { border-left: 1px solid var(--g-cream-300); }
.g-trust__ico { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: var(--g-cream-200); box-shadow: inset 0 0 0 1px #E6D3A6; display: inline-flex; align-items: center; justify-content: center; color: var(--g-green-800); }
.g-trust__ico svg { width: 26px; height: 26px; }
.g-trust__text { font-size: .9375rem; line-height: 1.35; color: var(--g-ink-2); }
.g-trust__text strong { display: block; color: var(--g-ink); }
@media (max-width: 991.98px) {
  .g-trust { margin-top: -36px; }
  .g-trust__card { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; background: transparent; box-shadow: none; padding: 0 1rem 1rem; margin-inline: -1rem; scrollbar-width: none; }
  .g-trust__card::-webkit-scrollbar { display: none; }
  .g-trust__card::before { display: none; }
  .g-trust__item, .g-trust__item + .g-trust__item { flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--g-cream-300); background: #fff; border-radius: var(--g-r-md); box-shadow: var(--g-sh-2); padding: .625rem 1rem .625rem .625rem; justify-content: flex-start; }
  .g-trust__ico { width: 40px; height: 40px; flex-basis: 40px; }
  .g-trust__ico svg { width: 20px; height: 20px; }
  .g-trust__text { font-size: .8125rem; white-space: nowrap; }
}

/* 08 — Category cards ---------------------------------------------------- */
.g-cat { position: relative; display: block; border-radius: var(--g-r-lg); overflow: hidden; aspect-ratio: 4 / 4.4; text-decoration: none; isolation: isolate; box-shadow: var(--g-sh-2); transition: box-shadow 600ms var(--g-ease); }
.g-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.6s var(--g-ease-out); }
.g-cat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,30,16,0) 40%, rgba(7,30,16,.88)); }
.g-cat::after { content: ""; position: absolute; inset: 10px; border-radius: calc(var(--g-r-lg) - 6px); border: 1px solid rgba(243,209,132,.35); pointer-events: none; transition: border-color 500ms var(--g-ease); }
.g-cat__body { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.375rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.g-cat__title { font-family: var(--g-font-display); font-size: 1.625rem; color: #fff; line-height: 1.15; }
.g-cat__sub { font-size: .875rem; color: #E6E0CF; margin-top: .25rem; }
.g-cat__ml { font-family: var(--g-font-ml); font-size: .875rem; color: var(--g-gold-300); display: block; margin-bottom: .35rem; }
.g-cat__arrow { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: 1.5px solid var(--g-gold-400); color: var(--g-gold-400); display: inline-flex; align-items: center; justify-content: center; transition: background var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease); }
.g-cat__arrow svg { width: 16px; height: 16px; }
.g-cat:hover { box-shadow: var(--g-sh-3); }
.g-cat:hover img { transform: scale(1.04); }
.g-cat:hover::after { border-color: rgba(243,209,132,.75); }
.g-cat:hover .g-cat__arrow { background: var(--g-gold-400); color: var(--g-green-950); }
@media (max-width: 575.98px) {
  .g-cat { aspect-ratio: 1 / 1.12; border-radius: var(--g-r-md); }
  .g-cat::after { inset: 6px; }
  .g-cat__body { left: .875rem; right: .875rem; bottom: .875rem; }
  .g-cat__title { font-size: 1.125rem; }
  .g-cat__sub, .g-cat__arrow { display: none; }
}

/* 09 — Difference band --------------------------------------------------- */
.g-diff { position: relative; overflow: hidden; box-shadow: inset 0 16px 40px rgba(0,0,0,.22), inset 0 -16px 40px rgba(0,0,0,.22); }
.g-diff__leaf { position: absolute; left: 0; top: 0; bottom: 0; width: 26%; object-fit: cover; height: 100%; opacity: .85; -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.g-diff__inner { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(2rem, 4vw, 4rem); padding-block: 3rem; padding-left: 22%; }
.g-diff h2 { color: #fff; font-size: var(--g-fs-2xl); margin: 0; padding-right: clamp(2rem, 4vw, 4rem); border-right: 1px solid rgba(231,188,99,.45); }
.g-diff__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.g-diff__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .875rem; color: #fff; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.g-diff__ico { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--g-gold-400); box-shadow: 0 0 0 7px rgba(231,188,99,.07); display: inline-flex; align-items: center; justify-content: center; color: var(--g-gold-400); transition: background var(--g-t-fast) var(--g-ease); }
.g-diff__ico svg { width: 28px; height: 28px; }
.g-diff__item:hover .g-diff__ico { background: rgba(231,188,99,.12); }
@media (max-width: 991.98px) {
  .g-diff__leaf { width: 45%; left: auto; right: -10%; opacity: .3; -webkit-mask-image: none; mask-image: none; }
  .g-diff__inner { grid-template-columns: 1fr; padding-left: 0; padding-block: 2.5rem; }
  .g-diff h2 { border: 0; padding: 0; }
  .g-diff__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .g-diff__item { flex-direction: row; text-align: left; font-size: .875rem; }
  .g-diff__ico { width: 48px; height: 48px; flex: 0 0 48px; box-shadow: 0 0 0 5px rgba(231,188,99,.07); }
  .g-diff__ico svg { width: 22px; height: 22px; }
}

/* 10 — Product cards ----------------------------------------------------- */
.g-pcard { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--g-r-lg); padding: .75rem .75rem 1.25rem; border: 1px solid var(--g-cream-300); box-shadow: var(--g-sh-1); transition: box-shadow 600ms var(--g-ease), border-color 600ms var(--g-ease); }
.g-pcard:hover { box-shadow: var(--g-sh-2); border-color: var(--g-sand-400); }
.g-pcard__media { position: relative; display: block; border-radius: var(--g-r-md); overflow: hidden; background: #EDE5DC; aspect-ratio: 1 / 1.06; }
.g-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--g-ease-out); }
.g-pcard:hover .g-pcard__media img { transform: scale(1.035); }
.g-pcard__tag { position: absolute; left: .75rem; top: .75rem; z-index: 2; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.92); color: var(--g-green-800); padding: .35rem .6rem; border-radius: var(--g-r-pill); box-shadow: var(--g-sh-1); }
.g-pcard__tag--gold { background: var(--g-green-800); color: var(--g-gold-300); }
.g-wish { position: absolute; z-index: 3; top: 1.25rem; right: 1.25rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--g-ink-2); box-shadow: var(--g-sh-1); display: inline-flex; align-items: center; justify-content: center; transition: color var(--g-t-fast) var(--g-ease), background var(--g-t-fast) var(--g-ease); }
.g-wish svg { width: 18px; height: 18px; }
.g-wish:hover { color: var(--g-chilli); }
.g-wish.is-on { color: var(--g-chilli); }
.g-wish.is-on svg path { fill: currentColor; }
.g-wish.is-pop { animation: gPop .45s var(--g-ease); }
@keyframes gPop { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
.g-pcard__origin { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--g-gold-700); margin-top: 1rem; display: flex; justify-content: space-between; gap: .5rem; }
.g-pcard__origin .g-ml { text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 500; }
.g-pcard__name { font-family: var(--g-font-display); font-size: 1.25rem; line-height: 1.2; margin: .35rem 0 0; }
.g-pcard__name a { color: var(--g-green-800); text-decoration: none; }
.g-pcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.g-pcard__meta { font-size: .875rem; color: var(--g-ink-3); margin-top: .25rem; }
.g-pcard__foot { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: .875rem; position: relative; z-index: 2; }
.g-pcard__price { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.g-price { font-size: 1.25rem; font-weight: 800; color: var(--g-ink); letter-spacing: -.01em; }
.g-price small { font-size: .8125rem; font-weight: 600; color: var(--g-ink-3); margin-left: .25rem; }
/* Add-to-cart control → turns into stepper (same size, cross-fades) */
.g-cartctl { position: relative; height: 48px; width: 100%; }
.g-cartctl__add, .g-cartctl .g-qty { position: absolute; inset: 0; transition: opacity 300ms var(--g-ease), visibility 300ms; }
.g-cartctl .g-qty, .g-cartctl.has-qty .g-cartctl__add { opacity: 0; visibility: hidden; }
.g-cartctl.has-qty .g-qty { opacity: 1; visibility: visible; }
.btn-add {
  display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; height: 48px; padding: 0 1.25rem;
  border: 0; border-radius: 12px; background: var(--g-green-800); color: #fff;
  font-family: var(--g-font-body); font-size: .9375rem; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 12px rgba(13,48,25,.16);
  transition: background-color var(--g-t-fast) var(--g-ease), box-shadow var(--g-t-fast) var(--g-ease), transform 120ms var(--g-ease);
}
.btn-add svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: -1px; }
.btn-add:hover { background: var(--g-green-700); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 8px 20px rgba(13,48,25,.22); }
.btn-add:active { transform: scale(.985); }
.btn-add--gold { background: linear-gradient(180deg, var(--g-gold-300), #D9A23F); color: var(--g-green-950); box-shadow: var(--g-sh-gold); }
.btn-add--gold:hover { background: linear-gradient(180deg, #F6D893, #DDA846); box-shadow: 0 10px 24px rgba(140,96,24,.3), inset 0 1px 0 rgba(255,255,255,.6); }
.g-qty { display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: 48px; padding: 4px; border-radius: 12px; background: var(--g-cream-200); box-shadow: inset 0 0 0 1px var(--g-sand-400); }
.g-qty button { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 9px; background: #fff; color: var(--g-green-800); font-size: 1.125rem; font-weight: 700; line-height: 1; box-shadow: 0 1px 2px rgba(48,32,12,.08); transition: background-color var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease); }
.g-qty button:hover { background: var(--g-green-800); color: #fff; }
.g-qty output, .g-qty input { flex: 1 1 auto; min-width: 2rem; text-align: center; font-weight: 800; font-size: 1rem; border: 0; background: transparent; padding: 0; width: 2.5rem; color: var(--g-ink); }
.g-qty input::-webkit-inner-spin-button, .g-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.g-qty input { -moz-appearance: textfield; }
.g-qty--lg { height: 56px; min-width: 148px; }
.g-qty--lg button { width: 48px; height: 48px; flex-basis: 48px; }
.g-qty--inline { display: inline-flex; height: 42px; min-width: 120px; padding: 3px; border-radius: 10px; }
.g-qty--inline button { width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; font-size: 1rem; }
.g-gcard .g-cartctl { width: 210px; }
@media (max-width: 575.98px) {
  .g-pcard { padding: .5rem .5rem .875rem; border-radius: var(--g-r-md); }
  .g-pcard__media { border-radius: 10px; }
  .g-wish { top: .9rem; right: .9rem; width: 34px; height: 34px; }
  .g-pcard__origin { margin-top: .75rem; }
  .g-pcard__origin .g-ml { display: none; }
  .g-pcard__name { font-size: 1.0625rem; }
  .g-pcard__foot { gap: .625rem; padding-top: .75rem; }
  .g-cartctl, .btn-add, .g-cartctl .g-qty { height: 44px; }
  .btn-add { font-size: .875rem; padding: 0 .75rem; gap: .5rem; border-radius: 10px; }
  .btn-add svg { width: 16px; height: 16px; flex-basis: 16px; }
  .g-cartctl .g-qty button { width: 36px; height: 36px; flex-basis: 36px; }
  .g-price { font-size: 1.0625rem; }
}

/* 11 — Rails & editorial ------------------------------------------------- */
.g-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1.5rem) / 4); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .75rem .25rem 2rem; margin: -.75rem -.25rem -2rem; scrollbar-width: none; }
.g-rail::-webkit-scrollbar { display: none; }
.g-rail > * { scroll-snap-align: start; }
@media (max-width: 1199.98px) { .g-rail { grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); gap: 1.25rem; } }
@media (max-width: 767.98px) { .g-rail { grid-auto-columns: 62%; gap: .875rem; padding-inline: 1rem; margin-inline: -1rem; scroll-padding-inline: 1rem; } }
.g-rail-ctrl { display: flex; gap: .5rem; }
.g-rail-ctrl button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--g-gold-500); background: #fff; color: var(--g-green-800); box-shadow: var(--g-sh-1); display: inline-flex; align-items: center; justify-content: center; transition: background var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease), border-color var(--g-t-fast) var(--g-ease), opacity var(--g-t-fast) var(--g-ease); }
.g-rail-ctrl button:hover { background: var(--g-green-800); color: #fff; border-color: var(--g-green-800); }
.g-rail-ctrl button:disabled { opacity: .35; pointer-events: none; }
.g-rail-ctrl svg { width: 18px; height: 18px; }

.g-editorial { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.g-editorial__media { position: relative; border-radius: var(--g-r-xl); overflow: hidden; box-shadow: var(--g-sh-3); aspect-ratio: 1672 / 1100; }
.g-editorial__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.g-editorial__badge { position: absolute; left: 1.5rem; bottom: 1.5rem; background: rgba(255,253,248,.94); backdrop-filter: blur(8px); border-radius: var(--g-r-md); padding: 1rem 1.25rem; box-shadow: var(--g-sh-2); max-width: 260px; }
.g-editorial__badge strong { display: block; font-family: var(--g-font-display); font-size: 1.125rem; color: var(--g-green-800); }
.g-editorial__badge span { font-size: .8125rem; color: var(--g-ink-3); }
.g-quote { font-family: var(--g-font-display); font-style: italic; font-size: var(--g-fs-lg); line-height: 1.45; color: var(--g-green-800); border-left: 2px solid var(--g-gold-500); padding-left: 1.25rem; margin: 1.75rem 0; }
@media (max-width: 991.98px) { .g-editorial { grid-template-columns: 1fr; } .g-editorial__media { border-radius: var(--g-r-lg); } }

/* 12 — Gifting ----------------------------------------------------------- */
.g-gift { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--g-r-xl); overflow: hidden; background: radial-gradient(ellipse 70% 90% at 95% 10%, #FFF3DB, #F1DDBF 70%); box-shadow: var(--g-sh-3); isolation: isolate; }
.g-gift > * { min-width: 0; }
.g-gift__media { position: relative; min-height: 460px; overflow: hidden; }
.g-gift__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-gift__body { padding: clamp(2.5rem, 2rem + 3vw, 5rem); display: flex; flex-direction: column; justify-content: center; position: relative; }
.g-gift__body::before { content: ""; position: absolute; right: 2.5rem; top: 2.5rem; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(201,146,42,.5); box-shadow: 0 0 0 12px rgba(201,146,42,.07); }
.g-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.g-chip { display: inline-flex; align-items: center; min-height: 40px; padding: .5rem 1rem; border-radius: var(--g-r-pill); border: 1px solid #CDAE70; background: rgba(255,255,255,.55); color: var(--g-green-800); font-size: .875rem; font-weight: 600; text-decoration: none; transition: background var(--g-t-fast), color var(--g-t-fast), border-color var(--g-t-fast); cursor: pointer; }
.g-chip:hover, .g-chip.is-active { background: var(--g-green-800); border-color: var(--g-green-800); color: #fff; }
@keyframes gFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 991.98px) { .g-gift { grid-template-columns: 1fr; border-radius: var(--g-r-lg); } .g-gift__media { min-height: 240px; } .g-gift__body::before { display: none; } .g-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .g-chip { flex: 0 0 auto; } }

/* Gift product cards (gifts page) */
.g-gcard { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: var(--g-r-xl); overflow: hidden; box-shadow: var(--g-sh-2); border: 1px solid var(--g-cream-300); transition: box-shadow 600ms var(--g-ease); }
.g-gcard:hover { box-shadow: var(--g-sh-3); }
.g-gcard__media { position: relative; min-height: 360px; background: #2A1A10; overflow: hidden; }
.g-gcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--g-ease-out); }
.g-gcard:hover .g-gcard__media img { transform: scale(1.03); }
.g-gcard__body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; }
.g-gcard__list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; font-size: .9375rem; color: var(--g-ink-2); }
.g-gcard__list li::before { content: "✦"; color: var(--g-gold-500); margin-right: .5rem; font-size: .75rem; }
@media (max-width: 767.98px) { .g-gcard { grid-template-columns: 1fr; border-radius: var(--g-r-lg); } .g-gcard__media { min-height: 260px; } }
.g-steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0; }
.g-steps li { border-top: 1px solid var(--g-gold-500); padding-top: 1.5rem; }
.g-steps li::before { counter-increment: s; content: "0" counter(s); display: block; font-family: var(--g-font-display); font-size: 3rem; line-height: 1; color: var(--g-gold-700); margin-bottom: 1rem; }
.g-steps h3 { font-size: 1.5rem; }
@media (max-width: 991.98px) { .g-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .g-steps { grid-template-columns: 1fr; gap: 1.5rem; } }

/* 13 — Journal & newsletter ---------------------------------------------- */
.g-jcard { display: grid; grid-template-columns: 46% 1fr; gap: 1.75rem; align-items: center; background: #fff; border-radius: var(--g-r-lg); padding: .875rem 1.75rem .875rem .875rem; border: 1px solid var(--g-cream-300); box-shadow: var(--g-sh-1); text-decoration: none; color: var(--g-ink); transition: box-shadow 600ms var(--g-ease); height: 100%; }
.g-jcard:hover { box-shadow: var(--g-sh-2); color: var(--g-ink); }
.g-jcard__media { border-radius: var(--g-r-md); overflow: hidden; aspect-ratio: 1.6 / 1; }
.g-jcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--g-ease-out); }
.g-jcard:hover .g-jcard__media img { transform: scale(1.035); }
.g-jcard h3 { font-size: 1.625rem; margin: .25rem 0 .5rem; }
.g-jcard p { font-size: .9375rem; margin: 0 0 .75rem; }
.g-kicker { font-size: .6875rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--g-gold-700); }
@media (max-width: 575.98px) { .g-jcard { grid-template-columns: 120px 1fr; gap: 1rem; padding: .625rem 1rem .625rem .625rem; } .g-jcard__media { aspect-ratio: 1.15 / 1; } .g-jcard h3 { font-size: 1.1875rem; } .g-jcard p { display: none; } }

.g-newsletter { padding-block: 2.25rem; }
.g-newsletter__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.g-newsletter h2 { font-size: var(--g-fs-xl); margin: 0; }
.g-newsletter__form { flex: 0 1 540px; min-width: 0; max-width: 100%; display: flex; background: #fff; border-radius: var(--g-r-pill); padding: 5px; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.g-newsletter__form input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0 1.25rem; font-size: 1rem; color: var(--g-ink); border-radius: var(--g-r-pill); }
.g-newsletter__form input:focus { outline: none; }
.g-newsletter__form .btn-g { min-height: 50px; }
@media (max-width: 575.98px) { .g-newsletter__form { flex: 1 1 100%; } .g-newsletter__form .btn-g { padding-inline: 1.25rem; } }
.g-newsletter__ok { display: none; color: var(--g-gold-300); font-weight: 700; }
.g-newsletter.is-done .g-newsletter__form { display: none; }
.g-newsletter.is-done .g-newsletter__ok { display: block; }

/* 14 — Shop & filters ---------------------------------------------------- */
.g-shopbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem 1.5rem; border-bottom: 1px solid var(--g-cream-300); margin-bottom: 2rem; }
.g-shopbar .form-select { width: auto; min-width: 220px; border-radius: var(--g-r-pill); }
.g-filter { position: sticky; top: calc(var(--g-header-h) + 1.5rem); }
.g-filter__group + .g-filter__group { border-top: 1px solid var(--g-cream-300); padding-top: 1.5rem; margin-top: 1.5rem; }
.g-filter__title { font-family: var(--g-font-body); font-weight: 800; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g-ink); margin-bottom: 1rem; }
.g-check { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; cursor: pointer; font-size: .9688rem; color: var(--g-ink-2); }
.g-check input { width: 20px; height: 20px; margin: 0 .75rem 0 0; accent-color: var(--g-green-800); }
.g-check span:first-child { display: flex; align-items: center; }
.g-check em { font-style: normal; font-size: .8125rem; color: var(--g-ink-3); background: var(--g-cream-200); border-radius: var(--g-r-pill); padding: .1rem .55rem; }
.g-filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.g-filter-chips:empty { display: none; }
.g-filter-chips button { border: 0; border-radius: var(--g-r-pill); background: var(--g-green-800); color: #fff; padding: .4rem .5rem .4rem .9rem; font-size: .8125rem; font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.g-filter-chips button span { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; }
.g-shop-grid > [hidden] { display: none !important; }
.g-empty { text-align: center; padding: 4rem 1rem; display: none; }
.g-empty.is-on { display: block; }
.g-empty svg { width: 64px; height: 64px; color: var(--g-gold-500); margin-bottom: 1rem; }
.g-catnav { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.g-catnav::-webkit-scrollbar { display: none; }
.g-catnav .g-chip { flex: 0 0 auto; border-color: var(--g-sand-400); background: #fff; }
.g-catnav .g-chip:hover, .g-catnav .g-chip.is-active { background: var(--g-green-800); border-color: var(--g-green-800); color: #fff; }
@media (max-width: 991.98px) { .g-filter { position: static; } }

/* 15 — Product page ------------------------------------------------------ */
.g-pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.g-gallery { position: sticky; top: calc(var(--g-header-h) + 1.5rem); display: grid; grid-template-columns: 84px 1fr; gap: 1rem; }
.g-gallery__thumbs { display: flex; flex-direction: column; gap: .75rem; }
.g-gallery__thumbs button { border: 0; padding: 0; border-radius: var(--g-r-md); overflow: hidden; aspect-ratio: 1; background: #EDE5DC; box-shadow: inset 0 0 0 1px var(--g-cream-300); opacity: .65; transition: opacity var(--g-t-fast), box-shadow var(--g-t-fast); }
.g-gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.g-gallery__thumbs button:hover { opacity: 1; }
.g-gallery__thumbs button.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--g-gold-500); }
.g-gallery__main { position: relative; border-radius: var(--g-r-xl); overflow: hidden; background: #EDE5DC; aspect-ratio: 1199 / 1312; box-shadow: var(--g-sh-2); }
.g-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 350ms var(--g-ease); }
.g-gallery__main img.is-swapping { opacity: 0; }
.g-pdp__ml { font-family: var(--g-font-ml); font-size: 1.25rem; color: var(--g-gold-700); }
.g-pdp h1 { font-size: var(--g-fs-4xl); margin: .25rem 0 .75rem; }
.g-pdp__rating { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--g-ink-3); }
.g-stars { color: var(--g-turmeric); letter-spacing: .1em; }
.g-pdp__price { display: flex; align-items: baseline; gap: .75rem; margin: 1.5rem 0; }
.g-pdp__price .g-price { font-size: 2rem; }
.g-optlabel { font-weight: 800; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .75rem; display: flex; justify-content: space-between; }
.g-optlabel span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--g-ink-3); }
.g-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.75rem; }
.g-opt { position: relative; }
.g-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.g-opt label { display: flex; align-items: center; gap: .875rem; padding: .75rem; border-radius: var(--g-r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--g-sand-400); cursor: pointer; transition: box-shadow var(--g-t-fast), background var(--g-t-fast); }
.g-opt img { width: 52px; height: 56px; object-fit: cover; border-radius: var(--g-r-sm); background: #EDE5DC; }
.g-opt strong { display: block; font-size: .9688rem; }
.g-opt small { color: var(--g-ink-3); font-size: .8125rem; }
.g-opt input:checked + label { box-shadow: inset 0 0 0 2px var(--g-green-800), var(--g-sh-1); background: var(--g-cream-50); }
.g-opt input:focus-visible + label { outline: 2px solid var(--g-gold-500); outline-offset: 2px; }
.g-pdp__buy { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.g-pdp__buy .btn-g { flex: 1 1 auto; min-height: 56px; border-radius: 14px; }
.g-pdp__buy .g-qty--lg { border-radius: 14px; }
.g-pdp__buy .g-qty--lg button { border-radius: 11px; }
.g-perks { list-style: none; margin: 0 0 2rem; padding: 1.25rem 0; border-block: 1px solid var(--g-cream-300); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; font-size: .875rem; color: var(--g-ink-2); }
.g-perks li { display: flex; gap: .625rem; align-items: center; }
.g-perks svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--g-green-700); }
.g-origin { border-radius: var(--g-r-lg); padding: 1.5rem; background: var(--g-green-800); color: #fff; position: relative; overflow: hidden; box-shadow: var(--g-sh-2); }
.g-origin::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(243,209,132,.25); box-shadow: 0 0 0 24px rgba(243,209,132,.05); }
.g-origin dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1rem 0 0; }
.g-origin dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--g-gold-300); font-weight: 700; }
.g-origin dd { margin: .2rem 0 0; font-weight: 600; }
.g-tabs .nav-link { color: var(--g-ink-3); font-weight: 700; border: 0; border-bottom: 2px solid transparent; padding: 1rem 0; margin-right: 2rem; background: none; }
.g-tabs .nav-link.active { color: var(--g-green-800); border-bottom-color: var(--g-gold-500); }
.g-tabs .nav-link:hover { color: var(--g-green-800); }
.g-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; background: rgba(255,253,248,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--g-cream-300); box-shadow: 0 -10px 30px rgba(48,32,12,.1); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform 500ms var(--g-ease-out); }
.g-sticky-buy.is-on { transform: none; }
@media (max-width: 991.98px) {
  .g-pdp { grid-template-columns: 1fr; }
  .g-gallery { position: static; grid-template-columns: 1fr; }
  .g-gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .g-gallery__thumbs button { width: 72px; flex: 0 0 72px; }
  .g-gallery__main { border-radius: var(--g-r-lg); }
  .g-perks { grid-template-columns: 1fr; }
}

/* 16 — Cart & checkout --------------------------------------------------- */
.g-panel { background: #fff; border-radius: var(--g-r-lg); border: 1px solid var(--g-cream-300); box-shadow: var(--g-sh-1); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.g-panel + .g-panel { margin-top: 1.5rem; }
.g-panel h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.g-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--g-cream-300); }
.g-line:first-child { padding-top: 0; }
.g-line__img { width: 88px; height: 96px; border-radius: var(--g-r-md); overflow: hidden; background: #EDE5DC; }
.g-line__img img { width: 100%; height: 100%; object-fit: cover; }
.g-line__name { font-family: var(--g-font-display); font-size: 1.1875rem; color: var(--g-green-800); text-decoration: none; display: block; line-height: 1.2; }
.g-line__meta { font-size: .875rem; color: var(--g-ink-3); }
.g-line__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.g-remove { border: 0; background: none; color: var(--g-ink-3); font-size: .8125rem; text-decoration: underline; padding: .25rem 0; }
.g-remove:hover { color: var(--g-chilli); }
.g-line.is-leaving { animation: gLeave 300ms var(--g-ease) forwards; }
@keyframes gLeave { to { opacity: 0; } }
.g-sum { display: flex; justify-content: space-between; padding: .5rem 0; color: var(--g-ink-2); }
.g-sum--total { border-top: 1px solid var(--g-cream-300); margin-top: .75rem; padding-top: 1rem; font-size: 1.25rem; font-weight: 800; color: var(--g-ink); }
.g-ship { background: var(--g-cream-200); border-radius: var(--g-r-md); padding: 1rem 1.25rem; font-size: .9375rem; }
.g-ship__bar { height: 6px; border-radius: 3px; background: var(--g-sand-400); overflow: hidden; margin-top: .75rem; }
.g-ship__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--g-gold-500), var(--g-green-700)); transition: width 800ms var(--g-ease); }
.g-toggle-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--g-r-md); background: var(--g-cream-50); box-shadow: inset 0 0 0 1px var(--g-sand-400); cursor: pointer; }
.g-toggle-card.form-switch { padding-left: 1.25rem; }
.g-toggle-card .form-check-input { margin-left: 0 !important; float: none; width: 2.75em; height: 1.5em; margin-top: .1rem; flex: 0 0 auto; }
.g-pay { display: grid; gap: .75rem; }
.g-pay .g-opt label { padding: 1rem 1.25rem; justify-content: space-between; }
.g-pay .g-opt label span:last-child { font-size: .8125rem; color: var(--g-ink-3); }
.g-steps-bar { display: flex; gap: .5rem; align-items: center; font-size: .875rem; font-weight: 700; color: var(--g-ink-3); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.g-steps-bar li { display: flex; align-items: center; gap: .5rem; }
.g-steps-bar li + li::before { content: ""; width: 28px; height: 1px; background: var(--g-sand-400); }
.g-steps-bar .is-current { color: var(--g-green-800); }
.g-steps-bar b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--g-cream-300); color: var(--g-ink-2); font-size: .75rem; }
.g-steps-bar .is-current b, .g-steps-bar .is-done b { background: var(--g-green-800); color: #fff; }
.g-cart-empty { text-align: center; padding: 3rem 1rem; }
.g-cart-empty svg { width: 72px; height: 72px; color: var(--g-gold-500); }
@media (max-width: 575.98px) { .g-line { grid-template-columns: 72px 1fr; } .g-line__img { width: 72px; height: 80px; } .g-line__right { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } }

/* 17 — Story page -------------------------------------------------------- */
.g-stat { border-left: 1px solid var(--g-gold-500); padding-left: 1.25rem; }
.g-stat strong { display: block; font-family: var(--g-font-display); font-size: var(--g-fs-2xl); color: var(--g-green-800); line-height: 1.1; }
.g-stat span { font-size: .9375rem; color: var(--g-ink-3); }
.g-map svg { width: 100%; height: auto; max-width: 420px; display: block; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(13,48,25,.25)); }
.g-region { display: flex; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--g-sand-400); }
.g-region:first-child { border-top: 1px solid var(--g-sand-400); }
.g-region h3 { font-size: 1.5rem; margin: 0; }
.g-region p { margin: 0; text-align: right; font-size: .9375rem; }
.g-collage { position: relative; min-height: 560px; }
.g-collage__a, .g-collage__b { position: absolute; border-radius: var(--g-r-xl); overflow: hidden; box-shadow: var(--g-sh-3); }
.g-collage__a { left: 0; top: 0; width: 78%; aspect-ratio: 1.45; }
.g-collage__b { right: 0; bottom: 0; width: 52%; aspect-ratio: .9; border: 8px solid var(--g-cream-100); }
.g-collage img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) { .g-collage { min-height: 0; aspect-ratio: 1 / .95; } }

/* 18 — Mini cart / offcanvas --------------------------------------------- */
.g-minicart { --bs-offcanvas-width: 440px; }
.g-minicart .offcanvas-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--g-cream-300); }
.g-minicart .offcanvas-title { font-family: var(--g-font-display); font-size: 1.625rem; color: var(--g-green-800); }
.g-minicart .offcanvas-body { padding: 1.25rem 1.5rem; }
.g-minicart__foot { padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--g-cream-300); background: #fff; box-shadow: 0 -10px 30px rgba(48,32,12,.06); }
.g-minicart .g-line { grid-template-columns: 72px 1fr auto; gap: 1rem; }
.g-minicart .g-line__img { width: 72px; height: 80px; }

.btn-close:focus { box-shadow: 0 0 0 .25rem rgba(217,169,68,.35); }

/* 19 — Mobile tab bar ---------------------------------------------------- */
.g-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1032; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgba(255,253,248,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--g-cream-300); box-shadow: 0 -10px 30px rgba(48,32,12,.08); padding-bottom: env(safe-area-inset-bottom); }
.g-tabbar a, .g-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; font-size: .6875rem; font-weight: 700; color: var(--g-ink-3); text-decoration: none; border: 0; background: none; position: relative; }
.g-tabbar svg { width: 22px; height: 22px; }
.g-tabbar .is-active { color: var(--g-green-800); }
.g-tabbar .is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--g-gold-500); }
.g-tabbar .g-badge { top: 8px; right: calc(50% - 22px); }
@media (max-width: 991.98px) { body { padding-bottom: 64px; } .g-sticky-buy { bottom: 64px; } }

/* 20 — Motion utilities -------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--g-t-med) var(--g-ease-out), transform var(--g-t-med) var(--g-ease-out); transition-delay: calc(var(--i, 0) * var(--g-stagger)); }
[data-reveal="fade"] { transform: none; }
[data-reveal="image"] { transform: none; transition: opacity 1200ms var(--g-ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="line"] { opacity: 1; transform: scaleX(0); transition: transform 900ms var(--g-ease); }
[data-reveal="line"].is-in { transform: scaleX(1); }
[data-parallax] { will-change: transform; }
.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
.g-toast-wrap { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1090; }
@media (max-width: 991.98px) { .g-toast-wrap { bottom: 80px; } }
.g-toast-wrap .toast-body { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.g-toast-wrap img { width: 40px; height: 44px; object-fit: cover; border-radius: 6px; }
.g-toast-wrap a { color: var(--g-gold-300); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .g-lines .g-ln > span { transform: none; }
}

/* 21 — Footer ------------------------------------------------------------ */
.g-footer { background: var(--g-green-950); background-image: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(40,90,55,.35), transparent 60%); color: #C9D0C4; font-size: .9375rem; }
.g-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr; gap: 2.5rem; padding-block: 4.5rem 3rem; }
.g-footer__logo { display: inline-block; background: var(--g-cream-100); border-radius: var(--g-r-md); padding: .625rem 1rem; box-shadow: var(--g-sh-2); }
.g-footer__logo img { height: 54px; width: auto; display: block; }
.g-footer h3 { font-family: var(--g-font-body); font-size: .8125rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; }
.g-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.g-footer a { color: #C9D0C4; text-decoration: none; transition: color var(--g-t-fast); }
.g-footer a:hover { color: var(--g-gold-300); }
.g-footer .btn-g, .g-footer .btn-g:hover { color: var(--g-btn-fg); }
.g-footer p { color: #AEB8AA; }
.g-footer__phone { font-size: 1.375rem; font-weight: 800; color: #fff; }
.g-social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.g-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background var(--g-t-fast), border-color var(--g-t-fast), color var(--g-t-fast); }
.g-social a:hover { background: var(--g-gold-400); border-color: var(--g-gold-400); color: var(--g-green-950); }
.g-social svg { width: 18px; height: 18px; }
.g-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; font-size: .8125rem; }
.g-pay-badges { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.g-pay-badges span { background: #fff; color: var(--g-ink); font-weight: 800; font-size: .6875rem; letter-spacing: .04em; padding: .35rem .6rem; border-radius: 5px; }
.g-footer__col-toggle { display: none; }
@media (max-width: 991.98px) {
  .g-footer__top { grid-template-columns: 1fr; gap: 0; padding-block: 2.5rem 1.5rem; }
  .g-footer__brand { margin-bottom: 1.5rem; }
  .g-footer__col { border-bottom: 1px solid rgba(255,255,255,.1); }
  .g-footer__col h3 { display: none; }
  .g-footer__col-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 56px; background: none; border: 0; color: #fff; font-weight: 800; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; padding: 0; }
  .g-footer__col-toggle::after { content: "+"; font-size: 1.375rem; color: var(--g-gold-400); font-weight: 400; transition: transform var(--g-t-fast) var(--g-ease); }
  .g-footer__col-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
  .g-footer__col ul { padding-bottom: 1.25rem; }
  .g-footer__help { padding-top: 1.75rem; }
}
@media (min-width: 992px) { .g-footer__col .collapse { display: block !important; height: auto !important; visibility: visible !important; } }