/* =========================================================================
   TABLE OF CONTENTS
   -------------------------------------------------------------------------
   Navigation index for this merged sheet. Sections are listed in CASCADE
   ORDER (top = loaded first). To jump, Ctrl-F the quoted title - quoted
   titles match the in-file section comments verbatim.

   REORG RULES (full rationale in the "MERGED THEME STYLESHEET" banner below):
     - PART A loads BEFORE PART B. Never move a rule across the A/B seam.
     - Within a part, source order can decide equal-specificity collisions;
       do not reorder competing rules.
     - The "MV-SITE-THEME" block stays LAST and is admin-generated - never
       edit between its markers.

   =========================================================================
   PART A  .  STOREFRONT  (externalized inline styles; namespaced prefixes)
   =========================================================================
   [A1] components.css       - Razor views                      prefix  sf-
        "1. TOKENS"                 :root tokens (layout/space/font/colour/motion)
        "---- Category"             Category grid/list/*withsubs      [DEAD views]
        "---- Cart / QuickCart"     Cart page + QuickCart iframe popup
        "---- Checkout"             Checkout + payment-method tables
        "---- Contact"              Contact form
        "---- Contact-us page"      Home/ + Contact/ ContactUs
        "---- EmailFriend popup"    EmailFriend + EmailVendor popups
        "---- ProductReviews popup" review-submit popup
        "---- ProductReviews list"  TopReviews + _SingleReview
        "---- EstimateShipping popup"
        "---- Products cross-sell accessories"                        [DEAD]
        "---- Products: replaced-product card"   (LIVE)
        "---- Products: detail page"             Index.cshtml         [DEAD/edge]
        "---- Products: detailed-list row"                            [DEAD]
        "---- Products: grid cell"                                    [DEAD]
        "---- Revendeur reseller export page"    (LIVE)
        "---- SIPS checkout"                     (LIVE)
        "---- Shared partials"      _ViewOrder/_OrderPaymentSummary/pagers
        "---- Home/Manufacturers"                                     [DEAD]
        "---- Home/Tarifs"                                            [DEAD/broken]
        "---- RssFeed list page"                 (LIVE)
        "---- Search results page"               Search/Index         [DEAD]
        "---- Kits listing page"                                      [DEAD]
        "---- Kit detail page"                                        [DEAD]
        "---- Category grid page"     Category/Grid + DEVIS print      [DEAD]
        "5. UTILITIES"              sf- helpers (text/float/display/spacing/...)

   [A2] content-blocks.css   - content-block render controllers  prefix  sf-cb-
        local :root (--sf-cb-* tokens), then one section per controller:
        ImageListRotator, ManufacturersSlider, ProductSlider, ListRotator,
        TreeCategoryFilter, TreeCategoryMenu, WebCallBack, VolumeDiscounts,
        CustomerNotification, SameProductCategory, ProductSliderShorty,
        LastProductsViewed, ProductGrid, SelectProductGrid, TreeCategoryMenuNew,
        SubCategoryIcons (key othercards), MailingListSignupFooter, SearchBox,
        PriceRange, EmployeesRotator, Manufacturers, NumberVisitors,
        ImageRotatorSimple, ComplementaryProducts, HtmlBlock2.

   [A3] storefront-chrome.css - tag handlers / helpers / controllers prefix sf-ui-
        "A . LANGUAGE / I18N"       CurrentLanguageFlag, ChangeLanguage
        B  product page             ProductFiles, ProductReviews, ProductInfo,
                                    ProductVoice, ProductRelatedItems
        C  product list bar         ProductFilter, BaseProductsDisplayHandler
        D  search                   SearchForm, SearchFilter
        E  socials                  Socials
        F  newsletter               NewsLetter
        G  manufacturers            ManufacturerList / ManufacturerFilter
        H  shared utils             ProductUtils, TarifsUtils, CategoryCriteriaUtils
        J  controllers              Kits / Ajax / Revendeur message snippets
        K  cleanup                  ProductShare, ProductsSuggested, dealer icon

   =========================================================================
   PART B  .  ORIGINAL THEME  (legacy flat sheet)
   =========================================================================
        element reset + "body"      base reset / typography
        RESPONSIVE box-sizing
        site shell: "Header Top", "Header", "Header menu",
                    "Main Content Wrapper", "Footer", "Border bottom"
        "Left nav" / left-nav styles
        "ListRotator", "Flash Messages", "General Text", "Homepage"
        "Shopping Cart"
        "Checkout Page"
        "Columns"
        "Brands"
        "Column Blocks", "Column Menu Lists"
        "Pagination"                (1st occurrence - category/list pager)
        "Simple & Bulk Order Lists", "Details List", "With Subs"
        "Product Pages", "Product Prices", "Product Controls Box"
        "Search Results", "Product Content", "Select Product Viewer"
        "Product Grid", "Product List", "Display style"
        "Carousel"
        "Cart Page"
        "Misc", "Row Elements", "Pop Over", "Customer Login"
        "Tree Category Menu", "Categories Block", "Category Criteria"
        "Revendeur", "Country Select", "Loading"
        "Product Slider2", "Product ToolTip", "Advanced search", "Buttons"
        "Comparator", "Kits", "RSS Feed", "Grid cells", "Autocomplete"
        "Customer Notification", "Add to cart / Recalculate buttons"
        "Manufacturer filter"
        "Pagination"                (2nd occurrence - duplicate name)
        "HP blocks", "Slideshow", "Misc carousel items"
        "Product replace style", "Category grid sub template"
        "Single product display", "Tabs", "Reviews", "Featured products"
        "Category HP"
        "RESPONSIVE BREAKPOINTS"    @media max-width:1280px / 1050px
        "MV-SITE-THEME"             admin auto-generated - DO NOT EDIT (file end)
   ========================================================================= */

/* =========================================================================
   MERGED THEME STYLESHEET
   -------------------------------------------------------------------------
   This file now contains, IN THIS ORDER:

     PART A  storefront.css   (was Store/Content/storefront.css, previously
             wired via <sys:css mode="system" file="content/storefront.css"/>
             in templates/parts/full-header.html - that line is now removed).

     PART B  the ORIGINAL theme styles.css (starts at the PART B banner below).

   WHY PREPENDED: storefront.css used to load BEFORE this theme styles.css, so
   for equal-specificity collisions the theme won on source order, and every
   sf-/sf-cb-/sf-ui- rule was authored against that ordering. Keeping the
   storefront block ABOVE the original theme block (incl. its element reset)
   reproduces that cascade byte-for-byte. DO NOT move it below PART B.

   NOTE: components.css / content-blocks.css / storefront-chrome.css remain on
   disk - four Layout=null iframe popups (EstimateShipping, EmailVendor,
   EmailFriend, ProductReviewPopup) still <link> components.css directly and
   never load this theme file.
   ========================================================================= */

/* =========================================================================
   storefront.css  -  MERGED storefront stylesheet (single wired-in file)
   -------------------------------------------------------------------------
   This file is the concatenation, IN LOAD ORDER, of the three storefront
   stylesheets that used to be wired into the active theme separately:

       PART 1  components.css        Razor views (Store/Views/**)      sf-*
       PART 2  content-blocks.css    render controllers                sf-cb-*
       PART 3  storefront-chrome.css tag handlers / helpers / ctrls    sf-ui-*

   Only this file is now referenced from the active theme's
   templates/parts/full-header.html (one <sys:css> line instead of three).
   It still loads BEFORE the theme styles.css, so every "loads BEFORE
   styles.css" cascade note inside the parts below remains correct.

   WHY THE MERGE IS CASCADE-SAFE
     - The three parts use disjoint class prefixes (sf- / sf-cb- / sf-ui-)
       and otherwise-unique scoped IDs, so no selector collides across parts.
     - The parts appear here in the exact order the browser used to load the
       three <link>/<sys:css> tags, so the rule order (and thus the cascade)
       is byte-identical to the previous three-file setup.
     - Both :root token blocks (PART 1 global tokens + PART 2 sf-cb local
       tokens) are preserved; custom-property names do not collide and
       resolve independently of declaration order.

   NOTE ON THE ORIGINAL FILES
     components.css / content-blocks.css / storefront-chrome.css are kept in
     this folder. They are NO LONGER wired into full-header.html, but four
     iframe popup views still <link> components.css directly
     (EstimateShipping, EmailVendor, EmailFriend, ProductReviewPopup), so it
     must stay in place. Edit THIS file for changes that affect normal
     storefront pages; the per-part headers/banners below are unchanged from
     their source files so existing section references still apply.
   ========================================================================= */


/* #########################################################################
   #                                                                       #
   #   PART 1  ·  components.css   ·   Razor views   ·   prefix sf-         #
   #                                                                       #
   ######################################################################### */
/* =========================================================================
   components.css  -  Storefront view components + design tokens
   -------------------------------------------------------------------------
   Global stylesheet consumed by Razor views under Store/Views/. Wired into
   the active theme only (theme-MV-2026) via
   templates/parts/full-header.html.

   Owns the token vocabulary (:root). content-blocks.css inherits these
   tokens; do not redeclare them there.

   Class prefix: sf-*  (so we never collide with the existing theme
   styles.css, system.css, or marocdata.js selectors).

   See docs/storefront-css-plan.md sections 4.A and 4.1.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* ---- Layout ---------------------------------------------------- */
    --site-max-width:    1430px;   /* matches in-flight shell work cap */
    --content-max-width: 1170px;
    --product-box-width: 804px;    /* product-detail content box + desc/review tabs (shared).
                                      MUST equal the slidingtabs `totalWidth` in
                                      js/slidingtabs/jquery.slidingtabs.config.js (804). */
    --gutter:            15px;
    --border-radius:     5px;
    --radius-sm:         3px;

    /* ---- Spacing (4 px scale) ------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* ---- Typography ----------------------------------------------- */
    --font-xs: 11px;   /* body baseline today (legacy table chrome)   */
    --font-sm: 12px;
    --font-md: 13px;   /* current main-content baseline               */
    --font-lg: 16px;
    --font-xl: 20px;
    --font-family-base: Arial, Verdana, Helvetica, sans-serif;
    --line-height-base: 1.385;
    --font-weight-bold: 700;   /* == bold; the only non-normal weight in use */

    /* ---- Colour (sampled from theme-47b.../styles.css) ----------- */
    --color-text:        #000000;   /* body { color: #000 }                  */
    --color-muted:       #666666;   /* secondary text / footer copy          */
    --color-link:        #444444;   /* a { color: #444 }                     */
    --color-link-hover:  #3399ff;   /* a:hover { color: #3399FF }            */
    --color-primary:     #ff9900;   /* MarocVentes orange (brand)            */
    --color-accent:      #bb5c12;   /* darker orange (CTA-pressed variant)   */
    --color-border:      #cdcdcd;   /* dominant border colour in the theme   */
    --color-bg-page:     #f7f8fc;   /* body { background: #F7F8FC }          */
    --color-bg-muted:    #f6f6f6;   /* light surface (cards, panels)         */
    --color-success:     #28a745;   /* no green in current theme - default   */
    --color-warning:     #ffc107;   /* no yellow in current theme - default  */
    --color-danger:      #cc0000;   /* matches existing #c00 usage           */

    /* ---- Motion --------------------------------------------------- */
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 500ms;
}


/* -------------------------------------------------------------------------
   2. RESETS
   -------------------------------------------------------------------------
   Kept intentionally minimal - the theme styles.css loads AFTER this file
   and is the authority on resets/normalize. Add a rule here only when a
   view-level component class needs a baseline the theme doesn't provide.
   ------------------------------------------------------------------------- */
/* (none yet) */


/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS                       (populated from commit 5 onward)
   -------------------------------------------------------------------------
   .sf-container, .sf-row, .sf-row--tight, ...
   ------------------------------------------------------------------------- */
/* (empty - filled as views migrate) */


/* -------------------------------------------------------------------------
   4. VIEW COMPONENT CLASSES               (populated from commit 6A onward)
   -------------------------------------------------------------------------
   .sf-cart-row, .sf-product-meta, .sf-form-field, .sf-pager,
   .sf-newsletter, .sf-review, ...
   ------------------------------------------------------------------------- */

/* ---- Category (Grid / List / *WithSubs) ---------------------------- */
/* Decorative corner images sitting inside .title-category. The theme's
   .title-category supplies the bordered orange bar; these classes only
   position the small corner GIFs against it. */
.sf-title-corner {
    position: absolute;
    top: -1px;
}
.sf-title-corner--tl { left:  -1px; float: left;  }
.sf-title-corner--tr { right: -1px; float: right; }

/* Loading text shown under the .imgLoading spinner on category/search
   product grids. Overrides the theme's .text-loading font-size and adds
   vertical spacing under the spinner image. */
.sf-loading-text {
    font-size:  var(--font-md);   /* 13px */
    margin-top: var(--space-5);   /* 20px */
}

/* Bottom card-divider used under the sub-category grid on
   ListWithSubs / GridWithSubs. A 1 px bottom line with two small
   3x3 corner GIFs (border_bl.gif / border_br.gif) anchored to
   the bottom-left and bottom-right ends. */
.sf-card-divider {
    position:      relative;
    height:        2px;
    margin-top:    -3px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
}
.sf-card-divider__img {
    position: absolute;
    bottom:   -1px;
}
.sf-card-divider__img--l { float: left;                }
.sf-card-divider__img--r { float: right; right: 0;     }

/* Criteria-detailed-list faceted block. Sits above the product list on
   Category/CriteriaDetailedList.cshtml. The card chrome (border, corner
   GIFs, body grid) is owned by theme styles.css `div.categories-block`;
   these classes only add the inline-style overrides that the view had. */
.sf-criteria-block {
    margin-top:    10px;
    margin-bottom: 10px;
}
.sf-criteria-block__body {
    margin-left: 46px;
}

/* ---- Cart / QuickCart popup ---------------------------------------- */
/* The quicklook cart (Cart/QuickCart.cshtml) renders inside an iframe popup
   (Layout = null). These classes carry the popup's fixed-width chrome that
   the theme styles.css does not own. The pixel widths/offsets are
   popup-layout artifacts tied to the 670px frame, not design tokens. */
.sf-quickcart-popup {
    width:      670px;
    padding:    10px;
    background: #fff;
}
.sf-quickcart-popup__close {
    margin-left: 550px;   /* right-aligns the close link inside the 670px frame */
}
/* Coupon panel inside the QuickCart popup. The #cartcoupons border is scoped
   to #cart-container so it out-specifies the theme's
   #cartcoupons{border-top/bottom:1px solid #ddd} rule (theme styles.css loads
   after components.css) and gives the popup coupon box a full box border. */
#cart-container #cartcoupons {
    border: 1px solid #ddd;
}
.sf-quickcart-coupon-input {
    height: 24px;
    color:  #666;
}
.sf-quickcart-coupon-table {
    width:            658px;
    margin:           10px 0 -10px -10px;
    padding:          10px;
    border-top:       1px solid #ddd;
    background-color: #fff;
}
.sf-quickcart-coupon-code {
    width:       206px;
    font-weight: bold;
}
/* Popup-only spacing for shared cart classes. .cartheader and
   .productdeletecolumn also appear on the full Cart/Index page (which keeps
   its own values), so these overrides are scoped to #cart-container. */
#cart-container .cartheader {
    margin-top: 5px;
}
#cart-container .productdeletecolumn {
    width: 30px;
}
/* Margin resets that override the theme's #cartfooter{margin:10px 0 0 0} and
   #cartactions{margin-top:20px}. Scoped to #cart-container so they out-specify
   the theme (0,2,0 > 0,1,0) and apply only inside the popup; the full
   Cart/Index page has no such override and keeps the theme defaults. */
#cart-container #cartfooter {
    margin-top: 0;
}
#cart-container #cartactions {
    margin-top: 0;
}
/* Quantity input width on the full Cart/Index page only. The same .qty-cart
   input also appears in the QuickCart popup, where it has no explicit width
   and inherits the theme default — so this is its own class applied only on
   Index, not a .qty-cart rule (which would leak into the popup). */
.sf-cart-qty {
    width: 40px;
}
/* Line-item grid sizing, formerly the table's width="100%"/cellspacing="0"
   HTML attributes (shared by Cart/Index and the QuickCart popup). cellpadding
   was already a no-op — theme `.cartproductgrid td`/`th` set their own padding.
   border-spacing:0 reproduces cellspacing="0" exactly: it keeps the default
   `separate` border model with zero gaps (NOT border-collapse, which would
   change how the `.cartproductgrid td` top-border renders). Scoped to
   #cartcontainer so it cannot reach the order grid in _ViewOrderItems.cshtml,
   which lives outside #cartcontainer and keeps its own attributes. */
#cartcontainer .cartproductgrid {
    width:          100%;
    border-spacing: 0;
}
/* Cart/Index line-item column widths, formerly <th width="94px"/"45px">. The
   QuickCart popup grid has no per-column widths, so these are plain classes
   applied only on Index's <th> (like .sf-cart-qty) rather than a shared rule.
   min-width (not a fixed width) floors each column at its content size — the
   75px thumbnail + 6px cell padding for the image col, the delete icon for the
   remove col — so neither collapses, while the flexible product-details column
   absorbs any extra space at wider widths. NOTE: this is a de-hardcoding /
   narrow-width improvement only; it is NOT mobile-responsive. The active theme
   has no viewport meta and no @media queries, and phones are served by the
   separate /mobile/ site (Areas/Mobile, MobileCart) — see Progress Log 23A. */
.sf-cart-col-image  { min-width: 90px; }
.sf-cart-col-remove { min-width: 40px; }
/* Totals table spacing, formerly border="0" cellspacing="4" cellpadding="3" on
   the #carttotals <table> (shared by both cart views). The theme only floats
   this table — no spacing reset — so these restore the exact 4px cell gap and
   3px cell padding. border="0" was a visual no-op (no default table border).
   border-spacing needs the default `separate` model, which the theme leaves
   intact. #carttotals is cart-only, so no extra scoping is needed. */
#carttotals table {
    border-spacing: 4px;
}
#carttotals table td {
    padding: 3px;
}

/* ---- Checkout (Checkout/Index.cshtml) ------------------------------- */
/* The billing address block wraps an absolutely-positioned .disabled-td
   overlay (theme styles.css), so it needs position:relative as the
   containing block. Formerly inline style="position:relative". ID selector,
   no competing theme rule. Checkout.js only .show()/.hide()s this element
   (display), so the positioning is unaffected. */
#billingwrapper {
    position: relative;
}
/* Height of the password row's field cell in the login form table, formerly
   inline style="height:34px" on a <td class="formfield">. The theme's
   td.formfield sets no height, so this is its own scoped class applied only
   to that cell. */
.sf-checkout-pwd-field {
    height: 34px;
}
/* Login form table spacing, formerly id="loginformtable" cellspacing="0"
   cellpadding="3". border-spacing:0 = cellspacing="0". cellpadding=3 gave
   every cell 3px on all sides; the theme's td.formlabel{padding-right:5px}
   overrode only the right edge. #loginformtable td reproduces the 3px, and
   the formlabel rule re-asserts the 5px right edge the shorthand would
   otherwise clobber (id+class out-specifies the id+element). Pixel-identical. */
#loginformtable {
    border-spacing: 0;
}
#loginformtable td {
    padding: 3px;
}
#loginformtable td.formlabel {
    padding-right: 5px;
}
/* The two address-choice columns on #shipping-address / #billing-address,
   formerly <td width="50%" align="center">. width:50% splits the row evenly.
   The HTML align="center" attribute centers BOTH inline content and the
   fixed-width block children (.address-choose 280px, .existed-addresses
   290px) — browsers map td[align=center] to a special center value that
   plain text-align:center does NOT reproduce for blocks. So text-align:center
   covers inline content and margin:auto re-centers the fixed-width blocks,
   together matching the old attribute. (The inner .address-table partial
   already centers via the theme's margin:1em auto.) */
.sf-checkout-addr-col {
    width:      50%;
    text-align: center;
}
.sf-checkout-addr-col .address-choose,
.sf-checkout-addr-col .existed-addresses {
    margin-left:  auto;
    margin-right: auto;
}
/* Payment-methods table (DisplayPaymentMethods.cshtml), formerly border="0"
   cellspacing="0" cellpadding="3" width="100%". Rendered as a server-side
   partial inside the checkout page, so it inherits components.css. border="0"
   was a no-op; the others map directly. The radio cells keep the top alignment
   that was carried by valign="top". */
.sf-paymethods-table {
    width:          100%;
    border-spacing: 0;
}
.sf-paymethods-table td {
    padding: 3px;
}
.sf-paymethods-table .radiobuttoncol {
    vertical-align: top;
}
/* PayPal mark + caption in the payment list. <img align="left"> floated the
   logo (align=left maps to float:left); style="margin-right:7px" spaced it
   from the caption text. */
.sf-paypal-mark {
    float:        left;
    margin-right: 7px;
}
.sf-paypal-note {
    font-size:   11px;
    font-family: Arial, Verdana;
}
/* CMI surcharge row injected by the MarocTelecommerce payment script into the
   order-totals table. The injected <td>s already carry .cmilabel / .totalcmi;
   these rules replace the inline styles the script used to write on them
   (font-weight / text-align), matching the sibling .totaltax row. */
.cmilabel {
    font-weight: bold;
}
.totalcmi {
    text-align: right;
}
/* Address form table (_CheckoutAddress.cshtml) and credit-card input table
   (_CreditCardInput.cshtml), formerly border="0" cellspacing="0" cellpadding=
   "3"/"2". border="0" was a no-op, and the cellpadding is also a no-op here —
   the theme's `.checkout .address-table td, .checkout .creditcardinput td
   {padding:1px 3px}` overrides it (all live hosts — Checkout/Index,
   PaymentError, and the DisplayPaymentMethods partial inside them — wrap the
   markup in .checkout). Only cellspacing="0" was functional → reproduced as
   border-spacing:0, grouped + scoped to .checkout exactly like the theme's own
   `.checkout .address-table, .checkout .creditcardinput table` rule. (Both
   partials have their OWN Areas/Mobile copies, so these desktop-only rules —
   and the fact that components.css is desktop-theme-only — are safe.) */
.checkout .address-table,
.checkout .creditcardinput table {
    border-spacing: 0;
}
/* MarocTelecommerce trust-badge links (_MarocTelecommerce.cshtml), formerly
   inline style="background:none" on each <a>. Those badges render in the
   checkout payment block (.sidemenu > .body > .section-payment), where the
   theme's `.sidemenu .body a` (styles.css ~1641) paints a sidemenu_item_bg.png
   bullet behind every link — the inline style cancelled ONLY that background so
   the logo images aren't marred, leaving the theme's margin/padding/display/
   text-decoration on those links intact. Reproduced by scoping to .MTC and
   overriding background only; .sidemenu .body .MTC a (0,0,3,1) out-specifies
   the theme's .sidemenu .body a (0,0,2,1), so it wins despite components.css
   loading first. (On PaymentError the badges sit in .section-payment, NOT
   .sidemenu .body, so the bullet never applies and this rule simply no-matches
   — correct either way.) */
.sidemenu .body .MTC a {
    background: none;
}

/* ---- Contact (Index.cshtml) ----------------------------------------- */
/* Formerly a <style> block inside the view body. Selectors are kept
   verbatim (NOT renamed to sf-*) because they target the controller-
   rendered markup contract: ContactController.RenderContactForm() emits
   #contactusformtable / .formfield / .forminput.contactinput / .msg-error,
   and the view wraps them in .contactusinfo / .contactform. No other file
   defines these classes, and every rule keeps its original descendant/ID
   specificity (which out-weighs any generic theme .forminput/.msg-error),
   so moving them ahead of the theme styles.css in load order is cascade-
   safe. Values left raw — none map exactly to a token (#F7F7F7 != muted
   #f6f6f6, 2px radius != --radius-sm 3px, 5/6/10px off the 4px scale).
   Vendor-prefixed border-radius kept for byte-identical legacy render.
   The empty `.contactform .formfield{}` and the commented-out .contactform
   border from the original block were no-ops and dropped. */
.contactusinfo {
    background-color:      #F7F7F7;
    color:                 #333;
    border:                solid 1px #B4B4B4;
    padding:               0px;
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    border-radius:         2px;
    margin-bottom:         5px;
    margin-top:            6px;
}
.contactusinfo .prehtmltext {
    padding: 10px;
}
.contactform {
    background-color: #FFF;
    border-top:       solid 1px #B4B4B4;
    padding:          10px;
}
.contactform .forminput {
    width:  200px;
    height: 18px;
}
.contactform #contactusformtable {
    border-spacing: 4px;
}
.contactform .msg-error {
    display:        inline-block;
    color:          #DD4B39;
    vertical-align: middle;
    margin-left:    4px;
}

/* ---- Contact-us page (Home/ContactUs.cshtml + Contact/ContactUs.cshtml) -- */
/* Both views shipped the SAME in-body <style> block (bare `h1` page-wide + bare
   `.msg-error`) and the same fieldset border inline; both now add .sf-contactus
   to their <div id="content"> and share these rules. The notes below describe
   the original Home/ContactUs block — Contact/ContactUs is byte-identical:
   - the page's only <h1>s are inside #content (the title + any ContentColumn
     blocks); the theme header/footer chrome has NO <h1> (theme h1s are all
     product/kit `#productTitle`), so `.sf-contactus h1` covers exactly what the
     bare `h1` did — byte-identical.
   - the H1 background url was relative (`../Images/...`, resolved vs the page
     URL); rewritten absolute (`/Images/...`) so it resolves identically from
     /Content/components.css. Path kept verbatim — it points at the INACTIVE
     theme-bv-voipfrance dir, so the visible result is the #CAE4FF fallback.
   - `.msg-error`: the in-page bare rule was already out-specified by the global
     `.contactform .msg-error` (32A) for display/color (every msg-error span is
     inside the .contactform fieldset); its ONLY surviving effect was
     margin-top:5px, so that alone is reproduced — keeping it off the
     same-specificity tie that would otherwise flip display back to block.
   - the fieldset's inline `border:1px solid #DEE3FF;padding:10px` overrode the
     global `.contactform` border-top/padding; reproduced via
     `.sf-contactus .contactform` (out-specifies .contactform like the inline). */
.sf-contactus h1 {
    background:    url('/Images/sites/1/themes/theme-bv-voipfrance/assets/H1_Right.jpg') no-repeat scroll right top #CAE4FF;
    color:         #1D70C0;
    font-size:     1.35em;
    line-height:   1em;
    margin-bottom: 0.5em;
    padding:       5px;
}
.sf-contactus .msg-error {
    margin-top: 5px;
}
.sf-contactus .contactform {
    border:  1px solid #DEE3FF;
    padding: 10px;
}

/* ---- EmailFriend popup (EmailFriend/Index.cshtml) ------------------- */
/* Formerly an in-body <style> block in a standalone Layout=null iframe
   popup (loaded by TopUp). The popup does NOT inherit the theme layout, so
   the view now links this file directly (after the theme styles.css). Every
   rule is scoped under the popup-only wrapper .sf-epf because the popup
   shares selectors with OTHER live pages: the theme styles.css owns
   .messagebox* (styles.css ~1988), and #imgLoading / #popup / .messagebox
   also appear on Search, Products, ProductReviews and EmailVendor. Without
   the wrapper, the genuine overrides here (#imgLoading positioning, and the
   font-weight/vertical-align/margin-top additions on .messagebox .message)
   would leak onto those pages — per-property cascade lets non-conflicting
   declarations through regardless of load order. .sf-epf raises specificity
   above the theme's bare selectors, so the popup wins by specificity (not
   order) and nothing escapes the popup. Values kept verbatim (incl. the
   legacy -moz-* border props) for a byte-identical render. */
.sf-epf #popup {
    background-color: white;
    margin:           15px;
    padding:          5px;
    border:           solid 1px #333;
    padding-left:     0px;
    padding-right:    0px;
}
.sf-epf #popup h3 {
    background:    url("/images/H3.jpg") repeat scroll 0 0 transparent;
    color:         gray;
    border-top:    solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    font-size:     1.2em;
    font-weight:   bold;
    line-height:   1.8em;
    margin:        0;
    padding:       1px 1px 1px 20px;
}
.sf-epf .messagebox {
    width:                     100%;
    -moz-border-bottom-colors: none;
    -moz-border-image:         none;
    -moz-border-left-colors:   none;
    -moz-border-right-colors:  none;
    -moz-border-top-colors:    none;
    background:                none repeat scroll 0 0 #FF9;
    border-color:              #FE3 -moz-use-text-color;
    border-style:              solid none;
    border-width:              1px medium;
    display:                   block;
    margin:                    10px 0;
    padding:                   0 10px;
}
.sf-epf .messagebox ul {
    display: block;
    margin:  0;
    padding: 0;
    width:   100%;
}
.sf-epf .messagebox .errorline {
    clear:      both;
    color:      #333;
    list-style: none outside none;
}
.sf-epf .messagebox li {
    margin:   10px 0;
    overflow: hidden;
    padding:  0;
    width:    100%;
}
.sf-epf .messagebox .icon {
    float:  left;
    margin: 0 8px 0 0;
}
.sf-epf .messagebox .message {
    font-size:      100%;
    line-height:    1.2em;
    margin:         0 5px 0 10px;
    vertical-align: middle;
    margin-top:     8px;
    font-weight:    bold;
}
.sf-epf #imgLoading {
    position:         fixed;
    top:              30%;
    left:             40%;
    width:            60px;
    height:           60px;
    background-color: #FFF;
    padding:          0;
    z-index:          100;
    border:           #333 solid 1px;
    display:          none;
}
.sf-epf #close_popup {
    margin-left: 10px;
}
.sf-epf #write {
    margin-left: 10px;
}
/* Per-element inline style="" attrs from the same popup, scoped under
   .sf-epf. The text-align:left on .formlabel is functional: theme
   styles.css:1825 `td.formlabel` sets text-align:right, and the cell's
   own align="left" attribute is out-prioritised by that CSS — only the
   inline style forced left, so `.sf-epf td.formlabel` (0,0,2,1) reproduces
   it by out-specifying the theme rule. It also covers the submit-row label
   cell (whitespace-only &nbsp; — alignment invisible there, so no visual
   change). `.padded` overrides theme .padded{padding:10px}. The table's
   width="60%" and cellspacing="0" attrs moved here (width / border-spacing
   on .formtable). cellpadding="0" stays an attr: converting it to
   `.formtable td { padding:0 }` (0,0,2,1) would out-specify and wrongly zero
   the theme's td.formlabel padding-right (0,0,1,1). The valign/align cell
   attrs also stay. The .messagebox style="display:none" stays inline — it is
   the initial state the JS slideDown() toggles. */
.sf-epf #tabreviews {
    padding: 0px;
}
.sf-epf .padded {
    padding: 0px;
}
.sf-epf .formtable {
    height:         35%;
    width:          60%;     /* was width="60%"   attr */
    border-spacing: 0;       /* was cellspacing="0" attr */
}
.sf-epf td.formlabel {
    text-align: left;
}
.sf-epf #submitbutton,
.sf-epf #submitbuttonlocal {   /* EmailVendor popup names the button #submitbuttonlocal */
    padding: 0px;
}
/* EmailVendor-only: the subject input carried inline width:100% (overriding
   the theme's .forminput). `.sf-epf #subject` (0,1,1,0) reproduces it. */
.sf-epf #subject {
    width: 100%;
}

/* ---- ProductReviews popup (ProductReviews/ProductReviewPopup.cshtml) ----- */
/* The third TopUp popup, but it renders through _PopupLayout.cshtml (not
   Layout=null) and is NOT byte-identical to the EmailFriend/EmailVendor twins,
   so it gets its OWN wrapper .sf-prp rather than reusing .sf-epf:
     - its <table class="formtable"> has NO width/height (the .sf-epf rule
       carries width:60%/height:35% — reusing it would resize this table);
     - its #imgLoading spinner is 120x100, not 60x60;
     - it adds a bare `td { padding:1px }` the twins don't have.
   The popup-chrome rules (#popup, #popup h3, .messagebox*, #close_popup,
   #write) are duplicated verbatim from .sf-epf on purpose — scoping keeps the
   generic selectors from leaking, and a shared base class would have to undo
   the table/spinner differences above. Values kept verbatim (incl. legacy
   -moz-* props) for a byte-identical render. */
.sf-prp #popup {
    background-color: white;
    margin:           15px;
    padding:          5px;
    border:           solid 1px #333;
    padding-left:     0px;
    padding-right:    0px;
}
/* Loading state while a review POSTs — the JS used to set opacity:0.3 +
   pointer-events:none inline via .css() and clear them on success/error.
   Now toggled with addClass/removeClass("sf-loading"). */
.sf-prp #popup.sf-loading {
    opacity:        0.3;
    pointer-events: none;
}
.sf-prp #popup h3 {
    background:    url("/images/H3.jpg") repeat scroll 0 0 transparent;
    color:         gray;
    border-top:    solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    font-size:     1.2em;
    font-weight:   bold;
    line-height:   1.8em;
    margin:        0;
    padding:       1px 1px 1px 20px;
}
.sf-prp .messagebox {
    width:                     100%;
    -moz-border-bottom-colors: none;
    -moz-border-image:         none;
    -moz-border-left-colors:   none;
    -moz-border-right-colors:  none;
    -moz-border-top-colors:    none;
    background:                none repeat scroll 0 0 #FF9;
    border-color:              #FE3 -moz-use-text-color;
    border-style:              solid none;
    border-width:              1px medium;
    /* Was display:block in the source <style>, but the element also carried
       inline style="display:none" (inline won) so it rendered hidden on load.
       That inline attr is gone now, so the initial hidden state lives here;
       jQuery .slideDown() reveals it (ending at the div's default block). */
    display:                   none;
    margin:                    10px 0;
    padding:                   0 10px;
}
/* flash-message-warning divs injected into .messagebox by the popup's AJAX
   handlers carried inline style="padding:10px;" — moved here, scoped so it
   can't affect the shared class elsewhere. */
.sf-prp .messagebox .flash-message-warning {
    padding: 10px;
}
.sf-prp .messagebox ul {
    display: block;
    margin:  0;
    padding: 0;
    width:   100%;
}
.sf-prp .messagebox .errorline {
    clear:      both;
    color:      #333;
    list-style: none outside none;
}
.sf-prp .messagebox li {
    margin:   10px 0;
    overflow: hidden;
    padding:  0;
    width:    100%;
}
.sf-prp .messagebox .icon {
    float:  left;
    margin: 0 8px 0 0;
}
.sf-prp .messagebox .message {
    font-size:      100%;
    line-height:    1.2em;
    margin:         0 5px 0 10px;
    vertical-align: middle;
    margin-top:     8px;
    font-weight:    bold;
}
/* This popup's spinner is larger than the twins' 60x60. The commented-out
   126x22 variant from the source <style> was dropped (dead). */
.sf-prp #imgLoading {
    position:         fixed;
    top:              30%;
    left:             40%;
    width:            120px;
    height:           100px;
    background-color: #FFF;
    padding:          0;
    z-index:          100;
    border:           #333 solid 1px;
    display:          none;
}
.sf-prp #close_popup {
    margin-left: 10px;
}
.sf-prp #write {
    margin-left: 10px;
}
/* Bare `td { padding:1px }` in the source <style> — scoped to the popup so it
   no longer targets every table cell on whatever page might share this CSS. */
.sf-prp td {
    padding: 1px;
}
/* Per-element inline style="" attrs from the same popup, scoped under .sf-prp.
   #tabreviews/.padded zero the theme's padding; td.formlabel text-align:left
   reproduces the theme override (see the .sf-epf note). Both .reviews blocks
   carried margin-left:10px; the lower (form) one adds top/bottom via the
   sf-reviews-form modifier. #msg-error's initial display:none now lives here
   too (JS slideUp/slideDown still toggles it), alongside its color/font/float.
   #newreview reproduces the textarea's inline width/height (overriding the
   rows/cols attrs, which stay); .sf-input-error is the error-border state the
   JS used to set via .css("border", ...). The clear:both spacer div became
   class="clear" (already used twice in this view). */
.sf-prp #tabreviews {
    padding: 0px;
}
.sf-prp .padded {
    padding: 0px;
}
.sf-prp td.formlabel {
    text-align: left;
}
.sf-prp .reviews {
    margin-left: 10px;
}
.sf-prp .reviews.sf-reviews-form {
    margin-top:    10px;
    margin-bottom: 10px;
}
.sf-prp #msg-error {
    color:       #BA3323;
    font-weight: bold;
    font-size:   11px;
    float:       left;
    display:     none;
}
.sf-prp #newreview {
    width:  250px;
    height: 40px;
}
.sf-prp #newreview.sf-input-error {
    border: solid 1px #BA3323;
}

/* ---- ProductReviews list (TopReviews.cshtml + _SingleReview.cshtml) ------- */
/* NOT scoped under a popup wrapper: these two partials render in THREE places —
   the product detail page (template engine), the full reviews page
   (ProductReviews/Index), AND inside the .sf-prp popup — so the rules are
   global. components.css loads before the theme styles.css, but no theme rule
   competes for these exact selectors/properties (theme styles.css:1870-1871
   style .ProductReview/.ProductReviewKarma, and :2082 only the grid-scoped
   .cell-product .ProductReviewRating — none touch these imgs/margins), so the
   relocation is cascade-safe. */

/* TopReviews avg-rating row. The source div carried
   style="margin-top: 10; margin-bottom: 5px" — `margin-top: 10` is unitless,
   hence invalid and ignored by every browser, so only margin-bottom:5px ever
   applied; the no-op is dropped. A dedicated `.sf-review-avg` modifier (not the
   bare .ProductReviewRating) keeps this margin off the plain .ProductReviewRating
   in ProductReviews/Index.cshtml, which never had it. The avg <img> carried
   vertical-align:middle, reproduced via `.sf-review-avg img`. */
.sf-review-avg {
    margin-bottom: 5px;
}
.sf-review-avg img {
    vertical-align: middle;
}

/* _SingleReview karma yes/no vote buttons — were inline
   border:none;vertical-align:middle. `.ProductReviewKarma img` matches exactly
   the two <a><img> votes (the only imgs in that span) in every render context. */
.ProductReviewKarma img {
    border:         none;
    vertical-align: middle;
}

/* ---- EstimateShipping popup (EstimateShipping/Index.cshtml) -------------- */
/* The only inline style on this _PopupLayout popup — the form's
   margin-left:120px. A dedicated class (no wrapper needed: there was no <style>
   block of generic selectors to contain). The view links components.css via its
   HeadContent section since _PopupLayout does not load it globally. */
.sf-estimate-form {
    margin-left: 120px;
}

/* ---- Products cross-sell accessories (AdditionalProductAccessories.cshtml) -- */
/* Parked: this view is DEAD. Its action is reachable only via the route
   `addproductaccessoires?sku=`, whose sole inbound link is the dead
   Kits/Index.cshtml (KitsController is template-engine, so its views never
   render) plus two commented-out refs (CustomHeader.cs:92, Product.cs:1261) —
   nothing live navigates here. Migrated for inventory completeness, not customer
   effect. The two cross-sell <input type="image"> buttons carried
   border-width:0px + margin-top:5px (and the add-to-cart one vertical-align:
   middle). border/va reuse the .sf-bw-0 / .sf-va-middle utilities; only the
   off-scale 5px margin is a dedicated class here (NOT .sf-mt-5 — §5 reserves that
   name for --space-5 = 20px). The theme borders no image inputs (input[type=image]
   sets padding:0 5px only), so dropping the inline border is pixel-identical. */
.sf-acc-btn {
    margin-top: 5px;
}

/* ---- Products: replaced-product card (RenderSingleProductReplaced.cshtml) -- */
/* LIVE: Html.Partial'd by Products/Index.cshtml when a product IsReplaced &&
   Disabled. The view's in-body <style> block (generic .product-line / .imgMax /
   .addtocart-block / .title-replace / .product-replace) plus its per-element
   inline styles are ported here, ALL scoped under the view root .product-replace.
   Scoping is required for correctness as well as leak-prevention: components.css
   loads BEFORE the theme styles.css, so a bare .product-line rule would lose to
   the theme's .product-line; the extra .product-replace ancestor keeps these
   winning, and the generic names can't leak to other (dead) product partials.
   Legacy -moz-/-webkit-border-radius kept verbatim. The id-scoped #new / #aPromo
   selectors follow the .sf-prp #popup pattern already used in this file. The
   clear:both spacer div became class="clear" (theme), and the lone font-weight:
   bold anchor reuses .sf-fw-bold. */
.product-replace {
    background-color:      #e7ffe7;
    color:                 #333;
    border:                solid 1px #B4B4B4;
    padding:               10px;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    border-radius:         4px;
    position:              relative;
    top:                   -30px;
    font-size:             12px;
}
.product-replace p {
    font-size: 11px;
}
.product-replace .title-replace {
    font-weight: bold;
    font-size:   13px;
}
.product-replace .product-line {
    height:           300px;
    background-color: #FFF;
    border:           1px solid #ccc;
}
.product-replace .addtocart-block {
    border-bottom: 1px solid #ccc;
    padding-top:   4px;
    padding-right: 4px;
    text-align:    right;
}
.product-replace .imgMax {
    display:  none;
    left:     14px;
    position: absolute;
    top:      61px;
    z-index:  1;
}
.product-replace .replace-details-link {
    margin-right: 10px;
}
.product-replace #new {
    position: absolute;
}
.product-replace .see_product a {
    font-weight: bold;
    font-size:   12px;
    margin-left: 10px;
}
.product-replace .replace-body {
    position:    relative;
    margin-left: 120px;
    top:         -140px;
}
.product-replace .promo-corner {
    position: absolute;
    top:      0;
    right:    0;
}
.product-replace #aPromo {
    color: #ff0000;
}
.product-replace .product_discount_adverts img {
    left:     -1px;
    position: absolute;
    top:      22px;
}

/* ---- Products: detail page (Index.cshtml) ------------------------------- */
/* DEAD/edge-path: the live product page is template-engine rendered
   (ProductsController.Index GET :60 returns Content()); this Razor view renders
   only on a failed add-to-cart POST fallback (:170), which IndexSetup leaves
   half-populated (it would NPE — see 39A). Migrated for inventory completeness.
   Two values must out-specify the theme (components.css loads BEFORE styles.css):
   the loading caption's font-size (theme .text-loading is 12px @styles.css:2097)
   is reproduced via the higher-specificity #imgLoading .text-loading; the qty
   field's width (theme .forminput is 190px @styles.css:1836) via the id rule
   #qty. The rest (#titleDesc, #addToCart, .thumbnail, .suggesteditem,
   jcarousel-prev/next, #FilesGridView, #wishlist) have NO competing theme rule
   (grepped), so plain classes/ids are cascade-safe. The invalid `# DataList1 a`
   selector from the source <style> (space after #) never matched anything and is
   dropped. clear:both spacers already used class="clear"; the WhatsApp SVG fills
   moved to fill="" presentation attrs (equivalent, no CSS). */
#imgLoading .text-loading {
    font-size:      13px;
    display:        inline-block;
    vertical-align: super;
}
/* #divLoading wraps a different loading caption (font-size + margin-top, no
   inline-block/super) than the live #imgLoading variant above. Used by the
   backup clone "Copie Index.cshtml" (DEAD) AND the dead Search views
   (Search/Index.cshtml + Search/Result.cshtml), which all had the same inline
   `font-size:13px; margin-top:20px` on their #divLoading caption. Scoped id keeps
   it off the live #imgLoading variant and out-specifies theme .text-loading
   (12px @styles.css:2097). */
#divLoading .text-loading {
    font-size:  13px;
    margin-top: 20px;
}
.sf-product-titledesc {
    margin-top: -30px;
}
#qty {
    width: 20px;
}
.sf-product-options {
    margin-top:    10px;
    margin-bottom: 10px;
    text-align:    left;
}
.sf-downloads-title {
    color: #FFF;
}
.sf-files-grid {
    color:           #333333;
    border-collapse: collapse;
}
.sf-files-grid-head {
    color:            #FFFFFF;
    background-color: #FFFFFF;
    font-weight:      bold;
}
.sf-files-grid-row {
    color:            #333333;
    background-color: #F7F6F3;
}
.sf-suggested-panel {
    margin-top: 10px;
}
#_SuggestedItems1_SuggestedItemsPanel .suggesteditem {
    text-align:     center;
    display:        inline-block;
    width:          250px;
    margin:         5px;
    vertical-align: top;
}

/* ---- Products: detailed-list row (RenderSingleProductDetailed.cshtml) ---- */
/* DEAD: referenced by no .cshtml or .cs (the detailed-list product layout is
   template-engine via parts/single-product-list.html). Migrated for inventory
   completeness. The view root is the shared <div class="product-line"> (the
   theme + marocdata.js style .product-line), so we add an own wrapper class
   .sf-prod-detailed and scope every ported inline style under it — never under
   bare .product-line, which would leak into the theme's rows and the
   .product-replace card. Reuses .sf-bw-0 (the <img border=0>) and .sf-fw-bold
   (two anchors); clear:both spacer became class="clear".
   ALSO reused by the dead Kits/RenderSingleKit.cshtml — its detailed-list row is
   structurally identical (same .product-line root, #new / .detail-body /
   .promo-corner / #aPromo / .product_discount_adverts img / .buttons, same
   pixel values), so it carries the same .sf-prod-detailed wrapper rather than
   duplicating the rules. */
.sf-prod-detailed #new {
    left:     0;
    top:      0;
    position: absolute;
}
.sf-prod-detailed .detail-body {
    position:    relative;
    margin-left: 140px;
}
.sf-prod-detailed .promo-corner {
    width:    28%;
    position: absolute;
    top:      0;
    right:    0;
}
.sf-prod-detailed #aPromo {
    color: #ff0000;
}
.sf-prod-detailed .product_discount_adverts img {
    left:     -1px;
    position: absolute;
    top:      22px;
}
.sf-prod-detailed .buttons {
    margin-right: 10px;
}

/* ---- Products: grid cell (RenderSingleProductGrid.cshtml) ---------------- */
/* DEAD: referenced by no .cshtml or .cs (grid product layout is template-engine
   via parts/single-product-grid.html, and the live hover-zoom uses
   marocdata.js's maximizeForGrid, not this view's inline copy). Migrated for
   completeness. The root is the shared <div class="cell-product"> (theme +
   marocdata.js style it), so an own wrapper class .sf-prod-grid carries the
   root's margin-left and scopes the rest — including the two styles that the
   view's inline maximizeForGrid script used to build as JS strings and stamp on
   the dynamically-created .ImgMax / .loading elements (now plain class rules, as
   those elements already carry the classes). text-align:center reuses the
   .sf-text-center utility.
   ALSO reused by the dead Kits/RenderSingleKitGrid.cshtml — identical grid cell
   (.cell-product root, same maximizeForGrid JS building .ImgMax / .loading, same
   .grid-price / .more_details, same values), so it shares the .sf-prod-grid
   wrapper instead of duplicating the rules. */
.sf-prod-grid {
    margin-left: 10px;
}
.sf-prod-grid .ImgMax {
    display:  none;
    z-index:  1;
    position: absolute;
    top:      2px;
    left:     2px;
}
.sf-prod-grid .loading {
    background: url(/Images/loading2.gif) no-repeat 0 0;
    height:     20px;
    width:      20px;
    position:   absolute;
    top:        0;
    left:       0;
}
.sf-prod-grid .grid-price {
    padding-left: 14px;
}
.sf-prod-grid .more_details {
    margin-top: 2px;
}

/* ---- Revendeur reseller export page (Revendeur/Index.cshtml) ------------- */
/* LIVE: RevendeurController returns View(model) (:80) and View("Index", model)
   (:196). The 5 inline styles externalized here, cascade checked vs the theme
   (loads AFTER components.css): h3 reproduces #678C10 over theme `h3{color:#000}`
   — `.block-revendeur h3` (0,1,1) out-specifies theme `h3` (0,0,1); #treeCategory
   border-left/right is uncontested (theme #treeCategory rules set only
   margin/padding !important, no border); #msg-info and the signup wrapper are
   children of .block-information with no competing rule (id / dedicated class).
   The `.block-revendeur`/`.block-information` cards themselves are theme-owned
   (styles.css:2657-2658) and untouched here. */
.sf-revendeur-signup {
    background-color: #FFF;
    border-top:       solid 1px #B4B4B4;
    padding:          10px;
}
#msg-info {
    padding: 10px;
}
.block-revendeur h3 {
    color: #678C10;
}
.block-revendeur p {
    font-weight: normal;
}
#treeCategory {
    border-left:  1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* ---- SIPS checkout (SipsCheckout/Index.cshtml + ResponseConfirmPayment.cshtml) */
/* LIVE: SipsCheckoutController returns View(model). Both views widen the shared
   checkout .sections from the theme's 750px (styles.css:1341
   `.checkout .sections{width:750px}`) to 1012px via an inline style. They reuse
   id="paypalexpresscheckout" — which the real PayPalExpressCheckout/Index ALSO
   uses, WITHOUT a width override — so scoping on that id would wrongly widen the
   PayPal page too. Instead a dedicated .sf-sips-sections class goes on these two
   .sections only; `.checkout .sections.sf-sips-sections` (0,3,0) out-specifies the
   theme rule (0,2,0), so 1012px wins despite components.css loading first. */
.checkout .sections.sf-sips-sections {
    width: 1012px;
}

/* ---- Shared partials ---------------------------------------------------- */
/* _ViewOrder.cshtml (LIVE: Checkout/Receipt + account/OrderHistory/Details; both
   use _Layout, which loads components.css via the FullHeader template engine).
   float:right / text-align:right reuse utilities; the empty 20px vertical spacer
   div gets .sf-spacer-20. */
.sf-spacer-20 { height: 20px; }

/* _OrderPaymentSummary.cshtml — the receipt's payment-summary table. LIVE on
   desktop (rendered by _ViewOrder, which loads components.css). It is ALSO
   rendered by the mobile Areas/Mobile _ViewOrder, which does NOT load
   components.css — so the SAME rules are duplicated into that mobile view's own
   <style> block, keyed on the .sf-order-paysummary classes added here, keeping
   the mobile receipt identical. The table's border/cellspacing/cellpadding/width
   stay as HTML attributes (they work on both platforms without CSS); only the
   style="" attributes are externalized. The row-specific 1px #999 dividers and
   the grand-total #333 use 2-class selectors so they out-specify the mobile
   block's `.totaltable tr td` rule on mobile, reproducing what the inline styles
   did. */
.sf-order-paysummary {
    margin-top: 8px;
    color:      #666;
    font-size:  11px;
}
.sf-order-paysummary .sf-ops-divider {
    border-bottom: solid 1px #999;
}
.sf-order-paysummary .sf-ops-refund {
    border-bottom:  solid 1px #999;
    padding-bottom: 3px;
}
.sf-order-paysummary .sf-ops-due-label {
    vertical-align: middle;
}
.sf-order-paysummary .totalgrand {
    color: #333;
}

/* The next four classes belong to DEAD orphan Shared partials (referenced by no
   .cshtml/.cs): the Logo/Socials/SearchForm/Newsletter tag handlers emit their
   HTML directly via StringBuilder, and _Pager2/_PagerCat are pagers for the dead
   (template-engine) Category/Search pages. Migrated for completeness (user
   decision). Per-element dedicated classes only — never the shared
   .pager/.recordprice/#search-header selectors — so nothing leaks onto the live
   tag-handler output that reuses those names. */
.sf-searchform-header {           /* _SearchForm.cshtml #search-header */
    margin-top: 15px;
    text-align: left;
}
.sf-pager2-count {                /* _Pager2.cshtml product-count span */
    margin:      7px 0 0;
    font-weight: bold;
    font-size:   14px;
    float:       left;
}
.sf-pagercat-count-wrap {         /* _PagerCat.cshtml product-count <ul> */
    float:       left;
    margin-top:  0;
    font-size:   10px;
    position:    absolute;
    left:        0;
    margin-left: 216px;
}
.sf-pagercat-count {              /* _PagerCat.cshtml product-count span */
    margin:      6px 10px 0 0;
    font-weight: bold;
    font-size:   13px;
    float:       left;
}

/* ---- Home/Manufacturers.cshtml (DEAD: no action/route renders it) -------- */
/* Migrated for completeness. Per-element dedicated classes (no wrapper) keep the
   page_header/col_large overrides off the live theme classes. The <img border>
   reuses .sf-bw-0. */
.sf-mfr-col {
    margin-left: 13px;
}
.sf-mfr-header {
    background:  none;
    color:       #444444;
    padding:     0;
    margin:      7px 0 10px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-style:  normal;
}

/* ---- Home/Tarifs.cshtml (DEAD + BROKEN) --------------------------------- */
/* This view is a WebForms .aspx pasted into a .cshtml (<asp:repeater>, <%# %>,
   <uc1:>, VB <% %>) — it is not valid Razor and the route `tarifs` points to a
   non-existent Home/Tarifs action, so it can never render. Its in-body <style>
   block contained GENERIC selectors (#homepagecolumn2 a, .loading, .bold, .top,
   .download, .row:hover, .psdg-*) that would restyle LIVE pages if globalized.
   Per user decision, migrated anyway but ALL rules are scoped under a dead
   .sf-tarifs wrapper added around the view body, so they only match inside this
   (never-rendered) view and cannot leak. Values kept verbatim. */
.sf-tarifs #st_horizontal { max-width: 400px; }
.sf-tarifs #st_horizontal .st_view_container { max-width: 365px; }
.sf-tarifs #st_horizontal .st_tabs_container { width: 338px !important; }
.sf-tarifs #st_horizontal .st_tab { padding: 10px 24px; }
.sf-tarifs #homepagecolumn2 a { color: #1D70C0; }
.sf-tarifs .marginTopBottom20 { margin: 10px 0; }
.sf-tarifs .bold { font-weight: bold; }
.sf-tarifs br.clear { height: 0; clear: both; }
.sf-tarifs .download {
    background:   url(btn_telecharger.jpg) no-repeat;
    display:      inline-block;
    width:        54px;
    font-size:    0;
}
.sf-tarifs .letter { margin: 0 2px; }
.sf-tarifs .top {
    background:      url(/MDModules/Themes/MVBleu/images/top.png) no-repeat;
    display:         inline-block;
    width:           16px;
    text-decoration: none;
}
.sf-tarifs .psdg-top-cell {
    border-right: 1px solid #CED9EC;
    color:        #1F3D71;
    float:        left;
    font:         13px Arial, Helvetica, sans-serif;
    height:       31px;
    padding:      15px 0 0 24px;
    width:        50%;
    text-align:   left;
}
.sf-tarifs .psdg-middle {
    background: #F6F6F6;
    margin:     0;
    padding:    0;
    width:      100%;
}
.sf-tarifs .psdg-left {
    color:      #1F3D71;
    font:       13px Arial, Helvetica, sans-serif;
    margin:     0;
    padding:    5px 0 5px 10px;
    text-align: left;
    width:      50%;
    float:      left;
}
.sf-tarifs .psdg-right {
    float:      left;
    margin:     0;
    padding:    5px 0;
    text-align: center;
    width:      42.5%;
}
.sf-tarifs .psdg-bottom {
    background:  #E4E3E3;
    border-top:  2px solid #FFFFFF;
    clear:       both;
    height:      20px;
    margin:      0;
    padding:     0;
    width:       100%;
    text-align:  center;
}
.sf-tarifs .prefix,
.sf-tarifs .loading { clear: both; }
.sf-tarifs .loading {
    background: url(/MDModules/Themes/MVBleu/images/loading.gif) no-repeat center center;
    height:     32px;
    padding:    5px 0;
}
.sf-tarifs .row2 {
    font-family:      Verdana, Arial, Helvetica, sans-serif;
    background-color: #F6F6F6;
    text-align:       center;
}
.sf-tarifs .row1 {
    font-family:      Verdana, Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    text-align:       center;
}
.sf-tarifs .row:hover { background: #E4EBF8; }
/* Per-element inline styles from the same view, scoped under .sf-tarifs. */
.sf-tarifs .anrt-link {
    float:        left;
    display:      block;
    width:        118px;
    height:       45px;
    margin-right: 10px;
}
.sf-tarifs .price-search-col { width: 50%; }
.sf-tarifs .price-search-box {
    float:      right;
    text-align: right;
}
.sf-tarifs .txt-search-price {
    display: inline;
    width:   80px;
}
.sf-tarifs .btn-search-price {
    display:             inline;
    border:              none;
    width:               96px;
    height:              24px;
    background-position: -185px 0;
}
.sf-tarifs #lnkPricesAll { display: block; }
.sf-tarifs .psdg-top-cell-last {
    border: none;
    width:  36%;
}

/* ---- RssFeed list page (RssFeed/Feed.cshtml) ---------------------------- */
/* LIVE: RssFeedController returns View(model) (:44); the view uses the default
   _Layout, which loads components.css via the FullHeader template engine. The
   two .sidemenu sections each carried inline style="margin-bottom:5px", which
   trimmed the theme's .sidemenu base rule (styles.css:1590 `margin:0 0 6px`)
   from 6px to 5px. components.css loads BEFORE the theme, so a bare class would
   lose to .sidemenu (same 0,0,1,0 specificity, theme wins on load order);
   .sidemenu.sf-rss-section (0,0,2,0) out-specifies it so 5px wins — same
   technique as .sf-sips-sections above. 5px is off the 4px token scale, kept
   raw (port). */
.sidemenu.sf-rss-section {
    margin-bottom: 5px;
}

/* ---- Search results page (Search/Index.cshtml) -------------------------- */
/* DEAD: the live search page is template-engine rendered (SearchController
   returns Content()); this Razor view never renders. It carried TWO in-body
   <style> blocks of GENERIC selectors (.block-search, .result-msg*, #recherche_2,
   .contact, .msg-error, .flash-message-info, #imgLoading) plus per-element inline
   styles. Both blocks + the inlines are ported here scoped under a dead .sf-search
   wrapper (added to the view's #categorymain) so the generic names cannot leak
   onto live pages. Values kept verbatim (incl. legacy -moz-/-webkit-border-radius).
   #recherche_2's source had `color:blue` immediately overridden by `color:#F60`
   in the same block — the dead `color:blue` no-op is dropped (only #F60 renders).
   The #divLoading caption keeps no rule here — the existing global
   `#divLoading .text-loading` already covers it. Migrated for folder-wide
   inline-style removal. */
.sf-search .block-search {
    background-color:      #F7F7F7;
    color:                 #333;
    border:                solid 1px #9a9a9a;
    padding:               0px;
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    border-radius:         2px;
    margin-bottom:         5px;
}
.sf-search .result-msg-err {
    color:         red;
    font-family:   verdana;
    font-size:     11px;
    font-weight:   bold;
    padding:       16px;
    border-bottom: solid 1px #9a9a9a;
}
.sf-search .result-msg {
    color:       #060;
    font-family: verdana;
    font-size:   14px;
    font-weight: bold;
    padding:     16px;
}
.sf-search #recherche_2 {
    height:                23px;
    background-image:      url(/Images/bg_search.gif);
    background-repeat:     repeat-x;
    font-family:           verdana;
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    border-radius:         2px;
    font-size:             12px;
    color:                 #F60;
    padding-top:           6px;
    font-weight:           bold;
    margin-bottom:         5px;
    border:                #9a9a9a 1px solid;
    padding-left:          16px;
}
.sf-search .contact {
    background-color: #F7F7F7;
    padding:          16px;
}
.sf-search .msg-error {
    display:    block;
    color:      #DD4B39;
    margin-top: 5px;
}
.sf-search .flash-message-info {
    display: none;
}
.sf-search #imgLoading {
    top:              600px;
    left:             540px;
    width:            120px;
    height:           100px;
    background-color: white;
    padding:          0;
    z-index:          1000;
    border:           #999 solid 1px;
    position:         absolute;
    display:          none;
}
/* Per-element inline styles from the same view, scoped under .sf-search. */
.sf-search-flabel {           /* the 7 form-row labels: display:block; margin-top:6px */
    display:    block;
    margin-top: 6px;
}
.sf-search .sf-search-price { /* MinPrice/MaxPrice forminputs: width:auto over theme 190px */
    width: auto;
}
/* The empty / contact result panels reuse .block-search but override its
   #F7F7F7 surface to white with no padding. Defined AFTER .sf-search
   .block-search so it wins the same-specificity tie. text-align handled by the
   global .sf-text-center utility on the centered one (the other was left =
   default, dropped). */
.sf-search .sf-result-panel {
    background-color: White;
    padding:          0px;
}
.sf-search .sf-search-flash-msg { margin-top: 4px; }   /* .flash-message-info .msg */
.sf-search .sf-search-msg-ta {                         /* contact-form textarea */
    background: none repeat scroll 0 0 white;
    border:     1px solid #CCC;
    color:      #444;
}

/* ---- Kits listing page (Kits/Kits.cshtml) ------------------------------- */
/* DEAD: KitsController is template-engine, so this "Les Packs PME/PMI" Razor
   listing never renders. Its in-body <style> block used GENERIC, LIVE-shared
   selectors (.cell-product, .grid-top, .grid-left, .name, .description) that
   would restyle the real category/product grids if globalized, so the whole
   block + the per-element inline styles are scoped under a dead .sf-kits wrapper
   (added to the view's #categorymain). The corner GIFs on its three
   .title-category / .list-man-category bars reuse the global .sf-title-corner
   classes; text-align:center reuses .sf-text-center. Values kept verbatim
   (incl. the !important on .grid-left and the legacy IE `cursor:hand`).
   Migrated for folder-wide inline-style removal. */
.sf-kits .man-block {
    display:       inline-table;
    width:         150px;
    text-align:    center;
    margin-top:    5px;
    margin-bottom: 5px;
}
.sf-kits .cell-product .grid-top {
    width: 241px;
}
.sf-kits .cell-product {
    width:  250px;
    height: 260px;
}
.sf-kits .grid-left {
    height: 260px !important;
}
.sf-kits .cell-product .name {
    font-weight:  bold;
    padding-left: 14px;
}
.sf-kits .cell-product .description {
    width:    236px;
    height:   28px;
    position: relative;
    z-index:  0;
    overflow: visible;
    left:     5px;
}
/* Per-element inline styles from the same view, scoped under .sf-kits. */
.sf-kits-sku-wrap {
    text-align: center;
    padding:    10px;
}
.sf-kits-price-box {
    position:         relative;
    background-color: #FFF;
    left:             1px;
}
.sf-kits .grid-price {
    padding-left: 14px;
}
.sf-kits .siteprice {
    font-size:   9pt;
    font-weight: bold;
    color:       green;
    margin-left: 5px;
}
.sf-kits .more_details {
    margin-top: 2px;
}
.sf-kits-man-list {
    text-align: left;
    width:      100%;
    cursor:     hand;   /* legacy IE keyword kept verbatim (dead view) */
}

/* ---- Kit detail page (Kits/Index.cshtml) -------------------------------- */
/* DEAD: KitsController is template-engine, so this kit detail Razor view (the
   twin of Products/Index.cshtml) never renders. It shares GENERIC IDs/classes
   with the LIVE template-engine product detail page (#productPrices_prices,
   #imgLoading, #productTitle, #productContent, #pricewrapper, .siteprice), so
   its two in-body <style> blocks + the price/title/spinner inline styles are
   scoped under a dead .sf-kit-detail wrapper (added around the view body) to
   keep them off the live page. The parts that match Products/Index reuse the
   global classes that port already created — .sf-product-titledesc (#titleDesc),
   #qty, .sf-suggested-panel + #_SuggestedItems1_SuggestedItemsPanel .suggesteditem
   — and the rest reuse utilities (.sf-float-right, .sf-inline, .sf-bw-0,
   .sf-va-middle, .sf-block, .sf-cursor-pointer, .sf-hidden). The #divLoading
   caption is covered by the existing global #divLoading .text-loading. DROPPED
   from <style> block 2: the invalid `# DataList1 a` selector (space after #,
   matches nothing — same as the Products/Index port) and the bare .suggesteditem
   rule (the existing #_SuggestedItems1_SuggestedItemsPanel .suggesteditem already
   covers the same elements). NOTE: this view's #imgLoading rule matches no
   element in the markup (the spinner here is #divLoading) — it is a copy-paste
   leftover, ported verbatim under the wrapper where it stays inert. Values kept
   verbatim (incl. the !important flags). Migrated for folder-wide inline-style
   removal. */
.sf-kit-detail #productPrices_prices .prices p {
    margin: 0 !important;
}
.sf-kit-detail #productPrices_prices .prixPublic {
    color:           red !important;
    text-decoration: line-through;
}
.sf-kit-detail #productPrices_prices .prixSpecial span {
    font-size:   11pt;
    font-weight: bold;
    color:       Green !important;
}
.sf-kit-detail #productPrices_prices .prixSpecialOverrided {
    text-decoration: line-through;
    color:           Red;
}
.sf-kit-detail #productPrices_prices .prixSpecialOverrided span {
    font-size: 9pt;
}
.sf-kit-detail #productPrices_prices .economie {
    color: Orange;
}
.sf-kit-detail #imgLoading {
    top:              200px;
    left:             380px;
    width:            150px;
    height:           40px;
    background-color: white;
    padding:          14px;
    z-index:          1000;
    border:           #999 solid 1px;
    position:         absolute;
    display:          none;
}
.sf-kit-detail #productTitle {
    font-weight: bold;
    margin-top:  4px;
}
.sf-kit-detail #productContent {
    margin-top: 22px;
}
.sf-kit-detail #pricewrapper span {
    color: green;
}
.sf-kit-detail .siteprice {
    font-size:   9pt;
    font-weight: bold;
    color:       green;
    margin-left: 5px;
}

/* ---- Category grid page (Category/Grid.cshtml) -------------------------- */
/* DEAD: Category Razor views never render (CategoryController returns Content()
   from the template engine). The real grid part at the top of the view reuses
   global classes: the .title-category corner GIFs use .sf-title-corner, and the
   #divLoading caption is covered by the existing global #divLoading .text-loading.
   Only the banner margin needs a class: */
.sf-cat-banner {
    margin-bottom: 5px;
}
/* Below the grid, this view has ~440 lines of an ORPHANED "DEVIS" (quote) print
   template pasted in by mistake — a hardcoded fake Voip-France invoice that
   renders nowhere. Per the user's decision its content is KEPT but its two
   in-body <style> blocks (super-generic A / BODY,TD,CENTER,P / .style1-.style17
   selectors that would wreck the whole site if globalized) + every per-element
   inline style are ported here scoped under a dead .sf-cat-devis wrapper (added
   to the leftover <table>). Notes:
   - The bare `BODY` selector is dropped (a <body> can't exist inside a table);
     TD/CENTER/P become .sf-cat-devis descendants.
   - `.style1` was declared in BOTH source blocks (border in block 1, text-align
     :center in block 2 — non-conflicting), so the merged rule carries both, as
     the source cascade did.
   - Several inline `width: NNN` values are UNITLESS (110 / 20 / 475) — invalid
     CSS that every browser ignores, so those no-op widths are dropped (matching
     how the Kits/Search ports dropped invalid selectors). The cells they were on
     collapse to the shared .sf-devis-cell border/padding.
   - .sf-devis-cell is defined AFTER .style1 so its `border` shorthand wins the
     same-specificity tie on cells carrying both classes — reproducing the inline
     #808080 border that won in the source. */
.sf-cat-devis {
    background-color: White;
    width:            100%;
    border-collapse:  collapse;
}
.sf-cat-devis a               { text-decoration: none; }
.sf-cat-devis a:link          { color: #3366cc; text-decoration: none; }
.sf-cat-devis a:visited       { color: #663399; text-decoration: none; }
.sf-cat-devis a:active        { color: #cccccc; text-decoration: none; }
.sf-cat-devis a:hover         { text-decoration: underline; }
.sf-cat-devis td,
.sf-cat-devis center,
.sf-cat-devis p {
    font-family: Geneva, Verdana, Arial, Helvetica;
    font-size:   10px;
    color:       #333333;
}
.sf-cat-devis .body    { font-family: Geneva, Verdana, Arial, Helvetica; font-size: 10px; color: #333333; }
.sf-cat-devis .content { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #000000; }
.sf-cat-devis .title   { font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: normal; color: #000000; }
.sf-cat-devis .headline{ font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #000000; }
.sf-cat-devis .message { font-family: Geneva, Verdana, Arial, Helvetica; font-size: 9px; }
.sf-cat-devis .style1 {
    border-left-style: solid;
    border-left-width: 1px;
    border-right:      1px solid #C0C0C0;
    border-top-style:  solid;
    border-top-width:  1px;
    border-bottom:     1px solid #C0C0C0;
    text-align:        center;   /* from the 2nd source block's .style1 */
}
.sf-cat-devis .style3  { font-size: large; }
.sf-cat-devis .style4  { text-align: left; }
.sf-cat-devis .style5 {
    border-left-style: solid;
    border-left-width: 1px;
    border-right:      1px solid #C0C0C0;
    border-top-style:  solid;
    border-top-width:  1px;
    border-bottom:     1px solid #C0C0C0;
}
.sf-cat-devis .style7  { font-weight: bold; }
.sf-cat-devis .style8  { font-size: 9px; }
.sf-cat-devis .style9  { text-align: center; font-size: 9px; }
.sf-cat-devis .style10 { font-size: 10px; }
.sf-cat-devis .style11 { border-width: 0; }
.sf-cat-devis .style12 { text-align: right; }
.sf-cat-devis .style13 {
    text-align:         center;
    border-left-width:  0;
    border-right-color: #C0C0C0;
    border-right-width: 0;
    border-top-width:   0;
    border-bottom-color:#C0C0C0;
    border-bottom-width:0;
}
.sf-cat-devis .style14 { color: #666666; }
.sf-cat-devis .style15 { text-align: left; font-size: 10px; }
.sf-cat-devis .style16 { font-weight: normal; }
.sf-cat-devis .style17 { font-weight: normal; color: #FF0000; }
/* Per-element inline styles from the invoice table, scoped under .sf-cat-devis. */
.sf-devis-frame { width: 700px; height: 910px; }
.sf-cat-devis .sf-devis-w100 { width: 100%; }
.sf-cat-devis .sf-devis-w400 { width: 400px; }
.sf-cat-devis .sf-devis-w300 { width: 300px; }
.sf-cat-devis .sf-devis-cell {
    border:  1px solid #808080;
    padding: 1px 4px;
}
.sf-cat-devis .sf-devis-cell-text {
    border:     1px solid #808080;
    padding:    1px 4px;
    text-align: left;   /* font/size/color inherited from .sf-cat-devis td */
}
.sf-cat-devis .sf-devis-total-cell {
    border-width: 1px;
    text-align:   right;
}
.sf-cat-devis .sf-devis-rowspan-cell {
    border-width: 1px;
}
.sf-cat-devis .sf-devis-foot-cell {
    border-width: 1px;
    text-align:   left;
}


/* -------------------------------------------------------------------------
   5. UTILITIES                            (populated from commit 5 onward)
   -------------------------------------------------------------------------
   Display:     .sf-hidden .sf-inline .sf-inline-block .sf-flex
   Float/clear: .sf-float-left .sf-float-right .sf-clear
   Text:        .sf-text-left .sf-text-center .sf-text-right
   Width:       .sf-w-full .sf-w-half .sf-mw-content
   Spacing:     .sf-mt-0..10 .sf-mb-0..10 .sf-ml-0..10 .sf-mr-0..10
                .sf-pt-0..10 .sf-pb-0..10 .sf-pl-0..10 .sf-pr-0..10
   Font:        .sf-fs-xs..xl .sf-fw-bold
   VAlign:      .sf-va-middle .sf-va-super .sf-va-bottom
   Icons:       .sf-icon-16 .sf-icon-20 .sf-icon-24
   Borders:     .sf-bw-0
   ------------------------------------------------------------------------- */

/* ---- Text alignment -------------------------------------------------- */
.sf-text-left   { text-align: left; }
.sf-text-center { text-align: center; }
.sf-text-right  { text-align: right; }

/* ---- Float ----------------------------------------------------------- */
.sf-float-right { float: right; }

/* ---- Font weight ----------------------------------------------------- */
.sf-fw-bold   { font-weight: bold; }
.sf-fw-normal { font-weight: normal; }

/* ---- Font size ------------------------------------------------------- */
.sf-fs-lg { font-size: var(--font-lg); }   /* 16px */

/* ---- Display / visibility -------------------------------------------- */
.sf-hidden    { display: none; }
.sf-inline    { display: inline; }
.sf-block     { display: block; }
.sf-invisible { visibility: hidden; }

/* ---- Spacing --------------------------------------------------------- */
.sf-mr-0 { margin-right: 0; }
.sf-mb-5 { margin-bottom: var(--space-5); }   /* 20px */

/* ---- Vertical align -------------------------------------------------- */
.sf-va-middle { vertical-align: middle; }
.sf-va-bottom { vertical-align: bottom; }

/* ---- Cursor ---------------------------------------------------------- */
.sf-cursor-pointer { cursor: pointer; }
/* Disabled-looking link (used by pager prev/next at the ends) */
.sf-disabled-link { pointer-events: none; cursor: default; }

/* ---- Borders --------------------------------------------------------- */
.sf-bw-0 { border: none; }


/* #########################################################################
   #                                                                       #
   #   PART 2  ·  content-blocks.css   ·   render controllers   ·  sf-cb-  #
   #                                                                       #
   ######################################################################### */
/* =========================================================================
   content-blocks.css  -  Storefront content-block decoration
   -------------------------------------------------------------------------
   Global stylesheet for HTML emitted by C# render controllers in
   Store/Areas/ContentBlocks/RenderControllers/. Wired into the active
   theme only (theme-MV-2026) via
   templates/parts/full-header.html, AFTER components.css.

   Inherits tokens from components.css's :root - never redeclare them here.
   Class prefix: sf-cb-*  (so we never collide with marocdata.js, theme
   styles.css, or system.css selectors).

   Functional inline styles (display:none toggled by jQuery .fadeIn /
   .fadeOut, hot-set width/height from dynamic data, computed
   background-image URLs, runtime-built <style> selectors) stay inline in
   each render controller. Only decorative styles migrate here. See
   INVENTORY.md (S0) for the locked per-controller decorative/functional
   split and docs/storefront-css-plan.md section 4.B for the audit rule.

   SECTION LAYOUT (Option A ownership banners):
   one S1-S8 banner per scope, in load order. Each scope edits ONLY its own
   banner section so the two devs' diffs never touch adjacent lines.
   Wave 1 = LIVE (S1-S4). Wave 2 = UNUSED (S5-S7). S8 = dead code.
   ========================================================================= */


/* =========================================================================
   LOCAL TOKENS  -  content-block-scoped, sf-cb-* namespaced
   -------------------------------------------------------------------------
   NOT a redeclaration of the components.css design tokens (we still consume
   those via var(--space-*), var(--color-*), var(--gutter), var(--font-*)).
   These cover repeated literals in THIS file. Two of them now alias the
   admin-editable --site-* tokens (MV-SITE-THEME block, regenerated by
   Admin > Themes > Site Settings) so the blocks follow the merchant's chosen
   page-background and border colours; the rest have no global token yet. The
   --sf-cb- prefix guarantees no collision with the global :root tokens. One-off
   magic numbers (106px, 130px, 180px, 200px, 690px ...) stay raw on purpose.
   ========================================================================= */
:root {
    --sf-cb-bg-block:     var(--site-page-bg, #ffffff);  /* slider/scrollable block bg (x3) - admin page bg */
    --sf-cb-border-light: var(--site-border, #cdcdcd);   /* thumbnail / card hairline  (x2) - admin border  */
    --sf-cb-block-gap:    5px;      /* small margin around block/strip wrappers   (x5)
                                       off the 4/8 spacing scale                      */
}


/* =========================================================================
   S1 · SLIDERS & ROTATORS   (LIVE · owner: A)
   ========================================================================= */

/* ImageListRotator         key=imagelistrotator   seed=4x
   target: 3 style= -> 3 decorative, 0 functional */
.sf-cb-imglistrot__admin   { border: none; }           /* admin editBlock sidemenu wrapper */
.sf-cb-imglistrot__strip   { margin-bottom: var(--sf-cb-block-gap); }      /* block wrapper (UseBox + non-box) */
.sf-cb-imglistrot__caption { top: 300px; left: 0px; width: 200px; height: 3px; } /* thumb caption (literal positions) */

/* ManufacturersSlider      key=manufacturersslider   seed=1x
   target: 4 style= -> 2 decorative, 2 functional (display:none kept inline) */
.sf-cb-mfgslider__admin { margin-right: 690px; } /* admin editBlock link */
.sf-cb-mfgslider__clear { clear: both; }          /* <br> float clear */

/* ProductSlider            key=productslider   seed=3x
   target: 3 style= + 5 static <style> rules -> 7 decorative, 3 functional
   The static <style> rules were keyed on the per-block #scrollable_<blockId> id;
   re-anchored here onto the .sf-cb-pslider class added to that same div. Each
   selector sits one class above the list-rotator.css plugin's .l-rotator .X
   selectors, so it wins even though content-blocks.css loads before the
   body-injected plugin sheet. Runtime height/width stay inline in the C#. */
.sf-cb-pslider { background-color: var(--sf-cb-bg-block); }                        /* scrollable container (was inline) */
.sf-cb-pslider .name  { font-weight: var(--font-weight-bold); }     /* product name link */
.sf-cb-pslider .price { color: var(--site-price, #43a047); }        /* price link - admin price colour */
.sf-cb-pslider .l-rotator { padding-top: var(--space-5) !important; } /* 20px */
.sf-cb-pslider .l-rotator .screen {
    overflow: visible !important;
    margin: var(--gutter);   /* 15px (was inline on .screen) */
    margin-left: 0px;
}
.sf-cb-pslider .l-rotator .inner-text {
    position: static;
    text-align: center;
    padding-top: var(--space-6);  /* 24px */
}

/* ListRotator              key=listrotator   seed=1x
   target: 1 style= -> 0 decorative, 1 functional (all positions computed) */
/* .sf-cb-listrot { ... } */


/* =========================================================================
   S2 · CATEGORY TREES & MENUS   (LIVE · owner: B)
   ========================================================================= */

/* TreeCategoryFilter       key=treecategoryfilter   seed=3x
   target: 4 style= -> 1 decorative, 3 functional (display:block toggles) */
.sf-cb-treecatfilter__admin { border: none; }   /* admin editBlock sidemenu wrapper */

/* TreeCategoryMenu         key=treecategorymenu   seed=1x
   target: 1 style= + 1 <style> -> 1 decorative, 1 functional (runtime selector) */
.sf-cb-treecat__admin { border: none; }   /* admin editBlock sidemenu wrapper */


/* =========================================================================
   S3 · INTERACTIVE WIDGETS   (LIVE · owner: B)
   ========================================================================= */

/* WebCallBack              key=webcallback   seed=1x
   target: 7 style= -> 6 decorative, 1 functional (display:none loader) */
.sf-cb-webcallback__msg      { color: var(--color-success, #28a745); font-size: var(--font-sm); } /* JS-injected status span (12px) */
.sf-cb-webcallback__table    { width: 100%; vertical-align: middle; }
.sf-cb-webcallback__livehelp { display: block; height: 106px; }         /* live-help block link */
.sf-cb-webcallback__form     { margin-bottom: 0px; }
.sf-cb-webcallback__phone    { width: 125px; vertical-align: top; }
.sf-cb-webcallback__btn      { vertical-align: top; padding: 0 0 0 var(--space-1); } /* 4px */

/* VolumeDiscounts          key=volumediscounts   seed=1x
   target: 2 style= -> 2 decorative (alt-row bg + td padding) */
.sf-cb-voldisc__altrow { background-color: var(--site-border, #cdcdcd); } /* alternating row - admin border */
.sf-cb-voldisc__qty    { padding-left: 9px; }

/* CustomerNotification     key=customernotification   seed=1x
   target: 1 style= -> 1 decorative */
.sf-cb-custnotif__body { margin: var(--sf-cb-block-gap); }   /* notification body wrapper */


/* =========================================================================
   S4 · PRODUCT LISTINGS   (LIVE · owner: A)
   ========================================================================= */

/* SameProductCategory      key=sameproductcategory   seed=3x
   target: 2 style= + 1 static <style> rule -> 3 decorative, 1 functional
   (#myCarouselPan static; jcarousel height computed kept inline) */
#myCarouselPan       { margin-bottom: var(--space-1); }                  /* 4px - ID rule lifted verbatim from the emitted <style> */
.sf-cb-samecat__item { float: left; list-style: none; height: 200px; }  /* <li> strip item */
.sf-cb-samecat__img  { border-width: 0px; }                             /* product thumbnail img */


/* =========================================================================
   S5 · SLIDERS & LISTINGS   (UNUSED · owner: A)
   ========================================================================= */

/* ProductSliderShorty      key=productslidershorty
   target: 6 style= -> 6 decorative, 0 (2 <style> rules computed, kept inline) */
.sf-cb-pslidershorty__admin   { right: initial; }                          /* admin editBlock link */
.sf-cb-pslidershorty__thumb   { margin-left: var(--space-1); border: 1px solid var(--sf-cb-border-light); } /* 4px; additional-image thumbs */
.sf-cb-pslidershorty__bold    { font-weight: var(--font-weight-bold); }    /* status / rating labels */
.sf-cb-pslidershorty__details { vertical-align: super; }                   /* details button */

/* LastProductsViewed       key=lastproductsviewed
   target: 4 style= + 5 static <style> rules -> 7 decorative, 5 functional
   Same #scrollable_<blockId> shape as ProductSlider (S1): re-anchored onto the
   .sf-cb-lastprod class added to the scrollable div, one class above the
   list-rotator.css plugin selectors so it wins despite head-load order.
   Runtime height/width + the hoverText position + #featured_products height
   stay inline in the C#. */
.sf-cb-lastprod { background-color: var(--sf-cb-bg-block); }                       /* scrollable container (was inline) */
.sf-cb-lastprod .name  { font-weight: var(--font-weight-bold); }
.sf-cb-lastprod .price { color: var(--site-price, #43a047); }
.sf-cb-lastprod .l-rotator { padding-top: var(--space-1) !important; } /* 4px */
.sf-cb-lastprod .l-rotator .screen {
    overflow: visible !important;
    margin: var(--gutter);   /* 15px (was inline on .screen) */
    margin-left: 0px;
}
.sf-cb-lastprod .l-rotator .inner-text {
    position: static;
    text-align: center;
    padding-top: var(--space-6);  /* 24px */
}

/* ProductGrid              key=productgrid
   target: 1 style= -> 1 decorative */
.sf-cb-pgrid__list { overflow: hidden; }   /* #list grid wrapper */

/* SelectProductGrid        key=selectproductgrid
   target: 1 style= -> 1 decorative */
.sf-cb-selpgrid__admin { border: none; }   /* admin editBlock sidemenu wrapper */


/* =========================================================================
   S6 · CATEGORY & MENUS   (UNUSED · owner: B)
   ========================================================================= */

/* TreeCategoryMenuNew      key=treecategorymenunew
   target: 0 live - the only style= (border:none at L117) sits inside a C# block
   comment, so nothing renders; S0 INVENTORY corrected in S6. */
/* .sf-cb-treecatnew { ... }  (intentionally empty - no live style to extract) */

/* SubCategoryIcons         key=othercards  (factory-key mismatch gotcha)
   target: 2 style= -> 2 decorative */
.sf-cb-othercards__box  { margin-bottom: var(--sf-cb-block-gap); }   /* outer sidemenu box */
.sf-cb-othercards__item { text-align: center; border-bottom: 1px solid var(--sf-cb-border-light); padding: 10px; font-weight: var(--font-weight-bold); } /* each sub-category card */


/* =========================================================================
   S7 · WIDGETS & FORMS   (UNUSED · owner: B)
   ========================================================================= */

/* MailingListSignupFooter  key=mailinglistsignupfooter
   target: 5 style= -> 2 decorative, 3 functional (display:none / visibility) */
.sf-cb-mlsignup__iconcell { vertical-align: middle; }   /* newsletter icon cell */
.sf-cb-mlsignup__title    { font-size: var(--font-lg); } /* 16px title cell */

/* SearchBox                key=searchbox
   target: 2 live style= -> 2 decorative (2 more sites commented out) */
.sf-cb-searchbox__body  { margin: var(--sf-cb-block-gap); }              /* search block body */
.sf-cb-searchbox__input { width: 130px; height: 18px; } /* keyword input */

/* PriceRange               key=pricerange
   target: 2 style= -> 2 decorative */
.sf-cb-pricerange__slider    { width: 100%; }   /* layout-slider wrapper */
.sf-cb-pricerange__sliderbox { display: inline-block; width: 180px; padding: var(--space-5) 0px var(--space-5) 9px; } /* 20px; slider input box */

/* EmployeesRotator         key=employeesrotator
   target: 1 style= -> 1 decorative */
.sf-cb-employeesrot__img { border-width: 0px; }   /* rotator image */

/* Manufacturers            key=manufacturers
   target: 1 style= -> 1 decorative */
.sf-cb-mfg__img { border: none; }   /* manufacturer logo img */

/* NumberVisitors           key=numbervisitors
   target: 0 live (only style= site is commented out) - nothing to extract */
/* .sf-cb-numvisitors { ... } */


/* =========================================================================
   S8 · DEAD CODE  -  extract anyway, do NOT delete   (owner: either)
   These are factory-unregistered (ImageRotatorSimple line 55 commented;
   ComplementaryProducts has no factory entry). Extracted for consistency
   pending the section 3.8 verify-then-DELETE decision.
   ========================================================================= */

/* ImageRotatorSimple       key=imagerotatorsimple (factory commented)
   target: 4 live style= -> 2 decorative, 2 functional (display:none)
   DEAD CODE: ContentBlockRenderFactory.cs line 55 _Controllers.Add(
   "imagerotatorsimple", ...) is COMMENTED OUT, so this block resolves to
   NullRenderer and never renders. Extracted for consistency; .cs NOT deleted. */
.sf-cb-imgrotsimple__admin { border: none; }        /* admin editBlock sidemenu wrapper */
.sf-cb-imgrotsimple__strip { margin-bottom: var(--sf-cb-block-gap); }  /* block wrapper (UseBox + non-box) */

/* ComplementaryProducts    key=complementaryproducts (no factory entry)
   target: 3 style= + 5 static <style> rules -> 7 decorative, 2 functional
   DEAD CODE: there is NO _Controllers.Add(...) for this controller in
   ContentBlockRenderFactory.cs, so it falls through to NullRenderer and never
   renders. Extracted for consistency; .cs NOT deleted. Same #scrollable_<blockId>
   shape as ProductSlider (S1) - re-anchored onto .sf-cb-complementary, one class
   above the list-rotator.css plugin so it would win if ever re-enabled. */
.sf-cb-complementary { background-color: var(--sf-cb-bg-block); }                       /* scrollable container (was inline) */
.sf-cb-complementary .name  { font-weight: var(--font-weight-bold); }
.sf-cb-complementary .price { color: var(--site-price, #43a047); }
.sf-cb-complementary .l-rotator { padding-top: var(--space-5) !important; } /* 20px */
.sf-cb-complementary .l-rotator .screen {
    overflow: visible !important;
    margin: var(--gutter);   /* 15px (was inline on .screen) */
    margin-left: 0px;
}
.sf-cb-complementary .l-rotator .inner-text {
    position: static;
    text-align: center;
    padding-top: var(--space-6);  /* 24px */
}


/* =========================================================================
   POST-FEATURE PROMOTIONS  -  controllers reclassified from the S0 exclusion
   list after the S0-S8 sweep, on audit (decorative chrome on controller-owned
   wrapper divs, not inside user/vendor content).
   ========================================================================= */

/* HtmlBlock2               key=htmlblock2
   Promoted from the S0 "excluded" list: its 2 style= attrs sit on the
   controller's own .sidemenu/.content wrapper divs (model.Content is injected
   INSIDE .content, not styled by these). Both are literal decorative chrome,
   identical in kind to the other blocks' box/content wrappers. */
.sf-cb-htmlblock2__box     { margin-bottom: var(--sf-cb-block-gap); }       /* 5px box frame spacing */
.sf-cb-htmlblock2__content { padding: 5px var(--gutter); text-align: justify; } /* 5px 15px content padding */


/* =========================================================================
   SHARED PRIMITIVES                        (populated from S1 onward)
   Cross-block patterns once we see them (.sf-cb-card, .sf-cb-strip,
   .sf-cb-rotator ...) live here.
   ========================================================================= */
/* (empty - filled as content-block migrations land) */


/* #########################################################################
   #                                                                       #
   #   PART 3  ·  storefront-chrome.css   ·   tag handlers/helpers · sf-ui- #
   #                                                                       #
   ######################################################################### */
/* =========================================================================
   storefront-chrome.css  -  Storefront "chrome" decoration
   -------------------------------------------------------------------------
   Global stylesheet for inline CSS emitted by C# OUTSIDE the content-block
   render controllers: the template-engine tag handlers
   (Store/code/TemplateEngine/TagHandlers/*.cs), shared helper utilities
   (Store/code/*.cs), and a few storefront controllers (Store/Controllers/*.cs).

   Wired into the active theme only (theme-MV-2026)
   via templates/parts/full-header.html, AFTER components.css (inherits its
   :root design tokens) and content-blocks.css, BEFORE the theme styles.css.

   Sibling sheets, do not duplicate their scope here:
     - components.css      -> Razor views (Store/Views/**)             prefix sf-
     - content-blocks.css  -> content-block render controllers          prefix sf-cb-
     - storefront-chrome.css (this) -> tag handlers / helpers / ctrls    prefix sf-ui-

   EXTRACTION RULE: only DECORATIVE inline styles move here (literal colors/
   borders/margins/padding/font/text-align/radius/shadow). FUNCTIONAL ones stay
   inline in the C#: JS-toggled display/visibility, values computed from a C#
   variable, inline-JS-written styles, runtime-built selectors, dead/commented.

   CASCADE RULE (the load-bearing one): styles.css loads AFTER this file. A
   class-based sf-ui- rule (specificity >= 0,1,0) BEATS the theme's element-level
   reset (a/img/span ... { border:0; vertical-align:baseline; font-size:11px }
   at styles.css:6-17) and generic a{color:#000} (:2964). It LOSES to any theme
   rule on the same element/class at specificity >= 0,1,0 OR marked !important.
   When the inline style is overriding such a theme rule, it is doing real work
   and MUST stay inline (canonical trap: ProductUtils .siteprice/.yousave, which
   styles.css sets with color/font-size !important). Verify per element in S0.

   Class prefix: sf-ui-<handlerabbrev>__element--modifier  (STRICT - every
   extracted rule is sf-ui-*; where an element already has a class, incl. a JS
   hook, ADD the sf-ui- class, never remove/rename the existing one).

   SECTION LAYOUT: one banner per scope (A,B,C,E,F,G,H,J,K) in load order. Edit
   only your scope's section. (Scopes D/I are OUT - see MASTER_TASKS.)
   ========================================================================= */


/* =========================================================================
   A · LANGUAGE / I18N
   ========================================================================= */

/* CurrentLanguageFlag.cs  <sys:currentlanguageflag>  (LIVE: full-header.html:105, header flag)
   Bespoke switcher; the lang-flag-* classes have NO competing rule in the theme
   styles.css, so these sf-ui- classes win its element reset by specificity.
   Kept INLINE in the handler (functional): .lang-flag-dropdown display:none
   (jQuery .toggle()/.hide()/:visible); each item's C#-computed activeStyle
   (background/font-weight) + its onmouseover/onmouseout JS. Strict sf-ui-: these
   classes are ADDED beside the JS-hook lang-flag-* classes. Raw values verbatim. */
.sf-ui-langflag {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 8px;
    z-index: 99999;
}
.sf-ui-langflag__flag {
    width: 24px;
    height: auto;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 2px;
}
.sf-ui-langflag__caret {
    font-size: 9px;
    vertical-align: middle;
    margin-left: 2px;
}
.sf-ui-langflag__dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    min-width: 120px;
    padding: 4px 0;
    margin-top: 4px;
}
.sf-ui-langflag__item {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    white-space: nowrap;
}
.sf-ui-langflag__item-flag {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 6px;
    border: 1px solid #ddd;
}

/* ChangeLanguage.cs  <sys:changelanguage>  (LIVE: full-footer.html:48, footer language list)
   Override-heavy by cascade: the two <li> inline styles (display/margin) OVERRIDE
   #footer li (styles.css:1012, id-specificity 1,0,1) so a class loaded before
   styles.css would lose -> KEPT INLINE. The current-language <a> disabled treatment
   has no competing rule -> extracted. The inactive <a> text-decoration:none was
   redundant with #footer a (styles.css:1022) and dropped (theme provides it). */
.sf-ui-langlist {
    margin-left: 200px;
}
.sf-ui-langlist__link--current {
    text-decoration: none;
    opacity: 0.5;
    pointer-events: none;
}


/* =========================================================================
   B · PRODUCT DETAIL
   ========================================================================= */

/* ProductFiles.cs  <sys:productfiles>  (LIVE: product-page downloads table)
   #DownloadsPanel / #FilesGridView are absent from styles.css -> clean. Classes
   added to the classless h2 and the two <tr>; the table keeps id='FilesGridView'.
   (Header row is intentionally white-on-white in the original.) */
.sf-ui-pfiles__title { color: #FFF; }
.sf-ui-pfiles__table { color: #333333; border-collapse: collapse; }
.sf-ui-pfiles__hrow  { color: White; background-color: White; font-weight: bold; }
.sf-ui-pfiles__row   { color: #333333; background-color: #F7F6F3; }

/* ProductReviews.cs  (avg-rating block on the product page)
   .ProductReviewRating theme rule is scoped to `.cell-product .…` (:2082) - does NOT
   apply here, so the class wins. The original `margin-top: 10` was unit-less (invalid,
   ignored by browsers) and is dropped; only the valid margin-bottom is kept. */
.sf-ui-previews__rating  { margin-bottom: 5px; }
.sf-ui-previews__avg-img { vertical-align: middle; }

/* ProductSelectedMaps.cs  ("you selected" wrapper)
   `.detailedList` has only descendant rules in styles.css (the bare `.detailedList`
   margin rule is commented out :2179), so this class applies. */
.sf-ui-pselmaps__list { width: 100%; margin: 10px 10px 10px 0px; }

/* ProductInfo.cs  <sys:productinfo>  (LIVE: main product panel)
   Targets uncontested in styles.css (#addToCart/#titleDesc/#pricewrapper/
   .thumbnail/._buttons/.yousave-nolonger absent; #wishlist sets only margin-top
   :1847 not text-align). EXCEPTION: the qty input also carries .forminput, and
   styles.css:1836 `.forminput { width:190px }` ties a plain class (0,1,0) and wins
   by load order -> the qty rule is scoped `input.sf-ui-pinfo__qty` (0,1,1) to keep
   the 20px width. #addToCart appears in two branches (voice vs default) with
   different styles -> two classes. The four commented-out <img> styles stay inline. */
.sf-ui-pinfo__thumb            { border-width: 0px; }
.sf-ui-pinfo__addtocart--voice { margin-top: -24px; margin-left: 120px; }
.sf-ui-pinfo__addtocart        { float: right; }
.sf-ui-pinfo__buttons          { display: inline; }
.sf-ui-pinfo__titledesc        { margin-top: -30px; }
input.sf-ui-pinfo__qty         { width: 20px; margin-right: 6px; } /* input. scope out-specifies .forminput:1836 (width:190px) */
.sf-ui-pinfo__wishlist         { text-align: right; }
.sf-ui-pinfo__wishlist-link    { margin-right: 0px; }
.sf-ui-pinfo__wishlist-text    { font-weight: bold; color: #737373; }
.sf-ui-pinfo__pricewrap        { display: flex; justify-content: space-between; align-items: self-end; }
.sf-ui-pinfo__devis            { text-align: right; }
.sf-ui-pinfo__nolonger         { background-color: red; padding: 10px 12px; border-radius: 6px; font-size: 9pt; font-weight: bold; color: white; margin-left: 18px; }
.sf-ui-pinfo__status           { font-size: 9pt; font-weight: bold; }

/* ProductVoice.cs  ("carte vocale" config page - niche product-voice template)
   Targets uncontested: #actioncolumn1 absent; #ProductControls absent (theme's
   #productcontrols is lowercase -> CSS id matching is case-sensitive, does NOT apply);
   #musiclist/#languagelist/#message-voice absent; card/clear/corner imgs are classless.
   The corner imgs are the legacy border_tl/tr.gif absolute-positioning hack.
   KEPT INLINE: the <td class='formlabel' text-align:left> at L176 (overrides
   td.formlabel, 0,1,1, which a class can't out-specify). */
.sf-ui-pvoice__col  { white-space: nowrap; }
.sf-ui-pvoice__card {
    border-right: #cdcdcd 1px solid;
    padding-right: 15px;
    border-top: #cdcdcd 1px solid;
    padding-left: 15px;
    font-weight: bold;
    font-size: 12px;
    padding-bottom: 13px;
    border-left: #cdcdcd 1px solid;
    padding-top: 13px;
    border-bottom: #cdcdcd 1px solid;
    position: relative;
    background-color: #f6f6f6;
    height: 368px;
}
.sf-ui-pvoice__clear      { clear: both; }
.sf-ui-pvoice__corner--tl { left: -1px; float: left; position: absolute; top: -1px; }
.sf-ui-pvoice__corner--tr { right: -1px; float: right; position: absolute; top: -1px; }
.sf-ui-pvoice__controls   { border-top: 0px solid #ccc; border-bottom: 0px solid #ccc; background: transparent; padding: 10px; margin: 10px 0; position: relative; }
.sf-ui-pvoice__select     { width: 280px; }
.sf-ui-pvoice__textarea   { width: 360px; height: 130px; }

/* ProductRelatedItems.cs  (cross-sell grid; emitted via HtmlTextWriter)
   EXTRACT: hp_blk_hdr width (theme #hp_blocks .hp_blk_hdr :2107 sets NO width);
   alternating-row bg (kept under the existing if(altern) C# gate); name color; the
   .controls positioning (.detailedList .controls :2206 does NOT apply here - the
   block is not inside .detailedList); #ProductImage border.
   KEPT INLINE: .hp_blk_body width/height (overrides #hp_blocks .hp_blk_body
   width:299px;height:60px :2114) and .productAccessoireContent margin-left:0
   (overrides .productAccessoireContent margin-left:10px :2439) - both are ties/
   overrides a class loaded before styles.css would lose. */
.sf-ui-prelated__hdr      { width: 804px; }
.sf-ui-prelated__row--alt { background-color: #F5F5F5; }
.sf-ui-prelated__name     { color: Black; }
.sf-ui-prelated__controls { float: right; position: absolute; bottom: 10px; right: 0; text-align: right; }
.sf-ui-prelated__img      { border-width: 0px; }


/* =========================================================================
   C · PRODUCT LIST / GRID
   ========================================================================= */

/* ProductFilter.cs  (sort / page-size / pager bar on category/search/manufacturer lists)
   The 4 style= sites are on classless wrapper elements with no competing theme rule.
   NOTE: <table width="100%"> at L109 is an HTML presentational attribute (not inline
   CSS) -> left in place; out of this feature's style=/<style> scope. */
.sf-ui-pfilter__sort      { float: left; padding-left: 4px; margin: 5px 0; }
.sf-ui-pfilter__pager     { float: right; }
.sf-ui-pfilter__pager-row { height: 17px; }
.sf-ui-pfilter__pgsize    { width: 47px; }

/* BaseProductsDisplayHandler.cs  (base for list/grid product handlers)
   #review absent from styles.css; .stars0-5 (:1816) set only background-image, so the
   stars dims are uncontested. sf-ui-stars is a SHARED PRIMITIVE: ProductUtils (Scope J)
   reuses this same class on its identical stars div - do NOT redefine it there. */
.sf-ui-plist__review { display: inline; }
.sf-ui-stars         { width: 89px; height: 17px; }


/* =========================================================================
   E · SEARCH
   ========================================================================= */

/* SearchForm.cs  (header search box + category dropdown)
   Only the classless category-dropdown wrapper is extractable. The rest stays INLINE
   (per INVENTORY): #search-header / .advanced-search override id-chain + !important
   UI-modernization rules (styles.css:668/712/4037/4104), the #search-box red border is
   written by inline JS validation, and L56-67/L66 are dead-commented. */
.sf-ui-searchform__catwrap { display: inline-block; }

/* SearchFilter.cs  (advanced-search fieldset)
   .btn-on (:3094) sets margin-right but NO margin-left; #header .btn-on (:3981) needs a
   #header ancestor this advanced-search button lacks -> margin-left uncontested. */
.sf-ui-searchfilter__btn { margin-left: 30px; }


/* =========================================================================
   F · SOCIAL
   ========================================================================= */

/* Socials.cs  <sys:socials>  (LIVE: footer follow-us icons)
   3 identical <img vertical-align:bottom> inside <p class='socials'> under #footer.
   No .socials img / #footer img theme rule, so this class (0,1,0) beats the
   styles.css img reset (img { vertical-align:baseline }, :6-17) by specificity. */
.sf-ui-socials__icon {
    vertical-align: bottom;
}


/* =========================================================================
   G · NEWSLETTER
   ========================================================================= */

/* NewsLetter.cs  <sys:newsletter>  (LIVE: full-footer.html:43, footer signup)
   Renders under #footer .footer_col. The rowspan icon cell's vertical-align is
   uncontested (only the td reset, :6-17) -> extracted. The .title font-size:16px
   is KEPT INLINE: it overrides #footer .footer_col .title { font-size:12px }
   (styles.css:997, id-chain specificity 1,0,2), so a class loaded before
   styles.css would lose and the title would shrink to 12px. */
.sf-ui-newsletter__icon-cell {
    vertical-align: middle;
}


/* =========================================================================
   H · MANUFACTURER
   ========================================================================= */

/* ManufacturerList.cs + ManufacturerFilter.cs  (brands grid + category manufacturer facet)
   The two share the legacy border_tl.gif/border_tr.gif corner-image hack -> one shared
   sf-ui-mfg__corner--tl/--tr pair. The corner imgs are classless and rely on a
   position:relative parent (.list-man-category :2215 / #manufacturer-filter :2221) which
   is unchanged. The brands-grid numbers wrapper is classless (cursor:hand is a legacy
   IE no-op, kept verbatim). */
.sf-ui-mfg__corner--tl  { left: -1px; float: left; position: absolute; top: -1px; }
.sf-ui-mfg__corner--tr  { right: -1px; float: right; position: absolute; top: -1px; }
.sf-ui-mfglist__numbers { text-align: left; width: 100%; cursor: hand; }


/* =========================================================================
   J · SHARED HELPERS
   ========================================================================= */

/* ProductUtils.cs  (RenderProductStatus badges + review stars - reused across surfaces)
   TRAP: the status-badge spans carry .siteprice/.yousave, which styles.css:1843/1795 set
   with color/font-size !important; the inline color:green/orange OVERRIDES them, so a class
   loaded before styles.css would lose -> KEPT INLINE. The admin Qty badge (if IsAdmin) is also
   inline. Extracted: review-stars dims reuse the SHARED .sf-ui-stars (defined in Scope C);
   the #review wrapper (#review absent from styles.css; if JS ever toggles it, jQuery sets
   inline display which still overrides this class). */
.sf-ui-pstatus__review { display: inline-block; vertical-align: sub; }

/* TarifsUtils.cs  ("Tarifs" price tables; RenderTarifs = the /Ajax/GetTarifs fragment)
   EXTRACT: the green-header table border + the <th> cells (bare th, uncontested). KEPT INLINE:
   the <tr class='row1'> background:#678C10 OVERRIDES .row1 {background-color:#ffffff} (:3003,
   0,1,0 tie -> a class loaded first would lose); the .psdg-top-cell border/width override
   (.psdg-top-cell :2995); the admin editBlock (if IsAdmin); the fixed widths (422/80/50%/36%)
   and clear:both (structural). .showAll has no theme rule -> its font-weight/margin extract;
   its display:none stays inline (JS "display all" toggle). */
.sf-ui-tarifs__table   { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.sf-ui-tarifs__th      { color: #FFF; background-color: #678C10; }
.sf-ui-tarifs__showall { font-weight: 600; margin-right: 10px; }

/* CategoryCriteriaUtils.cs  (price-range slider + criteria facets; storefront + ajax fragments)
   .layout-slider absent from styles.css; the slider span is classless -> both uncontested. */
.sf-ui-criteria__slider     { width: 100%; }
.sf-ui-criteria__slider-box { display: inline-block; width: 180px; padding: 20px 0px 20px 9px; }


/* =========================================================================
   K · CONTROLLERS
   ========================================================================= */

/* Storefront controllers - low-value flash/ajax message snippets.
   SHARED flash primitives (the same msg_MessageList / flash-message-warning / messageok DOM
   recurs across ProductReviews/EmailVendor/EmailFriend). Cascade: .flash-message-warning
   (:1253) sets only bg/border-color - the padding-bearing group (:1197) is commented out;
   .messageok (:565) sets only background-image; the error spans are classless -> all
   uncontested. Only storefront-rendered output is extracted; email-body styles, the
   ViewBag.style stylesheet URLs, and the Aspose Excel Style refs are OUT. */
.sf-ui-flash__warning { padding: 10px; }
.sf-ui-flash__error   { color: red; }
.sf-ui-flash__okimg   { border-width: 0px; }

/* KitsController.cs  (kit component list on the kit page; .kitcomponent absent from styles.css) */
.sf-ui-kits__title { font-weight: bold; margin-bottom: 10px; display: block; }
.sf-ui-kits__item  { color: black; }

/* AjaxController.cs  (phone-error span, returned via Content() to the storefront; #MessageErrorPhone absent) */
.sf-ui-ajax__phone-error { color: Red; font-size: medium; }

/* RevendeurController.cs  (reseller category checkbox; theme :2660 sets only margin-left,
   so vertical-align/margin-right are uncontested - margin-left left to the theme) */
.sf-ui-revendeur__cat-check { vertical-align: middle; margin-right: 5px; }


/* =========================================================================
   CLEANUP · post-audit live decorative misses (reclassified from OUT)
   -------------------------------------------------------------------------
   Three tag-handler styles first marked OUT that the whole-project audit found
   to be LIVE + decorative. All uncontested in styles.css. */
.sf-ui-pshare__link      { cursor: pointer; }        /* ProductShare.cs share links (href-less onclick anchors) */
.sf-ui-psuggested__pane  { margin-top: 10px; }       /* ProductsSuggested.cs #suggested-items-pane */
.sf-ui-link__dealer-icon { vertical-align: bottom; } /* Link.cs dealer download icon (reseller-only) */


/* #########################################################################
   #                                                                       #
   #   PART B  -  ORIGINAL THEME styles.css starts here                    #
   #                                                                       #
   ######################################################################### */


/* =========================================================================
   THEME · BASE, RESET, SHELL & GLOBAL
   ========================================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 11px; /*00%;*/
	font-family: inherit;
	vertical-align: baseline;
}
body {
 background: #F7F8FC; 
 font-family: Arial, Verdana, Sans-Serif; color:#000; font-size: 13px;line-height:1.385em;
 }
.clear {clear:both;}
.padded {padding:10px;}
.sidepadded {padding:0 10px;}
#whatsapp-bloc .message 
{
    position: absolute;
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 8px;
    width: 280px;
    height: 100%;
    top: -160%;
    border-radius: 8px;
    right: 10px;
    box-shadow: -2px 2px 2px #c0c0c038;
}
#whatsapp-bloc .message-layout 
{
    position: absolute;
    top: -600%;
    right: 0;
    width: 340px;
    border-radius: 8px;
    box-shadow: 1px 1px 4px #80808069;
}
#whatsapp-bloc .message-layout #header .profile-image 
{
    position: relative;
    width: 100%;
    background: white;
    border-radius: 50%;
}
#whatsapp-bloc .message-layout #header .profile .status 
{
    position: absolute;
    right: -2%;
    bottom: 12%;
    background: #4ad504;
    border: 1px solid black;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
#whatsapp-bloc .message-layout #header .profile 
{
    position: relative;
        width: 20%;
}
#whatsapp-bloc .message-layout #header
{
    position: relative;
    padding: 18px;
    background: linear-gradient(to right, rgb(64 190 72), rgb(42 167 50));
    border-radius: 8px 8px 0 0;
}
#whatsapp-bloc .message-layout #close-layout-btn
{
    position: absolute;
    right: 2px;
    top: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: .5s;
}
#whatsapp-bloc .message-layout .msg-box-layout .msg-box::before 
{
    content: "\A";
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    left: -4%;
    top: 10%;
}
#whatsapp-bloc .message-layout .send-msg 
{
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 6px;
    border-radius: 0 0 8px 8px;
}
#whatsapp-bloc .message-layout .send-msg #send-msg-btn 
{
    background: none;
    border: none;
    cursor: pointer;
    transition: .5s;
}
#whatsapp-bloc .message-layout .send-msg #send-msg-btn:hover 
{
    opaicty: .8;
}
#whatsapp-bloc .message-layout .send-msg #send-msg-btn .send-btn 
{
    width: 20px;
}
#whatsapp-bloc .message-layout .send-msg #client-msg 
{
    font-size: 16px;
    width: 80%;
    border: none;
    outline: none;
    padding: 8px 14px;
} 
#whatsapp-bloc .message-layout #close-layout-btn .close-svg 
{
    width: 18px;
}
#whatsapp-bloc .message-layout #close-layout-btn:hover
{
    opacity: .8;
}
#whatsapp-bloc .message-layout #header .header 
{
    display: flex;
    align-items: center;
    gap: 8px;
}
#whatsapp-bloc .message-layout #header .header .name 
{
    color: white;
    font-size: 13px;
    font-weight: bold;
    margin-left: 6px;
    margin-bottom: 0;
    letter-spacing: .5px;
}
#whatsapp-bloc .message-layout .msg-box-layout 
{
    background-color: #e6ddd4;
    position: relative;
    height: 160px;
}
#whatsapp-bloc .message-layout .msg-box-layout .msg-box 
{
    background: white;
    position: absolute;
    top: 16px;
    left: 24px;
    border-radius: 6px;
    padding: 12px;
    width: 55%;
    box-shadow: 1px 1px 4px #80808036;
}
#whatsapp-bloc .message-layout .msg-box-layout .msg-box .msg, #whatsapp-bloc .message-layout .msg-box-layout .msg-box .name 
{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}
#whatsapp-bloc .message-layout .msg-box-layout .msg-box .name 
{
    color: rgba(0,0,0,0.4);
}
#whatsapp-bloc .message-layout .msg-box-layout .msg-box #time 
{
    color: rgba(0,0,0,0.4);
    margin-bottom: 0;
}
#whatsapp-bloc .message-layout .msg-box-layout .msg-box-bg
{
    position: absolute;
    background: url(/images/whatsapp_background.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: .1;
}
#whatsapp-bloc #whatsapp-btn 
{
    background: transparent;
    border: none;
    cursor: pointer;
    transition: .5s;
}
#whatsapp-bloc #whatsapp-btn:hover 
{
    opacity: .8;
}
#whatsapp-bloc .message button
{
    height: fit-content;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: 1s;
}
#whatsapp-bloc .message .msg p
{
    font-size: 13px;
    margin-top: 6px;
    font-weight: 400;
    letter-spacing: .2px;    
}
#whatsapp-bloc .message button:hover 
{
    opacity: .8;
}
#whatsapp-bloc .message .notification
{
    display: flex;
}
#whatsapp-bloc .message .notification .msg .loader 
{
    position: absolute;
    top: -5%;
    left: 10%;
    width: 100px;
    height: 100px;
}
#whatsapp-bloc .message .notification .name 
{
    font-size: 16px;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 0;
}
#whatsapp-bloc .message .profile-image 
{
    width: 60px;
    background: white;
    border-radius: 50%;
}
#whatsapp-bloc .whatsapp-logo 
{
    transform: rotate(0deg);
    animation: shake ease-in-out 2s infinite;
}
#whatsapp-bloc::before {
    content: "";
    background: #30bf39;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    animation: circle linear 1s infinite;
}
@keyframes circle {
  0% { opacity: 1; width: 0%; height: 0%; }
  100% { opacity: 0.2; width: 180%; height: 180%; }
}
@keyframes shake {
  50% { transform: rotate(0deg); }
  75% { transform: rotate(20deg); }
  80% { transform: rotate(0deg); }
  85% { transform: rotate(15deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); }
}
#whatsapp-bloc, #instagram-bloc {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 10;
}
#whatsapp-bloc a.whatsapp-link, #instagram-bloc a.instagram-link {
    display: block;
    text-decoration: none;
}
#whatsapp-bloc .whatsapp-btn-wrap { background: #5ACC70; }
#whatsapp-bloc img.whatsapp-logo, #instagram-bloc img.instagram-logo {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: 9px;
}
#whatsapp-bloc::after 
{
    content: "";
    position: absolute;
    right: 15%;
    top: 5%;
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
a { color:#444444; text-decoration:none; }
a:hover { color:var(--site-link-hover,#3399ff); }
ol, ul { list-style:none outside none; margin:0.5em; padding:0; }
input { vertical-align: top; }
p, ul,ol,blockquote,pre,td,th,label { font-size:1em; line-height:1.5em; margin:0 0 0.56em; }
div, p, li, font, td { color: #444; font-family: Arial,Helvetica,sans-serif; font-size: 11px; line-height: 16px; }
caption,th,td { vertical-align:top; text-align:left; padding:0; font-weight:normal; }
.forminput { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid var(--site-border,#cccccc); color: #000000; height: 20px; padding: 0 0 0 4px; vertical-align: middle; }
input[type=image] { padding:0 5px; }
.right { float:right; }
table { border-collapse: separate; border-spacing: inherit; width: 100%; }
h5 {
    background: none;
    color: #444444;
    font-size: 1em;
    font-weight: bold!important;
    line-height: 1.6em;
    margin: 0;
    padding: 0px 0px 2px 15px;
}

/* ============================================================ */
/* RESPONSIVE: box-sizing only for elements using calc() widths */
#main-with-left-nav,
#categorymain,
#homepagecolumn2,
#maincolumn,
.store-category-page #maincolumn,
.myaccountpage #maincolumn,
.myaccountorderdetailspage #maincolumn,
.store-product-page #margincolumn,
.checkout .sections,
.sponsers .sponinner,
.sponsers h5,
.sponsers .spnscrousal,
.carouselsec_wrapp {
    box-sizing: border-box;
}

/* Wraps the entire site                                        */
/* ============================================================ */
#site-wrapper 
{
   width: 100%; /* RESPONSIVE */
   max-width: 1820px; /* RESPONSIVE: was fixed 1050px */
   min-width: 320px; /* RESPONSIVE: allow reflow down to mobile (was 1050px) */
   margin-left: auto;
   margin-right: auto;
   padding:0;
   color:#000000;
   font-size:11px;
   height:100%;
}

/* --- Shell width is admin-driven -----------------------------------------
   The site/shell max-width follows Admin > Themes > Site Settings, emitted by
   SiteThemeCss.Build() into the MV-SITE-THEME block at the end of this file
   (#site-wrapper,#site-content{max-width:<SiteWidthValue> !important}). The
   base #site-wrapper/#site-content rules above provide a non-!important
   fallback (1820px) used only if the admin block is absent. Do NOT re-add a
   hardcoded `body #site-wrapper` override here — it would out-specify the
   managed block and pin the width, defeating the site setting. */

/* Icons */
.editBlock { background:url('assets/editBlock.png') no-repeat scroll 0 0 transparent; height:24px; width:24px; display:block; position:absolute; right:4px; z-index:20; }
/* Category/product list: the admin edit pencil sits BEHIND the product image
   (image link is z-index:2) so it doesn't cover the product photo. */
.cell-product .editBlock, .product-line .editBlock, .detailedList .editBlock { z-index:1; }
.icons { background:url('assets/icons.png') no-repeat scroll 0 0 transparent; display:inline-block; vertical-align:middle; }
.icons1 { background: url('assets/icons.png') no-repeat 0 0; display: inline-block; vertical-align: middle; }
#sub-categories { border-left: 1px solid var(--site-border,#cdcdcd); }
#sub-categories td { border-bottom: 1px solid var(--site-border,#cdcdcd); border-right: 1px solid var(--site-border,#cdcdcd); padding-top:10px; }
#sub-categories .category-image,#sub-categories .category-name { text-align:center; }

/* Header Top */
.site_border_top
{
    border-collapse:separate;
    border-spacing:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    width:100%; /* RESPONSIVE */
    max-width:1820px; /* RESPONSIVE: was fixed 1049px */
    table-layout:fixed; /* RESPONSIVE FIX: prevent table expansion */
}
.site_top_right, .site_top_left { background-repeat:no-repeat; height:12px; padding-left:0; padding-right:0; width:21px; }
.site_top_left { background:none; width:15px; }
.site_top_right { background:none; }
.site_top { background:none; height:8px; }
.site_top div { background:none; border:0 solid #FFFFFF; position:relative; width:100%; /* RESPONSIVE: was fixed 1007px */ }
.blockcontent { padding:5px; z-index:560; }
.messageok { background-image:url('buttons/Messageok.png'); }

/* Header */
/* Header chrome layout (flex): logo (left) + header-content column (right).
   Items inside #header-content wrap onto rows via flex — no absolute/magic
   offsets — so the header stays aligned at any (admin-driven) shell width. */
#header { z-index: 540; padding-left: 10px; padding-right: 10px; min-height: 90px; }
#header #main { margin:0 auto; padding:0; position:relative; text-align:left; clear:left; display:flex; align-items:flex-start; gap:16px; }
/* Logo sprite: 728x90, two 364px halves. Normal = left half (0 0),
   hover = right half (-364px 0). The swap must be INSTANT — never animate
   background-position or the sprite scrolls/slides instead of cutting. */
#header #logo { background:none no-repeat scroll 0 0 transparent; display:block; flex:0 0 341px; height:90px; width:341px; transition:none; }
#header #logo:hover { background-position:-342px 0; transition:none; }
#newHeader #logo { transition:none; }
#newHeader #logo:hover { background-position:-342px 0; transition:none; }

.store-phone { font-size: 22px; font-family: Arial, Helvetica, sans-serif; color: var(--site-content-text,#000000); font-weight: bold; }
#table { border-collapse: separate; border-spacing: 0; width: 100%; }
#header #header-content { text-align:right; min-height: 100px; flex:1 1 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px 12px; position:relative; }
#header #header-content br.clear { display:none; }   /* rows handled by flex-wrap, not <br> */
#header ul { display:block; list-style:none outside none; margin:0; padding:0; position:relative; }
/* Row 1: nav links + cart + language flag, packed to the right.
   order:-2 keeps it first (above the call-back/search row) even though the
   call-back widget is pulled left with a negative order below. */
#header #top-menu { order:-2; flex:1 0 100%; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; margin-bottom:6px; position:relative; z-index:9999; }
#header li { display:inline; margin:0; padding:0; }
#header #top-menu li { display:inline-flex; align-items:center; font-weight:bold; line-height:14px; margin-left:10px; }
#header a:hover { color:var(--site-link-hover,#3399ff); text-decoration:underline; }
#header #shopping_cart { background-position:-180px -38px; height:14px; padding-right:19px; width:120px; }
/* Row 2: call-back widget (left/middle) + search widget (right). The call-back's
   margin-right:auto pushes this search box to the right edge of #header-content. */
#header #search-header { width: 330px; text-align:left; }
#header #search_img { background-position:-185px 0; border:medium none; float:right; height:24px; width:96px; }
#header #search_left_cap,#header #search_right_cap { background-position:-449px -112px; background-repeat:no-repeat; float:left; height:24px; width:5px; }
#header #search_right_cap { background-position:-459px -112px; float:right; margin-right:8px; }
#header #search-box { border-style:solid; font-size: 11px; height:20px; padding:1px 4px; vertical-align:middle; width:200px; border-radius: 5px; margin-right: 5px; }
#header .advanced-search { background:none !important; display:block; width:auto; margin:5px 4px 0 0; padding:0; border:none; text-align:right; }
#header .advanced-search a { font-size:11px; color:var(--site-muted,#666666)!important; text-decoration:none!important; white-space:nowrap; }
#header .advanced-search a:hover { text-decoration:underline!important; }
#header #chat-header { line-height:30px; margin-right:100px; position:relative; text-align:left; float:right; }   /* legacy chat block; #search-header is a flex item, not floated */
#header #chat-header p { font-size:9px; line-height:20px; }
#header #chat-header-link { background:none; display:inline-block; height:50px; left:160px; padding:0 0 0 28px; position:absolute; top:0; width:39px; }
#header .header-webcallback{}
/* Call-back widget: lives inside #header-content (after the search form in the
   DOM). order:-1 places it just under the nav row and before the search on its
   line; margin-right:auto eats the free space so the widget sits at the LEFT
   (≈ middle of the header) and pushes the search box to the RIGHT.
   position:relative anchors its own absolutely-positioned internals (chat icon,
   preview, bg image). */
#header #chat-header-callback{order:-1;flex:0 0 auto;background: none;width: 225px;padding-left: 92px;margin-right: auto;padding-top: 26px;line-height: 23px;position: relative;margin-left: 0;margin-top: 0px;text-align: left;float: none;}
#header #chat-header-link-callback{background: none;display: inline-block;height: 50px;position: absolute;top: -5px;width: 39px;left: 272px;margin-top: 24px;padding: 0 0 0 29px;}
#header .webcallback-bgimage{background:none;width: 95px;height: 107px;position: absolute;margin-left: -86px;margin-top: -60px;}
#header .phone-number{width: 140px;border-style: solid;height: 20px;padding: 2px 0 0;vertical-align: middle;font-size: 11px;color: #999;}
#header #btnCallHeader{height: 24px;vertical-align: top; padding: 0 0 0 4px;}
#header #webcallback-txt{margin-left: 11px;font-size: 10px;}

/* Header menu */
#header-menu { margin-top:3px; margin-left:-6px; }
#header-menu table { background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae)); display:inline-block; height:36px; }
#header-menu table td { background:none; vertical-align:middle; }
#header-menu table td.simple .flyout_position { background:none; }
#header-menu table td.simple .flyout_position:hover { background:var(--site-header-end,#497bae); }
#header-menu .flyout_position { background:none; height:35px; position:relative; z-index:999; }
#header-menu .flyout_position:hover { background:var(--site-header-end,#497bae); }
#header-menu .top_cat_link { color:var(--site-header-text,#FFFFFF); display:block; font-size:11px; font-weight:normal; line-height:13.5px; padding:11px 11px 4px 15px; margin-left:2px; margin-right:16px; text-align:center; text-decoration:none; white-space:nowrap; }
#header-menu .sub_menu_flyout { padding:0 5px 5px 0; position:absolute; visibility:hidden; top:35px; }
#header-menu td:hover .sub_menu_flyout { visibility:visible; }
#header-menu .flyout_left { left:0; }
#header-menu .flyout_right { right:-5px; }
#header-menu .flyout_inner { background:var(--site-page-bg,#FFFFFF); border-left:1px solid var(--site-border,#DDDDDD); overflow:hidden; }
#header-menu .flyout_column { float:left; width:200px; }
#header-menu .categories_listing { display:block; line-height:1; list-style-type:none; margin:10px; padding:0; }
#header-menu .categories_listing .title { border-bottom:1px solid var(--site-border,#EEEEEE); font-weight:bold; margin-bottom:5px; padding:0 5px 5px; }
#header-menu .categories_listing .title a { color:var(--site-content-text,#444); display:inline; font-size:14px; line-height:14px; text-decoration:none; }
#header-menu .categories_listing .title a:hover { text-decoration:underline; }
#header-menu .categories_listing .cat_link { margin-left: 10px; color:var(--site-content-text,#444); display:block; line-height:16px; padding:3px 5px; text-decoration:none; }
#header-menu .categories_listing .title a.orphan { margin-left: 0px !important; color:var(--site-content-text,#444444); font-size:12px; }
#header-menu .categories_listing .sg_link { color:var(--site-content-text,#444); display:block; padding:3px 5px; text-decoration:none; }
#header-menu .categories_listing .more_link { color: var(--site-content-text,#000000); display: block; padding: 3px 5px; text-decoration: none; }
#header-menu .categories_listing .cat_link:hover { background-color:#EAEEF5; color:var(--site-content-text,#000000); text-decoration:underline; }
#header-menu li { margin:0; padding:0; }

/* ============================================================ */
/* Main Content Wrapper                                         */
/* ============================================================ */
#site-content 
{
    width:100%; /* RESPONSIVE */
    max-width:1820px; /* RESPONSIVE: was fixed 1049px */
    margin:0 auto;
    padding:0 10px;
    border-collapse:collapse;
    table-layout:fixed; /* RESPONSIVE FIX: prevent table from expanding beyond max-width */
}
#site-main { background-color:#FFFFFF; }
.site_border_left { background:none; width:10px; }
.site_border_right { background:none; width:10px; }
#site-content #container
{
    border:0 solid #FFFFFF;
    position:relative;
    width:100%; /* RESPONSIVE: was fixed 1030px */
}
#main-with-left-nav {
    width:calc(100% - 260px); /* RESPONSIVE: was fixed 752px, 260px = left-nav + gap */
    float:right;
    margin: 0px 0px 0px 0;
}
.store-home-page #main-content 
{
    width:100%; /* RESPONSIVE: was fixed 1015px */
    z-index:560;
}

/* Footer */
/* ============================================================
   FOOTER — modernized (2026).
   Variable-driven (--footer-*) so the values can be surfaced to
   the admin panel later without touching these rules. The layout
   SKELETON (fluid width, flex columns, wrapping) is provided by
   the managed MV-SITE-THEME block at the END of this file; the
   rules below are the SKIN (color, type, spacing, dividers).
   Selectors/ids/classes are preserved — only their styling changed.
   ============================================================ */
/* Units: % for horizontal layout/widths; rem for type + vertical/fine
   spacing (where % is illegal or would couple to width); px kept only
   for sprite icons, hairline borders, and radius. Root = 16px. */
:root {
    /* Matches the site theme: every colour links to a global --site-* token
       (merchant-editable in Admin > Site Settings), with the original light
       value as a fallback. Change the theme → the footer follows. */
    --footer-bg:            var(--site-surface, #f6f6f6);       /* footer surface           */
    --footer-text:          var(--site-content-text, #444444);  /* body / description text  */
    --footer-heading:       var(--site-muted, #666666);         /* muted column titles      */
    --footer-link:          var(--site-content-text, #444444);  /* links                    */
    --footer-link-hover:    var(--site-link-hover, #3399ff);     /* link hover               */
    --footer-accent:        var(--site-link, #5599cc);          /* accent                   */
    --footer-border:        var(--site-border, #cdcdcd);        /* dividers                 */
    --footer-muted:         var(--site-muted, #666666);         /* copyright / socials text */
    --footer-bar-bg:        var(--site-header-start, #555555);  /* tagline bar (= header)   */
    --footer-bar-text:      var(--site-header-text, #ffffff);   /* tagline bar text         */
    --footer-bottom-bg:     var(--site-page-bg, #ffffff);       /* bottom bar surface       */
    --footer-input-bg:      var(--site-page-bg, #ffffff);       /* newsletter field bg      */
    --footer-input-text:    var(--site-content-text, #2d2d2d);  /* newsletter field text    */
    --footer-badge-bg:      var(--site-page-bg, #ffffff);       /* price / CMI badge box    */
    --footer-chip-bg:       rgba(0, 0, 0, 0.06);                /* social chip (light theme)*/
    --footer-chip-bg-hover: rgba(0, 0, 0, 0.12);                /* social chip hover        */
    --footer-pad-y: 4rem;    /* generous vertical breathing room */
    --footer-pad-x: 2.5%;    /* horizontal: % of the footer width */
    --footer-employee-w: 16%; /* width of the left employee column */
    --footer-radius: 0.375rem;
}

/* Tagline strip ("Les experts du e-Commerce ...") above the footer */
.bar {
    background: var(--footer-bar-bg);
    color: var(--footer-bar-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: .04em;
    height: 2.75rem;
    line-height: 2.75rem;
    margin-top: 1.5rem;
    overflow: hidden;
    text-align: center;
    text-transform: uppercase;
}

/* Footer shell. width / max-width / box-sizing / overflow come from
   the managed block; here we set the skin only. */
#footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    position: relative;
    clear: both;
    padding: 0;
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* Column row. display:flex / flex-wrap / gap / margin-left come from
   the managed block; here we add inner padding + alignment. */
/* CSS Grid for the four columns. `div.menu` (higher specificity) overrides
   the managed block's display:flex / gap:20px. About column wider. */
#footer div.menu {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
    padding: var(--footer-pad-y) var(--footer-pad-x);
    /* clear the absolutely-positioned employee column on the left */
    padding-left: calc(var(--footer-employee-w) + var(--footer-pad-x));
}

/* Each column. float:none / width:auto / min-width / height come
   from the managed block; we make them equal flexible columns and
   drop the old bevel borders for a clean look. flex-basis in % so the
   four columns share the row width and wrap fluidly. */
#footer .footer_col {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    overflow: visible;
    text-align: center;
}

/* Column heading: small, uppercase, letter-spaced, muted */
#footer .footer_col .title {
    margin: 0 0 1.25rem;
    padding: 0 0 0.625rem;
    border-bottom: 1px solid var(--footer-border);
    clear: both;
}
#footer .footer_col .title h4 {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--footer-heading);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Link lists. Consistent vertical rhythm + an animated underline-grow. */
#footer ul { list-style: none outside none; margin: 0; padding: 0; }
#footer .menu li { display: block; margin: 0 0 0.6rem; padding: 0; }
#footer .menu a {
    display: inline-block;
    padding: 0;
    color: var(--footer-link);
    font-size: 0.875rem;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color .2s ease, background-size .25s ease;
}
#footer a { color: var(--footer-link); text-decoration: none; }
#footer .menu a:hover { color: var(--footer-link-hover); background-size: 100% 1px; text-decoration: none; }
#footer a:hover { color: var(--footer-link-hover); text-decoration: none; }

/* Best-price column */
#footer #best_price { text-align: center; }
/* Badge on a white rounded container so it reads on the dark footer */
#footer #best_price img { max-width: 100%; height: auto; background: var(--footer-badge-bg); border-radius: 6px; padding: 6px 8px; box-sizing: border-box; }

/* Newsletter column. The #go arrow and #newsletter_img are sprite
   slices — their px positions/sizes are pixel-locked and stay px. */
#footer #newsletter .title { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.25rem; }
#footer #newsletter table { margin: 0 auto; }
#footer #newsletter_img { background-position: -368px -119px; display: inline-block; vertical-align: middle; height: 24px; margin-right: 5px; width: 35px; }
#footer #email {
    box-sizing: border-box;
    width: 100%;
    max-width: 16rem;
    height: auto;
    padding: 0.5625rem 0.75rem;
    margin: 0.5rem auto 0;
    border: 1px solid var(--footer-border);
    border-radius: var(--footer-radius);
    background: var(--footer-input-bg);
    font-size: 0.8125rem;
    color: var(--footer-input-text); /* dark text — input stays white on the dark footer */
    vertical-align: middle;
    display: block;
}
#footer .load-newsletter { display: block; position: absolute; margin-right: 0px; margin-left: 146px; margin-top: 3px; visibility: hidden; }
#footer #newsletter-message { display: none; float: left; }
#footer #go { background-position: -285px -4px; border: medium none; height: 17px; margin: 0.75rem 0 0; width: 17px; display: inline-block; vertical-align: middle; cursor: pointer; }

/* Bottom bar (language / socials / copyright / security). box-sizing
   & max-width come from the managed block. */
.bottom_footer {
    background: var(--footer-bottom-bg);
    padding: 1.125rem var(--footer-pad-x);
    /* clear the employee column so the centered content sits beside it */
    padding-left: calc(var(--footer-employee-w) + var(--footer-pad-x));
    border-top: 1px solid var(--footer-border);
    text-align: center;
}
/* Center the language-switcher row. The ChangeLanguage handler hard-codes
   an inline margin-left:200px on its wrapper <div> — neutralized here so
   the flags sit centered (footer CSS only; no handler edit). */
#footer .bottom_footer .right > div { margin-left: auto !important; margin-right: auto !important; text-align: center; }
#footer .bottom_footer .right #choice { display: inline-block; margin: 0; padding: 0; }
#footer .socials { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; float: none; color: var(--footer-muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; height: auto; margin: 0.75rem 0; }
#footer .socials span { margin: 0 0.375rem 0 0; }
/* Social icons as circular chips that lift on hover */
#footer .socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--footer-chip-bg); transition: background .2s ease, transform .2s ease; }
#footer .socials a:hover { background: var(--footer-chip-bg-hover); transform: translateY(-2px); }
#footer .socials img { vertical-align: middle; }
#footer .bottom_footer .terms_info { color: var(--footer-muted); font-size: 0.75rem; font-variant: normal; text-transform: none; line-height: 1.6; vertical-align: bottom; text-align: center; }
#footer .security { margin-top: 0.75rem; }
/* Payment/security badge on a white rounded container */
#footer .security img { max-height: 2.5rem; width: auto; background: var(--footer-badge-bg); border-radius: 6px; padding: 6px 8px; box-sizing: border-box; }

/* Employee photo — a full-height column down the LEFT side of the
   footer (top to bottom). The menu + bottom bar reserve left padding
   to clear it. The wallpaper/ad <script> it carries runs independently
   of this styling. */
#footer .employee {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--footer-employee-w);
    margin: 0;
    padding: 0;
    border-right: 1px solid var(--footer-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#footer .employee table { margin: 0 auto; }
#footer .employee img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 0; }

/* Narrow widths: stack columns and drop the employee left-column so it
   can't overlap wrapped content. (Theme has no viewport meta, so this
   only fires on narrow desktop windows; phones use the /mobile site.) */
@media (max-width: 768px) {
    #footer div.menu { grid-template-columns: 1fr; gap: 2rem; padding-left: var(--footer-pad-x); }
    #footer .bottom_footer { padding-left: var(--footer-pad-x); }
    #footer .employee { position: static; width: auto; border-right: 0; border-top: 1px solid var(--footer-border); }
}

/* Border bottom */
.site_border_bottom
{
    border-collapse:separate;
    border-spacing:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    width:100%; /* RESPONSIVE */
    max-width:1820px; /* RESPONSIVE: was fixed 1049px */
    table-layout:fixed; /* RESPONSIVE FIX: prevent table expansion */
}
.site_bottom_left,.site_bottom_right { background:none; height:21px; margin:0; padding:0; width:21px; }
.site_bottom_right { background:none; }
.site_bottom_left { background:none; width:14px; }
.site_bottom { background:none; height:21px; }
.site_bottom div { background:none; border:0 solid #FFFFFF; width:100%; /* RESPONSIVE: was fixed 1007px */ }

.socialfooter {border-top:dashed 1px #cfd3d6;border-bottom:dashed 1px #cfd3d6; margin:10px;padding:10px 0;}
.socialfooter span a {padding:0 10px;text-decoration:none;}
.topfooter {padding:10px 0;margin:0 10px;border:solid 1px #dee2e5; background-color:#f7f8f9;color:#7b8ca1;}
.topfooter a {color:#7b8ca1;}
.bottomfooter, .bvtag {display:block;padding:10px;}
#footer .bvtag a {color:#7b8ca1;}
.footerblock {width:300px; height:100px;float:left;text-align:left;}
.footerblock.mid {margin:0 17px;}
.footerblock p {padding:0 0 0 5px;}
.footerblock h3 {display:block;width:300px;height:19px;}
.footerblock h3 span {display:none;}
.footerblock h3.aboutus {background: none;}
.footerblock h3.ourguarantee {background: none;}
.footerblock h3.contactus {background: none;}

/* Holds all left navigation items */
#left-nav-column {
    width:250px; /* RESPONSIVE: was fixed 220px */
    float:left;
}

/* ListRotator */
.containerrotator { margin-left:0px; }

/* ListRotator slide list — fonts + colours follow the admin Site Settings tokens
   (Admin > Themes > Site Settings). The `.containerrotator` prefix raises specificity
   above the plugin defaults in Scripts/ListRotator/css/list-rotator.css, so these win
   regardless of load order — no !important needed. Fallbacks = the original colours. */
.containerrotator .l-rotator,
.containerrotator .l-rotator .thumbnails .thumb,
.containerrotator .l-rotator .title,
.containerrotator .l-rotator .adtext {
    font-family: inherit;                              /* follow admin Body Font */
}
.containerrotator .l-rotator .title {
    color: var(--site-link, #5599cc);                  /* slide title -> site link/accent colour (fallback = site blue, never the old green) */
}
.containerrotator .l-rotator .thumbnails .thumb {
    color: var(--site-content-text, #676767);          /* description -> site content text colour */
    background: var(--site-surface, #f6f6f6);          /* flat surface instead of the PNG texture */
    border-bottom: 1px solid var(--site-border, #cdcdcd);
}
.containerrotator .l-rotator .thumbnails li.selected,
.containerrotator .l-rotator .thumbnails li.selected .thumb {
    background: var(--site-button-bg, #497bae);        /* selected row -> site button colour */
    color: var(--site-button-text, #ffffff);
}

/* Flash Messages */
.flash-message-info { width:100%; min-height: 50px; border:1px solid #177AC0; background-color:#8DD1F4; font-size:13px; font-family:Arial; font-weight:bold; background-image:url('/Images/info3.png'); background-position: top left; background-repeat:no-repeat; }
.flash-message-info .msg { margin-left:60px; margin-right:10px; font-size:13px; font-family:Arial; font-weight:bold; margin-top: 15px; }
.flash-message-success { background-color: #DFFFDF; border: #3C3 solid 1px; font-size: 13px; font-family: arial; font-weight: bold; padding: 4px; } 
.flash-message-failure { width: 100%; min-height: 50px; border: 1px solid #BF0000; background-color: #f89299; font-size: 13px; font-family: Arial; font-weight: bold; background-image: url('/Images/error.png'); background-repeat: repeat-y; background-position: top left; }
.flash-message-failure .msg { margin-left:60px; margin-right:10px; font-size:13px; font-family:Arial; font-weight:bold; margin-top: 15px; }
.flash-message-warning { background-color: #fffed7; border-color: #B3B300; }
.flash-message-warning .msg { color:red; }

/* General Text */
h1 { font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 23px; font-weight:bold; line-height: 27px; margin-bottom:9px; margin-top:12px; padding: 8px; background: none; }
h2 {font-size:22px;line-height:1em;color:#000000;margin:9px 0;font-weight:bold;}
h3 {font-weight:bold;color:#000000;font-size: 13px;line-height:1.385em;}
h4 {font-weight:bold;font-size:14px;line-height:1.286em;margin:0 9px; padding:7px 9px 9px 9px;color:#000000;}
h6 {font-weight:bold;font-size:12px;line-height:1.286em;margin:0 9px; padding:4px 5px 5px 4px;color:#000000;}
.smalltext {font-size:11px;line-height:1.63636;}
.curved {border-radius:10px;}

/* Homepage */
#welcome-text, #featured-products {margin:0 9px;}
#welcome-text {padding:0 0 18px 0;width:677px;}

/* left nav styles */
#left-nav-column .category-tree {list-style:none;margin:0 0 0 9px;}
#left-nav-column .link-tree {list-style:none;margin:0 0 0 9px;}
#left-nav-column .category-tree li {font-size:14px;line-height:1.286em;}
#left-nav-column .link-tree li {font-size:14px;line-height:1.286em;}
#left-nav-column .category-tree li a {text-decoration:none;color:#333;display:block; width:212px;/* RESPONSIVE: was fixed 182px */ height:35px;border-top:solid 1px #ccc; overflow:hidden;}
#left-nav-column .category-tree li a span {margin:7px 9px 0 9px;display:block;}         
#left-nav-column .category-tree li a:hover {background-color:#efefef;}
#left-nav-column .link-tree li a {text-decoration:none;color:#333;display:block; width:212px;/* RESPONSIVE: was fixed 182px */ height:35px;border-top:solid 1px #ccc; overflow:hidden;}
#left-nav-column .link-tree li a span {margin:7px 9px 0 9px;display:block;}         
#left-nav-column .link-tree li a:hover {background-color:#efefef;}


/* =========================================================================
   THEME · CART & CHECKOUT
   ========================================================================= */

/* Shopping Cart */
#cart-table {border:solid 1px #ccc;width:100%;margin:9px 0 18px 0;}
#cart-table th {background-color:#999;color:#fff;text-align:right;font-weight:bold; padding:0 9px;}
#cart-table td {padding:9px 7px;text-align:right;}
#cart-table .left {text-align:left;}
#cart-table td.left {border-top:dashed 1px #ccc;}
.cart-item-description {font-weight:bold;color:#666;font-size:14px;line-height:1.286em;}
.cart-item-sku, .cart-item-dateadded {font-size:11px;line-height:1.636em;color:#666;}
#cart-page .cart-totals {border-top:solid 1px #666;font-weight:bold;}
#cart-page .cart-totals .total {display:block;width:300px;height:18px;float:right; margin:9px 0;text-align:left;clear:both;}
#cart-page .cart-totals .total label {font-size:14px; line-height:1.286em;color:#666;text-align:right; display:block;width:178px;float:left;}
#cart-page .cart-totals .total span {font-size:18px;line-height:1em;text-align:right; display:block;width:120px;float:right;}
#cart-page td a.tiny-action {font-size:11px;text-decoration:none;}
#cart-page td a.tiny-action:hover {text-decoration:underline;}
#cart-page #cart-controls {height:36px;font-size:18px;margin:0.5em 0 1em 0;}
#cart-page #cart-controls .controls-left {width:49%;float:left;}
#cart-page #cart-controls .controls-right {width:49%;float:right;text-align:right;}

/* Checkout Page */
.checkout {}
.checkout .sections {
    width:calc(100% - 370px); /* RESPONSIVE: was fixed 750px, accounts for sidebar */
    float:left;
}
.checkout .section-sidebar {
    width:350px; /* RESPONSIVE: was fixed 220px */
    float:right;
}
/* CSS spinner for checkout loading overlay (replaces loading.gif) */
.checkoutloading { bottom:0; top:0; left:0; position: absolute; right:0; z-index:100; background:rgba(255,255,255,0.76); display:none; display:flex; align-items:center; justify-content:center; }
.checkoutloading::after { content:''; width:36px; height:36px; border:4px solid var(--site-border,#cccccc); border-top-color:var(--site-header-end,#497bae); border-radius:50%; animation:mv-spin .8s linear infinite; }
/* Green checkmark text indicator replacing done.png */
.checkout-loggedin { background: none; color: green; margin-top: 6px; padding-left: 20px; }
#totalsastable { text-align:right; }
.checkout h2 {font-size:22px;color:#333;padding:0;margin:0.5em 0 0.5em 0;}
.section-email,.section-shipping,.section-billing,.section-delivery,.section-payment,.section-totals,.section-extras,.section-actions,.section-cart {padding:12px 12px 8px 10px;position:relative; margin:0 0 9px 0;}
.section-actions {text-align:center;padding-top:11px;}
.requiredfield{color:Red;}
.section-email #customeremail {width:500px;}
.section-actions{ border: 1px solid var(--site-border,#cdcdcd); margin: 0 0 6px;}
.checkout .formlabel {font-size:14px;color:#666;}
.checkout .address-table, .checkout .creditcardinput table {margin:1em auto;font-size:14px;color:#666;}
.checkout .address-table select, .checkout .address-table input, .section-email input, .creditcardinput input, .creditcardinput select {font-size:17px; border:solid 1px #ccc;}
.address-item { border:1px solid #EEEEEE; display:inline-block; margin:10px; padding:5px 10px; width:230px; }
.existed-addresses { overflow-y: scroll; border: 1px solid var(--site-border,#cdcdcd); width: 290px; height: 270px; }
.address-choose { display: block; font-size: 16px; font-weight: bold; text-align: center; width: 280px; border:1px solid var(--site-border,#cccccc); padding:12px 0 0; height:28px; cursor:pointer; }
.disabled-td { background-color:White; bottom:0; opacity:0.5; position:absolute; top:60px; width:350px; }
.active-address { background-color:var(--site-border,#cdcdcd)!important; color:Black!important; }
.section-totals {font-weight:bold;}
.section-totals .total {display:block;width:300px;height:18px;float:right;margin:9px 0;text-align:left;clear:both;}
.section-totals .total label {font-size:14px; line-height:1.286em;color:#666;text-align:right;display:block;width:178px;float:left;}
.section-totals .total span {font-size:18px;line-height:1em;text-align:right;display:block;width:120px;float:right;}
.checkout .checkout-label {color:#666;text-align:right;vertical-align:top;}
.checkout .address-table td, .checkout .creditcardinput td {padding:1px 3px;}
.checkout .checkout-button {font-size:18px;font-weight:bold; background-color:Green;color:White;}
.input-validation-error, .checkout .input-validation-error {border:solid 1px #f00;background-color: #fee;}
.validation-summary-errors {color:#333;}
.validation-summary-errors li {border-style: solid;border-width: 1px 0px 1px 3px;padding: 0.5em 1em;font-size: 16px; margin:0.25em 0;color: #333;background-color: #fee;border-color: #f00;list-style:none;}
#cart-addresses {margin:18px 0;}
#cart-addresses #billing-address {width:345px;float:left;}
#cart-addresses #shipping-address {width:214px;float:right;}
#SiteMapColumns ul {margin:0em 0 0em 0em; list-style:none;}
#SiteMapColumns li {margin:0 0 0 1em;}
#SiteMapColumns strong {font-weight:bold;}

#categorymain{
    width:calc(100% - 160px); /* RESPONSIVE: was fixed 810px */
    float:left;
    padding-left:5px;
    margin-left:0;
}


/* =========================================================================
   THEME · COLUMNS, BRANDS, MENUS & PAGINATION
   ========================================================================= */

/* Columns */
#homepagecolumn1 {width:200px;float:left; margin:5px -2px;position:relative;}
#homepagecolumn2 {
    width:calc(100% - 220px); /* RESPONSIVE: was fixed 804px */
    float:left;
    margin:5px 5px;
}
#homepagecolumn3 {margin:0 0 0 0px;clear:both;}
#homehero {display:block;margin:0;width:616px;height:400px;}
.newthisweek {height:200px;margin:0;padding:0 20px;}
.newthisweek h2 {margin:0;font-size:24px;color:#666;}
.newthisweek h2 span {display:block;padding:10px 0;}
.newthisweek ul {margin:10px 30px;}
.newthisweek li {margin-bottom:5px;}
.newthisweek li a {text-decoration:none;font-size:16px;color:#000;}
#homesidead1 {display:block;height:200px;width:313px;margin:0;padding:0;}
.homebanner {height:175px;float:left;width:303px;margin:10px 10px 0 0;}
#homead3 {margin:10px 0 0 0;width:313px;}

/* Brands */
.page_header { font-size: 22px; font-weight: normal; line-height: 22px; margin: 14px 0; position: relative; background: none; color: #000000; padding: 0px; margin: 9px 0px 6px; font-family: Tahoma,Arial,Helvetica,sans-serif; font-style: normal; }
h1 span { font-size: inherit; }
#alphabet_links { margin: 16px 0; }
#alphabet_links a,#alphabet_links span { display: block; float: left; font-size: 12px; font-weight: bold; margin-right: 1px; padding: 2px 6px; }
.brand_row { border-bottom: 1px solid var(--site-border,#cccccc); padding: 3px 0; }
.brand_row_header { border: 0 none; padding: 10px 0 5px; }
.brand_row_header .l { color: #000000; font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 20px; font-style: normal; font-weight: bold; }
.brand_row .l { float: left; text-indent: 3px; width: 295px; }
.brand_row_header .r, .brand_row .r { float: right; text-align: right; width: 295px; }
.editaddress td { vertical-align:middle; }
.editaddress input[type="text"] { width:300px; }

#navcolumn, #categoryleft {
    width:150px; /* RESPONSIVE: was fixed 200px */
    float:left;
}
#maincolumn {
    width:calc(100% - 260px); /* RESPONSIVE: was fixed 800px */
    float:right;
    margin-left: 5px;
}
.store-category-page #maincolumn,.myaccountpage #maincolumn,.myaccountorderdetailspage #maincolumn,.store-product-page #margincolumn {
    width:calc(100% - 260px); /* RESPONSIVE: was fixed 806px */
    float:right;
    margin-left: 5px;
}
.store-category-page #main-content,.store-product-page #main-content,.myaccountpage #main-content,.myaccountorderdetailspage #main-content
{
    width:100%; /* RESPONSIVE: was fixed 1015px */
    z-index:560;
    padding:6px 8px;
}
#main-content { padding:5px 8px; }
#categorymain .title-category{border-right: var(--site-border,#cdcdcd) 1px solid; padding-right: 15px; border-top: var(--site-border,#cdcdcd) 1px solid;padding-left: 15px; font-weight: bold; font-size: 12px; padding-bottom: 13px;border-left: var(--site-border,#cdcdcd) 1px solid; padding-top: 13px; border-bottom: var(--site-border,#cdcdcd) 1px solid;position: relative; background-color: var(--site-surface,#f6f6f6) }
.catordercombo {color: #444;font-family: Arial,Helvetica,sans-serif;font-size: 11px;line-height: 16px;}

/* Column Blocks */
.decoratedblock .input { height:18px; padding:3px 0 1px 7px; }
.blockcontent { padding: 7px 1px 6px 6px; }

/* Column Menu Lists */
.corner-tl,.corner-tr { background:none; border:0 none; height:5px; margin:0; overflow:hidden; padding:0; position:absolute; width:5px; }
.corner-tl { background-position:0 0; left:-1px; top:-1px; }
.corner-tr { background-position:-5px 0; right:-1px; top:-1px; }
.sidemenu { border:1px solid var(--site-border,#cdcdcd); border-radius:var(--site-radius,5px); box-sizing:border-box; background:var(--site-page-bg,#ffffff); margin:0 0 6px; position:relative; }
/* Sidemenu header -> site header gradient + text (was sidemenu_bg.png). Themed
   site-wide from the admin Site Settings (--site-* tokens): SideMenu "Menu
   Rapide", category-tree menus, checkout sections and RSS boxes all share it.
   No overflow:hidden (would clip checkout overlays) — the header rounds its
   own top corners to match the container radius. */
.sidemenu .header { background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae)); border-bottom:0; border-top-left-radius:var(--site-radius,5px); border-top-right-radius:var(--site-radius,5px); color:var(--site-header-text,#ffffff); position:relative; }
.sidemenu .header .header_title { border-bottom:0; color:var(--site-header-text,#ffffff); font-weight:bold; padding:8px 12px; }
.sidemenu .header .corner-tl, .sidemenu .header .corner-tr { display:none; } /* drop legacy PNG corners */
.sidemenu .blue_header { background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae)); margin-bottom: -1px; height: 27px; color: white; line-height: 27px; padding: 0 10px; position: relative; font-weight: bold; }
.sidemenu .blue_header span { background: none; position: absolute; right: 0; top: 0; height: 27px; width: 6px; display: inline-block; overflow: hidden; }
.sidemenu .body ul { margin:0 0 10px 15px; padding:0; }
.sidemenu .body li { margin:0; padding:0; }
.sidemenu .gh_text { border-bottom: 1px solid #E5E5E5; font-weight: bold; padding: 5px 10px; }
.sidemenu .body a { background:none; margin-top:1px; padding-left:16px; display:block; text-decoration:none; }
.sidemenu a:hover { text-decoration:underline; }

/* Menu link lists — SideMenu ".body > ul" ("Menu Rapide") and RSS ".content > ul":
   site link colour + a themed CSS arrow replacing the red sidemenu_item_bg.png
   bullet. Scoped to direct ul>li>a so checkout form sections (.body > .section-*)
   and .mv-btn links are never matched, and category-tree menus (.sidemenu_body)
   keep their own +/- markers. Fonts/sizes inherit the admin Body Font. */
.sidemenu .body > ul,
.sidemenu .content > ul { margin:0; padding:4px 0; list-style:none; }
.sidemenu .body > ul > li,
.sidemenu .content > ul > li { margin:0; padding:0; }
.sidemenu .body > ul > li > a,
.sidemenu .content > ul > li > a { background:none; position:relative; display:block; margin:0; padding:3px 12px 3px 22px; color:var(--site-link,#2489ce); text-decoration:none; }
.sidemenu .body > ul > li > a::before,
.sidemenu .content > ul > li > a::before { content:""; position:absolute; left:11px; top:50%; margin-top:-4px; border-style:solid; border-width:4px 0 4px 5px; border-color:transparent transparent transparent var(--site-link,#2489ce); }
.sidemenu .body > ul > li > a:hover,
.sidemenu .content > ul > li > a:hover { color:var(--site-link-hover,#3399ff); text-decoration:underline; }
.sidemenu .body > ul > li > a:hover::before,
.sidemenu .content > ul > li > a:hover::before { border-left-color:var(--site-link-hover,#3399ff); }

/* Responsive: stack the home rail full-width above the main column on narrow
   viewports. (Theme has no viewport meta -> fires on narrow desktop windows;
   phones use the separate /mobile site.) ".homepage #id" out-specifies any
   admin-set .hp-rail / #homepagecolumn width in the MV-SITE-THEME block. */
@media screen and (max-width:768px) {
    .homepage #homepagecolumn1,
    .homepage #homepagecolumn2 { float:none !important; width:auto !important; margin-left:0; margin-right:0; }
}

/* Pagination */
.pager .disabled { color: #ccc; }
.pager { float: right; margin: 2px 2px 0 0; padding: 0; text-align: right; }
/* Sign-in: own right-aligned row at the bottom of the header column (was
   position:absolute top:70px — replaced by an in-flow flex row, see #header-content). */
#header .signin{ flex:1 0 100%; text-align:right; width:auto; }
.pager ul {list-style: none outside none;margin: 0;padding: 0; display:block;}
.pager ul li {display:inline-block;margin:0 0px;padding:0;color:#fff;font-size:85%;vertical-align:top; }
.pager ul li a{color:Black;}
.catordercombo, .ulpaging {display: inline;}
.pager a{background-image: url("/Images/Buttons/paging_counter.jpg");border: 1px solid var(--site-border,#cdcdcd);color: #444;margin: 1px 2px;padding: 1px 5px;text-decoration: none;font-weight: bold; display:block; height:16px;}
.pager li.current a{background-image: url("/Images/Buttons/paging_current.jpg");border: 1px solid var(--site-border,#cdcdcd);color: white;padding: 1px 5px;text-decoration: none;font-weight: bold;}
.pager input{background-image: url("/Images/Buttons/paging_counter.jpg");border: 1px solid var(--site-border,#cdcdcd);color: #444;padding: 1px 4px;}
.pager li.current input {background-image: url("/Images/Buttons/paging_current.jpg");border-color: var(--site-border,#cdcdcd);border-right: 1px solid var(--site-border,#cdcdcd);border-style: solid;border-width: 1px;font-weight: bold;color: white;margin: 2px;padding: 1px 5px;}
.navigation {height: 14px;margin-top: 0px;border: 1px solid var(--site-border,#cdcdcd) !important;}
.pager a:hover, .pager a:active, .pager input:hover, .pager input:active{background-image: url("/Images/Buttons/paging_counter_hover.jpg"); border: 1px solid var(--site-border,#cdcdcd); color: #000000; cursor: pointer;}


/* =========================================================================
   THEME · PRODUCT LISTINGS & PAGES
   ========================================================================= */

/* Simple & Bulk Order Lists */
.categorysimplelisttemplate {padding:0 0 10px 0;}
.categorysimplelisttemplate .record {display:block;margin:0 0 0.5em 0;width:100%;/* RESPONSIVE: was fixed 700px */}
.categorysimplelisttemplate .recordsku, .categorybulkorderlisttemplate .recordsku, .categorybulkquantitylisttemplate .recordsku {float:left;text-align:left;width:20%;}
.categorysimplelisttemplate .recordname, .categorybulkorderlisttemplate .recordname, .categorybulkquantitylisttemplate .recordname {text-align:left;float:left;width:45%;margin:0 10px 0 0;}
.categorysimplelisttemplate .recordprice, .categorybulkorderlisttemplate .recordprice, .categorybulkquantitylisttemplate .recordprice {text-align:right;float:right;width:30%;margin:0;}
.categorybulkorderlisttemplate .record { width:100%; /* RESPONSIVE: was fixed 600px */ padding: 0 0 10px 10px; margin: 0 0 8px 0; border-bottom: 1px solid #eee; float: left; }
.categorybulkorderlisttemplate table td { vertical-align: top; }
.categorybulkorderlisttemplate .checkbox {width:50px;text-align:center;}
.categorybulkquantitylisttemplate .record { width:100%; /* RESPONSIVE: was fixed 600px */ padding: 0 0 10px 0; margin: 0 0 8px 0px; border-bottom: 1px solid #eee; float: left; }
.categorybulkquantitylisttemplate table td { vertical-align: top; }
.categorybulkquantitylisttemplate .quantityfield {width:50px;text-align:center;}

/* Details List */
.categorytitle h1 {line-height:19px;border: 1px var(--site-border,#cdcdcd) solid;background: var(--site-surface,#f6f6f6);padding: 13px 15px;font-weight: bold;font-size: 12px;border-top-left-radius: 5px;border-top-right-radius: 5px;display: block;margin-bottom: 0px;margin-top: 0px;}
.categorydetailedlisttemplate .record {margin:0 0 10px 0px;padding-bottom:10px;width:100%;/* RESPONSIVE: was fixed 700px */ float:left;border-bottom: 1px solid #ddd; text-align:left;}
.categorydetailedlisttemplate .recordimage {float:left;margin:0 20px 0 0;text-align: center;}
.categorydetailedlisttemplate .recordname {text-align:left;}
.categorydetailedlisttemplate .recordsku {text-align:left;}
.categorydetailedlisttemplate .recordprice {text-align:left;}
.categorydetailedlisttemplate .recordshortdescription {text-align:left;}
.product-filter{font-weight: bold; font-size: 12px; border: var(--site-border,#cdcdcd) 1px solid; position: relative;background-color: var(--site-surface,#f6f6f6);margin-bottom:8px;}

/* With Subs */
.block2 {margin: 10px 0;}
.block2 .header {border: 1px solid var(--site-border,#cdcdcd); border-top:none;border-top-left-radius: 5px;border-top-right-radius: 5px;height: 33px;padding-left: 10px;background: var(--site-surface,#f6f6f6);}
.block2 .header a {display: block;line-height: 33px;color: #444;font-size: 14px;font-weight: bold;text-indent: 15px;white-space: nowrap;text-decoration: none;}
.block2 .header a:hover{color: #000000; text-decoration:underline;}
.block2 .content {border-right: 1px solid var(--site-border,#cdcdcd);border-left: 1px solid var(--site-border,#cdcdcd);border-bottom: 1px solid var(--site-border,#cdcdcd);padding: 10px 0;}
.block2 .record {float: left;margin-bottom: 20px;border-left: 1px solid #F0F0F0; width:266px;}
.block2 .record.first-record {border-left: none;}
.recordimage {text-align: center;}
.block2 .content a {text-decoration: none;color: #000000;line-height: 13px;text-align: center;}
.recordname a {text-align: center;color: #000000;font-family: Arial,Helvetica,sans-serif;font-size: 11px;font-weight: bold;line-height: 16px;text-decoration: none;}
.block2 .recordname {text-align:center;line-height:1.5em;}

/* Product Pages */
#wait { position: absolute; top: 0; right: 0; font-weight: bold; font-size: 80%; padding: 0 10px; background: #c00; color: #fff; }
#productpage .imagecolumn {float:left;width:460px;}
#productpage .actioncolumn {float:right;width:460px;}
#productpage .informationcolumn {clear:both;}
#productpage .options {margin:10px 0;}
#productcontrols label {display:block;width:150px;float:left;clear:both;text-align:right;font-weight:bold;margin:0 0 5px 0;}
#productcontrols .choice {display:block;width:270px;float:left;margin:0 0 5px 20px;text-align:left;}
#productpage #ProductReviews {clear: both;}
.productimage {margin: 0px 0; position: relative; overflow: visible; }

/* Product Prices */
#productPrices_prices .prices p{margin: 0 !important;}
#productPrices_prices .prixPublic{color: red !important;text-decoration: line-through;}
#productPrices_prices .prixSpecial span{font-size: 11pt;font-weight: bold;color: Green !important;}
.public-price,.public-price span{color: red;text-decoration: line-through;margin: 0 0 0 0 !important;}
.your-price,.your-price span{font-size: 14pt;font-weight: bold;color: Green;margin: 0 0 0 0 !important;} /* RESPONSIVE SIZE: was 11pt */
#productPrices_prices .prixSpecialOverrided {text-decoration: line-through;color: Red;}
#productPrices_prices .prixSpecialOverrided span {font-size: 9pt;}
#productPrices_prices .economie {color: Orange;}  
.yousave-price {color: orange !important;}
.yousave, .YouSave { color: white !important; font-size: 115% !important; font-weight: bold !important; white-space: nowrap; background: orange; padding: 3px 8px; border-radius: 6px; }
.your-siteprice{color:Red;font-size:10pt;text-decoration:line-through;margin: 2px 0 0 0 !important;}
.size-listprice{font-size: 9pt !important;}
.small-TTC{margin: -2px 0;font-size:10px; color:#fff;margin: -6px 0px 0px 0px;font-size: 9px;display: block;}
.mention{font-size:8px !important;}
.on-order{font-size:11pt;color:Orange;font-weight:bold} /* RESPONSIVE SIZE: was 9pt */
.in-stock{font-size:11pt;color:green;font-weight:bold} /* RESPONSIVE SIZE: was 9pt */
.stars0{background-image:url("assets/stars0.png");}
.stars1{background-image:url("assets/stars1.png");}
.stars2{background-image:url("assets/stars2.png");}
.stars3{background-image:url("assets/stars3.png");}
.stars4{background-image:url("assets/stars4.png");}
.stars5{background-image:url("assets/stars5.png");}

/* Product Controls Box */
#productcontrols { border-top: 1px solid #e4e4de; border-bottom: 1px solid #e4e4de; background: #f5f5ef; padding: 10px; margin: 10px 0; position: relative; }
td.formlabel { padding-right: 5px; text-align: right; white-space: nowrap; width: 120px; }
td.formfield { text-align: left; white-space: nowrap; }
.forminput { width: 190px; }
.productpropertylabel { padding-right: 5px; text-decoration: none; }
.listprice, .ListPrice {text-decoration: line-through; color:#999;}
.siteprice, .SitePrice {color: white;font-size: 115% !important;font-weight: bold !important;white-space: nowrap;background: green;padding: 3px 8px;border-radius: 6px;}
#productcontrols .buttons {clear:both;margin:10px 0 5px 170px;}
#buttons input { margin: 5px; }
#wishlist { margin-top: 5px; }
.product-class-status .yousave { color: white !important; font-size: 120% !important; font-weight: bold !important; white-space: nowrap; background: orange; padding: 6px 16px; border-radius: 6px; }
.product-class-status .siteprice {color: white;font-size: 130% !important;font-weight: bold !important;white-space: nowrap;background: green;padding: 6px 16px;border-radius: 6px;}

/* Search Results */
.searchresults { margin: 10px auto; width:100%;/* RESPONSIVE: was fixed 705px */}

/* Product Content */
#productContent
{
    width: 100%; /* RESPONSIVE: was fixed 772px */
    border: 1px solid var(--site-border,#cdcdcd);
    margin: -35px 0 10px 0;
    padding: 46px 15px;
    position: relative; /* anchor for the absolutely-positioned #iconPromo badge */
}
h1 #producttitle { font-family: tahoma,Arial,Helvetica,sans-serif; font-size: 18px; margin: 0; padding: 5px 0 0; color: #444; background: none; }
#rightContent { float: right !important; }
#rightContent, #imgProduct { float: left; position: relative; }
#imgProduct { width: 350px; text-align: center; margin-right: 10px; }

/* Select Product Viewer */
#select-product-viewer { width: 100%; box-sizing: border-box; } /* RESPONSIVE: was inline width:814px on the block (removed from render controller) */
#select-product-viewer .list-wrap { /* font-family/font-size removed so the AJAX-loaded product list inherits the admin Body font (Admin > Themes > Site Settings) */ padding-bottom:10px; padding: 2px;background-color: var(--site-content-bg, #ffffff);border:solid 1px var(--site-border, #9DA6A8);border-top:none;margin-top: 0;display: block;width: 100%;box-sizing: border-box;/* RESPONSIVE: was inline-table + fixed 1015px. border-top removed + margin-top:0: the panel sits flush under the tabs and the tabs' own bottom borders form the top edge (unselected tab = grey separator, selected tab = white = merged). Avoids the old -7px overlap whose side-border tails dangled past the line. */ min-height: 50px;overflow:hidden;}
#select-product-viewer ul { list-style: none; }
#select-product-viewer ul li a { display: block; padding: 4px; color: #666; text-decoration:none; }
#select-product-viewer ul li a:hover { background: #333; color: white; }
#select-product-viewer .list-wrap ul li:last-child a { border: none; }/* scoped to the content panel — was '#select-product-viewer ul li:last-child a', which stripped the border off the last NAV tab (Offres spéciales). The .nav tabs are bordered by '.nav li a' below. */
#select-product-viewer .nav { width: 100%;/* RESPONSIVE: was fixed 1016px. NOTE: no overflow:hidden here — the active tab (a.current) is 6px taller than .nav and must overflow downward to merge over .list-wrap's top border; clipping it re-creates the line under the selected tab. Floats are contained via the clearfix below. */}
#select-product-viewer .nav:after { content: "";display: block;clear: both; }
#select-product-viewer .nav li { width: 25%; box-sizing: border-box; float: left; margin: 0;display:block; height:30px; } /* RESPONSIVE: 4 tabs each 25% fill the width and sit flush — removes the old 4px inter-tab gap */
#select-product-viewer .nav li.last { margin-right: 0; }
#select-product-viewer .nav li + li a { border-left: none; }/* adjacent tabs share a single 1px divider (the previous tab's right border) instead of an empty gap / 2px double border, while keeping the panel left+right alignment */
/* RESPONSIVE: tabs were a fixed-width icons.png sprite (0 -138/-108/-78px) that
   could not fill a fluid (calc 25%) tab. Replaced with a scalable CSS background
   that paints at any width; border matches the .list-wrap border (#9DA6A8) and the
   active tab goes white to merge with the body below it. */
#select-product-viewer .nav li a { font-size: 13px;font-weight: bold;line-height: 25px;text-align: center;display: block; padding: 5px;background:var(--site-surface, #ececec);border:1px solid var(--site-border, #9DA6A8);border-radius:var(--site-radius, 5px) var(--site-radius, 5px) 0 0; color:var(--site-muted, #666);cursor: pointer; }/* colors from Site Settings: surface=tab bg, border=divider/panel border, muted=label. unselected tabs keep a full border incl. bottom = the separator line under them */
#select-product-viewer .nav li a:hover, #select-product-viewer .nav li a:focus { background:var(--site-surface, #dcdcdc);color:var(--site-content-text, #222);filter:brightness(0.96)}
#select-product-viewer li a.current,#select-product-viewer li a.current:hover { background:var(--site-content-bg, #ffffff) !important; color: var(--site-content-text, #000);position: relative; z-index: 2; border-bottom-color:var(--site-content-bg, #ffffff); filter:none; /* selected tab bg + hidden bottom border both = --site-content-bg (same as .list-wrap) so it merges into the panel; unselected tabs keep their --site-border bottom border as the separator */ }

/* Product Grid */
.ProductGrid{border-collapse:collapse;margin-top: 0px; position: relative; overflow:hidden; } /* RESPONSIVE FIX: overflow:hidden for float containment */
.Product-line {width:100%;min-height:260px;margin-top:10px;margin-bottom:10px;overflow:hidden; } /* RESPONSIVE FIX: was height:260px, now min-height so rows wrap */
.cell-product {width:260px;min-height: 500px;margin-top:10px;float:left; margin-left:15px; position:relative; margin-bottom:15px; text-align: center;} /* RESPONSIVE SIZE: was 190px/340px */
.cell-product .grid-top-left{ width:9px; height:7px;background:none;margin:0;padding:0; float:left;}
.cell-product .grid-top{ width:251px; height:7px;background:none;margin:0;padding:0; float:left;} /* RESPONSIVE SIZE: was 181px */
.cell-product .grid-left{ width:9px; height:410px;background:none;margin:0;padding:0; float:left;} /* RESPONSIVE SIZE: was 250px */
.ProductGrid .first{margin-left:0px}
.cell-product .image {height: 220px;text-align: center;} /* RESPONSIVE SIZE: +30%, was 170px */
.cell-product .image img {width: 81%;height: auto;max-height: 170px;object-fit: contain;} /* RESPONSIVE SIZE: -10% */
.cell-product .sku {font-weight: bold;color: #000000;text-decoration: none;padding:0 0 0 5px;font-size:13px;} /* RESPONSIVE SIZE: added font-size */
.cell-product .description {height: 55px;line-height: 18px;margin: 0 5px 2px 0;overflow: hidden;padding:0 0 14px 5px;font-size:13px;} /* RESPONSIVE SIZE: was 41px height, added font-size */
.cell-product .description a, .cell-product .description a:hover {color: #4C4D4F;text-decoration: none;}
.cell-product .priceSite {height: 20px; margin-top:5px;}
.cell-product .priceSite a {color: #F30;font-weight: normal;text-decoration: line-through;padding:0 0 0 5px;font-size:13px;} /* RESPONSIVE SIZE: added font-size */
.cell-product .price a {color: green;font-weight: bold;text-decoration: none;font-size: 18px;padding:0 0 0 5px;} /* RESPONSIVE SIZE: was 14px */
.cell-product .more_details {height: 22px;margin-top: 0px;padding:0 0 0 5px;width:120px} /* RESPONSIVE SIZE: was 90px */
.cell-product .ProductReviewRating {color: #000000;text-decoration: none;height:19px;margin-top:5px;margin-left:2px; font-size: 12px;margin-bottom: 6px;} /* RESPONSIVE SIZE: was 10px */
.cell-product .block-addtocart{text-align: center;padding-left: 15px;}
.bikemaps .cell-product { float:none;position:inherit;}

/* Product List */
.productgreffet {left: 0;top: 0; position: absolute;}
.productreduce {right: 0;top: 0; position: absolute;}
.detailedList .activemode{background-color: var(--site-border,#cdcdcd);}
.detailedList .product-line{padding-right: 0px;width:100%;border-color:var(--site-border,#cdcdcd);border-width:1px;border-style:solid;display:inline-block;margin-top:-1px;}
.detailedList div, .detailedList p, .detailedList li, .detailedList font, .detailedList td{font-family: Arial, Helvetica, sans-serif;line-height: 22px;font-size:13px;} /* RESPONSIVE SIZE: was 16px line-height, 11px font */
.detailedList select, input{font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #444;}
.detailedList .public_price{color: #ff0000;text-decoration: line-through;}
.detailedList .user_price{font-weight: bold; font-size: 13pt; color: green;} /* RESPONSIVE SIZE: was 9pt */
.detailedList .site_price{font-weight: bold; font-size: 13pt; color: green;} /* RESPONSIVE SIZE: was 9pt */
.detailedList .product_discount_adverts{background-color: #F9F9F9; border-bottom: 1px solid var(--site-border,#cdcdcd);border-collapse: collapse; border-left: 1px solid var(--site-border,#cdcdcd); border-spacing: 0;height: 28px; position: relative; margin-top: -4px; text-align: center; width: 163px;margin-bottom: 8px}
.detailedList p{margin: 4px 0px;}
.detailedList .product-line .button{margin-right:5px;float: right;}
.detailedList .products_content{padding-bottom: 10px;border-bottom: 1px solid var(--site-border,#cdcdcd);border-left: 1px solid var(--site-border,#cdcdcd);border-right: 1px solid var(--site-border,#cdcdcd);}
.detailedList .first_products{border-top: 1px solid var(--site-border,#cdcdcd);}
.detailedList .product_image {display: block;float: left;position: relative;text-align: center;width: 286px;padding: 15px 0;} /* RESPONSIVE SIZE: +30%, was 220px */
.detailedList .product_image img {width: 210px;height: auto;} /* RESPONSIVE SIZE: -10% */
.detailedList .product_image .link{display:block;text-align:center}
/* RESPONSIVE FIX: center review, stock status, compare below image */
.detailedList .product_image .ProductReviewRating,
.detailedList .product_image .in-stock,
.detailedList .product_image .on-order,
.detailedList .product_image .compare_link_enabled,
.detailedList .product_image .MTC {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.detailedList .price{line-height: 14px;font-size: 13pt;color: green;font-weight: bold;} /* RESPONSIVE SIZE: was 9pt */
.detailedList .public_price{ color: red;}
.products_header {width:100%;background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae));padding-top: 2px;height: 33px;text-align: center;border:var(--site-border,#cdcdcd) 1px solid; margin-top:-1px;}
.products_header a{font-size: 17px;font-weight: bold;line-height: 30px;}
.detailedList .controls{text-align: right;}
#sort_options{background-color: #F3F4F4;border: 1px solid var(--site-border,#cdcdcd);padding-left: 10px;margin-bottom: 0px;}

/* Display style */
.product-filter .display{float: left; padding-left: 4px; margin: 3px;}
.product-filter .display-mode {float: left;margin-top: 1px;margin-bottom:1px;margin-left:2px;padding: 4px !important;cursor:pointer;}
.product-filter .display-mode:hover {background-color: var(--site-border,#cdcdcd);}
.product-filter .total-items{margin: 8px 10px 0 8px; font-weight: bold; font-size: 13px;float: left;}
.current_style {float: left;margin-top: 3px;margin-left:2px; padding: 4px !important;background-color: var(--site-border,#cdcdcd);}
.display_style {float: left;margin-top: 1px;margin-bottom:1px;margin-left:2px;padding: 4px !important;cursor:pointer;}
.display_style:hover {background-color: var(--site-border,#cdcdcd);}
.display-mode {float: left;margin-top: 1px;margin-bottom:1px;margin-left:2px;padding: 4px !important;cursor:pointer;}
.display-mode:hover {background-color: var(--site-border,#cdcdcd);}
.categorysortorder{padding-left:0;padding-top:2px;width:139px;}
.CatorderText {color: #444;font-family: Arial,Helvetica,sans-serif;font-size: 11px;line-height: 16px;width: auto; font-weight:bold}
.cat-order, .ulPaging {display: inline;}
.cat-order,.page-size{color: #444;font-family: Arial,Helvetica,sans-serif;font-size: 11px;line-height: 16px;}
.page-size {margin-top:6px;width:43px;}
.sort-order, .ulPaging {display: inline;}
.sort-order{color: #444;font-family: Arial,Helvetica,sans-serif;font-size: 11px;line-height: 16px;}

#divLoading { left: 50%; margin: 0; position: fixed; top: 38%; border:1px solid var(--site-muted,#666666); width:200px; height:50px; padding:10px 0px 5px 50px; z-index:100; background-color:#FFFFFF; display:none }
/* CSS spinner replacing the loading.gif asset */
@keyframes mv-spin { to { transform: rotate(360deg); } }
.imgLoading { width: 32px; height: 32px; position: absolute; top: 5px; left: 5px; border: 3px solid var(--site-border,#cccccc); border-top-color: var(--site-header-end,#497bae); border-radius: 50%; animation: mv-spin .8s linear infinite; }
.imgMax { display: none; left: 10px; position: absolute; z-index: 1; }


/* =========================================================================
   THEME · CAROUSEL, CART PAGE & MISC
   ========================================================================= */

/* Carousel — "EN PROMOS" featured-products strip.
   Modernized to a single responsive card: a coloured header band + a body that
   lays the items in a flex row and scrolls horizontally when there are many.
   The old sprite tab / sudoSlider markup is gone (the slider JS never loaded —
   malformed src — so the box was just a static, mostly-empty full-width strip). */
.sponsers {
	width:100%;
	margin:0 0 14px;
	box-sizing:border-box;
}
.sponsers .sponinner {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	background:#fff;
	border:1px solid var(--site-border,#cdcdcd);
	border-radius:var(--site-radius,5px);
	overflow:hidden;
	box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.sponsers .sponshead {
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 14px;
	background:var(--site-header-end,#396b9e);
}
.sponsers .sponshead h5,
.sponsers h5.colr {
	width:auto;
	height:auto;
	margin:0;
	padding:0;
	background:none;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	line-height:1.2;
	text-transform:uppercase;
	letter-spacing:.04em;
}
.sponsers .round-right { display:none; } /* decorative sprite cap — no longer used */
.sponsers .spnscrousal {
	width:100%;
	height:auto;
	padding:12px;
	background:#fff;
	box-sizing:border-box;
}
.carouselsec_wrapp {
	width:100%;
	position:relative;
	margin:0;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
}
.carouselsec_wrapp::-webkit-scrollbar { height:8px; }
.carouselsec_wrapp::-webkit-scrollbar-thumb { background:#cfd4da; border-radius:4px; }
#mycarousel {
	display:flex;
	flex-wrap:nowrap;
	gap:10px;
	margin:0;
	padding:2px;
	list-style:none;
}
.carouselsec_wrapp ul li a img { display:block; }

/* =========================================================================
   CART PAGE — Modern flat card look
   ========================================================================= */

/* Constrain the cart to a centered max-width (don't span the full page) */
.mv-cart-wrap { max-width: 1100px; margin: 0 auto; }
.mv-cart-wrap::after { content: ""; display: table; clear: both; }

/* Cart container — white card */
#cartcontainer {
    background: #fff;
    border: 1px solid var(--site-border,#e0e0e0);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
    margin-bottom: 18px;
}

/* Cart item image */
.cartitemimage { margin: 0; }
.cartitemimage img { border: 1px solid var(--site-border,#e0e0e0); border-radius: 6px; background: #fff; max-width: 100%; height: auto; display: block; }
.cartitemdescription { margin: 5px; }

/* Cart product grid */
#cartcontainer tr td { padding: 12px; vertical-align: top; }
#cartcontainer .productimagecolumn { text-align: center; }
#cartcontainer, #cartactions, #cartcoupons { margin: 0; }
td.productquantitycolumn { text-align: center; width: 10%; }
td.productquantitycolumn input[type="text"] { text-align: right; }
td.productquantitycolumn a { text-align: center; }
td.producttotalcolumn, td.productpricecolumn { text-align: right; width: 17%; }
td.producttotalcolumn { background-color: var(--site-surface,#f6f7f9); }
td.producttotalcolumn .lineitemnodiscounts { display: block; color: #999; text-decoration: line-through; }
td.producttotalcolumn .totallabel { font-weight: bold; }

/* Cart header — plain wrapper (the single card border lives on #cartcontainer;
   no inner border/radius, so there is no empty double-bordered strip on top) */
.cartheader { background: transparent; border: 0; color: #000000; position: relative; }
.cartheader .label { font-weight: bold; padding: 0; }
/* Drop the legacy empty rounded-corner slivers that left a gap inside the card */
#cartcontainer .corner-tl, #cartcontainer .corner-tr { display: none; }
/* Optional list title caption (only rendered when set) */
.cartlist-title { font-weight: bold; padding: 10px 14px; border-bottom: 1px solid var(--site-border,#e0e0e0); }

/* Product grid table */
.cartproductgrid th { background: var(--site-surface,#f6f7f9); color: var(--site-content-text,#2c3e50); padding: 12px; font-weight: bold; text-align: center; border-bottom: 2px solid var(--site-border,#e0e0e0); }
.cartproductgrid td { border-top: none; border-bottom: 1px solid var(--site-border,#e0e0e0); padding: 12px; vertical-align: top; }
ul.lineitemoptions { margin: 0 0 0 20px; }

/* Quantity input */
.qty-cart { width: 60px; border: 1px solid var(--site-border,#e0e0e0) !important; border-radius: 6px; padding: 6px 8px; text-align: center; }

/* Cart footer / actions */
#cartfooter { margin: 10px 0px 0 0px; }
#cartupdates { width: 350px; margin-bottom: 10px; text-align: right; float: right; }
#cartactions { clear: both; text-align: right; padding-bottom: 12px; margin-top: 20px; height: auto; }
#cartactioncontinue { float: left; }
#cartactioncheckout { display: inline; float: right; }
/* Align the "make changes" label with the Recalculer / Passer commande buttons */
#cartactioncheckout table, #cartactioncheckout tbody, #cartactioncheckout tr { display: inline; }
#cartactioncheckout td { display: inline-flex; align-items: center; gap: 10px; padding: 0; vertical-align: middle; }
#cartactioncheckout label { color: var(--site-muted,#666); font-weight: normal; margin: 0; white-space: nowrap; }
#cartactioncheckout .mv-btn { margin: 0 0 0 6px; }

/* Cart totals — right-aligned card */
#carttotals {
    width: 340px;
    float: right;
    margin-bottom: 10px;
    text-align: right;
    background: var(--site-surface,#f6f7f9);
    border: 1px solid var(--site-border,#e0e0e0);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
#carttotals table { float: right; width: 100%; }
#carttotals .formlabel, #carttotals .formfield { font-size: 13px; text-align: left; font-weight: bold; color: #000; }
#carttotals .formfield { text-align: right; }
#carttotals .formfield2 { text-align: right; font-weight: normal; }
#carttotals .formlabel2 { font-size: 11px; color: #666; }
#carttotals .formfield2 { font-size: 11px; color: #000; }

/* Grand total emphasized */
.totalgrand strong { color: var(--site-price,#2e7d32); font-size: 16px; font-weight: bold; line-height: 37px; }

/* Coupon panel — clean rounded card */
#cartcoupons {
    display: block;
    background: var(--site-surface,#f6f7f9);
    border: 1px solid var(--site-border,#e0e0e0);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    clear: both;
}
/* Coupon entry row — modern bordered input aligned with the add button */
#cartcoupons form { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
#cartcoupons input[type="text"] {
    border: 1px solid var(--site-border,#e0e0e0);
    border-radius: 6px;
    padding: 9px 12px;
    min-width: 240px;
    background: #fff;
    font-size: 14px;
    line-height: 1.2;
}
#cartcoupons input[type="text"]:focus { outline: none; border-color: var(--site-header-end,#396b9e); box-shadow: 0 0 0 2px rgba(57,107,158,.15); }
#cartcoupons .mv-btn { margin: 0; }

/* Totals layout helpers */
.totalsub,.totaltax,.totalshipping,.totalgrand,.totaldiscount { text-align: right; vertical-align: top; }
.totaltable { width: 100%; }
.totaltable td { line-height: 20px; }
.totallabel { text-align: left; vertical-align: top; font-weight: bold; }
.totaldiscountdetail { font-size: 11px; color: #666; text-align: left; }
.totaldiscount { font-size: 11px; }

/* Cart name / SKU */
.cartsku { font-size: 90%; }
.cartproductname { font-size: 110%; font-weight: bold; }

/* Floating cart update spinner */
.load-cart { border: solid 1px #999; left: 48%; top: 46%; position: fixed; z-index: 100; background-color: #FFF; width: 34px; height: 34px; padding: 6px; display: none; }

/* Responsive: horizontal scroll on narrow viewports */
@media screen and (max-width: 768px) {
    #cartcontainer { overflow-x: auto; }
    #carttotals { width: 100%; float: none; }
}

/* Misc */
.store-receipt-page .content-wrapper {width:710px;margin:0 auto;text-align:left;padding:10px 0;}
#closedcontent {width:300px;height:200px;margin:50px auto;padding:10px;background-color:#ff9;color:#333;}
#closedcontent h1 {color:#000;}
.address { border: 1px solid #eee; padding: 5px 10px; margin: 0 5px 15px 0;overflow:auto;width:230px;height:152px;display:inline-block; }
.address .buttonrow { margin: 5px 0; padding: 0; text-align: left; }
table.alladdresses, table.primaryaddresses { margin: 5px 0; width: 100%; }
table.alladdresses td, table.primaryaddresses td { vertical-align: top; }

/* Row Elements */
.Header, .rowheader, th { background: #fff; color: #fff; padding: 0; font-weight: bold; padding: 5px 0; text-align: center; }
.rowheader { font-size: 90%; }
.row { background: #eaeaea; }
.altrow { background: #eaeaea; }
fieldset#affiliateform table { width: 600px; }
fieldset#affiliateform table table { margin: 0; padding: 0; width: 100%; }
fieldset#affiliateform td.formlabel { width: 150px; }
.returnitems table { width: 100%; }
.returnitem .formlabel, .returnitem .formfield { padding: 3px; }
.returnitem { margin: 5px; }
.returncontrols { margin: 5px 0 0 0; padding: 5px; border: 1px solid #ddd; background: #eee; }
.returnitems td.qtycolumn { vertical-align: top; }
.returnitems .qtyfield { background: #eee; margin: 5px 0; padding: 5px; }
.returnitems .qtyfield input { width: 25px; text-align: center; border: 1px solid #ccc; }
.rmaform { margin: 20px 0; }
.rmaform table tr td { padding: 3px; }
.rmaform .formtextarea { height: 100px; width: 400px; }
.validationmessage li { color:Red; padding: 0.2em 0; }
.errorfield { border-color:Red; }
.AddedToCartMessage, .messagebox { display: block; border: 1px solid #fe3; background: #ff9; border-left: none; border-right: none; margin: 10px 0; padding: 0 10px; }
.messagebox ul { margin: 0; padding: 0; display: block; width: 100%; }
.messagebox li { margin: 10px 0; padding: 0; overflow: hidden; width: 100%; }
.messagebox .icon { float: left; margin: 0 8px 0 0; }
.messagebox .errorline { color: #333; clear: both; list-style: none; }
.messagebox .message { margin: 0 5px 0 10px; font-size: 100%; line-height: 1.2em; }
.errormessage { color: #c00; line-height: 2em; padding: 0 5px; font-size: .8em; }
.errormessage li { color: #c00; list-style-type: circle; }
.AddedToCartMessage, .SuccessMessage { color: #0c6; }

/* Pop Over */
.overlay {border-width: 0;margin: 0;padding: 0;background:black none repeat scroll 0 0;display:none;height:2500px; left:0; filter:alpha(opacity=70); opacity: 0.70; top:0; width:100%; z-index:50; display:none; position:fixed; }
.modal{position:fixed;left:23%;top:15%;z-index:51;display: none;}
.popoverframe {background:#fff;width:600px;height:400px;padding:10px;border-radius:10px;}
#popoverpage {width:600px;height:380px;}

/* Customer Login */
.lnkSignIn { float: right; margin-right: 15px; margin-top: -18px; }
.sidebysidea,.sidebysideb { width:425px; }
.sidebysidea {float:left; margin-left:4px;}
.sidebysideb {float:right; margin-right:4px;}
.loginpage .sidebysidea, .loginpage .sidebysideb {padding:10px;border: 1px solid #DEE3FF;}
legend { font-size: 1.2em; font-weight: bold; line-height: 1em; margin: 0 5px; padding: 2px; }
span.required { font-weight:bold; }
h6.filter {font-size:16px;font-weight:bold;border-bottom:solid 1px #ccc; margin-top:0.5em;}
ul.filterselected {margin:1em;}
ul.filterselections {margin:1em;}
ul.filterselected li, ul.filterselections li {margin:0.25em 1em;list-style:none;}
.additionalimages a {display:block;float:left;width:50px;height:50px;border:solid 1px #999;margin:0 3px 3px 0;}
.modal2{position:absolute;top:0%;z-index:51;display: none;margin:30px auto;}
.modal2 a {margin-left:10px;text-decoration:none;}
.modal2 a:hover {text-decoration:underline;}
.popoverframe2 {background:#000;width:900px;height:940px;padding:10px;border-radius:30px;}
.popoverframe2 a {color:#fff;}
#popoverpage2 {width:900px;height:900px;}


/* =========================================================================
   THEME · COMPONENTS & FEATURES
   ========================================================================= */

/* Tree Category Menu */
#treeCategory, #treeCategory a,#treeCategory li { margin: 0 !important; padding:0 !important; }
#treeCategory a{ margin:0 0 0 5px !important; }
#treeCategory { margin:0 0 0 10px !important; }
#treeCategory .children { display: none; margin: 0 0 0 15px !important; }
#treeCategory .title a { padding-left: 18px; color:#000000; }
#treeCategory a:visited,#treeCategory a:link { color:#000000; }
#treeCategory a:hover { color: #000000; }
#treeCategory .categoryTitle { display: block; height: 22px; }
#treeCategory .treeCatIcon { background: url('assets/TreeCat_icon.png') no-repeat; float: left; width: 13px; height: 15px; display: block; margin-right: 3px; }
#treeCategory .collapsed { background-position: 0 2px; }
#treeCategory .collapsed:hover { background-position: 0px -48px; }
#treeCategory .expanded { background-position: 0 -98px; }
#treeCategory .expanded:hover { background-position: 0 -148px; }
#optionstreeCategoryLeft { float: right; margin: 0; }
#treeCategory .current { background:#E5E5E5; }

/* Categories Block */
div.categories-block { border: 1px solid var(--site-border,#cdcdcd); height: 100%; font-family: Arial, Helvetica, sans-serif; line-height: 16px; font-size: 11px; color: #444; margin: 0 0 12px; }
.public_price { font-size: 7pt; font-weight: normal; color: #ff0000; text-decoration: line-through; }
div.categories-block div.footer { position: relative; height: 5px; width: auto; margin-top: 13px; }
div.categories-block div.header { position: relative; height: 28px; background: var(--site-surface,#f6f6f6); border-bottom: 1px solid #e5e5e5; }
div.categories-block div.header div, div.categories-block div.header a, div.categories-block div.header a:hover { display: block; line-height: 33px; color: #000000; font-size: 14px; font-weight: lighter; text-indent: 15px; white-space: nowrap; text-decoration: none; }
div.categories-block div.header a:hover { color: #000000; text-decoration: underline; }
div.categories-block div.body div.category { float: left; width: 100px; height: 110px; overflow: hidden; border-left: 1px solid #f0f0f0; text-align: center; padding: 0px 7px; margin: 18px 0px 0px 0px; zoom: 1; }
div.categories-block div.body div.category.first { border-left: 0px; }
div.categories-block div.body div.category div.image-container { width: 97px; height: 75px; overflow: hidden; text-align: center; }
div.categories-block div.body div.category div.link-container { overflow: hidden; height: 30px; text-align: center; }
div.categories-block div.body div.category div.link-container a { text-decoration: none; color: #000000; line-height: 13px; }

/* Category Criteria */
.ScrollBar {width: 195px;max-height: 300px;overflow: auto;padding-top:10px; padding-bottom:10px}
#criteresSearch{margin: 0 !important;padding: 0 !important;}
#criteresSearchLeft{border: none;}
#criteresSearchLeft .criteria_header{border: none;background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae));margin-bottom: -1px;height: 27px;color: white;line-height: 27px;padding: 0 10px;position: relative;font-weight: bold;}
#criteresSearchLeft .criteria_header span {background: none;position: absolute;right: 0;top: 0;height: 27px;width: 6px;display: inline-block;overflow: hidden;}
#criteresSearchLeft .sidemenu_body{border: 1px solid var(--site-border,#cdcdcd);}
#criteresSearch a{margin: 0;}
#criteresSearch .children{padding-left:7px;}
#criteresSearch .title{color: #333333;font-weight: bold;margin-left:9px;}
#criteresSearch .title:hover, #criteresSearch label:hover{text-decoration: underline;}
#criteresSearchLeft ul.children{display: none;margin: 10px 0px;}
#criteresSearch label, #criteresSearch input {vertical-align: middle;}
#criteresSearchLeft ul.children li label, #criteresSearchLeft ul.children li input, #criteresSearchLeft .title{cursor: pointer}
#criteresSearch li{background: var(--site-surface,#f6f6f6);}
#criteresSearch li li{padding: 0;display: block;background: none;}
#criteresSearch .category-criteria-checkbox{margin: 3px 6px 3px 3px;}
#optionsCriteresSearch{float: right;margin: 0;}
#optionsCriteresSearch li{float: left;}
#expandCollapseAll, #clearAll{color: #333333;font-weight: bold;}
#criteresSearch .clearItem {display: none;float: right;font-weight:bold; margin-top:3px; margin-right:3px}
#criteresSearch .clearAll {margin-top:3px; margin-right:3px; margin-bottom:3px;}
.title-criteria {color: #333333;font-weight: bold;padding-top: 2px;font-size: 12px;height: 16px;margin-top: 5px;display: inline-block;margin-left: 10px;}

/* Revendeur */
.block-information {background-color: #F7F7F7;color: #333; border: solid 1px #B4B4B4;padding: 0px;border-radius: 4px; margin-bottom:5px }
.block-revendeur {background-color: #FFF;color: #333; border: solid 1px #B4B4B4;padding: 10px;border-radius: 4px; margin-top:5px }
a.btn b {background: #DEDEDE url('/MDAdmin/images/buttons/bg.jpg') repeat-x;color: #444;font-weight: bold; text-align: center; display: inline-block; padding: 0 10px;line-height: 28px; height: 28px; margin: 1px 0; border: solid 1px #B4B4B4; border-radius: 4px; width: 100px; margin-bottom: 10px; }

/* Country Select */
#country-select { display:inline-block; margin-left: -4px; vertical-align:middle; height:24px; z-index: 1000; position: relative; }
#country-select form { width: 180px; padding: 0; }
#country-select select, #country-select input { display: inline; padding: 0; margin: 0; }
.dropdown dd { position: relative; }
.dropdown a { text-decoration: none; outline: 0; font: 12px Arial, Helvetica, sans-serif; display: block; width: 16px; overflow: hidden; }
.dropdown dt a { background: #FFFFFF; border: 1px solid var(--site-border,#cccccc); padding: 5px; color: #FFFFFF; }
.dropdown dt a.active { background: var(--site-border,#cccccc); border-bottom: 1px solid var(--site-border,#cccccc); color: #fff; }
.dropdown dd ul { background: #FFFFFF; border: 1px solid var(--site-border,#cccccc); color: #C5C0B0; display: none; position: absolute; z-index: 999; top: 0; left: -4px; padding: 2px 0 5px 0; list-style: none; border-top: none; margin: 0; border-radius:5px; }
.dropdown dd ul li a { padding: 2px 10px; }
.dropdown dd ul li a span, .dropdown dt a span { float: left; width: 16px; height: 12px; background-repeat: no-repeat; cursor: pointer; }
.us a span { background-image:url('/images/flags/us.png');}
.uk a span { background-image:url('/images/flags/uk.png'); }
.ma a span { background-image:url('/images/flags/ma.png'); }
.fr a span { background-image:url('/images/flags/fr.png'); }
.de a span { background-image:url('/images/flags/de.png'); }
.nl a span { background-image:url('/images/flags/nl.png');}
.au a span { background-image:url('/images/flags/au.png');}
.be a span { background-image:url('/images/flags/be.png');}
.ca a span { background-image:url('/images/flags/ca.png');}
.hr a span { background-image:url('/images/flags/hr.png');}
.fi a span { background-image:url('/images/flags/fi.png');}
.ge a span { background-image:url('/images/flags/ge.png');}
.ie a span { background-image:url('/images/flags/ie.png');}
.lv a span { background-image:url('/images/flags/lv.png');}
.ly a span { background-image:url('/images/flags/ly.png');}
.tn a span { background-image:url('/images/flags/tn.png');}
.tr a span { background-image:url('/images/flags/tr.png');}
.gb a span { background-image:url('/images/flags/gb.png');}

.lightlabel { font-size:12px; font-weight:bold; line-height:23px; }
table.centerall td { font-size:10pt; text-align:center; vertical-align:middle; }
table.centerall td.number { font-weight:bold; color:#000000; }
table.centerall td.total { font-weight:bold; color:green; }
.buttonrow { margin: 0 0 10px; padding: 5px 20px; text-align: right; }

/* Loading */
/* CSS spinners replacing zoomloader.gif and ajax-loader.gif */
#load-small { width: 16px; height: 16px; border: 2px solid var(--site-border,#cccccc); border-top-color: var(--site-muted,#666666); border-radius: 50%; animation: mv-spin .8s linear infinite; display: inline-block; }
#load-small-blue { width: 16px; height: 16px; border: 2px solid var(--site-border,#cccccc); border-top-color: var(--site-header-end,#497bae); border-radius: 50%; animation: mv-spin .8s linear infinite; display: inline-block; }
#top-menu >li >a { color: var(--site-content-text,#000000); }
#top-menu >li >span>a>span { color: var(--site-content-text,#000000); }
a{ color:#000000; }

.loading-voice{background: url(/images/loading4.gif) no-repeat center center;background-size: 80px 10px;display: inline-block;vertical-align: -webkit-baseline-middle;width: 96px;}
.sidemenu_body .name{color:#000000 !important;}
.sidemenu_body .price{font-size:11px !important;}

/* Product Slider2 */
#featured_products{padding:10px 0 5px 0;position:relative}
#featured_products h4{font-size:14px;color:#7f7f7f;padding:7px 0 3px 0;margin:0 0 8px 0;font-weight:bold;text-transform:uppercase;border-bottom:1px solid #e5e5e5}
#featured_products ul{margin:0;padding:0;list-style:none;display:block}
#featured_products ul li{float:left;display:block;margin:0;text-align:center;padding:0}
#featured_products ul li .featured_box{text-align:left;padding:0 0 0 20px;margin:0 0 0 10px;background:none;display:block;border-radius:4px;border-bottom:1px solid var(--site-border,#e0e0e0);}
#featured_products ul li:first-child .featured_box{margin:0}
#featured_products ul li h5{padding:20px 0 5px 0;min-height:45px;width:140px}
#featured_products ul li .product_descr{padding:0 0 30px 0;margin:0;width:140px;font-size:11px;color:#949494; height:60px}
#featured_products ul li .price_container{padding:0;margin:0;width:140px}
#featured_products ul li .product_image{display:block;float:right;width:145px;}
#featured_products ul li span.price{display:inline-block;padding:2px 0 7px 0;font-size:28px;line-height:28px;color:#f00f0f;font-weight:normal}
#featured_products ul li .button{padding:2px 11px 2px 0;font-size:12px;background:none;color:#222222;margin-right:11px;margin-bottom: 8px;display: inline-block;font-weight:bold}
#featured_products ul li .button:hover{color:#c2c2c2}
.list_carousel.responsive{width:auto;margin-left:0;height:100%}
.prev{position:absolute;right:20px;top:20px;width:6px;height:12px;background:none;border-left:6px solid var(--site-muted,#999);border-top:5px solid transparent;border-bottom:5px solid transparent;display:block;}
.prev:hover{border-left-color:var(--site-content-text,#444);}
.next{position:absolute;right:0;top:20px;width:6px;height:12px;background:none;border-right:6px solid var(--site-muted,#999);border-top:5px solid transparent;border-bottom:5px solid transparent;display:block;}
.next:hover{border-right-color:var(--site-content-text,#444);}

/* Product ToolTip */
.product-popup { padding:4px; width:143px; }
.product-popup .image { text-align:center; }
.product-popup .block-addtocart { text-align:center; }
.product-popup .productname { font-weight:bold; }
.product-popup .productname a { font-size:13px; }
.product-popup .price { margin-top:4px; }
.product-popup .price .public-price { margin-bottom:0px; }

/* Advanced search */
.advenced-search {background-color: #F7F7F7;color: #333;border: solid 1px #9a9a9a;border-radius: 2px;margin-bottom: 5px;padding: 10px;}
.advenced-search #PriceMinField,.advenced-search #PriceMaxField {width:60px;height: 17px;}
.advenced-search #CategoryField,.advenced-search #ManufacturerField,.advenced-search #VendorField {width:231px;height: 20px;}
.advenced-search #SortField,.advenced-search #SortDirectionField {width:100px;height: 20px;}
.advenced-search #KeywordField{width: 225px;height: 17px;}
.advenced-search tr{height: 26px;}

/* Buttons */
.btn-on { background-image: url(buttons/buttons.png); background-position: -7px -420px; display: inline-block; height: 24px; margin-right: 10px; vertical-align: middle; white-space: nowrap; }
.btn-right-on { background-image: url(buttons/buttons.png); background-position: -350px -420px; background-repeat: no-repeat; width: 10px; height: 24px; margin-right: -4px; display: inline-block; vertical-align: top; }
.btn-text-on { padding-left: 10px; text-shadow: 1px -1px #bb5c12; padding-top: 4px; color: #FFF; font-weight: bold; font-size: 12px; font-family: Arial; display: inline-block; vertical-align: top; }
.btn-off { background-image: url(buttons/buttons.png); background-position: -8px -392px; display: inline-block; height: 24px; vertical-align: top; margin-right: 10px; }
.btn-right-off { background-image: url(buttons/buttons.png); background-position: -347px -392px; background-repeat: no-repeat; width: 13px; height: 24px; margin-right: -4px; display: inline-block; }
.btn-text-off { text-shadow: 1px -1px #62af62; padding-left: 10px; padding-right: 2px; padding-top: 4px; color: #FFF; font-weight: bold; display: inline-block; font-size: 12px; font-family: Arial; vertical-align: top; }
/* "Plus d'Info" / Détails button — themed from admin Site Settings (--site-button-*) with an inline SVG search icon; was a buttons.png sprite (sliding-door) with hardcoded red/orange. */
.btn-small { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--site-button-bg, #444444); color: var(--site-button-text, #ffffff); border: 1px solid var(--site-button-border, #222222); border-radius: var(--site-radius, 5px); font-weight: bold; line-height: 1.5; text-decoration: none; vertical-align: middle; margin-right: 10px; }
.btn-small:hover { background: var(--site-button-hover, #333333); color: var(--site-button-hover-text, #ffffff); }
.btn-right-small { display: none; }/* sprite end-cap no longer needed — .btn-small is a real bordered element now */
.btn-text-small { display: inline-block; padding: 0; margin: 0; color: inherit; font-weight: bold; text-shadow: none; }
.btn-text-search { text-shadow: 1px -1px #bb5c12; padding-left: 11px; padding-right: 2px; padding-top: 4px; color: #FFF; font-weight: bold; font-size: 13px; font-family: verdana; display: inline-block; vertical-align: top; text-transform: uppercase; }
.btn-more-icon { background-image: url(buttons/buttons.png); width: 18px; height: 18px; display: inline-block; background-position: 302px 360px; position: relative; left: 6px; top: -2px; }
.btn-agent-icon { background-image: url(buttons/buttons.png); width: 17px; height: 25px; display: inline-block; background-position: 356px 332px; position: relative; left: 6px; top: -2px; }
.btn-previous-icon { background-image: url(buttons/buttons.png); width: 18px; height: 18px; display: inline-block; background-position: 303px 400px; position: relative; left: 6px; top: -2px; }
.btn-next-icon { background-image: url(buttons/buttons.png); width: 15px; height: 22px; display: inline-block; background-position: 356px 406px; position: relative; left: 6px; top: -2px; }
.btn-search-icon { display: inline-block; width: 14px; height: 14px; vertical-align: middle; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15.5%2014h-.79l-.28-.27a6.5%206.5%200%201%200-.7.7l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200A4.5%204.5%200%201%201%2014%209.5%204.5%204.5%200%200%201%209.5%2014z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15.5%2014h-.79l-.28-.27a6.5%206.5%200%201%200-.7.7l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200A4.5%204.5%200%201%201%2014%209.5%204.5%204.5%200%200%201%209.5%2014z'/%3E%3C/svg%3E") no-repeat center / contain; }/* inline SVG magnifying glass, tinted to the button text color via currentColor; was a buttons.png sprite */
.btn-addtocart-icon { background-image: url(buttons/buttons.png); width: 18px; height: 18px; display: inline-block; background-position: 301px 351px; position: relative; left: 6px; top: -2px; }
.btn-basket-icon { background-image: url(buttons/buttons.png); width: 18px; height: 24px; display: inline-block; background-position: 333px 433px; position: relative; left: 6px; top: -2px; }
.btn-recalculate-icon { background-image: url(buttons/buttons.png); width: 20px; height: 24px; display: inline-block; background-position: 331px 532px; position: relative; left: 6px; top: -3px; }
.btn-validate-icon { background-image: url(buttons/buttons.png); width: 20px; height: 18px; display: inline-block; background-position: 357px 351px; position: relative; left: 6px; top: -2px; }
.btn-car-icon { background-image: url(buttons/buttons.png); width: 25px; height: 24px; display: inline-block; background-position: 334px 483px; position: relative; left: 6px; top: -4px; }
.btn-graynext-icon { background-image: url(buttons/buttons.png); width: 18px; height: 18px; display: inline-block; background-position: 672px 375px; position: relative; left: 60px; float: left; }
.btn-wgnext-icon { background-image: url(buttons/buttons.png); width: 18px; height: 21px; display: inline-block; background-position: 301px 379px; position: relative; left: 6px; top: -2px; }
.btn-Lock-icon { background-image: url(buttons/buttons.png); width: 20px; height: 25px; display: inline-block; background-position: 356px 431px; position: relative; left: 6px; top: -2px; }
.btn-icons { background:url('buttons/buttons.png') no-repeat scroll 0 0 transparent; display:inline-block; vertical-align:middle; }
.btn-addtocartsmall-icon { background-image: url(buttons/buttons.png); width: 17px; height: 26px; display: inline-block; background-position: 306px 303px; position: relative; left: 3px; vertical-align: middle; }
.btn-less-icon { background-image: url(buttons/buttons.png); background-position: 331px 303px; display: inline-block; height: 24px; margin-left: 10px; width: 18px; vertical-align: middle; }
.btn-text-reviews { padding-right: 0px; padding-top: 4px; color: rgb(131, 129, 129); font-weight: bold; display: inline-block; vertical-align: top; }
.btn-smallvalidate-icon { background-image: url(buttons/buttons.png); background-position: 355px 277px; display: inline-block; height: 24px; margin-left: 10px; width: 18px; vertical-align: middle; }
.btn-edit-icon { background-image: url(buttons/buttons.png); width: 23px; height: 22px; display: inline-block; background-position: 361px 532px; position: relative; left: 6px; top: -2px; }
.btn-save-icon { background-image: url(buttons/buttons.png); width: 23px; height: 22px; display: inline-block; background-position: 304px 457px; position: relative; left: 6px; top: -2px; }
.btn-download-icon { background-image: url(buttons/buttons.png); width: 18px; height: 18px; display: inline-block; background-position: 303px 527px; position: relative; left: 6px; top: 1px; }

/* Comparator */
#ComparatorTitle { margin-left:20px; font-weight: bold; }
#Comparator{padding:10px;}
.MTC { background: none; margin-top: 1px; width:350px; display: block; }

/* Kits */
.manunfacturerlist-item { display: inline-table; width: 150px; text-align: center; margin-top: 5px; margin-bottom: 5px; }
#kitslist .cell-product .grid-top { width: 241px; }
#kitslist .cell-product { width: 250px; height: 260px; }
#kitslist .grid-left { height: 260px !important; }
#kitslist .cell-product .name { font-weight: bold; padding-left: 14px; }
#kitslist .cell-product .description { width: 236px; height: 28px; position: relative; z-index: 0; overflow: visible; left: 5px; }
.compare_link_enabled { background: rgb(222, 222, 222) url('/mdadmin/images/buttons/bg.jpg') repeat-x; color: rgb(68, 68, 68); font-weight: bold; text-align: center; display: inline-block; padding: 0 10px; line-height: 20px; height: 20px; margin: 1px 0; border: solid 1px rgb(180, 180, 180); border-radius: 4px; cursor: pointer; }

/* RSS Feed */
.rss-title { background: url('assets/rss-small2.png'); margin-top: 2px; padding-left: 36px; display: inline-block; vertical-align: top; background-repeat:no-repeat; background-size: 16px 16px; }
.rss-item { background: url('assets/rss-small.gif'); margin-top: 2px; padding-left: 36px; display: block; vertical-align: top; background-repeat:no-repeat; background-size: 24px 13px; margin: 6px 10px 6px 16px; }

/* Grid cells */
.row { width: 92%; margin: 0 auto; position: relative; }
.cell_1, .cell_2, .cell_3, .cell_4, .cell_5, .cell_6, .cell_7, .cell_8, .cell_9, .cell_10, .cell_11, .cell_12 { float: left; position: relative; padding: 4px; }
.cell_1 { width: 8.3%; }
.cell_2 { width: 16.6%; }
.cell_3 { width: 25%; }
.cell_4 { width: 33.3%; }
.cell_5 { width: 41.5%; }
.cell_6 { width: 50%; }
.cell_7 { width: 58.3%; }
.cell_8 { width: 66.6%; }
.cell_9 { width: 75%; }
.cell_10 { width: 83.3%; }
.cell_11 { width: 91.6%; }
.cell_12 { width: 100%; }

/* Autocomplete */
.input-search{width: 163px !important;border-radius: 5px 0px 0px 5px !important;border-right: none !important;}
.ui-corner-all{text-decoration: none;padding-top: 2px;line-height: 1.5;zoom: 1;cursor: pointer;font-weight: normal;color: Black;}
.loading{background: white url('/Images/loading.gif') right center no-repeat;}
.ui-autocomplete-loading{background: white url('/Images/loading.gif') right center no-repeat;}
.ui-autocomplete{ border:1px solid #d9d9d9; border-radius:8px; box-shadow:0 10px 28px rgba(16,24,40,.16); cursor:pointer; overflow-y:auto; overflow-x:hidden; width:460px !important; max-height:72vh; padding:6px; background:#fff; z-index:10001 !important; }
.ui-autocomplete .ui-menu-item{ margin:0; list-style:none; }
/* group header ("Produits" / "Fabricant") — dynamic site/navbar colour, not hardcoded blue */
.ui-autocomplete .ac-group-title{ background:linear-gradient(var(--site-header-start,#34495e),var(--site-header-end,#2c3e50)); border-radius:6px; margin:2px 0 6px; padding:6px 12px; pointer-events:none; }
.ui-autocomplete .ac-group-title h3{ margin:0; padding:0; font-size:15px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; text-align:left; color:var(--site-header-text,#fff); }
/* result rows */
.ui-autocomplete .ac-item{ display:block; padding:0; border-radius:6px; text-decoration:none; color:#333; }
.ui-autocomplete .ac-item:hover, .ui-autocomplete .ui-menu-item a:hover, .ui-autocomplete .ui-state-focus{ background:var(--site-surface,#f5f7fa); color:#111; }
.ui-autocomplete .ac-item table{ width:100%; border-collapse:collapse; color:#333; }
.ui-autocomplete .ac-item td{ padding:8px 10px; vertical-align:middle; }
.ui-autocomplete .ac-thumb{ width:64px; padding-right:0; }
.ui-autocomplete .ac-text{ white-space:normal; }
.ui-autocomplete .ac-sku{ display:block; color:#1a1a1a; font-size:13px; font-weight:600; line-height:1.3; }
.ui-autocomplete .ac-sku b{ color:var(--site-link-hover,#2980b9); }
.ui-autocomplete .ac-name{ color:#777; font-size:12px; line-height:1.35; margin-top:1px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ui-autocomplete .ac-price{ width:1%; white-space:nowrap; text-align:right; font-weight:700; font-size:13px; color:var(--site-price,#27ae60); }
#search-box.loading { background-image: url('/Images/loading.gif'); background-repeat: no-repeat; background-position: right 4px center; background-size: 16px 16px; }
.img-search{margin-right: 44px;position: absolute;height: 24.9px;}
.imgautocomplete{ display:block; width:50px; height:50px; object-fit:contain; border:1px solid #eee; border-radius:6px; background:#fff; margin:0; }
.ui-corner-all table{ width:100%; padding:0; }
#category-options { display: inline-block; margin-left: -5px; vertical-align: middle; height: 24px; z-index: 1000; position: relative; }
.dropdowncategory dd { position: relative; }
.dropdowncategory a { text-decoration: none; outline: 0; font: 12px Arial, Helvetica, sans-serif; display: block; overflow: hidden; }
.dropdowncategory dt a { background: #FFFFFF; border: 1px solid var(--site-border,#cccccc); padding: 5px; height: 12px; width: 125px }
.dropdowncategory dt a.active { background: var(--site-border,#cccccc); border-bottom: 1px solid var(--site-border,#cccccc); color: #fff; }
.dropdowncategory dd ul { background: #FFFFFF; border: 1px solid var(--site-border,#cccccc); color: #C5C0B0; display: none; position: absolute !important; z-index: 999; top: 0; left: -4px; padding: 2px 0 5px 0; list-style: none; border-top: none; margin: 0; border-radius:5px; }
.dropdowncategory dd ul li a { padding: 2px 10px; }
.dropdowncategory dd ul li a span, .dropdowncategory dt a span { float: left; width: 120px; background-repeat: no-repeat; cursor: pointer; }

/* === Unified modern search bar: [ category v | input | dark button ] ===
   CSS-only; scoped to .mv-searchbar so it can't leak. Out-specifies the
   legacy .dropdowncategory* (~4160-4167) and #header #search-box (~2957).
   #search-header horizontal positioning lives at the appended rule (~4470). */

/* let the wrapper hug the bar (beats legacy #header #search-header{width:330px}) */
#header #search-header { width:auto !important; }

/* ---- the pill --------------------------------------------------------- */
.mv-searchbar { position:relative; z-index:50; display:flex; align-items:stretch; width:520px; max-width:100%; height:44px; background:#fff; border:1px solid var(--site-border,#cccccc); border-radius:9px; box-shadow:0 1px 2px rgba(16,24,40,.05); box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; }
.mv-searchbar > * { box-sizing:border-box; }
/* cohesive focus halo when the input/any control is focused */
.mv-searchbar:focus-within { border-color:var(--site-link-hover,#3399ff); box-shadow:0 0 0 3px rgba(51,153,255,.15), 0 1px 2px rgba(16,24,40,.05); }
/* one consistent, modern font across the whole bar */
.mv-searchbar, .mv-searchbar input, .mv-searchbar .dropdowncategory a { font-family:"Segoe UI",Roboto,"Helvetica Neue","Trebuchet MS",Arial,sans-serif; }

/* ---- category cell (left) -------------------------------------------- */
.mv-searchbar .sf-ui-searchform__catwrap { display:flex; align-items:center; border-right:1px solid var(--site-border,#cccccc); }
/* anchor the menu here (not on the <dd>, which has a 40px UA margin); also
   drop the legacy z-index:1000 stacking trap so the menu's z-index resolves */
.mv-searchbar #category-options { display:flex; align-items:center; height:100%; margin:0; position:relative; z-index:auto; }
.mv-searchbar .dropdowncategory { margin:0; position:static; }
.mv-searchbar .dropdowncategory dt { margin:0; }
.mv-searchbar .dropdowncategory dd { margin:0; position:static; }
.mv-searchbar .imgarrow { display:none; }
.mv-searchbar #options { display:none; }

/* category trigger */
.mv-searchbar .dropdowncategory dt a { border:none; background:transparent; height:auto; width:auto; min-width:150px; max-width:220px; padding:0 32px 0 16px; line-height:42px; color:#1a1a1a; font-size:14px; font-weight:600; letter-spacing:.2px; text-align:left; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-radius:8px 0 0 8px; transition:background .12s ease; cursor:pointer; }
.mv-searchbar .dropdowncategory dt a:hover { background:#f6f7f9; }
.mv-searchbar .dropdowncategory dt a span { float:none; display:inline-block; width:auto; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; cursor:pointer; background:none; }
.mv-searchbar .dropdowncategory dt a:after { content:''; position:absolute; right:14px; top:50%; margin-top:-2px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #555; transition:transform .15s ease; }
.mv-searchbar .dropdowncategory dt a.active { background:#f0f1f3; color:#1a1a1a; }
.mv-searchbar .dropdowncategory dt a.active:after { transform:rotate(180deg); }
.mv-searchbar .dropdowncategory dt a:focus-visible { outline:2px solid var(--site-link-hover,#3399ff); outline-offset:-2px; }

/* ---- dropdown menu — flush-left panel attached under the trigger (Screenshot_10) ----
   left:0 anchors it to the category column; text-align:left is REQUIRED because the
   legacy "#header #search-header{text-align:right}" rule (~4470) is otherwise inherited
   and pushes the labels right/centered (the Screenshot_11 look). */
.mv-searchbar .dropdowncategory dd ul { position:absolute !important; top:100%; left:0; right:auto; min-width:100%; width:max-content; max-width:320px; max-height:70vh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; background:#fff; border:1px solid #d9d9d9; border-top:none; border-radius:0 0 4px 4px; box-shadow:0 8px 20px rgba(0,0,0,.12); padding:0; margin:0; color:#333; list-style:none; text-align:left; z-index:10000; }
.mv-searchbar .dropdowncategory dd ul li { margin:0; padding:0; list-style:none; }
.mv-searchbar .dropdowncategory dd ul li a { display:block; height:auto; padding:11px 16px; border-radius:0; color:#333; font-size:13.5px; font-weight:500; line-height:1.2; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid #ededed; transition:background .12s ease,color .12s ease; }
.mv-searchbar .dropdowncategory dd ul li:last-child a { border-bottom:none; }
.mv-searchbar .dropdowncategory dd ul li a:hover, .mv-searchbar .dropdowncategory dd ul li a:focus { background:#f5f5f5; color:#111; outline:none; }
.mv-searchbar .dropdowncategory dd ul li a span { float:none; display:block; width:auto; max-width:none; background:none; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* first row = the selected "all categories" — dark highlight like Screenshot_10 */
.mv-searchbar .dropdowncategory dd ul li:first-child a { background:#1f2329; color:#fff; font-weight:600; border-bottom-color:#1f2329; }
.mv-searchbar .dropdowncategory dd ul li:first-child a:hover { background:#15171b; color:#fff; }

/* ---- input (middle) — 3 IDs + !important beat legacy "#header #search-box" (2 IDs) */
#header .mv-searchbar #search-box, .mv-searchbar .mv-searchbar__input { flex:1 1 auto; width:auto !important; min-width:0; height:100% !important; margin:0 !important; padding:0 14px !important; border:none !important; border-radius:0 !important; outline:none; box-shadow:none; font-size:14px; color:#333; background:transparent; }
#header .mv-searchbar #search-box::placeholder { color:#9aa0a6; }

/* ---- button (right, dark) -------------------------------------------- */
.mv-searchbar .mv-searchbar__btn { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 54px; width:54px; background:#1a1a1a; border:none; margin:0; border-radius:0 8px 8px 0; cursor:pointer; transition:background .12s ease; }
.mv-searchbar .mv-searchbar__btn:hover { background:#000; }
.mv-searchbar .mv-searchbar__btn:active { background:#333; }
.mv-searchbar .mv-searchbar__btn:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
.mv-searchbar .mv-searchbar__btn svg { display:block; width:18px; height:18px; fill:#fff; }
/* loading: while the autocomplete AJAX runs the plugin adds .loading to #search-box;
   swap the magnifier for a spinning ring in the dark button (CSS-only, sibling selector,
   real pseudo-element so the @keyframes animation runs reliably). */
@keyframes mv-search-spin { to { transform:rotate(360deg); } }
.mv-searchbar #search-box.loading ~ .mv-searchbar__btn svg { visibility:hidden; }
.mv-searchbar #search-box.loading ~ .mv-searchbar__btn::after { content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:mv-search-spin .7s linear infinite; }

/* Customer Notification */
.customernotification{ padding: 6px 0px 10px 0px; }
.customernotification .customernotificationfield{ border: 1px solid rgb(204, 204, 204); height: 16px; float: left; margin-right: 10px; vertical-align: middle; font-size: 11px; width: 150px; margin-top: 4px; }
.customernotification .btn-graynext-icon{ float: none; left: -4px; top: 33px; }
.customernotification .load-customernotification { display: block; position: absolute; margin-right: 0px; margin-left: 136px; margin-top: 33px; visibility: hidden; }
.customernotification #customernotification-message { display:none; float: left; }
.product-reduceprice{ position: absolute; right: 20px; top: 14px; }
.product-reduceprice img{ height: 80px; }
strong { font-weight: bold !important; font-size: inherit !important; }
.st_tab_view { position: relative !important; }
.st_view { height: 100% !important; }
/* Product detail: the content box (#productContent) and the desc/review tab block
   (#st_horizontal) now share ONE width via --product-box-width, so the tab sits
   directly under the box above it (both centered, same width).
     - #productContent was max-width:85% (managed MV-SITE-THEME rule, end of file) ->
       it came out ~779px while the tab is a hard 804px, so it looked narrower.
       The `body ` prefix raises specificity to (1 id,1 elem) > the MV rule's (1 id),
       so this wins despite loading earlier (same trick as the shell width tweak above).
     - #st_horizontal is plugin-sized (totalWidth:804, no border/padding on the outer),
       so the max-width cap equals its real width: no clipping, just makes the linkage
       explicit. Un-floated + auto margins so the fixed-width block centers. */
body #productContent { max-width: var(--product-box-width) !important; }
#st_horizontal { float: none !important; clear: both; margin-left: auto !important; margin-right: auto !important; max-width: var(--product-box-width); }
/* "Customers also bought" panel (<sys:products-suggested/>): same width as the box +
   tabs, centered, so all three line up. Scoped to the unique pane id, so the generic
   .sidemenu class (used elsewhere) is untouched; the inner .sidemenu fills this width. */
#suggested-items-pane { max-width: var(--product-box-width); margin-left: auto; margin-right: auto; }
/* Related-items box (<sys:productrelateditems/> => #hp_blocks > .sidemenu). PIN to the
   shared width with min+max (not just max): #hp_blocks is display:flex from the homepage
   layout, and max-width alone would only cap a content-width flex item, not expand it to
   804. min=max=token forces exactly --product-box-width in any context; box-sizing lands
   the bordered .sidemenu's outer edge at the same 804; auto margins center the flex item. */
#product #hp_blocks > .sidemenu {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* Add to cart / Recalculate buttons */
.add-to-cart{border-width:0px; background:url('buttons/addtocart.png');display:block;width:145px;height:24px;}
.addtocart-grid{border-width:0px; background:url('buttons/addtocart2.png');display:inline-block;width:123px;height:20px;}
.recalculate{border-width:0px; background:url('buttons/Update.png');display:block;width:106px;height:24px;}

/* Manufacturer filter */
#manufacturer-filter{border-right: var(--site-border,#cdcdcd) 1px solid; padding-right: 15px; border-top: var(--site-border,#cdcdcd) 1px solid;padding-left: 15px; font-weight: bold; font-size: 12px; padding-bottom: 13px; border-left: var(--site-border,#cdcdcd) 1px solid; padding-top: 13px; border-bottom: var(--site-border,#cdcdcd) 1px solid;position: relative; background-color: var(--site-surface,#f6f6f6); margin-bottom: 10px;margin-top:10px}
#manufacturer-filter a:visited {color: #000000;text-decoration: none;}
#manufacturer-filter a:link {color: #000000;text-decoration: none;}
#manufacturer-filter a:hover{color: #FF9900;}
.manufacturer-filter-item{display: inline-block;width: 150px;text-align: center;margin-top: 5px;margin-bottom: 5px;}
.list-man-category{border-right: var(--site-border,#cdcdcd) 1px solid; padding-right: 15px; border-top: var(--site-border,#cdcdcd) 1px solid;padding-left: 15px; font-weight: bold; font-size: 12px; padding-bottom: 13px; border-left: var(--site-border,#cdcdcd) 1px solid; padding-top: 13px; border-bottom: var(--site-border,#cdcdcd) 1px solid;position: relative; background-color: var(--site-surface,#f6f6f6); margin-bottom: 10px;margin-top:10px}

/* Pagination */
div.pagination{padding: 3px 0px;margin: 0px;float: right;text-align: right;}
div.pagination a{font-weight: bold;font-size: 11px;height: 25px;padding: 3px 6px;margin: 0px 2px;border: 1px solid var(--site-border,#cdcdcd);background-image: url(grid/paging_counter.jpg);text-decoration: none;color: #000000;}
div.pagination a:hover, div.pagination a:active{border: 1px solid var(--site-border,#cdcdcd);font-size: 11px;background-image: url(grid/paging_counter_hover.jpg);color: #000000;}
div.pagination span.paging_current{padding: 3px 6px;font-size: 11px;margin: 0px 2px;border: 1px solid var(--site-border,#cdcdcd);background-image: url(grid/paging_current.jpg);font-weight: bold;color: #FFF;}
div.pagination span.paging_disabled{padding: 3px 6px; margin: 0px 2px; border: 1px solid #EEE; color: #DDD;}
.paging_summary{font-size: 15px;}

/* HP blocks */
#hp_blocks { overflow: hidden; margin-top: 4px; }
.weekly_specials { margin: 0 10px; }
#hp_blocks .hp_blk_hdr { background: linear-gradient(var(--site-header-start,#555555), var(--site-header-end,#333333)); color: var(--site-header-text,#ffffff); font-weight: bold; padding: 2px 15px; }
#hp_blocks .hp_blk_body { border: 1px solid var(--site-border,#cdcdcd); padding: 15px; width: 299px; min-height: 60px; color: var(--site-content-text,#333333); }
#hp_blocks .hp_blk_body a { color: var(--site-link,#5599cc); text-decoration: none; }
#hp_blocks .hp_blk_body a:hover { color: var(--site-link-hover,#3399ff); text-decoration: underline; }
#hp_blocks .hp_blk { float: left; width: 331px; }

/* =========================================================================
   HOME-PAGE COMPONENT WIDTHS - #hp_blocks bottom row (fill the wider shell)
   The three .hp_blk boxes were fixed 331px (~993px total), leaving a gap
   after the shell was widened. Spread the three DIRECT children evenly and
   let their bodies fill. The "> " combinator scopes to direct children, so
   the nested .hp_blk inside .weekly_specials keeps working. Reversible:
   delete this block to restore the original fixed-331px float layout. */
#hp_blocks { display: flex; gap: 20px; align-items: stretch; }
#hp_blocks > .hp_blk { flex: 1 1 0; width: auto; min-width: 0; box-sizing: border-box; }
#hp_blocks > .weekly_specials { margin: 0; }
#hp_blocks .weekly_specials > .hp_blk { float: none; width: auto; }
#hp_blocks .hp_blk_body { width: auto; }
/* Equal-height cards: every block in the row is a vertical flex column whose
   bordered body fills it, so all three cards match the tallest. Covers the
   inner .hp_blk nested inside .weekly_specials too. */
#hp_blocks .hp_blk { display: flex; flex-direction: column; }
#hp_blocks .hp_blk_body { flex: 1 1 auto; }
#hp_blocks > .weekly_specials > .hp_blk { flex: 1 1 auto; }

/* Slideshow */
.slideshow { position: relative; display: inline-block; min-height: 40px; width: 240px; }
.slideshow .rotator { float: left; margin-right: 10px; margin-bottom: 20px; margin-top: 15px; height: 40px; width: 90px; }
.slideshow select { display: block; margin: 8px 0; width: 140px; }
select { border: 1px solid #CCC; color: #222; vertical-align: middle; }
.slideshow .rotator a { display:none; position:absolute; text-align:center; }
.slideshow .rotator a:hover{ text-decoration:none; }
.slideshow .rotator a img { display:block; width:92px; height:30px; }

/* Misc carousel items */
#hoverText { background:#F7F7F7; border:1px solid var(--site-border,#cdcdcd); padding:5px; z-index:1; width:100px; display: block; position: absolute; }
.myCarouselListItem{flex:0 0 auto;width:132px;float:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px;box-sizing:border-box;border:1px solid #eceef0;border-radius:6px;background:#fff;transition:box-shadow .15s ease,border-color .15s ease;}
.myCarouselListItem:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:#d5d9de;}
.myCarouselListItem>a{display:block;line-height:0;margin-bottom:6px;}
.myCarouselListItem>a img{display:block;width:auto;max-width:100%;height:auto;max-height:64px;margin:0 auto;}
.myCarouselListItem p{margin:0 0 3px;width:100%;line-height:1.25;}
.myCarouselListItem #lnkItemName{font-size:12px;border-width:0px;}
.myCarouselListItem #lnkItemName b{color:var(--site-link,#0f63d2);font-weight:600;font-size:12px;}
.myCarouselListItem .prices{margin:0;}
#mycarousel{margin:0;}
@media (max-width:768px){
	.sponsers .spnscrousal{padding:10px;}
	.myCarouselListItem{width:118px;padding:6px;}
}

/* Product replace style */
.product-replace {background-color: #c4e5fc;color: #333;border: solid 1px #B4B4B4;padding: 10px 4px 4px 4px;border-radius: 4px;position: relative;top: -30px;font-size: 12px;}
.product-replace .addtocart-block{ border-bottom: 1px solid #ccc;padding-top: 4px;padding-right: 4px;text-align: right;}
.product-replace .title-replace{ font-weight: bold;font-size: 13px;}
.product-replace p{font-size: 11px;}
.product-replace .imgMax {display: none;left: 14px; position: absolute;top: 61px;z-index: 1; }
.product-replace .product-line{background-color:#FFF;border:1px solid #ccc;height: 100%;padding: 10px;}
.product-replace .product-line .product_image{width: 110px;position: absolute;}
.product-replace .product-line .see_product{width: 110px;}
.product-replace .product-line .right-list{margin-left: 110px !important;position: relative;}
.product-replace .product-line .imgMax{display: none;left: 0px;position: absolute;top: 0px;z-index: 1;}
.product-replace .product-line .product_discount_adverts {width: 147px;}
.product-replace .product_discount_adverts {background-color: #F9F9F9;border-bottom: 1px solid var(--site-border,#cdcdcd);border-collapse: collapse;border-left: 1px solid var(--site-border,#cdcdcd);border-spacing: 0;height: 28px;position: relative;margin-top: -4px;text-align: center;width: 163px;margin-bottom: 8px;}
.product-replace .promotion-block{float:right;position: absolute; top: 0; right: 0;margin-top: -6px;margin-right: -10px;}

/* Category grid sub template */
#categorygridsubtemplate .record {float: left; border-bottom: 1px solid var(--site-border,#cdcdcd);border-right: 1px solid var(--site-border,#cdcdcd);width:270px; padding-top:10px; height:131px}
#categorygridsubtemplate .first-record {float: left; border-left: 1px solid var(--site-border,#cdcdcd); border-right: 1px solid var(--site-border,#cdcdcd); border-bottom: 1px solid var(--site-border,#cdcdcd);width:266px; padding-top:10px; height:131px}
#categorygridsubtemplate .last-record {float: left; border-bottom: 1px solid var(--site-border,#cdcdcd); border-right: 1px solid var(--site-border,#cdcdcd);width:266px; padding-top:10px; height:131px}

/* Single product display */
.SingleProductDisplayPrice { font-size: 100%; font-weight: bold; }
.PriceLabel { color:green; font-size:14px; margin:5px 0; }
.NameHyperLink { color:#000000; font-size:12px; }
.SingleProductDisplayName { clear: right; font-size: 110%; font-weight: bold; margin: 10px; }
input[type="text"],input[type="password"] { background: none repeat scroll 0 0 white; border: 1px solid #CCC; color: #444; padding: 2px; vertical-align: middle; }
.SingleProductDisplayImage { float: left; height:165px; margin: 5px 15px 5px 5px; width: 125px; }
.WideSingleProductDisplayPanel { border-bottom: 1px solid #EEE; float: left; position: relative; width: 100%; }
.ProductBadge { left: -20px; position: absolute; top: -5px; }
.productAccessoireContent { margin-left: 10px; }

/* Tabs */
ul.tabnavigation {margin:0;padding:0;}
ul.tabnavigation li {display:block;float:left;margin:0 3px 0 0;height:30px;background-color:#e4e4de;}
ul.tabnavigation li.selected {background-color:#3b593b;color:#fff;}
ul.tabnavigation li a {display:inline-block;padding:5px 10px 0 10px;color:#353535;text-decoration:none;}
ul.tabnavigation li.selected a {color:#fff;}

/* Reviews */
.reviews .reviewlist {width:440px;float:left;}
.reviews .reviewform {width:440px;float:left;}
.ProductReview { margin: 10px; padding: 0 0 0 5px; border-left: 5px solid #eee; }
.ProductReviewKarma { display: block; padding-top: 5px; font-size: 90%; color: #666; }
.btnSubmit { background: none; }
.box { border: 1px solid #C6C6C6; margin-top: 10px; padding: 7px; margin-right:16px; border-radius: 5px; }

/* Featured products */
.featuredproducts .record {float:left;margin:0 0 20px 20px;min-height:260px;} /* RESPONSIVE FIX: was height:260px */
.productgrid .decoratedblock {margin:0;padding:0;}
.productrotator .decoratedblock { text-align: center; background: none; }
.productrotator a { text-decoration: none; line-height: 1.5em; }
.productrotator a img { border: 5px solid #eee !important; margin: 0 0 5px 0; }
.productrotator a:hover img { border: 5px solid #ddd !important; }
.breadcrumbs {margin-bottom:4px;}
#SiteMapColumns { clear: both; overflow: hidden; width: 100%; }
#SiteMapColumns li { list-style: square inside; color: #ccc; }
.ColumnOne { width: 450px; float: left; border-right: 1px solid #eee; }
.ColumnTwo, .ColumnThree { width: 450px; float: right; margin-bottom: 15px; }

/* Category HP */
.hp_container_image {background-position: right top;background-repeat: no-repeat;display: block;height: 90px;position: absolute;width: 125px;z-index: 1;text-align: center;right: 5px;top: 31px;}
.hp_container_block {float: left;min-height: 113px;margin: 0 3px 3px 0;overflow: hidden;padding: 16px 10px;position: relative;width: 231px;} /* RESPONSIVE: was height:113px (clipped tall tiles); now min-height so tiles grow to fit */
.hp_container_block a {display: block;text-decoration: none; color: var(--site-link, #2489ce);}/* sub-links use the Site Settings link color; font-size inherits the admin body font size */
.hp_container_block a:hover {color: var(--site-link-hover, #3399ff);}
a.hp_container_hdr {color: var(--site-content-text, #4C4D4F);font-size: 1.15em;font-weight: bold;margin-bottom: 10px;text-decoration: underline;}/* title color from Site Settings content-text; size relative (1.15em) so it tracks the admin body font size while staying a heading */
.shop_now,.shop_now:hover{background-position: -381px -77px;background-repeat: no-repeat;display: block;height: 21px;width:84px;text-decoration:none;margin-top:2px}
#hp_category_blocks .shop_now{margin-top: 11px;}
.msg-info{width: 100%;background: #c2e6ed; height: 50px;border: #71bfe7 1px solid;padding-left: 12px; display: flex; align-items: center;}
.text-loading {font:arial; font-size:12px; font-weight:bold;color:#666}

#recherche_2 {height: 23px;background-image: url(/Images/bg_search.gif);background-repeat: repeat-x;font-family: verdana;border-radius: 2px;font-size: 12px;padding-top: 6px;color: #F60;font-weight: bold;margin-bottom: 5px;border: #9a9a9a 1px solid;padding-left: 16px;}
.result-search {text-align: center;background-color: #FFF;color: #333;border: solid 1px #9a9a9a;border-radius: 2px;margin-bottom: 5px;padding: 16px;}
.result-search .result-msg {color: #060;font-family: verdana;font-size: 14px;font-weight: bold;padding: 0px;}
.result-search .result-msg-error {padding: 0px;color:#FF0000; font-family:verdana; font-size:14px; font-weight:bold;}

header { display: block; background: #777; height: 50px; position: relative; min-width: 600px; }
header h1 { font: bold 24px Arial, Helvetica, sans-serif; color: #fff; position: absolute; left: 20px; top: 8px; }

.title { background: transparent;font-size: 12px;font-family: Arial,Helvetica,sans-serif;font-weight: none;color: #1FB3DD;line-height: .5em; margin: 0; margin-bottom: 0px; }
.title:hover {text-decoration: underline;}
.divwhite{color: White;}

#pnlMain, #hide-infos {display:none;}
#action-infos {margin:10px;}
#pnlMain {margin:0px; border-top:1px solid #B4B4B4; background-color:#FFF; padding:10px}


/* ============================================================ */
/* RESPONSIVE BREAKPOINTS                                       */
/* ============================================================ */

/* Tablet / narrow desktop: 1050px - 1280px */
@media screen and (max-width: 1280px) {
    #left-nav-column {
        width: 220px; /* RESPONSIVE: narrower sidebar on smaller screens */
    }
    #left-nav-column .category-tree li a,
    #left-nav-column .link-tree li a {
        width: 182px; /* RESPONSIVE: match narrower sidebar */
    }
    #main-with-left-nav {
        width: calc(100% - 230px); /* RESPONSIVE: adjust for narrower sidebar */
    }
    #categorymain {
        width: calc(100% - 230px);
    }
    #maincolumn,
    .store-category-page #maincolumn,
    .myaccountpage #maincolumn,
    .myaccountorderdetailspage #maincolumn,
    .store-product-page #margincolumn {
        width: calc(100% - 230px);
    }
    #homepagecolumn2 {
        width: calc(100% - 210px);
    }
    .checkout .sections {
        width: calc(100% - 340px);
    }
    #navcolumn, #categoryleft {
        width: 220px;
    }
}

/* Below 1050px: the fluid shell reflows to fit instead of horizontal-scrolling.
   Was: #site-wrapper { min-width:1050px } to force a scrollbar — removed so the
   page shrinks down to mobile. Per-element stacking rules (sidebar, megamenu,
   sliders) are added in later commits as each piece is made responsive. */

/* ===== MV-SITE-THEME (auto-generated from Admin > Themes > Site Settings — do not edit between these markers) ===== */
:root{--site-header-start:#1c70bf;--site-header-end:#1961a4;--site-header-text:#ffffff;--site-button-bg:#4F7CC2;--site-button-text:#ffffff;--site-button-border:#20466a;--site-button-hover:#224781;--site-button-hover-text:#ffffff;--site-content-bg:#f5f5f5;--site-content-text:#2c3e50;--site-link:#0f63d2;--site-page-bg:#ffffff;--site-price:#27ae60;--site-border:#4f74b0;--site-muted:#666666;--site-surface:#fafafa;--site-link-hover:#43a7f4;--site-radius:5px;--site-menu-bar-start:#1c70bf;--site-menu-bar-end:#1961a4;--site-menu-text:#ffffff;--site-menu-panel-bg:#fafafa;--site-menu-link:#2c3e50;--site-menu-link-hover:#43a7f4;--site-menu-font:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;--site-menu-size:13px;--product-box-width:90%;}
.mv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--site-radius,6px);font:600 14px/1 Arial,Helvetica,sans-serif;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .05s,color .15s;vertical-align:middle;}
.mv-btn:hover{text-decoration:none;}.mv-btn:active{transform:translateY(1px);}.mv-btn svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor;}
.mv-btn--primary{background:var(--site-button-bg,#4F7CC2);color:var(--site-button-text,#ffffff);border-color:var(--site-button-border,#20466a);}.mv-btn--primary:hover{background:var(--site-button-hover,#224781);color:var(--site-button-hover-text,#ffffff) !important;box-shadow:none;}
.mv-btn--ghost{background:transparent;color:var(--site-link,#0f63d2);border-color:var(--site-button-border,#20466a);}.mv-btn--ghost:hover{background:var(--site-button-hover,#224781);color:var(--site-button-hover-text,#ffffff) !important;border-color:var(--site-button-hover,#224781);}
.mv-btn--whatsapp{background:rgba(37,211,102,.3);color:#0c7a3e;border-color:#25D366;}.mv-btn--whatsapp:hover,.mv-btn--whatsapp:hover span{background:#25D366;color:#ffffff !important;border-color:#25D366;box-shadow:none;text-shadow:none;}.mv-btn--whatsapp:hover svg{fill:#ffffff !important;}
.mv-btn--lg{padding:13px 24px;font-size:16px;}.mv-btn--sm{padding:7px 14px;font-size:13px;gap:5px;}.mv-btn--sm svg{width:14px;height:14px;}.mv-btn--icon{padding:6px;gap:0;}.mv-btn--block{display:flex;width:100%;}
a.btn-off,a.btn-on,a.btn-small,.btn-off,.btn-on,.btn-small{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;background:var(--site-button-bg,#4F7CC2) !important;background-image:none !important;color:var(--site-button-text,#ffffff) !important;border:1px solid var(--site-button-border,#20466a) !important;border-radius:var(--site-radius,6px) !important;padding:8px 16px !important;width:auto !important;height:auto !important;min-width:0 !important;font:600 13px/1 Arial,Helvetica,sans-serif !important;text-decoration:none !important;cursor:pointer;vertical-align:middle;text-shadow:none !important;box-shadow:none !important;}a.btn-off:hover,a.btn-on:hover,a.btn-small:hover,.btn-off:hover,.btn-on:hover,.btn-small:hover{background:var(--site-button-hover,#224781) !important;color:var(--site-button-hover-text,#ffffff) !important;}.btn-off [class*='-icon'],.btn-on [class*='-icon'],.btn-small [class*='-icon'],.btn-right-off,.btn-right-on,.btn-right-small{display:none !important;}.btn-text-off,.btn-text-on,.btn-text-small{display:inline !important;background:none !important;padding:0 !important;margin:0 !important;color:inherit !important;font:inherit !important;width:auto !important;height:auto !important;}
.mv-suggest-carousel{position:relative;padding:0 42px;}.mv-suggest-track{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:14px;padding:8px 2px 14px;align-items:stretch;}.mv-suggest-track::-webkit-scrollbar{height:8px;}.mv-suggest-track::-webkit-scrollbar-thumb{background:#cfd4da;border-radius:4px;}.mv-suggest-track .cell-product{flex:0 0 195px !important;width:195px !important;min-width:195px !important;margin:0 !important;}.mv-suggest-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--site-button-bg,#4F7CC2);color:var(--site-button-text,#ffffff);border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.2);padding:0;}.mv-suggest-arrow svg{width:20px;height:20px;fill:currentColor;}.mv-suggest-arrow:hover{background:var(--site-button-hover,#224781);}.mv-suggest-prev{left:0;}.mv-suggest-next{right:0;}
#cart-container #carttotals table td,#carttotals table td{padding:2px 8px !important;line-height:1.3 !important;vertical-align:middle !important;}#cart-container #carttotals,#carttotals{line-height:1.3 !important;}
.mv-megamenu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;position:relative;}.mv-megamenu>.mv-mm-item{position:relative;border-right:1px solid rgba(255,255,255,.22);}.mv-megamenu>.mv-mm-item:last-child{border-right:0;}.mv-megamenu .mv-mm-top{display:block;padding:10px 12px;color:var(--site-menu-text,#fff) !important;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:bold !important;font-size:var(--site-menu-size,14px) !important;line-height:1.2 !important;text-decoration:none;white-space:nowrap;}.mv-megamenu .mv-mm-caret{font-size:10px !important;margin-left:5px;opacity:.85;}.mv-megamenu .mv-mm-item:hover>.mv-mm-top{background:var(--site-menu-bar-end,#396b9e);color:var(--site-menu-text,#fff) !important;}.mv-megamenu .mv-mm-panel{display:none;position:absolute;left:0;top:100%;margin-top:0;z-index:1000;min-width:0;max-width:none;background:none;border:0;box-shadow:none;}.mv-megamenu .mv-mm-has-panel:hover>.mv-mm-panel{display:block;}.mv-megamenu .mv-mm-item:nth-last-child(-n+2)>.mv-mm-panel{left:0;right:auto;}.mv-megamenu .mv-mm-panel-inner{display:inline-flex;flex-wrap:nowrap;align-items:flex-start;gap:20px;padding:18px 20px;width:auto;max-width:96vw;box-sizing:border-box;background:var(--site-menu-panel-bg,#ffffff);border:1px solid var(--site-border,#cdcdcd);border-top:3px solid var(--site-menu-bar-end,#396b9e);box-shadow:0 6px 16px rgba(0,0,0,.12);border-radius:0 0 var(--site-radius,5px) var(--site-radius,5px);}.mv-megamenu .mv-mm-col{min-width:170px;}.mv-megamenu .mv-mm-col a{white-space:nowrap;}.mv-megamenu .mv-mm-group{margin-bottom:12px;}.mv-megamenu .mv-mm-head{display:block;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:bold !important;font-size:var(--site-menu-size,14px) !important;line-height:1.3 !important;color:var(--site-menu-link,#1a1a1a) !important;text-decoration:none;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--site-border,#cdcdcd);}.mv-megamenu .mv-mm-head:hover{color:var(--site-menu-link-hover,#3399ff) !important;}.mv-megamenu .mv-mm-links{list-style:none;margin:0;padding:0;}.mv-megamenu .mv-mm-links li{margin:3px 0;}.mv-megamenu .mv-mm-links a{display:block;color:var(--site-menu-link,#1a1a1a) !important;text-decoration:none;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:normal !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;padding:3px 7px;border-radius:3px;}.mv-megamenu .mv-mm-links a:hover{color:var(--site-menu-link-hover,#3399ff) !important;background:var(--site-menu-panel-bg,#eef2f7) !important;text-decoration:none;}.mv-megamenu .mv-mm-link{display:block;color:var(--site-menu-link,#1a1a1a) !important;text-decoration:none;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:normal !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;padding:3px 7px;border-radius:3px;}.mv-megamenu .mv-mm-link:hover{color:var(--site-menu-link-hover,#3399ff) !important;background:var(--site-menu-panel-bg,#eef2f7) !important;font-weight:inherit !important;}.mv-megamenu .mv-mm-sub-head{display:block;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:bold !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;color:var(--site-menu-link,#1a1a1a) !important;text-decoration:none;margin-top:6px;padding-bottom:2px;border-bottom:1px solid var(--site-border,#cdcdcd);}.mv-megamenu .mv-mm-sub-head:hover{color:var(--site-menu-link-hover,#3399ff) !important;}.mv-megamenu .mv-mm-sublink{display:block;color:var(--site-menu-link,#1a1a1a) !important;text-decoration:none;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:normal !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;padding:3px 7px;border-radius:3px;}.mv-megamenu .mv-mm-sublink:hover{color:var(--site-menu-link-hover,#3399ff) !important;background:var(--site-menu-panel-bg,#eef2f7) !important;text-decoration:none;font-weight:inherit !important;}.mv-megamenu .mv-mm-link::before,.mv-megamenu .mv-mm-sublink::before,.mv-megamenu .mv-mm-links a:not(.mv-mm-head):not(.mv-mm-sub-head)::before{content:'\2022';color:var(--site-menu-bar-end,#396b9e);margin-right:7px;font-weight:bold;font-size:1.25em;line-height:1;vertical-align:-1px;}.mv-megamenu .mv-mm-links .mv-mm-links{margin-left:12px;}.mv-megamenu .mv-mm-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:6px;vertical-align:-3px;flex:0 0 auto;}.mv-megamenu .mv-mm-ico svg{width:16px;height:16px;display:block;}.mv-megamenu a:has(.mv-mm-ico)::before{content:none !important;}.mv-megamenu .mv-mm-top .mv-mm-ico svg,.mv-megamenu .mv-mm-top .mv-mm-ico svg *{fill:var(--site-menu-text,#fff) !important;stroke:none !important;}.mv-megamenu .mv-mm-banner img{max-width:240px;height:auto;border-radius:var(--site-radius,5px);display:block;}.mv-megamenu .mv-mm-childimg{display:block;}.mv-megamenu .mv-mm-childimg img{max-width:150px;height:auto;border-radius:var(--site-radius,5px);margin-bottom:6px;display:block;}.mv-megamenu .mv-mm-imagecol{margin-left:auto;display:flex;flex-direction:column;gap:10px;padding-left:14px;}.mv-megamenu .mv-mm-imagecol img{max-width:220px;height:auto;border-radius:var(--site-radius,5px);display:block;}.mv-megamenu .mv-mm-colimg{display:block;margin-top:8px;}.mv-megamenu .mv-mm-colimg img{max-width:170px;height:auto;border-radius:var(--site-radius,5px);display:block;}.mv-megamenu .mv-mm-html{max-width:860px;color:var(--site-content-text,#1a1a1a) !important;}.mv-megamenu .mv-mm-html img{max-width:100%;height:auto;}
#header-menu{position:sticky;top:0;z-index:900;box-shadow:0 2px 6px rgba(0,0,0,.10);}.mv-searchbar.mv-cat-open{z-index:1001 !important;overflow:visible !important;}.mv-searchbar.mv-cat-open .dropdowncategory,.mv-searchbar.mv-cat-open #categoryselect,.mv-hdr-search:has(.mv-cat-open),.mv-header-main:has(.mv-cat-open){overflow:visible !important;}.dropdowncategory dd,#categoryselect dd{z-index:1002 !important;}.dropdowncategory a,.dropdowncategory dt a,.dropdowncategory dd ul li a,#categoryselect a,#categoryselect dt a,#categoryselect dd ul li a{font-size:13px !important;}
#logo{font-size:22px;font-family:Arial,Helvetica,sans-serif;color:var(--site-content-text,#000000);font-weight:bold;}#table{border-collapse:separate;border-spacing:0;width:100%;}#header #header-content{text-align:right;min-height:100px;flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 12px;position:relative;}#header #header-content br.clear{display:none;}#header ul{display:block;list-style:none outside none;margin:0;padding:0;position:relative;}
.cell-product .image img:not(.manufacturer-icon){width:auto !important;height:auto !important;max-width:240px !important;max-height:240px !important;object-fit:contain;background:transparent !important;}.detailedList .product_image img:not(.manufacturer-icon),.product-line .product_image img:not(.manufacturer-icon){width:auto !important;height:auto !important;max-width:240px !important;max-height:240px !important;background:transparent !important;}.cell-product .image,.product-line .product_image{background:transparent !important;}.cell-product .image{height:240px !important;width:100% !important;max-width:240px !important;display:flex !important;align-items:center;justify-content:center;margin-left:auto;margin-right:auto;}.detailedList .product-line .product_image{width:256px !important;}.detailedList .product-line .right-list{margin-left:272px !important;}#imgMain,.productimage img{width:auto !important;height:auto !important;max-width:570px !important;}#productContent .productimage,#productContent #imgProduct{float:left !important;}#productContent #rightContent{float:none !important;width:auto !important;display:flow-root;margin-left:24px !important;line-height:1.6;}
body .mv-product-title{font-size:20px !important;line-height:1.25 !important;font-weight:bold !important;margin:0 0 10px !important;}body .mv-product-title,body .mv-product-title #productname,body .mv-product-title span,body .mv-product-title a{font-size:20px !important;font-weight:bold !important;}#main-content>.manufacturer-icon{display:inline-block !important;vertical-align:bottom;width:auto !important;float:none !important;margin:0 12px 0 0 !important;}#main-content>.manufacturer-icon img.manufacturer-icon{margin:0 !important;}#main-content>h1.mv-product-title{display:inline-block !important;vertical-align:bottom;margin-bottom:0 !important;}#homepagecolumn1,#homepagecolumn2{box-sizing:border-box !important;}#homepagecolumn1{margin-top:5px !important;}#homepagecolumn1>.sidemenu:first-child,#homepagecolumn1 .sf-cb-custnotif__body:first-child,#homepagecolumn1 .customernotification{margin-top:0 !important;}.cell-product .image,.detailedList .product_image .link{position:relative;}.detailedList .product_image .link{min-height:180px;box-sizing:border-box;display:block;}.cell-product .image::before,.detailedList .product_image .link::before{content:'';position:absolute;top:10%;left:10%;right:10%;bottom:10%;border-radius:8px;background:linear-gradient(100deg,#ececec 30%,#f6f6f6 50%,#ececec 70%);background-size:200% 100%;animation:mvskel 1.3s linear infinite;z-index:0;pointer-events:none;}.cell-product .image img[data-hover],.detailedList .product_image .link img[data-hover]{position:relative;z-index:1;}.cell-product .image img[data-hover]{width:100% !important;height:190px !important;max-height:none !important;object-fit:contain !important;object-position:center !important;}.detailedList .product_image .link img[data-hover]{width:auto !important;max-width:100% !important;height:auto !important;max-height:200px !important;object-fit:contain !important;object-position:center !important;margin:0 auto !important;display:block !important;}.detailedList .product_image{padding-top:6px !important;padding-bottom:4px !important;}.detailedList .product_image .see_product{margin:5px 0 2px !important;}.cell-product .image:has(img.mvld)::before,.detailedList .product_image .link:has(img.mvld)::before{opacity:0;animation:none;}@keyframes mvskel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.mv-btn--icon.sf-ui-pinfo__wishlist-link svg{width:20px;height:20px;}#productContent #imgProduct{width:42% !important;min-width:450px !important;max-width:640px !important;margin:0 24px 0 0 !important;text-align:center !important;}#productContent .productimage img:not(.mv-fly-clone),#productContent #imgMain:not(.mv-fly-clone){width:100% !important;max-width:100% !important;height:auto !important;margin:0 auto !important;display:block;}#productContent #addToCart{margin-bottom:16px !important;}#productContent #pricewrapper{clear:both !important;margin-top:6px !important;}
img.manufacturer-icon,.products_header img,.products_header a img,#manufacturer-icon img,.manufacturericon img{width:90px !important;height:30px !important;object-fit:contain;display:block;margin-left:auto;margin-right:auto;border:0 !important;}.product_image .see_product{text-align:center;}
.product_image .see_product a:has(img.manufacturer-icon){display:block;clear:both;margin-top:4px;}
.cell-product .image a:not(.mv-fav-heart),.detailedList .product_image .link,.product-line .product_image .link{display:block !important;position:relative;z-index:2;cursor:pointer;}.cell-product .image a img:not(.manufacturer-icon),.product-line .product_image .link img:not(.manufacturer-icon){display:block;margin-left:auto;margin-right:auto;}.product-line .right-list a.product-name-link,.product-line .right-list a.product-desc-link{cursor:pointer;}
.product_image .promo-badge{top:45px;right:8px;left:auto;}.product_image .mv-list-logo{position:absolute;top:8px;bottom:auto;left:8px;z-index:4;margin:0;background:rgba(255,255,255,.95);border:1px solid var(--site-border,#e0e0e0);border-radius:4px;padding:3px 6px;line-height:0;box-shadow:0 1px 3px rgba(0,0,0,.12);}.cell-product .image .mv-list-logo{position:absolute;top:auto;bottom:8px;left:8px;z-index:4;margin:0;background:rgba(255,255,255,.7);border:1px solid var(--site-border,#e0e0e0);border-radius:4px;padding:3px 6px;line-height:0;box-shadow:0 1px 3px rgba(0,0,0,.12);}.product_image .mv-list-logo a,.cell-product .image .mv-list-logo a{display:block;line-height:0;}.product_image .mv-list-logo img,.cell-product .image .mv-list-logo img{max-width:80px;max-height:24px;width:auto;height:auto;object-fit:contain;display:block;}
.categorytitle{display:none !important;}
.breadcrumbs{clear:both;position:relative;z-index:1;margin:0 0 14px;padding:9px 14px;background:var(--site-surface,#f6f7f9);border:1px solid var(--site-border,#e6e8eb);border-radius:8px;font-size:13px;line-height:1.6;}.breadcrumbs .links{display:flex;flex-wrap:wrap;align-items:center;gap:2px;}.breadcrumbs a{color:var(--site-muted,#6b7280);text-decoration:none;padding:2px 5px;border-radius:4px;transition:color .15s,background .15s;}.breadcrumbs a:hover{color:var(--site-link-hover,#2c5aa0);background:rgba(0,0,0,.05);text-decoration:none;}.breadcrumbs .current{color:var(--site-content-text,#1a1a1a);font-weight:600;padding:2px 5px;}
.mv-affa .btn-primary,.mv-affa .btn.btn-primary{background:linear-gradient(135deg,var(--site-header-start,#4a7ab0),var(--site-header-end,#396b9e)) !important;border:0 !important;border-radius:5px !important;color:var(--site-header-text,#fff) !important;}.mv-affa .btn-primary:hover,.mv-affa .btn.btn-primary:hover{filter:brightness(.82) !important;font-weight:700 !important;color:var(--site-header-text,#fff) !important;}.mv-affa .swiper-pagination-bullet{background:var(--site-header-end,#396b9e) !important;opacity:.4;}.mv-affa .swiper-pagination-bullet.swiper-pagination-bullet-active{background:linear-gradient(135deg,var(--site-header-start,#4a7ab0),var(--site-header-end,#396b9e)) !important;opacity:1;}.mv-affa .swiper-slide-active a,.mv-affa .swiper-slide-active img,.mv-affa .swiper-slide-active h1,.mv-affa .swiper-slide-active h2,.mv-affa .swiper-slide-active h3,.mv-affa .swiper-slide-active h4,.mv-affa .swiper-slide-active p,.mv-affa .swiper-slide-active span,.mv-affa .swiper-slide-active [class*='content']{opacity:1 !important;}
.mv-promo-carousel{position:relative;margin:0 0 16px;background:#fff;border:1px solid #e6e8eb;border-radius:12px;padding:12px 14px;box-sizing:border-box;}.mv-promo-carousel .sponshead{position:relative;display:flex;justify-content:flex-start;align-items:flex-end;margin:0 0 14px;}.mv-promo-carousel .sponshead::before{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae));border-radius:3px;z-index:0;}.mv-promo-carousel .sponshead h5{position:relative;z-index:1;margin:0 0 0 24px;padding:7px 34px 6px;background:linear-gradient(var(--site-header-start,#6facd5),var(--site-header-end,#497bae));color:var(--site-header-text,#fff);font-weight:bold;font-size:13px;line-height:1;text-transform:uppercase;white-space:nowrap;clip-path:polygon(22px 0,calc(100% - 22px) 0,calc(100% - 12px) 9px,100% 100%,0 100%,12px 9px);}.mv-promo-viewport{position:relative;overflow:hidden;}.mv-promo-btn{position:absolute;top:90px;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-promo-prev{left:4px;}.mv-promo-next{right:4px;}.mv-promo-btn:hover{background:var(--site-button-bg,#2c3e50);color:#fff;border-color:transparent;}.mv-promo-track{display:flex;gap:12px;margin:0;padding:0;list-style:none;transition:transform .4s ease;will-change:transform;}.mv-promo-card{flex:0 0 auto;width:190px;box-sizing:border-box;border:1px solid #eef0f2;border-radius:10px;padding:10px;text-align:center;background:#fff;position:relative;transition:box-shadow .15s,border-color .15s;}.mv-promo-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);border-color:#cfd4da;}.mv-promo-tl{position:absolute;top:8px;bottom:8px;left:8px;z-index:5;display:flex;flex-direction:column-reverse;align-items:flex-start;justify-content:space-between;gap:5px;pointer-events:none;}.mv-promo-tl>*{pointer-events:auto;}.mv-promo-logo{display:inline-block;background:rgba(255,255,255,.7);border:1px solid var(--site-border,#e0e0e0);border-radius:4px;padding:3px 6px;line-height:0;box-shadow:0 1px 3px rgba(0,0,0,.12);}.mv-promo-logo img{max-width:90px;max-height:26px;width:auto;height:auto;object-fit:contain;display:inline-block;}.mv-promo-badge{display:inline-block;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);pointer-events:none;}.mv-promo-tr{position:absolute;top:46px;right:8px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none;}.mv-promo-avail{display:inline-block;background:none;border:0;border-radius:0;padding:0;line-height:1.3;box-shadow:none;max-width:150px;overflow:hidden;}.mv-promo-avail .siteprice,.mv-promo-avail .yousave,.mv-promo-avail span{font-size:10px !important;white-space:nowrap;}.mv-promo-media{position:relative;width:100%;height:150px;margin-bottom:8px;}.mv-promo-imglink{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;}.mv-promo-img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;}.mv-promo-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-promo-name{display:block;font-size:13px;font-weight:bold;color:#222;text-decoration:none;margin:2px 0;line-height:1.25;height:32px;overflow:hidden;}.mv-promo-name:hover{color:var(--site-link-hover,#3399ff);}.mv-promo-sku{font-size:11px;color:#9aa0a6;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.mv-promo-price{font-size:15px;font-weight:bold;color:#c0392b;}.mv-promo-price .price,.mv-promo-price .siteprice,.mv-promo-price span{font-size:15px !important;font-weight:bold !important;}
.cell-product .image .mv-quickview-trigger,.mv-promo-media .mv-quickview-trigger{bottom:46px;}.product-line .mv-quickview-trigger{top:50% !important;bottom:auto !important;transform:translate(-50%,calc(-50% + 8px)) !important;}.product-line:hover .mv-quickview-trigger,.product-line .mv-quickview-trigger:focus-visible{transform:translate(-50%,-50%) !important;}
.mv-pslider{position:relative;width:100%;box-sizing:border-box;}.mv-pslider__track{position:relative;}.mv-pslider__slide{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .4s ease;text-align:center;padding:6px;box-sizing:border-box;}.mv-pslider__slide.is-active{position:relative;opacity:1;visibility:visible;}.mv-pslider__media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;}.mv-pslider__imglink{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.mv-pslider__imglink img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}.mv-pslider__name{display:block;font-size:13px;font-weight:bold;color:var(--site-content-text,#222);text-decoration:none;margin:8px 4px 4px;line-height:1.3;}.mv-pslider__name:hover{color:var(--site-link-hover,#3399ff);}.mv-pslider__price{font-size:15px;font-weight:bold;color:var(--site-price,#c0392b);text-align:center;margin-bottom:4px;}.mv-pslider__price .price,.mv-pslider__price .siteprice,.mv-pslider__price span{font-size:15px !important;font-weight:bold !important;}.mv-pslider__nav{position:absolute;top:40%;transform:translateY(-50%);z-index:5;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--site-header-end,#396b9e);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:0;}.mv-pslider__prev{left:2px;}.mv-pslider__next{right:2px;}.mv-pslider__nav:hover{background:var(--site-header-end,#396b9e);color:#fff;}.mv-pslider__dots{text-align:center;padding:6px 0 2px;}.mv-pslider__dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--site-border,#cdcdcd);margin:0 3px;padding:0;cursor:pointer;}.mv-pslider__dot.is-active{background:var(--site-header-end,#396b9e);}.mv-pslider__slide.is-active{animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-fill-mode:both;}.mv-pslider--fx0 .mv-pslider__slide.is-active{animation-name:mvpsFade;}.mv-pslider--fx1 .mv-pslider__slide.is-active{animation-name:mvpsRight;}.mv-pslider--fx2 .mv-pslider__slide.is-active{animation-name:mvpsLeft;}.mv-pslider--fx3 .mv-pslider__slide.is-active{animation-name:mvpsZoom;}.mv-pslider--fx4 .mv-pslider__slide.is-active{animation-name:mvpsFlip;}.mv-pslider--fx5 .mv-pslider__slide.is-active{animation-name:mvpsUp;}@keyframes mvpsFade{from{opacity:0}to{opacity:1}}@keyframes mvpsRight{from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:translateX(0)}}@keyframes mvpsLeft{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:translateX(0)}}@keyframes mvpsZoom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes mvpsFlip{from{opacity:0;transform:perspective(500px) rotateY(82deg)}to{opacity:1;transform:perspective(500px) rotateY(0)}}@keyframes mvpsUp{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:translateY(0)}}
.minislider_shorty{width:100% !important;box-sizing:border-box;overflow:hidden;}
.mv-shorty{position:relative;margin:0 0 16px;border:none;border-radius:0;padding:14px;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:12px;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) * 12px) / var(--mvs-n,5));min-width:0;max-width:calc((100% - (var(--mvs-n,5) - 1) * 12px) / var(--mvs-n,5));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-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-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-actions .mv-btn{width:100%;justify-content:center;}.mv-shorty-media{position:relative;width:100%;height:150px;margin-bottom:8px;}.mv-shorty-imglink{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:100%;overflow:hidden;}.mv-shorty-img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;}.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:block;font-size:13px;font-weight:bold;color:#222;text-decoration:none;margin:2px 0;line-height:1.25;height:32px;overflow:hidden;}.mv-shorty-name:hover{color:var(--site-link-hover,#3399ff);}.mv-shorty-sku{font-size:11px;color:#9aa0a6;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.mv-shorty-price{font-size:15px;font-weight:bold;margin-bottom:8px;}.mv-shorty-price .siteprice,.mv-shorty-price .price,.mv-shorty-price span{font-size:15px !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;}
.ac-text .ac-mfr{display:inline-block;font-weight:bold;text-transform:uppercase;font-size:11px;color:#555;margin-right:6px;}
.mv-searchbar{position:relative;}.mv-recent-search{position:absolute;top:100%;left:0;right:0;z-index:9999;background:#fff;border:1px solid var(--site-border,#d0d5db);border-top:0;border-radius:0 0 10px 10px;box-shadow:0 8px 22px rgba(0,0,0,.14);overflow:hidden;}.mv-recent-head{padding:10px 16px;font-size:12px;font-weight:bold;text-transform:uppercase;color:var(--site-muted,#888);border-bottom:1px solid var(--site-border,#eee);text-align:left;}.mv-recent-list{list-style:none;margin:0;padding:4px 0;text-align:left;}.mv-recent-list li{padding:15px 18px;cursor:pointer;font-size:17px;letter-spacing:.4px;color:var(--site-content-text,#333);display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:13px;}.mv-recent-list li:hover{background:var(--site-surface,#f5f6f8);}.mv-recent-ico{color:var(--site-muted,#aaa);font-size:17px;line-height:1;}.mv-recent-clear{display:block;text-align:center;padding:9px;font-size:12px;font-weight:bold;color:var(--site-header-bar-bg,#c0392b);text-decoration:none;border-top:1px solid var(--site-border,#eee);background:var(--site-surface,#fafafa);}.mv-recent-clear:hover{text-decoration:underline;}.mv-mic-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:transparent;color:var(--site-muted,#666);cursor:pointer;padding:0;}.mv-mic-btn:hover{color:var(--site-button-bg,#2c3e50);}.mv-mic-btn.listening{color:#c0392b;animation:mvmicpulse 1s infinite;}.mv-mic-btn svg{fill:currentColor;}@keyframes mvmicpulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.mv-slick-block{position:relative;margin:0 0 18px;}.mv-slick{position:relative;}.mv-slick-block .editBlock{position:absolute !important;top:8px !important;right:8px !important;left:auto !important;z-index:30 !important;}.mv-slick-full{width:100vw;max-width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;}.mv-slick-title{margin:0 0 10px;font-size:16px;font-weight:bold;color:var(--site-content-text,#333);}.mv-slick-slide{position:relative;padding:0;box-sizing:border-box;}.mv-slick-bglink{display:block;width:100%;}.mv-slick-slide img{display:block;width:100%;height:auto;margin:0;}.mv-slick-full .mv-slick-slide img{border-radius:0;}.mv-slick-overlay{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:5% 6%;box-sizing:border-box;pointer-events:none;}.mv-slick-overlay>*{pointer-events:auto;}.mv-ov-lt,.mv-ov-lm,.mv-ov-lb{align-items:flex-start;text-align:left;}.mv-ov-ct,.mv-ov-cm,.mv-ov-cb{align-items:center;text-align:center;}.mv-ov-rt,.mv-ov-rm,.mv-ov-rb{align-items:flex-end;text-align:right;}.mv-ov-lt,.mv-ov-ct,.mv-ov-rt{justify-content:flex-start;}.mv-ov-lm,.mv-ov-cm,.mv-ov-rm{justify-content:center;}.mv-ov-lb,.mv-ov-cb,.mv-ov-rb{justify-content:flex-end;}.mv-slick-heading{font-size:34px;font-weight:800;line-height:1.12;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45);margin:0 0 8px;max-width:60%;}.mv-slick-sub{font-size:18px;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.45);margin:0 0 16px;max-width:55%;}.mv-slick-btns{display:flex;gap:10px;flex-wrap:wrap;}.mv-slick-btn{display:inline-block;padding:10px 22px;border-radius:4px;background:var(--site-button-bg,#2c3e50);color:#fff !important;font-weight:700;text-decoration:none;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:filter .15s;}.mv-slick-btn:hover{filter:brightness(1.12);}@media (max-width:768px){.mv-slick-heading{font-size:20px;max-width:92%;}.mv-slick-sub{font-size:13px;max-width:92%;}.mv-slick-btn{padding:7px 14px;font-size:12px;}}.mv-slick-caption{margin-top:6px;font-size:13px;color:var(--site-content-text,#333);text-align:center;}.mv-slick-free{display:block;padding:0;}.mv-slick-free .mv-slick-free-layer{position:absolute;margin:0;}.mv-slick-free .mv-slick-heading,.mv-slick-free .mv-slick-sub{max-width:84%;}@media (max-width:768px){.mv-slick-free .mv-slick-btn{padding:7px 14px;font-size:12px;}}.mv-slick .slick-prev,.mv-slick .slick-next{font-size:0;line-height:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--site-border,#d0d5db);box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:5;}.mv-slick .slick-prev{left:8px;}.mv-slick .slick-next{right:8px;}.mv-slick .slick-prev:before,.mv-slick .slick-next:before{font-family:inherit;font-size:22px;line-height:1;color:var(--site-content-text,#333);opacity:1;}.mv-slick .slick-prev:before{content:'\2039';}.mv-slick .slick-next:before{content:'\203A';}.mv-slick .slick-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:auto;display:inline-block;list-style:none;text-align:center;padding:6px 12px;margin:0;background:rgba(255,255,255,.3);border-radius:14px;z-index:5;transition:background .15s;}.mv-slick:hover .slick-dots{background:rgba(255,255,255,.6);}.mv-slick .slick-dots li{display:inline-block;vertical-align:middle;margin:0 5px;padding:0;width:auto;height:auto;}.mv-slick .slick-dots li button{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.3);cursor:pointer;font-size:0;line-height:0;transition:background .15s;}.mv-slick .slick-dots li button:before{content:none !important;display:none !important;}.mv-slick .slick-dots li button:hover{background:rgba(0,0,0,.55);}.mv-slick .slick-dots li.slick-active button{background:var(--site-button-bg,#2c3e50);}.mv-slick-playpause{position:absolute;right:12px;bottom:12px;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--site-border,#d0d5db);background:rgba(255,255,255,.95);color:var(--site-content-text,#333);font-size:13px;line-height:28px;text-align:center;cursor:pointer;z-index:6;box-shadow:0 1px 4px rgba(0,0,0,.15);}.mv-slick-playpause:hover{background:#fff;}.mv-slick .slick-dots .mv-slick-playpause{position:static;display:inline-block;vertical-align:middle;width:auto;height:auto;margin:0 0 0 10px;padding:0;border:0;background:transparent;box-shadow:none;color:rgba(0,0,0,.6);font-size:12px;line-height:1;}.mv-slick .slick-dots .mv-slick-playpause:hover{background:transparent;color:#000;}
.bar{margin-left:0;margin-right:0;}#footer{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;margin-top:30px;}#footer .menu{margin-left:0;display:flex;flex-wrap:wrap;gap:20px;}#footer .footer_col{float:none;width:auto;min-width:150px;height:auto;}
#footer .bottom_footer{box-sizing:border-box !important;max-width:100% !important;}#footer .bottom_footer .right{float:none;max-width:100%;box-sizing:border-box;}#footer .terms_info{float:none !important;clear:both;width:auto !important;max-width:100%;text-align:left;}
body{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;font-size:12px !important;}
body p,body div,body span,body td,body th,body li,body a,body b,body strong,body em,body font,body label,body small,body input,body select,body textarea,body button{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;}
#main-content p,#main-content div,#main-content span,#main-content td,#main-content th,#main-content li,#main-content a,#main-content label,#main-content input,#main-content select,#main-content textarea{font-size:12px !important;}
h1,h2,h3,h4,h5,h6,#producttitle,h1 #producttitle,.title-category{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;}#producttitle,h1 #producttitle,.title-category{font-size:15px !important;}
#productContent p,#productContent span,#productContent td,#productContent li,#productContent a,#productContent label,#productContent div,#rightContent p,#rightContent span,#rightContent div,#rightContent li,#productdescription,#productdescription p,#productdescription span,#productdescription div,#productdescription li{font-size:13px !important;}
#categorymain p,#categorymain span,#categorymain td,#categorymain li,#categorymain a,#categorymain label,#categorymain div,#main-with-left-nav p,#main-with-left-nav span,#main-with-left-nav td,#main-with-left-nav li,#main-with-left-nav a,#main-with-left-nav div,#categoryleft p,#categoryleft span,#categoryleft li,#categoryleft a,.cell-product p,.cell-product span,.cell-product a,.cell-product div,.cell-product .sku,.cell-product .sku em,.product-line p,.product-line span,.product-line a,.product-line div,.product-line .sku,.product-line .sku em{font-size:13px !important;}
#producttitle,#productTitle,h1 #producttitle{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;font-size:24px !important;font-weight:bold !important;}.cell-product .product-name-link,.cell-product .product-name-link em,.product-line .product-name-link,.product-line .product-name-link em{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;font-size:13px !important;font-weight:bold !important;}.cell-product .sku,.cell-product .sku em,.product-line .sku,.product-line .sku em,.product-line .product-desc-link{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;font-size:12px !important;font-weight:normal !important;font-style:normal !important;}
#main-content .siteprice,#main-content .SitePrice,.cell-product .siteprice,.product-line .siteprice,.detailedList .siteprice{font-size:115% !important;}#main-content .product-class-status .siteprice,.product-class-status .siteprice{font-size:130% !important;}#main-content .your-siteprice,.your-siteprice{font-size:10pt !important;}#main-content .price a,#main-content .cell-product .price a,.cell-product .price a,.product-line .price a{font-size:18px !important;}#main-content .detailedList .price,#main-content .detailedList .price *,.detailedList .price,.detailedList .price *{font-size:13pt !important;}
.cell-product .prices,.product-line .prices,.detailedList .prices,.cell-product .prices p,.product-line .prices p,.detailedList .prices p{margin:0 !important;padding:0 !important;line-height:1.25 !important;}
.cell-product .public-price,.cell-product .your-siteprice,.cell-product .yousave-price,.product-line .public-price,.product-line .your-siteprice,.product-line .yousave-price{display:none !important;}.cell-product .your-price,.cell-product .your-price span,.product-line .your-price,.product-line .your-price span{font-size:15pt !important;font-weight:bold !important;color:Green !important;}.cell-product .your-price .mention,.product-line .your-price .mention{font-size:10pt !important;font-weight:normal !important;}.cell-product .ht-price,.product-line .ht-price{display:block !important;font-size:0 !important;color:#888 !important;font-weight:normal !important;}.cell-product .ht-price span,.product-line .ht-price span{font-size:9pt !important;color:#888 !important;font-weight:normal !important;}
.comparator-table .cmp-price{font-weight:normal !important;}.comparator-table .cmp-price .public-price,.comparator-table .cmp-price .your-siteprice{display:none !important;}.comparator-table .cmp-price .your-price,.comparator-table .cmp-price .your-price span{font-weight:bold !important;color:Green !important;font-size:14pt !important;}.comparator-table .cmp-price .ht-price,.comparator-table .cmp-price .ht-price span{display:block !important;font-weight:normal !important;font-size:9pt !important;color:#888 !important;}.comparator-table td:not(.feat-col){font-weight:normal !important;}
#productContent #productPrices_prices .your-price,#productContent #productPrices_prices .your-price span{font-size:14pt !important;font-weight:bold !important;color:Green !important;}#productContent #productPrices_prices .your-price .mention{font-size:10pt !important;}#productContent #productPrices_prices .public-price,#productContent #productPrices_prices .public-price span,#productContent #productPrices_prices .your-siteprice,#productContent #productPrices_prices .your-siteprice span{font-size:11pt !important;}#productContent #productPrices_prices .ht-price,#productContent #productPrices_prices .ht-price span{font-size:9pt !important;}
#productContent #iconPromo{display:inline-flex !important;align-items:center;justify-content:center;width:210px !important;min-width:0 !important;max-width:210px !important;height:38px;background:url('assets/promo-flash.png') no-repeat !important;background-size:100% 100% !important;color:#fff !important;font-size:19px !important;font-weight:bold !important;line-height:1 !important;padding:0 6px 0 115px !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;}#productContent #iconPromo:not(.has-promo){display:none !important;}
#treeCategory .treeCatIcon{background:none !important;position:relative;box-sizing:border-box;width:14px !important;height:14px !important;border:1px solid var(--site-header-end,#396b9e);border-radius:3px;float:left;margin:2px 6px 0 0 !important;cursor:pointer;}#treeCategory .treeCatIcon::before,#treeCategory .treeCatIcon::after{content:'';position:absolute;background:var(--site-header-end,#396b9e);}#treeCategory .treeCatIcon::before{left:2px;right:2px;top:50%;height:2px;margin-top:-1px;}#treeCategory .treeCatIcon::after{top:2px;bottom:2px;left:50%;width:2px;margin-left:-1px;}#treeCategory .treeCatIcon.expanded::after{display:none;}
#treeCategory,#treeCategory ul{list-style:none;margin:0;padding:0;}#treeCategory .children{margin-left:18px;}#treeCategory li{margin:1px 0;}#treeCategory a{display:inline-block;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif);font-size:13px;line-height:1.5;color:var(--site-link,#2489ce);text-decoration:none;padding:1px 0;}#treeCategory>li>span.categoryTitle>a{font-weight:bold;color:var(--site-content-text,#1a1a1a);}#treeCategory .children>li>a:first-child::before{content:'\2022';color:var(--site-header-end,#396b9e);margin-right:7px;font-weight:bold;font-size:1.15em;line-height:1;vertical-align:-1px;}
.customernotification{position:relative;}.customernotification .customernotificationfield{width:100% !important;box-sizing:border-box !important;float:none !important;display:block !important;margin:0 0 6px 0 !important;height:auto !important;padding:7px 9px !important;}.customernotification .cn-row{display:flex;align-items:stretch;gap:6px;position:relative;}.customernotification .cn-row .customernotificationfield{margin:0 !important;flex:1 1 auto;min-width:0;}.customernotification #btncustomernotification{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;background:var(--site-button-bg,#2c3e50) !important;color:var(--site-button-text,#ffffff) !important;border-radius:var(--site-radius,5px);text-decoration:none;}.customernotification #btncustomernotification:hover{background:var(--site-button-hover,var(--site-header-end,#396b9e)) !important;}.customernotification #btncustomernotification svg{display:block;width:20px;height:20px;fill:currentColor;}.customernotification .load-customernotification{position:absolute !important;right:52px;top:50% !important;margin:-8px 0 0 0 !important;bottom:auto !important;}.newsletter #email,.newsletter-footer #email,.mv-footer .newsletter-footer #email{width:100% !important;box-sizing:border-box !important;}
#criteresSearchLeft .ScrollBar,#criteresSearch .ScrollBar,.ScrollBar{width:100% !important;box-sizing:border-box !important;}#clearAll,#criteresSearch .clearAll{margin-right:10px !important;}
#criteresSearchLeft{border:0 !important;background:#fff;margin-bottom:14px;}#criteresSearchLeft .criteria_header{border-radius:8px 8px 0 0 !important;font-size:14px !important;}#criteresSearchLeft .sidemenu_body{border:1px solid #e3e6ea !important;border-top:0 !important;border-radius:0 0 8px 8px !important;padding:0 14px !important;background:#fff;}#criteresSearch{margin:0 !important;padding:0 !important;list-style:none !important;}#criteresSearch>li{border-top:1px solid #ededed;position:relative;padding:0;margin:0;list-style:none;}#criteresSearch>li:first-child{border-top:0;}#criteresSearch .clearItem{position:absolute;right:26px;top:15px;font-size:11px;opacity:0;transition:opacity .15s;z-index:2;}#criteresSearch>li:hover .clearItem{opacity:1;}#criteresSearch .clearItem a{color:var(--site-link-hover,#2c5aa0);text-decoration:none;}#criteresSearch .title{display:flex !important;align-items:center;justify-content:space-between;cursor:pointer;margin:0 !important;padding:13px 0 !important;color:#1a1a1a !important;font-weight:700 !important;font-size:14px !important;}#criteresSearch .title:hover,#criteresSearch label:hover{text-decoration:none !important;}#criteresSearch .title:hover .title-criteria{color:var(--site-header-end,#1961a4) !important;}#criteresSearch .title-criteria{order:1;flex:1 1 auto;min-width:0;font-weight:700;}#criteresSearch .title-icon{order:2;width:16px;height:16px;position:relative;flex:0 0 auto;margin:0 0 0 8px;background:none !important;}#criteresSearch .title-icon::before,#criteresSearch .title-icon::after{content:'';position:absolute;background:#666;}#criteresSearch .title-icon::before{left:2px;right:2px;top:50%;height:2px;margin-top:-1px;}#criteresSearch .title-icon::after{top:2px;bottom:2px;left:50%;width:2px;margin-left:-1px;}#criteresSearch .title-icon.expanded::after{display:none;}#criteresSearch .ScrollBar{width:100% !important;max-height:240px;overflow:auto;padding:0 0 12px !important;margin:0 !important;}#criteresSearch .children{display:flex !important;align-items:center;padding:5px 2px !important;margin:0 !important;}#criteresSearch .children input[type=checkbox]{width:16px;height:16px;margin:0 9px 0 0 !important;flex:0 0 auto;accent-color:var(--site-header-end,#1961a4);cursor:pointer;}#criteresSearch .children label{flex:1 1 auto;margin:0 !important;cursor:pointer;display:flex !important;align-items:center;justify-content:space-between;gap:8px;font-size:13px !important;font-weight:normal !important;color:#444 !important;}#criteresSearch .children label:hover{color:var(--site-header-end,#1961a4) !important;}#criteresSearch .cc-count{color:#9aa0a6;font-size:12px;flex:0 0 auto;white-space:nowrap;}
#top-menu,#top-menu a,#header-menu,#header-menu a,.megamenu a{font-family:Montserrat, Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;font-size:13px !important;}
#list:has(.cell-product){display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:16px !important;align-items:stretch !important;}#list:has(.cell-product) .cell-product{width:auto !important;min-width:0 !important;max-width:none !important;margin:0 !important;}:is(.detailedList,#list) .cell-product{display:inline-flex !important;flex-direction:column;vertical-align:top;width:calc(100% / 5 - 16px) !important;min-width:140px;min-height:0 !important;height:auto !important;margin:8px !important;background:#fff;border:1px solid #e6e8eb;border-radius:10px;padding:12px;box-sizing:border-box;position:relative;transition:box-shadow .15s ease,border-color .15s ease;}:is(.detailedList,#list) .cell-product:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);border-color:#cfd4da;}:is(.detailedList,#list) .cell-product .grid-top-left,:is(.detailedList,#list) .cell-product .grid-top,:is(.detailedList,#list) .cell-product .grid-left{display:none;}:is(.detailedList,#list) .cell-product .image{width:auto !important;max-width:none !important;height:auto !important;margin:0 -12px 6px !important;padding:0 3px !important;box-sizing:border-box !important;display:block !important;text-align:center;line-height:0;overflow:visible;}:is(.detailedList,#list) .cell-product .image a{display:block !important;width:100%;margin:0 !important;padding:0 !important;line-height:0;}:is(.detailedList,#list) .cell-product .image img:not(.manufacturer-icon):not(.mv-fly-clone){width:100% !important;height:190px !important;max-width:100% !important;max-height:none !important;margin:0 !important;display:block;object-fit:contain;object-position:center;border-radius:8px;}.mv-fly-clone{max-width:none !important;max-height:none !important;object-fit:contain;pointer-events:none;}:is(.detailedList,#list) .cell-product .sku{display:block !important;padding:0 !important;margin:0 0 2px !important;color:#8a8f98;text-decoration:none;}.cell-product .sku,.cell-product .sku em{display:block !important;max-width:100% !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.cell-product .image,.product-line .product_image{position:relative;}.promo-badge{position:absolute;top:8px;right:8px;z-index:8;background:#e30613;color:#fff;font-weight:bold;font-size:12px;line-height:1;padding:4px 7px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none;}.mv-flags{position:absolute;left:8px;z-index:6;display:flex;flex-direction:column;gap:3px;align-items:flex-start;pointer-events:none;}.product_image .mv-flags{top:48px;}.cell-product .image .mv-flags{top:48px;}.mv-flags-right{position:absolute;right:8px;left:auto;z-index:6;display:flex;flex-direction:column;gap:3px;align-items:flex-end;pointer-events:none;}.product_image .mv-flags-right{top:74px;}.cell-product .image .mv-flags-right{top:76px;}.mv-flag{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.2px;padding:2px 7px;border-radius:4px;color:#fff;line-height:1.5;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.2);}.mv-flag-new{background:#27ae60;}.mv-flag-drop{background:#e67e22;}
.mv-quickview-trigger{background:rgba(255,255,255,.5) !important;border:1px solid #fff !important;color:var(--site-header-end,#396b9e) !important;}.mv-quickview-trigger:hover{background:rgba(255,255,255,.3) !important;border:1px solid #fff !important;color:var(--site-header-end,#396b9e) !important;}.mv-quickview-trigger span{opacity:1 !important;color:var(--site-header-end,#396b9e) !important;}.mv-quickview-trigger svg{opacity:1 !important;fill:var(--site-header-end,#396b9e) !important;}
.mv-brands{margin:0 0 24px;}.mv-brands__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;}.mv-brands__title{margin:0;padding:0;border:0;font-size:24px;font-weight:bold;line-height:1.2;color:var(--site-content-text,#1a1a1a);}.mv-brands__count{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:20px;background:var(--site-header-end,#396b9e);color:#fff;font-size:14px;font-weight:bold;vertical-align:middle;}.mv-brands__searchwrap{position:relative;flex:0 1 320px;max-width:100%;}.mv-brands__searchicon{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--site-muted,#888);pointer-events:none;}.mv-brands__input{width:100%;box-sizing:border-box;height:40px;padding:0 14px 0 36px;border:1px solid var(--site-border,#cdcdcd);border-radius:20px;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;}.mv-brands__input:focus{border-color:var(--site-header-end,#396b9e);box-shadow:0 0 0 3px rgba(57,107,158,.15);}.mv-brands__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;}.mv-brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 10px;background:#fff;border:1px solid #eef0f2;border-radius:10px;text-decoration:none;color:var(--site-content-text,#333);transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;}.mv-brand-card:hover{border-color:#cfd4da;box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-4px);text-decoration:none;}.mv-brand-card__logo{display:flex;align-items:flex-end;justify-content:center;width:100%;height:40px;}.mv-brand-card__img{max-width:120px;max-height:42px;width:auto;height:auto;object-fit:contain;display:block;}.mv-brand-card__noimg{font-size:16px;font-weight:bold;color:var(--site-header-end,#396b9e);text-align:center;line-height:1.2;}.mv-brand-card__name{font-size:12px;font-weight:600;text-align:center;color:var(--site-header-end,#396b9e);line-height:1.3;}.mv-brands__empty{margin:24px 0;text-align:center;color:var(--site-muted,#888);font-size:14px;}#alphabet_links.mv-brands__az{display:flex !important;flex-wrap:nowrap;gap:5px;margin:0 0 20px;padding:12px 14px;background:var(--site-surface,#f6f7f9);border:1px solid var(--site-border,#e6e8eb);border-radius:12px;justify-content:space-between;overflow-x:auto;float:none !important;}#alphabet_links.mv-brands__az a,#alphabet_links.mv-brands__az span{display:inline-flex !important;float:none !important;align-items:center;justify-content:center;flex:1 1 0;min-width:0;height:44px;margin:0 !important;padding:0 6px !important;border-radius:9px;font-size:21px;font-weight:bold;line-height:1;text-decoration:none;transition:background .12s,color .12s,border-color .12s;}#alphabet_links.mv-brands__az a{color:var(--site-header-end,#396b9e);background:#fff;border:1px solid var(--site-border,#e0e0e0);cursor:pointer;}#alphabet_links.mv-brands__az a:hover{background:var(--site-header-end,#396b9e);color:#fff;border-color:var(--site-header-end,#396b9e);}#alphabet_links.mv-brands__az a.is-active{background:var(--site-header-end,#396b9e);color:#fff;border-color:var(--site-header-end,#396b9e);box-shadow:0 2px 6px rgba(57,107,158,.3);}#alphabet_links.mv-brands__az a.mv-brands__az-all{flex:0 0 auto;padding:0 16px !important;text-transform:uppercase;letter-spacing:.5px;}#alphabet_links.mv-brands__az span{color:var(--site-border,#c7c7c7);}#alphabet_links.mv-brands__az .clear{display:none !important;}.mv-brands__section{margin:0 0 22px;scroll-margin-top:90px;}.mv-brands__letterbar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;padding:0 0 6px;border-bottom:2px solid var(--site-header-end,#396b9e);}.mv-brands__letter{font-size:22px;font-weight:bold;color:var(--site-header-end,#396b9e);scroll-margin-top:90px;}.mv-brands__top{font-size:12px;color:var(--site-muted,#888);text-decoration:none;}.mv-brands__top:hover{color:var(--site-header-end,#396b9e);}@media (max-width:576px){.mv-brands__grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}.mv-brands__head{justify-content:center;}.mv-brands__searchwrap{flex-basis:100%;}}
:is(.detailedList,#list) .cell-product,.mv-promo-card,.mv-shorty-card,.product-line,.sf-cb-ptabs__card{transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;}:is(.detailedList,#list) .cell-product:hover,.mv-promo-card:hover,.mv-shorty-card:hover,.product-line:hover,.sf-cb-ptabs__card:hover{transform:translateY(-4px);}
.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;}}
.mv-brands__sticky{position:sticky;top:0;z-index:50;background:#fff;padding:8px 0 4px;}.mv-brands__sticky.is-stuck{box-shadow:0 6px 14px rgba(0,0,0,.07);}.mv-brands__sticky .mv-brands__head{margin-bottom:10px;}.mv-brands__sticky #alphabet_links.mv-brands__az{margin-bottom:0;}
.products_header{width:100% !important;background:none !important;background-image:none !important;border:0 !important;border-bottom:2px solid var(--site-header-end,#396b9e) !important;height:auto !important;padding:0 0 6px !important;margin:20px 0 12px !important;text-align:left !important;}.products_header a{font-size:18px !important;font-weight:bold !important;line-height:1.3 !important;color:var(--site-header-end,#396b9e) !important;text-decoration:none !important;}
.mv-mfg-desc{margin:6px 0 16px;font-size:14px;line-height:1.6;color:var(--site-content-text,#333);}.mv-mfg-desc img{max-width:100%;height:auto;}
.mv-mfgcats{margin:14px 0 18px;}.mv-mfgcats__row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;}.mv-mfgcats__item{position:relative;}.mv-mfgcats__pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px 5px 5px;background:#fff;border:1px solid var(--site-border,#e6e8eb);border-radius:30px;text-decoration:none;color:var(--site-content-text,#333);font-size:14px;font-weight:600;transition:box-shadow .15s,border-color .15s;}.mv-mfgcats__item:hover .mv-mfgcats__pill{border-color:var(--site-header-end,#396b9e);box-shadow:0 4px 12px rgba(0,0,0,.10);text-decoration:none;color:var(--site-header-end,#396b9e);}.mv-mfgcats__circle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--site-surface,#eef2f7);color:var(--site-header-end,#396b9e);flex:0 0 auto;}.mv-mfgcats__circle svg{width:22px;height:22px;}.mv-mfgcats__initial{font-size:17px;font-weight:bold;line-height:1;}.mv-mfgcats__label{white-space:nowrap;}.mv-mfgcats__caret{font-size:11px;color:var(--site-muted,#888);}.mv-mfgcats__menu{position:absolute;top:100%;left:0;z-index:60;min-width:210px;margin:0;padding:6px;background:#fff;border:1px solid var(--site-border,#e6e8eb);border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.14);display:none;}.mv-mfgcats__item--has::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px;}.mv-mfgcats__item--has:hover .mv-mfgcats__menu,.mv-mfgcats__menu:hover{display:block;}.mv-mfgcats__sub{display:block;padding:7px 12px;border-radius:6px;font-size:13px;color:var(--site-content-text,#333);text-decoration:none;white-space:nowrap;}.mv-mfgcats__sub:hover{background:var(--site-header-end,#1961a4);text-decoration:none;}.mv-mfgcats__sub:hover,.mv-mfgcats__sub:hover *{color:#fff !important;}
.homepage #homepagecolumn1:not(:has(*)){display:none !important;}.homepage:has(#homepagecolumn1:not(:has(*))) #homepagecolumn2{width:100% !important;margin-left:5px !important;}#main-content #categoryleft:not(:has(*)){display:none !important;}#main-content:has(#categoryleft:not(:has(*))) #categorymain{width:100% !important;}#main-content:not(:has(#categoryleft)) #categorymain{width:100% !important;}
.mv-header-main .mv-hdr-search{margin-top:14px;}
body.mv-filters-collapsed #list .cell-product .image{height:auto !important;min-height:0 !important;max-height:240px !important;overflow:hidden !important;}body.mv-filters-collapsed #list .cell-product .image img[data-hover]{width:auto !important;height:auto !important;max-width:100% !important;max-height:230px !important;object-fit:contain !important;}
.cell-product .promo-badge{top:48px;}
.stock-facet{color:var(--site-content-text,#333) !important;}.stock-limited{color:#ff6a00 !important;font-weight:bold !important;}
#categorybanner{text-align:center;}#categorybanner img{display:block;width:100%;height:auto;max-width:100%;border-radius:6px;}
:is(.detailedList,#list) .cell-product .description{display:block !important;height:auto !important;padding:0 !important;margin:0 0 6px !important;overflow:visible !important;}:is(.detailedList,#list) .cell-product .description .product-name-link{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:2.6em;font-weight:600;color:var(--site-content-text,#1a1a1a);text-decoration:none;}:is(.detailedList,#list) .cell-product .ProductReviewRating{padding:0 !important;margin:0 0 4px !important;}:is(.detailedList,#list) .cell-product .ProductStatus{position:absolute !important;top:8px;left:10px;right:10px;z-index:5;padding:0 !important;margin:0 !important;text-align:left !important;max-width:calc(100% - 20px);overflow:hidden;}:is(.detailedList,#list) .cell-product .image .mv-flags{top:77px;}:is(.detailedList,#list) .cell-product .ProductStatus .siteprice,:is(.detailedList,#list) .cell-product .ProductStatus span{font-size:11px !important;padding:3px 9px !important;border-radius:4px !important;display:inline-block;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;vertical-align:top;}:is(.detailedList,#list) .cell-product .ProductStatus:hover{overflow:visible !important;z-index:20 !important;}:is(.detailedList,#list) .cell-product .ProductStatus:hover .siteprice,:is(.detailedList,#list) .cell-product .ProductStatus:hover span{overflow:visible !important;white-space:normal !important;max-width:none !important;box-shadow:0 2px 8px rgba(0,0,0,.15);}:is(.detailedList,#list) .cell-product .block-addtocart{margin-top:auto !important;padding:8px 0 0 !important;}:is(.detailedList,#list) .cell-product .block-addtocart .mv-btn,:is(.detailedList,#list) .cell-product .block-addtocart a{display:flex !important;width:100% !important;align-items:center;justify-content:center;box-sizing:border-box;border:1.5px solid var(--site-button-bg,#2563eb) !important;color:var(--site-button-bg,#2563eb) !important;background:#fff !important;border-radius:22px !important;padding:9px 0 !important;font-weight:600 !important;text-decoration:none;}:is(.detailedList,#list) .cell-product .block-addtocart .mv-btn:hover,:is(.detailedList,#list) .cell-product .block-addtocart a:hover{background:var(--site-button-bg,#2563eb) !important;color:#fff !important;}:is(.detailedList,#list) .cell-product .block-addtocart .mv-btn svg{fill:currentColor;}
.product-line .product_image{position:relative;}.product-line .productgreffet,.product-line img.productgreffet,.cell-product .productgreffet{position:absolute !important;top:6px;left:6px;z-index:6;width:auto !important;max-width:62px !important;height:auto !important;}#main-content iframe,#main-content embed,#main-content object,#main-content video{max-width:100% !important;box-sizing:border-box;}
#mv-menu-toggle,#mv-menu-backdrop,#mv-menu-close{display:none;}
@media (max-width:1200px){#mv-menu-toggle{display:inline-flex !important;align-items:center;gap:8px;background:var(--site-button-bg,#2c3e50);color:#fff;border:0;font-size:15px;font-weight:bold;padding:11px 16px;cursor:pointer;width:100%;box-sizing:border-box;}#mv-menu-toggle svg{stroke:currentColor;}#header-menu{position:fixed !important;top:0 !important;left:0 !important;height:100% !important;width:84% !important;max-width:340px !important;transform:translateX(-100%);transition:transform .25s ease;z-index:100000 !important;overflow-y:auto !important;background:#fff !important;box-shadow:2px 0 16px rgba(0,0,0,.4);margin:0 !important;padding:0 !important;}body.mv-menu-open #header-menu{transform:translateX(0);}body.mv-menu-open #mv-menu-backdrop{display:block !important;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:99999;}#mv-menu-close{display:block !important;margin-left:auto;width:46px;height:46px;font-size:30px;line-height:1;background:#222;color:#fff;border:0;cursor:pointer;}#header-menu .mv-megamenu{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;background:none !important;box-shadow:none !important;border:0 !important;}#header-menu .mv-megamenu>.mv-mm-item{display:block !important;width:100% !important;max-width:100% !important;float:none !important;position:static !important;border-bottom:1px solid #eee !important;}#header-menu .mv-mm-item>.mv-mm-top{display:block !important;width:100% !important;white-space:normal !important;padding:13px 16px !important;color:#222 !important;font-size:15px !important;}#header-menu .mv-mm-item:hover>.mv-mm-top{background:#f3f4f6 !important;color:#222 !important;}#header-menu .mv-mm-panel,#header-menu .flyout_position,#header-menu .dropdown_1column,#header-menu .sub_menu_flyout,#header-menu .dropdown_flyout{display:none !important;}.mv-header-inner,.mv-header-top-inner{max-width:100% !important;}.mv-hdr-zone,.mv-hdr-left,.mv-hdr-center,.mv-hdr-right,.mv-htop-left,.mv-htop-center,.mv-htop-right{min-width:0 !important;}.mv-hdr-el,.mv-hdr-search,.mv-hdr-logo,.mv-hdr-cart,.mv-hdr-lang{min-width:0 !important;max-width:100% !important;}.mv-hdr-search .mv-searchbar,.mv-hdr-search form,.mv-hdr-search .sf-ui-searchform,.mv-hdr-search input,.mv-hdr-search #search-box,.mv-searchbar__input{min-width:0 !important;}}
@media (max-width:992px){html,body{overflow-x:hidden;}#site-content,#site-main,#main,#main-content,#container,#header,#header-menu{box-sizing:border-box;}#site-content,#site-main,#main,#main-content{max-width:100% !important;width:100% !important;}#header,#header #main,#header-content{max-width:100% !important;width:100% !important;box-sizing:border-box;}#header #main{padding:6px 8px !important;overflow:hidden;}#logo{float:none !important;width:100% !important;text-align:center !important;margin:0 !important;}#logo img{max-width:86% !important;height:auto !important;}#header-content{float:none !important;}#top-menu{float:none !important;display:flex !important;flex-wrap:wrap !important;justify-content:center;gap:4px 12px;width:auto !important;padding:0 !important;margin:0 !important;}#top-menu li{float:none !important;margin:0 !important;}#top-menu li a,.mv-header-top a.contactlink,.mv-header-top a.brandlink,.mv-header-top a.myaccountlink,.mv-header-top a.searchlink,.mv-header-top a.cortlink{display:inline-flex !important;align-items:center;min-height:32px;padding:3px 6px !important;}#search-header,#search-box,.mv-searchbar,.sf-ui-searchform,.sf-ui-searchform__catwrap,.cm-quick-search,#header-content form{max-width:100% !important;width:100% !important;box-sizing:border-box !important;float:none !important;}.mv-header-inner,.mv-header-top-inner{flex-wrap:wrap !important;max-width:100% !important;width:100% !important;box-sizing:border-box !important;}.mv-header-top,.mv-header-main{width:100% !important;max-width:100% !important;box-sizing:border-box;}.mv-hdr-zone,.mv-htop-left,.mv-htop-center,.mv-htop-right,.mv-hdr-left,.mv-hdr-center,.mv-hdr-right{min-width:0 !important;flex-wrap:wrap !important;max-width:100% !important;}.mv-hdr-el,.mv-hdr-search,.mv-hdr-logo,.mv-hdr-cart,.mv-hdr-lang{min-width:0 !important;max-width:100% !important;}.mv-hdr-center,.mv-hdr-search{flex:1 1 100% !important;}.mv-hdr-search .mv-searchbar,.mv-hdr-search form,.mv-hdr-search .sf-ui-searchform,.mv-searchbar__input,.mv-hdr-search input,.mv-hdr-search #search-box{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;}.mv-hdr-logo img{max-width:100% !important;height:auto !important;}.mv-header-top-inner,.mv-header-inner{font-size:12px;}#categoryleft,#navcolumn,#left-nav-column,#homepagecolumn1{display:none !important;}#main-content .sidemenu{display:none !important;}#main-content #product .sidemenu,#main-content #hp_blocks .sidemenu,#main-content #suggested-items-pane .sidemenu,#main-content #CrossSellsPanel .sidemenu{display:block !important;}#categorymain,#maincolumn,#main-with-left-nav,#homepagecolumn2,.store-category-page #maincolumn,.myaccountpage #maincolumn{float:none !important;width:100% !important;margin-left:0 !important;}.myaccountpage #navcolumn{display:block !important;width:100% !important;float:none !important;margin:0 0 14px 0 !important;}.myaccountpage #navcolumn .sidemenu{display:block !important;}#productContent{display:block !important;}#productContent #imgProduct{float:none !important;width:100% !important;min-width:0 !important;max-width:100% !important;margin:0 0 14px 0 !important;}#productContent #rightContent{float:none !important;width:100% !important;margin:0 !important;}#list:has(.cell-product){grid-template-columns:repeat(2,1fr) !important;}#site-wrapper,#site-content,#site-main,#container,#main,#main-content,#product,#productContent,#homepagecolumn2,#detailedList,#list,#recherche_2{width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important;float:none !important;}#main-content{padding-left:6px !important;padding-right:6px !important;}#category-options,#options,#searchfilter,.category-criteria,#criteria{float:none !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}.containerrotator,.l-rotator,.list-rotator,.list_rotator,.revolution-slider,.rev_slider_wrapper,.camera_wrap,.nivoSlider,.slider3d,.flexslider{display:none !important;}#list:has(.product-line){display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:10px !important;align-items:stretch !important;}#list:has(.product-line) > .product-line{min-width:0 !important;}#main-content .product-line{display:flex !important;flex-direction:column !important;width:auto !important;max-width:100% !important;min-width:0 !important;float:none !important;margin:0 0 12px !important;border:1px solid #e6e8eb !important;border-radius:8px !important;padding:8px !important;box-sizing:border-box !important;background:#fff !important;}#main-content .product-line>*{float:none !important;width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;position:static !important;box-sizing:border-box !important;}#main-content .product-line .product_image{float:none !important;width:100% !important;min-height:0 !important;text-align:center !important;position:relative !important;}#main-content .product-line .product_image .link{min-height:0 !important;display:block !important;}#main-content .product-line .product_image img:not(.manufacturer-icon):not(.productgreffet){width:auto !important;max-width:100% !important;height:auto !important;max-height:150px !important;object-fit:contain !important;margin:0 auto !important;display:block !important;}#main-content .product-line .right-list{margin-left:0 !important;position:static !important;width:100% !important;}#main-content .product-line .right-list .controls{position:static !important;float:none !important;text-align:left !important;top:auto !important;right:auto !important;}#productContent>*{float:none !important;}#productContent #imgProduct{float:none !important;width:100% !important;min-width:0 !important;max-width:100% !important;margin:0 auto 14px !important;text-align:center !important;}#productContent #imgProduct .productimage,#productContent #divMainImg{width:100% !important;max-width:100% !important;text-align:center !important;}#productContent #imgProduct img:not(.mv-fly-clone),#productContent #imgMain:not(.mv-fly-clone){width:auto !important;max-width:100% !important;max-height:320px !important;height:auto !important;margin:0 auto !important;display:inline-block !important;}#productContent #rightContent{float:none !important;width:100% !important;max-width:100% !important;margin:0 !important;clear:both !important;}body .mv-product-title,body .mv-product-title #productname,body .mv-product-title span,body .mv-product-title a{font-size:17px !important;word-wrap:break-word;overflow-wrap:break-word;}html,body{background-image:none !important;}body{background-color:#ffffff !important;}table.site_border_top,table.site_border_bottom,table#site-content,.site_border_top,.site_border_bottom,#site-content{width:100% !important;max-width:100% !important;min-width:0 !important;table-layout:fixed !important;}.site_top_left,.site_top_right,.site_border_left,.site_border_right,.site_bottom_left,.site_bottom_right,.site_top,.site_bottom{display:none !important;}.site_border_top,.site_border_top>tbody,.site_border_top>tbody>tr,.site_border_top>tbody>tr>td,table#site-content,table#site-content>tbody,table#site-content>tbody>tr,table#site-content>tbody>tr>td{display:block !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}.mv-searchbar,.sf-ui-searchform__row{display:flex !important;flex-wrap:nowrap !important;width:100% !important;box-sizing:border-box;}.mv-searchbar>*,.sf-ui-searchform__row>*{min-width:0 !important;}.sf-ui-searchform__catwrap,.mv-searchbar select,.cm-quick-search{max-width:44% !important;min-width:0 !important;flex:0 1 auto !important;}.mv-searchbar__input,#search-box,.input-search{flex:1 1 0 !important;min-width:0 !important;width:auto !important;}}
.product-filter{display:flex !important;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:8px 12px !important;background:#f5f6f8;border:1px solid #e6e8eb;border-radius:8px;margin:0 0 12px;box-sizing:border-box;position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.06);}.product-filter-bottom{clear:both;}.product-filter-bottom .product-filter{position:static !important;top:auto !important;margin:16px 0 0 !important;}.product-filter .clear{display:none !important;}.product-filter .mv-filters-toggle{order:-1;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;padding:6px 12px;background:#fff;color:#333;border:1px solid #d5d9de;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s;}.product-filter .mv-filters-toggle svg{flex:0 0 auto;stroke:currentColor;}.product-filter .mv-filters-toggle:hover{border-color:var(--site-button-bg,#2563eb);color:var(--site-button-bg,#2563eb);}.product-filter .mv-filters-toggle .mv-ft-show{display:none;}body.mv-filters-collapsed .product-filter .mv-filters-toggle .mv-ft-hide{display:none;}body.mv-filters-collapsed .product-filter .mv-filters-toggle .mv-ft-show{display:inline;}body.mv-filters-collapsed .product-filter .mv-filters-toggle{background:var(--site-button-bg,#2563eb);color:#fff;border-color:var(--site-button-bg,#2563eb);}@media (min-width:993px){#categoryleft,#navcolumn{transition:width .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1);}#categorymain,#main-with-left-nav{transition:width .4s cubic-bezier(.4,0,.2,1);}body.mv-filters-collapsed #categoryleft,body.mv-filters-collapsed #navcolumn{width:0 !important;min-width:0 !important;opacity:0;padding-left:0 !important;padding-right:0 !important;margin:0 !important;border:0 !important;overflow:hidden !important;}body.mv-filters-collapsed #categorymain,body.mv-filters-collapsed #main-with-left-nav{width:100% !important;}}@media (max-width:992px){.product-filter .mv-filters-toggle{display:none !important;}}.product-filter .display{order:0;display:inline-flex !important;align-items:center;gap:2px;float:none !important;background:#fff;border:1px solid #e0e3e8;border-radius:8px;padding:2px;}.product-filter .display .display-mode{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:28px;color:#8a8f98;border-radius:6px;transition:color .15s,background .15s;}.product-filter .display .display-mode svg{width:18px;height:18px;display:block;}.product-filter .display .display-mode:not(.activemode):hover{background:#eef0f3;color:#333;}.product-filter .display .display-mode.activemode{background:var(--site-button-bg,#2563eb);color:#fff;}.product-filter .total-items{order:1;font-weight:600;color:#333;float:none !important;margin:0 !important;}.product-filter .sf-ui-pfilter__sort{order:2;display:inline-flex !important;align-items:center;gap:8px;float:none !important;white-space:nowrap !important;}.product-filter .categorysortorder,.product-filter .CatorderText{display:inline-flex !important;align-items:center;gap:6px;float:none !important;margin:0 !important;white-space:nowrap !important;}.product-filter .sort-order,.product-filter .page-size{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:auto !important;min-width:68px;box-sizing:border-box;border:1px solid #d5d9de !important;border-radius:6px !important;padding:6px 28px 6px 10px !important;background:#fff url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23888%22 d=%22M7 10l5 5 5-5z%22/%3E%3C/svg%3E') no-repeat right 9px center !important;background-size:12px !important;font-size:13px !important;color:#333 !important;cursor:pointer;line-height:1.4;transition:border-color .15s,box-shadow .15s;}.product-filter .sf-ui-pfilter__pgsize{width:auto !important;}.product-filter .sort-order:hover,.product-filter .page-size:hover{border-color:var(--site-button-bg,#2563eb) !important;}.product-filter .sort-order:focus,.product-filter .page-size:focus{outline:none;border-color:var(--site-button-bg,#2563eb) !important;box-shadow:0 0 0 3px rgba(0,0,0,.08) !important;}.product-filter .sf-ui-pfilter__pager{order:3;margin-left:auto;display:inline-flex !important;align-items:center;float:none !important;}.product-filter .sf-ui-pfilter__pager table,.product-filter .sf-ui-pfilter__pager tbody,.product-filter .sf-ui-pfilter__pager tr,.product-filter .sf-ui-pfilter__pager td{vertical-align:middle !important;border:0 !important;background:none !important;}.product-filter .sf-ui-pfilter__pager ul{display:inline-flex !important;align-items:center;list-style:none !important;margin:0 !important;padding:0 !important;}.product-filter .sf-ui-pfilter__pager li{display:inline-flex !important;margin:0 !important;padding:0 !important;background:none !important;}.product-filter .sf-ui-pfilter__pager a,.product-filter .sf-ui-pfilter__pager span{display:inline-flex !important;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border:1px solid #d5d9de;border-radius:6px;margin:0 2px;text-decoration:none;box-sizing:border-box;line-height:1;color:#333;background:#fff;}.product-filter .sf-ui-pfilter__pager li.current>a{background:var(--site-button-bg,#2563eb) !important;color:#fff !important;border-color:var(--site-button-bg,#2563eb) !important;}.product-filter .sf-ui-pfilter__pager a:not(:has(img)):hover{background:var(--site-button-bg,#2563eb) !important;color:#fff !important;border-color:var(--site-button-bg,#2563eb) !important;}.product-filter .sf-ui-pfilter__pager a:has(img):hover{background:#e6e9ee !important;border-color:#cfd4da !important;}.product-filter .sf-ui-pfilter__pager a img{display:block;width:14px;height:14px;object-fit:contain;}.product-filter .sf-ui-pfilter__pager .inactive{opacity:.4;border:1px solid #e3e6ea;border-radius:6px;min-width:28px;height:28px;display:inline-flex !important;align-items:center;justify-content:center;margin:0 2px;}
.cell-product .block-addtocart{padding:0 5px !important;}.product-line .right-list .controls{right:5px !important;}.cell-product .block-addtocart .mv-btn,.product-line .right-list .controls .mv-btn{padding:8px 16px !important;font-size:14px !important;gap:8px !important;}.cell-product .block-addtocart .mv-btn svg,.product-line .right-list .controls .mv-btn svg{width:18px !important;height:18px !important;}.detailedList .product_image .compare_link_enabled{width:80% !important;box-sizing:border-box;}
#BtnComparator{display:none !important;}#BtnComparator.mv-cmp-on{display:inline-flex !important;}
#site-wrapper,#site-content,#site-main,#container{max-width:none !important;width:100% !important;min-width:0 !important;}#site-wrapper,#site-content,#site-main,#container{background:transparent !important;}.site_border_top,.site_border_bottom{display:none !important;}.site_border_left,.site_border_right{display:none !important;width:0 !important;}#main-content{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box;background:#ffffff !important;}#footer{width:100% !important;max-width:100% !important;}#footer .menu,#footer .bottom_footer,.mv-footer-inner{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box;}
#header-menu{width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;background:linear-gradient(to bottom,var(--site-menu-bar-start,#497bae),var(--site-menu-bar-end,#396b9e)) !important;}#header-menu .mv-megamenu{max-width:100% !important;margin-left:0 !important;margin-right:0 !important;}
@media (max-width:1200px){#site-wrapper,#site-content,.site_border_top,.site_border_bottom{max-width:100% !important;}#header-menu .mv-megamenu{max-width:100% !important;}}@media (max-width:820px){#footer .menu{flex-direction:column !important;}#footer .footer_col{width:auto !important;min-width:0 !important;}#header #header-content{text-align:left !important;}}
#footer{background:#181c22 !important;color:#edebe8 !important;width:100% !important;max-width:100% !important;}.mv-footer{color:#edebe8;font-family:Tahoma, Verdana, sans-serif !important;}.mv-footer-inner{display:flex !important;flex-wrap:wrap;gap:18px;width:100% !important;max-width:100% !important;margin:0 auto !important;padding:28px 22px;box-sizing:border-box;}.mv-footer-col{flex:1 1 0;min-width:130px;}.mv-footer-title{font-weight:bold;font-size:15px;margin-bottom:10px;color:#4693c3 !important;}#footer .mv-footer-inner,#footer .mv-footer-inner *,#footer .mv-footer-bottom,#footer .mv-footer-bottom *{color:#edebe8 !important;font-family:Tahoma, Verdana, sans-serif !important;}#footer .mv-footer-inner h1,#footer .mv-footer-inner h2,#footer .mv-footer-inner h3,#footer .mv-footer-inner h4,#footer .mv-footer-inner h5,#footer .mv-footer-inner h6,#footer .mv-footer-inner .title,#footer .mv-footer-inner .titre,#footer .mv-footer-inner .block-title,#footer .mv-footer-inner .heading,#footer .mv-footer-inner legend{color:#4693c3 !important;}#footer .mv-footer-inner a,#footer .mv-footer-inner a *,#footer .mv-footer-bottom a,#footer .mv-footer-bottom a *{color:#ebebea !important;text-decoration:none;}#footer .mv-footer a:hover{text-decoration:none;}.mv-footer-links{list-style:none;margin:0;padding:0;}.mv-footer-links li{margin:5px 0;}.mv-footer-bottom{width:100% !important;border-top:1px solid rgba(127,127,127,.25);}.mv-footer-bottom-inner{width:100% !important;max-width:100% !important;margin:0 auto !important;padding:14px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;box-sizing:border-box;}.mv-footer-bottom .socials,.mv-footer-bottom .security,.mv-footer-bottom p{margin:0;}.mv-footer-strip{width:100% !important;background:#444444 !important;}.mv-footer-strip,.mv-footer-strip *{color:#ffffff !important;font-size:18px !important;}.mv-footer-strip-inner{width:100% !important;max-width:100% !important;margin:0 auto !important;padding:8px 22px;text-align:center;box-sizing:border-box;}.mv-footer-col,.mv-footer-bottom-inner,.mv-fel,#footer .employee{position:relative;}#footer .editBlock,.mv-fel-edit{top:4px !important;right:4px !important;left:auto !important;}.mv-footer .newsletter-footer{display:flex !important;align-items:center;gap:6px;flex-wrap:nowrap;}.mv-footer .newsletter-footer #email{flex:1 1 auto !important;min-width:0 !important;width:auto !important;box-sizing:border-box;}.mv-footer .newsletter-footer br,.mv-footer .newsletter-footer .clear{display:none !important;}.mv-footer .footer_col,.mv-footer table{width:100% !important;max-width:100% !important;}.mv-footer-pre{width:100% !important;}.mv-footer-pre-inner{width:100% !important;max-width:100% !important;margin:0 !important;padding:0;box-sizing:border-box;}@media (max-width:820px){.mv-footer-inner{flex-direction:column;gap:18px;}.mv-footer-bottom-inner{flex-direction:column;align-items:flex-start;}}
.mv-header{width:100%;}.mv-hdr-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}.mv-hdr-left,.mv-htop-left{justify-content:flex-start;}.mv-hdr-center,.mv-htop-center{flex:1 1 auto;justify-content:center;}.mv-hdr-right,.mv-htop-right{justify-content:flex-end;}.mv-hdr-menu{list-style:none;display:flex;align-items:center;gap:16px;margin:0;padding:0;}.mv-hdr-logo img{max-height:64px;width:auto;display:block;}.mv-hdr-cart{display:inline-flex;align-items:center;gap:7px;}.mv-header-top{width:100%;background:#333333;color:#ffffff;font-size:12px;}.mv-header-top,.mv-header-top *{color:#ffffff !important;}.mv-header-top a:hover{text-decoration:none;}.mv-header-top .mv-hdr-zone>*+*::before{content:'|';margin-right:10px;opacity:.45;}.mv-header-top .mv-hdr-zone>*:empty{display:none !important;}.mv-header-top-inner{display:flex;align-items:center;gap:16px;width:100%;max-width:100%;margin:0 auto;padding:5px 22px;box-sizing:border-box;}.mv-header-main{width:100%;background:#ffffff;color:#333333;border-bottom:1px solid #e0e0e0;}.mv-header-main a{color:#333333;text-decoration:none;}.mv-header-main a:hover{text-decoration:none;}.mv-header-inner{display:flex;align-items:center;gap:20px;width:100%;max-width:100%;margin:0 auto;padding:10px 22px;box-sizing:border-box;}@media (max-width:820px){.mv-header-inner,.mv-header-top-inner{flex-direction:column;align-items:stretch;gap:12px;}.mv-hdr-zone{justify-content:center;}}
#categoryleft,#navcolumn{width:240px !important;}#categorymain,#main-with-left-nav{width:calc(100% - 260px) !important;}
#main-content,#product,#productContent,#homepagecolumn2{max-width:none !important;}#homepagecolumn2{width:calc(100% - 240px - 20px) !important;}#homepagecolumn1{width:240px !important;}#productContent{max-width:90% !important;box-sizing:border-box !important;margin-left:auto !important;margin-right:auto !important;}#product #hp_blocks{display:block !important;width:auto !important;max-width:var(--product-box-width) !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box;}#product #hp_blocks>.hp_blk,#product .hp_blk{float:none !important;display:block !important;width:auto !important;max-width:100% !important;margin:0 !important;box-sizing:border-box;}#product .hp_blk_hdr,#product .hp_blk_body{display:block !important;width:auto !important;max-width:100% !important;box-sizing:border-box;}#product .hp_blk .sidemenu,#product .hp_blk .sidemenu_body{width:auto !important;max-width:100% !important;box-sizing:border-box;}#product .sf-cb-lastprod,#product .sf-cb-complementary{max-width:var(--product-box-width) !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box;}
#navcolumn>*,#categoryleft>*,#categoryright>*,#pre>*,#post>*{width:100% !important;max-width:100% !important;box-sizing:border-box !important;margin-left:0 !important;margin-right:0 !important;}#navcolumn img,#categoryleft img,#categoryright img,#pre img,#post img{max-width:100%;height:auto;}
.cell-product,.product-line{position:relative;}.cell-product .editBlock,:is(.detailedList,#list) .cell-product .editBlock{position:absolute !important;top:8px !important;right:8px !important;left:auto !important;z-index:10 !important;}.product-line .editBlock{position:absolute !important;top:8px !important;left:8px !important;right:auto !important;z-index:10 !important;}
#homepagecolumn1 .sidemenu,#homepagecolumn2 .sidemenu,#homepagecolumn3 .sidemenu,#homepagecolumn1>div,#homepagecolumn2>div,#homepagecolumn3>div{position:relative;}#homepagecolumn1 .editBlock,#homepagecolumn2 .editBlock,#homepagecolumn3 .editBlock{position:absolute !important;top:6px !important;right:6px !important;left:auto !important;margin:0 !important;z-index:30 !important;}
a:hover:not([class*='btn']){color:var(--site-link-hover,#43a7f4) !important;text-decoration:none !important;font-weight:inherit !important;}#header-menu a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)),.mv-megamenu a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)),#top-menu a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)),.mv-header-top .mv-hdr-zone>a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)),#footer .mv-footer-inner a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)),#footer .mv-footer-bottom a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)),.mv-footer-links a:hover:not([class*='btn']):not(:has(img)):not(:has(svg)){position:relative;left:4px;}
.mv-hdr-cart .mv-cart-link{display:inline-flex;align-items:center;text-decoration:none;color:inherit;}.mv-hdr-cart .mv-cart-iconwrap{position:relative;display:inline-flex;align-items:center;}.mv-hdr-cart .mv-cart-qty{position:absolute;top:-7px;right:-4px;background:#e53935;color:#fff;border-radius:999px;font-weight:bold;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;pointer-events:none;}.mv-header-main .mv-hdr-cart .mv-cart-qty{min-width:18px;height:18px;padding:0 5px;font-size:11px;border-width:2px;}.mv-header-top .mv-hdr-cart .mv-cart-qty{min-width:15px;height:15px;padding:0 3px;font-size:10px;border-width:1px;}
.mv-hdr-cart .mv-cart-svg{width:auto !important;height:auto !important;padding:0 !important;background:none !important;line-height:0;}
.mv-hdr-account{position:relative !important;display:inline-flex !important;align-items:center;vertical-align:middle;}.mv-account-caret{display:inline-block;margin-left:5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;}.mv-account-menu{display:none !important;position:absolute !important;top:100% !important;left:auto !important;right:0 !important;min-width:210px;width:auto !important;height:auto !important;background:#fff !important;border:1px solid #e6e8eb;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.20);list-style:none !important;margin:0 !important;padding:6px 0 !important;z-index:2000;text-align:left;float:none !important;}.mv-hdr-account:hover .mv-account-menu,.mv-hdr-account:focus-within .mv-account-menu{display:block !important;}.mv-hdr-account::after{content:'';position:absolute;top:100%;right:0;width:210px;height:6px;}.mv-account-menu li{display:block !important;float:none !important;margin:0 !important;padding:0 !important;}.mv-account-menu li a{display:block;padding:8px 16px;color:#333 !important;text-decoration:none;white-space:nowrap;font-weight:normal;}.mv-account-menu li a::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--site-link-hover,#5f88bf);margin-right:9px;vertical-align:middle;}.mv-account-menu li a:hover{background:rgba(0,0,0,.05);color:var(--site-link-hover,#2c3e50) !important;left:auto !important;position:static !important;}
#cart-container #cartactions td{padding:0 10px 0 0;vertical-align:middle;}#cart-container #cartactions .mv-btn,#cart-container #cartactioncontinue .mv-btn{margin:0 6px 8px 0;}#cart-container #cartactioncontinue{margin-top:6px;}#cart-container #cartcoupons{padding:8px;}#cart-container #cartcoupons .mv-btn{margin-left:6px;vertical-align:middle;}
#main-content .cartproductgrid .productimagecolumn{width:160px !important;min-width:160px !important;}#main-content .cartproductgrid .cartitemimage img{max-width:150px !important;width:auto !important;height:auto !important;border-radius:4px;}
#cartactions{display:flow-root;margin-bottom:18px;}#cartactions td{padding:0 12px 0 0;vertical-align:middle;}#cartactions .mv-btn{margin:0 10px 10px 0;}#cartactioncontinue{margin-top:8px;}#cartcoupons{clear:both !important;margin-top:18px !important;padding:14px !important;border-radius:8px !important;}
#mycarousel,#mycarousel.jcarousel-list,#mycarousel.jcarousel-list-vertical{display:block !important;}#mycarousel.jcarousel-list-vertical>li,.jcarousel-skin-tango .jcarousel-item-vertical{display:block !important;float:none !important;clear:both !important;width:100% !important;box-sizing:border-box;text-align:center;}
#productContent #titleDesc,#productContent .sf-ui-pinfo__titledesc{margin-top:0 !important;}#productContent .sf-ui-pinfo__addtocart{display:flex !important;align-items:center;flex-wrap:wrap;gap:10px;}#productContent .sf-ui-pinfo__addtocart .choice{display:inline-flex;align-items:center;margin:0;}#productContent .sf-ui-pinfo__qty,#productContent #qty{height:44px !important;width:52px !important;text-align:center !important;border:2px solid var(--site-border,#9aa0a6) !important;border-radius:8px !important;font-size:16px !important;box-sizing:border-box !important;padding:0 2px !important;}#productContent .sf-ui-pinfo__addtocart .choice,#productContent .sf-ui-pinfo__addtocart ._buttons,#productContent .sf-ui-pinfo__addtocart .sf-ui-pinfo__wishlist,#productContent #wishlist{order:0;margin:0 !important;display:inline-flex;align-items:center;}#productContent .sf-ui-pinfo__addtocart ._buttons .mv-btn{height:44px !important;box-sizing:border-box !important;margin:0 !important;}#productContent .sf-ui-pinfo__wishlist-link{height:44px !important;width:44px !important;box-sizing:border-box !important;padding:0 !important;margin:0 !important;}#productContent .sf-ui-pinfo__devis{margin-top:6px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;}.sf-ui-pinfo__devis-link,.sf-ui-pinfo__whatsapp-link{display:inline-flex !important;}
#product #hp_blocks{display:block !important;overflow:visible !important;}#product #hp_blocks .sidemenu{box-sizing:border-box;}
.checkout .disabled-td{display:none !important;}.checkoutloading{display:none !important;}.checkoutloading.is-loading{display:flex !important;}.cartproductgrid .productremovecolumn{text-align:center;width:40px;}.cartproductgrid .productremovecolumn form{margin:0;display:inline-block;}.mv-cart-qv.mv-quickview-trigger{position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;display:inline-block !important;background:none !important;border:0 !important;padding:0 !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;z-index:auto !important;border-radius:0 !important;cursor:zoom-in;}.mv-cart-qv img{transition:transform .15s ease;}.mv-cart-qv:hover img{transform:scale(1.04);}.cartproductmanufacturer{font-weight:bold;color:var(--site-header-end,#396b9e);margin:2px 0 3px;font-size:13px;}.mv-cart-wrap{position:relative;width:85vw !important;max-width:85vw !important;left:50%;transform:translateX(-50%);margin:0 !important;box-sizing:border-box;}.mv-cart-wrap #cartcontainer{width:100% !important;max-width:100% !important;}.checkout{width:92vw !important;max-width:92vw !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box;}.mvco-items{display:block;}.mvco-item{display:flex;gap:16px;align-items:flex-start;padding:16px 4px;border-bottom:1px solid var(--site-border,#e5e7eb);}.mvco-item:last-child{border-bottom:0;}.mvco-item__img{flex:0 0 92px;width:92px;height:92px;display:flex;align-items:center;justify-content:center;}.mvco-item__img img{max-width:92px;max-height:92px;width:auto;height:auto;object-fit:contain;}.mvco-item__body{flex:1 1 auto;min-width:0;}.mvco-item__top{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}.mvco-item__qty{font-size:13px;color:#444;text-transform:uppercase;letter-spacing:.02em;}.mvco-item__qty b{font-size:15px;color:#111;}.mvco-item__price{margin-left:auto;font-size:18px;color:#111;white-space:nowrap;text-align:right;}.mvco-item__price .mvco-item__old{display:block;font-size:12px;color:#9aa0a6;text-decoration:line-through;font-weight:normal;}.mvco-item__remove{margin:0 0 0 4px;display:inline-block;}.mvco-item__remove .mv-btn,.cartproductgrid .productremovecolumn .mv-btn{padding:5px;color:var(--site-header-end,#396b9e) !important;background:transparent !important;border-color:transparent !important;}.mvco-item__remove .mv-btn svg,.cartproductgrid .productremovecolumn .mv-btn svg{fill:currentColor;}.mvco-item__remove .mv-btn:hover,.cartproductgrid .productremovecolumn .mv-btn:hover{color:var(--site-button-hover,#2c5aa0) !important;background:transparent !important;}.mvco-item__name{font-size:17px;font-weight:600;line-height:1.3;color:#111;margin:4px 0 2px;}.mvco-item__meta{font-size:13px;color:#6b7280;}.mvco-item__brand{font-weight:bold;color:var(--site-header-end,#396b9e);}.mvco-item__disc{font-size:12px;color:#c0392b;margin-top:4px;}
body{background:#ffffff;color:#2c3e50;}#main,#container{background-color:#ffffff;}a{color:#0f63d2;}a:hover{color:#2c3e50;}#header-menu{background:linear-gradient(#1c70bf,#1961a4) !important;}#top-menu a,#header-menu>a{color:#ffffff;}#header-menu .mv-mm-top{color:#ffffff;}.siteprice,.SitePrice,.product-class-status .siteprice{background:#27ae60;color:#fff;}.cell-product .price a,.detailedList .price{color:#27ae60;}#criteresSearchLeft .criteria_header{background:linear-gradient(#1c70bf,#1961a4) !important;color:#ffffff !important;}#criteresSearchLeft .criteria_header span{background-image:none !important;}#criteresSearchLeft .criteria_header a{color:#ffffff !important;}#hp_blocks .hp_blk_hdr{background:linear-gradient(#1c70bf,#1961a4) !important;color:#ffffff !important;}.sidemenu .blue_header{background:linear-gradient(#1c70bf,#1961a4) !important;color:#ffffff !important;}.sidemenu .blue_header span{background-image:none !important;}.sidemenu .blue_header a{color:#ffffff !important;}#suggested-items-pane .header{background:linear-gradient(#1c70bf,#1961a4) !important;}#suggested-items-pane .header,#suggested-items-pane .header *,#suggested-items-pane .gh_text{color:#ffffff !important;}
@media (max-width:992px){#main-content,#homepagecolumn2,#homepagecolumn3,#product,#productContent,#categorymain,#maincolumn,#main-with-left-nav{width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;float:none !important;box-sizing:border-box !important;}#main-content{padding-left:6px !important;padding-right:6px !important;}#homepagecolumn1{display:none !important;}#imgProduct,#rightContent{width:100% !important;max-width:100% !important;float:none !important;}}
@media (max-width:1200px){#list:has(.cell-product){grid-template-columns:repeat(3,1fr) !important;}:is(.detailedList,#list) .cell-product{width:calc(100%/3 - 16px) !important;min-width:0 !important;}}@media (max-width:992px){#list:has(.cell-product){grid-template-columns:repeat(2,1fr) !important;}:is(.detailedList,#list) .cell-product{width:calc(100%/2 - 16px) !important;min-width:0 !important;}}@media (max-width:576px){#list:has(.cell-product){grid-template-columns:repeat(1,1fr) !important;}:is(.detailedList,#list) .cell-product{width:100% !important;min-width:0 !important;}}@media (max-width:992px){#main-content .product-line .mv-btn,#main-content .product-line [id^=addproduct],#main-content .product-line .yousave,#main-content .product-line [id=status],#main-content .product-line .product_discount_adverts,#main-content .product-line .ProductStatus,#main-content .product-line .prices,#main-content .product-line .controls{max-width:100% !important;box-sizing:border-box !important;overflow-wrap:break-word;}}@media (max-width:576px){#list:has(.product-line){grid-template-columns:1fr !important;}}
@media (max-width:992px){#category-options,#categoryselect,.dropdowncategory{max-width:100% !important;box-sizing:border-box !important;}#categoryselect dt,#categoryselect dd,#categoryselect dt a,.dropdowncategory dt,.dropdowncategory dd,.dropdowncategory dt a{max-width:100% !important;box-sizing:border-box !important;}#categoryselect dt a,.dropdowncategory dt a,.mv-searchbar .dropdowncategory dt a{min-width:0 !important;max-width:100% !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.categorysortorder,.CatorderText{max-width:100% !important;box-sizing:border-box !important;white-space:normal !important;}.sf-ui-pfilter__pager,.product-filter .pager{max-width:100% !important;box-sizing:border-box;}.sf-ui-pfilter__pager table,.pager table{width:auto !important;max-width:100% !important;}.hp_blk_body .slideshow{max-width:100% !important;width:auto !important;}.slideshow .rotator,.slideshow select,.slideshow #Manufactorer{max-width:100% !important;box-sizing:border-box !important;}#SearchForm,fieldset#SearchForm{width:100% !important;max-width:100% !important;box-sizing:border-box !important;}#SearchForm input,#SearchForm select,#SearchForm textarea,.advenced-search input,.advenced-search select{max-width:100% !important;box-sizing:border-box !important;}.advenced-search #CategoryField,.advenced-search #ManufacturerField,.advenced-search #VendorField,.advenced-search #KeywordField{width:100% !important;}#SearchForm table,#SearchForm tbody,#SearchForm tr,#SearchForm td,.advenced-search table,.advenced-search tbody,.advenced-search tr,.advenced-search td{display:block !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}.sf-ui-pfilter__pager table,.sf-ui-pfilter__pager tbody,.sf-ui-pfilter__pager tr,.pager table,.pager tbody,.pager tr{display:block !important;width:100% !important;}.sf-ui-pfilter__pager td,.pager td{display:inline-block !important;width:auto !important;vertical-align:middle;}.sf-ui-pfilter__pager ul,.pager ul{display:flex !important;flex-wrap:wrap !important;justify-content:center;}#st_horizontal,#st_horizontal .st_tabs_container,#st_horizontal .st_view_container,#st_horizontal .st_view{width:100% !important;max-width:100% !important;box-sizing:border-box !important;}.minislider_shorty,.minislider_shorty .slidesholder{max-width:100% !important;}.minislider_shorty{overflow-x:hidden !important;}#main-content img:not(.manufacturer-icon),.custom-page img,.mv-footer img{max-width:100% !important;height:auto !important;}}
#mv-filter-toggle,#mv-filter-drawer,#mv-filter-backdrop{display:none;}
@media (max-width:992px){#mv-filter-toggle{display:inline-flex !important;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin:0 0 10px;padding:11px 14px;background:#fff;color:#222;border:1px solid var(--site-border,#d0d5db);border-radius:8px;font-weight:bold;font-size:14px;cursor:pointer;}#mv-filter-toggle svg{stroke:currentColor;}#mv-filter-drawer{display:block !important;position:fixed;top:0;right:0;height:100%;width:86%;max-width:360px;transform:translateX(100%);transition:transform .25s ease;z-index:100001;overflow-y:auto;background:#fff;box-shadow:-2px 0 16px rgba(0,0,0,.4);padding:0 0 24px;box-sizing:border-box;}body.mv-filter-open #mv-filter-drawer{transform:translateX(0);}body.mv-filter-open #mv-filter-backdrop{display:block !important;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:100000;}#mv-filter-drawer-bar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:linear-gradient(to bottom,var(--site-header-start,#497bae),var(--site-header-end,#396b9e));color:#fff;padding:0 0 0 14px;z-index:2;}#mv-filter-drawer-title{font-weight:bold;font-size:16px;color:#fff;}#mv-filter-close{width:46px;height:46px;font-size:30px;line-height:1;background:transparent;color:#fff;border:0;cursor:pointer;}#mv-filter-drawer .category-criteria-block,#mv-filter-drawer .sidemenu,#mv-filter-drawer .sidemenu_body,#mv-filter-drawer #criteresSearchLeft{display:block !important;width:auto !important;max-width:100% !important;float:none !important;margin:0 !important;box-sizing:border-box;}#mv-filter-drawer .sidemenu_body{padding:8px 14px;}}
@media (max-width:992px){#select-product-viewer .nav{height:auto !important;}#select-product-viewer table,#select-product-viewer table > tbody{display:block !important;width:100% !important;max-width:100% !important;}#select-product-viewer table > tbody > tr{display:flex !important;flex-wrap:wrap !important;width:100% !important;}#select-product-viewer table > tbody > tr > td{display:block !important;width:50% !important;max-width:50% !important;box-sizing:border-box !important;float:none !important;vertical-align:top;height:auto !important;}#select-product-viewer .hp_container_block,#select-product-viewer .hp_container_hdr{width:auto !important;max-width:100% !important;min-height:0 !important;box-sizing:border-box;float:none !important;}#select-product-viewer .hp_container_image,#select-product-viewer .hp_container_image img,#select-product-viewer .cell-product img,#select-product-viewer img:not(.manufacturer-icon){max-width:100% !important;height:auto !important;}}@media (max-width:576px){#select-product-viewer table > tbody > tr > td{width:100% !important;max-width:100% !important;}#select-product-viewer .nav li{width:50% !important;}}
/* ===== /MV-SITE-THEME ===== */
/* Mega-menu bar: align it with the centered site content. The legacy menu used
   margin-left:-6px to seat its sprite PNG; the mega bar has no sprite, so that
   offset just pushed it left of the content box. Zero it and let the bar fill
   the content width edge-to-edge. */
#header-menu{margin-left:0 !important;margin-right:0 !important;}
/* Header search: drop below the top links and pin to the right edge (was mid-header beside the callback). */
#header #search-header{clear:right !important;float:right !important;text-align:right !important;margin-right:18px !important;}
/* Price-range jSlider: recolor to the site colors for ALL skins (the skin is
   actually 'round', sprite jslider.round.png) — neutral rail, value bar = header
   gradient, handles = button color; and let the slider fill its column width
   (storefront.css pins .sf-ui-criteria__slider-box at 180px). --site-* vars follow Site Settings. */
.jslider .jslider-bg i{background-image:none !important;}
.jslider .jslider-bg .l,.jslider .jslider-bg .f,.jslider .jslider-bg .r{background-color:#d8d8d8 !important;}
.jslider .jslider-bg .v{background:linear-gradient(var(--site-header-start,#497bae),var(--site-header-end,#396b9e)) !important;}
.jslider .jslider-pointer{background:var(--site-button-bg,#396b9e) !important;background-image:none !important;border:1px solid var(--site-button-border,#044062);border-radius:50%;}
.sf-ui-criteria__slider-box{display:block !important;width:auto !important;box-sizing:border-box !important;max-width:100% !important;padding-right:14px !important;}
/* ===== Mega menu styling (synced with SiteThemeCss.MegaMenuRules) ===== */
.mv-megamenu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;position:relative;}
.mv-megamenu>.mv-mm-item{position:relative;border-right:1px solid rgba(255,255,255,.22);}
.mv-megamenu>.mv-mm-item:last-child{border-right:0;}
.mv-megamenu .mv-mm-top{display:block;padding:10px 12px;color:var(--site-header-text,#fff) !important;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:bold !important;font-size:var(--site-menu-size,14px) !important;line-height:1.2 !important;text-decoration:none;white-space:nowrap;}
.mv-megamenu .mv-mm-caret{font-size:10px !important;margin-left:5px;opacity:.85;}
.mv-megamenu .mv-mm-item:hover>.mv-mm-top{background:var(--site-header-end,#396b9e);color:var(--site-header-text,#fff) !important;}
.mv-megamenu .mv-mm-panel{display:none;position:absolute;left:0;top:100%;z-index:1000;min-width:0;max-width:none;background:none;border:0;box-shadow:none;}
.mv-megamenu .mv-mm-has-panel:hover>.mv-mm-panel{display:block;}
.mv-megamenu .mv-mm-item:nth-last-child(-n+2)>.mv-mm-panel{left:0;right:auto;}
.mv-megamenu .mv-mm-panel-inner{display:inline-flex;flex-wrap:nowrap;align-items:flex-start;gap:20px;padding:18px 20px;width:auto;max-width:96vw;box-sizing:border-box;background:var(--site-surface,#ffffff);border:1px solid var(--site-border,#cdcdcd);border-top:3px solid var(--site-header-end,#396b9e);box-shadow:0 6px 16px rgba(0,0,0,.12);border-radius:0 0 var(--site-radius,5px) var(--site-radius,5px);}
.mv-megamenu .mv-mm-col{min-width:170px;}
.mv-megamenu .mv-mm-col a{white-space:nowrap;}
.mv-megamenu .mv-mm-group{margin-bottom:12px;}
.mv-megamenu .mv-mm-head{display:block;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:bold !important;font-size:var(--site-menu-size,14px) !important;line-height:1.3 !important;color:var(--site-content-text,#1a1a1a) !important;text-decoration:none;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--site-border,#cdcdcd);}
.mv-megamenu .mv-mm-head:hover{color:var(--site-link-hover,#3399ff) !important;}
.mv-megamenu .mv-mm-links{list-style:none;margin:0;padding:0;}
.mv-megamenu .mv-mm-links li{margin:3px 0;}
.mv-megamenu .mv-mm-links a{display:block;color:var(--site-content-text,#1a1a1a) !important;text-decoration:none;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:normal !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;padding:3px 7px;border-radius:3px;}
.mv-megamenu .mv-mm-links a:hover{color:var(--site-link-hover,#3399ff) !important;background:var(--site-surface,#eef2f7) !important;text-decoration:none;}
.mv-megamenu .mv-mm-link{display:block;color:var(--site-content-text,#1a1a1a) !important;text-decoration:none;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:normal !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;padding:3px 7px;border-radius:3px;}
.mv-megamenu .mv-mm-link:hover{color:var(--site-link-hover,#3399ff) !important;background:var(--site-surface,#eef2f7) !important;font-weight:inherit !important;}
.mv-megamenu .mv-mm-sub-head{display:block;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:bold !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;color:var(--site-content-text,#1a1a1a) !important;text-decoration:none;margin-top:6px;padding-bottom:2px;border-bottom:1px solid var(--site-border,#cdcdcd);}
.mv-megamenu .mv-mm-sub-head:hover{color:var(--site-link-hover,#3399ff) !important;}
.mv-megamenu .mv-mm-sublink{display:block;color:var(--site-content-text,#1a1a1a) !important;text-decoration:none;font-family:var(--site-menu-font,Arial,Helvetica,sans-serif) !important;font-weight:normal !important;font-size:var(--site-menu-size,13px) !important;line-height:1.4 !important;padding:3px 7px;border-radius:3px;}
.mv-megamenu .mv-mm-sublink:hover{color:var(--site-link-hover,#3399ff) !important;background:var(--site-surface,#eef2f7) !important;text-decoration:none;font-weight:inherit !important;}
.mv-megamenu .mv-mm-link::before,.mv-megamenu .mv-mm-sublink::before{content:'\2022';color:var(--site-header-end,#396b9e);margin-right:7px;font-weight:bold;font-size:1.25em;line-height:1;vertical-align:-1px;}
.mv-megamenu .mv-mm-links .mv-mm-links{margin-left:12px;}
.mv-megamenu .mv-mm-banner img{max-width:240px;height:auto;border-radius:var(--site-radius,5px);display:block;}
.mv-megamenu .mv-mm-childimg{display:block;}.mv-megamenu .mv-mm-childimg img{max-width:150px;height:auto;border-radius:var(--site-radius,5px);margin-bottom:6px;display:block;}
.mv-megamenu .mv-mm-imagecol{margin-left:auto;display:flex;flex-direction:column;gap:10px;padding-left:14px;}
.mv-megamenu .mv-mm-imagecol img{max-width:220px;height:auto;border-radius:var(--site-radius,5px);display:block;}
.mv-megamenu .mv-mm-colimg{display:block;margin-top:8px;}.mv-megamenu .mv-mm-colimg img{max-width:170px;height:auto;border-radius:var(--site-radius,5px);display:block;}
.mv-megamenu .mv-mm-html{max-width:860px;color:var(--site-content-text,#1a1a1a) !important;}
.mv-megamenu .mv-mm-html img{max-width:100%;height:auto;}

/* ===== Product detail: FULL-WIDTH content section (per request) =====
   Overrides the --product-box-width (90%, centered) design: the entire product content
   section and every block in it = 100% width, left-aligned, 10px right padding.
   Appended AFTER the MV-SITE-THEME managed block so it survives an admin Save.
   The sliding-tabs plugin reads #productContent's rendered width (boxWidth()) for its
   own sizing, so forcing #productContent to 100% makes the tabs fill the same width. */
/* 100% width + left-aligned; the right GAP to the right column (#homepagecolumn1) is a
   single padding-right on the #product wrapper, so every block (incl. the bordered tabs
   box) insets uniformly and none of them butt against the right column. */
#product { --product-box-width: 100%; padding-right: 12px; box-sizing: border-box; }
body #product #productContent,
#product #suggested-items-pane,
#product #hp_blocks,
#product #hp_blocks > .sidemenu {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
}
#product #st_horizontal {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
/* Add-to-favorites heart was flush against the element to its left — give it a small gap. */
#productContent #wishlist,
#productContent .sf-ui-pinfo__wishlist { padding-left: 5px !important; }

/* Grid compare checkbox (only rendered for comparator categories) — centered under the card. */
.cell-product .mv-grid-compare { text-align: center; margin: 4px 0 8px; padding: 0 5px; }
.cell-product .mv-grid-compare .compare_link { cursor: pointer; font-size: 12px; color: #444; margin-left: 4px; }

/* Product upsell ("related items" / #crosssells): stack the image column vertically as
   image -> manufacturer logo -> "Voir le Produit". The image already comes first (outside
   .see_product); reorder the two .see_product children so the logo sits above the link. */
#crosssells .product_image .see_product { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
#crosssells .product_image .see_product > a { order: 1; }   /* manufacturer logo */
#crosssells .product_image .see_product > b { order: 2; }   /* "Voir le Produit" */
#crosssells .product_image .see_product .manufacturer-icon { display: block; margin: 0 auto; }

/* Price-drop badge (reduce.png) was BEHIND the product image (it had no z-index while the
   image has z-index:1). Lift it above the image, transparent background. */
.detailedList .product_image .productreduce,
.product-line .product_image .productreduce,
.cell-product .productreduce,
.product_image .productreduce,
img.productreduce {
    position: absolute !important;
    top: 6px;
    right: 6px;
    left: auto;
    z-index: 9 !important;
    background: transparent !important;
    max-width: 62px !important;
    height: auto !important;
    pointer-events: none;
}

/* Detailed list: place the "Voir Produit" link + manufacturer logo + the rest just 1px BELOW the
   product image (normal flow). The earlier absolute overlay was fighting the image and shifting the
   logo to the right — removed it. */
.detailedList .product_image .see_product,
.product-line .product_image .see_product {
    margin-top: 1px !important;
    position: static !important;
}
#list .product-line .product_image .see_product > a {
    position: static !important;
    margin: 0 !important;
}
#list .product-line .product_image .see_product .manufacturer-icon { display: inline-block; }

/* SlickSlider dot pill: when the luminosity sampler (lum() in the slider init JS) detects a dark
   slide image (L < 115) it adds "on-dark" to .slick-dots so the near-white pill makes the
   dark dots readable against the image. */
.mv-slick .slick-dots.on-dark { background: rgba(255,255,255,.75); }

/* ==========================================================================
   Product page — layout refresh + new features (2026)
   Features: 2-col flex layout, rating summary, stock badge, compare btn,
             sticky ATC bar, recently-viewed strip.
   Appended after MV-SITE-THEME per stylesheet convention.
   ========================================================================== */

/* ---- Two-column flex layout ---- */
body #productContent {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 28px;
    align-items: flex-start;
    padding: 24px 20px !important;
    max-width: var(--product-box-width) !important;
}
/* In a flex container floats are ignored — no need to override float:right!important */
#imgProduct {
    width: 44%;
    flex-shrink: 0;
    text-align: center;
}
#imgProduct #divMainImg img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
#imgProduct #additionalimages {
    margin-top: 10px;
}
#rightContent {
    flex: 1;
    min-width: 0;
}
@media screen and (max-width: 768px) {
    body #productContent {
        flex-wrap: wrap;
        gap: 16px;
        padding: 12px !important;
    }
    #imgProduct {
        width: 100%;
    }
}

/* ---- Rating summary row (near product title / top of right col) ---- */
.mv-pinfo-rating {
    margin-bottom: 6px;
}
.mv-pinfo-rating__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: inherit;
}
.mv-pinfo-rating__link:hover .mv-pinfo-rating__count { text-decoration: underline; }
.mv-pinfo-rating__stars {
    display: inline-block;
    width: 80px;
    height: 16px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
}
.mv-pinfo-rating__count {
    font-size: 13px;
    color: #555;
}
.mv-pinfo-rating__empty {
    font-size: 13px;
    color: #888;
}

/* ---- Stock badge ---- */
.mv-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0 4px;
}
.mv-stock-badge__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: currentColor;
    vertical-align: middle;
}
/* Inherit color from the inner .siteprice/.yousave spans */
.mv-stock-badge .siteprice { font-size: 9pt !important; }
.mv-stock-badge .yousave  { font-size: 9pt !important; }

/* ---- Product action row (share + compare, side by side) ---- */
.mv-pinfo-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.mv-pinfo-action-row #socialButtons { margin: 0; }

/* ---- Compare button ---- */
.mv-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    color: #444;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.mv-compare-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}
.mv-compare-btn:hover {
    border-color: #217CC4;
    color: #217CC4;
}
.mv-compare-btn.is-added {
    border-color: #217CC4;
    color: #217CC4;
    background: #eaf3fc;
}

/* ---- Sticky ATC bar ---- */
.mv-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transform: translateY(-110%);
    transition: transform .22s ease;
    pointer-events: none;
}
.mv-sticky-bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.mv-sticky-bar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1060px;
    margin: 0 auto;
    padding: 8px 20px;
}
.mv-sticky-bar__img img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 3px;
    flex-shrink: 0;
}
.mv-sticky-bar__title {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #222;
}
.mv-sticky-bar__price {
    font-weight: 700;
    font-size: 14px;
    color: green;
    white-space: nowrap;
    flex-shrink: 0;
}
.mv-sticky-bar__btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px;
    padding: 7px 16px;
}
.mv-sticky-bar__btn svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    fill: currentColor;
    margin-right: 4px;
}
@media screen and (max-width: 768px) {
    .mv-sticky-bar { display: none; }
}

/* ---- Recently viewed strip ---- */
.mv-recently-viewed {
    padding: 20px 0 8px;
    border-top: 1px solid #e8e8e8;
    margin-top: 20px;
}
.mv-recently-viewed__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #333;
}
.mv-recently-viewed__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.mv-recently-viewed__track::-webkit-scrollbar { height: 4px; }
.mv-recently-viewed__track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.mv-rvp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 110px;
    text-decoration: none;
    color: inherit;
    gap: 5px;
}
.mv-rvp-card:hover .mv-rvp-card__name { text-decoration: underline; }
.mv-rvp-card__img {
    width: 90px;
    height: 72px;
    object-fit: contain;
    border: 1px solid #eee;
    background: #fafafa;
    border-radius: 4px;
}
.mv-rvp-card__name {
    font-size: 11px;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #444;
}
