/* ---------- /carrito/ ----------
   Lo de dentro lo pinta WooCommerce con su marcado de siempre: así el
   AJAX de quitar una línea, cambiar la cantidad o aplicar un cupón sigue
   funcionando tal cual. Aquí solo se viste. Todo cuelga de .opr-ct-woo. */

.opr-ct-carrito .opr-cabeza{margin-bottom:22px !important}

/* --- los tres pasos --- */
.opr-ct-carrito .opr-ct-pasos{
  display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important;
  margin-bottom:clamp(26px,3vw,38px) !important;
}
.opr-ct-carrito .opr-ct-pasos li{
  display:flex !important; align-items:center !important; gap:9px !important;
  font-size:.90625rem !important; font-weight:600 !important; letter-spacing:-.012em !important; color:var(--tenue) !important;
}
.opr-ct-carrito .opr-ct-pasos li + li::before{
  content:"" !important; width:22px !important; height:1.5px !important; background:var(--borde2) !important; display:block !important; margin-right:9px !important;
}
.opr-ct-carrito .opr-ct-pasos li span{
  width:26px !important; height:26px !important; flex:none !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  font-size:.8125rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important;
  background:var(--p100) !important; color:var(--suave) !important;
}
.opr-ct-carrito .opr-ct-pasos li.es-aqui{color:var(--tinta) !important}
.opr-ct-carrito .opr-ct-pasos li.es-aqui span{background:var(--p950) !important; color:#fff !important}

/* El reset del núcleo deja a la vista lo que WooCommerce esconde para los
   lectores de pantalla: sin esto, junto al «1» de la cantidad se leía
   «Cantidad» dos veces. */
.opr-ct-woo .screen-reader-text{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip-path:inset(50%) !important; white-space:nowrap !important;
}

/* --- avisos de WooCommerce --- */
.opr-ct-woo .woocommerce-notices-wrapper:empty{display:none !important}
.opr-ct-woo .woocommerce-info,
.opr-ct-woo .woocommerce-message,
.opr-ct-woo .woocommerce-error{
  display:block !important; padding:15px 18px !important; border-radius:var(--radio-s) !important;
  font-size:.9375rem !important; line-height:1.55 !important; margin-bottom:18px !important;
}
.opr-ct-woo .woocommerce-info{background:var(--p100) !important; color:var(--tinta) !important}
.opr-ct-woo .woocommerce-message{background:var(--ok100) !important; color:var(--ok900) !important}
.opr-ct-woo .woocommerce-error{background:var(--no100) !important; color:var(--no900) !important}
.opr-ct-woo .woocommerce-error li{margin:0 !important}
.opr-ct-woo .woocommerce-info a,
.opr-ct-woo .woocommerce-message a,
.opr-ct-woo .woocommerce-error a{color:inherit !important; text-decoration:underline !important; text-underline-offset:2px !important; font-weight:700 !important}

/* --- el carrito vacío --- */
.opr-ct-woo .wc-empty-cart-message .cart-empty{
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
  padding:clamp(28px,3.4vw,44px) !important; text-align:center !important; font-size:1.0625rem !important; color:var(--suave) !important;
  border-radius:var(--radio) !important;
}
.opr-ct-woo .return-to-shop{margin-top:18px !important; text-align:center !important}

/* --- botones --- */
.opr-ct-woo .button,
.opr-ct-woo button.button,
.opr-ct-woo a.button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  padding:14px 24px !important; border-radius:999px !important;
  font-size:1rem !important; font-weight:700 !important; letter-spacing:-.012em !important; line-height:1 !important;
  background:transparent !important; color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important;
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease !important;
}
.opr-ct-woo .button:hover{background:var(--p100) !important; box-shadow:inset 0 0 0 1.5px var(--p500) !important}
.opr-ct-woo .button:active{transform:translateY(1px) !important}
.opr-ct-woo .button.alt,
.opr-ct-woo .checkout-button{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-ct-woo .button.alt:hover,
.opr-ct-woo .checkout-button:hover{background:var(--p800) !important}
.opr-ct-woo .button:disabled,
.opr-ct-woo .button[disabled]{opacity:.42 !important; cursor:default !important}

/* --- la tabla del carrito --- */
.opr-ct-woo .woocommerce-cart-form{
  background:var(--superficie) !important; border-radius:var(--radio) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
  padding:clamp(14px,2vw,22px) !important; overflow-x:auto !important;
}
.opr-ct-woo table.cart{width:100% !important; min-width:520px !important; border-collapse:collapse !important}
.opr-ct-woo table.cart th{
  text-align:left !important; padding:0 14px 12px !important; border-bottom:1px solid var(--borde) !important;
  font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
}
.opr-ct-woo table.cart td{padding:16px 14px !important; border-bottom:1px solid var(--borde) !important; vertical-align:middle !important}
.opr-ct-woo table.cart tr:last-child td{border-bottom:0 !important}
.opr-ct-woo td.product-name a{font-weight:700 !important; color:var(--tinta) !important}
.opr-ct-woo td.product-name a:hover{text-decoration:underline !important; text-underline-offset:3px !important}
.opr-ct-woo td.product-price,
.opr-ct-woo td.product-subtotal{font-variant-numeric:tabular-nums !important; color:var(--suave) !important}
.opr-ct-woo td.product-subtotal{font-weight:700 !important; color:var(--tinta) !important}
.opr-ct-woo td.product-thumbnail img{width:56px !important; height:auto !important; border-radius:var(--radio-s) !important}
.opr-ct-woo td.product-remove a.remove{
  width:30px !important; height:30px !important; display:grid !important; place-items:center !important; border-radius:999px !important;
  font-size:1.125rem !important; line-height:1 !important; color:var(--tenue) !important; background:var(--p100) !important;
  transition:color .15s ease, background .15s ease !important;
}
.opr-ct-woo td.product-remove a.remove:hover{color:var(--no600) !important; background:var(--no100) !important}

/* la cantidad tiene que seguir siendo escribible: el reset del núcleo le quita
   la apariencia nativa y con ella las flechas */
.opr-ct-woo .quantity input.qty{
  width:78px !important; height:42px !important; padding:0 8px !important; text-align:center !important;
  border-radius:var(--radio-s) !important; background:var(--p50) !important; color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2) !important;
  font-size:1rem !important; font-weight:600 !important; font-variant-numeric:tabular-nums !important;
  -webkit-appearance:auto !important; appearance:auto !important;
}
.opr-ct-woo .quantity input.qty:focus{outline:none !important; box-shadow:inset 0 0 0 2px var(--tinta) !important; background:var(--superficie) !important}

/* --- la fila de acciones: cupón y actualizar --- */
.opr-ct-woo td.actions{padding-top:20px !important}
.opr-ct-woo td.actions .coupon{
  display:flex !important; gap:10px !important; flex-wrap:wrap !important; align-items:center !important; margin-bottom:14px !important;
}
.opr-ct-woo td.actions .coupon label{
  width:100% !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
}
.opr-ct-woo td.actions .coupon .input-text{
  height:48px !important; padding:0 14px !important; min-width:190px !important; flex:1 1 190px !important; max-width:280px !important;
  border-radius:var(--radio-s) !important; background:var(--p50) !important; color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2) !important; font-size:1rem !important; font-weight:500 !important;
}
.opr-ct-woo td.actions .coupon .input-text:focus{outline:none !important; box-shadow:inset 0 0 0 2px var(--tinta) !important; background:var(--superficie) !important}

/* --- los totales --- */
.opr-ct-woo .cart-collaterals{margin-top:26px !important; display:flex !important; justify-content:flex-end !important}
.opr-ct-woo .cart_totals{
  width:100% !important; max-width:420px !important;
  background:var(--superficie) !important; border-radius:var(--radio) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
  padding:clamp(20px,2.4vw,28px) !important;
}
.opr-ct-woo .cart_totals h2{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important; margin-bottom:14px !important}
.opr-ct-woo .cart_totals table{width:100% !important; border-collapse:collapse !important}
.opr-ct-woo .cart_totals th{
  text-align:left !important; padding:12px 0 !important; font-size:.9375rem !important; font-weight:600 !important; color:var(--suave) !important;
  border-bottom:1px solid var(--borde) !important;
}
.opr-ct-woo .cart_totals td{
  text-align:right !important; padding:12px 0 !important; font-variant-numeric:tabular-nums !important; color:var(--tinta) !important;
  border-bottom:1px solid var(--borde) !important;
}
.opr-ct-woo .cart_totals tr.order-total th,
.opr-ct-woo .cart_totals tr.order-total td{font-size:1.0625rem !important; font-weight:800 !important; border-bottom:0 !important}
.opr-ct-woo .wc-proceed-to-checkout{margin-top:18px !important}
.opr-ct-woo .wc-proceed-to-checkout .checkout-button{width:100% !important}
.opr-ct-woo .cross-sells{display:none !important}

@media (max-width:720px){
  .opr-ct-woo .cart-collaterals{justify-content:stretch !important}
  .opr-ct-woo .cart_totals{max-width:none !important}
}

/* --- en móvil, cada línea del carrito es una ficha ---
   El marcado de WooCommerce ya trae `data-title` en cada celda justo para
   esto. Con la tabla en horizontal a 360 px la página se movía de lado: el
   `min-width` de la tabla se escapaba del recuadro con scroll.

   OJO con la especificidad: la regla general de aquí abajo es
   `table.cart td` —(0,2,2)—, así que una excepción escrita como
   `td.product-name` —(0,2,1)— pierde y no se aplica. Todas las excepciones
   llevan delante `table.cart`. */
@media (max-width:700px){
  .opr-ct-woo .woocommerce-cart-form{overflow-x:visible !important; padding:6px 16px !important}
  /* la tabla entera pasa a bloques. Con la tabla en `display:table` y las
     filas en `display:block`, el navegador se inventa cajas de tabla anónimas
     y la fila seguía midiendo lo que medía la tabla. */
  .opr-ct-woo table.cart{min-width:0 !important; display:block !important}
  .opr-ct-woo table.cart thead{display:none !important}
  .opr-ct-woo table.cart tbody,
  .opr-ct-woo table.cart tr,
  .opr-ct-woo table.cart td{display:block !important; width:100% !important}
  .opr-ct-woo table.cart tr.cart_item{
    position:relative !important; padding:14px 0 12px !important; border-bottom:1px solid var(--borde) !important;
  }
  .opr-ct-woo table.cart td{
    display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important;
    padding:5px 0 !important; border-bottom:0 !important; text-align:right !important;
  }
  .opr-ct-woo table.cart td::before{
    content:attr(data-title) !important; flex:none !important; text-align:left !important;
    font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
  }
  .opr-ct-woo table.cart td.product-name{display:block !important; text-align:left !important; padding:0 44px 8px 0 !important}
  .opr-ct-woo table.cart td.product-name::before{display:none !important}
  .opr-ct-woo table.cart td.product-thumbnail{display:none !important}
  .opr-ct-woo table.cart td.product-remove{
    position:absolute !important; top:12px !important; right:0 !important; width:auto !important; padding:0 !important; display:block !important;
  }
  .opr-ct-woo table.cart td.product-remove::before{display:none !important}
  .opr-ct-woo table.cart td.actions{display:block !important; padding:16px 0 4px !important; text-align:left !important}
  .opr-ct-woo table.cart td.actions::before{display:none !important}
  .opr-ct-woo table.cart td.actions .coupon{display:block !important; margin-bottom:10px !important}
  .opr-ct-woo table.cart td.actions .coupon .input-text{max-width:none !important; width:100% !important; margin-bottom:10px !important}
  .opr-ct-woo table.cart td.actions .button{width:100% !important; margin-bottom:10px !important}
}