/* 
 * CSS específico para la página del Carrito 
 * Valniezo - Divi Child Theme
 */


/* ===============================================================
   SECCION CARRITO (.val_cart_section)
=============================================================== */

.val_cart_section {
  min-height: 80dvh;
  padding-right: 0px !important;
}

/* ===============================================================
   MÓDULO DE MENSAJE (.val_cart_msg)
=============================================================== */

html body.woocommerce-cart #page-container .et_pb_section .val_cart_msg a.restore-item {
  color: #8c2b3f !important;
  text-decoration: underline;
}


/* ===============================================================
   ESTILOS DE BOTONES GLOBALES DEL CARRITO
=============================================================== */
html body.woocommerce-cart #page-container .et_pb_section .woocommerce a.button:hover,
html body.woocommerce-cart #page-container .et_pb_section .woocommerce-page .val_cart_totals a.button:hover {
  background-color: #6e2233 !important;
}



/* ===============================================================
   MÓDULO DE PRODUCTOS (.val_cart_items)
=============================================================== */

.val_cart_items {
  background-color: transparent !important;
}

/* Tamaño mínimo e imagen de producto cubierta */
.val_cart_items td.product-thumbnail img {
  min-width: 100px;
  min-height: 100px;
  object-fit: cover;
}

/* Botón de eliminar (x) personalizado */
.val_cart_items td.product-remove a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: transparent;
  font-size: 0;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.val_cart_items table.shop_table {
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid rgba(187, 153, 117, 0.3);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100% !important;
  table-layout: fixed !important;
}

/* Las aspas de la (x) */
.val_cart_items td.product-remove a::before,
.val_cart_items td.product-remove a::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 1.5px;
  background-color: #bbbbbb;
  border-radius: 1px;
}

.val_cart_items td.product-remove a::before {
  transform: rotate(45deg);
}

.val_cart_items td.product-remove a::after {
  transform: rotate(-45deg);
}

/* Hover sobre botón de eliminar */
.val_cart_items td.product-remove a:hover {
  background: rgba(140, 43, 63, 0.08);
  /* Fondo granate suave al hover */
  opacity: 1;
}

.val_cart_items td.product-remove a:hover::before,
.val_cart_items td.product-remove a:hover::after {
  background-color: #8c2b3f;
  /* Color granate para las aspas al hover */
  transition: background-color 0.2s ease;
}

/* ===============================================================
   ESTILO TABLA DE PRODUCTOS (MOCKUP v3 APLICADO)
=============================================================== */

/* Fondo y bordes redondeados globales de la tabla */

/* Ocultar th reales si prefieren mantener la vista limpia, o estilizarlos */
.val_cart_items table.shop_table th {
  background-color: #f8f6f2 !important;
  color: #5a5a5a !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: normal !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid rgba(187, 153, 117, 0.3) !important;
  border-top: none !important;
}

.val_cart_items table.shop_table th:first-child {
  border-top-left-radius: 6px !important;
}

.val_cart_items table.shop_table th:last-child {
  border-top-right-radius: 6px !important;
}

/* Fila de producto */
.val_cart_items table.shop_table tbody td {
  padding: 20px 24px !important;
  border-bottom: 0.8px solid rgba(187, 153, 117, 0.3) !important;
  vertical-align: middle !important;
  color: #32373c;
}

/* Ajustes específicos de padding y alineación para td de carrito */
#main-content table.cart td {
  padding: 20px 0px;
  vertical-align: top;
}

/* Fila hover (efecto sutil) */
.val_cart_items table.shop_table tbody tr.cart_item:hover td {
  background: rgba(246, 238, 224, 0.4) !important;
}

/* Sin borde en la última fila (acciones / cupón) */
.val_cart_items table.shop_table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Tamaño de la imagen de producto en la tabla */
.val_cart_items td.product-thumbnail {
  width: 100px;
}

.val_cart_items td.product-thumbnail img {
  border: 1px solid rgba(187, 153, 117, 0.3);
  background: #f8f6f2;
}

/* Nombre del producto */
.val_cart_items td.product-name a {
  font-family: 'Abril Fatface', serif;
  font-size: 18px;
  color: #32373c !important;
  text-decoration: none !important;
  line-height: 1.3;
}

.val_cart_items td.product-name a:hover {
  color: #8c2b3f !important;
}

/* Precio del producto */
.val_cart_items td.product-price,
.val_cart_items td.product-subtotal {
  font-size: 15px;
  color: #32373c;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ===============================================================
   BOTONES DE CANTIDAD
=============================================================== */

/* Quitar spin buttons nativos del navegador */
.val_cart_items .quantity input[type="number"]::-webkit-outer-spin-button,
.val_cart_items .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.val_cart_items .quantity input[type="number"] {
  -moz-appearance: textfield;
}

.val_cart_items .quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: transparent !important;
}

.val_cart_items .quantity input.qty {
  width: 40px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  text-align: center;
  border: 1px solid rgba(187, 153, 117, 0.5) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #32373c !important;
  font-size: 16px !important;
  font-family: var(--font-body, 'Courier New', 'Lucida Console', monospace) !important;
  outline: none !important;
  box-shadow: none !important;
}

.val_cart_items .quantity .qty-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(187, 153, 117, 0.5) !important;
  background: #f6eee0 !important;
  /* cream */
  color: #bb9975 !important;
  /* typography color changed to burgundy */
  font-size: 18px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-sizing: border-box;
  padding: 0 !important;
  box-shadow: none !important;
  line-height: 31px;
}

.val_cart_items .quantity .qty-btn.qty-minus {
  border-radius: 4px 0 0 4px !important;
}

.val_cart_items .quantity .qty-btn.qty-plus {
  border-radius: 0 4px 4px 0 !important;
}

.val_cart_items .quantity .qty-btn:hover {
  background: #8c2b3f !important;
  /* burgudy */
  color: #f6eee0 !important;
  /* cream */
  border-color: #8c2b3f !important;
}

/* ===============================================================
   FILA CUPON Y ACTUALIZAR CARRITO
=============================================================== */

.val_cart_items table.shop_table .actions {
  padding: 16px 24px !important;
}

/* Inputs de cupón */
.val_cart_items table.shop_table .actions .coupon input.input-text {
  font-family: inherit;
  font-size: 13px !important;
  padding: 11px 16px !important;
  border: 1px solid rgba(187, 153, 117, 0.3) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #32373c !important;
  width: 240px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botón aplicar cupón y estilos base para botones en acciones */
html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions .button {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  border: 1px solid #bb9975 !important;
  background: transparent !important;
  color: #bb9975 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  margin-left: 10px !important;
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions .button:hover:not(:disabled) {
  background-color: #bb9975 !important;
  color: #ffffff !important;
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions .button::after {
  content: "\35";
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions .button::after {
  font-size: 18px !important;
}

/* Botón "Actualizar carrito": Estado ACTIVO destacado */
html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions button[name="update_cart"] {
  background: #bb9975 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(187, 153, 117, 0.2) !important;
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions button[name="update_cart"]:hover:not(:disabled) {
  box-shadow: 0 4px 15px rgba(140, 43, 63, 0.2) !important;
}

html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions button[name="update_cart"]::after {
  font-size: 20px !important;
}

/* Botón "Actualizar carrito": Estado DESACTIVADO (gris) */
html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table .actions button[name="update_cart"]:disabled {
  border: 1px solid rgba(187, 153, 117, 0.3) !important;
  background: transparent !important;
  color: #aaaaaa !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  box-shadow: none !important;
}

/* ===============================================================
   RESPONSIVO CARRITO (SALTO TEMPRANO A 1400px)
=============================================================== */
@media (max-width: 1399px) {
  .val_cart_row {
    display: flex !important;
    flex-direction: column !important;
  }

  .val_cart_row>.et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
  }

  .val_cart_row>.et_pb_column:last-child {
    margin-bottom: 0 !important;
  }
}


/* ===============================================================
   RESPONSIVO CARRITO (SALTO TEMPRANO A 1400px)
=============================================================== */
@media (max-width: 1399px) {
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_row {
    display: flex !important;
    flex-direction: column !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_row>.et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_row>.et_pb_column:last-child {
    margin-bottom: 0 !important;
  }
}

/* ===============================================================
   REDISEÑO MÓVIL — TARJETA CON PRECIO/UD + TOTAL VISIBLES
=============================================================== */
@media (max-width: 980px) {

  /* Ocultar thead */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive thead {
    display: none !important;
  }

  /* Tbody en bloque */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody {
    display: block !important;
  }

  /* Anular fondos intercalados nativos de WooCommerce en todas sus variantes responsive (< 768px y < 980px) */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .woocommerce table.shop_table_responsive tr td,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .woocommerce-page table.shop_table_responsive tr td,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody tr:nth-child(2n) td {
    background-color: transparent !important;
  }

  /* ── REJILLA DE LA TARJETA ──────────────────────────────────
     Col 1: imagen (80px) | Col 2: info | Col 3: qty | Col 4: subtotal + X
  ─────────────────────────────────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 80px 1fr auto auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 14px !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(187, 153, 117, 0.3) !important;
    align-items: start !important;
    background: #ffffff !important;
    border-bottom: none !important;
    border-radius: 0 !important;
  }

  /* Radio en primera y última tarjeta */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody tr.cart_item:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody tr.cart_item {
    border: none !important;
    border-bottom: 1px solid rgba(187, 153, 117, 0.3) !important;
  }


  /* Anular hover de filas en móvil - MODIFICADO: Añadido color crema suave en hover */
  html body.woocommerce-cart #page-container .val_cart_items table.shop_table tbody tr.cart_item:hover td,
  html body.woocommerce-cart #page-container .val_cart_items table.shop_table tbody tr.cart_item td {
    background: transparent !important;
  }

  html body.woocommerce-cart #page-container .val_cart_items table.shop_table tbody tr.cart_item:hover {
    background: rgba(246, 238, 224, 0.4) !important;
  }

  /* Reset general de celdas */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Quitar ::before labels automáticos de WooCommerce */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td::before {
    display: none !important;
    content: none !important;
  }

  /* ── 1 · IMAGEN ─────────────────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-thumbnail {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    width: 80px !important;
    min-width: 80px !important;
    align-self: start !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
  }

  /* ── 2 · NOMBRE DEL PRODUCTO ────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-name {
    grid-column: 2 / 4 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-name a {
    font-size: 15px !important;
    display: block !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-name .variation,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-name .item-meta {
    font-size: 12px !important;
    color: #777 !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }

  /* ── 3 · BOTÓN ELIMINAR (×) ─────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove {
    grid-column: 4 / 5 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-self: start !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a {
    width: 24px !important;
    height: 24px !important;
    opacity: 0.6 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a::before,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a::after {
    width: 12px !important;
    background-color: #bbbbbb !important;
    transition: background-color 0.2s ease !important;
  }

  /* Estado Activo / Hover en móvil */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:hover,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:active,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:focus {
    opacity: 1 !important;
    background: rgba(140, 43, 63, 0.08) !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:hover::before,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:hover::after,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:active::before,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:active::after,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:focus::before,
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-remove a:focus::after {
    background-color: #8c2b3f !important;
  }

  /* ── 4 · PRECIO UNITARIO ────────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-price {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Etiqueta "PRECIO/UD" */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-price::before {
    content: "Precio/ud" !important;
    display: block !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    float: none !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-price .woocommerce-Price-amount {
    font-size: 14px !important;
    color: #32373c !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
  }

  /* ── 5 · STEPPER DE CANTIDAD ────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-quantity {
    grid-column: 3 / 4 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  /* ── 6 · SUBTOTAL (TOTAL) ───────────────────────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-subtotal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    grid-column: 4 / 5 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    text-align: right !important;
    min-width: 60px !important;
  }

  /* Etiqueta "TOTAL" */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-subtotal::before {
    content: "Total" !important;
    display: block !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    float: none !important;
  }

  /* Importe del total — granate y bold */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items .shop_table_responsive tbody td.product-subtotal .woocommerce-Price-amount {
    font-size: 15px !important;
    color: #8c2b3f !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
  }

  /* ── FILA DE ACCIONES (cupón + actualizar) ──────────────── */
  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table_responsive tbody tr:last-child {
    display: block !important;
    border: none !important;
    padding: 20px 15px 15px 15px !important;
    /* Padding en lugar de margenes top para albergar fondo */
    background: rgba(246, 238, 224, 0.3) !important;
    /* Color bloque inferior crema */
    margin-top: 0 !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table_responsive tbody td.actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 !important;
    background: transparent !important;
    /* Anular fondo de escritorio que se colaba */
    align-items: stretch !important;
    /* Estirar items hijos de la caja principal */
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table_responsive tbody td.actions .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(187, 153, 117, 0.2) !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table_responsive tbody td.actions .coupon input.input-text {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table_responsive tbody td.actions .coupon .button {
    margin: 0 !important;
    /* Matar margin-left de escritorio */
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html body.woocommerce-cart #page-container .et_pb_section .val_cart_items table.shop_table_responsive tbody td.actions>.button {
    margin: 0 !important;
    /* Matar margin-left de escritorio */
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
    .woocommerce .val_cart_section table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
        background-color: inherit !important;
    }
}