/* ============================================================================
   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; margin-top: 4px !important; padding-left: 8px; }
#rightContent .mv-product-reviews .mv-product-reviews__label { font-weight: bold !important; margin-right: 6px; }
#rightContent .mv-product-reviews #review.sf-ui-pstatus__review { display: inline-block !important; margin-top: 0 !important; vertical-align: middle; }

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

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

/* ============================================================================
   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) --------- */
/* styles.css:2562 sets .message height:100%, but its positioned ancestor
   #whatsapp-bloc (position:fixed, no height) is only as tall as the 55px launcher
   button — so the bubble collapsed and clipped the avatar + name + text.
   Let it size to its content instead. */
#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;
}