/** Shopify CDN: Minification failed

Line 407:14 Expected identifier but found whitespace
Line 407:15 Unexpected "\"Tajawal\""

**/
/* ============================================================
   AETO • aeto-header.css   (2/7) — Site Header
   ------------------------------------------------------------
   Header layout, logo wordmark, navigation menu items,
   announcement bar, header height/padding. All header-related
   rules in one place. Loads after tokens, before content modules.
   ============================================================ */

.section-header .header-wrapper {
  background: #f1ece1;
  border-bottom: 1px solid rgba(26, 26, 26, 0.16);
}

.section-header .header {
  min-height: 4.6rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.section-header .header__heading-logo-wrapper {
  display: flex;
  align-items: center;
  width: auto;
  height: 2.6rem;
  max-width: 11rem;
  overflow: visible;
}

.section-header .header__heading-logo {
  width: auto;
  height: auto;
  max-height: 2.6rem;
  max-width: 11rem;
  object-fit: contain;
}

.aeto-logo-wordmark {
  display: inline-flex;
  align-items: center;
  color: #1a1a1a;
}

.aeto-logo-wordmark svg {
  display: block;
  width: auto;
  height: 2.4rem;
}

.aeto-logo-wordmark--footer svg {
  height: 1.6rem;
}

.header__heading-link,
.header__heading-logo-wrapper {
  letter-spacing: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
}

.section-header .header__heading-link {
  overflow: visible;
}

.section-header .header__heading-link span.h2 {
  color: #111;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 1.8rem;
  line-height: 1;
}

.section-header .header__menu-item,
.section-header .header__icon {
  color: #111;
}

.section-header .header__menu-item {
  font-size: 1.4rem;
  padding: 0.6rem 1.5rem;
  letter-spacing: 0.06rem;
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.section-header .header--aeto-menu-uppercase .header__menu-item {
  text-transform: uppercase;
}

.section-header .header--aeto-menu-normal .header__menu-item {
  letter-spacing: 0;
  text-transform: none;
}

.section-header .header__menu-item:hover {
  opacity: 0.68;
}

.section-header .header__active-menu-item {
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.7rem;
}

.section-header .announcement-bar-section {
  display: none;
}

/* ============================================================
   AETO Mobile Menu — premium off-canvas drawer
   ------------------------------------------------------------
   The hamburger button (.aeto-mobile-menu__toggle) replaces the
   default Shopify drawer behavior on mobile/tablet for stores
   using the fallback link navigation. Desktop (≥990px) hides
   the hamburger entirely and shows the inline fallback nav.

   Architecture:
   - Native <details> handles open/close state (zero-JS toggle)
   - Inline script handles backdrop click, ESC, link-close,
     and body scroll lock
   - CSS handles smooth slide-in and visual state via
     details[open] selector
   ============================================================ */

/* The whole component is hidden on desktop — desktop uses
   .header__inline-menu (the fallback inline nav) instead. */
.aeto-mobile-menu {
  display: none;
}

@media screen and (max-width: 989px) {
  .aeto-mobile-menu {
    display: block;
    grid-column: 1;
    justify-self: start;
    align-self: center;
  }

  /* On mobile, hide the desktop inline fallback nav — it lives
     inside the hamburger drawer now. */
  .section-header .header__inline-menu {
    display: none;
  }
}

/* The <details> wraps the whole disclosure pattern. */
.aeto-mobile-menu__details {
  position: relative;
}

/* Remove default <summary> marker / triangle */
.aeto-mobile-menu__details > summary {
  list-style: none;
  cursor: pointer;
}

.aeto-mobile-menu__details > summary::-webkit-details-marker {
  display: none;
}

/* Hamburger button — refined, calm, minimal */
.aeto-mobile-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  margin-inline-start: -0.6rem;
  background: transparent;
  border: 0;
  color: var(--aeto-fg, #111);
  -webkit-tap-highlight-color: transparent;
}

.aeto-mobile-menu__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.aeto-mobile-menu__toggle-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Backdrop — dims and catches outside clicks */
.aeto-mobile-menu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.42);
  z-index: var(--aeto-z-drawer-backdrop, 1000);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--aeto-dur-med, 240ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.aeto-mobile-menu__details[open] .aeto-mobile-menu__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Off-canvas drawer panel */
.aeto-mobile-menu__panel {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 100dvh;
  width: min(86vw, 36rem);
  padding: 2.4rem 2.4rem 3rem;
  background: var(--aeto-bg-cream, #f1ece1);
  color: var(--aeto-fg, #111);
  z-index: var(--aeto-z-drawer-panel, 1001);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  /* Off-screen on the inline-start side. --aeto-dir-sign flips the
     value in RTL so the panel always slides in from inline-start.
     Shadow x-offset uses the same sign so it always falls toward the
     content area (inline-end side of the panel). */
  transform: translateX(calc(-101% * var(--aeto-dir-sign)));
  transition: transform var(--aeto-dur-med, 240ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: calc(0.4rem * var(--aeto-dir-sign)) 0 2.4rem rgba(17, 17, 17, 0.06);
}

.aeto-mobile-menu__details[open] .aeto-mobile-menu__panel {
  transform: translateX(0);
}

/* Panel header — logo + close */
.aeto-mobile-menu__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.aeto-mobile-menu__brand {
  display: inline-flex;
  align-items: center;
  color: var(--aeto-fg, #111);
  text-decoration: none;
}

.aeto-mobile-menu__brand svg {
  width: auto;
  height: 2rem;
}

.aeto-mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-inline-end: -0.8rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--aeto-fg, #111);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aeto-mobile-menu__close .svg-wrapper {
  width: 1.6rem;
  height: 1.6rem;
}

.aeto-mobile-menu__close svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Navigation links — editorial, calm, generous tap targets.
   The drawer focuses exclusively on collection/page navigation;
   search / account / cart icons live in the main mobile header,
   not duplicated here. */
.aeto-mobile-menu__nav {
  flex: 1;
}

.aeto-mobile-menu__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.aeto-mobile-menu__link {
  display: block;
  padding: 1.4rem 0;
  color: var(--aeto-fg, #111);
  font-family: "Tajawal", system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  transition: color var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.aeto-mobile-menu__link:hover,
.aeto-mobile-menu__link:focus-visible {
  color: rgba(17, 17, 17, 0.6);
  outline: 0;
}

/* ============================================================
   AETO language switcher (header + mobile drawer)
   Renders only when localization.available_languages.size > 1.
   The visible UI is a minimal two-letter locale code with a caret;
   the real <select> sits invisibly on top to catch clicks and let
   the browser anchor the native dropdown correctly. RTL flips
   automatically because layout/theme.liquid sets <html dir>.
   ============================================================ */

.aeto-locale {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--aeto-space-sm, 1.2rem);
}

.aeto-locale__form {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.6rem 0.4rem;
  border: 0;
  background: transparent;
}

.aeto-locale__current {
  font-size: 1.15rem;
  font-family: "Tajawal", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: var(--aeto-fg, #111);
  pointer-events: none;
  line-height: 1;
}

.aeto-locale__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--aeto-fg, #111);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.aeto-locale__caret svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Native <select> overlays the visible text — catches all clicks so
   the browser positions its dropdown correctly under the locale code. */
.aeto-locale__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Native dropdown options need readable colours (the select itself is
   transparent for the closed state only). */
.aeto-locale__select option {
  color: var(--aeto-fg, #111);
  background: var(--aeto-bg-cream, #f1ece1);
  font-size: 1.3rem;
}
  font-family: "Tajawal", system-ui, sans-serif;

.aeto-locale:hover .aeto-locale__current,
.aeto-locale:focus-within .aeto-locale__current {
  opacity: 0.7;
  transition: opacity var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.aeto-locale:hover .aeto-locale__caret,
.aeto-locale:focus-within .aeto-locale__caret {
  opacity: 1;
}

.aeto-locale__select:focus-visible {
  outline: 1px solid var(--aeto-fg, #111);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================================
   Mobile drawer placement — desktop component, anchored in band.
   ------------------------------------------------------------
   Principle: the mobile switcher IS the desktop switcher. Every
   visual property (font, weight, tracking, color, caret size,
   gap, hover, focus, transition, dropdown styling) inherits
   one-for-one from the `.aeto-locale*` rules above. The mobile
   block below ONLY changes:
     1. Where the switcher sits in the layout (drawer band, not
        next to header icons)
     2. The vertical tap-target height (1rem block padding vs
        desktop's 0.6rem) to satisfy the 44px touch minimum
     3. The native <select> option size (1.45rem vs desktop
        1.3rem) — platform constraint, not a visual choice;
        the OS renders the option list and won't scale with
        our font-size

   Everything else — including the 1.15rem locale code, 0.9rem
   caret, 0.4rem gap, 0.14rem letter-spacing, hover opacity
   transitions, focus-visible outline — is the SAME component
   at both breakpoints.
   ============================================================ */

.aeto-mobile-menu__locale {
  margin-top: auto;
  padding-block: var(--aeto-space-md, 1.6rem) var(--aeto-space-sm, 1.2rem);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.aeto-mobile-menu__locale .aeto-locale {
  /* Reset desktop's 1.2rem inline-start margin — that gap exists
     to separate the switcher from header icons; in the drawer
     the switcher hugs the inline-start edge with the nav links. */
  margin-inline-start: 0;
}

.aeto-mobile-menu__locale .aeto-locale__form {
  /* Inline padding matches desktop EXACTLY (0.4rem). Block padding
     grows to 1rem so the form has a touch-friendly tap target
     (44px+ when combined with the form's intrinsic height). The
     gap stays at desktop's 0.4rem — inherited, not overridden. */
  padding-block: 1rem;
  padding-inline: 0.4rem;
}

/* Native <select> dropdown — the OS renders option chrome, which
   won't scale with our CSS font-size. Bump to a readable touch
   size for the platform's rendering. This is the only spot where
   mobile cannot match desktop exactly — it's a platform constraint.
   Everything visible in the closed state (text, caret, weights,
   tracking, hover) matches desktop one-for-one. */
.aeto-mobile-menu__locale .aeto-locale__select option {
  font-size: 1.45rem;
}