:root{
  --white:#ffffff;
  --paper:#f7f6f2;
  --navy:#0f1638;
  --navy-soft:#5a6180;
  --orange:#ff5a1f;
  --orange-deep:#e8480f;
  --orange-tint:#fff1ea;
  --line:rgba(15,22,56,0.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--navy);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  touch-action:manipulation;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ---------- ANNOUNCE BAR ---------- */
.announce{
  position:relative; overflow:hidden;
  background:var(--navy); color:#fff;
  padding:11px 0;
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease;
}
.announce.member{ background:var(--orange-deep); }
.announce::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,90,31,0.35), transparent);
  width:40%;
  animation:sheen 3.2s ease-in-out infinite;
}
.announce.member::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}
@keyframes sheen{
  0%{ transform:translateX(-120%); }
  60%,100%{ transform:translateX(320%); }
}
.announce-inner{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk'; font-size:13px; letter-spacing:.2px;
}
.announce-inner b{
  font-family:'JetBrains Mono', monospace; font-weight:600;
  color:var(--orange); letter-spacing:.5px;
}
.announce.member .announce-inner b{ color:#fff; }
.announce-inner .spark{
  width:6px; height:6px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 8px var(--orange);
  animation:pulseDot 1.6s ease-in-out infinite;
}
.announce.member .announce-inner .spark{ background:#fff; box-shadow:0 0 8px #fff; }
@keyframes pulseDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(1.5);}}
.announce-inner .sep{ color:rgba(255,255,255,0.35); }
@media (max-width:560px){
  .announce-inner{ font-size:11.5px; gap:7px; }
  .announce-inner .full{ display:none; }
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:'Bebas Neue', sans-serif;
  font-size:25px; letter-spacing:3px;
  display:flex; align-items:center; gap:8px;
}
.logo .dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}
nav{display:flex; align-items:center; gap:clamp(18px,3vw,44px);}
.navlinks{display:flex; gap:30px; font-size:13px; letter-spacing:.3px; color:var(--navy-soft); font-weight:500;}
.navlinks a{position:relative; padding-bottom:4px; transition:color .25s;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--orange);transition:width .25s;}
.navlinks a:hover{color:var(--navy);}
.navlinks a:hover::after{width:100%;}
.nav-icons{display:flex; align-items:center; gap:18px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); transition:border-color .25s, background .25s, transform .25s;
  position:relative;
  cursor:pointer;
  background:none;
}
.icon-btn:hover{border-color:var(--orange); background:var(--orange-tint); transform:translateY(-2px);}
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%;
  background:var(--orange); color:#fff; font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk';
  transition:transform .2s ease;
}
.icon-btn .badge.pop{ animation:badgePop .35s ease; }
@keyframes badgePop{ 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }
@media (max-width:820px){ .navlinks{display:none;} }

.account-chip{
  display:flex; align-items:center; gap:8px;
  padding:6px 14px 6px 6px; border-radius:100px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color .25s, background .25s;
}
.account-chip:hover{border-color:var(--orange); background:var(--orange-tint);}
.account-chip .avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-family:'Space Grotesk';
  flex-shrink:0;
}
.account-chip .name{ font-size:12.5px; font-weight:600; white-space:nowrap; }

.hamburger{
  display:none;
  width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center;
  border:1px solid var(--line); background:none; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.hamburger:hover{border-color:var(--orange); background:var(--orange-tint);}
.hamburger span{
  display:block; width:16px; height:1.6px; background:var(--navy);
  position:relative; transition:transform .3s ease, opacity .3s ease, background .3s ease;
}
.hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:0; width:16px; height:1.6px; background:var(--navy);
  transition:transform .3s ease, top .3s ease;
}
.hamburger span::before{ top:-5px; }
.hamburger span::after{ top:5px; }
header.open .hamburger span{ background:transparent; }
header.open .hamburger span::before{ top:0; transform:rotate(45deg); background:var(--orange); }
header.open .hamburger span::after{ top:0; transform:rotate(-45deg); background:var(--orange); }

.mobile-menu{
  position:fixed; top:0; left:0; right:0; z-index:49;
  background:var(--white);
  padding:100px 24px 32px;
  display:flex; flex-direction:column; gap:4px;
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.65,0,.24,1);
  box-shadow:0 20px 40px rgba(15,22,56,0.12);
  max-height:100vh; overflow-y:auto;
}
header.open + .mobile-menu, .mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  font-family:'Bebas Neue'; font-size:26px; letter-spacing:1px;
  padding:14px 4px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-menu a:hover{ color:var(--orange); }
.mobile-menu .mm-foot{
  margin-top:20px; display:flex; gap:14px;
}
.mobile-menu .mm-foot .icon-btn{ width:44px; height:44px; }

@media (max-width:820px){
  .hamburger{ display:flex; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  display:grid; grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:32px;
  padding:36px clamp(20px,5vw,64px) 20px;
  max-width:1440px; margin:0 auto;
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr; padding-top:28px;}
}
@media (max-width:480px){
  .hero{ padding-left:18px; padding-right:18px; gap:24px; }
  h1{ font-size:clamp(42px, 12vw, 60px); }
}
.hero::before{
  content:""; position:absolute; top:-120px; right:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--orange-tint), transparent 70%);
  z-index:0; pointer-events:none;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:2.5px; color:var(--navy-soft);
  display:flex; align-items:center; gap:10px;
  margin-bottom:22px;
  opacity:0; animation:riseIn .7s ease forwards; animation-delay:.1s;
}
.eyebrow .bar{width:30px; height:1px; background:var(--orange);}

.hero-phrase{
  position:relative; z-index:1;
  transition:opacity .4s ease, transform .4s ease;
}
.hero-phrase.phrase-fade{
  opacity:0; transform:translateY(10px);
}

h1{
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size:clamp(42px, 5.2vw, 74px);
  line-height:0.9; letter-spacing:0.5px; text-transform:uppercase;
  position:relative; z-index:1;
}
h1 span{display:block; opacity:0; transform:translateY(36px); animation:riseIn .8s cubic-bezier(.22,1,.36,1) forwards;}
h1 span:nth-child(1){animation-delay:.15s;}
h1 span:nth-child(2){animation-delay:.28s;}
h1 span.accent{
  animation-delay:.28s;
  background:linear-gradient(90deg, var(--orange), var(--orange-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 span:nth-child(3){animation-delay:.41s;}

@keyframes riseIn{ to{opacity:1; transform:translateY(0);} }

.sub{
  max-width:420px; margin-top:16px; color:var(--navy-soft); font-size:16px; line-height:1.6;
  position:relative; z-index:1;
  opacity:0; animation:riseIn .7s ease forwards; animation-delay:.55s;
}
.sub strong{color:var(--navy); font-weight:600;}

.quality-hl{
  position:relative;
  display:inline-block;
  font-weight:700;
  background-image:linear-gradient(90deg, var(--navy) 0%, var(--orange) 45%, var(--navy) 90%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shineText 3.4s ease-in-out infinite;
}
@keyframes shineText{
  0%{ background-position:0% center; }
  50%{ background-position:100% center; }
  100%{ background-position:0% center; }
}

.cta-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px;
  position:relative; z-index:1;
  opacity:0; animation:riseIn .7s ease forwards; animation-delay:.68s;
}
.btn-primary{
  font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  background:var(--navy); color:#fff;
  padding:16px 28px; border-radius:100px;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, background .35s;
  box-shadow:0 10px 26px rgba(15,22,56,0.18);
  cursor:pointer; border:none;
}
.btn-primary:hover{background:var(--orange); transform:translateY(-3px); box-shadow:0 14px 30px rgba(255,90,31,0.32);}
.btn-primary svg{transition:transform .3s ease;}
.btn-primary:hover svg{transform:translateX(4px);}
.btn-ghost{
  font-family:'Space Grotesk'; font-weight:500; font-size:14px; color:var(--navy);
  padding:16px 22px; border:1px solid var(--line); border-radius:100px;
  transition:border-color .3s, background .3s;
}
.btn-ghost:hover{border-color:var(--navy); background:var(--paper);}

.trust-row{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:26px;
  position:relative; z-index:1;
  opacity:0; animation:riseIn .7s ease forwards; animation-delay:.82s;
}
.trust-item{font-size:12.5px; color:var(--navy-soft); display:flex; align-items:center; gap:8px;}
.trust-item svg{color:var(--orange); flex-shrink:0;}

/* ---------- HERO VISUAL ---------- */
.visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px;
}
.visual-card{
  position:relative; width:min(92%, 430px); aspect-ratio:4/5;
  border-radius:26px; overflow:hidden;
  box-shadow:0 40px 70px -20px rgba(15,22,56,0.28);
  transition:transform .25s ease-out;
  transform-style:preserve-3d;
}
.visual-card img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transform:scale(1.12);
  animation:kenburns 8s ease-in-out infinite alternate;
}
@keyframes kenburns{ to{ transform:scale(1.0); } }

.curtain{
  position:absolute; inset:0; background:var(--orange); z-index:3;
  animation:wipe 1.1s cubic-bezier(.76,0,.24,1) forwards; animation-delay:.25s;
  transform-origin:left;
}
@keyframes wipe{ to{ transform:scaleX(0); } }

.visual-tag{
  position:absolute; z-index:4;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1px;
  background:rgba(255,255,255,0.92); color:var(--navy);
  padding:9px 14px; border-radius:100px;
  display:flex; align-items:center; gap:7px;
  box-shadow:0 10px 24px rgba(15,22,56,0.14);
  opacity:0; animation:chipIn .6s ease forwards;
}
.visual-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--orange);}
.tag-new{ top:22px; left:22px; animation-delay:1.5s; }
.tag-price{ bottom:22px; right:22px; animation-delay:1.7s; font-weight:600; }
@keyframes chipIn{ to{opacity:1;} }

.visual-blob{
  position:absolute; z-index:0; width:88%; height:88%;
  border-radius:26px; background:var(--paper); border:1px solid var(--line);
  top:26px; left:26px;
}

/* ---------- HERO SLIDESHOW DOTS ---------- */
.visual-dots{
  position:absolute; z-index:4; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px;
}
.visual-dots .vd{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.55);
  transition:background .3s ease, transform .3s ease;
  cursor:pointer;
}
.visual-dots .vd.active{ background:#fff; transform:scale(1.3); }

/* ---------- MARQUEE ---------- */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0; overflow:hidden; white-space:nowrap; background:var(--navy);
}
.marquee{display:inline-flex; animation:scrollX 24s linear infinite;}
.marquee span{
  font-family:'Bebas Neue'; font-size:16px; letter-spacing:3px; color:#fff;
  padding:0 24px; display:flex; align-items:center; gap:24px;
}
.marquee span::after{content:"◆"; color:var(--orange); font-size:8px; margin-left:24px;}
@keyframes scrollX{ to{transform:translateX(-50%);} }

/* ---------- PRODUCT SECTION ---------- */
.section{
  padding:100px clamp(20px,5vw,64px);
  max-width:1440px; margin:0 auto;
}
#collection{
  padding-top:8px;
  padding-bottom:56px;
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom:28px; flex-wrap:wrap;
}
.section-head .eyebrow{margin-bottom:10px; animation:none; opacity:1;}
.section-head h2{
  font-family:'Bebas Neue'; font-weight:400; font-size:clamp(26px,3vw,40px);
  letter-spacing:0.5px; text-transform:uppercase; line-height:1;
}
.section-head p{color:var(--navy-soft); max-width:340px; font-size:14.5px; line-height:1.6;}

.grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid{grid-template-columns:1fr;} }

@media (max-width:560px){
  #memberGrid.grid{
    display:flex;
    grid-template-columns:unset;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
    overscroll-behavior-x:contain;
  }
  #memberGrid.grid::-webkit-scrollbar{ display:none; }
  #memberGrid .card{
    flex:0 0 68%;
    scroll-snap-align:start;
  }
}

.product-groups{
  display:flex;
  flex-direction:column;
  gap:44px;
}
.cat-section-title{
  font-family:'Bebas Neue'; font-weight:400; font-size:22px;
  letter-spacing:0.5px; text-transform:uppercase; line-height:1;
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.cat-section-title::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0;
}

.cat-row{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  margin:0 -20px;
  padding-left:20px;
  padding-right:20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
}
.cat-row::-webkit-scrollbar{ display:none; }
.cat-row .card{
  flex:0 0 250px;
  scroll-snap-align:start;
}
@media (max-width:900px){
  .cat-row .card{ flex:0 0 210px; }
}
@media (max-width:560px){
  .cat-row .card{ flex:0 0 68%; }
}

.grid-message{
  color:var(--navy-soft); font-size:14px;
  padding:30px 0; text-align:center;
}

/* ---------- CATEGORY FILTER ---------- */
.cat-filter{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:24px;
}
.cat-filter.hidden{ display:none; }
.cat-pill{
  font-family:'Space Grotesk'; font-weight:600; font-size:13px;
  padding:10px 18px; border-radius:100px; border:1px solid var(--line);
  cursor:pointer; background:none; color:var(--navy-soft);
  transition:border-color .25s, background .25s, color .25s;
}
.cat-pill:hover{ border-color:var(--orange); color:var(--navy); }
.cat-pill.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---------- LOAD MORE ---------- */
.load-more-row{
  display:flex; justify-content:center; margin-top:36px;
}
.load-more-row.hidden{ display:none; }
.btn-load-more{
  font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  background:none; color:var(--navy);
  padding:15px 30px; border:1px solid var(--line); border-radius:100px;
  cursor:pointer; transition:border-color .25s, background .25s, transform .2s;
}
.btn-load-more:hover{ border-color:var(--orange); background:var(--orange-tint); }
.btn-load-more:disabled{ opacity:.6; cursor:not-allowed; }

/* ---------- CARD ---------- */
.card{
  position:relative;
  opacity:0; transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
  cursor:pointer;
}
.card.in-view{opacity:1; transform:translateY(0);}

.card-media{
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:3/3.5; background:var(--paper);
  box-shadow:0 1px 0 var(--line);
}
.card-media img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.card:hover .card-media img{ transform:scale(1.08); }

.card-img-layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transform:scale(1.04);
  transition:opacity 1.1s ease, transform 7s ease;
}
.card-img-layer.active{ opacity:1; z-index:1; transform:scale(1); }
.card:hover .card-img-layer.active{ transform:scale(1.08); }

.card-dots{
  position:absolute; z-index:3; top:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px;
}
.card-dots .cd{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.55);
  transition:background .3s ease, transform .3s ease;
}
.card-dots .cd.active{ background:#fff; transform:scale(1.3); }

.card-desc-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 14px 14px;
  background:linear-gradient(180deg, transparent 0%, rgba(15,22,56,0.08) 35%, rgba(15,22,56,0.78) 100%);
  pointer-events:none;
}
.card-desc-line{
  color:#fff; font-size:12.5px; font-weight:500; line-height:1.5;
  min-height:34px;
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
  opacity:1; transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease;
}
.card-desc-line.fade{ opacity:0; transform:translateY(6px); }

.card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,22,56,0.65) 100%);
  opacity:0; transition:opacity .4s ease;
  display:flex; align-items:flex-end; padding:16px;
  z-index:3;
}
.card:hover .card-overlay{opacity:1;}

.quick-add{
  width:100%;
  background:#fff; color:var(--navy);
  font-family:'Space Grotesk'; font-weight:600; font-size:13px;
  padding:12px; border-radius:100px; text-align:center;
  transform:translateY(14px); opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1) .06s, opacity .4s ease .06s, background .25s, color .25s;
  cursor:pointer; border:none;
}
.card:hover .quick-add{transform:translateY(0); opacity:1;}
.quick-add:hover{background:var(--orange); color:#fff;}
.quick-add.added{ background:var(--navy); color:#fff; }

.card-flag{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:1px;
  background:var(--navy); color:#fff; padding:6px 11px; border-radius:100px;
}
.card-flag.orange{background:var(--orange);}

.card-info{ margin-top:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card-info h3{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
.card-info .cat{ font-size:12px; color:var(--navy-soft); }

/* ---------- PRIX + PROMO (cards) ---------- */
.card-price-wrap{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  white-space:nowrap;
}
.card-price{
  font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:500;
  color:var(--navy); transition:color .25s ease, transform .25s ease;
}
.card-price-wrap.sale .card-price{
  font-size:15.5px; font-weight:700; color:var(--orange-deep);
}
.card:hover .card-price-wrap.sale .card-price{ transform:scale(1.04); }
.card-price-old{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500;
  color:var(--navy-soft); text-decoration:line-through; opacity:.65;
}

.card-promo-flag{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:'Space Grotesk'; font-weight:700; font-size:11px; letter-spacing:.3px;
  background:linear-gradient(135deg, var(--orange), var(--orange-deep));
  color:#fff; padding:6px 11px; border-radius:100px;
  box-shadow:0 6px 16px rgba(255,90,31,0.35);
  animation:promoPulse 2.6s ease-in-out infinite;
}
@keyframes promoPulse{
  0%,100%{ box-shadow:0 6px 16px rgba(255,90,31,0.35); transform:scale(1); }
  50%{ box-shadow:0 6px 20px rgba(255,90,31,0.55); transform:scale(1.06); }
}

/* ---------- MEMBER SECTION (post-login) ---------- */
.member-section{
  display:none;
  background:var(--navy);
  position:relative;
  overflow:hidden;
}
.member-section.show{ display:block; }
.member-section::before{
  content:""; position:absolute; top:-140px; left:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,31,0.22), transparent 70%);
  pointer-events:none;
}
.member-section .section{ position:relative; z-index:1; }
.member-section .eyebrow{ color:rgba(255,255,255,0.6); animation:none; opacity:1; }
.member-section .eyebrow .bar{ background:var(--orange); }
.member-section .section-head h2{ color:#fff; }
.member-section .section-head p{ color:rgba(255,255,255,0.55); }
.member-section .card-info h3{ color:#fff; }
.member-section .card-info .cat{ color:rgba(255,255,255,0.5); }
.member-section .card-price{ color:#fff; }
.member-section .card-price-wrap.sale .card-price{ color:var(--orange); }
.member-section .card-media{ background:rgba(255,255,255,0.06); }
.member-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:1px;
  background:var(--orange); color:#fff; padding:6px 12px; border-radius:100px;
  margin-bottom:16px;
}

/* ---------- USP STRIP ---------- */
.usp-strip{
  background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.usp-inner{
  max-width:1440px; margin:0 auto;
  padding:56px clamp(20px,5vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
}
@media (max-width:760px){ .usp-inner{grid-template-columns:1fr; gap:28px;} }
.usp{ display:flex; gap:16px; align-items:flex-start; }
.usp .ic{
  width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0;
}
.usp h4{ font-size:15px; margin-bottom:5px; font-weight:600; }
.usp p{ font-size:13px; color:var(--navy-soft); line-height:1.55; max-width:260px; }

/* ---------- FOOTER ---------- */
footer{
  padding:60px clamp(20px,5vw,64px) 36px;
  max-width:1440px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  border-top:1px solid var(--line); margin-top:20px;
}
footer .logo{font-size:20px;}
footer .fine{font-size:12.5px; color:var(--navy-soft);}
@media (max-width:520px){
  footer{ flex-direction:column; text-align:center; gap:10px; padding-top:40px; }
}
@media (max-width:520px){
  .section{ padding-left:20px; padding-right:20px; padding-top:64px; padding-bottom:64px; }
  .section-head{ margin-bottom:32px; }
  .grid{ gap:18px; }
}

/* ---------- AUTH MODAL ---------- */
.auth-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,22,56,0.5);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.auth-overlay.open{ opacity:1; pointer-events:auto; }
.auth-modal{
  background:#fff; border-radius:22px; width:100%; max-width:400px;
  padding:36px 32px 32px;
  box-shadow:0 40px 80px -20px rgba(15,22,56,0.4);
  transform:translateY(16px) scale(.98); transition:transform .3s cubic-bezier(.22,1,.36,1);
  position:relative;
  max-height:90vh; overflow-y:auto;
}
.auth-overlay.open .auth-modal{ transform:translateY(0) scale(1); }
.auth-close{
  position:absolute; top:18px; right:18px;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); cursor:pointer; background:none;
  transition:border-color .25s, background .25s;
}
.auth-close:hover{ border-color:var(--orange); background:var(--orange-tint); }
.auth-modal h2{
  font-family:'Bebas Neue'; font-size:32px; letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:6px;
}
.auth-modal .auth-sub{ font-size:13.5px; color:var(--navy-soft); margin-bottom:26px; }
.auth-tabs{
  display:flex; background:var(--paper); border-radius:100px; padding:4px; margin-bottom:24px;
}
.auth-tab{
  flex:1; text-align:center; padding:9px; font-size:13px; font-weight:600; border-radius:100px;
  cursor:pointer; transition:background .25s, color .25s; color:var(--navy-soft);
}
.auth-tab.active{ background:var(--navy); color:#fff; }
.auth-field{ margin-bottom:16px; }
.auth-field label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--navy-soft); margin-bottom:7px;
}
.auth-field input{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  font-family:'Space Grotesk'; font-size:16px; background:var(--paper);
  transition:border-color .25s, background .25s;
}
.auth-field input:focus{ outline:none; border-color:var(--orange); background:#fff; }
.auth-submit{
  width:100%; margin-top:6px;
  font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  background:var(--navy); color:#fff; padding:15px; border-radius:100px;
  cursor:pointer; transition:background .25s, transform .2s; border:none;
}
.auth-submit:hover{ background:var(--orange); }
.auth-submit:disabled{ opacity:.6; cursor:not-allowed; }
.auth-msg{
  font-size:12.5px; margin-top:14px; padding:11px 13px; border-radius:10px;
  display:none;
}
.auth-msg.show{ display:block; }
.auth-msg.error{ background:#fff1ea; color:#c73411; }
.auth-msg.success{ background:#eef7ee; color:#1e7d32; }
.auth-account-view{ display:none; }
.auth-account-view.show{ display:block; }
.auth-account-view .avatar-lg{
  width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700;
  margin-bottom:14px;
}
.auth-account-view .acc-email{ font-size:14px; color:var(--navy-soft); margin-bottom:24px; }
.auth-logout{
  width:100%; font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  background:none; color:var(--navy); padding:14px; border-radius:100px;
  border:1px solid var(--line); cursor:pointer; transition:border-color .25s, background .25s;
}
.auth-logout:hover{ border-color:var(--orange); background:var(--orange-tint); }

/* ---------- CART DRAWER ---------- */
.cart-overlay{
  position:fixed; inset:0; z-index:110;
  background:rgba(15,22,56,0.45);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:111;
  width:min(100%, 400px);
  background:#fff;
  box-shadow:-20px 0 60px rgba(15,22,56,0.2);
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.65,0,.24,1);
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 26px 20px; border-bottom:1px solid var(--line);
}
.cart-head h3{
  font-family:'Bebas Neue'; font-size:26px; letter-spacing:.5px; text-transform:uppercase;
}
.cart-close{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); cursor:pointer; background:none;
  transition:border-color .25s, background .25s;
}
.cart-close:hover{ border-color:var(--orange); background:var(--orange-tint); }
.cart-body{ flex:1; overflow-y:auto; padding:14px 26px; }
.cart-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; height:100%; gap:12px; color:var(--navy-soft); padding:40px 0;
}
.cart-empty svg{ color:var(--line); }
.cart-empty .ce-title{ font-family:'Bebas Neue'; font-size:20px; letter-spacing:.5px; color:var(--navy); text-transform:uppercase; }
.cart-empty .ce-sub{ font-size:13px; max-width:220px; }
.cart-item{
  display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
}
.cart-item img{ width:64px; height:76px; object-fit:cover; object-position:top center; border-radius:10px; background:var(--paper); }
.ci-info{ flex:1; display:flex; flex-direction:column; }
.ci-info h4{ font-size:14px; font-weight:600; margin-bottom:2px; }
.ci-info .ci-cat{ font-size:11.5px; color:var(--navy-soft); margin-bottom:8px; }
.ci-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.ci-qty{ display:flex; align-items:center; gap:10px; }
.ci-qty button{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:none;
  cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s;
}
.ci-qty button:hover{ border-color:var(--orange); background:var(--orange-tint); }
.ci-qty span{ font-family:'JetBrains Mono', monospace; font-size:12.5px; min-width:14px; text-align:center; }
.ci-price{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:500; }
.ci-remove{
  font-size:11.5px; color:var(--navy-soft); text-decoration:underline; cursor:pointer; background:none; border:none;
  font-family:'Space Grotesk';
}
.ci-remove:hover{ color:var(--orange); }
.cart-foot{
  padding:20px 26px 26px; border-top:1px solid var(--line);
}
.cart-sub-row{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;
  font-size:13.5px; color:var(--navy-soft);
}
.cart-sub-row .amt{ font-family:'JetBrains Mono', monospace; color:var(--navy); font-weight:600; font-size:16px; }
.cart-checkout{
  width:100%; font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  background:var(--navy); color:#fff; padding:16px; border-radius:100px;
  cursor:pointer; border:none; transition:background .25s;
}
.cart-checkout:hover{ background:var(--orange); }
.cart-checkout:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- CHECKOUT PANEL (adresse + point relais + paiement) ---------- */
.checkout-panel{ flex:1; overflow-y:auto; padding:14px 26px 26px; display:flex; flex-direction:column; }
.checkout-back{
  align-self:flex-start; background:none; border:none; cursor:pointer;
  font-family:'Space Grotesk'; font-size:12.5px; font-weight:600; color:var(--navy-soft);
  padding:6px 0 16px; transition:color .2s;
}
.checkout-back:hover{ color:var(--orange); }
.checkout-panel h4{
  font-family:'Bebas Neue'; font-size:18px; letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:14px;
}
.checkout-field{ margin-bottom:14px; }
.checkout-field label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--navy-soft); margin-bottom:6px;
}
.checkout-field input{
  width:100%; padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  font-family:'Space Grotesk'; font-size:14.5px; background:var(--paper);
  transition:border-color .25s, background .25s;
}
.checkout-field input:focus{ outline:none; border-color:var(--orange); background:#fff; }
.checkout-row2{ display:flex; gap:10px; }
.checkout-row2 .checkout-field{ flex:1; }
.checkout-point-btn{
  width:100%; font-family:'Space Grotesk'; font-weight:600; font-size:13.5px;
  background:#fff; color:var(--navy); padding:14px; border-radius:12px;
  border:1.5px dashed var(--line); cursor:pointer; transition:border-color .25s, background .25s;
  margin:4px 0 14px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.checkout-point-btn:hover{ border-color:var(--orange); background:var(--orange-tint); }
.checkout-point-summary{
  display:none; background:var(--paper); border-radius:12px; padding:12px 14px;
  font-size:13px; margin:-6px 0 14px; line-height:1.5;
}
.checkout-point-summary.show{ display:block; }
.checkout-point-summary strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.checkout-error{
  display:none; background:#fff1ea; color:#c73411; font-size:12.5px;
  padding:11px 13px; border-radius:10px; margin-bottom:14px;
}
.checkout-error.show{ display:block; }
.checkout-spacer{ flex:1; }

/* ---------- ORDER TRACKER BAR ---------- */
.order-tracker{
  display:none;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.order-tracker.show{ display:block; }
.ot-inner{
  max-width:1440px; margin:0 auto;
  padding:16px clamp(20px,5vw,64px);
}
.ot-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px; flex-wrap:wrap;
}
.ot-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px; color:var(--navy-soft); }
.ot-label b{ color:var(--navy); }
.ot-status{
  font-family:'Space Grotesk'; font-weight:700; font-size:12.5px;
  color:var(--orange); text-transform:uppercase; letter-spacing:.5px;
}
.ot-steps{ position:relative; display:flex; justify-content:space-between; }
.ot-steps::before{
  content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--line);
}
.ot-steps-fill{
  position:absolute; top:7px; left:0; height:2px; background:var(--orange);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.ot-step{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;
}
.ot-dot{
  width:15px; height:15px; border-radius:50%; background:#fff; border:2px solid var(--line);
  transition:border-color .3s, background .3s;
}
.ot-step.done .ot-dot{ background:var(--orange); border-color:var(--orange); }
.ot-step.current .ot-dot{ box-shadow:0 0 0 4px rgba(255,90,31,0.18); }
.ot-step-label{ font-size:11px; color:var(--navy-soft); text-align:center; }
.ot-step.done .ot-step-label, .ot-step.current .ot-step-label{ color:var(--navy); font-weight:600; }
@media (max-width:560px){
  .ot-step-label{ font-size:9px; }
  .ot-inner{ padding-top:14px; padding-bottom:14px; }
}

/* ---------- PRODUCT DETAIL MODAL ---------- */
.product-overlay{
  position:fixed; inset:0; z-index:105;
  background:rgba(15,22,56,0.5);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.product-overlay.open{ opacity:1; pointer-events:auto; }
.product-modal{
  background:#fff; border-radius:24px; width:100%; max-width:460px;
  max-height:88vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(15,22,56,0.4);
  transform:translateY(16px) scale(.98);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.product-overlay.open .product-modal{ transform:translateY(0) scale(1); }
.product-close{
  position:absolute; top:16px; right:16px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.92); border:none; cursor:pointer;
  transition:background .25s;
}
.product-close:hover{ background:#fff; }
.product-modal-media{
  position:relative; width:100%; aspect-ratio:4/5; max-height:52vh;
  background:var(--paper); overflow:hidden; flex-shrink:0;
}
.product-modal-media .card-flag{ position:absolute; top:14px; left:14px; z-index:3; }

.pd-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.9); color:var(--navy); border:none; cursor:pointer;
  box-shadow:0 6px 16px rgba(15,22,56,0.18);
  transition:background .2s, transform .2s;
}
.pd-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.pd-arrow-left{ left:12px; }
.pd-arrow-right{ right:12px; }
.pd-arrow.hidden{ display:none; }
.product-modal-body{
  padding:20px 24px 26px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.pd-cat{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px;
  color:var(--navy-soft); text-transform:uppercase; margin-bottom:6px;
}
.product-modal-body h2{
  font-family:'Bebas Neue'; font-size:28px; letter-spacing:.5px;
  text-transform:uppercase; line-height:1.05; margin-bottom:8px;
}
.pd-price{
  font-family:'JetBrains Mono', monospace; font-size:18px; font-weight:600;
  color:var(--orange); margin-bottom:14px;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.pd-price-old{
  font-size:14px; font-weight:500; color:var(--navy-soft);
  text-decoration:line-through; opacity:.65;
}
.pd-price-new{
  font-size:20px; font-weight:700; color:var(--orange-deep);
}
.pd-promo-badge{
  font-family:'Space Grotesk'; font-weight:700; font-size:11px; letter-spacing:.3px;
  background:linear-gradient(135deg, var(--orange), var(--orange-deep));
  color:#fff; padding:4px 10px; border-radius:100px;
  animation:promoPulse 2.6s ease-in-out infinite;
}
.pd-desc{
  font-size:14px; line-height:1.65; color:var(--navy-soft); margin-bottom:18px;
}
.pd-sizes{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;
}
.pd-size-chip{
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:500;
  padding:7px 13px; border-radius:100px; border:1px solid var(--line); color:var(--navy);
  cursor:pointer; background:none; transition:border-color .2s, background .2s, color .2s;
}
.pd-size-chip:hover{ border-color:var(--orange); }
.pd-size-chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.pd-add-btn{
  width:100%; font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  background:var(--navy); color:#fff; padding:15px; border-radius:100px;
  cursor:pointer; border:none; transition:background .25s;
}
.pd-add-btn:hover{ background:var(--orange); }
.pd-add-btn.added{ background:var(--navy); }

.pd-image-layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center center;
  opacity:0; transition:opacity 1s ease;
}
.pd-image-layer.active{ opacity:1; z-index:1; }

.pd-image-dots{
  position:absolute; z-index:3; top:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
}
.pd-image-dots .pid{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55);
  transition:background .3s ease, transform .3s ease; cursor:pointer;
}
.pd-image-dots .pid.active{ background:#fff; transform:scale(1.3); }

/* =========================================================
   ---------- REFONTE DA — style "camesee.fr" mobile ----------
   Bannière sombre + CTA orange, barre de recherche visible,
   pastilles catégories, barre de navigation basse mobile.
   ========================================================= */

/* ----- Logo avec image (images/favicon.png) ----- */
.logo{ gap:10px; }
.logo .logo-mark{
  width:30px; height:30px; border-radius:8px; object-fit:contain;
  display:block;
}
.logo .dot{ display:none; } /* remplacé par l'icône du logo */
.logo-word{ display:flex; align-items:baseline; }
.logo-word .lw-main{ color:var(--navy); }
.logo-word .lw-ext{ color:var(--orange); }
footer .logo .logo-mark{ width:26px; height:26px; }

/* ----- Barre de recherche persistante ----- */
.search-bar-row{
  padding:14px clamp(20px,5vw,64px) 6px;
  max-width:1440px; margin:0 auto;
}
.search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:100px;
  padding:13px 18px;
  color:var(--navy-soft);
  transition:border-color .25s, background .25s;
}
.search-bar:focus-within{ border-color:var(--orange); background:#fff; }
.search-bar svg{ flex-shrink:0; color:var(--navy-soft); }
.search-bar input{
  border:none; outline:none; background:none; width:100%;
  font-family:'Space Grotesk'; font-size:14.5px; color:var(--navy);
}
.search-bar input::placeholder{ color:var(--navy-soft); }

/* ----- Pastilles catégories : pastille active orange (mockup) ----- */
.cat-filter{
  padding:0 clamp(20px,5vw,64px);
  max-width:1440px; margin:0 auto 8px;
  overflow-x:auto; flex-wrap:nowrap;
  scrollbar-width:none;
}
.cat-filter::-webkit-scrollbar{ display:none; }
.cat-pill{ flex-shrink:0; }
.cat-pill.active{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* ----- Bannière héro façon poster sombre ----- */
.hero{
  display:block;
  padding:0 0 8px;
  max-width:none;
}
.hero::before{ display:none; }
.hero-band{ padding-bottom:0; }
.hero .visual{
  position:relative; width:100%; aspect-ratio:16/11; perspective:none;
}
.hero .visual-blob{ display:none; }
.hero .visual-card{
  width:100%; height:100%; border-radius:0 0 28px 28px;
  background:var(--navy);
}
.hero .visual-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(15,22,56,0.15) 0%, rgba(15,22,56,0.55) 55%, rgba(15,22,56,0.88) 100%),
    linear-gradient(90deg, rgba(15,22,56,0.85) 0%, rgba(15,22,56,0.15) 62%, transparent 100%);
  pointer-events:none;
}
.hero .visual-card img{ object-position:center right; }
.hero .hero-text{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px clamp(20px,5vw,64px); color:#fff;
  max-width:680px;
}
.hero .eyebrow{ display:none; }
.hero .hero-phrase h1{ color:#fff; }
.hero .hero-phrase h1 span.accent{
  background:linear-gradient(90deg, var(--orange), #ffb18f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{ color:rgba(255,255,255,0.78); }
.hero .sub .quality-hl{
  background-image:linear-gradient(90deg, #fff 0%, var(--orange) 45%, #fff 90%);
  -webkit-background-clip:text; background-clip:text;
}
.hero .cta-row{ margin-top:20px; }
.hero .btn-primary{ background:var(--orange); box-shadow:0 10px 26px rgba(255,90,31,0.35); }
.hero .btn-primary:hover{ background:var(--orange-deep); }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,0.35); }
.hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.1); }
.hero .trust-row{ display:none; }
.hero .visual-tag{ background:var(--orange); color:#fff; box-shadow:0 10px 24px rgba(255,90,31,0.3); }
.hero .visual-tag::before{ background:#fff; }
.hero .tag-price{ background:rgba(255,255,255,0.94); color:var(--navy); }
.hero .tag-price::before{ background:var(--orange); }

@media (max-width:960px){
  .hero .visual{ aspect-ratio:4/5; }
  .hero .visual-card::after{
    background:
      linear-gradient(180deg, rgba(15,22,56,0.1) 0%, rgba(15,22,56,0.55) 45%, rgba(15,22,56,0.92) 100%);
  }
  .hero .hero-text{ max-width:100%; }
  .hero h1{ font-size:clamp(34px, 9vw, 52px); }
}

/* ----- Cœur "favori" sur les cards (ajouté par app-ui-extra.js) ----- */
.card-info{ align-items:center; }
.card-fav-btn{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  color:var(--navy-soft); transition:border-color .2s, color .2s, transform .15s;
}
.card-fav-btn:hover{ border-color:var(--orange); color:var(--orange); }
.card-fav-btn.active{ color:var(--orange); border-color:var(--orange); }
.card-fav-btn.active svg{ fill:var(--orange); }
.card-fav-btn:active{ transform:scale(.9); }
.card-price-row{ display:flex; align-items:center; gap:10px; }

/* ----- Barre de navigation basse (mobile, façon app) ----- */
.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:10px 6px calc(10px + env(safe-area-inset-bottom));
}
.bn-inner{ display:flex; justify-content:space-around; align-items:center; }
.bn-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer;
  color:var(--navy-soft); font-family:'Space Grotesk'; font-size:10.5px; font-weight:600;
  padding:4px 10px; position:relative;
}
.bn-item svg{ transition:transform .15s ease; }
.bn-item.active{ color:var(--orange); }
.bn-item:active svg{ transform:scale(.88); }
.bn-item .bn-badge{
  position:absolute; top:-2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--orange); color:#fff; font-size:8.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:820px){
  .bottom-nav{ display:block; }
  body{ padding-bottom:66px; }
  .cart-drawer{ padding-bottom:0; }
}
/* ---------- Point relais Boxtal ---------- */
.relay-list{ display:none; flex-shrink:0; margin-top:10px; max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; }
.relay-list.show{ display:block; }
.relay-item{ display:block; width:100%; text-align:left; background:#fff; border:0; border-bottom:1px solid var(--line); padding:12px 14px; cursor:pointer; font-family:inherit; color:var(--navy); }
.relay-item:last-child{ border-bottom:0; }
.relay-item:hover{ background:var(--orange-tint); }
.relay-item strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.relay-item span{ font-size:12.5px; color:var(--navy-soft); }
.relay-empty{ padding:14px; font-size:13px; color:var(--navy-soft); }

.checkout-field select{ width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); font-family:inherit; font-size:14px; color:var(--navy); }
.checkout-field select:focus{ outline:none; border-color:var(--orange); background:#fff; }

/* Empêche le panneau de paiement d'écraser les éléments (liste points relais invisible) */
.checkout-panel > *{ flex-shrink:0; }
.checkout-panel > .checkout-spacer{ flex:1 1 0; flex-shrink:1; min-height:8px; }

/* Lignes de total du paiement */
.cart-sub-row.small{ margin-bottom:8px; font-size:12.5px; }
.cart-sub-row.small .amt{ font-size:13px; font-weight:500; }
.cart-ship-note{ font-size:12px; color:var(--navy-soft); margin:-8px 0 14px; }