@import url('./styles/layout.css');
@import url('./styles/product.css');
@import url('./styles/commerce.css');
@import url('./styles/themes/shared.css');
@import url('./styles/themes/streetwear.css');
@import url('./styles/themes/blue-court.css');
@import url('./styles/themes/red-campaign.css');

:root {
  --black:#101010; --white:#fff; --red:#df101a;
  --page-bg:#df101a; --ink:#fff; --muted:#ffe7e9; --line:#ff848b; --soft:#fff2f2;
  --accent:#ba0912; --action-bg:#101010; --action-ink:#fff;
  --field-bg:#fff; --field-ink:#101010; --header-bg:#080808; --header-ink:#fff;
  --font:'Tajawal',Tahoma,Arial,sans-serif;
  --display-font:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --space:clamp(20px,4vw,64px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page-bg); color:var(--ink); font:400 1rem/1.65 var(--font); }
html[lang=en] { --font:'Manrope',Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:not-allowed; opacity:.55; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.25; font-weight:800; }
h1 { font-size:clamp(2rem,4vw,3.5rem); }
h2 { font-size:clamp(1.5rem,3vw,2.25rem); }
h3 { font-size:1.125rem; }
input,textarea,select { border:1px solid var(--line); background:var(--field-bg); color:var(--field-ink); padding:12px 14px; min-height:48px; border-radius:0; max-width:100%; }
input::placeholder,textarea::placeholder { color:var(--field-ink); opacity:.75; }
button svg,a svg { flex-shrink:0; }
.icon { vertical-align:middle; }
.button,.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--action-bg); color:var(--action-ink); border:1px solid var(--action-bg); padding:13px 24px; min-height:48px; font-weight:700; line-height:1.3; border-radius:0; transition:filter .18s ease; }
.button:hover,.btn:hover { filter:brightness(1.12); }
.button--secondary,.btn-secondary { background:var(--field-bg); color:var(--field-ink); border:1px solid var(--line); }
.button--secondary:hover,.btn-secondary:hover { filter:brightness(.95); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:0; background:transparent; }
.container { max-width:1440px; margin-inline:auto; padding-inline:var(--space); }
.muted { color:var(--muted); }
.small { font-size:.875rem; }
.link { text-decoration:underline; text-underline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:100; inset-block-start:8px; inset-inline-start:8px; padding:8px; background:var(--field-bg); color:var(--field-ink); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.initial-message { padding:100px 24px; text-align:center; }
.page-error { padding:80px 24px; max-width:700px; margin:auto; text-align:center; }
.page-error p { margin-block:20px; }
#toast { position:fixed; inset-block-end:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--action-bg); color:var(--action-ink); padding:14px 24px; z-index:60; max-width:calc(100vw - 32px); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
#toast.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }
.notice { background:var(--soft); color:var(--ink); padding:16px; font-size:.9375rem; line-height:1.7; }
.visually-empty { padding:64px 0; text-align:center; }
.visually-empty h2 { margin-block-end:12px; }
.visually-empty .button { margin-block-start:24px; }
#view { min-height:50vh; outline:none; }
[hidden] { display:none!important; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }