/*
 * 2M Store — Prime General polish
 * Version: 1.0.0
 * Scope: announcement bar + header + navigation only
 * Brand palette:
 * Ink #171717 | Warm white #F7F5F1 | Burgundy #873D43
 * Bronze #B6946D | Border #D8D3CC | Muted #5F5B55
 */

:root {
  --m2-ink: #171717;
  --m2-warm-white: #f7f5f1;
  --m2-burgundy: #873d43;
  --m2-bronze: #b6946d;
  --m2-border: #d8d3cc;
  --m2-muted: #5f5b55;
  --header-height-desktop: 112px !important;
  --header-height-mobile: 122px !important;
}

/* ---------- Page foundation ---------- */

html {
  scroll-behavior: smooth;
}

body,
.app_container,
.content_container {
  background-color: var(--m2-warm-white) !important;
  color: var(--m2-ink);
}

::selection {
  color: #ffffff;
  background: var(--m2-burgundy);
}

/* Keep fixed header spacing exact and prevent content overlap. */
.ab-theme {
  padding-top: calc(36px + var(--header-height-desktop)) !important;
}

.ab-theme:not(:has(.ab-announce)),
.ab-theme.ab-no-announce {
  padding-top: var(--header-height-desktop) !important;
}

/* ---------- Announcement bar ---------- */

.ab-announce {
  height: 36px !important;
  padding-inline: clamp(16px, 3vw, 48px) !important;
  background: var(--m2-ink) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Cairo", "Jost", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.ab-announce-inner {
  max-width: 1480px !important;
  padding-inline: 0 !important;
}

.ab-announce-center {
  width: min(720px, 100%) !important;
  max-width: min(720px, 100%) !important;
}

.ab-ann-slide,
.ab-ann-simple,
.ab-ann-marquee-item {
  direction: rtl;
  font-family: inherit !important;
}

/* Hide unfinished social links. A real URL makes its icon visible automatically. */
.ab-ann-social-link[href="#"],
.ab-footer a.ab-ann-social-link[href="#"] {
  display: none !important;
}

.ab-ann-social-link {
  opacity: 0.82;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.ab-ann-social-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ---------- Main header ---------- */

#eo-header.ab-header {
  min-height: var(--header-height-desktop) !important;
  padding-block: 6px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--m2-ink) !important;
  border-bottom: 1px solid rgba(23, 23, 23, 0.09) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.ab-theme:not(.scrolled):not(.ab-no-announce) #eo-header.ab-header {
  transform: translateY(36px) !important;
}

.ab-theme.scrolled #eo-header.ab-header,
.ab-theme.ab-no-announce #eo-header.ab-header,
.ab-theme:not(:has(.ab-announce)) #eo-header.ab-header {
  transform: translateY(0) !important;
}

.ab-theme.scrolled #eo-header.ab-header {
  box-shadow: 0 10px 30px rgba(23, 23, 23, 0.075) !important;
}

#eo-header .ab-header-inner {
  width: 100%;
  max-width: 1480px !important;
  min-height: 100px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}

#eo-header .ab-header-row--main {
  display: flex !important;
  align-items: center !important;
  min-height: 62px !important;
  gap: 0 !important;
}

#eo-header .ab-desktop-nav-toggle {
  display: none !important;
}

#eo-header .ab-logo {
  flex: 0 0 auto;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

#eo-header .ab-logo:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

#eo-header .ab-logo img {
  width: auto !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain;
}

/* ---------- Search ---------- */

#eo-header .ab-header-search--desktop {
  flex: 0 1 600px !important;
  width: min(600px, 48vw) !important;
  min-width: 300px !important;
  padding-inline: 0 !important;
  margin-inline: clamp(28px, 4vw, 72px) auto !important;
}

#eo-header .ab-header-search-form {
  direction: rtl;
  min-height: 44px !important;
  padding: 0 18px 0 5px !important;
  background: #f8f7f5 !important;
  border: 1px solid var(--m2-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

#eo-header .ab-header-search-form:hover {
  border-color: #c7c0b7 !important;
  background: #ffffff !important;
}

#eo-header .ab-header-search-form:focus-within {
  border-color: var(--m2-burgundy) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(135, 61, 67, 0.1) !important;
}

/* Visual Arabic placeholder; the tiny head script updates the real field too. */
html.ab-lang-loaded #eo-header .ab-header-search-form::after {
  content: "ابحث عن قطعة تكمل ستايلك" !important;
  right: 18px !important;
  left: auto !important;
  color: #77716a !important;
  font-family: "Cairo", "Jost", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#eo-header .ab-header-search-input {
  height: 42px;
  padding-block: 9px !important;
  color: var(--m2-ink) !important;
  font-family: "Cairo", "Jost", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: right;
}

#eo-header .ab-header-search-submit {
  width: 36px !important;
  height: 36px !important;
  color: var(--m2-ink) !important;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

#eo-header .ab-header-search-submit:hover {
  color: #ffffff !important;
  background: var(--m2-burgundy) !important;
  transform: scale(0.96);
}

/* ---------- Cart ---------- */

#eo-header .cart-btn {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  color: var(--m2-ink) !important;
  background: var(--m2-warm-white) !important;
  border: 1px solid var(--m2-border) !important;
  box-shadow: none !important;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#eo-header .cart-btn:hover {
  color: #ffffff !important;
  background: var(--m2-burgundy) !important;
  border-color: var(--m2-burgundy) !important;
  transform: translateY(-1px);
}

#eo-header .ab-cart-count:not(:empty) {
  background: var(--m2-burgundy) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff;
}

/* ---------- Desktop navigation ---------- */

#eo-header .ab-header-row--nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px;
  padding: 2px 0 4px !important;
  border-top: 1px solid rgba(23, 23, 23, 0.055);
}

#eo-header .ab-nav {
  width: 100% !important;
  gap: clamp(2px, 0.6vw, 10px) !important;
  direction: rtl;
  justify-content: center !important;
}

#eo-header .ab-nav > a,
#eo-header .ab-nav .ab-dropdown-trigger {
  min-height: 32px;
  padding: 5px clamp(12px, 1.3vw, 20px) !important;
  color: var(--m2-ink) !important;
  border-radius: 999px;
  font-family: "Cairo", "Jost", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease !important;
}

#eo-header .ab-nav > a:hover,
#eo-header .ab-nav .ab-dropdown-trigger:hover {
  color: var(--m2-burgundy) !important;
  background: rgba(135, 61, 67, 0.065) !important;
  transform: translateY(-1px);
}

#eo-header .ab-nav > a::after,
#eo-header .ab-nav .ab-dropdown-trigger::after {
  right: 18px !important;
  bottom: 1px !important;
  left: 18px !important;
  width: auto !important;
  height: 2px !important;
  background: var(--m2-burgundy) !important;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: center;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease !important;
}

#eo-header .ab-nav > a:hover::after,
#eo-header .ab-nav .ab-dropdown-trigger:hover::after {
  width: auto !important;
  opacity: 1;
  transform: scaleX(1);
}

#eo-header .ab-nav > a[href*="New-arrivals"] {
  color: var(--m2-burgundy) !important;
}

#eo-header .ab-nav > a[href*="New-arrivals"]::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--m2-bronze);
  vertical-align: middle;
}

#eo-header a:focus-visible,
#eo-header button:focus-visible,
#eo-header input:focus-visible,
.ab-announce a:focus-visible {
  outline: 2px solid var(--m2-burgundy) !important;
  outline-offset: 3px !important;
}

/* Remove the unused compare bubble until product comparison is intentionally enabled. */
.ab-compare-float {
  display: none !important;
}

/* ---------- Tablet ---------- */

@media (min-width: 980px) and (max-width: 1180px) {
  #eo-header .ab-header-inner {
    padding-inline: 24px !important;
  }

  #eo-header .ab-header-search--desktop {
    flex-basis: 470px !important;
    width: 44vw !important;
    margin-inline: 24px auto !important;
  }

  #eo-header .ab-nav > a,
  #eo-header .ab-nav .ab-dropdown-trigger {
    padding-inline: 11px !important;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 979px) {
  :root {
    --header-height-mobile: 122px !important;
  }

  .ab-theme {
    padding-top: calc(34px + var(--header-height-mobile)) !important;
  }

  .ab-theme:not(:has(.ab-announce)),
  .ab-theme.ab-no-announce {
    padding-top: var(--header-height-mobile) !important;
  }

  .ab-announce {
    height: 34px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }

  #eo-header.ab-header {
    min-height: var(--header-height-mobile) !important;
    padding-block: 7px 9px !important;
  }

  .ab-theme:not(.scrolled):not(.ab-no-announce) #eo-header.ab-header {
    transform: translateY(34px) !important;
  }

  #eo-header .ab-header-inner {
    min-height: 0 !important;
    gap: 8px !important;
    padding-inline: 14px !important;
  }

  #eo-header .ab-header-row--main {
    min-height: 48px !important;
    gap: 8px !important;
  }

  #eo-header .ab-logo img {
    height: 38px !important;
    max-height: 38px !important;
  }

  #eo-header .ab-hamburger,
  #eo-header .ab-icon-btn,
  #eo-header .cart-btn {
    width: 40px !important;
    height: 40px !important;
  }

  #eo-header .ab-header-search--mobile {
    width: 100% !important;
  }

  #eo-header .ab-header-search-form {
    min-height: 42px !important;
    padding: 0 16px 0 4px !important;
  }

  #eo-header .ab-header-search-input {
    height: 40px;
    font-size: 12.5px !important;
  }

  html.ab-lang-loaded #eo-header .ab-header-search-form::after {
    right: 16px !important;
    font-size: 12.5px !important;
  }

  #eo-header .ab-header-search-submit {
    width: 34px !important;
    height: 34px !important;
  }

  .ab-mobile-menu,
  .ab-mobile-overlay {
    top: calc(34px + var(--header-height-mobile)) !important;
  }

  .ab-theme.scrolled .ab-mobile-menu,
  .ab-theme.scrolled .ab-mobile-overlay,
  .ab-theme.ab-no-announce .ab-mobile-menu,
  .ab-theme.ab-no-announce .ab-mobile-overlay {
    top: var(--header-height-mobile) !important;
  }

  .ab-mobile-menu {
    background: var(--m2-warm-white) !important;
    border-top: 1px solid var(--m2-border);
    box-shadow: 0 18px 40px rgba(23, 23, 23, 0.12);
  }

  .ab-mobile-nav {
    padding: 8px 14px 24px !important;
  }

  .ab-mobile-nav > a,
  .ab-mobile-accordion-trigger,
  .ab-mobile-nav > button.register-btn {
    direction: rtl;
    min-height: 48px;
    padding: 12px 10px !important;
    color: var(--m2-ink) !important;
    border-bottom: 1px solid rgba(23, 23, 23, 0.08) !important;
    font-family: "Cairo", "Jost", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .ab-mobile-nav > a:hover,
  .ab-mobile-accordion-trigger:hover {
    color: var(--m2-burgundy) !important;
    background: rgba(135, 61, 67, 0.055) !important;
  }
}

/* ---------- Motion accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #eo-header *,
  .ab-announce * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}