/* ==========================================================================
   NEXUS — base layer
   Tokens · reset · typography · layout · buttons · forms · motion states
   All direction-sensitive rules use logical properties for RTL.
   ========================================================================== */

/* ---------- Experience modes ---------- */
:root {
  --skew: 0deg;
  --label-tracking: 0.14em;
  --heading-lh: 0.95;
  --heading-weight: var(--font-heading-weight);
  --display-size: clamp(3rem, 8.4vw, 9.5rem);
  --h1: clamp(2.4rem, 5.2vw, 5.6rem);
  --h2: clamp(2rem, 3.8vw, 4rem);
  --h3: clamp(1.35rem, 2vw, 1.9rem);
  --h4: 1.15rem;
  --body: calc(1rem * var(--body-scale));
  --small: calc(0.875rem * var(--body-scale));
  --tiny: calc(0.72rem * var(--body-scale));
  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --glow-shadow: 0 0 calc(32px * var(--glow)) rgb(var(--c-accent-rgb) / calc(0.55 * var(--glow)));
  --rule: linear-gradient(90deg, var(--c-border), transparent);
}
[data-experience='arena'] {
  --skew: -10deg;
  --label-tracking: 0.08em;
  --heading-lh: 0.88;
  --display-size: clamp(3.4rem, 10vw, 11rem);
  --h1: clamp(2.8rem, 6.4vw, 6.6rem);
  --h2: clamp(2.2rem, 4.6vw, 4.8rem);
}
[data-experience='void'] {
  --label-tracking: 0.32em;
  --heading-lh: 1.02;
  --display-size: clamp(2.6rem, 7vw, 8rem);
  --h1: clamp(2.2rem, 4.6vw, 4.8rem);
  --h2: clamp(1.8rem, 3.2vw, 3.4rem);
  --glow-shadow: 0 0 calc(80px * var(--glow)) rgb(var(--c-accent-2-rgb) / calc(0.35 * var(--glow)));
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
  overflow-x: clip;
}
html[data-fx='full'], html[data-fx='reveal'] { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[lang^='ar'] body { font-family: var(--font-body), var(--font-arabic); }
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:where(ul[role='list'], ol[role='list'], .list-reset) { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
[hidden] { display: none !important; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.main:focus { outline: none; }

/* ---------- Color scheme surface ---------- */
[class*='color-scheme-'] { color: var(--c-text); background: var(--c-bg-gradient, var(--c-bg)); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-style: var(--font-heading-style);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-case);
  text-wrap: balance;
}
[lang^='ar'] :is(h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4) {
  font-family: var(--font-heading), var(--font-arabic);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}
.h0 { font-size: calc(var(--display-size) * var(--heading-scale)); }
h1, .h1 { font-size: calc(var(--h1) * var(--heading-scale)); }
h2, .h2 { font-size: calc(var(--h2) * var(--heading-scale)); }
h3, .h3 { font-size: calc(var(--h3) * var(--heading-scale)); line-height: 1.1; }
h4, .h4 { font-size: calc(var(--h4) * var(--heading-scale)); line-height: 1.2; }
:is(h1, h2, h3, .h0, .h1, .h2) em {
  font-style: normal;
  color: var(--c-accent);
}
[data-experience='void'] :is(h1, h2, .h0, .h1, .h2) em {
  color: inherit;
  font-style: italic;
  opacity: 0.6;
}
[data-experience='arena'] :is(.h0, .h1) { font-style: italic; }
/* Italic glyphs overhang their box; the kinetic-text word masks must not clip them. */
:is([data-experience='arena'], [data-experience='void']) .split-word { padding-inline-end: 0.12em; margin-inline-end: -0.12em; }

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--tiny);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  line-height: 1.4;
}
[lang^='ar'] :is(.label, .eyebrow) { letter-spacing: 0; font-family: var(--font-body), var(--font-arabic); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  color: var(--c-muted);
}
.eyebrow__index { color: var(--c-accent); }
.eyebrow::before {
  content: '';
  inline-size: 24px;
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
}
[data-experience='void'] .eyebrow::before { display: none; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--c-muted); max-inline-size: 60ch; }
.muted { color: var(--c-muted); }
.rte > * + * { margin-block-start: 1em; }
.rte :is(h2, h3, h4) { margin-block-start: 1.6em; }
.rte a { color: var(--c-accent); }
.rte img { margin-block: 1.5em; }
.rte ul, .rte ol { padding-inline-start: 1.4em; }
.rte blockquote {
  border-inline-start: 2px solid var(--c-accent);
  padding-inline-start: 1.2em;
  font-size: 1.2em;
}
.rte table td, .rte table th { border: 1px solid var(--c-border); padding: 0.5em 0.8em; }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.page-width {
  inline-size: 100%;
  max-inline-size: calc(var(--page-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-width--narrow { max-inline-size: calc(860px + var(--gutter) * 2); }
.full-bleed { inline-size: 100%; }
.section {
  position: relative;
  padding-block: var(--pt, var(--section-space)) var(--pb, var(--section-space));
}
.section--flush { padding-block: 0; }
@media (max-width: 749px) {
  .section { padding-block: calc(var(--pt, var(--section-space)) * 0.62) calc(var(--pb, var(--section-space)) * 0.62); }
}
.stack > * + * { margin-block-start: var(--stack, 1rem); }
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr));
}
@media (min-width: 750px) { .grid { grid-template-columns: repeat(var(--cols-tablet, var(--cols, 3)), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.75rem); align-items: center; }
.split { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.center { text-align: center; }
.align-center { text-align: center; margin-inline: auto; }
.align-end { text-align: end; margin-inline-start: auto; }
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 1000;
  /* `translate` composes with any experience-mode transform (e.g. Arena's skewed buttons) */
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }
.hide-mobile { display: none !important; }
@media (min-width: 750px) {
  .hide-mobile { display: revert !important; }
  .hide-desktop { display: none !important; }
}

/* ---------- Media frames ---------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius);
  isolation: isolate;
}
[data-corners='chamfer'] .frame,
[data-corners='chamfer'] .chamfer {
  border-radius: 0;
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
}
.ratio--square { aspect-ratio: 1; }
.ratio--portrait { aspect-ratio: 4 / 5; }
.ratio--landscape { aspect-ratio: 4 / 3; }
.ratio--wide { aspect-ratio: 16 / 9; }
.ratio--cinema { aspect-ratio: 21 / 9; }
.ratio--adapt { aspect-ratio: var(--ratio, 1); }
.frame > img, .frame > picture > img, .frame > video, .frame > .placeholder, .media-fill {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.fit--contain > img, .fit--contain .card__img { object-fit: contain; padding: 6%; }
.placeholder { color: var(--c-text); background: var(--c-surface); overflow: hidden; }
.placeholder svg { inline-size: 100%; block-size: 100%; }
.media-fill-wrap { position: absolute; inset: 0; overflow: hidden; }

/* HUD corner brackets — drawn with gradients so they don't add DOM weight */
.hud-corners {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  --hud-c: var(--c-accent);
  --hud-l: 14px;
  background:
    linear-gradient(var(--hud-c), var(--hud-c)) top left / var(--hud-l) 1px,
    linear-gradient(var(--hud-c), var(--hud-c)) top left / 1px var(--hud-l),
    linear-gradient(var(--hud-c), var(--hud-c)) top right / var(--hud-l) 1px,
    linear-gradient(var(--hud-c), var(--hud-c)) top right / 1px var(--hud-l),
    linear-gradient(var(--hud-c), var(--hud-c)) bottom left / var(--hud-l) 1px,
    linear-gradient(var(--hud-c), var(--hud-c)) bottom left / 1px var(--hud-l),
    linear-gradient(var(--hud-c), var(--hud-c)) bottom right / var(--hud-l) 1px,
    linear-gradient(var(--hud-c), var(--hud-c)) bottom right / 1px var(--hud-l);
  background-repeat: no-repeat;
  transition: opacity var(--dur-2) var(--ease-out), inset var(--dur-2) var(--ease-out);
}
[data-hud] .hud-corners--always { opacity: 0.7; }
html:not([data-hud]) .hud-corners { display: none; }

/* ---------- Buttons ---------- */
.button {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-on-accent);
  --btn-bd: var(--c-accent);
  --btn-pad-x: 1.6em;
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-block-size: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  font-family: var(--font-mono);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: var(--button-case);
  text-decoration: none;
  line-height: 1.1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--radius);
  isolation: isolate;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
[lang^='ar'] .button { letter-spacing: 0; font-family: var(--font-body), var(--font-arabic); }
[data-corners='chamfer'] .button {
  border-radius: 0;
  clip-path: polygon(calc(var(--chamfer) * 0.75) 0, 100% 0, 100% calc(100% - var(--chamfer) * 0.75), calc(100% - var(--chamfer) * 0.75) 100%, 0 100%, 0 calc(var(--chamfer) * 0.75));
}
[data-experience='arena'] .button { transform: skewX(var(--skew)); }
[data-experience='arena'] .button > * { transform: skewX(calc(var(--skew) * -1)); }
.button .icon { inline-size: 1.25em; block-size: 1.25em; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.button:hover .icon-arrow, .button:hover .icon-arrow-long { transform: translateX(4px); }
[dir='rtl'] .button:hover :is(.icon-arrow, .icon-arrow-long) { transform: scaleX(-1) translateX(4px); }
.button::after {
  /* light sweep */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0s;
}
[data-cinematic][data-fx='full'] .button:hover::after { transform: translateX(120%); transition: transform var(--dur-4) var(--ease-out); }
.button:hover { box-shadow: var(--glow-shadow); }
.button:active { translate: 0 1px; }
.button--primary { /* defaults */ }
[data-button='outline'] .button--primary,
.button--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--btn-bd);
}
[data-button='outline'] .button--primary:hover, .button--outline:hover { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); }
.button--secondary {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.button--secondary:hover { --btn-bg: var(--c-text); --btn-fg: var(--c-bg); box-shadow: none; }
.button--ghost { --btn-bg: transparent; --btn-fg: var(--c-text); --btn-pad-x: 0; min-block-size: 40px; }
.button--ghost:hover { --btn-fg: var(--c-accent); box-shadow: none; }
.button--small { --btn-h: 40px; --btn-pad-x: 1.1em; font-size: var(--tiny); }
.button--large { --btn-h: 60px; --btn-pad-x: 2.2em; }
.button--full { inline-size: 100%; }
[data-button='split'] .button--primary .icon {
  margin-inline-end: calc(var(--btn-pad-x) * -0.4);
  padding-inline-start: 0.75em;
  box-sizing: content-box;
  border-inline-start: 1px solid rgb(0 0 0 / 0.2);
  block-size: 100%;
}
.button[disabled], .button[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.button.is-loading .button__label, .button.is-loading .icon { opacity: 0; }
.button__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.button.is-loading .button__spinner { opacity: 1; animation: spin 0.7s linear infinite; }
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-2);
}
[dir='rtl'] .link { background-position: 100% 100%; }
.link:hover { background-size: 100% 1px; color: var(--c-accent); }
.link .icon { inline-size: 1.1em; block-size: 1.1em; }
.icon { inline-size: 20px; block-size: 20px; flex: none; }
[dir='rtl'] .icon--dir { transform: scaleX(-1); }
.icon-button {
  /* flex (not grid): extra children such as the cart badge wrapper can never create implicit rows
     that push the icon off-centre */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  line-height: 0;
  color: inherit;
  border-radius: var(--radius);
  transition: color var(--dur-1), background var(--dur-1);
}
.icon-button:hover { color: var(--c-accent); }

/* ---------- Forms ---------- */
.field { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-family: var(--font-mono); font-size: var(--tiny); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.input, .select, .textarea {
  inline-size: 100%;
  min-block-size: 50px;
  padding: 0.8em 1em;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.input::placeholder, .textarea::placeholder { color: var(--c-muted); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(var(--c-accent-rgb) / 0.2); }
.select {
  appearance: none;
  padding-inline-end: 2.6em;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
[dir='rtl'] .select { background-position: 15px 50%, 20px 50%; }
.textarea { min-block-size: 120px; resize: vertical; }
.checkbox { display: inline-flex; gap: 0.6em; align-items: center; cursor: pointer; }
.checkbox input { accent-color: var(--c-accent); inline-size: 18px; block-size: 18px; }
.form-message { padding: 0.8em 1em; border: 1px solid; font-size: var(--small); }
.form-message--success { color: var(--c-success); border-color: currentColor; }
.form-message--error { color: var(--c-sale); border-color: currentColor; }
.form-message ul { margin-block-start: 0.4em; padding-inline-start: 1.2em; }

/* ---------- Effects ---------- */
.fx-grain {
  position: fixed;
  inset: 0;
  /* Viewport-sized and contained: an oversized animated layer was counted as layout shift */
  contain: strict;
  z-index: 900;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-fx='full'][data-cinematic] .fx-grain { animation: grain 1.2s steps(6) infinite; }
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.fx-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-cursor][data-fx='full'] .fx-cursor { display: block; }
  html[data-cursor][data-fx='full'] body, html[data-cursor][data-fx='full'] a, html[data-cursor][data-fx='full'] button { cursor: none; }
  html[data-cursor][data-fx='full'] :is(input, textarea, select) { cursor: auto; }
}
.fx-cursor__dot, .fx-cursor__ring {
  position: fixed;
  inset-block-start: 0;
  left: 0;
  z-index: 1001;
  pointer-events: none;
  border-radius: 50%;
  translate: var(--cx, -100px) var(--cy, -100px);
}
.fx-cursor__dot { inline-size: 6px; block-size: 6px; margin: -3px; background: var(--c-accent); }
.fx-cursor__ring {
  inline-size: 36px; block-size: 36px; margin: -18px;
  border: 1px solid rgb(var(--c-text-rgb) / 0.5);
  translate: var(--rx, -100px) var(--ry, -100px);
  transition: inline-size var(--dur-2) var(--ease-out), block-size var(--dur-2) var(--ease-out), margin var(--dur-2) var(--ease-out), border-color var(--dur-2), background var(--dur-2);
}
.fx-cursor.is-hover .fx-cursor__ring { inline-size: 64px; block-size: 64px; margin: -32px; border-color: var(--c-accent); background: rgb(var(--c-accent-rgb) / 0.08); }

/* ---------- Motion: reveal system ----------
   html[data-fx] is resolved in <head>; content is only hidden when JS + motion are on,
   so no-JS and reduced-motion visitors always see content. */
html[data-reveals]:is([data-fx='full'], [data-fx='reveal']) [data-reveal]:not(.is-in) {
  opacity: 0;
}
html[data-reveals][data-fx='full'] [data-reveal='rise']:not(.is-in) { transform: translate3d(0, 40px, 0); }
html[data-reveals][data-fx='full'] [data-reveal='scale']:not(.is-in) { transform: scale(0.94); }
html[data-reveals][data-fx='full'] [data-reveal='mask']:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); }
html[data-reveals][data-fx='full'] [data-reveal='side']:not(.is-in) { transform: translate3d(calc(48px * var(--dir, 1)), 0, 0); }
[dir='rtl'] { --dir: -1; }
html[data-reveals]:is([data-fx='full'], [data-fx='reveal']) [data-reveal] {
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out),
    clip-path var(--dur-4) var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 70ms / var(--motion-speed));
}
html[data-fx='reveal'] [data-reveal] { transition-duration: var(--dur-3); }

/* Kinetic headings: words are wrapped by JS ([data-split]) */
.split-word { display: inline-block; overflow: clip; vertical-align: top; padding-block: 0.06em; margin-block: -0.06em; }
.split-word__inner { display: inline-block; }
html[data-kinetic][data-fx='full'] [data-split]:not(.is-in) .split-word__inner { transform: translate3d(0, 110%, 0) rotate(4deg); }
html[data-kinetic][data-fx='full'] [data-split] .split-word__inner {
  transition: transform var(--dur-4) var(--ease-out);
  transition-delay: calc((var(--w, 0) * 45ms + var(--d, 0ms)) / var(--motion-speed));
  transform-origin: 0 100%;
}
html[data-kinetic][data-fx='full'] [data-split] { opacity: 1 !important; transform: none !important; }

/* Static fallbacks for reduced/none */
html:is([data-fx='reveal'], [data-fx='none']) [data-depth],
html:not([data-parallax]) [data-depth] { transform: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes grain {
  0% { background-position: 0 0; }
  20% { background-position: -48px 32px; }
  40% { background-position: 32px -48px; }
  60% { background-position: -24px -24px; }
  80% { background-position: 48px 24px; }
  100% { background-position: 0 0; }
}
@keyframes marquee { to { transform: translate3d(calc(-50% * var(--dir, 1)), 0, 0); } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
html[data-fx='none'] *, html[data-fx='none'] *::before, html[data-fx='none'] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}

/* Native cross-document page transitions (progressive enhancement) */
/* @view-transition is emitted by snippets/theme-styles.liquid only when enabled */
/* The outgoing page must stay fully visible until the next page is ready; fading it out first left a blank screen
   (CTAs appeared to vanish) on slow navigations. Only the incoming page animates. */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
@keyframes vt-in { from { opacity: 0; } }
html:is([data-fx='reveal'], [data-fx='none']) ::view-transition-group(*),
html.no-page-transitions ::view-transition-group(*) { animation: none !important; }

/* ---------- Mixed-direction content in RTL ----------
   Merchant copy is often left in English on an Arabic storefront. Letting each text block take its
   direction from its own first strong character keeps punctuation and numbers in the right place. */
[dir='rtl'] :is(p, li, dt, dd, td, th, h1, h2, h3, h4, h5, h6, blockquote, figcaption, label, summary, .label, .button__label, .eyebrow span) {
  unicode-bidi: plaintext;
}
.ltr-nums { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.gallery__index, .slider__counter, .hshow__num, .catmx__index, .price__current, .price__compare, .cart-count, .countdown__value, [data-count-to] { direction: ltr; unicode-bidi: isolate; }

/* The skip link is also a .button (position: relative); keep it out of the flow so it never reserves space */
.skip-link.button { position: fixed; }
/* Dialog wrappers are behaviour-only; they must not create empty inline line boxes */
nx-dialog { display: contents; }

/* Demo photography fallback (placeholder snippet) */
.placeholder--photo { position: relative; overflow: hidden; background: var(--c-surface); }
.placeholder__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.placeholder__tag { position: absolute; inset-block-end: 10px; inset-inline-end: 12px; z-index: 2; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; padding: 0.15em 0.5em; color: var(--c-text); background: rgb(var(--c-bg-rgb) / 0.7); }

/* Grid/flex children are their own bidi paragraphs: let short labels resolve direction from their own text */
[dir='rtl'] :is(.trust li > span, .cart-trust span, .delivery__text > *, .key-specs dd, .badge, .chip, .price__save, .complementary__title, .card__title, .cart-line__title) { unicode-bidi: plaintext; }