/* Theme Name: Astra Child - A la Cucha Theme URI: https://tienda.alacucha.com Description: Child theme de Astra para la tienda A la Cucha (productos para mascotas). Incluye la paleta de marca y tipografías Fredoka One + Figtree. Author: A la Cucha Author URI: https://tienda.alacucha.com Template: astra Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-child */ /* ========================================================= A LA CUCHA — Variables de marca ========================================================= */ :root { --ac-verde-oscuro: #066248; /* títulos, texto */ --ac-verde-medio: #7ca982; /* bordes, botones secundarios */ --ac-verde-claro: #d4eac7; /* fondos de cards */ --ac-crema: #fef9e7; /* fondo general */ --ac-amarillo: #f4c542; /* CTAs, botones principales */ --ac-naranja: #b15016; /* acentos, ofertas */ --ac-fuente-titulo: 'Fredoka One', cursive; --ac-fuente-cuerpo: 'Figtree', sans-serif; } /* ========================================================= Emojis (🐾, 🛒, 🎁, etc.) — WordPress convierte los emoji a en navegadores/WebViews sin soporte nativo, con el CSS que los achica a 1em normalmente inyectado inline en el (print_emoji_styles()). Esa regla inline no siempre sobrevive la optimización de CSS de LiteSpeed Cache — sin ella, la imagen se ve a su tamaño real (~72px), gigante y sin achicarse en mobile. La repetimos acá en una hoja de estilos real (siempre se carga) para que ande siempre. ========================================================= */ img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } /* ========================================================= Tipografías ========================================================= */ body, button, input, select, textarea, .ast-container { font-family: var(--ac-fuente-cuerpo); } h1, h2, h3, h4, h5, h6, .site-title, .entry-title, .widget-title, .woocommerce-loop-product__title, .product_title { font-family: var(--ac-fuente-titulo); color: var(--ac-verde-oscuro); letter-spacing: .2px; } /* ========================================================= Fondos y colores base ========================================================= */ body { background-color: var(--ac-crema); color: var(--ac-verde-oscuro); } a { color: var(--ac-verde-oscuro); } a:hover, a:focus { color: var(--ac-naranja); } /* ========================================================= Botones — CTA principal (amarillo) ========================================================= */ .ast-button, button, input[type="submit"], .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: var(--ac-amarillo); color: var(--ac-verde-oscuro); border: none; border-radius: 999px; font-family: var(--ac-fuente-cuerpo); font-weight: 600; transition: background-color .2s ease, transform .1s ease; } .ast-button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background-color: var(--ac-naranja); color: #fff; } /* Botón secundario (verde medio) */ .woocommerce a.button.alt.disabled, .ac-btn-secundario, .woocommerce-message a.button { background-color: var(--ac-verde-medio); color: #fff; } /* ========================================================= Cards de producto (fondo verde claro) ========================================================= */ .woocommerce ul.products li.product, .wc-block-grid__product { background-color: var(--ac-verde-claro); border: 1px solid var(--ac-verde-medio); border-radius: 16px; padding: 14px; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ac-verde-oscuro); font-weight: 700; } /* Precio de oferta / etiqueta sale (naranja) */ .woocommerce span.onsale { background-color: var(--ac-naranja); color: #fff; border-radius: 999px; } ins, .woocommerce del + ins { color: var(--ac-naranja); text-decoration: none; } /* ========================================================= Encabezado y navegación ========================================================= */ .main-header-bar { background-color: var(--ac-crema); border-bottom: 2px solid var(--ac-verde-claro); } .main-header-menu a, .ast-builder-menu a { color: var(--ac-verde-oscuro); } .main-header-menu a:hover { color: var(--ac-naranja); } /* --------------------------------------------------------------- Desktop (>=922px): header en DOS filas. Fila 1 (navbar principal): solo logo (izq) + carrito y perfil (der). Fila 2 (.ac-subnav): el menú principal, centrado y con tipografía menor. En mobile (<=921px) NO se toca nada (Astra usa otro markup). --------------------------------------------------------------- */ @media (min-width: 922px) { /* Navbar principal: ocultar los links del menú (quedan carrito + perfil). */ .ast-main-header-wrap .main-header-menu > li.menu-item:not(.ac-cart-menu):not(.ac-user-menu) { display: none; } /* Separar el carrito del perfil (un espacio, como entre menús). */ .ast-main-header-wrap .ac-cart-menu { margin-right: 22px; } /* Pequeño margen inferior del navbar principal. */ .ast-main-header-wrap.main-header-bar-wrap { margin-bottom: 6px; } } /* Segunda barra de menús (debajo del navbar) — solo desktop. */ .ac-subnav { background: var(--ac-crema); border-bottom: 2px solid var(--ac-verde-claro); } .ac-subnav-inner { max-width: 1200px; margin: 0 auto; padding: 2px 20px; } .ac-subnav-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; } .ac-subnav-menu li { margin: 0; } .ac-subnav-menu a { display: block; padding: 7px 4px; color: var(--ac-verde-oscuro); font-family: var(--ac-fuente-cuerpo); font-weight: 600; font-size: 0.9rem; /* tipografía del menú más pequeña */ line-height: 1.2; white-space: nowrap; } .ac-subnav-menu a:hover, .ac-subnav-menu a:focus { color: var(--ac-naranja); } /* En mobile no hay segunda barra: el menú sigue en el navbar/hamburguesa. */ @media (max-width: 921px) { .ac-subnav { display: none; } } /* Footer — mismo color que el navbar (crema + texto verde, hover naranja) */ .site-footer, .footer-sml-layout, .site-primary-footer-wrap, .ast-small-footer { background-color: var(--ac-crema); color: var(--ac-verde-oscuro); border-top: 2px solid var(--ac-verde-claro); } /* Astra (footer builder) fuerza el fondo de la fila inferior a blanco (--ast-global-color-4) vía .site-below-footer-wrap[data-section=...]. Lo igualamos al navbar (crema) con un selector más específico que el suyo. */ .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] { background-color: var(--ac-crema); } .site-footer { margin-top: 48px; } .site-footer a { color: var(--ac-verde-oscuro); } .site-footer a:hover { color: var(--ac-naranja); } /* ========================================================= Mensajes / notices de WooCommerce ========================================================= */ .woocommerce-message, .woocommerce-info { border-top-color: var(--ac-verde-medio); } .woocommerce-error { border-top-color: var(--ac-naranja); } /* ========================================================= Ícono de usuario en el header ========================================================= */ .ac-user-menu > a { color: var(--ac-verde-oscuro) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .ac-user-menu > a:hover, .ac-user-menu > a:focus { color: var(--ac-naranja) !important; } /* En mobile, centrar el ícono de usuario (por defecto queda a la derecha) */ @media (max-width: 921px) { .ac-user-menu { text-align: center !important; } .ac-user-menu > a { display: flex !important; width: 100%; justify-content: center !important; } } /* ========================================================= Header: ocultar el título del sitio (solo logo) ========================================================= */ .site-title { display: none !important; } /* ========================================================= Barra de leyenda / aviso (debajo del navbar, todas las páginas) ========================================================= */ .ac-leyenda { background: var(--ac-amarillo); color: var(--ac-verde-oscuro); text-align: center; font-family: var(--ac-fuente-cuerpo); font-weight: 600; font-size: 0.98rem; line-height: 1.35; padding: 10px 16px; } .ac-leyenda a { color: var(--ac-naranja); text-decoration: underline; } /* Variante ubicada sobre el footer */ .ac-leyenda-footer { margin-top: 24px; } .ac-leyenda-footer a { color: var(--ac-verde-oscuro); } /* ========================================================= Banner (imagen) sobre el footer — se muestra COMPLETO (sin recorte ni zoom), centrado, con tope de 200px de alto. La imagen mantiene su proporción natural y nunca supera el ancho del contenedor. ========================================================= */ .ac-banner-footer { width: 100%; text-align: center; line-height: 0; /* elimina el espacio fantasma bajo la imagen */ } .ac-banner-footer-img { display: inline-block; width: auto; /* respeta la proporción de la imagen */ height: auto; max-width: 100%; /* nunca más ancha que el contenedor */ max-height: 200px; /* tope de alto: cinta finita */ margin: 0 auto; /* centrada */ } /* Descripción debajo de cada método de envío */ .ac-ship-desc { display: block; color: var(--ac-verde-medio); font-weight: 400; font-size: 0.82rem; margin-top: 2px; } /* ========================================================= Imágenes de cards de producto: bordes redondeados ========================================================= */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img, ul.products li.product a img, .wc-block-grid__product-image img, .woocommerce div.product div.images img { border-radius: 12px; } /* Imagen de card (LISTADOS): recuadro CUADRADO UNIFORME — mismo tamaño en TODAS las cards, con la imagen COMPLETA centrada adentro (contain, nunca recorta). Mediana y responsive. El single de producto NO se toca (ahí la imagen se ve grande/completa para abrir en el "show"). !important para ganarle al CSS de Astra (li.product a img { height:auto }). */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img, ul.products li.product a img, .wc-block-grid__product-image img { display: block !important; width: 100% !important; max-width: 200px; aspect-ratio: 1 / 1 !important; height: auto !important; margin: 0 auto 12px !important; object-fit: contain !important; background: #fff; padding: 8px; box-sizing: border-box; border-radius: 12px; } /* Pantallas grandes/TV: cuadrado apenas más grande, sin exagerar */ @media (min-width: 1600px) { .woocommerce ul.products li.product img, ul.products li.product a img, .wc-block-grid__product-image img { max-width: 240px; } } /* ========================================================= Selector de medidas por kg en cards de producto variable ========================================================= */ /* Ocultar el rango de precio por defecto en las cards variables (se muestra el del kg elegido) */ ul.products li.product.product-type-variable .price { display: none; } .ac-peso { margin-top: 10px; } .ac-peso-opts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .ac-peso-opt { position: relative; } .ac-peso-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .ac-peso-opt span { display: inline-block; max-width: 170px; padding: 4px 12px; border: 2px solid var(--ac-verde-medio); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ac-verde-oscuro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .ac-peso-opt input:checked + span { background: var(--ac-verde-oscuro); color: #fff; border-color: var(--ac-verde-oscuro); } .ac-peso-price { font-family: var(--ac-fuente-titulo); color: var(--ac-verde-oscuro); font-size: 20px; margin: 10px 0 6px; } /* Miniaturas en tablas de carrito */ .woocommerce table.shop_table .product-thumbnail img, .woocommerce td.product-thumbnail img { border-radius: 10px; } /* ========================================================= Carrito vacío: sin ícono + carrusel de cards chicas ========================================================= */ .wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before, .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { content: none !important; display: none !important; } .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-family: var(--ac-fuente-titulo); color: var(--ac-verde-oscuro); } .ac-empty-cart-subt { font-family: var(--ac-fuente-titulo); color: var(--ac-verde-oscuro); margin-top: 18px; } /* Grilla: al menos 2 por fila (4 en desktop) */ .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 4px 2px 12px; overflow: visible; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { width: auto !important; margin: 0 !important; padding: 10px !important; background: var(--ac-verde-claro); border: 1px solid var(--ac-verde-medio); border-radius: 14px; text-align: center; } /* Desktop: carrusel horizontal (uno al lado del otro) */ @media (min-width: 768px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { display: flex !important; flex-wrap: nowrap; grid-template-columns: none; overflow-x: auto; gap: 16px; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; justify-content: flex-start; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { flex: 0 0 185px; width: 185px !important; scroll-snap-align: start; } } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { border: 2px solid var(--ac-amarillo); border-radius: 10px; max-width: 100%; height: auto; } /* Quitar el cartelito "Oferta" en el carrito vacío */ .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-onsale, .wp-block-woocommerce-empty-cart-block .wc-block-components-product-sale-badge, .wp-block-woocommerce-empty-cart-block .onsale { display: none !important; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { font-size: 0.9rem; color: var(--ac-verde-oscuro); } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .button { font-size: 0.8rem; padding: 6px 12px; } /* Botón "Ver más productos" centrado */ .ac-ver-mas { margin-top: 14px; } /* ========================================================= Carrito vacío (carrito CLÁSICO) — título, carrusel y botón ========================================================= */ .woocommerce-cart .cart-empty { font-family: var(--ac-fuente-titulo); color: var(--ac-verde-oscuro); font-size: 1.4rem; text-align: center; background: transparent; border: none; padding: 8px 0 0; } .woocommerce-cart .cart-empty.woocommerce-info::before { content: none; } /* Usamos nuestro propio botón */ .woocommerce-cart .return-to-shop { display: none; } .ac-empty-cart-classic { text-align: center; margin-top: 6px; } .ac-empty-cart-subt { font-family: var(--ac-fuente-titulo); color: var(--ac-verde-oscuro); margin: 6px 0 16px; } .ac-ver-mas-wrap { margin-top: 18px; } .ac-empty-cart-classic ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; list-style: none; } .ac-empty-cart-classic ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 10px !important; background: var(--ac-verde-claro); border: 1px solid var(--ac-verde-medio); border-radius: 14px; text-align: center; } .ac-empty-cart-classic ul.products li.product img { border: 2px solid var(--ac-amarillo); border-radius: 10px; } .ac-empty-cart-classic ul.products li.product .onsale { display: none !important; } @media (min-width: 768px) { .ac-empty-cart-classic ul.products { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .ac-empty-cart-classic ul.products li.product { flex: 0 0 185px; width: 185px !important; scroll-snap-align: start; } } /* Caja "Calcular envío" del carrito clásico (CP) */ .woocommerce .cart_totals .shipping-calculator-button { color: var(--ac-verde-oscuro); font-weight: 600; } .woocommerce .cart_totals .shipping-calculator-form .button { width: 100%; } /* ========================================================= Margen lateral general (que el contenido no quede pegado) ========================================================= */ @media (max-width: 768px) { .ast-container { padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================= Checkout — adaptación mobile ========================================================= */ @media (max-width: 768px) { .woocommerce-checkout #customer_details.col2-set, .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; max-width: 100%; } .woocommerce-checkout #customer_details .col-2 { margin-top: 10px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { width: 100% !important; float: none !important; margin-right: 0; } .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { width: 100% !important; float: none !important; padding-left: 0; } .woocommerce-checkout #payment .place-order .button, .woocommerce-checkout #place_order { width: 100%; } .woocommerce-checkout table.shop_table, .woocommerce-checkout .cart_totals table { font-size: 0.9rem; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { padding: 0; } } /* Checkout en bloque: margen izquierdo a todo el contenido */ .wp-block-woocommerce-checkout { padding-left: 28px; padding-right: 16px; box-sizing: border-box; } @media (max-width: 768px) { .wp-block-woocommerce-checkout { padding-left: 18px; padding-right: 18px; } } /* ========================================================= Mi cuenta — adaptación mobile ========================================================= */ @media (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 18px; } .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ac-verde-claro); border-radius: 12px; overflow: hidden; } .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--ac-verde-claro); margin: 0; } .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 13px 16px; color: var(--ac-verde-oscuro); font-weight: 600; } .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--ac-verde-claro); } .woocommerce-account table.shop_table, .woocommerce-account .woocommerce-orders-table { font-size: 0.88rem; } /* Que los formularios de Mi cuenta no desborden */ .woocommerce-account .woocommerce-MyAccount-content form .form-row { width: 100%; } } /* ========================================================= Banner / hero de inicio (editable) ========================================================= */ .ac-hero { width: 100%; margin-top: 18px; margin-bottom: 8px; } .ac-hero-img { width: auto; height: auto; /* mantiene la proporción de la imagen */ max-width: 100%; max-height: 300px; /* el banner ocupa como máximo 300px de alto */ margin: 0 auto; /* centrada */ display: block; border-radius: 18px; } /* Animación como banner: viewBox 800x400 (2:1) -> 600px de ancho = 300px de alto. */ .ac-hero-anim .csa-wrap { max-width: 600px; } .ac-hero-fallback { width: 100%; height: 350px; background: var(--ac-verde-oscuro); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; box-sizing: border-box; } .ac-hero-fallback h1 { font-family: var(--ac-fuente-titulo); color: var(--ac-amarillo); font-size: 2.4rem; line-height: 1.15; margin: 0 0 12px; } .ac-hero-fallback p { font-family: var(--ac-fuente-cuerpo); color: var(--ac-crema); font-size: 1.3rem; margin: 0; } @media (max-width: 768px) { .ac-hero-fallback { height: 200px; } .ac-hero-fallback h1 { font-size: 1.6rem; } .ac-hero-fallback p { font-size: 1.05rem; } } /* ========================================================= Footer: colores del crédito ========================================================= */ .ast-footer-copyright, .ast-footer-copyright p { color: var(--ac-verde-oscuro) !important; } .ast-footer-copyright a { color: var(--ac-verde-oscuro) !important; } .ast-footer-copyright a:hover { color: var(--ac-naranja) !important; text-decoration: underline; } /* En mobile no hay footer: la bottom nav queda pegada abajo y lo reemplaza. */ @media (max-width: 768px) { .site-footer { display: none; } } /* ========================================================= Carrito en el header + badge ========================================================= */ .ac-cart-menu { position: relative; } .ac-cart-link { position: relative; display: inline-flex; align-items: center; color: var(--ac-verde-oscuro) !important; font-size: 1.15rem; } .ac-cart-link:hover, .ac-cart-link:focus { color: var(--ac-naranja) !important; } .ac-cart-count { position: absolute; top: -8px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; background: var(--ac-amarillo); color: var(--ac-verde-oscuro); border-radius: 999px; font-family: var(--ac-fuente-cuerpo); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .ac-cart-count.ac-empty { display: none; } /* ========================================================= Mini-carrito (hover, solo desktop) ========================================================= */ .ac-mini-cart { position: absolute; top: 100%; right: 0; width: 300px; background: #fff; border: 1px solid var(--ac-verde-medio); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 14px; z-index: 9990; display: none; font-family: var(--ac-fuente-cuerpo); } .ac-cart-menu:hover .ac-mini-cart { display: block; } .ac-mini-cart-items { list-style: none; margin: 0 0 10px; padding: 0; max-height: 280px; overflow-y: auto; } .ac-mini-cart-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ac-verde-claro); } .ac-mci-img img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; } .ac-mci-info { display: flex; flex-direction: column; font-size: 13px; } .ac-mci-name { color: var(--ac-verde-oscuro); font-weight: 600; } .ac-mci-qty { color: #777; } .ac-mini-cart-total { display: flex; justify-content: space-between; align-items: center; color: var(--ac-verde-oscuro); font-size: 15px; margin: 10px 0; } .ac-mini-cart-btns { display: flex; gap: 8px; } .ac-mini-cart-btns a { flex: 1; text-align: center; border-radius: 999px; padding: 9px 10px; text-decoration: none; font-weight: 600; font-size: 13px; } .ac-btn-cart { background: var(--ac-verde-medio); color: #fff !important; } .ac-btn-checkout { background: var(--ac-amarillo); color: var(--ac-verde-oscuro) !important; } .ac-mini-cart-empty { text-align: center; color: var(--ac-verde-oscuro); margin: 6px 0; } /* ========================================================= Bottom navigation (solo mobile < 768px) ========================================================= */ .ac-bottomnav { display: none; } @media (max-width: 767px) { .ac-mini-cart { display: none !important; } .ac-bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--ac-crema); border-top: 2px solid var(--ac-verde-claro); box-shadow: 0 -2px 10px rgba(0, 0, 0, .08); z-index: 9999; } .ac-bottomnav .ac-bn-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0 7px; color: var(--ac-verde-oscuro); text-decoration: none; font-family: var(--ac-fuente-cuerpo); font-size: 11px; line-height: 1.2; } .ac-bottomnav .ac-bn-link:hover, .ac-bottomnav .ac-bn-link:focus, .ac-bottomnav .ac-bn-link.active { color: var(--ac-amarillo); } .ac-bn-ico { position: relative; font-size: 20px; } .ac-bn-lbl { margin-top: 2px; } /* El badge dentro de la barra móvil reutiliza .ac-cart-count */ .ac-bn-ico .ac-cart-count { top: -6px; right: -14px; } /* Evitar que la barra tape el contenido */ body { padding-bottom: 64px !important; } } /* ========================================================= Mi cuenta — menú plegable (barra) en 2 columnas (desktop) y 1 columna (mobile). Distinto del hamburguesa del navbar. La estructura la arma inc/cuenta-menu.php (JS). Sin JS, WooCommerce muestra el menú normal (fallback). ========================================================= */ /* Cuando el JS mejora el nav: layout apilado a lo ancho (barra arriba, contenido abajo) tanto en desktop como en mobile. */ .woocommerce-account .woocommerce-MyAccount-navigation.ac-acct-enhanced { float: none !important; width: 100% !important; margin-bottom: 14px; } .woocommerce-account .woocommerce-MyAccount-navigation.ac-acct-enhanced ~ .woocommerce-MyAccount-content { float: none !important; width: 100% !important; } /* La barra que despliega el menú */ .ac-acct-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--ac-verde-oscuro); color: #fff; border: none; border-radius: 12px; padding: 13px 18px; font-family: var(--ac-fuente-titulo); font-size: 1rem; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: background 0.2s ease; } .ac-acct-toggle:hover { background: #054f3a; } .ac-acct-toggle .ac-acct-toggle-ico { font-size: 1.05rem; } .ac-acct-toggle .ac-acct-toggle-txt { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-acct-toggle .ac-acct-toggle-chev { margin-left: auto; font-size: 0.85rem; transition: transform 0.25s ease; } .ac-acct-enhanced.ac-open .ac-acct-toggle .ac-acct-toggle-chev { transform: rotate(180deg); } /* Panel plegable */ .ac-acct-panel { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height 0.32s ease, opacity 0.22s ease, margin-top 0.32s ease; } .ac-acct-enhanced.ac-open .ac-acct-panel { max-height: 1600px; opacity: 1; margin-top: 12px; } /* Dos columnas en desktop */ .ac-acct-cols { display: flex; gap: 14px; } .ac-acct-col { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; border: 1px solid var(--ac-verde-claro); border-radius: 12px; overflow: hidden; align-self: flex-start; background: #fff; } .ac-acct-col li { margin: 0; border-bottom: 1px solid var(--ac-verde-claro); } .ac-acct-col li:last-child { border-bottom: none; } .ac-acct-col li a { display: block; padding: 12px 15px; color: var(--ac-verde-oscuro); font-weight: 600; text-decoration: none; } .ac-acct-col li a:hover { background: var(--ac-crema); } .ac-acct-col li.is-active a { background: var(--ac-verde-claro); } /* Botón de cerrar sesión, a lo ancho debajo de las columnas */ .ac-acct-col--logout { list-style: none; margin: 12px 0 0; padding: 0; border: none !important; } .ac-acct-col--logout li { border: none !important; margin: 0; } .ac-acct-col--logout a { display: block; text-align: center; padding: 11px; border-radius: 10px; background: var(--ac-crema); color: var(--ac-naranja); font-weight: 700; text-decoration: none; } .ac-acct-col--logout a:hover { background: #fdeccb; } /* Mobile: una sola columna */ @media (max-width: 768px) { .ac-acct-cols { flex-direction: column; gap: 10px; } } /* ========================================================= Descuento en cards de producto (selector de kg) ========================================================= */ .ac-peso-price .ac-peso-reg { color: #8a9a90; font-size: 0.85em; margin-right: 2px; } .ac-peso-price .ac-peso-now { color: var(--ac-naranja); font-weight: 700; } .ac-badge-desc { display: inline-block; background: var(--ac-naranja); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 999px; vertical-align: middle; } /* ========================================================= Flujo de compra — carrito + checkout ========================================================= */ /* Carrito: encabezado del calculador de envío */ .ac-calc-envio-head { background: var(--ac-verde-claro); color: var(--ac-verde-oscuro); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; margin: 0 0 10px; } /* Aviso "Entrega en 24 horas" — ficha de producto y páginas de categoría (Ropa/Juguetes/Accesorios; Alimentos sigue el reparto martes/viernes). */ .ac-entrega-24h { display: inline-block; background: var(--ac-verde-claro); color: var(--ac-verde-oscuro); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; margin: 10px 0; } /* Carrito: leyenda de registro debajo de los totales */ .ac-cart-registro { margin-top: 14px; background: var(--ac-crema); border: 1px dashed var(--ac-amarillo); border-radius: 12px; padding: 12px 14px; color: var(--ac-verde-oscuro); font-size: 0.92rem; line-height: 1.5; } .ac-cart-registro-link { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--ac-naranja); text-decoration: none; } /* Carrito vacío: aviso sin ofertas */ .ac-empty-cart-noof { color: var(--ac-verde-medio); font-style: italic; } /* ========================================================= Checkout clásico — una sola columna, centrado ========================================================= */ .woocommerce-checkout form.checkout.woocommerce-checkout { max-width: 640px; margin: 0 auto; /* centrado (margen izq/der automático) */ } .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details, .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { width: 100% !important; float: none !important; margin-left: 0; margin-right: 0; } /* Una sola dirección: ocultamos "enviar a una dirección diferente" */ .woocommerce-checkout .woocommerce-shipping-fields { display: none; } /* Nota del pedido entre el total y el pago */ .ac-checkout-nota { margin: 16px 0; } .ac-checkout-nota label { display: block; font-weight: 700; color: var(--ac-verde-oscuro); margin-bottom: 6px; } .ac-checkout-nota textarea { width: 100%; border: 1px solid var(--ac-verde-claro); border-radius: 10px; padding: 10px; box-sizing: border-box; } /* Encabezado "Tu pedido" con un poco de aire */ .woocommerce-checkout #order_review_heading { margin-top: 22px; } /* ========================================================= Cards: precio centrado (simple y variable por kg) ========================================================= */ .woocommerce ul.products li.product .price { display: block; text-align: center; } .ac-peso, .ac-peso-price { text-align: center; } /* ========================================================= Home — barra de orden de los destacados ========================================================= */ .ac-sort-bar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0 4px; } .ac-sort-select { font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 0.95rem; color: #066248; background: #fff; border: 2px solid #7ca982; border-radius: 999px; padding: 7px 16px; cursor: pointer; } .ac-sort-select:focus { outline: none; border-color: #066248; } /* ========================================================= Home — carrusel de productos destacados Scroll horizontal (swipe). Mobile ~2,5 visibles, desktop ~5-6. ========================================================= */ .ac-featured-carousel { position: relative; } .ac-featured-carousel ul.products { display: flex !important; flex-wrap: nowrap !important; gap: 14px; margin: 0 !important; padding: 4px 2px 16px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ac-verde-medio) transparent; } /* Matar el clearfix/float del grid de WooCommerce */ .ac-featured-carousel ul.products::before, .ac-featured-carousel ul.products::after { display: none !important; content: none !important; } .ac-featured-carousel ul.products li.product { flex: 0 0 auto !important; float: none !important; width: 40% !important; /* mobile: ~2,5 productos a la vista */ max-width: 40% !important; margin: 0 !important; scroll-snap-align: start; } .ac-featured-carousel ul.products::-webkit-scrollbar { height: 8px; } .ac-featured-carousel ul.products::-webkit-scrollbar-thumb { background: var(--ac-verde-claro); border-radius: 999px; } @media (min-width: 600px) { .ac-featured-carousel ul.products li.product { width: 30% !important; /* ~3 */ max-width: 30% !important; } } @media (min-width: 992px) { .ac-featured-carousel ul.products li.product { width: 18% !important; /* ~5-6 */ max-width: 18% !important; } } /* Flechas de navegación (las inserta el JS; visibles en desktop al hover) */ .ac-fc-arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--ac-verde-oscuro); color: #fff; border: none; font-size: 22px; line-height: 1; cursor: pointer; z-index: 3; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .ac-fc-arrow:hover { background: #054f3a; } .ac-fc-prev { left: -6px; } .ac-fc-next { right: -6px; } @media (min-width: 992px) { .ac-featured-carousel:hover .ac-fc-arrow { display: flex; } } /* Medida (kg) agotada: pill deshabilitada, no clickeable */ .ac-peso-opt--out { opacity: .5; } .ac-peso-opt--out span { border-style: dashed; text-decoration: line-through; color: #9aa39e; cursor: not-allowed; } .ac-peso-opt--out input { cursor: not-allowed; } /* Estado de stock en la página del producto (reemplaza el rango de precios) */ .ac-stock-ok, .ac-stock-no { display: inline-flex; align-items: center; gap: .35em; /* Tamaño propio y acotado: no hereda el font-size grande de .price. */ font-size: clamp(.95rem, 3.2vw, 1.15rem); line-height: 1.3; } .ac-stock-ok { color: var(--ac-verde-oscuro); font-weight: 700; } .ac-stock-no { color: var(--ac-naranja); font-weight: 700; } /* El tick: forzar presentación de TEXTO (no emoji a color/gigante) y tamaño 1em. */ .ac-stock-ico { font-size: 1em; line-height: 1; font-variant-emoji: text; } /* Mobile: medidas (kg) en una sola fila — achican la tipografía para entrar, SIN scroll lateral. */ @media (max-width: 600px) { .ac-peso-opts { flex-wrap: nowrap; justify-content: center; gap: 3px; overflow: visible; } .ac-peso-opt { flex: 0 1 auto; min-width: 0; } .ac-peso-opt span { display: block; max-width: 24vw; padding: 2px 5px; font-size: 10px; border-width: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ========================================================= Buscador de productos (lupita) — debajo del título ========================================================= */ .ac-busca-wrap { display: flex; justify-content: center; width: 100%; margin: 6px 0 20px; } .ac-busca { display: flex; width: 100%; max-width: 520px; background: #fff; border: 2px solid var(--ac-verde-claro); border-radius: 999px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .ac-busca input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 18px; font-size: 15px; color: var(--ac-verde-oscuro); outline: none; } .ac-busca input[type="search"]::placeholder { color: var(--ac-verde-medio); } .ac-busca button { border: 0; background: var(--ac-verde-oscuro); color: #fff; padding: 0 20px; font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .ac-busca button:hover { background: #054f3a; } @media (max-width: 768px) { .ac-busca-wrap { margin: 4px 0 16px; } .ac-busca input[type="search"] { padding: 10px 14px; font-size: 14px; } } /* ============================================================ PUNTOS CUCHA — badge navbar, sección Mi cuenta y promo home ============================================================ */ /* Pill de puntos en el navbar (usuarios logueados) */ .ac-pts-pill { display: inline-flex; align-items: center; gap: 4px; background: #f4c542; color: #066248 !important; font-size: 13px; font-weight: 700; line-height: 1; padding: 6px 12px; border-radius: 999px; text-decoration: none !important; white-space: nowrap; margin-right: 10px; box-shadow: 0 1px 3px #0002; } .ac-pts-pill:hover { background: #ffd75e; } .ac-pts-pill--float { position: fixed; bottom: 14px; left: 14px; z-index: 9999; } @media (max-width: 768px) { .ac-pts-pill { font-size: 12px; padding: 5px 9px; margin-right: 6px; } } /* Sección Mi cuenta → Puntos Cucha */ .ac-ptsc-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #eef6e9; border: 2px solid #cfe3c4; border-radius: 14px; padding: 16px 20px; } .ac-ptsc-saldo { background: #066248; color: #fff; border-radius: 12px; padding: 10px 22px; text-align: center; } .ac-ptsc-saldo-num { display: block; font-family: 'Fredoka One', cursive; font-size: 34px; line-height: 1.1; color: #f4c542; } .ac-ptsc-saldo-lbl { font-size: 12px; opacity: .9; } .ac-ptsc-como { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .ac-ptsc-paso { flex: 1 1 180px; background: #fff; border: 1px solid #cfe3c4; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #33463c; } .ac-ptsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .ac-ptsc-card { border: 1px solid #cfe3c4; border-radius: 12px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; } .ac-ptsc-card-nombre { font-size: 13px; font-weight: 600; color: #33463c; flex: 1; } .ac-ptsc-card-pts { font-weight: 800; color: #066248; } .ac-ptsc-btn { width: 100%; background: #066248; color: #fff; border: 0; border-radius: 999px; padding: 8px 0; font-weight: 700; cursor: pointer; } .ac-ptsc-btn:hover { background: #0a7a5a; } .ac-ptsc-btn--off { background: #e7ece8; color: #8a9a90; cursor: not-allowed; font-size: 12px; } /* Promo Puntos Cucha al final de la home */ .ac-puntos-promo { background: #066248; border-radius: 18px; text-align: center; padding: 34px 22px; margin: 40px auto 10px; max-width: 900px; } .ac-puntos-promo h2 { font-family: 'Fredoka One', cursive; color: #f4c542; margin: 0 0 10px; } .ac-puntos-promo p { color: #eaf5ee; max-width: 640px; margin: 0 auto 18px; font-size: 16px; } .ac-puntos-btn { display: inline-block; background: #f4c542; color: #066248 !important; font-weight: 800; padding: 12px 28px; border-radius: 999px; text-decoration: none !important; } .ac-puntos-btn:hover { background: #ffd75e; } @media (max-width: 600px) { .ac-ptsc-hero { flex-direction: column; align-items: stretch; text-align: center; } .ac-puntos-promo { padding: 26px 14px; } } @media (max-width: 768px) { .ac-ptsc-publico { margin-top: 22px; } } /* ========================================================= Banner "Puntos Cucha" (home) — imagen editable que reemplaza la sección promocional. Se muestra COMPLETA (sin recorte), centrada. ========================================================= */ .ac-banner-puntos { width: 100%; max-width: 900px; margin: 36px auto 10px; text-align: center; line-height: 0; } .ac-banner-puntos-img { width: auto; height: auto; max-width: 100%; max-height: 320px; margin: 0 auto; display: block; border-radius: 18px; } .ac-banner-puntos-link { display: inline-block; line-height: 0; } /* Carrito: "Usar Puntos Cucha" (descuento en productos destacados) */ .ac-cart-puntos { margin-bottom: 14px; background: var(--ac-verde-claro); border: 1px solid var(--ac-verde-medio); border-radius: 12px; padding: 12px 14px; color: var(--ac-verde-oscuro); font-size: 0.92rem; line-height: 1.5; } .ac-cart-puntos-info { margin: 0 0 6px; } .ac-cart-puntos-aplicado { margin: 0 0 8px; font-weight: 700; } .ac-cart-puntos-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ac-cart-puntos-form label { font-size: 0.85rem; } .ac-cart-puntos-form input[type="number"] { width: 90px; padding: 6px 8px; border: 1px solid var(--ac-verde-medio); border-radius: 8px; } .ac-cart-puntos-btn { background: var(--ac-amarillo); color: var(--ac-verde-oscuro); border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; } .ac-cart-puntos-btn:hover { filter: brightness(0.96); } .ac-cart-puntos-btn--off { background: #fff; color: var(--ac-verde-oscuro); border: 1px solid var(--ac-verde-medio); } /* Página "Tu alimento ideal" (id 321): en mobile el título queda pegado al header, sin separación. En desktop ya tiene margen propio del tema. */ @media (max-width: 768px) { body.page-id-321 .entry-title { margin-top: 24px; } } /* Carrito: link "Cambiar dirección para comprobar envío" — por defecto de WooCommerce es un texto chico gris que pasa desapercibido. Se lo destaca como un botón/pill para que se note que ahí se puede recalcular el envío. */ .woocommerce-cart .shipping-calculator-button { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 0; background: var(--ac-verde-claro); color: var(--ac-verde-oscuro) !important; font-weight: 700; text-decoration: none !important; border: 1px solid var(--ac-verde-medio); } .woocommerce-cart .shipping-calculator-button:hover { background: var(--ac-verde-medio); color: #fff !important; }