/* =====================================================================
   Meuble Direct — design system
   Flat, gridded, industrial catalogue. Thin rules, 2px radius, no shadow.
   Newsreader (display) × Figtree (UI). Pine green action, brass accent,
   red reserved for discounts. Derived from the Lot 1 brief.
   ===================================================================== */

:root {
  --paper:   #FAF6EC; /* dominant cream background */
  --grege:   #EFEADD; /* alternate sections, filters */
  --white:   #FFFFFF; /* cards, packshots */
  --ink:     #1A1A17; /* body, titles, prices, footer */
  --slate:   #63645A; /* meta, dimensions, breadcrumb */
  --rule:    #DED6C4; /* every separator & border */
  --pine:    #1E3D2C; /* signature accent · CTA, tags, links */
  --pine-dk: #142B1E; /* hover */
  --brass:   #C39A5C; /* secondary accent · logo, numerals */
  --green-l: #E7ECDF; /* discreet tags, selected states */
  --red:     #B3261E; /* discount badge & struck price — never a CTA */
  --line:    #DED6C4;
  --maxw:    1360px;
  --pad:     48px;
  --topbar-h: 41px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--pine-dk); }
::selection { background: var(--green-l); }

h1, h2, h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}

img { max-width: 100%; }
input, button, select, textarea { font-family: inherit; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine); color: #fff; padding: 10px 16px; border-radius: 2px;
}
.skip-link:focus { left: 12px; top: 12px; color:#fff; }

/* Hover styles applied from data-hover by app.js (was style-hover in DC) */

/* Hide scrollbars where the design does */
.scr::-webkit-scrollbar { width: 0; height: 0; }
.scr { scrollbar-width: none; }

/* ---------------------------------------------------------------- Layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* --------------------------------------------------------- Signature tag */
.tag {
  display: inline-block; background: var(--pine); color: #fff;
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.09em; padding: 4px 10px; border-radius: 2px; white-space: nowrap;
}
.tag--soft  { background: var(--green-l); color: var(--pine); }
.tag--brass { background: var(--brass);   color: #fff; }
.tag--red   { background: var(--red);     color: #fff; }

/* [À VALIDER] marker — never an invented value */
.tbd {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.88em;
  background: #FBF0EF; color: var(--red);
  border-bottom: 1.5px dashed var(--red); padding: 1px 6px; border-radius: 2px;
  white-space: nowrap;
}

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pine); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 28px; border: 0; border-radius: 2px; cursor: pointer;
  transition: background .18s ease-out; text-align: center;
}
.btn:hover { background: var(--pine-dk); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
  padding: 12.5px 26px; transition: opacity .18s ease-out;
}
.btn--ghost:hover { background: transparent; opacity: .7; color: var(--ink); }
.btn--block { display: flex; width: 100%; }

/* ============================================================ TOP PROMO */
.topbar {
  background: var(--pine); color: #fff; text-align: center;
  font-size: 14px; padding: 9px 20px;
}
.topbar .tbd { background: rgba(255,255,255,.15); color: #fff; border-bottom-color: rgba(255,255,255,.6); }

/* =============================================================== HEADER */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header-row { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad); display: flex; align-items: center; gap: 32px; }

.logo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo__mark { width: 36px; height: 36px; border-radius: 8px; background: var(--pine); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo__word { font-family: 'Newsreader', serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.logo__word span { color: var(--pine); }

.search { flex: 1; display: flex; border: 1px solid var(--rule); border-radius: 2px; background: #fff; overflow: hidden; max-width: 640px; margin: 0 auto; }
.search input { border: 0; padding: 12px 16px; font-size: 14px; flex: 1; outline: none; background: transparent; min-width: 0; }
.search button { background: var(--pine); color: #fff; border: 0; padding: 0 20px; cursor: pointer; font-weight: 600; font-size: 15px; white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.header-actions a, .header-actions button { color: var(--ink); background: transparent; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; padding: 0; }
.count-badge { background: var(--pine); color: #fff; min-width: 20px; height: 20px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; padding: 0 5px; font-variant-numeric: tabular-nums; }

.burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 4px; }
.burger span { width: 22px; height: 2px; background: var(--ink); display: block; }

/* Category nav + mega */
.cat-nav { border-top: 1px solid var(--rule); position: relative; }
.cat-nav__row { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.cat-nav__row > a,
.cat-nav__item > a { color: var(--ink); padding: 12px 0; border-bottom: 2px solid transparent; transition: border-color .15s ease-out; white-space: nowrap; display: inline-block; }
.cat-nav__row > a:hover, .cat-nav__item:hover > a { border-color: var(--pine); }
.cat-nav__row > a.is-active,
.cat-nav__item > a.is-active { color: var(--pine); border-color: var(--pine); font-weight: 600; }
.cat-nav__promo { margin-left: auto; color: var(--pine); font-weight: 600; }
.cat-nav__item { position: static; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); z-index: 45; display: none; }
.cat-nav__item:hover .mega, .mega:hover { display: block; }
.mega__inner { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--pad); display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; align-content: start; }
.mega__grouptitle { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--pine); font-weight: 600; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.mega__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mega__cols a { color: #3B3A32; font-size: 14px; }
.mega__cols a:hover { color: var(--pine); }
.mega__feat { border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); overflow: hidden; color: inherit; display: flex; flex-direction: column; transition: border-color .18s; }
.mega__feat:hover { border-color: var(--pine); color: inherit; }
.mega__featimg { position: relative; aspect-ratio: 16/10; background: repeating-linear-gradient(135deg,#F0EBDD 0 10px,#FAF6EC 10px 20px); border-bottom: 1px solid var(--rule); }
.mega__featimg .tag { position: absolute; top: 10px; left: 10px; }
.mega__featbody { padding: 14px 16px; }

/* =============================================================== FOOTER */
.site-footer { background: var(--ink); color: #A6A597; margin-top: 88px; }
.site-footer__cols { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer p { font-size: 14px; }
.site-footer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: #fff; font-weight: 600; margin: 0 0 16px; font-family: 'Figtree', sans-serif; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-footer a { color: #CDC7B9; }
.site-footer a:hover { color: #fff; }
.site-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.site-footer__pay span { border: 1px solid #3B3A32; border-radius: 2px; padding: 5px 10px; font-size: 12px; color: #CDC7B9; }
.site-footer__addr { font-size: 13px; line-height: 1.7; color: #A6A597; }
.site-footer__addr .hl { color: #CDC7B9; }
.site-footer__bar { border-top: 1px solid #2B2A22; }
.site-footer__bar-in { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; font-size: 12px; color: #726E60; }
.site-footer__bar-in .tbd { background: rgba(179,38,30,.12); color: #E8938D; border-bottom: 0; }
.site-footer__bar-in .triman { border: 1px solid #3B3A32; padding: 2px 8px; border-radius: 2px; color: #A6A597; }
.site-footer__bar-in a { color: #8C8A7C; }

/* ========================================================= CART DRAWER */
.drawer-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.drawer-root.is-open { pointer-events: auto; }
.drawer-back { position: absolute; inset: 0; background: rgba(21,24,27,.45); opacity: 0; transition: opacity .18s ease-out; }
.drawer-root.is-open .drawer-back { opacity: 1; }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: 428px; max-width: 92vw; background: var(--paper); border-left: 1px solid var(--rule); transform: translateX(100%); transition: transform .18s ease-out; display: flex; flex-direction: column; }
.drawer-root.is-open .drawer { transform: translateX(0); }
.drawer__head { padding: 20px 24px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.drawer__head h2 { font-size: 20px; }
.drawer__close { background: transparent; border: 0; cursor: pointer; font-size: 24px; line-height: 1; color: var(--slate); padding: 0; }
.drawer__franco { background: var(--green-l); color: var(--pine); font-size: 13px; font-weight: 500; padding: 10px 24px; border-bottom: 1px solid var(--rule); }
.drawer__franco .tbd { background:#fff; color: var(--pine); border-bottom-color: var(--pine); }
.drawer__body { flex: 1; overflow-y: auto; }
.drawer__empty { padding: 56px 24px; text-align: center; color: var(--slate); }
.drawer__foot { border-top: 1px solid var(--rule); padding: 20px 24px; background: #fff; }
.cart-line { display: flex; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.cart-line__img { width: 64px; height: 64px; flex-shrink: 0; background: repeating-linear-gradient(135deg,#F0EBDD 0 8px,#FAF6EC 8px 16px); border: 1px solid var(--rule); border-radius: 2px; }
.cart-line__name { font-weight: 500; font-size: 14px; line-height: 1.35; }
.cart-line__meta { color: var(--slate); font-size: 12px; margin: 2px 0 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 2px; }
.qty button { background: transparent; border: 0; cursor: pointer; width: 28px; height: 28px; color: var(--ink); font-size: 15px; }
.qty span { min-width: 24px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.linkish { background: transparent; border: 0; cursor: pointer; color: var(--slate); font-size: 13px; text-decoration: underline; padding: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ======================================================= COOKIE BANNER */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--ink); color: var(--grege); border-top: 2px solid var(--pine); display: none; }
.cookie.is-visible { display: block; }
.cookie__row { max-width: var(--maxw); margin: 0 auto; padding: 22px var(--pad); display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.cookie__txt { flex: 1; min-width: 280px; }
.cookie__title { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #fff; margin-bottom: 4px; }
.cookie p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #A6A597; max-width: 76ch; }
.cookie a { color: #CDC7B9; text-decoration: underline; }
.cookie__btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cookie__btn { background: transparent; border: 1.5px solid var(--slate); color: var(--grege); font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 2px; cursor: pointer; }
.cookie__btn--accept { background: var(--pine); border: 0; color: #fff; padding: 13px 26px; }
.cookie__panel { border-top: 1px solid #2B2A22; display: none; }
.cookie__panel.is-open { display: block; }
.cookie__panel-in { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad); display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.cookie__panel label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--grege); cursor: pointer; }
.cookie__panel input { width: 17px; height: 17px; accent-color: var(--pine); }
.cookie__save { margin-left: auto; background: var(--brass); border: 0; color: var(--ink); font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 2px; cursor: pointer; }
.cookie-pill { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--pine); color: var(--grege); cursor: pointer; font-size: 18px; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.cookie-pill.is-visible { display: flex; }

/* ==================================================== MOBILE NAV DRAWER */
.mnav-root { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.mnav-root.is-open { pointer-events: auto; }
.mnav-back { position: absolute; inset: 0; background: rgba(21,24,27,.45); opacity: 0; transition: opacity .2s ease-out; }
.mnav-root.is-open .mnav-back { opacity: 1; }
.mnav { position: absolute; top: 0; left: 0; bottom: 0; width: 310px; max-width: 84vw; background: var(--paper); transform: translateX(-100%); transition: transform .22s ease-out; display: flex; flex-direction: column; }
.mnav-root.is-open .mnav { transform: translateX(0); }
.mnav__head { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.mnav__head span { font-family: 'Newsreader', serif; font-weight: 700; font-size: 18px; }
.mnav__body { flex: 1; overflow-y: auto; }
.mnav__body a { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 500; font-size: 15px; }
.mnav__body a.is-primary { color: var(--pine); font-weight: 600; }
.mnav__foot { border-top: 1px solid var(--rule); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mnav__foot a { color: var(--slate); }

/* ============================================================ RESPONSIVE
   Page bodies keep the design's inline styles; these attribute-substring
   rules make those desktop layouts reflow on small screens. */
@media (max-width: 1000px) {
  :root { --pad: 24px; }
  .cat-nav { display: none; }
  .burger { display: flex; }
  .header-actions .lbl-hide { display: none; }

  /* Section containers: shrink side padding (longhand !important beats inline shorthand) */
  [style*="max-width:1360px"], [style*="max-width:1280px"], [style*="max-width:1100px"],
  [style*="max-width:960px"], [style*="max-width:920px"], [style*="max-width:900px"],
  [style*="max-width:840px"], [style*="max-width:760px"], [style*="max-width:1500px"] {
    padding-left: 24px !important; padding-right: 24px !important;
  }

  /* Grids reflow */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns:360px 1fr"],
  [style*="grid-template-columns:76px 1fr"],
  [style*="grid-template-columns:2fr 2fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.4fr 1fr 1fr 1.2fr"] { grid-template-columns: 1fr 1fr !important; }

  /* Big display headings scale down a touch */
  h1[style*="font-size:56px"], h1[style*="font-size:52px"] { font-size: 38px !important; }
  [style*="font-size:34px"] { font-size: 26px !important; }

  /* Sticky filter bars: unstick so they don't cover content on mobile */
  [style*="position:sticky"][style*="top:113px"],
  [style*="position:sticky"][style*="top:132px"],
  [style*="position:sticky"][style*="top:132px;"] { position: static !important; }
}

@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .header-row { gap: 14px; }
  .search input { padding: 10px 12px; }
  .search button { padding: 0 14px; }
  h1[style*="font-size:56px"], h1[style*="font-size:52px"], h1[style*="font-size:44px"] { font-size: 32px !important; }
}

/* ==================================================== SHARED COMPONENTS
   Used by the server-rendered listing grids and product markup. */
.eyebrow { display: inline-block; background: var(--pine); color: #fff; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; padding: 4px 10px; border-radius: 2px; white-space: nowrap; }
.crumbs { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad) 0; font-size: 13px; color: var(--slate); }
.crumbs a { color: var(--slate); }
.crumbs .sep { color: #C4BCA9; }
.crumbs .here { color: var(--ink); }

.section { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad); }

/* Filter chips */
.filters { background: var(--grege); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: sticky; top: 113px; z-index: 30; }
.filters__in { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad); }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
.filters__groups { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.filters__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--slate); font-weight: 600; margin-bottom: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); border-radius: 2px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .18s ease-out; }
.chip:hover { border-color: var(--pine); }
.chip.is-active { border-color: var(--pine); background: var(--green-l); color: var(--pine); }
.sortsel { border: 1px solid var(--rule); background: #fff; border-radius: 2px; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; outline: none; }

/* Product grid & card */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pcard { border: 1px solid var(--rule); border-radius: 2px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s ease-out; }
.pcard:hover { border-color: var(--pine); }
.pcard__img { display: block; position: relative; aspect-ratio: 1/1; background: repeating-linear-gradient(135deg,#F0EBDD 0 10px,#FAF6EC 10px 20px); border-bottom: 1px solid var(--rule); }
.pcard__badge { position: absolute; top: 10px; left: 10px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; padding: 4px 8px; border-radius: 2px; }
.pcard__badge--disc { background: var(--red); color: #fff; }
.pcard__badge--new { background: var(--pine); color: #fff; }
.pcard__cat { position: absolute; bottom: 10px; left: 10px; background: var(--grege); color: var(--slate); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 2px; }
.pcard__fav { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); cursor: pointer; color: var(--slate); font-size: 15px; display: flex; align-items: center; justify-content: center; }
.pcard__fav.is-fav { color: var(--red); border-color: var(--red); }
.pcard__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.pcard__name { color: var(--ink); font-weight: 500; font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pcard__price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.pcard__price b { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.pcard__price .old { color: var(--slate); font-size: 14px; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pcard__price .ttc { color: var(--slate); font-size: 12px; }
.pcard__price b.promo { color: var(--red); }
.pcard__meta { color: var(--slate); font-size: 13px; margin-top: 6px; }
.pcard__add { margin-top: 14px; background: transparent; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; font-size: 14px; padding: 10px; border-radius: 2px; cursor: pointer; width: 100%; transition: background .18s, color .18s, border-color .18s; text-align: center; }
.pcard__add:hover { background: var(--pine); border-color: var(--pine); color: #fff; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; border: 1px solid var(--rule); color: var(--ink); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; padding: 0 12px; }
.pagination .is-current { border-color: var(--pine); background: var(--pine); color: #fff; }

.listing-empty { border: 1px dashed var(--rule); border-radius: 2px; padding: 56px; text-align: center; color: var(--slate); }

/* Radio option dot (checkout) */
[data-radio-opt] .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C4BCA9; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
[data-radio-opt].is-selected .dot { border-color: var(--pine); }
[data-radio-opt].is-selected .dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pine); }
.mon-compte-tab.is-active, [data-tab].is-active { background: var(--green-l); border-left-color: var(--pine); font-weight: 700; }

@media (max-width: 1000px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .filters { position: static; }
}
@media (max-width: 480px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}