/* Semantic HTML + opt-in ui-* classes: reusable without a framework. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: calc(var(--header-height) + var(--space-6)); }
body {
  margin: 0;
  background:
    linear-gradient(118deg, transparent 0 13%, rgb(23 25 28 / .025) 13% 13.12%, transparent 13.12% 71%, rgb(255 255 255 / .8) 71% 82%, transparent 82%),
    radial-gradient(circle at 12% 8%, var(--color-surface) 0, transparent 30rem),
    linear-gradient(145deg, var(--color-canvas), var(--color-background));
  color: var(--color-text-primary);
  font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-body);
}
body.ui-scroll-locked { overflow: hidden; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: var(--leading-heading); font-weight: var(--weight-bold); text-wrap: balance; }
.ui-h1, .ui-h2, .ui-h3 { line-height: var(--leading-heading); font-weight: var(--weight-bold); }
h1, .ui-h1 { font-size: var(--text-h1); }
h2, .ui-h2 { font-size: var(--text-h2); }
h3, .ui-h3 { font-size: var(--text-h3); }
.ui-caption { font-size: var(--text-caption); }
.ui-small { font-size: var(--text-small); }
.ui-body { font-size: var(--text-body); }
.ui-lead { font-size: var(--text-lead); }
.ui-muted { color: var(--color-text-secondary); }
.ui-code { font-family: var(--font-mono); font-size: var(--text-caption); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.ui-technical { direction: ltr; unicode-bidi: isolate; }
.ui-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset);
}
.ui-container { inline-size: min(100% - var(--page-gutter) * 2, var(--container-size, var(--container-content))); margin-inline: auto; }
.ui-container--reading { --container-size: var(--container-reading); }
.ui-container--wide { --container-size: var(--container-wide); }
.ui-page-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 4%, var(--color-primary-faint), transparent 26rem),
    repeating-linear-gradient(125deg, transparent 0 5.5rem, rgb(23 25 28 / .018) 5.5rem 5.56rem),
    linear-gradient(150deg, var(--color-surface-soft), var(--color-background) 52%, var(--color-canvas));
}
.ui-page-surface::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background: linear-gradient(112deg, transparent 0 64%, rgb(255 255 255 / .58) 64% 76%, transparent 76%);
}
.ui-section-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-surface);
}
.ui-section-surface--soft {
  background:
    radial-gradient(circle at 84% 14%, var(--color-primary-faint), transparent 20rem),
    linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-muted));
}
.ui-section-surface--pattern::before,
.ui-section-surface--hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 17%, rgb(40 40 40 / .025) 17% 17.12%, transparent 17.12% 64%, rgb(255 255 255 / .72) 64% 78%, transparent 78%),
    radial-gradient(circle at 9% 74%, transparent 0 9rem, rgb(200 27 28 / .07) 9.05rem 9.18rem, transparent 9.24rem);
}
.ui-section-surface--hero {
  background:
    radial-gradient(circle at 12% 42%, var(--color-primary-faint), transparent 26rem),
    linear-gradient(138deg, var(--color-surface) 0 58%, var(--color-surface-soft) 100%);
}
.ui-section-surface--accent::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(200 27 28 / .035));
  clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%);
}
.ui-surface-industrial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-brand-glow), var(--pattern-industrial-lines), var(--gradient-section);
}
.ui-surface-industrial::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -11rem;
  inset-block-start: -15rem;
  inline-size: 34rem;
  aspect-ratio: 1;
  border: var(--border-width) solid var(--border-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(220 21 27 / .025), 0 0 0 9rem rgb(23 25 28 / .018);
  pointer-events: none;
}
.ui-hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block-end: var(--border-width) solid var(--border-subtle);
}
.ui-hero-shell--compact { min-block-size: 20rem; }
.ui-hero-content {
  position: relative;
  padding: var(--panel-padding);
  border: var(--border-width) solid var(--border-panel);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-panel);
  background: rgb(255 255 255 / .76);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}
.ui-section-title {
  max-inline-size: var(--container-reading);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-primary);
}
.ui-section-title > :is(h1, h2, h3) { letter-spacing: -.025em; }
.ui-eyebrow {
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
}
.ui-panel {
  position: relative;
  overflow: hidden;
  padding: var(--panel-padding);
  border: var(--border-width) solid var(--border-panel);
  border-radius: var(--radius-panel);
  background: var(--gradient-panel);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}
.ui-panel--accent { border-block-start: 3px solid var(--color-primary); }
.ui-panel--raised { box-shadow: var(--shadow-panel-raised); }
.ui-panel--flush { padding: 0; }
.ui-surface-level-0 { background: var(--surface-section-soft); }
.ui-surface-level-1 { background: var(--surface-panel); box-shadow: var(--shadow-panel); }
.ui-surface-level-2 { background: var(--surface-panel-strong); box-shadow: var(--shadow-panel-raised); }
.ui-info-block {
  position: relative;
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-panel);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--gradient-panel);
  box-shadow: var(--shadow-panel);
}
.ui-stat-block { min-block-size: 8.5rem; }
.ui-stat-block__value { color: var(--color-primary); font-size: var(--text-h2); line-height: var(--leading-heading); }
.ui-filter-panel {
  padding: var(--panel-padding);
  border: var(--border-width) solid var(--border-panel);
  border-block-start: 3px solid var(--color-primary);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}
.ui-sidebar {
  position: relative;
  align-self: start;
  padding: var(--panel-padding);
  overflow: hidden;
  border: var(--border-width) solid var(--border-panel);
  border-block-start: 3px solid var(--color-primary);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}
.ui-sidebar::after {
  content: "";
  position: absolute;
  inset-inline-end: -4rem;
  inset-block-end: -4rem;
  inline-size: 9rem;
  aspect-ratio: 1;
  border: var(--border-width) solid var(--border-accent);
  border-radius: 50%;
  pointer-events: none;
}
.ui-sidebar--dark {
  border-color: rgb(255 255 255 / .2);
  border-block-start-color: var(--color-primary);
  background: var(--surface-panel-dark);
  color: var(--color-surface);
}
.ui-sidebar--dark .ui-muted { color: rgb(255 255 255 / .68); }
.ui-sidebar--dark :is(.ui-divider, .ui-info-block) { border-color: rgb(255 255 255 / .16); }
.ui-interactive-surface {
  transition: transform var(--motion-normal) var(--ease-emphasized), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
}
@media (hover: hover) {
  .ui-interactive-surface:hover { transform: translateY(var(--motion-lift-card)); border-color: var(--border-accent); box-shadow: var(--shadow-panel-raised); }
}
.ui-interactive-surface:active { transform: translateY(0); border-color: var(--color-primary); }
.ui-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); min-inline-size: 0; }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.ui-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.ui-grid > *, .ui-cluster > * { min-inline-size: 0; }
.ui-stack--tight { --stack-gap: var(--space-2); }
.ui-stack--loose { --stack-gap: var(--space-8); }
.ui-divider { border: 0; border-block-start: var(--border-width) solid var(--color-border); inline-size: 100%; margin-block: var(--space-6); }
.ui-button {
  --button-bg: var(--color-primary); --button-text: var(--color-on-primary); --button-border: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-inline-size: var(--control-height); min-block-size: var(--control-height); padding-block: var(--space-2); padding-inline: var(--space-6);
  border: var(--border-width) solid var(--button-border); border-radius: var(--radius-sm);
  background: var(--button-bg); color: var(--button-text); font-size: var(--text-small); font-weight: var(--weight-bold);
  line-height: var(--leading-control); text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 7px 18px rgb(220 21 27 / .16), inset 0 1px rgb(255 255 255 / .2);
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-emphasized);
}
.ui-button--secondary { --button-bg: rgb(255 255 255 / .86); --button-text: var(--color-text-primary); --button-border: var(--color-border-strong); box-shadow: var(--shadow-elevation-0); }
.ui-button--quiet { --button-bg: transparent; --button-text: var(--color-primary); --button-border: transparent; }
.ui-button--icon { min-inline-size: var(--control-height); padding-inline: var(--space-2); }
.ui-button--block { inline-size: 100%; }
@media (hover: hover) {
  .ui-button:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { --button-bg: var(--color-primary-hover); --button-border: var(--color-primary-hover); transform: translateY(var(--motion-lift-button)); box-shadow: var(--shadow-elevation-1); }
  .ui-button--secondary:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { --button-bg: var(--color-surface-secondary); --button-border: var(--color-text-secondary); }
  .ui-button--quiet:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { --button-bg: var(--color-primary-soft); --button-border: transparent; }
  :where(.ui-button, .ui-product-card, .home-category-tile):hover .ui-arrow { transform: translateX(var(--space-1)); }
  [dir="rtl"] :where(.ui-button, .ui-product-card, .home-category-tile):hover .ui-arrow { transform: scaleX(-1) translateX(var(--space-1)); }
}
.ui-button:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active,
.ui-button[aria-pressed="true"] { --button-bg: var(--color-primary-active); --button-border: var(--color-primary-active); --button-text: var(--color-on-primary); transform: translateY(0); box-shadow: var(--shadow-sm); }
.ui-button:is(:disabled, [aria-disabled="true"]) { --button-bg: var(--color-disabled-surface); --button-border: var(--color-border); --button-text: var(--color-disabled-text); cursor: not-allowed; }
.ui-button[aria-busy="true"] { cursor: wait; }
.ui-spinner { inline-size: var(--icon-size); block-size: var(--icon-size); border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; flex: 0 0 auto; animation: ui-spin var(--duration-spin) linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-link { color: var(--color-primary); text-decoration: underline; text-underline-offset: var(--space-1); text-decoration-thickness: var(--border-width); border-radius: var(--radius-sm); transition: color var(--transition-fast) var(--ease-standard); }
.ui-link:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.ui-link:active { color: var(--color-primary-active); }
.ui-link[aria-disabled="true"] { color: var(--color-disabled-text); cursor: not-allowed; }
.ui-link[aria-busy="true"] { cursor: wait; }
.ui-touch-link { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--control-height); min-block-size: var(--control-height); }
.ui-arrow { display: inline-block; font-family: var(--font-en); transition: transform var(--motion-normal) var(--ease-emphasized); }
[dir="rtl"] .ui-arrow { transform: scaleX(-1); }
.ui-field { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.ui-label { font-size: var(--text-small); font-weight: var(--weight-bold); }
.ui-hint, .ui-field-error, .ui-field-success { font-size: var(--text-caption); }
.ui-hint { color: var(--color-text-secondary); }
.ui-field-error { color: var(--color-error); }
.ui-field-success { color: var(--color-success); }
.ui-control {
  inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-height-lg);
  padding-block: var(--space-3); padding-inline: var(--space-3); background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: var(--text-body); line-height: var(--leading-control);
  transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}
.ui-control::placeholder { color: var(--color-text-secondary); opacity: 1; }
.ui-control:not(:disabled, [readonly]):hover { border-color: var(--color-text-primary); }
.ui-control:not(:disabled):active { border-color: var(--color-primary-active); }
.ui-control:focus-visible { border-color: var(--color-primary); }
.ui-control[aria-invalid="true"] { border-color: var(--color-error); }
.ui-field[data-status="success"] .ui-control { border-color: var(--color-success); }
.ui-control:disabled { color: var(--color-disabled-text); background: var(--color-disabled-surface); border-color: var(--color-border); opacity: 1; cursor: not-allowed; }
.ui-control[readonly] { background: var(--color-background); }
.ui-field[aria-busy="true"] { cursor: wait; }
textarea.ui-control { min-block-size: var(--textarea-height); resize: vertical; }
select.ui-control { cursor: pointer; }
.ui-card { border: var(--border-width) solid rgb(255 255 255 / .86); border-radius: var(--radius-lg); background: rgb(255 255 255 / .9); box-shadow: var(--shadow-elevation-1); overflow-wrap: anywhere; backdrop-filter: blur(18px); }
.ui-card__body { padding: var(--space-6); }
.ui-card__media { display: grid; place-content: center; gap: var(--space-2); aspect-ratio: var(--media-ratio); background: var(--color-surface-secondary); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); color: var(--color-text-secondary); text-align: center; }
.ui-card__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.ui-card--interactive { transition: transform var(--motion-normal) var(--ease-emphasized), box-shadow var(--motion-normal) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.ui-card--interactive:focus-within { border-color: var(--color-control-border); box-shadow: var(--shadow-elevation-2); }
@media (hover: hover) { .ui-card--interactive:hover { transform: translateY(var(--motion-lift-card)); border-color: var(--color-border-strong); box-shadow: var(--shadow-elevation-2); } }
.ui-card--interactive:active { border-color: var(--color-primary); }
.ui-card[aria-busy="true"] { cursor: wait; }
.ui-product-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; color: var(--color-text-primary); text-decoration: none; }
.ui-product-card__media { position: relative; overflow: hidden; border-end-start-radius: 0; border-end-end-radius: 0; }
.ui-product-card__media img { position: absolute; inset: 0; background: var(--color-surface); transition: transform var(--motion-slow) var(--ease-emphasized); }
.ui-product-card__image-fallback { display: grid; place-items: center; justify-items: center; gap: var(--space-2); min-block-size: 100%; padding: var(--space-4); }
.ui-product-card__body { display: flex; flex-direction: column; align-items: start; gap: var(--space-3); }
.ui-product-card__tags { gap: var(--space-2); }
.ui-product-card__taxonomy { min-block-size: calc(var(--space-6) * 2); font-size: var(--text-small); color: var(--color-text-secondary); }
.ui-product-card__variant { inline-size: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-block: var(--space-3); border-block: var(--border-width) solid var(--color-border); font-size: var(--text-small); }
.ui-product-card__fact { display: flex; flex-direction: column; gap: var(--space-1); }
.ui-product-card__fact--pyramid-tip { grid-column: 1 / -1; justify-self: center; inline-size: calc(50% - var(--space-3) / 2); }
.ui-product-card__fact-label { color: var(--color-text-secondary); font-size: var(--text-caption); }
.ui-product-card__cta { margin-block-start: auto; color: var(--color-primary); font-size: var(--text-small); font-weight: var(--weight-bold); }
.ui-product-card:hover .ui-product-card__cta, .ui-product-card:focus-visible .ui-product-card__cta { color: var(--color-primary-hover); }
@media (hover: hover) { .ui-product-card:hover .ui-product-card__media img { transform: scale(1.01); } }
.ui-metadata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); margin: 0; font-size: var(--text-small); }
.ui-metadata dd { margin: 0; text-align: end; }
.ui-metadata dt { color: var(--color-text-secondary); }
.ui-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding-block: var(--space-1); padding-inline: var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-medium); background: var(--color-surface-secondary); color: var(--color-text-secondary); }
.ui-badge--accent { color: var(--color-primary); background: var(--color-primary-soft); }
.ui-badge--success { color: var(--color-success); background: var(--color-success-soft); }
.ui-badge--warning { color: var(--color-warning); background: var(--color-warning-soft); }
.ui-badge--error { color: var(--color-error); background: var(--color-error-soft); }
.ui-alert { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-inline-start: var(--focus-width) solid var(--color-text-secondary); border-radius: var(--radius-sm); font-size: var(--text-small); background: var(--color-surface); }
.ui-alert--success { border-inline-start-color: var(--color-success); background: var(--color-success-soft); }
.ui-alert--warning { border-inline-start-color: var(--color-warning); background: var(--color-warning-soft); }
.ui-alert--error { border-inline-start-color: var(--color-error); background: var(--color-error-soft); }
.ui-alert__icon { flex: 0 0 auto; font-weight: var(--weight-bold); }
.ui-skeleton { display: block; inline-size: 100%; block-size: var(--space-4); background: var(--color-surface-secondary); border-radius: var(--radius-sm); animation: ui-pulse var(--duration-pulse) ease-in-out infinite alternate; }
.ui-skeleton--title { block-size: var(--space-6); inline-size: 70%; }
.ui-skeleton--short { inline-size: 55%; }
.ui-skeleton--media { block-size: auto; aspect-ratio: var(--media-ratio); }
@keyframes ui-pulse { to { opacity: var(--opacity-disabled); } }
.ui-state { display: flex; flex-direction: column; align-items: start; gap: var(--space-3); padding: var(--space-6); background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft)); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-elevation-0); }
.ui-state__symbol { display: grid; place-items: center; min-inline-size: var(--control-height); min-block-size: var(--control-height); border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-h3); }
.ui-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); background: rgb(255 255 255 / .88); border-block-end: var(--border-width) solid rgb(216 218 222 / .76); box-shadow: 0 1px rgb(255 255 255 / .72); backdrop-filter: blur(22px) saturate(1.2); transition: box-shadow var(--motion-normal) var(--ease-standard), background-color var(--motion-normal) var(--ease-standard); }
.ui-header.ui-header--scrolled { box-shadow: var(--shadow-floating); background: rgb(255 255 255 / .985); }
.ui-header__inner { min-block-size: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ui-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text-primary); text-decoration: none; min-block-size: var(--control-height); font-weight: var(--weight-bold); line-height: 1.25; }
.ui-brand::before { content: ""; inline-size: 3.05rem; block-size: 3.05rem; flex: 0 0 auto; border-radius: 50%; background: var(--color-surface) url("/assets/design-system/mirabedini-mark.jpg") center / 118% auto no-repeat; box-shadow: 0 0 0 1px var(--color-border-soft), 0 8px 20px rgb(20 22 25 / .09); }
.ui-brand__accent { display: none; }
.ui-desktop-nav { display: none; }
.ui-nav-link { display: inline-flex; align-items: center; min-block-size: var(--control-height); padding-inline: var(--space-4); color: var(--color-text-secondary); text-decoration: none; border-block-end: 2px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-small); transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.ui-nav-link:hover { color: var(--color-primary-hover); border-block-end-color: var(--color-primary-line); background: linear-gradient(to top, var(--color-primary-faint), transparent 55%); }
.ui-nav-link[aria-current], .ui-nav-link:active { color: var(--color-primary); border-block-end-color: var(--color-primary); }
.ui-nav-link[aria-disabled="true"] { color: var(--color-disabled-text); cursor: not-allowed; }
.ui-menu-toggle { display: none; }
.ui-enhanced .ui-menu-toggle { display: inline-flex; }
.ui-nojs-nav { display: flex; flex-wrap: wrap; padding-block: var(--space-3); gap: var(--space-2); }
.ui-enhanced .ui-nojs-nav { display: none; }
.ui-drawer { position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0; padding: var(--space-6); inline-size: min(var(--drawer-width), calc(100% - var(--space-8))); block-size: 100dvb; max-block-size: 100dvb; max-inline-size: none; border: 0; border-inline-start: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); }
.ui-drawer[open] { display: flex; flex-direction: column; gap: var(--space-6); animation: ui-reveal var(--transition-normal) var(--ease-standard); }
.ui-drawer::backdrop { background: var(--color-overlay); }
.ui-drawer__heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ui-drawer nav { overflow-y: auto; }
@keyframes ui-reveal { from { opacity: 0; } to { opacity: 1; } }
.ui-footer { position: relative; overflow: hidden; margin-block-start: var(--section-gap); padding-block: var(--space-12); background: radial-gradient(circle at 86% 10%, rgb(220 21 27 / .12), transparent 18rem), linear-gradient(135deg, var(--color-charcoal), var(--color-charcoal-soft)); color: var(--color-surface); border-block-start: 3px solid var(--color-primary); box-shadow: 0 -18px 48px rgb(20 22 25 / .08); }
.ui-footer::after { content: ""; position: absolute; inset-inline-end: -7rem; inset-block-start: -11rem; inline-size: 24rem; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / .09); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(255 255 255 / .025); pointer-events: none; }
.ui-footer .ui-muted { color: rgb(255 255 255 / .62); }
.ui-footer .ui-link { color: rgb(255 255 255 / .8); }
.ui-footer .ui-link:hover { color: var(--color-surface); }
.ui-footer__inner { display: flex; flex-direction: column; gap: var(--space-6); }
.ui-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ui-breadcrumb ol, .ui-pagination ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; gap: var(--space-2); }
.ui-breadcrumb { font-size: var(--text-caption); color: var(--color-text-secondary); }
.ui-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-breadcrumb li + li::before { content: "/"; color: var(--color-text-secondary); }
.ui-breadcrumb a { min-block-size: var(--control-height); display: inline-flex; align-items: center; }
.ui-pagination a, .ui-pagination span { min-inline-size: var(--control-height); min-block-size: var(--control-height); padding: var(--space-2); display: inline-flex; justify-content: center; align-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; background: var(--color-surface); color: var(--color-text-primary); }
.ui-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ui-pagination a:active, .ui-pagination [aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.ui-pagination [aria-disabled="true"] { color: var(--color-disabled-text); background: var(--color-disabled-surface); cursor: not-allowed; }
.ui-pagination[aria-busy="true"] { cursor: wait; }
.ui-skip { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-4); transform: translateY(-200%); z-index: var(--z-skip); }
.ui-skip:focus { transform: translateY(0); }
.ui-reveal {
  --reveal-delay: 0ms;
  --reveal-distance: var(--motion-reveal-distance);
}
.ui-enhanced .ui-reveal:not(.ui-reveal--visible) {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}
.ui-enhanced[dir="rtl"] .ui-reveal--inline:not(.ui-reveal--visible) { transform: translateX(calc(var(--reveal-distance) * -1)); }
.ui-enhanced[dir="ltr"] .ui-reveal--inline:not(.ui-reveal--visible) { transform: translateX(var(--reveal-distance)); }
.ui-enhanced .ui-reveal {
  transition: opacity var(--motion-slow) var(--ease-emphasized), transform var(--motion-slow) var(--ease-emphasized);
  transition-delay: var(--reveal-delay);
}
.ui-reveal--visible { opacity: 1; transform: none; }
.ui-reveal-delay-1 { --reveal-delay: var(--motion-stagger); }
.ui-reveal-delay-2 { --reveal-delay: calc(var(--motion-stagger) * 2); }
.ui-reveal-delay-3 { --reveal-delay: calc(var(--motion-stagger) * 3); }
.ui-stagger > .ui-reveal:nth-child(2) { --reveal-delay: var(--motion-stagger); }
.ui-stagger > .ui-reveal:nth-child(3) { --reveal-delay: calc(var(--motion-stagger) * 2); }
.ui-stagger > .ui-reveal:nth-child(4) { --reveal-delay: calc(var(--motion-stagger) * 3); }
.ui-stagger > .ui-reveal:nth-child(n + 5) { --reveal-delay: calc(var(--motion-stagger) * 4); }
/* --breakpoint-md / --breakpoint-lg / --breakpoint-xl */
@media (min-width: 48rem) { .ui-grid--two, .ui-grid--three, .ui-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-footer__inner { flex-direction: row; justify-content: space-between; } }
@media (min-width: 64rem) { .ui-grid--three, .ui-grid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ui-desktop-nav { display: flex; align-items: center; gap: var(--space-2); } .ui-enhanced .ui-menu-toggle, .ui-nojs-nav { display: none; } }
@media (min-width: 80rem) { .ui-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ui-button,
  .ui-card--interactive,
  .ui-product-card__media img,
  .ui-reveal,
  .ui-enhanced .ui-reveal:not(.ui-reveal--visible),
  .home-category-tile,
  .home-category-tile::after,
  .home-category-tile__index,
  .home-metric-card,
  .home-metric-card__icon,
  .home-brand-card,
  .catalog-taxonomy-link,
  .product-detail__facts div,
  .auth-flow-list li { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) { .ui-button, .ui-badge, .ui-alert, .ui-card { border: var(--border-width) solid CanvasText; } .ui-skeleton { background: GrayText; } }