/* ============================================================
   e-bussines PREMIUM · capa visual profesional (overlay)
   Se carga DESPUES de eb-tema.css y lo refina: hero, tarjetas,
   botones de compra, microinteracciones y responsive.
   No toca estructura: solo estilos + clases nuevas
   (.card-link, .card-actions, .btn-add-cart, .btn-buy-now).
   ============================================================ */

:root{
  --ebp-glow:0 0 0 1px rgba(125,211,252,.18), 0 18px 44px rgba(2,8,23,.55);
  --ebp-ring:0 0 0 4px rgba(59,130,246,.28);
  --ebp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Motion base ---------- */
@keyframes ebPulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}70%{box-shadow:0 0 0 12px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
@keyframes ebShine{0%{background-position:-140% 0}100%{background-position:240% 0}}
@keyframes ebUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- Navbar premium ---------- */
nav.navbar-dark{
  position:sticky;top:0;z-index:1030;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(10,17,32,.92)) !important;
  border-bottom:1px solid rgba(125,211,252,.14) !important;
  box-shadow:0 6px 26px rgba(2,8,23,.45) !important;
  padding:.6rem 0 !important;
}
nav.navbar-dark .navbar-brand{letter-spacing:-.3px}
nav.navbar-dark .brand-name{
  background:linear-gradient(90deg,#fff,#bcd6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
nav.navbar-dark .logo-img{max-height:34px;border-radius:8px}
nav.navbar-dark .btn-light{
  border-radius:999px !important;padding:.34rem .95rem !important;
  box-shadow:0 6px 18px rgba(59,130,246,.35) !important;
  transition:transform .25s var(--ebp-ease),box-shadow .25s var(--ebp-ease);
}
nav.navbar-dark .btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(59,130,246,.5) !important}
nav.navbar-dark .cart-badge{animation:ebPulse 2.6s infinite}

/* ---------- Hero ---------- */
.hero-ecom{
  position:relative;overflow:hidden;
  background:
    radial-gradient(720px 300px at 12% -30%,rgba(34,211,238,.35),transparent 62%),
    radial-gradient(680px 320px at 88% 130%,rgba(59,130,246,.42),transparent 60%),
    linear-gradient(135deg,#0b1e3d 0%,#0f172a 55%,#0a1120 100%) !important;
  border-bottom:1px solid rgba(125,211,252,.16);
  box-shadow:inset 0 -30px 60px -30px rgba(0,0,0,.6);
}
.hero-ecom::after{
  width:340px;height:340px;right:-110px;top:-140px;
  background:radial-gradient(circle,rgba(34,211,238,.30),transparent 68%) !important;
  animation:ebUp .8s var(--ebp-ease);
}
.hero-ecom h1{
  font-size:2.15rem;font-weight:900;letter-spacing:-1.1px;
  text-shadow:0 6px 26px rgba(0,0,0,.45);
}
.hero-ecom p{color:#c8d8f2 !important;opacity:1;font-size:1.02rem}
.hero-ecom .btn-hero{
  border-radius:999px !important;padding:.62rem 1.5rem !important;
  font-weight:800 !important;letter-spacing:.1px;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .28s var(--ebp-ease),box-shadow .28s var(--ebp-ease);
  box-shadow:0 10px 26px rgba(2,8,23,.42);
}
.hero-ecom .btn-hero i{transition:transform .28s var(--ebp-ease)}
.hero-ecom .btn-hero:hover{transform:translateY(-3px)}
.hero-ecom .btn-hero:hover i{transform:translateX(3px)}
.hero-ecom .btn-hero-wa{background:linear-gradient(135deg,#22c15e,#0f9d58) !important;color:#fff !important}

/* ---------- Superficie de tienda ---------- */
.store-info{
  border:1px solid rgba(125,211,252,.18) !important;
  box-shadow:var(--ebp-glow) !important;
  backdrop-filter:blur(6px);
}
.store-info .store-details h5{font-size:1.12rem;letter-spacing:-.4px}
.store-photo{box-shadow:0 10px 26px rgba(2,8,23,.55);transition:transform .3s var(--ebp-ease)}
.store-photo:hover{transform:scale(1.03)}

/* ---------- Buscador ---------- */
.search-wrap .search-box,
.search-wrap .form-control{
  border-radius:999px !important;padding:.72rem 1.15rem !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.search-wrap .btn-primary{
  border-radius:999px !important;width:46px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(59,130,246,.4);
  transition:transform .25s var(--ebp-ease);
}
.search-wrap .btn-primary:hover{transform:translateY(-2px) scale(1.04)}

/* ---------- Filtros de categoria ---------- */
.categoria-filtro-btn,.servicio-filtro-btn{
  border-radius:999px !important;padding:.42rem 1.05rem !important;
  font-weight:600;letter-spacing:.1px;
  transition:all .25s var(--ebp-ease) !important;
}
.categoria-filtro-btn:hover,.servicio-filtro-btn:hover{transform:translateY(-2px)}
.categoria-filtro-btn.active,.servicio-filtro-btn.active{
  box-shadow:0 10px 22px rgba(59,130,246,.38) !important;
}
.cat-select-wrap .form-select{border-radius:999px !important}

/* ---------- Tarjetas de producto ---------- */
.card-product{
  position:relative;display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
  background:
    linear-gradient(165deg,rgba(30,41,71,.96),rgba(13,20,38,.98)) !important;
  border:1px solid rgba(125,211,252,.14) !important;
  border-radius:18px !important;
  transition:transform .32s var(--ebp-ease),box-shadow .32s var(--ebp-ease),border-color .32s var(--ebp-ease);
}
.card-product::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.75),rgba(59,130,246,.75),transparent);
  opacity:.55;transition:opacity .3s ease;
}
.card-product:hover{
  transform:translateY(-7px) !important;
  border-color:rgba(125,211,252,.45) !important;
  box-shadow:0 22px 46px rgba(2,8,23,.6),0 0 0 1px rgba(125,211,252,.14) !important;
}
.card-product:hover::before{opacity:1}
.card-product .card-link{display:block;text-decoration:none !important;color:inherit !important}
.card-product .info{align-items:stretch}
.card-product .product-title{
  font-weight:700;line-height:1.32;letter-spacing:-.3px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-product .product-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.8rem;line-height:1.45;
}
.card-product .badge{backdrop-filter:blur(4px);border:1px solid rgba(125,211,252,.22)}
.card-product .product-price{
  font-weight:900;letter-spacing:-.6px;
  background:linear-gradient(90deg,#7dd3fc,#38bdf8 55%,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  text-shadow:none;
}

/* Imagen de la tarjeta (si la plantilla la trae) */
.card-product .card-img{
  background:radial-gradient(circle at 50% 32%,#14234397,#0b1224) !important;
  border-bottom:1px solid rgba(125,211,252,.12) !important;
}
.card-product .card-img img{padding:14px;transition:transform .45s var(--ebp-ease),filter .35s ease}
.card-product:hover .card-img img{transform:scale(1.09);filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}

/* Fila de acciones (fuera del enlace: no navega) */
.card-actions{
  display:flex;gap:8px;align-items:stretch;
  padding:0 16px 16px;margin-top:auto;
}
.card-actions .btn-view{
  flex:1 1 auto;margin:0 !important;width:auto !important;display:flex;
  align-items:center;justify-content:center;gap:.4rem;
  border-radius:12px !important;padding:.5rem .6rem !important;
  font-size:.8rem;font-weight:700 !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(125,211,252,.3) !important;color:#cfe6ff !important;
  transition:all .25s var(--ebp-ease);
}
.card-actions .btn-view:hover{background:rgba(59,130,246,.2) !important;color:#fff !important;transform:translateY(-2px)}
.card-actions .add-form{flex:1 1 auto;margin:0;display:flex}
.btn-add-cart{
  flex:1;width:100%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  border-radius:12px !important;padding:.5rem .6rem !important;
  font-size:.8rem;font-weight:800 !important;letter-spacing:.1px;
  color:#fff !important;
  background:linear-gradient(135deg,#3b82f6,#22d3ee) !important;
  box-shadow:0 8px 18px rgba(59,130,246,.35);
  transition:transform .25s var(--ebp-ease),box-shadow .25s var(--ebp-ease),filter .25s ease;
}
.btn-add-cart:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(59,130,246,.5);filter:brightness(1.07)}
.btn-add-cart:active{transform:translateY(0)}
.btn-add-cart i{font-size:.95rem}

/* Sin acciones viejas dentro del enlace */
.card-product .info > .btn-view{display:none !important}

/* ---------- Botones de compra (ficha de producto) ---------- */
.btn-add,.btn-pagar,.btn-confirmar,.btn-continuar{
  border-radius:999px !important;padding:.72rem 1.6rem !important;
  font-weight:800 !important;letter-spacing:.2px;
  display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:0 12px 26px rgba(59,130,246,.38);
  transition:transform .26s var(--ebp-ease),box-shadow .26s var(--ebp-ease),filter .26s ease;
}
.btn-add:hover,.btn-pagar:hover,.btn-confirmar:hover,.btn-continuar:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 16px 32px rgba(59,130,246,.5)}
.btn-add:disabled{opacity:.45;box-shadow:none;transform:none;filter:grayscale(.4)}
.btn-buy-now{
  border-radius:999px !important;padding:.72rem 1.6rem !important;
  font-weight:800 !important;letter-spacing:.2px;
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,#f59e0b,#f97316) !important;
  color:#12161f !important;border:none !important;
  box-shadow:0 12px 26px rgba(245,158,11,.35);
  transition:transform .26s var(--ebp-ease),box-shadow .26s var(--ebp-ease),filter .26s ease;
}
.btn-buy-now:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 32px rgba(249,115,22,.45);color:#12161f !important}
.btn-buy-now i{font-size:1.05rem}

/* Precio de ficha */
.product-price,.precio{
  font-weight:900;letter-spacing:-.8px;
  text-shadow:0 4px 18px rgba(56,189,248,.28);
}
.detalle-item{padding:.34rem 0;border-bottom:1px dashed rgba(125,211,252,.14)}
.detalle-label{font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:.72rem}

/* ---------- Imagen de producto ---------- */
.prod-img,.rel-img,.item-img{
  border-radius:14px !important;
  border:1px solid rgba(125,211,252,.14);
  transition:transform .35s var(--ebp-ease),filter .35s ease;
}
.prod-img:hover,.rel-img:hover{transform:scale(1.03);filter:brightness(1.05)}

/* ---------- Carrito / resumen ---------- */
.cart-item{transition:transform .25s var(--ebp-ease),border-color .25s ease}
.cart-item:hover{border-color:rgba(125,211,252,.4) !important}
.summary-box,.total-card,.resumen-card{box-shadow:var(--ebp-glow) !important}
.invoice-table thead th{text-transform:uppercase;letter-spacing:.6px;font-size:.72rem}
.qty-badge{min-width:30px;border-radius:999px !important;font-weight:800}

/* ---------- Checkout ---------- */
.payment-options .pay-opt{
  border-radius:14px !important;transition:all .25s var(--ebp-ease) !important;
}
.payment-options .pay-opt:hover{transform:translateY(-2px)}
.payment-options .pay-opt.selected{box-shadow:0 12px 26px rgba(59,130,246,.3) !important}
.confirm-box{box-shadow:var(--ebp-glow) !important}
.btn-ws{border-radius:999px !important;font-weight:800 !important}

/* ---------- Titulos de seccion ---------- */
h4.fw-bold,h5.fw-bold,.section-title{
  position:relative;letter-spacing:-.4px;
}
h4.fw-bold i,h5.fw-bold i{color:#7dd3fc}

/* ---------- Footer ---------- */
footer{border-top:1px solid rgba(125,211,252,.14)}
footer .container{padding-top:1.6rem;padding-bottom:1.6rem}

/* ---------- Focus visible (accesibilidad) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--ebp-ring) !important;
}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .hero-ecom h1{font-size:1.55rem}
  .hero-ecom{padding:26px 0 20px}
  .card-actions{padding:0 12px 12px;gap:6px}
  .card-actions .btn-view,.btn-add-cart{font-size:.74rem;padding:.46rem .4rem !important}
  .btn-add,.btn-buy-now{width:100%;justify-content:center}
}