/* =========================================================
   CUADROS MODERNOS · solo en WordPress
   Lo que el prototipo no tiene: la barra de administración, las páginas con contenido del editor
   (carrito, pago, mi cuenta) y la descripción de las categorías.
   ========================================================= */

/* con la barra de WordPress arriba (sesión iniciada), la cabecera fija baja lo mismo */
body.admin-bar .cab { top: 32px; }
@media (max-width: 782px) { body.admin-bar .cab { top: 46px; } }

/* páginas con contenido de WordPress: carrito, finalizar compra, mi cuenta y otras */
.pagina-wp { min-height: 50vh; }
.pagina-wp-tit { font-family: var(--display); font-weight: 300; font-size: var(--t-h2, 2.4rem); margin: .6rem 0 1.6rem; text-wrap: balance; }
.contenido-wp { max-width: 72rem; line-height: 1.7; }
.contenido-wp p, .contenido-wp ul, .contenido-wp ol { margin: 0 0 1rem; }
.contenido-wp a { border-bottom: 1px solid currentColor; }
.lista-wp { list-style: none; padding: 0; display: grid; gap: .8rem; }

/* WooCommerce dentro de las páginas: botones y avisos con la paleta del sitio */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.wc-block-components-button:not(.is-link) {
  background: var(--tinta); color: var(--hueso); border-radius: 0; font-family: var(--texto);
  letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; font-weight: 600; padding: .95rem 1.6rem;
}
.woocommerce .button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--grafito); color: var(--hueso); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: #8A5A3C; background: var(--lino); }
.woocommerce-message::before, .woocommerce-info::before { color: #8A5A3C; }

/* carrito, pago y mi cuenta con la identidad de Cuadros Modernos (04/10/2026): fuera el violeta y el lila de
   fábrica de WooCommerce. WooCommerce pinta con estas variables; además se pisan los botones ".alt" y la caja
   de pagos, que tienen más especificidad que las reglas de arriba. */
body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account, body.woocommerce-page {
  --wc-primary: #171310; --wc-primary-text: #FAF7F4;
  --wc-secondary: #F2ECE6; --wc-secondary-text: #171310;
  --wc-highlight: #8A5A3C; --wc-highligh-text: #FAF7F4;
  --wc-content-bg: #fff; --wc-subtext: #5C534C;
  --wc-form-border-color: #D8CEC5; --wc-form-border-radius: 0;
  accent-color: #171310;
}
body .woocommerce button.button.alt, body .woocommerce a.button.alt, body .woocommerce input.button.alt,
body .woocommerce #payment #place_order, body .woocommerce-page #payment #place_order,
body .woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--tinta); color: var(--hueso); border-radius: 0; font-family: var(--texto);
  letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; font-weight: 600; padding: 1.05rem 2rem;
}
body .woocommerce button.button.alt:hover, body .woocommerce a.button.alt:hover, body .woocommerce input.button.alt:hover,
body .woocommerce #payment #place_order:hover, body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: #3a322c; color: var(--hueso);
}
body .woocommerce button.button:focus-visible, body .woocommerce a.button:focus-visible { outline: 2px solid #8A5A3C; outline-offset: 2px; }
/* botón apagado ("Actualizar carrito" hasta que cambie una cantidad): WooCommerce le pone color: inherit y
   quedaba letra tinta sobre fondo tinta */
body .woocommerce button.button:disabled, body .woocommerce button.button:disabled[disabled] {
  background: var(--arena); color: var(--grafito); padding: .95rem 1.6rem; opacity: 1; cursor: not-allowed;
}
/* cupón del carrito: WooCommerce lo deja en 80px y con el relleno nuevo no se leía "Código de cupón" */
body.woocommerce-cart .woocommerce .coupon #coupon_code { width: 13rem; max-width: 100%; }
body.woocommerce-cart .woocommerce td.product-thumbnail img { width: 96px; max-width: none; height: auto; }
/* caja de medios de pago: lino con borde arena, el detalle de cada medio en hueso */
body.woocommerce-checkout #payment { background: var(--lino); border: 1px solid var(--arena); border-radius: 0; }
body.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--arena); }
body.woocommerce-checkout #payment div.payment_box { background: var(--hueso); color: var(--grafito); border-radius: 0; }
body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--hueso); }
body.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 500; color: var(--tinta); }
/* campos y tablas: bordes finos piedra, sin esquinas redondeadas */
body .woocommerce form .form-row input.input-text, body .woocommerce form .form-row textarea, body .woocommerce form .form-row select,
body .woocommerce .select2-container .select2-selection, body .woocommerce .quantity .qty, body .woocommerce #coupon_code {
  border: 1px solid var(--piedra); border-radius: 0; background: #fff; color: var(--tinta);
}
body .woocommerce form .form-row input.input-text, body .woocommerce #coupon_code { padding: .75rem .9rem; }
body .woocommerce form .form-row input.input-text:focus, body .woocommerce form .form-row textarea:focus,
body .woocommerce #coupon_code:focus { border-color: var(--tinta); outline: 1px solid var(--tinta); outline-offset: 0; }
body .woocommerce table.shop_table { border: 1px solid var(--arena); border-radius: 0; background: #fff; }
body .woocommerce table.shop_table th, body .woocommerce table.shop_table td { border-top-color: var(--arena); }
body.woocommerce-checkout h3, body.woocommerce-cart h2, body.woocommerce-account h2 { font-family: var(--display); font-weight: 300; }
body .woocommerce a:not(.button) { color: var(--tinta); }
body .woocommerce form .form-row .required { color: #8A5A3C; }

/* el botón de WhatsApp del plugin Click to Chat (del sitio viejo) queda oculto: el tema trae el suyo, que
   además mide cada clic. Al lanzar se puede desactivar el plugin. */
#ht-ctc-chat, .ht-ctc, .ht_ctc_chat_greetings_box, .ht-ctc-chat { display: none !important; }
/* el carrito flotante del plugin Side Cart (del sitio viejo) también: el carrito está en la cabecera del tema */
/* el plugin trae .xoo-wsc-basket[style*="block"] { display:flex !important }: hay que ganarle en especificidad */
html body .xoo-wsc-basket, html body .xoo-wsc-basket[style], html body .xoo-wsc-sc-cont { display: none !important; }

/* descripción de la categoría cargada en WooCommerce (texto que Google ya tenía indexado) */
.cat-desc { border-top: var(--borde); }
.texto-cat { max-width: 68ch; color: var(--grafito); line-height: 1.75; font-size: .95rem; }
.texto-cat h2, .texto-cat h3 { font-family: var(--display); font-weight: 300; margin: 1.4rem 0 .6rem; }