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

/* ============================================================================
   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. */
#mv-cathub {
    margin: 16px !important;
}