/* ============================================================
   SUPRA CASES — Puente con WooCommerce
   ------------------------------------------------------------
   Esta hoja NO sale del prototipo. El prototipo dibujo la tienda
   con marcado inventado; WooCommerce trae el suyo, y muchas de
   sus clases no se pueden renombrar sin romper su JavaScript
   (.woocommerce-cart-form, .cart_totals, .payment_methods,
   .star-rating, la galeria...). Aqui se les da el aspecto del
   prototipo en vez de sustituirlas.

   Va antes de 07-responsive a proposito: las reglas de movil del
   tema tienen que poder ganarle a lo de aqui sin !important.
   ============================================================ */

.pdp-tags{display:flex;gap:6px;flex-wrap:wrap}
.pdp .lead{margin:0 0 4px}

/* Galeria. Sin carrusel (ver inc/single-product.php): la primera imagen ocupa
   todo el ancho y las demas caen en una tira de miniaturas. */
.pdp-gal .woocommerce-product-gallery{position:relative;border:1px solid var(--linea);
  border-radius:var(--r-g);overflow:hidden;background:var(--blanco)}
.pdp-gal .woocommerce-product-gallery__wrapper{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--linea);margin:0}
.pdp-gal .woocommerce-product-gallery__image{margin:0;background:var(--humo)}
.pdp-gal .woocommerce-product-gallery__image:first-child{grid-column:1/-1}
.pdp-gal .woocommerce-product-gallery__image img{width:100%;height:auto;display:block;
  aspect-ratio:1;object-fit:cover}
.woocommerce-product-gallery__trigger{position:absolute;top:10px;right:10px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:16px;
  line-height:1;background:var(--blanco);border:1px solid var(--linea);
  box-shadow:0 2px 8px rgba(14,14,16,.12)}

/* Precio. .price es de Woo y la leen MercadoPago y los datos estructurados. */
.pdp-precio .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:36px;font-weight:800;letter-spacing:-.035em;color:var(--texto)}
.pdp-precio del{font-size:18px;color:var(--texto-3);font-weight:600;opacity:1}
.pdp-precio ins{text-decoration:none;background:none;color:inherit}
.pdp-precio .woocommerce-Price-currencySymbol{font-size:.62em;font-weight:700}
/* Con modelo elegido, product.js copia el precio exacto dentro de .pdp-precio
   y el duplicado que pinta Woo abajo sobra. */
.supra-var-activa .woocommerce-variation-price{display:none}
.woocommerce-variation-price .price{font-size:22px;font-weight:800;letter-spacing:-.02em}
.woocommerce-variation-description{font-size:14px;color:var(--texto-2);margin:0 0 8px}
.woocommerce-variation-availability{margin:0 0 10px}
.woocommerce-variation-availability p,.stock{margin:0;font-size:13.5px;font-weight:700}
.in-stock{color:var(--exito)}
.out-of-stock,.available-on-backorder{color:var(--alerta)}

/* Selector de variacion. El <select> nativo se queda: es el origen de verdad
   (ver woocommerce/single-product/add-to-cart/variable.php). Sin JavaScript
   se ve el select; con JavaScript se oculta y manda la lista. */
.supra-attr-campo{position:relative}
.supra-attr-campo select{width:100%;height:48px;border:none;padding:0 14px;
  font:inherit;font-size:15px;background:var(--blanco);outline:none;color:var(--texto)}
.supra-oculto{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.modelo{width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--humo-2);font:inherit;cursor:pointer}
.modelo:focus-visible{outline:2px solid var(--negro);outline-offset:-2px}
.modelo.act{background:#FFFBEB}
.modelo.act .modelo-n{font-weight:800}
.modelo.agotado{opacity:.45;cursor:not-allowed}
.modelo-v{width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--linea);color:transparent;transition:background var(--t)}
.modelo-v svg{width:11px;height:11px}
.modelo.act .modelo-v{background:var(--negro);border-color:var(--negro);color:var(--amarillo)}
.modelos-vacio{padding:20px 15px;font-size:14px;color:var(--texto-2);text-align:center}
.reset_variations{display:inline-block;padding:11px 15px;font-size:13px;font-weight:700;
  color:var(--texto-2);border-top:1px solid var(--humo-2);width:100%}
.reset_variations:hover{color:var(--negro);text-decoration:underline}

/* Fila de compra. .single_add_to_cart_button y .quantity las mueve Woo. */
.pdp-acc .quantity{flex:none}
.pdp-acc .single_add_to_cart_button{flex:1}
.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button{opacity:.35;pointer-events:none}
.supra-cant-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.supra-cant-fila b{font-size:14.5px;display:block}
.supra-cant-nota{font-size:13px;color:var(--texto-2);margin-top:2px}
.supra-cant-nota p{margin:0;font-weight:600}

/* Valoraciones. La hoja de Woo trae una tipografia de iconos para las
   estrellas y este tema no la carga, asi que se dibujan con texto. */
.star-rating{position:relative;display:inline-block;width:5.4em;height:1.1em;
  font-size:15px;line-height:1.1;overflow:hidden;letter-spacing:.08em;color:var(--amarillo-osc)}
.star-rating::before{content:'\2605\2605\2605\2605\2605';position:absolute;left:0;top:0;color:var(--humo-2)}
.star-rating span{position:absolute;left:0;top:0;overflow:hidden;padding-top:1.5em;height:0}
.star-rating span::before{content:'\2605\2605\2605\2605\2605';position:absolute;left:0;top:0}
.woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin:6px 0 0}
.woocommerce-review-link{font-size:13px;color:var(--texto-2)}

/* Pestanas. Las clases .wc-tabs y .wc-tab las usa wc-single-product.js para
   alternar los paneles; aqui solo se pintan. */
.supra-tabs{padding:0 0 50px}
.tabs{display:flex;gap:2px;flex-wrap:wrap;list-style:none;margin:0 0 24px;padding:0;
  border-bottom:1px solid var(--linea)}
.tab{margin:0}
.tab a{display:block;padding:12px 16px;margin-bottom:-1px;font-size:13.5px;font-weight:800;
  font-style:italic;text-transform:uppercase;letter-spacing:-.01em;color:var(--texto-2);
  border-bottom:3px solid transparent}
.tab a:hover{color:var(--negro)}
.tab.active a,.tab.act a{color:var(--negro);border-bottom-color:var(--amarillo)}
.prosa p{margin:0 0 1em}
.prosa > h2:first-child{display:none}
/* Descripcion a la izquierda, columna lateral a la derecha. */
.pdp-info{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:46px;align-items:start;padding-bottom:20px}
.pdp-info .supra-tabs{min-width:0}
.pdp-info .prosa{max-width:none}
.pdp-lateral{position:sticky;top:calc(var(--h-header) + 16px);display:grid;gap:16px}
.pdp-lateral .bloque{margin:0}
.pdp-lateral .esc{padding:8px 12px;font-size:14px}
.pdp-ayuda{border:2px solid var(--negro);border-radius:var(--r-g);padding:20px}
.pdp-ayuda h3{font-size:18px;margin:0 0 6px;font-style:italic;text-transform:uppercase}
.pdp-ayuda p{font-size:14px;color:var(--texto-2);margin:0 0 14px}

/* Formulario de resenas dentro de .prosa */
#reviews .commentlist{list-style:none;margin:0 0 26px;padding:0}
#reviews .commentlist li{border-bottom:1px solid var(--linea);padding:16px 0}
#reviews .commentlist li:last-child{border-bottom:none}
#reviews .comment-form label{display:block;font-size:13px;font-weight:700;
  color:var(--texto);margin-bottom:5px}
#reviews .comment-form input[type=text],#reviews .comment-form input[type=email],
#reviews .comment-form textarea{width:100%;border:1.5px solid var(--linea);border-radius:var(--r);
  padding:11px 13px;font:inherit;font-size:14.5px;background:var(--blanco);color:var(--texto)}
#reviews .comment-form textarea{min-height:120px;resize:vertical}
#reviews .comment-form .submit{height:46px;padding:0 24px;border:none;border-radius:var(--r);
  background:var(--amarillo);color:var(--negro);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
#reviews p.stars{display:flex;gap:4px;margin:0 0 14px}
#reviews p.stars a{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r);
  border:1.5px solid var(--linea);font-size:13px;font-weight:800;color:var(--texto-2)}
#reviews p.stars a:hover,#reviews p.stars a.active{background:var(--amarillo);
  border-color:var(--amarillo);color:var(--negro)}

/* Relacionados y venta cruzada */
.supra-seccion{padding:0 0 56px}
.supra-seccion .sec-cab h2{font-size:24px}

/* ============ AVISOS ============
   Deliberadamente NO se sobreescriben notices/{error,success,notice}.php:
   su marcado ya es minimo y una plantilla menos es una plantilla menos que
   se queda obsoleta con cada version de Woo. Aqui solo se pintan.
   Las tres clases las usan wc-cart.js y checkout.js para localizar y
   desplazarse a los avisos, asi que no se tocan. */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-error,.woocommerce-message,.woocommerce-info,
.woocommerce-noreviews,p.no-comments{
  list-style:none;margin:0 0 18px;padding:14px 16px 14px 44px;position:relative;
  border-radius:var(--r-g);font-size:14.5px;font-weight:600;line-height:1.45;
  border:1.5px solid var(--linea);background:var(--humo);color:var(--texto)}
.woocommerce-error li,.woocommerce-message li{margin:0}
.woocommerce-error li+li{margin-top:6px}
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{
  position:absolute;left:15px;top:13px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.woocommerce-message{background:#ECFDF3;border-color:#A7E5C0;color:#0B5C2E}
.woocommerce-message::before{content:'\2713';background:var(--exito)}
.woocommerce-error{background:#FEF2F2;border-color:#F5C2C2;color:#8C1C1C}
.woocommerce-error::before{content:'\0021';background:#B91C1C}
.woocommerce-info{background:#FEF3C7;border-color:#F2D27A;color:var(--alerta)}
.woocommerce-info::before{content:'\0069';background:var(--alerta);font-style:italic}
.woocommerce-error .button,.woocommerce-message .button,.woocommerce-info .button{
  font-size:13px;font-weight:800;text-decoration:underline}
/* El boton de "Ver carrito" mide 38px y el texto del aviso no llega a 22: en
   float se salia por debajo de la caja, porque un float no estira a su padre.
   En fila, el aviso crece con lo mas alto que lleve dentro. El texto del aviso
   es un nodo suelto, y como tal se convierte en un elemento mas de la fila. */
.woocommerce-message,.woocommerce-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}
/* .woocommerce-error no: es un <ul> y en fila pondria sus <li> uno al lado del
   otro. Ahi el boton sigue flotando, que es como Woo lo pinta. */
.woocommerce-error .button{float:right;margin-left:14px}
.woocommerce-error::after{content:'';display:block;clear:both}

/* WooCommerce le pone tabindex="-1" al aviso y le da el foco para que los
   lectores de pantalla lo canten. Chrome lo trata como foco de teclado, asi
   que el aro amarillo de :focus-visible salia rodeando el aviso entero, y
   arriba del todo quedaba medio tapado por la cabecera fija. Se quita el aro
   --el aviso ya se ve, que para eso es un aviso de color con icono-- y se
   deja margen de desplazamiento, para que cuando el navegador lo traiga a la
   vista no lo deje debajo de la cabecera. */
.woocommerce-notices-wrapper>*,.woocommerce-error,.woocommerce-message,.woocommerce-info{
  scroll-margin-top:calc(var(--h-header) + 16px)}
.woocommerce-error[tabindex]:focus-visible,.woocommerce-message[tabindex]:focus-visible,
.woocommerce-info[tabindex]:focus-visible,.woocommerce-notices-wrapper[tabindex]:focus-visible{
  outline:none}

/* ============ CAMPOS DE FORMULARIO ============
   Woo pinta .form-row > label + .woocommerce-input-wrapper > input. Se le da
   el aspecto de .campo del prototipo sin renombrar nada: los nombres de los
   campos y las clases .validate-* son lo que valida checkout.js. */
.form-row{margin-bottom:14px;display:block}
.form-row label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;color:var(--texto-2);margin-bottom:6px}
.form-row label .required{color:#B91C1C;text-decoration:none;border:none}
.form-row .optional{font-weight:600;text-transform:none;letter-spacing:0;color:var(--texto-3)}
.form-row input.input-text,.form-row textarea,.form-row select,
.woocommerce-input-wrapper input,.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select,.select2-container .select2-selection--single{
  width:100%;height:46px;border:1.5px solid var(--linea);border-radius:var(--r);
  padding:0 13px;font:inherit;font-size:15px;background:var(--blanco);
  color:var(--texto);outline:none;transition:border-color var(--t),box-shadow var(--t)}
.form-row textarea,.woocommerce-input-wrapper textarea{height:auto;min-height:84px;
  padding:11px 13px;resize:vertical;line-height:1.5}
.form-row input.input-text:focus,.form-row textarea:focus,.form-row select:focus,
.woocommerce-input-wrapper input:focus,.woocommerce-input-wrapper textarea:focus{
  border-color:var(--amarillo);box-shadow:0 0 0 4px var(--amarillo-sombra)}
.woocommerce-input-wrapper{display:block;width:100%}
.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select{border-color:#B91C1C}
.form-row.woocommerce-validated input.input-text{border-color:#A7E5C0}
.woocommerce-error-message,.form-row .error{font-size:12px;color:#B91C1C;
  font-weight:700;margin-top:5px;display:block}
.form-row-first,.form-row-last{width:calc(50% - 7px);float:left}
.form-row-last{float:right}
.form-row-wide,.form-row-full{clear:both}
.form-row::after{content:'';display:table;clear:both}
.form-row-first::after,.form-row-last::after{content:none}
.woocommerce-form__label-for-checkbox{display:flex!important;align-items:flex-start;gap:9px;
  font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--texto-2)}
.woocommerce-form__input-checkbox{width:17px;height:17px;flex:none;margin:2px 0 0;
  accent-color:var(--negro)}
.woocommerce-password-strength{font-size:12px;font-weight:700;padding:6px 0}
.woocommerce-password-strength.short,.woocommerce-password-strength.bad{color:#B91C1C}
.woocommerce-password-strength.good{color:var(--alerta)}
.woocommerce-password-strength.strong{color:var(--exito)}
.woocommerce-password-hint{font-size:12px;color:var(--texto-3);display:block;margin-top:5px}

/* select2, que Woo usa en pais y estado del checkout */
.select2-container .select2-selection--single{display:flex;align-items:center}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;line-height:1.4;color:var(--texto)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:44px}
.select2-dropdown{border:1.5px solid var(--linea);border-radius:var(--r);overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--amarillo);color:var(--negro)}

/* ============ PEDIDO (pagina del carrito) ============ */
.layout-pedido{grid-template-columns:1fr 340px}
.supra-aside{position:sticky;top:calc(var(--h-header) + 16px)}
.woocommerce-cart-form{margin:0}
.supra-grupo .bloque-cab b{display:flex;align-items:center;gap:10px;min-width:0}
.supra-grupo .bloque-cab img{width:34px;height:34px;border-radius:5px;flex:none;object-fit:cover}
.supra-grupo .bloque-cab .supra-grupo-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supra-grupo .tabla-r td{vertical-align:middle}
.supra-grupo .product-name{font-weight:500}
.supra-grupo .product-name a{border-bottom:1px solid transparent}
.supra-grupo .product-name a:hover{border-bottom-color:var(--negro)}
.supra-grupo .product-remove{width:36px;text-align:right}
.supra-grupo .product-remove a.remove{font-size:17px;line-height:1;color:var(--texto-3);
  display:inline-block;padding:4px 6px;border-radius:var(--r)}
.supra-grupo .product-remove a.remove:hover{color:#B91C1C;background:var(--humo)}
.supra-grupo .variation{margin:2px 0 0;font-size:12px;color:var(--texto-3);font-weight:600}
.supra-grupo .variation dt,.supra-grupo .variation dd{display:inline;margin:0}
.supra-grupo .variation p{margin:0;display:inline}
.supra-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.supra-acciones .button[name=update_cart]{height:44px;padding:0 20px;border-radius:var(--r);
  border:1.5px solid var(--linea);background:var(--blanco);font-size:14px;font-weight:800;
  color:var(--texto);cursor:pointer}
.supra-acciones .button[name=update_cart]:disabled{opacity:.35;cursor:default}
.supra-cupon .coupon{display:flex;gap:6px}
.supra-cupon .coupon input#coupon_code{flex:1;min-width:0;height:44px;border:1.5px solid var(--linea);
  border-radius:var(--r);padding:0 13px;font:inherit;font-size:15px;background:var(--blanco);outline:none}
.supra-cupon .coupon input#coupon_code:focus{border-color:var(--amarillo);
  box-shadow:0 0 0 4px var(--amarillo-sombra)}
.supra-cupon .coupon input#coupon_code.has-error{border-color:#B91C1C}
.coupon-error-notice{font-size:12px;color:#B91C1C;font-weight:700;margin:6px 0 0}
.supra-cupon .coupon button{height:44px;padding:0 18px;flex:none;border-radius:var(--r);
  border:1.5px solid var(--negro);background:var(--negro);color:#fff;font-size:14px;
  font-weight:800;cursor:pointer}

/* Resumen: la tabla de totales de Woo, leida como filas .linea-tot.
   Sigue siendo <table> para no tener que sobreescribir cart-shipping.php ni
   las filas de impuestos y comisiones, que Woo genera por funcion. */
.cart_totals .shop_table{width:100%;border-collapse:collapse}
.cart_totals .shop_table tr{display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;border-bottom:1px solid var(--humo-2)}
.cart_totals .shop_table tr:last-child{border-bottom:none}
.cart_totals .shop_table th,.cart_totals .shop_table td{padding:9px 0;font-size:14px;
  font-weight:600;color:var(--texto-2);text-align:left;border:none}
.cart_totals .shop_table td{text-align:right;color:var(--texto);font-weight:700}
.cart_totals .order-total{border-top:1px solid var(--linea);margin-top:4px}
.cart_totals .order-total th,.cart_totals .order-total td{font-size:20px;font-weight:800;
  color:var(--texto);letter-spacing:-.02em;padding:12px 0 14px}
.cart_totals .cart-discount td{color:var(--exito)}
.cart_totals .woocommerce-remove-coupon{font-size:11.5px;font-weight:700;text-decoration:underline;
  color:var(--texto-3);margin-left:6px}
.cart_totals .includes_tax,.cart_totals small{font-size:11.5px;color:var(--texto-3);font-weight:600}
.wc-proceed-to-checkout{margin-top:14px}

/* Metodos de envio: se leen como los .envio-op del prototipo */
ul#shipping_method,.woocommerce-shipping-methods{list-style:none;margin:0;padding:0;
  display:grid;gap:6px;width:100%}
ul#shipping_method li,.woocommerce-shipping-methods li{display:flex;align-items:center;gap:10px;
  padding:9px 11px;border:1.5px solid var(--linea);border-radius:var(--r);
  font-size:13.5px;text-align:left;margin:0}
ul#shipping_method li input,.woocommerce-shipping-methods li input{width:16px;height:16px;
  accent-color:var(--negro);flex:none;margin:0}
ul#shipping_method li label,.woocommerce-shipping-methods li label{flex:1;margin:0;
  font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--texto)}
.woocommerce-shipping-destination{font-size:12px;color:var(--texto-3);margin:10px 0 0}
.shipping-calculator-button{font-size:12.5px;text-decoration:underline;color:var(--texto-2)}
.shipping-calculator-form{margin-top:12px}

/* ============ CHECKOUT ============ */
.layout-checkout{grid-template-columns:1fr 360px}
#customer_details .col-1,#customer_details .col-2{width:100%}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,#order_review_heading{display:none}
.woocommerce-shipping-fields #ship-to-different-address{margin:0}
#ship-to-different-address label{display:flex;align-items:center;gap:9px;font-size:14px;
  font-weight:700;text-transform:none;letter-spacing:0;color:var(--texto);margin:0;cursor:pointer}
#ship-to-different-address input{width:17px;height:17px;accent-color:var(--negro);margin:0}
.supra-dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* Resumen del pedido en el checkout */
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table tr{display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;border-bottom:1px solid var(--humo-2)}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{
  padding:9px 0;text-align:left;border:none;font-weight:600;color:var(--texto-2)}
.woocommerce-checkout-review-order-table td{text-align:right;color:var(--texto);font-weight:700}
.woocommerce-checkout-review-order-table .cart_item td:first-child{text-align:left;
  color:var(--texto-2);font-weight:600;flex:1;min-width:0}
.woocommerce-checkout-review-order-table .product-name .variation{margin:2px 0 0;
  font-size:11.5px;color:var(--texto-3)}
.woocommerce-checkout-review-order-table .product-name .variation dt,
.woocommerce-checkout-review-order-table .product-name .variation dd{display:inline;margin:0}
.woocommerce-checkout-review-order-table .product-name .variation p{display:inline;margin:0}
.woocommerce-checkout-review-order-table .product-quantity{font-weight:800;color:var(--texto-3)}
.woocommerce-checkout-review-order-table .order-total{border-top:1px solid var(--linea)}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{font-size:20px;font-weight:800;
  color:var(--texto);letter-spacing:-.02em;padding:12px 0 14px}

/* Formas de pago: mismo patron visual que .envio-op */
.woocommerce-checkout-payment{background:none}
ul.payment_methods,.wc_payment_methods{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
ul.payment_methods li{border:1.5px solid var(--linea);border-radius:var(--r);padding:0;margin:0;
  overflow:hidden;background:var(--blanco)}
ul.payment_methods li>input[type=radio]{position:absolute;opacity:0;pointer-events:none}
ul.payment_methods li>label{display:flex;align-items:center;gap:10px;padding:12px 13px;margin:0;
  font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--texto);cursor:pointer}
ul.payment_methods li>label::before{content:'';width:16px;height:16px;flex:none;border-radius:50%;
  border:1.5px solid var(--texto-3);box-shadow:inset 0 0 0 3px var(--blanco)}
ul.payment_methods li.wc_payment_method>input[type=radio]:checked+label::before{
  border-color:var(--negro);background:var(--negro)}
ul.payment_methods li:has(>input[type=radio]:checked){border-color:var(--negro)}
ul.payment_methods li img{max-height:26px;width:auto;margin-left:auto}
ul.payment_methods li .about_paypal{font-size:11.5px;font-weight:600;text-decoration:underline}
.payment_box{margin:0;padding:0 13px 14px 39px;font-size:13px;color:var(--texto-2);
  background:none;border:none}
.payment_box p:last-child{margin-bottom:0}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:14px}
.woocommerce-privacy-policy-text{font-size:12.5px;color:var(--texto-3)}
.woocommerce-privacy-policy-text p{margin:0 0 10px}
#place_order{width:100%}
.woocommerce-checkout #payment .form-row{margin:0}
.blockUI.blockOverlay{background:var(--blanco)!important;opacity:.6!important}

/* Gracias por tu pedido */
.woocommerce-order{max-width:760px;margin:0 auto;padding-bottom:60px}
.woocommerce-thankyou-order-received{font-size:0}
.woocommerce-order-overview{list-style:none;margin:0 0 22px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden}
.woocommerce-order-overview li{background:var(--blanco);padding:13px 15px;font-size:11.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-3)}
.woocommerce-order-overview li strong{display:block;margin-top:5px;font-size:15px;
  font-weight:800;text-transform:none;letter-spacing:-.01em;color:var(--texto)}
.woocommerce-order-details,.woocommerce-customer-details{margin-top:28px}
.woocommerce-order-details__title,.woocommerce-column__title{font-size:20px;margin-bottom:14px}
.woocommerce-table--order-details,.woocommerce-table--order-downloads{width:100%;
  border-collapse:collapse;font-size:14.5px}
.woocommerce-table--order-details th,.woocommerce-table--order-details td{
  padding:10px 0;border-bottom:1px solid var(--linea);text-align:left}
.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child{text-align:right;font-weight:700}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td{font-size:18px;font-weight:800;
  color:var(--texto)}
.woocommerce-columns--addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;margin:0;padding:0;list-style:none}
.woocommerce-columns--addresses address{font-style:normal;font-size:14.5px;color:var(--texto-2);
  line-height:1.6}

/* ============ MI CUENTA ============ */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.woocommerce-MyAccount-navigation li a{display:block;padding:10px 13px;border-radius:var(--r);
  font-size:14px;font-weight:700;color:var(--texto-2)}
.woocommerce-MyAccount-navigation li a:hover{background:var(--humo);color:var(--texto)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--negro);color:#fff}
.woocommerce-MyAccount-content p:first-child{margin-top:0}
.woocommerce-orders-table,.woocommerce-table--order-downloads{width:100%;border-collapse:collapse;
  font-size:14.5px}
.woocommerce-orders-table th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto-3);padding:0 12px 10px;border-bottom:1px solid var(--linea)}
.woocommerce-orders-table td{padding:12px;border-bottom:1px solid var(--humo-2)}
.woocommerce-orders-table__cell-order-actions{text-align:right}
.woocommerce-orders-table .button{font-size:13px;font-weight:800;text-decoration:underline}
.woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.woocommerce-Address-title h2,.woocommerce-Address-title h3{font-size:18px}
.woocommerce-Address-title .edit{font-size:12.5px;text-decoration:underline;color:var(--texto-2)}
.woocommerce-Address address{font-style:normal;font-size:14.5px;color:var(--texto-2);line-height:1.6;
  margin-top:10px}
.woocommerce-pagination ul,.paginacion .nav-links{list-style:none;display:flex;gap:6px;margin:20px 0 0;padding:0}
.woocommerce-pagination a,.woocommerce-pagination span,.paginacion .page-numbers{display:grid;place-items:center;
  min-width:38px;height:38px;padding:0 10px;border:1.5px solid var(--linea);border-radius:var(--r);
  font-size:14px;font-weight:700}
.woocommerce-pagination .current,.paginacion .current{background:var(--negro);color:#fff;border-color:var(--negro)}
.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:13.5px}
.woocommerce-LostPassword{font-size:13px;margin:12px 0 0}
.woocommerce-LostPassword a{text-decoration:underline;color:var(--texto-2)}

/* Mi cuenta: la maqueta sale por CSS y no copiando myaccount/my-account.php.
   El shortcode ya imprime <div class="woocommerce"> con el nav y el
   contenido como hermanos, que es justo la rejilla .layout del prototipo. */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:236px 1fr;
  gap:34px;align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky;
  top:calc(var(--h-header) + 16px)}
/* La pantalla de entrar y registrarse no lleva navegacion: ocupa todo. */
.woocommerce-account:not(.logged-in) .woocommerce{display:block;max-width:960px;margin:0 auto}
#customer_login{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
#customer_login>div{border:1px solid var(--linea);border-radius:var(--r-g);padding:22px}
#customer_login h2,.woocommerce-account h2{font-size:22px;margin-bottom:16px}
.woocommerce-form-login__submit,.woocommerce-form-register__submit,
.woocommerce-Button,.woocommerce-EditAccountForm button[type=submit],
.woocommerce-address-fields button[type=submit],.woocommerce-ResetPassword button[type=submit]{
  height:48px;padding:0 26px;border:none;border-radius:var(--r);background:var(--amarillo);
  color:var(--negro);font:inherit;font-size:15px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.woocommerce-form-login__submit:hover,.woocommerce-form-register__submit:hover{
  background:var(--amarillo-osc)}

/* Venta cruzada, a lo ancho y debajo del pedido (ver inc/cart-checkout.php) */
.supra-cross-sell{padding:10px 0 40px}
.supra-cross-sell h2{font-size:24px;margin-bottom:22px}
.supra-cross-sell .products,.supra-cross-sell .cross-sells{margin:0}

/* Botones sueltos que Woo pinta con class="button" y que sin su hoja
   saldrian como texto plano. */
.woocommerce-MyAccount-content .button,.woocommerce-order .button,
.woocommerce-orders-table .button,.woocommerce-message .button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--linea);
  background:var(--blanco);font-size:13.5px;font-weight:800;color:var(--texto);
  text-decoration:none}
.woocommerce-MyAccount-content .button:hover,.woocommerce-orders-table .button:hover{
  border-color:var(--negro)}

/* ============ PEDIDO: regalo, corte, WhatsApp (inc/pedido.php) ============ */
.cajon-pie .regalos,.cart_totals .regalos{margin-bottom:12px;background:var(--blanco)}
.envio-hoy[hidden]{display:none}
.pedido-wa{display:flex;gap:8px;margin-top:10px}
.pedido-wa .btn{flex:1}
.btn.is-off{opacity:.4;pointer-events:none;cursor:default}
.pedido-pista{font-size:12.5px;color:var(--texto-3);margin:12px 0 0}
.cajon-cta .cupon-nota{margin-bottom:10px}
ul.payment_methods li>label .pago-reco{margin-left:auto;flex:none}
ul.payment_methods li>label img+.pago-reco{margin-left:8px}
.supra-regalo th,.supra-regalo td{font-weight:700}
.gracias-invitado{text-align:left;max-width:560px;margin:0 auto 6px;font-size:13px}
.gracias-invitado a{text-decoration:underline}

/* ============ MI CUENTA: cabecera, escritorio e historial (inc/cuenta.php) ============ */
.cuenta-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.cuenta-cab .pag-titulo{margin:0}
.cuenta-cab .pag-titulo em{font-style:italic;color:var(--texto);box-shadow:inset 0 -.32em 0 var(--amarillo)}
.cuenta-cab p{margin:6px 0 0;color:var(--texto-2);font-size:15px}
.cuenta-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
.cuenta-lateral{position:sticky;top:calc(var(--h-header) + 16px);display:grid;gap:14px}
.cuenta-lateral .bloque{margin:0}
.cuenta-lateral .ficha td:first-child{white-space:nowrap}
.hist-cpo{min-width:0;flex:1 1 260px}
.hist-acc .btn{white-space:nowrap}
.supra-paginas{display:flex;gap:8px;margin-top:16px}