/* shopby.css — the "Shop by" system: header dropdown (every page), drawer group, the shop-by page
   (lens tabs · value chips · filtered cards) and the collection header's shop-by row.
   Mobile-first. MOTION LAW (2026-09-29): transform/opacity only, ≤400ms ease-out, every effect inside the
   no-preference block at the end. Components (.card .cards-5 .cta .page-hero) come from site.css; tokens from tokens.css.
   Tap targets in px on purpose (a finger is a physical measure; see mobile.css). */

/* ── header dropdown ── */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-btn{display:inline-flex;align-items:center;gap:.35rem;background:none;border:none;cursor:pointer;color:var(--ink);
  font:inherit;font-size:var(--fs-label);letter-spacing:var(--track-nav);text-transform:uppercase;padding:0}
.nav-dd-btn svg{width:.7rem;height:.7rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-dd:hover .nav-dd-btn,.nav-dd.open .nav-dd-btn{color:var(--brand)}
.nav-dd.open .nav-dd-btn svg,.nav-dd:hover .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:100%;left:50%;min-width:11rem;padding:.6rem 0;margin-top:1rem;z-index:60;
  background:var(--bg);border:0.0625rem solid var(--line);box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translate(-50%,-.4rem);pointer-events:none}
.nav-dd-menu::before{content:'';position:absolute;left:0;right:0;top:-1rem;height:1rem}   /* hover bridge: the gap never closes the menu */
.nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{
  visibility:visible;opacity:1;transform:translate(-50%,0);pointer-events:auto}
.nav-dd-menu a{display:block;padding:.55rem 1.25rem;min-height:44px;line-height:1.6;white-space:nowrap;
  font-size:var(--fs-small);letter-spacing:.02em;text-transform:none;color:var(--ink)}
.nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{color:var(--brand)}
.nav-dd-menu a span{color:var(--ink-soft);font-size:var(--fs-label);margin-left:.4rem}

/* ── drawer group (the same five links inside the mobile menu) ── */
.drawer-group{border-bottom:0.0625rem solid var(--line);padding:.9rem 0}
.drawer-group-head{font-family:var(--font-display);font-size:1rem;letter-spacing:.02em;color:var(--ink-deep);margin-bottom:.35rem}
.drawer-nav .drawer-group a{border:none;padding:.5rem 0 .5rem 1rem;font-size:.9rem;color:var(--ink);min-height:44px;display:flex;align-items:center}

/* ── the shop-by page ── */
.shopby{max-width:var(--max-w);margin:0 auto;padding:var(--s4) var(--pad-x) 0;display:flex;flex-direction:column;gap:var(--s3)}
.lens-bar{display:flex;gap:0;overflow-x:auto;border-bottom:0.0625rem solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lens-bar::-webkit-scrollbar{display:none}
.lens-tab{position:relative;flex:none;background:none;border:none;cursor:pointer;color:var(--ink-soft);font:inherit;
  font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;padding:.9rem 1rem;min-height:44px}
.lens-tab::after{content:'';position:absolute;left:1rem;right:1rem;bottom:-0.0625rem;height:0.125rem;background:var(--brand);
  transform:scaleX(0);transform-origin:left}
.lens-tab:hover{color:var(--ink-deep)}
.lens-tab[aria-selected="true"]{color:var(--brand)}
.lens-tab[aria-selected="true"]::after{transform:scaleX(1)}
.lens-panel{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--ink);border:0.0625rem solid var(--ink);font:inherit;font-size:var(--fs-small);line-height:1}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip-soft{border-color:var(--line);color:var(--ink-soft)}
.chip-sub{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-left:.6rem;margin-left:.2rem;border-left:0.0625rem solid var(--line)}
.chip-sub-k{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--stone)}
.chip-clear{background:none;border:none;cursor:pointer;color:var(--ink-soft);font:inherit;font-size:var(--fs-small);min-height:44px;padding:0 .6rem;
  text-decoration:underline;text-underline-offset:.2em}
.chip-clear:hover{color:var(--brand)}
.lens-note{flex:0 0 100%;font-size:var(--fs-small);line-height:1.7;color:var(--ink-deep);margin-top:.2rem}

/* cards: dim what misses the pick; the active lens's tags show on each card, picked ones lit */
.shopby-cards .card.dim{opacity:.25;transform:scale(.98)}
.shopby-cards .card.dim:hover{opacity:.6;transform:none}
.card-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag-set{display:contents}
.tag-set i{font-style:normal;font-size:var(--fs-label);letter-spacing:.04em;padding:.15rem .55rem;border-radius:999px;
  border:0.0625rem solid var(--line);color:var(--ink-soft)}
.tag-set i.on{background:var(--brand);border-color:var(--brand);color:#fff}
.shopby-finder{font-size:var(--fs-small);color:var(--ink-soft);padding-bottom:var(--s3)}
.shopby-finder a{color:var(--ink-deep);text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:12px 0;margin:-12px 0}
.shopby-finder a:hover{color:var(--brand)}

/* collection header: five deep links, one line */
.page-shopby{margin:var(--s3) auto 0;font-size:var(--fs-small);color:var(--ink-soft)}
.page-shopby a{color:var(--ink-deep);text-decoration:underline;text-underline-offset:.2em;display:inline-block;padding:10px 0;margin:-10px 0}
.page-shopby a:hover{color:var(--brand)}

@media (min-width:53.76rem){
  .shopby{padding-top:var(--s5);gap:var(--s4)}
  .lens-bar{overflow:visible;justify-content:center}
  .lens-panel{justify-content:center}
  .lens-note{text-align:center;padding:0 18%}
  .shopby-finder{text-align:center}
}
/* ── motion: the eight effects, only for people who have not asked for less (was: bare + a reduce override) ── */
@media (prefers-reduced-motion: no-preference){
  .nav-dd-btn svg{transition:transform var(--dur-2) var(--ease-out)}
  .nav-dd-menu{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{transition-delay:0s}
  .lens-tab{transition:color var(--dur-2) ease}
  .lens-tab::after{transition:transform var(--dur-2) var(--ease-out)}
  .chip{transition:background-color var(--dur-2) ease,color var(--dur-2) ease,border-color var(--dur-2) ease,transform var(--dur-1) var(--ease-out)}
  .shopby-cards .card{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),border-color var(--dur-2) ease,box-shadow var(--dur-2) var(--ease-out)}
  .tag-set i{transition:background-color var(--dur-2) ease,color var(--dur-2) ease,border-color var(--dur-2) ease}
}
@media (prefers-reduced-motion: reduce){
  .shopby-cards .card.dim{transform:none}
}