:root {
  --theme-bg: var(--fashion-bg, #fff9f9);
  --theme-bg-soft: var(--fashion-soft-bg, #fff1f2);
  --theme-bg-product: var(--fashion-card-bg, #f7ecee);
  --theme-primary: var(--fashion-accent, #cc313c);
  --theme-primary-soft: var(--fashion-footer-bg, #f8d4d7);
  --theme-text: var(--fashion-text, #2b2023);
  --theme-muted: var(--fashion-muted, #6b6264);
  --theme-border: var(--fashion-border, #efdadd);
  --theme-sale: var(--fashion-sale, #cc313c);
  --theme-success: var(--fashion-success, #315f49);
  --theme-star: #c38a22;
  --theme-white: #ffffff;
  --container-width: var(--fashion-page-width, 1450px);
  --gutter-desktop: var(--fashion-desktop-gutter, 32px);
  --gutter-tablet: 22px;
  --gutter-mobile: var(--fashion-mobile-gutter, 14px);
  --section-spacing-desktop: var(--fashion-page-space, 72px);
  --section-spacing-mobile: 48px;
  --radius-small: var(--fashion-button-radius, 0);
  --radius-medium: var(--fashion-card-radius, 0);
  --header-height: 70px;
  --announcement-height: 30px;
  --motion-fast: 160ms;
  --motion-standard: 300ms;
  --motion-slow: 650ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html { overflow-x: clip; }
body { min-width: 0; overflow-x: clip; background: var(--theme-bg); color: var(--theme-text); }
img, video, svg { max-width: 100%; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 3px;
}

body[data-fashion-motion="false"] *,
body[data-fashion-motion="false"] *::before,
body[data-fashion-motion="false"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

[dir="rtl"] .fashion-banner__video-control { right: auto; left: max(18px, 2.4vw); }
[dir="rtl"] .fashion-banner__copy[data-align="left"] { align-items: flex-start; text-align: right; }
[dir="rtl"] .fashion-banner__copy[data-align="right"] { align-items: flex-end; text-align: left; }
[dir="rtl"] .fashion-shop-look__item b,
[dir="rtl"] [data-flip-icon-in-rtl] svg { transform: scaleX(-1); }

@media (max-width: 900px) {
  :root { --section-spacing-desktop: var(--section-spacing-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
