/* ============================================================
   ZAYNAB SAPHIR — Responsive layer
   Loaded LAST so it refines the layout ladder without touching
   the base rules. Breakpoint ladder:
     1440  wide desktop      1280  desktop
     1024  small laptop      900   tablet
     720   large phone       520   phone
     400   small phone
   Plus: coarse-pointer targets, short-viewport heroes, print.
   ============================================================ */

/* ---------- Global guards ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas, svg, iframe { max-width: 100%; }
.wrap, .wrap-wide { width: 100%; }
* { min-width: 0; }                 /* let grid/flex children shrink */

/* Scroll panes inside flex columns need this to actually scroll, not grow */
.ie-cat-grid, .modal-body, .drawer-body { min-height: 0; overscroll-behavior: contain; }
h1, h2, h3, .display, .serif { overflow-wrap: break-word; }

/* Fluid gutter + measure, so nothing needs a hard breakpoint to breathe */
:root {
  --gut: clamp(18px, 4.2vw, 40px);
}

/* ============================================================
   1440 — wide desktop: keep the wide wrapper from touching glass
   ============================================================ */
@media (max-width: 1600px) {
  .wrap-wide { max-width: 100%; }
  .hero-ed-grid, .hero-stk-band { max-width: 100%; }
}

/* ============================================================
   1280 — desktop
   ============================================================ */
@media (max-width: 1280px) {
  .cat-strip { grid-template-columns: repeat(4, 1fr); }
  .insta-row { grid-template-columns: repeat(4, 1fr); }
  .mega-inner { grid-template-columns: 1fr 1fr 1.2fr; gap: 30px; }
  .mega-col:nth-child(3) { display: none; }
  .cart-grid { grid-template-columns: 1fr 330px; gap: 40px; }
  .checkout-grid { grid-template-columns: 1fr 340px; gap: 40px; }
  .inv-grid, .pdp-grid { gap: 36px; }
}

/* ============================================================
   1024 — small laptop / large tablet
   ============================================================ */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
  .hero-ed-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .hero-stk-band { grid-template-columns: 1fr; gap: 18px; }
  .occ-grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar-inner { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .aca-grid { grid-template-columns: repeat(3, 1fr); }
  .co-grid { grid-template-columns: 240px 1fr; gap: 36px; }
  .acct-grid { grid-template-columns: 200px 1fr; gap: 32px; }
}

/* The filter rail is hidden from 1080 down, so its column must go too —
   otherwise the product grid is squeezed by a 210px ghost column. */
@media (max-width: 1080px) {
  .shop-body { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   900 — tablet: every two-column shell becomes one
   ============================================================ */
@media (max-width: 900px) {
  .cart-grid, .checkout-grid, .contact-grid, .acct-grid,
  .co-grid, .booking-grid, .inv-grid, .pkg-intake-grid,
  .lb-story, .lb-story.rev, .auth-page {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .summary, .co-aside, .inv-side, .pkg-intake-summary { position: static; }

  /* Sidebars read as intros above the content, not sticky rails */
  .co-aside { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; align-items: start; }
  .co-aside > :first-child { grid-column: 1 / -1; }
  .co-aside-note { grid-column: 1 / -1; }

  .shop-body { grid-template-columns: 1fr; gap: 0; }
  .cat-strip { grid-template-columns: repeat(3, 1fr); }
  .film-grid { grid-template-rows: clamp(150px, 30vw, 240px) clamp(150px, 30vw, 240px); }
  .modal-card, .modal { width: min(94vw, 520px); }
}

/* ============================================================
   720 — large phone
   ============================================================ */
@media (max-width: 720px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: 1; }
  .ie-zones { grid-template-columns: 1fr; }
  .values-grid, .aca-grid, .pkg-grid, .bespoke-steps { grid-template-columns: 1fr; }
  .cat-strip { grid-template-columns: repeat(2, 1fr); }
  .occ-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .insta-row { grid-template-columns: repeat(3, 1fr); }
  .cart-row { grid-template-columns: 92px 1fr; gap: 16px; }
  .co-aside { grid-template-columns: 1fr; }

  /* Section rhythm tightens rather than scaling every value down */
  .section-pad { padding: clamp(48px, 11vw, 72px) 0; }
  .section-pad-sm { padding: clamp(34px, 8vw, 52px) 0; }

  /* Full-bleed heroes shorten so the CTA stays above the fold */
  .about-hero, .bespoke-hero { height: auto; min-height: 0; padding: 132px 0 44px; }
  .co-draft, .confirm { padding-top: 96px; }

  /* The day rail scrolls instead of squeezing to unreadable widths */
  .bw-days {
    display: flex; gap: 8px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .bw-days::-webkit-scrollbar { display: none; }
  .bw-day { flex: 0 0 62px; scroll-snap-align: start; }
  .bw-times { grid-template-columns: repeat(3, 1fr); }

  .ie-cat-modal { width: 94vw; max-height: 88vh; padding: 20px; }
  .ie-cat-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .ie-rec { flex-wrap: wrap; }
  .ie-rec-actions { width: 100%; }
  .ie-audio { max-width: 100%; width: 100%; }
  .ie-insp-name { max-width: 120px; }

  /* Buttons stop sitting side by side when there isn't room */
  .co-draft-actions, .pdp-buy { flex-direction: column; align-items: stretch; }
  .pdp-wish { width: 100%; height: 52px; }
  .btn { width: auto; }
}

/* ============================================================
   520 — phone
   ============================================================ */
@media (max-width: 520px) {
  .insta-row { grid-template-columns: repeat(2, 1fr); }
  .bw-times { grid-template-columns: repeat(2, 1fr); }
  .film-grid { grid-template-rows: repeat(3, 52vw); }
  .co-draft-card .co-draft-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ie-context { flex-wrap: wrap; }
  .ie-link-row { gap: 6px; }
}

/* ============================================================
   400 — small phone: one column, nothing clipped
   ============================================================ */
@media (max-width: 400px) {
  .product-grid { grid-template-columns: 1fr; gap: 26px; }
  .cat-strip, .occ-grid { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 74px 1fr; }
  .ie-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .mob-link { font-size: 26px; }
  .drawer { width: 100vw; }
  .drawer-head, .drawer-items, .drawer-foot, .ship-meter { padding-left: 18px; padding-right: 18px; }
  .ditem { grid-template-columns: 68px 1fr; gap: 12px; }
  .ditem-media { width: 68px; }
}

/* ============================================================
   Touch: real hit targets, no hover-only affordances
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn, .chip, .bw-time, .bw-day, .ie-add, .mob-link,
  .shop-filter, .pdp-size, .qty button, .ic-btn {
    min-height: 44px;
  }
  .ie-x, .ie-file-x, .ie-insp-x { min-width: 32px; min-height: 32px; }
  .hc-arrow { display: none; }
  .zoomable { cursor: default; }
  .zoomable img, .zoomable .ph { transform: none !important; }
}

/* ============================================================
   Short / landscape viewports — heroes must not eat the screen
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape) {
  .hero, .hero-collage, .hero-carousel { min-height: 460px; }
  .hc-content { padding-top: 96px; padding-bottom: 56px; }
  .about-hero, .bespoke-hero { height: auto; min-height: 0; padding: 108px 0 40px; }
}

/* ============================================================
   Print — the storefront is not the deliverable, so keep it plain
   ============================================================ */
@media print {
  .hdr, .mega, .mob-menu, .film-sec, .insta-row, .hc-arrow, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .section-pad { padding: 24px 0; }
}