/* ---------- Mobile header (<=1023px): 32 + 52 + 40 = 124px on home, 92px elsewhere ---------- */
@media (max-width: 1023px) {
  html:root:has([data-mobile-header]) { scroll-padding-top: 92px; }
  html:root [data-mobile-header] { --header-photo-height: 32px; margin-bottom: 40px; }
  html:root [data-mobile-header] #mainnav { min-height: 52px; height: 52px !important; }
  html:root [data-mobile-header] #mainnav > .inner,
  html:root [data-mobile-header] .header-main-row { height: 52px; }
  html:root [data-mobile-header] .mburger { width: 44px; height: 44px; }
  html:root [data-mobile-header] .mburger i { font-size: 23px; }
  /* Real size instead of scale(1.4) spilling out of its box; the art has built-in padding. */
  html:root [data-mobile-header] .navbar-brand { width: 48px; height: 48px; }
  html:root [data-mobile-header] .navbar-brand img { width: 48px; height: 48px; max-width: 48px; max-height: 48px; transform: none; }
  html:root [data-mobile-header] .header-search-toggle,
  html:root [data-mobile-header] .header-photo-toggle { width: 44px; height: 44px; font-size: 22px; }
  html:root [data-mobile-header] .header-photo-toggle { font-size: 21px; }
  html:root [data-mobile-header] salla-user-menu,
  html:root [data-mobile-header] .s-user-menu-login-btn,
  html:root [data-mobile-header] .s-user-menu-trigger { width: 44px; height: 44px; min-height: 44px; }
  html:root [data-mobile-header] .s-user-menu-login-btn svg { width: 22px; height: 22px; }
  html:root [data-mobile-header] .header-cart,
  html:root [data-mobile-header] .header-cart .s-cart-summary-wrapper { height: 44px; }
  html:root [data-mobile-header] .header-cart [slot="icon"] { font-size: 23px; }
  html:root body [data-mobile-header] .header-cart .s-cart-summary-total { color: #e5e7eb !important; font-weight: 500; }
  html:root [data-mobile-header] .header-cart .s-cart-summary-label { color: #e5e7eb; }
  html:root [data-mobile-header] .header-cart .s-cart-summary-count { background: #fff; color: #231f1e; }

  /* Offer bar: one 32px line; the code is plain bold text with its copy icon. */
  html:root [data-mobile-header] .header-promise__line { height: 32px; gap: 10px; justify-content: center; white-space: nowrap; }
  html:root [data-mobile-header] .header-promise__line--campaign .header-promise__text { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  html:root [data-mobile-header] .header-promise__code { height: 24px; padding: 0 2px; border: 0; background: transparent; color: #231f1e; }

  /* Category strip: part of the charcoal header, 40px, no tan, no red first item. */
  html:root [data-mobile-header] .categoryNav { height: 40px; background: var(--mainBG); color: #e5e7eb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  html:root [data-mobile-header] .categoryNavContainer,
  html:root [data-mobile-header] .categoryNavContainer > ul { height: 40px; }
  html:root [data-mobile-header] .categoryNavContainer > ul { gap: 4px; }
  html:root [data-mobile-header] .categoryNavContainer .categoryNavLink > a,
  html:root [data-mobile-header] #category-nav-toggle { height: 40px; font-size: 14px; color: #e5e7eb; gap: 6px; }
  html:root [data-mobile-header] .categoryNavContainer .categoryNavLink:first-child > a { color: #e5e7eb; }
  html:root [data-mobile-header] .categoryNavLink.dln-current > a { color: #fff !important; box-shadow: inset 0 -2px 0 #d4ac84; }

  /* عبايات opens all abayas in one tap once the JS has swapped the dropdown button for a link. */
  html.dln [data-mobile-header] .categoryNavLink.hasSub,
  html.dln [data-mobile-header] .categoryNavSubmenu { display: none !important; }

  /* The desktop search is moved into .header-actions by the JS; phones keep their icons. */
  html:root .header-actions > .darlena-search-row { display: none; }
}

/* ---------- Drawer (☰) ---------- */
@media (max-width: 1023px) {
  html:root .btn--close-sm.close-mobile-menu {
    left: 51px; top: 0; width: 48px; height: 50px; background: transparent !important; color: #231f1e !important; font-size: 20px;
  }
  html:root .header-mobile-utilities { padding: 0 !important; }
  html:root .header-mobile-utilities > * { margin-block: 0 !important; }
  html:root .header-mobile-utilities .btn--rounded-gray {
    display: flex; width: 100%; height: 56px; padding: 0 18px; justify-content: flex-start; align-items: center;
    border-radius: 0; background: transparent; border-top: 1px solid #e7e2dc; color: #231f1e; font-size: 14px; font-weight: 700;
  }
}

/* ---------- Desktop header (>=1024px): one 72px row, 64px when pinned ---------- */
@media (min-width: 1024px) {
  html:root .store-header .top-navbar { display: none !important; }
  html:root .main-nav-container { min-height: 72px !important; }
  html:root #mainnav > .inner, html:root .header-main-row { height: 72px; }
  html:root .header-actions { margin: 0 !important; gap: 8px; flex-shrink: 0; }
  /* If the menu is ever wider than its space, it gives way; search, account and cart never leave the screen. */
  html:root .header-brand-group { min-width: 0; }
  html:root #mainnav.fixed-pinned > .inner, html:root #mainnav.fixed-pinned .header-main-row { height: 64px; }
  html:root .navbar-brand img { max-height: 56px !important; height: 56px; width: auto; }
  html:root .fixed-pinned .navbar-brand img { max-height: 48px !important; height: 48px; }
  html:root custom-main-menu { min-height: 0; height: 100%; display: flex; align-items: stretch; }
  html:root custom-main-menu > nav { display: flex; align-items: stretch; }
  html:root .main-menu { padding: 0 !important; margin: 0 16px; height: 100%; flex-wrap: nowrap; align-items: stretch; }
  html:root .main-menu > li.root-level { display: flex !important; align-items: stretch; position: relative; }
  html:root .main-menu > li.root-level > .sub-menu { top: 100%; right: 0; left: auto; }
  html:root .main-menu > li.root-level > a {
    height: 100%; padding: 0 12px !important; display: flex; align-items: center; gap: 4px;
    color: #e5e7eb !important; font-size: 14px; font-weight: 500; white-space: nowrap;
  }
  html:root .main-menu > li.root-level > a:after { align-self: center !important; }
  html:root .main-menu > li.root-level > a:hover,
  html:root .main-menu > li.root-level.has-children:hover > a,
  html:root .main-menu > li.root-level.dln-current > a { color: #fff !important; box-shadow: inset 0 -2px 0 #d4ac84; }

  /* عبايات dropdown: three columns instead of one 798px column. */
  html:root .main-menu > li.root-level.has-children:not(#more-menu-dropdown) > .sub-menu { width: 640px !important; padding: 12px; }
  html:root .main-menu > li.root-level.has-children:not(#more-menu-dropdown) > .sub-menu > ul {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 36px; column-gap: 8px;
  }
  html:root .main-menu > li.root-level.has-children:not(#more-menu-dropdown) > .sub-menu > ul > li:first-child { grid-column: 1 / -1; }
  html:root .main-menu > li.root-level.has-children:not(#more-menu-dropdown) > .sub-menu > ul > li:first-child > a { font-weight: 600; }
  html:root .main-menu .sub-menu li > a { height: 36px; padding: 0 12px !important; font-size: 14px; color: #231f1e; border-radius: 6px; }

  /* Compact search pill with the camera inside (placed in the row by the JS). */
  html:root .header-actions > .darlena-search-row { position: relative; width: 240px; flex: none; min-height: 0; display: flex; }
  html:root .header-actions > .darlena-search-row .d-search-launch {
    width: 100%; height: 40px; min-height: 40px; padding: 0 14px 0 44px; border-radius: 20px;
    background: rgba(255, 255, 255, .08); color: #e5e7eb; font-size: 13px; overflow: hidden;
  }
  html:root .header-actions > .darlena-search-row .d-search-launch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:root .header-actions > .darlena-search-row .photo-search-trigger {
    position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; min-height: 32px; padding: 0;
    border: 0; border-radius: 16px; color: #e5e7eb;
  }
  html:root .header-actions > .darlena-search-row .photo-search-trigger span { display: none; }
  html:root .header-actions > .darlena-search-row .photo-search-trigger svg { width: 20px; height: 20px; }

  html:root .header-actions .s-user-menu-trigger { width: 44px; height: 44px; padding: 0; justify-content: center; }
  html:root body .header-actions .s-cart-summary-content,
  html:root body .header-actions .s-cart-summary-total { color: #e5e7eb !important; }
  html:root .header-actions .s-cart-summary-content { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
  html:root .header-actions .s-cart-summary-total { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; white-space: nowrap; }
  html:root .header-actions .header-btn__icon { border: 0; width: 32px; font-size: 22px; }
  html:root .header-actions .s-cart-summary-count { background: #fff; color: #231f1e; }

  /* Hero slider block (if used instead of the photos slider): same 1260x600 box as the banner below. */
  html:root .s-block--hero-slider { max-width: 1260px; margin: 16px auto 0 !important; height: 600px; border-radius: 8px; overflow: hidden; }
  html:root .s-block--hero-slider :is(salla-slider, .swiper, .swiper-wrapper, .swiper-slide, .hero-slide__media) { height: 600px !important; min-height: 0 !important; }
  html:root .s-block--hero-slider img { object-fit: cover !important; object-position: 50% 30%; }
}

/* ---------- Homepage banner (photos slider block) ----------
   Darlena banners are 1440x884. Phones show the whole banner, aligned with the category images;
   desktop shows 1260x600, trimming 59px from the top and 139px from the bottom of the art (checked on
   both 2026-09 banners: text, faces and the DARLENA label stay). One banner is a still image with no
   dots row; several use Salla's carousel, one banner per view. The box is reserved before the image
   loads, so nothing below it jumps (the block's <img> declares 1200x300). */
html:root .s-block--photos-slider { margin-top: 12px !important; }
html:root .s-block--photos-slider salla-slider { display: block; max-width: 1280px; margin-inline: auto; }
html:root .s-block--photos-slider .swiper { padding: 0 10px 28px !important; }
html:root .s-block--photos-slider .swiper:not(:has(.swiper-slide:nth-child(2))) { padding-bottom: 0 !important; }
html:root .s-block--photos-slider .swiper:not(:has(.swiper-slide:nth-child(2))) .swiper-pagination { display: none !important; }
html:root .s-block--photos-slider .swiper-wrapper:not(:has(.swiper-slide:nth-child(2))) { transform: none !important; }
/* Before Salla's slider starts, the slides sit in a plain block and would stack; keep them in one row. */
html:root .s-block--photos-slider salla-slider:not(.hydrated) [slot="items"] { display: flex; overflow: hidden; padding: 0 10px; }
html:root .s-block--photos-slider salla-slider:not(.hydrated) [slot="items"] > .swiper-slide { flex: 0 0 100%; }
html:root .s-block--photos-slider salla-slider:not(.hydrated) [slot="items"]:has(> .swiper-slide:nth-child(2)) { padding-bottom: 28px; }
html:root .s-block--photos-slider .swiper-slide { width: 100% !important; margin: 0 !important; padding: 0 !important; }
html:root .s-block--photos-slider .swiper-slide img {
  display: block; width: 100%; height: auto; aspect-ratio: 1440 / 884; object-fit: cover !important; border-radius: 8px;
}
@media (min-width: 1024px) {
  html:root .s-block--photos-slider { margin-top: 16px !important; }
  html:root .s-block--photos-slider .swiper-slide img { aspect-ratio: auto; height: 600px; object-position: 50% 30%; }
}

/* ---------- Account: outline icon instead of the blank avatar disc ---------- */
html:root .s-user-menu-trigger-avatar { display: none !important; }
html:root .s-user-menu-avatar-wrap {
  width: 24px; height: 24px; background: #e5e7eb;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.6 20.2c.9-3.7 3.9-5.8 7.4-5.8s6.5 2.1 7.4 5.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.6 20.2c.9-3.7 3.9-5.8 7.4-5.8s6.5 2.1 7.4 5.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Homepage category images: square, shown in full (5 in a row; 3 per row on phones) ---------- */
html:root .s-block--banners .square-photos-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 16px;
}
html:root .s-block--banners .square-photos-grid > .banner-entry {
  height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1; padding: 0;
  grid-column: auto !important; grid-row: auto !important; border-radius: 8px;
}
html:root .s-block--banners .square-photos-grid > .banner-entry > img { object-fit: cover !important; }
html:root .s-block--banners { margin-top: 24px !important; }
@media (max-width: 767px) {
  html:root .s-block--banners .square-photos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
}

/* ---------- Homepage product sections ---------- */
html:root mahaba-category-products .category-header { margin-bottom: 12px; padding-bottom: 0; }
html:root mahaba-category-products .category-header:after { display: none; }
html:root mahaba-category-products .category-title { color: #231f1e; font-size: 18px; font-weight: 600; padding: 0; }
html:root mahaba-category-products .category-title a { color: inherit; }
html:root mahaba-category-products .view-all { color: #6b6560; font-size: 13px; }
html:root mahaba-category-products .view-all i:last-child { display: none; }
html:root mahaba-category-products .category-section { margin-bottom: 40px; position: relative; }
html:root mahaba-category-products salla-products-slider { margin-bottom: 0 !important; }
@media (min-width: 768px) {
  /* No 10px sliver of a fifth card at the left edge. */
  html:root mahaba-category-products .swiper.s-slider-container { margin-left: 0 !important; }
}
@media (min-width: 768px) and (hover: hover) {
  /* Arrows sit on the title row: 46px above the slider centres the 40px buttons on the 28px title. */
  html:root mahaba-category-products .s-slider-block__title { position: absolute; top: -46px; left: 0; width: auto; margin: 0; z-index: 2; }
  html:root mahaba-category-products .s-slider-block__title-right { display: none; }
  html:root mahaba-category-products .view-all { margin-left: 96px; }
}
@media (max-width: 767px), (hover: none) {
  html:root mahaba-category-products .s-slider-block__title { display: none !important; }
}
@media (max-width: 767px) {
  html:root mahaba-category-products .category-section { margin-bottom: 32px; }
  html:root mahaba-category-products .category-header { padding-inline: 16px; }
  html:root mahaba-category-products .swiper.s-slider-container { margin: 0 !important; padding: 0 11px 0 40px !important; }
}

/* ---------- Category page, above the products ---------- */
/* The visible breadcrumb stays: the page has no BreadcrumbList JSON-LD. */
html:root .container--breadcrumbs nav.breadcrumbs { padding: 8px 0 0 !important; min-height: 0 !important; }
html:root .container--breadcrumbs salla-breadcrumb,
html:root .container--breadcrumbs salla-breadcrumb * { font-size: 13px !important; color: #6b6560; }
html:root main .container--products-list { margin-top: 8px !important; }
html:root .main-content > div:has(#page-main-title) { margin-bottom: 8px !important; align-items: center !important; flex-wrap: nowrap; gap: 12px; }
html:root .main-content > div:has(#page-main-title) > div:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html:root .main-content > div:has(#page-main-title) #page-main-title { display: inline; font-size: 18px; font-weight: 600; line-height: 28px; color: #231f1e; }
html:root #listing-result-count { display: inline; min-height: 0; margin-inline-start: 8px; font-size: 13px; color: #6b6560; }
html:root #listing-result-count:empty { display: none; }
html:root .main-content > div:has(#page-main-title) label[for="product-filter"] { display: block !important; margin: 0 !important; margin-inline-end: 4px !important; font-size: 13px; color: #6b6560; }
html:root .main-content > div:has(#page-main-title) #product-filter {
  height: 36px; width: auto; max-width: 170px; padding: 0 0 0 28px !important; border: 0 !important; box-shadow: none !important;
  background-color: transparent; font-size: 14px; font-weight: 500; color: #231f1e;
}
@media (max-width: 640px) {
  html:root .main-content > div:has(#page-main-title) label[for="product-filter"] { display: none !important; }
}
/* Subcategory chips (built by the JS from links already on the page). Their 48px is reserved up front
   so the products do not jump when the chips appear. */
html:root .main-content:has(.seo-collection-links a) > div:has(#page-main-title):not(:has(+ .dln-chips)) { margin-bottom: 56px !important; }
html:root .dln-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -10px 12px; padding: 0 10px; scrollbar-width: none; }
html:root .dln-chips::-webkit-scrollbar { display: none; }
html:root .dln-chips a {
  flex: none; display: flex; align-items: center; height: 36px; padding: 0 14px;
  border: 1px solid #e7e2dc; border-radius: 18px; font-size: 13px; color: #231f1e; white-space: nowrap; text-decoration: none;
}
html:root .dln-chips a[aria-current="page"] { background: #231f1e; border-color: #231f1e; color: #fff; }

/* ---------- Add-to-cart label fits at 390px on listing and homepage cards (was cut to "أضف إلى الـ..") ---------- */
html:root :is(.container--products-list, mahaba-category-products) salla-add-product-button .s-button-btn { padding-inline: 12px !important; font-size: 13px; }