/* --- CORE: CAM SMITH CARVING */

/* 1. UNIFIED VARIABLES */
:root {
    --bg: #FBFAF6;
    --ink: #1F1C16;
    --grey: #7D776B;
    --stone-bg: #F1EFE8;
    --serif: 'Playfair Display', serif;
    --sans: 'Inter', sans-serif;
    --nav-height: 80px;
    --transition-heavy: 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. BASE RESETS */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.8s ease;
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Invisible Cookie Line */
#cookie-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--ink);
    z-index: 9999;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. TYPOGRAPHY & LABELS */
h1, .product-title, .archive-title, .hero-title {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.section-label {
    padding: 0 0 2rem 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--grey);
    display: block;
}

.archive-description {
    max-width: 600px;
    margin: 0 auto;
    color: var(--grey);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* 4. THE FIXED-SCROLL PRODUCT LAYOUT */
.product-study-container {
    display: flex;
    padding: 0;
    max-width: 100vw;
}

.left-visual-scroll {
    flex: 1.2;
    padding: 10vh 5%;
}

.right-sticky-placard {
    flex: 0.8;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8%;
    border-left: 1px solid #E3DDD0;
}

/* 5. MACRO IMAGE BLOOM */
.scale-bloom {
    overflow: hidden;
    background: var(--stone-bg);
    margin-bottom: 15vh;
}

.scale-bloom img {
    transform: scale(1.15);
    opacity: 0;
    transition: transform var(--transition-heavy), opacity var(--transition-heavy);
}

.scale-bloom.is-visible img {
    transform: scale(1);
    opacity: 1;
}

.bloom-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bloom-item.is-visible { opacity: 1; transform: translateY(0); }

/* 6. CONTEXTUAL PROGRESS LINE */
.scroll-tracker {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 150px;
    background: #E3DDD0;
    z-index: 100;
}

.scroll-tracker-bar {
    width: 100%;
    height: 0%;
    background: var(--ink);
    transition: height 0.1s ease-out;
}

/* 7. ARCHIVE GRID & CARDS */
.carvings-archive, .archive-page {
    max-width: 1600px;
    margin: 0 auto;
    padding-top: calc(var(--nav-height) + 4rem);
}

.archive-header { text-align: center; margin-bottom: 5rem; padding: 0 5%; }

.carvings-grid, .masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3rem 2rem;
    margin-bottom: 6rem;
    padding: 0 5%;
}

.carving-card, .grid-item {
    display: block;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.carving-card:hover, .grid-item:hover { transform: translateY(-5px); }

.card-image-wrapper, .stone-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--stone-bg);
    margin-bottom: 1rem;
}

.card-image-wrapper img, .stone-frame img { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.carving-card:hover .card-image-wrapper img, .stone-card:hover .stone-frame img { transform: scale(1.03); }

/* 8. CTA SECTION */
.archive-cta, .commission-cta {
    text-align: center;
    padding: 8rem 5%;
    border-top: 1px solid #E3DDD0;
    margin-top: 4rem;
}

.archive-cta h2, .commission-cta h2 { font-family: var(--serif); font-size: 2.5rem; margin-bottom: 1.5rem; font-weight: 400; }
.archive-cta p, .commission-cta p { color: var(--grey); margin-bottom: 2.5rem; font-size: 1.1rem; }

.cta-button, .buy-btn {
    display: inline-block;
    padding: 1.2rem 4rem;
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.buy-btn { background: var(--ink); color: var(--bg); }
.cta-button:hover { background: var(--ink); color: var(--bg); }
.buy-btn:hover { opacity: 0.8; }

/* --- HERO BENTO GRID UPDATES --- */
.hero-category-grid {
    padding: calc(var(--nav-height) + 4rem) 5% 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 1.5rem;
    grid-auto-flow: row dense;
}

/* --- THE BENTO BOX BASE --- */
.bento-item {
    position: relative;
    background: var(--stone-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    
    /* The "Whisper Thin" Hairline Border */
    border: 1px solid #E3DDD0; 
}

.bento-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

/* Plain Green Hover Overlay */
.bento-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #5B755C;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

/* Category Text */
.bento-label {
    position: relative;
    z-index: 3;
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --- THE HOVER INTERACTIONS --- */
.bento-item:hover img { transform: scale(1.05); }

/* Fade in the plain green overlay */
.bento-item:hover::after { opacity: 0.95; }

/* Slide up the text */
.bento-item:hover .bento-label { opacity: 1; transform: translateY(0); }


/* Structural Spans */
.span-tall { grid-row: span 2; }
.span-wide { grid-column: span 2; }

/* LEGACY BENTO BOX (Black & White) */
.bento-item.is-legacy img { filter: grayscale(100%); opacity: 0.85; }
.bento-item.is-legacy::after { background-color: #1a1a1a; }
.bento-item.is-legacy:hover img { filter: grayscale(100%); }

/* Wavy divider */
.wave-divider {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
    line-height: 0;
    margin-bottom: 4rem;
}

.wave-divider svg {
    position: absolute;
    display: block;
    width: calc(100% + 1.3px);
    height: 100%;
    transform: rotate(180deg);
}

/* 10. ABOUT SPLIT SECTION */
.studio-about-split {
    display: flex;
    max-width: 1200px;
    margin: 4rem auto 8rem;
    align-items: center;
    gap: 4rem;
    padding: 0 5%;
}

.about-image-col { flex: 1; }
.about-image-col img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: brightness(0.95);
}

.about-text-col {
    flex: 1;
    padding-right: 2rem;
}

.philosophy-quote {
    font-family: var(--serif);
    font-size: 2.2rem;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 2rem;
    font-style: italic;
}

.action-link {
    font-family: var(--sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.3rem;
    transition: opacity 0.3s ease;
}
.action-link:hover { opacity: 0.5; }

/* --- MUKA HOMEPAGE (1b) --- */
.muka-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 3.5rem) 5% 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
    flex-wrap: wrap;
}
.muka-intro-head { max-width: 640px; }
.muka-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 1.4rem;
}
.muka-intro h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.2rem, 4.5vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
}
.muka-intro-note {
    max-width: 300px;
    color: var(--grey);
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 0;
}

.niho-divider {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 5% 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.niho-divider span { height: 1px; flex: 1; background: #E3DDD0; }
.niho-divider i {
    width: 64px;
    height: 8px;
    background-image: linear-gradient(45deg, #5B755C 25%, transparent 25%, transparent 75%, #5B755C 75%);
    background-position: 0 0;
    background-size: 8px 8px;
    opacity: 0.7;
}
.niho-divider.compact { max-width: none; margin: 0; padding: 1.5rem 0 0; }
.niho-divider.centered { max-width: 220px; margin: 2rem auto 0; padding: 0; }

.about-hero { padding: 1rem 0 0.5rem; max-width: 760px; }
.about-hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 1.3rem;
}
.about-hero p { color: var(--grey); font-size: 1.05rem; line-height: 1.85; max-width: 560px; margin: 0; }

.maker-strip { max-width: 1200px; margin: 4rem auto 6rem; padding: 0 5%; }
.maker-strip-inner {
    background: var(--stone-bg);
    padding: 3.5rem;
    display: flex;
    gap: 3.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.maker-copy { flex: 1; min-width: 260px; }
.maker-copy .muka-eyebrow { color: #5B755C; }
.maker-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.55rem;
    line-height: 1.5;
    margin: 0 0 1.6rem;
    color: var(--ink);
}
.maker-media { width: 280px; aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0; }
.maker-media img { width: 100%; height: 100%; object-fit: cover; }

/* 11. REFINED STUDIO FOOTER */
.studio-footer {
    background-color: var(--stone-bg);
    padding: 6rem 5% 3rem;
    border-top: 1px solid #E3DDD0;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3rem;
}

.footer-brand h4 {
    font-family: var(--serif);
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
    color: var(--ink);
}

.footer-brand p {
    font-family: var(--sans);
    font-size: 0.65rem;
    color: var(--grey);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.footer-links, .footer-social {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links a, .footer-social a, .footer-social span {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: opacity 0.3s ease;
}

.footer-links a:hover, .footer-social a:hover { opacity: 0.5; }
.footer-social span { color: var(--grey); margin-top: 0.5rem; }

/* 12. RESPONSIVE / MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .product-study-container { flex-direction: column; }
    .right-sticky-placard { height: auto; position: relative; padding: 5rem 5%; border-left: none; }
    .scroll-tracker { display: none; }
    .carvings-grid, .masonry-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
        gap: 1rem;
    }
    .span-wide { grid-column: span 2; }
    .span-tall { grid-row: span 1; }
    
    .studio-about-split {
        flex-direction: column;
        gap: 3rem;
        margin: 2rem auto 5rem;
    }
    .muka-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding-bottom: 0.5rem;
    }
    .muka-intro-note { max-width: 100%; }
    .maker-strip-inner { flex-direction: column; padding: 2.5rem 1.75rem; gap: 2rem; }
    .maker-media { width: 100%; aspect-ratio: 4 / 3; }
    .about-text-col {
        padding-right: 0;
        text-align: center;
    }
    .philosophy-quote { font-size: 1.6rem; }
    
    .footer-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
}
/* =====================================================================
   IMAGE LOADING + LAYOUT STABILITY
   Added July 2026. See footer.php.
   ===================================================================== */

/* FAIL-SAFE FADE  (rewritten 21 July 2026)
   
   The previous version defaulted EVERY <img> to opacity:0 and relied on JS
   to add .is-loaded. That is fail-dangerous: any JS problem at all -- a
   syntax error, a blocked script, a PHP warning printed into the script
   block -- and every image on the site becomes invisible. On the homepage
   that reads as a completely blank page, because .bento-label is also
   hover-only, so the tiles render as empty boxes on a cream background.
   
   Inverted: images are VISIBLE by default. The fade is opt-in -- JS adds
   .pre-fade only to images that haven't finished loading, and removes it
   on load or error. If the script never runs, the site simply appears
   without the fade, which is the correct way for a decorative effect to
   degrade. */

img.pre-fade { opacity: 0; }

img.is-loaded {
    opacity: 1;
    transition: opacity 0.6s ease-in;
}

/* ---------------------------------------------------------------------
   CUMULATIVE LAYOUT SHIFT
   No image in the project carried width/height, so nothing reserved space
   and every page jumped as images arrived. Fixing it per-<img> would mean
   knowing each file's dimensions; reserving the box on the wrapper achieves
   the same thing and matches what legacy.php already did well.
   --------------------------------------------------------------------- */

/* Shop grid cards */
.stone-frame {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone-bg, #EFEDE6);
}
.stone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product page main image */
.main-image-display {
    aspect-ratio: 1 / 1;
    background: var(--stone-bg, #EFEDE6);
}
.main-image-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Product page thumbnails */
.thumb-btn {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--stone-bg, #EFEDE6);
}
.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Homepage bento tiles */
.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cart line-item thumbnails */
.cart-thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--stone-bg, #EFEDE6);
}
.cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Small hint under the checkout form, explaining that the address is
   collected on Stripe's page. Added July 2026 with address autofill. */
.checkout-note {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--grey, #888);
    margin-top: -0.5rem;
    letter-spacing: 0.02em;
}

/* About-page photographs. Added 24 July 2026. The markup only appears when
   the file exists (see chapter_image() in about.php), so these rules are
   inert until the images are uploaded. */
.chapter-figure {
    margin: 2.5rem 0 0;
    padding: 0;
}
.chapter-figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--stone-bg, #EFEDE6);
}
.chapter-figure figcaption {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey, #888);
    margin-top: 0.8rem;
}
@media screen and (max-width: 900px) {
    .chapter-figure { margin-top: 1.75rem; }
    .chapter-figure img { aspect-ratio: 4 / 3; }
}


/* =====================================================================
   PRODUCT PAGE — layout v2   (direction 1a desktop / 2a mobile)
   Appended to core.css, so there is no extra stylesheet to link.
   Everything is namespaced under .pp: the older .gallery-layout /
   .curator-label rules in desktop.css and mobile.css never match this
   page and nothing needs to be deleted from them.
   ===================================================================== */

.pp {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 64px 88px;
}

.pp-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 88px;
    padding-top: calc(var(--nav-height) + 24px);
    align-items: start;
}

/* ---------- MEDIA ---------- */

.pp-media {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}

.pp-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--stone-bg);
    overflow: hidden;
}

.pp-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.35s ease;
}

.pp-stage img.is-swapping { opacity: 0; }

/* Dot pager — phones only. */
.pp-dots { display: none; }

.pp-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.pp-thumb {
    aspect-ratio: 1 / 1;
    padding: 0;
    background: var(--stone-bg);
    border: 1px solid transparent;
    cursor: pointer;
    opacity: 0.5;
    overflow: hidden;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb:hover { opacity: 0.8; }
.pp-thumb.active { opacity: 1; border-color: var(--ink); }

/* ---------- LABEL ---------- */

.pp-label { padding-top: 0; }

.pp-breadcrumb {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--grey);
    padding-bottom: 14px;
    border-bottom: 1px solid #E3DDD0;
    margin-bottom: 26px;
}
.pp-breadcrumb a { color: inherit; text-decoration: none; }

.pp-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}

.pp-price { font-size: 0.95rem; margin-bottom: 30px; }
.pp-price .original { color: var(--grey); text-decoration: line-through; margin-right: 0.6rem; font-size: 0.85rem; }
.pp-price .current { color: var(--ink); }
.pp-collected { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }

.pp-niho { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.pp-niho span { flex: 1; height: 1px; background: #E3DDD0; }
.pp-niho i {
    width: 64px; height: 8px; display: block; opacity: 0.7;
    background-image: linear-gradient(45deg, #5B755C 25%, transparent 25%, transparent 75%, #5B755C 75%);
    background-size: 8px 8px;
}

.pp-specs {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 22px 0;
    border-top: 1px solid #EAE6DC;
    border-bottom: 1px solid #EAE6DC;
    margin-bottom: 30px;
}
.pp-spec { display: flex; align-items: baseline; }
.pp-spec-label {
    width: 118px; flex-shrink: 0;
    font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey);
}
.pp-spec-value { font-size: 0.88rem; color: var(--ink); }

/* ---------- ACCORDIONS (open + chrome-less on desktop) ---------- */

.pp-acc { margin-bottom: 30px; }
.pp-acc > summary { display: none; }
.pp-acc-body { display: block; }

.pp-rich { font-size: 0.9rem; line-height: 1.85; color: var(--grey); }
.pp-rich p { margin: 0 0 1.1rem; }
.pp-rich p:last-child { margin-bottom: 0; }
.pp-rich h2, .pp-rich h3 { font-family: var(--serif); font-weight: 400; margin: 1.6rem 0 0.8rem; color: var(--ink); }
.pp-rich strong { font-weight: 600; color: var(--ink); }
.pp-rich em { font-style: italic; }
.pp-rich ul, .pp-rich ol { margin: 0 0 1.1rem 1.4rem; padding: 0; }
.pp-rich li { margin-bottom: 0.4rem; }
.pp-rich a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-rich blockquote {
    border-left: 2px solid #E3DDD0; margin: 1.2rem 0; padding-left: 1.2rem;
    font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--grey);
}

.pp-fineprint { display: flex; flex-direction: column; gap: 7px; padding-top: 22px; border-top: 1px solid #EAE6DC; }
.pp-fineprint p { font-size: 0.72rem; line-height: 1.7; color: var(--grey); margin: 0; }

/* ---------- BUY ---------- */

.pp-action { margin-bottom: 8px; }

.pp-btn {
    display: block;
    width: 100%;
    padding: 19px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.pp-btn:hover { opacity: 0.82; }

.pp-btn.is-locked {
    background: #E4E4E7;
    color: #A1A1AA;
    border: 1px solid #D4D4D8;
    cursor: not-allowed;
}

.pp-lock-note {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--grey);
    text-align: center;
}

/* =====================================================================
   MOBILE — direction 2a
   ===================================================================== */

@media screen and (max-width: 900px) {

    .pp { padding: 0; }

    .pp-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: calc(var(--nav-height) + 4px);
    }

    .pp-media { position: static; gap: 0; }

    .pp-stage { aspect-ratio: 1 / 1; }

    .pp-dots {
        display: flex;
        justify-content: center;
        gap: 7px;
        position: absolute;
        left: 0; right: 0; bottom: 14px;
    }
    .pp-dots span { width: 6px; height: 6px; border-radius: 50%; background: #C9C3B4; }
    .pp-dots span.active { background: var(--ink); }

    /* Filmstrip is desktop-only; on a phone the stage swipes instead. */
    .pp-thumbs { display: none; }

    .pp-label { padding: 26px 22px 32px; }

    .pp-breadcrumb { font-size: 0.6rem; padding-bottom: 12px; margin-bottom: 14px; border-bottom: none; }
    .pp-title { font-size: 1.85rem; margin-bottom: 8px; }
    .pp-price { margin-bottom: 22px; }
    .pp-niho { margin-bottom: 22px; }

    .pp-specs { gap: 12px; padding: 20px 0; margin-bottom: 24px; }
    .pp-spec-label { width: 104px; font-size: 0.6rem; letter-spacing: 0.18em; }
    .pp-spec-value { font-size: 0.88rem; }

    /* Buy button sits in the flow, directly under the specs. */
    .pp-action { margin: 0 0 28px; }
    .pp-btn { padding: 18px; min-height: 48px; font-size: 0.7rem; }

    /* Accordions become real accordions. */
    .pp-acc { margin: 0; border-top: 1px solid #EAE6DC; }
    .pp-acc:last-of-type { border-bottom: 1px solid #EAE6DC; }

    .pp-acc > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0;
        min-height: 48px;
        box-sizing: border-box;
        font-size: 0.62rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ink);
        cursor: pointer;
        list-style: none;
    }
    .pp-acc > summary::-webkit-details-marker { display: none; }

    .pp-acc > summary i {
        position: relative;
        width: 11px; height: 11px;
        flex-shrink: 0;
    }
    .pp-acc > summary i::before,
    .pp-acc > summary i::after {
        content: '';
        position: absolute;
        background: var(--grey);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .pp-acc > summary i::before { left: 0; top: 5px; width: 11px; height: 1px; }
    .pp-acc > summary i::after  { top: 0; left: 5px; width: 1px; height: 11px; }
    .pp-acc[open] > summary i::after { opacity: 0; }

    .pp-acc-body { padding: 0 0 20px; }
    .pp-rich { font-size: 0.86rem; }
    .pp-fineprint { padding-top: 0; border-top: none; }
    .pp-fineprint p { font-size: 0.75rem; }
}