/* Theme Name: Pequeingenio New Theme URI: https://pequeingenio.com/ Description: Tema hijo de Shoptimizer para pequeingenio.com. Aquí van las personalizaciones (estilos, plantillas y funciones) sin tocar el tema padre. Author: Carlos Campo Author URI: https://pequeingenio.com/ Template: shoptimizer Version: 0.1.0 Requires at least: 5.6 Requires PHP: 7.3 License: Proprietary - All Rights Reserved License URI: https://pequeingenio.com/ Text Domain: pequeingenio_new Copyright (c) 2026 Carlos Campo. Todos los derechos reservados. Software propietario desarrollado por Carlos Campo para uso exclusivo en el sitio web del cliente para el que fue contratado. No se autoriza su copia, redistribución, sublicencia, publicación, modificación por terceros, ingeniería inversa, ni su uso en ningún otro sitio o proyecto sin el consentimiento expreso y por escrito del titular de los derechos. El tema padre (Shoptimizer) y WordPress se utilizan bajo sus respectivas licencias originales (GPL v2+); este aviso aplica únicamente al código original contenido en este child theme. */ /* Las personalizaciones CSS van debajo de esta línea. */ /* ---------------------------------------------------------------------- Sobreheader (barra superior de aviso de envío gratuito) ---------------------------------------------------------------------- */ .pi-sobreheader { background: #f4a300; color: #fff; text-align: center; } .pi-sobreheader .col-full { padding-left: 1em; padding-right: 1em; } .pi-sobreheader p { margin: 0; padding: 0.65em 0; font-size: 0.9rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; } @media ( max-width: 768px ) { .pi-sobreheader p { font-size: 0.8rem; padding: 0.55em 0; } } /* ---------------------------------------------------------------------- Logo en móvil/tablet Shoptimizer genera inline (handle "shoptimizer-dynamic-style", a partir del Customizer "Mobile logo height", por defecto 22px) la regla del alto del logo por debajo de 992px, y la imprime DESPUÉS del CSS del hijo. A igual especificidad ganaría Shoptimizer, así que anteponemos "html" para subir la especificidad (0,3,3 > 0,3,2) y forzar 40px sin !important. Alternativa equivalente sin código: Apariencia > Personalizar > Cabecera móvil > "Mobile logo height" = 40. ---------------------------------------------------------------------- */ @media ( max-width: 992px ) { html body.theme-shoptimizer .site-header .custom-logo-link img, html body.wp-custom-logo .site-header .custom-logo-link img { height: 40px; } } /* ---------------------------------------------------------------------- Barra de búsqueda (widget WooCommerce product search en la cabecera) Solo estilos: NO se cambia el texto ni el placeholder. El texto del botón "Buscar" se mantiene en el HTML (accesible) y solo se oculta visualmente para mostrar la lupa. Azules en variables -> ajustar aquí en una línea: --pi-search-bg : fondo claro del campo --pi-search-btn : botón ---------------------------------------------------------------------- */ :root { --pi-search-bg: #cfe5ee; --pi-search-text: #4a6b78; --pi-search-btn: #5b9bb6; --pi-search-btn-hover: #4d889f; --pi-search-radius: 30px; } html .site-search .woocommerce-product-search { position: relative; display: flex !important; align-items: center; gap: 2px; background: var(--pi-search-bg) !important; border: 0 !important; border-radius: var(--pi-search-radius) !important; padding: 4px 4px 4px 8px; box-shadow: none !important; } /* Neutraliza posibles iconos decorativos del tema padre */ html .site-search .woocommerce-product-search::before, html .site-search .woocommerce-product-search::after { content: none !important; } html .site-search .woocommerce-product-search .search-field { flex: 1 1 auto; min-width: 0; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: var(--pi-search-text) !important; padding: 10px 14px !important; font-size: 0.95rem; } html .site-search .woocommerce-product-search .search-field::placeholder { color: var(--pi-search-text) !important; opacity: 1; } html .site-search .woocommerce-product-search button, html .site-search .woocommerce-product-search button[type="submit"] { position: static !important; flex: 0 0 auto; width: 44px; height: 44px; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: calc(var(--pi-search-radius) - 7px) !important; background-color: var(--pi-search-btn) !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.5'%20y2='16.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; color: transparent !important; font-size: 0 !important; text-indent: -9999px; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease; } /* Si el tema mete un svg/i dentro del botón, lo ocultamos (usamos la lupa de fondo) */ html .site-search .woocommerce-product-search button svg, html .site-search .woocommerce-product-search button i { display: none !important; } html .site-search .woocommerce-product-search button:hover, html .site-search .woocommerce-product-search button:focus { background-color: var(--pi-search-btn-hover) !important; } /* Desplegable de resultados ajax (CommerceKit). CommerceKit lo inserta DENTRO del
con position:absolute. Al ser el form display:flex, su posición estática la calcula el flex y el panel se descoloca. Lo anclamos explícitamente debajo de la píldora (el form ya es position:relative) y forzamos ancho completo (CommerceKit fija un width en px por JS sobre results y suggestions). */ html .site-search .woocommerce-product-search .commercekit-ajs-results { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; z-index: 9999 !important; } html .site-search .woocommerce-product-search .commercekit-ajs-suggestions { width: 100% !important; left: 0 !important; } /* ---------------------------------------------------------------------- Footer de 3 columnas ---------------------------------------------------------------------- */ .pi-footer { padding: 3em 0 2em; } /* Alinear el footer con el contenedor Elementor de arriba (max-width 1140px, centrado) */ html footer.site-footer.pi-footer .col-full { max-width: 1140px; box-sizing: border-box; padding-left: 2em; padding-right: 2em; margin-left: auto; margin-right: auto; } /* El grid ocupa todo el ancho del col-full */ html footer.site-footer.pi-footer .pi-footer-grid { width: 100%; } /* Fondo y texto: alta especificidad (html footer.site-footer.pi-footer) para ganar al CSS inline del Customizer de Shoptimizer (footer.site-footer{background-color/color}), que se imprime después en el y pisaría a un simple `.pi-footer`. Ver memoria shoptimizer-dynamic-css-override. */ html footer.site-footer.pi-footer { background: #cfe5ee; color: #2b2b2b; } .pi-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; align-items: start; text-align: left; } .pi-footer-col .widget { margin-bottom: 1.5em; } .pi-footer-col .widget:last-child { margin-bottom: 0; } /* Cabeceras: el Customizer las pinta con `.site footer.site-footer .widget .widget-title` (0,4,1); prefijamos para superarla. */ html footer.site-footer.pi-footer .pi-footer-col .widget-title { font-size: 1.05em; margin: 0 0 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #3a7295; } .pi-footer-col ul { list-style: none; margin: 0; padding: 0; } .pi-footer-col ul li { margin: 0 0 0.5em; } /* Enlaces: el Customizer pinta `footer.site-footer a:not(.button)` (0,2,2); prefijamos para superarla y fijar el color oscuro del texto. */ html footer.site-footer.pi-footer .pi-footer-col ul li a { color: #2b2b2b; text-decoration: none; } html footer.site-footer.pi-footer .pi-footer-col ul li a:hover { text-decoration: underline; } /* Columna de redes sociales (SÍGUENOS): iconos en círculos teal. */ .pi-footer-social { display: flex; flex-wrap: wrap; gap: 0.75em; align-items: center; } /* Prefijo de alta especificidad también aquí: si no, el color de enlace del footer del Customizer pintaría el y, vía currentColor, el icono SVG. */ html footer.site-footer.pi-footer .pi-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #3a7295; color: #fff; transition: background 0.15s ease; } html footer.site-footer.pi-footer .pi-footer-social a:hover { background: #2c5870; color: #fff; } .pi-footer-social svg { width: 1.2em; height: 1.2em; fill: currentColor; } @media ( max-width: 768px ) { .pi-footer-grid { grid-template-columns: 1fr; gap: 1.5em; } } /* ---------------------------------------------------------------------- Logo-mark a 200px + menú a todo el ancho (barra de navegación) El logo-mark (logo que aparece en la barra de nav al hacer scroll/sticky) sale del Customizer "Sticky logo width" (por defecto 60px). Shoptimizer imprime ese ancho inline (handle dinámico de Kirki) DESPUÉS del CSS del hijo sobre `.is_stuck .logo-mark` (y el `margin-left` del menú que le deja hueco). A igual especificidad ganaría Shoptimizer, así que anteponemos `html` para subir especificidad (0,2,1 > 0,2,0) y forzar 200px sin !important. Alternativa equivalente sin código: Apariencia > Personalizar > ... > "Sticky logo width" = 200. Además, el menú principal pasa a flex con space-between para ocupar todo el ancho de la barra (primer ítem pegado a la izquierda, último a la derecha y el resto repartido). ---------------------------------------------------------------------- */ @media ( min-width: 993px ) { /* Logo-mark: 200px en vez de 60px, centrado verticalmente. .logo-mark es position:absolute; su bloque contenedor es .shoptimizer-primary-navigation.is_stuck (position:fixed). Lo anclamos al centro vertical de la barra (top:50% + translateY(-50%)) para que quede alineado con el menú sin depender del alto del logo. `left` se deja en auto: conserva su posición horizontal estática. */ html .is_stuck .logo-mark { width: 200px; top: 50%; transform: translateY(-50%); } html .is_stuck .logo-mark img { width: 100%; height: auto; } /* Hueco que el menú deja al logo absoluto cuando la barra es fija */ html .is_stuck .primary-navigation.with-logo .menu-primary-menu-container { margin-left: 200px; } /* Menú principal ocupando todo el ancho con space-between. El