/* ===========================================================================
   Arizen Supplies — Storefront Styles
   Premium dog-supply brand aesthetic: warm spruce + clay, Fraunces + Inter.
   =========================================================================== */

:root{
  --ink:#1b211e; --ink-soft:#41514a; --muted:#6f7d75;
  --line:#e8e1d4; --line-2:#f0eadf;
  --cream:#faf6ef; --sand:#f3ecdf; --card:#ffffff;
  --brand:#1f4d42; --brand-700:#163a31; --brand-200:#d6e4dd; --brand-50:#eef4f1;
  --accent:#ef6c3b; --accent-700:#d4561f; --accent-100:#fce4d9;
  --gold:#e8a838; --good:#2f8f6b;
  --shadow-sm:0 1px 3px rgba(27,33,30,.06), 0 1px 2px rgba(27,33,30,.04);
  --shadow:0 12px 30px -14px rgba(27,33,30,.22);
  --shadow-lg:0 28px 60px -26px rgba(27,33,30,.38);
  --radius:16px; --radius-lg:24px; --radius-pill:999px;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ff-display:"Fraunces",Georgia,serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--cream);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,textarea,select{font-family:inherit; font-size:1rem}
ul{list-style:none; padding:0}

h1,h2,h3,h4{font-family:var(--ff-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--ink)}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.25rem}
.eyebrow{font-family:var(--ff-body); font-weight:700; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-700)}
.lede{font-size:1.1rem; color:var(--ink-soft); max-width:56ch}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.center{text-align:center}
.section-head{max-width:62ch}
.section-head.center{margin-inline:auto}
.section-head h2{margin-top:.5rem}
.section-head p{margin-top:.8rem; color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:.97rem; padding:.85rem 1.6rem; border-radius:var(--radius-pill);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:#fff; box-shadow:0 10px 22px -10px rgba(239,108,59,.7)}
.btn--primary:hover{background:var(--accent-700); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(239,108,59,.75)}
.btn--dark{background:var(--brand); color:#fff}
.btn--dark:hover{background:var(--brand-700); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:#fff}
.btn--light{background:#fff; color:var(--brand-700); box-shadow:var(--shadow-sm)}
.btn--light:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn--block{display:flex; width:100%}
.btn--lg{padding:1.05rem 2rem; font-size:1.02rem}
.btn--sm{padding:.6rem 1.1rem; font-size:.85rem}
.btn svg{width:1.15em; height:1.15em; flex:none}

/* ---------- Announcement bar ---------- */
.announce{background:var(--brand-700); color:#eaf3ef; font-size:.82rem; letter-spacing:.02em}
.announce__track{display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.55rem 1rem; text-align:center; font-weight:500}
.announce strong{color:#fff}
.announce__dot{opacity:.45}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(250,246,239,.85);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.header__inner{display:flex; align-items:center; gap:1.4rem; height:72px}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--ff-display);
  font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:var(--brand-700)}
.brand svg{width:30px; height:30px; flex:none}
.brand small{display:block; font-family:var(--ff-body); font-weight:600; font-size:.56rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:-3px}
.nav{display:flex; align-items:center; gap:1.6rem; margin-left:1rem}
.nav a{font-weight:500; font-size:.95rem; color:var(--ink-soft); position:relative; padding-block:.3rem}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--accent); transition:right .3s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.header__actions{margin-left:auto; display:flex; align-items:center; gap:.4rem}
.icon-btn{width:42px; height:42px; border-radius:var(--radius-pill); display:grid; place-items:center;
  color:var(--ink); transition:background .2s, transform .2s}
.icon-btn:hover{background:var(--sand); transform:translateY(-1px)}
.icon-btn svg{width:21px; height:21px}
.cart-btn{position:relative}
.cart-count{position:absolute; top:3px; right:2px; min-width:18px; height:18px; padding:0 4px;
  background:var(--accent); color:#fff; font-size:.66rem; font-weight:700; border-radius:999px;
  display:grid; place-items:center; line-height:1; transform:scale(0); transition:transform .3s var(--ease)}
.cart-count.show{transform:scale(1)}
.menu-toggle{display:none}

/* ---------- Mobile nav ---------- */
.mobile-nav{position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--cream);
  z-index:90; transform:translateX(100%); transition:transform .4s var(--ease);
  padding:1.4rem; display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{padding:.9rem .4rem; font-size:1.1rem; font-weight:500; border-bottom:1px solid var(--line)}
.mobile-nav__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:clamp(520px,72vh,760px); display:flex; align-items:center;
  color:#fff; overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:-2}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 35%}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(22,40,33,.82) 0%, rgba(22,40,33,.5) 45%, rgba(22,40,33,.15) 100%)}
.hero__inner{max-width:640px; padding-block:3rem}
.hero .eyebrow{color:#ffd9c6}
.hero h1{color:#fff; margin:.7rem 0 1rem}
.hero p{font-size:1.18rem; color:rgba(255,255,255,.92); max-width:48ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem}
.hero__trust{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2rem; font-size:.9rem; color:rgba(255,255,255,.9)}
.hero__trust span{display:flex; align-items:center; gap:.45rem}
.hero__trust svg{width:18px; height:18px; color:#ffd9c6}
.stars{color:var(--gold); letter-spacing:1px; font-size:.95rem}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--brand); color:#eaf3ef}
.trustbar__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:1.4rem}
.trustbar__item{display:flex; align-items:center; gap:.75rem; justify-content:center; text-align:left}
.trustbar__item svg{width:26px; height:26px; color:#ffd9c6; flex:none}
.trustbar__item b{display:block; font-size:.92rem; color:#fff}
.trustbar__item span{font-size:.78rem; color:rgba(255,255,255,.72)}

/* ---------- Category grid ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.2rem}
.cat-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/.78;
  box-shadow:var(--shadow-sm); color:#fff; isolation:isolate}
.cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease)}
.cat-card::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,33,28,.82), rgba(20,33,28,.05) 65%)}
.cat-card>div{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.2rem 1.3rem}
.cat-card h3{color:#fff; font-size:1.35rem}
.cat-card p{font-size:.85rem; color:rgba(255,255,255,.85)}
.cat-card .cat-go{margin-top:.5rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; opacity:0; transform:translateX(-6px); transition:.3s var(--ease)}
.cat-card .cat-go svg{width:16px; height:16px; flex:none}
.cat-card:hover img{transform:scale(1.07)}
.cat-card:hover .cat-go{opacity:1; transform:none}

/* ---------- Product cards ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem}
.prod-grid--3{grid-template-columns:repeat(3,1fr)}
.prod-card{background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s}
.prod-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:#fff}
.prod-card__media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--sand); display:block}
.prod-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease), transform .8s var(--ease)}
.prod-card__media img.alt{opacity:0}
.prod-card:hover .prod-card__media img.main{opacity:0}
.prod-card:hover .prod-card__media img.alt{opacity:1; transform:scale(1.05)}
.badge{position:absolute; top:.7rem; left:.7rem; z-index:3; background:var(--ink); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.34rem .6rem; border-radius:8px}
.badge--accent{background:var(--accent)}
.badge--save{position:absolute; top:.7rem; right:.7rem; left:auto; background:var(--brand)}
.quick-add{position:absolute; left:.7rem; right:.7rem; bottom:.7rem; z-index:3;
  opacity:0; transform:translateY(8px); transition:.3s var(--ease)}
.prod-card:hover .quick-add{opacity:1; transform:none}
.prod-card__body{padding:1rem 1.05rem 1.15rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.prod-card__cat{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.prod-card__title{font-family:var(--ff-body); font-weight:600; font-size:1rem; line-height:1.3; color:var(--ink)}
.prod-card__title a:hover{color:var(--brand)}
.rating{display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted)}
.prod-card__foot{margin-top:auto; display:flex; align-items:center; gap:.55rem; padding-top:.5rem}
.price{font-weight:700; font-size:1.18rem; color:var(--ink)}
.price-old{color:var(--muted); text-decoration:line-through; font-size:.92rem; font-weight:500}

/* ---------- Spotlight ---------- */
.spotlight{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.spotlight__media{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.4;
  box-shadow:var(--shadow)}
.spotlight__media img{width:100%; height:100%; object-fit:cover}
.spotlight__tag{position:absolute; top:1rem; left:1rem; background:#fff; color:var(--accent-700);
  font-weight:700; font-size:.78rem; padding:.45rem .9rem; border-radius:999px; box-shadow:var(--shadow-sm)}
.spotlight ul{margin:1.4rem 0; display:grid; gap:.7rem}
.spotlight li{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft)}
.spotlight li svg{width:22px; height:22px; color:var(--good); flex:none; margin-top:1px}
.spotlight__buy{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem}
.spotlight__price{display:flex; align-items:baseline; gap:.6rem}
.spotlight__price .price{font-size:1.7rem}

/* ---------- Benefits band ---------- */
.benefits{background:var(--sand)}
.benefits__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.4rem}
.benefit{background:var(--card); border-radius:var(--radius); padding:1.8rem 1.6rem; box-shadow:var(--shadow-sm)}
.benefit__ic{width:52px; height:52px; border-radius:14px; background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center; margin-bottom:1rem}
.benefit__ic svg{width:26px; height:26px}
.benefit h3{font-family:var(--ff-body); font-weight:700; font-size:1.05rem; margin-bottom:.35rem}
.benefit p{font-size:.93rem; color:var(--ink-soft)}

/* ---------- Brand story ---------- */
.brandstory{position:relative; overflow:hidden; border-radius:var(--radius-lg); color:#fff;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.brandstory__img{position:relative; min-height:340px}
.brandstory__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.brandstory__body{background:var(--brand-700); padding:clamp(2rem,5vw,3.6rem)}
.brandstory__body .eyebrow{color:#ffd9c6}
.brandstory__body h2{color:#fff; margin:.6rem 0 1rem}
.brandstory__body p{color:rgba(255,255,255,.88)}
.brandstory__stats{display:flex; gap:2rem; margin:1.6rem 0}
.brandstory__stats b{font-family:var(--ff-display); font-size:1.9rem; display:block; line-height:1}
.brandstory__stats span{font-size:.82rem; color:rgba(255,255,255,.7)}

/* ---------- Reviews ---------- */
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.4rem}
.review{background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius); padding:1.6rem}
.review .stars{font-size:1rem; margin-bottom:.6rem}
.review p{color:var(--ink); font-size:.97rem}
.review__by{display:flex; align-items:center; gap:.7rem; margin-top:1.2rem}
.review__by img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.review__by b{font-size:.92rem} .review__by span{font-size:.8rem; color:var(--muted)}
.verified{margin-left:auto; font-size:.72rem; font-weight:600; color:var(--good); display:flex; align-items:center; gap:.3rem}
.verified svg{width:14px; height:14px; flex:none}

/* ---------- Newsletter ---------- */
.newsletter{background:linear-gradient(120deg,var(--brand) 0%,var(--brand-700) 100%); color:#fff;
  border-radius:var(--radius-lg); padding:clamp(2rem,5vw,3.6rem); text-align:center}
.newsletter h2{color:#fff}
.newsletter p{color:rgba(255,255,255,.85); margin:.7rem auto 0; max-width:46ch}
.newsletter form{display:flex; gap:.6rem; max-width:460px; margin:1.6rem auto 0}
.newsletter input{flex:1; padding:.95rem 1.2rem; border-radius:var(--radius-pill); border:none; color:var(--ink)}
.newsletter small{display:block; margin-top:.9rem; font-size:.78rem; color:rgba(255,255,255,.6)}

/* ---------- Insta strip ---------- */
.gram{display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem}
.gram a{aspect-ratio:1/1; border-radius:12px; overflow:hidden; position:relative}
.gram img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.gram a:hover img{transform:scale(1.1)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#c9d4ce; margin-top:2rem}
.footer__grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2rem; padding-block:3.4rem}
.footer__brand .brand{color:#fff}
.footer__brand p{font-size:.9rem; margin-top:1rem; max-width:32ch; color:#9fb0a8}
.footer__col h4{font-family:var(--ff-body); font-weight:700; font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; margin-bottom:1rem}
.footer__col a{display:block; padding:.32rem 0; font-size:.92rem; color:#a8b8b1; transition:color .2s}
.footer__col a:hover{color:#fff}
.footer__social{display:flex; gap:.6rem; margin-top:1.2rem}
.footer__social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:grid; place-items:center; padding:0}
.footer__social svg{width:18px; height:18px}
.footer__bar{border-top:1px solid rgba(255,255,255,.1); padding-block:1.2rem; display:flex;
  flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.82rem; color:#8fa39b}
.pay{display:flex; gap:.45rem; align-items:center}
.pay span{background:rgba(255,255,255,.92); color:#1b211e; font-weight:700; font-size:.62rem;
  padding:.28rem .5rem; border-radius:5px; letter-spacing:.02em}

/* ---------- Cart drawer ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,28,24,.5); opacity:0; visibility:hidden;
  transition:.35s var(--ease); z-index:80; backdrop-filter:blur(2px)}
.overlay.show{opacity:1; visibility:visible}
.cart-drawer{position:fixed; top:0; right:0; height:100%; width:min(92vw,420px); background:var(--cream);
  z-index:95; transform:translateX(100%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--line)}
.cart-drawer__head h3{font-family:var(--ff-display)}
.ship-bar{padding:1rem 1.4rem; background:var(--brand-50); font-size:.85rem}
.ship-bar__track{height:7px; background:var(--brand-200); border-radius:99px; margin-top:.55rem; overflow:hidden}
.ship-bar__fill{height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .5s var(--ease)}
.cart-items{flex:1; overflow-y:auto; padding:1rem 1.4rem; display:flex; flex-direction:column; gap:1rem}
.cart-empty{text-align:center; color:var(--muted); margin:auto; padding:2rem}
.cart-empty svg{width:54px; height:54px; color:var(--line); margin:0 auto 1rem}
.cart-line{display:grid; grid-template-columns:74px 1fr auto; gap:.9rem; align-items:center}
.cart-line img{width:74px; height:74px; object-fit:cover; border-radius:12px; background:var(--sand)}
.cart-line__t{font-weight:600; font-size:.92rem; line-height:1.25}
.cart-line__p{color:var(--muted); font-size:.85rem; margin-top:.15rem}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:99px; margin-top:.45rem}
.qty button{width:28px; height:28px; display:grid; place-items:center; color:var(--ink-soft); font-size:1rem}
.qty button:hover{color:var(--accent)}
.qty span{min-width:24px; text-align:center; font-size:.88rem; font-weight:600}
.cart-line__x{align-self:flex-start; color:var(--muted); font-size:.78rem}
.cart-line__x:hover{color:var(--accent)}
.cart-drawer__foot{border-top:1px solid var(--line); padding:1.2rem 1.4rem; background:var(--cream)}
.cart-sub{display:flex; justify-content:space-between; font-weight:600; margin-bottom:.3rem}
.cart-sub .price{font-size:1.3rem}
.cart-note{font-size:.78rem; color:var(--muted); text-align:center; margin-top:.7rem}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:1.4rem; left:50%; transform:translate(-50%,140%);
  background:var(--ink); color:#fff; padding:.85rem 1.3rem; border-radius:var(--radius-pill);
  display:flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:500; z-index:120;
  box-shadow:var(--shadow-lg); transition:transform .4s var(--ease); max-width:90vw}
.toast.show{transform:translate(-50%,0)}
.toast svg{width:20px; height:20px; color:#7bd6ad; flex:none}

/* ---------- Page hero (sub pages) ---------- */
.page-hero{background:var(--sand); border-bottom:1px solid var(--line); padding-block:clamp(2.4rem,5vw,3.6rem)}
.crumbs{font-size:.82rem; color:var(--muted); margin-bottom:.5rem}
.crumbs a:hover{color:var(--accent)}

/* ---------- Shop / filters ---------- */
.shop-layout{display:grid; grid-template-columns:230px 1fr; gap:2.4rem; align-items:start}
.filters{position:sticky; top:90px}
.filters h4{font-family:var(--ff-body); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:1.4rem 0 .7rem}
.filters h4:first-child{margin-top:0}
.filter-btn{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  padding:.55rem .8rem; border-radius:10px; font-size:.94rem; color:var(--ink-soft); transition:.2s}
.filter-btn:hover{background:var(--sand); color:var(--ink)}
.filter-btn.active{background:var(--brand); color:#fff; font-weight:600}
.filter-btn span{font-size:.78rem; opacity:.7}
.shop-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; gap:1rem; flex-wrap:wrap}
.shop-toolbar select{padding:.6rem .9rem; border:1px solid var(--line); border-radius:10px; background:#fff}
.filter-toggle{display:none}

/* ---------- Product detail ---------- */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:start}
.gallery__main{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; background:var(--sand); box-shadow:var(--shadow-sm)}
.gallery__main img{width:100%; height:100%; object-fit:cover}
.gallery__thumbs{display:flex; gap:.7rem; margin-top:.8rem}
.gallery__thumbs button{width:78px; height:78px; border-radius:12px; overflow:hidden; border:2px solid transparent}
.gallery__thumbs button.active{border-color:var(--brand)}
.gallery__thumbs img{width:100%; height:100%; object-fit:cover}
.pdp__info .pdp-cat{font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-700)}
.pdp__info h1{font-size:clamp(1.9rem,3.5vw,2.6rem); margin:.5rem 0 .7rem}
.pdp-rating{display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; margin-bottom:1rem}
.pdp-price{display:flex; align-items:baseline; gap:.7rem; margin-bottom:.4rem}
.pdp-price .price{font-size:2rem}
.pdp-save{background:var(--accent-100); color:var(--accent-700); font-weight:700; font-size:.78rem;
  padding:.3rem .65rem; border-radius:8px}
.pdp__desc{color:var(--ink-soft); margin:1.1rem 0 1.4rem}
.pdp-features{display:grid; gap:.6rem; margin:1.2rem 0 1.6rem}
.pdp-features li{display:flex; gap:.65rem; align-items:flex-start}
.pdp-features svg{width:21px; height:21px; color:var(--good); flex:none; margin-top:2px}
.pdp-buy{display:flex; gap:.8rem; align-items:stretch; margin-bottom:1.2rem}
.pdp-buy .qty{margin-top:0; border-radius:var(--radius-pill)}
.pdp-buy .qty button{width:42px; height:auto}
.pdp-perks{display:grid; gap:.55rem; border-top:1px solid var(--line); padding-top:1.3rem; margin-top:.4rem}
.pdp-perks li{display:flex; gap:.6rem; align-items:center; font-size:.9rem; color:var(--ink-soft)}
.pdp-perks svg{width:19px; height:19px; color:var(--brand)}
.tag-row{display:flex; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 1.2rem}
.tag{background:var(--sand); color:var(--ink-soft); font-size:.78rem; font-weight:600; padding:.35rem .75rem; border-radius:99px}

/* ---------- Forms ---------- */
.form-card{background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow-sm)}
.field{margin-bottom:1rem}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%; padding:.8rem 1rem; border:1px solid var(--line);
  border-radius:10px; background:#fff; transition:border .2s, box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-50)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.checkout-layout{display:grid; grid-template-columns:1.3fr .9fr; gap:2.2rem; align-items:start}
.summary{position:sticky; top:90px; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm)}
.summary__line{display:flex; justify-content:space-between; padding:.4rem 0; font-size:.92rem; color:var(--ink-soft)}
.summary__items{display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.2rem; max-height:300px; overflow:auto}
.summary__item{display:grid; grid-template-columns:54px 1fr auto; gap:.7rem; align-items:center; font-size:.88rem}
.summary__item img{width:54px; height:54px; border-radius:10px; object-fit:cover}
.summary__total{display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:.6rem; padding-top:.9rem; font-weight:700; font-size:1.1rem}
.notice{background:var(--brand-50); border:1px dashed var(--brand-200); color:var(--brand-700);
  padding:.85rem 1rem; border-radius:12px; font-size:.84rem; margin-top:1rem; display:flex; gap:.6rem}
.notice svg{width:20px;height:20px;flex:none}
.confirm-ic svg{width:34px; height:34px}

/* ---------- Misc ---------- */
.muted{color:var(--muted)} .accent{color:var(--accent-700)}
.divider{height:1px; background:var(--line); border:0; margin:0}
.prose p{margin-bottom:1rem; color:var(--ink-soft)} .prose h3{margin:1.6rem 0 .6rem}
.empty-state{text-align:center; padding:4rem 1rem; color:var(--muted)}
.skeleton{background:linear-gradient(90deg,var(--sand) 25%,var(--line-2) 37%,var(--sand) 63%);
  background-size:400% 100%; animation:sk 1.4s infinite; border-radius:var(--radius)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.shot .reveal{opacity:1!important; transform:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .gram{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .nav{display:none}
  .menu-toggle{display:grid}
  .trustbar__grid{grid-template-columns:1fr 1fr; gap:1.2rem}
  .cat-grid{grid-template-columns:1fr 1fr}
  .spotlight,.brandstory,.pdp,.checkout-layout{grid-template-columns:1fr}
  .brandstory__img{min-height:260px}
  .benefits__grid,.reviews-grid{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static; display:none; margin-bottom:1.4rem}
  .filters.open{display:block}
  .filter-toggle{display:inline-flex}
}
@media (max-width:560px){
  .prod-grid,.prod-grid--3{grid-template-columns:repeat(2,1fr); gap:.8rem}
  .cat-grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .gram{grid-template-columns:repeat(3,1fr)}
  .field-row{grid-template-columns:1fr}
  .hero__trust{gap:.8rem 1.2rem}
  .prod-card__body{padding:.8rem}
  .price{font-size:1.05rem}
}