/* =============================================================
   RESPONSIVE.CSS — Breakpoints: 1440 / 1280 / 1024 / 768 / 480 / 320
   ============================================================= */

/* ULTRA-WIDE */
@media (min-width: 1680px) {
  :root { --container: 1560px; }
  .cat-circles { grid-template-columns: repeat(8, 1fr); }
}

/* DESKTOP <=1280 */
@media (max-width: 1280px) {
  .mega-inner { grid-template-columns: repeat(3, 1fr) 1.2fr; }
  .brand-strip { grid-template-columns: repeat(4, 1fr); }
  .cat-circles { grid-template-columns: repeat(6, 1fr); }
}

/* LAPTOP <=1024 */
@media (max-width: 1024px) {
  .nav-search { max-width: 360px; }
  .plp { grid-template-columns: 1fr; }
  .filters { display: none; }
  .mobile-filterbar { display: flex; }
  .usp-strip { grid-template-columns: 1fr 1fr; }
  .vibe-grid { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .seller-spot { grid-template-columns: 1fr; }
}

/* TABLET <=768 */
@media (max-width: 768px) {
  :root {
    --nav-h: var(--nav-h-mobile);
    /* scale down the type ramp so large headings/hero/prices fit mobile */
    --fs-lg: 1.0625rem;  /* 17 */
    --fs-xl: 1.1875rem;  /* 19 */
    --fs-2xl: 1.375rem;  /* 22 */
    --fs-3xl: 1.625rem;  /* 26 */
    --fs-4xl: 2rem;      /* 32 */
    --fs-5xl: 2.5rem;    /* 40 */
  }
  body { padding-bottom: var(--bottomnav-h); }

  .nav-links, .nav-search, .nav-action.d-only { display: none; }
  .hamburger { display: inline-flex; }
  .nav-inner { gap: var(--s-3); }
  .brand { font-size: 1.35rem; }
  /* search (flex:1) is hidden on mobile, so push the action icons to the right edge */
  .nav-actions { margin-left: auto; }
  .nav-action { padding: 6px 8px; }
  .mega { display: none; }
  .bottom-nav { display: flex; }

  .container { padding-inline: var(--s-4); }
  .section { padding-block: var(--s-7); }

  .cat-circles { grid-template-columns: repeat(4, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .product-card.list { flex-direction: column; }
  .product-card.list .pc-media { width: 100%; }
  .vibe-grid { grid-template-columns: 1fr; }
  .brand-strip { grid-template-columns: repeat(3, 1fr); }
  /* compact USP cards on mobile so titles don't wrap into tall blocks */
  .usp { gap: 10px; padding: var(--s-3); }
  .usp .ic { width: 36px; height: 36px; }
  .usp .ic svg { width: 18px; height: 18px; }
  .usp b { font-size: var(--fs-xs); }
  .usp small { font-size: var(--fs-2xs); line-height: var(--lh-snug); }

  .hero { border-radius: var(--r-md); margin-top: var(--s-3); box-shadow: var(--sh-sm); }
  .hero-slide { aspect-ratio: 4/5; }
  .hero-content { padding: 0 var(--s-5); }
  .hero-content p { display: none; }
  /* centered side arrows overlap the left-aligned headline on mobile;
     move both to the bottom-right and slide the dots to the bottom-left */
  .hero-arrow { top: auto; bottom: 16px; transform: none; width: 40px; height: 40px; background: rgba(255,255,255,.92); }
  .hero-arrow:hover, .hero-arrow:active { transform: scale(.94); }
  .hero-arrow.prev { left: auto; right: 64px; }
  .hero-arrow.next { right: 16px; }
  .hero-arrow svg { width: 20px; height: 20px; }
  .hero-dots { left: 20px; transform: none; bottom: 27px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .countdown .unit { min-width: 44px; padding: 6px 8px; }

  /* mobile search becomes its own surface in nav */
  .nav-search.mobile-visible { display: block; flex: 1; }
}

/* MOBILE <=480 */
@media (max-width: 480px) {
  :root {
    --fs-lg: 1rem;        /* 16 */
    --fs-xl: 1.125rem;    /* 18 */
    --fs-2xl: 1.25rem;    /* 20 */
    --fs-3xl: 1.5rem;     /* 24 */
    --fs-4xl: 1.75rem;    /* 28 */
    --fs-5xl: 2.125rem;   /* 34 */
  }
  .cat-circles { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 170px; }
  .mosaic .tile.wide { grid-column: auto; }
  .brand-strip { grid-template-columns: repeat(2, 1fr); }
  .pdp-cta { position: sticky; bottom: var(--bottomnav-h); background: #fff; padding: 12px 0; z-index: var(--z-sticky); }
  /* keep title + "View all" on one row, with the link vertically centered
     to the heading (instead of dropping below it) */
  .section-head { flex-direction: row; align-items: center; gap: var(--s-3); }
  .modal { border-radius: var(--r-lg) var(--r-lg) 0 0; align-self: flex-end; max-height: 92vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }
}

/* SMALL MOBILE <=360 */
@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
  .cat-circles { grid-template-columns: repeat(2, 1fr); }
}