/* ==========================================================================
   Responsive
   Mobile-first overrides. Breakpoints match the target widths from the
   brief: 320 / 480 / 768 / 1024 / 1280 / 1440 / 1920.
   Base styles in every other file already target the smallest screens
   where reasonable, so most of this file is about progressively revealing
   the desktop layout, not un-breaking a broken mobile one.
   ========================================================================== */

/* Up to 1023px — collapse to the mobile navbar */
@media (max-width: 1023px) {
  .navbar__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .navbar__nav,
  .navbar__search {
    display: none;
  }

  /* The dark utility strip (tagline + Buyer/Help centre links) and the
     secondary marketplace nav row are desktop-only real estate — on a
     phone-width viewport there isn't room for two lines of text next to
     two links without wrapping and colliding with each other. This lives
     here (not in home.css) because navbar.js renders the same markup on
     every page, not just the homepage. */
  .marketplace-utility,
  .marketplace-nav {
    display: none;
  }

  .navbar__action--search-mobile {
    display: inline-flex;
  }

  /* Account, wishlist, and theme are already reachable from the mobile
     drawer, so drop them from the header row here — otherwise 5 fixed-width
     action buttons plus the logo don't fit next to each other on phone-width
     screens and the header overflows horizontally on every page. */
  .navbar__action--theme,
  .navbar__action--account,
  .navbar__action--wishlist {
    display: none;
  }

  .navbar__search.is-active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: none;
    padding: var(--space-3) var(--container-padding);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    animation: fade-in-down var(--duration-fast) var(--ease-out);
  }

  .navbar__inner {
    gap: var(--space-3);
  }

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

  .footer__brand {
    grid-column: 1 / -1;
  }

  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-filters {
    position: static;
  }

  .product-layout {
    grid-template-columns: 1fr;
  }

  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
  }

  .checkout-confirmation__details {
    grid-template-columns: 1fr;
  }

  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    position: static;
  }
}

/* Up to 767px */
@media (max-width: 767px) {
  :root {
    --container-padding: var(--space-4);
    --header-height: 64px;

    /* Slightly smaller type ramp for phones. xs/sm are untouched — they're
       already small enough that shrinking further risks legibility — this
       trims the sizes that read as noticeably oversized on a narrow
       screen. Every component already reads from these tokens rather than
       hardcoding font-size, so this one change cascades everywhere. */
    --fs-base: 0.9375rem;  /* 16px → 15px */
    --fs-md:   1rem;       /* 18px → 16px */
    --fs-lg:   1.1875rem;  /* 22px → 19px */
    --fs-xl:   1.5rem;     /* 28px → 24px */
    --fs-2xl:  1.875rem;   /* 36px → 30px */
    --fs-3xl:  2.375rem;   /* 48px → 38px */
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-block: var(--space-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .grid-auto-lg {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .hero {
    min-height: 360px;
  }

  .hero__subtitle {
    font-size: var(--fs-sm);
  }

  .newsletter__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter__form {
    max-width: none;
    flex-direction: column;
  }
}

/* Up to 479px */
@media (max-width: 479px) {
  .navbar__logo {
    font-size: var(--fs-md);
  }

  .navbar__action small {
    display: none;
  }

  .navbar__action {
    width: 36px;
  }

  .grid-auto-sm,
  .grid-auto-md,
  .grid-auto-lg {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3); /* 24px → 12px between cards — a tight grid reads as denser/more marketplace-like */
  }

  /* Denser, more marketplace-style card: AliExpress/Alibaba-style grids
     lean on tight padding and compact type to fit more product per screen,
     rather than the generous whitespace that suits a wider desktop card. */
  .product-card__body {
    padding: var(--space-3);
    gap: 2px;
  }

  .product-card__name {
    font-size: var(--fs-xs);
    line-height: 1.3;
  }

  .product-card__price {
    font-size: var(--fs-base);
  }

  .product-card__old-price {
    font-size: var(--fs-xs);
  }

  .product-card__rating {
    margin-block: 2px;
  }

  section,
  .section {
    padding-block: var(--space-6);
  }

  .product-features {
    grid-template-columns: 1fr;
  }

  .product-info__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .product-info__add,
  .product-info__buy {
    width: 100%;
  }

  .cart-list__header {
    display: none;
  }

  .cart-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "media info"
      "media qty"
      "media subtotal";
    row-gap: var(--space-2);
  }

  .cart-item__media { grid-area: media; width: 72px; height: 72px; }
  .cart-item__info { grid-area: info; }
  .cart-item__qty { grid-area: qty; }
  .cart-item__subtotal { grid-area: subtotal; }

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

  .checkout-stepper__label {
    display: none;
  }
}

/* 1280px and up — a touch more breathing room at the top of the scale */
@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-6);
  }
}