@layer cs-base{
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--c-page);-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--c-page)}
/* on a phone (mobile-native): taps fire at once (no double-tap zoom wait), controls are not selected or called out by a long press, every input is 16px at least so iOS never zooms into it */
.cs :is(a,button,[role=button],label,summary,select,input,textarea){touch-action:manipulation}
.cs :is(button,[role=button],.btn,.opt,.choice-opt,.carousel-nav,.c-tn,.action,.fav,.menu a,.menu-links a,.tabrow button,.acc){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (pointer:coarse){.cs :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){font-size:max(16px,1em)!important}.cs .field[data-size=l] input{font-size:max(16px,1.15em)!important}}
/* press feedback for touch, where hover never comes: text links and folding rows dim while the finger is on them
   (buttons, cards, chips and tabs press in instead: PRESS_CSS, near the end) */
.cs :is(.menu a,.menu-links a,.crumbs a,.acc){transition:opacity var(--dur-1)}
.cs :is(.menu a,.menu-links a,.crumbs a,.acc):active{opacity:.6}
/* a mouse keeps the dim on the options, arrows and tiles that a finger presses in */
@media not all and (pointer:coarse){.cs :is(.opt,.choice-opt,.carousel-nav,.tabrow button,.mega-tiles a){transition:opacity var(--dur-1)}.cs :is(.opt,.choice-opt,.carousel-nav,.tabrow button,.mega-tiles a):active{opacity:.6}}
/* safe areas (viewport-fit=cover): in landscape every section keeps its content off the notch while its background runs edge to edge; the page's foot clears the home indicator */
.cs .sec>.lay{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
.cs footer.sec>.lay{padding-bottom:max(0px,env(safe-area-inset-bottom,0px) - var(--cs-tabbar,0px))}
.cs{background:var(--c-page);color:var(--c-text);font-family:var(--t-body-m-ff);font-size:var(--t-body-m-fs);line-height:var(--t-body-m-lh);font-style:var(--t-body-m-fst,normal);min-height:100vh;min-height:100dvh;--focus:color-mix(in srgb,var(--c-accent) 70%,var(--c-text));--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.55,0,1,.45);--dur-1:.14s;--dur-2:.22s;--dur-3:.34s;--dur-out:.16s;--sh-close:.22s;--sh-close-ease:linear(0,.065,.202,.353,.495,.616,.714,.79,.849,.893,.926,.95,.968,.98,.989,.995,1);--sh-open:.4s;--sh-open-ease:linear(0,.037,.122,.228,.338,.444,.539,.623,.694,.755,.805,.846,.879,.906,.927,.944,.958,.968,.977,.983,.989,.993,.996,.998,1);--sh-settle:.5s;--sh-settle-ease:linear(0,.038,.131,.25,.378,.503,.616,.715,.797,.862,.913,.952,.979,.998,1.009,1.016,1.019,1.02,1.019,1.017,1.014,1.012,1.009,1.007,1.005,1.004,1.003,1.002,1.001,1,1);interpolate-size:allow-keywords;text-underline-offset:.24em;overflow-wrap:break-word}
.cs a{color:inherit;text-decoration:none}
.cs button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.cs img,.cs video{display:block;max-width:100%}
.cs :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* what the keyboard reaches stops clear of a sticky header (--cs-sticky-top, its height, measured by Section) rather than under it */
.cs :is(a[href],button,input,select,textarea,[tabindex]){scroll-margin-top:calc(var(--cs-sticky-top,0px) + 8px)}
/* a photo (a gallery's, or a link's that holds one) is ringed inside its edge in two tones, the focus colour round the page's, so
   the ring shows on a dark photo as on a light one and isn't cut off by the frame */
.cs :is(a[href],[role=button][tabindex]):not(.logo):has(img):focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cs :is(a[href],[role=button][tabindex]):not(.logo):focus-visible img{outline:2px solid var(--c-page);outline-offset:-4px}
/* the browser's own surfaces, from the palette: selected text, the caret, headings that break evenly, figures that line up, quiet scrollbars */
.cs ::selection{background:var(--c-text);color:var(--c-page)}
.cs :is(input,textarea){caret-color:var(--focus)}
.cs :is(h1,h2,h3){text-wrap:balance}
.cs p{text-wrap:pretty}
.cs .price{font-variant-numeric:tabular-nums lining-nums}
.cs .ov{scrollbar-width:thin;scrollbar-color:var(--c-border) transparent}
.cs ::placeholder{color:var(--c-text-muted);opacity:1}
.cs .lay{min-width:0}
.cs :where(a:is(.stack,.grid,.layer)){display:block}
.cs .sec{position:relative;width:100%;display:flex;flex-direction:column}
.cs .sec>.lay{width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s-5);flex:1 1 auto}
.cs h1,.cs h2,.cs h3,.cs h4,.cs h5,.cs h6,.cs p{margin:0}
.cs .n-text a,.cs .rich a{text-decoration:underline;text-underline-offset:3px}
.cs [data-rich]>p+p,.cs [data-rich]>p+ul,.cs [data-rich]>ul+p,.cs [data-rich]>p+ol,.cs [data-rich]>ol+p{margin-top:.8em}
.cs [data-rich] ul,.cs [data-rich] ol{margin:0;padding-inline-start:1.3em;display:flex;flex-direction:column;gap:.35em}
.cs [data-rich] h3,.cs [data-rich] h4{font:inherit;font-weight:600;margin:1.2em 0 .4em}
.cs [data-rich] blockquote{margin:0;padding-inline-start:1em;border-inline-start:2px solid var(--c-border)}
.cs code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.cs .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cs fieldset{margin:0;padding:0;border:0;min-width:0}
.cs legend{padding:0}

/* media */
.cs .media{display:block;position:relative;overflow:hidden;width:100%}
.cs .media>picture{display:contents}
.cs .media>img,.cs .media>picture>img,.cs .media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,cover);object-position:var(--focal,50% 50%);transition:transform .6s var(--ease-out),opacity var(--dur-3) var(--ease-out)}
.cs .media[data-auto]>img,.cs .media[data-auto]>picture>img{position:relative;height:auto}
.cs .media>.alt{opacity:0}
@media (hover:hover) and (pointer:fine){.cs .media[data-swap]:hover>.alt,.cs .li:hover .media[data-swap]>.alt{opacity:1}}
.cs .media .play{position:absolute;inset:auto auto var(--s-3) var(--s-3);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c-page) 80%,transparent);color:var(--c-text)}
.cs .vbtns{position:absolute;z-index:3;display:flex;gap:var(--s-2);margin:12px}
.cs .vbtns[data-place=bottom-left]{left:0;bottom:0}.cs .vbtns[data-place=bottom-right]{right:0;bottom:0}.cs .vbtns[data-place=top-left]{left:0;top:0}.cs .vbtns[data-place=top-right]{right:0;top:0}
.cs .vbtns[data-place=bottom]{bottom:0;left:50%;translate:-50% 0}.cs .vbtns[data-place=top]{top:0;left:50%;translate:-50% 0}.cs .vbtns[data-place=left]{left:0;top:50%;translate:0 -50%}.cs .vbtns[data-place=right]{right:0;top:50%;translate:0 -50%}.cs .vbtns[data-place=center]{left:50%;top:50%;translate:-50% -50%}
.cs .vbtns button{display:grid;place-items:center;width:36px;height:36px;color:var(--c-on-media)}
.cs .vbtns[data-style=circle] button{border-radius:50%;background:color-mix(in srgb,var(--c-overlay) 50%,transparent)}
.cs .vbtns[data-style=plain] button{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.cs [data-clamp]{-webkit-tap-highlight-color:transparent}
.cs [data-clamp][data-full]{display:block!important;-webkit-line-clamp:unset!important;line-clamp:none!important;overflow:visible!important}
.cs .media[data-empty]{background:color-mix(in srgb,var(--c-text) 6%,var(--c-page))}
.cs .media[data-empty][data-auto]{aspect-ratio:1}
.cs .media[data-empty]>img,.cs .media[data-empty]>picture{visibility:hidden}
.cs .media[data-empty]::after{content:"";position:absolute;inset:0;margin:auto;width:28px;height:28px;background:currentColor;opacity:.28;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2015-3.09-3.09a2%202%200%200%200-2.82%200L6%2021%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2015-3.09-3.09a2%202%200%200%200-2.82%200L6%2021%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.cs .media .ph-note{position:absolute;inset:auto var(--s-3) var(--s-3) auto;font:500 11px/1.2 var(--t-body-s-ff);color:color-mix(in srgb,var(--c-text) 55%,transparent)}
.cs .zoomable{cursor:zoom-in}

/* buttons and small controls */
.cs .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);text-align:center;white-space:nowrap;transition:opacity var(--dur-1),background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),scale var(--press-out)}
.cs .btn[aria-busy]{opacity:.7;cursor:progress}
@media (hover:hover) and (pointer:fine){.cs .btn[data-variant=solid]:hover{opacity:.88}}
.cs .btn[disabled],.cs .btn[data-disabled=true]{opacity:.45;cursor:not-allowed}
.cs .badge{display:inline-flex;align-items:center;padding:3px 8px;width:fit-content}
.cs .icon{display:inline-grid;place-items:center;color:var(--fg,currentColor)}
.cs .icon svg{width:var(--size,20px);height:var(--size,20px)}
.cs .action{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--fg,currentColor);position:relative;transition:scale var(--press-out)}
.cs .action svg{width:var(--size,20px);height:var(--size,20px)}
.cs .action .count{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--c-accent);color:var(--c-on-accent);font:600 10px/17px var(--t-label-ff);text-align:center}
.cs .action .count[data-bump]{animation:cs-bump .46s var(--ease-out)}
.cs .action .count[data-bump]:is([data-count=brackets],[data-count=superscript]){display:inline-block}
.cs .action .count[data-count=dot]{min-width:0;width:8px;height:8px;padding:0;top:-2px;right:-3px}
.cs .action .count[data-count=brackets]{position:static;min-width:0;height:auto;padding:0;background:none;color:inherit;font:inherit}
.cs .action .count[data-count=superscript]{position:static;min-width:0;height:auto;padding:0;margin-inline-start:-2px;background:none;color:inherit;font-size:.7em;line-height:1;vertical-align:super}
.cs .action[data-float]{width:48px;height:48px;justify-content:center;border-radius:50%}
/* A header with behaviour.overlay sits over a page that opens with a hero: no background until scrolled or hovered. */
.cs [data-overlay]{position:relative;z-index:30;transition:background-color .2s,border-color .2s,color .2s}
.cs .pin-spot{display:none}.cs .pin-spot[data-on]{display:block}
.cs[data-hero-first] [data-overlay]{margin-bottom:calc(-1 * var(--overlay-h,64px))}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within){background:linear-gradient(color-mix(in srgb,var(--c-overlay) 32%,transparent),transparent)!important;border-color:transparent!important;color:var(--c-on-media);--fg:var(--c-on-media)}
.cs .ti-moon{display:var(--ti-moon,inline-flex)}.cs .ti-sun{display:var(--ti-sun,none)}
/* Theme and language switches cross-fade (runtime withTransition, html.cs-restyling while it runs; NAV_CSS keeps any other view transition's root still); less motion when asked. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Page changes: slides on phones, a cross-fade on a computer, the header and tab bar held still (lib/render/transitions.ts). */

::view-transition{pointer-events:none}
:root[data-cs-motion=spring]{--cs-slide:290ms;--cs-slide-ease:linear(0,.023,.08,.156,.241,.328,.412,.491,.564,.629,.687,.738,.783,.821,.854,.882,.906,.926,.943,.957,.969,.979,.987,.994,1)}
:root[data-cs-motion=calm]{--cs-slide:296ms;--cs-slide-ease:linear(0,.022,.076,.148,.229,.313,.396,.473,.546,.611,.67,.722,.767,.807,.841,.871,.896,.918,.936,.952,.965,.976,.986,.993,1);--cs-under:-20%}
@supports not (animation-timing-function:linear(0,1)){:root:is([data-cs-motion=spring],[data-cs-motion=calm]){--cs-slide-ease:cubic-bezier(.32,.72,0,1)}}
html:not(.cs-restyling)::view-transition-old(root),html:not(.cs-restyling)::view-transition-new(root){animation:none}
.cs-vt-mark{position:fixed;top:0;left:0;width:1px;height:1px;pointer-events:none}
::view-transition-group(.cs-fwd-in),::view-transition-group(.cs-back-in),::view-transition-group(.cs-tab-in){display:none}
::view-transition-group(.cs-still){animation:none;z-index:10}
::view-transition-old(.cs-still){display:none}
::view-transition-new(.cs-still){animation:none}
::view-transition-group(.cs-morph){z-index:5;animation-duration:var(--cs-slide,280ms);animation-timing-function:var(--cs-slide-ease,cubic-bezier(.32,.72,0,1))}
::view-transition-old(.cs-morph){height:100%;object-fit:cover;animation:none}
::view-transition-new(.cs-morph){display:none}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-old(root),html[data-cs-nav=back]:not(.cs-restyling)::view-transition-old(root),html[data-cs-nav=tab]:not(.cs-restyling)::view-transition-old(root){animation:cs-vt-out 200ms cubic-bezier(.16,1,.3,1) both}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-new(root),html[data-cs-nav=back]:not(.cs-restyling)::view-transition-new(root),html[data-cs-nav=tab]:not(.cs-restyling)::view-transition-new(root){animation:cs-vt-in 200ms cubic-bezier(.16,1,.3,1) both}
@media (max-width: 767px){
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-new(root){animation:cs-vt-from-end var(--cs-slide,280ms) var(--cs-slide-ease,cubic-bezier(.32,.72,0,1)) both}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-old(root){animation:cs-vt-to-under var(--cs-slide,280ms) var(--cs-slide-ease,cubic-bezier(.32,.72,0,1)) both,cs-vt-dim var(--cs-slide,280ms) var(--cs-slide-ease,cubic-bezier(.32,.72,0,1)) both}
html[data-cs-nav=back]:not(.cs-restyling)::view-transition-old(root){z-index:1;animation:cs-vt-to-end var(--cs-slide,280ms) var(--cs-slide-ease,cubic-bezier(.32,.72,0,1)) both}
html[data-cs-nav=back]:not(.cs-restyling)::view-transition-new(root){animation:cs-vt-from-under var(--cs-slide,280ms) var(--cs-slide-ease,cubic-bezier(.32,.72,0,1)) both,cs-vt-undim var(--cs-slide,280ms) var(--cs-slide-ease,cubic-bezier(.32,.72,0,1)) both}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-group(root),html[data-cs-nav=back]:not(.cs-restyling)::view-transition-group(root){background:#000}
}
@keyframes cs-vt-in{from{opacity:0}}
@keyframes cs-vt-out{to{opacity:0}}
@keyframes cs-vt-from-end{from{transform:translateX(100%)}}
@keyframes cs-vt-to-end{to{transform:translateX(100%)}}
@keyframes cs-vt-to-under{to{transform:translateX(var(--cs-under,-28%))}}
@keyframes cs-vt-from-under{from{transform:translateX(var(--cs-under,-28%))}}
@keyframes cs-vt-dim{to{opacity:.9}}
@keyframes cs-vt-undim{from{opacity:.9}}
@media (prefers-reduced-motion: reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-group(root),html[data-cs-nav=back]:not(.cs-restyling)::view-transition-group(root){background:none}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-old(root),html[data-cs-nav=back]:not(.cs-restyling)::view-transition-old(root),html[data-cs-nav=tab]:not(.cs-restyling)::view-transition-old(root){animation:cs-vt-out 200ms cubic-bezier(.16,1,.3,1) both!important}
html[data-cs-nav=fwd]:not(.cs-restyling)::view-transition-new(root),html[data-cs-nav=back]:not(.cs-restyling)::view-transition-new(root),html[data-cs-nav=tab]:not(.cs-restyling)::view-transition-new(root){animation:cs-vt-in 200ms cubic-bezier(.16,1,.3,1) both!important}
::view-transition-old(.cs-morph){display:none}
::view-transition-new(.cs-morph){display:block;animation:cs-vt-in 200ms cubic-bezier(.16,1,.3,1) both!important}
}

html.cs-theming,html.cs-theming *{transition:background-color .35s,color .35s,border-color .35s,fill .35s,stroke .35s!important}
.cs .logo{color:var(--fg,currentColor);white-space:nowrap}
.cs .fav{display:inline-grid;place-items:center;box-sizing:border-box;min-width:36px;min-height:36px;border-radius:50%;transition:scale var(--press-out);color:var(--fg,currentColor);background:color-mix(in srgb,var(--c-page) 72%,transparent)}
.cs .fav[data-on=true] svg{fill:currentColor}
/* an icon heart is drawn 36 px; it takes a 44 px tap (positioned by the theme, else here) */
.cs .fav:not([data-display=button]){position:relative}
.cs .fav:not([data-display=button])::before{content:"";position:absolute;inset:-4px}
/* an overlay's close (the search panel's ×) is drawn at its icon's size; it takes a 44 px tap */
.cs .ov .action[data-action=close]::before{content:"";position:absolute;inset:calc((44px - 100%) / -2)}
.cs .fav[data-display=button]{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:auto;padding:var(--s-2) var(--s-4);border:1.5px solid var(--c-border);border-radius:var(--r-s);background:none}

/* menu */
.cs .menu{color:var(--fg,currentColor)}
.cs .menu a{display:inline-flex;align-items:center;gap:var(--s-2);padding-block:2px;border-bottom:1.5px solid transparent;transition:border-color .15s,opacity .15s}
.cs .menu a[aria-current=page][data-active=underline]{border-bottom-color:currentColor}
.cs .menu a[aria-current=page][data-active=bold]{font-weight:700}
.cs .menu a[aria-current=page][data-active=colour]{color:var(--c-accent)}
@media (hover:hover) and (pointer:fine){.cs .menu a:hover{opacity:.7}}
.cs .menu svg{width:20px;height:20px}
.cs .menu[data-display=icon] a{width:40px;height:40px;justify-content:center;border:1px solid var(--c-border);border-radius:var(--r-pill);padding:0}
@media (hover:hover) and (pointer:fine){.cs .menu[data-display=icon] a:hover{opacity:1;border-color:currentColor}}
.cs .menu .mk-tri{display:inline-block;width:0;height:0;border-block:3px solid transparent;border-inline-start:6px solid currentColor;transition:transform .2s}

/* price */
.cs .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);color:var(--fg,currentColor)}
.cs .price[data-sale=true] .now{color:var(--sale,var(--c-sale))}
.cs .price .was{text-decoration:line-through;opacity:.7;font-size:.86em;font-weight:400}
.cs .price .save{font-size:.82em;color:var(--sale,var(--c-sale));font-weight:600}

/* swatches, options */
.cs .swatches{display:flex;gap:6px;align-items:center;--size:16px}
.cs .swatch{width:var(--size);height:var(--size);border-radius:50%;border:1px solid color-mix(in srgb,var(--c-text) 20%,transparent);display:inline-block}
.cs .swatches[data-shape=square] .swatch{border-radius:3px}
.cs .swatches[data-shape=pill] .swatch{border-radius:999px;width:calc(var(--size) * 1.7)}
.cs .swatches[data-shape=rect] .swatch{border-radius:2px;width:calc(var(--size) * 1.55)}
.cs .swatches .more{font-size:12px;color:var(--c-text-muted)}
.cs .swatches .more[data-more=tile]{display:inline-grid;place-items:center;min-width:var(--size);height:var(--size);padding:0 3px;border:1px solid var(--c-border);border-radius:50%;font-size:9px;line-height:1}
.cs .swatches[data-shape=square] .more[data-more=tile],.cs .swatches[data-shape=rect] .more[data-more=tile]{border-radius:3px}
.cs .swatches[data-shape=pill] .more[data-more=tile]{border-radius:999px}
.cs .swatches[data-mark=ring] .swatch[data-current]{outline:1.5px solid var(--c-text);outline-offset:2px}
.cs .swatches[data-mark=border] .swatch[data-current]{border:2px solid var(--c-text)}
.cs .swatches[data-mark=underline] .swatch[data-current]{box-shadow:0 3px 0 -1px var(--c-text)}
.cs .swatches[data-mark=fill] .swatch[data-current]{outline:2px solid var(--c-extra-primary-edge,var(--c-primary));outline-offset:1px}
.cs .opts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cs .opt{min-width:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--c-border);border-radius:var(--opt-r,var(--r-s));text-align:center;transition:background-color .15s,color .15s,border-color .15s}
.cs .opt[data-selected=true]{border-color:var(--c-text);background:var(--c-text);color:var(--c-page)}
.cs .opt[data-sold=strike]{text-decoration:line-through;color:var(--c-text-muted)}
.cs .opt[data-sold=dim]{opacity:.4}
.cs .vp[data-display=chips] .opt{border-radius:999px}
.cs .vp[data-display=swatches] .opt{min-width:0;width:30px;height:30px;padding:0;border-radius:50%;border:2px solid var(--c-page);box-shadow:0 0 0 1px var(--c-border)}
.cs .vp[data-display=swatches] .opt[data-selected=true]{box-shadow:0 0 0 2px var(--c-text);background:var(--sw)}
.cs .vp .opt[aria-disabled=true]{cursor:not-allowed}
.cs .vp .opt-price{margin-inline-start:.5em;color:var(--c-text-muted)}
.cs .vp .opt[data-selected=true] .opt-price{color:inherit;opacity:.8}
.cs .vp[data-display=tiles] .opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;min-height:64px;padding:var(--s-2) var(--s-3)}
.cs .vp[data-display=tiles] .opt-price{margin:0;font:var(--t-caption-fw,400) var(--t-caption-fs,12px)/1.2 var(--t-caption-ff,inherit)}
.cs .vp[data-shape=circle] .opt{width:28px;height:28px}
.cs .vp[data-shape=square] .opt{width:28px;height:28px;border-radius:var(--r-s)}
.cs .vp[data-shape=pill] .opt{width:40px;height:24px;border-radius:999px}
.cs .vp[data-shape=rect] .opt{width:56px;height:36px;border-radius:var(--r-s)}
.cs .vp[data-display=swatches] .opt:has(>img){overflow:hidden}
/* a colour swatch is 28-30 px: it takes a tap 44 px tall and as wide as the gap to the next allows (a photo swatch clips to its shape, so keeps its own) */
.cs .vp[data-display=swatches] .opt:not(:has(>img)){position:relative}
.cs .vp[data-display=swatches] .opt:not(:has(>img))::before{content:"";position:absolute;inset:-8px -4px}
/* on a phone a colour swatch takes a full 44 px square (its neighbour's reach overlaps the gap between them), and the header's icons
   (drawn 20 px) a 44 px one round them; neither looks any different. ::after, as a stack's separator mark is its items' ::before */
@media (max-width:767px){
.cs .vp[data-display=swatches] .opt:not(:has(>img))::before{inset:calc((44px - 100%) / -2)}
.cs [data-role=header] .action:not([data-float])::after{content:"";position:absolute;inset:min(0px,calc((44px - 100%) / -2))}
}
.cs .vp[data-display=swatches] .opt>img{width:100%;height:100%;object-fit:cover}
.cs .vp .vp-row{display:flex;align-items:center;gap:var(--s-2)}
.cs .vp .vp-row>.more{font-size:var(--t-body-s-fs);color:var(--c-text-muted)}
.cs .vp .more-tile{display:grid;place-items:center;font-size:11px;color:var(--c-text)}
.cs .vp[data-display=swatches] .more-tile{width:30px;height:30px;padding:0;min-width:0;border-radius:50%}
.cs .vp[data-shape=circle] .more-tile{width:28px;height:28px}
.cs .vp[data-shape=square] .more-tile{width:28px;height:28px;border-radius:var(--r-s)}
.cs .vp[data-shape=pill] .more-tile{width:40px;height:24px;border-radius:999px}
.cs .vp[data-shape=rect] .more-tile{width:56px;height:36px;border-radius:var(--r-s)}
.cs .vp[data-mark] .opt[data-selected=true]{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.cs .vp[data-mark][data-display=swatches] .opt[data-selected=true]{background:var(--sw);box-shadow:0 0 0 1px var(--c-border)}
.cs .vp[data-mark=ring] .opt[data-selected=true]{outline:2px solid var(--c-text);outline-offset:2px}
.cs .vp[data-mark=border] .opt[data-selected=true]{border:2px solid var(--c-text)}
/* a chosen colour swatch: a ring in the text colour with a gap of the page's colour between it and the colour (a dark swatch inside a
   dark border could hardly be told from the rest) */
.cs .vp[data-mark=border][data-display=swatches] .opt[data-selected=true]{border-color:var(--c-page);box-shadow:0 0 0 2px var(--c-text)}
.cs .vp[data-mark=underline] .opt[data-selected=true]{box-shadow:inset 0 -2px 0 var(--c-text)}
.cs .vp[data-mark=underline][data-display=swatches] .opt[data-selected=true]{box-shadow:0 0 0 1px var(--c-border),0 5px 0 -3px var(--c-text);overflow:visible}
.cs .vp[data-mark=fill] .opt[data-selected=true]{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-extra-primary-edge,var(--c-primary))}
.cs .vp[data-mark=fill][data-display=swatches] .opt[data-selected=true]{box-shadow:0 0 0 2px var(--c-page),0 0 0 4px var(--c-extra-primary-edge,var(--c-primary))}
.cs .vp .vp-label{font-size:var(--t-body-s-fs);color:var(--c-text-muted);margin-bottom:var(--s-2)}
.cs .vp select{width:100%;padding:var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-s);background:var(--c-surface);color:var(--c-text);font:inherit}
.cs .qty{display:inline-flex;align-items:center;border:1px solid var(--c-border);border-radius:var(--r-s);height:fit-content}
.cs .qty button{width:36px;height:40px;display:grid;place-items:center}
.cs .qty span{min-width:28px;text-align:center}
.cs .qty[data-size=s] button{position:relative;width:30px;height:32px}
.cs .qty[data-size=s] button::before{content:"";position:absolute;inset:-6px -7px}

.cs .atc .atc-sep{opacity:.6}
.cs .atc .atc-price{font-variant-numeric:tabular-nums}

/* breadcrumbs */
.cs .crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);color:var(--fg,var(--c-text-muted))}
@media (hover:hover) and (pointer:fine){.cs .crumbs a:hover{text-decoration:underline}}

/* forms */
.cs .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs .field>label,.cs .field .flabel{font-size:var(--t-body-s-fs);color:var(--c-text-muted)}
.cs .field .control{position:relative;display:flex;align-items:center}
.cs .field input:not([type=radio]):not([type=checkbox]),.cs .field select,.cs .field textarea{width:100%;font:inherit;color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-s);padding:var(--s-3) var(--s-3);min-height:46px}
.cs .field textarea{min-height:110px;resize:vertical}
.cs .field[data-variant=filled] input,.cs .field[data-variant=filled] select,.cs .field[data-variant=filled] textarea{background:var(--c-surface-muted);border-color:transparent}
.cs .field[data-variant=underline] input,.cs .field[data-variant=underline] select{background:transparent;border-width:0 0 1.5px;border-radius:0;padding-inline:0}
.cs .field[data-size=l] input{min-height:56px;font-size:1.15em}
.cs .field input:focus,.cs .field select:focus,.cs .field textarea:focus{outline:none;border-color:var(--c-text)}
.cs .field .submit{position:absolute;right:var(--s-2);display:grid;place-items:center;width:34px;height:34px;color:var(--c-text)}
/* a search field with its own magnifier: the browser's clear button would draw over it */
.cs .field:has(.submit) input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.cs .field .reveal{position:absolute;right:var(--s-3);font-size:var(--t-body-s-fs);color:var(--c-text-muted);background:none;border:0;cursor:pointer;padding:var(--s-1)}
.cs .field:has(.reveal) input{padding-right:5.5em}
.cs .field[data-invalid] input,.cs .field[data-invalid] select,.cs .field[data-invalid] textarea{border-color:var(--c-error)}
.cs .field-error{color:var(--c-error);font-size:var(--t-body-s-fs)}
.cs .form-error,.cs .form-note{margin:0;padding:var(--s-3) var(--s-4);border-radius:var(--r-s);font-size:var(--t-body-s-fs)}
.cs .form-error{color:var(--c-error);background:color-mix(in srgb,var(--c-error) 8%,transparent);border:1px solid color-mix(in srgb,var(--c-error) 30%,transparent)}
.cs .form-note{color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border)}
.cs form[aria-busy] button[type=submit]{opacity:.6;cursor:progress}
.cs .action-note{color:var(--c-error);font-size:var(--t-body-s-fs)}
.cs .field .help{font-size:12px;color:var(--c-text-muted)}
.cs .field[data-floating] .control>label{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);color:var(--c-text-muted);pointer-events:none;transition:top var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),font-size var(--dur-1) var(--ease-out),color var(--dur-1);font-size:var(--t-body-m-fs);max-width:calc(100% - 2 * var(--s-3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs .field[data-floating] input:focus+label,.cs .field[data-floating] input:not(:placeholder-shown)+label{top:6px;transform:none;font-size:11px}
.cs .field[data-floating] input{padding-top:20px;padding-bottom:6px}
.cs .check{display:flex;flex-direction:row;gap:var(--s-2);align-items:flex-start;font-size:var(--t-body-s-fs);line-height:1.4;cursor:pointer}
.cs .check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--c-extra-primary-edge,var(--c-primary));flex:none}
.cs .check{flex-wrap:wrap}.cs .check>span{flex:1 1 0;min-width:0}.cs .check>.field-error{flex-basis:100%;margin-left:calc(18px + var(--s-2))}
.cs .check a{text-decoration:underline}
.cs .radios{display:flex;flex-direction:column;gap:var(--s-2)}
.cs .radios label{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-s);cursor:pointer}
.cs .radios label:has(input:checked){border-color:var(--c-text)}
.cs .radios input{accent-color:var(--c-extra-primary-edge,var(--c-primary));width:18px;height:18px;margin:0;flex:none}
.cs .choices{display:flex;flex-direction:column;gap:6px}
.cs .choices>legend{margin-bottom:6px}
.cs .choices .choice-list{display:flex;gap:var(--s-2);flex-wrap:wrap}
.cs .choices .choice-opt{position:relative;display:flex;align-items:center;gap:var(--s-3);cursor:pointer}
.cs .choices .choice-words{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.cs .choices .choice-label{display:inline-flex;align-items:center;gap:var(--s-2)}
.cs .choices .choice-help{font-size:var(--t-caption-fs,12px);color:var(--c-text-muted)}
.cs .choices[data-display=segmented] .choice-list,.cs .choices[data-display=chips] .choice-list{flex-wrap:wrap}
.cs .choices:is([data-display=segmented],[data-display=chips]) input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cs .choices[data-display=segmented] .choice-list{flex-wrap:nowrap;gap:0}
.cs .choices[data-display=segmented] .choice-opt{flex:1 1 0;justify-content:center;text-align:center;padding:var(--s-3) var(--s-3);border:1px solid var(--c-border);margin-inline-start:-1px}
.cs .choices[data-display=segmented] .choice-opt:first-child{margin:0;border-start-start-radius:var(--r-s);border-end-start-radius:var(--r-s)}
.cs .choices[data-display=segmented] .choice-opt:last-child{border-start-end-radius:var(--r-s);border-end-end-radius:var(--r-s)}
.cs .choices[data-display=segmented] .choice-words{flex:0 1 auto;align-items:center}
.cs .choices[data-display=segmented] .choice-opt:has(input:checked){background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-extra-primary-edge,var(--c-primary));z-index:1}
@media (max-width:359px){.cs .choices[data-display=segmented] .choice-list{flex-direction:column}.cs .choices[data-display=segmented] .choice-opt{margin:-1px 0 0;border-radius:0!important}}
.cs .choices[data-display=chips] .choice-opt{padding:6px 14px;border:1px solid var(--c-border);border-radius:999px;font-size:var(--t-body-s-fs)}
.cs .choices[data-display=chips] .choice-opt:has(input:checked){background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-extra-primary-edge,var(--c-primary))}
.cs .choices[data-display=cards] .choice-list{flex-direction:column}
.cs .choices[data-display=cards] .choice-opt{padding:var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-m)}
.cs .choices[data-display=cards] .choice-opt:has(input:checked){border:2px solid var(--c-text);padding:calc(var(--s-4) - 1px)}
.cs .choices[data-display=cards] input{accent-color:var(--c-extra-primary-edge,var(--c-primary));width:18px;height:18px;margin:0;flex:none}
.cs .choices .choice-pic{width:48px;height:48px;object-fit:cover;border-radius:var(--r-s);flex:none}
.cs .choices .choice-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.cs .toggle{display:flex;gap:var(--s-3);align-items:center;cursor:pointer;font-size:var(--t-body-s-fs)}
.cs .toggle i{width:38px;height:22px;border-radius:11px;background:var(--c-border);position:relative;transition:background .15s;flex:none}
.cs .toggle i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--c-page);transition:left .15s}
.cs .toggle input{position:absolute;opacity:0;pointer-events:none}
.cs .toggle input:checked+i{background:var(--c-primary)}
.cs .toggle input:checked+i::after{left:19px}
.cs .form-done{padding:var(--s-4);border-radius:var(--r-s);background:var(--c-surface-muted)}

/* listing controls */
.cs .filters{display:flex;flex-direction:column;gap:var(--s-2)}
.cs .filters[data-display=bar],.cs .filters[data-display=dropdowns]{flex-direction:row;flex-wrap:wrap;gap:var(--s-2)}
.cs .facet{border-bottom:1px solid var(--c-border)}
.cs .facet>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:var(--s-3) 0;cursor:pointer;font-weight:600}
.cs .facet>summary::-webkit-details-marker{display:none}
.cs .facet>summary::after{content:"+";font-weight:400}
.cs .facet[open]>summary::after{content:"−"}
.cs .facet .values{display:flex;flex-wrap:wrap;gap:var(--s-2);padding-bottom:var(--s-4)}
.cs .facet[data-control=links] .values,.cs .facet[data-control=checkbox] .values{flex-direction:column;gap:var(--s-2)}
.cs .facet .count{color:var(--c-text-muted);font-size:.85em;margin-left:4px}
.cs .filters[data-display=bar] .facet,.cs .filters[data-display=dropdowns] .facet{border:1px solid var(--c-border);border-radius:999px;padding:0 var(--s-4);position:relative}
.cs .filters[data-display=bar] .facet>summary,.cs .filters[data-display=dropdowns] .facet>summary{padding:var(--s-2) 0;gap:var(--s-2)}
.cs .filters[data-display=bar] .facet .values,.cs .filters[data-display=dropdowns] .facet .values{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:220px;padding:var(--s-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-m);box-shadow:var(--sh-m)}
.cs .range{display:flex;align-items:center;gap:var(--s-2);width:100%}
.cs .range input{width:100%;accent-color:var(--c-extra-primary-edge,var(--c-primary))}
.cs .range span{font-size:12px;color:var(--c-text-muted);white-space:nowrap}
.cs .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--c-border);border-radius:999px;font-size:var(--t-body-s-fs);background:var(--c-surface)}
.cs .chip[data-selected=true]{background:var(--c-text);color:var(--c-page);border-color:var(--c-text)}
.cs .active-filters{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.cs .active-filters .clear{text-decoration:underline;font-size:var(--t-body-s-fs)}
.cs .sort{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-body-s-fs)}
.cs .sort select{font:inherit;color:var(--c-text);background:transparent;border:0;padding:var(--s-2) 0;cursor:pointer}
.cs .sort .links{display:flex;gap:var(--s-3)}
.cs .sort a[data-selected=true]{text-decoration:underline;text-underline-offset:4px}
.cs .sort-radio{display:flex;flex-direction:column;gap:var(--s-2)}
.cs .sort-radio>legend{margin-bottom:var(--s-2);font-weight:600}
.cs .sort-opt{display:flex;align-items:center;gap:var(--s-3);cursor:pointer}
.cs .sort-opt input{accent-color:var(--c-extra-primary-edge,var(--c-primary));width:18px;height:18px;margin:0;flex:none}
.cs .viewswitch{display:flex;align-items:center}
/* one drawing per run of screens that show the switch alike (commerce.tsx ViewSwitch), each shown on its own screens */
.cs .viewswitch>.vs-part{display:flex;gap:var(--s-1);align-items:center}
@media (min-width:1024px){.cs .viewswitch>.vs-part:not([data-screens~=base]){display:none}}
@media (min-width:768px) and (max-width:1023px){.cs .viewswitch>.vs-part:not([data-screens~=tablet]){display:none}}
@media (max-width:767px){.cs .viewswitch>.vs-part:not([data-screens~=phone]){display:none}}
.cs .viewswitch .vs-label{margin-inline-end:var(--s-2);color:var(--c-text-muted);font-size:var(--t-body-s-fs)}
.cs .viewswitch [data-display=numbers] button{width:auto;min-width:24px;padding:0 4px;background:none;font-size:var(--t-body-s-fs)}
.cs .viewswitch [data-display=numbers] button[data-selected=true]{text-decoration:underline;text-underline-offset:4px;background:none}
.cs .viewswitch .vs-toggle{width:auto;padding:0 var(--s-2);color:var(--c-text);font-size:var(--t-body-s-fs)}
.cs .viewswitch button{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-s);color:var(--c-text-muted)}
.cs .viewswitch button[data-selected=true]{color:var(--c-text);background:var(--c-surface-muted)}
.cs .pager{display:flex;gap:var(--s-2);align-items:center;justify-content:center;flex-wrap:wrap}
.cs .pager a,.cs .pager span{min-width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-s)}
.cs .pager [aria-current=page]{background:var(--c-text);color:var(--c-page)}
.cs .pager .bar{width:180px;height:3px;background:var(--c-border);border-radius:2px;overflow:hidden}
.cs .pager .bar i{display:block;height:100%;background:var(--c-text)}

/* small widgets */
.cs .rating{display:inline-flex;align-items:center;gap:6px;color:var(--fg,currentColor);font-size:var(--t-body-s-fs)}
.cs .rating .stars{position:relative;display:inline-block;letter-spacing:2px;color:color-mix(in srgb,var(--fg,var(--c-text)) 25%,transparent);font-size:var(--size,14px);line-height:1}
.cs .rating .stars i{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;font-style:normal;color:var(--fg,var(--c-text))}
.cs .rating .n{font-weight:600}
.cs .rating .c{color:var(--c-text-muted)}
.cs .rating[data-display=number-star]{gap:3px}
.cs .rating[data-display=number-star] .star{color:var(--fg,var(--c-text));font-size:.95em;line-height:1}
.cs .countdown{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;color:var(--fg,currentColor)}
.cs .countdown .boxes{display:flex;gap:var(--s-2)}
.cs .countdown .box{min-width:56px;padding:var(--s-2) var(--s-3);border:1.5px solid currentColor;border-radius:var(--r-s);text-align:center;line-height:1.1}
.cs .countdown .box b{display:block;font-size:1.5em;font-variant-numeric:tabular-nums}
.cs .countdown .box small{font-size:.7em;opacity:.8}
.cs .countdown .inline{font-variant-numeric:tabular-nums;font-weight:600}
.cs .progress{display:flex;flex-direction:column;gap:var(--s-2);width:100%}
.cs .progress .label{font-size:var(--t-body-s-fs)}
.cs .progress .track{height:var(--bar,6px);border-radius:999px;background:var(--track,var(--c-surface-muted));overflow:hidden}
.cs .progress .fill{height:100%;background:var(--tone,var(--c-primary));border-radius:inherit;transition:width .4s ease}
.cs .progress[data-size=s]{--bar:4px}.cs .progress[data-size=l]{--bar:10px}
.cs .progress .segs{display:flex;gap:4px}
.cs .progress .segs i{flex:1;height:var(--bar,6px);border-radius:3px;background:var(--track,var(--c-surface-muted))}
.cs .progress .segs i[data-on=true]{background:var(--tone,var(--c-primary))}
.cs .progress .ring{width:var(--ring,72px);height:var(--ring,72px);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--tone,var(--c-primary)) calc(var(--p) * 1turn),var(--track,var(--c-surface-muted)) 0)}
.cs .progress .ring::before{content:"";grid-area:1/1;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:50%;background:var(--c-page)}
.cs .progress .ring b{grid-area:1/1;position:relative;font-size:14px}
.cs .progress[data-size=l]{--ring:96px}
.cs .steps{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.cs .steps .step{display:flex;align-items:center;gap:var(--s-2);color:var(--c-text-muted)}
.cs .steps .step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-size:12px}
.cs .steps .step[data-on=true]{color:var(--tone,var(--c-text));font-weight:600}
.cs .steps .step[data-done=true]{color:var(--c-text)}
.cs .steps .line{flex:1;min-width:24px;height:1px;background:var(--c-border)}
.cs .steps .sep{display:inline-grid;place-items:center;color:var(--c-text-muted)}
.cs .steps[data-display=dots] .step b{width:10px;height:10px;font-size:0;background:currentColor}
.cs .table{width:100%;overflow-x:auto}
.cs .table table{width:100%;border-collapse:collapse}
.cs .table th,.cs .table td{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--c-border)}
.cs .table th{font-weight:600}
.cs .table[data-stripes=true] tr:nth-child(even) td{background:var(--c-surface-muted)}
.cs .table tr>:first-child[data-head=true]{font-weight:600}
.cs .toc .toc-title{margin:0 0 var(--s-2);font-weight:600}
.cs .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--toc-gap,var(--s-2))}
.cs .toc li[data-level="3"]{padding-inline-start:var(--s-4)}
.cs .toc a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.cs .toc a:hover{text-decoration:underline}}
.cs :is(h2,h3)[id]{scroll-margin-top:var(--header-h,96px)}
.cs .map,.cs .embed{display:grid;place-items:center;text-align:center;color:var(--c-text-muted);background:var(--c-surface-muted)}
.cs .map .pin{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4)}
.cs .map .pin svg{width:32px;height:32px;color:var(--c-accent)}
.cs .map .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--c-border) 1px,transparent 1px),linear-gradient(90deg,var(--c-border) 1px,transparent 1px);background-size:48px 48px;opacity:.5}
.cs .map a{text-decoration:underline;color:var(--c-text);position:relative}
.cs .map[data-tone=greyscale] .grid-lines{filter:grayscale(1)}
.cs .map[data-tone=muted] .grid-lines{opacity:.25}
.cs .map[data-tone=dark]{background:color-mix(in srgb,var(--c-text) 85%,var(--c-page));color:var(--c-page)}
.cs .embed .card{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4)}
.cs .payicons{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cs .payicon{display:inline-grid;place-items:center;height:calc(var(--size,20px) + 6px);padding:0 8px;border:1px solid var(--c-border);border-radius:4px;font:700 10px/1 var(--t-label-ff);letter-spacing:.02em;background:var(--c-surface);color:var(--c-text)}
.cs .payicon[data-generic]{display:inline-flex;gap:4px;font-weight:600;text-transform:none}
.cs .payicon[data-generic] svg{width:14px;height:14px}
.cs .payicons[data-display=mono] .payicon{background:transparent;color:var(--c-text-muted)}
.cs .payicons[data-display=colour] .payicon[data-m=visa]{color:#1a1f71}
.cs .payicons[data-display=colour] .payicon[data-m=mastercard]{color:#eb001b}
.cs .payicons[data-display=colour] .payicon[data-m=halyk]{color:#00805f}
.cs .payicons[data-display=colour] .payicon[data-m=freedom]{color:#0f9d58}
.cs .expresspay>.lay{display:flex;gap:var(--s-2)}
.cs .expresspay .xp{flex:1 1 auto;white-space:nowrap;padding:0 var(--s-4);display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:var(--r-s);font-weight:600;background:var(--c-text);color:var(--c-page)}
.cs .expresspay .xp[data-generic]{background:transparent;color:var(--c-text);border:1.5px solid var(--c-border)}
.cs .expresspay .xp[data-m=buy-now]{background:transparent;color:var(--c-text);border:1.5px solid var(--c-text)}
.cs .sealed{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border:1px dashed var(--c-border);border-radius:var(--r-m);background:var(--c-surface)}
.cs .sealed .row{display:flex;justify-content:space-between;align-items:center;padding:var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-s)}
.cs .sealed small{color:var(--c-text-muted)}

/* disclosure, tabs */
:where(.cs details.disclosure){border-bottom:1px solid var(--c-border)}
.cs details.disclosure>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-4) 0;cursor:pointer}
.cs details.disclosure>summary::-webkit-details-marker{display:none}
/* The marker is a centred box as big as its icon: an inline icon would sit on the text's baseline (a few
   pixels high) and a turning chevron would swing round a box taller than itself. */
.cs .disclosure .mk,.cs .disclosure .mk>span{display:grid;place-items:center}
.cs details.disclosure>summary .mk{transition:transform var(--dur-2) var(--ease-out);flex:none}
.cs details.disclosure[open]>summary .mk[data-m=chevron]{transform:rotate(180deg)}
.cs details.disclosure[open]>summary .mk .closed,.cs details.disclosure:not([open])>summary .mk .opened{display:none}
.cs details.disclosure>.lay{display:flex;flex-direction:column;gap:var(--s-3);padding-bottom:var(--s-5)}
.cs details.disclosure::details-content{block-size:0;overflow:clip;overflow-clip-margin:6px;transition:block-size var(--dur-2) var(--ease-out),content-visibility var(--dur-2) allow-discrete}
.cs details.disclosure[open]::details-content{block-size:auto}
.cs .disclosure .dval{margin-inline-start:auto;color:var(--c-text-muted);font-weight:400}
.cs .disclosure [data-mp=start]{justify-content:flex-start}
:where(.cs div.disclosure){border-bottom:1px solid var(--c-border)}
.cs div.disclosure>.dsum{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);width:100%;padding:var(--s-4) 0;text-align:start}
.cs div.disclosure>.dtitle{display:none;align-items:center;gap:var(--s-3);padding:var(--s-4) 0}
.cs div.disclosure>.lay{display:flex;flex-direction:column;gap:var(--s-3);padding-bottom:var(--s-5)}
.cs div.disclosure:not([data-open=true])>.lay{display:none}
.cs div.disclosure[data-toggled]>.lay{overflow:clip;overflow-clip-margin:6px;transition:block-size var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete}
.cs div.disclosure[data-toggled]:not([data-open=true])>.lay{block-size:0}
@starting-style{.cs div.disclosure[data-toggled][data-open=true]>.lay{block-size:0}}
.cs div.disclosure>.dsum .mk{transition:transform var(--dur-2) var(--ease-out);flex:none}
.cs div.disclosure[data-open=true]>.dsum .mk[data-m=chevron]{transform:rotate(180deg)}
.cs div.disclosure[data-open=true]>.dsum .mk .closed,.cs div.disclosure:not([data-open=true])>.dsum .mk .opened{display:none}
.cs .tabs .tabrow{display:flex;gap:var(--s-5);border-bottom:1px solid var(--c-border);margin-bottom:var(--s-5);overflow-x:auto}
.cs .tabs .tabrow button{padding:var(--s-3) 0;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;color:var(--c-text-muted)}
.cs .tabs .tabrow button[data-selected=true]{border-bottom-color:var(--c-text);color:var(--c-text)}
.cs .tabs .panel>.lay{display:flex;flex-direction:column;gap:var(--s-5)}
.cs .tabs:is([data-variant=boxed],[data-variant=pills],[data-variant=plain])>.tabrow{border-bottom:0;gap:var(--s-2)}
.cs .tabs:is([data-variant=boxed],[data-variant=pills])>.tabrow>button{margin:0;padding:var(--s-2) var(--s-4);border:1px solid transparent}
.cs .tabs[data-variant=boxed]>.tabrow>button{border-radius:var(--r-s)}
.cs .tabs[data-variant=boxed]>.tabrow>button[data-selected=true]{border-color:var(--c-text)}
.cs .tabs[data-variant=pills]>.tabrow>button{border-radius:999px;border-color:var(--c-border)}
.cs .tabs[data-variant=pills]>.tabrow>button[data-selected=true]{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-extra-primary-edge,var(--c-primary))}
.cs .tabs[data-variant=plain]>.tabrow{gap:var(--s-5)}
.cs .tabs[data-variant=plain]>.tabrow>button{border-bottom:0;margin:0}
.cs .tabs[data-variant=plain]>.tabrow>button[data-selected=true]{font-weight:700}
.cs .tabs[data-variant=index]>.tabrow{border-bottom:0;gap:var(--s-2) var(--s-5);flex-wrap:wrap;overflow-x:visible}
.cs .tabs[data-variant=index]>.tabrow>button{padding:0;margin:0;border:0;white-space:normal;text-align:start;color:var(--c-text-muted);transition:color .25s ease}
.cs .tabs[data-variant=index]>.tabrow>button[data-selected=true]{color:var(--c-text)}
/* the panel a visitor switches to fades in (data-switched: set by a switch in the tab row, never on the page's first paint nor
   for an accordion); short and from wherever it is, so a quick run along the words never queues */
@media (prefers-reduced-motion:no-preference){.cs .tabs[data-variant=index][data-switched]>.lay>.panel{animation:tabs-index-in .2s cubic-bezier(.23,1,.32,1)}}
@keyframes tabs-index-in{from{opacity:0}}
.cs .tabs>.tabsel{width:100%;margin-bottom:var(--s-4);padding:var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-s);background:var(--c-surface);color:var(--c-text);font:inherit}
.cs .tabs>.accrow>.acc{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);width:100%;padding:var(--s-4) 0;border-bottom:1px solid var(--c-border);text-align:start}
.cs .tabs>.accrow>.acc::after{content:"+";font-weight:400}
.cs .tabs>.accrow>.acc[aria-expanded=true]::after{content:"−"}
.cs .tabs>.lay>.panel{padding-block:var(--s-3)}
.cs .tabs[data-active="0"]>.lay>.panel:not(:nth-child(1)){display:none}
.cs .tabs[data-active="1"]>.lay>.panel:not(:nth-child(2)){display:none}
.cs .tabs[data-active="2"]>.lay>.panel:not(:nth-child(3)){display:none}
.cs .tabs[data-active="3"]>.lay>.panel:not(:nth-child(4)){display:none}
.cs .tabs[data-active="4"]>.lay>.panel:not(:nth-child(5)){display:none}
.cs .tabs[data-active="5"]>.lay>.panel:not(:nth-child(6)){display:none}
.cs .tabs[data-active="6"]>.lay>.panel:not(:nth-child(7)){display:none}
.cs .tabs[data-active="7"]>.lay>.panel:not(:nth-child(8)){display:none}
/* a listing's grid as the shopper set it with a view switch (lib/render/view.ts): each screen its own pick, over the grid's own columns */
@media (min-width:1024px){.cs .lay[data-view~=base]{grid-template-columns:repeat(var(--view-cols),minmax(0,1fr))!important}}
@media (min-width:768px) and (max-width:1023px){.cs .lay[data-view~=tablet]{grid-template-columns:repeat(var(--view-cols-tablet),minmax(0,1fr))!important}}
@media (max-width:767px){.cs .lay[data-view~=phone]{grid-template-columns:repeat(var(--view-cols-phone),minmax(0,1fr))!important}}

/* list items */
.cs .li{min-width:0;position:relative}
.cs .li>.lay,.cs .li>*{height:100%}
.cs .carousel-wrap{position:relative}
.cs .carousel-nav{position:absolute;top:35%;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-page);box-shadow:var(--sh-s);z-index:4}
.cs .carousel-nav[data-dir=prev]{left:8px}.cs .carousel-nav[data-dir=next]{right:8px}
.cs .lay::-webkit-scrollbar{display:none}
.cs :has(>.c-arrows),.cs :has(>.c-ind){position:relative}
.cs .dots{display:flex;gap:6px;justify-content:center;padding-top:var(--s-3)}
.cs .dots button{width:7px;height:7px;padding:0;border-radius:50%;background:var(--c-border);transition:background .2s,transform .2s}
.cs .dots button[aria-current=true]{background:var(--fg,var(--c-text));transform:scale(1.15)}
.cs .sec[data-role] .carousel-nav,.cs .carousel-nav{color:var(--c-text)}
.cs .carousel-nav[disabled]{opacity:.35;cursor:default}
.cs .carousel-nav .c-x{display:inline-flex}.cs .carousel-nav .c-y{display:none}
/* carousel arrows (0.4): where they sit, then how they look */
.cs .c-arrows{display:contents}
.cs .c-arrows[data-place=outside]>.carousel-nav[data-dir=prev]{left:0}.cs .c-arrows[data-place=outside]>.carousel-nav[data-dir=next]{right:0}
.cs .c-arrows:is([data-place=below],[data-place=start],[data-place=end],[data-place=top-end],[data-place=bottom-end]){gap:8px;align-items:center}
.cs .c-arrows:is([data-place=below],[data-place=start],[data-place=end],[data-place=top-end],[data-place=bottom-end])>.carousel-nav{position:static;transform:none}
.cs .c-arrows[data-place=below]{justify-content:center;padding-top:var(--s-3)}
.cs .c-arrows[data-place=top-end]{justify-content:flex-end;padding-bottom:var(--s-3)}
.cs .c-arrows:is([data-place=start],[data-place=end]){position:absolute;top:50%;translate:0 -50%;z-index:4}
.cs .c-arrows[data-place=start]{left:8px}.cs .c-arrows[data-place=end]{right:8px}
.cs .c-arrows[data-place=bottom-end]{position:absolute;right:8px;bottom:8px;z-index:4}
.cs .c-arrows[data-style=plain]>.carousel-nav{background:transparent;box-shadow:none;color:var(--fg,var(--on-bg,currentColor))}
.cs .c-arrows[data-style=square]>.carousel-nav{border-radius:0;background:var(--c-primary);color:var(--c-on-primary);box-shadow:none}
.cs .c-arrows[data-style=line]>.carousel-nav{width:48px;background:transparent;box-shadow:none;border-radius:0;color:var(--fg,var(--on-bg,currentColor))}
.cs .c-arrows[data-style=line] svg{width:48px;height:24px}
.cs .c-arrows[data-style=line] .c-y svg{width:24px;height:48px}
/* carousel indicators (0.4) */
.cs .c-ind[data-place=over]{position:absolute;left:0;right:0;bottom:var(--s-3);z-index:4;padding:0}
.cs .c-ind:is([data-place=start],[data-place=end]){flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0}
.cs .c-ind[data-kind=dashes] button{width:18px;height:3px;border-radius:2px}
.cs .c-ind[data-kind=dashes] button[aria-current=true]{transform:none;width:28px}
.cs .c-ind:is([data-place=start],[data-place=end])[data-kind=dashes] button{width:3px;height:18px}
/* a dash or dot is 3-7 px: each takes a tap 44 px across its short side and up to the next one along it */
.cs .c-ind:is([data-kind=dashes],[data-kind=dots]) button,.cs .dots button{position:relative}
.cs .c-ind:is([data-kind=dashes],[data-kind=dots]) button::before,.cs .dots button::before{content:"";position:absolute;inset:-20px -3px}
.cs .c-ind:is([data-place=start],[data-place=end]):is([data-kind=dashes],[data-kind=dots]) button::before{inset:-3px -20px}
/* dashes and dots over a photo sit on a small capsule of the page's colour, as the photo counter does, so they read on any photo in light and dark mode (round controls; a theme with square controls keeps them bare) */
.cs:not([data-controls=square]) .c-ind[data-place=over]:is([data-kind=dashes],[data-kind=dots]){left:50%;right:auto;width:max-content;translate:-50% 0;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--c-page) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px)}
.cs:not([data-controls=square]) .c-ind[data-place=over]:is([data-kind=dashes],[data-kind=dots]) button{background:color-mix(in srgb,var(--c-text) 28%,transparent)}
.cs:not([data-controls=square]) .c-ind[data-place=over]:is([data-kind=dashes],[data-kind=dots]) button[aria-current=true]{background:var(--c-text)}
/* the picker's "В корзину" while a size or colour is still to choose: it says so (commerce.tsx chooseFirst) on a quiet plate, not a faded espresso one */
.cs .atc[data-waiting]{opacity:1!important;background:var(--c-surface-muted)!important;color:var(--c-text-muted)!important;border-color:transparent!important;box-shadow:none!important}
/* in dark mode a sheet is the raised surface (see the dark-mode rules at the end), which a muted plate melts into: there the plate is the ink over it (a browser without light-dark() drops this and keeps the plate above) */
.cs .sh[data-look=sheet] .atc[data-waiting]{background:light-dark(var(--c-surface-muted),color-mix(in srgb,var(--c-text) 9%,var(--c-surface)))!important}
.cs .c-ind[data-kind=progress]{padding-top:var(--s-3)}
.cs .c-ind[data-kind=progress][data-place=over]{padding:0 var(--s-4)}
.cs .c-track{display:block;position:relative;height:2px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--fg,var(--c-text)) 16%,transparent)}
.cs .c-thumb{position:absolute;top:0;bottom:0;left:0;width:calc(var(--c-w,var(--c-w0)) * 100%);border-radius:2px;background:var(--fg,var(--c-text));translate:calc(var(--c-p,0) * (1 / var(--c-w,var(--c-w0)) - 1) * 100%) 0;transition:translate .15s linear}
.cs .c-ind[data-kind=progress]:is([data-place=start],[data-place=end]){display:flex;align-self:stretch}
.cs .c-ind[data-kind=progress]:is([data-place=start],[data-place=end]) .c-track{width:2px;height:100%}
.cs .c-ind[data-kind=progress]:is([data-place=start],[data-place=end]) .c-thumb{left:0;right:0;bottom:auto;width:auto;height:calc(var(--c-w,var(--c-w0)) * 100%);translate:0 calc(var(--c-p,0) * (1 / var(--c-w,var(--c-w0)) - 1) * 100%)}
.cs .c-ind[data-kind=fraction]{text-align:center;padding-top:var(--s-3)}
.cs .c-frac{font:var(--t-caption-fw,500) var(--t-caption-fs,12px)/1.2 var(--t-caption-ff,inherit);font-variant-numeric:tabular-nums;color:var(--fg,var(--c-text))}
.cs .c-ind[data-kind=fraction][data-place=over]{left:auto;right:var(--s-3);padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--c-page) 82%,transparent)}
.cs .c-ind[data-kind=thumbnails]{gap:var(--s-2);padding-top:var(--s-3);overflow-x:auto;scrollbar-width:none}
.cs .c-ind[data-kind=thumbnails]:is([data-place=start],[data-place=end]){overflow:auto;justify-content:flex-start}
.cs .c-tn{flex:0 0 64px;width:64px;aspect-ratio:var(--c-tr,3/4);overflow:hidden;border-radius:var(--r-s);opacity:.6;transition:opacity .15s}
.cs .c-tn img{width:100%;height:100%;object-fit:cover}
.cs .c-tn[aria-current=true]{opacity:1;outline:1.5px solid var(--c-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.cs .c-tn:hover{opacity:1}}
/* a one-line carousel (an announcement): small arrows at the ends, vertically centred */
.cs .stack>.c-arrows[data-place=sides]>.carousel-nav{top:50%;transform:translateY(-50%);width:28px;height:28px;background:transparent;box-shadow:none;color:var(--fg,currentColor)}
.cs .stack>.c-arrows[data-place=sides]>.carousel-nav[data-dir=prev]{left:0}.cs .stack>.c-arrows[data-place=sides]>.carousel-nav[data-dir=next]{right:0}
/* marquee: two copies slide by their own width; paused on hover; still for less motion */
@keyframes cs-marquee{to{transform:translateX(-100%)}}
/* the node's own unlayered animation shorthand would win without !important */
.cs [data-marquee][data-rest]>.lay{animation-play-state:paused!important}
@media (hover:hover) and (pointer:fine){.cs [data-marquee]:hover>.lay{animation-play-state:paused!important}}
@media (prefers-reduced-motion: reduce){.cs [data-marquee]>.lay{animation:none!important}.cs [data-marquee]>.lay+.lay{display:none}.cs [data-marquee]{overflow-x:auto!important}}

/* menus that open: dropdown, mega menu, drawer, in place */
.cs .menu .mi{position:relative;display:inline-flex;flex-direction:column}
.cs .menu[data-arrange=column] .mi{display:flex}
.cs .menu .mi>a{display:inline-flex;align-items:center;gap:4px}
.cs .menu .mi>a svg{width:14px;height:14px;transition:transform .2s}
.cs .menu .mi[data-open=true]>a svg{transform:rotate(180deg)}
.cs .menu[data-opens=drawer] .mi>a svg{transform:none}
.cs .menu-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2);text-align:start}
.cs .menu-links li{text-align:start}
.cs .menu-links a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-block:2px;border:0!important;font:var(--pnl-font,var(--t-body-m-fw) var(--t-body-m-fs)/1.35 var(--t-body-m-ff));text-transform:var(--pnl-tt,none);letter-spacing:var(--pnl-ls,0);color:var(--c-text)}
@media (hover:hover) and (pointer:fine){.cs .menu-links a:hover span{text-decoration:underline;text-underline-offset:3px}}
.cs .menu-links small{font-size:var(--t-caption-fs);color:var(--c-text-muted)}
.cs .menu-links[data-depth="1"],.cs .menu-links[data-depth="2"]{padding:var(--s-1) 0 0 var(--s-3)}
.cs .menu-drop{position:absolute;top:100%;left:calc(-1 * var(--s-4));z-index:70;min-width:240px;padding-top:var(--s-3);animation:cs-drop var(--dur-2) var(--ease-out)}
.cs .menu-drop>.menu-links{background:var(--pnl-bg,var(--c-page));border-top:var(--pnl-bt,1px solid var(--c-border));border-right:var(--pnl-br,1px solid var(--c-border));border-bottom:var(--pnl-bb,1px solid var(--c-border));border-left:var(--pnl-bl,1px solid var(--c-border));border-radius:var(--pnl-r,var(--r-m));box-shadow:var(--pnl-sh,var(--sh-m));padding:var(--pnl-p,var(--s-4))}
.cs .menu-inline{padding:var(--s-2) 0 var(--s-1) var(--s-3)}
.cs .menu-mega{position:fixed;left:0;right:0;z-index:70;background:var(--pnl-bg,var(--c-page));border-top:var(--pnl-bt,1px solid var(--c-border));border-bottom:var(--pnl-bb,1px solid var(--c-border));border-radius:var(--pnl-r,0);box-shadow:var(--pnl-sh,var(--sh-m));animation:cs-drop var(--dur-2) var(--ease-out);color:var(--c-text);--fg:var(--c-text)}
.cs .mega-in{max-width:calc(var(--size-content) + 2 * var(--s-6));margin:0 auto;padding:var(--pnl-p,var(--s-6));display:flex;flex-direction:column;gap:var(--s-5);max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain}
.cs .mega-all{display:inline-flex;align-items:center;gap:var(--s-2);align-self:flex-start;font:var(--t-title-s-fw) var(--t-title-s-fs)/1.2 var(--t-title-s-ff);border:0!important}
.cs .mega-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-5)}
.cs .mega-tiles a{display:flex;flex-direction:column;gap:var(--s-2);border:0!important;text-transform:none;letter-spacing:0;font:var(--t-body-s-fw) var(--t-body-s-fs)/1.35 var(--t-body-s-ff)}
.cs .mega-tiles small{color:var(--c-text-muted);font-size:var(--t-caption-fs)}
.cs .mega-pic{display:block;aspect-ratio:1;overflow:hidden;background:var(--c-surface-muted);border-radius:var(--r-s)}
.cs .mega-pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
@media (hover:hover) and (pointer:fine){.cs .mega-tiles a:hover .mega-pic img{transform:scale(1.04)}}
.cs .mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-6)}
.cs .mega-head{display:block;margin-bottom:var(--s-2);font:var(--t-title-s-fw) var(--t-title-s-fs)/1.2 var(--t-title-s-ff);border:0!important}
.cs .menu-sub{position:fixed;top:0;bottom:0;left:0;z-index:95;border-left:env(safe-area-inset-left,0px) solid transparent;border-bottom:env(safe-area-inset-bottom,0px) solid transparent;overscroll-behavior:contain;width:min(420px,100vw);background:var(--pnl-bg,var(--c-page));color:var(--c-text);--fg:var(--c-text);box-shadow:var(--pnl-sh,var(--sh-l));padding:var(--pnl-p,var(--s-5));display:flex;flex-direction:column;gap:var(--s-4);overflow:auto;animation:cs-slide-l var(--dur-3) var(--ease-out)}
.cs .menu-back{display:inline-flex;align-items:center;gap:var(--s-1);align-self:flex-start;font:inherit;font-size:var(--t-body-s-fs);color:var(--c-text-muted)}
.cs .menu-sub-title{font:var(--t-title-m-fw) var(--t-title-m-fs)/1.2 var(--t-title-m-ff);border:0!important}
.cs .menu-sub-all{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--c-border)!important;font-size:var(--t-body-s-fs)}

/* choices: language and theme as options or a dropdown */
.cs .choice{display:inline-flex;align-items:center;position:relative;color:var(--fg,currentColor)}
.cs .choice[data-display=options]{gap:2px}
:where(.cs .choice[data-display=options]){padding:2px;border:1px solid var(--c-border);border-radius:999px}
.cs .choice[data-display=options] button{display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 var(--s-2);border-radius:var(--ch-r,999px);font:var(--ch-font,500 12px/1 var(--t-label-ff));letter-spacing:.04em;color:inherit;opacity:.65;transition:background .15s,opacity .15s}
.cs .choice[data-display=options] button[aria-pressed=true]{background:color-mix(in srgb,currentColor 12%,transparent);opacity:1}
.cs .choice[data-display=dropdown]>button{display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit}
.cs .choice[data-display=dropdown]>button>svg:last-child{width:14px;height:14px;transition:transform .2s}
.cs .choice[data-open=true]>button>svg:last-child{transform:rotate(180deg)}
.cs .choice ul{position:absolute;top:calc(100% + 8px);right:0;z-index:70;list-style:none;margin:0;padding:var(--s-2);min-width:180px;background:var(--c-page);color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--r-m);box-shadow:var(--sh-m);animation:cs-drop var(--dur-2) var(--ease-out)}
.cs .choice li button{display:flex;align-items:center;gap:var(--s-2);width:100%;padding:var(--s-2) var(--s-3);border-radius:var(--r-s);font:var(--t-body-s-fw) var(--t-body-s-fs)/1.2 var(--t-body-s-ff);text-align:left}
@media (hover:hover) and (pointer:fine){.cs .choice li button:hover{background:var(--c-surface-muted)}}
.cs .choice li button>svg:last-child:not(:first-child){margin-left:auto}

/* compare: before under, after on top cut at the divider */
.cs .compare{position:relative;overflow:hidden;touch-action:pan-y;user-select:none}
.cs .compare>.lay{display:grid;height:100%}
.cs .compare>.lay>*{grid-area:1/1;width:100%;height:100%}
.cs .compare>.lay>:nth-child(2){clip-path:inset(0 0 0 var(--cmp,50%))}
.cs .compare[data-orientation=vertical]>.lay>:nth-child(2){clip-path:inset(var(--cmp,50%) 0 0 0)}
.cs .compare .cmp-line{position:absolute;top:0;bottom:0;left:var(--cmp,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none;z-index:3}
.cs .compare[data-orientation=vertical] .cmp-line{left:0;right:0;width:auto;top:var(--cmp,50%);bottom:auto;height:2px;margin:-1px 0 0}
.cs .compare .cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.cs .compare[data-orientation=vertical] .cmp-knob{flex-direction:column}
.cs .compare[data-orientation=vertical] .cmp-knob svg:first-child{transform:rotate(180deg)}
.cs .compare .cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none}
.cs .compare[data-orientation=vertical] .cmp-range{writing-mode:vertical-lr;cursor:ns-resize}
.cs .compare .cmp-range:focus-visible~.cmp-line .cmp-knob{outline:3px solid var(--focus);outline-offset:2px}
.cs .compare .cmp-label{position:absolute;top:var(--s-3);z-index:2;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:500 12px/1.2 var(--t-label-ff);letter-spacing:.04em;pointer-events:none}
.cs .compare .cmp-label[data-side=before]{left:var(--s-3)}
.cs .compare .cmp-label[data-side=after]{right:var(--s-3)}
.cs .compare[data-orientation=vertical] .cmp-label[data-side=after]{top:auto;bottom:var(--s-3);left:var(--s-3);right:auto}

/* a logo picture; its dark version shows in dark colours */
.cs .logo[data-picture]{display:inline-flex;align-items:center;line-height:0}
.cs .logo[data-picture] img{display:block;height:var(--logo-h,28px);width:auto;max-width:100%}
.cs .logo[data-dark] .logo-dark{display:var(--ti-sun,none)}
.cs .logo[data-dark] .logo-light{display:var(--ti-moon,block)}

/* hotspots */
.cs .hotspot{position:relative}
.cs .hotspot .marker{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--fg,var(--c-page));color:var(--c-text);font:600 13px/1 var(--t-label-ff);box-shadow:0 2px 10px rgba(0,0,0,.2);border:2px solid color-mix(in srgb,var(--c-text) 12%,transparent)}
.cs .hotspot .marker::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--c-page);opacity:.6;animation:cs-ping 2s 3}
.cs .hotspot .pop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:260px;padding:var(--s-3);background:var(--c-surface);color:var(--c-text);border-radius:var(--r-m);box-shadow:var(--sh-m);z-index:10}
.cs .hotspot .pop>.lay{display:flex;flex-direction:column;gap:var(--s-2)}

/* overlays */
.cs .ov-root{position:fixed;inset:0;z-index:60;display:flex;pointer-events:none}
/* a bottom bar or toast sits at the screen's foot, lifted over the pinned buy bar and the tab bar by a translate (moved on the
   compositor when they come and go, where its bottom would lay it out again every frame) */
.cs .ov-root[data-kind=bar],.cs .ov-root[data-kind=toast]{inset:auto 0 0 0;translate:0 calc(-1 * (var(--cs-pin-bottom,0px) + var(--cs-tabbar,0px)));transition:translate var(--dur-2) var(--ease-out)}
.cs .ov-root[data-kind=toast][data-side=top]{inset:0 0 auto 0;translate:none}
.cs .ov-backdrop{position:absolute;inset:0;pointer-events:auto;animation:cs-fade var(--dur-2) linear}
.cs .ov-backdrop[data-b=dim]{background:rgba(0,0,0,var(--ov-veil,.42))}
.cs .ov-backdrop[data-b=blur]{background:rgba(0,0,0,var(--ov-veil,.18));backdrop-filter:blur(6px)}
.cs .ov{position:relative;pointer-events:auto;background:var(--c-page);color:var(--c-text);max-height:100dvh;overflow:auto;overscroll-behavior:contain;box-shadow:var(--sh-l)}
.cs .ov:focus-visible,.cs .ov-root[role=dialog]:focus-visible{outline:none}
.cs .ov>.lay{display:flex;flex-direction:column;gap:var(--s-4)}
.cs .ov[data-kind=drawer]{width:min(var(--ov-w,420px),100vw);height:100dvh;animation:cs-slide-r var(--dur-3) var(--ease-out)}
.cs .ov-root[data-kind=drawer][data-side=right]{justify-content:flex-end}
.cs .ov-root[data-kind=drawer][data-side=left] .ov{animation-name:cs-slide-l}
.cs .ov-root[data-kind=drawer][data-side=bottom]{align-items:flex-end}
.cs .ov-root[data-kind=drawer][data-side=top]{align-items:flex-start}
.cs .ov[data-kind=drawer]:is([data-side=bottom],[data-side=top]){width:100vw;height:auto;max-height:90dvh}
.cs .ov[data-kind=drawer][data-side=bottom]{animation-name:cs-slide-u}
.cs .ov[data-kind=drawer][data-side=top]{animation-name:cs-drop}
.cs .ov[data-kind=modal]{margin:auto;width:min(var(--ov-w,560px),calc(100vw - 32px));max-height:calc(100dvh - 48px);animation:cs-pop var(--dur-2) var(--ease-out)}
.cs .ov[data-kind=panel]{width:100%;align-self:flex-start;animation:cs-drop var(--dur-2) var(--ease-out)}
.cs .ov[data-kind=fullscreen]{width:100vw;height:100dvh;animation:cs-fade var(--dur-2) var(--ease-out)}
.cs .ov[data-kind=bar]{width:100%;box-shadow:0 -4px 24px rgba(0,0,0,.12);animation:cs-slide-u var(--dur-3) var(--ease-out)}
.cs .ov[data-kind=toast]{margin:var(--s-4);margin-left:auto;width:min(var(--ov-w,380px),calc(100vw - 32px));animation:cs-pop var(--dur-2) var(--ease-out)}
.cs .ov[data-kind=popover]{margin:auto;width:min(var(--ov-w,320px),calc(100vw - 32px));animation:cs-pop var(--dur-2) var(--ease-out)}
/* closing: the overlay stays drawn while it leaves the way it came (layout.tsx Overlay), faster than it arrived */
.cs .ov-root[data-leaving]{pointer-events:none}
.cs .ov-root[data-leaving] .ov-backdrop{animation:cs-out-fade var(--dur-out) linear both}
.cs .ov-root[data-leaving][data-kind=drawer] .ov-backdrop{animation-duration:var(--dur-2)}
.cs .ov-root[data-leaving] .ov{animation:cs-out-fade var(--dur-out) var(--ease-in) both}
.cs .ov-root[data-leaving] .ov:is([data-kind=modal],[data-kind=toast],[data-kind=popover]){animation-name:cs-out-pop}
.cs .ov-root[data-leaving] .ov[data-kind=panel],.cs .ov-root[data-leaving] .ov[data-kind=drawer][data-side=top]{animation-name:cs-out-up}
.cs .ov-root[data-leaving] .ov[data-kind=drawer]{animation-name:cs-out-r;animation-duration:var(--dur-2)}
.cs .ov-root[data-leaving][data-side=left] .ov[data-kind=drawer]{animation-name:cs-out-l}
.cs .ov-root[data-leaving] .ov:is([data-kind=bar],[data-kind=drawer][data-side=bottom]){animation-name:cs-out-d}
@media (max-width:767px){.cs .ov[data-kind=drawer]{width:min(var(--ov-w,100vw),100vw)}}
/* overlays keep their content inside the safe area while their background reaches the screen edge (viewport-fit=cover) */
.cs .ov:is([data-kind=drawer],[data-kind=fullscreen])>.lay{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.cs .ov[data-kind=drawer][data-side=bottom]>.lay{padding-top:0}
.cs .ov[data-kind=drawer][data-side=top]>.lay{padding-bottom:0}
.cs .ov:is([data-kind=fullscreen],[data-kind=bar],[data-kind=panel],[data-kind=drawer]:is([data-side=top],[data-side=bottom]))>.lay{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
.cs .ov[data-kind=drawer]:not([data-side=left],[data-side=top],[data-side=bottom])>.lay{padding-right:env(safe-area-inset-right,0px)}
.cs .ov[data-kind=drawer][data-side=left]>.lay{padding-left:env(safe-area-inset-left,0px)}
.cs .ov[data-kind=bar]>.lay{padding-bottom:max(0px,env(safe-area-inset-bottom,0px) - var(--cs-pin-bottom,0px) - var(--cs-tabbar,0px))}
.cs .ov-root[data-kind=toast]:not([data-side=top]){translate:0 calc(-1 * max(calc(var(--cs-pin-bottom,0px) + var(--cs-tabbar,0px)),env(safe-area-inset-bottom,0px)))}
.cs .ov-root[data-kind=toast][data-side=top]{top:env(safe-area-inset-top,0px)}

/* a product card's quick add (lib/render/quick-add-view.tsx): phones only, on the card's photo at its foot's end, a 44px
   target around a small round button in the page's colours (as the card's heart) */
.cs .qa{display:none}
@media (max-width:767px){
.cs [data-role=product-media]:has(>.qa){position:relative}
.cs .qa{display:grid;place-items:center;position:absolute;right:2px;bottom:2px;z-index:2;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--c-text);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cs .qa-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c-page) 86%,transparent);box-shadow:0 1px 4px color-mix(in srgb,var(--c-text) 16%,transparent)}
.cs .qa:focus-visible{outline:none}
.cs .qa:focus-visible .qa-dot{outline:2px solid var(--c-text);outline-offset:2px}
}

/* the phone tab bar (lib/render/tabbar-view.tsx): shown on phones only, pinned above the home indicator; the theme's
   tokens give its colours, corners, shadow and words (--tb-*, set on the bar). The page, the footer, bottom bars, toasts and
   the pinned buy bar keep clear of it through --cs-tabbar, its height with the home indicator's. */
.cs .tabbar{display:none}
@media (max-width:767px){
.cs[data-tabbar]{--tb-h:50px;--tb-gap:0px;--cs-tabbar:calc(var(--tb-h) + env(safe-area-inset-bottom,0px));padding-bottom:var(--cs-tabbar)}
.cs[data-tabbar][data-tabbar-labels]{--tb-h:56px}
.cs[data-tabbar=floating]{--tb-gap:10px;--cs-tabbar:calc(var(--tb-h) + max(var(--tb-gap),env(safe-area-inset-bottom,0px)) + var(--tb-gap))}
.cs[data-tabbar]:not([data-tabs]) [data-role=header] .action:is([data-action=menu],[data-action=search],[data-action=cart],[data-action=favourites]){display:none!important}
/* a bar that holds other tabs than the five (tabBar.tabs, data-tabs: their keys): the header keeps its own action for what the bar
   leaves out, its menu (the way to the catalogue) when the bar has no Каталог */
.cs[data-tabbar][data-tabs~=catalog] [data-role=header] .action[data-action=menu],.cs[data-tabbar][data-tabs~=search] [data-role=header] .action[data-action=search],.cs[data-tabbar][data-tabs~=cart] [data-role=header] .action[data-action=cart],.cs[data-tabbar][data-tabs~=favourites] [data-role=header] .action[data-action=favourites]{display:none!important}
html[data-cs-sheet]{overflow:hidden}
.cs .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--cs-tabbar);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--tb-bg);color:var(--tb-fg);border-top:1px solid var(--tb-line);box-shadow:var(--tb-sh)}
.cs .tabbar[data-shape=floating]{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(var(--tb-gap),env(safe-area-inset-bottom,0px));height:var(--tb-h);padding:0 4px;border:1px solid var(--tb-line);border-radius:var(--tb-r);overflow:hidden}
.cs .tabbar[data-translucent]{background:color-mix(in srgb,var(--tb-bg) var(--tb-glass,80%),transparent);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px)}
/* a floating bar lit along its top edge (tabBar.edge top): the hairline is full across the top and fades to a faint trace round the
   sides and foot, so the capsule reads as glass with its rim catching the light, even over a band of its own colour */
.cs .tabbar[data-shape=floating][data-edge=top]{border-color:var(--tb-line) color-mix(in srgb,var(--tb-line) 34%,transparent) color-mix(in srgb,var(--tb-line) 20%,transparent)}
.cs .tb-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--tb-h);position:relative;color:var(--tb-fg);font-family:var(--tb-ff);font-weight:var(--tb-fw);letter-spacing:var(--tb-ls);font-size:11px;line-height:1.15;text-transform:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:color var(--dur-1),opacity var(--dur-1)}
.cs .tb-tab[data-on]{color:var(--tb-on)}
.cs .tb-tab:active{opacity:.5;transition:color var(--dur-1),opacity 40ms linear}
.cs .tb-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:2px}
.cs .tb-icon{position:relative;display:grid;place-items:center;width:52px;height:28px;border-radius:var(--tb-r);transition:background-color var(--dur-2)}
.cs .tabbar[data-indicator=pill] .tb-tab[data-on] .tb-icon{background:color-mix(in srgb,var(--tb-on) 12%,transparent)}
.cs .tabbar[data-indicator=dot] .tb-tab[data-on]::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--tb-on)}
.cs .tabbar[data-indicator=dot]:not([data-shape=floating]) .tb-tab::after{bottom:3px}
.cs .tabbar[data-indicator=line] .tb-tab[data-on]::before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:2px;background:var(--tb-on)}
.cs .tabbar[data-shape=floating][data-indicator=line] .tb-tab[data-on]::before{top:auto;bottom:5px;left:38%;right:38%;border-radius:2px}
.cs .tb-count{position:absolute;top:-3px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--tb-badge);color:var(--tb-bg);font:600 10px/17px var(--tb-ff);letter-spacing:0;text-align:center;box-shadow:0 0 0 2px var(--tb-bg)}
.cs:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus) .tabbar{display:none}
/* a bar of words only (tabBar.icons none): each tab is its word at 13 px, the cart's count beside its word; the open tab's line
   stands over its word, its dot under it */
.cs .tabbar[data-icons=none] .tb-tab{flex:1 1 auto;flex-direction:row;gap:5px;padding:0 4px;font-size:13px;line-height:1}
.cs .tabbar[data-icons=none] .tb-label{padding:0}
.cs .tabbar[data-icons=none] .tb-count{position:static;min-width:16px;height:16px;padding:0 4px;border-radius:8px;font:600 10px/16px var(--tb-ff)}
.cs .tabbar[data-icons=none][data-indicator=line] .tb-tab[data-on]::before{left:4px;right:4px}
.cs .tabbar[data-icons=none][data-indicator=dot] .tb-tab[data-on]::after{bottom:7px}
.cs .tabbar[data-icons=none][data-indicator=pill] .tb-tab{isolation:isolate}
.cs .tabbar[data-icons=none][data-indicator=pill] .tb-tab[data-on]::before{content:"";position:absolute;z-index:-1;inset:calc(50% - 15px) 0;border-radius:var(--tb-r);background:color-mix(in srgb,var(--tb-on) 12%,transparent)}
/* words on the open tab only (tabBar.labels "active"): the other tabs are icons at a steady 48px, the open one grows to hold its
   words beside its icon inside its pill, and the five spread evenly along the bar */
.cs .tabbar[data-labels=active]{justify-content:space-evenly}
.cs .tabbar[data-labels=active] .tb-tab{flex:0 0 48px;flex-direction:row;gap:6px;isolation:isolate}
.cs .tabbar[data-labels=active] .tb-icon{width:44px}
.cs .tabbar[data-labels=active] .tb-tab[data-on]{flex:0 1 auto;min-width:0;padding:0 var(--s-4) 0 var(--s-3)}
.cs .tabbar[data-labels=active] .tb-tab[data-on] .tb-icon{width:24px;background:none!important}
.cs .tabbar[data-labels=active][data-indicator=pill] .tb-tab[data-on]::before{content:"";position:absolute;z-index:-1;inset:8px 0;border-radius:var(--tb-r);background:color-mix(in srgb,var(--tb-on) 12%,transparent)}
.cs .tabbar[data-labels=active] .tb-label{min-width:0;padding:0;font-size:13px;line-height:1}
}
/* narrow phones: five words under the icons ("Таңдаулылар" in Kazakh, "Избранное") fit their fifth of the bar without
   "Таңдаул…": no tracking or side padding from 375 px, a point smaller at 320 px (iPhone SE, first generation). A bar with
   words on the open tab only has no room for "Избр…" at 320 px, so the open tab keeps its pill round its icon and leaves
   its name to the page's title (the tab's name stays its aria-label) */
@media (max-width:389px){
.cs .tb-tab{letter-spacing:0}
.cs .tb-label{padding-inline:0}
}
@media (max-width:359px){
.cs .tb-tab{font-size:10px}
.cs .tabbar[data-icons=none] .tb-tab{font-size:12px;padding:0 2px}
.cs .tabbar[data-labels=active] .tb-tab[data-on]{flex:0 0 48px;padding:0}
.cs .tabbar[data-labels=active] .tb-tab[data-on] .tb-icon{width:44px}
.cs .tabbar[data-labels=active] .tb-tab[data-on] .tb-label{display:none}
}
/* a phone card whose price shares its row with the heart (Almurt): the price takes the room the heart leaves and lets its old
   price drop under the new one, so a sale on a narrow card (24 990 ₸ 34 990 ₸ at 320 px) never pushes the heart onto a line
   of its own */
@media (max-width:767px){
.cs [data-role=product-card] :has(> .fav) > .price{flex:1 1 0;min-width:0}
}

/* the Каталог tab's page (lib/render/catalog-view.tsx, /catalog): Все товары, the categories and the collections as rows with a
   picture, a name and a count, in the theme's colours and faces. A computer reaches it only by its address and gets the list in
   a narrow column under a plain heading; phones show the large title above it instead of the heading, and the rows edge to edge. */
.cs .ct{display:block;max-width:720px;margin:0 auto;padding:var(--s-6) var(--s-4)}
.cs .ct-head{margin:0 0 var(--s-4);font-family:var(--t-title-l-ff);font-size:var(--t-title-l-fs);font-weight:var(--t-title-l-fw);letter-spacing:var(--t-title-l-ls);line-height:var(--t-title-l-lh);font-style:var(--t-title-l-fst,normal);text-transform:var(--t-title-l-tt)}
.cs .ct-group{margin:0;padding:var(--s-5) 0 var(--s-2);font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);color:var(--c-text-muted)}
.cs .ct-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-border)}
.cs .ct-row{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-2) 0;border-bottom:1px solid var(--c-border);color:var(--c-text);text-decoration:none;font-family:var(--t-body-l-ff);font-size:var(--t-body-l-fs);font-weight:var(--t-body-l-fw);-webkit-touch-callout:none;transition:background-color var(--dur-1)}
.cs .ct-row:active{background:var(--c-surface-muted)}
.cs .ct-row>svg:last-child{color:var(--c-text-muted);flex:none}
.cs .ct-thumb{flex:none;width:48px;height:48px;object-fit:cover;border-radius:var(--r-s);background:var(--c-surface-muted)}
.cs .ct-name{flex:1;min-width:0;overflow-wrap:anywhere}
.cs .ct-n{color:var(--c-text-muted);font-size:var(--t-body-s-fs);font-family:var(--t-body-s-ff)}
@media (max-width:767px){
.cs .ct{max-width:none;padding:0 0 var(--s-5)}
.cs[data-large-title] .ct-head{display:none}
.cs .ct-group{padding-inline:max(var(--s-4),env(safe-area-inset-left,0px))}
.cs .ct>.ct-list:first-of-type{margin-top:var(--s-2)}
.cs .ct-row{padding-inline:max(var(--s-4),env(safe-area-inset-left,0px)) max(var(--s-4),env(safe-area-inset-right,0px))}
}

/* the phone Ещё screen (lib/render/more-view.tsx) in place of the footer: with the tab bar, phones draw no footer, no newsletter
   block and no light/dark switch (light or dark is the phone's, lib/render/styles.ts), and the header's account and language
   actions give way to the Ещё button at its end. The screen is an iOS-style inset grouped list in the theme's colours, corners
   (its large radius, at most 14px) and faces; light-dark() picks the cells' lift for the scheme the page shows. */
.cs .hd-more,.cs .mr{display:none}
@media (max-width:767px){
.cs[data-tabbar] :is(footer[data-role=footer],[data-role=newsletter],[data-action=theme]),.cs[data-tabbar] [data-role=header] :is([data-action=account],[data-action=language]){display:none!important}
:where(.cs[data-tabbar] header[data-role=header]){position:relative}
.cs .hd-more{display:grid;place-items:center;position:absolute;z-index:2;top:env(safe-area-inset-top,0px);bottom:0;right:max(var(--s-2),env(safe-area-inset-right,0px));width:44px;height:44px;margin:auto 0;color:inherit;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:opacity var(--dur-1)}
.cs .hd-more:active{opacity:.5}
.cs .mr{--mr-bg:light-dark(color-mix(in srgb,var(--c-text) 5%,var(--c-page)),var(--c-page));--mr-cell:light-dark(var(--c-page),color-mix(in srgb,var(--c-text) 9%,var(--c-page)));--mr-on:light-dark(var(--c-page),color-mix(in srgb,var(--c-text) 24%,var(--c-page)));--mr-line:color-mix(in srgb,var(--c-text) 13%,transparent);--mr-r:min(var(--r-l),14px);display:block;background:var(--mr-bg);color:var(--c-text);padding:env(safe-area-inset-top,0px) max(var(--s-4),env(safe-area-inset-right,0px)) calc(var(--cs-tabbar,0px) + var(--s-6)) max(var(--s-4),env(safe-area-inset-left,0px))}
@supports not (color:light-dark(#000,#fff)){.cs .mr{--mr-bg:color-mix(in srgb,var(--c-text) 5%,var(--c-page));--mr-cell:var(--c-page);--mr-on:var(--c-page)}}
.cs .mr:focus-visible{outline:none}
.cs .mr-top{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;margin:0 calc(-1 * max(var(--s-4),env(safe-area-inset-right,0px))) 0 calc(-1 * max(var(--s-4),env(safe-area-inset-left,0px)));padding:10px max(var(--s-4),env(safe-area-inset-right,0px)) 6px max(var(--s-4),env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--mr-bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px)}
.cs .mr-close{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c-text) 10%,var(--mr-bg));color:var(--c-text-muted)}
.cs .mr-close::before{content:"";position:absolute;inset:-7px}
.cs .mr-close:active{opacity:.6}
.cs .mr-title{margin:0 4px var(--s-5);font-family:var(--lt-ff);font-size:var(--lt-fs);font-weight:var(--lt-fw);letter-spacing:var(--lt-ls);font-style:var(--lt-fst);line-height:1.06;text-transform:none}
.cs .mr-group+.mr-group{margin-top:var(--s-6)}
.cs .mr-head{margin:0 var(--s-4) 7px;font-family:var(--t-body-s-ff);font-size:13px;font-weight:var(--t-body-s-fw);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--c-text-muted)}
.cs .mr-list{list-style:none;margin:0;padding:0;background:var(--mr-cell);border-radius:var(--mr-r);overflow:hidden}
.cs .mr-row{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px var(--s-4);font-family:var(--t-body-l-ff);font-size:17px;font-weight:var(--t-body-l-fw);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--c-text);-webkit-touch-callout:none;transition:background-color var(--dur-1)}
.cs .mr-list>li+li>.mr-row::before,.cs .mr-list>li.mr-row+li::before{content:"";position:absolute;top:0;right:0;left:var(--s-4);border-top:1px solid var(--mr-line)}
.cs .mr-list>li+li>.mr-row:has(.mr-icon)::before{left:calc(var(--s-4) + 40px)}
.cs a.mr-row:active{background:color-mix(in srgb,var(--c-text) 9%,var(--mr-cell))}
.cs .mr-icon{flex:none;display:grid;place-items:center;width:28px;height:28px;color:var(--c-text-muted)}
.cs .mr-text{flex:1;min-width:0;overflow-wrap:anywhere}
.cs .mr-label{display:block}
.cs .mr-note{display:block;margin-top:2px;font-family:var(--t-body-s-ff);font-size:13px;line-height:1.3;color:var(--c-text-muted)}
.cs .mr-row>svg:last-child{flex:none;color:var(--c-text-muted);opacity:.7}
.cs .mr-group[data-group=account] .mr-row{min-height:72px;gap:14px}
.cs .mr-group[data-group=account] .mr-icon{width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--c-text) 9%,var(--mr-cell));color:var(--c-text)}
.cs .mr-group[data-group=account] .mr-label{font-weight:600}
.cs .mr-foot{margin:7px var(--s-4) 0;font-family:var(--t-body-s-ff);font-size:13px;line-height:1.35;color:var(--c-text-muted)}
.cs .mr-seg{flex:none;display:inline-flex;padding:2px;border-radius:min(var(--mr-r),9px);background:color-mix(in srgb,var(--c-text) 9%,var(--mr-cell))}
.cs .mr-seg button{min-width:44px;height:30px;padding:0 10px;border-radius:min(var(--mr-r),7px);font-family:var(--t-body-s-ff);font-size:13px;font-weight:600;letter-spacing:0;color:var(--c-text-muted);transition:background-color var(--dur-1),color var(--dur-1)}
.cs .mr-seg button[aria-pressed=true]{background:var(--mr-on);color:var(--c-text);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.cs .mr-copy{margin:var(--s-6) 0 0;text-align:center;font-family:var(--t-body-s-ff);font-size:13px;color:var(--c-text-muted)}
/* the large title's place (largeTitle.align center): the Ещё screen's title stands centred too */
.cs .mr[data-align=center] .mr-title{text-align:center}
/* the Ещё screen laid out editorially (phoneShell.more.layout): the same contents on the page's own ground, no cells and no row
   icons. The shop's name in the title face and its own words lead, centred, with its about and contact pages as pill links;
   the contacts follow as pills; then plain rows (the account, the info pages, the legal pages), each group opened by a 1px
   rule of the accent colour; the language as pills with the chosen one filled in the ink. */
.cs .mr[data-layout=editorial]{--mr-bg:var(--c-page);--mr-rule:color-mix(in srgb,var(--c-accent) 72%,transparent);padding-left:max(var(--s-5),env(safe-area-inset-left,0px));padding-right:max(var(--s-5),env(safe-area-inset-right,0px))}
.cs .mr[data-layout=editorial] .mr-top{margin-inline:calc(-1 * max(var(--s-5),env(safe-area-inset-left,0px))) calc(-1 * max(var(--s-5),env(safe-area-inset-right,0px)));padding-inline:max(var(--s-5),env(safe-area-inset-left,0px)) max(var(--s-5),env(safe-area-inset-right,0px))}
.cs .mr[data-layout=editorial] .mr-title{margin:var(--s-1) 0 var(--s-5)}
.cs .mr-story{padding:var(--s-5) 0 var(--s-6);border-top:1px solid var(--mr-rule);text-align:center}
.cs .mr-name{margin:0;font-family:var(--t-title-l-ff);font-size:var(--t-title-l-fs);font-weight:var(--t-title-l-fw);letter-spacing:var(--t-title-l-ls);font-style:var(--lt-fst);line-height:1.2;overflow-wrap:anywhere}
.cs .mr-tag{max-width:30ch;margin:var(--s-2) auto 0;font-family:var(--t-body-m-ff);font-weight:var(--t-body-m-fw);font-size:15px;line-height:1.45;color:var(--c-text-muted);text-wrap:balance}
.cs .mr-pills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin:var(--s-4) 0 0;padding:0}
.cs .mr-group[data-group=contact] .mr-pills{justify-content:flex-start;margin-top:0}
.cs .mr-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-pill);font-family:var(--t-nav-ff);font-weight:var(--t-nav-fw);font-size:15px;line-height:1.2;letter-spacing:0;color:var(--c-text);text-decoration:none;-webkit-touch-callout:none;transition:background-color var(--dur-1),border-color var(--dur-1)}
.cs .mr-pill:active{background:color-mix(in srgb,var(--c-text) 7%,var(--mr-bg));border-color:var(--c-text)}
.cs .mr-line{display:block;padding:var(--s-1) 0;font-family:var(--t-body-m-ff);font-size:15px;color:var(--c-text)}
.cs .mr[data-layout=editorial] .mr-group{margin:0;padding:var(--s-4) 0 var(--s-5);border-top:1px solid var(--mr-rule)}
.cs .mr[data-layout=editorial] .mr-head{margin:0 0 var(--s-2)}
.cs .mr[data-layout=editorial] .mr-list{background:none;border-radius:0;overflow:visible}
.cs .mr[data-layout=editorial] .mr-row{min-height:52px;padding:var(--s-2) 0;font-family:var(--t-nav-ff);font-weight:var(--t-nav-fw);font-size:17px}
.cs .mr[data-layout=editorial] .mr-list>li+li>.mr-row::before{left:0}
.cs .mr[data-layout=editorial] a.mr-row:active{background:none;opacity:.6}
.cs .mr[data-layout=editorial] .mr-group[data-group=account] .mr-row{min-height:60px}
.cs .mr[data-layout=editorial] .mr-group[data-group=account] .mr-label{font-weight:500}
.cs .mr[data-layout=editorial] .mr-head{margin-inline:0}
.cs .mr[data-layout=editorial] .mr-foot{margin-inline:0}
.cs .mr[data-layout=editorial] .mr-seg{gap:var(--s-1);padding:0;border-radius:var(--r-pill);background:none}
.cs .mr[data-layout=editorial] .mr-seg button{min-width:56px;height:40px;padding:0 var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-pill);font-family:var(--t-nav-ff);font-weight:var(--t-nav-fw);font-size:15px;color:var(--c-text)}
.cs .mr[data-layout=editorial] .mr-seg button[aria-pressed=true]{background:var(--c-text);border-color:var(--c-text);color:var(--c-page);box-shadow:none}
.cs .mr[data-layout=editorial] .mr-copy{margin-top:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--mr-rule)}
/* the phone header the theme asks the renderer to arrange (phoneShell.header): the wordmark at the start edge, set as a title in
   the large title's face (the shop's name as written, 22px), and the Ещё button as the word in an outlined pill */
.cs[data-header=start] header[data-role=header] .lay:has(>.logo){min-height:32px}
.cs[data-header=start] header[data-role=header] .logo{position:absolute;z-index:2;left:max(var(--s-4),env(safe-area-inset-left,0px));top:env(safe-area-inset-top,0px);bottom:0;height:-webkit-fit-content;height:fit-content;margin:auto 0;max-width:calc(100% - 140px)}
.cs .logo>.logo-name{display:block;font-size:22px;line-height:1.1;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:.08em}
.cs .hd-more[data-show=label]{width:auto;right:max(var(--s-4),env(safe-area-inset-right,0px))}
.cs .hd-more-word{display:inline-flex;align-items:center;height:32px;padding:0 var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-pill);font-family:var(--t-nav-ff);font-weight:var(--t-nav-fw);font-size:15px;line-height:1;letter-spacing:0;text-transform:none;transition:background-color var(--dur-1),border-color var(--dur-1)}
.cs .hd-more[aria-expanded=true] .hd-more-word{border-color:var(--c-text)}
}
/* a wordmark set as a title is the phone's alone: tablets and computers keep the theme's capitals */
.cs .logo>.logo-name{display:none}
@media (max-width:767px){.cs .logo:has(>.logo-name)>.logo-caps{display:none}.cs .logo>.logo-name{display:block}}

/* the phone large title (lib/render/largetitle-view.tsx): on a collection, the catalogue, favourites and the info pages,
   phones show the renderer's large title and chips in place of the page's own title block, toolbar and category row.
   The theme's tokens give its faces and the chips' corners (--lt-*, set on it). It slides under the header shrinking and
   fading (a scroll-driven animation of transform and opacity: the compositor's own work), and its small copy takes the
   wordmark's place in the header (data-lt-collapsed, set by the component); with reduced motion it only swaps. */
.cs .lt,.cs .lt-bar,.cs .lt-chips{display:none}
@media (max-width:767px){
.cs[data-large-title]>:is([data-role=page-header],[data-role=listing-toolbar],[data-role=category-shortcuts]){display:none!important}
/* the large title is the page's one heading: an info page's own h1 further down (Alma's policy pages repeat their title there) gives way */
.cs[data-large-title]>section.sec h1{display:none}
/* the grid starts a step under the chips, whatever room the theme left under its toolbar */
.cs[data-large-title=listing]>[data-role=listing-grid]>.lay{padding-top:var(--s-1)!important}
.cs .lt{display:block;padding:2px max(var(--s-4),env(safe-area-inset-right,0px)) 6px max(var(--s-4),env(safe-area-inset-left,0px));view-timeline:--cs-lt block;view-timeline-inset:var(--cs-sticky-top,0px) 0px}
.cs .lt-title{margin:0;font-family:var(--lt-ff);font-size:var(--lt-fs);font-weight:var(--lt-fw);letter-spacing:var(--lt-ls);font-style:var(--lt-fst);line-height:1.06;text-transform:none;text-wrap:balance;overflow-wrap:anywhere;transform-origin:0 100%}
.cs .lt-count{margin:2px 0 0;font-family:var(--t-body-s-ff);font-size:13px;line-height:1.35;color:var(--c-text-muted)}
/* the page's own lead (an info page's tagline or headline; a collection's description shares the count's line): a short paragraph, clamped so products stay high */
.cs .lt-lead{margin:4px 0 0;max-width:36em;font-family:var(--t-body-m-ff);font-weight:var(--t-body-m-fw);font-size:15px;line-height:1.4;color:var(--c-text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.cs .lt[data-kind=listing] .lt-count{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.cs .lt-bar{display:flex;position:fixed;top:0;left:0;right:0;z-index:31;height:var(--cs-sticky-top,0px);align-items:center;justify-content:center;padding:0 64px;pointer-events:none;opacity:0;transform:translateY(6px);color:var(--c-text)}
.cs[data-lt-own-bar] .lt-bar{height:calc(44px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--c-page);border-bottom:1px solid var(--c-border)}
.cs .lt-small{font-family:var(--lt-cff);font-weight:var(--lt-cfw);letter-spacing:var(--lt-cls);font-style:var(--lt-fst);font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cs[data-lt-collapsed] .lt-bar{opacity:1;transform:none}
.cs[data-lt-collapsed] [data-role=header] .logo{opacity:0}
.cs .lt-chips{display:flex;align-items:center;gap:var(--s-2);position:sticky;top:var(--cs-sticky-top,0px);z-index:29;padding:3px max(var(--s-4),env(safe-area-inset-right,0px)) 6px max(var(--s-4),env(safe-area-inset-left,0px));background:var(--c-page);border-bottom:1px solid var(--c-border)}
.cs[data-lt-own-bar][data-lt-collapsed] .lt-chips{top:calc(44px + env(safe-area-inset-top,0px))}
.cs .lt-scroll{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-2);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-left:-4px;padding-left:12px;scroll-padding-left:12px;margin-right:calc(-1 * max(var(--s-4),env(safe-area-inset-right,0px)));padding-right:max(var(--s-4),env(safe-area-inset-right,0px));--lt-fe:20px;-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - var(--lt-fe)),transparent);mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - var(--lt-fe)),transparent)}
/* the large title centred (largeTitle.align center): its count or lead under it, shrinking into the header from its middle */
.cs .lt[data-align=center]{text-align:center;padding-top:6px}
.cs .lt[data-align=center] .lt-title{transform-origin:50% 100%}
.cs .lt[data-align=center] .lt-lead{margin-inline:auto}
.cs .lt-scroll[data-more]{--lt-fe:48px}
.cs .lt-scroll[data-end]{--lt-fe:1px}
.cs .lt-scroll::-webkit-scrollbar{display:none}
.cs .lt-chip{flex:none;position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--c-border);border-radius:var(--lt-chr);background:var(--c-page);color:var(--c-text);font-family:var(--lt-chff);font-weight:var(--lt-chfw);letter-spacing:var(--lt-chls);font-size:var(--lt-chfs,14px);line-height:1;white-space:nowrap;text-transform:none;-webkit-user-select:none;user-select:none;transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),opacity var(--dur-1)}
.cs .lt-chip[data-on]{background:var(--c-text);border-color:var(--c-text);color:var(--c-page)}
.cs .lt-chip>svg{flex:none}
.cs .lt-sort select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;-webkit-appearance:none;appearance:none;cursor:pointer}
.cs .lt-sort:has(select:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.cs .lt-n{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--c-page);color:var(--c-text);font-size:11px}
.cs .lt-sep{flex:none;width:1px;height:20px;background:var(--c-border)}
.cs .lt-view{width:34px;padding:0;justify-content:center}
.cs .lt-view>.lt-oval{display:none}
.cs[data-frames=oval] .lt-view>.lt-oval{display:block}
/* chips as plain words (largeTitle.chipLook text): no boxes, the open one in the text colour over a rule, the others muted */
.cs .lt-chips[data-look=text]{gap:var(--s-4)}
.cs .lt-chips[data-look=text] .lt-scroll{gap:var(--s-5)}
.cs .lt-chips[data-look=text] .lt-chip{height:36px;padding:0;border:0;border-radius:0;background:none;color:var(--c-text-muted)}
.cs .lt-chips[data-look=text] .lt-chip:not(a){color:var(--c-text)}
.cs .lt-chips[data-look=text] .lt-chip[data-on]{background:none;color:var(--c-text);box-shadow:inset 0 -1.5px 0 var(--c-text)}
.cs .lt-chips[data-look=text] .lt-n{background:var(--c-text);color:var(--c-page)}
.cs .lt-chips[data-look=text] .lt-view{width:28px}
/* A theme's calm row (largeTitle.chips "controls"): Фильтры and Сортировка share the row in two equal halves, nothing scrolls. */
.cs .lt-chips[data-chips=controls]{padding-top:2px;padding-bottom:5px}
.cs .lt-chips[data-chips=controls] .lt-chip{flex:1 1 0;min-width:0;height:36px;justify-content:center}
.cs .lt-chips[data-chips=controls] .lt-chip>span:not(.lt-n){overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){
.cs .lt-bar{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.cs[data-large-title] [data-role=header] .logo{transition:opacity var(--dur-2) var(--ease-out)}
@supports (animation-timeline:view()){
.cs .lt-title{animation:cs-lt-shrink linear both;animation-timeline:--cs-lt;animation-range:exit 0% exit 100%}
.cs :is(.lt-count,.lt-lead){animation:cs-lt-fade linear both;animation-timeline:--cs-lt;animation-range:exit 0% exit 60%}
}
}
}
@keyframes cs-lt-shrink{to{transform:scale(.7);opacity:0}}
@keyframes cs-lt-fade{to{opacity:0}}

/* the phone product page (lib/render/product-view.tsx): the details are a short list of rows, each opening a bottom sheet, in
   place of the theme's folding sections and size guide link (data-pd-hide); the theme's buy bar stays at the screen's foot
   above the tab bar, in place of the page's own add to cart button. The theme's tokens give the rows' and sheets' faces and the
   sheet's corners (--pd-*, set on them). Tablets and computers keep the theme's page. */
.cs .pd-rows{display:none}
@media (max-width:767px){
.cs [data-pd-hide]{display:none!important}
.cs .pd-rows{display:block;list-style:none;margin:0;padding:0}
.cs .pd-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;min-height:52px;padding:var(--s-3) 0;border-bottom:1px solid var(--c-border);color:var(--c-text);text-align:start;font-family:var(--pd-rff);font-size:max(15px,var(--pd-rfs));font-weight:var(--pd-rfw);letter-spacing:var(--pd-rls);line-height:1.3;text-transform:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:opacity var(--dur-1)}
.cs .pd-row:active{opacity:.55}
.cs .pd-row>svg{flex:none;color:var(--c-text-muted)}
.cs .pd-row-label{min-width:0;overflow-wrap:anywhere}
/* the buy bar: held at the foot above the tab bar while the page scrolls, in its own place at the very end */
.cs[data-pd-bar] section[data-role=product-mobile-bar]{position:sticky!important;bottom:var(--cs-tabbar,0px)!important;z-index:30;animation:none!important}
.cs[data-pd-bar] section[data-role=product-mobile-bar]>.lay{padding-bottom:max(0px,env(safe-area-inset-bottom,0px) - var(--cs-tabbar,0px))}
/* its colour runs on down behind the tab bar, so the page doesn't show between them (round a floating bar) */
.cs[data-pd-bar] section[data-role=product-mobile-bar]::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--cs-tabbar,0px);background:inherit;pointer-events:none}
.cs[data-pd-bar] .pin-spot{display:none}
.cs[data-pd-bar] .cs-cart-note{bottom:calc(var(--cs-pin-bottom,0px) + var(--cs-tabbar,0px) + 12px)}
/* a theme's after-add bar (productSheets.bar): the page keeps its own add to cart, and the bar waits behind the tab bar until that
   button has scrolled away above (ProductBarWatch sets data-up), then rises on a spring with no bounce; back down as it returns */
.cs[data-pd-bar=after-add]{--pd-rise:.45s linear(0,.092,.268,.447,.599,.718,.805,.868,.911,.941,.961,.975,.984,.989,.993,.996,1)}
@supports not (transition-timing-function:linear(0,1)){.cs[data-pd-bar=after-add]{--pd-rise:.4s cubic-bezier(.2,.8,.2,1)}}
@media (prefers-reduced-motion:reduce){.cs[data-pd-bar=after-add]{--pd-rise:0s linear}}
.cs[data-pd-bar=after-add] section[data-role=product-mobile-bar]{transition:transform var(--pd-rise),opacity .2s var(--ease-out),visibility 0s}
.cs[data-pd-bar=after-add] section[data-role=product-mobile-bar]:not([data-up]){transform:translateY(calc(100% + var(--cs-tabbar,0px)));opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--pd-rise),opacity .2s var(--ease-out) .1s,visibility 0s .45s}
/* a sheet's title row, scrolling body and foot (lib/render/sheets.tsx look "sheet"; the frame is .sh below) */
.cs .pd-sheet-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) max(var(--s-4),env(safe-area-inset-right,0px)) var(--s-3) max(var(--s-4),env(safe-area-inset-left,0px));border-bottom:1px solid var(--c-border)}
.cs .pd-sheet-title{margin:0;min-width:0;font-family:var(--pd-tff);font-size:var(--pd-tfs);font-weight:var(--pd-tfw);letter-spacing:var(--pd-tls);font-style:var(--pd-tfst);line-height:1.2;text-transform:none;overflow-wrap:anywhere}
.cs .pd-close{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c-text) 8%,var(--c-page));color:var(--c-text-muted)}
.cs .pd-close::before{content:"";position:absolute;inset:-7px}
.cs .pd-close:active{opacity:.6}
/* in a sheet or an overlay on a phone, a text link (the after-add's "Открыть корзину", the bag's "Открыть корзину целиком") is
   one line of type: it takes a tap 44 px tall; an icon-only close in a theme with round controls rings round when focused */
.cs :is(.sh,.ov) .btn[data-variant=link]{position:relative}
.cs :is(.sh,.ov) .btn[data-variant=link]::before{content:"";position:absolute;inset:-12px -4px}
.cs:not([data-controls=square]) :is(.sh,.ov) .action[data-action=close][aria-label]:focus-visible{border-radius:999px}
.cs .pd-sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-4) max(var(--s-4),env(safe-area-inset-right,0px)) calc(var(--s-6) + env(safe-area-inset-bottom,0px)) max(var(--s-4),env(safe-area-inset-left,0px))}
.cs .pd-sheet-body:has(+.pd-sheet-foot){padding-bottom:var(--s-4)}
.cs .pd-sheet-foot{flex:none;padding:var(--s-3) max(var(--s-4),env(safe-area-inset-right,0px)) max(var(--s-3),env(safe-area-inset-bottom,0px)) max(var(--s-4),env(safe-area-inset-left,0px));border-top:1px solid var(--c-border)}
.cs .pd-sheet-foot>*{width:100%}
/* the theme's nodes in a sheet: a box that scrolls inside a drawer's height scrolls with the sheet instead */
.cs .pd-sheet-body>*{flex:none!important;height:auto!important;max-height:none!important}
}

/* phone sheets (lib/render/sheets.tsx): one frame on Base UI's Drawer for the product details and picker, the theme's drawers on
   phones (the overlay's own node is the sheet, its tokens give its colours and padding), and the Каталог and Ещё screens. Base UI
   sets the swipe variables and the data-starting/ending-style marks; these transitions are what it waits for before it unmounts.
   A sheet rises from the foot over a veil and follows a finger down (--drawer-swipe-movement-y); a screen fills the page under
   the tab bar, comes in and goes as a tab does (a short rise and fade) and, dragged away, leaves downwards. Less motion: they only fade.
   Closed by a tap (the veil, the close button, Escape) a sheet leaves on a 220 ms spring with no bounce from wherever it is; dragged
   away, Base UI's swipe strength times it. A theme on springs (phoneShell.motion, data-motion) opens sheets on a no-bounce 0.35 s
   spring, and a sheet let go short of dismissing settles back with a slight bounce (2%; Sheet marks it data-cs-settle while dragged), the
   strip under it filled in the sheet's colour so the overshoot never shows the veil. A theme on calm springs (motion "calm",
   Almurt) opens on the same spring drawn whole (0.5 s, resting slowly), and settles on a softer one that Sheet retimes to carry
   on at the finger's speed (springs.ts CALM), its bounce at most 1.2% and 6 px. */
.cs .sh-root{position:relative}
.cs .sh-veil{position:fixed;inset:0;background:rgba(0,0,0,var(--ov-veil,.4));opacity:calc(1 - var(--drawer-swipe-progress,0));transition:opacity var(--dur-3) var(--ease-out)}
.cs .sh-veil:is([data-starting-style],[data-ending-style]){opacity:0}
.cs .sh-veil[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength,1) * var(--dur-3))}
.cs .sh-veil[data-swiping]{transition-duration:0s}
.cs .sh-view{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-end;outline:0}
.cs .sh{--sh-r:var(--ov-r,var(--pd-r,min(var(--r-l),20px)));position:relative;box-sizing:border-box;display:flex;flex-direction:column;flex:none;width:100%!important;height:auto!important;max-height:calc(100dvh - max(44px,env(safe-area-inset-top,0px) + 12px))!important;margin:0!important;background:var(--c-page);color:var(--c-text);border-radius:var(--sh-r) var(--sh-r) 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.16);outline:0;overflow:hidden;overscroll-behavior:contain;transform:translateY(calc(var(--drawer-snap-point-offset,0px) + var(--drawer-swipe-movement-y,0px)));transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out);animation:none!important}
.cs .sh:is([data-starting-style],[data-ending-style]){transform:translateY(100%)}
.cs .sh[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength,1) * var(--dur-3))}
.cs .sh[data-swiping]{transition-duration:0s;-webkit-user-select:none;user-select:none}
.cs .sh:not([data-look=screen])[data-ending-style]:not([data-swipe-dismiss]){transition-duration:var(--sh-close);transition-timing-function:var(--sh-close-ease)}
.cs .sh-root:not(:has(.sh[data-swipe-dismiss])) .sh-veil[data-ending-style]{transition-duration:var(--sh-close);transition-timing-function:var(--sh-close-ease)}
.cs[data-motion=spring] .sh:not([data-look=screen]):not([data-swiping],[data-ending-style]){transition-duration:var(--sh-open);transition-timing-function:var(--sh-open-ease)}
.cs[data-motion=spring] .sh[data-cs-settle]:not([data-swiping],[data-ending-style]){transition-duration:var(--sh-settle);transition-timing-function:var(--sh-settle-ease)}
.cs[data-motion=spring] .sh-view:has(>.sh[data-cs-settle])::before{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:var(--sh-under,var(--c-page))}
@supports not (transition-timing-function:linear(0,1)){.cs{--sh-close-ease:var(--ease-out);--sh-open-ease:var(--ease-out);--sh-settle-ease:var(--ease-out)}}
@media (prefers-reduced-motion:reduce){.cs{--sh-settle-ease:var(--sh-close-ease)}}
.cs[data-motion=calm]{--sh-open:0.5s;--sh-open-ease:linear(0,.051,.162,.293,.421,.536,.635,.716,.782,.834,.874,.906,.93,.948,.962,.972,.98,.985,.99,.993,.995,.997,.998,.999,1,1);--sh-settle:0.52s;--sh-settle-ease:linear(0,.038,.127,.241,.361,.477,.583,.675,.752,.816,.866,.905,.935,.958,.974,.985,.992,.997,1,1.002,1.003,1.003,1.002,1.002,1.001,1.001,1)}
.cs[data-motion=calm] .sh:not([data-look=screen]):not([data-swiping],[data-ending-style]){transition-duration:var(--sh-open);transition-timing-function:var(--sh-open-ease)}
.cs[data-motion=calm] .sh[data-cs-settle]:not([data-swiping],[data-ending-style]){transition-duration:var(--sh-settle);transition-timing-function:var(--sh-settle-ease)}
.cs[data-motion=calm] .sh-view:has(>.sh[data-cs-settle])::before{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:var(--sh-under,var(--c-page))}
@supports not (transition-timing-function:linear(0,1)){.cs[data-motion=calm]{--sh-open-ease:var(--ease-out);--sh-settle-ease:var(--ease-out)}}
@media (prefers-reduced-motion:reduce){.cs[data-motion=calm]{--sh-settle-ease:var(--sh-close-ease)}}
.cs .sh:focus-visible{outline:none}
.cs .sh-grab{flex:none;width:36px;height:5px;margin:7px auto 0;border-radius:3px;background:color-mix(in srgb,var(--c-text) 18%,transparent)}
/* the theme's drawer as a sheet: it scrolls as a whole under its grabber, clear of the home indicator and the notch's sides */
.cs .sh[data-look=panel]{display:block;overflow:auto;background:var(--ov-bg,var(--c-page))}
.cs .sh[data-look=panel]>.sh-grab{position:absolute;top:7px;left:50%;z-index:2;margin:0 0 0 -18px}
.cs .sh[data-peek]{overflow:hidden}
.cs .sh[data-peek][data-snap-full]{overflow:auto}
/* Base UI fades the veil between a sheet's snap points (its progress is 1 at the lowest): a peeking sheet keeps its whole veil, at the peek as when lifted, and fades it only as it leaves */
.cs .sh-root:has(.sh[data-peek]) .sh-veil:not([data-starting-style],[data-ending-style]){opacity:1}
.cs .sh[data-look=panel]>.lay{padding-bottom:env(safe-area-inset-bottom,0px);padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
/* a screen: the whole page under the tab bar (whose z-index, 50, is above the sheet's 49) */
.cs .sh[data-look=screen]{position:fixed;inset:0;max-height:none!important;height:auto!important;border-radius:0;box-shadow:none;overflow:auto;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.cs .sh[data-look=screen]:is([data-starting-style],[data-ending-style]){opacity:0;transform:translateY(calc(24px + var(--drawer-swipe-movement-y,0px)))}
.cs .sh[data-look=screen][data-ending-style][data-swipe-dismiss]{opacity:1;transform:translateY(100%);transition-duration:calc(var(--drawer-swipe-strength,1) * var(--dur-3))}
/* the screen's own transition list above would otherwise outrank the sheet's: a finger dragging it is followed at once */
.cs .sh[data-look=screen][data-swiping]{transition-duration:0s}
@media (prefers-reduced-motion:reduce){
.cs .sh:is([data-starting-style],[data-ending-style]),.cs .sh[data-look=screen]:is([data-starting-style],[data-ending-style]){opacity:0;transform:translateY(calc(var(--drawer-snap-point-offset,0px) + var(--drawer-swipe-movement-y,0px)))}
}

/* the demo store's notice (lib/render/demo-notice.tsx): a card over a light dim, from the shop's own tokens; it fades slowly on its own, quickly when closed */
.cs .demo-notice{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--s-4);--demo-out:.7s}
.cs .demo-notice[data-quick]{--demo-out:.18s}
.cs .demo-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);animation:cs-fade var(--dur-2) linear}
.cs .demo-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:var(--s-6);background:var(--c-page);color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--r-m);box-shadow:var(--sh-l);animation:cs-pop var(--dur-3) var(--ease-out)}
.cs .demo-card:focus-visible{outline:none}
.cs .demo-title{padding-inline-end:var(--s-6);font:var(--t-title-m-fw) var(--t-title-m-fs)/1.2 var(--t-title-m-ff)}
.cs .demo-text{font:var(--t-body-m-fw) var(--t-body-m-fs)/var(--t-body-m-lh) var(--t-body-m-ff);color:var(--c-text-muted)}
.cs .demo-apply{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:var(--s-2);padding:0 var(--s-5);border-radius:var(--r-s);background:var(--c-accent);color:var(--c-on-accent);font:600 var(--t-body-m-fs)/1.2 var(--t-label-ff);text-align:center;transition:opacity var(--dur-1)}
@media (hover:hover) and (pointer:fine){.cs .demo-apply:hover{opacity:.88}}
.cs .demo-close{position:absolute;top:var(--s-3);inset-inline-end:var(--s-3);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--c-text-muted);transition:background-color var(--dur-1),color var(--dur-1)}
@media (hover:hover) and (pointer:fine){.cs .demo-close:hover{background:var(--c-surface-muted);color:var(--c-text)}}
.cs .demo-notice[data-leaving]{pointer-events:none}
.cs .demo-notice[data-leaving] .demo-backdrop{animation:cs-out-fade var(--demo-out) linear both}
.cs .demo-notice[data-leaving] .demo-card{animation:cs-out-demo var(--demo-out) var(--ease-in) both}

/* editor helpers: conditional and hidden nodes stay visible to edit */
.cs[data-editing] [data-when]{outline:1.5px dashed color-mix(in srgb,var(--c-accent) 70%,transparent);outline-offset:2px}
.cs[data-editing] [data-ghost]{opacity:.5}
.cs[data-editing] .ov-edit{position:relative;margin:var(--s-6) auto;max-width:960px;border:2px dashed var(--c-accent);border-radius:var(--r-m);background:var(--c-page)}
.cs[data-editing] .ov-edit>.ov-tag{position:absolute;top:-12px;left:12px;background:var(--c-accent);color:var(--c-on-accent);font:600 11px/1 var(--t-label-ff);padding:5px 8px;border-radius:4px;z-index:2}
.cs[data-editing] .ov-edit .ov{box-shadow:none;max-height:none;animation:none;width:min(var(--ov-w,560px),100%);height:auto}
.cs[data-editing] .social-sign-in[data-placeholder]{padding:var(--s-4);border:1px dashed var(--c-border);border-radius:var(--r-m);color:var(--c-text-muted);text-align:center;font-size:var(--t-body-s-fs)}
.cs .when-tag{position:absolute;top:2px;right:2px;z-index:5;font:600 10px/1 var(--t-label-ff);padding:3px 5px;border-radius:3px;background:var(--c-accent);color:var(--c-on-accent);pointer-events:none}

/* motion */
@keyframes cs-fade{from{opacity:0}}
@keyframes cs-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes cs-pop{from{opacity:0;transform:scale(.97)}}
@keyframes cs-drop{from{opacity:0;transform:translateY(-12px)}}
@keyframes cs-slide-r{from{transform:translateX(100%)}}
@keyframes cs-slide-l{from{transform:translateX(-100%)}}
@keyframes cs-slide-u{from{transform:translateY(100%)}}
@keyframes cs-pin-top{from{transform:translateY(-100%)}}
@keyframes cs-pin-bottom{from{transform:translateY(100%)}}
@keyframes cs-parallax{from{transform:translateY(-7%)}to{transform:translateY(7%)}}
@keyframes cs-ping{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes cs-bump{from{transform:scale(1.45)}}
@keyframes cs-out-fade{to{opacity:0}}
@keyframes cs-out-pop{to{opacity:0;transform:scale(.98)}}
@keyframes cs-out-up{to{opacity:0;transform:translateY(-8px)}}
@keyframes cs-out-r{to{transform:translateX(100%)}}
@keyframes cs-out-l{to{transform:translateX(-100%)}}
@keyframes cs-out-d{to{transform:translateY(100%)}}
@keyframes cs-out-demo{to{opacity:0;transform:translateY(10px) scale(.98)}}
/* Less motion: nothing travels, scales or loops; fades, colours and state changes stay, so an overlay
   still arrives and leaves and a press still answers. */
@media (prefers-reduced-motion:reduce){
@keyframes cs-rise{from{opacity:0}}
@keyframes cs-pop{from{opacity:0}}
@keyframes cs-drop{from{opacity:0}}
@keyframes cs-slide-r{from{opacity:0}}
@keyframes cs-slide-l{from{opacity:0}}
@keyframes cs-slide-u{from{opacity:0}}
@keyframes cs-pin-top{from{opacity:0}}
@keyframes cs-pin-bottom{from{opacity:0}}
@keyframes cs-bump{from{opacity:.4}}
@keyframes cs-out-pop{to{opacity:0}}
@keyframes cs-out-up{to{opacity:0}}
@keyframes cs-out-r{to{opacity:0}}
@keyframes cs-out-l{to{opacity:0}}
@keyframes cs-out-d{to{opacity:0}}
@keyframes cs-out-demo{to{opacity:0}}
@keyframes cs-parallax{from,to{transform:none}}
.cs .hotspot .marker::after{animation:none!important}
.cs *{transition-property:opacity,color,background-color,border-color,fill,stroke,box-shadow!important}
.cs details.disclosure::details-content{transition:none!important}
}
.cs{--press:.97;--press-in:.1s cubic-bezier(.3,0,.2,1);--press-out:.45s linear(0,.147,.428,.695,.887,.998,1.045,1.054,1.044,1.028,1.014,1.005,.999,.997,.997,1);--press-wait:60ms}
@supports not (transition-timing-function:linear(0,1)){.cs{--press-out:var(--dur-2) var(--ease-out)}}
.cs :is(.btn,.fav,.qa,.action,.lt-chip,.mr-seg button){transition:scale var(--press-out),opacity var(--dur-1),background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
.cs :is(.btn,.fav,.qa,.action,.lt-chip,.mr-seg button):active:not([disabled]):not(:has(:is(a,button,[role=button]):active)){scale:var(--press);transition:scale var(--press-in),opacity var(--dur-1),background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
@media (pointer:coarse){
.cs :is(.opt,.choice-opt,button.chip,button.swatch,.tabrow button,.carousel-nav,.c-tn,.vs-toggle,.vbtns button,.demo-apply,a.stack,.li>a,.mega-tiles a){transition:scale var(--press-out),opacity var(--dur-1),background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
.cs :is(.opt,.choice-opt,button.chip,button.swatch,.tabrow button,.carousel-nav,.c-tn,.vs-toggle,.vbtns button,.demo-apply,a.stack,.li>a,.mega-tiles a):active:not([disabled]):not(:has(:is(a,button,[role=button]):active)){scale:var(--press);transition:scale var(--press-in),opacity var(--dur-1),background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
.cs :is(a.stack,.li>a,.mega-tiles a,.c-tn,.lt-scroll .lt-chip):active:not([disabled]):not(:has(:is(a,button,[role=button]):active)){transition:scale var(--press-in) var(--press-wait),opacity var(--dur-1),background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
}
@media (prefers-reduced-motion:reduce){.cs :is(.btn,.fav,.qa,.action,.lt-chip,.mr-seg button,.opt,.choice-opt,button.chip,button.swatch,.tabrow button,.carousel-nav,.c-tn,.vs-toggle,.vbtns button,.demo-apply,a.stack,.li>a,.mega-tiles a):active:not([disabled]):not(:has(:is(a,button,[role=button]):active)){scale:none;opacity:.7}}
}
/* The shop's toasts (sonner, lib/render/quick-add-view.tsx CartToaster): in the theme's colours, corners and body face. Outside
   the layer, so they win over sonner's own stylesheet; it places them (above the tab bar and buy bar, clear of the safe areas). */
.cs [data-sonner-toaster][data-sonner-theme]{--normal-bg:var(--c-page);--normal-text:var(--c-text);--normal-border:color-mix(in srgb,var(--c-text) 12%,transparent);--border-radius:min(var(--r-m,8px),14px);font-family:var(--t-body-m-ff,inherit)}
.cs [data-sonner-toaster] [data-sonner-toast][data-styled=true]{padding:14px 16px;gap:10px;font-size:15px;box-shadow:var(--sh-m)}
.cs [data-sonner-toaster] [data-sonner-toast] [data-title]{font-weight:600}
.cs [data-sonner-toaster] [data-sonner-toast] [data-description]{color:var(--c-text-muted,var(--c-text));font-size:14px}
.cs [data-sonner-toaster] [data-sonner-toast][data-type=error] [data-icon]{color:var(--c-error,#c62828)}
/* Product galleries on Embla (lib/render/gallery.ts): outside the layer, so they win over a theme's own scroller rules for the gallery. */
.cs .list[data-embla=all]{overflow:hidden}.cs .list[data-embla=all]>.lay{overflow:visible;scroll-snap-type:none;touch-action:pan-y pinch-zoom}
@media (max-width: 1023px){.cs .list[data-embla=tablet]{overflow:hidden}.cs .list[data-embla=tablet]>.lay{overflow:visible;scroll-snap-type:none;touch-action:pan-y pinch-zoom}}
@media (max-width: 767px){.cs .list[data-embla=phone]{overflow:hidden}.cs .list[data-embla=phone]>.lay{overflow:visible;scroll-snap-type:none;touch-action:pan-y pinch-zoom}}
@media (max-width: 767px){.cs .list[data-embla][data-peek]>.lay>.li{flex:0 0 calc(100% - 28px);max-width:calc(100% - 28px)}}
/* a theme that caps its product photos (productSheets.photoHeight): a photo is at most that much of the screen's height, so the
   title and price show under it on the first screen; a slide is as wide as the capped photo, so the next one peeks in wider, and a
   lone photo sits in the middle. Phones only, outside the layer with the gallery's own rules */
@media (max-width:767px){
.cs[data-pd-photo] .list[data-embla][data-peek]{--pd-photo-w:min(calc(100% - 28px),calc(var(--pd-photo-h) * var(--pd-photo-r)))}
.cs[data-pd-photo] .list[data-embla][data-peek]>.lay>.li{flex:0 0 var(--pd-photo-w);max-width:var(--pd-photo-w)}
.cs[data-pd-photo] .list[data-embla][data-peek]>.lay:has(>.li:only-child){justify-content:center}
}
/* a theme whose phone photos bleed (productSheets.photoEdge): each photo runs edge to edge with no strip for the next one, and
   under a cap (photoHeight) keeps the full width and is cropped to the cap's height (the picture covers its box) */
@media (max-width:767px){
.cs[data-pd-edge=bleed] .list[data-embla][data-peek]{--pd-photo-w:100%}
.cs[data-pd-edge=bleed] .list[data-embla][data-peek]>.lay>.li{flex:0 0 100%;max-width:100%}
.cs[data-pd-edge=bleed][data-pd-photo] .list[data-embla][data-peek]>.lay>.li>.media{max-height:var(--pd-photo-h)}
}
/* A gallery's photo counter over the photos (fraction, place over) stays on the photo in view: while the next one peeks in at the
   end edge the counter sits in from the photo's own edge, and only once the last photo is flush with the box's edge (data-end)
   does it move out to the box's corner. --pd-photo-w is a slide's width (the capped photo's, else all but the peek). */
@media (max-width:767px){
.cs .list[data-embla][data-peek]{--pd-photo-w:calc(100% - 28px)}
.cs .list[data-embla][data-peek]>.c-ind[data-kind=fraction][data-place=over]{transition:right var(--dur-2) var(--ease-out)}
.cs .list[data-embla][data-peek]>.c-ind[data-kind=fraction][data-place=over]:not([data-end]){right:calc(100% - var(--pd-photo-w) + var(--s-3))}
}
@media (max-width:767px){
.cs[data-material=thick]{--cs-mat:color-mix(in srgb,var(--c-page) 92%,transparent);--cs-blur:saturate(1.8) blur(20px);--cs-top:var(--c-page)}
.cs[data-material=thick] header[data-role=header]:not([data-overlay]){background:transparent!important;border-bottom-color:transparent!important;transition:border-color var(--dur-1) linear}
.cs[data-material=thick] header[data-role=header]:not([data-overlay])>.lay{background:transparent!important}
.cs[data-material=thick] header[data-role=header]:not([data-overlay])::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cs-top);pointer-events:none}
.cs[data-material=thick][data-edge-top]:not([data-large-title=listing]) header[data-role=header]:not([data-overlay]){border-bottom-color:var(--c-border)!important}
.cs[data-material=thick] .lt-chips{background:var(--cs-top);border-bottom-color:transparent;transition:border-color var(--dur-1) linear}
.cs[data-material=thick][data-edge-top] .lt-chips{border-bottom-color:var(--c-border)}
.cs[data-material=thick][data-lt-own-bar] .lt-bar{background:var(--cs-top)}
.cs[data-material=thick]:not([data-edge-top])[data-lt-own-bar] .lt-bar{border-bottom-color:transparent}
.cs[data-material=thick] .tabbar:not([data-shape=floating]){background:color-mix(in srgb,var(--tb-bg) 92%,transparent);-webkit-backdrop-filter:var(--cs-blur);backdrop-filter:var(--cs-blur);border-top-color:transparent;transition:border-color var(--dur-1) linear}
.cs[data-material=thick][data-edge-bottom] .tabbar:not([data-shape=floating]){border-top-color:var(--tb-line)}
.cs[data-material=thick][data-pd-bar=pinned] .tabbar,.cs[data-material=thick]:has(section[data-role=product-mobile-bar][data-up]) .tabbar{border-top-color:transparent!important}
.cs[data-material=thick] section[data-role=product-mobile-bar]{background:var(--cs-mat)!important;-webkit-backdrop-filter:var(--cs-blur);backdrop-filter:var(--cs-blur);border-top-color:transparent!important}
.cs[data-material=thick] section[data-role=product-mobile-bar]>.lay{background:transparent!important;border-top-color:transparent!important}
.cs[data-material=thick][data-edge-bottom] section[data-role=product-mobile-bar]{border-top-color:var(--c-border)!important}
.cs[data-material=thick] .mr-top{background:color-mix(in srgb,var(--mr-bg) 92%,transparent);-webkit-backdrop-filter:var(--cs-blur);backdrop-filter:var(--cs-blur)}
.cs[data-controls=square] [data-role=product-media] .fav{width:36px;height:36px;border-radius:0;background:var(--cs-mat,color-mix(in srgb,var(--c-page) 92%,transparent))}
.cs[data-controls=square] .qa{right:8px;bottom:8px;border-radius:0}
.cs[data-controls=square] .qa-dot{width:36px;height:36px;border-radius:0;background:var(--cs-mat,color-mix(in srgb,var(--c-page) 92%,transparent));box-shadow:none}
.cs[data-controls=square] :is(.pd-close,.mr-close){width:36px;height:36px;border-radius:0}
.cs[data-controls=square] :is(.pd-close,.mr-close)::before{inset:-4px}
.cs[data-controls=square] .c-ind[data-kind=fraction][data-place=over]{border-radius:0;padding:5px 8px;background:var(--cs-mat,color-mix(in srgb,var(--c-page) 92%,transparent))}
.cs[data-frames=oval] .ct-thumb{width:42px;height:56px;border-radius:999px}
.cs[data-frames=oval] .lt-view>svg:not(.lt-oval){display:none}
.cs[data-catalog=tiles] .ct{--ct-in:max(16px,env(safe-area-inset-left,0px))}
.cs[data-catalog=tiles] :is(.ct-group,.ct>.ct-list .ct-row){padding-inline:var(--ct-in)}
.cs[data-catalog=tiles] .ct>.ct-list .ct-thumb{display:none}
.cs[data-catalog=tiles] .ct section .ct-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) 12px;padding:var(--s-1) var(--ct-in) 0;border-top:0}
.cs[data-catalog=tiles] .ct-group{padding-top:var(--s-6);padding-bottom:var(--s-3)}
.cs[data-catalog=tiles] .ct section .ct-row{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:44px;padding:0;border-bottom:0;font-family:var(--t-body-m-ff);font-size:var(--t-body-m-fs);font-weight:var(--t-body-m-fw);line-height:var(--t-body-m-lh)}
.cs[data-catalog=tiles] .ct section .ct-row:active{background:none}
.cs[data-catalog=tiles] .ct section .ct-thumb{width:100%;height:auto;aspect-ratio:1;border-radius:0;object-fit:cover;object-position:50% 20%;margin-bottom:var(--s-2);transition:opacity var(--dur-1) linear}
.cs[data-catalog=tiles] .ct section .ct-row:active .ct-thumb{opacity:.72;transition-duration:40ms}
.cs[data-catalog=tiles] .ct section .ct-name{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cs[data-catalog=tiles] .ct section .ct-n{line-height:var(--t-body-s-lh)}
.cs[data-catalog=tiles] .ct section .ct-row>svg:last-child{display:none}
@media (min-width:428px){.cs[data-catalog=tiles] .ct{--ct-in:max(20px,env(safe-area-inset-left,0px))}}
}
/* a theme with square controls (phoneShell.controls) has square hearts on every screen: outside the layer and the phone query, so
   it wins over the theme's own node radius on a computer too */
.cs[data-controls=square] .fav:not([data-display=button]){border-radius:0}
/* query suggestions for what is typed (data-typed) are no longer the popular searches the design's heading above them names:
   the heading steps aside while they show (the list is named "Подсказки" for screen readers) */
.cs .text:has(+ .list[data-of=queries][data-typed]){display:none}
/* the photo viewer (outside the shop's root): its counter in the design's body face (photo-viewer.ts pageFont), not the browser's serif */
.pswp .pswp__counter{font-family:var(--cs-viewer-ff,system-ui,sans-serif);font-variant-numeric:tabular-nums}
/* the photo viewer (outside the shop's root) with round controls on a page-coloured viewer: its buttons and counter on discs of the primary colour (photo-viewer.ts pageColours) */
.pswp[data-cs-discs] .pswp__button::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--cs-disc-bg);box-shadow:inset 0 0 0 1px var(--cs-disc-edge)}
.pswp[data-cs-discs] .pswp__icn{top:14px;left:9px;scale:.75}
.pswp[data-cs-discs] .pswp__counter{margin:15px 0 0 12px;height:30px;padding:0 12px;border-radius:999px;line-height:30px;background:var(--cs-disc-bg);color:var(--cs-disc-fg);box-shadow:inset 0 0 0 1px var(--cs-disc-edge);text-shadow:none;opacity:1}
/* Dark mode for what the renderer lays over the page (native-feel 5.4 colorize). light-dark() takes its first value while the
   page is light, so a light page is drawn exactly as before; in dark mode a bottom sheet and a toast rise onto the raised
   surface (on a phone, as iOS's sheets do, instead of melting into the page; a toast keeps the design's own shadow, --sh-m), the
   quick add's shadow is black rather than a glow of the light ink, and a square-controls theme (phoneShell.controls) puts a card's badge word on the same
   graphite material as its heart, since product photos stay light whatever the page is. Outside the layer, as the sheet's
   close button and the toasts' own rules are. Browsers without light-dark() keep the rules above. */
@supports (color:light-dark(#000,#fff)){
.cs .sh[data-look=sheet]{background:light-dark(var(--c-page),var(--c-surface))}
.cs .sh[data-look=sheet] .pd-close{background:color-mix(in srgb,var(--c-text) 8%,light-dark(var(--c-page),var(--c-surface)))}
.cs [data-sonner-toaster][data-sonner-theme]{--normal-bg:light-dark(var(--c-page),var(--c-surface))}
.cs .qa-dot{box-shadow:0 1px 4px light-dark(color-mix(in srgb,var(--c-text) 16%,transparent),rgba(0,0,0,.4))}
.cs[data-controls=square] [data-role=product-media] .badge{background:light-dark(transparent,var(--cs-mat,color-mix(in srgb,var(--c-page) 92%,transparent)));box-shadow:0 0 0 6px light-dark(transparent,var(--cs-mat,color-mix(in srgb,var(--c-page) 92%,transparent)))}
}

@layer cs-base{
.cs .cs-cart-note{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147482000;max-width:min(92vw,440px);padding:var(--s-3) var(--s-5);border-radius:var(--r-m);background:var(--c-text);color:var(--c-page);font:var(--t-body-s-fw) var(--t-body-s-fs)/var(--t-body-s-lh) var(--t-body-s-ff);box-shadow:var(--sh-m);text-align:center;animation:ck-rise var(--dur-2,.22s) var(--ease-out,ease);white-space:normal;text-transform:none;letter-spacing:normal}
.cs .cs-cart-note[data-ok=false]{background:var(--c-error);color:#fff}
@keyframes ck-rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){@keyframes ck-rise{from{opacity:0}}}

.cs [data-role=address]{white-space:pre-line}
.cs form[data-purpose=payment][data-pay-flow] button[type=submit]{display:none}

/* the payment provider's widget */
.cs .sealed[data-block=PaymentWidget]{display:block;padding:0;border:0;border-radius:0;background:none}
.cs .sealed[data-block=PaymentWidget]:has(>.ck>.ck-live:empty:only-child),.cs .sealed[data-block=PaymentWidget]:empty{display:none}
.cs .ck{--ck-warn:light-dark(#92400e,#fbbf24);color:var(--c-text);font-family:var(--t-body-m-ff);font-size:var(--t-body-m-fs);line-height:var(--t-body-m-lh);min-width:0}
.cs .ck p{margin:0}
.cs .ck-stack{display:flex;flex-direction:column;gap:var(--s-3)}
.cs .ck-live:empty{display:none}
.cs .ck-muted{color:var(--c-text-muted);font-size:var(--t-body-s-fs);line-height:var(--t-body-s-lh)}
.cs .ck-error-text{color:var(--c-error)}
.cs .ck-error{margin:0;padding:var(--s-3) var(--s-4);border-left:3px solid var(--c-error);border-radius:var(--r-s);background:color-mix(in srgb,var(--c-error) 9%,var(--c-page));color:var(--c-text);font-size:var(--t-body-s-fs);line-height:var(--t-body-s-lh)}
.cs .ck-note{padding:var(--s-3) var(--s-4);border-radius:var(--r-s);background:var(--c-surface);font-size:var(--t-body-s-fs);line-height:var(--t-body-s-lh);color:var(--c-text-muted)}
.cs .ck-note[data-tone=warn]{background:color-mix(in srgb,var(--ck-warn) 12%,var(--c-page));color:var(--c-text);border:1px solid color-mix(in srgb,var(--ck-warn) 40%,transparent)}
.cs .ck-placeholder{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5);border:1px dashed var(--c-border);border-radius:var(--r-m);color:var(--c-text-muted);background:var(--c-surface)}
.cs .ck-placeholder strong{color:var(--c-text)}
.cs .ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-6);border-radius:var(--btn-radius,var(--r-s));border:1.5px solid var(--c-extra-primary-edge,var(--c-primary));background:var(--c-primary);color:var(--c-on-primary);font:var(--t-button-fw) var(--t-button-fs)/1.2 var(--t-button-ff);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);cursor:pointer;text-align:center;transition:opacity .15s,background-color .15s,color .15s,border-color .15s;text-decoration:none}
@media (hover:hover) and (pointer:fine){.cs .ck-btn:hover{opacity:.88}}
.cs .ck-btn[data-variant=secondary]{background:transparent;color:var(--c-text);border-color:var(--c-border)}
@media (hover:hover) and (pointer:fine){.cs .ck-btn[data-variant=secondary]:hover{opacity:1;border-color:var(--c-text)}}
.cs .ck-btn[data-wide]{width:100%}
.cs .ck-btn:disabled{opacity:.55;cursor:not-allowed}
.cs .ck-btn[aria-busy=true]{cursor:progress}
.cs .ck-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ck-spin .7s linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
.cs .ck-row-buttons{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cs .ck-row-buttons>.ck-btn{flex:1 1 auto}
.cs .ck-frame{width:100%;height:calc(100dvh - 5rem);max-height:720px;min-height:480px;border:0;border-radius:var(--r-s);background:#fff}
.cs .ck-mock{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border:1px dashed var(--ck-warn);border-radius:var(--r-s);background:color-mix(in srgb,var(--ck-warn) 9%,var(--c-page));font-size:var(--t-body-s-fs)}
}
@layer cs-base{
.cs [data-role=address-lines]{white-space:pre-line}
}
:root{--c-page:#f5f4f1;--c-surface:#f5f4f1;--c-surface-muted:#e8e7e4;--c-text:#1c1c1c;--c-text-muted:#666665;--c-primary:#1c1c1c;--c-on-primary:#f5f4f1;--c-accent:#9a4a2c;--c-on-accent:#f5f4f1;--c-border:#d7d6d3;--c-sale:#b3261e;--c-error:#b3261e;--c-on-media:#ffffff;--c-overlay:#111111;--c-extra-bar:#111111;--c-extra-on-bar:#ffffff;--s-0:0px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:160px;--r-none:0px;--r-s:0px;--r-m:0px;--r-l:2px;--r-pill:999px;--size-text:680px;--size-narrow:960px;--size-content:1320px;--size-wide:1600px;--sh-s:0px 0px 0px 0px rgba(17,17,17,1);--sh-m:0px 8px 32px -12px rgba(17,17,17,1);--sh-l:0 16px 48px rgba(0,0,0,.18);--t-display-xl-ff:"Cormorant Garamond", "Georgia", serif;--t-display-xl-fs:120px;--t-display-xl-fw:300;--t-display-xl-lh:0.95;--t-display-xl-ls:-2.4px;--t-display-xl-tt:none;--t-display-l-ff:"Cormorant Garamond", "Georgia", serif;--t-display-l-fs:64px;--t-display-l-fw:300;--t-display-l-lh:1.02;--t-display-l-ls:-1.2px;--t-display-l-tt:none;--t-display-m-ff:"Cormorant Garamond", "Georgia", serif;--t-display-m-fs:44px;--t-display-m-fw:300;--t-display-m-lh:1.08;--t-display-m-ls:-0.6px;--t-display-m-tt:none;--t-title-l-ff:"Cormorant Garamond", "Georgia", serif;--t-title-l-fs:30px;--t-title-l-fw:400;--t-title-l-lh:1.15;--t-title-l-ls:-0.3px;--t-title-l-tt:none;--t-title-m-ff:"Cormorant Garamond", "Georgia", serif;--t-title-m-fs:22px;--t-title-m-fw:400;--t-title-m-lh:1.25;--t-title-m-ls:0px;--t-title-m-tt:none;--t-title-s-ff:"Inter Tight", system-ui, sans-serif;--t-title-s-fs:14px;--t-title-s-fw:500;--t-title-s-lh:1.35;--t-title-s-ls:0px;--t-title-s-tt:none;--t-body-l-ff:"Inter Tight", system-ui, sans-serif;--t-body-l-fs:16px;--t-body-l-fw:400;--t-body-l-lh:1.55;--t-body-l-ls:0px;--t-body-l-tt:none;--t-body-m-ff:"Inter Tight", system-ui, sans-serif;--t-body-m-fs:15px;--t-body-m-fw:400;--t-body-m-lh:1.55;--t-body-m-ls:0px;--t-body-m-tt:none;--t-body-s-ff:"Inter Tight", system-ui, sans-serif;--t-body-s-fs:13px;--t-body-s-fw:400;--t-body-s-lh:1.5;--t-body-s-ls:0.1px;--t-body-s-tt:none;--t-label-ff:"Inter Tight", system-ui, sans-serif;--t-label-fs:12px;--t-label-fw:500;--t-label-lh:1.3;--t-label-ls:0px;--t-label-tt:none;--t-caption-ff:"Inter Tight", system-ui, sans-serif;--t-caption-fs:12px;--t-caption-fw:400;--t-caption-lh:1.4;--t-caption-ls:0.2px;--t-caption-tt:none;--t-price-ff:"Inter Tight", system-ui, sans-serif;--t-price-fs:14px;--t-price-fw:500;--t-price-lh:1.3;--t-price-ls:0.2px;--t-price-tt:none;--t-nav-ff:"Inter Tight", system-ui, sans-serif;--t-nav-fs:14px;--t-nav-fw:400;--t-nav-lh:1.25;--t-nav-ls:0px;--t-nav-tt:none;--t-button-ff:"Inter Tight", system-ui, sans-serif;--t-button-fs:15px;--t-button-fw:500;--t-button-lh:1.2;--t-button-ls:0px;--t-button-tt:none;--t-extra-tab-ff:"Inter Tight", system-ui, sans-serif;--t-extra-tab-fs:11px;--t-extra-tab-fw:500;--t-extra-tab-lh:1.15;--t-extra-tab-ls:0.66px;--t-extra-tab-tt:none;--t-extra-nav-caps-ff:"Inter Tight", system-ui, sans-serif;--t-extra-nav-caps-fs:12px;--t-extra-nav-caps-fw:500;--t-extra-nav-caps-lh:1.2;--t-extra-nav-caps-ls:1.4px;--t-extra-nav-caps-tt:uppercase;--t-extra-wordmark-ff:"Cormorant Garamond", "Georgia", serif;--t-extra-wordmark-fs:24px;--t-extra-wordmark-fw:700;--t-extra-wordmark-lh:1;--t-extra-wordmark-ls:1.4px;--t-extra-wordmark-tt:uppercase;--t-extra-statement-ff:"Cormorant Garamond", "Georgia", serif;--t-extra-statement-fs:28px;--t-extra-statement-fw:300;--t-extra-statement-lh:1.3;--t-extra-statement-ls:-0.3px;--t-extra-statement-tt:none}
@media (max-width: 767px){:root{--t-display-xl-fs:52px;--t-display-l-fs:38px;--t-display-m-fs:34px;--t-display-m-ls:-0.68px;--t-title-l-fs:17px;--t-title-l-lh:1.3;--t-title-l-ls:0px;--t-title-m-fs:17px;--t-title-m-lh:1.3;--t-body-l-fs:17px;--t-body-l-lh:1.47;--t-body-m-fs:17px;--t-body-m-lh:1.47;--t-body-s-fs:15px;--t-body-s-lh:1.4;--t-body-s-ls:0px;--t-price-fs:15px;--t-price-ls:0px;--t-nav-fs:15px;--t-extra-statement-fs:22px;--t-extra-statement-lh:1.36;--t-extra-statement-ls:-0.2px}}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--c-page:#121314;--c-surface:#1c1d1f;--c-surface-muted:#1a1b1d;--c-text:#f2f2f2;--c-text-muted:#8e9095;--c-primary:#f2f2f2;--c-on-primary:#121314;--c-accent:#8e9095;--c-on-accent:#121314;--c-border:#313236;--c-sale:#ff6b5e;--c-error:#ff6b5e;--c-on-media:#ffffff;--c-overlay:#000000;--c-extra-bar:#1c1d1f;--c-extra-on-bar:#f2f2f2;color-scheme:dark;--ti-moon:none;--ti-sun:inline-flex}}
:root[data-theme=dark]{--c-page:#121314;--c-surface:#1c1d1f;--c-surface-muted:#1a1b1d;--c-text:#f2f2f2;--c-text-muted:#8e9095;--c-primary:#f2f2f2;--c-on-primary:#121314;--c-accent:#8e9095;--c-on-accent:#121314;--c-border:#313236;--c-sale:#ff6b5e;--c-error:#ff6b5e;--c-on-media:#ffffff;--c-overlay:#000000;--c-extra-bar:#1c1d1f;--c-extra-on-bar:#f2f2f2;color-scheme:dark;--ti-moon:none;--ti-sun:inline-flex}
@media (max-width: 767px) and (prefers-color-scheme: dark){:root:not([data-theme-lock]){--c-page:#121314;--c-surface:#1c1d1f;--c-surface-muted:#1a1b1d;--c-text:#f2f2f2;--c-text-muted:#8e9095;--c-primary:#f2f2f2;--c-on-primary:#121314;--c-accent:#8e9095;--c-on-accent:#121314;--c-border:#313236;--c-sale:#ff6b5e;--c-error:#ff6b5e;--c-on-media:#ffffff;--c-overlay:#000000;--c-extra-bar:#1c1d1f;--c-extra-on-bar:#f2f2f2;color-scheme:dark;--ti-moon:none;--ti-sun:inline-flex}}
@media (max-width: 767px) and (prefers-color-scheme: light){:root[data-theme=dark]:not([data-theme-lock]){--c-page:#f5f4f1;--c-surface:#f5f4f1;--c-surface-muted:#e8e7e4;--c-text:#1c1c1c;--c-text-muted:#666665;--c-primary:#1c1c1c;--c-on-primary:#f5f4f1;--c-accent:#9a4a2c;--c-on-accent:#f5f4f1;--c-border:#d7d6d3;--c-sale:#b3261e;--c-error:#b3261e;--c-on-media:#ffffff;--c-overlay:#111111;--c-extra-bar:#111111;--c-extra-on-bar:#ffffff;color-scheme:light;--ti-moon:inline-flex;--ti-sun:none}}


.n-announcement{background:var(--c-extra-bar);--on-bg:var(--c-page);display:flex;flex-direction:column;position:relative}
.n-announcement>.lay{padding-top:var(--s-2);padding-bottom:var(--s-2);padding-left:var(--s-5);padding-right:var(--s-5)}
.n-announcement-messages{width:100%;max-width:var(--size-narrow);align-self:center}
.n-announcement-messages>.lay{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0px}
.n-announcement-messages > .lay > *{flex:0 0 calc((100% - 0px * 0) / 1);scroll-snap-align:start;min-width:0}
.n-announcement-delivery{font-family:var(--t-label-ff);font-size:var(--t-label-fs);font-weight:var(--t-label-fw);line-height:var(--t-label-lh);letter-spacing:var(--t-label-ls);text-transform:var(--t-label-tt);color:var(--c-extra-on-bar);text-align:center;margin:0}
.n-header{background:var(--c-page);--on-bg:var(--c-text);border-bottom:1px solid var(--c-border);position:sticky;top:0px;z-index:30;display:flex;flex-direction:column}
.n-header>.lay{padding-top:var(--s-4);padding-bottom:var(--s-4);padding-left:var(--s-6);padding-right:var(--s-6);max-width:calc(var(--size-wide) + var(--s-6) + var(--s-6))}
.n-header-grid>.lay{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);column-gap:var(--s-4);row-gap:var(--s-4);align-items:center}
.n-header-start>.lay{display:flex;flex-direction:row;gap:var(--s-5);align-items:center}
.n-header-menu{font-family:var(--t-extra-nav-caps-ff);font-size:var(--t-extra-nav-caps-fs);font-weight:var(--t-extra-nav-caps-fw);line-height:var(--t-extra-nav-caps-lh);letter-spacing:var(--t-extra-nav-caps-ls);text-transform:var(--t-extra-nav-caps-tt);--pnl-bg:var(--c-page);--pnl-bt:none;--pnl-br:none;--pnl-bb:1px solid var(--c-text);--pnl-bl:none;--pnl-r:var(--r-none);--pnl-sh:var(--sh-s);--pnl-p:var(--s-6) var(--s-6) var(--s-8) var(--s-6);--pnl-font:var(--t-extra-nav-caps-fw) var(--t-extra-nav-caps-fs)/var(--t-extra-nav-caps-lh) var(--t-extra-nav-caps-ff);--pnl-ls:var(--t-extra-nav-caps-ls);--pnl-tt:var(--t-extra-nav-caps-tt)}
.n-header-menu>.lay{display:flex;flex-direction:row;gap:var(--s-6);flex-wrap:wrap}
.n-header-middle>.lay{display:flex;flex-direction:row;align-items:center;justify-content:center}
.n-header-logo{--size:20px;font-family:var(--t-title-m-ff);font-size:24px;font-weight:700;letter-spacing:0.06em;--logo-h:30px}
.n-header-end>.lay{display:flex;flex-direction:row;gap:var(--s-5);align-items:center;justify-content:flex-end}
.n-header-search{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-header-account{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-header-favourites{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-header-cart{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-footer{background:var(--c-page);--on-bg:var(--c-text);display:flex;flex-direction:column;position:relative}
.n-footer>.lay{padding-top:var(--s-0);padding-bottom:var(--s-5);padding-left:var(--s-6);padding-right:var(--s-6);max-width:calc(var(--size-wide) + var(--s-6) + var(--s-6))}
.n-footer-links{padding-top:var(--s-9);padding-bottom:var(--s-9)}
.n-footer-links>.lay{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--s-6);row-gap:var(--s-7);align-items:flex-start}
.n-footer-shop>.lay{display:flex;flex-direction:column;gap:var(--s-4)}
.n-footer-shop-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);margin:0}
.n-footer-shop-menu{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt)}
.n-footer-shop-menu>.lay{display:flex;flex-direction:column;gap:var(--s-3);flex-wrap:nowrap}
.n-footer-shop-menu .msep{display:none}
.n-footer-help>.lay{display:flex;flex-direction:column;gap:var(--s-4)}
.n-footer-help-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);margin:0}
.n-footer-help-menu{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt)}
.n-footer-help-menu>.lay{display:flex;flex-direction:column;gap:var(--s-3);flex-wrap:nowrap}
.n-footer-help-menu .msep{display:none}
.n-footer-house>.lay{display:flex;flex-direction:column;gap:var(--s-4)}
.n-footer-house-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);margin:0}
.n-footer-house-menu{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt)}
.n-footer-house-menu>.lay{display:flex;flex-direction:column;gap:var(--s-3);flex-wrap:nowrap}
.n-footer-house-menu .msep{display:none}
.n-footer-contact>.lay{display:flex;flex-direction:column;gap:var(--s-4)}
.n-footer-contact-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);margin:0}
.n-footer-contact-lines>.lay{display:flex;flex-direction:column;gap:var(--s-3)}
.n-footer-phone{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);margin:0}
.n-footer-email{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);margin:0}
.n-footer-hours{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);color:var(--c-text-muted);margin:0}
.n-footer-write{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt)}
.n-footer-write>.lay{display:flex;flex-direction:column;gap:var(--s-4);flex-wrap:nowrap}
.n-footer-write .msep{display:none}
.n-footer-social{padding-top:var(--s-1);font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-footer-social>.lay{display:flex;flex-direction:row;gap:var(--s-4);flex-wrap:wrap}
.n-footer-bar{padding-top:var(--s-4);border-top:1px solid var(--c-border)}
.n-footer-bar>.lay{display:flex;flex-direction:row;gap:var(--s-5);align-items:center;justify-content:space-between;flex-wrap:wrap}
.n-footer-language{border-radius:var(--r-none);border:1px solid var(--c-border);font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt);--ch-r:var(--r-none);--ch-font:inherit}
.n-footer-rules{--fg:var(--c-text-muted);font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt)}
.n-footer-rules>.lay{display:flex;flex-direction:row;gap:var(--s-5);flex-wrap:wrap}
.n-footer-name{font-family:var(--t-label-ff);font-size:var(--t-label-fs);font-weight:var(--t-label-fw);line-height:var(--t-label-lh);letter-spacing:var(--t-label-ls);text-transform:var(--t-label-tt);color:var(--c-text-muted);margin:0}
.n-menu{background:var(--c-page);--on-bg:var(--c-text);padding-top:var(--s-5);padding-bottom:var(--s-5);padding-left:var(--s-6);padding-right:var(--s-6);--ov-w:min(33.33vw, calc(100vw - 16px));--ov-bg:var(--c-page)}
.n-menu-top>.lay{display:flex;flex-direction:row;align-items:center;justify-content:space-between}
.n-menu-logo{--size:16px;font-family:var(--t-title-m-ff);font-size:18px;font-weight:700;letter-spacing:0.06em;--logo-h:22px}
.n-menu-main{padding-top:var(--s-6);font-family:var(--t-title-l-ff);font-size:var(--t-title-l-fs);font-weight:var(--t-title-l-fw);line-height:var(--t-title-l-lh);letter-spacing:var(--t-title-l-ls);text-transform:var(--t-title-l-tt);--pnl-bg:var(--c-page);--pnl-bt:none;--pnl-br:1px solid var(--c-text);--pnl-bb:none;--pnl-bl:none;--pnl-r:var(--r-none);--pnl-sh:var(--sh-s);--pnl-p:var(--s-6) var(--s-6) var(--s-6) var(--s-6);--pnl-font:var(--t-nav-fw) var(--t-nav-fs)/var(--t-nav-lh) var(--t-nav-ff);--pnl-ls:var(--t-nav-ls);--pnl-tt:var(--t-nav-tt)}
.n-menu-main>.lay{display:flex;flex-direction:column;gap:var(--s-4);flex-wrap:nowrap}
.n-menu-main .msep{display:none}
.n-menu-rule{border:0;border-top:1px solid var(--c-border);width:100%;margin:0}
.n-menu-links>.lay{display:flex;flex-direction:column;gap:var(--s-3)}
.n-menu-account{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-menu-favourites{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-menu-help{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-menu-help>.lay{display:flex;flex-direction:column;gap:var(--s-3);flex-wrap:nowrap}
.n-menu-help .msep{display:none}
.n-menu-write{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-menu-write>.lay{display:flex;flex-direction:column;gap:var(--s-3);flex-wrap:nowrap}
.n-menu-write .msep{display:none}
.n-menu-foot{padding-top:var(--s-4)}
.n-menu-foot>.lay{display:flex;flex-direction:row}
.n-menu-language{border-radius:var(--r-none);border:1px solid var(--c-border);font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt);--ch-r:var(--r-none);--ch-font:inherit}
.n-search{background:var(--c-page);--on-bg:var(--c-text);padding-top:var(--s-6);padding-bottom:var(--s-7);padding-left:var(--s-6);padding-right:var(--s-6)}
.n-search-inner{width:100%;max-width:var(--size-content);align-self:center}
.n-search-inner>.lay{display:flex;flex-direction:column;gap:var(--s-6)}
.n-search-form>.lay{display:flex;flex-direction:row;gap:var(--s-4);align-items:center}
.n-search-form > .lay > button.btn[type=submit]{align-self:stretch}
.n-search-form > .lay:not(:has(> .field ~ .field)):has(> div.field > :is(label + .control, .control ~ .help, .control ~ .field-error)){flex-wrap:wrap;row-gap:6px}
.n-search-form > .lay:not(:has(> .field ~ .field)):has(> div.field > :is(label + .control, .control ~ .help, .control ~ .field-error)) > div.field{display:contents}
.n-search-form > .lay:not(:has(> .field ~ .field)):has(> div.field > :is(label + .control, .control ~ .help, .control ~ .field-error)) > div.field > .control{flex:1 1 0;min-width:0}
.n-search-form > .lay:not(:has(> .field ~ .field)):has(> div.field > :is(label + .control, .control ~ .help, .control ~ .field-error)) > div.field > :is(label,.help,.field-error){flex-basis:100%}
.n-search-form > .lay:not(:has(> .field ~ .field)):has(> div.field > :is(label + .control, .control ~ .help, .control ~ .field-error)) > div.field > label{order:-1}
.n-search-form > .lay:not(:has(> .field ~ .field)):has(> div.field > :is(label + .control, .control ~ .help, .control ~ .field-error)) > div.field > :is(.help,.field-error){order:1}
.n-search-form > .lay:has(> .field ~ .field):has(> .field > label) > button.btn[type=submit]{align-self:flex-end}
.n-search-input{flex:1 1 0;min-width:0;--size:28px}
.n-search-columns>.lay{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 3fr);column-gap:var(--s-8);row-gap:var(--s-8)}
.n-search-words>.lay{display:flex;flex-direction:column;gap:var(--s-3)}
.n-search-words-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);color:var(--c-accent);margin:0}
.n-search-queries>.lay{display:flex;flex-direction:column;gap:var(--s-2)}
.n-search-query{font-family:var(--t-body-m-ff);font-size:var(--t-body-m-fs);font-weight:var(--t-body-m-fw);line-height:var(--t-body-m-lh);letter-spacing:var(--t-body-m-ls);text-transform:var(--t-body-m-tt);margin:0}
.n-search-new>.lay{display:flex;flex-direction:column;gap:var(--s-3)}
.n-search-new-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);color:var(--c-accent);margin:0}
.n-search-new-list>.lay{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:var(--s-3);row-gap:var(--s-3)}
.n-search-mini>.lay{display:flex;flex-direction:column;gap:var(--s-2)}
.n-search-mini-image{background:var(--c-surface-muted);--on-bg:var(--c-text);position:relative;aspect-ratio:3 / 4;--fit:cover;overflow:hidden}
.n-search-mini-title{font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}
.n-search-mini-price{--sale:var(--c-sale);font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt)}
.n-cart{background:var(--c-page);--on-bg:var(--c-text);padding-top:var(--s-5);padding-bottom:var(--s-5);padding-left:var(--s-8);padding-right:var(--s-8);--ov-w:min(60.00vw, calc(100vw - 16px));--ov-bg:var(--c-page);display:flex;flex-direction:column;overflow:hidden}
.n-cart>.lay{flex:1 1 auto;min-height:0}
.n-cart-top{padding-bottom:var(--s-4);border-bottom:1px solid var(--c-text)}
.n-cart-top>.lay{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);align-items:center}
.n-cart-close{align-self:flex-start}
.n-cart-title-row>.lay{display:flex;flex-direction:row;gap:var(--s-2);align-items:baseline;justify-content:center}
.n-cart-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);margin:0}
.n-cart-count{font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);color:var(--c-text-muted);margin:0}
.n-cart-top-end>.lay{display:flex;flex-direction:row;justify-content:flex-end}
.n-cart-saved{font-family:var(--t-nav-ff);font-size:var(--t-nav-fs);font-weight:var(--t-nav-fw);line-height:var(--t-nav-lh);letter-spacing:var(--t-nav-ls);text-transform:var(--t-nav-tt)}
.n-cart-delivery{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);color:var(--c-text-muted);text-align:center;margin:0}
.n-cart-body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1 1 auto;min-height:0}
.n-cart-body>.lay{display:flex;flex-direction:column;gap:var(--s-7)}
.n-cart-body[data-more-end]{-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 32px), transparent);mask-image:linear-gradient(to bottom, #000 calc(100% - 32px), transparent)}
.n-cart-empty{padding-top:var(--s-9);padding-bottom:var(--s-9)}
.n-cart-empty>.lay{display:flex;flex-direction:column;gap:var(--s-5);align-items:center}
.n-cart-empty-text{font-family:var(--t-title-m-ff);font-size:var(--t-title-m-fs);font-weight:var(--t-title-m-fw);line-height:var(--t-title-m-lh);letter-spacing:var(--t-title-m-ls);text-transform:var(--t-title-m-tt);text-align:center;margin:0}
.n-cart-empty-shop{font-family:var(--t-button-ff);font-size:var(--t-button-fs);font-weight:var(--t-button-fw);line-height:var(--t-button-lh);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);padding:var(--s-4) var(--s-6);border-radius:var(--btn-radius, var(--r-s));background:transparent;color:var(--c-text);border:1.5px solid var(--c-text)}
.n-cart-lines>.lay{display:flex;flex-direction:column;gap:var(--s-5)}
.n-cart-lines > .lay > .li + .li{border-top:1px solid var(--c-border);padding-top:var(--s-5)}
.n-cart-line>.lay{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);column-gap:var(--s-5);row-gap:var(--s-5);align-items:flex-start}
.n-cart-line-image{background:var(--c-surface-muted);--on-bg:var(--c-text);position:relative;aspect-ratio:3 / 4;--fit:cover;overflow:hidden}
.n-cart-line-text>.lay{display:flex;flex-direction:column;gap:var(--s-2)}
.n-cart-line-title{font-family:var(--t-body-m-ff);font-size:var(--t-body-m-fs);font-weight:var(--t-body-m-fw);line-height:var(--t-body-m-lh);letter-spacing:var(--t-body-m-ls);text-transform:var(--t-body-m-tt);margin:0}
.n-cart-line-options{font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);color:var(--c-text-muted);margin:0}
.n-cart-line-quantity{align-self:flex-start;padding-top:var(--s-2);--size:16px}
.n-cart-line-total{font-family:var(--t-price-ff);font-size:var(--t-price-fs);font-weight:var(--t-price-fw);line-height:var(--t-price-lh);letter-spacing:var(--t-price-ls);text-transform:var(--t-price-tt);text-align:right;margin:0}
.n-cart-more{padding-top:var(--s-5);border-top:1px solid var(--c-border)}
.n-cart-more>.lay{display:flex;flex-direction:column;gap:var(--s-4)}
.n-cart-more-title{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);text-align:center;margin:0}
.n-cart-more-list>.lay{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--s-3);row-gap:var(--s-3)}
.n-cart-more-item>.lay{display:flex;flex-direction:column;gap:var(--s-1)}
.n-cart-more-image{background:var(--c-surface-muted);--on-bg:var(--c-text);position:relative;aspect-ratio:3 / 4;--fit:cover;overflow:hidden}
.n-cart-more-name{font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}
.n-cart-more-price{--sale:var(--c-sale);font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt)}
.n-cart-foot{padding-top:var(--s-4);border-top:1px solid var(--c-text)}
.n-cart-foot>.lay{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--s-6);row-gap:var(--s-6);align-items:center}
.n-cart-foot-sum>.lay{display:flex;flex-direction:column;gap:var(--s-1)}
.n-cart-subtotal>.lay{display:flex;flex-direction:row;gap:var(--s-4);align-items:baseline;justify-content:space-between}
.n-cart-subtotal-label{font-family:var(--t-title-s-ff);font-size:var(--t-title-s-fs);font-weight:var(--t-title-s-fw);line-height:var(--t-title-s-lh);letter-spacing:var(--t-title-s-ls);text-transform:var(--t-title-s-tt);margin:0}
.n-cart-subtotal-value{font-family:var(--t-price-ff);font-size:var(--t-price-fs);font-weight:var(--t-price-fw);line-height:var(--t-price-lh);letter-spacing:var(--t-price-ls);text-transform:var(--t-price-tt);margin:0}
.n-cart-note{font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);color:var(--c-text-muted);margin:0}
.n-cart-foot-go>.lay{display:flex;flex-direction:column;gap:var(--s-2)}
.n-cart-checkout{width:100%;font-family:var(--t-button-ff);font-size:var(--t-button-fs);font-weight:var(--t-button-fw);line-height:var(--t-button-lh);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);padding:var(--s-4) var(--s-6);border-radius:var(--btn-radius, var(--r-s));background:var(--c-primary);color:var(--c-on-primary);border:1.5px solid var(--c-primary)}
.n-cart-view{align-self:center;font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);padding:0;background:none;color:var(--c-text);text-decoration:underline;text-underline-offset:4px;border:0}
.n-added{background:var(--c-page);--on-bg:var(--c-text);padding-top:var(--s-4);padding-bottom:var(--s-4);padding-left:var(--s-4);padding-right:var(--s-4);border:1px solid var(--c-border);box-shadow:var(--sh-m);--ov-w:min(25.00vw, calc(100vw - 16px))}
.n-added-row>.lay{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 3fr);column-gap:var(--s-4);row-gap:var(--s-4);align-items:center}
.n-added-image{background:var(--c-surface-muted);--on-bg:var(--c-text);position:relative;aspect-ratio:3 / 4;--fit:cover;overflow:hidden}
.n-added-text>.lay{display:flex;flex-direction:column;gap:var(--s-2)}
.n-added-label{font-family:var(--t-label-ff);font-size:var(--t-label-fs);font-weight:var(--t-label-fw);line-height:var(--t-label-lh);letter-spacing:var(--t-label-ls);text-transform:var(--t-label-tt);color:var(--c-accent);margin:0}
.n-added-title{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}
.n-added-open{align-self:flex-start;font-family:var(--t-button-ff);font-size:var(--t-button-fs);font-weight:var(--t-button-fw);line-height:var(--t-button-lh);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);padding:0;background:none;color:var(--c-text);text-decoration:underline;text-underline-offset:4px;border:0}
.n-cookies{background:var(--c-extra-bar);--on-bg:var(--c-page);padding-top:var(--s-4);padding-bottom:var(--s-4);padding-left:var(--s-6);padding-right:var(--s-6)}
.n-cookies-row>.lay{display:flex;flex-direction:row;gap:var(--s-5);align-items:center}
.n-cookies-text{flex:1 1 0;min-width:0;font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);color:var(--c-extra-on-bar);margin:0}
.n-cookies-accept{font-family:var(--t-button-ff);font-size:var(--t-button-fs);font-weight:var(--t-button-fw);line-height:var(--t-button-lh);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);padding:var(--s-3) var(--s-5);border-radius:var(--btn-radius, var(--r-s));background:transparent;color:var(--c-extra-on-bar);border:1.5px solid var(--c-extra-on-bar)}
.n-cookies-decline{font-family:var(--t-button-ff);font-size:var(--t-button-fs);font-weight:var(--t-button-fw);line-height:var(--t-button-lh);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);padding:var(--s-3) var(--s-5);border-radius:var(--btn-radius, var(--r-s));background:transparent;color:var(--c-extra-on-bar);border:1.5px solid var(--c-extra-on-bar)}
.n-cookies-phone>.lay{display:flex;flex-direction:column;gap:var(--s-3)}
.n-cookies-phone-text{font-family:var(--t-body-s-ff);font-size:var(--t-body-s-fs);font-weight:var(--t-body-s-fw);line-height:var(--t-body-s-lh);letter-spacing:var(--t-body-s-ls);text-transform:var(--t-body-s-tt);color:var(--c-extra-on-bar);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}
.n-cookies-phone-actions>.lay{display:flex;flex-direction:row;gap:var(--s-5);align-items:center}
.n-cookies-phone-accept{font-family:var(--t-button-ff);font-size:var(--t-button-fs);font-weight:var(--t-button-fw);line-height:var(--t-button-lh);letter-spacing:var(--t-button-ls);text-transform:var(--t-button-tt);padding:var(--s-2) var(--s-4);border-radius:var(--btn-radius, var(--r-s));background:transparent;color:var(--c-extra-on-bar);border:1.5px solid var(--c-extra-on-bar)}
.n-cookies-phone-decline{font-family:var(--t-caption-ff);font-size:var(--t-caption-fs);font-weight:var(--t-caption-fw);line-height:var(--t-caption-lh);letter-spacing:var(--t-caption-ls);text-transform:var(--t-caption-tt);padding:0;background:none;color:var(--c-extra-on-bar);text-decoration:underline;text-underline-offset:4px;border:0}
@media (max-width: 1023px){.n-header>.lay{padding-top:var(--s-3);padding-bottom:var(--s-3);padding-left:var(--s-5);padding-right:var(--s-5);max-width:calc(var(--size-wide) + var(--s-5) + var(--s-5))}
.n-footer>.lay{padding-top:0px;padding-left:var(--s-5);padding-right:var(--s-5);max-width:calc(var(--size-wide) + var(--s-5) + var(--s-5))}
.n-footer-links>.lay{grid-template-columns:repeat(2, minmax(0, 1fr))}
.n-menu{--ov-w:min(50.00vw, calc(100vw - 16px))}
.n-cart{--ov-w:min(75.00vw, calc(100vw - 16px))}
.n-added{--ov-w:min(50.00vw, calc(100vw - 16px))}}
@media (max-width: 767px){.n-header>.lay{padding-left:var(--s-4);padding-right:var(--s-4);max-width:calc(var(--size-wide) + var(--s-4) + var(--s-4))}
.n-header-grid>.lay{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)}
.n-header-logo{--size:16px;font-size:18px;--logo-h:22px}
.n-footer>.lay{padding-top:var(--s-0);padding-left:var(--s-0);padding-right:var(--s-0);max-width:calc(var(--size-wide) + var(--s-0) + var(--s-0))}
.n-footer-links{padding-top:var(--s-7);padding-bottom:var(--s-7);padding-left:var(--s-4);padding-right:var(--s-4)}
.n-footer-links>.lay{column-gap:var(--s-4)}
.n-footer-bar{padding-top:var(--s-5);padding-left:var(--s-4);padding-right:var(--s-4);display:flex;flex-direction:column}
.n-footer-bar>.lay{flex-direction:column;flex:1 1 auto;gap:var(--s-4);align-items:flex-start}
.n-menu{--ov-w:100vw}
.n-search{padding-top:var(--s-4);padding-bottom:var(--s-5);padding-left:var(--s-4);padding-right:var(--s-4)}
.n-search-columns>.lay{grid-template-columns:minmax(0, 1fr);column-gap:var(--s-6);row-gap:var(--s-6)}
.n-search-new-list>.lay{grid-template-columns:repeat(2, minmax(0, 1fr))}
.n-cart{background:var(--c-surface);padding-top:var(--s-4);padding-bottom:var(--s-4);padding-left:var(--s-4);padding-right:var(--s-4);border-radius:var(--r-none) 0 0 var(--r-none);--ov-w:100vw;--ov-r:min(var(--r-none), 20px);--ov-bg:var(--c-surface)}
.n-cart-top{padding-bottom:var(--s-3);border-bottom:1px solid var(--c-border)}
.n-cart-top>.lay{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
.n-cart-title-row>.lay{justify-content:flex-start}
.n-cart-title{font-family:var(--t-title-m-ff);font-size:var(--t-title-m-fs);font-weight:var(--t-title-m-fw);line-height:var(--t-title-m-lh);letter-spacing:var(--t-title-m-ls);text-transform:var(--t-title-m-tt)}
.n-cart-title-row{order:1}
.n-cart-top-end{order:2}
.n-cart-line>.lay{grid-template-columns:minmax(0, 2fr) minmax(0, 4fr) minmax(0, 2fr);column-gap:var(--s-3);row-gap:var(--s-3)}
.n-cart-more-list>.lay{column-gap:var(--s-2);row-gap:var(--s-2)}
.n-cart-foot>.lay{grid-template-columns:repeat(1, minmax(0, 1fr));column-gap:var(--s-3);row-gap:var(--s-3)}
.n-added{--ov-w:100vw}
.n-cookies{padding-top:var(--s-3);padding-bottom:var(--s-3);padding-left:var(--s-4);padding-right:var(--s-4)}
.n-cookies-row>.lay{flex-direction:column;gap:var(--s-3);align-items:stretch}}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-menu-button,.cs[data-hero-first] .n-header-menu-button[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-search-phone,.cs[data-hero-first] .n-header-search-phone[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-menu,.cs[data-hero-first] .n-header-menu[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-logo,.cs[data-hero-first] .n-header-logo[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.n-header-logo[data-stuck],[data-stuck] .n-header-logo{--size:16px;font-size:18px;--logo-h:22px}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-search,.cs[data-hero-first] .n-header-search[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-account,.cs[data-hero-first] .n-header-account[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-favourites,.cs[data-hero-first] .n-header-favourites[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-cart,.cs[data-hero-first] .n-header-cart[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
.cs[data-hero-first] [data-overlay]:not([data-solid]):not(:hover):not(:focus-within) .n-header-cart-phone,.cs[data-hero-first] .n-header-cart-phone[data-overlay]:not([data-solid]):not(:hover):not(:focus-within){--fg:var(--c-on-media)}
@media (min-width: 1024px){.n-header-menu-button{display:none!important}}
@media (min-width: 1024px){.n-header-search-phone{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-header-search-phone{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-header-menu{display:none!important}}
@media (max-width: 767px){.n-header-menu{display:none!important}}
@media (max-width: 767px){.n-header-search{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-header-account{display:none!important}}
@media (max-width: 767px){.n-header-account{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-header-favourites{display:none!important}}
@media (max-width: 767px){.n-header-favourites{display:none!important}}
@media (max-width: 767px){.n-header-cart{display:none!important}}
@media (min-width: 1024px){.n-header-cart-phone{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-header-cart-phone{display:none!important}}
@media (max-width: 767px){.n-cart-close{display:none!important}}
@media (max-width: 767px){.n-cart-saved{display:none!important}}
@media (min-width: 1024px){.n-cart-close-end{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-cart-close-end{display:none!important}}
@media (max-width: 767px){.n-cookies-row{display:none!important}}
@media (min-width: 1024px){.n-cookies-phone{display:none!important}}
@media (min-width: 768px) and (max-width: 1023px){.n-cookies-phone{display:none!important}}