/* ===================================
    SSK Fighting — Boutique
    Dérivé de la démo Crafto « Fashion store ».
    Le squelette (header centre-logo, panier, boutons, footer) vient de
    demos/fashion-store/fashion-store.css ; les JETONS DE MARQUE viennent de
    la landing (demos/gym-and-fitness/gym-and-fitness.css) pour que la
    boutique et le site ne soient pas deux marques différentes.
====================================== */

/* ---------- fonts : ceux de la landing, pas ceux du fashion-store ---------- */
/* La démo d'origine chargeait Outfit + Figtree. On garde korolev-condensed
   (alt-font, les titres) et Urbanist (texte courant) : ce sont les polices du
   site public et de l'app mobile. */
@import url("https://use.typekit.net/rrw2seg.css");
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ---------- variables ---------- */
/* ⚠️ --base-color vaut --dark-gray, comme sur la landing. La démo fashion-store
   posait --base-color: #fee300 (le jaune des captures) : tout ce qui portait
   .bg-base-color / .text-base-color y devenait jaune. En repassant sur #232323
   on hérite du même piège que la landing, documenté dans apps/landing/DESIGN.md §2 :
   « base color » n'est PAS un accent ici, c'est la couleur du texte.
   → Ne jamais utiliser .btn-base-color ni .text-base-color pour accentuer.
     Sur fond clair l'accent est le gras + les capitales ; sur fond sombre, le blanc. */
:root {
    --base-color: #232323;
    --dark-gray: #232323;
    --medium-gray: #717580;
    --light-medium-gray: #cbcbcb;
    --alt-font: korolev-condensed, sans-serif;
    --primary-font: 'Urbanist', sans-serif;
}

/* ---------- reset ---------- */
body {
    font-size: 17px;
    line-height: 28px;
    letter-spacing: .4px;
}
a:hover {
    color: var(--dark-gray);
}
.input-small, .textarea-small, .select-small {
    font-size: 14px;
}
.input-small {
    padding: 9px 15px;
}

/* ---------- header ---------- */
/* ⚠️ `style.css` pose `header .navbar { position: fixed }` : la barre de
   navigation sort du flux, `<header>` mesure 0 de haut, et la première section
   de la page passe DESSOUS. Sur la landing ça ne se voit pas — l'en-tête y
   couvre une photo de hero prévue pour ça. Ici il mangeait le surtitre
   « Boutique du club » (constaté au navigateur le 22/08).
   `sticky` remet la barre dans le flux — plus de recouvrement — tout en la
   gardant visible au défilement, ce qui compte pour une boutique : le panier
   et son compteur restent atteignables depuis n'importe quel point de la page. */
header .navbar {
    position: sticky;
}
header .navbar-brand img {
    max-height: 43px;
}
header .navbar-brand,
header.sticky .fixed-header .navbar-brand,
header.sticky .disable-fixed .navbar-brand {
    padding: 18px 0;
}
.header-icon .icon > a {
    padding-left: 20px;
}
.header-icon .icon .header-cart > a {
    padding-left: 18px;
}
/* Pastille du panier : fond sombre, chiffre blanc. La démo mettait le chiffre
   en --dark-gray sur une pastille jaune ; sans le jaune ce serait noir sur noir. */
.header-cart-icon .cart-count {
    background-color: var(--dark-gray);
    color: var(--white);
}
.header-cart-icon .header-cart .cart-item-list {
    border-radius: 0;
}
.header-cart-icon .header-cart .cart-item-list .cart-item .product-detail a {
    font-size: 16px;
    line-height: 28px;
}

/* ---------- couleurs de fond ---------- */
/* ⚠️ `.bg-nero-grey` n'existe PAS dans `style.css` — elle n'est définie que
   dans les surcouches de démo. Le pied de page la porte : sans cette règle il
   reste transparent, texte gris clair sur blanc, et rien ne signale l'erreur
   (constaté au navigateur le 22/08). C'est le même piège que les classes
   Crafto orphelines : la classe existe dans le markup, pas dans le CSS. */
.bg-nero-grey,
.bg-nero-grey:focus {
    background-color: #1c1c1c;
}

/* ---------- boutons ---------- */
/* Reprise à l'identique du fashion-store : ces tailles sont plus généreuses que
   celles de style.css et donnent des cibles tactiles correctes en fiche produit. */
.btn {
    text-transform: inherit;
}
.btn.btn-dark-gray {
    font-weight: 400;
}
.btn.btn-extra-large {
    font-size: 19px;
    padding: 20px 38px;
}
.btn.btn-large {
    font-size: 18px;
    padding: 15px 30px;
}
.btn.btn-medium {
    font-size: 16px;
    padding: 13px 26px;
}
.btn.btn-small {
    font-size: 16px;
    padding: 10px 20px;
}
.btn.btn-very-small {
    font-size: 14px;
    padding: 9px 20px;
}
.btn.btn-link {
    padding: 0 0 2px;
}

/* ---------- titre de page ---------- */
.page-title-extra-large h1 {
    font-size: 4.5rem;
    line-height: 4.5rem;
}

/* ---------- fiche produit ---------- */
/* Sélecteur de taille : des puces carrées, bordure fine, pleine au choix.
   Pas de filet coloré à gauche ni de carte à liseré — l'état se lit au
   remplissage, comme partout ailleurs dans le produit. */
.size-selector .size-option {
    min-width: 48px;
    height: 48px;
    line-height: 46px;
    text-align: center;
    border: 1px solid var(--extra-medium-gray);
    color: var(--dark-gray);
    font-family: var(--alt-font);
    font-size: 15px;
    letter-spacing: .5px;
    cursor: pointer;
    background: transparent;
    padding: 0 12px;
    transition: all .3s ease-in-out;
}
.size-selector .size-option:hover {
    border-color: var(--dark-gray);
}
.size-selector .size-option.active {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: var(--white);
}
.size-selector .size-option:disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Sélecteur de quantité */
.quantity-selector {
    border: 1px solid var(--extra-medium-gray);
    display: inline-flex;
    align-items: center;
    height: 48px;
}
.quantity-selector button {
    width: 42px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--dark-gray);
    font-size: 18px;
    line-height: 1;
}
.quantity-selector button:disabled {
    opacity: .3;
}
/* ⚠️ `padding: 0` est indispensable, pas cosmétique : `style.css` applique
   `input { padding: 12px 25px }` à tous les champs. Sur une case de 46px de
   large, 50px de rembourrage horizontal poussent le chiffre HORS du champ —
   la quantité était invisible entre les boutons − et + (constaté au navigateur
   le 22/08), alors que la valeur était bien là dans le DOM. */
.quantity-selector input {
    width: 46px;
    padding: 0;
    height: 46px;
    border: 0;
    text-align: center;
    font-family: var(--alt-font);
    font-size: 16px;
    color: var(--dark-gray);
    background: transparent;
    -moz-appearance: textfield;
}
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- surlignage de titre ---------- */
/* `.text-highlight span` est le trait de couleur posé sous un fragment de
   titre. Crafto le cale sur SA police de démo ; avec Urbanist en fs-20 le
   trait de 8px remonte dans les jambages et BARRE le texte au lieu de le
   souligner (constaté au navigateur le 23/08 sur le surtitre du hero).
   On le redescend et on l'affine. */
.text-highlight span {
    height: 5px;
    bottom: -2px;
}

/* ---------- pastille produit ---------- */
/* `style.css:19118` pose `.lable.new { background: var(--green) }` et
   `.lable.hot { background: var(--red) }`. Un badge vert vif sur une marque
   monochrome jure, et c'est exactement le genre de couleur qui se glisse sans
   qu'on la choisisse. Les deux repassent en noir : l'information (« Nouveau »)
   se lit au texte, pas à la teinte. */
.shop-image .lable.new,
.shop-image .lable.hot {
    background-color: var(--dark-gray);
    color: var(--white);
}

/* Le survol du fashion-store colore le rond actif en --base-color, qui vaut
   --dark-gray chez nous : une pastille de couleur deviendrait noire au survol,
   donc illisible comme échantillon. On neutralise. */
.shop-modern .grid-item .shop-box .shop-image .shop-hover ul li button:hover {
    background-color: inherit;
}

/* ---------- vignette produit ---------- */
/* Le visuel n'est pas encore fourni (cf. #507) : la vignette tient toute seule
   sur un aplat gris clair et le nom du produit, sans casser la grille le jour
   où les photos arrivent. */
.shop-box .shop-image {
    background-color: var(--very-light-gray);
    overflow: hidden;
}
.shop-box .shop-image img {
    width: 100%;
    transition: transform .5s ease-in-out;
}
.shop-box:hover .shop-image img {
    transform: scale(1.04);
}
.shop-box .product-tag {
    font-family: var(--alt-font);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 4px 10px;
}

/* ---------- retrait au club ---------- */
/* Le mode de livraison n'est pas tranché (#507). Tant qu'il ne l'est pas, le
   retrait au club est présenté comme le seul mode, en clair, pas en petit. */
.pickup-note {
    background-color: var(--very-light-gray);
    padding: 20px 25px;
}

/* ---------- footer ---------- */
footer .footer-logo img {
    max-height: 43px;
}
footer .nav-link {
    color: var(--white);
    padding: 0 20px;
}
footer ul li {
    margin-bottom: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .header-icon .icon > a,
    .header-icon .icon .header-cart > a { padding-left: 12px; }
    footer .nav-link { padding: 0 12px; }
}
@media (max-width: 767px) {
    .btn.btn-large { font-size: 17px; padding: 13px 25px; }
    .page-title-extra-large h1 { font-size: 2.8rem; line-height: 2.9rem; }
}