/* =========================================================
   SNEAKERHEAD — responsive.css
   Ajustes finos por dispositivo. Los layouts principales
   (grid -> 1 columna, nav -> drawer) viven en style.css;
   aquí afinamos tipografía, espaciado y densidad.
   ========================================================= */

/* ---------- Tablets (<=1024px) ---------- */
@media (max-width: 1024px){
  .container{ padding-inline:20px; }
  .section{ padding-block:56px; }
  .header-main{ gap:20px; }
  .main-nav ul{ gap:20px; }
  .search-box{ min-width:160px; }
  .footer-grid{ gap:24px; }
}

/* ---------- Tablet vertical / large phones (<=760px) ---------- */
@media (max-width: 760px){
  .topbar .container{ gap:14px; font-size:11px; }
  .util-bar .container{ padding-block:6px; justify-content:center; }
  .util-link{ padding:5px 10px; font-size:10px; }

  .hero{ padding-block:36px 0; text-align:left; }
  .hero-copy p{ max-width:none; }
  .hero-stats{ gap:22px; flex-wrap:wrap; }

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

  .benefits{ grid-template-columns:1fr 1fr; gap:14px; }
  .benefit{ padding:18px; }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-bottom{ flex-direction:column; text-align:center; }

  .pd-actions{ flex-direction:column; }
  .pd-price .price{ font-size:24px; }

  .checkout-layout, .cart-layout, .account-layout, .catalog-layout{ gap:28px; }

  .auth-card{ padding:28px 22px; }
}

/* ---------- Phones (<=480px) ---------- */
@media (max-width: 480px){
  h1{ font-size:34px; }
  h2{ font-size:24px; }
  .logo{ font-size:21px; }

  .header-actions{ gap:10px; }
  .icon-btn{ width:34px; height:34px; }

  .btn{ padding:13px 20px; font-size:12px; }

  .hero-art{ clip-path:polygon(0 0,100% 0,100% 94%,0 100%); }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }

  .cat-grid{ gap:14px; }
  .product-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .product-card__body{ padding:12px; }
  .product-card__name{ font-size:13px; }
  .price{ font-size:16px; }

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

  .footer-grid{ grid-template-columns:1fr; text-align:left; }

  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{ padding-block:14px; border-bottom:1px solid var(--line); }
  .cart-table td{ border:none; padding-block:6px; }

  .size-grid{ grid-template-columns:repeat(4,1fr); }
  .pay-options{ grid-template-columns:1fr; }

  .account-nav{ display:flex; overflow-x:auto; gap:6px; padding:10px; }
  .account-nav a{ flex-shrink:0; white-space:nowrap; }
}

/* ---------- Small utility: hide/show helpers ---------- */
@media (max-width: 760px){
  .hide-mobile{ display:none !important; }
}
@media (min-width: 761px){
  .hide-desktop{ display:none !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}