/* Real generated illustrations, only in the two requested blocks.
   All configuration text stays in the HTML; these images are decorative. */
body.product-halloween .pp-apts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px 0; }
body.product-halloween .pp-apts .pp-apt {
  position:relative; isolation:isolate; overflow:hidden; min-width:0;
  padding:12px 14px; min-height:56px; display:flex; align-items:center;
  justify-content:center; text-align:center; background:var(--deep);
  border:1px solid var(--gama-edge); border-radius:999px;
  font-size:13px; font-weight:700; line-height:1.35; color:#fff4de;
  text-shadow:0 1px 3px #05030d;
}
body.product-halloween .pp-apts .pp-apt:last-child:nth-child(odd) { grid-column:auto; }
body.product-halloween .pp-apts .pp-apt::before {
  content:""; display:block; position:absolute; left:0; top:50%;
  transform:translateY(-46%); width:100%; height:auto; aspect-ratio:1;
  z-index:-2; border-radius:0;
  background-image:url('/assets/halloween-product-illustrated-20261022/uses-atlas.webp');
  background-repeat:no-repeat; background-size:400% 200%;
  background-position:var(--art-x,0%) var(--art-y,0%); pointer-events:none;
}
body.product-halloween .pp-apts .pp-apt::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(9,6,20,.66); pointer-events:none;
}
body.product-halloween .pp-apts .pp-apt :is(svg,i[data-lucide]) { display:none; }
body.product-halloween .pp-apt:has([data-lucide="target"]) { --art-x:0%; --art-y:0%; }
body.product-halloween .pp-apt:has([data-lucide="gamepad-2"]) { --art-x:33.333333%; --art-y:0%; }
body.product-halloween .pp-apt:has([data-lucide="video"]) { --art-x:66.666667%; --art-y:0%; }
body.product-halloween .pp-apt:has([data-lucide="film"]) { --art-x:100%; --art-y:0%; }
body.product-halloween .pp-apt:has([data-lucide="box"]) { --art-x:0%; --art-y:100%; }
body.product-halloween .pp-apt:has([data-lucide="palette"]) { --art-x:33.333333%; --art-y:100%; }
body.product-halloween .pp-apt:has([data-lucide="briefcase"]) { --art-x:66.666667%; --art-y:100%; }
body.product-halloween .pp-apt:has([data-lucide="cpu"]) { --art-x:100%; --art-y:100%; }

body.product-halloween .pp-specs-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body.product-halloween .pp-art-note { color:var(--sh-text-3); font-size:13px; line-height:1.6; max-width:76ch; margin:-8px 0 24px; }
body.product-halloween .pp-spec-card {
  position:relative; min-height:144px; padding:16px 14px 16px 132px;
  justify-content:center; gap:6px; background:var(--sh-surf);
}
body.product-halloween .pp-spec-card:has(.lbl[data-gloss])::before {
  content:""; display:block; position:absolute; top:50%; left:12px;
  inset-block-end:auto; inset-inline-end:auto; transform:translateY(-50%);
  width:108px; height:108px; opacity:1; z-index:0; border-radius:6px;
  background-image:url('/assets/halloween-product-illustrated-20261022/hardware-atlas.webp');
  background-repeat:no-repeat; background-size:400% 200%;
  background-position:var(--spec-x,0%) var(--spec-y,0%); pointer-events:none;
}
body.product-halloween .pp-spec-card:has([data-gloss="cpu"]) { --spec-x:0%; --spec-y:0%; }
body.product-halloween .pp-spec-card:has([data-gloss="gpu"]) { --spec-x:33.333333%; --spec-y:0%; }
body.product-halloween .pp-spec-card:has([data-gloss="ram"]) { --spec-x:66.666667%; --spec-y:0%; }
body.product-halloween .pp-spec-card:has([data-gloss="almacenamiento"]) { --spec-x:100%; --spec-y:0%; }
body.product-halloween .pp-spec-card:has([data-gloss="motherboard"]) { --spec-x:0%; --spec-y:100%; }
body.product-halloween .pp-spec-card:has([data-gloss="fuente"]) { --spec-x:33.333333%; --spec-y:100%; }
body.product-halloween .pp-spec-card:has([data-gloss="gabinete"]) { --spec-x:66.666667%; --spec-y:100%; }
body.product-halloween .pp-spec-card:has([data-gloss="refrigeracion"]) { --spec-x:100%; --spec-y:100%; }
/* Correct only these two images; the approved six atlas tiles stay untouched. */
body.product-halloween .pp-spec-card:has(.lbl[data-gloss="motherboard"])::before {
  background-image:url('/assets/halloween-product-illustrated-20261022/motherboard-v2.webp');
  background-size:cover; background-position:center;
}
body.product-halloween .pp-spec-card:has(.lbl[data-gloss="fuente"])::before {
  background-image:url('/assets/halloween-product-illustrated-20261022/psu-v2.webp');
  background-size:cover; background-position:center;
}
body.product-halloween .pp-spec-card .top { position:static; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0; }
body.product-halloween .pp-spec-card .top .ic { display:none; }
body.product-halloween .pp-spec-card .top .lbl { font-size:12px; }
/* Give the maker a dedicated, legible plate on the illustration, not a tiny
   mark squeezed into the category label. Keep original logo images and alt. */
body.product-halloween .pp-spec-card .top .brand-logo {
  position:absolute; left:12px; bottom:12px; z-index:2;
  width:108px; height:30px; margin:0; padding:4px 8px;
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:#fff; color:#15121c; border-radius:4px; box-sizing:border-box;
}
body.product-halloween .pp-spec-card .top .brand-logo img {
  width:88px; height:22px; max-height:22px; max-width:88px; object-fit:contain;
}
body.product-halloween .pp-spec-card .top .brand-logo[title="NVIDIA"] img { width:32px; height:24px; max-height:24px; max-width:33px; }
body.product-halloween .pp-spec-card .top .brand-logo[title="NVIDIA"]::after {
  content:attr(title); color:#15121c; font:800 12px/1 Inter,sans-serif;
}
body.product-halloween .pp-spec-card .modelo { font-size:17px; line-height:1.3; }
body.product-halloween .pp-spec-card.branded .modelo { font-size:20px; }
body.product-halloween .pp-spec-card .detalle { font-size:13px; line-height:1.4; }
/* Integrated graphics belong to the CPU, never depict a dedicated card there. */
body.product-halloween[data-product-gpu="integrated"] .pp-spec-card:has([data-gloss="gpu"]) { --spec-x:0%; --spec-y:0%; }
/* Match the supplied component type, without changing its written specs. */
body.product-halloween[data-product-storage="sata"] .pp-spec-card:has(.lbl[data-gloss="almacenamiento"])::before {
  background-image:url('/assets/halloween-product-illustrated-20261022/sata-ssd.webp');
  background-size:cover; background-position:center;
}
body.product-halloween[data-product-cooling="air"] .pp-spec-card:has(.lbl[data-gloss="refrigeracion"])::before {
  background-image:url('/assets/halloween-product-illustrated-20261022/air-cooler.webp');
  background-size:cover; background-position:center;
}
body.product-halloween[data-product-cooling="stock-amd-stealth"] .pp-spec-card:has(.lbl[data-gloss="refrigeracion"])::before {
  background-image:url('/assets/halloween-product-illustrated-20261022/wraith-stealth-20261023.webp');
  background-size:cover; background-position:center;
}
/* Do not depict an AIO or NVMe on a build whose supplied details do not confirm it.
   Peripherals retain their native icons until a matching illustration is available. */
body.product-halloween[data-product-cooling="other"] .pp-spec-card:has([data-gloss="refrigeracion"]),
body.product-halloween[data-product-storage="other"] .pp-spec-card:has([data-gloss="almacenamiento"]),
body.product-halloween .pp-spec-card:has(.lbl:is([data-gloss="monitor"],[data-gloss="teclado"],[data-gloss="mouse"],[data-gloss="audifonos"])) { padding-left:14px; }
body.product-halloween[data-product-cooling="other"] .pp-spec-card:has([data-gloss="refrigeracion"])::before,
body.product-halloween[data-product-storage="other"] .pp-spec-card:has([data-gloss="almacenamiento"])::before,
body.product-halloween .pp-spec-card:has(.lbl:is([data-gloss="monitor"],[data-gloss="teclado"],[data-gloss="mouse"],[data-gloss="audifonos"]))::before { display:none; }
body.product-halloween[data-product-cooling="other"] .pp-spec-card:has([data-gloss="refrigeracion"]) .ic,
body.product-halloween[data-product-storage="other"] .pp-spec-card:has([data-gloss="almacenamiento"]) .ic,
body.product-halloween .pp-spec-card:has(.lbl:is([data-gloss="monitor"],[data-gloss="teclado"],[data-gloss="mouse"],[data-gloss="audifonos"])) .ic { display:flex; }
@media(max-width:1180px) {
  body.product-halloween .pp-specs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.product-halloween .pp-spec-card { padding:16px 16px 16px 124px; min-height:128px; }
  body.product-halloween .pp-spec-card:has(.lbl[data-gloss])::before { width:100px; height:100px; }
  body.product-halloween .pp-spec-card .top .brand-logo { width:100px; bottom:10px; }
}
@media(max-width:600px) {
  body.product-halloween .pp-apts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.product-halloween .pp-apts .pp-apt { min-height:56px; padding:10px 12px; font-size:12.5px; }
  body.product-halloween .pp-specs-grid { grid-template-columns:1fr; gap:12px; }
  body.product-halloween .pp-spec-card { padding:14px 14px 14px 124px; min-height:128px; }
  body.product-halloween .pp-spec-card .detalle { font-size:13px; }
  body.product-halloween .pp-art-note { margin-bottom:20px; font-size:12.5px; }
}
@media(max-width:360px) {
  body.product-halloween .pp-spec-card { padding:14px 12px 14px 112px; }
  body.product-halloween .pp-spec-card:has(.lbl[data-gloss])::before { width:88px; height:88px; }
  body.product-halloween .pp-spec-card .top .brand-logo { width:88px; padding-inline:4px; }
  body.product-halloween .pp-spec-card .top .brand-logo img { max-width:78px; }
  body.product-halloween .pp-spec-card .top .brand-logo[title="NVIDIA"]::after { font-size:11px; }
}