/*
 * Kikoua. Estilos propios de la pagina de tienda.
 *
 * Portado del bloque <style> de new_design/kikoua/Kikoua Tienda.html. Se carga
 * solo en esta pagina, con @push('styles'), porque es suyo: lo comun esta en
 * kikoua.css. Cuando otra pagina repita algo de aqui, eso sube al comun.
 *
 * Tres cambios respecto a la maqueta:
 *
 *   1. .cover se queda sin la imagen fija de la maqueta. La portada de cada
 *      tienda es un dato suyo y la pinta la vista con background-image sobre
 *      get_cover_img_src(); aqui solo quedan el color de respaldo y el encuadre.
 *   2. Fuera .about-img, que era otra foto de la maqueta. El bloque "acerca de"
 *      es por ahora de una sola columna.
 *   3. Se anaden .resena y .s-logo img, que la maqueta no tenia: alli las
 *      resenas eran un estado vacio y el logotipo, dos letras dibujadas.
 */

.cover{position:relative;height:380px;background:var(--soft) center/cover no-repeat}.cover.blank{background:linear-gradient(115deg,var(--sky),var(--lilac),var(--pink))}.new-badge{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--pink);font-size:12px;font-weight:600;color:var(--magenta-ink)}.grid-few{grid-template-columns:repeat(4,minmax(0,1fr))}.soon{border:1px dashed #d8d3d6;border-radius:10px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--ink-2);font-size:13px;aspect-ratio:3/4}.soon b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:4px}
.cover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--magenta)}
.shop-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:end;margin-top:-64px;position:relative;z-index:2}
.s-logo{width:132px;height:132px;border-radius:50%;background:#fff;padding:6px;box-shadow:var(--shadow-1)}
.s-logo div{width:100%;height:100%;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:300;font-size:40px;letter-spacing:-.04em}
.s-id{padding-bottom:6px}
.s-id h1{font-weight:300;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;line-height:1.1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-id h1 .ico{width:26px;height:26px;color:var(--magenta)}
.s-id .meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.s-id .meta span{display:flex;align-items:center;gap:6px}
.s-id .meta .ico{width:15px;height:15px}
.s-act{display:flex;gap:10px;padding-bottom:10px}
.s-act .btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.s-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s-stats div{padding:20px 24px}
.s-stats div+div{border-left:1px solid var(--line)}
.s-stats b{display:block;font-weight:600;font-size:20px}
.s-stats span{font-size:12px;color:var(--ink-2)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:48px 0 32px}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap}
.cat-chips .chip{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:500;transition:all .2s}
.cat-chips .chip:hover{border-color:var(--ink)}
.cat-chips .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sort{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.sort select{height:40px;border:1px solid var(--line);border-radius:999px;padding:0 16px;font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:#fff;outline:none}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 30px}
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center}
.about h2{font-weight:300;font-size:clamp(26px,3vw,36px);letter-spacing:-.01em;line-height:1.2}
.about .raya{margin:18px 0 0}
.about p{color:var(--ink-2);margin-top:18px;text-wrap:pretty}

.policies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.policies div{font-size:13px;color:var(--ink-2)}
.policies strong{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:4px}
.policies .ico{width:18px;height:18px;color:var(--magenta)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cover{height:220px}.shop-head{grid-template-columns:minmax(0,1fr);margin-top:-48px;gap:14px;align-items:start}.s-id{padding-bottom:0}.s-logo{width:96px;height:96px}.s-logo div{font-size:28px}.s-act{grid-column:1/-1}.s-act .btn{flex:1}.s-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.s-stats div:nth-child(3){border-left:0}.s-stats div:nth-child(n+3){border-top:1px solid var(--line)}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.about{grid-template-columns:1fr;gap:28px}.policies{grid-template-columns:1fr}}

/* Nuevos, no estan en la maqueta. */

/* El logotipo de la tienda es una imagen de verdad, no las dos letras que la
   maqueta dibujaba con texto. */
.s-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--soft)}

/* La maqueta no llegaba a ensenar una lista de resenas: tenia el estado vacio.
   Esto es lo minimo para la pestana de resenas, con el aire del sistema. */
.resena{padding:24px 0;border-bottom:1px solid var(--line);max-width:680px}
.resena b{font-weight:600}
.resena .caption{margin-left:8px;font-size:12px;color:var(--ink-3)}
.resena p{margin-top:8px;color:var(--ink-2)}

/* El bloque "acerca de" se queda a una columna mientras no haya foto. */
.about{grid-template-columns:minmax(0,1fr)}