/* SA-MOO-RAI — site styles: white, one mono typeface, objects only, labels instead of copy. */
:root{
  --ink:#000;
  --grey:#A3A3A3;
  --line:#E6E6E6;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.02em;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img,video,iframe{display:block;max-width:100%}
button{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{flex:1}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:52px;padding:0 20px;background:#fff}
.ico{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;margin-left:-6px}
.ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;transition:transform .25s ease}
.plus[aria-expanded="true"] svg{transform:rotate(45deg)}
.logo{justify-self:end;display:block}
.logo img{width:34px}
.logo:hover img,.logo:focus-visible img{animation:walk .72s steps(1,end)}
@keyframes walk{
  0%,100%{transform:none}
  8.33%,91.67%{transform:translate(-1px,-1px)}
  16.67%,83.33%{transform:translate(-2px,0)}
  25%,75%{transform:translate(-3px,-1px)}
  33.33%,66.67%{transform:translate(-4px,0)}
  41.67%,58.33%{transform:translate(-5px,-1px)}
  50%{transform:translate(-6px,0)}
}
.filter{display:flex;gap:20px}
.filter button{all:unset;cursor:pointer;color:var(--ink)}
.filter.on button{color:var(--grey)}
.filter.on button[aria-pressed="true"],.filter button:hover{color:var(--ink)}

/* ---------- menu ---------- */
.menu{position:fixed;inset:52px 0 0 0;z-index:19;background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:14px}
.menu a:hover{color:var(--grey)}

/* ---------- home grid ---------- */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 20px;padding:36px 20px 120px}
.item{display:flex;flex-direction:column;align-items:center;gap:14px}
.item .ob{width:100%;aspect-ratio:1;display:grid;place-items:center}
.item .ob img{width:58%;border-radius:22%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.item:hover .ob img{transform:scale(1.04)}
.item .cd{height:19px;overflow:hidden;text-align:center}
.item .cd span{display:block;height:19px;line-height:19px;white-space:nowrap;transition:transform .25s ease}
.item:focus-visible .cd span{transform:translateY(-19px)}
@media (hover:hover){ .item:hover .cd span{transform:translateY(-19px)} }

/* ---------- product page ---------- */
.pdp{display:flex;flex-direction:column;align-items:center;padding:8px 20px 80px}
.car{position:relative;width:100%;height:min(58vh,600px);min-height:280px}
.car-sl{position:absolute;inset:0;margin:0;display:grid;grid-template:100%/100%;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.car-sl.on{opacity:1;visibility:visible}
.car-sl img,.car-sl video{max-width:min(100%,900px);max-height:100%;object-fit:contain}
.car-sl img.ic{height:56%;width:auto;max-height:340px;border-radius:22%}
.car-sl img.tall,.car-sl video.tall{height:100%}
.car-arr{all:unset;cursor:pointer;position:absolute;top:50%;z-index:2;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center}
.car-arr svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}
.car-arr.prev{left:calc(50% - min(40vw,520px))}
.car-arr.next{right:calc(50% - min(40vw,520px))}
.car-dots{display:flex;gap:5px;justify-content:center;margin:22px 0 6px;min-height:4px}
.car-dots i{width:4px;height:4px;border-radius:50%;background:#D4D4D4}
.car-dots i.on{background:var(--ink)}
.pdp-title{font:inherit;margin:4px 0 0}
.pdp-sub{margin:14px 0 0}
.buy{display:flex;flex-direction:column;align-items:center;width:min(330px,100%);margin-top:28px}
.opts{display:flex;justify-content:space-between;width:100%;gap:12px}
.opts.one{justify-content:center}
.opts a{padding:4px 0;border-bottom:1px solid transparent}
.opts a:hover{border-color:var(--ink)}
.info{width:min(560px,100%);margin-top:34px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.info .lines p{margin:0}
.info .desc{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.7;margin:0}
.info .desc a{text-decoration:underline;text-underline-offset:3px}
.info .feat{display:flex;flex-direction:column;gap:14px;width:100%;border-top:1px solid var(--line);padding-top:18px}
.info .feat p{margin:0}
.info .feat span{display:block;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.7;color:#4A4A4A}
.info .vid{width:100%;aspect-ratio:16/9;border:0}
.info .legal{display:flex;gap:20px;justify-content:center;color:var(--grey)}
.info .legal a:hover{color:var(--ink)}

/* ---------- text pages ---------- */
.doc{width:min(680px,100%);margin:0 auto;padding:28px 20px 100px}
.doc h1{font:inherit;text-align:center;margin:0 0 44px}
.doc h2,.doc h3{font:inherit;margin:34px 0 10px}
.doc p,.doc li{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.75;margin:0 0 12px}
.doc ul,.doc ol{padding-left:20px;margin:0 0 12px}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc strong{font-weight:500}
.doc .meta{color:var(--grey);text-align:center;margin:-30px 0 44px;text-transform:uppercase;letter-spacing:.02em;font-size:12px}
.doc details{border-top:1px solid var(--line)}
.doc details:last-of-type{border-bottom:1px solid var(--line)}
.doc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0}
.doc summary::-webkit-details-marker{display:none}
.doc summary::after{content:"+";flex:none}
.doc details[open] summary::after{content:"×"}
.doc details>div{padding:0 0 18px}
.doc details h3{margin:10px 0 8px;color:var(--grey)}
.form{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.form label{display:block}
.form input{width:100%;font:400 13px/1 var(--mono);padding:14px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;outline:0}
.form input::placeholder{color:var(--grey)}
.form button{all:unset;cursor:pointer;text-align:center;background:var(--ink);color:#fff;padding:15px 0 14px;margin-top:10px}
.form button:hover{background:#333}
.note{margin-top:18px;text-align:center;display:none}
.note.show{display:block}
.note.err{color:#B00020}

/* ---------- footer ---------- */
.foot{padding:40px 20px 28px;text-align:center;color:var(--grey);font-size:11px}
.foot p{margin:0}
.foot p+p{margin-top:4px}

@media (max-width:999px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .top{padding:0 16px;height:48px}
  .menu{inset:48px 0 0 0;padding:20px 16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 12px;padding:20px 16px 90px}
  .pdp{padding:4px 16px 60px}
  .car{height:52svh;min-height:240px}
  .car-arr.prev{left:-8px}.car-arr.next{right:-8px}
  .car-sl img,.car-sl video{max-width:calc(100% - 48px)}
  .doc{padding:20px 16px 80px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}