/* Palette Girlies, sales.css (V2 paper, nov 2026): what only the guide pages and the manual have (/guides, /guides/<season>, /manual). Built by tools/sales_pages.py, moved by site/js/sales.js
   and site/js/shop.js. Loaded after site/css/shop.css (the hero, the tour, the split screens, the use blocks, the questions and the close are there); everything here is these pages' own:
   the control that picks the real page of her skin or her day (with the notes side by side without JavaScript), and the 12 seasons of /guides. Motion is transform and opacity only. */

.nw { white-space: nowrap; }

/* the real page as a sheet of paper (the notes and the skin control) */
.sp-page { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.sp-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); }
.sp-page figcaption { font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }

/* ---------- a page for your skin (on /manual, for your day): chips, then the real page and what it says ---------- */
.sp-depth-ui[hidden] { display: none; }
.sp-skins { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sp-circ { padding-left: 10px; }
.sp-circ::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--g, #ccc); box-shadow: inset 0 0 0 1px var(--line-2); }   /* a step of the gray scale, never a skin tone */
.sp-skin-chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; }
.sp-skin-chip[aria-selected="true"].sp-circ::before { box-shadow: 0 0 0 1.5px var(--paper); }
.sp-skin-panel { display: grid; gap: var(--s4); margin-top: var(--s4); align-items: start; }
.sp-skin-panel .sp-page { width: min(62vw, 250px); }
.sp-skin-text { display: grid; gap: var(--s3); align-content: start; max-width: 34em; }
.sp-skin-text p { margin: 0; color: var(--ink); }
.sp-skin-text .sp-note-w, .sp-skin-text .sp-note-f { padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-3); line-height: 1.5; color: var(--ink); }
.sp-skin-also { font: italic 400 17px/1.4 var(--sans); color: var(--berry); }
.sp-skin-panel.is-new .sp-page { animation: sp-slide .6s var(--ease) both; }
.sp-skin-panel.is-new .sp-skin-text { animation: sp-slide .6s var(--ease) .06s both; }
@keyframes sp-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.sp-depth-live .sp-notes, .sp-depth-live .sp-foot { display: none; }
.sp-skin-levels { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sp-skin-formula { display: grid; gap: var(--s2); }
.sp-skin-notes { border-top: 1px solid var(--line); }
.sp-skin-notes summary { min-height: 44px; padding: 12px 0; list-style: none; font: 600 15px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.sp-skin-notes summary::-webkit-details-marker { display: none; }
.sp-skin-notes-in { display: grid; gap: var(--s2); padding-bottom: var(--s3); }
.sp-skin-notes-in p { margin: 0; font-size: var(--fs-2); line-height: 1.45; }
.sp-skin-text b, .sp-note b { display: block; margin-bottom: 2px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
@media (min-width: 760px) { .sp-skin-panel { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s5); } .sp-skin-panel .sp-page { width: 100%; } }
/* the notes side by side (no JavaScript, reduced motion) */
.sp-notes { display: grid; gap: var(--s4); }
.sp-note { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s3); border-top: 1px solid var(--line); }
.sp-chip { justify-self: start; font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.sp-note .sp-page { max-width: 220px; }
.sp-note-w, .sp-note-f, .sp-note-x { margin: 0; font-size: var(--fs-2); line-height: 1.45; color: var(--ink); }
.sp-note-x { font-style: italic; color: var(--ink-2); }
.sp-foot { margin: 0; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
.sp-depth .sl-cta { margin-top: var(--s2); }
@media (min-width: 720px) { .sp-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sp-depth--manual .sp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-depth--manual .sp-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- /guides: the 12 seasons, a free test card first ---------- */
.sl-pick .sl-head { margin-bottom: var(--s4); }
.sp-picks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.sp-pick a { display: grid; gap: var(--s2); align-content: start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sp-pick-strip { display: flex; height: 40px; overflow: hidden; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.sp-pick-strip i { flex: 1; background: var(--c); }
.sp-pick-n { font: 400 clamp(24px, 2.2vw, 30px)/1.05 var(--serif); letter-spacing: -.015em; transition: color .3s var(--ease); }
.sp-pick-l { font-size: var(--fs-2); line-height: 1.4; color: var(--ink-2); }
.sp-pick-l:empty { display: none; }
.sp-pick-k { font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.sp-pick a:hover .sp-pick-n, .sp-pick a:focus-visible .sp-pick-n, .sp-pick.is-yours .sp-pick-n { color: var(--berry); }
@media (min-width: 720px) {
  .sp-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .sp-pick--test { grid-column: 1 / -1; }
  .sp-pick--test a { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px var(--s4); }
}
@media (min-width: 1100px) { .sp-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sp-pick-strip { height: 56px; } }

.sp-cross { margin: 0; max-width: 42em; font-size: var(--fs-2); line-height: 1.55; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .sp-skin-panel.is-new .sp-page, .sp-skin-panel.is-new .sp-skin-text { animation: none; }
  .sp-pick-n { transition: none; }
}