/* ECOM-083 — native basket page, isolated from the shared stored-order summary. */
.basket-page {
    background: #f6f6f6;
    min-height: 60vh;
    padding: 2.5rem 0 4rem;
}

.basket-page__container {
    max-width: 1240px;
}

.basket-page__title {
    font-size: 1.125rem;
    font-weight: 800;
    margin: 0 0 1rem;
}

.basket-page__layout {
    align-items: start;
    display: grid;
    gap: 2rem;
}

.basket-page__main,
.basket-rail {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
}

.basket-page__main {
    min-width: 0;
    padding: 1.25rem;
}

.basket-page__empty {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    padding: 2rem;
}

.basket-page__feedback {
    background: #e8f4fd;
    border: 1px solid #bee5eb;
    border-radius: 0.25rem;
    color: #1a5276;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
}

.basket-page__feedback[hidden] {
    display: none;
}

.basket-freeship {
    margin: 0 0 1rem;
}

.basket-items {
    display: grid;
}

.basket-item {
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding: 1.25rem 0;
    position: relative;
}

.basket-item:last-child {
    border-bottom: 0;
}

.basket-item__image {
    align-items: center;
    background: #f8f8f8;
    display: flex;
    height: 72px;
    justify-content: center;
    width: 72px;
}

.basket-item__image img {
    height: 72px;
    object-fit: contain;
    width: 72px;
}

.basket-item__details {
    align-self: start;
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.basket-item__name {
    color: #212529;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
}

a.basket-item__name:hover,
a.basket-item__name:focus-visible {
    color: var(--brand-link);
    text-decoration: underline;
}

.basket-item__sku,
.basket-item__unit-price {
    color: #666;
    font-size: 0.8125rem;
}

/* Keep long names and build codes inside the column instead of over the
   quantity (2026-09-25). */
.basket-item__details {
    min-width: 0;
}

/* A configurator build: badge, a one-line summary, every choice on demand
   (2026-10-29). */
.basket-build__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    color: #666;
    font-size: 0.8125rem;
}

.basket-build__badge {
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--brand-link);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.basket-build__summary {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.basket-build__choices {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.basket-build__choices summary {
    color: var(--brand-link);
    cursor: pointer;
    font-weight: 600;
}

.basket-build__choices dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.15rem 1rem;
    margin: 0.5rem 0 0;
}

.basket-build__choices dt {
    color: #666;
    font-weight: 400;
}

.basket-build__choices dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.basket-build__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.basket-build__change {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--brand-link);
    font-size: 0.8125rem;
    font-weight: 600;
}

.basket-item__quantity,
.basket-item__unit-price,
.basket-item__total {
    display: grid;
    gap: 0.3rem;
}

.basket-item__quantity,
.basket-item__unit-price {
    grid-column: 2;
}

.basket-item__total {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-right: 2.75rem;
    text-align: right;
}

.basket-item__label {
    color: #6b6b75; /* 5.27:1 on the white card; #777 was 4.48:1, just under AA (WAVE, 2026-09-21) */
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.basket-stepper {
    align-items: center;
    background: #f7f7f7;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    display: inline-grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    max-width: 100%;
    width: 140px;
}

.basket-stepper__button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 1.25rem;
    font-weight: 500;
    height: 44px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
    width: 44px;
}

.basket-stepper__button:hover:not(:disabled) {
    background: #ededed;
    color: var(--brand-link);
}

.basket-stepper__button:active:not(:disabled) {
    background: #e3e3e3;
}

/* Override generic shop input sizing so multi-digit quantities stay centered
   within the shared control rather than overlapping either button. */
.shop-scope .basket-stepper .basket-stepper__input,
.basket-stepper .basket-stepper__input {
    appearance: textfield;
    -moz-appearance: textfield;
    background: #fff;
    border: 0;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    border-radius: 0;
    box-shadow: none;
    color: #212529;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    height: 44px;
    margin: 0;
    min-width: 0;
    padding: 0 2px;
    position: relative;
    text-align: center;
    width: 100%;
}

.basket-stepper .basket-stepper__input::-webkit-outer-spin-button,
.basket-stepper .basket-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.basket-stepper__button:focus-visible,
.basket-stepper__input:focus-visible,
.basket-item__remove:focus-visible {
    outline: 2px solid var(--brand-link);
    outline-offset: 2px;
    z-index: 1;
}

.basket-item__remove {
    align-items: center;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    color: #555;
    cursor: pointer;
    height: 44px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    width: 44px;
}

.basket-item__remove:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #f3baba;
    color: #b91c1c;
}

.basket-stepper__button:disabled,
.basket-stepper__input:disabled,
.basket-item__remove:disabled {
    cursor: wait;
    opacity: 0.5;
}

.basket-item__remove svg {
    display: block;
    height: 20px;
    width: 20px;
}

.basket-page__notice {
    border-top: 1px solid #e7e7e7;
    color: #666;
    font-size: 0.875rem;
    margin: 0;
    padding: 1rem 0 0;
}

.basket-rail {
    min-width: 0;
    padding: 1.25rem;
}

.basket-rail__heading {
    border-bottom: 1px solid #e4e4e4;
    font-size: 1.125rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    padding-bottom: 1rem;
}

.basket-rail__totals {
    margin: 0 0 1.25rem;
}

.basket-rail__row {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.375rem 0;
}

.basket-rail__row dt,
.basket-rail__row dd {
    margin: 0;
}

.basket-rail__row dt {
    font-weight: 500;
    min-width: 0;
}

.basket-rail__row dd {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.basket-rail__row--total {
    border-top: 1px solid #d8d8d8;
    align-items: baseline;
    font-size: 1.25rem;
    margin-top: 0.75rem;
    padding-top: 1rem;
}

.basket-rail__row--total dt,
.basket-rail__row--total dd {
    font-weight: 800;
}

/* Affirm's line under the total (docs/features/affirm.md); its monthly amount
   in the brand's accent text color (AA on white in every brand). */
.basket-rail__affirm {
    margin: 0.75rem 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.basket-rail__affirm .affirm-ala-price {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--brand-accent-text);
}

.basket-rail__method,
.basket-rail__pending {
    color: #666;
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 0.125rem;
    overflow-wrap: anywhere;
}

.basket-rail__pending {
    max-width: 10rem;
}

.shop-scope .basket-rail__checkout {
    align-items: center;
    background: var(--brand-primary-fill, var(--brand-primary));
    border-color: var(--brand-primary-fill, var(--brand-primary));
    color: var(--brand-on-primary, #fff);
    display: flex;
    font-weight: 750;
    justify-content: center;
    margin: 0;
    max-width: none;
    min-height: 3rem;
    width: 100%;
}

.shop-scope .basket-rail__checkout:hover,
.shop-scope .basket-rail__checkout:focus-visible {
    background: var(--brand-primary-fill-hover, var(--brand-primary-hover));
    border-color: var(--brand-primary-fill-hover, var(--brand-primary-hover));
    color: var(--brand-on-primary, #fff);
}

.basket-rail__continue {
    align-items: center;
    color: var(--brand-link);
    display: flex;
    font-size: 0.8125rem;
    justify-content: center;
    margin: 0.25rem 0 0.75rem;
    min-height: 2.75rem;
    text-align: center;
}

.basket-save {
    border-top: 1px solid #e4e4e4;
    font-size: 0.875rem;
    padding-top: 0.25rem;
}

.basket-save summary {
    align-items: center;
    color: #333;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    min-height: 2.75rem;
}

.basket-save summary::-webkit-details-marker {
    display: none;
}

.basket-save summary::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: '';
    flex-shrink: 0;
    height: 0.4375rem;
    margin-right: 0.25rem;
    transform: rotate(45deg);
    width: 0.4375rem;
}

.basket-save[open] summary::after {
    transform: rotate(225deg);
}

.basket-save summary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.basket-save__form {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.basket-save__form .btn {
    justify-self: start;
}

.basket-save__signin {
    margin: 0.75rem 0 0;
}

.basket-save__signin a {
    color: var(--brand-link);
}

.basket-cross-sell {
    margin-top: 2.5rem;
}

.basket-cross-sell__item {
    display: flex;
    flex-direction: column;
}

/* Doubled class on purpose: pdp-cross-sell.css loads AFTER this file and its
   fixed `.pdp-cross-sell .pdp-cross-sell__item { width: 190px }` ties a
   single-class selector, so it used to win — six 190px cards overran the
   container and clipped the last one behind a scrollbar. The basket sizes its
   cards as fractions of the rail instead, so six fit exactly from 1100px. */
.basket-cross-sell.pdp-cross-sell .pdp-cross-sell__item {
    width: calc((100% - var(--pdp-gap)) / 2);
}

.basket-cross-sell__footer {
    margin-top: auto;
    padding: 0 0.75rem 0.75rem;
}

/* ECOM-083 — `.shop-scope .btn` (shop.css) outranks a lone class and kept this
   button outlined; the scoped selectors below win without !important. */
.shop-scope .basket-cross-sell__footer .basket-cross-sell__add,
.basket-cross-sell__footer .basket-cross-sell__add {
    background: var(--brand-primary-fill);
    border-color: var(--brand-primary-fill);
    color: var(--brand-on-primary);
    display: flex;
    justify-content: center;
    min-height: 3rem;
    max-width: 100%;
    width: 100%;
}

.shop-scope .basket-cross-sell__footer .basket-cross-sell__add:hover,
.shop-scope .basket-cross-sell__footer .basket-cross-sell__add:focus-visible,
.basket-cross-sell__footer .basket-cross-sell__add:hover,
.basket-cross-sell__footer .basket-cross-sell__add:focus-visible {
    background: var(--brand-primary-fill-hover);
    border-color: var(--brand-primary-fill-hover);
    color: var(--brand-on-primary);
}

.shop-scope .basket-cross-sell__footer .basket-cross-sell__add[disabled],
.basket-cross-sell__footer .basket-cross-sell__add[disabled] {
    cursor: wait;
    opacity: 0.65;
}

@media (min-width: 720px) {
    .basket-cross-sell.pdp-cross-sell .pdp-cross-sell__item {
        width: calc((100% - (var(--pdp-gap) * 2)) / 3);
    }
}

@media (min-width: 1100px) {
    .basket-cross-sell.pdp-cross-sell .pdp-cross-sell__item {
        width: calc((100% - (var(--pdp-gap) * 5)) / 6);
    }
}

@media (min-width: 900px) {
    .basket-page__layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    }

    .basket-rail {
        position: sticky;
        top: 1.5rem;
    }
}

/* E2E 2026-10-12: the six-column row needs ~750px of basket column (columns +
   gaps + padding), which the two-column layout only leaves from ~1200px. From
   900px to 1199px the rows overflowed the card and the line total and remove
   button sat under the sticky summary rail. Below 1200px the rows keep the
   stacked layout the tablet widths use. */
@media (min-width: 1200px) {
    .basket-item {
        grid-template-columns: 72px minmax(180px, 1fr) 150px 90px 110px 44px;
    }

    .basket-item__quantity,
    .basket-item__unit-price,
    .basket-item__total {
        grid-column: auto;
        grid-row: auto;
    }

    .basket-item__total {
        padding-right: 0;
    }

    .basket-item__remove {
        position: static;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .basket-page {
        padding-top: 1.5rem;
    }

    .basket-page__main,
    .basket-rail {
        padding: 1rem;
    }

    .basket-item {
        align-items: start;
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .basket-item__image,
    .basket-item__image img {
        height: 64px;
        width: 64px;
    }

    .basket-item__quantity,
    .basket-item__unit-price,
    .basket-item__total {
        grid-column: 2;
        grid-row: auto;
        padding-right: 2.5rem;
        text-align: left;
    }
}

/* Phase 4b (2026-09-15): a mixed cart is grouped by brand on the basket page,
   each group headed by the brand's wordmark (black on transparent, like the
   strip). A single-brand basket renders no heading. */
.basket-items__brand {
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e3e3e3;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.basket-items__brand:first-child {
    margin-top: 0;
}

.basket-items__brand img {
    display: block;
    height: 2.25rem;
    width: auto;
}