/* ============================================================ CHESTER DEPORTES — Responsive Final v2 Capa definitiva de diseño responsive profesional Cargar en después de chester.css ============================================================ */ /* ── 1. FLUID TOKENS ──────────────────────────────────── */ :root { --text-xs: clamp(0.625rem, 0.5vw + 0.5rem, 0.75rem); --text-sm: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem); --text-base: clamp(0.875rem, 1vw + 0.5rem, 1rem); --text-lg: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); --text-xl: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); --text-2xl: clamp(1.5rem, 3vw + 0.5rem, 2rem); --text-3xl: clamp(2rem, 5vw + 0.5rem, 3rem); --radius-sm: clamp(6px, 0.8vw, 10px); --radius-md: clamp(10px, 1.2vw, 14px); --radius-lg: clamp(14px, 1.8vw, 18px); --space-xs: clamp(4px, 0.5vw, 8px); --space-sm: clamp(8px, 1vw, 12px); --space-md: clamp(12px, 1.5vw, 16px); --space-lg: clamp(16px, 2vw, 24px); --space-xl: clamp(20px, 3vw, 32px); --touch-target: clamp(44px, 5vw, 48px); } /* ── 2. SAFE AREAS ────────────────────────────────────── */ @supports (padding: env(safe-area-inset-bottom)) { body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } #site-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } #nav { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); } #cartdr { padding-bottom: env(safe-area-inset-bottom); } .adm-topbar { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); } } /* ── 3. GLOBAL TOUCH / OVERFLOW ───────────────────────── */ img, svg { max-width: 100%; height: auto; } html, body { overflow-x: hidden; } /* ── 4. TOUCH TARGETS — mínimo 44x44 ──────────────────── */ button, a, .cbt, .ccls, #ckbtn, #hbtn, #tbtn, #authbtn, #cartbtn, .szb, .pdv-sz-btn, .pdv-add, .pdv-close, .pdv-qbtn, .qbtn, .mcls, #addbtn, .asub, .gbtn-alt, .atab, .hero-arrow, .hero-dot, .lb-close, .lb-arrow, .footer-btn, .mob-abtn, .mob-cbtn, .adm-sb-item, .adm-sb-grp-hdr, .adm-btn, .adm-tab { min-width: var(--touch-target); min-height: var(--touch-target); } .cbt, .szb, .pdv-sz-btn { min-width: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .cqrow .cqb { min-width: 28px; min-height: 28px; } .guesttab { min-height: 44px; } .hero-dot { min-width: 20px; min-height: 4px; } /* Espaciado entre elementos clickeables */ #nav, .nav-r, .mob-row, #cats, .pdv-sz-grid, .pdv-qrow, .adm-sb-nav, .adm-nav, .stats-grid { gap: 8px; } /* ── 5. HEADER ─────────────────────────────────────────── */ /* Desktop menu hidden by default (hamburger works) — only show on large screens */ #hbtn { display: flex; } #nav-menu { display: none; } /* Search full width on mobile (below logo, controlled via JS) */ /* Cart/user icons */ .nav-r > * { gap: 8px; } /* Logo sizes */ .logo img { width: 44px; height: 44px; } /* Free shipping bar — hide long text on mobile */ .free-ship-text-long { display: inline; } @media (max-width: 768px) { .free-ship-text-long { display: none; } } /* ── 6. HERO ────────────────────────────────────────────── */ /* Hero responsive se maneja desde chester.css (más completo y sin !important) */ /* ── 7. PRODUCT GRID ───────────────────────────────────── */ @media (min-width: 1025px) { #pgrid { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; } } @media (min-width: 769px) and (max-width: 1024px) { #pgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (min-width: 401px) and (max-width: 768px) { #pgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media (max-width: 400px) { #pgrid { grid-template-columns: 1fr; gap: 8px; } } /* Card max-width */ .pcard { max-width: 100%; } /* ── 8. PRODUCT CARDS ───────────────────────────────────── */ .pcard-img { aspect-ratio: 1/1; height: auto; } /* Text truncate to 2 lines */ .pcard-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Price min size on mobile */ @media (max-width: 768px) { .pcard-pr { font-size: clamp(16px, 4vw, 20px) !important; } .pcard-arr { display: none; } } /* Buy button full-width on mobile card */ .pcard-add-btn { display: none; } @media (max-width: 768px) { .pcard-add-btn { display: flex; width: 100%; padding: 12px; justify-content: center; margin-top: 8px; border-radius: 10px; background: var(--ora); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 2px; border: none; cursor: pointer; min-height: 44px; align-items: center; } } /* ── 9. MODALS (cart, product, auth) ───────────────────── */ @media (max-width: 768px) { #cartdr { width: 100vw !important; max-width: 100vw !important; } #mbox { max-width: 90vw !important; max-height: 90vh; overflow-y: auto; } .pdv-ov { max-height: 90vh; overflow-y: auto; } #authov .awrap { max-width: 90vw; } .abox { max-width: 100%; max-height: 90vh; overflow-y: auto; } /* Close buttons 44x44 */ .ccls { width: 44px; height: 44px; font-size: 20px; } .mcls { width: 44px; height: 44px; font-size: 20px; } .acls { width: 44px; height: 44px; font-size: 20px; top: 8px; right: 8px; } .pdv-close { min-height: 44px; padding: 10px 18px; } /* Padding */ #mbody { padding: 20px; } .chdr { padding: 20px; } #clist { padding: 20px; } .cftr { padding: 20px; } .pdv-content { padding: 20px; } .atop { padding: 20px 20px 0; } .abody { padding: 0 20px 20px; } .guestbox { padding: 14px 20px; } } @media (min-width: 769px) { #mbody { padding: 30px; } .chdr { padding: 22px; } #clist { padding: 22px; } .cftr { padding: 22px; } .pdv-content { padding: 32px; } .atop { padding: 28px 28px 0; } .abody { padding: 0 28px 28px; } } /* ── 10. FOOTER ─────────────────────────────────────────── */ #site-footer { padding: 30px 20px; } .footer-inner { display: grid; gap: 24px; } @media (min-width: 1025px) { .footer-inner { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 769px) and (max-width: 1024px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; text-align: center; } #site-footer { padding: 20px; } } .footer-links a { padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; } /* ── 11. TYPOGRAPHY ─────────────────────────────────────── */ body { font-size: 16px; line-height: 1.6; } .pcard-nm { line-height: 1.4; } /* hero-h1/hero-sub line-height defined in chester.css */ .pdv-ds { line-height: 1.7; } #mds { line-height: 1.6; } .guesthelp { line-height: 1.6; } /* Headings scale with clamp */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; } /* ── 12. TABLES — horizontal scroll on mobile ──────────── */ .adm-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; } .adm-t { min-width: 600px; } /* ── 13. LARGESCREEN (1200px+) ──────────────────────────── */ @media (min-width: 1200px) { .footer-inner { max-width: 1200px; margin: 0 auto; } } /* ── 14. TABLET (769-1024px) ────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { .hero-content { max-width: 600px; } } /* ── 15. MOBILE (max-width: 768px) ──────────────────────── */ @media (max-width: 768px) { /* Header */ #nav { height: 64px; padding: 0 12px; gap: 8px; } .logo img { max-width: 120px; height: auto; } .logo-ch { font-size: 22px; } #header-slogan { display: none; } #srch { display: none; } #mobsrch { display: block; } #cartbtn #clbl { display: none; } #hbtn { display: flex; width: 40px; height: 40px; } /* Free shipping bar hide long text */ .free-ship-text-long { display: none; } /* Categorías: horizontal scroll */ #cats { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } .cbt { flex-shrink: 0; } /* Hero — manejado en chester.css */ /* Grid */ #pgrid { gap: 8px; padding: 12px 10px 30px; } /* Product cards */ .pcard { border-radius: 12px; } .pcard-img { aspect-ratio: 1/1; height: auto; } .pcard-body { padding: 8px 10px; } .pcard-nm { font-size: 14px; -webkit-line-clamp: 2; } .pcard-pr { font-size: 16px !important; } .pcard-arr { display: none; } .pcard-row { flex-wrap: wrap; gap: 4px; } .pcard-cat { font-size: 8px; letter-spacing: 2px; } /* Badges */ .tbadge { font-size: 9px; padding: 3px 8px; letter-spacing: 2px; top: 6px; right: 6px; } .tbadge.agotado-left { font-size: 9px; padding: 3px 8px; top: 6px; left: 6px; } .b-low { font-size: 8px; padding: 2px 6px; bottom: 6px; left: 6px; } /* Modals */ #cartdr { width: 100vw !important; } #mbox { max-width: 90vw !important; max-height: 90vh; overflow-y: auto; } .ccls { width: 44px; height: 44px; font-size: 20px; } .mcls { width: 44px; height: 44px; font-size: 20px; } .acls { width: 44px; height: 44px; font-size: 20px; top: 8px; right: 8px; } #mbody { padding: 20px; } .chdr { padding: 20px; } #clist { padding: 20px; } .cftr { padding: 20px; } #ckbtn { padding: 14px; font-size: 15px; min-height: 48px; } /* Product detail */ .pdv-content { padding: 14px; } .pdv-close { padding: 10px 16px; font-size: 12px; margin-bottom: 10px; min-height: 44px; } .pdv-grid { gap: 12px; } .pdv-thumb { width: 50px; height: 50px; border-radius: 8px; font-size: 20px; } .pdv-main-wrap { border-radius: 12px; } .pdv-arrow { width: 34px; height: 34px; font-size: 20px; } #pdv-nm { font-size: 20px; } .pdv-prrow .pr-act { font-size: 26px; } .pdv-prrow .pr-old { font-size: 13px; } .pdv-sz-btn { padding: 8px 12px; font-size: 13px; min-width: 48px; min-height: 44px; } .pdv-add { padding: 14px; font-size: 15px; min-height: 48px; } .pdv-ship { padding: 12px; font-size: 12px; } /* Cart items */ .citem { padding: 12px; gap: 8px; } .citem-img { width: 48px; height: 48px; border-radius: 8px; font-size: 22px; } .citem-nm { font-size: 14px; } .citem-pr { font-size: 13px; } .cqb { width: 20px; height: 20px; font-size: 13px; } .cqv { font-size: 13px; min-width: 16px; } .ctval { font-size: 22px; } /* Auth modal */ .abox { border-radius: 18px; } .atop { padding: 20px 20px 0; } .abody { padding: 0 20px 20px; } .ainp { padding: 12px 14px; font-size: 14px; min-height: 44px; } .asub { padding: 14px; font-size: 15px; min-height: 48px; } /* Footer */ #site-footer { padding: 20px 14px; } .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 16px; } .footer-btn { padding: 8px 14px; font-size: 12px; min-height: 44px; } .footer-btn svg { width: 16px; height: 16px; } .footer-links { justify-content: center; gap: 8px; } .footer-links a { min-height: 44px; } #footer-brand-name { font-size: 18px; } #footer-slogan { font-size: 12px; } /* Toast */ #toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); max-width: 92vw; font-size: 14px; padding: 12px 18px; } /* Lightbox */ .lb-arrow { width: 38px; height: 38px; font-size: 22px; } .lb-close { width: 38px; height: 38px; font-size: 18px; top: 12px; right: 12px; } /* Post-compra */ #grc-card { padding: 28px 20px !important; } #grc-card h2 { font-size: 26px !important; } /* Body bottom padding */ body { padding-bottom: 80px; } /* Landscape override */ @media (max-height: 480px) and (orientation: landscape) { #hero { height: 220px !important; } #nav { height: 52px; } } } /* ── 16. MOBILE CHICO (≤400px) ──────────────────────────── */ @media (max-width: 400px) { /* Header */ .logo img { max-width: 90px; height: auto; } .logo-ch { font-size: 18px; } #nav { height: 56px; padding: 0 8px; gap: 6px; } #hbtn { width: 36px; height: 36px; } #cartbtn { padding: 6px 10px; font-size: 11px; } #cartbtn #clbl { display: none; } #cbadge { width: 17px; height: 17px; font-size: 9px; } #tbtn { width: 34px; height: 34px; font-size: 15px; } /* Grid 1 column */ #pgrid { grid-template-columns: 1fr; gap: 8px; padding: 10px 8px 24px; } /* Cards */ .pcard { border-radius: 10px; } .pcard-img { aspect-ratio: 1/1; height: auto; } .pcard-body { padding: 8px; } .pcard-nm { font-size: 14px; } .pcard-pr { font-size: 16px !important; } .pcard-cat { font-size: 7px; letter-spacing: 1.5px; } /* Hero */ #hero { height: 300px !important; } /* Categories */ .cbt { font-size: 11px; padding: 6px 10px; min-height: 38px; } /* Categorías: less gap */ #cats { gap: 4px; } .cbt { font-size: 10px; padding: 5px 9px; } /* Footer */ #site-footer { padding: 16px 10px; } .footer-inner { gap: 12px; } #footer-brand-name { font-size: 16px; } .footer-btn { padding: 6px 10px; font-size: 11px; } .footer-btn svg { width: 14px; height: 14px; } /* Modals */ #mbody { padding: 16px; } .chdr { padding: 16px; } #clist { padding: 16px; } .cftr { padding: 16px; } #ckbtn { padding: 12px; font-size: 14px; } /* Toast */ #toast { font-size: 13px; padding: 10px 14px; bottom: 80px; } /* Body */ body { padding-bottom: 70px; } } /* ── 17. MUY CHICO (≤360px) ─────────────────────────────── */ @media (max-width: 360px) { #pgrid { gap: 6px; padding: 8px 6px 20px; } .pcard-nm { font-size: 13px; } .pcard-pr { font-size: 15px !important; } #hero { height: 260px !important; } #nav { height: 50px; padding: 0 6px; } .logo-ch { font-size: 15px; } .logo img { max-width: 70px; } #cartbtn { padding: 4px 8px; font-size: 10px; } #hbtn { width: 32px; height: 32px; } #tbtn { width: 30px; height: 30px; font-size: 13px; } .cbt { font-size: 9px; padding: 4px 7px; } #toast { font-size: 12px; padding: 8px 12px; bottom: 74px; } } /* ── 18. LANDSCAPE MOBILE ────────────────────────────────── */ @media (max-height: 480px) and (orientation: landscape) { #hero { height: clamp(200px, 55vh, 300px) !important; } #nav { height: 52px; } .logo-ch { font-size: 18px; } #pgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } #cats { overflow-x: auto; flex-wrap: nowrap; } } /* ── 19. PDV RESPONSIVE ─────────────────────────────────── */ @media (max-width: 900px) { .pdv-layout { grid-template-columns: 1fr !important; } .pdv-col-ticket > div { position: static !important; } .pdv-col-prods { order: 2; } .pdv-col-ticket { order: 1; } #pdv-grid { max-height: none !important; min-height: 250px !important; } } @media (max-width: 768px) { .pdv-card { aspect-ratio: auto; min-height: 70px; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; } .pdv-card img { width: 40px; height: 40px; } #pdv-items { max-height: 180px !important; } #pdv-total { font-size: 22px !important; } #pdv-cliente-display { font-size: 12px !important; } } /* ── 20. HERO TRANSITION (touch) ─────────────────────────── */ @media (max-width: 768px) { .hero-track { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } } /* ── 21. REDUCED MOTION ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-track { transition: none; } .pcard { animation: none !important; opacity: 1 !important; } } /* ── 22. TABLETS LANDSCAPE (1024x768) ───────────────────── */ @media (width: 1024px) and (height: 768px) { #pgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } #hero { height: 400px; } } /* ── 23. RETINA ──────────────────────────────────────────── */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .pcard-img img, .prod-th, .pdv-thumb img { image-rendering: auto; } } /* ── 24. PRINT ───────────────────────────────────────────── */ @media print { #nav, #site-footer, #cartov, #authov, #adminov, .hero-arrow, .hero-dots, #toast, #hbtn, #tbtn, #trkbtn, #authbtn, #uchip { display: none !important; } body { padding-bottom: 0; background: #fff !important; color: #000 !important; } #hero { height: auto !important; page-break-inside: avoid; } .pcard { break-inside: avoid; } .pcard:hover { transform: none; box-shadow: none; } } /* ── 25. TOUCH DEVICE HOVER OFF ──────────────────────────── */ @media (hover: none) and (pointer: coarse) { .pcard:hover { transform: none; box-shadow: none; } .cbt:hover { color: var(--txt2); border-color: var(--bord); } .hero-arrow:hover { background: rgba(0,0,0,.4); transform: translateY(-50%); } #tbtn:hover { transform: none; } #authbtn:hover { transform: none; } .pdv-sz-btn:hover:not(.out) { background: var(--inp); color: var(--txt2); border-color: var(--bord); } .footer-btn:hover { transform: none; } .adm-btn:hover { filter: none; } .asub:hover { filter: none; transform: none; } }