/* Ajustes de integración con WordPress / GeneratePress.
   Este archivo es SOLO del servidor: no viene del prototipo. No cambia el diseño;
   neutraliza lo que GeneratePress pone por su cuenta (contenedores, fondos, barra lateral).
   Las capas 01 (naturaleza) y 02 (base) se cargan tal cual las entregó el diseño. */

/* Fondo "papel reciclado" (el elegido por defecto en el prototipo): en el prototipo lo da data-fondo="fibra" */
body.fondo-fibra { background-image: var(--nat-fondo-fibra); background-size: 420px 420px; }

/* GeneratePress pinta su propio fondo y colores; el diseño manda */
body, .site, .site-content, .content-area { background-color: transparent; }
body { background-color: var(--fondo-color); color: var(--tinta); }

/* Contenedor del contenido: equivale a main.contenedor del prototipo (1168 px, 24 px a los lados, 64 px arriba) */
#page.grid-container, .grid-container { max-width: none; }
.site-content { display: block; width: 100%; max-width: 1168px; margin: 0 auto; padding: 64px 24px 0; box-sizing: border-box; flex: 1 0 auto; }
.site-content .content-area { width: 100%; float: none; }
.separate-containers .site-main { margin: 0; }
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header {
  background: transparent; padding: 0; box-shadow: none; }

/* La página de la tienda no lleva barra lateral (se quita también por PHP) */
.site-content .is-right-sidebar, .site-content .is-left-sidebar, #right-sidebar, #left-sidebar { display: none; }

/* WooCommerce (woocommerce-layout.css y -smallscreen.css) fija la foto y la hoja de información al 48 % y las flota,
   con selectores que usan #content. GeneratePress tiene un elemento con id="content", así que esas reglas ganan
   a las del diseño (que esperaba un sitio sin #content). Se anulan aquí con el mismo #content.
   Verificado el 2026-09-30 en la ficha real: sin esto la foto y la hoja quedaban al 48 % de cada columna. */
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.images,
.woocommerce-page #content div.product div.summary { float: none; width: auto; clear: none; }

/* Parte 2. Botones del listado: WooCommerce fija `.woocommerce ul.products li.product .button {display:inline-block}`,
   que gana al `display:flex` del diseño y dejaba el botón sin el ícono (WhatsApp o bolsa) y con el texto a la izquierda. */
.woocommerce ul.products li.product .button { display: flex; }

/* Parte 2. "Desde" del precio de productos con variaciones: línea pequeña sobre la etiqueta naranja. */
.woocommerce .price .desde { display: block; margin: 0 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-osc); }

/* Parte 3. Lista "Por qué te va a gustar": el diseño pone un <svg class="icono"> dentro de cada <li>. Con el editor de bloques el <li>
   solo trae texto, así que el mismo ícono de hoja (del sprite del diseño, i-hoja) se dibuja como ::before. */
:root { --ico-hoja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-9 5-14 14-14 0 9-5 14-14 14z'/%3E%3Cpath d='M5 19l8-8'/%3E%3C/svg%3E"); }
.lista-hojas li:not(:has(.icono))::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; background: #2f8f4e;
  -webkit-mask: var(--ico-hoja) center / contain no-repeat; mask: var(--ico-hoja) center / contain no-repeat; }

/* Parte 3. El bloque "Grupo" de WordPress (tema clásico) envuelve su contenido en .wp-block-group__inner-container.
   Dentro de .dos-col ese contenedor sería el único hijo de la cuadrícula del diseño; con display:contents
   las dos hojas (.papel-simple) pasan a ser las columnas, como en el prototipo. */
.dos-col > .wp-block-group__inner-container { display: contents; }

/* ===== Móvil (probado en un marco de 390 px, 2026-09-30) ===== */

/* Listado: en pantalla chica WooCommerce (woocommerce-smallscreen.css) pone `ul.products[class*=columns-] li.product {float:left; width:48%}`.
   Con la cuadrícula del diseño ese 48 % se calcula sobre la celda y cada tarjeta quedaba a menos de la mitad de su ancho
   (71 px de 148), con los títulos partidos letra por letra. Se anula con el mismo selector. */
@media (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product { width: auto; float: none; clear: none; margin: 0; }
}

/* Ficha: el diseño no define cómo pasar a una columna en pantalla chica; la foto va arriba y la hoja de información debajo. */
@media (max-width: 820px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .woocommerce div.product div.images.woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
  .woocommerce div.product div.summary { grid-column: 1; grid-row: 2; margin: 0; }
}

/* Descripción de la ficha: las dos hojas (Por qué te va a gustar / Modo de uso) pasan a una columna en pantalla chica;
   el diseño no lo definía y la segunda se salía de la pantalla. */
@media (max-width: 820px) {
  .dos-col { grid-template-columns: minmax(0, 1fr); }
}

/* Ficha técnica: en pantalla chica pasa de 4 a 2 columnas (con 4 los rótulos se partían letra por letra). */
@media (max-width: 560px) {
  .woocommerce div.product .woocommerce-Tabs-panel dl.ficha,
  dl.ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Parte 4. Móvil: UNA columna de tarjetas de producto (decisión del responsable: así se ven más grandes).
   El diseño trae 2 columnas hasta 820 px y reduce tipografías a 560 px; aquí, desde 560 px hacia abajo, una columna y los tamaños de escritorio. */
@media (max-width: 560px) {
  .woocommerce ul.products.columns-4 { grid-template-columns: minmax(0, 1fr); padding-inline: 10px; gap: 48px; }
  .woocommerce ul.products.columns-4 li.product .frente { padding: 16px 16px 20px; }
  .woocommerce ul.products.columns-4 .woocommerce-loop-product__title { font-size: 1.3rem; }
  .woocommerce ul.products.columns-4 .price ins, .woocommerce ul.products.columns-4 .price > .woocommerce-Price-amount { font-size: 1.7rem; padding: 3px 14px 4px; }
  .woocommerce ul.products.columns-4 .button { font-size: 1rem; min-height: 52px; padding: 12px 20px; }
}

/* ===== Parte 5: categorías, búsqueda, páginas normales y 404 ===== */

/* Títulos de archivo y de página: los mismos de "Productos" (serif con subrayado naranja); el diseño solo los definía para sus secciones. */
.woocommerce .woocommerce-products-header__title, .woocommerce h1.page-title, .woocommerce .hoja-pagina .entry-title {
  display: inline-block; position: relative; font-family: var(--serif); font-weight: 700; font-size: 2.1rem; line-height: 1.15; margin: 0 0 30px; padding: 0 4px 8px; color: var(--tinta); }
.woocommerce .woocommerce-products-header__title::after, .woocommerce h1.page-title::after, .woocommerce .hoja-pagina .entry-title::after {
  content: ""; position: absolute; left: 0; right: -10px; bottom: 0; height: 9px; background: var(--naranja); transform: rotate(-.8deg); opacity: .9;
  clip-path: polygon(0 25%,18% 0,52% 20%,84% 0,100% 30%,97% 100%,60% 78%,30% 100%,3% 80%); }

/* Hoja de papel para páginas normales y la 404 */
.hoja-pagina { max-width: 860px; margin: 0 auto 40px; }
.hoja-pagina .frente { padding: 40px 44px 46px; }
.hoja-pagina .entry-content { font-size: 1.02rem; line-height: 1.65; }
.hoja-pagina .entry-content p { margin: 0 0 1em; }
.hoja-pagina .entry-content a:not(.button) { color: var(--azul-osc); }
.hoja-pagina .woocommerce-product-search { display: block; width: min(380px, 100%); }
.hoja-pagina .woocommerce-product-search .search-field { width: 100%; box-sizing: border-box; }
.botones-404 { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.woocommerce .botones-404 a.button { width: auto; flex: 0 1 auto; min-height: 50px; padding: 10px 24px; }
@media (max-width: 560px) {
  .hoja-pagina .frente { padding: 26px 20px 30px; }
  .woocommerce .botones-404 a.button { width: 100%; }
}

/* El <body> del diseño es una columna flexible y el contenedor #page de GeneratePress (.grid-container) tiene márgenes laterales
   automáticos: en una columna flexible eso lo encoge al ancho de su contenido (se veía en páginas con poco contenido, como una
   búsqueda sin resultados: título y aviso angostos y centrados). Se le fija el ancho completo. */
#page.site, .site.grid-container { width: 100%; }

/* Categorías: la madera ya no es un SVG que el navegador ajusta con `240px 100%` (con "meet": 240 x 140 px, alineado arriba); al ser
   una imagen se le da ese mismo tamaño exacto. El mosaico WebP es de 480 x 280 (el doble, para pantallas nítidas). */
.categorias a { background-size: 240px 140px, auto; }

/* ===== Parte 6: repaso en celular ===== */
/* Zonas tocables: medidas en marcos de 390 y 360 px; varios elementos quedaban por debajo de los 40 px (WCAG 2.2 pide al menos 24 px
   y se recomiendan 44 px). Se amplía la zona que responde al dedo sin cambiar el aspecto. */
@media (max-width: 820px) {
  .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-puntos button { position: relative; }
  .hero-puntos button::after { content: ""; position: absolute; inset: -14px -4px; }
  .site-footer ul { gap: 0; }
  .site-footer li a { display: inline-block; padding: 10px 0; }
  .site-footer .redes a { display: inline-flex; align-items: center; min-height: 44px; }
  .woocommerce-product-search button { width: 44px; height: 44px; }
  .aviso-top p { font-size: .82rem; }
}

/* El carrusel de productos relacionados de la ficha asoma 4 px fuera de la pantalla (a propósito, para sugerir que se desliza).
   El diseño recorta el sobrante en <body> (overflow-x: clip); se hace también en <html> para que ningún celular pueda
   desplazar la página de lado. `clip` (y no `hidden`) para no romper los elementos pegajosos (encabezado). */
html { overflow-x: clip; }

/* ===== Parte 7: carrito, pago y cuenta ===== */
/* Título de las páginas de carrito, pago y cuenta: el del diseño (.titulo-pagina). */
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-account .entry-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; margin: 0 0 30px; color: var(--tinta); }
/* El diseño agrupa cupón y "Actualizar carrito" en una .fila-acciones (flex, espacio entre ambos); la plantilla de WooCommerce los deja sueltos
   dentro de td.actions. Poner display:flex en la celda la reduciría a una columna (pierde el colspan), así que se usa float: cupón a la
   izquierda y "Actualizar carrito" a la derecha. En móvil (hasta 760 px) el diseño pone la celda en bloque y los apila. */
@media (min-width: 761px) {
  .woocommerce table.cart td.actions .coupon { float: left; }
  .woocommerce table.cart td.actions button.button[name="update_cart"] { float: right; }
  .woocommerce table.cart td.actions::after { content: ""; display: table; clear: both; }
}
/* WooCommerce (woocommerce-layout.css) fija la hoja de totales al 48 % y la flota; dentro de la columna del diseño quedaba a la mitad de su ancho. */
.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { float: none; width: auto; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: auto; }

/* El campo del cupón: woocommerce-layout.css lo fija en 80 px con `.woocommerce #content table.cart td.actions .input-text`. */
.woocommerce #content table.cart td.actions .coupon .input-text { width: 190px; }
@media (max-width: 760px) {
  .woocommerce #content table.cart td.actions .coupon .input-text { width: auto; }
}

/* Minicarrito: woocommerce.css trae reglas para los "widgets" de carrito (ul.cart_list / .widget_shopping_cart) que pisan las del diseño:
   foto flotante de 32 px, botón de quitar a la izquierda, pseudoelementos de limpieza que se vuelven celdas de la cuadrícula y márgenes
   en los botones. Se anulan con el mismo selector; el enlace del producto (foto + nombre) pasa a display:contents para que la foto y el
   nombre sean celdas de la cuadrícula del diseño. "Ver carrito" va en papel celeste y "Finalizar compra" en azul. */
.woocommerce ul.cart_list li, .woocommerce .widget_shopping_cart .cart_list li { padding: 0 26px 0 0; }
.woocommerce ul.cart_list li::before, .woocommerce ul.cart_list li::after { display: none; }
.woocommerce ul.cart_list li > a:not(.remove) { display: contents; font-weight: 700; line-height: 1.25; color: var(--tinta); text-decoration: none; }
.woocommerce ul.cart_list li img { float: none; margin: 0; width: 58px; height: 58px; }
.woocommerce .widget_shopping_cart .cart_list li a.remove { position: absolute; top: 0; right: 0; left: auto; }
.woocommerce .widget_shopping_cart .buttons a { margin: 0; }
.woocommerce .woocommerce-mini-cart__buttons a.button:not(.checkout) { --lip: var(--lip-panel); background: var(--panel); color: var(--tinta); }
.woocommerce .woocommerce-mini-cart__buttons a.button:not(.checkout):hover { background: var(--panel); color: var(--tinta); }
.woocommerce .woocommerce-mini-cart__buttons a.button.checkout { --lip: var(--azul-lip); background: var(--azul-osc); color: #fff; }
.woocommerce .woocommerce-mini-cart__buttons a.button.checkout:hover { background: var(--azul-hov); color: #fff; }

/* El enlace "Ver carrito" en texto plano que WooCommerce agrega bajo el botón después de agregar por AJAX: el diseño ofrece el suyo en el aviso flotante. */
.woocommerce ul.products li.product a.added_to_cart { display: none; }

/* ===== Parte 7: formularios (pago y cuenta), pago y avisos. El prototipo no trae estas pantallas: se construyen con las piezas del diseño ===== */

/* Avisos: el diseño define .woocommerce-message y .woocommerce-error; WooCommerce agrega su borde superior, su ícono y un relleno propio. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: 0; padding: 14px 20px; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-info { position: relative; margin: 0 0 22px; list-style: none; font-weight: 600; font-size: .94rem; color: var(--tinta); background: var(--hoja);
  border-radius: 6px 12px 7px 11px / 11px 7px 12px 6px; box-shadow: inset 6px 0 0 var(--azul-osc), 0 4px 0 var(--lip-hoja), 0 10px 14px rgba(29,42,77,.2); }
.woocommerce-info a, .woocommerce-message a { color: var(--azul-osc); }

/* Campos: los mismos del cupón y el buscador (papel celeste, borde irregular, sombra de papel). */
.woocommerce form .form-row { padding: 0; margin: 0 0 18px; }
.woocommerce form .form-row label { display: block; margin: 0 0 7px; font-size: .86rem; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.woocommerce form .form-row .required { color: var(--naranja-txt); text-decoration: none; }
.woocommerce form .form-row .optional { font-weight: 500; color: var(--suave); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 14px; border: 0; font: 600 .95rem system-ui, sans-serif; color: var(--tinta); background: var(--panel);
  border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 3px 0 var(--lip-panel), 0 8px 12px rgba(29,42,77,.16); }
.woocommerce form .form-row textarea { padding: 12px 14px; min-height: 110px; line-height: 1.5; }
.woocommerce form .form-row input.input-text::placeholder, .woocommerce form .form-row textarea::placeholder { color: var(--suave); font-weight: 500; }
.woocommerce form .form-row input:focus-visible, .woocommerce form .form-row select:focus-visible, .woocommerce form .form-row textarea:focus-visible { outline: 3px solid var(--azul-osc); outline-offset: 3px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { box-shadow: 0 3px 0 var(--naranja), 0 8px 12px rgba(29,42,77,.16); }
.woocommerce form .form-row .select2-container .select2-selection--single { height: 46px; border: 0; background: var(--panel); border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 3px 0 var(--lip-panel), 0 8px 12px rgba(29,42,77,.16); }
.woocommerce form .form-row .select2-container .select2-selection__rendered { line-height: 46px; padding: 0 34px 0 14px; font: 600 .95rem system-ui, sans-serif; color: var(--tinta); }
.woocommerce form .form-row .select2-container .select2-selection__arrow { height: 46px; right: 8px; }
.select2-dropdown { border: 0 !important; border-radius: 8px; box-shadow: 0 10px 22px rgba(29,42,77,.28); overflow: hidden; }
.woocommerce form input[type="checkbox"], .woocommerce form input[type="radio"] { accent-color: var(--azul-osc); }

/* Pago: datos del cliente a la izquierda, hoja del pedido a la derecha (una columna en pantalla chica). */
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { float: none; width: auto; }
.woocommerce-checkout h3, .woocommerce-account h2, .woocommerce-account h3 { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.2; margin: 0 0 18px; color: var(--tinta); }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.woocommerce form .form-row { grid-column: 1 / -1; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { grid-column: auto; width: auto; float: none; }
.woocommerce form .form-row-wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
  .woocommerce-checkout .hoja-pedido { grid-column: 2; grid-row: 1; margin: 0 6px 0 4px; }
}
@media (max-width: 899px) { .woocommerce-checkout .hoja-pedido { margin: 28px 6px 0 4px; } }
@media (max-width: 560px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; } }
.hoja-pedido .frente { padding: 22px 26px 28px; }
.hoja-pedido #order_review_heading { margin: 0 0 12px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0; border-bottom: 2px dashed var(--lip-hoja); font-size: .92rem; text-align: left; vertical-align: top; }
.woocommerce-checkout-review-order-table thead th { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-osc); }
.woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: right; font-weight: 700; }
.woocommerce-checkout-review-order-table tr.order-total td, .woocommerce-checkout-review-order-table tr.order-total th { font-family: var(--serif); font-size: 1.35rem; border-bottom: 0; }
.woocommerce-checkout-review-order-table .product-quantity { font-weight: 700; color: var(--suave); }
.woocommerce-checkout #payment { background: none; border-radius: 0; margin-top: 18px; }
.woocommerce-checkout #payment ul.payment_methods { margin: 0 0 18px; padding: 0 0 14px; list-style: none; border-bottom: 2px dashed var(--lip-hoja); }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 10px; }
.woocommerce-checkout #payment ul.payment_methods li label { display: inline; font-weight: 700; }
.woocommerce-checkout #payment div.payment_box { margin: 10px 0 0; padding: 12px 16px; font-size: .9rem; color: var(--tinta); background: var(--panel); border-radius: 6px 11px 7px 10px / 10px 7px 11px 6px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text, .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { font-size: .82rem; color: var(--suave); line-height: 1.5; }
.woocommerce-checkout #payment div.form-row { padding: 0; }
.woocommerce #payment #place_order { float: none; width: 100%; min-height: 54px; --lip: var(--azul-lip); background: var(--azul-osc); color: #fff; }
.woocommerce #payment #place_order:hover { background: var(--azul-hov); color: #fff; }
.woocommerce form.checkout_coupon, .woocommerce form.woocommerce-form-coupon { margin: 0 0 24px; padding: 0; border: 0; }

/* Pago: selector nativo (departamento) alineado con el resto de campos; sin líneas verticales en la tabla del pedido. */
.woocommerce form .form-row select { height: 46px; padding: 0 40px 0 14px; line-height: 46px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d55a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.woocommerce-checkout-review-order-table { border: 0; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { border-left: 0; border-right: 0; border-top: 0; }

/* Dos ajustes de especificidad/orden en los campos del pago:
   - El cuadro de notas (textarea) también lleva la clase .input-text y la regla de WooCommerce `.form-row .input-text` (3 clases) le ganaba a la del textarea (2 clases).
   - En el selector de departamento (select2) la declaración `font:` reiniciaba el `line-height` que venía antes. */
.woocommerce form .form-row textarea.input-text { width: 100%; box-sizing: border-box; padding: 12px 14px; min-height: 110px; line-height: 1.5; border: 0; font: 600 .95rem/1.5 system-ui, sans-serif; color: var(--tinta); background: var(--panel);
  border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 3px 0 var(--lip-panel), 0 8px 12px rgba(29,42,77,.16); }
.woocommerce form .form-row .select2-container .select2-selection__rendered { line-height: 46px; }

/* ===== Parte 7: pedido recibido y Mi cuenta (sin prototipo) ===== */

/* Hoja de papel con el borde irregular del diseño (el mismo recorte de .frente), sin tocar las plantillas de WooCommerce. */
.woocommerce-order, .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register, .woocommerce-account form.lost_reset_password {
  position: relative; isolation: isolate; margin: 0 6px 34px 4px; padding: 34px 36px 38px; filter: var(--sombra-papel); }
.woocommerce-order::before, .woocommerce-account .woocommerce-MyAccount-content::before, .woocommerce-account form.woocommerce-form-login::before, .woocommerce-account form.woocommerce-form-register::before, .woocommerce-account form.lost_reset_password::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--papel);
  clip-path: polygon(0 1.2%,9% 0,27% 1%,50% 0,73% 1.2%,91% 0,100% 1%,99.6% 50%,100% 98.8%,78% 100%,52% 99%,26% 100%,8% 99%,0 100%,.4% 50%); }
.woocommerce-order h2, .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-order h3 { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.2; margin: 26px 0 16px; color: var(--tinta); }
.woocommerce-order > :first-child, .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-order p.woocommerce-thankyou-order-received { font-size: 1.05rem; font-weight: 700; margin: 0 0 22px; }

/* Resumen del pedido: fichas de papel celeste. */
.woocommerce ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.woocommerce ul.order_details li { float: none; margin: 0; padding: 12px 14px; border: 0; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--azul-osc);
  background: var(--panel); border-radius: 6px 11px 7px 10px / 10px 7px 11px 6px; box-shadow: 0 3px 0 var(--lip-panel); }
.woocommerce ul.order_details li strong { display: block; margin-top: 5px; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--tinta); }

/* Tablas de pedido: como la del carrito (encabezado en mayúsculas, líneas de puntos, sin bordes verticales). */
.woocommerce table.shop_table { border: 0; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-left: 0; border-right: 0; }
.woocommerce table.woocommerce-table--order-details th, .woocommerce table.woocommerce-table--order-details td,
.woocommerce table.my_account_orders th, .woocommerce table.my_account_orders td { padding: 14px 10px; font-size: .92rem; text-align: left; vertical-align: middle; }
.woocommerce table.woocommerce-table--order-details tfoot th, .woocommerce table.my_account_orders thead th { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-osc); }
.woocommerce table.woocommerce-table--order-details td:last-child, .woocommerce table.woocommerce-table--order-details tfoot td { text-align: right; font-weight: 700; }
.woocommerce table.woocommerce-table--order-details td a:not(.button), .woocommerce table.my_account_orders td a:not(.button) { color: var(--azul-osc); font-weight: 700; }
.woocommerce .order-actions-button, .woocommerce table.woocommerce-table--order-details .button, .woocommerce table.my_account_orders .button, .woocommerce .woocommerce-orders-table__cell-order-actions .button { width: auto; min-height: 42px; padding: 8px 18px; margin: 0 8px 8px 0; font-size: .88rem; display: inline-flex; }
.woocommerce table.woocommerce-table--order-details tfoot td .button { float: none; }

/* Direcciones: dos hojas celestes; en la cuenta, una encima de otra en pantalla chica. */
.woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-checkout #customer_details.col2-set { display: block; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce .addresses .woocommerce-Address { float: none; width: auto; }
.woocommerce address { padding: 16px 20px; font-style: normal; line-height: 1.7; border: 0; background: var(--panel); border-radius: 6px 11px 7px 10px / 10px 7px 11px 6px; box-shadow: 0 3px 0 var(--lip-panel); }
.woocommerce .woocommerce-Address-title h3, .woocommerce .woocommerce-column__title { margin-top: 0; }
@media (max-width: 720px) { .woocommerce .col2-set { grid-template-columns: 1fr; } }

/* Mi cuenta: menú a la izquierda (fichas de papel) y contenido a la derecha. */
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
@media (min-width: 861px) {
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
  .woocommerce-account.logged-in .entry-content > .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; }
}
.woocommerce-MyAccount-navigation ul { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--tinta); background: var(--hoja);
  border-radius: 6px 11px 7px 10px / 10px 7px 11px 6px; box-shadow: 0 3px 0 var(--lip-hoja), 0 8px 12px rgba(29,42,77,.16); transition: transform .15s; }
.woocommerce-MyAccount-navigation li a:hover { transform: translateY(-2px); }
.woocommerce-MyAccount-navigation li.is-active a { color: #fff; background: var(--azul-osc); box-shadow: 0 3px 0 var(--azul-lip), 0 8px 12px rgba(29,42,77,.2); }
.woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.6; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--azul-osc); }
.woocommerce-account .woocommerce-form-row, .woocommerce-account form .form-row { margin-bottom: 18px; }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.woocommerce-account .u-columns .u-column1, .woocommerce-account .u-columns .u-column2 { float: none; width: auto; }
@media (max-width: 720px) { .woocommerce-account .u-columns { grid-template-columns: 1fr; } .woocommerce-order, .woocommerce-account .woocommerce-MyAccount-content { padding: 26px 20px 30px; } }

/* WooCommerce agrega ::before y ::after de limpieza de flotantes a la lista del resumen; dentro de la cuadrícula se vuelven celdas vacías. */
.woocommerce ul.order_details::before, .woocommerce ul.order_details::after { display: none; }

/* Botones dentro de los avisos de WooCommerce (p. ej. "confirmar correo"): tamaño natural, no todo el ancho. */
.woocommerce-info .button, .woocommerce-message .button, .woocommerce-error .button { width: auto; float: none; min-height: 40px; padding: 8px 18px; margin: 0 12px 8px 0; font-size: .88rem; display: inline-flex; }

/* Mismo caso que en el resumen del pedido: los ::before/::after de limpieza de flotantes de .col2-set y .u-columns son celdas vacías en la cuadrícula. */
.woocommerce .col2-set::before, .woocommerce .col2-set::after, .woocommerce .u-columns::before, .woocommerce .u-columns::after { display: none; }

/* Mi cuenta: títulos de grupo de campos y botones de acción principal (guardar, acceder) en azul y de tamaño natural. */
.woocommerce-account fieldset { border: 0; padding: 0; margin: 26px 0 0; }
.woocommerce-account fieldset legend { padding: 0; margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--tinta); }
.woocommerce-account button.button[type="submit"], .woocommerce-account .woocommerce-Button { width: auto; min-width: 200px; --lip: var(--azul-lip); background: var(--azul-osc); color: #fff; }
.woocommerce-account button.button[type="submit"]:hover, .woocommerce-account .woocommerce-Button:hover { background: var(--azul-hov); color: #fff; }

/* Mi cuenta en pantalla chica: el menú en dos columnas (seis filas seguidas empujaban el contenido muy abajo). */
@media (max-width: 860px) {
  .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr 1fr; gap: 10px; }
  .woocommerce-MyAccount-navigation li a { padding: 11px 12px; font-size: .9rem; }
}

/* Carrito vacío: el mensaje es texto del diseño (serif), no una caja de aviso. */
.cart-empty .woocommerce-info { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }

/* Parte 9 · espacios en la ficha: aire entre precio y descripción corta; en productos variables WooCommerce deja la cantidad flotando a la izquierda (selector con div.quantity, más fuerte) y el botón quedaba pegado. */
.woocommerce div.product div.summary .price { margin-bottom: 18px; }
.woocommerce div.product form.cart div.quantity, .woocommerce div.product form.cart .woocommerce-variation-add-to-cart div.quantity { float: none; margin: 0 0 22px; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: block; }

/* Parte 9 · búsqueda: los resultados eran artículos de ancho completo, pegados y con la foto a tamaño original. Ahora una cuadrícula (una columna en móvil), foto cuadrada y aire entre tarjetas. */
.search-results .frente { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.search-results .frente > .page-header { grid-column: 1 / -1; margin: 0; }
.search-results .frente > article { margin: 0; min-width: 0; }
.search-results .frente .post-image { margin: 0 0 14px; }
.search-results .frente .post-image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.search-results .frente .entry-title { margin: 0 0 10px; font-size: 1.25rem; }
.search-results .frente .entry-summary p { margin: 0 0 10px; }

/* Parte 9 · categoría y tienda: el conteo ("Mostrando…") y el selector de orden son flotantes; en pantalla chica se solapaban. Apilados, con aire. */
@media (max-width: 720px) {
  .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; display: block; width: 100%; margin: 0 0 14px; }
  .woocommerce .woocommerce-ordering select { width: 100%; min-width: 0; }
}
.woocommerce .woocommerce-products-header { margin-bottom: 8px; }

/* Parte 9 · carrito en móvil: el cupón (flotante) quedaba pegado al botón "Actualizar carrito" (0 px). */
@media (max-width: 720px) {
  .woocommerce table.cart td.actions .coupon { float: none; margin: 0 0 16px; }
}
/* Los ::before/::after de limpieza de flotantes del cupón son elementos vacíos dentro del flex: empujaban el campo 12 px a la derecha. */
.woocommerce #content table.cart td.actions .coupon::before, .woocommerce #content table.cart td.actions .coupon::after, .woocommerce table.cart td.actions .coupon::before, .woocommerce table.cart td.actions .coupon::after { display: none; }

/* Parte 9 · pago: facturación y envío van una sobre otra (el #customer_details es bloque, no cuadrícula) y quedaban pegadas (0 px). */
.woocommerce-checkout #customer_details .col-1 { margin-bottom: 28px; }

/* Parte 9 (accesibilidad) · precio tachado en el listado: WooCommerce lo deja `inherit` (oliva, 3,3:1) con un selector más fuerte que el del diseño. Se restituye el color del diseño (--suave, contraste >5:1). */
.woocommerce ul.products li.product .price del, .woocommerce ul.products li.product .price del .woocommerce-Price-amount { color: var(--suave); }

/* Productos con varias fotos: el cambio de foto es un fundido (ver inc/imagenes.php); el visor queda sin recorte para no cortar la pila de hojas ni las sombras. */
/* En el fundido, flexslider deja las fotos flotando con margen -100% y el contenedor sin altura; se apilan en una cuadrícula de una celda. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { display: grid; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { grid-area: 1 / 1; float: none !important; margin: 0 !important; width: auto !important; }

/* Paginado: WooCommerce (nav.woocommerce-pagination ul li a) pone bordes, ancho mínimo 1em y el lila #e9e6ed con selectores más fuertes que los del diseño; se restituye la hoja del diseño (fichas numeradas) con selectores de mayor peso. */
.woocommerce nav.woocommerce-pagination { margin: 14px 0 0; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 10px 0 18px; border: 0; white-space: normal; list-style: none; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li { float: none; display: block; margin: 0; padding: 0; border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li > a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li > span { display: grid; place-items: center; min-width: 46px; height: 46px; margin: 0; padding: 0 16px; line-height: 1; font-size: 1.05rem; font-weight: 700; text-decoration: none; color: var(--tinta); background: var(--hoja); border-radius: 6px 12px 7px 11px / 11px 7px 12px 6px; box-shadow: 0 4px 0 var(--lip-hoja), 0 10px 14px rgba(29,42,77,.2), 0 2px 4px rgba(29,42,77,.26); transition: transform .2s ease; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li > a:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li > a:focus-visible { color: var(--tinta); background: var(--hoja); transform: translateY(-3px) rotate(-1.5deg); }
.woocommerce nav.woocommerce-pagination ul.page-numbers li > span.current { color: #fff; background: var(--azul-osc); box-shadow: 0 4px 0 var(--azul-lip), 0 10px 14px rgba(29,42,77,.24); }

/* Iconos de categoría nuevos (uno por categoría; mismo estilo que los cinco del diseño). Fuente y generador: diseno-ecologika/cambios/categorias/. */
.categorias .ic-boligrafo { background-image: var(--nat-icono-boligrafo); }
.categorias .ic-bomba { background-image: var(--nat-icono-bomba); }
.categorias .ic-corporativa { background-image: var(--nat-icono-corporativa); }
.categorias .ic-regalo { background-image: var(--nat-icono-regalo); }
.categorias .ic-celebracion { background-image: var(--nat-icono-celebracion); }
.categorias .ic-planta { background-image: var(--nat-icono-planta); }
.categorias .ic-tarjeta { background-image: var(--nat-icono-tarjeta); }
.categorias .ic-juguete { background-image: var(--nat-icono-juguete); }
.categorias .ic-mascota { background-image: var(--nat-icono-mascota); }
.categorias .ic-varita { background-image: var(--nat-icono-varita); }
.categorias .ic-vasos { background-image: var(--nat-icono-vasos); }
.categorias .ic-halloween { background-image: var(--nat-icono-halloween); }

/* Fase 2 · aviso de compra mínima junto a la cantidad (inc/cantidad-minima.php) */
.woocommerce div.product form.cart .compra-minima { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--suave); }

/* Fase 2 · aviso de descuentos por volumen bajo el precio (inc/boton-compra.php) */
.woocommerce div.product .summary .aviso-descuento { margin: -6px 0 16px; font-size: .92rem; font-weight: 600; color: var(--tinta); }
.woocommerce div.product .summary .aviso-descuento a { color: var(--azul-osc); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Franja de categorías de la portada: 8 tablas máximo; en escritorio van 4 por fila (4 + 4), con otro corte de veta en las tablas 6 a 8. En pantallas chicas queda como el diseño. */
@media (min-width: 881px) {
  .categorias li { flex: 0 1 calc(25% - 18px); max-width: 260px; }
}
.categorias li:nth-child(6) a { --vx: -91px; --vy: -22px; }
.categorias li:nth-child(7) a { --vx: -52px; --vy: -44px; }
.categorias li:nth-child(8) a { --vx: -127px; --vy: -12px; }

/* Barra superior (decisión del responsable, 2026-10-01): los enlaces Tienda / Lápices / Kits / Empresas / Contacto se ocultan (siguen en el pie y en las categorías de la portada;
   para volver a mostrarlos, quitar la primera regla) y el buscador ocupa el espacio libre. En celular y tableta el menú (botón de tres rayas) trae buscador, categorías y enlace al carrito. */
.site-header .main-navigation { display: none; }
.site-header .woocommerce-product-search { flex: 1 1 auto; min-width: 0; }
.site-header .woocommerce-product-search .search-field { width: 100%; }
.site-header .menu-categorias { display: none; }
@media (max-width: 1180px) {
  .site-header .menu-categorias { display: block; }
  .menu-categorias ul { margin: 0; padding: 0; list-style: none; }
  .menu-categorias a { display: block; padding: 12px 8px; font-weight: 600; font-size: 1.02rem; text-decoration: none; color: var(--tinta); border-bottom: 1px dashed var(--borde-suave, rgba(0,0,0,.15)); }
  .menu-categorias a:hover, .menu-categorias a:focus-visible { color: var(--azul-osc); }
  .menu-categorias li:last-child a { border-bottom: 0; }
  .menu-categorias__carrito a { font-weight: 800; color: var(--azul-osc); }
  /* con tantas categorías el menú abierto puede ser más alto que la pantalla: se desplaza por dentro */
  .site-header.abierto .site-header__menu { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Valoraciones (accesibilidad de lectura): el mensaje "No hay valoraciones" y el formulario no tenían diseño (texto oscuro sobre el fondo, campos grises del navegador) y en Halloween no se leían. Van sobre una hoja de papel, con los campos del diseño. */
.woocommerce #reviews #comments .woocommerce-noreviews,
.woocommerce #reviews #review_form_wrapper { position: relative; isolation: isolate; margin: 0 0 30px; padding: 26px 28px 28px; color: var(--tinta); filter: var(--sombra-papel); }
.woocommerce #reviews #comments .woocommerce-noreviews::before,
.woocommerce #reviews #review_form_wrapper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hoja);
  clip-path: polygon(0 2%,16% 0,44% 2%,72% 0,100% 2%,99% 50%,100% 98%,70% 100%,38% 98%,12% 100%,0 98%,1% 50%); }
.woocommerce #reviews #comments .woocommerce-noreviews { font-weight: 600; }
.woocommerce #reviews #reply-title { display: block; margin: 0 0 16px; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--tinta); }
.woocommerce #reviews #respond p { margin: 0 0 16px; }
.woocommerce #reviews #respond label { display: block; margin: 0 0 7px; font-size: .9rem; font-weight: 700; color: var(--tinta); }
.woocommerce #reviews #respond .required { color: var(--naranja-txt); text-decoration: none; }
.woocommerce #reviews #respond textarea, .woocommerce #reviews #respond input[type="text"], .woocommerce #reviews #respond input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; font: 600 .95rem system-ui, sans-serif; color: var(--tinta); background: var(--panel);
  border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 3px 0 var(--lip-panel), 0 8px 12px rgba(29,42,77,.16); }
.woocommerce #reviews #respond textarea { min-height: 130px; line-height: 1.5; }
.woocommerce #reviews #respond .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.woocommerce #reviews #respond .comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 500; }
.woocommerce #reviews #respond p.stars a { color: var(--azul-osc); font-size: 1.5rem; }
.woocommerce #reviews #respond input#submit { min-height: 46px; padding: 0 28px; border: 0; cursor: pointer; font: 800 .95rem system-ui, sans-serif; color: #fff; background: var(--azul-osc);
  border-radius: 6px 12px 7px 11px / 11px 7px 12px 6px; box-shadow: 0 4px 0 var(--azul-lip), 0 10px 14px rgba(29,42,77,.24); }
.woocommerce #reviews #respond input#submit:hover, .woocommerce #reviews #respond input#submit:focus-visible { background: var(--azul-hov); }
/* El texto de introducción de la descripción va en una hoja (papel-simple); separación con el bloque de dos columnas que sigue. */
.woocommerce .papel-simple + .dos-col { margin-top: 30px; }

/* Accesibilidad: "Hay existencias" (verde de WooCommerce, 2,9:1 sobre el papel) pasa a un verde oscuro con contraste suficiente. */
.woocommerce div.product p.stock.in-stock, .woocommerce div.product .stock.in-stock { color: #2b5d1b; font-weight: 600; }

/* Ficha: el botón "Cotizar por WhatsApp" quedaba pegado al de "Agregar al carrito"; separación entre ambos. */
.woocommerce div.product .summary form.cart { margin-bottom: 0; }
.woocommerce div.product .summary .cotizar-ficha.cotizar-adicional { margin: 22px 0 0; }
.woocommerce div.product .summary .cotizar-ficha.cotizar-adicional + .aviso { margin-top: 12px; }

/* Precio por unidad (sufijo de precio de WooCommerce) y total en vivo bajo la cantidad. */
.woocommerce div.product form.cart .total-vivo { margin: 6px 0 14px; min-height: 1.4em; font-size: 1.02rem; font-weight: 800; color: var(--tinta); }
.woocommerce div.product form.cart .total-vivo:empty { display: none; }
.woocommerce div.product div.summary .price .woocommerce-price-suffix { margin: 2px 0 12px; }
.woocommerce div.product div.summary .woocommerce-variation-price .price .woocommerce-price-suffix { margin-bottom: 6px; }

/* ===== Cotizador (inc/cotizador.php, assets/js/cotizador.js) ===== */
.cotizador { color: var(--tinta); }
.cotizador__intro { font-size: 1.05rem; }
.cotizador__aviso { margin: 18px 0 26px; padding: 14px 18px; border-left: 6px solid var(--naranja); background: var(--panel); border-radius: 4px 10px 6px 10px; font-size: .95rem; line-height: 1.5; }
.cotizador h2 { margin: 28px 0 14px; font-family: var(--serif); font-size: 1.35rem; color: var(--tinta); }
.cotizador fieldset.cotizador__modo { margin: 0 0 8px; padding: 0; border: 0; }
.cotizador fieldset.cotizador__modo legend { margin: 0 0 10px; padding: 0; font-weight: 800; font-size: 1.05rem; }
.cotizador__modo label { display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 8px 0; font-weight: 700; cursor: pointer; }
.cotizador__modo input { width: 20px; height: 20px; accent-color: var(--azul-osc); }
.cotizador label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: var(--tinta); }
.cotizador .req { color: var(--naranja-txt); }
.cotizador .opt { font-weight: 500; color: var(--suave); }
.cotizador input[type="text"], .cotizador input[type="number"], .cotizador select, .cotizador textarea {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 14px; border: 0; font: 600 .95rem system-ui, sans-serif; color: var(--tinta); background: var(--panel);
  border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 3px 0 var(--lip-panel), 0 8px 12px rgba(29,42,77,.16); }
.cotizador textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.cotizador [aria-invalid="true"] { outline: 3px solid #b3261e; outline-offset: 2px; }
.cotizador input:disabled { opacity: .55; }
.cotizador__datos p, .cotizador__otro p { margin: 0 0 16px; }
.cot-fila { position: relative; margin: 0 0 22px; padding: 18px 18px 14px; background: var(--panel); border-radius: 6px 12px 7px 11px / 11px 7px 12px 6px; box-shadow: 0 4px 0 var(--lip-panel); }
.cot-fila select, .cot-fila input { background: #fff; box-shadow: 0 2px 0 var(--lip-panel); }
.cot-fila__cab { display: flex; gap: 14px; align-items: flex-end; }
.cot-fila__prod { flex: 1 1 auto; min-width: 0; }
.cot-fila__quitar { flex: none; min-height: 46px; padding: 0 14px; border: 0; background: none; cursor: pointer; font: 700 .9rem system-ui, sans-serif; color: var(--azul-osc); text-decoration: underline; text-underline-offset: 3px; }
.cot-fila__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; }
.cot-fila__opciones:empty { display: none; }
.cot-fila__cant { display: grid; grid-template-columns: 150px 1fr; gap: 4px 16px; align-items: end; margin-top: 14px; }
.cot-fila__cant label { grid-column: 1 / -1; margin: 0; }
.cot-fila__min { font-size: .86rem; color: var(--suave); padding-bottom: 12px; }
.cot-fila__sub { margin: 12px 0 0; font-weight: 800; }
.cot-fila__sub--error { color: #b3261e; }
.cotizador__total { margin: 6px 0 0; }
.cot-total__valor { margin: 0 0 6px; font-size: 1.3rem; }
.cot-total__valor strong { font-family: var(--serif); font-size: 1.7rem; }
.cot-total__aviso { margin: 0; padding: 10px 14px; border-left: 6px solid var(--naranja); background: var(--panel); border-radius: 4px 10px 6px 10px; font-size: .92rem; }
.cotizador__errores:not(:empty) { margin: 20px 0 8px; padding: 14px 18px; border-left: 6px solid #b3261e; background: #fbe9e7; border-radius: 4px 10px 6px 10px; color: #5c1410; }
.cotizador__errores a { color: #5c1410; font-weight: 700; }
.cotizador__errores ul { margin: 6px 0 0; padding-left: 20px; }
.cotizador__enviar { margin: 24px 0 8px; }
.cotizador__enviar .button { min-height: 52px; font-size: 1.05rem; }
.cotizador__nota { font-size: .88rem; color: var(--suave); }
@media (max-width: 600px) { .cot-fila__cab { flex-wrap: wrap; } .cot-fila__cant { grid-template-columns: 1fr; } .cot-fila__min { padding-bottom: 0; } }

/* Ficha técnica con tarjeta "Semillas" (2026-10-02): la lista de semillas es larga y estiraba las otras tarjetas.
   Contenido / Medidas / Material quedan en 3 columnas y Semillas ocupa una fila propia debajo, a todo el ancho.
   La clase ficha-semillas está en el <dl> de los productos que tienen esa tarjeta; en pantalla chica (≤560 px) manda la regla de 2 columnas de arriba. */
dl.ficha.ficha-semillas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
dl.ficha.ficha-semillas > div:last-child { grid-column: 1 / -1; }

/* ===== Cotizador: ventana "Elegir producto" (cuadrícula con fotos, nombre y buscador; assets/js/cotizador.js) ===== */
.cot-selector { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; min-height: 72px; padding: 8px 14px; border: 0; cursor: pointer; text-align: left;
  font: 600 .95rem system-ui, sans-serif; color: var(--tinta); background: #fff; border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 2px 0 var(--lip-panel); }
.cot-selector:hover { box-shadow: 0 2px 0 var(--azul-osc); }
.cot-selector__img { flex: none; width: 56px; height: 56px; overflow: hidden; background: #fff; border: 1px solid var(--lip-panel); border-radius: 8px; }
.cot-selector__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cot-selector__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cot-selector__nombre { font-weight: 800; line-height: 1.25; }
.cot-selector__vacio { font-weight: 700; font-size: 1rem; }
.cot-selector__accion { flex: none; margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--azul-osc); text-decoration: underline; text-underline-offset: 3px; }
.cot-selector__txt .cot-selector__accion { margin-left: 0; }
.cot-selector:focus-visible, .cot-card:focus-visible, .cot-chip:focus-visible, .cot-modal__cerrar:focus-visible, .cot-modal input:focus-visible { outline: 3px solid var(--azul-osc); outline-offset: 2px; }
html.cot-modal-abierto { overflow: hidden; }

.cot-modal { box-sizing: border-box; width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--tinta); font-family: system-ui, sans-serif; overflow: visible; }
.cot-modal::backdrop { background: rgba(18, 28, 24, .66); }
.cot-modal__in { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); overflow: hidden; background: #fff; border-radius: 8px 14px 9px 13px / 13px 9px 14px 8px; box-shadow: 0 6px 0 var(--lip-panel), 0 24px 48px rgba(0, 0, 0, .4); }
.cot-modal__cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 10px; }
.cot-modal .cot-modal__cab h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; color: var(--tinta); }
.cot-modal__cerrar { flex: none; min-height: 44px; padding: 0 16px; border: 2px solid var(--azul-osc); border-radius: 999px; background: #fff; color: var(--azul-osc); font: 800 .9rem system-ui, sans-serif; cursor: pointer; }
.cot-modal__filtros { flex: none; padding: 0 20px 14px; border-bottom: 2px dashed var(--lip-panel); }
.cot-modal__filtros label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 700; }
.cot-modal input[type="search"] { width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 14px; border: 0; font: 600 1rem system-ui, sans-serif; color: var(--tinta); background: var(--panel);
  border-radius: 5px 10px 6px 11px / 10px 6px 11px 5px; box-shadow: 0 2px 0 var(--lip-panel); }
.cot-modal__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cot-chip { min-height: 40px; padding: 0 14px; border: 2px solid var(--azul-osc); border-radius: 999px; background: #fff; color: var(--azul-osc); font: 700 .85rem system-ui, sans-serif; cursor: pointer; }
.cot-chip[aria-pressed="true"] { background: var(--azul-osc); color: #fff; }
.cot-modal__cuenta { margin: 10px 0 0; font-size: .85rem; color: var(--suave); }
.cot-modal__lista { flex: 1 1 auto; min-height: 0; margin: 0; padding: 16px 20px 22px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.cot-modal__lista > li { margin: 0; padding: 0; }
.cot-modal__vacio { grid-column: 1 / -1; padding: 24px 0; font-weight: 700; }
.cot-card { display: flex; flex-direction: column; width: 100%; height: 100%; box-sizing: border-box; padding: 10px; border: 2px solid transparent; cursor: pointer; text-align: left; color: var(--tinta);
  background: var(--panel); border-radius: 6px 12px 7px 11px / 11px 7px 12px 6px; box-shadow: 0 3px 0 var(--lip-panel); font-family: system-ui, sans-serif; }
.cot-card:hover { border-color: var(--naranja); }
.cot-card--actual { border-color: var(--azul-osc); }
.cot-card__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border-radius: 8px; }
.cot-card__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cot-card__nombre { margin-top: 10px; font-family: var(--serif); font-weight: 800; font-size: 1rem; line-height: 1.25; }
.cot-card__precio { margin-top: auto; padding-top: 6px; font-size: .85rem; font-weight: 700; color: var(--suave); }
@media (max-width: 560px) {
  .cot-modal { width: 100vw; max-height: 100dvh; height: 100dvh; }
  .cot-modal__in { height: 100%; max-height: none; border-radius: 0; }
  .cot-modal__cab, .cot-modal__filtros { padding-left: 14px; padding-right: 14px; }
  .cot-modal__cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .cot-chip { flex: none; }
  .cot-modal__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 14px 20px; }
}

/* Pedido recibido: botones de comprobante */
.pedido-acciones { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0 1.5rem; }
.comprobante-empresa { display:none; }
.woocommerce a.button.volver-tienda { --lip:var(--azul-lip); background:var(--azul-osc); color:#fff; }
.woocommerce a.button.volver-tienda:hover { background:var(--azul-hov); color:#fff; }

/* Impresión del comprobante: solo el contenido del pedido, en blanco y negro, sin adornos de temporada */
@media print {
	body > *:not(#page) { display:none !important; }
	html, body, #page, #content, .site-content, .inside-article, .entry-content { background:#fff !important; background-image:none !important; }
	body::before, body::after, #page::before, #page::after, .entry-content::before, .entry-content::after, .inside-article::before, .inside-article::after { display:none !important; }
	#page *, #page *::before, #page *::after { box-shadow:none !important; text-shadow:none !important; animation:none !important; }
	#page .woocommerce-order, #page .woocommerce-order *:not(svg):not(path) { background:transparent !important; color:#000 !important; border-color:#999 !important; }
	.pedido-whatsapp, .pedido-acciones, .entry-header { display:none !important; }
	.comprobante-empresa { display:block !important; margin:0 0 1rem; padding-bottom:.75rem; border-bottom:2px solid #000; font-size:11pt; line-height:1.5; color:#000; }
	.woocommerce-order-overview { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
	.woocommerce-order-details, .woocommerce-customer-details { break-inside:avoid; }
	a { text-decoration:none !important; }
	@page { margin:14mm; }
}