/* * child-style.css - Camisas Sin Botones * * REGLA DE ORO DE ESTE ARCHIVO: nunca escribir un color o una fuente * directamente aquí (nada de "color: #6E8B3D"). Todo se referencia con * var(--csb-color-primary), var(--csb-font-body), etc. Esas variables se * generan automáticamente desde el Customizer (ver inc/customizer.php). * * Si quieres cambiar un color: Apariencia > Personalizar > Camisas Sin * Botones > Colores de marca. NO edites este archivo para eso. */ /* --------------------------------------------------------------------- Jost, alojada en el tema (assets/fonts): fuente variable, un solo archivo por alfabeto para todos los grosores. Ver functions.php. --------------------------------------------------------------------- */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------- Base general --------------------------------------------------------------------- */ body, button, input, select, textarea { font-family: var(--csb-font-body); } body { background-color: var(--csb-color-background); color: var(--csb-color-text); } /* Desplazamiento suave al pulsar "Diseñar" en el banner de Personalizado (baja hasta "#csb-catalogo-grid", justo encima de la cuadrícula de productos). Sin efecto en el resto de enlaces internos, salvo que también usen "#ancla" -no hay ninguno más ahora mismo en el sitio-. */ html { scroll-behavior: smooth; } /* Storefront pone "overflow-x: hidden" en body Y en .site (#page) para evitar scroll horizontal. Con "hidden" cualquier "position: sticky" de un descendiente (la cabecera móvil) deja de funcionar sin avisar, así que se cambia a "clip": bloquea igual el scroll horizontal pero no rompe sticky. */ body, .site { overflow-x: clip; } a, .woocommerce a.button, .site-header-cart .cart-contents { color: var(--csb-color-primary); } /* Botones principales (Storefront ya trae la estructura, solo pintamos) */ .button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: var(--csb-color-primary); border-color: var(--csb-color-primary); color: #ffffff; } .button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: color-mix(in srgb, var(--csb-color-primary) 85%, black); border-color: color-mix(in srgb, var(--csb-color-primary) 85%, black); } /* --------------------------------------------------------------------- Cabecera (escritorio; el móvil tiene su propio bloque más abajo, en la media query de "Cabecera en móvil", que gana por ir después en el archivo). --------------------------------------------------------------------- */ .site-header { background-color: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Más compacta: Storefront trae 2.617924em arriba y 0 abajo por defecto, bastante espacio suelto. */ padding-top: 1.3em; padding-bottom: 1.3em; /* Storefront pone "margin-bottom: 4.235901032em" (~68px) en ".site-header" en TODAS las páginas salvo su propia plantilla "template-homepage.php" (la portada ya lo anula aparte, más abajo en este archivo, "body.page-template-template-inicio-csb-php .site-header"). En el resto de páginas (Tienda, categorías, producto, Personalizado...) ese margen se sumaba al "padding-top" de ".site-main" (otro ~68px, ver más abajo) y dejaba un salto de ~136px de blanco antes del breadcrumb/banner: mucho más aire que el resto del sitio, sensación de hueco "flotante". Un margen mucho más ajustado, a juego con el resto de espaciados compactos de esta cabecera. */ margin-bottom: 1em; } /* --------------------------------------------------------------------- Cabecera de escritorio. OJO: aquí hubo un intento de reestructurar toda la cabecera en una cuadrícula (logo/buscador/cuenta/carrito + menú centrado, con sticky) que rompió la maquetación -se quedaba encajonada en una caja estrecha, perdía el fondo con textura, y el sticky molestaba al hacer scroll-. Se revirtió: la maquetación de escritorio es la de Storefront de toda la vida (dos bloques apilados, cada uno a ancho completo), con solo dos retoques propios: logo más grande, y menos padding vertical en los enlaces del menú. TODO esto va dentro de "min-width: 769px" a propósito, para no tocar ni un pixel de la cabecera de móvil (que tiene su propio bloque, "max-width: 767px", más abajo). */ @media screen and (min-width: 769px) { /* Más estrecha arriba (Storefront trae 2.617924em de serie, y con el logo ya grande sobra aún más). La textura de fondo (imagen de cabecera del Personalizador) no se repite en mosaico: se ajusta para cubrir la franja sin dejar ver la unión ni verse recortada de forma rara en anchos distintos. */ /* "background-size: 100% auto" (no "cover"): la imagen de fondo de la cabecera trae sus propios elementos decorativos (líneas y puntos verdes) pensados para quedarse pegados arriba del todo. Con "cover" la imagen se estira para llenar TODO el alto de la cabecera -que es bastante más alta que la propia textura, por el logo y el buscador- y esas líneas, en vez de quedarse arriba, se desplazaban hacia abajo hasta caer encima del logo. Con "100% auto" la imagen ocupa el ancho completo pero mantiene su propia proporción (más baja que la cabecera entera), así que sus elementos se quedan donde se diseñaron -pegados al borde de arriba-; el resto de la cabecera, por debajo, se queda con el color de fondo normal (a juego, no se nota la unión). */ .site-header { /* La línea decorativa de la imagen está medida de verdad (no a ojo): un 9,7-10% desde el borde superior de la propia imagen (370px de alto en el archivo original). Como el fondo se escala con "background-size: 100% auto" -ancho completo de la cabecera, alto proporcional-, esa línea se mueve verticalmente según el ancho real de la ventana: a más ancho, más abajo cae en píxeles. Un "padding-top" en "em"/px" (fijo) solo la acompaña bien a UN ancho de pantalla concreto; en "vw" (% del ancho de la ventana) escala en la misma proporción que la propia imagen, así que el logo queda a la misma altura relativa respecto a la línea sea cual sea el ancho de escritorio. 1,5vw deja la línea pasando por detrás de la parte de arriba del logo (el icono/círculo), no a través del texto "Camisas sin botones". */ padding-top: 1.5vw; padding-bottom: 0.6em; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; /* La regla de arriba (sin media query) deja ".site-header" en blanco puro -pensado para cuando no había imagen de fondo-. La textura en sí es de un tono crema, así que con "100% auto" (no cubre toda la altura) se notaría un cambio de color justo donde termina la imagen. Con el mismo crema de fondo del sitio, la unión no se ve. */ background-color: var(--csb-color-background); } /* LA causa real de que el buscador quedara pegado arriba, sin centrar con el logo: Storefront coloca ".site-branding" y ".site-search" con FLOAT (izquierda/derecha), y los elementos flotados se alinean por defecto arriba de su línea, no al centro. Como el logo ahora es mucho más alto que el buscador, el buscador se quedaba "flotando" arriba en vez de centrado con él. Pasando esta fila a flexbox con "align-items: center", el buscador se centra verticalmente respecto al logo (que es el elemento más alto de la fila), sin necesidad de "position:absolute" ni "transform" a ciegas. */ /* "justify-content: center" (no "space-between"): con "space-between" el logo se iba pegado del todo al borde izquierdo de la cabecera y el buscador al borde derecho, dejando el logo muy descentrado respecto al ancho total. Centrando el conjunto (logo + buscador, con "gap" en vez de "space-between" para separarlos) el logo queda mucho más hacia el medio. */ .site-header > .col-full { display: flex; align-items: center; justify-content: center; gap: 3em; flex-wrap: wrap; } /* Logo con mucho más protagonismo. Storefront trae ".custom-logo-link img{width:100%;max-width:210px}" -el ancho lo pone la propia imagen al 100%, así que si el CONTENEDOR (.site-branding) no tiene un ancho concreto, el 100% de la imagen no tiene a qué agarrarse y "auto" o un alto fijo pueden no dar el resultado esperado según el navegador-. Se fija un ancho concreto al contenedor Y a la imagen (width:100% del contenedor), doble selector (por la clase del link Y por la clase de la propia imagen) y !important para que no quede ninguna duda de que gana a la regla de Storefront de arriba. object-fit:contain evita que se deforme si la proporción real del archivo no es exacta. */ .site-branding { width: 420px; max-width: 420px; /* Storefront calcula el alto de la marca a partir de un ancho de logo fijo (210px); con el logo más alto, si no se toca esto se queda corto y recorta el logo por abajo. */ padding-top: 0.4em; padding-bottom: 0.4em; } .custom-logo-link, .custom-logo-link img, .custom-logo-link .custom-logo { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; object-fit: contain; display: block; } /* Storefront trae "clear: both" aquí, pensado para la época en la que ".site-branding"/".site-search" iban flotados (despejar los flotantes de la fila de arriba antes de empezar el menú). Ahora esa fila es flexbox (ver ".site-header > .col-full" más arriba): los elementos flexibles ignoran "float" del todo, así que ya no hay ningún flotante que despejar -si en algún navegador ese "clear" seguía calculando espacio de más, esto lo anula-. */ .storefront-primary-navigation { clear: none; margin-top: 0; } /* Menos aire vertical en los enlaces del menú (Storefront trae 1.618em de serie): la fila de navegación ocupa menos alto. El espaciado horizontal entre elementos lo pone el "gap" del "ul.menu" de aquí abajo, más un poco de padding en cada enlace (zona de toque más cómoda). "white-space: nowrap" evita que un título de 2 palabras (como "Nuestros diseños") se parta él solo en dos líneas dentro de su propio hueco. OJO: con 6 elementos en el menú (antes había 5), el texto de cada uno YA NO PUEDE encogerse para hacer sitio -"white-space: nowrap" se lo impide-, así que el ancho total es una suma fija. Un "gap" de 24px+ (probado) hacía que la suma superase el ancho disponible en pantallas de escritorio no muy anchas: al no caber, en vez de apretarse se desbordaba hacia la izquierda (herencia de "justify-content: flex-end", que empaqueta desde la derecha) y "empujaba" visualmente el resto de la página -de ahí que se viera todo descolocado, no un problema de centrado real-. Con un gap más moderado y sin "flex-end" (alineado a la izquierda, su comportamiento de toda la vida) vuelve a caber siempre con margen. Se apunta a ".primary-navigation ul.menu" (clase que ya viene en el HTML) y no a "ul.nav-menu": esa la añade el navigation.js de Storefront al terminar de cargar, y mientras tanto el menú salía con el padding de serie, partido en dos filas, y luego "saltaba" toda la página hacia arriba (CLS de 0,26 en escritorio). */ .main-navigation .primary-navigation ul.menu > li > a { padding-top: 1em; padding-bottom: 1em; padding-left: 0.3em; padding-right: 0.3em; white-space: nowrap; } /* "flex-wrap: nowrap" fuerza una sola fila sí o sí (con 6 elementos ya no cabían de serie y el último, "Contacto", se iba a una segunda línea, descuadrando la cabecera). */ .main-navigation .primary-navigation ul.menu { display: flex; flex-wrap: nowrap; gap: 16px; } /* Quita la flecha desplegable de "Tienda" (y de cualquier otro elemento con submenú) SOLO en escritorio: es un botón que añade por su cuenta "assets/js/navigation.js" de Storefront -no existe en el HTML servido por PHP, por eso no se puede quitar editando una plantilla-, y usa la misma clase ".dropdown-toggle" tanto aquí (".storefront-primary-navigation", el menú de escritorio) como en el menú de móvil (".handheld-navigation", con su propia regla en la sección de móvil de este mismo archivo -esta de aquí, al vivir dentro de "@media (min-width: 769px)", no llegaría a aplicarse en móvil aunque se apuntara también a ".handheld-navigation"-). */ .storefront-primary-navigation .dropdown-toggle { display: none !important; } /* No basta con ocultar el botón de arriba: ese solo quita la flechita, pero Storefront sigue abriendo el ".sub-menu" de "Tienda" (o el que sea) al pasar el ratón por encima -por CSS, sin JS de por medio-. "Tienda" tiene que quedar como un enlace normal y corriente, sin desplegable contextual alguno: se anula también el propio submenú en escritorio (el de móvil no se toca, ahí sigue siendo un acordeón útil). */ .storefront-primary-navigation .sub-menu { display: none !important; } /* LA flecha visible de verdad (la de arriba, ".dropdown-toggle", es inofensiva: "assets/js/navigation.js" del tema padre SOLO la crea dentro de ".handheld-navigation", el menú de MÓVIL -nunca en escritorio-, así que esa regla no llegaba a aplicarse a nada aquí). El icono verde real es un "::after" con Font Awesome que el propio CSS de Storefront (assets/css/base/icons.css) pone SIEMPRE (display:inline-block, sin :hover de por medio) en el enlace de cualquier item de menú con submenú -"Tienda", en este caso-. Se anula aquí, en el mismo sitio que las reglas de arriba. */ .storefront-primary-navigation .menu-item-has-children > a::after, .storefront-primary-navigation .page_item_has_children > a::after { content: none !important; display: none !important; margin-left: 0 !important; } .storefront-primary-navigation .col-full { display: flex; align-items: center; flex-wrap: nowrap; gap: 1.3em; } .main-navigation { float: none; width: auto; flex: 1 1 auto; min-width: 0; margin-right: 0; } .csb-account-item, .site-header-cart { float: none; width: auto; flex: 0 0 auto; } } /* Buscador (WooCommerce): bordes suaves, fondo contrastado, botón en verde oliva. Sin media query -así también se ve bien en móvil, en el desplegable que abre la lupa-. */ .woocommerce-product-search { display: flex; align-items: center; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px; padding: 0.3em 0.3em 0.3em 1.1em; } .woocommerce-product-search .search-field { flex: 1 1 auto; min-width: 0; /* Storefront pone en TODOS los input[type=search] (no algo pensado para este buscador en concreto, es una regla genérica de todo el sitio) un fondo gris y una sombra interior a modo de borde -eso es lo que se veía como un "recuadro/parche flotante" dentro de nuestra propia píldora-. Border/background/box-shadow a "none" con !important porque, aun ganando por especificidad normal, es una regla muy genérica (aplica a TODOS los campos de texto del sitio) y conviene no depender de que nadie la toque por error. */ border: none !important; background: none !important; box-shadow: none !important; font-family: var(--csb-font-body); font-size: 0.9rem; width: 100%; height: 100%; /* Lupa propia (Storefront traía la suya, un icono de Font Awesome, ya anulado más abajo): un SVG en línea, sin depender de que cargue ninguna fuente de iconos. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.1em center; background-size: 16px 16px; padding: 0.4em 0.4em 0.4em 1.6em; } .woocommerce-product-search .search-field:focus { outline: none; } .woocommerce-product-search .search-field::placeholder { color: var(--csb-color-text); opacity: 0.45; } .woocommerce-product-search button[type="submit"] { flex: 0 0 auto; border: none; border-radius: 999px; padding: 0.5em 1.1em; background-color: var(--csb-color-primary); color: #ffffff; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; } .woocommerce-product-search button[type="submit"]:hover { background-color: color-mix(in srgb, var(--csb-color-primary) 85%, black); } /* Storefront le dibuja su PROPIA lupa al buscador (un icono de Font Awesome puesto por ::before) y le añade padding-left al campo de texto para hacerle sitio -con más especificidad que nuestras reglas de arriba, así que ganaba igualmente-. Si esa fuente de iconos no carga bien, ese ::before se ve como una caja/forma rara -el "doble borde" raro que se veía-. Como el diseño en píldora ya tiene su propio botón "Buscar", no hace falta ese icono: se anula del todo. */ .widget_product_search form::before, .widget_product_search form:not(.wp-block-search)::before { content: none !important; } /* (El padding-left para la lupa ya lo pone ".search-field" de arriba, junto con el resto de su estilo -antes había una regla suelta aquí que se quedó corta y encima chocaba con el hueco para el icono-.) */ .site-title a { font-family: var(--csb-font-body); font-weight: 600; color: var(--csb-color-text); } /* --------------------------------------------------------------------- Ficha de producto a ancho completo (ver inc/product-page-layout.php): sin la barra lateral de Buscar/Categorías, con más sitio para la foto y el resto de la información. --------------------------------------------------------------------- */ .csb-producto-sin-sidebar #primary { width: 100%; float: none; margin: 0; } /* Reparto entre foto y resumen (título/precio/filtros): la foto se lleva más proporción a propósito -era lo que se pidió, "mucho más grande"-, dejando al resumen el ancho justo para que los pills de Técnica/Talla/Color no se vean apretados. SOLO A PARTIR DE 768px (el breakpoint real de Storefront): esta regla no llevaba media query y se aplicaba también en móvil, aplastando el resumen a un 33% del ancho del TELÉFONO (no de la página) -de ahí el título partido a media palabra ("Camis eta clásica": a ese ancho "Camiseta" ni siquiera cabía entera) y los pills de Talla/Color/Técnica amontonados verticalmente, aunque esos ya llevan "flex-wrap" propio y no tienen ningún fallo en sí mismos-. Sin esta regla, en móvil ".images"/".summary" vuelven al comportamiento de WooCommerce de serie: bloques apilados al 100% del ancho, uno debajo del otro. */ @media screen and (min-width: 768px) { .csb-producto-sin-sidebar div.product .images, .csb-producto-sin-sidebar .woocommerce-product-gallery { width: 64%; margin-right: 3%; } .csb-producto-sin-sidebar div.product .summary { width: 33%; } } /* Columna de configuración (título, precio y Técnica/Talla/Color) más compacta: de serie, WooCommerce/Storefront dejan bastante aire suelto entre estos tres bloques -el propio

, el "margin: 1.41575em 0" de "p.price" (~22.6px arriba Y abajo) y el "padding: 1em 0" de "form.cart" (el formulario que envuelve toda la tabla de variaciones, donde vive el primer bloque de pastillas, "Técnica")-. Se ajustan los tres para que el título/precio queden pegados entre sí y el bloque de opciones suba justo debajo, sin tocar el tamaño de letra ni las pastillas en sí (".csb-variation-pill(s)"), que ya son compactas. */ .summary .product_title { margin: 0 0 0.1em; } .summary p.price { margin: 0 0 0.2em; } .summary form.cart { padding-top: 0; margin-bottom: 0.2em; } /* Cabecera móvil de la ficha de producto (título + precio antes de la foto): ver inc/product-page-layout.php (imprime el hueco vacío) y assets/js/product-mobile-layout.js (lo rellena solo si de verdad se está en móvil, moviendo el

y el precio de verdad, no una copia). En escritorio este bloque se queda "hidden" y no hace falta tocarlo aquí -por eso no lleva "@media": ya no es visible sin más-. */ .csb-producto-cabecera-movil:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2em 0.8em; /* Bloque compacto a propósito -pedido explícito-: lo justo para que el precio no toque el título, sin dejar aire de sobra antes de la foto. */ margin-bottom: 0.35em; } .csb-producto-cabecera-movil .product_title { margin: 0; flex: 1 1 auto; min-width: 0; /* Permite que el título encoja/rompa en palabra, no desborde. */ } /* Precio más grande y en el color de marca -pedido explícito-, en vez del gris/negro de serie de WooCommerce. */ .csb-producto-cabecera-movil .price { margin: 0; flex-shrink: 0; font-size: 1.5rem; font-weight: 700; color: var(--csb-color-primary); white-space: nowrap; } /* Descripción de la ficha de producto en móvil, como acordeón cerrado: ver inc/product-page-layout.php (imprime el hueco) y assets/js/product-mobile-layout.js (mueve ahí la descripción real, solo en productos con galería por color -ver inc/color-gallery.php-; en el resto de productos este hueco se queda vacío y oculto). Reutiliza la apariencia de ".csb-technique-accordion" (Inicio, "Ver el proceso técnico"): mismo acordeón nativo
, no hace falta CSS nuevo para el propio desplegable, solo separarlo un poco de lo de arriba. */ .csb-producto-descripcion-movil:not([hidden]) { margin-top: 1.5em; } /* --------------------------------------------------------------------- Banner + franja de beneficios de "Personalizado" (ver csb_personalizado_banner_superior() en inc/personalizado-catalogo.php), justo antes de la cuadrícula de productos. --------------------------------------------------------------------- */ /* Contenedor común de título+párrafo y tarjeta -es el que da el contexto de posicionamiento ("position:relative") para poder superponer el texto sobre la foto en escritorio (ver ".csb-catalogo-hero-text" más abajo). En móvil no hace falta nada especial aquí: los hijos van en flujo normal, uno debajo del otro. */ .csb-catalogo-hero-wrap { position: relative; } /* Escritorio: título+párrafo SUPERPUESTOS sobre la foto, en blanco, pegados a la esquina superior izquierda (vuelta a este diseño a petición del usuario, 2026-09-25). */ .csb-catalogo-hero-text { position: absolute; top: 1.8em; left: 1.8em; z-index: 1; max-width: 420px; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 12px rgba(0, 0, 0, 0.4); } .csb-catalogo-hero-text h1 { font-size: 1.4rem; margin: 0 0 0.4em; color: inherit; } .csb-catalogo-hero-text p { margin: 0; font-size: 0.95rem; color: inherit; } .csb-catalogo-hero { position: relative; min-height: 340px; border-radius: 16px; overflow: hidden; /* Recorta las esquinas de ".csb-catalogo-hero-img" (absoluta) y del degradado de abajo. */ padding: 1.5em; } /* La foto ocupa TODO el banner de fondo (position:absolute + inset:0). */ .csb-catalogo-hero-img { position: absolute; inset: 0; background-color: var(--csb-color-background); /* Por si no hay imagen todavía. */ background-size: cover; background-position: center; } /* Degradado oscuro arriba y abajo (la foto en sí puede ser clara o recargada según la que se suba en Personalizar > Contacto y portada): así el texto de la esquina y el botón de abajo se leen bien encima de CUALQUIER foto, sin depender de lo oscura que sea. */ .csb-catalogo-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100% ); pointer-events: none; } /* Amarillo/naranja suave a propósito distinto del verde de marca -color de acento pedido para este botón en concreto, no de la paleta general del sitio-. Centrado, algo más arriba del borde inferior (no pegado del todo) para no tapar el diseño de la camiseta que suele salir ahí en la foto. */ .csb-catalogo-hero-cta { position: absolute; left: 50%; bottom: 2.75em; transform: translateX(-50%); display: inline-block; background-color: #f5c563; color: var(--csb-color-text); font-weight: 700; padding: 0.7em 1.6em; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .csb-catalogo-hero-cta:hover { background-color: color-mix(in srgb, #f5c563 85%, black); } @media screen and (max-width: 767px) { /* En móvil NO se superpone el texto a la foto (queda ilegible/apretado en pantalla estrecha): pasa a ser un bloque normal, centrado, ENCIMA de la tarjeta -mismo motivo que en la versión anterior de este banner-. "Camisetas personalizadas" se ve además más grande, casi como un título de página (pedido expreso, 2026-09-25). */ .csb-catalogo-hero-text { position: static; max-width: 480px; margin: 1.5em auto 0.8em; text-align: center; color: var(--csb-color-text); text-shadow: none; } .csb-catalogo-hero-text h1 { font-size: 1.7rem; } .csb-catalogo-hero-text p { font-size: 0.9rem; } .csb-catalogo-hero { min-height: 300px; padding: 1.2em; } .csb-catalogo-hero-cta { bottom: 2.25em; } } /* --------------------------------------------------------------------- Catálogo de "Personalizado" (ver inc/personalizado-catalogo.php): cuadrícula sin barra lateral, con tarjetas de producto rediseñadas (insignias, valoración con nota numérica, muestras de color). Todo dentro de ".csb-personalizado-catalogo" -en Tienda normal no cambia nada de esto-. --------------------------------------------------------------------- */ /* Ensancha "#primary" al quitar la barra lateral -mismo motivo y mismo arreglo que ".csb-producto-sin-sidebar #primary" de aquí arriba: sin esto se queda al 73,9% de ancho de serie, con un hueco en blanco donde antes iba la barra lateral-. */ .csb-personalizado-catalogo #primary { width: 100%; float: none; margin: 0; } /* Storefront alinea el título de la página a la izquierda de serie. */ .csb-personalizado-catalogo .woocommerce-products-header__title { text-align: center; } /* En móvil, con el tamaño de letra fluido de serie de Storefront (~42px en pantallas de 390px), "Selecciona la prenda para personalizar" caía en 3 líneas. Se reduce el tamaño (probado: ≤38px ya da 2 líneas) para que quepa como mucho en 2. */ @media screen and (max-width: 767px) { .csb-personalizado-catalogo .woocommerce-products-header__title { font-size: 2.2rem; } } /* Cuadrícula: 4 columnas en escritorio, bajando por pasos hasta 2 en móvil. "!important" en el ancho de "li.product": Storefront lo maqueta de serie con float + ancho en porcentaje (pensado para SIN CSS Grid), y esa regla tiene la misma especificidad que la nuestra -sin forzarlo, en algunos anchos ganaba ella y dejaba huecos raros entre tarjeta y tarjeta en vez de que cada una ocupe su columna entera-. */ .csb-personalizado-catalogo ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.8em 1.2em; } .csb-personalizado-catalogo ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; } /* WooCommerce trae "ul.products::before { content:' '; display:table; }" -un "clearfix" de toda la vida, pensado para cuando "li.product" iba flotado-. Con "display: grid" en el padre, ese "::before" (al no ser "display: none") pasa a contar como una casilla más de la cuadrícula: una tarjeta vacía en la primera posición, empujando a "Camiseta" (el primer producto real) a la segunda. Con CSS Grid ya no hace falta ningún clearfix -eso era solo para contener flotantes-, así que se anula del todo. */ .csb-personalizado-catalogo ul.products::before, .csb-personalizado-catalogo ul.products::after { content: none; display: none; } @media screen and (max-width: 991px) { .csb-personalizado-catalogo ul.products { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .csb-personalizado-catalogo ul.products { grid-template-columns: repeat(2, 1fr); gap: 1.2em 0.8em; } } /* --- Tarjeta de producto --- */ .csb-personalizado-catalogo ul.products li.product a.woocommerce-loop-product__link { display: block; position: relative; /* Ancla las insignias, que van "position: absolute" encima de la foto. */ color: inherit; text-decoration: none; } /* La foto en sí (WooCommerce ya la pone dentro del enlace, sin div contenedor propio: no hace falta añadir uno, basta con dar el fondo y el redondeado a la propia "img"). */ .csb-personalizado-catalogo ul.products li.product img { background-color: #f4f4f4; border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; display: block; width: 100%; height: auto; } /* Insignia de categoría sobre la foto: PHP ya no la imprime (ver inc/personalizado-catalogo.php, quitada a petición expresa). Regla de respaldo por si queda algún fragmento cacheado o alguna otra fuente la sigue generando -no debería, pero por si acaso-. */ .csb-catalogo-badges, .csb-catalogo-badge--categoria { display: none !important; } /* Título, precio, valoración: WooCommerce ya pinta el h2/span.price/ div.star-rating de serie -aquí solo se retocan tamaños y colores-. */ .csb-personalizado-catalogo ul.products li.product h2.woocommerce-loop-product__title { font-size: 0.95rem; font-weight: 700; margin: 0.8em 0 0.3em; color: var(--csb-color-text); } .csb-personalizado-catalogo ul.products li.product .star-rating { margin: 0 0 0.3em; font-size: 0.8em; float: none; display: inline-block; vertical-align: top; } /* Estrellas rellenas en el verde de marca (estilo Trustpilot: estrellas de color en vez del amarillo de serie de WooCommerce). Las vacías ("::before" sin el "span" delante) se quedan con el gris de serie. */ .csb-personalizado-catalogo ul.products li.product .star-rating span::before { color: var(--csb-color-primary); } .csb-catalogo-valoracion-numero { display: inline-block; margin-left: 0.4em; font-size: 0.8rem; font-weight: 600; color: var(--csb-color-text); vertical-align: top; } .csb-personalizado-catalogo ul.products li.product .price { display: block; font-size: 0.9rem; color: #6b6b6b; margin-bottom: 0.6em; } /* Muestras de color: círculos pequeños con el color aproximado de cada término del atributo "Color" (ver csb_color_a_hex()). */ .csb-catalogo-swatches { display: flex; align-items: center; gap: 0.35em; flex-wrap: wrap; margin-bottom: 0.6em; } .csb-catalogo-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); display: inline-block; } .csb-catalogo-swatch-mas { font-size: 0.7rem; color: #6b6b6b; margin-left: 0.2em; } /* "Personalizar" al pasar el ratón (sustituye al botón "Enviar solicitud" fijo de antes, ver csb_personalizado_aviso_hover() en inc/personalizado-catalogo.php): la foto se oscurece un poco y aparece este aviso centrado, como pista de que toda la tarjeta lleva a la ficha del producto. "pointer-events: none" en el aviso: es decorativo, el clic lo recoge el enlace de toda la tarjeta, no hace falta que este span lo intercepte primero. */ .csb-personalizado-catalogo ul.products li.product a.woocommerce-loop-product__link { overflow: hidden; /* Que la foto no se salga de las esquinas redondeadas al hacer zoom/oscurecer. */ } .csb-personalizado-catalogo ul.products li.product img { transition: filter 0.2s ease; } .csb-personalizado-catalogo ul.products li.product a.woocommerce-loop-product__link:hover img { filter: brightness(0.82); } .csb-catalogo-hover-cta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s ease; display: inline-flex; align-items: center; gap: 0.4em; background-color: #ffffff; border: 1.5px solid var(--csb-color-primary); color: var(--csb-color-primary); padding: 0.5em 1.1em; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; pointer-events: none; } .csb-catalogo-hover-cta .csb-icon { width: 16px; height: 16px; } .csb-personalizado-catalogo ul.products li.product a.woocommerce-loop-product__link:hover .csb-catalogo-hover-cta { opacity: 1; } /* --------------------------------------------------------------------- Páginas propias sin barra lateral (Inicio, Empresas, Contacto, Nuestros diseños): CAUSA REAL de que estas páginas se vieran "descentradas" -contenido desplazado a la izquierda, hueco de más a la derecha-. Storefront pone ".content-area" (o sea "#primary") al 73.9% de ancho y flotando a la izquierda de SERIE, EN TODAS LAS PÁGINAS, reservando sitio a la derecha para la barra lateral -esto NO depende de si la página en cuestión llama a get_sidebar(), depende solo de si HAY widgets guardados en esa barra lateral en algún sitio (Apariencia > Widgets), y aquí SÍ los hay -los filtros de Talla/Color/Categorías que se usan en Tienda-. Como ninguna de estas 4 plantillas llama a get_sidebar(), ese 26,1% de ancho reservado se quedaba en blanco en vez de mostrar la barra lateral, y para colmo las secciones "a sangre completa" (".csb-section--bleed": héroe, técnicas, Ejemplos de trabajos, CTA...) calculan su posición a partir del ancho de "#primary" -que sin este arreglo es un 26,1% más estrecho de lo que debería-, así que TODAS ellas quedaban desplazadas hacia la izquierda, no solo el hueco visible de la barra lateral fantasma. Mismo arreglo que ya existe para la ficha de producto (ver arriba, ".csb-producto-sin-sidebar"), aplicado aquí a estas 4 plantillas por su clase de plantilla en el body. */ body.page-template-template-inicio-csb-php #primary, body.page-template-template-empresas-csb-php #primary, body.page-template-template-contacto-csb-php #primary, body.page-template-template-disenos-csb-php #primary { width: 100%; float: none; margin: 0; } /* --------------------------------------------------------------------- Home - Storefront ya gestiona el homepage vía Customizer > Homepage. Aquí solo damos estilo a los títulos de sección que ese sistema genera. --------------------------------------------------------------------- */ .storefront-product-section .section-title, .storefront-recent-products .section-title, .storefront-featured-products .section-title { font-family: var(--csb-font-body); color: var(--csb-color-text); text-transform: uppercase; letter-spacing: 0.05em; } /* --------------------------------------------------------------------- Listado de categoría / tienda --------------------------------------------------------------------- */ ul.products li.product .price { color: var(--csb-color-primary); font-weight: 600; } ul.products li.product h2.woocommerce-loop-product__title { font-family: var(--csb-font-body); color: var(--csb-color-text); } /* Ordenar por (desplegable nativo de WooCommerce, encima de la rejilla). */ .woocommerce-ordering select { font-family: var(--csb-font-body); padding: 0.5em 0.8em; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; background-color: #ffffff; } /* --------------------------------------------------------------------- Barra lateral de la tienda (búsqueda, filtro por talla, precio, categorías): son widgets nativos de WooCommerce, aquí solo se pintan con la tipografía/colores de la marca. --------------------------------------------------------------------- */ .widget-area .widget-title { font-family: var(--csb-font-body); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; margin-bottom: 0.8em; } /* Filtro por talla/color: pastillas redondeadas, con el mismo estilo que ya se usa en las pastillas de la página de personalización (.csb-variation-pill) para que se sientan parte del mismo sitio, en vez de un "botón de filtro" genérico aparte. */ .widget_layered_nav .woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6em; } .widget_layered_nav .woocommerce-widget-layered-nav-list__item { margin: 0; } /* DevTools mostró un ::before de 14x19.83px en el
  • (un cuadrado gris pegado a cada pastilla) que no viene de ningún CSS nuestro -ni de Storefront, ni de WooCommerce, se ha buscado en los tres sitios-. En vez de perseguir de dónde sale exactamente, se anula aquí directamente: es más fiable que seguir adivinando el origen. */ .widget_layered_nav .woocommerce-widget-layered-nav-list__item::before, .widget_layered_nav .woocommerce-widget-layered-nav-list__item::after { content: none !important; } .widget_layered_nav .woocommerce-widget-layered-nav-list__item a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75em; padding: 0.5em 1em; border: 1.5px solid rgba(0, 0, 0, 0.25); border-radius: 999px; background-color: #ffffff; font-size: 0.75rem; font-weight: 500; color: var(--csb-color-text); text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; } .widget_layered_nav .woocommerce-widget-layered-nav-list__item a:hover { border-color: var(--csb-color-primary); color: var(--csb-color-primary); transform: translateY(-1px); } /* Solo Talla: cuadrado uniforme (ancho y alto fijos, no solo un mínimo), igual para todas las tallas -"2XL" y "M" ocupan el mismo cuadrado, en vez de que cada una mida lo que ocupe su texto-, del mismo tamaño de "letra" que los cuadraditos de color pero más grande para que quepa el texto. Se distingue del resto de filtros por su propia clase ("csb-talla-chip", inc/shop-filters.php la pone directamente en el HTML) y no por la URL del enlace: la URL para QUITAR la última talla marcada deja de llevar "filter_talla=" -al quitarla no queda ningún filtro activo-, así que fiarse de la URL hacía que esa pastilla perdiera el formato justo al quedar sola marcada. */ .widget_layered_nav .woocommerce-widget-layered-nav-list__item .csb-talla-chip { width: 2.5em; height: 2.5em; min-width: 0; padding: 0; border-radius: 8px; } /* "Talla única" no es una talla de verdad (no tiene sentido en un cuadrado de 2.5em junto a "M" o "L"): en vez de forzarla al mismo molde, se le da su propia forma de píldora ancha, con el texto en una sola línea. */ .widget_layered_nav .woocommerce-widget-layered-nav-list__item .csb-talla-chip--unica { width: auto; height: auto; padding: 0.5em 0.9em; border-radius: 999px; font-size: 0.72rem; white-space: nowrap; } /* El número entre paréntesis ("(12)") se oculta a propósito: se pidió quitarlo de las pastillas de filtro. */ .widget_layered_nav .woocommerce-widget-layered-nav-list__item .count { display: none; } /* Mientras se pide el filtro por AJAX (assets/js/shop-filters.js): el listado de productos se atenúa un poco en vez de desaparecer, para que no dé sensación de "página rota" durante el medio segundo que tarda en llegar la respuesta. */ #main.csb-filtro-cargando { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; } /* Talla seleccionada (tras hacer clic): pastilla rellena, para que se note cuál está activa. (El filtro de Color se quitó de toda la tienda -inc/shop-filters.php-, así que hoy esta regla solo aplica a Talla.) */ .widget_layered_nav .woocommerce-widget-layered-nav-list__item--chosen a { background-color: var(--csb-color-primary); border-color: var(--csb-color-primary); color: #ffffff; } /* Buscador y categorías del sidebar: solo tipografía. */ .widget_product_search input[type="search"] { font-family: var(--csb-font-body); padding: 0.5em 0.8em; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; width: 100%; } .widget_product_categories ul, .widget_price_filter { font-family: var(--csb-font-body); } /* --------------------------------------------------------------------- Ficha de producto: aviso de vinilo / tinta --------------------------------------------------------------------- */ .csb-technique-notice { margin: 1em 0; padding: 0.9em 1.1em; border-left: 4px solid var(--csb-color-primary); background-color: rgba(0, 0, 0, 0.03); } .csb-technique-label { margin: 0 0 0.4em; font-family: var(--csb-font-body); font-size: 1rem; } .csb-technique-instructions { font-size: 0.9rem; color: var(--csb-color-text); opacity: 0.85; } .csb-technique-instructions p { margin: 0 0 0.4em; } /* Distinguir visualmente DTG de DTF con un pequeño matiz de borde */ .csb-technique-dtg { border-left-color: var(--csb-color-primary); } .csb-technique-dtf { border-left-color: var(--csb-color-text); } /* --------------------------------------------------------------------- Carrito y checkout (solo estética, sin tocar la lógica de WooCommerce) --------------------------------------------------------------------- */ .csb-page-cart .shop_table th, .csb-page-checkout .shop_table th { font-family: var(--csb-font-body); color: var(--csb-color-text); } .csb-page-checkout #order_review_heading, .csb-page-cart .cart-collaterals .cart_totals h2 { font-family: var(--csb-font-body); text-transform: uppercase; letter-spacing: 0.03em; } /* --------------------------------------------------------------------- "Mi cuenta" + carrito (inc/account-icon.php) --------------------------------------------------------------------- */ /* Logo, lupa y carrito de móvil: ocultos por defecto (escritorio), para que NO se vean a la vez que sus versiones normales de escritorio. Solo se muestran dentro de la media query de abajo. */ .csb-logo-mobile-link, .csb-search-toggle, .csb-cart-mobile-link { display: none; } /* * Cabecera en móvil: UNA fila normal (no fija, se desplaza con la * página, como el resto de la cabecera): hamburguesa - logo - lupa - * carrito. * * Storefront reparte la cabecera en DOS bloques apilados (uno para el * logo/buscador, otro -aparte- para el menú+carrito): con "display: * contents" en esos bloques "desaparecen" como caja (sus hijos pasan a * ser hijos directos de .site-header, en el mismo flex), sin tocar el * HTML ni el JS del menú (que sigue funcionando igual, con sus mismas * clases). Así se puede ordenar cada pieza con "order" aunque en el * HTML estén en sitios distintos. */ @media screen and (max-width: 767px) { .site-header > .col-full, .storefront-primary-navigation, .storefront-primary-navigation > .col-full { display: contents; } /* Barra fija de Storefront (Mi cuenta/Buscar/Carrito, pegada abajo del todo): ya no se usa, la sustituye nuestra fila de arriba. */ .storefront-handheld-footer-bar { display: none; } /* La barra negra (inc/topbar.php) YA NO es pegajosa por sí sola: lo es ".csb-sticky-wrap", el contenedor que la envuelve junto con toda la cabecera (ver más abajo, junto a ".site-header"). */ .csb-topbar-inner { padding: 0.3em 1em; font-size: 0.7rem; } .csb-topbar-contact .csb-icon { width: 12px; height: 12px; } /* En móvil, las 3 frases juntas ("Personalización desde 1 unidad · Diseños a medida · Envíos a Península y Baleares") no cabían en una línea y se amontonaban envolviendo en varias líneas -la barra se hacía alta y difícil de leer-. En vez de ocultarlas, se convierten en una marquesina (desplazamiento horizontal continuo) que ocupa el 70% izquierdo de la franja, mientras el teléfono se queda fijo a la derecha, sin moverse ni recortarse nunca. */ .csb-topbar-inner { max-height: 40px; } /* Selector con el padre delante (".csb-topbar-inner .csb-topbar-promo", no solo ".csb-topbar-promo") a propósito: este span también lleva la clase ".csb-topbar-item", que más abajo en este mismo archivo (fuera de toda media query, así que se aplica siempre) tiene "display: flex". Con la misma especificidad (una sola clase) y viniendo después en el archivo, esa regla ganaba en móvil y deshacía este "display: block" -aunque "flex: 1 1 70%" sí se aplicaba, el contenedor volvía a ser flex por dentro, cambiando cómo su hijo (.csb-topbar-marquee) calcula su ancho y dejaba de recortar bien el texto que sobra, que se veía "escapándose" hacia la zona del teléfono. Cualificar con el padre sube la especificidad y evita depender del orden de aparición en el archivo. También se repite aquí "overflow: hidden" (además del que ya tiene .csb-topbar-marquee) como refuerzo: así el texto nunca se sale de su 70% aunque algo más cambie el "display" del hijo. */ .csb-topbar-inner .csb-topbar-promo { display: block; overflow: hidden; flex: 1 1 70%; min-width: 0; } .csb-topbar-marquee { display: block; overflow: hidden; width: 100%; } /* La distancia del "translateX" es "-50%" -la mitad del ancho de la propia pista, que son las 2 copias juntas- en vez de un valor en píxeles medido por JavaScript (como se probó antes): medir con JS y guardarlo en una variable CSS traía dos problemas nuevos -el valor podía tomarse antes de que la fuente Jost terminara de cargar, y "offsetWidth" redondea a pixel entero, perdiendo la precisión de subpíxel que sí usa el navegador para maquetar-, además de que una animación ya en marcha no recalcula sus "@keyframes" aunque cambie la variable, así que había que reiniciarla a mano y esos reinicios no siempre coincidían con el punto del bucle -se veía como si acabara una animación y empezara otra-. Con "-50%" no hace falta nada de eso: como las 2 copias son EXACTAMENTE el mismo HTML/texto/fuente, ocupan exactamente el mismo ancho, y el navegador calcula ese "50%" sobre el ancho real ya maquetado (con toda su precisión de subpíxel), no sobre una medida aproximada aparte. */ .csb-topbar-marquee-track { display: flex; width: max-content; /* 18 s por vuelta completa (una copia entera del mensaje): la misma velocidad aparente que tenía cuando la pista, por error, solo tenía una copia y recorría la mitad en 9 s. */ animation: csb-topbar-marquee 18s linear infinite; will-change: transform; } .csb-topbar-marquee-content { display: block; white-space: nowrap; /* Sin esto, al ser hijo de un flex container, por defecto puede encogerse ("flex-shrink" vale 1 de serie) si hay el más mínimo desajuste de subpíxel -diferente redondeo entre esta copia y la otra-. Si las dos copias no miden EXACTAMENTE lo mismo en píxeles, el desplazamiento del 50% no encaja perfecto y se ve como un salto en el punto del bucle. "flex: 0 0 auto" fija su ancho natural sin permitir que se toque. */ flex: 0 0 auto; } /* Separador entre el final de una vuelta ("...Península y Baleares") y el principio de la siguiente ("Personalización...") -antes era solo un hueco en blanco (padding), ahora es un "·" visible, igual que el resto de separadores de la franja, para que la unión se lea bien en vez de las dos frases pegadas. */ .csb-topbar-marquee-sep { margin: 0 0.6em; } /* La 2ª copia del mensaje (oculta en escritorio, ver más abajo) es la que hace que el bucle no se note al reiniciar: en vez de "saltar" de vuelta al principio, cuando la 1ª copia sale por la izquierda la 2ª ya viene justo detrás. */ .csb-topbar-marquee-content--copia { display: block; } .csb-topbar-contact { flex: 0 0 auto; } /* En móvil se queda solo el teléfono: el email fijo a la derecha quitaba sitio a la marquesina de la izquierda (pedido explícito 2026-09-25). El separador "·" entre teléfono y email (hijo directo de ".csb-topbar-contact", no los "·" de la marquesina, que son hijos de ".csb-topbar-promo") se oculta también, para no dejarlo suelto sin nada detrás. En escritorio no cambia nada. */ .csb-topbar-contact a[href^="mailto:"], .csb-topbar-contact > .csb-topbar-sep { display: none; } /* A quien prefiera menos movimiento en pantalla (ajuste de accesibilidad del sistema operativo/navegador), se le muestra el mensaje quieto en vez de animado. */ @media (prefers-reduced-motion: reduce) { .csb-topbar-marquee-track { animation: none; } .csb-topbar-marquee-content--copia { display: none; } } .csb-topbar-mobile-hide { display: none; } @keyframes csb-topbar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Grid de 3 columnas iguales para la fila 2 (menú/lupa/carrito): a diferencia de flex + "order" (que dependía de que los 3 elementos pesaran lo mismo y se descolocaba si #site-navigation cambiaba de tamaño al abrir el menú), cada icono va a una columna fija por "grid-column", así su posición no se mueve pase lo que pase con sus vecinos. Padding/gap más ajustados que antes ("más estrecho"). */ .site-header { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; /* Aún más apretado: se mantienen las 2 filas (logo grande arriba, menú/lupa/carrito debajo) pero con menos aire para que el conjunto ocupe menos alto en total. */ gap: 0.2em 0.4em; padding: 0.25em 0.75em; } /* Contenedor pegajoso único para la barra negra + la cabecera (ver el porqué en el comentario grande de inc/topbar.php: antes cada una era "position: sticky" por su lado, y la cabecera necesitaba conocer por JavaScript la altura exacta de la barra negra para pegarse justo debajo -si esa medida no cuadraba al milímetro, quedaba un hueco o una superposición entre las dos, que es lo que se seguía viendo pese a quitar la transición-. Con las dos DENTRO de un mismo "sticky", van siempre pegadas la una a la otra sin ningún cálculo de por medio: aquí no puede desajustarse nada. */ .csb-sticky-wrap { position: sticky; top: 0; z-index: 210; } /* Header inteligente: 3 estados, según la dirección del scroll (los pone assets/js/mobile-header.js sobre ".csb-sticky-wrap"): - Arriba del todo (scroll = 0): sin clase, se ve todo -barra negra, logo y fila de iconos- en su sitio normal. - Bajando: ".csb-header-abajo" -> el bloque entero se desliza fuera de la pantalla (no se ve nada de la cabecera). - Subiendo (sin haber llegado arriba del todo): ".csb-header-compacto" -> el bloque se queda pegado arriba (sin trasladarse), pero dentro se ocultan la barra negra y la fila del logo (ver más abajo), dejando visible solo la fila de iconos (menú/lupa/carrito) como barra compacta -conserva el fondo/textura propios de ".site-header", no hace falta reproducirlos aparte-. Sin "transition" en "transform" a propósito: con "position: sticky", el elemento sigue ocupando su hueco en el documento aunque se mueva visualmente, así que animar el desplazamiento dejaba un fotograma a medio camino tapando solo una parte de sí mismo sobre el contenido de debajo -el "cortada a medias" que se veía antes-. Sin transición, el cambio es instantáneo: no hay fotograma intermedio que ver. */ .csb-sticky-wrap.csb-header-abajo { transform: translateY(-100%); } .csb-sticky-wrap.csb-header-compacto .csb-topbar, .csb-sticky-wrap.csb-header-compacto .csb-logo-mobile-link { display: none; } /* Logo de escritorio oculto (se ve el de inc/mobile-header.php); "Mi cuenta" no se usa en móvil; el carrito normal (texto, sin icono) tampoco -lo sustituye .csb-cart-mobile-link, con icono-. Con "body" delante para ganar en especificidad a las reglas base de ".csb-account-item"/etc. (que no van en media query, pero salen más abajo en el archivo y si no ganarían ellas). */ body .site-branding, body .csb-account-item, body #site-header-cart { display: none; } /* Fila 1: logo solo, centrado y grande, ocupando las 3 columnas (fuerza el salto de línea de la fila 2 de debajo). "grid-row" explícito en las 3 filas: si se deja que el grid las coloque solas (auto-placement), el orden real en el HTML (lupa antes que el nav) hace que caigan en filas distintas y queden desniveladas. */ /* El padding vertical deja la fila del logo con el mismo alto que tenía con el PNG antiguo (58px, que ya traía ese aire dentro de la imagen): la franja no crece, solo el logo. */ .csb-logo-mobile-link { grid-row: 1; grid-column: 1 / -1; display: flex; justify-content: center; padding: 6px 0; } /* logo-movil.png ya viene recortado al dibujo: el ancho que se ve es el del logo de verdad (antes ~164px de dibujo dentro de un PNG con mucho margen). Tope en % del ancho de pantalla para móviles estrechos. */ .csb-logo-mobile { display: block; width: min(290px, 76vw); height: auto; } /* Fila 2: menú (columna 1, izquierda) - lupa (columna 2, centro) - carrito (columna 3, derecha). */ #site-navigation { grid-row: 2; grid-column: 1; justify-self: start; width: auto; margin: 0; } .csb-search-toggle { grid-row: 2; grid-column: 2; justify-self: center; /* 44px mínimo de zona táctil (recomendación de accesibilidad táctil), aunque el icono en sí se quede en 20px. */ width: 44px; height: 44px; padding: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; } .csb-search-toggle .csb-icon { width: 20px; height: 20px; color: var(--csb-color-text); } .csb-cart-mobile-link { grid-row: 2; grid-column: 3; justify-self: end; position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .csb-cart-mobile-link .csb-icon { width: 20px; height: 20px; color: var(--csb-color-text); } .csb-cart-mobile-count { position: absolute; top: -0.2em; right: -0.2em; display: flex; align-items: center; justify-content: center; min-width: 1.3em; height: 1.3em; padding: 0 0.25em; border-radius: 999px; background-color: var(--csb-color-primary); color: #ffffff; font-size: 0.65rem; font-weight: 700; line-height: 1; text-align: center; box-shadow: 0 0 0 2px var(--csb-color-background); } /* Buscador (.site-search, con el buscador real de WooCommerce dentro): oculto hasta pulsar la lupa (assets/js/mobile-header.js), y cuando se muestra ocupa el ancho completo debajo de la fila (flujo normal, empuja el contenido, no se superpone a nada). */ .site-search { grid-row: 3; grid-column: 1 / -1; display: none; margin-top: 0.5em; } .site-search.csb-search-abierto { display: block; } /* Hamburguesa: en vez de pelear con el marco + rayitas que dibuja Storefront por defecto con CSS (border + pseudo-elementos, daba problemas visuales), se anula todo eso y se usa un icono SVG propio (assets/js/mobile-header.js lo inyecta dentro del botón, igual que ya se hace con la lupa y el carrito). El botón sigue siendo el mismo de Storefront (mismo id/clase), así que su clic y el toggle del menú (navigation.js) funcionan igual que siempre. */ button.menu-toggle { float: none; max-width: none; /* 44px mínimo de zona táctil. */ width: 44px; height: 44px; padding: 0; margin: 0; border: none; outline: none; background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; } /* Texto "Menú" original: se queda solo para lectores de pantalla. */ button.menu-toggle span:not(.csb-menu-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } button.menu-toggle::before, button.menu-toggle::after, button.menu-toggle span::before { content: none; } .csb-menu-icon { display: flex; align-items: center; justify-content: center; } .csb-menu-icon .csb-icon { width: 20px; height: 20px; color: var(--csb-color-text); } /* El menú, al abrirse, se sale de la fila y cubre el ancho completo debajo de la cabecera (si no, quedaría apretado en el hueco de la hamburguesa, que ahora es estrecho). */ .main-navigation.toggled .primary-navigation, .main-navigation.toggled .handheld-navigation { position: absolute; top: 100%; left: 0; width: 100%; max-height: none; background-color: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); z-index: 100; padding: 0.3em 0.75em; } /* Contenido del menú: por defecto Storefront deja muchísimo espacio en blanco entre enlaces, el texto queda pegado al borde (el enlace no lleva padding horizontal propio) y no diferencia visualmente el nivel principal del submenú. Aquí se aprieta el espaciado y se añaden separadores + un acento de color para dar estructura. OJO: el toggle de Storefront (navigation.js) le pone la clase "nav-menu" al PRIMER