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

   PUT ALL HAND-WRITTEN CSS HERE.

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

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

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

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

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

/* Product detail: bold "Reviews" (Avis) label + the review widget, on their OWN LINE
   below the stock availability. The handler wraps both in .mv-product-reviews so the
   label and the "Evaluer ce produit." link sit together on one line. Scoped to the
   product info column so category-card reviews stay inline. */
#rightContent .mv-product-reviews { display: block !important; margin-top: 4px !important; padding-left: 8px; }
#rightContent .mv-product-reviews .mv-product-reviews__label { font-weight: bold !important; margin-right: 6px; }
#rightContent .mv-product-reviews #review.sf-ui-pstatus__review { display: inline-block !important; margin-top: 0 !important; vertical-align: middle; }

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

/* The top bar lives inside the centered #site-content shell (via #header), so its
   own width:100% only fills that constrained shell — not the page. Break it out to
   the FULL PAGE WIDTH (full-bleed) while #header / #site-content stay constrained.
   100vw + left:50% + translateX(-50%) centres a viewport-wide bar on the page,
   regardless of the constrained (and table-based) ancestor. */
.mv-header-top {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

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

#productContent #iconPromo {
    display: inline-flex !important;
    align-items: start;
    justify-content: start;
    width: 210px !important;
    min-width: 0 !important;
    max-width: 210px !important;
    height: 38px;
    background-size: 100% 100% !important;
    color: #fff !important;
    font-size: 23px !important;
    font-weight: bold !important;
    padding: 0 6px 0 100px !important;
    box-sizing: border-box !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    border-radius: 0 !important;
    margin: 4px 0 8px !important;
    line-height: 28px !important;
}

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

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

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

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

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

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

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

/* --- 2. Hover lift (whole card is interactive) ---------------------------- */
/* On hover the border picks up the brand colour as an accent — subtle at rest,
   clearly interactive on hover. */
.hp_container_block:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
    border-color: var(--site-link, #2489ce) !important;
}

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

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

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

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

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

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

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

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

.hp_container_block:hover .hp_container_image {
    opacity: 1 !important;
    transform: scale(1.04) !important;
}

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

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

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

/* --- 9. Floating WhatsApp widget — notification bubble (.message) --------- */
/* styles.css:2562 sets .message height:100%, but its positioned ancestor
   #whatsapp-bloc (position:fixed, no height) is only as tall as the 55px launcher
   button — so the bubble collapsed and clipped the avatar + name + text.
   Let it size to its content instead. */
#whatsapp-bloc .message {
    height: auto !important;
    align-items: center !important;   /* center the close button against the notification row */
}
/* Bubble sits on a WHITE background, but the name/message text was inheriting a
   white colour (invisible). Force dark, readable text + a clean system font. */
#whatsapp-bloc .message,
#whatsapp-bloc .message .name,
#whatsapp-bloc .message .msg,
#whatsapp-bloc .message .msg p,
#whatsapp-bloc .message #text-whatsapp-btn,
#whatsapp-bloc .message #text-whatsapp-btn p {
    color: #303030 !important;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
#whatsapp-bloc .message .name { color: #111111 !important; }
/* Width: 340px, but never wider than the viewport (it's position:fixed at
   right:10px, so cap at 100vw minus a 10px gutter each side). box-sizing keeps
   the padding inside the width. This is the responsive guard — vw works even
   though the theme has no viewport meta, and the bubble shrinks on small screens
   instead of spilling off-screen. Name: refined size/weight for the new font. */
#whatsapp-bloc .message {
    width: 340px !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
}
/* Same responsive cap on the expanded chat panel (also 340px in styles.css:2573)
   so neither part of the widget spills off-screen on narrow viewports. */
#whatsapp-bloc .message-layout {
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
}
/* Keep the whole floating widget above page content (theme sets z-index:10). */
#whatsapp-bloc {
    z-index: 999 !important;
}

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