/* ═══════════════════════════════════════════
   Vivid Premium Cart – CSS v1.2
   ═══════════════════════════════════════════ */

:root {
    --vpc-bg: #f5f3ef;
    --vpc-card: #ffffff;
    --vpc-text: #1a1a1a;
    --vpc-text-2: #6b6b6b;
    --vpc-text-3: #a0a0a0;
    --vpc-accent: #c8956c;
    --vpc-accent-h: #b5825c;
    --vpc-accent-light: rgba(200,149,108,.08);
    --vpc-success: #2d8a4e;
    --vpc-danger: #d9534f;
    --vpc-border: rgba(0,0,0,.06);
    --vpc-shadow-s: 0 1px 4px rgba(0,0,0,.04);
    --vpc-shadow-m: 0 4px 20px rgba(0,0,0,.06);
    --vpc-radius: 16px;
    --vpc-radius-s: 10px;
    --vpc-radius-xs: 6px;
    --vpc-font-d: 'Outfit', sans-serif;
    --vpc-font-b: 'Inter', sans-serif;
    --vpc-ease: cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
#vpc-page-container { max-width: 100%; padding: 0; }
.vpc-cart-wrap {
    font-family: var(--vpc-font-b);
    color: var(--vpc-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 10px;
}
.vpc-cart-wrap *, .vpc-cart-wrap *::before, .vpc-cart-wrap *::after { box-sizing: border-box !important; }
.vpc-cart-wrap a { color: inherit; text-decoration: none !important; }
.vpc-cart-wrap img { max-width: 100%; height: auto; display: block; }

/* Reset button elements to prevent Motta theme overrides */
.vpc-cart-wrap button {
    all: unset !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    font-family: var(--vpc-font-b) !important;
}

/* ═══ HEADER ═══ */
.vpc-header { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--vpc-border); }
.vpc-back-btn { display: inline-flex !important; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--vpc-text-2) !important; transition: color .25s; background: none !important; }
.vpc-back-btn:hover { color: var(--vpc-accent) !important; }
.vpc-header__title { font-family: var(--vpc-font-d) !important; font-size: 28px; font-weight: 600; margin: 0 !important; color: var(--vpc-text) !important; }
.vpc-header__count { font-weight: 400; color: var(--vpc-text-3) !important; font-size: 22px; }
.vpc-header__steps { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--vpc-text-3) !important; }
.vpc-step--active { color: var(--vpc-accent) !important; }
.vpc-step-divider { width: 24px; height: 1px; background: var(--vpc-border); display: block !important; }

/* ═══ SHIPPING PROGRESS BAR ═══ */
.vpc-shipping-bar { background: var(--vpc-card) !important; border-radius: var(--vpc-radius); padding: 18px 24px; margin-bottom: 28px; box-shadow: var(--vpc-shadow-s); border: 1px solid var(--vpc-border); }
.vpc-shipping-bar__text { display: flex !important; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 12px; color: var(--vpc-text-2) !important; background: none !important; }
.vpc-shipping-bar__text strong { color: var(--vpc-text) !important; }
.vpc-shipping-bar__text--achieved { color: var(--vpc-success) !important; font-weight: 600; }
.vpc-shipping-bar__track { height: 6px; background: #eee !important; border-radius: 6px; overflow: hidden; }
.vpc-shipping-bar__fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--vpc-accent), #e8c49a) !important; transition: width .6s var(--vpc-ease); }

/* ═══ LAYOUT ═══ */
.vpc-layout { display: grid !important; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }

/* ═══ CART ITEMS ═══ */
.vpc-items-list { display: flex !important; flex-direction: column; gap: 16px; }
.vpc-item { display: flex !important; gap: 16px; background: var(--vpc-card) !important; border-radius: var(--vpc-radius); padding: 20px; box-shadow: var(--vpc-shadow-s); border: 1px solid var(--vpc-border); transition: transform .3s, box-shadow .3s, opacity .3s; }
.vpc-item:hover { box-shadow: var(--vpc-shadow-m); transform: translateY(-2px); }
.vpc-item--removing { opacity: 0 !important; transform: translateX(-40px) scale(.96) !important; pointer-events: none !important; }
.vpc-item.is-updating { opacity: .5 !important; pointer-events: none !important; }

.vpc-item__image { flex-shrink: 0; width: 110px; height: 130px; border-radius: var(--vpc-radius-s); overflow: hidden; background: #f5f5f5; }
.vpc-item__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.vpc-item__details { flex: 1; display: flex !important; flex-direction: column; justify-content: space-between; min-width: 0; }
.vpc-item__top { display: flex !important; justify-content: space-between; gap: 8px; }
.vpc-item__info { flex: 1; min-width: 0; }
.vpc-item__name { font-family: var(--vpc-font-d) !important; font-size: 16px !important; font-weight: 600 !important; margin: 0 0 6px !important; line-height: 1.3 !important; color: var(--vpc-text) !important; }
.vpc-item__name a { color: var(--vpc-text) !important; }
.vpc-item__name a:hover { color: var(--vpc-accent) !important; }
.vpc-item__variants { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.vpc-item__variant { font-size: 12px !important; color: var(--vpc-text-2) !important; background: var(--vpc-accent-light) !important; padding: 2px 10px !important; border-radius: 20px !important; display: inline-block !important; }
.vpc-item__price { font-size: 14px !important; color: var(--vpc-text-2) !important; }
.vpc-item__urgency { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vpc-danger) !important; font-weight: 600; margin-top: 6px; }
.vpc-urgency-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vpc-danger) !important; animation: vpc-pulse 1.2s infinite; display: inline-block !important; }
@keyframes vpc-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ── Remove button ── */
.vpc-item__remove {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 32px !important; height: 32px !important; min-width: 32px !important;
    background: transparent !important; border: none !important;
    color: var(--vpc-text-3) !important; padding: 0 !important;
    border-radius: 50% !important; transition: all .25s !important; flex-shrink: 0 !important;
}
.vpc-item__remove:hover { color: var(--vpc-danger) !important; background: rgba(217,83,79,.08) !important; }
.vpc-item__remove svg { width: 18px !important; height: 18px !important; pointer-events: none; }

/* ── Bottom row ── */
.vpc-item__bottom { display: flex !important; align-items: center; justify-content: space-between; margin-top: 12px; }
.vpc-item__subtotal { font-family: var(--vpc-font-d) !important; font-size: 17px !important; font-weight: 600 !important; color: var(--vpc-text) !important; }

/* ═══ QUANTITY SELECTOR ═══ */
.vpc-qty { display: inline-flex !important; align-items: center !important; border: 1.5px solid #ddd !important; border-radius: var(--vpc-radius-xs) !important; overflow: hidden !important; background: var(--vpc-card) !important; box-sizing: border-box !important; }
.vpc-qty__btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important;
    background: #f8f8f8 !important; border: none !important; box-shadow: none !important;
    color: var(--vpc-text-2) !important; padding: 0 !important; margin: 0 !important;
    transition: background .2s, color .2s !important; border-radius: 0 !important;
    box-sizing: border-box !important; line-height: 1 !important;
}
.vpc-qty__btn:hover { background: var(--vpc-accent-light) !important; color: var(--vpc-accent) !important; }
.vpc-qty__btn:active { transform: scale(.9); }
.vpc-qty__btn svg { width: 14px !important; height: 14px !important; pointer-events: none; display: block !important; }
.vpc-qty__input {
    width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 38px !important;
    text-align: center !important; border: none !important;
    border-left: 1px solid #ddd !important; border-right: 1px solid #ddd !important;
    border-radius: 0 !important; box-shadow: none !important;
    font-family: var(--vpc-font-d) !important; font-size: 14px !important; font-weight: 600 !important;
    background: #fff !important; -moz-appearance: textfield !important; outline: none !important;
    color: var(--vpc-text) !important; padding: 0 !important; margin: 0 !important;
    line-height: 38px !important; display: block !important; box-sizing: border-box !important;
}
.vpc-qty__input::-webkit-inner-spin-button, .vpc-qty__input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

/* ═══ CART NOTE ═══ */
.vpc-note-section { margin-top: 20px; }
.vpc-note-toggle {
    display: flex !important; align-items: center !important; gap: 8px;
    background: transparent !important; border: none !important;
    font-size: 14px !important; color: var(--vpc-text-2) !important; font-weight: 500 !important;
    padding: 12px 0 !important; font-family: var(--vpc-font-b) !important;
    transition: color .2s !important; width: 100% !important; text-align: left !important;
}
.vpc-note-toggle:hover { color: var(--vpc-accent) !important; }
.vpc-note-toggle svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
.vpc-note-chevron { margin-left: auto !important; transition: transform .3s !important; }
.vpc-note-toggle.is-open .vpc-note-chevron { transform: rotate(180deg) !important; }
.vpc-note-body { max-height: 0; overflow: hidden; transition: max-height .4s, opacity .3s; opacity: 0; }
.vpc-note-body.is-open { max-height: 200px; opacity: 1; }
.vpc-note-textarea {
    width: 100% !important; border: 1.5px solid #ddd !important; border-radius: var(--vpc-radius-s) !important;
    padding: 12px 16px !important; font-family: var(--vpc-font-b) !important; font-size: 14px !important;
    resize: vertical; outline: none !important; background: var(--vpc-card) !important;
    color: var(--vpc-text) !important; transition: border-color .2s !important;
}
.vpc-note-textarea:focus { border-color: var(--vpc-accent) !important; }
.vpc-note-save {
    display: inline-block !important; margin-top: 8px !important;
    padding: 10px 24px !important; background: var(--vpc-accent) !important;
    color: #fff !important; border: none !important; border-radius: var(--vpc-radius-xs) !important;
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: .3px !important;
    transition: background .2s !important;
}
.vpc-note-save:hover { background: var(--vpc-accent-h) !important; }

/* ═══ CROSS-SELLS ═══ */
.vpc-cross-sells { margin-top: 40px; }
.vpc-cross-sells__title { font-family: var(--vpc-font-d) !important; font-size: 20px; font-weight: 600; margin: 0 0 16px !important; color: var(--vpc-text) !important; }
.vpc-cross-sells__grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vpc-cs-card { background: var(--vpc-card); border-radius: var(--vpc-radius-s); overflow: hidden; box-shadow: var(--vpc-shadow-s); border: 1px solid var(--vpc-border); transition: transform .3s, box-shadow .3s; }
.vpc-cs-card:hover { transform: translateY(-4px); box-shadow: var(--vpc-shadow-m); }
.vpc-cs-card__img { aspect-ratio: 3/4; overflow: hidden; background: #f5f5f5; }
.vpc-cs-card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .4s; }
.vpc-cs-card:hover .vpc-cs-card__img img { transform: scale(1.05); }
.vpc-cs-card__info { padding: 12px 14px; }
.vpc-cs-card__name { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--vpc-text) !important; }
.vpc-cs-card__price { font-size: 14px; font-weight: 600; color: var(--vpc-accent) !important; }
.vpc-cs-card__price del { color: var(--vpc-text-3) !important; font-weight: 400; font-size: 12px; }
.vpc-cs-card__price ins { text-decoration: none !important; }

/* ═══ ORDER SUMMARY ═══ */
.vpc-summary-col { position: sticky; top: 100px; }
.vpc-summary { background: var(--vpc-card) !important; border-radius: var(--vpc-radius); padding: 28px; box-shadow: var(--vpc-shadow-m); border: 1px solid var(--vpc-border); overflow: hidden; }
.vpc-summary__title { font-family: var(--vpc-font-d) !important; font-size: 20px; font-weight: 600; margin: 0 0 20px !important; color: var(--vpc-text) !important; }
.vpc-summary__row { display: flex !important; justify-content: space-between; align-items: center; font-size: 14px !important; padding: 8px 0; color: var(--vpc-text-2) !important; }
.vpc-summary__row span { color: inherit !important; }
.vpc-summary__row--total { font-size: 18px !important; font-weight: 700 !important; color: var(--vpc-text) !important; font-family: var(--vpc-font-d) !important; padding: 16px 0 12px; }
.vpc-summary__row--total span { color: var(--vpc-text) !important; }
.vpc-summary__divider { height: 1px; background: var(--vpc-border); margin: 8px 0; }
.vpc-free { color: var(--vpc-success) !important; font-weight: 600 !important; }
.vpc-discount { color: var(--vpc-success) !important; font-weight: 600 !important; }

.vpc-coupon-badge { display: inline-block !important; padding: 2px 10px !important; background: var(--vpc-accent-light) !important; color: var(--vpc-accent) !important; border-radius: 4px !important; font-size: 12px !important; font-weight: 700 !important; }
.vpc-coupon-remove { display: inline-block !important; background: none !important; border: none !important; color: var(--vpc-text-3) !important; font-size: 16px !important; margin-left: 4px !important; padding: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important; }
.vpc-coupon-remove:hover { color: var(--vpc-danger) !important; }

/* ── Coupon Input ── */
.vpc-coupon { margin-top: 12px; }
.vpc-coupon__input-wrap { display: flex !important; gap: 0; border: 1.5px solid #ddd !important; border-radius: var(--vpc-radius-xs) !important; overflow: hidden !important; transition: border-color .2s; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.vpc-coupon__input-wrap:focus-within { border-color: var(--vpc-accent) !important; }
.vpc-coupon__input {
    flex: 1 !important; border: none !important; padding: 12px 14px !important;
    font-size: 13px !important; font-family: var(--vpc-font-b) !important; outline: none !important;
    background: transparent !important; color: var(--vpc-text) !important;
    min-width: 0 !important; width: 100% !important; max-width: none !important;
    box-shadow: none !important; border-radius: 0 !important; margin: 0 !important;
    height: auto !important; line-height: normal !important; box-sizing: border-box !important;
}
.vpc-cart-wrap .vpc-coupon__btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 12px 20px !important; background: var(--vpc-text) !important;
    color: #fff !important; border: none !important; font-size: 13px !important;
    font-weight: 600 !important; white-space: nowrap !important; flex-shrink: 0 !important;
    transition: background .2s !important; border-radius: 0 !important;
    min-width: 70px !important; width: auto !important; max-width: none !important;
    margin: 0 !important; box-shadow: none !important; position: static !important;
    height: auto !important; line-height: normal !important; box-sizing: border-box !important;
}
.vpc-coupon__btn:hover { background: var(--vpc-accent-h) !important; }
.vpc-coupon__btn.is-loading { opacity: .6 !important; }
.vpc-coupon__msg { font-size: 12px !important; margin-top: 6px; min-height: 18px; }
.vpc-coupon__msg--success { color: var(--vpc-success) !important; }
.vpc-coupon__msg--error { color: var(--vpc-danger) !important; }

/* ── Delivery ── */
.vpc-delivery { display: flex !important; align-items: center; gap: 8px; font-size: 13px !important; color: var(--vpc-text-2) !important; padding: 12px 0 16px; }
.vpc-delivery strong { color: var(--vpc-text) !important; }
.vpc-delivery svg { flex-shrink: 0; }

/* ═══ CHECKOUT BUTTON ═══ */
.vpc-checkout-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 10px !important; width: 100% !important; padding: 16px 20px !important;
    background: var(--vpc-accent) !important; color: #fff !important;
    border-radius: var(--vpc-radius-s) !important; border: none !important;
    font-family: var(--vpc-font-d) !important; font-size: 16px !important;
    font-weight: 600 !important; letter-spacing: .3px !important;
    transition: all .3s !important; text-decoration: none !important;
}
.vpc-checkout-btn:hover {
    background: var(--vpc-accent-h) !important; color: #fff !important;
    transform: translateY(-1px); box-shadow: 0 6px 24px rgba(200,149,108,.3);
}
.vpc-checkout-btn:active { transform: scale(.98) !important; }
.vpc-checkout-btn svg { flex-shrink: 0; width: 18px !important; height: 18px !important; }

/* ── Trust Badges ── */
.vpc-trust { display: flex !important; justify-content: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.vpc-trust__item { display: flex !important; align-items: center; gap: 6px; font-size: 12px !important; color: var(--vpc-text-3) !important; font-weight: 500; }
.vpc-trust__item svg { stroke: var(--vpc-accent); flex-shrink: 0; width: 18px; height: 18px; }

/* ═══ MOBILE STICKY BAR ═══ */
.vpc-mobile-bar { display: none !important; }

/* ═══ EMPTY CART ═══ */
.vpc-empty { text-align: center; padding: 80px 20px 60px; max-width: 600px; margin: 0 auto; }
.vpc-empty__icon { margin-bottom: 24px; color: var(--vpc-text-3); }
.vpc-empty__title { font-family: var(--vpc-font-d) !important; font-size: 32px; font-weight: 600; margin: 0 0 12px !important; color: var(--vpc-text) !important; }
.vpc-empty__text { color: var(--vpc-text-2) !important; font-size: 16px; margin: 0 0 32px !important; line-height: 1.6; }
.vpc-empty__cta {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 14px 36px !important; background: var(--vpc-accent) !important;
    color: #fff !important; border-radius: var(--vpc-radius-s) !important;
    font-family: var(--vpc-font-d) !important; font-size: 15px !important;
    font-weight: 600 !important; transition: all .3s !important;
}
.vpc-empty__cta:hover { background: var(--vpc-accent-h) !important; transform: translateY(-2px); box-shadow: var(--vpc-shadow-m); color: #fff !important; }
.vpc-empty__popular { margin-top: 64px; }
.vpc-empty__popular-title { font-family: var(--vpc-font-d) !important; font-size: 22px; font-weight: 600; margin: 0 0 20px !important; }
.vpc-empty__grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ═══ SKELETON ═══ */
.vpc-skeleton { position: relative; overflow: hidden; background: #eee; border-radius: 4px; }
.vpc-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: vpc-shimmer 1.5s infinite; }
@keyframes vpc-shimmer { 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

/* ═══ TOAST ═══ */
.vpc-toast { position: fixed; top: 24px; right: 24px; padding: 14px 22px; border-radius: var(--vpc-radius-s); font-size: 14px; font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,.12); z-index: 10000; transform: translateX(120%); transition: transform .4s var(--vpc-ease); font-family: var(--vpc-font-b); color: #fff; }
.vpc-toast.is-visible { transform: translateX(0); }
.vpc-toast--success { background: var(--vpc-success); }
.vpc-toast--error { background: var(--vpc-danger); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
    .vpc-layout { grid-template-columns: 1fr !important; }
    .vpc-summary-col { position: static !important; }
    .vpc-mobile-bar { display: block !important; position: fixed !important; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.95) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--vpc-border); padding: 12px 20px !important; z-index: 9999 !important; }
    .vpc-mobile-bar__info { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .vpc-mobile-bar__label { font-size: 13px !important; color: var(--vpc-text-2) !important; }
    .vpc-mobile-bar__total { font-family: var(--vpc-font-d) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--vpc-text) !important; }
    .vpc-mobile-bar__btn {
        display: block !important; width: 100% !important; text-align: center !important;
        padding: 14px !important; background: var(--vpc-accent) !important; color: #fff !important;
        border-radius: var(--vpc-radius-s) !important; font-family: var(--vpc-font-d) !important;
        font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important;
    }
    .vpc-mobile-bar__btn:hover { background: var(--vpc-accent-h) !important; color: #fff !important; }
    .vpc-header__steps { display: none !important; }
    .vpc-cross-sells__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .vpc-header__title { font-size: 22px !important; }
    .vpc-header__count { font-size: 18px !important; }
    .vpc-cart-wrap {
        padding: 16px 14px 10px;
    }
    .vpc-item { padding: 14px !important; gap: 12px !important; }
    .vpc-item__image { width: 85px !important; height: 100px !important; }
    .vpc-item__name { font-size: 14px !important; }
    .vpc-item__bottom { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .vpc-item__subtotal { align-self: flex-end !important; }
    .vpc-summary { padding: 20px !important; }
    .vpc-empty__grid { grid-template-columns: repeat(2, 1fr) !important; }
    .vpc-empty__title { font-size: 26px !important; }
    .vpc-trust { gap: 12px !important; }
    .vpc-trust__item { font-size: 11px !important; }
    .vpc-shipping-bar { padding: 14px 16px !important; }
}