/* ==========================================================================
   Blessing Your Scalp — Shopping Cart Page
   ========================================================================== */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
.bys-cart-page {
    --rose:       #be6d76;
    --rose-deep:  #a85961;
    --rose-rgb:   190, 109, 118;
    --cream:      #fbf4f0;
    --blush:      #f5e6e0;
    --white:      #ffffff;
    --charcoal:   #35312f;
    --espresso:   #302c2a;
    --stone:      #8a8582;
    --divider:    #e3e3e3;
    --shadow-btn: 0 4px 15px rgba(190, 109, 118, 0.30);
    font-family: 'Jost', sans-serif;
    color: var(--charcoal);
    padding-bottom: 80px;
}

/* ─── Flash messages ─────────────────────────────────────────────────────── */
.bys-cart-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 24px;
    animation: bys-cart-fadein 0.22s ease;
}
.bys-cart-flash--success {
    background: rgba(34,197,94,0.08);
    color: #166534;
    border: 1px solid rgba(34,197,94,0.22);
}
.bys-cart-flash--error {
    background: rgba(190,109,118,0.08);
    color: #a85961;
    border: 1px solid rgba(190,109,118,0.22);
}
.bys-cart-flash--info {
    background: rgba(59,130,246,0.08);
    color: #1d4ed8;
    border: 1px solid rgba(59,130,246,0.18);
}
@keyframes bys-cart-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page header ────────────────────────────────────────────────────────── */
.bys-cart-header {
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 40px;
}
.bys-cart-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--charcoal);
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}
.bys-cart-title em {
    font-family: 'Parisienne', cursive;
    font-style: normal;
    color: var(--rose);
    font-size: 1.1em;
}

/* ─── Two-column layout ──────────────────────────────────────────────────── */
.bys-cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}
@media (max-width: 991px) {
    .bys-cart-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Cart items column ──────────────────────────────────────────────────── */
.bys-cart-items__head {
    display: grid;
    grid-template-columns: 96px 1fr 80px 120px 80px 32px;
    gap: 20px;
    padding: 0 0 12px;
    border-bottom: 1.5px solid var(--divider);
    margin-bottom: 4px;
}
.bys-cart-items__head-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stone);
}
.bys-cart-items__head-label--price  { text-align: right; }
.bys-cart-items__head-label--qty    { text-align: center; }
.bys-cart-items__head-label--sub    { text-align: right; }

@media (max-width: 640px) {
    .bys-cart-items__head { display: none; }
}

/* ─── Single cart item ───────────────────────────────────────────────────── */
.bys-cart-item {
    display: grid;
    grid-template-columns: 96px 1fr 80px 120px 80px 32px;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--divider);
}
@media (max-width: 640px) {
    .bys-cart-item {
        grid-template-columns: 80px 1fr 32px;
        grid-template-rows: auto auto;
        gap: 12px 8px;
    }
}

/* Image */
.bys-cart-item__img-wrap {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cream);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .bys-cart-item__img-wrap { width: 80px; height: 80px; }
}
.bys-cart-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info */
.bys-cart-item__info { min-width: 0; }
.bys-cart-item__cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rose);
    margin: 0 0 4px;
}
.bys-cart-item__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 6px;
    line-height: 1.3;
}
.bys-cart-item__name a { color: inherit; text-decoration: none; transition: color 0.18s; }
.bys-cart-item__name a:hover { color: var(--rose); }
.bys-cart-item__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bys-cart-item__opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--stone);
    background: var(--cream);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

/* Unit price */
.bys-cart-item__price {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
}

/* Qty control.
   The wrapper stacks the stepper above its hint ("Only 3 left" / "Max
   available: 3"); the stepper itself is .bys-cart-qty. */
.bys-cart-item__qty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
}
.bys-cart-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--divider);
    border-radius: 7px;
    overflow: hidden;
    background: var(--white);
    transition: border-color 0.18s, box-shadow 0.18s;
}
/* The control itself carries the error state, so the problem is visible even
   before the message beneath it is read. */
.bys-cart-qty.is-invalid {
    border-color: #a3302b;
    box-shadow: 0 0 0 3px rgba(163, 48, 43, 0.12);
}
.bys-cart-qty__hint {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--stone);
    text-align: center;
    line-height: 1.3;
}
.bys-cart-qty__btn {
    width: 34px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    outline: none;
}
.bys-cart-qty__btn:hover:not([disabled]) { background: var(--blush); color: var(--rose); }
.bys-cart-qty__btn:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
/* Kept in the tab order and still announced: aria-disabled explains *why* it
   will not go higher, which simply removing the control would not. */
.bys-cart-qty__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.bys-cart-qty__input {
    flex: 1;
    height: 36px;
    border: none;
    border-left: 1.5px solid var(--divider);
    border-right: 1.5px solid var(--divider);
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    background: var(--white);
    outline: none;
    -moz-appearance: textfield;
    min-width: 0;
}
.bys-cart-qty__input::-webkit-inner-spin-button,
.bys-cart-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Subtotal */
.bys-cart-item__sub {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--charcoal);
}

/* Remove button */
.bys-cart-item__remove {
    /* Pinned explicitly: once the stock notice creates a second row, plain
       auto-placement pushed this control down to a row of its own. A row
       without a column would have landed it in column 1. */
    grid-column: 6;
    grid-row: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid var(--divider);
    border-radius: 50%;
    cursor: pointer;
    color: var(--stone);
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    outline: none;
    padding: 0;
    justify-self: center;
}
.bys-cart-item__remove:hover {
    border-color: var(--rose);
    color: var(--rose);
    background: rgba(var(--rose-rgb), 0.06);
}
.bys-cart-item__remove:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Mobile total row */
.bys-cart-item__mobile-row {
    display: none;
    grid-column: 1 / -1;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--stone);
}
@media (max-width: 640px) {
    .bys-cart-item__mobile-row { display: flex; }
    /* on mobile: img=col1 row1, info=col2 row1, remove=col3 row1, mobile-row spans all of row2 */
    .bys-cart-item__img-wrap   { grid-column: 1; grid-row: 1; }
    .bys-cart-item__info       { grid-column: 2; grid-row: 1; }
    .bys-cart-item__remove     { grid-column: 3; grid-row: 1; align-self: start; margin-top: 2px; }
    .bys-cart-item__price      { display: none; }
    .bys-cart-item__qty        { grid-column: 2; grid-row: 2; }
    .bys-cart-item__sub        { display: none; }
    .bys-cart-item__mobile-row { grid-column: 1 / -1; grid-row: 3; }
}

/* Stock notice, inline in the row it belongs to.
   Pinned to row 2 so the remove button stays on row 1 beside the item rather
   than being pushed to a row of its own beneath the message. */
.bys-cart-item__stock-warning {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #8a2b26;
    background: #fdf1f0;
    border: 1px solid #f0c4c1;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
}
.bys-cart-item__stock-warning svg { flex-shrink: 0; color: #a3302b; }
.bys-cart-item__stock-text {
    flex: 1 1 14rem;
    min-width: 0;
    line-height: 1.5;
}
/* The recovery action: one tap to the quantity that will actually go through,
   rather than leaving the shopper to work the number out. */
.bys-cart-item__stock-fix {
    flex: 0 0 auto;
    /* 40px so it stays a real target on a phone. */
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #a3302b;
    border-radius: 999px;
    background: transparent;
    color: #a3302b;
    font-family: 'Jost', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s;
}
.bys-cart-item__stock-fix:hover,
.bys-cart-item__stock-fix:focus-visible {
    background: #a3302b;
    color: #fff;
}
.bys-cart-item__stock-fix[disabled] { opacity: 0.6; cursor: progress; }

@media (max-width: 575px) {
    /* Full width on a narrow screen rather than a cramped chip. */
    .bys-cart-item__stock-fix { flex: 1 1 100%; }
    /* Bigger stepper targets where they are tapped rather than clicked. */
    .bys-cart-qty__btn { width: 42px; height: 42px; }
    .bys-cart-qty__input { height: 42px; font-size: 1rem; }
}

/* ─── Order summary sidebar ──────────────────────────────────────────────── */
.bys-order-summary {
    background: var(--cream);
    border-radius: 14px;
    padding: 28px 24px;
    position: sticky;
    top: 96px;
}
.bys-order-summary__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--charcoal);
    margin: 0 0 20px;
}

/* Summary rows */
.bys-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--divider);
    gap: 12px;
}
.bys-summary-row:last-of-type { border-bottom: none; }
.bys-summary-row__label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--stone);
}
.bys-summary-row__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    text-align: right;
}

/* Total row */
.bys-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 0;
    margin-top: 8px;
    border-top: 1.5px solid var(--charcoal);
}
.bys-summary-total__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal);
}
.bys-summary-total__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1;
}

/* Shipping options */
.bys-shipping-opts { margin: 20px 0; }
.bys-shipping-opts__title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--charcoal);
    margin-bottom: 12px;
}
.bys-shipping-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--divider);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    background: var(--white);
    transition: border-color 0.18s, background 0.18s;
    position: relative;
}
.bys-shipping-opt:last-child { margin-bottom: 0; }
.bys-shipping-opt.is-selected {
    border-color: var(--charcoal);
    background: var(--white);
}
.bys-shipping-opt.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.bys-shipping-opt__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--divider);
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s;
}
.bys-shipping-opt.is-selected .bys-shipping-opt__radio {
    border-color: var(--charcoal);
    background: var(--charcoal);
}
.bys-shipping-opt__radio::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    display: none;
}
.bys-shipping-opt.is-selected .bys-shipping-opt__radio::after { display: block; }

/* Hide native radio */
.bys-shipping-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bys-shipping-opt__body { flex: 1; min-width: 0; }
.bys-shipping-opt__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.bys-shipping-opt__cost {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--charcoal);
    white-space: nowrap;
}
.bys-shipping-opt__cost--free { color: #15803d; }
.bys-shipping-opt__note {
    font-size: 0.72rem;
    color: var(--stone);
    line-height: 1.4;
    margin-top: 2px;
}
.bys-shipping-dest {
    font-size: 0.75rem;
    color: var(--stone);
    margin-top: 10px;
}

/* Checkout button */
.bys-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-top: 20px;
}
.bys-cart-checkout-btn:hover {
    background: var(--rose-deep);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--rose-rgb), 0.38);
}

/* Keep shopping link */
.bys-cart-shop-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--stone);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.18s;
}
.bys-cart-shop-link:hover { color: var(--charcoal); }

/* Free shipping progress */
.bys-shipping-progress { margin: 16px 0; }
.bys-shipping-progress__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--stone);
    margin-bottom: 8px;
}
.bys-shipping-progress__label strong { color: var(--charcoal); }
.bys-shipping-progress__bar {
    height: 4px;
    background: var(--divider);
    border-radius: 2px;
    overflow: hidden;
}
.bys-shipping-progress__fill {
    height: 100%;
    background: var(--rose);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.bys-shipping-progress__fill--complete { background: #22c55e; }

/* ─── Empty state ────────────────────────────────────────────────────────── */
.bys-cart-empty {
    text-align: center;
    padding: 80px 20px;
}
.bys-cart-empty__icon {
    width: 72px;
    height: 72px;
    background: var(--blush);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--rose);
}
.bys-cart-empty__title {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--charcoal);
    margin: 0 0 12px;
}
.bys-cart-empty__text {
    font-size: 0.96rem;
    color: var(--stone);
    margin: 0 0 28px;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.bys-cart-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    background: var(--rose);
    color: white;
    border: none;
    border-radius: 30px;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.2s;
}
.bys-cart-empty__btn:hover { background: var(--rose-deep); color: white; }

/* ─── Trust strip ────────────────────────────────────────────────────────── */
.bys-cart-trust {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--divider);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}
.bys-cart-trust__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px;
    background: var(--cream);
    text-align: center;
    border-right: 1.5px solid var(--divider);
}
.bys-cart-trust__item:last-child { border-right: none; }
.bys-cart-trust__item svg { color: var(--rose); }
.bys-cart-trust__label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--charcoal);
    line-height: 1.3;
}

/* ─── Focus ──────────────────────────────────────────────────────────────── */
.bys-cart-page *:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
}

/* On the stacked mobile row the qty stepper already occupies row 2, so the
   notice takes the row after the price summary. Declared after the base rule
   above so it wins at equal specificity. */
@media (max-width: 640px) {
    .bys-cart-item__stock-warning { grid-row: 4; }
}

/* ==========================================================================
   Cart drawer — stock feedback
   --------------------------------------------------------------------------
   The drawer overlays the page, so a session flash rendered behind it. These
   report inside the panel, against the row that produced them.
   ========================================================================== */

.qty-control.is-invalid {
    border-radius: 6px;
    box-shadow: 0 0 0 2px #a3302b;
}

.qty-control__increase[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.cart-drawer-item__stock {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #f0c4c1;
    border-radius: 7px;
    background: #fdf1f0;
    color: #8a2b26;
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
}

.cart-drawer-item__stock svg {
    flex: 0 0 auto;
    color: #a3302b;
}

.cart-drawer-item__stock-text {
    flex: 1 1 10rem;
    min-width: 0;
}

.cart-drawer-item__stock-fix {
    flex: 0 0 auto;
    /* The drawer is narrow; full width keeps this a real target rather than a
       sliver squeezed beside wrapping text. */
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #a3302b;
    border-radius: 999px;
    background: transparent;
    color: #a3302b;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.cart-drawer-item__stock-fix:hover,
.cart-drawer-item__stock-fix:focus-visible {
    background: #a3302b;
    color: #fff;
}

.cart-drawer-item__stock-hint {
    margin: 6px 0 0;
    color: #6f6a67;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
}

/* The template pins every drawer row to a fixed 120px with overflow:hidden, so
   anything added below the quantity control was simply clipped away. Rows grow
   only when they actually carry a notice, leaving the normal row untouched. */
.cart-drawer-item:has(.cart-drawer-item__stock),
.cart-drawer-item:has(.cart-drawer-item__stock-hint) {
    height: auto;
    max-height: none;
    overflow: visible;
}