:root {
    --primaire: var(--anthracite);
    --secondaire: var(--anthracite);
    /* --tertiaire: var(--marron-mauve); */
    --fond: var(--blanc);
}

.layout-shell__left::-webkit-scrollbar-thumb {
    background: var(--secondaire);
}

.layout-shell__left {
    scrollbar-color: var(--secondaire) transparent;
}


body {
    background-color: var(--fond);
    color: var(--primaire);
}

/* couleur logo */
.site-logo-svg {
    fill: var(--secondaire);
}

header nav a,
nav .cart-count,
h1.layout-shell__title {
    color: var(--secondaire)
}

hr {
    border: none;
    border-top: 2px dotted var(--secondaire) !important;
    margin: var(--margin-big) 0 !important;
}

button {
    color: var(--primaire);
}

.layout-shell__left-content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 50%;
}

.cart-count-message {
    text-transform: lowercase;
}

/* colonne de droite */
.layout-shell__right {
    background-color: var(--gris-pale);
    padding: 2rem 2rem 0 2rem;
    color: var(--anthracite);
}

.cart-empty {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column-reverse;
}


.cart-item {
    background-color: var(--blanc);
    display: flex;
    flex-direction: row;
    margin-bottom: var(--margin-small);
}

.cart-item:last-child {
    margin-bottom: 0;
}

.cart-item button {
    background-color: var(--gris-pale);
    cursor: pointer;
}

.cart-item__image {
    width: var(--big-col);
    height: auto;
    aspect-ratio: 1/1;
    line-height: 0;
}

.cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__info {
    width: var(--big-col3);
    padding: 1em;

    line-height: 1.1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item__title {
    font-family: var(--claude-sans);
    font-size: 1.1em;
    letter-spacing: 0.05rem;
}

.cart-item__author {
    font-size: 0.85em;
    font-weight: 500;
}

.cart-item__quantity {
    display: flex;
    flex-direction: row;
    width: var(--big-col);
    justify-content: center;
    align-content: center;
    align-items: center;
}

.cart-item__actions {
    width: var(--big-col);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.qty-btn {
    width: 2.5rem;
    height: 2.5rem;
}

.qty-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.qty-value {
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    padding: 0.35em;
    /* border-top: 2px solid var(--gris-pale);
    border-bottom: 2px solid var(--gris-pale); */

    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-item__remove {
    width: 2.5rem;
    height: 2.5rem;
    font-weight: 700;
    font-size: 0.8em;
}

/* sous total */
.cart-summary {
    background-color: var(--blanc);
    padding: 1rem;
}

.cart-subtotal {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cart-subtotal__note {
    font-weight: 400;
    font-size: 0.8em;
    width: var(--big-col4);
}

.cart-actions {
    position: sticky;
    bottom: 0;
    padding: 1rem 0;
    background-color: var(--gris-pale);
}

.btn-checkout {
    margin-bottom: var(--margin-small);
    background-color: var(--primaire);
    color: var(--blanc);
}

.btn-shop-return {
    background-color: var(--blanc);
    color: var(--primaire);
    margin-bottom: 1rem;
}

@media (max-width: 768px) {

    body {
        background-color: var(--gris-pale);
    }

    .layout-shell__left {
        background-color: var(--fond);
    }

    .header-mobile__hamburger svg,
    .header-mobile__cart svg {
        fill: var(--secondaire);
    }

    .header-mobile__cart .cart-count {
        color: var(--secondaire);
    }


    .layout-shell__left-content {
        position: relative;
        width: 100%;
    }



    .layout-shell__right {
        padding: var(--margin-small);
    }

    .cart-item {
        display: grid;
        grid-template-columns: auto repeat(2, 1fr);
    }

    .cart-item__image {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        width: calc(var(--big-col) * 1.5);
    }

    .cart-item__info {
        width: auto;
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        padding: var(--margin-small);
        flex-direction: row;
    }

    .cart-item__title-author {
        flex-grow: 1;
    }

    .cart-item__quantity {
        grid-column: 2;
        grid-row: 2;
        width: auto;

        padding: 0 var(--margin-small) var(--margin-small) var(--margin-small);
        align-items: end;
        align-content: start;
    }

    .cart-item__actions {
        flex-grow: 1;
        width: auto;
        padding: 0 var(--margin-small) var(--margin-small) var(--margin-small);
        align-items: end;
        justify-content: end;
    }
}