/* =========================================================
   GORYL — Design tokens
   Palette: noir profond + néon menthe (identité tech/streetwear)
   Display: Bebas Neue (impact) / Body: Manrope / Data: IBM Plex Mono
   ========================================================= */
:root{
  --black:        #060807;
  --panel:        #0e1210;
  --panel-2:      #141a17;
  --line:         rgba(255,255,255,.08);
  --off-white:    #EEF5F1;
  --muted:        #8FA79C;
  --neon:         #4CFFB0;
  --neon-deep:    #0FDB84;
  --neon-dim:     rgba(76,255,176,.12);
  --violet:       #B98CFF;
  --violet-dim:   rgba(185,140,255,.14);
  --teal:         #4CE0FF;
  --teal-dim:     rgba(76,224,255,.14);
  --gold:         #C9A24B;

  --display: "Bebas Neue", "Archivo Black", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1240px;
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--off-white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; padding:0; text-align:inherit; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

::selection{ background:var(--neon); color:#04140c; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, [role="link"]:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:3px;
}

/* =========================================================
   Ambient background texture
   ========================================================= */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px;
  background:linear-gradient(to bottom, rgba(6,8,7,.9), transparent);
}
.nav__menu-btn{
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--line); color:var(--off-white);
  padding:9px 16px; border-radius:999px; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease;
}
.nav__menu-btn:hover{ border-color:var(--neon); color:var(--neon); }
.nav__menu-btn .dots{ display:inline-grid; grid-template-columns:repeat(2,3px); gap:3px; }
.nav__menu-btn .dots span{ width:3px; height:3px; background:currentColor; border-radius:50%; }

.nav__logo{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0;
  font-family:var(--display); letter-spacing:.08em;
}
.nav__logo .word{ font-size:22px; line-height:.9; }
.nav__logo .sub{ font-family:var(--mono); font-size:9px; letter-spacing:.3em; color:var(--neon); text-transform:uppercase; }

.nav__cta{
  background:var(--off-white); color:var(--black);
  border:none; padding:10px 20px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .2s ease, background .2s ease;
}
.nav__cta:hover{ background:var(--neon); transform:translateY(-1px); }
.nav__right{ display:flex; align-items:center; gap:10px; }

/* Fullscreen menu overlay */
.menu-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,6,5,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.menu-overlay.open{ opacity:1; pointer-events:auto; }
.menu-overlay button{
  font-family:var(--display); font-size:clamp(32px,7vw,64px); letter-spacing:.04em;
  color:var(--off-white); transition:color .2s ease;
}
.menu-overlay button:hover{ color:var(--neon); }
.menu-overlay__close{
  position:absolute; top:26px; right:28px;
  background:none; border:1px solid var(--line); color:var(--off-white);
  width:42px; height:42px; border-radius:50%; font-size:18px;
}
.menu-overlay__social{
  margin-top:20px; display:flex; gap:18px; font-family:var(--mono); font-size:12px; color:var(--muted);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:120px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(76,255,176,.14), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(76,255,176,.08), transparent 70%),
    var(--black);
  overflow:hidden;
}

.marquee{
  position:relative; z-index:2;
  white-space:nowrap; overflow:hidden;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 0; margin-top:18px;
}
.marquee__track{ display:inline-block; padding-left:100%; animation:marquee 28s linear infinite; }
.marquee span{ margin:0 18px; }
.marquee span.accent{ color:var(--neon); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* Carousel */
.carousel-wrap{
  position:relative; z-index:2;
  padding:56px 0 18px;
  perspective:1400px;
}
.carousel{
  display:flex; gap:20px;
  overflow-x:auto; scroll-snap-type:x proximity;
  padding:60px 46vw;
  -ms-overflow-style:none; scrollbar-width:none;
  cursor:grab;
  transform-style:preserve-3d;
}
.carousel:active{ cursor:grabbing; }
.carousel::-webkit-scrollbar{ display:none; }
.carousel__item{
  flex:0 0 auto; width:150px; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transform-style:preserve-3d; will-change:transform, opacity;
  filter:saturate(.65);
  transition:transform .12s ease-out, opacity .12s ease-out, filter .2s ease;
  /* transform/opacity are set inline by JS every scroll frame (coverflow depth) */
}
.carousel__item.is-active{ filter:saturate(1); }
.carousel__plate{
  width:150px; height:190px; border-radius:12px;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.06), transparent 70%), var(--panel);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.carousel__plate img{ height:82%; width:auto; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }

.hero__center{
  position:relative; z-index:2;
  text-align:center; padding-bottom:8px;
}
.hero__pedestal{
  width:180px; height:26px; margin:0 auto 14px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(76,255,176,.55), rgba(76,255,176,0) 70%);
  filter:blur(2px);
}
.hero__collection{
  font-family:var(--mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--neon);
  min-height:16px;
}
.hero__name{
  font-family:var(--display); font-size:clamp(30px,5.5vw,58px); letter-spacing:.03em; line-height:1;
  margin:4px 0 6px;
}
.hero__price{ font-family:var(--mono); font-size:16px; color:var(--off-white); }

.hero__hint{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 0 30px; position:relative; z-index:2;
}
.hero__hint-bar{ width:200px; height:2px; background:var(--line); position:relative; overflow:hidden; border-radius:2px; }
.hero__hint-bar i{ position:absolute; inset:0; width:40%; background:linear-gradient(90deg, var(--violet), var(--neon)); animation:sweep 2.4s ease-in-out infinite; border-radius:2px; }
@keyframes sweep{ 0%{ transform:translateX(-100%);} 50%{ transform:translateX(150%);} 100%{ transform:translateX(-100%);} }
.hero__hint-text{ font-family:var(--mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   Section shell / reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in-view{ opacity:1; transform:none; }

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.25em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; }

/* =========================================================
   Feature / edition sections
   ========================================================= */
.feature{
  position:relative;
  padding:150px 0;
  overflow:hidden;
}
.feature--green{ background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(76,255,176,.22), transparent 65%), var(--black); }
.feature--violet{ background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(185,140,255,.22), transparent 65%), var(--black); }
.feature--teal{ background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(76,224,255,.20), transparent 65%), var(--black); }

.feature__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.feature__grid.reverse .feature__copy{ order:2; }
.feature__tag{ font-size:11px; margin-bottom:18px; }
.feature--green .feature__tag{ color:var(--neon); }
.feature--violet .feature__tag{ color:var(--violet); }
.feature--teal .feature__tag{ color:var(--teal); }

.feature__title{
  font-family:var(--display); font-size:clamp(38px,6vw,72px); line-height:.95; letter-spacing:.01em;
  margin:0 0 20px;
}
.feature__text{ color:var(--muted); max-width:44ch; font-size:16px; margin-bottom:28px; }
.feature__link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:4px;
}

.feature__art{ position:relative; display:flex; justify-content:center; }
.feature__art img{
  max-height:520px; width:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

/* =========================================================
   Tagline slab
   ========================================================= */
.slab{
  position:relative; padding:170px 0; text-align:center; background:var(--black); overflow:hidden;
}
.slab__bg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:min(22vw,260px); color:rgba(255,255,255,.035);
  white-space:nowrap; letter-spacing:.02em; pointer-events:none;
}
.slab__title{
  position:relative; font-family:var(--display); font-size:clamp(40px,8vw,110px);
  line-height:.95; letter-spacing:.01em; margin:0;
}
.slab__title em{ font-style:normal; color:var(--neon); }
.slab__sub{ position:relative; color:var(--muted); max-width:56ch; margin:24px auto 0; }

/* =========================================================
   Catalog
   ========================================================= */
.catalog{ padding:120px 0 60px; }
.catalog__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap;
}
.catalog__title{ font-family:var(--display); font-size:clamp(34px,5vw,54px); margin:8px 0 0; }
.catalog__count{ font-family:var(--mono); font-size:12px; color:var(--muted); }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:9px 18px; border-radius:999px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; transition:all .2s ease;
}
.filter:hover{ color:var(--off-white); border-color:var(--off-white); }
.filter.is-active{ background:var(--neon); border-color:var(--neon); color:#04140c; }

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;
}
.card{
  position:relative;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(76,255,176,.4); box-shadow:0 24px 40px -20px rgba(76,255,176,.15); }
.card__media{
  cursor:pointer;
  aspect-ratio:1/1.05; border-radius:10px; background:var(--panel-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.card__media img{ height:82%; width:auto; object-fit:contain; }
.card__badge{
  position:absolute; top:10px; left:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(76,255,176,.15); color:var(--neon); border:1px solid rgba(76,255,176,.4);
  padding:4px 8px; border-radius:999px;
}
.card__wish{
  position:absolute; top:8px; right:8px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:rgba(6,8,7,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:var(--off-white);
  transition:border-color .2s ease, color .2s ease, transform .15s ease;
}
.card__wish svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.card__wish.is-active{ color:var(--neon); border-color:var(--neon); }
.card__wish.is-active svg{ fill:var(--neon); }
.card__wish:active{ transform:scale(.9); }

.card__cat{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.card__name{ font-size:14.5px; line-height:1.3; font-weight:600; min-height:36px; }
.card__row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.card__price{ font-family:var(--mono); font-size:15px; color:var(--neon); }
.card__buy{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--off-white); padding:8px 14px; border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.card__buy:hover{ background:var(--off-white); color:var(--black); }

.catalog__empty{ text-align:center; color:var(--muted); padding:60px 0; font-family:var(--mono); font-size:13px; display:none; }
.catalog__empty.show{ display:block; }

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter{
  padding:130px 0; text-align:center; position:relative;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(76,255,176,.10), transparent 60%), var(--black);
  border-top:1px solid var(--line);
}
.newsletter__title{ font-family:var(--display); font-size:clamp(34px,6vw,64px); margin:0 0 14px; }
.newsletter__sub{ color:var(--muted); max-width:52ch; margin:0 auto 34px; }
.newsletter__form{
  display:flex; gap:10px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center;
}
.newsletter__form input{
  flex:1 1 260px; background:var(--panel); border:1px solid var(--line); color:var(--off-white);
  padding:14px 18px; border-radius:999px; font-family:var(--body); font-size:14px;
}
.newsletter__form input::placeholder{ color:var(--muted); }
.newsletter__form button{
  background:var(--neon); color:#04140c; border:none; padding:14px 26px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}
.newsletter__note{ margin-top:16px; font-size:12px; color:var(--muted); }
.newsletter__ok{ margin-top:16px; font-size:13px; color:var(--neon); font-family:var(--mono); display:none; }
.newsletter__ok.show{ display:block; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ padding:60px 0 34px; border-top:1px solid var(--line); }
.footer__top{
  display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; margin-bottom:40px;
}
.footer__brand .word{ font-family:var(--display); font-size:26px; }
.footer__brand p{ color:var(--muted); font-size:13px; max-width:32ch; margin-top:10px; }
.footer__col h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  margin:0 0 14px;
}
.footer__col a, .footer__col button, .footer__col span{ display:block; font-size:14px; margin-bottom:10px; color:var(--off-white); }
.footer__col a:hover, .footer__col button:not(:disabled):hover{ color:var(--neon); }
.footer__col button:disabled{ cursor:default; color:var(--muted); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em;
}
.footer__bottom a{ color:var(--muted); }
.footer__bottom a:hover{ color:var(--neon); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
  .feature__grid{ grid-template-columns:1fr; text-align:center; }
  .feature__grid .feature__text{ margin-left:auto; margin-right:auto; }
  .feature__grid.reverse .feature__art{ order:0; }
  .feature__art img{ max-height:360px; }
  .eyebrow{ justify-content:center; }
}
@media (max-width:600px){
  .nav__logo .word{ font-size:18px; }
  .nav{ padding:18px; }
  .carousel{ padding:60px 30vw; }
  .footer__top{ gap:28px; }
  .nav__cta{ display:none; }
}

/* =========================================================
   Cart icon (nav) + drawer
   ========================================================= */
.nav__cart{
  position:relative;
  background:none; border:1px solid var(--line); color:var(--off-white);
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-right:10px; transition:border-color .2s ease, color .2s ease;
}
.nav__cart:hover{ border-color:var(--neon); color:var(--neon); }
.nav__cart svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--neon); color:#04140c; font-family:var(--mono); font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:999px;
  align-items:center; justify-content:center; padding:0 4px;
}

.cart-overlay{
  position:fixed; inset:0; background:rgba(4,6,5,.7); z-index:300;
  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; width:min(420px, 92vw); z-index:301;
  background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s ease;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:20px; letter-spacing:.03em;
}
.cart-drawer__close{
  background:none; border:1px solid var(--line); color:var(--off-white);
  width:32px; height:32px; border-radius:50%; font-size:14px;
}
.cart-drawer__items{ flex:1; overflow-y:auto; padding:16px 24px; }
.cart-empty{ color:var(--muted); font-family:var(--mono); font-size:13px; padding:40px 0; text-align:center; }

.cart-item{
  display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);
  position:relative;
}
.cart-item__media{
  width:64px; height:72px; border-radius:8px; background:var(--panel-2); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cart-item__media img{ height:88%; width:auto; object-fit:contain; }
.cart-item__info{ flex:1; min-width:0; }
.cart-item__name{ font-size:13.5px; font-weight:600; line-height:1.3; padding-right:20px; }
.cart-item__variant{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }
.cart-item__row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cart-item__price{ font-family:var(--mono); font-size:13px; color:var(--neon); }
.cart-item__remove{
  position:absolute; top:14px; right:0; background:none; border:none; color:var(--muted);
  font-size:13px; padding:4px;
}
.cart-item__remove:hover{ color:var(--off-white); }

.qty-stepper{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:999px; padding:4px 12px;
  font-family:var(--mono); font-size:13px;
}
.qty-btn{ background:none; border:none; color:var(--off-white); font-size:15px; width:16px; line-height:1; }
.qty-btn:hover{ color:var(--neon); }

.cart-drawer__foot{ padding:20px 24px 26px; border-top:1px solid var(--line); }
.cart-drawer__total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:14px; margin-bottom:16px;
}
.cart-drawer__total strong{ font-size:20px; color:var(--neon); }
.cart-drawer__checkout{
  width:100%; background:var(--neon); color:#04140c; border:none; padding:14px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
}
.cart-drawer__note{ font-size:11.5px; color:var(--muted); margin-top:12px; line-height:1.5; }

/* card quick-add + actions row */
.card__actions{ display:flex; align-items:center; gap:8px; }
.card__quickadd{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--neon); color:var(--neon); background:transparent;
  padding:8px 10px; border-radius:999px; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.card__quickadd:hover{ background:var(--neon); color:#04140c; }
.card__name{ display:block; cursor:pointer; }

/* =========================================================
   Product detail view (#/produit/<id>)
   ========================================================= */
.pdp{ padding:130px 0 100px; }
.pdp__back{
  display:inline-block; margin-bottom:30px; font-family:var(--mono); font-size:12px;
  color:var(--muted); letter-spacing:.05em; background:none; border:none; cursor:pointer;
}
.pdp__back:hover{ color:var(--neon); }
.pdp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.pdp__media{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  aspect-ratio:1/1.05; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pdp__media img{ height:86%; width:auto; object-fit:contain; }
.pdp__badge{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(76,255,176,.15); color:var(--neon); border:1px solid rgba(76,255,176,.4);
  padding:5px 10px; border-radius:999px;
}
.pdp__name{ font-family:var(--display); font-size:clamp(30px,4vw,44px); line-height:1.05; margin:8px 0 12px; }
.pdp__price{ font-family:var(--mono); font-size:22px; color:var(--neon); margin-bottom:20px; }
.pdp__desc{ color:var(--muted); max-width:48ch; margin-bottom:28px; }

.pdp__swatches{ margin-bottom:28px; }
.pdp__swatches-label{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; }
.pdp__swatches-label span{ color:var(--off-white); }
.pdp__swatches-row{ display:flex; gap:10px; flex-wrap:wrap; }
.pdp__sizes{ margin-bottom:28px; }
.pdp__sizes-label{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; }
.pdp__sizes-row{ display:flex; gap:8px; flex-wrap:wrap; }
.size-chip{
  font-family:var(--mono); font-size:12px; color:var(--off-white);
  border:1px solid var(--line); border-radius:8px; padding:6px 12px;
  cursor:pointer; background:transparent; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.size-chip:hover{ border-color:var(--off-white); }
.size-chip.is-active{ background:var(--neon); border-color:var(--neon); color:#04140c; font-weight:700; }
.swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .2s ease, transform .2s ease;
}
.swatch.is-active{ box-shadow:0 0 0 2px var(--neon); transform:scale(1.08); }

.pdp__qty{ display:flex; align-items:center; gap:16px; margin-bottom:26px; font-family:var(--mono); font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.pdp__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.pdp__add{
  background:var(--neon); color:#04140c; border:none; padding:15px 28px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}
.pdp__buy{
  display:inline-flex; align-items:center; border:1px solid var(--off-white); color:var(--off-white);
  padding:15px 24px; border-radius:999px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; transition:background .2s ease, color .2s ease;
}
.pdp__buy:hover{ background:var(--off-white); color:var(--black); }
.pdp__shipping{ font-size:12px; color:var(--muted); }

.pdp__suggest{ margin-top:110px; padding-top:60px; border-top:1px solid var(--line); }
.pdp__suggest-title{ font-family:var(--display); font-size:clamp(28px,4vw,42px); margin:8px 0 30px; }
.suggest-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.suggest-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; display:block; transition:transform .2s ease, border-color .2s ease; cursor:pointer;
}
.suggest-card:hover{ transform:translateY(-3px); border-color:rgba(76,255,176,.4); }
.suggest-card__media{
  aspect-ratio:1/1.05; background:var(--panel-2); border-radius:8px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.suggest-card__media img{ height:82%; width:auto; object-fit:contain; }
.suggest-card__name{ font-size:12.5px; font-weight:600; line-height:1.3; margin-bottom:6px; }
.suggest-card__price{ font-family:var(--mono); font-size:13px; color:var(--neon); }

@media (max-width:860px){
  .pdp__grid{ grid-template-columns:1fr; gap:32px; }
  .pdp__suggest{ margin-top:70px; }
}

/* =========================================================
   Checkout (commande + virement bancaire)
   ========================================================= */
.checkout{ padding:150px 0 100px; }
.checkout__title{ font-family:var(--display); font-size:clamp(34px,5vw,54px); margin:8px 0 40px; }
.checkout__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:start; }
.checkout__section-title{ font-family:var(--display); font-size:22px; letter-spacing:.02em; margin:0 0 20px; }

.checkout__form{ display:flex; flex-direction:column; gap:16px; }
.checkout__field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkout__field{ display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.checkout__field input{
  font-family:var(--body); font-size:15px; color:var(--off-white); text-transform:none; letter-spacing:normal;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.checkout__field input:focus{ outline:none; border-color:var(--neon); }

.checkout__bank{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:12px; margin-bottom:14px;
}
.checkout__bank div{ display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.checkout__bank span{ color:var(--muted); font-family:var(--mono); font-size:12px; }
.checkout__bank strong{ text-align:right; word-break:break-word; }
.checkout__bank-note{ color:var(--muted); font-size:13px; margin:0 0 24px; }

.checkout__stripe-box{
  background:#141414; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:20px; margin:0 0 16px;
}
.checkout__payment-element{ min-height:40px; }
.checkout__stripe-loading{ color:var(--muted); font-size:13px; font-family:var(--mono); }
.checkout__payment-message{ color:#ff8080; font-size:13px; margin-top:10px; min-height:0; }
.checkout__payment-message:empty{ margin-top:0; }

.checkout__submit{
  background:var(--neon); color:#04140c; border:none; padding:16px 24px; border-radius:999px;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}
.checkout__submit:disabled{ opacity:.6; }
.checkout__legal{ font-size:12px; color:var(--muted); text-align:center; margin-top:4px; }

.checkout__summary{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  position:sticky; top:110px;
}
.checkout__row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.checkout__row:last-of-type{ border-bottom:none; }
.checkout__row-img{ width:56px; height:56px; object-fit:contain; background:var(--panel-2); border-radius:8px; padding:4px; }
.checkout__row-name{ font-size:13.5px; font-weight:600; line-height:1.3; }
.checkout__row-meta{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:4px; }
.checkout__row-price{ font-family:var(--mono); font-size:13px; color:var(--neon); white-space:nowrap; }
.checkout__total{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--display); font-size:22px; }

.checkout-empty{ padding:180px 24px 120px; text-align:center; }
.checkout-empty .pdp__desc{ max-width:52ch; margin:14px auto 26px; }

@media (max-width:860px){
  .checkout__grid{ grid-template-columns:1fr; }
  .checkout__field-row{ grid-template-columns:1fr; }
  .checkout__summary{ position:static; }
}