/* Ondo: marca y detalles propios del buscador de auriculares. */
.category-nav .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.category-nav .brand-mark { width: 38px; height: 30px; }
.category-nav .brand-word { font-weight: 700; font-size: 20px; letter-spacing: -.4px; }
.headphones-page .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.price-note { font-size: 12px; color: var(--muted); }
.affiliate-note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.spec-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
/* Las fotos de producto llegan con fondo transparente; una sombra suave las asienta en la escena. */
.headphones-page #scene img { filter: drop-shadow(0 10px 14px rgb(0 0 0 / .14)); }
/* Fotos de ejemplo en las fichas de formato: altura fija y producto entero (los teclados usaban una franja recortada). */
.headphones-page .options.with-shots .option-shot { width: 100%; height: 72px; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 700px) { .headphones-page .options.with-shots .option-shot { height: 52px; } }
/* Siete u ocho fichas en una fila cortaban los textos («¿Algo imprescindible?»): pasan a dos filas de cuatro. */
@media (min-width: 701px) {
  .headphones-page .options:has(> .option:nth-child(7)) { flex-wrap: wrap; }
  .headphones-page .options:has(> .option:nth-child(7)) > .option { flex: 1 1 calc(25% - 6px); }
}
/* Marco cuadrado con la foto entera: los teclados usaban 190×120 recortado, que cortaba diademas y estuches.
   --tall es la altura de la foto en el marco (build.py), así el nombre queda justo debajo del producto. */
/* Sin el margen de -19px de style.css, que corría la foto hacia la izquierda y arriba respecto a su nombre. */
.headphones-page .mouse img { width: 190px; height: 190px; margin: 0; object-fit: contain; }
/* El producto termina en 95 + 95·tall dentro del marco de 190: el nombre va 10px por debajo, sea cual sea su proporción. */
.headphones-page .mouse .caption { margin-top: calc(var(--tall, .8) * 95px - 85px); }