/* --- 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;
}

/* --- HOMEPAGE FEATURED GRID ---
   August 2026. Replaced the bento box: mixed tile sizes made the same
   photographs read as more or less important than each other, which for
   one-of-one pieces is the wrong signal. Uniform cards now, sharing the
   shop's own .stone-card rules so the two pages can't drift apart. */

.home-featured {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 5% 0;
}

.shop-grid.home-grid { gap: 3.2rem 2.5rem; }

/* PAST WORK CARD — the only card that keeps an overlay. Everything else in
   the grid is a piece you can buy; this one is a door to another page, and
   the label on hover is what says so. */
.home-legacy .stone-frame { position: relative; }

.home-legacy .stone-frame img {
    filter: grayscale(100%);
    opacity: 0.9;
    transition: filter 0.7s ease, opacity 0.7s ease, transform 0.6s ease;
}

.home-legacy-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 28, 22, 0.42);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 2;
}

.home-legacy-veil span {
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #FBFAF6;
    border: 1px solid rgba(251, 250, 246, 0.65);
    padding: 0.75rem 1.6rem;
    transform: translateY(6px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-legacy:hover .home-legacy-veil { opacity: 1; }
.home-legacy:hover .home-legacy-veil span { transform: translateY(0); }
.home-legacy:hover .stone-frame img { filter: grayscale(0%); opacity: 1; }

.home-shop-all {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.home-empty {
    max-width: 540px;
    padding: 2rem 0 1rem;
}
.home-empty h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin: 0 0 1rem; }
.home-empty p { color: var(--grey); margin: 0 0 2.5rem; }

/* 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) + 2rem) 5% 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
    flex-wrap: wrap;
}
.muka-intro-head { max-width: 560px; }
.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;
    /* Was clamp(2.2rem, 4.5vw, 3.1rem) -- too big for a passage this
       long, and it ate the whole first screen. */
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}
.muka-intro-note {
    max-width: 420px;
    color: var(--grey);
    font-size: 0.85rem;
    line-height: 1.7;
    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)); }
    
    .home-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
    
    .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;
}


/* 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: minmax(0, 1fr) 420px;
    gap: 64px;
    padding-top: calc(var(--nav-height) + 24px);
    align-items: start;
}

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

/* AUGUST 2026: filmstrip beside the stage, not under it, and the stage
   capped. The media column is ~830px wide on a large screen, and a square
   stage meant an 830px-tall photograph -- one piece of jewellery filling
   an entire laptop screen. */
.pp-media {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
}

.pp-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 520px;
    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: flex;
    flex-direction: column;
    gap: 10px;
    width: 72px;
    flex: 0 0 72px;
    /* Nine photographs at 72px would run past the stage, so the column
       scrolls rather than stretching the layout to fit. */
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #D8D2C4 transparent;
}

.pp-thumbs::-webkit-scrollbar { width: 4px; }
.pp-thumbs::-webkit-scrollbar-track { background: transparent; }
.pp-thumbs::-webkit-scrollbar-thumb { background: #D8D2C4; border-radius: 2px; }

.pp-thumb {
    width: 72px;
    flex: 0 0 auto;
    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; flex-direction: column; }
    .pp-stage { max-width: 100%; }

    .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; }
}


/* =====================================================================
   SHOP — INFINITE SCROLL FURNITURE
   Added August 2026 with the filter sidebar's removal.
   ===================================================================== */

.shop-header { margin-bottom: 4rem; }

.shop-more {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4rem;
    padding: 4rem 0 6rem;
}

.shop-spinner {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey);
    animation: shopPulse 1.4s ease-in-out infinite;
}

@keyframes shopPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.shop-end {
    text-align: center;
    padding: 3rem 0 6rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey);
}

.shop-empty {
    max-width: 520px;
    margin: 2rem auto;
    padding: 4rem 0 8rem;
    text-align: center;
}
.shop-empty h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin-bottom: 1rem; }
.shop-empty p { color: var(--grey); margin-bottom: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
    .stone-card:hover .stone-frame img { transform: none; }
    .shop-spinner { animation: none; opacity: 0.7; }
}

/* About page CTA — the single link on the page since the per-form
   "View Forms" links were dropped in August 2026. */
.about-cta { margin-top: 3.5rem; }

@media screen and (max-width: 900px) {
    .about-cta { margin-top: 2rem; }
    .about-cta .cta-button { display: block; text-align: center; padding: 1.1rem 1rem; }
}


/* =====================================================================
   CHECKOUT & CONFIRMATION — bank transfer (August 2026)
   ===================================================================== */

.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.checkout-section {
    font-family: var(--sans);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--grey);
    margin: 2.5rem 0 0.5rem;
}

.checkout-payment-note {
    border: 1px solid #E3DDD0;
    background: var(--stone-bg);
    padding: 1.3rem 1.5rem;
    margin-top: 1.5rem;
}
.checkout-payment-note strong {
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.6rem;
}
.checkout-payment-note p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--grey);
}

.success-ref {
    margin: 2.5rem auto 0;
    padding: 1.4rem 2rem;
    border: 1px solid #E3DDD0;
    background: var(--stone-bg);
    display: inline-block;
    text-align: center;
}
.success-ref-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--grey);
    margin-bottom: 0.5rem;
}
.success-ref-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.success-bank {
    max-width: 460px;
    margin: 2.5rem auto 0;
    padding: 2rem;
    border: 1px solid #E3DDD0;
    background: var(--bg);
    text-align: left;
}
.success-bank-title {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--grey);
    margin-bottom: 1.4rem;
}
.success-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #EFEBE1;
}
.success-bank-row:last-of-type { border-bottom: none; }
.success-bank-row span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--grey); }
.success-bank-row strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; text-align: right; }
.success-bank-row strong.is-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.success-bank-note {
    margin: 1.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--grey);
}

@media screen and (max-width: 900px) {
    .checkout-row { grid-template-columns: 1fr; gap: 0; }
    .success-bank { margin-left: 5%; margin-right: 5%; padding: 1.4rem; }
    .success-bank-row { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
    .success-bank-row strong { text-align: left; }
    .success-ref { display: block; margin-left: 5%; margin-right: 5%; }
}

/* =====================================================================
   CART & CHECKOUT — SHARED STRUCTURE
   August 2026.

   These rules used to exist only in desktop.css, which is loaded with
   media="screen and (min-width: 901px)". Below that width the cart had no
   layout at all: no page padding (so the heading ran off the left edge and
   sat under the fixed header), and .summary-row was a plain block, which
   is why the totals rendered as "SUBTOTAL$150.00" with no gap.

   Structure lives here now, at every width. desktop.css still overrides
   the sizing above 900px, and mobile.css handles the rest.
   ===================================================================== */

.cart-layout {
    max-width: 1000px;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 2rem) 5% 4rem;
}

.cart-header { margin-bottom: 2.5rem; }

.cart-grid { display: block; }

.cart-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #E3DDD0;
}
.cart-thumb { width: 100px; aspect-ratio: 3/4; flex-shrink: 0; background: var(--stone-bg); overflow: hidden; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-details { flex: 1; min-width: 0; }

/* The label/value pairs. Without these three rules the two spans in each
   row butt straight up against each other. */
.summary-row,
.summary-line,
.summary-total,
.summary-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
}

.summary-row, .summary-line { margin-bottom: 0.9rem; color: var(--grey); font-family: var(--sans); font-size: 0.95rem; }
.summary-total, .summary-total-line { border-top: 1px solid #E3DDD0; padding-top: 1.2rem; margin-top: 1.2rem; color: var(--ink); }

.gc-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    border-top: 1px solid #E3DDD0;
    padding: 1.2rem 0 0.5rem;
    margin-top: 1.2rem;
}
.gc-icon { font-size: 1.2rem; font-weight: 300; transition: transform 0.4s ease; }
.gc-toggle.is-open .gc-icon { transform: rotate(45deg); }
.gc-drawer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; }
.gc-drawer.is-open { max-height: 200px; opacity: 1; margin-top: 1rem; }

.checkout-page { max-width: 550px; margin: 0 auto; padding: calc(var(--nav-height) + 2rem) 5% 4rem; }
.checkout-form { display: flex; flex-direction: column; gap: 1.2rem; }
.checkout-summary { margin-top: 1.5rem; border-top: 1px solid #E3DDD0; padding-top: 1.5rem; }

.gc-form { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.gc-form .quiet-input { flex: 1; min-width: 0; }
.gc-apply {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--ink);
    border: none;
    border-bottom: 1px solid var(--ink);
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
}

/* Empty cart. Its own block so it doesn't inherit the fixed-to-the-bottom
   treatment the real checkout button gets on mobile. */
.cart-empty { text-align: center; padding: 3rem 0 4rem; }
.cart-empty p { font-family: var(--sans); font-size: 1.05rem; color: var(--grey); margin: 0 0 2rem; }

/* Two more that only existed in desktop.css — same trap as the cart. */
.success-icon { margin-bottom: 1.5rem; }
.specimen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; }

@media screen and (max-width: 900px) {
    .specimen-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .cart-empty { padding: 2rem 0 3rem; }
    .cart-empty .return-btn { display: block; width: 100%; padding: 1.1rem 1rem; text-align: center; }
}