/* ANBOOST Prime foundation v2 (restricted preview only; loaded by the prime chrome views).
   Platform-managed presentation primitives shared by every prime theme. Every colour and font here comes from the
   merchant variables (--main-color-*, --heading-color, --body-color, --section-bg-*, --heading-font, --body-font)
   or from the theme's prime tokens, which are themselves derived from them. Nothing here stores or reads settings. */
:root {
  --sfp-ease: cubic-bezier(.2, .7, .2, 1);
  --sfp-dur: .22s;
  --sfp-tap: 44px;
  --sfp-focus: 0 0 0 3px color-mix(in srgb, var(--sfp-accent, var(--main-color-one)) 45%, transparent);
}

/* icons: self-hosted Lucide (ISC) as masks, so they take currentColor and pass through the existing icon helpers */
.sfp-i { display: inline-block; inline-size: 1.25em; block-size: 1.25em; flex: none; background: currentColor;
  -webkit-mask: var(--sfp-i) center / contain no-repeat; mask: var(--sfp-i) center / contain no-repeat; vertical-align: middle; }
.sfp-i-heart { --sfp-i: url(../../img/prime/icons/heart.svg); }
.sfp-i-compare { --sfp-i: url(../../img/prime/icons/git-compare-arrows.svg); }
.sfp-i-repeat { --sfp-i: url(../../img/prime/icons/repeat-2.svg); }
.sfp-i-bag { --sfp-i: url(../../img/prime/icons/shopping-bag.svg); }
.sfp-i-cart { --sfp-i: url(../../img/prime/icons/shopping-cart.svg); }
.sfp-i-user { --sfp-i: url(../../img/prime/icons/user-round.svg); }
.sfp-i-search { --sfp-i: url(../../img/prime/icons/search.svg); }
.sfp-i-chevron { --sfp-i: url(../../img/prime/icons/chevron-down.svg); }
.sfp-i-send { --sfp-i: url(../../img/prime/icons/send.svg); }
.sfp-i-arrow { --sfp-i: url(../../img/prime/icons/arrow-left.svg); }
[dir="ltr"] .sfp-i-arrow { --sfp-i: url(../../img/prime/icons/arrow-right.svg); }

.sfp-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* announcement strip: renders the store's site_announcement_text exactly as today (markup kept) */
.sfp-announce { position: relative; z-index: 1001; text-align: center; font: 600 13px/1.5 var(--sfp-font-body, var(--body-font), system-ui, sans-serif); padding-block: 8px; padding-inline: 16px; }
.sfp-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* sticky desktop header. html/body carry overflow-x:hidden (it turns body into a scroll container and silently disables
   position:sticky); overflow-x:clip keeps the same no-horizontal-scroll result without that side effect. Desktop only:
   below 992px the shared mobile foundation (P0–P5) owns the header and nothing here applies. */
@media (min-width: 992px) {
  @supports (overflow: clip) { html, body { overflow-x: clip !important; overflow-y: visible !important; } }
  html { scroll-padding-top: calc(var(--sfp-header-h, 76px) + 12px); }
  nav.sfp-header { transition: box-shadow var(--sfp-dur) var(--sfp-ease), background-color var(--sfp-dur) var(--sfp-ease); }
  nav.sfp-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
}

/* header shell (the root keeps the theme's own nav class: the mobile foundation hides it below 992px by that class) */
nav.sfp-header { position: sticky; inset-block-start: 0; z-index: 1000; padding: 0; margin: 0; box-shadow: none; border: 0; backdrop-filter: none; }
.sfp-header__bar { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); min-block-size: 76px; }
.sfp-header__logo { flex: none; display: flex; align-items: center; }
.sfp-header__logo a { display: inline-flex; align-items: center; text-decoration: none; }
.sfp-header__logo img { display: block; block-size: auto; max-block-size: var(--sfp-logo-h, 40px); inline-size: auto; max-inline-size: 220px; object-fit: contain; }
.sfp-header__nav { flex: 1 1 auto; min-inline-size: 0; display: flex; }
.sfp-header__nav .theme-nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(14px, 1.8vw, 30px); list-style: none; margin: 0; padding: 0; }
.sfp-header__nav .theme-nav-menu > li { position: relative; list-style: none; }
.sfp-header__nav .theme-nav-menu > li > a { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--sfp-tap); text-decoration: none; color: inherit; position: relative; }
.sfp-header__nav .theme-nav-menu .sub-menu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-inline-size: 220px; list-style: none; margin: 0; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--sfp-dur) var(--sfp-ease), transform var(--sfp-dur) var(--sfp-ease), visibility var(--sfp-dur); z-index: 20; }
.sfp-header__nav .theme-nav-menu li:hover > .sub-menu, .sfp-header__nav .theme-nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sfp-header__nav .sub-menu a { display: block; padding: 9px 12px; text-decoration: none; color: inherit; border-radius: 6px; }
.sfp-header__search { position: relative; flex: 0 1 340px; min-inline-size: 180px; display: flex; align-items: center; }
.sfp-header__search input { inline-size: 100%; min-block-size: var(--sfp-tap); border: 0; outline: 0; background: transparent; color: inherit; font: inherit; padding-inline: 14px 10px; }
.sfp-header__search input::placeholder { color: inherit; opacity: .62; }
.sfp-header__search button { flex: none; display: grid; place-items: center; inline-size: var(--sfp-tap); block-size: var(--sfp-tap); border: 0; background: transparent; color: inherit; cursor: pointer; }
.sfp-header__search kbd { flex: none; font: 500 11px/1 ui-monospace, monospace; padding: 4px 6px; border-radius: 4px; margin-inline-end: 8px; }
.sfp-header__actions { flex: none; display: flex; align-items: center; gap: 6px; }
.sfp-header__actions > a, .sfp-header__actions > button { position: relative; display: grid; place-items: center; inline-size: var(--sfp-tap); block-size: var(--sfp-tap); color: inherit; text-decoration: none; font-size: 20px; }
.sfp-header__actions .theme-cart-count, .sfp-header__actions .theme-wishlist-count, .sfp-badge {
  position: absolute; inset-block-start: 4px; inset-inline-end: 2px; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: 999px;
  font: 700 10px/18px var(--sfp-font-body, var(--body-font), system-ui, sans-serif); text-align: center; }

/* search suggestions (server markup from the existing search endpoint; class names unchanged for the mobile search) */
.sfp-header__search ul[class*="search-dropdown"] { position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; z-index: 9999; list-style: none; margin: 0; padding: 6px; display: none;
  max-block-size: 380px; overflow-x: hidden; overflow-y: auto; }
.sfp-header__search ul[class*="search-dropdown"].open { display: block; }
.sfp-header__search ul[class*="search-dropdown"] li { list-style: none; inline-size: 100% !important; }
.sfp-header__search ul[class*="search-dropdown"] li a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; text-decoration: none; color: inherit; border-radius: 8px; }
.sfp-header__search ul[class*="search-dropdown"] .product-image { inline-size: 44px; block-size: 44px; flex: none; overflow: hidden; border-radius: 6px; }
.sfp-header__search ul[class*="search-dropdown"] .product-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sfp-header__search ul[class*="search-dropdown"] .product-name { font-size: 13px; font-weight: 600; line-height: 1.35; }

/* footer shell */
.sfp-footer { position: relative; }
.sfp-footer a { text-decoration: none; color: inherit; }
.sfp-footer ul, .sfp-footer ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sfp-footer ol li::before, .sfp-footer ul li::before { content: none; }
.sfp-footer__logo { display: inline-flex; }
/* width-led: store logo artwork often carries transparent padding; a width cap keeps the mark legible either way */
.sfp-footer__logo img { display: block; block-size: auto; inline-size: auto; max-inline-size: var(--sfp-footer-logo-w, 220px); max-block-size: 120px; object-fit: contain; }
.sfp-footer .form-message-show:empty { display: none; }

.sfp-header a:focus-visible, .sfp-header button:focus-visible, .sfp-header input:focus-visible,
.sfp-footer a:focus-visible, .sfp-footer button:focus-visible, .sfp-footer input:focus-visible { outline: 0; box-shadow: var(--sfp-focus); border-radius: 6px; }

/* Arabic is a connected script: tracking breaks the letter joins, so labels are never letter-spaced in RTL */
[dir="rtl"] .sfp-header *, [dir="rtl"] .sfp-footer *, [dir="rtl"] .sfp-announce { letter-spacing: 0 !important; }

/* compact desktop tier: keep the menu on one line between the mobile breakpoint and 1200px */
.sfp-header__nav .theme-nav-menu { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1199.98px) {
  .sfp-header__bar { gap: 16px; }
  .sfp-header__nav .theme-nav-menu { gap: 4px 14px; }
  .sfp-header__nav .theme-nav-menu > li > a { font-size: 13.5px !important; }
  .sfp-header__search { flex: 0 1 200px !important; min-inline-size: 140px; }
  .sfp-header__search kbd { display: none; }
  .sfp-header__actions { gap: 2px !important; }
  .sfp-header__actions > a { inline-size: 40px; block-size: 40px; }
  .sfp-header__logo img { max-inline-size: 170px; }
}
/* below the mobile breakpoint the shared mobile foundation owns the header; the prime header only renders on desktop */
@media (max-width: 991.98px) { body.sf-m nav.sfp-header { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sfp-header *, .sfp-footer * { transition: none !important; animation: none !important; } }