/**
 * Product Listing & Detail Pages
 * Matches Dangi Wellness dark luxury theme
 */

/* ---- Shared page hero ---- */
.dw-page-hero,
.dw-inner-hero.dw-page-hero {
    background: var(--dw-bg-section);
    border-bottom: 1px solid var(--dw-border-gold);
    padding: var(--dw-space-2xl) 0 var(--dw-space-xl);
    text-align: center;
}

    .dw-page-hero .dw-breadcrumb,
    .dw-inner-hero.dw-page-hero .dw-breadcrumb {
        font-size: 12px;
        color: var(--dw-text-subtle);
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

        .dw-page-hero .dw-breadcrumb a {
            color: var(--dw-text-muted);
        }

            .dw-page-hero .dw-breadcrumb a:hover {
                color: var(--dw-gold-premium);
            }

    .dw-page-hero .dw-section-label {
        margin-bottom: var(--dw-space-xs);
    }

    .dw-page-hero h1,
    .dw-page-hero h3,
    .dw-page-hero #lbl_CategoryTitle2,
    .dw-page-hero #lbl_CategoryTitle2 a {
        /* font-family: var(--dw-font-display); */
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        color: var(--dw-text-primary) !important;
        margin: 0;
        text-transform: none;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }

    .dw-page-hero .dw-hero-lead,
    .dw-page-hero > .dw-container > p:not(.dw-breadcrumb):not(.dw-section-label) {
        color: var(--dw-text-muted);
        margin-top: var(--dw-space-xs);
        font-size: 1.0625rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.7;
    }

body.app-theme .sub-banner,
body.app-theme .sub-banner-img {
    background: var(--dw-bg-section) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--dw-border-gold);
    padding: var(--dw-space-lg) 0 var(--dw-space-lg) !important;
    min-height: auto !important;
}

body.app-theme .subbanner-hd h3 {
    font-family: var(--dw-font-display);
    color: var(--dw-text-primary) !important;
    text-transform: none;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

/* Optional category banner */
.dw-product-banner-wrap {
    padding-top: var(--dw-space-lg);
}

    .dw-product-banner-wrap img {
        width: 100%;
        border-radius: var(--dw-radius-lg);
        border: 1px solid var(--dw-border-gold);
        display: block;
    }

/* ---- Product listing ---- */
.dw-product-listing {
    padding: var(--dw-space-2xl) 0 var(--dw-space-3xl);
    background: var(--dw-bg-primary);
}

body.app-theme .prod-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dw-space-md);
    margin: 0;
    width: 100%;
}

@media (min-width: 768px) {
    body.app-theme .prod-list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dw-space-lg);
    }
}

@media (min-width: 1200px) {
    body.app-theme .prod-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Neutralize Bootstrap cols injected by server / AJAX */
body.app-theme .prod-list > [class*="col-"],
body.app-theme .prod-list > .col-md-3,
body.app-theme .prod-list > .col-md-4,
body.app-theme .prod-list > .col-lg-4,
body.app-theme .prod-list > .col-sm-6,
body.app-theme .prod-list > .col-6 {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
    margin: 0;
}

/* Empty / loading text */
body.app-theme .prod-list:not(:has(.single-makal-product)):not(:has(.new-shop-card)) {
    display: block;
    text-align: center;
    color: var(--dw-text-muted);
    padding: var(--dw-space-2xl);
    background: var(--dw-bg-card);
    border: 1px dashed var(--dw-border-gold);
    border-radius: var(--dw-radius-lg);
}

/* ---- Server-rendered product cards ---- */
body.app-theme .dw-product-listing .single-makal-product,
body.app-theme .prod-list .single-makal-product {
    background: var(--dw-bg-card);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-lg);
    overflow: hidden;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform var(--dw-duration-slow) var(--dw-ease), box-shadow var(--dw-duration-slow) var(--dw-ease), border-color var(--dw-duration) var(--dw-ease);
}

    body.app-theme .dw-product-listing .single-makal-product:hover,
    body.app-theme .prod-list .single-makal-product:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px var(--dw-glow-gold);
        border-color: var(--dw-border-gold-strong);
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-img,
    body.app-theme .prod-list .single-makal-product .pro-img {
        position: relative;
        background: var(--dw-bg-alt);
        overflow: hidden;
    }

        body.app-theme .dw-product-listing .single-makal-product .pro-img a,
        body.app-theme .prod-list .single-makal-product .pro-img a {
            display: block;
        }

        body.app-theme .dw-product-listing .single-makal-product .pro-img img,
        body.app-theme .prod-list .single-makal-product .pro-img img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
            transition: transform var(--dw-duration-slow) var(--dw-ease);
        }

    body.app-theme .dw-product-listing .single-makal-product:hover .pro-img img,
    body.app-theme .prod-list .single-makal-product:hover .pro-img img {
        transform: scale(1.04);
    }

    body.app-theme .dw-product-listing .single-makal-product .sticker-new,
    body.app-theme .prod-list .single-makal-product .sticker-new,
    body.app-theme .dw-product-listing .single-makal-product .sticker-sale {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        background: var(--dw-gradient-cta) !important;
        color: var(--dw-bg-primary) !important;
        font-family: var(--dw-font-body);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 5px 10px;
        border-radius: var(--dw-radius-sm);
        line-height: 1.2;
    }

    body.app-theme .dw-product-listing .single-makal-product .quick-view-pro,
    body.app-theme .prod-list .single-makal-product .quick-view-pro {
        display: none;
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-content,
    body.app-theme .prod-list .single-makal-product .pro-content {
        padding: var(--dw-space-sm);
        /* display: flex; */
        flex-direction: column;
        /* flex: 1 1 auto; */
        /* gap: 6px; */
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-title,
    body.app-theme .prod-list .single-makal-product .pro-title {
        margin: 0;
        font-size: 1rem;
        line-height: 1.35;
        margin-bottom: 10px;
    }

        body.app-theme .dw-product-listing .single-makal-product .pro-title a,
        body.app-theme .prod-list .single-makal-product .pro-title a {
            /* font-family: var(--dw-font-editorial); */
            color: var(--dw-text-primary) !important;
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color var(--dw-duration) var(--dw-ease);
        }

            body.app-theme .dw-product-listing .single-makal-product .pro-title a:hover,
            body.app-theme .prod-list .single-makal-product .pro-title a:hover {
                color: var(--dw-gold-premium) !important;
            }

    body.app-theme .dw-product-listing .single-makal-product .product-item_code,
    body.app-theme .dw-product-listing .single-makal-product .product-qty,
    body.app-theme .prod-list .single-makal-product .product-item_code,
    body.app-theme .prod-list .single-makal-product .product-qty {
        /* display: block; */
        color: var(--dw-text-subtle) !important;
        font-size: 14px;
        line-height: 1.4;
        /* margin-top: 10px; */
        /* float: right; */
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-actions,
    body.app-theme .prod-list .single-makal-product .pro-actions {
        margin-top: 10px;
        /* padding-top: var(--dw-space-sm); */
        display: inline-block;
        flex-wrap: wrap;
        /* align-items: center; */
        er;
        */
        /* justify-content: space-between; */
        gap: 10px;
        /* border-top: 1px solid var(--dw-border-gold); */
    }

    body.app-theme .dw-product-listing .single-makal-product .price,
    body.app-theme .prod-list .single-makal-product .price {
        color: var(--dw-gold-premium) !important;
        font-family: var(--dw-font-body);
        font-weight: 700;
        font-size: 1.1375rem;
    }

    body.app-theme .dw-product-listing .single-makal-product .add-to-cart,
    body.app-theme .dw-product-listing .single-makal-product .actions-primary a,
    body.app-theme .prod-list .single-makal-product .add-to-cart,
    body.app-theme .prod-list .single-makal-product .actions-primary a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 16px;
        background: var(--dw-gradient-cta) !important;
        color: var(--dw-bg-primary) !important;
        border: none !important;
        border-radius: var(--dw-radius-sm);
        font-family: var(--dw-font-body);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        transition: transform var(--dw-duration) var(--dw-ease), box-shadow var(--dw-duration) var(--dw-ease);
    }

        body.app-theme .dw-product-listing .single-makal-product .add-to-cart:hover,
        body.app-theme .dw-product-listing .single-makal-product .actions-primary a:hover,
        body.app-theme .prod-list .single-makal-product .add-to-cart:hover,
        body.app-theme .prod-list .single-makal-product .actions-primary a:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px var(--dw-glow-gold);
            color: var(--dw-bg-primary) !important;
        }

        body.app-theme .dw-product-listing .single-makal-product .actions-primary a.disabled,
        body.app-theme .dw-product-listing .single-makal-product .actions-primary a.button.disabled,
        body.app-theme .prod-list .single-makal-product .actions-primary a.disabled,
        body.app-theme .prod-list .single-makal-product .actions-primary a.button.disabled {
            background: var(--dw-bg-alt) !important;
            color: var(--dw-text-subtle) !important;
            border: 1px solid var(--dw-border-gold) !important;
            box-shadow: none !important;
            transform: none !important;
            cursor: not-allowed;
            pointer-events: none;
        }

/* ---- Legacy placeholder card markup ---- */
body.app-theme .new-shop-card {
    background: var(--dw-bg-card) !important;
    border: 1px solid var(--dw-border-gold) !important;
    border-radius: var(--dw-radius-lg) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
    transition: transform var(--dw-duration-slow) var(--dw-ease), box-shadow var(--dw-duration-slow) var(--dw-ease);
    height: 100%;
}

    body.app-theme .new-shop-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 40px var(--dw-glow-gold) !important;
    }

body.app-theme .new-shop-card-img img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    background: var(--dw-bg-alt);
}

body.app-theme .new-product-bg {
    background: transparent !important;
    padding: var(--dw-space-md) !important;
}

body.app-theme .new-prod-sub-title {
    font-family: var(--dw-font-editorial);
    color: var(--dw-text-primary) !important;
    font-size: 1rem;
}

body.app-theme .new-shop-card p {
    color: var(--dw-gold-premium) !important;
    font-weight: 600;
}

body.app-theme .new-shop-card .btn-primary {
    background: var(--dw-gradient-cta) !important;
    border: none !important;
    color: var(--dw-bg-primary) !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: var(--dw-radius-sm);
    min-height: 40px;
}

body.app-theme .new-shop-card .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--dw-border-gold-strong) !important;
    color: var(--dw-gold-premium) !important;
    border-radius: var(--dw-radius-sm);
    min-height: 40px;
}

body.app-theme .offer-badge {
    background: var(--dw-gold-dark) !important;
    color: var(--dw-text-primary) !important;
}

body.app-theme .star-font,
body.app-theme .star-bg {
    color: var(--dw-gold-premium) !important;
}

/* Categories sidebar (hidden by default, themed if shown) */
body.app-theme .Categoriesdata {
    background: var(--dw-bg-card);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-lg);
    overflow: hidden;
}

    body.app-theme .Categoriesdata .categories,
    body.app-theme .Categoriesdata .card-header {
        background: var(--dw-bg-section) !important;
        color: var(--dw-gold-premium) !important;
        border-bottom: 1px solid var(--dw-border-gold);
        font-family: var(--dw-font-display);
    }

    body.app-theme .Categoriesdata .list-group-item {
        background: transparent;
        border-color: var(--dw-border-gold);
    }

        body.app-theme .Categoriesdata .list-group-item a {
            color: var(--dw-text-muted);
        }

            body.app-theme .Categoriesdata .list-group-item a:hover {
                color: var(--dw-gold-premium);
            }

/* ---- Product detail page ---- */
.dw-product-detail {
    padding: var(--dw-space-2xl) 0 var(--dw-space-3xl);
    background: var(--dw-bg-primary);
}

.dw-product-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dw-space-xl);
}

@media (min-width: 992px) {
    .dw-product-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--dw-space-2xl);
    }
}

.dw-product-gallery {
    background: var(--dw-bg-card);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-lg);
    padding: var(--dw-space-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--dw-space-sm);
    min-width: 0;
}

/* Main product image stage */
.dw-gallery-main,
body.app-theme .dw-product-gallery #div_MultiBigImg,
body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-height: min(520px, 70vh);
    min-height: 240px;
    padding: var(--dw-space-sm);
    background: var(--dw-bg-alt);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-md);
    overflow: hidden;
    box-sizing: border-box;
}

/* Hide inactive carousel-style items (variant AJAX markup) */
.dw-gallery-main .item,
body.app-theme .dw-product-gallery #div_MultiBigImg .item,
body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] .item {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.dw-gallery-main .item.active,
body.app-theme .dw-product-gallery #div_MultiBigImg .item.active,
body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] .item.active {
    display: flex !important;
}

/* Main image — never stretch/crop */
.dw-gallery-main > img,
.dw-gallery-main .item > img,
.dw-gallery-main img.xzoom,
body.app-theme .dw-product-gallery #div_MultiBigImg > img,
body.app-theme .dw-product-gallery #div_MultiBigImg .item > img,
body.app-theme .dw-product-gallery #div_MultiBigImg img.xzoom,
body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] > img,
body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] .item > img,
body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] img.xzoom,
body.app-theme .dw-product-gallery .xzoom {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    border: none !important;
    border-radius: var(--dw-radius-sm) !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto;
    background: transparent;
    display: block;
}

/* Thumbnail strip */
.dw-gallery-thumbs,
body.app-theme .dw-product-gallery .left-icon,
body.app-theme .dw-product-gallery #div_MultiProdScrollImg,
body.app-theme .dw-product-gallery [id$="div_MultiProdScrollImg"] {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 4px 2px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--dw-gold-dark) transparent;
    list-style: none;
}

.dw-gallery-thumbs::-webkit-scrollbar,
body.app-theme .dw-product-gallery .left-icon::-webkit-scrollbar {
    height: 4px;
}

.dw-gallery-thumbs::-webkit-scrollbar-thumb,
body.app-theme .dw-product-gallery .left-icon::-webkit-scrollbar-thumb {
    background: var(--dw-gold-dark);
    border-radius: 4px;
}

/* Thumbnail hit targets (anchor or li) */
.dw-gallery-thumbs > a,
.dw-gallery-thumbs > li,
body.app-theme .dw-product-gallery .left-icon > a,
body.app-theme .dw-product-gallery .left-icon > li,
body.app-theme .dw-product-gallery #div_MultiProdScrollImg > a,
body.app-theme .dw-product-gallery #div_MultiProdScrollImg > li,
body.app-theme .dw-product-gallery [id$="div_MultiProdScrollImg"] > a,
body.app-theme .dw-product-gallery [id$="div_MultiProdScrollImg"] > li {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    margin: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dw-bg-alt);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-sm);
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color var(--dw-duration) var(--dw-ease),
                box-shadow var(--dw-duration) var(--dw-ease),
                transform var(--dw-duration) var(--dw-ease);
    list-style: none;
    text-decoration: none;
}

.dw-gallery-thumbs > a:hover,
.dw-gallery-thumbs > li:hover,
body.app-theme .dw-product-gallery .left-icon > a:hover,
body.app-theme .dw-product-gallery .left-icon > li:hover,
body.app-theme .dw-product-gallery #div_MultiProdScrollImg > a:hover,
body.app-theme .dw-product-gallery #div_MultiProdScrollImg > li:hover {
    border-color: var(--dw-border-gold-strong);
    box-shadow: 0 4px 14px var(--dw-glow-gold);
    transform: translateY(-2px);
}

.dw-gallery-thumbs > a:focus,
.dw-gallery-thumbs > a:focus-visible,
.dw-gallery-thumbs > li.active,
body.app-theme .dw-product-gallery .left-icon > a:focus,
body.app-theme .dw-product-gallery .left-icon > a:focus-visible,
body.app-theme .dw-product-gallery .left-icon > li.active {
    outline: none;
    border-color: var(--dw-gold-premium);
    box-shadow: 0 0 0 2px var(--dw-glow-gold);
}

/* Thumbnail images — contain, never stretch */
.dw-gallery-thumbs img,
.dw-gallery-thumbs .left-circle,
body.app-theme .dw-product-gallery .left-icon img,
body.app-theme .dw-product-gallery .left-circle,
body.app-theme .dw-product-gallery #div_MultiProdScrollImg img,
body.app-theme .dw-product-gallery [id$="div_MultiProdScrollImg"] img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: block;
}

.dw-product-info h3 {
    /* font-family: var(--dw-font-display); */
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--dw-text-primary);
    border-bottom: 1px solid var(--dw-border-gold) !important;
    padding-bottom: var(--dw-space-sm);
}

body.app-theme .dw-product-info small {
    color: var(--dw-text-muted);
    font-size: 0.9375rem;
}

body.app-theme .dw-product-info h4 {
    /* font-family: var(--dw-font-editorial); */
    color: var(--dw-gold-premium);
    font-size: 1.5rem;
    margin: var(--dw-space-sm) 0;
}

body.app-theme .product-descr {
    background: var(--dw-bg-card);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-md);
    padding: var(--dw-space-md);
    max-height: 280px;
    color: var(--dw-text-muted);
}

    body.app-theme .product-descr::-webkit-scrollbar {
        width: 6px;
    }

    body.app-theme .product-descr::-webkit-scrollbar-thumb {
        background: var(--dw-gold-dark);
        border-radius: 3px;
    }

body.app-theme .add-cart-button,
body.app-theme .add_to_cart,
body.app-theme .btn-submit {
    background: var(--dw-gradient-cta) !important;
    color: var(--dw-bg-primary) !important;
    border: none !important;
    border-radius: var(--dw-radius-sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 28px !important;
    width: auto !important;
    min-width: 200px;
    min-height: 48px;
    transition: transform var(--dw-duration) var(--dw-ease), box-shadow var(--dw-duration) var(--dw-ease);
}

    body.app-theme .add-cart-button:hover,
    body.app-theme .add_to_cart:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px var(--dw-glow-gold);
        color: var(--dw-bg-primary) !important;
    }

    body.app-theme .add-cart-button.disabled,
    body.app-theme .btn-submit.disabled {
        background: var(--dw-bg-card) !important;
        color: var(--dw-text-subtle) !important;
        border: 1px solid var(--dw-border-gold) !important;
    }

.dw-product-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dw-space-sm);
    margin: var(--dw-space-lg) 0;
}

@media (min-width: 576px) {
    .dw-product-benefits {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dw-benefit-item {
    text-align: center;
    padding: var(--dw-space-sm);
    background: var(--dw-bg-card);
    border: 1px solid var(--dw-border-gold);
    border-radius: var(--dw-radius-sm);
}

    .dw-benefit-item i {
        font-size: 1.25rem;
        color: var(--dw-gold-premium);
        display: block;
        margin-bottom: 4px;
    }

    .dw-benefit-item span {
        font-size: 11px;
        color: var(--dw-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

body.app-theme #div_detail.faq {
    background: var(--dw-bg-section);
    padding: var(--dw-space-2xl) var(--dw-space-lg);
    border-top: 1px solid var(--dw-border-gold);
}

    body.app-theme #div_detail.faq h2,
    body.app-theme #div_detail.faq h3 {
        font-family: var(--dw-font-display);
        color: var(--dw-text-primary);
    }

body.app-theme .left-circle {
    border-color: var(--dw-border-gold) !important;
    background: transparent !important;
}

body.app-theme .left-icon img {
    border-radius: 4px;
}

body.app-theme .products .title {
    font-family: var(--dw-font-display);
    color: var(--dw-gold-premium) !important;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .dw-gallery-main,
    body.app-theme .dw-product-gallery #div_MultiBigImg,
    body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] {
        max-height: min(420px, 60vh);
        min-height: 220px;
    }
}

@media (max-width: 767.98px) {
    .dw-page-hero,
    .dw-inner-hero.dw-page-hero {
        padding: var(--dw-space-xl) 0 var(--dw-space-lg);
    }

    .dw-product-listing {
        padding: var(--dw-space-xl) 0 var(--dw-space-2xl);
    }

    .dw-product-gallery {
        padding: var(--dw-space-sm);
    }

    .dw-gallery-main,
    body.app-theme .dw-product-gallery #div_MultiBigImg,
    body.app-theme .dw-product-gallery [id$="div_MultiBigImg"] {
        max-height: min(360px, 55vh);
        min-height: 200px;
        aspect-ratio: 1 / 1;
    }

    .dw-gallery-thumbs > a,
    .dw-gallery-thumbs > li,
    body.app-theme .dw-product-gallery .left-icon > a,
    body.app-theme .dw-product-gallery .left-icon > li,
    body.app-theme .dw-product-gallery #div_MultiProdScrollImg > a,
    body.app-theme .dw-product-gallery #div_MultiProdScrollImg > li,
    body.app-theme .dw-product-gallery [id$="div_MultiProdScrollImg"] > a,
    body.app-theme .dw-product-gallery [id$="div_MultiProdScrollImg"] > li {
        width: 64px;
        height: 64px;
    }

    body.app-theme .prod-list {
        gap: var(--dw-space-sm);
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-img img,
    body.app-theme .prod-list .single-makal-product .pro-img img {
        height: 160px;
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-content,
    body.app-theme .prod-list .single-makal-product .pro-content {
        padding: 12px;
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-title a,
    body.app-theme .prod-list .single-makal-product .pro-title a {
        font-size: 0.9rem;
    }

    body.app-theme .dw-product-listing .single-makal-product .pro-actions,
    body.app-theme .prod-list .single-makal-product .pro-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.app-theme .dw-product-listing .single-makal-product .add-to-cart,
    body.app-theme .dw-product-listing .single-makal-product .actions-primary a,
    body.app-theme .prod-list .single-makal-product .add-to-cart,
    body.app-theme .prod-list .single-makal-product .actions-primary a {
        width: 100%;
        min-height: 44px;
    }

    body.app-theme .product-details-content h2 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        word-break: break-word;
    }

    body.app-theme .new-shop-card-img img {
        width: 100%;
        height: auto;
        max-height: 180px;
        object-fit: cover;
    }

    body.app-theme .dw-product-actions .btn,
    body.app-theme #div_AddBtn a,
    body.app-theme #div_AddBtn input,
    body.app-theme #div_AddBtn button {
        min-height: 48px;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dw-product-gallery {
        margin-bottom: var(--dw-space-md);
    }
}