:root {
    --dxnsf-bg: #FAF8F3;
    --dxnsf-primary: #2E5E4E;
    --dxnsf-secondary: #7FA78B;
    --dxnsf-accent: #C89B3C;
    --dxnsf-text: #2B2B2B;
    --dxnsf-muted: #66706B;
    --dxnsf-error: #A34646;
    --dxnsf-border: rgba(46, 94, 78, 0.14);
    --dxnsf-white: #FFFFFF;
}


/* =========================================================
   LAUNCHER
   ========================================================= */

.dxnsf-cart-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100050;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;

    padding: 0 16px;

    border: 0;
    border-radius: 999px;

    background:
        var(--dxnsf-primary);

    color: #fff;

    font-family:
        Manrope,
        sans-serif;

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

    box-shadow:
        0 10px 30px
        rgba(30, 50, 42, 0.18);

    cursor: pointer;
}


.dxnsf-cart-launcher.is-mounted {
    position: relative;
    inset: auto;
    z-index: auto;

    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;

    padding: 0;

    background: transparent;

    color:
        var(--dxnsf-primary);

    box-shadow: none;
}


.dxnsf-cart-launcher.is-mounted
.dxnsf-cart-launcher__label {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
}


.dxnsf-cart-launcher__badge {
    position: absolute;

    top: -5px;
    right: -5px;

    display: grid;
    place-items: center;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border: 2px solid
        var(--dxnsf-bg);

    border-radius: 999px;

    background:
        var(--dxnsf-accent);

    color: #fff;

    font-size: 10px;
    line-height: 1;
}


/* =========================================================
   DRAWER SHELL
   ========================================================= */

body.dxnsf-cart-open {
    overflow: hidden;
}


.dxnsf-cart-overlay {
    position: fixed;
    inset: 0;

    z-index: 100080;

    background:
        rgba(27, 36, 32, 0.38);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}


.dxnsf-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;

    z-index: 100090;

    display: flex;
    flex-direction: column;

    width:
        min(
            430px,
            100vw
        );

    height: 100vh;
    height: 100dvh;

    max-height: 100dvh;

    background:
        var(--dxnsf-bg);

    color:
        var(--dxnsf-text);

    box-shadow:
        -18px 0 50px
        rgba(22, 39, 32, 0.14);

    transform:
        translateX(102%);

    visibility: hidden;

    transition:
        transform 220ms ease,
        visibility 220ms ease;
}


.dxnsf-cart-root.is-open
.dxnsf-cart-overlay {
    opacity: 1;

    visibility: visible;
}


.dxnsf-cart-root.is-open
.dxnsf-cart-drawer {
    transform:
        translateX(0);

    visibility: visible;
}


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

.dxnsf-cart-drawer__header {
    flex: 0 0 auto;

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

    gap: 20px;

    padding:
        22px
        22px
        18px;

    border-bottom:
        1px solid
        var(--dxnsf-border);

    background:
        var(--dxnsf-bg);
}


.dxnsf-cart-drawer__eyebrow {
    margin:
        0
        0
        3px;

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

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color:
        var(--dxnsf-secondary);
}


.dxnsf-cart-drawer__header h2 {
    margin: 0;

    font-family:
        "Libre Caslon Text",
        serif;

    font-size: 29px;
    line-height: 1.05;

    color:
        var(--dxnsf-primary);
}


.dxnsf-cart-drawer__count {
    margin:
        5px
        0
        0;

    font-size: 12px;

    color:
        var(--dxnsf-muted);
}


.dxnsf-cart-drawer__close {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    padding: 0;

    border:
        1px solid
        var(--dxnsf-border);

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--dxnsf-primary);

    font-size: 25px;
    font-weight: 300;

    cursor: pointer;
}


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

.dxnsf-cart-drawer__body {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        14px
        18px
        22px;
}


.dxnsf-cart-state {
    padding:
        38px
        16px;

    text-align: center;

    color:
        var(--dxnsf-muted);
}


.dxnsf-cart-state strong {
    display: block;

    margin-bottom: 6px;

    color:
        var(--dxnsf-primary);
}


.dxnsf-cart-state p {
    margin: 0;

    line-height: 1.5;
}


.dxnsf-cart-state--error {
    color:
        var(--dxnsf-error);
}


/* =========================================================
   CART LINES
   ========================================================= */

.dxnsf-cart-lines {
    display: grid;

    gap: 10px;
}


.dxnsf-cart-line {
    display: grid;

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

    gap: 13px;

    padding: 12px;

    border:
        1px solid
        var(--dxnsf-border);

    border-radius: 16px;

    background:
        var(--dxnsf-white);
}


.dxnsf-cart-line.is-unresolved {
    grid-template-columns: 1fr;

    background:
        rgba(200, 90, 90, 0.05);
}


.dxnsf-cart-line__image {
    display: grid;
    place-items: center;

    width: 74px;
    height: 74px;

    overflow: hidden;

    border-radius: 11px;

    background:
        rgba(127, 167, 139, 0.08);

    color:
        var(--dxnsf-primary);

    text-decoration: none;
}


.dxnsf-cart-line__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.dxnsf-cart-line__content {
    min-width: 0;
}


.dxnsf-cart-line__type {
    display: block;

    margin-bottom: 3px;

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

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color:
        var(--dxnsf-secondary);
}


.dxnsf-cart-line__title {
    display: block;

    color:
        var(--dxnsf-primary);

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

    line-height: 1.3;

    text-decoration: none;
}


.dxnsf-cart-line__title:hover {
    text-decoration: underline;
}


.dxnsf-cart-line__meta {
    margin:
        4px
        0
        0;

    font-size: 11px;
    line-height: 1.4;

    color:
        var(--dxnsf-muted);
}


.dxnsf-cart-line__warning {
    margin:
        7px
        0
        0;

    font-size: 11px;
    font-weight: 600;

    color:
        var(--dxnsf-error);
}


/* =========================================================
   BUNDLE CONTENTS
   ========================================================= */

.dxnsf-cart-bundle-details {
    margin-top: 8px;
}


.dxnsf-cart-bundle-details summary {
    width: fit-content;

    color:
        var(--dxnsf-primary);

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.dxnsf-cart-bundle-components {
    display: grid;

    gap: 3px;

    margin:
        7px
        0
        0;

    padding:
        0
        0
        0
        16px;

    font-size: 11px;

    color:
        var(--dxnsf-muted);
}


/* =========================================================
   LINE CONTROLS
   ========================================================= */

.dxnsf-cart-line__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-top: 11px;
}


.dxnsf-cart-line__price {
    flex: 0 0 auto;

    color:
        var(--dxnsf-primary);

    font-size: 14px;
}


.dxnsf-cart-qty {
    display: grid;

    grid-template-columns:
        32px
        64px
        32px;

    overflow: hidden;

    border:
        1px solid
        var(--dxnsf-border);

    border-radius: 9px;
}


.dxnsf-cart-qty__button {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--dxnsf-primary);

    font-size: 16px;

    cursor: pointer;
}


.dxnsf-cart-qty__button:hover {
    background:
        rgba(127, 167, 139, 0.10);
}


.dxnsf-cart-qty__input {
    box-sizing: border-box;

    width: 48px;
    min-width: 48px;
    height: 32px;

    padding: 0 4px;

    border: 0;
    border-left:
        1px solid
        var(--dxnsf-border);
    border-right:
        1px solid
        var(--dxnsf-border);

    outline: 0;

    background: transparent;

    text-align: center;

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 32px;

    color:
        var(--dxnsf-primary);

    appearance: textfield;
}


.dxnsf-cart-qty__input::-webkit-inner-spin-button,
.dxnsf-cart-qty__input::-webkit-outer-spin-button {
    appearance: none;

    margin: 0;
}


.dxnsf-cart-line__remove {
    margin-top: 8px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--dxnsf-muted);

    font-size: 10px;

    text-decoration: underline;

    text-underline-offset: 2px;

    cursor: pointer;
}


/* =========================================================
   FOOTER
   ========================================================= */

.dxnsf-cart-drawer__footer {
    flex: 0 0 auto;

    padding:
        17px
        20px
        max(
            17px,
            env(safe-area-inset-bottom)
        );

    border-top:
        1px solid
        var(--dxnsf-border);

    background:
        var(--dxnsf-bg);
}


.dxnsf-cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    gap: 20px;
}


.dxnsf-cart-drawer__subtotal span {
    font-size: 12px;
    font-weight: 600;

    color:
        var(--dxnsf-muted);
}


.dxnsf-cart-drawer__subtotal strong {
    font-size: 20px;

    color:
        var(--dxnsf-primary);
}


.dxnsf-cart-drawer__message {
    min-height: 16px;

    margin:
        8px
        0
        11px;

    font-size: 10px;
    line-height: 1.4;

    color:
        var(--dxnsf-muted);
}


.dxnsf-cart-drawer__checkout {
    width: 100%;
    min-height: 48px;

    border: 0;
    border-radius: 11px;

    background:
        var(--dxnsf-accent);

    color:
        var(--dxnsf-primary);

    font: inherit;
    font-size: 14px;
    font-weight: 700;
}


.dxnsf-cart-drawer__checkout:disabled {
    opacity: 0.46;

    cursor: not-allowed;
}


.dxnsf-cart-drawer__legal {
    margin:
        9px
        0
        0;

    font-size: 9px;
    line-height: 1.4;

    color:
        var(--dxnsf-muted);
}


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

@media (max-width: 520px) {

    .dxnsf-cart-drawer {
        width: 100vw;
    }


    .dxnsf-cart-drawer__header {
        padding:
            18px
            16px
            15px;
    }


    .dxnsf-cart-drawer__body {
        padding:
            12px
            12px
            18px;
    }


    .dxnsf-cart-drawer__footer {
        padding-left: 15px;
        padding-right: 15px;
    }


    .dxnsf-cart-line {
        grid-template-columns:
            62px
            minmax(0, 1fr);

        gap: 11px;

        padding: 10px;
    }


    .dxnsf-cart-line__image {
        width: 62px;
        height: 62px;
    }


    .dxnsf-cart-launcher:not(.is-mounted) {
        right: 14px;

        bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }

}

.dxnsf-cart-refresh-overlay {
    position: absolute;
    inset: 0;

    z-index: 5;

    display: grid;
    place-items: center;

    background:
        rgba(250, 248, 243, 0.58);

    backdrop-filter:
        blur(1.5px);

    pointer-events: none;
}


.dxnsf-cart-refresh-overlay[hidden] {
    display: none;
}


.dxnsf-cart-refresh-spinner {
    width: 26px;
    height: 26px;

    border:
        2px solid
        rgba(46, 94, 78, 0.18);

    border-top-color:
        var(--dxnsf-primary);

    border-radius: 50%;

    animation:
        dxnsf-cart-spin
        650ms
        linear
        infinite;
}


@keyframes dxnsf-cart-spin {
    to {
        transform: rotate(360deg);
    }
}

.dxnsf-cart-drawer__checkout.is-loading {
    position: relative;

    cursor: wait;
}


.dxnsf-cart-drawer__checkout.is-loading::after {
    content: "";

    display: inline-block;

    width: 13px;
    height: 13px;

    margin-left: 9px;

    vertical-align: -2px;

    border:
        2px solid
        rgba(46, 94, 78, 0.22);

    border-top-color:
        var(--dxnsf-primary);

    border-radius: 50%;

    animation:
        dxnsf-cart-spin
        650ms
        linear
        infinite;
}

/* =========================================================
   HEADER CART MOUNT ALIGNMENT
   ========================================================= */

[data-dxnsf-cart-mount] {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    line-height: 1;
}


[data-dxnsf-cart-mount]
.dxnsf-cart-launcher.is-mounted {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;

    margin: 0;
    padding: 0;

    vertical-align: middle;
}

/* =========================================================
   UI POLISH 04
   CART DRAWER
   ========================================================= */


/* ---------------------------------------------------------
   DRAWER HEADER
   --------------------------------------------------------- */

.dxnsf-cart-drawer__header {
    padding:
        20px
        20px
        16px;
}


.dxnsf-cart-drawer__close {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}


.dxnsf-cart-drawer__close:hover {
    background:
        rgba(127, 167, 139, 0.09);

    border-color:
        rgba(46, 94, 78, 0.25);
}


.dxnsf-cart-drawer__close:active {
    transform: scale(0.96);
}


/* ---------------------------------------------------------
   SCROLL AREA
   --------------------------------------------------------- */

.dxnsf-cart-drawer__body {
    padding:
        12px
        16px
        18px;
}


.dxnsf-cart-lines {
    gap: 9px;
}


/* ---------------------------------------------------------
   CART LINE
   --------------------------------------------------------- */

.dxnsf-cart-line {
    grid-template-columns:
        68px
        minmax(0, 1fr);

    gap: 12px;

    padding: 11px;

    border-radius: 14px;

    box-shadow:
        0 3px 14px
        rgba(31, 58, 48, 0.025);
}


.dxnsf-cart-line__image {
    width: 68px;
    height: 68px;

    border-radius: 10px;
}


.dxnsf-cart-line__title {
    font-size: 13px;
    line-height: 1.32;
}


.dxnsf-cart-line__meta {
    margin-top: 3px;

    font-size: 10.5px;
}


.dxnsf-cart-line__bottom {
    gap: 10px;

    margin-top: 9px;
}


.dxnsf-cart-line__price {
    font-size: 13px;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   QUANTITY
   --------------------------------------------------------- */

/*
 * Korábban a grid középső oszlopa 64px volt,
 * miközben maga az input 48px.
 *
 * Legyen ténylegesen 32 / 48 / 32.
 */
.dxnsf-cart-qty {
    grid-template-columns:
        32px
        64px
        32px;

    border-radius: 8px;
}


.dxnsf-cart-qty__input {
    width: 64px;
    min-width: 64px;
}


.dxnsf-cart-qty__button {
    transition:
        background-color 140ms ease;
}


.dxnsf-cart-qty__button:active {
    background:
        rgba(127, 167, 139, 0.16);
}


/* ---------------------------------------------------------
   REMOVE
   --------------------------------------------------------- */

.dxnsf-cart-line__remove {
    margin-top: 7px;

    font-size: 9.5px;

    opacity: 0.82;

    transition:
        opacity 140ms ease,
        color 140ms ease;
}


.dxnsf-cart-line__remove:hover {
    opacity: 1;

    color:
        var(--dxnsf-error);
}


/* ---------------------------------------------------------
   BUNDLE CONTENTS
   --------------------------------------------------------- */

.dxnsf-cart-bundle-details {
    margin-top: 7px;
}


.dxnsf-cart-bundle-details summary {
    padding:
        3px
        7px;

    border-radius: 999px;

    background:
        rgba(127, 167, 139, 0.09);

    font-size: 10px;

    list-style-position: inside;
}


.dxnsf-cart-bundle-details[open] summary {
    background:
        rgba(127, 167, 139, 0.14);
}


.dxnsf-cart-bundle-components {
    gap: 4px;

    margin-top: 6px;

    padding:
        7px
        8px
        7px
        20px;

    border-left:
        2px solid
        rgba(127, 167, 139, 0.22);

    background:
        rgba(127, 167, 139, 0.035);

    font-size: 10px;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.dxnsf-cart-drawer__footer {
    position: relative;

    padding:
        15px
        20px
        max(
            15px,
            env(safe-area-inset-bottom)
        );

    box-shadow:
        0 -10px 28px
        rgba(30, 50, 42, 0.045);
}


.dxnsf-cart-drawer__subtotal strong {
    font-size: 21px;

    font-variant-numeric:
        tabular-nums;
}


.dxnsf-cart-drawer__message {
    margin:
        7px
        0
        10px;
}


.dxnsf-cart-drawer__checkout {
    min-height: 49px;

    cursor: pointer;

    transition:
        transform 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease;
}


.dxnsf-cart-drawer__checkout:not(:disabled):hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(200, 155, 60, 0.18);
}


.dxnsf-cart-drawer__checkout:not(:disabled):active {
    transform: translateY(0);
}


/* ---------------------------------------------------------
   SHORT DESKTOP / LAPTOP VIEWPORT
   --------------------------------------------------------- */

@media
    (min-width: 521px)
    and (max-height: 780px) {

    .dxnsf-cart-drawer__header {
        padding:
            15px
            18px
            12px;
    }


    .dxnsf-cart-drawer__header h2 {
        font-size: 26px;
    }


    .dxnsf-cart-drawer__body {
        padding:
            10px
            14px
            14px;
    }


    .dxnsf-cart-drawer__footer {
        padding:
            12px
            18px
            13px;
    }


    .dxnsf-cart-drawer__legal {
        margin-top: 6px;

        font-size: 8.5px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 520px) {

    .dxnsf-cart-line {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 10px;

        padding: 10px;
    }


    .dxnsf-cart-line__image {
        width: 58px;
        height: 58px;
    }


    .dxnsf-cart-drawer__subtotal strong {
        font-size: 19px;
    }

}

/* =========================================================
   CART DRAWER CLOSE ICON
   ========================================================= */

.dxnsf-cart-drawer__close {
    position: relative;

    display: grid;
    place-items: center;

    width: 36px;
    min-width: 36px;
    height: 36px;

    padding: 0;

    font-size: 0;
    line-height: 1;
}


/*
 * Saját X ikon.
 * Nem függ fonttól / baseline-tól.
 */
.dxnsf-cart-drawer__close::before,
.dxnsf-cart-drawer__close::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 13px;
    height: 1.5px;

    border-radius: 999px;

    background:
        var(--dxnsf-primary);

    transform-origin: center;
}


.dxnsf-cart-drawer__close::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.dxnsf-cart-drawer__close::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}