.shopping-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1420px;
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 4rem) clamp(18px, 3vw, 40px) 5rem;
    min-width: 0;
}

.shopping-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.shopping-page h1,
.shopping-page h2,
.shopping-page h3,
.shopping-page p {
    margin: 0;
}

.shopping-page h1 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 650; }
.shopping-page h2 { font-size: 1.05rem; font-weight: 650; }
.shopping-page h3 { font-size: .88rem; font-weight: 600; }
.shopping-page__header p { margin-top: .3rem; color: var(--mud-palette-text-secondary); }

.shopping-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    align-items: start;
    gap: 1rem;
}

.shopping-lines { display: grid; min-width: 0; gap: .8rem; }
.shopping-card,
.shopping-totals,
.shopping-empty {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 52%, transparent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: clamp(1rem, 2vw, 1.35rem);
}

.shopping-card { display: grid; gap: .95rem; }
.shopping-card__heading,
.shopping-card__footer,
.shopping-total-row,
.shopping-checkout-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
}

.shopping-card__heading > div,
.shopping-checkout-line > div { min-width: 0; }
.shopping-muted { display: block; color: var(--mud-palette-text-secondary); font-size: .83rem; overflow-wrap: anywhere; }
.shopping-card__editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px));
    align-items: start;
    gap: .85rem;
    max-width: 720px;
}
.shopping-field { width: 100%; }
.shopping-card__addons {
    display: grid;
    gap: .3rem;
    max-width: 720px;
    padding: .75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 42%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-background) 38%, var(--mud-palette-surface));
}
.shopping-card__addon-list { display: flex; flex-wrap: wrap; column-gap: 1.1rem; }
.shopping-card__footer {
    flex-wrap: wrap;
    margin-top: .2rem;
    padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 48%, transparent);
}
.shopping-card__status {
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    min-width: 0;
    min-height: 24px;
    gap: .45rem;
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
    overflow-wrap: anywhere;
}
.shopping-card__footer strong { font-size: 1.12rem; white-space: nowrap; }

.shop-delivery {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--mud-palette-background) 38%, var(--mud-palette-surface));
}
.shop-delivery__heading { display: flex; align-items: flex-start; gap: .65rem; }
.shop-delivery__heading > div { min-width: 0; }
.shop-delivery__heading h3 { margin: 0; font-size: .94rem; font-weight: 650; }
.shop-delivery__heading p {
    margin: .2rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    line-height: 1.4;
}
.shop-delivery .shopping-form-field { width: 100%; }

.shopping-totals { position: sticky; top: 4.5rem; display: grid; gap: .9rem; }
.shopping-total-row { color: var(--mud-palette-text-secondary); }
.shopping-total-row--grand {
    padding-top: .85rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 52%, transparent);
    color: var(--mud-palette-text-primary);
}
.shopping-total-row--grand strong { font-size: 1.25rem; }
.shopping-discount { display: grid; gap: .35rem; min-width: 0; }
.shopping-discount > label { font-size: .8rem; font-weight: 600; }
.shopping-discount__entry { display: flex; align-items: flex-start; gap: .4rem; min-width: 0; }
.shopping-discount__entry > :first-child { flex: 1 1 auto; min-width: 0; }
.shopping-discount__entry > .mud-button-root { flex: 0 0 auto; min-height: 40px; }
.shopping-discount__applied { display: flex; align-items: center; gap: .3rem; min-width: 0; color: var(--mud-palette-success); font-size: .78rem; }
.shopping-discount__applied span { min-width: 0; overflow-wrap: anywhere; }
.shopping-discount__applied strong { margin-left: auto; white-space: nowrap; }
.shopping-discount__error { color: var(--mud-palette-error); font-size: .76rem; line-height: 1.35; }

.shopping-empty {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: clamp(2rem, 7vw, 5rem);
    text-align: center;
}

.shopping-checkout-line { padding: .8rem 0; border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 42%, transparent); }
.shopping-checkout-line:first-of-type { border-top: 0; }
.shopping-checkout-line > div { display: grid; gap: .2rem; }
.shopping-checkout-line > strong { white-space: nowrap; }

.shopping-payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 720px; }
.shopping-method {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: .45rem;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.shopping-method:hover,
.shopping-method:focus-visible { background: var(--mud-palette-action-default-hover); }
.shopping-method:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.shopping-method.is-selected { border-color: var(--mud-palette-primary); background: var(--mud-palette-action-default-hover); }
.shopping-method__top { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: .5rem; }
.shopping-method__brand { display: flex; align-items: center; min-width: 0; gap: .55rem; font-size: .95rem; }
.shopping-method__brand strong { overflow-wrap: anywhere; }
.shopping-method__check { flex: 0 0 auto; color: var(--mud-palette-primary); opacity: 0; }
.shopping-method.is-selected .shopping-method__check { opacity: 1; }
.shopping-method__caption { color: var(--mud-palette-text-secondary); font-size: .76rem; }
.shopping-method__options { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.shopping-method__option {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .3rem .5rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 50%, transparent);
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
    line-height: 1.25;
}
.shopping-method__option .mud-icon-root { flex: 0 0 auto; }
.shopping-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; max-width: 720px; }
.shopping-payment-fields > :last-child { grid-column: 1 / -1; }
.shopping-buyer-details {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 48%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-background) 38%, var(--mud-palette-surface));
}

.shopping-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .64);
}
.shopping-modal {
    display: grid;
    justify-items: start;
    gap: 1rem;
    width: min(100%, 460px);
    padding: 1.5rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-16);
}
.shopping-modal__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.shopping-cart-anchor { display: inline-flex; align-items: center; flex: 0 0 auto; }
.shopping-cart-trigger {
    position: relative;
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}
.shopping-cart-trigger:hover,
.shopping-cart-trigger[aria-expanded="true"] { color: var(--mud-palette-text-primary); background: var(--mud-palette-action-default-hover); }
.shopping-cart-trigger:focus-visible,
.shopping-cart-popover__close:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.shopping-cart-trigger__count {
    position: absolute;
    top: 1px;
    right: 0;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    place-items: center;
    border-radius: 100px;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
}
.shopping-cart-popover {
    box-sizing: border-box;
    width: min(380px, calc(100vw - 28px));
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}
.shopping-cart-summary {
    display: grid;
    gap: .9rem;
    min-width: 0;
    padding: 1rem;
}
.shopping-cart-popover__header,
.shopping-cart-popover__item,
.shopping-cart-popover__total { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; min-width: 0; }
.shopping-cart-popover__header > div,
.shopping-cart-popover__item > div { display: grid; min-width: 0; gap: .15rem; }
.shopping-cart-popover__header strong { font-size: .98rem; }
.shopping-cart-popover__header span,
.shopping-cart-popover__item div span,
.shopping-cart-popover__more,
.shopping-cart-popover__message { color: var(--mud-palette-text-secondary); font-size: .78rem; }
.shopping-cart-popover__close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
}
.shopping-cart-popover__close:hover { background: var(--mud-palette-action-default-hover); }
.shopping-cart-popover__loading { display: grid; place-items: center; min-height: 84px; }
.shopping-cart-popover__items { display: grid; }
.shopping-cart-popover__item {
    padding: .6rem 0;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 45%, transparent);
    font-size: .82rem;
}
.shopping-cart-popover__item > span { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.shopping-cart-popover__item strong { overflow-wrap: anywhere; font-size: .82rem; }
.shopping-cart-popover__more,
.shopping-cart-popover__message { margin: 0; }
.shopping-cart-popover__total {
    align-items: center;
    padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    font-size: .86rem;
}
.shopping-cart-popover__total strong { font-size: 1rem; white-space: nowrap; }

@media (max-width: 800px) {
    .shopping-layout { grid-template-columns: minmax(0, 1fr); }
    .shopping-totals { position: static; }
}

@media (max-width: 520px) {
    .shopping-page { padding: 1.5rem 16px 3rem; }
    .shopping-page__header > .mud-button-root { width: 100%; }
    .shopping-payment-methods,
    .shopping-payment-fields { grid-template-columns: minmax(0, 1fr); }
    .shopping-payment-fields > :last-child { grid-column: auto; }
    .shopping-checkout-line { align-items: flex-start; }
    .shopping-cart-popover { width: calc(100vw - 16px); max-height: calc(100dvh - 64px); }
}