@layer components {
    .sf-shopping-bag {
        width: min(100%, 70rem);
        margin-inline: auto;
    }

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

    .sf-shopping-bag__inner > header h1 {
        margin: 0;
        font-size: var(--sf-font-size-500);
    }

    .sf-cart-page-heading {
        display: grid;
        gap: var(--sf-space-4);
    }

    .sf-cart-steps {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sf-cart-steps ol {
        display: grid;
        min-width: 43rem;
        grid-template-columns: repeat(5, 1fr);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sf-cart-steps li {
        display: flex;
        align-items: center;
        border-bottom: 2px solid var(--sf-color-border);
        gap: var(--sf-space-2);
        padding: 0 var(--sf-space-2) var(--sf-space-2);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
        white-space: nowrap;
    }

    .sf-cart-steps li span {
        display: grid;
        width: 1.75rem;
        height: 1.75rem;
        place-items: center;
        border: 1px solid currentcolor;
        border-radius: 50%;
        font-weight: 800;
    }

    .sf-cart-steps li[aria-current="step"] {
        border-color: var(--sf-color-action);
        color: var(--sf-color-ink);
        font-weight: 800;
    }

    .sf-bag-summary--page {
        display: grid;
        gap: var(--sf-space-4);
    }

    .sf-cart-toolbar {
        display: flex;
        min-height: var(--sf-touch-target);
        align-items: center;
        justify-content: space-between;
        border-block: 1px solid var(--sf-color-border);
        gap: var(--sf-space-3);
    }

    .sf-cart-toolbar p,
    .sf-cart-feedback,
    .sf-cart-offline {
        margin: 0;
    }

    .sf-cart-refresh,
    .sf-cart-remove,
    .sf-cart-save,
    .sf-cart-toast button {
        min-height: var(--sf-touch-target);
        border: 0;
        background: transparent;
        color: var(--sf-color-ink);
        padding: var(--sf-space-2);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.2em;
        cursor: pointer;
    }

    .sf-cart-remove {
        color: var(--sf-color-danger);
    }

    .sf-cart-save,
    .sf-cart-toast button {
        color: var(--sf-color-action);
    }

    .sf-cart-feedback,
    .sf-cart-offline {
        border-radius: var(--sf-radius-control);
        background: var(--sf-color-surface);
        padding: var(--sf-space-3);
        font-size: var(--sf-font-size-100);
    }

    .sf-cart-offline {
        border-left: 0.2rem solid var(--sf-color-warning);
        padding-block: var(--sf-space-2);
    }

    .sf-cart-toast {
        display: flex;
        position: sticky;
        z-index: 20;
        top: var(--sf-space-2);
        min-height: var(--sf-touch-target);
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-control);
        gap: var(--sf-space-3);
        background: var(--sf-color-ink);
        color: var(--sf-color-surface-raised);
        padding: var(--sf-space-2) var(--sf-space-3);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-cart-toast button {
        color: inherit;
    }

    .sf-cart-empty {
        display: grid;
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-panel);
        background: linear-gradient(145deg, var(--sf-color-surface-raised), var(--sf-color-surface));
    }

    .sf-cart-empty__art {
        display: grid;
        min-height: 10rem;
        place-items: center;
        background:
            radial-gradient(circle at 78% 20%, rgb(193 107 67 / 0.28) 0 2.75rem, transparent 2.8rem),
            radial-gradient(circle at 18% 90%, rgb(116 128 105 / 0.24) 0 5rem, transparent 5.1rem),
            var(--sf-color-surface);
    }

    .sf-cart-empty__art svg {
        width: min(54%, 10rem);
        fill: none;
        stroke: var(--sf-color-ink);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 4;
    }

    .sf-cart-empty__art circle {
        fill: rgb(193 107 67 / 0.45);
        stroke: none;
    }

    .sf-cart-empty__copy {
        align-content: center;
        padding: var(--sf-space-5);
    }

    .sf-cart-empty__copy h2,
    .sf-cart-empty__copy p,
    .sf-cart-eyebrow {
        margin: 0;
    }

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

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

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

    .sf-cart-empty__actions .sf-button {
        width: 100%;
        padding-inline: var(--sf-space-2);
        font-size: var(--sf-font-size-100);
        white-space: nowrap;
    }

    .sf-cart-discovery {
        display: grid;
        gap: var(--sf-space-3);
        padding-block-start: var(--sf-space-4);
    }

    .sf-cart-discovery .sf-section-heading {
        align-items: end;
    }

    .sf-cart-discovery .sf-section-heading h2 {
        margin-block-start: var(--sf-space-1);
    }

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

    .sf-cart-discovery-card {
        display: grid;
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
    }

    .sf-cart-discovery-card__media {
        display: block;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background: var(--sf-color-surface);
    }

    .sf-cart-discovery-card__media img,
    .sf-cart-discovery-card__media .sf-image-fallback {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sf-cart-discovery-card__body {
        display: grid;
        align-content: start;
        gap: var(--sf-space-2);
        padding: var(--sf-space-3);
    }

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

    .sf-cart-discovery-card__body h3 {
        font-size: var(--sf-font-size-200);
    }

    .sf-cart-discovery-card__body .sf-button {
        width: 100%;
        margin-block-start: auto;
        padding-inline: var(--sf-space-2);
        font-size: var(--sf-font-size-100);
        white-space: nowrap;
    }

    .sf-bag-summary--page .sf-cart-layout {
        display: grid;
        align-items: start;
        gap: var(--sf-space-5);
    }

    .sf-bag-summary--page .sf-cart-items {
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }

    .sf-bag-summary--page .sf-cart-order {
        grid-column: 1;
        grid-row: 2;
    }

    .sf-bag-summary--page .sf-bag-item {
        grid-template-columns: minmax(6.75rem, 7.5rem) minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid var(--sf-color-border);
        border-radius: var(--sf-radius-card);
        background: var(--sf-color-surface-raised);
        padding: var(--sf-space-2);
        box-shadow: 0 0.25rem 1rem rgb(29 27 25 / 0.06);
    }

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

    .sf-bag-item__media .sf-responsive-image,
    .sf-bag-item__media .sf-image-fallback {
        width: 100%;
        height: 100%;
        min-height: 9rem;
    }

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

    .sf-bag-item__body {
        display: grid;
        min-width: 0;
        align-content: start;
        gap: var(--sf-space-1);
    }

    .sf-bag-item__heading {
        display: grid;
        align-items: start;
        gap: var(--sf-space-2);
    }

    .sf-bag-item__heading > div {
        min-width: 0;
    }

    .sf-bag-item__heading h3 {
        font-size: var(--sf-font-size-200);
        line-height: 1.3;
    }

    .sf-bag-item__heading h3 a {
        color: inherit;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }

    .sf-bag-item__price {
        margin-block-start: var(--sf-space-1) !important;
        font-size: var(--sf-font-size-300);
        font-weight: 800;
    }

    .sf-bag-item__heading .sf-badge {
        width: fit-content;
        font-size: 0.75rem;
    }

    .sf-cart-capabilities {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sf-space-1) var(--sf-space-3);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-bag-item__facts {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        gap: var(--sf-space-1) var(--sf-space-3);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
    }

    .sf-bag-item__facts div {
        display: flex;
        gap: var(--sf-space-1);
    }

    .sf-bag-item__facts dt {
        font-weight: 800;
    }

    .sf-bag-item__facts dd {
        margin: 0;
    }

    .sf-cart-capabilities > span + span::before {
        margin-inline-end: var(--sf-space-2);
        content: "•";
    }

    .sf-reservation-clock {
        border: 0;
        background: transparent;
        padding: 0;
        color: var(--sf-color-success);
        font-weight: 750;
    }

    .sf-bag-notice {
        border-left-width: 0.1875rem;
        border-radius: 0 var(--sf-radius-control) var(--sf-radius-control) 0;
        padding: var(--sf-space-2);
        font-size: var(--sf-font-size-100);
    }

    .sf-bag-item__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sf-space-1) var(--sf-space-2);
    }

    .sf-bag-item__actions .sf-link {
        min-height: var(--sf-touch-target);
        align-content: center;
    }

    .sf-cart-order {
        display: grid;
        gap: var(--sf-space-4);
        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-cart-order h2 {
        margin: 0;
        font-size: var(--sf-font-size-400);
    }

    .sf-cart-order .sf-bag-totals > div {
        border: 0;
        padding-block: var(--sf-space-1);
    }

    .sf-cart-order .sf-bag-totals__total {
        margin-block-start: var(--sf-space-2);
        border-top: 1px solid var(--sf-color-border);
        padding-block-start: var(--sf-space-3);
    }

    .sf-field-error {
        color: var(--sf-color-danger);
        font-size: var(--sf-font-size-100);
    }

    .sf-cart-reservation-note {
        margin: 0;
        border-left: 0.2rem solid var(--sf-color-action);
        padding-inline-start: var(--sf-space-3);
        font-size: var(--sf-font-size-100);
    }

    .sf-reservation-expired {
        display: grid;
        border-left: 0.25rem solid var(--sf-color-warning);
        border-radius: var(--sf-radius-control);
        gap: var(--sf-space-1);
        background: var(--sf-color-warning-bg);
        color: var(--sf-color-warning);
        padding: var(--sf-space-3);
    }

    .sf-reservation-expired button {
        min-height: var(--sf-touch-target);
        justify-self: start;
        border: 0;
        background: transparent;
        color: inherit;
        padding: 0;
        font: inherit;
        font-size: var(--sf-font-size-100);
        text-decoration: underline;
        cursor: pointer;
    }

    .sf-cart-checkout-panel {
        display: grid;
        border: 2px solid var(--sf-color-action);
        border-radius: var(--sf-radius-control);
        gap: var(--sf-space-3);
        padding: var(--sf-space-3);
        box-shadow: var(--sf-shadow-raised);
    }

    .sf-cart-stage-cta {
        border: 1px solid var(--sf-color-border);
    }

    .sf-cart-checkout-panel p {
        margin: 0;
    }

    .sf-cart-trust {
        display: grid;
        margin: 0;
        padding: 0;
        gap: var(--sf-space-2);
        color: var(--sf-color-ink-muted);
        font-size: var(--sf-font-size-100);
        list-style: none;
    }

    .sf-cart-trust a {
        color: inherit;
    }

    .sf-cart-checkout,
    .sf-cart-continue {
        width: 100%;
    }

    .sf-cart-checkout {
        min-height: var(--sf-control-lg);
        justify-content: center;
        font-size: var(--sf-font-size-200);
        font-weight: 850;
    }

    .sf-cart-continue {
        min-height: var(--sf-touch-target);
        justify-content: center;
    }

    @media (min-width: 36rem) {
        .sf-cart-empty {
            grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
        }

        .sf-cart-discovery__grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .sf-bag-summary--page .sf-bag-item {
            grid-template-columns: 9rem minmax(0, 1fr);
            padding: var(--sf-space-4);
        }

        .sf-bag-item__heading {
            grid-template-columns: minmax(0, 1fr) auto;
        }
    }

    @media (min-width: 56rem) {
        .sf-bag-summary--page .sf-cart-layout {
            grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
            gap: var(--sf-space-6);
        }

        .sf-bag-summary--page .sf-cart-items {
            grid-column: 1;
            grid-row: 1;
        }

        .sf-bag-summary--page .sf-cart-order {
            grid-column: 2;
            grid-row: 1;
        }

        .sf-bag-summary--page .sf-bag-item {
            grid-template-columns: 10rem minmax(0, 1fr);
        }

        .sf-bag-summary--page .sf-cart-order {
            position: sticky;
            top: var(--sf-space-4);
        }
    }

}

@media (prefers-color-scheme: dark) {
    .sf-bag-summary--page .sf-bag-item {
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);
    }
}