/* The shop window: filters, cards, votes, comments. */

/* ---- filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 20px 32px; padding: 24px 0 8px; }
.facet h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.facet.right { margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.chip span { margin-left: 6px; color: var(--ink-3); font-size: 12px; }
.chip:hover { border-color: var(--ink-3); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on span { color: #bbb; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.seg button.on { background: var(--soft); color: var(--ink); font-weight: 600; }

.count { margin: 12px 0 16px; font-size: 13px; color: var(--ink-3); }
.empty { color: var(--ink-3); padding: 60px 0; text-align: center; }

/* ---- grid ---- */
.grid.grande { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 28px; }
.grid.lista { display: flex; flex-direction: column; gap: 12px; }

.card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; transition: border-color .15s; }
.card:hover { border-color: #cfcfcc; }
.card.out { opacity: .55; }

/* Same frame for every photo: the image is taken out of the flow so a tall photo cannot stretch it. */
.photo { position: relative; background: var(--soft); aspect-ratio: 4 / 3; overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.badge.ok { background: var(--ok); }
.badge.no { background: var(--no); }

.body { padding: 18px 20px 16px; }
.body header { display: flex; justify-content: space-between; gap: 16px; }
.brand { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.body h3 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.01em; }
.nota { text-align: right; line-height: 1; }
.nota strong { display: block; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nota small { font-size: 11px; color: var(--ink-3); }

.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }


/* ---- votes ---- */
.votes { display: flex; gap: 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.vote { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vote .who { width: 40px; font-weight: 600; }
.pips { display: inline-flex; gap: 4px; }
.pip { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cfcfcc; }
.pip:hover { border-color: var(--ink-3); }
.vote:has(.alber) .pip.on { background: var(--alber); border-color: var(--alber); }
.vote:has(.nuria) .pip.on { background: var(--nuria); border-color: var(--nuria); }
.vote:has(.alber) .pip.half { background: linear-gradient(90deg, var(--alber) 50%, transparent 50%); border-color: var(--alber); }
.vote:has(.nuria) .pip.half { background: linear-gradient(90deg, var(--nuria) 50%, transparent 50%); border-color: var(--nuria); }
.vote-n { min-width: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---- comments ---- */
.comments { margin-top: 12px; font-size: 13px; }
.comments summary { cursor: pointer; color: var(--ink-2); list-style: none; }
.comments summary::before { content: "+ "; color: var(--ink-3); }
.comments[open] summary::before { content: "− "; }
.comments summary span { color: var(--ink-3); margin-left: 4px; }
.comments ul { list-style: none; padding: 0; margin: 10px 0; }
.comments li { position: relative; padding: 8px 24px 8px 0; border-bottom: 1px solid var(--line); }
.comments li p { margin: 2px 0 0; }
.comments .x { position: absolute; right: 0; top: 8px; color: var(--ink-3); font-size: 16px; line-height: 1; }
/* The composer is one bordered row: author toggle, text, send. */
.comments form { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; transition: border-color .15s; }
.comments form:focus-within { border-color: var(--ink-3); }
.author { display: inline-flex; flex: none; gap: 2px; padding: 2px; background: var(--soft); border-radius: 6px; }
.author label { padding: 3px 9px; border-radius: 4px; color: var(--ink-3); cursor: pointer; line-height: 18px; }
.author label:hover { color: var(--ink-2); }
.author input { position: absolute; opacity: 0; pointer-events: none; }
.author label:has(:checked) { font-weight: 600; }
.author .alber:has(:checked) { color: var(--alber); background: color-mix(in srgb, var(--alber) 12%, #fff); }
.author .nuria:has(:checked) { color: var(--nuria); background: color-mix(in srgb, var(--nuria) 12%, #fff); }
.author label:has(:focus-visible) { outline: 2px solid var(--ink-3); outline-offset: 1px; }
.comments input[name="text"] { flex: 1; min-width: 0; border: 0; outline: 0; padding: 4px 8px; background: none; }
.comments form button { flex: none; padding: 4px 12px; border-radius: 6px; background: var(--ink); color: #fff; line-height: 20px; }

/* ---- list view: photo left, everything else right ---- */
.grid.lista .card { display: grid; grid-template-columns: 220px 1fr; }
.grid.lista .photo { aspect-ratio: auto; min-height: 165px; }
.grid.lista .comments { display: none; }