/* Add custom CSS styles below */




/* Search visibility and persistent header — 2026-10-17 */
header.store-header {
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
}




header.store-header [data-testid="store-header-search"] .s-search-input {
  color: #fff !important;
  font-weight: 700 !important;
}




header.store-header [data-testid="store-header-search"] .s-search-input::placeholder {
  color: #fff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}




/* Keep the existing navigation below the persistent search bar. */
header.store-header #mainnav .inner {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}


/* CLS-02 — 2026-10-18: home list reservation on phones only.
   The 15-item home grid grows naturally beyond this minimum. */
@media (max-width: 767px) {
  body.index salla-products-list[data-testid="store-home-latest-products-list"] {
    display: block;
    min-height: 60rem;
  }
}




/* CLS-03 — 2026-10-18: phone pilot for Dar Al Maaref only. */
@media (max-width: 767px) {
  body.brands-single salla-products-list[data-testid="store-brand-products"][source-value="2024741047"] {
    display: block;
    min-height: 40rem;
  }
}
/* E1: category list reserve pilot — 2026-10-18 */
body.product-index salla-products-list[data-testid="store-products-list"][source-value="463186959"] { display:block; min-height:40rem; }
@media(max-width:767px) { body.product-index salla-products-list[data-testid="store-products-list"][source-value="463186959"] { min-height:60rem; } }

/* E1b: verified 10-book brand reserve pilot */
body.brands-single salla-products-list[data-testid="store-brand-products"][source-value="559213022"] { display:block; min-height:40rem; }

/* E2-approved candidate: phone galleries with 750x1000 first image only */
@media(max-width:767px) {
body.product-single salla-slider[data-testid="store-product-image-slider"]:has(.homeslider__slide:first-child img[src*="-750x1000-"]) { display:block; }
body.product-single salla-slider[data-testid="store-product-image-slider"]:has(.homeslider__slide:first-child img[src*="-750x1000-"]) > .s-slider-container { aspect-ratio:3/4; height:auto !important; }
body.product-single salla-slider[data-testid="store-product-image-slider"]:has(.homeslider__slide:first-child img[src*="-750x1000-"]) > .s-slider-container > .swiper-wrapper { height:100% !important; }
body.product-single salla-slider[data-testid="store-product-image-slider"]:has(.homeslider__slide:first-child img[src*="-750x1000-"]) > .s-slider-container .homeslider__slide { height:100% !important; display:flex; align-items:center; justify-content:center; }
body.product-single salla-slider[data-testid="store-product-image-slider"]:has(.homeslider__slide:first-child img[src*="-750x1000-"]) > .s-slider-container .homeslider__slide img { width:100%; height:100% !important; object-fit:contain !important; }
body.product-single salla-slider[data-testid="store-product-image-slider"]:has(.homeslider__slide:first-child img[src*="-750x1000-"]) .s-slider-thumbs-container { min-height:80px; }
}

/* NAV-01 — 2026-10-18: desktop-only scrolling for Nafais. */
@media (min-width: 1024px) {
  #mainnav li.root-level[id="1519816855"] > .sub-menu {
    max-height: calc(100vh - 14rem) !important;
    max-height: calc(100dvh - 14rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}


/* NAV-02 — 2026-10-18: desktop More panel; one-second close grace. */
@media (min-width: 1024px) {
  #mainnav #more-menu-dropdown { position: relative !important; }
  #mainnav #more-menu-dropdown > .sub-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 28rem !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - 10rem) !important;
    max-height: calc(100dvh - 10rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0s linear 1s, visibility 0s linear 1s !important;
  }
  #mainnav #more-menu-dropdown:hover > .sub-menu,
  #mainnav #more-menu-dropdown:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0s !important;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul {
    display: block !important;
    position: relative !important;
    width: 50% !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul > li {
    position: static !important;
    width: 100% !important;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul > li > a {
    white-space: normal !important;
    color: #374151 !important;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul > li > .sub-menu {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 10rem) !important;
    max-height: calc(100dvh - 10rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    transform: none !important;
    background: #fff;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0s linear 1s, visibility 0s linear 1s !important;
    z-index: 1;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul > li:hover > .sub-menu,
  #mainnav #more-menu-dropdown > .sub-menu > ul > li:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0s !important;
    z-index: 3;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul > li > .sub-menu a {
    white-space: normal !important;
    color: #374151 !important;
  }
  #mainnav #more-menu-dropdown > .sub-menu a:hover,
  #mainnav #more-menu-dropdown > .sub-menu a:focus-visible {
    color: var(--color-primary, #b91c1c) !important;
    background-color: #f9fafb;
  }
  #mainnav #more-menu-dropdown > .sub-menu > ul:has(> li:hover) > li:not(:hover) > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transition-delay: 0s !important;
  }
  #mainnav .main-menu:has(> li.root-level:not(#more-menu-dropdown):hover) #more-menu-dropdown > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transition-delay: 0s !important;
  }
}