/* ============================================================================
   PIGMENT — Peintures & Matériel · Maquette e-commerce (ALXCOMM)
   Design system : Meta commerce (Optimistic VF -> Montserrat), couleurs adaptées
   ----------------------------------------------------------------------------
   À PERSONNALISER FACILEMENT :
     • Marque ............ chercher .brand / "PIGMENT"
     • Téléphone/email ... footer
     • Palette pigment ... :root --primary (terracotta) + nuancier
     • Produits .......... data dans app.js (PRODUCTS)
   ============================================================================ */

/* ----------------------------------------------------------------- TOKENS -- */
:root{
  /* Brand & accent (cobalt Meta -> terracotta/pigment) */
  --primary:#C0492E;          /* buy-now CTA + accent pigment */
  --primary-deep:#9C3820;     /* pressed / lien actif */
  --primary-soft:#FAEEE8;     /* tint informatif */
  --primary-glow:#E2734F;

  /* Surfaces (canvas blanc chaud) */
  --canvas:#FFFFFF;
  --surface-soft:#F6F3EE;     /* soft cloud chaud */
  --surface-warm:#FBF8F3;
  --hairline:#E6E0D6;
  --hairline-soft:#F0EBE2;

  /* Texte */
  --ink-deep:#181513;
  --ink:#2B2622;
  --charcoal:#4A443D;
  --slate:#6A645B;
  --steel:#8C857B;
  --stone:#B4ADA2;
  --disabled-text:#CFC8BC;

  /* Boutons marketing (noir Meta -> encre chaude) */
  --ink-button:#181513;
  --on-ink-button:#FFFFFF;
  --on-primary:#FFFFFF;

  /* Sémantique */
  --success:#2F7A4F;
  --attention:#C98A2E;
  --warning:#E8B23C;          /* bannière promo (texte foncé) */
  --critical:#C5283D;
  --critical-strong:#A81E30;

  /* Rayons */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px;
  --r-xl:16px; --r-xxl:24px; --r-xxxl:32px; --r-feature:40px; --r-full:100px;

  /* Élévation (le système est plat ; ombre = signal d'achat) */
  --sh-tab:rgba(0,0,0,.2) 1px 1px 0 0;
  --sh-panel:rgba(20,22,26,.18) 0 8px 30px -10px;
  --sh-float:rgba(24,21,19,.22) 0 18px 50px -22px;

  --maxw:1280px;
  --nav-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- RESET ----- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Montserrat','Helvetica Neue',Arial,'Noto Sans',sans-serif;
  font-feature-settings:"ss01" on,"ss02" on;
  color:var(--ink);
  background:var(--surface-warm);
  line-height:1.5;
  letter-spacing:-.16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
input,select{font-family:inherit}

/* whisper-light grain pour l'atmosphère (le reste reste plat) */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- TYPOGRAPHIE ----- */
.t-hero{font-size:clamp(38px,5.6vw,64px);font-weight:500;line-height:1.08;letter-spacing:-1px}
.t-display{font-size:clamp(30px,3.6vw,48px);font-weight:500;line-height:1.14;letter-spacing:-.6px}
.t-h1{font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.18;letter-spacing:-.4px}
.t-h2{font-size:clamp(22px,2.2vw,28px);font-weight:300;line-height:1.2;letter-spacing:-.3px}
.t-h3{font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.3px}
.t-sub{font-size:18px;font-weight:400;line-height:1.44}
.t-sub-b{font-size:18px;font-weight:700;line-height:1.44}
.t-body{font-size:16px;font-weight:400;line-height:1.5}
.t-sm{font-size:14px;font-weight:400;line-height:1.43;letter-spacing:-.14px}
.t-sm-b{font-size:14px;font-weight:700;line-height:1.43;letter-spacing:-.14px}
.t-cap{font-size:12px;font-weight:400;line-height:1.33;letter-spacing:0}
.t-cap-b{font-size:12px;font-weight:700;line-height:1.33;letter-spacing:0}
.muted{color:var(--slate)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--primary)}

/* -------------------------------------------------------------- LAYOUT ----- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.section{padding:80px 0}
.section--tight{padding:56px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.section-head .eyebrow{margin-bottom:10px}
.flow>*+*{margin-top:14px}

/* ============================================================= BANNER ====== */
.promo-banner{
  background:var(--ink-deep);color:var(--on-ink-button);
  font-size:14px;font-weight:700;letter-spacing:-.14px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 24px;text-align:center;position:relative;z-index:60;
}
.promo-banner a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.promo-banner .dot{width:5px;height:5px;border-radius:50%;background:var(--primary-glow)}
.promo-banner__close{position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:.65;font-size:18px;line-height:1}
.promo-banner__close:hover{opacity:1}
@media(max-width:560px){.promo-banner{font-size:12px;padding:9px 36px 9px 16px}.promo-banner .seg2{display:none}}

/* ================================================================ NAV ====== */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline-soft);
}
.nav__row{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.brand{font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--ink-deep);display:flex;align-items:center;gap:9px}
.brand__mark{width:26px;height:26px;border-radius:7px;background:
  conic-gradient(from 210deg,var(--primary),#D8943B,#5E7C53,#3C5670,var(--primary));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.brand small{font-weight:600;font-size:11px;letter-spacing:.5px;color:var(--steel);text-transform:uppercase}

.nav__tabs{display:flex;gap:8px;margin-left:8px}
.tab{
  font-size:14px;font-weight:700;letter-spacing:-.14px;color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--r-full);
  padding:8px 16px;transition:.18s var(--ease);white-space:nowrap;
}
.tab:hover{border-color:var(--ink);transform:translateY(-1px)}
.tab.is-active{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}

.nav__spacer{flex:1}
.search-pill{
  display:flex;align-items:center;gap:8px;background:var(--surface-soft);
  border-radius:var(--r-full);height:40px;padding:0 16px;color:var(--steel);
  font-size:14px;min-width:210px;border:1px solid transparent;transition:.18s var(--ease);
}
.search-pill:focus-within{border-color:var(--primary);background:#fff;color:var(--ink)}
.search-pill input{border:none;background:none;outline:none;width:100%;font-size:14px;color:var(--ink)}
.icon-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--canvas);color:var(--ink);transition:.18s var(--ease);position:relative;
}
.icon-btn:hover{background:var(--surface-soft);transform:translateY(-1px)}
.icon-btn svg{width:21px;height:21px}
.cart-count{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  background:var(--primary);color:#fff;border-radius:var(--r-full);
  font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--canvas);transform:scale(0);transition:transform .25s var(--ease);
}
.cart-count.show{transform:scale(1)}
.cart-count.bump{animation:bump .4s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.nav__burger{display:none;width:42px;height:42px;border-radius:50%;place-items:center}
.nav__burger span{display:block;width:18px;height:2px;background:var(--ink-deep);border-radius:2px;position:relative}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink-deep);border-radius:2px}
.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}

/* ============================================================= BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:700;letter-spacing:-.14px;border-radius:var(--r-full);
  transition:.18s var(--ease);white-space:nowrap;line-height:1}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--ink-button);color:var(--on-ink-button);padding:14px 30px}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--sh-float)}
.btn--primary:active{background:var(--charcoal);transform:translateY(0)}
.btn--buy{background:var(--primary);color:var(--on-primary);padding:15px 30px;font-size:15px}
.btn--buy:hover{transform:translateY(-2px);box-shadow:0 16px 40px -16px rgba(192,73,46,.7)}
.btn--buy:active{background:var(--primary-deep);transform:translateY(0)}
.btn--secondary{background:transparent;color:var(--ink-deep);border:2px solid var(--ink-deep);padding:12px 28px}
.btn--secondary:hover{background:var(--ink-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--ink-deep);border:2px solid rgba(24,21,19,.14);padding:10px 22px}
.btn--ghost:hover{border-color:var(--ink-deep)}
.btn--block{width:100%}
.btn--lg{padding:17px 34px;font-size:16px}

/* =============================================================== HERO ====== */
.hero{position:relative;overflow:hidden;background:var(--surface-warm)}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(226,115,79,.5), transparent 55%),
    radial-gradient(90% 80% at 6% 92%, rgba(94,124,83,.42), transparent 55%),
    radial-gradient(80% 70% at 60% 100%, rgba(60,86,112,.32), transparent 60%),
    linear-gradient(160deg,#F8EFE2,#F2E6D4);
}
.hero__bg::before{ /* coup de rouleau / texture peinture */
  content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 22px,rgba(255,255,255,.18) 22px 24px);
}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;min-height:min(76vh,640px);padding:64px 0}
.hero__copy{max-width:560px}
.hero__copy .eyebrow{color:var(--primary-deep)}
.hero__copy h1{margin:14px 0 18px}
.hero__copy p{font-size:19px;color:var(--charcoal);max-width:48ch}
.hero__cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero__stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.hero__stats b{display:block;font-size:26px;font-weight:800;color:var(--ink-deep);letter-spacing:-.5px}
.hero__stats span{font-size:13px;color:var(--slate)}
/* visuel : pot de peinture stylisé */
.hero__art{position:relative;height:100%;min-height:380px;display:grid;place-items:center}

/* reveal au chargement */
[data-reveal]{opacity:0;transform:translateY(18px);animation:reveal .7s var(--ease) forwards}
@keyframes reveal{to{opacity:1;transform:none}}

/* ===================================================== FEATURE ICON ROW ==== */
.reassure{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reassure__cell{display:flex;gap:13px;align-items:flex-start;background:var(--canvas);
  border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:20px}
.reassure__cell .ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary-deep)}
.reassure__cell .ic svg{width:20px;height:20px}
.reassure__cell h4{font-size:15px;font-weight:700;color:var(--ink-deep);letter-spacing:-.2px}
.reassure__cell p{font-size:13px;color:var(--slate);margin-top:2px}

/* ============================================== CATEGORY PHOTO CARDS ======= */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.catgrid--2{grid-template-columns:1.2fr .8fr}
.cat-photo{position:relative;border-radius:var(--r-xxxl);overflow:hidden;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;
  isolation:isolate;transition:.3s var(--ease)}
.cat-photo:hover{transform:translateY(-4px)}
.cat-photo__field{position:absolute;inset:0;z-index:-2}
.cat-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(15,12,10,.62),rgba(15,12,10,.05) 55%)}
.cat-photo h3{font-size:23px;font-weight:600;letter-spacing:-.3px}
.cat-photo p{font-size:13px;opacity:.9;margin-top:3px}
.cat-photo .arrow{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);transition:.25s var(--ease)}
.cat-photo:hover .arrow{background:#fff;color:var(--ink-deep)}

/* ============================================================= PROMO STRIP = */
.promo-strip{background:var(--ink-deep);color:#fff;border-radius:var(--r-xxxl);
  padding:56px;position:relative;overflow:hidden;display:grid;
  grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;isolation:isolate}
.promo-strip__glow{position:absolute;inset:0;z-index:-1;opacity:.85;
  background:radial-gradient(70% 120% at 88% 18%,rgba(226,115,79,.55),transparent 60%),
            radial-gradient(60% 100% at 6% 90%,rgba(94,124,83,.35),transparent 60%)}
.promo-strip h2{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.5px;line-height:1.12}
.promo-strip p{color:rgba(255,255,255,.78);margin-top:12px;font-size:16px;max-width:42ch}
.promo-strip .btn--secondary{border-color:#fff;color:#fff}
.promo-strip .btn--secondary:hover{background:#fff;color:var(--ink-deep)}
.promo-strip__chips{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap}

/* ============================================================= NUANCIER ===== */
.nuancier{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xxxl);padding:42px}
.swatch-row{display:flex;gap:0;flex-wrap:wrap;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-panel)}
.swatch-chip{flex:1 1 90px;min-height:120px;display:flex;align-items:flex-end;padding:12px;
  color:#fff;position:relative;transition:.25s var(--ease);min-width:80px}
.swatch-chip span{font-size:11px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.swatch-chip code{position:absolute;top:10px;left:12px;font-size:10px;opacity:.7;font-weight:600}
.swatch-chip:hover{flex-grow:1.6}
.swatch-chip.dark span,.swatch-chip.dark code{color:var(--ink-deep);text-shadow:none}

/* color swatch circles (sélecteur) */
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:.18s var(--ease)}
.swatch::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ink-deep);
  opacity:0;transition:.18s var(--ease)}
.swatch:hover{transform:scale(1.08)}
.swatch.is-sel::after{opacity:1}

/* =========================================================== PRODUCT CARD == */
.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);
  overflow:hidden;display:flex;flex-direction:column;transition:.22s var(--ease);position:relative}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-panel);border-color:var(--hairline)}
.pcard__media{position:relative;aspect-ratio:1/1;background:var(--surface-soft);overflow:hidden}
.pcard__field{position:absolute;inset:0}
.pcard__can{position:absolute;inset:0;display:grid;place-items:center}
.pcard__badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.pcard__fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;z-index:2;color:var(--slate);
  opacity:0;transform:translateY(-4px);transition:.2s var(--ease)}
.pcard:hover .pcard__fav{opacity:1;transform:none}
.pcard__fav:hover{color:var(--primary)}
.pcard__body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__cat{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--steel)}
.pcard__name{font-size:15px;font-weight:700;color:var(--ink-deep);letter-spacing:-.2px;line-height:1.3}
.pcard a.pcard__name:hover{color:var(--primary)}
.pcard__rating{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--slate)}
.pcard__rating .stars{color:var(--attention);letter-spacing:1px}
.pcard__dots{display:flex;gap:5px;margin-top:1px}
.pcard__dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.price{font-size:18px;font-weight:800;color:var(--ink-deep);letter-spacing:-.4px}
.price small{font-size:12px;font-weight:600;color:var(--steel)}
.price .was{font-size:13px;font-weight:600;color:var(--stone);text-decoration:line-through;margin-right:6px}
.add-btn{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;
  flex:none;transition:.18s var(--ease)}
.add-btn:hover{background:var(--primary-deep);transform:translateY(-2px)}
.add-btn:active{transform:scale(.92)}
.add-btn.added{background:var(--success)}

/* badges */
.badge{font-size:11px;font-weight:800;letter-spacing:.2px;border-radius:var(--r-full);padding:4px 10px;display:inline-flex;align-items:center;gap:4px}
.badge--promo{background:var(--warning);color:var(--ink-deep)}
.badge--new{background:var(--ink-deep);color:#fff}
.badge--hot{background:var(--attention);color:#fff}
.badge--out{background:var(--critical);color:#fff}
.badge--eco{background:var(--success);color:#fff}

/* ============================================================ WHY-BUY ====== */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why__tile{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:26px 22px}
.why__tile .ic{width:44px;height:44px;border-radius:12px;background:var(--surface-soft);display:grid;place-items:center;color:var(--primary-deep);margin-bottom:16px}
.why__tile .ic svg{width:24px;height:24px}
.why__tile h4{font-size:17px;font-weight:700;color:var(--ink-deep);letter-spacing:-.2px}
.why__tile p{font-size:14px;color:var(--slate);margin-top:6px}

/* =========================================================== TESTIMONIAL === */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:28px}
.testi__q{font-size:16px;color:var(--ink);line-height:1.55}
.testi__by{display:flex;align-items:center;gap:12px;margin-top:20px}
.testi__av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.testi__by b{font-size:14px;font-weight:700;color:var(--ink-deep);display:block}
.testi__by span{font-size:12px;color:var(--steel)}
.testi .stars{color:var(--attention);letter-spacing:2px;font-size:14px}

/* =============================================================== FOOTER ==== */
.footer{background:var(--canvas);border-top:1px solid var(--hairline-soft);padding:64px 0 28px;margin-top:24px}
.footer__cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.footer__brand .brand{margin-bottom:14px}
.footer__brand p{font-size:14px;color:var(--slate);max-width:32ch}
.footer__brand .socials{display:flex;gap:10px;margin-top:18px}
.footer__brand .socials a{width:38px;height:38px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center;color:var(--ink);transition:.18s var(--ease)}
.footer__brand .socials a:hover{background:var(--ink-deep);color:#fff}
.footer h5{font-size:14px;font-weight:700;color:var(--ink-deep);margin-bottom:14px}
.footer li{margin-bottom:9px}
.footer li a{font-size:14px;color:var(--steel);transition:.15s}
.footer li a:hover{color:var(--primary)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--hairline-soft);flex-wrap:wrap}
.footer__bottom p,.footer__bottom a{font-size:12px;color:var(--stone)}
.footer__pay{display:flex;gap:8px}
.footer__pay span{font-size:11px;font-weight:700;color:var(--steel);border:1px solid var(--hairline);border-radius:6px;padding:4px 8px}

/* ============================================================ BREADCRUMB === */
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--steel);padding:22px 0}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--stone)}
.crumb b{color:var(--ink);font-weight:600}

/* ====================================================== CATEGORY PAGE ====== */
.cat-hero{padding:6px 0 28px}
.cat-hero h1{margin-bottom:8px}
.cat-hero p{color:var(--slate);max-width:60ch}
.cat-layout{display:grid;grid-template-columns:264px 1fr;gap:32px;align-items:start;padding-bottom:40px}

.filters{position:sticky;top:calc(var(--nav-h) + 16px);background:var(--canvas);
  border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:8px 20px 20px}
.fgroup{border-bottom:1px solid var(--hairline-soft);padding:18px 0}
.fgroup:last-child{border-bottom:none}
.fgroup__h{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--ink-deep)}
.fgroup__h .chev{transition:.25s var(--ease);color:var(--steel)}
.fgroup.collapsed .chev{transform:rotate(-90deg)}
.fgroup__body{margin-top:14px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.fgroup.collapsed .fgroup__body{display:none}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--charcoal);cursor:pointer;user-select:none}
.check input{appearance:none;width:18px;height:18px;border:1.5px solid var(--hairline);border-radius:var(--r-xs);
  display:grid;place-items:center;transition:.15s;flex:none}
.check input:checked{background:var(--primary);border-color:var(--primary)}
.check input:checked::after{content:"✓";color:#fff;font-size:12px;font-weight:800}
.check:hover{color:var(--ink)}
.check .ct{margin-left:auto;font-size:12px;color:var(--stone)}
.fcolors{display:flex;flex-wrap:wrap;gap:9px}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--charcoal);cursor:pointer}
.toggle input{appearance:none;width:38px;height:22px;border-radius:var(--r-full);background:var(--hairline);position:relative;transition:.2s;flex:none}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked{background:var(--success)}
.toggle input:checked::after{left:18px}
.range{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate)}
.range input[type=range]{flex:1;accent-color:var(--primary)}
.filters__mobhead{display:none;align-items:center;justify-content:space-between;padding:18px 0 6px}
.filters__mobhead h3{font-size:18px;font-weight:700;color:var(--ink-deep)}
.filters__clear{font-size:13px;font-weight:700;color:var(--primary);margin-top:6px}
.filters__clear:hover{text-decoration:underline}

.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cat-toolbar__count{font-size:14px;color:var(--slate)}
.cat-toolbar__count b{color:var(--ink-deep)}
.sort-wrap{display:flex;align-items:center;gap:10px}
.select{appearance:none;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-full);
  padding:10px 38px 10px 16px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236A645B' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.select:focus{outline:none;border-color:var(--primary)}
.filters-mobile-btn{display:none}

.chips-active{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip-x{display:inline-flex;align-items:center;gap:7px;background:var(--primary-soft);color:var(--primary-deep);
  border-radius:var(--r-full);padding:6px 8px 6px 13px;font-size:13px;font-weight:700}
.chip-x button{width:18px;height:18px;border-radius:50%;background:rgba(156,56,32,.16);display:grid;place-items:center;font-size:12px}
.chip-x button:hover{background:var(--primary);color:#fff}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--slate)}
.empty svg{width:54px;height:54px;color:var(--stone);margin:0 auto 16px}

.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:42px}
.pager button{min-width:42px;height:42px;border-radius:var(--r-full);border:1px solid var(--hairline);
  font-size:14px;font-weight:700;color:var(--ink);transition:.15s;padding:0 14px}
.pager button:hover{border-color:var(--ink)}
.pager button.is-active{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* ============================================================== PDP ======== */
.pdp{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:start;padding:8px 0 48px}
.gallery{display:grid;grid-template-columns:84px 1fr;gap:16px}
.gallery__thumbs{display:flex;flex-direction:column;gap:12px}
.gthumb{width:84px;height:84px;border-radius:var(--r-lg);background:var(--surface-soft);
  border:1px solid var(--hairline-soft);overflow:hidden;cursor:pointer;transition:.15s;position:relative}
.gthumb.is-active{border:2px solid var(--ink-deep)}
.gthumb .field{position:absolute;inset:0}
.gallery__main{aspect-ratio:1/1;border-radius:var(--r-xxxl);overflow:hidden;background:var(--surface-soft);position:relative}
.gallery__main .field{position:absolute;inset:0;transition:.4s var(--ease)}
.gallery__main .can{position:absolute;inset:0;display:grid;place-items:center}
.gallery__tag{position:absolute;top:18px;left:18px;z-index:3;display:flex;gap:7px}

.buy{position:sticky;top:calc(var(--nav-h) + 16px);max-width:430px}
.buy__cat{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--primary)}
.buy h1{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.15;margin:8px 0 12px;color:var(--ink-deep)}
.buy__rate{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate);margin-bottom:18px}
.buy__rate .stars{color:var(--attention);letter-spacing:1px;font-size:15px}
.buy__rate a{color:var(--primary);font-weight:700}
.buy__price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.buy__price .price{font-size:30px}
.buy__price .save{background:var(--primary-soft);color:var(--primary-deep);font-size:12px;font-weight:800;border-radius:var(--r-full);padding:4px 10px}
.buy__tax{font-size:12px;color:var(--steel);margin-bottom:22px}
.buy__panel{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);
  padding:22px;box-shadow:var(--sh-panel)}
.opt-label{font-size:13px;font-weight:700;color:var(--ink-deep);margin-bottom:10px;display:flex;justify-content:space-between}
.opt-label span{color:var(--slate);font-weight:600}
.radios{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.radio-opt{border:1px solid rgba(24,21,19,.14);border-radius:var(--r-lg);padding:12px 10px;text-align:center;cursor:pointer;transition:.15s}
.radio-opt b{font-size:13px;font-weight:700;color:var(--ink-deep);display:block}
.radio-opt small{font-size:11px;color:var(--steel)}
.radio-opt.is-sel{border:2px solid var(--primary);background:var(--primary-soft)}
.qty{display:flex;align-items:center;border:1px solid var(--hairline);border-radius:var(--r-full);width:fit-content;overflow:hidden}
.qty button{width:42px;height:44px;font-size:20px;color:var(--ink);transition:.15s}
.qty button:hover{background:var(--surface-soft)}
.qty input{width:46px;height:44px;text-align:center;border:none;font-size:15px;font-weight:700;color:var(--ink-deep);outline:none}
.buy__stock{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--success);margin:16px 0}
.buy__stock .pip{width:8px;height:8px;border-radius:50%;background:var(--success)}
.buy__reassure{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.buy__reassure div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--charcoal)}
.buy__reassure svg{width:18px;height:18px;color:var(--primary-deep);flex:none}

/* specs */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hairline-soft);font-size:14px}
.spec-row .k{font-weight:700;color:var(--ink)}
.spec-row .v{color:var(--charcoal);text-align:right}

/* faq */
.faq{max-width:780px}
.faq-item{border:1px solid var(--hairline-soft);border-radius:var(--r-xl);margin-bottom:12px;overflow:hidden;background:var(--canvas)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;
  font-size:17px;font-weight:700;color:var(--ink-deep)}
.faq-q .chev{color:var(--steel);transition:.3s var(--ease);flex:none}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 22px 20px;font-size:15px;color:var(--charcoal);line-height:1.6}

/* sticky mobile buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--hairline);padding:12px 18px;
  display:none;align-items:center;justify-content:space-between;gap:14px;transform:translateY(110%);transition:.3s var(--ease)}
.buybar.show{transform:none}
.buybar .price{font-size:20px}

/* =============================================================== DRAWERS === */
.scrim{position:fixed;inset:0;background:rgba(24,18,12,.42);z-index:70;opacity:0;visibility:hidden;transition:.25s}
.scrim.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--canvas);z-index:80;
  transform:translateX(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;box-shadow:var(--sh-float)}
.drawer.show{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--hairline-soft)}
.drawer__head h3{font-size:18px;font-weight:700;color:var(--ink-deep)}
.drawer__close{width:38px;height:38px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center}
.drawer__close:hover{background:var(--hairline)}
.drawer__body{flex:1;overflow-y:auto;padding:14px 22px}
.drawer__foot{padding:20px 22px;border-top:1px solid var(--hairline-soft)}
.drawer__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.drawer__total b{font-size:22px;font-weight:800;color:var(--ink-deep)}
.drawer__sub{font-size:13px;color:var(--steel);text-align:center;margin-top:10px}

.citem{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--hairline-soft)}
.citem__media{width:64px;height:64px;border-radius:var(--r-lg);overflow:hidden;flex:none;position:relative;background:var(--surface-soft)}
.citem__media .field{position:absolute;inset:0}
.citem__info{flex:1;min-width:0}
.citem__info h4{font-size:14px;font-weight:700;color:var(--ink-deep);line-height:1.3}
.citem__info small{font-size:12px;color:var(--steel)}
.citem__row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.citem .qty{transform:scale(.82);transform-origin:left}
.citem__rm{font-size:12px;color:var(--steel);text-decoration:underline}
.citem__rm:hover{color:var(--critical)}
.cart-empty{text-align:center;color:var(--slate);padding:50px 10px}
.cart-empty svg{width:48px;height:48px;color:var(--stone);margin:0 auto 14px}

/* mobile nav drawer */
.mnav{position:fixed;inset:0;background:var(--canvas);z-index:85;transform:translateX(-100%);
  transition:transform .3s var(--ease);padding:22px;display:flex;flex-direction:column;gap:6px}
.mnav.show{transform:none}
.mnav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mnav a{font-size:20px;font-weight:700;color:var(--ink-deep);padding:14px 0;border-bottom:1px solid var(--hairline-soft)}
.mnav a:active{color:var(--primary)}

/* ============================================================ RESPONSIVE === */
@media(max-width:1100px){
  .nav__tabs{display:none}
  .nav__burger{display:grid}
  .hero__inner{grid-template-columns:1fr;min-height:auto;padding:48px 0;gap:30px}
  .hero__art{min-height:300px;order:-1}
  .promo-strip{grid-template-columns:1fr;padding:40px}
  .promo-strip__chips{justify-content:flex-start}
  .reassure,.why{grid-template-columns:repeat(2,1fr)}
  .catgrid,.prodgrid{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .pdp{grid-template-columns:1fr;gap:30px}
  .buy{position:static;max-width:none}
  .testis{grid-template-columns:1fr}
  .pdp-detail{grid-template-columns:1fr!important;gap:36px!important}
}
@media(max-width:860px){
  .cat-layout{grid-template-columns:1fr}
  .filters{display:none;position:fixed;top:0;left:0;height:100%;width:min(360px,90vw);z-index:80;
    border-radius:0;transform:translateX(-100%);transition:transform .3s var(--ease);overflow-y:auto;box-shadow:var(--sh-float)}
  .filters.show{display:block;transform:none}
  .filters__mobhead{display:flex}
  .filters-mobile-btn{display:inline-flex}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:1fr;gap:0}
  .buybar{display:flex}
  .search-pill{display:none}
}
@media(max-width:560px){
  .section{padding:54px 0}
  .wrap{padding:0 16px}
  .catgrid,.prodgrid,.cat-grid,.reassure,.why{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .gallery__thumbs{flex-direction:row;order:2}
  .gthumb{width:64px;height:64px}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .promo-strip{padding:30px 22px}
  .nuancier{padding:24px}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}