/* ═══════════════════════════════════════════════════════════
   MOBILE & TOUCH OPTIMIZATION
   Loaded LAST so it overrides the desktop stylesheets.
   Two layers:
     1. @media (hover: none)  — touch devices of any size:
        reveal all hover-only controls (no hover on touchscreens)
     2. @media (max-width: 768px) — small screens:
        replace fixed desktop widths with fluid layout
═══════════════════════════════════════════════════════════ */

/* Hamburger menu button (in header.html; main.js has a fallback) and
   the sub-menu arrow buttons — all phone-only, hidden on desktop */
.nav-menu-btn,
.nav-sub-toggle { display: none; border: none; cursor: pointer; }

/* ─── 1. TOUCH DEVICES: hover-revealed controls always visible ─── */
@media (hover: none) {
  .gallery-btn,
  .product-btn,
  .glb-btn, .flb-btn, .plb-btn,
  .glb-thumb-strip,
  .viewer-arrow-outer,
  .product-viewer-arrow,
  .slider-btn,
  .glb-arrow-zone, .flb-arrow-zone, .plb-arrow-zone,
  .acrylic-buy-overlay,
  .hero-slide-label,
  .info-popup-arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hero-slide-label { transform: translateY(0) scale(1); }
  .hero-slide-overlay { pointer-events: auto; }
}

/* ─── 2. SMALL SCREENS ─── */
@media (max-width: 768px) {

  /* ── No arrows on phones — swiping changes images instead ── */
  .viewer-arrow-outer,
  .product-viewer-arrow,
  .glb-arrow-zone, .flb-arrow-zone, .plb-arrow-zone,
  .slider-btn {
    display: none !important;
  }

  /* ── Grid tracks must be allowed to shrink below their content,
        or a 725px image box silently forces the whole "1-column"
        layout to stay 725px wide (the classic min-width:auto trap) ── */
  .product-layout,
  .cart-layout,
  .checkout-layout,
  .artist-grid { grid-template-columns: 1fr; }
  .product-layout > *,
  .cart-layout > *,
  .checkout-layout > *,
  .artist-grid > * { min-width: 0; }

  /* ── Header & nav: links collapse into a dropdown menu ── */
  .site-header { padding: 12px 14px 6px; }
  .tagline     { display: none; }
  .site-logo   { font-size: 26px; margin-top: 2px; margin-left: 1px; }
  .header-inner {
    padding-left: 40px;   /* hamburger sits at the far left */
    padding-right: 44px;  /* cart at the far right */
  }

  .site-nav { padding: 0; }

  /* Closed: the link strip collapses to nothing. The cart icon stays
     visible because it's pinned separately (position:fixed below). */
  .nav-inner {
    height: 0;
    padding: 0;
    gap: 0;
  }
  .nav-inner > a:not(.nav-cart),
  .nav-inner > .nav-dropdown-wrap { display: none; }

  /* Open: the strip becomes a dropdown panel hanging off the header */
  .site-nav.open .nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 10px;
    height: auto;
    width: auto;
    min-width: 200px;
    max-width: calc(100vw - 20px);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: visible;  /* sub-menus fly out past the panel edge */
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    padding: 4px 0;
    z-index: 300;
  }
  .site-nav.open .nav-inner > a:not(.nav-cart) { display: block; }
  /* About Prints / FAQ rows are split: label link + arrow button */
  .site-nav.open .nav-inner > .nav-dropdown-wrap {
    display: flex;
    align-items: stretch;
  }
  .site-nav.open .nav-inner > a:not(.nav-cart),
  .site-nav.open .nav-inner > .nav-dropdown-wrap a {
    display: block;
    width: 100%;
    padding: 11px 20px;
  }
  .site-nav.open .nav-inner > .nav-dropdown-wrap a {
    flex: 1;
    min-width: 0;
  }
  .site-nav.open .nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    background: none;
    border-left: 1px solid var(--border);
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    padding: 0 0 3px;   /* optically centers the › glyph */
  }
  .nav-dropdown-wrap.open .nav-sub-toggle {
    background: var(--text);
    color: var(--bg);
  }
  /* separator lines between menu rows */
  .site-nav.open .nav-inner > :not(.nav-cart) + :not(.nav-cart) {
    border-top: 1px solid var(--border);
  }
  /* Sub-menus (About Prints / FAQ): tapping the ARROW toggles .open on
     its wrap (main.js), and the options fly out to the RIGHT of the
     menu panel. The label itself is a normal link. Hover-opening is
     disabled — there's no hover on touch. */
  .nav-dropdown-wrap:hover .nav-dropdown { display: none; }
  .nav-dropdown-wrap.open .nav-dropdown {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    right: auto;
    transform: none;
    margin-left: 4px;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 224px);  /* stay on screen; long labels wrap */
    white-space: normal;
    z-index: 310;
  }
  .nav-dropdown-wrap::after { display: none; }

  /* Hamburger button — pinned top-left, just before the site title */
  .nav-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: fixed;
    top: 12px;
    left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    z-index: 400;
    padding: 0;
  }
  .nav-menu-btn span {
    display: block;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--bg);
    transition: transform 0.2s, opacity 0.2s;
  }
  /* bars morph into an X while the menu is open */
  .nav-menu-btn.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-menu-btn.open span:nth-child(2) { opacity: 0; }
  .nav-menu-btn.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Cart icon pinned top-right. `fixed` instead of `absolute`: when the
     menu panel opens, .nav-inner becomes positioned, which would yank an
     absolute cart into the panel — fixed keeps it anchored to the screen
     (visually identical, since the sticky header is always at the top). */
  .nav-cart,
  .site-nav.open .nav-cart {
    position: fixed !important;
    top: 12px !important;
    right: 14px !important;
    left: auto !important;   /* never inherit a left anchor */
    bottom: auto !important;
    margin: 0 !important;
    z-index: 400;
  }

  /* ── Hero slider ──────────────────────────────────────── */
  .hero-section { padding: 14px 0 20px; }
  .hero-side    { display: none; }
  .hero-center  { width: 92vw; margin: 0; }
  .slider-btn.prev { left: 6px; }
  .slider-btn.next { right: 6px; }

  /* ── Home sections ────────────────────────────────────── */
  .home-sections { padding: 4px 12px; }
  .home-section  { padding: 20px 18px 24px; }
  .framed-grid {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
    gap: 20px;
  }
  .acrylic-showcase {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .acrylic-option-info p { margin-right: 0; }

  /* Artist photo now stacks BELOW the bio (grid collapsed above).
     Cap its size so it reads as a portrait, not a full-bleed banner. */
  .artist-photo {
    max-width: 280px;
    margin: 6px auto 0;
  }

  /* ── Gallery page ─────────────────────────────────────── */
  .gallery-page { padding: 0 12px; }
  .gallery-page h1   { font-size: 19px; }
  .gallery-page .sub { font-size: 16px; }
  .gallery-viewer-wrap {
    margin-left: 0;
    width: 100%;
    position: relative;
  }
  .gallery-viewer-shell {
    width: 100%;
    height: auto;
    min-height: 200px;
  }
  .gallery-viewer {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;   /* JS overrides with exact px once the image loads */
  }
  .thumb-strip {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    grid-template-rows: none;
  }
  .thumb-item {
    width: 100%;
    height: auto;
    aspect-ratio: 118 / 84;
  }
  .thumb-buy-btn {
    grid-column: auto;   /* was pinned to column 7 of a 7-col desktop grid */
    grid-row: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 118 / 84;
  }

  /* ── Product page ─────────────────────────────────────── */
  .product-page { padding: 0 12px; }
  .product-page h1   { font-size: 19px; }
  .product-page .sub { font-size: 16px; }
  .product-viewer-wrap {
    width: 100%;
    height: auto;
    min-height: 200px;
  }
  .product-viewer-shell { height: auto; }
  .product-main-img { max-width: 100%; }
  .product-thumb-strip {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  }
  .product-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 118 / 84;
  }
  .product-info .subtotal { margin-top: 20px !important; }

  /* ── Tap in, tap out: no buttons needed on the images ──
        Tapping a viewer image opens its lightbox (wired in JS);
        tapping the lightbox image or backdrop already closes it. */
  .btn-closer-look,
  .btn-product-closer-look,
  .glb-close, .flb-close, .plb-close {
    display: none !important;
  }

  /* ── Lightboxes: image fills the screen, controls move BELOW it ── */
  .glb-inner, .flb-inner, .plb-inner {
    position: relative;
    max-width: 100vw;
  }
  .glb-img-wrap, .flb-img-wrap {
    width: 94vw;
    height: 60vh;          /* leaves room for the controls underneath */
  }
  .plb-img-wrap img {
    max-width: 94vw;
    max-height: 62vh;
  }

  /* Gallery lightbox: thumbnails bottom-left, Buy bottom-right —
     both re-anchored to sit just below the image instead of on it */
  .glb-thumb-strip {
    bottom: auto;
    top: calc(100% + 12px);
    left: 0;
    max-width: calc(100% - 104px);   /* leave room for the Buy button */
    flex-wrap: wrap;
    gap: 6px;
  }
  .glb-buy {
    bottom: auto;
    top: calc(100% + 12px);
    right: 0;
    background: rgba(70,70,70,0.9);  /* readable against the black backdrop */
  }

  /* Framed lightbox: Buy below the image */
  .flb-buy {
    bottom: auto;
    top: calc(100% + 12px);
    right: 0;
    background: rgba(70,70,70,0.9);
  }

  /* Product lightbox: caption below-left, Add to Cart below-right */
  .plb-caption {
    bottom: auto;
    top: calc(100% + 18px);
    left: 0;
  }
  .plb-add-cart {
    bottom: auto;
    top: calc(100% + 12px);
    right: 0;
    background: rgba(70,70,70,0.95);
  }

  /* ── Info popups: fit the viewport (JS clamps position) ── */
  .info-popup {
    width: min(760px, calc(100vw - 24px));
    padding: 16px 42px 20px 42px;
  }
  .info-popup-caret { display: none !important; }
  .info-popup-slide-inner,
  .info-popup-svg-and-body { flex-direction: column; align-items: center; }

  /* ── Cart & checkout ──────────────────────────────────── */
  .cart-page, .checkout-page { padding: 20px 14px; }
  .cart-item-img { width: 88px; height: 64px; }

  /* Right-column summaries stack BELOW the main content on phones.
     The cart markup pins its columns with INLINE styles
     (grid-column:1 on the items wrapper, grid-column:2 on the
     summary), which force a phantom second column on a 1fr grid —
     !important is required to beat inline styles. */
  .cart-layout > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .cart-summary { margin-top: 8px; }
  .checkout-summary {
    grid-column: auto;
    grid-row: auto;
    margin-top: 20px;
  }

  /* iOS zooms into inputs with font-size < 16px — prevent it */
  .form-field,
  .zip-input,
  .cart-qty,
  .contact-form input,
  .contact-form textarea {
    font-size: 16px;
  }

  /* ── Footer ───────────────────────────────────────────── */
  .site-footer { margin-top: 32px; padding: 20px 14px; }
}