/* =========================================================
   PRODUCT MODAL - RESPONSIVE MOBILE
   Add AFTER style1.css
   ========================================================= */

/* Tablet */
@media (max-width: 1024px) {

    .product-modal {
        padding: 20px;
    }

    .product-modal-dialog {
        width: 100%;
        max-width: 900px;
        max-height: 92vh;
        border-radius: 22px;
    }

    .product-modal-content {
        grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
        max-height: 92vh;
    }

    .product-modal-gallery {
        min-height: 500px;
        padding: 30px;
    }

    .product-modal-main-image,
    .product-modal-main-image img {
        height: 360px;
    }

    .product-modal-info {
        padding: 45px 35px 40px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {

    /* Prevent page behind modal from scrolling */
    body:has(.product-modal.is-open) {
        overflow: hidden;
    }

    .product-modal {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    .product-modal-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 94dvh;
        border-radius: 22px 22px 0 0;
        overflow: hidden;

        transform: translateY(30px);
    }

    .product-modal.is-open .product-modal-dialog {
        transform: translateY(0);
    }

    /*
     * Important:
     * One column means the image is shown first,
     * followed by the complete product description.
     */
    .product-modal-content {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-height: 94dvh;
        overflow-y: auto;
        overflow-x: hidden;

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

    /* -----------------------------------------
       CLOSE BUTTON
       ----------------------------------------- */
    .product-modal-close {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;

        background: rgba(255,255,255,.96);
    }

    /* -----------------------------------------
       PRODUCT IMAGE
       ----------------------------------------- */
    .product-modal-gallery {
        position: relative;
        top: auto;

        width: 100%;
        min-height: auto;
        height: auto;

        padding: 22px 18px 15px;

        flex-shrink: 0;
    }

    .product-modal-main-image {
        width: 100%;
        height: min(58vw, 300px);

        min-height: 210px;
        max-height: 300px;

        align-items: center;
        justify-content: center;
    }

    .product-modal-main-image img {
        width: 100%;
        height: 100%;

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

        object-fit: contain;
    }

    .product-image-glow {
        width: 180px;
        height: 180px;
        filter: blur(25px);
    }

    /* Gallery arrows */
    .gallery-nav {
        width: 36px;
        height: 36px;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }

    /* Thumbnails */
    .product-modal-thumbnails {
        width: 100%;
        max-width: 100%;

        margin-top: 10px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;

        gap: 7px;

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

        padding: 3px 2px 5px;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .product-modal-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .product-modal-thumbnail {
        width: 52px;
        height: 52px;

        min-width: 52px;
        min-height: 52px;
    }

    /* -----------------------------------------
       PRODUCT INFORMATION
       ----------------------------------------- */
    .product-modal-info {
        width: 100%;
        min-width: 0;

        padding: 25px 20px 35px;

        flex-shrink: 0;
    }

    .product-info-eyebrow {
        margin-bottom: 7px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    .product-modal-title {
        font-size: clamp(24px, 7vw, 32px);
        line-height: 1.15;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .product-modal-short {
        margin-top: 12px;

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

    .product-divider {
        width: 100%;
        margin: 10px 0 15px;
    }

    /* -----------------------------------------
       DESCRIPTION / RICH CONTENT
       ----------------------------------------- */
    .product-info-section {
        font-family: 'Outfit';
        margin-bottom: 22px;
    }

    .product-section-heading {
        
        gap: 8px;
        margin-bottom: 9px;
    }

    .product-section-heading h3 {
        font-family: "Outfit", sans-serif;
        font-size: 11px;
    }

    .product-section-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .product-rich-content {
        width: 100%;
        max-width: 100%;

        font-size: 13px;
        line-height: 1.75;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .product-rich-content p {
        margin-bottom: 10px;
    }

    .product-rich-content ul,
    .product-rich-content ol {
        padding-left: 18px;
        margin-left: 0;
    }

    .product-rich-content img,
    .product-rich-content iframe,
    .product-rich-content video {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        border-radius: 10px;
    }

    .product-rich-content table {
        display: block;

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

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .product-rich-content pre,
    .product-rich-content code {
        max-width: 100%;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    /* -----------------------------------------
       PURCHASE AREA
       ----------------------------------------- */
    .product-purchase {
        margin-top: 22px;
        padding: 16px;

        border-radius: 14px;
    }

    .purchase-heading {
        margin-bottom: 12px;
        gap: 10px;
    }

    .purchase-heading h3 {
        font-size: 16px;
    }

    /* Buttons / marketplace area */
    .product-purchase .action-buttons,
    .product-purchase .purchase-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .product-purchase button,
    .product-purchase a {
        min-height: 44px;
    }

    /* -----------------------------------------
       BADGE
       ----------------------------------------- */
    .product-gallery-badge {
        top: 12px;
        left: 14px;
        z-index: 10;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */
@media (max-width: 380px) {

    .product-modal-dialog {
        max-height: 96dvh;
        border-radius: 18px 18px 0 0;
    }

    .product-modal-content {
        max-height: 96dvh;
    }

    .product-modal-gallery {
        padding: 18px 14px 10px;
    }

    .product-modal-main-image {
        height: 230px;
        min-height: 190px;
    }

    .product-modal-info {
        padding: 20px 16px 30px;
    }

    .product-modal-title {
        
        font-size: 24px;
    }

    .product-modal-short {
        font-size: 13px;
    }

    .product-rich-content {
        font-size: 12.5px;
    }

    .product-modal-thumbnail {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
}


/* =========================================================
   VERY SMALL / LANDSCAPE PHONES
   ========================================================= */
@media (max-width: 767px) and (max-height: 500px) {

    .product-modal {
        align-items: center;
        padding: 8px;
    }

    .product-modal-dialog {
        max-height: 96dvh;
        border-radius: 18px;
    }

    .product-modal-gallery {
        display: none;
    }

    .product-modal-info {
        padding-top: 48px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

    .product-modal,
    .product-modal-dialog,
    .product-modal-main-image img,
    .product-modal-close {
        transition: none !important;
    }
}