/* Scoped to successfully matched artwork; unavailable products retain their existing card. */
html body .grilla.has-ai-cards{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))!important;gap:24px!important;align-items:start}
html body .grilla .card.ai-card{display:flex!important;flex-direction:column!important;padding:0!important;min-height:0!important;overflow:visible!important;border-radius:0;background:#10110e!important;color:#f5f4ed!important;transform:none!important}
html body .card.ai-card>[hidden]{display:none!important}
.ai-face{position:relative;aspect-ratio:1;width:100%;container-type:inline-size;background:#10110e;color:#f5f4ed;isolation:isolate}
.ai-logo{position:absolute;left:6.3%;top:4%;font:800 3.1cqw/.88 Arial,sans-serif;letter-spacing:-.15cqw}.ai-logo span{color:#ff503c}
html body .card.ai-card .ai-title{display:block!important;position:absolute;left:6.3%;top:19%;width:40%;max-height:23%;overflow:auto!important;margin:0!important;padding:0!important;font:700 4.3cqw/1.16 Arial,sans-serif!important;color:#f5f4ed!important;white-space:normal!important;overflow-wrap:anywhere;-webkit-line-clamp:unset!important}
.ai-color{position:absolute;left:6.3%;top:43%;max-width:43%;font:2.4cqw Arial,sans-serif;color:#bcbcb7}.ai-picture{position:absolute;left:49%;top:3%;width:49%;height:46%}.ai-picture img{position:absolute;width:100%;height:100%;object-fit:contain;opacity:1;transition:opacity 450ms ease}.ai-picture img.ai-enter{opacity:0}
.ai-prices{position:absolute;left:6.3%;right:6.4%;top:51.5%;height:32%;display:grid;grid-template-rows:repeat(5,1fr)}
.ai-price{display:flex;align-items:center;justify-content:space-between;gap:4px;border-bottom:1px solid #343630;font:3.05cqw Arial,sans-serif;color:#bcbcb7}.ai-price:first-child{color:#ff503c}.ai-price strong{font:600 3.657cqw Arial,sans-serif;color:#f5f4ed;white-space:nowrap;font-variant-numeric:tabular-nums}.ai-price:first-child strong{color:#ff503c}
html body .ai-face>.catalog-product-links,html body .ai-face>.tarjeta-recomendado-iconos{position:absolute!important;top:85%;bottom:1%;left:0;right:0;display:flex!important;justify-content:center!important;align-items:center!important;gap:3%!important;margin:0!important}
/* Cara estirada (más de 5 precios): mismas posiciones que la cara cuadrada,
   en unidades del ancho para que no se muevan al crecer el alto. */
html body .card.ai-card .ai-face-extra .ai-logo{top:4cqw}
html body .card.ai-card .ai-face-extra .ai-title{top:19cqw;max-height:23cqw}
html body .card.ai-card .ai-face-extra .ai-color{top:43cqw}
html body .card.ai-card .ai-face-extra .ai-picture{top:3cqw;height:46cqw}
html body .card.ai-card .ai-face-extra .ai-prices{top:51.5cqw;height:var(--alto-precios);grid-template-rows:none;grid-auto-rows:1fr}
html body .card.ai-card .ai-face-extra>:is(.catalog-product-links,.tarjeta-recomendado-iconos){top:calc(51.5cqw + var(--alto-precios) + 1.5cqw);bottom:auto;height:14cqw}
html body .ai-face .btn-foto{display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px!important;padding:7.6px!important;border:0!important;background:none!important;color:#d9dad3!important;opacity:1!important}
html body .ai-face .btn-foto svg{width:28.8px!important;height:28.8px!important}.ai-face .btn-foto:hover{color:#ff503c!important}
html body .card.ai-card>.catalog-card-actions,html body .card.ai-card>.card-acciones,html body .card.ai-card>.selector-colores{display:flex!important;flex-wrap:wrap;gap:10px;padding:12px!important;margin:0!important;position:relative!important;width:100%!important}
html body .card.ai-card .btn-agregar{min-height:44px}.ai-notice{font-size:12px;color:var(--rc-green-dim,#999);margin:12px 0 20px}.ai-card .compare-picker{z-index:30}
@media(prefers-reduced-motion:reduce){.ai-picture img{transition:none}}

/* Backlight follows the existing coral accent without affecting layout. */
html body .grilla .card.ai-card{border:1px solid rgba(255,80,60,.26)!important;box-shadow:0 0 18px rgba(255,80,60,.10),0 0 42px rgba(255,80,60,.06)!important;transition:box-shadow 220ms ease,border-color 220ms ease}
html body .grilla .card.ai-card:focus-within{border-color:rgba(255,80,60,.52)!important;box-shadow:0 0 22px rgba(255,80,60,.20),0 0 50px rgba(255,80,60,.10)!important}
@media(hover:hover){html body .grilla .card.ai-card:hover{border-color:rgba(255,80,60,.52)!important;box-shadow:0 0 22px rgba(255,80,60,.20),0 0 50px rgba(255,80,60,.10)!important}}
@media(prefers-reduced-motion:reduce){html body .grilla .card.ai-card{transition:none}}
.ai-prices.ai-prices-mayorista{grid-template-rows:repeat(6,1fr)}
.ai-prices-mayorista .ai-price{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}
.ai-prices-mayorista .ai-price>:nth-child(2){text-align:center;font:600 3.2cqw Arial,sans-serif;color:#6fd08c;white-space:nowrap}
.ai-prices-mayorista .ai-price>:nth-child(3){text-align:right}
.ai-prices-mayorista .ai-price-head{color:#8a8a84!important;font-size:2.3cqw;text-transform:uppercase;letter-spacing:.05em}
.ai-prices-mayorista .ai-price-head>:nth-child(2){font:inherit;color:inherit}
.ai-prices-mayorista .ai-price:nth-child(2){color:#ff503c}.ai-prices-mayorista .ai-price:first-child strong{color:inherit}
.ai-price:not(.ai-price-head)>:first-child:not(:only-child){font:600 3.4cqw Arial,sans-serif}

/* Classic: mismo backlight sutil que las cards del home (--card-halo en
   classic-editorial.css), teñido de celeste hielo Martini (en light, azul Martini para que se lea sobre el crema). Halo tenue en
   reposo que crece cuando la card sube al pasar el mouse o con el foco.
   Fallout conserva su halo coral. */
html[data-modo="classic"] {
  --ai-card-halo: 0 0 0 1px #a8dcf51f, 0 0 26px -8px #a8dcf538;
  --ai-card-halo-activo: 0 0 0 1px #a8dcf566, 0 0 34px -4px #a8dcf55c, 0 0 90px -22px #a8dcf547, 0 24px 50px #00000080;
}
html[data-modo="classic"][data-classic-theme="light"] {
  --ai-card-halo: 0 0 0 1px #0b8fd640, 0 0 26px -8px #0b8fd673;
  --ai-card-halo-activo: 0 0 0 1px #0b8fd6, 0 0 34px -4px #0b8fd68c, 0 0 90px -22px #0b8fd666, 0 24px 46px -14px #20231e47;
}
html[data-modo="classic"] body .grilla .card.ai-card {
  border-color: #a8dcf529 !important;
  box-shadow: var(--ai-card-halo) !important;
  transition: translate .35s var(--ed-ease, ease), box-shadow .35s var(--ed-ease, ease), border-color .35s var(--ed-ease, ease);
}
html[data-modo="classic"][data-classic-theme="light"] body .grilla .card.ai-card { border-color: #10110e !important; }
html[data-modo="classic"][data-classic-theme="light"] body .grilla .card.ai-card:focus-within { border-color: #0b8fd6 !important; }
@media (hover: hover) {
  html[data-modo="classic"][data-classic-theme="light"] body .grilla .card.ai-card:hover { border-color: #0b8fd6 !important; }
}
html[data-modo="classic"] body .grilla .card.ai-card:focus-within { translate: 0 -6px; border-color: #a8dcf566 !important; box-shadow: var(--ai-card-halo-activo) !important; }
@media (hover: hover) {
  html[data-modo="classic"] body .grilla .card.ai-card:hover { translate: 0 -6px; border-color: #a8dcf566 !important; box-shadow: var(--ai-card-halo-activo) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-modo="classic"] body .grilla .card.ai-card:is(:hover, :focus-within) { translate: none; }
}

/* Classic Light: la card pasa de casi negro a gris medio, mismo diseño. Las
   fotos son transparentes, así que el gris se ve parejo detrás. Los tonos que
   en el negro alcanzaban y en el gris no (coral del primer precio, líneas,
   encabezado mayorista) se aclaran apenas para seguir en WCAG AA. */
html[data-modo="classic"][data-classic-theme="light"] {
  --ai-card-gris: #464843;
  --ai-card-coral: #ff9d8c;
}
html[data-modo="classic"][data-classic-theme="light"] body .grilla .card.ai-card,
html[data-modo="classic"][data-classic-theme="light"] .ai-face { background: var(--ai-card-gris) !important; }
html[data-modo="classic"][data-classic-theme="light"] .ai-price { border-bottom-color: #5c5e58; }
html[data-modo="classic"][data-classic-theme="light"] :is(.ai-price:first-child, .ai-price:first-child strong, .ai-prices-mayorista .ai-price:nth-child(2)),
html[data-modo="classic"][data-classic-theme="light"] .ai-face .btn-foto:hover { color: var(--ai-card-coral) !important; }
html[data-modo="classic"][data-classic-theme="light"] .ai-prices-mayorista .ai-price-head { color: #c8c8c2 !important; }
html[data-modo="classic"][data-classic-theme="light"] .card.ai-card .catalog-card-actions :is(label, .catalog-card-status) { color: #d6d6d0; }
/* Card del producto al que se llegó por un link: le gana al halo azul de las
   cards con imagen (también en hover/foco). Ver .card-del-link en classic.css. */
html[data-modo="classic"] body .grilla .card.ai-card.card-del-link,
html[data-modo="classic"] body .grilla .card.ai-card.card-del-link:is(:hover, :focus-within) {
  border-color: var(--cl-rojo) !important;
  box-shadow: 0 0 0 2px var(--cl-rojo), 0 0 34px -4px color-mix(in srgb, var(--cl-rojo) 55%, transparent) !important;
}
