/* gwgammes — « Choisis ton modèle » (fiche) + « Existe en N modèles » (listes). Boutique GrowLED. */
.gwg{container-type:inline-size;box-sizing:border-box;margin:14px 0 12px;padding:14px 14px 12px;border-radius:16px;
  background:#2b0b3f;color:#fff;border:1px solid #4a1767;font-family:'Poppins','Inter',Arial,sans-serif}
.gwg *,.gwg *::before,.gwg *::after{box-sizing:border-box}
.gwg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 2px 10px}
.gwg-title{margin:0;padding:0;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c8b3da;line-height:1.3}
.gwg-gamme{margin:0;font-size:11.5px;color:#9d8cc0;line-height:1.3}
.gwg-serie-t{margin:10px 2px 6px;font-size:11.5px;font-weight:600;color:#c8b3da}
.gwg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px;padding:0;list-style:none}
.gwg-tab{min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid #5c2a7c;background:#3d1557;color:#fff;
  font-weight:600;font-size:13px;line-height:1.2;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.gwg-tab:hover{border-color:#8fd16a}
.gwg-tab[aria-selected="true"]{background:#fff;color:#2b0b3f;border-color:#5aa832}
/* Focus clavier : le thème pose a:focus{outline:0!important} ; même arme ici, vert clair sur le violet du bloc. */
.gwg .gwg-tab:focus-visible,.gwg .gwg-grid a.gwg-case:focus-visible{outline:3px solid #8fd16a!important;outline-offset:2px!important}
.gwg.is-tabbed .gwg-serie-t{display:none}
.gwg.is-tabbed .gwg-serie:not(.is-open){display:none}
.gwg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.gwg-li{margin:0;padding:0;min-width:0}
/* Cases. Les sélecteurs sont volontairement longs : la couleur de lien du thème (gris sur violet) ne doit jamais
   fuir dans les libellés. Pas de césure au milieu des mots, les unités restent collées à leur nombre (espaces
   insécables posés côté serveur). */
.gwg .gwg-grid .gwg-case{display:flex;flex-direction:column;gap:1px;position:relative;height:100%;min-height:44px;padding:8px 10px;border-radius:12px;
  background:#3d1557;border:2px solid #5c2a7c;color:#fff;text-decoration:none;line-height:1.3;
  hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal;
  transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.gwg .gwg-grid a.gwg-case:hover,.gwg .gwg-grid a.gwg-case:focus{border-color:#8fd16a;color:#fff;text-decoration:none}
.gwg .gwg-grid .gwg-case.is-current{background:#fff;color:#2b0b3f;border-color:#5aa832;cursor:default}
.gwg .gwg-grid .gwg-case span{display:block;text-decoration:none;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
.gwg .gwg-grid .gwg-case .gwg-l{font-weight:700;font-size:14.5px;color:#fff}
.gwg .gwg-grid .gwg-case .gwg-u{font-size:11.5px;font-weight:400;color:#dccdee;opacity:1}
.gwg .gwg-grid .gwg-case .gwg-p{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap;white-space:nowrap;font-weight:800;font-size:14.5px;margin-top:2px;color:#fff}
.gwg .gwg-grid .gwg-case .gwg-p:empty,.gwg .gwg-grid .gwg-case .gwg-d:empty{display:none}
.gwg .gwg-grid .gwg-case .gwg-p .gwg-pv{display:inline;white-space:nowrap;color:inherit}
.gwg .gwg-grid .gwg-case .gwg-p .gwg-pv.is-voir{font-size:12.5px;font-weight:600}
.gwg .gwg-grid .gwg-case .gwg-p .gwg-promo{display:inline;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;background:#8fd16a;color:#1c0630;line-height:1.4}
.gwg .gwg-grid .gwg-case .gwg-d{font-size:11px;font-weight:700;color:#8fd16a}
/* Étape 8 : usage et disponibilité en entier (« Sous 2 à 3 sem. », « Surface 100 × 100 cm ») — retour à la ligne, deux
   lignes au plus ; les cases d'une même rangée gardent la même hauteur (grille, height:100%). */
.gwg .gwg-grid .gwg-case .gwg-u,.gwg .gwg-grid .gwg-case .gwg-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;white-space:normal;text-overflow:clip}
.gwg .gwg-grid .gwg-case .gwg-d::before{content:"\25CF\00a0"}
.gwg .gwg-grid .gwg-case .gwg-d.is-delai{color:#f6cf7f}
.gwg .gwg-grid .gwg-case .gwg-d.is-ko{color:#ff9d9d}
.gwg .gwg-grid .gwg-case.is-current .gwg-l,.gwg .gwg-grid .gwg-case.is-current .gwg-p{color:#2b0b3f}
.gwg .gwg-grid .gwg-case.is-current .gwg-u{color:#5b4670}
.gwg .gwg-grid .gwg-case.is-current .gwg-p .gwg-promo{background:#2b0b3f;color:#fff}
.gwg .gwg-grid .gwg-case.is-current .gwg-d{color:#2f6a15}
.gwg .gwg-grid .gwg-case.is-current .gwg-d.is-delai{color:#7a4f00}
.gwg .gwg-grid .gwg-case.is-current .gwg-d.is-ko{color:#a02828}
.gwg .gwg-grid .gwg-case .gwg-here{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2f6a15;margin-top:2px}
/* Colonne étroite (fiche en 3 colonnes, tablette) : 2 cases par rangée, comme en mobile, plus compactes. */
@container (max-width:420px){.gwg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .gwg .gwg-grid .gwg-case{padding:6px 6px 6px 7px;gap:0;border-width:1.5px}
  .gwg .gwg-grid .gwg-case .gwg-u{font-size:10.5px;letter-spacing:-.005em}
  .gwg .gwg-grid .gwg-case .gwg-l{font-size:13.5px}
  .gwg .gwg-grid .gwg-case .gwg-p{font-size:13.5px;margin-top:1px}}
@media (max-width:768px){.gwg{padding:12px 10px 10px}.gwg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.gwg .gwg-grid .gwg-case{transition:none}}

/* Mention dans les vignettes de liste. */
.gwg-badge{margin:2px 0 0;padding:0;font-size:11.5px;font-weight:600;line-height:1.3;color:#7E1E57}
.gwg-badge::before{content:"";display:inline-block;width:14px;height:6px;margin-right:6px;border-radius:2px;vertical-align:middle;
  background:linear-gradient(100deg,#7BBF3F,#7E1E57)}

/* Fiche d'un pack (gabarit pm_advancedpack) : le bloc est frère du formulaire d'achat, dont la carte prix est décalée
   de 15 px à gauche (écran large) et dépasse d'1 px de chaque côté de l'écran en mobile. On s'aligne sur la carte
   sans dépasser (le bloc de la fiche classique, lui, est déjà dans la colonne d'achat). */
form.ap5-buy-block ~ section.gwg{margin-left:15px;margin-right:1px;max-width:calc(100% - 16px)}
@media (max-width:767px){form.ap5-buy-block ~ section.gwg{margin-left:1px;margin-right:1px;max-width:calc(100% - 2px)}}

/* ───────── Étape 3 : la marque sur la fiche ─────────
   Bouton « Tous les produits [marque] (N) » + repli « Quel modèle pour ma box ? » (zone fiche), « Aussi chez [marque] »
   (bas de fiche). Sélecteurs longs : les couleurs de lien du thème ne doivent pas fuir. */
.gwm{box-sizing:border-box;margin:0 0 12px;font-family:'Poppins','Inter',Arial,sans-serif}
.gwm *,.gwm *::before,.gwm *::after{box-sizing:border-box}
.gwm .gwm-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 16px;border-radius:12px;
  background:#fff;border:2px solid #5c2a7c;color:#2b0b3f;text-decoration:none;font-weight:700;font-size:14px;line-height:1.3;
  transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.gwm .gwm-btn:hover,.gwm .gwm-btn:focus{border-color:#5aa832;background:#f6fbf1;color:#2b0b3f;text-decoration:none}
/* Focus clavier (fond clair) : violet foncé, contraste 13:1 sur blanc ; !important contre a:focus{outline:0!important}. */
.gwm .gwm-btn:focus-visible,.gwm .gwm-guide .gwm-guide-s:focus-visible,.gwm .gwm-gl a.gwm-gl-row:focus-visible,
.gwm .gwm-guide a.gwm-gl-full:focus-visible{outline:3px solid #2b0b3f!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(143,209,106,.45)!important}
.gwm .gwm-btn .gwm-btn-t{color:#2b0b3f}
.gwm .gwm-btn .gwm-btn-t b{font-weight:600;color:#6b5a7e}
.gwm .gwm-btn .gwm-btn-go{flex:none;font-size:18px;line-height:1;color:#5aa832}
.gwm .gwm-guide{margin-top:8px;border-radius:12px;background:#f9f3fd;border:1px solid #e2d3ef;color:#2b0b3f}
.gwm .gwm-guide-s{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:10px 14px;cursor:pointer;
  list-style:none;font-weight:700;font-size:13.5px;line-height:1.3;color:#2b0b3f}
.gwm .gwm-guide-s::-webkit-details-marker{display:none}
.gwm .gwm-chev{flex:none;width:9px;height:9px;border-right:2px solid #5aa832;border-bottom:2px solid #5aa832;transform:rotate(45deg);margin:-3px 3px 0 0;transition:transform .15s}
.gwm .gwm-guide[open] .gwm-chev{transform:rotate(-135deg);margin-top:3px}
.gwm .gwm-gl{margin:0;padding:0 8px 4px;list-style:none}
.gwm .gwm-gl-li{margin:0;padding:0;border-top:1px solid #e8dcf2}
.gwm .gwm-gl-li:first-child{border-top:0}
.gwm .gwm-gl .gwm-gl-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding:9px 6px;min-height:44px;border-radius:8px;
  color:#2b0b3f;text-decoration:none;line-height:1.3}
.gwm .gwm-gl a.gwm-gl-row:hover,.gwm .gwm-gl a.gwm-gl-row:focus{background:#fff;color:#2b0b3f;text-decoration:none}
.gwm .gwm-gl-surf{display:flex;flex-direction:column;min-width:0}
.gwm .gwm-gl .gwm-gl-surf b{font-weight:700;font-size:13px;color:#2b0b3f}
.gwm .gwm-gl .gwm-gl-surf span{font-size:11.5px;color:#6b5a7e}
.gwm .gwm-gl .gwm-gl-name{font-size:12.5px;font-weight:600;color:#41780F;text-align:right}
.gwm .gwm-gl-li.is-current .gwm-gl-row{background:#fff;box-shadow:inset 3px 0 0 #5aa832}
.gwm .gwm-gl .gwm-gl-li.is-current .gwm-gl-name{color:#2b0b3f}
.gwm .gwm-gl .gwm-gl-li.is-current .gwm-gl-name::after{content:" · ce modèle";font-weight:700;color:#2f6a15}
.gwm .gwm-guide a.gwm-gl-full{display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:10px 14px;font-weight:700;font-size:12.5px;color:#41780F;text-decoration:none}
.gwm .gwm-gl-full:hover,.gwm .gwm-gl-full:focus{color:#2b0b3f;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.gwm .gwm-btn,.gwm .gwm-chev{transition:none}}
/* Fiche d'un pack : même alignement que le bloc « Choisis ton modèle » (voir plus haut). */
form.ap5-buy-block ~ .gwm{margin-left:15px;margin-right:1px;max-width:calc(100% - 16px)}
@media (max-width:767px){form.ap5-buy-block ~ .gwm{margin-left:1px;margin-right:1px;max-width:calc(100% - 2px)}}

/* « Aussi chez [marque] » : les .pcard / .related-grid viennent du thème ; on ajoute la disponibilité et le lien « Voir tout ». */
.gwa .pcard-b .gwa-dispo{display:block;margin:2px 0 6px;font-size:11.5px;font-weight:700;color:#2f6a15;line-height:1.3}
.gwa .pcard-b .gwa-dispo:empty{display:none}
.gwa .pcard-b .gwa-dispo::before{content:"\25CF\00a0"}
.gwa .pcard-b .gwa-dispo.is-delai{color:#7a4f00}
.gwa .pcard-b .gwa-dispo.is-ko{color:#a02828}
.gwa .gwa-all{margin:22px 0 0;text-align:center}
.gwa .gwa-all a.gwa-all-a,#product .gwa .gwa-all a{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;border:2px solid #5c2a7c;
  background:#fff;color:#2b0b3f;font-weight:700;font-size:14px;text-decoration:none}
.gwa .gwa-all a.gwa-all-a:hover,#product .gwa .gwa-all a:hover,#product .gwa .gwa-all a:focus{border-color:#5aa832;background:#f6fbf1;color:#2b0b3f;text-decoration:none}
#product .gwa .gwa-all a:focus-visible,#product .gwa .gwa-card a:focus-visible{outline:3px solid #2b0b3f!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(143,209,106,.45)!important}

/* Étape 6 — « Aussi chez [marque] » : ordinateur = multiple de 4 cartes (les surnuméraires sont marquées .gwa-x par le gabarit et
   par gwgammes.js) ; mobile (<= 768 px) = une rangée à faire défiler, cartes d'environ 70 % de la largeur, image réduite. */
@media (min-width:769px){.gwa .related-grid .gwa-card.gwa-x{display:none}}
@media (max-width:768px){
  .gwa .related-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 -15px;padding:2px 15px 12px;scroll-padding:0 15px}
  .gwa .related-grid .gwa-card{flex:0 0 76%;max-width:300px;min-width:0;scroll-snap-align:start}
  .gwa .related-grid .gwa-card .pcard-media{padding:8px;aspect-ratio:auto;height:150px}
  .gwa .related-grid .gwa-card .pcard-media img{height:100%;width:100%;aspect-ratio:auto;object-fit:contain}
  .gwa .related-grid .gwa-card .pcard-name{font-size:14px}
}