/* ═══════════════════════════════════════════════════
   op-fix.css — tienda, carrito y pago
   v2 — Solo variables del tema: sirve en claro y oscuro.
   ═══════════════════════════════════════════════════ */

/* ── 1. "Ver carrito": aparece al pasar el raton ─────
   En la tarjeta del producto solo estorba hasta que
   agregas algo. En tactil se muestra siempre.          */
.added_to_cart,
.added_to_cart.wc-forward {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--ff2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ly) !important;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .22s, transform .22s, color .2s;
}
.added_to_cart:hover { color: var(--lm) !important; }
.added_to_cart:focus-visible { outline: 2px solid var(--lc); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .prod-card .added_to_cart,
  .wk-item .added_to_cart,
  li.product .added_to_cart {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
  }
  .prod-card:hover .added_to_cart,
  .prod-card:focus-within .added_to_cart,
  .wk-item:hover .added_to_cart,
  li.product:hover .added_to_cart,
  li.product:focus-within .added_to_cart {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ── 2. Boton Volver: flotante, nunca encima del titulo
   Antes iba en el flujo con margen negativo y se montaba
   sobre el encabezado de la tienda.                     */
.op-back {
  position: fixed;
  top: 92px;
  left: 20px;
  z-index: 45;
  margin: 0;
  float: none;
  background: var(--bg1);
  border: 1px solid var(--bd1);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}
@media (max-width: 1320px) {
  /* Sin espacio a los lados: pasa a esquina inferior. */
  .op-back {
    top: auto;
    bottom: 22px;
    left: 18px;
    padding: 10px 16px;
    box-shadow: 0 6px 22px rgba(0,0,0,.4);
  }
}

/* ── 3. Carrito: articulos a la izquierda, total fijo ──  */
@media (min-width: 900px) {
  .op-page-content .woocommerce > form.woocommerce-cart-form { width: 100%; }
  .op-page-content .woocommerce-cart-form + .cart-collaterals,
  .op-page-content .cart-collaterals { width: 100%; }
}

.op-page-content .cart-collaterals .cart_totals { width: 100%; float: none; }
.op-page-content .cart_totals > h2 {
  font-family: var(--ff1);
  font-size: 26px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t1);
  margin: 0 0 18px;
}

/* Boton de eliminar: circulo visible, no una "x" perdida. */
.op-page-content .shop_table td.product-remove { width: 54px; text-align: center; }
.op-page-content a.remove,
.op-page-content .product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--bd2);
  border-radius: 50%;
  color: var(--t2) !important;
  background: transparent !important;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.op-page-content a.remove:hover {
  background: var(--red) !important;
  border-color: var(--red);
  color: #fff !important;
}
.op-page-content a.remove:focus-visible { outline: 2px solid var(--lc); outline-offset: 2px; }

/* Cantidad: campo centrado y con tamaño de dedo. */
.op-page-content .quantity input.qty {
  width: 78px !important;
  text-align: center;
  padding: 10px 6px !important;
  -moz-appearance: textfield;
}
.op-page-content .quantity input.qty::-webkit-outer-spin-button,
.op-page-content .quantity input.qty::-webkit-inner-spin-button { opacity: 1; height: 26px; }

/* Fila del producto: imagen y nombre alineados. */
.op-page-content .shop_table td.product-thumbnail { width: 92px; }
.op-page-content .shop_table td.product-thumbnail img {
  width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--bd1);
}
.op-page-content .shop_table td.product-name a {
  font-family: var(--ff3);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--t1);
}
.op-page-content .shop_table td.product-name a:hover { color: var(--ly); }

/* Botones de accion del carrito: separados, no pegados. */
.op-page-content .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.op-page-content .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.op-page-content .coupon #coupon_code { min-width: 190px; flex: 0 1 240px; }
.op-page-content .wc-proceed-to-checkout { padding: 18px 0 0; }
.op-page-content .wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; }

/* ── 4. Pago: rejilla explicita ─────────────────────
   Sin filas explicitas, el resumen se auto-colocaba en
   la fila 2 y dejaba media pantalla vacia.              */
@media (min-width: 900px) {
  .op-page-content .woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    gap: 20px 38px;
    align-items: start;
  }
  .op-page-content #customer_details            { grid-column: 1; grid-row: 1 / span 2; }
  .op-page-content h3#order_review_heading      { grid-column: 2; grid-row: 1; margin-top: 0; }
  .op-page-content #order_review,
  .op-page-content .woocommerce-checkout-review-order { grid-column: 2; grid-row: 2; position: sticky; top: 96px; }
  .op-page-content .woocommerce-NoticeGroup,
  .op-page-content .woocommerce-form-coupon-toggle,
  .op-page-content .checkout_coupon { grid-column: 1 / -1; }
}

/* Las dos columnas flotadas de WooCommerce, apiladas. */
.op-page-content #customer_details .col2-set,
.op-page-content .woocommerce .col2-set { display: block; width: 100%; }
.op-page-content #customer_details .col-1,
.op-page-content #customer_details .col-2,
.op-page-content .woocommerce .col2-set .col-1,
.op-page-content .woocommerce .col2-set .col-2 {
  float: none; width: 100%; margin: 0 0 8px; padding: 0;
}

/* Campos en pareja donde tiene sentido. */
@media (min-width: 620px) {
  .op-page-content .woocommerce-billing-fields__field-wrapper,
  .op-page-content .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .op-page-content .form-row-wide,
  .op-page-content .form-row.notes { grid-column: 1 / -1; }
}

/* Titulos de seccion */
.op-page-content .woocommerce-billing-fields > h3,
.op-page-content .woocommerce-shipping-fields > h3,
.op-page-content .woocommerce-additional-fields > h3,
.op-page-content h3#order_review_heading {
  font-family: var(--ff1);
  font-size: 26px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t1);
  margin: 34px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd1);
}

/* Cupon: deja de parecer un aviso de error. */
.op-page-content .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 1px dashed var(--bd1);
  border-left: 1px dashed var(--bd1);
  color: var(--t2);
  font-size: 14px;
  padding: 12px 16px;
}
.op-page-content .checkout_coupon {
  border: 1px solid var(--bd1);
  background: var(--bg1);
  padding: 20px;
  margin-bottom: 24px;
}

/* ── 5. Errores de validacion ───────────────────────  */
.op-page-content .woocommerce-invalid input,
.op-page-content .woocommerce-invalid select,
.op-page-content .woocommerce-invalid textarea,
.op-page-content .woocommerce-invalid .select2-selection {
  border-color: var(--red) !important;
  box-shadow: inset 3px 0 0 var(--red);
}
.op-page-content .woocommerce-invalid > label { color: var(--red); }
.op-page-content .woocommerce-validated input,
.op-page-content .woocommerce-validated select { border-color: var(--grn) !important; }

.op-page-content .woocommerce-NoticeGroup,
.op-page-content .woocommerce-NoticeGroup-checkout { margin-bottom: 26px; }

.op-page-content ul.woocommerce-error {
  background: var(--bg1);
  border: 1px solid var(--bd1);
  border-left: 4px solid var(--red);
  padding: 18px 22px;
  margin: 0 0 26px;
  list-style: none;
}
.op-page-content ul.woocommerce-error li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-family: var(--ff3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--t1);
}
.op-page-content ul.woocommerce-error li::before {
  content: '!';
  position: absolute;
  left: 0; top: 6px;
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red);
  color: #fff;
  font-family: var(--ff2);
  font-size: 12px; font-weight: 700;
  border-radius: 50%;
}

/* Botones deshabilitados (Actualizar carrito). */
.op-page-content .woocommerce .button[disabled],
.op-page-content .woocommerce button[disabled] {
  opacity: .4; filter: grayscale(.6); cursor: not-allowed;
}

/* ── 6. Modo claro ──────────────────────────────────  */
[data-theme="light"] .op-page-content table.shop_table { background: var(--bg2); }
[data-theme="light"] .op-page-content .cart-collaterals,
[data-theme="light"] .op-page-content #order_review,
[data-theme="light"] .op-page-content .woocommerce-checkout-review-order,
[data-theme="light"] .op-page-content .wc-bacs-bank-details,
[data-theme="light"] .op-page-content .checkout_coupon,
[data-theme="light"] .op-wa { background: var(--bg2); }
[data-theme="light"] .op-page-content .payment_box { background: var(--bg3); }
[data-theme="light"] .op-back { background: var(--bg2); box-shadow: 0 4px 18px rgba(0,0,0,.12); }
[data-theme="light"] .added_to_cart,
[data-theme="light"] .added_to_cart:hover { color: var(--lm) !important; }
[data-theme="light"] .op-page-content .woocommerce .button,
[data-theme="light"] .op-page-content .woocommerce #place_order,
[data-theme="light"] .nav-cta { color: var(--lk) !important; }
[data-theme="light"] .op-page-title,
[data-theme="light"] .op-page-content h1,
[data-theme="light"] .op-page-content h2,
[data-theme="light"] .op-page-content h3 { color: var(--lk); }
[data-theme="light"] .hero-h1-s { -webkit-text-stroke-color: var(--bd2); color: transparent; }

.theme-btn { color: var(--t1) !important; line-height: 1; }
[data-theme="light"] .theme-btn { color: var(--lk) !important; }

/* ── Accesibilidad ──────────────────────────────────  */
.op-page-content a:focus-visible,
.op-page-content input:focus-visible,
.op-page-content select:focus-visible,
.op-page-content textarea:focus-visible {
  outline: 2px solid var(--lc);
  outline-offset: 2px;
}

/* ── Movil ──────────────────────────────────────────  */
@media (max-width: 720px) {
  .op-page-content .shop_table td.product-thumbnail { display: none; }
  .op-page-content .actions { flex-direction: column; align-items: stretch; }
  .op-page-content .coupon #coupon_code { flex: 1 1 auto; }
  .op-page-content .quantity input.qty { width: 64px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .added_to_cart, .op-back, .op-page-content a.remove { transition: none !important; }
}