:root{
  --safe-b: env(safe-area-inset-bottom, 14px);
  --safe-t: env(safe-area-inset-top, 14px);
  --topbar-h: 56px;
  --dock-h: 118px;
}

html, body { height: 100%; }
body{
  margin:0;
  background: #f3a400 url('../img/honey-bg.webp') top center / 100% 100% no-repeat fixed;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}

/* TOPBAR */
.topbar{
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(6px + var(--safe-t)) 14px 6px;
}
.topbar-left{ display:flex; align-items:center; gap:10px; }
.back-btn{
  height:36px; padding: 0 12px;
  display:inline-grid; place-items:center;
  border-radius:12px; border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.22);
  box-shadow: 0 6px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  font-weight:800; cursor:pointer; user-select:none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.back-btn:hover{
  background: rgba(255,255,255,.30);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
.back-btn:active{ transform: translateY(0) scale(.98); }

.langbar{ display:flex; gap:10px; align-items:center; }
.lang-flag{
  width:28px; height:18px; border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.lang-flag:hover{
  transform: translateY(-1px) scale(1.08);
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  filter: saturate(1.1);
}

/* STAGE */
.stage{
  position: fixed; left:0; right:0;
  top: var(--topbar-h);
  bottom: var(--dock-h);
  display:grid; place-items:center;
  padding: 8px 12px;
  box-sizing:border-box;
}
.tiles{
  width:100%; max-width:560px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 3.5vw, 22px) clamp(12px, 3.5vw, 22px);
  justify-items:center; align-items:center;
}
.tiles .tile.hero{ grid-column:1 / -1; }
.tile{ text-decoration:none; display:grid; place-items:center; }
.pic{
  display:grid; place-items:center;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
  transition: transform .15s ease;
}
.tile.hero .pic{ width: min(150px, 22vh); height: min(150px, 22vh); }
.tile:not(.hero) .pic{ width: min(120px, 17vh); height: min(120px, 17vh); }
.pic img{ width:100%; height:100%; object-fit:contain; }
.tile:hover .pic{ transform: scale(.98); }

/* DOCK */
.dock-wrap{
  position: fixed; left:0; right:0; bottom:0; z-index:30;
  height: var(--dock-h);
  display:grid; place-items:end center;
  padding: 0 14px max(12px, var(--safe-b));
  pointer-events:none;
}
.dock{
  pointer-events:auto;
  position:relative;
  width: min(560px, calc(100% - 24px));
  height: 74px;
  border-radius: 26px;
  background: rgba(255,255,255,.20);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content: space-evenly;
  padding:0 12px;
  transform: translateY(-8px);
  touch-action: none;
}
.dock-item{
  position:relative;
  width:48px; height:48px; border-radius:16px;
  display:grid; place-items:center;
  transform-origin:center bottom;
  transition: transform .12s ease, box-shadow .12s ease, translate .12s ease, background .12s ease;
  will-change: transform;
  user-select:none;
  background: radial-gradient(120% 140% at 30% 20%, #fff 0%, #f3f3f3 35%, #e8e8e8 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
}
.dock-item:active{ transform: translateY(-4px) scale(1.12); }
.dock-item.emoji{ font-size:26px; line-height:1; }
.dock-item.avatar{ border-radius:50%; padding:0; overflow:hidden; background: linear-gradient(135deg, #dfeeff, #ffffff); }
.dock-item.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.dock-item.avatar .fallback{ font-size:20px; }
.dock-item svg{ width:26px; height:26px; stroke:#1a1a1a; }

.badge{
  position:absolute; right:-6px; top:-6px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#ff2b2b; color:#fff;
  font-weight:700; font-size:11px; display:none; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.dock:hover .dock-item{ transition: transform .08s ease; }
@media (min-width:768px){ .dock-item.hover-boost{ transform: translateY(-8px) scale(1.35); } }
@media (max-width:380px){ .dock{ height:70px; } .dock-item{ width:46px; height:46px; } .dock-item.emoji{ font-size:24px; } }

/* POPUPS + anim from/to dock */
.glass-overlay{
  position: fixed; inset:0; z-index: 2147483647;
  display:none; align-items:center; justify-content:center;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  --fromX: 0px; --fromY: 10px;
}
.glass-overlay.open{ display:flex !important; }
.glass-panel{
  width: min(560px, calc(100% - 28px));
  max-height: min(74vh, 560px);
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  box-shadow: 0 24px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.65);
  overflow: hidden;
  display:flex; flex-direction:column;
  transform: translate3d(var(--fromX), var(--fromY), 0) scale(.72);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .14s ease;
  will-change: transform, opacity;
}
.glass-overlay.open .glass-panel{ transform: translate3d(0,0,0) scale(1); opacity: 1; }
.glass-overlay.open.closing .glass-panel{ transform: translate3d(var(--fromX), var(--fromY), 0) scale(.72); opacity: 0; }

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.6));
}
.panel-title{ font-weight:800; letter-spacing:.3px; color:#1a1a1a; }
.panel-close{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}
.panel-close:hover{ background: rgba(0,0,0,.10); transform: scale(1.05); }

.panel-body{ padding: 12px; overflow:auto; flex:1; }
.panel-foot{ padding: 12px; border-top: 1px solid rgba(0,0,0,.06); display:grid; gap:8px; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55)); }

/* Inputs */
.field{ display:grid; gap:6px; margin-bottom:10px; }
.label{ font-size:12px; font-weight:700; color:#333; }
.input, .textarea{
  width:100%; border:1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.04);
  border-radius:12px; padding:10px 12px; font: inherit; outline:none;
  transition:border .12s ease, background .12s ease, box-shadow .12s ease;
}
.input:focus, .textarea:focus{ border-color:#111; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.textarea{ min-height:86px; resize:vertical; }

.btn{ appearance:none; border:0; cursor:pointer; height:42px; border-radius:12px; font-weight:800; display:grid; place-items:center; transition: transform .08s ease, opacity .08s ease, box-shadow .08s ease; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:#111; color:#fff; box-shadow: 0 8px 16px rgba(0,0,0,.20); }
.btn-ghost{ background: rgba(0,0,0,.06); color:#111; }

/* Compact Adresse & Vérif */
#address-modal .glass-panel{ max-height: min(68vh, 520px) !important; }
#address-modal .panel-head{ padding: 8px 10px !important; }
#address-modal .panel-body{ padding: 6px 10px 4px !important; }
#address-modal .panel-foot{ padding: 8px 10px 10px !important; gap: 6px !important; }
#address-modal .field{ gap: 4px !important; margin: 0 0 8px !important; }
#address-modal .label{ font-size: 12px !important; font-weight:700 !important; }
#address-modal .input, #address-modal .textarea{
  font-size:14px !important; padding:8px 10px !important;
  border-radius:10px !important; border:1px solid rgba(0,0,0,.08) !important;
  background: rgba(0,0,0,.04) !important; box-sizing:border-box !important;
  -webkit-appearance:none !important; appearance:none !important;
}
#address-modal .input{ height:34px !important; min-height:34px !important; line-height:1.2 !important; }
#address-modal .textarea{ min-height:56px !important; max-height:120px !important; }
#address-modal .btn{ height:38px !important; border-radius:10px !important; font-size:14px !important; }

#verify-modal .panel-head{ padding: 10px 12px !important; }
#verify-modal .panel-body{ padding: 8px 10px !important; }
#verify-modal .panel-foot{ padding: 10px 12px !important; gap: 6px !important; }
#verify-modal .field{ gap:4px !important; margin-bottom:8px !important; }
#verify-modal .label{ font-size:12px !important; font-weight:700 !important; }
#verify-modal input[type="text"], #verify-modal .input{
  height:36px !important; min-height:36px !important;
  font-size:14px !important; padding:8px 10px !important;
  border-radius:10px !important; box-sizing:border-box !important;
  -webkit-appearance:none !important; appearance:none !important;
}
#verify-modal .btn{ height:38px !important; border-radius:10px !important; font-size:14px !important; }

/* Tableau Panier */
.table-wrap{
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.cart-table{ width:100%; border-collapse:separate; border-spacing:0; font-weight:600; }
.cart-table thead th{
  text-align:left; padding:12px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  border-bottom:1px solid rgba(0,0,0,.06);
  position: sticky; top:0; z-index:1;
}
.cart-table tbody td{ padding:10px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:middle; }
.cart-table tbody tr:nth-child(odd){ background: rgba(255,255,255,.50); }
.cart-table tbody tr:nth-child(even){ background: rgba(255,255,255,.65); }
.col-prod{ width:55%; }
.col-qty{ width:20%; text-align:center; }
.col-price{ width:20%; text-align:right; white-space:nowrap; }
.col-del{ width:5%; text-align:center; }
.qty{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:6px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:2px 6px; }
.qty-btn{ width:26px; height:26px; border-radius:999px; border:0; cursor:pointer; background: rgba(0,0,0,.06); font-weight:900; line-height:26px; }
.del-btn{ width:30px; height:30px; border-radius:10px; border:0; cursor:pointer; background: rgba(0,0,0,.06); font-weight:900; }
.cart-summary{ display:flex; justify-content:flex-end; gap:14px; align-items:center; padding:10px; font-weight:800; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75)); border-top:1px solid rgba(0,0,0,.06); border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.empty-msg{ padding:20px; text-align:center; font-weight:700; opacity:.7; }

/* === HOT PATCH: Verify Result modal === */
#verify-result-modal .panel-body{ padding:12px !important; }
#verify-result-modal .vr-card{
  display:grid !important; gap:14px !important;
  animation: vr-pop .22s ease both !important;
}
@keyframes vr-pop{ from{ transform:translateY(6px) scale(.98); opacity:.0 } to{ transform:none; opacity:1 } }

#verify-result-modal .vr-header{
  display:grid !important;
  grid-template-columns: 104px 1fr !important;
  gap:12px !important; align-items:center !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:16px !important; padding:12px !important;
  background:rgba(0,0,0,.03) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}
@media (min-width:560px){
  #verify-result-modal .vr-header{ grid-template-columns: 120px 1fr !important; }
}

/* Vignette compacte et lisible */
#verify-result-modal .vr-thumb{
  width:100% !important; height:110px !important;
  border-radius:14px !important; overflow:hidden !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:#fff !important; border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
#verify-result-modal .vr-thumb img{
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; display:block !important;
}

#verify-result-modal .vr-name{
  margin:0 0 6px !important;
  font-weight:900 !important; font-size: clamp(18px, 3.5vw, 22px) !important;
}
#verify-result-modal .vr-badges{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-bottom:8px !important; }
#verify-result-modal .vr-badge{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:6px 10px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important;
  border:1px solid rgba(0,0,0,.06) !important; background:rgba(0,0,0,.04) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}
#verify-result-modal .vr-badge.ok{
  color:#0f5132 !important; background:linear-gradient(180deg,#d1fae5,#a7f3d0) !important; border-color:#34d399 !important;
}
#verify-result-modal .vr-badge.cat{
  color:#1f2937 !important; background:linear-gradient(180deg,#e0f2fe,#bae6fd) !important; border-color:#93c5fd !important;
}
#verify-result-modal .vr-badge.code code{
  font-family: ui-monospace, Menlo, Consolas, monospace !important; font-weight:900 !important;
}

/* Méta + description */
#verify-result-modal .vr-meta{ display:grid !important; gap:6px !important; }
#verify-result-modal .vr-meta .row{ display:grid !important; grid-template-columns: 1.25fr 1.75fr !important; gap:10px !important; }
#verify-result-modal .vr-meta dt{ font-weight:800 !important; font-size:10px !important; opacity:.85 !important; }
#verify-result-modal .vr-meta dd{ margin:0 !important; font-weight:800 !important; }

#verify-result-modal .vr-descbox{
  border:1px solid rgba(0,0,0,.06) !important; border-radius:14px !important; padding:10px !important;
  background:rgba(0,0,0,.035) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
  max-height:180px !important; overflow:auto !important;
}
#verify-result-modal .vr-desctitle{ font-size:12px !important; font-weight:900 !important; opacity:.7 !important; margin-bottom:6px !important; }
#verify-result-modal .vr-desc{ font-size:14px !important; line-height:1.45 !important; white-space:pre-line !important; }

/* ===== Transition vers page catégorie — fondu garanti ===== */
.tiles{ position:relative; }
.tiles .tile,
.tiles .tile .pic{
  will-change: transform, opacity, filter;
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.84,.31,1),
    filter .9s ease;
}

/* Quand l'anim démarre, on FAIT FONDRE tout ce qui n'est pas la tuile cliquée */
.tiles.animating .tile:not(.zooming),
.tiles.animating .tile:not(.zooming) .pic,
.tiles.animating .tile:not(.zooming) *{
  opacity: 0 !important;
  transform: none !important;     /* évite des décalages bizarres */
  filter: none !important;
  pointer-events: none !important;
}

/* La tuile cliquée passe au-dessus (nous, on anime .pic en JS) */
.tiles .tile.zooming{ z-index: 60; }
body.cat-anim{ pointer-events:none; }

/* ===== Vues SPA ===== */
.view{ width:100%; height:100%; display:none; overflow:auto; 
  overscroll-behavior: contain; padding: 8px 6px; 
  padding-bottom: calc(var(--dock-h,118px) + 12px);
}
.view.active{ display:block; }

/* ===== Barre titre produits ===== */
.prod-titlebar{
  position: sticky; top: 0; z-index: 5;
  padding: 6px 2px 10px;
  /* petit dégradé pour détacher sous le header */
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  backdrop-filter: blur(2px);
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 14px rgba(0,0,0,.10);
  font-weight:900; letter-spacing:.4px; text-transform: uppercase;
}

/* ===== Grid produits ===== */
.prod-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (min-width:560px){
  .prod-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== Card "Apple glass" ===== */
.card{
  display:grid; gap:10px; padding:12px;
  border-radius:22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.card:active{ transform: translateY(1px); }

/* vignette bien contenue */
.thumb{
  height: 140px; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.thumb img{
  width:100%; height:100%; object-fit:contain; display:block;
}

.title{ font-weight:900; line-height:1.2; font-size: 15px; }
.meta{ font-size:12px; opacity:.7; display:flex; gap:8px; }
.price{ font-weight:900; }

.card .actions{ display:flex; justify-content:space-between; align-items:center; }
.card .btn-mini{
  height:36px; padding:0 14px; border-radius:12px; border:0; cursor:pointer;
  font-weight:900; background:#111; color:#fff;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}

/* ===== Cards produits horizontales (from product.php) ===== */
.product-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  background: #0b1220; /* même couleur partout */
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  overflow: hidden; /* masque tout ce qui dépasse */
  transition: transform .16s ease, box-shadow .16s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.32);
}

/* Colonne image — dégradé contenu à l'intérieur => coins propres */
.product-image {
  position: relative;
  width: 112px;
  min-width: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1220;  /* même fond que la card sur les bords */
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;     /* au cas où */
}
/* dégradé clair placé à l'intérieur, sans toucher aux coins */
.product-image::before{
  content:"";
  position:absolute;
  inset:6px;                 /* marge intérieure pour éviter les bords */
  border-radius: 12px;       /* suit l'arrondi, mais plus petit */
  background: radial-gradient(ellipse at 30% 30%,
              #f8fafc 0 58%,
              #e5e7eb 74%,
              rgba(229,231,235,0) 100%);
  pointer-events:none;
  z-index:0;
}
.product-image img {
  position: relative;
  z-index: 1;               /* au-dessus du pseudo-élément */
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

/* === badge seller en bas, centré sur l'image === */
.product-image .badge-seller {
  position: absolute;
  z-index: 2;               /* au-dessus de tout */
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17,24,39,0.85);
  color: #e5e7eb;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  white-space: nowrap;
}

.product-content {
  flex: 1;
  min-width: 0; /* wrap ok */
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
}

.badges-row {
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
/* on ne met plus badge-seller ici */
.badge-seller, .badge-strain {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.10);
}
.badge-strain { background:#065f46; color:#d1fae5; }
/* .badge-seller utilisé uniquement dans .product-image ci-dessus */

.product-name {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.3;
  margin: 0;
  white-space: normal;
  overflow-wrap:anywhere;
  word-break: break-word;
}

/* Description: 2 lignes max + "..." */
.product-meta{
  font-size: 13px;
  color: #c7d2fe;
  line-height: 1.35;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;        /* <-- coupe à 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;      /* <-- ajoute les ... */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ===== Slider prix — propre (séparation + auto défilement si besoin) ===== */
.price-wrap{
  position: relative;
  margin-top: 6px;
}

/* Par défaut: affichage simple en flex (séparation visible) */
.price-list{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 2px 0;
  scrollbar-width: none;
}
.price-list::-webkit-scrollbar{ display:none; }

/* Quand on construit une piste pour animer */
.price-track{
  display: inline-flex;
  gap: 8px;
  will-change: transform;
  animation: price-marquee var(--dur, 10s) linear infinite;
}
.price-list:hover .price-track{ animation-play-state: paused; }

@keyframes price-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* on défile d'une largeur de set (contenu dupliqué) */
}

/* Tes badges inchangés */
.price-chip{
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 10px;
  background: #e5e7eb;
  color: #0f172a;
  border: 1px solid rgba(15,23,42,0.18);
  box-shadow: 0 6px 16px rgba(2,6,23,0.18);
}

/* fondu discret aux bords (optionnel) */
.price-wrap::before,
.price-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:22px; pointer-events:none; z-index:2;
}
.price-wrap::before{ left:0;  background:linear-gradient(to right, #0b1220, rgba(11,18,32,0)); }
.price-wrap::after{  right:0; background:linear-gradient(to left,  #0b1220, rgba(11,18,32,0)); }
/* Respecte l'attribut hidden, même si des styles !important existent */
.topbar .back-btn[hidden] { display: none !important; visibility: hidden !important; }

/* Cart actions — compact, no underline, gradients */
a#cart-edit-address,
a#cart-checkout {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 8px 12px;          /* plus petit */
  height: 34px;               /* plus petit */
  font-size: 13px;            /* plus petit */
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;        /* coins arrondis */
  text-decoration: none !important;      /* pas de soulignement */
  -webkit-text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .18s ease, filter .12s ease, background .18s ease, border-color .18s ease;
}

/* Modifier mon adresse — ambre */
a#cart-edit-address {
  background: linear-gradient(180deg, #ffd271, #f5a524);
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
a#cart-edit-address:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
a#cart-edit-address:active { transform: translateY(0); }

/* Commander — noir avec léger dégradé */
a#cart-checkout {
  background: linear-gradient(180deg, #1f1f22, #0f0f10);  /* gradient subtil */
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
a#cart-checkout:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
a#cart-checkout:active { transform: translateY(0); }

/* Focus ring discret, cohérent (ambre) */
a#cart-checkout:focus,
a#cart-edit-address:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,165,36,.32);
}
/* ===== Modals — boutons unifiés (cart + verify + autres) ===== */

/* rangée de boutons soignée */
.glass-panel .panel-foot{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; padding-top:10px;
}

/* base bouton */
.glass-panel .panel-foot .btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:8px 12px; height:34px; font-size:13px; font-weight:600; line-height:1;
  border-radius:10px; border:1px solid transparent;
  cursor:pointer; user-select:none;
  text-decoration:none !important; -webkit-text-decoration:none !important;
  transition: transform .12s ease, box-shadow .18s ease, filter .12s ease,
              background .18s ease, border-color .18s ease, color .18s ease;
}
.glass-panel .panel-foot .btn:focus{
  outline:none; box-shadow:0 0 0 3px rgba(245,165,36,.32);
}

/* primaire — noir dégradé (comme “Commander”) */
.glass-panel .panel-foot .btn-primary{
  background: linear-gradient(180deg, #1f1f22, #0f0f10);
  color:#fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.glass-panel .panel-foot .btn-primary:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-panel .panel-foot .btn-primary:active{ transform: translateY(0); }

/* ghost — translucide (comme bouton “Fermer”) */
.glass-panel .panel-foot .btn-ghost{
  background: rgba(255,255,255,.10);
  color:#fff;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 4px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-panel .panel-foot .btn-ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 6px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-panel .panel-foot .btn-ghost:active{ transform: translateY(0); }

/* (optionnel) ambre — pour d'autres CTA comme “Modifier mon adresse” */
.glass-panel .panel-foot .btn-amber{
  background: linear-gradient(180deg, #ffd271, #f5a524);
  color:#1a1a1a;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.glass-panel .panel-foot .btn-amber:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
.glass-panel .panel-foot .btn-amber:active{ transform: translateY(0); }
/* ===== Address Saved modal – meilleur contraste & fermeture overlay ===== */
#address-saved-modal .order-heading{
  color:#1c1c1e;             /* titre bien lisible sur fond clair */
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:none;
}
#address-saved-modal .order-msg{
  color:#3a3a3c;             /* texte descriptif */
}
#address-saved-modal .order-meta{
  color:#1c1c1e;             /* ligne d’adresse */
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.12);
}

/* Icône miel plus lisible */
#address-saved-modal .status-icon.is-honey{
  color:#1a1a1a;
  background:linear-gradient(180deg,#ffd271,#f5a524);
  border-color:rgba(0,0,0,.16);
  box-shadow:0 10px 28px rgba(245,165,36,.30), 0 0 22px rgba(255,210,113,.32);
}

/* S'assure que l'overlay capte bien les clics pour fermer */
.glass-overlay{
  position:fixed; inset:0; z-index:9999;
}
.glass-overlay.open{
  pointer-events:auto;
  background:rgba(0,0,0,.45);             /* léger assombrissement */
  backdrop-filter:blur(2px);
}
.glass-overlay .glass-panel{
  pointer-events:auto;
}
/* --- Order modal (minimal) --- */
.glass-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.glass-overlay.open {
  pointer-events: auto; opacity: 1;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.glass-panel {
  position: relative; margin: 6vh auto 0; max-width: 520px; width: min(92vw,520px);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.80));
  border: 1px solid rgba(0,0,0,.10); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateY(12px) scale(.98); transition: transform .18s ease;
}
.glass-overlay.open .glass-panel { transform: translateY(0) scale(1); }

.panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.08); }
.panel-title { font-weight:800; color:#1c1c1e; }
.panel-close { display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); cursor:pointer; }
.panel-close:hover { background:rgba(0,0,0,.10); }

.panel-body { padding:16px 18px; color:#1c1c1e; }
.panel-foot { display:flex; gap:10px; justify-content:flex-end;
  padding:12px 14px; border-top:1px solid rgba(0,0,0,.08); }

/* Boutons réutilisés */
.btn { user-select:none; text-decoration:none !important; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:12px 16px; border-radius:14px; border:1px solid transparent; cursor:pointer; font-weight:700; }
.btn-primary { color:#fff; background:linear-gradient(180deg,#2a2a2d,#151516);
  border-color:rgba(255,255,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 8px 22px rgba(0,0,0,.35); }
.btn-amber { color:#1a1a1a; background:linear-gradient(180deg,#ffd271,#f5a524);
  border-color:rgba(0,0,0,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px rgba(245,165,36,.30); }
.btn-xl { padding:14px 18px; min-width:120px; border-radius:16px; font-size:16px; }
#cart-checkout.is-busy { opacity:.75; pointer-events:none; }

/* Centre & icône de statut */
.order-result { display:grid; place-items:center; gap:12px; text-align:center; }
.status-icon {
  width:64px; height:64px; display:grid; place-items:center; border-radius:20px;
  font-size:28px; font-weight:800; background:#111; color:#fff;
  border:1px solid rgba(255,255,255,.2); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.status-icon.is-success { background:#1f6e3d; }
.status-icon.is-error   { background:#6e1f1f; }
.order-heading { margin:4px 0 0 0; color:#1c1c1e; font-weight:800; }
.order-msg { color:#3a3a3c; }
.order-meta { margin-top:6px; padding:8px 10px; border-radius:12px;
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); color:#1c1c1e; }

  /* ===== Séparateur "Sélectionner une quantité :" ===== */
.mlz-apple.mlz-detail .mlz-section-title{
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 10px; font-size: 13px; font-weight: 700;
  color: #D1D1D6; letter-spacing: .2px;
}
.mlz-apple.mlz-detail .mlz-section-title::before,
.mlz-apple.mlz-detail .mlz-section-title::after{
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}
.mlz-apple.mlz-detail .mlz-section-title::before{
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14));
}

/* (option) badges un peu plus petits sur la page détail */
.mlz-apple.mlz-detail .badge-price{
  padding: 6px 12px;
  font-size: 12px;
  min-height: 30px;
}
/* === Bouton "Ajouter au panier" — version compacte === */
.mlz-apple.mlz-detail .mlz-btn-add{
  padding: 8px 14px !important;     /* était ~12px 18px */
  font-size: 13px !important;       /* un poil plus petit */
  line-height: 1 !important;
  border-radius: 14px !important;   /* moins bombé */
  gap: .4rem !important;
  margin-top: 8px !important;       /* moins d'espace au-dessus */
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}

/* très petits écrans : encore plus fin */
@media (max-width: 380px){
  .mlz-apple.mlz-detail .mlz-btn-add{
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    border-radius: 12px !important;
  }
}

/* état disabled inchangé mais plus léger visuellement */
.mlz-apple.mlz-detail .mlz-btn-add:disabled{
  opacity: .6 !important;
  box-shadow: none !important;
}