/* ════════════════════════════════════════════════════════════════════
   Azuri — shared responsive layer.
   Loaded on story.html, hero.html, product.html, checkout.html.
   Targets mobile (≤640) and tablet (641-1024) without disturbing desktop.
   ════════════════════════════════════════════════════════════════════ */

/* Global hygiene — no horizontal scroll ever, words wrap when they must.
   Use break-word (not anywhere) so prices like "₹482" don't split mid-token. */
html, body { overflow-x: clip; max-width: 100%; }
img, video, svg, canvas { max-width: 100%; height: auto; }
*, *::before, *::after { min-width: 0; }
h1, h2, h3, h4, p, a, span, div, button, li {
  overflow-wrap: break-word;
}

/* The shared cart FAB sits top-left at 18,18. Reserve room across pages */
.azc-fab { font-size: 11px !important; padding: 8px 12px !important; }

/* ─────────────────────────── TABLET (≤1024) ─────────────────────────── */
@media (max-width: 1024px) {
  /* story.html nav: kill the 96px logo offset that was reserving cart space */
  body nav a[aria-label="Azuri home"] { margin-left: 56px !important; }
}

/* ─────────────────────────── MOBILE (≤640) ──────────────────────────── */
@media (max-width: 640px) {
  /* Cart FAB smaller + tucked so it doesn't clip page chrome */
  .azc-fab {
    top: 10px !important;
    left: 10px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
  .azc-fab svg { width: 14px !important; height: 14px !important; }
  .azc-badge { min-width: 16px !important; height: 16px !important; font-size: 10px !important; }

  /* story.html nav: stack into a wrapping row, drop the logo offset entirely */
  body nav a[aria-label="Azuri home"] { margin-left: 0 !important; }
  body nav.relative.z-30 {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-top: 56px !important;       /* clear the cart FAB */
    padding-left: 16px !important;
    padding-right: 16px !important;
    justify-content: center !important;
  }
  body nav.relative.z-30 ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 14px !important;
    width: 100%;
  }
  body nav.relative.z-30 ul a {
    font-size: 10px !important;
    padding: 6px 12px !important;
  }

  /* product.html / checkout.html header nav */
  header.nav { flex-wrap: wrap !important; gap: 12px !important; padding: 16px 16px !important; }
  header.nav .links { flex-wrap: wrap !important; gap: 14px !important; justify-content: center !important; }
  header.nav .links a { font-size: 10px !important; }

  /* story.html footer — email is a single long token; allow it to break */
  footer#contact a[href^="mailto:"] {
    font-size: clamp(1rem, 5.4vw, 1.6rem) !important;
    word-break: break-all !important;
    flex-wrap: wrap !important;
  }
  footer#contact > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* story.html editions — sticky stack cards: drop internal 2-col grid to 1-col,
     lift the height ceiling so content doesn't crush, and recover from the
     huge translate offsets that made the section feel empty on small screens */
  .stack-card {
    width: 94vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
  .stack-card > div { height: auto !important; }
  /* On mobile we collapse the dual image-grid down to a single hero tile
     (the rightmost tile in the original layout). The other tiles are
     hidden to keep the card compact and readable. */
  .stack-card .grid[style*="40fr 60fr"] {
    display: block !important;
  }
  .stack-card .grid[style*="40fr 60fr"] > div:first-child { display: none !important; }
  .stack-card .grid[style*="40fr 60fr"] > .relative.overflow-hidden:last-child {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
  /* In-card top row: stack the meta + "View edition" button */
  .stack-card > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* hero.html — bottom-left text + nav can collide with bottom-right link.
     Give bottom-left a max-width and shrink the brand label so they coexist. */
  body section.snap-section .absolute.bottom-6.left-4 {
    max-width: 60vw !important;
  }
  body section.snap-section .absolute.bottom-6.right-4 {
    max-width: 38vw !important;
  }

  /* hero.html section headers ("Four moods, one heirloom.") — keep on one screen */
  #collection h2 {
    font-size: clamp(34px, 10vw, 64px) !important;
    line-height: 0.95 !important;
  }
  #collection p { font-size: 13px !important; }
  /* Header right-paragraph stacks below on mobile */
  #collection .flex.items-end.justify-between.flex-wrap > p { max-width: 100% !important; }

  /* hero.html collection cards: aspect-ratio 3/4 was creating tall stacks.
     Make them shorter & looser when single-column on mobile. */
  #collection article.collection-card {
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
  }
  /* Internal label text shouldn't push out */
  #collection article.collection-card .ghost-label-cq {
    font-size: clamp(28px, 12vw, 52px) !important;
  }

  /* MarketplaceModal product cards: 1-col on phones so prices/titles
     never wrap mid-token and the corner brackets don't dominate */
  [role="dialog"] article h4 { font-size: 15px !important; }
  [role="dialog"] [style*="repeat(auto-fill, minmax(280px"] {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  [role="dialog"] article [data-card-frame] { aspect-ratio: 4 / 3 !important; }

  /* product.html: enlarge tap targets, prevent action buttons from
     overflowing past their column */
  main.product { padding: 24px 16px 56px !important; }
  .actions { gap: 10px !important; }
  .actions .btn-primary, .actions .btn-ghost {
    min-width: 0 !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .meta-row { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* checkout.html — keep CTA buttons readable */
  .wrap { padding: 24px 16px !important; }
  .btn { padding: 14px 22px !important; font-size: 11px !important; letter-spacing: 0.18em !important; }

  /* Cart drawer: full width on phones, smaller paddings */
  .azc-drawer { width: 100vw !important; }
  .azc-head { padding: 16px 16px 12px !important; }
  .azc-head h3 { font-size: 18px !important; }
  .azc-body { padding: 10px 14px !important; }
  .azc-foot { padding: 14px 16px 18px !important; }
  .azc-item { grid-template-columns: 52px 1fr auto !important; gap: 10px !important; }
  .azc-thumb { width: 52px !important; height: 52px !important; }
  .azc-title { font-size: 14px !important; }

  /* Toasts shouldn't run off-screen */
  .azc-toast {
    top: 64px !important;
    max-width: 90vw !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
}

/* ───── Very small phones (≤380) — squeeze further ───── */
@media (max-width: 380px) {
  body nav.relative.z-30 ul a { font-size: 9px !important; padding: 5px 10px !important; }
  [role="dialog"] [style*="repeat(auto-fill, minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
}