/* ================================================================
   EG2Store — Responsive Styles
   Breakpoints: 1280, 1024, 860, 680, 480, 360
================================================================ */

/* ── ≤ 1280px – contained grid starts shrinking ── */
@media (max-width: 1280px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── ≤ 1024px – tablet landscape ── */
@media (max-width: 1024px) {
  :root { --container: 100%; }

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

  /* Header collapses search into second row */
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding: 12px 0;
    gap: 12px;
  }
  .site-search {
    grid-column: 1 / -1;
    max-width: 100%;
    justify-self: stretch;
  }

  /* Cart layout */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }

  /* Single product stacked */
  .single-product__layout { grid-template-columns: 1fr; gap: 28px; }
  .single-product__cover { max-width: 380px; }

  /* Reviews 2-col */
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer 2-col */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ── ≤ 860px – tablet portrait ── */
@media (max-width: 860px) {
  /* Primary nav hidden, hamburger shown */
  .primary-nav { display: none; }
  .primary-nav.is-open {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
    overflow-y: auto;
    background: var(--navy);
  }
  .primary-nav.is-open .primary-nav__inner { padding: 80px 0 40px; }
  .primary-nav.is-open .primary-nav__menu { flex-direction: column; height: auto; gap: 0; }
  .primary-nav.is-open .primary-nav__link { height: auto; padding: 16px 24px; font-size: 16px; }
  .primary-nav.is-open .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 24px; min-width: 0; background: transparent;
  }

  .mobile-menu-toggle { display: flex; }
  .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile nav close btn — visible pill at top-right */
  .mobile-nav-close {
    position: fixed;
    top: 14px; right: 14px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; color: var(--white);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    z-index: 2001;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }
  .mobile-nav-close:hover,
  .mobile-nav-close:focus {
    background: rgba(0,200,83,0.18);
    border-color: var(--green);
    color: var(--green);
    outline: none;
  }

  /* Topbar trimmed — tagline hidden, switchers pushed to the right */
  .topbar__tagline { display: none; }
  .topbar__inner { height: auto; padding: 6px 0; }
  /* margin-left:auto pushes the switchers to the right regardless of
     whatever justify-content state the page is in (more robust than
     overriding justify-content). */
  .topbar__right { margin-left: auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar__selector-toggle { padding: 4px 6px; }
  .topbar__selector-current {
    font-size: 11px; max-width: 80px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Dropdowns on mobile: pin to viewport top-right so they're always
     fully visible, regardless of where their parent button ends up.
     Only one dropdown is open at a time (JS closes the other on open),
     so collision isn't a concern. */
  .topbar__selector .topbar__dropdown {
    position: fixed;
    top: 50px;        /* sits just below the topbar */
    right: 14px;
    left: auto;
    min-width: 160px;
    max-width: calc(100vw - 28px);
  }

  /* Product grid 2-col */
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* Reviews 1-col */
  .reviews-grid { grid-template-columns: 1fr; }

  /* Confirmation meta 1-col */
  .confirmation-meta { grid-template-columns: 1fr; }
}

/* ── ≤ 680px – large phone ── */
@media (max-width: 680px) {
  .section-title { font-size: 18px; }
  .hero-slide__cta { font-size: 13px; padding: 12px 22px; }
  .hero-slider { min-height: 320px; }
  .hero-slide__inner { padding: 40px 18px; }

  /* Page title */
  .page-title { font-size: 22px; }

  /* Cart items stacked */
  .cart-item { grid-template-columns: 80px 1fr; gap: 10px; }
  .cart-item__remove { grid-column: 2; justify-self: end; }
  .cart-item__price  { grid-column: 2; }
  .qty-control        { grid-column: 2; justify-self: start; }

  /* Single product actions stacked */
  .single-product__actions { flex-direction: column; }
  .single-product__actions .btn { width: 100%; }

  /* Footer footer-grid 1-col */
  .footer-grid { grid-template-columns: 1fr; }

  /* Confirmation */
  .confirmation-actions { flex-direction: column; align-items: center; }

  /* Section header */
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  .header-actions__btn span { display: none; }
  .header-actions__btn { padding: 8px; }
}

/* ── ≤ 480px – phone ── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  /* 2-col product grid on small phones */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Auth card full-width */
  .auth-card { padding: 24px 20px; }
  .auth-form .form-row { grid-template-columns: 1fr; }

  /* Cart item minimal */
  .cart-item { grid-template-columns: 70px 1fr; padding: 12px; }

  /* Account tabs scroll */
  .account-tabs { gap: 0; }
  .account-tab { padding: 10px 14px; font-size: 12px; }

  /* Header shrink */
  .site-logo__img { height: 36px; }

  /* Dashboard cards 1-col on very small */
  .dashboard-cards { grid-template-columns: 1fr 1fr; }

  /* Topbar: shrink the selectors to fit */
  .topbar__selector--currency .topbar__selector-current { max-width: 60px; }
  .topbar__selector--lang .topbar__selector-current     { max-width: 36px; }
  .topbar__selector-toggle { padding: 3px 6px; font-size: 11px; }
  .topbar__selector-toggle svg { width: 12px; height: 12px; }

  /* Allow product titles & section titles to wrap without truncating */
  .product-card__title { font-size: 13px; line-height: 1.3; }
  .section-title { font-size: 17px; }

  /* Hero text smaller so it fits within the slide.
     IMPORTANT: keep horizontal padding so text doesn't touch the screen edge. */
  .hero-slide__title { font-size: 26px; line-height: 1.15; word-break: break-word; }
  .hero-slide__subtitle { font-size: 13px; }
  .hero-slide__inner { padding: 28px 14px; }

  /* Footer text on phones */
  .footer-col h4 { font-size: 13px; }
  .footer-col a, .footer-col p { font-size: 12px; }

  /* Generic overflow safety for tables (orders, dashboards) */
  table { max-width: 100%; }
}

/* ── ≤ 360px – very small phone ── */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-card__body { padding: 8px; gap: 6px; }
  .product-card__actions { flex-direction: column; }
  .product-card__actions .btn { font-size: 11px; padding: 6px 10px; }

  .dashboard-cards { grid-template-columns: 1fr; }

  /* Even tighter topbar — show only language code + currency symbol */
  .topbar__right { gap: 4px; }
  .topbar__selector--lang .topbar__selector-current     { max-width: 28px; font-size: 10px; }
  .topbar__selector--currency .topbar__selector-current { max-width: 50px; font-size: 10px; }
  .topbar__selector-toggle { padding: 3px 4px; }

  /* Page titles smaller */
  .page-title { font-size: 19px; }

  /* Hero text smaller still */
  .hero-slide__title { font-size: 22px; }
  .hero-slide__subtitle { font-size: 12px; }
  .hero-slide__inner { padding: 24px 12px; }
}