/* Faiter: solo lo que el kit no trae (logo, tallas en las fichas, tablas de medidas, el pedido). */

/* el logo real de Faiter, recortado de su tabla de medidas; toma el color del texto */
.logo { display: block; width: 106px; height: 16px; background: currentColor;
  -webkit-mask: url(img/logo-faiter.png) left center / contain no-repeat; mask: url(img/logo-faiter.png) left center / contain no-repeat; }
.closing .logo { width: 132px; height: 20px; }
/* el cierre: el logo grande a lo ancho, en lugar del nombre en letra */
.close__logo { margin-top: auto; width: min(100%, 980px); aspect-ratio: 442 / 67; background: currentColor;
  -webkit-mask: url(img/logo-faiter.png) left bottom / contain no-repeat; mask: url(img/logo-faiter.png) left bottom / contain no-repeat; }

/* la portada: la foto en <picture> se comporta como la <img> del kit */
.hero__stage > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 639px) { .hero__stage .ly-spot:not(:first-of-type) { display: none; } }

/* el catálogo puede pasar de dos pantallas: crece con los modelos que tenga el bot */
main > section.catalogo { height: auto; min-height: 100svh; }
/* tablet y celular: una sección apilada nunca se monta sobre la siguiente */
@media (max-width: 1023px) { main > section.section:not(.hero) { height: auto; min-height: 100svh; } }
.productos { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
@media (max-width: 1023px) { .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); } }
.producto .tile__head h3 { font-size: var(--t-card); }
.producto .tile__facts { margin-top: calc(-1 * var(--s-3)); min-height: 2.9em; }
@media (max-width: 639px) { .producto .tile__facts { display: none; } }

.tallas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); border: 0; margin: 0; padding: 0; }
.talla { height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font: 500 15px/1 var(--font-text); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease); }
.talla:hover:not(:disabled) { border-color: var(--ink); }
.talla:active:not(:disabled) { transform: scale(.96); }
.talla:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.talla:disabled { color: var(--muted); text-decoration: line-through; cursor: not-allowed; opacity: .55; }
.talla.is-added { background: var(--action); border-color: var(--action); color: var(--p-action-ink); }
.talla[data-n]:not([data-n="0"])::after { content: " ×" attr(data-n); font-size: 13px; }
@media (max-width: 639px) { .talla { height: 40px; font-size: 14px; } }

/* baggy unisex: dos fotos de la modelo, mismo alto */
.pareja { aspect-ratio: 9 / 16; max-height: 640px; }
.pareja .frame__img, .foto-tallas .frame__img, .foto-envios .frame__img { width: 100%; height: 100%; object-fit: cover; }
.foto-tallas, .foto-envios { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) {
  #unisex .span-5 { grid-column: 1 / -1; }
  .pareja { grid-column: auto / span 6 !important; max-height: none; }
  .foto-tallas, .foto-envios { grid-column: 1 / -1 !important; aspect-ratio: 4 / 3; }
  .foto-tallas .frame__img, .foto-envios .frame__img { object-position: 50% 62%; }
}

/* tablas de medidas */
.tabla h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-bottom: var(--s-3); }
.tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 16px; }
.tabla :is(th, td) { padding: 12px 8px 12px 0; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla thead th { font-size: 13px; font-weight: 500; color: var(--muted); }
.tabla tbody th { font-weight: 500; }
@media (max-width: 639px) { .tabla .extra { display: none; } .tabla :is(th, td) { padding-right: 4px; } }

/* envíos y precios: el detalle bajo el nombre */
.rows__name small { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.45; margin-top: 2px; }
.ground-brand .rows__name small { color: inherit; opacity: .82; }
#envios .grid > * { min-width: 0; }
@media (max-width: 1023px) { #envios .span-4:not(.frame) { grid-column: 1 / -1; } }
#precios .rows__value { font-variant-numeric: tabular-nums; }
#precios .rows > li { font-size: 18px; }
@media (max-width: 1023px) { #precios .span-6, #precios .span-5 { grid-column: 1 / -1; } }
#precios h3 { font: 500 var(--t-card)/1.3 var(--font-text); }

/* nav: el botón del pedido con su contador */
.ver-pedido { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--surface); font-size: 13px; font-variant-numeric: tabular-nums; }
.cuenta.tiene { background: var(--action); color: var(--p-action-ink); }

/* el pedido: panel a la derecha en compu, hoja completa en el celular */
.pedido { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(440px, 100vw); padding: 0; border: 0; border-left: 1px solid var(--line);
  background: var(--bg); color: var(--ink); overscroll-behavior: contain; }
.pedido::backdrop { background: rgb(15 24 28 / .42); }
.pedido[open] { animation: entra 260ms var(--ease); }
@keyframes entra { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pedido[open] { animation: none; } }
.pedido__in { display: grid; gap: var(--s-5); padding: var(--s-5) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom)); }
.pedido__head { display: flex; align-items: center; justify-content: space-between; }
.pedido__head h2 { font-size: 28px; }
.pedido__cerrar { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.pedido__cerrar:hover { background: var(--surface); }
.pedido__items { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; }
.item img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface); }
.item__nombre { font-weight: 500; }
.item__talla { color: var(--muted); font-size: var(--t-small); }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.cantidad button { width: 36px; height: 40px; border: 0; background: none; color: inherit; font: 500 18px/1 var(--font-text); cursor: pointer; }
.cantidad span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.destino { display: flex; gap: var(--s-5); border: 0; padding: 0; margin: 0; }
.destino legend { margin-bottom: var(--s-3); }
.destino label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; min-height: 44px; }
.destino input { width: 18px; height: 18px; accent-color: var(--action); }
.pedido__datos { display: grid; gap: var(--s-4); }
.pedido__total .total { font-weight: 500; font-size: 20px; }
.pedido__total .rows__value { font-variant-numeric: tabular-nums; }
.pedido__enviar { width: 100%; }
[data-vacio][hidden], [data-datos][hidden] { display: none; }

/* los botones de talla siempre al pie de la ficha, alineados en toda la fila */
.producto { display: flex; flex-direction: column; gap: var(--s-4); }
.producto .tallas { margin-top: auto; }
@media (max-width: 639px) { .producto { gap: var(--s-3); } main > section.section:not(.hero) { min-height: 0; } }