/** Shopify CDN: Minification failed

Line 149:4 Unexpected "}"

**/
/*
 * Header styles extracted from sections/header.liquid (Phase 1C).
 *
 * The original {% style %} block inline-shipped ~16 KB of CSS in
 * the document head on every page. ~14 KB of that was 100% static —
 * the smooth sticky-header transitions, search-placeholder
 * animations, RTL overrides, and the long tail of layout rules —
 * with the dynamic ~4 KB of conditional rules (head_shadow,
 * sticky_header_type, padding values) clustered in the middle.
 *
 * The two static chunks (top + bottom of the original block) are
 * concatenated here and loaded non-blocking via media=print onload.
 * The dynamic middle stays inline because the conditionals depend
 * on merchant settings via Liquid `if`s — extracting those would
 * need a full data-attribute selector rewrite, not worth the risk
 * for the 4 KB they'd save.
 */

/* ── Top half of the original block (lines 37-157 of source) ── */
  /* =============================================
     SMOOTH STICKY HEADER TRANSITIONS
     Use transform instead of top for GPU acceleration
     ============================================= */
  /* Same duration + easing for show and hide avoids a “hitch” when classes swap. Smooth standard curve (no snap). */
  .section-header.shopify-section-header-sticky {
    position: sticky !important;
    top: 0 !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .section-header.shopify-section-header-hidden {
    top: 0 !important;
    transform: translate3d(0, -100%, 0) !important;
    transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .section-header.shopify-section-header-sticky,
    .section-header.shopify-section-header-hidden {
      transition-duration: 0.01ms !important;
    }
    .shopify-section-header-sticky sticky-header.header-wrapper,
    .shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
      transition-duration: 0.01ms;
    }
  }

  /* Dynamic Search Placeholder Styles - Preloaded to prevent layout shift */
  .search-placeholder-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    pointer-events: none;
    overflow: hidden;
    font-size: 13px;
    font-family: inherit;
    color: rgba(var(--color-foreground), 0.45);
    z-index: 1;
    contain: strict;
  }
  @media screen and (max-width: 749px) {
    .search-placeholder-wrapper {
      font-size: 12px;
    }
  }
  .search-placeholder-static {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .search-placeholder-dynamic {
    position: relative;
    height: 1.2em;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    contain: layout style;
  }
  .search-placeholder-text {
    display: block;
    animation: sp-in 0.32s ease-out forwards;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
  .search-placeholder-text.slide-in {
    animation: sp-in 0.32s ease-out forwards;
  }
  .search-placeholder-text.slide-out {
    animation: sp-out 0.22s ease-in forwards;
  }
  @keyframes sp-in {
    from { opacity: 0; transform: translate3d(0, 55%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes sp-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -55%, 0); }
  }
  .search__input.field__input:focus + .search-placeholder-wrapper,
  .search__input.field__input:not(:placeholder-shown) + .search-placeholder-wrapper {
    opacity: 0;
  }

  /* RTL: the blue search button is on the LEFT of the input, so the
     placeholder overlay needs its left padding to reserve space for the
     button. The static label is Arabic ("أبحث عن …") so keep RTL flow
     — placeholder text reads right-to-left from the right edge of the
     input, away from the button. */
  [dir="rtl"] .search-placeholder-wrapper {
    padding-left: 4.2rem;
    padding-right: 1rem;
    direction: rtl;
    justify-content: flex-start;
  }
  /* In RTL, the dynamic keyword sits after (to the left of) the static
     label, so swap its left margin to the right side. */
  [dir="rtl"] .search-placeholder-dynamic {
    margin-left: 0;
    margin-right: 4px;
  }
  .field_wbinput .field {
    position: relative;
  }
  .search__input.has-dynamic-placeholder::placeholder {
    color: transparent;
  }

  header-drawer {
    justify-self: start;
  }


/* ── Bottom half of the original block (lines 271-659 of source) ── */
    }
  }
  /* Minimal Icon Styles */
  .header__icon--cart,
  .header__icon--account {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
  }
  
  /* Hide account icon on mobile - already in bottom menu */
  @media screen and (max-width: 767px) {
    .header__icon--account {
      display: none !important;
    }
  }
  .header__icon--cart:hover,
  .header__icon--account:hover {
    transform: scale(1.1);
  }
  /* Account icon uses fill-based SVG, prevent stroke artifacts on hover */
  .header__icon--account svg.icon path {
    transition: fill 0.3s ease;
  }
  .header__icon--account:hover svg.icon path {
    stroke: none;
    fill: rgb(var(--color-link-hover));
  }
  .header__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
  }
  .header__account-icon,
  .header__cart-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .header__account-icon svg,
  .header__cart-icon-wrapper svg {
    width: 26px;
    height: 26px;
  }
  .header__cart-icon-wrapper svg {
    stroke-width: 1.5;
  }
  .header__cart-count {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border-radius: 50%;
    min-width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid rgb(var(--color-background));
    z-index: 1;
  }
  .header__cart-count:empty {
    display: none;
  }
  .header__icon--cart button,
  .header__icon--account button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media screen and (max-width: 767px) {
    .header__icon-wrapper {
      width: 2.2rem;
      height: 2.2rem;
    }
    .header__account-icon svg,
    .header__cart-icon-wrapper svg {
      width: 22px;
      height: 22px;
    }
  }
  /* Simple Language Switcher Styles */
  .localization-form-simple {
    display: inline-block;
  }
  .localization-form-simple button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .localization-form-simple button:hover {
    opacity: 0.7;
    text-decoration: underline;
  }
  .localization-link {
    display: inline-block;
  }
  /* Dubai Font for Arabic Language Text */
  .lang-arabic {
    font-family: 'Dubai', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
  }
  /* Make small dropdown menus full-width like mega menus */
  .wbsimplemenuxs .header__submenu.hsmenucont {
    left: 0;
    right: 0;
  }
  /* Align text columns and image gallery in mega menus */
  .wbmenufull .mega_menu_banner > .row {
    margin-left: 0;
    margin-right: 0;
    gap: var(--grid-desktop-horizontal-spacing, 16px);
  }
  .wbmenufull .mega_menu_banner > .row > [class^="col-"] {
    flex: 1;
    max-width: none;
  }
  .wbmenufull .wbmenugallery.grid {
    margin-left: 0;
    column-gap: var(--grid-desktop-horizontal-spacing, 16px);
  }
  .wbmenufull .wbmenugallery.grid > .grid__item {
    flex: 1;
    width: auto;
    max-width: none;
    padding-left: 0;
  }

  /* ===== Unified Locale Dropdown ===== */
  .header-locale-dropdown {
    position: relative;
  }
  .header-locale-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    border: none;
    background: none;
    list-style: none;
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
    user-select: none;
    transition: transform 0.3s ease, color 0.3s ease;
    justify-content: center;
  }
  .header-locale-dropdown__trigger::-webkit-details-marker {
    display: none;
  }
  .header-locale-dropdown__trigger:hover {
    transform: scale(1.05);
    color: rgb(var(--color-link-hover));
  }
  .header-locale-dropdown[open] .header-locale-dropdown__trigger {
    color: rgb(var(--color-link-hover));
  }
  .header-locale-dropdown__flag {
    display: flex;
    align-items: center;
  }
  .header-locale-dropdown__flag .country-flag {
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
  }
  .header-locale-dropdown__label {
    line-height: 1;
    vertical-align: middle;
  }
  .header-locale-dropdown__caret {
    width: 8px;
    height: 5px;
    opacity: 0.5;
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .header-locale-dropdown[open] .header-locale-dropdown__caret {
    transform: rotate(180deg);
    opacity: 0.8;
  }

  /* Panel */
  .header-locale-dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    max-width: 320px;
    background: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    overflow: hidden;
    animation: localeDropdownIn 0.2s ease;
  }

  /* RTL: the trigger sits on the left side of the Arabic header, so a
     right-anchored dropdown would extend past the viewport's left edge.
     Flip the anchor so it opens toward the right (into the page). */
  [dir="rtl"] .header-locale-dropdown__panel {
    right: auto;
    left: 0;
  }
  @keyframes localeDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Sections */
  .header-locale-dropdown__section {
    padding: 8px 0;
  }
  .header-locale-dropdown__section + .header-locale-dropdown__section {
    border-top: 1px solid rgba(var(--color-foreground), 0.08);
  }
  .header-locale-dropdown__section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--color-foreground), 0.45);
    padding: 4px 16px 6px;
  }

  /* Items (both language buttons and country links) */
  .header-locale-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 400;
    color: rgb(var(--color-foreground));
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
  }
  .header-locale-dropdown__item:hover {
    background: rgba(var(--color-foreground), 0.04);
  }
  .header-locale-dropdown__item--active {
    font-weight: 600;
    color: rgb(var(--color-link-hover));
  }
  .header-locale-dropdown__check {
    flex-shrink: 0;
    color: rgb(var(--color-link-hover));
    margin-left: 8px;
  }

  /* Country items */
  .header-locale-dropdown__countries {
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .header-locale-dropdown__countries::-webkit-scrollbar {
    width: 4px;
  }
  .header-locale-dropdown__countries::-webkit-scrollbar-thumb {
    background: rgba(var(--color-foreground), 0.15);
    border-radius: 4px;
  }
  .header-locale-dropdown__country-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-locale-dropdown__country-info .country-flag {
    font-size: 1.2em;
  }
  .header-locale-dropdown__currency {
    font-size: 11px;
    color: rgba(var(--color-foreground), 0.4);
    flex-shrink: 0;
    margin-left: 8px;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 767px) {
    .header-locale-dropdown__trigger {
      padding: 0;
      font-size: 11px;
      gap: 4px;
      min-width: 36px;
      min-height: 36px;
    }
    /* Hide text label on mobile - show only flag */
    .header-locale-dropdown__label {
      display: none;
    }
    .header-locale-dropdown__caret {
      width: 6px;
      height: 4px;
    }
    .header-locale-dropdown__panel {
      right: -8px;
      left: auto;
      min-width: 220px;
      max-width: calc(100vw - 20px);
    }
    [dir="rtl"] .header-locale-dropdown__panel {
      right: auto;
      left: -8px;
    }
    .header-locale-dropdown__countries {
      max-height: 45vh;
    }
    .header-locale-dropdown__item {
      padding: 9px 14px;
      font-size: 13px;
    }
    .header-locale-dropdown__section-title {
      padding: 4px 14px 6px;
    }
  }

  /* =============================================
     SEARCH FIELD — CLS PIN
     Pin the exact final dimensions of the search input + button at first
     paint so the layout never shifts when component-search.css (loaded
     non-blocking via media="print" + onload, see line 9) finishes
     parsing.
     Lighthouse measured a 0.097 CLS contribution from this transition:
     base.css line 3349 sets `min-width: 40px` and `position: relative`
     for `.header__search .field__button`. component-search.css then
     overrides to `width:34; height:34; position:absolute` once it loads.
     Mirroring the final state here (specificity 0,3,0 — beats base.css's
     0,2,0) eliminates the shift without making component-search.css
     render-blocking (which would cost ~30 KB on the critical path).
     ============================================= */
  .header__search .search__button.field__button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
  }
  .header__search .field_wbinput .field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .header__search .search__input.field__input {
    height: 46px;
    padding: 0 1.4rem;
    padding-right: 4.2rem;
    border-radius: 14px;
    width: 100%;
  }