/* ═══════════════════════════════════════════════════════════════════════════
   Fiche produit variable : taille en rupture et alerte retour en stock
   Voir inc/stock-notice.php et assets/js/uc-stock-notice.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.uc-stock-notice,
#commercekit-waitlist-popup {
  --uc-sn-ink: #0A0A0B;
  --uc-sn-muted: #63676F;
  --uc-sn-line: #D9DCE2;
  --uc-sn-soft: #F4F5F7;
  --uc-sn-alert: #B42318;        /* rupture : rouge sombre, contraste AA sur fond clair */
  --uc-sn-alert-soft: #FEF3F2;
  --uc-sn-brand: #6699FF;        /* bouton « Ajouter au panier » du thème */
  --uc-sn-brand-hover: #5089FB;
  --uc-sn-focus: #1D4FD8;
}

/* ── Pastille en rupture : visible et barrée, toujours touchable ───────── */

/* Variation Swatches la grise (opacity .4, curseur par défaut) comme une
   combinaison qui n'existe pas : on la garde lisible, barrée, et cliquable
   (le clic est pris par uc-stock-notice.js). Sélecteur aussi précis que le sien. */
.woocommerce.single-product .cart.variations_form .tawcvs-swatches .swatch.uc-is-oos {
  opacity: 1;
  cursor: pointer;
  color: var(--uc-sn-muted, #63676F);
}
.woocommerce.single-product .cart.variations_form .tawcvs-swatches .swatch.uc-is-oos .text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* Diagonale sur toute la pastille (son contour est le ::before du thème). */
.woocommerce.single-product .cart.variations_form .tawcvs-swatches .swatch.uc-is-oos::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  background: linear-gradient(to top right, transparent calc(50% - .5px), #B9BDC4 calc(50% - .5px), #B9BDC4 calc(50% + .5px), transparent calc(50% + .5px));
  pointer-events: none;
}
/* Pastille en rupture touchée : même contour que la pastille choisie du thème
   (style.css), survol compris. */
.woocommerce div.product table.variations div.tawcvs-swatches .swatch-item-wrapper .swatch.uc-is-current::before,
.woocommerce div.product table.variations div.tawcvs-swatches .swatch-item-wrapper .swatch.swatch-label.uc-is-current:hover::before {
  border-color: #674399;
}

/* ── Message sous les tailles ──────────────────────────────────────────── */

/* Toujours dans la page (zone aria-live), vide et sans hauteur au repos. */
.uc-stock-notice {
  clear: both;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--uc-sn-ink);
}
.uc-stock-notice:not(.is-visible) {
  margin: 0;
  padding: 0;
}
.uc-stock-notice.is-visible {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid #F5C2BC;
  border-radius: 8px;
  background: var(--uc-sn-alert-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .uc-stock-notice.is-visible { animation: uc-sn-in .2s ease-out; }
}
@keyframes uc-sn-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.uc-stock-notice__msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
}
.uc-stock-notice__msg:empty { display: none; }
.uc-stock-notice__msg::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: var(--uc-sn-alert);
  /* Rond barré (« indisponible ») */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.uc-stock-notice__msg strong { font-weight: 600; }
/* Une ligne par valeur écartée (lien vers une taille et une couleur en rupture). */
.uc-stock-notice__line { display: block; }

/* Alerte CommerceKit : bouton secondaire, sous le message. */
.uc-stock-notice__alert[hidden] { display: none; }
.uc-stock-notice__alert { margin-top: 10px; }
.uc-stock-notice .uc-stock-notice__alert-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--uc-sn-ink);
  border-radius: 4px;
  background: #fff;
  color: var(--uc-sn-ink);
  font: 600 .9375rem/1.25 "IBM Plex Sans", sans-serif;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.uc-stock-notice .uc-stock-notice__alert-button::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  /* Cloche */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
}
.uc-stock-notice .uc-stock-notice__alert-button:hover {
  background: var(--uc-sn-ink);
  color: #fff;
}
.uc-stock-notice .uc-stock-notice__alert-button:focus-visible,
.uc-stock-notice:focus-visible {
  outline: 3px solid var(--uc-sn-focus);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .uc-stock-notice .uc-stock-notice__alert-button { width: 100%; justify-content: center; }
}

/* ── Fiche simple en rupture (préparé, chargé seulement si le filtre
      uc_stock_notice_simple_style est activé, voir inc/stock-notice.php) ── */

/* Bouton de CommerceKit (#cgkit-waitlist-trigger, hors formulaire de variation) :
   même bouton secondaire à cloche que sous le message des fiches variables, au
   lieu du gros bouton sombre de CommerceKit. Shoptimizer et CommerceKit stylent
   les boutons de .summary : sélecteur précis. */
.single-product div.product .summary button#cgkit-waitlist-trigger.cgkit-waitlist-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  min-height: 48px;
  margin: 4px 0 18px;
  padding: 10px 18px;
  border: 1px solid #0A0A0B;
  border-radius: 4px;
  background: #fff;
  color: #0A0A0B;
  font: 600 1rem/1.25 "IBM Plex Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.single-product div.product .summary button#cgkit-waitlist-trigger.cgkit-waitlist-trigger::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
}
.single-product div.product .summary button#cgkit-waitlist-trigger.cgkit-waitlist-trigger:hover {
  background: #0A0A0B;
  color: #fff;
}
.single-product div.product .summary button#cgkit-waitlist-trigger.cgkit-waitlist-trigger:focus-visible {
  outline: 3px solid #1D4FD8;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .single-product div.product .summary button#cgkit-waitlist-trigger.cgkit-waitlist-trigger { width: 100%; }
}

/* ── Bouton et éléments CommerceKit pendant une rupture ────────────────── */

/* CommerceKit remplace le bouton du formulaire par son « Get notified »
   (styles en ligne display:none / block, d'où !important) : la décision PO
   est un bouton « Rupture de stock » désactivé, l'alerte étant sous le message. */
form.variations_form.uc-stock-notice-ready #cgkit-waitlist-button,
form.variations_form.uc-stock-notice-ready #cgkit-waitlist-trigger,
form.variations_form.uc-stock-notice-ready label .ckwtl-os-label {
  display: none !important;
}
form.variations_form.uc-stock-notice-ready .single_add_to_cart_button[style*="none"] {
  display: block !important;
}
.single-product div.product form.cart .single_add_to_cart_button.uc-is-oos,
.uc-satc .uc-satc__button.uc-is-oos {
  background-color: #C9CCD2;
  color: var(--uc-sn-ink, #0A0A0B);
  cursor: not-allowed;
}

/* ── Formulaire Waitlist de CommerceKit (<dialog>), au style du site ───── */

/* CommerceKit recrée ce <dialog> à chaque changement de variation : on le
   cible par son id (ce fichier n'est chargé que sur les fiches variables).
   « body » : passer devant waitlist.css de CommerceKit quel que soit l'ordre. */

body #commercekit-waitlist-popup {
  width: min(100% - 2rem, 30rem);
  max-height: min(100dvh - 2rem, 40rem);
  margin: auto;
  border-radius: 16px;
  color: var(--uc-sn-ink);
  font-family: "IBM Plex Sans", sans-serif;
  box-shadow: 0 24px 60px -20px rgba(10, 10, 11, .45);
  overflow: auto;
  overscroll-behavior: contain;
}
body #commercekit-waitlist-popup::backdrop { background: rgba(10, 10, 11, .55); }
body #commercekit-waitlist-popup[open] { display: block; }
body #commercekit-waitlist-popup *,
body #commercekit-waitlist-popup *::before,
body #commercekit-waitlist-popup *::after { box-sizing: border-box; }
body #commercekit-waitlist-popup :focus-visible {
  outline: 3px solid var(--uc-sn-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  body #commercekit-waitlist-popup[open] { animation: uc-sn-pop .22s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes uc-sn-pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* Mobile : panneau en bas d'écran, comme la modale de taille. */
@media (max-width: 770px) {
  body #commercekit-waitlist-popup {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }
}

body #commercekit-waitlist-popup #commercekit-waitlist-wrap {
  position: relative;
  width: auto;
  max-width: 100%;
}
body #commercekit-waitlist-popup .commercekit-waitlist-head {
  gap: .9rem;
  padding: 1.25rem 3.5rem 1rem 1.25rem;
  border-bottom: 1px solid var(--uc-sn-line);
  background: #fff;
}
body #commercekit-waitlist-popup .commercekit-waitlist-head .cgkit-product-image img {
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
  object-fit: contain;
  border-radius: 10px;
  background: var(--uc-sn-soft);
}
body #commercekit-waitlist-popup .commercekit-waitlist-head .cgkit-product-info { padding: 0; min-width: 0; }
body #commercekit-waitlist-popup .cgkit-product-name {
  margin: 0 0 2px;
  color: var(--uc-sn-ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}
body #commercekit-waitlist-popup .cgkit-product-price { margin: 0; font-size: .875rem; }
body #commercekit-waitlist-popup #commercekit-waitlist-close {
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
body #commercekit-waitlist-popup #commercekit-waitlist-close:hover { opacity: 1; background: var(--uc-sn-soft); }
body #commercekit-waitlist-popup #commercekit-waitlist-close svg { color: var(--uc-sn-ink); }

body #commercekit-waitlist-popup .commercekit-waitlist {
  margin: 0;
  padding: 1.1rem 1.25rem 1.35rem;
  border: 0;
  box-shadow: none;
}
body #commercekit-waitlist-popup #commercekit-waitlist-wrap .commercekit-waitlist p {
  margin: 0 0 1rem;
  color: var(--uc-sn-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
/* Libellé du champ visible (CommerceKit le réserve aux lecteurs d'écran). */
body #commercekit-waitlist-popup .commercekit-waitlist label[for="ckwtl-email"] {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 .35rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  visibility: visible; /* .screen-reader-text de Shoptimizer */
  white-space: normal;
  display: block;
  font-size: .875rem;
  font-weight: 600;
}
body #commercekit-waitlist-popup .commercekit-waitlist #ckwtl-email {
  width: 100%;
  min-height: 48px;
  margin: 0 0 1rem;
  padding: 10px 12px;
  border: 1px solid #B9BDC4;
  border-radius: 6px;
  background: #fff;
  color: var(--uc-sn-ink);
  font: 400 1rem/1.4 "IBM Plex Sans", sans-serif; /* 16 px : pas de zoom automatique sur iOS */
}
body #commercekit-waitlist-popup .commercekit-waitlist #ckwtl-email.error { border-color: var(--uc-sn-alert); }
body #commercekit-waitlist-popup .ckwtl-consent-wrap { gap: 10px; margin: 0 0 1rem; }
body #commercekit-waitlist-popup .ckwtl-consent-wrap input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--uc-sn-ink);
}
body #commercekit-waitlist-popup .ckwtl-consent-wrap label {
  color: var(--uc-sn-muted);
  font-size: .875rem;
  line-height: 1.4;
}
body #commercekit-waitlist-popup .ckwtl-consent-wrap.error label { color: var(--uc-sn-alert); }
body #commercekit-waitlist-popup .commercekit-waitlist #cgkit-waitlist-submit {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 1rem;
  border: 0;
  border-radius: 4px;
  background: var(--uc-sn-brand);
  color: #fff;
  font: 600 1.0625rem/1.2 "IBM Plex Sans", sans-serif;
}
body #commercekit-waitlist-popup .commercekit-waitlist #cgkit-waitlist-submit:not(:disabled):hover { background: var(--uc-sn-brand-hover); }
body #commercekit-waitlist-popup .commercekit-waitlist #cgkit-waitlist-submit:disabled { opacity: .55; }
body #commercekit-waitlist-popup .commercekit-waitlist p.success,
body #commercekit-waitlist-popup .commercekit-waitlist p.error {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}
body #commercekit-waitlist-popup .commercekit-waitlist p.error { color: var(--uc-sn-alert); }