/* ==========================================================================
   responsive.css - breakpoints. Loaded last so it wins.

   Card grid targets: 5 cols >=1280, 4 at 1024, 3 at 768, 2 at 480.
   ========================================================================== */

/* --- <= 1279px: 4 across --------------------------------------------------- */

@media (max-width: 1279px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--list { grid-template-columns: 1fr; }

  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .tile { padding: 10px 8px 12px; }
  .tile__name { font-size: 12.5px; }

  .header-search { max-width: 420px; }
  .main-nav__link { padding-inline: 10px; font-size: 13.5px; }
  .header-contact { gap: 10px; }

  .listing { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }
}

/* --- <= 1080px: hide the nav phone number, tighten the header -------------- */

@media (max-width: 1080px) {
  .header-contact__item.num { display: none; }
  .header-search { max-width: 340px; }
  .cart-pill__label { display: none; }
}

/* --- <= 1023px: 3 across, stack the product page --------------------------- */

@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--list { grid-template-columns: 1fr; }

  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .product { grid-template-columns: 1fr; gap: 28px; }
  .product__title { font-size: 22px; }

  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }

  .rails { grid-template-columns: 1fr; gap: 20px; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* --- <= 899px: hamburger nav, off-canvas filters --------------------------- */

@media (max-width: 899px) {
  :root { --header-h: 104px; }

  .nav-burger { display: grid; }
  .main-nav { display: none; }

  .header-nav__inner { justify-content: space-between; }
  .header-contact { margin-inline-start: auto; }

  /* the sidebar becomes a slide-in panel toggled from the toolbar */
  .filters-open { display: inline-flex; }

  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: 160;
    width: min(320px, 88vw);
    height: 100dvh;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .26s var(--ease);
    visibility: hidden;
  }
  .sidebar.is-open { transform: translateX(0); visibility: visible; }

  .sidebar__close { display: grid !important; }

  .listing { grid-template-columns: 1fr; }
}

/* --- <= 767px: 2 across ---------------------------------------------------- */

@media (max-width: 767px) {
  body { font-size: 14px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid--list .card { flex-direction: column; }
  .grid--list .card__media { flex: none; width: 100%; aspect-ratio: 1 / 1; }
  .grid--list .card__cta { width: 100%; }

  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* the utility bar wraps: logo + utils on one line, search below */
  .header-top__inner { flex-wrap: wrap; gap: 10px 12px; min-height: auto; }
  .brand { order: 1; }
  .brand img { height: 46px; }
  .header-utils { order: 2; margin-inline-start: auto; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .header-utils__link { display: none; }

  .site-header.is-stuck .header-search { display: none; }

  .trust__inner { grid-template-columns: 1fr; gap: 10px; padding-block: 14px; }
  .trust__item { justify-content: flex-start; }
  .trust__item + .trust__item { border-inline-start: 0; border-top: 1px solid var(--border); padding-top: 10px; }

  .section { margin-block: 28px; }
  .section-head__title { font-size: 17px; }

  .promo { margin-block: 28px; }
  .promo__link img { max-height: 190px; }

  .listing__title { font-size: 20px; }

  .toolbar { padding: 10px; gap: 8px; }
  .toolbar__result { flex-basis: 100%; }
  .toolbar .select { flex: 1 1 auto; min-width: 0; }

  .gallery__thumb { width: 60px; height: 60px; }

  .product__price { font-size: 25px; }
  .product__actions .btn { flex-basis: 100%; }

  .form-row { grid-template-columns: 1fr; }

  /* the cart table reflows into stacked cards */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 10px;
  }
  .cart-table td { border: 0; padding: 6px 0; }
  .cart-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--muted);
    font-size: 12.5px;
  }
  .cart-table td.cart-cell-product::before { content: none; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 24px; padding-block: 32px 24px; }
}

/* --- <= 479px: 2 across, tightest --------------------------------------- */

@media (max-width: 479px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .card__body { padding: 9px; gap: 6px; }
  .card__title { font-size: 13px; min-height: calc(2 * 1.5 * 13px); }
  .card__price { font-size: 14px; }
  .card__cta { font-size: 12.5px; padding: 8px 10px; }

  .container { padding-inline: 12px; }

  .hero { margin-block: 12px 20px; }
  .hero__dots { bottom: 8px; }

  .success { margin: 28px auto; padding: 28px 18px; }
  .success__actions .btn { width: 100%; }

  .toast-host { inset-inline: 12px; bottom: 12px; }
  .toast { max-width: none; }
}

/* --- print ----------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .toast-host, .drawer, .drawer-backdrop,
  .hero, .promo, .sidebar, .toolbar, .pager { display: none !important; }
  body { font-size: 12pt; }
  .card { break-inside: avoid; }
}