/* ==========================================================
   CART PAGE – matches style.css design system
   Navy · Orange · Outfit + Barlow Condensed
   ========================================================== */

/* ── PAGE WRAPPER ───────────────────────────────────────── */
.cart-page-wrapper {
    width: 90%;
    height: auto;
    min-height: calc(100vh - 180px);
    max-width: var(--content-max);
    margin: 28px auto 60px;
}

/* ── PAGE HEADER ────────────────────────────────────────── */
.cart-page-header {
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cart-page-header h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--blue);
    letter-spacing: .3px;
    margin: 0;
    position: relative;
    padding-left: 16px;
}

.cart-page-header h1::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 22px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--orange), var(--blue-mid));
}

.cart-item-count {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-100);
    border: 1px solid var(--border);
    padding: 5px 14px;
    border-radius: var(--r-full);
}

/* ── MAIN LAYOUT ────────────────────────────────────────── */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* ── CART ITEMS PANEL ───────────────────────────────────── */
.cart-items-panel {
    background: rgba(255,255,255,.92);
    border: 1px solid #d7e4f1;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.cart-items-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #f7fbff, #f3f8fd);
    display: grid;
    grid-template-columns: 80px 1fr 120px 100px 80px;
    gap: 12px;
    align-items: center;
}

.cart-items-header span {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.cart-items-header span:last-child { text-align: center; }
.cart-items-header span:nth-child(3),
.cart-items-header span:nth-child(4) { text-align: right; }

#cart-list { display: flex; flex-direction: column; }

/* ── SINGLE CART ITEM ───────────────────────────────────── */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr 120px 100px 80px;
    gap: 12px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s;
    animation: itemIn .22s ease both;
}

@keyframes itemIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: #fafcff; }

/* Thumbnail */
.cart-img {
    width: 72px;
    height: 72px;
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--gray-50);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.cart-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .25s;
}

.cart-img:hover img { transform: scale(1.08); }

/* Item info */
.cart-info { min-width: 0; }

.cart-info h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
}

.cart-info h3:hover { color: var(--blue-mid); }

.cart-variant-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--blue-mid);
    background: var(--blue-light);
    padding: 2px 8px;
    border-radius: var(--r-full);
}

/* Qty controls */
.cart-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    width: 110px;
    background: var(--white);
}

.cart-controls button {
    all: unset;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--gray-600);
    transition: background .15s, color .15s;
}

.cart-controls button:hover { background: var(--gray-100); color: var(--blue); }
.cart-controls button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.cart-controls .qty {
    width: 36px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

/* Price */
.cart-price-cell { text-align: right; }

.cart-unit-price {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue);
    display: block;
}

.cart-old-price {
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-400);
    text-decoration: line-through;
    display: block;
}

/* Subtotal */
.cart-subtotal-cell {
    text-align: right;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
}

/* Remove */
.cart-remove-cell { text-align: center; }

.remove {
    all: unset;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--gray-400);
    transition: background .15s, color .15s;
    margin: 0 auto;
}

.remove:hover {
    background: var(--red-light);
    color: var(--red);
}

.remove svg { pointer-events: none; }

/* Empty state */
.cart-empty {
    padding: 64px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cart-empty-icon {
    width: 64px; height: 64px;
    background: var(--blue-light);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--blue-mid);
    margin-bottom: 4px;
}

.cart-empty h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.cart-empty p {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.cart-empty a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    color: #fff;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow .18s, transform .1s;
    box-shadow: 0 6px 16px rgba(26,58,107,.22);
}

.cart-empty a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(26,58,107,.32);
}

/* ── SUMMARY PANEL ──────────────────────────────────────── */
.cart-summary {
    background: rgba(255,255,255,.92);
    border: 1px solid #d7e4f1;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: sticky;
    top: calc(82px + 16px);
}

.cart-summary-header {
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #f7fbff, #f3f8fd);
}

.cart-summary-header h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--blue);
    margin: 0;
    letter-spacing: .3px;
}

.cart-summary-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.cart-summary-label { color: var(--gray-600); font-weight: 500; }
.cart-summary-value { font-weight: 700; color: var(--gray-900); }

.cart-summary-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
}

.cart-summary-total .label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: .2px;
}

.cart-summary-total .amount {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--blue);
}

.cart-summary-footer { padding: 0 22px 22px; }

#buy-btn {
    width: 100%;
    padding: 0 18px;
    height: 52px;
    border: none;
    border-radius: var(--r-md);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    color: #fff;
    cursor: pointer;
    transition: box-shadow .18s, transform .1s, opacity .18s;
    box-shadow: 0 6px 16px rgba(26,58,107,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#buy-btn:hover:not(:disabled) {
    box-shadow: 0 10px 28px rgba(26,58,107,.32);
    transform: translateY(-1px);
}

#buy-btn:active:not(:disabled) { transform: scale(.98); }

#buy-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

#buy-btn svg { flex-shrink: 0; }

.cart-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 500;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .cart-page-wrapper {
        width: 100%;
        min-height: 0;
        margin: 16px auto 40px;
        padding-bottom: 12px;
    }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }

    .cart-items-header { display: none; }

    .cart-item {
        grid-template-columns: 72px 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 12px;
        padding: 14px 16px;
    }

    .cart-img { width: 64px; height: 64px; grid-row: 1 / 3; }
    .cart-info { grid-column: 2; grid-row: 1; }
    .cart-controls { grid-column: 2; grid-row: 2; }
    .cart-price-cell { grid-column: 3; grid-row: 1; text-align: right; }
    .cart-subtotal-cell { display: none; }
    .cart-remove-cell { grid-column: 3; grid-row: 2; }
}

@media (max-width: 500px) {
    .cart-page-wrapper { margin: 12px auto 32px; }
    .cart-page-header h1 { font-size: 1.6rem; }
}