/*!
 * GBZ420 - QA follow-up: Prime landing badges, the Prime page horizontal overflow, the two
 * missing hover states (Prime CTAs, header search submit) and the compact pack-card proportions
 * of maquette 06.
 * Written 2026-09-23 by the prime-qa-css task. Local copy only (gbz420.test -> C:\Codex\GBZ420\site).
 *
 * Audit    : docs/sitewide-maquettes-20260921/qa-prime-finish-20260923/README.md
 *            (V-03 hero overflow, V-06 header search hover, V-07 Prime CTA hover, V-08 sale badge)
 *            docs/sitewide-maquettes-20260921/qa-prime-finish-20260923/prime-compact-fidelity-20260923/REPORT.md
 *            (pack-card proportions, type scale and title truncation against maquette 06)
 * Charter  : docs/sitewide-maquettes-20260921/CHARTE-GRAPHIQUE.md
 *            2.1 - the Prime page is a level-A surface, so the palette is binding;
 *            3.1 / 3.3 - a single accent (#D4FA0A), black glyphs on lime, no other hue,
 *            white on lime is the forbidden pair (1.20:1);
 *            6.1 - the header's hover and active states pass through the lime;
 *            6.4 - a card CTA is a dark pill that turns lime on hover and focus;
 *            6.5 - a lime CTA on a black band turns white on hover, and a hover state with no
 *            perceptible change is itself a defect.
 * Tokens   : assets/css/gbz-tokens.css (declared on `body`, consumed here as var(--gbz-*)).
 *
 * Rules for this file:
 *  1. Presentation only. Prices, labels, product data, the add-to-cart behaviour and the review
 *     panels are not selected anywhere below: every rule sets a colour, a radius or a box.
 *  2. Scope is the Prime landing page in its three shipped languages - catalogue category 45,
 *     whose body carries `category-gbz-prime` in fr, en and de (measured 2026-09-23 on
 *     /fr|en|de/gbz-prime), hence `body#category.category-gbz-prime`. Categories 39/3/7 keep
 *     their own hero overflow (V-03 was reported for them as well and is corrected here on the
 *     Prime page only, per instruction); no other family is reached. The one sitewide rule is
 *     section 4, the shared header search button named by V-06.
 *  3. No !important. Specificity is spent on the id plus the existing class chain, so this file
 *     does not depend on where it is loaded relative to the Creative Elements bundle.
 */

/* ----------------------------------------------------------------------------------------------
 * 1. V-08 - the pack-card sale badge.
 *    Creative Elements paints `.elementor-product-miniature .elementor-badge-sale`
 *    (modules/creativeelements/views/css/widget-product-box.css:125) with its own salmon
 *    #f39d72, and `.elementor-badge` with white glyphs. Measured before: rgb(243, 157, 114) on
 *    all 10 badges of the Prime page, at 1440 and at 390. The charte keeps one accent on this
 *    surface, so the badge takes the accent plate with ink glyphs (17.5:1) and the charter's
 *    small radius; size, position and the "-50 %" / "-50%" label itself are untouched.
 * ------------------------------------------------------------------------------------------- */

body#category.category-gbz-prime .elementor-product-miniature .elementor-badge.elementor-badge-sale {
    background-color: var(--gbz-accent, #d4fa0a);
    border-radius: var(--gbz-radius-sm, 2px);
    color: var(--gbz-accent-ink, #000);
}

/* ----------------------------------------------------------------------------------------------
 * 2. V-03 - the 8 px horizontal overflow of the Prime page, on the Prime page only.
 *    The Prime Creative Elements document makes its bands full-bleed with
 *    `margin-left/right: calc(50% - 50vw)` (hero also `width: 100vw`) - custom CSS of the
 *    documents 45040101 / 45040301 / 45040401 in modules/creativeelements/views/css/ce. Those
 *    bands sit in a centred 1229 px column (x 98-1327 at 1440, inside #inner-wrapper.container at
 *    x 78), while `50vw` is half of the 1440 px visual viewport, scrollbar included: each band is
 *    therefore 7.5 px too wide on its right edge and the page's
 *    `documentElement.scrollWidth - clientWidth` reads 8 px at 1440 in fr, en and de.
 *    Three bands are affected on this page, not just the hero: with the hero alone reduced to
 *    `width: 100 %` the page still read 8 px, which is how `.gbz-prime-benefits` and
 *    `.gbz-prime-reserve` (same negative margins, `width: auto` = 1229 + 15 px) were identified.
 *    Shrinking the bands is not the answer either: with `width: 100 %` the hero measured x -7 to
 *    1222, i.e. 203 px of white at the right edge and still 8 px of overflow from the other two
 *    bands. `100vw` cannot be reconciled with the client box in CSS: the scrollbar width has no
 *    unit, so the band cannot be told to be exactly 1425 px wide.
 *    The page box is `#wrapper` (section#wrapper, x 0-1425 at 1440 and 0-390 at 390: exactly the
 *    client box). Clipping the horizontal overflow there removes the scrollable overhang and the
 *    horizontal scroll while leaving every band's geometry, height and stacking untouched - the
 *    overhanging 7.5 px is the strip painted under the scrollbar, which the visitor never sees.
 *    Measured after: 0 px overflow at 1440 and at 390, hero still x -7 to 1433 (h 473 fr/de and
 *    465 en, top 221), pack row top still 694, and the fixed mega menu and back-to-top button
 *    identical to baseline.
 * ------------------------------------------------------------------------------------------- */

body#category.category-gbz-prime #wrapper {
    overflow-x: clip;
}

/* ----------------------------------------------------------------------------------------------
 * 3. V-07 - the Prime CTAs had no hover state: the Prime document CSS sets base colours only,
 *    and its Creative Elements buttons sit outside the `body .gbz-cta` / `.btn` scopes of
 *    gbz-tokens.css. Both plates below reuse the pairs the charter layer already settled rather
 *    than inventing a new one.
 * ------------------------------------------------------------------------------------------- */

/* 3a. Hero CTA "DECOUVRIR LES PACKS" - a lime button on the black band, so hover and focus go to
 *     the white plate with black glyphs, the `body .gbz-cta:hover` pair of gbz-tokens.css:475-482.
 *     The arrow appended by the document CSS, the 8 px radius and the label stay as they are. */

body#category.category-gbz-prime .gbz-prime-hero .gbz-prime-cta .elementor-button {
    transition: var(--gbz-transition);
}

body#category.category-gbz-prime .gbz-prime-hero .gbz-prime-cta .elementor-button:hover,
body#category.category-gbz-prime .gbz-prime-hero .gbz-prime-cta .elementor-button:focus,
body#category.category-gbz-prime .gbz-prime-hero .gbz-prime-cta .elementor-button:focus-visible {
    background-color: var(--gbz-white, #fff);
    border-color: var(--gbz-white, #fff);
    color: var(--gbz-black, #000);
}

/* 3b. Pack and reserve card CTAs - the add-to-cart button and the quick-view bar of the Prime
 *     cards take the lime plate with ink glyphs on hover and focus, the pair gbz-tokens.css:405-412
 *     already applies to the theme's own cards (charte 6.4). Nothing is moved, resized or hidden. */

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc .elementor-button,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-atc .elementor-button,
body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-quick-view,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-quick-view {
    transition: var(--gbz-transition);
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc .elementor-button:hover,
body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc .elementor-button:focus,
body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc .elementor-button:focus-visible,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-atc .elementor-button:hover,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-atc .elementor-button:focus,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-atc .elementor-button:focus-visible,
body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-quick-view:hover,
body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-quick-view:focus,
body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-quick-view:focus-visible,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-quick-view:hover,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-quick-view:focus,
body#category.category-gbz-prime .gbz-prime-reserve .elementor-product-miniature .elementor-quick-view:focus-visible {
    background-color: var(--gbz-accent, #d4fa0a);
    border-color: var(--gbz-accent, #d4fa0a);
    color: var(--gbz-accent-ink, #000);
}

/* ----------------------------------------------------------------------------------------------
 * 4. V-06 - the header search submit button.
 *    `.search-btn` (theme bundle: `position:absolute; right:0; height:100%; background:0 0;
 *    border:0; padding:0 1em`) carries no hover rule at all, so hovering it changed neither
 *    background, glyph colour, border nor shadow on every page of the site. Charte 6.1 passes the
 *    header's hover state through the lime; the plate covers the button's own box inside the
 *    field, the magnifier goes to the ink token, and the focus ring the theme already draws is
 *    left untouched. Sitewide on purpose: the header is shared by all renders and V-06 is not a
 *    Prime-only finding. Only the desktop header widget (`#search_widget`) is addressed. */

body #search_widget .input-group .search-btn {
    transition: var(--gbz-transition);
}

body #search_widget .input-group .search-btn:hover,
body #search_widget .input-group .search-btn:focus,
body #search_widget .input-group .search-btn:focus-visible {
    background-color: var(--gbz-accent, #d4fa0a);
    color: var(--gbz-accent-ink, #000);
}

/* ----------------------------------------------------------------------------------------------
 * 5. The pack cards of maquette 06 - compact proportions, larger type, no truncated name.
 *    Maquette 06 is a 941 px render whose cards measure 195x270 px: card height / width 1.364,
 *    everything inside inset 13 px (6.67 %) - the photo ink, the title, the price and the CTA bar
 *    all start at x 74 against a card left edge of 61. The CTA bar is 169x33 (86 % of the card
 *    width), 8 px above the card bottom; the title ink is 9 px and the price ink 16 px, i.e. the
 *    price is markedly larger and bolder than the title.
 *    Normalised to the live 280 px card at 1260 (x1.436): height 382, inset 18.7, CTA 242x47,
 *    title ink 13, price ink 23. Measured before this section, the live card was 418 px tall
 *    (291 normalised, +9 %), its photo zone was a portrait 278x305 box instead of the mock-up's
 *    landscape zone (60.2 % of the card height; the live box was 72.9 %), its title and price ink
 *    were 10 px (14 px/700 and 16 px/400) and two of the five names were ellipsised at 1260.
 *
 *    Two levers: the image frame, shortened to the mock-up's share of the card while the photo is
 *    kept whole (contain, no crop, no new image), and the type scale. The title is 20 px/700 on two
 *    lines: the five shipped names are 2.4x longer than the mock-up labels and the brief forbids
 *    shortening or ellipsising them, so a two-line box is reserved for all five cards - the CTA
 *    bars then stay on one line, as in the mock-up. Nothing here selects a price, a label, a link,
 *    the form action or the hidden fields: the cart behaviour is not addressed.
 *    Measured after (fr/en/de, 1260/1440/390): card 280x383.7 at 1260 = 1.370 against the mock-up's
 *    1.364, price ink 25 px (17.4 normalised against 18), CTA bar 240.9x47 (86 % of the card width),
 *    title ink 15 px per line (10.4 normalised against 10), 0 truncated names out of 45 cards.
 *    Control band: the "reserve" carousel below is a different, dark card in the mock-up and is
 *    deliberately not selected by any rule of this section.
 * ------------------------------------------------------------------------------------------- */

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-image {
    aspect-ratio: 1.24;
    height: auto;
    overflow: hidden;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-image picture.elementor-cover-image {
    display: block;
    height: 100%;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-image img {
    display: block;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    width: auto;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-content {
    padding: 0 6.67%;
    text-align: left;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-content > * {
    margin-top: 8px;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-content > :first-child {
    margin-top: 8px;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-title {
    display: -webkit-box;
    font-size: 20px;
    line-height: 1.15;
    min-height: 2.3em;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-price {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-price-regular {
    font-size: 14px;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc {
    margin: 8px 6.67% 9px;
}

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc .elementor-button {
    font-size: 14px;
    font-weight: 700;
    min-height: 47px;
    text-transform: uppercase;
}

/* The mock-up does not glue the arrow to the label: it centres "AJOUTER AU PANIER" in the bar and
 * paints the arrow on its own, 24 of 169 px (14.2 %) from the right edge with a 14 px (8.3 %) gap
 * to the label. Inline, the arrow pushes the label left by half its width; the two lines below
 * take it out of the text flow instead - the label centres itself and the arrow is anchored to the
 * bar. The bar is 241 px wide with a 146 px label in French and German and 96 px in English, so
 * anchoring the arrow at 7.5 % keeps the mock-up's proportional gap (20 px) on the widest label;
 * a 14.2 % inset, as in the mock-up, would leave 3 px and glue the two together again.
 * `.elementor-atc` is already `position: relative` (modules/creativeelements/views/css/widget-product-box.css:163),
 * so the arrow is positioned against the bar without adding a positioned ancestor, and no rule
 * here touches the button's box, the label, the link or the form. */

body#category.category-gbz-prime .gbz-prime-packs .elementor-product-miniature .elementor-atc .elementor-button .elementor-button-text::after {
    content: "\2192";
    position: absolute;
    right: 7.5%;
    top: 50%;
    transform: translateY(-50%);
}