:root {
  --ub-encre: #141414;
  --ub-creme: #faf8f4;
  --ub-terra: #b96a45;
  --ub-camel: #c89a63;
  --ub-perle: #cfcfcb;
  --ub-gris: #6e6a63;
  --ub-ligne: #e6e3dd;

  /* Superpositions dérivées de l'encre : un changement de --ub-encre doit se
     propager au voile, ce qu'une valeur littérale empêcherait. */
  --ub-encre-rgb: 20 20 20;
  --ub-voile-fond: rgb(var(--ub-encre-rgb) / 42%);
  --ub-panneau-fond: #fff;
  --ub-panneau-ombre: rgb(var(--ub-encre-rgb) / 14%);

  --ub-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ub-serif: Georgia, 'Times New Roman', serif;

  --ub-titre-espace: 0.22em;
  --ub-z-voile: 900;
  --ub-z-panneau: 1000;

  /* Retrait de référence des blocs pleine largeur de la page. Il vit ici et non
     dans `carrousel.css`, qui n'est enfilée que sur les pages portant le
     carrousel (inc/assets.php) : les blocs insérables n'importe où — la bande
     soins par son pattern — doivent trouver la valeur sur toute page. */
  --ub-gouttiere-page: 1.2rem;

  /* Rayon des grandes bandes de la page (soins, club). Partagé plutôt que
     recopié : le client les veut identiques, et deux littéraux dans deux
     feuilles distinctes (`editorial.css`, `home.css`) divergeraient au premier
     ajustement de l'une des deux. */
  --ub-rayon-bande: 12px;

  /* Rayon des commandes principales — la commande du panier (`panier.css`) et
     l'ajout au panier de la fiche (`product.css`). Partagé pour la même raison
     que le rayon des bandes : c'est une même action, elle garde une même forme
     d'un écran à l'autre. */
  --ub-rayon-bouton: 999px;
}

@media (min-width: 768px) {
  :root {
    --ub-gouttiere-page: 3.5rem;
  }
}

body {
  color: var(--ub-encre);
  font-family: var(--ub-sans);
}

/* Fond de page blanc jusqu'aux bords de la fenêtre.
   Kadence pose `body{background:var(--global-palette8)}` (#F7FAFC) dans son CSS
   inline, enfilé APRÈS les feuilles du thème enfant : un simple `body` de même
   spécificité perdrait l'arbitrage. La classe enfant, toujours présente sur le
   body, suffit à reprendre la main sans `!important`.
   Le contenu reste borné à --global-content-width ; seules les bandes latérales
   passent du gris au blanc (demande du client du 2026-08-02). */
body.wp-child-theme-ubayd-clothing {
  background: #fff;
}

/* Titres de section : capitales très espacées, comme la maquette validée. */
.ub-section-titre {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--ub-titre-espace);
  text-transform: uppercase;
}

/* La calligraphie arabe est le seul accent coloré de l'interface. */
.ub-calligraphie {
  color: var(--ub-terra);
  direction: rtl;
  font-size: 1.4rem;
  line-height: 1.6;
}

/* Respecte le réglage système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}