/* Site: shared overlays and controls (phase 3). Header utilities, the sheet and drawer frames,
   the filter panel, the lightbox and the buy bar; motion tokens (docs/PHASE-3.md 6.3).
   Tokens from site.css. Owned by the site build. No new colors, fonts or radii. Budget 7 KB. */
[data-look="b"]{--ease-out:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-std:cubic-bezier(.4,0,.2,1);--t-1:120ms;--t-2:200ms;--t-3:320ms;--scrim:rgb(58 51 46 / .32)}

/* header: monogram, menu, then Search and Cart. Static: nothing hides or moves on scroll. */
.b-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:30px}
.b-nav{justify-self:end}
.b-util{display:flex;align-items:center;margin-right:-11px}
.b-util a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding-inline:11px;white-space:nowrap}
.b-util a:hover .b-util-word,.b-util-cart:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em}
.b-util .is-here{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em}
.b-util svg{flex:none;display:block}
.b-util-cart[hidden]{display:none}
@container site (max-width:760px){
  .b-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"m u" "n n";align-items:center;row-gap:4px}
  .b-head>.mono-link{grid-area:m}
  .b-util{grid-area:u;justify-self:end}
  .b-util-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .b-nav{grid-area:n;justify-self:stretch;padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
}

/* menu and footer links: a 1px underline drawn in on hover */
.b-nav a,.b-fcols a,.b-fbase a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t-1) var(--ease-out)}
.site .b-nav a,.site .b-nav a:hover{border-bottom:0;padding-block:10px;background-position:0 calc(100% - 6px)}
.b-nav a:hover,.b-nav a.is-here,.b-fcols a:hover,.b-fbase a:hover{background-size:100% 1px;text-decoration:none}
.b-btn{transition:background-color var(--t-1) var(--ease-out)}
.b-btn:not([disabled]):hover{background-color:var(--ink)}
.b-btn:not([disabled]):active{translate:0 1px;transition-duration:60ms}

/* dialogs: CSS only. Sheet from the top (search.css lays it out), drawer from the right. */
.site dialog::backdrop{background:var(--scrim,rgb(58 51 46 / .32));opacity:1;transition:opacity var(--t-2) var(--ease-out),overlay var(--t-2) allow-discrete,display var(--t-2) allow-discrete}
.b-sheet{opacity:1;translate:0 0;transition:opacity 140ms var(--ease-in),translate 140ms var(--ease-in),overlay 140ms allow-discrete,display 140ms allow-discrete}
.b-sheet[open]{transition-duration:var(--t-2);transition-timing-function:var(--ease-out)}
.b-drawer{--gut:clamp(20px,4.5vw,28px);position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;background:var(--ground);color:var(--ink);translate:0 0;transition:translate var(--t-2) var(--ease-in),overlay var(--t-2) allow-discrete,display var(--t-2) allow-discrete}
.b-drawer[open]{display:flex;flex-direction:column;transition-duration:var(--t-3);transition-timing-function:var(--ease-out)}
@starting-style{.b-sheet[open]{opacity:0;translate:0 -12px}.b-drawer[open]{translate:100% 0}.site dialog[open]::backdrop{opacity:0}}
.b-sheet:not([open]){opacity:0;translate:0 -12px}
.b-drawer:not([open]){translate:100% 0}
.site dialog:not([open])::backdrop{opacity:0}
.b-drawer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--gut) 10px;border-bottom:1px solid var(--line)}
.b-drawer-top h2{font-size:30px;outline-offset:6px}
.b-x{background:none;border:0;min-width:44px;min-height:44px;padding:0 4px;margin-right:-4px}
.b-x:hover{text-decoration:underline;text-underline-offset:.4em}
.b-drawer-msg{padding:12px var(--gut) 0;font-size:15px}
.b-drawer-msg:empty{display:none}
.b-drawer-in{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 var(--gut) 24px}
.b-drawer-in[aria-busy="true"]{opacity:.6}

/* lightbox: the photos side by side, native scroll-snap */
.b-lightbox{position:fixed;inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;background:var(--ground);color:var(--ink);opacity:1;transition:opacity var(--t-2) var(--ease-out),overlay var(--t-2) allow-discrete,display var(--t-2) allow-discrete}
.b-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.b-lightbox:not([open]){opacity:0}
@starting-style{.b-lightbox[open]{opacity:0}}
.b-lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px var(--gut)}
.b-lb-top div{display:flex;gap:4px;align-items:center}
.b-lb-top button{background:none;border:0;min-width:44px;min-height:44px;padding:0 10px}
.b-lb-n{font-variant-numeric:lining-nums tabular-nums}
.b-lb-strip{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.b-lb-strip figure{scroll-snap-align:center;display:grid;place-items:center;padding:0 var(--gut) var(--gut);min-height:0}
.b-lb-strip img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 80px);object-fit:contain}

/* sort and filter panel */
.b-filter>summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.b-filter>summary::-webkit-details-marker{display:none}
.b-filter>summary::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -3px;transition:rotate var(--t-2) var(--ease-std)}
.b-filter[open]>summary::after{rotate:225deg;translate:0 2px}
.b-filter-form{animation:b-fade var(--t-2) var(--ease-out)}
@keyframes b-fade{from{opacity:0}}

/* buy bar (phones): opacity only */
.b-buybar{position:fixed;inset:auto 0 0;z-index:5;display:none;align-items:center;gap:14px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--ground);border-top:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity var(--t-2) var(--ease-std),visibility var(--t-2) allow-discrete}
.b-buybar.is-on{opacity:1;visibility:visible}
.b-buybar p{flex:1;min-width:0;display:grid;font-size:14px;line-height:1.3}
.b-buybar b{font-family:var(--display);font-weight:300;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-buybar .b-btn{padding-inline:20px;min-height:44px}
@container site (max-width:760px){.b-buybar{display:flex}}

@media (forced-colors:active){.b-drawer,.b-lightbox,.b-buybar,.b-sheet{border:1px solid CanvasText}}
@media (prefers-reduced-motion:reduce){.site *,.site *::before,.site *::after,.site ::backdrop{transition:none!important;animation:none!important}}