/* ==========================================================================
   JN — CORE DESIGN SYSTEM
   Shared by the main website and the Meta landing pages.
   Mobile-first. Every breakpoint scales up, never down.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Paper & ink — warm cream / peach, per the JN Camphor art direction */
  --paper:        #FDF5E8;
  --paper-2:      #FBEDD8;
  --paper-3:      #F5E1C4;
  --card:         #FFFCF6;
  --ink:          #2E1608;
  --ink-2:        #6B4A32;
  --muted:        #8A6A50;
  --line:         #EBD9BE;

  /* Brand accents */
  --orange:       #E8721F;
  --orange-2:     #F0871F;
  --orange-deep:  #C25612;
  --gold:         #C98A2E;
  --gold-soft:    #F5C879;
  --amber:        #F5B428;
  --green:        #1F5F3F;
  --brown:        #3A1B08;
  --brown-2:      #2A1206;
  --clay:         #9C5B3C;
  --sage:         #6E7C5F;

  /* Category accents */
  --acc-camphor:  #E8721F;
  --acc-incense:  #8A5A2B;
  --acc-pooja:    #B23A1C;
  --acc-powders:  #4E7A46;

  /* Type */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Space */
  --gut:          20px;
  --max:          1200px;
  --radius:       16px;
  --radius-lg:    24px;

  /* Depth */
  --shadow-sm:    0 1px 2px rgba(58,27,8,.05), 0 2px 10px rgba(58,27,8,.05);
  --shadow-md:    0 2px 8px rgba(58,27,8,.07), 0 12px 34px rgba(58,27,8,.08);
  --shadow-lg:    0 4px 14px rgba(58,27,8,.08), 0 28px 64px rgba(58,27,8,.12);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
}
h1, h2 { text-transform: uppercase; }
h1 { font-size: clamp(2rem, 6.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.45rem); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 760px; }
.section { padding: 56px 0; }
.section-tight { padding: 36px 0; }
@media (min-width: 900px) { .section { padding: 88px 0; } }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange);
  margin: 0 0 14px;
}
/* The ••• mark the reference uses to open every section */
.eyebrow::before {
  content: '';
  flex: none; width: 26px; height: 5px;
  background-image: radial-gradient(circle, currentColor 45%, transparent 46%);
  background-size: 10px 5px; background-repeat: repeat-x;
  opacity: .9;
}
.lede { font-size: 1.05rem; color: var(--muted); max-width: 60ch; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }

/* ==========================================================================
   BUY ON AMAZON BUTTON
   Two-row orange pill with a hard 3D bottom edge, matching the JN ad creative.
   Price comes from the product data, so one button style works everywhere.

   The word "Amazon" and the Prime badge render as styled TEXT here, not as
   Amazon's actual logo marks. Point config.amazon.logoImage and
   .primeBadgeImage at Amazon's official brand assets to swap them in.
   ========================================================================== */
.amz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 14px 24px 15px;
  border-radius: 999px;
  text-align: center;
  color: #111111;
  /* Sampled directly from the supplied button artwork */
  background: linear-gradient(180deg, #F1A644 0%, #E88B34 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 7px 0 #B86023,
    0 12px 24px rgba(150,86,25,.28);
  font-family: var(--font-body);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.1;
}
.amz:hover { filter: brightness(1.05); }
.amz:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 2px 0 #B86023,
    0 4px 10px rgba(150,86,25,.26);
}
.amz:focus-visible { outline: 3px solid #7A5A1E; outline-offset: 3px; }

.amz-top {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; flex-wrap: nowrap;
}
.amz-pre {
  font-weight: 800;
  font-size: clamp(.78rem, 2.9vw, .95rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.amz-word {
  font-weight: 800;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  letter-spacing: -.02em;
  line-height: 1;
}
.amz-logo-img { height: clamp(17px, 4.4vw, 23px); width: auto; }

.amz-prime {
  background: #1A98FF;
  color: #fff;
  font-size: clamp(.6rem, 2.2vw, .72rem);
  font-weight: 700;
  letter-spacing: .01em;
  padding: 3px 8px 4px;
  border-radius: 7px;
  line-height: 1;
}
.amz-prime-img { height: clamp(16px, 4vw, 21px); width: auto; }

.amz-bot {
  display: flex; align-items: center; justify-content: center;
  gap: 11px;
  font-size: clamp(.84rem, 3.2vw, 1rem);
}
.amz-price { font-weight: 800; font-size: clamp(.95rem, 3.7vw, 1.15rem); }
.amz-sep { width: 1px; height: 15px; background: rgba(23,18,10,.32); flex: none; }
.amz-deliv { font-weight: 600; }

/* Compact variant for dense product grids */
.amz-sm { padding: 11px 18px; gap: 0; }
.amz-sm .amz-pre  { font-size: .68rem; letter-spacing: .1em; }
.amz-sm .amz-word { font-size: 1rem; }
.amz-sm .amz-prime { font-size: .55rem; padding: 2px 6px 3px; border-radius: 5px; }

/* No Amazon URL configured yet */
.amz-off {
  background: var(--paper-3);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: not-allowed;
  padding: 15px 24px;
}
.amz-off .amz-soon { font-weight: 600; font-size: .92rem; letter-spacing: .01em; }

@media (min-width: 640px) { .amz.amz-auto { width: auto; min-width: 340px; align-self: flex-start; } }
.final-cta .amz.amz-auto, .center .amz.amz-auto { align-self: center; }

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #34302A; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-sm { padding: 11px 18px; font-size: .87rem; }
.btn-block { width: 100%; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,248,242,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img { height: 34px; width: auto; border-radius: 6px; }
.brand-name {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--ink); letter-spacing: -.01em; line-height: 1;
}
.brand-name small {
  display: block; font-family: var(--font-body);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.nav-desktop { display: none; }
@media (min-width: 900px) {
  .nav-desktop { display: flex; align-items: center; gap: 28px; }
  .nav-desktop a {
    font-size: .92rem; font-weight: 500; color: var(--ink-2);
    padding: 6px 0; border-bottom: 1.5px solid transparent;
  }
  .nav-desktop a:hover, .nav-desktop a.active { color: var(--ink); border-bottom-color: var(--gold); }
}
.nav-toggle {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
}
/* Declared after the base rule so it wins on equal specificity */
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

.nav-mobile {
  display: none; border-top: 1px solid var(--line);
  background: var(--paper); padding: 8px 0 18px;
}
.nav-mobile.open { display: block; }
@media (min-width: 900px) { .nav-mobile.open { display: none; } }
.nav-mobile a {
  display: block; padding: 13px 0; font-size: 1rem;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile .sub { padding-left: 16px; font-size: .93rem; color: var(--ink-2); }

/* --- Hero (home) ---------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 520px at 78% -8%, #FFF6E4 0%, transparent 62%),
    radial-gradient(760px 420px at 6% 100%, #EDF0E9 0%, transparent 60%),
    var(--paper);
  padding: 52px 0 56px;
}
@media (min-width: 900px) { .home-hero { padding: 92px 0 96px; } }
.home-hero .grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .home-hero .grid { grid-template-columns: 1.05fr .95fr; gap: 60px; } }
.home-hero h1 { margin-bottom: 18px; }
.home-hero .lede { font-size: 1.08rem; margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

.trust-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-strip div {
  background: var(--paper); padding: 18px 16px; text-align: center;
  font-size: .8rem; color: var(--muted); line-height: 1.4;
}
.trust-strip strong { display: block; color: var(--ink); font-size: .92rem; font-weight: 600; margin-bottom: 3px; }

/* --- Category tiles ------------------------------------------------------- */
.cat-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-tile {
  position: relative; display: block; padding: 26px 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease;
  overflow: hidden;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-tile::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--acc, var(--gold));
}
.cat-tile[data-accent="camphor"] { --acc: var(--acc-camphor); }
.cat-tile[data-accent="incense"] { --acc: var(--acc-incense); }
.cat-tile[data-accent="pooja"]   { --acc: var(--acc-pooja); }
.cat-tile[data-accent="powders"] { --acc: var(--acc-powders); }
.cat-tile h3 { margin-bottom: 6px; }
.cat-tile p { font-size: .88rem; color: var(--muted); margin: 0; }
.cat-tile .go { margin-top: 14px; font-size: .82rem; font-weight: 600; color: var(--acc, var(--gold)); }

/* --- Product cards -------------------------------------------------------- */
.product-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1060px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.pcard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pcard-media {
  position: relative; aspect-ratio: 1 / 1; background: var(--paper-2); overflow: hidden;
}
.pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.pcard-media .ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-soft);
  background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
}
.badge-off {
  position: absolute; top: 10px; left: 10px;
  background: var(--ink); color: var(--paper);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  padding: 5px 9px; border-radius: 100px;
}
.pcard-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.pcard-cat { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.pcard-name {
  font-family: var(--font-display); font-size: .98rem; line-height: 1.28; color: var(--ink);
  margin: 0;
}
.pcard-desc { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 0; flex: 1; }
.pcard-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.mrp { font-size: .82rem; color: var(--muted); text-decoration: line-through; }
.packsize { font-size: .72rem; color: var(--muted); }
.pcard .btn { margin-top: 4px; }
.pcard-links { display: flex; gap: 8px; }
.pcard-links .btn { flex: 1; }

/* --- Product page --------------------------------------------------------- */
.breadcrumb { font-size: .8rem; color: var(--muted); padding: 18px 0 0; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.pdp { display: grid; gap: 28px; padding: 22px 0 12px; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1fr 1fr; gap: 56px; padding: 34px 0 20px; } }
.pdp-media {
  position: sticky; top: 84px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
}
@media (max-width: 899px) { .pdp-media { position: static; } }
.pdp-media img { width: 100%; height: 100%; object-fit: cover; }
.pdp h1 { font-size: clamp(1.55rem, 4.4vw, 2.3rem); margin-bottom: 10px; }
.pdp-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.pdp-price .price { font-size: 1.7rem; }
.pdp-buy { margin: 22px 0 8px; }
.pdp-note { font-size: .78rem; color: var(--muted); }

.spec-list { list-style: none; padding: 0; margin: 20px 0 0; }
.spec-list li {
  position: relative; padding: 9px 0 9px 26px;
  font-size: .92rem; border-bottom: 1px solid var(--line);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li::before {
  content: ''; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  font-size: .76rem; padding: 6px 12px; border-radius: 100px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2);
}

/* --- Filter chips --------------------------------------------------------- */
.chiprow {
  display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--card);
  font-size: .86rem; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  margin-top: 40px; background: var(--ink); color: #C9C1B4;
  padding: 48px 0 28px; font-size: .9rem;
}
.site-footer h4 {
  font-family: var(--font-body); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; font-weight: 700;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-name small { color: #9A9184; }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid #3A342C;
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: .78rem; color: #8B8377;
}

/* --- Utility -------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Only hidden when JS confirmed it can reveal them again (html.js-anim).
   Without JS, or without IntersectionObserver, content stays visible. */
.js-anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   REEL VIDEO CARD — 9:16, Instagram-native feel
   Poster + title overlay + play control. The player is only injected on tap.
   ========================================================================== */
.reel-card { margin: 0; width: 100%; max-width: 300px; position: relative; }

.reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #17150F;
  box-shadow: 0 12px 32px rgba(90,48,12,.20), 0 2px 6px rgba(90,48,12,.10);
  cursor: pointer;
  isolation: isolate;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.reel-frame:hover  { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(90,48,12,.26); }
.reel-frame:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.reel-card.playing .reel-frame { cursor: default; transform: none; }

.reel-poster { width: 100%; height: 100%; object-fit: cover; }
.reel-poster-fallback {
  display: grid; place-items: center; text-align: center; padding: 24px;
  background: linear-gradient(155deg, #3A2415 0%, #1A1712 55%, #2A1B10 100%);
  color: var(--gold-soft); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3;
}

/* Scrim: dark enough at the edges for white text, clear through the middle */
.reel-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 24%,
                            transparent 52%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.78) 100%);
  transition: opacity .3s ease;
}
.reel-card.playing .reel-scrim { opacity: 0; }

/* Play control — a soft glassy disc with a warm halo */
.reel-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%; z-index: 3;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(28,20,12,.42);
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 0 rgba(245,180,40,.42);
  transition: transform .2s ease, background .2s ease, box-shadow .3s ease;
  pointer-events: none;
}
.reel-play svg { width: 25px; height: 25px; margin-left: 3px; }
.reel-frame:hover .reel-play {
  transform: translate(-50%,-50%) scale(1.08);
  background: rgba(28,20,12,.6);
  box-shadow: 0 0 0 12px rgba(245,180,40,.12);
}
.reel-card.playing .reel-play { display: none; }

/* Corner chrome */
.reel-source, .reel-badge {
  position: absolute; top: 12px; z-index: 3;
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(20,18,14,.5);
  backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.2);
}
.reel-source { right: 12px; }
.reel-badge  { left: 12px; letter-spacing: .06em; }
.reel-card.playing .reel-source,
.reel-card.playing .reel-badge { display: none; }

.reel-chip {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  background: var(--amber); color: #2E1608;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 100px;
  box-shadow: 0 3px 10px rgba(90,48,12,.3);
}
.reel-card.playing .reel-chip { display: none; }

/* Title overlay — what the reel is about, without opening it */
.reel-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 16px 14px 14px;
  color: #fff; text-align: left;
  transition: opacity .3s ease;
}
.reel-meta strong {
  display: block; font-size: .92rem; font-weight: 700; line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.reel-hint {
  display: inline-block; margin-top: 4px;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75;
}
.reel-card.playing .reel-meta { opacity: 0; pointer-events: none; }
.reel-chip ~ .reel-meta { padding-bottom: 46px; }

/* Progress + sound, only while playing.
   The progress bar is a scrubber: the visible track is thin, but the tap /
   drag zone is a comfortable 22px strip along the bottom edge. */
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 6;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  cursor: pointer; touch-action: none;
}
.reel-progress::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,.24); transition: height .15s ease;
}
.reel-progress i {
  position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
  display: block; background: var(--amber); transition: width .2s linear, height .15s ease;
}
.reel-progress i::after {               /* drag handle */
  content: ''; position: absolute; right: -7px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transform: scale(0); transition: transform .15s ease;
}
.reel-card.playing .reel-progress { opacity: 1; pointer-events: auto; }
.reel-progress:hover::before, .reel-progress.seeking::before,
.reel-progress:hover i, .reel-progress.seeking i { height: 6px; }
.reel-card.paused .reel-progress i::after,
.reel-progress:hover i::after, .reel-progress.seeking i::after { transform: scale(1); }
.reel-progress.seeking i { transition: none; }
.reel-progress:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* Play / pause button, bottom-left (mirrors the sound button) */
.reel-toggle {
  position: absolute; left: 10px; bottom: 26px; z-index: 7;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: rgba(20,18,14,.55);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
}
.reel-toggle svg { width: 15px; height: 15px; }
.reel-toggle[hidden] { display: none !important; }

/* Big centre disc comes back while paused (tap anywhere to resume) */
.reel-card.playing.paused .reel-play { display: grid; z-index: 6; }

.reel-poster-video { display: block; object-fit: cover; pointer-events: none; background: #17150F; }

.reel-sound {
  position: absolute; right: 10px; bottom: 26px; z-index: 7;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: rgba(20,18,14,.55);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px);
}
.reel-sound svg { width: 17px; height: 17px; }
.reel-sound.is-muted { background: rgba(232,114,31,.85); border-color: rgba(255,255,255,.4); }

.reel-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.reel-caption { margin: 11px 2px 0; font-size: .84rem; line-height: 1.45; color: var(--muted); }

/* Empty slot */
.reel-empty .reel-frame { cursor: default; background: #221A11; }
.reel-empty .reel-poster { opacity: .26; filter: grayscale(.4); }
.reel-empty-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 22px; text-align: center;
  border: 1.5px dashed rgba(245,200,121,.42); border-radius: 22px; color: var(--gold-soft);
}
.reel-empty-inner svg { width: 30px; height: 30px; opacity: .8; }
.reel-empty-inner strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.reel-empty-inner span { font-size: .72rem; line-height: 1.4; opacity: .62; max-width: 20ch; }

.reel-error .reel-frame::before {
  content: 'Video could not load';
  position: absolute; inset: 0; z-index: 7; display: grid; place-items: center;
  color: var(--gold-soft); font-size: .82rem; background: rgba(23,21,16,.86);
}

/* ==========================================================================
   CAROUSELS — one swipe pattern for reels and products
   ========================================================================== */
.carousel-wrap { position: relative; }
.carousel {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 8px;
  /* bleed to the screen edge on mobile — feels native */
  margin: 0 calc(var(--gut) * -1);
  padding-left: var(--gut); padding-right: var(--gut);
  scroll-padding-left: var(--gut);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 auto; scroll-snap-align: start; }

.reel-carousel .reel-card { width: 68vw; max-width: 262px; }
@media (min-width: 760px) {
  .reel-carousel { margin: 0; padding-left: 0; padding-right: 0; }
  .reel-carousel .reel-card { width: 232px; }
}

.product-carousel > * { width: 74vw; max-width: 290px; }
@media (min-width: 620px) { .product-carousel > * { width: 300px; } }

/* Past --grid-from, a carousel becomes an ordinary grid */
@media (min-width: 1040px) {
  .product-carousel-wrap .carousel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    overflow: visible; margin: 0; padding-left: 0; padding-right: 0;
  }
  .product-carousel > * { width: auto; max-width: none; }
  .product-carousel-wrap .carousel-dots { display: none; }
}

.carousel-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  border: 0; background: var(--line); transition: all .22s ease;
}
.carousel-dot.active { background: var(--orange); width: 22px; border-radius: 100px; }

/* Swipe affordance */
.carousel-wrap::after {
  content: ''; position: absolute; top: 4px; bottom: 40px; right: calc(var(--gut) * -1);
  width: 34px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--paper));
}
@media (min-width: 1040px) { .product-carousel-wrap::after { display: none; } }

/* ==========================================================================
   COMBO MEDIA — a bundle shows the packs it contains, not one of them
   ========================================================================== */
.combo-media {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; padding: 3px;
  background: var(--paper-2);
}
.combo-item { position: relative; overflow: hidden; border-radius: 8px; background: #fff; }
.combo-item img { width: 100%; height: 100%; object-fit: cover; }
.combo-item b {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  text-align: center; padding: 3px 2px 4px;
  color: #fff; background: linear-gradient(180deg, transparent, rgba(46,22,8,.86) 55%);
}
@media (min-width: 760px) { .combo-item b { font-size: .6rem; } }

/* --- Reel card corrections -------------------------------------------------- */
/* [hidden] must beat display:grid */
.reel-sound[hidden] { display: none !important; }

/* Chip and title share the bottom edge without colliding */
.reel-chip { left: auto; right: 12px; bottom: 12px; }
.reel-meta { padding-right: 92px; }
.reel-chip ~ .reel-meta { padding-bottom: 14px; }

/* Compact button inside a 2-up card grid: the price row must fit ~135px */
.amz-sm .amz-bot { gap: 6px; font-size: .78rem; margin-top: 2px; }
.amz-sm .amz-price { font-size: .84rem; }
.amz-mrp {
  opacity: .62; font-weight: 600;
  font-size: .82em; text-decoration-thickness: 1.5px;
}
.pcard-body .amz-bot, .pick-body .amz-bot { gap: 5px; font-size: .7rem; }
.pcard-body .amz-price, .pick-body .amz-price { font-size: .78rem; }
.pcard-body .amz-mrp, .pick-body .amz-mrp { font-size: .66rem; }
.pcard-body .amz, .pick-body .amz { padding: 9px 8px 10px; }
@media (min-width: 620px) {
  .pcard-body .amz-bot, .pick-body .amz-bot { font-size: .76rem; }
  .pcard-body .amz-price, .pick-body .amz-price { font-size: .86rem; }
}

/* Narrowest case: a ~135px card button. Shrink the lockup rather than let it
   overflow; the button is still unmistakably the Amazon CTA. */
@media (max-width: 619px) {
  .pcard-body .amz, .pick-body .amz { padding: 9px 6px 10px; }
  .pcard-body .amz-top, .pick-body .amz-top { gap: 4px; }
  .pcard-body .amz-pre, .pick-body .amz-pre { font-size: .52rem; letter-spacing: .06em; }
  .pcard-body .amz-logo-img, .pick-body .amz-logo-img { height: 13px; }
  .pcard-body .amz-prime-img, .pick-body .amz-prime-img { height: 10px; }
  .pcard-body .amz-word, .pick-body .amz-word { font-size: .8rem; }
}