/* ==========================================================================
   ALQASR — responsive.css
   Breakpoints: 1280 / 1024 / 768 / 480 (covers 390 & 375 via max-width:480)
   Mobile is redesigned, not just shrunk: stacked editorial splits, single
   column product grids, full-screen nav, simplified footer.
   ========================================================================== */

/* ---- 1280 ---------------------------------------------------------------- */
@media (max-width: 1280px){
  :root{ --header-h: 158px; }
  .grid-4{ grid-template-columns: repeat(3, 1fr); }
  .filters-panel{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .footer-col.hide-1280{ display: none; }
}

/* ---- 1024 ------------------------------------------------------------------ */
@media (max-width: 1024px){
  .header-nav a{ font-size: 0.72rem; }
  .header-nav{ gap: 1rem; }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .split{ grid-template-columns: 1fr; gap: var(--sp-md); }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: var(--sp-md); }
  .gallery{ grid-template-columns: 70px 1fr; }
}

/* ---- 900 (header/nav collapse point, see components.css) ------------------ */

/* ---- 768 (tablet — redesigned, not shrunk) --------------------------------- */
@media (max-width: 768px){
  :root{
    --header-h: 96px;
    --header-h-scrolled: 74px;
    --sp-xl: clamp(4rem, 12vw, 6rem);
    --sp-2xl: clamp(5rem, 16vw, 8rem);
  }
  .u-hide-mobile{ display: none !important; }
  .u-hide-desktop{ display: initial !important; }

  .header-logo img{ height: 50px; }
  .site-header.is-solid .header-logo img,
  .site-header.is-light .header-logo img{ height: 40px; }

  h1, .h1{ letter-spacing: -0.005em; }
  .section{ padding-block: var(--sp-lg); }

  .split{ grid-template-columns: 1fr; }
  .split-reverse-mobile{ display: flex; flex-direction: column-reverse; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
  .grid--mobile-1{ grid-template-columns: 1fr; }

  .gallery{ grid-template-columns: 1fr; }
  .gallery-thumbs{ flex-direction: row; overflow-x: auto; }
  .gallery-thumbs button{ flex: none; width: 64px; }

  .cart-table thead{ display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display: block; width: 100%; }
  .cart-table tr{ padding-block: var(--sp-sm); border-bottom: 1px solid var(--line); }
  .cart-table td{ border: none; padding-block: 0.4em; }
  .cart-line img{ width: 76px; height: 92px; }

  .field-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; gap: var(--sp-md); text-align: center; }
  .footer-top > div{ display: flex; flex-direction: column; align-items: center; }
  .footer-top .footer-tagline, .footer-top p{ max-width: 40ch; margin-inline: auto; }
  .footer-col ul{ align-items: center; }
  .newsletter-form{ justify-content: center; }
  .footer-bottom{ flex-direction: column; align-items: center; text-align: center; }
  .footer-legal{ justify-content: center; }

  .filters-panel{ grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
  .filters-bar{ flex-direction: column; align-items: flex-start; }

  .steps{ gap: var(--sp-xs); }
  .cursor-dot{ display: none; }

  .hero{ min-height: 560px; }
  .hero-content{ padding-bottom: var(--sp-lg); }
  .hero-scroll{ display: none; }
  .section-head{ flex-direction: column; align-items: flex-start; gap: var(--sp-xs); }
  .artisan-grid{ grid-template-columns: 1fr 1fr; }
  .artisan-grid .ratio:nth-child(3){ display: none; }
  .artisan-grid .ratio:nth-child(2){ margin-top: 0; }
  .value-row{ grid-template-columns: 1fr 1fr; row-gap: var(--sp-sm); }
  .journal-masonry{ columns: 2 160px; }
  .bespoke-banner .hero-overlay{ background: linear-gradient(180deg, rgba(17,16,14,0.35), rgba(17,16,14,0.92)); }
  .order-row{ grid-template-columns: 1fr 1fr; row-gap: 0.4em; }

  .craft-strip-item{ width: min(300px, 74vw); }
  .calligraphy-mark{ display: none; }

  .craft-swipe-hint{
    display: flex; align-items: center; gap: 0.5em; margin-top: 1em;
    font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  }
  .craft-swipe-hint svg{ width: 14px; height: 10px; animation: craftSwipe 1.3s ease-in-out infinite; }
  .on-dark .craft-swipe-hint{ color: var(--ink-on-dark-soft); }
  @keyframes craftSwipe{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } }
}

/* ---- 480 / 390 / 375 (phones) ---------------------------------------------- */
@media (max-width: 480px){
  :root{ --container-pad: 1.1rem; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .eyebrow{ letter-spacing: 0.2em; font-size: 0.65rem; }
  .btn{ width: 100%; justify-content: center; }
  .btn.btn--inline{ width: auto; }
  .filters-panel{ grid-template-columns: 1fr; }
  .newsletter-form{ flex-direction: column; border-bottom: none; gap: 0.8rem; }
  .newsletter-form input{ border-bottom: 1px solid currentColor; padding-inline: 0; }
  .newsletter-form button{ border: 1px solid currentColor; justify-content: center; display: flex; }
  .mobile-nav-list a{ font-size: 2rem; }
  .cart-drawer{ width: 100%; }
  .steps li span.label{ display: none; }
  .footer-social{ flex-wrap: wrap; }
  .journal-masonry{ columns: 1; }
  .value-row{ grid-template-columns: 1fr 1fr; }
  .artisan-grid{ grid-template-columns: 1fr; }
  .artisan-grid .ratio:nth-child(3){ display: block; }
}

/* ---- fine tuning at 375 ----------------------------------------------------- */
@media (max-width: 375px){
  :root{ --fs-hero: clamp(2.3rem, 10vw, 3.6rem); }
  .header-logo img{ height: 36px; }
}