/* ============================================================================
   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;
}
/* 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: 210px !important;
    min-width: 0 !important;
    max-width: 210px !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;
    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 */
}

/* --- 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: 999 !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 {
    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; }

/* 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: 11px margin all round. The #homepagecolumn1
   selector + !important override styles.css's conditional
   `#homepagecolumn1 .sf-cb-custnotif__body:first-child { margin-top:0 !important }`
   (equal specificity, custom.css loads later) so the top margin isn't zeroed. */
.sf-cb-custnotif__body,
#homepagecolumn1 .sf-cb-custnotif__body:first-child {
    margin: 11px !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;
}

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

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