/* ============================================================
   CART DRAWER — Compra Tu Panel
   Todo bajo #ctp-cart-root (especificidad 1,0,x + !important)
   z-index: overlay 1500 · drawer 1600 (sobre header 1000)
   ============================================================ */

/* ── Contenedor raíz ─────────────────────────────────────────── */
#ctp-cart-root {
  position:      fixed !important;
  inset:         0 !important;
  z-index:       1500 !important;
  pointer-events: none !important; /* pasa clics hasta que se abra */
}

/* ── Overlay ─────────────────────────────────────────────────── */
#ctp-cart-root #ctp-cart-overlay {
  position:              fixed !important;
  inset:                 0 !important;
  z-index:               1500 !important;
  background:            rgba(9, 9, 11, 0.50) !important;
  backdrop-filter:       blur(8px) saturate(0.7) !important;
  -webkit-backdrop-filter: blur(8px) saturate(0.7) !important;
  opacity:               0 !important;
  pointer-events:        none !important;
  transition:            opacity 0.3s ease !important;
}
#ctp-cart-root #ctp-cart-overlay.is-visible {
  opacity:        1 !important;
  pointer-events: auto !important;
}

/* ── Drawer panel ────────────────────────────────────────────── */
#ctp-cart-root #ctp-cart-drawer {
  position:       fixed !important;
  top:            0 !important;
  right:          0 !important;
  bottom:         0 !important;
  width:          clamp(320px, 440px, 100vw) !important;
  height:         100vh !important;
  height:         100dvh !important;
  z-index:        1600 !important;
  background:     #FFFFFF !important;
  display:        flex !important;
  flex-direction: column !important;
  transform:      translateX(100%) !important;
  transition:     transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow:     -4px 0 40px rgba(0, 0, 0, 0.12) !important;
  pointer-events: auto !important;
}
#ctp-cart-root #ctp-cart-drawer.is-open {
  transform: translateX(0) !important;
}

/* ── Cabecera ────────────────────────────────────────────────── */
#ctp-cart-root .ctp-cart-drawer__header {
  display:         flex !important;
  align-items:     flex-start !important;
  justify-content: space-between !important;
  gap:             1rem !important;
  padding:         1.5rem !important;
  border-bottom:   1px solid #E4E4E7 !important;
  flex-shrink:     0 !important;
}
#ctp-cart-root .ctp-cart-drawer__title {
  font-family:    'Inter', sans-serif !important;
  font-size:      1.125rem !important;
  font-weight:    600 !important;
  color:          #18181B !important;
  letter-spacing: -0.015em !important;
  line-height:    1.3 !important;
  margin:         0 !important;
}
#ctp-cart-root .ctp-cart-drawer__subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size:   0.75rem !important;
  color:       #A1A1AA !important;
  margin:      0.25rem 0 0 !important;
}
#ctp-cart-root .ctp-cart-drawer__close {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  width:           36px !important;
  height:          36px !important;
  border-radius:   9999px !important;
  background:      transparent !important;
  border:          none !important;
  color:           #A1A1AA !important;
  cursor:          pointer !important;
  transition:      color 0.15s ease, background 0.15s ease !important;
}
#ctp-cart-root .ctp-cart-drawer__close:hover { color: #18181B !important; background: #F4F4F5 !important; }
#ctp-cart-root .ctp-cart-drawer__close:focus { outline: 2px solid #10B981 !important; outline-offset: 2px !important; }

/* ── Cuerpo scrollable ───────────────────────────────────────── */
#ctp-cart-root .ctp-cart-drawer__body {
  flex:       1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding:    1rem 1.5rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E4E4E7 transparent !important;
}
#ctp-cart-root .ctp-cart-drawer__body::-webkit-scrollbar       { width: 4px; }
#ctp-cart-root .ctp-cart-drawer__body::-webkit-scrollbar-track  { background: transparent; }
#ctp-cart-root .ctp-cart-drawer__body::-webkit-scrollbar-thumb  { background: #E4E4E7; border-radius: 4px; }
#ctp-cart-root .ctp-cart-drawer__body.is-loading {
  opacity:        0.5 !important;
  pointer-events: none !important;
}

/* ── Carrito vacío ───────────────────────────────────────────── */
#ctp-cart-root .ctp-cart-empty {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             1rem !important;
  padding:         3rem 1rem !important;
  text-align:      center !important;
  height:          100% !important;
}
#ctp-cart-root .ctp-cart-empty iconify-icon { color: #D4D4D8; }
#ctp-cart-root .ctp-cart-empty__msg {
  font-family: 'Inter', sans-serif !important;
  font-size:   0.875rem !important;
  color:       #71717A !important;
  margin:      0 !important;
}
#ctp-cart-root .ctp-cart-empty .ctp-btn { margin-top: 0.5rem !important; }

/* ── Lista de ítems ──────────────────────────────────────────── */
#ctp-cart-root .ctp-cart-items {
  display:        flex !important;
  flex-direction: column !important;
  gap:            1.25rem !important;
  list-style:     none !important;
  margin:         0 !important;
  padding:        0 !important;
}

/* ── Ítem ────────────────────────────────────────────────────── */
#ctp-cart-root .ctp-cart-item {
  display:        flex !important;
  gap:            0.875rem !important;
  align-items:    flex-start !important;
  padding-bottom: 1.25rem !important;
  border-bottom:  1px solid #F4F4F5 !important;
  transition:     opacity 0.2s ease !important;
}
#ctp-cart-root .ctp-cart-item:last-child {
  border-bottom:  none !important;
  padding-bottom: 0 !important;
}

/* Imagen */
#ctp-cart-root .ctp-cart-item__img-link { flex-shrink: 0 !important; line-height: 0 !important; }
#ctp-cart-root .ctp-cart-item__img {
  width:         72px !important;
  height:        72px !important;
  object-fit:    cover !important;
  border-radius: 8px !important;
  background:    #F4F4F5 !important;
  border:        1px solid #E4E4E7 !important;
  display:       block !important;
  max-width:     none !important;
}

/* Contenido */
#ctp-cart-root .ctp-cart-item__content {
  flex:           1 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.375rem !important;
  min-width:      0 !important;
}
#ctp-cart-root .ctp-cart-item__header {
  display:         flex !important;
  align-items:     flex-start !important;
  justify-content: space-between !important;
  gap:             0.5rem !important;
}
#ctp-cart-root .ctp-cart-item__name {
  font-family:       'Inter', sans-serif !important;
  font-size:         0.875rem !important;
  font-weight:       600 !important;
  color:             #18181B !important;
  line-height:       1.35 !important;
  text-decoration:   none !important;
  transition:        color 0.15s ease !important;
  display:           -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow:          hidden !important;
}
#ctp-cart-root .ctp-cart-item__name:hover { color: #10B981 !important; }

/* Botón eliminar */
#ctp-cart-root .ctp-cart-item__remove {
  flex-shrink:   0 !important;
  display:       flex !important;
  align-items:   center !important;
  background:    transparent !important;
  border:        none !important;
  padding:       0.25rem !important;
  color:         #D4D4D8 !important;
  cursor:        pointer !important;
  border-radius: 4px !important;
  transition:    color 0.15s ease, background 0.15s ease !important;
  margin-top:    0.1rem !important;
}
#ctp-cart-root .ctp-cart-item__remove:hover { color: #EF4444 !important; background: #FEF2F2 !important; }

/* Variación */
#ctp-cart-root .ctp-cart-item__variation {
  font-family: 'Inter', sans-serif !important;
  font-size:   0.75rem !important;
  color:       #A1A1AA !important;
  margin:      0 !important;
  line-height: 1.4 !important;
}

/* Precio + cantidad */
#ctp-cart-root .ctp-cart-item__footer {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             0.5rem !important;
  margin-top:      0.125rem !important;
}
#ctp-cart-root .ctp-cart-item__price {
  font-family:    'Inter', sans-serif !important;
  font-size:      0.875rem !important;
  font-weight:    600 !important;
  color:          #18181B !important;
  letter-spacing: -0.01em !important;
}
#ctp-cart-root .ctp-cart-item__price .woocommerce-Price-amount {
  font-size:   inherit !important;
  font-weight: inherit !important;
}

/* Controles +/- */
#ctp-cart-root .ctp-cart-item__qty {
  display:       flex !important;
  align-items:   center !important;
  gap:           0.375rem !important;
  background:    #F4F4F5 !important;
  border-radius: 9999px !important;
  padding:       0.25rem 0.5rem !important;
}
#ctp-cart-root .ctp-qty-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           22px !important;
  height:          22px !important;
  border-radius:   50% !important;
  background:      #FFFFFF !important;
  border:          none !important;
  color:           #18181B !important;
  font-size:       1rem !important;
  font-weight:     500 !important;
  line-height:     1 !important;
  cursor:          pointer !important;
  transition:      background 0.15s ease, color 0.15s ease !important;
  flex-shrink:     0 !important;
  padding:         0 !important;
}
#ctp-cart-root .ctp-qty-btn:hover { background: #E4E4E7 !important; }
#ctp-cart-root .ctp-qty-value {
  font-family: 'Inter', sans-serif !important;
  font-size:   0.75rem !important;
  font-weight: 700 !important;
  color:       #18181B !important;
  min-width:   1.25rem !important;
  text-align:  center !important;
  line-height: 1 !important;
}

/* ── Pie: totales + CTA ──────────────────────────────────────── */
#ctp-cart-root .ctp-cart-drawer__footer {
  flex-shrink:    0 !important;
  padding:        1.25rem 1.5rem 1.5rem !important;
  border-top:     1px solid #E4E4E7 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.875rem !important;
  background:     #FFFFFF !important;
}
#ctp-cart-root .ctp-cart-drawer__totals {
  display:        flex !important;
  flex-direction: column !important;
  gap:            0.5rem !important;
}
#ctp-cart-root .ctp-cart-totals__row {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  font-family:     'Inter', sans-serif !important;
  font-size:       0.875rem !important;
  color:           #71717A !important;
}
#ctp-cart-root .ctp-cart-totals__row span:last-child {
  font-weight: 500 !important;
  color:       #18181B !important;
}
#ctp-cart-root .ctp-cart-totals__row--discount               { color: #10B981 !important; }
#ctp-cart-root .ctp-cart-totals__row--discount span          { color: #10B981 !important; }
#ctp-cart-root .ctp-cart-totals__row--discount span:last-child { font-weight: 600 !important; }
#ctp-cart-root .ctp-cart-totals__row--total {
  font-size:   0.9375rem !important;
  font-weight: 600 !important;
  color:       #18181B !important;
  padding-top: 0.625rem !important;
  margin-top:  0.125rem !important;
  border-top:  1px solid #E4E4E7 !important;
}
#ctp-cart-root .ctp-cart-totals__row--total span           { color: #18181B !important; }
#ctp-cart-root .ctp-cart-totals__row--total span:last-child { font-weight: 700 !important; font-size: 1.0625rem !important; }

/* Botón principal */
#ctp-cart-root .ctp-cart-drawer__checkout {
  width:           100% !important;
  justify-content: center !important;
  padding:         0.875rem 1.5rem !important;
  font-family:     'Inter', sans-serif !important;
}

/* Enlace secundario */
#ctp-cart-root .ctp-cart-drawer__view-cart {
  font-family:     'Inter', sans-serif !important;
  font-size:       0.75rem !important;
  color:           #A1A1AA !important;
  text-align:      center !important;
  padding:         0.25rem 0 !important;
  transition:      color 0.15s ease !important;
  text-decoration: none !important;
  display:         block !important;
}
#ctp-cart-root .ctp-cart-drawer__view-cart:hover { color: #18181B !important; }