/* ══════════════════════════════════════════════════════════════════════ EL FOLD DEL CELULAR — alto del header y del hero en pantalla chica ══════════════════════════════════════════════════════════════════════ Medido a 390×844 en los 21 temas: entre el header (195px), la franja del banner (35px) y el hero, la primera fila de productos arrancaba entre 800 y 1100px. O sea: en un teléfono real había que scrollear una pantalla entera antes de ver un solo producto. En moda2-figma el hero solo medía 860px (102% del alto de la ventana) y en almacen-figma 731px. Dos causas, ninguna de ellas "el tema está mal hecho": 1. El header. El nav envuelve a DOS renglones ("Categorías / Cómo comprar / Nosotros / Blog" arriba y "Mi cuenta / Contacto" abajo), unos 45px que no aportan nada: en el celular una fila que se desliza muestra lo mismo ocupando la mitad. 2. El hero. `hero.css` ya trae un tope para móvil (`@media (max-width:600px) .hero-section { min-height: 290px }`), pero NUNCA se aplicó en ningún tema: cada uno declara su alto como `body.layout-X .hero-section { min-height: 460px }`, que es más específico (0,2,1 contra 0,1,0) y además se carga después. El tope existía y perdía siempre. Por eso esta hoja va LINKEADA AL FINAL, después de los 21 temas, y sus reglas llevan el prefijo `html body[class*="layout-"]` (0,2,2): le gana a `body.layout-X .hero-section` sin necesidad de `!important`, que dejaría al tema sin forma de pedir otra cosa. Mismo patrón que `como-comprar-estilos.css`. El objetivo es medible y está verificado tema por tema en Chrome a 390px: que la primera fila de productos **asome** antes de los 700px. No que el hero desaparezca — si no se ve nada de catálogo, la tienda parece una landing; si el hero se achica de más, cada tema pierde lo que lo hace distinto. Se aplica en TODAS las páginas: el `` es un partial compartido. ══════════════════════════════════════════════════════════════════════ */ /* El botón de plegar los filtros lo inserta `catalog-sidebar.js` siempre, para no depender del `resize` ni de redibujar al rotar el teléfono. En escritorio no va: ahí el panel entra al costado sin molestar a nadie. Esta regla es la única fuera de la media query, justamente porque tiene que valer siempre. */ .catalog-sidebar > .sidebar-toggle { display: none; } @media (max-width: 768px) { /* ── Header: una sola fila, con el ☰ al lado del carrito ────────── La barra de navegación tenía "☰ Categorías · Cómo comprar · Nosotros · Blog · Mi cuenta · Contacto". Medido a 390px: 703px de contenido en 375 visibles. En dos renglones se comía 45px arriba de todo; en una sola fila deslizable el último texto quedaba partido a la mitad de una palabra, que se lee como un error y no como "hay más". Lo que hacen Zara, H&M, Nike, Mercado Libre y Tiendanube: el ☰ arriba junto al carrito, y todo lo demás adentro del menú. El script del header mueve el desplegable ahí y las páginas adentro del panel. */ html body[class*="layout-"] #category-buttons { display: none; } /* Dos filas, no tres. Con el logo (184px), el buscador (335), el ☰, el corazón y el carrito, la fila superior envolvía donde le tocaba y el header quedaba en 150px. Se ordena a mano: arriba el logo con los tres controles —184 + 44 + 51 + 72 = 351 de los 375 disponibles, entra justo— y el buscador ocupando una fila entera abajo, que es donde se espera y donde se puede tocar cómodo. */ html body[class*="layout-"] .header-inner { flex-wrap: wrap; row-gap: 8px; /* La separación entre ítems la ponen los temas y a 390px se vuelve decisiva: logo(171) + ☰(44) + corazón(51) + carrito(72) = 338 sobre 360 útiles, así que con separaciones de 12px el carrito caía a una tercera fila y el header pasaba de 102 a 153px. */ column-gap: 6px; } /* El logo se deja achicar. En `clasico` mide 212px y con los tres controles sumaba 379 de los 375 disponibles: el carrito caía a una tercera fila y el header pasaba de 102 a 153px. Con `min-width: 0` el nombre del comercio se recorta con puntos suspensivos antes que romper la fila — el logo sigue entero y el nombre completo está en la pestaña y en el footer. */ html body[class*="layout-"] .header-inner > .header-logo { order: 1; /* `flex: 1 1 0` y no `0 1 auto`: con base 0 el logo se queda con lo que SOBRA después de los tres controles, en vez de reclamar su ancho natural y empujarlos a otra fila. Es la diferencia entre que el header mida 102px siempre y que mida 153 en la mitad de los temas según cuán largo sea el nombre del comercio. */ flex: 1 1 0; min-width: 0; } html body[class*="layout-"] .header-logo-text { min-width: 0; } html body[class*="layout-"] .header-logo-text strong, html body[class*="layout-"] .header-logo-text span { overflow: hidden; text-overflow: ellipsis; } html body[class*="layout-"] .header-inner > .dropdown { order: 2; } html body[class*="layout-"] .header-inner > .header-fav-btn { order: 3; } /* El carrito NO va arriba: ya está en la barra inferior, con su nombre y su contador, y ahí es donde llega el pulgar. Repetirlo en el header —que en un teléfono de 844px queda a 38px del borde superior, la zona más lejana— es ocupar el lugar más caro de la pantalla con un botón que está a dos centímetros del dedo. Se esconde, no se borra: `#cart-count` sigue en el DOM porque es de donde la barra copia el número. En escritorio queda como estaba. */ html body[class*="layout-"] .header-inner > .header-cart-btn { display: none; } html body[class*="layout-"] .header-inner > .search-wrap { order: 5; flex: 0 0 100%; width: 100%; } /* El ☰ NO va arriba. El menú vive sólo en la barra inferior, con su nombre escrito y en la zona donde llega el pulgar. Arriba era un ícono sin etiqueta a 38px del borde superior, y encima su panel se abría anclado al botón: contra el borde derecho de la pantalla quedaba cortado, con las categorías y los links partidos por la mitad. Se esconde el BOTÓN, no el contenedor: el panel es hijo de `.dropdown`, y un hijo de un elemento en `display:none` no se renderiza aunque él mismo esté en `block` — la hoja quedaba abierta midiendo 0x0. El contenedor se queda sin ocupar lugar (su único hijo visible era el botón) y el botón "Menú" de la barra le dispara el click igual. */ html body[class*="layout-"] .header-inner > .dropdown > .dropdown-btn { display: none; } html body[class*="layout-"] .header-inner > .dropdown { position: static; width: 0; margin: 0; padding: 0; } /* `backdrop-filter` en el header convierte al header en el bloque contenedor de todo `position: fixed` que cuelgue de él — la hoja del menú, que es hija del header, dejaba de medir su `bottom: 0` contra la ventana y se anclaba al pie del header: aparecía arriba de todo, a 484px por encima del borde superior de la pantalla. Sólo pasaba en dietética, que es el único tema con blur ahí, y su fondo es 95% opaco: sin el blur se ve igual. Va como regla genérica y no como parche a ese tema porque el día que otro tema le ponga blur al header, el menú se le rompe sin que nada lo avise. */ html body[class*="layout-"] header { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── El menú, como hoja que sube desde abajo ─────────────────────── Igual que el carrito. Anclado a un botón, el panel se posiciona con `left` calculado y en una pantalla de 390px no hay forma de que entre sin cortarse. Desde abajo ocupa el ancho completo, no depende de dónde esté el disparador, y es de donde el pulgar la puede arrastrar. `important` en todo lo que es posición: el JS le escribe `top` y `left` inline al abrirlo (para el anclaje de escritorio) y sin esto la hoja aparecería en cualquier lado. */ html body[class*="layout-"] #dropdown-categories { position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 78vh; overflow-y: auto; border-radius: 18px 18px 0 0; border: none; border-top: 1px solid var(--color-gris-claro); /* Dos sombras: la de la hoja, y una de spread enorme que hace de velo sobre la página. El velo no es decorativo — sin él la hoja se lee como parte de la página y no como algo que se abrió encima; es lo mismo que hace el carrito con su `#cart-backdrop`. Va como sombra y no como elemento porque el panel ya existe en los 6 templates y agregarle un div a cada uno para esto sería tocar 6 archivos para pintar un rectángulo. */ box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28); /* La barra inferior mide 56px y está fija encima de todo: sin este colchón el último ítem del menú queda abajo de ella y no se puede tocar. */ padding: 0 12px calc(64px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; animation: hoja-que-sube 0.26s cubic-bezier(0.32, 0.72, 0, 1); } /* Sube desde abajo en vez de aparecer de golpe: el movimiento es lo que explica de dónde salió y adónde vuelve. Se cancela con `prefers-reduced-motion`. */ @keyframes hoja-que-sube { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html body[class*="layout-"] #dropdown-categories { animation: none; } } /* El velo: lo crea `velarElMenu()` en partials/header.html y lo pinta acá. Queda justo abajo de la hoja y arriba de todo lo demás, barra inferior incluida —si no, la barra quedaba iluminada encima del velo y parecía que seguía activa mientras el menú estaba abierto. */ html body[class*="layout-"] #menu-velo { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.45); animation: velo-que-aparece 0.26s ease-out; } html body[class*="layout-"] #menu-velo[hidden] { display: none; } @keyframes velo-que-aparece { from { opacity: 0; } to { opacity: 1; } } /* La barra queda POR ENCIMA de la hoja y del velo. Su z-index de fábrica es 1050, o sea que la hoja (9999) la tapaba entera: el usuario tocaba "Menú", se abría, y el botón con el que acababa de abrirlo desaparecía — para cerrar había que adivinar que se toca la zona oscura de arriba. Es navegación persistente: mientras el menú está abierto se tiene que poder saltar al carrito o al inicio, y volver a tocar "Menú" cierra (el botón hace toggle). La hoja ya reserva su alto con el padding de abajo, así que ningún ítem del menú queda debajo de la barra. */ html body[class*="layout-"] .mobile-bottom-nav { z-index: 10000; } /* Y se nota cuál está abierto: sin esto, con la hoja tapando media pantalla la barra seguía mostrando los cuatro ítems iguales. `aria-expanded` ya lo escribe el handler del botón, así que no hace falta una clase aparte. El fondo sale de `currentColor` y no de `--color-primario`: así se adapta solo al tema —en los oscuros el realce sale claro y en los claros oscuro— sin depender de que la variable esté definida en ese punto del árbol. */ html body[class*="layout-"] #mbn-menu[aria-expanded="true"] { background-color: color-mix(in srgb, currentColor 12%, transparent); } html body[class*="layout-"] #mbn-menu[aria-expanded="true"] .mbn-label { font-weight: 700; } /* La agarradera: dice "esto se arrastra" sin escribirlo, y de paso separa el borde superior del primer ítem. Es el mismo gesto que el carrito. */ html body[class*="layout-"] #dropdown-categories::before { content: ""; display: block; width: 40px; height: 4px; margin: 10px auto 12px; border-radius: 999px; background: color-mix(in srgb, currentColor 25%, transparent); } /* ── Las páginas, dentro del menú y subordinadas a las categorías ── Mezcladas como iguales con las categorías el menú queda plano y no se entiende qué es cada cosa. Las categorías son a lo que se entra; esto es lo que se consulta una vez. Van abajo, separadas por una línea y con menos peso visual. */ html body[class*="layout-"] #dropdown-categories > .dropdown-paginas { display: flex; flex-direction: column; margin-top: 10px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); } html body[class*="layout-"] #dropdown-categories > .dropdown-paginas > * { display: flex; align-items: center; /* Mismo mínimo táctil que el resto de los controles de la tienda. */ min-height: 44px; padding: 0 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; text-transform: none; letter-spacing: normal; white-space: nowrap; text-decoration: none; /* Explícito, y con `important` porque compite con la hoja de colores por zona que genera api.js —que también lleva `important`— para pintar `.nav-link-btn` según el color del header. Ese color está calculado para el fondo OSCURO de la barra de navegación; adentro del panel, que es una superficie clara fija, daba blanco sobre blanco: contraste 1,00, invisible. Medido en clásico, noche, café y nórdico. */ color: #374151 !important; opacity: 0.9; } html body[class*="layout-"] #dropdown-categories > .dropdown-paginas > *:active { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; } /* La página en la que estás se marca igual que la categoría filtrada: mismo gesto, mismo color. La clase `.active` ya la ponía el script del header según la URL, pero adentro del panel no se veía — `header.css` pinta todo `.dropdown-content a` con fondo transparente y gris, y la regla de arriba le fija el color, las dos con `important`. Medido en las cuatro páginas: el ítem activo y uno cualquiera computaban EXACTAMENTE lo mismo. Va acá y no en `header.css` porque en escritorio `.dropdown-paginas` está vacío —los links viven en la barra de navegación, donde `.nav-link-btn.active` ya los marca— y porque para ganarle a la regla de arriba hay que estar en la misma hoja o después. */ html body[class*="layout-"] #dropdown-categories > .dropdown-paginas > .active { background-color: var(--color-primario) !important; border-color: var(--color-primario) !important; color: var(--color-secundario) !important; opacity: 1; } /* ── El botón "Agregar" de cada tarjeta ──────────────────────────── Medido: 35px de alto, contra los 44 del mínimo táctil. Es EL botón más tocado de toda la tienda —el que convierte una visita en una venta— y era el más chico. En un teléfono, 9px menos es la diferencia entre agregar el producto y abrir la ficha sin querer, porque la tarjeta entera también es tocable. */ html body[class*="layout-"] .product button { min-height: 44px; } /* ── Hero de los 16 temas base ───────────────────────────────────── 380–520px de alto declarado para escritorio. En el celular el alto lo tiene que dar el contenido, con un piso que alcance para que el título y el botón respiren. */ html body[class*="layout-"] .hero-section { min-height: 300px; } /* El título del hero, en los ocho selectores que usan los temas (la misma lista que ZONA_HERO_TITULO en api.js). `clamp` en vez de un tamaño fijo: en 320px de ancho un título de 3 palabras entra en dos renglones y no en cuatro. El máximo se topea por ancho de ventana, así que un teléfono grande lo sigue viendo grande. */ html body[class*="layout-"] .hero-titulo, html body[class*="layout-"] .hero-content h1, html body[class*="layout-"] .hero-section h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.1; } /* ── moda2-figma ─────────────────────────────────────────────────── El peor caso: 860px. `min-height: 80vh` en la sección MÁS el texto y las dos fotos apiladas (en el celular el grid es de una columna, así que los dos hijos suman en vez de convivir). El 80vh no tiene sentido apilado: lo pone el diseño de escritorio, donde texto y fotos comparten la fila. */ html body.layout-moda2-figma .hero-section--m2 { min-height: 0; } html body.layout-moda2-figma .m2-hero-text { padding: 1.75rem 1.25rem; } html body.layout-moda2-figma .m2-hero-text h1 { font-size: clamp(2.25rem, 11vw, 3.25rem); } html body.layout-moda2-figma .m2-hero-text > p { margin-bottom: 1.25rem; } html body.layout-moda2-figma .m2-hero-cta { margin-bottom: 1.5rem; } /* Las dos fotos apiladas medían lo que quisieran (`height: 100%` sin alto de referencia). Acá se les da uno. */ html body.layout-moda2-figma .m2-hero-imgs { height: 150px; } /* Tres cifras con su rótulo, separadas por una línea: 75px para un adorno. Se le baja el aire, no se esconde — es lo que da confianza en una tienda de ropa que nadie conoce. */ html body.layout-moda2-figma .m2-hero-stats { padding-top: 1rem; gap: 1.25rem; } /* ── almacen-figma ───────────────────────────────────────────────── 731px: texto (badge + h1 + párrafo + 2 botones + 3 stats) y foto, apilados. La foto es lo que más pesa. */ html body.layout-almacen-figma .hero-section--af { padding-top: 1.75rem; padding-bottom: 1.75rem; } html body.layout-almacen-figma .hero-af-text h1 { font-size: clamp(2rem, 9vw, 2.75rem); } html body.layout-almacen-figma .hero-af-img { height: 155px; object-fit: cover; } /* Los dos botones se apilaban (`flex-wrap: wrap` con dos botones que no entran juntos a ancho natural): 116px para dos acciones. Compartiendo la fila miden 56. Se reparten el ancho en vez de encogerse cada uno a su texto, que es lo que los hacía no entrar. */ html body.layout-almacen-figma .hero-af-cta { margin: 1rem 0; flex-wrap: nowrap; } html body.layout-almacen-figma .hero-af-btn-primary, html body.layout-almacen-figma .hero-af-btn-secondary { flex: 1 1 0; min-width: 0; text-align: center; } html body.layout-almacen-figma .hero-af-stats { gap: 1.25rem; margin-top: 1rem; } /* ── alimentos-figma ─────────────────────────────────────────────── 628px. La foto es `aspect-ratio: 7/5` a ancho completo: en 390px de pantalla son 278px de una sola imagen. En apaisado son 190. */ html body.layout-alimentos-figma .al-hero-slide { min-height: 0; padding: 1.75rem 1.25rem 2.25rem; gap: 1rem; } /* Su h1 lleva `white-space: pre-line`, o sea que el salto de línea lo pone el comercio: a 2.25rem eran 77px de título. */ html body.layout-alimentos-figma .al-hero-text h1 { font-size: clamp(2rem, 10vw, 2.75rem); } html body.layout-alimentos-figma .al-hero-text p { margin-bottom: 1rem; } html body.layout-alimentos-figma .al-hero-img { aspect-ratio: 2 / 1; } /* Las flechas del carrusel están centradas verticalmente sobre el slide. Con el hero más bajo esa mitad cae justo sobre el botón "Ver ofertas" y lo tapan: la ‹ quedaba encima de la primera letra. Se bajan al pie, a los costados de los puntitos, que es donde no hay nada. */ html body.layout-alimentos-figma .al-hero-prev, html body.layout-alimentos-figma .al-hero-next { top: auto; bottom: 0.5rem; transform: none; width: 2.1rem; height: 2.1rem; } html body.layout-alimentos-figma .al-hero-dots { bottom: 1.05rem; } /* ── dietetica ───────────────────────────────────────────────────── 545px. Su hero es un split: una franja de foto arriba (220px) y el bloque de texto abajo (325px). En su propia media query ya baja a `min-height: auto`, así que lo que queda es el alto de cada mitad. */ html body.layout-dietetica .hero-split-media { min-height: 0; height: 150px; } html body.layout-dietetica .hero-content { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* Mismo caso que almacen-figma: los dos botones se apilaban por el `flex-wrap: wrap` del tema y se llevaban 101px. */ html body.layout-dietetica .hero-cta-row { flex-wrap: nowrap; } html body.layout-dietetica .hero-cta-row .hero-cta { flex: 1 1 0; min-width: 0; text-align: center; } /* ── modaco-figma ────────────────────────────────────────────────── 589px. El bloque de texto ya baja a `min-height: auto` en su propia media query; lo que queda grande es la foto (260px de piso) más el padding del texto. */ html body.layout-modaco-figma .mc-hero-text { padding: 1.75rem 1.25rem; } html body.layout-modaco-figma .mc-hero-text h1 { font-size: clamp(2rem, 10vw, 3rem); margin-bottom: 1rem; } html body.layout-modaco-figma .mc-hero-cta { margin-top: 1.5rem; } /* 200px era demasiado poco y encima el tema ancla la foto arriba (`object-position: top`), que en escritorio está bien porque la franja es alta. En el celular, con una foto vertical —la de Ropa Lalá es de 540x720— una banda de 200px anclada arriba mostraba el cielo y el edificio, y cortaba las caras por la mitad. Se centra y se le da alto suficiente para que se entienda qué se está mirando; sigue midiendo bastante menos que los 320px del tema. */ html body.layout-modaco-figma .mc-hero-img-wrap { min-height: 0; height: 280px; } html body.layout-modaco-figma .mc-hero-img { object-position: center; } /* mayorista-figma no entra acá: mide 345px, que ya deja el catálogo asomando. Tocarlo sería romper algo que funciona. */ /* ── Los filtros, plegados ───────────────────────────────────────── Medido en una tienda real a 390px: el panel de filtros mide 664px y empuja el primer producto hasta los 1750px. Dos pantallas de filtros antes de ver mercadería, en el dispositivo donde menos se filtra. Plegado por defecto: se muestra sólo el botón, y las secciones aparecen al tocarlo. El botón lo inserta `catalog-sidebar.js` siempre; acá se decide que se vea, así no hace falta escuchar el `resize` ni redibujar nada cuando el teléfono rota. */ html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; /* 44px es el mínimo táctil recomendado, el mismo que ya usan los controles del header. */ min-height: 44px; padding: 0.6rem 1rem; margin: 0; background: transparent; /* `currentColor` y no un token de color: son 21 temas, con fondos que van del blanco al negro, y un borde gris fijo desaparece en la mitad. Derivado del color del texto, el contraste se mantiene solo. */ border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; font: inherit; font-size: 0.95rem; font-weight: 600; color: inherit; cursor: pointer; /* El navegador ya no puede achicar el área táctil por debajo de 44px. */ box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; } /* Feedback al tocar: sin esto, en un teléfono no hay forma de saber si el toque entró. Se cambia el fondo y no el tamaño, para no mover el resto. */ html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle:active { background: color-mix(in srgb, currentColor 10%, transparent); } /* Foco visible para quien navega con teclado. `:focus-visible` y no `:focus` para no dibujar el anillo en cada toque con el dedo. */ html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle:focus-visible { outline: 2px solid var(--color-primario, currentColor); outline-offset: 2px; } html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle .sidebar-toggle-txt { margin-right: auto; } /* Cuántos filtros hay puestos. Plegado, el panel esconde el estado: con una categoría elegida se veían menos productos y no se entendía por qué. */ html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle .sidebar-toggle-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-primario, currentColor); /* El token que la tienda ya calcula como legible sobre el color de marca; api.js lo recalcula por tema. */ color: var(--color-texto-sobre-primario, #fff); font-size: 0.75rem; font-weight: 700; line-height: 1; } html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle .sidebar-toggle-badge[hidden] { display: none; } html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle .sidebar-toggle-arrow { flex-shrink: 0; transition: transform 0.18s ease; } html body[class*="layout-"] .catalog-sidebar.sidebar-abierto > .sidebar-toggle .sidebar-toggle-arrow { transform: rotate(180deg); } /* El giro de la flecha es decoración: para quien pidió menos movimiento, el estado ya lo dicen `aria-expanded` y el propio panel abierto. */ @media (prefers-reduced-motion: reduce) { html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle, html body[class*="layout-"] .catalog-sidebar > .sidebar-toggle .sidebar-toggle-arrow { transition: none; } } /* Plegado: se esconde todo menos el botón. Va por `> *` con la excepción del propio botón para que alcance también a lo que cada tema agregue adentro del panel, que no está en el markup compartido. */ html body[class*="layout-"] .catalog-sidebar:not(.sidebar-abierto) > *:not(.sidebar-toggle) { display: none; } /* Con `filtros-top` el panel es un flex horizontal; plegado tiene que apilar el botón solo, si no queda a un costado con un hueco al lado. */ html body[class*="layout-"] .catalog-layout.filtros-top .catalog-sidebar { flex-direction: column; align-items: stretch; } /* ── La foto de la ficha de producto ─────────────────────────────── `product-detail.css` le pone `min-height: 70vh` a la foto principal, y diez temas lo suben a 78vh, 82vh o 320px fijos. El tamaño para móvil lo corrige cada uno en SU media query — o sea que el alto de la foto en el celular depende de que gane la consulta correcta de la hoja correcta, diez veces. Cuando no gana, la foto ocupa el 70–82% del alto de la pantalla y tapa el precio y el botón de comprar. Es lo que reportó un comercio desde Brave: "la foto del producto se veía gigante". Acá se acota una sola vez, con la especificidad que le gana a los diez temas. `min()` en vez de un valor fijo: el alto sale del ANCHO de la pantalla, que es lo que importa en un teléfono, y sigue respetando el 70vh cuando la ventana es más ancha que alta (un celular acostado). */ /* El problema real es el `min-height`, no la altura en sí: `product-detail.css` obliga a 70vh y diez temas lo suben a 78vh o 82vh, así que la foto no podía achicarse ni aunque el producto no lo necesitara. Se pone en 0 y se la deja tomar su alto natural, con un techo para que no tape la pantalla. El primer intento acá fue un tope de 88vw (343px en un celular de 390). Era demasiado: una tienda de ropa tiene fotos verticales de 640x1166 y, con el `object-fit: cover` que usan los temas, de una prenda entera se veía una franja del medio. Peor que el problema que venía a resolver. */ html body[class*="layout-"] .pd-ab-main-img { min-height: 0; max-height: 70vh; } }