/*
  ENGINE CSS, v4: structure the behaviours depend on (media boxes, gallery, rails, layers, header peekaboo, the page
  wipe, image fades, buy bar, focus, reduced motion). Colours, type and spacing come only from skin tokens.
*/
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1[tabindex="-1"]:focus, main:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 8px; }
main { display: block; min-height: 60vh; }
html.has-layer { overflow: hidden; }
[hidden] { display: none !important; }

/* header: sticky, peekaboo by transform (150 ms) */
.site-header { position: sticky; top: calc(-1 * var(--util)); z-index: 40; view-transition-name: site-header;
  transition: transform var(--d1) var(--ease-ui); }
.site-header.is-hidden { transform: translateY(-100%); }

/* media boxes: ratio locked, no layout shift */
.media { position: relative; display: block; aspect-ratio: var(--media-ar); overflow: hidden; background: var(--plate); max-width: 100%; }
.media-a, .media-b { position: absolute; inset: 0; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-b { opacity: 0; transition: opacity var(--d2) var(--ease-ui); }
@media (hover: hover) { a:hover .media.has-alt .media-b { opacity: 1; } }
/* image fades on load (motion.js marks images that are not decoded yet) */
img { transition: opacity var(--d3) var(--ease-ui); }
img[data-fade] { opacity: 0; }

/* rails */
.rail { position: relative; }
.rail-track { --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--edge) - 2 * var(--col-gap)) / 3);
  gap: var(--col-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: var(--edge); scroll-padding-inline: var(--edge); scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-item { scroll-snap-align: start; min-width: 0; }
.rail-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail-track.is-dragging a { pointer-events: none; }
@media (max-width: 959px) { .rail-track { grid-auto-columns: 44%; } }
@media (max-width: 599px) { .rail-track { grid-auto-columns: 72%; } }

/* gallery: one carousel with a thumbnail rail at every width */
.gal { --gal-mode: carousel; display: grid; gap: 8px; min-width: 0; }
.gal-stage { position: relative; min-width: 0; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline-offset: -2px; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; min-width: 0; }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gal-thumb { flex: 0 0 60px; padding: 0; border: 0; background: none; position: relative; }
.gal-thumb .media { pointer-events: none; }
.gal.is-single .gal-ui, .gal.is-single .gal-thumbs { display: none; }

/* layers: scrim, drawers, sheets, viewer */
.scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--d2) linear; }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--paper);
  transform: translateX(101%); transition: transform var(--d2) var(--ease-ui); }
.drawer.is-open { transform: none; }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.viewer { position: fixed; inset: 0; background: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 0; transition: opacity var(--d2) linear; }
.viewer.is-open { opacity: 1; }
.viewer-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; background: var(--plate); }
.viewer.is-zoomed .viewer-stage { cursor: grab; }
.viewer-media { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; transform-origin: 50% 50%; }
.viewer-media img { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; }
.viewer-media.is-plate { position: absolute; }

/* phone buy bar */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; transform: translateY(110%); transition: transform var(--d2) var(--ease-ui); }
.buybar.is-visible { transform: none; }
@media (min-width: 960px) { .buybar { display: none; } }

/* the stepped wipe: one 2:1 edge crosses the frame left to right (dx = dy / 2), 400 ms, the mark's curve */
@keyframes xh-wipe {
  from { clip-path: polygon(0 0, 0 0, -50vh 100%, 0 100%); }
  to { clip-path: polygon(0 0, calc(100% + 50vh) 0, 100% 100%, 0 100%); }
}
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: xh-wipe var(--d3) var(--ease-mark) both; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Public collection preview retains browsing and a saved bag while payment is unavailable. */
.checkout-notice{margin:0;padding:10px 20px;background:#ebe9e1;color:#272723;text-align:center;font-size:12px;line-height:1.5;border-top:1px solid currentColor}
.pill:disabled,.btn-buy:disabled{cursor:not-allowed;opacity:.55}
html:has(.checkout-notice) .g-pdp-info{top:calc(var(--hdr) + 64px)}