/* Zeta Tecno · Tarjetas Modern Tech · vista previa 2026-09-03 */
:root{
  --zt-tech-ink:#111827;
  --zt-tech-muted:#697181;
  --zt-tech-line:#e6eaf0;
  --zt-tech-pink:#f5297b;
  --zt-tech-cyan:#25c8e8;
}

#product-grid{align-items:stretch}
#product-grid>.zt-product-col{display:flex}

/* Estructura general: clara, precisa y con profundidad contenida */
#product-grid .zt-clickable-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(222,227,235,.95);
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  box-shadow:0 13px 36px rgba(7,14,28,.11);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;
}
#product-grid .zt-clickable-card::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  z-index:12;
  height:3px;
  background:linear-gradient(90deg,var(--zt-tech-pink),#a149cb 50%,var(--zt-tech-cyan));
  opacity:.88;
  pointer-events:none;
}
#product-grid .zt-clickable-card:hover,
#product-grid .zt-clickable-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(245,41,123,.34);
  box-shadow:0 22px 48px rgba(7,14,28,.17),0 0 0 1px rgba(37,200,232,.06);
}
#product-grid .zt-clickable-card:focus-visible{
  outline:3px solid rgba(245,41,123,.16);
  outline-offset:3px;
}

/* Vidriera tecnológica de imagen */
#product-grid .zt-clickable-card .images-wrapper{
  position:relative;
  display:block;
  min-height:306px;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(37,200,232,.18),transparent 28%),
    radial-gradient(circle at 15% 82%,rgba(245,41,123,.12),transparent 31%),
    linear-gradient(145deg,#edf2f8 0%,#fbfdff 58%,#eef4f8 100%);
}
#product-grid .zt-clickable-card .images-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.42;
  background-image:
    linear-gradient(rgba(42,67,99,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,67,99,.065) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),transparent 86%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),transparent 86%);
  pointer-events:none;
}
#product-grid .zt-clickable-card .images-wrapper::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:42px;
  z-index:0;
  width:62%;
  height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(20,37,60,.13);
  filter:blur(13px);
  pointer-events:none;
}
#product-grid .zt-clickable-card .main-image{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:306px;
  padding:25px 27px 61px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
#product-grid .zt-clickable-card .main-image>img,
#product-grid .zt-clickable-card img.card-img-top{
  position:relative;
  z-index:2;
  width:100%;
  height:220px;
  max-width:100%;
  padding:0;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 16px 15px rgba(16,30,48,.14));
  transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .32s ease;
}
#product-grid .zt-clickable-card:hover .main-image>img{
  transform:translateY(-4px) scale(1.025);
  filter:drop-shadow(0 20px 18px rgba(16,30,48,.19));
}

/* Miniaturas integradas abajo, sin quitar protagonismo al producto */
#product-grid .zt-clickable-card .thumbnails{
  position:absolute;
  left:16px;
  right:16px;
  bottom:13px;
  z-index:7;
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:6px;
  max-width:none;
  padding:0;
  overflow-x:auto;
  border:0;
  scrollbar-width:none;
}
#product-grid .zt-clickable-card .thumbnails::-webkit-scrollbar{display:none}
#product-grid .zt-clickable-card .thumbnail{
  width:36px;
  height:36px;
  flex:0 0 36px;
  padding:3px;
  object-fit:contain;
  border:1px solid rgba(104,119,140,.20);
  border-radius:9px;
  background:rgba(255,255,255,.82);
  opacity:.72;
  box-shadow:0 4px 11px rgba(20,35,55,.07);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transition:opacity .18s ease,transform .18s ease,border-color .18s ease;
}
#product-grid .zt-clickable-card .thumbnail:hover,
#product-grid .zt-clickable-card .thumbnail.active{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(245,41,123,.62);
  box-shadow:0 0 0 2px rgba(245,41,123,.09);
}

/* Etiquetas NOVEDAD y DESTACADO con el formato Signature V3 */
#product-grid .discount-overlay{
  position:absolute;
  top:18px;
  left:18px;
  right:auto;
  z-index:11;
  min-height:29px;
  padding:8px 11px;
  transform:none;
  border:1px solid rgba(255,255,255,.60);
  border-radius:9px;
  background:rgba(10,19,33,.91);
  box-shadow:0 9px 22px rgba(8,17,30,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#product-grid .discount-overlay::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:7px;
  border-radius:50%;
  background:var(--zt-tech-pink);
  box-shadow:0 0 0 4px rgba(245,41,123,.14);
  vertical-align:middle;
}
#product-grid .discount-overlay p{
  display:inline;
  margin:0!important;
  color:#fff!important;
  font-size:9px!important;
  line-height:1.2;
  font-weight:900!important;
  letter-spacing:.10em;
  text-transform:uppercase;
}
#product-grid .zt-featured-badge{
  top:18px;
  right:18px;
  bottom:auto;
  left:auto;
  z-index:11;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:9px;
  color:#8b5f00;
  background:rgba(255,255,255,.78);
  box-shadow:0 9px 22px rgba(8,17,30,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Cuerpo comercial claro y ordenado */
#product-grid .zt-premium-card-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:17px 19px 18px;
}
.zt-card-brand-row{margin:0 0 8px}
.zt-brand-wordmark{
  color:#657080;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.16em;
}
.zt-brand-wordmark::before{
  width:16px;
  height:3px;
  margin-right:7px;
  background:linear-gradient(90deg,var(--zt-tech-pink),var(--zt-tech-cyan));
}
#product-grid .zt-card-title{
  min-height:48px;
  margin:0 0 6px;
  color:var(--zt-tech-ink);
  font-size:1.06rem;
  line-height:1.4;
  font-weight:800;
  letter-spacing:-.014em;
}
#product-grid .zt-card-description{
  min-height:38px;
  margin:0 0 13px;
  color:var(--zt-tech-muted)!important;
  font-size:.76rem!important;
  line-height:1.55;
}

/* Precio sin recuadro pesado */
.zt-price-block{
  min-height:71px;
  margin:0 0 11px;
  padding:0 0 11px;
  border:0;
  border-bottom:1px solid var(--zt-tech-line);
  border-radius:0;
  background:transparent;
}
.zt-price-old-row{margin-bottom:3px;color:#9299a5;font-size:9.5px}
.zt-price-current strong{
  color:var(--zt-tech-ink);
  font-size:1.44rem;
  font-weight:900;
  letter-spacing:-.045em;
}
.zt-price-prefix{color:#768090;font-size:9px}
.zt-price-saving-line{margin-top:4px;color:#0b774a;font-size:9.5px}
.zt-price-consult{justify-content:flex-start}

/* Datos útiles como pequeñas señales de sistema */
.zt-card-highlights{
  display:flex;
  align-content:flex-start;
  min-height:50px;
  margin:0 0 12px;
  gap:6px;
}
.zt-callout{
  padding:5px 8px;
  border-radius:7px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.01em;
}
.zt-callout-available{color:#126b45;background:#eef8f3;border-color:#d8ece2}
.zt-callout-low{color:#8a5000;background:#fff5df;border-color:#efddb4}
.zt-callout-shipping{color:#54606f;background:#f2f5f8;border-color:#e2e7ed}
.zt-callout-discount{color:#ae104e;background:#fff0f6;border-color:#f7cade}

/* Pie moderno, sin ocupar visualmente toda la tarjeta */
.zt-card-footer-action{
  margin-top:auto;
  min-height:39px;
  padding-top:11px;
  border-top:1px solid var(--zt-tech-line);
}
.zt-view-product{
  color:#1d2735;
  font-size:9.8px;
  font-weight:900;
  letter-spacing:.075em;
}
.zt-view-product i{
  width:27px;
  height:27px;
  display:inline-grid;
  place-items:center;
  margin-left:4px;
  border-radius:8px;
  color:#fff;
  background:var(--zt-tech-ink);
  transition:transform .2s ease,background .2s ease;
}
#product-grid .zt-clickable-card:hover .zt-view-product{color:var(--zt-tech-pink)}
#product-grid .zt-clickable-card:hover .zt-view-product i{
  transform:translateX(2px);
  background:linear-gradient(135deg,var(--zt-tech-pink),#cd155e);
}
.zt-card-mini-actions{gap:6px}
.zt-favorite-product,.zt-share-product{
  width:32px!important;
  height:32px!important;
  border:1px solid #e1e6ec!important;
  border-radius:9px!important;
  color:#6f7886!important;
  background:#f8fafc!important;
  box-shadow:none!important;
}
.zt-favorite-product:hover,.zt-share-product:hover,.zt-favorite-product.is-favorite{
  color:var(--zt-tech-pink)!important;
  border-color:rgba(245,41,123,.35)!important;
  background:#fff3f8!important;
}

/* El estado sin stock conserva prioridad y legibilidad */
#product-grid .card>.stock-card-overlay{z-index:30;border-radius:inherit}

@media(max-width:767px){
  #product-grid .zt-clickable-card:hover{transform:none}
  #product-grid .zt-clickable-card .images-wrapper,
  #product-grid .zt-clickable-card .main-image{min-height:292px}
  #product-grid .zt-clickable-card .main-image>img,
  #product-grid .zt-clickable-card img.card-img-top{height:210px}
}
@media(max-width:575px){
  #product-grid .zt-clickable-card{border-radius:18px}
  #product-grid .zt-clickable-card .images-wrapper,
  #product-grid .zt-clickable-card .main-image{min-height:278px}
  #product-grid .zt-clickable-card .main-image{padding:22px 22px 57px}
  #product-grid .zt-clickable-card .main-image>img,
  #product-grid .zt-clickable-card img.card-img-top{height:199px}
  #product-grid .zt-premium-card-body{padding:15px 16px 16px}
  #product-grid .zt-card-title,#product-grid .zt-card-description{min-height:auto}
  .zt-price-current strong{font-size:1.36rem}
  .zt-card-highlights{min-height:auto}
}
@media(prefers-reduced-motion:reduce){
  #product-grid .zt-clickable-card,
  #product-grid .zt-clickable-card .main-image>img,
  #product-grid .zt-view-product i{transition:none!important}
}