/**
 * SC Katana Customizer — section "Chaque lame, trois étapes" en standalone.
 * Chargé aussi sur les fiches produit de la catégorie Katana.
 * Selfscoping via .scx-process pour éviter les conflits thème.
 */

.scx-process{
  --scxp-bg:#0a0a0a;
  --scxp-bg-alt:#141414;
  --scxp-accent:#c9a048;
  --scxp-border:rgba(201,191,171,.1);
  --scxp-border-strong:rgba(201,160,72,.35);
  --scxp-title:#e8e2d3;
  --scxp-text:#c9bfab;
  --scxp-text-dim:#a89c85;
  background:var(--scxp-bg);
  padding:60px 3vw 50px;
  max-width:1720px;margin:0 auto;
  color:var(--scxp-text);
  font-family:'Cormorant Garamond',Georgia,serif
}
.scx-process .scx-process-inner{max-width:1000px;margin:0 auto}
/* Sur fiche produit (pas sur la page customizer qui a son propre container),
   on borne l'inner plus fortement pour suivre la largeur du contenu produit. */
body.single-product .scx-process .scx-process-inner{max-width:960px}
.scx-process .scx-process-head{text-align:center;margin:0 0 48px}
.scx-process .scx-process-kicker{
  display:block;color:var(--scxp-accent);letter-spacing:.32em;text-transform:uppercase;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:.78em;margin:0 0 14px;opacity:.9
}
.scx-process .scx-process-title{
  font-family:'Cinzel',Georgia,serif!important;font-weight:600;font-style:normal;
  color:var(--scxp-title);font-size:clamp(1.3em,2.4vw,1.8em)!important;
  letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 10px;line-height:1.2
}
.scx-process .scx-divider{
  width:60px;height:1px;border:0;background:var(--scxp-accent);margin:14px auto 20px;opacity:.7
}
.scx-process .scx-process-sub{
  color:var(--scxp-text-dim);font-style:italic;font-size:1.05em;
  max-width:640px;margin:0 auto
}
.scx-process .scx-process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px
}
@media (max-width:800px){
  /* Carrousel swipeable : 1 card centrée + peek de la suivante */
  .scx-process .scx-process-grid{
    display:flex;grid-template-columns:none;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 4vw 12px;
    margin:0 -4vw;  /* full-bleed */
    scrollbar-width:none
  }
  .scx-process .scx-process-grid::-webkit-scrollbar{display:none}
  .scx-process .scx-process-step{
    flex:0 0 78%;  /* card = 78% → ~22% visible pour la suivante */
    scroll-snap-align:center;
    scroll-snap-stop:always
  }
  .scx-process .scx-process-step:first-child{margin-left:0}
  .scx-process .scx-process-step:last-child{margin-right:4vw}
}
.scx-process .scx-process-step{
  position:relative;
  background:var(--scxp-bg-alt);
  border:1px solid var(--scxp-border);
  text-align:center;
  transition:border-color .3s,transform .3s;
  overflow:hidden
}
.scx-process .scx-process-step:hover{
  border-color:var(--scxp-border-strong);transform:translateY(-3px)
}
.scx-process .scx-process-step::before{
  content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;
  border-top:2px solid var(--scxp-accent);border-left:2px solid var(--scxp-accent);z-index:3
}
.scx-process .scx-process-step::after{
  content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;
  border-bottom:2px solid var(--scxp-accent);border-right:2px solid var(--scxp-accent);z-index:3
}
.scx-process .scx-process-video-wrap{
  position:relative;aspect-ratio:4/5;background:#000;overflow:hidden
}
.scx-process .scx-process-video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease
}
.scx-process .scx-process-step:hover .scx-process-video{transform:scale(1.04)}
.scx-process .scx-process-video-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,10,0) 50%,rgba(10,10,10,.85) 100%)
}
.scx-process .scx-process-num{
  position:absolute;bottom:14px;left:18px;z-index:2;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;
  color:var(--scxp-accent);
  font-size:3em;line-height:1;letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.75)
}
.scx-process .scx-process-step-title{
  padding:22px 24px 0;margin:0 0 14px;
  font-family:'Cinzel',Georgia,serif!important;font-weight:600;font-style:normal;
  color:var(--scxp-title);font-size:1.3em!important;
  letter-spacing:.1em;text-transform:uppercase
}
.scx-process .scx-process-desc{
  padding:0 24px 26px;margin:0;
  color:var(--scxp-text);font-style:italic;font-size:1.02em;line-height:1.6
}