/*
 * Canonical wedding-card PDP responsive adapter.
 *
 * The public desktop URL is also the canonical mobile URL.  This file owns
 * only the layout bridge from the canonical document tree to small screens;
 * component styling remains in product-detail-modern.css.
 */

body.pdp-modern-page .pdp-mobile-gallery-counter-wrap[hidden] {
    display: none;
}

@media (max-width: 767px) {
    body.pdp-modern-page .pdp-product-shell {
        width: 100% !important;
        padding-top: 0 !important;
    }

    body.pdp-modern-page #document_middle {
        width: 100% !important;
        margin: 0 !important;
    }

    body.pdp-modern-page .pdp-hero-grid {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    body.pdp-modern-page .pdp-mobile-product-identity {
        width: var(--pdp-mobile-content-width) !important;
        margin: 0 auto !important;
        padding: 0 0 18px !important;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdp-product-eyebrow {
        margin: 0 0 5px !important;
        color: var(--pdp-subtle);
        font-size: var(--pdp-type-meta-size) !important;
        font-weight: 500;
        line-height: var(--pdp-type-meta-line) !important;
        letter-spacing: 0;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdNameGroup,
    body.pdp-modern-page .pdp-mobile-product-identity .pdNameGroup > ul {
        width: 100%;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdNameGroup > ul > li:first-child {
        display: flex;
        width: 100%;
        min-height: 30px;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdp-product-title {
        margin: 0 !important;
        color: var(--pdp-ink);
        font-size: var(--pdp-type-product-size) !important;
        font-weight: 700 !important;
        line-height: var(--pdp-type-product-line) !important;
        letter-spacing: -.02em;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdp-product-meta-row {
        margin-top: 6px !important;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdp-product-code {
        color: var(--pdp-subtle);
        font-size: var(--pdp-type-body-size) !important;
        line-height: var(--pdp-type-body-line) !important;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pd_prod_icon_group {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pdp-modern-page .pdp-mobile-product-identity .pdDesc {
        width: 100%;
        margin: 8px 0 0 !important;
        color: var(--pdp-muted);
        font-size: var(--pdp-type-body-size) !important;
        line-height: var(--pdp-type-body-line) !important;
        word-break: keep-all;
    }

    body.pdp-modern-page .pdp-hero-gallery {
        order: 2;
        width: 100%;
    }

    body.pdp-modern-page .pdp-hero-purchase {
        order: 3;
        width: var(--pdp-mobile-content-width);
        margin: var(--pdp-space-32) auto 0;
    }

    body.pdp-modern-page .pdp-hero-purchase .product_detail_right_all_wrapper,
    body.pdp-modern-page .pdp-hero-purchase #product_detail_price_area {
        width: 100% !important;
    }

    body.pdp-modern-page .pdp-hero-gallery .sc-preview-size-base,
    body.pdp-modern-page .pdp-hero-gallery #photoz_area {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 5 / 6;
    }

    body.pdp-modern-page .pdp-hero-gallery #photoz_area {
        overflow: hidden;
        background-position: center !important;
        background-size: contain !important;
    }

    body.pdp-modern-page .pdp-hero-gallery .photoz_bottom_banner {
        width: 100%;
    }

    body.pdp-modern-page .pdp-thumbnail-gap {
        height: var(--pdp-space-16);
        clear: both;
    }

    body.pdp-modern-page .pdp-thumbnail-rail {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0 var(--pdp-space-4);
        box-sizing: border-box;
    }

    body.pdp-modern-page #product_detail_photo_e_slide {
        width: 100% !important;
        height: 104px !important;
        min-height: 104px;
        overflow: hidden;
        touch-action: pan-y;
    }

    body.pdp-modern-page #product_detail_photo_e_slide .swiper-wrapper {
        height: 104px !important;
        align-items: stretch;
    }

    body.pdp-modern-page #product_detail_photo_e_slide .swiper-slide {
        width: 88px !important;
        height: 104px !important;
        flex: 0 0 88px;
        border-radius: var(--pdp-radius-control, 8px);
    }

    body.pdp-modern-page #product_detail_photo_e_slide :is(.photo_e_img, .set_skin_slide_btn, .customizer_mini_wrapper) {
        width: 100% !important;
        height: 100% !important;
    }

    body.pdp-modern-page .pdp-mobile-gallery-counter-wrap {
        position: absolute;
        right: var(--pdp-space-12);
        bottom: var(--pdp-space-12) !important;
        z-index: 12;
        display: block;
    }
}