/* Palette Girlies: the makeup finder of /makeup/finder (markup: tools/makeup_finder.py, behavior: site/js/makeup-finder.js).
   A wall of pictures of picks on paper, and a sheet of questions under it (a side panel on a wide screen). The pictures are multiplied over the paper like the product
   pictures of the cards, so nothing above them may make a stacking context (no isolation, opacity, filter or transform on .finder, .fw-wall or .fw-stage): only the tiles
   move, and each tile carries its own blend. Swatches and chips are flat and exact on plain paper. Without JavaScript the finder stays hidden and the page is its intro
   and the 12 season links. */

.fw-head { padding: 6px 0 4px; }
.fw-head .wrap { display: block; }
.fw-head h1 { font-size: clamp(32px, 8.6vw, 54px); line-height: 1; margin: 0; letter-spacing: -.012em; }
.fw-intro { margin: 8px 0 0; max-width: 40em; font-size: 17px; line-height: 1.45; }
.fw-disc { margin-top: 6px; font-size: 13px; line-height: 1.35; max-width: 48em; }
/* a phone: the first screen is the header, one title line, the disclosure, the wall and the sheet */
@media (max-width: 699px) {
  html.js .fw-intro { display: none; }
  html.js .finder-page .crumbs { display: none; }
  .fw-head h1 { font-size: 36px; }
}

.finder { display: none; position: relative; scroll-margin-top: 6px; }
html.js .finder { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 560px; height: calc(100svh - 190px); }
html.js .finder.is-failed { display: block; height: auto; min-height: 0; }
.finder.is-failed .fw-wall, .finder.is-failed .fw-main { display: none; }
.fw-loading { margin: 18px 0; font: 400 18px/1.4 var(--sans); }

/* ---------- the wall ---------- */
.fw-wall { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0 var(--gutter); }
.fw-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; transition: height .6s var(--ease); }
.fw-top { order: -2; padding: 8px 0 0; }
.fw-top[hidden] { display: none; }
.fw-kick { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.fw-h { margin: 2px 0 0; font: 400 clamp(34px, 9.4vw, 52px)/1 var(--slant); font-style: italic; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.fw-sub { margin: 4px 0 0; font: 400 17px/1.4 var(--sans); color: var(--ink); }
.fw-showall { margin-top: 10px; }

.wt { --mask: url(/img/collage/mask-1.webp); position: absolute; left: 0; top: 0; display: block; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: center; cursor: pointer;
  mix-blend-mode: multiply; -webkit-tap-highlight-color: transparent;
  transition: transform .8s cubic-bezier(.2, .75, .25, 1), width .8s cubic-bezier(.2, .75, .25, 1), height .8s cubic-bezier(.2, .75, .25, 1), opacity .55s ease; }
.wt.is-block { mix-blend-mode: normal; }   /* a swatch keeps its exact color: nothing multiplies it */
.wt:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; mix-blend-mode: normal; }
.wt-in { display: block; width: 100%; animation: fw-drift var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate; }
@keyframes fw-drift { from { transform: translate(var(--dx, 0px), var(--dy, 0px)); } to { transform: translate(calc(var(--dx, 0px) * -1), calc(var(--dy, 0px) * -1)); } }
.wt-pic, .wt-blk { display: block; width: 100%; aspect-ratio: 1 / 1; -webkit-mask: var(--mask) 50% 50% / 100% 100% no-repeat; mask: var(--mask) 50% 50% / 100% 100% no-repeat; }
.wt-pic[data-m="2"], .wt-blk[data-m="2"] { --mask: url(/img/collage/mask-2.webp); } .wt-pic[data-m="3"] { --mask: url(/img/collage/mask-3.webp); } .wt-pic[data-m="4"] { --mask: url(/img/collage/mask-4.webp); }
.wt-pic[data-m="5"] { --mask: url(/img/collage/mask-5.webp); } .wt-pic[data-m="6"] { --mask: url(/img/collage/mask-6.webp); }
.wt-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wt-blk { position: relative; background: var(--c); }
.wt-blk i { position: absolute; left: 8%; right: 8%; bottom: 8%; font: 700 13px/1.2 var(--sans); font-style: normal; color: #FFFDF8; text-align: left; text-shadow: none; }
.wt.is-light .wt-blk i { color: var(--ink); }
.wt-cap { display: none; margin: 4px -8px 0; font: 400 13px/1.25 var(--sans); color: var(--ink); }
.wt.has-cap .wt-cap { display: block; height: var(--cap, 58px); overflow: hidden; }
.wt-cap b { display: block; font-weight: 700; }
.wt-n { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-s, .wt-cap b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-tag { display: block; font: 700 12.5px/1.3 var(--sans); font-style: normal; color: var(--berry); }
.wt-tag[hidden] { display: none; }
.wt.is-close:not(.has-cap) .wt-tag { display: none; }
.is-result .wt-in, .fw-stage.is-grid .wt-in { animation: none; }

.fw-lab { position: absolute; margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); pointer-events: none; }
.fw-lab--grp { left: 0; }
.fw-lab--no { font: 400 22px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); text-align: center; }

/* ---------- the sheet ---------- */
.fw-sheet { position: relative; z-index: 120; min-width: 0; padding: 10px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: var(--card); border: 2px solid var(--ink); border-bottom: 0;
  border-radius: 18px 18px 0 0; box-shadow: 0 -10px 24px -14px rgba(43, 34, 48, .45); overflow-y: auto; max-height: 56svh; }
.fw-sheet[aria-busy="true"] { opacity: .6; }
.fw-bar { display: flex; align-items: center; gap: 6px; }
.fw-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: none; border: 0; cursor: pointer; border-radius: 12px; }
.fw-ib:hover { background: var(--blush-soft); }
.fw-ib[hidden] { display: none; }
.fw-q { margin: 0 0 0 2px; font: 400 clamp(19px, 5.2vw, 24px)/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.fw-q:focus { outline: none; }
.fw-count { margin: 0 0 0 4px; font: 400 15.5px/1.35 var(--sans); color: var(--ink); }
.fw-ctx { margin: 0 0 0 4px; font: 400 15.5px/1.35 var(--sans); color: var(--ink); }
.fw-ctx b { font-weight: 700; }
.fw-change { font-weight: 700; color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.fw-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 2px; }
.fw-dots { display: flex; align-items: center; gap: 6px; margin: 0 4px 0 0; padding: 0; list-style: none; }
.fw-dots li { width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; }
.fw-dots .is-done { background: var(--berry); border-color: var(--berry); }
.fw-dots .is-now { width: 22px; border-radius: 6px; background: var(--ink); }

.fw-opts { display: flex; align-items: stretch; gap: 10px; margin: 10px -2px 0; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.fw-opts::-webkit-scrollbar { display: none; }
.fw-opt { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 128px; max-width: 170px; padding: 10px 12px 11px; text-align: center; font: inherit; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px; cursor: pointer; text-decoration: none; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease), background-color .2s; }
.fw-opt:active { transform: translateY(1px); }
.fw-opt.is-on { background: var(--blush-soft); border-color: var(--berry); box-shadow: 0 0 0 1px var(--berry); }
.fw-opt--any { background: transparent; border-style: dashed; }
.fw-ot { font: 700 17px/1.2 var(--sans); }
.fw-od { font: 400 14.5px/1.3 var(--sans); color: var(--ink-soft); }
.fw-oc { position: absolute; top: -9px; right: -6px; min-width: 24px; padding: 1px 7px; font: 700 13px/1.5 var(--sans); color: #FFFDF8; background: var(--berry); border-radius: 999px; }
.fw-art { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-bottom: 2px; }
.fw-art--ic { gap: 7px; align-items: flex-end; }
@media (hover: hover) { .fw-opt:hover { transform: translateY(-2px); background: var(--blush-soft); } .fw-opt--any:hover { background: var(--paper); } }

/* the season row: four groups of three cards and one group for "not sure" */
.fw-seasons { display: flex; gap: 18px; }
.fw-grp { flex: none; display: block; scroll-snap-align: start; }
.fw-gh { margin: 0 0 6px 2px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.fw-grp-row { display: flex; gap: 8px; }
.fw-seasons .fw-opt { min-width: 118px; width: 118px; padding: 9px 9px 10px; }
.fw-seasons .fw-ot { font-size: 16px; }
.fw-grp--more .fw-opt { width: 138px; justify-content: flex-start; }
.fw-strip { display: flex; width: 100%; height: 26px; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .2); }
.fw-strip > i { flex: 1; background: var(--c); }
.fw-strip--big { width: 220px; height: 40px; margin: 0 auto; }
.fw-seasons .fw-art { display: block; width: 100%; min-height: 0; margin-bottom: 4px; }

/* flat chips and drawings, in exact colors */
.fw-c { display: inline-block; flex: none; width: 22px; height: 22px; background: var(--c); border-radius: 4px 8px 4px 7px / 7px 4px 8px 4px; box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .25); }
.fw-c--big { width: 34px; height: 34px; }
.fw-c--lap + .fw-c--lap { margin-left: -14px; }
.fw-c--chip { width: 30px; height: 30px; border-radius: 50%; }
.fw-ic { display: block; flex: none; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .2); }
.fw-ic--lip { width: 15px; height: 34px; border-radius: 7px 7px 2px 2px; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%); box-shadow: none; }
.fw-ic--cheek { width: 30px; height: 30px; border-radius: 50%; }
.fw-ic--eye { width: 24px; height: 24px; border-radius: 50%; }
.fw-ring { display: block; flex: none; width: 30px; height: 30px; border: 6px solid var(--ring, #C9A24B); border-radius: 50%; }
.fw-ring--gold { --ring: #C9A24B; } .fw-ring--silver { --ring: #AEB4BC; }
.fw-ring + .fw-ring { margin-left: -12px; }

/* the finishes, drawn in code: a flat block, a soft sheen, a wet highlight, a fine even shimmer */
.fw-sw { position: relative; display: block; width: 68px; height: 38px; background-color: var(--c); border-radius: 6px 12px 6px 10px / 10px 6px 12px 6px; box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .2); overflow: hidden; }
.fw-sw--satin { background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, 0) 68%); }
.fw-sw--cream { background-image: radial-gradient(ellipse 70% 60% at 30% 24%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%); }
.fw-sw--gloss { background-image: radial-gradient(ellipse 22% 16% at 28% 26%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 80% 55% at 38% 30%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 80%); }
.fw-sw--shimmer, .fw-sw--mixed::after { background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .6) 0 .9px, transparent 1.3px), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .45) 0 .8px, transparent 1.2px);
  background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 3px; }
.fw-sw--metallic { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38) 32%, rgba(43, 34, 48, .14) 58%, rgba(255, 255, 255, .3) 84%, rgba(255, 255, 255, 0)); }
.fw-sw--mixed::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }

/* the slider (budget, how much color) */
.fw-slider { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.fw-range-wrap { flex: 1 1 auto; min-width: 0; padding: 0 4px; }
.fw-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; --at: .5; }
.fw-range::-webkit-slider-runnable-track { height: 18px; border: 2px solid var(--ink); border-radius: 9px 12px 9px 11px / 11px 9px 12px 9px; background: linear-gradient(90deg, var(--berry) calc(var(--at) * 100%), var(--blush-soft) calc(var(--at) * 100%)); }
.fw-range::-moz-range-track { height: 14px; border: 2px solid var(--ink); border-radius: 9px 12px 9px 11px / 11px 9px 12px 9px; background: linear-gradient(90deg, var(--berry) calc(var(--at) * 100%), var(--blush-soft) calc(var(--at) * 100%)); }
.fw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -10px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 0 rgba(43, 34, 48, .3); cursor: grab; }
.fw-range::-moz-range-thumb { width: 28px; height: 28px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; cursor: grab; }
.fw-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--berry); outline-offset: 2px; }
.fw-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--berry); outline-offset: 2px; }
.fw-ticks { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; font: 400 14.5px/1.2 var(--sans); color: var(--ink); }
.fw-ticks .is-on { font-weight: 700; color: var(--berry); }
.fw-slider .fw-opt { min-width: 112px; }
.fw-go { align-self: flex-start; margin: 8px 0 2px; min-height: 52px; }
.fw-opts--t, .fw-opts--a, .fw-opts--m { flex-direction: column; overflow: visible; }
.fw-hint { margin: 2px 0 0 4px; font: 400 15.5px/1.4 var(--sans); }
.fw-skip { display: inline-block; margin: 4px 0 0 4px; padding: 10px 6px; font: 700 15.5px/1.2 var(--sans); color: var(--berry); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the colors she reaches for */
.fw-fams { display: grid; gap: 10px; }
.fw-fam-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-fam { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 14px 6px 8px; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; }
.fw-fam.is-on { background: var(--blush-soft); border-color: var(--berry); box-shadow: 0 0 0 1px var(--berry); }
.fw-fam .fw-ot { font-size: 16px; }

/* the quick guess */
.fw-guess { margin: 14px 0 6px; text-align: center; }
.fw-guess-l { margin: 10px 0 0; font: 400 16.5px/1.4 var(--sans); }
.fw-guess-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

/* the result sheet: her answers as chips she can tap to change */
.fw-chips { display: flex; gap: 8px; margin: 0 -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
.fw-chips::-webkit-scrollbar { display: none; }
.fw-chip { flex: none; min-height: 44px; padding: 0 15px; font: 700 15.5px/1 var(--sans); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.fw-chip:hover { background: var(--blush-soft); }
.fw-chip--plus { border-style: dashed; background: transparent; }
.fw-chip--plus.is-done { border-style: solid; }
.fw-more { margin-top: 2px; }
.fw-more-l { margin: 6px 0 0 4px; font: 400 14.5px/1.35 var(--sans); color: var(--ink); }

/* ---------- the result of a full look ---------- */
.fw-main { padding: 6px var(--gutter) 28px; }
.fw-main[hidden] { display: none; }
.fw-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.fw-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px; }
.fw-item-n { font: 400 28px/1 var(--serif); color: var(--berry); }
.fw-item-open { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 0; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; }
.fw-item-t { display: block; min-width: 0; }
.fw-item-k { display: block; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.fw-item-t b { display: block; font: 700 16.5px/1.25 var(--sans); }
.fw-item-s { display: block; font: 400 14.5px/1.3 var(--sans); color: var(--ink-soft); }
.fw-swap { flex: none; min-height: 44px; padding: 0 14px; font: 700 15.5px/1 var(--sans); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; }
.fw-swap:hover { background: var(--blush-soft); }
.fw-swap::after { content: "\21BB"; margin-left: 7px; font-weight: 400; }
.fw-box { margin-top: 18px; }
.fw-bh { margin: 0 0 6px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.fw-why, .fw-routine { margin: 0; padding-left: 1.25em; font: 400 17px/1.5 var(--sans); }
.fw-why li, .fw-routine li { margin: 3px 0; }
.fw-routine b { font-weight: 700; }
.fw-buy { display: grid; gap: 10px; margin-top: 18px; }
.fw-cart { justify-self: start; text-align: left; }
.fw-buy-r { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-email { margin-top: 26px; }

/* ---------- the card ---------- */
.fw-card[open] { position: fixed; inset: auto 0 0 0; z-index: 90; width: 100%; max-width: 100%; max-height: 92svh; margin: 0; padding: 0; overflow: auto; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-bottom: 0; border-radius: 18px 18px 0 0; }
.fw-card::backdrop { background: rgba(43, 34, 48, .58); }
html.fw-modal { overflow: hidden; }
.fw-card-in { position: relative; padding: 14px var(--gutter) 0; }
.fw-x { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
/* the card on a phone: the picture and the name side by side, the details under them, and the buy buttons stuck to the bottom so they are never out of reach */
.fw-pk { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.fw-pk-pic { grid-column: 1; grid-row: 1; width: 100%; }
.fw-pk-head { grid-column: 2; grid-row: 1; padding-right: 40px; }
.fw-pk-more { grid-column: 1 / -1; }
.fw-pk-buy { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 1; margin: 8px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid rgba(43, 34, 48, .25); }
.fw-pk-ph { width: 100%; }
.fw-az { display: block; width: 100%; height: auto; max-width: none; background: #fff; border: 1px solid rgba(43, 34, 48, .22); padding: 6px; mix-blend-mode: normal; filter: none; }
.fw-pk-note { margin: 4px 0 0; font: 400 12.5px/1.3 var(--sans); color: var(--ink); text-align: center; }
.fw-pk-brand { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.fw-pk-name { margin: 2px 0 0; font: 400 clamp(22px, 6vw, 32px)/1.1 var(--serif); }
.fw-pk-shade { margin: 6px 0 0; font: 400 16.5px/1.35 var(--sans); }
.fw-pk-shade span { font-weight: 700; }
.fw-pk-color { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font: 700 16px/1.3 var(--sans); text-transform: capitalize; }
.fw-pk-rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; padding: 10px 0; border-top: 1px solid rgba(43, 34, 48, .25); border-bottom: 1px solid rgba(43, 34, 48, .25); font: 400 16.5px/1.35 var(--sans); }
.fw-pk-rows dt { color: var(--ink-soft); } .fw-pk-rows dd { margin: 0; font-weight: 700; }
.fw-pk-why { margin-top: 14px; }
.fw-pk-n { margin: 10px 0 0; font: 400 16.5px/1.5 var(--sans); max-width: 40em; }
.fw-pk-ashy { margin: 8px 0 0; }
.fw-pk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fw-pk-act .pick-buy { margin: 0; }
.fw-pk-act .find-add { display: inline-flex; }
.fw-buy-link { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; min-height: 48px; padding: 8px 18px; font: 700 17px/1.2 var(--sans); color: #FFFDF8; background: var(--berry); border: 2px solid var(--berry-dark); border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px; text-decoration: none; }
.fw-buy-link:hover { color: #FFFDF8; background: var(--berry-dark); }
.fw-fallback { margin-top: 28px; }

/* ---------- a wide screen: the sheet is a side panel and the wall gets the rest ---------- */
@media (min-width: 700px) {
  .fw-head h1 { font-size: clamp(40px, 5vw, 64px); }
  .fw-opt { min-width: 150px; }
  .fw-seasons .fw-opt { min-width: 128px; width: 128px; }
  .fw-card[open] { inset: 0; margin: auto; width: min(860px, calc(100vw - 48px)); height: fit-content; max-height: 90vh; border: 2px solid var(--ink); border-radius: 16px; }
  .fw-card-in { padding: 24px 28px 26px; }
  .fw-pk-buy { padding-bottom: 0; }
  .fw-pk { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 0 28px; }
  .fw-pk-pic { grid-row: 1 / span 3; }
  .fw-pk-head { grid-row: 1; padding-right: 48px; }
  .fw-pk-more { grid-column: 2; grid-row: 2; }
  .fw-pk-buy { grid-column: 2; grid-row: 3; position: static; margin: 14px 0 0; padding: 0; border: 0; background: none; }
  .fw-pk-name { font-size: clamp(28px, 3vw, 36px); }
  .fw-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .fw-item { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 12px 14px 14px; }
  .fw-item-n { display: none; }
  .fw-item-open { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1000px) {
  .fw-head .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 44px; align-items: end; }
  .fw-head h1 { grid-row: 1 / span 2; }
  .fw-intro { margin: 0; font-size: 16.5px; }
  .fw-disc { margin: 6px 0 4px; }
  html.js .finder { grid-template-columns: 410px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "sheet wall" "sheet main"; column-gap: 30px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
    height: calc(100vh - 150px); min-height: 600px; }
  .fw-sheet { grid-area: sheet; align-self: start; position: sticky; top: 12px; max-height: calc(100vh - 24px); padding: 16px 18px 20px; border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-paper); }
  .fw-wall { grid-area: wall; padding: 0; }
  .fw-main { grid-area: main; padding: 6px 0 40px; }
  .fw-q { font-size: 28px; }
  .fw-bar { flex-wrap: wrap; }
  .fw-q { flex: 1 1 100%; order: 3; margin: 6px 0 0 2px; }
  .fw-sheet.is-compact .fw-chips { flex: 1 1 100%; order: 3; margin-top: 6px; }
  .fw-opts { flex-wrap: wrap; overflow: visible; margin-top: 14px; }
  .fw-opts .fw-opt { flex: 1 1 calc(50% - 5px); max-width: none; min-width: 150px; }
  .fw-seasons { flex-direction: column; gap: 12px; }
  .fw-grp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fw-seasons .fw-opt, .fw-grp--more .fw-opt { width: auto; min-width: 0; }
  .fw-seasons { gap: 8px; }
  .fw-seasons .fw-opt { padding: 6px 4px 7px; gap: 0; }
  .fw-seasons .fw-ot { font-size: 15px; white-space: nowrap; }
  .fw-seasons .fw-strip { height: 20px; }
  .fw-grp--more .fw-opt { padding: 6px 4px 8px; }
  .fw-grp--more .fw-ot { white-space: normal; font-size: 14.5px; line-height: 1.15; }
  .fw-grp--more .fw-od { display: none; }
  .fw-opts--t, .fw-opts--a, .fw-opts--m { flex-wrap: nowrap; }
  .fw-slider { flex-wrap: wrap; }
  .fw-opts--t .fw-opt, .fw-opts--a .fw-opt { flex: 0 0 auto; }
  .finder.is-result { height: auto; min-height: 0; }

  .fw-chips { flex-wrap: wrap; overflow: visible; }
  .fw-top { padding-top: 0; }
}
/* a result under a phone: the page scrolls and the sheet sticks to the bottom */
html.js .finder.is-result { display: block; height: auto; min-height: 0; }
@media (min-width: 1000px) { html.js .finder.is-result { display: grid; } }
.finder.is-result .fw-sheet { position: sticky; bottom: 0; max-height: 40svh; min-height: 0; padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) { .finder.is-result .fw-sheet { bottom: auto; } }
.finder.is-result .fw-stage { flex: none; }
.finder.is-result .fw-sheet:not(.is-compact) { max-height: 62svh; }

/* the mini list of the page: a small pill at the top of the wall, its body drops down over the wall */
.finder .mylist { position: absolute; top: 6px; right: var(--gutter); z-index: 130; width: auto; max-width: none; margin: 0; }
@media (min-width: 1000px) { .finder .mylist { right: 0; } }
.finder .mylist-panel { border-bottom: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-paper); }
.finder .mylist-bar { min-height: 44px; padding: 4px 6px 4px 14px; }
.finder .mylist-title { font-size: 16px; }
.finder .mylist-dots { display: none !important; }
.finder .mylist-body { position: absolute; top: calc(100% + 6px); right: 0; width: min(340px, calc(100vw - 2 * var(--gutter))); background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-paper); padding-top: 8px; }
.finder .mylist-body[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wt, .fw-stage, .fw-opt { transition: none; }
  .wt-in { animation: none; }
}
@media (forced-colors: active) { .fw-opt.is-on, .fw-fam.is-on { border-color: Highlight; } .fw-c, .fw-ic, .fw-sw, .fw-ring { forced-color-adjust: none; } }