/* ==========================================================================
   Carousel
   ========================================================================== */

.elementor-editor-active .elementor-widget-shop-the-look{
    max-height: 720px;
    overflow: hidden;
}

/* Ratio-capped rather than height:auto off the source photo: a full-body look
   shot is tall enough that at one column (or inside the Elementor editor,
   which doesn't slice slides into columns at all) the slide would otherwise
   grow to whatever height the image's own aspect ratio dictates - often well
   past the viewport. object-fit: contain (below) keeps the whole outfit
   visible inside that cap instead of cropping it. */
.shop-the-look-wrapper .stl-slide-trigger {
    position: relative;
    display: block;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.shop-the-look-wrapper .stl-slide-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.shop-the-look-wrapper .swiper-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

/* ==========================================================================
   Scroll bar
   ========================================================================== */

/* Swiper's own rule absolutely positions .swiper-scrollbar inside the box it
   scrolls; this one lives outside it as a plain block under the images, so the
   positioning has to be undone here. */
.shop-the-look-wrapper .stl-scrollbar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 100%;
    height: 2px;
    margin: 24px auto 0;
    border-radius: 0;
    background: #e3e3e3;
    cursor: pointer;
    touch-action: none;
}

/*
 * The handle: black for the part of the strip on screen, leaving the grey track
 * showing how much is still to come.
 *
 * Its width and offset are set by shop-the-look-front.js, which measures them
 * from the strip - the theme's Swiper build has no scrollbar module to do it.
 * Width starts at 0 on purpose: if that script ever fails to run, an empty
 * track is honest, where a full width bar would claim the strip has no more to
 * show.
 */
.shop-the-look-wrapper .stl-scrollbar .swiper-scrollbar-drag {
    position: relative;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 0;
    background: #000;
    cursor: grab;
}

/* Nothing overflows, so there is no progress to report. */
.shop-the-look-wrapper .stl-scrollbar.stl-scrollbar-idle {
    display: none;
}

.shop-the-look-wrapper .stl-scrollbar.stl-scrollbar-dragging .swiper-scrollbar-drag {
    cursor: grabbing;
}

.shop-the-look-wrapper .stl-scrollbar .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

/*
 * A 2px line is the look, but it is a poor target for a mouse. This stretches
 * the bar's pointer area above and below without touching its appearance -
 * events on a pseudo element are delivered to its host, which is the element
 * Swiper binds the drag to. It reaches into the 24px gap over the bar only, so
 * it cannot steal clicks from the images.
 */
.shop-the-look-wrapper .stl-scrollbar::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 0;
    bottom: -10px;
    left: 0;
}

/* Everything fits on screen, so there is nothing to scroll: Swiper adds this
   and the bar would otherwise sit there doing nothing. */
.shop-the-look-wrapper .stl-scrollbar.swiper-scrollbar-lock {
    display: none;
}

/* ==========================================================================
   Phone layout - one look, with the strip as thumbnails underneath
   ========================================================================== */

.shop-the-look-wrapper .stl-thumbs {
    width: 100%;
    margin-top: 8px;
}

.shop-the-look-wrapper .stl-thumbs .swiper-slide.stl-thumb {
    width: 46px;
    height: auto;
    flex-shrink: 0;
    margin-right: 4px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.shop-the-look-wrapper .stl-thumbs .swiper-slide.stl-thumb:last-child {
    margin-right: 0;
}

/* Swiper marks the thumbnail matching the look on screen. */
.shop-the-look-wrapper .stl-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.shop-the-look-wrapper .stl-thumb-image {
    display: block;
    width: 100%;
    height: auto;
}

/* From the tablet breakpoint up the strip is its own navigation, so the
   thumbnails and the phone-only spacing go away. The scroll bar is the
   opposite: it belongs to the strip, not to the single-look layout. */
@media (max-width: 767px) {
    .shop-the-look-wrapper .stl-scrollbar {
        display: none;
    }

    /*
     * One look fills the width on a phone, and a full length fashion shot at
     * that width is taller than any phone screen - the thumbnails underneath
     * ended up well below the fold. Capping the slide's height keeps the look
     * and its thumbnails on screen together.
     *
     * The image is fitted inside that height rather than cropped to it: the
     * point of a look is the whole outfit, and cover would cut off the shoes at
     * one end or the face at the other.
     */
    .shop-the-look-wrapper .stl-slide-trigger {
        height: 60vh;
    }

    .shop-the-look-wrapper .swiper-slide-image {
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

@media (min-width: 768px) {
    .shop-the-look-wrapper .stl-thumbs {
        display: none;
    }
}

/* A free scrolling strip is dragged directly, so show that on the images. */
.shop-the-look-wrapper .swiper-container-free-mode .swiper-slide {
    cursor: grab;
}

.shop-the-look-wrapper .swiper-container-free-mode.swiper-container-android .swiper-slide,
.shop-the-look-wrapper .swiper-container-free-mode .swiper-slide:active {
    cursor: grabbing;
}

@media (hover: hover) {
    .shop-the-look-wrapper .stl-slide-trigger:hover .swiper-slide-image {
        transform: scale(1.03);
    }
}

.shop-the-look-wrapper .swiper-button-next,
.shop-the-look-wrapper .swiper-button-prev {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}

.shop-the-look-wrapper .text-alt {
    pointer-events: none;
}

.shop-the-look-wrapper .stl-slide-preview {
    cursor: default;
}

.shop-the-look-wrapper .stl-preview-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-the-look-wrapper .stl-preview-badge-empty {
    background: #c0392b;
}


/* ==========================================================================
   Popup shell - phone first
   ========================================================================== */

.stl-modal .modal-content {
    border: none;
    border-radius: 0;
}

.stl-modal .stl-modal-body-flex {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.stl-modal .stl-modal-image-col {
    flex: 0 0 auto;
    min-height: 0;
}

.stl-modal .stl-modal-image-el {
    display: block;
    width: 100%;
    height: auto;
}

.stl-modal .stl-modal-products-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.stl-modal .stl-modal-products-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 14px 56px 14px 16px;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
}

.stl-modal .modal-title {
    margin: 0;
    text-transform: uppercase;
    color: #000000;
    font-family: 'sailec';
    font-size: 24px;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 400;
}

.stl-modal .stl-modal-products {
    container: stl-products / inline-size;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.stl-modal .stl-modal-products {
    scrollbar-width: thin;
    scrollbar-color: #000 #f0f0f0;
}

.stl-modal .stl-modal-products::-webkit-scrollbar {
    width: 6px;
}

.stl-modal .stl-modal-products::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.stl-modal .stl-modal-products::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 0;
}

.stl-modal .stl-modal-empty {
    padding: 28px 0;
    text-align: center;
    color: #767676;
}

.stl-modal .stl-modal-close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    color: #000;
    font-size: 1.5rem;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
}

.stl-modal .stl-modal-close:hover,
.stl-modal .stl-modal-close:focus {
    background: #fff;
    color: #000;
    opacity: 1;
}

/* ==========================================================================
   Product rows inside the popup
   ========================================================================== */

.stl-modal .js-product-miniature-wrapper {
    max-width: none;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.stl-modal .js-product-miniature-wrapper:last-child {
    border-bottom: none;
}

.stl-modal .product-miniature-list-row {
    --stl-thumb: 76px;
    --stl-gap: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--stl-gap);
    row-gap: 10px;
    margin: 0;
}

.stl-modal .product-miniature-list-row > [class*="col"] {
    padding: 0;
}

.stl-modal .product-miniature-list-row > .col-sm-3 {
    flex: 0 0 var(--stl-thumb);
    width: var(--stl-thumb);
    max-width: var(--stl-thumb);
}

.stl-modal .thumbnail-container {
    width: 100%;
}

.stl-modal .product-thumbnail {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #f5f5f5;
}

.stl-modal .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stl-modal .product-miniature-list-row > .col-description {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.stl-modal .product-title {
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.35;
}

.stl-modal .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #000000;
    font-family: 'Sailec';
    font-size: 16px;
    letter-spacing: 0;
    line-height: 20px;
    font-weight: 400;
}

.stl-modal .product-reference {
    font-size: 11px;
    line-height: 1.3;
    display: none;
}

.stl-modal .products-variants .color {
    border-radius: 60px;
    width: 16px;
    height: 16px;
    border: 2px solid #414141;
    line-height: calc(2em - 4px);
}

.stl-modal .products-variants {
    margin-top: 6px;
}

.stl-modal .product-availability {
    margin-top: 4px;
    display: none;
}

.stl-modal .product-miniature-list-row > .col-buy {
    flex: 1 0 100%;
    max-width: none;
    width: auto;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stl-modal .product-price-and-shipping {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.stl-modal .product-price {
    color: #000000;
    font-family: 'Sailec';
    font-size: 16px;
    letter-spacing: 0;
    line-height: 20px;
}

.stl-modal .regular-price {
    font-size: 12px;
}

.stl-modal .product-add-cart {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0 0 0 auto;
}

.stl-modal .btn-product-list {
    width: auto;
    min-width: 96px;
    height: auto;
    padding: 11px 20px;
    white-space: nowrap;
    color: #FFFFFF;
    font-family: 'Sailec';
    font-size: 16px;
    letter-spacing: 0;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
    background-color: #000000;
    border: 2px solid #000000;
    font-weight: 400;
}

.stl-modal .btn-product-list:hover{
    background-color: #fff;
    color: #000;
}

.stl-modal .product-functional-buttons-bottom {
    flex: 0 0 auto;
    margin: 0;
}

.stl-modal .product-description-short,
.stl-modal .ecologic-imgs-category,
.stl-modal .thumbnail-container .btn-iqitwishlist-add,
.stl-modal .js-quick-view-iqit {
    display: none;
}

.stl-modal .miniature-product-actions {
    margin-top: 8px;
    text-align: left;
}

.stl-modal .miniature-product-actions .product-add-to-cart,
.stl-modal .miniature-product-actions .color-list-options {
    display: none;
}

.stl-modal .miniature-product-actions .miniature-product-variants,
.stl-modal .miniature-product-actions .product-variants-item {
    margin: 0;
    padding: 0;
}

.stl-modal .miniature-product-actions .custom-prop {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    background: #fff;
}

.stl-modal .miniature-product-actions .custom-prop .input-container {
    float: none;
    margin: 0;
}

.stl-modal .miniature-product-actions .custom-prop label {
    margin: 0;
    cursor: pointer;
}

.stl-modal .miniature-product-actions .custom-prop .radio-label {
    display: block;
    margin: 0;
    padding: 3px 7px;
    border: none;
    font-size: 13px;
    line-height: 1.2;
}

.stl-modal .miniature-product-actions .attribute-not-in-stock {
    opacity: 0.45;
    cursor: default;
}

@media (pointer: coarse) {
    .stl-modal .miniature-product-actions .custom-prop .radio-label {
        padding: 9px 6px;
    }
}

@container stl-products (min-width: 430px) {
    .stl-modal .product-miniature-list-row {
        --stl-thumb: 88px;
    }

    .stl-modal .product-miniature-list-row > .col-buy {
        flex: 0 0 auto;
        display: block;
        margin-left: auto;
        padding-left: 0;
        text-align: right;
    }

    .stl-modal .product-price-and-shipping {
        margin-bottom: 8px;
    }

    .stl-modal .product-functional-buttons-bottom {
        margin-top: 8px;
    }
}

@media (min-width: 576px) {
    .stl-modal .stl-modal-dialog {
        max-width: 720px;
        width: calc(100% - 2rem);
        margin: 2rem auto;
    }

    .stl-modal .modal-content {
        max-height: calc(100vh - 4rem);
        max-height: calc(100svh - 4rem);
        overflow: hidden;
    }

    .stl-modal .stl-modal-body-flex {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .stl-modal .stl-modal-image-el {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 55vh;
        max-height: 55svh;
        margin: 0 auto;
    }

    .stl-modal .stl-modal-products {
        padding-bottom: 8px;
    }

    .stl-modal .stl-modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }
}

@media (min-width: 576px) and (max-height: 520px) {
    .stl-modal .stl-modal-dialog {
        margin: 0.75rem auto;
    }

    .stl-modal .modal-content {
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100svh - 1.5rem);
    }
}

/*
 * Below the two column layout the look shot is dropped from the popup.
 *
 * Stacked above the list it pushed every product down by most of the viewport,
 * so opening a look meant scrolling past a picture that had just been tapped to
 * get here. The products are what the popup is for; the look is still on screen
 * behind it in the strip.
 *
 * Hidden rather than left out of the markup: the popup is rendered server side
 * for every look on the page, and the src is the same one the slide already
 * loaded, so there is nothing extra to download either way.
 */
@media (max-width: 991px) {
    .stl-modal .stl-modal-image-col {
        display: none;
    }
}

/* ==========================================================================
   Desktop - image and product list side by side
   ========================================================================== */

@media (min-width: 992px) {
    .stl-modal .stl-modal-dialog {
        max-width: 1100px;
        width: calc(100% - 4rem);
        margin: 3rem auto;
    }

    .stl-modal .modal-content {
        height: min(80vh, 760px);
        max-height: none;
    }

    .stl-modal .stl-modal-body-flex {
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        overflow: hidden;
    }

    .stl-modal .stl-modal-image-col {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .stl-modal .stl-modal-image-el {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        object-fit: contain;
        background: #FFFFFF;
    }

    .stl-modal .stl-modal-products {
        overflow-y: auto;
    }

    .stl-modal .stl-modal-products-header {
        padding: 18px 56px 18px 24px;
    }

    .stl-modal .stl-modal-products {
        padding: 0 24px;
    }
}

/* ==========================================================================
   Pick a size, then add to cart (stl-add-to-cart.tpl)
   ========================================================================== */

.stl-modal .stl-add-cart {
    margin-top: 10px;
}

.stl-modal .stl-variant-group {
    margin-bottom: 10px;
}

.stl-modal .stl-variant-label {
    display: none;
    margin-bottom: 5px;
    color: #767676;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stl-modal .stl-variant-list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stl-modal .stl-variant-item {
    margin: 0;
}

/* The radio holds the state; the label is what gets styled. */
.stl-modal .stl-variant-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.stl-modal .stl-variant-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 34px;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #d5d5d5;
    background: #fff;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.stl-modal .stl-variant-option:hover {
    border-color: #000;
}

/* Toggled by shop-the-look-front.js rather than keyed off :has(), so the whole
   chip highlights (not just its inner label) on every supported browser. */
.stl-modal .stl-variant-option.stl-variant-selected {
    border-color: #000;
    background: #000;
    color: #fff;
}

.stl-modal .stl-variant-option.stl-variant-out {
    border-color: #ededed;
    color: #bbb;
    text-decoration: line-through;
    cursor: not-allowed;
}

.stl-modal .stl-variant-option.stl-variant-out::before{
    display: none;
}

.stl-modal .stl-variant-option.stl-variant-out:hover {
    border-color: #ededed;
}

/* Colour dots. These replace the theme's variant-links dots, which linked out
   to the product holding each colour; here they pick the colour in place, so
   they are radios wearing a circle rather than anchors. */
.stl-modal .stl-variant-group-color .stl-variant-list {
    gap: 8px;
}

.stl-modal .stl-variant-swatch {
    display: block;
    margin: 0;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    line-height: 0;
    transition: border-color 0.15s;
}

.stl-modal .stl-variant-swatch:hover {
    border-color: #bbb;
}

.stl-modal .stl-variant-swatch.stl-variant-selected {
    border-color: #000;
}

.stl-modal .stl-swatch {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

/* The colour name is kept for screen readers and for the title tooltip, but a
   dot that spells itself out is the clutter this replaced. */
.stl-modal .stl-swatch-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A colour with nothing left in it: struck through the dot itself. */
.stl-modal .stl-variant-swatch.stl-variant-out {
    cursor: not-allowed;
    opacity: 0.45;
}

.stl-modal .stl-variant-swatch.stl-variant-out .stl-swatch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 1px;
    background: #000;
    transform: rotate(-45deg);
}

.stl-modal .stl-add-to-cart-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.stl-modal .stl-variant-hint {
    display: block;
    margin-top: 5px;
    color: #767676;
    font-size: 11px;
}

.stl-modal .stl-add-to-cart-form.stl-variants-complete .stl-variant-hint {
    display: none;
}