/* =========================================================
THE AROMAVERSE
CART.CSS
========================================================= */

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

.cart-page {

padding-top: 10rem;

position: relative;

}

.cart-page::before {

content: "";

position: absolute;

inset: 0;

background:

    radial-gradient(
        circle at top center,
        rgba(200,176,139,.08),
        transparent 45%
    );

pointer-events: none;

}

/* =========================================================
HERO
========================================================= */

.cart-hero {

text-align: center;

margin-bottom: 3rem;

}

.cart-eyebrow {

display: inline-block;

font-size: .72rem;

letter-spacing: .35em;

text-transform: uppercase;

color: var(--lux-gold);

margin-bottom: 1rem;

}

.cart-title {

margin-bottom: 1rem;

}

.cart-subtitle {

max-width: 650px;

margin-inline: auto;

color: var(--text-secondary);

}

/* =========================================================
SHIPPING PROGRESS
========================================================= */

.cart-progress {

margin-bottom: 3rem;

padding: 1.75rem;

border-radius: 24px;

background:

    rgba(255,255,255,.03);

border:

    1px solid rgba(255,255,255,.08);

backdrop-filter:

    blur(20px);

}

.cart-progress-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1rem;

font-size: .85rem;

}

.cart-progress-track {

height: 10px;

border-radius: 999px;

overflow: hidden;

background:

    rgba(255,255,255,.05);

}

.cart-progress-fill {

height: 100%;

border-radius: inherit;

background:

    linear-gradient(
        90deg,
        var(--lux-gold),
        #e1cfac
    );

}

.cart-progress-text {

margin-top: 1rem;

color: var(--text-secondary);

}


.cart-discount-progress{

    margin-top:1.5rem;

    padding:1.75rem;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(200,176,139,.05),
        rgba(255,255,255,.02)
    );

    border:
    1px solid rgba(200,176,139,.12);

}

.cart-discount-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1rem;

}

.cart-discount-header span:last-child{

    color:var(--lux-gold);

    font-weight:700;

    font-size:1.1rem;

}

.cart-discount-track{

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
    rgba(255,255,255,.06);

}

.cart-discount-fill{

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #d8c5a3,
        var(--lux-gold)
    );

    width:0;

    transition:1.2s ease;

}

.cart-discount-text{

    margin-top:1rem;

    color:var(--text-secondary);

}
/* =========================================================
LAYOUT
========================================================= */

.cart-layout {

display:grid;

grid-template-columns:

minmax(0,1fr)
420px
300px;

gap:2rem;

align-items:start;

}

/* =========================================================
PRODUCTS
========================================================= */

.cart-products {

display: flex;

flex-direction: column;

gap: 1.5rem;

}

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

.cart-item {

display: grid;

min-height: 0;

grid-template-columns:

    140px
    minmax(0,1fr);

gap: 1.5rem;

padding: 1.5rem;

border-radius: 28px;

background:

    linear-gradient(
        180deg,
        rgba(16,16,16,.92),
        rgba(8,8,8,.98)
    );

border:

    1px solid rgba(255,255,255,.08);

backdrop-filter:

    blur(24px);

transition:

    transform .32s ease,
    border-color .32s ease;

}

.cart-item:hover {

transform:

    translateY(-4px);

border-color:

    rgba(200,176,139,.22);

}

/* =========================================================
IMAGE
========================================================= */

.cart-item-image {

display:block;

width:140px;

height:140px;

flex-shrink:0;

overflow:hidden;

border-radius:22px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

}

.cart-item-image img {

width: 100%;

height: 100%;

object-fit: contain;

padding: 1rem;

transition:

    transform .4s ease;

}

.cart-item:hover img {

transform:

    scale(1.05);

}

/* =========================================================
CONTENT
========================================================= */

.cart-item-content {

display: flex;

flex-direction: column;

justify-content: space-between;

min-width: 0;

}

.cart-item-top {

display: flex;

justify-content: space-between;

gap: 1rem;

}

.cart-item-brand {

font-size: .72rem;

letter-spacing: .2em;

text-transform: uppercase;

color: var(--lux-gold);

margin-bottom: .5rem;

}

.cart-item-title {

font-size: 1.65rem;

line-height: 1;

margin-bottom: .65rem;

}

.cart-item-meta {

display: flex;

gap: .6rem;

flex-wrap: wrap;

color: var(--text-secondary);

font-size: .85rem;

}

.cart-item-price {

font-size: 1.1rem;

font-weight: 600;

color: var(--lux-cream);

white-space: nowrap;

}

/* =========================================================
BOTTOM
========================================================= */

.cart-item-bottom {

display: flex;

align-items: center;

justify-content: space-between;

gap: 1rem;

margin-top: 1.5rem;

}

/* =========================================================
QUANTITY
========================================================= */

.cart-quantity {

display: flex;

align-items: center;

border-radius: 999px;

overflow: hidden;

border:

    1px solid rgba(255,255,255,.1);

}

.qty-btn {

width: 44px;

height: 44px;

border: none;

background:

    rgba(255,255,255,.04);

cursor: pointer;

}

.cart-qty-input {

width: 60px;

text-align: center;

border: none;

background: transparent;

}

.cart-qty-input:focus {

outline: none;

}

.cart-item-subtotal {

font-size: 1.15rem;

font-weight: 600;

color: var(--lux-gold);

}

.cart-remove {

background: none;

border: none;

cursor: pointer;

color: var(--text-muted);

    font-size:.8rem;

    letter-spacing:.12em;

    text-transform:uppercase;

transition: .3s;

}

.cart-remove:hover {

color: #ff6a6a;

}

/* =========================================================
   SUMMARY SIDEBAR
========================================================= */

.cart-summary {

    position: relative;

    top: 120px;

}

.cart-summary-card {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    padding: 2rem;

    background:

        linear-gradient(
            180deg,
            rgba(15,15,15,.95),
            rgba(7,7,7,.98)
        );

    border:

        1px solid rgba(200,176,139,.18);

    backdrop-filter:

        blur(30px);

}

.cart-summary-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at top center,
            rgba(200,176,139,.08),
            transparent 45%
        );

    pointer-events: none;

}

.cart-summary-title {

    font-size: 2rem;

    margin-bottom: 1.75rem;

}

/* =========================================================
   SUMMARY ROWS
========================================================= */

.summary-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.summary-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    color: var(--text-secondary);

}

.summary-row span:last-child {

    color: var(--lux-cream);

}

.summary-row.discount span:last-child {

    color: #8fd89c;

}

.summary-divider {

    height: 1px;

    margin: 1.5rem 0;

    background:

        rgba(255,255,255,.08);

}

.summary-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

}

.summary-total-label {

    font-size: 1rem;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--text-secondary);

}

.summary-total-value {

    font-size: 2rem;

    font-weight: 600;

    color: var(--lux-gold);

}

/* =========================================================
   COUPON
========================================================= */

.cart-coupon {

    margin-bottom: 2rem;

}

.cart-coupon-label {

    display: block;

    margin-bottom: .75rem;

    font-size: .75rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--lux-gold);

}

.cart-coupon-form {

    display: flex;

    gap: .75rem;

}

.cart-coupon-input {

    flex: 1;

    height: 54px;

    padding: 0 1rem;

    border-radius: 999px;

    border:

        1px solid rgba(255,255,255,.08);

    background:

        rgba(255,255,255,.03);

}

.cart-coupon-input:focus {

    outline: none;

    border-color:

        rgba(200,176,139,.35);

}

.cart-coupon-btn {

    flex-shrink: 0;

    min-width: 110px;

}

/* =========================================================
   CHECKOUT BUTTON
========================================================= */

.cart-checkout {

    width: 100%;

    min-height: 62px;

    font-size: .9rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    margin-bottom: 1.5rem;

    position: relative;

    overflow: hidden;

}

.cart-checkout::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    transform:

        translateX(-100%);

}

.cart-checkout:hover::before {

    transition: .8s ease;

    transform:

        translateX(100%);

}

/* =========================================================
   SECURITY
========================================================= */

.cart-security {

    display: flex;

    flex-direction: column;

    gap: .85rem;

}

.cart-security-item {

    display: flex;

    align-items: center;

    gap: .85rem;

    color: var(--text-secondary);

    font-size: .9rem;

}

.cart-security-icon {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(200,176,139,.12);

    color: var(--lux-gold);

}

/* =========================================================
   TRUST CARDS
========================================================= */

.cart-trust-grid {

    margin-top: 1.5rem;

    display: grid;

    gap: 1rem;

}

.cart-trust-card {

    padding: .85rem;
    
    font-size:.8rem;

    border-radius: 22px;

    background:

        rgba(255,255,255,.03);

    border:

        1px solid rgba(255,255,255,.08);

    backdrop-filter:

        blur(16px);

}

.cart-trust-title {

    color: var(--lux-cream);

    font-weight: 600;

    margin-bottom: .35rem;

}

.cart-trust-text {

    color: var(--text-secondary);

    font-size: .9rem;

}


.cart-trust {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:.75rem;

}


/* =========================================================
   SAVINGS PANEL
========================================================= */

.cart-savings {

    margin-top: 1.5rem;

    padding: 1.25rem;

    border-radius: 24px;

    border:

        1px solid rgba(143,216,156,.25);

    background:

        rgba(143,216,156,.05);

}

.cart-savings-title {

    color: #8fd89c;

    margin-bottom: .5rem;

    font-weight: 600;

}

.cart-savings-value {

    font-size: 1.75rem;

    color: #8fd89c;

    font-weight: 700;

}

/* =========================================================
   FREQUENTLY BOUGHT TOGETHER
========================================================= */

.cart-upsell {

    margin-top: 4rem;

}

.cart-upsell-header {

    margin-bottom: 2rem;

}

.cart-upsell-title {

    font-size: clamp(2.25rem,4vw,3.5rem);

    margin-bottom: .75rem;

}

.cart-upsell-subtitle {

    color: var(--text-secondary);

    max-width: 52ch;

}

.cart-upsell-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap: 1.5rem;

}

.cart-upsell-card {

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background:

        linear-gradient(
            180deg,
            rgba(15,15,15,.94),
            rgba(8,8,8,.98)
        );

    border:

        1px solid rgba(255,255,255,.08);

    transition:

        transform .32s ease,
        border-color .32s ease;

}

.cart-upsell-card:hover {

    transform:

        translateY(-6px);

    border-color:

        rgba(200,176,139,.24);

}

.cart-upsell-image {

    aspect-ratio: 1;

    overflow: hidden;

    padding: 1.5rem;

}

.cart-upsell-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition:

        transform .45s ease;

}

.cart-upsell-card:hover img {

    transform:

        scale(1.06);

}

.cart-upsell-content {

    padding: 1.5rem;

}

.cart-upsell-brand {

    color: var(--lux-gold);

    font-size: .72rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    margin-bottom: .5rem;

}

.cart-upsell-name {

    font-size: 1.35rem;

    margin-bottom: .75rem;

}

.cart-upsell-price {

    color: var(--lux-cream);

    font-weight: 600;

    margin-bottom: 1rem;

}

.cart-upsell-add {

    width: 100%;

}

/* =========================================================
   DISCOUNT PROGRESS
========================================================= */

.cart-progress {

    margin-bottom: 2rem;

}

.cart-progress-label {

    display: flex;

    justify-content: space-between;

    margin-bottom: .75rem;

    color: var(--text-secondary);

    font-size: .85rem;

}

.cart-progress-track {

    height: 8px;

    border-radius: 999px;

    overflow: hidden;

    background:

        rgba(255,255,255,.06);

}

.cart-progress-fill {

    height: 100%;

    width: 0;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,
            var(--lux-gold),
            #d8c5a3
        );

}

/* =========================================================
   FREE SHIPPING BAR
========================================================= */

.cart-shipping-goal {

    margin-bottom: 2rem;

    padding: 1rem;

    border-radius: 18px;

    background:

        rgba(200,176,139,.06);

    border:

        1px solid rgba(200,176,139,.15);

}

.cart-shipping-title {

    color: var(--lux-cream);

    margin-bottom: .4rem;

}

.cart-shipping-text {

    color: var(--text-secondary);

    font-size: .9rem;

}

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

.cart-empty {

    text-align: center;

    max-width: 700px;

    margin: 0 auto;

    padding: 5rem 2rem;

}

.cart-empty-icon {

    width: 140px;

    height: 140px;

    margin: 0 auto 2rem;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

    background:

        radial-gradient(
            circle,
            rgba(200,176,139,.15),
            transparent
        );

}

.cart-empty-title {

    margin-bottom: 1rem;

}

.cart-empty-description {

    max-width: 45ch;

    margin: 0 auto 2rem;

}

/* =========================================================
   MOBILE STICKY CHECKOUT
========================================================= */

.mobile-cart-bar {

    display: none;

}

@media (max-width: 991px) {

    .mobile-cart-bar {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 1rem;

        position: fixed;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 200;

        padding:

            1rem;

        background:

            rgba(8,8,8,.94);

        backdrop-filter:

            blur(30px);

        border-top:

            1px solid rgba(255,255,255,.08);

    }

    .mobile-cart-total {

        display: flex;

        flex-direction: column;

    }

    .mobile-cart-label {

        font-size: .7rem;

        letter-spacing: .12em;

        text-transform: uppercase;

        color: var(--text-secondary);

    }

    .mobile-cart-value {

        font-size: 1.25rem;

        color: var(--lux-gold);

        font-weight: 700;

    }

    .mobile-cart-button {

        min-width: 170px;

    }

}

/* =========================================================
   MOBILE REFINEMENT
========================================================= */

@media (max-width: 991px) {

    .cart-layout {

        gap: 2rem;

    }

    .cart-item {

        padding: 1.25rem;

    }

    .cart-item-top {

        gap: 1rem;

    }

    .cart-item-image {

        width: 90px;

        height: 90px;

    }

    .cart-item-title {

        font-size: 1.25rem;

    }

    .cart-summary {

    position: relative;

    bottom: 1rem;

}

    .cart-summary-card {

        padding: 1.5rem;

    }

}

@media (max-width:768px){
	

    .cart-item{

        grid-template-columns:100px 1fr;

        gap:1rem;

        align-items:start;

    }

    .cart-item-image{

        width:100px;
        height:100px;

    }

    .cart-item-content{

        gap:.75rem;

    }

    .cart-item-price{

        display:none;

    }

    .cart-item-title{

        font-size:1.1rem;

    }

    .cart-item-bottom{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:.75rem;

        margin-top:.75rem;

    }

    .cart-quantity{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:.5rem;

        padding:.25rem;

        border-radius:999px;

        background:rgba(255,255,255,.04);

    }

    .cart-item-subtotal{

        width:100%;

        text-align:center;

        font-size:1.25rem;

        color:var(--lux-gold);

    }

    .cart-remove{

        width:100%;

        padding:.9rem;

        border-radius:999px;

        border:1px solid rgba(255,255,255,.08);

        background:rgba(255,255,255,.03);

        text-align:center;

    }

    .cart-coupon-form{

        display:flex;

        flex-direction:column;

        gap:.75rem;

    }

}

/* =========================================================
   PREMIUM HOVER ATMOSPHERE
========================================================= */

.cart-item,
.cart-summary-card,
.cart-upsell-card {

    will-change:

        transform;

}

.cart-item::after,
.cart-summary-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.02),
            transparent
        );

    pointer-events: none;

}


#cart-toast {
    position: fixed;
    top: 120px;
    right: 24px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-10px);
    transition: .3s ease;
}

#cart-toast.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px){

    .cart-layout{

        display:flex;

        flex-direction:column;

    }

    .cart-products{

        order:1;

    }

    .cart-summary{

        order:2;

        width:100%;

    }

}

@media (max-width:768px){

    .cart-item-bottom{

        flex-direction:column !important;

        align-items:stretch !important;

        gap:.75rem !important;

    }

    .cart-item-subtotal{

        width:100% !important;

        text-align:center !important;

    }

    .cart-remove{

        width:100% !important;

        display:block !important;

        text-align:center !important;

        margin-top:.5rem !important;

    }

}

.cart-next-reward{

    margin:1.5rem 0;

    padding:1.5rem;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        rgba(200,176,139,.08),
        rgba(255,255,255,.02)
    );

    border:
    1px solid rgba(200,176,139,.18);

}

.cart-next-reward-badge{

    color:var(--lux-gold);

    font-size:.7rem;

    letter-spacing:.2em;

    text-transform:uppercase;

    margin-bottom:.75rem;

}

.cart-next-reward h3{

    font-size:1.5rem;

    margin-bottom:.5rem;

}

.cart-next-reward p{

    color:var(--text-secondary);

}

.cart-savings-panel{

    margin-bottom:1.5rem;

    padding:1.25rem;

    border-radius:20px;

    background:
    rgba(143,216,156,.05);

    border:
    1px solid rgba(143,216,156,.2);

}

.cart-savings-label{

    color:#8fd89c;

    margin-bottom:.4rem;

}

.cart-savings-value{

    font-size:2rem;

    font-weight:700;

    color:#8fd89c;

}

.cart-recommendations{

    margin-top:2rem;

}


.recommendation-card{

    min-width:220px;

    padding:1rem;

    border-radius:22px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.08);

}

.recommendation-card img {

    width:100%;

    height:180px;

    object-fit:contain;

    padding:12px;
}

.recommendation-brand{

    color:var(--lux-gold);

    font-size:.7rem;

    letter-spacing:.15em;

    margin-top:.75rem;

}

.recommendation-name{

    margin:1rem 0;

}

.goal-banner{

    margin-bottom:1rem;

    padding:1rem 1.25rem;

    border-radius:18px;

    background:
    rgba(200,176,139,.08);

    border:
    1px solid rgba(200,176,139,.15);

    color:var(--lux-gold);

    font-weight:600;

    text-align:center;

}

.cart-recommendation-intro {

    text-align:center;

    margin:3rem 0;

}

.cart-recommendation-label {

    display:block;

    margin-bottom:.75rem;

    font-size:.72rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--lux-gold);

}

.cart-recommendation-intro h2 {

    margin-bottom:1rem;

}

.cart-recommendation-intro p {

    max-width:600px;

    margin:auto;

    color:var(--text-secondary);

}

.cart-reel{
    overflow:hidden;
    position:relative;
    margin-top: 20px;
}


.cart-reel-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.cart-reel-track::-webkit-scrollbar{
    display:none;
}

.cart-reel-track{
    scroll-behavior:smooth;
}

.recommendation-card{
    flex:0 0 260px;
    scroll-snap-align:start;
}


.cart-reel:hover .cart-reel-track {
    animation-play-state: paused;
}


.recommendation-card {

    background: #111;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 20px;

    overflow: hidden;

    padding: 14px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.recommendation-card img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 14px;
}

@media (min-width: 992px){

    .cart-layout{
        grid-template-columns:
        minmax(0,1fr)
        420px
        300px;
    }

}
@media (max-width:991px){

    .cart-layout{
        display:flex;
        flex-direction:column;
    }

    .cart-products{
        order:1;
    }

    .cart-summary{
        order:2;
    }

    .cart-recommendations{
        order:3;
    }

}

.recommendation-price{

    color:var(--lux-gold);

    font-size:1.15rem;

    font-weight:700;

    margin-top:auto;

}

.recommendation-family{

    color:var(--text-secondary);

    font-size:.85rem;

}
/* =========================================================
   END
========================================================= */