.dtc-stl-hotspot-gallery {

    position: relative;

    width: 100%;

    margin: 0 0 50px;

    overflow: visible;

}



/*

 * Qode writes fixed pixel heights onto its masonry links. During a viewport

 * resize those old heights remain briefly after the widths have changed,

 * stretching the images until Qode's next layout pass. Keep the media at its

 * intrinsic ratio continuously; Isotope can then reposition the correctly

 * sized items without any visible distortion.

 */

.qodef-media

.qodef-grid-inner

> a.qodef-popup-item.qodef-grid-item {

    height: auto !important;

    transition: none !important;

}



.qodef-media

.qodef-grid-inner

> a.qodef-popup-item.qodef-grid-item

> img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;

    transition: none !important;

}



.dtc-stl-slides {

    position: relative;

}



.dtc-stl-slide {

    position: relative;

    display: none;

    width: 100%;

    margin: 0;

    line-height: 0;

}



.dtc-stl-slide.is-active {

    display: block;

}



.dtc-stl-scene-image {

    display: block;

    width: 100%;

    height: auto;

}



.dtc-stl-hotspot {

    position: absolute;

    z-index: 3;

    left: var(--dtc-x);

    top: var(--dtc-y);

    transform: translate(-50%, -50%);

    line-height: 1.35;

}



.dtc-stl-hotspot-dot {

    display: grid;

    place-items: center;

    width: 20px;

    height: 20px;

    padding: 0;

    border: 2px solid #fff;

    border-radius: 50%;

    background: #111;

    color: #fff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);

    cursor: pointer;

    transition: transform .2s ease, box-shadow .2s ease;

}



.dtc-stl-hotspot-dot span {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);

}



.dtc-stl-hotspot-dot::after {

    content: '';

    position: absolute;

    inset: -8px;

    border: 1px solid rgba(255, 255, 255, .75);

    border-radius: inherit;

    animation: dtc-stl-pulse 2.2s ease-out infinite;

}



.dtc-stl-hotspot:hover .dtc-stl-hotspot-dot,

.dtc-stl-hotspot.is-open .dtc-stl-hotspot-dot,

.dtc-stl-hotspot-dot:focus-visible {

    transform: scale(1.18);

    box-shadow: 0 0 0 5px rgba(255, 255, 255, .32), 0 2px 9px rgba(0, 0, 0, .38);

}



@keyframes dtc-stl-pulse {

    from { opacity: .8; transform: scale(.65); }

    to { opacity: 0; transform: scale(1.35); }

}



.dtc-stl-product-popover {

    position: absolute;

    z-index: 100000001;

    display: flex;

    flex-direction: column;

    width: 160px;

    max-width: calc(100vw - 24px);

    max-height: calc(100vh - 24px);

    max-height: calc(100dvh - 24px);

    min-height: 0;

    border: 1px solid #111;

    background: #fff;

    color: #111;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    overflow-y: auto;

    box-shadow: none;

    transition: opacity .2s ease, visibility .2s;

}



/* Raise only the active hotspot area above the theme's sticky header. */

#qodef-page-outer:has(.dtc-stl-hotspot:hover),

#qodef-page-outer:has(.dtc-stl-hotspot:focus-within),

#qodef-page-outer:has(.dtc-stl-hotspot.is-open),

.qodef-media:has(.dtc-stl-hotspot:hover),

.qodef-media:has(.dtc-stl-hotspot:focus-within),

.qodef-media:has(.dtc-stl-hotspot.is-open),

.dtc-stl-hotspot-gallery:has(.dtc-stl-hotspot:hover),

.dtc-stl-hotspot-gallery:has(.dtc-stl-hotspot:focus-within),

.dtc-stl-hotspot-gallery:has(.dtc-stl-hotspot.is-open) {

    position: relative;

    z-index: 100000000 !important;

    overflow: visible !important;

}



.dtc-stl-hotspot:hover .dtc-stl-product-popover,

.dtc-stl-hotspot:focus-within .dtc-stl-product-popover,

.dtc-stl-hotspot.is-open .dtc-stl-product-popover {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.dtc-stl-hotspot:hover,

.dtc-stl-hotspot:focus-within,

.dtc-stl-hotspot.is-open {

    z-index: 100000002;

}



/* Tablet and mobile popovers open only from a deliberate dot click. */

html.dtc-stl-click-popovers

.dtc-stl-hotspot:not(.is-open):hover .dtc-stl-product-popover,

html.dtc-stl-click-popovers

.dtc-stl-hotspot:not(.is-open):focus-within .dtc-stl-product-popover {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

}



html.dtc-stl-click-popovers

.dtc-stl-hotspot.is-open .dtc-stl-product-popover {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

}



.dtc-stl-tooltip--right .dtc-stl-product-popover {

    left: 28px;

    top: 50%;

    transform: translateY(-72%);

}



.dtc-stl-tooltip--left .dtc-stl-product-popover {

    right: 28px;

    top: 50%;

    transform: translateY(-72%);

}



.dtc-stl-tooltip--top .dtc-stl-product-popover {

    left: 50%;

    bottom: 30px;

    transform: translateX(-50%);

}



.dtc-stl-tooltip--bottom .dtc-stl-product-popover {

    left: 50%;

    top: 30px;

    transform: translateX(-50%);

}



.dtc-stl-popover-image {

    display: block;

    width: calc(100% - 30px);

    height: auto;

    aspect-ratio: 1 / 1;

    margin: 15px 15px 0;

    padding: 0;

    border: 1px solid #d8d8d8;

    background: #fff;

    box-sizing: border-box;

}



.dtc-stl-popover-image img {

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    object-fit: contain;

}



.dtc-stl-popover-body {

    width: 100%;

    min-height: 82px;

    padding: 14px 14px 13px;

    background: #fff;

    box-sizing: border-box;

}



.dtc-stl-popover-title {

    display: block;

    color: inherit;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.05;

    text-transform: uppercase;

}



.dtc-stl-popover-price {

    margin-top: 6px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.15;

}



.dtc-stl-popover-view {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    min-height: 32px;

    padding: 8px 14px;

    background: #111;

    color: #fff !important;

    font-size: 13px;

    letter-spacing: .03em;

    line-height: 1;

    text-transform: uppercase;

    box-sizing: border-box;

}



.dtc-stl-slider-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin-top: 14px;

}



.dtc-stl-slide-prev,

.dtc-stl-slide-next,

.dtc-stl-slide-dots button {

    border: 0;

    background: transparent;

    cursor: pointer;

}



.dtc-stl-slide-dots {

    display: flex;

    gap: 7px;

}



.dtc-stl-slide-dots button {

    width: 7px;

    height: 7px;

    padding: 0;

    border-radius: 50%;

    background: #bbb;

}



.dtc-stl-slide-dots button.is-active {

    background: #111;

}



.dtc-stl-products-section {

    clear: both;

    width: 100%;

    margin: 80px 0 42px;

}



.dtc-stl-heading {

    margin: 0 0 24px;

    font-size: clamp(24px, 2.1vw, 36px);

    font-weight: 400;

    line-height: 1.1;

    text-transform: uppercase;

}



.dtc-stl-products.products {

    display: grid !important;

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

    gap: 18px;

    margin: 0 !important;

    padding: 0 !important;

}



.dtc-stl-products.products::before,

.dtc-stl-products.products::after {

    display: none !important;

}



.dtc-stl-products.products > li.product {

    float: none !important;

    width: auto !important;

    margin: 0 !important;

}



/*

 * Shop the Look deliberately uses DP Featured Products' card renderer and

 * class names. Only layout and this page-specific image treatment live here;

 * future card changes in DP Featured Products continue to cascade through.

 */

.dtc-stl-featured-products .dtc-stl-products {

    display: grid;

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

    gap: 24px;

    width: 100%;

}



.dtc-stl-featured-products .dpfp-ajax-slide,

.dtc-stl-featured-products .dpfp-ajax-slide > li.product {

    display: block;

    width: auto !important;

    min-width: 0;

    height: auto;

    margin: 0 !important;

}



.dtc-stl-featured-products .qodef-woo-product-image {

    position: relative;

    display: grid;

    place-items: center;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f7f7f7;

}



.dtc-stl-featured-products .qodef-woo-product-image > a {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;
    padding: 0 !important;
    background: transparent !important;
}


.dtc-stl-featured-products .qodef-woo-product-image > img,

.dtc-stl-featured-products .qodef-woo-product-image > a > img {

    display: block;

    width: 100% !important;

    height: 100% !important;

    margin: 0;

    object-fit: contain;

    mix-blend-mode: multiply;
}

.dtc-stl-featured-products .qodef-woo-product-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(#fff, #fff) top / 100% 13% no-repeat,
        linear-gradient(#fff, #fff) bottom / 100% 13% no-repeat,
        linear-gradient(#fff, #fff) left / 13% 100% no-repeat,
        linear-gradient(#fff, #fff) right / 13% 100% no-repeat;
    pointer-events: none;
    opacity: 1;
    transition: opacity .35s ease;
}

.dtc-stl-featured-products .dpfp-has-lifestyle-hover .qodef-woo-product-image:hover::after {
    opacity: 0;
}


/* Lifestyle/hover imagery must retain its original colours. */

.dtc-stl-featured-products

.qodef-woo-product-image

.dpfp-lifestyle-hover-image {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;

    height: 100% !important;

    margin: 0;

    padding: 0 !important;
    object-fit: cover !important;
    mix-blend-mode: normal !important;
}


/*

 * Match the compact outlined Sale/New badges used by the homepage Featured

 * Products widget. Theme defaults can turn these marks into larger filled

 * labels, so reset every box-model property inside Shop the Look only.

 */

.dtc-stl-featured-products

.qodef-woo-product-image

> .qodef-woo-product-mark {

    position: absolute !important;

    z-index: 6 !important;

    top: 11px !important;

    right: auto !important;

    bottom: auto !important;

    left: 11px !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    width: auto !important;

    min-width: 0 !important;

    height: 18px !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 6px !important;

    border: 1px solid #111 !important;

    border-radius: 999px !important;

    background: #fff !important;

    box-shadow: none !important;

    color: #111 !important;

    font-family: inherit !important;

    font-size: 10px !important;

    font-style: normal !important;

    font-weight: 400 !important;

    line-height: 16px !important;

    letter-spacing: 0 !important;

    text-transform: uppercase !important;

}



/* Keep both labels readable when a product is simultaneously New and Sale. */

.dtc-stl-featured-products

.qodef-woo-product-image

> .qodef-woo-product-mark.qodef-new {

    top: 35px !important;

}



/*

 * The image action bar, titles, prices, sale formatting, cart control and

 * colour swatches deliberately remain under Eskil + DP Featured Products'

 * own selectors. That keeps these static cards visually identical to the

 * homepage widget while omitting only Swiper's outer carousel structure.

 */

.dtc-stl-featured-products .qodef-woo-product-image-inner {

    z-index: 5;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



/*

 * Eskil normally supplies these reveal states through the Product List

 * widget. Keep the native structure and provide the same state explicitly so

 * optimiser ordering cannot leave Add Sample and Wishlist hidden forever.

 */

.dtc-stl-featured-products .qodef-woo-product-image:hover .qodef-woo-product-image-inner,

.dtc-stl-featured-products .qodef-woo-product-image:focus-within .qodef-woo-product-image-inner {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



/* Keep Add Sample and Add to Wishlist typography and alignment identical. */

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding-bottom: 3px !important;

    box-sizing: border-box;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-m-text {

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

}



/* Give both action cells the same full-height alignment context. */

.dtc-stl-featured-products

.qodef-woo-product-image-inner

> .qwfw-add-to-wishlist-wrapper,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

> .qodef-quick-view-holder,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-wrapper {

    display: flex !important;

    align-items: stretch !important;

    justify-content: center !important;

    height: 100% !important;

    margin: 0 !important;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button {

    position: relative;

    top: -1px;

    width: 100% !important;

    height: 100% !important;

}



/* Use the wishlist plugin's original heart and keep it close to its label. */

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist .qwfw-m-icon {

    position: static !important;

    inset: auto !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    flex: 0 0 14px;

    width: 14px !important;

    height: 14px !important;

    margin: 0 !important;

    opacity: 1 !important;

    visibility: visible !important;

    color: #111 !important;

    transform: none !important;

    transition: transform 0.25s ease !important;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist .qwfw-m-icon svg {

    display: block;

    width: 14px !important;

    height: 14px !important;

    fill: currentColor !important;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist .qwfw-m-icon svg path {

    fill: currentColor !important;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist .qwfw-m-text {

    position: static !important;

    inset: auto !important;

    display: inline-block !important;

    margin: 0 !important;

    transform: none !important;

}



/* Replace the heavy text glyph with a crisp one-pixel plus. */

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-icon {

    position: relative;

    display: inline-block !important;

    flex: 0 0 12px;

    width: 12px !important;

    height: 12px !important;

    margin: 0 !important;

    overflow: visible;

    color: transparent !important;

    font-size: 0 !important;

    transform: none;

    transition: transform 0.25s ease;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-icon::before,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-icon::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    display: block;

    background: currentColor;

    background: #111;

    transform: translate(-50%, -50%);

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-icon::before {

    width: 10px;

    height: 2px;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-icon::after {

    width: 2px;

    height: 10px;

}



/* Move only the icon on hover; labels stay locked to their baseline. */

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button:hover .dpfp-add-sample-icon,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button:focus-visible .dpfp-add-sample-icon,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist:hover .qwfw-m-icon,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist:focus-visible .qwfw-m-icon {

    transform: translateX(3px) !important;

}



.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button:hover .dpfp-add-sample-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button:focus-visible .dpfp-add-sample-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist:hover .qwfw-m-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist:focus-visible .qwfw-m-text {

    transform: none !important;

}



/* Keep the same medium label weight on hover and keyboard focus. */

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button:hover .dpfp-add-sample-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.dpfp-add-sample-button:focus-visible .dpfp-add-sample-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist:hover .qwfw-m-text,

.dtc-stl-featured-products

.qodef-woo-product-image-inner

.qwfw-add-to-wishlist:focus-visible .qwfw-m-text {

    font-weight: 500 !important;

}



@media (max-width: 1023px) {

    .dtc-stl-products-section {

        margin-top: 60px;

    }



    .dtc-stl-products.products {

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

    }



    .dtc-stl-featured-products .dtc-stl-products {

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

    }

}



/*

 * Chrome's responsive toolbar can report a 767px device while browser zoom

 * makes the CSS viewport wider than 767px. The frontend script adds this

 * class from the narrowest available viewport/device measurement so the

 * mobile gallery layout remains reliable in that case as well.

 */

html.dtc-stl-mobile-gallery-layout .dtc-stl-hotspot-gallery {

    margin-bottom: 24px;

}



html.dtc-stl-mobile-gallery-layout

.qodef-portfolio-single .qodef-media {

    margin-right: 0 !important;

}



html.dtc-stl-mobile-gallery-layout

.qodef-media > .qodef-e.qodef-grid {

    width: 100% !important;

    margin: 0 !important;

}



html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery {

    position: relative !important;

    display: grid !important;

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

    gap: 24px !important;

    width: 100% !important;

    height: auto !important;

    margin: 0 !important;

}



html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery

> .qodef-grid-masonry-sizer,

html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery

> .qodef-grid-masonry-gutter {

    display: none !important;

}



html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery

> a.qodef-popup-item.qodef-grid-item {

    position: relative !important;

    inset: auto !important;

    transform: none !important;

    float: none !important;

    align-self: start !important;

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

}



/*

 * Qode creates aspect-ratio spacers with pseudo-elements for its absolutely

 * positioned masonry cards. Once the cards use normal mobile flow those

 * spacers must be removed, otherwise an empty image-height block appears.

 */

html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery

> a.qodef-popup-item.qodef-grid-item::before,

html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery

> a.qodef-popup-item.qodef-grid-item::after {

    content: none !important;

    display: none !important;

    padding: 0 !important;

}



html.dtc-stl-mobile-gallery-layout

.qodef-media .qodef-grid-inner.qodef-popup-gallery

> a.qodef-popup-item.qodef-grid-item > img {

    position: relative !important;

    inset: auto !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    object-fit: contain !important;

    transform: none !important;

}



html.dtc-stl-mobile-gallery-layout .dtc-stl-hotspot {

    margin-top: -12px;

    margin-left: -12px;

    transform: none;

}



html.dtc-stl-mobile-gallery-layout .dtc-stl-hotspot-dot {

    width: 24px;

    height: 24px;

}



html.dtc-stl-mobile-gallery-layout .dtc-stl-product-popover {

    position: absolute;

    z-index: 100000001;

    width: min(220px, calc(100vw - 32px));

}



html.dtc-stl-mobile-gallery-layout

.dtc-stl-tooltip--right .dtc-stl-product-popover {

    left: 44px !important;

    right: auto !important;

    top: 50% !important;

    bottom: auto !important;

    transform: translateY(-50%) !important;

}



html.dtc-stl-mobile-gallery-layout

.dtc-stl-tooltip--left .dtc-stl-product-popover {

    left: auto !important;

    right: 44px !important;

    top: 50% !important;

    bottom: auto !important;

    transform: translateY(-50%) !important;

}



html.dtc-stl-mobile-gallery-layout

.dtc-stl-tooltip--top .dtc-stl-product-popover {

    left: 50% !important;

    right: auto !important;

    top: auto !important;

    bottom: 44px !important;

    transform: translateX(-50%) !important;

}



html.dtc-stl-mobile-gallery-layout

.dtc-stl-tooltip--bottom .dtc-stl-product-popover {

    left: 50% !important;

    right: auto !important;

    top: 44px !important;

    bottom: auto !important;

    transform: translateX(-50%) !important;

}



@media (max-width: 767px) {

    .dtc-stl-hotspot-gallery {

        margin-bottom: 24px;

    }



    /*

     * Use normal document flow for the Qode project gallery on mobile. This

     * removes its desktop masonry offsets and gives every image a fixed 24px

     * gap while retaining the page's existing 24px side margins.

     */

    .qodef-portfolio-single .qodef-media {

        margin-right: 0 !important;

    }



    .qodef-media > .qodef-e.qodef-grid {

        width: 100% !important;

        margin: 0 !important;

    }



    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery {

        position: relative !important;

        display: grid !important;

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

        gap: 24px !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

    }



    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery

    > .qodef-grid-masonry-sizer,

    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery

    > .qodef-grid-masonry-gutter {

        display: none !important;

    }



    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery

    > a.qodef-popup-item.qodef-grid-item {

        position: relative !important;

        inset: auto !important;

        transform: none !important;

        float: none !important;

        align-self: start !important;

        display: block !important;

        width: 100% !important;

        max-width: none !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery

    > a.qodef-popup-item.qodef-grid-item::before,

    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery

    > a.qodef-popup-item.qodef-grid-item::after {

        content: none !important;

        display: none !important;

        padding: 0 !important;

    }



    .qodef-media

    .qodef-grid-inner.qodef-popup-gallery

    > a.qodef-popup-item.qodef-grid-item > img {

        position: relative !important;

        inset: auto !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        object-fit: contain !important;

        transform: none !important;

    }



    .dtc-stl-hotspot-dot {

        width: 24px;

        height: 24px;

    }



    .dtc-stl-hotspot {

        margin-top: -12px;

        margin-left: -12px;

        transform: none;

    }



    .dtc-stl-product-popover {

        position: absolute;

        z-index: 100000001;

        width: min(220px, calc(100vw - 32px));

    }



    .dtc-stl-tooltip--right .dtc-stl-product-popover {

        left: 44px !important;

        right: auto !important;

        top: 50% !important;

        bottom: auto !important;

        transform: translateY(-50%) !important;

    }



    .dtc-stl-tooltip--left .dtc-stl-product-popover {

        left: auto !important;

        right: 44px !important;

        top: 50% !important;

        bottom: auto !important;

        transform: translateY(-50%) !important;

    }



    .dtc-stl-tooltip--top .dtc-stl-product-popover {

        left: 50% !important;

        right: auto !important;

        top: auto !important;

        bottom: 44px !important;

        transform: translateX(-50%) !important;

    }



    .dtc-stl-tooltip--bottom .dtc-stl-product-popover {

        left: 50% !important;

        right: auto !important;

        top: 44px !important;

        bottom: auto !important;

        transform: translateX(-50%) !important;

    }



    .dtc-stl-popover-image {

        height: auto;

    }



    .dtc-stl-products-section {

        margin-top: 48px;

    }



    .dtc-stl-heading {

        font-size: 24px;

    }



    .dtc-stl-products.products {

        grid-template-columns: 1fr;

        gap: 28px;

    }



    .dtc-stl-featured-products .dtc-stl-products {

        grid-template-columns: 1fr;

        gap: 28px;

    }

}



/*

 * Click-only tablet/mobile cards are centred in the viewport and begin 20px

 * below the visible WordPress/theme header. These declarations intentionally

 * override the directional positioning used by desktop hover cards.

 */

html.dtc-stl-click-popovers .dtc-stl-product-popover.is-modal-open {

    position: fixed !important;

    z-index: 2147483001 !important;

    left: 50% !important;

    right: auto !important;

    top: var(--dtc-click-popover-top, 20px) !important;

    bottom: auto !important;

    width: min(220px, calc(100vw - 32px));

    max-height: calc(100dvh - var(--dtc-click-popover-top, 20px) - 12px);

    transform: translateX(-50%) !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

}



.dtc-stl-popup-backdrop {

    position: fixed;

    z-index: 2147483000;

    inset: 0;

    display: none;

    background: transparent;

    cursor: default;

    pointer-events: auto;

}



html.dtc-stl-click-popovers

.dtc-stl-popup-backdrop.is-active {

    display: block;

}



/*

 * While a click popup is open the transparent viewport layer owns every

 * outside click. This prevents Qode's gallery anchors, other hotspots and

 * underlying controls from receiving the same click used to close the card.

 */

html.dtc-stl-modal-is-open {

    overscroll-behavior: contain;

}



html.dtc-stl-click-popovers .dtc-stl-hotspot.is-open {

    z-index: 100000002 !important;

}



html.dtc-stl-click-popovers

.dtc-stl-hotspot:not(.is-open) .dtc-stl-hotspot-dot {

    z-index: 1 !important;

}