/* ==========================================================================
   One-page checkout + carrito — estética "Maria Chic"
   Monocromo, Jost, hairlines, esquinas rectas. Hereda --primary-color del theme.
   ========================================================================== */

:root {
  --op-ink: #1c1c1c;
  --op-muted: #8a8a8a;
  --op-line: #e6e6e6;
  --op-line-strong: #1c1c1c;
  --op-bg-soft: #fafafa;
}

/* ============================ CARRITO ============================ */
.op-cart-list {
  margin: 28px 0 8px;
  border-top: 1px solid var(--op-line);
}
.op-cart-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--op-line);
}
.op-cart-thumb { flex: 0 0 84px; }
.op-cart-thumb img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--op-line);
}
.op-cart-info { flex: 1 1 auto; min-width: 0; }
.op-cart-name {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--op-ink);
  text-decoration: none;
}
.op-cart-name:hover { text-decoration: underline; }
.op-cart-model,
.op-cart-option { color: var(--op-muted); font-size: 12px; margin-top: 3px; }
.op-cart-delete {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--op-muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.op-cart-delete:hover { color: var(--op-ink); }

/* Stepper cantidad: rectangular, monocromo */
.op-cart-qty { flex: 0 0 auto; }
.op-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--op-ink);
}
.op-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  /* padding/margin/radius a 0: reglas genéricas de estilo_25_04_2025.css
     (button { padding: var(--spacing) ... ; border-radius: var(--radius) })
     descuadraban los glifos +/− */
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #fff;
  color: var(--op-ink);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.op-step:hover { background: var(--op-ink); color: #fff; }
.op-qty-input {
  box-sizing: border-box;
  width: 46px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: none;
  border-left: 1px solid var(--op-ink);
  border-right: 1px solid var(--op-ink);
  border-radius: 0;
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  -moz-appearance: textfield;
}
.op-qty-input:focus { outline: none; }
.op-qty-fixed { display: inline-block; width: 46px; text-align: center; font-weight: 500; }

.op-cart-price { flex: 0 0 120px; text-align: right; }
.op-cart-line-total { font-size: 15px; font-weight: 500; color: var(--op-ink); }
.op-cart-unit { font-size: 11px; color: var(--op-muted); margin-top: 2px; }

.op-cart-totals { margin: 6px 0 0; width: 100%; }
.op-cart-totals td { border: none; padding: 7px 0; font-size: 13px; }
.op-cart-totals .cart-total-title { color: var(--op-muted); text-transform: uppercase; letter-spacing: .06em; }
.op-cart-totals tr:last-child td {
  border-top: 2px solid var(--op-line-strong);
  font-size: 17px;
  font-weight: 500;
  color: var(--op-ink);
  padding-top: 14px;
}
.op-cart-checkout { padding-left: 34px; padding-right: 34px; }

/* ============================ ONE-PAGE CHECKOUT — mobile-first ============================ */
/* BASE = MÓVIL: todo apilado en una columna, tarjetas a ancho completo */
.op-checkout { max-width: 1080px; padding-left: 14px; padding-right: 14px; }
/* Cabecera: título + enlace login en la misma fila, a ancho completo */
.op-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 18px;
}
.op-checkout .op-title {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
}
.op-grid { display: block; }          /* móvil: una columna */
.op-main, .op-aside { width: 100%; padding: 0; }

.op-login-row { font-size: 13px; color: var(--op-muted); margin: 0; }
.op-login-row a { color: var(--op-ink); border-bottom: 1px solid var(--op-ink); margin-left: 4px; }
.op-login-row a:hover { text-decoration: none; opacity: .7; }
#op-login-panel { margin-top: 14px; }

/* Tarjetas */
.op-card {
  background: #fff;
  border: 1px solid var(--op-line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.op-card-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--op-ink);
}

/* Campos: móvil = 1 columna (apilados) */
.op-fields { display: flex; flex-direction: column; gap: 12px; }
.op-field { width: 100%; }
.op-fields .form-control {
  width: 100%;
  border: 1px solid var(--op-line);
  border-radius: 8px;
  box-shadow: none;
  height: 48px;                /* cómodo para el dedo */
  font-size: 16px;             /* 16px evita el zoom automático de iOS */
  padding: 0 14px;
}
.op-fields .form-control:focus { border-color: var(--op-ink); box-shadow: none; }

/* Métodos de envío / pago: lista de radios cómoda al tacto */
#op-shipping-panel .radio,
#op-payment-panel .radio {
  margin: 0;
  padding: 14px 4px;
  border-bottom: 1px solid var(--op-line);
}
#op-shipping-panel .radio:last-child,
#op-payment-panel .radio:last-child { border-bottom: none; }
#op-shipping-panel .radio label,
#op-payment-panel .radio label {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  padding-left: 4px;
}
#op-shipping-panel input[type="radio"],
#op-payment-panel input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; }
/* títulos redundantes del partial de envío */
#op-shipping-panel > p,
#op-shipping-panel p strong,
#op-payment-panel > p,
#op-payment-panel textarea,
#op-shipping-panel textarea { display: none; }
#op-shipping-panel .buttons,
#op-payment-panel .buttons { display: none; }

/* Resumen */
.op-summary {
  background: #fff;
  border: 1px solid var(--op-line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.op-summary h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.op-summary table { width: 100%; font-size: 13px; }
.op-summary table td { padding: 5px 0; border: none; }
.op-summary thead { display: none; }
.op-summary .cart-total-title { color: var(--op-muted); }
.op-summary .cart-total-price { text-align: right; font-weight: 500; }
.op-summary tfoot tr:last-child td {
  border-top: 1px solid var(--op-line);
  font-size: 16px;
  font-weight: 500;
  padding-top: 12px;
}
.op-summary .table-responsive { border: none; margin: 0; overflow: visible; }
.op-muted { color: var(--op-muted); font-size: 13px; }

/* Botón único: grande, fácil de pulsar en móvil */
.op-place-order {
  width: 100%;
  margin-top: 18px;
  padding: 17px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--op-ink);
  border: 1px solid var(--op-ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.op-place-order:hover:not(:disabled) { background: #fff; color: var(--op-ink); }
.op-place-order:disabled { opacity: .4; cursor: not-allowed; }
.op-secure {
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--op-muted);
  margin: 12px 0 0;
}

/* En móvil, el resumen va al final pero el botón debe quedar accesible:
   lo dejamos en flujo normal (sticky solo en desktop). */

/* ===== TABLET / DESKTOP (min-width) ===== */
@media (min-width: 768px) {
  .op-title-row { margin-bottom: 26px; }
  .op-checkout .op-title { font-size: 22px; }
  .op-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
  .op-main { width: 58.333%; padding-right: 24px; }
  /* aside se estira a la altura de la fila → el resumen sticky tiene recorrido */
  .op-aside { width: 41.667%; align-self: stretch; }
  .op-card { padding: 24px; margin-bottom: 18px; }
  /* Campos en 2 columnas a partir de tablet */
  .op-fields { flex-direction: row; flex-wrap: wrap; }
  .op-field { flex: 1 1 100%; }
  .op-field.op-col2 { flex: 1 1 calc(50% - 6px); }
  .op-fields .form-control { height: 46px; font-size: 14px; }
  /* Resumen pegajoso: se mantiene a la vista al hacer scroll */
  .op-summary { position: sticky; top: 24px; padding: 24px; }
  .op-place-order { padding: 15px; letter-spacing: .12em; }
}

/* Carrito en móvil: imagen + info arriba, precio y cantidad debajo */
@media (max-width: 767px) {
  .op-cart-item { flex-wrap: wrap; gap: 14px; }
  .op-cart-thumb { flex: 0 0 64px; }
  .op-cart-thumb img { width: 64px; height: 64px; }
  .op-cart-info { flex: 1 1 calc(100% - 78px); }
  .op-cart-qty { order: 3; }
  .op-cart-price { order: 4; flex: 1 1 auto; text-align: right; }
  .op-cart-checkout { width: 100%; }
}

/* Tabla de totales del resumen (endpoint ligero) */
.op-totals-table { width: 100%; font-size: 14px; }
.op-totals-table td { padding: 6px 0; border: none; }
.op-totals-table .cart-total-title { color: var(--op-muted); }
.op-totals-table .cart-total-price { text-align: right; font-weight: 500; }
.op-totals-table .op-total-final td {
  border-top: 1px solid var(--op-line);
  font-size: 17px;
  font-weight: 600;
  color: var(--op-ink);
  padding-top: 12px;
}
.op-loading-btn { opacity: .6; pointer-events: none; }

/* ---------- Form de tarjeta Stripe dentro del one-page (limpio) ---------- */
#op-card-form { margin-top: 8px; }
#op-card-form .payment-form-wrapper { padding: 0; }
#op-card-form .text-info {            /* aviso modo prueba: discreto */
  display: block;
  font-size: 11px;
  color: var(--op-muted);
  margin-bottom: 10px;
}
#op-card-form fieldset { border: none; margin: 0; padding: 0; }
/* Ocultar piezas que sobran del módulo: Apple/Google Pay, legends duplicados, iconos de estado */
#op-card-form #payment-request-button,
#op-card-form legend.card-only,
#op-card-form legend.payment-request-available,
#op-card-form .success-stripe,
#op-card-form .error-stripe svg { display: none !important; }
/* Campo de tarjeta: caja limpia tipo input del theme */
#op-card-form #card-element {
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 14px 14px;
  background: #fff;
}
#op-card-form .container-stripe { display: block; }
/* El botón propio de Stripe queda oculto (usamos el botón final "Realizar pedido") */
#op-card-form #button-confirm { display: none !important; }
/* Mensaje de error de tarjeta (texto), visible y en rojo */
#op-card-form .error-stripe { margin-top: 8px; }
#op-card-form #card-errors { color: #c0392b; font-size: 13px; }

/* Reforzar: ocultar el botón "Guardar/Utilizar" propio de Stripe (usamos Realizar pedido) */
#op-card-form button#button-confirm,
#op-card-form .container-stripe button,
#op-card-form input[type="button"],
#op-card-form .buttons { display: none !important; }
/* Campo de tarjeta a ancho completo, sin el botón al lado */
#op-card-form .container-stripe #card-element { width: 100%; }

/* ---------- Guía del cliente: pasos, obligatorios, bloqueo ---------- */
.op-step-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.op-step-badge {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--op-ink);
  color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.op-step-head .op-card-title { margin: 0; }
.op-step-hint {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--op-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Asterisco rojo en campos obligatorios */
.op-field.op-req { position: relative; }
.op-field.op-req::after {
  content: "*";
  position: absolute;
  top: 14px; right: 12px;
  color: #c0392b;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
}
.op-field.op-req select { padding-right: 28px; }
.op-req-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--op-muted);
}
.op-req-note::before { content: "* "; color: #c0392b; }

/* Campo en error (validación) */
.op-field.op-error .form-control {
  border-color: #c0392b !important;
  background: #fff6f5;
}

/* Tarjeta bloqueada (envío/pago antes de rellenar datos) */
.op-card.op-locked { position: relative; }
.op-card.op-locked #op-shipping-panel,
.op-card.op-locked #op-payment-panel,
.op-card.op-locked #op-card-form {
  opacity: .35;
  pointer-events: none;
  filter: grayscale(.4);
}
.op-card.op-locked .op-locked-msg { display: block; }
.op-locked-msg {
  display: none;
  font-size: 13px;
  color: var(--op-muted);
  background: var(--op-bg-soft, #fafafa);
  border: 1px dashed var(--op-line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.op-card:not(.op-locked) .op-locked-msg { display: none; }

/* Botón "Realizar pedido" en estado bloqueado por datos */
.op-place-order.op-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.op-place-order.op-disabled:hover { background: var(--op-ink); color: #fff; }

/* ============================ UN CAMINO, DOS PASOS (16-09-2026) ============================ */
/* Cabecera reducida en el flujo: solo logo + candado. El menú, buscador, cuenta y
   mini-carrito no se renderizan (header.twig, flujo_compra); aquí solo se centra. */
/* Paso 2 (pago): cabecera reducida. El paso 1 (carrito) conserva la completa. */
body.checkout-checkout .header-top { justify-content: center; padding: 22px 0; }
body.checkout-checkout header { border-bottom: 1px solid var(--op-line); }
.op-candado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 15px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--op-muted);
  white-space: nowrap;
}
.op-candado i { font-size: 14px; }
@media (max-width: 767px) { .op-candado span { display: none; } }

/* Barra de progreso «1 Carrito → 2 Pago» */
.op-pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 22px 0 6px;
  padding: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.op-paso { display: flex; align-items: center; gap: 8px; color: var(--op-muted); }
.op-paso a { color: var(--op-ink); border-bottom: 1px solid var(--op-ink); text-decoration: none; }
.op-paso a:hover { opacity: .7; text-decoration: none; }
.op-paso-num {
  width: 24px; height: 24px;
  border: 1px solid var(--op-muted);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  background: #fff;
}
.op-paso-actual { color: var(--op-ink); font-weight: 500; }
.op-paso-actual .op-paso-num { background: var(--op-ink); color: #fff; border-color: var(--op-ink); }
.op-paso-hecho { color: var(--op-ink); }
.op-paso-hecho .op-paso-num { border-color: var(--op-ink); color: var(--op-ink); }
.op-paso-sep { width: 64px; height: 1px; background: var(--op-line); margin: 0 14px; }
.op-paso-sep-hecho { background: var(--op-ink); }
@media (max-width: 480px) { .op-paso-sep { width: 28px; margin: 0 8px; } }

/* Aire entre el menú de la tienda y el flujo: la barra respira y el título también */
body.checkout-cart .op-pasos { margin-top: 46px; }
body.checkout-checkout .op-pasos { margin-top: 30px; }
/* Fila de título del flujo: título + enlaces discretos */
.op-flujo .op-title-row { margin: 26px 0 22px; }
.op-title-links { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.op-seguir-comprando, .op-volver-carrito {
  font-size: 12px; letter-spacing: .04em; color: var(--op-muted); text-decoration: none;
}
.op-seguir-comprando:hover, .op-volver-carrito:hover { color: var(--op-ink); text-decoration: none; }

/* Paso 1: rejilla líneas + resumen lateral (mobile-first: apilado) */
.op-cart-grid { display: block; }
.op-cart-main { width: 100%; }
.op-cart-summary {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--op-line);
  background: #fff;
}
.op-cart-summary-title {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.op-cart-summary .op-cart-coupon { margin-bottom: 14px; }
.op-cart-summary .op-cart-coupon .panel { border: 1px solid var(--op-line); border-radius: 0; box-shadow: none; }
.op-cart-summary .op-cart-coupon .panel-heading { background: #fff; border-radius: 0; padding: 8px 12px; }
.op-cart-summary .op-cart-coupon .panel-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.op-cart-summary .op-cart-coupon .control-label { display: none; }
.op-cart-summary .op-cart-coupon .panel-body { padding: 10px 12px; }
.op-cart-summary .op-cart-totals { margin: 0; }
.op-cart-summary a.op-place-order {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 16px;
}
.op-cart-summary a.op-place-order:hover { text-decoration: none; }
@media (min-width: 768px) {
  .op-cart-grid { display: flex; gap: 34px; align-items: flex-start; }
  .op-cart-main { flex: 1 1 auto; min-width: 0; }
  .op-cart-summary { flex: 0 0 360px; margin-top: 28px; position: sticky; top: 20px; }
}
/* En móvil el botón del paso 1 se queda visible al pie */
@media (max-width: 767px) {
  .op-cart-summary a.op-place-order { position: sticky; bottom: 10px; z-index: 5; }
}

/* Paso 1 vacío */
.op-cart-empty { text-align: center; padding: 60px 16px 40px; }
.op-cart-empty-icon { font-size: 34px; color: var(--op-line); display: block; margin-bottom: 14px; }
.op-cart-empty .op-title { margin-bottom: 8px; }
.op-cart-empty .op-muted { margin-bottom: 26px; }
.op-cart-empty-cta { display: inline-block; width: auto; padding-left: 34px; padding-right: 34px; text-decoration: none; }
.op-cart-empty-cta:hover { text-decoration: none; color: #fff; }