/*
Template:       arum
Theme Name:     Arum Child
Theme URI:      http://themeforest.net/user/LaStudio/portfolio?ref=LaStudio
Author:         LA Studio
Author URI:     http://themeforest.net/user/LaStudio?ref=LaStudio
Description:    Arum - Multipurpose WooCommerce Theme
Version:        1.0.14
Requires at least: 4.4
Requires PHP: 5.6
Tags:           one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, translation-ready, architecture, interior
License: 		GNU General Public License
License URI: 	licence/GPL.txt
Text Domain:    arum-child
Domain Path:    /languages/
*/

/* M1-gate CLS fix (2026-07-15): reserve carousel space before slick init.
   Pre-init, LA-Studio carousels render all slides stacked (hero lastudio-slides: 6 slides,
   product carousels: 20 cards in 5 rows) then collapse on init = large layout shift.
   Rules only apply while .slick-initialized is absent; no effect after init. */
.lastudio-carousel.elementor-slides:not(.slick-initialized) > *:nth-child(n+2) { display: none; }
ul.lastudio-carousel.js-el:not(.slick-initialized) { display: flex; flex-wrap: nowrap; overflow: hidden; }
ul.lastudio-carousel.js-el:not(.slick-initialized) > li { flex: 0 0 25%; max-width: 25%; }
@media (max-width: 767.98px) {
  ul.lastudio-carousel.js-el:not(.slick-initialized) > li { flex: 0 0 100%; max-width: 100%; }
}

/* M2.1 CLS fix (2026-07-15): mobile hero. Slick hides all slides pre-init, so the hero
   collapses to the container's 60vh min-height, then jumps to the slide's 90vh at init
   (Chrome scores the forced intermediate layouts even before first paint => CLS 0.888).
   Pin the container itself - slick never touches it; slide height is 90vh (post-1281.css)
   so there is zero visual change. Scoped to <=1279px where --min-height:60vh applies;
   desktop (CLS 0.020) untouched. */
@media (max-width: 1279px) {
  .elementor-1281 .elementor-element.elementor-element-f2ffc5d { height: 90vh; }
}
/* M2.1: header logo true intrinsic ratio 460x64 - HTML attrs say 200x50, so the box is
   mis-reserved until the image loads and the header reflows the 741px hero below it. */
img.lahb-logo { aspect-ratio: 460 / 64; height: auto; }

/* ===== M6.3 — Skip-to-content link: reveal on keyboard focus (a11y WCAG 2.4.1) =====
   !important is required to beat the parent theme's `.screen-reader-text{position:absolute!important}`
   and Elementor's `.screen-reader-text{top:-10000em!important}` off-screen hiding. */
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 8px !important;
	left: 8px !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	overflow: visible !important;
	background: #ffffff !important;
	color: #111111 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	z-index: 100000 !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
	text-decoration: underline !important;
}

/* ===== M6.2 — "Best-Seller !" badge contrast (a11y WCAG 1.4.3) =====
   The badge sets background-color:#eebfc0 inline → white text = 1.63:1 (fails).
   Recolor ONLY badges carrying that exact inline pink to the approved #C2185B
   (white text = 5.9:1, AA). Attribute selector keeps every other #eebfc0 brand
   use (cookie button, Hustle popup, Elementor promos) untouched. */
.la-custom-badge[style*="eebfc0"] {
	background-color: #C2185B !important;
}


/* ============================================================
   M8.6b - Remove Elementor entrance (scroll-reveal) animations
   Reason: fadeInUp/Down translateY renders text blurry mid-motion
   and the JS trigger is delayed -> late pop-in. User approved
   full removal. CLS-safe: .elementor-invisible already reserves
   its layout box (visibility:hidden), so forcing visible does not
   shift layout.
   ============================================================ */
.elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}
.elementor-element.animated,
.elementor-widget.animated {
    animation: none !important;
    transform: none !important;
}


/* ============================================================
   M8.6c - GPU-composited marquee replacing deprecated <marquee>
   Native <marquee> is CPU/layout-driven and stutters (esp mobile).
   Child JS swaps each <marquee> for .km-marquee > track(group+clone);
   here we scroll it via transform (60fps). Same height -> CLS-safe.
   =========================================================== */
.km-marquee{overflow:hidden;width:100%;white-space:nowrap;display:block;}
.km-marquee__track{display:inline-flex;flex-wrap:nowrap;width:max-content;
    will-change:transform;animation:km-marquee-scroll 28s linear infinite;}
.km-marquee__group{display:inline-flex;align-items:center;flex:0 0 auto;
    padding-right:2.5rem;}
.km-marquee__group > *{white-space:nowrap;}
@keyframes km-marquee-scroll{from{transform:translateX(0);}
    to{transform:translateX(-50%);}}
.km-marquee:hover .km-marquee__track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.km-marquee__track{animation:none;}}


/* ============================================================
   M8.6a - CookieYes anti-flicker (pairs with wp_head script in
   functions.php). Only matches when html.km-cky-consented is set
   (a CookieYes consent cookie is present) -> hides the banner
   before first paint so it does not flash-then-vanish. Fresh
   visitors (no cookie, no class) are unaffected and always see it.
   ============================================================ */
html.km-cky-consented .cky-consent-container,
html.km-cky-consented .cky-overlay { display: none !important; }

/* ============================================================
   M8.4-HERO-SMOOTH: the home hero is 90vh on BOTH the section
   (.elementor-element-f2ffc5d min-height) and each slide
   (.elementor-element-451a7e1 .slick-slide height) - post-1281.css,
   no media query. On mobile the URL-bar show/hide during scroll
   changes the viewport -> background-size:cover rescales = the
   "weird resize" (worst in in-app browsers where vh is dynamic).
   Pin both to the STABLE small-viewport unit (svh) so height can't
   change on scroll; vh kept as fallback for old browsers. Height
   stays ~the same, it just stops moving -> CLS-safe.
   ============================================================ */
@media (max-width: 1024px) {
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .slick-slide {
    height: 90vh;
    height: 90svh;
  }
  body .elementor-1281 .elementor-element.elementor-element-f2ffc5d {
    min-height: 90vh;
    min-height: 90svh;
  }
}
/* === /M8.4-HERO-SMOOTH === */

/* ============================================================
   M8.4-HERO-PAINT (mobile): paint the first hero slide INSTANTLY as
   the LCP + keep it steady. LaStudio suppresses Elementor bgs until
   body gets `body-completely-loaded` (its interaction-delayed JS), so
   the preloaded hero bytes arrive early (~1.5s) but the paint waits.
   During that pre-load window ONLY (body:not(.body-completely-loaded),
   so slick's fade is untouched afterwards) force the first slide's real
   bg + full opacity so it paints as soon as the preload lands. Also
   kill the 20s Ken Burns zoom/transform on mobile = rock-steady image.
   Root-relative url = domain-agnostic (uploads/.htaccess -> webp).
   Desktop unchanged.
   ============================================================ */
@media (max-width: 1024px) {
  body:not(.body-completely-loaded) .elementor-1281 .elementor-element.elementor-element-451a7e1 .elementor-repeater-item-79002b0 .slick-slide-bg {
    background-image: url('/wp-content/uploads/2024/10/Fond-Gris-La-Combinaison-KIMEL-SPORT.jpg') !important;
  }
  body:not(.body-completely-loaded) .elementor-1281 .elementor-element.elementor-element-451a7e1 .elementor-repeater-item-79002b0,
  body:not(.body-completely-loaded) .elementor-1281 .elementor-element.elementor-element-451a7e1 .elementor-repeater-item-79002b0 .slick-slide-bg,
  body:not(.body-completely-loaded) .elementor-1281 .elementor-element.elementor-element-451a7e1 .elementor-widget-container {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .slick-slide .slick-slide-bg {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}
/* === /M8.4-HERO-PAINT === */

/* ============================================================
   M8.4-HERO-STATIC (mobile): with autoplay permanently stopped by the
   child JS (functions.php km-hero-static), keep ONLY the first slide's
   background painted and promote it to its own GPU layer so scrolling
   never re-rasterises a 6-layer cross-fade. Persists past LaStudio's
   body-completely-loaded (M8.4-HERO-PAINT only covered the pre-load
   window). Desktop keeps the full rotating carousel (<=1024px only).
   ============================================================ */
@media (max-width: 1024px) {
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .slick-slide-bg {
    opacity: 0 !important;
  }
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .elementor-repeater-item-79002b0 .slick-slide-bg {
    opacity: 1 !important;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
/* === /M8.4-HERO-STATIC === */

/* ============================================================
   M8.4-TOPBAR-RESERVE (mobile): the LA Header Builder top bar
   (.lahb-topbar-area - the "LIVRAISON OFFERTE..." strip) finalises its
   height ~3s into load and pushes the logo row (.lahb-row1-area) DOWN
   ~33px = the "KIMEL logo shifts on load" the user reported (measured
   on a real 390px viewport: the only layout shift on the page). Reserve
   the bar's settled height (53px) from first paint so the logo row can
   never move. Height-only -> CLS-safe. Scoped to the mobile header view.
   ============================================================ */
@media (max-width: 1024px) {
  body header .lahb-mobiles-view .lahb-topbar-area,
  body .lahb-screen-view.lahb-mobiles-view .lahb-topbar-area {
    min-height: 53px;
  }
}
/* === /M8.4-TOPBAR-RESERVE === */

/* ============================================================
   M8.4-HERO-ARATIO (phones): the hero height was viewport-relative
   (90svh/90vh in M8.4-HERO-SMOOTH), so iOS collapsing the URL bar
   during scroll changed the box height and the background-size:cover
   image rescaled = the "zoom on scroll" the user disliked. Derive the
   height from WIDTH via aspect-ratio (width does not change on scroll)
   so the box is rock-stable and the image never rescales. 39/76 keeps
   the current ~90svh height at phone widths (390px -> 760px) = no
   visual or CLS change. Supersedes the svh rules on phones; tablets
   (>767px) and desktop keep the carousel + prior sizing untouched.
   Verified with a real-mobile CDP test: hero height stayed 760px while
   the emulated viewport height swept 760->940px (before: 684->846px).
   ============================================================ */
@media (max-width: 767px) {
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .elementor-slides,
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .slick-list,
  body .elementor-1281 .elementor-element.elementor-element-451a7e1 .slick-slide,
  body .elementor-1281 .elementor-element.elementor-element-f2ffc5d {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 39 / 76;
  }
}
/* === /M8.4-HERO-ARATIO === */

/* === M8.7 PRODUCT-SWATCH-FIX: LaStudio sizes image-backed color swatches to the shop_catalog dims (600x9999) inline; nothing constrains single-product color swatches -> giant blocks. Pin to 50x50. === */
.single-product .variations_form .swatch-wrapper.la-swatch-item-style-square:not(.swatch-only-label) .swatch-anchor,
.single-product .swatch-control .swatch-wrapper.la-swatch-item-style-square:not(.swatch-only-label) .swatch-anchor{
width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
max-width:50px!important;max-height:50px!important;line-height:50px!important;overflow:hidden!important;
background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
}
.single-product .variations_form .swatch-wrapper.la-swatch-item-style-square:not(.swatch-only-label) .swatch-anchor img,
.single-product .swatch-control .swatch-wrapper.la-swatch-item-style-square:not(.swatch-only-label) .swatch-anchor img{
width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important;object-fit:cover!important;
}
/* === /M8.7 PRODUCT-SWATCH-FIX === */

/* === M8.7b PRODUCT-POLISH: hide leaking swatch hover-label + kill gallery load-twitch === */
.single-product .swatch-anchor-label{display:none!important;}
.single-product .woocommerce-product-gallery__image img{width:100%!important;height:auto!important;max-width:100%!important;}
.single-product .woocommerce-product-gallery__wrapper:not(.slick-initialized){overflow:hidden!important;max-height:150vw!important;}
/* === /M8.7b PRODUCT-POLISH === */

/* M8.8 loop/carousel swatch-label leak (iOS sticky-hover, home nouveautes tiles) */
.product_item .swatch-anchor-label,
.la-swatch-control .swatch-anchor-label{display:none!important;}

/* M8.8b color-swatch NAME text leaks over image on iOS (Seamless Sculpt Black/Brown/Clay/Ochre): clip the text-indent replacement */
.product_item .swatch-wrapper:not(.swatch-only-label) .swatch-anchor{overflow:hidden!important;text-indent:-9999px!important;white-space:nowrap!important;}

/* ============================================================
   M8.10 - Restore the theme's marquee styling on the swapped .km-marquee.
   The native `marquee { text-transform:uppercase; font-weight:700; font-size:1.6rem }`
   and `marquee span { color:#000; padding:0 5em 0 0 }` (+ mobile `1rem`) rules stop
   matching once the spans are re-parented out of <marquee>, so the announcement bar
   lost its uppercase/bold/size. Re-apply the SAME values to .km-marquee content so it
   is correctly sized + styled from first paint (desktop 1.6rem, mobile 1rem).
   ============================================================ */
.km-marquee__group{ text-transform:uppercase; font-weight:700; font-size:1.6rem; color:#000; }
.km-marquee__group > span{ padding:0 5em 0 0; }
@media (max-width:768px){ .km-marquee__group{ font-size:1rem; } }

/* M8.11 - Promo hero overlay legibility: the -40% slide heading renders dark over
   the dark promo photo; force it white + text-shadow so heading/description read
   cleanly over the image (scoped to the 2 promo slides 79002b0 + de40b21). */
.elementor-element-451a7e1 .elementor-repeater-item-79002b0 .elementor-slide-heading,
.elementor-element-451a7e1 .elementor-repeater-item-de40b21 .elementor-slide-heading{ color:#fff !important; }
.elementor-element-451a7e1 .elementor-repeater-item-79002b0 .elementor-slide-heading,
.elementor-element-451a7e1 .elementor-repeater-item-de40b21 .elementor-slide-heading,
.elementor-element-451a7e1 .elementor-repeater-item-79002b0 .elementor-slide-description,
.elementor-element-451a7e1 .elementor-repeater-item-de40b21 .elementor-slide-description{ text-shadow:0 2px 14px rgba(0,0,0,.55); }