/* ══════════════════════════════════════════════════════════════════════ LA TIENDA Y LA FICHA EN ESCRITORIO — HerboMax TODO lo de este archivo vive dentro de media queries de MIN-WIDTH. Ni una sola regla base. El celular, que ya esta aprobado, no cambia: por debajo de 900 px este archivo no existe. Se carga DESPUES de style.css, de tienda.css y de ficha.css, asi que toda regla que empate en especificidad con ellas gana por orden. Sin un solo !important. Ese orden ya NO se apoya en el numero de prioridad del enganche: en functions.php la hoja se encola declarando 'hbx-tienda' y 'hbx-ficha' como dependencia, y WordPress las imprime antes pase lo que pase. Son 11 los selectores que esta hoja repite letra por letra de ficha.css (.hbx .hbx-fi-marco img, .hbx-fi-env, .hbx-fi-tabla, .hbx-ficha .hbx-wa y siete mas): si esta hoja quedara antes, esas reglas no harian nada y en silencio. PANTALLAS MEDIDAS EN EL SITIO REAL antes de escribir esto: 375 · 900 · 1024 · 1025 · 1100 · 1200 · 1280 · 1440 · 1900 ── EL RIEL ────────────────────────────────────────────────────────── La ficha ya tenia tres margenes izquierdos distintos en la misma pagina, medidos a 1440: nombre del producto y migas ..... x = 125 "Especificaciones" y las FAQ .... x = 93 (32 px a la izquierda) "Tambien te recomendamos" ....... x = 40 ademas centrado Aca se unifican los tres en un solo riel: caja de 1240 px con 32 px de aire adentro, o sea 1176 px de contenido, centrada. Es el mismo ancho util que la referencia (1282 con 20 de aire) y el que ya usaba .hbx-ficha-top. ══════════════════════════════════════════════════════════════════════ */ /* ################################################################## A · LA TIENDA ################################################################## */ /* ══ A1 · tres columnas cuando la barra lateral esta puesta ═══════════ QUE RESUELVE: tarjetas demasiado angostas en todo el escritorio. Woodmart escribe --wd-col-lg:4 en el atributo style del listado, o sea que la rejilla intenta cuatro columnas SIEMPRE, sin mirar cuanto espacio le dejo la barra lateral de filtros. Medido en la tienda real: ancho barra tarjeta con 4 col tarjeta con 3 col 1025 px 253 px 167 px 229 px 1100 px 271 px 181 px 248 px 1200 px 296 px 200 px 273 px 1280 px 313 px 212 px 287 px 1440 px 313 px 212 px 287 px 167 px es mas angosto que la tarjeta de un celular de 375 (162 px): el boton "Agregar", el precio tachado y el nombre a dos lineas quedan apretados justo donde hay pantalla de sobra. Con tres columnas la tarjeta queda en 287 px, que es la medida de la referencia y la misma que van a tener los productos relacionados de la ficha mas abajo. No se toca --wd-col-lg: va inline en el elemento y solo se le podria ganar con !important. Se escribe grid-template-columns directo, que la hoja de Woodmart declara sin inline y por lo tanto si se puede pisar. YA NO SE CALIFICA CON .col-lg-9, y es importante. Esa era la clase que Woodmart le pone al contenido CUANDO hay barra lateral. Desde que la barra se esconde (bloque A0, mas abajo), el ancho disponible pasa de 889 px a 1185 px: con tres columnas la tarjeta se iba a 369 px, casi una cuarta parte mas grande que el resto del sitio. Con cuatro queda en 271 px, practicamente los mismos 270 px que medi antes de sacar la barra, o sea que la tarjeta no cambia de tamano en ninguna parte. Medido en el sitio vivo a 1200 px. minmax(0,1fr) y no 1fr: un hijo de rejilla tiene min-width:auto y crece hasta el ancho de su contenido; un nombre de producto largo sin espacios ensancharia la columna y sacaria la pagina de la pantalla. */ @media (min-width:1025px){ .row .site-content .wd-products.wd-grid-g{ grid-template-columns:repeat(4, minmax(0, 1fr)); /* Aire propio en vez del gap de Woodmart, que ademas cambia solo entre --wd-gap-sm y --wd-gap-lg segun cuando se mida. Mas separacion entre filas que entre columnas: asi cada fila se lee como una fila. */ column-gap:24px; row-gap:36px; } } /* ══ A2 · la foto de la tarjeta respira ═══════════════════════════════ QUE RESUELVE: el frasco pegado a los bordes de su caja. El margen de la foto es fijo, 28 px, y eso funciona en celular: dentro de una caja de 162 px son 17%. Con la tarjeta de escritorio en 287 px los mismos 28 px son el 10% y el frasco queda tocando el borde. Se pasa a porcentaje, 84%, que es justo la proporcion que ya tiene en celular. Asi la foto crece y encoge con la tarjeta en vez de dar un salto en cada corte. Comprobado que no salta en el mas delicado, el de 1024 a 1025, donde la barra lateral aparece y las columnas pasan de 4 a 3: la caja se queda en 225 px y la foto va de 197 a 189. Vale para los dos listados: la tienda (.wd-products) y los productos relacionados de la ficha (.hbx-fi-reco), que usan la misma tarjeta. */ @media (min-width:1025px){ .wd-products .hbx-prod-foto img, .hbx-fi-reco .hbx-prod-foto img{ max-width:84%; max-height:84%; } } /* ══ A3 · el formato, a dos lineas tambien fuera de la tienda ═════════ QUE RESUELVE: una tarjeta de 671 px de alto en los relacionados. tienda.css ya recorta la descripcion corta a dos lineas, pero su selector pide .wd-products como antepasado. La rejilla de "Tambien te recomendamos" de la ficha es .hbx-grilla, no .wd-products, asi que ahi el recorte nunca se aplicaba. Medido en la ficha de la Creatina: el parrafo del formato media 200 px de alto y la tarjeta terminaba en 671 px, el doble que las de la tienda. OJO — ESTO SIGUE PASANDO EN CELULAR. A 375 px esa misma tarjeta mide 822 px de alto. No se arregla aca a proposito: la version de celular esta aprobada y la regla dice que no se toca. Queda avisado para que el dueno decida. */ @media (min-width:900px){ .hbx-fi-reco .hbx-prod .hbx-form{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } /* ══ A4 · el raton ════════════════════════════════════════════════════ QUE RESUELVE: en escritorio no hay dedo, hay puntero, y la tarjeta no daba ninguna senal de ser clicable mas alla de un cambio de borde muy tenue. UNIFICADO AL INTEGRAR. .hbx-prod es la MISMA tarjeta en la portada y en la tienda —content-product.php la dibuja con las mismas clases a proposito, para que el cliente vea lo mismo en las dos— y venia con dos comportamientos distintos: en escritorio.css se levantaba 3 px desde 900 px, y aca no se levantaba y empezaba en 1025. La misma tarjeta tiene que responder igual en todo el sitio, asi que se copia el de la portada tal cual: mismo corte, misma sombra, mismo levante. Solo donde hay puntero de verdad (hover:hover), para no dejar el estado pegado en las pantallas tactiles grandes. El transform crea un bloque contenedor nuevo, que es la leccion que costo caro con position:fixed; se puede aca porque dentro de la tarjeta no hay nada fijo, y es exactamente lo que la portada ya hace con esta misma clase. */ @media (hover:hover) and (min-width:900px){ .hbx-prod{ transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .hbx-prod:hover{ border-color:var(--hbx-borde-2, #cfc8e2); box-shadow:0 10px 26px rgba(20, 23, 58, .10); transform:translateY(-3px); } } /* ################################################################## B · LA FICHA DE PRODUCTO ################################################################## */ /* ══ B1 · un solo riel para toda la ficha ═════════════════════════════ QUE RESUELVE: los tres margenes izquierdos distintos que se midieron arriba. .hbx-fi-seccion ya es una banda a ancho completo con la linea divisoria a sangre, que es lo que hace la referencia. Lo que estaba mal es lo de adentro: .hbx-fi-env se cerraba en 1240 px SIN aire propio, mientras .hbx-ficha-top se cierra en 1240 px CON 32 px de aire. Los dos centrados dan dos margenes distintos. 1176 = 1240 - 32 - 32. Con el aire de 32 px que .hbx-fi-seccion ya trae, el contenido cae exactamente donde cae el nombre del producto. Comprobado en los dos extremos: a 1440 -> banda util 1361, env 1176 centrado, contenido en x=124,5 a 1000 -> banda util 936, env 936, contenido en x=32 En los dos casos coincide con .hbx-ficha-top. */ @media (min-width:900px){ .hbx-fi-env{ max-width:1176px; } /* Y los titulos de esas bandas se alinean al riel en vez de centrarse. .hbx-cab llega centrada desde la portada, donde eso esta bien porque el bloque ocupa la pantalla entera. Aca no: debajo del titulo "Especificaciones" hay una tabla alineada a la izquierda, y debajo de "Preguntas frecuentes" una lista de 820 px tambien a la izquierda. El titulo centrado sobre contenido alineado deja la seccion torcida. .hbx-sub se centra sola con margin-inline:auto; se devuelve al riel. */ .hbx-fi-seccion .hbx-cab{ text-align:left; } .hbx-fi-seccion .hbx-sub{ margin-inline:0; } } /* ══ B2 · los productos relacionados, dentro del riel ═════════════════ QUE RESUELVE: la unica seccion de la ficha que se iba a los bordes de la pantalla y ademas venia centrada. "Tambien te recomendamos" reusa .hbx-seccion, .hbx-cab y .hbx-grilla de la portada. En la portada eso esta bien: son bloques a ancho completo y con el titulo centrado. Dentro de la ficha no: medido a 1440, el titulo arrancaba en x=40 centrado y la rejilla ocupaba los 1425 px enteros, con tarjetas de 321 px al lado de las de 212 px de la tienda. Se le da el aire a la seccion y el ancho a los hijos, igual que .hbx-fi-seccion + .hbx-fi-env: mismo mecanismo, mismo resultado, y la linea divisoria de arriba sigue a sangre porque el borde no se mueve con el padding. Tarjeta resultante: (1176 - 48) / 4 = 282 px. La de la tienda con tres columnas queda en 287. Las dos rejillas del sitio se ven iguales. */ @media (min-width:900px){ .hbx-fi-reco{ padding-inline:32px; } .hbx-fi-reco > .hbx-cab, .hbx-fi-reco > .hbx-grilla{ max-width:1176px; margin-inline:auto; } /* .hbx-cab trae padding:0 40px y text-align:center desde la portada. */ .hbx-fi-reco > .hbx-cab{ padding-inline:0; text-align:left; } /* .hbx-sub se centra sola con margin-inline:auto en la portada. */ .hbx-fi-reco .hbx-sub{ margin-inline:0; } /* .hbx-grilla trae padding:16px 40px 0. Se conservan los 16 de arriba. */ .hbx-fi-reco > .hbx-grilla{ padding-inline:0; column-gap:24px; row-gap:36px; } } /* ══ B3 · los titulos de seccion son rotulos, no titulares ════════════ QUE RESUELVE: el ritmo de la pagina. La referencia que eligio el dueno usa los titulos de seccion como rotulos discretos: 16 px, mayusculas, peso 400, sin espaciado extra. El unico titular grande de la pagina es el del newsletter. Hoy "Especificaciones", "Tambien te recomendamos" y "Preguntas frecuentes" salen a 30 px y peso 600: tres titulares compitiendo con el nombre del producto, que es el que manda. ESTA ES LA UNICA DECISION DE DISENO DEL ARCHIVO, y esta acotada a la ficha a proposito: .hbx-h2 tambien la usa la portada, que la esta vistiendo otra persona. Si el dueno la quiere grande otra vez, se borra este bloque y nada mas se mueve. Especificidad (0,3,0) para ganarle a .hbx .hbx-h2, que declara text-transform:none. El color sigue siendo --texto sobre blanco: 15,4:1, muy por encima de AA. */ @media (min-width:900px){ .hbx .hbx-fi-seccion .hbx-h2, .hbx .hbx-fi-reco .hbx-h2{ font-size:1rem; font-weight:400; letter-spacing:normal; line-height:1.35; text-transform:uppercase; } .hbx-fi-seccion .hbx-sub, .hbx-fi-reco .hbx-sub{ margin-top:6px; } } /* ══ B4 · la columna de compra, legible ═══════════════════════════════ QUE RESUELVE: lineas de texto de 90 caracteres y un boton de 428 px. La columna derecha mide 560 px a 1440. A ese ancho: · el formato y los parrafos de "Envio" y "Cambios" pasan de 90 caracteres por linea; lo comodo son 45-75. · "Agregar al carro" media 428 px de ancho, casi el doble que el boton de la portada, que ya esta calibrado en 340. Se cierra la fila de compra en 420 px (paso de cantidad + boton), y con ella el boton de WhatsApp y la pastilla de "Sin stock", para que los tres terminen en la misma vertical. El boton queda en unos 288 px. No se toca donde vive "Modo de uso / Envio / Cambios": sigue en la columna derecha. Bajarlo a ancho completo, como pedia el encargo, obliga a mover el
fuera de .hbx-fi-cuerpo en el PHP, y ese mismo cambio le altera el orden de lectura al celular, que esta aprobado. Queda avisado. */ @media (min-width:900px){ .hbx-fi-cuerpo .hbx-fi-form, .hbx-fi-cuerpo .hbx-fi-cuotas, .hbx-fi-datos dd, .hbx-ficha .hbx-envio{ max-width:48ch; } /* .hbx-esc se suma a la lista: si el selector de cantidad no se cerrara en los mismos 420 px, en escritorio correria los 560 px de la columna mientras el boton de comprar que va justo debajo se corta en 420. Las tarjetas terminarian 140 px mas a la derecha que el boton. */ .hbx-ficha .hbx-esc, .hbx-ficha .hbx-fi-fila, .hbx-ficha .hbx-fi-woo, .hbx-ficha .hbx-wa, .hbx-ficha .hbx-agotado{ max-width:420px; } } /* ══ B5 · la tabla de especificaciones ════════════════════════════════ QUE RESUELVE: una etiqueta de 400 px para decir "Formato". La tabla heredaba el ancho entero del riel (1176 px) con la primera columna al 34%. Se cierra en 820 px, el mismo ancho que ya usan las preguntas frecuentes, y la etiqueta se fija en 260 px. Asi las dos secciones de abajo comparten medida y la pagina deja de tener un ancho distinto por bloque. */ @media (min-width:900px){ .hbx-fi-tabla{ max-width:820px; } .hbx-fi-tabla td:first-child{ width:260px; } } /* ══ B6 · la foto grande de la ficha ══════════════════════════════════ QUE RESUELVE: un marco lavanda de 560x560 con el frasco chico adentro. El 74% viene del prototipo de celular, donde el marco mide 375 px. A 1440 ese mismo 74% deja el frasco en 414 px dentro de una caja de 560: 146 px de lavanda vacia alrededor. Se sube a 82% desde 1200 px, que es donde el marco ya pasa de los 500 px de lado. Se repite el selector tal cual lo escribe ficha.css (.hbx .hbx-fi-marco img) para empatar en especificidad: como esta hoja se encola despues, gana por orden. */ @media (min-width:1200px){ .hbx .hbx-fi-marco img{ max-width:82%; max-height:82%; } } /* ══ B7 · la barra de compra fija ═════════════════════════════════════ NO SE ESCRIBE NADA ACA, y es una comprobacion, no un olvido. style.css ya la apaga con .hbx-barra{display:none} dentro de @media (min-width:900px), y ademas devuelve el padding-bottom del body. Comprobado en el sitio real: a 1440 px la barra computa display:none y a 375 px sigue en flex. Repetirlo aca solo agregaria un sitio mas donde buscar el dia que haya que cambiarlo. */ /* ── Movimiento reducido ────────────────────────────────────────────── Lo unico animado que agrega este archivo es el hover de A4. OJO CON EL CORTE, que se agrego al integrar. Este bloque venia sin min-width, o sea que era la unica regla del archivo que un celular si leia. No cambiaba nada —por debajo de 900 px no hay ninguna transicion declarada que apagar— pero rompia la promesa de la cabecera, que es lo que hace que esta hoja sea segura de tocar. Va con el mismo corte que la regla que apaga. Y no basta con repetir lo que hace style.css. Su .hbx *{transition:none} necesita un ANTEPASADO .hbx, y en la tienda la tarjeta lleva las clases "hbx hbx-prod" en el mismo elemento: la regla de style.css no la alcanza (en la portada si, porque ahi cuelga de
). Por eso hay que apagar la transicion aca, ademas del desplazamiento. */ @media (min-width:900px) and (prefers-reduced-motion:reduce){ .hbx-prod{ transition:none; } .hbx-prod:hover{ transform:none; } } /* ══ A0 · fuera la columna lateral, y la fila de filtros en su lugar ═══ QUE RESUELVE: el dueno vio la columna izquierda de Woodmart -- el widget "Filtrar por precio" (un deslizador de jQuery-UI) y la lista de 9 categorias -- y dijo que "no corresponde a la pagina". La referencia que dio (flowsupplementscompany.com/collections/all) no tiene columna lateral: una sola columna a ancho completo, con una fila horizontal discreta encima de la rejilla y dos desplegables de texto plano, 16 px, sin negrita, sin mayusculas y sin recuadro. Eso es lo que se copia aca. Medido en el sitio vivo a 1200 px: la columna ocupaba 296 px y el contenido quedaba en 889. Escondiendola, el contenido pasa a 1185 px sin desborde horizontal. Va desde 900 px: bajo ese ancho Woodmart ya la manda fuera de pantalla sola y el celular no cambia. */ @media (min-width:900px){ .area-sidebar-shop{display:none} /* Sin la columna, el contenido tiene que reclamar el ancho entero: las clases col-lg-9 / col-md-9 de Woodmart lo dejarian en el 75%. */ .row.content-layout-wrapper > .site-content.shop-content-area{ flex:0 0 100%; max-width:100%; width:100%; } /* ── la fila ── */ /* Vive FUERA de .hbx, asi que no hereda ni Poppins ni la paleta ni el box-sizing: se declara todo a mano, con las variables globales --hbx-* de :root y su respaldo literal por si alguna no existiera. */ .hbx-filtros{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 28px; box-sizing:border-box; /* La fila cuelga de .shop-loop-head, que Woodmart declara display:flex en direccion FILA. Sin esto la fila se encoge al ancho de su contenido (medido: 619 px de 1185) y el space-between no separa nada: los dos desplegables quedan pegados a la izquierda en vez de en los extremos. */ width:100%; flex:0 0 100%; min-width:0; margin:0 0 26px; padding:16px 0; border-top:1px solid var(--hbx-borde,#e6e2f0); border-bottom:1px solid var(--hbx-borde,#e6e2f0); font-family:var(--hbx-fuente,'Poppins',system-ui,sans-serif); } .hbx-filtros *{box-sizing:border-box} /* ── que la fila cruce de verdad toda la pantalla ────────────────── El width:100% de arriba no bastaba, y la razon es donde ATERRIZA la fila. Se cuelga del gancho woocommerce_before_shop_loop, y Woodmart dispara ese gancho DENTRO de su segundo .wd-shop-tools, no dentro de .shop-loop-head. Ese .wd-shop-tools no tiene ancho propio: se encoge al ancho de su contenido. Asi que el 100% de la fila se medaia contra una caja de 620 px y la fila quedaba apretada contra el borde derecho, en la misma linea que la miga de pan, en vez de cruzar los 1185 px disponibles. Se estira la caja que la contiene. Con :has, para no tocar la OTRA barra de herramientas, que es la que lleva la miga de pan. */ .shop-loop-head .wd-shop-tools:has(.hbx-filtros){ flex:0 0 100%; width:100%; min-width:0; } /* Woodmart le pone borde de abajo a su barra de herramientas y nuestra fila trae borde de arriba propio: entre 900 y 1024 px las dos caian una encima de otra y se veian DOS rayas grises separadas por un dedo de blanco. Se apaga la suya y queda solo la nuestra. */ .shop-loop-head .wd-shop-tools{ border-bottom:0; } .hbx-filtros-uno{ display:flex; align-items:center; gap:8px; min-width:0; margin:0; } .hbx-filtros-eti{ font-size:1rem; font-weight:400; color:var(--hbx-texto-2,#5d6081); text-transform:none; letter-spacing:normal; white-space:nowrap; } /* Woodmart pinta TODO