/* 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=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&subset=arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

*{
   font-family: "Archivo", "Zain", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   box-sizing: border-box;
}
:root {
  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: "Archivo", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

button, .btn, [class*="btn-"], [class$="__cta"], [class*="add-to-cart"], input[type="submit"] {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

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 {
  background: var(--page-bg, #f5f2ec);
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
}

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

a {
  color: inherit;
}

/* 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: "Zain", "Segoe UI", Tahoma, sans-serif;
}

/* ---- 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;
  }
}