/* ==========================================================================
   FotoExpert Pro — Responsive (mobile-first)
   Breakpoints: 320 · 375 · 390 · 414 · 480 · 576 · 768 · 992 · 1200 · 1440
   ========================================================================== */

/* --------------------------------------------------------------------------
   320px+ — base already mobile-first; micro tweaks
   -------------------------------------------------------------------------- */
@media (min-width: 320px) {
  .container {
    width: min(100% - 1.5rem, var(--container));
  }

  .countdown__item {
    padding: var(--space-3) var(--space-1);
  }
}

/* --------------------------------------------------------------------------
   375px — common iPhone
   -------------------------------------------------------------------------- */
@media (min-width: 375px) {
  .container {
    width: min(100% - 2rem, var(--container));
  }

  .brand-grid {
    gap: var(--space-4);
  }

  .products-carousel__track {
    grid-auto-columns: minmax(280px, 78%);
  }
}

/* --------------------------------------------------------------------------
   390px
   -------------------------------------------------------------------------- */
@media (min-width: 390px) {
  .topbar__list {
    gap: var(--space-6);
    padding-inline-end: var(--space-6);
  }

  .acc-card {
    min-height: 132px;
  }
}

/* --------------------------------------------------------------------------
   414px
   -------------------------------------------------------------------------- */
@media (min-width: 414px) {
  .hero__cta {
    max-width: 420px;
    margin-inline: auto;
  }

  .product-grid {
    gap: var(--space-6);
  }

  .ig-grid .ig-item:nth-child(n + 5) {
    display: block;
  }

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

/* --------------------------------------------------------------------------
   480px — larger phones / small phablets
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  /* Enough room for the full wordmark logo without touching the action icons */
  .logo__img--mark {
    display: none;
  }

  .logo__img--full {
    display: block;
  }

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

  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero__cta .btn {
    width: auto;
    flex: 1 1 auto;
  }

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

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

  .pdp__actions {
    flex-direction: row;
  }

  .pdp__actions .btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   576px
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .section {
    padding: var(--space-11) 0;
  }

  .products-carousel__track {
    grid-auto-columns: minmax(260px, 46%);
  }

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

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

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

  .contact__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   768px — tablets
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --header-h: 72px;
  }

  .logo {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .header__menu-btn {
    display: none;
  }

  .nav {
    display: block;
    flex: 1;
    margin-left: var(--space-4);
  }

  .nav__list {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
  }

  .nav__list a {
    font-size: 0.82rem;
    padding: 0 0.45rem;
  }

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

  .section__header--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .catalog {
    grid-template-columns: 240px 1fr;
    align-items: start;
  }

  .filters {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    max-height: calc(100vh - var(--header-h) - var(--space-8));
    overflow-y: auto;
  }

  .filters-toggle {
    display: none;
  }

  .products-carousel__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: unset;
    overflow: visible;
    scroll-snap-type: none;
  }

  .products-carousel .carousel-controls {
    display: none;
  }

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

  .used-banner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }

  .used-banner__visual,
  .used-banner__visual img,
  .promo-panel__media,
  .promo-panel__media img {
    min-height: 100%;
    height: 100%;
  }

  .promo-panel {
    grid-template-columns: 1.15fr 0.85fr;
  }

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

  .pdp {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding: var(--space-7);
  }

  .ig-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ig-grid .ig-item:nth-child(n + 5) {
    display: block;
  }

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

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

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .bottom-nav {
    display: none;
  }

  .footer {
    margin-bottom: 0;
  }

  .back-to-top {
    bottom: var(--space-6);
  }

  .toast {
    bottom: var(--space-7);
  }

  .hero__content {
    padding-bottom: var(--space-11);
  }
}

/* --------------------------------------------------------------------------
   992px — laptop
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .topbar__list {
    gap: var(--space-8);
    padding-inline-end: var(--space-8);
  }

  .nav__list a {
    font-size: 0.9rem;
    padding: 0 0.65rem;
  }

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

  .brand-card {
    min-height: 100px;
  }

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

  .catalog {
    grid-template-columns: 260px 1fr;
    gap: var(--space-7);
  }

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

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

  #bestsellersGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .acc-card {
    min-height: 160px;
  }

  .advantages__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .hero {
    min-height: min(88vh, 860px);
    align-items: center;
  }

  .hero__content {
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-12);
  }

}

/* --------------------------------------------------------------------------
   1200px — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    width: min(100% - 3rem, var(--container));
  }

  .nav__list {
    justify-content: center;
    gap: 0.1rem;
  }

  .nav__list a {
    padding: 0 0.75rem;
  }

  .products-carousel__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .products-carousel__track .product-card:nth-child(n + 5) {
    /* keep first 8 visible in 2 rows of 4 if needed — show all */
  }

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

  .advantage {
    padding: var(--space-5);
  }

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

  .advantage p {
    font-size: var(--fs-xs);
  }

  .pdp {
    gap: var(--space-10);
    padding: var(--space-8);
  }

  .used-banner__content,
  .promo-panel__content {
    padding: var(--space-9) var(--space-8);
  }

  .section {
    padding: var(--space-12) 0;
  }
}

/* --------------------------------------------------------------------------
   1440px — large desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container: 1320px;
  }

  .hero__content {
    max-width: 1000px;
  }

  .hero__title {
    font-size: 3.1rem;
  }

  .hero__subtitle {
    font-size: 1.25rem;
  }

  .brand-card {
    min-height: 110px;
  }

  .brand-card__name {
    font-size: var(--fs-base);
  }

  .product-card__title {
    font-size: 1.2rem;
  }

  .section__title {
    font-size: 2.75rem;
  }

  .footer__top {
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Hover capability — reduce hover transforms on touch-only
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .product-card:hover,
  .brand-card:hover,
  .advantage:hover,
  .blog-card:hover,
  .acc-card:hover {
    transform: none;
  }

  .product-card:hover .product-card__media img,
  .ig-item:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Short viewports
   -------------------------------------------------------------------------- */
@media (max-height: 700px) and (min-width: 768px) {
  .hero {
    min-height: 640px;
  }

  .hero__content {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Landscape phones
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
  }

  .mobile-nav__panel {
    width: min(70vw, 380px);
  }
}

/* --------------------------------------------------------------------------
   High-DPI refinements
   -------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo__img,
  .logo__img--footer {
    image-rendering: auto;
  }
}