/**
 * HyperTechno Ajax Cart confirmation and recommendations v4.
 *
 * Loaded after the shared design system and scoped to the MGS success modal.
 * The same markup and geometry serve Claue LTR and Claue RTL.
 */

body.hypertechno-design-system .success-ajax--popup.modal-popup {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--ht-space-4);
}

body.hypertechno-design-system .success-ajax--popup.modal-popup._inner-scroll .modal-inner-wrap {
    background: var(--ht-color-surface);
    border: 0;
    border-radius: var(--ht-radius-lg);
    box-shadow: var(--ht-shadow-md);
    margin: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    max-width: 920px;
    overflow: hidden;
    position: relative;
    width: min(720px, calc(100vw - 32px)) !important;
}

body.hypertechno-design-system .success-ajax--popup.modal-popup._inner-scroll .modal-inner-wrap:has(.ht-cart-recommendations) {
    width: min(920px, calc(100vw - 32px)) !important;
}

body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header {
    height: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-content {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overflow-y: auto !important;
    padding: 0;
}

body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close {
    background: var(--ht-color-surface) !important;
    border: 1px solid var(--ht-color-line) !important;
    border-radius: var(--ht-radius-sm) !important;
    color: var(--ht-color-ink) !important;
    height: var(--ht-icon-control-size) !important;
    inset-inline-end: var(--ht-space-4) !important;
    inset-inline-start: auto !important;
    margin: 0;
    min-height: var(--ht-icon-control-size);
    min-width: var(--ht-icon-control-size);
    padding: 0 !important;
    top: var(--ht-space-4) !important;
    width: var(--ht-icon-control-size) !important;
}

html:not([dir="rtl"]) body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close {
    left: auto !important;
    right: var(--ht-space-4) !important;
}

html[dir="rtl"] body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close {
    left: var(--ht-space-4) !important;
    right: auto !important;
}

body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close::before {
    background: currentColor !important;
    bottom: auto !important;
    clip-path: polygon(
        14% 0,
        50% 36%,
        86% 0,
        100% 14%,
        64% 50%,
        100% 86%,
        86% 100%,
        50% 64%,
        14% 100%,
        0 86%,
        36% 50%,
        0 14%
    );
    content: "" !important;
    display: block !important;
    height: 20px !important;
    left: 50% !important;
    margin: 0 !important;
    position: absolute !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    -webkit-clip-path: polygon(
        14% 0,
        50% 36%,
        86% 0,
        100% 14%,
        64% 50%,
        100% 86%,
        86% 100%,
        50% 64%,
        14% 100%,
        0 86%,
        36% 50%,
        0 14%
    );
}

body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close::after {
    content: none !important;
    display: none !important;
}

body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close:hover,
body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-header .action-close:focus {
    background: var(--ht-color-primary) !important;
    border-color: var(--ht-color-primary) !important;
    color: #fff !important;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation {
    background: var(--ht-color-surface);
    color: var(--ht-color-body);
    font-family: var(--ht-font-family);
    padding: var(--ht-space-8);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status {
    align-items: flex-start;
    border-bottom: 1px solid var(--ht-color-line);
    display: flex;
    gap: var(--ht-space-4);
    padding-block-end: var(--ht-space-5);
    padding-inline-end: 52px;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-icon {
    align-items: center;
    background: var(--ht-color-success-soft);
    border: 1px solid var(--ht-color-success-line);
    border-radius: var(--ht-radius-md);
    color: var(--ht-color-success);
    display: inline-flex;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-icon svg {
    fill: none;
    height: 26px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
    width: 26px;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-copy {
    min-width: 0;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-copy h2 {
    color: var(--ht-color-ink);
    font-family: inherit;
    font-size: 24px;
    font-weight: var(--ht-font-weight-bold);
    line-height: 1.4;
    margin: 0 0 var(--ht-space-1);
    text-align: start;
    text-transform: none;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-copy p {
    color: var(--ht-color-body);
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-medium);
    line-height: var(--ht-line-height-body);
    margin: 0;
    overflow-wrap: anywhere;
    text-align: start;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__product {
    align-items: stretch;
    display: grid;
    gap: var(--ht-space-6);
    grid-template-columns: 176px minmax(0, 1fr);
    padding-block: var(--ht-space-6);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media {
    align-items: center;
    background: var(--ht-color-soft);
    border-radius: var(--ht-radius-md);
    display: flex;
    justify-content: center;
    min-height: 176px;
    overflow: hidden;
    padding: var(--ht-space-3);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media .popup__image-wrapper,
body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media .product-image-container,
body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media .product-image-wrapper {
    display: block;
    height: 100%;
    padding: 0 !important;
    width: 100% !important;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media img,
body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media .product-image-photo {
    display: block;
    height: 100% !important;
    margin: auto;
    max-height: 176px;
    max-width: 100% !important;
    object-fit: contain;
    position: static;
    width: 100% !important;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary {
    align-self: center;
    margin: 0;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary > div {
    align-items: center;
    border-bottom: 1px solid var(--ht-color-line);
    display: grid;
    gap: var(--ht-space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: var(--ht-space-3);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary > div:first-child {
    border-top: 1px solid var(--ht-color-line);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary dt,
body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary dd {
    margin: 0;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary dt {
    color: var(--ht-color-muted);
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-medium);
    text-align: start;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary dd {
    color: var(--ht-color-ink);
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-bold);
    text-align: end;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary .ht-cart-confirmation__subtotal {
    padding-block: var(--ht-space-4);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__subtotal dt,
body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__subtotal dd,
body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__subtotal .price {
    color: var(--ht-color-primary);
    font-size: var(--ht-font-size-lg);
    font-weight: var(--ht-font-weight-heavy);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__actions {
    display: flex;
    gap: var(--ht-space-3);
    justify-content: center;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__actions .ht-button {
    flex: 1 1 0;
    max-width: 280px;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations {
    background: var(--ht-color-soft);
    border-top: 1px solid var(--ht-color-line);
    margin: 0;
    padding: var(--ht-space-6) var(--ht-space-8) var(--ht-space-8);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__heading {
    margin-block-end: var(--ht-space-4);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__heading h2 {
    color: var(--ht-color-ink);
    font-family: inherit;
    font-size: var(--ht-font-size-lg);
    font-weight: var(--ht-font-weight-bold);
    line-height: 1.45;
    margin: 0;
    text-align: start;
    text-transform: none;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__viewport {
    border-radius: var(--ht-radius-md);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-block-end: var(--ht-space-2);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--ht-color-line-strong) transparent;
    scrollbar-width: thin;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__viewport:focus-visible {
    box-shadow: var(--ht-shadow-focus);
    outline: none;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__list {
    display: flex;
    gap: var(--ht-space-4);
    list-style: none;
    margin: 0;
    min-width: 100%;
    padding: 0;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item {
    background: var(--ht-color-surface);
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-md);
    display: flex;
    flex: 0 0 calc((100% - 48px) / 4);
    flex-direction: column;
    min-width: 164px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: border-color var(--ht-transition), transform var(--ht-transition);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:hover,
body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:focus-within {
    border-color: var(--ht-color-primary);
    transform: translateY(-1px);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__photo {
    align-items: center;
    aspect-ratio: 1;
    background: var(--ht-color-surface);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: var(--ht-space-3);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__photo img {
    display: block;
    height: 100%;
    object-fit: contain;
    transition: transform var(--ht-transition);
    width: 100%;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:hover .ht-cart-recommendations__photo img,
body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:focus-within .ht-cart-recommendations__photo img {
    transform: scale(1.025);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__details {
    border-top: 1px solid var(--ht-color-line);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--ht-space-2);
    padding: var(--ht-space-3);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__details h3 {
    font-family: inherit;
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-medium);
    line-height: 1.55;
    margin: 0;
    min-height: 3.1em;
    text-align: start;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__details h3 a {
    color: var(--ht-color-ink);
    display: -webkit-box;
    overflow: hidden;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__details h3 a:hover,
body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__details h3 a:focus {
    color: var(--ht-color-primary-dark);
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__price {
    margin-block-start: auto;
    text-align: start;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__price .price-box {
    margin: 0;
}

body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__price .price,
body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__price .price-label {
    color: var(--ht-color-primary);
    font-size: var(--ht-font-size-sm);
    font-weight: var(--ht-font-weight-heavy);
}

/* Magnific Popup is retained by some MGS add-to-cart entry points. */
body.hypertechno-design-system .success-ajax--popup.mfp-wrap .mfp-content,
body.hypertechno-design-system .success-ajax--popup .mfp-inline-holder .mfp-content,
body.hypertechno-design-system .success-ajax--popup .mfp-iframe-holder .mfp-content {
    background: var(--ht-color-surface);
    border-radius: var(--ht-radius-lg);
    box-shadow: var(--ht-shadow-md);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    max-width: 920px;
    overflow-y: auto;
    width: min(720px, calc(100vw - 32px)) !important;
}

body.hypertechno-design-system .success-ajax--popup .mfp-content:has(.ht-cart-recommendations) {
    width: min(920px, calc(100vw - 32px)) !important;
}

body.hypertechno-design-system .success-ajax--popup .mfp-close {
    background: var(--ht-color-surface);
    border: 1px solid var(--ht-color-line);
    border-radius: var(--ht-radius-sm);
    color: var(--ht-color-ink);
    height: var(--ht-icon-control-size);
    inset-inline-end: var(--ht-space-4) !important;
    inset-inline-start: auto !important;
    line-height: 40px;
    opacity: 1;
    text-align: center;
    top: var(--ht-space-4) !important;
    width: var(--ht-icon-control-size);
}

html:not([dir="rtl"]) body.hypertechno-design-system .success-ajax--popup .mfp-close {
    left: auto !important;
    right: var(--ht-space-4) !important;
}

html[dir="rtl"] body.hypertechno-design-system .success-ajax--popup .mfp-close {
    left: var(--ht-space-4) !important;
    right: auto !important;
}

body.hypertechno-design-system .success-ajax--popup .mfp-close:hover,
body.hypertechno-design-system .success-ajax--popup .mfp-close:focus {
    background: var(--ht-color-primary);
    border-color: var(--ht-color-primary);
    color: #fff;
}

@media (max-width: 767px) {
    body.hypertechno-design-system .success-ajax--popup.modal-popup {
        align-items: flex-end;
        padding: 0;
    }

    body.hypertechno-design-system .success-ajax--popup.modal-popup._inner-scroll .modal-inner-wrap,
    body.hypertechno-design-system .success-ajax--popup.modal-popup._inner-scroll .modal-inner-wrap:has(.ht-cart-recommendations) {
        border-radius: var(--ht-radius-lg) var(--ht-radius-lg) 0 0;
        bottom: 0;
        left: 0;
        margin: auto 0 0;
        max-height: 94vh;
        max-height: 94dvh;
        max-width: none;
        position: absolute;
        right: 0;
        top: auto;
        width: 100% !important;
    }

    body.hypertechno-design-system .success-ajax--popup.modal-popup .modal-content {
        max-height: 94vh;
        max-height: 94dvh;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation {
        padding: var(--ht-space-6) var(--ht-space-4);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status {
        gap: var(--ht-space-3);
        padding-block-end: var(--ht-space-4);
        padding-inline-end: 48px;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-icon {
        flex-basis: 44px;
        height: 44px;
        width: 44px;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__status-copy h2 {
        font-size: 21px;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__product {
        gap: var(--ht-space-4);
        grid-template-columns: 104px minmax(0, 1fr);
        padding-block: var(--ht-space-5);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media {
        min-height: 104px;
        padding: var(--ht-space-2);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media img,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__media .product-image-photo {
        max-height: 104px;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__summary > div {
        gap: var(--ht-space-2);
        padding-block: var(--ht-space-2);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__subtotal dt,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__subtotal dd,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__subtotal .price {
        font-size: var(--ht-font-size-md);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations {
        padding: var(--ht-space-5) var(--ht-space-4) var(--ht-space-6);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__list {
        gap: var(--ht-space-3);
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item {
        flex-basis: calc((100% - 12px) / 2);
        min-width: 140px;
    }
}

@media (max-width: 479px) {
    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__actions {
        flex-direction: column-reverse;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-confirmation__actions .ht-button {
        max-width: none;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__photo img {
        transition: none;
    }

    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:hover,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:focus-within,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:hover .ht-cart-recommendations__photo img,
    body.hypertechno-design-system .success-ajax--popup .ht-cart-recommendations__item:focus-within .ht-cart-recommendations__photo img {
        transform: none;
    }
}