/* /picks — affiliate recommendations: collections (details) → groups → product cards. Visual, box-based, calm. */
.picks { width: min(100% - 2 * var(--gutter), 1080px); margin: 0 auto; padding: var(--s-7) 0 var(--s-9); display: grid; gap: var(--s-5); }
.picks__head { text-align: center; display: grid; justify-items: center; gap: var(--s-3); }
.picks__head h1 { margin: 0; font-size: var(--fs-3xl); max-width: 16ch; }
.picks__lede { margin: 0; color: var(--text-2); max-width: 46ch; }
.picks__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--s-2); }
.pk-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--text-2); transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
.pk-chip:hover, .pk-chip[aria-current] { background: var(--moon); color: var(--on-moon); border-color: var(--moon); }
.picks__note { margin: 0 auto; max-width: 70ch; text-align: center; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }

/* Collection: a closed card with a cover, a peek of what's inside and a gentle call to open it */
.pk-col { border-radius: 32px; border: 1px solid var(--line); background: var(--surface); overflow: clip; scroll-margin-top: 90px; transition: border-color var(--t-base), box-shadow var(--t-slow); }
.pk-col:not([open]):hover { border-color: var(--line-2); box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.pk-col__head { display: block; list-style: none; cursor: pointer; }
.pk-col__head::-webkit-details-marker { display: none; }
.pk-cover { display: block; aspect-ratio: 21 / 9; overflow: hidden; background: var(--surface-2); }
.pk-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.pk-col__head:hover .pk-cover img { transform: scale(1.03); }
.pk-cover--plain { display: flex; align-items: flex-end; justify-content: center; gap: clamp(5px, 1vw, 9px); padding: clamp(18px, 4vw, 34px) clamp(16px, 4vw, 40px) 0;
  background: radial-gradient(90% 120% at 30% 0%, color-mix(in srgb, var(--moon) 14%, transparent), transparent 60%), linear-gradient(170deg, #2a231b, #150b05); }
.pk-cover--plain i { flex: 0 1 clamp(14px, 3.4vw, 30px); height: calc(var(--ht) * 1%); border-radius: 4px 4px 0 0; background: linear-gradient(90deg, hsl(var(--h) 26% 34%), hsl(var(--h) 24% 24%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transform-origin: bottom; transition: transform 1.2s var(--ease-out); }
.pk-col__head:hover .pk-cover--plain i:nth-child(odd) { transform: translateY(-5px); }
.pk-col__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding: var(--s-4) clamp(var(--s-4), 4vw, var(--s-6)); }
.pk-col__txt { display: grid; gap: 6px; flex: 1 1 260px; min-width: 0; }
.pk-col__txt .eyebrow { margin: 0; }
.pk-col__title { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; color: var(--text); letter-spacing: var(--tracking-display); font-weight: var(--fw-display); }

/* What's inside: little pictures that appear one by one when the card comes into view, and fan out on hover */
.pk-peek { display: flex; align-items: center; }
.pk-peek img, .pk-peek i { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; margin-left: -12px; box-shadow: 0 0 0 2px var(--surface); background: hsl(var(--h, 30) 24% 28%); opacity: 0; transform: translateX(-10px);
  transition: margin-left var(--t-slow) var(--ease-out); }
.pk-peek > :first-child { margin-left: 0; }
.pk-peek b { margin-left: 10px; font: 500 12px/1 var(--font-mono); color: var(--text-2); opacity: 0; transition: opacity 1s var(--t-base) .9s; }
.pk-col.is-in .pk-peek img, .pk-col.is-in .pk-peek i { animation: pk-in 1.1s var(--ease-out) forwards; animation-delay: calc(.35s + var(--n, 0) * .2s); }
.pk-col.is-in .pk-peek b { opacity: 1; }
.pk-col__head:hover .pk-peek img, .pk-col__head:hover .pk-peek i { margin-left: -2px; }
.pk-col__head:hover .pk-peek > :first-child { margin-left: 0; }
@keyframes pk-in { to { opacity: 1; transform: none; } }
.no-js .pk-peek img, .no-js .pk-peek i, .no-js .pk-peek b { opacity: 1; transform: none; }

/* Call to open */
.pk-col__cta { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.pk-cta { font: 500 12px/1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--moon); }
.pk-cta--open { display: none; color: var(--text-2); }
.pk-col[open] .pk-cta--open { display: inline; } .pk-col[open] .pk-cta--closed { display: none; }
.pk-col__chev { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--moon); position: relative; transition: transform var(--t-base) var(--ease-out), background var(--t-base); }
.pk-col__chev::before { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-right: 1.5px solid var(--moon); border-bottom: 1.5px solid var(--moon); transform: translateY(-2px) rotate(45deg); }
.pk-col[open] .pk-col__chev { transform: rotate(180deg); border-color: var(--line-2); }
.pk-col[open] .pk-col__chev::before { border-color: var(--text-2); }
.pk-col__head:hover .pk-col__chev { background: color-mix(in srgb, var(--moon) 12%, transparent); }
.pk-col.is-in:not([open]) .pk-col__chev { animation: pk-nudge 3.2s var(--ease-in-out) 1.8s 3; }
@keyframes pk-nudge { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .pk-peek img, .pk-peek i, .pk-peek b { opacity: 1; transform: none; animation: none !important; }
  .pk-col.is-in:not([open]) .pk-col__chev { animation: none; }
}
@media (max-width: 560px) { .pk-cover { aspect-ratio: 16 / 10; } .pk-cta--closed { font-size: 11px; } }

.pk-col__body { padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-6)) var(--s-6); display: grid; gap: var(--s-6); }
.pk-col__intro { margin: 0 auto; max-width: 62ch; text-align: center; color: var(--text-2); font-size: var(--fs-md); line-height: 1.65; }

/* Group — the title is the signpost: big, centered, with a little rule under it */
.pk-group { display: grid; gap: var(--s-3); }
.pk-group__title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); line-height: 1.1; color: var(--text); letter-spacing: var(--tracking-display); text-transform: none; }
.pk-group__title::after { content: ""; display: block; width: 44px; height: 2px; margin: 14px auto 0; border-radius: 2px; background: var(--moon); }
.pk-group__why { margin: 0 auto var(--s-3); max-width: 56ch; text-align: center; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.picks__back { text-align: center; margin: 0; }
.picks__back a { color: var(--text-2); font-size: var(--fs-sm); }

.picks__note--end { margin-top: var(--s-7); }