/* ══════════════════════════════════════════════════════════════════════════
   ATLAS — the split canvas
   ARCHITECTURE: on desktop the page is two halves. The gallery occupies the
   left half at full viewport height and STAYS THERE; the right half scrolls
   everything past it — title, buy, story, size, details, reviews. The image
   is never lost while the shopper reads, which is the single most persuasive
   thing a page can do for a considered purchase.
   On mobile it inverts to a full-bleed swipeable stage with the purchase bar
   pinned, so the same "image always present" promise holds.
   ══════════════════════════════════════════════════════════════════════════ */
body.ptpl-atlas {
    --pdp-r: 2px; --pdp-track: -0.03em; --pdp-weight: 700;
    --pdp-gap: 68px; --pdp-eyebrow: .3em;
    --pdp-disp: 'Instrument Serif', 'Bodoni Moda', Georgia, 'Amiri', serif;
}
body.ptpl-atlas .product-page { max-width: none; padding: 0; }
body.ptpl-atlas .breadcrumbs { padding: 14px clamp(16px, 3vw, 40px); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

@media (min-width: 1000px) {
    /* The split: left pane pinned, right pane scrolls. */
    body.ptpl-atlas .product-main {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start;
    }
    body.ptpl-atlas .product-gallery {
        position: sticky; top: 0; height: 100vh;
        display: flex; align-items: center; justify-content: center;
        background: var(--pdp-panel-2); padding: 40px;
    }
    body.ptpl-atlas .gallery-main {
        border: 0; border-radius: 0; background: transparent;
        width: 100%; max-height: 72vh; display: flex; align-items: center; justify-content: center;
    }
    body.ptpl-atlas .gallery-main img { max-height: 72vh; width: auto; object-fit: contain; }
    /* Thumbs float as a discreet column inside the pinned pane */
    body.ptpl-atlas .gallery-thumbs {
        position: absolute; inset-inline-start: 28px; top: 50%; transform: translateY(-50%);
        display: flex; flex-direction: column; gap: 8px; width: 56px;
    }
    body.ptpl-atlas .gallery-thumbs .thumb { border-radius: 2px; opacity: .5; }
    body.ptpl-atlas .gallery-thumbs .thumb.active,
    body.ptpl-atlas .gallery-thumbs .thumb:hover { opacity: 1; }
    /* Right pane: a reading column with real margins */
    body.ptpl-atlas .product-info {
        padding: clamp(60px, 9vh, 130px) clamp(34px, 5vw, 88px) 70px;
        max-width: 640px;
    }
    /* The sections continue in the same right-hand column, so the image
       stays pinned all the way down the page. */
    body.ptpl-atlas .pdp-sections {
        margin-inline-start: 50%; max-width: 640px;
        padding: 0 clamp(34px, 5vw, 88px) 90px;
    }
    body.ptpl-atlas .product-tabs,
    body.ptpl-atlas .related-section { padding-inline: clamp(34px, 5vw, 88px); }
}
body.ptpl-atlas .product-info > h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1.02; }
body.ptpl-atlas .product-price-box { border-top: 1px solid var(--pdp-line); border-bottom: 1px solid var(--pdp-line); padding: 16px 0; margin: 26px 0; }
body.ptpl-atlas .product-price-box .price { font-family: var(--pdp-disp); font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; }
body.ptpl-atlas .btn-add-cart { border-radius: 2px; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }
/* Sections read as journal entries, ruled not boxed */
body.ptpl-atlas .pdp-sec .m-head { border-bottom: 1px solid var(--pdp-line); padding-bottom: 14px; margin-bottom: 22px; }
body.ptpl-atlas .pdp-sec .m-head h2 { font-size: clamp(21px, 2vw, 27px); }
body.ptpl-atlas .pdp-sec .ft-grid { grid-template-columns: 1fr 1fr; gap: 0 28px; }
body.ptpl-atlas .pdp-sec .ft { background: transparent; border: 0; border-top: 1px solid var(--pdp-line); border-radius: 0; padding: 20px 0 0; }
body.ptpl-atlas .pdp-sec .ft-i { background: transparent; border: 0; width: auto; height: auto; padding: 0; font-size: 20px; color: var(--pdp-acc); }
body.ptpl-atlas .pdp-sec .ft b { font-family: var(--pdp-disp); font-weight: 400; font-size: 17px; }
body.ptpl-atlas .pdp-sec .chapter { background: transparent; border: 0; border-top: 2px solid var(--pdp-ink); border-radius: 0; padding: 18px 0 0; }
body.ptpl-atlas .pdp-sec .chapters { grid-template-columns: 1fr; gap: 30px; }
body.ptpl-atlas .pdp-sec.m-chart .chart-fig,
body.ptpl-atlas .pdp-sec.story .story-fig { border-radius: 0; }
body.ptpl-atlas .pdp-sec.story { order: 10; }
body.ptpl-atlas .pdp-sec.m-features { order: 20; }
body.ptpl-atlas .pdp-sec.m-chart { order: 30; }
body.ptpl-atlas .pdp-sec.m-acc { order: 40; }
body.ptpl-atlas .pdp-sec.m-extra { order: 50; }
/* Mobile: full-bleed stage, swipe strip, everything else in one column. */
@media (max-width: 999px) {
    body.ptpl-atlas .product-gallery { margin-inline: calc(-1 * clamp(12px, 4vw, 20px)); }
    body.ptpl-atlas .gallery-main { border-radius: 0; border: 0; aspect-ratio: 4/5; }
    body.ptpl-atlas .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
    body.ptpl-atlas .gallery-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; overflow-x: auto; gap: 6px; padding: 8px clamp(12px, 4vw, 20px) 0; scrollbar-width: none; }
    body.ptpl-atlas .gallery-thumbs::-webkit-scrollbar { display: none; }
    body.ptpl-atlas .product-info { padding: 26px clamp(12px, 4vw, 20px) 0; }
    body.ptpl-atlas .pdp-sec .ft-grid { grid-template-columns: 1fr; }
}