:root{--ux-ease:cubic-bezier(.22,1,.36,1);--ux-gold:#ddc397;--ux-panel:#202222;--ux-line:#414542;--ux-ink:#f5f4f0;--ux-muted:#b8bcb6}
html[data-theme=light]{--ux-panel:#fff;--ux-line:#d8dad2;--ux-ink:#252a26;--ux-muted:#62685f}
.ux-swipe-hero{cursor:grab;user-select:none}.ux-swipe-hero.ux-dragging{cursor:grabbing}.ux-swipe-hero a,.ux-swipe-hero button{cursor:pointer}
.ux-swipe-hero .km-slide{backface-visibility:hidden}
.ux-smooth-tabs{position:relative;isolation:isolate;overflow-x:auto;scrollbar-width:none}
.ux-smooth-tabs::-webkit-scrollbar{display:none}
html body #product-compare .ux-smooth-tabs [data-tk-category]{position:relative;z-index:1;background:transparent!important;border-color:transparent!important;transition:color 140ms ease-out;color:var(--ux-muted);white-space:nowrap}
html body #product-compare .ux-smooth-tabs [aria-selected=true]{color:#171819!important}
.ux-tab-indicator{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--ux-gold);pointer-events:none;transition:transform 250ms var(--ux-ease),width 250ms var(--ux-ease)}
@media(min-width:761px){html body #product-compare .tk-comparison{width:calc(170px + var(--compare-count)*230px);min-width:0;max-width:none}}
.ux-filter-status{font-size:12px;line-height:1.5;color:var(--ux-muted);margin:10px 0;min-height:18px}
.ux-retry{color:var(--ux-gold);background:transparent;border:0;text-decoration:underline;text-underline-offset:3px}
.cat-results{transition:opacity 160ms ease-out}.cat-results.ux-results-loading{opacity:.45;pointer-events:none}
.cat-results.ux-results-loading .cat-grid{background:var(--ux-panel)}
.tk-toggle:has([data-tk-differences]:checked){color:var(--ux-ink);background:color-mix(in srgb,var(--ux-gold) 12%,transparent);border-radius:8px}
.tk-toggle{padding:0 8px;transition:background 150ms ease-out}
.tk-toggle input{accent-color:#bb9560}
html body .bf-pending,html body .bf-success{position:relative;overflow:hidden}
html body .bf-pending{color:transparent!important;cursor:progress}
.bf-pending>*,.bf-success>svg:not(.ux-feedback-check),.bf-success>i,.bf-success>span{opacity:0}
.bf-pending::after{content:'';position:absolute;width:17px;height:17px;left:calc(50% - 8.5px);top:calc(50% - 8.5px);border:1.7px solid currentColor;border-top-color:transparent;border-radius:50%;color:var(--ux-ink);animation:ux-spin 700ms linear infinite}
html body .bf-success{color:transparent!important}
.ux-feedback-check{position:absolute;width:22px;height:22px;inset:0;margin:auto;color:var(--ux-ink);animation:ux-check 180ms var(--ux-ease) both}
.cu-bag-button .ux-feedback-check,.cu-bag-button.bf-pending::after,.tk-button:not(.tk-secondary) .ux-feedback-check,.tk-button:not(.tk-secondary).bf-pending::after{color:#171819}
html body button.ux-wish-selected:not(.bf-pending):not(.bf-success){color:var(--ux-gold);border-color:#b6905b}
html body button.ux-wish-selected .fa-heart-o::before{content:'\f004'}
.sh-count,[data-hv-count]{transform-origin:center;transition:transform 150ms ease-out}
@keyframes ux-spin{to{transform:rotate(360deg)}}
@keyframes ux-check{from{opacity:.2;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
button:not(:disabled),.km-cta{transition:scale 120ms ease-out,background-color 160ms ease-out,color 160ms ease-out}
button:not(:disabled):active,.km-cta:active{scale:.96}
.ux-spotlight{position:relative;isolation:isolate;--ux-light:0}
.ux-spotlight::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(220px circle at var(--ux-light-x,50%) var(--ux-light-y,50%),rgb(221 195 151 / .14),transparent 75%);opacity:var(--ux-light);transition:opacity 220ms ease-out}
.ux-spotlight:focus-within::after{--ux-light:1}
.ux-spotlight>img,.ux-spotlight .ch-top-image img,.ux-spotlight picture img,.ux-spotlight .bz-brand-image img{transition:transform 350ms var(--ux-ease)}
@media(hover:hover) and (pointer:fine){.ux-spotlight:hover::after{--ux-light:1}.ux-spotlight:hover>img,.ux-spotlight:hover .ch-top-image img,.ux-spotlight:hover picture img,.ux-spotlight:hover .bz-brand-image img{transform:scale(1.025)}}
.hv-search-results{transform-origin:top center;animation:ux-search-in 180ms var(--ux-ease)}
.hv-search-results[hidden]{display:none!important}
.hv-search-results .hv-search-status{font-size:12px;line-height:1.5;color:var(--ux-muted);min-height:18px}
.hv-search-results .hv-search-categories{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:8px}
.hv-search-results .hv-search-categories a{border:1px solid var(--ux-line);border-radius:6px;padding:5px 8px;font-size:11px;color:var(--ux-ink)}
.hv-search-results .hv-result{border-radius:8px;min-height:76px;transition:background 140ms ease-out}
.hv-search-results .hv-result[aria-selected=true],.hv-search-results .hv-result:hover{background:color-mix(in srgb,var(--ux-gold) 12%,var(--ux-panel))}
.hv-search-results .hv-result img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:7px}
.hv-search-results .hv-result span>span{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hv-search-results .hv-result strong{font-size:14px}.hv-search-results .hv-result small{font-size:11px}
.hv-search-results .hv-search-all{display:block;padding:12px;font-size:12px;color:var(--ux-gold)}
.ux-search-skeleton{display:flex;gap:12px;padding:12px;min-height:76px;box-sizing:border-box}
.ux-search-skeleton>i{display:block;width:52px;height:52px;border-radius:7px;background:var(--ux-line)}
.ux-search-skeleton>span{display:grid;align-content:center;gap:9px;flex:1}.ux-search-skeleton b{display:block;height:8px;max-width:75%;border-radius:3px;background:var(--ux-line)}
.ux-search-skeleton b:last-child{max-width:40%}.ux-search-skeleton{animation:ux-loading-pulse 1.2s ease-in-out infinite alternate}
.hv-search-dialog.ux-search-open{animation:ux-search-in 220ms var(--ux-ease)}
.ux-sort-button{display:none}
#ux-sort-sheet{width:min(440px,calc(100% - 24px));max-height:80dvh;inset:auto 0 12px;margin:0 auto;padding:20px;background:var(--ux-panel);color:var(--ux-ink);border:0;border-radius:16px;box-shadow:0 12px 40px #0005}
#ux-sort-sheet::backdrop{background:rgb(0 0 0 / .35)}
#ux-sort-sheet[open]{animation:ux-sheet-in 230ms var(--ux-ease)}
#ux-sort-sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#ux-sort-sheet h2{font-size:18px;margin:0}
#ux-sort-sheet button{color:var(--ux-ink);background:transparent;border:0}
#ux-sort-sheet button svg{width:20px;height:20px;flex-shrink:0}
.vc-actions .ux-feedback-check,.vc-actions .bf-pending::after{color:#252a26}
.ux-spotlight img{transition:transform 350ms var(--ux-ease)}
@media(hover:hover) and (pointer:fine){.ux-spotlight:hover img{transform:scale(1.025)}}
#ux-sort-sheet [data-ux-close]{width:44px;height:44px;display:grid;place-items:center}
#ux-sort-sheet [role=radio]{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;min-height:48px;padding:12px;font-size:13px;border-radius:8px}
#ux-sort-sheet [aria-checked=true]{background:color-mix(in srgb,var(--ux-gold) 16%,transparent);color:var(--ux-gold)}
@keyframes ux-search-in{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes ux-sheet-in{from{opacity:.4;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ux-loading-pulse{from{opacity:.4}to{opacity:.85}}
@media(max-width:760px){.cat-sort.ux-has-sheet{width:auto!important;order:0!important;margin:0!important;font-size:0!important}.cat-sort.ux-has-sheet select{display:none}.ux-sort-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:transparent;border:1px solid var(--ux-line);border-radius:8px;color:var(--ux-ink);padding:8px 10px;font-size:12px}.cat-toolbar{gap:8px!important}.ux-sort-button svg{width:17px;height:17px}.cat-toolbar>a{font-size:11px!important}.hv-search-dialog .hv-search-results{padding-bottom:16px}.hv-search-dialog .hv-result{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){.ux-tab-indicator,.cat-results,.ux-spotlight::after,.ux-spotlight img,button,.km-cta{transition:none!important}.ux-search-skeleton,.bf-pending::after,.ux-feedback-check,.hv-search-results,#ux-sort-sheet[open],.hv-search-dialog.ux-search-open{animation:none!important}.ux-spotlight:hover img{transform:none!important}button:active,.km-cta:active{scale:1}}
