/* ============================================================
   Affa Slider — MarocData additions (NOT a vendor file).
   The vendored template only ships .animation-style-01; styles 02/03
   referenced by the admin existed in name only (no CSS → no animation,
   the content just sat there static). These rules give 02/03 real,
   visibly distinct entrance animations built from the animate.css
   keyframes already loaded by animate.min.css.

   Loaded by BOTH the storefront renderer (AffaSliderRenderController,
   asset block) and the admin editor preview (editor.ascx) so the
   in-editor preview matches the live slider exactly.
   ============================================================ */

/* ---- Style 02 — "Depuis la gauche + image en zoom" ----
   Content slides/fades in from the left (staggered); the product image
   scales up. Clearly different from style 01 (which comes up from the
   bottom while the image flies in from the right). */
.animation-style-02 .slider-images,
.animation-style-02 .slider-content,
.animation-style-02 .slider-content-02 { opacity: 0; }
.animation-style-02.swiper-slide-active .slider-content,
.animation-style-02.swiper-slide-active .slider-content-02 { opacity: 1; }
.animation-style-02.swiper-slide-active .slider-shape {
    -webkit-animation: fadeIn 1s .3s both; animation: fadeIn 1s .3s both; }
.animation-style-02.swiper-slide-active .slider-content .title,
.animation-style-02.swiper-slide-active .slider-content-02 .title {
    -webkit-animation: fadeInLeftBig 1s .4s both; animation: fadeInLeftBig 1s .4s both; }
.animation-style-02.swiper-slide-active .slider-content p,
.animation-style-02.swiper-slide-active .slider-content-02 p {
    -webkit-animation: fadeInLeftBig 1s .7s both; animation: fadeInLeftBig 1s .7s both; }
.animation-style-02.swiper-slide-active .slider-content .btn,
.animation-style-02.swiper-slide-active .slider-content-02 .btn {
    -webkit-animation: fadeInLeftBig 1s 1s both; animation: fadeInLeftBig 1s 1s both; }
.animation-style-02.swiper-slide-active .slider-images { opacity: 1; }
.animation-style-02.swiper-slide-active .slider-images img {
    -webkit-animation: zoomIn 1.2s .5s both; animation: zoomIn 1.2s .5s both; }

/* ---- Style 03 — "Apparition douce (fondu)" ----
   A calm, in-place fade: the title drops in, the text rises, the button
   pops with a small zoom, and the image simply fades. No big directional
   travel — the gentlest of the three. */
.animation-style-03 .slider-images,
.animation-style-03 .slider-content,
.animation-style-03 .slider-content-02 { opacity: 0; }
.animation-style-03.swiper-slide-active .slider-content,
.animation-style-03.swiper-slide-active .slider-content-02 { opacity: 1; }
.animation-style-03.swiper-slide-active .slider-shape {
    -webkit-animation: fadeIn 1.2s .3s both; animation: fadeIn 1.2s .3s both; }
.animation-style-03.swiper-slide-active .slider-content .title,
.animation-style-03.swiper-slide-active .slider-content-02 .title {
    -webkit-animation: fadeInDown 1s .4s both; animation: fadeInDown 1s .4s both; }
.animation-style-03.swiper-slide-active .slider-content p,
.animation-style-03.swiper-slide-active .slider-content-02 p {
    -webkit-animation: fadeInUp 1s .7s both; animation: fadeInUp 1s .7s both; }
.animation-style-03.swiper-slide-active .slider-content .btn,
.animation-style-03.swiper-slide-active .slider-content-02 .btn {
    -webkit-animation: zoomIn .8s 1s both; animation: zoomIn .8s 1s both; }
.animation-style-03.swiper-slide-active .slider-images { opacity: 1; }
.animation-style-03.swiper-slide-active .slider-images img {
    -webkit-animation: fadeIn 1.4s .5s both; animation: fadeIn 1.4s .5s both; }

/* ============================================================
   RESPONSIVE LAYOUT — rebuilt from scratch (2026-06-13)
   ------------------------------------------------------------
   ONE coherent model that replaces the vendor's fixed-px,
   absolute-image layout at every width. Everything is scoped to
   `.mv-affa` (the slider root) so no other block is affected, and
   `!important` so it beats the vendor `style.min.css` +
   `responsive.min.css` (both load BEFORE this file) including their
   per-breakpoint fixed heights.

   Cascade the slider lives in (load order):
     swiper.min.css → animate.min.css → style.min.css →
     responsive.min.css → THIS FILE → theme styles.css →
     controller inline <style> (MaxHeight, #id, >=992 only) →
     inline style="" (per-slide bg + clamp() font sizes).

   THE MODEL
   • Container — fluid. Spans the page with a PROPORTIONAL side
     gutter (clamp) so the text hugs the LEFT edge by the same visual
     amount at every width (no "content drifts to the centre/right"
     on wide screens). Centred only past 1920px so an ultra-wide
     monitor doesn't stretch one line of text edge-to-edge.
   • Desktop (>=992) — a REAL flex two-column row: text left, product
     image right, vertically centred, controlled gap. The image is
     RELATIVE (not the vendor's position:absolute;right:0;z-index:-1
     behind the text) so it can never be cornered, pushed off-screen,
     or clipped, and it scales with its own column.
   • Height (>=992) — FLUID via clamp(vw) instead of the vendor's
     fixed 950/880/750px slabs. When the block has an admin MaxHeight
     the render controller's inline <style> (higher #id specificity)
     caps it; otherwise this default clamp drives it.
   • Image — never clipped at any size (capped to its box; object-fit).
   • Mobile/Tablet (<=991) — a clean STACK: centred text over the
     un-pinned, centred product image; decorative disc hidden;
     pagination becomes a centred horizontal row; natural height.
   • Fonts — the per-slide sizes the controller emits are already
     clamp()-based (scale down on small screens, so no overflow); the
     vendor supplies the fallback sizes when a slide sets none.
   ============================================================ */

/* ---- Bigger decorative background disc ----
   The vendor sizes .slider-shape at 1400/1200/1050px (hidden <768px).
   Enlarge ~30% per breakpoint for a bolder backdrop. This file loads
   after responsive.min.css, so these equal-specificity rules win; the
   disc is absolutely positioned inside the overflow:hidden slide, so
   it is purely decorative and can never add horizontal scroll. */
.mv-affa .slider-shape { width: 1150px; height: 1150px; right: -40px; }
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .mv-affa .slider-shape { width: 1000px; height: 1000px; right: -60px; }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .mv-affa .slider-shape { width: 850px; height: 850px; right: -80px; }
}

/* ---- Fluid container: text hugs the left at a constant gutter ----
   Replaces the vendor's `@media(min-width:1200px){.container{max-width:1200px}}`
   centring (which created the growing side margins that pushed the text
   toward the middle on wide screens). Now the row spans the viewport with
   a proportional gutter; only >1920px gets any centring margin. */
.mv-affa .container {
    width: 100% !important;
    max-width: 1920px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-left: clamp(16px, 5vw, 90px) !important;
    padding-right: clamp(16px, 5vw, 90px) !important;
}

/* ---- Product image is never clipped (all sizes) ----
   The vendor caps the .slider-images BOX at 50% but puts NO cap on the
   <img>; a large source (the renderer resizes up to 1920px) overflows
   and `.slider-section{overflow:hidden}` slices it — the "cut off on the
   right" symptom. Cap the image to its box everywhere. */
.mv-affa .slider-images img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ---- Desktop (>=992): flex two-column, fluid height ---- */
@media only screen and (min-width: 992px) {
    .mv-affa .single-slider {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        /* STRETCH (not center) so the inner .container fills the full slide height.
           The container does its own vertical centering (align-items:center below),
           so the default (no-offset) layout still looks centred — but a full-height
           container is REQUIRED for the per-slide "Décalage bas/haut" offset to work:
           the offset puts align-self:flex-end + padding-bottom on .slider-content, and
           that can only push the text up from the slide's bottom edge if the container
           actually reaches that edge. With center here the container was only as tall as
           its content, so flex-end had no room to act and the bottom offset did nothing. */
        -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
        align-items: stretch !important;
        height: auto !important;
        /* Fluid banner height (vendor used fixed 950/880/750px). The admin
           MaxHeight, when set, overrides this via the controller's #id rule. */
        min-height: clamp(360px, 40vw, 620px) !important;
    }
    /* The slide's .container is the flex ROW (text column + image column). */
    .mv-affa .single-slider .container {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
        gap: clamp(20px, 3vw, 56px) !important;
    }
    /* Text column GROWS to fill everything left of the image+gap, so the
       title/text/buttons always start at the left gutter. min-width:0 lets
       it shrink (a long unbreakable word can't force overflow). */
    .mv-affa .slider-content {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .mv-affa .slider-content p { max-width: 100% !important; }
    /* Image column: fixed share on the right, RELATIVE, centred in its box. */
    .mv-affa .slider-images {
        position: relative !important;
        top: auto !important; right: auto !important; left: auto !important;
        -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 44% !important;
        flex: 0 0 44% !important;
        max-width: 44% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        z-index: 1 !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }
    /* Cap the image to the banner height so a portrait source can't make the
       row taller than the design. The controller's MaxHeight rule (when set)
       overrides this via #id specificity. */
    .mv-affa .slider-images img {
        max-height: clamp(320px, 34vw, 560px) !important;
        /* Nudge the product image up 50px (desktop only). Use position/top — NOT transform — because
           the entrance animation (fadeInRightBig etc. = the "comes in from the right" effect) animates
           `transform`; a static transform here (especially !important) would override the keyframes and
           kill that animation. `top` is independent of transform, so the slide-in from the right is
           preserved AND the image sits 50px higher. */
        position: relative;
        top: -50px;
    }
}

/* ---- Kill the vendor's hardcoded 40px gap above the buttons ----
   style.min.css ships `.btn-margin { margin-top: 40px }`, which puts a fixed 40px gap above the
   button row on EVERY slide (the "40px padding" that couldn't be removed from the admin). Drop it to
   a small, sensible gap so the button isn't glued to the text. Set to 0 if you want it flush. */
.mv-affa .slider-content .btn-margin { margin-top: 14px !important; }

/* ---- Space between adjacent buttons ----
   Multiple buttons render inline back-to-back; add a horizontal gap between
   consecutive buttons (adjacent-sibling so the first keeps its left edge and
   there's no trailing gap). Covers the default and the centre/right wrapper. */
.mv-affa .slider-content .btn + .btn { margin-left: 14px !important; }

/* ---- Add-to-cart + quick-view buttons (linked product): icon + label aligned ---- */
.mv-affa .slider-content .btn.mv-affa-addcart,
.mv-affa .slider-content .btn.mv-affa-quickview {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
.mv-affa .slider-content .btn.mv-affa-addcart svg,
.mv-affa .slider-content .btn.mv-affa-quickview svg { -ms-flex-negative: 0; flex-shrink: 0; }

/* ---- Per-slide logo (the "Logo au-dessus du texte" option) ----
   A small image shown at the TOP of the left content column, like a manufacturer
   logo, above the title. Height comes from the inline style the renderer emits
   (admin-set, width auto); this rule just spaces it and caps it to the column so
   it can never overflow on small screens. The desktop default block-display keeps
   it on its own line above the title; on the ≤991 stack the column is centred, so
   the logo centres with it. */
.mv-affa .slider-content .mv-affa-logo {
    display: block;
    max-width: 100% !important;
    height: auto;
    margin: 0 auto 0 0 !important;   /* NO bottom padding — the gap to the title comes only from the title's line spacing. LEFT-aligned (right:auto). */
}
/* Logo slides up into view with the rest of the content on the active slide. */
.mv-affa .single-slider.swiper-slide-active .slider-content .mv-affa-logo {
    -webkit-animation: fadeInUp 1s .3s both;
    animation: fadeInUp 1s .3s both;
}
/* Nudge the left logo up 30px on desktop. Use a NEGATIVE margin-top — NOT `top`/transform — because:
   (a) `top` shifts the image visually but leaves its layout box in place, so the title stays 30px
   below and a gap opens under the logo; a negative margin moves the logo up AND pulls the title up
   with it (no gap). (b) margin is independent of `transform`, so the logo's fadeInUp entrance still
   plays. This selector (3 classes) out-specifies the `> *:first-child {margin-top:0}` reset. */
@media only screen and (min-width: 992px) {
    .mv-affa .slider-content .mv-affa-logo {
        margin-top: -30px !important;
    }
}
@media only screen and (max-width: 991px) {
    .mv-affa .slider-content .mv-affa-logo { margin-left: 0 !important; margin-right: auto !important; }
}

/* ---- No default top spacing in the text column ----
   The vendor/theme give the first element in .slider-content (logo or <h1.title>) a top margin,
   which reads as a "default padding" the admin can't remove. Zero it so the ONLY top spacing is the
   admin's "Décalage haut" value (so 1px really means 1px, and unset means none). */
.mv-affa .slider-content > *:first-child { margin-top: 0 !important; }
.mv-affa .slider-content .title { margin-top: 0 !important; }

/* ---- Available-stock badge (the "Afficher le stock" option / {stock} token) ---- */
.mv-affa .slider-content .mv-affa-stock {
    margin: 6px 0 14px;
    font-weight: 700;
}

/* ---- Unified button hover (PREVIEW + WEBSITE) ----
   Problem this fixes:
   • Website: the theme's managed rule (.mv-affa .btn-primary:hover) hovered with
     `filter:brightness(.82)` AND `font-weight:700` — the bold reflowed/jittered the
     uppercase, letter-spaced label on every hover.
   • Editor preview: the theme stylesheet isn't loaded, so the vendor `.btn-primary:hover`
     equals the normal state → no hover feedback at all.
   This file is loaded by BOTH the storefront renderer and the editor preview, so one rule
   gives an identical, clean hover everywhere. It uses transform + shadow + a gentle
   brightness — effects the admin's per-button inline `background-color`/`color !important`
   can't block — and pins font-weight so the label never reflows. The 4-class selector
   (.mv-affa .slider-content .btn.btn-primary:hover = 0,0,4,0) out-specifies the theme's
   3-class hover, so it wins even though this file loads before the theme. */
.mv-affa .slider-content .btn,
.mv-affa .slider-content .btn.btn-primary {
    -webkit-transition: -webkit-transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.mv-affa .slider-content .btn:hover,
.mv-affa .slider-content .btn.btn-primary:hover,
.mv-affa .slider-content .btn.mv-affa-addcart:hover,
.mv-affa .slider-content .btn.mv-affa-quickview:hover {
    filter: brightness(.92) !important;
    -webkit-transform: translateY(-2px) !important;
    transform: translateY(-2px) !important;
    -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important;
    font-weight: 500 !important; /* cancel the theme's hover bold → no label reflow */
    opacity: 1 !important;
}

/* ---- Mobile / Tablet (<=991): clean vertical stack ----
   The vendor only un-pins the image below 768px and leaves a messy 768–991
   band (image still absolute, tall fixed height). Force ONE predictable
   layout for the whole <=991 range: a normal-flow block at natural height,
   centred text, the product image un-pinned and centred BELOW it, disc
   hidden, dots in a centred horizontal row. */
@media only screen and (max-width: 991px) {
    .mv-affa .single-slider {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 30px 0 38px !important;
    }
    .mv-affa .single-slider .container {
        display: block !important;
    }
    .mv-affa .slider-content {
        -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
        flex: none !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .mv-affa .slider-content .title {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .mv-affa .slider-content p {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* centre the button row whatever its desktop alignment */
    .mv-affa .slider-content .mv-affa-btns { text-align: center !important; }
    .mv-affa .slider-images {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important;
        -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
        flex: none !important;
        max-width: 80% !important;
        width: auto !important;
        margin: 24px auto 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }
    .mv-affa .slider-images img {
        max-width: 100% !important;
        max-height: 360px !important;
        height: auto !important;
    }
    .mv-affa .slider-shape { display: none !important; }
    .mv-affa .slider-active .swiper-pagination {
        position: relative !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
        width: auto !important;
        gap: 14px !important;
        margin-top: 14px !important;
    }
}