/*
 * RTG Luxury — Cart page (visual only)
 * Se carga únicamente en is_cart(). No contiene ninguna regla que dependa
 * de JS ni que afecte otras páginas del sitio.
 */

/* Un poco más cerca del header fijo que el resto de .section (64px por
 * defecto) — pedido explícito: "no pegarlo, solo reducir un poco". */
.rtg-cart-page{ padding-top: 46px; }

/* ─── TÍTULO ───
 * .rtg-cart-heading es además .rtgds-glow-soft: el degradado radial se
 * dibuja "at 50% 0%" (centrado justo en el borde superior de la caja), así
 * que sin margen propio la mitad superior del óvalo queda fuera de la
 * caja y se ve como si el brillo estuviera cortado. La forma (más ancha,
 * centro más abajo) se ajusta en el override de abajo — aquí solo se le
 * da a la caja el padding-top que ese óvalo necesita para respirar. */
.rtg-cart-heading{
  padding-top: 22px;
  margin-bottom: 36px;
}
.rtg-cart-heading.rtgds-glow-soft::before{
  background: radial-gradient(ellipse 80% 100% at 50% 25%, rgba(201,168,76,.08) 0%, transparent 70%);
}
.rtg-cart-heading .section-label{ margin-bottom: 10px; }
.rtg-cart-title.section-title{
  font-size: 56px;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 0;
}
@media (min-width: 700px){
  .rtg-cart-title.section-title{ font-size: 72px; }
}

.rtg-cart-content{
  max-width: 1180px;
}

/* ─── ESTRUCTURA GENERAL: carrito + resumen ─── */
.rtg-cart-content .woocommerce{
  display: block;
}
.rtg-cart-content .woocommerce-notices-wrapper:not(:empty){
  display: block;
  margin-bottom: 24px;
}

@media (min-width: 960px){
  .rtg-cart-content .woocommerce{
    display: grid;
    grid-template-columns: 1fr 380px;
    align-items: start;
    gap: 40px;
  }
  .rtg-cart-content .woocommerce-notices-wrapper{
    grid-column: 1 / -1;
  }
}

/* ─── TABLA -> TARJETAS (sin tocar el template) ─── */
.rtg-cart-content .woocommerce-cart-form table.cart{
  width: 100%;
  border: none;
  background: none;
  border-collapse: collapse;
}
.rtg-cart-content .woocommerce-cart-form table.cart thead{
  display: none;
}
.rtg-cart-content .woocommerce-cart-form table.cart,
.rtg-cart-content .woocommerce-cart-form table.cart tbody{
  display: block;
}

.rtg-cart-content .woocommerce-cart-form table.cart tr.cart_item{
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr 1fr;
  grid-template-areas:
    "thumb name  name"
    "thumb price price"
    "thumb qty   subtotal";
  gap: 8px 16px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: rtg-cart-item-in .4s ease both;
}
@media (hover: hover){
  .rtg-cart-content .woocommerce-cart-form table.cart tr.cart_item:hover{
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 16px 36px rgba(201,168,76,.14);
  }
}

@keyframes rtg-cart-item-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.rtg-cart-content .woocommerce-cart-form table.cart tr.cart_item td{
  display: block;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
}

/* Imagen */
.rtg-cart-content .product-thumbnail{
  grid-area: thumb;
  align-self: start;
}
.rtg-cart-content .product-thumbnail img{
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Nombre + variaciones */
.rtg-cart-content .product-name{
  grid-area: name;
  padding-right: 28px !important;
}
.rtg-cart-content .product-name a{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--white);
  text-decoration: none;
}
.rtg-cart-content .product-name a:hover{ color: var(--gold-light); }
.rtg-cart-content .product-name dl.variation{
  margin-top: 6px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.rtg-cart-content .product-name dl.variation dt,
.rtg-cart-content .product-name dl.variation dd{
  display: inline;
  margin: 0;
  padding: 0;
}
.rtg-cart-content .product-name dl.variation dt::after{ content: ":"; margin-right: 4px; }
.rtg-cart-content .product-name dl.variation p{ margin: 0; }

/* Precio unitario */
.rtg-cart-content .product-price{
  grid-area: price;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  color: var(--muted);
}
.rtg-cart-content .product-price .amount{ color: var(--muted); }

/* Cantidad */
.rtg-cart-content .product-quantity{
  grid-area: qty;
}
.rtg-cart-content .product-quantity .quantity{ display: inline-flex; }
.rtg-cart-content .product-quantity input.qty{
  width: 64px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  transition: border-color .2s ease;
}
.rtg-cart-content .product-quantity input.qty:focus{
  outline: none;
  border-color: var(--gold);
}

/* Subtotal */
.rtg-cart-content .product-subtotal{
  grid-area: subtotal;
  justify-self: end;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: .5px;
  color: var(--gold);
}

/* Eliminar */
.rtg-cart-content .product-remove{
  position: absolute;
  top: 14px;
  right: 14px;
}
.rtg-cart-content .product-remove a.remove{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rtg-cart-content .product-remove a.remove:hover{
  background: var(--red);
  color: var(--white);
  transform: scale(1.08);
}

/* Fila de acciones (Actualizar carrito). El cupón ya no se renderiza. */
.rtg-cart-content .woocommerce-cart-form table.cart tbody > tr:not(.cart_item){
  display: block;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 4px 0 0;
  animation: none;
}
.rtg-cart-content td.actions{
  display: flex !important;
  justify-content: flex-end;
  padding: 0 !important;
}
.rtg-cart-content td.actions [name="update_cart"]{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
/* style.css tiene ".woocommerce button.button{border-radius:0 !important;...}"
 * (regla legacy compartida por todos los botones nativos de WooCommerce, sin
 * tocar): este botón real (<button class="button" name="update_cart">)
 * también la recibe, y su border-radius no ganaba sin !important. */
.rtg-cart-content td.actions [name="update_cart"]{
  border-radius: 12px !important;
}
.rtg-cart-content td.actions [name="update_cart"]:hover{
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ─── RESUMEN DEL PEDIDO ─── */
.rtg-cart-content .cart-collaterals{
  margin-top: 32px;
}
@media (min-width: 960px){
  .rtg-cart-content .cart-collaterals{ margin-top: 0; }
}

.rtg-cart-content .cart_totals{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
@media (min-width: 960px){
  .rtg-cart-content .cart_totals{ position: sticky; top: 90px; }
}

.rtg-cart-content .cart_totals h2{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.rtg-cart-content .cart_totals table{
  width: 100%;
  border: none;
  background: none;
  border-collapse: collapse;
}
.rtg-cart-content .cart_totals table tr,
.rtg-cart-content .cart_totals table th,
.rtg-cart-content .cart_totals table td{
  border: none;
  background: none;
  padding: 0;
}
.rtg-cart-content .cart_totals table tr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

/* Solo Subtotal + Total + fee de mayoreo: se ocultan filas de
 * envío/impuestos/cupón si llegaran a aparecer (este flujo nunca las usa).
 * tr.fee YA NO se oculta: es donde WooCommerce renderiza de forma nativa
 * el descuento de mayoreo (WC_Cart::add_fee(), ver inc/rtg-wholesale.php)
 * — antes de esta regla, la fila se calculaba y aplicaba correctamente
 * pero quedaba invisible por este mismo selector. */
.rtg-cart-content .cart_totals table tr.cart-discount,
.rtg-cart-content .cart_totals table tr.shipping,
.rtg-cart-content .cart_totals table tr.tax-rate,
.rtg-cart-content .cart_totals table tr.tax-total{
  display: none;
}

.rtg-cart-content .cart_totals table tr.cart-subtotal th,
.rtg-cart-content .cart_totals table tr.cart-subtotal td,
.rtg-cart-content .cart_totals table tr.fee th,
.rtg-cart-content .cart_totals table tr.fee td{
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}

.rtg-cart-content .cart_totals table tr.order-total{
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 18px;
}
.rtg-cart-content .cart_totals table tr.order-total th,
.rtg-cart-content .cart_totals table tr.order-total td{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--white);
}
.rtg-cart-content .cart_totals table tr.order-total td{ color: var(--gold); }

.rtg-cart-content .wc-proceed-to-checkout{
  margin-top: 24px;
}
.rtg-cart-content .wc-proceed-to-checkout .checkout-button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gold);
  color: var(--black);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 17px 24px;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
/* Mismo choque con ".woocommerce button.button{border-radius:0 !important}"
 * que el botón de arriba: el <button class="checkout-button button alt
 * wc-forward"> real también la recibe. */
.rtg-cart-content .wc-proceed-to-checkout .checkout-button{
  border-radius: 12px !important;
}
@media (hover: hover){
  .rtg-cart-content .wc-proceed-to-checkout .checkout-button:hover{
    background: var(--gold-light);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(201,168,76,.25);
  }
}

/* ─── CARRITO VACÍO ─── */
.rtg-cart-content .cart-empty.woocommerce-info{
  display: block !important; /* excepción puntual: sin esto, la regla global que oculta
    .woocommerce-info en todo el sitio dejaría el carrito vacío sin ningún mensaje */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 28px;
  text-align: center;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  color: var(--muted);
  list-style: none;
}
.rtg-cart-content .return-to-shop{
  text-align: center;
  margin-top: 20px;
}
.rtg-cart-content .return-to-shop .button{
  display: inline-flex;
  background: var(--gold);
  color: var(--black);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
@media (hover: hover){
  .rtg-cart-content .return-to-shop .button:hover{
    background: var(--gold-light);
    transform: translateY(-1px);
  }
}

/* ─── Fase 4: foco visible (teclado) en todos los controles interactivos ─── */
.rtg-cart-content .product-quantity input.qty:focus-visible,
.rtg-cart-content td.actions [name="update_cart"]:focus-visible,
.rtg-cart-content .wc-proceed-to-checkout .checkout-button:focus-visible,
.rtg-cart-content .return-to-shop .button:focus-visible,
.rtg-cart-content .product-remove a.remove:focus-visible,
.rtg-cart-content .product-name a:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Fase 4: prefers-reduced-motion ───
 * Se conserva el feedback funcional (spinner de carga, cambios de texto);
 * solo se apagan las animaciones puramente decorativas. */
@media (prefers-reduced-motion: reduce){
  .rtg-cart-content .woocommerce-cart-form table.cart tr.cart_item{
    animation: none;
  }
  .rtg-cart-content *{
    transition-duration: .01ms !important;
  }
}