/* Palette Girlies, shop.css (V2 paper, nov 2026): the sales pages (/shop, /guides, /guides/<season>, /manual, /phone-palette, /makeup-kit, /neighbors). Markup in tools/shop_kit.py,
   tools/sales_pages.py, tools/product_pages.py and tools/sales_use.py; behavior in site/js/shop.js. Built on the tokens and components of site.css (.wrap .sec .label .btn .link .chip .dark .rv .mbar).
   No color data here: every swatch comes in as --c, in its exact color from the product files, flat on plain paper. Breakpoints: 600, 720, 900, 1100.
   Pieces: the hero (.sl-hero), the section head and the 5/7 split (.sl-head .sl-line .sl-split .sl-body), the tour (.sl-tour .sh-strip), before and with the guide (.sl-bw .sh-split), the pain
   drawn with code (.pv-*), is this for you (.sh-fit), the four $0 (.sl-zero), the questions (.sl-q .sl-qa), the use blocks (.pu-*), the shop grid (.shp-*), the close (.sl-close, a dark band).
   site/css/sales.css adds what only the guide pages and the manual have; site/css/product.css what only the three small products have. */

/* ---------- shared ---------- */
.slp code, .sl-close code { font: 500 13px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; }
.sl-head { display: grid; gap: var(--s3); align-content: start; margin-bottom: var(--s5); min-width: 0; }
.sl-head h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1; max-width: 15ch; }
.sl-line { max-width: 42ch; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
.sl-line a { color: var(--ink); font-weight: 600; }
.sl-body { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.sl-split { display: grid; }
.slp .sec.tight { padding-bottom: clamp(64px, 8vw, 112px); }
@media (min-width: 900px) {
  .sl-split { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); }
  .sl-split > .sl-head { position: sticky; top: calc(var(--hdr-h) + var(--s5)); align-self: start; margin-bottom: 0; }
}

/* ---------- the hero: the words left, the real cover right; on a phone the cover first ---------- */
.sl-hero { padding: var(--s2) 0 var(--s6); }
.sl-hero-grid { display: grid; gap: var(--s5); }
.sl-hero-text { display: grid; gap: var(--s3); align-content: center; min-width: 0; }
.sl-pain { max-width: 26ch; font: 400 clamp(20px, 1.6vw, 24px)/1.35 var(--serif); letter-spacing: -.01em; color: var(--ink-2); }
.sl-name { font-size: clamp(44px, 6vw, 92px); line-height: .98; max-width: 14ch; }
.sl-use { max-width: 40ch; font-size: var(--fs-4); line-height: 1.45; color: var(--ink); }
.sl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: var(--s2); font-size: var(--fs-2); line-height: 1.4; color: var(--graphite); }
.sl-price b { font: 400 clamp(32px, 3vw, 44px)/1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.sl-cta { margin-top: var(--s3); }
.slp .cta-note, .sp-trust, .sh-know { margin: 0; max-width: 40ch; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
.sh-know a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-weight: 600; color: var(--ink); }
.sl-sub { margin-top: var(--s1); }
.sl-sub .link { min-height: 44px; }
.sp-card-line { margin: 0; padding: var(--s1) 0 var(--s1) var(--s3); border-left: 2px solid var(--berry); font: 600 15px/1.45 var(--sans); color: var(--ink); }
.sp-card-line[hidden] { display: none; }
.sp-card-line a { color: var(--ink); }
.sl-pic { order: -1; margin: 0; display: grid; gap: var(--s3); justify-items: center; }
.sl-covers { display: flex; align-items: flex-end; justify-content: center; gap: var(--s3); width: 100%; }
.sl-cover { display: block; flex: 0 1 auto; min-width: 0; }
.sl-cover img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(43, 34, 48, .55); }
.sl-covers--1 .sl-cover { width: min(100%, 320px); }
.sl-covers--2 .sl-cover { width: min(48%, 264px); }
.sl-covers--3 .sl-cover { width: min(34%, 220px); }
.sl-pic--phone .sl-cover, .sl-pic--makeup .sl-cover { width: min(58vw, 260px); }
.sl-pic--phone .sl-cover img, .sl-pic--makeup .sl-cover img { border-radius: var(--r-md); }
.sl-pic--shop .sl-covers--3 .sl-cover:last-child { width: min(22%, 120px); }   /* the phone cover of the shop, at its real size beside the books */
.sl-pic--shop .sl-covers--3 .sl-cover:last-child img { border-radius: 6px; }
.sl-cap { font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); text-align: center; }
@media (min-width: 900px) {
  .sl-hero { padding-top: var(--s4); }
  .sl-hero-grid { grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .sl-pic { order: 0; }
  .sl-pic--phone .sl-cover, .sl-pic--makeup .sl-cover { width: min(100%, 300px); }
}

/* ---------- the tour: the real pages, dragged sideways ---------- */
.sl-tour .sl-head { margin-bottom: var(--s4); }
.sh-strip { --ph: 280px; list-style: none; margin: 0; padding: var(--s2) var(--gut) var(--s4); display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.sh-strip::-webkit-scrollbar { display: none; }
.js .sh-strip { cursor: grab; }
.sh-strip.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.sh-strip.is-drag a, .sh-strip.is-drag img { pointer-events: none; }
.sh-pg { flex: 0 0 auto; width: calc(var(--ph) * var(--r)); scroll-snap-align: start; }
.sh-pg figure { position: relative; margin: 0; display: grid; gap: var(--s2); }
.sh-pg img, .sh-page img { display: block; width: 100%; height: auto; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(43, 34, 48, .5); -webkit-user-drag: none; }
.sh-pg figcaption { display: grid; gap: 2px; font-size: var(--fs-2); line-height: 1.35; color: var(--ink); }
.sh-pg figcaption b, .sh-page figcaption { font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.sp-zoom-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sp-zoom-open:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
.sh-strip.is-drag .sp-zoom-open { cursor: grabbing; }
.sh-strip-foot { display: flex; align-items: center; gap: var(--s3); }
.sh-strip-foot[hidden] { display: none; }
.sh-prog { position: relative; flex: 1; height: 1px; background: var(--line-2); }
.sh-prog i { position: absolute; left: 0; top: -1px; height: 3px; width: 22%; background: var(--ink); transform: translateX(var(--px, 0%)); }
.sh-count { flex: none; font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .sh-strip { --ph: 380px; gap: var(--s5); padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); scroll-padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); }
}
/* the zoom: a real page at full size (the dialog site/js/shop.js makes) */
.sp-zoom { width: min(96vw, 1000px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--r-sm); background: var(--card); color: var(--ink); box-shadow: 0 30px 60px rgba(43, 34, 48, .4); }
.sp-zoom::backdrop { background: rgba(43, 34, 48, .72); }
.sp-zoom-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px 6px 14px; background: var(--card); border-bottom: 1px solid var(--line); font: 600 15px/1.2 var(--sans); color: var(--ink); }
.sp-zoom-x { min-height: 44px; padding: 9px 16px; font: 600 15px/1 var(--sans); color: var(--paper); background: var(--ink); border: 0; border-radius: var(--r-pill); cursor: pointer; }
.sp-zoom-box { overflow: auto; max-height: calc(94vh - 58px); }
.sp-zoom-box img { width: min(960px, 220vw); max-width: none; height: auto; display: block; margin: 0 auto; background: #fff; }

/* ---------- before and with the guide: a screen split in two ---------- */
.sl-bw .sl-head { margin-bottom: var(--s4); }
.sh-bw-list { display: grid; gap: var(--s2); }
.sh-split { padding: var(--s4) 0 var(--s3); border-top: 1px solid var(--line); }
.sh-split:first-child, .sh-tabs + .sh-split { border-top: 0; padding-top: 0; }
.sh-split[hidden] { display: none; }
.sh-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.sh-tabs .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }
.sh-split-bar { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: 0 14px; margin-bottom: var(--s3); font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sh-split-bar span:last-child { color: var(--berry); }
.sh-split-body { position: relative; display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
.sh-split-line { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(.84 / 1.84 * (100% - 14px) + 7px); width: 1px; background: var(--line-2); pointer-events: none; }
.sh-split-line::after { content: ""; position: absolute; left: -5px; top: 46px; width: 11px; height: 11px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 4px var(--paper); }
.sh-before, .sh-after { min-width: 0; display: grid; gap: var(--s3); align-content: start; }
.sh-before { padding-right: 8px; }
.sh-after { padding-left: 4px; }
.sh-before-t { margin: 0; font-size: var(--fs-2); line-height: 1.45; color: var(--ink); }
.sh-after-t { margin: 0; font: 400 clamp(20px, 2vw, 26px)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.sh-after .sp-proof { position: relative; margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--berry); font: italic 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
.sh-after .sp-proof q { quotes: "\201C" "\201D"; }
.sh-after .sp-proof cite { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the caption above the title already says the page */
.sh-page { margin: 0; display: grid; gap: var(--s2); }
.js .sh-split.is-wait .sh-after { clip-path: inset(0 0 0 102%); }
.js .sh-split.is-wait .sh-split-line { transform: scaleY(0); transform-origin: 50% 0; }
.js .sh-split.is-in .sh-after { transition: clip-path 1s var(--ease) .25s; clip-path: inset(0 -2% 0 -2%); }
.js .sh-split.is-in .sh-split-line { transition: transform .7s var(--ease); transform: none; }
.js .sh-split.is-done .sh-after { clip-path: none; }
@media (min-width: 900px) {
  .sh-bw-list { gap: 0; }
  .sh-split { padding: var(--s5) 0; }
  .sh-split-bar, .sh-split-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }
  .sh-split-line { left: calc(50% - .5px); }
  .sh-after { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 0 26px; align-items: start; }
  .sh-after .sh-page { grid-row: 1 / span 3; }
  .sh-before { padding-right: 0; }
}

/* ---------- the pain, drawn with code (flat, on the paper) ---------- */
.pv { margin: 0; position: relative; width: 100%; }
.pv svg { display: block; width: 100%; height: auto; }
.pv-lights { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-lights .pv-chip { grid-column: 1 / -1; }
.pv-panel { position: relative; display: grid; justify-items: center; align-content: end; gap: 6px; padding: 12px 4px 9px; min-height: 150px; border-radius: var(--r-sm); overflow: hidden; }
.pv-panel span { font: 700 12.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-align: center; position: relative; z-index: 1; }
.pv-store { background: radial-gradient(ellipse at 50% 0, #A9803F, #5E4630 75%); }
.pv-bath { background: radial-gradient(ellipse at 50% 0, #7186A6, #3A4658 75%); }
.pv .pv-tube { display: block; width: 38px; height: auto; }
.pv-chip { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 0 8px; align-items: center; padding: 6px 0; font: 400 13px/1.25 var(--sans); }
.pv-chip i { grid-row: 1 / span 2; width: 20px; height: 20px; background: var(--c); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.pv-chip b { font-weight: 700; font-size: 13px; color: var(--ink); }
.pv-chip code { color: var(--ink-2); }
.pv-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pv-ph { position: relative; display: grid; gap: 8px; padding: 22px 8px 10px; border-radius: 15px; background: #17121B; box-shadow: inset 0 0 0 1.5px rgba(247, 241, 232, .3); min-height: 128px; align-content: start; }
.pv-ph::before { content: ""; position: absolute; top: 7px; left: 50%; width: 22px; height: 5px; border-radius: 9px; background: #07040a; transform: translateX(-50%); }
.pv-ph-n { font: 400 15px/1.1 var(--serif); color: var(--paper); text-align: center; }
.pv-ph-n b { display: block; font-weight: 400; }
.pv-ph-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pv-ph-sw i { height: 22px; background: var(--c); }
.pv-x { grid-column: 1 / -1; margin: 0; text-align: center; font: italic 400 17px/1 var(--serif); color: var(--berry); }
.pv-rail { display: grid; gap: 8px; }
.pv-note { margin: 0; font: italic 400 15px/1.3 var(--serif); color: var(--berry); }
.pv-tag { display: grid; gap: 8px; }
.pv-tag-w { margin: 0; justify-self: start; position: relative; padding: 9px 14px 9px 24px; background: var(--paper-2); color: var(--ink); font: 400 18px/1 var(--serif); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.pv-tag-w::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
.pv-sq { margin: 0; position: relative; min-height: 64px; display: grid; align-items: end; padding: 7px 9px; background: var(--c); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.pv-sq span { justify-self: start; padding: 2px 6px; background: rgba(43, 34, 48, .72); font: 700 12.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #F7F1E8; border-radius: 2px; }
.pv-wall, .pv-strips, .pv-cards { display: grid; gap: 8px; }
.pv-run { display: grid; gap: 2px; }
.pv-run span { font: 700 12.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.pv-wall svg { border-radius: 2px; }
.pv-chart { display: grid; gap: 8px; }
.pv-chart ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
.pv-chart li { display: grid; gap: 2px; justify-items: center; }
.pv-chart i { display: block; width: 100%; height: 44px; background: var(--c); box-shadow: inset 0 0 0 1px var(--line); }
.pv-chart b { font: 400 22px/1 var(--serif); color: var(--graphite); }
.pv-vanish { display: grid; gap: 8px; }
.pv-vanish ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv-vanish li { display: grid; place-items: center; height: 96px; background: var(--g); border-radius: 2px; }
.pv-vanish li i { display: block; width: 62%; height: 54%; background: var(--c); border-radius: 50% 50% 46% 54% / 56% 56% 44% 44%; }
.pv-vanish li.is-gone { box-shadow: inset 0 0 0 1.5px var(--berry); }
.pv-results { display: grid; }
.pv-results ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pv-results li { display: grid; gap: 2px; padding: 10px 10px 11px; background: var(--paper-2); border-left: 3px solid var(--berry); }
.pv-results li span:first-child { font: 700 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.pv-results li b { font: 400 21px/1.1 var(--serif); color: var(--ink); }
.pv-res-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 6px; }
.pv-res-sw i { height: 18px; background: var(--c); }
.pv-invite { display: grid; gap: 8px; }
.pv-card { margin: 0; display: grid; gap: 4px; padding: 16px 12px 18px; text-align: center; background: var(--card); color: var(--ink); border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 18px 20px -14px rgba(43, 34, 48, .35); }
.pv-card span, .pv-card i { font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--berry-2); }
.pv-card b { font: 400 25px/1.05 var(--serif); }
/* the light slider of the Makeup Kit: one slider moves the same lipstick from the store light to the bathroom light */
.pv-lights--slide { display: grid; grid-template-rows: 1fr 1fr auto auto; gap: 8px; }
.js .pv-lights--slide { grid-template-rows: auto auto auto; position: relative; }
.js .pv-lights--slide .pv-panel { grid-area: 1 / 1; min-height: 210px; align-content: end; }
.js .pv-lights--slide .pv-bath { opacity: var(--k, 0); }
.js .pv-lights--slide .pv-store span { opacity: calc(1 - var(--k, 0)); }
.js .pv-lights--slide .pv-bath span { opacity: var(--k, 0); }
.js .pv-lights--slide .pv-panel span { position: absolute; left: 0; right: 0; bottom: 9px; }
.js .pv-lights--slide .pv-tube { width: 46px; margin-bottom: 26px; }
.pv-slide { display: block; margin: 0; }
.pv-slide[hidden] { display: none; }
.pv-slide input { margin: 0; }
.sl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; --fill: 0%; }
.sl-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--berry), var(--berry)) 0 0 / var(--fill) 100% no-repeat, var(--line-2); }
.sl-range::-moz-range-track { height: 2px; background: var(--line-2); }
.sl-range::-moz-range-progress { height: 2px; background: var(--berry); }
.sl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -13px; border-radius: 50%; background: var(--berry); border: 4px solid var(--paper); box-shadow: 0 0 0 1.5px var(--berry); }
.sl-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--berry); border: 4px solid var(--paper); box-shadow: 0 0 0 1.5px var(--berry); }
.sl-range:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; border-radius: 6px; }

/* ---------- is this for you (tools/sales_fit.py): two hairline lists ---------- */
.sh-fit-cols { display: grid; gap: var(--s4) var(--s5); }
.sh-h3 { margin: 0 0 var(--s2); font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sh-fit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sh-fit-list li { position: relative; padding: 14px 0 15px 28px; border-bottom: 1px solid var(--line); font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
.sh-fit-list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--berry); }
.sh-fit-no .sh-fit-list li::before { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.sh-fit-list a { color: var(--ink); font-weight: 600; }
.sh-fit-sample { grid-column: 1 / -1; margin: var(--s2) 0 0; }
.sh-fit-sample .link { min-height: 44px; }
@media (min-width: 720px) { .sh-fit-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- the four $0 (the Phone Palette) ---------- */
.sl-zero .sl-head { margin-bottom: var(--s4); }
.sh-zero-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.sh-zero-grid li { display: grid; gap: 4px; align-content: start; padding: 18px 12px 22px 0; border-bottom: 1px solid var(--line); }
.sh-zero-grid li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.sh-zero-n { font: 400 clamp(52px, 12vw, 88px)/.92 var(--serif); letter-spacing: -.025em; color: var(--ink); }
.sh-zero-grid b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.sh-zero-line { margin: var(--s4) 0 0; max-width: 40ch; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
@media (min-width: 900px) { .sh-zero-grid { grid-template-columns: repeat(4, 1fr); } .sh-zero-grid li, .sh-zero-grid li:nth-child(even) { padding: 22px 16px 26px 20px; border-left: 1px solid var(--line); } .sh-zero-grid li:first-child { padding-left: 0; border-left: 0; } }

/* ---------- the questions: hairline folds, the first one open ---------- */
.sl-q .sl-head h2 { font-size: clamp(34px, 3.8vw, 56px); }
.sl-qas { border-top: 1px solid var(--line); }
.sl-qa { border-bottom: 1px solid var(--line); }
.sl-qa > summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) 0; list-style: none; cursor: pointer; font: 400 clamp(20px, 1.9vw, 25px)/1.2 var(--serif); letter-spacing: -.01em; }
.sl-qa > summary::-webkit-details-marker { display: none; }
.sl-qa > summary::after { content: "+"; justify-self: end; font: 400 26px/1 var(--sans); color: var(--graphite); transition: transform .3s var(--ease); }
.sl-qa[open] > summary::after { transform: rotate(45deg); }
.sl-qa > p { max-width: 58ch; padding: 0 0 var(--s4); font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }
.sl-qa > p + p { margin-top: calc(-1 * var(--s3)); }

/* ---------- the use blocks (tools/sales_use.py): the chips of the product, as plain swatches with their name and HEX ---------- */
.pu-head h2 { max-width: 14ch; }
.pu-chip { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); align-items: center; min-width: 0; }
.pu-sw { display: block; }
.pu-sw i { display: block; height: 56px; border-radius: var(--r-sm); background: var(--c); box-shadow: inset 0 0 0 1px var(--line); }
.pu-chip.is-sheer .pu-sw i { opacity: .38; }
.pu-cn { display: grid; gap: 2px; min-width: 0; }
.pu-cn b { font: 400 21px/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.pu-cn code { color: var(--ink-2); }
.pu-cn small { font: 600 12.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.pu-chips { display: grid; gap: var(--s3); }
/* two ways, side by side from 600px, each under a hairline */
.pu-pair { display: grid; gap: var(--s4); }
.pu-way { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s3); border-top: 1px solid var(--line); min-width: 0; }
.pu-k { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.pu-k span { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--ink-2); }
.pu-t { margin: 0; max-width: 34em; font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }
@media (min-width: 600px) { .pu-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); } }
/* the makeup bag: keep, adapt, replace later */
.pu-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pu-rows > li { display: grid; gap: var(--s2); padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); }
.pu-rows > li > div { display: grid; gap: var(--s3); min-width: 0; }
@media (min-width: 600px) { .pu-rows > li { grid-template-columns: 9em minmax(0, 1fr); column-gap: var(--s4); } .pu-rows .pu-chips { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
/* what is inside, in words */
.pu-in { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pu-in li { display: grid; gap: 4px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.pu-in b { font: 400 22px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.pu-in span { font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
@media (min-width: 640px) { .pu-in li { grid-template-columns: 9em minmax(0, 1fr); column-gap: var(--s4); align-items: baseline; } }
.pu-alone, .pu-bridge, .pu-foot { margin: 0; max-width: 42em; font-size: var(--fs-2); line-height: 1.55; color: var(--ink-2); }
.pu-alone a { color: var(--ink); font-weight: 600; }
.pu-alone .pp-seeit { margin-left: 4px; font-weight: 600; color: var(--berry); white-space: nowrap; }
.pu-bridge .link, .pu-more .link { margin-top: 6px; min-height: 44px; }
.pu-more { display: grid; gap: 2px; margin: 0; }
.pu-more span { font-size: var(--fs-2); line-height: 1.45; color: var(--ink-2); }
.pu-head .pp-fan-wrap { margin: var(--s2) 0 0; }
/* the five first buys of the free shopping list (tools/sales_bands.py first_buys_list), under What is inside on a guide page */
.pu-buys { margin: 0; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.slp .fb-list { margin: calc(-1 * var(--s3)) 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.slp .fb-list li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; }
.slp .fb-list b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.slp .fb-sw { display: grid; gap: 3px; justify-items: start; }
.slp .fb-tile { display: block; width: 52px; height: 32px; background: var(--c, #ddd); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.slp .fb-tile svg { display: block; width: 100%; height: 100%; }
.slp .fb-hex { font: 500 12.5px/1.2 var(--sans); color: var(--graphite); }
@media (max-width: 899px) {   /* five first buys: a rail of swatch cards, not five rows */
  .slp .sp-fb-list { display: flex; gap: 10px; overflow-x: auto; margin: calc(-1 * var(--s3)) calc(-1 * var(--gut)) 0; padding: 4px var(--gut) 10px; border-top: 0; scroll-snap-type: x proximity; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .slp .sp-fb-list::-webkit-scrollbar { display: none; }
  .slp .sp-fb-list li { flex: 0 0 150px; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); scroll-snap-align: start; }
  .slp .sp-fb-list .fb-tile { width: 100%; height: 46px; }
}
/* the owner's note: a berry hairline on its left, its small label */
.pu-note { display: grid; gap: var(--s2); margin: 0; padding: var(--s1) 0 var(--s1) var(--s4); max-width: 40em; border-left: 2px solid var(--berry); }
.pu-note-k { margin: 0; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.pu-note-t { margin: 0; font-size: var(--fs-3); line-height: 1.6; color: var(--ink); }

/* ---------- /shop: the products in a hairline grid, start free ---------- */
.shp-list .sl-head { margin-bottom: var(--s4); }
.shp-grid { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.shp-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "pic top" "pic line" "pic for"; align-content: start; gap: 6px var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.shp-card:hover, .shp-card:focus-visible { color: var(--ink); }
.shp-pic { grid-area: pic; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 5; }
.shp-pic img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 2px; filter: drop-shadow(0 12px 16px rgba(43, 34, 48, .25)); transition: transform .6s var(--ease); }
.shp-pic--phone img { width: 60%; border-radius: 6px; }
.shp-pic--pair img { width: 62%; }
.shp-pic--pair img + img { margin-left: -30%; transform: translateY(-6%); }
.shp-card:hover .shp-pic img:first-child, .shp-card:focus-visible .shp-pic img:first-child { transform: translateY(-6px); }
.shp-top { grid-area: top; display: grid; gap: 4px; }
.shp-name { font: 400 clamp(24px, 2.2vw, 30px)/1.08 var(--serif); letter-spacing: -.015em; transition: color .3s var(--ease); }
.shp-price { font: 600 15px/1.2 var(--sans); color: var(--berry); }
.shp-line { grid-area: line; font-size: var(--fs-2); line-height: 1.5; color: var(--ink); }
.shp-for { grid-area: for; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-2); }
.shp-for b { margin-right: 6px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.shp-card:hover .shp-name, .shp-card:focus-visible .shp-name { color: var(--berry); }
@media (min-width: 720px) {
  .shp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .shp-card { grid-template-columns: 1fr; grid-template-areas: "pic" "top" "line" "for"; gap: 10px; padding: var(--s4) 0 var(--s5); }
  .shp-pic { aspect-ratio: 16 / 10; margin-bottom: var(--s2); }
  .shp-pic img, .shp-pic--phone img, .shp-pic--pair img { width: auto; height: 100%; }
  .shp-pic--pair img + img { margin-left: -12%; }
  .shp-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
}
@media (min-width: 1100px) { .shp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shp-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.shp-links li { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.shp-links a { display: inline-flex; align-items: center; min-height: 44px; font: 400 clamp(22px, 2vw, 28px)/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); text-decoration: none; transition: color .3s var(--ease); }
.shp-links a::after { content: "\2192"; margin-left: 12px; font: 400 20px/1 var(--sans); color: var(--berry); }
.shp-links a:hover, .shp-links a:focus-visible { color: var(--berry); }
.shp-links span { font-size: var(--fs-2); line-height: 1.5; color: var(--ink); }

/* ---------- the close: a dark band, the same button, the real cover ---------- */
.sl-close-grid { display: grid; gap: var(--s5); align-items: center; }
.sl-close h2 { font-size: clamp(38px, 5vw, 76px); line-height: 1; max-width: 14ch; }
.sl-close h2 em { margin-right: .1em; }
.sl-close-p { max-width: 42ch; margin-top: var(--s4); font-size: var(--fs-4); line-height: 1.5; }
.sl-close .sl-cta { margin-top: var(--s5); }
.sl-close .sp-cross, .sl-close .pp-cross { margin: var(--s4) 0 0; max-width: 42em; font-size: var(--fs-2); line-height: 1.55; color: var(--ink-2); }
.sl-close .sp-cross a, .sl-close .pp-cross a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--blush); text-underline-offset: 3px; }
.sl-close-links { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sl-close-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.sl-close-links .link { min-height: 44px; }
.sl-close-pic { margin: 0; justify-self: center; width: min(70vw, 300px); }
.sl-close-pic img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.sl-close-pic .sl-covers { gap: var(--s2); }
.sl-close-pic .sl-covers--2 .sl-cover { width: 50%; }
.sl-close-pic .sl-cover img { border-radius: var(--r-sm); }
@media (min-width: 900px) { .sl-close-grid { grid-template-columns: 8fr 4fr; column-gap: clamp(32px, 5vw, 80px); } .sl-close-pic { justify-self: end; } }
/* the heads-up form in the close, on a card of paper */
.sl-close .signup { --line: rgba(43, 34, 48, .12); --line-2: rgba(43, 34, 48, .24); --graphite: #645766; --ink-2: #4A3C4C; max-width: 560px; margin: var(--s5) 0 0; padding: var(--s4); border: 0; border-radius: var(--r-md); background: var(--card); color: var(--ink); }
.sl-close .signup a { color: var(--berry); }
.sl-close .signup .btn { --fill: var(--ink); --fg2: var(--paper); --ico-bg2: var(--ink); --ico-fg2: var(--paper); }
.sl-close .signup-slot:empty { display: none; }
.pp-headsup[hidden] { display: none; }
/* today, this week, after (the small products) */
.sh-when-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.sh-when-list li { display: grid; gap: 6px; padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); }
.sh-when { margin: 0; font: 600 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.sh-when-list h3 { margin: 0; font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; color: var(--paper); }
.sh-when-list p:not(.sh-when) { margin: 0; font-size: var(--fs-2); line-height: 1.45; color: var(--ink-2); }
@media (min-width: 720px) { .sh-when-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--s4); border-bottom: 1px solid var(--line); } .sh-when-list li { border-bottom: 0; } }
/* the dark close runs straight into the dark footer, with a hairline between them */
.sales-page main + .site-footer .ftr { margin-top: 0; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .js .sh-split.is-wait .sh-after, .js .sh-split.is-wait .sh-split-line { clip-path: none; transform: none; }
  .sl-qa > summary::after, .shp-pic img, .shp-name, .shp-links a, .pp-half { transition: none; }
}
@media print { .sl-bar, .sh-strip-foot { display: none; } }