:root {
--ctl: 40px;
--ctl-s: 34px;
--bar: 56px;
--ctl-pad: 16px;
--ctl-ic: 22px;
--gap-1: 4px;
--gap-2: 8px;
--gap-3: 11px;
--ctl-font: 600 14px/1 var(--font);
--ctl-track: .01em;
--ctl-ink: #1B1B1B;
--chip-bg: #F1F2F4;
--chip-bg-hover: #E8EAEE;
--chip-line: rgba(0, 0, 0, .08);
--chip-line-hover: rgba(0, 0, 0, .22);
}
.btn-pill, .btn-navy, .btn-outline, .btn-buy, .btn-cart, .seo__toggle, .shop-rail__all, .loop__cta, .pp__cta, .fdrawer__apply,
.series__btns .btn-buy, .series__btns .btn-cart, .buybar .btn-buy {
height: var(--ctl); min-height: 0; padding: 0 var(--ctl-pad); gap: var(--gap-2);
border-radius: 999px; font: var(--ctl-font); letter-spacing: var(--ctl-track); white-space: nowrap;
}
.btn-buy svg, .btn-pill svg, .btn-navy svg, .btn-outline svg { width: 20px; height: 20px; flex: none; }
.btn-cart { margin-top: 0; box-shadow: inset 0 0 0 1.5px var(--chip-line-hover); }
.btn-cart .plus { width: 20px; height: 20px; font-size: 16px; }
.btn-outline, .seo__toggle { border-width: 1.5px; }
.hero__cta { min-width: 0; }
.hero__cta .btn-buy { padding: 0 16px 0 16px; }
.pp__cta b { font-weight: 800; margin: 0; }
.pp__cta svg { width: 16px; height: 16px; }
.fdrawer__apply { width: 100%; }
.fdrawer__clear { height: var(--ctl); font: var(--ctl-font); letter-spacing: var(--ctl-track); }
.mnav__foot a { height: var(--ctl); font: var(--ctl-font); letter-spacing: var(--ctl-track); border-width: 1.5px; }
.chip, .quick .chip, .series .chip, .pdtabs .chip, .bk-chips .chip, .policy__links a, .search__pages a, .opt-chip, .fbtn {
height: var(--ctl); min-height: 0; padding: 0 var(--ctl-pad); border-radius: 999px;
font: var(--ctl-font); letter-spacing: var(--ctl-track); white-space: nowrap;
}
.chip, .series .chip, .bk-chips .chip, .policy__links a {
background: var(--chip-bg); box-shadow: inset 0 0 0 1.5px var(--chip-line); color: var(--ctl-ink);
transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.chip:hover, .series .chip:hover, .bk-chips .chip:hover, .policy__links a:hover { background: var(--chip-bg-hover); box-shadow: inset 0 0 0 1.5px var(--chip-line-hover); color: var(--ctl-ink); }
.series .chip[aria-pressed="true"], .bk-chips .chip[aria-pressed="true"], .shop-rail__tabs .chip[aria-selected="true"], .bbar__tabs .chip[aria-current="true"] { background: var(--ctl-ink); box-shadow: none; color: #fff; }
.quick .chip { padding: 0 var(--ctl-pad) 0 4px; background: var(--chip-bg); box-shadow: inset 0 0 0 1.5px var(--chip-line); color: #1A1A1A; }
.quick .chip:hover { box-shadow: inset 0 0 0 1.5px var(--chip-line-hover); }
.quick__in { gap: var(--gap-2); }
.pdtabs__in { padding: var(--gap-2); gap: var(--gap-1); }
.pdtabs .chip { background: transparent; box-shadow: none; }
.pdtabs .chip[aria-current="true"] { background: #fff; box-shadow: var(--shadow-soft); }
.fbtn { gap: var(--gap-2); border-width: 1.5px; border-color: var(--ctl-ink); color: var(--ctl-ink); }
.fbtn:not(.fbtn--dd) { padding: 0 var(--ctl-pad) 0 12px; }
.fbtn--dd { gap: 8px; padding: 0 var(--ctl-pad); }
.fbtn--dd.is-set { background: var(--ctl-ink); border-color: var(--ctl-ink); }
.fbtn svg { width: 18px; height: 18px; }
.search__pages a { border-width: 1.5px; }
.opt-chip { border-width: 1.5px; }
.opt-chip[aria-checked="true"] { background: var(--ctl-ink); border-color: var(--ctl-ink); color: #fff; box-shadow: none; }
.opt-chip.is-na[aria-checked="true"] { color: #fff; }
.mnav__chip { height: var(--ctl-s); padding: 0 16px; font: 600 14px/1 var(--font); letter-spacing: var(--ctl-track); background: var(--chip-bg); box-shadow: inset 0 0 0 1.5px var(--chip-line); color: var(--ctl-ink); }
.hero__arrow, .loop__btn, .pdp2__chev, .totop {
width: var(--ctl); height: var(--ctl); min-width: 0; margin-top: 0; padding: 0; border-radius: 50%;
}
.hero__arrow { margin-top: calc(var(--ctl) / -2); }
.pdp2__chev { margin-top: calc(var(--ctl) / -2); }
.hero__arrow svg, .loop__btn svg, .pdp2__chev svg, .totop svg { width: 18px; height: 18px; }
.pdp2__wish { width: var(--ctl); height: var(--ctl); border-radius: 50%; }
.pdp2__wish svg { width: 20px; height: 20px; }
.mview__b { width: var(--ctl); height: var(--ctl); border-radius: 999px; }
.mview__b svg { width: 20px; height: 20px; }
.shop-rail__step, .fdrawer__x, .mnav__x, .search__close {
width: var(--ctl-s); height: var(--ctl-s); padding: 0; border-radius: 50%; display: grid; place-items: center;
}
.shop-rail__step svg { width: 18px; height: 18px; }
.fdrawer__x, .mnav__x { border-width: 1.5px; }
.fdrawer__x svg, .mnav__x svg { width: 14px; height: 14px; }
.search__close { font-size: 24px; line-height: 1; }
.qty { height: var(--ctl); border-radius: 999px; }
.qty button { width: var(--ctl); height: var(--ctl); font-size: 16px; }
.qty output { min-width: 28px; font: 700 16px/1 var(--font); }
.search__field { height: var(--bar); }
.hsearch { height: var(--bar); }
.newsletter, .footer-wrap .newsletter { height: var(--bar); padding: 0 var(--gap-2) 0 16px; }
.newsletter button, .footer-wrap .newsletter button { width: var(--ctl); height: var(--ctl); }
.mbar__pills, .policy__links, .search__pages, .bk-chips, .opt-chips, .series__chips, .series__btns, .cta-band__actions { gap: var(--gap-2); }
.buybox { gap: var(--gap-2); }
.shop-rail__ctrls { gap: calc(var(--gap-1) * 2); }
.shop-rail__all { margin-right: 6px; }
.duo__foot, .bk-foot, .bulk__cta { gap: var(--gap-3); }
.mcount { font: 500 14px/1.3 var(--font); }
.msort__btn { height: var(--ctl); font: 500 14px/1 var(--font); }
.mnav__quick { gap: 8px; }
@media (max-width: 639px) {
.pdtabs .chip, .bk-chips .chip, .series .chip { height: var(--ctl); padding: 0 16px; font-size: 14px; }
.series__btns .btn-buy, .series__btns .btn-cart, .buybar .btn-buy { height: var(--ctl); font-size: 14px; }
.loop__btn { width: var(--ctl); height: var(--ctl); }
}
button.link-arrow { height: var(--ctl); padding: 0; border: 0; background: none; cursor: pointer; font: 700 14px/1 var(--font); letter-spacing: var(--ctl-track); }
.buybox { flex-wrap: nowrap; }
.buybox .btn-cart { min-width: 0; }
.buybox .qty, .buybox .pdp2__wish { flex: none; }
.wu-chip-track { gap: var(--gap-2) !important; }
@media (max-width: 639px) and (hover: hover) { .wu-chip-track { padding-right: var(--gap-2); } }
.loop__ctrls { gap: calc(var(--gap-2) * 2); }
.shop-rail__all { margin-right: 0; }
.mview { gap: var(--gap-1); }
.ihero__actions, .mnav__quick, .rv__actions, .ord__actions, .cta-band__actions, .mnav__foot { gap: var(--gap-2); }
.quick { gap: var(--gap-2); }
.cline__rm { height: var(--ctl); }
@media (max-width: 639px) {
.hero__arrow, .shop-rail__step, .pdp2__chev { display: none !important; }
}
@media (hover: none) and (pointer: coarse) {
.hero__arrow, .shop-rail__step, .pdp2__chev { display: none !important; }
.shop-rail__all { margin-right: 0; }
}
.buybar {
width: 400px; max-width: calc(100% - 38px); height: 68px; box-sizing: border-box; bottom: 20px;
gap: var(--gap-3); padding: 8px 12px 8px 8px; border: 0; border-radius: 999px;
background: rgba(255, 255, 255, .58);
backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
box-shadow: 0 4px 20px rgba(70, 70, 70, .15), inset 0 0 0 1.5px rgba(255, 255, 255, .7);
isolation: isolate;
}
.buybar::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, rgba(0,180,255,.08) 75%, rgba(255,255,255,.3));
}
.buybar__art { width: 52px; height: 52px; border-radius: 50%; background: #F1F2F4; }
.buybar__txt { gap: 3px; }
.buybar__t { font: 600 14px/1.2 var(--font); text-transform: none; letter-spacing: .01em; color: #0B0B0B; }
.buybar__p b { font: 700 14px/1 var(--font); color: var(--accent-price, #111); }
.buybar .btn-buy { height: var(--ctl); padding: 0 var(--ctl-pad) 0 12px; font-size: 14px; }
.buybar .btn-buy svg { display: block; width: 18px; height: 18px; }
@media (max-width: 639px) {
.buybar { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 12px; }
.buybar__art { width: 36px; height: 36px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .buybar { background: rgba(255, 255, 255, .94); } }
.buybar__t small { font: 500 12px/1 var(--font); color: var(--muted); letter-spacing: 0; }
.pd-stat__v { font-size: clamp(24px, 4.3vw, 44px); overflow-wrap: anywhere; }
.buybar {
background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05), rgba(0, 180, 255, .08), rgba(255, 255, 255, .03));
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 4px 20px rgba(70, 70, 70, .15);
}
.buybar::before { display: none; }
:root { --chip: 32px; --chip-pad: 12px; --chip-font: 600 12px/1 var(--font); }
.chip, .quick .chip, .series .chip, .pdtabs .chip, .bk-chips .chip, .policy__links a, .search__pages a, .mnav__chip {
height: var(--chip); padding: 0 var(--chip-pad); font: var(--chip-font); letter-spacing: var(--ctl-track);
}
.quick .chip { padding: 0 var(--chip-pad) 0 4px; }
.quick__art { width: 26px; height: 26px; }
.quick__in { gap: 8px; }
.quick { height: 64px; }
@media (max-width: 639px) { .quick { height: 56px; } }
.chip, .policy__links a, .search__pages a, .mnav__chip { position: relative; }
.chip::after, .policy__links a::after, .search__pages a::after, .mnav__chip::after { content: ""; position: absolute; inset: -4px 0; }
.newsletter button, .qty button { padding: 0; }
.seo__card ul, .seo__card ol { padding-left: 16px; }
html, body, * { scrollbar-width: none !important; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html.wu-locked, html.wu-locked body { overscroll-behavior: none; }
html.wu-locked .scrim { touch-action: none; }
.wu-idle, .wu-idle *, .wu-idle::before, .wu-idle::after, .wu-idle *::before, .wu-idle *::after,
html.wu-hidden-tab *, html.wu-hidden-tab *::before, html.wu-hidden-tab *::after { animation-play-state: paused !important; }
.loop__track, .news__track { will-change: transform; }
a, button, [role="button"], [role="tab"], summary, label, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, [role="button"], [role="tab"], summary, .chip, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
.qty button { border-radius: 50%; padding: 5px; background: linear-gradient(#0B0B0B, #0B0B0B) no-repeat 50% 100% / 100% 0%; background-clip: content-box; background-origin: content-box;
transition: background-size 500ms cubic-bezier(.3, 1, .3, 1), color 300ms ease 100ms, transform 200ms ease; }
.qty--s button { padding: 4px; }
.cartd--b .cline .qty--s button { padding: 3px; }
html[data-theme="night"] .qty button { background-image: linear-gradient(#fff, #fff); }
@media (hover: hover) and (pointer: fine) {
.qty button:not(:disabled):hover { background-color: transparent; background-size: 100% 100%; color: #fff; }
html[data-theme="night"] .qty button:not(:disabled):hover { background-color: transparent; color: #0B0B0B; }
}
.qty button:not(:disabled):active { background-color: transparent; background-size: 100% 100%; color: #fff; transform: scale(.94); }
html[data-theme="night"] .qty button:not(:disabled):active { background-color: transparent; color: #0B0B0B; }
body .qty button:not(:disabled):hover, body .qty button:not(:disabled):active { background-image: linear-gradient(#0B0B0B, #0B0B0B); background-repeat: no-repeat; background-position: 50% 100%; background-clip: content-box; background-origin: content-box; }
html[data-theme="night"] body .qty button { background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%; background-clip: content-box; background-origin: content-box; background-color: transparent; }
html[data-theme="night"] body .qty button:not(:disabled):hover, html[data-theme="night"] body .qty button:not(:disabled):active { background-image: linear-gradient(#fff, #fff); background-size: 100% 100%; }
body .buybar__art { width: 60px; height: 52px; border-radius: 12px; overflow: visible; }
body .buybar__art.is-cut { background: none !important; }
body .buybar__art.is-cut img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
body .buybar__art:not(.is-cut) { width: 52px; overflow: hidden; }
@media (max-width: 639px) {
body .buybar__art { width: 48px; height: 40px; border-radius: 8px; }
body .buybar__art:not(.is-cut) { width: 40px; }
}
body .buybar__art.is-cut { width: 64px; height: 52px; }
@media (max-width: 639px) { body .buybar__art.is-cut { width: 56px; height: 52px; margin: -4px 0; } }
body .buybar__art.is-cut { display: block; }
body .buybar__art.is-cut img { display: block; }
@media (max-width: 639px) { body .buybar__art.is-cut { margin: 0; } }
.opt-chip.is-soon { opacity: .5; }