/* ============================================================
   Design pass
   Loaded last. Three decisions drive everything here:

   1. Density. Accessories are browsed, not studied. A phone
      screen showing one product at a time is a catalogue with
      the pages glued together — so the grid goes 2-up on mobile.
   2. A dark header. The store leads with an offer, and a dark
      bar lets the warm accent do the shouting instead of
      competing with a white one.
   3. The buy button should never be off screen on a phone.
   ============================================================ */

/* ---------- 1. DENSITY ---------- */

@media (max-width: 760px) {
  .grid-products,
  .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    gap: 10px;
  }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .card__body { padding: 10px 10px 12px; gap: 5px; }
  .card__name { font-size: 13px; }
  .card__price strong { font-size: 15px; }
  .card__price del { font-size: 12px; }
  .card__brand { font-size: 10px; }
  .swatch { width: 15px; height: 15px; }

  .section { padding-block: 30px; }
  .section--tight { padding-block: 22px; }
  .section-head { margin-bottom: 16px; }
}

/* Keep the rails scrollable where there is room to scroll. */
@media (min-width: 761px) and (max-width: 899px) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
}

/* Tighter cards everywhere, not just on phones. */
.card__media img { padding: 7%; }
.card__body { padding: 12px 13px 14px; }

/* ---------- 2. DARK HEADER ---------- */

.announce {
  background: var(--volt);
  color: #fff;
  font-weight: 500;
  font-size: 12.5px;
}

.header {
  background: #12151B;
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: none;
}
.header .logo { color: #fff; }
.header .icon-btn { color: rgba(255,255,255,.86); }
.header .icon-btn:hover { background: rgba(255,255,255,.09); }

.search input {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.13);
  color: #fff;
}
.search input::placeholder { color: rgba(255,255,255,.45); }
.search input:focus {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.34);
}
.search button { color: rgba(255,255,255,.62); }

.nav { border-top-color: rgba(255,255,255,.09); }
.nav__link { color: rgba(255,255,255,.74); }
.nav__item:hover > .nav__link,
.nav__link.is-active { color: #fff; border-color: var(--volt); }

/* the dropdown stays light — it is a menu, not chrome */
.mega { background: var(--surface); }

.search--mobile { background: #12151B; }

/* ---------- 3. STICKY BUY BAR ---------- */
/*
 * Appears once the real add-to-cart has scrolled away, so it
 * never duplicates a button already on screen.
 */

.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 59;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(105%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.buybar.is-up { transform: none; }

.buybar__info { min-width: 0; flex: 1; }
.buybar__name {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: var(--ink-2);
}
.buybar__price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.buybar .btn { flex-shrink: 0; height: 44px; padding-inline: 26px; }

@media (max-width: 760px) {
  .buybar { display: flex; bottom: 54px; }   /* sits above the tab bar */
}

/* ---------- 4. SMALL CORRECTIONS ---------- */

/* Sale price should read as the loud one. */
.card__price strong,
.pdp__price strong { color: var(--ink); }
.card:has(.badge--sale) .card__price strong { color: var(--pulse); }

/* Give sold-out cards an honest, quiet treatment. */
.card:has(.badge--out) .card__media img { opacity: .48; filter: grayscale(.5); }

/* The picker chips are the busiest control on the page — make the
   hit target finger-sized rather than mouse-sized. */
@media (max-width: 760px) {
  .picker__chip { min-height: 52px; }
  .picker__models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker { padding: 16px; }
}

/* Section headings were competing with product names. Pull them back. */
.section-head h2 { font-size: clamp(20px, 2.8vw, 27px); }

/* Footer needs to clear both fixed bars on a phone. */
@media (max-width: 760px) {
  .footer { padding-bottom: 130px; }
  .wa-float { bottom: 128px; }
}