.hero-banner .petals{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden}
.hero-banner .petal{
  position:absolute; top:-10%; will-change:transform;
  width:var(--w,15px); height:calc(var(--w,15px) * 1.42);
  border-radius:58% 42% 60% 40% / 64% 40% 60% 36%;
  background:linear-gradient(142deg, rgba(248,206,220,.95), rgba(234,158,187,.62));
  box-shadow:inset 0 0 5px rgba(214,132,166,.22);
  opacity:0;
}
.hero-banner .glint{
  position:absolute; pointer-events:none;
  width:var(--w,10px); height:var(--w,10px); opacity:.5;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95), transparent 70%),
    conic-gradient(from 0deg, transparent 0 6%, rgba(255,255,255,.85) 12%, transparent 18% 31%,
                   rgba(255,255,255,.85) 37%, transparent 43% 56%, rgba(255,255,255,.85) 62%,
                   transparent 68% 81%, rgba(255,255,255,.85) 87%, transparent 93%);
}
@media (prefers-reduced-motion:no-preference){
  .hero-banner .petal{animation:petalFall var(--dur,17s) linear var(--delay,0s) infinite}
  .hero-banner .glint{animation:glintPulse 4.5s ease-in-out var(--delay,0s) infinite}
}
@media (prefers-reduced-motion:reduce){ .hero-banner .petal{opacity:.5; top:var(--rest,20%)} }

.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:clamp(12px,1.6vw,18px) 0; margin-bottom:clamp(14px,2vw,24px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tool-btn{
  display:inline-flex; align-items:center; gap:11px;
  font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--cocoa);
  padding:6px 2px; transition:color .3s;
}
.tool-btn:hover{color:var(--ink)}
.tool-btn svg{color:var(--terra); flex:none}
.sort{position:relative}
.sort-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40; min-width:210px;
  background:var(--cream); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 16px 34px rgba(120,84,104,.16); padding:6px 0; margin:0; list-style:none;
}
.sort-menu[hidden]{display:none}
.sort-menu button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 16px; font-size:13px; color:var(--cocoa); text-align:left; transition:background .25s, color .25s;
}
.sort-menu button:hover{background:var(--tile-2); color:var(--ink)}
.sort-menu button[aria-checked="true"]{background:var(--tile); color:var(--ink)}
.sort-menu button svg{opacity:0; flex:none; color:var(--plum-num)}
.sort-menu button[aria-checked="true"] svg{opacity:1}

.scrim{position:fixed; inset:0; z-index:95; background:rgba(45,32,44,.34); opacity:0; transition:opacity .35s}
.scrim[hidden]{display:none}
.scrim.is-on{opacity:1}
.filter-drawer{
  position:fixed; left:0; top:0; bottom:0; z-index:96; width:min(88vw,352px);
  background:var(--cream); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.filter-drawer[hidden]{display:none}
.filter-drawer.is-on{transform:none}
.filter-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(20px,3vw,30px) clamp(18px,2.6vw,28px);
  border-bottom:1px solid var(--line);
}
.filter-drawer-head h2{margin:0; font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.filter-drawer-close{padding:6px; color:var(--cocoa); transition:color .3s}
.filter-drawer-close:hover{color:var(--ink)}
.filter-drawer-body{flex:1; overflow:auto; padding:clamp(18px,2.6vw,26px) clamp(18px,2.6vw,28px)}
.fgroup{border:0; padding:0; margin:0; min-width:0}
.fgroup + .fgroup{margin-top:clamp(20px,3vw,30px); padding-top:clamp(20px,3vw,30px); border-top:1px solid var(--line)}
.fgroup h3{margin:0 0 clamp(12px,1.8vw,18px); font-family:var(--sans); font-weight:400; font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--cocoa)}
.fgroup label{display:flex; align-items:center; gap:14px; padding:9px 0; font-size:14px; color:var(--cocoa); cursor:pointer; transition:color .25s}
.fgroup label:hover{color:var(--ink)}
.fgroup input{width:16px; height:16px; accent-color:var(--plum-num); flex:none}
.filter-drawer-foot{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:clamp(16px,2.4vw,24px) clamp(18px,2.6vw,28px); border-top:1px solid var(--line)}
.filter-drawer-foot button{
  padding:14px; border-radius:2px; font-size:10px; letter-spacing:.17em; text-transform:uppercase;
  transition:background .3s, color .3s;
}
.btn-ghost{border:1px solid var(--ink); color:var(--ink)}
.btn-ghost:hover{background:var(--tile)}
.btn-solid{background:var(--ink); color:var(--cream)}
.btn-solid:hover{background:var(--cocoa)}
@media (prefers-reduced-motion:reduce){ .filter-drawer{transition:none} .scrim{transition:none} }

.no-results{margin:clamp(24px,4vw,48px) 0; text-align:center; color:var(--muted); font-size:14px}
.no-results[hidden]{display:none}
.products-coll .card[hidden]{display:none}

.products-coll .card{
  z-index:1;
  transition:box-shadow .45s cubic-bezier(.2,.8,.3,1), transform .45s cubic-bezier(.2,.8,.3,1);
}
@media (hover:hover) and (pointer:fine){
  .products-coll .card:hover,
  .products-coll .card:focus-within{
    z-index:3;
    transform:translateY(-12px) scale(1.025);
    box-shadow:0 26px 54px rgba(120,84,104,.24), 0 6px 14px rgba(120,84,104,.10);
  }
  .products-coll .card:hover .card-alt,
  .products-coll .card:focus-within .card-alt{opacity:1; transform:scale(1)}
  .products-coll .card:hover .card-fig,
  .products-coll .card:focus-within .card-fig,
  .products-coll .card:hover .card-body,
  .products-coll .card:focus-within .card-body{opacity:0}
  .products-coll .card:hover .card-more,
  .products-coll .card:focus-within .card-more{opacity:1; transform:none}
  .products-coll .card:hover .card-more svg{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .products-coll .card{transition:none}
  .products-coll .card:hover,
  .products-coll .card:focus-within{transform:none}
}
.card-flag{z-index:4}

.card-more{
  position:absolute; left:50%; bottom:clamp(18px,3vw,34px); translate:-50% 0; z-index:5;
  display:none; align-items:center; gap:12px; white-space:nowrap;
  padding:13px 26px; border-radius:2px;
  background:var(--ink); color:var(--cream);
  font-size:10px; letter-spacing:.19em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .45s ease;
  pointer-events:none;
}
.card-more svg{transition:transform .35s ease}
@media (hover:hover) and (pointer:fine){
  .card-more{display:inline-flex}
}
.card-fig .card-shot{max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain}