/* Only targets the main top slider, leaving product cards alone */
/* Targeted Hero Fix for Lahif World */
/* 1. MOBILE ONLY - Stabilize the 1024x1536 Hero */
/* MOBILE HERO - FINAL CLS LOCK */
/* MOBILE HERO - ROLLBACK TO STABLE FIXED HEIGHT */
@media (max-width: 768px) {
  section.advanced-slider,
  .advanced-slider,
  section.advanced-slider.auto-height,
  section.advanced-slider[style*="--mobileSliderHeight"] {
    display: block !important;
    width: calc(100% - 20px) !important;
    margin: 8px auto 14px !important;

    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
    aspect-ratio: auto !important;
    --mobileSliderHeight: 350px !important;

    overflow: hidden !important;
    background: var(--bg-secondary) !important;
  }

  section.advanced-slider .swiper,
  section.advanced-slider .swiper-container,
  section.advanced-slider .swiper-wrapper,
  section.advanced-slider .swiper-slide {
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
  }

  section.advanced-slider img,
  .advanced-slider__slide img {
    width: 100% !important;
    height: 350px !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* 2. DESKTOP ONLY - Preserve the high-score layout */
@media (min-width: 769px) {
  .advanced-slider {
    /* Lock the Desktop ratio (approx 16:9 or your specific banner size) */
    aspect-ratio: 1672 / 941 !important; 
    height: auto !important;
  }
}

:root {
  /* ===================================================== */
  /* BRAND PALETTE                                         */
  /* ===================================================== */

  /* Main page backgrounds */
  --bg-primary: #FBF8F3;      /* Changed to match secondary/header */
  --bg-secondary: #FBF8F3;    /* soft cream cards/sections */
  --bg-accent: #E5D6B8;       /* muted beige accent */
  --bg-footer: #2A1719;       /* The deep burgundy-black anchor */




  
  /* Brand accent colors */
  --color-primary: #5F2E31;        /* burgundy brand color */
  --color-primary-hover: #523033;  /* darker burgundy hover */
  --color-secondary: #B1935F;      /* muted luxury gold */
  --color-secondary-hover: #9C7F4E;

  /* Text colors */
  --text-primary: #23191B;     /* luxury burgundy-black, softer than pure black */
  --text-secondary: #554D47;   /* warm grey-brown */
  --text-muted: #857B72;
  --text-on-dark: #FFFFFF;
  --text-on-light: #23191B;

  /* Header colors */
  --header-bg: #FBF8F3;       /* Unified cream canvas */
  --header-text: #23191B;      /* luxury dark text */

  /* Top language/currency strip colors */
  --top-strip-bg: #2A1719; 
  --top-strip-text: #F7EFE6;
  --top-strip-hover: #D9BE82;    /* soft gold hover/accent */
  --top-strip-border: rgba(177, 147, 95, 0.45); /* Muted gold shimmer */
  --top-strip-separator: rgba(247, 239, 230, 0.24);



  
  /* Language selector highlight */
  --language-pill-bg: rgba(247, 239, 230, 0.012); /* Very subtle ivory tint */
  --language-pill-border: rgba(217, 190, 130, 0.6); /* Clearer gold edge */
  --language-pill-hover-bg: rgba(217, 190, 130, 0.18);

  /* Footer colors */
  --footer-heading: #F7EFE6;  /* Warm ivory */
  --footer-text: #D8CCBC;     /* Muted beige */
  --footer-link: #D9BE82;     /* Soft gold */
  
  /* Borders / radius / shadows */
  --border-color: #D8CCBC;
  --border-soft: rgba(95, 46, 49, 0.10);

  --radius: 12px;

  --shadow-soft: 0 6px 18px rgba(43, 38, 35, 0.05);
  --shadow-hover: 0 10px 24px rgba(95, 46, 49, 0.10);
}

/* ===================================================== */
/* TOP LANGUAGE / CURRENCY STRIP                         */
/* Deep burgundy-black strip + clearer language selector */
/* ===================================================== */

.top-navbar,
.s-header__top,
.s-header__topbar,
.s-header__top-bar,
.s-header-top,
.store-header__top,
header .top-bar {
  background: var(--top-strip-bg) !important;
  color: var(--top-strip-text) !important;
  border-bottom: 1px solid var(--top-strip-border) !important;
}

/* Text and icons inside top strip */
.top-navbar *,
.s-header__top *,
.s-header__topbar *,
.s-header__top-bar *,
.s-header-top *,
.store-header__top *,
header .top-bar * {
  color: var(--top-strip-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Top strip links */
.top-navbar a,
.s-header__top a,
.s-header__topbar a,
.s-header__top-bar a,
.s-header-top a,
.store-header__top a,
header .top-bar a {
  color: var(--top-strip-text) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  opacity: 0.94 !important;
}

/* Top strip hover/focus */
.top-navbar a:hover,
.top-navbar a:focus,
.s-header__top a:hover,
.s-header__top a:focus,
.s-header__topbar a:hover,
.s-header__topbar a:focus,
.s-header__top-bar a:hover,
.s-header__top-bar a:focus,
.s-header-top a:hover,
.s-header-top a:focus,
.store-header__top a:hover,
.store-header__top a:focus,
header .top-bar a:hover,
header .top-bar a:focus {
  color: var(--top-strip-hover) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Separators inside top strip */
.top-navbar .border,
.s-header__top .border,
.s-header__topbar .border,
.s-header__top-bar .border,
.s-header-top .border,
.store-header__top .border,
header .top-bar .border {
  border-color: var(--top-strip-separator) !important;
}

/* Desktop-only top strip refinement */
@media (min-width: 1024px) {
  .top-navbar a,
  .top-navbar span,
  .s-header__top a,
  .s-header__top span,
  .s-header__topbar a,
  .s-header__topbar span,
  .s-header__top-bar a,
  .s-header__top-bar span,
  .s-header-top a,
  .s-header-top span,
  .store-header__top a,
  .store-header__top span,
  header .top-bar a,
  header .top-bar span {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  .top-navbar svg,
  .s-header__top svg,
  .s-header__topbar svg,
  .s-header__top-bar svg,
  .s-header-top svg,
  .store-header__top svg,
  header .top-bar svg {
    width: 19px !important;
    height: 19px !important;
    opacity: 0.92 !important;
  }
}


.s-block.s-block--bundle-brand-essence,
.s-block.s-block--bundle-brand-essence > * {
  background:
    radial-gradient(circle at 85% 20%, rgba(177, 147, 95, 0.22) 0%, transparent 32%),
    radial-gradient(circle at 12% 75%, rgba(95, 46, 49, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, #FBF8F3 0%, #F0EAE0 55%, #E5D6B8 100%) !important;
}

/* ===================================================== */
/* LANGUAGE SELECTOR - FINAL & DONE                      */
/* ===================================================== */
button[aria-label="Change Language"] {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important; 
  border: 1.5px solid rgba(217, 190, 130, 0.8) !important; 
  background: rgba(247, 239, 230, 0.08) !important;
  border-radius: 999px !important;
  padding: 4px 18px !important; 
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

button[aria-label="Change Language"] * {
  display: flex !important;
  align-items: center !important;
}

html[lang*="ar"] button[aria-label="Change Language"] .shrink-0::after,
html[lang*="en"] button[aria-label="Change Language"] .shrink-0::after {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(217, 190, 130, 0.25) !important;
  border: 1px solid rgba(217, 190, 130, 0.5) !important;
  color: #D9BE82 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-inline-start: 14px !important; 
  padding: 0 8px !important;
  border-radius: 999px !important;
  height: 20px !important;
  min-width: 32px !important;
  unicode-bidi: isolate !important;
}

html[lang*="ar"] button[aria-label="Change Language"] .shrink-0::after { content: "EN" !important; }
html[lang*="en"] button[aria-label="Change Language"] .shrink-0::after { content: "AR" !important; }

button[aria-label="Change Language"]:hover {
  background: rgba(217, 190, 130, 0.18) !important;
  border-color: #D9BE82 !important;
  box-shadow: 0 0 10px rgba(217, 190, 130, 0.25) !important;
}

/* Fix for SAR/Currency visibility */
.shrink-0 { display: inline-block !important; min-width: 30px !important; }
/* ===================================================== */
/* DESKTOP MENU POLISH                                   */
/* ===================================================== */

@media (min-width: 1024px) {
  .s-header,
  .s-header__navbar,
  .main-menu,
  .main-nav {
    background: var(--header-bg) !important;
  }

  .s-header a,
  .s-header__navbar a,
  .main-menu a,
  .main-nav a,
  .s-header nav a {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    color: var(--header-text) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .s-header a:hover,
  .s-header__navbar a:hover,
  .main-menu a:hover,
  .main-nav a:hover,
  .s-header nav a:hover {
    color: var(--color-primary) !important;
  }

  .s-header a.active,
  .s-header__navbar a.active,
  .main-menu a.active,
  .main-nav a.active,
  .s-header nav a.active {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
  }

  .s-header a::after,
  .s-header__navbar a::after,
  .main-menu a::after,
  .main-nav a::after,
  .s-header nav a::after {
    border-color: var(--color-secondary) !important;
  }
}

/* Move SAR fix outside root to function correctly */
.shrink-0 {
  display: inline-block !important;
  min-width: 30px !important;
}

/* ===================================================== */
/* GLOBAL PAGE BACKGROUND                                */
/* ===================================================== */

html,
body {
  background: var(--bg-primary) !important;
}

/* ===================================================== */
/* CARD FIXES                                            */
/* ===================================================== */

.card__content > *,
.card-information > *,
.card-information__wrapper > *,
.product-card__info > *,
.product-item__info > *,
.card__information > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.products-listing .grid,
.products-listing .s-products-slider__items,
.s-block-products .grid,
.s-products-list .grid {
  align-items: stretch !important;
}

.grid__item,
.card-wrapper,
.product-card,
.product-item,
.card {
  height: 100% !important;
}

.card,
.product-card,
.product-item {
  display: flex !important;
  flex-direction: column !important;
}

.card__content,
.card-information,
.card-information__wrapper,
.product-card__info,
.product-item__info,
.card__information {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
}

.price,
.product-form,
.product-form__buttons,
.product-form__submit,
.s-button-element, 
.s-product-card__button { /* Added these specific button classes */
  margin-top: auto !important;
}

.card,
.product-card,
.product-item,
.card-wrapper {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  background: var(--bg-secondary) !important;
  box-shadow: var(--shadow-soft) !important;
}

.card:hover,
.product-card:hover,
.product-item:hover,
.card-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
}

/* SURGICAL LOCK: Kills the 0.171 shift for Browse Categories */
.s-block-header {
  display: block !important;
  height: 60px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

.s-block-header h2,
h2.text-3xl {
  line-height: 40px !important;
  margin: 0 !important;
  font-family: inherit !important;
}

/* ===================================================== */
/* MOBILE: KEEP ADD TO CART BUTTON IN SAME POSITION      */
/* ===================================================== */

@media (max-width: 768px) {
  .grid__item,
  .card-wrapper,
  .product-card,
  .product-item,
  .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .card__content,
  .card-information,
  .card-information__wrapper,
  .product-card__info,
  .product-item__info,
  .card__information {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .card__heading,
  .product-card__title,
  .product-item__title,
  .card-information__text {
    min-height: 44px !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .price,
  .product-price,
  .card__price {
    min-height: 24px !important;
  }

  .product-form,
  .product-form__buttons,
  .product-form__submit,
  .s-button-element,
  .add-to-cart-btn {
    margin-top: auto !important;
  }

  .product-form__submit,
  .s-button-element,
  .add-to-cart-btn {
    width: 100% !important;
    min-height: 44px !important;
  }

 
}

/* ===================================================== */
/* PRODUCT IMAGE FIX                                     */
/* ===================================================== */

.card__image,
.product-card__image,
.product-item__image,
.s-product-card-image,
figure.card__media {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--bg-secondary) !important;
}

.card__image img,
.product-card__image img,
.product-item__image img,
.s-product-card-image img,
figure.card__media img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}



/* ===================================================== */
/* REGULAR BANNERS                                       */
/* ===================================================== */

.s-block-banner {
  width: calc(100% - 24px) !important;
  margin: 20px auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;

  aspect-ratio: 4 / 1 !important;
  height: auto !important;
  min-height: 0 !important;

  background: var(--bg-secondary) !important;
}

.s-block-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ===================================================== */
/* BUTTON / INTERACTION POLISH                           */
/* ===================================================== */

button.s-button-element,
a.s-button-element {
  border-radius: 10px !important;
}

/* ===================================================== */
/* SECTION & FOOTER: BRANDING PRESERVED                  */
/* ===================================================== */

section,
.s-block,
.s-block-products,
.s-block-offers,
.s-block-slider {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

footer,
[role="contentinfo"],
.s-footer,
.footer,
[class*="footer-wrapper"],
[class*="footer-container"] {
  background-color: var(--bg-footer) !important;
  position: relative !important;
  margin-top: -2px !important;
  display: block !important;
}

footer *,
[role="contentinfo"] * {
  background-color: transparent !important;
}

footer,
footer p,
footer span,
footer li {
  color: var(--footer-text) !important;
}

footer a {
  color: var(--footer-link) !important;
}

footer a svg {
  fill: currentColor !important;
}

[class*="shape"],
[class*="curve"],
[class*="wave"],
[class*="divider"] {
  display: none !important;
}

/* ===================================================== */
/* FINAL STABILITY BOLTS                                 */
/* ===================================================== */

/* Reserves 3 lines for the brand description */
p.mt-2.text-lg.leading-8 {
  display: block !important;
  min-height: 84px !important;
  max-height: 84px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  font-family: inherit !important;
}

/* Prevent icon-loading jumps */
.s-icon,
[class^="salla-icon-"],
[class*=" salla-icon-"] {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
}

/* ===================================================== */
/* CLS STABILIZATION PATCH                               */
/* ===================================================== */

/* 1. Lock the Top Bar Height to prevent vertical pushing */
.top-navbar,
.s-header__top,
.s-header__topbar,
header .top-bar {
  min-height: 42px !important; 
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* 2. Lock Header Height on Mobile to prevent growth */
@media (max-width: 768px) {
  .s-header,
  .site-header {
    min-height: 80px !important; /* Changed 'height' to 'min-height' */
    overflow: visible !important; /* Allows dropdowns to still work */
  }
}

/* 3. Prevent Language Button from wrapping and shifting layout */
button[aria-label="Change Language"] {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-height: 28px !important; /* Reserve vertical space */
}

/* 4. Ensure the main container doesn't margin-collapse with the header */
main, 
#main, 
.main-content {
  display: block !important;
}

/* 5. Bulletproof Mobile Banners against rendering shifts */
.s-block-banner {
  height: auto !important;
  contain: layout paint !important;
}

/* ===================================================== */
/* MOBILE BUTTON ALIGNMENT (THE EQUALIZER)               */
/* ===================================================== */
@media (max-width: 768px) {
  /* Force titles to occupy exactly 3 lines of space */
  .card__heading, 
  .product-card__title, 
  .product-item__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 3.6em !important; /* This creates the "invisible" empty space for short titles */
    margin-bottom: 8px !important;
  }

  /* Ensure the container pushes the button to the absolute bottom */
  .product-card__info, 
  .product-item__info, 
  .card__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
  }
}

/* ===================================================== */
/* BRANDED SOCIAL ICONS (Gold & Luxury Hover)            */
/* ===================================================== */

/* Targets the icons in the footer and makes them Gold */
footer a svg, 
.s-footer a svg,
.footer-social a svg {
  fill: #B1935F !important; /* Your brand gold */
  width: 22px !important;
  height: 22px !important;
  transition: all 0.3s ease !important;
}

/* Interaction: Shines white and lifts up on hover */
footer a:hover svg, 
.s-footer a:hover svg,
.footer-social a:hover svg {
  fill: #F7EFE6 !important; /* Shines to your ivory/white color */
  transform: translateY(-3px) !important; /* Tiny premium lift */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
}


/* 1. MAIN CONTENT & MOBILE OVERFLOW (Fixes horizontal wiggle) */
main, .main-content, #app {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: block;
}

main img {
    max-width: 100%;
    height: auto;
}

/* 2. TBT & RENDER OPTIMIZATION (Fixes heavy blocking time) */
/* Fixes heavy blocking time without killing LCP */
.s-footer, 
section:nth-of-type(n+3) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* Ensure the top of the page is NEVER delayed */
.s-header, 
section:first-of-type, 
section:nth-of-type(2) {
    content-visibility: visible !important;
    contain: none !important;
}
 

/* Premium balanced logo size */
img.logo-normal,
footer img.img-fluid {
  width: 140px !important;
  height: 130px !important;
  object-fit: contain !important;
}

footer img.img-fluid {
  max-width: 140px !important;
  max-height: 130px !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}



/* ===================================================== */
/* CURRENCY BUTTON CLS FINAL FIX                         */
/* Prevent currency selector from growing/pushing header */
/* ===================================================== */

button[aria-label="Change Currency"] {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 64px !important;
  min-height: 28px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

button[aria-label="Change Currency"] * {
  white-space: nowrap !important;
  
}

/* ===================================================== */
/* FINAL MOBILE CLS LOCK - LANGUAGE / CURRENCY SELECTORS */
/* Put this at the VERY END of custom CSS                */
/* ===================================================== */

@media (max-width: 768px) {
  /*
    Lock the top strip/header area so language/currency loading
    cannot push content down.
  */
  .top-navbar,
  .s-header__top,
  .s-header__topbar,
  .s-header__top-bar,
  .s-header-top,
  .store-header__top,
  header .top-bar {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
    Prevent inner wrappers from growing vertically or wrapping.
  */
  .top-navbar > *,
  .s-header__top > *,
  .s-header__topbar > *,
  .s-header__top-bar > *,
  .s-header-top > *,
  .store-header__top > *,
  header .top-bar > * {
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /*
    Hard-reserve stable space for language selector.
    This prevents EN/AR badge and icon loading from changing width.
  */
  button[aria-label="Change Language"] {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    flex: 0 0 118px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
    Hard-reserve stable space for currency selector.
    82px covers SAR, USD, KWD, AED, OMR, QAR, BHD, CAD safely.
  */
  button[aria-label="Change Currency"] {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    flex: 0 0 82px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
    Stop text/icon children from expanding the buttons.
  */
  button[aria-label="Change Language"] *,
  button[aria-label="Change Currency"] * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /*
    Keep the EN/AR badge stable.
  */
  html[lang*="ar"] button[aria-label="Change Language"] .shrink-0::after,
  html[lang*="en"] button[aria-label="Change Language"] .shrink-0::after {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin-inline-start: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 20px !important;
  }

  /*
    Your existing global .shrink-0 min-width can still affect layout.
    On mobile, restrict it only inside these selector buttons.
  */
  button[aria-label="Change Language"] .shrink-0,
  button[aria-label="Change Currency"] .shrink-0 {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /*
    Prevent late SVG/icon sizing from causing micro-shifts.
  */
  button[aria-label="Change Language"] svg,
  button[aria-label="Change Currency"] svg {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    display: block !important;
  }
}

/* ===================================================== */
/* FINAL MOBILE CLS PATCH - ROOT CAUSES ONLY             */
/* Desktop untouched                                     */
/* ===================================================== */

@media (max-width: 768px) {

  /* 1. Disable non-composited animations causing CLS/jank */
  section.brand-essence .glass-decoration,
  section.s-block--bundle-brand-essence .glass-decoration,
  .brand-essence .glass-decoration,
  .glass-decoration {
    animation: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    border-radius: 24px !important;
    will-change: opacity, transform !important;
  }

  main > section#best-offers-5-slider a.btn,
  section#best-offers-5-slider a.btn,
  #best-offers-5-slider .btn {
    animation: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease !important;
    will-change: transform, opacity !important;
  }

  /* 2. Prevent above-the-fold lazy rendering shifts */
  main,
  main > section,
  section.brand-essence,
  section.s-block--bundle-brand-essence,
  section.s-block--square-links,
  section#best-offers-5-slider {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  /* 3. Stabilize the brand/shipping section above categories */
  section.brand-essence,
  section.s-block--bundle-brand-essence,
  .s-block.s-block--bundle-brand-essence {
    min-height: 360px !important;
    overflow: hidden !important;
  }

  section.brand-essence p,
  section.s-block--bundle-brand-essence p,
  .s-block.s-block--bundle-brand-essence p,
  p.mt-2.text-lg.leading-8 {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    line-height: 24px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* 4. Stabilize square-links header/description only */
  section.s-block.s-block--square-links.square-links-3.force-center {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    overflow: visible !important;
  }

  section.s-block.s-block--square-links.square-links-3.force-center .s-block-header {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    display: block !important;
  }

  section.s-block.s-block--square-links.square-links-3.force-center .s-block-header h2,
  section.s-block.s-block--square-links.square-links-3.force-center h2.text-3xl {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  section.s-block.s-block--square-links.square-links-3.force-center .s-block-header p {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    line-height: 22px !important;
    margin: 8px 0 0 0 !important;
    overflow: hidden !important;
  }

  /*
    5. Reduce webfont swap height differences in the moving sections.
    This does not change images/grid.
  */
  section.brand-essence,
  section.brand-essence *,
  section.s-block--bundle-brand-essence,
  section.s-block--bundle-brand-essence *,
  section.s-block--square-links,
  section.s-block--square-links *,
  section#best-offers-5-slider,
  section#best-offers-5-slider * {
    font-synthesis: none !important;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

/* ===================================================== */
/* DESKTOP CLS PATCH - BRAND TEXT + HEADER BUTTONS       */
/* Mobile untouched                                      */
/* ===================================================== */

@media (min-width: 769px) {

  /* 1. Stop non-composited morph animation on desktop */
  section.brand-essence .glass-decoration,
  section.s-block--bundle-brand-essence .glass-decoration,
  .brand-essence .glass-decoration,
  .glass-decoration {
    animation: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    border-radius: 24px !important;
    will-change: transform, opacity !important;
  }

  /*
    2. Stop nav/category/topnav hover transitions from animating layout-affecting properties.
    Keep only transform/opacity/background-color.
  */
  .topnav-link-item,
  .main-menu a,
  .main-nav a,
  .s-header nav a,
  section.s-block--square-links a,
  section.square-links-3 a,
  button[aria-label="Change Language"],
  button[aria-label="Change Currency"] {
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease !important;
  }

  /* 3. Stabilize desktop header buttons: "العربية | ريال سعودي" */
  .header-buttons,
  div.header-buttons.flex.items-center {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .header-buttons button,
  .header-buttons a,
  button[aria-label="Change Language"],
  button[aria-label="Change Currency"] {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  button[aria-label="Change Language"] {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    flex: 0 0 132px !important;
  }

  button[aria-label="Change Currency"] {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    flex: 0 0 104px !important;
  }

  button[aria-label="Change Language"] *,
  button[aria-label="Change Currency"] * {
    white-space: nowrap !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  button[aria-label="Change Language"] svg,
  button[aria-label="Change Currency"] svg,
  .header-buttons svg,
  .header-buttons i {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    line-height: 18px !important;
    display: inline-block !important;
  }

  /*
    4. Stabilize the desktop brand/shipping block inside <main>.
    This is the 0.077 CLS item.
  */
  section.brand-essence,
  section.s-block--bundle-brand-essence,
  .s-block.s-block--bundle-brand-essence {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    min-height: 460px !important;
    overflow: hidden !important;
  }

  section.brand-essence p,
  section.s-block--bundle-brand-essence p,
  .s-block.s-block--bundle-brand-essence p,
  p.mt-2.text-lg.leading-8 {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    line-height: 32px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /*
    5. Reduce webfont swap movement in the exact CLS areas.
  */
  .header-buttons,
  .header-buttons *,
  section.brand-essence,
  section.brand-essence *,
  section.s-block--bundle-brand-essence,
  section.s-block--bundle-brand-essence * {
    font-synthesis: none !important;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }
}