/* La pagina de la Tienda de impresiones (#/tienda, public/tienda.js). Solo tokens de cuarto-oscuro.css. */
.tie-sec{ margin-top:var(--e-6); }
.tie-fila{ min-height:68px; }
.tie-fila .pz-fila-ico{ width:auto; height:auto; }
/* Hasta tres fotos del pedido, encimadas; ancho fijo para que los nombres de todas las filas empiecen en la misma linea. */
.tie-mini{ display:flex; flex:none; width:72px; }
.tie-mini img{ width:44px; height:44px; object-fit:cover; border-radius:var(--r); background:var(--piedra); outline:2px solid var(--pag); }
.tie-mini img + img{ margin-left:-30px; }
.tie-tot{ flex:none; font-variant-numeric:tabular-nums; color:var(--tinta); }
.tie-flecha{ flex:none; display:flex; color:var(--apagado); transform:rotate(-90deg); }
.tie-sw{ display:inline-flex; align-items:center; gap:var(--e-2); flex:none; min-height:44px; padding:0; border:0; background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.tie-sw-c{ position:relative; width:38px; height:22px; border-radius:var(--r-pildora); background:var(--piedra); }
.tie-sw-c::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--medio); }
.tie-sw.on .tie-sw-c{ background:var(--tinta); }
.tie-sw.on .tie-sw-c::after{ left:19px; background:var(--pag); }
.tie-editar{ flex:none; }
/* En una columna angosta (telefono, o el CRM con el chat abierto) el nombre del tamano no cabe junto al precio, el interruptor y Editar:
   la fila baja los controles a un segundo renglon. Se mide la COLUMNA, no la ventana: un componente hereda el ancho de donde vive. */
.tie-lista{ container-type:inline-size; }
@container (max-width: 560px){
  .tie-prod{ flex-wrap:wrap; row-gap:var(--e-2); }
  .tie-prod .pz-fila-txt{ flex:1 1 100%; }
  .tie-prod .tie-tot{ margin-right:auto; }
}
.tie-it{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-3) 0; }
.tie-it img{ width:64px; height:64px; flex:none; object-fit:cover; border-radius:var(--r); background:var(--piedra); }
.tie-it-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tie-it-m{ font-size:var(--t-meta); color:var(--medio); }
.tie-it-d{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.tie-total{ display:flex; justify-content:space-between; margin-top:var(--e-2); padding-top:var(--e-3); color:var(--tinta); }
.tie-lbl{ margin:var(--e-5) 0 var(--e-1); font-size:var(--t-meta); color:var(--apagado); }
.tie-txt{ white-space:pre-line; line-height:1.5; color:var(--tinta); }
.tie-borrar{ margin-top:var(--e-4); color:var(--urge); }