/* ================================================================
   mobile-refresh.css — the cleaner phone layout (added 2026-10-11)
   ================================================================
   Phones only: every rule sits inside @media (max-width: 768px), so desktop
   never changes. Rules that need js/mobile-refresh.js to have rearranged the
   page are also scoped to html.kd-m2, which that script sets on phones.

   Pages: Pool of Designs, design-variation pages, the boutique category
   galleries, every product page, and the Bespoke Boutique menu.

   "Restore default mobile":  python3 tools/mobile_refresh.py restore
   (unlinks this file and the script from every page; the git tag
   mobile-default-2026-10-11 is the untouched site). Bring it back with
   python3 tools/mobile_refresh.py apply.
   ================================================================ */

@media (max-width: 768px) {

    /* ── 1. Gallery headings: Pool of Designs, Design Variations, categories ── */
    .container-snaps h3.title {
        font-size: 1.6rem !important;          /* was 2.1–2.4rem */
        letter-spacing: 3px !important;
    }
    .container-snaps .title-sub {
        font-size: 1rem !important;            /* was 1.3rem */
        letter-spacing: 2px !important;
    }
    .filter-toggle { gap: 0.4rem !important; }
    .filter-toggle .filter-btn {
        font-size: 1rem !important;            /* was 1.1rem, with wider spacing */
        letter-spacing: 2px !important;
        padding: 0.15rem 0.7rem !important;
    }

    /* ── 2. Product pages: logo left, Pool of Designs right, then "P1 · NAME" ── */
    html.kd-m2 .product-breadcrumb {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 0.6rem !important;
    }
    html.kd-m2 .product-breadcrumb > a.kd-m2-logo {
        display: block;
        width: 14px;                           /* the mark comes out ~11px tall: the Pool of Designs letters */
        height: 14px;
        font-size: 0 !important;               /* the "King Dhorajiya" text stays for screen readers */
        color: transparent !important;
        /* the monogram fills only ~30% of its image: zoom in, so the mark matches the pool page's */
        background: url('../images/KD_monogram.png') no-repeat center / 290%;
        flex-shrink: 0;
    }
    html.kd-m2 .product-breadcrumb > .product-home-link {
        font-size: 1.05rem !important;
        letter-spacing: 3px !important;
        text-transform: uppercase;
        white-space: nowrap;
    }
    html.kd-m2 .product-bb-link,
    html.kd-m2 .kd-m2-meta,
    html.kd-m2 .product-tagline { display: none !important; }
    html.kd-m2 .product-title-row { gap: 0.3rem !important; margin-bottom: 0.7rem !important; }
    html.kd-m2 .product-title-row h2 { margin-bottom: 0.5rem !important; }
    html.kd-m2 .product-title-row > div > p { gap: 0 !important; }
    .kd-m2-code { display: none; }
    html.kd-m2 .kd-m2-code { display: inline; }

    /* A taller viewer (the camera also comes closer, js/mobile-refresh.js) */
    html.kd-m2 .product-split .viewer-panel {
        height: 76vh !important;               /* was 60vh */
        min-height: 460px !important;
        max-height: none !important;
    }

    /* ── 3. The fabric name and its fibre on the viewer: 35% smaller ── */
    .cloth-cycle__name { font-size: 0.975rem !important; }   /* was 1.5rem */
    .cloth-cycle__type { font-size: 0.65rem !important; letter-spacing: 2px !important; }   /* was 1rem */

    /* ── 4. The 3D viewer's controls, smaller (2026-10-11, second pass) ── */
    /* Showcase | Turn pill and the hand under it: three quarters of their size */
    html.kd-m2 .viewer-panel .showcase {
        transform: scale(0.75) !important;
        transform-origin: top left !important;
    }
    html.kd-m2 .viewer-panel .view-pan {
        top: 3.3rem !important;                /* just under the smaller pill */
        transform: scale(0.75) !important;
        transform-origin: top left !important;
    }
    /* Design Only / Design Details, bottom right */
    html.kd-m2 .viewer-panel .design-only-btn,
    html.kd-m2 .viewer-panel .design-details-btn {
        transform: scale(0.65) !important;     /* was 0.85 */
        transform-origin: bottom right !important;
    }
    html.kd-m2 .viewer-panel .design-details-btn { bottom: 1.2rem !important; }
    html.kd-m2 .viewer-panel .design-only-btn { bottom: 3.2rem !important; }

    /* ── 5. "Select Fabric" tab: the way down past the tall viewer, and back ──
       A slim ivory pill fixed at the foot of the screen, in the Showcase pill's
       glass. Tap: glide to the fabrics; there it reads "View in 3D" and glides
       back up. It steps aside at the very bottom of the page. */
    .kd-m2-jump {
        position: fixed;
        left: 50%;
        bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.75rem 1.6rem 0.75rem 1.8rem;
        border: 1px solid #d6d6d6;
        border-radius: 999px;
        background: rgba(255,255,255,0.86);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 18px rgba(0,0,0,0.10);
        color: #1a1a1a;
        font-family: "Times New Roman", Times, serif;
        font-size: 1.1rem;
        letter-spacing: 4px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transform: translate(-50%, 0);
        opacity: 1;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .kd-m2-jump[hidden] { display: inline-flex; opacity: 0; pointer-events: none; transform: translate(-50%, 1.2rem); }
    .kd-m2-jump__rule { width: 1.4rem; height: 1px; background: rgba(100,70,0,0.45); }
    .kd-m2-jump svg {
        width: 1.1rem; height: 1.1rem; fill: none; stroke: rgba(100,70,0,0.8); stroke-width: 1.4;
        stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s ease;
        animation: kdM2Nudge 2.4s ease-in-out 1.2s 2;
    }
    .kd-m2-jump.is-up svg { transform: rotate(180deg); animation: none; }
    @keyframes kdM2Nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
    @media (prefers-reduced-motion: reduce) {
        .kd-m2-jump, .kd-m2-jump svg { transition: none; animation: none; }
    }

    /* ── 6. Trial on p1 (html.kd-m3): controls a fingertip can hit ──
       Search, the Colourist and Pan share one slim ivory rail on the right edge
       of the viewer, in the Showcase pill's glass, with gold hairlines between.
       Each slot is a 40px target around a small icon. The Showcase pill keeps its
       letters small but stands tall enough to tap, and Design Only / Design
       Details get room around them. */
    html.kd-m3 .kd-m3-rail {                  /* no capsule: just the icons, each in a 40px slot */
        position: absolute;
        top: 0.8rem;
        right: 0.6rem;
        z-index: 7;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    html.kd-m3 .kd-m3-slot {
        position: relative;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* the tools themselves, settled into their slots */
    html.kd-m3 .kd-m3-slot > * {
        position: static !important;
        top: auto !important; right: auto !important; left: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
    html.kd-m3 .kd-m3-slot > #kd-search-btn {
        display: grid; place-items: center;
        width: 40px; height: 40px; padding: 0;
        background: none; border: 0;
    }
    html.kd-m3 .kd-m3-slot > #kd-search-btn svg { width: 1.7rem !important; height: 1.7rem !important; }
    html.kd-m3 .kd-m3-slot > .kd-viewer-logo { width: 1.7rem !important; height: 1.7rem !important; }
    html.kd-m3 .kd-m3-slot > #view-pan {
        width: 40px !important; height: 40px !important;
        display: grid !important; place-items: center !important; padding: 0 !important;
        border-radius: 50% !important;
        border: 0 !important; box-shadow: none !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
    html.kd-m3 .kd-m3-slot > #view-pan[aria-pressed="true"] { background: rgba(255,240,205,0.95) !important; }
    html.kd-m3 .viewer-panel .kd-m3-slot > #view-pan { transform: none !important; }   /* outranks §4's three-quarter scale */
    html.kd-m3 .kd-m3-slot > #view-pan svg {
        width: 2rem !important; height: 2rem !important;   /* the palm comes out ~15px tall, like the other two */
        stroke-width: 1.4 !important;
    }

    /* Showcase, folded: the dots and the turn arrow, no words. A tap opens the full
       Showcase | Turn pill in its place (js/mobile-refresh.js, compactShowcase). */
    html.kd-m3 .viewer-panel:not(.kd-m3-sc-open) .showcase { display: none !important; }
    html.kd-m3 .viewer-panel.kd-m3-sc-open .kd-m3-sc { display: none; }
    html.kd-m3 .viewer-panel .showcase {
        transform: none !important;
        top: 0.8rem !important; left: 0.8rem !important;
        animation: kdM3Open 0.25s ease;
    }
    @keyframes kdM3Open { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
    html.kd-m3 .viewer-panel .showcase button {
        font-size: 0.85rem !important;
        letter-spacing: 1.5px !important;
        padding: 0.95rem 0.85rem !important;           /* ~30px tall */
        gap: 0.45rem !important;
    }
    html.kd-m3 .kd-m3-sc {
        position: absolute;
        top: 0.8rem;
        left: 0.6rem;
        z-index: 7;
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        height: 40px;
        padding: 0 0.6rem;
        border: 0;
        background: none;
        color: rgba(100,70,0,0.85);
        font-size: 1.6rem;                    /* sets the dots' size (they are em-sized) */
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    html.kd-m3 .kd-m3-sc[hidden] { display: none; }
    html.kd-m3 .kd-m3-sc .showcase__dots i { filter: grayscale(1) opacity(0.55); }
    html.kd-m3 .kd-m3-sc.on .showcase__dots i { filter: none; animation: showcase-dot 8.4s ease-in-out infinite; }
    html.kd-m3 .kd-m3-sc.on .showcase__dots i:nth-child(2) { animation-delay: 2.8s; }
    html.kd-m3 .kd-m3-sc.on .showcase__dots i:nth-child(3) { animation-delay: 5.6s; }
    html.kd-m3 .kd-m3-sc svg {
        width: 1.8rem; height: 1.8rem;
        fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    }
    html.kd-m3 .kd-m3-sc:not(.on) svg { opacity: 0.45; }
    html.kd-m3 .kd-m3-sc.on.turning svg { animation: showcase-spin 6s linear infinite; }
    @media (prefers-reduced-motion: reduce) {
        html.kd-m3 .kd-m3-sc .showcase__dots i, html.kd-m3 .kd-m3-sc svg, html.kd-m3 .viewer-panel .showcase { animation: none !important; }
    }

    /* Design Only / Design Details: a little apart, each with a 34px target */
    html.kd-m3 .viewer-panel .design-only-btn,
    html.kd-m3 .viewer-panel .design-details-btn {
        transform: none !important;
        font-size: 0.8rem !important;
        letter-spacing: 1.5px !important;
        padding: 0.55rem 0 !important;
        width: 10.4rem !important;              /* both the same size */
        text-align: center !important;
        right: 0.8rem !important;
    }
    html.kd-m3 .viewer-panel .design-details-btn { bottom: 0.8rem !important; }
    html.kd-m3 .viewer-panel .design-only-btn { bottom: 4.2rem !important; }
    html.kd-m3 .viewer-panel .design-only-btn::after,
    html.kd-m3 .viewer-panel .design-details-btn::after {  /* invisible: a larger fingertip target */
        content: '';
        position: absolute;
        inset: -6px -4px;
    }

    /* ── 7. The Bespoke Boutique menu (Men, Women, Boy, Girl): it can scroll / it has ended ──
       js/mobile-refresh.js, menuScroll: the list's edge fades where there is more;
       a gold chevron bobs at the foot while more lies below; at the end, a small
       give and a gold hairline with a diamond. */
    .kd-m2-scroller { scrollbar-width: none; }
    .kd-m2-scroller::-webkit-scrollbar { display: none; }
    .kd-m2-scroller.kd-down { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5rem), transparent); }
    .kd-m2-scroller.kd-up { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem); mask-image: linear-gradient(to bottom, transparent, #000 3rem); }
    .kd-m2-scroller.kd-up.kd-down {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 4.5rem), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 4.5rem), transparent);
    }
    .kd-m2-scroller.kd-give-top { animation: kdGiveTop 0.45s cubic-bezier(.3,.7,.4,1); }
    .kd-m2-scroller.kd-give-bottom { animation: kdGiveBottom 0.45s cubic-bezier(.3,.7,.4,1); }
    @keyframes kdGiveTop { 0% { transform: none; } 35% { transform: translateY(7px); } 100% { transform: none; } }
    @keyframes kdGiveBottom { 0% { transform: none; } 35% { transform: translateY(-7px); } 100% { transform: none; } }
    .kd-m2-cue {
        position: absolute;
        left: 50%;
        width: 6rem;
        height: 2.4rem;
        margin-left: -3rem;
        pointer-events: none;
        z-index: 3;
    }
    .kd-m2-cue__more {
        position: absolute; left: 50%; top: 0.2rem;
        width: 1.8rem; height: 1.8rem; margin-left: -0.9rem;
        fill: none; stroke: rgba(100,70,0,0.75); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
        opacity: 0; transition: opacity 0.3s ease;
    }
    .kd-m2-cue.is-more .kd-m2-cue__more { opacity: 1; animation: kdCueBob 1.8s ease-in-out infinite; }
    @keyframes kdCueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
    .kd-m2-cue__end {
        position: absolute; left: 0; right: 0; top: 0.9rem;
        display: flex; align-items: center; justify-content: center; gap: 0.5rem;
        opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .kd-m2-cue__end i { width: 1.8rem; height: 1px; background: rgba(100,70,0,0.5); }
    .kd-m2-cue__end b { width: 5px; height: 5px; background: rgba(100,70,0,0.75); transform: rotate(45deg); }
    .kd-m2-cue.is-end .kd-m2-cue__end { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
        .kd-m2-scroller.kd-give-top, .kd-m2-scroller.kd-give-bottom, .kd-m2-cue.is-more .kd-m2-cue__more { animation: none; }
    }
}