:root {
--r-shell: 40px;
--r-promo: 28px;
--r-panel: 24px;
--r-card: 24px;
--r-card-compact: 18px;
--r-modal: 16px;
--r-box: 12px;
--r-swatch: 10px;
--r-btn: 10px;
--r-btn-sm: 8px;
--r-input: 6px;
--r-label: 6px;
--r-pill: 999px;
--slant: 15deg;
--promo-skew: -2.5deg;
--gutter: 32px;
--gap-panel: 16px;
--nav-h: 56px;
--nav-inset: 20px;
--cat-size: 94px;
--swatch: 62px;
--thumb: 92px;
--rail-gap: 16px;
--grid-row-gap: 48px;
--dot: 10px;
--dot-active-w: 26px;
--dot-gap: 6px;
--dot-idle-dark: rgba(240, 240, 240, 0.95);
--dot-idle-light: rgba(206, 199, 192, 0.95);
--shadow-nav: 0 10px 24px rgba(0, 0, 0, 0.08);
--shadow-float: 0 14px 34px rgba(0, 0, 0, 0.07), inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
--shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.06);
--shadow-icon: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
--shadow-product: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.14));
--ease: cubic-bezier(.2, .7, .2, 1);
--t-fast: 180ms;
--t-med: 320ms;
--autoplay: 4500ms;
}
@media (prefers-reduced-motion: reduce) {
:root { --t-fast: 0ms;  --t-med: 0ms;  }
}