/* ============================================================================
   custom.css — YOUR custom CSS overrides.

   PUT ALL HAND-WRITTEN CSS HERE.

   - This file is loaded LAST (after styles.css and every other stylesheet),
     so any rule here WINS the cascade without needing !important.
   - It is NEVER auto-generated or touched by "Admin > Themes > Site Settings"
     (Save) or by app restarts. Your edits are safe here — permanently.
   - Do NOT edit inside the "MV-SITE-THEME" markers in styles.css: that block is
     rewritten on every admin Save and your changes there WILL be lost. Use this
     file instead.

   Edit via FTP (this file) or paste rules below.
   ============================================================================ */

/* Footer: top padding 24px, bottom padding 0 (keep the 22px sides). */
.mv-footer-inner { padding-top: 24px; padding-bottom: 0; }

/* Reviews tab: inline "write a review" form (same markup as the popup, .mv-prp). */
.mv-reviews-write { margin: 4px 0 20px; max-width: 560px; }

/* The .mv-prp modern-card + SVG-star rules live in Content/components.css, which the
   review POPUP <link>s directly — but storefront pages (incl. the product page that now
   embeds this form) load only styles.css + this file, and styles.css never got these
   rules. Mirror them here (custom.css loads last, so it overrides the legacy .sf-prp). */
.mv-prp #popup { margin: 0; padding: 14px 0 0; background: #fff; border: 0; border-radius: 10px; overflow: hidden; }
.mv-prp #popup.sf-loading { opacity: .4; pointer-events: none; }
.mv-prp .padded { padding: 0 20px 20px; }
.mv-prp #popup h3 { background: none; color: var(--site-button-bg, #4F7CC2); border: 0;
    border-bottom: 1px solid var(--site-button-bg, #4F7CC2); font-size: 16px; font-weight: 700;
    line-height: 1.4; margin: 0 -20px 16px; padding: 14px 20px; }
.mv-prp .reviews { margin-left: 0; width: 100%; box-sizing: border-box; }
.mv-prp .reviews.sf-reviews-form { margin-top: 0; margin-bottom: 0; }
.mv-prp .reviewform { width: 100%; box-sizing: border-box; }
.mv-prp__field { margin: 0 0 14px; }
.mv-prp__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mv-prp #newreview { width: 100% !important; height: auto; min-height: 110px; resize: vertical; padding: 10px 12px;
    box-sizing: border-box; border: 1px solid var(--site-border, #cdcdcd); border-radius: 6px; font-size: 14px;
    background: #fff; transition: border-color .15s, box-shadow .15s; }
.mv-prp #newreview:focus { outline: none; border-color: var(--site-header-end, #396b9e);
    box-shadow: 0 0 0 3px rgba(57, 107, 158, .15); }
.mv-prp .mv-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.mv-prp .mv-star-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Empty star: bare hollow orange glyph, no box/border around it. */
.mv-prp .mv-star { cursor: pointer; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; }
.mv-prp .mv-star-svg { width: 32px; height: 32px; display: block; }
.mv-prp .mv-star-svg path { fill: none; stroke: #e0820e; stroke-width: 1; stroke-linejoin: round; }
/* Filled star (persistent set): solid orange glyph. */
.mv-prp .mv-star-input:checked ~ .mv-star .mv-star-svg path { fill: #e0820e; stroke: #e0820e; }
/* Hover preview: reset all, then fill from the left up to the hovered star. */
.mv-prp .mv-stars:hover .mv-star .mv-star-svg path { fill: none; stroke: #e0820e; }
.mv-prp .mv-stars:hover .mv-star:hover .mv-star-svg path,
.mv-prp .mv-stars:hover .mv-star:hover ~ .mv-star .mv-star-svg path { fill: #e0820e; stroke: #e0820e; }
.mv-prp .mv-star-input:focus-visible + .mv-star { outline: 2px solid #e0820e; outline-offset: 2px; border-radius: 4px; }
.mv-prp #msg-error { display: none; float: none; color: #BA3323; font-weight: 600; font-size: 12px; margin: -8px 0 10px; }
.mv-prp__submit { margin-top: 4px; }
.mv-prp__actions { width: 100%; display: flex; justify-content: flex-end; }
.mv-prp .mv-prp__submit { width: 20%; }
.mv-prp__actions .mv-btn { margin-right: 6px; }

/* Legacy .sf-prp review popup container: drop the outer 1px #333 border, and give the
   H3 heading the primary site colour with no H3.jpg background bar.
   !important so these win regardless of styles.css selector specificity. */
.sf-prp #popup { border: none !important; }
.sf-prp #popup h3 { background: none !important; color: var(--site-button-bg, #4F7CC2) !important;
    border-top: none !important; border-bottom: 1px solid var(--site-button-bg, #4F7CC2) !important; }

/* "Acheter par WhatsApp" button: 15% opacity green tint (resting state only). */
.mv-btn--whatsapp { background: rgba(37, 211, 102, .15) !important; }
/* Keep the regular full-green colour ON HOVER (the !important above was leaking onto
   :hover and killing it). */
.mv-btn--whatsapp:hover,
.mv-btn--whatsapp:hover span { background: #25D366 !important; color: #fff !important; }
.mv-btn--whatsapp:hover svg { fill: #fff !important; }

/* Product-detail stock availability: restore the previous font (115%) + padding
   (3px 8px) and remove the thin border. The status renders as .mv-stock-badge > span
   (NOT .siteprice), and the redesign shrank it to 9pt. */
.mv-stock-badge span,
.mv-stock-badge .siteprice,
.mv-stock-badge .yousave { font-size: 115% !important; padding: 3px 8px !important; border: 0 !important; }

/* Product detail: bold "Reviews" (Avis) label + the review widget, on their OWN LINE
   below the stock availability. The handler wraps both in .mv-product-reviews so the
   label and the "Evaluer ce produit." link sit together on one line. Scoped to the
   product info column so category-card reviews stay inline. */
#rightContent .mv-product-reviews { display: block !important; width: -webkit-fit-content; width: fit-content; position: relative; margin-top: 4px !important; padding-left: 8px; }
/* Show the "Avis" label as a tooltip bubble (with a downward triangle) only while
   the shopper hovers the stars. The label is taken out of flow and hidden, so the
   container collapses to just the stars; the parent's :hover reveals the bubble. */
#rightContent .mv-product-reviews .mv-product-reviews__label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: #333 !important;
    color: #fff !important;
    font-weight: normal !important;
    font-size: 12px;
    line-height: 1.2;
    padding: 5px 9px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    pointer-events: none;
    z-index: 100;
}
/* Triangle pointing down from the bubble to the stars. */
#rightContent .mv-product-reviews .mv-product-reviews__label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}
#rightContent .mv-product-reviews:hover .mv-product-reviews__label {
    opacity: 1;
    visibility: visible;
}
#rightContent .mv-product-reviews #review.sf-ui-pstatus__review { display: inline-block !important; margin-top: 0 !important; vertical-align: middle; }

/* Replace the old PNG star sprite (stars0.png–stars5.png) with crisp CSS stars.
   The markup is an empty <div class="starsN sf-ui-stars">; we drop the bitmap and
   draw 5 gray base stars with a gold overlay clipped to the rating width (N/5).
   Scoped to the product-detail review widget so the shared .sf-ui-stars primitive
   used by category cards is left on its original sprite. */
#rightContent .mv-product-reviews #review .sf-ui-stars {
    position: relative;
    display: inline-block;
    background: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 32px !important;
    line-height: 1;
    letter-spacing: 6px;
}
/* Gray base: five empty stars. */
#rightContent .mv-product-reviews #review .sf-ui-stars::before {
    content: "★★★★★";
    color: #d6d6d6;
}
/* Gold overlay: five filled stars, clipped to the rating fraction. */
#rightContent .mv-product-reviews #review .sf-ui-stars::after {
    content: "★★★★★";
    color: #f5a623;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
}
#rightContent .mv-product-reviews #review .stars0::after { width: 0; }
#rightContent .mv-product-reviews #review .stars1::after { width: 20%; }
#rightContent .mv-product-reviews #review .stars2::after { width: 40%; }
#rightContent .mv-product-reviews #review .stars3::after { width: 60%; }
#rightContent .mv-product-reviews #review .stars4::after { width: 80%; }
#rightContent .mv-product-reviews #review .stars5::after { width: 100%; }

/* Top utility bar: span full width AND no left/right padding (edge-to-edge).
   The MAIN header keeps its 22px side padding; only the top bar loses it. */
.mv-header-top-inner { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 35px !important; }

/* The top bar lives inside the centered #site-content shell (via #header), so its
   own width:100% only fills that constrained shell — not the page. Break it out to
   the FULL PAGE WIDTH (full-bleed) while #header / #site-content stay constrained.
   100vw + left:50% + translateX(-50%) centres a viewport-wide bar on the page,
   regardless of the constrained (and table-based) ancestor. */
.mv-header-top {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 999 !important;
}
/* 100vw includes the vertical scrollbar's width, so the full-bleed bar is a few px
   wider than the content area and triggers a horizontal scrollbar. Clip that excess
   at the root (it's off-screen anyway — the bar still spans the full content width).
   MUST be overflow-x:CLIP, not hidden: `hidden` makes html/body a scroll container,
   which BREAKS position:sticky on #header-menu — the sticky menu scrolled away as the
   page scrolled. `clip` trims the same overflow WITHOUT establishing a scroll container,
   so the sticky header keeps pinning. (Same rationale as the wrapper overflow cap below.) */
html, body {
    overflow-x: clip !important;
}

/* ============================================================================
   HEADER — responsive modernization (phone <=576, tablet 577-992)
   Modernizes the <sys:siteheader> header (.mv-header-top / .mv-header-main) for
   small screens: a clean logo+icons row with a full-width search below, tidy
   non-wrapping tappable action icons, and a compact top utility bar.
   CSS-only; overrides the managed block (SiteThemeCss.cs -> styles.css) which uses
   !important, so these match specificity + load last (custom.css is the last sheet)
   and/or carry !important. No markup/class changes (SiteHeader.cs contract kept).
   Added 2026-06-19 (header responsive sweep).
   ============================================================================ */

/* ---- Tablet + phone (<=992): shared fixes ---- */
@media (max-width: 992px) {
    /* Edge-to-edge on small screens: drop the shell padding so the header + content
       span the full viewport width (no left/right inset). */
    #site-content, #header { padding: 0 !important; }

    /* Search sits in its own stacked row here; kill the desktop 34px down-nudge. */
    #header .mv-header-main .mv-hdr-search { margin-top: 8px !important; }

    /* Action icons: ONE tidy row, never wrap, right-aligned, comfortable tap gap. */
    .mv-header-main .mv-hdr-right { flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; }
    .mv-header-top  .mv-hdr-right { flex-wrap: nowrap !important; }

    /* Hide the header "Ask MV" button (#mv-ask-hdr) on mobile — it's replaced by the
       menu-bar Ask MV launcher (.mv-mm-askmv, injected into .mv-megamenu). */
    .mv-header-main .mv-hdr-askmv { display: none !important; }

    /* Top utility bar: symmetric padding (was 0 / 35px = lopsided) + drop the "|"
       separators that orphan at the start of a wrapped line (gap handles spacing). */
    .mv-header-top-inner { padding-left: 12px !important; padding-right: 12px !important; }
    .mv-header-top .mv-hdr-zone > * + *::before { content: none !important; display: none !important; }
}

/* ---- Tablet + phone (<=992): modern layout — logo + icons on row 1, search row 2.
   Overrides BOTH the managed flex-direction:column rule (<=820) AND the managed
   <=992 "search flex:1 1 100%" 3-row stack, for one consistent 2-row header across
   the whole tablet/phone range (matches the polished 768 layout). At ~320px the
   logo + >=44px icons can't share a row, so they gracefully wrap — no overflow. ---- */
@media (max-width: 992px) {
    #header .mv-header-main .mv-header-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }
    #header .mv-header-main .mv-hdr-left   { flex: 0 0 auto !important; order: 1 !important; }
    #header .mv-header-main .mv-hdr-right  { flex: 1 1 auto !important; order: 2 !important; justify-content: flex-end !important; }
    #header .mv-header-main .mv-hdr-center,
    #header .mv-header-main .mv-hdr-search { flex: 1 1 100% !important; order: 3 !important; }

    /* LOGO FIX (critical): the logo is an EMPTY <a id="logo"> with only a
       background-image. The managed block forces "#logo{width:100% !important}",
       which resolves to 100% of a flex item that collapsed to 0 -> width:0 ->
       INVISIBLE logo (a big white void) on every tablet/phone width. Give it a
       real fixed box. NOTE: MVlogo4.png is a 2-FRAME SPRITE (normal + hover, the
       hover rule shifts background-position by -342px), so background-size:contain
       would shrink BOTH frames into the box (a doubled logo). Instead scale BY
       HEIGHT and size the box to exactly ONE frame (342*52/90 = ~195px) so only the
       first frame shows. The desktop "#header #logo{width:341px;height:90px}" still
       rules above 992. */
    #header .mv-hdr-logo #logo {
        width: 226px !important;          /* one sprite frame at 52px tall: 344.5*52/79 ~= 227 */
        height: 52px !important;
        flex: 0 0 226px !important;
        background-size: auto 52px !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        text-align: left !important;
        margin: 0 !important;
    }
}

/* ---- Phone (<=576): compact icons (still >=44px tappable) + single-row top bar ---- */
@media (max-width: 576px) {
    /* Keep the 4 action icons tappable (>=44px) but compact so they fit a 320px row.
       Must use the .mv-header-main .mv-icon-link selector to beat header-icons.css. */
    .mv-header-main .mv-icon-link { width: 44px !important; height: 44px !important; }
    .mv-header-main .mv-icon-link svg { width: 26px !important; height: 26px !important; }
    .mv-header-main .mv-hdr-cart #shopping_cart.mv-cart-svg svg { width: 26px !important; height: 26px !important; }
    .mv-header-main .mv-hdr-right .mv-hdr-cart,
    .mv-header-main .mv-hdr-right .mv-hdr-account,
    .mv-header-main .mv-hdr-right .mv-hdr-fav,
    .mv-header-main .mv-hdr-right .mv-hdr-compare { margin-left: 2px !important; }

    /* Phone: smaller sprite-aware logo box (one frame at 42px tall = 344.5*42/79 = ~183px). */
    #header .mv-hdr-logo #logo { width: 183px !important; height: 42px !important; flex: 0 0 183px !important; background-size: auto 42px !important; }

    /* (The header Ask MV button is hidden entirely at <=992 — see the shared block
       above — and replaced by the menu-bar launcher .mv-mm-askmv.) */

    /* Search: tighter top gap on phone. */
    #header .mv-header-main .mv-hdr-search { margin-top: 6px !important; }

    /* Hide the "Toutes les catégories" category dropdown on phones so the search
       INPUT takes the full bar width (the input is flex:1 1 0, so it grows to fill). */
    .mv-header-main .mv-hdr-search .sf-ui-searchform__catwrap { display: none !important; }

    /* Top utility bar: ONE compact wrapping row instead of 3 tall stacked zones. */
    #header .mv-header-top .mv-header-top-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        row-gap: 2px !important;
        column-gap: 12px !important;
        padding: 4px 10px !important;
    }
    .mv-header-top .mv-hdr-zone { justify-content: center !important; }
}

/* ---- Mobile-only "Ask MV" launcher on the menu bar (.mv-megamenu) -----------
   The <li.mv-mm-askmv> is injected into .mv-megamenu by js/mv-drill.js. It calls
   window.mvAiOpen() (same hook as the now-hidden header #mv-ask-hdr). Hidden by
   default (desktop); shown only <=992, pinned to the RIGHT of the menu bar where
   there is empty space next to the hamburger toggle. */
.mv-megamenu .mv-mm-askmv { display: none; }
@media (max-width: 992px) {
    .mv-megamenu { position: relative; }
    .mv-megamenu .mv-mm-askmv {
        display: flex !important;
        align-items: center;
        position: absolute !important;
        right: 0;
        top: 0;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        border: 0 !important;
        background: none !important;
        z-index: 6;
    }
    .mv-megamenu .mv-mm-askmv .mv-ask-menu {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        height: 100%;
        padding: 0 16px !important;
        color: #fff !important;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none !important;
        white-space: nowrap;
        background: none;
        transition: background-color .15s ease;
    }
    .mv-megamenu .mv-mm-askmv .mv-ask-menu:hover,
    .mv-megamenu .mv-mm-askmv .mv-ask-menu:focus { background: none; color: #fff !important; }
    .mv-megamenu .mv-mm-askmv .mv-ask-menu-bolt { font-size: 16px; line-height: 1; color: #ffd84d; }
}

/* Homepage column 3 "weekly_specials": make the 3 boxes full width and stacked
   (they were narrow / side-by-side). Scoped to col3 so other hp_blk areas are untouched. */
#homepagecolumn3 #hp_blocks,
#homepagecolumn3 .weekly_specials { display: block !important; width: 100% !important; max-width: 100% !important; }
#homepagecolumn3 .weekly_specials .mv-lazy-col,
#homepagecolumn3 .weekly_specials .hp_blk,
#homepagecolumn3 .weekly_specials .hp_blk_body,
#homepagecolumn3 .weekly_specials .sidemenu,
#homepagecolumn3 .weekly_specials .sidemenu_body {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================================
   Promo banner (#iconPromo) — CSS sprite over assets/iconPromo.png
   (252x1104; twelve stacked banners). ProductInfo.cs ("promo" case) picks ONE
   variant class from the product's live data; the band shown is chosen purely
   by background-position below.
   Lives here in custom.css (loads LAST, cache-busted by mtime) so it is tunable
   without a rebuild / CSS regeneration. This single block REPLACES the old
   iconPromo rules that were split across styles.css (managed block) + custom.css.

   Band offsets are MEASURED from the PNG's alpha channel (artwork is ~35px tall
   and does NOT sit on a clean 92px grid — each band's true top differs):
     band  name      art-top(y)  art-height
     0     flash       0          35
     1     enpromos    91         35
     2     coutant     182        35
     3     epuise      273        35
     4     chrono      353        31
     11    perte       1049       35
   Only .flash carries the dynamic "-X%" (the only band with a blank numeric slot).
   ============================================================================ */
#productContent #iconPromo {
    /* hidden until ProductInfo.cs adds a variant class (no banner = no class emitted) */
    display: none !important;
    /* Banner header pinned to the top of #productContent (its position:relative
       ancestor), fully INSIDE the box (no overhang -> nothing clips its top) and
       left-aligned with the price text (#rightContent starts at the box's 20px
       left padding). 36px box = tight crop of the ~35px artwork so no neighbouring
       band bleeds in and no dead space below. Top room is reserved by the
       #productContent:has(...) rule further down so it never covers the price. */
    position: absolute;
    top: -15px;
    left: 20px;
    z-index: 3;
    width: 252px !important;
    height: 43px !important;
    min-width: 0 !important;
    max-width: 252px !important;
    background: url('../assets/iconPromo.png') no-repeat 0 0 !important;
    background-size: 252px auto !important;   /* native width -> 1:1 px, offsets are native px */
    color: #fff !important;
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
/* show the matching band */
#productContent #iconPromo.flash,
#productContent #iconPromo.enpromos,
#productContent #iconPromo.coutant,
#productContent #iconPromo.epuise,
#productContent #iconPromo.chrono,
#productContent #iconPromo.perte { display: inline-flex !important; align-items: center; justify-content: center; }
/* .flash: "-X%" centred on the orange right area. The VENTE-FLASH badge + stopwatch
   fill the left ~128px; orange runs to ~232px. padding box -> centre lands ~180px. */
#productContent #iconPromo.flash    { background-position: 0 2px !important; padding: 0 25px 6px 85px !important; }
#productContent #iconPromo.enpromos { background-position: 0 -91px !important; }
#productContent #iconPromo.coutant  { background-position: 0 -180px !important; }
#productContent #iconPromo.epuise   { background-position: 0 -271px !important; }
#productContent #iconPromo.chrono   { background-position: 0 -353px !important; }
#productContent #iconPromo.perte    { background-position: 0 -1047px !important; }
/* Reserve top room in the box ONLY when a banner is present, so the ribbon sits
   fully inside #productContent (an ancestor was clipping the old top overhang) and
   never overlaps the price/title. :has is already used elsewhere in this theme. */
#productContent:has(> #iconPromo.flash),
#productContent:has(> #iconPromo.enpromos),
#productContent:has(> #iconPromo.coutant),
#productContent:has(> #iconPromo.epuise),
#productContent:has(> #iconPromo.chrono),
#productContent:has(> #iconPromo.perte) {
    padding-top: 24px !important;
}

/* ============================================================================
   Category list/grid CARD status badges (.mv-pbadge) — SVG icon + coloured pill.
   Same variants/precedence as the product-detail #iconPromo banner, surfaced as
   a small badge in each card's .promo-badge overlay slot (built by
   ProductUtils.PromoVariantBadgeHtml). perte = RED flashing, coutant = ORANGE
   flashing (per user, 2026-06-20). Lives here in custom.css (loads last,
   cache-busted by mtime) so it is tunable without a CSS regeneration.
   .promo-badge supplies the absolute position (top/right); .mv-pbadge restyles it.
   ============================================================================ */
.promo-badge.mv-pbadge {
    display: inline-flex; align-items: center; gap: 5px; width: auto;
    padding: 4px 9px; border-radius: 999px;
    font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .2px;
    white-space: nowrap; color: #fff;
}
.promo-badge.mv-pbadge svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; display: block; }
.promo-badge.mv-pbadge--perte    { background: linear-gradient(135deg, #e11d2a, #b00710) !important; animation: mvPbadgeFlash 1.05s ease-in-out infinite; }
.promo-badge.mv-pbadge--coutant  { background: linear-gradient(135deg, #ff8c1a, #e8730a) !important; animation: mvPbadgeFlash 1.05s ease-in-out infinite; }
.promo-badge.mv-pbadge--flash    { background: linear-gradient(135deg, #ef2d4e, #c30f37) !important; }
.promo-badge.mv-pbadge--chrono   { background: linear-gradient(135deg, #ff7a18, #d34500) !important; }
.promo-badge.mv-pbadge--epuise   { background: linear-gradient(135deg, #7a8290, #555c66) !important; }
.promo-badge.mv-pbadge--enpromos { background: linear-gradient(135deg, #16a34a, #0f7d39) !important; }
@keyframes mvPbadgeFlash { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
    .promo-badge.mv-pbadge--perte, .promo-badge.mv-pbadge--coutant { animation: none; }
}
/* QuickView drawer: the status badge flows inline in the top-left chrome (.mv-qv__tl is an
   absolute flex column with the manufacturer logo), NOT absolutely-positioned like on a card.
   Slightly larger than a card badge so it reads in the bigger drawer. Flash still works. */
.mv-qv .mv-qv__tl .promo-badge.mv-pbadge {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    font-size: 13px; padding: 6px 12px;
}
.mv-qv .mv-qv__tl .promo-badge.mv-pbadge svg { width: 15px; height: 15px; }

/* QuickView product name: use the SAME name font as the cell-product cards in
   #suggested-items-pane (.cell-product .product-name-link → Montserrat, bold),
   which the QV name otherwise lacks (it inherited the modal's default font). */
.mv-qv .mv-qv__name {
    font-family: Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: bold !important;
}

/* Price filter card: balance the vertical spacing (per user 2026-06-20). It was
   top-heavy — the "Prix" header had 16px padding top+bottom while the slider sat
   at the very bottom. Trim the header padding and give the body symmetric padding
   so the content (inputs + slider) reads centered. #main-content beats the inline
   <style> the criteria renderer emits. */
#main-content .sf-ui-pricecard .header { padding-top: 12px !important; padding-bottom: 7px !important; }
#main-content .sf-ui-pricecard .sidemenu_body { padding-top: 6px !important; padding-bottom: 5px !important; }
#main-content .sf-ui-pricecard .sf-ui-criteria__slider { margin: 10px 0 7px !important; }

/* TTC / HT tax labels after the price -> small SUPERSCRIPT everywhere a price is
   shown (category cards, product detail, quick view, sliders, etc.) — per user
   2026-06-21. .mention is the tax-label span emitted by every price renderer.
   vertical-align wins even where a more specific rule already sizes .mention. */
.mention { font-size: .62em !important; vertical-align: super !important; line-height: 0 !important; }

/* Grid cards: 3px padding below the review stars (per user 2026-06-21). */
#main-content :is(.detailedList, #list) .cell-product .ProductReviewRating { padding-bottom: 3px !important; }

/* Breadcrumb trail: font +20% (13px -> 15.6px). */
.breadcrumbs { font-size: 15.6px !important; }

/* Detail list: hide the "Hors Taxe :" label prefix but keep the HT price. The label is
   a bare text node directly in .ht-price; font-size:0 hides it, the price <span> restores.
   Scoped to #categorymain (the category-page container that's always present) so it wins
   over the mv-dl price rules AND matches the served page (which may lack #main-content). */
#categorymain .detailedList .product-line .ht-price { font-size: 0 !important; }
#categorymain .detailedList .product-line .ht-price > * { font-size: 12px !important; }
#categorymain .detailedList .product-line .ht-price span { display: flex !important; justify-content: end !important; align-items: center !important; gap: 2px !important; }

/* Detail list buy-box: right-align the promo / price-drop badges (EN PROMOTION,
   PRIX REDUIT) so they line up with the right-aligned price (per user 2026-06-21). */
#main-content .detailedList .product-line.mv-dl .mv-dl__buy #divPromo,
#main-content .detailedList .product-line.mv-dl .mv-dl__buy .product_discount_adverts { text-align: right !important; }
#main-content .detailedList .product-line.mv-dl .mv-dl__buy .mv-flags.mv-flags-right { justify-content: flex-end !important; align-items: flex-end !important; text-align: right !important; }
#main-content .detailedList .product-line.mv-dl .mv-dl__buy .mv-flags.mv-flags-right .mv-flag { margin-left: auto !important; margin-right: 0 !important; }

.mv-stock-availability {
    font-weight: bold;
}

.mv-stock-badge .yousave {
    padding: 8px 12px !important;
}

/* Footer copyright line ("YYYY Copyright ... Designed by ..."): it rendered too big.
   Scoped to the .terms_info paragraph inside the bottom bar so the socials/security
   in the same row are untouched. */
#footer .mv-footer-bottom .terms_info,
#footer .mv-footer-bottom .terms_info * {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Criteria filter sidebar (~200px column): safety net so a long facet TITLE or choice
   LABEL wraps + breaks instead of overflowing / widening the column. */
#criteresSearch, #criteresSearch * { box-sizing: border-box; max-width: 100%; }
#criteresSearch .title-criteria,
#criteresSearch .children label {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.25;
}
#criteresSearch .ScrollBar { overflow-x: hidden; }

/* When a LEFT / RIGHT side column is active (has content) in a page, give it a small 5px
   gap on the side that faces the main content. Collapsed (empty) columns are display:none
   so this never adds phantom space. */
#main-content #categoryleft:has(*),
.homepage #homepagecolumn1:has(*) { padding-right: 5px !important; box-sizing: border-box; }
.homepage #homepagecolumn3:has(*),
#main-content #categoryright:has(*) { padding-left: 5px !important; box-sizing: border-box; }

/* ============================================================================
   Homepage category-navigation tiles — modern card treatment.

   Scope: ALL rules are prefixed with #My_DataList1 or .hp_container_block so
   nothing leaks to other .btn-small buttons or other pages.

   Tokens used (confirmed in styles.css :root, line 4603):
     --site-surface        card background (#fafafa fallback)
     --site-border         border colour (#4f74b0 fallback)
     --site-radius         border-radius (5px fallback)
     --site-content-text   title / body text (#2c3e50 fallback)
     --site-link           sub-link colour (#0f63d2 fallback)
     --site-link-hover     sub-link hover (#43a7f4 fallback)
     --site-button-bg      "Plus d'Info" button background (#4F7CC2 fallback)
     --site-button-text    button label colour (#ffffff fallback)
     --site-button-border  button border (#20466a fallback)
     --site-button-hover   button hover background (#224781 fallback)
     --site-button-hover-text  button hover label (#ffffff fallback)
   ============================================================================ */

/* --- 1. Card shell -------------------------------------------------------- */
/* Clean white card, SOFT NEUTRAL border (NOT the saturated --site-border blue,
   which made every tile a heavy boxy outline), gentle shadow. The brand colour
   is used only as a hover accent (section 2). Overrides styles.css:4534. */
.hp_container_block {
    background: #ffffff !important;
    border: 1px solid #e6e8eb !important;
    border-radius: var(--site-radius, 6px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
    padding: 14px 14px 12px !important;
    /* Smooth lift on hover */
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    /* Prevent the absolutely-positioned image from sticking out of the rounded card */
    overflow: hidden !important;
}

/* --- 2. Hover lift (whole card is interactive) ---------------------------- */
/* On hover the border picks up the brand colour as an accent — subtle at rest,
   clearly interactive on hover. */
.hp_container_block:hover {
    /* No hover lift (user rule: only mega-menu submenus + category cards move). */
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
    border-color: var(--site-link, #2489ce) !important;
}

/* --- 3. Category title (a.hp_container_hdr) ------------------------------- */
/* Remove the dated underline; keep it bold; underline only on hover. */
a.hp_container_hdr,
#My_DataList1 a.hp_container_hdr {
    text-decoration: none !important;
    color: var(--site-content-text, #2c3e50) !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    display: block !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    transition: color .15s ease !important;
}

a.hp_container_hdr:hover,
#My_DataList1 a.hp_container_hdr:hover {
    color: var(--site-link-hover, #43a7f4) !important;
    text-decoration: underline !important;
}

/* --- 4. Sub-links (not the header, not the image, not inside .btn-small) -- */
/* Tidy vertical rhythm; a subtle color shift + left-indent on hover. */
.hp_container_block a:not(.hp_container_hdr):not(.hp_container_image):not([class*="btn"]) {
    color: var(--site-link, #0f63d2) !important;
    font-size: 0.85em !important;
    line-height: 1.7 !important;
    display: block !important;
    padding-left: 0 !important;
    transition: color .13s ease, padding-left .13s ease !important;
}

.hp_container_block a:not(.hp_container_hdr):not(.hp_container_image):not([class*="btn"]):hover {
    color: var(--site-link-hover, #43a7f4) !important;
    padding-left: 4px !important;
    text-decoration: none !important;
}

/* --- 5. "Plus d'Info" button — scoped so the site-wide .btn-small is safe - */
/* Slightly larger padding, proper hover using the --site-button-hover token.  */
#My_DataList1 .btn-small,
.hp_container_block .btn-small {
    padding: 5px 13px !important;
    margin-top: 8px !important;
    margin-right: 0 !important;
    font-size: 12px !important;
    background: var(--site-button-bg, #4F7CC2) !important;
    color: var(--site-button-text, #ffffff) !important;
    border-color: var(--site-button-border, #20466a) !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

#My_DataList1 .btn-small:hover,
.hp_container_block .btn-small:hover {
    background: var(--site-button-hover, #224781) !important;
    color: var(--site-button-hover-text, #ffffff) !important;
    border-color: var(--site-button-hover, #224781) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18) !important;
}

/* Keep .btn-right-small hidden (already display:none in styles.css, just defensive). */
#My_DataList1 .btn-right-small,
.hp_container_block .btn-right-small {
    display: none !important;
}

/* --- 6. Category icon image ----------------------------------------------- */
/* Subtle opacity + scale on hover for a lively feel; position unchanged. */
.hp_container_block .hp_container_image {
    transition: opacity .18s ease, transform .18s ease !important;
    opacity: .92 !important;
}

.hp_container_block:hover .hp_container_image {
    /* No hover zoom (user rule: no movement on hover except submenus + category cards). */
    opacity: 1 !important;
}

/* --- 7. Inter-tile gap ---------------------------------------------------- */
/* The table uses inline border-collapse:collapse; we can't change that.
   Increase the margin slightly for more breathing room between cards. */
#My_DataList1 .hp_container_block {
    margin: 0 5px 6px 0 !important;
}

/* --- 8. New self-contained category-hub block (#mv-cathub) ---------------- */
/* Outer breathing room around the modern category-cards grid, and the sibling
   tab blocks (Promotion / Best sales / Offres Spéciales). */
#mv-cathub,
#Promotion,
#Best-sales,
#Offres-Speciales {
    margin: 16px !important;
}

/* Move the card padding OFF .mv-cat-card (so the image goes full-bleed at the
   top) and onto the text parts only: title / list / CTA keep the 14px side
   inset. !important because the block's own inline <style> wins on document
   order otherwise. */
#mv-cathub .mv-cat-card {
    padding: 0 !important;
    overflow: hidden !important;          /* clip the full-bleed image to the rounded corners */
}
#mv-cathub .mv-cat-thumb {
    height: auto !important;              /* let the band grow to the full-width image */
    margin: 0 !important;                 /* image band spans edge-to-edge, no padding */
    background: #f7f8f9 !important;
}
/* Image fills the full width of the card (thumb is full-card-width since the card
   has no padding); keep its aspect ratio. Overrides the block's max-height/width:auto. */
#mv-cathub .mv-cat-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
}
#mv-cathub .mv-cat-title {
    padding: 0 14px !important;
    margin: 14px 0 10px !important;       /* side inset + top gap below the image */
    font-size: 20px !important;
}
#mv-cathub .mv-cat-list {
    padding: 0 14px !important;
    margin: 0 0 14px !important;
}
#mv-cathub .mv-cat-cta {
    margin: auto 14px 14px !important;    /* button stays pinned to bottom, inset from card edges */
}

/* --- Category hero banner (#categorybanner) — cap the height ------------------
   The <sys:category-banner> handler emits <div id="categorybanner"><img></div>
   with NO size constraint, so a tall banner image renders full natural height
   ("way too high"). Cap it: full width, cover-cropped, max 400px tall. */
#categorybanner {
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}
#categorybanner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: center !important;
}
@media (max-width: 768px) {
    #categorybanner img { max-height: 220px !important; }
}

/* --- AI product description: 2-column layout (description left, boxes right) --
   The AI generates LongDescription as .mv-prod-layout with a wide .mv-prod-main
   (intro + features + spec table) and a narrow .mv-prod-side holding boxed
   summary cards (.mv-prod-box: "Caracteristiques cles" + "Contenu de la boite").
   Mirrors box.png — main copy on the left, key-features / in-the-box on the right. */
.product-description.mv-prod-layout {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.product-description.mv-prod-layout .mv-prod-main {
    flex: 1 1 58%;
    min-width: 300px;
}
.product-description.mv-prod-layout .mv-prod-side {
    flex: 0 0 320px;
    max-width: 340px;
}
/* When js/mv-prodside.js moves .mv-prod-side to the top of the side rail
   (#homepagecolumn1), make it fill the rail exactly like the .sidemenu blocks
   (e.g. the "Notification" box) — auto width + border-box, no forced width, no
   horizontal margin — so the card lines up to the same width. */
#homepagecolumn1 .mv-prod-side {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    box-sizing: border-box !important;
}
#homepagecolumn1 .mv-prod-side,
#homepagecolumn1 .mv-prod-box {
    box-sizing: border-box !important;
}
.product-description .mv-prod-box,
#homepagecolumn1 .mv-prod-box {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 0;
    padding: 14px 16px 16px;
    margin: 0 0 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.product-description .mv-prod-box > h3,
#homepagecolumn1 .mv-prod-box > h3 {
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--site-button-bg, #2c3e50);
    font-size: 15px;
    font-weight: 700;
    color: #222;
}
.product-description .mv-prod-box ul,
#homepagecolumn1 .mv-prod-box ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}
.product-description .mv-prod-box li,
#homepagecolumn1 .mv-prod-box li {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
}
.product-description.mv-prod-layout .mv-prod-main > h3 {
    margin: 18px 0 10px;
    font-size: 17px;
    font-weight: 700;
    border-bottom: 2px solid #ececec;
    padding-bottom: 6px;
}
/* Stack to a single column on tablet/mobile so the boxes drop below the copy. */
@media (max-width: 991px) {
    .product-description.mv-prod-layout { display: block !important; }
    .product-description.mv-prod-layout .mv-prod-side { max-width: none; }
}

/* --- 9. Floating WhatsApp widget — notification bubble (.message) --------- */
/* Hide the auto-popup notification bubble entirely. The widget's JS calls
   .show() on it after 2s (setting an inline display), so !important is needed to
   win over that. The launcher button + the on-click chat panel (.message-layout)
   are unaffected. */
#whatsapp-bloc .message {
    display: none !important;
}
/* (Styling below kept for reference in case the bubble is re-enabled — it sized
   the bubble to content and made its text readable.) */
#whatsapp-bloc .message {
    height: auto !important;
    align-items: center !important;   /* center the close button against the notification row */
}
/* Bubble sits on a WHITE background, but the name/message text was inheriting a
   white colour (invisible). Force dark, readable text + a clean system font. */
#whatsapp-bloc .message,
#whatsapp-bloc .message .name,
#whatsapp-bloc .message .msg,
#whatsapp-bloc .message .msg p,
#whatsapp-bloc .message #text-whatsapp-btn,
#whatsapp-bloc .message #text-whatsapp-btn p {
    color: #303030 !important;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
#whatsapp-bloc .message .name { color: #111111 !important; }
/* Width: 340px, but never wider than the viewport (it's position:fixed at
   right:10px, so cap at 100vw minus a 10px gutter each side). box-sizing keeps
   the padding inside the width. This is the responsive guard — vw works even
   though the theme has no viewport meta, and the bubble shrinks on small screens
   instead of spilling off-screen. Name: refined size/weight for the new font. */
#whatsapp-bloc .message {
    width: 340px !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
}
/* Same responsive cap on the expanded chat panel (also 340px in styles.css:2573)
   so neither part of the widget spills off-screen on narrow viewports. */
#whatsapp-bloc .message-layout {
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
}
/* Keep the whole floating widget above page content (theme sets z-index:10). */
#whatsapp-bloc {
    z-index: 999999999999 !important;
}
/* Let the widget header size to its content instead of a fixed min-height. */
#whatsapp-bloc #header {
    min-height: -webkit-fit-content !important;
    min-height: fit-content !important;
}

/* --- 10. WhatsApp chat panel (.message-layout) — readable text + clean font - */
/* The message <p> inside the white .msg-box has no colour rule → it inherited
   white and vanished on the white bubble. Force dark body text + the system
   font across the panel. (The #header name is white on a green gradient — that
   one is correct, so it's left alone.) */
#whatsapp-bloc .message-layout,
#whatsapp-bloc .message-layout .msg-box,
#whatsapp-bloc .message-layout .msg-box p,
#whatsapp-bloc .message-layout #client-msg {
    color: #303030 !important;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* Keep the sender label + timestamp as the intended muted grey (re-assert after
   the rule above, which would otherwise darken them). */
#whatsapp-bloc .message-layout .msg-box .name,
#whatsapp-bloc .message-layout .msg-box #time {
    color: rgba(0, 0, 0, .45) !important;
}
/* Readable placeholder in the reply input on the white send bar. */
#whatsapp-bloc .message-layout #client-msg::placeholder {
    color: #9aa0a6 !important;
}
/* Close (✕) button sits on the GREEN header but its SVG is grey → barely visible.
   Tint the img white via filter (brightness(0)=black, invert(1)=white). */
#whatsapp-bloc .message-layout #close-layout-btn .close-svg {
    filter: brightness(0) invert(1) !important;
}
#whatsapp-bloc .message .name {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Full-width content on the pages that have NO left column: the homepage (#homepagecolumn2
   / #homepagecolumn3) and the product detail page (#product / #productContent, which also
   killed the right-hand white space there). styles.css + the managed @media block size
   these as calc(100% - <rail>px) for a rail that these pages never render, leaving side
   white space; #main-content #col (0,2,0) beats the bare-id @media rules (0,1,0).
   DELIBERATELY NOT touched: #categorymain / #maincolumn / #main-with-left-nav — those DO
   carry a left column on category / account pages, and forcing them to 100% dropped the
   content below the left column. They keep their original theme layout. */
#main-content #homepagecolumn2,
#main-content #homepagecolumn3,
#main-content #product,
#main-content #productContent {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Nudge the product title down 2px (visual offset, doesn't disturb surrounding flow). */
#productTitle {
    position: relative !important;
    top: 2px !important;
}

/* Homepage bottom row (#hp_blocks): the three info boxes —
   "Sélectionner un fabricant" / "Promotions" / "Service Client" — were
   fixed-width floats (~331px each, body 299px) that left a big empty gap on the
   wider 2026 shell and did not reflow on small screens. Lay them out as a
   responsive flex grid: three equal, equal-height cards that fill the available
   width on desktop and stack on phones. Scoped to .homepage so the PRODUCT
   page's #hp_blocks (related-items column) keeps its own block layout.

   IMPORTANT — these columns (4/5/6) are rendered with defer="true", so for real
   browsers each column's content is wrapped in a lazy-load <div class="mv-lazy-col">
   that AJAX-swaps to .mv-lazy-col-loaded (see ContentColumn.cs). The live direct
   children of #hp_blocks are therefore the lazy wrappers — NOT bare .hp_blk — so
   the layout must target the wrappers, with .hp_blk kept as a fallback for the
   crawler/inline render path. */
.homepage #hp_blocks {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    overflow: visible;
}
/* Wrappers + bordered boxes at ANY depth inside the row: drop the fixed
   331px/299px widths and floats and become flex columns that fill their parent,
   so the three cards line up edge-to-edge and match heights. (Declared first so
   the top-level rule below wins flex-basis for the direct children.) */
.homepage #hp_blocks .mv-lazy-col,
.homepage #hp_blocks .mv-lazy-col-loaded,
.homepage #hp_blocks .hp_blk {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto !important;
}
/* The three TOP-LEVEL cards = equal thirds. Covers the deferred wrappers
   (.mv-lazy-col / .mv-lazy-col-loaded), the static .weekly_specials column, and
   the bare .hp_blk crawler-render fallback. Script/skeleton nodes are
   display:none, so they take no slot. */
.homepage #hp_blocks > .mv-lazy-col,
.homepage #hp_blocks > .mv-lazy-col-loaded,
.homepage #hp_blocks > .weekly_specials,
.homepage #hp_blocks > .hp_blk {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
}
/* Drop the bodies' fixed 299px so the bordered area fills the card. */
.homepage #hp_blocks .hp_blk_body {
    width: auto !important;
    flex: 1 1 auto;
    box-sizing: border-box;
}
/* Keep the manufacturer <select> / slideshow from forcing the first card wider
   than its share. */
.homepage #hp_blocks .hp_blk_body select,
.homepage #hp_blocks .hp_blk_body .slideshow { max-width: 100%; box-sizing: border-box; }

/* Stack the three boxes on phones / small tablets. */
@media (max-width: 768px) {
    .homepage #hp_blocks { flex-direction: column; }
    .homepage #hp_blocks > .mv-lazy-col,
    .homepage #hp_blocks > .mv-lazy-col-loaded,
    .homepage #hp_blocks > .weekly_specials,
    .homepage #hp_blocks > .hp_blk { width: 100% !important; }
}

/* ============================================================================
   ListRotator — modern look for the "screen" (left banner) + "thumbnails"
   (right product list).

   WHY THIS LIVES HERE (and not only in /Scripts/ListRotator/css/list-rotator.css):
   the render controller injects that plugin stylesheet in the page BODY with a
   `?v=<file-ticks>` cache-buster that is BAKED INTO the block's HTML — and that
   HTML is server-cached for 60 min. So after an edit, the cached page keeps
   pointing the browser (and the F5 LB) at the OLD `?v=` URL, and the previously
   fetched CSS keeps being served until the cache expires / the pool recycles.
   custom.css instead loads in the HEAD on every request (mtime cache-busted by
   <sys:css>), so edits here land immediately. It loads before the body sheet, so
   these rules carry !important to win over both styles.css and the plugin sheet.
   Scoped to .containerrotator = the plain ListRotator block only.
   ============================================================================ */

/* Card frame: one rounded, hairline-bordered surface (the screen + thumb panel
   are clipped to it by the plugin's overflow:hidden). */
.containerrotator .l-rotator {
    border: 1px solid var(--site-border, #e3e6ea) !important;
    border-radius: 12px !important;
    background-color: var(--site-surface, #f6f6f6) !important;
}

/* ROOT-CAUSE FIX — the global `h1` rule in styles.css
   ( h1 { font-size:23px; font-weight:bold; line-height:27px; margin:12px 0 9px;
     padding:8px; background:url(assets/H1.png) ... } )
   leaks onto BOTH rotator headings, which are emitted as <h1>:
     • thumb row title  -> <h1 class='title'>
     • banner caption   -> <h1 class='adtext'>
   The previous .title rule only reset size/weight/colour, so each heading kept the
   8px padding, 12px top margin and the tiled H1.png texture — that is the oversized
   font + shoved-around text you saw. Strip the inherited chrome on both, then set a
   clean type scale. */
.containerrotator .l-rotator .title,
.containerrotator .l-rotator h1.title,
.containerrotator .l-rotator h1.adtext,
.containerrotator .l-rotator .adtext {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;          /* kill the H1.png texture behind the text */
    /* Modern sans stack (Montserrat/Ubuntu are loaded by content/webfonts.css) —
       never the leaked Tahoma from the global h1 rule. */
    font-family: Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Row label: a small, tidy single-line product name above the description. Kept
   compact (11px) and tracked slightly so it reads as a label, not a headline —
   accent-coloured from the Site-Settings link colour, ellipsis when too long. */
.containerrotator .l-rotator .title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .2px !important;
    color: var(--site-link, #5599cc);
    white-space: nowrap !important;       /* one tidy line… */
    overflow: hidden !important;
    text-overflow: ellipsis !important;   /* …truncated with an ellipsis, not clipped mid-word */
}

/* Banner caption heading: size it to the overlay, drop the giant h1 metrics. */
.containerrotator .l-rotator .adtext {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* HIDE THE BANNER CAPTION OVERLAY — for the active slide the plugin paints the
   per-item caption (a positioned <div> holding <h1 class='adtext'> + the brand
   links) ON TOP of the banner image. The banner images are self-contained promos
   (they already carry the product name / price baked in), so this overlay just
   duplicates and clutters them. Hide each slide's caption div (the li's non-.thumb
   <div>). !important beats the inline `display` the plugin sets to reveal it. The
   slide's click-through <a> links are separate elements and stay intact. */
.containerrotator .l-rotator .thumbnails li > div:not(.thumb) {
    display: none !important;
}

/* Hide the .inner-bg scrim (the translucent dark panel the plugin paints behind the
   slide caption). With the caption overlay hidden above, this scrim would otherwise
   sit as a dark box over the banner image. */
.containerrotator .l-rotator .inner-bg {
    display: none !important;
}

/* Hide the .textbox slide-caption container (the plugin reveals it for the active
   slide); the banner image is self-contained so the overlay is not needed. */
.containerrotator .l-rotator .textbox {
    display: none !important;
}

/* Thumbnail rows: a touch more breathing room + smooth paint-only transitions
   (NEVER width/height — the plugin bakes those inline at init). */
.containerrotator .l-rotator .thumbnails .thumb {
    padding-left: 14px !important;
    padding-right: 12px !important;
    padding-top: 5px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    /* TITLE-CLIP FIX: list-rotator.css sets `justify-content:center` on this flex
       column. The row has a plugin-fixed height; when title + description are taller
       than the row, centering clips the overflow EQUALLY top and bottom — so the
       title (the top line) disappears and only the description shows ("title not
       showing"). Top-align instead: the title is always visible at the top, and only
       an over-long description clips at the bottom. */
    justify-content: flex-start !important;
    /* Whole row uses the modern sans stack so the label + description match. */
    font-family: Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, sans-serif !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

/* Text placement inside the row box: the plugin markup nests the copy as
   <p><span class='title'><h1 class='title'>…</h1></span> description… </p>, and
   list-rotator.css adds a SECOND `padding-left:10px` on that <p> on top of the
   .thumb padding above — so the text sat double-indented and off to the right.
   Zero the <p> chrome and give title→description a small, even gap. */
.containerrotator .l-rotator .thumbnails .thumb p,
.containerrotator .l-rotator .thumbnails li p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;            /* secondary spec text, smaller than the label */
    font-weight: 400 !important;
    line-height: 1.25 !important;
    opacity: .85 !important;               /* mute relative to inherited colour — works on
                                              both light rows and the white selected row */
}
/* Small gap between the title line and the description below it. Row height is fixed
   by the plugin and .thumb is overflow:hidden, so any extra description simply clips —
   no fragile line-clamp needed (and a clamp on this <p> would also catch the title). */
.containerrotator .l-rotator .thumbnails .title {
    margin-bottom: 2px !important;
}

/* ----------------------------------------------------------------------------
   SPECIFICITY OVERRIDE — beats the blanket rule at styles.css:4547:
     #main-content p,div,span,a,li,… { font-size:12px !important }
   That rule is ID-scoped (#main-content), and an ID outranks ANY number of
   classes — so even with !important the `.containerrotator …` rules above lose to
   it, and the row description text was silently pinned to 12px (only the <h1>
   title shrank, because `h1` isn't in that list). The rotator renders inside
   #main-content, so we re-assert our sizes with the SAME #main-content id PLUS our
   classes (1 id + 4 classes + 1 element > 1 id + 1 element) and win cleanly.
   Font-family is already Montserrat globally (styles.css:4545-4546); this is only
   about size. If a future change moves the block out of #main-content, the
   un-prefixed rules above still apply (and 4547 no longer would either). */
#main-content .containerrotator .l-rotator .thumbnails .thumb p,
#main-content .containerrotator .l-rotator .thumbnails li p {
    font-size: 10px !important;
}
/* Inline links / spans / bold inside a row follow the row size, not the blanket 12px. */
#main-content .containerrotator .l-rotator .thumbnails .thumb a,
#main-content .containerrotator .l-rotator .thumbnails .thumb span,
#main-content .containerrotator .l-rotator .thumbnails .thumb b {
    font-size: inherit !important;
}
#main-content .containerrotator .l-rotator .title,
#main-content .containerrotator .l-rotator h1.title {
    font-size: 14px !important;
}

/* ----------------------------------------------------------------------------
   TITLE-COLLAPSE FIX — at init the wtListRotator plugin REWRITES each row to:
       <div class='thumb' style='height:50px' (flex column)>
         <p><span class='title'></span></p>            (emptied)
         <h1 class='title'>NAME</h1>                    (the title, now a flex child)
         NAME description text…                          (bare text node)
       </div>
   The .thumb is a fixed-height flex column, so its items SHRINK to fit — the <h1>
   title collapses to 0 height and disappears. Pin the title with flex-shrink:0 so
   it always keeps its line; the description (the flex text node) absorbs the rest
   and clips via the row's overflow:hidden. !important beats the plugin's inline. */
.containerrotator .l-rotator .thumbnails .thumb h1.title {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;        /* never shrink — the title line stays visible */
    height: auto !important;
    min-height: 1.2em !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
}
/* The plugin leaves two empty <p> husks in the row; keep them from eating row height. */
.containerrotator .l-rotator .thumbnails .thumb > p {
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.containerrotator .l-rotator .thumbnails .thumb > p:empty {
    display: none !important;
}

/* Hover: flat theme-aware tint + a thin accent bar on the leading edge
   (replaces the old slidershow_images_over.png texture). */
.containerrotator .l-rotator .thumbnails li.item-over .thumb {
    background: #eef2f7 !important;
    background: color-mix(in srgb, var(--site-button-bg, #497bae) 9%, var(--site-surface, #f6f6f6)) !important;
    box-shadow: inset 3px 0 0 var(--site-button-bg, #497bae) !important;
}

/* Selected: keep the solid accent fill (from the base rule) + a bright leading
   bar and subtle top highlight so the active product clearly stands out. */
.containerrotator .l-rotator .thumbnails li.selected .thumb {
    background: var(--site-button-bg, #497bae) !important;
    color: var(--site-button-text, #ffffff) !important;
    box-shadow: inset 4px 0 0 var(--site-button-text, #ffffff),
                inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* Thumbnail image (when shown, or when embedded in the row description): tidy
   rounded chip on a white plate, scaled to fit. */
.containerrotator .l-rotator .thumb img {
    border-radius: 6px !important;
    background: #fff !important;
    object-fit: contain !important;
    border: 1px solid var(--site-border, #e3e6ea) !important;
    margin-right: 8px !important;
}

/* Scroll knob: full-width rounded pill in the site accent colour. */
.containerrotator .l-rotator #knob {
    width: 6px !important;
    background-color: var(--site-button-bg, #497bae) !important;
    opacity: .85 !important;
    border-radius: 3px !important;
}

/* Play/pause control panel: softer rounded translucent pill. */
.containerrotator .l-rotator .cpanel {
    background: rgba(17, 24, 39, .55) !important;
    border-radius: 8px !important;
    padding: 2px !important;
}

/* ============================================================================
   Modern AJAX loading indicator (#divLoading).

   #divLoading is the spinner shown while category / manufacturer (and search /
   product) pages page, sort, or filter via AJAX. marocdata.js toggles it with
   startLoading()/stopLoading() (sets inline display:block / none) — so we must
   NOT set `display` here, or it would never hide. The theme rendered it as an
   old loading.gif in a 200x50 bordered box (styles.css:3765); this turns it into
   a clean centered card with a CSS spinner. Covers BOTH the <sys:loading> variant
   and the manufacturer-grid inline #divLoading (same id + .text-loading markup).
   ============================================================================ */
#divLoading {
    /* Fixed, centered OVERLAY + hidden by default. Without position it defaulted to
       static/in-flow and (on the product page, where no AJAX hides it) sat between the
       product name and the image as a big white block. position:fixed takes it out of
       flow (no gap); display:none hides it until marocdata.js startLoading() sets the
       INLINE display:block (inline beats this non-!important rule, so the spinner still
       shows; stopLoading() sets inline display:none again). */
    position: fixed !important;
    display: none;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    min-width: 150px !important;
    height: auto !important;
    padding: 24px 30px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .20) !important;
    text-align: center !important;
    z-index: 100000 !important;
}
/* Hide the legacy animated GIF. */
#divLoading img {
    display: none !important;
}
/* CSS spinner in place of the GIF — tinted to the site link colour. */
#divLoading::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto 14px !important;
    border: 4px solid rgba(0, 0, 0, .12) !important;
    border-top-color: var(--site-link, #2489ce) !important;
    border-radius: 50% !important;
    animation: mv-loading-spin .7s linear infinite !important;
    box-sizing: border-box !important;
}
#divLoading .text-loading {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
}
@keyframes mv-loading-spin {
    to { transform: rotate(360deg); }
}

/* "Ce produit n'est plus proposé à la vente" badge: drop it onto its own line
   BELOW the .mv-stock-badge (which is inline-flex, so the span otherwise sits to
   its right). display:table keeps the red box shrink-wrapped to its text. */
.sf-ui-pinfo__nolonger {
    display: table-cell;
    padding: 7px 11px;
    margin-left: 0;
    margin-top: 8px;
}

/* Category page: gap above the breadcrumb trail and the left filter rail. */
.breadcrumbs,
#categoryleft {
    margin-top: 15px;
}

/* Product page only: drop the breadcrumb trail 5px lower than the category default (15 -> 20px).
   Scoped via :has(.mv-product-head) so the category breadcrumb is unaffected. */
#main-content:has(.mv-product-head) .breadcrumbs {
    margin-top: 20px !important;
}

/* Vendor-price toggle switch: breathing room around it. */
.ibutton-container {
    margin: 8px;
}

/* ============================================================================
   Product gallery — Amazon / Abt style: a VERTICAL thumbnail rail to the LEFT
   of the main image (instead of a strip underneath / in the info column).

   The thumbnails (#additionalimages) were moved into #imgProduct in
   product-default.html, and the horizontal jcarousel init was disabled in
   product.config.js, so the list stacks vertically and scrolls when long.
   ============================================================================ */
#imgProduct {
    display: flex !important;
    flex-direction: row;
    /* Top-align (NOT center): hovering a thumbnail swaps #imgMain to that image,
       and catalog images have different heights, so the row height changes on every
       hover. With align-items:center that height change re-centered the whole
       thumbnail rail, making it jump up/down ("moving weird"). flex-start pins the
       rail to the top so only the main image grows/shrinks downward. */
    align-items: flex-start;
    gap: 10px;
}
/* Main image fills the space left of the rail. */
#imgProduct .productimage {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    order: 2;            /* rail first (left), main image second (right) */
}
/* The thumbnail rail. */
#imgProduct #additionalimages {
    flex: 0 0 auto;
    width: 114px;
    order: 1;
    margin-top: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow: visible;
}
/* Clipped window the thumbnails are paged inside by the arrows (JS adds it). */
#imgProduct #additionalimages .mv-thumb-viewport {
    width: 85px;
    max-height: 456px;
    overflow: hidden;
}
/* Up / down paging arrows — borderless soft chevrons (Abt style).
   JS shows them only when the list overflows. */
#imgProduct .mv-thumb-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 77px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: #9aa7c2;
    cursor: pointer;
    box-sizing: border-box;
}
#imgProduct .mv-thumb-arrow:hover {
    color: var(--site-primary, #1d4ed8);
    background: none;
}
#imgProduct .mv-thumb-arrow:disabled {
    opacity: .4;
    cursor: default;
    color: #9aa7c2;
}
#imgProduct .mv-thumb-arrow svg {
    width: 60px;
    height: 45px;
    display: block;
    fill: none;
    stroke: var(--site-primary, #1d4ed8);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Vertical spacing around the jcarousel container. */
.jcarousel-skin-tango { margin: 12px 0; }
/* In the left rail, match the sidemenu box gutter. */
#homepagecolumn1 .jcarousel-skin-tango { margin: 0 24px 24px 24px !important; }
.jcarousel-skin-tango .jcarousel-container { background: #fff !important; }

/* ============================================================================
   Inline "Ask MV" card (.mv-ask-underimg-wrap > .mv-ask-card, built by
   mv-ai-assist.js) — bolt + title, suggested-question chips, input + send,
   like Screenshot_42. Scoped under #main-content so the theme's blanket
   "#main-content div{font-size:12px !important}" can't shrink the text.
   ============================================================================ */
#main-content .mv-ask-underimg-wrap { text-align: left; }
#main-content .mv-ask-card {
    border: 1px solid #e6e8eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;
}
#main-content .mv-ask-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 16px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1f2a37 !important;
}
#main-content .mv-ask-card-head strong { font-weight: 700 !important; font-size: 17px !important; }
#main-content .mv-ask-card-bolt { flex: 0 0 auto; }
#main-content .mv-ask-card-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
#main-content .mv-ask-card-chip {
    display: inline-block !important;
    padding: 11px 20px !important;
    border-radius: 22px !important;
    border: 1px solid #bcdcfb !important;
    background: #e8f3fe !important;
    color: #0f63d2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background-color .15s, border-color .15s !important;
}
#main-content .mv-ask-card-chip:hover { background: #d6eafd !important; border-color: #9fc9f6 !important; }
#main-content .mv-ask-card-form { margin-top: 16px !important; }
#main-content .mv-ask-card-pill {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #d0d7de !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding-right: 48px !important;
}
#main-content .mv-ask-card-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    color: #1f2a37 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
#main-content .mv-ask-card-input::placeholder { color: #8a93a0 !important; }
#main-content .mv-ask-card-send {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #0f63d2 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
#main-content .mv-ask-card-send:hover { background: #0c52ad !important; }

/* Horizontal padding on the carousel track. */
#mycarousel { padding: 0px 20px !important; }

/* Each carousel item in #mycarousel sizes to its content. */
#mycarousel li { height: -webkit-fit-content !important; height: fit-content !important; }

/* Carousel item name link weight. */
#lnkItemName { font-weight: 500; }

/* Carousel product-name (#lnkItemName): 14px, but clamped to 2 lines so a long
   name can't push the price past the carousel clip (skin.css
   `.jcarousel-clip-vertical{height:540px;overflow:hidden}`) and get cut off.
   The theme sets `.myCarouselListItem #lnkItemName{font-size:12px}` (0,1,1) which
   beats a bare `#lnkItemName` (0,1,0), so we win with !important (theme has none).
   `#mycarousel` scope covers SameProductCategory (bare <li>) AND the
   myCarouselListItem carousels (LastProductsViewed). */
#mycarousel #lnkItemName,
#mycarousel #lnkItemName b {
    font-size: 14px !important;
    line-height: 1.2 !important;
}
#mycarousel #lnkItemName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* SameProductCategory cards carry large (≤200px) product images; cap the image so
   the 2-line name + price always fit inside the 540px clip and the price line is
   never cut off. (Small-image carousels are already under this cap.) */
#mycarousel li #lnkItemImg img {
    max-height: 160px !important;
    width: auto !important;
    object-fit: contain;
}

/* ============================================================================
   SameProductCategory rail cards (.mv-related-row #mycarousel li):
   turn the plain image + name + price stack into a modern product card —
   soft white card, rounded corners, hairline border, hover lift + image
   zoom + branded name/price.

   SCOPE NOTE: jCarousel STRIPS the `jcarousel-skin-tango` class off the <ul>
   at init (it re-wraps the carousel in a new <div class="jcarousel-skin-tango">),
   so a `#mycarousel.jcarousel-skin-tango` selector stops matching after init.
   These rules are therefore scoped to `.mv-related-row #mycarousel` — both
   stable post-init: `.mv-related-row` is the wrapper jcarousel.config.js creates,
   and the <ul> keeps its #mycarousel id. This also keeps the product-image
   thumbnail rail (#thumbnails, in #imgProduct, NOT in .mv-related-row) and the
   LastProductsViewed #mycarousel (not in .mv-related-row) untouched.
   !important is used only where the tango skin's two-class item rules would
   otherwise out-specify these card rules.
   ============================================================================ */
.mv-related-row #mycarousel li {
    box-sizing: border-box !important;
    background: transparent;
    /* No border/background/shadow at rest — a transparent border reserves the
       1px so the card doesn't shift when the hover border appears. */
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 12px 16px !important;
    margin: 0 2px 14px !important;
    text-align: left;
    box-shadow: none;
    /* Card height now follows content: the fixed image height + the fixed 3-line
       name slot + single-line price already make every card equal height, so no
       min-height floor is needed (it only left empty space below the prices). */
    min-height: 0;
    transition: box-shadow .18s ease, border-color .18s ease, border-radius .18s ease, transform .18s ease;
    overflow: hidden;
    /* Live-price text node (emitted bare by the controller after the name):
       branded, bold, prominent. The name link overrides colour/size/weight
       below via its higher-specificity #lnkItemName rules, so only the price
       text inherits this. */
    color: #2e7d32;
    font-size: 15px;
    font-weight: 700;
}
.mv-related-row #mycarousel li:hover {
    /* On hover: reveal a border in the site colour, square the corners, and lift
       the card up a little more. */
    border-color: var(--site-primary, #1d4ed8);
    border-radius: 0;
    transform: translateY(-9px);
}

/* Image: left-aligned block, rounded, gentle zoom-in-frame on hover. */
.mv-related-row #mycarousel li #lnkItemImg {
    display: block;
    margin: 0 0 10px;
}
/* Uniform image size across every card: fixed box, contain (keep aspect, no crop
   or distortion) so all thumbnails render at the same dimensions. */
.mv-related-row #mycarousel li #lnkItemImg img {
    width: 100% !important;
    height: 130px !important;
    object-fit: contain !important;
    border-radius: 8px;
    transition: transform .25s ease;
}
.mv-related-row #mycarousel li:hover #lnkItemImg img { transform: scale(1.05); }

/* Quick View: reveal the trigger when hovering anywhere on the card (the base
   quick-view.css only reveals on .mv-quickview-host:hover). The host is the
   image box, so this is just a wider hover target. */
.mv-related-row #mycarousel li:hover .mv-quickview-trigger {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

/* Product name: dark + normal weight, centered, hover to the brand colour. */
.mv-related-row #mycarousel li > p { margin: 0 0 8px; }
.mv-related-row #mycarousel #lnkItemName {
    color: #1f2a37 !important;
    font-weight: 500 !important;
    text-decoration: none;
    transition: color .15s ease;
}
.mv-related-row #mycarousel li:hover #lnkItemName { color: var(--site-primary, #1d4ed8) !important; }

/* Rating stars row (shown only when the product has approved reviews): compact,
   left-aligned, sitting between the name and the price. The .mv-rating-stars /
   .mv-rstar glyphs themselves are already styled globally in this file. */
.mv-related-row #mycarousel li .mv-related-rating { margin: 0 0 6px; text-align: left; line-height: 0; }
.mv-related-row #mycarousel li .mv-related-rating #review,
.mv-related-row #mycarousel li .mv-related-rating #pnlReviewDisplay,
.mv-related-row #mycarousel li .mv-related-rating .ProductReviewRating { margin: 0 !important; padding: 0 !important; }
.mv-related-row #mycarousel li .mv-related-rating .reviews_link { background: none !important; padding: 0 !important; text-decoration: none !important; }

/* Promo old price (<strike> prefix on the bare price node): muted + smaller,
   so the live green price stays the focal point. */
.mv-related-row #mycarousel li strike {
    color: #98a2b3;
    font-weight: 400;
    font-size: 13px;
    margin-right: 4px;
}

/* Price on a single line (no wrap), left-aligned — like Screenshot_8. Colour
   left untouched (inherits the existing price colour). */
.mv-related-row #mycarousel li #productPrices_prices,
.mv-related-row #mycarousel li .your-price {
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
}
/* Drop the styles.css `.small-TTC { margin:-2px 0 }` on the TTC/HT mention
   inside the related row. */
.mv-related-row .small-TTC {
    margin: 0 !important;
}

/* Price-drop badge (.mv-pricedrop) — a text pill rendered by ProductInfo.cs
   directly BELOW the price block (replaces the old absolutely-positioned
   reduce-alert.gif). Amber pill with a small down-arrow, matching the storefront
   badge language. */
/* #pricewrapper is a flex row, so the badge would sit BESIDE #productPrices_prices.
   Let the row wrap and make the badge full-width so it drops onto its own line
   directly BELOW the price (Screenshot_52). */
#productContent #pricewrapper {
    flex-wrap: wrap !important;
}
#productContent .mv-pricedrop {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    margin: 6px 0 8px;
}
#productContent .mv-pricedrop span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #f6a821, #e8731c);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(232, 115, 28, .35);
}
#productContent .mv-pricedrop span::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Cpath%20d='M7%2010l5%205%205-5z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Customer-notification body: no margin, no padding. */
.sf-cb-custnotif__body,
#homepagecolumn1 .sf-cb-custnotif__body:first-child {
    margin: 0 !important;
    padding: 0 !important;
}

/* Customer-notification field: rounded corners + the merchant-configured site
   font (the Menu/site font setting; form controls otherwise fall back to the
   browser's default UI font). */
.customernotification .customernotificationfield {
    border-radius: 6px;
    font-family: var(--site-menu-font, Arial, Helvetica, sans-serif);
}

/* jcarousel VERTICAL prev/next arrows (e.g. #mycarousel rail): drop the arrow.png
   sprite and use the SAME stroked-chevron arrows as #additionalimages above. The
   skin gives these empty divs a sprite background + per-state background-position;
   we replace the image with an inline-SVG data URI (gray at rest, primary on
   hover, dimmed when disabled) and pin background-position to center so the
   sprite shifts no longer apply. !important wins over the skin's load order. */
.jcarousel-prev-vertical,
.jcarousel-next-vertical {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}
.jcarousel-prev-vertical {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa7c2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2015l8-7%208%207'/%3E%3C/svg%3E") !important;
}
.jcarousel-next-vertical {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa7c2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209l8%207%208-7'/%3E%3C/svg%3E") !important;
}
.jcarousel-prev-vertical:hover,
.jcarousel-prev-vertical:focus,
.jcarousel-prev-vertical:active {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d4ed8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2015l8-7%208%207'/%3E%3C/svg%3E") !important;
    background-position: center !important;
}
.jcarousel-next-vertical:hover,
.jcarousel-next-vertical:focus,
.jcarousel-next-vertical:active {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d4ed8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209l8%207%208-7'/%3E%3C/svg%3E") !important;
    background-position: center !important;
}
.jcarousel-prev-disabled-vertical,
.jcarousel-prev-disabled-vertical:hover,
.jcarousel-prev-disabled-vertical:focus,
.jcarousel-prev-disabled-vertical:active,
.jcarousel-next-disabled-vertical,
.jcarousel-next-disabled-vertical:hover,
.jcarousel-next-disabled-vertical:focus,
.jcarousel-next-disabled-vertical:active {
    background-position: center !important;
    opacity: .4;
}

/* Center the vertical prev/next arrows horizontally within the carousel.
   The tango skin pins them at a fixed `left` (e.g. 23%); override to the
   horizontal center of .jcarousel-container-vertical regardless of arrow width. */
.jcarousel-container-vertical .jcarousel-prev-vertical,
.jcarousel-container-vertical .jcarousel-next-vertical {
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
}

/* ============================================================================
   FULL-WIDTH HORIZONTAL related-products row (.mv-related-row).
   js/jcarousel/jquery.jcarousel.config.js lifts the SameProductCategory
   carousel OUT of the tab rail into a row BELOW the tab content, kept in the
   LEFT column (.st_view_container + the row are wrapped in .mv-related-col so
   they stack; the rail stays on the right) and
   inits it horizontal (vertical:false). These rules span the row to the product
   width and lay the cards out left-to-right. skin.css is <link>-injected in the
   BODY (later in the cascade than this file), so the horizontal container / clip
   / arrow overrides use !important to win. The card surface itself is styled by
   the `.mv-related-row #mycarousel li` block earlier in this file (reused as-is).
   ============================================================================ */
.mv-related-row {
    width: 100%;
    /* Clear empty space ABOVE so this panel reads as a SEPARATE card from the tab
       content above — the gap shows the blue .mv-tabs-body background between the
       two white cards. */
    margin: 32px 0 4px;
    box-sizing: border-box;
    display: inline-block;
    /* Distinct "Produits similaires" panel: white card, hairline border, rounded,
       padded, clearly separated from the tab content above. Side padding is 0 so
       the title and the cards both align to the 44px arrow gutter below. */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 0 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* Section heading (injected by jquery.jcarousel.config.js) — left-aligned title
   with the item count, indented to the 44px card gutter so it lines up with the
   first card, full-width hairline divider beneath. */
.mv-related-row .mv-related-title {
    margin: 0 0 8px;
    padding: 0 44px 10px;
    border-bottom: 1px solid #eef0f3;
    font-size: 18px !important;
    font-weight: 700;
    color: #1f2a37;
    text-align: left;
}
.mv-related-row .mv-related-title .mv-related-count {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 6px;
}

/* Scrollbar below the cards (built by jquery.jcarousel.config.js): a slim track
   with a draggable thumb bordered in the site colour, reflecting/controlling the
   carousel position. Aligned to the 44px card gutter. */
.mv-related-row .mv-related-scroll {
    position: relative;
    height: 7px;
    margin: 12px 44px 6px;
    background: #eef0f3;
    border-radius: 999px;
    cursor: pointer;
}
.mv-related-row .mv-related-scroll__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 28px;
    box-sizing: border-box;
    background: var(--site-primary, #1d4ed8);
    border-radius: 999px;
    transition: left .2s ease;
}

/* Container + clip fill the row width (the tango skin pins them to 320px).
   NB: only the CONTAINER / CLIP are forced to 100% — never the list (the <ul>,
   which keeps its .jcarousel-skin-tango class after init and must stay wide
   enough to hold every card for horizontal scrolling). */
.mv-related-row .jcarousel-container-horizontal {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 44px 0 !important;   /* leave room for the side arrows */
    /* jCarousel sizes the container inline from the <li> inline height:270px the
       render controller emits, leaving a tall empty gap below the shorter cards.
       Force it to follow content. */
    height: auto !important;
}
/* Kill the tango skin's own rounded box (skin.css draws border+radius on
   .jcarousel-container) so the .mv-related-row panel is the ONLY frame — no
   inner box, title and cards share one clean panel. */
.mv-related-row .jcarousel-container {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.mv-related-row .jcarousel-clip-horizontal {
    width: 100% !important;
    height: auto !important;
}
/* The <ul> becomes the scrolling list; kill the `.jcarousel-skin-tango{margin:12px 0}`
   vertical margin and the `#mycarousel{padding:0 20px}` rail padding that would
   otherwise offset it inside the clip. */
.mv-related-row .jcarousel-list,
.mv-related-row #mycarousel {
    margin: 0 !important;
    /* Top pad so a hover-lifted card (translateY(-9px)) doesn't get its top
       border clipped by the clip's overflow:hidden. */
    padding: 14px 0 0 !important;
    height: auto !important;
}

/* Row cards: NO fixed width here — jcarousel.config.js computes each card's width
   from the row width so exactly N fit per view (6 on desktop) and sets it inline.
   A CSS width would override that and break the N-up fit. Just set the side gutters
   (6px+6px = the GUTTER the JS assumes), drop the vertical-stack bottom margin, and
   let height follow content. Comes after the (1,1,1) card-surface rule above, so at
   equal specificity it wins on order. */
.mv-related-row #mycarousel li {
    margin: 0 6px !important;
    height: auto !important;
    float: left;
}

/* Name wrapper <p>: left-align the name block within the card, and RESERVE a
   fixed 3-line slot (3 x 13px x 1.25 ≈ 49px) so the price below always starts at
   the same Y on every card — prices line up across the row regardless of name
   length. Name is top-aligned within the slot. Scoped to the DIRECT-child <p>
   (the name) so it never hits the price <p class='your-price'>, which is nested
   inside #productPrices_prices. */
.mv-related-row #mycarousel li > p {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 49px !important;
}

/* Product name: 50% of the card width, compact (small 13px), clamped to 3 lines
   with a trailing ellipsis (…) — overrides the global 2-line clamp on
   `#mycarousel #lnkItemName`. -webkit-box + line-clamp + overflow:hidden produce
   the triple-dot truncation past 3 lines. */
.mv-related-row #mycarousel #lnkItemName {
    width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

/* Prev/next arrows: drop the arrow.png sprite for the same stroked chevrons used
   on the vertical rail (left/right variants), vertically centered on the row. */
.mv-related-row .jcarousel-prev-horizontal,
.mv-related-row .jcarousel-next-horizontal {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
}
.mv-related-row .jcarousel-prev-horizontal {
    left: 4px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa7c2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%204l-7%208%207%208'/%3E%3C/svg%3E") !important;
}
.mv-related-row .jcarousel-next-horizontal {
    right: 4px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa7c2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204l7%208-7%208'/%3E%3C/svg%3E") !important;
}
.mv-related-row .jcarousel-prev-horizontal:hover,
.mv-related-row .jcarousel-prev-horizontal:focus,
.mv-related-row .jcarousel-prev-horizontal:active {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d4ed8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%204l-7%208%207%208'/%3E%3C/svg%3E") !important;
}
.mv-related-row .jcarousel-next-horizontal:hover,
.mv-related-row .jcarousel-next-horizontal:focus,
.mv-related-row .jcarousel-next-horizontal:active {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d4ed8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204l7%208-7%208'/%3E%3C/svg%3E") !important;
}
.mv-related-row .jcarousel-prev-disabled-horizontal,
.mv-related-row .jcarousel-next-disabled-horizontal {
    opacity: .4;
    cursor: default;
}

#imgProduct #additionalimages #thumbnails,
#imgProduct #additionalimages .Thumbnails {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 77px !important;
    margin: 0;
    padding: 0;
    list-style: none;
}
#imgProduct #additionalimages #thumbnails li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}
#imgProduct #additionalimages #thumbnails li:hover {
    border-color: var(--site-primary, #1d4ed8);
}
#imgProduct #additionalimages #thumbnails li a {
    display: block;
    padding: 2px;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
#imgProduct #additionalimages #thumbnails li img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Main product image: never overflow its column. */
#imgProduct #divMainImg img {
    max-width: 100% !important;
}
/* Self-contained product image magnifier (product.config.js setupZoom). The wrap
   shrink-wraps the image so the overlay aligns exactly to it; the overlay paints a
   scaled-up copy of the image as its background (no-repeat) and fades in on hover. */
#imgProduct #divMainImg .mv-zoom-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    cursor: crosshair;
}
/* Lens rectangle over the image marking the region shown in the side panel. */
#imgProduct #divMainImg .mv-zoom-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    display: none;
    pointer-events: none;
    z-index: 3;
}
/* Magnified "window" floated to the right of the image (over the info column while
   hovering, Amazon-style). Sized in JS to match the image height. High z-index so it
   sits above the price/cart panel. */
#imgProduct #divMainImg .mv-zoom-panel {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 16px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.20);
    overflow: hidden;
    display: none;
    pointer-events: none;
    z-index: 1000;
}
#imgProduct #divMainImg .mv-zoom-lens.is-on,
#imgProduct #divMainImg .mv-zoom-panel.is-on {
    display: block;
}
/* The side panel needs horizontal room; below the tablet breakpoint the layout reflows
   and there is none, so disable the hover-zoom there (touch devices don't hover anyway). */
@media (max-width: 991px) {
    #imgProduct #divMainImg .mv-zoom-lens,
    #imgProduct #divMainImg .mv-zoom-panel {
        display: none !important;
    }
}

/* Product detail card (#productContent): rounded corners + soft shadow. */
#productContent {
    border-radius: 21px !important;
    box-shadow: #8080802e 0px 0px 27px !important;
}

/* Product title: shrink-wrap to its text. */
#main-content > h1.mv-product-title {
    display: inline-flex;
}

/* Manufacturer logo + product title on one row. */
.mv-product-head {
    display: flex;
    align-items: center;
    margin-bottom: 19px;
}

/* Mobile/tablet only: give the product detail card top spacing + inner top
   padding (matches the theme's ≤992px product reflow). Needs 2 IDs to beat the
   managed block's `body #productContent { padding:…!important }` (specificity
   1,0,1) — `#main-content #productContent` is 2,0,0 and wins regardless of order. */
@media (max-width: 992px) {
    #main-content #productContent {
        margin-top: 16px !important;
        padding-top: 38px !important;
    }
}

/* Suggested-items header: drop the blue gradient bar — transparent header with
   the button-colour title at 16px. The managed block paints the gradient + white
   text via `#suggested-items-pane .header *` (1,1,0) !important, so prefix with
   #main-content (2,1,0) to win regardless of load order. */
#main-content #suggested-items-pane .header {
    background: transparent !important;
}
#main-content #suggested-items-pane .header *,
#main-content #suggested-items-pane .gh_text {
    background: transparent !important;
    color: var(--site-button-bg, #396b9e) !important;
    font-size: 16px !important;
}

/* Product page: place the related-items column (#hp_blocks, from
   <sys:productrelateditems>) to the RIGHT of the compact "Ask MV" inline card
   (#mv-ai-inline-box, injected by js/mv-ai-assist.js right after #productMain).
   Both are siblings inside #product, each a 50% column (AI card left, related
   items right).

   The managed MV-SITE-THEME block in styles.css pins #product #hp_blocks to
   width:100% / float:none / display:block via several (0,2,0) !important rules
   (it normally forces the related box full width). To win we need BOTH higher
   specificity AND !important — `body #product #hp_blocks` is (0,2,1), which beats
   every (0,2,0) !important rule regardless of source order. overflow:hidden makes
   #hp_blocks a block-formatting context so it contains the inner .detailedList
   floats — without it the box collapses to ~0 height (the "broken height"). */
body #product #mv-ai-inline-box {
    float: left !important;
    clear: left !important;
    width: 46% !important;
    max-width: 46% !important;
    margin: 22px 0 !important;
    box-sizing: border-box !important;
}
body #product #hp_blocks {
    float: right !important;
    clear: none !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    margin: 22px 0 0 !important;
    display: block !important;
    overflow: visible !important; /* don't clip the inner .sidemenu's box-shadow */
    box-sizing: border-box !important;
}
/* The bordered inner box fills the 46% column and carries the card shadow.
   overflow:hidden here makes .sidemenu a block-formatting context so it contains
   the inner .detailedList product-line floats (real height) — and it does NOT
   clip the element's own outset box-shadow. */
body #product #hp_blocks > .sidemenu,
body #product #hp_blocks > .hp_blk {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18) !important;
}
/* Drop the per-row border on the related-items list rows inside #homepagecolumn2
   (theme .detailedList .product-line sets a 1px solid border). The .sidemenu card
   shadow already frames the box. */
#homepagecolumn2 .detailedList .product-line {
    border: 0 !important;
    height: -webkit-fit-content !important;
    height: fit-content !important;
}

/* Promotion badge (#divPromo) in product-list rows: replace the plain red
   "[[InPromotion]]" text link + legacy corner GIF with a modern gradient pill
   (tag icon + uppercase label). HTML contract unchanged — pure CSS. */
#divPromo .product_discount_adverts {
    position: static !important; /* no longer an anchor for the (now hidden) corner GIF */
    border: 0 !important;
}
#divPromo .product_discount_adverts img {
    display: none !important; /* hide the legacy prod_saving_br_corner.gif */
}
#divPromo #aPromo {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    color: #fff !important;
    background: linear-gradient(135deg, #ff5a5a, #d32f2f) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(211, 47, 47, .35);
    transition: box-shadow .15s ease, background .15s ease, transform .15s ease;
}
#divPromo #aPromo::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Cpath%20d='M21.41%2011.58l-9-9C12.05%202.22%2011.55%202%2011%202H4c-1.1%200-2%20.9-2%202v7c0%20.55.22%201.05.59%201.42l9%209c.36.36.86.58%201.41.58s1.05-.22%201.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5%207C4.67%207%204%206.33%204%205.5S4.67%204%205.5%204%207%204.67%207%205.5%206.33%207%205.5%207z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
#divPromo #aPromo:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #ff6b6b, #e53935) !important;
    box-shadow: 0 3px 10px rgba(211, 47, 47, .45);
    /* No hover lift (user rule: buttons don't move on hover). */
}
/* Rows below must drop under the two floated columns, full width. */
#product #mv-ask-inline,
#product #st_horizontal,
#product .products-suggested,
#product #suggested-items-pane {
    clear: both !important;
}
/* Stack to one column on tablets/phones (matches the theme's product reflow). */
@media (max-width: 992px) {
    body #product #mv-ai-inline-box,
    body #product #hp_blocks {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Price + add-to-cart on ONE line, with the price block to the LEFT of the
   add-to-cart block. #addToCart comes first in the DOM (and a .clear sits
   between them), so #titleDesc becomes a flex row and `order` swaps them. */
#rightContent #titleDesc {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
#rightContent #titleDesc > .clear { display: none; }
/* price block keeps its natural width on the LEFT; the add-to-cart cluster takes
   the remaining room on the RIGHT and is allowed to shrink (its button flexes). */
#rightContent #titleDesc #pricewrapper { order: 1; flex: 0 0 auto; width: 40%; }
#rightContent #titleDesc #addToCart { order: 2; flex: 1 1 auto; min-width: 0; max-width: 54%; justify-content: flex-end; }
/* when the cart sits beside the price, let its primary button shrink to fit
   (label wraps instead of clipping when the column is narrow). */
#rightContent #titleDesc #addToCart ._buttons { min-width: 0; flex: 1 1 auto; }
#rightContent #titleDesc #addToCart ._buttons .mv-btn--primary.mv-btn--lg {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    text-align: center;
}
/* Mid desktop (993-1260px): the two-column layout makes #rightContent only ~50%
   of the page, too narrow for the price + #addToCart row side-by-side. Let
   #titleDesc wrap so #addToCart drops full-width below the price (no overflow). */
@media (min-width: 993px) and (max-width: 1260px) {
    #rightContent #titleDesc { flex-wrap: wrap; }
    #rightContent #titleDesc #addToCart {
        flex: 1 1 100%;
        max-width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
}

/* Main price (.your-price): larger type + vertical padding. The size needs the
   #productContent #productPrices_prices specificity + !important to beat the
   theme's 14pt rule; padding is uncontested. Tweak the values as needed. */
#productContent #productPrices_prices .your-price,
#productContent #productPrices_prices .your-price span {
    font-size: 22px !important;
}
#productContent #productPrices_prices .your-price {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Product layout (DESKTOP only). #imgProduct now lives OUTSIDE the form, as a
   sibling of it inside #productMain. Lay the gallery and the form side-by-side
   with the form at 62%; the gallery takes the rest with space between them.
   The theme serves tablet/mobile the stacked layout up to 992px, so this
   min-width:993px guard leaves mobile + tablet untouched. */
@media (min-width: 993px) {
    #productMain {
        display: flex;
        justify-content: space-between;
        margin-top: 14px;
        margin-bottom: 16px;
    }
    /* left column: reviews row stacked ABOVE the product image, both in one container */
    #productMain > .mv-img-col {
        width: 45%;
    }
    /* image fills the column; reviews row centered above it */
    #productMain > .mv-img-col > #imgProduct { width: 100% !important; }
    #productMain > .mv-img-col > .mv-reviews-top { display: flex; justify-content: center; text-align: center; }
    /* compare button below the image, centered */
    #productMain > .mv-img-col > .mv-pdp-compare { display: flex; justify-content: center; margin-top: 12px; width: 100%; }
    #productMain > form {
        width: 50%;
    }
    /* The info column now fills the form (the gallery is no longer inside the card). */
    #productContent #rightContent {
        max-width: 100% !important;
    }
    /* Breathing room around the product form. Desktop only. */
    #product > form {
        margin: 24px !important;
    }
}

/* On small screens, drop the rail below the main image so it doesn't squeeze it,
   and lay the thumbnails out on ONE horizontal line that scrolls sideways
   (instead of wrapping onto several rows). */
@media (max-width: 768px) {
    body #productContent {
        padding: 36px 16px 16px 16px !important;
    }
    #imgProduct {
        flex-direction: column;
    }
    #imgProduct .productimage { order: 1; }
    #imgProduct #additionalimages {
        order: 2;
        width: 100%;
        max-height: none;
        overflow: visible;
    }
    /* Up/down paging arrows are for the vertical desktop rail — hide on mobile. */
    #imgProduct .mv-thumb-arrow { display: none !important; }
    /* The JS paging window becomes a full-width horizontal scroller. */
    #imgProduct #additionalimages .mv-thumb-viewport {
        width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Thumbnails: single row, no wrapping, horizontal scroll. */
    #imgProduct #additionalimages #thumbnails,
    #imgProduct #additionalimages .Thumbnails {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100% !important;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    #imgProduct #additionalimages #thumbnails li {
        flex: 0 0 auto;
        width: 64px !important;
    }
}

/* "You save" line (#Peconomie): use its former text color (orange) as the
   background and turn the text white. */
#Peconomie {
    background: orange !important;
    color: white !important;
    padding: 6px 12px;
    border-radius: 6px;
    width: fit-content;
    font-weight: bold;
}

.sf-cb-ptabs__imglink {
    align-items: self-start !important;
}

.sf-cb-ptabs__media {
    height: 57% !important;
}

.sf-cb-ptabs__card {
    max-height: 282px;
}

/* ============================================================================
   Section band header (.products_header) — the category & manufacturer listing
   "band" title. Match the "EN PROMOS" promo header: a thin full-width gradient
   underline with a small rounded gradient "tab" (the title) sitting on it.
   Colours follow the DB-driven --site-header-* tokens. !important so it beats
   the base styles.css .products_header band rule AND any leftover MV-SITE-THEME
   rule that is still in the deployed managed block (custom.css loads last). */
.products_header {
    position: relative !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 20px 0 14px !important;
    text-align: left !important;
}
.products_header::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--site-header-start, #6facd5), var(--site-header-end, #497bae)) !important;
    border-radius: 2px !important;
    z-index: 0 !important;
}
.products_header a {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 0 24px !important;
    padding: 7px 18px 6px !important;
    background: linear-gradient(135deg, var(--site-header-start, #6facd5), var(--site-header-end, #497bae)) !important;
    color: var(--site-header-text, #fff) !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border-radius: 6px 6px 0 0 !important;
    text-decoration: none !important;
}

/* ============================================================================
   Scroll-to-top button (.mv-totop) — created by js/mv-totop.js, revealed past
   ~300px scroll. Pinned bottom-RIGHT, 12% up from the bottom. Colours follow
   the DB-driven --site-button-* tokens. left:auto + !important so it overrides
   whatever the deployed managed block currently sets for its position. */
.mv-totop {
    position: fixed !important;
    right: 20px !important;
    left: auto !important;
    bottom: 12% !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--site-button-bg, #396b9e) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 9998 !important;
    padding: 0 !important;
}
.mv-totop.is-on { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.mv-totop:hover { background: var(--site-button-hover, #2e5680) !important; }
.mv-totop svg { width: 22px !important; height: 22px !important; fill: currentColor !important; display: block !important; }

/* ============================================================================
   Product "shorty" slider (.mv-shorty*) + lazy-column skeleton loaders
   (.mv-lazy-col / .mv-skel*). Moved here from the managed theme CSS so the
   custom.css layer owns them. Colours follow the DB-driven --site-* tokens.
   ============================================================================ */
.mv-shorty{position:relative;margin:0 0 16px;border:none;border-radius:0;padding:14px 22px;box-sizing:border-box;}.mv-shorty .editBlock{position:absolute;top:4px;right:4px;z-index:5;}.mv-shorty-title{display:inline-block;margin:0 0 12px;padding:6px 16px;font-size:16px;font-weight:bold;border-radius:0;line-height:1.3;}.mv-shorty-viewport{position:relative;overflow:hidden;}.mv-shorty-track{display:flex;gap:22px;margin:0;padding:0;list-style:none;transition:transform .4s ease;will-change:transform;}.mv-shorty-card{flex:0 0 calc((100% - (var(--mvs-n,5) - 1) * 22px) / var(--mvs-n,5));min-width:220px;max-width:none;overflow:hidden;box-sizing:border-box;border:1px solid #eef0f2;border-radius:10px;padding:10px;text-align:center;background:#fff;position:relative;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s;}.mv-shorty--banner .mv-shorty-card{min-width:300px;padding:0;border:none;border-radius:12px;}.mv-shorty--banner .mv-shorty-media{aspect-ratio:16/9;margin-bottom:8px;}.mv-shorty--banner .mv-shorty-imglink{padding-right:0;justify-content:center;max-height: 182px;left:0;right:0;bottom:0;top:0;}.mv-shorty--banner .mv-shorty-img{max-width:90%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0 auto;}.mv-shorty--banner .mv-shorty-name{padding:0 8px;}.mv-shorty--banner .mv-shorty-price,.mv-shorty--banner .mv-shorty-sku{padding:0 8px;}.mv-shorty-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);border-color:#cfd4da;}.mv-shorty-badge{position:absolute;top:48px;right:8px;background:#e30613;color:#fff;font-size:12px;font-weight:bold;line-height:1;padding:4px 7px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:8;pointer-events:none;}.mv-shorty-promo{position:absolute;top:80px;right:8px;z-index:9;background:#e30613;color:#fff;font-size:11px;font-weight:bold;line-height:1;padding:4px 7px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25);text-decoration:none;}.mv-shorty-logo{position:absolute;top:8px;left:8px;z-index:4;background:transparent;padding:0;line-height:0;}.mv-shorty-logo img{max-width:80px;max-height:28px;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);}.mv-shorty-media .mv-flags{position:absolute;left:8px;bottom:8px;top:auto;right:auto;z-index:6;display:flex;flex-direction:column-reverse;gap:3px;align-items:flex-start;pointer-events:none;}.mv-shorty-actions .mv-btn{width:100%;justify-content:center;}.mv-shorty-media{position:relative;width:85%;margin:10px auto 10px;aspect-ratio:4/3;}.mv-shorty-imglink{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}.mv-shorty-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto;}.mv-shorty-titlewrap{width:100%;}.mv-shorty-rating{margin:2px 0 4px;}.mv-shorty-rating #review,.mv-shorty-rating .ProductReviewRating{margin:0;}.mv-shorty-mfr{font-size:11px;color:#8a8f98;text-transform:uppercase;font-weight:bold;letter-spacing:.3px;min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.mv-shorty-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-weight:bold;color:#222;text-decoration:none;margin:2px 0;line-height:1.3;height:36px;min-height:36px;max-height:36px;overflow:hidden;text-overflow:ellipsis;}.mv-shorty-name:hover{color:var(--site-link-hover,#3399ff);}.mv-shorty-sku{font-size:11px;color:#555;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.mv-shorty-price{font-size:16px;font-weight:bold;margin-bottom:8px;line-height:1.2;}.mv-shorty-price .siteprice,.mv-shorty-price .price,.mv-shorty-price span{font-size:16px !important;font-weight:bold !important;}#main-content .mv-shorty-price,#main-content .mv-shorty-price .siteprice,#main-content .mv-shorty-price .price,#main-content .mv-shorty-price span{font-size:16px !important;font-weight:bold !important;}.mv-shorty-actions{margin-top:auto;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}.mv-shorty-act{display:inline-block;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:bold;text-decoration:none;cursor:pointer;}.mv-shorty-details{background:#f0f2f5;color:#333;}.mv-shorty-details:hover{background:#e2e6ea;}.mv-shorty-cart{background:var(--site-button-bg,#2c3e50);color:#fff;}.mv-shorty-cart:hover{opacity:.9;}.mv-shorty-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid #d0d5db;background:rgba(255,255,255,.95);border-radius:50%;cursor:pointer;font-size:18px;line-height:1;color:#333;display:flex;align-items:center;justify-content:center;padding:0;z-index:4;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:background .15s,color .15s,border-color .15s;}.mv-shorty-prev{left:5px;}.mv-shorty-next{right:5px;}.mv-shorty-btn:hover{background:var(--site-button-bg,#2c3e50);color:#fff;border-color:transparent;}
.mv-lazy-col{min-height:300px;}.mv-skel{padding:6px 0 22px;}.mv-skel__title{height:24px;width:260px;max-width:55%;margin:0 0 18px;border-radius:6px;background:#eceff3;position:relative;overflow:hidden;}.mv-skel__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}.mv-skel__card{height:240px;border-radius:10px;background:#eceff3;border:1px solid #eef0f2;position:relative;overflow:hidden;}.mv-skel__title::after,.mv-skel__card::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:mv-shimmer 1.4s infinite;}@keyframes mv-shimmer{100%{transform:translateX(100%);}}@media (max-width:576px){.mv-skel__row{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}.mv-skel__card{height:200px;}}

/* (Old single-banner #iconPromo gradient block removed — consolidated into the
   sprite block near the top of this file.) */

/* ============================================================================
   Product detail tabs (.st_tabs) — modern centered look (Screenshot_40).
   The sliding-tabs plugin (jquery.slidingtabs.js) + its base CSS
   (ProductTemplate/css/slidingtabs-horizontal.css) render an old boxed tab
   strip with a horizontal scroller. slidingtabs-horizontal.css is injected by
   <sys:customheader> AFTER custom.css on product pages, so every rule below
   uses !important to win regardless of load order.

   Look: tab group centered, no surrounding box, a faint full-width divider
   under the row; the ACTIVE tab is a light-blue rounded pill with a blue
   border, inactive tabs are plain grey text. Tabs that fit stay static (the
   plugin only scrolls/shows its arrows when they overflow — which they no
   longer do once centered), and extra tabs simply wrap to a second centered
   row instead of scrolling.
   ============================================================================ */

/* Hide the prev/next scroll arrows — pills are centered, never scrolled. */
#st_horizontal a.st_prev,
#st_horizontal a.st_next { display: none !important; }

/* Tab bar: full width, centered content, no box, just a thin bottom divider. */
#st_horizontal div.st_tabs_container {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--site-border, #e8eaed) !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#st_horizontal ul.st_tabs {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;        /* pin: plugin sets margin-left only on overflow */
    padding: 0 !important;
    text-align: center !important;
}

#st_horizontal ul.st_tabs li {
    float: none !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

/* Inactive tab = plain grey text in a transparent pill (transparent border so
   the box doesn't shift width when a tab becomes active). */
#st_horizontal ul.st_tabs li a.st_tab {
    display: block !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #5f6368 !important;
    text-decoration: none !important;
    background: transparent none !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

#st_horizontal ul.st_tabs li a.st_tab:hover {
    color: #202124 !important;
    background: #f5f7fa !important;
}

/* Active tab = light-blue rounded pill with a blue border. */
#st_horizontal ul.st_tabs li a.st_tab.st_tab_active,
#st_horizontal ul.st_tabs a.st_tab_active {
    color: #1f2a37 !important;
    font-weight: 600 !important;
    background: #eaf2fe !important;
    border: 1px solid var(--site-link, #4d8df0) !important;
    border-radius: 6px !important;
}

/* Content area: strip the box off the outer container and move the bordered
   "card" design onto the inner slide container (.st_view), narrowed to 75% and
   centered via flex. (.st_tab_view is forced position:relative in styles.css,
   so the panels flow normally inside the narrowed card.) */
#st_horizontal div.st_view_container {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;          /* override the plugin's inline px width */
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
}

#st_horizontal div.st_view {
    height: auto !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06) !important;
}

/* 90% only on desktop; <=992 the responsive rule (styles.css) keeps the card
   full-width so it doesn't shrink to a narrow strip on tablet/phone. */
@media (min-width: 993px) {
    #st_horizontal div.st_view { width: 90% !important; }
}

/* ============================================================================
   Spec / "Caractéristiques techniques" tab (e.g. #st_content_1, .span6 table):
   zebra-striped label | value rows like Screenshot_41. The handler emits a flat
   <div class="span6"><table> of <td class="span3">label</td>
   <td class="productTypeValue">value</td> rows (no group headers in our data).
   Out-specifies styles.css:11191 (#product table:has(td.productTypeValue) td).
   ============================================================================ */
#st_horizontal .st_tab_view .span6 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
#st_horizontal .st_tab_view .span6 > table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 14px !important;
}
#st_horizontal .st_tab_view .span6 > table tr {
    background: #ffffff !important;
}
#st_horizontal .st_tab_view .span6 > table tr:nth-child(odd) {
    background: #f5f5f5 !important;
}
#st_horizontal .st_tab_view .span6 > table td {
    padding: 14px 18px !important;
    border: 0 !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #444 !important;
}
#st_horizontal .st_tab_view .span6 > table td.span3 {
    width: 50% !important;
    font-weight: 700 !important;
    color: #222 !important;
}
#st_horizontal .st_tab_view .span6 > table td.productTypeValue {
    font-weight: 400 !important;
    color: #444 !important;
}

/* ============================================================================
   Sidemenu boxes (.sidemenu): "Menu Rapide", category-tree menus, checkout
   sections, suggested-items / related-items panes, RSS boxes — all share the
   theme .sidemenu chrome. Lighten it: transparent header, the title in the
   button colour, and a soft grey shadow on the box instead of the 1px border.
   (custom.css loads after styles.css; !important also wins on product pages
   where ProductTemplate CSS loads later.)
   ============================================================================ */
.sidemenu {
    border: 0 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18) !important;
    margin: 0 24px 24px 24px !important;
    border-radius: 12px !important;
}

.sidemenu_body {
    padding: 0 16px 16px 16px !important;
}

.sidemenu .header {
    background: transparent !important;
    padding: 16px !important;
}

.sidemenu .header .header_title {
    color: var(--site-button-bg, #4F7CC2) !important;
    font-size: 14px !important;
    padding: 0px !important;
    padding-top: 0 !important;
}

/* Homepage left rail = 20% of the page width (was a fixed 240px), main column
   takes the rest minus the 20px gutter. Desktop only: <=992 the responsive
   rules still hide the rail and make #homepagecolumn2 full width, and the
   empty-rail rule (#homepagecolumn1:not(:has(*))) still wins where it applies. */
@media (min-width: 993px) {
    #homepagecolumn1 { width: 20% !important; }
    #homepagecolumn2 { width: calc(80% - 20px) !important; }
}

/* Category tree: drop the left/right side borders (styles.css:1322). */
#treeCategory {
    border-left: none !important;
    border-right: none !important;
}

#criteresSearchLeft {
    margin: 16px 0 16px 0 !important;
}

/* Criteria filter header (.criteria_header) -> same design as the sidemenu
   .header: transparent background, button-colour title text, 14px bold, 16px
   padding. Overrides the managed gradient/white rules (styles.css:11156 & 11206). */
#criteresSearchLeft .criteria_header {
    background: transparent !important;
    color: var(--site-button-bg, #4F7CC2) !important;
    padding: 16px !important;
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

#criteresSearchLeft .criteria_header a {
    color: var(--site-button-bg, #4F7CC2) !important;
}

#criteresSearchLeft .criteria_header span {
    background: none !important;
}

/* Content gutter (desktop): 36px left/right, no top/bottom. <=992 keeps the
   responsive 6px padding from styles.css. */
@media (min-width: 993px) {
    #main-content { padding: 0px 36px !important; }
    /* HOME PAGE = edge-to-edge (per user 2026-06-20): the 36px gutter left ~30px of
       white space on both sides of the home page. Zero it on home only (other pages
       keep the gutter) so the sliders/banners AND the content blocks reach the edges.
       Full-bleed sliders already break out via 100vw; this fixes the rest. */
    #main-content:has(.homepage) { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ============================================================================
   Product page layout (desktop): #productMain spans the FULL page width, and the
   tab block fills it too. Inside #st_horizontal the handler emits the tab strip
   (.st_tabs_container) on top, then ONE wrapper (.mv-tabs-body) holding the tab
   content (.st_view_container) on the left and the column-500 rail
   (#homepagecolumn1) on the right — that wrapper is the light-blue panel.
   <=992 the responsive rules stack everything (rail hidden).
   ============================================================================ */
@media (min-width: 993px) {
    /* Product column full width (overrides the 80/20 + managed 240px split,
       product page only — column2 directly wraps #product). */
    #homepagecolumn2:has(> #product) {
        width: 100% !important;
    }

    /* Tab block fills the full product width (override the slidingtabs inline
       width measured from #productMain). */
    #product #st_horizontal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    /* The shared wrapper: tab content (left) + rail (right) in one light-blue panel.
       Full-bleed to the viewport: width 100vw and margin-left/right calc(50% - 50vw)
       re-centers it on the viewport so the blue spans the whole screen edge to edge. */
    #product .mv-tabs-body--rail {
        display: flex !important;
        align-items: flex-start;
        gap: 24px;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        background: #eef4fc;
        border-radius: 0 !important;
        padding: 16px 36px;
        box-sizing: border-box !important;
    }
    #product .mv-tabs-body--rail .st_view_container {
        flex: 1 1 auto !important;
        width: 100% !important;       /* force full width: a product with a rich .mv-prod-side box flips
                                         this into the rail flex layout, and width:auto + min-width:0 let
                                         it COLLAPSE, clipping the "Caracteristiques" / criteria tab. */
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* In the rail layout the spec/criteria card must fill the column (the 90% desktop
       rule above would otherwise leave it a narrow centered strip). */
    #product .mv-tabs-body--rail .st_view_container .st_view {
        width: 100% !important;
    }
    /* jquery.jcarousel.config.js wraps .st_view_container + the related row in
       this column so they stack on the LEFT, below the content, with the rail
       still to the right. The wrapper takes over as the flex:1 left column. */
    #product .mv-tabs-body--rail .mv-related-col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #product .mv-tabs-body--rail .mv-tabs-rail {
        flex: 0 0 22%;
        width: 22% !important;
        max-width: 22% !important;
        margin: 0 !important;
        float: none !important;
    }

/* FULL-BLEED UTILITY (.mv-fullbleed) — handled by js/mv-fullbleed.js, which MEASURES each
   element's real left offset and pulls it to the viewport edge (parent-independent, works no
   matter how deeply the element is nested in the centered content). CSS here only provides a
   containment hint; the JS owns position/width/margins. Desktop only (the JS no-ops < 992px). */
.mv-fullbleed{box-sizing:border-box;}
    /* Content card fills its (now narrower) column next to the rail. */
    #product .mv-tabs-body--rail .st_view {
        width: 100% !important;
    }

/* ============================================================
   Product share buttons (#socialButtons) — pill layout with
   the platform name shown next to each icon.
   Overrides the managed MV-SITE-THEME block in styles.css,
   which hides .sh-label and renders icon-only chips.
   custom.css loads last, so these win without touching the
   generated block.
   ============================================================ */
#socialButtons #text.sharing-cl,
#socialButtons ul.sharing-cl {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}
#socialButtons .sharing-cl li {
    display: inline-flex !important;
}
#socialButtons .sharing-cl li a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    color: #333;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#socialButtons .sharing-cl li a:hover {
    background: #f5f5f5;
    border-color: #bbb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
#socialButtons .sharing-cl li a .sh-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
}
/* Show the platform name (managed block hides it). */
#socialButtons .sharing-cl .sh-label {
    display: inline !important;
    white-space: nowrap;
}
} /* end @media (min-width: 993px) — product tabs + share buttons above */

/* ============================================================================
   Product GRID listing — reveal "Ajouter au panier" on hover as a drop-down
   "apron" BELOW the card, so nothing in the grid ever moves.

   In grid mode the cards are .cell-product inside .detailedList (list mode uses
   .product-line, so this is grid-only by construction). They render into
   `<div id="list">` (ProductsGrid.cs) — a CSS grid (styles.css ~11158).
   styles.css:11175 also carries a 3rd selector,
   `.detailedList .cell-product .block-addtocart{display:block}`, that otherwise
   pins the button permanently visible for these grid cards.

   The journey (all 2026-06-16): an IN-FLOW button always adds height somewhere —
   (a) reserved slot → permanent empty band; (b) collapsed slot + stretch → hovered
   card grew and dragged every sibling taller; (c) align-items:start → only the
   hovered card grew, but its taller grid ROW left short siblings floating over a
   gap; (d) absolute overlay pinned to the card BOTTOM → covered the price. The
   reference design the user picked keeps the price visible AND every other card
   frozen, which means the button must live OUT of flow and BELOW the card.

   So: the button is `position:absolute; top:100%` — it hangs just under the card
   as an apron (white, side+bottom border, rounded bottom, shadow), hidden by
   default, fading in on hover. Because it never enters any card's flow, no card
   changes height: the grid rows are fixed → same-row siblings AND the rows below
   all keep their place. On hover the card is raised (z-index) so the apron paints
   above the next row, and its bottom corners are squared so the apron reads as the
   card extending. `align-items:start` (below) makes each card hug its content so
   the apron sits right under the price. .cell-product is already position:relative
   (styles.css:11158). styles.css:11174 sets margin/padding on .block-addtocart with
   !important, so we override with !important. @media (hover:hover) leaves the button
   in normal flow on touch devices (no hover → otherwise unreachable); :focus-within
   keeps it keyboard-accessible.

   Resting note (updated 2026-06-18): cards are now equal height per grid row —
   `#list:has(.cell-product){align-items:stretch}` (below) makes every card take the
   row's tallest height, and `#list .cell-product .mv-card-price{margin-top:auto}`
   pins the price to the card bottom so prices align across the row and the apron
   stays flush under the price. This replaces the earlier align-items:start approach
   that let cards hug their content and come out uneven (the admin-only .ProductQte
   line + variable price lines made some cards taller than others).
   ============================================================================ */
/* IMPORTANT — specificity & source: the managed MV-SITE-THEME block in styles.css
   (regenerated by SiteThemeCss.cs on every admin Save — do NOT edit it directly)
   styles the grid add-to-cart control at styles.css:11174 with
   `:is(.detailedList,#list) .cell-product .block-addtocart .mv-btn{…border-radius:22px
   !important;width:100% !important}` and the wrapper with
   `…block-addtocart{margin-top:auto !important;padding:8px 0 0 !important}`. Because
   the `:is(.detailedList,#list)` raises specificity to (1,n,0) (the #list id), a
   plain `.detailedList …` selector (0,n,0) LOSES even with !important — that's why
   the button stayed a 22px pill with a top-padding gap. So every override below uses
   the SAME `:is(.detailedList, #list)` prefix (tie on specificity) + !important and,
   since custom.css loads AFTER styles.css, wins on source order. Using :is() also
   makes the apron work whether the page template carries the `.detailedList` class
   (category-grid) or only the `#list` wrapper (gridwithsubs / manufacturer-grid /
   comparator) — ProductsGrid always emits `<div id="list">`. */
@media (hover: hover) {
    :is(.detailedList, #list) .cell-product .block-addtocart {
        display: block !important;     /* beat styles.css:11175 base display:none */
        position: absolute;
        top: 100%;                     /* hang directly below the card */
        left: -1px;
        right: -1px;
        margin: -1px 0 0 !important;   /* -1px overlaps the card's bottom border (no seam);
                                          beats managed margin-top:auto !important */
        padding: 0 !important;         /* no inset: button fills the apron, flush to the
                                          card edges; beats managed padding:8px 0 0 */
        background: transparent;       /* the button itself is the visual, no white frame */
        border: 0;
        border-radius: 0 0 10px 10px;
        z-index: 30;
        visibility: hidden;
        opacity: 0;
        transition: opacity .12s ease;
        pointer-events: none;          /* don't block the row below while hidden */
    }
    /* The revealed control is a full-width bar flush to the card's bottom edge: the
       managed rule already makes it width:100%/flex, so here we only square the top
       corners and round the bottom to 10px (matching the card) — overriding the
       managed border-radius:22px pill — and add a shadow so it reads as the card
       extending downward. Covers every control variant (add-to-cart primary, the
       options/details ghost, the call-for-price quote button — all .mv-btn / a). */
    :is(.detailedList, #list) .cell-product .block-addtocart .mv-btn,
    :is(.detailedList, #list) .cell-product .block-addtocart a {
        border-radius: 0 0 10px 10px !important;
        box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .18);
    }
    /* Square the card's bottom corners on hover so it opens into the apron instead of
       reading as a closed card with a detached button. !important beats the managed
       `:is(.detailedList,#list) .cell-product{border-radius:10px}`. */
    :is(.detailedList, #list) .cell-product:hover,
    :is(.detailedList, #list) .cell-product:focus-within {
        z-index: 30;                                  /* apron paints above the next row */
        border-bottom-left-radius: 0 !important;      /* connect cleanly to the apron */
        border-bottom-right-radius: 0 !important;
    }
    :is(.detailedList, #list) .cell-product:hover .block-addtocart,
    :is(.detailedList, #list) .cell-product:focus-within .block-addtocart {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Uniform card height (user request 2026-06-18: "cards must be the same size, not
   one taller and one shorter"). The managed block (styles.css:11158) already wants
   `#list:has(.cell-product){align-items:stretch}` so every card in a grid row takes
   the tallest card's height; this used to be overridden to `start` so each card hugged
   its content and the hover apron sat right under the price. But hugging content makes
   cards uneven whenever the in-flow content differs — the admin-only `.ProductQte`
   line is present on some cards and absent on others, and price blocks vary (single
   vs struck-old-price). Restoring `stretch` equalizes the row. The name is already
   2-line-clamped and `.ProductStatus` is absolutely positioned over the image, so the
   only remaining variance is absorbed by the stretch. The price block below is pinned
   to the card bottom (margin-top:auto) so prices line up across cards AND the apron
   still hangs right under the price (no detached gap). Same single-class specificity
   as the managed rule; custom.css loads last + !important. */
#list:has(.cell-product) {
    align-items: stretch !important;
}
/* Pin the price block to the bottom of the (now equal-height) card so prices align
   on one baseline across the row and the hover add-to-cart apron sits flush beneath
   the price. margin-top:auto needs the flex-column context, which .cell-product has
   (styles.css:11158 `display:inline-flex;flex-direction:column`). Scoped to #list so
   only the main grid listing is affected (not the suggested-products carousel). */
#list .cell-product .mv-card-price {
    margin-top: auto !important;
}
/* Uniform card height ACROSS rows (user request 2026-06-26: "not all the cards are
   the same size"). The managed grid (styles.css:11156) sets align-items:stretch, which
   only equalizes cards WITHIN a row — rows themselves are auto-sized, so a row carrying
   the taller reseller price block (struck price + Revendeur line + HT + Comparer) comes
   out taller than a plain row, and cards look inconsistent down the page. grid-auto-rows:
   1fr makes every implicit row track equal to the tallest row, so every card on the page
   is the same height; the existing stretch fills each card and margin-top:auto keeps the
   price pinned to the bottom. Column-count media queries (styles.css:11178/11207) only
   touch grid-template-columns, so this single row rule applies at every breakpoint. Same
   selector/specificity as the managed grid; custom.css loads last + !important. */
#list:has(.cell-product) {
    grid-auto-rows: 1fr !important;
}

/* --- "Customers also bought" carousel: don't clip the hover apron ----------
   The suggested-products block (<sys:products-suggested>, on every product page)
   renders grid cards into `.mv-suggest-track.detailedList`, which is a horizontal
   scroller: styles.css:11111 (managed MV-SITE-THEME block) sets it
   `overflow-x:auto; padding:8px 2px 14px`. Because a scroll container can't be
   `overflow-x:auto` and `overflow-y:visible` at once (the visible axis computes to
   auto), the track clips vertically too — so each card's hover add-to-cart apron,
   which hangs ~40px BELOW the card (position:absolute; top:100%), was cut off at
   the track's 14px bottom edge. We can't drop the horizontal clip, so instead
   reserve enough bottom room in the track for the apron (button ~38px + its drop
   shadow): the apron then paints inside the padding box and shows in full. Same
   single-class specificity (0,1,0) as the managed rule; custom.css loads last and
   !important makes it robust against the managed `padding` shorthand. Fixes the
   block on every page (one rule on its own class). */
.mv-suggest-track {
    padding-bottom: 56px !important;
}

/* Remove the free space around the grid compare checkbox.
   styles.css:10720 sets `.cell-product .mv-grid-compare{margin:4px 0 8px}`;
   the 4px top margin opens a gap below the button and the 8px bottom margin
   leaves white space at the bottom of the card. custom.css loads last, so this
   same-specificity rule wins the cascade and pulls the checkbox up snug with no
   trailing space. */
.cell-product .mv-grid-compare {
    margin-top: 0;
    margin-bottom: 0;
}

/* ============================================================================
   Advanced search form (#SearchForm) — UI/UX modernization.

   Rendered in TWO places with the SAME markup:
     - Store/Views/Search/Index.cshtml
     - the <sys:searchfilter/> tag handler (code/TemplateEngine/TagHandlers/SearchFilter.cs)
   Both emit:
     #SearchForm (fieldset) > <legend> + (.block-search | .advenced-search)
       > table#SearchFormTable  with  td.formlabel / td.formfield,
         .forminput inputs and id'd <select>s (#KeywordField, #SortField, …).

   This turns the dated border="1" cell-bordered table into a clean card with
   consistent inputs. Targeting #SearchForm covers BOTH renderers in one place.
   Mobile stacking (rows -> blocks, full-width fields at <=992px) is already
   handled by the responsive band-aid in SiteThemeCss.cs, so these rules carry
   no media query and apply on top of it. custom.css loads LAST, so id-scoped
   selectors win the cascade without !important. Colours use the DB-driven
   --site-* tokens. (Added 2026-06-16.)
   ============================================================================ */

/* Card shell */
#SearchForm {
    border: 1px solid var(--site-border, #e3e6ea);
    border-radius: var(--site-radius, 8px);
    background: var(--site-surface, #fafafa);
    padding: 16px 22px 22px;
    margin: 0 0 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    box-sizing: border-box;
    /* <fieldset> defaults to min-width:min-content, so on a phone the card refuses
       to shrink below its content width (~425px) and overflows/clips on the right
       inside the narrower #categorymain. Force it to shrink to the available width. */
    width: 100%;
    min-width: 0;
}

/* Legend reads as the form heading; the searched keyword picks up the link colour */
#SearchForm > legend {
    font-size: 18px;
    font-weight: 700;
    color: var(--site-content-text, #2c3e50);
    padding: 0 8px;
    line-height: 1.3;
}
#SearchForm > legend .keywords-searched { color: var(--site-link, #0f63d2); }

/* Drop the legacy border="1"/cellspacing chrome; give the rows vertical rhythm */
#SearchForm .block-search,
#SearchForm .advenced-search { margin: 0; }
/* The tag-handler render wraps the table in .advenced-search, which styles.css
   gives its own solid 1px border — drop it so it doesn't double up with the
   #SearchForm card shell. Equal specificity, custom.css loads last. */
.advenced-search { border: none; }
#SearchFormTable {
    border: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
/* Two-column field layout so the wide card isn't mostly empty on the right.
   tbody is a 2-col grid; each <tr> is a grid cell laid out as label | field, and
   rows flow row-major (Mot clé | Trier par, Catégories | Fabricant, …). The
   responsive band-aid in SiteThemeCss.cs forces table/tbody/tr/td to block
   !important at <=992px, so phones fall back to a single-column stack. */
#SearchFormTable tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 56px;   /* row gap | column gap — vertical breathing room between fields */
    align-items: center;
}
#SearchFormTable tr {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
}
#SearchFormTable td {
    border: 0;
    padding: 0;
    display: block;
}

/* Label column */
#SearchFormTable td.formlabel {
    width: auto;
    padding-right: 14px;
    color: var(--site-content-text, #2c3e50);
    font-weight: 600;
    white-space: nowrap;
}
#SearchFormTable td.formlabel label { cursor: pointer; }

/* Inputs & selects — one consistent look, full width inside the field cell */
#SearchForm .forminput,
#SearchForm input[type=text],
#SearchForm select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--site-border, #cdd2d8);
    border-radius: var(--site-radius, 6px);
    background: #fff;
    color: var(--site-content-text, #2c3e50);
    font-size: 14px;
    line-height: 1.3;
    height: auto;
    transition: border-color .15s, box-shadow .15s;
}
#SearchForm .forminput:focus,
#SearchForm input[type=text]:focus,
#SearchForm select:focus {
    outline: 0;
    border-color: var(--site-link, #4F7CC2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-link, #4F7CC2) 20%, transparent);
}

/* Sort row carries two selects with an inline "Sens" label between them.
   The theme's styles.css forces `.advenced-search #SortField,#SortDirectionField
   { width:100px; height:20px }` (specificity 0,1,1,0) which out-specifies a bare
   id selector — so match that specificity here (custom.css loads last) to drop the
   fixed 20px height that squishes the styled select, on both renderers. */
#SortField,
#SortDirectionField,
.advenced-search #SortField,
.advenced-search #SortDirectionField { width: auto; min-width: 130px; height: auto; }
#SearchFormTable td.formfield label {
    margin: 0 8px 0 8px;
    color: var(--site-content-text, #2c3e50);
    font-weight: 600;
}

/* "Produits datant de" row: checkbox + select stay inline */
#trDateRange #DatingFrom,
#trDateRange input[type=checkbox] {
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}
#DateSelectField { width: auto; min-width: 160px; display: inline-block; }

/* Price min/max are narrow inline fields sharing the row with the submit button.
   The tag-handler render gives them only class="forminput" (no .sf-search-price),
   so also pin them by id — #SearchForm #PriceMinField (0,2,0,0) out-specifies the
   #SearchForm .forminput width:100% rule that would otherwise stretch the min field
   and push the "-" + max field off the card. */
#SearchForm .sf-search-price,
#SearchForm #PriceMinField,
#SearchForm #PriceMaxField { width: 110px; display: inline-block; }
#SearchForm .sf-search-price + label,
#SearchFormTable td.formfield label[for=PriceMaxField] { font-weight: 400; }

/* The "Go" submit (rendered as an <input type=image>): obvious & interactive */
#SearchForm input[type=image] {
    cursor: pointer;
    vertical-align: middle;
    margin-left: 10px;
    transition: opacity .15s, transform .05s;
}
#SearchForm input[type=image]:hover { opacity: .85; }
#SearchForm input[type=image]:active { transform: translateY(1px); }

/* "Résultats de votre Recherche" header (#recherche_2): styles.css gives it an
   orange #F60 colour, a bg_search.gif strip and a grey 1px border. Use the site
   text colour, a transparent background and no border. The .sf-search ancestor
   matches the highest-specificity theme rule (0,1,1,0); custom.css loads last. */
.sf-search #recherche_2,
#recherche_2 {
    color: var(--site-content-text, #2c3e50);
    background: transparent;
    border: none;
}

/* Sub-desktop: collapse the advanced-search form to a single column (label above
   its full-width field).

   The SiteThemeCss responsive band-aid emits, at <=992px:
       #SearchForm table,tbody,tr,td, .advenced-search table,tbody,tr,td
           { display:block !important }
   In this theme that block fallback renders BROKEN — the field `td` does not
   expand its `tr`, so each row collapses to the label height and the next label
   paints over the previous field. The desktop 2-column CSS grid (above), by
   contrast, lays the rows out correctly. So instead of accepting the band-aid's
   block mode we re-assert the grid and just collapse it to ONE column on small
   screens. Grid items always size to content, so the rows stack cleanly.

   The band-aid selectors carry one id (`#SearchForm tbody`, specificity 1,0,1);
   we out-specify with TWO ids (`#SearchForm #SearchFormTable tr`, 2,0,1) so our
   declarations win regardless of source order. We lay each row out as a flex
   column (label over field): unlike the band-aid's plain `display:block` — under
   which table box-fixup lets the field cell escape its row — a flex column always
   sizes to its items, so the field can never overflow the row. */
@media (max-width: 992px) {
    #SearchForm #SearchFormTable,
    #SearchForm #SearchFormTable tbody { display: block !important; }
    #SearchForm #SearchFormTable tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: static !important;
        float: none !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 14px !important;
    }
    #SearchForm #SearchFormTable tr:last-child { margin-bottom: 0 !important; }
    #SearchForm #SearchFormTable td {
        display: block !important;
        width: 100% !important;
        float: none !important;
        position: static !important;
        height: auto !important;
        vertical-align: baseline !important;
    }
    #SearchForm #SearchFormTable td.formlabel {
        text-align: left !important;
        white-space: normal !important;
        padding-right: 0 !important;
        margin: 0 0 5px !important;
        font-weight: 600;
    }
}

/* Very small phones: the two sort selects (each min-width:130px) + the inline
   "Sens" label, and the price min/max + "-" inputs, share one .formfield cell.
   On a ~320–480px screen that inline row is wider than the cell and would clip,
   so stack each control on its own full-width line. */
@media (max-width: 576px) {
    #SearchForm #SearchFormTable td.formfield { white-space: normal; }
    /* all scoped under #SearchForm so they can only touch the search form (the
       SortField/PriceMinField/etc. ids are also used by the SelectProductGrid admin
       editor, which renders mangled WebForms client-ids and never loads this CSS,
       but scope tightly anyway — and the 2-id specificity beats the desktop
       width:auto/min-width:130px rule above). */
    #SearchForm #SortField,
    #SearchForm #SortDirectionField,
    #SearchForm #DateSelectField,
    #SearchForm .sf-search-price,
    #SearchForm #PriceMinField,
    #SearchForm #PriceMaxField {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 4px 0;
        box-sizing: border-box;
    }
    /* inline "Sens :" / "-" separators get their own line between stacked controls */
    #SearchForm #SearchFormTable td.formfield label { display: block; margin: 4px 0; }
}

/* Search submit button (#btnsearch / its .btn-text-search label — rendered from
   DB/content, not in repo source). The theme's styles.css gives .btn-text-search a
   brown text-shadow, asymmetric padding and font-family:verdana. Drop the shadow,
   remove the padding, and use the site font. Equal-specificity class rule loaded
   after styles.css wins by load order — no !important needed. */
.btn-text-search {
    text-shadow: none;
    padding: 0;
    font-family: Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Search submit button weight */
#btnsearch,
#btnsearch .btn-text-search { font-weight: 500; }

/* Advanced-search submit button: zero its margins. styles.css gives
   .sf-ui-searchfilter__btn margin-left:30px and .btn-on a margin-right; the
   compound selector (0,0,2,0) out-specifies both, and custom.css loads last. */
.btn-on.sf-ui-searchfilter__btn { margin: 0; }

/* "Ce produit necessite" upsell card (#crosssells, rendered by
   <sys:productrelateditems> via the single-product-list.html row partial).
   Each row's .controls block — the "EN PROMOTION" pill (#divPromo) + the
   "Ajouter au panier" mv-btn — is absolutely positioned top-right by the row's
   inline style (`float:right;position:absolute;top:0;right:0`) plus the managed
   `.product-line .right-list .controls{right:5px}` rule, which overlapped the
   manufacturer name / price in this card (Screenshot_45).

   The catch: the card's width is capped by --product-box-width and does NOT
   track the viewport, so a fixed px media-query breakpoint can't tell whether
   there's room for a side-by-side row (wide at full screen = Screenshot_50, but
   narrow with DevTools open at the same 1408px body = Screenshot_49). So we use a
   CONTAINER query on the row itself:
     - default (narrow card, and the fallback if @container is unsupported) =
       STACK: promo pill + add-to-cart on top, name + price + title below, full
       width — no overlap, no crushed price.
     - wide card (row >= 620px) = two-column: name + price LEFT, promo + button
       RIGHT, on the same line.
   Scoped to #crosssells; wide category/manufacturer lists untouched. ID +
   !important beats the managed absolute/`right:5px` rules; custom.css loads
   last. */
#crosssells .product-line {
    container: upsellrow / inline-size;
}
#crosssells .product-line .right-list {
    display: flex !important;
    flex-direction: column;
}
#crosssells .product-line .right-list .controls {
    order: -1;                 /* promo + add-to-cart on top */
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    margin: 0 0 8px !important;
    display: flex;
    flex-direction: column;    /* #divPromo pill ABOVE the add-to-cart button */
    align-items: flex-end;     /* right-aligned */
    gap: 0;
}
/* Wide enough card: switch to a two-column top row. CSS grid keeps name+price and
   the controls in separate tracks (can't overlap); title / description / stock
   span the full width below. */
@container upsellrow (min-width: 620px) {
    #crosssells .product-line .right-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: start;
    }
    #crosssells .product-line .right-list > p:first-child {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
        min-width: 0;
    }
    #crosssells .product-line .right-list > .prices {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }
    #crosssells .product-line .right-list .controls {
        order: 0;
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: start;
        width: auto;
        margin: 0 !important;
    }
    #crosssells .product-line .right-list > *:nth-child(n + 4) {
        grid-column: 1 / -1;
    }
}

/* Product grid (#list, grid / "cell-product" mode): make the column count FLUID.
   The managed block (SiteThemeCss.cs) uses fixed columns — admin-set count above
   1200px, then 3 (<=1200) / 2 (<=992) / 1 (<=576) — keyed off the VIEWPORT. But
   the grid's real width also depends on whether the left filter rail is shown
   (body.mv-filters-collapsed widens it), so viewport breakpoints can leave cards
   too wide or too cramped. Replace them with auto-fill + minmax so the grid fits
   as many cards as its OWN width allows, down to a sensible min, at every size.
   - auto-FILL (not auto-fit): a short last row stays at card width instead of
     stretching 1-2 cards across the whole row.
   - Cells keep the managed `width:auto` (its #list base rule out-specifies the
     per-breakpoint `width:calc(100%/N)` rules), so they follow the tracks.
   - Only grid mode: #list:has(.cell-product). The LIST view (#list with
     .product-line) and the AJAX .detailedList toggle are untouched.
   custom.css loads last and carries the same specificity as the managed
   #list:has(.cell-product) rules (media queries add none), so this single
   non-media rule overrides them at all widths — no managed-block edit. */
/* Auto-fill override REMOVED (2026-06-20): repeat(auto-fill, minmax(210px,1fr))
   ignored the admin "Items per row" setting (SiteGridItemsPerRow, emitted by
   SiteThemeCss as #list:has(.cell-product){grid-template-columns:repeat(N,1fr)})
   and packed as many 210px cards as the width allowed — e.g. 6 when the merchant
   set 5. The managed block's repeat(gridCols) now controls the desktop column
   count, keeping its own responsive 3/2/1 breakpoints below 1200px.
   (If a fluid auto-fill is wanted again, make it honor the setting, don't hardcode.) */

/* Upsell card (#hp_blocks, "Ce produit necessite"): clamp the product short
   description to 2 lines with an ellipsis instead of dumping the full text. The
   partial sets `display:block` inline on .product-desc-link, and
   -webkit-line-clamp needs `display:-webkit-box`, so this needs !important to
   beat the inline style. custom.css loads last. */
#hp_blocks .product-desc-link {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 14px;
}

/* Upsell card (#hp_blocks): bump the selling/promo price up from the theme's
   `.size-listprice{font-size:9pt !important}` (styles.css) to 12pt. The
   #hp_blocks prefix (1 id + 1 class) out-specifies the theme rule (1 class), and
   custom.css loads last, so it wins over the theme's !important. */
#hp_blocks .size-listprice {
    font-size: 12pt !important;
}

/* Product detail price block (#productPrices_prices): bump the list/selling price
   from the theme's `.size-listprice{font-size:9pt !important}` (styles.css) to 13pt.
   The #productPrices_prices prefix (1 id + 1 class) out-specifies the theme rule
   (1 class), and custom.css loads last, so it wins over the theme's !important. */
#productPrices_prices .size-listprice {
    font-size: 13pt !important;
}

/* Upsell card (#hp_blocks): tighten the card body padding. */
#hp_blocks .sidemenu_body {
    padding: 0 10px 10px 10px !important;
}

/* Upsell card (#hp_blocks): small gap under the "EN PROMOTION" promo advert. */
#hp_blocks .detailedList .product_discount_adverts {
    margin-bottom: 2px;
}

/* Read-more for the product long description (#LongDescription, "Description"
   tab). js/mv-readmore.js adds the .mv-readmore--collapsed class + the button
   only when the text is long enough; this just styles the collapsed clamp (with a
   bottom fade) and the toggle button. */
#LongDescription.mv-readmore {
    position: relative;
}
#LongDescription.mv-readmore--collapsed {
    max-height: var(--mv-readmore-max, 320px);
    overflow: hidden;
}
#LongDescription.mv-readmore--collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.mv-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 8px 18px;
    border: 1.5px solid var(--site-button-bg, #2563eb);
    background: #fff;
    color: var(--site-button-bg, #2563eb);
    border-radius: 22px;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.mv-readmore-btn:hover {
    background: var(--site-button-bg, #2563eb);
    color: #fff;
}

/* Product-page "Ask MV" inline box spacing tweaks. The base styles live in
   content/mv-ai.css, which is injected by js/mv-ai-assist.js and can load AFTER
   custom.css, so use !important to win regardless of order. */
#mv-ai-inline-box {
    padding: 34px 13px !important;            /* was 11px 13px */
}
#mv-ai-inline-box .mv-ai-inline-chips {
    gap: 12px !important;                      /* was 6px */
}
#mv-ai-inline-box .mv-ai-inline-chip {
    padding: 13px 13px !important;            /* was 5px 11px */
}

/* ============================================================================
   PRODUCT CARD UI/UX — extracted inline styles + state classes
   (.claude/tasks/product-card-ux). All product-card overrides live here so the
   theme-core styles.css stays untouched. custom.css loads last.
   ============================================================================ */

/* --- Subtask 002: inline styles moved off the grid template ---------------- */
/* Price block left padding (was inline style="padding-left:14px" on the div). */
.cell-product .mv-card-price {
    padding-left: 14px;
}
/* Admin-only available-qty line (was inline padding-left:15px;font-weight:bold). */
.cell-product .ProductQte {
    padding-left: 15px;
    font-weight: bold;
}
/* Semantic stock-status aliases — emitted ALONGSIDE .siteprice / .yousave so the
   existing badge appearance (green / orange pills, sized by styles.css's
   .ProductStatus rules) is preserved. Kept as hooks for future theming; no
   declarations on purpose so they never fight the existing badge styling. */
.mv-stock-in  { /* in-stock — see .siteprice */ }
.mv-stock-out { /* out-of-stock / on-order — see .yousave */ }

/* --- Subtask 003: add-to-cart button loading / success states -------------- */
.mv-btn.is-adding {
    opacity: .65;
    cursor: wait;
    pointer-events: none;
}
.mv-btn.is-added {
    background: #2e7d32 !important;
    border-color: #2e7d32 !important;
    color: #fff !important;
    pointer-events: none;
}
/* Same states on the full-width apron button (grid hover panel). */
.detailedList .cell-product .block-addtocart .mv-btn.is-adding,
.detailedList .cell-product .block-addtocart a.is-adding {
    opacity: .65;
    cursor: wait;
    pointer-events: none;
}
.detailedList .cell-product .block-addtocart .mv-btn.is-added,
.detailedList .cell-product .block-addtocart a.is-added {
    background: #2e7d32 !important;
    border-color: #2e7d32 !important;
    color: #fff !important;
    pointer-events: none;
}

/* --- Subtask 005: at-rest discoverability affordance ----------------------- */
/* The add-to-cart apron is hover-only on pointer devices, so a first scan gives
   no signal the card is interactive. Instead of a colored accent line at the card
   bottom (removed 2026-06-18 at user request), give every card a soft resting
   drop-shadow so it reads as a raised, tappable surface. On hover the managed
   block (styles.css:11158 `:is(.detailedList,#list) .cell-product:hover{box-shadow:
   0 6px 18px rgba(0,0,0,.08)}`, specificity (1,0,2)) lifts it further — that rule
   out-specifies this resting one (1,0,1), so the hover elevation still wins. Same
   single base specificity as `:is(.detailedList,#list) .cell-product`; custom.css
   loads last. Guarded by @media (hover:hover) so it tracks the same pointer-device
   affordance the line used to. */
@media (hover: hover) {
    :is(.detailedList, #list) .cell-product {
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }
}

/* --- Add-to-cart breathing room (user request 2026-06-18) ------------------
   Mechanism (verified): styles.css:11158 forces the card to content-height
   (`min-height:0 !important; height:auto !important`) and custom.css `#list:has(
   .cell-product){align-items:start}` makes each card hug its content — so the
   flex column is exactly as tall as its content. That means styles.css:11174's
   `margin-top:auto` has no slack to absorb: the "Ajouter au panier" button sits
   directly under the price, and the ONLY space below it is the card's bottom
   padding (styles.css:11158 sets `padding:12px`). So a bigger `padding-bottom`
   is the single lever that lifts the button up and opens a free band beneath it,
   matching the reference card. Same specificity (1,1,0) as the managed rule and
   custom.css loads last; `!important` makes it bulletproof against the managed
   `padding` shorthand regardless of source order. In the .detailedList grid the
   button is the position:absolute hover apron (out of flow), so this just reads
   as a consistent bottom band there too. */
:is(.detailedList, #list) .cell-product {
    padding-bottom: 56px !important;
}

/* --- Comparator cards: no trailing band below "Comparer" -------------------
   On comparator categories (Category.ShowComparator) SingleProductGrid renders a
   `<div class="mv-grid-compare">…Comparer…</div>` as the LAST in-flow element of
   the card (after .block-addtocart). The 56px breathing-room padding above is
   meant to open a band below the add-to-cart button on plain grid cards — but on
   hover devices that button is the out-of-flow apron (top:100%), so on these
   comparator cards the 56px is just dead white space under the checkbox (visible
   in the card screenshot). Restore the card's normal 12px padding (styles.css:
   11158 `padding:12px`) ONLY for cards that actually carry the compare checkbox,
   so the checkbox sits snug while plain cards keep their breathing room. Higher
   specificity than the rule above ((1,1,0)+:has) and custom.css loads last, so it
   wins; !important matches the rule it overrides. The apron is unaffected (it
   hangs below via absolute positioning, not padding); on touch the add-to-cart
   button stays above the checkbox in flow. */
:is(.detailedList, #list) .cell-product:has(.mv-grid-compare) {
    padding-bottom: 12px !important;
}
/* ============================================================================
   Product detail page — short description (#desc, rendered by ProductInfo.cs:353
   as <div id='desc'>ShortDescription</div>) bumped to 14px (was the blanket 12px).

   The text is pinned to 12px by the single-id blanket at styles.css:4547
   (#main-content p,div,span,a,li,… {font-size:12px !important}). #desc sits inside
   #main-content, so we re-assert with TWO ids (#main-content #desc) + !important to
   outrank it, covering the inline/block children the blanket also targets so an
   admin-authored <p>/<span> in the short description follows the new size too.
   ============================================================================ */
#main-content #desc,
#main-content #desc p,
#main-content #desc span,
#main-content #desc div,
#main-content #desc a,
#main-content #desc li {
    font-size: 14px !important;
    line-height: inherit !important;
}

/* ============================================================================
   Category description (the category's TinyMCE rich text, now rendered below the
   hero by <sys:category-description>). Line spacing was too tight -> ~20% looser.
   ============================================================================ */
#main-content .mv-mfg-desc,
#main-content .mv-mfg-desc p,
#main-content .mv-mfg-desc li,
#main-content .mv-mfg-desc span,
#main-content .mv-mfg-desc div {
    line-height: 1.8 !important;
}

/* "Ask MV" floating chat panel: lift it off the bottom (was bottom:20px) so it
   clears the fixed bottom bar. mv-ai.css is JS-injected and can load after
   custom.css, so !important. */
#mv-ai-assist .mv-ai-panel {
    bottom: 106px !important;
}

/* Product rating display — orange SVG star tiles, matching the review-popup
   rating input. Emitted by ProductUtils.RenderProductReviews as
   .mv-rating-stars > .mv-rstar(.is-on) > svg.mv-rstar-svg. Compact size so it
   fits product cards / sliders / tooltips as well as the detail page. */
.mv-rating-stars { display: inline-flex; gap: 2px; vertical-align: middle; line-height: 0; }
.mv-rstar { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mv-rstar-svg { width: 18px; height: 18px; display: block; }
.mv-rstar-svg path { fill: none; stroke: #e0820e; stroke-width: 1.5; stroke-linejoin: round; }
.mv-rstar.is-on .mv-rstar-svg path { fill: #e0820e; stroke: #e0820e; }
/* Average-rating stars (reviews header): gap from the "Moyenne des revues" label. */
.sf-ui-previews__avg-img { margin-left: 6px; }

/* ============================================================
   TopUp modal — modern flat-card chrome (ALL popups)
   The TopUp lightbox (top_up-min.js) wraps every popup
   (#iframe-container iframe: review / email-vendor / email-friend /
   QuickCart, plus the image quicklook) in a legacy sprite-image
   frame (.te_frame flatlook/quicklook/dashboard). This neutralises
   that frame and presents the popup as a clean white rounded card
   with a soft shadow + a CSS-drawn close button. Parent-page
   override — lives in custom.css because the storefront page loads
   styles.css + custom.css (not components.css), and !important +
   the #top_up id beat the JS-injected sprite rules regardless of
   load order. */

/* Dim the page behind the modal a touch more (was flat black .65). The very
   high z-index lifts the overlay above sticky page elements (e.g. the
   "VENTE FLASH -43%" countdown badge) that otherwise poke through the dim. */
#tu_overlay, .te_shaded {
    background: rgba(0, 0, 0, .55) !important;
    z-index: 2147483646 !important;
}

/* Strip the sprite frame: kill every corner/rib/filler cell + the
   title bar, and collapse the top/bottom border rows to nothing. */
#top_up .te_frame,
#top_up .te_frame tr,
#top_up .te_frame td,
#top_up .te_middle .te_middle {
    background: none !important;
    border: 0 !important;
}
#top_up .te_top,
#top_up .te_bottom {
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
#top_up .te_left,
#top_up .te_right,
#top_up .te_corner,
#top_up .te_rib,
#top_up .te_left_filler,
#top_up .te_right_filler {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    background: none !important;
}
#top_up .te_title {
    display: none !important;
}

/* The center content cell becomes the white rounded card. overflow
   :hidden + radius clip the iframe corners; JS still sizes it. */
#top_up .te_content {
    margin: 0 !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
}

/* The popup iframe itself — fixed to 65vw x 65vh (overrides TopUp's JS sizing). */
#iframe-container {
    display: block !important;
    border: 0 !important;
    background: #fff !important;
    border-radius: 10px !important;
    width: 45vw !important;
    height: 65vh !important;
}

/* Replace the sprite close-link with a clean CSS "x" top-right. */
#top_up .te_close_link {
    display: block !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(0, 0, 0, .05) !important;
    background-image: none !important;
    border-radius: 50% !important;
    filter: none !important;
    z-index: 1010 !important;
}
#top_up .te_close_link:hover {
    background: rgba(0, 0, 0, .12) !important;
}
#top_up .te_close_link::before,
#top_up .te_close_link::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background: #555 !important;
}
#top_up .te_close_link::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}
#top_up .te_close_link::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Keep the modal centered in the viewport at ALL times — even while
   the page scrolls. TopUp opens it position:absolute, pinned to the
   document scroll position at open time, so scrolling moves it off
   screen. Switch to position:fixed + translate centering; !important
   beats the JS-set inline left/top (and disables drag-repositioning,
   which is fine for these small popups). max-height + the iframe cap
   keep a tall popup fully reachable (the iframe scrolls internally). */
#top_up {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    /* Wrap the 65vw x 65vh iframe instead of the JS-set pixel size, so the
       overflow:hidden content cell doesn't clip it. */
    width: auto !important;
    height: auto !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    z-index: 2147483647 !important;
}
#iframe-container {
    max-height: 95vh !important;
}

/* ============================================================================
   RESELLER MODE  (SiteHeader.RenderResellerBar)
   Blinking "you are seeing your reseller prices" bar under the header icons,
   a "Prix revendeur :" label before every price, and a show/hide-prices toggle
   (html.mv-prices-hidden blurs prices; cookie-backed). All labels are ASCII.
   ============================================================================ */
.mv-reseller-bar{
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    background:linear-gradient(90deg,#0a4d8c 0%,#1769c0 100%);
    color:#fff;padding:7px 16px;font-size:13px;line-height:1.2;
    box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.mv-reseller-flag{
    display:inline-flex;align-items:center;gap:7px;
    color:#fff !important;font-weight:700;text-decoration:none;letter-spacing:.3px;
    text-transform:uppercase;
    animation:mvResellerBlink 1.15s ease-in-out infinite;
}
.mv-reseller-flag:hover{text-decoration:underline;}
.mv-reseller-dot{
    width:9px;height:9px;border-radius:50%;background:#ffd23f;
    box-shadow:0 0 0 0 rgba(255,210,63,.8);
    animation:mvResellerPulse 1.15s ease-out infinite;
}
@keyframes mvResellerBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes mvResellerPulse{
    0%{box-shadow:0 0 0 0 rgba(255,210,63,.7);}
    70%{box-shadow:0 0 0 8px rgba(255,210,63,0);}
    100%{box-shadow:0 0 0 0 rgba(255,210,63,0);}
}
.mv-reseller-dl{
    display:inline-flex;align-items:center;gap:6px;
    background:#fff;color:#0a4d8c !important;border-radius:16px;
    padding:4px 14px;font-size:12px;font-weight:600;text-decoration:none;
    transition:background .15s;
}
.mv-reseller-dl:hover{background:#eaf2fb;text-decoration:none;}
.mv-reseller-dl-ico{width:16px;height:16px;display:inline-block;vertical-align:middle;}
.mv-reseller-toggle{
    background:#fff;color:#0a4d8c;border:0;border-radius:16px;
    padding:5px 16px;font-size:12px;font-weight:600;cursor:pointer;
    transition:background .15s,transform .1s;
}
.mv-reseller-toggle:hover{background:#eaf2fb;}
.mv-reseller-toggle:active{transform:translateY(1px);}

/* Reseller price block (ProductUtils.BuildResellerPriceBlock) on the PRODUCT DETAIL page.
   The theme forces every .your-price inside `#productContent #productPrices_prices` to
   14pt bold green + margin:0 !important (styles.css ~line 11150), so these overrides MUST
   match that 2-id specificity AND use !important, or both price lines stay big/green/cramped.
   "Prix promo" = small grey line ABOVE the prominent "Prix revendeur" line. */
#productContent #productPrices_prices .mv-public-price-line{
    display:block !important;font-size:13px !important;color:#777 !important;
    font-weight:400 !important;line-height:1.35 !important;text-decoration:none !important;
    margin:0 0 3px !important;white-space:nowrap !important;
}
/* style the spans but keep them INLINE so the price + its TTC/HT mention stay on one line
   (a display:block here is what pushed "TTC" onto its own row). */
#productContent #productPrices_prices .mv-public-price-line span{
    display:inline !important;font-size:13px !important;color:#777 !important;
    font-weight:400 !important;text-decoration:none !important;white-space:nowrap !important;
}
#productContent #productPrices_prices .mv-reseller-price{
    display:block !important;margin:0 0 2px !important;line-height:1.35 !important;
    white-space:nowrap !important;
}
#productContent #productPrices_prices .mv-reseller-price span,
#productContent #productPrices_prices .mv-reseller-price .mention{
    display:inline !important;white-space:nowrap !important;
}
/* HT price sub-line under the promo / reseller price (legally required when TTC is shown). */
#productContent #productPrices_prices .mv-price-ht{
    display:block !important;font-size:12px !important;color:#888 !important;font-weight:400 !important;
    line-height:1.3 !important;margin:0 0 8px !important;white-space:nowrap !important;
}
/* Public-price HT is hidden by default (only the reseller HT shows); it appears when the
   dealer hides their prices and the public price becomes the displayed number. */
#productContent #productPrices_prices .mv-public-ht{display:none !important;margin:0 0 6px !important;}
#productContent #productPrices_prices .mv-reseller-ht{color:#5a7fa3 !important;}
#productContent #productPrices_prices .mv-price-ht .mention{font-size:11px !important;color:#999 !important;}
/* "Remise additionnelle" badge — extra reseller discount vs the normal price. */
#productContent #productPrices_prices .mv-reseller-eco,
.mv-reseller-eco{
    display:inline-block !important;background:#0a4d8c !important;color:#fff !important;
    padding:3px 10px !important;border-radius:13px !important;font-size:12px !important;
    font-weight:600 !important;margin:2px 0 0 !important;
}
#productContent #productPrices_prices .mv-reseller-eco #lblEconomie,
#productContent #productPrices_prices .mv-reseller-eco #valEconomie,
.mv-reseller-eco #lblEconomie,.mv-reseller-eco #valEconomie{color:#fff !important;}

/* "Masquer mes prix": hide the reseller price + badge; the promo price becomes prominent. */
html.mv-prices-hidden #productContent #productPrices_prices .mv-reseller-price,
html.mv-prices-hidden #productContent #productPrices_prices .mv-reseller-ht,
html.mv-prices-hidden #productContent #productPrices_prices .mv-reseller-eco{display:none !important;}
html.mv-prices-hidden #productContent #productPrices_prices .mv-public-price-line,
html.mv-prices-hidden #productContent #productPrices_prices .mv-public-price-line span{
    font-size:14pt !important;color:Green !important;font-weight:bold !important;
}
/* When prices are hidden, reveal the public-price HT (it's now the displayed final number). */
html.mv-prices-hidden #productContent #productPrices_prices .mv-public-ht{display:block !important;}

/* ============================================================================
   RESELLER PRICE-LIST PAGE (/revendeurs) — abt.com / account look
   ============================================================================ */
.mv-revendeur{max-width:1170px;margin:0 auto;padding:18px 12px 40px;}
.mv-revendeur__head{margin-bottom:18px;}
.mv-revendeur__head h1{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 6px;}
.mv-revendeur__intro{color:#555;font-size:14px;line-height:1.5;}
.mv-revendeur__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media (max-width:880px){.mv-revendeur__grid{grid-template-columns:1fr;}}

.mv-card{background:#fff;border:1px solid #e3e6ea;border-radius:10px;overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.05);}
.mv-card__head{padding:14px 18px;border-bottom:1px solid #eef0f3;background:#fafbfc;}
.mv-card__head h2{margin:0;font-size:16px;font-weight:700;color:#0a4d8c;}
.mv-card__body{padding:18px;}

/* category tree inside the card */
.mv-revendeur__build #treeCategory{list-style:none;margin:0;padding:0;max-height:460px;overflow:auto;
    border:1px solid #eef0f3;border-radius:8px;padding:8px 10px;}
.mv-revendeur__build #treeCategory ul{list-style:none;margin:0 0 0 18px;padding:0;}
.mv-revendeur__build #treeCategory li{padding:3px 0;font-size:13px;color:#333;line-height:1.5;}
.mv-revendeur__build #treeCategory .sf-ui-revendeur__cat-check{margin-right:7px;vertical-align:middle;}
.mv-revendeur__build #treeCategory .treeCatIcon{cursor:pointer;display:inline-block;width:14px;}

.mv-revendeur__actions{margin-top:14px;}
.mv-revendeur__saveform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;
    padding-top:14px;border-top:1px dashed #e3e6ea;}
.mv-revendeur__name{flex:1 1 220px;min-width:180px;height:34px;padding:6px 10px;
    border:1px solid #cfd4da;border-radius:6px;font-size:13px;box-sizing:border-box;}
.mv-revendeur__hint{margin:10px 0 0;font-size:12px;color:#888;}
.mv-revendeur__xls{width:16px;height:16px;vertical-align:middle;margin-right:4px;}
/* Background-export loader shown next to the name of the list being generated. */
.mv-revendeur__spin{display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid #cfd4da;border-top-color:var(--site-button-bg,#2f80ed);border-radius:50%;vertical-align:middle;animation:mv-rv-spin .7s linear infinite;}
@keyframes mv-rv-spin{to{transform:rotate(360deg);}}
.mv-revendeur__dl.is-busy,.mv-btn.is-busy{opacity:.55;pointer-events:none;}
.mv-revendeur__genmsg{margin-left:8px;font-size:12px;color:#0a4d8c;vertical-align:middle;}

/* saved selections list */
.mv-revendeur__list{list-style:none;margin:0;padding:0;}
.mv-revendeur__item{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 0;border-bottom:1px solid #eef0f3;flex-wrap:wrap;}
.mv-revendeur__item:last-child{border-bottom:0;}
.mv-revendeur__item-name{display:block;font-weight:600;color:#1a1a1a;font-size:14px;}
.mv-revendeur__item-meta{display:block;font-size:12px;color:#999;margin-top:2px;}
.mv-revendeur__item-actions{display:flex;gap:8px;align-items:center;}
.mv-revendeur__del{display:inline;margin:0;}
.mv-revendeur__empty{color:#888;font-size:14px;line-height:1.6;margin:0;}

/* AffaSlider admin EDIT PENCIL — keep it pinned to the slider's TOP-RIGHT and above the swiper
   layers, even when the slider is pulled full-bleed (position:relative + overflow:hidden). The
   base .editBlock has no `top`, so it lost its corner once the slider became the positioned,
   clipped container. */
.mv-affa{position:relative;}
.mv-affa .editblock{position:absolute;top:0;right:0;z-index:300;margin:0;}
.mv-affa .editBlock,
.mv-affa-full .editBlock{
    position:absolute !important;
    top:8px !important;
    right:8px !important;
    left:auto !important;
    z-index:300 !important;
    display:block !important;
    width:24px !important;
    height:24px !important;
}

/* (Promo-badge margin-top nudge removed — the badge is position:absolute now; see the
   consolidated #iconPromo sprite block near the top of this file.) */
/* Product detail: bring the product title text DOWN 5px. */
#productContent .mv-product-title,
#main-content>h1.mv-product-title,
.mv-product-title{position:relative;top:5px;}

/* Mega menu: crop the category images square (cover), filling the column width — like the
   category cards (height == width). */
.mv-megamenu .mv-mm-childimg,
.mv-megamenu .mv-mm-colimg{display:block;width:100%;}
.mv-megamenu .mv-mm-childimg img,
.mv-megamenu .mv-mm-colimg img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    object-fit:cover !important;
    max-width:none !important;
    border-radius:6px;
    display:block;
}

/* ====== Product image lightbox (filmstrip + carousel arrows + hover-switch) ====== */
html.mv-lb-lock { overflow:hidden; }
.mv-lb {
    position:fixed; top:0; left:0; right:0; bottom:0;
    z-index:100000; display:none;
    background:rgba(255,255,255,.97);
}
.mv-lb, .mv-lb * { box-sizing:border-box; }
.mv-lb.is-open { display:flex; flex-direction:column; }
.mv-lb__stage {
    flex:1 1 auto; min-height:0;
    display:flex; align-items:center; justify-content:center;
    padding:8px 8px 6px;
}
.mv-lb__img {
    /* As large as the viewer allows but NEVER upscaled past the image's native size — small catalog
       photos (~480px) stay sharp instead of being blown up blurry; large photos scale down to fit. */
    max-width:100%; max-height:100%;
    width:auto; height:auto;
    object-fit:contain; background:#fff;
    border-radius:0; box-shadow:none;
}
.mv-lb__close,
.mv-lb__nav {
    position:absolute; z-index:2;
    border:0; border-radius:50%; cursor:pointer;
    background:rgba(0,0,0,.06); color:#333;
    line-height:1; transition:background .15s;
}
.mv-lb__close:hover,
.mv-lb__nav:hover { background:rgba(0,0,0,.14); }
.mv-lb__close { top:16px; right:20px; width:44px; height:44px; font-size:28px; }
.mv-lb__nav { top:42%; transform:translateY(-50%); width:50px; height:50px; font-size:30px; }
.mv-lb__nav--prev { left:18px; }
.mv-lb__nav--next { right:18px; }
.mv-lb__strip {
    flex:0 0 auto;
    display:flex; align-items:center; gap:6px;
    padding:10px 14px 16px; background:rgba(0,0,0,.04);
}
.mv-lb__thumbs {
    flex:1 1 auto;
    display:flex; gap:8px; padding:4px 2px;
    overflow-x:auto; scroll-behavior:smooth; scrollbar-width:thin;
    /* Center the thumbnails when they fit; "safe" falls back to left-align when they overflow
       so the first thumb is never clipped out of reach in the scroll container. */
    justify-content:center;
    justify-content:safe center;
}
.mv-lb__thumbs::-webkit-scrollbar { height:6px; }
.mv-lb__thumbs::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); border-radius:3px; }
.mv-lb__thumb {
    flex:0 0 auto; width:74px; height:74px;
    border:2px solid transparent; border-radius:6px;
    background:#fff; padding:2px; cursor:pointer;
    opacity:.6; transition:opacity .15s, border-color .15s;
}
.mv-lb__thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.mv-lb__thumb:hover { opacity:1; }
.mv-lb__thumb.is-active { opacity:1; border-color:var(--site-button-bg, #e2001a); }
.mv-lb__striparrow {
    flex:0 0 auto; width:34px; height:74px;
    border:0; border-radius:6px; cursor:pointer;
    background:rgba(0,0,0,.06); color:#333;
    font-size:22px; transition:background .15s;
}
.mv-lb__striparrow:hover { background:rgba(0,0,0,.14); }
@media (max-width:767px) {
    .mv-lb__stage { padding:8px 6px 6px; }
    .mv-lb__nav { width:40px; height:40px; font-size:24px; }
    .mv-lb__thumb { width:56px; height:56px; }
    .mv-lb__striparrow { width:28px; height:56px; }
}

/* Vendor price detail block: force a uniform 12px font on the box and everything inside it. */
#vendorsprice.mv-vendor-detail,
#vendorsprice.mv-vendor-detail * {
    font-size: 12px !important;
}

/* Product detail page: compare toggle spacing. */
#productContent .mv-pdp-compare { margin: 10px 0 6px; }

/* ==========================================================================
   Category / manufacturer DETAILED-LIST rows — abt.com-style (.mv-dl)
   --------------------------------------------------------------------------
   Three columns separated only by a thin light-gray line: media (image) |
   info (brand, title, rating, description, stock) | buy-box (price, add-to-
   cart, compare). Replaces the old boxed/bordered + float/absolute row layout.
   Markup: templates/parts/single-product-list.html. Loads after styles.css so
   these win; a few base rules need !important to beat the managed block.
   ========================================================================== */
.detailedList .product-line.mv-dl {
    display: flex !important;
    align-items: stretch;
    gap: 26px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 22px 6px;
    border: 0 !important;
    border-bottom: 1px solid #ececec !important;
    border-radius: 0 !important;
    background: #fff;
}
.detailedList #list .product-line.mv-dl:first-child { border-top: 1px solid #ececec; }
/* No card-lift on a flat list — keep abt's calm rows (override managed hover). */
.detailedList .product-line.mv-dl:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #fafbfc;
}

/* --- Media column ---------------------------------------------------------- */
.detailedList .product-line.mv-dl .product_image.mv-dl__media {
    float: none !important;
    flex: 0 0 196px;
    width: 196px;
    padding: 0 !important;
    margin: 0;
    text-align: center;
    align-self: flex-start;
}
.detailedList .product-line.mv-dl .product_image.mv-dl__media { position: relative; }
/* The image + its overlay chrome live in an inner box sized to the image, so
   "bottom-left/right" means the IMAGE's corner even though the media column
   stretches to the row height (keeps the buy-box divider full height).
   The image box is pinned to the column width and the quickview button is
   forced out of flow, so the box height equals the image height and the
   bottom-anchored logo/badge sit on the image's bottom edge. */
.detailedList .product-line.mv-dl .mv-dl__imgbox {
    position: relative;
    display: block;
    width: 100%;
}
.detailedList .product-line.mv-dl .mv-dl__imgbox .mv-quickview-host {
    position: relative;
    display: block;
    width: 100%;
}
.detailedList .product-line.mv-dl .mv-dl__imgbox .mv-quickview-trigger { position: absolute; }
.detailedList .product-line.mv-dl .product_image.mv-dl__media img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 170px !important;
    height: auto !important;
    object-fit: contain;
}
/* (Status-badge position is set on the dedicated ".mv-dl__imgbox .promo-badge" rule
   further down in the media-column overlay block — top-left corner.) */
/* Image overlay chrome — corners: manufacturer logo bottom-left, price-drop
   badge bottom-right, "Nouveau" top-left (promo % badge stays top-right). */
.detailedList .product-line.mv-dl .mv-dl__media .mv-list-logo {
    position: absolute;
    left: 6px;
    bottom: 6px;
    top: auto;          /* override managed .product_image .mv-list-logo{top:8px} */
    margin: 0;
    z-index: 4;
    text-align: left;
}
.detailedList .product-line.mv-dl .mv-dl__media .mv-flags {
    position: absolute;
    left: 6px;
    top: 6px;
    margin: 0;
    z-index: 4;
}
.detailedList .product-line.mv-dl .mv-dl__media .mv-flags.mv-flags-right {
    left: auto;
    top: auto;
    right: 6px;
    bottom: 6px;
}
.detailedList .product-line.mv-dl .mv-dl__media .mv-flag {
    font-size: 10px !important;
    padding: 1px 5px !important;
    line-height: 1.25 !important;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* --- Info column ----------------------------------------------------------- */
.detailedList .product-line.mv-dl .right-list.mv-dl__info {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    position: static;
    display: block;
}
.detailedList .product-line.mv-dl .mv-dl__brand {
    display: block;
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 700;
    color: #8a929b;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.detailedList .product-line.mv-dl .mv-dl__brand em {
    font-style: normal;
    font-weight: 400;
    color: #aab0b8;
    text-transform: none;
}
.detailedList .product-line.mv-dl a.product-name-link.mv-dl__title {
    display: block;
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #15457e;
    text-decoration: none;
}
.detailedList .product-line.mv-dl a.product-name-link.mv-dl__title:hover { text-decoration: underline; }
.detailedList .product-line.mv-dl .reviews.mv-dl__rating { margin: 0 0 8px; }
.detailedList .product-line.mv-dl a.product-desc-link.mv-dl__desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
    text-decoration: none;
}
.detailedList .product-line.mv-dl .mv-dl__status {
    margin: 0;
    font-size: 12px;
    color: #2e7d32;
}

/* --- Buy-box column -------------------------------------------------------- */
.detailedList .product-line.mv-dl .controls.mv-dl__buy {
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 224px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: right;
    padding: 0 14px;
    border-left: 1px solid #f0f0f0;
}
.detailedList .product-line.mv-dl .mv-dl__price { margin: 0 0 12px; }
.detailedList .product-line.mv-dl .mv-dl__price .prices,
.detailedList .product-line.mv-dl .mv-dl__price .prices p { text-align: right; }
/* The price text lives in an inner <span> that the theme sizes via
   ".your-price span{font-size:14pt}" — so we must size the span, not just the
   <p>, and out-specify/!important it. The "HT/TTC" .mention suffix stays small. */
.detailedList .product-line.mv-dl .mv-dl__price .your-price,
.detailedList .product-line.mv-dl .mv-dl__price .your-price > span,
.detailedList .product-line.mv-dl .mv-dl__price .your-siteprice,
.detailedList .product-line.mv-dl .mv-dl__price .your-siteprice > span {
    font-size: 24px !important;
    line-height: 1.1 !important;
}
/* Price line in the detailed list: keep the text small — only the price value
   (.size-listprice span) is 13pt. #detailedList id-selector beats the 24px rule
   above. The .mention (HT/TTC) keeps its own small size below. */
#detailedList .size-listprice { font-size: 13pt !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 2px !important; }
/* List mode (aria-label="List mode" / #display0): products render as .product-line —
   right-align the price. Grid mode (.cell-product) keeps the centered rule above. */
#detailedList .product-line .size-listprice { justify-content: end !important; }
.detailedList .product-line.mv-dl .mv-dl__price .your-price .mention,
.detailedList .product-line.mv-dl .mv-dl__price .your-siteprice .mention {
    font-size: 12px !important;
    font-weight: 400;
}
.detailedList .product-line.mv-dl .mv-dl__price .public-price,
.detailedList .product-line.mv-dl .mv-dl__price .public-price span { font-size: 13px !important; }
.detailedList .product-line.mv-dl .mv-dl__price .ht-price,
.detailedList .product-line.mv-dl .mv-dl__price .ht-price span,
.detailedList .product-line.mv-dl .mv-dl__price .small-TTC { font-size: 12px !important; color: #888; }

.detailedList .product-line.mv-dl .mv-dl__cta { margin: 0; }
.detailedList .product-line.mv-dl .mv-dl__cta .mv-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}
.detailedList .product-line.mv-dl .mv-dl__compare {
    margin-top: 12px;
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.detailedList .product-line.mv-dl .mv-dl__compare .compare_link { cursor: pointer; }

/* Promo "En promotion" tag — keep the site's existing red pill (#divPromo #aPromo),
   just right-align it within the buy box. */
.detailedList .product-line.mv-dl .mv-dl__promo {
    margin: 0 0 10px;
    text-align: right;
}

/* "Prix réduit" flag moved into the buy-box (below "En promotion"): the global
   .mv-flags rule (styles.css / custom.css ~1975) is position:absolute, which made
   it float to the row's top-right. Re-assert normal flow here so it sits below the
   promo pill, right-aligned to match the buy box. */
.detailedList .product-line.mv-dl .controls.mv-dl__buy .mv-flags.mv-flags-right {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 0 10px;
    align-items: flex-end;
    pointer-events: auto;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 767px) {
    .detailedList .product-line.mv-dl { flex-wrap: wrap; gap: 14px; padding: 16px 4px; }
    .detailedList .product-line.mv-dl .product_image.mv-dl__media { flex: 0 0 120px; width: 120px; }
    .detailedList .product-line.mv-dl .right-list.mv-dl__info { flex: 1 1 200px; }
    .detailedList .product-line.mv-dl .controls.mv-dl__buy {
        flex: 1 1 100%;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #f0f0f0;
        padding-top: 12px;
        margin-top: 4px;
        text-align: left;
    }
    .detailedList .product-line.mv-dl .mv-dl__price .prices,
    .detailedList .product-line.mv-dl .mv-dl__price .prices p,
    .detailedList .product-line.mv-dl .mv-dl__promo,
    .detailedList .product-line.mv-dl .mv-dl__compare { text-align: left; justify-content: flex-start; }
}

/* ==========================================================================
   DETAILED-LIST polish — VARIANT A "CALM PREMIUM" (refine, not redesign)
   Same 3-column flat row (media | info | buy). Disciplined type scale,
   consistent vertical rhythm, crisp overlay chrome, calm hover. Scoped under
   .detailedList .product-line.mv-dl; layered AFTER the base .mv-dl block above
   so it wins. !important only where styles.css forces it. Keeps the buy-box
   order (price -> #divPromo -> .mv-flags-right -> cta -> compare) and relies on
   the base block's flag-position-static rule above.
   ========================================================================== */

/* --- Row: tighter rhythm, calmer divider, refined hover ------------------- */
.detailedList .product-line.mv-dl {
    gap: 28px !important;
    padding: 20px 8px !important;
    border-bottom: 1px solid #edeff2 !important;
    align-items: stretch !important;
    transition: background .18s ease !important;
}
.detailedList #list .product-line.mv-dl:first-child { border-top: 1px solid #edeff2; }
.detailedList .product-line.mv-dl:hover {
    transform: none !important;
    box-shadow: inset 3px 0 0 -1px rgba(31,73,150,.45) !important;
    background: #fafbfd !important;
}

/* --- MEDIA column --------------------------------------------------------- */
.detailedList .product-line.mv-dl .product_image.mv-dl__media {
    flex: 0 0 188px !important;
    width: 188px !important;
    align-self: flex-start;
}
.detailedList .product-line.mv-dl .product_image.mv-dl__media img {
    max-height: 158px !important;
    padding: 6px 4px !important;
    box-sizing: border-box;
}
/* Status badge (.mv-pbadge: A perte / Prix coutant / -X%): TOP-LEFT corner of the image,
   clear of the centered QuickView button and the top-right favourites heart (per user
   2026-06-20 — it was a vertically-centred side tab overlapping QuickView). Position only;
   the .mv-pbadge class supplies the pill styling (icon + colour + flash). */
.detailedList .product-line.mv-dl .mv-dl__imgbox .promo-badge {
    left: 6px !important;
    right: auto !important;
    top: 6px !important;
    bottom: auto !important;
    transform: none !important;
    /* NB: do NOT set opacity:1 !important here — an !important opacity overrides the
       mvPbadgeFlash keyframes (perte/coutant flash), killing the flashing. The old
       faded opacity:.6 tab styling is gone, so the default opacity:1 is fine. */
    z-index: 9;
}
/* "Nouveau" flag sits just below the status badge so the two don't overlap top-left. */
.detailedList .product-line.mv-dl .mv-dl__media .mv-flags { left: 6px; top: 36px; }
.detailedList .product-line.mv-dl .mv-dl__media .mv-flag {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px !important;
    line-height: 1.3 !important;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.detailedList .product-line.mv-dl .mv-dl__media .mv-flag.mv-flag-new { background: #1f9d55; color: #fff; }
/* Manufacturer logo: BELOW the image but INSIDE the media box — normal flow after
   the photo (the imgbox grows to contain it), centred, with a gap so it doesn't
   touch the image. */
.detailedList .product-line.mv-dl .mv-dl__media .mv-list-logo {
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    width: 100%;
}
.detailedList .product-line.mv-dl .mv-dl__media .mv-list-logo img.manufacturer-icon {
    display: block; max-height: 24px; width: auto; margin: 0 auto;
}
.detailedList .product-line.mv-dl .mv-quickview-trigger {
    background: rgba(255,255,255,.92) !important;
    border: 1px solid #e3e6ea !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
}

/* --- INFO column ---------------------------------------------------------- */
.detailedList .product-line.mv-dl .right-list.mv-dl__info { align-self: flex-start; padding-top: 2px; }
.detailedList .product-line.mv-dl .mv-dl__brand {
    margin: 0 0 4px !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #9098a2;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.detailedList .product-line.mv-dl .mv-dl__brand em { font-weight: 600; color: #b6bcc4; letter-spacing: .02em; }
.detailedList .product-line.mv-dl a.product-name-link.mv-dl__title {
    margin: 0 0 7px !important;
    font-size: 15.5px !important;
    font-weight: 600;
    line-height: 1.32 !important;
    color: #163a6b;
    letter-spacing: -.005em;
}
.detailedList .product-line.mv-dl a.product-name-link.mv-dl__title:hover { color: #1f4996; text-decoration: none; }
.detailedList .product-line.mv-dl .reviews.mv-dl__rating { margin: 0 0 7px !important; line-height: 1; }
.detailedList .product-line.mv-dl a.product-desc-link.mv-dl__desc {
    -webkit-line-clamp: 3;
    margin: 0 0 11px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #5b626b;
}
.detailedList .product-line.mv-dl .mv-dl__status { margin: 0; }
.detailedList .product-line.mv-dl .mv-dl__status #status .siteprice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 9px 4px 8px;
    border-radius: 999px;
}
.detailedList .product-line.mv-dl .mv-dl__status #status .siteprice::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
}
.detailedList .product-line.mv-dl .mv-dl__status .mv-stock-in { color: #1c7c43 !important; background: #eaf6ee; border: 1px solid #1c7c43 !important; }
.detailedList .product-line.mv-dl .mv-dl__status #status .mv-stock-in::before {
    width: 14px; height: 14px; border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7c43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 12.4l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.detailedList .product-line.mv-dl .mv-dl__status .mv-stock-out { color: #b35c00 !important; background: #fdf1e3; border: 1px solid #b35c00 !important; }
.detailedList .product-line.mv-dl .mv-dl__status .mv-stock-out::before { background: #e98e2b; }

/* --- BUY-BOX column ------------------------------------------------------- */
.detailedList .product-line.mv-dl .controls.mv-dl__buy {
    flex: 0 0 218px !important;
    padding: 2px 0 2px 18px !important;
    border-left: 1px solid #edeff2 !important;
    justify-content: flex-start;
}
.detailedList .product-line.mv-dl .mv-dl__price { margin: 0 0 10px !important; }
#detailedList .size-listprice {
    font-size: 13pt !important;
    font-weight: 700;
    color: #16243a;
    letter-spacing: -.01em;
}
.detailedList .product-line.mv-dl .mv-dl__price .your-price { margin: 0 0 2px; }
.detailedList .product-line.mv-dl .mv-dl__price .your-price .mention { font-size: 11px !important; font-weight: 600; color: #98a0aa; }
.detailedList .product-line.mv-dl .mv-dl__price .ht-price,
.detailedList .product-line.mv-dl .mv-dl__price .ht-price span { font-size: 11.5px !important; color: #99a1ab; font-weight: 500; }
.detailedList .product-line.mv-dl .mv-dl__promo { margin: 0 0 8px !important; }
.detailedList .product-line.mv-dl .mv-dl__promo #aPromo { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.detailedList .product-line.mv-dl .controls.mv-dl__buy .mv-flags.mv-flags-right { margin: 0 0 10px !important; }
.detailedList .product-line.mv-dl .controls.mv-dl__buy .mv-flag.mv-flag-drop {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px !important;
    border-radius: 3px;
    background: #fbeeda;
    color: #b3600a;
    box-shadow: none;
}
.detailedList .product-line.mv-dl .mv-dl__cta .mv-btn {
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 6px !important;
    transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.detailedList .product-line.mv-dl .mv-dl__cta .mv-btn:hover { box-shadow: 0 3px 10px rgba(31,73,150,.22); }
.detailedList .product-line.mv-dl .mv-dl__cta .mv-btn svg { width: 15px; height: 15px; }
.detailedList .product-line.mv-dl .mv-dl__compare { margin-top: 11px !important; font-size: 11.5px; color: #8b929b; }
.detailedList .product-line.mv-dl .mv-dl__compare .compare_link { transition: color .15s ease; }
.detailedList .product-line.mv-dl .mv-dl__compare .compare_link:hover { color: #1f4996; }

/* Out-of-stock: de-emphasize the CTA (still clickable). Needs .mv-dl--oos on the row. */
.detailedList .product-line.mv-dl.mv-dl--oos .mv-dl__cta .mv-btn {
    background: #eef1f5 !important; color: #5b6470 !important; border-color: #e0e4ea !important;
}
.detailedList .product-line.mv-dl.mv-dl--oos .mv-dl__cta .mv-btn:hover { background: #e6eaf0 !important; box-shadow: none !important; }
.detailedList .product-line.mv-dl.mv-dl--oos .mv-dl__cta .mv-btn svg { fill: #7a828d; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 767px) {
    .detailedList .product-line.mv-dl { gap: 14px !important; padding: 16px 4px !important; }
    .detailedList .product-line.mv-dl:hover { box-shadow: none !important; }
    .detailedList .product-line.mv-dl .product_image.mv-dl__media { flex: 0 0 116px !important; width: 116px !important; }
    .detailedList .product-line.mv-dl .controls.mv-dl__buy {
        padding-left: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid #edeff2 !important;
        padding-top: 12px !important;
        margin-top: 4px;
        align-items: flex-start;
    }
}

/* ==========================================================================
   PRODUCT DETAIL buy-area polish — "CALM PREMIUM" (#product, CSS-only)
   --------------------------------------------------------------------------
   Refines the buy area (title, price, qty+cart+wishlist, stock, whatsapp/devis,
   compare, share) WITHOUT changing layout/DOM. All scoped under #product /
   #productContent / #rightContent / #socialButtons. Tabs/related/suggested
   untouched. Verified headless (_shots/pdp_polish_vA.html).
   ========================================================================== */
/* ---- calm-premium local tokens (consumed only by the scoped rules below) ---- */
#product{
  --cp-ink:#1f2733;          /* primary text */
  --cp-muted:#6b7280;        /* secondary text */
  --cp-faint:#9aa1ab;        /* struck reference */
  --cp-line:#e6e8ec;         /* hairline */
  --cp-surface:#f7f8fa;      /* calm chip fill */
  --cp-focal:#15803d;        /* promo price — confident, not loud */
  --cp-promo-bg:#fff4ec;     /* promo chip fill (tamed flash) */
  --cp-promo-ink:#c2410c;    /* promo chip ink */
  --cp-promo-line:#f4d3bd;   /* promo chip hairline */
  --cp-save-bg:#eaf6ee;      /* savings/stock-in chip fill (list-row green) */
  --cp-save-ink:#1c7c43;
  --cp-save-dot:#2fae5e;
  --cp-radius:10px;
  --cp-radius-sm:8px;
}

/* ============================================================
   1) HEAD — manufacturer icon + title (light, disciplined)
   ============================================================ */
.mv-product-head{
  display:flex !important;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.mv-product-head .manufacturer-icon{ margin:0 !important; }
.mv-product-head .manufacturer-icon img{
  width:auto !important; height:auto !important; max-width:92px !important; max-height:30px !important;
  object-fit:contain; display:block; border:0 !important;
  opacity:.92;
}
#productTitle.mv-product-title{
  top:0 !important;            /* drop the legacy +5px nudge */
  margin:2px 0 0 !important;
  font-size:19px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  color:var(--cp-ink) !important;
  letter-spacing:.1px;
}
#productTitle.mv-product-title #productname{ font-weight:700 !important; }

/* ============================================================
   2) THE BUY-BOX SHELL (#productContent / #rightContent)
   ============================================================ */
#productContent{
  position:relative !important;
  margin-top:0px !important;
  border:1px solid var(--cp-line) !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05) !important;
  background:#fff !important;
}
#rightContent{ color:var(--cp-ink); }

/* Product detail: "Mis a jour" date pinned to the TOP-RIGHT of the #productContent box. */
#productContent #rightContent .mv-product-updated{
  position:absolute; top:-12px; right:-16px; z-index:4;
  margin:0; font-size:12px; color:#6b7280; white-space:nowrap;
  background:#fff; padding:2px 8px; border-radius:10px;
}
#productContent #rightContent .mv-product-updated span{ font-weight:600; color:#444; }

/* Product detail: hide the "Avis"/"Reviews" label before the star rating. */
#productMain .mv-reviews-top .mv-product-reviews__label{ display:none !important; }

/* PROMO BANNER (#iconPromo): intentionally LEFT as its original "VENTE FLASH"
   sprite image — the calm-chip replacement was removed at the user's request
   (2026-06-20). The sprite block near the TOP of this file paints it, and its
   52px top-reservation (also near the top) still applies. */

/* ============================================================
   4) PRICE HIERARCHY (#productPrices_prices)
   Goal: the two struck lines (.public-price + .your-siteprice)
   read as ONE quiet crossed reference; .your-price is the
   single confident focal point; .ht-price small; savings = chip.
   2-id specificity + !important to beat the managed block.
   ============================================================ */
#productContent #productPrices_prices.prices{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:1px !important;
  margin:2px 0 0 !important;
}

/* .public-price ("Prix normal") + .your-siteprice ("Prix") — LEFT to their
   original/managed design (the old red strikethrough) at the user's request
   (2026-06-20). No calm-premium overrides on these two classes. */

/* -- the focal promo price (.your-price = "Prix Promo") -- */
#productContent #productPrices_prices .your-price,
#productContent #productPrices_prices .your-price span{
  color:var(--cp-focal) !important;
  font-size:26px !important;
  font-weight:800 !important;
  letter-spacing:-.2px !important;
  line-height:1.12 !important;
}
#productContent #productPrices_prices .your-price{
  display:block !important;
  margin:6px 0 2px !important;
  padding:0 !important;
}
#productContent #productPrices_prices .your-price .mention{
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--cp-muted) !important;
  letter-spacing:0 !important;
  vertical-align:2px;
}

/* -- HT line: small, secondary -- */
#productContent #productPrices_prices .ht-price,
#productContent #productPrices_prices .ht-price span{
  color:var(--cp-muted) !important;
  font-size:12px !important;
  font-weight:500 !important;
  text-decoration:none !important;
  line-height:1.3 !important;
}
#productContent #productPrices_prices .ht-price{
  margin:0 0 8px !important;
  display:block !important;
}
#productContent #productPrices_prices .ht-price .mention{
  font-size:10px !important;
  color:var(--cp-faint) !important;
}

/* -- savings pill (#Peconomie.yousave-price) -> calm green chip,
      same language as the in-stock pill / list-row green. -- */
#productContent #productPrices_prices #Peconomie.yousave-price,
#productContent #productPrices_prices .yousave-price{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px;
  background:var(--cp-save-bg) !important;
  color:var(--cp-save-ink) !important;
  border:1px solid #cdebd6 !important;
  border-radius:999px !important;
  padding:4px 11px 4px 10px !important;
  margin:2px 0 0 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#productContent #productPrices_prices #Peconomie.yousave-price::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--cp-save-dot);
  flex:0 0 auto;
}
#productContent #productPrices_prices #Peconomie #lblEconomie,
#productContent #productPrices_prices #Peconomie #valEconomie{
  color:var(--cp-save-ink) !important;
  font-size:12px !important;
  font-weight:600 !important;
}

/* ============================================================
   5) QTY + CART + WISHLIST ROW (#addToCart)
   Tidy alignment: label over a clean qty field, big primary
   cart button, square ghost heart — all on one disciplined row.
   #titleDesc is already a flex row (price left / cart right);
   we polish the cart cluster itself.
   ============================================================ */
#rightContent #titleDesc{ gap:16px !important; align-items:center !important; }

#rightContent #addToCart.sf-ui-pinfo__addtocart{
  display:flex !important;
  align-items:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap;
}
#rightContent #addToCart label[for="quantityfield"]{
  display:inline-flex !important;
  align-items:center !important;
  align-self:center !important;     /* same line as .choice, centred to the qty box */
  width:auto !important;
  margin:0 2px !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--cp-muted) !important;
}
#rightContent #addToCart .choice{ display:inline-flex !important; }
#rightContent #addToCart #qty.sf-ui-pinfo__qty{
  width:64px !important;
  height:44px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--cp-ink) !important;
  border:1px solid var(--cp-line) !important;
  border-radius:var(--cp-radius-sm) !important;
  background:#fff !important;
  padding:0 6px !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#rightContent #addToCart #qty.sf-ui-pinfo__qty:focus{
  outline:none !important;
  border-color:var(--site-button-bg,#1f4996) !important;
  box-shadow:0 0 0 3px rgba(31,73,150,.12) !important;
}

/* primary cart button — confident focal action */
#rightContent #addToCart ._buttons .mv-btn--primary.mv-btn--lg{
  height:44px !important;
  padding:0 22px !important;
  border-radius:22px !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(31,73,150,.18) !important;
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
#rightContent #addToCart ._buttons .mv-btn--primary.mv-btn--lg:hover{
  box-shadow:0 4px 14px rgba(31,73,150,.26) !important;
}
#rightContent #addToCart ._buttons .mv-btn--primary.mv-btn--lg svg{
  width:18px !important;height:18px !important;
}

/* wishlist heart — square ghost icon button, calm hover.
   Keep the SVG fill/stroke convention from wishlist-heart.css; only style
   the BUTTON box (size/border/hover), never the heart paint. */
#rightContent #wishlist .mv-btn--icon.sf-ui-pinfo__wishlist-link{
  width:44px !important;height:44px !important;
  padding:0 !important;
  border-radius:22px !important;
  border:1px solid var(--cp-line) !important;
  background:#fff !important;
  color:var(--cp-muted) !important;
  display:inline-flex !important;
  align-items:center !important;justify-content:center !important;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#rightContent #wishlist .mv-btn--icon.sf-ui-pinfo__wishlist-link:hover{
  border-color:#d9b3bd !important;
  background:#fdf3f5 !important;
  box-shadow:0 1px 3px rgba(180,60,90,.14) !important;
}
#rightContent #wishlist .mv-btn--icon.sf-ui-pinfo__wishlist-link svg{
  width:20px !important;height:20px !important;
}

/* ============================================================
   6) SHORT DESCRIPTION (#desc)
   ============================================================ */
#rightContent #desc{
  color:var(--cp-muted) !important;
  font-size:13px !important;
  line-height:1.6 !important;
  margin-top:4px !important;
}

/* ============================================================
   7) STOCK BADGE (.mv-stock-badge) -> unified calm chip
   Matches the list-row stock pill exactly (green in / amber out).
   ============================================================ */
#rightContent .mv-stock-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:10px 0 6px !important;
}
#rightContent .mv-stock-badge .mv-stock-availability{
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--cp-muted) !important;
  text-transform:none !important;
}
/* Match the product-list (.mv-dl) status pill exactly: flat fill, no border,
   green check (in-stock) / amber dot (out-of-stock). Covers BOTH the in-stock
   span (.siteprice.mv-stock-in) AND the out-of-stock span (.yousave.mv-stock-out
   — emitted by ProductUtils.Display), which the old .siteprice-only rules never
   reached, so the out-of-stock badge rendered unstyled. */
#rightContent .mv-stock-badge .siteprice,
#rightContent .mv-stock-badge .yousave{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px;
  font-size:11.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  padding:4px 9px 4px 8px !important;
  border:0 !important;
  border-radius:999px !important;
}
#rightContent .mv-stock-badge .siteprice::before,
#rightContent .mv-stock-badge .yousave::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
}
#rightContent .mv-stock-badge .mv-stock-in{ color:#1c7c43 !important; background:#eaf6ee !important; border:1px solid #1c7c43 !important; }
#rightContent .mv-stock-badge .mv-stock-in::before{
  width:14px; height:14px; border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7c43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 12.4l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
#rightContent .mv-stock-badge .mv-stock-out{ color:#b35c00 !important; background:#fdf1e3 !important; border:1px solid #b35c00 !important; }
#rightContent .mv-stock-badge .mv-stock-out::before{ background:#e98e2b !important; }

/* ============================================================
   8) DEVIS / WHATSAPP ROW (.sf-ui-pinfo__devis)
   The managed block right-aligns this row (`text-align:right`),
   so the buttons float oddly to the right. Re-align them into a
   clean left-aligned, equal-height pair.
   ============================================================ */
#rightContent .sf-ui-pinfo__devis{
  text-align:right !important;
  display:flex !important;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:flex-end !important;
  gap:10px !important;
  margin:10px 0 4px !important;
}
#rightContent .sf-ui-pinfo__devis .mv-btn{
  height:42px !important;
  padding:0 16px !important;
  border-radius:22px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  flex:0 0 auto;
  justify-content:center !important;
}
/* WhatsApp button — keep brand identity but calm it to chip language */
#rightContent .sf-ui-pinfo__devis .mv-btn--whatsapp{
  background:#eafaf0 !important;
  color:#0c7a3e !important;
  border:1px solid #b7e8ca !important;
}
#rightContent .sf-ui-pinfo__devis .mv-btn--whatsapp:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
}
#rightContent .sf-ui-pinfo__devis .mv-btn--whatsapp:hover svg{ fill:#fff !important; }
/* Devis ghost button — LEFT to its original .mv-btn--ghost colour at the user's
   request (2026-06-20): no hardcoded black/--cp-ink colour, no bg/border override.
   It keeps the shared 42px sizing from the .sf-ui-pinfo__devis .mv-btn rule above. */
#rightContent .sf-ui-pinfo__devis .mv-btn svg{ width:16px !important;height:16px !important; }

/* ============================================================
   9) COMPARE BUTTON (.mv-pdp-compare) -> same calm chip language
   ============================================================ */
#productContent .mv-pdp-compare{ margin:6px 0 4px !important; }
/* Match the Share button (.mv-share-toggle): white pill, #cdcdcd border,
   full radius, #4a4a4a text, soft grey hover. */
#productContent .mv-pdp-compare .mv-compare-btn.mv-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  height:auto !important;
  margin:0 !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#4a4a4a !important;
  border:1px solid #cdcdcd !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
#productContent .mv-pdp-compare .mv-compare-btn.mv-btn:hover{
  background:#f5f5f5 !important;
  border-color:#bdbdbd !important;
  color:#4a4a4a !important;
  box-shadow:none !important;
}
#productContent .mv-pdp-compare .mv-compare-btn.mv-btn[aria-pressed="true"]{
  background:#eef3fb !important;
  border-color:#c5d6ef !important;
  color:var(--site-button-bg,#1f4996) !important;
}
#productContent .mv-pdp-compare .mv-compare-btn.mv-btn svg{ width:18px !important;height:18px !important; }

/* ============================================================
   10) SHARE ROW (#socialButtons) -> calm, uniform chip set
   The live row is 7 pill links with platform names. Calm them
   into a tidy, uniform set: same hairline, same neutral resting
   look, soft hover. Brand colour stays in the icon only.
   ============================================================ */
#socialButtons #text.sharing-cl,
#socialButtons ul.sharing-cl{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px !important;
  align-items:stretch;
  margin:0 !important;padding:0 !important;
}
#socialButtons .sharing-cl li{ display:inline-flex !important; margin:0 !important; }
#socialButtons .sharing-cl li a{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:7px !important;
  height:34px !important;
  padding:0 13px !important;
  border:1px solid var(--cp-line) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--cp-muted) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}
#socialButtons .sharing-cl li a:hover{
  background:var(--cp-surface) !important;
  border-color:#d4d8de !important;
  color:var(--cp-ink) !important;
  box-shadow:0 1px 3px rgba(16,24,40,.10) !important;
}
#socialButtons .sharing-cl li a .sh-icon{
  width:17px !important;height:17px !important;flex:0 0 auto;
}
#socialButtons .sharing-cl .sh-label{
  display:inline !important;white-space:nowrap;color:inherit !important;
}

/* ==========================================================================
   RESELLER price on LIST/GRID cards  (ProductUtils.BuildResellerCardPriceBlock)
   --------------------------------------------------------------------------
   Compact reseller block shown on every category/manufacturer card when a
   reseller is signed in: a small grey public/promo line, a prominent blue
   "Prix revendeur" line, and a small "Remise additionnelle" pill. Reuses the
   same toggle hooks as the product page so the header "Masquer mes prix"
   switch (html.mv-prices-hidden) hides them on cards too.
   ========================================================================== */
.mv-card-reseller { display: block; line-height: 1.3; text-align: inherit; }
.mv-card-reseller .mv-public-price-line {
    display: block; font-size: 14px; color: #888; font-weight: 400;
    text-decoration: none; margin: 0 0 1px; white-space: nowrap;
}
.mv-card-reseller .mv-public-price-line .mention { font-size: 12px; color: #008000; }
.mv-card-reseller .mv-reseller-price {
    display: block; font-size: 18px; font-weight: 700; color: #0a4d8c;
    margin: 0 0 3px; white-space: nowrap;
}
.mv-card-reseller .mv-reseller-price .mention { font-size: 12px; font-weight: 400; color: #0a4d8c; }
/* Only the price value gets the larger pt size — the "Revendeur :" label keeps 18px. */
.mv-card-reseller .mv-reseller-price .mv-reseller-amount { font-size: 15pt !important; }
.mv-card-reseller .mv-reseller-eco {
    display: inline-block; background: #0a4d8c; color: #fff;
    padding: 2px 8px; border-radius: 11px; font-size: 13px; font-weight: 600;
}
/* HT price sub-line on cards (shown below the reseller / promo price; legally required). */
.mv-card-reseller .mv-card-ht {
    display: block; font-size: 12px; color: #999; font-weight: 400; margin: 0 0 2px; white-space: nowrap;
}
.mv-card-reseller .mv-reseller-ht { color: #5a7fa3; font-size: 14px; }
/* Public-price HT hidden by default; shown only when reseller prices are hidden. */
.mv-card-reseller .mv-public-ht { display: none; }
/* "Masquer mes prix": hide the reseller price + badge on cards; promote the public line. */
html.mv-prices-hidden .mv-card-reseller .mv-reseller-price,
html.mv-prices-hidden .mv-card-reseller .mv-reseller-ht,
html.mv-prices-hidden .mv-card-reseller .mv-reseller-eco { display: none !important; }
html.mv-prices-hidden .mv-card-reseller .mv-public-ht { display: block; }
/* Prices hidden: the public price takes the SAME design as the normal (non-reseller)
   card price — Green, 13pt, bold, right-aligned with a 2px mention gap. */
html.mv-prices-hidden .mv-card-reseller .mv-public-price-line {
    font-size: 15pt !important; color: #008000 !important; font-weight: bold !important;
    display: flex !important; justify-content: end !important; align-items: center !important; gap: 2px !important;
}

/* GRID reseller "additional discount" badge — blue twin of the red .promo-badge,
   overlaid top-left on the card image (tooltip "Remise Additionelle -X%"). Keeps the
   grid aligned (the inline pill is list-only now). */
.cell-product .image .mv-add-badge,
.mv-add-badge {
    position: absolute; z-index: 8; top: 20px; left: 8px;
    background: #0a4d8c; color: #fff; font-weight: bold; font-size: 12px; line-height: 1;
    padding: 4px 7px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: default;
    white-space: nowrap;
}
/* Hide the reseller add-discount badge along with prices when "Masquer mes prix" is on. */
html.mv-prices-hidden .mv-add-badge { display: none !important; }

/* ==========================================================================
   PRODUCT PAGE: "Comparer" button on the same row as "Remise additionnelle".
   BuildResellerPriceBlock wraps the eco badge + the compare button in
   .mv-reseller-eco-row and suppresses the standalone .mv-pdp-compare slot.
   ========================================================================== */
#productContent #productPrices_prices .mv-reseller-eco-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}
#productContent #productPrices_prices .mv-reseller-eco-row .mv-reseller-eco { margin: 0 !important; }
#productContent #productPrices_prices .mv-reseller-eco-row .mv-compare-btn { margin: 0; flex: 0 0 auto; }
/* When the compare button moved into the eco row, the standalone slot is empty — collapse it. */
#productContent .mv-pdp-compare:empty { display: none; margin: 0; }

/* ============================================================================
   /account pages — responsive fixes (2026-06-19, rescoped 2026-06-19)

   Anchors used (all are LIVE DOM hooks — .myaccountpage is DEAD in this theme):
     .mv-acct-table  — unique to order/invoice/quote views (+ added to those views)
     #navcolumn.mv-acct-nav  — set on the navcolumn div in _AccountLayout.cshtml;
                               specificity (1,1,0) beats bare #navcolumn (1,0,0)
                               so the 992px hide rule in styles.css is overridden
     .addressbookwrapper  — unique to the address-book view

   A. Order/Invoice/Quote tables -> stacked card layout at max-width:600px
   B. Sidemenu (#navcolumn.mv-acct-nav) re-show + tap targets at max-width:992px
      FIXES a bug: styles.css @media(max-width:992px) hides #navcolumn with
      display:none !important; the old counter-rule used .myaccountpage (dead class)
      so the account sidebar menu was invisible on mobile. This re-shows it.
   C. Address book card layout at max-width:600px

   styles.css is NOT edited (auto-regenerated on admin Save).
   ============================================================================ */

/* --------------------------------------------------------------------------
   A. Order-history table card layout  (max-width: 600px)
   .mv-acct-table is unique to account order views — no ancestor needed to
   prevent leaks. The overflow safety that was on .myaccountpage #maincolumn
   is now directly on .mv-acct-table (same effect, no dead selector).
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Safety net: the table itself clips overflow instead of a dead-class ancestor */
    .mv-acct-table {
        overflow-x: hidden;
    }

    /* table, tbody, tr, td all become full-width block elements */
    .mv-acct-table,
    .mv-acct-table tbody,
    .mv-acct-table tr,
    .mv-acct-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide the header row; labels come from data-label via ::before */
    .mv-acct-table thead {
        display: none !important;
    }

    /* Each <tr> becomes a white card */
    .mv-acct-table tbody tr {
        background: #fff !important;
        border: 1px solid #e6e8eb !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06) !important;
        padding: 4px 0 !important;
    }

    /* Each <td> is a flex row: label on the left, value on the right */
    .mv-acct-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f0f1f4 !important;
        text-align: right !important;
        vertical-align: unset !important;
    }

    /* No divider after the last cell in a card */
    .mv-acct-table tbody td:last-child {
        border-bottom: none !important;
    }

    /* Column label rendered via ::before from the data-label attribute */
    .mv-acct-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: #555 !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        margin-right: auto !important;
    }

    /* Suppress ::before on the Actions cell (data-label="" or attribute absent) */
    .mv-acct-table tbody td:not([data-label])::before,
    .mv-acct-table tbody td[data-label=""]::before {
        content: none !important;
    }

    /* Actions cell: flex row of buttons, wrapping, tap-friendly */
    .mv-acct-table tbody td[data-label=""] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    /* Each action button: stretch to fill available width */
    .mv-acct-table tbody td[data-label=""] .mv-btn {
        min-height: 25px !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    /* Empty-state colspan row: centred plain message, not a card row */
    .mv-acct-table tbody tr td[colspan] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: none !important;
    }
    .mv-acct-table tbody tr td[colspan]::before {
        content: none !important;
    }
}

/* --------------------------------------------------------------------------
   B. Sidemenu re-show + tap targets  (max-width: 992px)
   styles.css @media(max-width:992px) contains:
     #categoryleft, #navcolumn, ... { display:none !important }
   which hides the account sidebar on mobile. The old counter-rule used
   .myaccountpage (a dead class) so the sidebar was broken on mobile.
   Fix: #navcolumn.mv-acct-nav has specificity (1,1,0) which beats bare
   #navcolumn (1,0,0), so with !important it wins and re-shows the menu.
   The .sidemenu inside it is also hidden by:
     #main-content .sidemenu { display:none !important }  (specificity 1,0,1)
   Our selector (1,1,1) beats that too.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Re-show the account sidebar and stack it full-width above the content */
    #navcolumn.mv-acct-nav {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 14px 0 !important;
    }

    /* Re-show the sidemenu inside — beats #main-content .sidemenu{display:none} */
    #navcolumn.mv-acct-nav .sidemenu {
        display: block !important;
    }

    /* Enlarge tap targets for all account nav links to 44px */
    #navcolumn.mv-acct-nav .body ul li a {
        display: block !important;
        min-height: 44px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        box-sizing: border-box !important;
    }
}

/* --------------------------------------------------------------------------
   C. Address book card layout  (max-width: 600px)
   .addressbookwrapper is unique to AddressBook/Index.cshtml — no dead-class
   ancestor needed. The div[style*="float"] rule is kept under
   .addressbookwrapper .address so it cannot match any other float div.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Wrapper: plain block, full width */
    .addressbookwrapper {
        display: block !important;
        width: 100% !important;
    }

    /* Each address card: full-width, card look */
    .addressbookwrapper .address {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        background: #fff !important;
        border: 1px solid #e6e8eb !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06) !important;
        overflow: hidden !important;
    }

    /* Override the inline style="float:right" on the delete-form wrapper.
       Ancestor .addressbookwrapper .address prevents this from matching
       any other div[style*=float] elsewhere on the page. */
    .addressbookwrapper .address div[style*="float"] {
        float: none !important;
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 8px !important;
    }

    /* Edit button row: top breathing room */
    .addressbookwrapper .address .buttonrow {
        margin-top: 10px !important;
    }

    /* Edit anchor: full-width, 44px tap target */
    .addressbookwrapper .address .buttonrow a {
        min-height: 44px !important;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Delete image-button: full-width, 44px tall, image centred */
    .addressbookwrapper .address form input[type="image"] {
        min-height: 44px !important;
        height: 44px !important;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        object-fit: contain !important;
    }
}
/* ============================================================================
   End of /account responsive section (rescoped 2026-06-19)
   ============================================================================ */



/* Reseller export: "include images" opt-in + slower-generation warning. */
.mv-revendeur__optimg {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 13px; color: #2c3e50; margin: 0 14px 8px 0; user-select: none;
}
.mv-revendeur__optimg input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.mv-revendeur__imgwarn {
    margin: 6px 0 0; font-size: 12px; color: #b35900; background: #fff7e6;
    border: 1px solid #ffe0b2; border-radius: 6px; padding: 6px 10px; line-height: 1.35;
}

/* Keep each price line (number + its TTC/HT mention) on a single row — never wrap. */
.cell-product .your-price, .cell-product .your-price span, .cell-product .your-siteprice,
.cell-product .public-price, .cell-product .ht-price, .cell-product .ht-price span,
.product-line .your-price, .product-line .your-price span, .product-line .your-siteprice,
.product-line .public-price, .product-line .ht-price, .product-line .ht-price span,
.mv-card-price .your-price, .mv-card-price .your-price span, .mv-card-price .ht-price, .mv-card-price .ht-price span,
#productContent #productPrices_prices .your-price, #productContent #productPrices_prices .your-price span,
#productContent #productPrices_prices .public-price, #productContent #productPrices_prices .public-price span,
#productContent #productPrices_prices .ht-price, #productContent #productPrices_prices .ht-price span {
    white-space: nowrap !important;
}

/* Left nav column: top breathing room so it aligns with the content below the menu. */
#navcolumn {
    margin-top: 22px;
}

/* Mobile logo: the Logo tag adds .mv-has-mobile-logo to #logo and emits a real
   <img class="mv-logo-mobile-img"> inside it (both only when a mobile logo is uploaded).
   The desktop logo is a 2-FRAME SPRITE shown as the #logo background and sized by the
   sprite-aware rules above. On small screens we hide that background and show the <img>
   instead, and let the box width be AUTO so it hugs the (single-frame) logo image. */
.mv-logo-mobile-img { display: none; }
@media (max-width: 768px) {
    /* Hide the desktop sprite background and collapse the fixed sprite box to its content.
       Specificity #header .mv-hdr-logo #logo.mv-has-mobile-logo (2,2,0) beats the sprite rules. */
    #header .mv-hdr-logo #logo.mv-has-mobile-logo,
    #newHeader .mv-hdr-logo #logo.mv-has-mobile-logo {
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 60vw !important;
        background: none !important;
    }
    /* Show the mobile logo image; height caps it, width:auto keeps the aspect so the
       parent <a> shrink-wraps to it (hugs the logo). */
    #header .mv-hdr-logo #logo.mv-has-mobile-logo .mv-logo-mobile-img,
    #newHeader .mv-hdr-logo #logo.mv-has-mobile-logo .mv-logo-mobile-img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: 44px !important;
        max-width: 60vw !important;
    }
}

/* (Removed a stale duplicate toolbar-layout block that a merge re-introduced here. It
   positioned the sort label with `left:-22px`, which dragged "Trier par:" into the product
   count, and forced `padding-right:6px`. The single source of truth for the .product-filter
   layout is the flex-order block lower in this file — see "Category toolbar (.product-filter)
   — abt.com layout" + the inline quick-filters section.) */

/* ==========================================================================
   FOOTER POLISH — MV-2026  (.mv-footer-inner UI/UX + responsive)
   --------------------------------------------------------------------------
   custom.css loads LAST (after the managed MV-SITE-THEME block in
   SiteThemeCss.cs), so equal-specificity + !important beats the managed footer
   rules. Everything is scoped under #footer so it reliably out-specifies them.
   Markup contract is fixed (SiteFooter.cs): .mv-footer / .mv-footer-inner /
   .mv-footer-col / .mv-footer-title / .mv-fel / .mv-footer-links / .mv-footer-
   bottom(-inner); element handlers emit .socials / .security / .newsletter-
   footer (#email + #go icon-anchor) / .sf-ui-langlist / .terms_info — restyle
   via these, never rename. Colors stay DB-driven via var(--site-link, …).
   NOTE: a theme guard nudges footer links left:4px on hover — so hover effects
   here use color/underline/scale only, never a horizontal translate.
   ========================================================================== */

/* --- Columns: clean modern grid, comfortable top spacing, NO bottom padding
   (user request) so the bottom bar follows directly. Overrides .mv-footer-inner
   gap:18px/padding:28px 22px and .mv-footer-col flex:1 1 0/min-width:130px. --- */
#footer .mv-footer-inner {
    gap: 26px 44px !important;
    padding: 36px 22px 0 !important;
    align-items: flex-start !important;
}
#footer .mv-footer-col {
    flex: 1 1 180px !important;
    min-width: 170px !important;
    line-height: 1.5;
}

/* --- Column title: clean, modern, normal-case (no uppercase / no accent bar —
   those read heavy/dated). Overrides .mv-footer-title bold/15px. --- */
#footer .mv-footer-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    opacity: .95;
}

/* --- Links: comfortable line-height, ~32px tap target, color + underline on
   hover (overrides .mv-footer-links li margin:5px 0). The managed block forces
   color on `a *`, so the hover rule also targets `a:hover *` to recolor the
   <span>-wrapped help-link text. No transform — guard-safe. --- */
#footer .mv-footer-links li { margin: 0 !important; }
#footer .mv-footer-links li a {
    display: inline-block;
    padding: 6px 0;
    line-height: 1.4;
    font-size: 13px !important;
    transition: color .15s ease;
}
#footer .mv-footer-inner a:hover,
#footer .mv-footer-inner a:hover *,
#footer .mv-footer-inner a:focus-visible {
    color: var(--site-link, #0f63d2) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* --- Newsletter: clean input that wraps to full width on narrow columns
   (overrides .mv-footer .newsletter-footer nowrap and its #email rule). The
   submit is the #go icon-anchor (sprite) — left as-is, just aligned. --- */
#footer .mv-footer .newsletter-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px;
}
#footer .mv-footer .newsletter-footer #email {
    flex: 1 1 150px !important;
    min-width: 0 !important;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    box-sizing: border-box !important;
}
#footer .mv-footer .newsletter-footer #email::placeholder { color: rgba(255, 255, 255, .55); }
#footer .mv-footer .newsletter-footer #email:focus {
    outline: none;
    border-color: var(--site-link, #0f63d2);
    background: rgba(255, 255, 255, .12);
}

/* --- Socials: clean spaced icons, subtle opacity + scale on hover (no chunky
   circular chips). .socials is a <p> with a leading label span + icon anchors. --- */
#footer .mv-footer .socials {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px !important;
    margin-top: 6px;
}
#footer .mv-footer .socials a {
    display: inline-flex !important;
    align-items: center;
    opacity: .85;
    transition: opacity .15s ease, transform .15s ease;
}
#footer .mv-footer .socials a:hover {
    opacity: 1;
    transform: scale(1.1);
}
#footer .mv-footer .socials a img {
    max-width: 22px;
    max-height: 22px;
}

/* --- Bottom bar: first item (copyright) hugs the left, everything after is
   pushed to the right edge. Each element is wrapped in .mv-fel, so the push
   targets the first .mv-fel (overrides .mv-footer-bottom-inner gap/padding). --- */
#footer .mv-footer-bottom-inner {
    gap: 12px 24px !important;
    padding: 16px 22px !important;
    justify-content: flex-start !important;
}
#footer .mv-footer-bottom-inner > .mv-fel:first-child { margin-right: auto !important; }

/* ==========================================================================
   FOOTER DESIGN FIX — MV-150  (consistency pass over the live column markup)
   --------------------------------------------------------------------------
   The columns are filled by different element handlers + content blocks, so
   their internal markup is inconsistent:
     • help links  -> .mv-fel > ul.mv-footer-links   (already de-bulleted)
     • custom pages-> .mv-fel > .title>h4 + bare <ul> (browser default bullets!)
     • best price  -> .mv-fel > .title>h4 + ul>li.tac>a>img
     • newsletter  -> .mv-fel with a <table> heading (inline font-size:16px)
     • socials     -> .mv-fel > p.socials
     • employee    -> .mv-footer-col > a > img.sf-cb-employeesrot__img
   This block unifies headings, lists, links and media across ALL of them so
   every column reads the same. Scoped under #footer, !important to beat the
   managed MV-SITE-THEME rules; colours stay DB-driven; no hover-translate
   (the SiteThemeCss guard nudges footer links left:4px on hover).
   ========================================================================== */

/* --- Unify every column heading: the block-internal .title>h4 headings now
   match the .mv-footer-title look (14px / 600 / 12px gap), normal-case. --- */
#footer .mv-footer-col .title { margin: 0 0 12px !important; padding: 0 !important; }
#footer .mv-footer-col .title h4 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}
/* Newsletter heading is a <table> (no class) with an inline 16px on the first
   row — normalise both rows to the same heading scale. --- */
#footer .mv-footer-col table td.title {
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 0 2px !important;
}
#footer .mv-footer-col table td.title + td.title,
#footer .mv-footer-col table tr + tr td.title { font-weight: 400 !important; opacity: .85; }

/* --- Unify ALL footer lists, not just .mv-footer-links: the custom-page and
   best-price columns use bare <ul> which otherwise gets disc bullets + a 40px
   indent. Kill that and give their links the same tap target/hover. --- */
#footer .mv-footer-col ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#footer .mv-footer-col li { margin: 0 !important; }
#footer .mv-footer-col li a {
    display: inline-block;
    padding: 6px 0;
    line-height: 1.4;
    font-size: 13px !important;
    transition: color .15s ease;
}

/* --- Media: keep the employee photo and the best-price badge tidy and fluid.
   The best-price <li class="tac"> centres its badge; drop the legacy spacing. --- */
#footer .mv-footer-col .sf-cb-employeesrot__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
#footer .mv-footer-col li.tac { text-align: center; }
#footer .mv-footer-col li.tac a { padding: 4px 0; }
#footer .mv-footer-col li.tac img { max-width: 100%; height: auto; border: 0; }

/* --- Newsletter blurb: tone the descriptive paragraph down so the heading and
   input lead, and give the block a touch of top spacing. --- */
#footer .mv-footer-col .mv-fel > p { margin: 0 0 10px !important; }
#footer .mv-footer .newsletter-footer { margin-top: 4px; }

/* ==========================================================================
   FOOTER RESPONSIVE — graceful 4→2→1 reflow on the theme's 992/768/576 scale,
   replacing the managed single @media(max-width:820px) column flip. Desktop is
   fixed-width, so these handle window narrowing (and any page that opts into a
   viewport meta).
   ========================================================================== */

/* <=992: two columns. flex-direction:row !important is required to override the
   managed @media(max-width:820px){.mv-footer-inner{flex-direction:column}} rule,
   which otherwise fires in the 577–820px band and would make the 50% column
   widths resolve against height in column mode. ≤576px restores column below. */
@media (max-width: 992px) {
    #footer .mv-footer-inner {
        flex-direction: row !important;
        gap: 24px 28px !important;
    }
    #footer .mv-footer-col {
        flex: 1 1 calc(50% - 28px) !important;
        max-width: calc(50% - 28px) !important;
    }
}

/* <=768: stack the bottom bar, centered. */
@media (max-width: 768px) {
    #footer .mv-footer-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 10px !important;
    }
    #footer .mv-footer-bottom-inner > .mv-fel:first-child { margin-right: 0 !important; }
    #footer .mv-footer .socials { justify-content: center !important; }
}

/* <=576: single full-width centered column. */
@media (max-width: 576px) {
    #footer .mv-footer-inner {
        flex-direction: column !important;
        gap: 26px !important;
        padding: 28px 18px 24px !important;
        text-align: center;
    }
    #footer .mv-footer-col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #footer .mv-footer .newsletter-footer,
    #footer .mv-footer .socials { justify-content: center !important; }
    #footer .mv-footer .newsletter-footer #email { flex: 1 1 100% !important; }
}

/* ==========================================================================
   FOOTER BOLD REFRESH — MV-150
   --------------------------------------------------------------------------
   Authoritative footer look, appended LAST so it supersedes the POLISH +
   RESPONSIVE blocks above via source order. Uses the SITE font (not the
   managed Tahoma/Verdana), an equal-width responsive GRID, subtle column
   dividers, accent-underlined uppercase headings, a larger white newsletter
   field, white social chips, and a tightened bottom bar. The footer COLUMNS
   area has a LIGHT background (text is DB blue), so decorations use
   black-alpha / white, not white-alpha. Scoped under #footer; accent stays
   DB-driven via var(--site-link, …); no hover translate (SiteThemeCss nudges
   footer links left:4px on hover). The newsletter #go sprite button is resized
   only — never given a `background` (would wipe the arrow icon). 6→3→2→1 cols.
   ========================================================================== */

/* --- Font: the site font (Montserrat/Ubuntu) instead of managed Tahoma/Verdana.
   !important + later source order beats the managed footer font (not !important).
   Covers the whole footer including the bottom bar. --- */
#footer .mv-footer,
#footer .mv-footer * {
    font-family: var(--site-menu-font, Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif) !important;
}

/* --- All footer COLUMN text black (overrides the DB blue text/link/title
   colours). Scoped to .mv-footer-inner so the dark bottom bar / top strip keep
   their own light text (black there would be invisible). --- */
#footer .mv-footer-inner,
#footer .mv-footer-inner *,
#footer .mv-footer-inner a,
#footer .mv-footer-inner a *,
#footer .mv-footer-inner .title,
#footer .mv-footer-inner .title *,
#footer .mv-footer-col .title h4 { color: #000 !important; }

/* --- Columns: equal-width grid that fits as many as the row allows. --- */
#footer .mv-footer-inner {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 30px 0 !important;
    padding: 16px 22px 0 !important;
    align-items: stretch !important;
}
#footer .mv-footer-col {
    flex: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 2px 26px !important;
    border-left: 1px solid rgba(0, 0, 0, .10) !important;
    line-height: 1.35;
}
#footer .mv-footer-col:first-child { border-left: 0 !important; padding-left: 0 !important; padding-bottom: 0 !important; }

/* --- Headings: uppercase + short accent underline. Scoped to the heading
   WRAPPERS only (direct .title child of .mv-fel, and the .mv-footer-title
   contract element) so the newsletter's <td class="title"> cells are NOT
   caught (that was cramping the "Restez informé" block). --- */
#footer .mv-footer-col .mv-fel > .title,
#footer .mv-footer-col > .mv-footer-title {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 10px !important;
}
#footer .mv-footer-col .mv-fel > .title h4,
#footer .mv-footer-col > .mv-footer-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
/* (heading accent underline removed per request) */

/* --- Links: roomy rows, larger text. Hover = COLOUR change only, NO underline
   (overrides the earlier POLISH hover that added text-decoration:underline). --- */
#footer .mv-footer-col li a,
#footer .mv-footer-links li a { padding: 3px 0 !important; font-size: 14px !important; }
/* match the inner <span> wrappers (and any other inner element) to the link size */
#footer .mv-footer-inner a * { font-size: 14px !important; }
#footer .mv-footer-inner a:hover,
#footer .mv-footer-inner a:hover *,
#footer .mv-footer-inner a:focus-visible {
    color: var(--site-link, #2f7dd6) !important;
    text-decoration: none !important;
}

/* --- Newsletter: taller, pill-rounded WHITE field (the managed POLISH rule used
   translucent white = invisible on the light footer). Button resized; icon kept. */
#footer .mv-footer .newsletter-footer { margin-top: 10px; flex-wrap: wrap !important; align-items: center; gap: 0 !important; }
/* the loading-spinner span sits between input and button — collapse it to 0 width
   so the input and send button touch as one joined bar */
#footer .mv-footer .newsletter-footer .load-newsletter { flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
#footer .mv-footer .newsletter-footer #email {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 8px 0 0 8px !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .18) !important;
    border-right: 0 !important;
    color: #222 !important;
    font-size: 14px;
    padding: 0 14px;
    margin: 0 !important;
    max-width: 100% !important;
}
#footer .mv-footer .newsletter-footer #email::placeholder { color: rgba(0, 0, 0, .45) !important; }
#footer .mv-footer .newsletter-footer #email:focus { border-color: var(--site-link, #2f7dd6) !important; background: #fff !important; }
/* #go is an empty <a class="icons"> sprite button — swap the sprite for an
   inline SVG "send" icon on an accent-coloured button. --- */
#footer .mv-footer .newsletter-footer #go {
    height: 42px !important;
    min-width: 44px;
    border-radius: 0 8px 8px 0;
    display: inline-block;
    background-color: var(--site-link, #2f7dd6) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='22'%20y1='2'%20x2='11'%20y2='13'/%3E%3Cpolygon%20points='22%202%2015%2022%2011%2013%202%209%2022%202'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 19px 19px !important;
}
#footer #go { margin: 0 !important; }

/* --- Newsletter icon: replace the sprite (#newsletter_img) with a clean SVG
   mail icon in the accent colour. --- */
#footer .mv-footer-col #newsletter_img {
    display: inline-block;
    width: 34px !important;
    height: 34px !important;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f7dd6'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='4'%20width='20'%20height='16'%20rx='2'/%3E%3Cpath%20d='m22%207-10%205L2%207'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* --- Fix the cramped/overlapping title rows in the elements: the managed
   markup collapses line-height inside .mv-fel (e.g. the newsletter heading
   table), so give .mv-fel and its content a sane line-height. --- */
#footer .mv-footer-col .mv-fel,
#footer .mv-footer-col .mv-fel * { line-height: 1.25 !important; }

/* --- Socials: white circular chips that lift on hover. --- */
#footer .mv-footer .socials { gap: 10px !important; margin-top: 10px; }
/* The leading label span ("SUIVEZ … SUR") takes a full row so the icon chips
   wrap onto the line below it. --- */
#footer .mv-footer .socials > span:first-child { flex: 0 0 100% !important; width: 100% !important; margin-bottom: 4px; text-align: center; }
#footer .mv-footer .socials a {
    width: 38px; height: 38px;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    opacity: 1 !important;
}
#footer .mv-footer .socials a:hover { box-shadow: 0 2px 7px rgba(0, 0, 0, .22); transform: none !important; }
#footer .mv-footer .socials a img { max-width: 20px; max-height: 20px; }

/* --- Employee photo: rounded, fills its column. --- */
#footer .mv-footer-col .sf-cb-employeesrot__img { border-radius: 10px; width: 100%; max-width: 55% !important; height: auto !important; }

/* --- Admin edit pencil: it's an <a> inside .mv-footer-inner, so the theme's
   footer-link hover guard (a:hover{position:relative;left:4px}) catches it and
   makes it jump on hover -> cursor falls off -> reverts -> infinite flicker, so
   it can't be clicked. Pin it absolute top-right at ALL times (incl. :hover),
   override the guard. --- */
#footer .editBlock,
#footer .mv-fel-edit,
#footer .editBlock:hover,
#footer .mv-fel-edit:hover {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    transform: none !important;
}

/* --- Bottom bar (this row IS dark): thin divider + comfy padding. --- */
#footer .mv-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12) !important; }
#footer .mv-footer-bottom-inner { padding: 18px 22px !important; }

/* --- Top strip ("Les experts du e-Commerce …"): taller padding. --- */
#footer .mv-footer-strip-inner { padding: 14px 22px !important; }

/* --- Responsive: 3 / 2 / 1 columns; dividers off at the narrowest size. --- */
@media (max-width: 1200px) {
    #footer .mv-footer-inner { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    #footer .mv-footer-inner { grid-template-columns: repeat(2, 1fr) !important; }
    /* hide the employee-photo column on tablet + mobile */
    #footer .mv-footer-col:first-child { display: none !important; }
}
@media (max-width: 576px) {
    #footer .mv-footer-inner { grid-template-columns: 1fr !important; padding: 32px 18px 8px !important; text-align: center; }
    #footer .mv-footer-col { border-left: 0 !important; padding: 0 !important; }
    #footer .mv-footer-col .mv-fel > .title::after,
    #footer .mv-footer-col > .mv-footer-title::after { left: 50%; transform: translateX(-50%); }
    #footer .mv-footer .newsletter-footer,
    #footer .mv-footer .socials { justify-content: center !important; }
    /* employee photo: small + centered on phones (managed .mv-footer img forces
       max-width:100% !important, so this override also needs !important) */
    #footer .mv-footer-col .sf-cb-employeesrot__img { max-width: 150px !important; display: block; margin: 0 auto; }
    #footer .mv-footer .newsletter-footer #email { flex: 1 1 auto !important; }
    /* center the newsletter heading table on mobile */
    #footer .mv-footer-col .mv-fel table { display: flex !important; justify-content: center !important; }
}

/* ============================================================================
   HOMEPAGE RESPONSIVE PASS v2 (2026-06-19) — replaces the v1 block.
   Authored per real homepage content-block markup (ListRotator hero col2,
   SelectProductViewer col3, ManufacturersSlider col4, HtmlBlock col5/6,
   product sliders, Affa/Image sliders, side menu/tree nav) by 10 zone agents.
   EVERY selector is scoped under .homepage (DOM: #main-content > .homepage).
   No header selectors (#header/#logo/#header-content/#top-menu/#header-menu/
   .mv-megamenu*/.mv-header-top/.mv-drill) are touched. Bands: <=576 / 577-991 /
   992-1200. To revert: delete from this banner to the /HOMEPAGE RESPONSIVE v2 end.
   ============================================================================ */

/* 07 Home shell & content columns layout
   ============================================================================
   Scope: ALL selectors under .homepage (homepage DOM only).
   Header selectors are intentionally absent.
   Load order: this file is intended to load AFTER custom.css (which already
   loads after styles.css), so plain specificity beats the existing rules at
   equal specificity, and !important is only used where the upstream rule
   already uses !important.

   Upstream column width cascade (desktop >=993):
     styles.css:5354  #homepagecolumn1  { width:200px; float:left }
     styles.css:5361  #homepagecolumn2  { width:calc(100% - 220px); float:left }
     custom.css:2139  @media (min-width:993px)
                       #homepagecolumn1 { width:20% !important }
                       #homepagecolumn2 { width:calc(80% - 20px) !important }
     styles.css:5721  @media screen and (max-width:768px)
                       .homepage #homepagecolumn1,
                       .homepage #homepagecolumn2 { float:none !important; width:auto !important }
     custom.css:742   .homepage:not(:has(#homepagecolumn1 > *)) #homepagecolumn2
                       { width:100% !important; margin-left:0 !important }

   #hp_blocks upstream:
     styles.css:9687  #hp_blocks { display:flex; gap:20px; align-items:stretch }
     custom.css:3976  @media (min-width:577px) and (max-width:991px) — 2-up wrap
     custom.css:3992  @media (max-width:576px) — 1-up column

   This file extends and reinforces those existing rules for the 769-991
   tablet gap that styles.css's <=768 block does not cover, and tightens
   the #main-content/.homepage shell padding on small screens.
   ============================================================================ */

/* ============================================================================
   SECTION 1 — Shell: #main-content and .homepage
   Full width, box-sizing, no horizontal overflow, sane side padding on phones.
   ============================================================================ */

/* All widths: box-sizing and overflow containment on the shell. */
.homepage {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

/* Phone (<=576): add comfortable side padding so content isn't edge-to-edge.
   styles.css:5522 sets #main-content { padding:0 8px } as the global default,
   and custom.css:2179 raises it to 0 36px at >=993. At <=576 we want 8-10px
   on each side without fighting the managed block — the .homepage wrapper is
   what we pad here so it applies only on the homepage. */
@media (max-width: 576px) {
    .homepage {
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }
}

/* Tablet (577-991): slightly more padding than the 8px global default. */
@media (min-width: 577px) and (max-width: 991px) {
    .homepage {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}


/* ============================================================================
   SECTION 2 — Side rail (#homepagecolumn1) on tablet/phone (<=991)
   The existing <=768 rule in styles.css (line 5721) already float:none/width:auto
   for <=768px. This block extends the same treatment to 769-991 (tablets) so
   the rail never squeezes the main column on any sub-desktop viewport.
   custom.css:2139 already scopes the 20%/calc(80%) split to (min-width:993px)
   so this is strictly belt-and-suspenders for the 769-991 gap.
   ============================================================================ */

@media (min-width: 769px) and (max-width: 991px) {
    /* Hide the left rail on tablets — it was never visible at this range before
       the modernization; the 80/20 split only activates at >=993. Hiding it
       frees the full width for #homepagecolumn2. */
    .homepage #homepagecolumn1 {
        display: none !important;
    }

    /* Main column: full width once the rail is gone. */
    .homepage #homepagecolumn2 {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
}

/* Phone (<=576): same — reinforce the styles.css <=768 rule explicitly for
   the phone band so specificity is unambiguous in this file. */
@media (max-width: 576px) {
    .homepage #homepagecolumn1 {
        display: none !important;
    }

    .homepage #homepagecolumn2 {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
}

/* Tablet 577-768: styles.css already has float:none/width:auto; reinforce
   and add display:none for the rail so it doesn't ghost-occupy space. */
@media (min-width: 577px) and (max-width: 768px) {
    .homepage #homepagecolumn1 {
        display: none !important;
    }

    .homepage #homepagecolumn2 {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
}


/* ============================================================================
   SECTION 3 — #homepagecolumn2.hp-main and #homepagecolumn3 full width <=991
   ============================================================================ */

@media (max-width: 991px) {
    /* Main content column: full width, no float, sane box model. */
    .homepage #homepagecolumn2,
    .homepage #homepagecolumn2.hp-main {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Column 3 (below the main column, clear:both): already clears floats, but
       ensure it spans full width with no inherited margin artifacts. */
    .homepage #homepagecolumn3 {
        width: 100% !important;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
}


/* ============================================================================
   SECTION 4 — #hp_blocks 3-box row responsive reflow
   Desktop (>=992): 3-up flex row (upstream styles.css:9687 handles this).
   Tablet (577-991): 2-up wrap.
   Phone (<=576): 1-up stack.

   NOTE: custom.css (loaded before this file in the intended load order) already
   has the same 2-up/1-up blocks at lines 3976-4004. These rules reinforce those
   with explicit .homepage scoping and slightly tighten the gap on mobile.
   The existing @media (max-width:768px) flex-direction:column rule in the old
   custom.css homepage pass is intentionally NOT removed — it is overridden here
   by source order at equal specificity (this file loads after).
   ============================================================================ */

/* All sub-desktop: ensure the container is a flex column/wrap baseline and
   children are box-sizing safe. */
@media (max-width: 991px) {
    .homepage #hp_blocks {
        box-sizing: border-box;
        width: 100%;
        overflow: visible; /* lift the overflow:hidden from styles.css:9642 so
                              wrapped rows aren't clipped */
    }

    .homepage .weekly_specials {
        /* On mobile/tablet .weekly_specials wraps an inner .hp_blk;
           give it full width within the flex row so its child fills it. */
        box-sizing: border-box;
        margin: 0;
    }
}

/* Tablet (577-991): 2-up wrap.
   Overrides the <=768 column rule from the prior responsive pass (custom.css:3991)
   via source order — this rule appears after it in the cascade. */
@media (min-width: 577px) and (max-width: 991px) {
    .homepage #hp_blocks {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    /* Direct children: 2-up, each takes slightly less than half to account for gap.
       Covers: direct .hp_blk (col4/col6), .weekly_specials (col5 wrapper). */
    .homepage #hp_blocks > .hp_blk,
    .homepage #hp_blocks > .weekly_specials {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        min-width: 0 !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
}

/* Phone (<=576): 1-up full-width stack. */
@media (max-width: 576px) {
    .homepage #hp_blocks {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .homepage #hp_blocks > .hp_blk,
    .homepage #hp_blocks > .weekly_specials {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* .weekly_specials inner .hp_blk: always full-width within its parent. */
@media (max-width: 991px) {
    .homepage #hp_blocks .weekly_specials > .hp_blk {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* hp_blk_body: auto width (override the fixed 299px from styles.css:9660). */
    .homepage #hp_blocks .hp_blk_body {
        width: auto !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================================
   SECTION 5 — Gap and margin polish on small screens
   ============================================================================ */

/* Vertical breathing room between homepage sections on phones. */
@media (max-width: 576px) {
    .homepage #homepagecolumn3 {
        margin-top: 8px;
    }

    .homepage #hp_blocks {
        margin-top: 8px;
    }
}

@media (min-width: 577px) and (max-width: 991px) {
    .homepage #homepagecolumn3 {
        margin-top: 10px;
    }

    .homepage #hp_blocks {
        margin-top: 10px;
    }
}

/* Small-desktop (992-1200): keep the existing flex row but tighten the gap
   slightly so the three boxes don't look sparse on 992px viewports. */
@media (min-width: 992px) and (max-width: 1200px) {
    .homepage #hp_blocks {
        gap: 14px !important;
    }
}


/* 01 ListRotator (homepage col2 hero) */

/*
  SELECTORS FOUND (real emitted markup):
  ─────────────────────────────────────────────────────────────────────────────
  .containerrotator-fit          outer height-reservation wrapper (JS sets
                                 inline height = screenH * scale)
  .containerrotator              the transform target; JS sets inline
                                 width = totalPx, transform:scale(f), transform-origin:top left
  .containerrotator .l-rotator   JS sets inline width = totalPx, height = screenH
  .l-rotator .screen             JS sets inline width = screenW (80%), height = screenH,
                                 left = 0 (when list is right-aligned)
  .l-rotator .thumbnails         JS sets inline left = screenW - arrowWidth, height = screenH,
                                 overflow:hidden
  .l-rotator .thumbnails li      JS sets inline width = itemW + arrowW, height = itemH
  .l-rotator .thumbnails .thumb  JS sets inline width = (itemW - border), height = (itemH - border)
                                 as a fixed-height flex column (plugin's own CSS: display:block float:left)
  .l-rotator .screen .textbox    JS positions absolutely (top/left) on active slide
  .l-rotator .inner-bg           absolute, z-index:0, black translucent scrim
  .l-rotator .thumbnails li > div:not(.thumb)
                                 per-slide caption div, inline top/left/width/height from C#
  .l-rotator h1.title            thumb row title (already hidden/zeroed by custom.css h1 reset)
  .l-rotator h1.adtext           banner caption heading
  .l-rotator #right-arrow / #left-arrow
                                 arrow elements, position:relative float:left width:14-15px
                                 (they are inside the list column, height = itemH via JS)
  .l-rotator .main-img           banner images, position:absolute top:0 left:0

  INLINE STYLES SET BY JS (must use !important to override, or cap outer wrapper):
  ─────────────────────────────────────────────────────────────────────────────
  .containerrotator              style="width:NNNpx; transform:scale(f); transform-origin:top left"
  .containerrotator-fit          style="height:NNpx; overflow:hidden"
  .l-rotator                     style="width:NNNpx; height:NNpx"
  .l-rotator .screen             style="width:NNNpx; height:NNpx; left:0"
  .l-rotator .thumbnails         style="left:NNNpx; height:NNpx; overflow:hidden"
  .l-rotator .thumbnails li      style="width:NNpx; height:NNpx"
  .l-rotator .thumbnails .thumb  style="width:NNpx; height:NNpx" (flex column)
  .containerrotator-fit          style="height:NNpx; overflow:hidden"

  APPROACH:
  ─────────────────────────────────────────────────────────────────────────────
  Desktop (≥992px): the JS scale(f) handles fitting to the column; we only add
  max-width:100%/overflow:hidden safety on the wrappers and object-fit:cover on
  the banner image.

  Tablet (577–991px): same scale approach but cap the banner height so it is not
  enormous on wider tablets. The scale-clamped-at-1 rule in the RC already ensures
  no magnification.

  Phone (≤576px): JS has already run and the widget is tiny (scale << 1). Override
  the absolute positioning to STACK banner on top, list below — full width each.
  Use !important throughout since we are fighting JS inline styles. We make the
  .containerrotator a column-flex box, give .screen and .thumbnails 100% width, and
  reset the JS-set absolute positions.
  ─────────────────────────────────────────────────────────────────────────────
*/

/* ============================================================================
   GLOBAL SAFETY — all widths, prevent any horizontal scroll from the widget
   ============================================================================ */

.homepage .containerrotator-fit {
    max-width: 100%;
    overflow: hidden;
    /* JS sets inline height; let it control that */
    box-sizing: border-box;
}

.homepage .containerrotator {
    max-width: 100%;
    overflow: hidden; /* !important NOT needed here — JS does not set overflow on .containerrotator */
    box-sizing: border-box;
}

/* Banner images: always cover + never overflow their screen box */
.homepage .containerrotator .l-rotator .screen .main-img,
.homepage .containerrotator .l-rotator .screen img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;   /* fills the JS-sized screen box edge-to-edge */
    object-position: center center;
}

/* ============================================================================
   SMALL DESKTOP (992px – 1200px): fits column, no clip, banner uses object-fit
   ============================================================================ */
@media (min-width: 992px) and (max-width: 1200px) {
    /* The JS scale factor already shrinks the widget to the column width.
       The key risk at this size is the list column being "crushed" (only ~20%
       of a narrower column). We cannot override the JS-set pixel widths for the
       list column without breaking the plugin's track math, so instead we ensure
       the outer wrappers clip cleanly and the banner image is always covered. */

    .homepage .containerrotator-fit {
        overflow: hidden !important; /* !important: JS sets overflow:hidden inline on -fit */
    }

    .homepage .containerrotator .l-rotator {
        overflow: hidden; /* belt-and-suspenders — plugin also sets this */
    }

    /* List column text: ensure thumbnail titles and descriptions remain readable
       even when the scale factor shrinks them. Min thresholds via transform —
       we cannot change the pixel sizes the JS computed, but we can set a floor
       on the OUTER scale so text is never sub-10px. The widget itself handles
       the scale; we just ensure no extra clip. */
    .homepage .containerrotator .l-rotator .thumbnails .thumb {
        /* No width/height override (JS owns those). Only cosmetic adjustments. */
        overflow: hidden; /* already set by plugin but be explicit */
    }
}

/* ============================================================================
   TABLET (577px – 991px): banner+list kept, manage height, no horizontal overflow
   ============================================================================ */
@media (min-width: 577px) and (max-width: 991px) {
    /* The JS scale factor makes the whole widget shrink proportionally.
       On a ~768px viewport with a ~550px content column the scale is ~0.45,
       which produces an ~126px tall banner — too short to be useful.
       Cap the outer fit wrapper height so the widget is legible; since we
       cannot change the transform (JS owns it), we instead let the wrapper
       clip the scale-transformed box at a saner height and show the banner
       top portion (which is the most important part of a promo image). */

    .homepage .containerrotator-fit {
        max-height: 220px !important; /* !important: JS sets inline height on this element */
        overflow: hidden !important;  /* !important: JS sets overflow:hidden inline */
        min-height: 100px;
    }

    .homepage .containerrotator {
        max-width: 100% !important;  /* !important: JS sets inline width in px */
        overflow: hidden;
    }

    /* Prevent the widget from creating a horizontal scrollbar inside the column
       on tablets where the JS design-width slightly exceeds the column. */
    .homepage .containerrotator .l-rotator {
        overflow: hidden !important; /* !important: plugin already sets this, reinforce */
    }

    /* Thumbnail title + description: at tablet scale (~0.5) the 14px title
       computes to 7px after transform — below the 12px minimum. Since the
       transform is on the outer wrapper, the RENDERED (post-transform) pixel
       size is what the user sees. We cannot override this without reflowing the
       plugin's track. The approach: if the scale factor is so small that text
       is illegible, the stacked phone layout (≤576) is the right answer —
       tablet users at 577px are close to that boundary. Document the trade-off:
       at ~700-768px wide columns (after the ~220px rail) the widget runs at
       ~0.6 scale, producing ~8.4px title text (borderline). The max-height
       clip above hides the worst of it; a future enhancement would swap to the
       stacked layout at a higher breakpoint if user testing shows pain. */
    .homepage .containerrotator .l-rotator .thumbnails .thumb {
        /* Ensure the scrollbar and jcarousel arrow have minimal tap targets
           in the list column. !important not needed — these are additions, not
           overrides of inline styles. */
        min-height: 44px;
    }

    /* Arrow controls: jcarousel up/down arrows in the thumbnail panel.
       #up-btn and #down-btn are 60px wide × 24px tall per the plugin CSS.
       At 0.6 scale they become ~36px × ~14px — below the 44px tap target
       threshold. We cannot fix this without reflowing the plugin, but we can
       at least ensure the plugin's own CSS does not further reduce them. */
    .homepage .containerrotator .l-rotator #up-btn,
    .homepage .containerrotator .l-rotator #down-btn {
        /* Leave the plugin's size intact (JS/CSS own this). No override needed
           — these are untouched and will scale with the transform. */
        /* Documented: tap targets are sub-44px on narrow tablets due to the
           CSS transform scale. The stacked phone layout (≤576) avoids this. */
    }
}

/* ============================================================================
   PHONE (≤576px): STACK — banner full width on top, product list below full width
   ============================================================================ */
@media (max-width: 576px) {
    /*
      The JS has already run and set inline widths/heights/transform on the
      widget elements. We override with !important to produce a stacked layout:

      .containerrotator-fit  → height:auto (not the JS-computed shrunk height)
      .containerrotator      → width:100% (not the JS design-width px), no transform
      .l-rotator             → width:100%, height:auto, flex column
      .l-rotator .screen     → width:100%, height:auto (not the JS-computed screenH),
                               position:static (not absolute-left:0 from plugin JS)
      .l-rotator .thumbnails → width:100%, height:auto (not JS screenH),
                               position:static (not absolute-left:screenW)
      .l-rotator .thumbnails li → width:100%, height:auto (not JS itemH)
      .l-rotator .thumbnails .thumb → width:100%, height:auto (not JS itemH)

      The plugin's absolute positioning model (screen floated left, thumbnails
      absolute-right) is replaced with a simple column flex container.

      !important is used ONLY to beat JS inline styles — each use is noted.
    */

    /* Reset the outer fit wrapper height so it is not stuck at the scaled-down
       JS value (which would collapse the stacked layout). */
    .homepage .containerrotator-fit {
        height: auto !important;   /* !important: JS sets inline height */
        overflow: visible !important; /* !important: JS sets overflow:hidden — let children flow */
        max-width: 100%;
    }

    /* Reset the transform and width on the scale target.
       transform:none beats the JS inline transform:scale(f).
       width:100% beats the JS inline width in design pixels. */
    .homepage .containerrotator {
        width: 100% !important;          /* !important: JS sets inline width in px */
        transform: none !important;      /* !important: JS sets inline transform:scale(f) */
        transform-origin: unset !important;
        max-width: 100%;
        overflow: hidden;
    }

    /* The .l-rotator is the inner flex/absolute container. Switch it to a
       column flex so .screen (banner) stacks above .thumbnails (list). */
    .homepage .containerrotator .l-rotator {
        width: 100% !important;   /* !important: JS sets inline width in px */
        height: auto !important;  /* !important: JS sets inline height in px */
        display: flex !important;
        flex-direction: column !important;
        position: relative;
        overflow: hidden;
    }

    /* BANNER SECTION (.screen): full width, auto height, static flow.
       The plugin sets left:0 inline (already 0 for right-list config) and
       positions it as relative inside the l-rotator. Reset to static flow
       inside our new flex column. */
    .homepage .containerrotator .l-rotator .screen {
        position: static !important;   /* !important: plugin JS sets position via CSS (relative/absolute) */
        width: 100% !important;        /* !important: JS sets inline width in px */
        height: auto !important;       /* !important: JS sets inline height in px */
        left: auto !important;         /* !important: plugin may set inline left */
        min-height: 160px;             /* keep the banner visible even if image is slow */
        overflow: hidden;
        order: 1;                      /* banner first in the column */
    }

    /* Banner image: full width, reasonable height, cover crop */
    .homepage .containerrotator .l-rotator .screen .main-img,
    .homepage .containerrotator .l-rotator .screen a > img,
    .homepage .containerrotator .l-rotator .screen img {
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        object-position: center center !important;
        position: static !important;  /* !important: plugin sets position:absolute on .main-img */
        display: block !important;    /* !important: plugin's CSS hides non-current images */
    }

    /* The <a> wrapper the plugin injects around the banner (mainLink):
       make it a full-width block so the image fills it. */
    .homepage .containerrotator .l-rotator .screen > a {
        display: block !important;
        width: 100% !important;
        height: 180px !important;
        overflow: hidden;
    }

    /* PRODUCT LIST (.thumbnails): full width below the banner, auto height,
       static flow. Plugin sets inline left:NNNpx and height:NNpx — reset both. */
    .homepage .containerrotator .l-rotator .thumbnails {
        position: static !important;  /* !important: plugin sets position:absolute */
        width: 100% !important;       /* !important: JS sets inline width (itemW px) */
        height: auto !important;      /* !important: JS sets inline height in px */
        left: auto !important;        /* !important: JS sets inline left in px */
        overflow: visible !important; /* !important: JS sets overflow:hidden — let rows flow */
        order: 2;                     /* list second, below the banner */
        max-height: 280px;            /* show ~4-5 items max, scrollable via the plugin's mousemove */
        overflow-y: auto;
    }

    /* The list <ul> is absolutely positioned by the plugin.
       Reset so rows flow naturally in the scrollable container. */
    .homepage .containerrotator .l-rotator .thumbnails ul {
        position: static !important;  /* !important: plugin CSS sets position:absolute */
        height: auto !important;      /* !important: plugin CSS sets height:999999px */
        width: 100%;
    }

    /* LIST ROWS (.thumbnails li): full width, auto height (no fixed item height).
       Plugin JS sets inline width and height on each li. */
    .homepage .containerrotator .l-rotator .thumbnails li {
        width: 100% !important;      /* !important: JS sets inline width in px */
        height: auto !important;     /* !important: JS sets inline height in px */
        clear: none !important;      /* plugin CSS sets clear:both on li */
        float: none !important;      /* plugin CSS sets float:left on li */
        display: block !important;
        min-height: 44px;            /* minimum tap target height per WCAG */
        box-sizing: border-box;
    }

    /* The arrow element inside the first li: minimum tap-target size */
    .homepage .containerrotator .l-rotator #right-arrow,
    .homepage .containerrotator .l-rotator #left-arrow {
        min-width: 44px !important;
        min-height: 44px !important;
        /* These are positioned relative inside the li; keep that but ensure size */
        display: flex !important;
        align-items: center;
        justify-content: center;
        float: none !important;
        position: relative !important;
    }

    /* THUMB DIV (.thumb): full width, auto height.
       Plugin JS sets inline width and height (fixed-height flex column). */
    .homepage .containerrotator .l-rotator .thumbnails .thumb {
        width: 100% !important;      /* !important: JS sets inline width in px */
        height: auto !important;     /* !important: JS sets inline height in px */
        float: none !important;      /* plugin CSS sets float:left */
        display: flex !important;
        flex-direction: row;         /* image thumb left, text right if thumb present */
        align-items: center;
        padding: 8px 12px !important;
        min-height: 44px;
        box-sizing: border-box;
        line-height: 1.3;
        overflow: hidden;
    }

    /* Title inside the row: readable at phone size */
    .homepage .containerrotator .l-rotator .thumbnails .thumb h1.title,
    .homepage .containerrotator .l-rotator .thumbnails .thumb .title {
        font-size: 13px !important;  /* !important: beat the #main-content ID-scoped 12px rule */
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        flex-shrink: 0;
    }

    /* Description paragraph */
    .homepage .containerrotator .l-rotator .thumbnails .thumb p {
        font-size: 11px !important;  /* !important: beat the #main-content ID-scoped rule */
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }

    /* Thumbnail image chip: compact on phone */
    .homepage .containerrotator .l-rotator .thumb img {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain;
        flex-shrink: 0;
        margin-right: 8px !important;
    }

    /* HIDE slide caption overlay and scrim — already done in custom.css but
       reinforce for the stacked layout where the screen is in normal flow */
    .homepage .containerrotator .l-rotator .thumbnails li > div:not(.thumb) {
        display: none !important;
    }

    .homepage .containerrotator .l-rotator .inner-bg,
    .homepage .containerrotator .l-rotator .textbox {
        display: none !important;
    }

    /* Scrollbar knob: hide on phones (touch scroll replaces mousemove) */
    .homepage .containerrotator .l-rotator #scrollbar {
        display: none !important;
    }

    /* Play/pause cpanel: reposition relative to the stacked banner */
    .homepage .containerrotator .l-rotator .cpanel {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        z-index: 10;
    }

    /* The plugin's preloader spinner: stays absolute inside .screen (now static),
       so it renders relative to the banner. Cap it so it does not overflow. */
    .homepage .containerrotator .l-rotator #preloader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


/* 02 SelectProductViewer (homepage col3 tabbed grid) */

/*
  Wrapper:      div#select-product-viewer          (render controller emits inline style="width:814px"
                                                    — overridden below)
  Tab strip:    ul.nav > li.nav-one/nav-two/nav-three/nav-four.last > a
  Content pane: div.list-wrap > div#Categories / #Promotion / #Best-sales / #Offres-Speciales
  DataList:     table#My_DataList1  (border-collapse:collapse)
                  <tbody> -> <tr> x2 -> <td> x4 -> div.hp_container_block (width:231px, float:left)
                    a.hp_container_hdr  (category title)
                    a.hp_container_image (abs-positioned category image, width:125px)
                    a > span.btn-small / .btn-text-small / .btn-right-small  ("Plus d'Info" CTA)

  Fixed-width sources being neutralised:
    - inline style="width:814px"  on #select-product-viewer
    - #select-product-viewer .nav { width:1016px }          (styles.css)
    - #select-product-viewer .list-wrap { width:1015px }    (styles.css)
    - .hp_container_block { width:231px; float:left }       (styles.css)
    - .hp_container_image { width:125px; position:absolute } (styles.css)

  All selectors are scoped under .homepage (the homepage body class emitted by the template engine
  onto the page body or main-content wrapper).
  Header selectors are never touched.
*/

/* ============================================================
   BASE — neutralise the hard-wired widths so the block never
   clips inside its column at any viewport size
   ============================================================ */

/* Override the inline style="width:814px" emitted by the render controller
   and the fixed nav/list-wrap widths from styles.css. !important is required
   only here because the render controller emits an inline width attribute. */
.homepage #select-product-viewer {
    width: 100% !important;           /* override inline style="width:814px" */
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: visible;                /* the active tab overflows downward to merge with .list-wrap */
}

.homepage #select-product-viewer .list-wrap {
    width: 100% !important;           /* override styles.css fixed 1015px */
    max-width: 100% !important;
    box-sizing: border-box;
    display: block !important;        /* override inline-table in older backup sheets */
    overflow: hidden;
}

/* Tab strip: was fixed 1016px, now fluid */
.homepage #select-product-viewer .nav {
    width: 100% !important;           /* override styles.css fixed 1016px */
    max-width: 100% !important;
    overflow: visible;                /* selected tab must overflow downward */
}

/* ============================================================
   CATEGORY-TILE BLOCKS (.hp_container_block)
   The DataList renders 4 tiles per <tr> inside table#My_DataList1.
   On desktop (>=1200) the float-based layout is left as-is so the
   existing look is preserved; we only ensure tiles cap at their box.
   ============================================================ */

.homepage #select-product-viewer .hp_container_block {
    box-sizing: border-box;
}

/* Category image: absolute-positioned, ensure it stays inside its tile */
.homepage #select-product-viewer .hp_container_image {
    max-width: 40%;                   /* never wider than ~40% of the tile */
    box-sizing: border-box;
}

.homepage #select-product-viewer .hp_container_image img,
.homepage #select-product-viewer img:not(.manufacturer-icon) {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   SMALL DESKTOP  992px – 1200px
   4 tiles visible but the fixed 231px cells risk clipping on narrow
   columns; make the table fill its container and cells share width.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1200px) {

    .homepage #select-product-viewer #My_DataList1,
    .homepage #select-product-viewer #My_DataList1 > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .homepage #select-product-viewer #My_DataList1 > tbody > tr {
        display: flex !important;
        flex-wrap: nowrap !important; /* keep 4-up row at this size */
        width: 100% !important;
    }

    .homepage #select-product-viewer #My_DataList1 > tbody > tr > td {
        display: block !important;
        flex: 1 1 25% !important;     /* 4-up: each column takes 25% */
        min-width: 0 !important;      /* allow flex shrink below 231px */
        max-width: 25% !important;
        box-sizing: border-box !important;
        float: none !important;
        vertical-align: top;
        height: auto !important;
    }

    /* Tile block fills its flex cell */
    .homepage #select-product-viewer .hp_container_block {
        width: auto !important;       /* override styles.css fixed 231px */
        max-width: 100% !important;
        min-height: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }

    /* Tab: 4 tabs at 25% each */
    .homepage #select-product-viewer .nav li {
        width: 25% !important;
        box-sizing: border-box;
    }
}

/* ============================================================
   TABLET  577px – 991px
   3-up product cells; tabs scrollable if needed
   ============================================================ */
@media (min-width: 577px) and (max-width: 991px) {

    .homepage #select-product-viewer #My_DataList1,
    .homepage #select-product-viewer #My_DataList1 > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .homepage #select-product-viewer #My_DataList1 > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;   /* allow wrap so 4 tiles split 3+1 */
        width: 100% !important;
    }

    /* 3-up: each tile ~ 33.333% */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr > td {
        display: block !important;
        flex: 0 0 33.333% !important;
        width: 33.333% !important;
        max-width: 33.333% !important;
        box-sizing: border-box !important;
        float: none !important;
        vertical-align: top;
        height: auto !important;
    }

    .homepage #select-product-viewer .hp_container_block {
        width: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }

    .homepage #select-product-viewer .hp_container_hdr {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Tab strip: 2 tabs per row so 4 tabs fit in 2 rows at narrow tablet */
    .homepage #select-product-viewer .nav li {
        width: 50% !important;
        height: auto !important;
        min-height: 44px;             /* minimum tappable height */
        box-sizing: border-box;
    }

    .homepage #select-product-viewer .nav li a {
        min-height: 44px;
        line-height: 34px;            /* visually centred inside 44px tap target */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Tab strip: allow height to grow to two rows */
    .homepage #select-product-viewer .nav {
        height: auto !important;
    }
}

/* ============================================================
   PHONE  <= 576px
   2-up product cells (or 1-up if very narrow); tabs 2-per-row
   ============================================================ */
@media (max-width: 576px) {

    .homepage #select-product-viewer #My_DataList1,
    .homepage #select-product-viewer #My_DataList1 > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .homepage #select-product-viewer #My_DataList1 > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* 2-up on phones */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr > td {
        display: block !important;
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        box-sizing: border-box !important;
        float: none !important;
        vertical-align: top;
        height: auto !important;
    }

    .homepage #select-product-viewer .hp_container_block {
        width: auto !important;       /* override fixed 231px */
        max-width: 100% !important;
        min-height: 0 !important;
        float: none !important;
        box-sizing: border-box;
        padding: 10px 8px;            /* tighter padding on small screens */
    }

    .homepage #select-product-viewer .hp_container_hdr {
        width: auto !important;
        max-width: 100% !important;
        font-size: 1em;               /* slightly smaller on phone */
    }

    /* Category image: keep it but shrink */
    .homepage #select-product-viewer .hp_container_image {
        width: 36% !important;        /* override fixed 125px */
        max-width: 36% !important;
        height: auto !important;
    }

    /* Tab strip: 2 tabs per row, 44px tap targets */
    .homepage #select-product-viewer .nav {
        height: auto !important;
        overflow-x: auto;             /* fallback: if tabs still don't fit, scrollable */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .homepage #select-product-viewer .nav li {
        width: 50% !important;
        display: inline-block !important; /* cooperate with white-space:nowrap scroll fallback */
        height: auto !important;
        min-height: 44px;
        box-sizing: border-box;
    }

    .homepage #select-product-viewer .nav li a {
        min-height: 44px;
        line-height: 34px;
        padding: 5px 4px;
        font-size: 12px;              /* tighter label on small screen */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* CTA "Plus d'Info" button: keep it accessible on small tiles */
    .homepage #select-product-viewer .btn-small {
        display: none;                /* hide the left decorative sprite cap */
    }

    .homepage #select-product-viewer .btn-text-small {
        font-size: 11px;
    }

    .homepage #select-product-viewer .btn-right-small {
        display: none;                /* hide right cap sprite on tiny tiles */
    }
}


/* 03 ManufacturersSlider (homepage col4) */

/*
 * REAL SELECTORS (from ManufacturersSliderRenderController.cs)
 * ─────────────────────────────────────────────────────────────
 * .slideshow           — outer wrapper (styles.css: position:relative; display:inline-block; width:240px [FIXED])
 * .slideshow .rotator  — logo display area (styles.css: float:left; width:90px; height:40px [FIXED])
 * .slideshow .rotator a — each brand anchor, JS fades one in (display:none by default, position:absolute)
 * .slideshow .rotator a img — brand logo image (styles.css: width:92px; height:30px [FIXED])
 * .slideshow select    — #Manufactorer jump-to-brand dropdown (styles.css: width:140px [FIXED])
 * .sf-cb-mfgslider__clear — the <br> after the block (styles.css: clear:both)
 * .sf-cb-mfgslider__admin — admin edit link (styles.css: margin-right:690px)
 *
 * custom.css already provides (lines ~4155-4161):
 *   .homepage .sf-cb-manufacturersslider,
 *   .homepage .slideshow { max-width: 100%; overflow: hidden; }
 *
 * This file adds the responsive layer that was NOT yet in custom.css:
 *   — fluid .slideshow at all sub-1200 sizes (kills the 240px inline-block lock)
 *   — fluid .rotator / img / select on phones and tablets
 *   — sensible minimum heights; centered logo on phones
 *
 * ALL selectors are scoped under .homepage.
 * Header selectors (#header, #logo, #header-content, #top-menu, #header-menu,
 *   .mv-megamenu, .mv-mm-*, .mv-header-top, .mv-drill) are NEVER targeted.
 * !important is used only where the rule must override a known hard-coded value
 *   in styles.css (commented per each use).
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE — all widths below 1200px
   The block sits inside .hp_blk > .hp_blk_body which the homepage responsive
   rules (custom.css ~line 808) already set to width:auto; box-sizing:border-box.
   Convert .slideshow from a 240px inline-block to a full-width block so it fills
   the card body at any viewport width.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    /* Outer wrapper: fill the card body, stop being an inline-block.
       styles.css sets width:240px on .slideshow — override needed. */
    .homepage .slideshow {
        display: block !important;      /* !important: overrides inline-block from styles.css:9731 */
        width: 100% !important;         /* !important: overrides fixed 240px from styles.css:9733 */
        box-sizing: border-box;
        min-height: 40px;
    }

    /* Rotator (logo display zone): fill left side of the wrapper fluidly.
       styles.css sets width:90px — allow it to grow with the container. */
    .homepage .slideshow .rotator {
        width: auto;                    /* release the 90px lock */
        min-width: 60px;
        max-width: 120px;               /* cap so the select still has room */
        height: auto;                   /* release 40px lock */
        min-height: 36px;
        flex-shrink: 0;
    }

    /* Brand logo image: never clip; contain within the rotator zone.
       styles.css sets width:92px; height:30px on .slideshow .rotator a img. */
    .homepage .slideshow .rotator a img {
        max-width: 100% !important;     /* !important: overrides width:92px from styles.css:9769 */
        width: auto !important;
        height: auto !important;        /* !important: overrides height:30px from styles.css:9770 */
        max-height: 50px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* Dropdown: never exceed the available width of the wrapper.
       styles.css sets width:140px on .slideshow select — cap it. */
    .homepage .slideshow select {
        max-width: 100% !important;     /* !important: overrides width:140px from styles.css:9748 */
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLET  577px – 991px
   Two-up hp_blocks layout (from custom.css); each card is ~50% of viewport.
   The slider should fill its card and logos scale naturally from the base rules.
   Add a slightly larger logo area so logos are legible at medium sizes.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 577px) and (max-width: 991px) {
    .homepage .slideshow .rotator {
        max-width: 140px;
        min-height: 40px;
    }

    .homepage .slideshow .rotator a img {
        max-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHONE  ≤ 576px
   Single-column layout (custom.css ~line 3992); slider card fills the screen.
   Centre logos, stack the layout, make the select full-width.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    /* Rotator area: centre it above the text / select. */
    .homepage .slideshow .rotator {
        float: none !important;         /* !important: overrides float:left from styles.css:9737 */
        display: block;
        margin: 0 auto 8px;
        max-width: 100%;
        min-height: 44px;
    }

    /* Each brand anchor: centre the logo in the rotator. */
    .homepage .slideshow .rotator a {
        text-align: center;
        width: 100%;
    }

    /* Logo image: scale to fill, reasonable phone height. */
    .homepage .slideshow .rotator a img {
        max-height: 52px;
        max-width: 100% !important;
        margin: 0 auto;
    }

    /* The text node ("Avec plus de 100 fabricants") and subsequent elements
       sit inline after the float; with float cleared they stack naturally. */
    .homepage .slideshow {
        text-align: center;
    }

    /* Brand dropdown: full width, easy to tap. */
    .homepage .slideshow select {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px auto;
        min-height: 36px;               /* comfortable tap target */
        box-sizing: border-box;
    }

    /* "Voir tous les fabricants" link: block + centred for easy tapping. */
    .homepage .slideshow > a[href*='fabricants'] {
        display: block;
        text-align: center;
        padding: 6px 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SMALL DESKTOP  992px – 1200px
   Three-column hp_blocks; each card is ~33% of the page width.
   Logos should be readable but compact.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1200px) {
    .homepage .slideshow .rotator {
        max-width: 120px;
        min-height: 38px;
    }

    .homepage .slideshow .rotator a img {
        max-height: 40px;
    }

    /* Select: cap to avoid overflowing the 33%-wide card. */
    .homepage .slideshow select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}


/* 04 HtmlBlock/HtmlBlock2 (homepage col5 weekly_specials, col6) */

/*
  Scope: ALL selectors are under .homepage.
  Target wrappers found in source:
    HtmlBlock  -> .hp_blk > .hp_blk_body  (col5 also has .weekly_specials.hp_blk from home.html)
    HtmlBlock2 -> .sidemenu.sf-cb-htmlblock2__box > .content.sf-cb-htmlblock2__content
  Merchant HTML inside these divs is arbitrary (legacy tables, banner imgs, iframes, inline widths).
  Never touch: #header, #logo, #header-content, #top-menu, #header-menu, .mv-megamenu, .mv-mm-,
               .mv-header-top, .mv-drill.
*/

/* ------------------------------------------------------------------ */
/* 1. BOX-SIZING — make every block element inside the html blocks     */
/*    respect its own padding/border so widths never exceed parent.    */
/* ------------------------------------------------------------------ */
.homepage .hp_blk_body *,
.homepage .hp_blk_body *::before,
.homepage .hp_blk_body *::after,
.homepage .sf-cb-htmlblock2__content *,
.homepage .sf-cb-htmlblock2__content *::before,
.homepage .sf-cb-htmlblock2__content *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* 2. CONTAINER CONSTRAINTS                                            */
/* ------------------------------------------------------------------ */
.homepage .weekly_specials {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Stop either html-block content div from ever overflowing its column */
.homepage .hp_blk_body,
.homepage .sf-cb-htmlblock2__content {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* 3. MEDIA (img / video / iframe / embed / object)                   */
/*    Always cap width; conditionally allow height:auto on smaller    */
/*    screens so portrait images don't distort on desktop.            */
/* ------------------------------------------------------------------ */
.homepage .hp_blk_body img,
.homepage .hp_blk_body video,
.homepage .hp_blk_body iframe,
.homepage .hp_blk_body embed,
.homepage .hp_blk_body object,
.homepage .sf-cb-htmlblock2__content img,
.homepage .sf-cb-htmlblock2__content video,
.homepage .sf-cb-htmlblock2__content iframe,
.homepage .sf-cb-htmlblock2__content embed,
.homepage .sf-cb-htmlblock2__content object {
  max-width: 100% !important;
}

/* height:auto only up to 1200px — avoids distorting fixed-height     */
/* desktop banner images on large monitors.                            */
@media (max-width: 1200px) {
  .homepage .hp_blk_body img,
  .homepage .hp_blk_body video,
  .homepage .hp_blk_body iframe,
  .homepage .hp_blk_body embed,
  .homepage .hp_blk_body object,
  .homepage .sf-cb-htmlblock2__content img,
  .homepage .sf-cb-htmlblock2__content video,
  .homepage .sf-cb-htmlblock2__content iframe,
  .homepage .sf-cb-htmlblock2__content embed,
  .homepage .sf-cb-htmlblock2__content object {
    height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* 4. LEGACY FIXED-WIDTH TABLES                                        */
/*    Constrain to parent — then let phones scroll wide tables rather  */
/*    than reflowing complex multi-column table layouts that can break */
/*    data presentation (prices, spec grids).                          */
/* ------------------------------------------------------------------ */

/* Outer cap: the table itself must not exceed the column width */
.homepage .hp_blk_body table,
.homepage .sf-cb-htmlblock2__content table {
  max-width: 100% !important;
}

/* Tablet/small-desktop (577–1200): make sure cells can shrink */
@media (max-width: 1200px) {
  .homepage .hp_blk_body table,
  .homepage .sf-cb-htmlblock2__content table {
    table-layout: auto;
  }

  .homepage .hp_blk_body td,
  .homepage .hp_blk_body th,
  .homepage .sf-cb-htmlblock2__content td,
  .homepage .sf-cb-htmlblock2__content th {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Phone (<=576): wrap wide tables in a horizontally-scrollable       */
/*   container by switching tables to block with overflow.            */
/*   Safer than reflowing: merchant table layouts depend on column    */
/*   count, merging cells with rowspan/colspan — reflow often breaks  */
/*   them.  A scroll container keeps them intact and readable.        */
@media (max-width: 576px) {
  .homepage .hp_blk_body,
  .homepage .sf-cb-htmlblock2__content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .homepage .hp_blk_body table,
  .homepage .sf-cb-htmlblock2__content table {
    /* Allow table to show its natural width but clip at the scroll  */
    /* container — gives a horizontal scroll rather than clipping.   */
    min-width: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 5. INLINE-STYLED BLOCK CONTAINERS                                   */
/*    Divs/spans that carry a fixed width= attribute or style=width:  */
/*    We cannot address HTML attrs directly in CSS, but we CAN ensure */
/*    any direct child div/span that is display:block never grows     */
/*    beyond 100% by forcing max-width.                                */
/* ------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .homepage .hp_blk_body > div,
  .homepage .hp_blk_body > span,
  .homepage .hp_blk_body > p,
  .homepage .sf-cb-htmlblock2__content > div,
  .homepage .sf-cb-htmlblock2__content > span,
  .homepage .sf-cb-htmlblock2__content > p {
    max-width: 100% !important;
    /* Do not force display — merchant may intentionally use inline   */
    /* or inline-block (e.g. centered badges).                        */
  }
}

/* ------------------------------------------------------------------ */
/* 6. TYPOGRAPHY — phones: readable minimum sizes, no sub-12px text   */
/* ------------------------------------------------------------------ */
@media (max-width: 576px) {
  .homepage .hp_blk_body,
  .homepage .sf-cb-htmlblock2__content {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Clamp any element whose inline style or legacy rule sets         */
  /* a very small font-size (merchant sometimes writes style="font-  */
  /* size:10px" in banner captions).                                  */
  .homepage .hp_blk_body *,
  .homepage .sf-cb-htmlblock2__content * {
    min-height: 0; /* reset UA table-cell min-height surprises */
  }

  /* Headings: don't let h1/h2 remain oversized on a 360px screen   */
  .homepage .hp_blk_body h1,
  .homepage .hp_blk_body h2,
  .homepage .sf-cb-htmlblock2__content h1,
  .homepage .sf-cb-htmlblock2__content h2 {
    font-size: clamp(16px, 5vw, 28px);
    word-break: break-word;
  }

  .homepage .hp_blk_body h3,
  .homepage .hp_blk_body h4,
  .homepage .sf-cb-htmlblock2__content h3,
  .homepage .sf-cb-htmlblock2__content h4 {
    font-size: clamp(14px, 4vw, 22px);
    word-break: break-word;
  }
}

/* ------------------------------------------------------------------ */
/* 7. TAP TARGETS — phones: links and buttons at least 44px tall      */
/* ------------------------------------------------------------------ */
@media (max-width: 576px) {
  .homepage .hp_blk_body a,
  .homepage .sf-cb-htmlblock2__content a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .homepage .hp_blk_body button,
  .homepage .hp_blk_body input[type="button"],
  .homepage .hp_blk_body input[type="submit"],
  .homepage .sf-cb-htmlblock2__content button,
  .homepage .sf-cb-htmlblock2__content input[type="button"],
  .homepage .sf-cb-htmlblock2__content input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    touch-action: manipulation;
  }

  /* Images inside <a> — don't double-apply line-height / height to  */
  /* anchor-wrapped images (would stretch them).                      */
  .homepage .hp_blk_body a img,
  .homepage .sf-cb-htmlblock2__content a img {
    display: block;
    min-height: 0;
    line-height: normal;
  }
}

/* ------------------------------------------------------------------ */
/* 8. STACKING — phones: inner flex/inline-flex rows switch to column */
/* ------------------------------------------------------------------ */
@media (max-width: 576px) {
  .homepage .weekly_specials .hp_blk_body,
  .homepage .hp_blk_body {
    display: block;
    text-align: center;
  }

  /* Merchant sometimes floats left/right columns inside the block.   */
  /* Clear floats on phone so content stacks vertically.              */
  .homepage .hp_blk_body > *,
  .homepage .sf-cb-htmlblock2__content > * {
    float: none !important;
    clear: both;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------------ */
/* 9. TABLET 577–991 — ensure content fits, no overflow               */
/* ------------------------------------------------------------------ */
@media (min-width: 577px) and (max-width: 991px) {
  .homepage .hp_blk_body,
  .homepage .sf-cb-htmlblock2__content {
    max-width: 100%;
    overflow: hidden;
  }

  .homepage .hp_blk_body img,
  .homepage .sf-cb-htmlblock2__content img {
    max-width: 100% !important;
    height: auto;
  }

  /* Tables: allow horizontal scroll within the block rather than     */
  /* breaking out of the column.                                      */
  .homepage .hp_blk_body table,
  .homepage .sf-cb-htmlblock2__content table {
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------------ */
/* 10. SMALL DESKTOP 992–1200 — no element wider than its column      */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1200px) {
  .homepage .hp_blk_body,
  .homepage .sf-cb-htmlblock2__content {
    max-width: 100%;
    overflow: hidden;
  }

  .homepage .hp_blk_body img,
  .homepage .sf-cb-htmlblock2__content img {
    max-width: 100% !important;
    height: auto;
  }

  .homepage .hp_blk_body table,
  .homepage .sf-cb-htmlblock2__content table {
    max-width: 100% !important;
  }
}


/* 05 Product sliders (ProductSlider / Large / Shorty) */

/*
  Scope: ALL selectors are nested under .homepage so they affect only homepage columns.
  Hard rule: never target header selectors.
  Strategy:
    - ProductSlider (.mv-pslider / .sf-cb-pslider) — custom fade carousel; JS does
      nothing to track widths (one slide visible at a time), so responsive = cap the
      outer wrapper + make the image/text stack readably.
    - ProductSliderLarge (#featured_products / .list_carousel.responsive / #foo) —
      carouFredSel plugin sets item pixel widths via JS; we cap the outer wrapper and
      let cards shrink via min-width:0 + max-width:100%.
    - ProductSliderShorty (.mv-shorty) — flex track; JS uses CSS variable --mvs-n
      to size cards. We override --mvs-n at each breakpoint and add overflow caps.
    - SameProductCategory (#mycarousel / .jcarousel-skin-tango) — jCarousel plugin
      stacks items vertically on mobile (already done by styles.css:11206). We add
      outer cap + item image responsive fixes.
  !important usage: annotated per use. Used only to override inline JS widths or
  existing !important rules in styles.css.
*/

/* ============================================================
   1. PRODUCT SLIDER  (.mv-pslider / .sf-cb-pslider)
   Wrapper: .sidemenu > .sidemenu_body > .mv-pslider.sf-cb-pslider
   One slide visible at a time (fade), JS sets nothing on the track.
   ============================================================ */

/* Outer sidemenu + pslider: never overflow the column */
.homepage .sidemenu {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.homepage .mv-pslider.sf-cb-pslider {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* Per-block inline style may set a fixed pixel width on the #mv-pslider-<id>
       wrapper — we keep overflow:hidden here so any overage is clipped rather than
       causing page horizontal scroll */
}

/* Image inside the media box — must scale within whatever height the block sets */
.homepage .mv-pslider__media img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Prev/Next arrows — minimum 44px touch target on all breakpoints */
.homepage .mv-pslider__nav {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 26px;
}

/* --- Phone ≤576 --- */
@media (max-width: 576px) {
    /* Cap the sidemenu width so no inline width bleeds */
    .homepage .sidemenu {
        width: 100% !important; /* overrides possible inline width set by old RenderScript */
    }

    /* Inline <style>#mv-pslider-<id> .mv-pslider__media{height:Npx}</style> is
       per-block and can be large; allow it to shrink to a readable size on phones */
    .homepage .mv-pslider__media {
        height: auto !important; /* !important: overrides the per-block inline <style> that sets a fixed px height */
        min-height: 120px;
        max-height: 260px;
    }

    .homepage .mv-pslider__name {
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }

    .homepage .mv-pslider__price {
        font-size: 14px;
    }

    .homepage .mv-pslider__price .price,
    .homepage .mv-pslider__price .siteprice,
    .homepage .mv-pslider__price span {
        font-size: 14px !important; /* !important: matches specificity of the existing !important rule at styles.css:11133 */
    }
}

/* --- Tablet 577–991 --- */
@media (min-width: 577px) and (max-width: 991px) {
    .homepage .mv-pslider__media {
        height: auto !important; /* !important: same rationale as phone block above */
        max-height: 340px;
    }

    .homepage .mv-pslider__name {
        font-size: 13px;
    }
}

/* ============================================================
   2. PRODUCT SLIDER LARGE  (#featured_products / .list_carousel.responsive / #foo)
   Wrapper: #featured_products > .list_carousel.responsive > ul#foo
   JS (carouFredSel) sets item width + height as inline styles. We cannot override
   per-slide inline widths from CSS, so the approach is:
     - Cap the outer #featured_products wrapper (overflow:hidden so the track clips)
     - Give #foo items min-width:0 so they can shrink inside a flex/float context
     - Make images max-width:100% so they scale inside smaller cards
   ============================================================ */

.homepage #featured_products {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* clips the carouFredSel track if it's wider than the column */
    width: auto !important; /* !important: overrides the inline <style>#featured_products{width:Npx} emitted by RenderScript */
}

.homepage .list_carousel.responsive {
    max-width: 100%;
    overflow: hidden;
}

/* carouFredSel list */
.homepage #foo {
    /* The plugin sets inline transform/margin-left for scrolling — we don't fight it.
       We just make sure each li card can't break out of the clipped viewport. */
    max-width: none; /* let JS control width */
    box-sizing: border-box;
}

.homepage #foo > li {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0; /* allow shrinking when the viewport is smaller than the JS card width */
}

/* Product images inside carouFredSel cards — override the JS inline height/width
   with a responsive floor so images are never clipped or over-large */
.homepage #featured_products ul li .product_image {
    max-width: 100%;
    height: auto !important; /* !important: overrides inline height set by carouFredSel */
    box-sizing: border-box;
}

.homepage #featured_products ul li .product_image img {
    max-width: 100% !important; /* !important: overrides possible inline width from carouFredSel */
    height: auto !important;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Text inside cards: floor font sizes and allow wrapping */
.homepage #featured_products ul li h5,
.homepage #featured_products ul li h6 {
    font-size: 13px;
    min-height: 0;
    width: auto;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.homepage #featured_products ul li .product_descr {
    width: auto;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.homepage #featured_products ul li .price_container {
    width: auto;
    max-width: 100%;
}

/* Prev/Next arrows — minimum tappable */
.homepage #featured_products .prev,
.homepage #featured_products .next {
    min-width: 44px;
    min-height: 44px;
}

/* --- Phone ≤576 --- */
@media (max-width: 576px) {
    .homepage #featured_products {
        width: 100% !important; /* !important: same rationale as pslider cap */
        padding: 6px 0;
    }

    .homepage #featured_products ul li span.price {
        font-size: 18px;
        line-height: 1.3;
    }

    /* The carouFredSel prev/next arrows (#prev2/#next2) are positioned absolutely;
       ensure they're reachable */
    .homepage #prev2,
    .homepage #next2 {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   3. PRODUCT SLIDER SHORTY  (.mv-shorty)
   Wrapper: .mv-shorty > .mv-shorty-viewport > ul.mv-shorty-track > li.mv-shorty-card
   Card width driven by CSS custom property --mvs-n (set inline by the C# renderer)
   and a gap of 22px. The vanilla-JS slider reads card.getBoundingClientRect().width
   to step, so simply changing card width via CSS is enough — the JS recalculates on
   resize anyway (resize listener in RenderScript).
   ============================================================ */

/* Outer wrapper: full-width mode already sets 100vw inline; both modes need overflow cap */
.homepage .mv-shorty {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* FullWidth (.mv-shorty--full) emits 100vw inline — honour it but prevent x-scroll.
   EDGE-TO-EDGE (per user 2026-06-20): the base .mv-shorty has padding:14px 22px which
   left ~22-30px of white space on both sides of the 100%-width slider. Zero the
   horizontal padding so the cards/track reach the page edges; keep the vertical pad. */
.homepage .mv-shorty.mv-shorty--full {
    overflow-x: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Viewport (the clipping box) */
.homepage .mv-shorty-viewport {
    overflow: hidden;
}

/* Track — JS translates this; don't interfere with transform */
.homepage .mv-shorty-track {
    /* JS uses getBoundingClientRect so card width drives the step.
       Allow cards to shrink by clamping min-width. */
    min-width: 0;
}

/* Cards: clamp minimum card width so they're usable on small screens */
.homepage .mv-shorty-card {
    min-width: 140px; /* tighter than the default 220px so more cards fit small viewports */
    box-sizing: border-box;
}

/* Card image: always scale */
.homepage .mv-shorty-img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

/* Prev/Next arrows — 44px touch target */
.homepage .mv-shorty-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

/* Product name text: floor at 13px, allow wrapping (the 2-line clamp is already set
   in styles.css:11135; we just prevent sub-12px on phones) */
.homepage .mv-shorty-name {
    font-size: 13px;
    word-break: break-word;
}

.homepage .mv-shorty-sku {
    font-size: 11px;
}

/* --- Phone ≤576: show ~1-2 cards --- */
@media (max-width: 576px) {
    .homepage .mv-shorty {
        padding: 10px 10px !important; /* !important: the FullWidth inline style may set 14px 22px */
    }

    .homepage .mv-shorty-card {
        /* Override --mvs-n to 2 on phones so each card is ~(100%-gap)/2.
           The JS recalcs step from getBoundingClientRect after resize so it follows. */
        flex: 0 0 calc((100% - 22px) / 2) !important; /* !important: overrides the inline --mvs-n calc */
        min-width: 130px;
    }

    .homepage .mv-shorty-media {
        width: 92%;
        aspect-ratio: 4/3;
    }

    .homepage .mv-shorty-title {
        font-size: 14px !important;
    }

    .homepage .mv-shorty-name {
        font-size: 13px;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .homepage .mv-shorty-price {
        font-size: 14px;
    }

    .homepage .mv-shorty-price .siteprice,
    .homepage .mv-shorty-price .price,
    .homepage .mv-shorty-price span {
        font-size: 14px !important; /* !important: matches specificity of existing rule in styles.css:11135 */
    }

    /* Action button: full width at phone size */
    .homepage .mv-shorty-actions .mv-btn {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* --- Tablet 577–991: show ~2-3 cards --- */
@media (min-width: 577px) and (max-width: 991px) {
    .homepage .mv-shorty-card {
        /* ~3 cards on tablet */
        flex: 0 0 calc((100% - 2 * 22px) / 3) !important; /* !important: same rationale as phone block */
        min-width: 150px;
    }

    .homepage .mv-shorty-name {
        font-size: 13px;
    }
}

/* --- Small desktop 992–1200: ~3-4 cards; the default --mvs-n usually gives 5 ---  */
@media (min-width: 992px) and (max-width: 1200px) {
    .homepage .mv-shorty-card {
        flex: 0 0 calc((100% - 3 * 22px) / 4) !important; /* !important: same rationale */
        min-width: 160px;
    }
}

/* ============================================================
   4. SAME PRODUCT CATEGORY  (#mycarousel / .jcarousel-skin-tango)
   Wrapper: ul#mycarousel.jcarousel-skin-tango > li (rendered by jCarousel plugin)
   styles.css:11206 already stacks items vertically on mobile (display:block, float:none,
   clear:both, width:100%). We add outer cap + image responsive fixes.
   This slider appears on product pages via SameProductCategoryRenderController but
   it can also appear in homepage columns, so scoping under .homepage is correct.
   ============================================================ */

.homepage #mycarousel {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* jCarousel wraps the <ul> in a .jcarousel-clip; cap it too */
.homepage .jcarousel-skin-tango .jcarousel-clip {
    max-width: 100%;
    overflow: hidden;
}

.homepage .jcarousel-skin-tango .jcarousel-item {
    box-sizing: border-box;
    max-width: 100%;
}

/* Product images in the jCarousel items */
.homepage #mycarousel li img,
.homepage #mycarousel li a img {
    max-width: 100% !important; /* !important: the C# renderer sets style='border-width:0px' inline */
    height: auto !important;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Product links and names */
.homepage #mycarousel li p a,
.homepage #mycarousel li a#lnkItemName {
    font-size: 13px;
    word-break: break-word;
    white-space: normal;
}

/* --- Phone ≤576 --- */
@media (max-width: 576px) {
    /* styles.css:11206 already forces display:block / float:none / width:100% !important
       on .jcarousel-list-vertical items; we complement with image safety here */
    .homepage #mycarousel li {
        height: auto !important; /* !important: C# inline style sets height:270px */
        padding: 8px 4px;
    }

    .homepage #mycarousel li img,
    .homepage #mycarousel li a img {
        max-height: 200px;
    }

    .homepage #mycarousel li p a,
    .homepage #mycarousel li a#lnkItemName {
        font-size: 13px;
    }
}


/* 06 AffaSlider + ImageListRotator + RevolutionSlider placeholder */

/*
  SELECTORS FOUND (real emitted markup)
  ─────────────────────────────────────────────────────────────────────────────

  AffaSlider (AffaSliderRenderController.cs):
    Outer:          div.section.slider-section.mv-affa[#affa_XXXXXXXX]
                    (+ class mv-affa-full when FullWidth=1)
    Swiper shell:   div.slider-active > div.swiper-container > div.swiper-wrapper
    Slide:          div.single-slider.swiper-slide.animation-style-01/02/03
                      (inline style="background-color:#xxxxx")
    Decorative:     div.slider-shape  (inline style="background-color:#xxxxx")
    Layout cols:    div.container > [div.slider-content + div.slider-images]
    Text col:       div.slider-content (optional align-self/padding-top/bottom inline)
                      img.mv-affa-logo, h1.title, p, div.mv-affa-stock,
                      a.btn.btn-primary.btn-hover-dark.btn-margin
                      a.btn.mv-affa-addcart, a.btn.mv-affa-quickview
    Image col:      div.slider-images > img
    Dots:           div.swiper-pagination
    Per-block CSS:  <style>#affa_XXXXXXXX .slider-section,... { height:Npx !important }</style>
                    (desktop >=992 only, when MaxHeight set)

  What mv-affa-extra.css ALREADY handles (DO NOT duplicate):
    ─ Full responsive layout: >=992 two-column flex; <=991 clean vertical stack
    ─ .mv-affa .single-slider height/min-height clamp at >=992; height:auto at <=991
    ─ .mv-affa .slider-images position/flex/max-width at both breakpoints
    ─ .mv-affa .slider-images img max-width:100% !important; object-fit:contain !important
    ─ .mv-affa .slider-images img max-height clamp at >=992; max-height:360px at <=991
    ─ .mv-affa .container fluid gutter + max-width:1920px
    ─ .mv-affa .slider-content flex/text-align at both breakpoints
    ─ .mv-affa .slider-shape hidden at <=991
    ─ .mv-affa .slider-active .swiper-pagination centred row at <=991
    ─ FluidFontDecls() clamp() on all text/button inline sizes
    ─ Button hover lift/shadow/brightness

  What this file adds (additive .homepage-scoped caps only):
    AffaSlider:
      • Outer wrapper safety: max-width:100%; overflow:hidden — guards against
        any fixed-width container ancestor making the slider overflow
      • Swiper pagination dots: min 44px tappable hit area on <=991
        (the dots are 8–10px bullets; the wrapper needs padding to expand the tap zone)
      • Inline-block dots: flexbox centering reinforcement at <=991
        (mv-affa-extra already sets position:relative + flex-direction:row, but only
         at <=991. Reinforce with min-height so the dot strip is always tappable.)

  ImageListRotator (ImageListRotatorRenderController.cs):
    Outer:          div#imglistrot_{bvin}
    Per-block CSS:  <style>#imglistrot_{bvin} .containerrotator1,…{width:Npx !important}</style>
                    (when SurfaceWidth/Height set — already adds max-width:100% !important)
    Strip:          div.sf-cb-imglistrot__strip (or .sidemenu.sf-cb-imglistrot__strip#leftMenu)
                      Optional box chrome: div.header > div.header_title + .corner-tl + .corner-tr
                      div (or div.sidemenu_body)
    Rotator:        div.containerrotator1#containerrotator1 > div.l-rotator > div.screen
                      <noscript> fallback image
                    div.thumbnails > ul > li > a (×2 — image, link) + div.sf-cb-imglistrot__caption
                        h7, description HTML
    Plugin CSS:     /Scripts/ListRotator/css/list-rotator.css
    JS inline:      .containerrotator1 width set inline by plugin; .l-rotator width/height inline;
                    .screen width/height/left inline; .thumbnails left/height inline;
                    .thumbnails li width/height inline; .thumb width/height inline
    Note: the HOMEPAGE ListRotator uses .containerrotator wrapper (from RC perf fix, 01 file).
          THIS render controller uses .containerrotator1 (no transform/scale logic).
          surface sizing (SurfaceWidth/SurfaceHeight) already emits max-width:100%!important
          inline per block, so the main remaining risk is unset-surface blocks.

  RevolutionSlider:
    Emits: <div style="background:#ffcccc;">Missing Block: RevolutionSlider</div>
    (NullRenderer.cs:12 — no registered render controller)
    Selector: div[style*="background:#ffcccc"] (inline style, no class)
    NOTE for maintainer: the RevolutionSlider DB row is an orphan — no render
    controller exists. The correct fix is to delete the bvc_ContentBlock row from
    the DB. This file only prevents the pink placeholder from overflowing.

  ─────────────────────────────────────────────────────────────────────────────
*/

/* ============================================================================
   SECTION 1 — AffaSlider: homepage-scoped safety caps
   mv-affa-extra.css owns the full responsive layout. These are additive only.
   ============================================================================ */

/* Outer wrapper: never overflow the homepage column regardless of block settings */
.homepage .mv-affa {
    max-width: 100%;
    overflow: hidden; /* belt-and-suspenders — .slider-section already has overflow:hidden in style.min.css */
    box-sizing: border-box;
}

/* Swiper container: ensure no horizontal overflow from Swiper internals */
.homepage .mv-affa .swiper-container {
    max-width: 100%;
    overflow: hidden; /* swiper.css already sets this but belt-and-suspenders */
}

/* Image safety: belt-and-suspenders for any slide image not covered by mv-affa-extra.css
   (mv-affa-extra.css already sets max-width:100%!important + object-fit:contain!important
    on .mv-affa .slider-images img — this rule carries NO !important to avoid fighting it) */
.homepage .mv-affa .slider-images img {
    max-width: 100%;
    height: auto;
}

/* ---- Tablet/phone (<=991): pagination dot tap targets ----
   mv-affa-extra.css sets .swiper-pagination to position:relative; flex-direction:row;
   justify-content:center; gap:14px on <=991. The dots themselves are 8px bullets
   from swiper.css (.swiper-pagination-bullet { width:8px; height:8px }).
   Expand the STRIP's min-height so the touch target is at least 44px tall.
   The strip is already in normal flow (position:relative), so min-height
   simply grows the reserved box — no layout disruption. */
@media only screen and (max-width: 991px) {
    .homepage .mv-affa .slider-active .swiper-pagination {
        min-height: 44px; /* >=44px tappable strip height */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; /* centre dots vertically within the tall strip */
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; /* re-assert: mv-affa-extra.css already sets this */
    }

    /* Individual dot: expand the visual dot's hit zone without changing its rendered circle.
       Using padding instead of min-width/height because Swiper positions them inline. */
    .homepage .mv-affa .slider-active .swiper-pagination-bullet {
        padding: 10px; /* 8px bullet + 10px padding each side = 28px hit zone per side */
        background-clip: content-box; /* keep the 8px visual circle, expand the clickable area */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}


/* ============================================================================
   SECTION 2 — ImageListRotator: responsive safety
   The plugin (jquery.list-rotator.js) sets inline widths/heights via JS.
   list-rotator.css already adds max-width:100% + overflow:hidden to .l-rotator
   and aspect-ratio:640/280 to .containerrotator .screen. The RC's surface-sizing
   <style> block already adds max-width:100%!important on the named wrapper elements.
   Remaining risk: blocks WITHOUT surface sizing, where the plugin's JS inline
   width can exceed the column at narrow viewports.
   ============================================================================ */

/* NOTE (2026-06-25): these clamps were previously scoped to `.homepage [id^="imglistrot_"]`
   AND gated behind `@media (max-width:1200px)`. That left ImageListRotator blocks broken on
   any page WITHOUT a `.homepage` ancestor (product / category / custom pages — only home.html
   wraps content in `.homepage`): with no Surface sizing the plugin bakes an inline
   width:NNNpx (legacy Positions width, or a 600px fallback) onto .containerrotator1/.l-rotator/
   .screen, which overflowed the narrow host column and revealed the adjacent slide as a
   "duplicate on the right". The host column can be narrow at ANY viewport width (e.g. a
   product-page side rail at a 1400px viewport), so the breakpoint gate was also wrong.
   De-scoped to all pages + all widths. On the homepage the column is already wide, so
   `max-width:100%` is a visual no-op there — behavior on home is unchanged. */

/* Outer unique wrapper: always clip */
[id^="imglistrot_"] {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Strip div: never wider than the wrapper */
.sf-cb-imglistrot__strip {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Cap the rotator core so it can never exceed its column.
   The .containerrotator1 + .l-rotator + .screen receive inline widths from the plugin.
   max-width:100% CANNOT override an inline style — we need !important here.
   Comment: !important used to override JS inline style="width:NNNpx" on the plugin
   elements; without it the inline style wins over any authored stylesheet rule. */
[id^="imglistrot_"] .containerrotator1 {
    max-width: 100% !important; /* !important: overrides inline style="width:NNNpx" set by JS */
    box-sizing: border-box !important;
}

[id^="imglistrot_"] .l-rotator {
    max-width: 100% !important; /* !important: overrides inline style="width:NNNpx" set by JS */
    overflow: hidden !important; /* already set by list-rotator.css but reinforce */
    box-sizing: border-box !important;
}

/* The .screen carries inline width from JS; cap it so the banner never spills */
[id^="imglistrot_"] .l-rotator .screen {
    max-width: 100% !important; /* !important: overrides inline style="width:NNNpx" set by JS */
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Banner images inside .screen: always scale to their box */
[id^="imglistrot_"] .l-rotator .screen img,
[id^="imglistrot_"] .l-rotator .main-img {
    max-width: 100% !important; /* !important: list-rotator.css sets width:100%!important but belt-and-suspenders */
    height: auto;
}

/* Banner FIT: list-rotator.css forces the shared `.main-img` to `object-fit:cover`
   (intended for the homepage ListRotator's 640x280 banners — a slight top/bottom crop is OK
   there). But ImageListRotator promos are PORTRAIT (e.g. 200x300); cover crops away their
   title + price. Override to `contain` so the WHOLE banner shows with its aspect ratio kept
   (no crop, no stretch — letterboxed if the source aspect doesn't match the box). The wipe
   tiles (jquery.list-rotator.js setVertPieces/setHorzPieces/setBlocks) use the same contain
   fit, so they line up with this image and the never-cleared tiles are invisible at rest.
   This selector (`[id^=imglistrot_] .l-rotator .main-img`, specificity 0,3,0) out-specifies
   list-rotator.css's `.l-rotator .main-img` (0,2,0), so it wins despite load order. */
[id^="imglistrot_"] .l-rotator .main-img {
    object-fit: contain !important;
}

/* Noscript fallback image */
[id^="imglistrot_"] noscript img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* NOTE (2026-06-26): the "duplicate banner on the right" with the tiled wipe is fixed in
   jquery.list-rotator.js — setVertPieces/setHorzPieces/setBlocks now stretch each tile's
   background to the screen area (background-size:areaWidth x areaHeight) instead of natural
   size + autoCenter, so the tiles line up with the object-fit:fill main image below and the
   (never-cleared) tiles are invisible at rest. The `object-fit:fill` on .main-img just above
   is the matching half of that fix. (Earlier abandoned attempts: hiding the tiles with
   display:none -> blank gap / "no animation"; switching transition to 'fade' -> no wipe.) */

/* ---- <=991px (tablet/phone): product list arrows tappable ---- */
@media (max-width: 991px) {
    /* The plugin's up/down scroll arrows in the thumbnail list panel:
       they are 60px wide × 24px tall per list-rotator.css — below 44px tall.
       Expand min-height to 44px for WCAG touch target. */
    [id^="imglistrot_"] .l-rotator #up-btn,
    [id^="imglistrot_"] .l-rotator #down-btn {
        min-height: 44px !important; /* !important: overrides inline height from JS */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* Left/right nav arrows in the list column: expand hit area */
    [id^="imglistrot_"] .l-rotator #left-arrow,
    [id^="imglistrot_"] .l-rotator #right-arrow {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ============================================================================
   SECTION 3 — RevolutionSlider "Missing Block" placeholder
   NullRenderer emits: <div style="background:#ffcccc;">Missing Block: RevolutionSlider</div>
   There is no class or id — the selector must match on the inline style attribute.
   This rule only prevents horizontal overflow; fixing it properly requires deleting
   the orphan bvc_ContentBlock row from the DB (or registering a render controller).
   ============================================================================ */

/*
  NOTE TO MAINTAINER: the RevolutionSlider content block in the DB has no registered
  render controller. It renders the pink "Missing Block" placeholder on the homepage.
  RECOMMENDED FIX: run the following SQL to find and delete the orphan row:
    SELECT * FROM bvc_ContentBlock WHERE ControlName = 'RevolutionSlider';
    -- Review the row, then:
    DELETE FROM bvc_ContentBlock WHERE ControlName = 'RevolutionSlider';
  Until then, the rule below prevents it from overflowing its column.
*/

/* Target the inline-style element the NullRenderer emits. The attribute-selector
   matches any element whose style attribute contains this exact background declaration.
   Specificity is (0,0,0,1)+attribute = (0,1,0,1) — higher than a plain div but not
   overriding any authored class rule. This is the only selector available since
   NullRenderer emits no class or id on the element. */
.homepage div[style*="background:#ffcccc"] {
    max-width: 100% !important; /* !important: the background is inline, but the width is not constrained */
    overflow: hidden;
    box-sizing: border-box;
    word-break: break-word; /* keep the "Missing Block: RevolutionSlider" text from overflowing */
}


/* 10 Homepage nav/category blocks + reduced motion */

/*
  Scope: ALL selectors in this file are scoped under .homepage
  (the homepage template body class / wrapper).

  Blocks covered:
    SideMenuRenderController     → .sidemenu (legacy path)
                                 → .mv-sidemenu-bare (HideBox=true flexible path)
                                 → .box / .box-heading / .box-content / .box-product (Style=New)
    TreeCategoryMenuRenderController  → #menuCategoryLeft.sidemenu > .sidemenu_body > ul#treeCategory
    TreeCategoryMenuNewRenderController → .box.box-content.box-category > ul#custom_accordion
    TreeCategoryFilterRenderController → #menuCategoryLeft.sidemenu > .sidemenu_body.treecategoryformanufacturer

  Fixed min-width neutralised in this file:
    None on these homepage content blocks directly.
    (The reported min-width:150px is on .mv-searchbar .dropdowncategory dt a — that is
     a HEADER search selector and is excluded by the HARD RULES; it was already addressed
     in the round-3 responsive pass via SiteThemeCss.cs.)

  What this file DOES fix on ≤991:
    - .sidemenu / #menuCategoryLeft: box-sizing, max-width guard, no horizontal overflow
    - .sidemenu_body (tree container): overflow guard, wrap long category names
    - #treeCategory items: min-height tap targets ≥44px, text can wrap or ellipsis
    - .box / .box-category (TreeCategoryMenuNew): full-width, no fixed size constraints
    - Reduced-motion layer (all widths)
*/

/* =========================================================================
   §1 — BREAKPOINT ≤576 (phones)
   ========================================================================= */

@media screen and (max-width: 576px) {

    /* --- SideMenu: legacy .sidemenu box -----------------------------------
       The .sidemenu box is normally inside a side column (e.g. homepagecolumn1).
       On narrow phones the shell agent stacks those columns full-width (07-shell).
       We ensure the menu box itself never overflows its (now full-width) column. */
    .homepage .sidemenu {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;     /* catch any child that tries to overflow */
    }

    /* Menu Rapide link list — body > ul > li > a tap targets */
    .homepage .sidemenu .body > ul > li > a,
    .homepage .sidemenu .content > ul > li > a {
        min-height: 44px;
        display: flex;
        align-items: center;
        white-space: normal;    /* let long category names wrap */
        word-break: break-word;
    }

    /* General body links inside sidemenu (non-direct-child) */
    .homepage .sidemenu .body a {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* --- SideMenu: HideBox=true bare wrapper (.mv-sidemenu-bare) ---------- */
    .homepage .mv-sidemenu-bare {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .mv-sidemenu-bare ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .homepage .mv-sidemenu-bare li {
        margin: 0;
        padding: 0;
    }

    .homepage .mv-sidemenu-bare a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* --- SideMenu: Style=New — .box / .box-product / .box-category -------- */
    .homepage .box {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .box-content,
    .homepage .box-product,
    .homepage .box-category {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .box-content ul,
    .homepage .box-product ul,
    .homepage .box-category ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .homepage .box-content ul li a,
    .homepage .box-product ul li a,
    .homepage .box-category ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* --- TreeCategoryMenu: .sidemenu_body container -----------------------
       .sidemenu_body is the direct wrapper around the tree UL inside
       #menuCategoryLeft (.sidemenu) for both TreeCategoryMenu and
       TreeCategoryFilter blocks. */
    .homepage .sidemenu_body {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* #treeCategory is the root <ul> emitted by TreeCategoryMenu +
       TreeCategoryFilter inside .sidemenu_body */
    .homepage #treeCategory {
        /* styles.css sets margin-left:10px !important — keep that,
           but guard against overflow */
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Each .categoryTitle wraps one <span> that carries the anchor.
       styles.css sets height:22px — override to auto + min-height for tap target */
    .homepage #treeCategory .categoryTitle {
        height: auto !important;    /* neutralise styles.css fixed 22px height */
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* All anchors in the tree — tap targets */
    .homepage #treeCategory a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Children sub-lists: allow them to appear and not overflow */
    .homepage #treeCategory .children {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* #custom_accordion (TreeCategoryMenuNew) */
    .homepage #custom_accordion {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .homepage #custom_accordion li {
        box-sizing: border-box;
        max-width: 100%;
    }

    .homepage #custom_accordion a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* .treecategoryformanufacturer (TreeCategoryFilter) */
    .homepage .treecategoryformanufacturer {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* #menuCategoryLeft — the .sidemenu box for tree category blocks */
    .homepage #menuCategoryLeft {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

} /* end ≤576 */


/* =========================================================================
   §2 — BREAKPOINT 577–991 (tablets / narrow desktop)
   ========================================================================= */

@media screen and (min-width: 577px) and (max-width: 991px) {

    /* --- SideMenu box ----------------------------------------------------- */
    .homepage .sidemenu {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Tap targets ≥44px on the direct-child link list */
    .homepage .sidemenu .body > ul > li > a,
    .homepage .sidemenu .content > ul > li > a {
        min-height: 44px;
        display: flex;
        align-items: center;
        white-space: normal;
        word-break: break-word;
    }

    .homepage .sidemenu .body a {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* --- HideBox bare wrapper --------------------------------------------- */
    .homepage .mv-sidemenu-bare {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .mv-sidemenu-bare a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* --- Style=New box ---------------------------------------------------- */
    .homepage .box {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .box-content,
    .homepage .box-product,
    .homepage .box-category {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .box-content ul li a,
    .homepage .box-product ul li a,
    .homepage .box-category ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* --- TreeCategoryMenu / TreeCategoryFilter ----------------------------- */
    .homepage #menuCategoryLeft {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .sidemenu_body {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage #treeCategory {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage #treeCategory .categoryTitle {
        height: auto !important;    /* neutralise styles.css fixed 22px */
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .homepage #treeCategory a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .homepage #treeCategory .children {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* --- TreeCategoryMenuNew (#custom_accordion) -------------------------- */
    .homepage #custom_accordion {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .homepage #custom_accordion a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* .treecategoryformanufacturer */
    .homepage .treecategoryformanufacturer {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

} /* end 577–991 */


/* =========================================================================
   §3 — BREAKPOINT 992–1200 (medium desktop — light guard only)
   Mostly fine on desktop; just guard boxes from overflow when the page
   has an unusually narrow column layout.
   ========================================================================= */

@media screen and (min-width: 992px) and (max-width: 1200px) {

    .homepage .sidemenu,
    .homepage #menuCategoryLeft {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .homepage .sidemenu_body,
    .homepage #treeCategory,
    .homepage #treeCategory .children,
    .homepage #custom_accordion,
    .homepage .treecategoryformanufacturer {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

} /* end 992–1200 */


/* =========================================================================
   §4 — REDUCED MOTION (all viewport widths)
   Applies to everything inside .homepage regardless of breakpoint.
   !important is correct here: this is an accessibility override that must
   beat any animation/transition declared anywhere in the cascade.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .homepage * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* 08 Cross-cutting overflow + media safety net
   ============================================================
   Scope: ONLY .homepage — never bleeds onto category, product,
   search, or any other page that shares class names.

   Purpose: low-specificity CAPS that prevent horizontal scroll
   no matter which content block renders. This is a safety net,
   not a layout system — it sets ceilings (max-width, overflow
   caps), never floors (no min-width, no display changes, no
   positioning). Layout is owned by the per-block agents
   (01-listrotator.css, 02-selectproductviewer.css, etc.).

   Header selectors are INTENTIONALLY ABSENT. The following are
   never targeted here:
     #header, #logo, #header-content, #top-menu, #header-menu,
     .mv-megamenu, .mv-mm-*, .mv-header-top, .mv-drill*

   Load order: this file supplements custom.css (which already
   carries a HOMEPAGE RESPONSIVE PASS at ~line 3902). Rules here
   are additive: they cover gaps (embed/object, overflow-x on the
   wrapper itself, !important on media to beat inline attrs,
   overflow-wrap on text containers, stray-table cap, blanket
   box-sizing).

   !important usage: only on max-width of replaced content
   (img/video/iframe/embed/object) to beat inline width=/height=
   HTML attributes that bypass the cascade. All other rules carry
   no !important — they are intentionally low-specificity so
   per-block agents can override them.
   ============================================================ */


/* ------------------------------------------------------------
   1. Wrapper overflow cap
      overflow-x:clip (not hidden) so:
        - sticky children (e.g. a sticky promo bar inside a
          block) are NOT clipped by a scroll container.
        - CSS Zoom / transform-based lightboxes that overflow
          their container are also unaffected (clip does not
          create a scroll container, hidden does).
      Falls back gracefully: browsers that don't support clip
      treat it as auto and the html/body overflow-x:hidden
      (custom.css:194) provides the real backstop.
      max-width:100% prevents the wrapper itself from being
      wider than the viewport (e.g. if a parent sets a width
      in px that is wider than the screen).
      overflow-wrap:anywhere on the wrapper propagates into all
      text descendants so long URLs and Arabic/French compound
      words break before causing horizontal scroll. Scoped here
      because applying it globally risks reflowing intentionally
      nowrap UI elements on other pages.
   ------------------------------------------------------------ */
.homepage {
    max-width: 100%;
    overflow-x: clip;       /* clip = no scroll container; hidden fallback via html,body */
    overflow-wrap: anywhere; /* break long words/urls in text; does not affect flex/grid */
}


/* ------------------------------------------------------------
   2. Replaced content: media elements
      max-width:100% with !important to beat inline width= / height=
      HTML attributes (e.g. <img width="980"> or <iframe width="600">)
      which sit at author-level but ABOVE the cascade.
      Covers img, video, iframe, embed, object — the full set of
      replaced content that content blocks may inject.
      NOT scoped to a media query: this is always-on. A desktop
      slider image that needs a fixed width should be CSS-controlled
      on its own container, not via an inline attr.
   ------------------------------------------------------------ */
.homepage img,
.homepage video,
.homepage iframe,
.homepage embed,
.homepage object {
    max-width: 100% !important; /* beats inline width=/height= attrs on replaced elements */
}

/* height:auto only below 1200px so desktop slider images with an
   explicit height attr (e.g. the AffaSlider's fixed-height slides)
   are never accidentally squashed on wide screens. Above 1200px the
   slider's own CSS (mv-affa-extra.css) controls the height. */
@media (max-width: 1200px) {
    .homepage img {
        height: auto; /* no !important: slider-specific rules may legitimately override */
    }
}


/* ------------------------------------------------------------
   3. Blanket box-sizing
      Applying box-sizing:border-box to every element under
      .homepage is the safest, most battle-tested way to prevent
      "padding overflow": an element sized at width:100% whose
      left+right padding adds phantom extra width.
      Note: custom.css already sets box-sizing on the named
      layout containers (#hp_blocks, .hp_blk, #homepagecolumn2,
      etc.). This rule catches any future content block that
      introduces a new container not yet in that list — it is
      the generic backstop.
      No !important: per-block agents (e.g. a slider that
      explicitly needs content-box for its JS measurements) can
      still override via a more-specific rule.
   ------------------------------------------------------------ */
.homepage * {
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   4. Stray table cap
      content blocks (HtmlBlock, SelectProductViewer) may render
      a <table> without a width constraint. We add max-width:100%
      as a non-destructive ceiling — the table layout algorithm
      (auto / fixed) and the theme's own .cartproductgrid rules
      are completely unaffected. We deliberately avoid:
        - table-layout changes (would break aligned columns)
        - display:block (would break colspan/rowspan)
        - width:100% (could force narrow tables to stretch)
      Only a soft max is safe here.
      Agents that own specific tables (SelectProductViewer,
      HtmlBlock) may override with a higher-specificity rule.
   ------------------------------------------------------------ */
.homepage table {
    max-width: 100%; /* cap only; no layout-mode change */
}


/* ------------------------------------------------------------
   END 08 Cross-cutting overflow + media safety net
   ============================================================ */


/* 09 Typography + touch targets (homepage) */

/*
 * Scope: ALL rules scoped under .homepage (the wrapper div in home.html that
 *        contains homepagecolumn1/2/3, #hp_blocks and all content-block output).
 *
 * Header selectors excluded:
 *   #header, #logo, #header-content, #top-menu, #header-menu,
 *   .mv-megamenu, .mv-mm-*, .mv-header-top, .mv-drill
 *
 * Confirmed real selectors (grepped from styles.css + custom.css before writing):
 *
 *   TYPOGRAPHY
 *   - Blanket 12px rule (styles.css:11143):
 *       :where(#main-content) :is(p,div,span,td,th,li,a,label,input,select,textarea)
 *       { font-size:12px !important; }
 *     The homepage content sits inside #main-content > .homepage.
 *     Beaten below by adding #main-content to every selector that needs to
 *     override it.
 *
 *   - ListRotator thumbnail <p> description (custom.css:948-952):
 *       .containerrotator .l-rotator .thumbnails .thumb p  { font-size:10px !important }
 *     Beaten in custom.css:973-976 with the ID-prefixed form.  We repeat the
 *     same ID+class combination here so our mobile rule wins too.
 *
 *   - ListRotator title h1 (custom.css:984-986): font-size:14px – confirmed OK.
 *
 *   - Product-card name (.cell-product .description): 13px – bumped to ≥13px.
 *   - Product-card price (.cell-product .price a): 18px desktop – reduced on phone
 *     to 15px (still prominent) so it does not overflow a 320px card.
 *   - Product-card crossed price (.cell-product .priceSite a): 13px – kept.
 *   - mv-promo-card name (.mv-promo-name): 13px desktop – bumped to 13px min.
 *   - mv-shorty-card name (.mv-shorty-name): 14px desktop – bumped to 13px min.
 *
 *   TOUCH TARGETS (≤991px)
 *   - Homepage slider prev/next arrows: .mv-promo-btn (.mv-promo-prev/.mv-promo-next),
 *       .mv-shorty-btn (.mv-shorty-prev/.mv-shorty-next) — 32×32px in styles.css.
 *   - Slick (AffaSlider) prev/next: .mv-slick .slick-prev, .mv-slick .slick-next — 36×36px.
 *   - Slick dot buttons: .mv-slick .slick-dots li button — 12×12px.
 *   - Product-card "voir produit" / details link: .cell-product .more_details
 *   - Product-card add-to-cart: .cell-product .block-addtocart,
 *       .mv-shorty-cart (.mv-shorty-act), .mv-promo-... (no discrete CTA button
 *       confirmed — the whole card links; skip individual button target for mv-promo).
 *   - ListRotator thumbnail rows (each row is the tap target): no explicit
 *       link/button confirmed beyond the anchor inside — apply min-height to
 *       .containerrotator .l-rotator .thumbnails .thumb instead.
 *   - mv-btn (generic storefront button): .mv-btn — confirmed in custom.css.
 *
 *   SKIPPED (unconfirmed / not applicable):
 *   - Swiper prev/next buttons on .mv-affa: those belong to the AffaSlider block
 *     (category/sub-pages, not the homepage content column).  The homepage uses
 *     .mv-slick (SlickSlider) and the .mv-promo-carousel / .mv-shorty carousels.
 *   - jcarousel prev/next (`.prev` / `.next`): styles.css:8291/8308 defines these as
 *     pure CSS triangles (border-based, 6×12px) used by the jcarousel plugin in
 *     #mycarousel (homepage ManufacturersSlider).  They have NO link/button element
 *     behind them — the triangle is painted on a `<span>` via border trick; there is
 *     no interactive `<a>` or `<button>` wrapping them in the rendered HTML.
 *     Applying min-height/min-width to these would have no tappable effect.
 *     SKIPPED — cannot confirm tappable element class.
 *   - Slick play/pause (.mv-slick-playpause): 30×30px control, confirmed in styles.css
 *     but it is positioned inside .slick-dots (not the homepage content flow);
 *     bumped to 44×44 below to be safe.
 *   - Pagination dots for ListRotator (the `.cpanel` scroll knob): is a `<div id="knob">`
 *     restyled to 6px wide in custom.css — not a button, no tappable role. SKIPPED.
 *   - `.add-to-cart` / `.addtocart-grid` (styles.css:9511/9519): PNG-image buttons
 *     used on the product-detail page, not homepage content. SKIPPED.
 */


/* ==========================================================================
   A. TYPOGRAPHY — @media (max-width: 576px)
   - body/paragraph text in homepage content ≥ 15px
   - no label/caption below 12px (10px ListRotator thumb <p> bumped to 12px)
   - product names/prices ≥ 13px, wrapping allowed
   - headings capped to avoid overflow
   ========================================================================== */

@media (max-width: 576px) {

    /* ---- A1. General paragraph / body text inside homepage columns ----------
     * The blanket rule at styles.css:11143 sets every inline element to 12px
     * with !important.  We need id(#main-content) + class specificity AND
     * !important to win it.  The .homepage wrapper lives directly inside
     * #main-content, giving us the chained id+class path. */

    #main-content .homepage p,
    #main-content .homepage div,
    #main-content .homepage span,
    #main-content .homepage li,
    #main-content .homepage td,
    #main-content .homepage th {
        /* Bump general text to 15px so body copy is readable on phones.
           !important needed to beat the ID-scoped blanket 12px rule. */
        font-size: 15px !important; /* beat :where(#main-content) 12px !important */
    }

    /* ---- A2. Exceptions — labels/captions floored at 12px, not raised ------
     * These classes represent actual caption/micro-label content that should
     * stay compact; 12px is the floor per spec. */

    /* SKU chip on product cards */
    #main-content .homepage .cell-product .sku {
        font-size: 12px !important;
    }

    /* Manufacturer short-label on promo/shorty cards */
    #main-content .homepage .mv-promo-mfr,
    #main-content .homepage .mv-shorty-mfr {
        font-size: 12px !important;
    }

    /* SKU on shorty/promo cards */
    #main-content .homepage .mv-promo-sku,
    #main-content .homepage .mv-shorty-sku {
        font-size: 12px !important;
    }

    /* hp_container sub-links inside the category nav tiles */
    #main-content .homepage .hp_container_block a:not(.hp_container_hdr):not(.hp_container_image):not([class*="btn"]) {
        font-size: 12px !important;
    }

    /* ---- A3. ListRotator thumbnail <p> description — raise 10px → 12px -----
     * custom.css:948-952 sets 10px with !important on this element.
     * Beaten here by the same ID+class path used in custom.css:973-976
     * (which wins on specificity: 1 id + 4 classes + 1 element).
     * !important is required because the custom.css rule also carries it. */

    #main-content .homepage .containerrotator .l-rotator .thumbnails .thumb p,
    #main-content .homepage .containerrotator .l-rotator .thumbnails li p {
        font-size: 12px !important; /* was 10px (custom.css:974-975); bump to floor */
    }

    /* ---- A4. Product card name / price — ≥ 13px, wrapping allowed ----------
     * On a 320px phone a 18px price in a 260px card (cell-product) can overflow.
     * Names: keep at 13px minimum but let them wrap.
     * Price: reduce from 18px to 15px (still visually prominent). */

    #main-content .homepage .cell-product .description {
        font-size: 13px !important;   /* confirmed 13px in styles.css:6503 */
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        height: auto !important;      /* unclamp the fixed 55px so wrapped text shows */
    }

    #main-content .homepage .cell-product .description a,
    #main-content .homepage .cell-product .description a:hover {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #main-content .homepage .cell-product .price a {
        font-size: 15px !important;   /* reduced from 18px; still dominant */
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #main-content .homepage .cell-product .priceSite a {
        font-size: 13px !important;   /* confirmed 13px in styles.css:6521 */
        white-space: normal !important;
    }

    /* mv-promo-carousel product name */
    #main-content .homepage .mv-promo-name {
        font-size: 13px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        height: auto !important;
    }

    /* mv-shorty product name */
    #main-content .homepage .mv-shorty-name {
        font-size: 13px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        height: auto !important;
        -webkit-line-clamp: unset !important;
    }

    /* mv-promo price (styles.css:11130 sets 15px via !important already; keep it) */
    #main-content .homepage .mv-promo-price,
    #main-content .homepage .mv-promo-price .price,
    #main-content .homepage .mv-promo-price .siteprice,
    #main-content .homepage .mv-promo-price span {
        font-size: 14px !important;
    }

    /* mv-shorty price (styles.css:11135 sets 16px via !important) */
    #main-content .homepage .mv-shorty-price,
    #main-content .homepage .mv-shorty-price .siteprice,
    #main-content .homepage .mv-shorty-price .price,
    #main-content .homepage .mv-shorty-price span {
        font-size: 14px !important;
    }

    /* ---- A5. Heading cap — prevent desktop H1/H2 from overflowing -----------
     * The global h1 rule (styles.css near the element-reset section) sets
     * font-size:23px.  On a 320px phone that is fine for a single short title
     * but can push layout if a heading wraps to 4+ lines.  Cap with overflow-wrap. */

    .homepage h1,
    .homepage h2 {
        font-size: 20px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .homepage h3 {
        font-size: 17px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Category-hub title inside #mv-cathub (custom.css:538 sets 20px !important) */
    .homepage #mv-cathub .mv-cat-title {
        font-size: 17px !important;
        overflow-wrap: anywhere !important;
    }

    /* Category tile header link (custom.css:429 sets 1.1em !important) */
    .homepage a.hp_container_hdr,
    .homepage #My_DataList1 a.hp_container_hdr {
        font-size: 1em !important; /* reduce from 1.1em on narrow phones */
        overflow-wrap: anywhere !important;
    }

    /* ListRotator title (custom.css:879 sets 14px !important; OK on phone) */
    #main-content .homepage .containerrotator .l-rotator .title,
    #main-content .homepage .containerrotator .l-rotator h1.title {
        font-size: 13px !important; /* compact on phone; still above the 12px floor */
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

} /* end @media (max-width: 576px) */


/* ==========================================================================
   B. TOUCH TARGETS — @media (max-width: 991px)
   - Homepage link-buttons, add-to-cart, slider prev/next arrows, pagination
     dots: min 44×44px with centered content.
   - ≥ 8px spacing between adjacent tappable controls.
   All scoped under .homepage to keep header controls untouched.
   ========================================================================== */

@media (max-width: 991px) {

    /* ---- B1. mv-promo-carousel prev/next arrows ----------------------------
     * Confirmed: .mv-promo-btn is 32×32px in styles.css:11130.
     * .mv-promo-prev and .mv-promo-next position them. */

    .homepage .mv-promo-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;       /* scale the arrow glyph up with the button */
    }

    .homepage .mv-promo-prev {
        left: 0 !important;               /* move flush to edge; button is now 44px */
    }

    .homepage .mv-promo-next {
        right: 0 !important;
    }

    /* ---- B2. mv-shorty-carousel prev/next arrows ---------------------------
     * Confirmed: .mv-shorty-btn is 32×32px in styles.css:11135. */

    .homepage .mv-shorty-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
    }

    .homepage .mv-shorty-prev {
        left: 0 !important;
    }

    .homepage .mv-shorty-next {
        right: 0 !important;
    }

    /* ---- B3. Slick (AffaSlider / mv-slick) prev / next --------------------
     * Confirmed: .mv-slick .slick-prev / .slick-next are 36×36px in styles.css:11138. */

    .homepage .mv-slick .slick-prev,
    .homepage .mv-slick .slick-next {
        width: 44px !important;
        height: 44px !important;
    }

    /* ---- B4. Slick pagination dot buttons ----------------------------------
     * Confirmed: .mv-slick .slick-dots li button is 12×12px in styles.css:11138.
     * Dots need the tap-area expanded without changing the visual dot size.
     * Use padding to expand the hit area while keeping the visual pill size. */

    .homepage .mv-slick .slick-dots li button {
        width: 12px !important;           /* keep visual size */
        height: 12px !important;
        padding: 16px !important;         /* expand hit area to ≥44px each side */
        box-sizing: content-box !important;
    }

    /* 8px spacing between adjacent dot controls (each li wraps one button) */
    .homepage .mv-slick .slick-dots li {
        margin: 0 4px !important;         /* 4px each side = 8px between adjacent */
    }

    /* ---- B5. Slick play/pause button (inside .slick-dots) -----------------
     * Confirmed: .mv-slick-playpause is 30×30px in styles.css:11138. */

    .homepage .mv-slick .slick-dots .mv-slick-playpause,
    .homepage .mv-slick-playpause {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
        line-height: 44px !important;
    }

    /* ---- B6. Product-card "voir produit" / more_details link ---------------
     * Confirmed: .cell-product .more_details in styles.css:6532.
     * On the homepage these cards appear inside content blocks rendered into
     * .homepage columns. */

    .homepage .cell-product .more_details {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .homepage .cell-product .more_details a {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 10px !important;
    }

    /* ---- B7. Product-card add-to-cart block --------------------------------
     * Confirmed: .cell-product .block-addtocart in styles.css:6549 + custom.css.
     * On phones the block is always-visible (hover:hover media hides it otherwise). */

    .homepage .cell-product .block-addtocart {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .homepage .cell-product .block-addtocart a,
    .homepage .cell-product .block-addtocart button,
    .homepage .cell-product .block-addtocart input[type="button"],
    .homepage .cell-product .block-addtocart input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ---- B8. mv-shorty "voir" (details) and "ajouter" (cart) action links --
     * Confirmed: .mv-shorty-act, .mv-shorty-details, .mv-shorty-cart in styles.css:11135. */

    .homepage .mv-shorty-act {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 12px !important;
    }

    /* 8px spacing between the two action buttons */
    .homepage .mv-shorty-actions {
        gap: 8px !important;
    }

    /* ---- B9. ListRotator thumbnail rows ------------------------------------
     * Confirmed: .containerrotator .l-rotator .thumbnails .thumb in custom.css:921.
     * Each .thumb row is the tappable item (clicking selects the product in the banner). */

    .homepage .containerrotator .l-rotator .thumbnails .thumb {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* ---- B10. Generic mv-btn (storefront action buttons inside homepage) ---
     * Confirmed: .mv-btn used in custom.css (multiple places) and styles.css. */

    .homepage .mv-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ---- B11. Category-tile "Plus d'Info" button ---------------------------
     * Confirmed: #My_DataList1 .btn-small / .hp_container_block .btn-small
     * in custom.css:461. */

    .homepage #My_DataList1 .btn-small,
    .homepage .hp_container_block .btn-small {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 13px !important;
    }

    /* ---- B12. Category-hub CTA link (.mv-cat-cta) --------------------------
     * Confirmed: #mv-cathub .mv-cat-cta in custom.css:547. */

    .homepage #mv-cathub .mv-cat-cta a,
    .homepage #mv-cathub .mv-cat-cta .mv-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
    }

    /* ---- B13. hp_container sub-links (category nav tiles) ------------------
     * Confirmed: .hp_container_block a:not(...) in custom.css:444.
     * Each item is a category sub-link — at least 8px vertical spacing. */

    .homepage .hp_container_block a:not(.hp_container_hdr):not(.hp_container_image):not([class*="btn"]) {
        min-height: 36px !important;      /* sub-links: not full tap targets but give breathing room */
        display: block !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

} /* end @media (max-width: 991px) */

/* ---------------------------------------------------------------------------
   #mv-cathub category-hub block — make the CARD GRID fluid.
   This block is hand-authored HTML inside a live homepage HtmlBlock; its grid
   layout lives in the block's OWN inline <style> (not in the repo), so we beat
   it with !important + #mv-cathub specificity. The grid-wrapper class is not
   known from the repo, so :has() targets whatever element directly contains the
   .mv-cat-card cards (and the hub itself, when cards are its direct children).
   Non-:has() browsers fall back to the block's inline layout (progressive
   enhancement, same approach as #list:has(.cell-product) elsewhere).
   --------------------------------------------------------------------------- */
.homepage #mv-cathub:has(> .mv-cat-card),
.homepage #mv-cathub :has(> .mv-cat-card) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;        /* equal-height cards per row */
}
/* Cards must be able to shrink inside the grid track (kill any inline width). */
.homepage #mv-cathub .mv-cat-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
/* Tablet (577-991): smaller min so ~2-3 fit the column. */
@media (min-width: 577px) and (max-width: 991px) {
    .homepage #mv-cathub:has(> .mv-cat-card),
    .homepage #mv-cathub :has(> .mv-cat-card) {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
}
/* Phone (<=576): ~2-up, tighter gutters, reclaim the 16px outer margins. */
@media (max-width: 576px) {
    .homepage #mv-cathub:has(> .mv-cat-card),
    .homepage #mv-cathub :has(> .mv-cat-card) {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
    .homepage #mv-cathub,
    .homepage #Promotion,
    .homepage #Best-sales,
    .homepage #Offres-Speciales {
        margin: 8px !important;
    }
    .homepage #mv-cathub .mv-cat-title { padding: 0 10px !important; }
    .homepage #mv-cathub .mv-cat-list  { padding: 0 10px !important; }
    .homepage #mv-cathub .mv-cat-cta   { margin: auto 10px 10px !important; }
}

/* ---------------------------------------------------------------------------
   FULL-BLEED SLIDER BLOCKS responsive — .mv-affa.mv-affa-full (AffaSlider) and
   .mv-slick-block.mv-slick-full (SlickSlider).

   On DESKTOP these break out to the full viewport width: AffaSlider via
   js/mv-fullbleed.js (>=992 only); SlickSlider via the managed styles.css rule
   `.mv-slick-full{width:100vw;left:50%;margin-left:-50vw}` + its own inline fb().
   That CSS 100vw overflows on phones/tablets (100vw INCLUDES the scrollbar ->
   horizontal scroll) and the JS recompute can lag on resize/orientation.

   Fix: below 992 pin BOTH back into NORMAL in-flow, full container width, no
   negative margins / no 100vw (this is exactly what mv-fullbleed.js already does
   for AffaSlider <992). Then cap fixed-height hero slides, scale overlay text on
   the tablet band, and enlarge touch targets.

   Targeted by BLOCK CLASS (not .homepage) on purpose: these uniquely-named
   full-bleed blocks must be tamed wherever they render and even before the
   slider JS runs. !important beats the plain inline styles the JS sets (it sets
   them WITHOUT !important), so the in-flow reset holds across resize ticks.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .mv-affa.mv-affa-full,
    .mv-slick-block.mv-slick-full {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;        /* clear the stale negative top fb() can leave */
        transform: none !important;
        overflow: hidden !important;
    }
}

/* SlickSlider content — styles.css already scales heading/sub/btn at <=768; add
   the 769-991 tablet band and cap fixed-height hero slides. */
@media (min-width: 769px) and (max-width: 991px) {
    .mv-slick-block .mv-slick-heading { font-size: 24px !important; max-width: 92% !important; }
    .mv-slick-block .mv-slick-sub     { font-size: 14px !important; max-width: 92% !important; }
}
@media (min-width: 577px) and (max-width: 991px) {
    /* inline height:NNNpx hero slides -> tablet-friendly height; the img fills
       via its inline object-fit:cover. */
    .mv-slick-block .mv-slick-slide[style*="height"] { height: 340px !important; }
}
@media (max-width: 576px) {
    .mv-slick-block .mv-slick-slide[style*="height"] { height: 240px !important; }
    .mv-slick-block .mv-slick-heading { font-size: 18px !important; line-height: 1.2 !important; max-width: 94% !important; }
    .mv-slick-block .mv-slick-sub     { font-size: 13px !important; max-width: 94% !important; }
}

/* Touch targets on <=991 for both full-bleed sliders. */
@media (max-width: 991px) {
    .mv-slick-block .mv-slick-btn {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .mv-slick .slick-prev,
    .mv-slick .slick-next { width: 44px !important; height: 44px !important; }
    .mv-slick .slick-dots li { margin: 0 7px !important; }

    .mv-affa.mv-affa-full .swiper-button-prev,
    .mv-affa.mv-affa-full .swiper-button-next {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .mv-affa.mv-affa-full .swiper-pagination {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Login-page side-by-side columns: drop the fixed 425px to ~full width on
   mobile/tablet so the two floated columns stack instead of overflowing. */
@media (max-width: 991px) {
    .sidebysidea, .sidebysideb { width: 96%; }
}



/* ============ ROUND 2 MOBILE FIXES (2026-06-19) ============
   Critical: re-assert display on the ListRotator at <=992 — SiteThemeCss.cs:1434
   emits @media(max-width:992px){.containerrotator,.l-rotator,...{display:none!important}}
   (intended to hide promo sliders on phones / defer to /mobile/). The user wants
   the main theme responsive, so we un-hide it and let the v2 stacking rules show.
   Specificity (0,2,0)!important > the hide rule's (0,1,0)!important. Plus the gap
   fixes the round-2 zone agents found (manufacturer slider, SelectProductViewer,
   Affa/Slick, overflow, slider images/touch).
   ========================================================================== */
@media (max-width: 992px) {
    .homepage .containerrotator { display: block !important; }
    .homepage .containerrotator .l-rotator { display: flex !important; }
}


/* ManufacturersSlider mobile
   ─────────────────────────────────────────────────────────────────────────────
   TARGET: .slideshow block (column 4) on the homepage.

   UPSTREAM FIXED VALUES (styles.css) THAT MUST BE BEATEN:
     .slideshow             display:inline-block; width:240px; position:relative
     .slideshow .rotator    float:left; width:90px; height:40px
     .slideshow .rotator a  display:none; position:absolute
     .slideshow .rotator a img  width:92px; height:30px
     .slideshow select      width:140px

   WHAT THE PRIOR PASS (custom.css) ALREADY PROVIDES:
   ─────────────────────────────────────────────────────
   @media (max-width:1200px) {
     .homepage .slideshow  → display:block !important; width:100% !important
     .rotator              → width:auto; max-width:120px; height:auto
     .rotator a img        → max-width:100% !important; width:auto !important; height:auto !important; max-height:50px; object-fit:contain
     select                → width:100% !important; max-width:100% !important
   }
   @media (min-width:577px) and (max-width:991px) {
     .rotator              → max-width:140px; min-height:40px
     .rotator a img        → max-height:44px
   }
   @media (max-width:576px) {
     .rotator              → float:none !important; display:block; margin:0 auto 8px; max-width:100%; min-height:44px
     .rotator a            → text-align:center; width:100%
     .rotator a img        → max-height:52px; max-width:100% !important; margin:0 auto
     .slideshow            → text-align:center
     select                → display:block; width:100% !important; min-height:36px (← BUG: too small)
     > a[href*='fabricants'] → display:block; text-align:center; padding:6px 0 (← BUG: < 44px)
   }

   GAP ANALYSIS — what the prior pass missed / got wrong:
   ─────────────────────────────────────────────────────────
   1. Phone ≤576: .rotator a is still position:absolute (styles.css:9759).
      Absolute children ignore normal flow, so the rotator zone collapses to
      min-height:44px and logos are stacked on top of each other. Must reset
      position to relative so anchors participate in flow and height:auto works.

   2. Phone ≤576: select min-height:36px is below the 44px WCAG touch target.

   3. Phone ≤576: "Voir tous les fabricants" link padding:6px 0 = ~28px tall.
      Must be at least 44px (flex centering + min-height).

   4. Phone ≤576: no overflow:hidden on .slideshow. With anchors going
      position:relative, the logo img can spill sideways if wider than the card.
      Belt-and-suspenders clip.

   5. Tablet 577-991: rotator still floats left; height:auto was set in the
      base block but the floated rotator's height collapses to 0 if children
      are position:absolute. Ensure the rotator has a sensible min-height and
      the img has height:auto !important so the rotator grows with its image.

   6. Both bands: object-fit:contain on the img needs !important only if
      styles.css sets it differently — it does not, but add it explicitly
      for clarity since we ARE setting width:auto !important / height:auto !important
      which already covers the image sizing. No new !important needed for object-fit.

   ALL SELECTORS SCOPED UNDER .homepage.
   !important used ONLY where styles.css sets a competing hard-coded value (noted inline).
   ─────────────────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED PHONE + TABLET (≤ 991px)
   Repairs that apply to both bands but were NOT in the prior pass.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* Outer wrapper: already display:block !important; width:100% !important in
       custom.css <=1200px block. Add overflow:hidden here to clip any rotator
       child that might still spill (belt-and-suspenders — prior pass omitted this). */
    .homepage .slideshow {
        overflow: hidden;               /* clip absolute-positioned logos that escape */
        box-sizing: border-box;
    }

    /* Rotator anchors: styles.css:9759 sets position:absolute on .slideshow .rotator a.
       The JS slideSwitch() uses jQuery fadeIn/fadeOut which works on any display/position,
       but absolute children of a relative-positioned rotator all stack at top:0/left:0
       and do NOT participate in normal flow → the rotator's height collapses to whatever
       the CSS min-height provides rather than growing with its content.
       Resetting to position:relative lets the anchor take up vertical space so
       height:auto on the rotator actually sizes to the image. */
    .homepage .slideshow .rotator a {
        position: relative !important;  /* !important: overrides position:absolute from styles.css:9759 */
        display: block;                 /* each anchor takes its own line (one logo at a time) */
        text-align: center;
    }

    /* Logo image: already max-width:100% !important; width:auto !important;
       height:auto !important in the custom.css <=1200px block.
       Add object-fit:contain + display:block explicitly here as reinforcement. */
    .homepage .slideshow .rotator a img {
        max-width: 100% !important;     /* !important: overrides width:92px from styles.css:9769 */
        width: auto !important;         /* !important: overrides width:92px from styles.css:9769 */
        height: auto !important;        /* !important: overrides height:30px from styles.css:9770 */
        object-fit: contain;            /* no !important needed — styles.css sets none */
        display: block;
        margin: 0 auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TABLET  577px – 991px
   Two-up hp_blocks; each card ≈50% viewport. Rotator floats left, select
   + link sit to its right. Prior pass sets rotator max-width:140px and
   img max-height:44px — keep those, add the height:auto !important fix and
   overflow:visible on the rotator so the floated zone sizes to its image.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 577px) and (max-width: 991px) {

    /* Rotator zone: the prior pass has max-width:140px; min-height:40px.
       float:left is still active (only cleared at <=576). The rotator needs
       a sensible min-height so the float occupies enough vertical space for
       the select + link to read next to it. */
    .homepage .slideshow .rotator {
        min-height: 50px;               /* comfortable height for the floated logo zone */
        height: auto;                   /* let the anchor push the height — prior pass set this too */
        overflow: visible;              /* do not clip the logo image inside the float */
    }

    /* Select: tablet — enough height to be tap-friendly alongside the rotator. */
    .homepage .slideshow select {
        min-height: 40px;               /* comfortable on tablet; full 44px reserved for phone */
        width: 100% !important;         /* !important: overrides width:140px from styles.css:9748 */
        max-width: 100% !important;     /* !important: reinforcement */
        box-sizing: border-box;
    }

    /* "Voir tous les fabricants" link: adequate tap target on tablet. */
    .homepage .slideshow > a[href*='fabricants'] {
        display: inline-block;          /* sits inline after the float clears */
        min-height: 40px;
        line-height: 40px;              /* vertically centres the text in the tap zone */
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHONE  ≤ 576px
   Single-column, full-width card. Logos centred, everything stacked, 44px
   touch targets. Prior pass had correct intent but two concrete bugs:
     — select min-height:36px → fixed to 44px here
     — link padding:6px 0 → replaced with 44px min-height flex centering
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* Outer slideshow: full-width block, centred children, overflow clipped.
       Prior pass sets display:block !important; width:100% !important; text-align:center.
       Add overflow:hidden explicitly (the shared ≤991 block above adds it too, but
       be explicit here for standalone legibility). */
    .homepage .slideshow {
        display: block !important;      /* !important: overrides inline-block from styles.css:9731 */
        width: 100% !important;         /* !important: overrides width:240px from styles.css:9733 */
        box-sizing: border-box;
        overflow: hidden;
        text-align: center;
    }

    /* Rotator zone: prior pass has float:none !important; display:block; margin:0 auto 8px;
       max-width:100%; min-height:44px. Keep all of that; add explicit width:100% so the
       centred block occupies the full card, and a reasonable max-height for the logo area. */
    .homepage .slideshow .rotator {
        float: none !important;         /* !important: overrides float:left from styles.css:9737 */
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 8px;
        min-height: 44px;               /* minimum tap-target height for the logo zone */
        height: auto;
        box-sizing: border-box;
        overflow: visible;              /* let the logo img size the zone naturally */
    }

    /* Rotator anchors: resetting position to relative (see shared ≤991 block above)
       means the anchor now takes up vertical space. Make it full-width and centred. */
    .homepage .slideshow .rotator a {
        position: relative !important;  /* !important: overrides position:absolute from styles.css:9759 */
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Logo image: full-width scaling, reasonable phone height, contained.
       Prior pass has max-height:52px; max-width:100% !important; margin:0 auto.
       Add width:auto !important and height:auto !important explicitly (prior pass
       relies on the <=1200 base block; belt-and-suspenders here). */
    .homepage .slideshow .rotator a img {
        max-width: 100% !important;     /* !important: overrides width:92px from styles.css:9769 */
        width: auto !important;         /* !important: overrides width:92px from styles.css:9769 */
        height: auto !important;        /* !important: overrides height:30px from styles.css:9770 */
        max-height: 52px;               /* keeps the logo compact on small screens */
        object-fit: contain;            /* maintain aspect ratio inside the max-height box */
        display: block;
        margin: 0 auto;
    }

    /* Brand jump-to dropdown:
       FIX vs prior pass: min-height was 36px → raised to 44px (WCAG tap target).
       All other values from prior pass kept. */
    .homepage .slideshow select {
        display: block;
        width: 100% !important;         /* !important: overrides width:140px from styles.css:9748 */
        max-width: 100% !important;     /* !important: reinforcement */
        min-height: 44px;               /* FIX: was 36px in prior pass — must be ≥44px for touch */
        margin: 8px auto;
        box-sizing: border-box;
    }

    /* "Voir tous les fabricants" link:
       FIX vs prior pass: padding:6px 0 only gave ~28px tap height.
       Replace with flex centering + min-height:44px for a proper touch target. */
    .homepage .slideshow > a[href*='fabricants'] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;               /* FIX: was padding:6px 0 (~28px) in prior pass */
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
    }
}


/* SelectProductViewer mobile */
/*
  ASSESSMENT OF PRIOR RULES (custom.css lines 4845-5130):
  ─────────────────────────────────────────────────────────
  The existing block correctly neutralises the three hard-wired widths
  (inline style="width:814px", styles.css nav 1016px, styles.css
  list-wrap 1015px/inline-table) with 100% !important at the base level,
  and switches the DataList rows to flex at each breakpoint.

  GAPS FOUND that cause clipping on a 360 px phone:

  1. BASE LEVEL — table#My_DataList1 never gets display:block outside a
     media query. The browser's table layout algorithm calculates the
     natural width (4 × 231px tile + margins ≈ 940 px) before any flex
     reflow fires, and that natural width is used as the containing block
     for the flex children inside.  Result: the table stretches the
     .list-wrap and clips at the right edge at every size below 940 px,
     even though the media-query flex rules are syntactically correct.
     Fix: add display:block + width:100% on the table at the BASE level
     (no media-query wrapper) so flex context is established universally.

  2. PHONE NAV CONFLICT — at ≤576 px the nav li has BOTH
     display:inline-block !important  AND  width:50% !important, while
     the parent .nav has white-space:nowrap (custom.css 5095).
     white-space:nowrap prevents inline-block items from wrapping, so all
     four 50%-wide tabs try to lay out in a single nowrap line → the strip
     overflows to ~200% width.  The scroll fallback only kicks in if
     overflow-x:auto on the parent actually trims the row — but since
     each tab is 50% of the nav's computed width, they should naturally
     fit two per row IF white-space:nowrap is removed (or if display is
     switched to block/flex).
     Fix: at ≤576 px use display:block (not inline-block) on the li so
     the float-like 50% widths wrap into a 2-row grid, and remove the
     white-space:nowrap from the parent nav (it was there to keep tab
     text on one line, which we handle on the <a> separately).

  3. HP_CONTAINER_BLOCK BASE — the base rule only adds box-sizing:border-box
     but does NOT remove float:left or override width:231px from styles.css.
     Outside the three media-query bands, tiles still float at 231px.
     Fix: add width:auto !important + float:none !important at the base
     level so the tile is always flexible before a media query fires.

  4. HP_CONTAINER_IMAGE TABLET — absolute-positioned, styles.css gives it
     width:125px. The tablet band (577–991) overrides .hp_container_block
     to auto width, making a tile ~33% of the container. On a 480 px screen
     that is ~160 px per tile; a 125 px absolute image is 78% of the tile
     and will overlap the text. The phone band overrides to 36%, but tablet
     does not.
     Fix: add width:36%; max-width:36% !important for the tablet band too.

  The CSS below REPLACES / HARDENS the prior rules.  Because it is written
  to a separate file (_shots/resp2/spv.css) rather than editing custom.css,
  it must be loaded AFTER custom.css to take effect (higher source order).
  All selectors are scoped under .homepage.
  Every !important is commented with the rule it is beating.
*/

/* ============================================================
   BASE — wire in at every viewport, not only inside media queries.
   These selectors win over styles.css (lower specificity, no !important)
   but yield to custom.css media-query blocks (same specificity, later
   source order when this file loads after custom.css).
   ============================================================ */

/* 1. Wrapper: beats inline style="width:814px" (inline > stylesheet without
      !important — so !important IS required here). */
.homepage #select-product-viewer {
    width: 100% !important;       /* beat inline style="width:814px" */
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: visible;            /* active tab overflows downward to merge with .list-wrap */
}

/* 2. Nav strip: beats styles.css `#select-product-viewer .nav { width:1016px }` */
.homepage #select-product-viewer .nav {
    width: 100% !important;       /* beat styles.css fixed 1016px */
    max-width: 100% !important;
    overflow: visible;            /* selected tab must overflow downward */
    /* white-space intentionally NOT set here — it was causing inline-block
       tabs to refuse to wrap at ≤576px; see phone band below */
}

/* 3. Content pane: beats styles.css `#select-product-viewer .list-wrap { width:1015px;
      display:inline-table }` */
.homepage #select-product-viewer .list-wrap {
    width: 100% !important;       /* beat styles.css fixed 1015px */
    max-width: 100% !important;
    box-sizing: border-box;
    display: block !important;    /* beat styles.css display:inline-table */
    overflow: hidden;
}

/* 4. DataList TABLE — critical gap from the prior rules.
      Without this the table layout algorithm runs first and sizes the table
      to 4 × 231px ≈ 940px before any flex rule fires.  Switching to
      display:block at the BASE level makes the table a block container
      whose width equals the .list-wrap (already 100%), so the flex rows
      inside it have the right containing block at every viewport width. */
.homepage #select-product-viewer #My_DataList1,
.homepage #select-product-viewer #My_DataList1 > tbody {
    display: block !important;    /* beat display:table / display:table-row-group */
    width: 100% !important;       /* now uses the .list-wrap width, not natural table width */
    max-width: 100% !important;
    box-sizing: border-box;
}

/* 5. Tile block — remove float and fixed width at the BASE level so the
      tile is flexible before any media query fires.  styles.css gives
      .hp_container_block { width:231px; float:left }.  The media-query
      bands below further refine the percentage width. */
.homepage #select-product-viewer .hp_container_block {
    width: auto !important;       /* beat styles.css fixed 231px */
    max-width: 100% !important;
    float: none !important;       /* beat styles.css float:left */
    box-sizing: border-box;
}

/* 6. Category image — styles.css gives .hp_container_image { width:125px }.
      Cap it to 40% of its tile so it never overlaps the text at any size. */
.homepage #select-product-viewer .hp_container_image {
    width: 40% !important;        /* beat styles.css fixed 125px */
    max-width: 40% !important;
    box-sizing: border-box;
    height: auto !important;      /* override styles.css height:90px */
}

/* 7. All images inside the block: fluid */
.homepage #select-product-viewer .hp_container_image img,
.homepage #select-product-viewer img:not(.manufacturer-icon) {
    max-width: 100% !important;   /* tile image never overflows its container */
    height: auto !important;
}

/* ============================================================
   SMALL DESKTOP  992px – 1200px
   4-up tiles.  The base rules already make the table a block and tiles
   flexible; here we only lock the flex row to 4 equal columns.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1200px) {

    /* Flex row: 4 equal columns, no wrap needed at this size */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr {
        display: flex !important;
        flex-wrap: nowrap !important; /* 4-up: keep all tiles on one row */
        width: 100% !important;
    }

    .homepage #select-product-viewer #My_DataList1 > tbody > tr > td {
        display: block !important;
        flex: 1 1 25% !important;     /* 4-up: each cell takes 25% */
        min-width: 0 !important;      /* allow shrink below 231px */
        max-width: 25% !important;
        box-sizing: border-box !important;
        float: none !important;       /* beat styles.css float on the cell if any */
        height: auto !important;
    }

    /* Tile fills its flex cell */
    .homepage #select-product-viewer .hp_container_block {
        min-height: 0 !important;
    }

    /* 4 tabs at 25% each */
    .homepage #select-product-viewer .nav li {
        width: 25% !important;
        box-sizing: border-box;
    }
}

/* ============================================================
   TABLET  577px – 991px
   3-up tiles; tabs 2-per-row (44px tap targets); image capped at 36%.
   ============================================================ */
@media (min-width: 577px) and (max-width: 991px) {

    /* Flex row: wrap so 4 tiles split 3+1 across two rows */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* 3-up: each cell ~33.333% */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr > td {
        display: block !important;
        flex: 0 0 33.333% !important;
        width: 33.333% !important;    /* belt-and-suspenders: flex-basis + width */
        max-width: 33.333% !important;
        box-sizing: border-box !important;
        float: none !important;
        height: auto !important;
    }

    /* Tile fills its flex cell */
    .homepage #select-product-viewer .hp_container_block {
        min-height: 0 !important;
    }

    /* Category image: 36% of the tile so it doesn't crowd the text
       (gap from the prior rules: this band was missing an image override,
       leaving styles.css 125px in effect — ~78% of a ~160px tile). */
    .homepage #select-product-viewer .hp_container_image {
        width: 36% !important;        /* beat styles.css fixed 125px */
        max-width: 36% !important;
        height: auto !important;      /* beat styles.css height:90px */
    }

    /* Title: allow wrapping on narrow tablets */
    .homepage #select-product-viewer .hp_container_hdr {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Tab strip: allow height to grow for 2-row tabs */
    .homepage #select-product-viewer .nav {
        height: auto !important;
    }

    /* 2 tabs per row — 4 tabs in 2 rows, each row 44px tappable */
    .homepage #select-product-viewer .nav li {
        width: 50% !important;
        height: auto !important;
        min-height: 44px;             /* WCAG minimum touch target */
        box-sizing: border-box;
        float: left !important;       /* re-apply float so 2-up works even if display:block */
        display: block !important;    /* simpler than inline-block; no white-space interaction */
    }

    .homepage #select-product-viewer .nav li a {
        min-height: 44px;
        line-height: 34px;            /* vertically centred within 44px */
        white-space: nowrap;          /* keep tab label on one line (OK: the <a> is 50% wide) */
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   PHONE  ≤ 576px
   2-up tiles; tabs 2-per-row (44px); images 36%; CTA button simplified.
   Key fix from gap analysis: use display:block (NOT inline-block) on the
   nav li, and do NOT set white-space:nowrap on the nav ul (the prior rule
   combined both and prevented the 2-row wrapping it intended).
   ============================================================ */
@media (max-width: 576px) {

    /* Flex row: wrap so tiles flow 2-per-row */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* 2-up on phones — each cell 50% */
    .homepage #select-product-viewer #My_DataList1 > tbody > tr > td {
        display: block !important;
        flex: 0 0 50% !important;
        width: 50% !important;        /* belt-and-suspenders */
        max-width: 50% !important;
        box-sizing: border-box !important;
        float: none !important;
        height: auto !important;
    }

    /* Tile: padding tightened for small screens */
    .homepage #select-product-viewer .hp_container_block {
        min-height: 0 !important;
        padding: 10px 8px;            /* tighter than the desktop 16px 10px */
    }

    /* Title: keep legible */
    .homepage #select-product-viewer .hp_container_hdr {
        width: auto !important;
        max-width: 100% !important;
        font-size: 1em;               /* slightly smaller than desktop 1.15em */
    }

    /* Category image: 36% of the 50%-wide tile (~64px on a 360px screen) */
    .homepage #select-product-viewer .hp_container_image {
        width: 36% !important;        /* beat styles.css fixed 125px */
        max-width: 36% !important;
        height: auto !important;      /* beat styles.css height:90px */
    }

    /* Tab strip: 2-row grid (2 tabs per row).
       FIX for the inline-block + white-space:nowrap conflict from prior rules:
       — remove white-space:nowrap from the .nav (was causing all 4 inline-block
         tabs to line up on one row and overflow);
       — switch the li to display:block + float:left so 50%-wide tabs wrap
         naturally into two rows without any white-space interaction.
       overflow-x:auto on the .nav is kept as a last-resort fallback in case
       tab text is very long and the 50% cells overflow their container. */
    .homepage #select-product-viewer .nav {
        height: auto !important;
        overflow-x: auto;             /* last-resort fallback for very long tab labels */
        overflow-y: visible;          /* active tab still merges with .list-wrap below */
        -webkit-overflow-scrolling: touch;
        /* NO white-space:nowrap here — that was conflicting with width:50% inline-block */
    }

    /* 2 tabs per row via float (works regardless of font size or white-space) */
    .homepage #select-product-viewer .nav li {
        width: 50% !important;
        display: block !important;    /* NOT inline-block — avoids white-space:nowrap conflict */
        float: left !important;       /* float-based 2-up grid, cleared by .nav:after */
        height: auto !important;
        min-height: 44px;             /* WCAG minimum touch target */
        box-sizing: border-box;
    }

    .homepage #select-product-viewer .nav li a {
        min-height: 44px;
        line-height: 34px;
        padding: 5px 4px;
        font-size: 12px;              /* tighter on small screens */
        white-space: nowrap;          /* keep label on one line within the <a> */
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;    /* beat styles.css display:block already, but be explicit */
    }

    /* "Plus d'Info" CTA button: hide decorative sprite caps on tiny tiles */
    .homepage #select-product-viewer .btn-small {
        display: none !important;     /* left sprite cap — not needed at phone size */
    }

    .homepage #select-product-viewer .btn-text-small {
        font-size: 11px;
    }

    .homepage #select-product-viewer .btn-right-small {
        display: none !important;     /* right sprite cap — not needed at phone size */
    }
}


/* AffaSlider + SlickSlider mobile verify */
/*
   Audit date: 2026-06-19
   Source files read:
     - affa-slider/css/mv-affa-extra.css       (AffaSlider responsive rules)
     - css/custom.css §FULL-BLEED SLIDER        (existing <=991 full-bleed reset)
     - styles.css line 11138                    (.mv-slick-* full rule set, incl. mv-slick-full)
     - SlickSliderRenderController.cs           (fb() inline JS, markup contract)

   VERDICT
   -------
   The core mobile layout for BOTH sliders is working:

   AffaSlider (mv-affa / mv-affa-full):
     - mv-affa-extra.css <=991 block is thorough: display:block, height:auto,
       min-height/max-height cleared, image un-pinned (position:relative, margin:auto),
       decorative disc hidden, pagination reordered to horizontal row.
     - The custom.css mv-affa-full reset at <=991 (position:relative !important;
       left:auto; width:auto; max-width:100%; margin-left/right:0) correctly nullifies
       the js/mv-fullbleed.js inline positioning before it can apply.
     - Screenshot confirms: full-width card, badge, title, price, two full-width
       buttons, product photo -- all present and correct at ~360px.

   SlickSlider (mv-slick-block / mv-slick-full):
     - styles.css mv-slick-full uses width:100vw/left:50%/margin-left:-50vw (overflow
       risk on desktop with a scrollbar). The fb() JS in the controller corrects this
       by computing clientWidth instead of vw. On mobile <=991 the custom.css reset
       (position:relative !important; left:auto; width:auto; max-width:100%;
       margin-left:0 !important; margin-top:0 !important) beats fb()'s !important-free
       inline styles and pins the block in normal flow -- no horizontal overflow.
     - Fixed-height slides: 577-991 = 340px cap, <=576 = 240px cap. Heading/sub text
       scaled at both bands. Touch targets enlarged to 44px. All in custom.css already.
     - No horizontal-overflow bug found.

   RESIDUAL ISSUES CORRECTED BELOW (3 small fixes)
   ------------------------------------------------
   Fix 1 – AffaSlider logo centering on mobile:
     mv-affa-extra.css <=991 sets .mv-affa-logo { margin-left:0; margin-right:auto }
     (left-aligns the logo) while .slider-content gets text-align:center. The logo
     sits left while every other element is centred — inconsistent on phones.
     Fix: centre the logo on <=991.

   Fix 2 – AffaSlider product image height on small phones (<=576):
     mv-affa-extra.css caps product image at max-height:360px for all of <=991.
     At 360px viewport width the image can take up to 360px of vertical space,
     leaving very little room for the title + price + buttons above it on a short
     phone (e.g. 667px iPhone SE). Tighten to 220px at <=576 so the full card
     fits without vertical scroll.

   Fix 3 – SlickSlider free-mode overlay clipping at <=576:
     .mv-slick-slide is position:relative and the height cap (240px via
     .mv-slick-slide[style*="height"]) uses !important, but .mv-slick-overlay
     (position:absolute;inset:0) does not get overflow:hidden explicitly; any
     absolutely-placed .mv-slick-free-layer with top/bottom beyond 100% could
     paint outside the capped slide. Add overflow:hidden to the slide at <=576
     so free-mode layers are cleanly clipped to the capped height.
*/

/* ---- Fix 1: AffaSlider logo — centre it on mobile (<=991) ---- */
@media only screen and (max-width: 991px) {
    .mv-affa .slider-content .mv-affa-logo {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}

/* ---- Fix 2: AffaSlider product image — tighter height cap at <=576 ---- */
@media only screen and (max-width: 576px) {
    .mv-affa .slider-images img {
        max-height: 220px !important;
    }
}

/* ---- Fix 3: SlickSlider free-mode — clip absolutely-placed layers at <=576 ---- */
@media (max-width: 576px) {
    .mv-slick-block .mv-slick-slide {
        overflow: hidden !important;
    }
}


/* Mobile horizontal-overflow killer
   ============================================================================
   Targets every known fixed-width homepage source that bleeds past 991px.
   Rules are ADDITIVE — they do NOT modify custom.css or styles.css.

   Root sources addressed:
     1. html,body overflow-x:hidden — already in custom.css:193; repeated here
        as a standalone safety net (works even without custom.css loaded).
     2. .mv-header-top width:100vw — custom.css full-bleed bar; already has a
        <=991 cancel block in custom.css:7293. Reinforced here.
     3. list-rotator.css: .l-rotator{width:810px} — plugin sheet injected in
        <body>; .thumbnails{left:627px; width:…} positioned column.
     4. styles.css: .mv-slick-full{width:100vw;left:50%;margin-left:-50vw} —
        full-bleed SlickSlider; already cancelled <=991 in custom.css:7293. Reinforced.
     5. styles.css (old): #select-product-viewer .nav{width:1016px} — already
        fixed in styles.css:6360 to width:100%; belt-and-suspenders here.
     6. styles.css (old): #select-product-viewer .list-wrap{width:1015px} — same.
     7. .containerrotator — the ListRotator wrapper may inherit a pixel width
        from its column context.
     8. .homepage #hp_blocks .slideshow fixed-width manufacturer selector.
     9. .mv-affa full-bleed AffaSlider — same cancel already in custom.css.
    10. Any stray img / video / iframe on the homepage that exceeds 100%.

   Desktop (>=992px) is NEVER touched — all hard fixes sit inside
   @media (max-width:991px).  The media-element cap (img/video/iframe) at the
   base layer is harmless: it only prevents elements from exceeding their
   container — it does not constrain intentional full-bleed.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BASE LAYER (no media query) — safe max-width caps that cannot break desktop
   full-bleed because they only prevent elements from EXCEEDING their container.
   --------------------------------------------------------------------------- */

/* Media elements: never let an img / video / iframe on the homepage exceed
   its parent. This is a permissive floor — elements sized smaller than 100%
   are unaffected. */
.homepage img,
.homepage video,
.homepage iframe {
    max-width: 100% !important;
}

/* ---------------------------------------------------------------------------
   MOBILE / TABLET LAYER (<=991px)
   Every rule is scoped under .homepage (rendered on home.html only).
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {

    /* 1. Homepage root: contain all overflow.
       Clip at the homepage wrapper so child absolute/inline-size overflows are
       swallowed before reaching <body>. */
    .homepage {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* 2. (removed — .mv-header-top is a HEADER selector, out of scope; the
       html,body{overflow-x:hidden} backstop in custom.css already clips it.) */

    /* 3. ListRotator plugin — .l-rotator is set to width:810px in the body-
       injected list-rotator.css. The .screen (left banner) and .thumbnails
       (right list, positioned left:627px) both escape the viewport. */
    .homepage .containerrotator,
    .homepage .l-rotator {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* The screen (banner image column) — inline width is set by the render
       controller; cap it so it never forces the row wider than the viewport. */
    .homepage .l-rotator .screen {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Thumbnails column: the plugin hard-positions it at left:627px.
       On mobile, collapse to normal flow below the screen. */
    .homepage .l-rotator .thumbnails {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Full-bleed SlickSlider (.mv-slick-full).
       styles.css: width:100vw; left:50%; margin-left:-50vw — this is already
       cancelled by custom.css:7293 for <=991. Belt-and-suspenders: */
    .homepage .mv-slick-block.mv-slick-full,
    .homepage .mv-slick-full {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
    }

    /* SlickSlider block wrapper (non-full-bleed variant also gets capped). */
    .homepage .mv-slick-block {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5+6. Select Product Viewer tabs and content panel.
       Old styles.css values: .nav{width:1016px}, .list-wrap{width:1015px}.
       styles.css:6360 already sets width:100% on both, but the theme may
       still carry the old values in a generated block — override regardless. */
    .homepage #select-product-viewer {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .homepage #select-product-viewer .nav,
    .homepage #select-product-viewer .list-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 7. Homepage HP blocks row (#hp_blocks) and its children.
       The three info-card boxes can carry float + fixed widths from the
       plugin; the .slideshow inside the manufacturer selector is capped via
       the base-layer img rule and here explicitly. */
    .homepage #hp_blocks {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .homepage .hp_blk {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    /* 8. Manufacturer slideshow inside the HP blocks. */
    .homepage .slideshow {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 9. AffaSlider full-bleed variant — same as SlickSlider above.
       Already cancelled by custom.css but repeated here for robustness. */
    .homepage .mv-affa.mv-affa-full {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
    }

    /* Any other .mv-affa block (non-full-bleed) also gets capped. */
    .homepage .mv-affa {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 10. Catch-all for remaining fixed-width homepage descendants.
       Targets only the specific widget containers — NOT a blanket [class] —
       so desktop-full-bleed inside >=992 is unaffected. */
    .homepage .containerrotator,
    .homepage .l-rotator,
    .homepage .screen,
    .homepage .thumbnails,
    .homepage #select-product-viewer,
    .homepage .nav,
    .homepage .list-wrap,
    .homepage .slideshow,
    .homepage .mv-affa,
    .homepage .mv-slick-block,
    .homepage #hp_blocks,
    .homepage .hp_blk {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}
/* end @media (max-width:991px) */


/* Slider images + touch (mobile) */

/*
  FILE: _shots/resp2/media-touch.css
  PURPOSE: Cross-cutting mobile polish for ALL homepage slider IMAGES and TOUCH
           controls. Complements the per-slider fixes already in custom.css and
           the managed styles.css block. All rules are scoped under .homepage.

  AUDIT SUMMARY — controls confirmed vs skipped
  ──────────────────────────────────────────────
  CONFIRMED & ALREADY HANDLED in custom.css (not duplicated here):
    • .homepage .containerrotator .l-rotator .screen img / .main-img
        → max-width:100%; object-fit:cover (custom.css:4532-4538, 4699-4708)
    • .homepage .containerrotator .l-rotator .thumb img
        → 40×40px, object-fit:contain on ≤576 (custom.css:4802-4808)
    • .homepage [id^="imglistrot_"] .l-rotator .screen img
        → max-width:100%!important (custom.css:6185-6189)
    • .homepage .mv-affa .slider-images img
        → max-width:100%; height:auto (custom.css:6099-6101)
    • .homepage .mv-affa .slider-active .swiper-pagination
        → min-height:44px + flex align on ≤991 (custom.css:6112-6123)
    • .homepage .mv-affa .slider-active .swiper-pagination-bullet
        → padding:10px tap zone expansion on ≤991 (custom.css:6127-6132)
    • .mv-affa.mv-affa-full .swiper-button-prev/next
        → min-width/height:44px on ≤991 (custom.css:7338-7342)
    • .mv-affa.mv-affa-full .swiper-pagination
        → min-height:44px + flex on ≤991 (custom.css:7343-7348)
    • .mv-slick .slick-prev / .slick-next
        → 44×44px on ≤991 (custom.css:7334-7335)
    • .mv-slick .slick-dots li
        → margin:0 7px on ≤991 (custom.css:7336)
    • .mv-slick .slick-dots .mv-slick-playpause / .homepage .mv-slick-playpause
        → 44×44px on ≤576 (custom.css:7091-7099)
    • .homepage .mv-pslider__media img
        → max-width:100%; height:auto (custom.css:5635-5641)
    • .homepage .mv-pslider__nav
        → min-width/height:44px (custom.css:5644-5651)
    • .mv-slick-slide img (global)
        → display:block; width:100%; height:auto (styles.css:11138 managed block)

  SKIPPED — no tappable element or not on homepage:
    • .prev / .next (jcarousel ManufacturersSlider)
        → pure CSS border-triangle on <span>; no interactive element behind it
          (styles.css:8291-8321, confirmed in custom.css:6831-6836 comment)
    • .jcarousel-prev-vertical / .jcarousel-next-vertical
        → vertical rail inside the list column; already under CSS transform scale;
          only applies to the thumbnail panel scroll, not a standalone nav control
    • .l-rotator #knob (ListRotator scroll thumb)
        → restyled <div>, no tappable role (custom.css:6841-6842 comment)
    • .slideshow .rotator a img (ManufacturersSlider logo)
        → fixed 92×30px logo; fits in any column ≥92px; height:auto would
          distort the logo aspect (it is intentionally a fixed banner strip)
    • .mv-slick-caption
        → 13px in styles.css managed block; above the 12px floor, no override needed

  ADDED HERE (gaps not covered by custom.css):
    A. Umbrella image overflow guard for all remaining .homepage slider images
    B. Non-full-bleed AffaSlider (.mv-affa:not(.mv-affa-full)) swiper nav buttons
    C. Slick dots <button> tap zone expansion (12px visual; needs padding hit area)
    D. Caption/overlay text floor (≥12px) for slick overlay headings at narrow sizes
*/


/* ============================================================================
   A. UMBRELLA IMAGE GUARD — all homepage slider images
   Belt-and-suspenders for any slider image that is not already capped by a
   more specific rule in custom.css. Uses the compound selectors from the task
   brief, minus the ones where height:auto would conflict with a fixed object-fit
   height set by JS (those are listed in SKIP notes above).
   !important: required to override JS-set inline style="width:NNNpx" on the
   banner images of the ListRotator and any future slider block added to the page.
   ============================================================================ */

.homepage .l-rotator img,
.homepage .slideshow img,           /* all images inside the slideshow widget    */
.homepage .mv-affa img,             /* all AffaSlider images (both variants)     */
.homepage .mv-slick img,            /* all SlickSlider images                    */
.homepage .sf-cb-pslider img {      /* ProductSlider images                      */
    max-width: 100% !important; /* !important: overrides JS inline style="width:NNNpx" */
    /* NOTE: height:auto intentionally omitted here for .l-rotator .screen img
       (uses height:100% + object-fit:cover; auto would collapse the banner),
       and for .mv-slick-slide img inside fixed-height hero slides (height is
       set via [style*="height"] in custom.css:7318-7321 which handles those).
       The umbrella rule only caps max-width; per-element height rules in
       custom.css take precedence due to higher specificity. */
}


/* ============================================================================
   B. NON-FULL-BLEED AFFASLIDER SWIPER NAV BUTTONS
   custom.css:7338 covers .mv-affa.mv-affa-full .swiper-button-prev/next.
   The STANDARD variant (.mv-affa without .mv-affa-full) is not covered there.
   Both prev/next AND the pagination strip need 44px touch targets on ≤991.
   ============================================================================ */

@media (max-width: 991px) {

    /* Prev/next arrow buttons — standard (non-full-bleed) AffaSlider */
    .homepage .mv-affa:not(.mv-affa-full) .swiper-button-prev,
    .homepage .mv-affa:not(.mv-affa-full) .swiper-button-next {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Pagination strip — standard AffaSlider (full-bleed variant already in custom.css:7343) */
    .homepage .mv-affa:not(.mv-affa-full) .swiper-pagination {
        min-height: 44px; /* no !important needed — no conflicting inline or !important rule */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

}


/* ============================================================================
   C. SLICK DOTS — expand the <button> tap zone to >=44px
   styles.css (managed block) sets .mv-slick .slick-dots li button to 12×12px
   (confirmed in the long minified rule at line 11138). custom.css:7336 only
   widens li margin to 7px each side — the button itself stays 12×12px on
   phones.  Expanding via padding + background-clip keeps the visual dot small
   while giving fingers a usable hit area.

   Applied at ≤576 (phone band only): on tablet (577-991) the dots are overlaid
   on a full-bleed hero slide where misclicks are less costly; phone is the
   critical band.
   ============================================================================ */

@media (max-width: 576px) {

    .homepage .mv-slick .slick-dots li button {
        /* Expand tap target to ~32px (12px + 10px padding each side) using the
           same padding+background-clip technique as the swiper bullet above.
           !important: the managed styles.css block sets 12×12px with !important
           on this element, so we must match to override. */
        padding: 10px !important; /* !important: overrides styles.css managed block 0px padding */
        background-clip: content-box !important; /* keep visual 12px dot, expand click zone */
        -webkit-box-sizing: border-box;
        box-sizing: border-box !important;
        width: 32px !important;    /* 12px dot + 10px padding each side = 32px box */
        height: 32px !important;
        border-radius: 50% !important; /* re-assert: border-radius must cover the padded box */
        margin: 0 2px !important;      /* tighten li margin so the wider buttons don't crowd */
    }

}


/* ============================================================================
   D. SLIDER TEXT / CAPTION FLOOR — >=12px on phones
   All slider overlay headings, subtext, and captions should be readable at
   ≤576.  Most are already above 12px (e.g. .mv-slick-heading is 20px at ≤768
   per styles.css managed block; .mv-slick-sub is 13px).  The only case that
   could fall below 12px is the .mv-slick-caption (13px — already fine) and
   inner <span>/<p> elements that inherit the site-wide 12px body rule.

   This section floors any text INSIDE a homepage slider at 12px so that the
   global `:where(#main-content) :is(p,...){font-size:12px!important}` in
   styles.css does not accidentally shrink slider overlay text further when the
   cascade resolves the 12px body rule against slider-specific text.
   ============================================================================ */

@media (max-width: 576px) {

    /* SlickSlider overlay text: already sized ≥12px by managed rules, but
       reinforce inner inline elements that may inherit the 12px body reset. */
    .homepage .mv-slick .mv-slick-overlay p,
    .homepage .mv-slick .mv-slick-overlay span {
        font-size: 12px; /* floor — no !important; will lose to .mv-slick-heading/sub which carry !important */
    }

    /* AffaSlider: mv-affa-extra.css uses fluid clamp() for text, which already
       respects a floor.  Add a safety net for any bare <p>/<span> in slide text
       that does not have an explicit size on the slider. */
    .homepage .mv-affa .slider-content p,
    .homepage .mv-affa .slider-content span {
        font-size: 12px; /* floor — no !important needed (mv-affa-extra uses clamp, not !important) */
    }

    /* ListRotator banner caption: .textbox/.inner-text are hidden on phone by
       custom.css:4816-4818 so no rule needed there. */

}


/* ============================================================================
   SPACING GUARD — ensure nav controls have >=8px breathing room between them
   on all bands <=991. Applied only to controls not already spaced by their
   containing layout (slick-dots li already has margin; swiper bullets have gap).
   ============================================================================ */

@media (max-width: 991px) {

    /* SlickSlider prev/next: already positioned left:8px / right:8px by
       styles.css managed block. No additional margin needed.                   */

    /* AffaSlider swiper buttons: Swiper default positions them at --swiper-navigation-sides-offset
       (default 10px from edge). On narrow viewports the 44px buttons need at
       least 8px clearance from the slide content.  Use padding on the container
       so the slide content doesn't overlap the button zone. */
    .homepage .mv-affa:not(.mv-affa-full) .slider-section {
        padding-left: 50px;  /* 44px button + 6px gap */
        padding-right: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

}

/* ============ /ROUND 2 MOBILE FIXES ============ */

/* ============ /HOMEPAGE RESPONSIVE v2 ============ */

/* ============================================================================
   Category toolbar (.product-filter) — abt.com layout.

   Target arrangement:
       [ Hide Filters ] ............(flexible gap)............ [ N Products | Sort | grid/list ]

   The base toolbar styling lives in the managed styles.css block (SiteThemeCss);
   these rules (loaded LAST, in custom.css) only re-order the flex children and
   tweak the toggle's colour states. No edits to styles.css.

   NOTE: this block is intentionally kept AFTER develop's UI-sweep .product-filter
   rules so the feat/perf abt-style toolbar wins where the two overlap (merge
   2026-06-19: feat/perf chosen over develop for the toolbar layout).
   ============================================================================ */

/* Hide Filters toggle: far LEFT. The inline quick-filters (.mv-qf) sit right next to it
   (shown only when the sidebar is collapsed); the right cluster is pushed right by an
   auto margin on the product count. */
.product-filter .mv-filters-toggle { order: 0 !important; margin-right: 0 !important; }
.product-filter .mv-qf             { order: 1 !important; }

/* Right cluster, left-to-right: N Products  ->  Sort  ->  grid/list switcher. */
.product-filter .total-items        { order: 2 !important; margin-left: auto !important; }
.product-filter .sf-ui-pfilter__sort{ order: 3 !important; }
.product-filter .display            { order: 4 !important; }

/* "N Produits" must read EXACTLY like the "Trier par:" label and sit on the same line.
   The base only sets .total-items font-weight (no size) and the label inherits both, so they
   ended up different sizes/weights (the count looked bigger/bolder and a hair high). Force BOTH
   to identical size (13px), weight (600) and line-height (1) and center them; the dropdown value
   stays regular. */
.product-filter { align-items: center !important; }   /* center every item, incl. the bare count text */
.product-filter .total-items {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;          /* SAME metrics as the sort control's text */
    color: #333 !important;
    white-space: nowrap !important;
    margin: 0 0 0 auto !important;        /* push right; kill the legacy 8px top margin */
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
}
.product-filter .sf-ui-pfilter__sort,
.product-filter .categorysortorder,
.product-filter .CatorderText {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    align-items: center !important;
}
.product-filter .sort-order { font-size: 13px !important; font-weight: 400 !important; }   /* dropdown value stays regular */

/* The top toolbar's pager / page-size wrapper is not part of the abt layout — hide it
   on the TOP bar only; the bottom toolbar (.product-filter-bottom) keeps it. */
.product-filter .sf-ui-pfilter__pager        { display: none !important; }
.product-filter-bottom .sf-ui-pfilter__pager { display: inline-flex !important; }

/* abt look: the toggle has NO persistent accent fill — it's a neutral white pill at rest
   (even when filters are collapsed) and only picks up the accent colour on hover/focus.
   This overrides the managed rule that filled the collapsed state solid blue. */
.product-filter .mv-filters-toggle,
body.mv-filters-collapsed .product-filter .mv-filters-toggle {
    background: #fff !important;
    color: #333 !important;
    border-color: #d5d9de !important;
}
.product-filter .mv-filters-toggle:hover,
.product-filter .mv-filters-toggle:focus-visible,
body.mv-filters-collapsed .product-filter .mv-filters-toggle:hover,
body.mv-filters-collapsed .product-filter .mv-filters-toggle:focus-visible {
    background: #fff !important;
    color: var(--site-button-bg, #2563eb) !important;
    border-color: var(--site-button-bg, #2563eb) !important;
}
.product-filter .mv-filters-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22) !important;
}

/* ============================================================================
   PRODUCT BADGES (dynamic badge engine — BadgeEngine.RenderVisual)
   ----------------------------------------------------------------------------
   The admin-managed product badges (Catalog > Badge Settings) render markup
   like:
     <span class="mv-badge-stack mv-badge-stack--detail|--card">
       <span class="mv-badge mv-badge--<kind> [mv-badge--captioned]">
         <span class="mv-badge__sprite" style="width/height/bg-position…"></span>  (sprite image)
         <img  class="mv-badge__img" …>                                            (full image / svg)
         <span class="mv-badge__pill" style="background/color…">label</span>       (text pill)
         <span class="mv-badge__caption" style="left/top% …">overlay</span>        (image text overlay)
       </span>
       …more badges…
     </span>

   IMPORTANT — class collision: '.mv-badge' is ALSO the red header count bubble
   in css/header-icons.css (position:absolute; display:none until .is-on). Product
   badges are ALWAYS inside '.mv-badge-stack', so EVERY rule below is scoped under
   '.mv-badge-stack' — that out-specifies the header rule (0,2,0 > 0,1,0) and undoes
   its absolute/hidden/red-bubble styling for product badges only. The header bubble
   (never inside a stack) is untouched.
   ============================================================================ */

/* The stack wrapper that holds one or more badges. */
.mv-badge-stack {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
/* Detail (product page) surface.
   The product card (#productContent) is a flex ROW (styles.css:10808 —
   display:flex; flex-wrap:nowrap; gap:28px) holding the image | info columns,
   so a detail badge placed as a normal child would become a 3rd flex item = a
   left-hand column that shoves the price sideways (the legacy #iconPromo avoided
   this by being position:absolute). Instead: ONLY when a detail badge is present,
   let the card wrap and make the badge a full-width row at the TOP — it then
   reserves its own height in normal flow (robust to any badge size) and the
   image+info columns drop to the next row keeping their layout. No-badge pages
   never match the :has() and keep their exact nowrap layout. */
#productContent:has(> .mv-badge-stack--detail) {
    flex-wrap: wrap !important;
}
.mv-badge-stack--detail {
    display: flex;
    flex: 0 0 100%;     /* own full-width row inside the flex card */
    order: -1;          /* stay at the top even if the DOM order changes */
    /* Lift the detail badge UP onto the top of the product image instead of
       letting it sit as a band above #rightContent. The visual lift (`top`) is now
       emitted INLINE PER BADGE by BadgeEngine.RenderVisual, from each badge's own
       BadgePlacement.DetailOffsetY (falling back to the store default
       BadgeConfig.DetailOffsetY, -42px) — editable per badge in Catalog > Badge
       Settings (the "offset" field shown when "Product page" is ticked) — so this
       wrapper no longer carries a shared top. The negative margin-bottom is the
       companion that cancels the reserved space so the price/info column pulls back
       up tight (no empty gap). */
    position: relative;
    z-index: 5;
    pointer-events: none;        /* clicks pass through to the image/links below */
    margin: 0 0 -70px 0;
}
/* Card (grid) corner surface: absolutely positioned overlay in the card's
   top corner (the card image wrapper is the positioned ancestor). The two
   below-logo flag zones return bare chips into the theme's own .mv-flags host,
   so they are NOT wrapped in a stack and are positioned by the theme.

   TOP OFFSET (top:48px, not 0 — STATUS ON TOP, custom badges below; user-confirmed
   2026-06-26): the '.ProductStatus' band ("En Stock"/"En Arrivage"/...) keeps the very
   top-left corner (its own top:8px/left:10px/z-index:5). This custom-badge stack drops
   BELOW it to top:48px (same left edge) so the status label stays on top and any custom
   badge stacks under it. The legacy promo badge used the same 48px drop (SiteThemeCss.cs:
   "drop the promo badge below it"); the engine corner mirrors it. z-index 6 (== the flag
   columns) keeps the stack above the image. The wishlist heart is top-RIGHT, no collision. */
.mv-badge-stack--card {
    position: absolute;
    top: 36px;
    left: 10px;   /* align with the "En Stock" status band (.ProductStatus is left:10px) so the custom badge lines up under it */
    z-index: 6;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
/* Force card badges to the top-LEFT even when their saved zone is TopRight (user
   2026-06-26: badge kept landing on the right — "its too far"). BadgeEngine emits
   '.mv-badge-stack--tr' for any badge whose persisted cardZone is TopRight, which used
   to pin the stack to 'right:6px' and override the left:10px above. The admin already
   normalizes every card badge to 'card-tl' on Save (BadgeSettings serialize()), so a
   lingering TopRight value is stale data, not an intentional choice — re-asserting the
   left placement here makes the stack self-heal without a re-save or a rebuild. Same
   specificity as the base rule plus the extra class, so these win the cascade. */
.mv-badge-stack--card.mv-badge-stack--tr {
    left: 10px;
    right: auto;
    align-items: flex-start;
}
/* Vertical nudge: lift the custom-badge stack UP so it sits TIGHT under the "En Stock"
   status band instead of leaving a 48px gap. The inner '.mv-badge' is position:relative
   (badge reset above); -14px against the wrapper's top:48px origin lands it at net ~34px,
   just below the band's ~30px bottom edge. Scoped to the card corner so the header
   count-bubble '.mv-badge' (header-icons.css) and the detail / flag / status badges are
   untouched. Tune: more negative = tighter to the band; less = more gap. */
.mv-badge-stack--card .mv-badge {
    top: -14px;
}

/* PER-CARD-TYPE PLACEMENT — PROMO/SUGGEST CAROUSEL (.mv-promo-card).
   The carousel (Carousel.cs / ProductSliderShorty) does NOT host the custom badge
   in the image box like the grid/list cards. It wraps the engine's badge in its OWN
   zone '<div class="mv-promo-tr">' (theme-positioned at top:46px; right:8px). Two
   problems with the stock markup here:
     1. The grid-tuned absolute offset on '.mv-badge-stack--card'
        (position:absolute; top:36px; left:10px, set for the grid IMAGE box) resolves
        'left:10px' against the thin right-pinned zone and the badge SPILLS OUT to the
        right of the card (lands in the gap between cards — the original bug).
     2. The zone itself is pinned top-RIGHT (under the heart), but the custom badge
        should sit UNDER THE STOCK BADGE (top-left), to match the grid/list cards.
   Fix: re-anchor the whole '.mv-promo-tr' zone to the top-LEFT, just below the stock
   chip ('.mv-promo-avail' lives in '.mv-promo-tl' at top:8px; its ~17px chip bottoms
   out ~25px from the media top), and let the badge flow in the zone (drop the grid
   absolute offset) so it stacks directly under the stock badge. Carousel-scoped so the
   grid/list/detail surfaces — already correct — are untouched. ('.mv-promo-card .mv-promo-tr'
   is (0,2,0) so it out-specifies the managed '.mv-promo-tr' (0,1,0) regardless of load order.) */
.mv-promo-card .mv-promo-tr {
    top: 28px;          /* drop just below the top-left stock badge */
    left: 8px;          /* align under the stock badge (.mv-promo-tl is left:8px) */
    right: auto;
    align-items: flex-start;   /* left-align the stack under the stock badge */
}
.mv-promo-tr .mv-badge-stack--card {
    position: static;   /* flow in the zone instead of the grid absolute offset */
    top: auto;
    left: auto;
    right: auto;
    align-items: flex-start;
}
/* Cancel the grid '-14px' tuck (the zone already positions the stack under the stock
   badge), so the inner '.mv-badge' sits at its natural top. */
.mv-promo-tr .mv-badge-stack--card .mv-badge {
    top: 0;
}

/* Reset the header-bubble '.mv-badge' look for product badges and make the
   wrapper the positioning context for any image text overlay.

   SCOPE — three roots, not just '.mv-badge-stack':
   The CARD top-corner zones (card-tl/card-tr) and the DETAIL stack DO wrap their
   badges in '.mv-badge-stack'. But the two CARD flag columns (card-bl/card-br) and
   the CARD status slot (card-status) render the badge BARE — RenderCardZone drops it
   straight into the theme's own host ('.mv-flags' for the flags, '.ProductStatus' for
   the status slot) with NO stack wrapper. Without these extra roots the bare badge
   falls through to the header-bubble '.mv-badge' rule (header-icons.css:111 —
   position:absolute; display:none; red bubble) and vanishes. ':is(.mv-badge-stack,
   .mv-flags,.ProductStatus) .mv-badge' is (0,2,0) and still out-specifies the header
   rule (0,1,0). Legacy '.mv-flag' chips (singular) are untouched — these only match
   the engine's '.mv-badge'. */
:is(.mv-badge-stack, .mv-flags, .ProductStatus) .mv-badge {
    position: relative;
    right: auto;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    border: 0;
    border-radius: 0;
    font: inherit;
    line-height: normal;
    pointer-events: auto;
}

/* Sprite slice — a <span> carrying inline width/height/background; it needs an
   inline-block box for those dimensions to take effect (an inline span ignores
   width/height, which is why the badge was invisible with no CSS). */
:is(.mv-badge-stack, .mv-flags, .ProductStatus) .mv-badge__sprite {
    display: inline-block;
    flex: 0 0 auto;
}

/* Plain image / SVG badge. */
:is(.mv-badge-stack, .mv-flags, .ProductStatus) .mv-badge__img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Text pill (background/color come inline from the badge's configured colours).
   font-size is !important to beat the theme's '#productContent span,#productContent div
   { font-size:13px !important }' rule (styles.css) — without it the pill text is forced
   to 13px on the product-detail page. (The caption's size is per-badge configurable, so
   it carries inline !important from the engine instead.) */
:is(.mv-badge-stack, .mv-flags, .ProductStatus) .mv-badge__pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Image text overlay ("caption"): the engine sets left/top as a percentage of
   the badge (the chosen anchor point), so position it absolutely and translate
   by -50% to center the text on that point. */
:is(.mv-badge-stack, .mv-flags, .ProductStatus) .mv-badge--captioned { position: relative; }
:is(.mv-badge-stack, .mv-flags, .ProductStatus) .mv-badge__caption {
    position: absolute;
    transform: translate(-50%, -50%);
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Responsive: on phones/tablets the toggle is hidden (the off-canvas drawer button takes
   over), so the right cluster centres itself. Let the row wrap and keep a tidy gap. */
@media (max-width: 992px) {
    .product-filter { row-gap: 8px !important; }
    .product-filter .total-items { margin-left: 0 !important; }
}

/* "Trier par" sort dropdown: never let it shrink, and KEEP A CLEAR GAP before the
   grid/list toggle — otherwise the select's chevron ends up hidden under that toggle.
   The select sizes to its content (with a small minimum so short labels still look
   balanced); the margin-right guarantees separation from the display switcher. */
.product-filter .sf-ui-pfilter__sort,
.product-filter .categorysortorder { flex: 0 0 auto !important; }
/* Clear, generous gap after the dropdown AND before the grid/list toggle, so the select
   (and its open option list) sits well clear of the switcher. */
.product-filter .sf-ui-pfilter__sort { margin-right: 28px !important; }
.product-filter .display { margin-left: 6px !important; }
.product-filter .sort-order {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px !important;      /* fits "Moins Cher" / "Fabricants"; keeps the chevron tucked left */
    max-width: none !important;
}
/* Grid/list switcher sits flush to the toolbar's right padding (12px) so its gap to the
   right edge matches the filter toggle's gap to the LEFT edge (the toolbar's 12px left
   padding) — symmetric end spacing. */
.product-filter .display { margin-right: 0 !important; }

/* ============================================================================
   Inline quick-filters (Fabricant + Prix) — built by mv-filters.js.

   Shown in the toolbar ONLY when the left sidebar is collapsed (so they never
   duplicate it), desktop only (mobile uses the off-canvas drawer). Each chip
   opens a dropdown popover that drives the EXISTING hidden criteria inputs +
   AJAX — no server change, no cloned state.
   ============================================================================ */
.product-filter .mv-qf { display: none; align-items: center; gap: 8px; }
@media (min-width: 993px) {
    body.mv-filters-collapsed .product-filter .mv-qf { display: inline-flex; }
}
.mv-qf-box { position: relative; display: inline-flex; }

.mv-qf-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: #fff; border: 1px solid #d5d9de; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: #333; cursor: pointer; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.mv-qf-chip:hover,
.mv-qf-chip[aria-expanded="true"] { border-color: var(--site-button-bg, #2563eb); color: var(--site-button-bg, #2563eb); }
.mv-qf-chip.is-active { border-color: var(--site-button-bg, #2563eb); color: var(--site-button-bg, #2563eb); background: rgba(37, 99, 235, .07); }
.mv-qf-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); }
.mv-qf-chip__n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--site-button-bg, #2563eb); color: #fff; font-size: 11px; font-weight: 700; box-sizing: border-box; }
/* The count badge must vanish when there's no active selection (the `hidden` attribute);
   the display:inline-flex above otherwise kept an empty blue dot showing. */
.mv-qf-chip__n[hidden] { display: none !important; }
.mv-qf-chip__chev { flex: 0 0 auto; stroke: currentColor; opacity: .6; transition: transform .15s; }
.mv-qf-chip[aria-expanded="true"] .mv-qf-chip__chev { transform: rotate(180deg); }

.mv-qf-pop {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    min-width: 240px; max-width: 320px; box-sizing: border-box;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 10px;
}
.mv-qf-pop.open { display: block; }
.mv-qf-pop__search { width: 100%; box-sizing: border-box; border: 1px solid #cfd4da; border-radius: 6px; padding: 7px 9px; font-size: 13px; margin-bottom: 8px; }
.mv-qf-pop__body { max-height: 280px; overflow-y: auto; }
.mv-qf-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; font-size: 13px; color: #444; border-radius: 6px; }
.mv-qf-row:hover { background: #f3f6fb; }
.mv-qf-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--site-button-bg, #2563eb); cursor: pointer; flex: 0 0 auto; margin: 0; }
.mv-qf-row__t { flex: 1 1 auto; }
.mv-qf-price { display: flex; align-items: center; gap: 6px; }
.mv-qf-price input { width: 74px; box-sizing: border-box; border: 1px solid #cfd4da; border-radius: 6px; padding: 6px 8px; font-size: 13px; text-align: center; }
.mv-qf-price__sep { color: #888; }
.mv-qf-price__apply { padding: 6px 14px; border: 0; border-radius: 6px; background: var(--site-button-bg, #2563eb); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.mv-qf-price__apply:hover { background: var(--site-button-hover, #1d4ed8); }

/* Dual-handle price slider under the Min/Max fields (mirrors the sidebar's blue slider).
   Two overlaid <input type=range>: tracks transparent (the divs below draw the rail + fill),
   only the thumbs are interactive (pointer-events). */
.mv-qf-rng { position: relative; height: 26px; margin: 14px 6px 2px; }
.mv-qf-rng__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: #d7dce2; border-radius: 2px; }
.mv-qf-rng__fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: var(--site-button-bg, #2563eb); border-radius: 2px; }
.mv-qf-rng input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.mv-qf-rng input[type="range"]:focus { outline: none; }
.mv-qf-rng input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; height: 26px; }
.mv-qf-rng input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; background: var(--site-button-bg, #2563eb); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.mv-qf-rng input[type="range"]::-moz-range-track { background: transparent; border: 0; height: 26px; }
.mv-qf-rng input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--site-button-bg, #2563eb); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }

/* "Réinitialiser" — clears brands + stock + price in one round-trip. Shown by JS only when a
   filter is active. Subtle borderless link-button in a clear/destructive red. */
.mv-qf-reset {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
    background: transparent; border: 0; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: #b4232a; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
}
.mv-qf-reset:hover { background: rgba(180, 35, 42, .09); }
.mv-qf-reset:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(180, 35, 42, .22); }
.mv-qf-reset svg { flex: 0 0 auto; stroke: currentColor; }


/* ──────────────────────────────────────────────────────────────────────────
   ProductSliderShorty — CTA button + Tab Design tabs.
   Kept HERE (not in the managed MV-SITE-THEME block of styles.css) because that
   block only regenerates on an admin Site-Settings Save, so code-driven additions
   to it never go live on a recycle. custom.css loads after styles.css and is
   mtime-cache-busted, so these apply on a hard refresh.
   font-size !important beats the #main-content body-font-size !important rule.
   ────────────────────────────────────────────────────────────────────────── */
.mv-shorty-cta { display: flex !important; justify-content: center !important; margin: 10px; }
.mv-shorty-ctabtn { display: inline-block; padding: 10px 24px; border-radius: 999px; font-size: 14px !important; font-weight: bold; text-decoration: none; color: var(--mvs-btn-text, #fff); background: var(--mvs-btn-bg, var(--site-button-bg, #2c3e50)); border: 1px solid var(--mvs-btn-bg, var(--site-button-bg, #2c3e50)); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.mv-shorty-ctabtn:hover { background: var(--mvs-btn-hover, var(--mvs-btn-bg, var(--site-button-bg, #2c3e50))) !important; border-color: var(--mvs-btn-hover, var(--mvs-btn-bg, var(--site-button-bg, #2c3e50))) !important; color: var(--mvs-btn-hover-text, var(--mvs-btn-text, #fff)) !important; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.mv-shorty-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 14px; }
.mv-shorty-tab { -webkit-appearance: none; appearance: none; border: 1px solid var(--site-border, #d0d5db); background: #fff; color: #333; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 20px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mv-shorty-tab:hover { border-color: var(--site-button-bg, #2c3e50); }
.mv-shorty-tab.is-active { background: var(--site-button-bg, #2c3e50); color: #fff; border-color: transparent; }

/* ── Tab filter: hide non-matching cards ──
   The slider filters by toggling .mvs-hide. It MUST out-rank the image-left rule
   `.mv-shorty--imgleft .mv-shorty-card{display:flex !important}` (specificity 0,2,0),
   which otherwise overrode the inline display:none and left every card visible (the
   "tabs don't filter / still TVs" bug). Three classes (0,3,0) + !important wins.
   Not .homepage-scoped: the block also renders on category/manufacturer pages. */
.mv-shorty .mv-shorty-card.mvs-hide { display: none !important; }

/* ── Vertical-stack orientation = cards one ON TOP OF the other (vertical list) ──
   Opt-in via the "Stacked" setting (class .mv-shorty--stack), INDEPENDENT of the
   image-left card style — so an image-left block is a normal horizontal ROW unless
   Stacked is ticked. The (0,3,0) selectors beat the .homepage responsive flex rules
   (0,2,0 !important) at every width. The horizontal slider chrome (arrows / progress)
   is hidden and the viewport stops clipping to one row. Not .homepage-scoped (the
   block also renders on category/manufacturer pages). */
.mv-shorty.mv-shorty--stack .mv-shorty-track {
    flex-direction: column !important;
    gap: 14px !important;
}
.mv-shorty.mv-shorty--stack .mv-shorty-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.mv-shorty--stack .mv-shorty-viewport { overflow: visible !important; }
.mv-shorty--stack .mv-shorty-btn,
.mv-shorty--stack .mv-shorty-progress { display: none !important; }

/* ── Tab bar = ONE horizontal row that slides, with prev/next arrows ──
   With many selected categories the centered flex-wrap bar grew into a tall
   multi-row block. Keep every tab on a single row inside a flex bar flanked by
   round scroll arrows; the strip itself scrolls horizontally (a "slider"). */
.homepage .mv-shorty-tabsbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
}
.homepage .mv-shorty-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;       /* arrows are the affordance; hide the native bar */
}
.homepage .mv-shorty-tabs::-webkit-scrollbar { height: 0; display: none; }
.homepage .mv-shorty-tab { flex: 0 0 auto; white-space: nowrap; }
/* Round scroll arrows */
.homepage .mv-shorty-tabnav {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--site-border, #d0d5db);
    background: #fff;
    color: #333;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s, opacity .15s;
}
.homepage .mv-shorty-tabnav:hover:not(:disabled) { border-color: var(--site-button-bg, #2c3e50); color: var(--site-button-bg, #2c3e50); }
.homepage .mv-shorty-tabnav:disabled { opacity: .35; cursor: default; }

/* ── Image-left cards: don't pin the add-to-cart button to the card bottom ──
   .mv-shorty-actions{margin-top:auto} aligns buttons across equal-height TOP-image
   cards, but in the row (image-left) layout it consumed all the free height and
   shoved the name/price to the top, leaving a big white gap above the button. In
   image-left mode the body already vertically centres, so drop the auto margin and
   let name/price/button sit together as one centred group. */
.homepage .mv-shorty--imgleft .mv-shorty-actions { margin-top: 8px !important; }

/* ── Progress bar = grabbable scrubber (taller hit area + cursor) ──
   The 4px bar was too thin to grab; the JS makes it click+drag to scroll. */
.homepage .mv-shorty-progress {
    height: 8px !important;
    cursor: pointer;
    margin-top: 16px;
}
.homepage .mv-shorty-progress__bar { cursor: grab; }
.homepage .mv-shorty-progress:hover { background: rgba(0,0,0,.2); }

/* ==========================================================================
   DETAILED-LIST (.mv-dl) — badge visibility fixes
   --------------------------------------------------------------------------
   Root cause: two problems made the Nouveau and Prix-reduit chips invisible
   or poorly styled in the detailed-list view while they look correct on the
   grid.

   1. NOUVEAU (.mv-flags inside .mv-dl__imgbox):
      The calm-premium block sets top:36px to leave room for a promo-badge,
      but the container relied on the global .mv-flags{display:flex} base rule
      and had no explicit display in the scoped block. More critically, the
      chip background/color came only from the global .mv-flag-new rule
      (specificity 0,0,1) which can be beaten by any component rule.
      Fix: re-assert display:flex + explicit position on the container, bump
      z-index above the image, and pin the chip colours with a high-specificity
      scoped rule. When no promo-badge is present the flag sits at top:6px;
      the calm-premium top:36px offset is kept as a comment-documented fallback
      (it only matters when a .mv-pbadge is also rendered — both are top:6px
      and the badge wins via z-index:9 vs. z-index:5 here).

   2. PRIX-REDUIT (.mv-flags.mv-flags-right inside .controls.mv-dl__buy):
      The calm-premium block already makes this position:static so it flows
      in the buy-box column. But the chip used a muted cream (#fbeeda/#b3600a)
      that was nearly invisible on the white buy-box background, unlike the
      grid's bold orange (#e67e22 / #fff). Fix: replace with the same bold
      orange used on the grid, add explicit display:flex on the container,
      and make the container right-align its chip (matching the buy-box's
      right-text-align convention).

   Scope: .detailedList .product-line.mv-dl only — zero grid/card side effects.
   ========================================================================== */

/* --- Nouveau badge container (inside .mv-dl__imgbox) -------------------- */
.detailedList .product-line.mv-dl .mv-dl__imgbox .mv-flags {
    display: flex !important;
    position: absolute !important;
    left: 6px !important;
    top: 32px !important;
    z-index: 5 !important;
    pointer-events: none;
}

/* --- Nouveau chip -------------------------------------------------------- */
.detailedList .product-line.mv-dl .mv-dl__imgbox .mv-flags .mv-flag.mv-flag-new {
    background: #27ae60 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.20);
}

/* --- Prix-reduit badge container (inside .controls.mv-dl__buy) ---------- */
.detailedList .product-line.mv-dl .controls.mv-dl__buy .mv-flags.mv-flags-right {
    display: flex !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    pointer-events: none;
}

/* --- Prix-reduit chip: bold orange matching the grid view --------------- */
.detailedList .product-line.mv-dl .controls.mv-dl__buy .mv-flags.mv-flags-right .mv-flag.mv-flag-drop {
    background: #e67e22 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.20);
}

/* ============================================================================
   Product item-condition badge (New in the box / Refurbished / Used / Open box / custom)
   Detail page shows it always; category list/grid cards show it only when NOT New.
   ============================================================================ */
.mv-cond-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    line-height:1.6;
    letter-spacing:.2px;
    vertical-align:middle;
    white-space:nowrap;
}
.mv-cond-badge--new{ background:#e6f4ea; color:#157347; border:1px solid #157347; }
.mv-cond-badge--other{ background:#fff3cd; color:#9a6700; border:1px solid #d39e00; }
.mv-cond-badge-row{ margin-top:6px; }
.cell-product .mv-cond-badge, .product-line .mv-cond-badge{ margin-left:4px; }
/* Product detail: 10px space below the condition (Reconditionne) badge (per user 2026-06-21). */
#productContent .mv-cond-badge-row{ padding-bottom:10px !important; }

/* GTIN line above the product-detail price */
.mv-gtin-line{ font-size:12px; color:#666; margin:0 0 4px; }
.mv-gtin-line span{ font-weight:600; color:#333; letter-spacing:.3px; }

/* Cart actions row: drop the cell padding (per user 2026-06-24). */
#cartactions td{ padding:0 !important; }

/* Quantity field on the product-detail add-to-cart row: native number input
   (browser spinner). Emitted by ProductInfo.cs; #qty keeps its id/classes so
   add2cart2.js ($("#qty").val()) still reads it. Width set wide enough for the
   spinner; border/radius dropped to sit flush in the row. */
#rightContent #addToCart #qty.sf-ui-pinfo__qty{ width:44px !important; border:1px solid #cdcdcd !important; border-radius:6px !important; }

/* Cart line-item descriptions: remove the (blue square) list bullets that the
   product short-description HTML renders on each item (per user 2026-06-24). */
#cartcontainer .cartitemdescription ul,
#cartcontainer .cartitemdescription ol,
#cartcontainer .cartitemdescription li{
    list-style: none !important;
    background-image: none !important;
}

/* Cart line items: remove the bold top/bottom divider borders that frame each
   product row — the header's 2px bottom rule and the per-row 1px bottom rule
   (per user 2026-06-24). */
#cartcontainer .cartproductgrid th,
#cartcontainer .cartproductgrid td{
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Cart checkout actions: constrain the block to 373px and have the two buttons
   fill it equally with a 12px gap between them (per user 2026-06-24). */
#cartactioncheckout{
    width: 373px !important;
}
#cartactioncheckout tr{
    display: flex !important;
    width: 100%;
    align-items: center;
    gap: 12px !important;
}
#cartactioncheckout td{
    flex: 1 1 0;
    gap: 0 !important;
}
#cartactioncheckout .mv-btn{
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Replaced-product card on the product detail page (#productContent), restyled
   to match the abt-style detailed-list rows (.detailedList .product-line.mv-dl):
   flat white card, thin gray separators, image-left / details-right, mv-dl
   typography. The LIVE card is rendered by the template engine from
   templates/parts/single-product-replace.html and uses plain .product_image /
   .right-list / .controls (no mv-dl__ subclasses) and is NOT inside
   .detailedList, so the mv-dl look is re-created here scoped to
   #productContent .product-replace. (per user 2026-06-25) */
#productContent .product-replace{
    margin-top:34px;
    top:0;
    padding:0;
    background:#fff;
    color:#333;
    border:1px solid #ececec;
    border-radius:8px;
    overflow:hidden;
    font-size:13px;
}
/* "Ce produit est remplacé par:" header strip */
#productContent .product-replace .title-replace{
    display:block;
    margin:0;
    padding:12px 16px;
    font-size:13px;
    font-weight:700;
    color:#15457e;
    background:#f7f9fc;
    border-bottom:1px solid #ececec;
}
/* Row: flat white, no border/box, image | details */
#productContent .product-replace .product-line{
    height:auto;
    display:flex;
    align-items:stretch;
    gap:26px;
    margin:0;
    padding:22px 16px;
    border:0;
    border-radius:0;
    background:#fff;
}
/* --- Media column --- */
#productContent .product-replace .product-line .product_image{
    position:static !important;
    float:none !important;
    flex:0 0 196px;
    width:196px;
    min-width:196px;
    margin:0;
    padding:0;
    text-align:center;
    align-self:flex-start;
}
#productContent .product-replace .product-line .product_image .link img:not(.manufacturer-icon){
    width:auto !important;
    max-width:100% !important;
    max-height:170px !important;
    height:auto !important;
    object-fit:contain;
}
#productContent .product-replace .product-line .see_product{
    width:auto;
    margin:10px 0 0;
    font-size:12px;
}
/* --- Info column --- */
#productContent .product-replace .product-line .right-list{
    flex:1 1 auto;
    min-width:0;
    margin:0 !important;
    position:relative;
}
/* brand - sku (first paragraph) */
#productContent .product-replace .right-list > p:first-of-type{ margin:0 0 3px; }
#productContent .product-replace .right-list > p:first-of-type a{
    font-size:12px;
    font-weight:700;
    color:#8a929b;
    text-transform:uppercase;
    letter-spacing:.02em;
    text-decoration:none;
}
#productContent .product-replace .right-list > p:first-of-type em{
    font-style:normal;
    font-weight:400;
    color:#aab0b8;
    text-transform:none;
}
/* short description + generic paragraphs */
#productContent .product-replace .right-list p{
    font-size:13px;
    line-height:1.55;
    color:#555;
    margin:0 0 8px;
}
/* product name */
#productContent .product-replace .right-list p b{
    font-size:16px;
    font-weight:600;
    line-height:1.35;
    color:#15457e;
}
/* Stock-status badge — pill + check/dot icon, mirroring the product-list
   (.mv-dl) .mv-dl__status .siteprice / .mv-stock-in design. */
#productContent .product-replace #status .siteprice{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:600;
    line-height:1;
    padding:4px 9px 4px 8px;
    border-radius:999px;
}
#productContent .product-replace #status .siteprice::before{
    content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
}
#productContent .product-replace #status .mv-stock-in{ color:#1c7c43 !important; background:#eaf6ee; border:1px solid #1c7c43 !important; }
#productContent .product-replace #status .mv-stock-in::before{
    width:14px; height:14px; border-radius:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7c43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 12.4l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
#productContent .product-replace #status .mv-stock-out{ color:#b35c00 !important; background:#fdf1e3; border:1px solid #b35c00 !important; }
#productContent .product-replace #status .mv-stock-out::before{ background:#e98e2b; }
/* CTA — text mv-btn (no image), matches the mv-dl detailed-list button. */
#productContent .product-replace .controls{ margin-top:12px; }
#productContent .product-replace .controls .mv-btn{ display:inline-flex; align-items:center; }
/* "En promotion" — gradient pill + tag icon, mirroring the product-list promo
   (#divPromo #aPromo); hide the old corner-gif decoration. */
#productContent .product-replace .promotion-block .product_discount_adverts{ position:static !important; border:0 !important; }
#productContent .product-replace .promotion-block .product_discount_adverts img{ display:none !important; }
#productContent .product-replace .promotion-block #aPromo{
    display:inline-flex !important;
    align-items:center;
    gap:5px;
    color:#fff !important;
    background:linear-gradient(135deg, #ff5a5a, #d32f2f) !important;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-decoration:none !important;
    padding:4px 10px;
    border-radius:999px;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(211,47,47,.35);
}
#productContent .product-replace .promotion-block #aPromo::before{
    content:""; width:11px; height:11px; flex:0 0 auto;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Cpath%20d='M21.41%2011.58l-9-9C12.05%202.22%2011.55%202%2011%202H4c-1.1%200-2%20.9-2%202v7c0%20.55.22%201.05.59%201.42l9%209c.36.36.86.58%201.41.58s1.05-.22%201.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5%207C4.67%207%204%206.33%204%205.5S4.67%204%205.5%204%207%204.67%207%205.5%206.33%207%205.5%207z'/%3E%3C/svg%3E") no-repeat center;
    background-size:contain;
}

/* Cart line-item images: no border (per user 2026-06-24). */
#cartcontainer .cartitemimage img{
    border: none !important;
}

/* ============================================================================
   MEGA MENU — visible bullets on sub-items
   The managed theme block (styles.css) gives .mv-mm-sublink a "•" ::before but
   colours it WHITE, so it's invisible on the light dropdown panel. Re-colour the
   bullet to follow the link text (currentColor) so the bullets actually show.
   Group HEADINGS (.mv-mm-head) keep no bullet. Higher specificity + !important so
   it beats the managed rule; custom.css also loads last.
   ============================================================================ */
#header-menu .mv-megamenu .mv-mm-sublink::before,
#header-menu .mv-megamenu .mv-mm-links a:not(.mv-mm-head):not(.mv-mm-sub-head)::before {
    color: currentColor !important;
}

/* ============================================================================
   Frequently-bought-together / "ADD & SAVE" block (#hp_blocks, rendered by
   ProductRelatedItems). abt-style: full-width bordered card — hero product on
   the left, a "+" divider, then a row of recommended-accessory cards (image +
   info + price + full-width add-to-cart). Overrides the legacy 50%-float column
   layout (body #product #hp_blocks) so the block sits full-width below the
   product. (per user 2026-06-25, Screenshot_15)
   ============================================================================ */
body #product #hp_blocks{
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:26px 0 0 !important;
}
#product #hp_blocks .mv-fbt{
    box-sizing:border-box;
    border:1px solid #e3e6ea;
    border-radius:10px;
    background:#fff;
    padding:24px 28px;
}
#product #hp_blocks .mv-fbt__title{
    margin:0 0 18px;
    font-size:20px;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#1a1a1a;
}
#product #hp_blocks .mv-fbt__row{
    display:flex;
    align-items:flex-start;
    gap:18px;
    flex-wrap:nowrap;        /* hero | plus | cards stay on ONE line */
}
/* Hero — current product */
#product #hp_blocks .mv-fbt__hero{ flex:0 0 170px; width:170px; text-align:center; }
#product #hp_blocks .mv-fbt__hero-img{ display:block; }
#product #hp_blocks .mv-fbt__hero-img img{ max-width:100%; height:auto; object-fit:contain; }
#product #hp_blocks .mv-fbt__hero-name{
    display:block;
    margin-top:10px;
    font-size:13px;
    line-height:1.4;
    color:#333;
    text-decoration:none;
}
/* Plus + vertical divider — big blue "+" with a tall divider to its left
   (matches Screenshot_15). The divider is a real border-left on the element
   (spans its full stretched height — reliable, unlike an absolute pseudo).
   align-self:stretch spans the row height; min-height is a fallback.
   !important beats the blanket #main-content font-size/color rules. */
#product #hp_blocks .mv-fbt__plus{
    position:relative;
    flex:0 0 auto;
    align-self:stretch;
    min-height:130px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:10px;
    padding:0 30px;
    font-size:0 !important;   /* hide the literal "+" text — show the SVG icon instead */
    line-height:1 !important;
}
/* Plus icon (SVG image) in place of the "+" text — sits ON TOP of the divider
   line on a white disc so the line passes behind it (abt-style). */
#product #hp_blocks .mv-fbt__plus::before{
    content:"";
    position:relative;
    z-index:1;
    width:56px;
    height:56px;
    flex:0 0 auto;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 52px 52px;
}
/* Divider line (abt-style): a fixed-height 5px light line CENTERED behind the
   plus, so the plus disc sits on top of it. z-index below the icon. */
#product #hp_blocks .mv-fbt__plus::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:5px;
    height:170px;
    background:#e8eaec;
    z-index:0;
}
/* Items row */
/* Right side = the carousel column (scrolling row of cards + dots below). */
#product #hp_blocks .mv-fbt__scroller{ flex:1 1 0; min-width:0; }
/* Cards in a single non-wrapping row that scrolls horizontally (drag or wheel);
   native scrollbar hidden, drag handled by JS. */
#product #hp_blocks .mv-fbt__items{
    display:flex;
    flex-wrap:nowrap;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none;
    scrollbar-width:none;
    cursor:grab;
    -webkit-user-select:none;
    user-select:none;
}
#product #hp_blocks .mv-fbt__items::-webkit-scrollbar{ display:none; }
#product #hp_blocks .mv-fbt__items.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
/* Card width = an exact fraction of the visible row so a WHOLE number of cards
   fits per view (no half-card cut at the edge); count adapts to screen size. */
#product #hp_blocks .mv-fbt__card{ flex:0 0 calc((100% - 60px) / 4); min-width:0; max-width:none; scroll-snap-align:start; display:flex; flex-direction:column; }
@media (max-width:1300px){ #product #hp_blocks .mv-fbt__card{ flex-basis:calc((100% - 40px) / 3); } }
@media (max-width:992px){ #product #hp_blocks .mv-fbt__card{ flex-basis:calc((100% - 20px) / 2); } }
@media (max-width:600px){ #product #hp_blocks .mv-fbt__card{ flex-basis:100%; } }
/* Pagination dots (one per page; active = blue dot inside a small square). */
#product #hp_blocks .mv-fbt__dots{ display:none; justify-content:center; align-items:center; gap:12px; margin-top:16px; }
#product #hp_blocks .mv-fbt__dot{ position:relative; width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#cfd3d8; cursor:pointer; transition:background .15s ease; }
#product #hp_blocks .mv-fbt__dot:hover{ background:#aab0b8; }
#product #hp_blocks .mv-fbt__dot.is-active{ background:#1f4e79; }
#product #hp_blocks .mv-fbt__dot.is-active::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border:1px solid #1f4e79; }
#product #hp_blocks .mv-fbt__card-top{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
#product #hp_blocks .mv-fbt__card-img{ flex:0 0 80px; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
#product #hp_blocks .mv-fbt__card-img img{ max-width:100%; max-height:100%; height:auto; object-fit:contain; }
#product #hp_blocks .mv-fbt__card-info{ flex:1 1 auto; min-width:0; }
#product #hp_blocks .mv-fbt__card-name{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 8px;
    font-size:13px;
    line-height:1.35;
    color:#333;
    text-decoration:none;
}
#product #hp_blocks .mv-fbt__card-name:hover{ color:#15457e; }
/* Trim the verbose price block to one clean price (+ savings), abt-style. */
#product #hp_blocks .mv-fbt__card-price{ margin:0 0 8px; }
#product #hp_blocks .mv-fbt__card-price .public-price,
#product #hp_blocks .mv-fbt__card-price .ht-price,
#product #hp_blocks .mv-fbt__card-price .mv-price-ht,
#product #hp_blocks .mv-fbt__card-price .mv-public-ht,
#product #hp_blocks .mv-fbt__card-price .mv-reseller-ht,
#product #hp_blocks .mv-fbt__card-price .small-TTC{ display:none !important; }
#product #hp_blocks .mv-fbt__card-price p{ margin:0 !important; }
/* Final price (below) — green (#008000), same as the TTC. Size unchanged. */
#product #hp_blocks .mv-fbt__card-price .your-price,
#product #hp_blocks .mv-fbt__card-price .your-price .size-listprice,
#product #hp_blocks .mv-fbt__card-price .siteprice,
#product #hp_blocks .mv-fbt__card-price .price{ font-weight:700 !important; color:#008000 !important; white-space:nowrap !important; }
/* Reference/site price (above, struck) — SIZE smaller + red. */
#product #hp_blocks .mv-fbt__card-price .your-siteprice,
#product #hp_blocks .mv-fbt__card-price .your-siteprice .size-listprice{ font-size:11px !important; color:#c0392b !important; white-space:nowrap !important; }
#product #hp_blocks .mv-fbt__card-price .mention{ font-size:10px !important; font-weight:600 !important; }
#product #hp_blocks .mv-fbt__card-price .yousave-price,
#product #hp_blocks .mv-fbt__card-price .mv-reseller-eco{ font-size:12px !important; font-weight:700 !important; color:#1c7c43 !important; }
#product #hp_blocks .mv-fbt__card-badge{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    color:#fff;
    background:#1f4e79;
    padding:3px 8px;
    border-radius:3px;
}
/* CTA — outlined blue pill, same width as .mv-fbt__card-info: shift right by the
   image column (80px) + its gap (14px), pinned to the card bottom. */
#product #hp_blocks .mv-fbt__card-cta{ margin-top:auto; margin-left:94px; }
#product #hp_blocks .mv-fbt__btn{
    display:flex !important;
    width:100%;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    padding:9px 14px !important;
    border:1px solid #2f6fb0 !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#2f6fb0 !important;
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    text-decoration:none;
}
#product #hp_blocks .mv-fbt__btn span{ color:#2f6fb0 !important; }
#product #hp_blocks .mv-fbt__btn:hover{ background:#2f6fb0 !important; color:#fff !important; }
#product #hp_blocks .mv-fbt__btn:hover span{ color:#fff !important; }
@media (max-width:768px){
    #product #hp_blocks .mv-fbt__row{ flex-direction:column; align-items:stretch; }
    #product #hp_blocks .mv-fbt__hero{ width:auto; }
    #product #hp_blocks .mv-fbt__plus{ display:none; }
    #product #hp_blocks .mv-fbt__card{ max-width:none; }
}

/* ============================================================================
   Share widget (#mv-share-wrap, rendered by ProductShare): a single "Share"
   button (icon + label) that toggles a dropdown of the social options
   (#socialButtons), so the user picks where to share. (per user 2026-06-25)
   ============================================================================ */
#mv-share-wrap{ position:relative; display:inline-block; }
#mv-share-wrap .mv-share-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:1px solid #cdcdcd;
    border-radius:999px;
    background:#fff;
    color:#4a4a4a;
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
}
#mv-share-wrap .mv-share-toggle:hover{ background:#f5f5f5; border-color:#bdbdbd; }
#mv-share-wrap .mv-share-toggle .sh-icon{ width:18px; height:18px; }
#mv-share-wrap .mv-share-toggle .sh-label{ display:inline !important; }
/* Options panel — hidden until the toggle adds .is-open; opens as a dropdown. */
#mv-share-wrap #socialButtons{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:60;
    min-width:200px;
    padding:8px;
    background:#fff;
    border:1px solid #e3e6ea;
    border-radius:8px;
    box-shadow:0 8px 22px rgba(0,0,0,.14);
}
#mv-share-wrap.is-open #socialButtons{ display:block; }
/* Vertical list of icon + label (override the inline row + hidden-label rules
   that SiteThemeCss sets on #socialButtons). */
#mv-share-wrap #socialButtons #text.sharing-cl,
#mv-share-wrap #socialButtons ul.sharing-cl{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:2px !important;
}
#mv-share-wrap #socialButtons .sharing-cl li{ display:inline-flex !important; position:relative; }
#mv-share-wrap #socialButtons .sharing-cl li a{
    justify-content:center !important;
    padding:8px;
    border:none !important;
    box-shadow:none !important;
    border-radius:6px;
    color:#333;
    text-decoration:none;
}
#mv-share-wrap #socialButtons .sharing-cl li a:hover{ background:#f5f5f5; box-shadow:none !important; }
/* Custom tooltip: reuse the hidden .sh-label (platform name) as a styled tooltip
   with an arrow pointing UP to the icon, shown on hover. (Icons-only at rest.) */
#mv-share-wrap #socialButtons .sharing-cl .sh-label{
    display:block !important;
    position:absolute;
    top:calc(100% + 9px);
    left:50%;
    z-index:70;
    padding:5px 9px;
    border-radius:6px;
    background:#2b2f36;
    color:#fff !important;
    font-size:12px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(-4px);
    transition:opacity .12s ease, transform .12s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}
#mv-share-wrap #socialButtons .sharing-cl .sh-label::after{
    content:"";
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-bottom-color:#2b2f36;
}
#mv-share-wrap #socialButtons .sharing-cl li a:hover .sh-label{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

/* Cart recalculation loading state: dim the items/totals and show a centered
   spinner while a +/- click or a typed quantity is being recalculated, so the
   user sees that something is happening (per user 2026-06-25). */
.mv-cart-wrap.sf-cart-busy #cartcontainer,
.mv-cart-wrap.sf-cart-busy #cartfooter{
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s ease;
}
.mv-cart-wrap.sf-cart-busy::after{
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    display: block !important;
    box-sizing: border-box !important;
    border: 4px solid rgba(0,0,0,.15) !important;
    border-top-color: var(--site-button-bg,#4F7CC2) !important;
    border-radius: 50% !important;
    /* Hard circular clip — guarantees a circle even if some rule defeats
       border-radius on the pseudo-element. */
    -webkit-clip-path: circle(50% at 50% 50%) !important;
    clip-path: circle(50% at 50% 50%) !important;
    animation: sf-cart-spin .7s linear infinite;
    z-index: 99999;
    pointer-events: none;
}
@keyframes sf-cart-spin{
    to { transform: rotate(360deg); }
}

/* Share + Compare row: the compare button now sits to the RIGHT of the share
   widget (#mv-share-wrap) on the product page (per user 2026-06-25). */
#rightContent .mv-share-compare-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin:10px 0 6px;
}
#rightContent .mv-share-compare-row #mv-share-wrap{ margin:0; }
#rightContent .mv-share-compare-row .mv-pdp-compare{ margin:0 !important; }

/* PDF button (<sys:productpdf>) — same pill language as Share/Compare; sits to
   the right of them and opens the PDF preview modal (no direct download). */
#rightContent .mv-share-compare-row .mv-pdf-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
    padding:8px 16px;
    border:1px solid #cdcdcd;
    border-radius:999px;
    background:#fff;
    color:#4a4a4a;
    font-size:13px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}
#rightContent .mv-share-compare-row .mv-pdf-btn:hover{ background:#f5f5f5; border-color:#bdbdbd; }
#rightContent .mv-share-compare-row .mv-pdf-btn svg{ width:18px; height:18px; flex:0 0 auto; }

/* PDF preview modal — dark header (product name + price + download) over an
   inline PDF viewer, near full-screen (matches Screenshot_20). */
.mv-pdf-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.6);
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
}
.mv-pdf-modal.is-open{ display:flex; }
.mv-pdf-modal__box{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:960px;
    height:82vh;
    background:#1f2429;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.5);
}
/* Dark header bar */
.mv-pdf-modal__head{
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 14px;
    background:#1f2429;
    border-bottom:1px solid #333a40;
}
.mv-pdf-modal__info{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;       /* price on its OWN line, below the title */
    align-items:flex-start;
    justify-content:center;
    gap:2px;
}
.mv-pdf-modal__pname{
    font-size:14px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
.mv-pdf-modal__price{ white-space:nowrap; }
/* Keep ONLY the main price (.size-listprice); hide the list/HT/small-TTC lines. */
.mv-pdf-modal__price .public-price,
.mv-pdf-modal__price .ht-price,
.mv-pdf-modal__price .small-TTC,
.mv-pdf-modal__price #Peconomie,
.mv-pdf-modal__price .yousave-price{ display:none !important; }
.mv-pdf-modal__price p{ margin:0 !important; padding:0 !important; }
.mv-pdf-modal__price .size-listprice{ font-size:15px !important; font-weight:700 !important; color:#37c75a !important; }
.mv-pdf-modal__price .size-listprice .mention{ font-size:11px !important; color:#37c75a !important; font-weight:600 !important; }
.mv-pdf-modal__actions{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.mv-pdf-modal__dl{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border:0;
    border-radius:6px;
    background:#3a4046;
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}
.mv-pdf-modal__dl:hover{ background:#4a525a; color:#fff; }
.mv-pdf-modal__dl svg{ width:16px; height:16px; flex:0 0 auto; }
.mv-pdf-modal__close{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#cfd3d7;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.mv-pdf-modal__close:hover{ background:#3a4046; color:#fff; }
.mv-pdf-modal__frame{
    flex:1 1 auto;
    width:100%;
    border:0;
    background:#525659;
}

/* =====================================================================
   MEGA MENU — DEDICATED COLORS  (set in Admin > Configuration > Menu Items)
   ---------------------------------------------------------------------
   The mega menu (bar + top items + dropdown panels) is driven ONLY by the
   Menu color pickers on the Menu Items page, which emit these
   mega-menu-only CSS variables:
     --site-menu-bar-start / --site-menu-bar-end  bar gradient + item hover + panel top-border + bullets
     --site-menu-text                             top item text (+ its hover text)
     --site-menu-panel-bg                         dropdown background + panel link-hover bg
     --site-menu-link / --site-menu-link-hover    dropdown link text / hover text
     --site-menu-border                           dropdown border + heading separators
   NOTHING else on the site reads these vars, so changing them affects ONLY
   the mega menu — not buttons, the site header, the category-filter
   headers, side-menu headers, etc.

   Why this block exists: a static "blue header" rule in styles.css
   hard-painted the #header-menu BAR (and forced white top text) and shared
   that colour with the criteria / side-menu / homepage / suggested headers,
   which overrode the Menu settings for the bar. Here we re-point the BAR +
   top text at the dedicated Menu vars and win via load order (custom.css
   loads last). The other "blue header" elements are left untouched, so the
   bar is now fully independent. Desktop only (min-width:1201px) so the
   mobile drawer keeps its dark-on-white text.
   ===================================================================== */
@media (min-width:1201px){
    /* Bar background -> dedicated Menu gradient (was the shared blue-header gradient) */
    #header-menu{
        background:linear-gradient(to bottom, var(--site-menu-bar-start,#497bae), var(--site-menu-bar-end,#396b9e)) !important;
    }
    #header-menu > table{ background:transparent !important; }

    /* Top-level item text -> dedicated Menu text colour (was forced #fff) */
    #header-menu > a,
    #header-menu .mv-mm-top,
    .mv-megamenu .mv-mm-top{
        color:var(--site-menu-text,#fff) !important;
    }

    /* Top item hover -> its OWN dedicated hover colours (Menu Items: "Couleur survol"),
       falling back to bar-end / menu text when unset so today's look is preserved. */
    .mv-megamenu .mv-mm-item:hover > .mv-mm-top{
        background:var(--site-menu-hover-bg,var(--site-menu-bar-end,#396b9e)) !important;
        color:var(--site-menu-hover-text,var(--site-menu-text,#fff)) !important;
    }
}

/* ============================================================================
   Manufacturer logo — canonical display size EVERYWHERE: fit within 92x30,
   aspect-ratio preserved (no forced box, no stretch). Overrides the managed
   styles.css rule (fixed 90x30) for the product-detail icon, the list/grid row
   icons and the detailed-list "band" header. custom.css loads after styles.css,
   so the equal-specificity selectors below win. The small card-overlay chip
   (.mv-list-logo, LOCKED 80x24) is intentionally left out.
   ============================================================================ */
img.manufacturer-icon,
.manufacturer-icon img,
.products_header img,
.products_header a img,
#manufacturer-icon img,
.manufacturericon img{
    width:auto !important;
    height:auto !important;
    max-width:92px !important;
    max-height:30px !important;
    object-fit:contain !important;
}

/* Quick View button: on hover, solid white background (no transparency) + shadow. */
.mv-quickview-trigger:hover{ background: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; }

/* Admin edit pencil icon — SVG replaces the 404 editBlock.png */
.editBlock {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23444'/%3E%3Cpath d='M6 16.5V19h2.5l7.37-7.37-2.5-2.5L6 16.5zm11.81-6.81c.26-.26.26-.68 0-.94l-1.56-1.56a.664.664 0 0 0-.94 0l-1.22 1.22 2.5 2.5 1.22-1.22z'/%3E%3C/svg%3E") no-repeat scroll center center transparent !important;
    background-size: contain !important;
}
/* Category/product list: the admin edit pencil sits BEHIND the product image
   (image link is z-index:2) so it doesn't cover the product photo. */
.cell-product .editBlock, .product-line .editBlock, .detailedList .editBlock {
    z-index: 1;
}

/* ===== MV-163 Product Model Family — PDP size-tile selector (Amazon-style, above stock) ===== */
.mv-family { margin: 10px 0; }
.mv-family-head { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 6px; }
.mv-family-head .mv-family-cur { font-weight: 700; }
.mv-family-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
/* Amazon "twister" buttons: rounded, light-gray border, soft shadow, accent when selected */
.mv-family-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 66px; padding: 7px 12px; border: 1px solid #d5d9d9; border-radius: 8px;
    background: #fff; text-decoration: none; color: #0f1111; text-align: center; line-height: 1.15;
    box-shadow: 0 1px 2px rgba(15,17,17,.06); transition: border-color .12s, box-shadow .12s;
}
a.mv-family-tile:hover { border-color: var(--site-primary-hover, var(--site-primary, #007185)); box-shadow: 0 2px 5px rgba(15,17,17,.12); }
.mv-family-tile.is-current {
    border: 2px solid var(--site-primary-hover, var(--site-primary, #007185));
    box-shadow: 0 0 0 1px var(--site-primary-hover, var(--site-primary, #007185)); cursor: default;
}
.mv-family-size { font-size: 32px; font-weight: 700; line-height: 1.1; }
.mv-family-price { display: block; margin-top: 3px; }
/* TTC (with-VAT) on top, HT (pre-tax) below */
.mv-family-ttc { display: block; line-height: 1.2; font-size: 11px; font-weight: 600; color: var(--site-price, #27ae60); white-space: nowrap; }
.mv-family-ht  { display: block; line-height: 1.2; font-size: 11px; font-weight: 400; color: #888; white-space: nowrap; }
/* TTC / HT label: smaller than the price digits, on the baseline (no superscript) */
.mv-family-ttc .mv-fam-lbl, .mv-family-ht .mv-fam-lbl { font-size: 0.6em; vertical-align: baseline; line-height: inherit; font-weight: 400; color: inherit; margin-left: 2px; }
@media (max-width: 600px) {
    .mv-family-tile { min-width: 56px; padding: 6px 9px; }
}