/* Miguelitos Kids - Formulario de compra: variaciones como muestras y contador */

/* --------------------------------------------------- estructura del form */
.mk-pdp.mk-pdp form.cart{margin:0;display:flex;flex-direction:column;gap:20px}
.mk-pdp.mk-pdp form.cart:not(.variations_form){flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:14px}
.mk-pdp.mk-pdp form.cart table.variations{
  width:100%;margin:0;border:0;border-collapse:collapse;background:none;display:block}
.mk-pdp.mk-pdp form.cart table.variations tbody{display:flex;flex-direction:column;gap:20px;width:100%}
.mk-pdp.mk-pdp form.cart table.variations tr{display:block;width:100%;background:none;border:0}
.mk-pdp.mk-pdp form.cart table.variations th,
.mk-pdp.mk-pdp form.cart table.variations td{
  display:block;width:100%;padding:0;margin:0;border:0;background:none;text-align:left;font-weight:400;line-height:1.4}
.mk-pdp.mk-pdp form.cart table.variations th.label{margin-bottom:11px}
.mk-pdp.mk-pdp form.cart table.variations th.label label{
  display:block;margin:0;font-size:12.5px;font-weight:600;color:var(--mk-ink);line-height:1.4}

/* El select nativo queda oculto pero sigue enviando el valor.
   La clase la anade el JS, asi que si el JS falla el select sigue visible. */
.mk-pdp.mk-pdp form.cart .variations select.mk-vari__select{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0;opacity:0;pointer-events:none}

/* --------------------------------------------------------- muestras ---- */
.mk-vari__opts{display:flex;flex-wrap:wrap;gap:9px}
.mk-pdp.mk-pdp .mk-vari__opts button.mk-vari{
  min-height:0;min-width:0;margin:0;padding:10px 18px;
  border:1px solid var(--mk-line);border-radius:var(--mk-pill);
  background:#fff;color:var(--mk-ink-2);box-shadow:none;
  font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.4;
  cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.mk-pdp.mk-pdp .mk-vari__opts button.mk-vari:hover{
  background:#fff;border-color:rgba(47,109,194,.5);color:var(--mk-blue-solid)}
.mk-pdp.mk-pdp .mk-vari__opts button.mk-vari.is-on,
.mk-pdp.mk-pdp .mk-vari__opts button.mk-vari.is-on:hover{
  background:var(--mk-blue-solid);border-color:var(--mk-blue-solid);color:#fff;font-weight:600}
.mk-pdp.mk-pdp .mk-vari__opts button.mk-vari.is-off,
.mk-pdp.mk-pdp .mk-vari__opts button.mk-vari.is-off:hover{
  background:#fff;border-color:var(--mk-line);color:var(--mk-ink-3);
  opacity:.4;cursor:not-allowed;text-decoration:line-through}

.mk-pdp.mk-pdp .mk-vari__opts--color{gap:13px}
.mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color{
  position:relative;width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid rgba(0,0,0,.14);box-shadow:none;
  font-size:0;line-height:0;text-decoration:none;transition:transform .15s,border-color .15s}
.mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color:hover{
  transform:scale(1.07);border-color:rgba(0,0,0,.26)}
.mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color.is-on,
.mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color.is-on:hover{
  outline:2px solid var(--mk-blue-solid);outline-offset:3px;border-color:rgba(0,0,0,.14)}
.mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color.is-off,
.mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color.is-off:hover{
  opacity:.3;transform:none;text-decoration:none;cursor:not-allowed}
.mk-vari__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.mk-pdp.mk-pdp form.cart a.reset_variations{
  display:inline-block;margin:0;padding:0;font-size:11.5px;font-weight:500;
  color:var(--mk-blue-solid);text-decoration:none}
.mk-pdp.mk-pdp form.cart a.reset_variations:hover{text-decoration:underline;color:var(--mk-blue-deep)}

/* ------------------------------------------------ panel de la variacion */
.mk-pdp.mk-pdp .woocommerce-variation.single_variation{margin:0 0 4px}
.mk-pdp.mk-pdp .woocommerce-variation-description p{font-size:13px;line-height:1.7;color:var(--mk-ink-2);margin:0 0 8px}
.mk-pdp.mk-pdp .woocommerce-variation-price{margin:0 0 8px}
.mk-pdp.mk-pdp .woocommerce-variation-price .price,
.mk-pdp.mk-pdp .woocommerce-variation-price .woocommerce-Price-amount{
  font-size:22px;font-weight:700;color:var(--mk-blue-solid)}
.mk-pdp.mk-pdp .woocommerce-variation-availability p{margin:0;font-size:12px;color:var(--mk-green-ink)}
.mk-pdp.mk-pdp p.stock.in-stock{margin:0;font-size:12.5px;color:var(--mk-green-ink)}
.mk-pdp.mk-pdp p.stock.out-of-stock{margin:0;font-size:12.5px;color:#B3261E}

/* ----------------------------------------------- contador y boton ---- */
.mk-pdp.mk-pdp .woocommerce-variation-add-to-cart,
.mk-pdp.mk-pdp form.cart .variations_button{
  display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin:0}

.mk-pdp.mk-pdp .quantity{
  display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;margin:0;padding:4px;
  border:1px solid var(--mk-line);border-radius:var(--mk-pill);background:#fff}
.mk-pdp.mk-pdp .quantity input.qty{
  width:46px;height:40px;padding:0;margin:0;border:0;background:transparent;box-shadow:none;
  text-align:center;font-family:inherit;font-size:14px;font-weight:600;color:var(--mk-ink);
  -moz-appearance:textfield;appearance:textfield}
.mk-pdp.mk-pdp .quantity input.qty::-webkit-outer-spin-button,
.mk-pdp.mk-pdp .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.mk-pdp.mk-pdp .quantity label.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mk-pdp.mk-pdp .quantity button.mk-qty__btn{
  width:32px;height:32px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:50%;
  background:var(--mk-navpill);color:var(--mk-blue-solid);box-shadow:none;
  display:grid;place-content:center;cursor:pointer;flex:0 0 auto;transition:background-color .15s}
.mk-pdp.mk-pdp .quantity button.mk-qty__btn:hover:not(:disabled){background:var(--mk-lightblue);border:0;color:var(--mk-blue-deep)}
.mk-pdp.mk-pdp .quantity button.mk-qty__btn:disabled{
  background:var(--mk-grey-soft);color:var(--mk-ink-3);cursor:default;opacity:.75;border:0}

.mk-pdp.mk-pdp form.cart button.single_add_to_cart_button{
  flex:1 1 210px;min-height:50px;min-width:0;padding:14px 32px;margin:0;border:0;
  border-radius:var(--mk-pill);background:var(--mk-blue-solid);color:#fff;box-shadow:none;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background-color .16s}
.mk-pdp.mk-pdp form.cart button.single_add_to_cart_button:hover{
  background:var(--mk-blue-deep);color:#fff;border:0}
.mk-pdp.mk-pdp form.cart button.single_add_to_cart_button.disabled,
.mk-pdp.mk-pdp form.cart button.single_add_to_cart_button.disabled:hover,
.mk-pdp.mk-pdp form.cart button.single_add_to_cart_button:disabled{
  background:var(--mk-grey-soft);color:var(--mk-ink-3);cursor:not-allowed;border:0}

/* ----------------------------------- muestras informativas (shortcode) */
.mk-colorset{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mk-colorset__item{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-ink-2);
  border:1px solid var(--mk-line);border-radius:var(--mk-pill);padding:5px 13px 5px 6px}
.mk-colorset__dot{width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:0 0 auto}

@media (max-width:640px){
  .mk-pdp.mk-pdp .woocommerce-variation-add-to-cart,
  .mk-pdp.mk-pdp form.cart .variations_button{gap:10px}
  .mk-pdp.mk-pdp form.cart button.single_add_to_cart_button{flex:1 1 100%}
  .mk-pdp.mk-pdp .quantity{width:100%;justify-content:space-between}
  .mk-pdp.mk-pdp .quantity input.qty{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mk-pdp.mk-pdp .mk-vari__opts--color button.mk-vari--color:hover{transform:none}
}