/* ==========================================================================
   Responsive rules
   Base styles in style.css/components.css are written for desktop (1024px+)
   for readability; these rules step DOWN the design for tablet and mobile.
   Breakpoints: Mobile 320–767px · Tablet 768–1023px · Desktop 1024px+
   ========================================================================== */

/* ---- Tablet: 1023px and below --------------------------------------------- */
@media (max-width: 1023px) {
  :root { --space-6: 4.5rem; --space-5: 3rem; }

  .hero { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero__media { order: -1; aspect-ratio: 16/10; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: repeat(2, 1fr); }

  .variety-grid { grid-template-columns: repeat(2, 1fr); }
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .market-list { grid-template-columns: repeat(2, 1fr); }

  .process { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-3); }

  .product-row,
  .product-row.is-reverse { grid-template-columns: 1fr; }
  .product-row__media, .product-row.is-reverse .product-row__media { order: -1; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
}

/* ---- Mobile: 767px and below ----------------------------------------------- */
@media (max-width: 767px) {
  :root { --space-6: 3.25rem; --space-5: 2.25rem; --space-4: 1.75rem; }

  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }

.site-header__links,
.site-header__actions {
    display: none;
}
  .site-header__nav {
    position: fixed;
    top: 64px;
    background: var(--color-paper);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    transform: translateX(100%);
    transition: transform 0.25s var(--ease-out);
    overflow-y: auto;
  }
  html[dir="rtl"] .site-header__nav { transform: translateX(-100%); }
  .site-header__nav.is-open { transform: translateX(0); }
  .site-header__nav.is-open .site-header__links {
    display: flex;
    flex-direction: column;
    gap: 0; 
  }
  .site-header__nav.is-open .site-header__links a {
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
    font-size: 1.05rem;
  }
  .site-header__nav.is-open .site-header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .site-header__nav.is-open .site-header__actions .btn-secondary { display: inline-flex; }
  .site-header__actions .btn { padding: 0.8em 1.2em; font-size: 0.875rem; }

  .nav-toggle { display: block; }
.site-header__nav.is-open .language-switcher {
    display: flex;
    width: 100%;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
}

.site-header__nav.is-open .language-switcher__button {
    width: 100%;
    justify-content: space-between;
}

.site-header__nav.is-open .language-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: auto;
    min-width: 145px;
}

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .variety-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .pack-grid { grid-template-columns: 1fr; }
  .market-list { grid-template-columns: repeat(2, 1fr); }

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

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

  /* Price table becomes stacked cards on mobile to avoid unwanted horizontal scroll */
  .price-table-wrap { display: none; }
  .price-cards { display: block; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--space-2); align-items: flex-start; }

  .whatsapp-fab { display: inline-flex; }

  section { padding-block: var(--space-5); }
}

/* ---- Fine touch-target pass for small mobile ------------------------------- */
@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; }
  .hero__ctas .btn { width: auto; flex: 1 1 auto; }
}