/* CRKB – layout de productos variables: imagen izquierda (sticky), precio + selector derecha.
   Todo esta limitado a .crkb-variable, que crkb.js agrega solo si hay form.variations_form. */

.crkb-variable {
  display: grid !important;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.crkb-variable > * { grid-column: 1 / -1; }

.crkb-variable > .woocommerce-product-gallery,
.woocommerce div.product.crkb-variable div.images.woocommerce-product-gallery { /* gana a position:relative de woocommerce.css */
  grid-column: 1;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  position: sticky;
  top: 90px; /* debajo del header fijo */
  align-self: start;
}
.crkb-variable > .summary {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

.crkb-variable .woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
.crkb-variable .woocommerce-product-gallery.crkb-flash .woocommerce-product-gallery__wrapper {
  animation: crkb-flash .45s ease;
}
@keyframes crkb-flash {
  0%   { opacity: .25; transform: scale(.97); }
  100% { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .crkb-variable .woocommerce-product-gallery.crkb-flash .woocommerce-product-gallery__wrapper { animation: none; }
}

/* Precio: el de la variacion elegida reemplaza al rango */
.crkb-variable .woocommerce-variation-price { display: none !important; }
.crkb-variable .summary > .price { font-weight: 700; line-height: 1.2; }

/* Botones propios (solo si crkb-selector-peso.php no corrio) */
.crkb-variable select.crkb-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.crkb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin: 6px 0 4px; }
.crkb-swatch {
  min-height: 44px; padding: 6px 4px; border: 1.5px solid currentColor; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
.crkb-swatch[aria-pressed="true"] { background: var(--crkb-negro, #111); color: #fff; border-color: var(--crkb-negro, #111); }
.crkb-swatch:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.crkb-swatch:focus-visible,
.crkb-variable .crkb-peso-btn:focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }

.crkb-variable .crkb-peso-btn:disabled { cursor: not-allowed; }
.crkb-variable .crkb-limpiar {
  display: inline-block; margin-top: 8px; padding: 0 2px; min-height: 44px; min-width: 44px;
  background: none; border: 0; color: inherit; font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer;
}
.crkb-variable .crkb-limpiar[hidden] { display: none; }
.crkb-variable .crkb-limpiar:focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }

.crkb-variable .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 8px; }
.crkb-variable .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 120px; min-width: 0; min-height: 46px; white-space: normal; }

/* Movil: apilado. Imagen a todo el ancho arriba; el cambio de foto se ve en las
   miniaturas de los botones (pedido de Jonathan, 2026-10-20: lado a lado se veia
   como version escritorio y la foto quedaba de 144 px). */
@media (max-width: 640px) {
  .crkb-variable { grid-template-columns: minmax(0, 1fr); }
  .crkb-variable > .woocommerce-product-gallery,
  .woocommerce div.product.crkb-variable div.images.woocommerce-product-gallery {
    grid-column: 1;
    grid-row: auto;
    position: relative;
    top: auto;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 16px !important;
  }
  .crkb-variable > .summary { grid-column: 1; grid-row: auto; display: flex; flex-direction: column; }
  /* el texto corto baja debajo del selector para que los botones queden cerca de la foto */
  .crkb-variable > .summary > form.variations_form { order: 3; }
  .crkb-variable > .summary > .woocommerce-product-details__short-description { order: 5; margin-top: 12px; }
  .crkb-variable > .summary > .product_meta { order: 6; }
  .crkb-variable .flex-control-thumbs,
  .crkb-variable .woocommerce-product-gallery__trigger { display: none !important; }
  .crkb-variable .crkb-peso-head { display: none !important; }
  .crkb-variable .crkb-peso-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .crkb-variable .crkb-peso-btn { min-height: 44px; padding: 4px !important; }
  .crkb-variable .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
}
@media (max-width: 359px) {
  .crkb-variable .crkb-peso-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Escritorio */
@media (min-width: 641px) {
  .crkb-variable { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); column-gap: 32px; }
  .crkb-variable .summary > .price { font-size: 1.6rem; }
}

/* Pestanas Descripcion / Informacion adicional: en movil no caben en una fila
   (352 px en 314) y la segunda bajaba. Comparten la fila en cualquier ficha. */
@media (max-width: 640px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs { flex-wrap: nowrap; gap: 6px; padding-left: 0; padding-right: 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { flex: 1 1 0; min-width: 0; margin: 0; padding-left: 6px; padding-right: 6px; text-align: center; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { letter-spacing: .06em; font-size: .72rem; line-height: 1.25; white-space: normal; }
}

/* Barra fija de movil con el peso elegido (la arma crkb.js) */
.crkb-preview {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--crkb-blanco, #fff); border-bottom: 1px solid var(--crkb-linea, #E4E4E4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06); cursor: pointer;
  transform: translateY(-120%); visibility: hidden; transition: transform .2s ease, visibility .2s;
}
.crkb-preview.is-on { transform: none; visibility: visible; }
.crkb-preview img { width: 64px; height: 64px; object-fit: contain; background: var(--crkb-suave, #EFEDE7); border-radius: 6px; mix-blend-mode: multiply; }
.crkb-preview-t { font-size: .8rem; color: var(--crkb-gris, #6B6B6B); line-height: 1.2; }
.crkb-preview-v { font-weight: 700; font-size: 1rem; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .crkb-preview { transition: none; } }
@media (min-width: 641px) { .crkb-preview { display: none; } }