/* Custom fixes for product slider images */

/* Fix for slider component width issue */
.am-collection__feature-slider {
    width: 100% !important;
}

/* Card media containers must fill the ratio box */
.am-card-media,
.am-card-media__media {
    width: 100% !important;
}

/* Images must cover the card area (not shrink to natural size) */
/* .am-card-media__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transform: translateZ(0) scale(1.15);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
} */

.am-card-media__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transform: translateZ(0) scale(1.05);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: auto;
}

/* Fix for ratio containers */
.am-product-card-wrapper__card__inner.ratio {
    width: 100% !important;
}

/* Enable hover image transition - second image should be hidden by default */
.media--hover-effect > img + img {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* On hover: hide first image, show second image */
@media screen and (min-width: 990px) {
    .card-wrapper:hover .media--hover-effect > img:first-child:not(:only-child) {
        opacity: 0 !important;
    }

    .card-wrapper:hover .media--hover-effect > img + img {
        opacity: 1 !important;
        transform: scale(1.03);
    }
}

/* Cart page: button hover swap + remove link underline */
.template--cart #cart_page a[data-am-cart-remove],
.template--cart #cart_page a[data-am-cart-remove]:hover,
.template--cart #cart_page a[data-am-cart-remove]:focus {
    text-decoration: underline !important;
    text-underline-offset: .3rem;
}

.template--cart #main-cart-footer .cart__continuebtn.cart__checkout-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    box-sizing: border-box;
    min-width: calc(12rem + var(--buttons-border-width) * 2);
    min-height: calc(4.5rem + var(--buttons-border-width) * 2);
    padding: 0 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    letter-spacing: .1rem;
    line-height: calc(1 + .2 / var(--font-body-scale));
    text-decoration: none;
    background-color: transparent;
    color: rgb(var(--color-button));
    border: var(--buttons-border-width) solid rgb(var(--color-button));
    transition: background-color var(--duration-short) ease, color var(--duration-short) ease, border-color var(--duration-short) ease;
}

.template--cart #main-cart-footer .cart__continuebtn.cart__checkout-button:hover {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border-color: rgb(var(--color-button));
}

.template--cart #main-cart-footer .am-cart__footer__checkout-button.button:hover {
    --alpha-button-background: 0;
    --color-button-text: var(--color-button);
    --buttons-border-opacity: 0;
}

/* Cart page (mobile): match the reference layout */
@media screen and (max-width: 749px) {
    .template--cart #main-cart-footer .cart__continuebtn.cart__checkout-button {
        max-width: none;
        margin: 0 auto 2.2rem;
    }

    .template--cart #cart_page .am-cart__title__wrapper.title-wrapper-with-link {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .template--cart #cart_page .am-cart__cart__contents.cart__contents {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    .template--cart #main-cart-footer .am-cart__footer__checkout-button.cart__checkout-button {
        max-width: none;
    }

    .template--cart #main-cart-footer .am-cart__footer__totals.totals {
        justify-content: space-between;
        align-items: center;
    }

    .template--cart #main-cart-footer .am-cart__footer__tax-note.tax-note {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Cart drawer (mobile): match Amouage layout */
@media screen and (max-width: 749px) {
    .drawer .drawer__inner {
        width: 100vw;
        max-width: 100vw;
    }

    /* Reference drawer hides the tax-note line */
    .drawer .cart-drawer__footer .tax-note {
        display: none !important;
    }

    /* Reference drawer shows View Bag under Proceed to Checkout */
    .drawer .cart-drawer .viewbag {
        display: flex !important;
    }
}

/* Cart (page + drawer): keep desktop layout intact */
.template--cart #cart_page .am-cart-item__title-row,
.drawer .am-cart-item__title-row {
    display: contents;
}

.template--cart #cart_page .am-cart-item__mobile-price {
    display: none;
}

/* Cart (page + drawer): apply the reference layout ONLY on mobile */
@media screen and (max-width: 749px) {
    /* Cart page: make the details column span full width so Remove can reach the far right edge */
    .template--cart #cart_page .am-cart__item__details.cart-item__details {
        grid-column: 2 / 5;
    }

    /* Cart drawer: allow title row (and Remove) to reach the far right edge */
    .drawer .cart-drawer .cart-item__details {
        grid-column: 2 / 5;
    }

    .template--cart #cart_page .am-cart__item__details.cart-item__details > .am-cart-item__title-row {
        max-width: none !important;
    }

    .template--cart #cart_page .am-cart-item__title-row,
    .drawer .am-cart-item__title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.2rem;
        width: 100%;
        flex-wrap: nowrap;
    }

    .template--cart #cart_page .am-cart-item__title-row .cart-item__name,
    .drawer .am-cart-item__title-row .cart-item__name {
        font-family: Gotham-Medium;
        font-weight: 500;
        flex: 1 1 auto;
        min-width: 0;
    }

    .template--cart #cart_page .am-cart-item__remove,
    .drawer .am-cart-item__remove {
        white-space: nowrap;
        margin-top: .2rem;
    }

    /* Cart (page): keep desktop remove hidden, mobile remove visible */
    .template--cart #cart_page .am-cart-item__remove--desktop {
        display: none !important;
    }

    .template--cart #cart_page .am-cart-item__remove--mobile {
        display: inline-flex !important;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .template--cart #cart_page .am-cart-item__title-row .am-cart-item__remove--mobile {
        margin-left: auto;
        text-align: right;
    }
    .drawer .am-cart-item__remove--mobile {
        display: inline-flex !important;
        flex: 0 0 auto;
        margin-left: auto;
        text-align: right;
    }

    /* Cart drawer: hide the separate remove cell on mobile (remove is in title row) */
    .drawer .am-cart-item__remove-cell {
        display: none !important;
    }

    .template--cart #cart_page .am-cart-item__totals-desktop {
        display: none;
    }

    .template--cart #cart_page .am-cart-item__mobile-price {
        display: block;
        margin-left: auto;
        text-align: right;
    }

    /* Cart page: shrink quantity control on mobile */
    .template--cart #cart_page .quantity {
        width: 11rem;
        min-height: 3.2rem;
    }

    .template--cart #cart_page .quantity__button {
        width: 3.2rem;
    }

    .template--cart #cart_page .quantity__input {
        font-size: 1.4rem;
        padding: 0 .3rem;
    }

    .template--cart #cart_page .cart-item__quantity-wrapper {
        gap: 10px !important;
    }

    .template--cart #cart_page .am-cart-item__mobile-price .price,
    .template--cart #cart_page .am-cart-item__mobile-price .money {
        font-family: Gotham-Medium;
        font-weight: 500;
    }
}

/* Desktop: hide mobile remove (we keep the original Remove placement) */
@media screen and (min-width: 750px) {
    .template--cart #cart_page .am-cart-item__remove--mobile {
        display: none !important;
    }

    .drawer .am-cart-item__remove--mobile {
        display: none !important;
    }
}

/* Cart drawer: only make line price bold on mobile (desktop uses theme layout) */
@media screen and (max-width: 749px) {
    .drawer .cart-item__price-wrapper .money {
        font-family: Gotham-Medium;
        font-weight: 500;
    }
}

/* Cart (drawer): line price bold on the right */
.drawer .cart-item__price-wrapper .money {
    font-family: Gotham-Medium;
    font-weight: 500;
}

/* Totals value: make subtotal bold (page + drawer) */
.template--cart #main-cart-footer .totals__total-value,
.drawer .cart-drawer .totals__total-value {
    font-family: Gotham-Medium;
    font-weight: 500;
}

/* Cart drawer: outlined Continue Shopping button like cart page */
.drawer .cart__continuebtn.cart__checkout-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0 auto 1.6rem;
    box-sizing: border-box;
    min-width: calc(12rem + var(--buttons-border-width) * 2);
    min-height: calc(4.5rem + var(--buttons-border-width) * 2);
    padding: 0 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    letter-spacing: .1rem;
    line-height: calc(1 + .2 / var(--font-body-scale));
    text-decoration: none;
    background-color: transparent;
    color: rgb(var(--color-button));
    border: var(--buttons-border-width) solid rgb(var(--color-button));
    transition: background-color var(--duration-short) ease, color var(--duration-short) ease, border-color var(--duration-short) ease;
}

.drawer .cart__continuebtn.cart__checkout-button:hover {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border-color: rgb(var(--color-button));
}

/* Scroll-to-top button (matches reference) */
#site-scroll {
    position: fixed;
    bottom: 20px;
    left: 3%;
    z-index: 3;
    max-height: 48px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

html[dir="rtl"] #site-scroll {
    left: auto;
    right: 3%;
}

#site-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#site-scroll svg {
    display: block;
}