/* ============================================================
   CART PAGE — Compra Tu Panel
   Todo bajo #ctp-cart-page-root · diseño en dos columnas
   ============================================================ */

/* ── Ancho: restringir contenido de la página del carrito ─── */
body.woocommerce-cart #content.site-main {
  max-width:      var(--ctp-max) !important;
  margin-inline:  auto !important;
  padding-inline: var(--ctp-pad) !important;
  width:          100% !important;
  box-sizing:     border-box !important;
}

body.woocommerce-cart .page-content {
  padding: 0 !important;
}

/* ── Header del carrito (título + subtitle) ───────────────── */
.ctp-cart-header {
  padding:     1.5rem var(--ctp-pad) 0;
  max-width:   var(--ctp-max);
  margin:      0 auto;
  font-family: var(--ctp-font);
  box-sizing:  border-box;
}

.ctp-cart-header__title-row {
  display:       flex;
  align-items:   baseline;
  gap:           0.75rem;
  margin-bottom: 0.375rem;
}

.ctp-cart-header__title {
  font-size:   2.5rem !important;
  font-weight: 700 !important;
  color:       var(--ctp-text) !important;
  margin:      0 !important;
  line-height: 1.15 !important;
  font-family: var(--ctp-font) !important;
}

.ctp-cart-header__count {
  font-size:   var(--ctp-sm);
  color:       var(--ctp-muted);
  font-weight: 400;
}

.ctp-cart-header__subtitle {
  font-size:   var(--ctp-sm) !important;
  color:       var(--ctp-muted) !important;
  margin:      0 0 1.75rem !important;
  max-width:   42rem;
  line-height: 1.5 !important;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
body.woocommerce-cart .ctp-breadcrumb {
  background:    transparent !important;
  border-bottom: none !important;
  width:         100% !important;
  box-sizing:    border-box !important;
}
body.woocommerce-cart .ctp-breadcrumb .ctp-wrap {
  display:        flex !important;
  align-items:    center !important;
  gap:            0.375rem !important;
  padding-top:    0.875rem !important;
  padding-bottom: 0.875rem !important;
  font-family:    'Inter', sans-serif !important;
  font-size:      0.75rem !important;
  font-weight:    500 !important;
  color:          #A1A1AA !important;
}
body.woocommerce-cart .ctp-breadcrumb__item {
  color:           #A1A1AA !important;
  text-decoration: none !important;
  transition:      color 0.15s ease !important;
}
body.woocommerce-cart .ctp-breadcrumb__item:hover    { color: #18181B !important; }
body.woocommerce-cart .ctp-breadcrumb__item--current { color: #18181B !important; }
body.woocommerce-cart .ctp-breadcrumb__sep           { color: #D4D4D8 !important; flex-shrink: 0 !important; line-height: 1 !important; }

/* ── Iconos +/- del bloque WooCommerce Cart ───────────────── */
/* Ocultamos el SVG y mostramos el caracter via ::before.
   Usamos overflow:visible por si el botón tiene overflow:hidden */
body.woocommerce-cart .wc-block-components-quantity-selector__button svg {
  width:      0 !important;
  height:     0 !important;
  overflow:   hidden !important;
  visibility: hidden !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button {
  overflow:    visible !important;
  font-size:   1.25rem !important;
  font-weight: 400 !important;
  color:       #18181B !important;
  line-height: 1 !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button--minus::before {
  content:  '−' !important;
  display:  block !important;
  color:    #18181B !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button--plus::before {
  content:  '+' !important;
  display:  block !important;
  color:    #18181B !important;
}

#ctp-cart-page-root {
  width:       100% !important;
  font-family: var(--ctp-font) !important;
  padding:     2rem 0 4rem !important;
}

/* ── Carrito vacío ────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__empty {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  text-align:      center !important;
  padding:         5rem 1rem !important;
  gap:             1rem !important;
}

#ctp-cart-page-root .ctp-cart-page__empty-icon {
  width:           88px !important;
  height:          88px !important;
  border-radius:   50% !important;
  background:      var(--ctp-zinc-100) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           var(--ctp-zinc-400) !important;
  margin-bottom:   0.5rem !important;
}

#ctp-cart-page-root .ctp-cart-page__empty-title {
  font-size:   1.5rem !important;
  font-weight: 600 !important;
  color:       var(--ctp-text) !important;
  margin:      0 !important;
}

#ctp-cart-page-root .ctp-cart-page__empty-msg {
  font-size:  var(--ctp-sm) !important;
  color:      var(--ctp-muted) !important;
  max-width:  28rem !important;
  margin:     0 !important;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__breadcrumb {
  display:     flex !important;
  align-items: center !important;
  gap:         0.375rem !important;
  font-size:   var(--ctp-xs) !important;
  color:       var(--ctp-muted) !important;
  margin-bottom: 1.5rem !important;
}

#ctp-cart-page-root .ctp-cart-page__breadcrumb iconify-icon {
  color: var(--ctp-zinc-400) !important;
}

#ctp-cart-page-root .ctp-cart-page__breadcrumb-link {
  color:           var(--ctp-muted) !important;
  text-decoration: none !important;
  transition:      color var(--ctp-t) !important;
}

#ctp-cart-page-root .ctp-cart-page__breadcrumb-link:hover {
  color: var(--ctp-text) !important;
}

/* ── Encabezado ───────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__head {
  display:     flex !important;
  align-items: baseline !important;
  gap:         0.75rem !important;
  margin-bottom: 2rem !important;
}

#ctp-cart-page-root .ctp-cart-page__title {
  font-size:   1.5rem !important;
  font-weight: 700 !important;
  color:       var(--ctp-text) !important;
  margin:      0 !important;
  line-height: 1.2 !important;
}

#ctp-cart-page-root .ctp-cart-page__count {
  font-size:   var(--ctp-sm) !important;
  color:       var(--ctp-muted) !important;
  font-weight: 400 !important;
}

/* ── Layout dos columnas ──────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__layout {
  display:               grid !important;
  grid-template-columns: 1fr 380px !important;
  gap:                   2rem !important;
  align-items:           start !important;
}

/* ── Formulario / lista de items ──────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__form {
  margin: 0 !important;
  padding: 0 !important;
}

#ctp-cart-page-root .ctp-cart-page__items {
  display:        flex !important;
  flex-direction: column !important;
  gap:            1px !important;
  background:     var(--ctp-border) !important;
  border:         1px solid var(--ctp-border) !important;
  border-radius:  var(--ctp-r-lg) !important;
  overflow:       hidden !important;
}

/* ── Item individual ──────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__item {
  display:         flex !important;
  gap:             1.25rem !important;
  background:      var(--ctp-surface) !important;
  padding:         1.25rem !important;
}

/* ── Imagen del item ──────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__item-img-wrap {
  flex-shrink: 0 !important;
  width:       100px !important;
  height:      100px !important;
  border-radius: var(--ctp-r-md) !important;
  overflow:    hidden !important;
  background:  var(--ctp-zinc-100) !important;
}

#ctp-cart-page-root .ctp-cart-page__item-img-wrap a {
  display: block !important;
  width:   100% !important;
  height:  100% !important;
}

#ctp-cart-page-root .ctp-cart-page__item-img-wrap img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
}

/* ── Cuerpo del item ──────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__item-body {
  flex:           1 !important;
  min-width:      0 !important;
  display:        flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap:            0.75rem !important;
}

#ctp-cart-page-root .ctp-cart-page__item-top {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     flex-start !important;
  gap:             0.75rem !important;
}

#ctp-cart-page-root .ctp-cart-page__item-name {
  font-size:   var(--ctp-base) !important;
  font-weight: 600 !important;
  color:       var(--ctp-text) !important;
  margin:      0 !important;
  line-height: 1.35 !important;
}

#ctp-cart-page-root .ctp-cart-page__item-name a {
  color:           inherit !important;
  text-decoration: none !important;
  transition:      color var(--ctp-t) !important;
}

#ctp-cart-page-root .ctp-cart-page__item-name a:hover {
  color: var(--ctp-accent) !important;
}

#ctp-cart-page-root .ctp-cart-page__item-meta {
  font-size:  var(--ctp-xs) !important;
  color:      var(--ctp-muted) !important;
  margin-top: 0.25rem !important;
}

/* Estilos de variaciones de WooCommerce */
#ctp-cart-page-root .ctp-cart-page__item-meta dl.variation {
  margin:  0 !important;
  padding: 0 !important;
  display: flex !important;
  gap:     0.25rem 0.5rem !important;
  flex-wrap: wrap !important;
}
#ctp-cart-page-root .ctp-cart-page__item-meta dl.variation dt,
#ctp-cart-page-root .ctp-cart-page__item-meta dl.variation dd {
  margin: 0 !important;
  font-size: var(--ctp-xs) !important;
  color: var(--ctp-muted) !important;
}
#ctp-cart-page-root .ctp-cart-page__item-meta dl.variation dt::after {
  content: ':' !important;
}

/* ── Botón eliminar item ──────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__item-remove {
  flex-shrink:     0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           32px !important;
  height:          32px !important;
  border-radius:   50% !important;
  color:           var(--ctp-zinc-400) !important;
  text-decoration: none !important;
  transition:      color var(--ctp-t), background var(--ctp-t) !important;
}

#ctp-cart-page-root .ctp-cart-page__item-remove:hover {
  color:      #EF4444 !important;
  background: rgba(239,68,68,0.08) !important;
}

/* ── Parte inferior del item: cantidad + subtotal ─────────── */
#ctp-cart-page-root .ctp-cart-page__item-bottom {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             0.75rem !important;
}

/* ── Control de cantidad ──────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__item-qty {
  display:       flex !important;
  align-items:   center !important;
  border:        1px solid var(--ctp-border) !important;
  border-radius: var(--ctp-r-pill) !important;
  overflow:      visible !important;
  height:        36px !important;
}

#ctp-cart-page-root .ctp-cart-page__qty-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           36px !important;
  height:          36px !important;
  background:      transparent !important;
  border:          none !important;
  cursor:          pointer !important;
  color:           var(--ctp-zinc-600) !important;
  transition:      background var(--ctp-t), color var(--ctp-t) !important;
  flex-shrink:     0 !important;
  overflow:        visible !important;
}

#ctp-cart-page-root .ctp-cart-page__qty-btn:hover {
  background: var(--ctp-zinc-100) !important;
  color:      var(--ctp-text) !important;
}

/* Símbolo +/- dentro de los botones de cantidad */
#ctp-cart-page-root .ctp-cart-page__qty-btn span {
  font-size:      1.1rem !important;
  font-weight:    400 !important;
  line-height:    1 !important;
  color:          inherit !important;
  pointer-events: none !important;
  font-family:    var(--ctp-font) !important;
}

#ctp-cart-page-root .ctp-cart-page__qty-value {
  min-width:   2rem !important;
  text-align:  center !important;
  font-size:   var(--ctp-sm) !important;
  font-weight: 600 !important;
  color:       var(--ctp-text) !important;
  user-select: none !important;
}

/* ── Subtotal línea ───────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__item-subtotal {
  font-size:   var(--ctp-base) !important;
  font-weight: 600 !important;
  color:       var(--ctp-text) !important;
  white-space: nowrap !important;
}

/* Precios de WooCommerce dentro del subtotal */
#ctp-cart-page-root .ctp-cart-page__item-subtotal .woocommerce-Price-amount {
  font-size:   inherit !important;
  font-weight: inherit !important;
  color:       inherit !important;
}

/* Botón actualizar oculto (WC lo necesita para submit del form) */
#ctp-cart-page-root .ctp-cart-page__update-btn {
  position: absolute !important;
  width:    1px !important;
  height:   1px !important;
  padding:  0 !important;
  margin:   -1px !important;
  overflow: hidden !important;
  clip:     rect(0,0,0,0) !important;
  border:   0 !important;
}

/* ── Panel resumen ────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__summary {
  background:    var(--ctp-surface) !important;
  border:        1px solid var(--ctp-border) !important;
  border-radius: var(--ctp-r-lg) !important;
  padding:       1.5rem !important;
  position:      sticky !important;
  top:           calc(80px + 1.5rem) !important; /* header height + gap */
}

#ctp-cart-page-root .ctp-cart-page__summary-title {
  font-size:     var(--ctp-lg) !important;
  font-weight:   700 !important;
  color:         var(--ctp-text) !important;
  margin:        0 0 1.25rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--ctp-border) !important;
}

/* ── Filas del resumen ────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__summary-row {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     center !important;
  font-size:       var(--ctp-sm) !important;
  color:           var(--ctp-muted) !important;
  margin-bottom:   0.75rem !important;
  gap:             0.5rem !important;
}

#ctp-cart-page-root .ctp-cart-page__summary-row--discount {
  color: var(--ctp-accent-text, #065F46) !important;
}

#ctp-cart-page-root .ctp-cart-page__discount-val {
  color:       var(--ctp-accent) !important;
  font-weight: 600 !important;
}

#ctp-cart-page-root .ctp-cart-page__summary-row--shipping {
  color: var(--ctp-muted) !important;
}

#ctp-cart-page-root .ctp-cart-page__shipping-note {
  font-size:  var(--ctp-xs) !important;
  font-style: italic !important;
}

/* ── Cupón eliminar ───────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__coupon-remove {
  display:         inline-flex !important;
  align-items:     center !important;
  margin-left:     0.25rem !important;
  color:           var(--ctp-muted) !important;
  text-decoration: none !important;
  transition:      color var(--ctp-t) !important;
  vertical-align:  middle !important;
}
#ctp-cart-page-root .ctp-cart-page__coupon-remove:hover {
  color: #EF4444 !important;
}

/* ── Toggle cupón ─────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__coupon-toggle {
  margin-bottom: 0.75rem !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-toggle summary {
  list-style:      none !important;
  cursor:          pointer !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             0.375rem !important;
  font-size:       var(--ctp-xs) !important;
  color:           var(--ctp-muted) !important;
  transition:      color var(--ctp-t) !important;
  user-select:     none !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-toggle summary::-webkit-details-marker { display: none !important; }
#ctp-cart-page-root .ctp-cart-page__coupon-toggle summary::marker { display: none !important; }

#ctp-cart-page-root .ctp-cart-page__coupon-toggle summary:hover {
  color: var(--ctp-text) !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-arrow {
  margin-left:  auto !important;
  transition:   transform 0.2s ease !important;
}
#ctp-cart-page-root .ctp-cart-page__coupon-toggle[open] .ctp-cart-page__coupon-arrow {
  transform: rotate(180deg) !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-form {
  margin-top: 0.625rem !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-row {
  display: flex !important;
  gap:     0.5rem !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-input {
  flex:          1 !important;
  height:        40px !important;
  border:        1px solid var(--ctp-border) !important;
  border-radius: var(--ctp-r-pill) !important;
  padding:       0 1rem !important;
  font-family:   var(--ctp-font) !important;
  font-size:     var(--ctp-sm) !important;
  color:         var(--ctp-text) !important;
  background:    var(--ctp-surface) !important;
  outline:       none !important;
  transition:    border-color var(--ctp-t) !important;
}
#ctp-cart-page-root .ctp-cart-page__coupon-input:focus {
  border-color: var(--ctp-accent) !important;
}

#ctp-cart-page-root .ctp-cart-page__coupon-btn {
  height:        40px !important;
  padding:       0 1rem !important;
  background:    var(--ctp-zinc-900) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: var(--ctp-r-pill) !important;
  font-family:   var(--ctp-font) !important;
  font-size:     var(--ctp-sm) !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  white-space:   nowrap !important;
  transition:    background var(--ctp-t) !important;
}
#ctp-cart-page-root .ctp-cart-page__coupon-btn:hover {
  background: var(--ctp-zinc-800) !important;
}

/* ── Divider ──────────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__divider {
  border:        none !important;
  border-top:    1px solid var(--ctp-border) !important;
  margin:        1rem 0 !important;
}

/* ── Fila total ───────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__summary-row--total {
  font-size:   var(--ctp-base) !important;
  font-weight: 700 !important;
  color:       var(--ctp-text) !important;
  margin-bottom: 0.375rem !important;
}

#ctp-cart-page-root .ctp-cart-page__summary-row--total .woocommerce-Price-amount {
  font-size:   inherit !important;
  font-weight: inherit !important;
  color:       inherit !important;
}

/* ── Nota IVA ─────────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__tax-note {
  display:     flex !important;
  align-items: center !important;
  gap:         0.375rem !important;
  font-size:   var(--ctp-xs) !important;
  color:       var(--ctp-muted) !important;
  margin:      0 0 1.25rem !important;
}

/* ── Botón checkout ───────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__checkout-btn {
  width:            100% !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  gap:              0.5rem !important;
  height:           52px !important;
  font-size:        var(--ctp-base) !important;
  font-weight:      600 !important;
  text-decoration:  none !important;
  border-radius:    var(--ctp-r-pill) !important;
  background-color: #18181B !important;
  color:            #FFFFFF !important;
  border:           none !important;
  transition:       background-color var(--ctp-t) !important;
}
#ctp-cart-page-root .ctp-cart-page__checkout-btn:hover,
#ctp-cart-page-root .ctp-cart-page__checkout-btn:focus {
  background-color: #27272A !important;
  color:            #FFFFFF !important;
}

/* ── Seguir comprando ─────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__continue {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             0.375rem !important;
  margin-top:      0.875rem !important;
  font-size:       var(--ctp-sm) !important;
  color:           var(--ctp-muted) !important;
  text-decoration: none !important;
  transition:      color var(--ctp-t) !important;
}
#ctp-cart-page-root .ctp-cart-page__continue:hover {
  color: var(--ctp-text) !important;
}

/* ── Trust badges ─────────────────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__trust {
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.625rem !important;
  margin-top:     1.25rem !important;
  padding-top:    1.25rem !important;
  border-top:     1px solid var(--ctp-border) !important;
}

#ctp-cart-page-root .ctp-cart-page__trust-item {
  display:     flex !important;
  align-items: center !important;
  gap:         0.5rem !important;
  font-size:   var(--ctp-xs) !important;
  color:       var(--ctp-muted) !important;
}

#ctp-cart-page-root .ctp-cart-page__trust-item iconify-icon {
  color:       var(--ctp-accent) !important;
  flex-shrink: 0 !important;
}

/* ── Estado de carga (AJAX) ───────────────────────────────── */
#ctp-cart-page-root .ctp-cart-page__items.is-loading {
  opacity:        0.5 !important;
  pointer-events: none !important;
  transition:     opacity 0.2s !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  #ctp-cart-page-root .ctp-cart-page__layout {
    grid-template-columns: 1fr !important;
  }

  #ctp-cart-page-root .ctp-cart-page__summary {
    position: static !important;
  }
}

@media (max-width: 600px) {
  #ctp-cart-page-root {
    padding: 1.25rem 0 3rem !important;
  }

  #ctp-cart-page-root .ctp-cart-page__item {
    padding: 1rem !important;
    gap:     1rem !important;
  }

  #ctp-cart-page-root .ctp-cart-page__item-img-wrap {
    width:  80px !important;
    height: 80px !important;
  }

  #ctp-cart-page-root .ctp-cart-page__item-name {
    font-size: var(--ctp-sm) !important;
  }
}