/* ==========================================================================
   AKAK — shared adaptive layout
   --------------------------------------------------------------------------
   Every page was authored as a fixed 390–440px phone column, which leaves an
   iPad showing a narrow strip of UI inside a large empty screen (App Store
   guideline 4 — "not optimised to support all screen sizes").

   This sheet keeps phones exactly as they are and progressively widens the
   column, splits the card lists into multiple columns and scales the type up
   on tablet / desktop widths.

   Load it LAST in <head> (after the page's own <style>) on every page.
   ========================================================================== */

/* ── Safe areas (notch / home indicator) ─────────────────────────────────── */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.app-footer {
    padding-bottom: env(safe-area-inset-bottom);
}

img,
video,
canvas {
    max-width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   TABLET  (iPad portrait — 820pt wide and up)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {

    .app {
        max-width: 720px !important;
    }

    /* Fixed / absolutely positioned chrome must follow the wider column. */
    .app-footer {
        max-width: 720px !important;
    }

    .pd-panel {
        max-width: 720px !important;
    }

    .fab-search {
        right: max(22px, calc(50% - 360px + 22px)) !important;
    }

    /* ── Type scale ──────────────────────────────────────────────────────── */
    .section-head h3 {
        font-size: 20px;
    }

    .row-title {
        font-size: 15.5px;
    }

    .row-sub {
        font-size: 13px;
    }

    .card-title {
        font-size: 31px;
    }

    .brand-name {
        font-size: 46px;
    }

    .brand-fullname {
        font-size: 12.5px;
    }

    .subtitle {
        font-size: 14px;
    }

    .branch-name,
    .cp-name {
        font-size: 16px;
    }

    .branch-addr,
    .cp-phone,
    .helper {
        font-size: 13px;
    }

    /* ── Lists become grids so cards stop stretching to full width ─────────
       auto-fit keeps a lone card (e.g. a single branch) full width instead
       of stranding it in half a row. */
    .row-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 12px;
        align-items: start;
    }

    .branch-box {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 14px;
        align-items: start;
    }

    #stockList {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 12px;
        align-items: start;
    }

    #stockList .stock-card {
        margin-bottom: 0;
    }

    .results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .result-item img {
        height: 150px;
    }

    .tryon-stock-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        max-height: 420px !important;
    }

    .tryon-garment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ── Photo search: cap the viewfinder instead of letting it fill ─────── */
    .camera-wrap {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .cam-video {
        height: 52vh !important;
        max-height: 520px;
        min-height: 360px !important;
    }

    .twin-btns,
    .gallery-fallback,
    .cat-toggle,
    .cam-error,
    #camFallbackCS {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .preview-img {
        max-height: 320px;
    }

    .pd-hero {
        height: 380px;
    }

    /* Single-column pages read better with a little more breathing room. */
    .view {
        padding: 22px 22px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   LARGE TABLET / DESKTOP  (iPad landscape and up)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .app {
        max-width: 940px !important;
    }

    .app-footer {
        max-width: 940px !important;
    }

    .pd-panel {
        max-width: 940px !important;
    }

    .fab-search {
        right: max(24px, calc(50% - 470px + 24px)) !important;
    }

    .row-list,
    .branch-box,
    #stockList {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .results-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .tryon-stock-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .cam-video {
        height: 46vh !important;
        max-height: 560px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   SHORT / LANDSCAPE PHONES — keep the camera usable
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 560px) {
    .cam-video {
        height: 60vh !important;
        min-height: 200px !important;
    }
}
