*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { scroll-behavior: smooth; }
html::-webkit-scrollbar { width: var(--wm-scrollbar-w); }
html::-webkit-scrollbar-track { background: var(--wm-scrollbar-track); }
html::-webkit-scrollbar-thumb { background: var(--wm-scrollbar-thumb); }
@supports not selector(::-webkit-scrollbar) {
html {
scrollbar-width: thin;
scrollbar-color: var(--wm-scrollbar-thumb) var(--wm-scrollbar-track);
}
}
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--wm-bg);
color: var(--wm-text);
font-family: var(--wm-font-body);
font-weight: var(--wm-weight-body);
font-size: var(--wm-text-base);
line-height: var(--wm-leading-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--wm-font-heading);
font-weight: var(--wm-weight-heading);
line-height: var(--wm-leading-heading);
color: var(--wm-heading);
text-transform: none;
}
h1 { font-size: var(--wm-h1); line-height: var(--wm-leading-tight); }
h2 { font-size: var(--wm-h2); }
h3 { font-size: var(--wm-h3); }
h4 { font-size: var(--wm-h4); }
h5 { font-size: var(--wm-h5); }
h6 { font-size: var(--wm-h6); }
h1 em, h2 em, h3 em,
.wm-em {
font-style: var(--wm-heading-em-style);
font-size: var(--wm-heading-em-size);
font-weight: inherit;
line-height: 1;
}
p { margin: 0 0 var(--wm-space-4); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
a:not(.wm-btn):hover { color: var(--wm-link); }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible {
outline: 2px solid var(--wm-accent);
outline-offset: 2px;
}
.wm-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-to-content {
position: absolute; top: -100px; left: var(--wm-space-4);
z-index: var(--wm-z-modal);
padding: var(--wm-space-3) var(--wm-space-5);
background: var(--wm-ink); color: #fff;
}
.skip-to-content:focus { top: var(--wm-space-4); }
.wm-container {
width: 100%;
max-width: var(--wm-maxw);
margin-inline: auto;
padding-inline: var(--wm-gutter);
}
.wm-container--flush { padding-inline: 0; }
.wm-section h2 {
font-size: clamp(2.4rem, 5.2vw, 4.4rem);
font-weight: 300;
line-height: 1.04;
letter-spacing: .004em;
}
[data-wm-skel] {
background-image: linear-gradient(100deg,
var(--wm-bone, #f4f3f0) 30%,
var(--wm-paper, #fff) 50%,
var(--wm-bone, #f4f3f0) 70%);
background-size: 200% 100%;
animation: wm-skel 1.2s linear infinite;
}
[data-wm-skel].is-loaded {
background-image: none;
animation: none;
}
@keyframes wm-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
[data-wm-skel] { animation: none; background-image: none; }
}
.wm-section { padding-block: var(--wm-section-y); }
.wm-section--tight { padding-block: calc(var(--wm-section-y) / 2); }
.wm-section--flush { padding-block: 0; }
.wm-section--specs + .wm-section:not(.wm-section--highlights):not(.wm-section--fourcs),
.wm-section--highlights + .wm-section:not(.wm-section--specs):not(.wm-section--fourcs),
.wm-section--fourcs + .wm-section:not(.wm-section--specs):not(.wm-section--highlights) { padding-top: clamp(1.2rem, 2.2vw, 2rem); }
.wm-section--highlights + .wm-section--fourcs { padding-top: 0; border-top: 0; }
.wm-section--bone { background: var(--wm-bone); }
.wm-section--mist { background: var(--wm-mist); }
.wm-section--paper { background: var(--wm-paper); }
.wm-section--night { background: var(--wm-night); color: #fff; }
.wm-section--night h1,
.wm-section--night h2,
.wm-section--night h3 { color: #fff; }
.wm-head {
display: flex;
flex-direction: column;
gap: var(--wm-space-2);
align-items: center;
text-align: center;
margin-bottom: var(--wm-space-7);
}
.wm-head--row {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
text-align: left;
}
.wm-head__eyebrow {
font-size: var(--wm-text-xs);
letter-spacing: var(--wm-tracking-wide);
text-transform: uppercase;
color: var(--wm-accent);
font-weight: 400;
}
.wm-head__link {
font-size: var(--wm-text-sm);
letter-spacing: .04em;
text-transform: uppercase;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
white-space: nowrap;
}
@media (max-width: 768px) {
.wm-head { margin-bottom: var(--wm-space-5); }
.wm-head--row { align-items: center; }
.wm-head__link { position: relative; }
.wm-head__link::after {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 44px;
transform: translateY(-50%);
}
}
.wm-grid {
display: grid;
grid-template-columns: repeat(var(--wm-cols, 4), minmax(0, 1fr));
gap: var(--wm-space-5);
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1024px) { .wm-grid { grid-template-columns: repeat(var(--wm-cols-md, 3), minmax(0, 1fr)); } }
@media (max-width: 768px)  { .wm-grid { grid-template-columns: repeat(var(--wm-cols-sm, 2), minmax(0, 1fr)); gap: var(--wm-space-4); } }
.wm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wm-space-2);
min-height: 48px;
padding: 1.05rem 2.1rem;
border: 0;
border-radius: var(--wm-radius);
font-size: .72rem;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
text-align: center;
transition: background .35s cubic-bezier(.23, 1, .32, 1),
color .35s cubic-bezier(.23, 1, .32, 1),
border-color .35s cubic-bezier(.23, 1, .32, 1),
box-shadow .35s cubic-bezier(.23, 1, .32, 1),
transform .16s cubic-bezier(.23, 1, .32, 1);
}
.wm-btn--solid { background: var(--wm-ink); color: #f4f3f0; box-shadow: inset 0 1px rgb(255 255 255 / .07); }
.wm-btn--solid:hover { background: var(--wm-accent); }
.wm-btn--outline { border: var(--wm-border) solid currentColor; color: var(--wm-ink); }
.wm-btn--outline:hover { background: var(--wm-ink); color: #fff; transform: translateY(-1px); }
.wm-btn--gold { background: var(--wm-accent); color: var(--wm-ink); }
.wm-btn--gold:hover { background: var(--wm-ink); color: #f4f3f0; transform: translateY(-1px); }
.wm-btn--quiet {
padding: 1.05rem .2rem;
border: 0;
letter-spacing: .2em;
position: relative;
}
.wm-btn--quiet::after {
content: "";
position: absolute;
left: .2rem; right: .2rem;
bottom: .7rem;
height: 1px;
background: currentColor;
opacity: .55;
transform-origin: left;
transition: transform .45s var(--wm-ease);
}
.wm-btn--quiet:hover::after,
.wm-btn--quiet:focus-visible::after { transform: scaleX(.5); }
.wm-btn[aria-disabled="true"],
.wm-btn:disabled { opacity: .45; pointer-events: none; }
.wm-qty { display: inline-flex; align-items: center; border: 1px solid var(--wm-line); }
.wm-qty__btn { width: 52px; height: 54px; font-size: 18px; color: var(--wm-ink); }
.wm-qty__btn:hover { background: var(--wm-bone); }
.wm-qty__input {
width: 50px; height: 54px;
border: 0; border-inline: 1px solid var(--wm-line);
text-align: center; font: inherit; color: inherit;
background: transparent;
-moz-appearance: textfield;
}
.wm-qty__input::-webkit-outer-spin-button,
.wm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wm-qty--sm .wm-qty__btn { width: 30px; height: 32px; font-size: 15px; }
.wm-qty--sm .wm-qty__input { width: 34px; height: 32px; }
.wm-js .wm-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--wm-dur-image) var(--wm-ease),
transform var(--wm-dur-image) var(--wm-ease);
will-change: opacity, transform;
}
.wm-js .wm-reveal.wm-in {
opacity: 1;
transform: none;
}
.wm-js .wm-reveal--stagger > * {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--wm-dur-image) var(--wm-ease),
transform var(--wm-dur-image) var(--wm-ease);
}
.wm-js .wm-reveal--stagger.wm-in > * { opacity: 1; transform: none; }
.wm-js .wm-reveal--stagger.wm-in > *:nth-child(2) { transition-delay: 70ms; }
.wm-js .wm-reveal--stagger.wm-in > *:nth-child(3) { transition-delay: 140ms; }
.wm-js .wm-reveal--stagger.wm-in > *:nth-child(4) { transition-delay: 210ms; }
.wm-js .wm-reveal--stagger.wm-in > *:nth-child(5) { transition-delay: 280ms; }
.wm-js .wm-reveal--stagger.wm-in > *:nth-child(6) { transition-delay: 350ms; }
.wm-media {
position: relative;
overflow: hidden;
background: var(--wm-bone);
}
.wm-media::before {
content: "";
display: block;
padding-top: var(--wm-ratio, var(--wm-card-ratio));
}
.wm-media > img,
.wm-media > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--wm-dur-image) var(--wm-ease);
}
.wm-media--zoom:hover > img { transform: scale(var(--wm-media-zoom)); }
.wm-media--placeholder { background: var(--wm-mist); }
.shopify-section:not(:has(*)) { display: none; padding: 0; }
.wm-section--story + .wm-section--story { padding-top: 0; }
@keyframes wm-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.wm-lazy-js .wm-main img[loading="lazy"] {
opacity: 0;
transition: opacity .55s var(--wm-ease);
}
.wm-lazy-js .wm-main img[loading="lazy"].wm-loaded { opacity: 1; }
.wm-lazy-js .wm-main *:has(> img[loading="lazy"]:not(.wm-loaded)) {
background-image: linear-gradient(100deg,
var(--wm-bone) 34%, var(--wm-mist) 50%, var(--wm-bone) 66%);
background-size: 300% 100%;
background-repeat: no-repeat;
animation: wm-shimmer 1.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.wm-lazy-js .wm-main img[loading="lazy"] { transition: none; }
.wm-lazy-js .wm-main *:has(> img[loading="lazy"]:not(.wm-loaded)) {
animation: none; background-image: none; background-color: var(--wm-bone);
}
}