/* =========================================
   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, .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 */
    .cart-grid { display: flex !important; flex-direction: column !important; gap: 4rem !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; }
    .summary-row span, .summary-line span { font-family: var(--sans) !important; font-weight: 600 !important; color: #090909 !important; text-transform: uppercase !important; }
    .summary-total, .summary-total-line { border-top: 1px solid #090909 !important; padding-top: 1.5rem !important; margin-top: 1.5rem !important; }
    .summary-total span, .summary-total-line span { font-family: var(--sans) !important; font-size: 2rem !important; font-weight: 600 !important; color: #090909 !important; text-transform: uppercase !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; } }
/* =====================================================================
   BENTO GRID — MOBILE
   Added July 2026.

   Two separate problems were making this unusable on a phone:

   1. .bento-label is opacity:0 and only revealed by :hover. Touch devices
      have no hover, so the grid rendered as eight unlabelled photographs
      with no indication they were category links at all. That's the main
      reason it "didn't work".

   2. The only mobile bento rules lived in core.css behind
      @media (max-width: 768px), but mobile.css loads at max-width: 900px.
      Anything between 769px and 900px got the full desktop 3-column
      layout at 220px rows, squeezed into a phone-width viewport.

   Plus the spans: .span-wide kept its 2-column span while .span-tall was
   flattened, so with grid-auto-flow: dense the tiles packed unevenly and
   left holes.
   ===================================================================== */

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

    .hero-category-grid {
        padding: calc(var(--nav-height) + 2rem) 5% 3rem;
    }

    /* Even 2-column grid. Every tile identical -- no spans, no dense
       packing, no holes. Square tiles keep the bento character while
       staying predictable at any phone width. */
    .bento-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 0.75rem !important;
        grid-auto-flow: row !important;
    }

    .bento-item {
        aspect-ratio: 1 / 1;
        border-radius: 2px;
    }

    /* Spans off. On two columns a wide tile is a full-width tile, which
       breaks the rhythm, and a tall one leaves a gap beside it. */
    .bento-grid .span-tall,
    .bento-grid .span-wide {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }

    /* THE FIX THAT MATTERS: labels always visible.
       A scrim behind the text rather than the hover overlay, so the
       photograph still reads underneath. */
    .bento-item::after {
        opacity: 1 !important;
        background: linear-gradient(
            to top,
            rgba(26, 26, 26, 0.78) 0%,
            rgba(26, 26, 26, 0.35) 38%,
            rgba(26, 26, 26, 0) 68%
        ) !important;
    }

    .bento-item.is-legacy::after {
        background: linear-gradient(
            to top,
            rgba(10, 10, 10, 0.85) 0%,
            rgba(10, 10, 10, 0.45) 38%,
            rgba(10, 10, 10, 0) 68%
        ) !important;
    }

    /* Label sits bottom-left, always shown, no transform to animate in. */
    .bento-item {
        align-items: flex-end !important;
        justify-content: flex-start !important;
    }

    .bento-label {
        opacity: 1 !important;
        transform: none !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.14em !important;
        padding: 0 0 0.85rem 0.85rem !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        line-height: 1.2;
    }

    /* Touch feedback, since there's no hover state to rely on. */
    .bento-item:active { transform: scale(0.975); transition: transform 0.15s ease; }
    .bento-item:active img { transform: none; }
}

/* Very narrow phones: single column reads better than two cramped ones. */
@media screen and (max-width: 380px) {
    .bento-grid { grid-template-columns: 1fr !important; }
    .bento-item { aspect-ratio: 16 / 10; }
    .bento-label { font-size: 0.8rem !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: 6.5rem !important; }
}