/* ==========================================================================
   TIENDA Y FICHA

   Estilo escrito contra las clases estandar de WooCommerce. Como no hay
   constructor de paginas por debajo, no hace falta un solo !important para
   ganar por especificidad: es la diferencia real de empezar de cero.
   ========================================================================== */
.woo-main{padding:56px 0 96px;min-height:56vh}

/* --- cabecera de la tienda --- */
.woocommerce-products-header{margin-bottom:8px}
.woocommerce-products-header__title,
.woo-main h1.page-title,
.woo-main h1.entry-title{font-family:var(--titulo);font-weight:600;
  font-size:clamp(32px,4vw,48px);letter-spacing:-.03em;line-height:1.08;margin:0 0 10px}
.woocommerce-result-count{font-size:14px;color:var(--tenue);margin:0 0 6px}
.woocommerce-ordering{margin:0 0 26px}
.woocommerce-ordering select{font-size:14px;border:1px solid var(--linea);
  border-radius:0;padding:11px 38px 11px 14px;background-color:var(--papel);
  appearance:none;-webkit-appearance:none}

/* --- rejilla de productos --- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:28px;margin:22px 0 0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto;margin:0;float:none;padding:0;
  display:flex;flex-direction:column;background:var(--papel);
  border:1px solid var(--linea);overflow:hidden;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.woocommerce ul.products li.product:hover{border-color:var(--linea-2);
  box-shadow:0 16px 40px rgba(26,26,25,.09);transform:translateY(-3px)}
.woocommerce ul.products li.product a img{margin:0;width:100%;aspect-ratio:1;
  object-fit:cover;background:var(--papel-3);transition:transform .5s}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--titulo);font-weight:600;font-size:18px;line-height:1.3;
  letter-spacing:-.015em;padding:20px 22px 0;margin:0}
.woocommerce ul.products li.product .price{font-size:18px;font-weight:500;
  color:var(--tinta);padding:8px 22px 0;margin:0;display:block}
.woocommerce ul.products li.product .price del{color:var(--tenue);font-weight:400;font-size:15px}
.woocommerce ul.products li.product .price ins{background:none;color:var(--rosa);text-decoration:none}
.woocommerce ul.products li.product .button{display:block;text-align:center;
  margin:20px 22px 22px;padding:14px 20px;font-size:14px;font-weight:500;
  letter-spacing:.03em;background:var(--tinta);color:#FFFFFF;
  border:1px solid var(--tinta);border-radius:0;
  transition:background .2s,border-color .2s}
.woocommerce ul.products li.product .button:hover{background:var(--rosa);border-color:var(--rosa)}
.woocommerce ul.products li.product .added_to_cart{display:block;margin:0 22px 18px;
  font-size:14px;color:var(--rosa);text-decoration:underline;text-underline-offset:3px}
.woocommerce span.onsale{background:var(--rosa);color:#FFFFFF;font-size:11px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-radius:0;
  padding:7px 12px;min-height:0;min-width:0;line-height:1.2;
  top:14px;left:14px;right:auto;margin:0}

/* --- ficha de producto --- */
.single-product div.product{display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:start}
.single-product div.product .woocommerce-product-gallery{width:100%;float:none;
  opacity:1;margin:0}
.single-product .woocommerce-product-gallery__image{border:1px solid var(--linea);
  background:var(--papel);overflow:hidden}
.single-product .flex-control-thumbs{display:flex;gap:10px;margin:12px 0 0;
  padding:0;list-style:none}
.single-product .flex-control-thumbs li{width:auto;margin:0;float:none}
.single-product .flex-control-thumbs img{width:78px;height:78px;object-fit:cover;
  border:1px solid var(--linea);opacity:.7;cursor:pointer;
  transition:opacity .2s,border-color .2s}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--tinta)}
.single-product div.product .summary{width:100%;float:none;margin:0;
  display:flex;flex-direction:column;gap:18px}
.single-product div.product .summary > *{margin:0}
.single-product h1.product_title{font-family:var(--titulo);font-weight:600;
  font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em;line-height:1.1}
.single-product div.product p.price,
.single-product div.product span.price{font-size:26px;font-weight:500;color:var(--tinta)}
.single-product div.product p.price del{font-size:18px;color:var(--tenue);font-weight:400}
.single-product div.product p.price ins{background:none;color:var(--rosa);text-decoration:none}
.single-product .woocommerce-product-details__short-description{
  color:var(--tinta-2);line-height:1.7;max-width:54ch}
.single-product form.cart{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin:0}
.single-product .quantity input.qty{width:80px;text-align:center;font-size:16px;
  padding:15px 8px;border:1px solid var(--linea);border-radius:0}
.single-product button.single_add_to_cart_button{font-size:16px;font-weight:500;
  letter-spacing:.03em;padding:16px 40px;background:var(--tinta);color:#FFFFFF;
  border:1px solid var(--tinta);border-radius:0;cursor:pointer;
  transition:background .2s,border-color .2s}
.single-product button.single_add_to_cart_button:hover{
  background:var(--rosa);border-color:var(--rosa)}
.single-product .stock.in-stock{color:var(--ok);font-size:15px;font-weight:500}
.single-product .product_meta{font-size:14px;color:var(--tenue);
  padding-top:18px;border-top:1px solid var(--linea);line-height:2}

/* pestanas */
.single-product .woocommerce-tabs{grid-column:1/-1;margin-top:64px;
  padding-top:40px;border-top:1px solid var(--linea)}
.single-product .woocommerce-tabs ul.tabs{list-style:none;margin:0 0 24px;
  padding:0;display:flex;gap:28px;border:0}
.single-product .woocommerce-tabs ul.tabs::before{display:none}
.single-product .woocommerce-tabs ul.tabs li{background:none;border:0;
  border-radius:0;margin:0;padding:0}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{display:none}
.single-product .woocommerce-tabs ul.tabs li a{font-size:15px;font-weight:500;
  color:var(--tenue);padding:0 0 10px;border-bottom:2px solid transparent}
.single-product .woocommerce-tabs ul.tabs li.active a{
  color:var(--tinta);border-bottom-color:var(--rosa)}
.single-product .woocommerce-Tabs-panel{color:var(--tinta-2);line-height:1.75;max-width:76ch}
.single-product .woocommerce-Tabs-panel h2{font-size:20px;margin:0 0 14px}

/* relacionados */
.related.products,.up-sells{grid-column:1/-1;margin-top:72px;padding-top:44px;
  border-top:1px solid var(--linea)}
.related.products > h2,.up-sells > h2{font-family:var(--titulo);font-weight:600;
  font-size:26px;letter-spacing:-.02em;margin:0 0 26px}

/* --- carrito, pago y cuenta --- */
.woocommerce table.shop_table{border:1px solid var(--linea);border-radius:0;
  border-collapse:collapse}
.woocommerce table.shop_table th{font-family:var(--texto);font-weight:500;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);background:var(--papel-2);padding:16px}
.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--linea)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{
  font-family:var(--titulo);font-size:20px;margin:0 0 16px}
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order{display:block;width:100%;text-align:center;
  font-size:16px;font-weight:500;padding:17px 24px;background:var(--tinta);
  color:#FFFFFF;border:1px solid var(--tinta);border-radius:0;cursor:pointer}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover{background:var(--rosa);border-color:var(--rosa)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{width:100%;font-size:16px;padding:13px 14px;
  border:1px solid var(--linea);border-radius:0;background:var(--papel)}
.woocommerce form .form-row label{font-size:14px;font-weight:500;
  margin-bottom:6px;display:block}
.woocommerce-checkout ul.wc_payment_methods{list-style:none;margin:0 0 22px;
  padding:0;border:1px solid var(--linea)}
.woocommerce-checkout ul.wc_payment_methods li{padding:16px;
  border-bottom:1px solid var(--linea);margin:0}
.woocommerce-checkout ul.wc_payment_methods li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  border:1px solid var(--linea)}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--linea)}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation a{display:block;padding:14px 18px;font-size:15px}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--papel-2);
  color:var(--rosa);font-weight:500}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:0;
  font-size:15px;border-top-color:var(--rosa)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--rosa)}

@media(max-width:900px){
  .single-product div.product{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
  .woo-main{padding:32px 0 64px}
  .woocommerce ul.products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:14px 14px 0;font-size:16px}
  .woocommerce ul.products li.product .price{padding:6px 14px 0;font-size:16px}
  .woocommerce ul.products li.product .button{margin:14px;padding:12px}
}

/* --- migas de pan --- */
.migas{font-size:13px;color:var(--tenue);margin:0 0 22px;display:flex;
  flex-wrap:wrap;gap:8px;align-items:center}
.migas a{color:var(--tenue)}
.migas a:hover{color:var(--rosa)}
.migas-sep{color:var(--linea-2)}

/* --- garantias y casos en la ficha --- */
.ficha-garantias{list-style:none;margin:4px 0 0;padding:20px 0 0;
  border-top:1px solid var(--linea);display:grid;gap:11px;
  font-size:14.5px;color:var(--tinta-2)}
.ficha-garantias li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.ficha-garantias li::before{content:"\2713";color:var(--rosa);font-weight:700;
  font-size:12px;line-height:1.6;flex:none}
.ficha-casos{margin:0}
.ficha-casos a{font-size:14px;font-weight:500;color:var(--rosa)}
.ficha-casos a:hover{text-decoration:underline;text-underline-offset:4px}

/* precio por unidad en las tarjetas del catalogo */
.woocommerce ul.products li.product .unidad{padding:4px 22px 0;margin:0;
  font-size:13px;color:var(--tenue)}

/* la pestana de resenas vacia no debe parecer un error */
.single-product .woocommerce-Tabs-panel--reviews .woocommerce-noreviews{
  color:var(--tenue);font-size:15px}

/* --- tramos de descuento por cantidad --- */
.tramos{border:1px solid var(--rosa-suave);background:var(--rosa-tinte);padding:16px 18px}
.tramos-cab{display:block;font-family:var(--titulo);font-weight:600;font-size:14px;
  letter-spacing:-.01em;margin:0 0 12px;color:var(--rosa-hondo)}
.tramos ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tramos li{display:grid;grid-template-columns:44px 74px 1fr;align-items:baseline;
  gap:10px;font-size:14px;color:var(--tinta-2)}
.tramos-n{font-family:var(--titulo);font-weight:600;font-size:16px;color:var(--tinta)}
.tramos-pct{font-weight:500;color:var(--rosa-hondo)}
.tramos-precio{color:var(--tinta)}
.tramos-precio .amount{font-weight:500}
.tramos small{display:block;margin-top:12px;font-size:12.5px;color:var(--tenue)}

/* ==========================================================================
   COMPRA: CARRITO, PAGO Y CUENTA

   Lo que WooCommerce deja con su aspecto de fabrica -- botones lavanda de
   radio 3px, miniaturas de 32px, desplegables select2 de otra familia -- se
   viste con el sistema del tema. Nada de esto cambia comportamiento: son
   color, tamano y disposicion.
   ========================================================================== */

/* --- TODOS los botones de WooCommerce hablan el idioma de la marca --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce input[type="submit"].button,
.woocommerce-page .button{
  background:var(--tinta);color:#FFFFFF;border:1px solid var(--tinta);
  border-radius:0;font-family:var(--texto);font-weight:500;font-size:15px;
  letter-spacing:.03em;line-height:1.2;padding:15px 28px;min-height:48px;
  text-transform:none;text-shadow:none;box-shadow:none;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce-page .button:hover{
  background:var(--rosa);border-color:var(--rosa);color:#FFFFFF}

/* Secundarios: mismo tamano, menos peso. Actualizar y aplicar cupon no
   compiten con el boton de ir a pagar. */
.woocommerce button[name="update_cart"],
.woocommerce .coupon .button,
.woocommerce a.button.wc-backward{
  background:transparent;color:var(--tinta);border-color:var(--linea-2)}
.woocommerce button[name="update_cart"]:hover,
.woocommerce .coupon .button:hover,
.woocommerce a.button.wc-backward:hover{
  background:var(--papel-3);border-color:var(--tinta);color:var(--tinta)}
.woocommerce button[name="update_cart"]:disabled{opacity:.4;cursor:default}

/* --- campos: una sola altura en todo el flujo --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce input.input-text,
.woocommerce #coupon_code,
.woocommerce table.cart td.product-quantity input.qty{
  border:1px solid var(--linea);border-radius:0;background:var(--papel);
  font-family:var(--texto);font-size:16px;padding:13px 14px;min-height:48px;
  color:var(--tinta);box-shadow:none}
.woocommerce form .form-row input.input-text:focus,
.woocommerce input.input-text:focus,
.woocommerce #coupon_code:focus{outline:2px solid var(--rosa);outline-offset:-1px;
  border-color:var(--rosa)}
.woocommerce table.cart td.product-quantity input.qty{width:82px;text-align:center;padding:13px 6px}

/* select2 (pais y provincia) igualado a los demas campos */
.woocommerce .select2-container .select2-selection--single{
  height:48px;border:1px solid var(--linea);border-radius:0;background:var(--papel)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:46px;padding-left:14px;color:var(--tinta);font-size:16px}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:46px;right:8px}
.select2-dropdown{border:1px solid var(--linea);border-radius:0;
  box-shadow:0 14px 34px rgba(26,26,25,.10)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--rosa)}
.select2-search--dropdown .select2-search__field{border:1px solid var(--linea);
  border-radius:0;padding:10px}

/* --- CARRITO --- */
.woocommerce table.shop_table td.product-thumbnail{width:100px}
.woocommerce table.cart img,
.woocommerce table.shop_table td.product-thumbnail img{
  width:84px;height:84px;object-fit:cover;border:1px solid var(--linea);
  background:var(--papel-3);box-shadow:none}
.woocommerce table.cart td.product-name a{font-family:var(--titulo);font-weight:600;
  font-size:16px;letter-spacing:-.015em;color:var(--tinta)}
.woocommerce table.cart td.product-name a:hover{color:var(--rosa)}
.woocommerce table.shop_table td{vertical-align:middle}
.woocommerce a.remove{color:var(--tenue);font-size:19px;font-weight:400;
  width:24px;height:24px;line-height:22px;border-radius:0;background:none}
.woocommerce a.remove:hover{color:var(--rosa);background:none}
.woocommerce .cart .coupon{display:flex;gap:10px;align-items:stretch}
.woocommerce #coupon_code{width:190px;flex:none}
.woocommerce .cart_totals{border:1px solid var(--linea);padding:26px 24px;
  background:var(--papel-2)}
.woocommerce .cart_totals h2{font-size:19px;margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--linea)}
.woocommerce .cart_totals table.shop_table{border:0}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{background:none;padding:11px 0;
  border-top:0;border-bottom:1px solid var(--linea);text-transform:none;
  letter-spacing:0;font-size:15px;color:var(--tinta-2)}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td{border-bottom:0;padding-top:16px;
  font-size:17px;color:var(--tinta)}
.woocommerce .cart_totals tr.order-total .amount{font-family:var(--titulo);
  font-weight:600;font-size:24px;letter-spacing:-.02em}
.woocommerce .wc-proceed-to-checkout{padding:20px 0 0}

/* carrito vacio: una salida clara, no un boton de fabrica perdido */
.woocommerce .cart-empty{font-family:var(--titulo);font-weight:600;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;color:var(--tinta);
  margin:0 0 10px}
.woocommerce .return-to-shop{margin:22px 0 0}

/* --- PAGO: dos columnas con el resumen fijo ---
   El formulario a la izquierda y lo que se va a pagar siempre a la vista.
   Es la disposicion estandar de las tiendas grandes en escritorio; en movil
   vuelve a una sola columna, que es lo que conviene ahi. */
.woocommerce-checkout form.checkout{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,400px);
  grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
.woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1/3}
.woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;
  margin:0 0 18px}
.woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2;
  position:sticky;top:96px;border:1px solid var(--linea);
  background:var(--papel-2);padding:24px 22px}
/* facturacion y envio uno debajo del otro: caben con holgura */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none;margin:0}
.woocommerce-checkout #customer_details .col-2{margin-top:34px}
.woocommerce-checkout h3{font-family:var(--titulo);font-weight:600;font-size:21px;
  letter-spacing:-.025em;margin:0 0 20px}
.woocommerce-checkout form .form-row label{font-size:14px;font-weight:500;
  color:var(--tinta-2);margin-bottom:7px;display:block}
.woocommerce-checkout form .form-row{margin:0 0 16px;padding:0}
.woocommerce-checkout .required{color:var(--rosa);text-decoration:none}
.woocommerce-checkout #order_review table.shop_table{border:0;margin:0}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{background:none;
  padding:12px 0;border-bottom:1px solid var(--linea);border-top:0;
  text-transform:none;letter-spacing:0;font-size:15px}
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td{font-size:17px;color:var(--tinta)}
.woocommerce-checkout #order_review tr.order-total .amount{font-family:var(--titulo);
  font-weight:600;font-size:24px;letter-spacing:-.02em}
.woocommerce-checkout ul.wc_payment_methods{border:1px solid var(--linea);
  background:var(--papel);margin:20px 0 18px;padding:0}
.woocommerce-checkout ul.wc_payment_methods li{padding:15px 16px;margin:0;
  border-bottom:1px solid var(--linea);list-style:none}
.woocommerce-checkout ul.wc_payment_methods li:last-child{border-bottom:0}
.woocommerce-checkout .payment_box{background:var(--papel-3);border-radius:0;
  font-size:14px;margin:12px 0 0;padding:14px}
.woocommerce-checkout .payment_box::before{display:none}
.woocommerce-checkout #place_order{width:100%;min-height:56px;font-size:16px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{font-size:13px;
  color:var(--tenue);margin:0 0 16px}

/* garantias bajo el boton de pago */
.pago-seguro{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;
  font-size:13px;color:var(--tenue)}
.pago-seguro li{display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.pago-seguro li::before{content:"\2713";color:var(--rosa);font-weight:700;
  font-size:11px;flex:none;line-height:1.6}

/* avisos de entrar o usar cupon: barra fina, no bloque de fabrica */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--papel-2);border-top:2px solid var(--rosa);border-radius:0;
  font-size:14px;padding:14px 16px;margin:0 0 18px;color:var(--tinta-2)}

/* --- MI CUENTA --- */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{max-width:440px;
  border:1px solid var(--linea);padding:28px 26px;background:var(--papel-2);
  border-radius:0}
.woocommerce-account form.login .form-row{margin-bottom:16px}
.woocommerce-account .woocommerce-form-login__rememberme{font-size:14px;color:var(--tinta-2)}
.woocommerce-account .lost_password{font-size:14px;margin:14px 0 0}
.woocommerce-account .lost_password a{color:var(--rosa)}
.woocommerce-MyAccount-content{font-size:16px;line-height:1.7;color:var(--tinta-2)}

@media(max-width:1000px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr;row-gap:12px}
  .woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:auto}
  .woocommerce-checkout form.checkout #order_review_heading{grid-column:1;
    grid-row:auto;margin-top:34px}
  .woocommerce-checkout form.checkout #order_review{grid-column:1;grid-row:auto;
    position:static}
}
@media(max-width:620px){
  .woocommerce table.cart img,
  .woocommerce table.shop_table td.product-thumbnail img{width:60px;height:60px}
  .woocommerce table.shop_table td.product-thumbnail{width:auto}
  .woocommerce .cart .coupon{flex-wrap:wrap}
  .woocommerce #coupon_code{width:100%}
}

/* --- correcciones medidas en el navegador --- */

/* El carrito y el pago usan el ancho completo; el resto de paginas siguen
   con su columna de lectura. */
.pag-ancha{padding-top:8px;padding-bottom:80px}

/* La miniatura quedaba en 67px: "max-width:100%" de WooCommerce la recortaba
   al ancho que le tocara a la columna. */
.woocommerce table.cart td.product-thumbnail,
.woocommerce table.shop_table td.product-thumbnail{width:108px}
.woocommerce table.cart td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce table.cart img{max-width:none;width:84px;height:84px}

/* El formulario de tarjeta de Stripe se salia de la columna del resumen y
   provocaba desplazamiento horizontal en toda la pagina. */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review *{min-width:0}
.woocommerce-checkout .wc_payment_methods,
.woocommerce-checkout .payment_box,
.woocommerce-checkout .wc-upe-form,
.woocommerce-checkout .wc-stripe-upe-element,
.woocommerce-checkout #wc-stripe-upe-element,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup{max-width:100%;width:auto;
  box-sizing:border-box;overflow-wrap:anywhere}
.woocommerce-checkout .wc-stripe-upe-element iframe,
.woocommerce-checkout .payment_box iframe{max-width:100%}

/* El propio cajon vive fuera de la pantalla cuando esta cerrado: que no
   cuente para el ancho del documento. */
.cajon,.cajon-fondo{contain:layout}

/* WooCommerce viste sus formularios de acceso con ".woocommerce form.login",
   que pesa mas que un selector por clase del tema. Se iguala el selector en
   vez de recurrir a !important. */
.woocommerce form.login,
.woocommerce form.register{
  border:1px solid var(--linea);border-radius:0;background:var(--papel-2);
  padding:28px 26px;margin:0 0 28px;max-width:440px}
.woocommerce form.login .button,
.woocommerce form.register .button{width:100%}
.woocommerce .woocommerce-form-login__submit{margin:6px 0 0}

/* El ojo de "mostrar contrasena" es un boton, pero no uno de accion. */
.woocommerce .show-password-input,
.woocommerce button.show-password-input{background:none;border:0;min-height:0;
  padding:0;width:auto}
.woocommerce .password-input{display:block;position:relative}

/* Avisos: el color de estado de la marca, no el lavanda de fabrica. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{border-radius:0;border-top:2px solid var(--rosa);
  background:var(--papel-2);color:var(--tinta-2);font-size:15px;
  padding:16px 18px 16px 46px;list-style:none}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--rosa);top:17px;left:18px}
.woocommerce-error{border-top-color:#B3261E}
.woocommerce-error::before{color:#B3261E;top:17px;left:18px}
.woocommerce-message .button,
.woocommerce-info .button{min-height:40px;padding:10px 18px;font-size:14px}

/* El boton de pagar ocupa todo el ancho util de su tarjeta tambien en movil. */
.woocommerce-checkout #order_review .form-row.place-order{margin:0;padding:0}
.woocommerce-checkout #order_review #place_order{width:100%;display:block}

/* ==========================================================================
   FICHA DE PRODUCTO: GALERIA GRANDE Y ZOOM DE PANEL

   La galeria salia a 267px dentro de una columna de 556. La causa no era el
   ancho que yo pedia, sino el peso del selector: WooCommerce impone
   ".woocommerce div.product div.images {width:48%}" (0,3,2) y mi regla
   pesaba (0,3,1). Se iguala por la via limpia -- anadiendo la clase "images"
   que el propio elemento ya trae -- en vez de recurrir a !important.
   ========================================================================== */
.woocommerce div.product div.images.woocommerce-product-gallery{
  width:100%;float:none;margin:0;opacity:1;position:relative}
.woocommerce div.product div.summary.entry-summary{
  width:100%;float:none;margin:0}

/* El marco: cuadrado, limpio y del tamano de la columna. */
.single-product .woocommerce-product-gallery__wrapper{margin:0;width:100%}
.single-product .woocommerce-product-gallery__image{
  position:relative;border:1px solid var(--linea);background:var(--papel);
  aspect-ratio:1;overflow:hidden;margin:0}
.single-product .woocommerce-product-gallery__image > a,
.single-product .woocommerce-product-gallery__image img{
  display:block;width:100%;height:100%;object-fit:contain}
.single-product .woocommerce-product-gallery__image img{padding:clamp(10px,2%,28px)}

/* Lupa a pantalla completa: boton visible, no un icono perdido. */
.single-product .woocommerce-product-gallery__trigger{
  top:14px;right:14px;left:auto;width:42px;height:42px;border-radius:0;
  background:rgba(255,255,255,.94);border:1px solid var(--linea);
  color:var(--tinta);font-size:0;z-index:20;
  box-shadow:0 2px 10px rgba(26,26,25,.08);transition:border-color .2s}
.single-product .woocommerce-product-gallery__trigger:hover{border-color:var(--tinta)}
.single-product .woocommerce-product-gallery__trigger::after{
  content:"";position:absolute;top:12px;left:12px;width:12px;height:12px;
  border:2px solid currentColor;border-radius:50%}
.single-product .woocommerce-product-gallery__trigger::before{
  content:"";position:absolute;top:25px;left:24px;width:9px;height:2px;
  background:currentColor;transform:rotate(45deg)}
.single-product .woocommerce-product-gallery__trigger img{display:none}

/* --- zoom de panel, al estilo de las tiendas grandes ---
   La lente sigue al raton sobre la foto y el panel de al lado muestra esa
   misma zona ampliada desde el archivo original. */
.np-lente{position:absolute;pointer-events:none;display:none;z-index:15;
  border:1px solid rgba(26,26,25,.55);background:rgba(255,255,255,.22);
  box-shadow:0 0 0 9999px rgba(26,26,25,.06)}
.np-panel{position:absolute;top:0;left:calc(100% + 28px);display:none;z-index:70;
  border:1px solid var(--linea);background-color:var(--papel);
  background-repeat:no-repeat;box-shadow:0 22px 60px rgba(26,26,25,.14)}
.np-zoom-activo .np-lente,
.np-zoom-activo .np-panel{display:block}
.np-pista{margin:12px 0 0;font-size:13px;color:var(--tenue);
  display:flex;align-items:center;gap:8px}
.np-pista::before{content:"";width:14px;height:14px;flex:none;
  border:1.6px solid var(--tenue);border-radius:50%}

/* miniaturas: rail horizontal bajo la foto */
.single-product .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;
  margin:12px 0 0;padding:0;list-style:none}
.single-product .flex-control-thumbs li{width:auto;margin:0;float:none}
.single-product .flex-control-thumbs img{width:84px;height:84px;object-fit:contain;
  background:var(--papel);border:1px solid var(--linea);padding:6px;
  opacity:1;cursor:pointer;transition:border-color .2s}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{border-color:var(--tinta)}

/* --- tramos de descuento: sin rosa ---
   El bloque rosa competia con la foto y con el boton de compra. Vuelve al
   papel de la marca: crema, tinta y una linea. El acento se reserva para lo
   que se pulsa. */
.tramos{border:1px solid var(--linea);background:var(--papel-2);padding:18px 20px}
.tramos-cab{display:block;font-family:var(--titulo);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;color:var(--tenue)}
.tramos ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tramos li{display:grid;grid-template-columns:42px 1fr auto;align-items:baseline;
  gap:12px;font-size:14px;color:var(--tinta-2);padding:9px 0;
  border-bottom:1px solid var(--linea)}
.tramos li:last-child{border-bottom:0}
.tramos-n{font-family:var(--titulo);font-weight:600;font-size:16px;color:var(--tinta)}
.tramos-pct{color:var(--tinta-2)}
.tramos-precio{font-family:var(--titulo);font-weight:600;font-size:16px;
  color:var(--tinta);letter-spacing:-.02em;white-space:nowrap}
.tramos-precio .amount{font-weight:600}
.tramos small{display:block;margin-top:12px;font-size:12.5px;color:var(--tenue)}

/* el acento queda para lo que se pulsa */
.ficha-garantias li::before{color:var(--tinta-2)}
.ficha-casos a{color:var(--tinta);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--linea-2)}
.ficha-casos a:hover{color:var(--rosa);text-decoration-color:var(--rosa)}

@media(max-width:1200px){
  /* si el panel no cabe al lado, se muestra encima de la propia foto */
  .np-panel{left:0;top:0;width:100% !important;height:100% !important}
  .np-lente{display:none !important}
}
@media(max-width:900px){
  .np-panel,.np-lente,.np-pista{display:none !important}
}

/* La capa de zoom de WooCommerce se oculta: amplia dentro del marco y sin
   resolucion. Su boton de lupa y su carrusel siguen funcionando igual. */
.single-product .woocommerce-product-gallery img.zoomImg{display:none !important}

/* ==========================================================================
   MENOS MARCOS, MAS AIRE

   Cada caja con borde completo grita "plantilla". Lo que separa de verdad en
   una tienda cara es el espacio y una linea fina donde hace falta, no un
   recuadro alrededor de todo. Se quitan los marcos decorativos y se dejan
   solo las separaciones que informan.
   ========================================================================== */

/* La foto del producto va sobre un fondo suave, sin recuadro. */
.single-product .woocommerce-product-gallery__image{
  border:0;background:var(--papel-3)}
.single-product .flex-control-thumbs img{border:1px solid transparent;background:var(--papel-3)}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{border-color:var(--tinta)}

/* Los tramos: fondo, sin marco. */
.tramos{border:0;background:var(--papel-3);padding:16px 20px}

/* Tarjetas del catalogo: sin borde. La separacion la da el aire, y al pasar
   por encima se levantan. */
.woocommerce ul.products li.product{border:0;background:transparent}
.woocommerce ul.products li.product:hover{box-shadow:none;transform:none}
.woocommerce ul.products li.product a img{background:var(--papel-3);
  transition:transform .5s,opacity .3s}
.woocommerce ul.products li.product:hover a img{transform:scale(1.03)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{padding:16px 0 0}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .unidad{padding:6px 0 0}
.woocommerce ul.products li.product .button{margin:16px 0 0}
.woocommerce ul.products li.product .added_to_cart{margin:0}

/* Pestanas: texto y subrayado, no solapas con borde. */
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:0;background:transparent;border-radius:0;padding:0;margin:0 28px 0 0;
  box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs{border:0;padding:0;margin:0 0 26px}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:0 0 10px;
  border-bottom:2px solid transparent;font-weight:500;color:var(--tenue)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--tinta);border-bottom-color:var(--tinta)}

/* ==========================================================================
   CARRITO MODERNO

   WooCommerce lo sirve como una tabla de seis columnas con cabecera
   ("REMOVE ITEM / THUMBNAIL IMAGE / PRODUCT / PRICE / QUANTITY / SUBTOTAL")
   y los totales debajo. Aqui la MISMA tabla se re-dispone con CSS grid: una
   lista de articulos a la izquierda y una tarjeta de resumen fija a la
   derecha. No se sustituye ninguna plantilla, asi que actualizar, quitar,
   cupones y totales siguen siendo los suyos.
   ========================================================================== */
.woocommerce-cart .woocommerce{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,368px);
  column-gap:clamp(32px,4vw,64px);align-items:start}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart .woocommerce-cart-form{grid-column:1;margin:0}
.woocommerce-cart .cart-collaterals{grid-column:2;width:100%;margin:0}
.woocommerce-cart .cart-collaterals .cart_totals{float:none;width:100%;
  position:sticky;top:96px}

/* la tabla deja de comportarse como tabla */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody{display:block;width:100%;
  border:0;border-collapse:separate}
.woocommerce-cart table.shop_table.cart thead{display:none}
.woocommerce-cart table.shop_table.cart tr.cart_item{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto auto 30px;
  grid-template-areas:
    "img nombre cant total quitar"
    "img precio cant total quitar";
  column-gap:20px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--linea)}
.woocommerce-cart table.shop_table.cart tr.cart_item:first-child{padding-top:0}
.woocommerce-cart table.shop_table.cart tr.cart_item td{
  display:block;padding:0;border:0;background:none;vertical-align:middle}

.woocommerce-cart td.product-thumbnail{grid-area:img}
.woocommerce-cart td.product-name{grid-area:nombre;align-self:end}
.woocommerce-cart td.product-price{grid-area:precio;align-self:start;
  font-size:14px;color:var(--tenue);padding-top:4px}
.woocommerce-cart td.product-quantity{grid-area:cant}
.woocommerce-cart td.product-subtotal{grid-area:total;text-align:right;
  font-family:var(--titulo);font-weight:600;font-size:17px;
  letter-spacing:-.02em;color:var(--tinta);white-space:nowrap}
.woocommerce-cart td.product-remove{grid-area:quitar;text-align:right}

.woocommerce-cart td.product-thumbnail img,
.woocommerce-cart table.cart td.product-thumbnail img{
  width:96px;height:96px;object-fit:contain;padding:8px;
  background:var(--papel-3);border:0;max-width:none}
.woocommerce-cart td.product-name a{font-family:var(--titulo);font-weight:600;
  font-size:17px;line-height:1.3;letter-spacing:-.02em}

/* --- selector de cantidad con menos y mas --- */
.woocommerce-cart .cantidad{display:inline-flex;align-items:stretch;
  border:1px solid var(--linea);background:var(--papel)}
.woocommerce-cart .cantidad button{width:40px;border:0;background:none;
  cursor:pointer;color:var(--tinta-2);font-size:17px;line-height:1;
  padding:0;min-height:46px;transition:background .15s,color .15s}
.woocommerce-cart .cantidad button:hover{background:var(--papel-3);color:var(--tinta)}
.woocommerce-cart .cantidad button:disabled{opacity:.3;cursor:default;background:none}
.woocommerce-cart .cantidad .quantity{margin:0}
.woocommerce-cart .cantidad input.qty,
.woocommerce-cart table.cart .cantidad td.product-quantity input.qty{
  width:46px;min-height:46px;border:0;border-left:1px solid var(--linea);
  border-right:1px solid var(--linea);text-align:center;font-size:15px;
  padding:0;-moz-appearance:textfield}
.woocommerce-cart .cantidad input.qty::-webkit-outer-spin-button,
.woocommerce-cart .cantidad input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* quitar: discreto hasta que se busca */
.woocommerce-cart td.product-remove a.remove{width:30px;height:30px;
  line-height:28px;font-size:20px;color:var(--linea-2)}
.woocommerce-cart td.product-remove a.remove:hover{color:var(--tinta)}

/* fila de acciones: cupon a la izquierda, actualizar a la derecha */
.woocommerce-cart table.shop_table.cart tr:not(.cart_item){display:block}
.woocommerce-cart table.shop_table.cart tr:not(.cart_item) td{
  display:block;padding:24px 0 0;border:0}
.woocommerce-cart .actions{display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between}
.woocommerce-cart .actions .coupon{display:flex;gap:10px;flex:1 1 auto}

/* --- tarjeta de resumen: sombra suave en vez de recuadro --- */
.woocommerce-cart .cart_totals{border:0;background:var(--papel);
  padding:26px 24px;box-shadow:0 2px 6px rgba(26,26,25,.05),
  0 18px 44px rgba(26,26,25,.07)}
.woocommerce-cart .cart_totals h2{font-family:var(--titulo);font-size:13px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);border:0;padding:0;margin:0 0 16px}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{border:0;padding:9px 0}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td{
  padding-top:16px;border-top:1px solid var(--linea)}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
  font-size:13px;color:var(--tenue)}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{margin:0}

/* garantias bajo el boton, igual que en el pago */
.carrito-fia{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;
  font-size:13px;color:var(--tenue)}
.carrito-fia li{display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.carrito-fia li::before{content:"\2713";color:var(--tinta-2);font-weight:700;
  font-size:11px;flex:none;line-height:1.6}

@media(max-width:1000px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr;row-gap:36px}
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{grid-column:1}
  .woocommerce-cart .cart-collaterals .cart_totals{position:static}
}
@media(max-width:620px){
  .woocommerce-cart table.shop_table.cart tr.cart_item{
    grid-template-columns:72px minmax(0,1fr) 30px;
    grid-template-areas:
      "img nombre quitar"
      "img precio quitar"
      "img cant   total";
    row-gap:10px;column-gap:14px;align-items:start}
  .woocommerce-cart td.product-thumbnail img,
  .woocommerce-cart table.cart td.product-thumbnail img{width:72px;height:72px}
  .woocommerce-cart td.product-subtotal{align-self:center}
  .woocommerce-cart .actions{flex-direction:column;align-items:stretch}
  .woocommerce-cart .actions .coupon{flex-wrap:wrap}
}

/* El campo de cantidad conservaba su marco completo y 82px de ancho porque
   una regla anterior del propio tema pesaba mas. Se iguala por especificidad,
   sin !important. */
.woocommerce-cart table.cart td.product-quantity .cantidad input.qty{
  width:46px;min-height:46px;border:0;
  border-left:1px solid var(--linea);border-right:1px solid var(--linea);
  text-align:center;font-size:15px;padding:0}

/* Texto solo para lectores de pantalla: que no ocupe sitio en la caja. */
.woocommerce .screen-reader-text{position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   EL MORADO DE WOOCOMMERCE

   WooCommerce pinta de #7f54b3 -- su morado de marca -- todo boton con la
   clase "alt", que es la que lleva el de anadir al carrito. Su regla pesa
   (0,3,1) y la mia pesaba (0,2,1), asi que ganaba el morado.

   Se iguala anadiendo la clase "alt" que el boton ya trae. No hace falta
   !important: a igual peso manda la hoja que carga despues, y la mia es esa.
   ========================================================================== */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background:var(--tinta);color:#FFFFFF;border:1px solid var(--tinta)}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover{
  background:var(--rosa);border-color:var(--rosa);color:#FFFFFF}
.woocommerce .button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled]{
  background:var(--linea-2);border-color:var(--linea-2);color:var(--papel)}

/* El boton de comprar es la accion principal de la pagina: ancho completo,
   sin marco que lo encoja. */
.woocommerce div.product form.cart button.single_add_to_cart_button.alt{
  flex:1;min-height:56px;padding:16px 30px;font-size:16px;letter-spacing:.01em}

/* ==========================================================================
   EL "BORDE" DE LA FOTO

   No era un borde: era el anillo de foco, que yo habia puesto en rosa vino.
   Al pulsar la foto quedaba marcada con un recuadro de color que se leia como
   un fallo de diseno. El anillo se queda -- hace falta para navegar con
   teclado -- pero en tinta, que es deliberado, y pegado al borde en la
   galeria para que no dibuje un marco flotante.
   ========================================================================== */
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.woocommerce-product-gallery a:focus-visible,
.woocommerce-product-gallery img:focus-visible{outline-offset:-2px}

/* ==========================================================================
   PESTANAS Y RELACIONADOS: MENOS AIRE MUERTO

   Con la pestana de resenas vacia fuera (ver functions.php), lo que queda
   ocupaba 337px para las pestanas y 656px para los relacionados: el 41% de la
   pagina por debajo de lo que vende. Se recorta a la mitad.
   ========================================================================== */
.single-product .woocommerce-tabs{margin-top:40px;padding-top:28px}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin:0 0 18px}
.single-product .woocommerce-tabs .panel{margin-bottom:0}
.single-product .woocommerce-tabs .panel > h2:first-child{display:none}

.related.products,.up-sells{margin-top:44px;padding-top:32px}
.related.products > h2,.up-sells > h2{margin:0 0 20px;font-size:clamp(20px,2vw,26px)}
.related.products ul.products,.up-sells ul.products{margin-top:0}

/* Las tarjetas de relacionados son secundarias: mas bajas que las del
   catalogo, para que no compitan con el producto que se esta mirando. */
.related.products ul.products li.product .woocommerce-loop-product__title{
  font-size:15px;padding-top:12px}
.related.products ul.products li.product .button{margin-top:12px;
  min-height:42px;padding:10px 16px;font-size:14px}
.related.products ul.products li.product .unidad{display:none}

/* ==========================================================================
   CARRITO: SUPERFICIE EN VEZ DE MARCO

   Los que quedaban eran controles, y un control necesita leerse como
   pulsable. Pero un marco de 1px alrededor de cada cosa es lo que abarata:
   las tiendas caras usan superficie -- un fondo suave -- y reservan la linea
   para el foco. Los secundarios (cupon, actualizar) pasan a texto.
   ========================================================================== */
.woocommerce-cart .cantidad{border:0;background:var(--papel-3)}
.woocommerce-cart .cantidad input.qty,
.woocommerce-cart table.cart .cantidad td.product-quantity input.qty{
  border:0;background:transparent}
.woocommerce-cart .cantidad button:hover{background:var(--linea)}

.woocommerce-cart .actions .coupon input#coupon_code{
  border:0;border-bottom:1px solid var(--linea-2);background:transparent;
  padding:10px 2px;min-height:44px}
.woocommerce-cart .actions .coupon input#coupon_code:focus{
  outline:0;border-bottom-color:var(--tinta)}

.woocommerce-cart .actions .coupon button.button,
.woocommerce-cart .actions button[name="update_cart"]{
  border:0;background:transparent;color:var(--tinta-2);padding:10px 4px;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--linea-2);min-height:44px}
.woocommerce-cart .actions .coupon button.button:hover,
.woocommerce-cart .actions button[name="update_cart"]:hover{
  background:transparent;color:var(--tinta);text-decoration-color:var(--tinta)}
.woocommerce-cart .actions button[name="update_cart"]:disabled{
  opacity:.35;text-decoration:none}

/* El aviso de "anadido al carrito": una linea de acento, no un cajon. */
.woocommerce-cart .woocommerce-message,
.woocommerce .woocommerce-message{border-top:2px solid var(--tinta);
  background:var(--papel-3)}

/* El selector de cantidad: superficie limpia.
   La regla anterior pesaba (0,5,3) y la de arriba (0,3,1), asi que seguian
   viendose las dos rayitas verticales. Se iguala el peso por la via del
   selector real -- el td es el PADRE de .cantidad, no al reves. */
.woocommerce-cart table.cart td.product-quantity .cantidad input.qty{
  border:0;background:transparent}

/* El gancho de ahorro: se lee como una oferta, no como texto legal.
   Va en el rosa de la marca, que es el unico sitio donde el color grita algo. */
.ahorro{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--rosa);
  letter-spacing:.01em}
.woocommerce ul.products li.product .ahorro{padding:4px 0 0}
.related.products ul.products li.product .ahorro{display:none}

/* ==========================================================================
   SELECTOR DE IDIOMA SIN BANDERAS

   Dos nombres uno al lado del otro, cada uno escrito en su propio idioma.
   El actual en tinta y con peso; el otro, tenue y pulsable. Sin desplegable
   que abrir y sin banderas que confundan de pais.
   ========================================================================== */
.idioma{display:flex;align-items:center;gap:0;font-size:13px;
  font-family:var(--texto);line-height:1}
.idioma-op{display:inline-flex;align-items:center;justify-content:center;
  color:var(--tenue);text-decoration:none;padding:8px 10px;
  letter-spacing:.01em;white-space:nowrap;transition:color .18s}
.idioma-op:hover{color:var(--tinta)}
.idioma-op.es-actual{color:var(--tinta);font-weight:600}
.idioma-op.es-actual:hover{color:var(--tinta)}

/* Separador: una linea fina entre las dos opciones, no un borde alrededor. */
.idioma-op + .idioma-op{position:relative}
.idioma-op + .idioma-op::before{content:"";position:absolute;left:0;
  top:50%;transform:translateY(-50%);width:1px;height:13px;background:var(--linea-2)}

/* El foco tiene que verse: es un control de navegacion. */
.idioma-op:focus-visible{outline:2px solid var(--tinta);outline-offset:1px;
  border-radius:2px}

/* Si el parseo fallara y se pintara el desplegable del plugin, que al menos
   herede el tamano de la cabecera. */
.idioma-plugin .trp-shortcode-switcher__wrapper{--font-size:13px}

@media(max-width:900px){
  /* En tactil, area de toque de 44px. */
  .idioma-op{padding:13px 10px;font-size:13px}
}

/* ==========================================================================
   LOGO DEL PIE

   El pie va en tinta casi negra, asi que el logo oscuro desaparecia. Es el
   mismo trazo con el color invertido y el fondo recortado.
   ========================================================================== */
.pie-in img{height:34px;width:auto;display:block;margin:0 0 18px}

@media(max-width:760px){
  .pie-in img{height:30px;margin-bottom:14px}
}

/* ==========================================================================
   MI CUENTA

   Estaba servida tal cual la deja WooCommerce: un formulario dentro de un
   recuadro, perdido en 1240px de ancho. Pasa a ser una columna centrada, sin
   marco, con la misma tipografia y el mismo boton que el resto de la tienda.
   ========================================================================== */
.woocommerce-account .woocommerce{max-width:1176px;margin:0 auto}

/* --- sin sesion: solo el formulario, centrado --- */
.woocommerce-account:not(.logged-in) .woocommerce{max-width:460px}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce-form-login{
  border:0;border-radius:0;padding:0;margin:0;background:transparent}
.woocommerce-account .woocommerce-form-login .form-row{padding:0;margin:0 0 18px}
.woocommerce-account form .form-row label{display:block;margin:0 0 7px;
  font-size:13px;font-weight:500;color:var(--tinta-2);letter-spacing:.01em}
.woocommerce-account form .woocommerce-form__label-for-checkbox{display:flex;
  align-items:center;gap:9px;font-size:13.5px;color:var(--tinta-2)}
.woocommerce-account form .woocommerce-form__label-for-checkbox span{font-weight:400}

.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"]{
  width:100%;min-height:48px;padding:12px 14px;font-size:15px;
  border:0;border-bottom:1px solid var(--linea-2);background:var(--papel-3);
  color:var(--tinta);border-radius:0}
.woocommerce-account form .input-text:focus{outline:0;
  border-bottom-color:var(--tinta);background:var(--papel-2)}

.woocommerce-account .woocommerce-form-login__submit{width:100%;margin:6px 0 0}
.woocommerce-account .woocommerce-form-login__rememberme{margin:0 0 16px;display:block}
.woocommerce-account .lost_password{margin:16px 0 0;font-size:13.5px}
.woocommerce-account .lost_password a{color:var(--tinta-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--linea-2)}
.woocommerce-account .lost_password a:hover{color:var(--rosa);text-decoration-color:var(--rosa)}

/* WooCommerce le pone a .woocommerce un clearfix con ::before y ::after
   (content:" ";display:table). Al convertir ese contenedor en rejilla esos dos
   pseudo-elementos PASAN A SER CELDAS: se comian la primera casilla y corrian
   todo lo demas -- el menu acababa ancho a la derecha y el contenido estrecho
   en la fila de abajo. Ya se anulaban para ul.products (arriba); faltaban aqui
   y en el carrito, que tambien es rejilla. Medido en el navegador:
   antes contenido 236px en col.1 / menu 889px en col.2 y en filas distintas;
   despues menu 236px y contenido 889px en la misma fila. */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after,
.woocommerce-cart .woocommerce::before,
.woocommerce-cart .woocommerce::after{display:none}

/* --- con sesion: menu lateral y contenido --- */
.woocommerce-account.logged-in .woocommerce{display:grid;
  grid-template-columns:minmax(200px,236px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation{width:100%;float:none;margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;
  padding:0;display:flex;flex-direction:column}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;border:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;
  padding:12px 0;font-size:14.5px;color:var(--tinta-2);text-decoration:none;
  border-bottom:1px solid var(--linea);transition:color .18s}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--tinta)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--tinta);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none;margin:0}
.woocommerce-account .woocommerce-MyAccount-content p{color:var(--tinta-2)}

@media(max-width:820px){
  .woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr;row-gap:28px}
}

/* El campo de Mi cuenta seguia enmarcado: la regla general de formularios del
   propio tema pesa (0,4,1) y la de arriba (0,3,0). Se iguala por el mismo
   camino -- .form-row input.input-text -- en vez de subir a !important. */
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row input[type="text"],
.woocommerce-account form .form-row input[type="email"],
.woocommerce-account form .form-row input[type="password"]{
  border:0;border-bottom:1px solid var(--linea-2);background:var(--papel-3)}
.woocommerce-account form .form-row input.input-text:focus{
  border-bottom-color:var(--tinta);background:var(--papel-2)}

/* ==========================================================================
   LA LUPA DE LA GALERIA

   WooCommerce escribe el emoji de lupa como TEXTO dentro del boton, y
   WordPress lo sustituye por una imagen de su CDN con
   "img.emoji{display:inline !important}". Encima, la regla
   ".woocommerce div.product div.images .woocommerce-product-gallery__trigger"
   (0,4,3) le pone font-size:2em y ganaba a la mia (0,3,0): salia un emoji de
   34px pegado a la foto.

   Se iguala el peso del selector y el icono se dibuja con los pseudo del
   propio boton. El !important solo va en la imagen del emoji, porque es la
   unica forma de vencer al !important de WordPress.
   ========================================================================== */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  top:14px;right:14px;left:auto;width:42px;height:42px;border-radius:0;
  font-size:0;line-height:0;text-indent:0;overflow:hidden;
  background:rgba(255,255,255,.94);border:0;color:var(--tinta);z-index:20;
  box-shadow:0 1px 3px rgba(26,26,25,.10),0 6px 18px rgba(26,26,25,.10);
  transition:box-shadow .2s,transform .2s}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover{
  box-shadow:0 2px 6px rgba(26,26,25,.14),0 10px 26px rgba(26,26,25,.16);
  transform:translateY(-1px)}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger img,
.single-product .woocommerce-product-gallery__trigger img.emoji{
  display:none !important}

/* el aro y el mango de la lupa */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{
  content:"";position:absolute;top:12px;left:12px;width:13px;height:13px;
  border:2px solid currentColor;border-radius:50%;background:none}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before{
  content:"";position:absolute;top:26px;left:25px;width:9px;height:2px;
  background:currentColor;border-radius:1px;transform:rotate(45deg)}

/* ==========================================================================
   TARJETA DE PRODUCTO CON CUERPO

   Se veian vacias por dos motivos distintos, y conviene no confundirlos:

   1. Falta de DATOS. Las tiendas grandes llenan la tarjeta con estrellas,
      valoraciones, variantes y fecha de entrega. Aqui no hay ni una resena y
      los productos no tienen ficha, asi que no habia nada que poner bajo el
      titulo. Lo unico real que si existe -- cuantas unidades se han vendido --
      ahora se ensena.

   2. Falta de PESO VISUAL. Al quitar los marcos, la foto quedo flotando en
      blanco sobre blanco. La solucion no es devolver el borde, sino darle
      superficie: la imagen se apoya en un panel de color, ocupa mas, y la
      tarjeta entera reacciona al pasar por encima.
   ========================================================================== */

/* --- la foto: panel propio, cuadrado y con aire --- */
.woocommerce ul.products li.product a img,
.rejilla .ficha-img img{
  background:var(--papel-3);
  aspect-ratio:1;object-fit:contain;
  padding:clamp(14px,6%,30px);
  width:100%;height:auto;margin:0;
  transition:transform .45s cubic-bezier(.2,.6,.2,1)}

/* Toda la tarjeta responde, no solo la imagen: da sensacion de objeto. */
.woocommerce ul.products li.product,
.rejilla .ficha{
  display:flex;flex-direction:column;
  transition:transform .25s ease}
.woocommerce ul.products li.product a,
.rejilla .ficha-img{display:block;overflow:hidden;background:var(--papel-3)}
.woocommerce ul.products li.product:hover a img,
.rejilla .ficha:hover .ficha-img img{transform:scale(1.045)}
.woocommerce ul.products li.product:hover,
.rejilla .ficha:hover{transform:translateY(-3px)}

/* --- la informacion, en una escala clara ---
   titulo -> precio -> lo que empuja a comprar. Cada linea con su peso. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.rejilla .ficha h3{
  font-size:16px;line-height:1.32;letter-spacing:-.015em;
  padding:14px 0 0;margin:0}
.woocommerce ul.products li.product .price,
.rejilla .ficha .precio{
  font-family:var(--titulo);font-weight:600;font-size:18px;
  letter-spacing:-.02em;color:var(--tinta);padding:8px 0 0}

/* prueba social: discreta, pero es lo que mas convence sin resenas */
.vendidas{margin:6px 0 0;font-size:12.5px;color:var(--tenue);
  letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.vendidas::before{content:"";width:5px;height:5px;border-radius:50%;
  background:#3F9A63;flex:none}
.woocommerce ul.products li.product .vendidas{padding:0}

/* el ahorro va debajo, en el acento de la marca */
.ahorro{margin:5px 0 0}

/* el boton cierra la tarjeta, siempre abajo aunque el texto sea desigual */
.woocommerce ul.products li.product .button,
.rejilla .ficha .btn{margin-top:auto}
.woocommerce ul.products li.product .ficha-txt,
.rejilla .ficha .ficha-txt{display:flex;flex-direction:column;flex:1}

/* --- rejilla con mas aire entre tarjetas --- */
.woocommerce ul.products{column-gap:clamp(18px,2.2vw,30px);
  row-gap:clamp(30px,3.4vw,48px)}

@media(max-width:600px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .rejilla .ficha h3{font-size:15px}
  .woocommerce ul.products li.product:hover,
  .rejilla .ficha:hover{transform:none}
}

/* --- el tamano del envase, bajo el titulo ---
   En cosmetica "50 ml" es dato de compra, no letra pequena: sin el, el cliente
   no sabe si $49.99 es caro o barato. */
.tamano{margin:5px 0 0;font-size:12.5px;color:var(--tenue);letter-spacing:.02em}
.woocommerce ul.products li.product .tamano{padding:0}

/* --- la rebaja: el precio final, no el porcentaje ---
   Va en el acento de la marca porque es lo que mueve a subir la cantidad. */
.rebaja{margin:5px 0 0;font-size:13px;font-weight:600;color:var(--rosa);
  letter-spacing:.01em}
.woocommerce ul.products li.product .rebaja{padding:0}
.related.products ul.products li.product .rebaja,
.related.products ul.products li.product .tamano{display:none}

/* ==========================================================================
   TARJETAS ALINEADAS Y SIN AIRE MUERTO

   Se desalineaban porque cada producto tiene distinto numero de lineas: unos
   llevan precio por unidad, otros no; unos llevan contador de ventas, otros
   no. Cada tarjeta apilaba lo suyo y las lineas caian a distinta altura.

   Estirar las tarjetas no lo arregla -- solo reparte el hueco. Lo que hace
   falta es que TODAS compartan la misma retícula de filas: el titulo de una
   a la altura del titulo de la otra, el precio con el precio. Eso es subgrid:
   la tarjeta y su enlace heredan las filas de la rejilla comun.

   Cada elemento va a una fila FIJA, asi que si a un producto le falta el
   tamano, esa fila queda vacia en su tarjeta pero las de abajo no suben.
   ========================================================================== */
@supports (grid-template-rows: subgrid) {

  .woocommerce ul.products{
    display:grid;
    grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}

  /* 7 filas: foto · titulo · tamano · precio · rebaja · ventas · boton */
  .woocommerce ul.products li.product{
    grid-row:span 7;
    display:grid;
    grid-template-rows:subgrid;
    row-gap:0}

  .woocommerce ul.products li.product > a.woocommerce-loop-product__link{
    grid-row:span 6;
    display:grid;
    grid-template-rows:subgrid;
    row-gap:0}

  .woocommerce ul.products li.product a img               {grid-row:1}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{grid-row:2}
  .woocommerce ul.products li.product .tamano             {grid-row:3}
  .woocommerce ul.products li.product .price              {grid-row:4}
  .woocommerce ul.products li.product .unidad,
  .woocommerce ul.products li.product .rebaja             {grid-row:5}
  .woocommerce ul.products li.product .vendidas           {grid-row:6}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart      {grid-row:7;margin-top:14px}

  /* La misma retícula en la portada, que usa marcado propio. */
  .rejilla{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
  .rejilla .ficha{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0}
  .rejilla .ficha .ficha-img{grid-row:1}
  .rejilla .ficha .ficha-txt{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:0}
  .rejilla .ficha h3        {grid-row:1}
  .rejilla .ficha .tamano   {grid-row:2}
  .rejilla .ficha .precio   {grid-row:3}
  .rejilla .ficha .unidad,
  .rejilla .ficha .rebaja   {grid-row:4}
  .rejilla .ficha .vendidas {grid-row:5}
  .rejilla .ficha .btn      {grid-row:6;margin-top:14px}
}

/* --- menos aire entre lineas ---
   Las tarjetas respiraban de mas: entre el precio y el contador de ventas
   cabia otra linea entera. Se aprieta la escala vertical sin tocar la
   separacion entre tarjetas, que si hace falta. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.rejilla .ficha h3{padding-top:12px;margin:0}
.tamano{margin-top:3px}
.woocommerce ul.products li.product .price,
.rejilla .ficha .precio{padding-top:5px}
.unidad,.rebaja{margin-top:3px}
.vendidas{margin-top:5px}

@media(max-width:1100px){ .woocommerce ul.products,.rejilla{--cols:3} }
@media(max-width:820px) { .woocommerce ul.products,.rejilla{--cols:2} }
@media(max-width:480px) { .woocommerce ul.products,.rejilla{--cols:1} }

/* El panel de color es de la FOTO, no de la tarjeta.
   El enlace de WooCommerce envuelve tambien el titulo y el precio, asi que
   pintarle el fondo tenia el texto sobre un bloque beige. El color vuelve a
   donde corresponde -- solo detras de la imagen -- y la tarjeta respira en
   blanco. */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link,
.rejilla .ficha,
.rejilla .ficha .ficha-txt{background:transparent}
.woocommerce ul.products li.product > a.woocommerce-loop-product__link{overflow:visible}

/* La foto conserva su panel, y es ella la que se recorta al ampliarse. */
.woocommerce ul.products li.product a img,
.rejilla .ficha-img img{background:var(--papel-3)}
.rejilla .ficha-img{background:var(--papel-3);overflow:hidden}
.woocommerce ul.products li.product a img{
  overflow:hidden;border-radius:0}

/* ==========================================================================
   MI CUENTA — LAS SUBPAGINAS (pedidos, direcciones, datos, descargas)

   Se habia estilizado el acceso y el menu lateral, pero NO lo que hay dentro
   de cada apartado: la tabla de pedidos, las direcciones y los formularios
   seguian con el aspecto por defecto de WooCommerce (recuadros redondeados,
   grises de sistema, avisos con icono azul) que no pega con el resto.

   Se respeta la regla de la casa: nada de !important. Donde WooCommerce pesa
   (0,2,1) se contesta con (0,3,1) por el mismo camino.
   ========================================================================== */

/* --- avisos dentro de la cuenta (ej. "aun no hay pedidos") --- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message{
  background:var(--papel-2);border:0;border-top:2px solid var(--rosa);
  border-radius:0;color:var(--tinta-2);font-size:15px;line-height:1.7;
  padding:22px 24px;margin:0 0 20px;display:block;overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before{
  content:none}
/* OJO: en este aviso WooCommerce imprime el BOTON ANTES del texto. Con flex y
   margin-left:auto el boton se iba a la derecha y se llevaba el texto detras.
   Se deja el float:right que ya usa WooCommerce, que con el boton primero es
   justo lo que hace falta: texto a la izquierda, boton a la derecha. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button{
  float:right;margin:0 0 0 22px}

/* --- tabla de pedidos --- */
.woocommerce-account .woocommerce table.woocommerce-orders-table{
  width:100%;border:0;border-collapse:collapse;border-radius:0;margin:0}
.woocommerce-account .woocommerce table.woocommerce-orders-table th{
  background:transparent;border:0;border-bottom:1px solid var(--linea-2);
  padding:0 16px 12px 0;text-align:left;font-family:var(--texto);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue)}
.woocommerce-account .woocommerce table.woocommerce-orders-table td{
  background:transparent;border:0;border-bottom:1px solid var(--linea);
  padding:18px 16px 18px 0;font-size:15px;color:var(--tinta-2);
  vertical-align:middle}
.woocommerce-account .woocommerce table.woocommerce-orders-table tr:last-child td{
  border-bottom:0}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a{
  font-weight:600;color:var(--tinta);text-decoration:none}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:hover{
  color:var(--rosa)}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total{
  color:var(--tinta);font-weight:500}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
  text-align:right;padding-right:0}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button{
  padding:9px 18px;font-size:13.5px;background:transparent;color:var(--tinta);
  border:1px solid var(--linea-2);border-radius:0;font-weight:500;
  letter-spacing:.02em;transition:border-color .18s,color .18s,background .18s}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button:hover{
  border-color:var(--tinta);background:var(--tinta);color:#FFF}
.woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status{
  font-size:13.5px;letter-spacing:.02em;color:var(--tinta)}

/* --- en movil la tabla se apila: se ve la etiqueta de cada celda --- */
@media(max-width:640px){
  .woocommerce-account .woocommerce table.woocommerce-orders-table thead{display:none}
  .woocommerce-account .woocommerce table.woocommerce-orders-table tr{
    display:block;border-bottom:1px solid var(--linea);padding:16px 0}
  .woocommerce-account .woocommerce table.woocommerce-orders-table td{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    border:0;padding:5px 0;text-align:right}
  .woocommerce-account .woocommerce table.woocommerce-orders-table td::before{
    content:attr(data-title);font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--tenue);font-weight:600;text-align:left}
  .woocommerce-account .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{
    justify-content:flex-end;padding-top:12px}
}

/* --- direcciones: dos columnas de verdad, sin floats --- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;margin:26px 0 0}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{
  width:auto;float:none;padding:0}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--linea);padding:0 0 10px;margin:0 0 16px}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3{
  font-family:var(--titulo);font-size:17px;font-weight:600;margin:0;
  color:var(--tinta);letter-spacing:-.01em}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit{
  font-size:13.5px;color:var(--rosa);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--rosa-suave)}
.woocommerce-account .woocommerce-MyAccount-content address{
  font-style:normal;font-size:15px;line-height:1.85;color:var(--tinta-2)}

/* --- detalle de un pedido --- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details{
  margin:34px 0 0}
.woocommerce-account .woocommerce-MyAccount-content h2{
  font-family:var(--titulo);font-size:19px;font-weight:600;color:var(--tinta);
  margin:0 0 16px;letter-spacing:-.01em}
.woocommerce-account .woocommerce table.order_details,
.woocommerce-account .woocommerce table.shop_table.order_details{
  width:100%;border:0;border-collapse:collapse;border-radius:0}
.woocommerce-account .woocommerce table.order_details th,
.woocommerce-account .woocommerce table.order_details td{
  border:0;border-bottom:1px solid var(--linea);padding:14px 16px 14px 0;
  font-size:15px;text-align:left}
.woocommerce-account .woocommerce table.order_details tfoot td,
.woocommerce-account .woocommerce table.order_details tfoot th{
  color:var(--tinta);font-weight:500}

/* --- formularios de la cuenta (datos, cambio de contrasena, direccion) --- */
.woocommerce-account .woocommerce-MyAccount-content form .form-row{
  padding:0;margin:0 0 20px}
.woocommerce-account .woocommerce-MyAccount-content fieldset{
  border:0;border-top:1px solid var(--linea);padding:26px 0 0;margin:32px 0 0}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend{
  font-family:var(--titulo);font-size:17px;font-weight:600;color:var(--tinta);
  padding:0;margin:0 0 6px}
.woocommerce-account .woocommerce-MyAccount-content form .button{margin-top:8px}
.woocommerce-account .woocommerce-MyAccount-content em{
  display:block;margin-top:6px;font-size:13px;color:var(--tenue);font-style:normal}

/* --- paginacion de pedidos --- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination{
  margin:28px 0 0;display:flex;gap:10px}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .button{
  background:transparent;color:var(--tinta);border:1px solid var(--linea-2);
  border-radius:0;padding:10px 20px;font-size:14px}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .button:hover{
  border-color:var(--tinta);background:var(--tinta);color:#FFF}

/* ==========================================================================
   MI CUENTA — ACABADO

   Funcionaba pero no estaba terminada: una lista de enlaces sueltos a la
   izquierda y dos cajas de aviso. Se le da el mismo lenguaje que al resto de
   la tienda -- panel crema, tipografia Archivo en los titulos, rosa solo como
   acento, filetes finos, cero esquinas redondeadas -- y sitio para respirar.
   ========================================================================== */

/* La columna del menu, un poco mas ancha para que quepa "Payment methods"
   sin partirse, y el contenido con mas aire al lado. */
.woocommerce-account.logged-in .woocommerce{
  grid-template-columns:minmax(224px,272px) minmax(0,1fr);
  gap:clamp(32px,4.5vw,64px)}

/* --- el menu, como panel --- */
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--papel-2);padding:6px 26px 16px;
  position:sticky;top:102px}
body.admin-bar .woocommerce-account .woocommerce-MyAccount-navigation{top:134px}

.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;position:relative;padding:15px 0;
  font-size:14.5px;letter-spacing:.01em;color:var(--tinta-2);
  border-bottom:1px solid var(--linea);text-decoration:none;
  transition:color .18s}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--tinta)}

/* el apartado abierto: tinta, seminegrita y un cuadradito rosa al margen */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--tinta);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after{
  content:"";position:absolute;right:0;top:50%;margin-top:-2.5px;
  width:5px;height:5px;background:var(--rosa)}

/* "Log out" no es un apartado mas: se separa y baja de tono */
.woocommerce-account .woocommerce-MyAccount-navigation
  li.woocommerce-MyAccount-navigation-link--customer-logout a{
  border-bottom:0;margin-top:10px;padding-top:18px;
  border-top:1px solid var(--linea-2);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.woocommerce-account .woocommerce-MyAccount-navigation
  li.woocommerce-MyAccount-navigation-link--customer-logout a:hover{color:var(--rosa)}

/* --- avisos: informan, no alarman --- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message{
  background:var(--papel-2);border-top:1px solid var(--rosa);
  padding:24px 26px;margin:0 0 18px;font-size:14.5px}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button{
  padding:11px 22px;font-size:13.5px;background:var(--tinta);color:#FFF;
  border:1px solid var(--tinta);border-radius:0;font-weight:500;
  letter-spacing:.02em;transition:background .2s,border-color .2s}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button:hover{
  background:var(--rosa);border-color:var(--rosa)}

/* --- "aun no hay pedidos": deja de ser un aviso y pasa a ser una invitacion.
   Se apoya en la clase de cuerpo del apartado (woocommerce-orders) y en que
   este aviso es siempre el ultimo del contenido. --- */
.woocommerce-orders .woocommerce-MyAccount-content > .woocommerce-info:last-child{
  background:transparent;border-top:1px solid var(--linea);
  text-align:center;padding:70px 32px 74px;
  font-family:var(--titulo);font-size:19px;font-weight:500;
  letter-spacing:-.01em;color:var(--tinta);line-height:1.5}
.woocommerce-orders .woocommerce-MyAccount-content > .woocommerce-info:last-child .button{
  float:none;display:inline-block;margin:26px 0 0;padding:15px 32px;font-size:14px}

/* --- movil ---
   OJO: este bloque va DESPUES del @media(max-width:820px) que ya existe mas
   arriba, asi que la regla de columnas de aqui lo pisaba y el menu se quedaba
   en dos columnas: 272px de menu y 31px de contenido. Hay que repetir el
   apilado aqui. Medido: 375px de ancho -> menu y contenido a 335px, apilados,
   sin desborde horizontal. */
@media(max-width:820px){
  .woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr;row-gap:26px}
  .woocommerce-account .woocommerce-MyAccount-navigation{position:static;padding:4px 22px 14px}
  body.admin-bar .woocommerce-account .woocommerce-MyAccount-navigation{top:auto}
  .woocommerce-orders .woocommerce-MyAccount-content > .woocommerce-info:last-child{
    padding:52px 20px 56px;font-size:17px}
}


/* ==========================================================================
   EL PANEL DE MI CUENTA

   Los dos parrafos que trae WooCommerce ("Hello X (not X? Log out)" y la
   explicacion de lo que ya dice el menu) se ocultan; en su lugar entra el
   bloque que imprime np_panel_cuenta() desde functions.php.
   ========================================================================== */

/* fuera el texto por defecto -- solo en el panel, no en los demas apartados */
.woocommerce-account:not(.woocommerce-orders):not(.woocommerce-edit-account)
  .woocommerce-MyAccount-content > p:not([class]){display:none}

/* Se escribe con el peso del contenedor (0,3,1) porque mas arriba hay un
   .woocommerce-account .woocommerce-MyAccount-content h2{font-size:19px} que,
   con (0,3,0), le ganaba a un .np-cuenta-hola suelto y dejaba el saludo del
   tamano de un subtitulo. */
.woocommerce-account .woocommerce-MyAccount-content h2.np-cuenta-hola{
  font-family:var(--titulo);font-size:clamp(26px,3vw,34px);font-weight:600;
  letter-spacing:-.02em;color:var(--tinta);margin:0 0 8px;line-height:1.15}
.np-cuenta-lede{
  font-size:16px;line-height:1.6;color:var(--tinta-2);margin:0 0 34px;
  max-width:52ch}

/* --- el ultimo pedido --- */
.np-ultimo{border-top:1px solid var(--tinta);padding:18px 0 22px;margin:0 0 38px}
.np-ultimo-etq{display:block;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 12px}
.np-ultimo-fila{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
  font-size:15px;color:var(--tinta-2)}
.np-ultimo-fila b{font-size:17px;color:var(--tinta);font-weight:600}
.np-estado{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rosa-hondo);background:var(--rosa-tinte);padding:4px 11px}
.np-ultimo-total{color:var(--tinta);font-weight:500}
.np-ultimo-ver{margin-left:auto;font-size:14px;color:var(--tinta);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--linea-2);transition:text-decoration-color .18s}
.np-ultimo-ver:hover{text-decoration-color:var(--rosa);color:var(--rosa)}

/* --- accesos: cuatro puertas, no una lista --- */
/* 300px y no 232: con 232 entraban tres y la cuarta puerta se quedaba sola en
   la fila de abajo. Con 300 caben dos por fila y quedan 2x2, que es lo que
   pide una rejilla de cuatro. */
.np-accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:var(--linea)}
.np-acceso{display:block;background:var(--papel);padding:26px 24px 30px;
  text-decoration:none;transition:background .2s}
.np-acceso:hover{background:var(--papel-2)}
.np-acceso-tit{display:block;font-family:var(--titulo);font-size:17px;
  font-weight:600;color:var(--tinta);letter-spacing:-.01em;margin:0 0 8px;
  position:relative;padding-right:22px}
/* la flecha aparece al pasar por encima, no antes */
.np-acceso-tit::after{content:"→";position:absolute;right:0;top:0;
  color:var(--rosa);opacity:0;transform:translateX(-5px);
  transition:opacity .2s,transform .2s}
.np-acceso:hover .np-acceso-tit::after{opacity:1;transform:translateX(0)}
.np-acceso-txt{display:block;font-size:14px;line-height:1.6;color:var(--tinta-2)}

/* ==========================================================================
   EL MENU LATERAL, AFINADO
   Se veia a cajas: el panel crema por fuera y cada enlace con su filete
   dentro. Se quita el fondo del panel y se deja solo la retícula de filetes,
   que es el lenguaje del resto del sitio.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:transparent;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  border-top:1px solid var(--tinta)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  padding:14px 2px;font-size:14.5px}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after{
  right:2px}

@media(max-width:820px){
  .np-cuenta-lede{margin-bottom:26px}
  .np-ultimo-ver{margin-left:0}
  .np-accesos{grid-template-columns:1fr}
}