/* ============================================================
   Mobile responsive overrides — Cside static
   Loaded on every page. Targets <= 768px (tablet portrait & phone).
   ============================================================ */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────
     NAVBAR — applies to every page.
     - Width = same horizontal gutter as hero color bar (12px each side).
     - Logo must remain visible: shrink inner gaps + icon sizes.
     ───────────────────────────────────────────── */

  /* All pages share the same absolute + centered navbar pattern.
     Just widen it so the gutter matches the hero color bar (12px each side). */
  .navbar,
  .navbar-hero-overlay {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  /* Tighten inner spacing so logo + icons + hamburger all fit */
  .nav-inner {
    gap: 10px !important;
    padding: 0 14px !important;
  }
  .nav-actions {
    gap: 6px !important;
  }

  /* Brand logo — keep visible */
  .brand {
    flex-shrink: 0 !important;
  }
  .brand img {
    height: 22px !important;
    width: auto !important;
    display: block !important;
  }

  /* Trim icon buttons to save space */
  .icon-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .icon-btn svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Remove Shop Now button + search icon from navbar on mobile — every page */
  .nav-actions .btn-dark {
    display: none !important;
  }
  .nav-actions .icon-btn[aria-label="Search"] {
    display: none !important;
  }

  /* ─────────────────────────────────────────────
     HOMEPAGE HERO COLOR BAR
     - Stack: title + description on first row, swatches on next row.
     - 4 circles visible per view, horizontal snap-scroll.
     - Hide arrow buttons (swipe natively on mobile).
     ───────────────────────────────────────────── */

  .hero-color-bar {
    margin: 0 12px !important;
    padding: 11px 0 !important;
    border-radius: 14px !important;
    backdrop-filter: blur(18px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(100%) !important;
  }

  .hcb-inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }

  /* Label spans full width — circles drop to next line */
  .hcb-label {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .hcb-title {
    font-size: 15px !important;
    margin: 0 0 2px !important;
  }
  .hcb-sub {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .hcb-scrub-preview {
    display: none !important;
  }

  /* Hide the prev/next arrows — let user swipe */
  .hcb-scroll-btn {
    display: none !important;
  }

  /* Swatches wrapper takes full width on its own row */
  .hcb-swatches-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Scrollable row with snap behavior */
  .hcb-swatches {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 4px !important;
    scrollbar-width: none !important;
  }
  .hcb-swatches::-webkit-scrollbar {
    display: none !important;
  }

  /* Each item = exactly 25% of viewport minus 3 gaps */
  .hcb-item {
    flex: 0 0 calc((100% - 30px) / 4) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    padding: 2px !important;
  }

  .hcb-circle {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto !important;
  }

  .hcb-item.active .hcb-circle {
    transform: scale(1.12) !important;
  }

  .hcb-item small {
    font-size: 10px !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }
}