/* ══════════════════════════════════════════════════════════════════════════
   LUMEN — Frame Rail
   ══════════════════════════════════════════════════════════════════════════
   Thesis: light and space. The gallery is treated like a contact sheet — a
   slim rail of frames down the leading edge, numbered, beside one tall canvas
   with a lot of air around it. The buying column stays narrow and quiet so the
   photograph is the loudest thing on the page.

   The numbers on the rail are the one structural device, and they earn their
   place: they tell you which frame of how many you are looking at. Remove them
   and you lose information, not decoration.

   All colour comes from --pdp-* tokens, so the template follows the site theme.
   ══════════════════════════════════════════════════════════════════════════ */

body.ptpl-lumen {
    --pdp-r: 4px;
    --pdp-track: -0.03em;
    --pdp-weight: 500;
    /* A high-contrast old-style face, used only for the title and the price —
       the two places the page wants your eye. The merchant's own font choice in
       Appearance still overrides this, by design. */
    --pdp-disp: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --lumen-rail: 62px;
    background: var(--pdp-canvas);
}

body.ptpl-lumen .product-page { max-width: 1240px; margin: 0 auto; padding: 14px 16px 0; }

body.ptpl-lumen .breadcrumb {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--pdp-dim); margin-bottom: 18px;
}

/* ── Mobile: canvas first, rail becomes a scroll strip underneath ─────── */
body.ptpl-lumen .product-main { display: block; }

body.ptpl-lumen .gallery-main {
    aspect-ratio: 3 / 4;
    background: var(--pdp-panel-2);
    border-radius: var(--pdp-r);
    overflow: hidden;
}
body.ptpl-lumen .gallery-main img,
body.ptpl-lumen .gallery-main video { width: 100%; height: 100%; object-fit: cover; }

body.ptpl-lumen .gallery-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 10px 0 2px;
    counter-reset: frame;
    scrollbar-width: none;
}
body.ptpl-lumen .gallery-thumbs::-webkit-scrollbar { display: none; }
body.ptpl-lumen .gallery-thumbs > * {
    position: relative;
    flex: 0 0 auto;
    width: 54px; height: 68px;
    border-radius: var(--pdp-r);
    overflow: hidden;
    border: 1px solid var(--pdp-line);
    opacity: .62;
    transition: opacity .2s, border-color .2s;
}
body.ptpl-lumen .gallery-thumbs > *.active,
body.ptpl-lumen .gallery-thumbs > *:hover { opacity: 1; border-color: var(--pdp-ink); }
body.ptpl-lumen .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

body.ptpl-lumen .product-info { padding: 26px 0 34px; }

body.ptpl-lumen .product-info h1 {
    font-family: var(--pdp-disp);
    font-size: clamp(28px, 7vw, 46px);
    font-weight: var(--pdp-weight);
    letter-spacing: var(--pdp-track);
    line-height: 1.04;
    margin: 0 0 14px;
    color: var(--pdp-ink);
    text-wrap: balance;
}

body.ptpl-lumen .product-meta,
body.ptpl-lumen .product-sku {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pdp-dim);
}

body.ptpl-lumen .product-price-box { margin: 20px 0 24px; }
body.ptpl-lumen .price {
    font-family: var(--pdp-disp);
    font-size: 30px; font-weight: 500; letter-spacing: -.01em; color: var(--pdp-ink);
}

body.ptpl-lumen .product-add-section { margin-top: 26px; }
body.ptpl-lumen .product-actions-row .btn,
body.ptpl-lumen .add-to-cart-btn {
    min-height: 54px;
    border-radius: var(--pdp-r);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12.5px;
}

/* Long-form content sits in a narrow measure — this page is for reading. */
body.ptpl-lumen .product-tabs,
body.ptpl-lumen .pdp-sections > section {
    max-width: 68ch;
    margin: 0 auto;
    padding: 34px 0;
    border-top: 1px solid var(--pdp-line);
}
body.ptpl-lumen .pdp-sections .m-head h2 {
    font-family: var(--pdp-disp);
    font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; color: var(--pdp-dim); margin-bottom: 16px;
}

/* ── Desktop: the rail appears, pinned beside the canvas ──────────────── */
@media (min-width: 900px) {
    body.ptpl-lumen .product-main {
        display: grid;
        grid-template-columns: var(--lumen-rail) minmax(0, 1.25fr) minmax(300px, .75fr);
        gap: 0 34px;
        align-items: start;
        padding-top: 8px;
    }

    /* Rail first in the reading order, canvas second. */
    body.ptpl-lumen .product-gallery {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: var(--lumen-rail) minmax(0, 1fr);
        gap: 0 22px;
        align-items: start;
    }
    body.ptpl-lumen .gallery-thumbs {
        grid-column: 1; grid-row: 1;
        flex-direction: column;
        overflow: visible;
        padding: 0;
        position: sticky; top: 92px;
    }
    body.ptpl-lumen .gallery-thumbs > * { width: var(--lumen-rail); height: 76px; }
    /* The frame number — the rail's reason for existing. */
    body.ptpl-lumen .gallery-thumbs > *::after {
        counter-increment: frame;
        content: counter(frame, decimal-leading-zero);
        position: absolute; inset-inline-start: 4px; bottom: 3px;
        font-size: 9px; letter-spacing: .1em;
        color: var(--pdp-canvas);
        text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
        pointer-events: none;
    }
    body.ptpl-lumen .gallery-main { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; }

    body.ptpl-lumen .product-info {
        grid-column: 3;
        position: sticky; top: 92px;
        padding: 0 0 40px;
    }
    body.ptpl-lumen .product-tabs,
    body.ptpl-lumen .pdp-sections > section { padding: 46px 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.ptpl-lumen .gallery-thumbs > * { transition: none; }
}