@view-transition { navigation: auto; }

:root{
  --bg: #FFFFFF;
  --bg-soft: #F4F6FC;
  --card: #FFFFFF;
  --ink: #16213E;
  --ink-soft: #5B6178;
  --navy: #1F2A57;
  --navy-deep: #141A3B;
  --periwinkle: #A9C0F2;
  --periwinkle-soft: #EAEFFC;
  --line: #E1E5F2;
  --gold: #F2A93B;
  --sage: #3F9A64;
  --shadow: 222 45% 18%;
  --ease: cubic-bezier(.16,.8,.24,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #10131F;
    --bg-soft: #161A2C;
    --card: #171B2C;
    --ink: #EDEFF7;
    --ink-soft: #B7BDD6;
    --navy: #6B84E0;
    --navy-deep: #8598E8;
    --periwinkle: #2A3568;
    --periwinkle-soft: #1E2547;
    --line: #2A3050;
    --gold: #F2C063;
    --sage: #5FBE85;
    --shadow: 222 60% 3%;
  }
}
:root[data-theme="dark"]{
  --bg: #10131F;
  --bg-soft: #161A2C;
  --card: #171B2C;
  --ink: #EDEFF7;
  --ink-soft: #B7BDD6;
  --navy: #6B84E0;
  --navy-deep: #8598E8;
  --periwinkle: #2A3568;
  --periwinkle-soft: #1E2547;
  --line: #2A3050;
  --gold: #F2C063;
  --sage: #5FBE85;
  --shadow: 222 60% 3%;
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter", "Segoe UI", sans-serif;
  font-size:16px; line-height:1.55;
  animation: bodyFadeIn .4s var(--ease) both;
}
@keyframes bodyFadeIn{ from{ opacity:0; } to{ opacity:1; } }
h1,h2,h3,.wordmark{ font-family:"Poppins","Segoe UI",sans-serif; text-wrap:balance; }
.mono, .price, .timer{ font-variant-numeric: tabular-nums; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
section{ padding-block: clamp(2.5rem, 6vw, 5rem); }
.wrap{ max-width:1120px; margin-inline:auto; padding-inline:20px; }
.eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800;
  color:var(--navy);
}
.badge-pill{
  display:inline-block; background:var(--navy); color:#fff; font-size:.66rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:.5em 1.1em; border-radius:6px; margin-bottom:.8em;
}
h2.headline{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:.3em 0 .5em; color:var(--ink); font-weight:700; }
.lede{ color:var(--ink-soft); max-width:60ch; font-size:1.05rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; border:none; border-radius:10px;
  padding:.95em 1.7em; font-family:"Poppins",sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.02em;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--navy); color:#fff; box-shadow:0 10px 22px -10px hsl(var(--shadow) / .55); }
.btn-primary:hover{ background:var(--navy-deep); transform:translateY(-1px); box-shadow:0 14px 26px -10px hsl(var(--shadow) / .6); }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--navy); color:var(--navy); }
.btn-sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn-gold{ background:var(--gold); color:#1A1400; box-shadow:0 10px 22px -10px hsl(38 70% 40% / .55); }
.btn-gold:hover{ background:#E09B24; transform:translateY(-1px); }

/* Announcement bar */
.announce{
  background:var(--navy-deep); color:#fff; font-size:.8rem; font-weight:700;
  text-align:center; padding:.55em 1em; letter-spacing:.02em;
}
.announce .timer{ display:inline-flex; gap:.3em; margin-left:.6em; }
.announce .timer span{ background:rgba(255,255,255,.16); border-radius:5px; padding:.1em .45em; }
.announce-sub{
  background:var(--navy); color:#fff; font-size:.72rem; font-weight:700;
  text-align:center; padding:.4em 1em; letter-spacing:.04em; text-transform:uppercase;
}

/* Payment badges */
.payment-icons{ display:flex; gap:.4em; justify-content:center; flex-wrap:wrap; margin-top:.6rem; }
.payment-icons span{
  border:1px solid var(--line); border-radius:6px; padding:.28em .55em; font-size:.62rem; font-weight:800;
  color:var(--ink-soft); background:var(--card); letter-spacing:.02em;
}

/* UGC photo strip */
.ugc-head{ text-align:center; margin-top:1.1rem; }
.ugc-head h3{ font-family:"Poppins",sans-serif; font-size:.95rem; margin:0 0 .5em; }
.ugc-strip{ display:flex; gap:.6em; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.ugc-strip::-webkit-scrollbar{ display:none; }
.ugc-strip img{
  width:88px; height:88px; object-fit:cover; border-radius:10px; flex:none; scroll-snap-align:start;
  border:1px solid var(--line);
}

/* Header */
header.site{
  position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
header.site.scrolled{ box-shadow:0 8px 20px -18px hsl(var(--shadow) / .5); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:.85em; gap:1rem; position:relative; }
.brand{ display:flex; align-items:center; gap:.6em; text-decoration:none; }
.brand svg{ width:36px; height:36px; flex:none; transition:transform .3s var(--ease); }
.brand:hover svg{ transform:scale(1.05); }
.brand .word{ font-family:"Poppins",sans-serif; font-size:1.25rem; font-weight:800; line-height:1; }
.brand .word .my{ color:var(--ink); }
.brand .word .pawsome{ color:var(--navy); }
.brand .tag{ display:block; font-family:"Inter",sans-serif; font-size:.56rem; letter-spacing:.14em; color:var(--ink-soft); font-weight:700; }
nav.links{ display:flex; gap:1.6em; font-weight:600; font-size:.9rem; }
nav.links a{ text-decoration:none; color:var(--ink-soft); position:relative; padding-block:.2em; transition:color .18s ease; }
nav.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--navy);
  transition:right .22s var(--ease);
}
nav.links a:hover{ color:var(--ink); }
nav.links a:hover::after, nav.links a.current::after{ right:0; }
nav.links a.current{ color:var(--navy); font-weight:700; }
.nav-actions{ display:flex; align-items:center; gap:1em; }
.cart-btn{ position:relative; background:none; border:none; cursor:pointer; color:var(--ink); transition:transform .15s ease; }
.cart-btn:hover{ transform:scale(1.06); color:var(--navy); }
.cart-count{ position:absolute; top:-6px; right:-8px; background:var(--navy); color:#fff; font-size:.62rem; font-weight:800; border-radius:999px; width:16px; height:16px; display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease); }
.cart-count.bump{ transform:scale(1.4); }
.menu-btn{ display:none; background:none; border:none; cursor:pointer; color:var(--ink); }

@media (max-width: 860px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--card);
    border:1px solid var(--line); border-radius:12px; flex-direction:column; gap:0; padding:.5em;
    box-shadow:0 20px 36px -20px hsl(var(--shadow) / .5);
  }
  nav.links.open{ display:flex; animation:dropIn .2s var(--ease) both; }
  nav.links a{ padding:.7em .6em; }
  nav.links a::after{ display:none; }
  .menu-btn{ display:block; }
}
@keyframes dropIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i,0) * 60ms); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  body{ animation:none; }
}

/* Hero */
.hero{ padding-block: clamp(1.2rem,4vw,2rem) 1.6rem; }
.hero .wrap{ display:grid; grid-template-columns: .95fr 1fr; gap:clamp(1.2rem,4vw,3rem); align-items:start; }
.hero h1{ font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.14; margin:.25em 0 .3em; font-weight:700; }
.stars{ color:var(--gold); letter-spacing:.03em; }
.rating-row{ display:flex; align-items:center; gap:.5em; font-weight:700; margin:.4em 0 .7em; font-size:.86rem; color:var(--ink); }
.rating-row .count{ color:var(--ink-soft); font-weight:600; }
.features{ list-style:none; padding:0; margin:0 0 .8em; display:grid; gap:.3em; }
.features li{ display:flex; align-items:flex-start; gap:.55em; font-weight:600; font-size:.86rem; }
.features li .ic{ flex:none; }
.hero-cta{ display:flex; gap:.8em; flex-wrap:wrap; }
.hero .wrap > div:first-child{ order:2; }
.hero-art{ position:relative; order:1; }
@media (min-width: 861px){ .hero-art{ position:sticky; top:80px; max-height:calc(100vh - 96px); } }
.hero-art figure{
  position:relative; margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,20,40,.04); background:var(--bg-soft);
  animation: heroFade .5s var(--ease) both;
  max-height:min(52vh, 420px);
}
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }
.hero-art img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; max-height:min(52vh, 420px); transition:opacity .18s ease; }
.thumbs{ display:flex; gap:.5em; margin-top:.7em; }
.thumbs button{
  width:46px; height:46px; border-radius:9px; padding:0; overflow:hidden; cursor:pointer;
  border:1.5px solid var(--line); background:var(--card); flex:none; transition:border-color .18s ease, transform .18s var(--ease);
}
.thumbs button:hover{ transform:translateY(-1px); }
.thumbs button.active{ border-color:var(--navy); box-shadow:0 0 0 2px var(--periwinkle-soft); }
.thumbs img{ width:100%; height:100%; object-fit:cover; }

/* Trust strip */
.trust{ background:var(--bg-soft); }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; text-align:center; padding-block:1.3rem 1.5rem;}
.trust .item{ display:flex; flex-direction:column; align-items:center; gap:.4em; font-weight:700; font-size:.84rem; color:var(--ink-soft); transition:transform .2s var(--ease); }
.trust .item:hover{ transform:translateY(-2px); color:var(--ink); }
.trust .item .ic{ color:var(--navy); font-size:1.25rem; }

/* Ticker */
.ticker-wrap{ background:var(--navy-deep); overflow:hidden; padding-block:.65rem; }
.ticker{ display:flex; width:max-content; animation:scrollticker 32s linear infinite; }
.ticker span{ color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.02em; white-space:nowrap; padding-inline:1.5rem; display:flex; align-items:center; gap:.5em; }
.ticker span::after{ content:"•"; margin-left:1.5rem; color:var(--gold); }
@keyframes scrollticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker{ animation:none; overflow-x:auto; } }

/* Section heading center */
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* Bundles */
.bundles{ display:flex; flex-direction:column; gap:.5rem; margin-top:.9rem; }
.bundle{
  position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:.7rem .9rem .75rem; cursor:pointer; transition:border-color .18s ease, background .18s ease, box-shadow .18s var(--ease);
}
.bundle:hover{ border-color:var(--navy); }
.bundle.selected{ border-color:var(--navy); background:var(--periwinkle-soft); box-shadow:0 6px 18px -14px hsl(var(--shadow) / .5); }
.bundle .ribbon{
  display:inline-flex; background:var(--navy); color:#fff; margin-bottom:.5em;
  font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.25em .7em; border-radius:5px; white-space:nowrap;
}
.bundle-head{ display:flex; align-items:flex-start; gap:.7em; }
.bundle-name{ font-family:"Poppins",sans-serif; font-weight:700; font-size:1rem; }
.radio-dot{ width:19px; height:19px; margin-top:.15em; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex:none; transition:border-color .18s ease; background:var(--card); }
.bundle.selected .radio-dot{ border-color:var(--navy); }
.radio-dot::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--navy); transform:scale(0); transition:transform .18s var(--ease); }
.bundle.selected .radio-dot::after{ transform:scale(1); }
.save-tag{ display:inline-block; background:var(--sage); color:#fff; font-size:.7rem; font-weight:800; border-radius:5px; padding:.2em .5em; margin:.3em 0; }
.price-row{ display:flex; align-items:baseline; gap:.5em; margin:.2em 0; }
.price-row .now{ font-size:1.3rem; font-weight:700; color:var(--ink); }
.price-row .was{ text-decoration:line-through; color:var(--ink-soft); font-size:.85rem; }
.bundle .gift{ font-size:.76rem; color:var(--navy); font-weight:700; }
.bundle .shipfree{ font-size:.7rem; color:var(--sage); font-weight:800; margin-top:.15em; }

.bundle-options{ display:none; margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--line); gap:.5rem; }
.bundle.selected .bundle-options{ display:grid; animation:optsIn .22s var(--ease) both; }
@keyframes optsIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }
.variant-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.variant-row .field label{ font-size:.7rem; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:.3em; }
.variant-row select{
  width:100%; font-family:"Inter",sans-serif; font-weight:600; padding:.5em .65em; border-radius:8px;
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color .18s ease;
}
.variant-row select:hover{ border-color:var(--navy); }
.addon{ display:flex; align-items:center; gap:.55em; font-size:.83rem; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.addon input{ width:16px; height:16px; accent-color:var(--navy); flex:none; }
.addon .addon-price{ margin-left:auto; color:var(--ink); font-weight:700; }

.viewing-row{ display:flex; align-items:center; gap:.6em; font-size:.78rem; color:var(--ink-soft); margin-top:.55rem; font-weight:600; }
.viewing-dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); position:relative; flex:none; }
.viewing-dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; background:var(--sage); opacity:.4; animation:pulseDot 1.8s ease-out infinite; }
@keyframes pulseDot{ 0%{ transform:scale(.6); opacity:.5; } 100%{ transform:scale(2.4); opacity:0; } }

.mini-reviews{ display:flex; flex-direction:column; gap:.5rem; margin-top:.9rem; }
.mini-review{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .85rem; }
.mini-review .stars{ font-size:.78rem; }
.mini-review p{ margin:.3em 0; font-size:.82rem; color:var(--ink); }
.mini-review .who{ display:flex; align-items:center; gap:.5em; margin-top:.3em; }
.mini-review .who img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.mini-review .who .name{ font-weight:700; font-size:.78rem; }

.trust-carousel-wrap{ margin-top:1.8rem; }
.trust-carousel{ display:flex; gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.3rem; scrollbar-width:none; }
.trust-carousel::-webkit-scrollbar{ display:none; }
.trust-card{ flex:0 0 82%; scroll-snap-align:start; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; }
.trust-card h4{ font-family:"Poppins",sans-serif; font-size:.92rem; margin:0 0 .35em; display:flex; align-items:center; gap:.5em; }
.trust-card p{ font-size:.83rem; color:var(--ink-soft); margin:0; }
.trust-nav{ display:flex; gap:.5em; justify-content:flex-end; margin-top:.6em; }
.trust-nav button{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); cursor:pointer;
  display:grid; place-items:center; color:var(--ink); transition:background .15s ease, transform .15s ease;
}
.trust-nav button:hover{ background:var(--bg-soft); border-color:var(--navy); }
@media (min-width: 700px){ .trust-card{ flex:0 0 46%; } }
/* Cart drawer */
.cart-overlay{
  position:fixed; inset:0; background:rgba(10,14,30,.4); z-index:70; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px, 92vw); background:var(--bg); z-index:71;
  box-shadow:-20px 0 40px -20px rgba(0,0,0,.35); transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.cart-head h3{ font-family:"Poppins",sans-serif; font-size:1.25rem; font-weight:800; margin:0; }
.cart-close{ background:none; border:none; cursor:pointer; color:var(--ink); padding:.3em; transition:color .15s ease; }
.cart-close:hover{ color:var(--navy); }

.cart-reserved{
  background:var(--navy); color:#fff; text-align:center; font-weight:700; font-size:.86rem;
  padding:.6em 1em; letter-spacing:.01em;
}
.cart-reserved .mono{ font-variant-numeric:tabular-nums; }

.cart-shipping{ padding:.9rem 1.3rem .3rem; }
.cart-shipping .label{ font-size:.8rem; font-weight:700; text-align:center; color:var(--ink); margin-bottom:.6em; }
.cart-shipping .bar{
  position:relative; height:10px; border-radius:999px; overflow:hidden; background:var(--periwinkle-soft);
}
.cart-shipping .bar .fill{
  position:absolute; inset:0; width:100%; border-radius:999px;
  background:repeating-linear-gradient(45deg, var(--navy), var(--navy) 8px, var(--navy-deep) 8px, var(--navy-deep) 16px);
}
.cart-shipping .truck{
  position:absolute; right:-2px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%;
  background:var(--card); border:2px solid var(--navy); color:var(--navy); display:grid; place-items:center;
}

.cart-body{ flex:1; overflow-y:auto; padding:.5rem 1.3rem 1rem; }
.cart-empty{ text-align:center; color:var(--ink-soft); padding:3rem 1rem; font-size:.92rem; }
.cart-empty .ic{ font-size:2.4rem; display:block; margin-bottom:.5em; }

.cart-line{ display:flex; gap:.9em; padding:1em 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.cart-line:last-child{ border-bottom:none; }
.cart-line .thumb{
  width:64px; height:64px; border-radius:10px; object-fit:cover; flex:none;
  border:1px solid var(--line); background:var(--bg-soft);
}
.cart-line .info{ flex:1; min-width:0; }
.cart-line .name{ font-weight:700; font-size:.92rem; line-height:1.3; }
.cart-line .variant{ color:var(--ink-soft); font-size:.78rem; margin-top:.25em; }
.cart-line .price-row{ display:flex; align-items:baseline; gap:.5em; margin-top:.4em; flex-wrap:wrap; }
.cart-line .price-row .was{ text-decoration:line-through; color:var(--ink-soft); font-size:.8rem; }
.cart-line .price-row .now{ color:var(--ink); font-weight:700; font-size:.92rem; }
.cart-line .savings{ color:var(--sage); font-size:.76rem; font-weight:700; margin-top:.15em; }
.cart-line .tag{
  display:inline-flex; align-items:center; gap:.3em; margin-top:.5em; font-size:.72rem; font-weight:700;
  color:var(--navy); background:var(--periwinkle-soft); padding:.2em .55em; border-radius:5px;
}
.cart-line .stepper{ display:flex; align-items:center; gap:.6em; margin-top:.6em; }
.cart-line .stepper .qty-box{
  display:flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; overflow:hidden;
}
.cart-line .stepper button{
  background:none; border:none; width:28px; height:28px; cursor:pointer; color:var(--ink); font-size:1rem;
  display:grid; place-items:center; transition:background .15s ease;
}
.cart-line .stepper button:hover{ background:var(--bg-soft); }
.cart-line .stepper .qty-num{ width:26px; text-align:center; font-weight:700; font-size:.85rem; }
.cart-line .remove{
  background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:.4em; flex:none;
  transition:color .15s ease, background .15s ease; border-radius:6px;
}
.cart-line .remove:hover{ color:var(--rose, #C06B52); background:var(--bg-soft); }
.cart-line.gift .price-row .now{ color:var(--sage); }

.cart-foot{ border-top:1px solid var(--line); padding:1rem 1.3rem 1.2rem; }
.cart-subtotal{ display:flex; justify-content:space-between; align-items:baseline; font-family:"Poppins",sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:.4em; }
.cart-subtotal .save{ font-size:.76rem; color:var(--sage); font-weight:700; }
.cart-note{ font-size:.75rem; color:var(--ink-soft); text-align:center; margin-top:.7em; }
.cart-trust{ display:flex; align-items:center; justify-content:center; gap:.5em; font-size:.82rem; font-weight:700; color:var(--ink-soft); margin-top:.9em; }
.cart-trust .stars{ color:var(--gold); font-size:.82rem; }

#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 140%); background:var(--navy-deep); color:#fff;
  padding:.85em 1.3em; border-radius:10px; font-weight:700; font-size:.88rem; box-shadow:0 14px 30px -12px rgba(0,0,0,.35);
  transition:transform .3s var(--ease); z-index:60; display:flex; align-items:center; gap:.5em; max-width:90vw; text-align:center;
}
#toast.show{ transform:translate(-50%, 0); }

/* Shop / category grid */
.filter-pills{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1.8rem 0 2rem; }
.filter-pill{
  padding:.5em 1.1em; border-radius:999px; border:1.5px solid var(--line); background:var(--card);
  font-weight:700; font-size:.85rem; cursor:pointer; color:var(--ink-soft); transition:all .15s ease; font-family:"Inter",sans-serif;
}
.filter-pill:hover{ border-color:var(--navy); color:var(--navy); }
.filter-pill.active{ border-color:var(--navy); color:#fff; background:var(--navy); }

.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.product-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -20px hsl(var(--shadow) / .4); border-color:var(--navy); }
.product-card .shot{ aspect-ratio:1/1; overflow:hidden; background:var(--bg-soft); position:relative; }
.product-card .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.product-card:hover .shot img{ transform:scale(1.05); }
.product-card .badge{
  position:absolute; top:10px; left:10px; background:var(--navy); color:#fff; font-size:.66rem; font-weight:800;
  padding:.3em .7em; border-radius:6px; letter-spacing:.03em; text-transform:uppercase;
}
.product-card .info{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35em; flex:1; }
.product-card .cat{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); }
.product-card h3{ font-family:"Poppins",sans-serif; font-size:1.02rem; margin:0; }
.product-card .stars-row{ font-size:.8rem; color:var(--ink-soft); display:flex; align-items:center; gap:.4em; }
.product-card .price-row{ margin-top:auto; padding-top:.3em; }
.product-card .price-row .now{ font-size:1.15rem; }

.product-card.disabled{ cursor:default; pointer-events:none; opacity:.72; }
.product-card.disabled .shot{ display:flex; align-items:center; justify-content:center; }
.product-card.disabled .shot .placeholder-ic{ font-size:2.4rem; opacity:.5; }
.product-card.disabled .badge{ background:var(--ink-soft); }
.product-card.disabled .info .cat{ color:var(--ink-soft); }

@media (max-width:860px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .shop-grid{ grid-template-columns:1fr; } }

/* Size guide */
.sizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.size-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.3rem; text-align:center; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s ease; }
.size-card:hover{ transform:translateY(-3px); border-color:var(--navy); }
.size-letter{ font-family:"Poppins",sans-serif; font-size:1.9rem; font-weight:800; color:var(--navy); line-height:1; }
.size-card .range{ font-weight:700; margin:.4em 0 .2em; }
.size-card .ex{ color:var(--ink-soft); font-size:.86rem; }

/* Compare table */
.compare{ margin-top:2rem; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; overflow-x:auto; }
.compare table{ width:100%; border-collapse:collapse; }
.compare th, .compare td{ padding:.9em 1.1em; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; }
.compare thead th{ font-family:"Poppins",sans-serif; font-size:.95rem; background:var(--bg-soft); }
.compare th:nth-child(2), .compare td:nth-child(2), .compare th:nth-child(3), .compare td:nth-child(3){ text-align:center; width:120px; }
.compare tbody tr{ transition:background .15s ease; }
.compare tbody tr:hover{ background:var(--bg-soft); }
.compare tbody tr:last-child td{ border-bottom:none; }
.yes{ color:var(--sage); font-weight:900; font-size:1.05rem; }
.no{ color:var(--ink-soft); opacity:.5; font-weight:900; font-size:1.05rem; }
.brandcol{ font-weight:800; color:var(--navy); }

/* Reviews */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2rem; }
.review{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.4rem; display:flex; flex-direction:column; gap:.7em; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.review:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -20px hsl(var(--shadow) / .4); }
.review .stars{ font-size:.92rem; }
.review p{ margin:0; font-size:.95rem; color:var(--ink); }
.review .who{ display:flex; align-items:center; gap:.7em; margin-top:auto; padding-top:.4em; }
.review .who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.review .who .name{ font-weight:700; font-size:.9rem; }
.review .who .verified{ font-size:.72rem; color:var(--sage); font-weight:700; }

.photo-wall-head{ margin-top:3rem; }
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.7rem; }
.photo-review{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .18s var(--ease), box-shadow .18s var(--ease), opacity .35s ease; }
.photo-review:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -20px hsl(var(--shadow) / .4); }
.photo-review .shot{ aspect-ratio:4/3; overflow:hidden; }
.photo-review .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.photo-review:hover .shot img{ transform:scale(1.05); }
.photo-review .body{ padding:1rem 1.1rem 1.1rem; }
.photo-review .stars{ font-size:.8rem; }
.photo-review p{ margin:.4em 0 .6em; font-size:.88rem; color:var(--ink); }
.photo-review .name{ font-weight:700; font-size:.8rem; color:var(--ink-soft); }
.photo-review[hidden]{ display:none; }
.show-more-wrap{ text-align:center; margin-top:2rem; }

/* Guarantee band (plain centered paragraph, like the source theme) */
.guarantee{ color:var(--ink); }
.guarantee .wrap{ max-width:760px; text-align:center; padding-block:2.4rem; }
.guarantee svg{ margin-bottom:.6rem; color:var(--navy); }
.guarantee h2{ color:var(--ink); }
.guarantee p{ color:var(--ink-soft); }

/* FAQ (custom smooth accordion, periwinkle band like source theme) */
#faq{ background:var(--periwinkle); }
#faq .eyebrow{ color:var(--navy-deep); }
.faq{ max-width:760px; margin-inline:auto; margin-top:1.6rem; display:grid; gap:0; border-top:1px solid rgba(20,26,59,.15); }
.faq-item{ border-bottom:1px solid rgba(20,26,59,.15); padding:0; }
.faq-q{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%; font-family:"Poppins",sans-serif; font-weight:700; color:var(--ink);
  padding:.75em .2em; display:flex; justify-content:space-between; align-items:center; gap:1em; font-size:.92rem;
}
.faq-q .chev{ transition:transform .3s var(--ease); flex:none; color:var(--navy-deep); }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a{ padding:0 .2em .85em; color:var(--ink); opacity:.8; font-size:.85rem; }

/* Simple content pages */
.page-simple{ max-width:760px; margin-inline:auto; }
.page-simple h1{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:.2em; font-weight:700; }
.page-simple .updated{ color:var(--ink-soft); font-size:.85rem; margin-bottom:2em; }
.page-simple h2{ font-size:1.15rem; margin-top:1.8em; margin-bottom:.4em; font-family:"Poppins",sans-serif; }
.page-simple p, .page-simple li{ color:var(--ink-soft); font-size:.96rem; }
.page-simple ul{ padding-left:1.2em; }
.page-simple a.link{ color:var(--navy); font-weight:700; text-decoration:underline; }

.form-grid{ display:grid; gap:1rem; margin-top:1.6rem; max-width:520px; }
.form-grid.two{ grid-template-columns:1fr 1fr; }
.field{ display:grid; gap:.4em; }
.field label{ font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.field input, .field textarea{
  font-family:"Inter",sans-serif; font-size:.95rem; padding:.75em .9em; border-radius:10px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px hsl(var(--shadow) / .12); }
.contact-card{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.contact-info{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:1.6rem; }
.contact-info h3{ font-family:"Poppins",sans-serif; margin:0 0 .5em; }
.contact-info p{ color:var(--ink-soft); font-size:.95rem; margin:.3em 0; }

.track-result{
  margin-top:1.5rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:1.3rem;
  display:grid; gap:.6em; opacity:0; max-height:0; overflow:hidden; transition:opacity .3s ease, max-height .35s var(--ease), padding .35s var(--ease);
}
.track-result.show{ opacity:1; max-height:300px; padding:1.3rem; }
.track-step{ display:flex; align-items:center; gap:.7em; font-weight:600; font-size:.9rem; color:var(--ink-soft); }
.track-step .dot{ width:10px; height:10px; border-radius:50%; background:var(--line); flex:none; }
.track-step.active .dot{ background:var(--sage); }
.track-step.active{ color:var(--ink); }

/* Footer */
footer{ background:var(--bg-soft); margin-top:3rem; border-top:1px solid var(--line); }
footer .wrap{ padding-block:3rem 2rem; display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:2rem; }
footer .brand .word{ font-size:1.35rem; }
footer .tagline{ color:var(--ink-soft); font-size:.9rem; margin-top:.6em; max-width:26ch; }
footer h4{ font-family:"Poppins",sans-serif; font-size:.92rem; margin:0 0 .8em; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55em; }
footer a{ text-decoration:none; color:var(--ink-soft); font-size:.9rem; cursor:pointer; transition:color .15s ease; }
footer a:hover{ color:var(--navy); }
.bottom-bar{ border-top:1px solid var(--line); text-align:center; padding:1.2em; font-size:.8rem; color:var(--ink-soft); }

@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:none; margin-inline:0; }
  .trust .wrap{ grid-template-columns:repeat(2,1fr); }
  .sizes{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
  .compare th:nth-child(3), .compare td:nth-child(3){ width:auto; }
  footer .wrap{ grid-template-columns:1fr 1fr; }
  .contact-card{ grid-template-columns:1fr; }
  .form-grid.two{ grid-template-columns:1fr; }

  /* Product page: center the info column like the source theme's mobile layout */
  .hero .wrap > div:first-child{ text-align:center; }
  .hero .wrap > div:first-child .rating-row,
  .hero .wrap > div:first-child .hero-cta{ justify-content:center; }
  .hero .wrap > div:first-child .features{ align-items:center; }
  .hero .wrap > div:first-child .features li{ justify-content:center; text-align:left; }
  .hero .wrap > div:first-child .lede{ margin-inline:auto; }
  .product-topbar{ text-align:center; }
}
@media (max-width: 520px){
  .photo-grid{ grid-template-columns:1fr 1fr; }
}