/* Generado por build-theme.mjs — no editar a mano. */

/* ── Rejilla de producto ─────────────────────────────────────────────────── */
/*
   Paginación. WooCommerce la pinta como una lista <ul.page-numbers> y sin
   vestir sale como cuadritos apretados sobre el fondo oscuro — que es
   exactamente lo que se veía. Se le da la forma de los chips de categoría:
   píldoras, la activa en amarillo.

   El diseño NO tiene paginación (enseñaba 30 referencias en una rejilla). Con
   121 productos se decidió paginar de 24 en 24 (usuario, 2026-07-29), así que
   esto es «construir», no «traducir»: se usa el lenguaje del diseño.
*/
.woocommerce nav.woocommerce-pagination{margin:34px 0 0; text-align:center;}
.woocommerce nav.woocommerce-pagination ul{
  display:inline-flex; flex-wrap:wrap; gap:8px; justify-content:center;
  border:none !important; margin:0; padding:0; list-style:none;
}
.woocommerce nav.woocommerce-pagination ul li{border:none !important; margin:0; overflow:visible;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px; box-sizing:border-box;
  border-radius:999px; font-family:var(--pc-mono); font-size:12.5px;
  background:var(--pc-panel); border:1px solid var(--pc-panel-borde);
  color:var(--pc-texto) !important; text-decoration:none; transition:background .3s, border-color .3s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:color-mix(in srgb, var(--pc-amarillo) 14%, transparent); border-color:color-mix(in srgb, var(--pc-amarillo) 45%, transparent);}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--pc-amarillo) !important; border-color:var(--pc-amarillo) !important;
  /* var(--pc-sobre-acento), no #0B0B0C quemado: sobre el amarillo del primer
     cliente era legible; sobre un acento de tinta era negro sobre negro. */
  color:var(--pc-sobre-acento) !important; font-weight:700;
}
.woocommerce nav.woocommerce-pagination ul li span.dots{background:transparent; border-color:transparent; color:var(--pc-gris) !important;}

/*
   El panel de filtros, como lo define el diseño: en escritorio SIEMPRE visible y
   sin botón; por debajo de 767 px aparece el botón «Filtros +» y el panel se
   colapsa hasta que se pulsa.
*/
@media (max-width:767px){
  .organic_nails-filtros [data-r~=filtbtn]{display:flex !important;}
  .organic_nails-filtros [data-r~=filtwrap]{margin-top:16px;}
  .organic_nails-filtros [data-r~=filtwrap][data-open="0"]{display:none !important;}
  .organic_nails-filtros [data-r~=filtwrap][data-open="1"]{display:block !important;}
}
.organic_nails-filtros [data-r~=filtbtn][aria-expanded=true] span:last-child{transform:rotate(45deg);}
.organic_nails-filtros [data-r~=filtbtn] span:last-child{display:inline-block; transition:transform .3s;}
/* El <select> de orden lo pinta WooCommerce dentro de su propio <form>: se
   neutraliza para que herede la rejilla de filtros en vez de flotar. */
.organic_nails-filtros form.woocommerce-ordering{margin:0;}
.organic_nails-filtros form.woocommerce-ordering select{
  width:100%; background:var(--pc-fondo-control); border:1px solid var(--pc-panel-borde);
  border-radius:12px; color:var(--pc-texto); padding:11px 14px; font-family:inherit;
  font-size:13px; min-height:44px;
}

ul.products{display:grid !important; grid-template-columns:repeat(4,1fr); gap:18px; list-style:none; margin:0 !important; padding:0 !important;}
ul.products::before,ul.products::after{display:none !important;}
ul.products li.product{width:auto !important; margin:0 !important; float:none !important; clear:none !important;}
@media (max-width:1023px){ul.products{grid-template-columns:repeat(2,1fr);}}

/*
   En el teléfono, UNA tarjeta por fila.

   PROBADO EN DOS Y DESCARTADO, el 2026-07-30. El usuario pidió dos, se hizo, lo
   validó en un teléfono de verdad y su respuesta fue «definitivamente sí toca
   una sola batería en tienda, dos no sirve». Queda anotado para que nadie lo
   vuelva a intentar creyendo que es una mejora sin probar.

   Lo que enseñó el intento: a dos columnas la tarjeta cae a ~165 px de ancho, y
   ahí NO cabe la del diseño. Hacían falta seis recortes —bajar la foto, apretar
   el relleno, esconder la descripción corta, encoger el nombre y las etiquetas,
   y apilar precio y botón—. Con todos ellos entra, pero lo que queda ya no es la
   tarjeta del diseño: es otra tarjeta, más pequeña y con menos información, y
   una batería se elige por sus cifras.
*/
@media (max-width:767px){ul.products{grid-template-columns:1fr;}}

/*
   Mientras el filtrado por AJAX va y viene, la rejilla se atenúa y no acepta
   clics. Es lo único que se ve del cambio, y hace falta: sin ninguna señal, en
   una conexión lenta parece que el filtro no hizo nada y se vuelve a tocar.

   La transición es de entrada, no de salida, para que la lista nueva aparezca
   entera y no desvaneciéndose.

   Sin acotar a .organic_nails-tienda A PROPÓSITO: esa clase la pone la composición
   autorada, y cuando el archivo sale del DISEÑO del cliente el <main> es el
   suyo y no la lleva. La regla iba entonces a una tienda que no existía y el
   atenuado no se veía en la única tienda que se entrega.

   (El comentario era DOS: un cierre de más en medio dejaba cuatro líneas de
   prosa sueltas en el CSS y el parser descartaba la regla siguiente — el
   atenuado del AJAX no corría, sin error en ningún sitio.)
*/
[data-pc-t="rejilla"]{transition:opacity .2s ease;}
[data-pc-t="rejilla"][data-pc-t-espera]{opacity:0.45; pointer-events:none;}

/* ── Tipografía y color, del diseño ──────────────────────────────────────── */
.woocommerce, .woocommerce-page{color:var(--pc-texto);}
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-cart h1,.woocommerce-checkout h1,.woocommerce-account h1{
  font-family:var(--pc-titulo); font-weight:700; letter-spacing:-0.02em; color:var(--pc-texto);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb,
.woocommerce label,
.woocommerce th{font-family:var(--pc-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--pc-gris);}
.woocommerce a{color:var(--pc-amarillo);}

/* ── Tarjetas de vidrio: el mismo lenguaje que el resto del sitio ─────────── */
/*
   #order_review y .woocommerce-billing-fields NO están en la lista, y no es un
   olvido: form-checkout.php YA los envuelve en su propio panel con padding de
   30. Tenerlos aquí también daba caja dentro de caja dentro de caja —tres
   bordes y radios concéntricos y ~52 px de relleno acumulado por lado— que es
   exactamente el «no se ve bien el resumen» que reportó el segundo cliente.
*/
.woocommerce table.shop_table,
.woocommerce .cart_totals,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--pc-caja);
  backdrop-filter:var(--pc-vidrio);
  -webkit-backdrop-filter:var(--pc-vidrio);
  border:1px solid var(--pc-panel-borde) !important;
  border-radius:var(--pc-radio);
  
  padding:22px;
}
/* La tabla del resumen vive DENTRO del panel del checkout: sin esto heredaba
   el vidrio de shop_table y volvía la caja anidada. */
.woocommerce-checkout #order_review table.shop_table{
  background:transparent; border:none !important; border-radius:0; padding:0; box-shadow:none;
}
.woocommerce table.shop_table{border-collapse:separate; border-spacing:0;}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{border-color:var(--pc-panel-borde) !important; color:var(--pc-texto);}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit{
  background:var(--pc-amarillo) !important; color:var(--pc-sobre-acento) !important;
  border:none !important; border-radius:var(--pc-radio-c); padding:13px 20px;
  font-family:var(--pc-cuerpo); font-size:14px; font-weight:var(--pc-peso); text-transform:none;
  transition:filter .3s, background .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{filter:brightness(1.08);}
/* Hover declarado por la paleta: sobre un acento de tinta, brightness(1.08)
   no se percibe — el diseño declara su hover como cambio de fondo. */
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:#4A4A4A !important; filter:none;}
.pc-cta{transition:background .2s;}
.pc-cta:hover{background:#4A4A4A !important;}
.woocommerce a.button.wc-backward{background:var(--pc-panel) !important; color:var(--pc-texto) !important; border:1px solid var(--pc-panel-borde) !important;}

/* ── Campos de formulario ────────────────────────────────────────────────── */
/* SIN «.woocommerce .quantity input.qty» en esta lista: la pastilla − n + le
   pone su propio estilo a ese input, y esta regla —más específica y con
   !important— lo inflaba con caja, borde y 46px de alto DENTRO de la pastilla:
   quedaban ~10px útiles para la cifra. Defecto visual objetivo, no criterio. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  background:var(--pc-panel) !important;
  border:1px solid var(--pc-panel-borde) !important;
  border-radius:var(--pc-radio-c) !important;
  color:var(--pc-texto) !important;
  padding:12px 14px !important;
  font-family:var(--pc-cuerpo);
  min-height:46px;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{color:var(--pc-gris);}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{outline:2px solid var(--pc-amarillo); outline-offset:2px;}

/* ── Precios ─────────────────────────────────────────────────────────────── */
.woocommerce .price, .woocommerce .amount{font-family:var(--pc-cifra); font-weight:var(--pc-peso); color:var(--pc-texto);}
.woocommerce del, .woocommerce del .amount{color:var(--pc-gris); font-weight:400;}
.woocommerce ins{text-decoration:none;}

/* ── Avisos: que se lean, que es para lo que están ───────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice{
  background:var(--pc-panel) !important;
  border-top:3px solid var(--pc-amarillo) !important;
  border-radius:var(--pc-radio-c); color:var(--pc-texto) !important;
}
/* var(--pc-naranja), no #f86368: el rojo de señal es de la paleta del proyecto
   y el hex era el del tema oscuro del primer cliente. */
.woocommerce-error{border-top-color:var(--pc-naranja) !important;}
.woocommerce-message::before, .woocommerce-info::before{color:var(--pc-amarillo) !important;}
.woocommerce-error::before{color:var(--pc-naranja) !important;}

/* ── «Mi cuenta»: la navegación como pestañas del diseño ─────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--pc-panel-borde);}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block; padding:12px 4px; font-family:var(--pc-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--pc-gris); text-decoration:none;}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--pc-amarillo);}

/* ── Cantidad y «Añadir», en la MISMA línea ──────────────────────────────── */
/*
   El fallo que se veía: la ficha NO lleva el envoltorio div.product de
   WooCommerce (la plantilla es propia), así que las reglas colgadas de
   .woocommerce div.product no aplicaban NUNCA y el formulario caía al estilo de
   fábrica — cantidad y botón apilados, y los spinners nativos a la vista. Se
   cuelgan de .pc-ficha-compra, que es el contenedor real de la ficha.

   WooCommerce saca la cantidad y el botón como dos bloques; en el diseño van en
   una línea, que es un solo gesto.
*/
.pc-ficha-compra form.cart{display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin:0;}
.pc-ficha-compra form.cart .woocommerce-variation-add-to-cart{display:flex; gap:12px; width:100%;}
.pc-ficha-compra form.cart button.single_add_to_cart_button{
  flex:1 1 180px; min-height:48px; border-radius:14px !important; padding:15px 24px !important;
  font-size:15px; font-weight:700; white-space:nowrap;
}

/*
   En el teléfono, en vez de que el botón caiga a medias bajo la pastilla, los
   dos van a lo ANCHO, uno sobre otro: la pastilla con − y + a los extremos y el
   número en medio, y «Añadir» debajo a todo el ancho. Decisión del usuario:
   «en dos, que ambos ocupen el 100%».
*/
@media (max-width:600px){
  .pc-ficha-compra form.cart .organic_nails-cant-caja{width:100%; justify-content:space-between;}
  .pc-ficha-compra form.cart button.single_add_to_cart_button{flex:1 1 100%;}
}

/*
   La pastilla − 1 + : una caja de vidrio con los tres dentro. La misma en la
   ficha y en el carrito, definida una vez más abajo en «── Carrito ──».
*/

/*
   Aquí vivían 20 reglas para la tabla del carrito, su cabecera y el campo de
   cupón. Se han ido con la plantilla: el diseño no tiene tabla —cada producto
   es una tarjeta— ni cupón en ninguna vista. Eran CSS vistiendo un marcado que
   ya no se pinta, que es la forma más silenciosa de que una hoja de estilos
   crezca: nadie borra reglas que no sabe si alguien usa.

   Lo que las sustituye está en «── Carrito ──», más abajo.
*/

/* ── Checkout ────────────────────────────────────────────────────────────── */
/*
   La estructura de dos columnas ya la pone form-checkout.php (composición del
   diseño). Aquí sólo se visten los campos y el resumen, que sí son de
   WooCommerce. Los hacks de grid sobre #customer_details/#order_review que
   había antes se fueron con la plantilla: ordenaban un marcado que ya no se usa.

   En móvil, el pedido va PRIMERO: rellenar diez campos antes de ver qué se
   compra y por cuánto es al revés de como se decide.
*/
@media (max-width:1023px){
  .organic_nails-checkout-cols{grid-template-columns:1fr !important;}
  .organic_nails-checkout-pedido{position:static !important; top:auto !important; order:-1; margin-bottom:22px;}
}

/*
   La plantilla ya pone «Datos de entrega»; WooCommerce añade su propio
   «Detalles de facturación» dentro de form-billing.php. Sin esto salen los dos:
   un encabezado repetido. Se oculta el de Woo, no el del diseño.
*/
.organic_nails-checkout .woocommerce-billing-fields > h3,
.organic_nails-checkout .woocommerce-shipping-fields > h3{display:none;}

/* Los campos, con el mismo vidrio que el resto de inputs del sitio. */
.organic_nails-checkout .form-row{margin:0 0 14px;}
.organic_nails-checkout .form-row label{display:block; font-family:var(--pc-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--pc-gris); margin-bottom:6px;}
.organic_nails-checkout .form-row .required{color:var(--pc-naranja); border:0;}
.organic_nails-checkout .input-text,
.organic_nails-checkout select,
.organic_nails-checkout textarea,
.organic_nails-checkout .select2-container .select2-selection{
  width:100%; box-sizing:border-box; padding:13px 14px; min-height:48px;
  background:var(--pc-panel); border:1px solid var(--pc-panel-borde);
  border-radius:12px; color:var(--pc-texto); font-family:inherit; font-size:14px;
}
.organic_nails-checkout .input-text::placeholder{color:var(--pc-gris);}
.organic_nails-checkout .input-text:focus,
.organic_nails-checkout select:focus{outline:2px solid var(--pc-amarillo); outline-offset:1px;}

/* Dos por fila en escritorio, apiladas en móvil, sin flotados de Woo. */
.organic_nails-checkout .woocommerce-billing-fields__field-wrapper,
.organic_nails-checkout .woocommerce-shipping-fields__field-wrapper{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
/*
   Cada campo llena SU celda. WooCommerce le pone width:47% y float a
   .form-row-first/.form-row-last, y dentro de la rejilla eso dejaba el input al
   47% de la mitad —un campo estrecho con media celda vacía a la derecha—. Se
   anula: en la rejilla el ancho lo manda la celda (1fr), no el % de Woo.
*/
.organic_nails-checkout .form-row{width:auto !important; float:none !important; margin-left:0 !important; margin-right:0 !important;}
.organic_nails-checkout .form-row-wide,
.organic_nails-checkout .form-row.notes{grid-column:1 / -1;}
@media (max-width:600px){
  .organic_nails-checkout .woocommerce-billing-fields__field-wrapper,
  .organic_nails-checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr;}
}

/* El resumen: el mismo look que el del carrito. */
.organic_nails-checkout .woocommerce-checkout-review-order-table{width:100%; border-collapse:collapse;}
.organic_nails-checkout .woocommerce-checkout-review-order-table th,
.organic_nails-checkout .woocommerce-checkout-review-order-table td{padding:11px 0; text-align:left; border-bottom:1px solid var(--pc-panel-borde); font-size:14px; color:var(--pc-texto-suave);}
.organic_nails-checkout .woocommerce-checkout-review-order-table td{text-align:right; color:var(--pc-texto);}
.organic_nails-checkout .woocommerce-checkout-review-order-table .order-total th,
.organic_nails-checkout .woocommerce-checkout-review-order-table .order-total td{font-family:var(--pc-titulo); font-size:20px; font-weight:700; color:var(--pc-texto); border-bottom:none; padding-top:16px;}
.organic_nails-checkout #shipping_method{list-style:none; margin:0; padding:0;}
.organic_nails-checkout #shipping_method li{margin:0 0 6px;}

/* Las pasarelas: sin el fondo gris de fábrica. */
.organic_nails-checkout .wc_payment_methods{list-style:none; margin:0; padding:0;}
.organic_nails-checkout .wc_payment_method > label{display:inline-flex; align-items:center; gap:9px; text-transform:none; letter-spacing:0; font-family:inherit; font-size:14px; color:var(--pc-texto); margin:0;}
.organic_nails-checkout .payment_box{background:var(--pc-panel) !important; border-radius:12px; margin:10px 0 0; font-size:13px; color:var(--pc-texto-suave);}
.organic_nails-checkout .payment_box::before{display:none;}
.organic_nails-checkout #place_order{width:100%; margin-top:16px; font-size:15px; font-weight:700; padding:16px 20px; border-radius:14px; background:var(--pc-amarillo); color:var(--pc-sobre-acento);}
.organic_nails-checkout .woocommerce-terms-and-conditions-wrapper{margin:14px 0; font-size:13px; color:var(--pc-gris);}

/* ── Ficha de producto ───────────────────────────────────────────────────── */
/*
   La foto: el diseño la deja flotando dentro de la tarjeta, con halo detrás y
   sombra proyectada. get_image() devuelve el <img> de WooCommerce con sus
   clases, así que las medidas se le ponen desde aquí y no en línea.
*/
.pc-ficha-foto img{
  max-width:80%; max-height:360px; width:auto; height:auto; object-fit:contain;
  
  position:relative; z-index:1;
}

/*
   La columna izquierda es pegajosa a partir de 1024. Clase propia y no
   data-r="stick": ese token lo usa el header fijo de móvil, y compartirlo
   pegaba la foto al borde superior de la pantalla.
*/
@media (max-width:1023px){
  .pc-ficha-rail{position:static !important; top:auto !important;}
}

/* Los relacionados son tarjetas anchas: dos por fila antes que tres apretadas. */
@media (max-width:1023px){ .pc-ficha-rel{grid-template-columns:repeat(2,1fr) !important;} }
@media (max-width:767px){ .pc-ficha-rel{grid-template-columns:1fr !important;} }
.pc-ficha-rel a:hover{transform:translateY(-3px);}
.pc-ficha-rel img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}

.pc-wa-boton:hover{filter:brightness(1.06);}
.pc-share a:hover{border-color:color-mix(in srgb, var(--pc-amarillo) 45%, transparent); color:var(--pc-amarillo);}

/*
   Los avisos de WooCommerce van dentro del ancho de la ficha, no pegados al
   borde: en la ficha el <main> es nuestro y no el envoltorio de Woo.
*/
.organic_nails-ficha .woocommerce-notices-wrapper{margin-bottom:18px;}

/* ── Carrito ─────────────────────────────────────────────────────────────── */
.organic_nails-carrito-fila img{width:100%; height:100%; object-fit:contain; border-radius:var(--pc-radio-c);}
.organic_nails-carrito-fila .remove:hover{color:var(--pc-naranja) !important; background:transparent !important;}

/*
   Las dos columnas del carrito —lista y resumen— van EN LÍNEA en cart.php con
   un marcador data-r="stack" que era del sistema responsive del PRIMER cliente:
   sus reglas vivían en el CSS de aquel diseño y aquí no existen, así que el
   grid NUNCA colapsaba. En un teléfono la página imponía ~556 px de ancho
   mínimo y el resumen quedaba como un bloque salido por la derecha — reporte
   literal del segundo cliente. El checkout no lo sufría porque su colapso sí
   está escrito aquí (checkout-cols, más arriba); éste es su gemelo.
*/
@media (max-width:1023px){
  .organic_nails-carrito [data-r="stack"]{grid-template-columns:1fr !important;}
  /* El des-sticky del resumen ya lo hace la regla general de .organic_nails-resumen
     más abajo: no se repite. */
}

/*
   En el teléfono la fila —foto, nombre, cantidad, subtotal y quitar— no cabe en
   una línea y se desbordaba. Se reordena en rejilla: la foto a la izquierda
   ocupando las dos filas, arriba el nombre y la ✕, abajo la pastilla y el
   subtotal. Sólo bajo 600px; en escritorio sigue en una fila.
*/
@media (max-width:600px){
  .organic_nails-carrito-fila{
    display:grid !important;
    grid-template-columns:52px 1fr auto;
    grid-template-areas:"img info quitar" "img cant sub";
    gap:6px 12px; align-items:center;
  }
  .organic_nails-carrito-fila .pc-cf-img{grid-area:img; width:52px; height:52px; align-self:start;}
  .organic_nails-carrito-fila .pc-cf-info{grid-area:info; min-width:0;}
  .organic_nails-carrito-fila .organic_nails-cant-caja{grid-area:cant; justify-self:start;}
  .organic_nails-carrito-fila .pc-cf-sub{grid-area:sub; justify-self:end; min-width:0 !important;}
  .organic_nails-carrito-fila .remove{grid-area:quitar; justify-self:end;}
}

/*
   La pastilla − 1 + . Una sola definición para la ficha y el carrito: antes la
   caja se estilaba en línea en el carrito y con reglas colgadas de div.product
   en la ficha, y esa segunda vía no aplicaba nunca (la ficha no lleva
   div.product). Aquí, y las dos vistas la usan con la misma clase.
*/
.organic_nails-cant-caja{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--pc-panel); border:1px solid var(--pc-panel-borde);
  border-radius:var(--pc-radio-c); padding:4px 6px;
}
.organic_nails-cant-caja .quantity{display:flex; align-items:center; margin:0;}
.organic_nails-cant-caja input.qty{
  width:40px; min-width:0; text-align:center; font-weight:var(--pc-peso); font-size:15px;
  font-family:var(--pc-cifra);
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:var(--pc-texto) !important; padding:0 !important; height:38px; line-height:38px;
  -moz-appearance:textfield; appearance:textfield;
}
.organic_nails-cant-caja input.qty::-webkit-outer-spin-button,
.organic_nails-cant-caja input.qty::-webkit-inner-spin-button{-webkit-appearance:none; appearance:none; margin:0;}
.pc-cant{
  width:34px; height:38px; border:none; background:transparent; cursor:pointer;
  font-weight:var(--pc-peso); font-size:18px; font-family:inherit; color:var(--pc-gris);
  line-height:1; padding:0;
}
.pc-cant:hover{color:var(--pc-texto);}

/*
   Los botones de respaldo se esconden SÓLO si el JavaScript está vivo. Sin él
   son la única forma de que un cambio de cantidad o la casilla del descuento
   lleguen al servidor: esconderlos siempre dejaría controles muertos que
   parecen funcionar.
*/
.pc-js .organic_nails-actualizar,
.pc-js .organic_nails-aplicar-descuento{display:none;}

/* El resumen acompaña al bajar, como en el diseño. Clase propia y no
   data-r="stick", que en este tema lo usa el header fijo de móvil. */
@media (max-width:1023px){
  .organic_nails-resumen{position:static !important; top:auto !important;}
}

/* El resumen pinta los métodos de envío dentro de su fila: sin viñetas ni
   sangría, que ahí es una lista de opciones y no un listado. */
.organic_nails-resumen #shipping_method{list-style:none; margin:0; padding:0; text-align:right;}
.organic_nails-resumen #shipping_method li{margin:0 0 4px;}
.organic_nails-resumen .woocommerce-shipping-destination,
.organic_nails-resumen .shipping-calculator-button{font-family:var(--pc-mono); font-size:11px; color:var(--pc-gris); font-weight:400;}

/* ── ul.products: los bucles de WooCommerce que NO pasan por el archivo ──── */
/*
   Favoritos, ventas cruzadas, o cualquier plugin que pinte un loop estándar.
   La rejilla de filetes del diseño, y las tarjetas a la MISMA altura: cada
   celda estira su tarjeta (grid stretch) y el margin-top:auto del pie de la
   tarjeta —que ya viene del diseño— hace el resto.
*/
ul.products{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--pc-linea); border:1px solid var(--pc-linea);}
ul.products > li, ul.products > div{margin:0; display:flex; flex-direction:column;}
ul.products > li > [data-producto], ul.products > div[data-producto]{height:100%;}
@media (max-width:1023px){ ul.products{grid-template-columns:repeat(3,1fr);} }
@media (max-width:767px){ ul.products{grid-template-columns:repeat(2,1fr);} }

/* ── La paginación del catálogo, con el lenguaje del diseño ─────────────── */
.organic_nails-paginas .page-numbers{
  width:34px; height:34px; display:inline-grid; place-items:center;
  border:1px solid var(--pc-linea); color:inherit; text-decoration:none;
  font-family:var(--pc-mono); font-size:11px; letter-spacing:.08em;
}
.organic_nails-paginas .page-numbers.current{border-color:currentColor;}
.organic_nails-paginas .page-numbers.dots{border:none; width:auto; padding:0 6px;}