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

@layer tokens {
    :root {
        color-scheme: light;

        --sf-color-canvas: #fffdfa;
        --sf-color-surface: #f5f1eb;
        --sf-color-surface-raised: #ffffff;
        --sf-color-ink: #1d1b19;
        --sf-color-ink-muted: #625d57;
        --sf-color-border: #cec6bc;
        --sf-color-action: #1d1b19;
        --sf-color-action-hover: #3a3632;
        --sf-color-on-action: #ffffff;
        --sf-color-focus: #075fb8;
        --sf-color-success: #146c43;
        --sf-color-success-bg: #e9f6ef;
        --sf-color-warning: #7a4300;
        --sf-color-warning-bg: #fff3df;
        --sf-color-danger: #a5261f;
        --sf-color-danger-bg: #fff0ee;

        --sf-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --sf-font-size-100: 0.875rem;
        --sf-font-size-200: 1rem;
        --sf-font-size-300: 1.125rem;
        --sf-font-size-400: clamp(1.25rem, 1.12rem + 0.65vw, 1.5rem);
        --sf-font-size-500: clamp(1.625rem, 1.38rem + 1.2vw, 2.25rem);
        --sf-line-body: 1.55;
        --sf-line-heading: 1.18;

        --sf-space-1: 0.25rem;
        --sf-space-2: 0.5rem;
        --sf-space-3: 0.75rem;
        --sf-space-4: 1rem;
        --sf-space-5: 1.5rem;
        --sf-space-6: 2rem;
        --sf-space-7: 3rem;
        --sf-space-8: 4rem;

        --sf-radius-control: 0.5rem;
        --sf-radius-card: 0.75rem;
        --sf-radius-panel: 1rem;
        --sf-radius-pill: 999px;
        --sf-shadow-raised: 0 0.5rem 1.5rem rgb(29 27 25 / 0.12);
        --sf-shadow-nav: 0 -0.25rem 1rem rgb(29 27 25 / 0.08);

        --sf-motion-fast: 120ms;
        --sf-motion-base: 200ms;
        --sf-ease: cubic-bezier(0.2, 0, 0, 1);
        --sf-touch-target: 2.75rem;
        --sf-content-max: 76rem;
        --sf-page-gutter: 1rem;
        --sf-bottom-nav-height: 4.25rem;
    }

    @media (min-width: 24.375rem) {
        :root {
            --sf-page-gutter: 1.25rem;
        }
    }
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        min-width: 20rem;
        overflow-x: clip;
        font-family: var(--sf-font-sans);
        line-height: var(--sf-line-body);
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
    }

    img,
    picture,
    svg {
        display: block;
        max-width: 100%;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }
}

@layer base {
    body {
        min-height: 100vh;
        overflow-x: clip;
        background: var(--sf-color-canvas);
        color: var(--sf-color-ink);
        font-size: var(--sf-font-size-200);
    }

    a {
        color: currentColor;
        text-decoration-thickness: 0.09em;
        text-underline-offset: 0.18em;
    }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 0.1875rem solid var(--sf-color-focus);
        outline-offset: 0.1875rem;
    }

    h1,
    h2,
    h3,
    p {
        margin-block-start: 0;
    }

    h1,
    h2,
    h3 {
        line-height: var(--sf-line-heading);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--sf-font-size-500);
    }

    h2 {
        font-size: var(--sf-font-size-400);
    }

    [hidden] {
        display: none !important;
    }
}

@layer layout {
    .sf-shell {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }

    .sf-shell__main {
        width: min(100%, var(--sf-content-max));
        margin-inline: auto;
        padding: var(--sf-space-5) var(--sf-page-gutter);
        padding-bottom: calc(var(--sf-bottom-nav-height) + var(--sf-space-6) + env(safe-area-inset-bottom));
    }

    .sf-stack {
        display: grid;
        gap: var(--sf-space-4);
    }

    .sf-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sf-space-3);
    }

    .sf-grid {
        display: grid;
        gap: var(--sf-space-4);
        grid-template-columns: minmax(0, 1fr);
    }

    .sf-section {
        padding-block: var(--sf-space-5);
    }

    .sf-section + .sf-section {
        border-top: 1px solid var(--sf-color-border);
    }

    @media (min-width: 43rem) {
        .sf-grid--two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sf-shell__main {
            padding-bottom: var(--sf-space-7);
        }
    }
}

@layer components {
    .sf-skip-link {
        position: fixed;
        z-index: 1000;
        inset: var(--sf-space-2) auto auto var(--sf-space-2);
        translate: 0 -150%;
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
        padding: var(--sf-space-3) var(--sf-space-4);
    }

    .sf-skip-link:focus {
        translate: 0;
    }

    .sf-header {
        position: sticky;
        z-index: 30;
        top: 0;
        border-bottom: 1px solid var(--sf-color-border);
        background: rgb(255 253 250 / 0.96);
        backdrop-filter: blur(0.5rem);
    }

    .sf-header__inner {
        display: grid;
        width: min(100%, var(--sf-content-max));
        margin-inline: auto;
        padding: var(--sf-space-2) var(--sf-page-gutter) var(--sf-space-3);
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sf-space-2) var(--sf-space-3);
    }

    .sf-header__brand {
        display: inline-flex;
        min-height: var(--sf-touch-target);
        align-items: center;
        width: fit-content;
    }

    .sf-header__brand img {
        width: 9.0625rem;
        height: auto;
    }

    .sf-header__actions {
        display: flex;
        gap: var(--sf-space-1);
    }

    .sf-icon-action {
        position: relative;
        display: inline-grid;
        width: var(--sf-touch-target);
        min-height: var(--sf-touch-target);
        border: 0;
        border-radius: var(--sf-radius-pill);
        place-items: center;
        background: transparent;
        color: var(--sf-color-ink);
        text-decoration: none;
    }

    .sf-icon-action:hover {
        background: var(--sf-color-surface);
    }

    .sf-icon-action svg {
        width: 1.375rem;
        height: 1.375rem;
    }

    .sf-icon-action__count {
        position: absolute;
        top: 0;
        right: -0.125rem;
        min-width: 1.25rem;
        border: 2px solid var(--sf-color-canvas);
        border-radius: var(--sf-radius-pill);
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1rem;
        text-align: center;
    }

    .sf-search {
        display: flex;
        grid-column: 1 / -1;
        gap: var(--sf-space-2);
    }

    .sf-search__field {
        min-width: 0;
        flex: 1;
    }

    .sf-search__input,
    .sf-field__control {
        width: 100%;
        min-height: var(--sf-touch-target);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        padding: var(--sf-space-3) var(--sf-space-4);
        font-size: 1rem;
    }

    .sf-search__input::placeholder,
    .sf-field__control::placeholder {
        color: var(--sf-color-ink-muted);
        opacity: 1;
    }

    .sf-bottom-nav {
        position: fixed;
        z-index: 40;
        inset: auto 0 0;
        border-top: 1px solid var(--sf-color-border);
        background: rgb(255 253 250 / 0.98);
        box-shadow: var(--sf-shadow-nav);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sf-bottom-nav__list {
        display: grid;
        max-width: 32rem;
        min-height: var(--sf-bottom-nav-height);
        margin: 0 auto;
        padding: var(--sf-space-1) var(--sf-space-2);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        list-style: none;
    }

    .sf-bottom-nav__link {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: var(--sf-touch-target);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        border-radius: var(--sf-radius-control);
        color: var(--sf-color-ink-muted);
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none;
    }

    .sf-bottom-nav__link[aria-current="page"] {
        background: var(--sf-color-surface);
        color: var(--sf-color-ink);
    }

    .sf-bottom-nav__link[aria-current="page"]::before {
        position: absolute;
        top: 0.125rem;
        width: 1rem;
        height: 0.1875rem;
        border-radius: var(--sf-radius-pill);
        background: currentColor;
        content: "";
    }

    .sf-bottom-nav svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .sf-footer {
        border-top: 1px solid var(--sf-color-border);
        background: var(--sf-color-surface);
    }

    .sf-footer__inner {
        width: min(100%, var(--sf-content-max));
        margin-inline: auto;
        padding: var(--sf-space-6) var(--sf-page-gutter);
        padding-bottom: calc(var(--sf-bottom-nav-height) + var(--sf-space-5) + env(safe-area-inset-bottom));
    }

    .sf-footer summary {
        min-height: var(--sf-touch-target);
        cursor: pointer;
        font-weight: 650;
    }

    .sf-button {
        display: inline-flex;
        min-height: var(--sf-touch-target);
        align-items: center;
        justify-content: center;
        gap: var(--sf-space-2);
        border: 1px solid transparent;
        border-radius: var(--sf-radius-control);
        padding: var(--sf-space-2) var(--sf-space-4);
        font-weight: 650;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        transition: background-color var(--sf-motion-fast) var(--sf-ease), color var(--sf-motion-fast) var(--sf-ease), border-color var(--sf-motion-fast) var(--sf-ease);
    }

    .sf-button--primary {
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
    }

    .sf-button--primary:hover {
        background: var(--sf-color-action-hover);
    }

    .sf-button--secondary {
        border-color: var(--sf-color-ink);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
    }

    .sf-button--tertiary {
        background: transparent;
        color: var(--sf-color-ink);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .sf-button--danger {
        background: var(--sf-color-danger);
        color: #ffffff;
    }

    .sf-button[disabled],
    .sf-button[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .sf-button[aria-busy="true"]::before {
        width: 1rem;
        height: 1rem;
        border: 0.125rem solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        content: "";
        animation: sf-spin 0.8s linear infinite;
    }

    .sf-link {
        display: inline-flex;
        min-height: var(--sf-touch-target);
        align-items: center;
        font-weight: 600;
    }

    .sf-field {
        display: grid;
        gap: var(--sf-space-2);
    }

    .sf-field__label {
        font-weight: 650;
    }

    .sf-field__help,
    .sf-field__error {
        margin: 0;
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-field__control[aria-invalid="true"] {
        border-color: var(--sf-color-danger);
        box-shadow: inset 0 0 0 1px var(--sf-color-danger);
    }

    .sf-field__error {
        color: var(--sf-color-danger);
        font-weight: 600;
    }

    .sf-badge {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        border-radius: var(--sf-radius-pill);
        background: var(--sf-color-surface);
        color: var(--sf-color-ink);
        padding: var(--sf-space-1) var(--sf-space-3);
        font-size: var(--sf-font-size-100);
        font-weight: 700;
    }

    .sf-badge--success {
        background: var(--sf-color-success-bg);
        color: var(--sf-color-success);
    }

    .sf-badge--warning {
        background: var(--sf-color-warning-bg);
        color: var(--sf-color-warning);
    }

    .sf-badge--danger {
        background: var(--sf-color-danger-bg);
        color: var(--sf-color-danger);
    }

    .sf-chip {
        display: inline-flex;
        min-height: var(--sf-touch-target);
        align-items: center;
        gap: var(--sf-space-2);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-pill);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        padding: var(--sf-space-2) var(--sf-space-4);
    }

    .sf-chip[aria-pressed="true"] {
        border-color: var(--sf-color-action);
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
    }

    .sf-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
    }

    .sf-card__media {
        overflow: hidden;
        background: var(--sf-color-surface);
        aspect-ratio: 3 / 2;
    }

    .sf-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sf-card__body {
        padding: var(--sf-space-4);
    }

    .sf-skeleton {
        overflow: hidden;
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
    }

    .sf-skeleton::after {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.75), transparent);
        content: "";
        translate: -100% 0;
        animation: sf-shimmer 1.4s infinite;
    }

    .sf-skeleton--text {
        width: min(100%, 18rem);
        height: 1rem;
    }

    .sf-skeleton--media {
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    .sf-alert {
        border-inline-start: 0.25rem solid currentColor;
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        padding: var(--sf-space-4);
    }

    .sf-alert--success {
        background: var(--sf-color-success-bg);
        color: var(--sf-color-success);
    }

    .sf-alert--warning {
        background: var(--sf-color-warning-bg);
        color: var(--sf-color-warning);
    }

    .sf-alert--danger {
        background: var(--sf-color-danger-bg);
        color: var(--sf-color-danger);
    }

    .sf-alert__title {
        margin-bottom: var(--sf-space-1);
        font-weight: 750;
    }

    .sf-dialog {
        width: min(calc(100% - 2rem), 32rem);
        max-height: calc(100dvh - 2rem);
        overflow: auto;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        box-shadow: var(--sf-shadow-raised);
        padding: 0;
    }

    .sf-dialog::backdrop {
        background: rgb(29 27 25 / 0.58);
    }

    .sf-dialog__body {
        display: grid;
        gap: var(--sf-space-4);
        padding: var(--sf-space-5);
    }

    .sf-dialog__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--sf-space-2);
    }

    .sf-token-swatch {
        display: grid;
        min-height: 7rem;
        align-content: end;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        padding: var(--sf-space-3);
        background: var(--swatch, var(--sf-color-surface));
        color: var(--swatch-ink, var(--sf-color-ink));
        font-size: var(--sf-font-size-100);
        font-weight: 700;
    }

    .sf-empty-state {
        max-width: 38rem;
        min-height: 45vh;
        align-content: center;
        margin-inline: auto;
        text-align: center;
    }

    .sf-empty-state .sf-link {
        justify-self: center;
    }

    .sf-home-loading {
        min-height: 60vh;
    }

    .sf-hero {
        display: grid;
        overflow: hidden;
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface);
    }

    .sf-hero__content {
        z-index: 1;
        align-content: center;
        padding: var(--sf-space-6) var(--sf-space-5);
    }

    .sf-hero__eyebrow {
        margin: 0;
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .sf-section-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sf-space-3);
    }

    .sf-section-heading h2 {
        margin: 0;
    }

    .sf-product-grid{display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:var(--sf-space-3)}
    .sf-product-grid--list{grid-template-columns:1fr}

    .sf-product-card {
        position: relative;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
        transition: translate var(--sf-motion-fast) var(--sf-ease), box-shadow var(--sf-motion-fast) var(--sf-ease);
    }

    .sf-product-card:has(.sf-product-card__link:active) {
        translate: 0 0.125rem;
    }

    .sf-product-card__link {
        display: block;
        height: 100%;
        text-decoration: none;
    }

    .sf-product-card__body {
        display: grid;
        gap: var(--sf-space-2);
        padding: var(--sf-space-3);
    }

    .sf-product-card__body h3,
    .sf-product-card__body p {
        margin: 0;
    }

    .sf-product-card__price {
        font-weight: 750;
    }

    .sf-product-card .sf-badge {
        font-size: 0.75rem;
    }

    .sf-product-card__favorite {
        position: absolute;
        z-index: 2;
        top: var(--sf-space-2);
        right: var(--sf-space-2);
        display: grid;
        width: var(--sf-touch-target);
        height: var(--sf-touch-target);
        border: 1px solid var(--sf-color-border);
        border-radius: 50%;
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        cursor: pointer;
        place-items: center;
    }

    .sf-product-card__favorite svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    .sf-product-card__status {
        margin: 0;
        border-top: 1px solid var(--sf-color-border);
        padding: var(--sf-space-3);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-product-card__fallback,
    .sf-product-card .sf-responsive-image {
        aspect-ratio: 4 / 5;
    }

    .sf-category-grid {
        display: grid;
        margin-inline: calc(var(--sf-page-gutter) * -1);
        padding-inline: var(--sf-page-gutter);
        grid-auto-columns: min(82%, 22rem);
        grid-auto-flow: column;
        gap: var(--sf-space-3);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-width: thin;
    }

    .sf-category-card {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
        scroll-snap-align: start;
        text-decoration: none;
    }

    .sf-category-card .sf-responsive-image {
        aspect-ratio: 4 / 3;
    }

    .sf-category-card::after {
        position: absolute;
        inset: 50% 0 0;
        background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
        content: "";
        pointer-events: none;
    }

    .sf-category-card__label {
        position: absolute;
        z-index: 1;
        inset: auto var(--sf-space-4) var(--sf-space-4);
        font-size: var(--sf-font-size-300);
        font-weight: 750;
        text-shadow: 0 1px 2px rgb(0 0 0 / 0.7);
    }

    .sf-responsive-image {
        position: relative;
        display: grid;
        width: 100%;
        overflow: hidden;
        margin: 0;
        place-items: center;
        aspect-ratio: var(--sf-image-ratio);
        background: var(--sf-color-surface);
    }

    .sf-responsive-image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sf-image-fallback {
        display: grid;
        min-height: 8rem;
        padding: var(--sf-space-4);
        place-content: center;
        justify-items: center;
        gap: var(--sf-space-2);
        background: var(--sf-color-surface);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
        text-align: center;
    }

    .sf-image-fallback svg {
        width: 2rem;
        height: 2rem;
    }

    .sf-image-fallback picture,
    .sf-image-fallback picture img {
        display: block;
        width: min(100%, 28rem);
        height: auto;
    }

    .sf-image-fallback picture {
        overflow: hidden;
        border-radius: var(--sf-radius-control);
    }

    .sf-consent-root {
        display: contents;
    }

    .sf-consent {
        position: fixed;
        z-index: 80;
        inset: auto var(--sf-space-3) calc(var(--sf-bottom-nav-height) + var(--sf-space-3) + env(safe-area-inset-bottom));
        max-height: min(32rem, calc(100dvh - var(--sf-bottom-nav-height) - 2rem));
        overflow: auto;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-consent__content,
    .sf-consent-panel {
        padding: var(--sf-space-5);
    }

    .sf-consent__content h2,
    .sf-consent__content p,
    .sf-consent-panel h2 {
        margin: 0;
    }

    .sf-consent__actions {
        display: grid;
        gap: var(--sf-space-2);
    }

    .sf-consent-link {
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        padding: 0;
    }

    .sf-consent-panel {
        position: fixed;
        z-index: 90;
        inset: auto var(--sf-space-3) calc(var(--sf-bottom-nav-height) + var(--sf-space-3) + env(safe-area-inset-bottom));
        max-height: min(36rem, calc(100dvh - var(--sf-bottom-nav-height) - 2rem));
        overflow: auto;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-consent-option {
        display: grid;
        min-height: var(--sf-touch-target);
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--sf-space-3);
        cursor: pointer;
    }

    .sf-consent-option input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.125rem;
        accent-color: var(--sf-color-action);
    }

    .sf-consent-option span {
        display: grid;
        gap: var(--sf-space-1);
    }

    .sf-consent-option small {
        color: var(--sf-color-ink-muted);
    }

    .sf-catalog header h1,
    .sf-catalog header p,
    .sf-suggestions p {
        margin: 0;
    }

    .sf-eyebrow {
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .sf-search-box,
    .sf-catalog-sort {
        display: grid;
        gap: var(--sf-space-2);
    }

    .sf-search-box > label,
    .sf-catalog-sort > label,
    .sf-field > span,
    .sf-price-range legend {
        font-weight: 700;
    }

    .sf-search-box__controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--sf-space-2);
    }

    .sf-search-box input,
    .sf-catalog-sort select,
    .sf-filter-sheet select,
    .sf-filter-sheet input {
        min-width: 0;
        min-height: var(--sf-touch-target);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        padding: var(--sf-space-3);
        font: inherit;
    }

    .sf-search-box small,
    .sf-search-history-choice small {
        color: var(--sf-color-ink-muted);
    }

    .sf-suggestions {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        padding: var(--sf-space-3);
    }

    .sf-suggestions ul {
        display: grid;
        margin: var(--sf-space-2) 0 0;
        padding: 0;
        list-style: none;
    }

    .sf-suggestions button {
        width: 100%;
        min-height: var(--sf-touch-target);
        border: 0;
        background: transparent;
        color: inherit;
        padding: var(--sf-space-2);
        text-align: left;
    }

    .sf-search-history {
        display: flex;
        align-items: center;
        gap: var(--sf-space-2);
        overflow-x: auto;
    }

    .sf-search-history .sf-chip {
        flex: 0 0 auto;
        cursor: pointer;
    }

    .sf-catalog-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: var(--sf-space-3);
    }

    .sf-filter-sheet {
        width: min(100% - 2rem, 34rem);
        max-height: calc(100dvh - var(--sf-space-4));
        overflow: auto;
        margin: auto auto 0;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel) var(--sf-radius-panel) 0 0;
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        padding: var(--sf-space-5);
    }

    .sf-filter-sheet::backdrop {
        background: rgb(0 0 0 / 0.55);
    }

    .sf-price-range {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sf-space-3);
        border: 0;
        padding: 0;
    }

    .sf-price-range legend,
    .sf-price-range .sf-field__error {
        grid-column: 1 / -1;
    }

    .sf-filter-sheet__actions {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sf-space-2);
        background: var(--sf-color-surface-raised);
        padding-top: var(--sf-space-3);
    }

    .sf-load-more {
        justify-self: center;
    }

    .sf-discover {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface);
        padding: var(--sf-space-4);
    }

    .sf-discover::before {
        position: absolute;
        z-index: -1;
        inset: 0;
        background-image: image-set(
            url("/assets/storefront/discover/discover-texture-480.webp") 1x,
            url("/assets/storefront/discover/discover-texture-864.webp") 2x
        );
        background-position: center;
        background-size: cover;
        content: "";
        opacity: 0.42;
        pointer-events: none;
    }

    .sf-discover header,
    .sf-discover__stage,
    .sf-discover .sf-empty-state,
    .sf-discover .sf-alert {
        border-radius: var(--sf-radius-card);
        background: color-mix(in srgb, var(--sf-color-surface-raised) 94%, transparent);
        padding: var(--sf-space-4);
    }

    .sf-discover header h1,
    .sf-discover header p,
    .sf-discover__feedback,
    .sf-favorites header h1,
    .sf-favorites header p,
    .sf-favorites__feedback {
        margin: 0;
    }

    .sf-discover__stage {
        max-width: 28rem;
        margin-inline: auto;
        touch-action: pan-y;
    }

    .sf-discover__stage--love {
        animation: sf-discover-love var(--sf-motion-normal) var(--sf-ease);
    }

    .sf-discover__stage--pass {
        animation: sf-discover-pass var(--sf-motion-normal) var(--sf-ease);
    }

    .sf-discover__stage--undo {
        animation: sf-discover-undo var(--sf-motion-normal) var(--sf-ease);
    }

    .sf-discover__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sf-space-3);
    }

    .sf-discover__undo {
        justify-self: center;
    }

    .sf-favorites__feedback {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface);
        padding: var(--sf-space-3);
    }

    .sf-favorite-item {
        display: grid;
        align-content: start;
        gap: var(--sf-space-2);
    }

    .sf-favorite-item > .sf-button {
        width: 100%;
    }

    .sf-share-control {
        display: inline-grid;
    }

    .sf-favorite-item > .sf-share-control,
    .sf-favorite-item > .sf-share-control .sf-button {
        width: 100%;
    }

    .sf-product-detail__layout {
        display: grid;
        min-width: 0;
        gap: var(--sf-space-5);
    }

    .sf-product-detail__content,
    .sf-product-detail__content header,
    .sf-detail-section {
        min-width: 0;
    }

    .sf-product-detail__content h1,
    .sf-product-detail__content h2,
    .sf-product-detail__content h3,
    .sf-product-detail__content p {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .sf-product-detail__price {
        font-size: var(--sf-font-size-400);
        font-weight: 800;
    }

    .sf-gallery {
        min-width: 0;
        touch-action: pan-y pinch-zoom;
    }

    .sf-gallery__viewport {
        position: relative;
        display: grid;
        min-height: 18rem;
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface);
        place-items: center;
    }

    .sf-gallery__viewport::before {
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.35) 45%, transparent 70%);
        content: "";
        animation: sf-shimmer 1.6s infinite;
        pointer-events: none;
    }

    .sf-gallery__viewport > * {
        z-index: 1;
    }

    .sf-gallery__viewport .sf-responsive-image,
    .sf-gallery__viewport .sf-image-fallback {
        width: 100%;
        min-height: 18rem;
    }

    .sf-gallery__zoom {
        position: absolute;
        right: var(--sf-space-3);
        bottom: var(--sf-space-3);
    }

    .sf-gallery__controls {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sf-space-2);
        text-align: center;
    }

    .sf-gallery__controls p {
        margin: 0;
    }

    .sf-gallery__thumbnails {
        display: flex;
        overflow-x: auto;
        padding: var(--sf-space-1);
        gap: var(--sf-space-2);
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
    }

    .sf-gallery__thumbnails button {
        flex: 0 0 auto;
        overflow: hidden;
        width: 4.5rem;
        min-height: var(--sf-touch-target);
        border: 2px solid transparent;
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        padding: 0;
        cursor: pointer;
        scroll-snap-align: start;
    }

    .sf-gallery__thumbnails button[aria-current="true"] {
        border-color: var(--sf-color-action);
    }

    .sf-gallery__thumbnails img {
        display: block;
        width: 100%;
        height: 5.625rem;
        object-fit: cover;
    }

    .sf-gallery-zoom {
        width: min(72rem, calc(100% - 2rem));
        max-height: calc(100dvh - 2rem);
        overflow: auto;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        padding: var(--sf-space-4);
    }

    .sf-gallery-zoom::backdrop {
        background: rgb(0 0 0 / 0.72);
    }

    .sf-gallery-zoom img {
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 8rem);
        object-fit: contain;
        touch-action: pinch-zoom;
    }

    .sf-detail-section,
    .sf-product-detail__cta {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-4);
    }

    .sf-measurements,
    .sf-product-facts {
        display: grid;
        margin: 0;
        gap: 1px;
        background: var(--sf-color-border);
    }

    .sf-measurements > div,
    .sf-product-facts > div {
        display: grid;
        grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-3);
        gap: var(--sf-space-3);
    }

    .sf-measurements dt,
    .sf-product-facts dt {
        font-weight: 750;
    }

    .sf-measurements dd,
    .sf-product-facts dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .sf-size-guide {
        border-left: 0.25rem solid var(--sf-color-warning);
        background: var(--sf-color-warning-bg);
        padding: var(--sf-space-3);
    }

    .sf-defect-list,
    .sf-related__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sf-defect-list {
        display: grid;
        gap: var(--sf-space-3);
    }

    .sf-defect-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(7rem, 35%);
        align-items: start;
        border-top: 1px solid var(--sf-color-border);
        padding-top: var(--sf-space-3);
        gap: var(--sf-space-3);
    }

    .sf-defect-card .sf-responsive-image {
        border-radius: var(--sf-radius-control);
    }

    .sf-impact-metrics {
        display: grid;
        margin: 0;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: var(--sf-space-2);
    }

    .sf-impact-metrics > div {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        padding: var(--sf-space-3);
    }

    .sf-impact-metrics dt {
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-impact-metrics dd {
        margin: var(--sf-space-1) 0 0;
        font-size: var(--sf-font-size-300);
        font-weight: 800;
    }

    .sf-related__controls {
        display: flex;
        gap: var(--sf-space-2);
    }

    .sf-related__list {
        display: grid;
        margin-inline: calc(var(--sf-page-gutter) * -1);
        padding: var(--sf-space-1) var(--sf-page-gutter);
        grid-auto-columns: min(78%, 19rem);
        grid-auto-flow: column;
        gap: var(--sf-space-3);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-width: thin;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .sf-related__item {
        min-width: 0;
        scroll-snap-align: start;
    }

    .sf-related-card {
        height: 100%;
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
    }

    .sf-related-card > a {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .sf-related-card .sf-responsive-image,
    .sf-related-card .sf-image-fallback {
        aspect-ratio: 4 / 5;
    }

    .sf-related-card__body {
        padding: var(--sf-space-3);
    }

    .sf-related-card__body h3,
    .sf-related-card__body p {
        margin: 0;
    }

    .sf-bag-drawer {
        width: min(32rem, 100%);
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0 0 0 auto;
        overflow: auto;
        border: 0;
        border-left: 1px solid var(--sf-color-border);
        background: var(--sf-color-surface-raised);
        color: var(--sf-color-ink);
        padding: 0;
    }

    .sf-bag-drawer::backdrop {
        background: rgb(0 0 0 / 0.68);
    }

    .sf-bag-drawer__inner {
        min-height: 100%;
        padding: var(--sf-space-4);
    }

    .sf-bag-items {
        display: grid;
        margin: 0;
        padding: 0;
        gap: var(--sf-space-4);
        list-style: none;
    }

    .sf-bag-item {
        display: grid;
        grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
        align-items: start;
        border-bottom: 1px solid var(--sf-color-border);
        padding-bottom: var(--sf-space-4);
        gap: var(--sf-space-3);
    }

    .sf-bag-item__media .sf-responsive-image,
    .sf-bag-item__media .sf-image-fallback {
        aspect-ratio: 4 / 5;
        border-radius: var(--sf-radius-control);
    }

    .sf-bag-item__body h3,
    .sf-bag-item__body p {
        margin: 0;
    }

    .sf-bag-notice,
    .sf-reservation-clock {
        border-left: 0.25rem solid var(--sf-color-warning);
        background: var(--sf-color-warning-bg);
        padding: var(--sf-space-2) var(--sf-space-3);
    }

    .sf-bag-totals {
        display: grid;
        margin: 0;
        gap: var(--sf-space-2);
    }

    .sf-bag-totals > div {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--sf-color-border);
        padding-block: var(--sf-space-2);
        gap: var(--sf-space-3);
    }

    .sf-bag-totals dd {
        margin: 0;
        text-align: right;
    }

    .sf-bag-totals__total {
        font-size: var(--sf-font-size-300);
        font-weight: 800;
    }

    .sf-link-button {
        width: fit-content;
        border: 0;
        background: transparent;
        color: inherit;
        padding: var(--sf-space-2) 0;
        font: inherit;
        text-decoration: underline;
        cursor: pointer;
    }

    .sf-account-grid {
        display: grid;
        gap: var(--sf-space-5);
    }

    .sf-account-access header h1,
    .sf-account-access header p,
    .sf-password-recovery header h1,
    .sf-password-recovery header p,
    .sf-shopping-bag header h1,
    .sf-shopping-bag header p,
    .sf-form-status {
        margin: 0;
    }

    .sf-form-status:not(:empty) {
        border-left: 0.25rem solid var(--sf-color-focus);
        background: var(--sf-color-surface);
        padding: var(--sf-space-3);
    }

    .sf-checkout {
        width: min(100%, 48rem);
        margin-inline: auto;
    }

    .sf-checkout > header :is(h1, p),
    .sf-checkout-panel header :is(h2, p),
    .sf-coupon h3 {
        margin: 0;
    }

    .sf-checkout-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sf-space-1);
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: var(--sf-font-size-xs);
    }

    .sf-checkout-steps :is(span, button) {
        display: grid;
        place-items: center;
        min-height: var(--sf-touch-target);
        width: 100%;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        color: var(--sf-color-ink-muted);
        padding: var(--sf-space-1);
        text-align: center;
        font: inherit;
    }

    .sf-checkout-steps button {
        cursor: pointer;
        color: var(--sf-color-ink);
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .sf-checkout-steps [aria-current="step"] {
        border-color: var(--sf-color-action);
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
        font-weight: 700;
    }

    .sf-checkout-panel {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-4);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-address-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.35fr);
        gap: var(--sf-space-3);
    }

    .sf-choice-list {
        display: grid;
        gap: var(--sf-space-3);
        margin: 0;
        border: 0;
        padding: 0;
    }

    .sf-choice-list legend {
        margin-bottom: var(--sf-space-3);
        font-weight: 700;
    }

    .sf-choice-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--sf-space-3);
        min-height: var(--sf-touch-target);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        padding: var(--sf-space-3);
        cursor: pointer;
    }

    .sf-choice-card:has(input:checked) {
        border-color: var(--sf-color-action);
        box-shadow: inset 0 0 0 1px var(--sf-color-action);
    }

    .sf-choice-card input {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.15rem 0 0;
        accent-color: var(--sf-color-action);
    }

    .sf-choice-card span,
    .sf-choice-card small {
        display: block;
    }

    .sf-choice-card small {
        margin-top: var(--sf-space-1);
        color: var(--sf-color-ink-muted);
    }

    .sf-choice-card--disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

    .sf-coupon {
        border-block: 1px solid var(--sf-color-border);
        padding-block: var(--sf-space-4);
    }

    .sf-inline-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--sf-space-3);
    }

    .sf-checkout-review {
        display: grid;
        gap: var(--sf-space-3);
        margin: 0;
    }

    .sf-checkout-review div {
        display: grid;
        gap: var(--sf-space-1);
        border-bottom: 1px solid var(--sf-color-border);
        padding-bottom: var(--sf-space-3);
    }

    .sf-checkout-review dt {
        font-weight: 700;
    }

    .sf-checkout-review dd {
        margin: 0;
    }

    .sf-review-items,
    .sf-next-steps {
        display: grid;
        gap: var(--sf-space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sf-review-items li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--sf-space-3);
        border-bottom: 1px solid var(--sf-color-border);
        padding-bottom: var(--sf-space-3);
    }

    .sf-review-items span,
    .sf-review-items small,
    .sf-next-steps span {
        display: block;
    }

    .sf-review-items small,
    .sf-next-steps span {
        margin-top: var(--sf-space-1);
        color: var(--sf-color-ink-muted);
    }

    .sf-checkout-totals {
        position: sticky;
        bottom: calc(var(--sf-bottom-nav-height) + env(safe-area-inset-bottom));
        z-index: 2;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        padding: var(--sf-space-3);
    }

    .sf-payment-page,
    .sf-order-confirmation {
        width: min(100%, 42rem);
        margin-inline: auto;
    }

    .sf-payment-page > header :is(h1, p),
    .sf-order-confirmation > header :is(h1, p),
    .sf-payment-card :is(h2, h3, p),
    .sf-confirmation-card :is(h2, h3, p) {
        margin-block: 0;
    }

    .sf-payment-card,
    .sf-confirmation-card {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-4);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-payment-method {
        border-block: 1px solid var(--sf-color-border);
        padding-block: var(--sf-space-4);
    }

    .sf-pix-qr {
        width: min(15rem, 100%);
        height: auto;
        margin-inline: auto;
        border: 0.5rem solid #fff;
        background: #fff;
        image-rendering: pixelated;
    }

    .sf-copy-value {
        overflow-wrap: anywhere;
        resize: vertical;
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: var(--sf-font-size-sm);
    }

    .sf-next-steps {
        counter-reset: sf-next-step;
    }

    .sf-next-steps li {
        position: relative;
        min-height: var(--sf-touch-target);
        padding-left: 2.75rem;
        counter-increment: sf-next-step;
    }

    .sf-next-steps li::before {
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
        content: counter(sf-next-step);
        font-weight: 700;
    }

    .sf-checkout-failure,
    .sf-customer-orders,
    .sf-account-preferences,
    .sf-purchase-preview {
        width: min(100%, 48rem);
        margin-inline: auto;
    }

    :is(.sf-checkout-failure, .sf-customer-orders, .sf-account-preferences, .sf-purchase-preview) > header :is(h1, p),
    :is(.sf-failure-card, .sf-order-detail, .sf-preference-card, .sf-preview-card) :is(h2, h3, p) {
        margin-block: 0;
    }

    .sf-failure-card,
    .sf-order-detail,
    .sf-preference-card,
    .sf-preview-card {
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-4);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-order-list,
    .sf-order-timeline,
    .sf-preview-progress {
        display: grid;
        gap: var(--sf-space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sf-order-list > li {
        display: grid;
        gap: var(--sf-space-4);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-4);
    }

    .sf-order-list > li > div :is(a, small),
    .sf-order-timeline li :is(span, time),
    .sf-section-heading span :is(strong, small) {
        display: block;
    }

    .sf-order-list dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sf-space-3);
        margin: 0;
    }

    .sf-order-list :is(dt, dd) {
        margin: 0;
    }

    .sf-order-list dt,
    .sf-order-timeline :is(span, time),
    .sf-section-heading small {
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-order-timeline li {
        border-left: 0.25rem solid var(--sf-color-border);
        padding-left: var(--sf-space-4);
    }

    .sf-order-timeline__current {
        border-color: var(--sf-color-success) !important;
    }

    .sf-preview-progress {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        font-size: var(--sf-font-size-100);
        text-align: center;
    }

    .sf-preview-progress li {
        border-bottom: 0.25rem solid var(--sf-color-border);
        padding-block: var(--sf-space-2);
    }

    .sf-preview-progress .is-current {
        border-color: var(--sf-color-action);
        font-weight: 700;
    }

    .sf-preview-media {
        min-height: 15rem;
        border-radius: var(--sf-radius-card);
        background: linear-gradient(145deg, #dce8d4, #557259 55%, #263d2b);
    }

    .sf-status-badge {
        width: fit-content;
        border-radius: 999px;
        padding: var(--sf-space-1) var(--sf-space-3);
        font-size: var(--sf-font-size-100);
        font-weight: 700;
    }

    .sf-status-badge--success {
        background: var(--sf-color-success-bg);
        color: var(--sf-color-success);
    }

    .sf-retention-page,
    .sf-collection,
    .sf-engagement {
        width: min(100%, 75rem);
        margin-inline: auto;
    }

    :is(.sf-retention-page, .sf-collection) > header :is(h1, p),
    .sf-collection-hero__copy :is(h1, p),
    .sf-story-card :is(h2, p) {
        margin-block: 0;
    }

    .sf-onboarding-options {
        display: grid;
        gap: var(--sf-space-3);
    }

    .sf-collection-hero,
    .sf-story-card {
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-collection-hero .sf-responsive-image {
        min-height: 16rem;
        aspect-ratio: 3 / 2;
    }

    .sf-collection-hero__copy {
        padding: var(--sf-space-4);
    }

    .sf-story-card {
        position: relative;
        min-height: 34rem;
        background: var(--sf-color-surface);
    }

    .sf-story-card picture,
    .sf-story-card picture img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .sf-story-card picture {
        position: absolute;
        inset: 0;
    }

    .sf-story-card picture img {
        object-fit: cover;
    }

    .sf-story-card__copy {
        position: relative;
        z-index: 1;
        width: min(88%, 30rem);
        margin: var(--sf-space-4);
        padding: var(--sf-space-4);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: color-mix(in srgb, var(--sf-color-surface) 94%, transparent);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-story-card:focus-visible {
        outline: 0.1875rem solid var(--sf-color-focus);
        outline-offset: 0.1875rem;
    }

    .sf-story-progress,
    .sf-story-card time {
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
        font-weight: 700;
    }

    .sf-story-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sf-space-3);
    }

    .sf-story-controls [data-story-play] {
        grid-column: 1 / -1;
    }

    .sf-story-alternative {
        border-top: 1px solid var(--sf-color-border);
        padding-top: var(--sf-space-4);
    }

    .sf-story-alternative summary {
        min-height: var(--sf-touch-target);
        cursor: pointer;
        font-weight: 700;
    }

    .sf-story-alternative li + li {
        margin-top: var(--sf-space-4);
    }

    .sf-engagement > header :is(h1, p),
    .sf-alert-item :is(h3, p) {
        margin-block: 0;
    }

    .sf-alert-item {
        padding-block: var(--sf-space-4);
        border-top: 1px solid var(--sf-color-border);
    }

    .sf-share-url {
        overflow-wrap: anywhere;
    }

    .sf-engagement select {
        min-height: var(--sf-touch-target);
        padding-inline: var(--sf-space-3);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        color: var(--sf-color-ink);
    }

    .sf-trust-page {
        width: min(100%, 68rem);
        margin-inline: auto;
    }

    .sf-trust-page > header :is(h1, p),
    .sf-prose-section :is(h2, h3, p),
    .sf-review-list article :is(h3, p) {
        margin-block: 0;
    }

    .sf-about-hero {
        display: grid;
        gap: var(--sf-space-5);
        align-items: center;
        padding: var(--sf-space-5);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
    }

    .sf-about-hero__logo {
        width: min(100%, 24rem);
        margin-inline: auto;
    }

    .sf-about-hero__logo img,
    .sf-about-illustration img {
        display: block;
        width: 100%;
        height: auto;
    }

    .sf-about-illustration {
        margin: 0;
        overflow: hidden;
        border-radius: var(--sf-radius-panel);
        background: var(--sf-color-surface-raised);
    }

    .sf-about-illustration figcaption {
        padding: var(--sf-space-3) var(--sf-space-4);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-prose-section,
    .sf-review-list article {
        padding: var(--sf-space-5);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
    }

    .sf-prose-section :is(ul, ol) {
        margin-block: 0;
        padding-inline-start: 1.4rem;
    }

    .sf-content-links,
    .sf-guide-index,
    .sf-help-categories {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sf-space-3);
    }

    .sf-guide-index a,
    .sf-help-categories a {
        min-height: var(--sf-touch-target);
        align-content: center;
        padding-inline: var(--sf-space-4);
        border: 1px solid var(--sf-color-border);
        border-radius: 999px;
        color: var(--sf-color-ink);
        text-decoration: none;
    }

    .sf-help-categories a.is-current {
        border-color: var(--sf-color-action);
        background: var(--sf-color-action);
        color: var(--sf-color-on-action);
    }

    .sf-help-search__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--sf-space-2);
    }

    .sf-help-search input,
    .sf-trust-page :is(select, textarea) {
        min-height: var(--sf-touch-target);
        padding: var(--sf-space-3);
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        color: var(--sf-color-ink);
        font: inherit;
    }

    .sf-trust-page textarea {
        min-height: 9rem;
        resize: vertical;
    }

    .sf-faq-list details {
        border-block-end: 1px solid var(--sf-color-border);
        padding-block: var(--sf-space-3);
    }

    .sf-faq-list summary {
        min-height: var(--sf-touch-target);
        cursor: pointer;
        align-content: center;
        font-weight: 700;
    }

    .sf-review-list article footer {
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    @media (min-width: 43rem) {
        .sf-bottom-nav {
            position: static;
            order: -1;
            border-top: 0;
            border-bottom: 1px solid var(--sf-color-border);
            box-shadow: none;
        }

        .sf-footer__inner {
            padding-bottom: var(--sf-space-6);
        }

        .sf-hero {
            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        }

        .sf-hero .sf-responsive-image {
            min-height: 27rem;
        }

        .sf-product-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: var(--sf-space-4);
        }

        .sf-category-grid {
            margin-inline: 0;
            padding-inline: 0;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-flow: row;
            overflow: visible;
        }

        .sf-consent,
        .sf-consent-panel {
            right: var(--sf-space-5);
            bottom: var(--sf-space-5);
            left: auto;
            width: min(30rem, calc(100% - 3rem));
        }

        .sf-consent__actions {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sf-consent__actions .sf-button--tertiary {
            grid-column: 1 / -1;
        }

        .sf-filter-sheet {
            margin: auto;
            border-radius: var(--sf-radius-panel);
        }

        .sf-product-detail__layout {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
            align-items: start;
        }

        .sf-gallery {
            position: sticky;
            top: var(--sf-space-4);
        }

        .sf-related__list {
            margin-inline: 0;
            padding-inline: var(--sf-space-1);
            grid-auto-columns: minmax(15rem, 1fr);
        }

        .sf-account-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
        }

        .sf-checkout-panel {
            padding: var(--sf-space-6);
        }

        .sf-checkout-totals {
            position: static;
        }

        .sf-onboarding-options {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sf-collection-hero {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
        }

        .sf-collection-hero__copy {
            align-content: center;
            padding: var(--sf-space-6);
        }

        .sf-story-card {
            min-height: 42rem;
        }

        .sf-story-card__copy {
            margin: var(--sf-space-6);
            padding: var(--sf-space-5);
        }

        .sf-about-hero {
            grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
        }
    }
}

@layer utilities {
    .sf-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    .sf-muted {
        color: var(--sf-color-ink-muted);
    }
}

@keyframes sf-spin {
    to {
        rotate: 1turn;
    }
}

@keyframes sf-shimmer {
    to {
        translate: 100% 0;
    }
}

@keyframes sf-discover-love {
    from {
        translate: 1.25rem 0;
        opacity: 0.65;
    }
}

@keyframes sf-discover-pass {
    from {
        translate: -1.25rem 0;
        opacity: 0.65;
    }
}

@keyframes sf-discover-undo {
    from {
        scale: 0.98;
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --sf-color-border: #6a645d;
    }

    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline-width: 0.25rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --sf-color-canvas: #171513;
        --sf-color-surface: #28231f;
        --sf-color-surface-raised: #211e1b;
        --sf-color-ink: #f7f3ed;
        --sf-color-ink-muted: #c7beb4;
        --sf-color-border: #665d55;
        --sf-color-action: #f7f3ed;
        --sf-color-action-hover: #ded7ce;
        --sf-color-on-action: #171513;
        --sf-color-focus: #75b9ff;
        --sf-color-success: #8edbb3;
        --sf-color-success-bg: #153b2a;
        --sf-color-warning: #ffd18b;
        --sf-color-warning-bg: #493014;
        --sf-color-danger: #ffb4ac;
        --sf-color-danger-bg: #501b18;
        --sf-shadow-raised: 0 0.5rem 1.5rem rgb(0 0 0 / 0.42);
        --sf-shadow-nav: 0 -0.25rem 1rem rgb(0 0 0 / 0.36);
    }

    .sf-header,
    .sf-bottom-nav {
        background: var(--sf-color-canvas);
    }

    .sf-discover::before {
        opacity: 0.08;
    }

    .sf-button--danger {
        background: #b7352d;
        color: #ffffff;
    }
}

@media print {
    .sf-header,
    .sf-bottom-nav,
    .sf-footer,
    .sf-skip-link {
        display: none;
    }

    .sf-shell__main {
        max-width: none;
        padding: 0;
    }
}