.woocommerce-breadcrumb{margin:20px 0 14px;color:#686860;font-size:12px;line-height:1.45;white-space:nowrap;overflow-x:auto;scrollbar-width:none}.woocommerce-breadcrumb a{text-decoration:underline;text-underline-offset:5px}
.gbs-product{padding-bottom:110px}.gbs-product-hero,.gbs-aplus-story,.gbs-merch,.gbs-public-content,.woocommerce-Reviews{position:relative;z-index:0;clear:both;isolation:isolate}.gbs-product-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:clamp(38px,4vw,76px);align-items:start}
.gbs-gallery{position:sticky;top:104px;min-width:0}.gbs-gallery-main{position:relative;width:100%;height:min(590px,62vw);min-height:490px;padding:0;border:0;border-radius:22px;background:linear-gradient(145deg,#ebe5da,#d8dfd0);box-shadow:inset 0 0 0 1px rgba(23,23,19,.05);display:grid;place-items:center;overflow:hidden;cursor:zoom-in}.gbs-gallery-main:after{content:"";position:absolute;inset-inline:16%;bottom:8%;height:9%;border-radius:50%;background:rgba(23,23,19,.14);filter:blur(20px)}.gbs-gallery-main>img{position:absolute;z-index:1;top:50%;left:50%;width:88%;height:91%!important;max-width:none;max-height:none;object-fit:contain;object-position:center;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 20px rgba(23,23,19,.2))}.gbs-gallery-badges{position:absolute;z-index:2;inset-block-start:17px;inset-inline-start:17px;max-width:calc(100% - 34px);display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}.gbs-gallery-badge,.gbs-saving-badge{padding:8px 12px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}.gbs-saving-badge{background:#8a6d2f}.gbs-gallery-zoom{position:absolute;z-index:2;inset-inline-end:16px;bottom:16px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.91);color:var(--ink);display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;backdrop-filter:blur(8px)}.gbs-gallery-zoom svg{width:15px;height:15px}
.gbs-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}.gbs-thumbs button{position:relative;min-width:0;aspect-ratio:1;padding:0;border:1px solid transparent;border-radius:12px;background:linear-gradient(145deg,#eee9df,#d9cfbf);display:grid;place-items:center;overflow:hidden;cursor:pointer}.gbs-thumbs button.is-active{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.gbs-thumbs img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)!important;max-width:none;max-height:none;object-fit:contain}.gbs-thumbs button[data-gallery-kind="editorial"],.gbs-thumbs button.is-editorial{background:#fff}.gbs-thumbs button[data-gallery-kind="editorial"]>img,.gbs-thumbs button.is-editorial>img{inset:0;width:100%;height:100%!important}.gbs-thumbs button.is-active[data-gallery-kind="editorial"]:after,.gbs-thumbs button.is-active.is-editorial:after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--green);pointer-events:none}
.gbs-product-summary{min-width:0;padding-top:3px}.gbs-product-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--green);font-size:12px;font-weight:800}.gbs-product-meta .gbs-brand{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#e9ddbf;color:var(--ink);font-size:12px;font-weight:850;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;text-decoration:none}.gbs-product-meta a{display:inline-flex;align-items:center;gap:5px;font-weight:800}
/* Pastille d'objectif de la fiche, calee sur `.objective-tag` de base.css pour le rayon et la
   bordure. La graisse suit en revanche la rangee qui l'accueille (800, comme les autres enfants
   de `.gbs-product-meta`), pas le 700 du tiroir panier. Elle est bordee et non pleine pour ne pas
   concurrencer la pastille de marque qui la precede. `padding:5px` + `border:1px` retombe sur la
   hauteur du `padding:6px` sans bordure de la marque, donc les deux pastilles s'alignent. */
.gbs-product-meta .gbs-objective{padding:5px 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--green-dark);font-size:12px;font-weight:800;line-height:1.4;text-decoration:none}
.gbs-product-meta .gbs-objective:hover,.gbs-product-meta .gbs-objective:focus-visible{border-color:var(--green);color:var(--green)}
/* Le correctif « sans marque NI objectif, la disponibilite devient le premier span et heriterait
   de la pastille beige » a disparu avec sa cause : la pastille se peint desormais sur la CLASSE
   `.gbs-brand`, jamais sur la position. Un selecteur de position se trompe des que le premier
   enfant change — c'etait deja arrive une fois. */
/* Etats du lien de marque. `var(--focus)` porte son repli : la valeur existe dans le `base.css`
   servi, mais une `var()` non resolue n'affaiblit pas `outline`, elle invalide toute la
   declaration — la piste de mise au point disparaitrait sans un mot. */
.gbs-product-meta a.gbs-brand:hover{background:#e0d0aa}
.gbs-product-meta a.gbs-brand:focus-visible{outline:3px solid var(--focus,var(--gold));outline-offset:2px}
.gbs-product-meta .is-stock:before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:7px;border-radius:50%;background:var(--green)}
.gbs-product-summary h1{margin:10px 0 9px;max-width:19ch;font-size:clamp(38px,3.7vw,52px);font-weight:800;line-height:.98;letter-spacing:-.055em;overflow-wrap:anywhere}.gbs-product.has-medium-title .gbs-product-summary h1{font-size:clamp(37px,3.7vw,52px)}.gbs-product.has-long-title .gbs-product-summary h1{font-size:clamp(33px,3.2vw,46px);line-height:1.03}
.gbs-product-lead{margin:14px 0;max-width:62ch;color:var(--muted);font-size:14px;line-height:1.55}.gbs-keypoints{list-style:none;padding:0;margin:0 0 13px;display:grid;grid-template-columns:1fr;gap:7px;color:#174536;font-size:12px;font-weight:650;line-height:1.35}.gbs-keypoints li{position:relative;min-width:0;padding-inline-start:24px}.gbs-keypoints li:before{content:"✦";position:absolute;inset-inline-start:0;top:-1px;color:#174536;font-size:15px;line-height:1.2}.gbs-product-price{margin:10px 0 9px;font-size:28px;font-weight:850;letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums}.gbs-product-price del{margin-inline-end:8px;color:#777;font-size:17px;font-weight:400}.gbs-product-price ins{text-decoration:none}
.gbs-variants{border:0;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gbs-variants legend,.gbs-quantity-offers>span{display:block;grid-column:1/-1;width:100%;margin-bottom:9px;font-weight:600}.gbs-variants a{min-height:76px;padding:13px;border:1px solid var(--line);border-radius:15px;display:flex;flex-direction:column;justify-content:center}.gbs-variants a.is-active{border:2px solid var(--green);background:#e3eee9}
/* `margin-bottom:14px` — la marge basse valait 0, et `.gbs-buy` porte `margin-top:0` : en flux
   bloc les marges fusionnent, donc le panneau TOUCHAIT la rangee d'achat (mesure du 2026-08-16 :
   0 px sur la fiche generique et sur l'A+, contre 18 px au-dessus du panneau). Seule la landing
   magnesium avait ses 14 px, par une regle scopee — et c'etait ELLE le port fidele : le prototype
   pose `.quantity-offers{margin:18px 0 14px}` (german-beautyshop-storefront.html:6640) et rien sur
   `.purchase-row`. La regle generique etait donc l'ecart ; l'aligner rapproche du template. */
.gbs-quantity-offers{display:block;margin:18px 0 14px;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--white)}.gbs-quantity-offers__title{display:block;margin:0 0 14px;font-size:15px;font-weight:700}.gbs-quantity-offer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.gbs-quantity-offer-grid button{position:relative;min-height:86px;padding:14px 10px;border:1px solid var(--line);border-radius:16px;background:var(--ivory);display:grid;align-content:start;gap:4px;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}.gbs-quantity-offer-grid button:hover{border-color:var(--green)}.gbs-quantity-offer-grid button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.gbs-quantity-offer__top{display:flex;justify-content:space-between;align-items:center;gap:6px}.gbs-quantity-offer__qty{color:var(--muted);font-size:12px;font-weight:650;line-height:1.3}.gbs-quantity-offer__radio{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--line);border-radius:50%}.gbs-quantity-offer__tag{position:absolute;inset-block-start:-9px;inset-inline-start:12px;padding:3px 9px;border-radius:999px;background:var(--green);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;line-height:1.5;text-transform:uppercase}.gbs-quantity-offer-grid button>strong{font-size:15px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}.gbs-quantity-offer__unit,.gbs-quantity-offer__off{color:var(--green);font-size:12px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}.gbs-quantity-offer-grid button.is-active,.gbs-quantity-offer-grid:not(:has(button.is-active)) button:first-child{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--green-soft)}.gbs-quantity-offer-grid button.is-active .gbs-quantity-offer__radio,.gbs-quantity-offer-grid:not(:has(button.is-active)) button:first-child .gbs-quantity-offer__radio{border-color:var(--green);box-shadow:inset 0 0 0 4px var(--green)}.gbs-quantity-saving{margin:12px 0 0;color:var(--green);font-size:13px;font-weight:750;line-height:1.35;font-variant-numeric:tabular-nums}.gbs-quantity-saving__ship{margin-inline-start:8px;padding:2px 9px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:12px;line-height:1.5;white-space:nowrap}.gbs-quantity-saving>[data-gbs-offer-for]{display:none}.gbs-quantity-offers:not(:has([data-gbs-offer].is-active)) .gbs-quantity-saving>[data-gbs-offer-for="1"]{display:inline}.gbs-quantity-offers:has([data-gbs-offer="1"].is-active) .gbs-quantity-saving>[data-gbs-offer-for="1"],.gbs-quantity-offers:has([data-gbs-offer="2"].is-active) .gbs-quantity-saving>[data-gbs-offer-for="2"],.gbs-quantity-offers:has([data-gbs-offer="3"].is-active) .gbs-quantity-saving>[data-gbs-offer-for="3"],.gbs-quantity-offers:has([data-gbs-offer="4"].is-active) .gbs-quantity-saving>[data-gbs-offer-for="4"]{display:inline}
/* Ligne d'achat : piste 1 = le stepper, piste 2 = le bouton panier.
   La piste du stepper se dimensionne sur SON CONTENU (`auto`), jamais sur une constante :
   ses trois cellules sont incompressibles (44 px chacune, cf. `.gbs-qty-step` et `.qty`
   plus bas) et `.quantity` porte `overflow:hidden` pour son `border-radius:999px` — une
   piste trop etroite n'y produit donc AUCUN debordement visible, elle AVALE le bouton `+`.
   C'est arrive : un `108px` pose sous 480px a rendu le `+` inatteignable au doigt sans
   qu'aucun symptome de layout n'apparaisse. `auto` ne peut pas descendre sous le
   `min-content` du stepper, ce qui rend le rognage structurellement impossible.
   `minmax(0,1fr)` (et non `1fr`, qui vaut `minmax(auto,1fr)`) autorise le bouton a se
   comprimer au lieu de pousser la grille hors de son conteneur sur un libelle long. */
.gbs-buy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;margin-top:0}.gbs-buy .quantity{min-height:56px;border:1px solid var(--line-strong);border-radius:999px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.gbs-buy .qty{width:44px;border:0;background:transparent;text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.gbs-buy .qty::-webkit-outer-spin-button,.gbs-buy .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gbs-qty-step{flex:0 0 auto;width:44px;align-self:stretch;border:0;background:transparent;color:var(--ink);font-size:19px;line-height:1;cursor:pointer}.gbs-qty-step:hover{color:var(--green)}.gbs-qty-step:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.gbs-buy .gbs-button{width:100%;min-height:56px;border:0;font-size:16px;font-weight:800;line-height:1.2}.gbs-reassurance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:9px;border:1px solid rgba(23,23,19,.13);border-radius:12px;overflow:hidden;background:rgba(23,23,19,.13)}.gbs-reassurance span{min-height:58px;padding:9px;display:flex;align-items:center;gap:7px;background:var(--ivory);color:var(--muted);font-size:12px}.gbs-reassurance b{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink);font-size:12px;font-weight:700;line-height:1.3}.gbs-reassurance b small{color:var(--muted);font-size:12px;font-weight:400;line-height:1.25}
.gbs-aplus-story{margin:76px auto 0;display:grid;grid-template-columns:1.08fr .92fr;min-height:460px;border-radius:32px;overflow:hidden;background:var(--deep);color:#fff}.gbs-aplus-story picture{min-height:100%}.gbs-aplus-story img{width:100%;height:100%!important;object-fit:cover}.gbs-aplus-story>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,74px)}.gbs-aplus-story .gbs-eyebrow{color:#e8d5a5}.gbs-story-title{margin:0;font-size:clamp(36px,3.6vw,54px);font-weight:700;line-height:1.04;letter-spacing:-.025em}
.gbs-merch{margin-top:72px;padding:clamp(26px,3.5vw,48px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,#f6f0e5,#e9eee4)}.gbs-merch header{display:block;margin-bottom:25px}.gbs-merch-title{max-width:720px;margin:0;font-size:clamp(30px,2.7vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.025em}
.gbs-merch--bundle .gbs-bundle-card{max-width:520px}.gbs-bundle-card{border:1px solid var(--line);border-radius:23px;background:#fff;overflow:hidden}.gbs-bundle-card>a{display:grid;height:100%;padding:17px}.gbs-bundle-card__visual{height:200px;border-radius:17px;background:radial-gradient(circle,#f6f1e7,#dfe7db);display:flex;align-items:center;justify-content:center;overflow:hidden}.gbs-bundle-card__visual img{width:32%;height:78%!important;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.12))}.gbs-bundle-card h3{margin:17px 0 7px;font-size:23px;line-height:1.1}.gbs-bundle-card p{margin:0;color:#686860;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.gbs-bundle-card__price{display:flex;align-items:baseline;gap:10px;margin-top:15px}.gbs-bundle-card__price strong{font-size:24px}
/* En-tête de merchandising : la puce est AU-DESSUS du titre, pas à l'opposé.
   `.gbs-merch header` était en `flex` + `space-between` — mesuré à 1440x900, ça jetait le titre
   à 707 px pendant que sa puce restait à 60 px, soit 425 px de vide sur la bande pack A+ et
   327 px sur les landings Magnésium / Regaine. Le prototype empile les deux dans la colonne
   gauche d'une grille, et il le fait pour les DEUX en-têtes de merchandising :
   `.bundle-section-heading` (pack) comme `.aplus-v17-section-head` (routine complémentaire).
   `display:block` suffit ici : le `<header>` empile ses enfants dans l'ordre du flux — la puce
   puis le titre —, la puce porte déjà son `margin-bottom:8px`, et le titre passe de 780 à 720 px
   de large — la valeur du prototype — pour casser sur deux lignes au lieu de filer sur toute la
   largeur. (Le `<header>` a porté un troisième enfant, `.gbs-merch-note` : l'avertissement de
   cumul, retiré le 2026-08-16. `display:block` était déjà le bon choix sans lui.)
   La règle mobile `@media(max-width:900px){.gbs-merch header{display:block}}` est devenue
   redondante et a été retirée. */
/* Survol de la carte pack, porté de la home et réglé sur la géométrie d'ici (rayon 23 px,
   vignette de 200 px, carte blanche posée sur le panneau teinté de `.gbs-merch`). Ombre plus
   courte que sur la home (18/42 au lieu de 22/54) : la carte n'en porte aucune au repos, et
   passer de `none` à l'ombre de la home ferait un saut de matière sur fond clair.
   Les trois vignettes sont ici en flex (32 % chacune, 96 % au total) : le zoom à 1.035 les
   élargit de 1,6 % chacune, la 1re et la 3e restant à ~1 % des bords, donc l'`overflow:hidden`
   de la vignette ne rogne rien. Portée scopée sous `.gbs-merch--bundle` : c'est la seule
   surface de cette feuille où la carte existe (single-product + landings Regaine / A+ /
   magnésium), et le sélecteur nu `.gbs-bundle-card` sert de base commune plus haut. */
/* Packs de QUATRE vignettes : on vise le MÊME total de 96 % que ci-dessus, pas la même
   largeur unitaire. Garder 32 % à quatre ferait 128 % dans une boîte de 100 %, et le
   `flex-shrink:1` par défaut NE CORRIGE RIEN : sur un flex item à taille préférée définie,
   le `min-width:auto` se résout à `min(largeur spécifiée, taille min-content)`, soit 32 %
   ici puisque le packshot est intrinsèquement plus large. Les images ne peuvent donc pas
   rétrécir, la ligne déborde de 14 % de chaque côté et l'`overflow:hidden` du visuel rogne
   les deux packshots extérieurs. À 24 %, le total revient à 96 %, la marge de 2 % de chaque
   côté absorbe le zoom au survol exactement comme à trois. Aucun `@media` de cette feuille
   ne redéfinit cette largeur : une seule déclaration suffit. */
.gbs-bundle-card__visual:has(img:nth-child(4)) img{width:24%}
.gbs-merch--bundle .gbs-bundle-card{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.gbs-merch--bundle .gbs-bundle-card__visual img{transition:transform .24s ease}
.gbs-merch--bundle .gbs-bundle-card:hover,.gbs-merch--bundle .gbs-bundle-card:has(>a:focus-visible){border-color:rgba(23,79,60,.42);transform:translateY(-3px);box-shadow:0 18px 42px rgba(28,45,36,.11)}
.gbs-merch--bundle .gbs-bundle-card:hover .gbs-bundle-card__visual img,.gbs-merch--bundle .gbs-bundle-card:has(>a:focus-visible) .gbs-bundle-card__visual img{transform:scale(1.035)}
/* Cette feuille n'avait aucun bloc `prefers-reduced-motion` local ; celui de base.css
   n'écrase que `animation-duration`, jamais `transition`. */
@media(prefers-reduced-motion:reduce){.gbs-merch--bundle .gbs-bundle-card,.gbs-merch--bundle .gbs-bundle-card__visual img{transition:none}}
/* Le pack et les cartes de recommandation vivaient dans DEUX sections consecutives, chacune
   avec son chapo, son titre et son fond teinte — et la meme phrase d'accroche a deux mots pres.
   Elles n'en font plus qu'une (`gbs_merchandising_band_html()`), le pack en premier puisqu'il
   contient le produit consulte. Les deux blocs sont alors freres directs sous le meme
   `<header>`, dont le `margin-bottom:25px` ne separe que le titre : sans cette regle, la carte
   de pack et la grille se touchent. Voisins DIRECTS (`+`) et non `~` : la grille est le seul
   element qui puisse suivre la carte, et un selecteur general poserait la marge sur n'importe
   quel ajout futur sans qu'on l'ait voulu. */
.gbs-merch--bundle .gbs-bundle-card+.gbs-routine-grid{margin-top:clamp(22px,2.4vw,34px)}
/* La bande « contenu public integral » est PLEINE LARGEUR, comme .aplus-seo et comme
   .imported-seo-section du prototype (docs/design) dont elle est le portage. Le prototype
   pose la teinte sur une <section> pleine largeur qui CONTIENT une grille .container ;
   single-product.php a fusionne les deux dans un seul element, lui-meme dans .gbs-shell.
   La teinte heritait donc de la largeur du contenu, et le padding-inline:0 — juste pour une
   bande — collait le titre au bord de la couleur (mesure : 0 px, contre 60 px sur Priorin).
   Sans toucher au gabarit (fichier redeploye en concurrence), la teinte passe sur un pseudo
   qui deborde jusqu'aux bords du viewport : le texte ne bouge pas d'un pixel, seule la
   couleur s'etend. padding-block reprend la valeur exacte de .aplus-seo. Le filet du haut
   disparait : ni le prototype ni .aplus-seo n'en ont, et pleine largeur il ferait doublon
   avec le bord de la teinte. */
.gbs-public-content{margin-top:82px;padding-block:clamp(44px,5vw,82px);display:grid;grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:clamp(34px,5vw,82px);align-items:start}
.gbs-public-content::before{content:"";position:absolute;z-index:-1;inset-block:0;inset-inline:calc(50% - 50vw);background:linear-gradient(180deg,var(--paper),#f4f0e8)}
/* `clip` et non `hidden` : il ne cree PAS de conteneur de defilement, donc le sticky de
   l'aside et le dock fixed restent intacts. Il neutralise la barre horizontale que 50vw
   provoque la ou l'ascenseur est classique (Windows), ou 100vw > clientWidth. */
.gbs-main{overflow-x:clip}.gbs-public-content aside{position:sticky;top:126px}.gbs-public-content aside>p:last-child{color:#686860;font-size:14px;line-height:1.65}.gbs-public-title{margin:0 0 16px;font-size:clamp(32px,3vw,40px);font-weight:700;line-height:1.05;letter-spacing:-.025em}
.gbs-entry-content{min-width:0;max-width:940px;display:flow-root;padding:clamp(26px,4vw,52px);border:1px solid rgba(20,61,47,.1);border-radius:28px;background:rgba(255,255,255,.72);box-shadow:0 24px 70px rgba(30,48,39,.07);color:#30332f;font-size:15px;line-height:1.75;overflow-wrap:anywhere}.gbs-entry-content>:first-child{margin-top:0}.gbs-entry-content>*,.gbs-entry-content .vc_row,.gbs-entry-content .wpb_row,.gbs-entry-content .vc_column_container,.gbs-entry-content .wpb_wrapper,.gbs-entry-content [class*="elementor-"]{position:static!important;float:none!important;inset:auto!important;transform:none!important;max-width:100%!important;box-sizing:border-box}.gbs-entry-content h1,.gbs-entry-content h2{margin:42px 0 14px;font-size:clamp(25px,2.4vw,34px);font-weight:700;line-height:1.12;letter-spacing:-.02em}.gbs-entry-content h2{border-top:1px solid var(--line-strong);padding-top:34px}.gbs-entry-content>h2:first-child{margin-top:0;border-top:0;padding-top:0}.gbs-entry-content h3{margin:26px 0 10px;color:var(--green-dark);font-size:20px;font-weight:700;line-height:1.25}.gbs-entry-content h4{margin:24px 0 10px;font-size:18px;font-weight:700;line-height:1.25}.gbs-entry-content p{max-width:76ch!important;margin-block:0 18px}.gbs-entry-content ul,.gbs-entry-content ol{max-width:76ch!important;margin-block:14px 24px;padding-inline-start:24px}.gbs-entry-content li{padding-inline-start:5px}.gbs-entry-content li+li{margin-top:9px}.gbs-entry-content li::marker{color:var(--gold)}.gbs-entry-content a{color:var(--green-dark);text-decoration:underline;text-underline-offset:4px}.gbs-entry-content img,.gbs-entry-content video,.gbs-entry-content iframe{max-width:100%!important;height:auto!important;object-fit:contain}.gbs-entry-content iframe{width:100%;min-height:320px}.gbs-entry-content table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse}.gbs-entry-content th,.gbs-entry-content td{padding:12px;border:1px solid var(--line);vertical-align:top;text-align:start}.gbs-entry-content img{display:block;margin:28px auto;border-radius:18px}.gbs-entry-content blockquote{max-width:76ch!important;margin:24px 0;padding-block:2px;padding-inline:20px 0;border-inline-start:3px solid var(--gold);color:var(--ink-soft)}.gbs-entry-content hr{margin:34px 0;border:0;border-top:1px solid var(--line-strong)}.gbs-entry-content dl{max-width:76ch!important;margin:14px 0 24px}.gbs-entry-content dt{margin-top:14px;color:var(--green-dark);font-weight:700}.gbs-entry-content dd{margin:4px 0 0;padding-inline-start:18px}.gbs-entry-content mark{padding:0 .2em;border-radius:3px;background:var(--gold-soft);color:inherit}.gbs-entry-content pre{max-width:100%;margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(23,23,19,.04);font-size:13px;overflow-x:auto}.gbs-entry-content sup{font-size:.72em;line-height:0}.gbs-entry-content style,.gbs-entry-content script,.gbs-entry-content form{display:none!important}
#reviews .comment{margin:11px 0;border:1px solid var(--line);border-radius:17px;background:#f4f0e8;overflow:hidden}.gbs-entry-content details{margin:10px 0;border:1px solid rgba(20,61,47,.12);border-radius:16px;background:#f7f3eb;overflow:hidden;transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease}.gbs-entry-content details[open]{border-color:rgba(35,105,81,.34);background:#edf2eb;box-shadow:0 12px 30px rgba(20,61,47,.08)}.gbs-entry-content details>summary{position:relative;min-height:60px;padding-block:12px;padding-inline:18px 56px;display:flex;align-items:center;color:var(--green-dark);font-size:14px;font-weight:800;line-height:1.35;list-style:none;cursor:pointer}.gbs-entry-content details>summary::-webkit-details-marker{display:none}.gbs-entry-content details>summary:after{content:"+";position:absolute;inset-inline-end:14px;top:50%;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(35,105,81,.1);color:var(--green-dark);font-size:18px;line-height:1;transform:translateY(-50%);transition:transform 180ms ease,color 180ms ease,background 180ms ease}.gbs-entry-content details[open]>summary:after{content:"−";background:var(--green);color:#fff;transform:translateY(-50%) rotate(180deg)}.gbs-entry-content details>:not(summary){max-width:72ch!important;margin-inline:18px}.gbs-entry-content details>div,.gbs-entry-content details>p{padding:0 0 18px;color:var(--ink-soft);line-height:1.7}.woocommerce-Reviews{margin-top:72px}.woocommerce-Reviews-title{font-size:32px;font-weight:700}#review_form textarea,.comment-form textarea{display:block;width:100%;max-width:100%;box-sizing:border-box}
.gbs-buy-dock{position:fixed;z-index:160;inset-inline-start:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%,calc(100% + 50px));width:min(1160px,calc(100% - 28px));min-height:80px;padding:9px 13px;border:1px solid rgba(255,255,255,.2);border-radius:25px;background:rgba(8,56,43,.95);color:#fff;display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:14px;align-items:center;box-shadow:0 18px 48px rgba(0,0,0,.24);backdrop-filter:blur(14px);transition:transform .22s ease}.rtl .gbs-buy-dock{transform:translate(50%,calc(100% + 50px))}.gbs-buy-dock.is-visible{transform:translate(-50%,0)}.rtl .gbs-buy-dock.is-visible{transform:translate(50%,0)}.gbs-buy-dock img{width:60px;height:60px;object-fit:contain;border-radius:13px;background:#f4f0e8}.gbs-buy-dock span{display:flex;flex-direction:column;min-width:0}.gbs-buy-dock strong{white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.25}
/* Inverse CTA against the dark dock so the action stays distinct on every product template. */
.gbs-buy-dock .gbs-button{border-color:var(--paper);background:var(--paper);color:var(--green-dark)}
@media(hover:hover) and (pointer:fine){.gbs-buy-dock .gbs-button:hover{border-color:var(--ivory);background:var(--ivory)}}
.gbs-buy-dock .gbs-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[data-gallery]:has(.gbs-thumbs button.is-active[data-gallery-kind="editorial"]) .gbs-gallery-main,[data-gallery]:has(.gbs-thumbs button.is-active.is-editorial) .gbs-gallery-main{background:transparent;box-shadow:none}[data-gallery]:has(.gbs-thumbs button.is-active[data-gallery-kind="editorial"]) .gbs-gallery-main:after,[data-gallery]:has(.gbs-thumbs button.is-active.is-editorial) .gbs-gallery-main:after{display:none}[data-gallery]:has(.gbs-thumbs button.is-active[data-gallery-kind="editorial"]) .gbs-gallery-main>img,[data-gallery]:has(.gbs-thumbs button.is-active.is-editorial) .gbs-gallery-main>img{top:0;left:0;width:100%;height:100%!important;border-radius:0;transform:none;filter:none}
/* `display:block` sur l'image, sinon le <dialog> devient scrollable de 7 px. Une image reste
   INLINE par défaut : elle s'assoit sur la ligne de base, et le descendeur du strut (police 16 px,
   line-height 24 px) ajoute ~7 px de vide sous elle. Avec `height:100%` l'image remplit déjà la
   boîte de contenu du dialogue : le line-box la dépasse donc de ces 7 px. Mesure du 2026-08-21 sur
   le staging : scrollHeight 835 pour clientHeight 828 en 1440x900, 857/850 en 768x1024, 754/747 en
   375x812 — une surface censée être fixe qui dérivait à la molette. `display:block` supprime le
   line-box sans déplacer l'image d'un pixel (rects identiques avant/après). */
.gbs-lightbox{width:min(900px,94vw);height:min(850px,92vh);padding:24px;border:0;border-radius:24px;background:#f8f5ef}.gbs-lightbox::backdrop{background:rgba(0,0,0,.72)}.gbs-lightbox>button{position:absolute;inset-inline-end:18px;top:18px;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:30px}.gbs-lightbox>img{display:block;width:100%;height:100%!important;object-fit:contain}
@media(max-width:1100px){.gbs-product-hero{grid-template-columns:minmax(0,1fr) minmax(390px,.95fr);gap:34px}.gbs-product-summary h1{font-size:42px}.gbs-product.has-medium-title .gbs-product-summary h1{font-size:37px}.gbs-product.has-long-title .gbs-product-summary h1{font-size:33px}}
@media(max-width:900px){.gbs-product{padding-bottom:96px}.woocommerce-breadcrumb{margin:15px 0 17px}.gbs-product-hero{grid-template-columns:1fr;gap:24px}.gbs-gallery{position:static}.gbs-gallery-main{height:clamp(300px,82vw,380px);min-height:clamp(300px,82vw,380px);border-radius:23px}.gbs-gallery-main>img{width:90%;height:92%!important}.gbs-gallery-zoom{inset-inline-end:12px;bottom:12px;padding:8px 11px}.gbs-gallery-badges{inset-block-start:11px;inset-inline-start:11px}.gbs-thumbs{gap:6px}.gbs-product-summary h1{max-width:none;font-size:39px}.gbs-product.has-medium-title .gbs-product-summary h1{font-size:35px}.gbs-product.has-long-title .gbs-product-summary h1{font-size:31px}.gbs-keypoints{grid-template-columns:1fr}.gbs-quantity-offers{padding:14px}.gbs-quantity-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gbs-reassurance{grid-template-columns:1fr}.gbs-reassurance span{min-height:54px}.gbs-aplus-story{margin-top:54px;grid-template-columns:1fr;min-height:0}.gbs-aplus-story picture{height:320px}.gbs-aplus-story>div{padding:32px 24px 38px}.gbs-story-title{font-size:36px}.gbs-merch{margin-top:52px;padding:24px 17px}.gbs-merch-title{font-size:31px}.gbs-public-content{margin-top:60px;grid-template-columns:1fr;gap:23px}.gbs-public-content aside{position:static;max-width:560px}.gbs-public-title{font-size:32px}.gbs-entry-content{max-width:none;padding:22px 18px;border-radius:20px;font-size:15px;line-height:1.72}.gbs-entry-content h1,.gbs-entry-content h2{margin-top:36px;font-size:26px}.gbs-entry-content h3{margin-top:26px;font-size:20px}.gbs-entry-content th,.gbs-entry-content td{min-width:132px}.gbs-buy-dock{min-height:70px;grid-template-columns:46px minmax(0,1fr) auto;border-radius:20px;padding:8px}.gbs-buy-dock img{width:46px;height:46px}.gbs-buy-dock .gbs-button{min-height:48px;padding:9px 15px}.gbs-buy-dock span strong{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.gbs-buy-dock span .price{font-size:13px}}
@media(max-width:480px){.gbs-product-summary h1{font-size:34px}.gbs-product.has-medium-title .gbs-product-summary h1{font-size:32px}.gbs-product.has-long-title .gbs-product-summary h1{font-size:29px}.gbs-buy{grid-template-columns:minmax(0,1fr)}.gbs-buy .quantity{justify-self:start}.gbs-buy .gbs-button{padding-inline:11px}.gbs-product-price{font-size:32px}.gbs-variants a{padding:10px}.gbs-story-title{font-size:33px}.gbs-public-title{font-size:30px}.gbs-buy-dock{grid-template-columns:40px minmax(0,1fr) auto}.gbs-buy-dock img{width:40px;height:40px}/* `gap:0` : le bouton garde son libelle dans le DOM, masque par `font-size:0`. Un noeud texte
   de largeur nulle reste un ITEM FLEX, donc la gouttiere de 9 px heritee de `.gbs-button`
   s'appliquait entre lui et l'icone : le « + » etait pousse de gap/2 = 4,5 px a droite du centre
   (mesure : bouton centre a 160,5, icone a 165). Sans libelle visible, elle n'a plus d'objet. */
.gbs-buy-dock .gbs-button{width:50px;padding:0;gap:0;font-size:0}.gbs-buy-dock .gbs-button:after{content:"+";font-size:25px}}

/* ============================================================================
   Regaine cure landing (template-parts/regaine-landing.php). Monochrome + green
   accent, 1px hairlines, tabular-nums on amounts, anti-crop contained media,
   RTL-safe logical properties. Ported from the storefront prototype renderLanding.
   ============================================================================ */
.regaine-landing{color:var(--ink);padding-bottom:clamp(24px,4vw,48px)}
.regaine-container{width:min(1320px,calc(100% - 48px));margin-inline:auto}
.regaine-figure{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden}
.regaine-figure img{position:absolute;inset:5%;width:90%;height:90%;max-width:none;object-fit:contain;object-position:center}
.regaine-figure--tall{aspect-ratio:4/5}
.regaine-landing h2{letter-spacing:-.025em}
.regaine-stars{color:var(--gold);letter-spacing:1.5px;white-space:nowrap}

/* Hero */
.regaine-hero{padding-block:clamp(24px,3.4vw,52px)}
.regaine-hero-shell{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(400px,.96fr);gap:clamp(32px,4vw,64px);align-items:start}
.regaine-gallery{position:sticky;top:104px;min-width:0}
.regaine-gallery .gbs-gallery-main{cursor:zoom-in}
.regaine-gallery-badge{position:absolute;z-index:2;inset-block-start:18px;inset-inline-start:18px;padding:8px 14px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.regaine-zoom{position:absolute;z-index:2;inset-block-end:16px;inset-inline-end:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(251,248,242,.92);color:var(--green);font-size:13px;pointer-events:none;box-shadow:0 4px 12px rgba(20,44,35,.12)}
.regaine-zoom svg{width:1.05em;height:1.05em}
.regaine-gallery-note{margin:12px 0 0;display:flex;align-items:center;gap:8px;color:var(--green);font-size:13px}
.regaine-order{min-width:0}
.regaine-intent-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px}
.regaine-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.regaine-intent{padding:6px 12px;border-radius:999px;background:#efe2bb;color:#171a16;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.regaine-availability{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:14px}
.regaine-availability::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.regaine-rating-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.regaine-order h1{margin:16px 0 14px;font-size:clamp(32px,3.5vw,52px);font-weight:800;line-height:1.02;letter-spacing:-.03em;max-width:18ch;overflow-wrap:anywhere}
.regaine-lead{margin:0 0 20px;max-width:46ch;color:#4a4f49;font-size:17px;line-height:1.5}
.regaine-benefits{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:22px}
.regaine-benefits span{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:14px}
.regaine-benefits svg{width:1.15em;height:1.15em}
.regaine-offer-selector{border:1px solid var(--line);border-radius:22px;padding:18px;background:var(--white)}
.regaine-offer-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-bottom:14px}
.regaine-offer-head strong{font-size:15px}
.regaine-offer-head span{color:#686860;font-size:12.5px}
.regaine-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.regaine-offer-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 13px;border:1px solid var(--line);border-radius:16px;background:var(--ivory);text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.regaine-offer-card:hover{border-color:var(--green)}
.regaine-offer-card[aria-checked="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#e3eee9}
.regaine-offer-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.regaine-offer-tag{position:absolute;inset-block-start:-9px;inset-inline-start:13px;padding:3px 9px;border-radius:999px;background:var(--green);color:#fff;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.regaine-offer-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.regaine-offer-top small{color:#686860;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.regaine-offer-radio{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--line);border-radius:50%}
.regaine-offer-card[aria-checked="true"] .regaine-offer-radio{border-color:var(--green);box-shadow:inset 0 0 0 4px var(--green)}
.regaine-offer-card strong{font-size:17px;font-weight:700}
.regaine-offer-card em{font-style:normal;color:#686860;font-size:13px}
.regaine-offer-price{margin-top:2px;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.regaine-offer-saving{color:var(--green);font-size:12px;font-variant-numeric:tabular-nums}
.regaine-selection{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:18px 0 2px}
.regaine-selection-price .price{font-size:clamp(30px,3.2vw,38px);font-weight:800;font-variant-numeric:tabular-nums}
.regaine-selection-copy{display:flex;flex-direction:column;margin:0;color:#4a4f49;font-size:14px;font-variant-numeric:tabular-nums}
.regaine-detail-saving{color:var(--green);font-size:14px}
.regaine-contents{display:flex;flex-wrap:wrap;gap:6px 10px;margin:14px 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--stone);font-size:14px}
.regaine-purchase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:stretch}
.regaine-quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.regaine-quantity button{width:46px;min-height:56px;border:0;background:transparent;font-size:20px;cursor:pointer}
.regaine-quantity input{width:42px;border:0;background:transparent;text-align:center;font-size:16px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.regaine-quantity input::-webkit-outer-spin-button,.regaine-quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.regaine-add{min-height:56px;font-size:16px}
.regaine-add .regaine-add-label{font-variant-numeric:tabular-nums}
.regaine-assurances{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--stone)}
.regaine-assurance{display:flex;align-items:center;gap:9px;padding:12px;border-inline-start:1px solid var(--line);color:var(--muted);font-size:12px}
.regaine-assurance:first-child{border-inline-start:0}
.regaine-assurance svg{flex:0 0 auto;color:var(--green)}
.regaine-assurance span{display:flex;flex-direction:column;min-width:0}
.regaine-assurance strong{font-size:12.5px}
.regaine-order-proof{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px}
.regaine-order-proof p{margin:0;display:flex;flex-direction:column;font-size:14px}
.regaine-order-proof span{color:#686860;font-size:13px}
.regaine-proof-rail{margin-top:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.regaine-proof-item{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.regaine-proof-item svg{flex:0 0 auto;width:1.5em;height:1.5em;color:var(--green)}
.regaine-proof-item div{display:flex;flex-direction:column;min-width:0}
.regaine-proof-item strong{font-size:15px}
.regaine-proof-item span{color:#686860;font-size:13px}
/* Seule la carte WhatsApp du rail est un lien (« Partout au Maroc » n'a aucune destination) :
   `[href]` evite d'inventer une classe et laisse la voisine intacte. La fleche finale est le seul
   repere visible au doigt — le survol n'existe pas sur mobile. La couleur et l'absence de
   soulignement viennent deja du `a{color:inherit;text-decoration:none}` global de base.css ;
   `>svg:last-child` (0,3,1) l'emporte sur `.regaine-proof-item svg` (0,1,1) qui impose 1.5em/vert. */
.regaine-proof-item[href]{transition:border-color .15s}
.regaine-proof-item[href]>svg:last-child{margin-inline-start:auto;width:1em;height:1em;color:var(--muted)}
.regaine-proof-item[href]:hover{border-color:var(--green)}
.regaine-proof-item[href]:hover>svg:last-child{color:var(--green)}
.regaine-proof-item[href]:focus-visible{outline:3px solid var(--focus,var(--gold));outline-offset:2px}

/* Trust strip — bande CLAIRE, filets 1 px.
   Elle etait sombre (var(--deep)) et precede immediatement « Resultats publies », qui reprend
   ci-dessous le fond sombre du prototype : deux bandes sombres collees n'en font plus qu'une et
   les deux perdent leur decoupe. Le prototype tranche pareil — `customer-trust-strip` y est
   mesure en #fff, texte rgb(53,67,61), pictogrammes rgb(33,94,75), soit exactement var(--green).
   Au passage la bande perd son accent or au profit du vert : un seul accent sur la page. */
.regaine-trust{background:var(--white);color:var(--ink);padding-block:clamp(22px,3vw,34px);border-block:1px solid var(--line)}
.regaine-trust-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px}
.regaine-trust-title{margin:0;font-size:clamp(18px,2vw,24px);font-weight:700}
.regaine-trust-marks{display:flex;flex-wrap:wrap;gap:10px 22px}
.regaine-trust-marks span{display:inline-flex;align-items:center;gap:8px;color:#4a4f49;font-size:13px}
.regaine-trust-marks svg{color:var(--green)}

/* Section headers shared by results/value/how/reviews */
.regaine-section-header,.regaine-results-head{display:grid;grid-template-columns:1.1fr .9fr;gap:22px 40px;align-items:end;margin-bottom:clamp(24px,3vw,34px)}
.regaine-section-header h2,.regaine-results-head h2{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:800;line-height:1.03}
.regaine-section-header>p,.regaine-results-head>p{margin:0;max-width:52ch;color:#686860;font-size:16px;line-height:1.5}

/* Published results — premier moment sombre de la page.
   La section etait posee sur le fond de page (aucun `background`), la ou le prototype rend
   `aplus-results` sur un fond sombre (mesure : rgb(8,29,79)) portant une carte de copie en
   aplat vif (mesure : rgb(217,241,111), radius 24 px, padding 30 px).
   Le bleu marine et le vert acide sont l'accent PRODUIT du prototype ; on ne les importe pas,
   comme la landing Magnesium plus bas dans ce fichier a deja renonce a son plum/ambre. Ce qui
   est repris, c'est le RAPPORT : fond sombre de la maison + carte claire qui detache la copie. */
.regaine-results{padding-block:clamp(44px,5vw,86px);background:var(--deep);color:#fff}
.regaine-results .gbs-eyebrow{color:#cdd9d1}
.regaine-results .regaine-results-head>p{color:#cdd9d1}
.regaine-results-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:center}
.regaine-results-figure{margin:0}
.regaine-results-figure .regaine-figure{aspect-ratio:1;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 50% 42%,#f8f3e7,#e7e7dc)}
.regaine-results-figure figcaption{margin-top:12px;color:#cdd9d1;font-size:12.5px;line-height:1.6}
/* La carte : c'est elle qui tient le role de l'aplat vif du prototype. */
.regaine-results-copy{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.4vw,30px);border-radius:26px;background:var(--stone);color:var(--ink)}
.regaine-results-copy small{color:var(--green);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.regaine-results-copy h3{margin:6px 0 8px;font-size:clamp(24px,2.4vw,34px);font-weight:700;line-height:1.08}
.regaine-results-copy p{margin:0;color:#4a4f49;font-size:15px;line-height:1.6}
.regaine-results-points{display:grid;gap:10px}
.regaine-results-points span{display:flex;align-items:flex-start;gap:9px;font-size:14px}
.regaine-results-points svg{flex:0 0 auto;margin-top:2px;color:var(--green)}

/* Published timeline */
.regaine-timeline{padding-block:clamp(40px,5vw,80px);background:var(--stone)}
.regaine-timeline-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,3vw,48px);align-items:center}
.regaine-timeline-grid h2{margin:8px 0 12px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.regaine-timeline-grid p{margin:0;color:#4a4f49;font-size:15px;line-height:1.6;max-width:46ch}
.regaine-timeline-grid .regaine-figure{border:1px solid var(--line);border-radius:26px;background:var(--white)}

/* Duration comparison */
.regaine-value{padding-block:clamp(44px,5vw,86px)}
.regaine-compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.regaine-compare-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--white)}
.regaine-compare-card.is-default{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.regaine-compare-media{position:relative;aspect-ratio:4/3;background:radial-gradient(circle at 50% 42%,#f8f3e7,#e7e7dc)}
.regaine-compare-media .regaine-figure{aspect-ratio:4/3}
.regaine-compare-angle{position:absolute;z-index:2;inset-block-start:14px;inset-inline-start:14px;padding:5px 11px;border-radius:999px;background:rgba(251,248,242,.92);color:var(--green);font-size:12px}
.regaine-compare-copy{display:flex;flex-direction:column;gap:7px;padding:18px;flex:1}
.regaine-compare-copy small{color:#686860;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.regaine-compare-copy h3{margin:0;font-size:20px;font-weight:700}
.regaine-compare-copy>p{margin:0;color:#4a4f49;font-size:14px;line-height:1.55}
.regaine-compare-price{margin-top:2px}
.regaine-compare-price strong{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.regaine-compare-points{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:7px}
.regaine-compare-points li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px}
.regaine-compare-points svg{flex:0 0 auto;margin-top:2px;color:var(--green)}
.regaine-compare-copy .gbs-button{margin-top:auto;min-height:48px}
.regaine-offer-note{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.regaine-offer-note span{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--stone);font-size:14px;font-variant-numeric:tabular-nums}

/* Mousse / formula */
.regaine-formula{padding-block:clamp(44px,5vw,86px);background:var(--stone)}
.regaine-formula-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
.regaine-formula-visual{margin:0}
.regaine-formula-visual .regaine-figure{border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 50% 42%,#f8f3e7,#e7e7dc)}
.regaine-art-caption{display:flex;justify-content:space-between;gap:10px;margin-top:12px;color:#686860;font-size:13px}
.regaine-formula-copy h2{margin:6px 0 14px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.regaine-formula-copy>p{margin:0;color:#4a4f49;font-size:16px;line-height:1.55}
.regaine-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.regaine-stat{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.regaine-stat strong{display:block;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.regaine-stat span{color:#686860;font-size:12.5px;line-height:1.35}
.regaine-formula-list{display:grid;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white)}
.regaine-formula-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 16px;border-block-start:1px solid var(--line)}
.regaine-formula-row:first-child{border-block-start:0}
.regaine-formula-row>span{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}
.regaine-formula-row strong{font-size:15px}
.regaine-formula-row em{font-style:normal;color:#686860;font-size:12.5px;text-align:end}

/* Sourced competitor comparison */
.regaine-comparison{padding-block:clamp(44px,5vw,86px)}
.regaine-comparison-head{max-width:760px;margin-bottom:14px}
.regaine-comparison-title{margin:6px 0 10px;font-size:clamp(24px,2.6vw,38px);font-weight:800;line-height:1.1}
.regaine-comparison-intro{margin:0;color:#686860;font-size:16px;line-height:1.55}
.regaine-comparison-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--green);font-size:13px}
.regaine-comparison-hint svg{width:1.1em;height:1.1em}
.regaine-comparison-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.regaine-comparison-scroll table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.regaine-comparison-scroll th,.regaine-comparison-scroll td{padding:13px 16px;text-align:start;border-block-end:1px solid var(--line);border-inline-start:1px solid var(--line);vertical-align:top}
.regaine-comparison-scroll tr>:first-child{border-inline-start:0}
.regaine-comparison-scroll tbody tr:last-child th,.regaine-comparison-scroll tbody tr:last-child td{border-block-end:0}
.regaine-comparison-scroll thead th{font-weight:700;background:var(--stone)}
.regaine-comparison-scroll th[scope=row]{font-weight:600;background:var(--stone);color:#3a3f39}
.regaine-comparison-scroll .is-selected{background:#e3eee9}
.regaine-comparison-scroll thead .is-selected{color:var(--green)}
.regaine-comparison-choice{display:block;margin-top:3px;font-size:11px;font-weight:400;color:var(--green)}
.regaine-comparison-value{display:inline-flex;align-items:center;gap:6px}
.regaine-comparison-value svg{flex:0 0 auto;width:1.05em;height:1.05em;color:var(--green)}
.regaine-comparison-note{margin-top:14px;color:#686860;font-size:12.5px;line-height:1.65}
.regaine-comparison-note a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* How to use — second moment sombre.
   La section rendait en beige (var(--stone)), la ou le prototype mesure rgb(17,23,19) sur
   `aplus-routine` — a deux points pres, le var(--deep) de la maison (#171713). Les etapes y
   sont TRANSPARENTES, tenues par un filet clair (mesure : 1px solid rgba(255,255,255,.16)) :
   des cartes blanches pleines sur fond noir feraient un damier. */
.regaine-how{padding-block:clamp(44px,5vw,86px);background:var(--deep);color:#fff}
.regaine-how .gbs-eyebrow{color:#cdd9d1}
.regaine-how .regaine-section-header>p{color:#cdd9d1}
.regaine-how-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,48px);align-items:center}
.regaine-how-visual{position:relative;margin:0;aspect-ratio:3/2;border:1px solid rgba(255,255,255,.16);border-radius:26px;overflow:hidden}
.regaine-how-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.regaine-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.regaine-step{padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:transparent}
.regaine-step>span{color:#cdd9d1;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.regaine-step h3{margin:8px 0 6px;font-size:17px;font-weight:700}
.regaine-step p{margin:0;color:#cdd9d1;font-size:14px;line-height:1.5}

/* Full routine stack — le moment d'accent.
   La section n'avait aucun fond ; le prototype la rend sur son accent produit (mesure :
   rgb(23,71,168)) avec un bouton en contraste inverse. L'accent de la maison est var(--green),
   et le bouton s'inverse comme le fait deja `.regaine-close-action .gbs-button` sur fond sombre.
   Le composite garde son fond clair : c'est le support des trois packshots detoures. */
.regaine-stack{padding-block:clamp(44px,5vw,86px);background:var(--green);color:#fff}
.regaine-stack .gbs-eyebrow{color:#cdd9d1}
.regaine-stack-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.regaine-stack-copy h2{margin:6px 0 14px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.regaine-stack-copy>p{margin:0;color:#cdd9d1;font-size:16px;line-height:1.55}
.regaine-stack-copy .gbs-button{background:var(--white);color:var(--green);border-color:var(--white)}
.regaine-stack-list{display:grid;gap:10px;margin:18px 0 22px}
.regaine-stack-list span{display:flex;flex-direction:column;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:transparent;color:#cdd9d1;font-size:13.5px}
.regaine-stack-list strong{color:#fff;font-size:15px}
.regaine-stack-visual{margin:0}
.regaine-stack-composite{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:24px;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle,#f6f1e7,#dfe7db);aspect-ratio:16/10}
.regaine-stack-composite img{align-self:center;width:100%;height:82%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.12))}

/* Reviews */
.regaine-reviews{padding-block:clamp(44px,5vw,86px);background:var(--stone)}
.regaine-rating-summary{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.regaine-rating-score{font-size:48px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.regaine-rating-summary p{margin:2px 0 0;color:#686860;font-size:14px}
/* Maconnerie plutot que grille. Une grille egalise la hauteur de toute une rangee : une carte
   sans photo posee a cote d'une carte avec photo heritait de 350 px dont 170 de vide. Les colonnes
   CSS laissent chaque carte a sa hauteur naturelle et les empilent sans trou. */
.regaine-review-grid{columns:3;column-gap:16px}
.regaine-review-card{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--white);break-inside:avoid}
.regaine-review-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.regaine-review-product{color:#686860;font-size:12px}
.regaine-review-card blockquote{margin:0;font-size:15px;line-height:1.55}
/* Photo jointe par le client. Hauteur fixe : les cartes d'une meme rangee de grille doivent
   rester alignees, et seules certaines portent une image. `margin-top:auto` la pousse au-dessus
   de la signature pour que les cartes sans photo gardent la signature en bas. */
/* Photo client : ENTIERE, jamais recadree. `object-fit:cover` sur une hauteur fixe de 180 px ne
   laissait voir que 26 % d'une photo de telephone (mesure du 17/08 sur 1440x2560) — le produit
   photographie sortait du cadre. `contain` sous un plafond de hauteur montre tout, garde la carte
   raisonnable, et marche aussi bien pour une photo paysage. Les bandes laterales d'une photo
   portrait sont assumees : elles portent le fond de la vignette, pas du vide. */
.regaine-review-photo{margin:0;display:flex;justify-content:center}
.regaine-review-photo a{display:block;max-width:100%;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--stone);cursor:zoom-in;transition:border-color .18s ease}
.regaine-review-photo a:hover,.regaine-review-photo a:focus-visible{border-color:var(--deep)}
/* `width:auto` : le cadre epouse la photo au lieu de la letterboxer. Une photo portrait
   dans une boite pleine largeur laissait 75 px de bandes de chaque cote. */
.regaine-review-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:400px}
.regaine-review-author{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.regaine-review-author strong{display:block;font-size:14px}
.regaine-review-author>div span{color:#686860;font-size:12.5px}
.regaine-verified{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px}

/* Imported SEO / description + FAQ */
.regaine-seo{padding-block:clamp(44px,5vw,82px)}
.regaine-seo-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.regaine-seo-aside{position:sticky;top:104px}
.regaine-seo-title{margin:10px 0 14px;font-size:clamp(26px,2.4vw,36px);font-weight:800;line-height:1.06}
.regaine-seo-aside>p{color:#686860;font-size:14px;line-height:1.6}

/* Closing CTA */
.regaine-close{padding-block:clamp(40px,4.6vw,74px)}
.regaine-close-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 40px;align-items:center;padding:clamp(26px,3.4vw,48px);border:1px solid var(--line);border-radius:28px;background:var(--deep);color:#fff}
.regaine-close-shell h2{margin:0 0 8px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.regaine-close-shell>div>p{margin:0;color:#cdd9d1;font-size:15px;font-variant-numeric:tabular-nums}
.regaine-close-action{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.regaine-close-action .gbs-button{min-height:56px;background:var(--white);color:var(--deep);border-color:var(--white)}
.regaine-close-action span{color:#cdd9d1;font-size:13px}

/* Sticky dock (reuses .gbs-buy-dock) */
.regaine-dock .price{font-variant-numeric:tabular-nums}

/* Responsive */
@media(max-width:1000px){
  .regaine-hero-shell{grid-template-columns:1fr;gap:28px}
  .regaine-gallery{position:static}
  .regaine-section-header,.regaine-results-head,.regaine-results-grid,.regaine-timeline-grid,.regaine-formula-grid,.regaine-how-layout,.regaine-stack-grid,.regaine-close-shell{grid-template-columns:1fr}
  .regaine-seo-grid{grid-template-columns:1fr}
  .regaine-seo-aside{position:static;max-width:560px}
  .regaine-compare-grid{grid-template-columns:1fr}
  .regaine-review-grid{columns:2}
  .regaine-timeline-grid figure,.regaine-timeline-grid .regaine-figure{max-width:460px}
  .regaine-formula-visual,.regaine-stack-visual,.regaine-results-figure{max-width:520px}
}
@media(max-width:640px){
  .regaine-container{width:min(100% - 30px,760px)}
  /* Une seule colonne d'avis : a deux colonnes sous 640 px, une carte fait 150 px de large et la
     photo y devient illisible. Le plafond de hauteur monte, la colonne etant plus etroite. */
  .regaine-review-grid{columns:1}
  .regaine-review-photo img{max-height:320px}
  /* Les trois durees restent COTE A COTE, comparables d'un coup d'oeil : c'est la raison d'etre
     du selecteur, et le format long fait dix fois le chiffre du format court. La regle
     precedente (`grid-template-columns:1fr`) les empilait sous 640 px, obligeant a faire defiler
     pour comparer trois prix. Le prototype tient a 375 px avec trois colonnes de 110 px et un
     gap de 6 px, en ne gardant sur la carte que la periode et le prix : titre, contenance et
     economie y sont masques (mesure : largeurs a 0). On fait pareil — et l'information n'est pas
     perdue : `aria-label` porte les quatre valeurs pour les lecteurs d'ecran, et le bloc
     `.regaine-selection` juste dessous detaille l'offre selectionnee. */
  .regaine-offer-selector{padding:14px}
  .regaine-offer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .regaine-offer-card{gap:2px;padding:25px 6px 11px;border-radius:12px;text-align:center}
  .regaine-offer-card>strong,.regaine-offer-card>em,.regaine-offer-saving,.regaine-offer-radio{display:none}
  .regaine-offer-top{justify-content:center}
  .regaine-offer-top small{font-size:11px;letter-spacing:.02em}
  .regaine-offer-price{font-size:16px}
  /* Le badge reste en absolu — comme dans le prototype, ou il occupe toute la largeur de la
     carte sans en decaler le contenu : les trois cartes gardent le meme haut et la meme hauteur.
     Le `padding-block-start` ci-dessus reserve sa bande sur les TROIS cartes, badge ou non. */
  .regaine-offer-tag{inset-block-start:0;inset-inline:0;padding:4px 3px;border-radius:11px 11px 0 0;font-size:9.5px;letter-spacing:.02em;text-align:center}
  .regaine-offer-head{margin-bottom:10px}
  .regaine-benefits{gap:8px 14px}
  .regaine-assurances{grid-template-columns:1fr}
  .regaine-assurance{border-inline-start:0;border-block-start:1px solid var(--line)}
  .regaine-assurance:first-child{border-block-start:0}
  .regaine-proof-rail,.regaine-offer-note,.regaine-stat-grid,.regaine-step-grid{grid-template-columns:1fr}
  .regaine-purchase{grid-template-columns:1fr}
  .regaine-quantity{justify-self:start}
  .regaine-close{padding-bottom:100px}
}

/* ==================================================================== */
/* Bespoke Magnesium Glycinate landing (product 8559 + AR twin).        */
/* Ported from the prototype's keto/mag sections; the prototype's plum/  */
/* amber accent is dropped for the theme's single green/gold accent.    */
/* The hero reuses the generic .gbs-* primitives (offer-quantity, buy    */
/* form, dock) — these rules only add the bespoke sections + accents.    */
/* ==================================================================== */
/* Palette bespoke de la fiche, relevee sur `.magnesium-page` du template (« univers mineral
   ambre et prune »). Scopee sur la landing et JAMAIS dans le :root de base.css : elle ne vaut
   que pour cette fiche. Le template redefinit aussi les jetons keto partages, d'ou les cinq
   premieres lignes : sur cette page le « vert » keto est une terre cuite, et le « vert fonce »
   une prune. */
.magnesium-landing{line-height:normal;--keto-green:#a84b2a;--keto-green-dark:#3a2545;--keto-green-soft:#f4e6d7;--keto-orange:#d76b31;--keto-orange-soft:#f3d9bc;--mag-plum:#3a2545;--mag-plum-deep:#27192f;--mag-amber:#d76b31;--mag-amber-soft:#f3d9bc;--mag-sage:#a9b8a0;color:var(--ink);padding-bottom:clamp(24px,4vw,48px)}
.mag-container{width:min(1320px,calc(100% - 48px));margin-inline:auto}
.magnesium-landing h2{letter-spacing:-.025em}
.mag-stars{color:var(--gold);letter-spacing:1.5px;white-space:nowrap}

/* Hero accents (layered onto reused .gbs-product-hero / .gbs-product-summary) */
.magnesium-hero{padding-block:clamp(24px,3.4vw,52px)}
.magnesium-hero .gbs-gallery{top:104px}
/* La colonne resume du template est plus large que celle du generique : le ratio de la grille
   du hero est `1fr / .98fr` a partir de 470px, pas `1.02fr / .98fr` a partir de 420px. Sans
   cette ligne, toutes les largeurs derivees (grille d'offres, reassurance, ligne d'achat)
   divergent de ~6px. */
.magnesium-hero .gbs-product-hero{grid-template-columns:minmax(0,1fr) minmax(470px,.98fr);gap:clamp(32px,4vw,58px)}
/* Le badge d'economie et le badge bestseller vivent dans le conteneur flex generique
   `.gbs-gallery-badges` : le template les empile en absolu au meme point, ou ils se
   chevauchent — on garde son intention (les deux badges) sans son defaut. */
.magnesium-landing .gbs-gallery-badge{background:var(--mag-plum)}
.magnesium-landing .gbs-saving-badge{padding:8px 14px;background:#174f3c;letter-spacing:.035em}
.mag-zoom{position:absolute;z-index:2;inset-block-end:16px;inset-inline-end:16px;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.91);color:var(--ink);font-size:12px;font-weight:800;line-height:normal;pointer-events:none;backdrop-filter:blur(8px)}
.mag-zoom{text-align:center}
.mag-zoom svg{width:15px;height:15px}
.mag-gallery-note{margin:12px 0 0;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
/* Fond de galerie du template : halo blanc radial pose sur un degrade sable -> mauve. Le
   generique est un gris-vert ; c'est l'ecart d'« arriere-plan » le plus visible du hero. */
.magnesium-landing .gbs-gallery-main{text-align:start;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.96) 0 24%,transparent 55%),linear-gradient(145deg,#ede1d2,#d8b789 54%,#a99aaa)}
/* --- Bandeau meta (pastille marque / stock / note) --------------------------------- */
.magnesium-summary .gbs-product-meta{gap:7px;color:var(--ink);font-size:inherit;font-weight:inherit}
.magnesium-summary .gbs-product-meta .gbs-brand{min-height:29px;background:var(--mag-amber-soft);color:var(--mag-plum);line-height:normal}
.magnesium-summary .gbs-product-meta a.gbs-brand:hover{background:var(--mag-amber-soft);filter:brightness(.95)}
/* Le format n'est plus dans la pastille : il se lit comme la meta qu'il est, pas comme une seconde etiquette. */
.magnesium-summary .mag-format{color:var(--muted);font-size:12px;font-weight:400;line-height:normal}
.magnesium-summary .gbs-product-meta .is-stock{display:flex;align-items:center;gap:5px;margin:6px 0 0;color:var(--green);font-size:12px;font-weight:800;line-height:normal}
.magnesium-summary .gbs-product-meta .is-stock:before{margin-inline-end:0}
/* `:not(.gbs-brand)` — sans cette exclusion, la pastille de marque devenue lien heriterait ici
   du gris et du 400 destines au lien d'avis, et perdrait le contraste de sa surface ambre. */
.magnesium-summary .gbs-product-meta a:not(.gbs-brand){min-height:44px;gap:8px;color:var(--muted);font-size:12px;font-weight:400;line-height:normal}
.magnesium-summary .mag-stars{color:#89713d;font-size:13px;font-weight:400;letter-spacing:.08em}

.magnesium-summary .mag-lead{margin:0;max-width:630px;color:var(--muted);font-size:14px;line-height:1.55}

/* --- Benefices : DEUX colonnes sur desktop -----------------------------------------
   Le generique `.gbs-keypoints` porte la variante <=700px du template (1 colonne, 7px) en
   valeur de BASE. Le template la declare hors media query a deux colonnes et ne retombe a une
   qu'a 700px — d'ou la surcharge scopee ici plus la media query a 700px (le generique casse a
   900px). Le marqueur est un <span> peint par clip-path, pas un glyphe « ✦ » : un glyphe
   depend de la fonte disponible, la forme non. */
.magnesium-summary>.gbs-keypoints{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;margin:13px 0 16px;font-size:inherit;font-weight:inherit;line-height:inherit}
.magnesium-summary>.gbs-keypoints li{display:flex;align-items:flex-start;gap:9px;padding-inline-start:0;font-size:14px;font-weight:650;line-height:1.35}
.magnesium-summary>.gbs-keypoints li:before{content:none}
.magnesium-summary .benefit-spark{width:15px;height:15px;flex:0 0 15px;margin-top:1px;background:currentColor;clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}

/* --- Prix : une ligne bornee par deux filets, pas une carte remplie ----------------- */
.keto-price-panel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;min-height:62px;margin:9px 0;padding:9px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none}
/* `.mag-price` partage son element avec `.gbs-product-price`, que storefront.js interroge pour
   synchroniser le prix des offres quantite : on neutralise sa typographie ici plutot que de
   retirer la classe du markup. */
.mag-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit}
.mag-price ins,.mag-price>.woocommerce-Price-amount{font-size:32px;font-weight:850;letter-spacing:-.025em;line-height:normal;font-variant-numeric:tabular-nums;text-decoration:none}
.mag-price del{order:2;margin:0;color:#8a837d;font-size:16px;font-weight:650;letter-spacing:normal;line-height:normal;font-variant-numeric:tabular-nums}
.keto-price-panel p{max-width:260px;margin:0;color:#677068;font-size:12px;line-height:1.4;text-align:right}
.keto-price-panel p strong{display:block;color:var(--mag-plum);font-variant-numeric:tabular-nums}

/* --- Bandeau « Offre en cours » (insere entre le prix et les offres quantite) --------
   DE-SCOPE DE `.magnesium-summary` LE 2026-08-16. Le bandeau n'existait que sur la landing
   magnesium alors que 36 fiches FR (sur 379) et 34 fiches AR (sur 306) sont en remise. Les
   declarations sont recopiees a l'IDENTIQUE et posees a la MEME place dans la feuille :
   specificite inchangee (0,2,0) et rang de cascade inchange, donc rendu magnesium iso —
   c'est ce que verifie `scripts/gbs-magnesium-parity.mjs` sur quatre viewports. */
.gbs-product-summary .sale-status,.regaine-order .sale-status{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;min-height:58px;margin:12px 0 4px;padding:11px 14px;border:1px solid rgba(35,105,81,.22);border-radius:16px;background:linear-gradient(135deg,#edf4f0,#e3eee8);color:var(--green-dark)}
.gbs-product-summary .sale-status-icon,.regaine-order .sale-status-icon{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;color:var(--green)}
.gbs-product-summary .sale-status-icon svg,.regaine-order .sale-status-icon svg{width:22px;height:22px}
.gbs-product-summary .sale-status-copy,.regaine-order .sale-status-copy{display:grid;gap:2px}
.gbs-product-summary .sale-status-copy small,.regaine-order .sale-status-copy small{color:var(--green);font-size:11px;font-weight:850;letter-spacing:.09em;line-height:normal;text-transform:uppercase}
/* `tabular-nums` : les secondes defilent, une chasse proportionnelle ferait danser la ligne
   entiere a chaque tick. Propriete NON comparee par le harnais de parite. */
.gbs-product-summary .sale-status-copy strong,.regaine-order .sale-status-copy strong{color:var(--green-dark);font-size:13px;font-weight:900;line-height:1.3;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Rail de progression du cycle : un hairline en pseudo-element, donc AUCUN noeud DOM en plus
   (le harnais de parite compare des elements, pas des pseudos) et aucune influence sur la
   hauteur du bandeau — il est hors flux et sans bordure. `inset-inline-start` suffit au RTL.

   AUCUNE TRANSITION, ET C'EST UN CORRECTIF, PAS UNE PREFERENCE. La version initiale portait
   `transition:width .95s linear` pour lisser le pas d'une seconde. Mesure du 2026-08-16 sur le
   staging : le rail restait fige a `width:0px` INDEFINIMENT, alors que
   `--gbs-countdown-progress` valait bien 0,602 et que la meme declaration rendait 375 px sur un
   element reel. Le JS reecrit la propriete personnalisee CHAQUE SECONDE, soit plus vite que la
   transition ne s'acheve : elle repart de sa valeur de depart — zero — a chaque tick et
   n'atteint jamais rien. Couper la transition rend 560 px immediatement (mesure). De toute
   facon elle n'animait rien de perceptible : le rail avance de 1/172800e de sa largeur par
   seconde. Corollaire : plus rien a neutraliser sous `prefers-reduced-motion`. */
.sale-status[data-gbs-countdown]{position:relative;overflow:hidden}
.sale-status[data-gbs-countdown]::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:calc(var(--gbs-countdown-progress,0) * 100%);background:var(--green);opacity:.28}
/* Le chrono est un bloc bidi isole : en arabe, `05:42:17` ne doit pas etre reordonne par
   l'algorithme bidirectionnel a cote du texte RTL qui le precede. `min-width` en `ch` sur une
   chasse tabulaire fige la largeur : l'apparition du segment « 1 j » ne fait pas sauter la
   ligne, et la seconde qui defile encore moins. */
.sale-status .gbs-countdown-clock{display:inline-block;min-width:9ch;unicode-bidi:isolate}
/* Masquage lecteur d'ecran AUTONOME, pose parce que `.screen-reader-text` n'etait alors
   declaree que par `wp-block-library` et `wc-blocks-style`, que `gbs-css-optim.php` (mu-plugin
   PROD UNIQUEMENT) dequeue exactement sur les pages WooCommerce : le texte etait invisible sur
   le staging et affiche en clair en production, divergence qu'aucune sonde sur staging ne peut
   attraper. Depuis le 2026-08-17, `base.css` declare `.screen-reader-text` pour son propre
   compte (les noeuds WooCommerce qui la portent ne sont pas sous notre controle). Cette classe
   dediee reste neanmoins : elle fonctionne, et la migrer n'apporterait rien. */
.gbs-countdown-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}

/* --- Offres quantite : le template ne declare aucune interligne sur ces libelles -----
   La surcharge `.magnesium-summary .gbs-quantity-offers{margin:18px 0 14px}` a ete RETIREE le
   2026-08-16 : la regle generique porte desormais la meme valeur, donc le style calcule de cette
   landing est inchange (verifie en mesurant `getComputedStyle(...).margin` sur la page servie,
   pas en le supposant). La garder ferait croire a une specificite magnesium qui n'existe plus. */
.magnesium-summary .gbs-quantity-offer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.magnesium-summary .gbs-quantity-offers__title,.magnesium-summary .gbs-quantity-offer__qty,.magnesium-summary .gbs-quantity-offer-grid button>strong,.magnesium-summary .gbs-quantity-offer__unit,.magnesium-summary .gbs-quantity-offer__off{line-height:normal}
.magnesium-summary .gbs-quantity-saving{min-height:22px;line-height:normal}

/* --- Ligne d'achat : selecteur a trois cellules + CTA prune -------------------------- */
.magnesium-landing .gbs-buy .quantity{display:grid;grid-template-columns:44px 44px 44px;align-items:center;justify-content:normal;overflow:hidden;background:#fff}
.magnesium-landing .gbs-buy .quantity button{display:grid;min-height:50px;place-items:center;border:0;background:transparent;color:var(--ink);font-size:17px;line-height:normal;cursor:pointer}
.magnesium-landing .gbs-buy .quantity button:hover{background:var(--ivory)}
.magnesium-landing .gbs-buy .qty{width:44px;min-height:50px;padding:0;font-size:12px;font-weight:800;line-height:normal;appearance:textfield}
.magnesium-landing .gbs-buy .qty::-webkit-outer-spin-button,.magnesium-landing .gbs-buy .qty::-webkit-inner-spin-button{margin:0;appearance:none}
.magnesium-landing .gbs-buy .gbs-button{background:var(--mag-plum);border-color:var(--mag-plum)}
@media (hover:hover) and (pointer:fine){.magnesium-landing .gbs-buy .gbs-button:hover{background:var(--mag-plum-deep);border-color:var(--mag-plum-deep)}}

/* --- Reassurance : icones ambre a 14px (le generique n'en colore aucune) ------------- */
.magnesium-landing .gbs-reassurance{grid-template-columns:repeat(3,1fr)}
.magnesium-landing .gbs-reassurance>span{min-height:58px;color:var(--ink)}
.magnesium-landing .gbs-reassurance svg{width:14px;height:14px;flex:0 0 14px;color:var(--mag-amber)}
.magnesium-landing .gbs-reassurance b{color:var(--muted)}

/* --- WhatsApp : une pilule pleine largeur, pas un lien nu ---------------------------- */
.mag-whatsapp{display:flex;min-height:44px;align-items:center;justify-content:center;gap:9px;margin-top:8px;border:1px solid var(--line);border-radius:999px;color:var(--mag-plum);font-size:12px;font-weight:800;text-decoration:none}
.mag-whatsapp:hover{border-color:var(--green);background:var(--green-soft)}
.mag-whatsapp svg{width:18px;height:18px;color:var(--mag-amber)}
/* Le repli des benefices est a 700px dans le template, pas a 900 comme le generique. */
@media(max-width:700px){.magnesium-summary>.gbs-keypoints{grid-template-columns:1fr;gap:7px}.magnesium-summary>.gbs-keypoints li{font-size:13px}}




/* --- Sections sous le hero : palette prune / ambre / sauge -------------------------
   Le theme rendait toute la page avec le vert du site ; le template reserve a cette fiche un
   « univers mineral ambre et prune ». Tout est scope sur `.magnesium-landing` : les memes
   composants (`.keto-stat`, `.gbs-trust-strip`) servent d'autres fiches, qui restent vertes. */
.magnesium-landing .gbs-trust-strip{width:min(1320px,calc(100% - 48px));margin:44px auto 0;padding-block:34px;border:1px solid rgba(16,37,28,.1);border-radius:22px;background:var(--ivory);color:var(--ink)}
/* La ligne ci-dessus inverse le fond du composant (vert-noir -> ivoire) mais `color` sur la
   SECTION ne repeint que ce qui HERITE : les enfants qui declarent leur propre couleur pour le
   fond sombre (`.gbs-trust-marks span{color:#e8efe9}`, `svg{color:var(--gold)}`, plus bas dans ce
   fichier) restaient clairs sur clair — mesure du 15/08 sur le staging : 1,05:1 pour les reperes,
   2,43:1 pour les icones, quand le titre, lui, heritait bien et sortait a 16:1. Inverser un fond
   oblige donc a inverser AUSSI chaque couleur enfant explicite. Les valeurs reprennent le template
   (`.customer-trust-*`, L6310-6317) : centrage, vert du site, 12px/650, plancher tactile 44px. */
/* `justify-content:normal` n'est PAS decoratif : le generique pose `space-between` pour son
   flex, et la cascade s'applique propriete par propriete — passer en `grid` ne l'annule donc
   pas. Sur une grille a UNE colonne, `space-between` empeche la piste auto de s'etirer : elle
   se reduit au contenu et se plaque a gauche (mesure du 15/08 : piste de 626px dans un inner
   de 1270, marge gauche 0 / droite 644). Meme piege que les couleurs ci-dessus. */
.magnesium-landing .gbs-trust-inner{display:grid;justify-content:normal;justify-items:center;gap:22px;text-align:center}
.magnesium-landing .gbs-trust-title{color:var(--green-dark);letter-spacing:-.025em}
.magnesium-landing .gbs-trust-marks{gap:10px 28px}
.magnesium-landing .gbs-trust-marks span{min-height:44px;color:#35433d;font-size:12px;font-weight:650}
.magnesium-landing .gbs-trust-marks svg{color:var(--green)}
.magnesium-landing .keto-stat{padding:24px;min-height:190px;border:0}
.magnesium-landing .keto-stat:nth-child(1){background:linear-gradient(145deg,var(--mag-plum-deep),var(--mag-plum));color:#fff}
.magnesium-landing .keto-stat:nth-child(2){background:linear-gradient(145deg,var(--mag-amber-soft),#e8bd8d);color:#182019}
.magnesium-landing .keto-stat:nth-child(3){background:linear-gradient(145deg,#e4eadf,#b8c5ae);color:#182019}
.magnesium-landing .keto-use-shell{grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,78px);align-items:stretch;border:0;border-radius:25px;background:var(--mag-plum-deep)}
.magnesium-landing .keto-use-media{margin:16px 40px;min-height:540px;background:#c8a780}
.magnesium-landing .gbs-routine{background:var(--ivory)}
.magnesium-landing .mag-review-card{padding:24px;border-color:rgba(16,37,28,.14);border-radius:19px}
.magnesium-landing .mag-review-card:nth-child(odd){background:#f7efe5}
.magnesium-landing .mag-review-card:nth-child(even){border-color:rgba(16,37,28,.14);background:var(--mag-plum)}
.magnesium-landing .mag-final-shell{grid-template-columns:minmax(0,1fr) min(350px,29vw);gap:30px;padding:53px 58px;border:0;border-radius:34px;background:linear-gradient(115deg,var(--mag-plum-deep),var(--mag-plum))}
.magnesium-landing .mag-seo{padding-block:80px;background:linear-gradient(var(--paper),#f4f0e8)}

/* --- Responsif : seuils du template (900 / 760 / 700 / 640 / 400), pas ceux du generique
   (1100 / 900 / 480). Les regles ci-dessus vivent HORS media query : par ordre de source elles
   battent les media queries generiques declarees plus haut dans le fichier, donc chaque repli
   doit etre redeclare ici — sans ce bloc, `minmax(380px,...)` et `minmax(470px,...)` debordent
   sous 470px (mesure : colonne de 470px dans un ecran de 375). */
.magnesium-summary h1{font-size:clamp(38px,3.75vw,52px)}
@media(max-width:900px){
  .magnesium-hero .gbs-product-hero{grid-template-columns:1fr;gap:35px}
  .magnesium-landing .gbs-gallery-main{height:430px;min-height:430px;border-radius:22px}
  .magnesium-landing .keto-use-shell{grid-template-columns:1fr;gap:0}
  .magnesium-landing .keto-use-media{min-height:420px}
  .magnesium-landing .mag-final-shell{grid-template-columns:1fr}
}
@media(max-width:760px){.magnesium-landing .mag-seo{padding-block:54px}}
@media(max-width:700px){
  .magnesium-summary h1{font-size:32px}
  .magnesium-landing .gbs-trust-strip{padding-block:28px}
  .magnesium-landing .gbs-trust-inner{gap:15px}
  .magnesium-landing .gbs-trust-marks{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
  .magnesium-landing .gbs-trust-marks span{justify-content:center;font-size:12px}
}
@media(max-width:640px){
  .magnesium-hero .gbs-product-hero{gap:22px}
  .magnesium-landing .gbs-gallery-main{height:clamp(300px,82vw,380px);min-height:clamp(300px,82vw,380px);border-radius:18px}
  .mag-gallery-note{display:none}
  .mag-zoom{inset-inline-end:10px;inset-block-end:9px;width:44px;padding:0;justify-content:center}
  .magnesium-summary .mag-lead{font-size:13px}
  .magnesium-landing .keto-stat{min-height:142px;padding:20px}
  .magnesium-landing .keto-use-media{min-height:300px}
  .magnesium-landing .mag-final-shell{padding:38px 23px}
}
/* --- Petits viewports : seuils et ORDRE du template --------------------------------
   A <=640px le template remonte tout le bloc d'achat au-dessus du chapo et des benefices
   (meta > titre > prix > offre > paliers > achat > reassurance > chapo > benefices > WhatsApp).
   C'est un changement d'ordre du tunnel sur mobile, pas une simple retouche visuelle : il se
   retire en supprimant ce seul bloc `order:`. */
@media(max-width:760px){
  .magnesium-summary .gbs-quantity-offer-grid{gap:6px}
  .magnesium-summary .gbs-quantity-offer-grid button{min-height:78px;padding:8px 5px;text-align:center}
  .magnesium-summary .gbs-quantity-offer-grid button>strong{font-size:14px}
}
@media(max-width:640px){
  .magnesium-summary{display:flex;flex-direction:column}
  .magnesium-summary>*{order:11}
  .magnesium-summary>.gbs-product-meta{order:1}
  .magnesium-summary>h1{order:2;margin:9px 0 8px}
  .magnesium-summary>.keto-price-panel{order:3}
  .magnesium-summary>.sale-status{order:4}
  .magnesium-summary>.gbs-quantity-offers{order:5}
  .magnesium-summary>form.gbs-buy{order:6}
  .magnesium-summary>.gbs-reassurance{order:7}
  .magnesium-summary>.mag-lead{order:8}
  .magnesium-summary>.gbs-keypoints{order:9}
  .magnesium-summary>.mag-whatsapp{order:10}
  .magnesium-summary .gbs-product-meta{row-gap:6px}
  .magnesium-summary .keto-price-panel{align-items:flex-start}
  .magnesium-summary .keto-price-panel p{max-width:155px;text-align:right}
  .magnesium-summary .mag-price ins{font-size:29px}
  .magnesium-summary .gbs-quantity-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .magnesium-summary .mag-lead{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
  .magnesium-landing .gbs-reassurance>span{min-height:44px;align-items:flex-start;gap:4px;padding:7px 5px}
  .magnesium-landing .gbs-reassurance svg{width:12px;height:12px;flex-basis:12px}
  .magnesium-landing .mag-whatsapp{margin-top:10px}
}
@media(max-width:480px){
  .magnesium-landing .gbs-buy{grid-template-columns:134px 1fr}
  .magnesium-landing .gbs-buy .gbs-button{padding-inline:23px;font-size:13px}
}
@media(max-width:400px){
  .magnesium-summary>*{order:1}
  .magnesium-summary>.mag-lead{order:2;margin-top:14px}
  .magnesium-summary>.gbs-reassurance{order:3}
  .magnesium-summary>.mag-whatsapp{order:5}
  .magnesium-landing .gbs-reassurance{grid-template-columns:minmax(0,1fr);gap:0}
  .magnesium-landing .gbs-reassurance>span{min-height:0;padding:9px 10px;text-align:left}
  .magnesium-landing .gbs-reassurance>span+span{border-top:1px solid var(--line)}
}


/* Shared section heading (snapshot / use / routine / reviews) */
.keto-section-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:22px 40px;align-items:end;margin-bottom:clamp(24px,3vw,34px)}
.keto-section-heading h2{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:800;line-height:1.03}
.keto-section-heading>p{margin:0;max-width:52ch;color:#686860;font-size:16px;line-height:1.5}
/* Sans texte secondaire, la grille reserverait encore 45 % de la largeur a une colonne vide. */
.keto-section-heading.keto-section-heading--solo{display:block}

/* Snapshot */
.keto-snapshot{padding-block:clamp(44px,5vw,82px)}
.keto-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.keto-stat{position:relative;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.keto-stat:nth-child(1){border-color:transparent;background:var(--deep);color:#fff}
.keto-stat:nth-child(2){border-color:transparent;background:var(--green);color:#fff}
.keto-stat:nth-child(3){background:var(--stone);color:var(--ink)}
.keto-stat strong{display:block;font-size:clamp(30px,3vw,38px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.keto-stat span{display:block;max-width:250px;margin-top:14px;font-size:13.5px;font-weight:600;line-height:1.45}

/* How to use */
.keto-use{padding-block:clamp(44px,5vw,82px)}
.keto-use-shell{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--deep);color:#fff}
.keto-use-media{position:relative;min-height:460px;overflow:hidden;isolation:isolate;background:#25332c}
.keto-use-media picture{display:block;width:100%;height:100%}
.keto-use-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%}
.keto-use-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,48px)}
.keto-use-copy .gbs-eyebrow{color:var(--gold)}
.keto-use-copy h2{margin:8px 0 20px;font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.keto-steps{display:grid}
.keto-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;border-block-start:1px solid rgba(255,255,255,.14);padding:16px 0}
.keto-step>span{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;color:var(--deep);background:var(--gold);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.keto-step h3{margin:0;font-size:15px}
.keto-step p{margin:4px 0 0;color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.5}
.keto-use-warning{margin:18px 0 0;color:rgba(255,255,255,.68);font-size:12.5px;line-height:1.55}

/* Complementary routine — les dix regles `.mag-routine*` vivaient ici : cartes VERTICALES,
   media en 5/4, sur-etiquette de marque et un lien « Voir la fiche actuelle » en pied. Elles
   habillaient la seule surface du site ou le meme titre (« Compléter seulement selon votre
   besoin. ») ne menait pas au panier — il fallait quitter la landing pour acheter un des trois
   produits. La section rend desormais `gbs_routine_block_html()`, comme les 684 autres fiches,
   donc `.gbs-routine*` (plus haut dans ce fichier). Ne pas les reintroduire : le seul apport de
   la forme verticale etait la sur-etiquette de marque, et la rangee qu'elle occupait porte
   maintenant le prix et le bouton d'ajout. */
.magnesium-landing .gbs-routine{padding-block:clamp(40px,5vw,80px)}

/* Reviews */
.mag-reviews{padding-block:clamp(44px,5vw,82px)}
/* Maconnerie, meme raison que sur la landing Regaine : une grille egalisait la hauteur d'une
   rangee entiere sur sa carte la plus haute. `min-height` saute avec elle, la hauteur venant
   desormais du contenu. */
.mag-review-grid{columns:2;column-gap:16px;max-width:920px}
.mag-review-card{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--white);break-inside:avoid}
/* Carte sombre en alternance, et non plus a la position 2 : la grille etait une composition de
   DEUX cartes ecrites en dur. Depuis qu'elle est alimentee par la base elle en porte autant que
   le produit a d'avis, et un accent fige sur la 2e laissait toutes les suivantes uniformes. */
.mag-review-card:nth-child(even){border-color:transparent;background:var(--deep);color:#fff}
.mag-review-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.mag-review-product{color:#686860;font-size:12px}
.mag-review-card:nth-child(even) .mag-review-product,.mag-review-card:nth-child(even) .mag-review-author span{color:rgba(255,255,255,.7)}
.mag-review-card blockquote{margin:0;font-size:15px;line-height:1.55}
/* Photo ENTIERE, jamais recadree (cf. la note de .regaine-review-photo). */
.mag-review-photo{margin:0;display:flex;justify-content:center}
.mag-review-photo a{display:block;max-width:100%;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--stone);cursor:zoom-in;transition:border-color .18s ease}
.mag-review-photo a:hover,.mag-review-photo a:focus-visible{border-color:var(--deep)}
.mag-review-card:nth-child(even) .mag-review-photo a{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
/* `width:auto` : le cadre epouse la photo au lieu de la letterboxer. Une photo portrait
   dans une boite pleine largeur laissait 75 px de bandes de chaque cote. */
.mag-review-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:400px}
.mag-review-author{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.mag-review-author strong{display:block;font-size:14px}
.mag-review-author>div span{color:#686860;font-size:12.5px}
.mag-verified{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px}
.mag-review-card:nth-child(2) .mag-verified{color:var(--gold)}

/* Imported SEO / description + FAQ */
.mag-seo{padding-block:clamp(44px,5vw,82px);background:var(--stone)}
.mag-seo-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.mag-seo-aside{position:sticky;top:104px}
.mag-seo-title{margin:10px 0 14px;font-size:clamp(26px,2.4vw,36px);font-weight:800;line-height:1.06}
.mag-seo-aside>p{color:#686860;font-size:14px;line-height:1.6}

/* Closing CTA */
.mag-final{padding-block:clamp(40px,4.6vw,74px)}
.mag-final-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 40px;align-items:center;padding:clamp(26px,3.4vw,48px);border:1px solid var(--line);border-radius:28px;background:var(--deep);color:#fff}
.mag-final-shell h2{margin:0 0 8px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.mag-final-shell>div>p{margin:0;color:#cdd9d1;font-size:15px;font-variant-numeric:tabular-nums}
.mag-final-add{justify-self:start;min-height:56px;background:var(--white);color:var(--deep);border-color:var(--white)}
.mag-final-add span{font-variant-numeric:tabular-nums}

/* Sticky dock (reuses .gbs-buy-dock) */
.mag-dock .price{font-variant-numeric:tabular-nums}

/* Responsive */
@media(max-width:1000px){
  .keto-section-heading,.keto-use-shell,.mag-final-shell{grid-template-columns:1fr}
  .keto-use-shell{gap:0}
  .keto-use-media{min-height:340px}
  .mag-seo-grid{grid-template-columns:1fr}
  .mag-seo-aside{position:static;max-width:560px}
  .mag-review-grid{columns:1}
  .mag-review-photo img{max-height:320px}
}
@media(max-width:640px){
  .mag-container{width:min(100% - 28px,760px)}
  .keto-stat-grid{grid-template-columns:1fr}
  .keto-price-panel p{text-align:start}
  .mag-final{padding-bottom:100px}
}

/* ==================================================================== */
/* Shared "tier A+" enriched product renderer (9 groups + AR twins).    */
/* template-parts/aplus-product.php. The hero reuses the generic .gbs-*  */
/* primitives (variants / offer-quantity / buy form / dock); these rules */
/* only add the A+ sections + accents. The prototype's per-theme         */
/* plum/amber palette is dropped for the theme's single green/gold       */
/* accent (.theme-* stays a semantic hook, intentionally unstyled).      */
/* ==================================================================== */
/* `line-height` : le prototype laisse `normal` sur body et declare une hauteur de
   ligne partout ou elle compte ; base.css pose 24px sur body. 47 des 217 ecarts
   mesures venaient de cette seule cause. On corrige sur la classe de page et NON
   sur body : base.css est transverse (accueil, catalogue, panier) et partage avec
   d'autres chantiers. Meme patron que `.magnesium-landing`. */
.aplus-product{line-height:normal;color:var(--ink);padding:18px 0 96px}
.aplus-container{width:min(1320px,calc(100% - 48px));margin-inline:auto}
.aplus-product h2{letter-spacing:-.025em}
.aplus-stars{color:var(--gold);letter-spacing:1.5px;white-space:nowrap}

/* Fil d'Ariane : rendu par le rendu generique (`woocommerce_breadcrumb()` dans
   `single-product.php`) mais absent du tier A+ jusqu'ici. Meme geometrie que `.breadcrumbs`
   du prototype. */
.aplus-product .woocommerce-breadcrumb{margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:12px;line-height:normal}
.aplus-product .woocommerce-breadcrumb a{display:inline-flex;min-height:44px;align-items:center;color:inherit;text-underline-offset:4px}

/* Hero accents (layered onto reused .gbs-product-hero / .gbs-product-summary) */
/* Retrait HAUT a zero, volontairement dissymetrique. Ce `padding-block` a ete copie de
   `.regaine-hero` / `.magnesium-hero`, deux landings qui ne rendent AUCUN fil d'Ariane et
   dont l'article ne porte pas de `padding-top` : le retrait haut y etait le seul espace
   entre l'en-tete et la grille du hero. Le gabarit A+ a ensuite fait entrer son fil d'Ariane
   DANS `.aplus-hero` (`template-parts/aplus-product.php`, en frere de `.gbs-product-hero`),
   et ce retrait s'est donc retrouve AU-DESSUS du fil, empile sur les 18px de
   `.aplus-product{…padding:18px 0 96px}` : 18 + 49 = 67px de vide sous l'en-tete a 1440px,
   contre 20px sur le rendu generique et 18px au prototype (`.product-page{padding-top:18px}`).
   Ces 18px et les 14px de `.aplus-product .woocommerce-breadcrumb` sont deja les ports EXACTS
   du prototype — c'est bien ce retrait-ci qui etait en trop. Le retrait BAS reste : il separe
   le hero de la bande de confiance qui suit. Recit complet dans le message de `f9846329`. */
.aplus-hero{padding-block:0 clamp(24px,3.4vw,52px)}
.aplus-hero .gbs-gallery{top:104px}
.aplus-gallery-badge{position:absolute;z-index:2;inset-block-start:18px;inset-inline-start:18px;padding:8px 14px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.aplus-zoom{position:absolute;z-index:2;inset-block-end:16px;inset-inline-end:16px;display:inline-flex;min-height:44px;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.91);color:var(--ink);font-size:12px;font-weight:800;pointer-events:none;box-shadow:0 4px 12px rgba(20,44,35,.12)}
.aplus-zoom svg{width:15px;height:15px}
.aplus-summary .aplus-lead{margin:14px 0 18px;max-width:630px;color:var(--muted);font-size:14px;line-height:1.55}
.aplus-price{font-variant-numeric:tabular-nums}

/* Premier ecran : les primitives `.gbs-*` sont partagees avec le rendu generique,
   donc chaque alignement est SCOPE a `.aplus-product`. Mesures du 15/08 contre le
   prototype (chapo, kicker, pastilles de format, champ quantite, bouton zoom).
   La grille du hero porte a elle seule six ecarts derives : colonnes, puces,
   rangee d'achat, reassurances et pastilles de format en heritent tous. */
.aplus-product .gbs-product-hero{grid-template-columns:minmax(0,1fr) minmax(470px,.98fr)}
.aplus-product .gbs-product-summary h1{max-width:740px;line-height:1.01}
.aplus-product .aplus-lead{padding-inline-end:7px;margin:0}
/* Le `>` est VOLONTAIRE : ne viser que le montant SEUL, jamais ceux loges dans <del>/<ins>.
   Sans lui, la regle mettait en bloc les DEUX montants d'un produit en promo, et l'espace
   entre `</del>` et `<ins>` formait alors sa PROPRE ligne, au line-height du conteneur.
   Mesure du 2026-08-16 sur /produit/propolis-maroc/ : barre a y=535 (h 22), prix a y=588,
   soit 31 px de vide (= 28 x 1.1) dans un bloc de 89 px — et le `margin-inline-end:8px` de
   `.gbs-product-price del` rendu inerte, un montant en bloc occupant les 625 px de colonne.
   Apres correctif : bloc de 31 px, les deux montants sur la meme ligne a 14 px d'ecart,
   ce que la regle de base dessinait depuis toujours.
   Le cas du montant unique (hors promo, ou palier sans remise) garde son bloc : il y est
   enfant DIRECT de `.gbs-product-price`. */
.aplus-product .gbs-product-price>.woocommerce-Price-amount{display:block;line-height:normal}
.aplus-product .gbs-buy .qty{padding:0}
.aplus-product .gbs-reassurance>span{color:var(--ink)}
.aplus-product .gbs-thumbs{gap:8px}
.aplus-details .gbs-eyebrow{color:#174f3c}
.aplus-product .gbs-product-meta{gap:7px;color:var(--ink);font-size:inherit;font-weight:inherit}
/* La pastille de stock declare sa propre typo chez le prototype ; sans cette regle
   elle heritait des 16px/400 du conteneur qu'on vient d'aligner. */
.aplus-product .gbs-product-meta .is-stock{display:inline-flex;min-height:32px;align-items:center;gap:7px;color:var(--green);font-size:12px;font-weight:800}
.aplus-product .gbs-product-meta .is-stock:before{margin-inline-end:0}
/* Les puces declarent leur typo sur le <li> et non sur le <ul> (le prototype laisse
   le conteneur heriter) ; rendu identique, mesure alignee. */
.aplus-product .gbs-keypoints{font-size:16px;font-weight:400;line-height:normal}
.aplus-product .gbs-keypoints li{font-size:12px;font-weight:650;line-height:1.35}
/* Surtitres : le prototype les rend en inline-flex avec une gouttiere de 9px. */
.aplus-product .gbs-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:850}
/* Le cadre de la galerie : 590px de haut chez le prototype, 530 dans le theme —
   l'ecart se propageait a l'image (561x537 attendus contre 528x466). */
/* La GEOMETRIE de cette carte est desormais celle du gabarit standard (product.css:3) :
   `min(590px,62vw)` / `min-height:490px` / img `88% x 91%`. Elle vivait ici seule depuis le
   17/08 alors que rien ne justifiait que la fiche standard soit plus petite — un packshot y
   est peint sur 88 % de la HAUTEUR de la carte, jamais de sa largeur, donc pour les 80 % du
   parc dont le ratio est sous 0,62 (mediane 0,514) la hauteur seule commande la taille du
   dessin. Mesure du 21/08 a 1440x900 sur /produit/inositol-femme/ : encre 231x466 -> 266x537,
   soit +15 %, avec un hero et un bas de formulaire d'achat INCHANGES au pixel (743,9 et
   794,9 avant comme apres) — la colonne d'achat commandait deja la hauteur du hero et la
   galerie tenait dans sa marge de 82 px. Ne reste ici que ce qui est propre au gabarit A+. */
.aplus-product .gbs-gallery-main{text-align:start}
.aplus-product .gbs-trust-inner{align-items:normal}
.aplus-product .gbs-trust-marks{align-items:center}
.aplus-product .gbs-variants{gap:9px;margin:18px 0}
.aplus-product .gbs-variants legend{margin-bottom:9px;font-size:13px;font-weight:800}
.aplus-product .gbs-variants a{min-height:70px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:16px;background:rgba(255,255,255,.66)}
.aplus-product .gbs-variants a.is-active{border:1px solid var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green)}
.aplus-product .gbs-buy .qty{width:44px;font-size:12px;font-weight:800}
/* `.gbs-product-whatsapp` est le meme lien rendu par le gabarit generique et par regaine :
   product.css est enqueue sur is_product() (functions.php), donc les trois gabarits le recoivent.
   Les packs (post type gbs_bundle) chargent bundle.css et n'ont PAS cette regle. */
.aplus-whatsapp,.gbs-product-whatsapp{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--green);font-size:14px}
.aplus-whatsapp svg,.gbs-product-whatsapp svg{color:var(--green)}

/* Story (lifestyle image + story title)
   La bande est PLEINE LARGEUR chez le prototype (`.aplus-v17-story{padding:78px 0;
   background}`), l'image portant seule un rayon de 26px. Le theme la rendait en
   panneau encastre de 1320px a coins arrondis : mesure du 15/08, section 627px
   contre 618px et colonne de texte 462px contre 545px. La teinte reste `var(--deep)`
   et non le `#10261d` du prototype — choix de maison assume (cf. en-tete de bloc). */
.aplus-story{padding-block:78px;background:var(--deep);color:#fff}
.aplus-story-shell{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);align-items:center;gap:clamp(34px,6vw,82px)}
.aplus-story-shell picture{display:block;overflow:hidden;border-radius:26px;aspect-ratio:3/2}
.aplus-story-shell img{display:block;width:100%;height:100%!important;max-width:100%;object-fit:cover;object-position:center}
.aplus-story-shell .gbs-eyebrow{color:var(--gold-soft)}
.aplus-story-title{margin:0;font-size:clamp(32px,4vw,54px);font-weight:700;line-height:1.02;letter-spacing:-.045em}

/* Comparatif de gamme A+ : le tableau est la sortie exclusive des configs `family`.
   La premiere colonne reste visible pendant le defilement, y compris en RTL grace a
   `inset-inline-start`. La colonne courante reprend le token d'etat doux du theme : aucun
   rouge Alpecin brut n'est invente pour une information fonctionnelle. */
.aplus-family{padding-block:82px;background:var(--ivory)}
.aplus-family-heading{max-width:760px;margin-bottom:clamp(24px,3vw,34px)}
.aplus-family-heading .gbs-eyebrow{margin-bottom:8px;color:var(--green-dark)}
.aplus-family-heading h2{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:800;line-height:1.03}
.aplus-family-heading>p{max-width:62ch;margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.65}
.aplus-family-hint{display:block;margin:0 0 12px;color:var(--green-dark);font-size:13px;font-weight:700}
.aplus-family-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:var(--white);box-shadow:0 16px 40px rgba(20,44,35,.06);overscroll-behavior-inline:contain;scrollbar-color:var(--line-strong) transparent}
.aplus-family-scroll:focus-visible{outline:3px solid var(--focus,var(--gold));outline-offset:4px}
.aplus-family-scroll table{width:100%;min-width:1120px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}
.aplus-family-scroll th,.aplus-family-scroll td{padding:16px;text-align:start;vertical-align:top;line-height:1.45}
.aplus-family-scroll tr>*+*{border-inline-start:1px solid var(--line)}
.aplus-family-scroll thead th{border-block-end:1px solid var(--line)}
.aplus-family-scroll tbody tr+tr>*{border-block-start:1px solid var(--line)}
.aplus-family-criterion{position:sticky;z-index:2;inset-inline-start:0;width:180px;background:var(--paper);color:var(--green-dark);font-weight:800}
.aplus-family-scroll thead .aplus-family-criterion{z-index:3;vertical-align:middle}
.aplus-family-product{background:var(--white);font-weight:400}
.aplus-family-product.is-current,.aplus-family-scroll td.is-current{background:var(--green-soft)}
.aplus-family-product>a{display:grid;min-height:174px;align-content:start;justify-items:center;gap:7px;color:inherit;text-align:center;text-decoration:none}
.aplus-family-product>a:focus-visible{outline:3px solid var(--focus,var(--gold));outline-offset:3px;border-radius:8px}
.aplus-family-product>a:hover strong{color:var(--green)}
.aplus-family-media{display:grid;width:86px;height:108px;place-items:center}
.aplus-family-media img{width:76px;height:104px!important;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(20,44,35,.14))}
.aplus-family-product strong{font-size:15px;font-weight:800;line-height:1.25;transition:color .15s}
.aplus-family-current{padding:3px 8px;border:1px solid var(--green);border-radius:999px;color:var(--green-dark);font-size:10.5px;font-weight:800;line-height:1.35}
.aplus-family-price{display:block;margin-top:10px;text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.aplus-family-price del{margin-inline-end:5px;color:var(--muted);font-size:12px;font-weight:600}
.aplus-family-price ins{text-decoration:none}
.aplus-family-stock{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:5px;color:var(--muted);font-size:11.5px;font-weight:700}
.aplus-family-stock:before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor}
.aplus-family-stock.is-available{color:var(--green)}
.aplus-family-scroll tbody td{color:var(--ink-soft);font-weight:600}

/* Related (config.related) */
/* Informations produit — accordeons resumant le contenu public.
   Section `.aplus-v17-details` du prototype (1 081 px), absente du portage initial :
   c'etait le plus gros bloc manquant de la fiche A+. Les resumes ne creent aucun
   titre : les `summary` sont des `span`, la hierarchie H1/H2/H3 publique reste celle
   du contenu importe rendu integralement plus bas (spec « Conservation SEO integrale »). */
.aplus-details{padding-block:82px;background:var(--ivory)}
.aplus-details-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);align-items:end;gap:34px;margin-bottom:30px}
.aplus-details-head>p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.aplus-details-title{margin:0;font-size:clamp(32px,4vw,54px);font-weight:700;line-height:1.02;letter-spacing:-.045em}
.aplus-details-accordions{display:grid;gap:9px;max-width:1060px;margin-inline:auto}
.aplus-details-accordions details{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.66)}
.aplus-details-accordions summary{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:20px;padding:0 22px;font-size:16px;font-weight:800;cursor:pointer;list-style:none}
.aplus-details-accordions summary::-webkit-details-marker{display:none}
.aplus-details-accordions summary svg{width:18px;height:18px;flex:none;transition:transform 180ms ease}
.aplus-details-accordions details[open] summary svg{transform:rotate(180deg)}
.aplus-details-panel{border-block-start:1px solid var(--line);padding:18px 22px 24px;color:var(--ink-soft);font-size:14px;line-height:1.65}
.aplus-details-panel a{display:inline-flex;min-height:46px;align-items:center}
.aplus-details-panel>:first-child{margin-top:0}
.aplus-details-panel>:last-child{margin-bottom:0}

/* Bande de confiance : le defaut `.gbs-trust-strip` est sombre et aligne a
   gauche ; le prototype la veut ivoire, centree, cerclee de filets d'un pixel
   (`.customer-trust-strip`). `.magnesium-landing .gbs-trust-strip` porte deja le meme
   correctif —
   le defaut est l'exception, pas la regle, mais il sert d'autres fiches en cours de
   chantier, donc on le surcharge ici plutot que de le refondre. */
/* `margin-block-start:0` neutralise l'air ajoute au defaut generique (voir « L'AIR AU-DESSUS »,
   section 2 plus bas) : ici la bande est ivoire et bordee d'un filet, donc deja detachee de ce qui
   la precede — lui ajouter 44px n'aurait separe que ce qui l'etait. A retirer le jour ou ce gabarit
   passe au meme traitement que la fiche generique. */
.aplus-product .gbs-trust-strip{border-block:1px solid rgba(16,37,28,.1);padding-block:34px;background:var(--ivory);color:var(--ink);margin-block-start:0}
.aplus-product .gbs-trust-inner{display:grid;justify-content:normal;justify-items:center;gap:22px;text-align:center}
.aplus-product .gbs-trust-title{color:var(--green-dark);font-weight:700;letter-spacing:-.025em}
.aplus-product .gbs-trust-marks{justify-content:center;gap:10px 28px}
.aplus-product .gbs-trust-marks span{min-height:44px;color:#35433d;font-size:12px;font-weight:650}
.aplus-product .gbs-trust-marks svg{color:var(--green)}

/* « Compléter seulement selon votre besoin » — cartes COMPACTES horizontales.
   Spec V21 : « trois cartes desktop […] média 104–120 px, texte sombre sur ivoire,
   titre sur deux lignes, prix lisible et bouton + de 44 px. Seul ce bouton est rond
   et vert. » Le theme rendait des cartes verticales de 458px de haut avec une image
   de 389x311 et un lien « Voir la fiche » : 761px de section contre 438px mesures le
   15/08. Le media et le titre restent deux liens vers la fiche (V25), le `+` est une
   action separee qui n'ouvre pas la fiche.

   Le prefixe etait `.aplus-related` : la surface n'existait que sur les 22 fiches du
   gabarit A+. Elle est desormais rendue par `gbs_routine_block_html()` sur les 685,
   d'ou `.gbs-routine` — une classe qui nomme ce qu'elle habille et non le seul gabarit
   qui la portait. Les regles sont GLOBALES et non scopees a `.gbs-routine` : la bande
   de bas de fiche (`.gbs-merch`) rend la meme grille sans la section qui l'enveloppe. */
.gbs-routine{padding-block:82px}
/* LA JONCTION avec la description, sur la fiche generique. Trois espaces s'y empilaient : les
   82px de padding bas ci-dessus, les 82px de `margin-top` de `.gbs-public-content` et les 72px
   de son padding interne — 236px mesures en 1440x900 entre la derniere carte et le premier mot
   de « Toutes les informations du produit », 156px en 375x812 (52+60+44). Les deux premiers ne
   separent RIEN : le degrade de `.gbs-public-content::before` demarre a #fffefa, la couleur
   exacte du body, donc la bande teintee n'a aucune arete haute a annoncer et l'oeil ne lit qu'un
   vide. Seul le padding interne survit — c'est la respiration du titre, dans la teinte.
   Resultat mesure : 115px en desktop, 74px en mobile.

   PORTEE. `.gbs-public-content` n'est rendue que par `single-product.php` : ni les landings
   (Regaine, Magnesium Glycinate), ni le gabarit A+, ni la bande de bas de fiche (`.gbs-merch`)
   ne portent cette section, et le selecteur exige l'adjacence — le padding de 82px reste donc
   la valeur par defaut partout ailleurs, y compris sur les fiches qui ne rendent aucun bloc de
   routine. Specificite (0,2,0) : les deux regles l'emportent sur `.gbs-routine{padding-block:52px}`
   du `@media(max-width:640px)` et sur `.gbs-public-content{margin-top:60px}` du 900px, sans
   `!important` et quel que soit l'ordre. Sans `:has()`, seule la marge tombe (154px au lieu de
   236px) : la degradation est gracieuse, jamais une regression. */
.gbs-routine:has(+ .gbs-public-content){padding-block-end:clamp(30px,3vw,44px)}
.gbs-routine + .gbs-public-content{margin-block-start:0}
.gbs-routine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:14px}
/* La grille est calibree pour TROIS cartes ; le moteur en rend parfois moins. Mesure du
   2026-08-16 sur les 379 fiches FR : 361 sortent six suggestions (donc 3 en haut et 3 en
   bas), 11 en sortent 1 a 5 et 7 aucune. Sans ces deux regles, la tranche courte etirait
   une carte sur un tiers de la largeur en laissant deux colonnes vides — une grille a
   trous se lit comme un rendu casse, pas comme une offre plus courte. */
.gbs-routine-grid:has(.gbs-routine-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.gbs-routine-grid:has(.gbs-routine-card:only-child){grid-template-columns:minmax(0,min(520px,100%))}
/* L'en-tete du bloc : reprise a l'identique de `.keto-section-heading`, dont il partageait
   le markup quand il ne vivait que sur le gabarit A+ et la landing magnesium. Il a sa
   classe propre parce qu'il se rend maintenant sur des pages qui n'ont aucun `keto-*`. */
/* En-tête du bloc de routine : `display:block` depuis le retrait de l'avertissement de cumul
   (2026-08-16). C'était une grille 2 colonnes `1.1fr .9fr` — col 1 la puce + le `<h2>`, col 2 le
   `<p>` d'avertissement. Le `<p>` parti, la grille confinait le titre à ~55 % de la largeur avec
   ~45 % de vide permanent à droite, et un `clamp(30px,3.4vw,52px)` qui recasse d'autant : le
   défaut EXACT déjà mesuré sur `.gbs-merch header` (voir plus haut, 425 px de vide), et le même
   remède. `align-items:end` et `gap` n'avaient plus rien à aligner ni à espacer.
   Corollaire : la ligne `grid-template-columns:1fr` du `@media(max-width:1000px)` a été retirée. */
.gbs-routine-heading{display:block;margin-bottom:clamp(24px,3vw,34px)}
.gbs-routine-heading h2{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:800;line-height:1.03}
.gbs-routine-heading .gbs-eyebrow{margin-bottom:8px}
.gbs-routine-card{display:grid;min-width:0;grid-template-columns:120px minmax(0,1fr);overflow:hidden;border:1px solid rgba(20,57,43,.12);border-radius:20px;background:rgba(255,253,248,.82);transition:border-color .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){.gbs-routine-card:hover{border-color:var(--green);box-shadow:0 16px 35px rgba(20,44,35,.09)}}
.gbs-routine-media{display:grid;width:100%;min-height:164px;place-items:center;border:0;padding:10px;background:rgba(219,224,211,.76);text-align:center}
.gbs-routine-media img{width:104px;height:140px;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(25,45,35,.16))}
.gbs-routine-card>div{display:grid;min-width:0;align-content:center;gap:7px;padding:15px}
.gbs-routine-card a{color:inherit;text-decoration:none}
.gbs-routine-card>div>a{display:flex;min-height:44px;align-items:center}
.gbs-routine-card a strong{display:-webkit-box;overflow:hidden;font-size:14px;font-weight:700;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.gbs-routine-card>div>div{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:10px}
.gbs-routine-price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.gbs-routine-price del{margin-inline-end:6px;color:#8a837d;font-size:13px;font-weight:600}
.gbs-routine-price ins{text-decoration:none}
.gbs-routine-add{display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;border:0;border-radius:50%;color:#fff;background:var(--green);cursor:pointer}
.gbs-routine-add svg{width:17px;height:17px}
/* Les trois etats que le bouton prend vraiment. Ils manquaient parce que le markup manquait :
   ces regles n'avaient rien a habiller. `storefront.js` pose `aria-busy` pendant l'aller-retour
   et `is-added` apres, sur TOUT `[data-gbs-quick-add]` — on s'aligne sur ce contrat plutot que
   d'en inventer un. */
.gbs-routine-add:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.gbs-routine-add[aria-busy="true"]{opacity:.62;cursor:progress}
.gbs-routine-add.is-added{background:var(--green-dark)}
/* La carte n'est plus un lien : c'est son titre qui prend le focus, la bordure suit. */
.gbs-routine-card:has(a:focus-visible){border-color:var(--green)}

/* « Souvent commandé avec » — le duo, dans la colonne d'achat.
   ─────────────────────────────────────────────────────────────────────────────────
   POURQUOI IL EST PLUS PLAT QUE `.gbs-quantity-offers`. La colonne porte deja la rangee
   meta, un h1 qui monte a deux lignes, jusqu'a 4 keypoints, le prix, le bandeau promo et,
   sur 4 fiches A+ sur 10, un panneau borde de ~200px. Un TROISIEME panneau de meme poids
   et le bouton d'achat cesse d'etre le point d'arrivee de la colonne. D'ou : un seul filet,
   une seule rangee, 13px de padding — ~154px contre 205 pour les paliers.
   AUCUNE classe `gbs-buy` dans ce bloc : `syncBuyDock()` mesure le PREMIER
   `.gbs-product-summary .gbs-buy` du DOM, et ce bloc precede le formulaire.
   `.gbs-product-summary` est en flux bloc (`min-width:0;padding-top:3px`) : les marges
   verticales se fondent avec celles des voisins, 14px de part et d'autre quoi qu'il arrive.
   Aucun offset positionne ici — c'est la facon la plus sure de ne pas opposer une propriete
   physique a son equivalent logique (`npm run check:gbs-css-insets`). */
.aplus-attach{margin:14px 0;padding:13px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.aplus-attach__title{display:block;margin:0 0 11px;font-size:13px;font-weight:800;line-height:1.3}
/* `auto` sur la colonne prix, `minmax(0,1fr)` sur le nom : la geometrie est identique de
   327px (mobile) a 625px (1440), donc pas de saut de hauteur d'une fiche a l'autre selon la
   longueur du nom. Pas de `flex-wrap` non plus, pour la meme raison. */
.aplus-attach__row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px}
/* Vignette PORTRAIT, image dimensionnee en PIXELS.
   Mesure du 2026-08-16 sur /produit/nizoral-2/ : `width:84%;height:84%` rendait l'image en
   37x94 dans une boite de 44x44 en `overflow:hidden` — 50 px de flacon coupes, le produit
   n'etait visible qu'a moitie.
   LA CAUSE N'EST PAS `object-fit`, QUI S'APPLIQUE BIEN (valeur calculee `contain`). C'est le
   pourcentage de HAUTEUR qui ne se resout pas : sur un item de grille non etire
   (`place-items:center`), la hauteur de zone est traitee comme indefinie, `height` retombe sur
   `auto`, et l'image reprend son ratio a partir de sa largeur — 42 px de large donnaient
   127 px de haut pour 60 disponibles. Verifie en direct : la meme hauteur posee en PIXELS rend
   54 px. C'est pour cela que tout le reste du theme dimensionne ces vignettes en pixels
   (`.aplus-related-media img` fait 104x140) et ne connait pas ce defaut.
   La boite est plus HAUTE que large parce que les packshots le sont : le cutout du serum fait
   219x663, soit un ratio de 0,33. Dans un carre de 44, `contain` n'en laissait que 15 px de
   large ; dans 40x52 centres il en reste 17, et surtout le flacon est ENTIER. */
.aplus-attach__media{display:grid;width:48px;height:60px;place-items:center;overflow:hidden;border-radius:11px;background:var(--ivory)}
.aplus-attach__media img{width:40px;height:52px;object-fit:contain}
.aplus-attach__name{display:grid;min-width:0;gap:2px}
.aplus-attach__name a{display:block;min-width:0;color:inherit}
.aplus-attach__name strong{display:-webkit-box;overflow:hidden;font-size:13px;font-weight:700;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.aplus-attach__name a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
/* La ligne de preuve (« N fois avec ce produit sur 12 mois ») a ete RETIREE le 2026-08-16 :
   les comptes reels vont de 10 a 37 sur douze mois, et un nombre a deux chiffres se lit comme
   un aveu de faiblesse plutot que comme une preuve. Le seuil de 8 paires reste dans
   `gbs_pair_pick()` — le titre « Souvent commande avec » demeure donc adosse aux co-achats
   reels ; on cesse seulement d'imprimer le chiffre. Aucune regle ne subsiste ici : un
   selecteur orphelin est exactement ce que `.aplus-details*` a coute a ce fichier. */
/* `text-align:end` et non `right` : en RTL la colonne bascule et doit rester ferree du bon cote. */
.aplus-attach__price{display:grid;justify-items:end;gap:2px;text-align:end;font-variant-numeric:tabular-nums}
.aplus-attach__price strong{font-size:15px;font-weight:800;line-height:1.15}
.aplus-attach__price small{color:var(--muted);font-size:11.5px;font-weight:650;line-height:1.3;white-space:nowrap}
/* Une seule fiche A+ sur dix franchit le seuil : la ligne n'existe pas dans le DOM des neuf
   autres, plutot qu'un emplacement reserve qui couterait sa hauteur a tout le monde. */
.aplus-attach__ship{margin:10px 0 0}
.aplus-attach__ship .gbs-quantity-saving__ship{margin-inline-start:0}
/* OUTLINE, pas plein. Le vert plein de cette colonne appartient au bouton d'achat, 14px plus
   bas — et sous 900px le dock collant en pose un troisieme. Deux pastilles vertes pleines
   empilees et le visiteur ne sait plus laquelle achete le produit qu'il regarde. */
.aplus-attach__add{width:100%;min-height:44px;margin-block-start:12px;padding:11px 18px;font-size:13px}
.aplus-attach__add:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.aplus-attach__add[aria-busy="true"]{opacity:.62;cursor:progress}
/* Les DEUX libelles sont rendus par le serveur, le CSS revele celui de l'etat courant : aucune
   chaine ne vit dans le JS, donc aucune ne reste en francais sur /ar/ (`deploy.json` ne livre
   pas le .mo). Meme idiome que les variantes `[data-gbs-offer-for]` du dock. */
.aplus-attach__add-idle,.aplus-attach__add-done{display:inline-flex;align-items:center;gap:9px}
.aplus-attach__add-done{display:none}
.aplus-attach__add.is-added{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}
.aplus-attach__add.is-added .aplus-attach__add-idle{display:none}
.aplus-attach__add.is-added .aplus-attach__add-done{display:inline-flex}

/* Pack : bande pleine largeur ivoire (`.bundle-section.is-product` du prototype),
   et non panneau encastre a coins arrondis. Mesure du 15/08 : fond transparent,
   bordure 1px, rayon 30px et 48px de padding contre une bande ivoire de 96px. */
/* Trois classes : `.aplus-product .gbs-merch{margin-top:56px}` plus bas dans le
   fichier gagnait a specificite egale. */
/* 16/08 : cet habillage a ete pose sans porter l'IMBRICATION qui va avec. Le prototype fait de
   `.bundle-section.is-product` une section pleine largeur qui CONTIENT un `.container` ; le
   gabarit mettait la section DANS `.aplus-container`. Resultat mesure a 1440x900 : la bande
   s'arretait a x=60 w=1320 au lieu de x=0 w=1440, filet compris — un rectangle ivoire encastre
   au milieu d'une page blanche. Corrige dans template-parts/aplus-product.php, pas ici : aucune
   regle CSS ne peut rendre pleine largeur un enfant de conteneur centre.
   Effet de bord voulu du meme correctif : `.aplus-product .gbs-merch:last-of-type`
   (plus bas, meme specificite mais declare apres) ne matche plus la bande, qui a desormais
   `.aplus-seo` et `.aplus-final` pour freres — les 72px de marge basse parasites tombent. */
.aplus-product .gbs-merch.gbs-merch--bundle{width:auto;margin:0;padding:clamp(64px,7vw,96px) 0;border:0;border-block-start:1px solid var(--line);border-radius:0;background:var(--ivory)}
/* Le bouton d'ajout du pack. Il n'existe QUE sur la bande de merchandising d'une fiche produit
   (`gbs_bundle_card($bundle, true)`), jamais sur /packs ni sur le carrousel de l'accueil — et
   la regle est de toute facon inatteignable ailleurs : `product.css` n'est enqueue que sur
   `is_product()`, l'archive charge `bundle.css` et l'accueil `home.css`, qui portent chacun
   leur propre copie de `.gbs-bundle-card`.
   Il est FRERE du `<a>`, donc en flux bloc sous la carte : `display:flex` le rend de niveau
   bloc (`.gbs-button` est `inline-flex` et n'occuperait sinon que la largeur de son texte), et
   les 17px reprennent exactement le retrait de `.gbs-bundle-card>a`. Le `<a>` rend sa marge
   basse quand le bouton est la, sinon la carte gagnerait 17px de vide. */
.gbs-merch--bundle .gbs-bundle-card:has(.gbs-bundle-card__add)>a{padding-block-end:0}
.gbs-merch--bundle .gbs-bundle-card__add{display:flex;margin:15px 17px 17px}

/* Imported SEO / description + FAQ */
.aplus-seo{padding-block:clamp(44px,5vw,82px);background:linear-gradient(180deg,var(--paper),#f4f0e8)}
.aplus-seo-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.aplus-seo-aside{position:sticky;top:104px}
.aplus-seo-title{margin:10px 0 14px;font-size:clamp(26px,2.4vw,36px);font-weight:800;line-height:1.06}
.aplus-seo-aside>p{color:#686860;font-size:14px;line-height:1.6}

/* Closing CTA */
.aplus-final{padding-block:clamp(40px,4.6vw,74px)}
.aplus-final-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 40px;align-items:center;padding:clamp(26px,3.4vw,48px);border:1px solid var(--line);border-radius:28px;background:var(--deep);color:#fff}
.aplus-final-shell h2{margin:0 0 8px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.aplus-final-shell>div>p{margin:0;color:#cdd9d1;font-size:15px;font-variant-numeric:tabular-nums}
.aplus-final-add{justify-self:start;min-height:56px;background:var(--white);color:var(--deep);border-color:var(--white)}
.aplus-final-add span{font-variant-numeric:tabular-nums}

/* Sticky dock (reuses .gbs-buy-dock) */
.aplus-dock .price{font-variant-numeric:tabular-nums}

/* Responsive */
/* Le repli du hero est declare plus bas dans ce fichier par un autre chantier,
   avec le meme correctif mesure a 390px (119px de debordement) : on ne le redeclare
   pas ici. Ce bloc porte les TROIS AUTRES primitives scopees, jamais auditees. */
@media(max-width:900px){
  /* Meme mecanisme, audite sur TOUTES les primitives scopees plus haut et non sur la
     seule grille : `.aplus-product .gbs-gallery-main`, `.aplus-product .gbs-thumbs` et
     `.aplus-product .gbs-variants a` tuaient eux aussi les valeurs mobiles de base
     (galerie figee a 590px de haut sous 900px, image a 91 % au lieu de 92 %). On rend
     ici au theme ses propres valeurs, a la meme specificite. */
  .aplus-product .gbs-gallery-main{height:clamp(300px,82vw,380px);min-height:clamp(300px,82vw,380px)}
  .aplus-product .gbs-gallery-main>img{width:90%;height:92%!important}
  .aplus-product .gbs-thumbs{gap:6px}
  /* Le duo garde ses trois pistes : 44 + 12 + nom + 12 + prix. A 327px de colonne le nom
     recoit ~150px, soit deux lignes de 13px — ce que le clamp borne deja. Le bouton reste
     OUTLINE : dans le meme ecran, le dock collant rend une pastille verte PLEINE. */
  .aplus-attach{padding:12px;border-radius:14px}
  .aplus-attach__row{gap:10px}
  .aplus-attach__price small{white-space:normal}
}
@media(max-width:480px){
  .aplus-product .gbs-variants a{padding:10px}
  .aplus-attach__title{font-size:12.5px}
  .aplus-attach__name strong{font-size:12.5px}
  .aplus-attach__price strong{font-size:14px}
}
@media(max-width:1000px){
  .aplus-story-shell,.aplus-seo-grid,.aplus-final-shell{grid-template-columns:1fr}
  .aplus-story-shell picture{order:2}
  .aplus-details-head{grid-template-columns:1fr;gap:14px}
  .aplus-seo-aside{position:static;max-width:560px}
  .aplus-seo .gbs-entry-content{max-width:none}
  /* Le prototype passe les recommandations en carrousel scroll-snap sous 1000px
     (spec V21 : « carrousel avec apercu sur mobile »), pas en colonne unique. */
  .gbs-routine-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .gbs-routine-grid::-webkit-scrollbar{display:none}
  .gbs-routine-card{min-width:min(82vw,390px);scroll-snap-align:start}
}
@media(max-width:640px){
  /* 32px de gouttiere et non 30 : a 375px le prototype mesure 343, le theme 345 —
     et cet ecart de 2px se propageait a huit surfaces (hero, puces, reassurances,
     bande de confiance, story, informations produit). */
  .aplus-container{width:min(100% - 32px,760px)}
  /* Les medias Woo restent tous accessibles au pouce : un rail unique remplace les anciennes
     exceptions par produit et conserve l'ordre natif de la galerie. */
  .aplus-product .gbs-thumbs{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(70px,22vw,82px);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:none;padding-bottom:4px}
  .aplus-product .gbs-thumbs::-webkit-scrollbar{display:none}
  .aplus-product .gbs-thumbs button{scroll-snap-align:start}
  .aplus-zoom{width:44px;padding:0;justify-content:center}
  .aplus-zoom>span:last-child{display:none}
  .aplus-product .gbs-trust-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
  .aplus-product .gbs-trust-marks span{justify-content:center}
  .aplus-product .woocommerce-breadcrumb{margin-bottom:10px;gap:5px;font-size:11px}
  .aplus-story,.aplus-details,.aplus-family,.gbs-routine{padding-block:52px}
  .aplus-story-title,.aplus-details-title,.aplus-family-heading h2{font-size:30px}
  .aplus-family-scroll{border-radius:17px}
  .aplus-family-scroll table{min-width:980px}
  .aplus-family-scroll th,.aplus-family-scroll td{padding:12px}
  .aplus-family-criterion{width:155px}
  .aplus-family-product>a{min-height:158px}
  .aplus-family-media{height:94px}
  .aplus-family-media img{height:90px!important}
  .aplus-details-accordions summary{min-height:56px;padding-inline:16px;font-size:14px}
  .aplus-details-panel{padding:15px 16px 19px;font-size:13px}
  .gbs-routine-card{min-width:calc(88vw - 24px);grid-template-columns:105px minmax(0,1fr)}
  .gbs-routine-media{min-height:148px}
  .gbs-routine-media img{width:90px;height:124px}
  .aplus-final{padding-bottom:100px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ecarts fermes le 14/08 contre docs/design/templates/german-beautyshop-storefront.html
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Prix du dock par palier de quantite.
   Mesure AVANT : clic sur « 3 unités −7 % » → colonne d'achat 1 113 DH, CTA 1 113 DH,
   dock 399 DH. Le PHP rend desormais les quatre totaux ; storefront.js pose deja
   `.is-active` sur le palier choisi, ce selecteur revele le total correspondant.
   Meme patron que `.gbs-quantity-saving`, applique depuis body car le dock est un
   FRERE de l'article, hors de `.gbs-quantity-offers`. */
.gbs-dock-price>[data-gbs-offer-for]{display:none}
body:not(:has(.gbs-quantity-offers [data-gbs-offer].is-active)) .gbs-dock-price>[data-gbs-offer-for="1"]{display:inline}
body:has(.gbs-quantity-offers [data-gbs-offer="1"].is-active) .gbs-dock-price>[data-gbs-offer-for="1"],
body:has(.gbs-quantity-offers [data-gbs-offer="2"].is-active) .gbs-dock-price>[data-gbs-offer-for="2"],
body:has(.gbs-quantity-offers [data-gbs-offer="3"].is-active) .gbs-dock-price>[data-gbs-offer-for="3"],
body:has(.gbs-quantity-offers [data-gbs-offer="4"].is-active) .gbs-dock-price>[data-gbs-offer-for="4"]{display:inline}
.gbs-buy-dock .price,.gbs-dock-price{font-variant-numeric:tabular-nums}
/* 1bis. Meme mecanique pour le CTA du dock des landings : un bouton PAR palier, un seul
   visible. Le bouton unique portait `data-quantity="1"` en dur — un visiteur ayant choisi
   « 3 unités » puis clique sur la barre du bas ajoutait UNE unite au prix plein. */
/* 6. Seconde pastille de galerie (bestseller) sous la pastille de duree, comme les deux
   pastilles du prototype. Le decalage evite le chevauchement. */
.regaine-gallery-badge.is-bestseller{inset-block-start:58px;background:var(--deep)}
.gbs-dock-actions{display:contents}
.gbs-dock-actions>[data-gbs-offer-for]{display:none}
body:not(:has(.gbs-quantity-offers [data-gbs-offer].is-active)) .gbs-dock-actions>[data-gbs-offer-for="1"]{display:inline-flex}
body:has(.gbs-quantity-offers [data-gbs-offer="1"].is-active) .gbs-dock-actions>[data-gbs-offer-for="1"],
body:has(.gbs-quantity-offers [data-gbs-offer="2"].is-active) .gbs-dock-actions>[data-gbs-offer-for="2"],
body:has(.gbs-quantity-offers [data-gbs-offer="3"].is-active) .gbs-dock-actions>[data-gbs-offer-for="3"],
body:has(.gbs-quantity-offers [data-gbs-offer="4"].is-active) .gbs-dock-actions>[data-gbs-offer-for="4"]{display:inline-flex}

/* 5. Le panneau merchandising des landings reprend le gabarit du generique. */
.magnesium-landing .gbs-merch,.aplus-product .gbs-merch,.regaine-landing .gbs-merch{margin-top:56px}
.regaine-landing .gbs-merch:last-of-type,.magnesium-landing .gbs-merch:last-of-type,.aplus-product .gbs-merch:last-of-type{margin-bottom:72px}

/* 2. Bande de confiance (customerTrustMarkup du prototype). Presente sur les quatre
   fiches du prototype, elle n'existait que sur la landing Regaine. Reprend la mise en
   forme deja validee de `.regaine-trust`. */
/* L'AIR AU-DESSUS. Mesure du 2026-08-17 en 1440x900 sur /produit/magnesium-citrate/ : la bande
   demarrait a `0px` du bas des vignettes (le hero finit exactement ou finit `.gbs-thumbs`, la
   colonne gauche etant la plus haute) alors qu'elle a `82px` d'air en dessous — ceux du
   `padding-block` de `.gbs-routine`. Un aplat `--deep` pleine largeur colle au hero d'un cote et
   respire de l'autre ne se lit pas comme un ruban qui cloture le hero, mais comme un bloc qui a
   glisse. La valeur reprend celle que `.magnesium-landing .gbs-trust-strip` porte deja (44px), en
   clamp pour ne pas ecraser le petit ecran : 43px en 1440, 28px en 375.
   Les deux autres porteurs sont preserves : la landing magnesium garde ses 44px par son shorthand
   `margin` de specificite (0,2,0), et le gabarit A+ neutralise explicitement juste au-dessus — sa
   bande ivoire est deja detachee par un `border-block`, elle n'a pas le defaut qu'on corrige ici.
   `home.css` declare la meme classe pour une carte tout autre, mais `product.css` n'est enqueue que
   sur `is_product()` et `home.css` que sur `is_front_page()` (functions.php:36) : sans recouvrement. */
.gbs-trust-strip{background:var(--deep);color:#fff;padding-block:clamp(22px,3vw,34px);margin-block-start:clamp(28px,3vw,44px)}
.gbs-trust-inner{width:min(1320px,calc(100% - 48px));margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px}
.gbs-trust-strip.is-contained .gbs-trust-inner{width:100%}
.gbs-trust-title{margin:0;font-size:clamp(18px,2vw,24px);font-weight:700}
.gbs-trust-marks{display:flex;flex-wrap:wrap;gap:10px 22px}
.gbs-trust-marks span{display:inline-flex;align-items:center;gap:8px;color:#e8efe9;font-size:13px}
.gbs-trust-marks svg{width:18px;height:18px;flex:none;color:var(--gold)}

/* 3. Notation : cinq etoiles comme le prototype, au lieu d'une seule glyphe. */
.gbs-product-meta .gbs-stars{color:var(--gold);letter-spacing:.5px}
.gbs-product-meta a{font-variant-numeric:tabular-nums}

/* 4. La bande de confiance suit le gabarit mobile du reste du theme. */
@media(max-width:640px){
  .gbs-trust-inner{width:min(100% - 30px,760px)}
}

/* =============================================================================
   5. Famille d'offres : la fiche du format d'entree vend aussi ses freres.
   /produit/minoxidil-maroc/ (16364, jumeau AR 18226) propose la cure de 3 flacons
   (6549 / 18356) sans quitter la page.

   Idiome maison : le serveur rend LES DEUX variantes de chaque surface, le CSS
   revele celle de l'option cochee. Une difference assumee avec le bloc des paliers
   de quantite : ici la variante par DEFAUT est visible SANS :has(). Un navigateur
   depourvu de :has() affiche donc la fiche telle qu'elle etait avant ce bloc, au
   lieu d'une colonne d'achat et d'un dock vides.

   On n'emploie PAS .gbs-dock-price ni .gbs-dock-actions : leurs regles masquent
   TOUT [data-gbs-offer-for] par presence d'attribut et ne revelent que les valeurs
   1..4 des paliers de quantite. Nos valeurs sont `single` et `pack3`.
   ============================================================================= */

/* 5.1 Selecteur. Gabarit de .gbs-variants (deux cartes), mais en <label> + radio
   natif : navigation aux fleches, groupe annonce par fieldset/legend, etat restaure
   au retour arriere, zero JS. Le <fieldset> reste en flux et la grille vit dans un
   div interne — un fieldset en display:grid est historiquement fragile, et
   min-inline-size:0 neutralise sa largeur minimale intrinseque, qui deborde sinon
   sous 400px. */
/* Sans `:has()`, AUCUNE bascule ne peut s'appliquer, alors que la mise en surbrillance de
   la carte (`:checked + label`) fonctionnerait : le visiteur verrait « 3 flacons » coche
   pendant que le prix, le CTA, le formulaire soumis et le dock resteraient sur 1 flacon —
   il achete 349 DH en croyant prendre la cure. On ne rend donc PAS le selecteur du tout
   dans ce cas : la fiche est alors exactement celle d'avant ce bloc. */
.gbs-offer-family{display:none;border:0;padding:0;margin:18px 0 14px;min-inline-size:0}
@supports selector(:has(*)){.gbs-offer-family{display:block}}
.gbs-offer-family>legend{display:block;width:100%;padding:0;margin-bottom:9px;font-size:13px;font-weight:600}
.gbs-offer-family__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gbs-offer-family__radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.gbs-offer-family__card{position:relative;min-height:88px;padding:13px;border:1px solid var(--line-strong);border-radius:15px;background:var(--white);display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:start;cursor:pointer;transition:border-color .12s ease,background-color .12s ease}
.gbs-offer-family__card:hover{border-color:var(--green)}
/* Selection en box-shadow inset et non en border:2px : .gbs-variants a.is-active
   passe de 1 a 2px et decale son contenu d'un pixel au clic. Ici, rien ne bouge. */
.gbs-offer-family__radio:checked+.gbs-offer-family__card{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--green-soft)}
/* var(--focus) n'existe PAS dans le base.css SERVI (il ne vit que dans une autre
   lignee du theme) : l'anneau prend l'accent vert, seule valeur garantie en ligne. */
.gbs-offer-family__radio:focus-visible+.gbs-offer-family__card{outline:2px solid var(--green);outline-offset:2px}
.gbs-offer-family__title{color:var(--muted);font-size:12px;font-weight:650;line-height:1.3}
.gbs-offer-family__price{font-size:16px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.gbs-offer-family__unit{color:var(--green-dark);font-size:12px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.gbs-offer-family__badge{align-self:start;margin-top:6px;padding:2px 8px;border:1px solid var(--green);border-radius:999px;color:var(--green);font-size:11px;font-weight:800;line-height:1.55;font-variant-numeric:tabular-nums}

/* 5.2 Grand prix. */
.gbs-offer-price{font-variant-numeric:tabular-nums}
.gbs-offer-price>[data-gbs-offer-for]{display:none}
.gbs-offer-price>[data-gbs-offer-for="single"]{display:inline}
.gbs-offer-price small{margin-inline-start:10px;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:0}
.gbs-product-summary:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-offer-price>[data-gbs-offer-for="single"]{display:none}
.gbs-product-summary:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-offer-price>[data-gbs-offer-for="pack3"]{display:inline}

/* 5.3 Formulaires empiles. visibility, et NON display:none : syncBuyDock()
   (storefront.js) mesure `.gbs-product-summary .gbs-buy`, le PREMIER du DOM. Un
   display:none lui rendrait un rectangle nul, donc « bloc d'achat hors ecran »,
   donc la barre collante surgirait alors qu'il est plein ecran. Empiles dans la
   meme cellule, les deux formulaires partagent la meme boite : la mesure reste
   juste quelle que soit l'option cochee, et la hauteur ne saute pas au changement.
   visibility:hidden retire aussi du parcours de tabulation et du hit-testing, donc
   la soumission implicite (Entree dans le champ quantite) ne peut viser que le
   formulaire visible. */
.gbs-offer-forms{display:grid}
.gbs-offer-forms>form.gbs-buy{grid-area:1/1}
.gbs-offer-forms>[data-gbs-offer-for="pack3"]{visibility:hidden}
.gbs-product-summary:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-offer-forms>[data-gbs-offer-for="single"]{visibility:hidden}
.gbs-product-summary:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-offer-forms>[data-gbs-offer-for="pack3"]{visibility:visible}

/* 5.4 Barre collante. display:none ici (et non visibility) : .gbs-buy-dock est une
   grille a TROIS colonnes et un element seulement invisible resterait un item de
   grille — la variante inactive partirait sur une ligne implicite. display:none
   evite au passage le telechargement de l'image du format non choisi.
   `.gbs-buy-dock span` (display:flex) frappe tout span du dock : les surcharges
   ci-dessous sont a specificite superieure, elles gagnent. */
.gbs-buy-dock .gbs-offer-dock-media,
.gbs-buy-dock .gbs-offer-dock-actions{display:contents}
.gbs-buy-dock .gbs-offer-dock-price{font-variant-numeric:tabular-nums}
.gbs-buy-dock [data-gbs-offer-for]{display:none}
.gbs-buy-dock img[data-gbs-offer-for="single"],
.gbs-buy-dock .gbs-offer-dock-name>[data-gbs-offer-for="single"],
.gbs-buy-dock .gbs-offer-dock-price>[data-gbs-offer-for="single"]{display:block}
.gbs-buy-dock .gbs-offer-dock-actions>[data-gbs-offer-for="single"]{display:inline-flex}
body:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-buy-dock [data-gbs-offer-for="single"]{display:none}
body:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-buy-dock img[data-gbs-offer-for="pack3"],
body:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-buy-dock .gbs-offer-dock-name>[data-gbs-offer-for="pack3"],
body:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-buy-dock .gbs-offer-dock-price>[data-gbs-offer-for="pack3"]{display:block}
body:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-buy-dock .gbs-offer-dock-actions>[data-gbs-offer-for="pack3"]{display:inline-flex}

/* 5.4bis Galerie. Derniere surface a rejoindre l'idiome : le serveur rend la galerie
   complete de CHAQUE format (packshot + miniatures), le CSS revele celle de l'option
   cochee. `display:none` et NON `visibility` — l'inverse des formulaires, la meme
   raison que le dock : `.gbs-product-hero` est une grille a DEUX colonnes, et un
   element seulement invisible resterait un item de grille, donc une 3e colonne.
   `display:none` le retire de la grille, qui garde ses deux pistes.
   Contrepartie MESUREE de ce `display:none` : les images qu'il masque ne peuvent pas
   etre `loading="lazy"`. Un report `lazy` decide dans un sous-arbre sans boite n'est
   jamais reevalue quand le CSS la revele — la galerie du format choisi resterait vide
   (verifie le 2026-08-15 : zero requete, `naturalWidth=0`). Elles se chargent donc
   normalement, en `fetchpriority="low"` et en taille `medium`, derriere l'image LCP.
   Sans `:has()`, seule la galerie `single` est visible : la fiche d'hier, exactement.
   C'est le meme repli ferme que `.gbs-offer-family{display:none}` (5.1) — un repli
   PARTIEL mentirait, cf. la lecon du 2026-08-15. */
.gbs-gallery[data-gbs-offer-for]{display:none}
.gbs-gallery[data-gbs-offer-for="single"]{display:block}
.gbs-product-hero:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-gallery[data-gbs-offer-for="single"]{display:none}
.gbs-product-hero:has(.gbs-offer-family__radio[value="pack3"]:checked) .gbs-gallery[data-gbs-offer-for="pack3"]{display:block}

/* 5.5 Mobile. Sous 480px, « Recommandée · 48 DH économisés » passe a deux lignes
   dans une carte de ~163px et desequilibre la paire : on bascule en liste d'une
   colonne, prix aligne en fin de ligne. La cible tactile reste le <label> entier,
   64px de haut — au-dessus du plancher de 44px. */
@media(max-width:480px){
  .gbs-offer-family__grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .gbs-offer-family__card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:64px;padding:11px 13px}
  .gbs-offer-family__title{grid-column:1;grid-row:1}
  .gbs-offer-family__unit{grid-column:1;grid-row:2}
  .gbs-offer-family__price{grid-column:2;grid-row:1/3;align-self:center;font-size:17px}
  .gbs-offer-family__badge{grid-column:1/-1;grid-row:3;margin-top:7px}
  .gbs-offer-price small{display:block;margin:3px 0 0;font-size:13px}
}


/* Plancher tactile 44px sous 900px et tableaux importes reellement defilables.
   Mesures a 390px avant correctif : champ quantite 28px de haut dans son enveloppe de 52px,
   champ Regaine 26px dans 56px, lien WhatsApp A+ 21px, lien de note Regaine 21px, liens du fil
   d'Ariane 18px. Le gabarit magnesium posait deja `min-height:44px` sur ses equivalents
   (.magnesium-summary .gbs-product-meta a, .mag-whatsapp) : ce bloc porte la meme regle aux
   gabarits generique, A+ et Regaine.
   La pastille de marque est entree dans ce perimetre en devenant un lien : elle grandit donc de
   ~25 a 44 px sous 900 px. Aucun effet sur la hauteur du bandeau des qu'un autre lien l'occupe
   deja — le lien d'avis, present des qu'une fiche a un avis, ou la pastille d'objectif. */
@media(max-width:900px){
  .gbs-buy .qty{min-height:50px}
  .regaine-quantity input{min-height:54px}
  .aplus-whatsapp,.gbs-product-whatsapp{min-height:44px}
  .regaine-rating-link{min-height:44px}
  .gbs-product-meta a{min-height:44px}
  /* La landing magnesium borne SA pastille a 29 px (`.magnesium-summary .gbs-product-meta
     .gbs-brand`, l. 498) : plus specifique que la ligne au-dessus, elle la battait et rendait le
     seul lien de marque sous le plancher — 29 px mesures a 375 px. Legitime tant que la pastille
     etait un <span> ; plus depuis qu'elle est une cible tactile. */
  .magnesium-summary .gbs-product-meta a.gbs-brand{min-height:44px}
  /* Fil d'Ariane : scope au gabarit generique, et a lui seul. `magnesium-landing` et
     `regaine-landing` sortent avant l'appel a `woocommerce_breadcrumb()` et n'en emettent aucun.
     Le scope reste indispensable a cause du gabarit A+, qui rend DESORMAIS son propre fil
     d'Ariane (`template-parts/aplus-product.php`) sous une regle qui lui est propre
     (`.aplus-product .woocommerce-breadcrumb a`) : un flex qui s'enroule sur deux
     rangees. Une regle generique non scopee y ajouterait 44px PAR RANGEE — mesure a 390px sur
     le staging, bloc de 124px au lieu de 46.
     NB : la redaction precedente affirmait que ce markup et cette regle « ne sont pas
     committes ici ». C'etait vrai quand le theme vivait hors depot ; les deux sont sur `main`
     depuis `5d2d659f`. La conclusion, elle, n'a pas bouge. */
  .gbs-product .woocommerce-breadcrumb a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
}


/* Repli mobile du hero A+. La regle `.aplus-product .gbs-product-hero` est declaree hors media
   query avec une specificite (0,2,0) : elle bat le repli generique `@media(max-width:900px)
   {.gbs-product-hero{grid-template-columns:1fr}}` (0,1,0) pose plus haut dans le fichier.
   Mesure a 390px avant correctif : colonne de resume figee a 470px dans un conteneur de 360,
   document a 509px de large — 119px de debordement horizontal sur toutes les fiches A+.
   Meme piege que le bloc magnesium, qui le documente deja : toute regle de gabarit posee
   APRES le bloc de replis generique doit redeclarer les siens. */
@media(max-width:900px){
  .aplus-product .gbs-product-hero{grid-template-columns:1fr}
}

/* ── Packshot natif : un PNG detoure televerse, sans decoupe au manifeste ──────────────────────
   `single-product.php` pose `--gbs-fit` sur l'image principale quand `GBS_Packshot` a reconnu une
   transparence reelle. Le facteur ramene le produit a la hauteur mediane de la famille (0,809 du
   cadre) : depose tel quel, un packshot qui remplit 0,975 de son cadre sort 37 % plus gros que
   toutes les fiches voisines.

   POURQUOI UN `scale` ET PAS UNE HAUTEUR. La hauteur peinte est redeclaree par quatre regles
   selon la surface et le viewport (88 %, 92 %, 91 %, 92 %) ; corriger « la » hauteur aurait voulu
   dire les patcher toutes, et oublier la prochaine. `transform`, lui, n'est redefini qu'a deux
   endroits : ici meme, et dans le repli editorial en `transform:none` — que cette regle ne croise
   jamais, puisqu'un packshot n'est pas editorial. Une seule regle couvre donc toutes les
   surfaces, presentes et a venir.

   Le selecteur d'attribut vaut declaration d'intention : sans `--gbs-fit`, aucun `scale` du tout,
   donc zero effet sur les 683 fiches servies par le pipeline. */
.gbs-gallery-main>img[style*="--gbs-fit"]{transform:translate(-50%,-50%) scale(var(--gbs-fit,1))}

/* Regaine A+ v2.2 — parcours editorial valide sur le prototype local. */
.regaine-landing .regaine-aplus-v2{position:relative;min-width:0;scroll-margin-top:94px}
.regaine-landing .regaine-v2-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-size:12px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.regaine-landing .regaine-v2-eyebrow::before{width:28px;height:2px;flex:0 0 28px;background:currentColor;content:""}
.regaine-landing .regaine-v2-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.48fr);align-items:end;gap:clamp(30px,6vw,82px);margin-bottom:38px}
.regaine-landing .regaine-v2-section-head>*,.regaine-landing .regaine-v2-proof-grid>*,.regaine-landing .regaine-v2-foam-grid>*,.regaine-landing .regaine-v2-use-grid>*,.regaine-landing .regaine-v2-bundle-grid>*{min-width:0}
.regaine-landing .regaine-v2-section-head h2,.regaine-landing .regaine-v2-foam-copy h2,.regaine-landing .regaine-v2-bundle-copy h2{margin:13px 0 0;font-size:clamp(46px,5.4vw,74px);font-weight:800;letter-spacing:-.055em;line-height:.96;text-wrap:balance}
.rtl .regaine-landing .regaine-v2-section-head h2,.rtl .regaine-landing .regaine-v2-foam-copy h2,.rtl .regaine-landing .regaine-v2-bundle-copy h2{letter-spacing:0;overflow-wrap:anywhere}
.regaine-landing .regaine-v2-section-head>p,.regaine-landing .regaine-v2-foam-copy>p,.regaine-landing .regaine-v2-bundle-copy>p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}

/* Hero : 20 px reels entre le stepper et le CTA au-dessus de 640 px. */
@media(width > 640px){
  .regaine-landing .regaine-purchase{column-gap:20px}
  .regaine-landing .regaine-purchase>.regaine-add{min-width:176px}
}

.regaine-landing .regaine-v2-proof{padding:88px 0 92px;color:var(--paper);background:var(--green-dark)}
.regaine-landing .regaine-v2-proof .regaine-v2-eyebrow{color:var(--gold-soft)}
.regaine-landing .regaine-v2-proof .regaine-v2-section-head h2{color:var(--paper)}
.regaine-landing .regaine-v2-proof .regaine-v2-section-head>p{color:rgba(255,255,255,.7)}
.regaine-landing .regaine-v2-proof-grid{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);gap:18px;align-items:stretch}
.regaine-landing .regaine-v2-before-after{display:grid;grid-template-rows:minmax(0,1fr) auto;margin:0;overflow:hidden;border-radius:24px;background:var(--paper)}
.regaine-landing .regaine-v2-before-after .regaine-figure{height:100%;max-height:560px;aspect-ratio:1;background:var(--paper)}
.regaine-landing .regaine-v2-before-after .regaine-figure img{inset:0;width:100%;height:100%;object-fit:contain}
.regaine-landing .regaine-v2-before-after figcaption{padding:14px 18px;color:var(--ink-soft);background:var(--paper);font-size:12px;line-height:1.55}
.regaine-landing .regaine-v2-timeline{display:flex;min-height:100%;flex-direction:column;border:1px solid rgba(255,255,255,.17);border-radius:24px;padding:clamp(24px,3.4vw,42px);background:rgba(255,255,255,.07)}
.regaine-landing .regaine-v2-timeline h3{margin:0 0 22px;color:var(--paper);font-size:22px;line-height:1.2}
.regaine-landing .regaine-v2-timeline ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.regaine-landing .regaine-v2-timeline li{min-height:164px;border-radius:17px;padding:19px;color:var(--paper);background:rgba(255,255,255,.08)}
.regaine-landing .regaine-v2-timeline li:first-child{background:var(--green)}
.regaine-landing .regaine-v2-time{display:block;margin-bottom:14px;color:var(--gold-soft);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.regaine-landing .regaine-v2-timeline li strong{display:block;font-size:17px;line-height:1.25}
.regaine-landing .regaine-v2-timeline li p{margin:8px 0 0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.55}
.regaine-landing .regaine-v2-safety{margin:20px 0 0;border-top:1px solid rgba(255,255,255,.17);padding-top:18px;color:rgba(255,255,255,.74);font-size:12px;line-height:1.6}
.regaine-landing .regaine-v2-sources{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:auto;padding-top:12px;color:rgba(255,255,255,.67);font-size:11px}
.regaine-landing .regaine-v2-sources a{display:inline-flex;min-height:44px;align-items:center;color:var(--paper);font-weight:800;text-decoration:underline;text-underline-offset:4px}

.regaine-landing .regaine-v2-foam{padding:82px 0;background:var(--paper)}
.regaine-landing .regaine-v2-foam-grid{display:grid;grid-template-columns:minmax(350px,.72fr) minmax(0,1.28fr);gap:clamp(40px,7vw,94px);align-items:center}
.regaine-landing .regaine-v2-foam-visual{position:relative;display:grid;min-height:440px;place-items:center;margin:0;overflow:hidden;border-radius:26px;background:var(--green-soft)}
.regaine-landing .regaine-v2-foam-visual::before{position:absolute;width:74%;aspect-ratio:1;border:1px solid rgba(23,79,60,.2);border-radius:50%;content:""}
.regaine-landing .regaine-v2-foam-visual .regaine-figure{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.regaine-landing .regaine-v2-foam-visual .regaine-figure img{inset:12% 8%;width:84%;height:76%;filter:drop-shadow(0 25px 20px rgba(27,42,33,.17))}
.regaine-landing .regaine-v2-foam-visual figcaption{position:absolute;z-index:2;inset-inline:20px;bottom:18px;color:var(--green-dark);font-size:11px;font-weight:800;text-align:center}
.regaine-landing .regaine-v2-foam-copy h2{color:var(--ink)}
.regaine-landing .regaine-v2-foam-copy>p{max-width:720px;margin-top:20px}
.regaine-landing .regaine-v2-shared{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;border-block:1px solid var(--line);padding:13px 0}
.regaine-landing .regaine-v2-shared strong{margin-inline-end:4px;font-size:12px}
.regaine-landing .regaine-v2-shared span{display:inline-flex;min-height:32px;align-items:center;border-radius:999px;padding:6px 10px;color:var(--green-dark);background:var(--green-soft);font-size:11px;font-weight:800}
.regaine-landing .regaine-v2-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.regaine-landing .regaine-v2-compare-card{min-height:186px;border:1px solid var(--line);border-radius:18px;padding:20px;background:rgba(255,255,255,.72)}
.regaine-landing .regaine-v2-compare-card.is-foam{color:var(--paper);border-color:var(--green-dark);background:var(--green-dark)}
.regaine-landing .regaine-v2-compare-card small{display:block;color:var(--green);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.regaine-landing .regaine-v2-compare-card.is-foam small{color:var(--gold-soft)}
.regaine-landing .regaine-v2-compare-card strong{display:block;margin-top:10px;font-size:18px;line-height:1.25}
.regaine-landing .regaine-v2-compare-card p{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.regaine-landing .regaine-v2-compare-card.is-foam p{color:rgba(255,255,255,.72)}
.regaine-landing .regaine-v2-compare-note{margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.55}

.regaine-landing .regaine-v2-comparison{background:var(--ivory)}
.regaine-landing .regaine-v2-comparison .regaine-comparison-scroll{background:var(--paper);scrollbar-gutter:stable}
.regaine-landing .regaine-v2-comparison .regaine-comparison-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.regaine-landing .regaine-v2-use{padding:82px 0;color:var(--paper);background:var(--green-dark)}
.regaine-landing .regaine-v2-use .regaine-v2-eyebrow{color:var(--gold-soft)}
.regaine-landing .regaine-v2-use .regaine-v2-section-head h2{color:var(--paper)}
.regaine-landing .regaine-v2-use .regaine-v2-section-head>p{color:rgba(255,255,255,.7)}
.regaine-landing .regaine-v2-use-grid{display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);gap:16px}
.regaine-landing .regaine-v2-use-visual{min-height:490px;margin:0;overflow:hidden;border-radius:22px;background:var(--green)}
.regaine-landing .regaine-v2-use-visual picture,.regaine-landing .regaine-v2-use-visual img{display:block;width:100%;height:100%}
.regaine-landing .regaine-v2-use-visual img{object-fit:cover;object-position:center}
.regaine-landing .regaine-v2-use-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.regaine-landing .regaine-v2-use-step{min-height:214px;border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:21px;background:rgba(255,255,255,.07)}
.regaine-landing .regaine-v2-use-step>span{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;color:var(--green-dark);background:var(--gold-soft);font-size:12px;font-weight:900}
.regaine-landing .regaine-v2-use-step h3{margin:24px 0 8px;color:var(--paper);font-size:19px;line-height:1.2}
.regaine-landing .regaine-v2-use-step p{margin:0;color:rgba(255,255,255,.7);font-size:12px;line-height:1.55}
.regaine-landing .regaine-v2-use-note{grid-column:1/-1;margin:0;border-inline-start:3px solid var(--gold-soft);padding:10px 0 10px 14px;color:rgba(255,255,255,.74);font-size:12px;line-height:1.55}
.rtl .regaine-landing .regaine-v2-use-note{padding:10px 14px 10px 0}

.regaine-landing .regaine-v2-reviews{padding:78px 0;background:var(--paper)}
.regaine-landing .regaine-v2-reviews .regaine-section-header{margin-bottom:26px}
.regaine-landing .regaine-v2-reviews .regaine-section-header h2{max-width:820px;color:var(--ink);font-size:clamp(44px,5vw,64px)}
.regaine-landing .regaine-v2-reviews .regaine-rating-score{color:var(--green)}
.regaine-landing .regaine-v2-reviews .regaine-review-card{border-radius:18px;background:var(--ivory)}
.regaine-landing .regaine-v2-reviews .regaine-review-card:nth-child(2){color:var(--paper);background:var(--green-dark)}
.regaine-landing .regaine-v2-reviews .regaine-review-card:nth-child(2) .regaine-review-product,.regaine-landing .regaine-v2-reviews .regaine-review-card:nth-child(2) .regaine-review-author>div span{color:rgba(255,255,255,.68)}
.regaine-landing .regaine-v2-reviews .regaine-review-card:nth-child(2) .regaine-verified{color:var(--gold-soft)}

.regaine-landing .regaine-v2-cta{padding:62px 0;background:var(--green-soft)}
.regaine-landing .regaine-v2-cta>.regaine-close-shell{width:min(calc(100% - 40px),1240px);max-width:1240px;border:0;border-radius:24px;padding:44px 48px;background:var(--green-dark)}
.regaine-landing .regaine-v2-cta h2{font-size:clamp(40px,4.4vw,58px)}
.regaine-landing .regaine-v2-cta .regaine-close-action .gbs-button{min-height:54px;color:var(--green-dark);background:var(--gold-soft);border-color:var(--gold-soft)}

.regaine-landing .regaine-v2-cross-sells{padding:72px 0;background:var(--green-soft)}
.regaine-landing .regaine-v2-cross-sells .gbs-merch{margin:0;padding:clamp(26px,3.5vw,48px);background:var(--paper)}
.regaine-landing .regaine-v2-cross-sells .gbs-routine-card{background:var(--white)}

.regaine-landing .regaine-v2-bundle{padding:72px 0 78px;background:var(--paper)}
.regaine-landing .regaine-v2-bundle-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);gap:clamp(34px,6vw,76px);align-items:center}
.regaine-landing .regaine-v2-bundle-copy h2{max-width:720px;color:var(--ink);font-size:clamp(40px,4.5vw,60px)}
.regaine-landing .regaine-v2-bundle-copy>p{max-width:660px;margin-top:18px}
.regaine-landing .regaine-v2-bundle-list{display:grid;margin:24px 0;border-top:1px solid var(--line)}
.regaine-landing .regaine-v2-bundle-list span{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.regaine-landing .regaine-v2-bundle-list strong{color:var(--ink);font-size:13px}
.regaine-landing .regaine-v2-bundle .gbs-button{min-height:52px;border:1px solid var(--green-dark);border-radius:12px;color:var(--paper);background:var(--green-dark)}
.regaine-landing .regaine-v2-bundle-visual{position:relative;display:grid;min-height:360px;place-items:center;margin:0;overflow:hidden;border-radius:24px;background:var(--green-soft)}
.regaine-landing .regaine-v2-bundle-visual::before{position:absolute;width:70%;aspect-ratio:1;border:1px solid rgba(23,79,60,.2);border-radius:50%;content:""}
.regaine-landing .regaine-v2-bundle-visual .regaine-stack-composite{position:relative;z-index:1;width:86%;height:74%;padding:0;border:0;border-radius:0;background:transparent;aspect-ratio:auto}

.regaine-landing .regaine-dock{background:rgba(12,52,39,.97)}
.regaine-landing .regaine-dock .gbs-button{color:#fff;background:var(--green);border-color:var(--green)}
.regaine-landing .regaine-dock .gbs-button:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}

@media(max-width:900px){
  .regaine-landing .regaine-v2-section-head,.regaine-landing .regaine-v2-proof-grid,.regaine-landing .regaine-v2-foam-grid,.regaine-landing .regaine-v2-use-grid,.regaine-landing .regaine-v2-bundle-grid{grid-template-columns:minmax(0,1fr)}
  .regaine-landing .regaine-v2-section-head{gap:18px}
  .regaine-landing .regaine-v2-before-after .regaine-figure{max-height:none}
  .regaine-landing .regaine-v2-foam-visual{min-height:390px}
  .regaine-landing .regaine-v2-use-visual{min-height:430px}
  .regaine-landing .regaine-v2-bundle-visual{min-height:330px}
}

@media(max-width:640px){
  .regaine-landing .regaine-aplus-v2{scroll-margin-top:72px}
  .regaine-landing .regaine-purchase{grid-template-columns:minmax(0,1fr);gap:0}
  .regaine-landing .regaine-purchase .regaine-quantity{display:none}
  .regaine-landing .regaine-purchase>.regaine-add{width:100%;min-width:0}
  .regaine-landing .regaine-v2-proof,.regaine-landing .regaine-v2-foam,.regaine-landing .regaine-v2-use,.regaine-landing .regaine-v2-reviews,.regaine-landing .regaine-v2-bundle{padding:52px 0}
  .regaine-landing .regaine-v2-section-head{margin-bottom:24px}
  .regaine-landing .regaine-v2-section-head h2,.regaine-landing .regaine-v2-foam-copy h2,.regaine-landing .regaine-v2-bundle-copy h2,.regaine-landing .regaine-v2-reviews .regaine-section-header h2{font-size:40px;line-height:1}
  .regaine-landing .regaine-v2-section-head>p,.regaine-landing .regaine-v2-foam-copy>p,.regaine-landing .regaine-v2-bundle-copy>p{font-size:13px}
  .regaine-landing .regaine-v2-proof-grid{gap:12px}
  .regaine-landing .regaine-v2-before-after,.regaine-landing .regaine-v2-timeline,.regaine-landing .regaine-v2-foam-visual,.regaine-landing .regaine-v2-use-visual,.regaine-landing .regaine-v2-bundle-visual{border-radius:18px}
  .regaine-landing .regaine-v2-timeline{padding:20px}
  .regaine-landing .regaine-v2-timeline ol{grid-template-columns:1fr;gap:7px}
  .regaine-landing .regaine-v2-timeline li{min-height:0;padding:16px}
  .regaine-landing .regaine-v2-time{margin-bottom:7px}
  .regaine-landing .regaine-v2-timeline li p{margin-top:5px}
  .regaine-landing .regaine-v2-sources{align-items:flex-start;flex-direction:column;gap:0}
  .regaine-landing .regaine-v2-foam-grid{gap:28px}
  .regaine-landing .regaine-v2-foam-visual{min-height:250px}
  .regaine-landing .regaine-v2-foam-copy>p{margin-top:14px}
  .regaine-landing .regaine-v2-shared{margin-top:20px}
  .regaine-landing .regaine-v2-compare{grid-template-columns:1fr}
  .regaine-landing .regaine-v2-compare-card{min-height:0;padding:17px}
  .regaine-landing .regaine-v2-use-grid{gap:10px}
  .regaine-landing .regaine-v2-use-visual{min-height:248px;aspect-ratio:4/3}
  .regaine-landing .regaine-v2-use-steps{grid-template-columns:1fr;gap:7px}
  .regaine-landing .regaine-v2-use-step{display:grid;min-height:0;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:3px 12px;padding:16px}
  .regaine-landing .regaine-v2-use-step>span{width:38px;height:38px;grid-row:1/span 2}
  .regaine-landing .regaine-v2-use-step h3{margin:1px 0 3px;font-size:17px}
  .regaine-landing .regaine-v2-use-step p{grid-column:2}
  .regaine-landing .regaine-v2-reviews .regaine-section-header{margin-bottom:20px}
  .regaine-landing .regaine-v2-cta{padding:44px 0}
  .regaine-landing .regaine-v2-cta>.regaine-close-shell{width:min(calc(100% - 24px),1240px);border-radius:20px;padding:34px 20px}
  .regaine-landing .regaine-v2-cta h2{font-size:38px}
  .regaine-landing .regaine-v2-cta .regaine-close-action .gbs-button,.regaine-landing .regaine-v2-bundle .gbs-button{width:100%}
  .regaine-landing .regaine-v2-cross-sells{padding:52px 0}
  .regaine-landing .regaine-v2-cross-sells .regaine-container{width:min(100% - 24px,760px)}
  .regaine-landing .regaine-v2-bundle-grid{gap:28px}
  .regaine-landing .regaine-v2-bundle-list span{align-items:flex-start;flex-direction:column;justify-content:center;gap:3px;padding:9px 0}
  .regaine-landing .regaine-v2-bundle-visual{min-height:260px}
}

/* Nu U Multivitamines (1416) — A+ éditorial stocké dans la description WooCommerce.
   Le sanitizer retire volontairement tout <style> venant du contenu public : ce bloc est donc
   la seule source de présentation. `:has()` élargit uniquement cette fiche et conserve la FAQ
   dans le même flux, sans rendre l’aside générique au-dessus d’un second sommaire. */
.gbs-public-content:has(#nuu-a-plus-preview){grid-template-columns:minmax(0,1fr);gap:0}
.gbs-public-content:has(#nuu-a-plus-preview)>aside{display:none}
.gbs-public-content:has(#nuu-a-plus-preview) .gbs-entry-content{max-width:none;padding:0;border-radius:30px;background:#fff;overflow:hidden}
.gbs-entry-content:has(#nuu-a-plus-preview)>h2,.gbs-entry-content:has(#nuu-a-plus-preview)>.faq-accordion{margin-inline:clamp(20px,6vw,76px)}
.gbs-entry-content:has(#nuu-a-plus-preview)>h2{margin-top:58px}
.gbs-entry-content:has(#nuu-a-plus-preview)>.faq-accordion{margin-bottom:68px}

#nuu-a-plus-preview{--nuu-green:#174f36;--nuu-green-soft:#e9f1ec;--nuu-burgundy:#8d2529;--nuu-gold:#d6a32f;--nuu-ink:#232622;--nuu-muted:#636a64;--nuu-cream:#f7f1e6;--nuu-border:#e7dfd2;width:100%;color:var(--nuu-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;overflow:hidden}
#nuu-a-plus-preview *{box-sizing:border-box}
#nuu-a-plus-preview .nuu-shell{width:100%;margin:0 auto}
#nuu-a-plus-preview .nuu-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);align-items:center;min-height:560px;padding:72px clamp(28px,6vw,80px);background:radial-gradient(circle at 82% 15%,rgba(214,163,47,.18) 0 9%,transparent 9.5%),radial-gradient(circle at 92% 76%,rgba(23,79,54,.13) 0 14%,transparent 14.5%),linear-gradient(115deg,#fff 0 58%,var(--nuu-cream) 58% 100%)}
#nuu-a-plus-preview .nuu-eyebrow{margin:0 0 14px;color:var(--nuu-burgundy);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
#nuu-a-plus-preview h2,#nuu-a-plus-preview h3,#nuu-a-plus-preview p{margin-top:0}
#nuu-a-plus-preview h2{border:0;padding-top:0}
#nuu-a-plus-preview .nuu-hero h2{max-width:690px;margin:0 0 20px;padding:0;border:0;color:var(--nuu-green);font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5.2vw,66px);font-weight:500;letter-spacing:-.045em;line-height:1.02}
#nuu-a-plus-preview .nuu-lead{max-width:650px!important;margin-bottom:28px;color:#434a44;font-size:clamp(17px,2vw,20px)}
#nuu-a-plus-preview .nuu-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:690px}
#nuu-a-plus-preview .nuu-metric{min-height:82px;padding:14px;border:1px solid rgba(23,79,54,.16);border-radius:14px;background:rgba(255,255,255,.82)}
#nuu-a-plus-preview .nuu-metric strong{display:block;color:var(--nuu-green);font-size:19px;line-height:1.15}
#nuu-a-plus-preview .nuu-metric span{display:block;margin-top:5px;color:var(--nuu-muted);font-size:12px}
#nuu-a-plus-preview .nuu-packshot{position:relative;display:grid;min-height:410px;place-items:center}
#nuu-a-plus-preview .nuu-packshot::before,#nuu-a-plus-preview .nuu-packshot::after{position:absolute;border-radius:999px;content:""}
#nuu-a-plus-preview .nuu-packshot::before{width:310px;height:310px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(23,79,54,.08)}
#nuu-a-plus-preview .nuu-packshot::after{bottom:28px;width:230px;height:28px;background:rgba(35,38,34,.12);filter:blur(10px)}
#nuu-a-plus-preview .nuu-product-image{position:relative;z-index:1;display:block;width:min(280px,82%)!important;height:auto!important;max-width:100%!important;margin:0 auto!important;border-radius:0!important;object-fit:contain;filter:drop-shadow(0 28px 24px rgba(46,50,45,.2))}

#nuu-a-plus-preview .nuu-section{padding:76px clamp(24px,6vw,76px)}
#nuu-a-plus-preview .nuu-section-heading{max-width:760px;margin-bottom:36px}
#nuu-a-plus-preview .nuu-section h2{margin:0 0 12px;padding:0;border:0;color:var(--nuu-green);font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,4vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
#nuu-a-plus-preview .nuu-section-heading p{color:var(--nuu-muted);font-size:17px}
#nuu-a-plus-preview .nuu-description{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,6vw,72px);align-items:start;border-bottom:1px solid var(--nuu-border)}
#nuu-a-plus-preview .nuu-description .nuu-section-heading{margin-bottom:0}
#nuu-a-plus-preview .nuu-description-copy{color:#4f554f;font-size:16px}
#nuu-a-plus-preview .nuu-description-copy p:last-child{margin-bottom:0}

#nuu-a-plus-preview .nuu-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#nuu-a-plus-preview .nuu-benefit{min-height:250px;padding:28px;border:1px solid var(--nuu-border);border-radius:20px;background:#fff;box-shadow:0 16px 36px rgba(52,50,43,.06)}
#nuu-a-plus-preview .nuu-benefit-index{display:grid;width:48px;height:48px;margin-bottom:24px;place-items:center;border-radius:50%;background:var(--nuu-green-soft);color:var(--nuu-green);font-size:14px;font-weight:800}
#nuu-a-plus-preview .nuu-benefit h3{margin:0 0 10px;color:var(--nuu-burgundy);font-size:21px}
#nuu-a-plus-preview .nuu-benefit p{margin-bottom:0;color:#505650;font-size:15px}

#nuu-a-plus-preview .nuu-formula-section{background:var(--nuu-green);color:#fff}
#nuu-a-plus-preview .nuu-formula-section h2,#nuu-a-plus-preview .nuu-formula-section .nuu-section-heading p{color:#fff}
#nuu-a-plus-preview .nuu-formula-grid{display:grid;grid-template-columns:1.15fr 1fr .55fr;gap:16px}
#nuu-a-plus-preview .nuu-formula-group{min-height:220px;padding:28px;border:1px solid rgba(255,255,255,.17);border-radius:18px;background:rgba(255,255,255,.08)}
#nuu-a-plus-preview .nuu-formula-number{display:block;margin-bottom:12px;color:#f5d683;font-family:Georgia,"Times New Roman",serif;font-size:55px;line-height:1}
#nuu-a-plus-preview .nuu-formula-group h3{margin:0 0 14px;color:#fff;font-size:20px}
#nuu-a-plus-preview .nuu-formula-group p{margin-bottom:0;color:rgba(255,255,255,.79);font-size:14px}

#nuu-a-plus-preview .nuu-routine{background:var(--nuu-cream)}
#nuu-a-plus-preview .nuu-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--nuu-border);border-radius:20px;background:#fff;overflow:hidden}
#nuu-a-plus-preview .nuu-step{position:relative;min-height:190px;padding:30px}
#nuu-a-plus-preview .nuu-step+.nuu-step{border-left:1px solid var(--nuu-border)}
#nuu-a-plus-preview .nuu-step-number{color:var(--nuu-burgundy);font-family:Georgia,"Times New Roman",serif;font-size:46px;line-height:1}
#nuu-a-plus-preview .nuu-step h3{margin:20px 0 7px;color:var(--nuu-green);font-size:18px}
#nuu-a-plus-preview .nuu-step p{margin-bottom:0;color:var(--nuu-muted);font-size:14px}
#nuu-a-plus-preview .nuu-year-note{max-width:none!important;margin:24px 0 0;color:var(--nuu-green);font-size:18px;font-weight:800;text-align:center}

#nuu-a-plus-preview .nuu-quality-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--nuu-border);background:#fff}
#nuu-a-plus-preview .nuu-quality-item{min-height:150px;padding:26px 18px;text-align:center}
#nuu-a-plus-preview .nuu-quality-item+.nuu-quality-item{border-left:1px solid var(--nuu-border)}
#nuu-a-plus-preview .nuu-quality-mark{display:grid;width:42px;height:42px;margin:0 auto 14px;place-items:center;border-radius:50%;background:var(--nuu-green-soft);color:var(--nuu-green);font-weight:900}
#nuu-a-plus-preview .nuu-quality-item strong{display:block;color:var(--nuu-green);font-size:15px}

#nuu-a-plus-preview .nuu-details-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:28px;align-items:start}
#nuu-a-plus-preview .nuu-table-wrap{overflow:hidden;border:1px solid var(--nuu-border);border-radius:18px}
#nuu-a-plus-preview .nuu-table-wrap table{display:table;width:100%;max-width:100%;border-collapse:collapse;font-size:13px;overflow:visible}
#nuu-a-plus-preview .nuu-table-wrap thead{background:var(--nuu-green);color:#fff}
#nuu-a-plus-preview .nuu-table-wrap th,#nuu-a-plus-preview .nuu-table-wrap td{min-width:0;padding:11px 14px;border:0;text-align:left}
#nuu-a-plus-preview .nuu-table-wrap th:nth-child(2),#nuu-a-plus-preview .nuu-table-wrap th:nth-child(3),#nuu-a-plus-preview .nuu-table-wrap td:nth-child(2),#nuu-a-plus-preview .nuu-table-wrap td:nth-child(3){text-align:right}
#nuu-a-plus-preview .nuu-table-wrap tbody tr+tr{border-top:1px solid #eee8de}
#nuu-a-plus-preview .nuu-table-wrap tbody tr:nth-child(even){background:#fbf9f5}
#nuu-a-plus-preview .nuu-advice{display:grid;gap:16px}
#nuu-a-plus-preview .nuu-advice-block{padding:24px;border-radius:18px;background:var(--nuu-cream)}
#nuu-a-plus-preview .nuu-advice-block h3{margin:0 0 10px;color:var(--nuu-green);font-size:18px}
#nuu-a-plus-preview .nuu-advice-block p,#nuu-a-plus-preview .nuu-advice-block li{color:#4f554f;font-size:13px}
#nuu-a-plus-preview .nuu-advice-block p:last-child{margin-bottom:0}
#nuu-a-plus-preview .nuu-advice-block ul{margin:0;padding-left:18px}
#nuu-a-plus-preview .nuu-vnr-note{margin:12px 0 0;color:var(--nuu-muted);font-size:11px}

@media(max-width:900px){
  #nuu-a-plus-preview .nuu-hero{grid-template-columns:1fr;padding-top:54px;background:linear-gradient(180deg,#fff 0 55%,var(--nuu-cream) 55% 100%)}
  #nuu-a-plus-preview .nuu-packshot{margin-top:40px}
  #nuu-a-plus-preview .nuu-benefits,#nuu-a-plus-preview .nuu-description,#nuu-a-plus-preview .nuu-formula-grid,#nuu-a-plus-preview .nuu-details-layout{grid-template-columns:1fr}
  #nuu-a-plus-preview .nuu-formula-group{min-height:0}
}

@media(max-width:640px){
  .gbs-public-content:has(#nuu-a-plus-preview) .gbs-entry-content{border-radius:20px}
  #nuu-a-plus-preview .nuu-hero,#nuu-a-plus-preview .nuu-section{padding-right:20px;padding-left:20px}
  #nuu-a-plus-preview .nuu-hero h2{font-size:40px}
  #nuu-a-plus-preview .nuu-metrics,#nuu-a-plus-preview .nuu-quality-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #nuu-a-plus-preview .nuu-packshot::before{width:260px;height:260px}
  #nuu-a-plus-preview .nuu-product-image{width:min(248px,82%)!important}
  #nuu-a-plus-preview .nuu-quality-item:nth-child(3),#nuu-a-plus-preview .nuu-quality-item:nth-child(4){border-top:1px solid var(--nuu-border)}
  #nuu-a-plus-preview .nuu-quality-item:nth-child(3){border-left:0}
  #nuu-a-plus-preview .nuu-steps{grid-template-columns:1fr}
  #nuu-a-plus-preview .nuu-step{min-height:0}
  #nuu-a-plus-preview .nuu-step+.nuu-step{border-top:1px solid var(--nuu-border);border-left:0}
  #nuu-a-plus-preview .nuu-table-wrap thead{display:none}
  #nuu-a-plus-preview .nuu-table-wrap tbody,#nuu-a-plus-preview .nuu-table-wrap tr,#nuu-a-plus-preview .nuu-table-wrap td{display:block;width:100%}
  #nuu-a-plus-preview .nuu-table-wrap tbody tr{display:grid;grid-template-columns:1fr 1fr;padding:12px 14px}
  #nuu-a-plus-preview .nuu-table-wrap tbody tr+tr{border-top:1px solid #e8e1d7}
  #nuu-a-plus-preview .nuu-table-wrap td{padding:2px 0}
  #nuu-a-plus-preview .nuu-table-wrap td:first-child{grid-column:1/-1;color:var(--nuu-green);font-weight:800}
  #nuu-a-plus-preview .nuu-table-wrap td:nth-child(2){text-align:left}
  #nuu-a-plus-preview .nuu-table-wrap td:nth-child(3){text-align:right}
}