/* ==========================================================================
   Mobile and tablet refinements
   Loaded last. Every rule sits inside a media query, so the desktop layout
   above 1024px is untouched by this file.

   The audit found no horizontal overflow anywhere — the grids and rails were
   already fluid. What it did find was touch targets: links and controls whose
   hit area was 12–26px tall on a phone. Two techniques are used:

   · padding, where a taller row improves the layout anyway (footer, crumbs,
     inline links inside prose);
   · an invisible expanded hit area via ::after, where growing the element
     would move things around (hamburger, quantity steppers, tabs).

   Apple and Google both put the comfortable minimum at 44px; 44 is the target
   here, 40 where the surrounding rhythm cannot carry more.
   ========================================================================== */

@media (max-width: 1023px) {
  /* Tablet: the lot and product grids drop to two columns before one. */
  .lot-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The filter row scrolls rather than wrapping onto a second line, which
     used to strand the count and the sort control beside it. The site already
     did this below 760px; tablet needs it too. */
  .page-head .tabs,
  .toolbar .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-head .tabs::-webkit-scrollbar,
  .toolbar .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs__btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  /* --- header ------------------------------------------------------- */

  /* The header has a fixed height, so vertical padding here only grows the
     hit area; nothing moves. */
  .brand {
    padding-block: 11px;
  }

  .menu-toggle {
    min-height: 44px;
    padding-left: 12px;
    margin-right: -12px;
  }

  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- inline links in prose and metadata --------------------------- */

  .crumbs {
    gap: 4px 10px;
  }

  .crumbs a,
  .specs dd a,
  .hero-bar dd a,
  .lot-facts dd a,
  .condition__note a,
  .delivery a,
  .units__note a {
    display: inline-block;
    padding-block: 10px;
  }

  .link {
    padding-block: 11px;
  }

  /* A phone number or an address is the one link a phone user always taps. */
  a[href^="tel:"],
  a[href^="mailto:"],
  .check__label a {
    display: inline-block;
    padding-block: 10px;
  }

  /* --- footer ------------------------------------------------------- */

  .footer-col ul {
    gap: 2px;
  }

  .footer-col ul a {
    display: block;
    padding-block: 12px;
  }

  .footer-contact__big {
    display: inline-block;
    padding-block: 11px;
  }

  .footer-legal ul {
    gap: 0 24px;
  }

  .footer-legal ul a {
    display: inline-block;
    padding-block: 14px;
  }

  /* --- mobile menu -------------------------------------------------- */

  .mobile-menu__status .live,
  .mobile-menu__contact a {
    display: inline-block;
    padding-block: 10px;
  }

  /* --- search panel ------------------------------------------------- */

  /* Row gap only. The list wraps, so a single gap value also collapses the
     space between items on the same line and the labels run together. */
  .search-panel__quick {
    gap: 0 28px;
  }

  .search-panel__quick .link {
    padding-block: 13px;
  }

  .search-panel__results a {
    padding-block: 14px;
  }

  /* --- tabs and filters --------------------------------------------- */
  /* Short labels such as "Tümü" were 32px wide. The row scrolls, so it can
     carry the extra width. */
  /* flex: none is the important half. Without it a long label such as
     "Kuvvet istasyonları" shrinks below its own text and collides with its
     neighbour; min-width alone only widens the short ones. */
  .tabs__btn {
    flex: 0 0 auto;
    min-width: 56px;
    padding-inline: 4px;
  }

  /* --- cards -------------------------------------------------------- */

  /* Only plain anchors get display:block here. .index__link,
     .brands-index__link and .lot-pager__link are grids — blockifying them
     collapses their columns into a run of inline text. */
  .collection__title a,
  .cart-item__title {
    display: block;
    padding-block: 8px;
  }

  /* --- controls that must not grow ---------------------------------- */
  /* These keep their drawn size; only the area that answers a finger grows. */
  .qty-btn,
  .float__toggle,
  .gallery__thumb,
  .rail-btn,
  .video-toggle,
  .bid-step {
    position: relative;
  }

  .qty-btn::after,
  .float__toggle::after,
  .gallery__thumb::after,
  .rail-btn::after,
  .video-toggle::after,
  .bid-step::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* --- forms -------------------------------------------------------- */

  input,
  select,
  textarea {
    font-size: 16px; /* stops iOS zooming the page on focus */
  }

  .field input {
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  /* Small phones: one column everywhere, and the two hero actions stack. */
  .lot-grid,
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__ctas {
    display: grid;
    gap: 10px;
  }

  .hero__ctas .btn {
    width: 100%;
  }
}

/* The site's own reveal animations already respect this, but transitions
   added by later work should stand down too. */
@media (prefers-reduced-motion: reduce) {
  .lot__media img,
  .product__media img,
  .feature__media img,
  .collection__media-inline img {
    transition: none;
  }
}