:root{
  /* ===== ENTRE-DEUX (champagne / beige / or / blanc) ===== */
  --bg:#efe6de;
  --paper:#f5eee7;
  --card:#fbf7f3;
  --white:#ffffff;

  /* helpers RGB */
  --bgRgb:239,230,222;
  --paperRgb:245,238,231;
  --cardRgb:251,247,243;
  --whiteRgb:255,255,255;

  --ink:#1f1a17;
  --muted:#5e544e;

  /* RGB (utile pour certains blocs) */
  --inkRgb:31,26,23;
  --goldRgb:184,137,60;

  /* cadres (gris clair “chaud”) */
  --line:rgba(31,26,23,.16);
  --lineSoft:rgba(31,26,23,.12);
  --lineHard:rgba(31,26,23,.20);
  --innerEdge:rgba(255,255,255,.60);

  --gold:#b8893c;
  --gold2:#f3deb1;
  --goldLine:rgba(184,137,60,.70);
  --goldGlow:rgba(184,137,60,.18);
  --goldSoft:rgba(184,137,60,.26);

  --radius:18px;
  --radius2:22px;

  /* Ombres premium (lisibles mais propres) */
  --shadow:  0 16px 30px rgba(31,26,23,.22), 0 2px 0 rgba(31,26,23,.10);
  --shadow2: 0 12px 22px rgba(31,26,23,.20), 0 2px 0 rgba(31,26,23,.08);
  --shadow3: 0 22px 44px rgba(31,26,23,.20), 0 3px 0 rgba(31,26,23,.08);

  --ease:cubic-bezier(.2,.8,.2,1);

  --container:1120px;
  --containerWide:1380px;

  --headerH:78px;
  --footerH:70px;

  /* transitions “propres” */
  --tFast: .16s;
  --tMed:  .30s;
  --tSlow: .55s;
}

/* =========================
   BASE / RESET / TYPO
========================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

body{
  margin:0;
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;

  /* fond clair + subtil pour “rester” */
  background:
    radial-gradient(1200px 520px at 50% -10%,
      rgba(243,222,177,.16),
      rgba(var(--bgRgb),0) 60%),
    linear-gradient(180deg,
      rgba(var(--paperRgb),.55),
      rgba(var(--bgRgb),1) 55%);

  /* ✅ site à 90% (desktop) */
  zoom:.9;

  /* ✅ évite le footer fixed qui mange le bas */
  padding-bottom: calc(var(--footerH) + 24px);
}

/* fallback si zoom n’existe pas */
@supports not (zoom: 1){
  body{
    transform: scale(.9);
    transform-origin: top center;
    width: 111.111%;
  }
}

/* stop le violet des liens visités */
a, a:visited{ color:inherit; }

img{
  max-width:100%;
  display:block;
  height:auto;
  -webkit-user-drag:none;
  image-rendering:auto;
  transform: translateZ(0);
  backface-visibility:hidden;
}

::selection{
  background: rgba(184,137,60,.28);
  color: var(--ink);
}

button, input, select, textarea{
  font: inherit;
  color: inherit;
}

button{ border:0; background:none; }

:focus-visible{
  outline:none;
  box-shadow: 0 0 0 5px var(--goldGlow);
  border-radius: 14px;
}

/* Helpers texte */
.h1,.h2,.h3{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  letter-spacing:.04em;
  margin:0;
  color: rgba(31,26,23,.92);
}
.h1{ font-size:52px; line-height:1.04; }
.h2{ font-size:34px; line-height:1.12; }
.h3{ font-size:22px; line-height:1.18; }

.lead{
  margin:0;
  color: var(--muted);
  line-height:1.65;
  font-size:16px;
}
.muted{ color: var(--muted); }

.container{
  max-width: var(--container);
  margin:0 auto;
  padding:0 18px;
}
.container--wide{ max-width: var(--containerWide); }

#boutique{ scroll-margin-top: calc(var(--headerH) + 12px); }
.is-hidden{ display:none !important; }

/* “Paper” générique (utile About / pages texte) */
.paper{
  background: rgba(var(--paperRgb), .86);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow3);
  padding: 18px;
  position:relative;
}
.paper::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.55;
  pointer-events:none;
}

.section{ padding:52px 0; }
.section__head{ margin: 0 0 16px; }
.section__head p{ margin-top:8px; }

/* =========================
   HEADER
========================= */
.header{
  position:sticky;
  top:0;
  z-index:80;
  background: rgba(var(--paperRgb), .92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow: 0 14px 26px rgba(31,26,23,.20);
}
.header::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.75;
  pointer-events:none;
}
.header.is-scrolled{
  box-shadow: 0 18px 34px rgba(31,26,23,.24);
}

.header__bar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:14px 0;
}

.icons{
  display:flex;
  align-items:center;
  gap:14px;
  justify-self:start;
}

.icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(31,26,23,.74);
  text-decoration:none;
  transition: color var(--tMed) var(--ease), transform var(--tMed) var(--ease), opacity var(--tMed) var(--ease);
}
.icon svg{ width:18px; height:18px; fill:currentColor; display:block; }
.icon:hover{ color:var(--ink); transform:translateY(-1px); opacity:.95; }

.badge{ position:relative; }
.badge__dot{
  position:absolute;
  top:-7px;
  right:-8px;
  min-width:16px;
  height:16px;
  padding:0 5px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold2), var(--gold));
  color:#1a1411;
  font-size:10px;
  line-height:16px;
  text-align:center;
  box-shadow: 0 10px 18px var(--goldGlow);
  border:1px solid var(--lineSoft);
  pointer-events:none;
}
.badge__dot.is-hidden{ display:none; }

.brand{
  justify-self:center;
  text-decoration:none;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.brand__name{
  font-family:"Cinzel", serif;
  font-size:18px;
  letter-spacing:.28em;
  font-weight:500;
  color:var(--ink);
}
.brand__sep{
  width:74px;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.90;
  box-shadow: 0 10px 18px var(--goldGlow);
}
.brand__country{
  font-size:10px;
  letter-spacing:.34em;
  color:rgba(31,26,23,.62);
}

.lang{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}
.lang a{
  text-decoration:none;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(31,26,23,.66);
  transition: color var(--tFast) var(--ease), opacity var(--tFast) var(--ease), transform var(--tFast) var(--ease);
}
.lang a:hover{ color:rgba(31,26,23,.86); transform: translateY(-1px); }
.lang a.is-active{
  color:var(--ink);
  position:relative;
}
.lang a.is-active::after{
  content:"";
  display:block;
  height:2px;
  margin-top:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold2), var(--gold), var(--gold2));
}

.menu-btn{ display:none; }

.header__nav{
  border-top:1px solid var(--lineSoft);
  border-bottom:1px solid var(--lineSoft);
  background: rgba(var(--paperRgb), .80);
}
.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  padding:12px 0;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
}
.nav a{
  text-decoration:none;
  color:rgba(31,26,23,.74);
  padding:8px 2px;
  position:relative;
  transition: color var(--tFast) var(--ease);
}
.nav a.is-active,
.nav a:hover{ color:var(--ink); }
.nav a.is-active::after,
.nav a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
}
.mobile-nav{ display:none; }

/* =========================
   HERO
========================= */
.hero{
  height:520px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(31,26,23,.10);
}
.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: url("/assets/img/deuxtemps_header_1.png") 65% 50%/cover no-repeat;
  transform: translateY(var(--heroParallax, 0px)) scale(.96);
  transform-origin: 65% 50%;
  filter: brightness(1.02) contrast(1.03) saturate(1.05);
  will-change: transform;
}
.hero__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(var(--paperRgb), .26), rgba(var(--paperRgb), .12)),
    radial-gradient(1200px 540px at 22% 55%,
      rgba(var(--paperRgb), .86),
      rgba(var(--paperRgb), .46) 55%,
      rgba(var(--paperRgb), .08) 75%);
}
.hero__inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
.hero__content{
  max-width:680px;
  padding:18px 0;
  margin-left:-90px;
}
.hero__stack{
  width: min(640px, 100%);
  display:flex;
  flex-direction:column;
  gap:26px;
}
.hero__promise{
  margin-top:-30px;
  margin-bottom:12px;
  text-align:center;
}
.hero__promiseTitle{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  letter-spacing:.04em;
  margin:0 0 6px;
  font-size:34px;
  color: rgba(31,26,23,.92);
}
.hero__promiseText{
  margin:0 auto;
  color: var(--muted);
  line-height:1.55;
  max-width:560px;
}
.hero__panel{
  width:100%;
  display:inline-block;
  padding:28px 30px 24px;
  border-radius: var(--radius2);
  background: rgba(var(--paperRgb), .88);
  border:1px solid var(--line);
  box-shadow: var(--shadow3);
  position:relative;
}
.hero__panel::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:16px;
  border:1px solid rgba(184,137,60,.32);
  opacity:.60;
  pointer-events:none;
}
.hero__panel::after{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  width:10px;
  height:10px;
  transform:translateX(-50%) rotate(45deg);
  border:1px solid rgba(184,137,60,.42);
  background: rgba(var(--paperRgb), .92);
  border-radius:2px;
  opacity:.55;
  pointer-events:none;
}
.hero__kicker{
  font-family:"Cormorant Garamond", serif;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-size:14px;
  color:rgba(31,26,23,.84);
  margin-bottom:10px;
}
.hero__title{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  letter-spacing:.06em;
  font-size:58px;
  line-height:1.02;
  margin:0 0 16px;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(184,137,60,.55);
  background: rgba(var(--paperRgb), .92);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
  transition:
    transform var(--tMed) var(--ease),
    box-shadow var(--tMed) var(--ease),
    background var(--tMed) var(--ease),
    border-color var(--tMed) var(--ease),
    opacity var(--tMed) var(--ease);
}
.btn:hover{
  transform: translateY(-2px);
  background: rgba(var(--whiteRgb), .94);
  box-shadow: var(--shadow2), 0 14px 26px var(--goldGlow);
  opacity:.98;
}
.btn:active{ transform: translateY(0); }

.btn--gold{
  border-color: rgba(184,137,60,.75);
  background: linear-gradient(180deg, rgba(243,222,177,.52), rgba(var(--paperRgb), .96));
}

.btn--line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--goldLine);
  background: linear-gradient(180deg, rgba(var(--whiteRgb),.68), rgba(var(--whiteRgb),.40));
  color: var(--ink);
  text-decoration:none;
  box-shadow: 0 10px 18px rgba(31,26,23,.10);
  transition: transform var(--tMed) var(--ease), box-shadow var(--tMed) var(--ease), opacity var(--tMed) var(--ease);
}
.btn--line:hover{
  box-shadow: 0 12px 22px rgba(31,26,23,.12);
  transform: translateY(-1px);
  opacity:.98;
}
.btn--line:active{ transform: translateY(0); }

.btn-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
  background: rgba(var(--paperRgb), .92);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  min-width:128px;
  text-align:center;
  user-select:none;
  transition:
    border-color var(--tMed) var(--ease),
    box-shadow var(--tMed) var(--ease),
    transform var(--tMed) var(--ease),
    background var(--tMed) var(--ease),
    opacity var(--tMed) var(--ease);
}
.btn-mini:hover{
  border-color: rgba(184,137,60,.40);
  box-shadow: 0 12px 22px rgba(184,137,60,.12);
  transform: translateY(-1px);
  background: rgba(var(--whiteRgb), .92);
  opacity:.98;
}
.btn-mini:active{ transform: translateY(0); }

.btn-mini--gold{
  border-color: rgba(184,137,60,.60);
  background: linear-gradient(180deg, rgba(243,222,177,.48), rgba(var(--paperRgb), .96));
  box-shadow: 0 10px 18px rgba(184,137,60,.12);
}
.btn-mini--gold:hover{
  box-shadow: 0 14px 24px rgba(184,137,60,.16);
}

.btn-mini--ghost{ border:1px solid var(--line); background:transparent; }

.btn-mini--icon,
a.btn-mini.btn-mini--icon{
  width: 30px;
  height: 30px;
  min-width: 30px !important;
  max-width: 30px;
  padding: 0 !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-mini--icon svg,
a.btn-mini.btn-mini--icon svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* =========================
   SECTIONS / SHOP TOP
========================= */
.section--shopTop{
  padding: 0 0 64px;
  background:
    radial-gradient(1200px 420px at 50% 0%,
      rgba(243,222,177,.16),
      rgba(var(--bgRgb),0) 60%),
    linear-gradient(180deg, rgba(var(--paperRgb),.62), rgba(var(--bgRgb),0));
}

/* =========================
   SHOPBAR
========================= */
.shopbar{
  background: rgba(var(--paperRgb), .82);
  border-top: 1px solid var(--lineSoft);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--headerH);
  z-index: 60;
  margin: 0;
  box-shadow: 0 14px 26px rgba(31,26,23,.16);
  backdrop-filter: blur(10px);
}
.shopbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.55;
  pointer-events:none;
}
.shopbar__nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:12px 0px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
}
.shopbar__item{
  position:relative;
  border:1px solid transparent;
  background:transparent;
  padding:14px 14px;
  cursor:pointer;
  color:rgba(31,26,23,.72);
  font: inherit;
  text-transform:uppercase;
  letter-spacing:.10em;
  border-radius:999px;
  user-select:none;
  margin-top:10px;
  transition:
    background var(--tMed) var(--ease),
    border-color var(--tMed) var(--ease),
    box-shadow var(--tMed) var(--ease),
    color var(--tMed) var(--ease),
    transform var(--tFast) var(--ease),
    opacity var(--tMed) var(--ease);
}
.shopbar__item:hover{
  color: var(--ink);
  border-color: rgba(184,137,60,.22);
  background: rgba(var(--whiteRgb), .82);
  transform: translateY(-1px);
  opacity:.98;
}
.shopbar__item.is-active{
  color: var(--ink);
  border-color: rgba(184,137,60,.35);
  background: linear-gradient(180deg, rgba(243,222,177,.52), rgba(var(--paperRgb), .96));
  box-shadow: 0 12px 22px rgba(184,137,60,.10);
}

/* Compteurs */
.shopbar__count{
  margin-left:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid var(--lineSoft);
  font-size:12px;
  letter-spacing:.06em;
  color: var(--muted);
  background: rgba(var(--whiteRgb), .58);
  box-shadow: 0 8px 14px rgba(31,26,23,.06);
  opacity:.95;
}
.shopbar__item.is-active .shopbar__count{
  border-color: var(--goldLine);
  color: var(--ink);
  box-shadow: 0 0 0 4px var(--goldGlow);
}

/* =========================
   SHOP FRAME
========================= */
.shopFrame{
  margin-top:14px;
  padding:18px;
  width:100%;
  border-radius:28px;
  background: rgba(var(--paperRgb), .82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow3);
  position:relative;
  margin-bottom:50px;
}
.shopFrame::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.70;
  pointer-events:none;
}
.shop-empty{ margin: 10px 0 0; }

.card.is-filtering{
  opacity:0;
  transition: opacity .18s var(--ease);
}

/* =========================
   GRID + CARDS
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:0;
  align-items: stretch;
}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
  box-shadow: inset 0 0 0 1px var(--innerEdge);
  transition:
    transform var(--tSlow) var(--ease),
    box-shadow var(--tSlow) var(--ease),
    border-color var(--tSlow) var(--ease),
    opacity .18s var(--ease);
  will-change: transform, opacity;
}
.card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--radius) - 8px);
  border: 1px solid rgba(184,137,60,.18);
  opacity: .78;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-6px);
  border-color: var(--lineHard);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--innerEdge);
}

.card__link{ display:block; text-decoration:none; color:inherit; }

.card__media{
  position:relative;
  height:210px;
  background:#e7dfd7;
  overflow:hidden;
  border-bottom:1px solid var(--lineSoft);
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
  transform: translateZ(0);
}
.card:hover .card__media img{ transform: translateZ(0) scale(1.05); }

.card__media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.55;
}

.card__body{
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card__title{
  margin:0;
  font-weight:650;
  line-height:1.2;
  min-height:44px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.card__muted{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  min-height:40px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.card__note{
  margin:0;
  color: rgba(31,26,23,.66);
  font-size:12px;
  line-height:1.35;
}
.card__row{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card__price{
  font-weight:850;
  letter-spacing:.08em;
  font-size:13px;
  color: rgba(31,26,23,.92);
}

/* =========================
   FOOTER (premium fixed)
========================= */
.footer{
  height:var(--footerH);
  padding:15px;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  z-index:90;
  background: rgba(var(--paperRgb), .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow:
    0 -5px 10px rgba(31,26,23,.14),
    0 -2px 0 rgba(31,26,23,.06);
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  opacity:.70;
  pointer-events:none;
}
.footer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 70px at 50% 0%,
      rgba(184,137,60,.10),
      transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.footer__inner{
  position:relative;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.25;
}
.footer__social{
  margin-top:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.footer__social span{
  padding:0 10px;
  color:var(--gold);
}
.footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(184,137,60,.28);
  transition: border-color var(--tFast) var(--ease), opacity var(--tFast) var(--ease);
}
.footer a:hover{
  border-bottom-color: rgba(184,137,60,.60);
  opacity:.95;
}

/* =========================
   REVEAL + BACKTOP
========================= */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.backtop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  border:1px solid var(--line);
  background: rgba(var(--paperRgb), .92);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: var(--shadow2);
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity var(--tMed) var(--ease), transform var(--tMed) var(--ease);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
}
.backtop.is-on{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* =========================
   PRODUCT / BUNDLE
========================= */
.product{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:20px;
  margin-top:18px;
}
.product__media img{
  width:100%;
  height:auto;
  display:block;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background:#e7dfd7;
  box-shadow: inset 0 0 0 1px var(--innerEdge);
}
.product__ctaRow{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bundleForm{ margin-top:12px; }
.bundleTitle{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color: rgba(31,26,23,.72);
  margin-bottom:10px;
}
.bundleGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.bundlePick span{
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(31,26,23,.62);
  margin: 0 0 6px;
}
.bundlePick select{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(var(--paperRgb), .92);
  color: rgba(31,26,23,.88);
  outline:none;
  transition: border-color var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), background var(--tFast) var(--ease);
  appearance:none;
}
.bundlePick select:focus{
  border-color: rgba(184,137,60,.55);
  box-shadow: 0 0 0 5px var(--goldGlow);
}
.bundlePick select:hover{ background: rgba(var(--whiteRgb), .92); }

.scentPreview{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.scentPreview img{
  width:70px;
  height:70px;
  border-radius:14px;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--lineSoft);
}
.bundleActions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  flex-wrap:wrap;
}

/* =========================
   CART (premium + clean)
========================= */
.section--shopTop.section--cart,
.section--shopTop.section--checkout{
  position: relative;
  overflow: hidden;
}
.section--shopTop.section--cart::before,
.section--shopTop.section--checkout::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:360px;
  background: radial-gradient(1200px 260px at 50% 0%,
    rgba(var(--whiteRgb), .78),
    rgba(var(--bgRgb), 0)
  );
  pointer-events:none;
  z-index:0;
}
.section--shopTop.section--cart > .container,
.section--shopTop.section--checkout > .container{
  position:relative;
  z-index:1;
}

.cartIntro{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:22px 24px;
  margin: 12px 0 14px;
  border-radius:26px;
  border:1px solid var(--line);
  background: linear-gradient(180deg,
    rgba(var(--whiteRgb), .70),
    rgba(var(--cardRgb), .92)
  );
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.cartIntro__left{ min-width:0; }
.cartIntro__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  min-width: 340px;
}
.cartKicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--muted);
  opacity:.95;
  margin-bottom:8px;
}
.cartPills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(31,26,23,.14);
  background: rgba(var(--whiteRgb), .60);
  color: var(--ink);
  font-size:13px;
}
.pill--soft{ background: rgba(var(--paperRgb), .86); }
.cartIntro__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.cartSteps{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(31,26,23,.14);
  background: rgba(var(--whiteRgb), .55);
}
.cartStep{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  color: var(--muted);
  font-size:13px;
}
.cartStep__dot{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(31,26,23,.18);
  background: rgba(var(--whiteRgb), .65);
  color: var(--ink);
  font-weight:800;
  font-size:12px;
}
.cartStep.is-active{
  color: var(--ink);
  border:1px solid rgba(31,26,23,.16);
  background: rgba(var(--paperRgb), .86);
}
.cartStep.is-active .cartStep__dot{ border-color: rgba(31,26,23,.22); }

.trustBar{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin:0 0 18px;
}
.trustItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(31,26,23,.14);
  background: rgba(var(--whiteRgb), .55);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.trustIcon{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(31,26,23,.14);
  background: rgba(var(--paperRgb), .86);
  color: var(--ink);
}
.trustTitle{ font-weight:800; font-size:13px; color: var(--ink); line-height:1.1; }
.trustSub{ font-size:12px; color: var(--muted); margin-top:2px; }

.cartLayout{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:22px;
  align-items:start;
}
.cartPanel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow3), inset 0 0 0 1px var(--innerEdge);
  overflow:hidden;
}
.cartHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--whiteRgb), .92), rgba(var(--whiteRgb), .82));
}
.cartHeadTitle{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:13px;
  color: var(--muted);
}
.cartRow{
  display:flex;
  gap:14px;
  padding:16px 18px;
  align-items:center;
  border-top: 1px solid var(--lineSoft);
  transition: transform var(--tFast) ease, box-shadow var(--tFast) ease, background-color var(--tFast) ease;
}
.cartRow:first-child{ border-top:0; }
.cartRow:hover{
  background: rgba(var(--whiteRgb), .22);
  box-shadow: 0 12px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.cartMedia{
  width:74px;
  height:74px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(var(--paperRgb), .92);
  border: 1px solid var(--line);
  flex:0 0 auto;
  box-shadow: inset 0 0 0 1px var(--innerEdge);
}
.cartMedia img{ width:100%; height:100%; object-fit:cover; display:block; }

.cartMain{ min-width:0; flex:1; }
.cartTitle{
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.2;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cartMeta{
  margin-top:6px;
  color: var(--muted);
  font-size:13px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.cartOptions{ margin-top:6px; font-size:13px; color: rgba(31,26,23,.72); }
.cartOptLabel{ color: var(--muted); margin-right:6px; }
.cartOptValue{ font-weight:700; color: rgba(31,26,23,.86); }

.cartQty{ display:flex; align-items:center; gap:8px; }
.qtyBtn{
  width:36px;
  height:36px;
  border-radius:12px;
  border: 1px solid var(--line);
  background: rgba(var(--paperRgb), .92);
  color: var(--ink);
  cursor:pointer;
  transition: transform var(--tFast) ease, box-shadow var(--tFast) ease, background-color var(--tFast) ease;
}
.qtyBtn:hover{
  background: rgba(var(--whiteRgb), .64);
  box-shadow: 0 12px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.qtyBtn:active{ transform: translateY(0); }

.qtyInput{
  width:64px;
  height:36px;
  border-radius:12px;
  border: 1px solid var(--line);
  background: rgba(var(--whiteRgb), .92);
  text-align:center;
  font-weight:800;
}
.qtyInput::-webkit-outer-spin-button,
.qtyInput::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.cartRight{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.cartPrice{ font-weight:900; }

.cartSummary{
  padding:18px;
  position: sticky;
  top: calc(var(--headerH) + 14px);
  align-self:start;
}
.cartSummary h3{
  margin:0 0 10px 0;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cartSummaryRow{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--lineSoft);
}
.cartSummaryRow:first-of-type{ border-top:0; }

.cartActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.cartActions .btn{ flex:1; }

.cartLayout .badge{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  border:1px solid var(--lineSoft);
  background: rgba(var(--paperRgb), .90);
  color: var(--muted);
}
.cartLayout .badge--gold{
  border-color: var(--goldLine);
  background: rgba(184,137,60,.10);
  color: var(--ink);
}
.cartLayout .badge--soft{
  border-color: rgba(31,26,23,.10);
  background: rgba(31,26,23,.04);
  color: rgba(31,26,23,.72);
  opacity: .78;
}

/* =========================
   TOASTS
========================= */
.toastStack{
  position: fixed;
  top: calc(var(--headerH) + 14px);
  right: 14px;
  display: grid;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(var(--whiteRgb), .94);
  box-shadow: var(--shadow2);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.toast.is-in{ transform: translateY(0); opacity: 1; }
.toast__dot{ width:10px; height:10px; border-radius:99px; margin-top: 4px; flex: 0 0 auto; }
.toast__msg{ font-weight:650; color: rgba(31,26,23,.92); line-height: 1.25; }
.toast__close{
  margin-left:auto;
  border:0;
  background:transparent;
  cursor:pointer;
  opacity:.55;
  font-weight:900;
  line-height:1;
}
.toast__close:hover{ opacity:.85; }
.toast--success{ border-color: rgba(34,197,94,.35); }
.toast--success .toast__dot{ background: rgb(34,197,94); }
.toast--warn{ border-color: rgba(245,158,11,.40); }
.toast--warn .toast__dot{ background: rgb(245,158,11); }
.toast--error{ border-color: rgba(239,68,68,.40); }
.toast--error .toast__dot{ background: rgb(239,68,68); }

/* =========================
   CATALOG HEAD
========================= */
.catalogHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding: 8px 0 14px;
}
.catalogHead__left{ max-width: 760px; }
.catalogHead__kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:6px;
}

/* =========================
   AUTH / ACCOUNT / CHECKOUT
========================= */
.formWrap{ max-width: 820px; margin: 0 auto; width:100%; }

.formCard{
  background: linear-gradient(180deg, rgba(var(--whiteRgb), .94), rgba(var(--whiteRgb), .88));
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow3);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.formCard--wide{ max-width: 980px; margin: 0 auto; width:100%; }

.formCard:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 160px at 50% 0%, var(--goldGlow), transparent 60%),
    linear-gradient(90deg, transparent, rgba(184,137,60,.10), transparent);
  opacity:.85;
}

.form{ position: relative; display: grid; gap: 12px; }
.field{ display:grid; gap:6px; }

.label{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(var(--whiteRgb), .92);
  color: var(--ink);
  outline: none;
  transition: box-shadow var(--tFast) ease, border-color var(--tFast) ease, transform var(--tFast) ease, background var(--tFast) ease;
}
.input:hover{ background: rgba(var(--whiteRgb), .98); }
.input:focus{
  border-color: var(--goldLine);
  box-shadow: 0 0 0 5px var(--goldGlow);
}

.help{ font-size: 12px; color: var(--muted); }
.formActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 4px;
}
.formHint{ margin: 6px 0 0 0; color: var(--muted); font-size: 12px; }

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goldLine), transparent);
  margin: 6px 0;
  opacity: .7;
}

.formGrid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cardBox{
  background: rgba(var(--whiteRgb), .94);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.cardBox--full{ grid-column: 1 / -1; }

.cardBox__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cardBox__title{
  font-family: "Cinzel", serif;
  letter-spacing: .06em;
  font-size: 14px;
  text-transform: uppercase;
}

.kv{ display:grid; gap: 10px; }
.kv__row{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--whiteRgb), .92);
  border: 1px solid var(--lineSoft);
  box-shadow: 0 10px 18px rgba(31,26,23,.06);
}
.kv__row span:first-child{
  color: rgba(31,26,23,.62);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.addr{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--lineSoft);
  background: rgba(var(--whiteRgb), .92);
}

/* Grids */
.accountGrid,
.checkoutGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
.accountActions{ display:flex; justify-content:flex-end; margin-top: 14px; }

.miniList{ display:grid; gap: 10px; }
.miniList__row{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(var(--whiteRgb), .92);
  border: 1px solid var(--lineSoft);
}
.miniList__title{ font-weight: 750; }

/* Table wrapper */
.tableWrap{ overflow:auto; }

/* HTML tables (admin etc.) */
.table{
  width:100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  background: rgba(var(--whiteRgb), .94);
}
.table thead th{
  background: linear-gradient(180deg, rgba(var(--whiteRgb), .92), rgba(var(--paperRgb), .96));
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--lineSoft);
  text-align:left;
  vertical-align:top;
}
.table tbody tr:last-child td{ border-bottom:0; }
.table a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(184,137,60,.35);
}
.table a:hover{ border-bottom-color: var(--goldLine); }

/* Checkbox */
.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
  cursor:pointer;
}
.check input{ margin-top:3px; }
.check span{ flex:1; }

/* Topnav user chip */
.userChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(var(--paperRgb),.96), rgba(var(--whiteRgb),.86));
  box-shadow: var(--shadow2);
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.logoutMini{ display:inline-flex; margin-left:8px; }

/* =========================
   ADMIN / DETAILS
========================= */
.details summary{ cursor:pointer; color:var(--ink); font-weight:650; }
.pre{
  margin:10px 0 0 0;
  padding:12px;
  background:rgba(31,26,23,.04);
  border:1px solid var(--lineSoft);
  border-radius:12px;
  overflow:auto;
  font-size:12px;
  line-height:1.35;
}

.userActions{display:flex;align-items:center;gap:10px}
.statusInline{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.select--mini{padding:8px 10px;font-size:13px}

.statusPill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--lineSoft);
  font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(184,137,60,.06);
}
.statusPill[data-status="paid"]{border-color:var(--goldLine)}
.statusPill[data-status="preparing"]{border-color:rgba(100,90,84,.35);background:rgba(100,90,84,.06)}
.statusPill[data-status="shipped"]{border-color:rgba(31,26,23,.25);background:rgba(31,26,23,.04)}
.statusPill[data-status="delivered"]{border-color:rgba(184,137,60,.45);background:rgba(184,137,60,.05)}

.notice{
  padding:12px 14px;border-radius:14px;margin:10px 0 0 0;
  border:1px solid var(--lineSoft);
  background:rgba(var(--whiteRgb), .92)
}
.notice--ok{border-color:rgba(184,137,60,.45)}
.notice--warn{border-color:rgba(31,26,23,.25)}

/* Admin UI (Orders) */
.adminHead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.adminHead--single{align-items:stretch}
.adminToolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.adminSearch{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);
  background:rgba(var(--paperRgb), .92);
  border-radius:999px;
  padding:10px 12px;
  min-width:320px;
  box-shadow: var(--shadow2);
}
.adminSearch svg{width:18px;height:18px;fill:currentColor;opacity:.7}
.adminSearch__input{border:0;background:transparent;outline:none;min-width:240px}
.adminSearch__input::placeholder{opacity:.7}

.adminBoard{display:flex;flex-direction:column;gap:14px}
.adminSection{
  border:1px solid var(--line);
  background:rgba(var(--whiteRgb), .94);
  border-radius:var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow3);
}
.adminSection__summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg, rgba(184,137,60,.10), rgba(184,137,60,0));
}
.adminSection__summary::-webkit-details-marker{display:none}
.adminSection__title{display:flex;align-items:center;gap:10px}
.adminSection__hint{font-size:12px}

.adminSection__badge{
  width:10px;height:10px;border-radius:999px;display:inline-block;
  background:var(--goldLine);
  box-shadow:0 0 0 6px rgba(184,137,60,.10);
}
.adminSection__badge[data-status="preparing"]{background:rgba(100,90,84,.55);box-shadow:0 0 0 6px rgba(100,90,84,.10)}
.adminSection__badge[data-status="shipped"]{background:rgba(31,26,23,.35);box-shadow:0 0 0 6px rgba(31,26,23,.08)}
.adminSection__badge[data-status="delivered"]{background:rgba(184,137,60,.45);box-shadow:0 0 0 6px rgba(184,137,60,.08)}

.adminSection__body{padding:0 0 6px 0}
.adminTable{padding:0 10px 12px 10px}

.adminActions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.adminSelect{min-width:150px}
.adminSelect--big{min-width:220px}

.adminSmall{font-size:12px}
.adminMono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px}

.linkLike{
  border:0;background:transparent;color:var(--gold);
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.linkLike:hover{opacity:.85}

.lang .logoutMini,
.lang .userActions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lang .userChip{ padding: 6px 10px; border-radius: 999px; }

.adminActions{ gap: 8px; }
.statusInline{ gap: 6px; }
.adminSelect{ min-width: 130px; }
.select--mini{ padding: 7px 9px; font-size: 13px; }

.input--warn{
  border-color: rgba(184,137,60,.55);
  box-shadow: 0 0 0 6px rgba(184,137,60,.10);
}

/* =========================
   ABOUT
========================= */
.about__hero{
  padding:22px 22px 18px;
  margin-bottom:18px;
  background: linear-gradient(180deg, rgba(243,222,177,.12), rgba(255,255,255,.0));
}
.about__kicker{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
  margin-bottom:6px;
}
.about__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:start;
}
.about__story{ padding:24px; }

.about__storyHead{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.about__badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--goldLine);
  background: linear-gradient(180deg, rgba(243,222,177,.18), rgba(184,137,60,.06));
  color:var(--ink);
}

.about__prose{
  max-width: 66ch;
  line-height:1.9;
  font-size:16px;
}
.about__p{ margin:0 0 16px 0; }
.about__p--lead{
  font-size:17px;
  line-height:1.85;
  padding-left:14px;
  border-left:2px solid var(--goldLine);
}

.about__rule{
  height:1px;
  width:100%;
  margin:14px 0 18px;
  background: linear-gradient(90deg, var(--goldLine), rgba(184,137,60,0));
}

.about__callout{
  margin:14px 0 18px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--goldLine);
  background: rgba(184,137,60,.08);
  font-weight:750;
}

.about__made{
  margin:10px 0 18px;
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.6);
  font-size:13px;
}
.about__signature{ margin-top:8px; opacity:.85; font-size:14px; }

.about__aside{ display:flex; flex-direction:column; gap:18px; }
.about__card{ padding:18px; }
.about__h3{ margin:0 0 12px 0; letter-spacing:.02em; }

.about__bullets{ list-style:none; padding:0; margin:0; }
.about__bullets li{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.about__bullets li:last-child{ border-bottom:0; }
.about__dot{ color:var(--gold); }

.about__steps{ display:flex; flex-direction:column; gap:10px; }
.about__step{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.about__step:last-child{ border-bottom:0; }
.about__stepN{
  width:34px;height:34px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--goldLine);
  background: rgba(184,137,60,.10);
  font-weight:750;
}

.about__wide{ margin-top:18px; padding:18px; }
.about__values{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.about__value{
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.55);
}
.about__valueTitle{ font-weight:750; margin-bottom:6px; }
.about__cta{ margin-top:16px; }

/* =========================
   ACCOUNT (Shop-like)
========================= */
.accountPage .h2,
.accountPage .h3,
.accountPage .cardBox__title{
  font-family: "Cinzel", serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tabPanel{ display:none; }
.tabPanel.is-active{ display:block; }

.accountNotice{
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--paperRgb), .86);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.accountNotice[data-type="success"]{
  border-color: var(--goldLine);
  box-shadow: 0 0 0 3px var(--goldSoft);
}
.accountNotice[data-type="error"]{ border-color: rgba(180,50,50,.35); }

.editList{ display:flex; flex-direction:column; gap:10px; }

.editRow{
  display:grid;
  grid-template-columns: 25% 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-right:10px solid rgba(31,26,23,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  transition: box-shadow var(--tMed) var(--ease), transform var(--tMed) var(--ease), border-color var(--tMed) var(--ease);
}
.editRow:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
.editRow__label{ color: var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.editRow__value{ color: var(--ink); font-size:13px; }

.editRow__inputWrap .input--inline{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
}

.check--inline{ display:flex; gap:50px; align-items:flex-start; }
.check--inline span{ color: var(--muted); font-size:13px; line-height:1.4; }

.iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.66);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform var(--tFast) ease, box-shadow var(--tFast) ease, border-color var(--tFast) ease, background var(--tFast) ease;
}
.iconBtn:hover{
  transform: translateY(-1px);
  border-color: var(--goldLine);
  box-shadow: 0 0 0 3px var(--goldSoft);
  background: rgba(var(--whiteRgb), .92);
}
.iconBtn.is-hidden{ display:none !important; }

.editRow.is-editing{
  border-color: var(--goldLine);
  box-shadow: 0 0 0 3px var(--goldSoft);
  border-right-color: rgba(184,137,60,.35);
}

/* =========================
   ADMIN — ORDER SHOW (serious sheet)
========================= */
.section--adminShow.section--shopTop{
  padding-top: 26px !important;
  padding-bottom: 22px !important;
}
.section--adminShow .catalogHead{ margin-bottom: 14px !important; }
.section--adminShow .catalogHead__left .h2{ line-height: 1.12; }
.section--adminShow .adminKicker{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.adminShowGrid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items:start;
  margin-top: 12px;
}
.adminSide{ display:flex; flex-direction:column; gap:16px; }
.adminSheet{ padding: 18px; }

.adminSheet__top{
  display:flex;
  gap: 14px;
  justify-content:space-between;
  align-items:flex-start;
}
.adminSheet__brand{
  display:flex;
  gap:8px;
  align-items:baseline;
  margin-bottom: 6px;
}
.adminSheet__brandName{ letter-spacing:.18em; text-transform:uppercase; font-weight: 700; }
.adminSheet__brandMeta{ letter-spacing:.14em; text-transform:uppercase; font-size: 12px; opacity: .88; }

.adminSheet__refRow{ display:flex; gap:10px; align-items:baseline; }
.adminSheet__ref{ font-size: 16px; }

.adminSheet__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 8px;
  align-items:center;
}
.adminSheet__topActions{ text-align:right; }
.adminSheet__hint{ max-width: 280px; font-size: 12px; line-height: 1.35; }

.adminSheet__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adminSheet__label{
  font-size: 11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom: 6px;
}
.adminSheet__value{ font-size: 14px; }
.adminSheet__addr{ font-size: 14px; line-height: 1.45; }

.adminSheet__labelRow{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.adminPackList{ display:flex; flex-direction:column; gap: 10px; }
.adminPackRow{
  display:grid;
  grid-template-columns: 34px minmax(0, 1fr) 120px;
  gap: 12px;
  align-items:center;
  padding: 10px 12px;
  border: 1px solid rgba(var(--inkRgb), .10);
  border-radius: 14px;
  background: rgba(var(--whiteRgb), .70);
}
.adminPackRow__title{ font-weight: 700; line-height: 1.2; }
.adminPackRow__opts{ margin-top: 4px; font-size: 12px; line-height: 1.3; }
.adminPackRow__price{ text-align:right; white-space:nowrap; }

.adminCheck{ display:flex; justify-content:center; align-items:center; }
.adminCheck__box{ position:absolute; opacity:0; pointer-events:none; }
.adminCheck__mark{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(var(--inkRgb), .25);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  display:inline-block;
}
.adminCheck__box:checked + .adminCheck__mark{
  background: rgba(var(--goldRgb), .18);
  border-color: rgba(var(--goldRgb), .55);
}

.adminTotals{ display:flex; flex-direction:column; gap: 8px; }
.adminTotals__row{ display:flex; justify-content:space-between; align-items:baseline; }
.adminTotals__row--total{
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--inkRgb), .18);
  font-weight: 800;
}

.adminSheet__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}

.adminStamp{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 240px;
  justify-content:flex-end;
}
.adminStamp__label{ font-size: 11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.adminStamp__line{ flex: 1; height: 1px; background: rgba(var(--inkRgb), .20); }

.section--adminShow .adminCard{ padding: 16px; }
.section--adminShow .adminCard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* =========================
   RESPONSIVE (propre, non destructif)
   (tu peux le garder : ça n’abîme pas desktop)
========================= */
@media (max-width: 1180px){
  .adminShowGrid{ grid-template-columns: 1fr; }
  .adminSheet__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .cartIntro{ flex-direction:column; }
  .cartIntro__right{ align-items:flex-start; min-width: auto; }
  .cartIntro__actions{ justify-content:flex-start; }
  .trustBar{ grid-template-columns:1fr; }
  .cartSteps{ width:100%; justify-content:space-between; }
  .cartLayout{ grid-template-columns: 1fr; }
  .cartSummary{ position: static; }
  .accountGrid, .checkoutGrid{ grid-template-columns: 1fr; }
  .formGrid2{ grid-template-columns: 1fr; }
}

/* =========================
   PRINT — n’imprimer QUE la fiche admin
========================= */
@media print{
  body.is-printing-sheet *{ visibility:hidden !important; }
  body.is-printing-sheet #printSheet,
  body.is-printing-sheet #printSheet *{ visibility:visible !important; }

  body.is-printing-sheet{ background:#fff !important; }
  body.is-printing-sheet #printSheet{
    position:absolute;
    left:0; top:0;
    width: 100% !important;
    box-shadow:none !important;
    border: none !important;
  }
  body.is-printing-sheet .adminPackRow{
    box-shadow:none !important;
    background:#fff !important;
  }
}

/* =========================
   REDUCED MOTION (OK)
========================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}
/* =========================================================
   FIX: "table" en DIV (Account > Commandes)
   (évite l'empilement en colonne)
========================================================= */
.table{
  width:100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(var(--whiteRgb), .94);
}

/* layout GRID sur les lignes (div-based table) */
.table__head,
.table__row{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
}

.table__head{
  background: linear-gradient(180deg, rgba(var(--whiteRgb), .92), rgba(var(--paperRgb), .96));
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.table__row{
  background: rgba(var(--whiteRgb), .94);
  border-top: 1px solid var(--lineSoft);
}

.table__row > div{ min-width:0; }
.table__row .price{ font-weight: 850; letter-spacing:.04em; }

.table__row a{
  color: var(--ink);
  text-decoration:none;
  border-bottom: 1px solid rgba(184,137,60,.35);
}
.table__row a:hover{ border-bottom-color: var(--goldLine); }

/* =====
====================================================
   IMPORTANT: styles pour VRAIS tableaux HTML uniquement
   (sinon ça flingue les div-based .table)
========================================================= */
table.table{
  width:100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(var(--whiteRgb), .94);
}

table.table thead th{
  background: linear-gradient(180deg, rgba(var(--whiteRgb), .92), rgba(var(--paperRgb), .96));
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

table.table th,
table.table td{
  padding:10px 10px;
  border-bottom:1px solid var(--lineSoft);
  text-align:left;
  vertical-align:top;
}

table.table tbody tr:last-child td{ border-bottom:0; }

/* Renforce un peu le rendu des prix dans les vrais tables */
table.table .price{ font-weight: 850; letter-spacing:.04em; }

/* Table “édition inline” (Compte/Livraison/Facturation) */
table.table.table--edit{
  width:100%;
}

table.table.table--edit thead th:last-child,
table.table.table--edit tbody td:last-child{
  width: 90px;
  text-align: right;
  white-space: nowrap;
}

/* IMPORTANT: neutraliser le style "editRow en grid" quand c'est dans un <table> */
table.table.table--edit .editRow{
  display: table-row !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-right: 0 !important;
}

table.table.table--edit .editRow__label{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

table.table.table--edit .editRow__value{
  color: var(--ink);
  font-size: 14px;
}

table.table.table--edit .editRow__inputWrap{
  margin-top: 8px;
}

table.table.table--edit .editRow__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* Un peu de confort visuel */
table.table.table--edit tbody tr:hover td{
  background: rgba(var(--whiteRgb), .40);
}
/* =========================================================
   MOBILE FIX (à coller TOUT EN BAS)
   - Pas de scroll horizontal dans les menus
   - Menus qui WRAP (2 lignes si besoin)
   - Boutique: 1 item / ligne
   - Cache FR/EN sur mobile (pour centrer la marque)
========================================================= */

@media (max-width: 980px){

  /* Le zoom desktop casse souvent le rendu mobile */
  body{ zoom: 1; }

  @supports not (zoom: 1){
    body{
      transform: none;
      width: auto;
    }
  }

  /* Un peu plus de place utile */
  .container{ padding: 0 12px; }

  /* Header + footer un peu plus compacts */
  :root{
    --headerH: 64px;
    --footerH: 74px;
  }

  body{
    padding-bottom: calc(var(--footerH) + env(safe-area-inset-bottom) + 18px);
  }
  .footer{
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
  }

  /* Hero: stop le décalage desktop */
  .hero__content{ margin-left: 0; }
}

/* MOBILE */
@media (max-width: 720px){

  /* ✅ Cache FR/EN sur mobile (on fera l’auto-lang après) */
  .lang{ display:none !important; }

  /* Header bar: garde le centre vraiment centré */
  .header__bar{
    grid-template-columns: 1fr auto 1fr; /* centre stable */
    gap: 10px;
    padding: 10px 0;
  }

  /* Icônes: cliquables sans être énormes */
  .icons{ gap: 8px; }
  .icon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(var(--whiteRgb), .25);
    border: 1px solid rgba(31,26,23,.08);
  }
  .icon svg{ width: 18px; height: 18px; }

  /* Brand: plus compact */
  .brand__name{ font-size: 14px; letter-spacing: .22em; }
  .brand__sep{ width: 56px; }
  .brand__country{ font-size: 9px; letter-spacing: .28em; }

  /* ✅ MENU (nav) : PAS de scroll horizontal -> WRAP */
  .nav{
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 10px;          /* row-gap + col-gap */
    padding: 10px 0;
    font-size: 10px;        /* réduit la police */
    letter-spacing: .08em;
  }
  .nav a{
    padding: 7px 10px;      /* réduit les boutons */
    border-radius: 999px;
    white-space: nowrap;
  }
  .nav a.is-active::after,
  .nav a:hover::after{
    bottom: -6px;
  }

  /* ✅ SHOPBAR : idem -> WRAP, pas de scroll */
  .shopbar__nav{
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 10px;
    padding: 10px 0;
    font-size: 10px;
    letter-spacing: .08em;
  }
  .shopbar__item{
    margin-top: 0;
    padding: 10px 12px;     /* plus petit */
    border: 1px solid rgba(31,26,23,.10);
    background: rgba(var(--whiteRgb), .18);
    min-height: 38px;
  }
  .shopbar__count{
    margin-left: 8px;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    padding: 0 7px;
  }

  /* ✅ BOUTIQUE : 1 item par ligne */
  .grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Cards: un peu plus compact sur mobile */
  .card__media{ height: 180px; }
  .card__body{ padding: 12px 12px 14px; gap: 8px; }
  .card__title{ font-size: 15px; min-height: 0; }
  .card__muted{ font-size: 12px; min-height: 0; }
  .card__price{ font-size: 13px; }

  /* Boutons: restent confortables sans prendre 3km */
  .btn{ min-height: 40px; padding: 10px 14px; font-size: 11px; }
  .btn-mini{ min-height: 40px; padding: 10px 12px; font-size: 11px; }

  /* Backtop au-dessus du footer fixed */
  .backtop{
    right: 12px;
    bottom: calc(var(--footerH) + 12px);
  }
}

/* Ultra petit */
@media (max-width: 380px){
  .nav{ font-size: 9px; }
  .nav a{ padding: 6px 9px; }
  .shopbar__nav{ font-size: 9px; }
  .shopbar__item{ padding: 9px 10px; }
}



/* =========================================================
   MOBILE HEADER FIX — icons left / brand center / icons right
   (remplace ton ancien bloc "Mobile header...")
========================================================= */

.icons--right{ display:none; } /* hidden by default desktop */
.iconForm{ margin:0; }
button.icon{ border:0; background:transparent; padding:0; }

@media (max-width: 720px){

  /* On cache le bloc lang (FR/EN + userActions desktop) */
  .lang{ display:none !important; }

  /* On force la barre en "positionnement libre" */
  .header__bar{
    display:block !important;          /* 🔥 stop grid => plus de surprise */
    position:relative !important;
    padding:10px 0 !important;
    min-height:76px !important;
  }

  /* LEFT icons */
  .header__bar > .icons.icons--left{
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    gap:10px !important;
  }

  /* RIGHT icons */
  .header__bar > .icons.icons--right{
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;           /* visible on mobile */
    gap:10px !important;
  }

  /* BRAND center */
  .header__bar > .brand{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
  }

  /* Look icônes mobile (même style que les autres) */
  .header__bar .icon{
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
    background: rgba(var(--whiteRgb), .25) !important;
    border: 1px solid rgba(31,26,23,.10) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:rgba(31,26,23,.74) !important;
  }

  .header__bar .icon svg{
    width:18px !important;
    height:18px !important;
    fill:currentColor !important;
    display:block !important;
  }
}

@media (max-width: 380px){
  .header__bar .icon{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
  }
  .header__bar{ min-height:72px !important; }
}

/* =========================================================
   PATCH MOBILE — centrage "MAISON ARTISANALE - FRANCE"
   + boutons cards plus petits
   + prix toujours sur 1 ligne
   (à coller TOUT EN BAS)
========================================================= */

@media (max-width: 720px){

  /* --- Brand (subtitle) : centré proprement même si ça wrap --- */
  .header__bar > .brand{
    /* évite que le texte se fasse "manger" par les icônes */
    max-width: calc(100% - 140px);
    text-align: center;
  }

  .brand__country{
    display:block;
    width:100%;
    text-align:center;
    margin: 0 auto;
    /* si ça revient sur 2 lignes, ça reste centré (et joli) */
    white-space: normal;
    line-height: 1.15;
  }

  /* --- Cards : prix toujours sur 1 ligne --- */
  .card__price{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* --- Actions (les 2 boutons à droite) : plus compacts --- */
  .card__row{
    gap: 8px;
    align-items: center;
  }

  /* ton wrapper des boutons est un <div style="display:flex..."> */
  .card__row > div{
    gap: 8px !important;
  }

  .btn-mini{
    min-width: 0;              /* IMPORTANT: sinon ça fait des pavés */
    min-height: 34px;
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  /* "Ajouter au panier" : autorise un retour ligne si besoin, sans gonfler */
  [data-quick-add-btn]{
    white-space: normal;
    line-height: 1.1;
    max-width: 11.5rem;
  }

  /* "Découvrir" : un chouïa plus lisible sans prendre trop de place */
  .btn-mini--gold{
    padding: 8px 12px;
  }
}

@media (max-width: 380px){
  /* ultra petit : on compresse encore un peu */
  .header__bar > .brand{ max-width: calc(100% - 120px); }
  .btn-mini{ min-height: 32px; padding: 7px 9px; font-size: 9.5px; }
}
/* =========================================================
   SHOPBAR COUNTS — afficher "Tout (6)" etc.
   (à coller TOUT EN BAS pour override le display:none)
========================================================= */

.shopbar__count{ 
  display:inline-flex !important;
}

/* look léger + cohérent */
.shopbar__count{
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--lineSoft);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  background: rgba(var(--whiteRgb), .55);
  box-shadow: 0 8px 14px rgba(31,26,23,.06);
  opacity: .95;
}

.shopbar__item.is-active .shopbar__count{
  border-color: var(--goldLine);
  color: var(--ink);
  box-shadow: 0 0 0 4px var(--goldGlow);
}

/* mobile: un poil plus petit */
@media (max-width: 720px){
  .shopbar__count{ font-size: 10px; height: 17px; padding: 0 6px; }
}

/* =========================================================
   ACCOUNT MOBILE — tables "edit" en mode form (label au-dessus)
   + font-size plus petit (dézoom)
   (uniquement sur mobile)
========================================================= */

@media (max-width: 720px){

  /* un peu plus "dézoom" global dans account */
  .accountPage{
    font-size: 12px;
  }

  /* tables edit: stop header, on passe en fiches */
  .accountPage table.table.table--edit thead{
    display:none;
  }

  .accountPage table.table.table--edit{
    font-size: 11px;                /* plus petit que le reste */
    border-radius: 16px;
  }

  /* chaque ligne = une fiche */
  .accountPage table.table.table--edit tbody tr.editRow{
    display:block !important;
    padding: 10px 10px !important;
    border-bottom: 1px solid var(--lineSoft) !important;
  }
  .accountPage table.table.table--edit tbody tr.editRow:last-child{
    border-bottom: 0 !important;
  }

  /* les cellules empilées */
  .accountPage table.table.table--edit tbody tr.editRow > td{
    display:block !important;
    padding: 0 !important;
    border: 0 !important;
    text-align:left !important;
  }

  /* label (champ) au-dessus */
  .accountPage table.table.table--edit .editRow__label{
    display:block !important;
    margin: 0 0 6px 0 !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    white-space: normal !important;
  }

  /* value / input */
  .accountPage table.table.table--edit .editRow__value{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .accountPage table.table.table--edit .editRow__inputWrap{
    margin-top: 6px !important;
  }

  .accountPage table.table.table--edit .input.input--inline{
    height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .accountPage table.table.table--edit textarea.input.input--inline{
    height: auto !important;
    min-height: 84px !important;
    font-size: 12px !important;
  }

  /* actions à droite, compact */
  .accountPage table.table.table--edit .editRow__actions{
    margin-top: 8px !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap: 8px !important;
  }

  /* si tes icônes sont des .iconBtn : on les mini */
  .accountPage .iconBtn{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  /* checkbox marketing : le texte doit respirer */
  .accountPage .check--inline{
    gap: 12px !important;
    align-items:flex-start !important;
  }
  .accountPage .check--inline span{
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* bouton Enregistrer dans sécurité : un peu plus compact */
  .accountPage .formActions .btn{
    min-height: 38px !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
}

/* ultra petit écran : encore plus mini */
@media (max-width: 380px){
  .accountPage{ font-size: 11px; }
  .accountPage table.table.table--edit{ font-size: 10.5px; }
  .accountPage table.table.table--edit .input.input--inline{ font-size: 11px !important; }
}
/* =========================================================
   ACCOUNT MOBILE — icône d’édition à droite sur la même ligne
========================================================= */
@media (max-width: 720px){

  /* chaque ligne devient une mini-grille : contenu + actions */
  .accountPage table.table.table--edit tbody tr.editRow{
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    padding: 10px 10px !important;
    align-items: center;
  }

  /* label = ligne 1, prend toute la largeur */
  .accountPage table.table.table--edit tbody tr.editRow > td.editRow__label{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
  }

  /* cellule valeur/input = ligne 2 col 1 */
  .accountPage table.table.table--edit tbody tr.editRow > td:nth-child(2){
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    min-width: 0;
  }

  /* actions = ligne 2 col 2 (à droite) */
  .accountPage table.table.table--edit tbody tr.editRow > td.editRow__actions{
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap: 8px !important;
    white-space: nowrap;
  }

  /* boutons/icônes un peu plus compacts */
  .accountPage .iconBtn{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }
}
/* =========================================================
   ACCOUNT TABS — 1 ligne, boutons plus petits (mobile/petit écran)
========================================================= */
@media (max-width: 980px){

  /* le shopbar de la page compte */
  .accountPage .shopbar__nav{
    flex-wrap: nowrap !important;     /* stop 2 lignes */
    overflow-x: auto;                /* swipe horizontal si besoin */
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }

  .accountPage .shopbar__nav::-webkit-scrollbar{ height: 0; }

  .accountPage .shopbar__item{
    flex: 0 0 auto;
    white-space: nowrap;
    margin-top: 0 !important;
    padding: 8px 10px !important;
    min-height: 34px !important;
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }
}

@media (max-width: 380px){
  .accountPage .shopbar__item{
    padding: 7px 9px !important;
    font-size: 9.5px !important;
  }
}
/* =========================================================
   ORDERS TABLE — ultra compact sur mobile, sans scroll horizontal
========================================================= */
@media (max-width: 720px){

  /* wrapper si jamais tu en ajoutes un plus tard */
  .accountPage .tableWrap{ overflow: visible; }

  /* tableau commandes (celui sans table--edit) */
  .accountPage [data-panel="orders"] table.table{
    table-layout: fixed;          /* clé pour éviter le débordement */
    width: 100%;
    font-size: 10px;              /* ✅ énorme réduction */
    letter-spacing: 0;
  }

  .accountPage [data-panel="orders"] table.table th,
  .accountPage [data-panel="orders"] table.table td{
    padding: 6px 6px;             /* ✅ compact */
  }

  .accountPage [data-panel="orders"] table.table thead th{
    font-size: 9px;
    letter-spacing: .08em;
  }

  /* Répartition des colonnes (adapte si tu veux) */
  .accountPage [data-panel="orders"] table.table th:nth-child(1),
  .accountPage [data-panel="orders"] table.table td:nth-child(1){ width: 38%; } /* Référence */

  .accountPage [data-panel="orders"] table.table th:nth-child(2),
  .accountPage [data-panel="orders"] table.table td:nth-child(2){ width: 18%; } /* Total */

  .accountPage [data-panel="orders"] table.table th:nth-child(3),
  .accountPage [data-panel="orders"] table.table td:nth-child(3){ width: 20%; } /* Statut */

  .accountPage [data-panel="orders"] table.table th:nth-child(4),
  .accountPage [data-panel="orders"] table.table td:nth-child(4){ width: 24%; } /* Date */

  /* Empêcher les cellules de pousser le tableau */
  .accountPage [data-panel="orders"] table.table td{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Le lien ref : ellipsis propre */
  .accountPage [data-panel="orders"] table.table td a{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Total toujours lisible */
  .accountPage [data-panel="orders"] table.table td.price{
    font-weight: 800;
    letter-spacing: .02em;
  }
}

@media (max-width: 380px){
  .accountPage [data-panel="orders"] table.table{
    font-size: 9.5px;
  }
  .accountPage [data-panel="orders"] table.table th,
  .accountPage [data-panel="orders"] table.table td{
    padding: 5px 5px;
  }
}
/* =========================================================
   CART MOBILE — Résumé d'abord (plein largeur), puis Articles, puis Trust
   + cache le header premium
   (à coller TOUT EN BAS)
========================================================= */

@media (max-width: 980px){

  /* Le wrapper qui contient Intro + Trust + Layout */
  .section--cart .shopFrame{
    display:flex !important;
    flex-direction:column !important;
    gap: 14px !important;
  }

  /* Cache le header premium du haut sur mobile */
  .section--cart .cartIntro{
    display:none !important;
  }

  /* Ordre global : Layout en premier, puis Trust */
  .section--cart .cartLayout{ order: 1 !important; }
  .section--cart .trustBar{ order: 3 !important; }

  /* À l'intérieur du layout : Résumé d'abord, puis Articles */
  .section--cart .cartLayout{
    display:flex !important;
    flex-direction:column !important;
    gap: 14px !important;
  }

  .section--cart .cartLayout .cartSummary{ order: 1 !important; }
  .section--cart .cartLayout .cartItems{ order: 2 !important; }

  /* Résumé: plein largeur + pas sticky */
  .section--cart .cartSummary{
    position: static !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* sécu: si un style "aside" ou autre le limite */
  .section--cart .cartSummary *{
    max-width: 100%;
  }
}

/* Petit mobile : chips en colonne */
@media (max-width: 720px){
  .section--cart .trustBar{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   CHECKOUT MOBILE — Adresse > Paiement > Trust
   + cache le header premium du haut
   (à coller TOUT EN BAS)
========================================================= */

@media (max-width: 980px){

  /* Le conteneur global (intro + trust + layout) */
  .section--checkout .shopFrame{
    display:flex !important;
    flex-direction:column !important;
    gap: 14px !important;
  }

  /* 1) On cache le header premium */
  .section--checkout .cartIntro{
    display:none !important;
  }

  /* 2) On veut d'abord le layout, ensuite la trustBar */
  .section--checkout .cartLayout{ order: 1 !important; }
  .section--checkout .trustBar{ order: 3 !important; }

  /* 3) Le layout en colonne sur mobile */
  .section--checkout .cartLayout{
    display:flex !important;
    flex-direction:column !important;
    gap: 14px !important;
  }

  /* 4) Ordre interne: Livraison (adresse) puis Paiement (récap/bouton) */
  .section--checkout .cartLayout > .cartPanel:not(.cartSummary){ order: 1 !important; }
  .section--checkout .cartLayout > .cartSummary{ order: 2 !important; }

  /* 5) Important: la card récap doit prendre toute la largeur */
  .section--checkout .cartSummary{
    position: static !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Sécurité: pareil pour le panel livraison */
  .section--checkout .cartLayout > .cartPanel{
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

/* petit mobile: trust chips en colonne */
@media (max-width: 720px){
  .section--checkout .trustBar{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   ADMIN MOBILE — ultra lisible / compact
   - Index: tables sans scroll horizontal, typo mini
   - Show: essentiel d'abord, sidebar dessous, Stripe debug caché
   (à coller TOUT EN BAS)
========================================================= */

@media (max-width: 980px){

  /* ---------- Base admin: dézoom ---------- */
  .adminBoard,
  .adminSection,
  .adminTable,
  .adminShowGrid{
    font-size: 12px;
  }

  .adminSmall{ font-size: 10px !important; }
  .adminMono{ font-size: 10px !important; }

  /* ---------- INDEX: tables compactes + sans slider ---------- */
  .adminTable .tableWrap{
    overflow: visible !important; /* on veut éviter le scroll horizontal */
  }

  .adminTable table.table{
    width: 100% !important;
    table-layout: fixed !important; /* clé anti-débordement */
    font-size: 10px !important;
  }

  .adminTable table.table thead th{
    font-size: 9px !important;
    letter-spacing: .08em !important;
    padding: 6px 6px !important;
  }

  .adminTable table.table td{
    padding: 6px 6px !important;
    vertical-align: top !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Largeurs de colonnes (on serre) */
  .adminTable table.table th:nth-child(1),
  .adminTable table.table td:nth-child(1){ width: 44px !important; }  /* # */

  .adminTable table.table th:nth-child(2),
  .adminTable table.table td:nth-child(2){ width: 150px !important; } /* ref */

  .adminTable table.table th:nth-child(5),
  .adminTable table.table td:nth-child(5){ width: 120px !important; } /* status */

  .adminTable table.table th:nth-child(6),
  .adminTable table.table td:nth-child(6){ width: 86px !important; }  /* total */

  .adminTable table.table th:nth-child(7),
  .adminTable table.table td:nth-child(7){ width: 120px !important; } /* paid_at */

  .adminTable table.table th:nth-child(8),
  .adminTable table.table td:nth-child(8){ width: 150px !important; } /* actions */

  /* ref/email/customer: ellipsis propre */
  .adminRef, .adminCustomer, .adminEmail{
    display:block;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* actions compactes */
  .adminActions{ gap: 6px !important; }
  .adminSelect{ min-width: 110px !important; }
  .select--mini{ padding: 6px 8px !important; font-size: 11px !important; }
  .btn-mini.btn-mini--icon{ width: 32px !important; height: 32px !important; min-width: 32px !important; }

  /* status pill compact */
  .statusPill{
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  /* Header admin: search moins large */
  .adminSearch{ min-width: 0 !important; width: 100% !important; }
  .adminSearch__input{ min-width: 0 !important; width: 100% !important; }

  /* ---------- SHOW: ordre + essentiel ---------- */

  .adminShowGrid{
    display:flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* fiche expédition en premier */
  #printSheet{ order: 1 !important; }

  /* sidebar actions ensuite */
  .adminSide{ order: 2 !important; }

  /* fiche: padding plus compact */
  .adminSheet{ padding: 14px !important; }
  .adminPackRow{
    grid-template-columns: 28px minmax(0, 1fr) 78px !important;
    gap: 10px !important;
    padding: 8px 10px !important;
  }
  .adminPackRow__price{ white-space: nowrap !important; }

  /* badges/labels plus petits */
  .adminSheet__label,
  .adminStamp__label{
    font-size: 10px !important;
    letter-spacing: .10em !important;
  }
  .adminSheet__value,
  .adminSheet__addr{
    font-size: 12px !important;
  }

  /* On cache le gros debug Stripe sur mobile (essentiel only) */
  .adminSide details.details{ display: none !important; }

  /* Dans la card Stripe: on ne garde que les 3-4 lignes utiles (optionnel) */
  .adminSide .cardBox.adminCard:nth-of-type(2) .kv__row:nth-child(n+5){
    display:none !important;
  }

  /* Les boutons du show plus compacts */
  .section--adminShow .catalogHead__right .btn{
    padding: 10px 12px !important;
    font-size: 10px !important;
  }
}

/* ultra petit */
@media (max-width: 380px){
  .adminTable table.table{ font-size: 9.5px !important; }
  .adminTable table.table thead th{ font-size: 8.5px !important; }
  .adminSelect{ min-width: 98px !important; }
}
/* =========================================================
   ADMIN SHOW MOBILE — virer Stripe + stopper le débordement à droite
========================================================= */

@media (max-width: 980px){

  /* 1) Stripe inutile sur mobile : on cache la card entière */
  .section--adminShow .adminSide .cardBox.adminCard:nth-of-type(2){
    display:none !important;
  }

  /* 2) Anti "menu qui sort à droite" (overflow global) */
  .section--adminShow,
  .section--adminShow .container,
  .section--adminShow .container--wide,
  .section--adminShow .shopFrame,
  .section--adminShow .adminShowGrid,
  .section--adminShow .adminSide,
  .section--adminShow .adminSheet{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 3) Tout ce qui peut contenir des longues chaînes => autoriser la casse */
  .section--adminShow .adminMono,
  .section--adminShow .kv__row,
  .section--adminShow .kv__row span,
  .section--adminShow .pre,
  .section--adminShow a,
  .section--adminShow .muted{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 4) Inputs/selects qui débordent parfois */
  .section--adminShow input,
  .section--adminShow select,
  .section--adminShow textarea{
    max-width: 100% !important;
  }

  /* 5) Boutons de la header row : éviter qu'ils poussent la largeur */
  .section--adminShow .catalogHead__right{
    max-width: 100% !important;
  }
  .section--adminShow .catalogHead__right > *{
    max-width: 100% !important;
  }

  /* 6) Si un élément impose une largeur min (rare mais ça arrive) */
  .section--adminShow *{
    min-width: 0 !important;
  }
}
/* =========================================================
   ADMIN SHOW MOBILE — la card Actions doit prendre (presque) toute la largeur
========================================================= */

@media (max-width: 980px){

  /* force le layout à occuper toute la largeur */
  .section--adminShow .shopFrame{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* le conteneur colonne */
  .section--adminShow .adminShowGrid{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* la colonne de droite doit "stretch" */
  .section--adminShow .adminSide{
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* chaque card admin prend full width */
  .section--adminShow .adminSide .cardBox,
  .section--adminShow .adminSide .adminCard{
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* parfois le padding interne donne l'impression "pas full" */
  .section--adminShow .adminSide .adminCard{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
/* =========================================================
   HEADER DESKTOP — mêmes icônes "pill" qu'en mobile
   + supprime la zone Bonjour/lang (inutile)
========================================================= */

/* On cache la zone lang + userchip sur desktop */
.lang{ display:none !important; }

/* On affiche les icônes droite aussi sur desktop */
.icons--right{ display:flex !important; }

/* Barre header en grid stable (déjà le cas), on garde */
.header__bar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}

/* Style "pill" pour les icônes sur desktop */
.header__bar .icon{
  width:40px;
  height:40px;
  border-radius:14px;
  background: rgba(var(--whiteRgb), .25);
  border: 1px solid rgba(31,26,23,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(31,26,23,.74);
}

.header__bar .icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}

/* Hover desktop un poil plus premium */
@media (hover:hover){
  .header__bar .icon:hover{
    background: rgba(var(--whiteRgb), .42);
    border-color: rgba(184,137,60,.22);
    box-shadow: 0 12px 22px rgba(31,26,23,.10);
    transform: translateY(-1px);
  }
}
/* =========================================================
   HEADER DESKTOP — pousser les icônes de droite complètement à droite
========================================================= */

.icons.icons--right{
  justify-self: end !important;      /* clé: colle au bord droit de la grille */
  justify-content: flex-end !important;
}

/* au cas où: idem à gauche (symétrie) */
.icons.icons--left{
  justify-self: start !important;
  justify-content: flex-start !important;
}
/* cache le bouton TOUT dans la shopbar (shop + home si besoin) */
.shopbar__item[data-filter="all"]{
  display:none !important;
}
/* =========================================================
   CART — Mobile layout fix (titres lisibles)
========================================================= */
@media (max-width: 720px){

  /* La grille globale passe en colonne (liste puis résumé) */
  .cartLayout{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Chaque ligne devient une mini-fiche */
  .cartRow{
    display: grid;
    grid-template-columns: 84px 1fr;
    grid-auto-rows: auto;
    gap: 10px 12px;
    align-items: start;

    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--line, rgba(0,0,0,.08));
    background: rgba(255,255,255,.22);
  }

  /* Image */
  .cartMedia{
    grid-column: 1;
    grid-row: 1 / span 4; /* reste à gauche sur toute la fiche */
  }

  .cartMedia img{
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 14px;
  }

  /* Titre + meta prennent toute la largeur dispo */
  .cartMain{
    grid-column: 2 / -1;
  }

  .cartTitle{
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 4px;

    /* ✅ le titre ne doit pas se retrouver “colonne” */
    white-space: normal;
    word-break: break-word;
  }

  .cartTitle .badge{
    margin-left: 8px;
    vertical-align: middle;
  }

  .cartMeta{
    font-size: 12px;
    opacity: .9;
  }

  .cartOptions{
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.25;
  }

  /* ✅ Quantité sous le texte (plus à droite) */
  .cartQty{
    grid-column: 2 / -1;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
  }

  .qtyBtn{
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .qtyInput{
    width: 64px;
    height: 36px;
    text-align: center;
    border-radius: 12px;
  }

  /* ✅ Prix total + retirer sur la même ligne, en bas */
  .cartRight{
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
  }

  .cartPrice{
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .cartRemoveBtn{
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .9;
  }

  /* Le panel "Articles" garde un head mais compact */
  .cartHead{
    padding-bottom: 8px;
  }

  /* Résumé : plein écran, propre */
  .cartSummary{
    position: static;
    width: 100%;
  }
}
/* =========================================================
   CART — Mobile fix v2 (clean + compact + controls aligned)
   À mettre après l'autre bloc cart mobile
========================================================= */
@media (max-width: 720px){

  /* Layout global : plus compact */
  .cartLayout{
    gap: 10px;
  }

  /* ✅ Chaque item : plus compact, pas de fond “glassy” */
  .cartRow{
    /* on passe à 3 colonnes : image | contenu | actions */
    display: grid;
    grid-template-columns: 84px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;

    padding: 10px;
    border-radius: 14px;

    /* ✅ fond clean : rien de “blurry” */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* séparation sobre */
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: none;
    margin: 0;
  }

  /* Image à gauche */
  .cartMedia{
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .cartMedia img{
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 14px;
  }

  /* Titre + unit + options : ligne 1 sur 2 colonnes */
  .cartMain{
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .cartTitle{
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 4px;

    /* lisible */
    white-space: normal;
    word-break: break-word;
  }

  .cartOptions{
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.25;
  }

  .cartMeta{
    margin-top: 4px;
    font-size: 12px;
    opacity: .9;
  }

  /* ✅ Ligne 2 : quantité à gauche, prix+retirer à droite */
  .cartQty{
    grid-column: 2;
    grid-row: 2;

    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .qtyBtn{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .qtyInput{
    width: 60px;
    height: 34px;
    border-radius: 12px;
    text-align: center;
  }

  .cartRight{
    grid-column: 3;
    grid-row: 2;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 0;
  }

  .cartPrice{
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
  }

  .cartRemoveBtn{
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .9;
    white-space: nowrap;
  }

  /* ✅ Moins d’espace entre les items (si tu avais des séparateurs) */
  .cartItems .cartRow + .cartRow{
    margin-top: 8px;
  }
}


/* =========================================================
   FIX: Header toujours blanc (même quand .is-scrolled)
========================================================= */
.header,
.header.is-scrolled{
  background: #EFE6DE !important;
  border-bottom:1px solid #D9CBBE !important;
  color: #241F1B;
}

/* Si tu avais un effet "glass" / blur sur le header, on l'annule */
.header,
.header.is-scrolled{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Optionnel: on garde juste une ombre légère au scroll (clean) */
.header.is-scrolled{
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  border-bottom: 1px solid grey !important;
}
/* =========================================================
   SHOP MODE — cacher le header quand la shopbar est sticky
   - header disparaît en scroll down
   - header réapparaît en scroll up
   - shopbar remonte tout en haut quand header caché
========================================================= */

.header{
  will-change: transform;
  transition: transform .22s var(--ease);
}

/* Quand on est en mode "header caché" */
body.dt-header-hidden{
  --headerH: 0px; /* ✅ clé: la shopbar passe naturellement top:0 */
}

body.dt-header-hidden .header{
  transform: translateY(-110%);
}

/* Optionnel mais agréable: évite un petit “coup” visuel sur certaines pages */
body.dt-header-hidden .header__nav{
  pointer-events: none;
}

/* Quand le header est caché, la shopbar doit être au top */
body.dt-header-hidden .shopbar{
  top: 0 !important;
}

/* Toasts: si tu les utilises en haut, elles suivent aussi */
body.dt-header-hidden .toastStack{
  top: 14px !important;
}
/* =========================================================
   SHOPBAR — plus compacte (PC + tablette + mobile)
   (à coller tout en bas)
========================================================= */

/* Global: on baisse un peu la "barre" */
.shopbar{
  box-shadow: 0 10px 18px rgba(31,26,23,.14);
}

.shopbar__nav{
  padding: 10px 0;         /* au lieu de 12px */
  gap: 10px;              /* un poil plus serré */
}

/* Les pills */
.shopbar__item{
  margin-top: 0;          /* ✅ supprime le gros vide */
  padding: 10px 12px;     /* au lieu de 14px 14px */
  min-height: 36px;       /* compact mais tappable */
}

/* Count badge un peu plus petit */
.shopbar__count{
  height: 16px;
  min-width: 16px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 16px;
}

/* Mobile: encore un cran plus compact */
@media (max-width: 720px){
  .shopbar__nav{
    padding: 10px 0;
    gap: 8px 8px;
  }
  .shopbar__item{
    padding: 9px 10px;
    min-height: 34px;
  }
}
/* =========================================================
   TABLET — Boutique: 2 items par ligne
========================================================= */
@media (max-width: 980px) and (min-width: 721px){
  .grid{
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 14px;
  }

  /* optionnel: un peu moins haut pour garder un rendu propre */
  .card__media{ height: 190px; }
}
/* =========================================================
   FOOTER — normal (uniquement en bas de page)
   (override du footer fixed)
========================================================= */

/* 1) Body : plus besoin de compenser un footer fixed */
body{
  padding-bottom: 24px !important;
}

/* Mobile: idem, on retire aussi le safe-area réservé au footer fixed */
@media (max-width: 980px){
  body{
    padding-bottom: 18px !important;
  }
}

/* 2) Footer : repasse en footer classique */
.footer{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: 0;
  width: 100% !important;
  height: auto !important;
  z-index: 1 !important;

  /* garde le look premium sans “barre collée” */
  margin-top: 42px;
  padding: 18px 0;
  box-shadow: none !important;
}

/* Si tu veux garder une petite séparation propre */
.footer{
  border-top: 1px solid var(--line) !important;
  background: rgba(var(--paperRgb), .92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Optionnel: on enlève l’effet “glow” qui était pensé pour un footer fixed */
.footer::after{
  opacity: .55 !important;
}
/* =========================================================
   FOOTER — en bas de page, sans marge dessous (sticky footer)
========================================================= */

/* 1) Layout sticky footer */
html, body{ height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* ✅ enlève la réserve "footer fixed" */
  padding-bottom: 0 !important;
}

/* ton <main> doit pousser le footer en bas */
main{
  flex: 1 0 auto;
}

/* 2) Footer normal (pas fixed) + pas de marge chelou */
.footer{
  position: static !important;
  margin-top: 0 !important;     /* ✅ plus de “grand vide” */
  min-height: 70px;

  /* garde ton look */
  padding: 18px 0 !important;
  box-shadow: none !important;
}

/* le backtop revient au bas normal */
.backtop{
  bottom: 18px !important;
}
/* =========================================================
   CLEAN OVERRIDES (final)
   - Footer normal (only bottom of page)
   - Tablet: 2 products / row
   - Shopbar compact
========================================================= */

/* Footer: remove fixed behavior everywhere */
html, body{ height:100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom: 0 !important; /* remove old reserved space for fixed footer */
}
main{ flex:1 0 auto; }

.footer{
  position: static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:auto !important;
  z-index:1 !important;
  box-shadow:none !important;
}

/* Backtop no longer needs to float above a fixed footer */
.backtop{ bottom: 18px !important; }

/* Shopbar compact (global) */
.shopbar__nav{ padding: 8px 0 !important; gap: 10px !important; }
.shopbar__item{ margin-top: 0 !important; padding: 10px 12px !important; min-height: 36px !important; }

/* Tablet: 2 items per row (keeps mobile 1 col, desktop 3 col) */
@media (max-width: 980px) and (min-width: 721px){
  .grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}