/* ============================================================
   PREMIUM LAB EC — Puente con el marcado de WooCommerce

   WooCommerce genera su propio HTML. Aquí lo traducimos al
   sistema visual del tema en vez de sobrescribir plantillas,
   que es más frágil de mantener entre versiones.
   ============================================================ */

.plec-woo{padding-bottom:clamp(56px,7vw,var(--s9))}
.plec-woo > h1,
.woocommerce-products-header__title{
  font-family:var(--font-display);
  font-size:clamp(30px,4vw,52px);
  letter-spacing:-0.042em;line-height:1.04;
  margin:var(--s6) 0 var(--s5);
}

/* ---------- Grilla de productos ---------- */
/* El shortcode [products] envuelve en .woocommerce.columns-N.
   Se fuerza a ancho completo para que no herede restricciones. */
.woocommerce.columns-1,
.woocommerce.columns-2,
.woocommerce.columns-3,
.woocommerce.columns-4,
.woocommerce.columns-5,
.woocommerce.columns-6{width:100%;display:block}

.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s5);
  margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none}

.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  text-align:left;
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-3);
  border-color:transparent;
}

/* Imagen a sangre, igual que el prototipo */
.woocommerce ul.products li.product a img{
  width:100%;height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  margin:0;
  background:linear-gradient(170deg,#FCFCFC,#F1F1F0);
  transition:transform var(--t-slow) var(--ease-out);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.055)}

.woocommerce ul.products li.product .woocommerce-loop-product__link{
  display:block;overflow:hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);
  font-weight:700;font-size:19px;
  letter-spacing:-0.028em;line-height:1.2;
  padding:var(--s5) var(--s5) 0;
  margin:0;
}

.woocommerce ul.products li.product .price{
  display:block;
  padding:10px var(--s5) 0;
  font-family:var(--font-display);
  font-weight:700;font-size:22px;
  letter-spacing:-0.03em;color:var(--ink);
}
.woocommerce ul.products li.product .price del{
  opacity:.4;font-size:.62em;font-weight:500;margin-right:6px;
}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .price .plec-from{
  display:block;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:3px;
}

.woocommerce ul.products li.product .button{
  margin:var(--s4) var(--s5) var(--s5);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  padding:13px 22px;
  border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);
  font-family:var(--font-display);font-weight:700;font-size:13.5px;
  line-height:1;border:0;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.woocommerce ul.products li.product .button:hover{
  background:var(--ink);color:var(--paper);
  transform:translateY(-2px);box-shadow:var(--sh-ink);
}
.woocommerce ul.products li.product .added_to_cart{
  display:block;padding:0 var(--s5) var(--s5);
  font-size:12.5px;color:var(--muted);
}

/* Etiqueta de oferta */
.woocommerce span.onsale{
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;min-height:0;min-width:0;
  border-radius:var(--r-pill);
  top:14px;left:14px;right:auto;margin:0;line-height:1;
}

/* ---------- Ficha de producto ---------- */
.single-product div.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,var(--s8));align-items:start}
.single-product div.product .woocommerce-product-gallery{width:100%;margin:0;float:none}
.single-product div.product .woocommerce-product-gallery__wrapper img{border-radius:var(--r-xl)}
.single-product div.product .summary{width:100%;margin:0;float:none;display:flex;flex-direction:column;gap:var(--s5)}

.single-product .product_title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.8vw,50px);
  letter-spacing:-0.04em;line-height:1.04;margin:0;
}
/* !important porque WooCommerce y los temas heredados pintan el precio
   con su propio color de acento (salía en oliva). */
.single-product .summary .price,
.single-product .summary .price .amount,
.single-product .summary .price bdi,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.4vw,42px);
  letter-spacing:-0.045em;
  color:var(--ink)!important;
  margin:0;
}
.single-product .summary .price .plec-from{
  display:block;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2)!important;
  margin-bottom:4px;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi{color:var(--ink)!important}

/* Variaciones como pastillas, no como fila de tabla suelta */
.single-product .woocommerce-variation-price .price{font-size:clamp(26px,3vw,36px)}
.single-product .woocommerce-variation-add-to-cart{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s4)}
.single-product .reset_variations{
  font-size:12.5px;color:var(--muted);
  align-self:center;text-decoration:underline;text-underline-offset:3px;
}
.single-product .woocommerce-product-details__short-description{
  font-size:15.5px;line-height:1.65;color:var(--muted);
}

/* ---------- Variaciones como pastillas ----------
   El <select> nativo se oculta pero sigue en el DOM: WooCommerce lo
   necesita para calcular precio, imagen y stock. */
.plec-oculto{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.single-product table.variations{border:0;margin:0;width:100%}
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td{display:block;width:100%;border:0;padding:0}
.single-product table.variations th.label{margin-bottom:var(--s3)}
.single-product table.variations td.value{padding-bottom:var(--s4)}
.single-product table.variations label{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-family:var(--font-mono);font-size:10.5px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  margin:0;
}
/* La presentación elegida se repite en la etiqueta, como en el diseño.
   El <b> lo agrega woo.js. */
.single-product table.variations label b{
  font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
/* "Limpiar" sobra: la pastilla se deselecciona tocándola otra vez. */
.single-product .reset_variations{display:none!important}
/* El precio de la variación se refleja arriba, en el precio principal. */
.single-product .woocommerce-variation-price{display:none}

/* Pastillas generadas por woo.js */
.single-product .vars{display:flex;gap:9px;flex-wrap:wrap}
.single-product .vars .var{
  padding:13px 20px;
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--paper);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:104px;cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.single-product .vars .var b{
  font-family:var(--font-display);font-weight:700;
  font-size:14.5px;letter-spacing:-0.01em;line-height:1;
}
.single-product .vars .var i{
  font-family:var(--font-mono);font-style:normal;
  font-size:10.5px;color:var(--muted-2);
}
.single-product .vars .var:hover{border-color:var(--ink-40);transform:translateY(-2px)}
.single-product .vars .var.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.single-product .vars .var.is-on i{color:rgba(255,255,255,.6)}

/* ---------- Stepper de cantidad ---------- */
.woocommerce .quantity.plec-qty{
  display:flex;align-items:center;
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  overflow:hidden;flex:none;
}
.plec-qty__b{
  width:44px;height:52px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
  font-size:19px;font-weight:500;line-height:1;color:var(--muted);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.plec-qty__b:hover{background:var(--paper-3);color:var(--ink)}
.woocommerce .quantity.plec-qty input.qty{
  width:44px;height:52px;
  border:0!important;border-radius:0;background:transparent;
  text-align:center;padding:0;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  -moz-appearance:textfield;appearance:textfield;
}
.woocommerce .quantity.plec-qty input.qty::-webkit-outer-spin-button,
.woocommerce .quantity.plec-qty input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

/* Cantidad y botón */
.woocommerce .quantity .qty{
  width:74px;height:54px;text-align:center;
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:700;font-size:15px;
}
/* Producto simple: cantidad y boton en una fila.
   Producto variable: la tabla de variaciones va arriba y el bloque
   de compra debajo, asi que no se aplica flex al formulario entero. */
.woocommerce div.product form.cart:not(.variations_form){
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin:0;
}
.woocommerce div.product form.variations_form{margin:0}

/* WooCommerce esconde el bloque de compra hasta elegir variacion.
   Lo dejamos siempre visible: el boton se muestra deshabilitado y
   se activa al elegir, en vez de aparecer de la nada. */
.single-product .single_variation_wrap{display:block!important}
.single-product .woocommerce-variation-add-to-cart{
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s4);
}
.single-product .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button,
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed{
  opacity:.38;cursor:not-allowed;pointer-events:none;
}
.single-product .woocommerce-variation-add-to-cart-disabled .quantity{
  opacity:.38;pointer-events:none;
}
.woocommerce div.product form.cart .button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt{
  flex:1;min-width:190px;height:54px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  padding:0 28px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  border:0;line-height:1;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover{
  background:var(--ink);color:var(--paper);
  transform:translateY(-2px);box-shadow:var(--sh-ink);
}

.woocommerce .product_meta{
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  padding-top:var(--s4);border-top:1px solid var(--line-soft);
}

/* Pestañas */
.woocommerce-tabs{grid-column:1/-1;margin-top:var(--s7)}
.woocommerce-tabs ul.tabs{padding:0;margin:0 0 var(--s6);border-bottom:1px solid var(--line)}
.woocommerce-tabs ul.tabs::before{display:none}
.woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 var(--s5) 0 0;padding:0;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce-tabs ul.tabs li a{
  font-family:var(--font-display);font-weight:700;font-size:14.5px;
  color:var(--muted);padding:0 0 var(--s4);display:block;
  border-bottom:2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--ink)}
.woocommerce-tabs .panel h2{font-size:22px;letter-spacing:-0.03em;margin-bottom:var(--s4)}
.woocommerce-tabs .panel p{font-size:15.5px;line-height:1.7;color:var(--muted)}

/* Relacionados */
.related.products,
.upsells.products{margin-top:clamp(48px,6vw,var(--s9));padding-top:var(--s7);border-top:1px solid var(--line)}
.related.products > h2,
.upsells.products > h2{font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);letter-spacing:-0.032em;margin-bottom:var(--s6)}

/* ---------- Carrito y checkout ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:var(--r-lg);
  border-collapse:separate;border-spacing:0;overflow:hidden;
  background:var(--paper);
}
.woocommerce table.shop_table th{
  font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  background:var(--paper-2);padding:15px var(--s5);border:0;
  border-bottom:1px solid var(--line);
}
.woocommerce table.shop_table td{padding:var(--s5);border:0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.shop_table img{width:78px;border-radius:var(--r-sm)}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3{
  font-family:var(--font-display);font-size:20px;
  letter-spacing:-0.028em;margin-bottom:var(--s5);
}
.woocommerce-cart .cart-collaterals .cart_totals{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,2.6vw,var(--s6));
  width:100%;float:none;
}

/* Formularios */
.woocommerce form .form-row{padding:0;margin:0 0 var(--s4)}
.woocommerce form .form-row label{
  font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:7px;display:block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  width:100%;padding:14px 15px;height:auto;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font-size:15px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-06);
}

/* Métodos de pago */
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;display:flex;flex-direction:column;gap:11px;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:16px 17px;background:var(--paper);
  transition:border-color var(--t-fast) var(--ease);
}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--ink-40)}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-0.02em;text-transform:none;color:var(--ink);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--paper-2);border-radius:var(--r-sm);
  font-size:13px;line-height:1.55;color:var(--muted);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}

/* Avisos */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top:0;border-left:3px solid var(--ink);
  background:var(--paper);border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  font-size:14.5px;padding:var(--s4) var(--s5);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{display:none}
.woocommerce-message .button,
.woocommerce-info .button{
  background:var(--ink);color:var(--paper);border-radius:var(--r-pill);
  padding:9px 18px;font-weight:700;font-size:13px;
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .single-product div.product{grid-template-columns:1fr}
}
@media (max-width:720px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;padding:var(--s3) var(--s3) 0}
  .woocommerce ul.products li.product .price{font-size:19px;padding:8px var(--s3) 0}
  .woocommerce ul.products li.product .button{margin:var(--s3);padding:11px 16px;font-size:12.5px}
  .woocommerce table.shop_table img{width:60px}
}

/* ============================================================
   Carrito lateral (mini-cart de WooCommerce)
   El marcado sale de woocommerce/cart/mini-cart.php y reutiliza
   las clases del prototipo definidas en shop.css.
   ============================================================ */
.cart__list{display:flex;flex-direction:column}
.cart__body .citem__q{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;color:var(--muted);
}
.cart__body .cart__foot{
  border-top:0;padding:var(--s5) 0 0;margin-top:var(--s4);
  border-top:1px solid var(--line-soft);
}
.cart__body .woocommerce-mini-cart__empty-message{
  text-align:center;color:var(--muted);font-size:14.5px;padding:var(--s7) 0;
}
/* WooCommerce inyecta sus propias listas; que no rompan el panel */
.cart__body ul.cart_list,
.cart__body ul.product_list_widget{margin:0;padding:0;list-style:none}
.cart__body .quantity{display:inline}

/* El icono del header es un <button>: que no herede estilos de botón */
button.cart-btn{background:none;padding:0}

.plec-var-nota{
  width:100%;margin:10px 0 0;
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.plec-var-nota[hidden]{display:none!important}