/* ============================================================
   NOVABARD SHOP — couche boutique du système « Tactile Architectural »
   Dépend de design-system/tokens.css + design-system/components.css.
   Expression plus dense et utilitaire du système : le catalogue est un
   outil de commande, pas une vitrine éditoriale.
   ============================================================ */

/* ------------------------------------------------------------
   1. GABARIT
   ------------------------------------------------------------ */
.container{max-inline-size:var(--wrap-max);margin-inline:auto;padding-inline:var(--wrap-pad)}
.container.narrow{max-inline-size:56rem}
.container.center{text-align:center}
.section{padding-block:var(--sp-7)}
main{min-block-size:60vh}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-block-end:var(--sp-5);
}
.section-head h2{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h2);line-height:var(--leading-tight)}
.section-head a{font-size:var(--text-small);font-weight:600;text-decoration:none;border-block-end:1px solid var(--accent);padding-block-end:2px}
.empty{color:var(--ink-2);padding-block:var(--sp-6)}

/* ------------------------------------------------------------
   2. EN-TÊTE / PIED — compléments boutique
   ------------------------------------------------------------ */
.nb-header__brand small{display:none;font-family:var(--font-spec);font-size:.65rem;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
@media (min-width:900px){.nb-header__brand small{display:block}}
[dir="rtl"] .nb-header__brand small{letter-spacing:0;font-family:var(--font-ui)}
.nb-header__brand span{display:flex;flex-direction:column;line-height:1.2}

@media (max-width:640px){
  .nb-header__brand strong{font-size:1.1rem}
  .nb-header__brand img{block-size:1.75rem}
}

/* Messages flash */
.flash{
  border:1px solid var(--line);border-inline-start-width:4px;
  background:var(--bg-2);padding:var(--sp-3) var(--sp-4);
  margin-block:var(--sp-4);font-size:var(--text-small);
}
.flash.error{border-inline-start-color:#9B3B2F}
.flash.notice{border-inline-start-color:var(--accent)}

/* ------------------------------------------------------------
   3. MASTHEAD BOUTIQUE
   ------------------------------------------------------------ */
.shop-hero{padding-block:var(--sp-7) var(--sp-6);border-block-end:1px solid var(--line)}
.shop-hero h1{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h1);line-height:var(--leading-display);letter-spacing:-.015em}
[dir="rtl"] .shop-hero h1{letter-spacing:0}
.shop-hero .t-micro{display:block;color:var(--accent);margin-block-end:var(--sp-3)}
.shop-hero p{font-size:var(--text-lead);line-height:1.5;color:var(--ink-2);max-inline-size:42em;margin-block:var(--sp-3) var(--sp-5)}
.shop-hero .actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-block-start:var(--sp-5);font-size:var(--text-small);color:var(--ink-2)}

/* ------------------------------------------------------------
   4. FILTRES CATALOGUE
   ------------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-block:var(--sp-5)}

/* ------------------------------------------------------------
   5. GRILLE PRODUITS
   ------------------------------------------------------------ */
.shop-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.shop-grid{grid-template-columns:repeat(4,1fr)}}

/* Carte produit : lien plein cadre par-dessus la fiche glissante */
a.nb-product{display:block;text-decoration:none;color:inherit}
.nb-product__ref{font-family:var(--font-spec);font-size:var(--text-micro);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--ink-3)}
[dir="rtl"] .nb-product__ref{letter-spacing:0;text-transform:none;font-family:var(--font-ui)}
/* Plusieurs produits partagent le même nom (« Flexible Ston Tile ») et ne se
   distinguent que par la référence : le bandeau empile nom puis prix plutôt
   que de tronquer le nom sur une seule ligne.
   Le repli se joue sur la hauteur des specs (grid-template-rows 0fr→1fr) et
   non sur un décalage fixe : le nom peut tenir sur 1 ou 2 lignes sans que rien
   ne dépasse. */
.nb-product{display:flex;flex-direction:column}
.nb-product__media{flex:none}
.nb-product__sheet{position:static;transform:none;margin-block-start:auto}
.nb-product__head{flex-direction:column;align-items:flex-start;gap:var(--sp-1);min-block-size:0}
.nb-product__head h3{
  min-inline-size:0;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nb-product__price{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

.nb-product__specs{
  display:grid;grid-template-rows:0fr;padding-block:0;
  transition:grid-template-rows var(--dur-base) var(--ease-out);
}
.nb-product__specs-in{
  overflow:hidden;display:flex;flex-wrap:wrap;gap:var(--sp-2);
  padding-block-start:var(--sp-3);color:var(--ink-2);
}
.nb-product:hover .nb-product__specs,
.nb-product:focus-within .nb-product__specs,
.nb-product.is-open .nb-product__specs{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){.nb-product__specs{transition:none}}
.nb-product__price small{font-size:.72em;font-weight:500;color:var(--ink-2)}
/* Prix barre de reference (majoration 20 %) devant le prix courant. */
.price-old{text-decoration:line-through;color:var(--ink-3);font-weight:500;font-size:.78em;margin-inline-end:.35em}
.nb-product__cat{font-family:var(--font-spec);font-size:var(--text-micro);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--ink-3);margin-block-end:var(--sp-1)}
[dir="rtl"] .nb-product__cat{letter-spacing:0;text-transform:none;font-family:var(--font-ui)}

/* Pastille de stock posée sur l'image */
.stock{
  font-family:var(--font-spec);font-size:var(--text-micro);font-weight:500;
  letter-spacing:var(--tracking-micro);text-transform:uppercase;
  border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);
  background:var(--bg);border:1px solid var(--line);white-space:nowrap;
}
[dir="rtl"] .stock{letter-spacing:0;text-transform:none;font-family:var(--font-ui);font-size:var(--text-small)}
.nb-product__media .stock{position:absolute;inset-block-start:var(--sp-3);inset-inline-start:var(--sp-3);z-index:2}
.stock.out{color:var(--ink-2)}
.stock.in::before{content:"";display:inline-block;inline-size:.5rem;block-size:.5rem;border-radius:var(--r-pill);background:var(--accent);margin-inline-end:var(--sp-2)}
.stock.inline{display:inline-flex;align-items:center;margin-block:var(--sp-3)}

.card-noimg{display:grid;place-items:center;font-size:2rem;background:var(--bg-2);block-size:100%;min-block-size:8rem;color:var(--ink-3)}
.card-noimg.big{aspect-ratio:1;font-size:4rem;border:1px solid var(--line)}

/* ------------------------------------------------------------
   6. BANDE DE SPEC PARTAGÉE
   ------------------------------------------------------------ */
.spec-band{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);
  border:1px solid var(--line);background:var(--bg-2);
  padding:var(--sp-3) var(--sp-5);margin-block:var(--sp-6);
}
.spec-band strong{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-weight:600}
.spec-band .t-micro{color:var(--accent)}

/* ------------------------------------------------------------
   7. ACCESSOIRES
   ------------------------------------------------------------ */
.accessories-head{margin-block-start:var(--sp-8);border-block-start:1px solid var(--line);padding-block-start:var(--sp-6)}
.accessories-note{font-size:var(--text-small);color:var(--ink-2);max-inline-size:40em}

.accessory-locked{
  border:1px solid var(--line);border-inline-start-width:4px;border-inline-start-color:var(--accent);
  background:var(--bg-2);padding:var(--sp-4) var(--sp-5);margin-block:var(--sp-5);
}
.accessory-locked p{font-size:var(--text-small);color:var(--ink-2);margin-block-end:var(--sp-4)}

/* ------------------------------------------------------------
   8. BANDEAU PAIEMENT (COD + acompte)
   ------------------------------------------------------------ */
.cod-band{
  display:grid;gap:var(--sp-4);border:1px solid var(--line);
  padding:var(--sp-5);margin-block:var(--sp-7);
}
@media (min-width:800px){.cod-band{grid-template-columns:repeat(3,1fr)}}
.cod-band h3{font-size:var(--text-body);font-weight:700;margin-block-end:var(--sp-1)}
.cod-band p{font-size:var(--text-small);color:var(--ink-2)}

/* ------------------------------------------------------------
   9. PAGE PRODUIT
   ------------------------------------------------------------ */
.product-layout{display:grid;gap:var(--sp-6);align-items:start;padding-block:var(--sp-6)}
@media (min-width:900px){.product-layout{grid-template-columns:1.05fr .95fr}}

.p-gallery figure{border:1px solid var(--line);aspect-ratio:1;overflow:hidden;margin:0;background:var(--bg-2)}
.p-gallery figure img{inline-size:100%;block-size:100%;object-fit:cover}
.p-thumbs{display:flex;gap:var(--sp-2);margin-block-start:var(--sp-2);flex-wrap:wrap}
.p-thumbs button{inline-size:64px;block-size:64px;border:1px solid var(--line);padding:0;overflow:hidden;cursor:pointer;background:var(--bg)}
.p-thumbs button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:-2px}
.p-thumbs img{inline-size:100%;block-size:100%;object-fit:cover}

.p-info h1{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h2);line-height:var(--leading-tight);margin-block-end:var(--sp-2)}
.p-cat{font-family:var(--font-spec);font-size:var(--text-micro);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--accent)}
[dir="rtl"] .p-cat{letter-spacing:0;text-transform:none;font-family:var(--font-ui);font-weight:700}
.p-ref{font-family:var(--font-spec);font-size:var(--text-small);color:var(--ink-2);margin-block-end:var(--sp-4)}
.p-desc{color:var(--ink-2);margin-block:var(--sp-4)}
.p-price{border-block:1px solid var(--line);padding-block:var(--sp-4);margin-block:var(--sp-4)}
.p-specs{list-style:none;margin-block:var(--sp-4);border:1px solid var(--line)}
.p-specs li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border-block-start:1px solid var(--line-soft);font-size:var(--text-small)}
.p-specs li:first-child{border-block-start:0}
.p-specs .k{color:var(--ink-2)}
.p-specs .v{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-weight:500;text-align:end}

/* Ajout au panier */
.add-form{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;margin-block-start:var(--sp-5)}
.add-form .qty-field{flex:none}
.add-form .nb-input{margin-block-end:0;max-inline-size:7rem}
.add-form .nb-btn{flex:1;min-inline-size:14rem}
.reassure{font-size:var(--text-small);color:var(--ink-2);border:1px solid var(--line-soft);padding:var(--sp-3) var(--sp-4);margin-block-start:var(--sp-4)}

/* ------------------------------------------------------------
   10. PANIER
   ------------------------------------------------------------ */
.cart-table{border:1px solid var(--line);margin-block:var(--sp-5)}
.cart-row{
  display:grid;gap:var(--sp-3) var(--sp-4);align-items:center;
  grid-template-columns:1fr auto;
  padding:var(--sp-4);border-block-start:1px solid var(--line-soft);
}
.cart-row:first-child{border-block-start:0}
@media (min-width:768px){
  .cart-row{grid-template-columns:1fr auto auto auto}
}
.cart-prod{display:flex;align-items:center;gap:var(--sp-4);min-inline-size:0}
.cart-prod img{inline-size:64px;block-size:64px;object-fit:cover;border:1px solid var(--line-soft);flex:none}
.cart-prod a{text-decoration:none;font-weight:600;display:block}
.cart-prod a:hover{text-decoration:underline}
.cart-prod small{display:block;color:var(--ink-3);font-family:var(--font-spec);font-size:var(--text-micro);margin-block-start:var(--sp-1)}
.cart-qty{display:flex;gap:var(--sp-2);align-items:center}
.cart-qty .nb-input{margin-block-end:0;inline-size:5rem;min-block-size:2.75rem;padding:var(--sp-2) var(--sp-3)}
.cart-line-total{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:end}
.btn-small{
  min-block-size:2.75rem;min-inline-size:2.75rem;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--bg);
}
.btn-small:hover{background:var(--bg-3)}
.btn-remove{
  min-block-size:2.75rem;min-inline-size:2.75rem;border:1px solid var(--line-soft);
  display:grid;place-items:center;color:var(--ink-3);background:var(--bg);
}
.btn-remove:hover{background:var(--bg-3);color:var(--ink)}

.cart-footer{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
  border:1px solid var(--line);background:var(--bg-2);padding:var(--sp-5);margin-block-start:var(--sp-5);
}
.cart-total{font-size:var(--text-lead)}
.cart-total strong{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-size:var(--text-price);font-weight:600;display:block;line-height:1.1}
.cart-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* Upsell accessoires */
.upsell{margin-block-start:var(--sp-8);border-block-start:1px solid var(--line);padding-block-start:var(--sp-6)}
.upsell h2{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h3)}
.upsell-note{font-size:var(--text-small);color:var(--ink-2);margin-block:var(--sp-2) var(--sp-5)}
.upsell-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.upsell-grid{grid-template-columns:repeat(4,1fr)}}
.upsell-card{border:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg)}
.upsell-img{display:block;aspect-ratio:1;overflow:hidden;border-block-end:1px solid var(--line-soft)}
.upsell-img img{inline-size:100%;block-size:100%;object-fit:cover}
.upsell-body{padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1);flex:1}
.upsell-name{text-decoration:none;font-weight:600;font-size:var(--text-small)}
.upsell-dims{color:var(--ink-3);font-family:var(--font-spec);font-size:var(--text-micro)}
.upsell-price{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-weight:600;margin-block-start:auto;padding-block-start:var(--sp-2)}
.upsell-price small{font-size:.72em;font-weight:500;color:var(--ink-2)}
.upsell-card form{padding:0 var(--sp-4) var(--sp-4)}
.upsell-card .nb-btn{inline-size:100%;min-block-size:2.75rem;padding:var(--sp-2) var(--sp-3);font-size:var(--text-small)}

/* ------------------------------------------------------------
   11. COMMANDE
   ------------------------------------------------------------ */
.checkout-note{
  border:1px solid var(--line);border-inline-start-width:4px;border-inline-start-color:var(--accent);
  background:var(--bg-2);padding:var(--sp-4) var(--sp-5);margin-block:var(--sp-5);
  font-size:var(--text-small);color:var(--ink-2);
}
.checkout-note strong{color:var(--ink)}
.checkout-layout{display:grid;gap:var(--sp-6);align-items:start}
@media (min-width:900px){.checkout-layout{grid-template-columns:1.2fr .8fr}}
.checkout-form .nb-btn{inline-size:100%;margin-block-start:var(--sp-3)}
.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.checkout-summary{border:1px solid var(--line);background:var(--bg-2);padding:var(--sp-5)}
.checkout-summary h2{font-family:var(--font-spec);font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--ink-2);margin-block-end:var(--sp-4)}
[dir="rtl"] .checkout-summary h2{letter-spacing:0;text-transform:none;font-family:var(--font-ui);font-weight:700;font-size:var(--text-small)}
.sum-row{display:flex;justify-content:space-between;gap:var(--sp-3);padding-block:var(--sp-2);border-block-start:1px solid var(--line-soft);font-size:var(--text-small)}
.sum-row:first-of-type{border-block-start:0}
.sum-row span:last-child{font-family:var(--font-spec);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:end}
.sum-row.total{border-block-start:1px solid var(--line);margin-block-start:var(--sp-2);padding-block-start:var(--sp-3);font-size:var(--text-body);font-weight:700}
.sum-row.deposit{color:var(--ink-2)}

/* ------------------------------------------------------------
   12. CONFIRMATION
   ------------------------------------------------------------ */
.thanks-icon{font-size:3rem;margin-block-end:var(--sp-4)}
.center h1{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h2);line-height:var(--leading-tight);margin-block-end:var(--sp-6)}
.thanks-steps{list-style:none;counter-reset:step;text-align:start;border:1px solid var(--line);margin-block:var(--sp-6);max-inline-size:40rem;margin-inline:auto}
.thanks-steps li{
  counter-increment:step;position:relative;
  padding:var(--sp-4) var(--sp-5);padding-inline-start:4.25rem;
  border-block-start:1px solid var(--line-soft);font-size:var(--text-small);color:var(--ink-2);
}
.thanks-steps li:first-child{border-block-start:0}
.thanks-steps li strong{color:var(--ink)}
.thanks-steps li::before{
  content:"0" counter(step);
  position:absolute;inset-inline-start:var(--sp-5);inset-block-start:var(--sp-4);
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:1.3rem;line-height:1.2;color:var(--accent);font-variant-numeric:tabular-nums;
}
.rib-box{border:1px solid var(--line);background:var(--bg-2);padding:var(--sp-4) var(--sp-5);margin-block:var(--sp-6);max-inline-size:40rem;margin-inline:auto}
.rib-box strong{display:block;font-size:var(--text-small);color:var(--ink-2);margin-block-end:var(--sp-2)}
.rib{font-family:var(--font-spec);font-variant-numeric:tabular-nums;font-size:var(--text-lead);word-break:break-all}

/* ------------------------------------------------------------
   13. BIDI — CHIFFRES ET SPECS EN CONTEXTE ARABE
   Les prix (« 2 100 Dhs / PCS ») et les dimensions (« 600 × 1200 mm »)
   sont des suites latines : dans un bloc RTL, l'algorithme bidi réordonne
   leurs segments séparés par des espaces (« Dhs / PCS 100 2 »).
   On isole donc chaque suite numérique en LTR — l'élément, lui, reste
   positionné par le flux RTL.
   ------------------------------------------------------------ */
[dir="rtl"] .nb-product__price,
[dir="rtl"] .nb-product__ref,
[dir="rtl"] .spec-band strong,
[dir="rtl"] .p-price,
[dir="rtl"] .p-ref,
[dir="rtl"] .cart-prod small,
[dir="rtl"] .cart-total strong,
[dir="rtl"] .upsell-price,
[dir="rtl"] .upsell-dims{direction:ltr;unicode-bidi:isolate}

/* Colonnes chiffrées alignées : sous direction:ltr, « start » = le bord
   gauche, qui est bien le bord de fin en RTL. */
[dir="rtl"] .cart-line-total,
[dir="rtl"] .p-specs .v,
[dir="rtl"] .sum-row span:last-child{direction:ltr;unicode-bidi:isolate;text-align:start}

/* ------------------------------------------------------------
   14. PONT INTER-DOMAINES
   ------------------------------------------------------------ */
.bridge-band{border:1px solid var(--line);padding:var(--sp-5);margin-block:var(--sp-7);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}
.bridge-band p{max-inline-size:34em;color:var(--ink-2);font-size:var(--text-small)}

/* Panier : mise à jour live. Quand le JS est actif (.cart--live), le bouton de
   rafraîchissement manuel disparaît — le total suit la saisie. Sans JS il reste
   visible et le formulaire se soumet normalement. */
.cart--live .cart-qty .btn-small{display:none}

/* Pages légales : colonne de lecture, hiérarchie sobre. */
.legal h2{margin-block:var(--sp-6) var(--sp-2);font-size:var(--text-lead)}
.legal p,.legal li{color:var(--ink-2);line-height:1.7}
.legal ul{margin-block-end:var(--sp-3);padding-inline-start:var(--sp-5)}
.legal li{margin-block-end:var(--sp-1)}
.legal-updated{font-size:var(--text-small);color:var(--ink-3)}
.legal-back{margin-block-start:var(--sp-7)}
.nb-footer__legal a{color:inherit}

/* ------------------------------------------------------------
   14. ENCART SHOWROOM (fiche produit + panier)
   ------------------------------------------------------------ */
.showroom-note{
  border:1px solid var(--line);background:var(--bg-2);
  padding:var(--sp-5);margin-block-start:var(--sp-6);
  display:grid;gap:var(--sp-2);justify-items:start;
}
.showroom-note p{margin:0}
.showroom-note .sn-title{
  font-family:var(--font-spec);font-size:var(--text-micro);font-weight:500;
  letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--accent);
}
[dir="rtl"] .showroom-note .sn-title{letter-spacing:0;text-transform:none;font-family:var(--font-ui);font-weight:700;font-size:var(--text-small)}
.showroom-note .sn-text{color:var(--ink)}
.showroom-note .sn-text strong{font-weight:700}
.showroom-note .sn-hours{font-size:var(--text-small);color:var(--ink-2)}
.showroom-note .sn-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-block-start:var(--sp-2)}
.showroom-note .sn-actions .nb-btn{font-size:var(--text-small);padding-block:.55em}