/* ==========================================================================
   VOG PREORDER — signalétique « Précommande » (front)

   Module partagé boutiques 1 (vogimport) et 2 (vogprotect) : on reprend les
   tokens de chaque thème plutôt que d'imposer une couleur.
     vogprotect → --vog-navy #1e2d52 · --vog-blue-soft #e8f1fb
     vogimport  → --vog-navy absent → repli --vog-dark #1a1a1a
   Le badge est donc « marine » sur Vog Protect et « noir » sur Vog Import,
   c'est-à-dire la couleur de titre de chaque site.

   ⚠️ Deux contraintes imposées par le thème parent Hummingbird :
   1. `.product-flags .badge:not(.discount){background-color:…!important;
      color:#fff!important}` → nos couleurs DOIVENT être en !important.
   2. `.product-flags{width:100%}` cumulé au `left:10px; right:10px` des thèmes
      VOG = boîte sur-contrainte : `right` est ignoré, la liste dépasse de 10px
      et le badge se fait couper par l'`overflow:hidden` de la carte.
      → on rétablit `width:auto` (en !important : vogimport.css / vogprotect.css
      sont chargés APRÈS le CSS des modules).
   ========================================================================== */

:root {
  --vog-preorder-fg: var(--vog-navy, var(--vog-dark, #1e2d52));
  --vog-preorder-badge-bg: var(--vog-navy, var(--vog-dark, #1e2d52));
  --vog-preorder-badge-fg: #fff;
  --vog-preorder-soft: var(--vog-blue-soft, #f1f3f7);
  --vog-preorder-card-bg: #fff;
  --vog-preorder-card-border: #e6e9ef;
  --vog-preorder-text: #5b6478;
}

/* --- Badge (miniature, panier, panneau vogcart) --------------------------
   ⚠️ La règle Hummingbird `.product-flags .badge:not(.discount)` pèse (0,3,0)
   ET porte !important, et theme.css/vogprotect.css sont chargés APRÈS le CSS
   des modules : à spécificité égale elle gagnerait. On double donc la classe
   (`.vogpreorder.vogpreorder` = (0,4,0)) pour repasser devant.
   ----------------------------------------------------------------------- */
.vogpreorder-badge,
.product-flags .badge.vogpreorder.vogpreorder {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background-color: var(--vog-preorder-badge-bg) !important;
  color: var(--vog-preorder-badge-fg) !important;
  border: 0 !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Miniature produit (listing, recherche, home « Dernières nouveautés »)
   Le flag est ajouté par le hook actionProductFlagsModifier et rendu par
   catalog/_partials/product-flags.tpl. margin-left:auto le pousse à DROITE,
   en face de la pastille catégorie qui occupe le coin gauche.
   ----------------------------------------------------------------------- */
.product-miniature .product-flags {
  width: auto !important;          /* cf. bug 2 ci-dessus */
  box-sizing: border-box;
  padding-right: 0 !important;     /* Hummingbird pose 4rem à droite */
}

.product-flags .badge.vogpreorder.vogpreorder {
  margin-left: auto;               /* pousse le cartouche à DROITE de la vignette */
  max-width: 100%;
  top: 0;                          /* annule le .badge{position:relative;top:-1px} de Bootstrap */
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}

/* Ligne « En stock » de la miniature : remplacée par « Précommande »
   (classe posée par vogpreorder.js — le template du thème n'a pas de hook). */
.product-miniature__stock--vogpreorder {
  color: var(--vog-preorder-fg) !important;
  font-weight: 600;
}

/* --- Fiche produit ------------------------------------------------------
   Reprend le gabarit des tuiles d'information du site (carte blanche, coins
   12px, filet clair, pictogramme dans un carré teinté).
   ----------------------------------------------------------------------- */
.vogpreorder-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--vog-preorder-card-bg);
  border: 1px solid var(--vog-preorder-card-border);
  border-radius: 12px;
}

.vogpreorder-box__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--vog-preorder-soft);
  color: var(--vog-preorder-fg);
}

.vogpreorder-box__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.vogpreorder-box__body {
  min-width: 0;
}

.vogpreorder-box__body .vogpreorder-badge {
  margin-bottom: 7px;
}

.vogpreorder-box__text {
  margin: 0;
  color: var(--vog-preorder-text);
  font-size: 13px;
  line-height: 1.5;
}

.vogpreorder-box__text strong {
  color: var(--vog-preorder-fg);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Page panier / panneau vogcart -------------------------------------- */
.vogpreorder-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

.vogpreorder-line__text {
  color: var(--vog-preorder-text);
  font-size: 12px;
  font-weight: 500;
}

.vogcart-product .vogpreorder-line {
  margin: 3px 0 4px;
}

.vogcart-product .vogpreorder-badge {
  font-size: 9px;
  padding: 4px 8px;
}

.vogcart-product .vogpreorder-line__text {
  font-size: 11px;
}