/* =============================================================================
   FABULOUS. — Cart styles
   Editorial, тиха палітра, Manrope для заголовків, Inter для UI.
   Усі шкали кольорів через --fab-* з main.css.
   ============================================================================= */


/* =============================================================================
   1. CART PAGE — повна сторінка /cart/
   ============================================================================= */

.fabulous-cart {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 56px 24px 96px;
    color: var(--fab-dark);
    font-family: var(--font-ui);
}

.fabulous-cart__hero {
    margin-bottom: 56px;
    border-bottom: 1px solid var(--fab-light-gray);
    padding-bottom: 32px;
}

.fabulous-cart__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.fabulous-cart__subtitle {
    font-size: 16px;
    color: var(--fab-gray);
    margin: 0;
    max-width: 520px;
    line-height: 1.5;
}

.fabulous-cart__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 900px) {
    .fabulous-cart__layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 64px;
        align-items: start;
    }
}


/* ========== Items list ========== */

.fabulous-cart__form {
    margin-top: 32px;
}

.fabulous-cart__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--fab-light-gray);
}

.fabulous-cart__item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--fab-light-gray);
    position: relative;
    transition: opacity var(--transition-base);
}

.fabulous-cart__item.is-removing { opacity: 0.4; pointer-events: none; }

.fabulous-cart__item.is-gift {
    background: linear-gradient(180deg, rgba(165, 24, 15, 0.025) 0%, transparent 100%);
}

.fabulous-cart__item-media {
    aspect-ratio: 4/5;
    background: var(--fab-paper);
    overflow: hidden;
}

.fabulous-cart__item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fabulous-cart__item-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.fabulous-cart__item-name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.fabulous-cart__item-name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

.fabulous-cart__item-name a:hover { color: var(--fab-accent); }

.fabulous-cart__item-meta {
    font-size: 13px;
    color: var(--fab-gray);
    margin-bottom: 8px;
}

.fabulous-cart__item-meta p { margin: 2px 0; }

.fabulous-cart__item-gift-note {
    font-size: 12px;
    color: var(--fab-accent);
    margin: 4px 0 0;
    letter-spacing: 0.02em;
}

.fabulous-cart__item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

.fabulous-cart__item-price {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 16px;
}

.fabulous-cart__free {
    color: var(--fab-accent);
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.fabulous-cart__remove {
    position: absolute;
    top: 24px;
    right: 0;
    background: transparent;
    border: 0;
    padding: 6px;
    color: var(--fab-gray);
    cursor: pointer;
    transition: color var(--transition-base);
    line-height: 0;
}

.fabulous-cart__remove:hover { color: var(--fab-accent); }


/* ========== Quantity stepper ========== */

.fabulous-cart__qty,
.fabulous-drawer__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fab-light-gray);
    border-radius: 999px;
    overflow: hidden;
    background: var(--fab-white);
}

.fabulous-cart__qty--locked,
.fabulous-drawer__qty--locked {
    border-style: dashed;
    color: var(--fab-gray);
    padding: 6px 14px;
    background: transparent;
}

.fabulous-cart__qty-btn,
.fabulous-drawer__qty-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--fab-dark);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--transition-base);
    line-height: 1;
}

.fabulous-cart__qty-btn:hover,
.fabulous-drawer__qty-btn:hover { background: var(--fab-paper); }

.fabulous-cart__qty-input,
.fabulous-drawer__qty-input {
    width: 32px;
    border: 0;
    text-align: center;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--fab-dark);
    -moz-appearance: textfield;
}

.fabulous-cart__qty-input::-webkit-outer-spin-button,
.fabulous-cart__qty-input::-webkit-inner-spin-button,
.fabulous-drawer__qty-input::-webkit-outer-spin-button,
.fabulous-drawer__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ========== Summary (sticky колонка) ========== */

.fabulous-cart__summary {
    position: sticky;
    top: 24px;
}

.fabulous-cart__summary-inner {
    background: var(--fab-paper);
    padding: 32px;
    border-radius: 4px;
}

.fabulous-cart__summary-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.fabulous-cart__totals {
    margin: 0 0 28px;
    padding: 0;
}

.fabulous-cart__totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(31, 31, 29, 0.06);
}

.fabulous-cart__totals-row dt {
    color: var(--fab-gray);
    margin: 0;
}

.fabulous-cart__totals-row dd { margin: 0; font-weight: 500; }

.fabulous-cart__totals-row--gift dt { color: var(--fab-accent); }

.fabulous-cart__totals-row--total {
    border-bottom: 0;
    padding-top: 18px;
    font-size: 16px;
}

.fabulous-cart__totals-row--total dt {
    color: var(--fab-dark);
    font-weight: 600;
}

.fabulous-cart__total-value {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
}

.fabulous-cart__checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--fab-dark);
    color: var(--fab-white);
    padding: 16px 24px;
    text-decoration: none;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--fab-dark);
    border-radius: 0;
    transition: background var(--transition-base), color var(--transition-base);
    cursor: pointer;
    box-sizing: border-box;
}

.fabulous-cart__checkout-btn:hover {
    background: transparent;
    color: var(--fab-dark);
}

.fabulous-cart__assurance {
    font-size: 12px;
    color: var(--fab-gray);
    margin: 16px 0 0;
    text-align: center;
    line-height: 1.6;
}

.fabulous-cart__continue {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--fab-gray);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition-base);
}

.fabulous-cart__continue:hover { color: var(--fab-accent); }


/* =============================================================================
   2. PROGRESS BAR (cart-page + drawer)
   ============================================================================= */

.cart-progress {
    background: var(--fab-paper);
    padding: 20px 24px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.cart-progress__message {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

.cart-progress__track {
    position: relative;
    height: 4px;
    background: var(--fab-light-gray);
    border-radius: 999px;
    margin: 18px 0 12px;
}

.cart-progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--fab-dark);
    border-radius: 999px;
    transition: width var(--transition-slow);
}

.cart-progress__marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    background: var(--fab-white);
    border: 2px solid var(--fab-dark);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fab-dark);
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.cart-progress__marker.is-unlocked {
    background: var(--fab-accent);
    border-color: var(--fab-accent);
    color: var(--fab-white);
    animation: cart-progress-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-progress__marker--gift.is-unlocked .cart-progress__mark {
    color: var(--fab-white);
}

@keyframes cart-progress-pop {
    0%   { transform: translate(-50%, -50%) scale(1); }
    50%  { transform: translate(-50%, -50%) scale(1.4); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.cart-progress__legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--fab-gray);
    letter-spacing: 0.04em;
}

.cart-progress__legend-item.is-unlocked { color: var(--fab-accent); font-weight: 600; }

.cart-progress__disclaimer {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--fab-gray);
    letter-spacing: 0.04em;
}


/* =============================================================================
   3. LETTER FROM FABULOUS.
   ============================================================================= */

.cart-letter {
    background: linear-gradient(180deg, var(--fab-paper) 0%, transparent 100%);
    padding: 32px 32px 28px;
    margin: 32px 0;
    border-left: 1px solid var(--fab-accent);
    position: relative;
}

.cart-letter__mark {
    color: var(--fab-accent);
    margin-bottom: 12px;
    line-height: 0;
}

.cart-letter__text {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--fab-dark);
    margin: 0 0 12px;
    max-width: 520px;
    letter-spacing: -0.005em;
}

.cart-letter__signature {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fab-gray);
    text-transform: uppercase;
}



/* =============================================================================
   4. CROSS-SELL «ДОПОВНИ РИТУАЛ»
   ============================================================================= */

.cart-crosssell { margin: 48px 0 0; }

.cart-crosssell__header { margin-bottom: 24px; }

.cart-crosssell__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.cart-crosssell__hint {
    font-size: 14px;
    color: var(--fab-gray);
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

.cart-crosssell__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .cart-crosssell__list { grid-template-columns: repeat(3, 1fr); }
}

.cart-crosssell__item {
    display: flex;
    flex-direction: column;
    background: var(--fab-paper);
    transition: transform var(--transition-base);
}

.cart-crosssell__item:hover { transform: translateY(-2px); }

.cart-crosssell__media {
    aspect-ratio: 4/5;
    background: var(--fab-light-gray);
    overflow: hidden;
    display: block;
}

.cart-crosssell__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--transition-slow);
}

.cart-crosssell__item:hover .cart-crosssell__media img { transform: scale(1.04); }

.cart-crosssell__body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cart-crosssell__name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 15px;
    color: var(--fab-dark);
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}

.cart-crosssell__name:hover { color: var(--fab-accent); }

.cart-crosssell__format {
    display: block;
    font-size: 11px;
    color: var(--fab-gray);
    letter-spacing: 0.06em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.cart-crosssell__short {
    font-size: 12px;
    color: var(--fab-gray);
    margin: 0 0 12px;
    line-height: 1.5;
    flex: 1;
}

.cart-crosssell__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 12px;
}

.cart-crosssell__price {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
}

.cart-crosssell__add {
    background: transparent;
    border: 1px solid var(--fab-dark);
    color: var(--fab-dark);
    padding: 8px 14px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 999px;
    transition: background var(--transition-base), color var(--transition-base);
    text-decoration: none;
}

.cart-crosssell__add:hover {
    background: var(--fab-dark);
    color: var(--fab-white);
}

.cart-crosssell__add.is-added {
    background: var(--fab-accent);
    color: var(--fab-white);
    border-color: var(--fab-accent);
}


/* Compact версія для drawer */
.cart-crosssell--compact { margin: 24px -20px 0; padding: 24px 20px 0; border-top: 1px solid var(--fab-light-gray); }
.cart-crosssell--compact .cart-crosssell__title { font-size: 14px; letter-spacing: 0.08em; }
.cart-crosssell--compact .cart-crosssell__list { grid-template-columns: 1fr 1fr; gap: 12px; }
.cart-crosssell--compact .cart-crosssell__body { padding: 10px 12px 12px; }
.cart-crosssell--compact .cart-crosssell__name { font-size: 12px; }
.cart-crosssell--compact .cart-crosssell__short { display: none; }
.cart-crosssell--compact .cart-crosssell__price { font-size: 12px; }
.cart-crosssell--compact .cart-crosssell__add { padding: 6px 10px; font-size: 11px; }


/* =============================================================================
   5. EMPTY STATE
   ============================================================================= */

.fabulous-cart-empty {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 80px 24px 96px;
    color: var(--fab-dark);
    font-family: var(--font-ui);
}

.fabulous-cart-empty__hero {
    text-align: center;
    margin-bottom: 80px;
}

.fabulous-cart-empty__mark {
    color: var(--fab-accent);
    margin-bottom: 24px;
    opacity: 0.3;
}

.fabulous-cart-empty__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    letter-spacing: 0.01em;
    margin: 0 0 14px;
    text-transform: uppercase;
    line-height: 1.05;
}

.fabulous-cart-empty__subtitle {
    font-size: 17px;
    color: var(--fab-gray);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
}

.fabulous-cart-empty__section-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fab-gray);
    margin: 0 0 24px;
}

.fabulous-cart-empty__categories { margin-bottom: 80px; }

.fabulous-cart-empty__cat-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 600px) { .fabulous-cart-empty__cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .fabulous-cart-empty__cat-grid { grid-template-columns: repeat(4, 1fr); } }

.fabulous-cart-empty__cat {
    display: flex;
    transition: transform var(--transition-base);
}

.fabulous-cart-empty__cat:hover {
    transform: translateY(-2px);
}

/* Брендовий градієнт настрою (повтор home-category--*): від паперу до теплої глини */
.fabulous-cart-empty__cat--face    { background-color: var(--fab-paper); }
.fabulous-cart-empty__cat--hair    { background-color: #f2f1ee; }
.fabulous-cart-empty__cat--body    { background-color: #edeae4; }
.fabulous-cart-empty__cat--rituals { background-color: #e8e3da; }

.fabulous-cart-empty__cat-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 240px;
    padding: 32px 28px;
    text-decoration: none;
    color: var(--fab-dark);
    transition: color var(--transition-base);
}

.fabulous-cart-empty__cat-link:hover .fabulous-cart-empty__cat-name {
    color: var(--fab-accent);
}

.fabulous-cart-empty__cat-name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    transition: color var(--transition-base);
}

.fabulous-cart-empty__cat-desc {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--fab-gray);
    line-height: 1.55;
    margin-top: auto;
}

.fabulous-cart-empty__best-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (min-width: 720px) { .fabulous-cart-empty__best-grid { grid-template-columns: repeat(4, 1fr); } }

.fabulous-cart-empty__best-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--fab-dark);
    transition: transform var(--transition-base);
}

.fabulous-cart-empty__best-link:hover { transform: translateY(-2px); }

.fabulous-cart-empty__best-link img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    background: var(--fab-paper);
    margin-bottom: 12px;
}

.fabulous-cart-empty__best-name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
    letter-spacing: -0.005em;
}

.fabulous-cart-empty__best-price {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    color: var(--fab-gray);
}


/* =============================================================================
   6. DRAWER
   ============================================================================= */

.fabulous-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 31, 29, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: 998;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.fabulous-drawer-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.fabulous-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    background: var(--fab-white);
    z-index: 999;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-shadow: -16px 0 40px rgba(31, 31, 29, 0.1);
}

.fabulous-drawer.is-empty {
    grid-template-rows: auto minmax(0, 1fr);
}

.fabulous-drawer.is-empty .fabulous-drawer__foot { display: none; }

.fabulous-drawer[hidden] { display: none; }
.fabulous-drawer.is-open {
    transform: translateX(0);
}

.fabulous-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--fab-light-gray);
    flex-shrink: 0;
}

.fabulous-drawer__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.fabulous-drawer__close {
    background: transparent;
    border: 0;
    padding: 6px;
    color: var(--fab-dark);
    cursor: pointer;
    line-height: 0;
    transition: color var(--transition-base);
}

.fabulous-drawer__close:hover { color: var(--fab-accent); }

.fabulous-drawer__inner {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}


/* Drawer empty */

.fabulous-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 40px 20px;
}

.fabulous-drawer__empty-mark { color: var(--fab-accent); opacity: 0.3; margin-bottom: 16px; }

.fabulous-drawer__empty-title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.fabulous-drawer__empty-text {
    font-size: 14px;
    color: var(--fab-gray);
    margin: 0 0 24px;
    line-height: 1.5;
}

.fabulous-drawer__empty-cta {
    background: var(--fab-dark);
    color: var(--fab-white);
    padding: 14px 28px;
    text-decoration: none;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
    border: 1px solid var(--fab-dark);
    border-radius: 0;
    transition: background var(--transition-base), color var(--transition-base);
}

.fabulous-drawer__empty-cta:hover {
    background: transparent;
    color: var(--fab-dark);
}


/* Drawer items */

.fabulous-drawer__progress-wrap { margin-bottom: 20px; }

.fabulous-drawer__items {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.fabulous-drawer__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fab-light-gray);
    position: relative;
    transition: opacity var(--transition-base);
}

.fabulous-drawer__item.is-removing { opacity: 0.4; pointer-events: none; }

.fabulous-drawer__item.is-gift {
    background: linear-gradient(180deg, rgba(165, 24, 15, 0.04) 0%, transparent 100%);
    margin: 0 -8px;
    padding: 16px 8px;
    border-radius: 4px;
}

.fabulous-drawer__item-media {
    aspect-ratio: 4/5;
    background: var(--fab-paper);
    overflow: hidden;
}

.fabulous-drawer__item-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.fabulous-drawer__item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fabulous-drawer__item-name {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}

.fabulous-drawer__item-name a {
    color: inherit;
    text-decoration: none;
}

.fabulous-drawer__item-meta {
    font-size: 11px;
    color: var(--fab-gray);
    margin-bottom: 4px;
}

.fabulous-drawer__item-meta p { margin: 1px 0; }

.fabulous-drawer__item-gift-tag {
    display: inline-block;
    font-size: 10px;
    color: var(--fab-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-bottom: 4px;
}

.fabulous-drawer__item-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
}

.fabulous-drawer__qty-btn { width: 26px; height: 26px; font-size: 14px; }
.fabulous-drawer__qty-input { width: 28px; font-size: 12px; }

.fabulous-drawer__item-price {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
}

.fabulous-drawer__free {
    color: var(--fab-accent);
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.fabulous-drawer__remove {
    position: absolute;
    top: 16px;
    right: 0;
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--fab-gray);
    cursor: pointer;
    transition: color var(--transition-base);
    line-height: 0;
}

.fabulous-drawer__remove:hover { color: var(--fab-accent); }


/* Drawer foot — fixed внизу drawer-у через flex (не sticky) */

.fabulous-drawer__foot {
    flex-shrink: 0;
    border-top: 1px solid var(--fab-light-gray);
    padding: 20px;
    background: var(--fab-white);
}

.fabulous-drawer__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

/* Звичайні рядки (Знижка, інші fees) — тонкі, не кричать */
.fabulous-drawer__total-label {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--fab-gray);
}
.fabulous-drawer__total-value {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    color: var(--fab-dark);
}

/* Тільки «Разом» виділений — акцент і трохи більший */
.fabulous-drawer__total-row--total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--fab-light-gray);
    margin-bottom: 18px;
}
.fabulous-drawer__total-row--total .fabulous-drawer__total-label {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fab-dark);
}
.fabulous-drawer__total-row--total .fabulous-drawer__total-value {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 18px;
    color: var(--fab-dark);
}

.fabulous-drawer__checkout {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--fab-dark);
    color: var(--fab-white);
    padding: 16px 24px;
    text-decoration: none;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--fab-dark);
    border-radius: 0;
    transition: background var(--transition-base), color var(--transition-base);
    box-sizing: border-box;
    margin-bottom: 8px;
}

.fabulous-drawer__checkout:hover {
    background: transparent;
    color: var(--fab-dark);
}

.fabulous-drawer__view-cart {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--fab-dark);
    background: transparent;
    border: 1px solid var(--fab-dark);
    padding: 14px 24px;
    text-decoration: none;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all var(--transition-base);
    box-sizing: border-box;
    margin-top: 10px;
}

.fabulous-drawer__view-cart:hover {
    background: var(--fab-dark);
    color: var(--fab-white);
}


/* =============================================================================
   7. BODY-LOCK при відкритому drawer / mobile responsive helpers
   ============================================================================= */

body.fabulous-drawer-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .fabulous-cart { padding: 32px 16px 64px; }
    .fabulous-cart__hero { margin-bottom: 32px; padding-bottom: 20px; }
    .fabulous-cart__layout { gap: 32px; }
    .fabulous-cart__item { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
    .fabulous-cart__remove { top: 16px; }
    .fabulous-cart__summary-inner { padding: 24px; }
    .fabulous-cart-empty { padding: 56px 16px 64px; }
    .fabulous-cart-empty__hero { margin-bottom: 56px; }
}