/* ==========================================================
   SHOP THE LOOK – SKRYTÝ ZDROJ
   ========================================================== */

.js-shop-the-look-source,
#description .js-shop-the-look-source {
    display: none !important;
    visibility: hidden !important;
}


/* ==========================================================
   SHOP THE LOOK – HLAVNÍ SEKCE
   ========================================================== */

.shop-the-look {
    width: 100%;
    margin: 80px 0 100px;
    padding: 0;

    color: #171717;
    background: transparent;
}

.shop-the-look__container {
    width: min(1380px, calc(100% - 60px));
    margin: 0 auto;
}


/* ==========================================================
   NADPIS
   ========================================================== */

.shop-the-look__heading {
    display: block;
    width: 100%;

    margin: 0 0 40px;
    padding: 0;

    color: #365b4a;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;

    text-align: center;
    text-transform: none;
}

.shop-the-look__heading::after {
    content: ".";

    margin-left: 1px;

    color: #e83e76;
}


/* ==========================================================
   DESKTOP – ROZLOŽENÍ
   ========================================================== */

.shop-the-look__layout {
    display: grid;

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

    gap: 22px;
    align-items: stretch;
}

.shop-the-look__visual {
    position: relative;

    min-width: 0;
    min-height: 660px;

    overflow: hidden;

    background: #f7f7f7;
}

.shop-the-look__main-image {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 660px;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   PRODUKTOVÁ ČÁST
   ========================================================== */

.shop-the-look__product-area {
    min-width: 0;
    overflow: hidden;
}

.shop-the-look__product-area .shkProductSlider,
.shop-the-look__product-area .shk-products {
    width: 100% !important;
    height: 100% !important;

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

    overflow: visible !important;
}

.shop-the-look__product-area .products-block {
    display: grid !important;

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

    align-content: start;
    align-items: stretch;

    gap: 42px 14px;

    width: 100% !important;
    height: auto !important;

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

    left: auto !important;
    right: auto !important;

    transform: none !important;
    translate: none !important;
}


/* ==========================================================
   PRODUKTOVÁ KARTA
   ========================================================== */

.shop-the-look__product-area .product {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;

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

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.shop-the-look__product-area .product .p {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

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

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.shop-the-look__quick-view-trigger {
    cursor: pointer;
}

.shop-the-look__quick-view-trigger:focus-visible {
    outline: 2px solid #e83e76;
    outline-offset: 4px;
}


/* ==========================================================
   OBRÁZEK PRODUKTU
   ========================================================== */

.shop-the-look__product-area .product .image {
    position: relative;
    display: block;

    flex: 0 0 auto;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;

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

    overflow: hidden;

    background: #fafafa;
}

.shop-the-look__product-area .product .image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

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

    object-fit: contain;

    transition: transform 0.3s ease;
}

.shop-the-look__product-area .product:hover .image img {
    transform: scale(1.025);
}


/* ==========================================================
   TEXTOVÁ ČÁST KARTY
   ========================================================== */

.shop-the-look__product-area .p-in {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

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

    border: 0 !important;
    background: transparent !important;
}

.shop-the-look__product-area .p-in-in {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

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

    border: 0 !important;
    background: transparent !important;
}

.shop-the-look__product-area .name {
    display: -webkit-box;

    width: 100%;
    height: 38px;
    min-height: 38px;
    max-height: 38px;

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

    overflow: hidden;

    color: #111 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 19px !important;

    text-align: left !important;
    text-decoration: none !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shop-the-look__product-area .name:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.shop-the-look__product-area .p-desc,
.shop-the-look__product-area .p-description,
.shop-the-look__product-area .description {
    display: -webkit-box !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 0 7px !important;

    overflow: hidden !important;

    font-size: 12px !important;
    line-height: 17px !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


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

.shop-the-look__product-area .p-bottom {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

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

    border: 0 !important;
    background: transparent !important;
}

.shop-the-look__product-area .prices,
.shop-the-look__product-area .price-final {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 6px;

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

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

    color: inherit !important;

    text-align: left !important;
}

.shop-the-look__product-area .price-final,
.shop-the-look__product-area .price-final strong,
.shop-the-look__product-area .price-final-holder {
    color: inherit !important;

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

.shop-the-look__product-area .price-standard {
    color: #555 !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    text-decoration: line-through !important;
}


/* ==========================================================
   TLAČÍTKO DETAIL – BÍLÉ POZADÍ
   ========================================================== */

.shop-the-look__product-area .p-tools,
.shop-the-look__product-area .p-tools-wrapper {
    display: block !important;

    width: 100% !important;

    margin: auto 0 0 !important;
    padding: 16px 0 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.shop-the-look__product-area .shop-the-look__detail-button,
.shop-the-look__product-area .p-tools .btn,
.shop-the-look__product-area .p-tools button,
.shop-the-look__product-area .p-tools a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    border: 1px solid #e83e76 !important;
    border-radius: 999px !important;

    color: #e83e76 !important;
    background-color: #ffffff !important;
    background-image: none !important;

    opacity: 1 !important;
    visibility: visible !important;

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

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
}

.shop-the-look__product-area .shop-the-look__detail-button:hover,
.shop-the-look__product-area .p-tools .btn:hover,
.shop-the-look__product-area .p-tools button:hover,
.shop-the-look__product-area .p-tools a:hover {
    color: #ffffff !important;
    background-color: #e83e76 !important;
    background-image: none !important;

    opacity: 1 !important;
}


/* ==========================================================
   SKRYTÉ PRVKY KARTY
   ========================================================== */

.shop-the-look__product-area .ratings-wrapper,
.shop-the-look__product-area .stars-wrapper,
.shop-the-look__product-area .availability,
.shop-the-look__product-area .availability-label,
.shop-the-look__product-area .availability-amount,
.shop-the-look__product-area .quantity,
.shop-the-look__product-area .flags-default,
.shop-the-look__product-area .flags-extra,
.shop-the-look__product-area .flag,
.shop-the-look__product-area .price-save,
.shop-the-look__product-area .price-additional,
.shop-the-look__product-area .product-hover-video,
.shop-the-look__product-area .shkDiscountPromoProduct,
.shop-the-look__product-area .dkLabFavouriteDiv,
.shop-the-look__product-area .navigation,
.shop-the-look__product-area .slider-navigation,
.shop-the-look__product-area .slick-arrow,
.shop-the-look__product-area .swiper-button-prev,
.shop-the-look__product-area .swiper-button-next,
.shop-the-look__product-area .shop-the-look__detail-button svg,
.shop-the-look__product-area .shop-the-look__detail-button i {
    display: none !important;
}

.shop-the-look__product-area .product:hover,
.shop-the-look__product-area .product:hover .p {
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   MODAL – UZAMČENÍ STRÁNKY
   ========================================================== */

html.stl-modal-open,
body.stl-modal-open {
    overflow: hidden !important;
}


/* ==========================================================
   MODAL – HLAVNÍ KONTEJNER
   ========================================================== */

.stl-quick-view[hidden] {
    display: none !important;
}

.stl-quick-view {
    position: fixed;
    z-index: 999999;

    inset: 0;

    width: 100%;
    height: 100%;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
}

.stl-quick-view__overlay {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 24px;

    overflow-y: auto;

    background: rgba(17, 17, 17, 0.62);

    opacity: 0;

    transition: opacity 0.22s ease;
}

.stl-quick-view--open .stl-quick-view__overlay {
    opacity: 1;
}

.stl-quick-view__dialog {
    position: relative;

    width: min(1160px, 100%);
    max-height: calc(100vh - 48px);

    margin: auto;

    overflow: auto;

    color: #171717;
    background: #ffffff;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.24);

    opacity: 0;

    transform:
        translateY(16px)
        scale(0.985);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.stl-quick-view--open .stl-quick-view__dialog {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   MODAL – ZAVÍRACÍ TLAČÍTKO
   ========================================================== */

.stl-quick-view__close {
    position: absolute;
    z-index: 5;

    top: 18px;
    right: 18px;

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

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #171717;
    background: rgba(255, 255, 255, 0.92);

    cursor: pointer;
}

.stl-quick-view__close:hover {
    background: #f5f1eb;
}

.stl-quick-view__close:focus-visible {
    outline: 2px solid #e83e76;
    outline-offset: 2px;
}

.stl-quick-view__close span,
.stl-quick-view__close span::before {
    position: absolute;

    width: 24px;
    height: 2px;

    content: "";

    background: currentColor;
}

.stl-quick-view__close span {
    transform: rotate(45deg);
}

.stl-quick-view__close span::before {
    left: 0;
    top: 0;

    transform: rotate(90deg);
}


/* ==========================================================
   MODAL – ROZLOŽENÍ
   ========================================================== */

.stl-quick-view__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    min-height: 610px;
}

.stl-quick-view__media {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 60px;

    background: #fafafa;
}

.stl-quick-view__image {
    display: block;

    width: 100%;
    max-width: 560px;
    height: auto;
    max-height: 540px;

    object-fit: contain;
}

.stl-quick-view__info {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 46px 40px 42px;
}


/* ==========================================================
   MODAL – ZÁLOŽKY
   ========================================================== */

.stl-quick-view__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: min(350px, calc(100% - 54px));

    margin: 0 auto 32px;

    border: 1px solid #ddd7d1;
    border-radius: 999px;

    overflow: hidden;
}

.stl-quick-view__tab {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 14px;

    color: #4a4a4a;
    background: #ffffff;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.stl-quick-view__tab:hover {
    color: #365b4a;
    text-decoration: none;
}

.stl-quick-view__tab--active {
    color: #ffffff;
    background: #e7b5bb;
}


/* ==========================================================
   MODAL – NÁZEV A CENA
   ========================================================== */

.stl-quick-view__headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 22px;

    margin: 0 0 22px;
}

.stl-quick-view__title {
    flex: 1 1 auto;

    margin: 0;
    padding: 0;

    color: #171717;

    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.stl-quick-view__prices {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;

    gap: 7px;

    padding-top: 3px;

    text-align: right;
    white-space: nowrap;
}

.stl-quick-view__standard-price {
    color: #666;

    font-size: 13px;

    text-decoration: line-through;
}

.stl-quick-view__final-price {
    color: #e83e76;

    font-size: 15px;
    font-weight: 600;
}


/* ==========================================================
   MODAL – POPIS
   ========================================================== */

.stl-quick-view__description {
    margin: 0 0 22px;

    color: #555;

    font-size: 14px;
    line-height: 1.55;
}

.stl-quick-view__description p {
    margin: 0 0 8px !important;

    color: inherit !important;

    font-size: inherit !important;
    line-height: inherit !important;
}

.stl-quick-view__description p:last-child {
    margin-bottom: 0 !important;
}

.stl-quick-view__description a {
    color: #365b4a;
}


/* ==========================================================
   MODAL – FORMULÁŘ A VARIANTY
   ========================================================== */

.stl-quick-view__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;

    margin: 0;
}

.stl-quick-view__variants {
    display: grid;

    gap: 18px;

    width: 100%;

    margin: 0 0 22px;
}

.stl-quick-view__variant {
    display: grid;
    gap: 8px;
}

.stl-quick-view__variant > label {
    margin: 0;

    color: #171717;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.stl-quick-view__select-wrapper {
    position: relative;
}

.stl-quick-view__select-wrapper::after {
    position: absolute;

    top: 50%;
    right: 18px;

    width: 8px;
    height: 8px;

    content: "";

    border-right: 1px solid #365b4a;
    border-bottom: 1px solid #365b4a;

    pointer-events: none;

    transform:
        translateY(-70%)
        rotate(45deg);
}

.stl-quick-view__variant select {
    display: block;

    width: 100%;
    min-height: 52px;

    margin: 0;
    padding: 12px 48px 12px 16px;

    border: 1px solid #cbc7c1;
    border-radius: 8px;

    color: #171717;
    background: #ffffff;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}

.stl-quick-view__variant select:hover,
.stl-quick-view__variant select:focus {
    border-color: #365b4a;
}

.stl-quick-view__variant select:focus {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(54, 91, 74, 0.13);
}


/* ==========================================================
   MODAL – DOSTUPNOST
   ========================================================== */

.stl-quick-view__stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px 18px;

    margin: 0 0 18px;
    padding: 14px 0;

    border-top: 1px solid #ddd7d1;
    border-bottom: 1px solid #ddd7d1;
}

.stl-quick-view__availability {
    color: #365b4a;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
}

.stl-quick-view__delivery {
    color: #666;

    font-size: 12px;
    line-height: 1.3;
}


/* ==========================================================
   MODAL – STAVOVÁ ZPRÁVA KOŠÍKU
   ========================================================== */

.stl-quick-view__message:empty,
.stl-quick-view__message[hidden] {
    display: none !important;
}

.stl-quick-view__message {
    display: block;

    width: 100%;

    margin: 0 0 16px;
    padding: 11px 14px;

    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;

    text-align: center;
}

.stl-quick-view__message--loading {
    color: #365b4a;
    background: #f1f5f2;
}

.stl-quick-view__message--success {
    color: #245239;
    background: #e7f5eb;
}

.stl-quick-view__message--error {
    color: #8d273d;
    background: #fae9ed;
}


/* ==========================================================
   MODAL – MNOŽSTVÍ A KOŠÍK
   ========================================================== */

.stl-quick-view__buy-row {
    display: grid;

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

    gap: 12px;

    width: 100%;

    margin-top: auto;
}

.stl-quick-view__quantity {
    display: grid;

    gap: 6px;

    margin: 0;
}

.stl-quick-view__quantity > span {
    color: #555;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.stl-quick-view__quantity input {
    width: 100%;
    min-height: 50px;

    margin: 0;
    padding: 10px;

    border: 1px solid #cbc7c1;
    border-radius: 8px;

    color: #171717;
    background: #ffffff;

    font-family: inherit;
    font-size: 15px;

    text-align: center;
}

.stl-quick-view__quantity input:focus {
    outline: none;

    border-color: #e83e76;

    box-shadow:
        0 0 0 3px rgba(232, 62, 118, 0.13);
}


/* ==========================================================
   MODAL – RŮŽOVÉ TLAČÍTKO PŘIDAT DO KOŠÍKU
   ========================================================== */

.stl-quick-view__submit,
.stl-quick-view__submit.btn,
.stl-quick-view__submit.btn-conversion,
.stl-quick-view__submit.add-to-cart-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 50px !important;

    margin: 18px 0 0 !important;
    padding: 12px 20px !important;

    border: 1px solid #e83e76 !important;
    border-radius: 999px !important;

    color: #ffffff !important;
    background-color: #e83e76 !important;
    background-image: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.06em !important;

    text-align: center !important;
    text-transform: uppercase !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.stl-quick-view__submit:hover,
.stl-quick-view__submit.btn:hover,
.stl-quick-view__submit.btn-conversion:hover,
.stl-quick-view__submit.add-to-cart-button:hover {
    border-color: #cf2f68 !important;

    color: #ffffff !important;
    background-color: #cf2f68 !important;
    background-image: none !important;

    transform: translateY(-1px);
}

.stl-quick-view__submit:active {
    transform: translateY(0);
}

.stl-quick-view__submit:focus-visible {
    outline: 2px solid #e83e76;
    outline-offset: 3px;
}

.stl-quick-view__submit:disabled {
    cursor: wait;

    opacity: 0.72 !important;
    transform: none;
}

.stl-quick-view__submit--success,
.stl-quick-view__submit--success:hover {
    border-color: #2e6b49 !important;

    color: #ffffff !important;
    background-color: #2e6b49 !important;
    background-image: none !important;

    opacity: 1 !important;
    transform: none;
}


/* ==========================================================
   MODAL – LOADER A CHYBA
   ========================================================== */

.stl-quick-view__loading,
.stl-quick-view__error {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 16px;

    min-height: 520px;

    padding: 50px;

    color: #365b4a;

    text-align: center;
}

.stl-quick-view__spinner {
    width: 42px;
    height: 42px;

    border:
        3px solid rgba(54, 91, 74, 0.18);

    border-top-color: #365b4a;
    border-radius: 50%;

    animation:
        stlQuickViewSpin
        0.8s linear infinite;
}

@keyframes stlQuickViewSpin {
    to {
        transform: rotate(360deg);
    }
}

.stl-quick-view__error strong {
    color: #171717;
    font-size: 20px;
}

.stl-quick-view__error p {
    margin: 0;
    color: #666;
}

.stl-quick-view__detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 10px 20px;

    border: 1px solid #e83e76;
    border-radius: 999px;

    color: #e83e76;
    background: #ffffff;

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

    text-decoration: none;
}

.stl-quick-view__detail-link:hover {
    color: #ffffff;
    background: #e83e76;

    text-decoration: none;
}


/* ==========================================================
   MENŠÍ DESKTOP A TABLET
   ========================================================== */

@media (max-width: 1100px) {
    .shop-the-look__container {
        width: calc(100% - 32px);
    }

    .shop-the-look__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 16px;
    }

    .shop-the-look__visual,
    .shop-the-look__main-image {
        min-height: 560px;
    }

    .shop-the-look__product-area .products-block {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 30px 12px;
    }

    .stl-quick-view__layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(390px, 1.1fr);
    }

    .stl-quick-view__media {
        padding: 42px 30px;
    }

    .stl-quick-view__info {
        padding: 40px 30px 34px;
    }
}


/* ==========================================================
   MODAL – MOBIL A MENŠÍ TABLET
   ========================================================== */

@media (max-width: 850px) {
    .stl-quick-view__overlay {
        align-items: flex-end;
        padding: 0;
    }

    .stl-quick-view__dialog {
        width: 100%;
        max-height: 94vh;

        border-radius: 18px 18px 0 0;

        transform: translateY(40px);
    }

    .stl-quick-view--open .stl-quick-view__dialog {
        transform: translateY(0);
    }

    .stl-quick-view__layout {
        display: block;
        min-height: 0;
    }

    .stl-quick-view__media {
        min-height: 320px;

        padding: 38px 24px 24px;
    }

    .stl-quick-view__image {
        max-width: 400px;
        max-height: 380px;
    }

    .stl-quick-view__info {
        padding: 24px 20px 26px;
    }

    .stl-quick-view__tabs {
        width: calc(100% - 50px);

        margin-bottom: 24px;
    }

    .stl-quick-view__headline {
        display: block;
    }

    .stl-quick-view__prices {
        justify-content: flex-start;

        margin-top: 10px;

        text-align: left;
    }
}


/* ==========================================================
   MOBIL – SHOP THE LOOK SLIDER
   ========================================================== */

@media (max-width: 767px) {
    .shop-the-look {
        margin: 46px 0 60px;
    }

    .shop-the-look__container {
        width: 100%;

        margin: 0;
        padding: 0 14px;
    }

    .shop-the-look__heading {
        margin: 0 0 30px;

        font-size: 24px;
        line-height: 1.25;
    }

    .shop-the-look__layout {
        display: block;
    }

    .shop-the-look__visual {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 5;

        margin: 0 0 22px;
    }

    .shop-the-look__main-image {
        width: 100%;
        height: 100%;
        min-height: 0;

        object-fit: cover;
    }

    .shop-the-look__product-area {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;

        touch-action: pan-x pan-y;

        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .shop-the-look__product-area::-webkit-scrollbar {
        display: none;

        width: 0;
        height: 0;
    }

    .shop-the-look__product-area .shkProductSlider,
    .shop-the-look__product-area .shk-products {
        display: block !important;

        width: max-content !important;
        min-width: 100% !important;
        height: auto !important;

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

        overflow: visible !important;

        touch-action: pan-x pan-y;
    }

    .shop-the-look__product-area .products-block {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 8px;

        width: max-content !important;
        min-width: 100% !important;
        height: auto !important;

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

        left: auto !important;
        right: auto !important;

        transform: none !important;
        translate: none !important;

        touch-action: pan-x pan-y;
    }

    .shop-the-look__product-area .product {
        flex:
            0 0
            calc((100vw - 36px) / 2) !important;

        width:
            calc((100vw - 36px) / 2) !important;

        min-width:
            calc((100vw - 36px) / 2) !important;

        max-width:
            calc((100vw - 36px) / 2) !important;

        height: auto !important;

        scroll-snap-align: start;
    }

    .shop-the-look__product-area .product .image {
        margin-bottom: 9px !important;
    }

    .shop-the-look__product-area .name {
        height: 34px;
        min-height: 34px;
        max-height: 34px;

        font-size: 12px !important;
        line-height: 17px !important;
    }

    .shop-the-look__product-area .p-desc,
    .shop-the-look__product-area .p-description,
    .shop-the-look__product-area .description {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        font-size: 10px !important;
        line-height: 17px !important;
    }

    .shop-the-look__product-area .price-final,
    .shop-the-look__product-area .price-final strong,
    .shop-the-look__product-area .price-final-holder {
        font-size: 13px !important;
    }

    .shop-the-look__product-area .p-tools,
    .shop-the-look__product-area .p-tools-wrapper {
        padding-top: 11px !important;
    }

    .shop-the-look__product-area .shop-the-look__detail-button,
    .shop-the-look__product-area .p-tools .btn,
    .shop-the-look__product-area .p-tools button,
    .shop-the-look__product-area .p-tools a {
        min-height: 38px !important;
        height: 38px !important;

        padding: 9px 8px !important;

        font-size: 11px !important;

        background-color: #ffffff !important;
    }

    .stl-quick-view__close {
        position: fixed;

        top: 12px;
        right: 12px;
    }

    .stl-quick-view__media {
        min-height: 280px;

        padding: 48px 20px 20px;
    }

    .stl-quick-view__image {
        max-height: 300px;
    }

    .stl-quick-view__info {
        padding: 22px 16px 28px;
    }

    .stl-quick-view__tabs {
        width: calc(100% - 36px);

        margin-bottom: 22px;
    }

    .stl-quick-view__tab {
        min-height: 36px;

        padding: 7px 8px;

        font-size: 9px;
    }

    .stl-quick-view__title {
        font-size: 19px;
    }

    .stl-quick-view__description {
        max-height: 110px;

        overflow: hidden;

        font-size: 13px;
    }

    .stl-quick-view__variant select {
        min-height: 50px;

        font-size: 14px;
    }

    .stl-quick-view__buy-row {
        grid-template-columns:
            82px minmax(0, 1fr);

        gap: 8px;
    }

    .stl-quick-view__submit,
    .stl-quick-view__submit.btn,
    .stl-quick-view__submit.btn-conversion,
    .stl-quick-view__submit.add-to-cart-button {
        min-height: 48px !important;

        padding-right: 10px !important;
        padding-left: 10px !important;

        border-radius: 999px !important;

        font-size: 11px !important;
        letter-spacing: 0.03em !important;
    }
}


/* ==========================================================
   VELMI MALÝ MOBIL
   ========================================================== */

@media (max-width: 390px) {
    .stl-quick-view__buy-row {
        display: block;
    }

    .stl-quick-view__quantity {
        width: 100%;

        margin-bottom: 10px;
    }

    .stl-quick-view__quantity input {
        min-height: 46px;
    }

    .stl-quick-view__submit,
    .stl-quick-view__submit.btn,
    .stl-quick-view__submit.btn-conversion,
    .stl-quick-view__submit.add-to-cart-button {
        min-height: 48px !important;

        margin-top: 0 !important;
    }
}