/* ============================================================
   YETI³ CART · EXECUTIVE COMMERCE
   ============================================================ */

.y3-cart {
    --cart-ink: #26322c;
    --cart-muted: #737b75;
    --cart-green: #233f37;
    --cart-gold: #9b763d;
    --cart-line: rgba(39, 54, 46, .10);
    --cart-paper: #f8f6f0;

    min-height: 70vh;

    padding:
        clamp(42px, 6vw, 82px)
        0
        clamp(70px, 8vw, 120px);

    background:
        radial-gradient(
            circle at 86% 6%,
            rgba(166, 126, 62, .07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #faf9f5,
            #f5f2ea
        );
}

.y3-cart *,
.y3-cart *::before,
.y3-cart *::after {
    box-sizing: border-box;
}

.y3-cart__shell {
    width: min(calc(100% - 64px), 1380px);

    margin: 0 auto;
}


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

.y3-cart__header {
    margin-bottom:
        clamp(28px, 4vw, 48px);
}

.y3-cart__eyebrow {
    margin-bottom: 10px;

    color: var(--cart-gold);

    font-size: 9px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.y3-cart__heading-row {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 24px;

    border-bottom:
        1px solid var(--cart-line);
}

.y3-cart__heading-row h1 {
    margin: 0 0 7px;

    color: var(--cart-ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 66px);

    font-weight: 500;

    line-height: .94;

    letter-spacing: -.04em;
}

.y3-cart__heading-row p {
    margin: 0;

    color: var(--cart-muted);

    font-size: 11px;

    line-height: 1.45;
}

.y3-cart__heading-row p strong {
    color: #3b4942;
}

.y3-cart__continue {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 3px;

    color: #45534c;

    font-size: 10px;
    font-weight: 650;

    letter-spacing: .04em;

    text-decoration: none;

    transition:
        color .18s ease,
        transform .18s ease;
}

.y3-cart__continue:hover {
    color: var(--cart-gold);

    transform: translateX(2px);
}


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

.y3-cart__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(310px, 370px);

    gap:
        clamp(34px, 5vw, 74px);

    align-items: start;
}


/* ============================================================
   ITEMS
   ============================================================ */

.y3-cart__items {
    display: flex;

    flex-direction: column;

    gap: 12px;

    min-width: 0;
}

.y3-cart-item {
    position: relative;

    display: grid;

    grid-template-columns:
        clamp(145px, 16vw, 205px)
        minmax(0, 1fr);

    gap:
        clamp(19px, 2.5vw, 30px);

    min-width: 0;

    padding: 12px;

    border:
        1px solid rgba(43, 56, 49, .09);

    border-radius: 16px;

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

    box-shadow:
        0 8px 25px rgba(39, 31, 21, .035),
        inset 0 1px 0 rgba(255,255,255,.82);

    backdrop-filter:
        blur(12px);

    transition:
        transform .24s cubic-bezier(.2,.7,.2,1),
        box-shadow .24s ease,
        border-color .24s ease,
        background-color .24s ease;
}

@media (hover:hover) {

    .y3-cart-item:hover {
        transform:
            translateY(-2px);

        border-color:
            rgba(141, 106, 52, .17);

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

        box-shadow:
            0 18px 45px rgba(39,31,21,.07),
            inset 0 1px 0 rgba(255,255,255,.9);
    }
}


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

.y3-cart-item__media {
    position: relative;

    display: grid;

    place-items: center;

    min-height: 170px;

    overflow: hidden;

    border-radius: 11px;

    background:
        radial-gradient(
            circle at 50% 43%,
            #fff,
            #eeebe3
        );

    text-decoration: none;
}

.y3-cart-item__media picture {
    display: block;

    width: 100%;
    height: 100%;
}

.y3-cart-item__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        filter .25s ease;
}

@media (hover:hover) {

    .y3-cart-item:hover
    .y3-cart-item__media img {

        transform:
            scale(1.035);

        filter:
            contrast(1.015)
            saturate(1.02);
    }
}

.y3-cart-item__placeholder {
    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    min-height: 170px;

    color: rgba(141,106,52,.45);

    font-size: 28px;

    font-weight: 500;
}


/* ============================================================
   BODY
   ============================================================ */

.y3-cart-item__body {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-width: 0;

    padding:
        6px 4px 5px 0;
}

.y3-cart-item__top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.y3-cart-item__identity {
    min-width: 0;
}

.y3-cart-item__type {
    display: block;

    margin-bottom: 7px;

    color: var(--cart-gold);

    font-size: 7.5px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.y3-cart-item__name {
    display: block;

    max-width: 30ch;

    color: var(--cart-ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(20px, 2vw, 27px);

    font-weight: 550;

    line-height: 1.02;

    letter-spacing: -.025em;

    text-decoration: none;

    transition:
        color .18s ease;
}

.y3-cart-item__name:hover {
    color:
        #8a6733;
}

.y3-cart-item__variant {
    display: block;

    margin-top: 7px;

    color: var(--cart-muted);

    font-size: 9px;

    line-height: 1.4;
}


/* ============================================================
   REMOVE
   ============================================================ */

.y3-cart-item__remove-form {
    flex: 0 0 auto;

    margin: 0;
}

.y3-cart-item__remove {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    padding: 0;

    border:
        1px solid rgba(44, 57, 50, .10);

    border-radius: 50%;

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

    color:
        #788078;

    cursor: pointer;

    font-size:
        17px;

    line-height: 1;

    transition:
        transform .18s ease,
        color .18s ease,
        border-color .18s ease,
        background-color .18s ease;
}

.y3-cart-item__remove:hover {
    transform:
        rotate(4deg);

    color:
        #8b493f;

    border-color:
        rgba(139,73,63,.20);

    background:
        rgba(255,248,246,.9);
}


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

.y3-cart-item__bottom {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-top: 22px;

    padding-top: 14px;

    border-top:
        1px solid var(--cart-line);
}


/* quantity */

.y3-cart-item__quantity {
    display: flex;

    align-items: flex-end;

    gap: 7px;

    margin: 0;
}

.y3-cart-item__quantity label {
    display: block;
}

.y3-cart-item__quantity label > span {
    display: block;

    margin-bottom: 5px;

    color: var(--cart-muted);

    font-size: 7px;

    font-weight: 650;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.y3-cart-item__quantity input {
    width: 61px;
    height: 35px;

    padding: 0 7px;

    border:
        1px solid rgba(41,56,48,.13);

    border-radius: 7px;

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

    color: #314039;

    font: inherit;

    font-size: 11px;

    text-align: center;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.y3-cart-item__quantity input:focus {
    border-color:
        rgba(148,110,52,.38);

    background:
        #fff;

    box-shadow:
        0 0 0 3px rgba(148,110,52,.07);
}

.y3-cart-item__quantity button {
    height: 35px;

    padding: 0 12px;

    border:
        1px solid rgba(41,56,48,.12);

    border-radius: 7px;

    background:
        transparent;

    color:
        #526058;

    cursor: pointer;

    font-size:
        8px;

    font-weight:
        650;

    letter-spacing:
        .05em;

    transition:
        color .18s ease,
        border-color .18s ease,
        background-color .18s ease;
}

.y3-cart-item__quantity button:hover {
    color:
        #826231;

    border-color:
        rgba(145,108,52,.22);

    background:
        rgba(255,255,255,.55);
}


/* price */

.y3-cart-item__price {
    text-align: right;
}

.y3-cart-item__price del {
    display: block;

    margin-bottom: 3px;

    color:
        #999e9a;

    font-size:
        9px;
}

.y3-cart-item__price strong {
    display: block;

    color:
        #193a31;

    font-size:
        clamp(18px, 1.7vw, 23px);

    font-weight:
        650;

    line-height:
        1;

    letter-spacing:
        -.035em;
}

.y3-cart-item__price small {
    display: block;

    margin-top: 4px;

    color:
        var(--cart-muted);

    font-size:
        7.5px;
}


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

.y3-cart-summary {
    position: sticky;

    top: 90px;

    padding:
        24px;

    overflow: hidden;

    border:
        1px solid rgba(52,65,58,.10);

    border-radius:
        16px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.80),
            rgba(246,242,232,.82)
        );

    box-shadow:
        0 22px 60px rgba(39,31,21,.07),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter:
        blur(18px);
}

.y3-cart-summary::before {
    content: "";

    position: absolute;

    inset: 0 0 auto;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(156,118,61,.65),
            transparent
        );
}

.y3-cart-summary__eyebrow {
    margin-bottom:
        7px;

    color:
        var(--cart-gold);

    font-size:
        7.5px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.y3-cart-summary h2 {
    margin:
        0 0 22px;

    color:
        var(--cart-ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        29px;

    font-weight:
        550;

    line-height:
        1;

    letter-spacing:
        -.03em;
}

.y3-cart-summary__rows {
    padding:
        14px 0;

    border-top:
        1px solid var(--cart-line);

    border-bottom:
        1px solid var(--cart-line);
}

.y3-cart-summary__row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        6px 0;

    color:
        var(--cart-muted);

    font-size:
        9px;
}

.y3-cart-summary__row strong {
    color:
        #46534d;

    font-weight:
        600;
}

.y3-cart-summary__row
.y3-cart-summary__muted {
    color:
        #888f8a;

    font-size:
        8px;

    font-weight:
        500;
}


/* total */

.y3-cart-summary__total {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding:
        21px 0 20px;
}

.y3-cart-summary__total > span {
    color:
        #4e5b54;

    font-size:
        9px;

    font-weight:
        650;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.y3-cart-summary__total > strong {
    color:
        #173a30;

    font-size:
        clamp(28px, 2.7vw, 36px);

    font-weight:
        620;

    line-height:
        .9;

    letter-spacing:
        -.045em;

    white-space:
        nowrap;
}

.y3-cart-summary__total > strong small {
    font-size:
        .55em;

    font-weight:
        550;
}


/* checkout */

.y3-cart-summary__checkout {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    width: 100%;

    min-height: 48px;

    padding:
        0 17px;

    border:
        1px solid #233f37;

    border-radius:
        9px;

    background:
        #233f37;

    color:
        #fff;

    font-size:
        9.5px;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    box-shadow:
        0 10px 28px rgba(25,52,43,.13);

    transition:
        transform .2s cubic-bezier(.2,.7,.2,1),
        background-color .2s ease,
        box-shadow .2s ease;
}

.y3-cart-summary__checkout:hover {
    transform:
        translateY(-2px);

    background:
        #315349;

    box-shadow:
        0 15px 34px rgba(25,52,43,.18);
}


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

.y3-cart-summary__trust {
    display: grid;

    gap: 11px;

    margin-top:
        18px;

    padding-top:
        17px;

    border-top:
        1px solid var(--cart-line);
}

.y3-cart-summary__trust > div {
    display: grid;

    grid-template-columns:
        29px minmax(0,1fr);

    align-items: center;

    gap: 9px;
}

.y3-cart-summary__trust-mark {
    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    border:
        1px solid rgba(143,107,52,.16);

    border-radius:
        50%;

    color:
        #8b6934;

    font-size:
        8px;

    font-weight:
        700;
}

.y3-cart-summary__trust strong,
.y3-cart-summary__trust small {
    display: block;
}

.y3-cart-summary__trust strong {
    margin-bottom:
        2px;

    color:
        #3c4942;

    font-size:
        8.5px;

    font-weight:
        650;

    line-height:
        1.2;
}

.y3-cart-summary__trust small {
    color:
        var(--cart-muted);

    font-size:
        7.5px;

    line-height:
        1.35;
}


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

.y3-cart-empty {
    display: flex;

    flex-direction: column;

    align-items: center;

    width:
        min(620px,100%);

    margin:
        65px auto 0;

    padding:
        clamp(38px,6vw,68px);

    border:
        1px solid rgba(45,58,50,.09);

    border-radius:
        20px;

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

    box-shadow:
        0 25px 70px rgba(39,31,21,.05);

    text-align:
        center;
}

.y3-cart-empty__mark {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom:
        20px;

    border:
        1px solid rgba(146,110,53,.22);

    border-radius:
        50%;

    color:
        #8d6a34;

    font-size:
        13px;

    font-weight:
        650;
}

.y3-cart-empty__eyebrow {
    margin-bottom:
        9px;

    color:
        var(--cart-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}

.y3-cart-empty h2 {
    margin:
        0 0 13px;

    color:
        var(--cart-ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(30px,4vw,44px);

    font-weight:
        500;

    line-height:
        .98;

    letter-spacing:
        -.035em;
}

.y3-cart-empty p {
    max-width:
        46ch;

    margin:
        0 0 24px;

    color:
        var(--cart-muted);

    font-size:
        10px;

    line-height:
        1.65;
}

.y3-cart-empty
.y3-cart-summary__checkout {
    max-width:
        270px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {

    .y3-cart__layout {
        grid-template-columns:
            1fr;
    }

    .y3-cart-summary {
        position:
            static;

        width:
            100%;
    }
}


@media (max-width: 680px) {

    .y3-cart {
        padding:
            28px 0 60px;
    }

    .y3-cart__shell {
        width:
            calc(100% - 28px);
    }

    .y3-cart__heading-row {
        display:
            block;
    }

    .y3-cart__continue {
        margin-top:
            16px;
    }

    .y3-cart-item {
        grid-template-columns:
            108px
            minmax(0,1fr);

        gap:
            14px;

        padding:
            9px;
    }

    .y3-cart-item__media {
        min-height:
            125px;
    }

    .y3-cart-item__name {
        font-size:
            19px;
    }

    .y3-cart-item__bottom {
        display:
            block;

        margin-top:
            16px;

        padding-top:
            11px;
    }

    .y3-cart-item__price {
        margin-top:
            13px;

        text-align:
            left;
    }

    .y3-cart-item__quantity {
        align-items:
            flex-end;
    }

    .y3-cart-summary {
        padding:
            19px;
    }
}


@media (max-width: 440px) {

    .y3-cart-item {
        grid-template-columns:
            88px
            minmax(0,1fr);
    }

    .y3-cart-item__media {
        min-height:
            105px;
    }

    .y3-cart-item__quantity button {
        padding:
            0 8px;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .y3-cart *,
    .y3-cart *::before,
    .y3-cart *::after {
        transition:
            none !important;
    }
}


/* ============================================================
   CART PRODUCT IMAGE — SLIGHT RIGHT SHIFT
   ============================================================ */

.y3-cart-item__media img {
    transform: translateX(6px);
}

@media (hover:hover) {

    .y3-cart-item:hover
    .y3-cart-item__media img {
        transform:
            translateX(6px)
            scale(1.035);
    }
}