/* Minimal global styles for the default theme. Sections inline most of their
   own layout to keep the demo self-contained. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500&family=Alexandria:wght@300;400;700&family=Noto+Sans+Arabic:wght@300;400;700&display=swap');

/* Brand typography. English headlines: Playfair Display; English titles &
   body: Inter (the Glirock / Montserrat files below stay available). Arabic headlines: Alexandria; Arabic
   titles & body: Montserrat Arabic is not on Google Fonts, so Noto Sans Arabic
   stands in. Each stack lists the Arabic face after the Latin one, so the
   browser falls back per glyph and no [dir="rtl"] override is needed. */
@font-face { font-family: "Glirock"; src: url("fonts/Glirock-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.otf") format("opentype"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.otf") format("opentype"); font-weight: 700 900; font-style: normal; font-display: swap; }

*{
   font-family: var(--font-body);
   box-sizing: border-box;
}
:root {
  --font-heading: "Playfair Display", "Alexandria", Georgia, serif;
  --font-body: "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #111;
  line-height: 1.5;
  --adi-black: #000000;
  --adi-white: #ffffff;
  --adi-gray-100: #f5f5f5;
  --adi-gray-200: #e5e5e5;
  --adi-gray-500: #767677;
  --adi-red: #e4002b;
}

/* ---- Athletic / sports-retail type system ---------------------------
   Bold, condensed, uppercase headings and CTAs — high-contrast black &
   white with tight tracking, in the spirit of a sportswear flagship
   site. Applied globally; section-level rules with higher specificity
   still take precedence where a section wants its own treatment. */
h1, h2, h3, h4,
.heading, .section-title, .section-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

/* The global `*` rule sets the body font on every element, which would beat
   the heading font inherited by spans/links inside a heading. */
h1 *, h2 *, h3 *, h4 *,
.heading *, .section-title *, .section-heading * {
  font-family: inherit;
}

button, .btn, [class*="btn-"], [class$="__cta"], [class*="add-to-cart"], input[type="submit"] {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

html {
  /* overflow-x: hidden here would implicitly force overflow-y to compute
     as "auto" (per spec, an axis set to a non-visible value forces the
     other to auto if it was visible), turning <html> into a scroll
     container. That breaks position: sticky for every descendant on the
     page (the menu page's sticky sidebar/section nav included), since a
     sticky element sticks to its nearest scrolling ancestor, not
     necessarily the viewport anymore. overflow-x: clip prevents the same
     horizontal overflow without creating that scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
}

.container {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 1rem;
}

a {
  color: inherit;
}

/* Arabic: every text (headings, body, buttons, inputs) uses the same face as
   the header's text — Noto Sans Arabic — so Arabic pages read as one family
   instead of falling back per element to a system serif. */
:root { --font-ar: "Noto Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[dir="rtl"],
[dir="rtl"] *,
:lang(ar),
:lang(ar) * {
  font-family: var(--font-ar) !important;
}

/* RTL — grid + flexbox mirror automatically. Body text alignment is
   the one detail the user always notices, so set it here. */
[dir="rtl"] body {
  text-align: right;
  font-family: var(--font-body);
}

/* ---- Directional icon mirroring -------------------------------------
   Any arrow/chevron glyph that encodes a left-right direction (view-all
   arrows, continue/checkout arrows, carousel prev/next controls, picker
   chevrons, etc.) should point the opposite way in Arabic/RTL layouts.
   Add class="icon-flip-rtl" to the <svg> itself — not to icons that
   aren't inherently directional (cart, user, pin, search, up/down
   carets used purely for open/close state). */
[dir="rtl"] .icon-flip-rtl {
  transform: scaleX(-1);
}

/* ---- Cart badge bump ------------------------------------------------------
   Brief pulse on the header cart icon right after a successful add, played
   from theme.js alongside opening the cart drawer (see
   ".js-add-to-cart-form" handler there). */

.cart-link.cx-cart-bump {
  animation: cxCartBump 0.4s ease;
}

@keyframes cxCartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-link.cx-cart-bump {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================
   Shared flash alert — same look as the server-rendered flash in
   layout/theme.liquid (centered card, dimmed backdrop, icon, OK
   button), but built here as reusable classes so any script can
   trigger the same popup client-side (e.g. geolocation errors) without
   waiting on a page reload. See theme.js `showFlashError`.
   =================================================================== */
@keyframes flash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes flash-pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.js-flash-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(17, 17, 17, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: flash-fade-in 0.15s ease;
}

.js-flash {
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 2.25rem 2rem 1.75rem;
  border-radius: 3px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  background: #fff;
  animation: flash-pop-in 0.2s ease;
}

.js-flash--error { color: #7f1d1d; }
.js-flash--success { color: #14532d; }
.js-flash--info { color: #0c4a6e; }

.js-flash__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.js-flash--error .js-flash__icon { background: #fef2f2; color: #dc2626; }
.js-flash--success .js-flash__icon { background: #f0fdf4; color: #16a34a; }
.js-flash--info .js-flash__icon { background: #f0f9ff; color: #0284c7; }

.js-flash__msg {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.js-flash__close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.45;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.js-flash__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.js-flash__ok {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border: 0;
  cursor: pointer;
  border-radius: 2px;
  padding: 0.7rem 2.5rem;
  background: var(--accent-color, #111);
  color: #fff;
  transition: opacity 0.15s ease;
}

.js-flash__ok:hover { opacity: 0.9; }

/* ---- Section scroll reveal (fade-in on scroll) ----------------------------
   The .cx-reveal class is added purely by JS (assets/theme.js), one section
   at a time, the first time each one enters the viewport — never in markup
   or here on its own, so a visitor without JS (or with an old browser that
   lacks IntersectionObserver) always sees full content immediately. */
.cx-reveal {
  /* Opacity only — deliberately no transform (and no "will-change:
     transform") here. Several sections (product zoom modal, cart drawer,
     checkout sticky bar, service widget) contain position: fixed elements
     that expect to sit relative to the viewport; a transform on this
     ancestor would turn them into its containing block instead and break
     them mid-page. */
  opacity: 0;
  transition: opacity 0.7s ease;
}

.cx-reveal.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cx-reveal {
    opacity: 1;
    transition: none;
  }
}

/* ---- Arabic typography ------------------------------------------------
   Arabic needs more line height than the tight Latin display settings, or the
   ascenders/descenders of neighbouring lines collide, and it must never be
   letter-spaced (that breaks the joined letterforms). */
[dir="rtl"] * {
  letter-spacing: 0 !important;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hb__title, [dir="rtl"] .km__title, [dir="rtl"] .km__name,
[dir="rtl"] .ev__title, [dir="rtl"] .ev__name, [dir="rtl"] .gl__title,
[dir="rtl"] .fs__title, [dir="rtl"] .tm__title, [dir="rtl"] .vs__title,
[dir="rtl"] .cb__title, [dir="rtl"] .menu-head__title, [dir="rtl"] .menu-section__title,
[dir="rtl"] .menu-item__title, [dir="rtl"] .cart-head__title, [dir="rtl"] .cart-summary__title,
[dir="rtl"] .cart-drawer__title, [dir="rtl"] .cx-cart-item__title, [dir="rtl"] .cx-product-card__title {
  line-height: 1.35;
}
[dir="rtl"] .hb__title, [dir="rtl"] .km__title, [dir="rtl"] .ev__title, [dir="rtl"] .gl__title,
[dir="rtl"] .fs__title, [dir="rtl"] .tm__title, [dir="rtl"] .vs__title, [dir="rtl"] .cb__title,
[dir="rtl"] .menu-head__title, [dir="rtl"] .cart-head__title {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
}