/* Shared touches of every public site (stores + platform), run by ux.js:
   day / night switch, product cards that flip through their photos, magnifier on the product photo,
   the cart that catches the product, and the cookie notice. Colors come from each site's own variables. */
:root{--ux-acc:var(--accent,var(--lag,#22e3d6));--ux-ink:var(--ink,#0e2238);--ux-ink2:var(--ink2,#5b6b7b);--ux-bg:var(--bg,var(--paper,#ffffff));--ux-line:var(--edge,var(--line,rgba(127,127,127,.3)))}

/* ---------- day / night switch ---------- */
.sx{position:relative;display:inline-flex}
.sx-btn{position:relative;display:inline-grid;place-items:center;cursor:pointer;color:inherit}
.sx-btn:not(.ibtn){width:38px;height:38px;border-radius:50%;border:1px solid var(--ux-line);background:transparent;padding:0}
.sx-ico{position:relative;width:20px;height:20px;display:block}
.sx-ico svg{position:absolute;inset:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.3,1.5,.5,1),opacity .35s}
.sx-ico .sx-moon{fill:currentColor;stroke:none}
:root[data-theme="light"] .sx-ico .sx-moon,:root:not([data-theme="light"]) .sx-ico .sx-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
:root[data-theme="light"] .sx-ico .sx-sun{animation:sx-spin 18s linear infinite}
@keyframes sx-spin{to{transform:rotate(360deg)}}
.sx-a{position:absolute;bottom:3px;inset-inline-end:2px;min-width:13px;height:13px;padding:0 2px;border-radius:7px;background:var(--ux-acc);color:var(--on-accent,#fff);font:800 8.5px/13px system-ui,sans-serif;text-align:center;opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s;pointer-events:none}
:root[data-scheme="auto"] .sx-a{opacity:1;transform:none}
.sx-menu{position:absolute;z-index:120;top:calc(100% + 10px);inset-inline-end:-6px;min-width:212px;padding:6px;border-radius:16px;border:1px solid var(--ux-line);background:color-mix(in srgb,var(--ux-bg) 90%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:var(--ux-ink);box-shadow:0 18px 50px -12px rgba(0,0,0,.45);transform-origin:top right;animation:sx-pop .22s cubic-bezier(.2,.9,.3,1.2)}
[dir=rtl] .sx-menu{transform-origin:top left}
.sx-menu[hidden]{display:none}
@keyframes sx-pop{from{opacity:0;transform:translateY(-6px) scale(.94)}}
.sx-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;border-radius:11px;background:transparent;color:inherit;font:inherit;font-size:14px;text-align:start;cursor:pointer}
.sx-menu button:hover,.sx-menu button:focus-visible{background:color-mix(in srgb,var(--ux-acc) 16%,transparent);outline:none}
.sx-menu button[aria-checked="true"]{background:color-mix(in srgb,var(--ux-acc) 22%,transparent);font-weight:700}
.sx-menu button[aria-checked="true"]::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-radius:50%;background:var(--ux-acc);box-shadow:0 0 10px var(--ux-acc)}
.sx-menu svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sx-menu .sx-moon{fill:currentColor;stroke:none}.sx-menu .fill{fill:currentColor;stroke:none}
.sx-tip{position:fixed;z-index:130;left:50%;top:84px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:color-mix(in srgb,var(--ux-bg) 88%,transparent);color:var(--ux-ink);border:1px solid var(--ux-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 34px -10px rgba(0,0,0,.4);font-size:14px;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;animation:sx-tip 2.6s ease forwards;pointer-events:none}
@keyframes sx-tip{0%{opacity:0;transform:translate(-50%,-8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
/* the new look spreads out from the button (browsers with view transitions) */
html.sx-vt::view-transition-old(root),html.sx-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.sx-vt::view-transition-new(root){z-index:2}
/* stores: in the day look the page stays light also deep down the page (the water only gets a little bluer) */
html:root[data-scheme][data-theme="light"][data-depth="deep"]{--glass:rgba(255,255,255,.55);--glass-hi:rgba(255,255,255,.6);--edge:rgba(255,255,255,.85);--shadow:0 20px 50px rgba(20,80,120,.18);--orb:.45;--field:rgba(255,255,255,.7);--bub:255,255,255;--bub-rim:20,120,165;color-scheme:light}
:root[data-scheme][data-theme="light"] .abyss{background:linear-gradient(180deg,rgba(150,205,232,.55) 0%,rgba(110,175,215,.6) 60%,rgba(80,150,200,.62) 100%)}
html:root[data-scheme][data-theme="light"][data-depth="deep"]:not([data-tk]){--bg:#e3f5fc;--bg2:#b9e4f4;--ink:#06243a;--ink2:#38566b;--accent:#07a69f;--accent2:#5a3df0;--hot:#e0344f;--glass:rgba(255,255,255,.55);--glass-hi:rgba(255,255,255,.6);--edge:rgba(255,255,255,.85);--shadow:0 20px 50px rgba(20,80,120,.18);--on-accent:#fff;--orb:.45;--field:rgba(255,255,255,.7);--bub:255,255,255;--bub-rim:20,120,165;color-scheme:light}

/* ---------- product card: flips through its photos under the mouse, swipe on phones ---------- */
.stage[data-gal]{touch-action:pan-y}
.stage .gx{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box;border-radius:12px;z-index:1;clip-path:circle(0 at var(--gx,50%) var(--gy,50%));transition:clip-path .55s cubic-bezier(.25,.8,.25,1);pointer-events:none}
.stage .gx.on{clip-path:circle(150% at var(--gx,50%) var(--gy,50%))}
.stage .gx.top{z-index:2}
.gbar{position:absolute;z-index:3;left:14px;right:14px;bottom:9px;display:flex;gap:4px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.gbar i{flex:1;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ux-ink) 22%,transparent);overflow:hidden;position:relative}
.gbar i::after{content:"";position:absolute;inset:0;background:var(--ux-acc);transform:scaleX(0);transform-origin:left;transition:transform .35s}
[dir=rtl] .gbar i::after{transform-origin:right}
.gbar i.on::after{transform:none}
.card:hover .gbar,.cardw:hover .gbar,.card:focus-visible .gbar,.stage.gtouch .gbar{opacity:1;transform:none}
html.ux-touch .stage[data-gal] .gbar{opacity:.85;transform:none}

/* ---------- product page: magnifier and smooth photo change ---------- */
.pd .stage.zoomy{cursor:zoom-in}
.lens{position:absolute;z-index:4;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;background-color:var(--ux-bg);border:2px solid color-mix(in srgb,#fff 85%,transparent);box-shadow:0 18px 40px -8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.12),inset 0 8px 18px rgba(255,255,255,.25);opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.lens.on{opacity:1;transform:none}
#bigimg.swap{animation:ux-swap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ux-swap{from{opacity:.15;transform:scale(.97);filter:blur(6px)}}

/* ---------- the cart catches the product ---------- */
.fly{position:fixed;z-index:200;pointer-events:none;object-fit:contain;border-radius:14px;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);background:var(--ux-bg)}
.bump{animation:ux-bump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes ux-bump{30%{transform:scale(1.28)}60%{transform:scale(.92)}}

/* ---------- cookies ---------- */
.ckb{display:block;position:fixed;z-index:150;bottom:16px;inset-inline-start:16px;width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:18px 18px 16px;border-radius:20px;border:1px solid var(--ux-line);background:color-mix(in srgb,var(--ux-bg) 94%,transparent);color:var(--ux-ink);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 24px 60px -18px rgba(0,0,0,.55);font-size:14px;line-height:1.6;animation:ckb-in .6s cubic-bezier(.2,.9,.25,1.1) .4s both}
.ckb[hidden]{display:none}
@keyframes ckb-in{from{opacity:0;transform:translateY(30px)}}
.ckb h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:16px;line-height:1.3;color:inherit;background:none;-webkit-text-fill-color:currentColor}
.ckb h2 svg{flex:none;width:28px;height:28px}
.ckb p{margin:0 0 12px;color:var(--ux-ink2)}
.ckb p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ckb-row{display:flex;flex-wrap:wrap;gap:8px}
.ckb-b{flex:1 1 auto;min-height:40px;padding:9px 14px;border-radius:12px;border:1px solid var(--ux-line);background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background .2s,transform .15s}
.ckb-b:hover{background:color-mix(in srgb,var(--ux-acc) 12%,transparent)}
.ckb-b:active{transform:scale(.97)}
.ckb-b.main{background:var(--ux-acc);border-color:transparent;color:var(--on-accent,#fff)}
.ckb-b.main:hover{background:color-mix(in srgb,var(--ux-acc) 86%,#000)}
.ckb-b:focus-visible,.ckb-sw input:focus-visible+span{outline:2px solid var(--ux-acc);outline-offset:2px}
.ckb-opts{display:grid;gap:8px;margin:0 0 12px}
.ckb-opts[hidden]{display:none}
.ckb-opt{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:10px 12px;border-radius:12px;border:1px solid var(--ux-line);background:color-mix(in srgb,var(--ux-ink) 4%,transparent)}
.ckb-opt b{display:block;font-size:14px}.ckb-opt small{display:block;color:var(--ux-ink2);font-size:12.5px;line-height:1.5}
.ckb-opt em{flex:none;font-style:normal;font-size:12px;color:var(--ux-acc);font-weight:700;padding-top:2px}
.ckb-sw{position:relative;flex:none;width:42px;height:24px;margin-top:2px}
.ckb-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.ckb-sw span{position:absolute;inset:0;border-radius:999px;background:color-mix(in srgb,var(--ux-ink) 25%,transparent);transition:background .2s}
.ckb-sw span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.ckb-sw input:checked+span{background:var(--ux-acc)}
.ckb-sw input:checked+span::after{transform:translateX(18px)}
[dir=rtl] .ckb-sw input:checked+span::after{transform:translateX(-18px)}
.ckb-link{display:inline-block;margin-top:10px;padding:0;border:0;background:none;color:inherit;opacity:.75;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ckb-link:hover{opacity:1}
.ckb-done{position:fixed;z-index:150;bottom:16px;inset-inline-start:16px;padding:10px 16px;border-radius:999px;background:var(--ux-acc);color:var(--on-accent,#fff);font-weight:700;font-size:14px;animation:ckb-done 2.2s ease forwards;pointer-events:none}
@keyframes ckb-done{0%{opacity:0;transform:translateY(10px)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:560px){.ckb{inset-inline:10px;bottom:10px;width:auto;padding:16px 14px 14px}.ckb-b{flex-basis:calc(50% - 4px)}.ckb-b.main{flex-basis:100%}}

/* ---------- day look: texts that were made light for the night look ---------- */
:root[data-theme="light"] .nav .dvnavlink,:root[data-theme="light"] .menu .dvnavlink{color:#04535d;background:linear-gradient(120deg,rgba(42,212,208,.3),rgba(80,140,255,.22));border-color:rgba(7,140,160,.5)}
:root[data-theme="light"] .dvnavlink .bub{border-color:rgba(7,120,140,.6)}
:root[data-theme="light"] .tag.warn{color:#8f5a00;border-color:#d39500}
:root[data-theme="light"] .dvb.ok{color:#0a6e44;border-color:#2fa871}
:root[data-theme="light"] .dvb.warn{color:#8f5a00;border-color:#d39500}
:root[data-theme="light"] .dvb.bad{color:#b4233d;border-color:#d9475f}
:root[data-theme="light"] .rate label{color:rgba(40,60,80,.35)}

/* ---------- product card: add to cart without opening the product ---------- */
.qaddf{position:absolute;z-index:5;top:0;left:0;margin:0;display:none;flex-direction:column;align-items:center;gap:8px;padding:0 10px 24px;transform:translateY(-100%);pointer-events:none;box-sizing:border-box}
.qaddf.on{display:flex}
.qadd{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border:0;border-radius:999px;background:var(--ux-acc);color:var(--on-accent,#fff);font:inherit;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:0 12px 28px -10px color-mix(in srgb,var(--ux-acc) 80%,#000);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .25s,transform .3s cubic-bezier(.3,1.4,.5,1),background .2s}
.qadd svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.qadd.opt{background:color-mix(in srgb,var(--ux-bg) 88%,transparent);color:var(--ux-ink);border:1px solid var(--ux-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cardw:hover .qadd,.qadd:focus-visible,.qadd.busy,.qadd.done,.qaddf.open .qadd{opacity:1;transform:none}
.qvar{pointer-events:auto;max-width:100%;padding:10px 12px 12px;border-radius:16px;border:1px solid var(--ux-line);background:color-mix(in srgb,var(--ux-bg) 94%,transparent);color:var(--ux-ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 40px -14px rgba(0,0,0,.5);text-align:center;animation:sx-pop .22s cubic-bezier(.2,.9,.3,1.2)}
.qvar[hidden]{display:none}
.qvar b{display:block;font-size:12.5px;color:var(--ux-ink2);margin-bottom:8px}
.qvar div{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.qvar button{min-width:42px;min-height:36px;padding:6px 10px;border-radius:10px;border:1px solid var(--ux-line);background:transparent;color:inherit;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}
.qvar button:hover{background:var(--ux-acc);color:var(--on-accent,#fff);border-color:transparent;transform:translateY(-1px)}
.qvar button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed;background:transparent;color:inherit;transform:none}
.qvar button:focus-visible{outline:2px solid var(--ux-acc);outline-offset:2px}
.qadd:hover{transform:translateY(-2px)}
.qadd:focus-visible{outline:2px solid var(--ux-ink);outline-offset:2px}
.qadd.busy{cursor:wait}.qadd.busy svg{animation:qspin .8s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}
.qadd.done{background:#16a36b;color:#fff}
html.ux-touch .qaddf{align-items:flex-end}
html.ux-touch .qadd{opacity:1;transform:none;width:44px;height:44px;min-height:0;padding:0;border-radius:50%}
html.ux-touch .qadd span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cart-toast{position:fixed;z-index:160;top:86px;inset-inline-end:16px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;border-radius:16px;border:1px solid var(--ux-line);background:color-mix(in srgb,var(--ux-bg) 94%,transparent);color:var(--ux-ink);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 44px -14px rgba(0,0,0,.45);font-size:14px;animation:ckb-done 4.5s ease forwards}
.cart-toast a{flex:none;padding:7px 12px;border-radius:10px;background:var(--ux-acc);color:var(--on-accent,#fff);font-weight:700;text-decoration:none}
.cart-toast.err{border-color:var(--hot,#e0344f)}
@media (prefers-reduced-motion:reduce){.qadd{transition:none}.qadd.busy svg,.cart-toast{animation:none}}

/* ---------- cart preview from any page ---------- */
.mc-bg{position:fixed;inset:0;z-index:170;background:rgba(2,10,20,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.mc-bg.on{opacity:1}
.mc{position:fixed;z-index:171;top:0;bottom:0;inset-inline-end:0;width:min(420px,100vw);display:flex;flex-direction:column;background:color-mix(in srgb,var(--ux-bg) 96%,transparent);color:var(--ux-ink);border-inline-start:1px solid var(--ux-line);box-shadow:-20px 0 60px -20px rgba(0,0,0,.5);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);transform:translateX(105%);transition:transform .38s cubic-bezier(.2,.9,.25,1)}
[dir=rtl] .mc{transform:translateX(-105%)}
.mc.on{transform:none}
.mc-h{display:flex;align-items:center;gap:10px;padding:calc(16px + env(safe-area-inset-top,0px)) 18px 14px;border-bottom:1px solid var(--ux-line)}
.mc-h h2{flex:1;margin:0;font-size:19px;color:inherit;background:none;-webkit-text-fill-color:currentColor}
.mc-h h2 small{font-size:13px;font-weight:600;color:var(--ux-ink2);margin-inline-start:6px}
.mc-x{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--ux-line);background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer;transition:transform .2s,background .2s}
.mc-x:hover{background:color-mix(in srgb,var(--ux-acc) 14%,transparent);transform:rotate(90deg)}
.mc-list{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.mc-it{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:16px;border:1px solid var(--ux-line);background:color-mix(in srgb,var(--ux-ink) 3%,transparent);animation:mc-in .35s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--n,0) * 40ms)}
@keyframes mc-in{from{opacity:0;transform:translateY(10px)}}
.mc-it.gone{opacity:.4;pointer-events:none}
.mc-img{width:72px;height:72px;border-radius:12px;background:color-mix(in srgb,var(--ux-acc) 10%,transparent);display:grid;place-items:center;overflow:hidden}
.mc-img img{width:100%;height:100%;object-fit:contain}
.mc-t{min-width:0}
.mc-t a{display:block;color:inherit;font-weight:700;font-size:14px;line-height:1.35;text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mc-t a:hover{text-decoration:underline}
.mc-t small{display:block;color:var(--ux-ink2);font-size:12px;margin-top:2px}
.mc-q{display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--ux-line);border-radius:999px;overflow:hidden}
.mc-q button{width:30px;height:30px;border:0;background:transparent;color:inherit;font-size:17px;cursor:pointer}
.mc-q button:hover{background:color-mix(in srgb,var(--ux-acc) 14%,transparent)}
.mc-q button:disabled{opacity:.35;cursor:default}
.mc-q b{min-width:26px;text-align:center;font-size:14px}
.mc-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:stretch;justify-content:space-between}
.mc-r b{font-size:14px;white-space:nowrap;direction:ltr}
.mc-del{border:0;background:none;color:var(--ux-ink2);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:0}
.mc-del:hover{color:var(--hot,#e0344f)}
.mc-empty{margin:auto;text-align:center;color:var(--ux-ink2);padding:30px 10px}
.mc-empty svg{width:64px;height:64px;margin:0 auto 10px;display:block;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.6}
.mc-f{padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ux-line);display:grid;gap:10px}
.mc-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.mc-sum b{font-size:19px;direction:ltr}
.mc-f p{margin:0;font-size:12.5px;color:var(--ux-ink2)}
.mc-go{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;background:var(--ux-acc);color:var(--on-accent,#fff);font-weight:800;text-decoration:none;font-size:15px;transition:transform .15s}
.mc-go:hover{transform:translateY(-1px)}
.mc-more{border:1px solid var(--ux-line);background:transparent;color:inherit;min-height:42px;border-radius:14px;font:inherit;font-weight:600;cursor:pointer}
.mc-load{margin:auto;width:34px;height:34px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ux-acc) 25%,transparent);border-top-color:var(--ux-acc);animation:qspin .8s linear infinite}
.mc-x:focus-visible,.mc-go:focus-visible,.mc-more:focus-visible,.mc-q button:focus-visible,.mc-del:focus-visible{outline:2px solid var(--ux-acc);outline-offset:2px}
html.mc-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mc,.mc-bg{transition:none}.mc-it{animation:none}}

/* ---------- hover effects whenever a mouse is in use ----------
   effects-3d.css only turns them on for (hover:hover); some computers with a touch screen report "no hover" even with a mouse,
   so here they follow what the visitor really uses (ux.js adds ux-touch only for finger use). */
:where(html:not(.ux-touch)) .card:hover,:where(html:not(.ux-touch)) .btile:hover,:where(html:not(.ux-touch)) .ctile:hover{transform:perspective(900px) translateY(-7px) rotateX(var(--rx)) rotateY(var(--ry));border-color:var(--c);box-shadow:0 30px 60px -14px color-mix(in srgb,var(--c) 55%,transparent),var(--shadow),inset 0 1px 0 var(--glass-hi)}
:where(html:not(.ux-touch)) .card:hover::after,:where(html:not(.ux-touch)) .btile:hover::before,:where(html:not(.ux-touch)) .ctile:hover::after{opacity:1}
:where(html:not(.ux-touch)) .card:hover .art,:where(html:not(.ux-touch)) .ctile:hover .art{scale:1.1;filter:drop-shadow(0 24px 24px rgba(0,0,0,.42))}
:where(html:not(.ux-touch)) .card:hover .stage::before,:where(html:not(.ux-touch)) .ctile:hover .stage::before{opacity:1;animation:sweep .9s ease-out}
:where(html:not(.ux-touch)) .card:hover .badge{transform:translateY(-2px) scale(1.05)}
html.lite .card:hover::after,html.lite .card:hover .stage::before{opacity:0;animation:none}
/* the metal light that follows the mouse: in the day look a white glow on a light card is invisible, so it gets a brighter core and a thin darker rim */
:root[data-theme="light"] .card::after,:root[data-theme="light"] .btile::before,:root[data-theme="light"] .ctile::after{mix-blend-mode:normal;background:radial-gradient(240px circle at var(--gx) var(--gy),rgba(255,255,255,.5),rgba(255,255,255,.16) 38%,transparent 60%),radial-gradient(300px circle at var(--gx) var(--gy),transparent 48%,color-mix(in srgb,var(--c,var(--accent)) 16%,transparent) 60%,transparent 72%)}
:root[data-theme="light"] .stage::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}

@media (prefers-reduced-motion:reduce){
  .sx-ico svg,.sx-a,.stage .gx,.gbar,.gbar i::after,.lens,.ckb-sw span::after{transition:none}
  :root[data-theme="light"] .sx-ico .sx-sun,.sx-menu,.ckb,.ckb-done,#bigimg.swap,.bump{animation:none}
  :where(html:not(.ux-touch)) .card:hover,:where(html:not(.ux-touch)) .btile:hover,:where(html:not(.ux-touch)) .ctile:hover{transform:none}
  :where(html:not(.ux-touch)) .card:hover .stage::before{animation:none;opacity:0}
}