/* Liquid Glass: restrained optical edges, readable surfaces, original photos. */
:root{--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;--glass:rgba(255,255,255,.78);--glass-edge:rgba(255,255,255,.95);--glass-shadow:0 8px 32px #18202a0c;--panel:#fff;--canvas:#f4f5f7;--ink:#1b1d21;--muted:#63666d;--line:#dedfe4;--soft:#edeef2;--radius:20px}
:root[data-theme=dark]{--glass:rgba(40,42,47,.82);--glass-edge:rgba(255,255,255,.16);--glass-shadow:0 10px 36px #0005;--panel:#24262b;--canvas:#151619;--ink:#f3f3f5;--muted:#b0b2ba;--line:#3a3d44;--soft:#2b2e35}
html,body,[data-theme=dark] body{background:var(--canvas);color:var(--ink)}
.site-header{border-bottom:1px solid var(--line);height:96px}.brand>span{font-weight:650;letter-spacing:-.8px}.header-right{gap:10px}.catalog-intro h1{font-size:clamp(32px,4vw,46px);font-weight:600;letter-spacing:-1.5px}.catalog-intro{padding:28px 0 24px}.eyebrow{letter-spacing:1.8px}
.bottom-nav,.mode-switch,.theme-toggle,dialog{background:var(--glass)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 #00000008,var(--glass-shadow)}
.bottom-nav{border-radius:30px;padding:7px;bottom:calc(14px + env(safe-area-inset-bottom));isolation:isolate;overflow:hidden}
.bottom-nav::before,.mode-switch::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,#ffffff20,transparent 40%,#ffffff09 75%,#ffffff20);z-index:0}
.bottom-nav .nav-item{position:relative;z-index:1;border-radius:23px;min-height:58px;font-size:10px;gap:5px;color:var(--muted)}
.bottom-nav .nav-item.active,[data-theme=dark] .bottom-nav .nav-item.active{color:var(--ink);background:rgba(128,132,146,.15);box-shadow:inset 0 1px 0 #ffffff38,inset 0 0 0 1px #8e919b18}
.mode-switch{position:relative;border-radius:24px;padding:5px}.mode-switch a{position:relative;z-index:1;border-radius:18px;min-height:44px}.mode-switch a[aria-current=page],[data-theme=dark] .mode-switch a[aria-current=page]{background:var(--ink);color:var(--canvas)}
.theme-toggle{border-radius:50%;color:var(--ink)!important}.theme-toggle svg{pointer-events:none}
.product-grid{gap:28px 18px}.product-photo{border-radius:22px;background:var(--soft);box-shadow:0 3px 12px #00000005}.product-photo img{filter:none;opacity:1}.product-name{font-weight:550;letter-spacing:-.2px;margin-top:13px}.product-meta strong{font-weight:650}.card-sizes span,[data-theme=dark] .card-sizes span{background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:7px}
.favorite-button,.product-badge,[data-theme=dark] .favorite-button,[data-theme=dark] .product-badge{background:var(--glass);color:var(--ink);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 #ffffff45,0 2px 8px #00000008}.favorite-button{width:44px;height:44px;top:10px;right:10px}.product-badge{border-radius:10px;bottom:10px;left:10px}.favorite-button.selected,[data-theme=dark] .favorite-button.selected{background:var(--ink);color:var(--canvas)}
.search-input,[data-theme=dark] .search-input{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 2px #00000003}.search-input:focus-within,[data-theme=dark] .search-input:focus-within{background:var(--panel);border-color:var(--muted)}
.button,[data-theme=dark] .button{background:var(--ink);color:var(--canvas);border-radius:16px;min-height:50px;box-shadow:0 3px 8px #0000000a}.secondary-button,.size-chip,[data-theme=dark] .secondary-button,[data-theme=dark] .size-chip{border-radius:13px;background:var(--panel);color:var(--ink);border-color:var(--line)}.size-chip.selected,[data-theme=dark] .size-chip.selected{background:var(--ink);color:var(--canvas)}
.order-summary,.order-card,[data-theme=dark] .order-summary,[data-theme=dark] .order-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 3px 16px #00000003}.detail-photo{border-radius:24px}.stack-form input,.stack-form textarea,.stack-form select,.shop-filters>input{border-radius:13px;background:var(--panel);border-color:var(--line);color:var(--ink)}dialog{border-radius:26px;color:var(--ink)}dialog::backdrop{background:#090b124d}.admin-tabs button{border-radius:12px}.admin-product{padding:18px 0}.toast{border-radius:18px}.top-categories a.selected{border-bottom-width:2px}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){.bottom-nav,.mode-switch,dialog{backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%)}.favorite-button,.product-badge,.theme-toggle{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
/* Lighter floating navigation; keep opaque accessibility fallbacks below. */
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
html .bottom-nav{background:rgba(255,255,255,.52)!important;backdrop-filter:blur(24px) saturate(110%);-webkit-backdrop-filter:blur(24px) saturate(110%);box-shadow:inset 0 1px 0 #ffffff80,0 6px 24px #00000014}
html[data-theme=dark] .bottom-nav{background:rgba(24,25,28,.48)!important;border-color:rgba(255,255,255,.18)!important;box-shadow:inset 0 1px 0 #ffffff20,0 6px 24px #00000026}
.bottom-nav::before{background:linear-gradient(115deg,#ffffff12,transparent 45%,#ffffff08)}
html .bottom-nav .nav-item{color:#34363b}
html[data-theme=dark] .bottom-nav .nav-item{color:#eeeef0}
html .bottom-nav .nav-item.active{color:#17181b;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px #ffffffa6,0 2px 8px #0000000a}
html[data-theme=dark] .bottom-nav .nav-item.active{color:#fff;background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px #ffffff38,0 2px 8px #00000012}
}
@media(max-width:1000px){.site-header{height:auto;padding-top:18px}}
@media(max-width:700px){.product-grid{gap:24px 12px}.product-photo{border-radius:18px}.catalog-intro h1{font-size:34px}.product-name{font-size:13px}.bottom-nav{max-width:calc(100% - 24px);width:430px}.nav-item{font-size:10px}.catalog-intro{padding-top:24px}.site-header{padding-left:18px;padding-right:18px}.header-right{gap:6px}.brand>span{font-size:18px}#app{padding-bottom:132px}.product-information h1{font-size:30px}}
@media(prefers-reduced-motion:no-preference){.button,.secondary-button,.size-chip,.theme-toggle,.nav-item{transition:transform 180ms cubic-bezier(.2,.8,.3,1),background-color 180ms ease,color 180ms ease,box-shadow 180ms ease}.button:active,.secondary-button:active,.size-chip:active,.theme-toggle:active{transform:scale(.96)}#app>*{animation-duration:200ms}.product-photo:hover img{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){html .bottom-nav,html[data-theme=dark] .bottom-nav,.mode-switch,dialog,.theme-toggle,.favorite-button,.product-badge{background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* Shared form and management surfaces in both themes. */
:root{--green:#555961;--accent:#343842}
:root[data-theme=dark]{--green:#c2c5cd;--accent:#eceef4}
.quantity{border-radius:14px;background:var(--soft);overflow:hidden}.quantity button{min-height:44px;width:44px}.quantity{width:124px}
.admin-tabs{gap:8px;padding:5px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.admin-tabs button{flex:1;padding:11px 12px;border:0;border-radius:12px;min-height:44px}.admin-tabs button.active{background:var(--soft);color:var(--ink);box-shadow:inset 0 1px 0 var(--glass-edge)}
.upload-photo{border-radius:16px;overflow:hidden}.upload-button,[data-theme=dark] .upload-button{border-radius:16px;border-color:var(--line);background:var(--panel)}.editor-tip,[data-theme=dark] .editor-tip{border-radius:16px;background:var(--soft);color:var(--muted)}
.order-summary .explanation,.order-comment{border-color:var(--line)}.order-card .order-actions{gap:12px}.price-adjustment{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.price-adjustment p{margin:10px 0}
.shop-filters{align-items:center}.shop-filters label{min-height:44px}.shop-filters input[type=checkbox]{accent-color:var(--ink)}.admin-product-actions .text-button{min-height:44px;padding:8px 12px;border-radius:12px}.admin-product-actions .text-button:hover{background:var(--soft)}
[data-theme=dark] :is(.status-tag.green,.status-tag){background:#34373e;color:#e6e8ee}
[data-theme=dark] .search-input input::placeholder,[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#9fa3ad;opacity:1}
[data-theme=dark] .button:hover{background:#fff;color:#151619}
.bottom-nav[hidden],.mode-switch[hidden],.top-categories[hidden]{display:none!important}
@supports not ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){html .bottom-nav,.mode-switch,dialog,.theme-toggle{background:var(--panel)!important}}
@media(max-width:420px){.shop-filters>input{flex-basis:calc(33% - 8px);width:0}.shop-filters label{flex-basis:100%}.admin-tabs button{font-size:12px;padding:10px 7px}.mode-switch a{padding:11px 18px}.header-right{gap:4px}.theme-toggle{width:44px!important}.admin-product-actions{gap:4px}}
/* Management cards: content can shrink; actions occupy their own full-width row. */
#admin-products{display:grid;gap:14px;margin-top:18px;min-width:0}
.admin-product{grid-template-columns:80px minmax(0,1fr);gap:14px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--panel);align-items:start;min-width:0}
.admin-product>div{min-width:0}.admin-product h2,.admin-product p{overflow-wrap:anywhere}.admin-product h2{font-size:15px;line-height:1.4}.admin-product-image{height:104px;border-radius:12px;overflow:hidden}.admin-product-image img{width:100%;height:104px;object-fit:cover}
.admin-size-summary{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}.admin-size-summary span{max-width:100%;overflow-wrap:anywhere}
.admin-product .admin-product-actions{grid-column:1/-1;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;width:100%;padding-top:12px;border-top:1px solid var(--line)}
.admin-product-actions .status-tag{grid-column:1/-1;justify-self:start;max-width:none;font-size:11px;padding:4px 9px;line-height:1.4;margin-bottom:2px}
.admin-product-actions .icon-button{width:44px;height:44px;border-radius:12px;background:var(--soft)}
.admin-product-actions .text-button{width:100%;min-width:0;min-height:44px;padding:8px 5px;font-size:12px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.admin-product-actions [data-delete-product]{color:var(--danger)}
.admin-toolbar{flex-wrap:wrap;gap:12px}.admin-toolbar .category-tabs{min-width:0;max-width:100%}.admin-toolbar>.button{max-width:100%}.admin-toolbar .pill{flex-shrink:0}#admin-search{width:100%;max-width:100%;box-sizing:border-box}
.order-actions{display:flex;flex-wrap:wrap;gap:10px}.order-actions>*{min-width:0;max-width:100%}.order-actions select{max-width:100%}
@media(max-width:420px){.admin-product{grid-template-columns:66px minmax(0,1fr);padding:13px;gap:12px}.admin-product-image,.admin-product-image img{height:88px}.admin-product h2{font-size:14px}.admin-product p{font-size:11px}.admin-product-actions .text-button{font-size:11px}.admin-tabs{min-width:0}.admin-tabs button{min-width:0}}
/* High-contrast editable fields in dark mode, including WebView autofill. */
html[data-theme=dark] :is(.stack-form,.product-editor,.shop-filters,.stock-row) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select),html[data-theme=dark] :is(#admin-search,.shop-filters>input){background:#fff!important;color:#171717!important;-webkit-text-fill-color:#171717!important;caret-color:#171717;border-color:#d6d6d6}
html[data-theme=dark] :is(.stack-form,.product-editor,.shop-filters) input::placeholder,html[data-theme=dark] :is(.stack-form,.product-editor) textarea::placeholder,html[data-theme=dark] #admin-search::placeholder{color:#666!important;-webkit-text-fill-color:#666!important;opacity:1}
html[data-theme=dark] :is(.stack-form,.product-editor) input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:#171717!important;caret-color:#171717}
.admin-product .admin-product-actions{grid-template-columns:44px minmax(0,1fr)}

/* Focus must stay inside each tab without scrolling the clipped navigation. */
html .bottom-nav{overflow:clip}
html .bottom-nav .nav-item{box-sizing:border-box;transform:none}
html .bottom-nav .nav-item:focus:not(:focus-visible){outline:none}
html .bottom-nav .nav-item:focus-visible{outline:2px solid currentColor;outline-offset:-4px}

/* Mobile finish: consistent spacing, bounded content and quiet motion. */
@media(max-width:700px){
 html{scroll-padding-bottom:120px;-webkit-text-size-adjust:100%}
 body{min-width:0}
 .site-header{padding:16px 16px 0;gap:12px}
 .brand{min-width:0}.brand>span{font-size:18px}.header-right{flex-shrink:0}
 .top-categories{min-width:0;max-width:100%;gap:22px;overscroll-behavior-x:contain}
 .top-categories a{min-height:44px;display:inline-flex;align-items:center;flex-shrink:0}
 #app{padding:16px 16px calc(116px + env(safe-area-inset-bottom));min-width:0}
 .catalog-intro{padding:12px 0 22px}.catalog-intro h1{font-size:32px;line-height:1.12}
 .page-heading h1,.admin-heading h1,.empty-state h1{font-size:30px;line-height:1.15;overflow-wrap:anywhere}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
 .product-photo{border-radius:18px}.product-photo img{display:block}
 .product-name{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
 .product-meta strong{font-size:14px}.product-meta span{line-height:1.45;overflow-wrap:anywhere}
 .card-sizes{gap:4px}.card-sizes span{line-height:22px}
 .favorite-button{width:44px;height:44px;top:4px;right:4px}
 .catalog-tools,.catalog-subline{gap:10px;min-width:0;flex-wrap:wrap}
 .sort-label{min-width:0}.sort-label select{max-width:100%;min-height:44px}
 .shop-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .shop-filters>input{width:100%;min-width:0;min-height:44px}.shop-filters label{grid-column:1/-1}
 .cart-line-info,.product-information,.editor-fields,.order-card-heading>div{min-width:0}
 .cart-line h2,.order-card h2,.order-card h3,.order-items>div,.order-comment{overflow-wrap:anywhere}
 .cart-line{gap:12px}.order-summary{padding:20px;border-radius:20px}
 .detail-photo{margin:0;border-radius:20px;overflow:hidden}
 .product-information h1{font-size:28px;line-height:1.2;overflow-wrap:anywhere}
 .thumbnails{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}.thumb{flex-shrink:0}
 .stack-form input,.stack-form select,.stack-form textarea,.search-input input,.shop-filters>input{font-size:16px;max-width:100%;min-width:0}
 .stack-form textarea{resize:vertical}.form-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.form-columns>*{min-width:0}
 input,textarea,select{scroll-margin-block:90px}
 .mode-switch{margin-top:16px}.mode-account{overflow-wrap:anywhere;min-width:0}
 .order-actions select{flex:1;min-height:44px}.order-actions .secondary-button{min-height:44px}
 dialog{width:calc(100% - 24px);max-width:480px;max-height:calc(100dvh - 32px);padding:20px;overscroll-behavior:contain;overflow-y:auto}
 html .bottom-nav{left:50%;right:auto;width:430px;max-width:calc(100% - 24px);padding:6px;bottom:calc(10px + env(safe-area-inset-bottom));border-radius:29px;grid-template-columns:repeat(4,minmax(0,1fr))}
 html .bottom-nav .nav-item{height:58px;min-height:58px;padding:7px 2px;gap:5px;font-size:10px;line-height:1.2;border-radius:23px;white-space:nowrap}
 .bottom-nav .icon{width:21px;height:21px;flex-shrink:0}
 .toast{bottom:calc(94px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);overflow-wrap:anywhere}
}
@media(max-width:360px){.brand>span{font-size:16px}.brand small{font-size:6px}.header-right{gap:2px}.site-header{gap:8px}.product-grid{gap:20px 10px}.form-columns{grid-template-columns:minmax(0,1fr)}}
@media(hover:none){.product-photo:hover img{transform:none}.favorite-button,.nav-item,.theme-toggle,.button,.secondary-button,.size-chip{-webkit-tap-highlight-color:transparent}}
@keyframes mobile-content-enter{from{opacity:0}to{opacity:1}}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 #app>*{animation:mobile-content-enter 160ms ease-out both}
 .product-photo img{transition:none}
 .bottom-nav .nav-item{transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
}

/* Light navigation: translucent glass with restrained reflective edges. */
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
 html:not([data-theme=dark]) .bottom-nav{
  background:rgba(255,255,255,.30)!important;
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px 0 #ffffffed,inset 0 -1px 0 #ffffff59,0 5px 22px #18202a14,0 0 0 1px #18202a0a;
 }
 html:not([data-theme=dark]) .bottom-nav::before{
  background:linear-gradient(120deg,#ffffff70 0%,#ffffff12 28%,transparent 52%,#ffffff38 100%);
 }
 html:not([data-theme=dark]) .bottom-nav .nav-item{color:#26282d;text-shadow:0 1px 3px #ffffffb3}
 html:not([data-theme=dark]) .bottom-nav .nav-item.active{
  color:#101115;background:rgba(255,255,255,.46);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffff80,0 2px 7px #18202a0c;
 }
}
@media(prefers-reduced-transparency:reduce){
 html:not([data-theme=dark]) .bottom-nav{background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
 html:not([data-theme=dark]) .bottom-nav::before{background:none}
}

/* Keep the dock anchored to the viewport, independent of page scrollbars. */
html #navigation.bottom-nav{position:fixed;left:50vw;right:auto;width:min(430px,calc(100vw - 24px));max-width:none;min-height:72px;box-sizing:border-box;margin:0;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
html{scrollbar-gutter:stable}

/* Borderless glass dock; selection uses a soft fill, not a white outline. */
html #navigation.bottom-nav{border:0!important;box-shadow:0 5px 22px #18202a12;padding:7px}
html #navigation.bottom-nav::before{background:none}
html #navigation.bottom-nav .nav-item.active{box-shadow:none}

/* One persistent sliding highlight: route rendering only changes its destination. */
html #navigation.bottom-nav{--tab-position:0}
html #navigation.bottom-nav:has(a[href="#favorites"].active){--tab-position:1}
html #navigation.bottom-nav:has(a[href="#cart"].active){--tab-position:2}
html #navigation.bottom-nav:has(a[href="#orders"].active){--tab-position:3}
html #navigation.bottom-nav::after{content:'';position:absolute;pointer-events:none;z-index:0;left:7px;top:7px;bottom:7px;width:calc((100% - 14px)/4);border-radius:23px;background:rgba(255,255,255,.46);transform:translateX(calc(var(--tab-position)*100%));opacity:0}
html[data-theme=dark] #navigation.bottom-nav::after{background:rgba(255,255,255,.17)}
html #navigation.bottom-nav:has(.nav-item.active)::after{opacity:1}
html #navigation.bottom-nav .nav-item.active{background:transparent;box-shadow:none}
html #navigation .icon{overflow:visible;transform-origin:center}
@keyframes dock-heart{0%,100%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.94)}75%{transform:scale(1.1)}}
@keyframes dock-bag{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
@keyframes dock-grid{0%,100%{transform:scale(1)}45%{transform:scale(.7)}}
@keyframes dock-lid-left{0%,100%{transform:rotate(0)}40%,65%{transform:rotate(-32deg)}}
@keyframes dock-lid-right{0%,100%{transform:rotate(0)}40%,65%{transform:rotate(32deg)}}
@media(prefers-reduced-motion:no-preference){
 html #navigation.bottom-nav::after{transition:transform 340ms cubic-bezier(.22,.8,.25,1),opacity 160ms ease}
 #navigation a[href="#favorites"].active .icon{animation:dock-heart 480ms ease-out}
 #navigation a[href="#cart"].active .icon{animation:dock-bag 520ms ease-out;transform-origin:50% 20%}
 #navigation a[href="#catalog"].active rect{transform-box:fill-box;transform-origin:center;animation:dock-grid 360ms ease-out backwards}
 #navigation a[href="#catalog"].active rect:nth-child(2){animation-delay:45ms}
 #navigation a[href="#catalog"].active rect:nth-child(3){animation-delay:90ms}
 #navigation a[href="#catalog"].active rect:nth-child(4){animation-delay:135ms}
 #navigation a[href="#orders"].active .box-lid-left{transform-origin:3px 7px;animation:dock-lid-left 650ms ease-in-out}
 #navigation a[href="#orders"].active .box-lid-right{transform-origin:21px 7px;animation:dock-lid-right 650ms ease-in-out}
}

/* Tinted optical depth remains visible over plain pages as well as photos. */
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
 html:not([data-theme=dark]) #navigation.bottom-nav{background:linear-gradient(135deg,rgba(236,239,243,.58),rgba(216,221,228,.32) 48%,rgba(241,243,246,.48))!important;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 8px 26px #18202a1a,inset 0 5px 12px #ffffff38,inset 0 -4px 10px #4853650a}
 html[data-theme=dark] #navigation.bottom-nav{background:linear-gradient(135deg,rgba(88,92,101,.46),rgba(44,47,54,.36) 50%,rgba(78,82,92,.42))!important;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:0 8px 28px #00000038,inset 0 5px 12px #ffffff0c,inset 0 -4px 12px #00000016}
 html #navigation.bottom-nav::before{background:radial-gradient(ellipse at 12% 0%,#ffffff24,transparent 60%);opacity:.6}
 html:not([data-theme=dark]) #navigation.bottom-nav::after{background:linear-gradient(145deg,#ffffffb3,#ffffff4d);box-shadow:0 3px 12px #25304712,inset 0 3px 7px #ffffff38}
 html[data-theme=dark] #navigation.bottom-nav::after{background:linear-gradient(145deg,#ffffff2e,#ffffff12);box-shadow:0 3px 12px #0000001f,inset 0 3px 7px #ffffff0a}
}
@media(prefers-reduced-transparency:reduce){html #navigation.bottom-nav{background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}html #navigation.bottom-nav::before{background:none}}

/* A single canvas across short/long routes and the WebView overscroll area. */
html:root,html:root[data-theme=dark]{background:var(--canvas);min-height:100%;color:var(--ink)}
html body,html[data-theme=dark] body{background:transparent;min-height:100vh;min-height:100dvh}
#app,.site-header,.empty-state,.page-heading,.catalog-intro,.catalog-footer{background:transparent}
@media(prefers-reduced-motion:no-preference){html:root{transition:background-color 180ms ease,color 180ms ease}}

/* Consistent control shape; circular icon buttons retain their circular silhouette. */
:root{--control-radius:16px}
html .search-input,html .shop-filters>input,
html .stack-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
html .stack-form textarea,html .stack-form select,
html .product-editor input:not([type=checkbox]):not([type=radio]):not([type=file]),
html .product-editor textarea,html .product-editor select,
html #admin-search,html .order-actions select,
html .button,html .secondary-button,html .size-chip,
html .admin-product-actions .text-button,html .admin-product-actions .icon-button,
html .upload-button,html .quantity{border-radius:var(--control-radius)}
html .search-input{overflow:hidden}
html .search-input input{border-radius:0;background:transparent}

/* Inventory refresh updates the cart without replaying its entrance. */
#app.cart-refreshed>*{animation:none!important}

html .shop-filters{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,3fr);align-items:start}.price-range{min-width:0;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.price-range-values{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:12px;margin-bottom:8px}.price-range label{display:flex;gap:10px;min-height:36px;font-size:11px;color:var(--muted)}.price-range input[type=range]{width:100%;min-width:0;accent-color:var(--ink);cursor:pointer;padding:0}.shop-filters>input{width:100%;min-width:0}@media(max-width:380px){html .shop-filters{grid-template-columns:1fr}}

html .shop-filters{grid-template-columns:minmax(0,1fr)}

.search-row[hidden],.shop-filters[hidden]{display:none!important}

html .favorite-button.selected,html[data-theme=dark] .favorite-button.selected{color:#e33f57;background:var(--glass)}
html .favorite-button.selected .icon{fill:#e33f57;stroke:#e33f57}
.flying-favorite{position:fixed;z-index:1000;width:24px;height:24px;pointer-events:none;color:#e33f57;filter:drop-shadow(0 3px 5px #e33f5733)}.flying-favorite .icon{width:24px;height:24px;fill:currentColor;stroke:currentColor}
@media(prefers-reduced-motion:no-preference){.favorite-button.selected .icon{animation:dock-heart 380ms ease-out}}

/* Shared glass material for the three circular actions. */
html :is(.favorite-button,.theme-toggle,#search-toggle){width:44px;height:44px;min-width:44px;border-radius:50%;border:0!important;display:grid;place-items:center;color:var(--ink);background:var(--panel)!important;box-shadow:0 4px 14px #18202a12}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
 html:not([data-theme=dark]) :is(.favorite-button,.theme-toggle,#search-toggle){background:linear-gradient(135deg,rgba(236,239,243,.58),rgba(216,221,228,.32) 48%,rgba(241,243,246,.48))!important;backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);box-shadow:0 4px 14px #18202a14,inset 0 3px 8px #ffffff38,inset 0 -3px 7px #4853650a}
 html[data-theme=dark] :is(.favorite-button,.theme-toggle,#search-toggle){background:linear-gradient(135deg,rgba(88,92,101,.46),rgba(44,47,54,.36) 50%,rgba(78,82,92,.42))!important;backdrop-filter:blur(12px) saturate(145%);-webkit-backdrop-filter:blur(12px) saturate(145%);box-shadow:0 4px 14px #00000030,inset 0 3px 8px #ffffff0c;color:#f3f3f5}
}
html .favorite-button.selected .icon{fill:#e33f57;stroke:#e33f57}
@media(prefers-reduced-transparency:reduce){html :is(.favorite-button,.theme-toggle,#search-toggle){background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

.sort-label[hidden]{display:none!important}

/* Category navigation shares the floating dock material. */
html .top-categories{position:relative;isolation:isolate;gap:4px;padding:6px;border:0;border-radius:24px;align-items:center;scroll-padding-inline:6px;background:var(--panel);box-shadow:0 4px 14px #18202a12}
html .top-categories a,html .top-categories a.selected,html[data-theme=dark] .top-categories a.selected{position:relative;z-index:1;border:0;background:transparent;min-height:40px;padding:10px 14px;border-radius:19px;color:var(--muted);white-space:nowrap;flex-shrink:0;line-height:20px}
html .top-categories a.selected{color:var(--ink)}
html .top-categories a:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
html .top-categories::before{content:'';position:absolute;left:0;top:6px;height:40px;width:var(--category-width,0px);transform:translateX(var(--category-x,6px));background:linear-gradient(145deg,#ffffffb3,#ffffff4d);border-radius:19px;pointer-events:none;box-shadow:0 3px 12px #25304712}
html[data-theme=dark] .top-categories::before{background:linear-gradient(145deg,#ffffff2e,#ffffff12)}
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
 html .top-categories{background:linear-gradient(135deg,#eceff394,#d8dde452 48%,#f1f3f67a);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
 html[data-theme=dark] .top-categories{background:linear-gradient(135deg,#585c6575,#2c2f365c 50%,#4e525c6b)}
}
@media(prefers-reduced-motion:no-preference){html .top-categories::before{transition:transform 320ms cubic-bezier(.22,.8,.25,1),width 320ms cubic-bezier(.22,.8,.25,1)}}
@media(prefers-reduced-transparency:reduce){html .top-categories{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:700px){html .top-categories{margin-top:12px;margin-bottom:12px}html .top-categories a{font-size:12px;padding:10px 12px}}


/* Shared management glass and sliding segmented selections. */
:root{--action-glass:linear-gradient(135deg,#eceff394,#d8dde452 48%,#f1f3f67a);--selection-glass:linear-gradient(145deg,#ffffffb3,#ffffff4d)}
:root[data-theme=dark]{--action-glass:linear-gradient(135deg,#585c6575,#2c2f365c 50%,#4e525c6b);--selection-glass:linear-gradient(145deg,#ffffff2e,#ffffff12)}
html :is(.empty-state .button,.mode-switch,.admin-tabs,#admin-search,#new-product,.admin-product-actions .icon-button){background:var(--action-glass)!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;border:0!important;box-shadow:0 4px 16px #18202a12;backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%)}
html #admin-search::placeholder{color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important}
html .admin-product .admin-product-actions{grid-template-columns:44px 44px;justify-content:start}
html .admin-product-actions [data-delete-product]{color:var(--danger)!important}
html .mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:354px;padding:6px;gap:4px;isolation:isolate}
html .mode-switch a{margin:0;text-align:center;padding:12px 8px;min-height:44px;background:transparent!important;color:var(--ink)!important}
html .mode-account{grid-column:1/-1;position:relative;z-index:1}
html .mode-switch::before{display:none}
html .mode-switch::after{content:'';position:absolute;left:6px;top:6px;width:calc((100% - 16px)/2);height:44px;background:var(--selection-glass);border-radius:18px;pointer-events:none;z-index:0;transform:translateX(0)}
html .mode-switch:has(a[href="#admin"][aria-current=page])::after{transform:translateX(calc(100% + 4px))}
html .admin-tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:6px;border-radius:22px;--admin-count:2;--admin-index:0}
html .admin-tabs:has([data-admin-tab=settings]){grid-template-columns:repeat(3,minmax(0,1fr));--admin-count:3}
html .admin-tabs:has([data-admin-tab=orders].active){--admin-index:1}
html .admin-tabs:has([data-admin-tab=settings].active){--admin-index:2}
html .admin-tabs::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 12px - (var(--admin-count) - 1)*4px)/var(--admin-count));transform:translateX(calc(var(--admin-index)*(100% + 4px)));background:var(--selection-glass);border-radius:16px;pointer-events:none;z-index:0}
html .admin-tabs button{position:relative;z-index:1;min-width:0;background:transparent!important;color:var(--ink);box-shadow:none!important}
@media(prefers-reduced-motion:no-preference){html .mode-switch::after,html .admin-tabs::before{transition:transform 320ms cubic-bezier(.22,.8,.25,1)}}
@media(prefers-reduced-transparency:reduce){html :is(.empty-state .button,.mode-switch,.admin-tabs,#admin-search,#new-product,.admin-product-actions .icon-button){background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Consistent, visible glass depth on plain light and dark canvases. */
:root{--action-glass:linear-gradient(135deg,rgba(217,223,232,.80),rgba(193,202,215,.50) 48%,rgba(231,235,241,.72));--selection-glass:linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,251,255,.65))}
:root[data-theme=dark]{--action-glass:linear-gradient(135deg,rgba(104,111,125,.58),rgba(57,63,76,.50) 48%,rgba(85,93,110,.56));--selection-glass:linear-gradient(145deg,#ffffff40,#ffffff20)}
html:root :is(#navigation.bottom-nav,.top-categories,.mode-switch,.admin-tabs,.favorite-button,.theme-toggle,#search-toggle,.empty-state .button,#admin-search,#new-product,.admin-product-actions .icon-button){background:var(--action-glass)!important;box-shadow:0 7px 22px rgba(34,48,69,.14),inset 0 3px 9px rgba(255,255,255,.28),inset 0 -3px 9px rgba(53,66,88,.06);border:0!important}
html:root[data-theme=dark] :is(#navigation.bottom-nav,.top-categories,.mode-switch,.admin-tabs,.favorite-button,.theme-toggle,#search-toggle,.empty-state .button,#admin-search,#new-product,.admin-product-actions .icon-button){box-shadow:0 7px 24px #00000038,inset 0 3px 9px #ffffff12,inset 0 -3px 9px #00000012}
html:root #navigation.bottom-nav::after,html:root .top-categories::before,html:root .mode-switch::after,html:root .admin-tabs::before{background:var(--selection-glass);box-shadow:0 3px 12px #23334d18}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){html:root :is(#navigation.bottom-nav,.top-categories,.mode-switch,.admin-tabs,.favorite-button,.theme-toggle,#search-toggle,.empty-state .button,#admin-search,#new-product,.admin-product-actions .icon-button){backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}}
@media(prefers-reduced-transparency:reduce){html:root :is(#navigation.bottom-nav,.top-categories,.mode-switch,.admin-tabs,.favorite-button,.theme-toggle,#search-toggle,.empty-state .button,#admin-search,#new-product,.admin-product-actions .icon-button){background:var(--panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

.theme-reveal::view-transition-old(root),.theme-reveal::view-transition-new(root){animation:none;mix-blend-mode:normal}.theme-reveal::view-transition-new(root){z-index:1}.theme-reveal,.theme-reveal body{transition:none!important}
@media(prefers-reduced-motion:no-preference){#theme-toggle:active svg{transform:rotate(25deg) scale(.85)}#theme-toggle svg{transition:transform 180ms ease}.search-input:focus-within{box-shadow:0 0 0 3px #8b96aa26,0 7px 22px #18202a12}}

html .sort-label select,html[data-theme=dark] .sort-label select{background:var(--action-glass);color:var(--ink);border:0;border-radius:16px;padding:11px 14px;min-height:44px;box-shadow:0 5px 16px #22304518;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);cursor:pointer}
html .sort-label select option{background:var(--panel);color:var(--ink)}
@media(prefers-reduced-transparency:reduce){html .sort-label select{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Search and size filter use the same glass surface in either theme. */
html:root .search-input,html:root .size-filter-button{background:var(--action-glass)!important;color:var(--ink)!important;border:0!important;border-radius:16px;min-height:50px;box-shadow:0 7px 22px #22304518;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
html .size-filter-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 16px;text-align:left;font-size:14px}
html .search-input input{background:transparent!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
html .search-input input::placeholder{color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important;opacity:1}
.size-filter-options{display:flex;flex-wrap:wrap;gap:10px;padding-top:12px}.size-filter-options .size-chip{min-height:44px}
@media(prefers-reduced-transparency:reduce){html:root .search-input,html:root .size-filter-button{background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}

html .sort-label select{appearance:none;-webkit-appearance:none;background-image:var(--action-glass);padding-inline:16px;text-align:center}
html .size-filter-options .size-chip{background:var(--action-glass);color:var(--ink);border:0;box-shadow:0 3px 12px #22304512;backdrop-filter:blur(12px)}html .size-filter-options .size-chip.selected{background:var(--selection-glass);box-shadow:0 0 0 2px var(--muted),0 4px 14px #22304518}
@media(prefers-reduced-motion:no-preference){.size-filter-options .size-chip{transition:background 180ms ease,box-shadow 180ms ease,transform 180ms ease}.size-filter-options .size-chip:active{transform:scale(.94)}}
.category-settings{margin-top:32px;padding:20px;border-radius:22px;background:var(--action-glass)}.category-settings-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}.category-settings .button{margin-top:16px}.category-settings input{color:var(--ink);background:var(--panel);border-radius:16px}

/* Toast text and surface must remain a contrasting pair in either theme. */
html .toast{background:#252932;color:#ffffff;-webkit-text-fill-color:#ffffff;font-weight:500;line-height:1.5;box-shadow:0 6px 24px #00000026}
html[data-theme=dark] .toast{background:#eceef3;color:#171a20;-webkit-text-fill-color:#171a20;box-shadow:0 6px 24px #00000040}

/* Customer order status: visible colour plus an explicit text label. */
.customer-order-status{--status-dot:#858b96;display:inline-flex;align-items:center;gap:9px;padding:7px 12px;margin:12px 0 16px;border-radius:999px;background:var(--action-glass);color:var(--ink);font-size:12px;font-weight:500;line-height:1.4;box-shadow:0 2px 8px #18202a08}
.customer-order-status[data-order-state=confirmed],.customer-order-status[data-order-state=completed]{--status-dot:#239b69}
.customer-order-status[data-order-state=cancelled]{--status-dot:#d84a59}
.order-status-dot{display:block;flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--status-dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-dot) 13%,transparent)}
[data-theme=dark] .customer-order-status[data-order-state=confirmed],[data-theme=dark] .customer-order-status[data-order-state=completed]{--status-dot:#51cd94}
[data-theme=dark] .customer-order-status[data-order-state=cancelled]{--status-dot:#ff7886}