/**
 * Refonte fiche produit (maquettes Figma) — §6 Options / attributs.
 * (Les espacements internes du bloc d'achat sont dans redesign-tokens.css,
 * avec le lot 1.)
 * Scope strict : #product uniquement.
 *
 * - Desktop (>= 1000px, variantes toujours dépliées) : chaque groupe
 *   d'attributs est un conteneur gris arrondi (en-tête + choix).
 *   Mobile : même conteneur gris autour de l'accordéon variants-collapse.css
 *   (comportement replier / déplier inchangé).
 * - Pastilles (toutes tailles) : rayon 12, fond blanc, grille de 2 colonnes,
 *   écart de prix « (+ 12,00 €) » injecté par variant-price-deltas.js et calé
 *   à droite.
 *
 * Les sélecteurs reprennent ceux de variants-collapse.css (2 ids + états
 * data-*) pour passer devant à spécificité égale (feuille chargée après).
 */

/* ---------- Groupes d'attributs (desktop) ---------- */

@media (min-width: 1000px) {
  #product .attribute_fieldset.vc-acc,
  #product .attribute_fieldset.vc-acc:last-child {
    margin-bottom: 16px;
    padding: 0;
    border-radius: 12px;
    background: var(--prozon-second-grey-color);
  }

  #product .attribute_fieldset.vc-acc:last-child {
    margin-bottom: 0;
  }

  #product #attributes[data-js] .attribute_fieldset.vc-acc .vc-acc-header {
    padding: 12px;
    background: transparent;
    border-radius: 12px;
  }

  #product #attributes[data-js] .attribute_fieldset.vc-acc .vc-acc-label {
    color: var(--prozon-black-color);
    font-family: var(--prozon-font-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
  }

  /* Zone des choix : padding 12, l'espace sous l'en-tête vient de ces paddings */
  #product #attributes[data-js]:not([data-vc-ready]) .attribute_fieldset.vc-acc .attribute_list,
  #product #attributes[data-js][data-vc-ready] .attribute_fieldset.vc-acc:not([data-vc-collapsible="1"]):not(.vc-acc-collapsed) .attribute_list,
  #product #attributes[data-js][data-vc-ready] .attribute_fieldset.vc-acc[data-vc-collapsible="1"]:not(.vc-acc-collapsed) .attribute_list {
    margin-top: 0;
  }

  #product #attributes .attribute_list > ul {
    gap: 8px;
    padding: 12px;
  }

  #product #attributes .attribute_list > select {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
  }
}

/* ---------- Groupes d'attributs (mobile) ----------
   Même conteneur gris que le desktop, autour de l'en-tête de l'accordéon et
   des pastilles. Le padding des choix n'est appliqué que groupe déplié : la
   zone repliée (grid 0fr) ne peut pas descendre sous le padding de son contenu. */

@media (max-width: 999px) {
  #product .attribute_fieldset.vc-acc,
  #product #attributes[data-vc-accordion-mode="1"] .attribute_fieldset.vc-acc {
    margin-bottom: 8px;
    padding: 0;
    border-radius: 12px;
    background: var(--prozon-second-grey-color);
  }

  #product .attribute_fieldset.vc-acc:last-child,
  #product #attributes[data-vc-accordion-mode="1"] .attribute_fieldset.vc-acc:last-child {
    margin-bottom: 0;
  }

  #product #attributes[data-js] .attribute_fieldset.vc-acc .vc-acc-header {
    padding: 12px;
    background: transparent;
  }

  #product #attributes[data-js] .attribute_fieldset.vc-acc:not(.vc-acc-collapsed) .attribute_list > ul {
    gap: 8px;
    padding: 0 12px 12px;
  }

  #product #attributes[data-js] .attribute_fieldset.vc-acc:not(.vc-acc-collapsed) .attribute_list > select {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
  }
}

/* ---------- Pastilles (toutes tailles) ---------- */

#product .attribute_list li label {
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  color: #444;
  font-family: var(--prozon-font-text);
  font-size: 14px;
  font-weight: 700;
}

/* États survol / sélection repris de product.css (le fond blanc ci-dessus est plus spécifique) */
#product .attribute_list li:not(.disabled):hover label,
#product .attribute_list li.checked:not(.disabled) label {
  background: var(--prozon-accent-color);
  color: var(--prozon-black-color);
}

/* Pastilles en grille de 2 colonnes de largeur égale (1 seule en petit
   mobile), libellé à gauche et écart de prix calé à droite : la taille et la
   place des pastilles ne dépendent plus de l'écart affiché, rien ne bouge
   quand la sélection change. */
#product #attributes .attribute_list > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 599px) {
  #product #attributes .attribute_list > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pastilles d'une même rangée à hauteur égale quand un libellé long passe sur 2 lignes */
#product #attributes .attribute_list > ul > li {
  display: flex;
}

#product #attributes .attribute_list li label {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
}

/* Écart de prix par rapport au choix actuel */
#product .attribute_list .attribute-price-delta {
  flex-shrink: 0;
  color: #777;
  font-size: var(--font-size-xxs);
  font-weight: 400;
  white-space: nowrap;
}

#product .attribute_list li.checked .attribute-price-delta {
  color: #555;
}

/* ---------- « Voir plus d'options » (desktop, variant-options-more.js) ----------
   Groupe de plus de 2 rangées : 2 rangées affichées, puis un bouton texte
   centré (maquette Figma 59:1289) sous les choix, dans le conteneur gris.
   Déplié, le conteneur s'agrandit : pas de hauteur max ni de scroll interne
   (variants-collapse.css plafonne la liste à 360px). */

#product #attributes .vpo-toggle {
  display: none;
}

@media (min-width: 1000px) {
  #product #attributes[data-js][data-vc-ready] .attribute_fieldset.vc-acc[data-vpo]:not(.vc-acc-collapsed) .attribute_list > ul {
    max-height: none;
    overflow-y: hidden;
  }

  #product #attributes .attribute_list > ul > li.vpo-hidden {
    display: none;
  }

  #product #attributes .vpo-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xxs);
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--prozon-black-color);
    font-family: var(--prozon-font-title);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
  }

  #product #attributes .vpo-toggle:hover .vpo-toggle-text {
    text-decoration: underline;
  }

  #product #attributes .vpo-toggle:focus {
    outline: none;
  }

  #product #attributes .vpo-toggle:focus-visible {
    outline: 2px solid var(--prozon-black-color);
    outline-offset: -2px;
  }

  #product #attributes .vpo-toggle svg {
    flex-shrink: 0;
    width: 16px;
    height: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
  }

  #product #attributes .vpo-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #product #attributes .vpo-toggle svg {
    transition: none;
  }
}