/* =====================================================
   HIMWAASI — Shared Design System
   Mobile-First, then scales up to desktop
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   ACCESSIBILITY BASE
   Focus ring, skip link, reduced-motion guard.
   --accent is surface-aware (light #3E4A38 / dark #7A9070) so
   the ring clears WCAG on both themes without a second token.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Mouse users: drop the ring where a custom indicator (border /
   fill change) already signals focus. Keyboard users keep the
   :focus-visible ring above. */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 100000;
  padding: 11px 20px;
  background: var(--forest-ink);
  color: #FFF;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Skip-link target clears the fixed nav when it receives focus. */
#main { scroll-margin-top: 76px; }
#main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   DESIGN TOKENS

   Colour is split by SURFACE, not by hue name. A single "gold"
   cannot be both text on parchment (needs to be dark) and a fill
   under ink (needs to stay light) — the same value scores 2.04:1
   one way and 6.04:1 the other. So gold has three tokens, each
   bound to the surface it actually sits on.

   Every value below carries its measured WCAG ratio against the
   surface it is intended for. Ratios >= 4.5 pass AA body text.
   ============================================================ */
:root {
  color-scheme: light;

  /* -- Surfaces ------------------------------------------------ */
  --bg: #F2EBDA;            /* parchment — primary page ground  */
  --bg2: #EAE0CD;           /* alt band / inset                 */
  --bg3: #DDD2B8;           /* deep inset                       */
  --forest: #3E4A38;        /* brand green                      */
  --forest-deep: #2B3427;
  --forest-ink: #232B20;
  --parchment: #F2EBDA;     /* = --bg, kept as a semantic alias */

  /* -- Gold: one job each ---------------------------------------
     --gold      #C9A227  fill under --forest-ink text  (6.04:1)
                          and text on forest-ink / dark (5.35:1+)
     --gold-mid  #D9B33C  text on --forest             (4.67:1)
     --gold-ink  #6F5508  text on parchment            (5.93:1)
                          auto-flips to #E6C86B in dark mode

     Never set --gold as text on --bg. It scores 2.04:1.
     ------------------------------------------------------------ */
  --gold: #C9A227;
  --gold-mid: #D9B33C;
  --gold-ink: #6F5508;
  --gold-on-parchment: #6F5508;   /* NEVER flips: text on always-light surfaces (e.g. the journey card) */

  /* -- Brand accents --------------------------------------------
     --accent       text / border / icon on the page ground
     --accent-fill  fill that carries white text
     Separate tokens because no single value passes both
     directions. Identical in light mode; split in dark.        */
  --accent: #3E4A38;        /* = --forest, 7.88:1 on parchment  */
  --accent-fill: #3E4A38;   /* white on it = 9.37:1             */

  --power-red: #96372B;     /* heritage red                     */
  --pattern-red: #96372B;   /* legacy alias of --power-red - NEVER flips */
  --red-ink: #96372B;         /* text on dark - flips in dark to #E08570 */

  /* -- Kullu patti ----------------------------------------------
     Authentic textile saturation, deliberately NOT the Five
     Stops. A woven Kullu shawl is meant to be loud; UI chrome
     is not. Never retune these toward the muted UI palette.   */
  --patti-red: #96372B;
  --patti-yellow: #FFC107;
  --patti-blue: #2980B9;
  --patti-green: #27AE60;
  --patti-band: url('../assets/patti.webp');
  --patti-bg: url('../assets/patti.webp') repeat-x center / auto 100%;

  /* -- Five Stops (shop filters / card accents) ------------------
     Retuned from Flat-UI defaults to brand-harmonised, low-
     saturation values. All now pass 4.5:1 on --bg as text AND
     under white text as a fill.                               */
  --prosperity-green: #4A6B47;  /* 5.07:1   was #27AE60 @ 2.42 */
  --spirit-blue: #4A5A63;       /* 6.02:1   was #2980B9 @ 3.62 */
  --vibrant-orange: #94551C;    /* 4.94:1   was #D35400 @ 3.51 */
  --stability-brown: #6B5344;   /* 6.00:1   was #5D4037 @ 7.84 */

  /* -- Text ------------------------------------------------------ */
  --text: #262B22;          /* 12.18:1  AAA */
  --text-soft: #565B50;     /*  5.87:1  AA  */
  --text-muted: #66634F;    /*  5.10:1  was #8A8779 @ 3.04 FAIL */

  --border: rgba(62, 74, 56, 0.14);

  /* -- Type ------------------------------------------------------ */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --kullu-patti: repeating-linear-gradient(
    45deg,
    var(--patti-red)    0px, var(--patti-red)    15px,
    var(--patti-yellow) 15px, var(--patti-yellow) 30px,
    var(--patti-blue)   30px, var(--patti-blue)   45px,
    var(--patti-green)  45px, var(--patti-green)  60px
  );
}


/* ---- BASE ---- */
html { font-size: var(--fs-base); }

body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--accent);
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--accent-fill); }

/* ============================================================
   NAV — mobile first
   ============================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(253, 246, 236, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: none;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.4s cubic-bezier(0.3,1,0.3,1), padding 0.3s ease, box-shadow 0.3s;
}

nav.nav-hidden { transform: translateY(-100%); }
nav.nav-scrolled {
  padding: 8px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.logo { display: flex; flex-direction: column; align-items: center; }
.logo-hindi {
  font-family: var(--font-serif);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
}
.logo-text {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Desktop nav links — hidden on mobile */
.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  transition: color 0.3s;
  text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a.active { color: var(--power-red); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.nav-icon {
  font-size: var(--icon-xs);
  position: relative;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s;
  display: flex; align-items: center;
}
.nav-icon:hover { transform: scale(1.1); }

.cart-count {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--power-red);
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}

/* ============================================================
   BUTTONS — mobile first
   ============================================================ */
.btn-primary {
  padding: 14px 28px;
  background: var(--power-red);
  color: #FFF;
  border: 2px solid var(--power-red);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  font-family: var(--font-sans);
  display: inline-block;
}
.btn-primary:hover { background: transparent; color: var(--power-red); }

.btn-secondary {
  padding: 14px 28px;
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  font-family: var(--font-sans);
  display: inline-block;
}
.btn-secondary:hover { background: var(--accent-fill); color: #FFF; }

/* ============================================================
   SECTION SHARED
   ============================================================ */
.section-eyebrow {
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--power-red);
  margin-bottom: 12px;
}
.section-title {
  font-size: var(--fs-display-md);
  line-height: 1.1;
}
.section-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

/* ---- KULLU PATTI DIVIDER ---- */
.patti-divider {
  height: 14px;
  background: var(--patti-bg);
  width: 100%;
}

/* ============================================================
   PRODUCT CARD — mobile first
   ============================================================ */
.postcard {
  background: #FFF;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.03);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.3,1,0.3,1), box-shadow 0.4s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  overflow: hidden;
  min-width: 0;
}
.postcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hover-border-color, var(--power-red));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.postcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px var(--hover-color, rgba(0,0,0,0.08));
}
.postcard:hover::before { opacity: 1; }

/* Mobile card — compact */
.pc-hook {
  display: none; /* hidden mobile */
}
.pc-img-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}
.pc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.postcard:hover .pc-img { transform: scale(1.05); }

.scarcity-tag {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(255,255,255,0.95);
  color: var(--power-red);
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  z-index: 2;
  border: 1px solid var(--power-red);
  white-space: nowrap;
  max-width: 68%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.btn-quick-add {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: #FFF;
  border: none;
  font-size: 0;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  transition: background 0.2s;
}
.btn-quick-add::after { content: "+"; font-size: var(--fs-lg); font-family: monospace; line-height: 1; }

.btn-quick-add:hover { background: var(--power-red); }

.btn-quick-add.added { background: var(--prosperity-green); pointer-events: none; }

.btn-quick-add.added::after { content: "✓"; }

.pc-reviews {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  margin: 10px 0 4px;
}
.stars { color: var(--gold-ink); font-size: var(--fs-3xs); letter-spacing: 2px; }
.review-count { display: none; font-size: var(--fs-3xs); font-weight: 600; color: var(--text-muted); }

.pc-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-sm);
  margin: 4px 12px 4px;
  color: var(--accent);
  line-height: 1.3;
  word-break: break-word;
}
.pc-story {
  display: none; /* mobile hidden */
}
.pc-meta {
  display: none; /* mobile hidden */
}
.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: none;
  padding: 0 12px 12px;
  margin-top: 4px;
}
.pc-price {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.btn-story {
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: none;
  border: none;
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
  padding-bottom: 2px;
  font-family: var(--font-sans);
  transition: color 0.2s;
  display: none; /* mobile hidden */
}
.btn-story:hover { color: var(--power-red); border-color: var(--power-red); }

/* Product grid — 2 cols on mobile */
.postcards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ---- STOP SECTION COLOR THEMING ---- */
.theme-red   { --hover-color: rgba(192,57,43,0.15); --hover-border-color: var(--power-red); }
.theme-green { --hover-color: rgba(39,174,96,0.15); --hover-border-color: var(--prosperity-green); }
.theme-blue  { --hover-color: rgba(41,128,185,0.15); --hover-border-color: var(--spirit-blue); }
.theme-orange{ --hover-color: rgba(211,84,0,0.15);  --hover-border-color: var(--vibrant-orange); }
.theme-brown { --hover-color: rgba(93,64,55,0.15);  --hover-border-color: var(--stability-brown); }

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-overlay.show { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: -100%;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: #FFF;
  z-index: 10000;
  box-shadow: -5px 0 40px rgba(0,0,0,0.12);
  transition: right 0.35s cubic-bezier(0.3,1,0.3,1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { right: 0; }

.cart-header {
  padding: 20px;
  border-bottom: 1px solid #EBE5D9;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg2);
  border-top: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
}
.cart-header h3 {
  font-family: var(--font-serif);
  color: var(--accent);
  margin: 0; font-size: var(--fs-lg);
}
.close-cart {
  background: none; border: none;
  font-size: var(--icon-md); color: var(--text-soft);
  cursor: pointer; line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cart-items { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--text-soft); }
.cart-empty .empty-icon { font-size: var(--icon-xl); margin-bottom: 16px; display: block; }
.cart-empty p { font-size: var(--fs-sm); font-weight: 500; }

.cart-item {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid #EBE5D9;
}
.cart-item-img {
  width: 56px; height: 56px;
  border-radius: var(--radius-md); object-fit: cover;
  background: var(--bg2); flex-shrink: 0;
}
.cart-item-info { flex: 1; }
.cart-item-info h4 {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--accent);
  font-family: var(--font-serif);
  margin-bottom: 3px;
}
.cart-item-region {
  font-size: var(--fs-3xs); color: var(--text-muted);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.cart-qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 22px; height: 22px;
  border: 1px solid var(--border); background: #FFF;
  color: var(--accent); font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); transition: background-color 0.2s, color 0.2s, border-color 0.2s; border-radius: var(--radius-sm);
}
.qty-btn:hover { background: var(--accent-fill); color: #FFF; }
.qty-num { font-size: var(--fs-xs); font-weight: 700; color: var(--text); min-width: 18px; text-align: center; }
.cart-item-price {
  font-weight: 800; color: var(--power-red);
  font-size: var(--fs-sm); font-family: var(--font-serif); flex-shrink: 0;
}
.cart-footer { padding: 16px 20px; border-top: 1px solid #EBE5D9; background: var(--bg2); }
.cart-subtotal {
  display: flex; justify-content: space-between;
  font-size: var(--fs-2xs); color: var(--text-soft); margin-bottom: 8px;
}
.cart-total {
  display: flex; justify-content: space-between;
  font-size: var(--fs-base); font-weight: 800;
  color: var(--accent); font-family: var(--font-serif);
  margin-bottom: 14px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cart-cta { width: 100%; text-align: center; font-size: var(--fs-xs); }

/* ============================================================
   FOOTER — mobile first
   ============================================================ */
footer {
  background: var(--stability-brown);
  color: #FFF;
  padding: 50px 20px 30px;
  border-top: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
}
.footer-grid {
  max-width: 1280px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.footer-brand .logo-text,
.footer-brand .logo-hindi { color: #FFF; }
.footer-brand p { color: rgba(255,255,255,0.65); font-size: var(--fs-xs); margin-top: 14px; line-height: 1.7; }

.footer-title {
  font-family: var(--font-serif);
  font-weight: 800; font-size: var(--fs-sm);
  margin-bottom: 16px; color: var(--gold);
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: rgba(255,255,255,0.65); font-size: var(--fs-xs); font-weight: 500; transition: color 0.2s; }
.footer-links a:hover { color: #FFF; }

.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.social-link {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); font-size: var(--fs-sm); transition: background-color 0.2s, border-color 0.2s;
}
.social-link:hover { background: var(--gold); border-color: var(--gold); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
  font-size: var(--fs-2xs); color: rgba(255,255,255,0.5);
}
.footer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer-badge { display: flex; align-items: center; gap: 5px; font-size: var(--fs-3xs); font-weight: 600; }

/* ============================================================

   LOADING SPINNER

   ============================================================ */

.hw-spinner {

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 2px solid var(--border);

  border-top: 2px solid var(--accent);

  border-radius: var(--radius-pill);

  animation: hw-spin 0.6s linear infinite;

  vertical-align: middle;

}

.hw-spinner.light { border-color: rgba(255,255,255,0.3); border-top-color: #FFF; }

@keyframes hw-spin {

  to { transform: rotate(360deg); }

}

.hw-loading-overlay {

  position: absolute;

  inset: 0;

  background: rgba(255,255,255,0.7);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

  border-radius: inherit;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s;

}

.hw-loading-overlay.show { opacity: 1; pointer-events: auto; }



/* ============================================================

   ANIMATIONS

   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes slideBand {
  from { background-position: 0 0; }
  to   { background-position: -390px 0; }
}

.fade-in { animation: fadeInUp 0.8s ease-out both; }
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

/* ============================================================
   TABLET — 640px+
   ============================================================ */
@media (min-width: 640px) {
  nav { padding: 12px 32px; }
  nav.nav-scrolled { padding: 8px 32px; }

  .postcards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  footer { padding: 60px 32px 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ============================================================
   DESKTOP — 1024px+
   ============================================================ */
@media (min-width: 1024px) {
  nav { padding: 14px 48px; }
  nav.nav-scrolled { padding: 10px 48px; }

  .nav-links { display: flex; }

  /* Full product card on desktop */
  .postcard {
    padding: 22px;
    border-radius: var(--radius-xl);
  }
  .pc-img-wrap {
    height: auto;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
  }
  .pc-hook {
    display: flex;
    font-size: var(--fs-3xs); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.15em;
    margin-bottom: 12px; align-items: center; gap: 6px;
    color: var(--hover-border-color, var(--power-red));
  }
  .pc-hook::before { content://; display:inline-block; width:11px; height:11px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%272.5%27/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%272.5%27/%3E%3C/svg%3E") no-repeat center / contain; vertical-align:middle; }
  .pc-story {
    display: block;
    font-size: var(--fs-xs); font-weight: 500;
    color: var(--text-soft); margin-bottom: 16px; flex-grow: 1;
  }
  .pc-meta {
    display: block;
    background: var(--bg2); padding: 10px 12px;
    font-size: var(--fs-2xs); font-weight: 500;
    color: var(--text-soft); margin-bottom: 16px;
    border-left: 4px solid var(--hover-border-color, var(--border));
  }
  .pc-meta strong {
    color: var(--text); font-weight: 700;
    display: block; margin-bottom: 3px;
  }
  .pc-footer {
    border-top: 1px solid var(--border);
    padding: 14px 0 0;
    margin-top: 0;
  }
  .pc-price { font-size: var(--fs-lg); }
  .btn-story { display: inline-block; font-size: var(--fs-3xs); }
  .review-count { display: block; }
  .pc-title { font-size: var(--fs-lg); margin: 0 0 8px 0; }
  .pc-reviews { padding: 0; margin: 0 0 10px 0; }

  /* Desktop — quick add becomes slide-up overlay */
  .btn-quick-add {
    position: absolute;
    bottom: -40px; left: 8px; right: 8px;
    top: auto; width: auto; height: auto;
    border-radius: 0;
    background: var(--text);
    padding: 11px;
    font-size: var(--fs-3xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: bottom 0.3s ease, opacity 0.3s ease;
  }
  .btn-quick-add::after { content: none; }
  .btn-quick-add::before { content: "Quick Add"; font-size: var(--fs-3xs); letter-spacing: 0.1em; }
  .postcard:hover .btn-quick-add { bottom: 8px; opacity: 1; }
  .btn-quick-add:hover { background: var(--hover-border-color, var(--power-red)); }

  .postcards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 36px;
  }
  .scarcity-tag { top: 10px; left: 10px; }

  .section-header { margin-bottom: 60px; }
  footer { padding: 80px 48px 40px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 0;
  padding-top: 80px;
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: -5%; bottom: -5%;
  left: -5%; right: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(253,246,236,0.55) 0%,
    rgba(246,239,223,0.35) 40%,
    rgba(234,224,205,0.45) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 40px 20px;
  max-width: 680px;
  margin: auto 0;
}
.hero-badge {
  display: inline-block;
  background: var(--accent-fill);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
  margin-bottom: 20px;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-display-3xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1.05;
  margin-bottom: 20px;
  max-width: 600px;
  text-shadow:

    0 1px 4px rgba(0,0,0,0.1),

    0 2px 12px rgba(0,0,0,0.06);

}

.hero-sub {

  font-size: var(--fs-display-sm);

  color: var(--text);

  font-weight: 500;

  margin-bottom: 20px;

  line-height: 1.7;

  max-width: 480px;

  text-shadow:

    0 1px 3px rgba(0,0,0,0.08);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}
.hero-actions .btn-primary {
  background: var(--accent-fill);
  color: #FFF;
  border-color: var(--accent);
}
.hero-actions .btn-primary:hover {
  background: transparent;
  color: var(--accent);
}

/* ============================================================
   REGION SLIDER — bottom of hero
   ============================================================ */
.region-slider-wrap {
  position: relative;
  z-index: 3;
  padding: 32px 20px 20px;
  background: linear-gradient(0deg, rgba(253,246,236,0.92) 0%, rgba(253,246,236,0.35) 60%, transparent 100%);
}
.region-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.region-slider::-webkit-scrollbar { display: none; }
.region-card {
  flex: 0 0 140px;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  color: #FFF;
  width: 140px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border: none;
}
.region-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.15) 100%);
  z-index: 1;
  transition: opacity 0.3s;
}
.region-card:hover,
.region-card.active {
  transform: translateY(-4px);
}
.region-card:hover::before {
  opacity: 0.85;
}
.region-card-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 16px 12px;
}
.region-card-name {
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.region-card-count {
  font-size: var(--fs-3xs);
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
}

/* ============================================================
   CATEGORY SECTION
   ============================================================ */
.categories-section {
  padding: 60px 20px;
  background: var(--bg2);
}
.categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.3,1,0.3,1), box-shadow 0.3s;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.category-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  transition: transform 0.6s ease;
}
.category-card:hover .category-card-bg {
  transform: scale(1.05);
}
.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index: 1;
}
.category-card-content {
  position: relative;
  z-index: 2;
  padding: 24px 20px;
  color: #FFF;
  width: 100%;
}
.category-card-stop {
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 6px;
}
.category-card-name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 800;
  margin-bottom: 4px;
}
.category-card-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  margin-bottom: 8px;
}
.category-card-desc {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  max-width: 400px;
}
.category-card-count {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: var(--radius-xl);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: #FFF;
}

/* ============================================================
   FEATURED PRODUCTS SECTION
   ============================================================ */
.featured-section {
  padding: 60px 20px;
}
.featured-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto 32px;
}
.featured-header .section-header {
  text-align: left;
  margin-bottom: 0;
}
.load-more-wrap {
  text-align: center;
  margin-top: 32px;
}
.btn-load-more {
  padding: 12px 32px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  font-family: var(--font-sans);
}
.btn-load-more:hover {
  background: var(--accent-fill);
  color: #FFF;
}
.active-filter {
  background: var(--power-red);
  color: #FFF;
}

/* ============================================================
   STOP SECTIONS — category product sections on homepage
   ============================================================ */
.stop-section {
  padding: 60px 20px;
  background: var(--bg);
}
.stop-section:nth-child(even) {
  background: var(--bg2);
}
.stop-section .section-header {
  margin-bottom: 36px;
}

/* ============================================================
   TRUST / ABOUT SECTION
   ============================================================ */
.trust-section {
  padding: 60px 20px;
  background: var(--bg3);
  position: relative;
  overflow: hidden;
}
.trust-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: var(--patti-bg);
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.trust-grid > .trust-item:last-child { grid-column: 1 / -1; }
.trust-item {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.8);
  transition: transform 0.3s, box-shadow 0.3s;
}
.trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.trust-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,162,39,0.14);
  border: 1px solid rgba(201,162,39,0.42);
}
.trust-item .trust-icon .hw-ic { width: 26px; height: 26px; color: #8a6d1c; }
.trust-title {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 6px;
}
.trust-desc {
  font-size: var(--fs-2xs);
  color: var(--text-soft);
  line-height: 1.6;
}

/* ============================================================
   HIMACHAL FACT FLOATER
   ============================================================ */
.him-fact {
  display: none;
  padding: 16px 20px;
  background: var(--accent-fill);
  color: #FFF;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  position: relative;
  border-top: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
}
.him-fact strong {
  color: var(--gold-mid);
  font-weight: 800;
  font-family: var(--font-serif);
}
.him-fact.show { display: block; }

/* ============================================================
   SIDE DRAWER — mobile nav
   ============================================================ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drawer-overlay.show { opacity: 1; visibility: visible; }

.side-drawer {
  position: fixed;
  top: 0; left: -280px;
  width: 280px;
  height: 100vh;
  background: #FFF;
  z-index: 999;
  box-shadow: 4px 0 24px rgba(0,0,0,0.1);
  transition: left 0.3s cubic-bezier(0.3,1,0.3,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.side-drawer.open { left: 0; }
.drawer-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-header .logo-text { font-size: var(--fs-lg); }
.drawer-close {
  background: none;
  border: none;
  font-size: var(--icon-sm);
  color: var(--text-soft);
  cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drawer-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.drawer-section-title {
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color 0.2s;
  cursor: pointer;
}
.drawer-link:hover { color: var(--power-red); }
.drawer-link .dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.drawer-search {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.drawer-search input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  background: var(--bg);
  transition: border-color 0.2s;
}
.drawer-search input:focus {
  border-color: var(--accent);
}
.drawer-footer {
  padding: 20px;
  margin-top: auto;
  font-size: var(--fs-3xs);
  color: var(--text-muted);
  text-align: center;
}
/* Drawer accordions (Shop by Category / Region, Help) */
.drawer-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  font-size: var(--fs-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.drawer-acc-head .chev { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.3s ease; }
.drawer-acc.open .drawer-acc-head .chev { transform: rotate(180deg); }
.drawer-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.3,1,0.3,1); }
.drawer-acc.open .drawer-acc-body { grid-template-rows: 1fr; }
.drawer-acc-body > div { overflow: hidden; }
@supports not (grid-template-rows: 0fr) {
  .drawer-acc:not(.open) .drawer-acc-body { display: none; }
  .drawer-acc.open .drawer-acc-body { display: block; }
}
.drawer-link .hw-ic { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.search-overlay.show { opacity: 1; visibility: visible; }
.search-overlay-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.search-overlay-input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  border-bottom: 2px solid var(--gold);
  background: transparent;
  font-size: var(--fs-lg);
  color: #FFF;
  font-family: var(--font-sans);
}
.search-overlay-input::placeholder { color: rgba(255,255,255,0.4); }
.search-overlay-input:focus-visible {
  outline: 2px solid var(--gold-mid);
  outline-offset: 2px;
}
.search-close {
  background: none;
  border: none;
  color: #FFF;
  font-size: var(--icon-md);
  cursor: pointer;
}
.search-results {
  flex: 1;
  overflow-y: auto;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background 0.2s;
  color: #FFF;
}
.search-result-item:hover { background: rgba(255,255,255,0.05); }
.search-result-img {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.search-result-info { flex: 1; }
.search-result-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 2px;
}
.search-result-meta {
  font-size: var(--fs-3xs);
  color: rgba(255,255,255,0.5);
}
.search-result-price {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--gold);
}
.search-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,0.4);
  font-size: var(--fs-sm);
}

/* ============================================================
   STICKY ADD-TO-CART BAR (mobile)
   ============================================================ */
/* ============================================================

   PRODUCT DETAIL PAGE

   ============================================================ */

.product-main {

  max-width: 1280px;

  margin: 100px auto 0;

  padding: 60px 48px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: start;

}

.product-image-col { position: sticky; top: 110px; }

.product-image-wrap {

  width: 100%;

  aspect-ratio: 1/1;

  border-radius: var(--radius-xl);

  overflow: hidden;

  background: var(--bg2);

  position: relative;

}

.product-image-wrap img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;

}

.product-image-wrap:hover img { transform: scale(1.04); }

.product-tag {

  position: absolute;

  top: 18px; left: 18px;

  background: rgba(255,255,255,0.95);

  color: var(--power-red);

  font-size: var(--fs-3xs); font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  letter-spacing: 0.1em;

  padding: 5px 12px;

  border: 1px solid var(--power-red);
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.product-thumbs {

  display: flex;

  gap: 12px;

  margin-top: 16px;

}

.product-thumb {

  width: 72px; height: 72px;

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 2px solid transparent;

  cursor: pointer;

  transition: border-color 0.2s;

  background: var(--bg2);

}

.product-thumb.active { border-color: var(--accent); }

.product-thumb img { width: 100%; height: 100%; object-fit: cover; }



.product-breadcrumb {

  font-size: var(--fs-2xs); font-weight: 600;

  color: var(--text-muted);

  margin-bottom: 20px;

  display: flex; align-items: center; gap: 8px;

  flex-wrap: wrap;

}

.product-breadcrumb a { color: var(--accent); text-decoration: none; }

.product-breadcrumb a:hover { color: var(--power-red); }



.product-category-badge {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 5px 14px;

  font-size: var(--fs-3xs); font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 16px;

  border: 2px solid;

}



.product-name {

  font-family: var(--font-serif);

  font-size: var(--fs-display-lg);

  line-height: 1.15;

  margin-bottom: 8px;

  font-weight: 800;

  color: var(--accent);

}

.product-region {

  font-size: var(--fs-xs); font-weight: 700;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-bottom: 20px;

  display: flex; align-items: center; gap: 8px;

}

.product-region::before { content://; display:inline-block; width:14px; height:14px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%272.5%27/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%272.5%27/%3E%3C/svg%3E") no-repeat center / contain; vertical-align:middle; }



.product-rating {

  display: flex; align-items: center; gap: 10px;

  margin-bottom: 24px;

}

.product-rating .stars { font-size: var(--fs-base); color: var(--gold-mid); letter-spacing: 3px; }

.product-rating-num { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

.product-rating-count { font-size: var(--fs-xs); color: var(--text-muted); }



.product-price-wrap {

  display: flex; align-items: baseline; gap: 14px;

  margin-bottom: 28px;

}

.product-price {

  font-family: var(--font-serif);

  font-size: var(--fs-4xl); font-weight: 800;

  color: var(--accent);

}

.product-price-sub {

  font-size: var(--fs-2xs); font-weight: 600;

  color: var(--text-muted);

}



.product-story {

  font-size: var(--fs-sm); font-weight: 500;

  color: var(--text-soft);

  line-height: 1.8;

  margin-bottom: 28px;

  padding: 20px 20px 20px 18px;

  border-left: 4px solid var(--gold);

  background: var(--bg2);

  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;

}



.product-details { margin-bottom: 28px; }

.detail-item {

  border-top: 1px solid var(--border);

}

.detail-item:last-child { border-bottom: 1px solid var(--border); }

.detail-header {

  display: flex; justify-content: space-between; align-items: center;

  padding: 14px 0;

  cursor: pointer;

  font-size: var(--fs-xs); font-weight: 700;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  user-select: none;

}

.detail-header .detail-arrow {

  font-size: var(--icon-xs);

  transition: transform 0.25s;

}

.detail-body {

  font-size: var(--fs-sm); font-weight: 500;

  color: var(--text-soft);

  line-height: 1.75;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease, padding 0.25s;

}

.detail-body.open {

  max-height: 200px;

  padding-bottom: 16px;

}

.detail-item.open .detail-arrow { transform: rotate(180deg); }



.add-to-cart-wrap {

  display: flex; gap: 14px;

  position: sticky;

  bottom: 0;

  z-index: 10;

  background: var(--bg);

  padding: 12px 0 0;

  margin-top: auto;

  border-top: 1px solid var(--border);

}

.notify-wrap {

  position: sticky;

  bottom: 0;

  z-index: 10;

  background: var(--bg);

  padding: 12px 0 0;

  border-top: 1px solid var(--border);

}

.qty-selector {

  display: flex; align-items: center;

  border: 2px solid var(--border);

  border-radius: var(--radius-sm);

  overflow: hidden;

}

.qty-selector button {

  width: 40px; height: 54px;

  border: none; background: var(--bg2);

  font-size: var(--fs-xl); cursor: pointer;

  color: var(--accent);

  font-weight: 700;

  transition: background 0.2s;

  font-family: var(--font-sans);

}

.qty-selector button:hover { background: var(--bg3); }

.qty-selector span {

  width: 44px; text-align: center;

  font-size: var(--fs-sm); font-weight: 800;

  color: var(--accent);

}

.btn-add-cart {

  flex: 1; padding: 0 28px; height: 54px;

  background: var(--accent-fill);

  color: #FFF;

  border: 2px solid var(--accent);

  font-size: var(--fs-2xs); font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer; font-family: var(--font-sans);

  transition: background-color 0.3s, border-color 0.3s;

  border-radius: var(--radius-sm);

}

.btn-add-cart:hover { background: var(--power-red); border-color: var(--power-red); }



.product-trust-badges {

  display: flex; gap: 20px; flex-wrap: wrap;

  padding: 18px 20px;

  background: var(--bg2);

  border-radius: var(--radius-lg);

  margin-top: 10px;

}

.trust-badge {

  display: flex; align-items: center; gap: 8px;

  font-size: var(--fs-2xs); font-weight: 600;

  color: var(--text-soft);

}

.trust-badge .badge-icon { font-size: var(--fs-base); }



.product-wishlist {

  width: 44px; height: 44px;

  border: 2px solid var(--border);

  border-radius: var(--radius-md);

  background: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--fs-lg);

  transition: background-color 0.2s, border-color 0.2s;

  flex-shrink: 0;

}

.product-wishlist:hover { border-color: var(--power-red); }

.product-wishlist.saved { border-color: var(--power-red); background: rgba(192,57,43,0.05); }



.product-actions {

  display: flex;

  gap: 12px;

  margin-bottom: 24px;

}



/* ============================================================

   ORIGIN / SOURCING STORY

   ============================================================ */

.origin-section {

  max-width: 1280px;

  margin: 0 auto;

  padding: 60px 48px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}

.origin-region-map {

  background: var(--bg2);

  border-radius: var(--radius-xl);

  overflow: hidden;

  aspect-ratio: 4/3;

  display: flex; align-items: center; justify-content: center;

}

.origin-region-img {

  width: 100%; height: 100%;

  object-fit: cover;

}

.origin-stat {

  display: flex; align-items: flex-start; gap: 14px;

  margin-bottom: 20px;

}

.origin-stat-icon {

  font-size: var(--icon-sm);

  width: 48px; height: 48px;

  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.25));

  border-radius: var(--radius-lg);

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0;

}

.origin-stat-text h5 { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); margin-bottom: 4px; font-family: var(--font-serif); }

.origin-stat-text p { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 500; }



/* ============================================================

   RELATED PRODUCTS

   ============================================================ */

.related-section {

  padding: 80px 48px;

  background: var(--bg2);

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}

.related-section .section-header { margin-bottom: 36px; }



@media (max-width: 900px) {

  .product-main { grid-template-columns: 1fr; gap: 36px; padding: 100px 20px 40px; margin-top: 0; }

  .product-image-col { position: static; }

  .origin-section { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; }

  .related-section { padding: 60px 20px; }

}
/* ============================================================
   REGION STORY POPUP
   ============================================================ */
.region-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.region-popup-overlay.show { opacity: 1; visibility: visible; }
.region-popup {
  background: #FFF;
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.region-popup-overlay.show .region-popup { transform: translateY(0); }
.region-popup-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.region-popup-body {
  padding: 20px;
}
.region-popup-name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}
.region-popup-story {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.region-popup-close {
  width: 100%;
  padding: 10px;
  background: var(--bg2);
  border: none;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  transition: background 0.2s;
}
.region-popup-close:hover { background: var(--bg3); }

/* ============================================================
   CART / CHECKOUT PAGE
   ============================================================ */
.checkout-page {
  padding: 80px 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.checkout-layout {
  display: grid;
  gap: 32px;
}
.checkout-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 24px;
}
.checkout-section {
  background: #FFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 16px;
}
.checkout-section-title {
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.cart-page-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cart-page-item:last-child { border-bottom: none; }
.cart-page-img {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--bg2);
  flex-shrink: 0;
}
.cart-page-info { flex: 1; }
.cart-page-name {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-serif);
  margin-bottom: 2px;
}
.cart-page-weight {
  font-size: var(--fs-3xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cart-page-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart-page-price {
  font-weight: 800;
  color: var(--power-red);
  font-size: var(--fs-sm);
  font-family: var(--font-serif);
}
.cart-page-remove {
  font-size: var(--fs-3xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
  margin-top: 4px;
}

.checkout-form label {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.checkout-form input,
.checkout-form textarea,
.checkout-form select {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  background: var(--bg);
  transition: border-color 0.2s;
  margin-bottom: 14px;
}
.checkout-form input:focus,
.checkout-form textarea:focus { border-color: var(--accent); }
.checkout-form textarea { resize: vertical; min-height: 60px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkout-summary-card {
  background: var(--bg2);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 100px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  padding: 8px 0;
}
.summary-row.total {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--accent);
  border-top: 2px solid var(--border);
  margin-top: 8px;
  padding-top: 14px;
}
.summary-cod {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(39,174,96,0.08);
  border: 1px solid rgba(39,174,96,0.2);
  border-radius: var(--radius-md);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--prosperity-green);
  margin: 12px 0;
}
.summary-gift {
  margin-top: 14px;
}
.summary-gift textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-family: var(--font-sans);
  resize: none;
  min-height: 40px;
}
.checkout-cta {
  width: 100%;
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-xs);
}
.checkout-cta .btn-primary { width: 100%; }

.empty-cart-page {
  text-align: center;
  padding: 80px 20px;
}
.empty-cart-page .empty-icon { font-size: var(--icon-2xl); margin-bottom: 20px; display: block; }
.empty-cart-page h2 {
  font-family: var(--font-serif);
  color: var(--accent);
  margin-bottom: 8px;
}
.empty-cart-page p { color: var(--text-soft); margin-bottom: 20px; }

/* ============================================================
   WISHLIST PAGE
   ============================================================ */
.wishlist-page {
  padding: 80px 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.wishlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wishlist-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
  grid-column: 1 / -1;
}

/* ============================================================
   BANNER DEALS / BUNDLE
   ============================================================ */
.banner-deals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto 24px;
  padding: 0 20px;
}
.deal-card {
  background: var(--accent-fill);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  position: relative;
}
.deal-card::before {
  content: attr(data-discount);
  position: absolute;
  top: 12px; right: 12px;
  background: var(--gold);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: var(--radius-xl);
  font-size: var(--fs-3xs);
  font-weight: 800;
}
.deal-card-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--gold);
}
.deal-card-content { flex: 1; }
.deal-card-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 4px;
}
.deal-card-tagline {
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.deal-card-price {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--gold-mid);
}

/* ============================================================
   PWA INSTALL BANNER
   ============================================================ */
.pwa-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9997;
  background: var(--accent-fill);
  color: #FFF;
  padding: 14px 20px;
  display: none;
  align-items: center;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.pwa-banner.show { display: flex; transform: translateY(0); }
.pwa-banner-icon {
  font-size: var(--icon-md);
  flex-shrink: 0;
}
.pwa-banner-text { flex: 1; font-size: var(--fs-2xs); line-height: 1.4; }
.pwa-banner-text strong { display: block; font-size: var(--fs-xs); }
.pwa-banner-btn {
  padding: 8px 16px;
  background: var(--gold);
  color: var(--accent);
  border: none;
  font-size: var(--fs-3xs);
  font-weight: 800;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.pwa-banner-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: var(--fs-xl);
  cursor: pointer;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1B211A;
  --bg2: #252C23;
  --bg3: #30382D;

  --forest: #46543F;
  --forest-deep: #1B211A;
  --forest-ink: #151A14;
  --parchment: #E9E2D0;

  /* Accent splits in dark mode: no single value passes both
     directions, so text and fill get their own token. */
  --accent: #7A9070;        /* 4.73:1 on --bg                  */
  --accent-fill: #5A6B52;   /* white on it = 5.74:1            */

  /* gold-ink flips light here — this is what makes a single
     .section-eyebrow rule correct in both themes. */
  --gold-ink: #E6C86B;      /* 10.04:1 on --bg                 */
  --gold-mid: #E6C86B;      /*  4.94:1 on --forest             */
  --red-ink: #E08570;         /*  5.30:1 on --bg2 in dark - flips light for text on dark surfaces */

  --text: #E9E2D0;          /* 12.71:1 AAA */
  --text-soft: #B0AC9C;     /*  7.21:1 AA  */
  --text-muted: #948F7C;    /*  5.07:1  was #7C7868 @ 3.71 FAIL */

  --border: rgba(233,226,208,0.1);
}
[data-theme="dark"] body {
  background-image: none;
}
[data-theme="dark"] nav {
  background: rgba(26,26,30,0.97);
}
[data-theme="dark"] .postcard {
  background: #242428;
}
[data-theme="dark"] .side-drawer {
  background: #1A1A1E;
}
[data-theme="dark"] .drawer-header {
  background: #242428;
}
[data-theme="dark"] .checkout-section {
  background: #242428;
}
[data-theme="dark"] .region-popup {
  background: #1A1A1E;
}
[data-theme="dark"] .region-popup-body { color: #FFF; }
[data-theme="dark"] .search-overlay {
  background: rgba(0,0,0,0.95);
}
[data-theme="dark"] .trust-item {
  background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .category-card-desc { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .btn-load-more {
  border-color: var(--gold);
  color: var(--gold);
}
[data-theme="dark"] .btn-load-more:hover {
  background: var(--gold);
  color: var(--forest-ink);
}
[data-theme="dark"] .cat-tab.active,
[data-theme="dark"] .category-pill.active,
[data-theme="dark"] .filter-chip,
[data-theme="dark"] .view-btn.active {
  background: var(--prosperity-green);
  border-color: var(--prosperity-green);
  color: #FFF;
}

/* ============================================================
   RESPONSIVE — CATEGORY + REGION + PRODUCT
   ============================================================ */
@media (min-width: 640px) {
  .categories-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .trust-grid > .trust-item:last-child { grid-column: auto; }
  .checkout-layout {
    grid-template-columns: 1fr 360px;
  }
  .wishlist-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .region-card { flex: 0 0 160px; width: 160px; height: 200px; }
  .banner-deals {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .category-card { min-height: 260px; }
  .category-card-name { font-size: var(--fs-2xl); }
  .trust-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .region-card { flex: 0 0 180px; width: 180px; height: 230px; }
  .region-card-name { font-size: var(--fs-xs); }
  .wishlist-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Dark mode toggle button */
.dark-toggle {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  padding: 4px;
}
.dark-toggle:hover { transform: scale(1.1); }



/* ============================================================

   EXPLORE PAGE (archive-product)

   ============================================================ */

.explore-header {

  background: var(--accent-fill);

  padding: 130px 48px 60px;

  position: relative;

  overflow: hidden;

  border-bottom: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}

.explore-header::before {

  content: "EXPLORE";

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(-50%, -50%);

  font-size: var(--fs-display-mega);

  font-family: var(--font-serif);

  font-weight: 800;

  color: #FFF;

  opacity: 0.04;

  white-space: nowrap;

  pointer-events: none;

}

.explore-header-inner {

  max-width: 900px;

  position: relative;

  z-index: 2;

}

.explore-header .section-eyebrow { color: var(--gold); }

.explore-header h1 {

  font-size: var(--fs-display-4xl);

  color: #FFF;

  line-height: 1.1;

  margin-bottom: 16px;

}

.explore-header p {

  color: rgba(255,255,255,0.65);

  font-size: var(--fs-base);

  font-weight: 500;

  max-width: 520px;

}



.breadcrumb {

  padding: 16px 48px;

  background: var(--bg2);

  border-bottom: 1px solid var(--border);

  font-size: var(--fs-2xs);

  font-weight: 600;

  color: var(--text-muted);

  display: flex;

  align-items: center;

  gap: 8px;

}

.breadcrumb a { color: var(--accent); }

.breadcrumb a:hover { color: var(--power-red); }

.breadcrumb span { font-size: var(--fs-sm); }



.explore-body {

  display: grid;

  grid-template-columns: 280px 1fr;

  max-width: 1600px;

  margin: 0 auto;

  min-height: 70vh;

}

.explore-body > * { min-width: 0; }



.filter-sidebar {

  padding: 36px 28px;

  background: #FFF;

  border-right: 1px solid var(--border);

  position: sticky;

  top: 80px;

  height: calc(100vh - 80px);

  overflow-y: auto;

  scrollbar-width: thin;

}

.filter-sidebar-title {

  font-family: var(--font-serif);

  font-weight: 800;

  font-size: var(--fs-lg);

  color: var(--accent);

  margin-bottom: 28px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.filter-clear-all {

  font-size: var(--fs-3xs);

  font-weight: 700;

  color: var(--power-red);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  cursor: pointer;

  border: none;

  background: none;

  font-family: var(--font-sans);

  text-decoration: underline;

}

.filter-group { margin-bottom: 30px; }

.filter-group-title {

  font-size: var(--fs-3xs);

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: var(--text-muted);

  margin-bottom: 14px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--border);

}

.category-pills { display: flex; flex-direction: column; gap: 8px; }

.category-pill {

  display: flex; align-items: center; gap: 10px;

  padding: 10px 14px;

  border: 2px solid transparent;

  background: var(--bg2);

  cursor: pointer;

  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

  border-radius: var(--radius-md);

  font-size: var(--fs-xs);

  font-weight: 600;

  color: var(--text);

}

.category-pill:hover { border-color: var(--accent); background: var(--bg); }

.category-pill.active { border-color: var(--accent); background: var(--accent-fill); color: #FFF; }

.category-pill .pill-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex-shrink: 0; }

.category-pill .pill-count { margin-left: auto; font-size: var(--fs-3xs); opacity: 0.6; }

.region-list { display: flex; flex-direction: column; gap: 10px; }

.region-check {

  display: flex; align-items: center; gap: 10px;

  cursor: pointer; font-size: var(--fs-xs); font-weight: 500;

  color: var(--text); user-select: none;

}

.region-check input[type="checkbox"] { display: none; }

.check-box {

  width: 18px; height: 18px;

  border: 2px solid var(--border);

  border-radius: var(--radius-sm);

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0; transition: background-color 0.2s, border-color 0.2s;

  font-size: var(--fs-3xs); color: #FFF;

}

.region-check input:checked + .check-box { background: var(--accent-fill); border-color: var(--accent); }

.region-check input:checked + .check-box::after { content: "✓"; }

.price-range-wrap { display: flex; flex-direction: column; gap: 12px; }

.price-range-labels { display: flex; justify-content: space-between; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-soft); }

#priceRange {

  -webkit-appearance: none;

  width: 100%; height: 4px;

  background: var(--bg3);

  border-radius: var(--radius-sm);

}
#priceRange:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#priceRange::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 18px; height: 18px;

  background: var(--accent-fill);

  border-radius: var(--radius-pill);

  cursor: pointer;

  box-shadow: 0 2px 8px rgba(0,0,0,0.2);

}

.dietary-btns { display: flex; gap: 8px; }

.dietary-btn {

  flex: 1; padding: 8px 4px;

  border: 2px solid var(--border);

  background: #FFF;

  font-size: var(--fs-3xs); font-weight: 700;

  cursor: pointer; border-radius: var(--radius-sm);

  color: var(--text-soft);

  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

  font-family: var(--font-sans);

  text-transform: uppercase;

  letter-spacing: 0.06em;

}

.dietary-btn:hover { border-color: var(--accent); color: var(--accent); }

.dietary-btn.active { border-color: var(--prosperity-green); background: var(--prosperity-green); color: #FFF; }



.products-area {

  padding: 60px 32px;

  background: var(--bg);

}



.toolbar {

  max-width: 1280px; margin: 0 auto 28px;

  display: flex; align-items: center; justify-content: space-between;

  flex-wrap: wrap; gap: 16px;

}

.results-count { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }

.results-count strong { color: var(--accent); font-weight: 800; }

.active-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.filter-chip {

  display: flex; align-items: center; gap: 6px;

  padding: 5px 12px;

  background: var(--accent-fill); color: #FFF;

  font-size: var(--fs-3xs); font-weight: 700;

  border-radius: var(--radius-xl); cursor: pointer;

  text-transform: uppercase; letter-spacing: 0.06em;

  transition: background 0.2s;

}

.filter-chip:hover { background: var(--power-red); }

.filter-chip .chip-x { font-size: var(--fs-xs); line-height: 1; }

.sort-wrap { display: flex; align-items: center; gap: 10px; }

.sort-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

#sortSelect {

  padding: 8px 14px;

  border: 2px solid var(--border);

  background: #FFF;

  color: var(--text);

  font-family: var(--font-sans);

  font-size: var(--fs-xs); font-weight: 600;

  cursor: pointer; border-radius: var(--radius-sm);

}

#sortSelect:focus { border-color: var(--accent); }

.view-btns { display: flex; gap: 4px; }

.view-btn {

  width: 34px; height: 34px;

  border: 2px solid var(--border);

  background: #FFF; cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  font-size: var(--fs-sm); border-radius: var(--radius-sm);

  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

}

.view-btn.active { border-color: var(--accent); background: var(--accent-fill); color: #FFF; }

.filter-toggle-btn {

  display: none;

  align-items: center; gap: 8px;

  padding: 10px 20px;

  border: 2px solid var(--accent);

  background: #FFF; color: var(--accent);

  font-weight: 700; font-size: var(--fs-xs);

  cursor: pointer; font-family: var(--font-sans);

  border-radius: var(--radius-sm);

}



.category-tabs {

  max-width: 1280px; margin: 0 auto 28px;

  display: flex; gap: 8px;

  overflow-x: auto; scrollbar-width: none;

  padding-bottom: 4px;

}

.category-tabs::-webkit-scrollbar { display: none; }

.cat-tab {

  padding: 8px 18px;

  border: 2px solid var(--border);

  background: #FFF;

  font-size: var(--fs-2xs); font-weight: 700;

  cursor: pointer; white-space: nowrap;

  border-radius: var(--radius-xl);

  color: var(--text-soft);

  font-family: var(--font-sans);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

}

.cat-tab:hover { border-color: var(--accent); color: var(--accent); }

.cat-tab.active { background: var(--accent-fill); border-color: var(--accent); color: #FFF; }



#productsGrid {

  max-width: 1280px; margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}

#productsGrid.list-view {

  grid-template-columns: 1fr;

}

#productsGrid.list-view .postcard {

  flex-direction: row;

  max-height: 200px;

}

#productsGrid.list-view .pc-img-wrap {

  width: 180px;

  flex-shrink: 0;

  aspect-ratio: 1/1;

  margin-bottom: 0;

  border-radius: var(--radius-lg) 0 0 var(--radius-lg);

}



.empty-state {

  text-align: center;

  padding: 80px 20px;

  grid-column: 1/-1;

}

.empty-state .empty-icon { font-size: var(--icon-2xl); margin-bottom: 20px; }

.empty-state h3 { font-size: var(--fs-2xl); margin-bottom: 10px; }

.empty-state p { color: var(--text-soft); font-size: var(--fs-sm); }



[data-theme="dark"] .filter-sidebar { background: #242428; }

[data-theme="dark"] .filter-sidebar-title { color: var(--gold); }

[data-theme="dark"] .category-pill:hover { border-color: var(--gold); }

[data-theme="dark"] .category-pill.active { background: var(--prosperity-green); border-color: var(--prosperity-green); }

[data-theme="dark"] .region-check input:checked + .check-box { background: var(--prosperity-green); border-color: var(--prosperity-green); }

[data-theme="dark"] #priceRange::-webkit-slider-thumb { background: var(--gold); }

[data-theme="dark"] .dietary-btn.active { border-color: var(--prosperity-green); background: var(--prosperity-green); }

[data-theme="dark"] .cat-tab.active { background: var(--prosperity-green); border-color: var(--prosperity-green); }

[data-theme="dark"] .view-btn.active { background: var(--prosperity-green); border-color: var(--prosperity-green); }

[data-theme="dark"] .filter-chip { background: var(--prosperity-green); }

[data-theme="dark"] .filter-chip:hover { background: var(--gold); color: var(--forest-ink); }

[data-theme="dark"] .filter-toggle-btn { border-color: var(--gold); color: var(--gold); }

[data-theme="dark"] #sortSelect { background: #242428; color: #E4E2DD; border-color: rgba(255,255,255,0.08); }

[data-theme="dark"] #sortSelect:focus { border-color: var(--gold); }



@media (max-width: 900px) {

  .explore-body { grid-template-columns: 1fr; }

  .filter-sidebar {

    position: fixed;

    top: 0; left: -100%;

    width: 300px; height: 100vh;

    z-index: 1000;

    transition: left 0.3s ease;

    box-shadow: 4px 0 30px rgba(0,0,0,0.15);

    padding: 20px 16px;

  }

  .filter-sidebar.open { left: 0; }

  .filter-sidebar .filter-close-btn {

    display: flex; align-items: center; justify-content: center;

    width: 28px; height: 28px;

    font-size: var(--icon-xs); line-height: 1;

    background: var(--bg2); border: none; border-radius: var(--radius-pill);

    cursor: pointer; color: var(--text);

  }

  .filter-overlay {

    position: fixed; inset: 0;

    background: rgba(0,0,0,0.5);

    z-index: 999;

    display: none;

  }

  .filter-overlay.show { display: block; }

  .filter-toggle-btn { display: flex; }

  .products-area { padding: 20px 24px; }

  .explore-header { padding: 100px 16px 40px; }

  .explore-header h1 { font-size: var(--fs-display-xl); }

  .explore-header p { font-size: var(--fs-sm); max-width: 100%; }

  .breadcrumb { padding: 10px 16px; font-size: var(--fs-3xs); }

  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }

  .toolbar > div:last-child { justify-content: space-between; }

  .results-count { font-size: var(--fs-xs); }

  .cat-tab { padding: 6px 14px; font-size: var(--fs-3xs); }

  .category-tabs { margin-bottom: 20px; }

  #productsGrid { gap: 10px; }

  #productsGrid.list-view .pc-img-wrap { width: 100px; }

  #productsGrid.list-view .postcard { max-height: 140px; }

  .filter-group-title { font-size: var(--fs-3xs); }

  .category-pill { padding: 8px 12px; font-size: var(--fs-2xs); }

  .filter-sidebar-title { font-size: var(--fs-base); margin-bottom: 20px; }

  .filter-group { margin-bottom: 20px; }

  .empty-state { padding: 40px 16px; }

  .empty-state .empty-icon { font-size: var(--icon-lg); }

  .empty-state h3 { font-size: var(--fs-xl); }

  .sort-wrap .sort-label { display: none; }

  #sortSelect { font-size: var(--fs-2xs); padding: 6px 10px; }

  .view-btns { gap: 2px; }

  .view-btn { width: 30px; height: 30px; font-size: var(--fs-xs); }

  .filter-chip { font-size: var(--fs-3xs); padding: 4px 10px; }

  .active-filters { gap: 6px; }

}

@media (max-width: 480px) {

  .products-area { padding: 16px 24px; }

  #productsGrid { gap: 8px; }

  .filter-sidebar { width: 260px; }

  .category-tabs { margin-bottom: 14px; }

}

@media (min-width: 640px) {

  #productsGrid {

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

  }

}

@media (min-width: 1024px) {

  #productsGrid {

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 28px;

  }

}

/* ============================================================

   APPAREL GRID (separate from food products)

   ============================================================ */

.apparel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.apparel-card {
  background: #FFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.4s cubic-bezier(0.3,1,0.3,1), box-shadow 0.4s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.apparel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}
.apparel-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg2);
}
.apparel-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.apparel-card:hover .apparel-img { transform: scale(1.04); }
.apparel-color-dots {
  position: absolute;
  bottom: 10px; left: 10px;
  display: flex; gap: 4px;
}
.color-dot {
  width: 14px; height: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid #FFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.apparel-body {
  padding: 14px;
}
.apparel-name {
  font-family: var(--font-serif);
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.apparel-price {
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--power-red);
  font-family: var(--font-serif);
  margin-bottom: 8px;
}
.apparel-sizes {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.size-tag {
  padding: 3px 8px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-3xs); font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .apparel-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .apparel-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* WooCommerce pagination styling */
.load-more-wrap ul.page-numbers {
  list-style: none; display: flex; gap: 8px; justify-content: center;
}
.load-more-wrap ul.page-numbers li { display: inline; }
.load-more-wrap .page-numbers a,
.load-more-wrap .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px; border: 2px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-2xs); font-weight: 700;
  color: var(--accent); background: #FFF;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s; min-width: 36px;
}
.load-more-wrap .page-numbers a:hover {
  border-color: var(--accent); background: var(--accent-fill); color: #FFF;
}
.load-more-wrap .page-numbers span.current {
  border-color: var(--accent); background: var(--accent-fill); color: #FFF;
}
.load-more-wrap .page-numbers .dots { border: none; background: none; }



/* Cookie Consent Banner */

.cookie-consent {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 99998;

  background: var(--accent-fill);

  color: #FFF;

  padding: 16px 20px;

  display: flex;

  align-items: center;

  gap: 16px;

  font-size: var(--fs-xs);

  flex-wrap: wrap;

  justify-content: center;

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}

.cookie-consent p { margin: 0; font-size: var(--fs-2xs); color: rgba(255,255,255,0.85); flex: 1; min-width: 200px; }

body.has-cookie-consent { padding-bottom: 92px; }

.cookie-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

[data-theme="dark"] .cookie-consent { background: #242428; }



/* ============================================================

   BRAND REFRESH — forest / parchment / antique gold / patti band

   Loaded last: overrides legacy cream-maroon styling

   ============================================================ */



/* ── Nav: transparent over hero, forest glass on scroll, no bottom pattern ── */

nav {

  background: linear-gradient(180deg, rgba(35, 43, 32, 0.38) 0%, rgba(35, 43, 32, 0) 100%);

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  border-bottom: none;

  padding: 16px 20px;

}

nav.nav-scrolled {

  background: rgba(35, 43, 32, 0.86);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  padding: 10px 20px;

  box-shadow: 0 6px 28px rgba(15, 19, 13, 0.28);

}

.nav-logo {

  height: 72px;

  width: auto;

  display: block;

  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 22px rgba(0,0,0,0.45));

  transition: height 0.3s ease, filter 0.3s ease;

}

nav.nav-scrolled .nav-logo { height: 52px; }

@media (min-width: 768px) {

  .nav-logo { height: 88px; }

  nav.nav-scrolled .nav-logo { height: 64px; }

}

nav .logo-hindi, nav .logo-text { color: var(--parchment); }

nav .nav-links a {

  color: rgba(242, 235, 218, 0.85);

  position: relative;

  transition: color 0.25s ease;

}

nav .nav-links a::after {

  content: "";

  position: absolute;

  left: 0; right: 100%; bottom: -6px;

  height: 2px;

  background: var(--gold);

  transition: right 0.3s cubic-bezier(0.22, 1, 0.36, 1);

}

nav .nav-links a:hover::after, nav .nav-links a.active::after { right: 0; }

nav .nav-links a.active, nav .nav-links a:hover { color: var(--gold); }

.nav-icon {

  background: none;

  border: none;

  cursor: pointer;

  color: var(--parchment);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 6px;

  border-radius: var(--radius-md);

  transition: color 0.25s ease, background 0.25s ease, transform 0.2s ease;

}

.nav-icon:hover { color: var(--gold); background: rgba(242, 235, 218, 0.08); transform: translateY(-1px); }

.nav-icon svg {

  width: 22px;

  height: 22px;

  stroke: currentColor;

  fill: none;

  stroke-width: 1.7;

}

.nav-cart { position: relative; }

.cart-count {

  position: absolute;

  top: -2px;

  right: -4px;

  background: var(--gold) !important;

  color: var(--forest-ink) !important;

}

[data-theme="dark"] nav {

  background: linear-gradient(180deg, rgba(21, 26, 20, 0.55) 0%, rgba(21, 26, 20, 0) 100%);

}

[data-theme="dark"] nav.nav-scrolled { background: rgba(21, 26, 20, 0.9); }



/* ── Patti divider: the real band ── */

.patti-divider {

  height: 14px;

  background: var(--patti-bg);

}



/* ── Product cards (postcards): parchment + patti strip ── */

.postcard {

  background: var(--parchment);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 2px 12px rgba(35, 43, 32, 0.06);

}

.postcard::before {

  content: "";

  display: block;

  height: 14px;

  background: var(--patti-bg);

  flex-shrink: 0;

}

.pc-title { color: var(--text); }

.pc-price { color: var(--red-ink); font-family: var(--font-serif); font-weight: 800; }

.pc-hook { color: var(--red-ink); }

.btn-story { border-color: var(--gold-ink); color: var(--gold-ink); }

.btn-story:hover { background: var(--gold); color: var(--forest-ink); }

.scarcity-tag { background: var(--pattern-red); color: var(--parchment); }

[data-theme="dark"] .postcard { background: #252C23; border-color: rgba(233,226,208,0.08); }



/* ── Buttons: antique gold primary ── */

.btn-primary {

  background: var(--gold);

  border-color: var(--gold);

  color: var(--forest-ink);

}

.btn-primary:hover { background: transparent; color: var(--gold-ink); }



/* ── Trust strip ── */

.trust-strip {

  position: relative;

  z-index: 1;

  background: var(--parchment);

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

  padding: 18px 20px;

}

.trust-strip-inner {

  max-width: 1080px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 14px 10px;

}

.trust-badge {

  display: flex;

  align-items: center;

  gap: 10px;

  justify-content: center;

}

.trust-badge svg {

  width: 26px;

  height: 26px;

  stroke: var(--gold-mid);

  fill: none;

  stroke-width: 1.6;

  flex-shrink: 0;

}

.trust-badge span {

  font-size: var(--fs-3xs);

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--forest);

}

@media (min-width: 768px) {

  .trust-strip { padding: 22px 32px; }

  .trust-strip-inner { grid-template-columns: repeat(4, 1fr); }

  .trust-badge span { font-size: var(--fs-2xs); }

  .trust-badge svg { width: 30px; height: 30px; }

}



/* ── Footer: forest, patti top band, parchment text ── */

footer {

  position: relative;

  z-index: 1;

  background: var(--forest-deep);

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}

footer, footer p, footer .footer-links a { color: rgba(242, 235, 218, 0.82); }

footer .footer-title { color: var(--gold); }

footer .footer-links a:hover { color: var(--gold); }

footer .footer-logo { height: 52px; width: auto; display: block; margin-bottom: 14px; }

footer .social-link {

  background: rgba(242, 235, 218, 0.08);

  border-color: rgba(242, 235, 218, 0.2);

}

footer .social-link:hover { background: var(--gold); border-color: var(--gold); }

footer .footer-badge {

  background: rgba(242, 235, 218, 0.07);

  border: 1px solid rgba(242, 235, 218, 0.15);

  border-radius: var(--radius-xl);

  padding: 5px 12px;

  color: rgba(242, 235, 218, 0.85);

}

footer .footer-bottom { border-top-color: rgba(242, 235, 218, 0.12); }

footer .footer-bottom span { color: rgba(242, 235, 218, 0.6); }



/* ── Cookie banner: forest + gold ── */

.cookie-consent {

  background: var(--forest-deep);

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}

.cookie-consent .btn-primary {

  background: var(--gold);

  border-color: var(--gold);

  color: var(--forest-ink);

}

[data-theme="dark"] .cookie-consent { background: #151A14; }



/* ── Section headers: gold eyebrow ── */

.section-eyebrow { color: var(--gold-ink); }

.trust-section .section-eyebrow { color: var(--pattern-red); }



/* ============================================================

   MOVEMENT & CRAFT — micro-interactions site-wide

   ============================================================ */



/* Card hover: lift + deepen */

.postcard,

.category-card,

.region-card,

.trust-badge {

  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;

  will-change: transform;

}

.postcard:hover,

.region-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 18px 40px rgba(35, 43, 32, 0.16);

}

.category-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15, 19, 13, 0.3); }



/* Product image zoom on card hover */

.postcard .pc-img-wrap { overflow: hidden; }

.postcard .pc-img {

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}

.postcard:hover .pc-img { transform: scale(1.05); }



/* Category card bg zoom */

.category-card-bg { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.category-card:hover .category-card-bg { transform: scale(1.06); }



/* Button micro-interaction */

.btn-primary,

.btn-story {

  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;

}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201, 162, 39, 0.28); }

.btn-primary:active { transform: translateY(0); }

.btn-story:hover { transform: translateY(-1px); }



/* Trust badge hover */

.trust-badge:hover { transform: translateY(-2px); }

.trust-badge:hover svg { stroke: var(--pattern-red); }

.trust-badge svg { transition: stroke 0.25s ease, transform 0.25s ease; }

.trust-badge:hover svg { transform: scale(1.08); }



/* Section titles: gold underline sweep on scroll-reveal */

.section-header { position: relative; }

.section-header .section-title { position: relative; display: inline-block; }

.section-header .section-title::after {

  content: "";

  position: absolute;

  left: 0; right: 100%; bottom: -8px;

  height: 3px;

  background: var(--gold);

  opacity: 0.55;

  transition: right 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;

}

.section-header.in-view .section-title::after,

.section-header.fade-in.in-view .section-title::after { right: 0; }



/* Scroll reveal defaults (JS adds .in-view) */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {

  .reveal { opacity: 1; transform: none; transition: none; }

}



/* ── Patti band: thicker everywhere ── */

.patti-divider { height: 14px; }

footer {

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}

.postcard::before { height: 14px; }

.cookie-consent {

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}



/* Himachal Fact strip: real band instead of legacy gradient */

.him-fact {

  border-top: 14px solid transparent;

  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;

}




/* ============================================================
   THE JOURNEY NEVER STOPS — inner pages
   ============================================================ */

/* -- Nav: forest glass on all pages except the home hero -- */
body:not(.home) nav {
  background: rgba(35, 43, 32, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body:not(.home) nav.nav-scrolled {
  background: rgba(35, 43, 32, 0.94);
}

/* -- Footer social glyphs visible -- */
footer .social-link { color: var(--parchment); }
footer .social-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
footer .social-link:hover svg { stroke: var(--forest-ink); }

/* -- Legacy gradient sweep: real patti band everywhere -- */
.cart-header {
  border-top: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
}
.trust-section::before { background: var(--patti-bg); }
.related-section {
  border-top: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
}
.explore-header {
  border-bottom: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
}

/* -- Gold Trail progress line (every page) -- */
.trail-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100001;
  pointer-events: none;
  background: rgba(35, 43, 32, 0.12);
}
.trail-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pattern-red), var(--gold));
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

/* -- Page fade transition -- */
html.page-fade body {
  opacity: 0;
  animation: himwaasiPageFade 0.5s ease 0.04s forwards;
}
@keyframes himwaasiPageFade {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.page-fade body { opacity: 1; animation: none; }
}

/* -- Header echo: ambient journey video inside page header bands -- */
.header-echo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.header-echo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) brightness(0.9);
  transform: scale(1.06);
  opacity: 0.24;
}
.header-echo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 43, 32, 0.55) 0%, rgba(35, 43, 32, 0.35) 60%, rgba(35, 43, 32, 0.6) 100%);
}

/* -- Shop header band polish -- */
.explore-header {
  position: relative;
  overflow: hidden;
}
.explore-header .explore-header-inner { position: relative; z-index: 1; }
.explore-header .section-eyebrow {
  color: var(--gold);
  letter-spacing: 0.3em;
}
.explore-header h1 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* -- Product page: ambient echo at top -- */
.product-main { position: relative; }
.product-echo-anchor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;
  overflow: hidden;
  pointer-events: none;
}
.product-echo-anchor .header-echo { opacity: 0.16; }
.product-echo-anchor .header-echo-tint {
  background: linear-gradient(180deg, rgba(35, 43, 32, 0.4) 0%, rgba(35, 43, 32, 0.15) 55%, rgba(242, 235, 218, 0) 100%);
}
.product-main > * { position: relative; z-index: 1; }
.product-main > .product-echo-anchor { z-index: 0; }

/* -- Buy box: journey-card language -- */
.buy-box {
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(35, 43, 32, 0.07);
  position: relative;
}
.buy-box::before {
  content: "";
  display: block;
  height: 14px;
  background: var(--patti-bg);
}
.buy-box .product-price { font-family: var(--font-serif); font-weight: 800; color: var(--pattern-red); }

/* -- Bundle cards: thumbnails -- */
.deal-card-thumbs {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.deal-card-thumbs img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid rgba(242, 235, 218, 0.25);
  background: var(--bg2);
}

/* -- Empty cart: on-brand -- */
.cart-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.4;
}


/* ============================================================
   TASTE PASS — legibility floors, press states, motion craft
   (detector findings + animation engineering rules)
   ============================================================ */

/* -- Functional text: 11px legibility floor -- */
.hero-badge,
.journey-badge { font-size: var(--fs-3xs); }
.journey-chapter-num,
.journey-card-eyebrow,
.journey-cue span { font-size: var(--fs-3xs); }
.section-eyebrow,
.explore-header .section-eyebrow { font-size: var(--fs-3xs); }
.scarcity-tag,
.pc-hook,
.btn-story { font-size: var(--fs-3xs); }
.cookie-consent .btn-primary { font-size: var(--fs-2xs); }
.cookie-consent p { font-size: var(--fs-xs); }
.trust-badge span { font-size: var(--fs-3xs); }
.journey-card-meta .journey-card-cta { font-size: var(--fs-2xs); }

/* -- Press feedback: buttons listen to the user -- */
.btn-primary,
.btn-story,
.btn-add-cart,
.btn-quick-add,
.btn-load-more,
.nav-icon,
.qty-selector button { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.btn-primary:active,
.btn-story:active,
.btn-add-cart:active,
.btn-load-more:active,
.nav-icon:active,
.qty-selector button:active { transform: scale(0.96); }

/* -- Hover transforms: pointer-capable devices only -- */
@media (hover: hover) and (pointer: fine) {
  .postcard:hover,
  .region-card:hover { transform: translateY(-5px); }
  .category-card:hover { transform: translateY(-4px); }
  .postcard:hover .pc-img { transform: scale(1.05); }
  .category-card:hover .category-card-bg { transform: scale(1.06); }
  .trust-badge:hover { transform: translateY(-2px); }
  .btn-primary:hover { transform: translateY(-2px); }
}

/* -- Breathing room: cramped sections -- */
.related-section { padding: 48px 20px; }
@media (min-width: 768px) { .related-section { padding: 60px 32px; } }
.origin-section { padding: 40px 20px; }
@media (min-width: 768px) { .origin-section { padding: 56px 32px; } }

/* -- Motion personality: brand easing token -- */
:root { --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); }

/* -- Reduced motion: gentler, not zero -- */
@media (prefers-reduced-motion: reduce) {
  .postcard, .region-card, .category-card, .btn-primary { transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; }
}



/* Step 5 - inline SVG icon set */
.hw-ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-0.22em;flex:none;}
.trust-icon .hw-ic,.footer-badge .hw-ic{width:1.7em;height:1.7em;vertical-align:-0.35em;}
.empty-icon .hw-ic,.origin-stat-icon .hw-ic{width:2.4em;height:2.4em;}
.badge-icon .hw-ic{width:1.1em;height:1.1em;}
.diet-dot{display:inline-block;width:.7em;height:.7em;border-radius:var(--radius-pill);margin-right:.4em;vertical-align:middle;flex:none;}
.diet-veg{background:var(--prosperity-green);}
.diet-nonveg{background:var(--power-red);}

/* ==========================================================================
   STEP 6 — LOCKED SCALES
   Type:   10 steps (11 12 13 14 16 18 20 24 30 36)
   Radius: 4 steps (4 8 12 20) + pill
   Icon glyph sizes and fluid display clamps are separate scales by design.
   ========================================================================== */
:root {
  /* ---- type scale ---- */
  --fs-3xs: 11px;
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 36px;

  /* ---- fluid display (intentional, 1:1) ---- */
  --fs-display-xs: clamp(14px, 2.4vw, 16px);
  --fs-display-sm: clamp(15px, 2.5vw, 18px);
  --fs-display-md: clamp(26px, 6vw, 54px);
  --fs-display-lg: clamp(28px, 4vw, 42px);
  --fs-display-xl: clamp(28px, 7vw, 38px);
  --fs-display-2xl: clamp(34px, 9vw, 64px);
  --fs-display-3xl: clamp(36px, 10vw, 80px);
  --fs-display-4xl: clamp(38px, 5vw, 62px);
  --fs-display-mega: clamp(80px, 14vw, 220px);

  /* ---- icon scale (glyph sizing, not typography) ---- */
  --icon-xs: 20px;
  --icon-sm: 24px;
  --icon-md: 28px;
  --icon-lg: 40px;
  --icon-xl: 48px;
  --icon-2xl: 64px;

  /* ---- radius scale ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
}

/* ==========================================================================
   HOMEPAGE SCOPE — parked sections
   Shop by Region (.region-slider-wrap), Shop by Category
   (.categories-section) and the per-category stop sections stay hidden
   for now; the homepage shows the 5 featured products only. Scoped to
   body.home so shop / product / bundle templates are unaffected.
   Uses locked tokens only (--fs-3xs, --text-soft).
   ========================================================================== */
body.home .region-slider-wrap,
body.home .categories-section,
body.home #stop-sections,
body.home #load-more-wrap {
  display: none !important;
}

body.home .featured-count {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ============================================================
   Product cards: container-adaptive finish (3:4 image kept)
   Inspired by "Modern Container Query Product Cards" by tak-dcxi
   (MIT licence, https://codepen.io/tak-dcxi/pen/PwzzXJe).
   Hand-ported to Himwaasi tokens + markup — no kiso.css, no @scope.
   Every rule degrades gracefully where unsupported.
   ============================================================ */
.postcard { container-type: inline-size; }
/* Fluid type follows the card, not the viewport */
.pc-title { font-size: clamp(13px, 8px + 4.5cqw, 20px); }
.pc-price { font-size: clamp(14px, 8px + 5cqw, 22px); }
/* Inset depth: highlight on the card, well shadow on the photo */
.postcard { box-shadow: 0 4px 15px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.65); }
.pc-img-wrap { box-shadow: inset 0 2px 14px rgba(35,43,32,0.18); }
/* Category-accent finish (OKLCH tints, guarded) */
@supports (background: color-mix(in oklch, red 10%, white)) {
  .postcard { background: linear-gradient(180deg, color-mix(in oklch, var(--hover-border-color, var(--power-red)) 12%, white), #FFF 55%); }
  [data-theme="dark"] .postcard { background: linear-gradient(180deg, color-mix(in oklch, var(--hover-border-color, var(--power-red)) 22%, #252C23), #252C23 60%); }
  .pc-price { color: color-mix(in oklch, var(--hover-border-color, var(--power-red)) 55%, var(--accent)); }
  .pc-img-wrap { box-shadow: inset 0 3px 18px rgba(35,43,32,0.22); border: 1px solid color-mix(in oklch, var(--hover-border-color, var(--power-red)) 22%, transparent); }
}
/* Narrow cards (2-col mobile, rails): compact, no prose */
@container (max-width: 230px) {
  .postcard { padding: 0; }
  .pc-story, .pc-meta, .btn-story, .review-count { display: none; }
  .pc-reviews { padding: 0 10px; margin: 8px 0 2px; }
  .pc-title { margin: 2px 10px 4px; }
  .pc-footer { padding: 0 10px 10px; }
}

/* Uniform grid cards: reserve title (2 lines) + rating rows, pin footer */
.postcard { height: 100%; }
.pc-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}
.pc-reviews { min-height: 18px; }
.pc-footer { margin-top: auto; }
.pc-hook { min-height: 18px; }
.pc-price, .btn-story { white-space: nowrap; }

/* Desktop prose: story locked to 3 lines so rows stay even */
@media (min-width: 1024px) {
  .pc-story {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.6em * 3);
  }
}

/* ============================================================
   CUSTOMER REVIEWS (landing bottom, trust)
   Real WooCommerce reviews only — honest empty state below.
   ============================================================ */
.reviews-section {
  padding: 60px 20px 72px;
  background: var(--bg);
}
.reviews-aggregate {
  margin-top: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold-ink);
  letter-spacing: 0.02em;
}
.reviews-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 320px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 20px 18px;
  margin: 0 -20px;
  max-width: 1280px;
}
.review-card {
  scroll-snap-align: start;
  background: #FFF;
  border: 1px solid var(--border);
  border-top: 14px solid transparent;
  border-image: var(--patti-band) 0 0 80 0 / 0 0 14px 0 repeat;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.review-stars { color: var(--gold-ink); font-size: var(--fs-sm); letter-spacing: 3px; }
.review-text {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text);
  flex-grow: 1;
}
.review-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--parchment);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-name { font-weight: 800; font-size: var(--fs-xs); color: var(--text); }
.review-product { font-size: var(--fs-3xs); color: var(--text-muted); }
.review-empty { align-items: flex-start; }
@media (min-width: 1024px) {
  .reviews-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding: 6px 0 0;
    margin: 0 auto;
  }
}
[data-theme="dark"] .review-card { background: #252C23; }