/* Cart & Checkout - Modern Gallery Aesthetic */
.cart-page,.checkout-page{min-height:100vh;background:#fafafa}
.cart-header{background:#fafafa;padding:12px 16px;border-bottom:1px solid #e5e5e5}
.cart-header__inner{max-width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.cart-header__logo{color:#1a1a1a;text-decoration:none;font-family:'Playfair Display',serif;font-style:italic;display:flex;flex-direction:column;line-height:1}
.cart-header__logo-name{font-size:1.5rem;font-weight:600;display:block}
.cart-header__logo-tagline{font-family:'Inter',sans-serif;font-size:0.55rem;font-weight:500;font-style:normal;text-transform:uppercase;letter-spacing:0.2em;color:#6B7280;margin-top:2px}
.cart-header__secure{display:flex;align-items:center;gap:.5rem;color:#6B7280;font-size:.8rem}
.cart-container,.checkout-container{max-width:100%;margin:0 auto;padding:2rem}
.cart-title,.checkout-title{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:500;color:#1a1a1a;margin-bottom:.5rem}
.cart-subtitle,.checkout-subtitle{color:#6b7280;margin-bottom:2rem}
.cart-empty{text-align:center;padding:4rem 2rem;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.cart-empty__icon{font-size:4rem;margin-bottom:1.5rem;opacity:.3}
.cart-empty__title{font-family:'Playfair Display',serif;font-size:1.75rem;color:#1a1a1a;margin-bottom:.5rem}
.cart-empty__text{color:#6b7280;margin-bottom:2rem}
.cart-layout,.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}
@media(max-width:900px){.cart-layout,.checkout-layout{grid-template-columns:1fr}}
.checkout-layout{grid-template-columns:1fr 400px}
.cart-items,.checkout-form{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;border:1px solid #e5e5e5}
.cart-item{display:grid;grid-template-columns:120px 1fr auto;gap:1.5rem;padding:1.5rem;border-bottom:1px solid #e5e5e5;align-items:center}
.cart-item:last-child{border-bottom:none}
@media(max-width:600px){.cart-item{grid-template-columns:80px 1fr;gap:1rem}}
.cart-item__image{width:120px;height:90px;object-fit:cover;border-radius:4px;background:#f5f5f5}
@media(max-width:600px){.cart-item__image{width:80px;height:60px}}
.cart-item__title{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:500;color:#1a1a1a;margin-bottom:.25rem}
.cart-item__size{color:#6b7280;font-size:.9rem;margin-bottom:.25rem}
.cart-item__signed{color:#1a1a1a;font-size:.85rem;font-weight:500}
.cart-item__actions{text-align:right}
.cart-item__price{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem}
.cart-item__remove{background:none;border:none;color:#9ca3af;font-size:.85rem;cursor:pointer;padding:.25rem .5rem;transition:color .2s}
.cart-item__remove:hover{color:#1a1a1a}
@media(max-width:600px){.cart-item__actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:.5rem;border-top:1px solid #e5e5e5;margin-top:.5rem}}
.cart-summary,.order-summary{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);position:sticky;top:2rem;border:1px solid #e5e5e5}
.cart-summary{padding:1.5rem}
.cart-summary__title{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:500;color:#1a1a1a;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e5e5e5}
.cart-summary__row,.summary-row{display:flex;justify-content:space-between;margin-bottom:.75rem;font-size:.95rem}
.cart-summary__row--total,.summary-row--total{font-size:1.25rem;font-weight:600;color:#1a1a1a;padding-top:1rem;margin-top:1rem;border-top:2px solid #1a1a1a}
.cart-summary__label,.summary-row__label{color:#6b7280}
.cart-summary__value,.summary-row__value{color:#1a1a1a;font-weight:500}
.cart-summary__note,.summary-row__note{font-size:.8rem;color:#9ca3af;font-style:italic}
.cart-summary__actions,.order-summary__actions{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem;overflow:hidden}
.cart-summary__actions .btn,.order-summary__actions .btn{max-width:100%;box-sizing:border-box}
.order-summary__actions{padding:0 1.5rem 1.5rem;margin-top:0}
.order-summary__header{padding:1.25rem 1.5rem;background:#000;color:#fff}
.order-summary__title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:500;margin:0}
.order-summary__count{font-size:.85rem;color:#888;margin-top:.25rem}
.order-summary__items{padding:1rem 1.5rem;max-height:300px;overflow-y:auto;border-bottom:1px solid #e5e5e5}
.order-item{display:flex;gap:1rem;padding:.75rem 0;border-bottom:1px solid #f0f0f0}
.order-item:last-child{border-bottom:none}
.order-item__image{width:60px;height:45px;object-fit:cover;border-radius:4px;background:#f5f5f5}
.order-item__details{flex:1;min-width:0}
.order-item__title{font-size:.9rem;font-weight:500;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-item__size{font-size:.8rem;color:#6b7280}
.order-item__price{font-weight:600;color:#1a1a1a;white-space:nowrap}
.order-summary__totals{padding:1.25rem 1.5rem}
.checkout-section{padding:1.5rem;border-bottom:1px solid #e5e5e5}
.checkout-section:last-child{border-bottom:none}
.checkout-section__title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:500;color:#1a1a1a;margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem}
.checkout-section__number{width:28px;height:28px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-family:'Inter',sans-serif;font-weight:500}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-row--single{grid-template-columns:1fr}
.form-row--triple{grid-template-columns:1fr 100px 140px}
@media(max-width:600px){.form-row,.form-row--triple{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column}
.form-label{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#1a1a1a;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:0.5px}
.form-label--required::after{content:' *';color:#dc2626}
.form-input,.form-select{padding:.875rem 1rem;border:1px solid #000;border-radius:0;font-family:'Inter',sans-serif;font-size:1rem;transition:border-color .2s,box-shadow .2s;background:#fff}
.form-input:focus,.form-select:focus{outline:none;border-color:#1a1a1a;box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.form-input::placeholder{color:#6B7280;font-style:italic;font-family:'Inter',sans-serif}
.form-input--error{border-color:#dc2626}
.form-error{font-size:.8rem;color:#dc2626;margin-top:.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;border-radius:0;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s;text-decoration:none;border:none}
.btn--primary{background:#000;color:#fff;width:100%}
.btn--primary:hover{background:#333}
.btn--primary:disabled{background:#ccc;cursor:not-allowed}
.btn--secondary{background:#fff;color:#1a1a1a;border:1px solid #1a1a1a;width:100%}
.btn--secondary:hover{background:#f5f5f5}
.btn--link{background:none;color:#6b7280;padding:.5rem;font-size:.9rem}
.btn--link:hover{color:#1a1a1a}
.cart-icon{position:relative;display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;padding:.5rem}
.cart-icon:hover{color:#ccc}
.cart-badge{position:absolute;top:-4px;right:-4px;background:#000;color:#fff;font-size:.7rem;font-weight:600;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.checkout-success{text-align:center;padding:4rem 2rem;max-width:600px;margin:0 auto}
.checkout-success__icon{width:80px;height:80px;background:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem}
.checkout-success__icon svg{width:40px;height:40px;stroke:#fff}
.checkout-success__title{font-family:'Playfair Display',serif;font-size:2.5rem;color:#1a1a1a;margin-bottom:1rem}
.checkout-success__text{color:#6b7280;font-size:1.1rem;line-height:1.6;margin-bottom:2rem}
.checkout-success__actions{display:flex;gap:1rem;justify-content:center;align-items:stretch;margin-bottom:2rem}
.checkout-success__order-id{background:#f5f5f5;padding:1rem 1.5rem;border-radius:4px;display:flex;flex-direction:column;justify-content:center;min-height:60px}
.checkout-success__order-id span{color:#6b7280;font-size:.9rem}
.checkout-success__order-id strong{font-size:1.25rem;color:#1a1a1a;margin-top:.25rem}
.checkout-success__btn{display:flex;align-items:center;justify-content:center;min-height:60px;padding:1rem 2rem}
.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{padding:1rem 1.25rem;border-radius:4px;margin-bottom:1rem;font-size:.95rem}
.alert--info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.alert--warning{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.alert--error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.alert--success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.cart-notification{position:fixed;bottom:2rem;right:2rem;background:#000;color:#fff;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.2);display:flex;align-items:center;gap:1rem;transform:translateY(150%);transition:transform .3s ease;z-index:1000}
.cart-notification.active{transform:translateY(0)}
.cart-notification__icon{width:40px;height:40px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cart-notification__icon svg{stroke:#000}
.cart-notification__text{flex:1}
.cart-notification__title{font-weight:600;margin-bottom:.25rem}
.cart-notification__subtitle{font-size:.85rem;color:#888}
.cart-notification__actions{display:flex;gap:.5rem}
.cart-notification__btn{padding:.5rem 1rem;border-radius:4px;font-size:.85rem;cursor:pointer;border:none;transition:background .2s}
.cart-notification__btn--primary{background:#fff;color:#000}
.cart-notification__btn--primary:hover{background:#f0f0f0}
.cart-notification__btn--secondary{background:#333;color:#fff}
.cart-notification__btn--secondary:hover{background:#444}
.payment-placeholder{background:#f5f5f5;border:1px dashed #e5e5e5;border-radius:4px;padding:2rem;text-align:center}
.payment-placeholder__icon{font-size:2.5rem;margin-bottom:1rem;opacity:.5}
.payment-placeholder__title{font-family:'Playfair Display',serif;font-size:1.25rem;color:#1a1a1a;margin-bottom:.5rem}
.payment-placeholder__text{color:#6b7280;font-size:.9rem}
.payment-info{background:#f5f5f5;border-radius:4px;padding:1.5rem;text-align:center}
.payment-info__icon{color:#1a1a1a;margin-bottom:.75rem}
.payment-info__text{color:#6b7280;font-size:.95rem;margin-bottom:1rem}
.payment-info__cards{display:flex;justify-content:center;gap:.75rem;align-items:center}
.payment-info__cards img{height:24px;opacity:.7}

/* ============================================
   COMPREHENSIVE MOBILE/TABLET OPTIMIZATION
============================================ */

/* Tablet */
@media (max-width: 900px) {
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .cart-summary, .order-summary { position: static; }
}

/* Tablet - consistent input heights and header styling */
@media (min-width: 601px) and (max-width: 1024px) {
    .form-input, .form-select {
        height: 48px;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
    }
    /* Remove max-width constraint on header to match painting pages */
    .cart-header__inner {
        max-width: none;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .cart-header { padding: 12px 16px; }
    .cart-header__logo-name { font-size: 1.25rem; }
    .cart-header__logo-tagline { font-size: 0.5rem; }
    .cart-header__secure { font-size: 0.8rem; }
    .cart-container, .checkout-container { padding: 1rem; }
    .cart-title, .checkout-title { font-size: 1.75rem; }
    .cart-subtitle, .checkout-subtitle { font-size: 0.9rem; margin-bottom: 1.25rem; }
    .cart-item { grid-template-columns: 80px 1fr; gap: 0.75rem; padding: 1rem; }
    .cart-item__image { width: 80px; height: 60px; }
    .cart-item__title { font-size: 1rem; }
    .cart-item__size { font-size: 0.8rem; }
    .cart-item__price { font-size: 1.25rem; }
    .cart-item__actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; border-top: 1px solid #e5e5e5; margin-top: 0.5rem; }
    .cart-summary { padding: 1rem; }
    .cart-summary__title { font-size: 1.25rem; margin-bottom: 1rem; padding-bottom: 0.75rem; }
    .order-summary__header { padding: 1rem; }
    .order-summary__title { font-size: 1.15rem; }
    .order-summary__items { padding: 0.75rem 1rem; max-height: 200px; }
    .order-item { padding: 0.5rem 0; }
    .order-item__image { width: 50px; height: 38px; }
    .order-item__title { font-size: 0.85rem; }
    .order-item__size { font-size: 0.75rem; }
    .order-summary__totals { padding: 1rem; }
    .summary-row { font-size: 0.9rem; }
    .summary-row--total { font-size: 1.1rem; }
    .order-summary__actions { padding: 0 1rem 1rem; }
    .checkout-section { padding: 1rem; }
    .checkout-section__title { font-size: 1.15rem; margin-bottom: 1rem; }
    .checkout-section__number { width: 24px; height: 24px; font-size: 0.75rem; }
    .form-row, .form-row--triple { grid-template-columns: 1fr; gap: 0.75rem; }
    .form-label { font-size: 0.8rem; }
    .form-input, .form-select { padding: 0.75rem; font-size: 16px; }
    .btn { padding: 0.875rem 1.5rem; font-size: 0.95rem; min-height: 48px; }
    .checkout-success { padding: 2rem 1rem; }
    .checkout-success__icon { width: 60px; height: 60px; margin-bottom: 1.5rem; }
    .checkout-success__icon svg { width: 30px; height: 30px; }
    .checkout-success__title { font-size: 1.75rem; }
    .checkout-success__text { font-size: 1rem; }
    .checkout-success__actions { flex-direction: row; }
    .checkout-success__order-id { padding: 0.75rem 1rem; min-height: 50px; }
    .checkout-success__order-id strong { font-size: 1.1rem; }
    .checkout-success__btn { min-height: 50px; padding: 0.75rem 1.5rem; }
    .cart-notification { bottom: 1rem; right: 1rem; left: 1rem; padding: 0.875rem; flex-wrap: wrap; }
    .cart-notification__icon { width: 36px; height: 36px; }
    .cart-notification__title { font-size: 0.9rem; }
    .cart-notification__subtitle { font-size: 0.8rem; }
    .cart-notification__actions { width: 100%; margin-top: 0.75rem; }
    .cart-notification__btn { flex: 1; text-align: center; min-height: 44px; }
    .payment-info { padding: 1rem; }
    .payment-info__text { font-size: 0.9rem; }
    .payment-info__cards img { height: 20px; }
}

/* Small phones */
@media (max-width: 360px) {
    .cart-title, .checkout-title { font-size: 1.5rem; }
    .cart-item__title { font-size: 0.9rem; }
    .btn { padding: 0.75rem 1rem; font-size: 0.9rem; }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn:hover, .cart-item__remove:hover { transform: none; }
    .btn, .form-input, .form-select, .cart-item__remove { min-height: 44px; }
}

/* Delivery Method Display */
.cart-item__delivery {
    font-size: 0.875rem;
    color: #6B7280;
    margin-top: 0.25rem;
}

/* ============================================
   MOBILE NAVIGATION FOR CART/CHECKOUT
============================================ */

/* Mobile Menu Button */
.header__menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #fff;
    z-index: 1003;
}

.header__menu-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
}

.header__menu-btn.is-open .header__menu-icon {
    display: none;
}

.header__menu-btn .header__close-icon {
    display: none;
}

.header__menu-btn.is-open .header__close-icon {
    display: block;
}

/* Mobile Navigation Overlay */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fafafa;
    z-index: 1001;
    flex-direction: column;
    padding: 100px 24px 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fafafa;
}

.mobile-nav__links a {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: #1a1a1a;
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa;
}

.mobile-nav__links a:first-child {
    border-top: 1px solid #e5e5e5;
}

/* Mobile phones only (640px and below) - Show hamburger */
@media (max-width: 640px) {
    .cart-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1002 !important;
        background: #fafafa !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        padding: 12px 16px !important;
    }

    .cart-container, .checkout-container {
        padding-top: 70px !important;
    }

    .header__menu-btn {
        display: flex;
        align-items: center;
        color: #1a1a1a;
        order: 3;
    }

    .header__menu-btn svg {
        stroke: #1a1a1a;
    }

    .cart-header__logo {
        order: 1;
    }

    .cart-header__secure {
        order: 2;
        flex: 1;
        justify-content: center;
    }

    .mobile-nav {
        display: flex;
    }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    @media (max-width: 640px) {
        .cart-header {
            padding-left: max(16px, env(safe-area-inset-left)) !important;
            padding-right: max(16px, env(safe-area-inset-right)) !important;
        }

        .mobile-nav {
            padding-left: max(24px, env(safe-area-inset-left));
            padding-right: max(24px, env(safe-area-inset-right));
            padding-bottom: max(40px, env(safe-area-inset-bottom));
        }
    }
}