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

/* ---- Bigger decorative background disc ----
   The vendor template sizes the .slider-shape circle at 1400px (desktop), shrinking to
   1200 / 1050 on smaller screens and hidden under 768px. Enlarge it ~30% at each breakpoint
   for a bolder backdrop. mv-affa-extra.css loads after responsive.min.css, so these equal-
   specificity rules win; the ≤767px display:none is left untouched so phones stay clean.
   Tweak the px values to taste. */
.mv-affa .slider-shape { width: 1450px; height: 1450px; right: 120px; }
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .mv-affa .slider-shape { width: 1250px; height: 1250px; right: 100px; }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .mv-affa .slider-shape { width: 1080px; height: 1080px; right: 80px; }
}

/* ---- Text column further left + wide enough for a one-line description ----
   The vendor centres .container at max-width:1200px inside the full-bleed slide, so on a wide
   screen the text block (.slider-content — title + text + buttons) starts well in from the left
   edge, and its 570px cap wraps the description early.

   Instead of a negative margin (which clips the title near the 1200px edge and, below 1200 where
   the container goes full-width, drops the text under the right-hand image), we WIDEN the centred
   container: its left edge moves left and the right-pinned image moves right, both using the empty
   side space — no clipping, no overlap. We also widen .slider-content (and lift the 80% cap on its
   <p>) so the description fits on one line.

   Scoped to >=1200px ONLY. Below 1200 the vendor layout takes over untouched: 992-1199 keeps the
   500px column beside the absolute image, 768-991 shrinks to 370px, and <=767 un-pins the image to
   stack below the text — so phones/tablets are unaffected. Loaded by both the storefront renderer
   and the editor preview, so the two match. Tune the px to taste:
     - container max-width  -> how far left the text starts (bigger = further left, until centring
       kicks in above that viewport width);
     - .slider-content max-width -> room for the one-line description. */
@media only screen and (min-width: 1200px) {
    .mv-affa .container { max-width: 1500px; }
    .mv-affa .slider-content { max-width: 720px; }
    .mv-affa .slider-content p { max-width: 100%; }
}

/* ---- Product image must never be clipped (all sizes) ----
   The vendor gives .slider-images a max-width:50% BOX but puts NO size cap on the <img>
   inside it, and the slide wrapper is .slider-section{overflow:hidden}. A large source image
   (the renderer resizes up to 1920px) therefore overflows its box and is sliced off at the
   right edge — the "TV cut off on the right" symptom. The only place an image cap exists is
   the render controller's per-block MaxHeight <style> (object-fit:contain, !important); blocks
   with no MaxHeight have none. Cap the image to its box everywhere so the whole product always
   shows. No !important, so the controller's MaxHeight rule still wins when a height is set, and
   the <=767 stacked layout (vendor sets .slider-images max-width:80%/100%) is unaffected. */
.mv-affa .slider-images img { max-width: 100%; height: auto; }

/* ---- Tablet / small-desktop (768-1199): same left-aligned look + a gutter to the image ----
   Above we left-align the text only >=1200. Through the mid widths the vendor keeps a fixed
   500px (or 370px <=991) text column beside the image pinned right:0;max-width:50%, so the two
   can touch (crowding) and the text reads narrower than on desktop. Cap the text to the left
   ~half and the image to the right ~45%, leaving a clear gutter between them — the text keeps
   the vendor's natural left position (container is already edge-to-edge here, no max-width below
   1200) but may now use the full half for a one-line description. Stops at 1199: below 768 the
   vendor un-pins the image to stack BELOW the text, which we must not disturb. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .mv-affa .slider-content { max-width: 50%; }
    .mv-affa .slider-content p { max-width: 100%; }
    .mv-affa .slider-images { max-width: 45%; }
}

/* ---- Space between adjacent buttons ----
   When a slide has more than one button they render inline, back-to-back, with no gap
   between them (only their own padding touches). Add a horizontal gap between consecutive
   buttons — adjacent-sibling so the first button keeps its left edge and there is no trailing
   gap after the last. Covers both the default (buttons directly in .slider-content) and the
   centre/right alignment wrapper (.mv-affa-btns). Loaded by the storefront renderer and the
   admin editor preview, so the spacing matches in both. !important to beat the base .btn margins. */
.mv-affa .slider-content .btn + .btn { margin-left: 14px !important; }