/* Deco Rock — la tira de piedras: fotos en fila para escoger por vista.

   Nació en el formulario de cotización (css/dr-coti.css) y el dueño pidió lo
   mismo en la calculadora y el visualizador: "me gusta cómo se ven todas las
   opciones de cada categoría; es más fácil escoger no por nombre sino por
   cómo se ve". Esto es esa tira, sacada aparte para que las tres herramientas
   no terminen con tres copias que se van separando con el tiempo.

   Se carga en: calculadora.html, visualizador.html y sus gemelas en inglés.
   NO define ni un color propio — todo sale de los tokens del tema lujo.

   PENDIENTE, a propósito: css/dr-coti.css todavía tiene su propia copia de
   estas reglas bajo los nombres .dr-cotipick-strip / .dr-cotipick-sw. No se
   tocó porque otra sesión estaba trabajando dentro de ese archivo en el mismo
   momento. Cuando esté libre: borrar allá el bloque «la tira de colores»,
   cargar esta hoja también en las páginas de cotización y renombrar esas dos
   clases. Hasta entonces son dos copias de veinte líneas — está escrito aquí
   para que nadie lo descubra por accidente dentro de seis meses. */

.dr-stonestrip{
  display:flex;gap:10px;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding-bottom:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--dr-brass-line) transparent;
}
.dr-stonestrip::-webkit-scrollbar{height:5px}
.dr-stonestrip::-webkit-scrollbar-track{background:rgba(240,231,218,.06)}
.dr-stonestrip::-webkit-scrollbar-thumb{background:var(--dr-brass-line)}

/* Dos clases en cada selector, igual que en el formulario: si algún día la
   tira cae dentro de un .dr-form, la regla `.dr-form button` le gana a una
   clase sola y el escogido se ve idéntico a los demás. Ya pasó una vez. */
.dr-stonestrip .dr-stonestrip-sw{
  flex:0 0 auto;width:84px;padding:0;
  border:1px solid rgba(240,231,218,.18);background:var(--dr-deep);
  color:var(--dr-muted);cursor:pointer;scroll-snap-align:start;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.dr-stonestrip .dr-stonestrip-sw img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
}
.dr-stonestrip .dr-stonestrip-sw span{
  display:block;padding:5px 4px 6px;
  font-family:var(--dr-sans);font-size:11px;letter-spacing:.08em;
  line-height:1.3;text-transform:uppercase;text-align:center;
}
.dr-stonestrip .dr-stonestrip-sw:hover{border-color:var(--dr-brass);color:var(--dr-cream)}
.dr-stonestrip .dr-stonestrip-sw[aria-pressed="true"]{
  border-color:var(--dr-brass);color:var(--dr-cream);
  background:rgba(192,138,74,.12);box-shadow:inset 0 0 0 1px var(--dr-brass);
}

/* En el teléfono la tira es lo primero que mira el cliente, así que las fotos
   se achican pero no desaparecen. */
@media(max-width:560px){
  .dr-stonestrip .dr-stonestrip-sw{width:66px}
  .dr-stonestrip{padding-bottom:4px}
}
@media(max-width:560px) and (max-height:700px){
  .dr-stonestrip .dr-stonestrip-sw{width:56px}
  .dr-stonestrip .dr-stonestrip-sw img{aspect-ratio:4/3}
}