/* ══════════════════════════════════════════════════════════
   ECOCLEAN THEME — Terracotta Design System
   Ported from Terracotta_Shop_Homepage00.html reference.
   ══════════════════════════════════════════════════════════ */

/* ─── RESET ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }

/* ─── TOKENS ─────────────────────────────── */
:root {
  --beige:        #FBE7DA;
  --caramel-lt:   #FFCBAE;
  --caramel:      #FFA97D;
  --caramel-dk:   #FF8559;
  --sand:         #FF7518;
  --bronze:       #E35336;
  --bronze-deep:  #B23D28;
  --bark:         #5C2A1C;
  --bark-deep:    #341410;
  --cream:        #FFF8F2;

  --gold-deep:    #E35336;
  --gold:         #FF7518;
  --gold-mid:     #FF8559;
  --gold-warm:    #FFA47D;

  --ember:        #E35336;
  --sage:         #4A5C2E;

  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'Jost', system-ui, sans-serif;
  --fm: 'DM Mono', monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:4px; --r-md:10px; --r-lg:18px; --r-xl:28px; --r-pill:999px;

  --max: 1200px;
  --side: clamp(var(--s5), 5vw, var(--s7));
}

/* ─── BASE ─────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: linear-gradient(120deg,
    var(--beige) 0%, var(--caramel-lt) 25%, var(--gold-warm) 50%,
    var(--caramel-lt) 75%, var(--beige) 100%);
  background-size: 300% 300%;
  animation: ambientDrift 60s ease-in-out infinite;
  color: var(--bark);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.is-ready { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* ─── UTILITIES ─────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); }
.eyebrow {
  font-family: var(--fm); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.golden-rule { display: flex; align-items: center; gap: var(--s4); margin: var(--s7) 0; }
.golden-rule::before, .golden-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid));
}
.golden-rule::after { background: linear-gradient(90deg, var(--gold-mid), transparent); }
.golden-rule-gem {
  width: 5px; height: 5px; background: var(--gold);
  transform: rotate(45deg); flex-shrink: 0;
  animation: gemSpin 4s ease-in-out infinite;
}
.golden-rule-text {
  font-family: var(--fd); font-size: 13px; font-style: italic;
  color: var(--gold); white-space: nowrap; letter-spacing: .03em;
}

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 14px 30px; border-radius: var(--r-pill);
  font-family: var(--fb); font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  transition: all .25s ease, transform .15s ease; border: none;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.96); }
.btn-dark { background: var(--bark-deep); color: var(--cream); }
.btn-dark:hover { background: var(--bark); box-shadow: 0 6px 24px rgba(38,26,10,.22); transform: translateY(-1px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm), var(--gold-deep));
  background-size: 200% auto; color: var(--bark-deep); font-weight: 500;
}
.btn-gold:hover { background-position: right center; box-shadow: 0 6px 24px rgba(160,120,40,.28); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--bark); border: 1.5px solid var(--caramel-dk); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-deep); background: rgba(196,154,60,.06); }
.btn-sm { padding: 10px 20px; font-size: 11px; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.badge-gold { background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm)); color: var(--bark-deep); }
.badge-ember { background: var(--ember); color: #fff; }
.badge-sage  { background: var(--sage); color: var(--cream); }
.badge-outline { background: transparent; border: 1px solid var(--gold); color: var(--gold-deep); }

/* ─── ANNOUNCE BAR ─────────────────────── */
.announce {
  background: var(--bark-deep); color: var(--gold-warm); font-family: var(--fm);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  padding: 10px var(--side); position: relative; z-index: 50;
}
.announce span { color: var(--gold-mid); margin: 0 var(--s3); }

/* ─── NAV ─────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(232,213,176,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--caramel-dk);
  transition: box-shadow .3s ease;
}
.nav.scrolled { box-shadow: 0 4px 20px rgba(38,26,10,.1); }
.nav::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent); opacity: .5;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; transition: height .3s cubic-bezier(.4,0,.2,1); }
.nav.scrolled .nav-inner { height: 50px; }
.nav-logo { font-family: var(--fd); font-size: 22px; font-weight: 400; letter-spacing: .02em; color: var(--bark-deep); line-height: 1; transition: font-size .3s cubic-bezier(.4,0,.2,1); }
.nav.scrolled .nav-logo { font-size: 18px; }
.nav-logo em {
  font-style: italic; background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-links { display: flex; gap: var(--s6); }
.nav-links a { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); transition: color .2s; padding-bottom: 2px; }
.nav-links a:hover { color: var(--gold-deep); }
.nav-links a.active { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }
.nav-right { display: flex; align-items: center; gap: var(--s5); }
.nav-icon { font-size: 18px; color: var(--bark); transition: color .2s; cursor: pointer; position: relative; }
.nav-icon:hover { color: var(--gold-deep); }
.nav-cart-count {
  position: absolute; top: -6px; right: -8px; background: var(--ember); color: white;
  font-family: var(--fm); font-size: 8px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-cart-count.bump { animation: cartBounce .4s ease; }
.nav-wa { display: flex; align-items: center; gap: var(--s2); font-family: var(--fm); font-size: 10px; letter-spacing: .1em; color: var(--bronze-deep); transition: color .2s; }
.nav-wa:hover { color: var(--gold-deep); }

/* ─── HERO ─────────────────────────────── */
.hero {
  min-height: 88vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--s8); padding: var(--s9) var(--side); max-width: var(--max); margin: 0 auto; position: relative;
}
.hero > * { min-width: 0; }
.hero-left { display: flex; flex-direction: column; gap: var(--s5); }
.hero-headline { font-family: var(--fd); font-size: clamp(44px, 5.5vw, 76px); font-weight: 400; line-height: 1.0; color: var(--bark-deep); letter-spacing: -.01em; }
.hero-headline em {
  font-style: italic; background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-warm) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-family: var(--fb); font-size: 16px; font-weight: 300; color: var(--bronze-deep); line-height: 1.7; max-width: 420px; }
.hero-actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s2); }
.hero-trust { display: flex; gap: var(--s5); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--caramel-dk); }
.hero-trust-item { display: flex; align-items: center; gap: var(--s2); font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); }
.hero-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.hero-right { position: relative; display: flex; align-items: center; justify-content: center; opacity: 0; animation: heroInRight 1s cubic-bezier(.16,1,.3,1) .3s forwards; }
.hero-product-stage {
  width: 100%; max-width: 480px; aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--caramel-lt) 0%, var(--caramel) 100%);
  border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-product-stage img { width: 100%; height: 100%; object-fit: contain; object-position: var(--img-pos, center center); position: relative; z-index: 1; }
.hero-product-glow {
  position: absolute; bottom: -60px; right: -60px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,154,60,.2) 0%, transparent 70%); pointer-events: none;
  animation: pulseGlow 6s ease-in-out infinite;
}
.hero-product-glow-2 {
  position: absolute; top: -40px; left: -40px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,82,48,.08) 0%, transparent 60%); pointer-events: none;
}
.hero-product-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); }
.hero-product-icon { font-size: 64px; line-height: 1; display: inline-block; animation: floatY 4s ease-in-out infinite; }
.hero-product-name { font-family: var(--fd); font-size: 18px; font-style: italic; color: var(--bark); text-align: center; padding: 0 var(--s5); line-height: 1.3; }
.hero-product-sub { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.hero-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold-warm), var(--gold-deep), transparent); }

.hero-float-badge { position: absolute; background: var(--cream); border: 1px solid var(--caramel-dk); border-radius: var(--r-lg); padding: var(--s3) var(--s4); box-shadow: 0 8px 24px rgba(38,26,10,.12); }
.hero-float-1 { top: var(--s6); left: -28px; animation: floatY 5s ease-in-out infinite 1.4s, heroIn .7s cubic-bezier(.16,1,.3,1) .9s backwards; }
.hero-float-2 { bottom: var(--s6); right: -28px; animation: floatY2 5.5s ease-in-out infinite 1.9s, heroIn .7s cubic-bezier(.16,1,.3,1) 1.05s backwards; }
.hero-float-num { font-family: var(--fd); font-size: 24px; font-weight: 500; background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.hero-float-label { font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); margin-top: 2px; }

.hero-left > * { opacity: 0; animation: heroIn .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero-left > *:nth-child(1) { animation-delay: .05s; }
.hero-left > *:nth-child(2) { animation-delay: .16s; }
.hero-left > *:nth-child(3) { animation-delay: .27s; }
.hero-left > *:nth-child(4) { animation-delay: .38s; }
.hero-left > *:nth-child(5) { animation-delay: .48s; }

/* ─── CATEGORIES STRIP ────────────────── */
.categories { background: var(--caramel-lt); border-top: 1px solid var(--caramel-dk); border-bottom: 1px solid var(--caramel-dk); padding: var(--s5) 0; overflow: hidden; }
.categories-inner { display: flex; gap: 0; position: relative; }
.cat-item {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-right: 1px solid var(--caramel-dk); cursor: pointer;
  transition: background .5s ease, transform .5s cubic-bezier(.25,.1,.25,1); position: relative;
}
.cat-item:last-child { border-right: none; }
.cat-item:hover { background: rgba(196,154,60,.08); transform: translateY(-3px); }
.cat-item.active { background: var(--cream); }
.cat-item::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-warm));
  transition: left .7s cubic-bezier(.16,1,.3,1), right .7s cubic-bezier(.16,1,.3,1);
}
.cat-item:hover::after, .cat-item.active::after { left: 12%; right: 12%; }
.cat-icon { font-size: 20px; display: inline-block; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.cat-item:hover .cat-icon { transform: scale(1.15) rotate(-4deg); }
.cat-item.active .cat-icon { animation: catPop 1.1s cubic-bezier(.22,1,.36,1); }
.cat-label { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); transition: color .5s ease, letter-spacing .6s ease; }
.cat-item:hover .cat-label { letter-spacing: .14em; }
.cat-item.active .cat-label { color: var(--gold-deep); }

/* ─── PRODUCTS SECTION ─────────────────── */
.products-section { padding: var(--s8) 0; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--s6); flex-wrap: wrap; gap: var(--s3); }
.section-title { font-family: var(--fd); font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; color: var(--bark-deep); line-height: 1.1; }
.section-title em { font-style: italic; color: var(--gold); }

.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }

.pcard {
  background: var(--cream); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--caramel-dk);
  transition: all .3s ease; position: relative; display: flex; flex-direction: column; will-change: transform;
}
.pcard::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(196,154,60,.03) 0%, transparent 50%); pointer-events: none; z-index: 0; }
.pcard:hover { border-color: var(--gold-mid); box-shadow: 0 10px 40px rgba(160,120,40,.14); transform: translateY(-3px); }
.pcard-img { aspect-ratio: 1; background: linear-gradient(160deg, var(--caramel-lt), var(--caramel)); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; object-position: var(--img-pos, center center); position: relative; z-index: 1; }
.pcard-img-shimmer { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 35%, rgba(212,175,90,.07) 50%, transparent 65%); animation: shimmerSlide 3.2s ease-in-out infinite; }
.pcard-img::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 60%; height: 220%;
  background: linear-gradient(45deg, transparent 20%, rgba(255,255,255,.15) 42%, var(--gold-warm) 50%, rgba(255,255,255,.15) 58%, transparent 80%);
  opacity: 0; pointer-events: none;
}
.pcard:hover .pcard-img::after { animation: hoverShimmer 2.2s ease-out 1 forwards; }
.pcard-img-content { display: flex; flex-direction: column; align-items: center; gap: var(--s2); position: relative; z-index: 1; }
.pcard-img-icon, .bundle-img, .why-icon { font-size: 48px; line-height: 1; display: inline-block; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.pcard:hover .pcard-img-icon, .bundle-card:hover .bundle-img, .why-item:hover .why-icon { transform: scale(1.12) rotate(-4deg); }
.pcard-img-text { font-family: var(--fd); font-size: 12px; font-style: italic; color: var(--caramel-dk); }
.pcard-badges { position: absolute; top: var(--s3); left: var(--s3); display: flex; gap: var(--s2); z-index: 2; }
.pcard-wish { position: absolute; top: var(--s3); right: var(--s3); font-size: 18px; color: var(--sand); cursor: pointer; z-index: 2; transition: color .2s, transform .2s; }
.pcard-wish:hover { color: var(--ember); }
.pcard-wish:active { transform: scale(1.3); }
.pcard-wish.liked { color: var(--ember); transform: scale(1.15); }

.pcard-body { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; position: relative; z-index: 1; }
.pcard-cat { font-family: var(--fm); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pcard-name { font-family: var(--fd); font-size: 18px; font-weight: 400; color: var(--bark-deep); line-height: 1.2; }
.pcard-name a { color: inherit; }
.pcard-desc { font-size: 13px; font-weight: 300; color: var(--bronze-deep); line-height: 1.5; flex: 1; }
.pcard-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s3); margin-top: var(--s2); border-top: 1px solid var(--caramel); }
.pcard-price { font-family: var(--fd); font-size: 22px; font-weight: 500; background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.pcard-price-old { font-family: var(--fb); font-size: 12px; font-weight: 300; color: var(--sand); text-decoration: line-through; display: block; margin-top: 2px; }

.pcard-featured { grid-column: span 2; flex-direction: row; }
.pcard-featured .pcard-img { width: 280px; aspect-ratio: auto; flex-shrink: 0; border-radius: 0; }
.pcard-featured .pcard-body { padding: var(--s6); justify-content: center; }
.pcard-featured .pcard-name { font-size: 24px; }
.pcard-featured .pcard-desc { font-size: 14px; max-width: 340px; }

/* ─── BUNDLES ───────────────────────────── */
.bundles-section { background: var(--caramel-lt); border-top: 1px solid var(--caramel-dk); border-bottom: 1px solid var(--caramel-dk); padding: var(--s8) 0; }
.bundles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.bundle-card { background: var(--cream); border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); padding: var(--s6); display: flex; gap: var(--s5); align-items: center; transition: all .3s ease; position: relative; overflow: hidden; will-change: transform; }
.bundle-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold-warm), var(--gold-deep), transparent); opacity: 0; transition: opacity .3s; }
.bundle-card:hover { border-color: var(--gold-mid); box-shadow: 0 8px 32px rgba(160,120,40,.12); transform: translateY(-2px); }
.bundle-card:hover::before { opacity: 1; }
.bundle-img { width: 100px; height: 100px; background: linear-gradient(135deg, var(--caramel-lt), var(--caramel)); border-radius: var(--r-lg); border: 1px solid var(--caramel-dk); display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; overflow: hidden; }
.bundle-img img { width: 100%; height: 100%; object-fit: contain; }
.bundle-info { flex: 1; display: flex; flex-direction: column; gap: var(--s2); }
.bundle-name { font-family: var(--fd); font-size: 20px; font-weight: 400; color: var(--bark-deep); line-height: 1.2; }
.bundle-includes { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; color: var(--sand); }
.bundle-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); }
.bundle-price { font-family: var(--fd); font-size: 20px; font-weight: 500; background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bundle-save { font-family: var(--fm); font-size: 9px; letter-spacing: .1em; color: var(--ember); text-transform: uppercase; }

/* ─── WHY US ────────────────────────────── */
.why-section { padding: var(--s8) 0; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); margin-top: var(--s6); }
.why-item { background: var(--cream); border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s3); transition: all .3s ease; will-change: transform; }
.why-item:hover { border-color: var(--gold-mid); box-shadow: 0 6px 24px rgba(160,120,40,.1); transform: translateY(-2px); }
.why-title { font-family: var(--fd); font-size: 18px; font-weight: 400; color: var(--bark-deep); line-height: 1.2; }
.why-body { font-size: 13px; font-weight: 300; color: var(--bronze-deep); line-height: 1.6; }

/* ─── TRUST BAR ─────────────────────────── */
.trust-section { background: var(--bark-deep); padding: var(--s7) 0; position: relative; overflow: hidden; }
.trust-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold-warm), var(--gold-deep), transparent); }
.trust-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); opacity: .4; }
.trust-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(196,154,60,.08) 0%, transparent 70%); pointer-events: none; }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); position: relative; z-index: 1; }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s4); will-change: transform; }
.trust-icon { font-size: 28px; }
.trust-label { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.trust-value { font-family: var(--fd); font-size: 16px; font-style: italic; color: var(--gold-warm); line-height: 1.3; }

/* ─── B2B STRIP ─────────────────────────── */
.b2b-section { padding: var(--s8) 0; }
.b2b-card { background: linear-gradient(135deg, var(--caramel-lt) 0%, var(--caramel) 100%); border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); padding: var(--s8) var(--s7); display: grid; grid-template-columns: 1fr auto; gap: var(--s7); align-items: center; position: relative; overflow: hidden; }
.b2b-glow { position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(196,154,60,.15) 0%, transparent 70%); pointer-events: none; }
.b2b-top-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold-warm), var(--gold-deep), transparent); }
.b2b-content { display: flex; flex-direction: column; gap: var(--s4); position: relative; z-index: 1; }
.b2b-title { font-family: var(--fd); font-size: clamp(28px, 3vw, 44px); font-weight: 400; color: var(--bark-deep); line-height: 1.1; }
.b2b-title em { font-style: italic; color: var(--gold); }
.b2b-body { font-size: 15px; font-weight: 300; color: var(--bronze-deep); line-height: 1.7; max-width: 480px; }
.b2b-bullets { display: flex; gap: var(--s5); flex-wrap: wrap; }
.b2b-bullet { display: flex; align-items: center; gap: var(--s2); font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); }
.b2b-bullet::before { content: '◆'; font-size: 6px; color: var(--gold); }
.b2b-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s3); align-items: flex-end; }

/* ─── BLOG ──────────────────────────────── */
.blog-section { padding: var(--s8) 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s6); }
.blog-card { background: var(--cream); border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); overflow: hidden; transition: all .3s ease; will-change: transform; }
.blog-card:hover { border-color: var(--gold-mid); box-shadow: 0 8px 32px rgba(160,120,40,.1); transform: translateY(-2px); }
.blog-img { height: 180px; background: linear-gradient(160deg, var(--caramel-lt), var(--caramel)); display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-img-shimmer { position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(212,175,90,.07), transparent); animation: shimmerSlide 3.2s ease-in-out infinite; }
.blog-body { padding: var(--s5); }
.blog-date { font-family: var(--fm); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: var(--s2); }
.blog-title { font-family: var(--fd); font-size: 18px; font-weight: 400; color: var(--bark-deep); line-height: 1.25; margin-bottom: var(--s3); }
.blog-excerpt { font-size: 13px; font-weight: 300; color: var(--bronze-deep); line-height: 1.6; margin-bottom: var(--s4); }
.blog-read { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--gold-mid); padding-bottom: 2px; display: inline-block; transition: color .2s; }
.blog-card:hover .blog-read { color: var(--gold); }

/* ─── NEWSLETTER ────────────────────────── */
.newsletter-section { background: var(--caramel-lt); border-top: 1px solid var(--caramel-dk); padding: var(--s8) 0; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.newsletter-title { font-family: var(--fd); font-size: clamp(28px, 3vw, 40px); font-weight: 400; color: var(--bark-deep); line-height: 1.1; margin-bottom: var(--s3); }
.newsletter-title em { font-style: italic; color: var(--gold); }
.newsletter-sub { font-size: 14px; font-weight: 300; color: var(--bronze-deep); line-height: 1.7; }
.newsletter-form { display: flex; gap: var(--s3); }
.newsletter-input { flex: 1; padding: 14px 18px; background: var(--cream); border: 1.5px solid var(--caramel-dk); border-radius: var(--r-pill); font-family: var(--fb); font-size: 14px; font-weight: 300; color: var(--bark); outline: none; transition: border-color .2s, box-shadow .2s; }
.newsletter-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,60,.12); }
.newsletter-input::placeholder { color: var(--sand); }
.newsletter-msg { font-family: var(--fm); font-size: 10px; color: var(--sage); margin-top: var(--s2); }

/* ─── FOOTER ────────────────────────────── */
.footer { background: var(--bark-deep); padding: var(--s8) 0 var(--s5); position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold-warm), var(--gold-deep), transparent); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s7); padding-bottom: var(--s7); border-bottom: 1px solid var(--bark); }
.footer-brand { display: flex; flex-direction: column; gap: var(--s4); }
.footer-logo { font-family: var(--fd); font-size: 26px; font-weight: 400; color: var(--cream); }
.footer-logo em { font-style: italic; background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-tagline { font-size: 13px; font-weight: 300; color: var(--sand); line-height: 1.6; max-width: 260px; }
.footer-socials { display: flex; gap: var(--s3); margin-top: var(--s2); }
.footer-social { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bark); display: flex; align-items: center; justify-content: center; color: var(--sand); font-size: 14px; transition: all .2s; cursor: pointer; }
.footer-social:hover { border-color: var(--gold-deep); color: var(--gold); }
.footer-col { display: flex; flex-direction: column; gap: var(--s3); }
.footer-col-title { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
.footer-col a { font-size: 13px; font-weight: 300; color: var(--sand); transition: color .2s; }
.footer-col a:hover { color: var(--gold-warm); }
.footer-bottom { padding-top: var(--s5); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.footer-copy { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; color: var(--bronze-deep); }
.footer-legal { display: flex; gap: var(--s5); }
.footer-legal a { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; color: var(--bronze-deep); transition: color .2s; }
.footer-legal a:hover { color: var(--sand); }

/* ─── WHATSAPP FLOAT ────────────────────── */
.wa-float {
  position: fixed; bottom: var(--s6); right: var(--s6); width: 52px; height: 52px;
  background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 200; cursor: pointer;
  transition: transform .2s, box-shadow .2s; animation: waPulse 2.8s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.3); }

/* ─── ADD TO CART BUTTON STATES ─────────── */
.btn-add { position: relative; overflow: hidden; }
.btn-add .btn-add-ripple { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.6); transform: scale(0); pointer-events: none; animation: ripple .55s ease-out forwards; }
.btn-add.is-added { animation: addedPop .4s ease; background: var(--sage) !important; color: var(--cream) !important; }
.btn-add-label, .btn-add-check { display: inline-flex; align-items: center; gap: var(--s2); transition: opacity .15s ease; }
.btn-add-check { display: none; }
.btn-add.is-added .btn-add-label { display: none; }
.btn-add.is-added .btn-add-check { display: inline-flex; }
.btn-add-check svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkDraw .35s ease .05s forwards; }

/* ─── SCROLL REVEAL ─────────────────────── */
body:not(.is-ready) [data-reveal] { opacity: 0; }
[data-reveal] { animation: fadeUp .8s cubic-bezier(.16,1,.3,1) both; animation-play-state: paused; }
[data-reveal].in-view { animation-play-state: running; }

/* ─── SUNSET INTRO ──────────────────────── */
#sunsetIntro {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(180deg, var(--bark-deep) 0%, var(--bronze-deep) 16%, var(--bronze) 30%,
    var(--ember) 44%, var(--gold-deep) 56%, var(--gold) 66%, var(--gold-mid) 75%, var(--gold-warm) 84%,
    var(--caramel) 93%, var(--beige) 100%);
  background-size: 100% 160%; background-position: 0 20%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  animation: sunsetFade 2.2s ease 1.75s forwards, sunsetDrift 3.2s ease-out forwards;
  pointer-events: none;
}
#sunsetIntro .horizon { position: absolute; left: 0; right: 0; bottom: 34%; height: 1px; background: linear-gradient(90deg, transparent, rgba(253,248,239,.5), transparent); }
#sunsetIntro .wordmark { position: relative; z-index: 1; font-family: var(--fd); font-size: 30px; font-style: italic; color: var(--cream); opacity: 0; animation: fadeUp .6s ease .3s forwards; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { #sunsetIntro { display: none; } }

/* ─── SCROLL PROGRESS ───────────────────── */
#scrollProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--bronze-deep), var(--gold), var(--gold-warm)); z-index: 1000; transition: width .08s linear; }

/* ─── KEYFRAMES ─────────────────────────── */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatY2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes pulseGlow { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } }
@keyframes shimmerSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes hoverShimmer { 0% { transform: translate(-60%,-60%) rotate(45deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(60%,60%) rotate(45deg); opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroInRight { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gemSpin { 0%,100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(225deg) scale(1.3); } }
@keyframes waPulse { 0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); } 50% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 10px rgba(37,211,102,0); } }
@keyframes cartBounce { 0%,100% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
@keyframes addedPop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes checkDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes ripple { from { transform: scale(0); opacity: .5; } to { transform: scale(2.6); opacity: 0; } }
@keyframes sunsetFade { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sunsetDrift { 0% { background-position: 0 40%; } 100% { background-position: 0 0%; } }
@keyframes catPop { 0% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes ambientDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero-float-1, .hero-float-2, .hero-product-glow, .hero-product-icon,
  .golden-rule-gem, .pcard-img-shimmer, .blog-img-shimmer, .wa-float, .hero-right { animation: none !important; opacity: 1 !important; }
}

/* ══════════════════════════════════════════════════════════
   ADDITIONAL TEMPLATES: single product, archive, checkout, blog
   ══════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); padding: var(--s5) 0 0; }
.breadcrumb a { color: var(--gold-deep); }
.breadcrumb a:hover { text-decoration: underline; }

/* Single product layout */
.product-single { padding: var(--s7) 0 var(--s8); }
.product-single-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.product-single-grid > * { min-width: 0; }
.product-gallery-main { aspect-ratio: 1; background: linear-gradient(160deg, var(--caramel-lt), var(--caramel)); border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; object-position: var(--img-pos, center center); }
.product-gallery-main .pcard-img-icon { font-size: 96px; }
.product-thumbs { display: flex; gap: var(--s3); margin-top: var(--s4); }
.product-thumb { width: 72px; height: 72px; border-radius: var(--r-md); border: 1.5px solid var(--caramel-dk); background: linear-gradient(160deg, var(--caramel-lt), var(--caramel)); cursor: pointer; overflow: hidden; }
.product-thumb.active { border-color: var(--gold); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }

.product-info { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.product-title { font-family: var(--fd); font-size: clamp(28px,3.5vw,40px); font-weight: 400; color: var(--bark-deep); line-height: 1.15; overflow-wrap: break-word; }
.product-badges-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.product-price-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.product-price { font-family: var(--fd); font-size: 32px; font-weight: 500; background: linear-gradient(135deg, var(--gold-deep), var(--gold-warm)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.product-price-old { font-family: var(--fb); font-size: 16px; color: var(--sand); text-decoration: line-through; }
.product-desc { font-size: 14px; font-weight: 300; color: var(--bronze-deep); line-height: 1.75; overflow-wrap: break-word; }
.product-meta-list { display: flex; flex-direction: column; gap: var(--s2); font-family: var(--fm); font-size: 11px; color: var(--bronze-deep); border-top: 1px solid var(--caramel-dk); border-bottom: 1px solid var(--caramel-dk); padding: var(--s4) 0; }
.product-meta-list b { color: var(--bark-deep); }
.product-disclaimer { font-family: var(--fm); font-size: 10px; color: var(--bronze-deep); background: rgba(227,83,54,.08); border: 1px solid var(--ember); border-radius: var(--r-md); padding: var(--s3) var(--s4); line-height: 1.6; }
.product-qty-row { display: flex; align-items: center; gap: var(--s4); }
.qty-selector { display: flex; align-items: center; border: 1.5px solid var(--caramel-dk); border-radius: var(--r-pill); overflow: hidden; }
.qty-selector button { padding: 10px 16px; font-family: var(--fm); font-size: 14px; color: var(--bark-deep); }
.qty-selector button:hover { background: var(--caramel-lt); }
.qty-selector input { width: 44px; text-align: center; border: none; font-family: var(--fm); font-size: 14px; background: transparent; color: var(--bark-deep); }
.product-cta-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.product-tabs { display: flex; gap: var(--s6); border-bottom: 1px solid var(--caramel-dk); margin-top: var(--s8); }
.product-tab { font-family: var(--fm); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); padding-bottom: var(--s3); cursor: pointer; border-bottom: 2px solid transparent; }
.product-tab.active { color: var(--gold-deep); border-color: var(--gold); }
.product-tab-panel { display: none; padding: var(--s6) 0; font-size: 14px; font-weight: 300; color: var(--bronze-deep); line-height: 1.8; }
.product-tab-panel.active { display: block; }

/* Related products */
.related-section { padding: var(--s8) 0; }

/* Archive / category grid page */
.archive-header { padding: var(--s7) 0 var(--s5); }
.archive-title { font-family: var(--fd); font-size: clamp(32px,4vw,52px); color: var(--bark-deep); }
.archive-title em { font-style: italic; color: var(--gold); }
.archive-desc { font-size: 14px; color: var(--bronze-deep); max-width: 640px; margin-top: var(--s3); font-weight: 300; line-height: 1.7; }
.archive-toolbar { display: flex; justify-content: space-between; align-items: center; margin: var(--s5) 0; flex-wrap: wrap; gap: var(--s3); }
.archive-count { font-family: var(--fm); font-size: 11px; color: var(--bronze-deep); }
.archive-sort select { font-family: var(--fm); font-size: 11px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--caramel-dk); background: var(--cream); color: var(--bark); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); padding-bottom: var(--s8); }
.category-strip-links { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.category-strip-links a { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--caramel-dk); color: var(--bronze-deep); transition: all .2s; }
.category-strip-links a:hover, .category-strip-links a.active { border-color: var(--gold); color: var(--gold-deep); background: var(--cream); }

/* Blog single */
.article-single { padding: var(--s7) 0 var(--s8); max-width: 760px; margin: 0 auto; }
.article-title { font-family: var(--fd); font-size: clamp(30px,4vw,48px); color: var(--bark-deep); line-height: 1.15; margin: var(--s4) 0; }
.article-meta { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); }
.article-hero-img { aspect-ratio: 16/7; background: linear-gradient(160deg, var(--caramel-lt), var(--caramel)); border-radius: var(--r-xl); border: 1px solid var(--caramel-dk); margin: var(--s6) 0; display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-body { font-size: 16px; font-weight: 300; color: var(--bark); line-height: 1.85; }
.article-body p { margin-bottom: var(--s5); }
.article-body h2 { font-family: var(--fd); font-size: 28px; color: var(--bark-deep); margin: var(--s7) 0 var(--s4); }
.article-body h3 { font-family: var(--fd); font-size: 22px; color: var(--bark-deep); margin: var(--s6) 0 var(--s3); }
.article-body ul, .article-body ol { margin: 0 0 var(--s5) var(--s5); }
.article-body a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-mid); }
.article-body img { border-radius: var(--r-lg); margin: var(--s5) 0; }

/* Checkout / cart page */
.cart-page, .checkout-page { padding: var(--s7) 0 var(--s8); }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--caramel-dk); }
.cart-table td { padding: var(--s4) var(--s3); border-bottom: 1px solid var(--caramel); font-size: 14px; }
.cart-row-name { display: flex; align-items: center; gap: var(--s4); }
.cart-row-thumb { width: 56px; height: 56px; border-radius: var(--r-md); background: linear-gradient(160deg, var(--caramel-lt), var(--caramel)); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; }
.cart-row-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-remove { font-family: var(--fm); font-size: 10px; color: var(--ember); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.cart-summary { max-width: 380px; margin-left: auto; margin-top: var(--s6); background: var(--cream); border: 1px solid var(--caramel-dk); border-radius: var(--r-xl); padding: var(--s6); }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: var(--s3); }
.cart-summary-row.total { font-family: var(--fd); font-size: 20px; border-top: 1px solid var(--caramel-dk); padding-top: var(--s3); margin-top: var(--s3); }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.checkout-grid > * { min-width: 0; }
.checkout-form-group { margin-bottom: var(--s4); }
.checkout-form-group label { display: block; font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: var(--s2); }
.checkout-form-group input, .checkout-form-group textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--caramel-dk); border-radius: var(--r-md); background: var(--cream); font-family: var(--fb); font-size: 14px; color: var(--bark); outline: none; }
.checkout-form-group input:focus, .checkout-form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,60,.12); }
#card-element { padding: 14px 16px; border: 1.5px solid var(--caramel-dk); border-radius: var(--r-md); background: var(--cream); }
#card-errors { color: var(--ember); font-size: 12px; margin-top: var(--s2); font-family: var(--fm); }
.empty-cart-msg { text-align: center; padding: var(--s9) 0; font-family: var(--fd); font-size: 20px; font-style: italic; color: var(--bronze-deep); }

/* Simple page content (about, faq, etc) */
.page-content { padding: var(--s7) 0 var(--s8); max-width: 800px; margin: 0 auto; }
.page-content h1 { font-family: var(--fd); font-size: clamp(30px,4vw,48px); color: var(--bark-deep); margin-bottom: var(--s6); }
.page-content h2 { font-family: var(--fd); font-size: 26px; color: var(--bark-deep); margin: var(--s6) 0 var(--s3); }
.page-content p { font-size: 15px; font-weight: 300; color: var(--bark); line-height: 1.8; margin-bottom: var(--s4); }

/* ─── MOBILE ─────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding: var(--s7) var(--side); gap: var(--s6); }
  .hero-right { order: -1; }
  .hero-product-stage { max-width: 100%; aspect-ratio: 16/9; }
  .hero-float-1, .hero-float-2 { display: none; }
  .products-grid, .archive-grid { grid-template-columns: 1fr 1fr; }
  .pcard-featured { grid-column: span 2; flex-direction: column; }
  .pcard-featured .pcard-img { width: 100%; aspect-ratio: 16/9; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .trust-inner { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .bundles-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .b2b-card { grid-template-columns: 1fr; }
  .b2b-actions { align-items: flex-start; }
  .newsletter-inner, .product-single-grid, .checkout-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .categories-inner { overflow-x: auto; }
  .cat-label { font-size: 9px; }
}
@media (max-width: 600px) {
  .products-grid, .archive-grid { grid-template-columns: 1fr; }
  .pcard-featured { grid-column: span 1; }
  .why-grid { grid-template-columns: 1fr; }
  .trust-inner { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
}