/* Landing del catalogo Deturista Shop (/shop.html).

   Reproduce el PDF public/sites/deturista/files/shop-deturista.pdf, que esta
   dibujado sobre una pagina de 1080x1920 pt. Todas las medidas de acá salen
   medidas de ese PDF y se expresan en cqw sobre .shop-lienzo, que mide como
   maximo 1080px: asi 1 pt del PDF == 1 px en desktop y el diseño escala solo.
   var(--pt) es esa unidad (100cqw / 1080).

   Los titulos en Knockout (tipografia comercial de H&Co que no tenemos
   licenciada para web) salen del propio PDF como contornos vectoriales en
   images/shop/txt/*.svg, y en las paginas que poppler rasteriza, como PNG
   con transparencia convertido a webp. Lo unico tipografiado en vivo son los
   precios (Oswald, el sustituto libre mas parecido) y los nombres de producto
   (Lato Bold, que es la misma que usa el PDF). */

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/oswald-regular-webfont.woff2') format('woff2'),
         url('../fonts/Oswald/oswald-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/oswald-bold-webfont.woff2') format('woff2'),
         url('../fonts/Oswald/oswald-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Lato estaba en el repo pero sin @font-face en ningun CSS global */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/Lato/lato-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/Lato/lato-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.shop {
    --morado: #54227C;
    --hueso: #F9F4EE;
    --fondo: #F1EDED;
    --pt: 0.0925926cqw;
    background: url('../images/shop/textura.webp') repeat, var(--fondo);
    background-size: 157px auto;
    color: var(--morado);
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
}

.shop-lienzo {
    container-type: inline-size;
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: calc(120 * var(--pt));
}

.shop img {
    display: block;
    max-width: 100%;
}

/* ---------- portada: marca + bajada (pagina 1 del PDF) ---------- */

.shop-hero {
    display: flex;
    align-items: flex-start;
}

/* el lockup de marca sale recortado del PDF con su fondo morado: el logo lleva
   una sombra apenas mas oscura que el morado que se perderia al recortarlo */
.shop-hero-marca {
    flex: 0 0 auto;
    width: 47.44cqw;                     /* 512.4 pt */
    height: auto;
}

.shop-hero-texto {
    margin: calc(41 * var(--pt)) 0 0 6.68cqw;
    width: 38.75cqw;
}

.shop-hero-texto h1 {
    font-size: max(17px, calc(27 * var(--pt)));
    line-height: 1.38;
    font-weight: 700;
    color: var(--morado);
    margin: 0 0 calc(14 * var(--pt));
}

.shop-hero-texto p {
    font-size: max(15px, calc(23 * var(--pt)));
    line-height: 1.41;
    margin: 0;
}

/* ---------- menu de categorias: 3 barras + 2 cajas ---------- */

.shop-menu {
    display: flex;
    flex-wrap: wrap;
    padding: calc(163 * var(--pt)) 0 0 6.4cqw;
    row-gap: 11.34cqw;
    column-gap: 7.74cqw;
}

.shop-menu-item {
    position: relative;
    display: block;
    background: var(--morado);
    border-radius: calc(16 * var(--pt));
    color: var(--hueso);
    text-decoration: none;
    transition: transform .18s ease;
}

.shop-menu-item:hover,
.shop-menu-item:focus-visible {
    transform: translateY(calc(-4 * var(--pt)));
}

.shop-menu-barra {
    height: 16.32cqw;                    /* 176.3 pt */
}

/* cada barra del PDF esta cortada a la medida de su titulo */
.shop-menu-barra:nth-of-type(1) { width: 82.08cqw; }
.shop-menu-barra:nth-of-type(2) { width: 79.43cqw; }
.shop-menu-barra:nth-of-type(3) { width: 82.31cqw; }

.shop-menu-caja {
    width: 38.6cqw;                      /* 416.9 pt */
    aspect-ratio: 416.9 / 384.5;
    margin-top: -3.45cqw;
}

.shop-menu-caja:nth-of-type(4) { margin-left: 1.13cqw; }

/* el titulo y la pastilla "+ INFO" salen recortados del PDF ya ubicados dentro
   de su barra o caja, asi que se apoyan sobre todo el fondo morado */
.shop-menu-titulo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;                          /* la pastilla siempre por encima de la foto */
}

/* clusters de fotos: cada uno es el conjunto de fotos del PDF compositado con
   su alfa real (txt/foto-*.webp); la posicion es el bbox que imprime
   scripts/shop_assets.py, anclado al borde del bloque. La sombra difusa del
   PDF se reproduce con drop-shadow, que sigue el contorno del alfa. */
.shop-menu-foto {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(calc(4 * var(--pt)) calc(10 * var(--pt)) calc(9 * var(--pt)) rgb(35 25 45 / .35));
}

.shop-menu-botellas .shop-menu-foto {
    width: calc(289.6 * var(--pt));
    right: calc(-89.3 * var(--pt));
    bottom: calc(-49.7 * var(--pt));
}

.shop-menu-termos .shop-menu-foto {
    width: calc(343.1 * var(--pt));
    right: calc(-148.2 * var(--pt));
    bottom: calc(-38.4 * var(--pt));
}

.shop-menu-equipaje .shop-menu-foto {
    width: calc(343.3 * var(--pt));
    right: calc(-48.5 * var(--pt));
    bottom: calc(-44.3 * var(--pt));
}

/* en las cajas la posicion va en % de la caja, asi escala con ella */
.shop-menu-mochilas .shop-menu-foto { width: 86.1%; left: 7.0%; bottom: -37.4%; }

.shop-menu-accesorios .shop-menu-foto { width: 82.2%; left: 8.9%; bottom: -34.6%; }

/* ---------- secciones de categoria ---------- */

.shop-cat {
    padding: calc(150 * var(--pt)) 4.537cqw 0;
    scroll-margin-top: calc(30 * var(--pt));
}

/* el titulo es la primera celda de la grilla, con el primer producto al lado,
   como en el PDF; el marco rayado queda al ras de la celda (414.5 pt) */
.shop-cat-titulo {
    margin: 0;
    align-self: start;
}

/* accesorios (pag 9): caja apaisada con el primer producto abajo en la misma
   columna; el hueco entre caja y tarjeta esta medido del PDF */
.shop-cat-titulo-apaisado .shop-caja-fondo { aspect-ratio: 377.3 / 135.3; }

.shop-grid-apilado {
    display: flex;
    flex-direction: column;
    gap: calc(35 * var(--pt));
}

/* dentro del apilado el titulo es un item flex: estirado, no al contenido */
.shop-grid-apilado .shop-cat-titulo { align-self: stretch; }

/* la tarjeta bajo el titulo apaisado es apaisada (414.5 x 268.4 en el PDF) y
   su base queda al ras de la tarjeta cuadrada de al lado */
.shop-grid-apilado .shop-card-foto { aspect-ratio: 414.5 / 268.4; }

.shop-grid-apilado + .shop-card { align-self: end; }

/* caja morada con marco rayado: el rayado del PDF son lineas de 3 pt a 31.7
   grados con paso perpendicular de 18.2 pt, y el marco sobresale 19 pt */

.shop-caja-marco {
    display: block;
    padding: calc(19 * var(--pt));
    background:
        repeating-linear-gradient(148.3deg,
            var(--morado) 0 calc(3 * var(--pt)),
            transparent calc(3 * var(--pt)) calc(18.24 * var(--pt)));
}

.shop-caja-fondo {
    display: block;
    position: relative;
    aspect-ratio: 1;
    background: var(--morado);
}

.shop-caja-titulo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;                          /* la pastilla siempre por encima de la foto */
}

/* ---------- grilla de productos ---------- */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14.17cqw;                /* 153 pt */
    row-gap: calc(60 * var(--pt));
}

.shop-card-foto {
    position: relative;
    aspect-ratio: 1;
    border: max(1px, calc(0.9 * var(--pt))) solid var(--morado);
}

.shop-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4%;
}

.shop-precio {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 9.55%;
    display: flex;
    align-items: center;
    padding: 0 calc(11 * var(--pt));
    background: var(--morado);
    color: var(--hueso);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: max(13px, calc(28 * var(--pt)));
    letter-spacing: .01em;
    white-space: nowrap;
}

.shop-card-nombre {
    margin: calc(18 * var(--pt)) 0 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: max(12px, calc(24 * var(--pt)));
    line-height: 1.19;
    text-transform: uppercase;
    color: var(--morado);
}

.shop-card-codigo {
    font-size: .74em;
    white-space: nowrap;
    margin-left: .5em;
}

/* ---------- "inspirate en lo que otros viajeros agregaron" ---------- */

.shop-inspirate {
    margin: calc(120 * var(--pt)) 0 calc(48 * var(--pt)) -4.537cqw;
    width: 69.85cqw;                     /* 754.4 pt, sangra hasta el borde */
    height: 9.12cqw;
    display: flex;
    align-items: center;
    padding-left: 7.43cqw;
    background: var(--morado);
}

.shop-inspirate img {
    height: calc(40 * var(--pt));
    width: auto;
}

.shop-cross {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10cqw 12.5cqw;
}

.shop-caja {
    position: relative;
    display: block;
    width: 38.45cqw;                     /* 377.3 + 19 de marco a cada lado */
    text-decoration: none;
    transition: transform .18s ease;
}

.shop-caja:hover,
.shop-caja:focus-visible { transform: translateY(calc(-4 * var(--pt))); }

/* fotos de las cajas: % del ancho de .shop-caja (marco rayado incluido) */
.shop-caja-foto {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(calc(4 * var(--pt)) calc(10 * var(--pt)) calc(9 * var(--pt)) rgb(35 25 45 / .35));
}

.shop-caja-organizadores .shop-caja-foto { width: 108.5%; left: -4.2%; bottom: -35.7%; }

.shop-caja-mochilas .shop-caja-foto { width: 77.1%; left: 26.9%; bottom: -10.2%; }

.shop-caja-equipaje .shop-caja-foto { width: 82.7%; left: 10.2%; bottom: -17.5%; }

.shop-caja-botellas .shop-caja-foto { width: 34.4%; left: 58.9%; bottom: -1.2%; }

.shop-volver {
    display: inline-block;
    margin-top: calc(90 * var(--pt));
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: max(12px, calc(20 * var(--pt)));
    letter-spacing: .04em;
    color: var(--morado);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
}

/* ---------- celular: el diseño del PDF a una columna ---------- */

@media (max-width: 700px) {
    .shop-hero { flex-direction: column; }
    .shop-hero-marca { width: 62cqw; }
    .shop-hero-texto { width: auto; margin: calc(40 * var(--pt)) 5cqw 0; }
    .shop-hero-texto h1 { font-size: 22px; }
    .shop-hero-texto p { font-size: 17px; }

    .shop-menu { padding-top: calc(120 * var(--pt)); row-gap: 8cqw; }
    /* en el PDF la barra de termos es mas angosta que las otras; en el celular
       las tres miden igual, asi que el termo se acerca al borde como las demas */
    .shop-menu-termos .shop-menu-foto { right: calc(-90 * var(--pt)); }
    .shop-menu-barra:nth-of-type(1),
    .shop-menu-barra:nth-of-type(2),
    .shop-menu-barra:nth-of-type(3) { width: 88cqw; height: 22cqw; }
    .shop-menu-caja { width: 42cqw; margin-top: 0; }
    .shop-menu-caja:nth-of-type(4) { margin-left: 0; }

    .shop-grid { grid-template-columns: 1fr; row-gap: calc(90 * var(--pt)); }
    .shop-card-nombre { font-size: 15px; }
    .shop-precio { font-size: 17px; height: 11%; }

    .shop-cat-titulo .shop-caja-marco { width: 62cqw; }
    .shop-caja { width: 60cqw; }
    .shop-cross { gap: 14cqw; }
    /* la banda se acomoda al texto para que no se corte en pantallas angostas */
    .shop-inspirate { width: 92cqw; height: auto; padding: 3.5cqw 4cqw; }
    .shop-inspirate img { width: 100%; height: auto; }
    .shop-volver { font-size: 13px; }
}