/**
 * Cart Page Styles
 * Linen & Loom inspired redesign
 *
 * Premium editorial layout with generous spacing,
 * larger images, and clear visual hierarchy.
 */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* @keyframes spin - defined in base.css */

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */

.cart-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--gutter-fluid) var(--space-16);
}

/* Override theme.css .page-content > * constraint for cart page
   Must match specificity of theme.css rule (0-6-1) */
body.woocommerce-cart .page-content > .woocommerce:not(.never-match):not(.x):not(.y):not(.z) {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
}

/* Override theme.css .page-content a underline for cart page */
body.woocommerce-cart .page-content a:not(.btn),
body.woocommerce-cart .page-content a:not(.btn):hover {
    text-decoration: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.cart-header {
    margin-bottom: var(--space-10);
}

.cart-title {
    font-family: var(--font-serif);
    font-size: var(--text-fluid-3xl);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-tight);
    color: var(--on-surface);
    margin: 0 0 var(--space-2);
}

.cart-description {
    font-size: var(--text-base);
    color: var(--on-surface-variant);
    margin: 0;
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.cart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-4);
    text-align: center;
}

.cart-loading__spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
    margin-bottom: var(--space-4);
}

.cart-loading p {
    color: var(--on-surface-variant);
    margin: 0;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-4);
    border: 1px dashed var(--outline-variant);
    border-radius: var(--radius-sm);
    animation: fadeIn var(--duration-slow) ease-out;
}

.cart-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background: var(--surface-container);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
}

.cart-empty__bag {
    width: 3rem;
    height: 3rem;
    color: var(--outline);
}

.cart-empty__title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--font-normal);
    color: var(--on-surface);
    margin: 0 0 var(--space-2);
}

.cart-empty__text {
    font-size: var(--text-base);
    color: var(--on-surface-variant);
    max-width: 28rem;
    margin: 0 0 var(--space-8);
    line-height: var(--leading-relaxed);
}

.cart-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    text-decoration: none;
    border-radius: var(--radius-xs);
    transition: background-color var(--duration-fast) var(--easing-standard);
}

.cart-empty__cta:hover {
    background: var(--primary-hover);
}

.cart-empty__arrow {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   CART CONTENT GRID
   ========================================================================== */

.cart-content {
    display: grid;
    gap: var(--space-8);
    animation: fadeIn var(--duration-slow) ease-out;
}

@media (min-width: 64rem) {
    .cart-content {
        grid-template-columns: 1fr 24rem;
        gap: var(--space-12);
        align-items: start;
    }
}

@media (min-width: 80rem) {
    .cart-content {
        grid-template-columns: 1fr 26rem;
        gap: var(--space-16);
    }
}

/* ==========================================================================
   CART ITEMS COLUMN
   ========================================================================== */

.cart-items-col {
    min-width: 0; /* Prevent grid blowout */
}

.cart-items {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--outline-variant);
}

/* ==========================================================================
   CART ITEM
   ========================================================================== */

.cart-item {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--outline-variant);
    animation: fadeIn var(--duration-normal) ease-out;
}

@media (min-width: 40rem) {
    .cart-item {
        grid-template-columns: 8rem 1fr;
        gap: var(--space-6);
    }
}

.cart-item.is-updating {
    opacity: 0.5;
    pointer-events: none;
}

/* Item image */
.cart-item__image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--surface-container);
}

.cart-item__image-link {
    display: block;
}

.cart-item__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--easing-standard);
}

.cart-item__image-link:hover img {
    transform: scale(1.05);
}

/* Item info */
.cart-item__info {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent text overflow */
}

.cart-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.cart-item__name,
a.cart-item__name,
.cart-page a.cart-item__name {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--on-surface);
    text-decoration: none !important;
    line-height: var(--leading-snug);
    transition: color var(--duration-fast);
}

.cart-item__name:hover,
a.cart-item__name:hover,
.cart-page a.cart-item__name:hover {
    color: var(--primary);
    text-decoration: none !important;
}

/* Remove button */
.cart-item__remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: color var(--duration-fast);
}

.cart-item__remove:hover:not(:disabled) {
    color: var(--error);
}

.cart-item__remove:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cart-item__remove-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Meta (variations) */
.cart-item__meta {
    font-size: var(--text-sm);
    color: var(--on-surface-variant);
    margin: 0 0 auto;
    padding-bottom: var(--space-3);
}

/* Footer (qty + price) */
.cart-item__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-3);
}

/* Quantity controls */
.cart-item__qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xs);
}

.cart-item__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: var(--surface);
    border: none;
    color: var(--on-surface);
    cursor: pointer;
    transition: background-color var(--duration-fast);
}

.cart-item__qty-btn:hover:not(:disabled) {
    background: var(--surface-container);
}

.cart-item__qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-item__qty-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.cart-item__qty-value {
    min-width: 2.5rem;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--on-surface);
}

/* Price */
.cart-item__price {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--on-surface);
}

/* ==========================================================================
   CONTINUE SHOPPING
   ========================================================================== */

.cart-continue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding-bottom: 2px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--on-surface);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast);
}

.cart-continue:hover {
    border-bottom-color: var(--primary);
}

.cart-continue__icon {
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   ORDER SUMMARY
   ========================================================================== */

.cart-summary {
    padding: var(--space-6);
    background: var(--surface-container);
    border-radius: var(--radius-sm);
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

@media (min-width: 64rem) {
    .cart-summary {
        padding: var(--space-8);
    }
}

.cart-summary__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--on-surface);
    margin: 0 0 var(--space-6);
}

/* Summary lines */
.cart-summary__lines {
    margin: 0 0 var(--space-6);
}

.cart-summary__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
}

.cart-summary__line dt {
    font-size: var(--text-base);
    color: var(--on-surface-variant);
}

.cart-summary__line dd {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--on-surface);
    margin: 0;
}

.cart-summary__shipping {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    font-style: italic;
    color: var(--on-surface-variant);
}

/* Total */
.cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--outline-variant);
    margin-bottom: var(--space-6);
}

.cart-summary__total-label {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--on-surface);
}

.cart-summary__total-value {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--on-surface);
}

/* Checkout button */
.cart-summary__checkout,
a.cart-summary__checkout,
.cart-page a.cart-summary__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: var(--primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    text-decoration: none;
    border-radius: var(--radius-xs);
    transition: background-color var(--duration-fast) var(--easing-standard);
}

.cart-summary__checkout:hover {
    background: var(--primary-hover);
}

.cart-summary__checkout-arrow {
    width: 1rem;
    height: 1rem;
}

/* Express Checkout (Apple Pay, Google Pay, etc.) */
.cart-summary__express {
    margin-bottom: var(--space-3);
}

/* Hide if no actual buttons inside */
.cart-summary__express:not(:has(button)):not(:has(iframe)):not(:has(.wc-stripe-payment-request-container)) {
    display: none;
}

/* Style Stripe express buttons container */
.cart-summary__express .wc-stripe-payment-request-container,
.cart-summary__express #wc-stripe-payment-request-container {
    margin: 0;
}

.cart-summary__express .wc-stripe-payment-request-container button,
.cart-summary__express #wc-stripe-payment-request-wrapper button {
    width: 100%;
    border-radius: var(--radius-xs);
}

/* Separator between express and regular checkout - only when express has buttons */
.cart-summary__express:has(button) + .cart-summary__checkout,
.cart-summary__express:has(iframe) + .cart-summary__checkout {
    position: relative;
    margin-top: var(--space-4);
}

.cart-summary__express:has(button) + .cart-summary__checkout::before,
.cart-summary__express:has(iframe) + .cart-summary__checkout::before {
    content: 'or';
    position: absolute;
    top: calc(-1 * var(--space-4) / 2 - 0.5em);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-container);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ==========================================================================
   TRUST BADGES (Research: 2.73% conversion lift)
   ========================================================================== */

.cart-summary__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--outline-variant);
}

.cart-summary__trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
}

.cart-summary__trust-item svg {
    flex-shrink: 0;
    color: var(--primary);
}

/* ==========================================================================
   FREE SHIPPING PROGRESS (Top position per research - first thing users see)
   ========================================================================== */

.free-shipping-progress {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--surface-container);
    border-radius: var(--radius-sm);
}

.free-shipping-progress__bar {
    height: 8px;
    background: var(--surface);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.free-shipping-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--success, #16a34a) 100%);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--easing-standard);
}

.free-shipping-progress__message {
    font-size: var(--text-sm);
    color: var(--on-surface);
    text-align: center;
    margin: 0;
}

.free-shipping-progress__success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--success, #16a34a);
    font-weight: var(--font-medium);
}

.free-shipping-progress__icon {
    flex-shrink: 0;
    color: var(--success, #16a34a);
}

.free-shipping-progress__remaining strong {
    color: var(--on-surface);
}

/* Tiered shipping: standard achieved, working towards express */
.free-shipping-progress__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.free-shipping-progress__next {
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
}

.free-shipping-progress__next strong {
    color: var(--on-surface);
}