/* ============================================================================
   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; }

/* "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).
   The theme already does this inside its <=992px block; desktop just lacked it.
   Safe with the sticky #header-menu: it sticks to the viewport, not an inner box. */
html, body {
    overflow-x: hidden !important;
}

/* 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;
}

#productContent #iconPromo {
    display: inline-flex !important;
    align-items: start;
    justify-content: start;
    width: 254px !important;
    min-width: 0 !important;
    max-width: 254px !important;
    height: 42px;
    background-size: 100% 100% !important;
    color: #fff !important;
    font-size: 23px !important;
    font-weight: bold !important;
    padding: 0 6px 0 100px !important;
    box-sizing: border-box !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    border-radius: 0 !important;
    margin: 4px 0 8px !important;
    margin-left: 28px !important;
    line-height: 28px !important;
    z-index: 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 {
    transform: translateY(-3px);
    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 {
    opacity: 1 !important;
    transform: scale(1.04) !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;
}
.product-description .mv-prod-box {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 14px 16px 16px;
    margin: 0 0 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.product-description .mv-prod-box > h3 {
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 2px solid #f0a020;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}
.product-description .mv-prod-box ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}
.product-description .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;
}

/* /fabricants (and any page where the left rail #homepagecolumn1 is empty/absent):
   the theme reserves 220px for the rail (#homepagecolumn2 width:calc(100% - 220px)),
   so the main column stops short of the page edge. The theme HAS a full-width rule
   for this, but it's written as `:not(:has(*))` — nested :has inside :not, which the
   browser rejects as an INVALID selector, so the whole rule is dropped at parse time.
   This is the valid equivalent: full width when the rail has no child elements. The
   real homepage (rail populated with sidemenus) is NOT matched, so it keeps its layout. */
.homepage:not(:has(#homepagecolumn1 > *)) #homepagecolumn2 {
    width: 100% !important;
    margin-left: 0 !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;
}

/* 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;
    align-items: center;
    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; }

/* Discount badge vertical position. */
.product-reduceprice { top: 12% !important; }

/* 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;
}

#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;
}

/* 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);
    transform: translateY(-1px);
}
/* 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: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#rightContent #titleDesc > .clear { display: none; }
#rightContent #titleDesc #pricewrapper { order: 1; }
#rightContent #titleDesc #addToCart { order: 2; }

/* 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;
        align-items: center;
        margin-top: 14px;
        margin-bottom: 16px;
    }
    #productMain > #imgProduct {
        width: 45%;
    }
    #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;}}

#iconPromo {
    background: linear-gradient(135deg, #e8433a 0%, #c0392b 100%);
    height: 47px;
    width: 252px;
    /* Stick to the top-left corner of #productContent at all times (the box is
       its positioned ancestor; promo tag moved inside it in product-default.html). */
    position: absolute;
    top: -11px;
    left: -6px;
    z-index: 3;
    padding-left: 100px;
    font-weight: bold;
    font-size: 28px;
    line-height: 30px;
    color: White;
    border-radius: 0 4px 4px 0;
}

/* ============================================================================
   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; }
}

/* ============================================================================
   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: auto !important;       /* override the plugin's inline px width */
        max-width: none !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;
    }
    /* 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 (not below a stretched gap). .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: with align-items:start, cards that carry an extra price line
   (struck-through old price + discount badge) are a touch taller than single-price
   cards, so resting bottoms can be slightly ragged. If that reads as uneven, the
   fix is a min-height on the price block to equalize — left out for now.
   ============================================================================ */
@media (hover: hover) {
    .detailedList .cell-product .block-addtocart {
        display: block;            /* override styles.css 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);
                                         also beats styles.css:11174 margin-top:auto !important */
        padding: 6px 18px 16px !important;   /* side padding insets the button from the
                                                card edges; extra bottom padding too */
        background: #fff;
        border: 1px solid #cfd4da;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .18);
        z-index: 30;
        visibility: hidden;
        opacity: 0;
        transition: opacity .12s ease;
        pointer-events: none;      /* don't block the row below while hidden */
    }
    /* 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 is required:
       styles.css's `:is(.detailedList,#list) .cell-product{border-radius:10px}` has
       specificity (1,1,0) (the :is() counts #list's id) and would otherwise win over
       this selector's (0,3,0). */
    .detailedList .cell-product:hover,
    .detailedList .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;
    }
    .detailedList .cell-product:hover .block-addtocart,
    .detailedList .cell-product:focus-within .block-addtocart {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

#list:has(.cell-product) {
    align-items: start !important;
}

/* ============================================================================
   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;
}

/* 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;
}

/* 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. */
#list:has(.cell-product) {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
}

/* 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;
}

/* 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 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;
}

/* ============================================================================
   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;
}