/**
 * Acme PDP mobile gallery — match desktop Frame 330 ratios.
 * Desktop: main 711×711, thumbs 170×170 → thumb/main = 170/711.
 * Load AFTER acme-pdp.css + acme-header.css.
 */
@media (max-width: 1023px) {
    body.acme-pdp-page {
        --acme-pdp-m-thumb-ratio: 0.239099859; /* 170 / 711 */
        --acme-pdp-m-thumb-gap: 0.625rem; /* 10px */
        --acme-pdp-m-stage-gap: clamp(0.75rem, 5.6vw, 1.5rem); /* ~40/711 of stage */
    }

    body.acme-pdp-page .acme-pdp {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.acme-pdp-page .acme-pdp__gallery,
    body.acme-pdp-page .acme-pdp__info {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        align-self: stretch !important;
        background: #fff !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.acme-pdp-page .acme-pdp__panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-slider,
    body.acme-pdp-page .acme-pdp__gallery [data-slider-type="gallery"] {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        gap: var(--acme-pdp-m-stage-gap) !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Main stage — same 1:1 as desktop 711×711 */
    body.acme-pdp-page .acme-pdp__gallery .snap-slider > .relative {
        order: 1 !important;
        position: relative !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        border-radius: 0.75rem !important;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.07) !important;
        background: #f8f9fc !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main,
    body.acme-pdp-page .acme-pdp__gallery [data-track] {
        order: 1 !important;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0.75rem !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        background: #f8f9fc !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main::-webkit-scrollbar,
    body.acme-pdp-page .acme-pdp__gallery [data-track]::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main > *:not(.acme-gallery-slide--hidden),
    body.acme-pdp-page .acme-pdp__gallery [data-track] > *:not(.acme-gallery-slide--hidden) {
        position: relative !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        scroll-snap-align: start !important;
        overflow: hidden !important;
    }

    /* Alpine <template> must never become a flex slide (forces two half-images) */
    body.acme-pdp-page .acme-pdp__gallery #gallery-main > template,
    body.acme-pdp-page .acme-pdp__gallery [data-track] > template {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main button,
    body.acme-pdp-page .acme-pdp__gallery #gallery-main .stack,
    body.acme-pdp-page .acme-pdp__gallery [data-track] button,
    body.acme-pdp-page .acme-pdp__gallery [data-track] .stack {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main picture,
    body.acme-pdp-page .acme-pdp__gallery [data-track] picture {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main img,
    body.acme-pdp-page .acme-pdp__gallery [data-track] img,
    body.acme-pdp-page .acme-pdp__gallery .acme-gallery-slide img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        aspect-ratio: auto !important;
    }

    /* Thumbs — square tiles at 170/711 of main width (same as desktop) */
    body.acme-pdp-page .acme-pdp__gallery .snap-pager,
    body.acme-pdp-page .acme-pdp__gallery [class*="snap-pager"],
    body.acme-pdp-page .acme-pdp__gallery [data-pager] {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: var(--acme-pdp-m-thumb-gap) !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-pager::-webkit-scrollbar,
    body.acme-pdp-page .acme-pdp__gallery [class*="snap-pager"]::-webkit-scrollbar,
    body.acme-pdp-page .acme-pdp__gallery [data-pager]::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-pager .snap-marker,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager a.snap-marker,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager button.snap-marker,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager .snap-marker.stack {
        position: relative !important;
        flex: 0 0 calc(100% * var(--acme-pdp-m-thumb-ratio)) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: calc(100% * var(--acme-pdp-m-thumb-ratio)) !important;
        min-width: calc(100% * var(--acme-pdp-m-thumb-ratio)) !important;
        max-width: calc(100% * var(--acme-pdp-m-thumb-ratio)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e0e0e0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-pager .snap-marker img,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager a.snap-marker img,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager button.snap-marker img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        aspect-ratio: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-pager .snap-marker[aria-current="true"],
    body.acme-pdp-page .acme-pdp__gallery .snap-pager a.snap-marker[aria-current="true"],
    body.acme-pdp-page .acme-pdp__gallery .snap-pager .snap-marker.is-active,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager a.snap-marker.is-active {
        border: 2px solid #1f99ce !important;
    }

    body.acme-pdp-page .acme-pdp__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    body.acme-pdp-page .acme-pdp__details-wrap,
    body.acme-pdp-page .acme-pdp__similar {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 1rem !important;
        box-sizing: border-box !important;
    }
}

/* FINAL — beat every 260px / 16.25rem lock leftover in acme-pdp.css */
@media (max-width: 1023px) {
    body.acme-pdp-page .acme-pdp__gallery .snap-slider > .relative {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery #gallery-main,
    body.acme-pdp-page .acme-pdp__gallery [data-track] {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-pager .snap-marker,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager a.snap-marker,
    body.acme-pdp-page .acme-pdp__gallery .snap-pager button.snap-marker {
        flex: 0 0 calc(100% * 170 / 711) !important;
        width: calc(100% * 170 / 711) !important;
        min-width: calc(100% * 170 / 711) !important;
        max-width: calc(100% * 170 / 711) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* ========== v20 — mobile main stage: visible 1:1 (beat 16.25rem lock) ========== */
@media (max-width: 1023px) {
    html body.acme-pdp-page .acme-pdp__gallery,
    html body.acme-pdp-page .acme-pdp__gallery .snap-slider,
    html body.acme-pdp-page .acme-pdp__gallery [data-slider-type="gallery"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html body.acme-pdp-page .acme-pdp__gallery .snap-slider > .relative {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: min(100vw - 2rem, 28rem) !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    html body.acme-pdp-page .acme-pdp__gallery #gallery-main,
    html body.acme-pdp-page .acme-pdp__gallery [data-track] {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

    html body.acme-pdp-page .acme-pdp__gallery #gallery-main img,
    html body.acme-pdp-page .acme-pdp__gallery [data-track] img,
    html body.acme-pdp-page .acme-pdp__gallery .acme-gallery-slide img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: #f8f9fc !important;
    }
}

/* v21 — tighter header→gallery; keep 1:1 (beat 16.25rem locks) */
@media (max-width: 1023px) {
    body.acme-pdp-page .page-main,
    body.acme-pdp-page #maincontent {
        padding-top: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery {
        padding-top: 0.5rem !important;
        margin-top: 0 !important;
    }

    body.acme-pdp-page .acme-pdp__gallery .snap-slider > .relative {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* v22 — phone only: force main above + horizontal thumb slider (beat tablet-stack left rail) */
@media (max-width: 743px) {
    html body.acme-pdp-page .acme-pdp__gallery .snap-slider,
    html body.acme-pdp-page .acme-pdp__gallery [data-slider-type="gallery"],
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery .snap-slider,
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery [data-slider-type="gallery"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html body.acme-pdp-page .acme-pdp__gallery .snap-slider > .relative,
    html body.acme-pdp-page .acme-pdp__gallery #gallery-main,
    html body.acme-pdp-page .acme-pdp__gallery [data-track],
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery .snap-slider > .relative,
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery #gallery-main,
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery [data-track] {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.acme-pdp-page .acme-pdp__gallery .snap-pager,
    html body.acme-pdp-page .acme-pdp__gallery [data-pager],
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery .snap-pager,
    html body.acme-pdp-page.acme-pdp--tablet-stack .acme-pdp__gallery [data-pager] {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}