#thp-quantity-selector,
#thp-quantity-selector * {
    box-sizing: border-box;
}


/* =====================================================
   ZAKLAD MODULU
   ===================================================== */

.thp-qty {
    --thp-green: #b9ceac;
    --thp-green-mid: #92af7e;
    --thp-green-dark: #355126;
    --thp-green-soft: #edf3e9;

    /* Zvyraznena zlava (>= 15 %) */
    --thp-red: #b3261e;
    --thp-red-soft: #fdeaea;
    --thp-red-ring: rgba(179, 38, 30, .22);

    --thp-bg: #fafcf8;
    --thp-border: #d7e0d2;
    --thp-card-border: #dddddd;

    --thp-text: #171717;
    --thp-muted: #444;

    container-type: inline-size;

    width: 100%;
    margin: 20px 0 28px;
    padding: 18px 19px 17px;

    border: 1px solid var(--thp-border);
    border-radius: 10px;

    background: var(--thp-bg);
    color: var(--thp-text) !important;

    font-family: inherit;
}


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

.thp-qty__header {
    display: grid !important;

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

    align-items: center !important;

    column-gap: 14px;

    margin: 0 0 20px !important;
}


.thp-qty__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50%;

    background: var(--thp-green-soft);

    color: var(--thp-green-dark) !important;
}


.thp-qty__icon svg {
    width: 28px;
    height: 28px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.thp-qty__header > div {
    display: block !important;

    min-width: 0;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.thp-qty__title {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    color: #111 !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}


.thp-qty__subtitle {
    display: block;

    margin: 4px 0 0 !important;
    padding: 0 !important;

    color: var(--thp-muted) !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}


/* =====================================================
   GRID KARIET
   ===================================================== */

.thp-qty__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* =====================================================
   KARTA
   ===================================================== */

.thp-qty-card {
    position: relative;

    display: grid !important;

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

    column-gap: 12px;
    align-items: start;

    width: 100%;
    min-width: 0;

    min-height: 170px;

    margin: 0;

    padding:
        34px
        15px
        17px
        16px;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid var(--thp-card-border);
    border-radius: 9px;

    background: #fff;

    color: var(--thp-text) !important;

    font: inherit;

    text-align: left;
    text-transform: none;

    cursor: pointer;

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


.thp-qty-card:hover {
    border-color: #aabe9e;
}


.thp-qty-card.is-selected {
    border: 1.5px solid var(--thp-green-mid);

    box-shadow:
        0 0 0 1px rgba(146, 175, 126, .07);
}


/* =====================================================
   RADIO
   ===================================================== */

.thp-qty-card__radio {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    grid-column: 1;
    grid-row: 1;

    align-self: start;

    width: 19px;
    height: 19px;

    margin: 1px 0 0;

    border: 1.5px solid #bdbdbd;
    border-radius: 50%;

    background: #fff;
}


.thp-qty-card.is-selected
.thp-qty-card__radio {
    border-color: var(--thp-green-mid);
}


.thp-qty-card.is-selected
.thp-qty-card__radio::after {
    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 50%;

    background: var(--thp-green-mid);
}


/* =====================================================
   OBSAH KARTY
   ===================================================== */

.thp-qty-card__content {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


.thp-qty-card__name {
    display: block;

    min-height: 38px;

    margin: 0;
    padding: 0;

    color: #151515 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* =====================================================
   CENA
   ===================================================== */

.thp-qty-card__pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-top: 7px;
}


.thp-qty-card__total {
    display: block;

    color: #111 !important;

    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    white-space: nowrap;
}


.thp-qty-card__total small {
    color: #555 !important;

    font-size: 11px !important;
    font-weight: 400 !important;
}


.thp-qty-card__unit {
    display: block;

    margin-top: 4px;

    color: #424242 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}


/* =====================================================
   ZLAVA
   ===================================================== */

.thp-qty-card__discount {
    display: inline-flex;

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

    margin-top: 10px;

    padding:
        6px
        13px;

    border-radius: 20px;

    background: #e2ecdc;

    color: var(--thp-green-dark) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    white-space: nowrap;
}


/* =====================================================
   ZLAVA - ZVYRAZNENA (>= 15 %)

   Triedu prida JS, ked je
   tier.discount >= CONFIG.highlightDiscountFrom.
   ===================================================== */

.thp-qty-card__discount--strong {
    background: var(--thp-red-soft);

    color: var(--thp-red) !important;

    box-shadow:
        inset 0 0 0 1px var(--thp-red-ring);
}


/* =====================================================
   BADGE LISTA

   Oba badge sedia v jednom riadku nad kartou.
   Flex + gap = nikdy sa neprekryju,
   a ked sa nezmestia, zalomia sa pod seba.
   ===================================================== */

.thp-qty-card__badges {
    position: absolute !important;

    z-index: 5;

    top: -16px;
    right: 8px;
    left: 8px;

    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;
    align-items: center;

    gap: 6px;

    margin: 0;
    padding: 0;

    /*
    Karta je <button>, badge nesmu
    prekazat kliknutiu.
    */
    pointer-events: none;
}


/* =====================================================
   BADGE - NAJVYHODNEJSIE
   ===================================================== */

.thp-qty-card__best {
    display: inline-flex;

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

    padding:
        8px
        14px;

    border-radius: 20px;

    background: var(--thp-green);

    color: var(--thp-green-dark) !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* =====================================================
   BADGE - DOPRAVA ZADARMO
   ===================================================== */

.thp-qty-card__shipping {
    display: inline-flex;

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

    padding:
        8px
        14px;

    border-radius: 20px;

    background: var(--thp-green-mid);

    color: #fff !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* =====================================================
   CLAIM
   ===================================================== */

.thp-qty__claim {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-top: 17px;

    color: var(--thp-muted) !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}


.thp-qty__claim-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        25px;

    width: 25px;
    height: 25px;

    margin-top: 0;

    color: var(--thp-green-dark) !important;
}


.thp-qty__claim-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.thp-qty__claim-nowrap {
    display: inline-block;

    white-space: nowrap;
}


/* =====================================================
   POVODNY SHOPTET BLOK
   ===================================================== */

.thp-qty-native-hidden {
    display: none !important;
}


/* =====================================================
   UZSI DESKTOP / TABLET

   Karta je prilis uzka na to, aby sa oba badge
   zmestili vedla seba. Ulozia sa teda pod seba
   k pravemu okraju a karta dostane viac miesta
   zhora, aby na nic nenabiehali.
   ===================================================== */

@container (max-width: 927px) and (min-width: 431px) {

    .thp-qty-card {
        padding-top: 52px;
    }


    .thp-qty-card__badges {
        flex-direction: column;

        align-items: flex-end;

        gap: 6px;
    }

}


/* =====================================================
   STREDNE UZKY PRODUCT COLUMN
   ===================================================== */

@container (max-width: 620px) and (min-width: 431px) {

    .thp-qty__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    .thp-qty-card:nth-child(3) {
        grid-column:
            1
            /
            -1;
    }


    .thp-qty-card:nth-child(3)
    .thp-qty-card__content {
        display: grid;

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

        align-items: center;

        column-gap: 28px;
    }


    .thp-qty-card:nth-child(3)
    .thp-qty-card__name {
        min-height: 0;
    }


    .thp-qty-card:nth-child(3)
    .thp-qty-card__pricing {
        margin-top: 0;
    }

}


/* =====================================================
   MOBIL
   ===================================================== */

@container (max-width: 430px) {

    .thp-qty {
        margin:
            17px
            0
            22px;

        padding:
            15px
            13px
            17px;
    }


    /* HEADER */

    .thp-qty__header {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        column-gap: 12px;

        margin-bottom:
            20px !important;
    }


    .thp-qty__icon {
        width: 48px;
        height: 48px;
    }


    .thp-qty__icon svg {
        width: 26px;
        height: 26px;
    }


    .thp-qty__title {
        font-size: 16px !important;
    }


    .thp-qty__subtitle {
        margin-top:
            3px !important;

        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }


    /* GRID */

    .thp-qty__grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    /* CARD */

    .thp-qty-card {
        grid-template-columns:
            20px
            minmax(0, 1fr);

        column-gap: 14px;

        min-height: 112px;

        padding:
            28px
            14px
            17px
            20px;
    }


    .thp-qty-card__radio {
        margin-top: 2px;
    }


    /* CONTENT */

    .thp-qty-card__content {
        display: grid;

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

        align-items: start;

        gap: 12px;
    }


    .thp-qty-card__name {
        min-height: 0;

        padding-top: 1px;

        font-size: 14px !important;
        line-height: 1.4 !important;
    }


    .thp-qty-card__pricing {
        margin-top: 0;
    }


    .thp-qty-card__total {
        font-size: 18px !important;
    }


    .thp-qty-card__unit {
        font-size: 11.5px !important;
    }


    .thp-qty-card__discount {
        margin-top: 7px;

        padding:
            5px
            11px;

        font-size: 12px !important;
    }


    /* BADGES */

    .thp-qty-card__badges {
        top: -15px;

        right: 16px;
        left: 16px;

        gap: 6px;
    }


    .thp-qty-card__best,
    .thp-qty-card__shipping {
        padding:
            8px
            15px;

        border-radius: 20px;

        font-size: 11.5px !important;
    }


    /* CLAIM */

    .thp-qty__claim {
        gap: 10px;

        margin-top: 17px;

        font-size: 13px !important;
        line-height: 1.6 !important;
    }


    .thp-qty__claim-icon {
        flex-basis: 24px;

        width: 24px;
        height: 24px;
    }


    .thp-qty__claim-icon svg {
        width: 24px;
        height: 24px;
    }

}


/* =====================================================
   VELMI MALY MOBIL
   ===================================================== */

@container (max-width: 350px) {

    .thp-qty-card {
        grid-template-columns:
            19px
            minmax(0, 1fr);

        column-gap: 11px;

        padding-left: 17px;
    }


    .thp-qty-card__content {
        grid-template-columns:
            minmax(0, 1fr)
            120px;

        gap: 8px;
    }


    .thp-qty-card__name {
        font-size: 13px !important;
    }


    .thp-qty-card__total {
        font-size: 17px !important;
    }


    .thp-qty__subtitle,
    .thp-qty__claim {
        font-size: 12.5px !important;
    }


    .thp-qty-card__badges {
        top: -14px;

        right: 9px;
        left: 9px;

        gap: 4px;
    }


    .thp-qty-card__best,
    .thp-qty-card__shipping {
        padding:
            6px
            9px;

        border-radius: 20px;

        font-size: 9.5px !important;
    }

}