/* =========================================
   MOBILE UI - EDITORIAL APP (Serif Typography)
   ========================================= */

@media (max-width: 900px) {
    
    /* 1. GLOBALS & WARM BACKGROUND */
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    
    body {
        background-color: #EBEAE4 !important; 
        color: #090909 !important;
        overflow-x: hidden;
    }

    /* 2. THE MINIMAL TOP HEADER */
    .site-header {
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        padding: 1.5rem 5% !important; width: 100% !important;
        background: transparent !important; border: none !important;
        position: absolute !important; top: 0 !important; left: 0 !important; z-index: 9998 !important;
    }
    .brand-name { 
        font-family: var(--serif) !important; /* Matched to desktop */
        font-size: 1.2rem !important; font-weight: 600 !important;
        text-transform: none !important; color: #090909 !important;
        letter-spacing: 0.02em !important;
    }
    .mobile-menu-btn {
        background: transparent !important; border: none !important;
        font-family: var(--sans) !important; font-size: 0.75rem !important; 
        font-weight: 600 !important; text-transform: uppercase !important; 
        color: #090909 !important; letter-spacing: 0.05em !important; cursor: pointer !important;
    }

    /* 3. FULL-SCREEN MENU */
    .mobile-fullscreen-menu {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
        background: #201F1A !important; z-index: 10005 !important;
        display: flex !important; flex-direction: column !important;
        transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mobile-fullscreen-menu.is-active { transform: translateY(0); }
    .menu-header {
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        padding: 1.5rem 5% !important; border-bottom: 1px solid rgba(235, 234, 228, 0.1) !important;
        width: 100% !important;
    }
    .menu-header .brand-name { color: #EBEAE4 !important; font-size: 1.2rem !important; }
    .menu-header button {
        background: transparent !important; border: none !important; cursor: pointer !important;
        font-family: var(--sans) !important; font-size: 0.75rem !important; 
        font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #EBEAE4 !important;
    }
    .massive-nav {
        flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important;
        padding: 0 8% !important; gap: 0.4rem !important;
    }
    .massive-nav a {
        font-family: var(--serif) !important; font-size: clamp(1.9rem, 7vw, 2.6rem) !important; 
        font-weight: 400 !important; line-height: 1.35 !important;
        letter-spacing: -0.01em !important; text-transform: none !important;
        color: #EBEAE4 !important; text-decoration: none !important; text-align: left !important;
    }

    /* 4. HERO TYPOGRAPHY (Home Page) */
    .immersive-hero { padding-top: 18vh !important; background: transparent !important; height: auto !important; display: block !important; }
    .hero-bg { display: none !important; }
    .hero-caption { padding: 0 5% 2rem !important; }
    .hero-caption h2 {
        font-family: var(--serif) !important; font-size: clamp(3rem, 12vw, 5.5rem) !important; 
        font-weight: 400 !important; line-height: 1 !important;
        letter-spacing: -0.02em !important; text-transform: none !important;
        text-align: left !important; color: #090909 !important; margin: 0 !important;
    }

    /* 5A. SHARP WIREFRAME FILTERS (Home Page) */
    .ghost-filter {
        display: flex !important; justify-content: flex-start !important; align-items: center !important;
        overflow-x: auto !important; white-space: nowrap !important;
        gap: 0.8rem !important; padding: 1.2rem 5% !important;
        border-top: 1px solid #090909 !important; border-bottom: 1px solid #090909 !important;
        -ms-overflow-style: none; scrollbar-width: none; 
    }
    .ghost-filter::-webkit-scrollbar { display: none; }
    .filter-divider { display: none !important; }
    .ghost-filter a {
        background: transparent !important; padding: 0.6rem 1rem !important;
        border: 1px solid #090909 !important; border-radius: 0 !important; 
        font-family: var(--sans) !important; font-size: 0.75rem !important;
        text-transform: uppercase !important; letter-spacing: 0.1em !important;
        color: #090909 !important; font-weight: 600 !important;
    }

    /* 5B. SHOP PAGE OVERHAUL */
    .shop-header { margin-bottom: 0 !important; padding: 0 5% !important; }
    .shop-header .section-label {
        font-family: var(--serif) !important; font-size: clamp(2rem, 9vw, 3rem) !important; 
        font-weight: 400 !important; line-height: 1.05 !important;
        letter-spacing: -0.01em !important; text-transform: none !important;
        text-align: left !important; color: #090909 !important; margin: 0 0 1rem 0 !important; padding: 0 !important;
        word-wrap: break-word !important; display: block !important;
    }

    /* .shop-sidebar no longer exists (Aug 2026); .filter-bar is kept for
       any page still using one. */
    .shop-sidebar, .filter-bar {
        display: flex !important; justify-content: flex-start !important; align-items: center !important;
        overflow-x: auto !important; white-space: nowrap !important;
        padding: 1.2rem 5% !important; border-top: 1px solid rgba(9, 9, 9, 0.12) !important; border-bottom: 1px solid rgba(9, 9, 9, 0.12) !important;
        -ms-overflow-style: none; scrollbar-width: none; 
        width: 100vw !important; position: static !important; height: auto !important; margin: 0 !important; gap: 1rem !important;
    }
    .shop-sidebar::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
    
    .sidebar-section, .filter-group { display: flex !important; flex-direction: row !important; margin: 0 !important; gap: 1rem !important; align-items: center !important; }
    .sidebar-section h3 { display: none !important; }
    .filter-list { display: flex !important; flex-direction: row !important; margin: 0 !important; padding: 0 !important; gap: 1rem !important; list-style: none !important; }
    .filter-list li { margin: 0 !important; }
    
    .shop-filter-link, .filter-btn {
        background: transparent !important; padding: 0.6rem 1rem !important;
        border: 1px solid rgba(9, 9, 9, 0.35) !important; border-radius: 0 !important; 
        font-family: var(--sans) !important; font-size: 0.75rem !important;
        text-transform: uppercase !important; letter-spacing: 0.1em !important;
        color: #090909 !important; font-weight: 600 !important; display: inline-block !important;
    }

    /* 6A. CURRENT WORK GRIDS */
    /* padding-top must clear the absolutely-positioned .site-header (~70px
       tall: 1.5rem top padding + brand-name line height + 1rem bottom
       padding + border). 3rem (48px) was short by ~20px, so the filter
       chips/title sat under the header instead of below it. */
    .gallery-section, .shop-layout { padding-left: 0 !important; padding-right: 0 !important; padding-top: 5rem !important; }
    .section-label { text-align: left !important; padding: 0 5% 1rem !important; font-family: var(--sans) !important; font-weight: 600 !important; color: #090909 !important; }
    .collection-grid, .shop-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 4rem !important; padding: 2rem 5% 8rem !important; }
    .stone-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-decoration: none !important; }
    
    .stone-frame {
        width: 100% !important; aspect-ratio: 4 / 5 !important; 
        background: transparent !important; border-radius: 0 !important; 
        overflow: hidden !important; margin-bottom: 1.5rem !important; box-shadow: none !important; 
    }
    .stone-frame img, .main-image-display img, .cart-thumb img, .grid-item-inner img { 
        width: 100% !important; height: 100% !important; object-fit: contain !important; 
        mix-blend-mode: multiply !important; 
    }
    
    .stone-card h3, .grid-overlay h3 {
        font-family: var(--serif) !important; font-size: 2rem !important; font-weight: 400 !important; 
        line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: none !important;
        color: #090909 !important; margin: 0 0 0.5rem 0 !important; text-align: left !important;
    }
    .stone-card .price, .stone-card .meta, .grid-overlay .meta { font-family: var(--sans) !important; font-size: 0.85rem !important; font-weight: 600 !important; color: #090909 !important; text-align: left !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; opacity: 1 !important;}

    /* 6B. THE LEGACY CAROUSEL */
    .legacy-grid {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
        scroll-snap-type: x mandatory !important; gap: 1.5rem !important;
        padding: 2rem 5% 4rem !important; -ms-overflow-style: none; scrollbar-width: none; 
    }
    .legacy-grid::-webkit-scrollbar { display: none; }
    .legacy-grid .stone-card { flex: 0 0 80vw !important; scroll-snap-align: center !important; }
    .legacy-grid .archive-frame { width: 100% !important; aspect-ratio: 4 / 5 !important; background: transparent !important; border-radius: 0 !important; overflow: hidden !important; margin-bottom: 1.5rem !important; }
    .legacy-grid .archive-frame img {
        width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: multiply !important;
        filter: grayscale(100%) !important; opacity: 0.4 !important; transform: scale(0.95) !important;
        transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .legacy-grid .stone-card.is-focused .archive-frame img { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1) !important; }
    .legacy-grid h3 { font-size: 1.8rem !important; }
    
    /* Masonry override for Archive */
    .masonry-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 6rem !important; padding: 2rem 5% 8rem !important; }
    .grid-item-inner { width: 100% !important; aspect-ratio: 4 / 5 !important; background: transparent !important; border-radius: 0 !important; overflow: hidden !important; margin-bottom: 1.5rem !important; box-shadow: none !important; }
    .grid-overlay { position: static !important; background: transparent !important; padding: 0 !important; pointer-events: auto !important; }

    /* 7. SECONDARY PAGES & PRODUCT -- Center Stage, applied 28 July 2026.
       Generous whitespace, centered image + type, dot pager instead of an
       arrow/counter overlay. Replaces the earlier full-bleed treatment. */
    .gallery-layout { display: flex !important; flex-direction: column !important; padding: 4.5rem 0 6.5rem !important; margin: 0 !important; }
    .gallery-stage { display: flex !important; flex-direction: column !important; align-items: center !important; position: relative !important; width: 100% !important; padding: 0 !important; margin-bottom: 1.25rem !important; gap: 0 !important; }
    /* The thumbnail strip stays in the DOM (mobile.js reads it for the image
       list + count) but is visually replaced by the dot pager below. */
    .thumbnail-strip { display: none !important; }
    .main-image-display { position: relative !important; width: 68% !important; margin: 0 auto !important; aspect-ratio: 4 / 5 !important; background: transparent !important; border-radius: 0 !important; overflow: hidden !important; }
    .main-image-display img { object-fit: contain !important; mix-blend-mode: multiply !important; }
    /* Arrow/counter overlay swapped for a dot pager (mobile.js renders one
       dot per photo into .gallery-dots and keeps it in sync with swipe/tap). */
    .gallery-counter, .gallery-arrow { display: none !important; }
    .gallery-dots { display: flex !important; justify-content: center !important; gap: 5px !important; margin: 0.85rem 0 0 !important; }
    .gallery-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(9, 9, 9, 0.2); }
    .gallery-dots span.active { background: #090909; }
    .curator-label { padding: 0 8% !important; max-width: 100% !important; text-align: center !important; }
    .label-breadcrumb { display: none !important; }

    .curator-title { font-family: var(--serif) !important; font-size: 1.7rem !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #090909 !important; margin: 1.5rem 0 0.4rem !important; text-align: center !important; }

    .curator-price { margin-bottom: 0.5rem !important; text-align: center !important; }
    .curator-price .current { font-family: var(--sans) !important; font-size: 1rem !important; font-weight: 600 !important; color: #090909 !important; }
    .curator-price .original { font-family: var(--sans) !important; font-weight: 400 !important; color: #666 !important; }
    .status-collected { font-family: var(--sans) !important; font-size: 0.9rem !important; font-weight: 700 !important; text-transform: uppercase !important; color: #090909 !important; }
    /* One muted inline line instead of a stacked spec list -- "Pounamu · Region · Cord". */
    .specs-grid { border: none !important; padding: 0 !important; gap: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; margin-bottom: 1.5rem !important; }
    .spec-row { display: inline-flex !important; align-items: center !important; margin-bottom: 0 !important; gap: 0.35rem !important; }
    .spec-row:not(:last-child)::after { content: '·'; margin-left: 0.35rem; color: #8a8578; }
    .spec-label { display: none !important; }
    .spec-value { font-family: var(--sans) !important; font-size: 0.8rem !important; font-weight: 400 !important; color: #8a8578 !important; text-transform: none !important; }

    /* Description: collapsed by default; mobile.js adds the "Read More"
       toggle and .is-expanded class. */
    .whakapapa-text { font-family: var(--sans) !important; font-size: 0.9rem !important; font-weight: 400 !important; line-height: 1.55 !important; color: #090909 !important; margin-top: 0.75rem !important; text-align: center !important; position: relative !important; max-height: 5.5em !important; overflow: hidden !important; }
    .whakapapa-text.is-expanded { max-height: none !important; }
    .whakapapa-text:not(.is-expanded)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, transparent, #EBEAE4); }
    .whakapapa-text p { margin-bottom: 1.25rem !important; }
    .read-more-toggle { display: inline-block !important; margin-top: 0.6rem !important; font-family: var(--sans) !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #090909 !important; text-decoration: underline !important; background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important; }
    .studio-disclaimer { display: block !important; border-top: 1px solid rgba(9, 9, 9, 0.12) !important; margin-top: 2rem !important; padding-top: 1.25rem !important; text-align: center !important; }
    .studio-disclaimer p { font-family: var(--sans) !important; font-size: 0.72rem !important; line-height: 1.6 !important; color: #8a8578 !important; margin-bottom: 0.4rem !important; }

    .about-page, .contact-page, .transaction-layout, .checkout-page, .success-page { padding: 6rem 5% 10rem !important; margin: 0 !important; max-width: 100% !important; }
    .contact-intro h1, .transaction-layout h1, .checkout-intro h1, .cart-header h1, .success-page h1, .archive-header h1 { font-family: var(--serif) !important; font-size: clamp(2.5rem, 10vw, 4.5rem) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; text-transform: none !important; color: #090909 !important; text-align: left !important; margin-bottom: 1.5rem !important; word-wrap: break-word !important; display: block !important; }
    .contact-intro p, .cart-header p, .success-page p, .checkout-intro p, .archive-header p { font-family: var(--sans) !important; font-weight: 400 !important; color: #090909 !important; text-align: left !important; font-size: 1rem !important; }
    .quiet-input, .quiet-textarea, .quiet-select, .paper-form input, .paper-form select, .paper-form textarea { border-bottom: 1px solid #090909 !important; border-radius: 0 !important; font-family: var(--sans) !important; font-weight: 400 !important; color: #090909 !important; background: transparent !important; padding: 1rem 0 !important; font-size: 1.1rem !important; }
    
    .about-chapter { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding: 3rem 0 !important; border-bottom: 1px solid #090909 !important; border-top: none !important; }
    .chapter-label { font-family: var(--sans) !important; font-weight: 600 !important; color: #090909 !important; border-bottom: 1px solid #090909 !important; padding-bottom: 0.5rem !important; width: 100% !important; text-transform: uppercase !important;}
    .chapter-content h2 { font-family: var(--serif) !important; font-size: 2.5rem !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; text-transform: none !important; color: #090909 !important; margin: 1rem 0 1.5rem !important; text-align: left !important; }
    .chapter-content p { font-family: var(--sans) !important; font-weight: 400 !important; color: #090909 !important; text-align: left !important; }
    .specimen-card { border-top: 1px solid #090909 !important; padding-top: 1.5rem !important; margin-bottom: 2rem !important; }
    .specimen-card h3 { font-family: var(--serif) !important; font-size: 2rem !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #090909 !important; }

    /* 8. CART & CHECKOUT
       Rebuilt August 2026. The structural rules (page padding, the flex on
       each summary row) now live in core.css, because they were sitting in
       desktop.css where a phone never saw them. What's left here is only
       what should differ on a phone. */

    /* Was missing entirely: .cart-layout had no mobile padding, so the
       heading started off the left edge and ran under the fixed header. */
    .cart-layout {
        padding: calc(var(--nav-height) + 1.5rem) 5% 6rem !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .cart-header { text-align: left !important; margin-bottom: 2rem !important; }

    /* "Shopping Cart" at 4.5rem overflowed a 390px screen and pushed the
       whole page sideways -- that's the cut-off text and the horizontal
       scroll. */
    .cart-header h1,
    .checkout-intro h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; }

    .cart-header .niho-divider { display: none !important; }

    .cart-grid { display: flex !important; flex-direction: column !important; gap: 2.5rem !important; }
    .cart-item { border-bottom: 1px solid #090909 !important; padding-bottom: 2rem !important; margin-bottom: 0 !important; gap: 1.5rem !important; display: flex !important; align-items: center !important;}
    .cart-thumb { width: 100px !important; background: transparent !important; border-radius: 0 !important; flex-shrink: 0 !important;}
    .cart-details { flex: 1 !important; }
    .cart-details h3 { font-family: var(--serif) !important; font-size: 1.5rem !important; font-weight: 400 !important; text-transform: none !important; line-height: 1.1 !important; color: #090909 !important; }
    .cart-details span { font-family: var(--sans) !important; font-weight: 600 !important; color: #090909 !important; text-transform: uppercase !important; }
    .summary-panel, .checkout-summary { border-top: 2px solid #090909 !important; padding-top: 2rem !important; margin-top: 2rem !important; }
    .summary-panel h3 { font-family: var(--serif) !important; font-size: 2rem !important; font-weight: 400 !important; text-transform: none !important; border-bottom: 1px solid #090909 !important; padding-bottom: 1rem !important; margin-bottom: 2rem !important; color: #090909 !important; }
    /* Long labels ("Shipping (New Zealand)") wrap rather than shoving the
       amount off the row. */
    .summary-row, .summary-line {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 1rem !important;
        margin-bottom: 0.9rem !important;
    }
    .summary-row span, .summary-line span {
        font-family: var(--sans) !important; font-weight: 600 !important;
        color: #090909 !important; text-transform: uppercase !important;
        font-size: 0.78rem !important; letter-spacing: 0.06em !important;
    }
    .summary-row span:last-child, .summary-line span:last-child { white-space: nowrap !important; text-align: right !important; }
    .summary-total, .summary-total-line {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 1rem !important;
        border-top: 1px solid #090909 !important;
        padding-top: 1.2rem !important; margin-top: 1.2rem !important;
    }
    /* 2rem on both spans meant TOTAL and the amount together were wider
       than the screen. */
    .summary-total span, .summary-total-line span {
        font-family: var(--sans) !important; font-weight: 600 !important;
        color: #090909 !important; text-transform: uppercase !important;
    }
    .summary-total span:first-child, .summary-total-line span:first-child { font-size: 0.85rem !important; letter-spacing: 0.1em !important; }
    .summary-total span:last-child, .summary-total-line span:last-child { font-size: 1.5rem !important; white-space: nowrap !important; }

    /* Promo drawer */
    .gc-toggle { padding: 1.2rem 0 0.5rem !important; margin-top: 1.2rem !important; font-size: 0.72rem !important; }
    .gc-drawer.is-open { max-height: 220px !important; }
    .gc-form { display: flex !important; align-items: center !important; gap: 0.75rem !important; }
    .gc-form .quiet-input { flex: 1 !important; min-width: 0 !important; font-size: 1rem !important; padding: 0.75rem 0 !important; }

    /* The checkout button is fixed to the bottom of the screen, so the
       summary needs room to clear it rather than hiding under it. */
    .summary-panel { padding-bottom: 1rem !important; }

    /* BUTTONS */
    .buy-btn, .return-btn, .submit-btn, .checkout-btn {
        background: #090909 !important; color: #EBEAE4 !important;
        font-family: var(--sans) !important; font-size: 0.85rem !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.1em !important;
        padding: 1.5rem !important; border: none !important; border-radius: 0 !important;
        width: 100% !important; text-align: center !important; display: block !important; margin-top: 2rem !important; cursor: pointer !important;
    }
    .gallery-layout .action-area { padding: 0 5% !important; margin-bottom: 4rem !important; position: static !important; box-shadow: none !important; }

    /* 9. NAVIGATION & OVERLAYS
       .mobile-bottom-nav and the half-sheet cart modal removed 21 July 2026 --
       the fixed bar sat over the content at z-index 9999 and clashed with the
       footer and the menu panel. Markup gone from header.php, JS gone from
       mobile.js. */

    /* 10. FOOTER & PHILOSOPHY */
    .studio-philosophy { padding: 6rem 5% !important; background: transparent !important; }
    .philosophy-content p, .philosophy-content em {
        font-family: var(--serif) !important; font-size: 2.2rem !important; font-weight: 400 !important;
        line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important;
        text-align: left !important; color: #090909 !important; font-style: italic !important;
    }
    .philosophy-link { font-family: var(--sans) !important; font-weight: 600 !important; color: #090909 !important; text-transform: uppercase !important; border-bottom: 1px solid #090909 !important; font-size: 0.85rem !important; padding-bottom: 4px !important; }

    footer { background: #090909 !important; color: #EBEAE4 !important; padding: 4rem 5% 8rem !important; display: flex !important; flex-direction: column !important; gap: 3rem !important; align-items: flex-start !important; }
    footer .brand-name { color: #EBEAE4 !important; font-size: 2rem !important; font-family: var(--serif) !important; text-transform: none !important; order: -1; }
    footer > div[style*="position: absolute"] { position: static !important; text-align: left !important; width: 100% !important; }
    footer a, footer span { color: #EBEAE4 !important; display: block !important; margin-bottom: 1rem !important; font-family: var(--sans) !important; font-weight: 600 !important; text-transform: uppercase !important; }
}

@media (min-width: 901px) { .mobile-only, .mobile-fullscreen-menu { display: none !important; } }
/* =====================================================================
   HOMEPAGE FEATURED GRID — MOBILE
   Was the bento grid; replaced with uniform cards August 2026.

   The old block here existed to solve a problem that no longer exists:
   .bento-label was hover-only, so on a phone the grid rendered as eight
   unlabelled photographs. Titles and prices are plain text under every
   card now, at every width, so none of that scaffolding is needed.
   ===================================================================== */

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

    .home-featured { padding: 1.5rem 0 0 !important; }

    /* The shop's mobile rule drops .shop-grid to one big column. On the
       homepage two across is right -- it's a taster, not the collection. */
    .home-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.2rem 1.1rem !important;
        padding: 0 5% !important;
    }

    .home-grid .stone-card h3 { font-size: 1.05rem !important; margin-bottom: 0.25rem !important; }
    .home-grid .stone-card .price { font-size: 0.72rem !important; }
    .home-grid .stone-frame { margin-bottom: 0.9rem !important; }

    /* No hover on a phone, so the Past Work label stays visible. */
    .home-legacy-veil { opacity: 1 !important; background: rgba(31, 28, 22, 0.3) !important; }
    .home-legacy-veil span {
        transform: none !important;
        font-size: 0.55rem !important;
        padding: 0.5rem 0.9rem !important;
    }
    .home-legacy .stone-frame img { filter: grayscale(100%) !important; }
}

/* Very narrow phones: single column reads better than two cramped ones. */
@media screen and (max-width: 380px) {
    .home-grid { grid-template-columns: 1fr !important; }
    .home-grid .stone-card h3 { font-size: 1.4rem !important; }
}


/* =====================================================================
   MOBILE MENU — PANEL INSTEAD OF FULL SCREEN
   Added July 2026.

   Was position:fixed at 100vw/100vh with the links vertically centred by
   flex:1. Tapping the burger replaced the entire page, which loses your
   place and reads heavier than a seven-link menu warrants.

   Now a panel that drops from under the header, sized to its content,
   with the page dimmed behind it and still visible.
   ===================================================================== */

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

    .mobile-fullscreen-menu {
        /* Height is content-driven now, capped so a long menu scrolls
           rather than running off the bottom of the screen. */
        height: auto !important;
        max-height: calc(100vh - 2rem) !important;
        width: auto !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
        right: 0.75rem !important;

        border-radius: 6px;
        overflow-y: auto;
        overscroll-behavior: contain;   /* don't scroll the page behind it */
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);

        /* Slide down a short distance instead of the full viewport height. */
        transform: translateY(-115%) !important;
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-fullscreen-menu.is-active {
        transform: translateY(0) !important;
    }

    /* The nav no longer needs to fill a screen, so drop the flex:1
       centring that was stretching seven links across 100vh. */
    .massive-nav {
        flex: 0 1 auto !important;
        justify-content: flex-start !important;
        padding: 1.25rem 8% 1.75rem !important;
        gap: 0 !important;
    }

    .massive-nav a {
        /* Was clamp(1.9rem, 7vw, 2.6rem) -- sized to fill a full screen.
           Too large for a panel, and it forced scrolling on small phones. */
        font-size: 1.45rem !important;
        padding: 0.6rem 0 !important;
        border-bottom: 1px solid rgba(235, 234, 228, 0.08);
    }
    .massive-nav a:last-child { border-bottom: none; }

    .menu-header {
        padding: 1.1rem 8% !important;
        position: sticky;
        top: 0;
        background: #201F1A;
        z-index: 1;
    }

    /* Dimmed backdrop so the page stays visible behind the panel.
       Rendered as a pseudo-element on <body> to avoid touching the markup. */
    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 15, 12, 0.55);
        backdrop-filter: blur(2px);
        z-index: 10004;        /* under the menu's 10005 */
        animation: menuFade 0.35s ease forwards;
    }

    @keyframes menuFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Stop the page scrolling underneath while the panel is open. */
    body.menu-open { overflow: hidden; }
}


/* =====================================================================
   CART LINK IN THE MOBILE MENU
   Added 21 July 2026, replacing the removed bottom bar. The header's cart
   link is .desktop-only, so without this the cart is unreachable on a phone.
   ===================================================================== */

@media screen and (max-width: 900px) {
    .massive-nav .menu-cart-link {
        margin-top: 0.9rem;
        padding: 0.85rem 0 !important;
        border-top: 1px solid rgba(235, 234, 228, 0.22);
        border-bottom: none !important;
        font-size: 1.15rem !important;
        letter-spacing: 0.04em;
        opacity: 0.9;
    }
}

/* =====================================================================
   MOBILE FIXES — 24 July 2026
   ===================================================================== */

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

    /* --- The black bar across the top -------------------------------
       #cookie-line is a 4px fixed strip in core.css, a scroll-progress
       indicator. It reads as a stray black line on a phone. */
    #cookie-line { display: none !important; }

    /* --- Faint rule under the brand name ----------------------------
       .site-header is position:absolute and transparent, so the header
       had no edge at all and the title floated into the content. */
    .site-header {
        border-bottom: 1px solid rgba(9, 9, 9, 0.10) !important;
        padding-bottom: 1rem !important;
        background: transparent !important;
    }

    /* --- Footer was sized for the removed bottom nav -----------------
       Bottom padding was 9rem to clear a fixed bar that no longer
       exists, which is why the footer looked enormous. */
    .studio-footer {
        padding: 2rem 6% 1.75rem !important;
    }
    .muka-footer-top { gap: 1.25rem !important; }
    .muka-cols { gap: 1rem !important; }
    .muka-col { gap: 0.4rem !important; }
    .muka-footer-bottom {
        margin-top: 1.25rem !important;
        padding-top: 0.9rem !important;
    }

    /* --- Instagram button was unreadable -----------------------------
       'footer a, footer span' further up this file sets #EBEAE4 for the
       old dark footer. The footer is cream now, so that made the button
       near-white on near-white. */
    .muka-instagram,
    .muka-instagram span {
        color: #1F1C16 !important;
        display: flex !important;
        margin-bottom: 0 !important;
    }
    .muka-instagram {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        border: 1px solid rgba(31, 28, 22, 0.35) !important;
        background: rgba(31, 28, 22, 0.03) !important;
        padding: 0.85rem 1rem !important;
        margin-top: 0.5rem !important;
    }
    .muka-instagram svg { stroke: #1F1C16 !important; }

    /* --- Contact form had no layout on mobile ------------------------
       .contact-form (flex column + gap) is defined only in desktop.css,
       so on a phone the fields collapsed together with no spacing. */
    .contact-page {
        padding: calc(var(--nav-height, 70px) + 2.5rem) 6% 4rem !important;
    }
    .contact-intro { margin-bottom: 2.5rem !important; }
    .contact-intro h1 {
        font-size: 2.4rem !important;
        line-height: 1.05 !important;
        margin: 0.5rem 0 1rem !important;
    }
    .contact-intro p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
    }
    .contact-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.75rem !important;
        width: 100% !important;
    }
    .contact-form .quiet-input,
    .contact-form .quiet-textarea,
    .contact-form select {
        width: 100% !important;
        box-sizing: border-box !important;
        /* 16px minimum stops iOS zooming the whole page on focus */
        font-size: 1rem !important;
    }
    .contact-form .quiet-textarea { min-height: 7rem !important; resize: vertical !important; }
    .contact-form .submit-btn {
        width: 100% !important;
        margin-top: 1rem !important;
        padding: 1.1rem !important;
    }

    /* --- Shop grid: two columns, matching the desktop rhythm ----------
       Was a single column with a 4rem gap, so one carving filled the
       screen and browsing meant a lot of scrolling. */
    .collection-grid,
    .shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.75rem 1rem !important;
        padding: 1.5rem 5% 3rem !important;
    }
    .stone-card .stone-frame {
        aspect-ratio: 4 / 5 !important;
        width: 100% !important;
    }
    .stone-card h3 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        margin: 0.7rem 0 0.2rem !important;
    }
    .stone-card .price,
    .stone-card .meta {
        font-size: 0.72rem !important;
        letter-spacing: 0.08em !important;
    }

    /* The archive keeps its single-column swipe treatment. */
    .legacy-grid { grid-template-columns: 1fr !important; }
}

/* Very narrow phones: one column reads better than two cramped ones. */
@media screen and (max-width: 360px) {
    .collection-grid,
    .shop-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   STICKY BOTTOM ACTION BARS — 26 July 2026
   Product, cart and checkout each buried their one primary action (Add to
   Cart / Proceed to Checkout / Proceed to Payment) at the very bottom of a
   long scroll. Pinning it to the bottom of the viewport means it's reachable
   without hunting for it, on every one of these pages.
   ===================================================================== */

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

    /* Product page: the whole action-area becomes the sticky bar -- it
       already holds nothing but the buy button / locked state / in-cart link. */
    .gallery-layout .action-area {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 500;
        margin: 0 !important;
        padding: 0.6rem 5% !important;
        box-sizing: border-box !important;
        background: #EBEAE4;
        box-shadow: 0 -6px 20px rgba(9, 9, 9, 0.12);
    }
    .gallery-layout .action-area .buy-btn,
    .gallery-layout .action-area .btn-locked { margin-top: 0 !important; padding: 1.05rem !important; }
    .gallery-layout { padding-bottom: 4.75rem !important; }

    /* Cart: pin just the checkout button, summary detail stays in flow. */
    .summary-panel .checkout-btn {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 500;
        margin: 0 !important;
        box-shadow: 0 -6px 20px rgba(9, 9, 9, 0.12);
    }
    .cart-layout { padding-bottom: 6rem !important; }

    /* Checkout: pin the pay/complete button the same way. */
    .checkout-form .submit-btn {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        z-index: 500;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: 0 -6px 20px rgba(9, 9, 9, 0.12);
    }
    .checkout-page { padding-bottom: 7rem !important; }
    .checkout-intro { text-align: left !important; margin-bottom: 1.5rem !important; }
    .checkout-payment-note { padding: 1.1rem 1.2rem !important; margin-bottom: 1rem !important; }
    .checkout-payment-note p { font-size: 0.85rem !important; }
    .checkout-section { margin: 1.8rem 0 0.2rem !important; }
}


/* =====================================================================
   SHOP — INFINITE SCROLL, MOBILE
   ===================================================================== */
@media screen and (max-width: 900px) {
    .shop-more { padding: 2.5rem 5% 4rem !important; }
    .shop-more .cta-button { width: 100%; text-align: center; padding: 1.1rem 1rem !important; }
    .shop-end { padding: 1rem 5% 4rem !important; }
    .shop-empty { padding: 2rem 8% 6rem !important; }
    .home-shop-all { margin-top: 2.5rem !important; padding: 0 5%; }
    .home-shop-all .cta-button { width: 100%; text-align: center; padding: 1.1rem 1rem !important; }
}


/* Homepage intro — scaled down with the desktop version, August 2026. */
@media screen and (max-width: 900px) {
    .muka-intro { padding: calc(var(--nav-height) + 1.5rem) 5% 0.5rem !important; gap: 1.2rem !important; }
    .muka-intro h1 { font-size: 1.45rem !important; line-height: 1.35 !important; }
    .muka-intro-note { font-size: 0.82rem !important; line-height: 1.65 !important; max-width: 100% !important; }
}