/* /finds, the shop (docs/web/SECCIONES.md, "Tienda de hallazgos"): clean white, like a shop. One header per season with its fabric still life (mood only), the color ribbon of the season,
   a grid of product cards and an add button that fills where it is tapped. Swatches are flat and exact. Text is ink, nothing under 12.5px, taps 44px or more.
   Built by tools/finds_page.py, behavior in site/js/finds-shop.js. Loaded after site.css, so the .fnd- rules win. */

body.finds-shop-page { background: #fff; color: var(--ink); }
.fnd-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.fnd-label { margin: 0 0 6px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.fnd-top { padding: 14px 0 6px; }
.fnd-top h1 { font: 600 clamp(34px, 9vw, 52px)/1.02 var(--serif); letter-spacing: -.012em; }
.fnd-top h1 em { font-family: var(--slant); font-style: italic; color: var(--berry); font-size: 1em; line-height: inherit; -webkit-text-stroke: 0; }
.fnd-lede { margin-top: 8px; font-size: 17.5px; line-height: 1.45; max-width: 34em; }
.finds-shop-page .disclosure-line { margin-top: 10px; padding: 8px 0 0; border-top: 1px solid rgba(43, 34, 48, .14); font-size: 14.5px; line-height: 1.45; color: var(--ink); max-width: 46em; }

/* the season bar: twelve tabs, three key colors and a name each; it sticks while the products scroll */
.fnd-tabs { position: sticky; top: 0; z-index: 30; margin-top: 12px; background: #fff; border-top: 1px solid rgba(43, 34, 48, .14); border-bottom: 1px solid rgba(43, 34, 48, .14); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.fnd-tabs::-webkit-scrollbar { display: none; }
.fnd-tabs ul { list-style: none; margin: 0; padding: 0 8px; display: flex; width: max-content; min-width: 100%; }
.fnd-tab { position: relative; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 12px; color: var(--ink); text-decoration: none; font: 600 15.5px/1.1 var(--sans); white-space: nowrap; }
.fnd-tab-dots { display: flex; }
.fnd-tab-dots i { width: 11px; height: 22px; background: var(--c); }
.fnd-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.fnd-tab:hover { color: var(--ink); }
.fnd-tab[aria-current="true"] { font-weight: 700; }
.fnd-tab[aria-current="true"]::after { transform: scaleX(1); }
.fnd-tab:focus-visible { outline: 3px solid var(--berry); outline-offset: -3px; }

/* a season: its header, its ribbon, its grid */
.fnd-season { scroll-margin-top: 58px; padding-bottom: 6px; }
.fnd-season + .fnd-season { margin-top: 8px; border-top: 1px solid rgba(43, 34, 48, .14); }
/* with JavaScript one season is laid out at a time: the first until the script has chosen (the address, her saved card), then the chosen one; without it all twelve stack */
.js .fnd-season { display: none; }
.js .fnd-shop:not(.is-on) .fnd-season:first-of-type, .js .fnd-shop.is-on .fnd-season.is-shown { display: block; }
.fnd-head { max-width: 1080px; margin: 0 auto; }
.fnd-fabric { margin: 0; background: #F7F6F4; }
.fnd-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.fnd-head { position: relative; }
/* the name sits on a white block that cuts into the photograph, like the caption block of a magazine page */
.fnd-head-text { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; width: max-content; max-width: calc(100% - 24px); margin: -40px 0 0 0; padding: 14px 22px 2px var(--gutter); background: #fff; }
.fnd-head h2 { font: 600 clamp(30px, 8vw, 46px)/1.02 var(--serif); letter-spacing: -.012em; }
.fnd-count { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

/* the color ribbon: the season's 26 colors, exact, edge to edge; a swatch with a dot has finds near it */
.fnd-ribbon { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-top: 14px; padding: 8px var(--gutter) 10px; overscroll-behavior-x: contain; }
.fnd-ribbon::-webkit-scrollbar { display: none; }
.fnd-ribbon-list { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.fnd-ribbon-list li { scroll-snap-align: start; }
.fnd-sw { position: relative; display: block; flex: none; width: 44px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--c); transition: transform .25s var(--ease); }
.fnd-sw.light { box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .14); }
button.fnd-sw { cursor: pointer; }
button.fnd-sw::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
/* on a wide screen the 26 colors fit the width of the photograph above them, no scrolling */
@media (min-width: 820px) {
  .fnd-ribbon { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; overflow: visible; }
  .fnd-ribbon-list { width: 100%; }
  .fnd-ribbon-list li { flex: 1 1 0; min-width: 0; }
  .fnd-sw { width: 100%; }
}
button.fnd-sw:hover { transform: translateY(-3px); }
button.fnd-sw[aria-pressed="true"] { transform: translateY(-8px); height: 64px; margin-bottom: -8px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); z-index: 1; }
button.fnd-sw:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; z-index: 1; }
.fnd-status { min-height: 1.6em; margin: 4px var(--gutter) 0; font: 600 15.5px/1.4 var(--sans); color: var(--ink); max-width: 1080px; }
@media (min-width: 1112px) { .fnd-status { margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } }
.fnd-status:empty { min-height: 0; margin-top: 0; }
.fnd-status b { font-weight: 700; }
.fnd-status button { min-height: 44px; margin-left: 6px; padding: 0 4px; border: 0; background: none; font: 700 15.5px var(--sans); color: var(--berry); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the grid of products */
.fnd-grid { list-style: none; max-width: 1080px; margin: 10px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.fnd-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fnd-card[hidden] { display: none; }
.fnd-pic { aspect-ratio: 1; background: #F6F6F7; overflow: hidden; margin-bottom: 6px; }
.fnd-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnd-pic--sw { background: var(--c, #eee); }
.fnd-meta { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; font: 700 12.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.fnd-meta span + span { font-weight: 600; color: var(--ink-soft); }
.fnd-brand { margin: 2px 0 0; font: 700 14.5px/1.3 var(--sans); color: var(--ink); }
.fnd-name { font: 500 16px/1.3 var(--sans); letter-spacing: 0; text-wrap: pretty; }
.fnd-shade { margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.fnd-k { font: 700 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.fnd-fam { display: flex; align-items: center; gap: 8px; margin-top: 2px; font: 600 14px/1.25 var(--sans); color: var(--ink); text-transform: capitalize; }
.fnd-fam i { flex: none; width: 14px; height: 14px; background: var(--c); }
.fnd-fam i.light { box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .3); }
.fnd-lfd { margin: 2px 0 0; }
.fnd-lfd > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 700 14px/1.25 var(--sans); color: var(--berry); }
.fnd-lfd > summary::-webkit-details-marker { display: none; }
.fnd-lfd > summary::after { content: "+"; font: 400 20px/1 var(--sans); }
.fnd-lfd[open] > summary::after { content: "\2212"; }
.fnd-lfd > summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.fnd-lf { margin: 0 0 4px; font: 400 14.5px/1.35 var(--sans); color: var(--ink); }
.fnd-buy { margin: 4px 0 0; }
.fnd-buy .pick-link { min-height: 44px; font: 700 14.5px/1.25 var(--sans); }
.fnd-also { display: inline-flex; align-items: center; min-height: 44px; font: 700 14.5px/1.25 var(--sans); color: var(--berry); }
.fnd-card .find-add { margin-top: auto; }
.list-on .fnd-card .find-add { display: flex; }

/* the add button: it fills, from the point she touched, with ink */
.fnd-card .find-add { position: relative; z-index: 0; overflow: hidden; justify-content: center; width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: 700 13.5px/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: color .2s .12s; -webkit-tap-highlight-color: transparent; }
.fnd-card .find-add::before { display: none; }
.fnd-card .find-add::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .42s var(--ease); }
.fnd-card .find-add:hover { background: #fff; }
.fnd-card .find-add[aria-pressed="true"] { background: #fff; color: #fff; }
.fnd-card .find-add[aria-pressed="true"]::after { clip-path: circle(160% at var(--x, 50%) var(--y, 50%)); }
.fnd-card .find-add:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }

.fnd-more { max-width: 1080px; margin: 18px auto 0; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 0 22px; }
.fnd-more a { display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--sans); color: var(--berry); }

/* the list panel, in shop dress */
.finds-shop-page .mylist { max-width: 1080px; margin-top: 18px; padding: 0 var(--gutter); }
.finds-shop-page .mylist-panel { background: #fff; border: 1px solid var(--ink); border-bottom: 0; border-radius: 0; box-shadow: 0 -12px 28px -16px rgba(43, 34, 48, .45); }
.finds-shop-page .mylist-count { border-radius: 0; background: var(--ink); }
.finds-shop-page .mylist-cart { border-radius: 0; }
.finds-shop-page .mylist .btn-ghost { border-radius: 0; }

/* the end of the page */
.fnd-end { margin-top: 28px; }
.fnd-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; min-height: 52px; padding: 6px 0; border-top: 1px solid rgba(43, 34, 48, .14); font-size: 17px; }
.fnd-row span:first-child { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.fnd-end .ed-fold { border-top: 1px solid rgba(43, 34, 48, .14); margin-top: 0; }
.fnd-end .ed-fold > summary { font: 700 13.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.finds-shop-page .next { border: 0; border-image: none; border-top: 1px solid rgba(43, 34, 48, .14); background: none; max-width: 1080px; margin: 24px auto 8px; padding: 14px var(--gutter) 16px; }
.finds-shop-page .next-label { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

@media (min-width: 600px) { .fnd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 16px; } .fnd-img { aspect-ratio: 3 / 1; } }
@media (min-width: 900px) { .fnd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .fnd-fabric { max-width: 1080px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) {
  .fnd-tab::after, .fnd-sw, .fnd-card .find-add, .fnd-card .find-add::after { transition: none; }
}
@media (forced-colors: active) { .fnd-card .find-add[aria-pressed="true"] { background: ButtonFace; color: ButtonText; border: 3px solid ButtonText; } .fnd-sw { border: 1px solid CanvasText; } }

/* the tile of a pick: the product type drawn in ink, filled with the exact color of its family, with a bar of that color along the foot */
.fnd-pic { position: relative; display: grid; place-items: center; padding: 6px 6px 14px; }
.fnd-pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--c, #CFC6BA); }
.fnd-pic .art-svg { width: 92%; max-width: 230px; height: auto; aspect-ratio: 1; filter: none; }

html:not(.js) .fnd-status { display: none; }
.fnd-meta span { white-space: nowrap; }