@layer tokens, reset, base, layout, components, utilities, overrides;

@layer components {
  .accordion { border-top: var(--border-hair) solid var(--border); }
  .accordion__item { border-bottom: var(--border-hair) solid var(--border); }
  .accordion__title {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }
  .accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    min-height: var(--tap);
    padding-block: var(--sp-5);
    padding-inline: 0;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-h4);
    line-height: 1.3;
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .accordion__trigger:focus-visible { outline-offset: -2px; }
  .accordion__glyph {
    display: none;
    position: relative;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--accent);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .accordion__glyph::before, .accordion__glyph::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
  }
  .accordion__glyph::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .accordion__trigger[aria-expanded="true"] .accordion__glyph::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
  }
  .accordion__trigger:active .accordion__glyph { transform: rotate(45deg); }
  .accordion__panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-base) var(--ease-soft);
  }
  .accordion__panel.is-open { grid-template-rows: 1fr; }
  .accordion__panel[hidden] {
    display: grid;
    visibility: hidden;
  }
  .accordion__inner {
    overflow: hidden;
    min-height: 0;
  }
  .accordion__body {
    padding-block: 0 var(--sp-5);
    color: var(--text-muted);
    font-size: var(--step-body);
    line-height: 1.7;
  }
  .accordion__body > * + * { margin-block-start: var(--sp-3); }
  .accordion--footer { border-top: 0; }
  .accordion--faq .accordion__trigger { font-size: var(--step-h4); }
  .accordion__trigger.js-accordion-trigger { cursor: pointer; }
  @media (hover: hover) and (pointer: fine) {
    .accordion__trigger:hover { color: var(--accent); }
    .accordion__trigger:hover .accordion__glyph { color: var(--accent-hover); }
  }
  @media (min-width: 768px) {
    .accordion__trigger { font-size: var(--step-h3); }
    .accordion--faq .accordion__trigger { font-size: var(--step-h3); }
  }

  .cart-line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-bottom: var(--border-hair) solid var(--border);
  }
  .cart-line__media {
    width: 4.5rem;
    aspect-ratio: 4 / 5;
    background: var(--surface-raised);
    overflow: hidden;
  }
  .cart-line__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cart-line__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-3);
    align-content: start;
    min-width: 0;
  }
  .cart-line__name {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: var(--step-h4);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .cart-line__name:hover { color: var(--accent); }
  .cart-line__total {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-family: var(--font-display);
    font-size: var(--step-price-sm);
    font-feature-settings: var(--num-tabular);
    color: var(--price);
    white-space: nowrap;
  }
  .cart-line__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .cart-line__unit { font-feature-settings: var(--num-tabular); }
  .cart-line__was {
    text-decoration: line-through;
    color: var(--price-was);
  }
  .cart-line__controls {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-block-start: var(--sp-1);
  }
  .cart-line__max {
    font-size: var(--step-micro);
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .cart-line__remove {
    min-height: var(--tap);
    padding-inline: var(--sp-1);
    font-size: var(--step-small);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .cart-line__remove:hover { color: var(--danger); }
  .cart-line.is-unavailable .cart-line__media { filter: var(--media-dim, grayscale(0.4) brightness(0.6)); }
  .cart-line.is-unavailable .cart-line__name { color: var(--text-muted); }
  .cart-line__warning {
    grid-column: 1 / -1;
    font-size: var(--step-small);
    color: var(--danger);
  }
  .cart-line--page { padding-block: var(--sp-6); }
  @media (min-width: 480px) {
    .cart-line--page { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .cart-line--page .cart-line__media { width: 7.5rem; }
  }
  .cart-lines { border-top: var(--border-hair) solid var(--border); }
  .cart-messages {
    display: grid;
    gap: var(--sp-2);
    margin-block: var(--sp-4);
  }
  .cart-message {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--step-small);
    color: var(--text);
    background: var(--accent-quiet);
    border-left: var(--border-emphasis) solid var(--accent);
  }
  .cart-message--error {
    background: var(--danger-quiet, rgba(229, 115, 107, 0.08));
    border-left-color: var(--danger);
    color: var(--danger);
  }

  .summary {
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: var(--border-hair) solid var(--border-faint);
  }
  .summary__title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
    margin-block-end: var(--sp-4);
  }
  .summary__rows {
    display: grid;
    gap: var(--sp-2);
  }
  .summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .summary__row--total {
    margin-block-start: var(--sp-3);
    padding-block-start: var(--sp-4);
    border-top: var(--border-hair) solid var(--border);
    font-size: var(--step-body);
    color: var(--text);
  }
  .summary__label { min-width: 0; }
  .summary__value {
    font-feature-settings: var(--num-tabular);
    white-space: nowrap;
    color: var(--text);
  }
  .summary__value--discount { color: var(--success); }
  .summary__value--total {
    font-family: var(--font-display);
    font-size: var(--step-price);
    color: var(--price);
  }
  .summary__value--free { color: var(--price-free, var(--gold-300)); }
  .summary__note {
    margin-block-start: var(--sp-3);
    font-size: var(--step-micro);
    color: var(--text-muted);
  }
  .summary__actions {
    margin-block-start: var(--sp-5);
    display: grid;
    gap: var(--sp-3);
  }
  .summary__coupon {
    margin-block: var(--sp-4);
    padding-block: var(--sp-4);
    border-block: var(--border-hair) solid var(--border-faint);
  }
  .summary__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--step-small);
  }
  .summary__code {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
  }
  .summary__lines {
    display: grid;
    gap: var(--sp-3);
    margin-block-end: var(--sp-4);
    padding-block-end: var(--sp-4);
    border-bottom: var(--border-hair) solid var(--border-faint);
  }
  .summary__line {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
    font-size: var(--step-small);
  }
  .summary__line-media {
    width: 3rem;
    aspect-ratio: 4 / 5;
    background: var(--surface-sunken);
    overflow: hidden;
  }
  .summary__line-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .summary__line-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .summary__line-meta {
    color: var(--text-muted);
    font-size: var(--step-small);
  }
  .summary__methods {
    font-size: var(--step-micro);
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
  }
  .summary__line-total {
    font-feature-settings: var(--num-tabular);
    white-space: nowrap;
  }
  .summary-peek {
    border: var(--border-hair) solid var(--border-faint);
    background: var(--surface-raised);
  }
  .summary-peek__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    list-style: none;
  }
  .summary-peek__toggle::-webkit-details-marker { display: none; }
  .summary-peek__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-small);
  }
  .summary-peek__total {
    font-family: var(--font-display);
    font-size: var(--step-price-sm);
    color: var(--price);
    font-feature-settings: var(--num-tabular);
  }
  .summary-peek__cue {
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .summary-peek[open] .summary-peek__cue--closed { display: none; }
  .summary-peek:not([open]) .summary-peek__cue--open { display: none; }
  .summary-peek__body { padding: 0 var(--sp-4) var(--sp-4); }

  .free-ship {
    display: grid;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
  }
  .free-ship__text {
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .free-ship__amount {
    color: var(--accent);
    font-feature-settings: var(--num-tabular);
    font-weight: 500;
  }
  .free-ship__track {
    height: 2px;
    background: var(--track, var(--rule-faint));
    overflow: hidden;
  }
  .free-ship__fill {
    height: 100%;
    width: var(--fill, 0%);
    background: var(--fill-accent, var(--grad-gold-button));
    transition: width var(--dur-base) var(--ease-out);
  }
  .free-ship.is-unlocked .free-ship__text { color: var(--success); }
  .free-ship__check {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    vertical-align: -0.1em;
    margin-inline-end: var(--sp-1);
    color: var(--success);
  }
  .free-ship[hidden] { display: none; }

  .choice {
    position: relative;
    display: block;
  }
  .choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .choice__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-3) var(--sp-4);
    align-items: start;
    padding: var(--sp-4) var(--sp-4);
    min-height: var(--control-h);
    border: var(--border-hair) solid var(--border);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .choice__dot {
    position: relative;
    width: 1.125rem;
    height: 1.125rem;
    margin-block-start: 0.15rem;
    border: var(--border-hair) solid var(--text-muted);
    border-radius: 50%;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .choice__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .choice__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-body);
    letter-spacing: var(--track-body);
  }
  .choice__text {
    grid-column: 2 / -1;
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .choice__detail {
    grid-column: 1 / -1;
    display: none;
    margin-block-start: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border-left: var(--border-emphasis) solid var(--accent);
    font-size: var(--step-small);
  }
  .choice__detail > * + * { margin-block-start: var(--sp-2); }
  .choice__badge {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }
  .choice__input:checked + .choice__card {
    border-color: var(--accent);
    background: var(--accent-quiet);
  }
  .choice__input:checked + .choice__card .choice__dot { border-color: var(--accent); }
  .choice__input:checked + .choice__card .choice__dot::after { transform: scale(1); }
  .choice__input:checked + .choice__card .choice__detail { display: block; }
  .choice__input:focus-visible + .choice__card {
    outline: var(--border-hair) solid var(--focus-ring);
    outline-offset: 3px;
  }
  .choice__input:disabled + .choice__card {
    opacity: 0.38;
    cursor: not-allowed;
  }
  .choice--answer { display: grid; }
  .choice--answer .choice__card {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    align-content: start;
    padding: var(--sp-5);
    text-align: center;
  }
  .choice--answer .choice__dot { display: none; }
  .choice--answer .choice__icon {
    justify-self: center;
    margin-block-end: var(--sp-2);
    color: var(--accent);
  }
  .choice--answer .choice__text { grid-column: 1; }
  .choice--answer .choice__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-h4);
  }
  .choice-group {
    display: grid;
    gap: var(--sp-3);
  }
  .choice-group--answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (hover: hover) and (pointer: fine) {
    .choice__card:hover { border-color: var(--border-accent); }
  }
  @media (min-width: 768px) {
    .choice-group--answers { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  }

  .collection-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface-raised);
    color: var(--text);
    isolation: isolate;
  }
  .collection-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .collection-card__media > picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .collection-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .collection-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 34%, rgba(10, 10, 10, 0) 60%);
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .collection-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: var(--sp-5);
    display: grid;
    gap: var(--sp-2);
  }
  .collection-card__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent);
  }
  .collection-card__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.15;
    color: var(--text);
  }
  .collection-card__tagline {
    font-size: var(--step-micro);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .collection-card__count {
    font-size: var(--step-micro);
    color: var(--text-muted);
  }
  .collection-card__rule {
    width: 1.5rem;
    height: 1px;
    background: var(--accent);
    transition: width var(--dur-base) var(--ease-out);
  }
  .collection-card:hover { color: var(--text); }
  .collection-card:active .collection-card__img {
    transform: scale(1.03);
    transition-duration: var(--dur-fast);
  }
  .collection-card:focus-visible { outline-offset: 4px; }
  .collection-card--empty {
    border: var(--border-hair) solid var(--border-accent);
    background: var(--surface);
  }
  .collection-card--empty .collection-card__scrim { display: none; }
  .collection-card--large .collection-card__name { font-size: var(--step-h2); }
  .collection-card--wide { aspect-ratio: 16 / 9; }
  .collection-card--gender .collection-card__body {
    inset: 0;
    place-content: center;
    text-align: center;
    justify-items: center;
  }
  .collection-card--gender .collection-card__name { font-size: var(--step-h2); }
  .collection-card--gender {
    aspect-ratio: 2 / 1;
    background-image: var(--grad-gold-radial);
  }
  @media (hover: hover) and (pointer: fine) {
    .collection-card:hover .collection-card__img { transform: scale(1.06); }
    .collection-card:hover .collection-card__rule { width: 4rem; }
    .collection-card:hover .collection-card__scrim { background: linear-gradient(to top, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.6) 36%, rgba(10, 10, 10, 0) 62%); }
  }
  @media (min-width: 768px) {
    .collection-card__name { font-size: 1.625rem; }
    .collection-card--wide { aspect-ratio: 3 / 4; }
    .collection-card--gender { aspect-ratio: 16 / 9; }
  }

  .drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--scrim-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .drawer-overlay[hidden] {
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  .drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: min(26.25rem, 92vw);
    background: var(--surface-overlay);
    color: var(--text);
    border-left: var(--border-hair) solid var(--border);
    box-shadow: var(--shadow-overlay);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-in);
  }
  .drawer.is-open {
    transform: translateX(0);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .drawer[hidden] {
    display: flex;
    visibility: hidden;
  }
  .drawer.is-open[hidden] { visibility: visible; }
  .drawer--left {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: var(--border-hair) solid var(--border);
    transform: translateX(-100%);
  }
  .drawer--left.is-open { transform: translateX(0); }
  .drawer--sheet {
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    max-height: 86vh;
    border-left: 0;
    border-top: var(--border-hair) solid var(--border);
    transform: translateY(100%);
  }
  .drawer--sheet.is-open { transform: translateY(0); }
  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--border-hair) solid var(--border);
    flex: 0 0 auto;
  }
  .drawer__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-h3);
    line-height: 1.2;
  }
  .drawer__close {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin-inline-end: calc(var(--sp-2) * -1);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .drawer__close:hover { color: var(--text); }
  .drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--sp-5);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, var(--ink-500)) transparent;
  }
  .drawer__body[aria-busy="true"] { opacity: 0.7; }
  .drawer__foot {
    flex: 0 0 auto;
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + var(--safe-bottom));
    border-top: var(--border-hair) solid var(--border);
    background: var(--surface-overlay);
  }
  .drawer__foot[hidden] { display: none; }
  .drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .drawer__subtotal-value {
    font-family: var(--font-display);
    font-size: var(--step-price);
    color: var(--price);
    font-feature-settings: var(--num-tabular);
  }
  .drawer__note {
    font-size: var(--step-micro);
    color: var(--text-muted);
    text-align: center;
  }
  .drawer__empty {
    padding-block: var(--sp-8) var(--sp-5);
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--step-h3);
    color: var(--text);
  }
  .drawer__empty-copy {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--step-small);
    margin-inline: auto;
  }
  .drawer__empty-action {
    display: flex;
    justify-content: center;
    margin-block: var(--sp-5) var(--sp-7);
  }
  .drawer__error {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--step-small);
    color: var(--danger);
    background: var(--danger-quiet, rgba(229, 115, 107, 0.08));
    border-left: var(--border-emphasis) solid var(--danger);
  }
  .drawer__section-title {
    margin-block: var(--sp-6) var(--sp-3);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent);
  }
  .drawer__handle {
    display: none;
    width: 2.25rem;
    height: 0.25rem;
    margin: var(--sp-2) auto 0;
    background: var(--rule-strong);
  }
  .drawer--sheet .drawer__handle { display: block; }
  .drawer--filters .drawer__body { padding-block: var(--sp-4); }
  @media (min-width: 768px) {
    .drawer--sheet {
      top: 0;
      left: auto;
      right: 0;
      width: min(26.25rem, 92vw);
      max-height: none;
      border-top: 0;
      border-left: var(--border-hair) solid var(--border);
      transform: translateX(100%);
    }
    .drawer--sheet.is-open { transform: translateX(0); }
    .drawer--sheet .drawer__handle { display: none; }
  }

  .empty-state {
    padding-block: var(--sp-8);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--sp-4);
  }
  .empty-state .form { width: min(100%, 28rem); }
  .empty-state__icon {
    width: 3rem;
    height: 3rem;
    color: var(--accent);
    opacity: 0.7;
  }
  .empty-state__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-h2);
  }
  .empty-state__text {
    color: var(--text-muted);
    margin-inline: auto;
  }
  .empty-state__action { margin-block-start: var(--sp-2); }

  .form {
    display: grid;
    gap: var(--sp-5);
  }
  .form__row {
    display: grid;
    gap: var(--sp-5);
  }
  .form__section {
    display: grid;
    gap: var(--sp-5);
    padding-block: var(--sp-6);
    border-top: var(--border-hair) solid var(--border-faint);
  }
  .form__section-title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
  }
  .form__section-num {
    display: inline-block;
    margin-inline-end: var(--sp-3);
    color: var(--accent);
    font-feature-settings: var(--num-tabular);
  }
  .form__legend {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: var(--sp-3);
  }
  .form__actions {
    display: grid;
    gap: var(--sp-3);
    padding-block-start: var(--sp-2);
  }
  .form__summary {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border: var(--border-hair) solid var(--danger);
    background: var(--danger-quiet, rgba(229, 115, 107, 0.06));
    color: var(--danger);
    font-size: var(--step-small);
  }
  .form__summary-title { font-weight: 500; }
  .form__summary-link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    color: inherit;
  }
  .form__summary-link:hover { color: var(--text); }
  .form__success {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-5);
    border: var(--border-hair) solid var(--accent);
    background: var(--accent-quiet);
    text-align: center;
  }
  .form__success-title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
  }
  @media (hover: hover) and (pointer: fine) {
    .field__input:hover:not(:focus):not(:disabled) { border-color: var(--border-accent); }
    .field__checkbox:hover { border-color: var(--accent); }
  }
  @media (min-width: 768px) {
    .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form__actions {
      grid-auto-flow: column;
      justify-content: start;
      align-items: center;
    }
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }
  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 2.25rem;
    padding-inline: var(--sp-3) var(--sp-2);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-micro);
    letter-spacing: 0.06em;
    color: var(--text);
    background: var(--surface-raised);
    border: var(--border-hair) solid var(--border);
    border-left: var(--border-emphasis) solid var(--accent);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  a.chip::before {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .chip:hover {
    color: var(--text);
    border-color: var(--border-accent);
    border-left-color: var(--accent);
  }
  .chip__remove {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-inline-end: calc(var(--sp-1) * -1);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .chip:hover .chip__remove { color: var(--danger); }
  .chip--clear {
    border-left-width: var(--border-hair);
    border-left-color: var(--border);
    background: transparent;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
  }
  .chip--static {
    border-left-width: var(--border-hair);
    border-left-color: var(--border);
    cursor: default;
  }
  .chip--note {
    background: transparent;
    border-color: var(--border-accent);
    border-left-width: var(--border-hair);
    border-left-color: var(--border-accent);
    color: var(--text);
    letter-spacing: 0.02em;
    font-weight: 400;
    font-size: var(--step-small);
    padding-inline: var(--sp-3);
  }
  .chip__icon {
    width: 1rem;
    height: 1rem;
    color: var(--accent);
  }
  .insta {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-raised);
  }
  .insta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .insta__veil {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(10, 10, 10, 0.25);
    color: var(--text);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .insta:focus-visible { outline-offset: -3px; }
  .insta:focus-visible .insta__veil { opacity: 1; }
  @media (hover: hover) and (pointer: fine) {
    .insta:hover .insta__veil { opacity: 1; }
    .insta:hover .insta__img { transform: scale(1.04); }
  }

  .meter {
    display: grid;
    gap: var(--sp-2);
  }
  .meter__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
  }
  .meter__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .meter__value {
    font-size: var(--step-small);
    color: var(--text);
  }
  .meter__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-1);
    height: 0.25rem;
  }
  .meter__seg {
    position: relative;
    background: var(--track, rgba(245, 240, 232, 0.10));
    overflow: hidden;
  }
  .meter__seg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fill-accent, var(--grad-gold-button));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .meter__seg.is-filled::after { transform: scaleX(1); }
  .meter.is-visible .meter__seg.is-filled::after { transform: scaleX(1); }
  .meters {
    display: grid;
    gap: var(--sp-5);
  }
  @media (min-width: 768px) {
    .meters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-7);
    }
  }

  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-in);
  }
  .modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .modal[hidden] {
    display: flex;
    visibility: hidden;
  }
  .modal.is-open[hidden] { visibility: visible; }
  .modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim-modal);
  }
  .modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 80vh;
    background: var(--surface-overlay);
    color: var(--text);
    border-top: var(--border-hair) solid var(--border);
    box-shadow: var(--shadow-overlay);
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-in);
    overscroll-behavior: contain;
  }
  .modal.is-open .modal__panel {
    transform: translateY(0);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .modal__handle {
    width: 2.25rem;
    height: 0.25rem;
    margin: var(--sp-2) auto 0;
    background: var(--rule-strong);
    flex: 0 0 auto;
  }
  .modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--border-hair) solid var(--border);
    flex: 0 0 auto;
  }
  .modal__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-h3);
    line-height: 1.2;
  }
  .modal__close {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin-inline-end: calc(var(--sp-2) * -1);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .modal__close:hover { color: var(--text); }
  .modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-5);
  }
  .modal__foot {
    flex: 0 0 auto;
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + var(--safe-bottom));
    border-top: var(--border-hair) solid var(--border);
  }
  .modal--lightbox .modal__panel {
    max-height: none;
    height: 100%;
    background: var(--surface);
    border: 0;
    transform: none;
  }
  .modal--lightbox .modal__handle, .modal--lightbox .modal__head { display: none; }
  .modal--lightbox .modal__body {
    padding: 0;
    display: flex;
  }
  .modal--lightbox .modal__close {
    position: absolute;
    top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    right: var(--sp-3);
    z-index: 3;
    display: grid;
    background: rgba(10, 10, 10, 0.6);
    color: var(--text);
  }
  .lightbox__rail {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pinch-zoom;
  }
  .lightbox__rail::-webkit-scrollbar { display: none; }
  .lightbox__slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    scroll-snap-align: center;
    padding: var(--sp-6) var(--sp-4);
  }
  .lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - var(--sp-10));
    width: auto;
    height: auto;
    object-fit: contain;
    touch-action: manipulation;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .lightbox__img.is-zoomed {
    transform: scale(2);
    cursor: zoom-out;
  }
  .lightbox__counter {
    position: absolute;
    bottom: calc(var(--sp-4) + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: var(--step-micro);
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-feature-settings: var(--num-tabular);
  }
  @media (min-width: 768px) {
    .modal {
      align-items: center;
      padding: var(--sp-6);
    }
    .modal__panel {
      max-width: 35rem;
      max-height: 86vh;
      border: var(--border-hair) solid var(--border);
      transform: translateY(0.75rem) scale(0.98);
    }
    .modal.is-open .modal__panel { transform: none; }
    .modal__handle { display: none; }
    .modal--lightbox { padding: 0; }
    .modal--lightbox .modal__panel { max-width: none; }
  }

  .nav-mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: min(22rem, 88vw);
    background: var(--surface-overlay);
    color: var(--text);
    border-right: var(--border-hair) solid var(--border);
    box-shadow: var(--shadow-overlay);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-in);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: var(--safe-bottom);
  }
  .nav-mobile.is-open {
    transform: translateX(0);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav-mobile[hidden] {
    display: flex;
    visibility: hidden;
  }
  .nav-mobile.is-open[hidden] { visibility: visible; }
  .nav-mobile__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--header-h);
    padding-inline: var(--sp-3);
    border-bottom: var(--border-hair) solid var(--border-faint);
    flex: 0 0 auto;
  }
  .nav-mobile__close {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav-mobile__close:hover { color: var(--text); }
  .nav-mobile__search { padding: var(--sp-4) var(--sp-5); }
  .nav-mobile__input {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: 0 var(--sp-4) 0 2.75rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--field-bg, var(--surface-sunken));
    border: var(--border-hair) solid var(--border-control, var(--ink-500));
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--icon-search, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239C968C' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: left var(--sp-3) center;
    background-size: 1.125rem;
    caret-color: var(--accent);
  }
  .nav-mobile__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-halo);
  }
  .nav-mobile__list { padding-inline: var(--sp-5); }
  .nav-mobile__list--secondary {
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-4);
    border-top: var(--border-hair) solid var(--border-faint);
  }
  .nav-mobile__item { border-bottom: var(--border-hair) solid var(--border-faint); }
  .nav-mobile__list--secondary .nav-mobile__item { border-bottom: 0; }
  .nav-mobile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 3.5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .nav-mobile__link:hover, .nav-mobile__link:active { color: var(--accent); }
  .nav-mobile__link[aria-current="page"] { color: var(--accent); }
  .nav-mobile__list--secondary .nav-mobile__link {
    min-height: var(--tap);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    justify-content: flex-start;
    color: var(--text-muted);
  }
  .nav-mobile__link--whatsapp {
    color: var(--text);
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .nav-mobile__link--whatsapp .icon { color: var(--success); }
  .nav-mobile__sub {
    padding-block: var(--sp-2) var(--sp-4);
    padding-inline-start: var(--sp-4);
    display: grid;
    gap: var(--sp-1);
  }
  .nav-mobile__sublink {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .nav-mobile__sublink:hover { color: var(--accent); }
  @media (min-width: 1024px) {
    .nav-mobile { display: none; }
  }

  .newsletter {
    display: grid;
    gap: var(--sp-4);
  }
  .newsletter__form {
    display: grid;
    gap: var(--sp-3);
  }
  .newsletter__field { min-width: 0; }
  .newsletter__legal {
    font-size: var(--step-micro);
    letter-spacing: 0.02em;
    color: var(--text-muted);
  }
  .newsletter__success {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-5);
    border: var(--border-hair) solid var(--accent);
    background: var(--accent-quiet);
    text-align: center;
  }
  .newsletter__success-title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
  }
  .newsletter__check {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--accent);
  }
  .newsletter--band {
    justify-items: center;
    text-align: center;
    max-width: 34rem;
    margin-inline: auto;
  }
  .newsletter--band .newsletter__form { width: 100%; }
  @media (min-width: 768px) {
    .newsletter__form {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
    }
    .newsletter--compact .newsletter__form { grid-template-columns: 1fr; }
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding-block: var(--sp-7) var(--sp-2);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }
  .pagination__list {
    display: none;
    align-items: center;
    gap: var(--sp-1);
  }
  .pagination__item { display: inline-flex; }
  .pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding-inline: var(--sp-2);
    color: var(--text-muted);
    border: var(--border-hair) solid transparent;
    font-feature-settings: var(--num-tabular);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    position: relative;
  }
  .pagination__link::after {
    content: "";
    position: absolute;
    inset: -0.125rem;
  }
  .pagination__link:hover {
    color: var(--text);
    background: var(--tint-ghost-hover, rgba(212, 176, 132, 0.10));
  }
  .pagination__link[aria-current="page"] {
    color: var(--accent);
    border-color: var(--accent);
  }
  .pagination__gap {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    min-height: 2.5rem;
    color: var(--text-faint, var(--ink-400));
  }
  .pagination__prev, .pagination__next {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding-inline: var(--sp-3);
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .pagination__prev:hover, .pagination__next:hover { color: var(--accent); }
  .pagination__prev.is-disabled, .pagination__next.is-disabled {
    color: var(--text-disabled);
    pointer-events: none;
  }
  .pagination__status {
    flex: 1 1 auto;
    text-align: center;
    color: var(--text-muted);
    font-feature-settings: var(--num-tabular);
  }
  @media (min-width: 768px) {
    .pagination__list { display: flex; }
    .pagination__status { display: none; }
    .pagination__prev, .pagination__next { flex: 0 0 auto; }
  }

  .prose { color: var(--text); }
  .prose > * + * { margin-block-start: var(--sp-4); }
  .prose h2 {
    margin-block-start: var(--sp-7);
    font-size: var(--step-h2);
  }
  .prose h3 {
    margin-block-start: var(--sp-6);
    font-size: var(--step-h3);
  }
  .prose p { color: var(--text-muted); }
  .prose ul, .prose ol {
    padding-inline-start: var(--sp-5);
    color: var(--text-muted);
  }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose li + li { margin-block-start: var(--sp-2); }
  .prose li::marker { color: var(--accent); }
  .prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--rule-strong);
  }
  .prose a:hover {
    color: var(--accent-hover);
    text-decoration-color: currentColor;
  }
  .prose blockquote {
    padding-inline-start: var(--sp-5);
    border-left: var(--border-hair) solid var(--accent);
    font-family: var(--font-display);
    font-size: var(--step-h4);
    color: var(--text);
  }
  .prose strong { color: var(--text); }
  .prose hr { margin-block: var(--sp-7); }
  .prose table {
    width: 100%;
    font-size: var(--step-small);
  }
  .prose th, .prose td {
    padding: var(--sp-3) var(--sp-2);
    text-align: left;
    border-bottom: var(--border-hair) solid var(--border-faint);
  }
  .prose th {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .pyramid {
    display: grid;
    gap: var(--sp-4);
  }
  .pyramid__tier {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
    border-bottom: var(--border-hair) solid transparent;
    border-image: var(--grad-gold-rule) 1;
    border-image-width: 0 0 1px 0;
    margin-inline: auto;
    width: 100%;
    max-width: var(--tier-w, 100%);
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .pyramid__tier:last-child {
    border-image: none;
    border-bottom: 0;
  }
  .pyramid__tier--top { --tier-w: 100%; }
  .pyramid__tier--heart { --tier-w: 100%; }
  .pyramid__tier--base { --tier-w: 100%; }
  .pyramid__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent);
  }
  .pyramid__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    row-gap: var(--sp-1);
  }
  .pyramid__note {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--text);
  }
  .pyramid__note + .pyramid__note::before {
    content: "·";
    color: var(--accent);
    margin-inline: var(--sp-3);
  }
  @media (min-width: 768px) {
    .pyramid__tier {
      gap: var(--sp-3);
      padding-block: var(--sp-5);
    }
    .pyramid__tier--top { --tier-w: 60%; }
    .pyramid__tier--heart { --tier-w: 80%; }
    .pyramid__tier--base { --tier-w: 100%; }
    .pyramid__note { font-size: 1.375rem; }
  }

  .review {
    display: grid;
    gap: var(--sp-3);
    padding-block: var(--sp-6);
    border-bottom: var(--border-hair) solid var(--border-faint);
  }
  .review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
  }
  .review__title {
    font-family: var(--font-display);
    font-size: var(--step-h4);
    color: var(--text);
  }
  .review__body {
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }
  .review__body.is-expanded {
    -webkit-line-clamp: unset;
    display: block;
  }
  .review__more { justify-self: start; }
  .review__meta {
    font-size: var(--step-small);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
  }
  .review__author {
    color: var(--text);
    font-weight: 500;
  }
  .review-summary {
    display: grid;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--surface-raised);
  }
  .review-summary__score {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
  .review-summary__num {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-display);
    line-height: 1;
    color: var(--text);
    font-feature-settings: var(--num-tabular);
  }
  .review-summary__count {
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .review-summary__bars {
    display: grid;
    gap: var(--sp-2);
  }
  .review-summary__bar {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--step-micro);
    color: var(--text-muted);
    font-feature-settings: var(--num-tabular);
  }
  .review-summary__track {
    height: 0.25rem;
    background: var(--track, rgba(245, 240, 232, 0.10));
    overflow: hidden;
  }
  .review-summary__fill {
    height: 100%;
    width: var(--fill, 0%);
    background: var(--fill-accent, var(--accent));
  }
  .review-list { border-top: var(--border-hair) solid var(--border); }
  .review-list.is-collapsed .review:nth-child(n+9) { display: none; }
  .review-thanks {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-5);
    border: var(--border-hair) solid var(--accent);
    background: var(--accent-quiet);
  }
  .star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-self: start;
    gap: var(--sp-1);
  }
  .star-input__label {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    cursor: pointer;
    color: var(--star-empty, rgba(245, 240, 232, 0.16));
    transition: color var(--dur-fast) var(--ease-out);
  }
  .star-input__label .icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  .star-input__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .star-input__radio:checked + .icon, .star-input__radio:checked ~ .icon { color: var(--accent); }
  .star-input__label:has(.star-input__radio:checked), .star-input__label:has(.star-input__radio:checked) ~ .star-input__label { color: var(--accent); }
  .star-input__label:hover, .star-input__label:hover ~ .star-input__label { color: var(--accent-hover); }
  .star-input__label:has(.star-input__radio:focus-visible) {
    outline: var(--border-hair) solid var(--focus-ring);
    outline-offset: 2px;
  }
  @media (min-width: 768px) {
    .review-summary {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: var(--sp-8);
    }
    .star-input__label .icon {
      width: 2rem;
      height: 2rem;
    }
  }

  .suggest {
    position: absolute;
    top: calc(100% + var(--sp-1));
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) + 2);
    display: none;
    background: var(--surface-overlay);
    border: var(--border-hair) solid var(--border);
    box-shadow: var(--shadow-overlay);
    max-height: 60vh;
    overflow-y: auto;
  }
  .suggest.is-open { display: block; }
  .suggest__group { padding-block: var(--sp-2); }
  .suggest__group + .suggest__group { border-top: var(--border-hair) solid var(--border-faint); }
  .suggest__label {
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .suggest__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-4);
    color: var(--text);
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .suggest__item:hover, .suggest__item.is-active {
    background: var(--surface-hover);
    color: var(--text);
  }
  .suggest__item--plain { grid-template-columns: minmax(0, 1fr); }
  .suggest__media {
    width: 2.5rem;
    aspect-ratio: 4 / 5;
    background: var(--surface-raised);
    overflow: hidden;
  }
  .suggest__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .suggest__name {
    font-family: var(--font-display);
    font-size: var(--step-h4);
    line-height: 1.2;
  }
  .suggest__meta {
    font-size: var(--step-micro);
    color: var(--text-muted);
  }
  .suggest__price {
    font-family: var(--font-display);
    color: var(--price);
    font-feature-settings: var(--num-tabular);
  }
  .suggest__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--tap);
    padding-inline: var(--sp-4);
    font-size: var(--step-small);
    color: var(--accent);
    border-top: var(--border-hair) solid var(--border-faint);
  }
  .suggest__empty {
    padding: var(--sp-4);
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .suggest-skeleton {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
  }

  .section-header {
    display: grid;
    gap: var(--sp-3);
    margin-block-end: var(--sp-6);
  }
  .section-header__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent);
    margin-right: calc(var(--track-wide) * -1);
  }
  .section-header__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-h2);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .section-header__sub {
    color: var(--text-muted);
    font-size: var(--step-body);
  }
  .section-header__link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text);
    margin-right: calc(var(--track-wide) * -1);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 calc(100% - 0.75rem);
    transition: color var(--dur-fast) var(--ease-out), background-size var(--dur-base) var(--ease-out);
  }
  .section-header__link:hover {
    color: var(--accent);
    background-size: 100% 1px;
  }
  .section-header__link .icon {
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .section-header__link:hover .icon { transform: translateX(0.25rem); }
  .section-header__rule {
    height: 1px;
    background: var(--grad-gold-rule);
    margin-block-start: var(--sp-2);
  }
  .section-header--center {
    text-align: center;
    justify-items: center;
  }
  .section-header--center .section-header__link { justify-self: center; }
  .section-header--center .section-header__sub { margin-inline: auto; }
  .section-header--numbered .section-header__title::before {
    content: attr(data-num);
    display: block;
    margin-block-end: var(--sp-2);
    font-size: var(--step-h4);
    color: var(--accent);
    font-feature-settings: var(--num-tabular);
  }
  @media (min-width: 768px) {
    .section-header {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "eyebrow eyebrow" "title link" "sub sub";
      align-items: end;
      margin-block-end: var(--sp-7);
    }
    .section-header__eyebrow { grid-area: eyebrow; }
    .section-header__title { grid-area: title; }
    .section-header__sub { grid-area: sub; }
    .section-header__link {
      grid-area: link;
      justify-self: end;
      margin-block-end: 0.35rem;
    }
    .section-header--center {
      grid-template-columns: 1fr;
      grid-template-areas: none;
    }
    .section-header--center .section-header__eyebrow, .section-header--center .section-header__title, .section-header--center .section-header__sub, .section-header--center .section-header__link { grid-area: auto; }
  }

  .site-footer {
    position: relative;
    margin-block-start: var(--section-y);
    padding-block: var(--sp-8) calc(var(--sp-6) + var(--safe-bottom));
    background: var(--surface);
    color: var(--text-muted);
    border-top: var(--border-hair) solid var(--border-faint);
  }
  .site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: min(60rem, 90%);
    height: 1px;
    transform: translateX(-50%);
    background: var(--grad-gold-rule);
  }
  .site-footer__inner {
    display: grid;
    align-items: start;
    gap: var(--sp-6);
  }
  .site-footer__brand {
    display: grid;
    gap: var(--sp-4);
    justify-items: start;
    padding-block-end: var(--sp-2);
  }
  .site-footer__logo {
    display: block;
    width: 7.5rem;
  }
  .site-footer__tagline {
    font-family: var(--font-display);
    font-size: var(--step-h4);
    color: var(--text);
  }
  .site-footer__blurb {
    font-size: var(--step-small);
    color: var(--text-muted);
    max-width: 22rem;
  }
  .site-footer__social {
    display: flex;
    gap: var(--sp-2);
    margin-inline-start: calc(var(--sp-2) * -1);
  }
  .site-footer__social-link {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .site-footer__social-link:hover { color: var(--accent); }
  .site-footer__col {
    display: grid;
    align-content: start;
    gap: var(--sp-3);
    border-top: var(--border-hair) solid var(--border-faint);
  }
  .site-footer__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--tap);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .site-footer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--tap);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
  }
  .site-footer__toggle::after {
    content: "+";
    font-size: var(--step-body);
    font-weight: 400;
  }
  .site-footer__toggle[aria-expanded="true"]::after { content: "−"; }
  .site-footer__links {
    display: grid;
    align-content: start;
    gap: 0;
    padding-block-end: var(--sp-4);
  }
  .site-footer__links[hidden] { display: none; }
  .site-footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-size: var(--step-small);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .site-footer__link:hover { color: var(--accent); }
  .site-footer__payments {
    font-size: var(--step-micro);
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding-block-end: var(--sp-4);
  }
  .site-footer__newsletter { padding-block-end: var(--sp-4); }
  .site-footer__bottom {
    display: grid;
    gap: var(--sp-2);
    margin-block-start: var(--sp-7);
    padding-block-start: var(--sp-5);
    border-top: var(--border-hair) solid var(--border-faint);
    font-size: var(--step-micro);
    letter-spacing: 0.02em;
    color: var(--text-muted);
  }
  .site-footer__copy { max-width: none; }
  .site-footer__address { max-width: none; }
  .site-footer__nav-fallback { display: none; }
  @media (min-width: 768px) {
    .site-footer__inner {
      grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
      gap: var(--sp-8) var(--sp-6);
    }
    .site-footer__col { border-top: 0; }
    .site-footer__toggle::after { content: none; }
    .site-footer__toggle { pointer-events: none; }
    .site-footer__links[hidden] { display: grid; }
    .site-footer__bottom {
      grid-template-columns: 1fr auto;
      align-items: baseline;
    }
  }
  @media (min-width: 1024px) {
    .site-footer__inner {
      grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
      gap: var(--sp-8);
    }
  }

  .skeleton {
    position: relative;
    display: block;
    background: var(--surface-overlay);
    overflow: hidden;
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--skeleton-sheen, linear-gradient(90deg, rgba(245, 240, 232, 0) 0%, rgba(245, 240, 232, 0.06) 50%, rgba(245, 240, 232, 0) 100%));
    transform: translateX(-100%);
    animation: skeleton-sheen 1.4s linear infinite;
  }
  .skeleton--line {
    height: 0.875rem;
    width: 100%;
  }
  .skeleton--line-short {
    height: 0.875rem;
    width: 55%;
  }
  .skeleton--media {
    aspect-ratio: 4 / 5;
    width: 100%;
  }
  .skeleton--thumb {
    width: 4.5rem;
    aspect-ratio: 4 / 5;
  }
  .skeleton--btn {
    height: var(--tap);
    width: 100%;
  }
  .skeleton-line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-bottom: var(--border-hair) solid var(--border-faint);
  }
  .skeleton-line__text {
    display: grid;
    gap: var(--sp-2);
    align-content: start;
  }
  .skeleton-card {
    display: grid;
    gap: var(--sp-2);
  }
  @keyframes skeleton-sheen {
    to { transform: translateX(100%); }
  }

  .timeline {
    display: grid;
    gap: 0;
  }
  .timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-3);
    color: var(--text-muted);
  }
  .timeline__step::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.6875rem;
    width: 1px;
    background: var(--border);
  }
  .timeline__step:first-child::before { top: 50%; }
  .timeline__step:last-child::before { bottom: 50%; }
  .timeline__dot {
    position: relative;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    align-self: center;
  }
  .timeline__dot::after {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--border-control, var(--ink-500));
  }
  .timeline__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    align-self: center;
  }
  .timeline__date {
    grid-column: 2;
    font-size: var(--step-micro);
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .timeline__step.is-done { color: var(--text); }
  .timeline__step.is-done::before { background: var(--accent); }
  .timeline__step.is-done .timeline__dot::after { background: var(--accent); }
  .timeline__step.is-current { color: var(--accent); }
  .timeline__step.is-current .timeline__dot::after {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-quiet);
  }
  .timeline__step.is-cancelled { color: var(--danger); }
  .timeline__step.is-cancelled .timeline__dot::after { background: var(--danger); }
  @media (min-width: 768px) {
    .timeline {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
    }
    .timeline__step {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: var(--sp-2);
      padding-inline: var(--sp-2);
    }
    .timeline__date {
      grid-column: auto;
    }
    .timeline__step::before {
      top: 0.75rem;
      bottom: auto;
      left: 0;
      right: 0;
      width: auto;
      height: 1px;
    }
    .timeline__step:first-child::before {
      top: 0.75rem;
      left: 50%;
    }
    .timeline__step:last-child::before {
      bottom: auto;
      right: 50%;
    }
  }

  .toast-region {
    position: fixed;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--fab-size) + var(--sp-6) + var(--safe-bottom));
    z-index: var(--z-toast);
    display: grid;
    gap: var(--sp-2);
    pointer-events: none;
  }
  .toast-region.is-raised { bottom: calc(var(--sticky-bar-h) + var(--fab-size) + var(--sp-6) + var(--safe-bottom)); }
  .toast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    max-width: 23.75rem;
    margin-inline: auto;
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4);
    background: var(--surface-overlay);
    color: var(--text);
    border: var(--border-hair) solid var(--border);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-overlay);
    font-size: var(--step-small);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .toast.is-visible {
    opacity: 1;
    transform: none;
  }
  .toast.is-leaving {
    opacity: 0;
    transform: none;
  }
  .toast--error { border-left-color: var(--danger); }
  .toast--success { border-left-color: var(--success); }
  .toast__body {
    display: grid;
    gap: var(--sp-1);
    min-width: 0;
  }
  .toast__text { min-width: 0; }
  .toast__action {
    justify-self: start;
    min-height: var(--tap);
    padding-inline: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-micro);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
  }
  .toast__action:hover { color: var(--accent-hover); }
  .toast__close {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    color: var(--text-muted);
  }
  .toast__close:hover { color: var(--text); }
  @media (min-width: 768px) {
    .toast-region {
      left: auto;
      right: var(--sp-5);
      bottom: auto;
      top: calc(var(--header-h-solid) + var(--sp-4));
      width: 23.75rem;
    }
    .toast-region.is-raised { bottom: auto; }
    .toast {
      margin-inline: 0;
      transform: translateY(-0.5rem);
    }
  }

  .voice {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: var(--border-hair) solid var(--border-faint);
  }
  .voice__quote {
    font-family: var(--font-display);
    font-size: var(--step-h4);
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .voice__title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
    color: var(--text);
  }
  .voice__meta {
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .voice__product {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    font-size: var(--step-micro);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--accent);
  }
  .voice__product:hover { color: var(--accent-hover); }

  .progress {
    display: grid;
    gap: var(--sp-2);
  }
  .progress__label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    font-feature-settings: var(--num-tabular);
  }
  .progress__track {
    height: 2px;
    background: var(--track, var(--rule-faint));
  }
  .progress__fill {
    height: 100%;
    width: var(--fill, 0%);
    background: var(--fill-accent, var(--grad-gold-button));
    transition: width var(--dur-base) var(--ease-out);
  }

  .panel {
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: var(--border-hair) solid var(--border-faint);
  }
  .panel--accent {
    border-color: var(--accent);
    background: var(--accent-quiet);
  }
  .panel--danger {
    border-color: var(--danger);
    background: var(--danger-quiet, rgba(229, 115, 107, 0.06));
  }
  .panel--success {
    border-color: var(--success);
    background: var(--success-quiet, rgba(111, 191, 139, 0.06));
  }
  .panel--sunken {
    background: var(--surface-sunken);
    border-color: var(--border);
  }
  .panel__title {
    font-family: var(--font-display);
    font-size: var(--step-h3);
    margin-block-end: var(--sp-3);
  }
  .panel__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--sp-2);
  }
  .panel > * + * { margin-block-start: var(--sp-3); }
  .panel > .field + .field { margin-block-start: var(--sp-5); }
  .panel > .field + p { margin-block-start: var(--sp-4); }
  .callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-left: var(--border-emphasis) solid var(--accent);
    background: var(--surface-raised);
    font-size: var(--step-small);
    color: var(--text-muted);
  }
  .callout__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent);
    margin-block-start: 0.1rem;
  }
  .callout--danger { border-left-color: var(--danger); }
  .callout--danger .callout__icon { color: var(--danger); }
  .callout--success { border-left-color: var(--success); }
  .callout--success .callout__icon { color: var(--success); }
  .data-list {
    display: grid;
    gap: var(--sp-3);
    font-size: var(--step-small);
  }
  .data-list__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--sp-3);
    padding-block-end: var(--sp-3);
    border-bottom: var(--border-hair) solid var(--border-faint);
  }
  .data-list__row:last-child {
    border-bottom: 0;
    padding-block-end: 0;
  }
  @media (max-width: 479.98px) {
    .data-list__row {
      grid-template-columns: 1fr;
      gap: var(--sp-1);
    }
  }
  .data-list__key {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-eyebrow);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .data-list__val {
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .data-list__val > a { padding-block: 0.75rem; }
  .data-list__val--copy {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-feature-settings: var(--num-tabular);
  }
  .copy-btn {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    color: var(--text-muted);
  }
  .copy-btn:hover { color: var(--accent); }
  .copy-btn.is-copied { color: var(--success); }
  .order-number {
    font-family: var(--font-display);
    font-size: var(--step-h2);
    letter-spacing: 0.04em;
    color: var(--accent);
    font-feature-settings: var(--num-tabular);
  }
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 1.5rem;
    padding-inline: var(--sp-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    border: var(--border-hair) solid var(--border);
  }
  .status-pill--success {
    color: var(--success);
    border-color: var(--success);
  }
  .status-pill--danger {
    color: var(--danger);
    border-color: var(--danger);
  }
  .status-pill--accent {
    color: var(--accent);
    border-color: var(--accent);
  }
  .status-pill--muted { color: var(--text-muted); }
  .upload {
    display: grid;
    place-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    border: var(--border-hair) dashed var(--border-accent);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--step-small);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .upload:hover, .upload.is-dragover {
    border-color: var(--accent);
    background: var(--accent-quiet);
  }
  .upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .upload__preview {
    max-width: 12rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .upload__name {
    color: var(--text);
    font-feature-settings: var(--num-tabular);
  }

  @media screen {
    html[data-theme="light"] .site-main {
      padding-block-end: var(--section-y);
      background-image: var(--grad-daybreak), var(--grad-dusk);
      background-size: 100% 28rem, 100% min(36rem, 60%);
      background-position: 50% 0, 50% 100%;
      background-repeat: no-repeat;
    }
  }
  html[data-theme="light"] .site-footer { margin-block-start: 0; }

  html[data-theme="light"] .t-night {
    background-color: var(--lt-night);
    background-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(212, 176, 132, 0.10), rgba(23, 18, 13, 0) 70%);
    color: var(--text);
    border-style: solid;
    border-width: 1px 0;
    border-image: var(--grad-gold-rule) 1;
  }

  html[data-theme="light"] .section--glow {
    background-color: var(--lt-stone);
    background-image: var(--paper-grain), radial-gradient(ellipse 60% 70% at 50% 45%, rgba(254, 252, 248, 0.90), rgba(237, 229, 216, 0) 72%);
    background-size: 220px 220px, 100% 100%;
  }

  html[data-theme="light"] .collection-card:not(.collection-card--empty):not(.collection-card--gender) {
    border: var(--mat) solid var(--lt-vellum);
    box-shadow: 0 0 0 1px rgba(122, 85, 48, 0.20), var(--shadow-paper);
  }
  html[data-theme="light"] .collection-card__scrim { background: linear-gradient(to top, rgba(23, 18, 13, 0.86) 0%, rgba(23, 18, 13, 0.50) 26%, rgba(23, 18, 13, 0) 45%); }
  html[data-theme="light"] :is(.collection-card--gender, .collection-card--empty) {
    background-color: var(--lt-paper);
    background-image: var(--grad-horizon);
    border: 1px solid var(--lt-bronze-line);
    box-shadow: var(--shadow-paper);
  }

  html[data-theme="light"] .insta {
    padding: calc(var(--mat) * 0.75);
    background: var(--lt-vellum);
    box-shadow: inset 0 0 0 1px rgba(122, 85, 48, 0.20);
  }
  html[data-theme="light"] .insta__veil {
    inset: calc(var(--mat) * 0.75);
    background: rgba(23, 18, 13, 0.30);
  }
  html[data-theme="light"] .section--flush-bottom { padding-block-end: var(--sp-7); }

  html[data-theme="light"] .drawer-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  html[data-theme="light"] .drawer {
    background-color: var(--lt-vellum);
    border-color: rgba(122, 85, 48, 0.18);
  }
  html[data-theme="light"] .drawer__head { border-bottom-color: rgba(122, 85, 48, 0.18); }
  html[data-theme="light"] .drawer__foot {
    background: var(--lt-paper);
    border-top-color: rgba(122, 85, 48, 0.18);
  }
  html[data-theme="light"] .modal__panel { border-color: rgba(122, 85, 48, 0.18); }
  html[data-theme="light"] .modal--lightbox .modal__close {
    background: rgba(23, 18, 13, 0.92);
    color: #F3ECE0;
  }
  html[data-theme="light"] .modal--lightbox .modal__close:hover { background: #17120D; }
  html[data-theme="light"] .review-summary__fill { display: block; }

  html[data-theme="light"] .choice__input:checked + .choice__card {
    background: var(--lt-vellum);
    border-color: var(--lt-ink);
    box-shadow: inset 3px 0 0 var(--lt-bronze);
  }
  html[data-theme="light"] .choice__input:checked + .choice__card .choice__dot { border-color: var(--lt-ink); }

  @media screen {
    html[data-theme="light"] :is(.voice, .panel, .summary) {
      background: var(--lt-paper);
      border-color: rgba(122, 85, 48, 0.18);
      box-shadow: var(--shadow-paper);
    }
    html[data-theme="light"] .panel--accent {
      border-color: var(--accent);
      background: var(--accent-quiet);
    }
    html[data-theme="light"] .panel--danger {
      border-color: var(--danger);
      background: var(--danger-quiet);
    }
    html[data-theme="light"] .panel--success {
      border-color: var(--success);
      background: var(--success-quiet);
    }
    html[data-theme="light"] .panel--sunken {
      background: var(--surface-sunken);
      border-color: var(--border);
      box-shadow: none;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    html[data-theme="light"] .collection-card:hover .collection-card__scrim { background: linear-gradient(to top, rgba(23, 18, 13, 0.92) 0%, rgba(23, 18, 13, 0.56) 28%, rgba(23, 18, 13, 0) 48%); }
    html[data-theme="light"] :is(.collection-card--gender, .collection-card--empty):hover { border-color: var(--lt-bronze); }
  }

  @media (prefers-reduced-motion: reduce) {
    html[data-theme="light"] .drawer-overlay {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  html[data-theme="light"] .site-footer::before { top: 0; }
  html[data-theme="light"] .choice__input:checked + .choice__card .choice__detail {
    border-left: 0;
    background: var(--lt-paper);
    box-shadow: inset 0 0 0 1px rgba(122, 85, 48, 0.18);
  }
  html[data-theme="light"] .lightbox__img {
    padding: var(--mat-gallery);
    background: var(--lt-vellum);
    box-shadow: inset 0 0 0 1px var(--mount-line), var(--shadow-paper);
  }
  html[data-theme="light"] :is(.cart-line__img, .site-header__panel-img, .sticky-bar__thumb) {
    padding: 4px;
    background: var(--lt-vellum);
    box-shadow: inset 0 0 0 1px var(--mount-line);
  }
}

@layer overrides {
  .drawer[hidden], .nav-mobile[hidden], .modal[hidden] {
    display: flex;
    visibility: hidden;
  }
  .drawer.is-open[hidden], .nav-mobile.is-open[hidden], .modal.is-open[hidden] {
    visibility: visible;
  }
  .drawer-overlay[hidden] {
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  .accordion__panel[hidden] {
    display: grid;
    visibility: hidden;
  }
  @media (min-width: 768px) {
    .site-footer__links[hidden] {
      display: grid;
    }
  }

  .t-light {
    background: var(--surface);
    color: var(--text);
  }
  .t-light .field__input {
    background: #FFFFFF;
    border-color: var(--rule-light-strong);
  }
  .t-light .field__input:disabled { background: var(--ivory-200); }
  .t-light .field__checkbox {
    background: #FFFFFF;
    border-color: var(--ivory-500);
  }
  .t-light .btn--primary {
    color: var(--ink-900);
    background-image: var(--grad-gold-button);
  }
  .t-light .btn--ghost {
    border-color: var(--gold-700);
    color: var(--ink-900);
  }
  .t-light .btn--text { color: var(--ivory-500); }
  .t-light .btn:disabled, .t-light .btn[aria-disabled="true"] {
    background-color: var(--ivory-200);
    color: var(--text-disabled);
  }
  .t-light .panel, .t-light .summary, .t-light .voice {
    background: var(--surface-overlay);
    border-color: var(--border);
    box-shadow: var(--shadow-light);
  }
  .t-light .stars__star--empty, .t-light .stars__star--partial { color: rgba(10, 10, 10, 0.12); }
  .t-light .meter__seg { background: rgba(10, 10, 10, 0.08); }
  .t-light .meter__seg::after { background: var(--gold-700); }
  .t-light .skeleton { background: var(--ivory-200); }
  .t-light .skeleton::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%); }
  .t-light .badge--sale {
    background: var(--gold-400);
    color: var(--ink-900);
  }
  .t-light .badge--sold-out {
    background: var(--ivory-200);
    color: var(--ivory-500);
  }
  .t-light .trust__icon { color: var(--gold-800); }
  .t-light .divider {
    background: var(--gold-700);
    opacity: 0.4;
  }
  .t-light .free-ship__track, .t-light .progress__track, .t-light .review-summary__track { background: rgba(10, 10, 10, 0.08); }
  .t-light .free-ship__fill, .t-light .progress__fill, .t-light .review-summary__fill { background: var(--gold-700); }
  .t-light .status-pill { border-color: var(--rule-light-strong); }
  .t-light .chip { background: var(--surface-overlay); }
  .t-light .accordion__body, .t-light .prose p, .t-light .prose ul, .t-light .prose ol { color: var(--ivory-500); }
  .t-light .site-header, .t-light .toast, .t-light .drawer, .t-light .modal__panel { box-shadow: var(--shadow-light); }
  .t-light ::selection {
    background: var(--gold-800);
    color: var(--ivory-100);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .product-card:hover .product-card__img, .collection-card:hover .collection-card__img, .gallery__main:hover .gallery__img, .insta:hover .insta__img, .site-header__panel-item:hover .site-header__panel-img { transform: none; }
    .product-card:hover .product-card__img--alt { opacity: 0; }
    .product-card:active .product-card__img, .collection-card:active .collection-card__img { transform: none; }
    .whatsapp-fab:hover, .whatsapp-fab:active { transform: none; }
    .btn:active { transform: none; }
    .skeleton::after {
      animation: none;
      display: none;
    }
    .hero__cue { animation: none; }
    .hero__enter {
      animation: none;
      opacity: 1;
      transform: none;
    }
    .sticky-bar {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .drawer-overlay {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    html.js .sf-reveal, html.js .sf-reveal--stagger > * {
      opacity: 1;
      transform: none;
      transition: none;
    }
    html.js .meter.sf-reveal:not(.is-visible) .meter__seg::after { transform: none; }
    .meter__seg::after { transition: none; }
  }

  @media print {
    .site-header, .site-footer, .announcement, .whatsapp-fab, .drawer, .drawer-overlay, .nav-mobile, .toast-region, .skip-link, .sticky-bar, .filter-bar, .modal, .btn, .newsletter, .hero__cue, .header-sentinel { display: none; }
    html, body {
      background: #FFFFFF;
      color: #0A0A0A;
    }
    body {
      --surface: #FFFFFF;
      --surface-raised: #FFFFFF;
      --surface-overlay: #FFFFFF;
      --surface-sunken: #FFFFFF;
      --text: #0A0A0A;
      --text-muted: #5A544B;
      --accent: #7A5A2E;
      --price: #0A0A0A;
      --price-was: #5A544B;
      --border: #D8CFBF;
      --border-faint: #EAE3D7;
      --success: #1F6B3E;
      --danger: #A32B22;
    }
    a { color: inherit; }
    html.js .sf-reveal, html.js .sf-reveal--stagger > * {
      opacity: 1;
      transform: none;
    }
    html.js .accordion__panel { grid-template-rows: 1fr; }
    .accordion__panel[hidden] { visibility: visible; }
    .accordion__glyph { display: none; }
    .site-main { min-height: 0; }
    .section { padding-block: var(--sp-6); }
    .panel, .summary, .voice {
      border: 1px solid #D8CFBF;
      box-shadow: none;
    }
    .print-only { display: block; }
  }
  .print-only { display: none; }
}

@layer components {
  .site-header__search-input:focus { box-shadow: 0 1px 0 0 var(--accent); }
}