/* ============================================================
   HOME HERO — v4: full-bleed dark banner, inline search,
   scrolling image marquee. Distinct from the light glass-card
   heroes used in earlier drafts.
   ============================================================ */
.dark-hero{
  position:relative;
  z-index:20;
  overflow:visible;
  background:var(--ink);
  background-image:
    radial-gradient(at 20% 15%, rgba(63,169,166,0.35) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(156,201,62,0.28) 0px, transparent 45%),
    radial-gradient(at 60% 90%, rgba(28,140,122,0.4) 0px, transparent 50%);
  border-radius:0 0 var(--radius-l) var(--radius-l);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,6vw,5rem);
  margin-top:calc(-1 * clamp(1rem,3vw,1.6rem) - 74px - clamp(0.8rem,2vw,1.4rem));
  padding-top:calc(clamp(3rem,7vw,5.5rem) + 74px + clamp(0.8rem,2vw,1.4rem) + clamp(1rem,3vw,1.6rem));
}
.dark-hero .container{ position:relative; z-index:25; }
.dark-hero-content{ max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:30; }
.dark-hero .eyebrow{ background:rgba(255,255,255,0.12); color:#fff; margin-left:auto; margin-right:auto; }
.dark-hero .eyebrow::before{ background:var(--gradient-hero); }
.dark-hero h1{ color:#fff; }
.dark-hero h1 .grad{
  background:linear-gradient(100deg,#7FE3DC,#B9EA6C); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dark-hero .lede{ color:#B9D6CE; max-width:560px; margin-left:auto; margin-right:auto; }

/* ---- inline hero search ---- */
.hero-search-wrap{
  position:relative;
  max-width:560px;
  margin:2.1rem auto 0;
  z-index:999;
}
.hero-search-form{
  display:flex; align-items:center; gap:0.5rem;
  background:#fff; border-radius:var(--radius-pill); padding:0.5rem 0.5rem 0.5rem 1.3rem;
  width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.28);
  border:2px solid transparent;
  transition:border-color var(--speed-s) var(--ease), box-shadow var(--speed-s) var(--ease);
}
.hero-search-form:focus-within{
  border-color:var(--violet-400, #3FA9A6);
  box-shadow:0 20px 50px rgba(0,0,0,0.35), 0 0 0 4px rgba(63,169,166,0.18);
}
.hero-search-form svg{ width:19px; height:19px; color:var(--ink-soft); flex-shrink:0; }
.hero-search-form input{
  flex-grow:1; border:none; font-size:0.95rem; color:var(--ink); background:none; min-width:0;
  font-family:inherit;
}
.hero-search-form input:focus{ outline:none; }
.hero-search-form button{ flex-shrink:0; }

/* ---- hero search live suggestions dropdown ---- */
.hero-search-suggestions{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  background:var(--surface, #ffffff);
  border-radius:var(--radius-l, 20px);
  border:1px solid var(--line, #e2e8f0);
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  max-height:360px;
  overflow-y:auto;
  z-index:9999;
  text-align:left;
  animation:heroSuggestFadeIn 220ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes heroSuggestFadeIn{
  from{ opacity:0; transform:translateY(-8px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.hero-search-suggestion-item{
  display:flex;
  align-items:center;
  gap:0.85rem;
  padding:0.6rem 0.75rem;
  border-radius:var(--radius-m, 12px);
  text-decoration:none;
  color:var(--ink, #112420);
  transition:background var(--speed-s, 150ms) var(--ease, ease), transform var(--speed-s, 150ms) ease;
}
.hero-search-suggestion-item:hover,
.hero-search-suggestion-item.is-active{
  background:var(--surface-tint, #f0f7f5);
  transform:translateX(3px);
}
.hero-search-suggestion-item img{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
  background:#e6f2ef;
  border:1px solid rgba(17,36,32,0.06);
}
.hero-search-suggestion-item .hss-info{
  min-width:0;
  flex-grow:1;
}
.hero-search-suggestion-item h5{
  margin:0 0 0.2em;
  font-size:0.9rem;
  font-weight:600;
  color:var(--ink, #112420);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-search-suggestion-item .hss-meta{
  display:flex;
  align-items:center;
  gap:0.55em;
  font-size:0.75rem;
  color:var(--ink-soft, #56716a);
}
.hero-search-suggestion-item .hss-badge{
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  padding:0.18em 0.55em;
  border-radius:var(--radius-pill, 9999px);
  background:var(--violet-100, #e0f4f1);
  color:var(--violet, #0B5E52);
}
.hero-search-suggestion-item .hss-sku{
  font-family:monospace;
  opacity:0.85;
}
.hero-search-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.65rem 0.85rem 0.25rem;
  border-top:1px solid var(--line, #e2e8f0);
  margin-top:0.3rem;
  font-size:0.8rem;
}
.hero-search-footer a{
  color:var(--violet, #0B5E52);
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.35em;
}
.hero-search-footer a:hover{
  text-decoration:underline;
}
.hero-search-footer span{
  color:var(--ink-soft, #56716a);
  font-size:0.75rem;
}
.hero-search-empty{
  text-align:center;
  padding:1.4rem 0.8rem;
  color:var(--ink-soft, #56716a);
  font-size:0.88rem;
}


.dark-hero-stats{
  display:flex; justify-content:center; gap:clamp(1.6rem,4vw,3.2rem);
  margin-top:clamp(2.4rem,5vw,3.5rem); padding:1.6rem 0; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.14);
}
.dark-hero-stats .stat{ text-align:center; }
.dark-hero-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:#fff; }
.dark-hero-stats .stat span{ font-size:0.78rem; color:#9FC7BD; }

/* ---- image marquee ---- */
.image-marquee{ overflow:hidden; padding:clamp(1.8rem,4vw,2.6rem) 0; position:relative; z-index:2; }
.image-marquee-track{ display:flex; gap:1.1rem; width:max-content; animation:imgMarquee 34s linear infinite; }
@keyframes imgMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.image-marquee-item{
  width:150px; height:150px; border-radius:20px; overflow:hidden; flex-shrink:0;
  border:3px solid rgba(255,255,255,0.18);
}
.image-marquee-item img{ width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: reduce){ .image-marquee-track{ animation:none; } }
@media (max-width:640px){ .image-marquee-item{ width:110px; height:110px; } }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip{ padding:clamp(1.6rem,3vw,2.2rem) 0; }
.trust-strip .container{
  display:flex; flex-wrap:wrap; gap:0.7rem 1.4rem; align-items:center; justify-content:center;
}
.trust-item{
  display:flex; align-items:center; gap:0.55em; font-size:0.86rem; color:var(--ink); font-weight:600;
  background:var(--surface); border:1px solid var(--line); padding:0.6em 1.1em; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-card);
}
.trust-item svg{ width:17px; height:17px; flex-shrink:0; }
.trust-item:nth-child(1) svg{ color:var(--violet); }
.trust-item:nth-child(2) svg{ color:var(--pink); }
.trust-item:nth-child(3) svg{ color:var(--cyan); }
.trust-item:nth-child(4) svg{ color:var(--amber); }

/* ============================================================
   CATEGORY SHOWCASE — alternating editorial rows
   ============================================================ */
.cat-showcase{ display:flex; flex-direction:column; gap:clamp(3rem,6vw,4.5rem); }
.cat-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center;
}
.cat-row:nth-child(even) .cat-row-media{ order:2; }
@media (max-width:860px){
  .cat-row{ grid-template-columns:1fr; }
  .cat-row:nth-child(even) .cat-row-media{ order:0; }
}
.cat-row-media{ position:relative; border-radius:var(--radius-l); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow-lift); }
.cat-row-media img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease); }
.cat-row:hover .cat-row-media img{ transform:scale(1.05); }
.cat-row-media .cat-row-tag{
  position:absolute; top:1.1rem; left:1.1rem; color:#fff; font-weight:700; font-size:0.78rem;
  padding:0.5em 1em; border-radius:var(--radius-pill);
}
.cat-row-index{ font-family:var(--font-display); font-size:0.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:1rem; display:block; }
.cat-row-copy h3{ font-size:1.6rem; margin-bottom:0.6em; }
.cat-row-copy p{ font-size:0.98rem; margin-bottom:1.4em; }
.cat-row-list{ display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.6rem; }
.cat-row-list li{ display:flex; align-items:center; gap:0.6em; font-size:0.9rem; color:var(--ink); font-weight:500; }
.cat-row-list svg{ width:17px; height:17px; flex-shrink:0; }

/* ============================================================
   BEST SELLERS
   ============================================================ */
.bestseller-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:980px){ .bestseller-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bestseller-grid{ grid-template-columns:1fr; } }

.bestseller-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden; transition:transform var(--speed-m) var(--ease-bounce), box-shadow var(--speed-m) var(--ease);
}
.bestseller-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lift); }
.bs-rank{
  position:absolute; top:0.9rem; left:0.9rem; z-index:2;
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:0.9rem; color:#fff;
  background:var(--gradient-violet); box-shadow:0 6px 16px rgba(11,94,82,0.35);
}
.bs-rank.r1{ background:linear-gradient(135deg,#FFD873,#E8A93C); box-shadow:0 6px 16px rgba(232,169,60,0.4); }
.bs-rank.r2{ background:linear-gradient(135deg,#D7E4E0,#A9BEB8); box-shadow:0 6px 16px rgba(169,190,184,0.4); }
.bs-rank.r3{ background:linear-gradient(135deg,#E3B27B,#C08850); box-shadow:0 6px 16px rgba(192,136,80,0.4); }
.bs-media{ aspect-ratio:1/0.9; position:relative; }
.bs-media img{ width:100%; height:100%; object-fit:cover; }
.bs-tag{
  position:absolute; bottom:0.8rem; left:0.8rem; background:rgba(255,255,255,0.92); backdrop-filter:blur(4px);
  border-radius:var(--radius-pill); font-size:0.66rem; font-weight:700; padding:0.35em 0.8em; color:var(--violet-700);
  display:flex; align-items:center; gap:0.4em;
}
.bs-tag svg{ width:11px; height:11px; color:var(--amber); }
.bs-body{ padding:1.2rem 1.25rem 1.4rem; }
.bs-body .product-cat{ margin-bottom:0.5em; }
.bs-body h3{ font-size:1rem; margin-bottom:0.3em; }
.bs-body .product-sku{ margin-bottom:0.8em; }
.bs-body .product-foot .btn{ flex:1; }

/* ============================================================
   ANIMATED COUNTERS
   ============================================================ */
.counter-band{
  background:var(--gradient-violet); border-radius:var(--radius-l);
  padding:clamp(2rem,4vw,3rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
@media (max-width:760px){ .counter-band{ grid-template-columns:1fr 1fr; } }
.counter-item{ text-align:center; color:#fff; }
.counter-item .num{ font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.8rem); font-weight:800; display:flex; align-items:baseline; justify-content:center; gap:0.1em; }
.counter-item .label{ font-size:0.82rem; color:rgba(255,255,255,0.85); margin-top:0.4em; }

/* ============================================================
   PROCESS STRIP (reused pattern, restyled)
   ============================================================ */
.process-strip{ display:flex; gap:1.3rem; overflow-x:auto; padding-bottom:0.5rem; scrollbar-width:thin; }
.process-step{
  flex:0 0 260px; border-radius:var(--radius-m); padding:1.6rem; background:var(--surface); border:1px solid var(--line);
  transition:transform var(--speed-s) var(--ease-bounce);
}
.process-step:hover{ transform:translateY(-4px); }
.process-step .step-tag{
  display:inline-block; font-size:0.72rem; font-weight:700; margin-bottom:0.9em; color:#fff;
  padding:0.3em 0.8em; border-radius:var(--radius-pill);
}
.process-step:nth-child(1) .step-tag{ background:var(--gradient-violet); }
.process-step:nth-child(2) .step-tag{ background:var(--gradient-cyan); }
.process-step:nth-child(3) .step-tag{ background:var(--gradient-pink); }
.process-step:nth-child(4) .step-tag{ background:var(--gradient-amber); }
.process-step h3{ font-size:1.05rem; margin-bottom:0.4em; }
.process-step p{ font-size:0.87rem; margin:0; }

/* ============================================================
   CTA — diagonal cut band
   ============================================================ */
.cta-cut{
  position:relative; overflow:hidden;
  background:var(--ink);
  background-image:radial-gradient(at 20% 20%, rgba(63,169,166,0.4) 0, transparent 55%), radial-gradient(at 85% 85%, rgba(156,201,62,0.3) 0, transparent 50%);
  border-radius:var(--radius-l);
  padding:clamp(2.8rem,5vw,4.5rem);
  color:#fff; display:grid; grid-template-columns:1.2fr auto; align-items:center; gap:2rem;
}
@media (max-width:700px){ .cta-cut{ grid-template-columns:1fr; text-align:center; } }
.cta-cut h2{ color:#fff; margin-bottom:0.3em; }
.cta-cut p{ color:#B9D6CE; margin-bottom:0; }
.cta-cut .cta-actions{ display:flex; gap:0.8rem; flex-wrap:wrap; }
@media (max-width:700px){ .cta-cut .cta-actions{ justify-content:center; } }

/* ============================================================
   PAGE HERO — dark banner variant for interior pages
   ============================================================ */
.page-hero-dark{
  position:relative; overflow:hidden;
  background:var(--ink);
  background-image:
    radial-gradient(at 15% 20%, rgba(63,169,166,0.35) 0px, transparent 50%),
    radial-gradient(at 85% 15%, rgba(156,201,62,0.25) 0px, transparent 45%);
  border-radius:0 0 var(--radius-l) var(--radius-l);
  padding:clamp(2.6rem,6vw,4rem) 0 clamp(2.4rem,5vw,3.5rem);
  margin-top:calc(-1 * clamp(1rem,3vw,1.6rem) - 74px - clamp(0.8rem,2vw,1.4rem));
  padding-top:calc(clamp(2.6rem,6vw,4rem) + 74px + clamp(0.8rem,2vw,1.4rem) + clamp(1rem,3vw,1.6rem));
  color:#fff;
}
.page-hero-dark .breadcrumb{ color:#9FC7BD; }
.page-hero-dark .breadcrumb a:hover{ color:#fff; }
.page-hero-dark .eyebrow{ background:rgba(255,255,255,0.12); color:#CFEDE6; }
.page-hero-dark h1{ color:#fff; font-size:var(--fs-display-2); max-width:760px; }
.page-hero-dark .lede{ color:#B9D6CE; max-width:620px; }