/* Fonts load via in document head (avoids render-blocking @import). */
/* =========================================================
TOKENS — switched to light palette
========================================================= */
:root{
color-scheme: light;
--primary:#66f;
--primary-600:#4f46e5;
--text:#0f172a;
--muted:#64748b;
--bg:#f8fafc;
--card:#ffffff;
--card-2:#fafafa;
--chip:#f3f4f6;
--ring:rgba(99,102,241,.35);
--browse-gutter:clamp(1rem, 4vw, 4rem);
--radius:.5rem;
--radius-sm:.5rem;
--radius-xs:.5rem;
--speed:.25s;
--btf-page-bg:
radial-gradient(65vw 35vh at 70% -10%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(50vw 30vh at -10% 8%, rgba(168,85,247,.12), transparent 60%),
radial-gradient(42vw 36vh at 8% 18%, rgba(14,165,233,.10), transparent 62%),
radial-gradient(48vw 42vh at 94% 72%, rgba(236,72,153,.10), transparent 62%),
radial-gradient(100vw 50vh at 50% 115%, rgba(99,102,241,.13), transparent 72%),
linear-gradient(180deg,#ffffff 0%,#eef2ff 100%);
}
html{
background-color:var(--bg);
background:var(--btf-page-bg);
background-repeat:no-repeat;
}
*{box-sizing:border-box}
/* =========================================================
PAGE BACKGROUND (light with soft gradients)
========================================================= */
/* keep this */
body{
margin:0;
color:var(--text);
background-color:var(--bg);
background:var(--btf-page-bg);
background-repeat:no-repeat;
font-family:"Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
overflow-x:clip;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
position:relative;
}
@supports not (overflow-x:clip){
body{ overflow-x:hidden; }
}
@media (min-width:1025px){
body{
overflow:hidden;
overscroll-behavior-y:none;
animation:fadeUp .45s ease both;
height:100dvh;
min-height:100dvh; /* <-- dvh avoids iOS bottom gap */
display:flex;
flex-direction:column;
}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
input,select,textarea,button{font:inherit;color:inherit}
select option,select optgroup{font:inherit}
::placeholder{color:var(--muted);opacity:.9}
:-ms-input-placeholder{color:var(--muted)}
::-ms-input-placeholder{color:var(--muted)}
/* Use the real page background so iOS Safari “liquid glass” UI can sample it. */
body::before{ content:none; }
@media (max-width:720px){
:root{
--btf-page-bg:
radial-gradient(90vw 38vh at 80% -15%, rgba(99,102,241,.18), transparent 60%),
radial-gradient(70vw 32vh at -20% 0%, rgba(168,85,247,.12), transparent 60%),
radial-gradient(70vw 40vh at 10% 22%, rgba(14,165,233,.10), transparent 62%),
radial-gradient(80vw 46vh at 92% 76%, rgba(236,72,153,.10), transparent 62%),
radial-gradient(120vw 58vh at 50% 120%, rgba(99,102,241,.15), transparent 74%),
linear-gradient(180deg,#ffffff 0%,#eef2ff 100%);
}
}
/* remove the old ::after entirely */
body::after{ content:none; }
/* =========================================================
EXO AUTH / ONBOARDING (ported from stock.php)
========================================================= */
#authBackdrop{
position:fixed; inset:0; display:none;
align-items:center; justify-content:center; z-index:10000; pointer-events:none;
background:
radial-gradient(60vw 40vh at 80% 10%, rgba(99,102,241,.16), transparent 60%),
radial-gradient(50vw 30vh at 0% 90%, rgba(14,165,233,.10), transparent 60%),
rgba(255,255,255,.70);
backdrop-filter: blur(8px) saturate(120%);
opacity:0; transition:opacity .3s ease;
}
#authBackdrop.show{opacity:1}
#authBackdrop.closing .exoBase{ pointer-events:none; }
.auth-stage{
width:min(1040px,calc(100% - 32px));
height:calc(100dvh - 32px);
display:grid;
grid-template-rows:minmax(0, 1fr) auto minmax(64px, 1fr);
align-items:stretch;
justify-items:stretch;
pointer-events:none;
}
.exoBase{
grid-row:2;
pointer-events:auto; width:100%;
position:relative;
display:grid;
grid-template-columns:minmax(0, 1.02fr) minmax(420px, .88fr);
min-height:min(680px, calc(100dvh - 128px));
max-height:calc(100dvh - 120px);
overflow:hidden;
background:
radial-gradient(120% 140% at 110% -10%, rgba(99,102,241,.38), transparent 25%),
radial-gradient(120% 140% at -20% 130%, rgba(168,85,247,.30), transparent 32%),
radial-gradient(90% 90% at 50% 110%, rgba(99,102,241,.22), transparent 62%),
linear-gradient(180deg,#ffffff,#ffffff);
border:1px solid #e5e7eb; border-radius:20px;
box-shadow:0 25px 80px rgba(2,6,23,.10), 0 0 0 1px rgba(255,255,255,.65) inset;
color:#0f172a;
font-family:"Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
transform:scale(.95) translateY(20px); transition:transform .3s ease;
}
#authBackdrop.show .exoBase{ transform:scale(1) translateY(0) }
.auth-showcase{
--auth-showcase-copy-inset:18px;
--auth-showcase-dots-bottom:18px;
position:relative;
min-width:0;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
padding:28px;
overflow:hidden;
border-right:1px solid rgba(229,231,235,.92);
background:
radial-gradient(120% 160% at 14% 16%, rgba(99,102,241,.18), transparent 42%),
radial-gradient(120% 160% at 86% 82%, rgba(168,85,247,.16), transparent 44%),
linear-gradient(180deg, rgba(238,242,255,.9), rgba(255,255,255,.96));
}
.auth-showcase::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(247,249,255,.96) 0%, rgba(247,249,255,.78) 14%, rgba(247,249,255,0) 28%);
pointer-events:none;
z-index:1;
}
.auth-showcase-head{
position:relative;
z-index:3;
display:grid;
gap:8px;
max-width:28rem;
}
.auth-showcase-kicker{
display:inline-flex;
align-items:center;
gap:.55rem;
font-size:.78rem;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
color:#4338ca;
}
.auth-showcase-kicker::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary,#474BFF),var(--primary-600,#3f43f0));
box-shadow:0 6px 18px rgba(99,102,241,.28);
}
.auth-showcase-context{
margin:0;
color:#475569;
font-size:.96rem;
line-height:1.55;
max-width:24rem;
}
.auth-showcase-stage{
position:absolute;
inset:0;
margin:0;
overflow:hidden;
z-index:0;
}
.auth-showcase-stage::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(42% 38% at 22% 20%, rgba(99,102,241,.18), transparent 72%),
radial-gradient(44% 42% at 84% 78%, rgba(168,85,247,.16), transparent 74%),
radial-gradient(56% 46% at 48% 52%, rgba(255,255,255,.34), transparent 74%);
pointer-events:none;
z-index:0;
}
.auth-showcase-slide{
position:absolute;
inset:0;
opacity:0;
transform:translateY(14px) scale(.985);
transition:opacity .45s ease, transform .45s ease;
pointer-events:none;
}
.auth-showcase-slide.is-active{
opacity:1;
transform:none;
pointer-events:auto;
}
.auth-showcase-slide:not(.is-active) .auth-showcase-copy{
opacity:0;
transform:translateY(8px);
}
.auth-showcase-card{
position:relative;
display:flex;
align-items:flex-end;
width:100%;
height:100%;
overflow:hidden;
padding:132px var(--auth-showcase-copy-inset) calc(54px + var(--auth-showcase-dots-bottom));
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
isolation:isolate;
}
.auth-showcase-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(248,250,252,.16) 60%, rgba(248,250,252,.88) 84%, rgba(248,250,252,.98) 100%);
pointer-events:none;
z-index:1;
}
.auth-showcase-copy{
position:relative;
z-index:2;
display:grid;
gap:8px;
max-width:20rem;
padding:0 var(--auth-showcase-copy-inset) 0;
transition:none;
}
.auth-showcase-copy h3{
margin:0;
font-size:1.35rem;
font-weight:900;
letter-spacing:.01em;
color:#0f172a;
}
.auth-showcase-copy p{
margin:0;
color:#475569;
font-size:.96rem;
line-height:1.55;
}
.auth-showcase-model{
position:absolute;
inset:-14% -12% 0 -12%;
width:124%;
height:124%;
z-index:0;
pointer-events:none;
opacity:.34;
background:transparent !important;
--poster-color: transparent;
filter:drop-shadow(0 18px 44px rgba(2,6,23,.18));
transform:translate3d(0, 0, 0) scale(var(--s, .94));
--progress-bar-color: transparent;
--progress-bar-height: 0px;
}
.auth-showcase-model::part(progress-bar),
.auth-showcase-model::part(default-progress-bar){ display:none; }
.auth-showcase-model.phone{ --s:.96; }
.auth-showcase-model.laptop{ --s:.90; }
.auth-showcase-model.watch{ --s:1.02; }
.auth-showcase-model.controller{ --s:.96; }
.auth-showcase-dots{
position:relative;
z-index:3;
display:flex;
align-items:center;
gap:8px;
margin-top:auto;
padding:0 var(--auth-showcase-copy-inset) var(--auth-showcase-dots-bottom);
}
.auth-showcase-dot{
appearance:none;
width:10px;
height:10px;
border:0;
border-radius:999px;
background:rgba(99,102,241,.18);
cursor:pointer;
transition:width .2s ease, background .2s ease, transform .2s ease;
padding:0;
}
.auth-showcase-dot:hover{ transform:scale(1.08); }
.auth-showcase-dot.is-active{
width:26px;
background:linear-gradient(135deg,var(--primary,#474BFF),var(--primary-600,#3f43f0));
}
.auth-panel{
position:relative;
min-width:0;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,#ffffff,#ffffff);
}
.auth-panel-body{
flex:1 1 auto;
min-height:0;
}
.auth-pane{
height:100%;
min-height:0;
}
.exoMain{
height:100%;
min-height:0;
display:flex;
flex-direction:column;
overflow:auto;
padding:2.75rem 2rem 1.75rem;
}
.exoMain>svg{width:40px; height:40px; margin-bottom:12px}
.exoSub{flex:1 1 auto; min-height:0}
.auth-close{
position:absolute; top:18px; right:18px;
width:40px; height:40px;
border-radius:12px;
border:1px solid #e5e7eb;
background:rgba(255,255,255,.85);
color:#334155;
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer;
transition:background .2s ease, transform .2s ease, border-color .2s ease;
z-index:4;
}
.auth-close:hover{background:#f3f4f6; border-color:#cbd5e1; transform:translateY(-1px)}
.auth-close:active{transform:translateY(0)}
.auth-close:focus-visible{outline:3px solid rgba(99,102,241,.35); outline-offset:2px}
.exoSub .spec.f{display:block; animation:slideIn .4s ease}
.exoSub .spec.h{display:none}
@keyframes slideIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
#login .spec.f{
display:flex;
flex-direction:column;
min-height:100%;
}
.auth-login-form{
display:flex;
flex:1 1 auto;
min-height:0;
flex-direction:column;
}
.auth-login-actions{
margin-top:auto;
display:grid;
gap:6px;
padding-top:18px;
}
.auth-login-actions .switchline{
margin-top:0;
margin-bottom:0;
}
.auth-login-actions .c{
margin:0;
}
.exoSub h1{
font-size:1.5rem; margin:0 0 8px; font-weight:700;
background:linear-gradient(135deg, #0f172a, #334155);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.exoSub .context{color:#475569; margin:4px 0 16px; font-size:.95rem; line-height:1.4}
.exoSub input[type=email],
.exoSub input[type=password],
.exoSub input[type=text],
.exoSub input[type=tel]{
width:100%; background:#ffffff; color:#0f172a;
border:1px solid #e5e7eb; border-radius:12px;
padding:14px 16px; margin:8px 0; font-size:16px;
transition:all .25s ease; outline:none;
}
.exoSub input:focus{
border-color:var(--primary,#474BFF); box-shadow:0 0 0 4px rgba(99,102,241,.20);
background:#ffffff;
}
.exoSub input::placeholder{color:#64748b; opacity:.9}
.c{
background:linear-gradient(135deg, var(--primary,#474BFF), var(--primary-600,#3f43f0));
color:#fff; border:0; border-radius:12px; height:48px; padding:0 20px; cursor:pointer;
font-weight:700; font-size:16px; width:100%; margin:12px 0 8px;
transition:all .2s ease; box-shadow:0 4px 16px rgba(99,102,241,.25);
}
.c:hover:not([disabled]){transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,.35)}
.c[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.b{
background:#ffffff; color:#334155; border:1px solid #e5e7eb;
border-radius:12px; height:40px; padding:0 14px; cursor:pointer; font-weight:600;
transition:all .2s ease;
}
.b:hover{background:#f3f4f6; border-color:#cbd5e1}
.switchline{
display:flex; justify-content:center; gap:.5rem; margin-top:8px; font-size:.95rem; color:#64748b;
}
.switchline button{
appearance:none; background:none; border:0; color:var(--primary,#474BFF); font-weight:700; cursor:pointer;
padding:0; text-decoration:underline;
}
.exoBase a.link{
color:var(--primary,#474BFF);
font-weight:700;
text-decoration:none;
}
.exoBase a.link:hover{ text-decoration:underline; }
#categoryGrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin:16px 0}
#categoryGrid button{
background:#ffffff; color:#334155; border:1px solid #e5e7eb;
border-radius:12px; padding:12px 8px; cursor:pointer; font-weight:600; font-size:.9rem;
transition:all .2s ease; text-align:center;
}
#categoryGrid button:hover{background:#f9fafb; border-color:#cbd5e1; transform:translateY(-1px)}
#categoryGrid button.sel{
background:linear-gradient(135deg, var(--primary,#474BFF), var(--primary-600,#3f43f0));
color:#fff; border-color:transparent; transform:translateY(-2px);
box-shadow:0 4px 12px rgba(99,102,241,.30);
}
.drop-zone{
margin-top:12px; background:#ffffff; border:2px dashed #e5e7eb;
border-radius:16px; padding:24px; text-align:center; color:#475569; cursor:pointer; transition:all .25s ease;
}
.drop-zone:hover, .drop-zone.hover{background:#eef2ff; border-color:#c7d2fe; transform:translateY(-2px)}
.file-list{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px}
.file-item{display:flex; align-items:center; gap:12px; padding:12px; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px}
.file-thumb{width:32px; height:32px; border-radius:8px; object-fit:cover; background:#f8fafc; border:1px solid #e5e7eb}
.file-icon{width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; color:#fff}
.file-icon.pdf{background:linear-gradient(135deg,#E53E3E,#C53030)}
.file-errors{margin-top:12px; display:grid; gap:8px}
.file-errors .err{background:#fef2f2; border:1px solid #fee2e2; color:#b91c1c; padding:10px 12px; border-radius:10px; font-size:.9rem}
.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;}
.loading{position:relative; overflow:hidden}
.loading::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(15,23,42,.06), transparent); animation:shimmer 1.5s infinite;}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.auth-terms{
grid-row:3;
position:relative;
align-self:center;
justify-self:center;
width:min(920px, calc(100% - 48px));
margin:0;
font-size:.85rem;
color:#64748b;
padding:0 24px;
line-height:1.5;
text-align:center;
background:none;
border:0;
pointer-events:auto;
z-index:2;
text-wrap:balance;
}
.auth-terms a{color:var(--primary,#474BFF); text-decoration:none}
.auth-terms a:hover{text-decoration:underline}
@media (max-width:960px){
.auth-stage{
width:min(680px, calc(100% - 24px));
height:calc(100dvh - 24px);
grid-template-rows:minmax(0, 1fr) auto minmax(56px, 1fr);
}
.exoBase{
grid-template-columns:1fr;
min-height:auto;
max-height:calc(100dvh - 104px);
}
.auth-showcase{
--auth-showcase-copy-inset:14px;
padding:18px 18px 0;
border-right:0;
border-bottom:1px solid rgba(229,231,235,.92);
gap:14px;
}
.auth-showcase-head{padding-right:52px;}
.auth-showcase-stage{ inset:0; }
.auth-showcase-card{padding:116px var(--auth-showcase-copy-inset) calc(46px + var(--auth-showcase-dots-bottom));}
.auth-showcase-copy{padding:0 var(--auth-showcase-copy-inset) 0;}
.auth-showcase-copy h3{font-size:1.18rem;}
.auth-showcase-copy p{font-size:.9rem;}
.auth-showcase-dots{padding-bottom:18px;}
.auth-terms{
width:min(680px, calc(100% - 24px));
padding:0 20px;
font-size:.82rem;
}
}
@media (max-width:520px){
.auth-stage{
width:calc(100% - 24px);
height:calc(100dvh - 24px);
grid-template-rows:minmax(0, 1fr) auto minmax(48px, 1fr);
}
.auth-showcase{
--auth-showcase-copy-inset:12px;
padding:16px 16px 0;
}
.auth-showcase-card{padding:102px var(--auth-showcase-copy-inset) calc(42px + var(--auth-showcase-dots-bottom));}
.auth-showcase-copy{padding:0 var(--auth-showcase-copy-inset) 0}
.auth-showcase-copy h3{font-size:1.05rem}
.auth-showcase-copy p{font-size:.88rem}
.exoMain{padding:16px 20px 18px}
.exoSub h1{font-size:1.3rem}
.auth-terms{
width:calc(100% - 24px);
padding:0 12px;
font-size:.78rem;
}
#categoryGrid{grid-template-columns:repeat(2,1fr)}
}
.site-header{
position:relative;
z-index:1100;
isolation:isolate;
padding:0;
}
.nav-mobile{
display:none;
align-items:center;
justify-content:center;
gap:8px;
position:relative;
isolation:isolate;
--btf-nav-indicator-x:0px;
--btf-nav-indicator-y:0px;
--btf-nav-indicator-w:0px;
--btf-nav-indicator-h:0px;
}
.nav-mobile-secondary{ display:none; }
.nav-search-dock{ display:none; }
.nav-ico-btn{
appearance:none;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
border:0;
background:transparent;
color:rgba(15,23,42,.72);
width:52px;
height:44px;
border-radius:14px;
display:inline-flex;
align-items:center;
justify-content:center;
position:relative;
cursor:pointer;
transition:background var(--speed), color var(--speed), transform var(--speed);
}
.nav-ico-btn:hover{ background:rgba(15,23,42,.06); color:rgba(15,23,42,.92); }
.nav-ico-btn:active{ transform:translateY(1px) scale(.99); }
.nav-ico-btn.is-active{
background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(79,70,229,.10));
color:var(--primary);
}
.nav-ico-btn:focus-visible{
outline:none;
box-shadow:0 0 0 5px var(--ring);
}
.nav-ico{
font-size:22px;
line-height:1;
display:inline-flex;
}
.nav-ico svg{ display:block; }
.nav-ico-badge{
position:absolute;
top:6px;
right:10px;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary),var(--primary-600));
color:#fff;
font-size:12px;
font-weight:900;
line-height:18px;
text-align:center;
box-shadow:0 10px 22px rgba(71,75,255,.22);
border:1px solid rgba(255,255,255,.65);
}
#cartCountBadge{ position:relative; }
#cartCountBadge,
#navMobileCartCountBadge{
transform-origin:center;
will-change:transform;
}
#cartCountBadge::after,
#navMobileCartCountBadge::after{
content:"";
position:absolute;
inset:-10px;
border-radius:inherit;
border:2px solid rgba(71,75,255,.32);
opacity:0;
transform:scale(.85);
pointer-events:none;
}
#cartCountBadge.btf-cart-pulse,
#navMobileCartCountBadge.btf-cart-pulse{
animation:btfBadgePop .55s cubic-bezier(.2,.9,.2,1);
}
#cartCountBadge.btf-cart-pulse::after,
#navMobileCartCountBadge.btf-cart-pulse::after{
animation:btfCartPulse .6s ease-out;
}
@keyframes btfBadgePop{
0%{ transform:scale(1); filter:saturate(1) brightness(1); }
32%{ transform:scale(1.14); filter:saturate(1.05) brightness(1.06); }
100%{ transform:scale(1); filter:saturate(1) brightness(1); }
}
@keyframes btfCartPulse{
0%{ opacity:.35; transform:scale(.9); }
55%{ opacity:.14; }
100%{ opacity:0; transform:scale(1.85); }
}
@media (prefers-reduced-motion: reduce){
#cartCountBadge.btf-cart-pulse,
#navMobileCartCountBadge.btf-cart-pulse{ animation:none; }
#cartCountBadge.btf-cart-pulse::after,
#navMobileCartCountBadge.btf-cart-pulse::after{ animation:none; }
.nav-mobile[data-indicator="ready"]::before{ transition:none !important; }
}
.nav{
width:100%;
max-width:none;
margin:0;
padding:10px var(--browse-gutter) 12px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
backdrop-filter:none;
position:relative;
z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand svg{display:block}
.brand-name{font-weight:700; letter-spacing:.3px; font-size:clamp(14px,2.5vw,16px)}
.nav-links{
display:flex;
align-items:center;
gap:8px;
margin:0 auto 0 0;
padding:0;
background:transparent;
border:0;
border-radius:0;
}
.nav-main{display:flex; align-items:center; gap:8px}
.nav-section{display:none}
.nav-section-title{display:none}
.nav-end{display:flex; align-items:center; gap:10px; margin-left:auto}
.nav-actions{display:flex; align-items:center; gap:12px}
.lang-menu{
position:relative;
}
.lang-menu > summary{ list-style:none; }
.lang-menu > summary::-webkit-details-marker{ display:none; }
.lang-menu > summary::marker{ content:""; }
.lang-menu__btn{
min-width:56px;
padding:0 10px;
gap:8px;
}
.lang-menu__btn:focus-visible{
outline:none;
box-shadow:0 0 0 5px var(--ring);
}
.lang-menu__label{
display:none;
font-weight:800;
color:#0f172a;
}
.lang-menu__caret{
display:inline-flex;
align-items:center;
justify-content:center;
color:#64748b;
transition:transform var(--speed);
}
.lang-menu[open] .lang-menu__caret{
transform:rotate(180deg);
}
.lang-menu__dropdown{
position:absolute;
top:calc(100% + 10px);
right:0;
min-width:164px;
padding:8px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#ffffff;
box-shadow:0 24px 60px rgba(2,6,23,.12);
z-index:1400;
}
.lang-menu__item{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border:0;
border-radius:12px;
background:transparent;
color:#0f172a;
font-weight:800;
font-size:15px;
cursor:pointer;
text-align:left;
}
.lang-menu__item:hover,
.lang-menu__item:focus-visible{
outline:none;
background:#f3f4f6;
}
.lang-menu__item[hidden]{
display:none;
}
.lang-menu__item-label{
white-space:nowrap;
}
.lang-flag{
width:24px;
height:16px;
display:inline-flex;
flex:0 0 auto;
border-radius:4px;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 1px 2px rgba(15,23,42,.10);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.lang-flag--en{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23fff'/%3E%3Cg fill='%23B22234'%3E%3Crect width='24' height='1.23' y='0'/%3E%3Crect width='24' height='1.23' y='2.46'/%3E%3Crect width='24' height='1.23' y='4.92'/%3E%3Crect width='24' height='1.23' y='7.38'/%3E%3Crect width='24' height='1.23' y='9.84'/%3E%3Crect width='24' height='1.23' y='12.3'/%3E%3Crect width='24' height='1.23' y='14.76'/%3E%3C/g%3E%3Crect width='10.4' height='8.6' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.3' cy='1.3' r='.38'/%3E%3Ccircle cx='3.3' cy='1.3' r='.38'/%3E%3Ccircle cx='5.3' cy='1.3' r='.38'/%3E%3Ccircle cx='7.3' cy='1.3' r='.38'/%3E%3Ccircle cx='9.3' cy='1.3' r='.38'/%3E%3Ccircle cx='2.3' cy='2.9' r='.38'/%3E%3Ccircle cx='4.3' cy='2.9' r='.38'/%3E%3Ccircle cx='6.3' cy='2.9' r='.38'/%3E%3Ccircle cx='8.3' cy='2.9' r='.38'/%3E%3Ccircle cx='1.3' cy='4.5' r='.38'/%3E%3Ccircle cx='3.3' cy='4.5' r='.38'/%3E%3Ccircle cx='5.3' cy='4.5' r='.38'/%3E%3Ccircle cx='7.3' cy='4.5' r='.38'/%3E%3Ccircle cx='9.3' cy='4.5' r='.38'/%3E%3Ccircle cx='2.3' cy='6.1' r='.38'/%3E%3Ccircle cx='4.3' cy='6.1' r='.38'/%3E%3Ccircle cx='6.3' cy='6.1' r='.38'/%3E%3Ccircle cx='8.3' cy='6.1' r='.38'/%3E%3Ccircle cx='1.3' cy='7.7' r='.38'/%3E%3Ccircle cx='3.3' cy='7.7' r='.38'/%3E%3Ccircle cx='5.3' cy='7.7' r='.38'/%3E%3Ccircle cx='7.3' cy='7.7' r='.38'/%3E%3Ccircle cx='9.3' cy='7.7' r='.38'/%3E%3C/g%3E%3C/svg%3E");
}
.lang-flag--es{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23C60B1E'/%3E%3Crect y='4' width='24' height='8' fill='%23FFC400'/%3E%3Cg transform='translate(5 5)'%3E%3Crect width='2.8' height='6' rx='.5' fill='%23A60D1C'/%3E%3Crect x='.6' y='1.2' width='1.6' height='1.1' fill='%23FFD966'/%3E%3Crect x='.6' y='3.1' width='1.6' height='1.7' fill='%23963227'/%3E%3C/g%3E%3C/svg%3E");
}
/* Profile dropdown (replaces standalone Logout button) */
.profile-menu{
position:relative;
}
.profile-menu > summary{ list-style:none; }
.profile-menu > summary::-webkit-details-marker{ display:none; }
.profile-menu > summary::marker{ content:""; }
.profile-menu__btn{
width:44px;
padding:0;
gap:0;
}
.profile-menu__btn:focus-visible{
outline:none;
box-shadow:0 0 0 5px var(--ring);
}
.profile-menu__avatar{
display:inline-flex;
align-items:center;
justify-content:center;
}
.profile-menu__label,
.profile-menu__caret{
display:none;
transition:transform var(--speed);
}
.profile-menu__dropdown{
position:absolute;
top:calc(100% + 10px);
right:0;
min-width:220px;
padding:8px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#ffffff;
box-shadow:0 24px 60px rgba(2,6,23,.12);
z-index:1400;
}
.profile-menu__meta{
display:grid;
gap:2px;
padding:10px 12px;
margin:0 0 6px;
border-radius:12px;
background:#f8fafc;
color:#0f172a;
}
.profile-menu__meta span{
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.08em;
color:#64748b;
font-weight:900;
}
.profile-menu__meta strong{font-size:.94rem}
.profile-menu__meta em{
font-style:normal;
font-size:.78rem;
color:#64748b;
overflow-wrap:anywhere;
}
.profile-menu[open] .profile-menu__btn{
border-color:transparent;
box-shadow:none;
}
.profile-menu__item{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:12px;
text-decoration:none;
color:#0f172a;
font-weight:800;
background:transparent;
}
.profile-menu__item:hover,
.profile-menu__item:focus-visible{
outline:none;
background:#f3f4f6;
}
/* Desktop: keep the top-right actions in the same pill family as the centered nav. */
@media (min-width:1025px){
.nav{
display:flex;
align-items:center;
gap:18px;
padding:8px var(--browse-gutter) 10px;
}
.brand{
flex:0 0 auto;
}
.nav-links{
flex:1 1 auto;
min-width:0;
margin:0;
}
.nav-main{
flex:1 1 auto;
justify-content:flex-start;
min-width:0;
}
.nav-end{
flex:0 0 auto;
margin-left:0;
}
.nav-actions{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:4px;
padding:4px;
border:1px solid rgba(148,163,184,.18);
border-radius:999px;
background:rgba(255,255,255,.9);
backdrop-filter:blur(14px) saturate(145%);
box-shadow:0 14px 34px rgba(2,6,23,.08), 0 1px 0 rgba(255,255,255,.82) inset;
}
#navActions #navBrowse,
#navActions #navOrders,
#navActions #cartBtn,
#navActions #langMenu .lang-menu__btn,
#navActions #profileMenu .profile-menu__btn,
#navActions #openLoginBtn{
min-height:44px;
padding:0 18px;
border:0 !important;
border-radius:999px;
background:transparent !important;
color:var(--text);
box-shadow:none !important;
filter:none !important;
}
#navActions #navBrowse:focus,
#navActions #navOrders:focus,
#navActions #cartBtn:focus,
#navActions #langMenu .lang-menu__btn:focus,
#navActions #profileMenu .profile-menu__btn:focus,
#navActions #openLoginBtn:focus{
outline:none;
}
#navActions #navBrowse:hover,
#navActions #navOrders:hover,
#navActions #cartBtn:hover,
#navActions #langMenu .lang-menu__btn:hover,
#navActions #profileMenu .profile-menu__btn:hover,
#navActions #openLoginBtn:hover{
background:rgba(99,102,241,.08) !important;
}
#navActions #navBrowse:focus-visible,
#navActions #navOrders:focus-visible,
#navActions #cartBtn:focus-visible,
#navActions #langMenu .lang-menu__btn:focus-visible,
#navActions #profileMenu .profile-menu__btn:focus-visible,
#navActions #openLoginBtn:focus-visible{
outline:none;
box-shadow:0 0 0 5px var(--ring) !important;
}
#navActions #navBrowse.active,
#navActions #navBrowse[aria-current="page"],
#navActions #navOrders.active,
#navActions #navOrders[aria-current="page"],
#navActions #cartBtn.active,
#navActions #cartBtn[aria-current="page"]{
background:rgba(99,102,241,.12) !important;
color:var(--primary-600) !important;
box-shadow:inset 0 0 0 1px rgba(99,102,241,.16) !important;
}
#navActions #langMenu .lang-menu__btn{
min-width:52px;
padding:0 14px;
gap:8px;
}
#navActions #profileMenu .profile-menu__btn{
width:auto;
min-width:44px;
padding:0 14px;
}
.nav-links{
display:flex !important;
position:static;
transform:none;
max-height:none;
overflow:visible;
width:auto;
max-width:none;
flex-direction:row;
border:0;
border-radius:0;
padding:0;
background:transparent;
box-shadow:none;
}
.nav-menu-backdrop,
.nav-filters-backdrop,
.nav-mobile-filters-dock{
display:none !important;
}
.site-header{
position:relative;
left:auto;
right:auto;
bottom:auto;
top:auto;
padding:0;
display:block;
gap:0;
}
.nav-end,
.nav-end #navActions{
display:flex;
}
.brand{
display:flex;
}
.nav-mobile,
.nav-mobile-secondary,
.nav-search-dock{
display:none !important;
}
.nav{
border:0 !important;
border-radius:0 !important;
background:transparent !important;
backdrop-filter:none !important;
box-shadow:none !important;
margin:0 !important;
padding:10px var(--browse-gutter) 12px !important;
}
body{
padding-bottom:0 !important;
height:100dvh !important;
min-height:100dvh !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
}
#navLinks .nav-main{
display:flex !important;
}
.nav-section{
display:none !important;
}
}
html.btf-layout-desktop .nav-mobile,
html.btf-layout-desktop .nav-mobile-secondary,
html.btf-layout-desktop .nav-search-dock,
html.btf-layout-desktop .nav-mobile-filters-dock,
html.btf-layout-desktop .nav-menu-backdrop,
html.btf-layout-desktop .nav-filters-backdrop{
display:none !important;
}
html.btf-layout-desktop .site-header{
position:relative !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
top:auto !important;
padding:0 !important;
display:block !important;
}
html.btf-layout-desktop .nav-end,
html.btf-layout-desktop .nav-end #navActions,
html.btf-layout-desktop .brand,
html.btf-layout-desktop .nav-links{
display:flex !important;
}
html.btf-layout-desktop #navLinks .nav-main{
display:flex !important;
}
html.btf-layout-desktop body{
padding-bottom:0 !important;
}
.nav-main a{
color:var(--text); text-decoration:none; font-weight:800; opacity:.92;
transition:opacity var(--speed), background var(--speed), color var(--speed);
padding:8px 12px; border-radius:14px;
letter-spacing:.01em;
}
.nav-main a:hover{opacity:1; background:#f8fafc}
.nav-main a.active{
background:#eef2ff;
color:var(--primary-600);
opacity:1;
box-shadow:inset 0 0 0 1px rgba(99,102,241,.16);
}
.nav-main .nav-feature-row{
justify-content:flex-start;
gap:4px;
padding:0;
border:0;
border-radius:0;
background:transparent;
backdrop-filter:none;
box-shadow:none;
overflow:visible;
}
.nav-main .nav-feature-btn{
min-height:44px;
padding:0 18px;
border:0;
border-right:0;
border-radius:999px;
}
.nav-main .nav-feature-btn:first-child,
.nav-main .nav-feature-btn:last-child{
border-radius:999px;
}
.nav-main .nav-feature-btn + .nav-feature-btn{
margin-left:0;
}
.cta{
display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px;
border-radius:999px; font-weight:700; background:linear-gradient(135deg,var(--primary),var(--primary-600)); color:#fff; text-decoration:none
}
.burger{
display:none; width:40px; height:40px; border-radius:.5rem;
border:1px solid #e5e7eb; background:#ffffff; align-items:center; justify-content:center; cursor:pointer
}
.burger span{display:block; width:20px; height:2px; background:var(--text); position:relative}
.burger span:before, .burger span:after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text)}
.burger span:before{top:-6px} .burger span:after{top:6px}
.burger span,
.burger span:before,
.burger span:after{transition:transform .25s ease, top .25s ease, opacity .25s ease, background .25s ease}
.burger.active span{background:transparent}
.burger.active span:before{top:0; transform:rotate(45deg)}
.burger.active span:after{top:0; transform:rotate(-45deg)}
.nav-feature-row{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0;
flex-wrap:nowrap;
padding:6px;
border:1px solid rgba(148,163,184,.18);
border-radius:24px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px) saturate(145%);
box-shadow:0 18px 44px rgba(2,6,23,.14), 0 1px 0 rgba(255,255,255,.88) inset;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
}
.nav-feature-row::-webkit-scrollbar{ display:none; }
.nav-feature-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:42px;
padding:0 18px;
border:0;
border-right:1px solid rgba(148,163,184,.18);
border-radius:8px;
background:transparent;
color:var(--text);
font-weight:800;
white-space:nowrap;
transition:background var(--speed), color var(--speed), box-shadow var(--speed), border-color var(--speed);
cursor:pointer;
}
.nav-feature-btn:first-child{
border-top-left-radius:18px;
border-bottom-left-radius:18px;
}
.nav-feature-btn:last-child{
border-right:0;
border-top-right-radius:18px;
border-bottom-right-radius:18px;
}
.nav-feature-count{ display:none; }
.nav-feature-btn:hover,
.nav-feature-btn:focus-visible{
background:rgba(99,102,241,.08);
box-shadow:none;
}
.nav-feature-btn.is-active,
.nav-feature-btn[aria-pressed="true"]{
background:linear-gradient(135deg,var(--primary),var(--primary-600));
color:#ffffff;
box-shadow:0 10px 22px rgba(79,70,229,.2);
}
/* Mobile nav */
@media (max-width:1024px){
html{
height:auto;
overscroll-behavior-y:none;
}
body{
--btf-mobile-header-h:82px;
--btf-mobile-secondary-dock-w:72px;
--btf-mobile-secondary-dock-gap:10px;
--btf-mobile-dock-float:12px;
--btf-vv-bottom:0px;
--btf-mobile-safe-bottom:calc(var(--btf-mobile-header-h) + 8px);
animation:none;
height:auto;
min-height:100vh;
overflow:visible;
overflow-x:clip;
overscroll-behavior-y:none;
padding-bottom:calc(var(--btf-mobile-safe-bottom) + var(--btf-mobile-dock-float));
display:block;
}
@supports (height:100lvh){
body{ min-height:100lvh; }
}
@supports not (overflow-x:clip){
body{ overflow-x:hidden; }
}
.site-header{
margin-bottom:0;
--btf-mobile-dock-pad-x:12px;
position:fixed;
left:0;
right:0;
bottom:calc(var(--btf-vv-bottom, 0px) + var(--btf-mobile-dock-float));
top:auto;
padding:8px var(--btf-mobile-dock-pad-x) calc(10px + env(safe-area-inset-bottom));
transition:
padding .22s cubic-bezier(.2,.85,.2,1),
gap .22s cubic-bezier(.2,.85,.2,1);
display:flex;
align-items:flex-end;
gap:var(--btf-mobile-secondary-dock-gap);
}
.nav{
margin:0;
max-width:none;
padding:8px 10px;
transition:
padding .22s cubic-bezier(.2,.85,.2,1),
border-radius .22s cubic-bezier(.2,.85,.2,1),
box-shadow .22s cubic-bezier(.2,.85,.2,1);
border:1px solid rgba(99,102,241,.18);
border-radius:22px;
background:
radial-gradient(120% 180% at 50% 0%, rgba(99,102,241,.12), transparent 55%),
rgba(255,255,255,.78);
backdrop-filter:blur(12px) saturate(140%);
box-shadow:0 18px 46px rgba(2,6,23,.14), 0 1px 0 rgba(255,255,255,.85) inset;
justify-content:center;
flex:1 1 auto;
min-width:0;
position:relative;
}
.brand{ display:none; }
.nav-end{ display:none; }
.nav-search-dock{
display:block;
position:absolute;
right:var(--btf-mobile-dock-pad-x, 12px);
bottom:calc(100% + 10px);
height:56px;
width:calc(100% - (var(--btf-mobile-dock-pad-x, 12px) + var(--btf-mobile-dock-pad-x, 12px)));
max-width:56px;
z-index:1250;
border:1px solid rgba(99,102,241,.18);
border-radius:999px;
background:
radial-gradient(120% 180% at 50% 0%, rgba(99,102,241,.12), transparent 55%),
rgba(255,255,255,.78);
backdrop-filter:blur(12px) saturate(140%);
box-shadow:0 18px 46px rgba(2,6,23,.14), 0 1px 0 rgba(255,255,255,.85) inset;
overflow:hidden;
opacity:1;
transition:
max-width .32s cubic-bezier(.2,.85,.2,1),
border-radius .32s cubic-bezier(.2,.85,.2,1),
box-shadow .32s cubic-bezier(.2,.85,.2,1),
opacity .22s cubic-bezier(.2,.85,.2,1);
}
body.btf-menu-open .nav-search-dock{
opacity:0;
pointer-events:none;
}
body.btf-filters-open .nav-search-dock{
opacity:0;
pointer-events:none;
}
.nav-menu-backdrop,
.nav-filters-backdrop{
display:none;
}
.nav-mobile-filters-dock{
display:none;
}
@media (max-width:1024px){
.nav-menu-backdrop,
.nav-filters-backdrop{
display:block;
position:fixed;
inset:0;
z-index:1185;
background:rgba(2,6,23,.44);
backdrop-filter:blur(5px);
opacity:0;
pointer-events:none;
transition:opacity .24s ease;
}
.nav-menu-backdrop:not([hidden]),
body.btf-menu-open .nav-menu-backdrop{
opacity:1;
pointer-events:auto;
}
.nav-filters-backdrop:not([hidden]),
body.btf-filters-open .nav-filters-backdrop{
opacity:1;
pointer-events:auto;
}
.nav-mobile-filters-dock{
display:block;
position:fixed;
left:0;
right:0;
bottom:calc(var(--btf-mobile-header-h, 72px) + env(safe-area-inset-bottom) + 8px);
z-index:1240;
width:100%;
max-width:none;
padding:0;
border:0;
background:transparent;
box-shadow:none;
pointer-events:none;
transform:translateY(110%);
transition:transform .34s cubic-bezier(.2,.85,.2,1);
}
.nav-mobile-filters-dock.is-open{
pointer-events:auto;
transform:translateY(0);
}
.nav-mobile-filters-sheet{
width:100%;
max-height:min(82dvh, 720px);
border-radius:24px 24px 0 0;
border:1px solid rgba(99,102,241,.18);
border-bottom:0;
background:
radial-gradient(120% 180% at 50% 0%, rgba(99,102,241,.10), transparent 55%),
linear-gradient(180deg,#ffffff,#f8f9ff);
box-shadow:0 -24px 60px rgba(2,6,23,.18);
overflow:hidden;
padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.nav-mobile-filters-head{
position:sticky;
top:0;
z-index:2;
padding:10px 16px 8px;
background:inherit;
border-bottom:1px solid rgba(99,102,241,.10);
}
.nav-mobile-filters-grab{
width:42px;
height:4px;
margin:0 auto 10px;
border-radius:999px;
background:rgba(15,23,42,.16);
}
.nav-mobile-filters-title-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.nav-mobile-filters-title{
font-size:1.02rem;
font-weight:800;
letter-spacing:-.01em;
}
.nav-mobile-filters-close{
appearance:none;
border:0;
background:rgba(15,23,42,.06);
color:rgba(15,23,42,.78);
width:40px;
height:40px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.nav-mobile-filters-body{
overflow:auto;
max-height:calc(min(82dvh, 720px) - 64px);
padding:12px 16px 20px;
-webkit-overflow-scrolling:touch;
}
.nav-mobile-filters-slot{
display:grid;
gap:16px;
}
.nav-mobile-filters-slot .nav-feature-row{
width:100%;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.nav-mobile-filters-slot .nav-feature-btn{
width:100%;
justify-content:flex-start;
min-height:42px;
border:1px solid #e5e7eb;
border-radius:14px;
padding:0 12px;
background:#ffffff;
}
.nav-mobile-filters-slot .mfg-carousel{
width:100% !important;
max-width:100%;
}
.nav-mobile-filters-slot .mfg-stage{ padding:4px 0 12px; }
.nav-mobile-filters-slot .cat-carousel{
width:100% !important;
max-width:100%;
}
.nav-mobile-filters-slot .cat-stage{
width:100%;
max-width:100%;
padding:0 0 8px;
flex-wrap:wrap;
overflow:visible;
scroll-snap-type:none;
}
.nav-mobile-filters-slot .cat-card{
flex:1 1 calc(50% - 6px) !important;
max-width:calc(50% - 6px) !important;
min-width:0;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
text-wrap:wrap;
white-space:normal;
}
.nav-mobile-filters-slot .cat-count{
position:static;
flex-shrink:0;
}
.nav-mobile-filters-slot #filtersBlock{
display:grid !important;
gap:12px;
}
.nav-mobile-filters-slot .bar{
margin:0;
padding:0;
display:block;
height:auto;
min-height:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
.nav-mobile-filters-slot .bar-search{
position:static;
transform:none;
display:block;
height:auto;
min-height:0;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
}
.nav-mobile-filters-slot .bar-search-controls{
width:100%;
height:auto;
overflow-x:auto;
overflow-y:hidden;
padding:2px 0;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.nav-mobile-filters-slot .bar-search-controls::-webkit-scrollbar{ display:none; }
.nav-mobile-filters-slot .bar-search-field,
.nav-mobile-filters-slot .bar-search-export,
.nav-mobile-filters-slot #pager2{ display:none !important; }
.nav-mobile-filters-slot .new_filterbar{ width:max-content; }
}
.nav-search-dock.is-open{
max-width:calc(100% - (var(--btf-mobile-dock-pad-x, 12px) + var(--btf-mobile-dock-pad-x, 12px)));
border-radius:22px;
box-shadow:0 24px 60px rgba(2,6,23,.16), 0 1px 0 rgba(255,255,255,.85) inset;
}
.nav-search-dock.is-open:focus-within{
box-shadow:
0 0 0 5px var(--ring),
0 24px 60px rgba(2,6,23,.16),
0 1px 0 rgba(255,255,255,.85) inset;
}
.nav-search-form{
width:100%;
height:100%;
display:flex;
align-items:center;
gap:8px;
padding:6px;
}
/* Closed: make the whole circle clickable (not just the icon) and keep it centered. */
.nav-search-dock:not(.is-open) .nav-search-form{
padding:0;
gap:0;
}
.nav-search-dock:not(.is-open) .nav-search-toggle{
flex:1 0 100%;
min-width:0;
width:100%;
height:100%;
border-radius:999px;
}
.nav-search-dock:not(.is-open) .nav-search-input,
.nav-search-dock:not(.is-open) .nav-search-close{
display:none;
}
.nav-search-toggle,
.nav-search-close{
appearance:none;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
border:0;
background:transparent;
color:rgba(15,23,42,.72);
width:44px;
height:44px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:
background var(--speed),
color var(--speed),
transform var(--speed),
opacity .18s ease,
max-width .22s cubic-bezier(.2,.85,.2,1);
}
.nav-search-toggle:hover,
.nav-search-close:hover{ background:rgba(15,23,42,.06); color:rgba(15,23,42,.92); }
.nav-search-toggle:active,
.nav-search-close:active{ transform:translateY(1px) scale(.99); }
.nav-search-toggle:focus-visible,
.nav-search-close:focus-visible{
outline:none;
box-shadow:0 0 0 5px var(--ring);
}
.nav-search-dock.is-open .nav-search-toggle{
background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(79,70,229,.08));
color:var(--primary);
}
.nav-search-input{
-webkit-appearance:none;
appearance:none;
box-sizing:border-box;
flex:1 1 auto;
min-width:0;
max-width:0;
height:44px;
border-radius:16px;
border:0;
background:transparent;
box-shadow:none;
padding:0;
font-size:15px;
font-weight:700;
color:#0f172a;
outline:none;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateX(6px);
transition:
max-width .32s cubic-bezier(.2,.85,.2,1),
opacity .18s ease,
transform .18s ease,
padding .32s cubic-bezier(.2,.85,.2,1);
}
.nav-search-input::placeholder{ color:rgba(15,23,42,.45); font-weight:700; }
.nav-search-input::-webkit-search-cancel-button,
.nav-search-input::-webkit-search-decoration,
.nav-search-input::-webkit-search-results-button,
.nav-search-input::-webkit-search-results-decoration{
-webkit-appearance:none;
appearance:none;
display:none;
}
.nav-search-dock.is-open .nav-search-input{
max-width:1000px;
padding:0 8px;
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none;
}
.nav-search-close{
max-width:0;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateX(6px);
}
.nav-search-dock.is-open .nav-search-close{
max-width:44px;
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none;
}
.nav-mobile-secondary{
display:block;
width:var(--btf-mobile-secondary-dock-w);
flex:0 0 var(--btf-mobile-secondary-dock-w);
padding:8px;
transition:
width .22s cubic-bezier(.2,.85,.2,1),
padding .22s cubic-bezier(.2,.85,.2,1),
border-radius .22s cubic-bezier(.2,.85,.2,1),
box-shadow .22s cubic-bezier(.2,.85,.2,1);
border:1px solid rgba(99,102,241,.18);
border-radius:22px;
background:
radial-gradient(120% 180% at 50% 0%, rgba(99,102,241,.12), transparent 55%),
rgba(255,255,255,.78);
backdrop-filter:blur(12px) saturate(140%);
box-shadow:0 18px 46px rgba(2,6,23,.14), 0 1px 0 rgba(255,255,255,.85) inset;
}
.nav-mobile-secondary .nav-ico-btn{
width:100%;
height:48px;
border-radius:16px;
border:1px solid transparent;
background:transparent;
color:rgba(15,23,42,.72);
}
.nav-mobile-secondary .nav-ico-btn:active{
background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(79,70,229,.08));
color:var(--primary);
}
.nav-mobile{
display:grid;
width:100%;
gap:10px;
transition:gap .22s cubic-bezier(.2,.85,.2,1);
}
body.btf-guest .nav-mobile{
grid-template-columns:repeat(4, minmax(0, 1fr));
}
body.btf-auth .nav-mobile{
grid-template-columns:repeat(5, minmax(0, 1fr));
}
body.btf-awaiting-approval #navMobileCart,
body.btf-awaiting-approval #navMobileOrders{
display:none !important;
}
body.btf-awaiting-approval .site-header{
justify-content:center;
}
body.btf-awaiting-approval .nav{
flex:0 0 auto;
}
body.btf-awaiting-approval .nav-mobile{
display:flex;
width:auto;
grid-template-columns:none;
justify-content:center;
gap:10px;
}
body.btf-awaiting-approval .nav-mobile .nav-ico-btn{
width:52px;
}
.nav-mobile::before{
content:"";
position:absolute;
top:0;
left:0;
width:var(--btf-nav-indicator-w);
height:var(--btf-nav-indicator-h);
box-sizing:border-box;
transform:translate(var(--btf-nav-indicator-x), var(--btf-nav-indicator-y));
border-radius:16px;
background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(79,70,229,.10));
border:1px solid rgba(99,102,241,.22);
box-shadow:0 18px 46px rgba(2,6,23,.12), 0 1px 0 rgba(255,255,255,.65) inset;
pointer-events:none;
opacity:0;
z-index:0;
}
.nav-mobile[data-indicator]::before{ opacity:1; }
.nav-mobile[data-indicator="ready"]::before{
transition:
transform .32s cubic-bezier(.2,.85,.2,1),
width .32s cubic-bezier(.2,.85,.2,1),
height .32s cubic-bezier(.2,.85,.2,1);
will-change:transform,width,height;
}
.nav-ico-btn{
width:100%;
height:48px;
border-radius:16px;
border:1px solid transparent;
transition:
background var(--speed),
color var(--speed),
transform var(--speed),
height .22s cubic-bezier(.2,.85,.2,1),
border-radius .22s cubic-bezier(.2,.85,.2,1);
z-index:1;
}
.nav-ico-btn.is-active{
background:transparent;
border-color:transparent;
}
.nav-ico-btn.is-open{
background:transparent;
border-color:transparent;
color:var(--primary);
}
.nav-ico{ font-size:24px; }
.nav-ico-badge{
top:7px;
left:50%;
right:auto;
translate:14px 0;
}
/* Compact mobile docks while scrolling */
body.btf-dock-compact{
--btf-mobile-secondary-dock-w:64px;
--btf-mobile-secondary-dock-gap:8px;
}
body.btf-dock-compact .site-header{
--btf-mobile-dock-pad-x:10px;
padding:6px var(--btf-mobile-dock-pad-x) calc(10px + env(safe-area-inset-bottom));
}
body.btf-dock-compact .nav{
padding:6px 8px;
border-radius:20px;
box-shadow:0 14px 38px rgba(2,6,23,.12), 0 1px 0 rgba(255,255,255,.85) inset;
}
body.btf-dock-compact .nav-mobile-secondary{
padding:6px;
border-radius:20px;
box-shadow:0 14px 38px rgba(2,6,23,.12), 0 1px 0 rgba(255,255,255,.85) inset;
}
body.btf-dock-compact .nav-mobile{
gap:8px;
}
body.btf-dock-compact .nav-ico-btn{
height:44px;
}
body.btf-dock-compact .nav-ico{
font-size:22px;
}
#navFeatureDock{display:none}
.nav-end #navActions{display:none}
.nav-links{
display:none;
position:fixed;
left:0;
right:0;
bottom:calc(var(--btf-mobile-header-h, 72px) + env(safe-area-inset-bottom) + 8px);
top:auto;
width:100%;
max-width:none;
z-index:1200;
transform:translateY(110%);
max-height:min(70dvh, 520px);
overflow:auto;
border-radius:24px 24px 0 0;
padding:12px 16px calc(16px + env(safe-area-inset-bottom));
gap:14px;
flex-direction:column;
border:1px solid rgba(99,102,241,.18);
border-bottom:0;
background:
radial-gradient(120% 180% at 50% 0%, rgba(99,102,241,.10), transparent 55%),
linear-gradient(180deg,#ffffff,#f8f9ff);
box-shadow:0 -24px 60px rgba(2,6,23,.18);
transition:transform .34s cubic-bezier(.2,.85,.2,1);
}
.nav-links.open{display:flex; transform:translateY(0);}
.burger{display:flex}
#toast{
bottom:calc(var(--btf-vv-bottom, 0px) + var(--btf-mobile-dock-float) + 20px + var(--btf-mobile-header-h) + env(safe-area-inset-bottom)) !important;
}
#exeBtn{ display:none !important; }
.nav-main{width:100%; display:grid; gap:8px}
.nav-main a{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
padding:12px 12px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#ffffff;
}
.nav-main a:hover{background:#f9fafb}
.nav-main a.active{
border-color:transparent;
background:linear-gradient(135deg,var(--primary),var(--primary-600));
color:#ffffff;
}
/* Hide duplicate page links in the mobile menu popup (they already exist in the mobile dock). */
#navLinks .nav-main,
#navLinks #menuBrowseSlot,
#navLinks #menuFiltersSlot,
#navLinks #menuActionsSlot{ display:none !important; }
.nav-mobile-pages{
display:grid;
gap:10px;
}
.nav-mobile-page-btn{
appearance:none;
width:100%;
min-height:48px;
padding:0 14px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#ffffff;
color:var(--text);
font:inherit;
font-weight:700;
text-align:left;
cursor:pointer;
transition:background var(--speed), border-color var(--speed), transform var(--speed);
}
.nav-mobile-page-btn:hover{ background:#f8fafc; }
.nav-mobile-page-btn:active{ transform:translateY(1px); }
#menuLangSlot .lang-menu,
#menuAccountSlot .profile-menu{
width:100%;
}
#menuLangSlot .lang-menu__btn,
#menuAccountSlot .profile-menu__btn{
width:100%;
min-height:48px;
justify-content:flex-start;
gap:10px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#ffffff;
padding:0 14px;
}
#menuLangSlot .lang-menu__caret,
#menuAccountSlot .profile-menu__caret{ margin-left:auto; }
#menuLangSlot .lang-menu__dropdown,
#menuAccountSlot .profile-menu__dropdown{
position:static;
margin-top:8px;
min-width:0;
width:100%;
box-shadow:none;
}
.nav-section{
width:100%;
display:grid;
gap:10px;
padding-top:0;
border-top:0;
}
#menuPagesSlot + .nav-section,
#menuLangSlot + .nav-section{
padding-top:14px;
border-top:1px solid #e5e7eb;
}
.nav-section-title{
display:inline-flex;
align-items:center;
gap:.5rem;
font-size:.78rem;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
color:#475569;
opacity:.92;
}
.nav-section-title::before{
content:"";
width:9px;
height:9px;
border-radius:999px;
background:linear-gradient(135deg,var(--primary),var(--primary-600));
box-shadow:0 6px 18px rgba(99,102,241,.22);
}
#menuActionsSlot .nav-actions{
width:100%;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
#menuActionsSlot .nav-actions .btn{
width:100%;
height:42px;
border-radius:14px;
padding:0 12px;
}
/* Cart already lives in the mobile dock — avoid duplicate in the menu. */
#menuActionsSlot #cartBtn{ display:none; }
#menuActionsSlot #openSignupBtn,
#menuActionsSlot #profileMenu{
grid-column:1 / -1;
}
#menuActionsSlot #langMenu .lang-menu__btn{
justify-content:flex-start;
gap:10px;
}
#menuActionsSlot #langMenu .lang-menu__label{
display:inline-flex;
align-items:center;
}
#menuActionsSlot #langMenu .lang-menu__caret{
margin-left:auto;
}
#menuActionsSlot #langMenu .lang-menu__dropdown{
position:static;
margin-top:8px;
min-width:0;
width:100%;
box-shadow:none;
}
#menuActionsSlot #profileMenu{ width:100%; }
#menuActionsSlot #profileMenu .profile-menu__btn{
width:100%;
justify-content:flex-start;
gap:10px;
padding:0 12px;
}
#menuActionsSlot #profileMenu .profile-menu__caret{ margin-left:auto; }
#menuActionsSlot #profileMenu[open] .profile-menu__caret{ transform:rotate(180deg); }
#menuActionsSlot #profileMenu .profile-menu__label,
#menuActionsSlot #profileMenu .profile-menu__caret{
display:inline-flex;
align-items:center;
}
#menuActionsSlot #profileMenu .profile-menu__dropdown{
position:static;
margin-top:8px;
min-width:0;
width:100%;
box-shadow:none;
}
#menuFiltersSlot .nav-feature-row{
width:100%;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
overflow:visible;
}
#menuFiltersSlot .nav-feature-btn{
width:100%;
justify-content:flex-start;
min-height:42px;
border:1px solid #e5e7eb;
border-radius:14px;
padding:0 12px;
background:#ffffff;
box-shadow:none;
}
}
.wrap{
margin:0 auto;
flex:1 1 auto;
display:flex;
flex-direction:column;
min-height:0;
width:100%;
position:relative;
border-top-right-radius:0;
border-top-left-radius:0;
z-index:0;
}
.wrap::before{
content:none;
}
.wrap-scroll{
flex:1 1 auto;
min-height:0;
overflow-x:hidden;
overflow-y:hidden;
overscroll-behavior-y:none;
-webkit-overflow-scrolling:touch;
display:flex;
flex-direction:column;
}
#browseSection{
--browse-grid-overlap:0px;
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
padding:0;
}
.browse-main{
flex:1 1 auto;
display:flex;
gap:16px;
min-height:0;
overflow:hidden;
}
.browse-main #filtersSide{
flex:0 0 var(--rail-w);
position:sticky !important;
top:0;
left:auto !important;
transform:none !important;
max-height:100%;
overflow:auto;
overscroll-behavior-y:none;
}
.browse-main #grid{
flex:1 1 auto;
min-width:0;
min-height:0;
position:relative;
isolation:isolate;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior-y:none;
padding-top:calc(2px + var(--browse-grid-overlap));
}
.breadcrumbs{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
font-size:.85rem;
color:#6b7280;
margin:0 0 20px;
}
.breadcrumbs .crumb{
display:inline-flex;
align-items:center;
background:transparent;
font-weight:600;
color:#111827;
text-decoration:none;
}
.breadcrumbs .crumb-logo{ line-height:0; }
.breadcrumbs .crumb-logo svg{
width:1em;
height:1em;
display:block;
}
.breadcrumbs .crumb-sep{
color:#d1d5db;
font-weight:600;
}
.breadcrumbs .crumb-note{
margin-left:auto;
flex:0 1 32rem;
max-width:100%;
color:#64748b;
font-weight:600;
text-align:right;
}
.breadcrumbs .crumb-note--proforma{
flex-basis:40rem;
max-width:min(100%, 40rem);
font-size:.8rem;
line-height:1.45;
}
#ordersSection,
#checkoutSection{
flex:1 1 auto;
min-height:0;
overflow:auto;
overscroll-behavior-y:none;
padding:2rem clamp(1.5rem, 5vw, 4rem);
}
.browse-cart-mount{
display:none;
}
.browse-cart-mount #checkoutSection{
flex:0 0 auto;
min-height:auto;
overflow:visible;
padding:1.25rem clamp(1.5rem, 5vw, 4rem) 1.5rem;
}
.browse-cart-mount #checkoutSection.is-cart-summary-only{
position:absolute;
width:0;
height:0;
min-height:0;
padding:0;
overflow:hidden;
opacity:0;
pointer-events:none;
}
.browse-cart-mount #checkoutSection.is-cart-summary-only > .breadcrumbs,
.browse-cart-mount #checkoutSection.is-cart-summary-only #cartTable,
.browse-cart-mount #checkoutSection.is-cart-summary-only #cartEmpty,
.browse-cart-mount #checkoutSection.is-cart-summary-only #editOrderBanner,
.browse-cart-mount #checkoutSection.is-cart-summary-only .addr-panel{
display:none !important;
}
.browse-cart-mount #checkoutSection.is-cart-summary-only .orders-wrap{
overflow:visible;
}
.browse-cart-mount #checkoutSection.is-cart-summary-only .summary{
margin-top:0;
}
@media (max-width:1024px){
/* iOS: avoid nested overflow scrollers (clips safe areas); let the document scroll. */
.wrap{
display:block;
min-height:auto;
border-top-left-radius:0;
border-top-right-radius:0;
}
.wrap::before{ content:none; }
.wrap-scroll{
display:block;
min-height:auto;
overflow:visible;
-webkit-overflow-scrolling:auto;
}
#browseSection,
#ordersSection,
#checkoutSection{
flex:0 0 auto;
min-height:auto;
overflow:visible;
}
.browse-cart-mount #checkoutSection{
padding:12px 14px 8px;
}
#browseSection{ display:block; }
.browse-main{
display:block;
flex:0 0 auto;
min-height:auto;
overflow:visible;
}
.browse-main #grid{
flex:0 0 auto;
min-height:auto;
overflow:visible;
}
}
/* =========================================================
TABS / SEARCH / ACTIONS
========================================================= */
.tabs{display:flex; gap:10px; margin:6px 0 16px; flex-wrap:wrap}
.tab{
height:38px; padding:0 14px; border-radius:999px; border:1px solid #e5e7eb;
background:#ffffff; color:#111827; font-weight:700; cursor:pointer;
}
.tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-600)); color:#fff; border-color:transparent}
.search{
border:1px solid #e5e7eb; background:#ffffff; color:#0f172a;
padding:12px 14px; height:44px; border-radius:999px; font-size:16px; outline:none;
transition:border var(--speed), box-shadow var(--speed), background var(--speed);
width:100%;
}
.search:focus{border-color:var(--primary); box-shadow:0 0 0 5px var(--ring); background:#ffffff}
.btn{
display:inline-flex; align-items:center; justify-content:center;
height:44px; line-height:1; padding:0 16px; border-radius:999px;
border:1px solid #e5e7eb;
background:linear-gradient(135deg,var(--primary),var(--primary-600)); color:#fff; font-weight:800; cursor:pointer;
transition: background var(--speed), transform var(--speed);
text-decoration:none;
}
.btn.ghost{background:#ffffff; border-color:#e5e7eb; color:var(--primary-600)}
.btn:hover{filter:saturate(1.05) brightness(1.02)}
/* === Browse bar ======================================================= */
.bar{
position:relative;
display:block;
margin:0 var(--browse-gutter);
height:18px;
min-height:18px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
z-index:4;
}
#browseSection > .bar{
display:block !important;
height:18px !important;
min-height:18px !important;
max-height:18px !important;
flex:0 0 18px;
overflow:visible;
line-height:0;
}
#pager2{ display:none !important; }
.bar > *{ min-width:0; }
.bar-search{
position:absolute;
left:0;
right:0;
bottom:0;
transform:translateY(50%);
display:flex;
align-items:stretch;
gap:12px;
height:50px;
min-height:50px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
z-index:3;
}
.bar-search-controls{
flex:0 0 auto;
min-width:0;
display:flex;
align-items:stretch;
height:100%;
overflow:visible;
}
.bar-search-field{
flex:1 1 340px;
min-width:0;
display:flex;
align-items:stretch;
height:100%;
}
.bar-search-export{
flex:0 0 auto;
display:flex;
align-items:stretch;
gap:10px;
height:100%;
}
.bar-search .search{
width:100%;
min-width:0;
height:100%;
padding:0 18px;
border-radius:16px;
font:500 .95rem "Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
border:1px solid rgba(99,102,241,.14);
background:#ffffff;
box-shadow:0 1px 0 rgba(255,255,255,.88) inset;
}
.bar-search .search:hover{ border-color:var(--primary,#66f); }
.bar-search .search:focus{
border-color:var(--primary,#66f);
box-shadow:0 0 0 4px rgba(99,102,241,.12), 0 1px 0 rgba(255,255,255,.88) inset;
}
.bar.is-cart-toolbar .bar-search{
gap:14px;
}
.bar.is-cart-toolbar .bar-search-controls{
display:none;
}
.bar.is-cart-toolbar .bar-search-field{
flex:1 1 420px;
}
.bar.is-cart-toolbar .bar-search-export{
margin-left:auto;
gap:12px;
}
.bar.is-cart-toolbar .bar-search-export > #exeBtn{
display:none !important;
}
.bar.is-cart-toolbar .bar-search-export > #cartBtn{
flex:0 0 auto;
}
.bar-cart-summary{
margin-left:auto;
display:flex;
align-items:stretch;
justify-content:flex-end;
gap:10px;
height:100%;
}
.bar-cart-summary > div{
display:inline-flex;
align-items:center;
white-space:nowrap;
height:100%;
padding:0 16px;
border-radius:16px;
font:500 .95rem "Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
border:1px solid rgba(99,102,241,.14);
background:#ffffff;
color:#0f172a;
box-shadow:0 1px 0 rgba(255,255,255,.88) inset;
}
.bar-cart-summary > div strong{
font-variant-numeric:tabular-nums;
}
.bar-cart-summary #invoiceBtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:100%;
min-height:0;
padding:0 18px;
border-radius:16px;
font:600 .95rem "Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
}
.new_filterbar{
flex:0 0 auto;
display:flex;
align-items:stretch;
gap:10px;
flex-wrap:nowrap;
height:100%;
}
.bar-search .new_filter-select-wrap,
.bar-search .new_sort_group{
display:flex;
align-items:stretch;
height:100%;
}
.bar-search .new_filter-btn,
.bar-search .new_filter-select,
.bar-search #exeBtn,
.bar-search #cartBtn{
height:100%;
min-height:0;
padding:0 16px;
border-radius:16px;
font:500 .95rem "Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
border:1px solid rgba(99,102,241,.14);
background:#ffffff;
color:#0f172a;
box-shadow:0 1px 0 rgba(255,255,255,.88) inset;
}
.bar-search .new_filter-btn,
.bar-search #exeBtn,
.bar-search #cartBtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
transition:border-color var(--speed), box-shadow var(--speed), background var(--speed), transform var(--speed);
}
.bar-search .new_filter-select{
padding:0 40px 0 16px;
transition:border-color var(--speed), box-shadow var(--speed), background var(--speed);
}
.bar-search .new_filter-select-wrap::after{
right:14px;
}
.bar-search .new_filter-btn:hover,
.bar-search .new_filter-select:hover,
.bar-search #exeBtn:hover,
.bar-search #cartBtn:hover,
.bar-search .new_filter-btn.is-open{
border-color:var(--primary,#66f);
}
.bar-search .new_filter-btn:focus-visible,
.bar-search #exeBtn:focus-visible,
.bar-search #cartBtn:focus-visible{
outline:none;
border-color:var(--primary,#66f);
box-shadow:0 0 0 4px rgba(99,102,241,.12), 0 1px 0 rgba(255,255,255,.88) inset;
}
.bar-search #cartBtn.active,
.bar-search #cartBtn[aria-current="page"]{
border-color:transparent;
background:linear-gradient(135deg,var(--primary),var(--primary-600));
color:#ffffff;
box-shadow:0 14px 32px rgba(79,70,229,.18);
}
.bar-search #cartBtn.active .badge,
.bar-search #cartBtn[aria-current="page"] .badge{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.28);
color:#ffffff;
}
.bar-search .new_filter-select:focus{
outline:none;
border-color:var(--primary,#66f);
box-shadow:0 0 0 4px rgba(99,102,241,.12), 0 1px 0 rgba(255,255,255,.88) inset;
}
#exeBtn{
flex:0 0 auto;
align-self:auto;
margin:0;
}
.bar-search #new_dirToggle{
min-width:50px;
width:50px;
padding:0;
}
.new_filter-btn{ white-space:nowrap; flex:0 0 auto; }
.new_sort_group{ display:flex}
@media (min-width:1025px){
#browseSection{
--browse-grid-overlap:3.4rem;
}
.browse-main #grid{
scroll-padding-top:calc(var(--browse-grid-overlap) + 5.5rem);
}
#grid > .breadcrumbs{
position:sticky;
top:0;
z-index:20;
margin:0 -80px 20px;
padding:0 80px;
isolation:isolate;
background:#fff;
}
#grid > .breadcrumbs::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:100%;
height:calc(2px + var(--browse-grid-overlap));
pointer-events:none;
background:#fff;
}
#grid > .breadcrumbs::after{
content:"";
position:absolute;
left:1rem;
right:1rem;
bottom:-12px;
height:12px;
pointer-events:none;
background:#fff;
border-bottom:1px solid rgba(99,102,241,.14);
}
#browseSection > .bar{
margin-bottom:0;
}
}
@media (max-width:1024px){
/* Mobile: keep browse controls inside the Menu panel */
#browseSection > .mfg-carousel,
#browseSection > .cat-carousel,
#browseSection > .bar,
#browseSection > #filtersBlock{
display:none;
}
#menuBrowseSlot .bar{
margin:0;
padding:0;
display:block;
height:auto;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
body.btf-guest #menuBrowseSlot .bar{ display:none !important; }
#menuBrowseSlot #pager2{ display:none !important; }
#menuBrowseSlot .bar-search{
position:static;
transform:none;
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
height:auto;
min-height:0;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
}
#menuBrowseSlot .bar-search-controls{
width:100%;
height:auto;
overflow-x:auto;
overflow-y:hidden;
padding:2px 0;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
#menuBrowseSlot .bar-search-controls::-webkit-scrollbar{ display:none; }
/* Search already exists in the dedicated mobile search dock. */
#menuBrowseSlot .bar-search-field{ display:none; }
#menuBrowseSlot .bar-search-export{ display:none; }
#menuBrowseSlot .new_filterbar{
width:max-content;
}
#menuBrowseSlot #exeBtn{ display:none !important; }
#menuBrowseSlot .mfg-stage{ padding:10px 0 16px; }
#menuBrowseSlot .cat-stage{
padding:0 0 10px;
flex-wrap:wrap;
overflow:visible;
scroll-snap-type:none;
}
#menuBrowseSlot .cat-card{
flex:1 1 calc(50% - 6px);
max-width:calc(50% - 6px);
}
}
@media (max-width:720px){
.bar{
margin:0 1rem;
height:44px;
min-height:44px;
}
#menuBrowseSlot .new_filter-btn{
padding:7px 10px;
font-size:.82rem;
}
.bar-search{
gap:10px;
padding:10px 12px;
border-radius:18px;
}
.bar-search .search{
height:48px;
font-size:.88rem;
}
}
@media (min-width:1500px){ #filtersBlock, #filtersBtn{ display:none !important; } }
@media (max-width:1500px){ #filtersSide { display:none !important; } }
/* =========================================================
FILTERS (cards/pills/fields)
========================================================= */
.filters{
--radius:14px; --pill:999px;
--surface:#ffffff; --surface-2:#ffffff;
--outline:#e5e7eb; --outline-2:#e5e7eb;
--shadow:0 10px 30px rgba(2,6,23,.08);
margin-top:12px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px;
}
.f-card{
grid-column:span 12;
background:
radial-gradient(120% 140% at 110% -10%, rgba(99,102,241,.12), transparent 45%),
linear-gradient(180deg, #ffffff, #fafafa);
border:1px solid var(--outline);
border-radius:var(--radius);
box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
padding:14px;
}
.f-card:has(> .small-actions){ position:relative; padding-top:58px; }
.f-card:has(> .small-actions) .f-label{ position:absolute; top:14px; left:14px; margin:0; }
.f-card:has(> .small-actions) .small-actions{ position:absolute; top:10px; right:12px; margin:0; gap:10px; display:flex; flex-wrap:wrap; }
.f-label{ font-size:.8rem; font-weight:700; letter-spacing:.02em; color:var(--muted); margin-bottom:10px; display:block; }
@media (max-width: 720px){
.f-card:has(> .small-actions){ padding-top:14px; }
.f-card:has(> .small-actions) .f-label{ position:static; }
.f-card:has(> .small-actions) .small-actions{ position:static; display:flex; flex-wrap:wrap; gap:8px; width:100%; margin:8px 0 4px; justify-content:flex-start; }
.chipbox{ margin-top:4px; }
.chip{ padding:.5rem .8rem; font-size:.95rem; }
.filters .btn{ padding:.5rem .85rem; }
}
@media (max-width:380px){ .chip{ font-size:.9rem; } }
/* Multi-select */
.f-select-multi{
width:100%; min-height:200px; background:#ffffff; color:var(--text);
border:1px solid var(--outline-2); border-radius:12px; padding:8px; outline:none;
}
.f-select-multi:focus{ border-color:var(--primary); box-shadow:0 0 0 5px var(--ring); }
.f-select-multi option{ padding:8px 10px; }
.f-select-multi option:checked{
background:linear-gradient(135deg, rgba(99,102,241,.55), rgba(99,102,241,.28)) !important; color:#fff !important;
}
.f-select-multi::-webkit-scrollbar{ width:8px }
.f-select-multi::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px }
.f-select-multi{ scrollbar-color: #e5e7eb transparent; scrollbar-width: thin; }
.small-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.filters .btn{
appearance:none; cursor:pointer; font-weight:700;
padding:.55rem .95rem; border-radius:999px;
border:1px solid var(--outline-2);
background:#ffffff; color:#111827;
transition:transform .16s, box-shadow .16s, border-color .2s, background .2s;
}
.filters .btn:hover{ transform:translateY(-1px); border-color:#c7d2fe; box-shadow:0 12px 28px rgba(99,102,241,.18); }
/* Dual-range (light) */
.range{ position:relative; height:46px; padding:0 0 30px; user-select:none; -webkit-user-select:none; }
.range .track{
position:absolute; left:6px; right:6px; top:50%; transform:translateY(-50%);
height:6px; background:#e5e7eb; border-radius:999px; z-index:0;
}
.range .range-bar{
position:absolute; top:50%; transform:translateY(-50%); height:6px; left:0; width:0;
background:linear-gradient(90deg, var(--primary), #818cf8);
border-radius:999px; opacity:.95; z-index:1;
}
.range input[type=range]{
appearance:none; -webkit-appearance:none; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
width:100%; height:46px; margin:0; background:transparent; z-index:3; cursor:pointer; pointer-events:none;
}
.range input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; pointer-events:auto;
width:18px; height:18px; border-radius:50%;
background:#fff; box-shadow:0 0 0 3px var(--primary) inset, 0 2px 8px rgba(2,6,23,.15);
}
.range input[type=range]::-webkit-slider-runnable-track{ height:6px; background:transparent; }
.range input[type=range]::-moz-range-thumb{
pointer-events:auto; width:18px; height:18px; border-radius:50%;
background:#fff; border:3px solid var(--primary); box-shadow:0 2px 8px rgba(2,6,23,.15);
}
.range input[type=range]::-moz-range-track{ height:6px; background:transparent; }
.range-labels{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem; color:var(--muted); margin-top:10px; }
/* Chips */
.is-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chipbox{ background:transparent; border:0; padding:0; margin-top:6px; max-height:none; overflow:visible; }
.chipbox::-webkit-scrollbar{height:10px;width:10px}
.chipbox::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
.chipbox{scrollbar-color:#e5e7eb transparent; scrollbar-width:thin}
.chip{
--on: var(--primary);
display:inline-flex; align-items:center; gap:.45rem; margin:6px;
padding:.45rem .9rem; border-radius:999px;
background:#ffffff;
border:1px solid #e5e7eb;
color:#111827; font-weight:700; cursor:pointer;
transition:transform .15s, box-shadow .15s, background .2s, border-color .2s;
}
.chip:hover{ transform:translateY(-1px); border-color:#c7d2fe; box-shadow:0 8px 22px rgba(99,102,241,.16) }
.chip:focus-visible{ outline:none; box-shadow:0 0 0 5px var(--ring) }
.chip.is-on{ background:linear-gradient(135deg, var(--on), #818cf8); border-color:transparent; color:#fff; }
.chip .dot{ width:.55rem; height:.55rem; border-radius:999px; background:#94a3b8; }
.chip.is-on .dot{ background:#fff }
.f-input,.f-select{
width:100%; height:42px; border-radius:999px; padding:0 12px; outline:none;
border:1px solid #e5e7eb; background:#ffffff; color:#0f172a;
transition:border .18s, box-shadow .18s, background .18s;
}
.f-input:focus,.f-select:focus{ border-color:var(--primary); box-shadow:0 0 0 5px var(--ring); background:#ffffff; }
.f-reset .btn{ width:100%; }
/* @media (min-width: 720px){ .f-min{grid-column:span 5} .f-stock{grid-column:span 5} .f-reset{grid-column:span 2} .f-card{height:100%} }
@media(min-width:1200px){.wrap{max-width:900px}}
@media (min-width:1600px){ .wrap{max-width:1200px} body:has(#navBrowse.active, #navBrowse[aria-current="page"]) .wrap{max-width:1010px;} } */
.grid{
padding:2rem clamp(1.5rem, 5vw, 4rem);
border-top-right-radius:2rem;
border-top-left-radius:2rem;
background:#fff;
}
.grid-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:4rem 1rem;color:#4b5563;font-weight:600;text-align:center;min-height:200px;}
.grid-status.error{color:#b91c1c;}
.grid-status-actions{display:flex;gap:.75rem;align-items:center;justify-content:center;}
.grid-status.loading .grid-status-actions{display:none;}
.grid-status-message{font-size:1.05rem;}
@media (max-width:1024px){
.wrap{
border-top-left-radius:0;
border-top-right-radius:0;
}
.wrap::before{
border-top-left-radius:0;
border-top-right-radius:0;
}
.grid{
padding-top:12px;
border-top-left-radius:0;
border-top-right-radius:0;
background:#fff;
}
#ordersSection,
#checkoutSection{
padding:12px 14px;
}
}
.card{
grid-column:span 12;
background:var(--card);
border:1px solid #e5e7eb;
border-radius:.75rem; overflow:hidden;
box-shadow:0 8px 20px rgba(2,6,23,.06);
opacity:0; transform:translateY(12px);
transition:opacity .5s ease, transform .5s ease, border-color .25s
}
.card.card-top-deal{
border-color:rgba(251,146,60,.55);
box-shadow:0 14px 32px rgba(251,146,60,.22);
}
.card.card-top-deal .pill.brand{
background:rgba(251,146,60,.15);
border-color:rgba(251,146,60,.40);
color:#7c2d12;
}
.card.show{opacity:1;transform:translateY(0)}
.card-body{padding:16px;display:flex;flex-direction:column;gap:12px;min-height:168px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{
font-size:.8rem;color:#111827;background:#f3f4f6;border:1px solid #e5e7eb;
padding:6px 10px;border-radius:999px;font-weight:700;white-space:nowrap
}
.sku{font-size:.8rem;color:var(--muted);white-space:nowrap;}
.title{font-size:1.02rem;font-weight:600;margin:0}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price-big{font-size:1.15rem;font-weight:800;letter-spacing:.1px}
.stock-pill{background:#f3f4f6;border:1px solid #e5e7eb;color:#334155}
.stock-m{display:none}
.stock-d{display:inline-flex}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
background:#f3f4f6;border:1px solid #e5e7eb;color:#334155;
padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:700
}
.badge-top{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; position:relative; }
.card-foot{margin-top:auto;display:flex;align-items:center;gap:10px}
.actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.qty input{
width:54px;height:32px;text-align:center;border:1px solid #e5e7eb;
background:#ffffff;color:#0f172a;outline:none;border-radius:.5rem
}
.deal-row .col.qty{
--qty-size:32px;
--qty-gap:6px;
position:relative;
isolation:isolate;
overflow:visible;
display:inline-flex;
align-items:center;
gap:var(--qty-gap);
}
.deal-row .qty input,
#checkoutSection .qty-sm{
transition:transform .2s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.deal-row .qty input{
width:44px;
height:var(--qty-size);
line-height:var(--qty-size);
border-radius:12px;
background:#fff;
font-weight:800;
font-variant-numeric:tabular-nums;
box-shadow:inset 0 0 0 1px rgba(71,75,255,.18);
}
.deal-row .col.qty::after,
#checkoutSection .qty::after{
content:"";
position:absolute;
inset:-7px;
border-radius:999px;
pointer-events:none;
opacity:0;
transform:scale(.86);
background:
radial-gradient(70% 90% at var(--qty-glow-x, 50%) 50%, var(--qty-glow, rgba(71,75,255,.18)), transparent 74%);
z-index:-1;
}
.deal-row .col.qty.is-bump-plus::after,
#checkoutSection .qty.is-bump-plus::after{
--qty-glow:rgba(99,102,241,.24);
--qty-glow-x:78%;
animation:btf-qty-shell-plus .56s cubic-bezier(.16,.84,.28,1);
}
.deal-row .col.qty.is-bump-minus::after,
#checkoutSection .qty.is-bump-minus::after{
--qty-glow:rgba(59,130,246,.20);
--qty-glow-x:22%;
animation:btf-qty-shell-minus .56s cubic-bezier(.16,.84,.28,1);
}
.deal-row .col.qty.is-blocked-min::after,
#checkoutSection .qty.is-blocked-min::after{
--qty-glow:rgba(100,116,139,.2);
--qty-glow-x:22%;
animation:btf-qty-shell-limit-min .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row .col.qty.is-blocked-max::after,
#checkoutSection .qty.is-blocked-max::after{
--qty-glow:rgba(249,115,22,.24);
--qty-glow-x:78%;
animation:btf-qty-shell-limit-max .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty input.is-step-plus,
#checkoutSection .qty-sm.is-step-plus{
animation:btf-qty-field-plus .44s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty input.is-step-minus,
#checkoutSection .qty-sm.is-step-minus{
animation:btf-qty-field-minus .44s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty input.is-limit-min,
#checkoutSection .qty-sm.is-limit-min{
animation:btf-qty-field-limit-min .58s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty input.is-limit-max,
#checkoutSection .qty-sm.is-limit-max{
animation:btf-qty-field-limit-max .58s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty button,
#checkoutSection .qty button{
--btn-base:linear-gradient(180deg,#eef2ff,#dbeafe);
--btn-hi:rgba(255,255,255,0);
--btn-border:rgba(71,75,255,.18);
--btn-pulse:rgba(71,75,255,.22);
width:var(--qty-size);
height:var(--qty-size);
min-width:var(--qty-size);
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
position:relative;
overflow:hidden;
font-size:0;
color:var(--primary);
background:
radial-gradient(80px circle at var(--mx, 50%) var(--my, 50%), var(--btn-hi), rgba(255,255,255,0) 60%),
var(--btn-base);
box-shadow:
inset 0 0 0 1px var(--btn-border),
0 10px 18px rgba(99,102,241,.08);
transition:transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, color .18s ease;
}
.deal-row .qty button:hover,
#checkoutSection .qty button:hover{
--btn-hi:rgba(255,255,255,.85);
filter:brightness(1.04);
}
.deal-row .qty button:active,
#checkoutSection .qty button:active{ transform:scale(.96); }
.deal-row .qty button.is-reacting-plus,
#checkoutSection .qty button.is-reacting-plus{
--btn-base:linear-gradient(180deg,#ede9fe,#c7d2fe);
--btn-border:rgba(99,102,241,.3);
animation:btf-qty-button-plus .46s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty button.is-reacting-minus,
#checkoutSection .qty button.is-reacting-minus{
--btn-base:linear-gradient(180deg,#eff6ff,#dbeafe);
--btn-border:rgba(59,130,246,.26);
color:#3730a3;
animation:btf-qty-button-minus .46s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty button.is-hit-min,
#checkoutSection .qty button.is-hit-min{
--btn-base:linear-gradient(180deg,#f8fafc,#e2e8f0);
--btn-border:rgba(100,116,139,.3);
--btn-pulse:rgba(100,116,139,.16);
color:#475569;
animation:btf-qty-button-limit-min .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty button.is-hit-max,
#checkoutSection .qty button.is-hit-max{
--btn-base:linear-gradient(180deg,#fff7ed,#fed7aa);
--btn-border:rgba(249,115,22,.34);
--btn-pulse:rgba(249,115,22,.18);
color:#ea580c;
animation:btf-qty-button-limit-max .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row.row-top-deal .qty button{
color:#f70;
--btn-base:linear-gradient(180deg,#fff1f2,#ffe4e6);
--btn-border:rgba(249,115,22,.25);
--btn-pulse:rgba(249,115,22,.22);
}
.deal-row .qty button::before,
#checkoutSection .qty button::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
transform:translate(-50%,-50%);
background:currentColor;
border-radius:2px;
}
.deal-row .qty button.plus::after,
#checkoutSection .qty button.plus-sm::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:2px;
height:14px;
transform:translate(-50%,-50%);
background:currentColor;
border-radius:2px;
}
@keyframes btf-qty-button-plus{
0%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 var(--btn-pulse)}
32%{transform:translateY(-2px) scale(1.12);box-shadow:inset 0 0 0 1px var(--btn-border),0 16px 28px rgba(99,102,241,.16),0 0 0 8px rgba(99,102,241,.14)}
62%{transform:translateY(1px) scale(.97)}
100%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-button-minus{
0%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 var(--btn-pulse)}
32%{transform:translateY(2px) scale(.92);box-shadow:inset 0 0 0 1px var(--btn-border),0 6px 14px rgba(37,99,235,.12),0 0 0 8px rgba(59,130,246,.12)}
62%{transform:translateY(-1px) scale(1.05)}
100%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-button-limit-min{
0%{transform:translateX(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(148,163,184,.08),0 0 0 0 var(--btn-pulse)}
22%{transform:translateX(-2px) scale(.98)}
42%{transform:translateX(2px) scale(1.02);box-shadow:inset 0 0 0 1px var(--btn-border),0 12px 22px rgba(148,163,184,.12),0 0 0 7px rgba(148,163,184,.12)}
66%{transform:translateX(-1px)}
100%{transform:translateX(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(148,163,184,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-button-limit-max{
0%{transform:translateY(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(249,115,22,.08),0 0 0 0 var(--btn-pulse)}
28%{transform:translateY(-2px) scale(1.06);box-shadow:inset 0 0 0 1px var(--btn-border),0 16px 26px rgba(249,115,22,.16),0 0 0 8px rgba(249,115,22,.14)}
52%{transform:translateY(1px) scale(.97)}
74%{transform:translateY(-1px) scale(1.01)}
100%{transform:translateY(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(249,115,22,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-shell-plus{
0%{opacity:0;transform:scale(.86)}
35%{opacity:1;transform:scale(1.04)}
100%{opacity:0;transform:scale(1.18)}
}
@keyframes btf-qty-shell-minus{
0%{opacity:0;transform:scale(.86)}
35%{opacity:1;transform:scale(1.02)}
100%{opacity:0;transform:scale(1.14)}
}
@keyframes btf-qty-shell-limit-min{
0%{opacity:0;transform:translateX(0) scale(.88)}
26%{opacity:1;transform:translateX(-2px) scale(1.02)}
52%{opacity:.9;transform:translateX(2px) scale(1.04)}
100%{opacity:0;transform:translateX(0) scale(1.14)}
}
@keyframes btf-qty-shell-limit-max{
0%{opacity:0;transform:translateY(0) scale(.88)}
26%{opacity:1;transform:translateY(-2px) scale(1.03)}
52%{opacity:.92;transform:translateY(1px) scale(1.05)}
100%{opacity:0;transform:translateY(0) scale(1.16)}
}
@keyframes btf-qty-field-plus{
0%{transform:scale(1)}
35%{transform:translateY(-1px) scale(1.08)}
100%{transform:scale(1)}
}
@keyframes btf-qty-field-minus{
0%{transform:scale(1)}
35%{transform:translateY(1px) scale(.96)}
100%{transform:scale(1)}
}
@keyframes btf-qty-field-limit-min{
0%{transform:translateX(0) scale(1)}
22%{transform:translateX(-2px) scale(.99)}
48%{transform:translateX(2px) scale(1.01)}
100%{transform:translateX(0) scale(1)}
}
@keyframes btf-qty-field-limit-max{
0%{transform:translateY(0) scale(1)}
24%{transform:translateY(-1px) scale(1.03)}
52%{transform:translateY(1px) scale(.98)}
100%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
.deal-row .qty button,
#checkoutSection .qty button,
.deal-row .qty input,
#checkoutSection .qty-sm{ transition:none; }
.deal-row .qty button:active,
#checkoutSection .qty button:active{ transform:none; }
.deal-row .col.qty::after,
#checkoutSection .qty::after{ animation:none !important; }
.deal-row .qty button.is-reacting-plus,
.deal-row .qty button.is-reacting-minus,
.deal-row .qty button.is-hit-min,
.deal-row .qty button.is-hit-max,
#checkoutSection .qty button.is-reacting-plus,
#checkoutSection .qty button.is-reacting-minus,
#checkoutSection .qty button.is-hit-min,
#checkoutSection .qty button.is-hit-max,
.deal-row .qty input.is-step-plus,
.deal-row .qty input.is-step-minus,
.deal-row .qty input.is-limit-min,
.deal-row .qty input.is-limit-max,
#checkoutSection .qty-sm.is-step-plus,
#checkoutSection .qty-sm.is-step-minus,
#checkoutSection .qty-sm.is-limit-min,
#checkoutSection .qty-sm.is-limit-max{
animation:none !important;
}
}
.buy{
--accent:var(--primary);
position:relative;height:38px;padding:0 16px;border-radius:.6rem;
background:linear-gradient(135deg,var(--accent),var(--primary-600));color:#fff;font-weight:900;border:2px solid transparent;
cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
transition:transform .12s ease,box-shadow .12s ease,background .12s ease,opacity .2s;
}
.buy:hover{transform:translateY(-1px); box-shadow:0 8px 30px rgba(99,102,241,.25)}
.buy[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
@media (max-width:720px){
.stock-m{display:inline-flex}
.stock-d{display:none}
.actions{margin-left:0;width:100%;justify-content:space-between}
}
.head-right{display:flex;align-items:center;gap:10px}
.eta{
display:inline-flex;align-items:center;gap:6px;
font-size:.8rem;color:#334155;background:#f3f4f6;
border:1px solid #e5e7eb; padding:4px 10px; border-radius:999px;
position:relative; outline:none; z-index:2; cursor: pointer;
}
.eta .ico{width:16px;height:16px;display:inline-flex}
.eta .ico svg{width:16px;height:16px;opacity:.9}
.eta .tip{
position:absolute; top:calc(100% + 8px); left:0;
white-space:nowrap; background:#ffffff; color:#0f172a;
border:1px solid #e5e7eb; border-radius:.5rem;
padding:6px 8px; font-size:.78rem; line-height:1;
box-shadow:0 8px 18px rgba(2,6,23,.08);
opacity:0; pointer-events:none; transform:translateY(4px);
transition:opacity .15s ease, transform .15s ease;
}
.eta .tip::after{
content:""; position:absolute; bottom:100%; left:12px;
border:6px solid transparent; border-bottom-color:#e5e7eb;
filter:drop-shadow(0 1px 0 #ffffff);
}
.eta:hover .tip, .eta:focus .tip{opacity:1; pointer-events:auto; transform:translateY(0)}
.eta-sm{
display:inline-flex; align-items:center; gap:6px; margin-left:8px;
font-size:.76rem; color:#334155; background:#f3f4f6;
border:1px solid #e5e7eb; padding:3px 8px; border-radius:999px;
position:relative; outline:none; vertical-align:middle; cursor: pointer;
}
.eta-sm .ico{width:14px;height:14px;display:inline-flex}
.eta-sm .ico svg{width:14px;height:14px;opacity:.9}
.eta-sm .tip{
position:absolute; right:0; bottom:calc(100% + 8px);
white-space:nowrap; background:#ffffff; color:#0f172a;
border:1px solid #e5e7eb; border-radius:.5rem;
padding:6px 8px; font-size:.78rem; line-height:1;
box-shadow:0 8px 18px rgba(2,6,23,.08);
opacity:0; pointer-events:none; translate:0 4px;
transition:opacity .15s ease, translate .15s ease;
}
.eta-sm .tip::after{
content:""; position:absolute; top:100%; right:10px;
border:6px solid transparent; border-top-color:#e5e7eb;
filter:drop-shadow(0 -1px 0 #ffffff);
}
.eta-sm:hover .tip, .eta-sm:focus .tip{opacity:1; pointer-events:auto; translate:0 0}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button,
#checkoutSection .qty-sm::-webkit-outer-spin-button,
#checkoutSection .qty-sm::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.qty input, #checkoutSection .qty-sm{ -moz-appearance:textfield }
.orders-wrap{overflow-x:auto}
.table{
width:100%; min-width:700px; border-collapse:separate; border-spacing:0; overflow:hidden;
background:#ffffff; border:1px solid #e5e7eb; border-radius:var(--radius);
}
.table th,.table td{padding:12px 14px; text-align:left}
.table thead th{font-size:.85rem; color:var(--muted); background:#f9fafb}
.table tbody tr+tr td{border-top:1px solid #e5e7eb}
.stat{padding:6px 10px; border-radius:999px; font-weight:700; font-size:.78rem}
.s-processing{background:#eef2ff; color:#3730a3}
.s-shipped{background:#ecfdf5; color:#065f46}
.s-delivered{background:#f0fdf4; color:#166534}
.s-cancelled{background:#fef2f2; color:#b91c1c}
.foot{opacity:.8; text-align:center; padding:28px 0; font-size:.9rem; color:var(--muted)}
::placeholder{color:#94a3b8}
.note-review{
background:#eef2ff; border:1px solid #c7d2fe; color:#1f2937; padding:10px 14px; text-align:center; font-size:.95rem;
}
#browseSection, #ordersSection { transition: opacity .25s ease; }
/* =========================================================
MODALS (Invoice + PDF) — light
========================================================= */
#modal{
position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
z-index:100; background:rgba(15,23,42,.25);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .2s ease;
padding:16px;
}
#modal.show{opacity:1; visibility:visible; pointer-events:auto}
#modal.closing{visibility:visible}
#modal .panel.invoice{
width:min(760px, 100%); max-height:85vh; overflow:auto;
padding:16px; background:#ffffff;
border:1px solid #e5e7eb; border-radius:.75rem;
box-shadow:0 20px 50px rgba(2,6,23,.12);
}
#modal .panel.pdf{
width:min(980px, 100%); height:min(86vh, 100%);
display:flex; flex-direction:column;
padding:0; background:#ffffff;
border:1px solid #e5e7eb; border-radius:.75rem; overflow:hidden;
box-shadow:0 20px 50px rgba(2,6,23,.12);
}
.pdf-head{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 12px; background:#f9fafb; border-bottom:1px solid #e5e7eb}
.pdf-head h3{margin:0; font-size:1rem}
.pdf-wrap{position:relative; flex:1; background:#f8fafc}
.pdf-iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#f8fafc; z-index:1}
.pdf-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); z-index:2}
.spinner{width:44px; height:44px; border-radius:50%; border:3px solid #e5e7eb; border-top-color:#7aa2ff; animation:spin 1s linear infinite}
.pdf-msg{color:#475569; font-size:.9rem; opacity:.95}
@keyframes spin{to{transform:rotate(360deg)}}
.close-x{background:#ffffff; color:#0f172a; border:1px solid #e5e7eb; padding:6px 10px; border-radius:8px; cursor:pointer}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.modal-head h3{margin:0; font-size:1.05rem}
.modal-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:.9rem; color:#475569; opacity:.95; margin-bottom:10px}
.modal-body{background:#ffffff; border:1px solid #e5e7eb; border-radius:.5rem; overflow:hidden}
.lines{width:100%; border-collapse:separate; border-spacing:0}
.lines thead th{background:#f9fafb; color:#475569; text-align:left; font-size:.85rem}
.lines th, .lines td{padding:10px 12px}
.lines tbody tr+tr td{border-top:1px solid #e5e7eb}
.totals{display:grid; gap:6px; padding:12px; border-top:1px solid #e5e7eb; background:#fafafa}
.totals .row{display:flex; justify-content:space-between; align-items:center; gap:8px}
.totals .row.total{font-weight:800; font-size:1rem}
.modal-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px}
.modal-actions .spacer{flex:1}
#grid .card .title { font-size:1.02rem; font-weight:600; letter-spacing:.1px; }
#grid .price-big { font-size:1.12rem; font-weight:700; line-height:1.1; }
#grid .pill, #grid .sku { font-size:.82rem; font-weight:600; opacity:.95; }
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:.8rem}
/* Checkout */
#checkoutSection .cart-table{width:100%;border-collapse:collapse; background:#ffffff}
#checkoutSection .cart-table th,#checkoutSection .cart-table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}
#checkoutSection .qty{
--qty-size:32px;
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 8px;
border-radius:999px;
background:linear-gradient(180deg,#f8fafc,#eef2ff);
border:1px solid rgba(148,163,184,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
#checkoutSection .qty-sm{
width:54px; height:32px; text-align:center;
border:1px solid #e5e7eb; background:#ffffff; color:#0f172a; outline:none; border-radius:999px;
font-weight:800;
font-variant-numeric:tabular-nums;
box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
#checkoutSection .qty-sm:focus{border-color:var(--primary); box-shadow:0 0 0 2px var(--ring)}
#checkoutSection .actions{display:flex;gap:8px;align-items:center}
#checkoutSection .edit-order-banner{
margin-top:10px;
padding:10px 12px;
border-radius:.75rem;
border:1px dashed rgba(71,75,255,.35);
background:rgba(71,75,255,.06);
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
}
#checkoutSection .edit-order-text{font-size:.92rem;color:#334155}
#checkoutSection .summary{margin-top:10px;display:flex;justify-content:flex-end;gap:18px;align-items:center}
#checkoutSection .checkout-note{
margin:10px 0 0;
font-size:.92rem;
line-height:1.45;
color:#64748b;
}
#checkoutSection .address{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#checkoutSection .address .full{grid-column:1 / -1}
#checkoutSection .address .f-label{font-size:.85rem;color:var(--muted)}
#checkoutSection .address input{width:100%;padding:8px 10px;border-radius:.5rem;border:1px solid #e5e7eb;background:#ffffff;color:#0f172a}
#checkoutSection .bar2{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px}
#checkoutSection .bar2 .btn{height:36px; padding:0 14px; border-radius:.5rem}
.addr-panel{margin-top:16px;background:#ffffff;border:1px solid #e5e7eb;border-radius:.5rem;padding:12px}
.addr-panel .panel-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.addr-panel .panel-head .spacer{flex:1}
.addr-list{display:grid;gap:10px}
.addr-card{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:#ffffff;border:1px solid #e5e7eb;border-radius:.5rem;padding:10px}
.addr-card .meta{font-size:.92rem;color:#475569}
.addr-card .actions{display:flex;gap:8px;align-items:center}
.addr-card.selected{border-color:var(--primary); box-shadow:0 0 0 2px rgba(99,102,241,.18) inset}
.badge.selected{background:var(--primary); color:#fff}
.badge.default{background:var(--primary); color:#fff; border-color:transparent}
.btn.star{width:44px;height:44px;border-radius:999px;border:1px solid #e5e7eb;background:#ffffff;color:#334155;font-size:18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.btn.star.pinned{color:#f59e0b; border-color:#fef3c7}
.btn.star:hover{border-color:#cbd5e1;transform:translateY(-1px)}
#modal .panel.addr{width:min(640px,100%);max-height:80vh;overflow:auto;padding:16px;background:#ffffff;border:1px solid #e5e7eb;border-radius:.75rem}
.addr-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.addr-form .full{grid-column:1 / -1}
.addr-form .f-label{font-size:.85rem;color:var(--muted)}
.addr-form input{width:100%;padding:8px 10px;border-radius:.5rem;border:1px solid #e5e7eb;background:#ffffff;color:#0f172a}
/* Checkout — mobile: make cart look like cards (stock-style) */
@media (max-width:1024px){
#checkoutSection .orders-wrap{
padding:0;
overflow:visible;
}
#checkoutSection .cart-table{
display:block;
min-width:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
overflow:visible;
}
#checkoutSection .cart-table thead{display:none}
#checkoutSection .cart-table tbody{display:block}
#checkoutSection .cart-table tr{
display:block;
background:
radial-gradient(120% 140% at 110% -10%, rgba(99,102,241,.12), transparent 45%),
linear-gradient(180deg, #ffffff, #fafafa);
border:1px solid #e5e7eb;
border-radius:14px;
box-shadow:0 10px 30px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.6);
padding:12px;
margin:0 0 12px;
}
#checkoutSection .cart-table td{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 0;
border:0;
text-align:left;
}
#checkoutSection .cart-table td + td{border-top:1px solid #e5e7eb}
#checkoutSection .cart-table td:first-child{
display:block;
padding:0 0 10px;
}
#checkoutSection .cart-table td:first-child .title{font-weight:900}
#checkoutSection .cart-table td:first-child .sku{white-space:normal;flex-wrap:wrap;gap:8px}
#checkoutSection .cart-table td:not(:first-child)::before{
flex:0 0 auto;
font-size:.78rem;
font-weight:800;
letter-spacing:.02em;
color:var(--muted);
content:"";
}
#checkoutSection .cart-table td:nth-child(2)::before{content:"Unit"}
#checkoutSection .cart-table td:nth-child(3)::before{content:"Qty"}
#checkoutSection .cart-table td:nth-child(4)::before{content:"Subtotal"}
#checkoutSection .cart-table td:nth-child(2),
#checkoutSection .cart-table td:nth-child(4){
font-variant-numeric:tabular-nums;
font-weight:900;
}
#checkoutSection .qty{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 8px;
border-radius:999px;
background:linear-gradient(180deg,#f8fafc,#eef2ff);
border:1px solid rgba(148,163,184,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 12px 24px rgba(15,23,42,.06);
}
#checkoutSection .qty button{
width:32px;
height:32px;
border-radius:999px;
font-weight:900;
line-height:1;
cursor:pointer;
}
#checkoutSection .qty button:active{transform:scale(.97)}
#checkoutSection .qty-sm{
width:56px;
height:32px;
border-radius:999px;
}
#checkoutSection .summary{
position:sticky;
bottom:calc(var(--btf-mobile-header-h, 0px) + env(safe-area-inset-bottom) + 12px);
z-index:5;
margin-top:14px;
padding:10px 12px;
background:rgba(255,255,255,.86);
backdrop-filter:blur(10px) saturate(130%);
border:1px solid #e5e7eb;
border-radius:14px;
box-shadow:0 18px 46px rgba(2,6,23,.12), 0 1px 0 rgba(255,255,255,.85) inset;
justify-content:space-between;
gap:10px;
}
#checkoutSection .summary strong{font-variant-numeric:tabular-nums}
#checkoutSection .checkout-note{
margin-top:12px;
font-size:.88rem;
}
#checkoutSection .address{grid-template-columns:1fr}
.addr-form{grid-template-columns:1fr}
#checkoutSection .bar2{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
}
#checkoutSection .bar2 .btn{
width:100%;
height:44px;
border-radius:999px;
}
}
.bill-group{transition:max-height .25s ease, opacity .25s ease; overflow:hidden}
.bill-group.collapsed{max-height:0; opacity:.5; pointer-events:none}
.switch{display:flex; align-items:center; gap:10px}
.switch input{appearance:none; width:44px; height:26px; position:relative; border-radius:999px; background:#e2e8f0; outline:none; border:1px solid #cbd5e1; cursor:pointer; transition:background .2s, border-color .2s}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#94a3b8; transition:transform .2s, background .2s}
.switch input:checked{background:#e0e7ff; border-color:#c7d2fe}
.switch input:checked::after{transform:translateX(18px); background:#4f46e5}
.switch .switch-text{opacity:.95}
.chip-toggle{display:inline-flex; align-items:center}
.chip-toggle input{appearance:none; width:0; height:0; position:absolute; opacity:0}
.chip-toggle .chip{
display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
border:1px solid #e5e7eb; background:#ffffff; color:#334155; cursor:pointer; user-select:none;
transition:background .2s, border-color .2s, color .2s, transform .1s
}
.chip-toggle .chip::before{content:"★"; color:#94a3b8}
.chip-toggle input:checked + .chip{background:#fff7ed; border-color:#fed7aa; color:#b45309}
.chip-toggle input:checked + .chip::before{color:#f59e0b}
.chip-toggle .chip:hover{transform:translateY(-1px); border-color:#cbd5e1}
.badge.default{background:#fff7ed; color:#b45309; border:1px solid #fed7aa}
footer.foot:last-of-type { display:none; }
#filtersBtn { margin:0 0 0 10px; }
#exeBtn{
margin:0;
position:relative;
display:inline-flex;
align-items:center;
gap:8px;
white-space:nowrap;
padding:8px 12px;
border-radius:var(--radius);
font:400 .85rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:#fff;
color:#0f172a;
border:1px solid #0000;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(2,6,23,.06);
cursor:pointer;
transition:transform .15s, background .15s, color .15s, border-color .15s;
}
#exeBtn:hover{ border-color:var(--primary,#66f); }
@media (max-width:720px){ #pager2,#filtersBtn,#exeBtn{margin:0} }
.pager{
display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
}
.pager .meta{ width:100%; text-align:center; font-size:.9rem; color:var(--muted); margin-top:4px; opacity:.95; }
.pager button{
appearance:none;border:1px solid #0000;
background:#ffffff; color:var(--text);box-shadow:0 0 5px #ddd;
padding:.55rem .8rem; border-radius:var(--radius);
font:400 .85rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
cursor:pointer; transition:transform var(--speed), background var(--speed), border-color var(--speed);
}
.pager button:hover{border-color:var(--primary)}
.pager button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.pager button[aria-current="page"]{ background:linear-gradient(135deg, var(--primary), var(--primary-600)); border-color:transparent; color:#fff; }
.pager button[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.pager .spacer{ pointer-events:none; user-select:none; color:var(--muted); }
/* =========================================================
LEFT RAIL + LAYOUT (light)
========================================================= */
:root{ --rail-w:300px; --gap:16px; }
.page{ display:flex; align-items:flex-start; gap:var(--gap); max-width:1200px; margin:0 auto; padding:20px 16px 40px; }
@media (max-width:960px){ .page{ display:block; padding:16px 12px 32px; } }
#filtersSide{
width:var(--rail-w); flex:0 0 var(--rail-w); padding:calc(14px + var(--browse-grid-overlap, 0px)) 14px 14px;
position:absolute !important; top:84px; left:auto !important; height:auto !important; z-index:auto !important;
transform: translateX(-19rem) translateY(4.5rem);
}
.page{display:flex; gap:16px; max-width:1200px; margin:0 auto; padding:20px 16px 40px;}
.page #filtersSide{flex:0 0 300px; align-self:flex-start;}
.page #grid{flex:1; min-width:0;}
#filtersSide .f-label{ font-size:.9rem; font-weight:800; color:var(--muted); margin:0 0 8px; }
#filtersSide .side-section{ padding:10px 0 14px; border-bottom:1px solid #e5e7eb; }
#filtersSide .side-section:last-child{ border-bottom:0; padding-bottom:0; }
.cb-list{ display:grid; gap:8px; }
.cb{
display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:.5rem;
background:#ffffff; border:1px solid transparent; cursor:pointer;
}
.cb:hover{ background:#f9fafb; border-color:#e5e7eb; }
.cb input{ width:18px; height:18px; accent-color:var(--primary); }
.cb .name{ font-weight:700; color:#111827; }
.cb .count{ margin-left:auto; font-size:.82rem; color:var(--muted); }
.collapsible{ position:relative; }
.collapsible[data-collapsed="true"] .cb:nth-child(n+9){ display:none; }
.showmore{
margin-top:8px; appearance:none; border:1px solid #e5e7eb; background:#ffffff; color:#111827; font-weight:700;
border-radius:.5rem; padding:.45rem .75rem; cursor:pointer;
}
#filtersSide .range{ margin-top:4px; }
/* =========================================================
DEAL BANNERS (full-width) — light with gradient
========================================================= */
.deal-banners{
display:grid;
grid-column:1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* two equal columns */
gap:12px;
margin:12px 0 16px;
}
/* Stack to one column on narrow screens */
@media (max-width: 720px){
.deal-banners{ grid-template-columns: 1fr; }
}
.deal-card{
--ring: rgba(99,102,241,.35);
position:relative; overflow:hidden; width:100%;
border-radius: var(--radius); padding:16px 18px; text-align:left; cursor:pointer;
background: linear-gradient(180deg, var(--card), var(--card-2)) padding-box;
border:1px solid #e5e7eb; color: var(--text);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 24px rgba(2,6,23,.08);
transition: transform var(--speed), box-shadow var(--speed);
isolation:isolate; min-height:74px;
}
.deal-card:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(2,6,23,.12); }
.deal-card .deal-text{ position:relative; z-index:2; display:block; }
.deal-card strong{ display:block; letter-spacing:.3px; font-weight:800; font-size:15px; color:var(--text); }
.deal-card em{ display:block; font-style:normal; opacity:.85; margin-top:2px; font-size:12px; color:#334155; }
.deal-card::after{
content:""; position:absolute; inset:-20% -10% auto auto; height:140%;
aspect-ratio:1/1; opacity:.12; z-index:1;
background: radial-gradient(closest-side, #818cf8 30%, transparent 70%);
filter: blur(22px);
}
.deal-card[data-promo="top"]::before,
.deal-card[data-promo="lowered"]::before{
content:""; position:absolute; right:-8px; bottom:-10px; width:132px; height:132px; opacity:.14; z-index:1;
background:#000;
-webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat;
}
.deal-card[data-promo="top"]{
--icon:url("data:image/svg+xml;utf8,");
}
.deal-card[data-promo="lowered"]{
--icon:url("data:image/svg+xml;utf8,");
}
.deal-card.is-active::after,
.deal-card.is-active::before{ pointer-events:none; }
.deal-card.is-active::after{
content:""; position:absolute; inset:-1px; z-index:3; border-radius:calc(var(--radius) + 1px);
background: conic-gradient(from 0deg, var(--ring) 0 20%, transparent 20% 40%, var(--ring) 40% 60%, transparent 60% 80%, var(--ring) 80% 100%);
animation: deal-spin 2.8s linear infinite;
padding:2px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; border-radius: inherit;
}
.deal-card.is-active{
box-shadow:0 0 0 1px rgba(99,102,241,.16) inset, 0 0 22px 2px var(--ring), 0 10px 28px rgba(2,6,23,.12);
border:1px solid rgba(99,102,241,.22);
}
@keyframes deal-spin{ to{ transform:rotate(360deg) } }
.deal-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* ---- mfg + category carousels ---- */
.mfg-carousel{
--mfg-size: 88px;
--mfg-gap: var(--mfg-size);
--mfg-gap-extra: 10px;
--mfg-rot:0;
--mfg-z:0;
--mfg-scale:0;
--mfg-radius:16px;
position:relative;
margin-bottom:2px;
}
.mfg-stage{
position:relative;
min-height:calc(var(--mfg-size) - 24px);
display:flex;
align-items:center;
gap:var(--mfg-gap-extra);
overflow-x:auto;
overflow-y:visible;
padding:2px var(--browse-gutter) 24px;
scroll-behavior:smooth;
scroll-snap-type:x proximity;
touch-action:pan-x;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:rgba(148,163,184,.45) transparent;
}
.mfg-stage::-webkit-scrollbar,
.cat-stage::-webkit-scrollbar{
height:8px;
}
.mfg-stage::-webkit-scrollbar-track,
.cat-stage::-webkit-scrollbar-track{
background:rgba(148,163,184,.18);
border-radius:999px;
border-left:var(--browse-gutter) solid transparent;
border-right:var(--browse-gutter) solid transparent;
background-clip:content-box;
}
.mfg-stage::-webkit-scrollbar-thumb,
.cat-stage::-webkit-scrollbar-thumb{
background:linear-gradient(90deg, rgba(79,70,229,.45), rgba(59,130,246,.35));
border-radius:999px;
}
.mfg-card{
position:relative;
width:var(--mfg-size);
height:var(--mfg-size);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
margin:0;
padding:0;
border-radius:var(--mfg-radius);
background:transparent;
color:var(--text);
border:1px solid transparent;
transition:transform .2s ease, filter .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease;
outline:0;
flex:0 0 var(--mfg-size);
scroll-snap-align:center;
}
.mfg-card.mfg-preload{
transition:none !important;
}
/* PNG → pure black */
.mfg-logo{
max-width:50px; max-height:50px; width:auto; height:auto;
pointer-events:none; user-select:none;
}
/* count */
.mfg-card small.mfg-count, .cat-count{
display:block; font-size:11px; font-weight:800; opacity:.8; line-height:1; position:absolute;bottom:2px;color:#555;
}
.mfg-card.is-selected{
background:
radial-gradient(120% 140% at 110% -10%, rgba(99,102,241,.38), transparent 55%),
radial-gradient(120% 140% at -20% 130%, rgba(168,85,247,.30), transparent 62%),
radial-gradient(90% 90% at 50% 110%, rgba(99,102,241,.22), transparent 62%),
linear-gradient(180deg,#ffffff,#ffffff);
border-color:#a5b4fc;
box-shadow:inset 0 0 0 2px rgba(99,102,241,.18), 0 1px 0 rgba(255,255,255,.88) inset;
}
.mfg-card.is-visible:hover{
filter:brightness(1.02);
border-color:var(--primary,#66f);
}
.cat-carousel{
--cat-width: 160px;
--cat-height: 54px;
--cat-gap: var(--cat-width);
--cat-gap-extra: 12px;
--cat-rot: 0;
--cat-z: 0;
--cat-scale:0;
--cat-radius:10px;
position:relative;
}
.cat-stage{
position:relative;
display:flex;
gap:var(--cat-gap-extra);
padding:0 4rem var(--cat-gap-extra);
scroll-behavior:smooth;
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:rgba(148,163,184,.45) transparent;
}
.cat-card{
padding:.7rem;
cursor:pointer;
border-radius:var(--cat-radius);
background:linear-gradient(180deg, var(--card), var(--card-2));border:1px solid rgba(148,163,184,.28);text-wrap:nowrap;
color:var(--text);
box-shadow:0 4px 12px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.5);
transform-style:preserve-3d; backface-visibility:hidden;
flex: 0 0 var(--cat-width);
transition:transform .2s ease, filter .2s ease, opacity .2s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
font-size:.85rem;font-weight:400;
font-family:"Rethink Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
}
.cat-card.cat-static{
position:static;
transform:none !important;
opacity:1 !important;
pointer-events:auto;
padding:.5rem 1rem;
}
.cat-card.is-selected{
background:
radial-gradient(120% 140% at 110% -10%, rgba(99,102,241,.32), transparent 55%),
radial-gradient(120% 140% at -20% 130%, rgba(168,85,247,.25), transparent 62%),
#ffffff;
color:#0f172a;
border-color:#a5b4fc;
box-shadow:0 10px 24px rgba(99,102,241,.22), 0 0 0 1px rgba(99,102,241,.22), inset 0 1px 0 rgba(255,255,255,.85);
}
.cat-card.is-visible:hover{ filter:brightness(1.04) }
/* Appear / disappear */
.cat-card.cat-pre{ opacity:0; transform:translateY(4px) scale(.92); }
.cat-card.cat-in{ opacity:1; transform:scale(1); transition:transform .22s ease, opacity .22s ease; }
.cat-card.cat-out{ opacity:0 !important; transform:translateY(-4px) scale(.92) !important; transition:transform .18s ease, opacity .18s ease; }
#browseSection > .cat-carousel,
#menuBrowseSlot .cat-carousel{
display:none !important;
}
/* mobile keeps them tight to the edges too */
@media (max-width:1200px){
.mfg-carousel{ width: 100%; }
.cat-carousel{ width: 100%; }
}
@media (max-width:720px){
.mfg-carousel{
width: 100%;
--mfg-size: 72px;
--mfg-gap-extra: 8px;
}
.cat-carousel{
width: 100%;
--cat-width: 140px;
--cat-gap-extra: 10px;
}
.mfg-stage{ padding:10px 1rem 18px; }
.cat-stage{ padding:0 1rem var(--cat-gap-extra); }
.mfg-stage::-webkit-scrollbar,
.cat-stage::-webkit-scrollbar{
height:6px;
}
.mfg-stage::-webkit-scrollbar-track,
.cat-stage::-webkit-scrollbar-track{
border-left:1rem solid transparent;
border-right:1rem solid transparent;
}
}
/* ---- deal rows ---- */
:root{
--primary:#474BFF;
--indigo:#66f;
--violet:#8b5cf6;
--text:#0f172a;
}
.deal-list{display:block}
/* ultra-thin white rows (you can keep margin:1px) */
.deal-row{
position:relative;
display:flex; align-items:center; gap:3.5px;
background:linear-gradient(45deg, lavender, #0000);
border-radius:.5rem;
padding-left:4px;
margin:6px 0;
transition:box-shadow .18s, border-color .18s, background .18s;
cursor:pointer;
}
/* When an item has expandable offers, the following `.row-details.offer-details` block owns the spacing. */
.deal-row.has-offers{ margin-bottom:0; }
.deal-row.row-top-deal{
background:linear-gradient(45deg, #fee, #0000);
}
/* stronger glow on hover but still flat (no overlay element) */
.deal-row:hover{
/*background:
radial-gradient(120% 140% at 110% -10%, rgb a(99,102,241,.42), transparent 55%),
radial-gradient(120% 140% at -20% 130%, rgba(168,85,247,.34), transparent 62%),
#fff;
border-color: rgba(99,102,241,.38);
box-shadow:0 10px 22px rgba(71,75,255,.18);*/
}
.deal-row .exp{
--exp-size:28px;
--exp-shadow:0 8px 18px rgba(71,75,255,.14);
--exp-shadow-hover:0 10px 22px rgba(71,75,255,.18);
--exp-outline:rgba(71,75,255,.35);
width:var(--exp-size); height:var(--exp-size); flex:0 0 var(--exp-size);
border-radius:999px;
background:#eef;
border:1px solid rgba(71,75,255,.22);
display:grid; place-items:center;
font-weight:900; font-size:18px; line-height:1;
transition:transform .18s, filter .18s, box-shadow .18s;
padding:0;
appearance:none;
cursor:pointer;
color:var(--primary);
box-shadow:var(--exp-shadow);
}
/* Expander color matches deal type: purple for non-top-deal, orange for top-deal */
.deal-row.has-offers .exp{
--exp-shadow:0 8px 18px rgba(109,40,217,.14);
--exp-shadow-hover:0 10px 22px rgba(109,40,217,.18);
--exp-outline:rgba(109,40,217,.35);
background:#ede9fe;
border-color:rgba(139,92,246,.38);
color:#6d28d9;
}
.deal-row.row-top-deal.has-offers .exp{
--exp-shadow:0 8px 18px rgba(249,115,22,.16);
--exp-shadow-hover:0 10px 22px rgba(249,115,22,.20);
--exp-outline:rgba(249,115,22,.35);
background:#ffedd5;
border-color:rgba(249,115,22,.38);
color:#f70;
}
.deal-row .exp:hover{ filter:brightness(1.03); box-shadow:var(--exp-shadow-hover); }
.deal-row .exp:active{ transform:scale(.98); }
.deal-row .exp:focus-visible{ outline:2px solid var(--exp-outline); outline-offset:2px; }
.deal-row.open .exp{ transform:rotate(45deg); }
.deal-title{
flex:1 1 auto; min-width:0; font-weight:500;font-size:.85rem; color:var(--text); padding:0 .5rem;
white-space:nowrap;
overflow-x:auto; overflow-y:hidden;
text-overflow:clip;
}
.deal-title-main{
display:block;
min-width:0;
}
.deal-title-sub{
display:block;
margin-top:2px;
font-size:.72rem;
font-weight:600;
color:rgba(15,23,42,.42);
line-height:1.2;
white-space:normal;
overflow-wrap:anywhere;
}
.deal-row.offer-sub .deal-title{
white-space:normal;
overflow:visible;
text-overflow:clip;
line-height:1.25;
}
.deal-row.offer-sub .deal-title-main{
font-weight:600;
}
/* Mobile: make each item a readable "block row" card */
@media (max-width:720px){
.deal-row{
flex-wrap:wrap;
align-items:flex-start;
gap:10px;
padding:12px;
margin:10px 0;
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.deal-row.row-top-deal{
border-color:rgba(251,146,60,.45);
box-shadow:0 12px 28px rgba(251,146,60,.18);
}
.deal-title{
flex:1 1 100%;
padding:0;
font-size:1.02rem;
font-weight:700;
line-height:1.25;
white-space:normal;
overflow:visible;
text-overflow:clip;
overflow-wrap:anywhere;
}
.deal-title-sub{
font-size:.82rem;
}
.deal-row .col{
flex:1 1 100%;
width:100%;
flex-wrap:wrap;
align-items:flex-start;
gap:10px;
white-space:normal;
padding:.6rem .8rem;
border-radius:12px;
}
.deal-row .col.qty{
--qty-size:38px;
--qty-gap:6px;
flex:0 0 auto;
width:auto;
flex-wrap:nowrap;
gap:var(--qty-gap);
padding:0;
border-radius:0;
background:transparent;
align-items:center;
align-self:center;
position:relative;
isolation:isolate;
overflow:visible;
}
.deal-row .btn-buy{
flex:1 1 auto;
min-height:44px;
padding:.8rem 1rem;
border-radius:12px;
font-size:1rem;
font-weight:900;
background:linear-gradient(135deg,var(--primary),var(--indigo));
color:#fff;
}
.deal-row .btn-buy[hidden]{
display:none !important;
}
.deal-row .btn-buy.btn-buy--cart{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}
.deal-row .btn-buy.btn-buy--cart::before{
content:'';
width:18px;
height:18px;
flex:0 0 18px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zm10%200c-1.1%200-1.99.9-1.99%202S15.9%2022%2017%2022s2-.9%202-2-.9-2-2-2zM7.16%2014h9.45c.75%200%201.41-.41%201.75-1.03L21%206H6.21L5.27%204H2v2h2l3.6%207.59-1.35%202.44c-.16.28-.25.61-.25.97%200%201.1.9%202%202%202h12v-2H7c-.14%200-.25-.11-.25-.25l.03-.12.93-1.63z'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zm10%200c-1.1%200-1.99.9-1.99%202S15.9%2022%2017%2022s2-.9%202-2-.9-2-2-2zM7.16%2014h9.45c.75%200%201.41-.41%201.75-1.03L21%206H6.21L5.27%204H2v2h2l3.6%207.59-1.35%202.44c-.16.28-.25.61-.25.97%200%201.1.9%202%202%202h12v-2H7c-.14%200-.25-.11-.25-.25l.03-.12.93-1.63z'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.deal-row.row-top-deal .btn-buy{
background:linear-gradient(135deg,#f97316,#fb7185);
}
.deal-row .btn-wish{
flex:1 1 auto;
min-height:44px;
padding:.8rem 1rem;
border-radius:12px;
font-size:1rem;
font-weight:900;
background:rgba(99,102,241,.10);
color:var(--primary);
border:1px solid rgba(99,102,241,.26);
}
.deal-row .btn-wish:hover:not([disabled]){
background:rgba(99,102,241,.14);
}
.deal-row .btn-wish.btn-wish--saved{
background:rgba(16,185,129,.12);
border-color:rgba(16,185,129,.35);
color:#065f46;
}
.deal-row .deal-meta-badges{
display:flex;
align-items:center;
gap:10px;
flex:0 1 auto;
min-width:0;
flex-wrap:wrap;
}
.deal-row .price,
.deal-row .stock{
width:auto;
display:flex;
flex-direction:column;
gap:2px;
}
.deal-row .price{
flex:1 1 8ch;
min-width:8ch;
align-items:center;
text-align:center;
}
.deal-row .stock{
flex:0 0 4ch;
min-width:4ch;
align-items:center;
text-align:center;
}
.deal-row .price::before,.deal-row .stock::before{
content:attr(data-tip);
position:static;
transform:none;
opacity:1;
background:none;
box-shadow:none;
border:0;
margin:0;
padding:0;
font-size:.72rem;
font-weight:800;
letter-spacing:.02em;
color:rgba(15,23,42,.65);
}
.deal-row .price::after,
.deal-row .stock::after{
display:none !important;
}
.deal-row .price:hover::before,
.deal-row .stock:hover::before,
.deal-row .price:focus-visible::before,
.deal-row .stock:focus-visible::before{
transform:none !important;
}
.deal-row .price{
font-weight:900;
font-size:1.08rem;
}
.deal-row .price::before,
.deal-row .price .price-value,
.deal-row .stock::before{
display:block;
width:100%;
text-align:center;
}
.deal-row .stock{ font-weight:800; }
.deal-row .stock .stock-value{
display:inline-flex;
align-items:baseline;
justify-content:center;
gap:1px;
width:100%;
}
.deal-row .stock .stock-main{ font-weight:900; }
.deal-row .stock .stock-sub{
font-size:.72rem;
font-weight:800;
letter-spacing:.02em;
color:rgba(15,23,42,.55);
line-height:1.1;
}
.deal-row .qty input,
#checkoutSection .qty-sm{
transition:transform .2s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.deal-row .qty input{
width:44px;
height:var(--qty-size);
line-height:var(--qty-size);
border-radius:12px;
background:#fff;
font-weight:800;
font-variant-numeric:tabular-nums;
box-shadow:inset 0 0 0 1px rgba(71,75,255,.18);
}
.deal-row .col.qty::after,
#checkoutSection .qty::after{
content:"";
position:absolute;
inset:-7px;
border-radius:999px;
pointer-events:none;
opacity:0;
transform:scale(.86);
background:
radial-gradient(70% 90% at var(--qty-glow-x, 50%) 50%, var(--qty-glow, rgba(71,75,255,.18)), transparent 74%);
z-index:-1;
}
.deal-row .col.qty.is-bump-plus::after,
#checkoutSection .qty.is-bump-plus::after{
--qty-glow:rgba(99,102,241,.24);
--qty-glow-x:78%;
animation:btf-qty-shell-plus .56s cubic-bezier(.16,.84,.28,1);
}
.deal-row .col.qty.is-bump-minus::after,
#checkoutSection .qty.is-bump-minus::after{
--qty-glow:rgba(59,130,246,.20);
--qty-glow-x:22%;
animation:btf-qty-shell-minus .56s cubic-bezier(.16,.84,.28,1);
}
.deal-row .col.qty.is-blocked-min::after,
#checkoutSection .qty.is-blocked-min::after{
--qty-glow:rgba(100,116,139,.2);
--qty-glow-x:22%;
animation:btf-qty-shell-limit-min .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row .col.qty.is-blocked-max::after,
#checkoutSection .qty.is-blocked-max::after{
--qty-glow:rgba(249,115,22,.24);
--qty-glow-x:78%;
animation:btf-qty-shell-limit-max .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty input.is-step-plus,
#checkoutSection .qty-sm.is-step-plus{
animation:btf-qty-field-plus .44s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty input.is-step-minus,
#checkoutSection .qty-sm.is-step-minus{
animation:btf-qty-field-minus .44s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty input.is-limit-min,
#checkoutSection .qty-sm.is-limit-min{
animation:btf-qty-field-limit-min .58s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty input.is-limit-max,
#checkoutSection .qty-sm.is-limit-max{
animation:btf-qty-field-limit-max .58s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty button,
#checkoutSection .qty button{
--btn-base:linear-gradient(180deg,#eef2ff,#dbeafe);
--btn-hi:rgba(255,255,255,0);
--btn-border:rgba(71,75,255,.18);
--btn-pulse:rgba(71,75,255,.22);
width:var(--qty-size);
height:var(--qty-size);
min-width:var(--qty-size);
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
position:relative;
overflow:hidden;
font-size:0;
color:var(--primary);
background:
radial-gradient(80px circle at var(--mx, 50%) var(--my, 50%), var(--btn-hi), rgba(255,255,255,0) 60%),
var(--btn-base);
box-shadow:
inset 0 0 0 1px var(--btn-border),
0 10px 18px rgba(99,102,241,.08);
transition:transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, color .18s ease;
}
.deal-row .qty button:hover,
#checkoutSection .qty button:hover{
--btn-hi:rgba(255,255,255,.85);
filter:brightness(1.04);
}
.deal-row .qty button:active,
#checkoutSection .qty button:active{ transform:scale(.96); }
.deal-row .qty button.is-reacting-plus,
#checkoutSection .qty button.is-reacting-plus{
--btn-base:linear-gradient(180deg,#ede9fe,#c7d2fe);
--btn-border:rgba(99,102,241,.3);
animation:btf-qty-button-plus .46s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty button.is-reacting-minus,
#checkoutSection .qty button.is-reacting-minus{
--btn-base:linear-gradient(180deg,#eff6ff,#dbeafe);
--btn-border:rgba(59,130,246,.26);
color:#3730a3;
animation:btf-qty-button-minus .46s cubic-bezier(.16,.84,.28,1);
}
.deal-row .qty button.is-hit-min,
#checkoutSection .qty button.is-hit-min{
--btn-base:linear-gradient(180deg,#f8fafc,#e2e8f0);
--btn-border:rgba(100,116,139,.3);
--btn-pulse:rgba(100,116,139,.16);
color:#475569;
animation:btf-qty-button-limit-min .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row .qty button.is-hit-max,
#checkoutSection .qty button.is-hit-max{
--btn-base:linear-gradient(180deg,#fff7ed,#fed7aa);
--btn-border:rgba(249,115,22,.34);
--btn-pulse:rgba(249,115,22,.18);
color:#ea580c;
animation:btf-qty-button-limit-max .62s cubic-bezier(.2,.9,.24,1);
}
.deal-row.row-top-deal .qty button{
color:#f70;
--btn-base:linear-gradient(180deg,#fff1f2,#ffe4e6);
--btn-border:rgba(249,115,22,.25);
--btn-pulse:rgba(249,115,22,.22);
}
.deal-row .qty button::before,
#checkoutSection .qty button::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
transform:translate(-50%,-50%);
background:currentColor;
border-radius:2px;
}
.deal-row .qty button.plus::after,
#checkoutSection .qty button.plus-sm::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:2px;
height:14px;
transform:translate(-50%,-50%);
background:currentColor;
border-radius:2px;
}
@keyframes btf-qty-button-plus{
0%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 var(--btn-pulse)}
32%{transform:translateY(-2px) scale(1.12);box-shadow:inset 0 0 0 1px var(--btn-border),0 16px 28px rgba(99,102,241,.16),0 0 0 8px rgba(99,102,241,.14)}
62%{transform:translateY(1px) scale(.97)}
100%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-button-minus{
0%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 var(--btn-pulse)}
32%{transform:translateY(2px) scale(.92);box-shadow:inset 0 0 0 1px var(--btn-border),0 6px 14px rgba(37,99,235,.12),0 0 0 8px rgba(59,130,246,.12)}
62%{transform:translateY(-1px) scale(1.05)}
100%{transform:scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(99,102,241,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-button-limit-min{
0%{transform:translateX(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(148,163,184,.08),0 0 0 0 var(--btn-pulse)}
22%{transform:translateX(-2px) scale(.98)}
42%{transform:translateX(2px) scale(1.02);box-shadow:inset 0 0 0 1px var(--btn-border),0 12px 22px rgba(148,163,184,.12),0 0 0 7px rgba(148,163,184,.12)}
66%{transform:translateX(-1px)}
100%{transform:translateX(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(148,163,184,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-button-limit-max{
0%{transform:translateY(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(249,115,22,.08),0 0 0 0 var(--btn-pulse)}
28%{transform:translateY(-2px) scale(1.06);box-shadow:inset 0 0 0 1px var(--btn-border),0 16px 26px rgba(249,115,22,.16),0 0 0 8px rgba(249,115,22,.14)}
52%{transform:translateY(1px) scale(.97)}
74%{transform:translateY(-1px) scale(1.01)}
100%{transform:translateY(0) scale(1);box-shadow:inset 0 0 0 1px var(--btn-border),0 10px 18px rgba(249,115,22,.08),0 0 0 0 rgba(0,0,0,0)}
}
@keyframes btf-qty-shell-plus{
0%{opacity:0;transform:scale(.86)}
35%{opacity:1;transform:scale(1.04)}
100%{opacity:0;transform:scale(1.18)}
}
@keyframes btf-qty-shell-minus{
0%{opacity:0;transform:scale(.86)}
35%{opacity:1;transform:scale(1.02)}
100%{opacity:0;transform:scale(1.14)}
}
@keyframes btf-qty-shell-limit-min{
0%{opacity:0;transform:translateX(0) scale(.88)}
26%{opacity:1;transform:translateX(-2px) scale(1.02)}
52%{opacity:.9;transform:translateX(2px) scale(1.04)}
100%{opacity:0;transform:translateX(0) scale(1.14)}
}
@keyframes btf-qty-shell-limit-max{
0%{opacity:0;transform:translateY(0) scale(.88)}
26%{opacity:1;transform:translateY(-2px) scale(1.03)}
52%{opacity:.92;transform:translateY(1px) scale(1.05)}
100%{opacity:0;transform:translateY(0) scale(1.16)}
}
@keyframes btf-qty-field-plus{
0%{transform:scale(1)}
35%{transform:translateY(-1px) scale(1.08)}
100%{transform:scale(1)}
}
@keyframes btf-qty-field-minus{
0%{transform:scale(1)}
35%{transform:translateY(1px) scale(.96)}
100%{transform:scale(1)}
}
@keyframes btf-qty-field-limit-min{
0%{transform:translateX(0) scale(1)}
22%{transform:translateX(-2px) scale(.99)}
48%{transform:translateX(2px) scale(1.01)}
100%{transform:translateX(0) scale(1)}
}
@keyframes btf-qty-field-limit-max{
0%{transform:translateY(0) scale(1)}
24%{transform:translateY(-1px) scale(1.03)}
52%{transform:translateY(1px) scale(.98)}
100%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
.deal-row .qty button,
#checkoutSection .qty button,
.deal-row .qty input,
#checkoutSection .qty-sm{ transition:none; }
.deal-row .qty button:active,
#checkoutSection .qty button:active{ transform:none; }
.deal-row .col.qty::after,
#checkoutSection .qty::after{ animation:none !important; }
.deal-row .qty button.is-reacting-plus,
.deal-row .qty button.is-reacting-minus,
.deal-row .qty button.is-hit-min,
.deal-row .qty button.is-hit-max,
#checkoutSection .qty button.is-reacting-plus,
#checkoutSection .qty button.is-reacting-minus,
#checkoutSection .qty button.is-hit-min,
#checkoutSection .qty button.is-hit-max,
.deal-row .qty input.is-step-plus,
.deal-row .qty input.is-step-minus,
.deal-row .qty input.is-limit-min,
.deal-row .qty input.is-limit-max,
#checkoutSection .qty-sm.is-step-plus,
#checkoutSection .qty-sm.is-step-minus,
#checkoutSection .qty-sm.is-limit-min,
#checkoutSection .qty-sm.is-limit-max{
animation:none !important;
}
}
}
@media (prefers-reduced-motion:reduce){
.deal-row{
transition:box-shadow .18s, border-color .18s, background .18s;
}
}
.deal-row.anim-pre { opacity:0; transform:translateY(8px) scale(.998); }
.deal-row.anim-in { opacity:1; transform:none; transition:transform .22s ease, opacity .22s ease; }
.deal-row.anim-out { opacity:0; transform:translateY(-6px) scale(.998); transition:transform .18s ease, opacity .18s ease; }
.col{display:flex; align-items:center; gap:15px; white-space:nowrap;padding:.4rem .7rem;border-radius:1rem;background:#eef}
.row-top-deal .col{background:#fee}
.price{
color:var(--primary);
cursor:help;
min-width:8ch;
text-align:right;
font-variant-numeric:tabular-nums;
}
.row-top-deal .price {color:#f70}
.brand-chip{
padding:2px 8px; border-radius:10px; font-weight:700;
border:1px solid rgba(71,75,255,.22);
background:rgba(71,75,255,.06);
color:var(--text); cursor:help;
}
.stock{color:var(--text); opacity:.85; cursor:help;width:4ch;text-align:center}
@media (min-width:721px){
.deal-row > .col:not(.qty){
--deal-price-col-width:6.25ch;
flex:0 0 auto;
display:grid;
grid-template-columns:max-content var(--deal-price-col-width) max-content;
align-items:center;
column-gap:15px;
row-gap:0;
}
.deal-row > .col:not(.qty) .deal-meta-badges{
grid-column:1;
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex-wrap:nowrap;
justify-self:end;
}
.deal-row > .col:not(.qty) .price{
grid-column:2;
width:var(--deal-price-col-width);
min-width:var(--deal-price-col-width);
max-width:var(--deal-price-col-width);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
justify-self:center;
}
.deal-row > .col:not(.qty) .price .price-value{
display:block;
width:100%;
text-align:center;
}
.deal-row > .col:not(.qty) .stock{
grid-column:3;
width:auto;
min-width:4ch;
text-align:center;
justify-self:end;
}
}
/* Deal badges */
.deal-badge{
--badge-bg1:#f8fafc;
--badge-bg2:#eef2ff;
--badge-border:rgba(148,163,184,.26);
--badge-fg:#334155;
--badge-glow:rgba(15,23,42,.08);
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:24px;
padding:0 9px 0 7px;
border-radius:999px;
background:linear-gradient(180deg,var(--badge-bg1),var(--badge-bg2));
border:1px solid var(--badge-border);
color:var(--badge-fg);
box-shadow:0 10px 18px -16px var(--badge-glow), inset 0 1px 0 rgba(255,255,255,.78);
cursor:help;
line-height:1;
white-space:nowrap;
flex:0 0 auto;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.deal-badge:hover{
box-shadow:0 12px 22px -16px var(--badge-glow), inset 0 1px 0 rgba(255,255,255,.82);
}
.deal-badge__icon{
width:16px;
height:16px;
flex:0 0 16px;
display:grid;
place-items:center;
position:relative;
overflow:visible;
z-index:1;
color:inherit;
transition:filter .18s ease, opacity .18s ease;
}
.deal-badge__icon svg{
width:100%;
height:100%;
display:block;
}
.deal-badge__eta-hand,
.deal-badge__top-deal-icon,
.deal-badge__price-drop-icon,
.deal-badge__new-icon,
.deal-badge__just-sold-icon,
.deal-badge__past-purchase-icon,
.deal-badge__icon svg{
transform-box:fill-box;
}
.deal-badge__eta-hand{
transform-origin:center;
animation:btf-badge-clock 18s linear infinite;
}
.deal-badge__label{
position:relative;
z-index:1;
display:block;
max-width:8rem;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:.64rem;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
}
.deal-badge--icon-only{
min-height:0;
padding:0;
background:transparent;
border:0;
box-shadow:none;
gap:0;
}
.deal-badge--icon-only:hover{
box-shadow:none;
}
.deal-badge--icon-only .deal-badge__icon{
width:21px;
height:21px;
flex:0 0 21px;
}
.deal-badge--icon-only .deal-badge__icon svg{
filter:drop-shadow(0 2px 5px var(--badge-glow));
}
.deal-badge--warranty{
--badge-bg1:#eff6ff;
--badge-bg2:#dbeafe;
--badge-border:rgba(59,130,246,.22);
--badge-fg:#1d4ed8;
--badge-glow:rgba(59,130,246,.18);
}
.deal-badge--eta{
--badge-bg1:#eff6ff;
--badge-bg2:#dbeafe;
--badge-border:rgba(59,130,246,.24);
--badge-fg:#2563eb;
--badge-glow:rgba(59,130,246,.18);
}
.deal-badge--sealed{
--badge-bg1:#fff7ed;
--badge-bg2:#ffedd5;
--badge-border:rgba(217,119,6,.26);
--badge-fg:#b45309;
--badge-glow:rgba(245,158,11,.18);
}
.deal-badge--refurb{
--badge-bg1:#ecfdf5;
--badge-bg2:#d1fae5;
--badge-border:rgba(16,185,129,.24);
--badge-fg:#047857;
--badge-glow:rgba(16,185,129,.16);
}
.deal-badge--top-deal{
--badge-bg1:#fff7ed;
--badge-bg2:#ffedd5;
--badge-border:rgba(249,115,22,.28);
--badge-fg:#ea580c;
--badge-glow:rgba(249,115,22,.2);
}
.deal-badge--price-drop{
--badge-bg1:#fef2f2;
--badge-bg2:#fee2e2;
--badge-border:rgba(239,68,68,.24);
--badge-fg:#dc2626;
--badge-glow:rgba(239,68,68,.16);
}
.deal-badge--new{
--badge-bg1:#ecfeff;
--badge-bg2:#cffafe;
--badge-border:rgba(6,182,212,.24);
--badge-fg:#0f766e;
--badge-glow:rgba(6,182,212,.16);
}
.deal-badge--just-sold{
--badge-bg1:#f5f3ff;
--badge-bg2:#ede9fe;
--badge-border:rgba(139,92,246,.24);
--badge-fg:#6d28d9;
--badge-glow:rgba(139,92,246,.16);
}
.deal-badge--past-purchase{
--badge-bg1:#eef2ff;
--badge-bg2:#e0e7ff;
--badge-border:rgba(99,102,241,.24);
--badge-fg:#4338ca;
--badge-glow:rgba(99,102,241,.16);
}
.deal-badge--label{
padding:0 10px 0 6px;
}
.deal-badge--label .deal-badge__label{
max-width:7.75rem;
font-size:.66rem;
letter-spacing:.02em;
text-transform:none;
}
.deal-badge--sealed .deal-badge__icon svg,
.deal-badge--refurb .deal-badge__icon svg,
.deal-badge--warranty .deal-badge__icon svg{
transform-origin:center;
}
.deal-badge--top-deal .deal-badge__icon{
animation:btf-badge-float 3.4s ease-in-out infinite;
}
.deal-badge__top-deal-icon{
transform-origin:center;
animation:btf-badge-pop 3.4s ease-in-out infinite;
}
.deal-badge__price-drop-icon{
transform-origin:center;
animation:btf-badge-dip 4.2s ease-in-out infinite;
}
.deal-badge__new-icon{
transform-origin:center;
animation:btf-badge-twinkle 3.6s ease-in-out infinite;
}
.deal-badge__just-sold-icon{
transform-origin:center;
animation:btf-badge-confirm 4.6s ease-in-out infinite;
}
.deal-badge__past-purchase-icon{
transform-origin:center;
animation:btf-badge-history 5.8s ease-in-out infinite;
}
.deal-badge--sealed .deal-badge__icon svg{
animation:btf-badge-settle 5.6s ease-in-out infinite;
}
.deal-badge--refurb .deal-badge__icon svg{
animation:btf-badge-refresh 6.8s ease-in-out infinite;
}
.deal-badge--warranty .deal-badge__icon svg{
animation:btf-badge-guard 4.8s ease-in-out infinite;
}
@keyframes btf-badge-float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-1px);
}
}
@keyframes btf-badge-clock{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
@keyframes btf-badge-pop{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.06);
}
}
@keyframes btf-badge-dip{
0%,100%{
transform:translateY(0);
}
40%{
transform:translateY(.6px) scale(1.01);
}
56%{
transform:translateY(1.2px) scale(.97);
}
}
@keyframes btf-badge-twinkle{
0%,100%{
transform:scale(1);
opacity:1;
}
42%{
transform:scale(.95);
opacity:.9;
}
56%{
transform:scale(1.09);
opacity:1;
}
}
@keyframes btf-badge-confirm{
0%,100%{
transform:scale(1);
}
24%{
transform:scale(1.05);
}
36%{
transform:scale(1);
}
}
@keyframes btf-badge-history{
0%,100%{
transform:rotate(0deg);
}
28%{
transform:rotate(10deg);
}
58%{
transform:rotate(-5deg);
}
}
@keyframes btf-badge-settle{
0%,100%{
transform:translateY(0) scale(1);
}
50%{
transform:translateY(-.7px) scale(1.03);
}
}
@keyframes btf-badge-refresh{
0%,100%{
transform:rotate(0deg);
}
38%{
transform:rotate(-8deg);
}
62%{
transform:rotate(10deg);
}
}
@keyframes btf-badge-guard{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-1px);
}
}
@media (prefers-reduced-motion:reduce){
.deal-badge__eta-hand,
.deal-badge--top-deal .deal-badge__icon,
.deal-badge__top-deal-icon,
.deal-badge__price-drop-icon,
.deal-badge__new-icon,
.deal-badge__just-sold-icon,
.deal-badge__past-purchase-icon,
.deal-badge--sealed .deal-badge__icon svg,
.deal-badge--refurb .deal-badge__icon svg,
.deal-badge--warranty .deal-badge__icon svg{
animation:none !important;
}
}
.qty{padding:.4rem .5rem}
.qty input{
width:32px; height:22px; line-height:22px;
border:0; outline:0; text-align:center; font-weight:700; background:transparent; cursor:text;
}
.qty button{height:22px;
border-radius:1rem; border:none; background:#ccf; cursor:pointer;line-height:1;
}
.row-top-deal .qty button{background:#fcc}
.deal-row .col.qty{
--qty-size:22px;
gap:6px;
padding:.4rem .5rem;
border-radius:999px;
align-self:center;
}
.deal-row .qty input{
width:32px;
height:22px;
line-height:22px;
border:0;
outline:none;
text-align:center;
font-weight:700;
background:transparent;
cursor:text;
border-radius:0;
box-shadow:none;
font-variant-numeric:normal;
}
.deal-row .qty button{
--btn-base:#ccf;
--btn-border:transparent;
--btn-pulse:rgba(99,102,241,.14);
width:22px;
height:22px;
min-width:22px;
border:none;
border-radius:1rem;
padding:0;
box-shadow:none;
outline:none;
}
.deal-row.row-top-deal .qty button{
--btn-base:#fcc;
--btn-pulse:rgba(249,115,22,.12);
color:#f70;
}
.deal-row .qty button:hover{
--btn-hi:rgba(255,255,255,.22);
filter:brightness(1.01);
}
.deal-row .qty button:focus{
outline:none;
}
.deal-row .qty button:focus-visible{
box-shadow:0 0 0 2px rgba(99,102,241,.28);
}
.deal-row .qty button::before{
width:10px;
height:2px;
border-radius:999px;
}
.deal-row .qty button.plus::after{
width:2px;
height:10px;
border-radius:999px;
}
.btn-buy{
text-wrap:nowrap; padding:.5rem .7rem; font-size:.9rem;
border:none;
background:#eef; cursor:pointer;border-radius:1rem;
}
.row-top-deal .btn-buy{background:#fee}
.deal-row .deal-actions{
display:flex;
align-items:center;
gap:6px;
flex:0 0 auto;
margin-left:auto;
min-width:0;
}
.deal-row .deal-actions .btn-buy{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
}
.deal-row .deal-actions .btn-buy[hidden]{
display:none !important;
}
.deal-row .cart-line-subtotal[hidden]{
display:none !important;
}
.deal-row .cart-line-subtotal{
--cart-subtotal-chars:9ch;
--cart-subtotal-pad-x:.8rem;
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:0;
flex:0 0 calc(var(--cart-subtotal-chars) + (var(--cart-subtotal-pad-x) * 2));
width:calc(var(--cart-subtotal-chars) + (var(--cart-subtotal-pad-x) * 2));
min-width:calc(var(--cart-subtotal-chars) + (var(--cart-subtotal-pad-x) * 2));
min-height:32px;
padding:.5rem var(--cart-subtotal-pad-x);
border-radius:1rem;
background:#eef;
color:inherit;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.deal-row .cart-line-subtotal__value{
display:block;
width:100%;
text-align:right;
font-size:.9rem;
color:#0f172a;
}
.deal-row .btn-cart-remove[hidden]{
display:none !important;
}
.deal-row .btn-cart-remove{
width:32px;
height:32px;
min-width:32px;
padding:0;
border:none;
border-radius:1rem;
background:#eef;
color:inherit;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:none;
cursor:pointer;
transition:transform .12s ease, filter .16s ease, background .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.deal-row .btn-cart-remove__icon{
width:15px;
height:15px;
flex:0 0 15px;
display:block;
color:currentColor;
}
.deal-row .btn-cart-remove:hover{
filter:brightness(1.02);
}
.deal-row .btn-cart-remove:active{
transform:scale(.97);
}
.deal-row .btn-cart-remove:focus{
outline:none;
}
.deal-row .btn-cart-remove:focus-visible{
box-shadow:0 0 0 2px rgba(99,102,241,.18);
}
.deal-row .btn-cart-remove.is-busy{
opacity:.7;
cursor:progress;
pointer-events:none;
}
.deal-row.row-top-deal .btn-cart-remove{
background:#fee;
}
.deal-row.row-top-deal .cart-line-subtotal{
background:#fee;
}
.deal-row.row-top-deal .btn-cart-remove:focus-visible{
box-shadow:0 0 0 2px rgba(249,115,22,.18);
}
@media (max-width:720px){
.deal-row .deal-actions{
flex:1 1 auto;
margin-left:0;
gap:10px;
}
.deal-row .deal-actions .btn-buy{
flex:1 1 auto;
min-height:44px;
}
.deal-row .cart-line-subtotal{
--cart-subtotal-pad-x:1rem;
min-height:44px;
justify-content:flex-end;
padding:.8rem var(--cart-subtotal-pad-x);
border-radius:12px;
}
.deal-row .cart-line-subtotal__value{
font-size:1rem;
}
.deal-row .btn-cart-remove{
width:44px;
height:44px;
min-width:44px;
border-radius:12px;
}
.deal-row .btn-cart-remove__icon{
width:18px;
height:18px;
flex-basis:18px;
}
}
.row-details{
position:relative; z-index:1;
overflow:hidden; height:0; opacity:0; transform:translateY(-4px);
margin:0 0 4px 0; padding:0 12px;
border-left:3px solid rgba(71,75,255,.18); border-radius:10px; background:#fff; color:var(--text);
transition:height .24s ease, opacity .2s ease, transform .24s ease, padding .24s ease;
}
.row-details.open{ opacity:1; transform:translateY(0); padding:8px 12px 10px; }
/* Offer sublist (expanded offers under the main row) */
.row-details.offer-details{
border-left:0;
background:transparent;
padding:0;
margin:0;
}
.row-details.offer-details.open{ padding:0; }
.row-details.offer-details .offer-details-inner{
display:flex;
flex-direction:column;
gap:6px;
padding:6px 0 6px 32px;
}
.row-details.offer-details.open + .deal-row{ margin-top:0; }
.row-details.offer-details .deal-row{ margin:0; }
/* Tooltips for price/brand/stock/ETA */
[data-tip]{ position:relative; }
[data-tip]::after{
content:attr(data-tip);
position:absolute; left:50%; bottom:calc(100% + 8px);
transform:translateX(-50%) translateY(6px);
background:#0f172a; color:#fff; font-size:12px; line-height:1; padding:7px 9px; border-radius:8px;
box-shadow:0 8px 18px rgba(2,6,23,.24);
pointer-events:none; white-space:nowrap; opacity:0; transition:opacity .15s, transform .15s; z-index:20;
}
[data-tip]::before{
content:""; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
border:6px solid transparent; border-top-color:#0f172a; border-bottom:0; margin-bottom:2px;
opacity:0; transition:opacity .15s;
}
[data-tip]:hover::after,[data-tip]:hover::before,
[data-tip]:focus-visible::after,[data-tip]:focus-visible::before{
opacity:1; transform:translateX(-50%) translateY(0);
}
/* ---- filter popovers ---- */
/* ───────── Trigger buttons ───────── */
.new_filterbar{ display:flex; gap:8px; }
.new_filter-btn{
position:relative; display:inline-flex; align-items:center; gap:8px;
padding:8px 12px; border-radius:var(--radius);
font:400 .85rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
color:#0f172a; border:1px solid rgba(15,23,42,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(2,6,23,.06);
cursor:pointer; transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.new_filter-btn::after{
content:""; width:14px; height:14px; margin-left:2px; flex:0 0 14px;
background-repeat:no-repeat; background-position:center; background-size:14px 14px;
/* down chevron, stays dark even on hover/open */
background-image:url('data:image/svg+xml;utf8,');
transition:transform .18s;
}
.new_filter-btn:hover,
.new_filter-btn.is-open{ border-color:var(--primary,#66f); }
.new_filter-btn.is-open::after{ rotate(180deg); }
.new_filter-select-wrap{
position:relative;
display:inline-flex;
align-items:center;
flex:0 0 auto;
}
.new_filter-select-wrap::after{
content:"";
position:absolute;
right:12px;
top:50%;
width:14px;
height:14px;
transform:translateY(-50%);
pointer-events:none;
background-repeat:no-repeat;
background-position:center;
background-size:14px 14px;
background-image:url('data:image/svg+xml;utf8,');
}
.new_filter-select{
appearance:none;
-webkit-appearance:none;
display:inline-flex;
align-items:center;
min-height:38px;
padding:8px 34px 8px 12px;
border-radius:var(--radius);
font:400 .85rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
color:#0f172a;
border:1px solid rgba(15,23,42,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(2,6,23,.06);
cursor:pointer;
transition:transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.new_filter-select:hover,
.new_filter-select:focus{
outline:none;
border-color:var(--primary,#66f);
box-shadow:0 0 0 3px rgba(99,102,241,.12), inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(2,6,23,.06);
}
.new_filter-btn--muted{
background:#f8fafc;
color:#475569;
}
#new_sortBtn .new_sort_prefix{ opacity:.72; font-weight:400; }
#new_sortBtn .new_sort_value{ font-weight:500; }
/* ───────── Popover shell + partial indigo wash ───────── */
.new_popover{
position:fixed; z-index:99999;
width:400px; max-width:calc(100vw - 24px);
padding:14px 16px 14px; border-radius:16px; color:#0f172a;
border:1px solid rgba(99,102,241,.35);
/* top/edge accents only; base stays white */
background:
radial-gradient(60% 45% at 50% -20%, rgba(99,102,241,.22), rgba(99,102,241,0) 65%),
radial-gradient(70% 45% at 105% 0%, rgba(79,70,229,.16), rgba(79,70,229,0) 65%),
linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
box-shadow:0 18px 46px rgba(2,6,23,.18), 0 2px 0 rgba(255,255,255,.85) inset;
will-change:transform,opacity;
transition: opacity .18s cubic-bezier(.22,.75,.25,1),
transform .18s cubic-bezier(.22,.75,.25,1);
transform-origin: top center;
opacity:0; transform:translateY(-8px) scale(.98);
pointer-events:none;
}
.new_popover[data-placement="top"]{
transform-origin: bottom center;
opacity:0; transform:translateY(8px) scale(.98);
}
.new_popover.show{
opacity:1; transform:translateY(0) scale(1);
pointer-events:auto;
}
.new_popover.closing{
transition-duration:.18s;
transition-timing-function:cubic-bezier(.20,.70,.20,1);
}
.new_pop_headbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.new_pop_head{ font-weight:900; font-size:16px; color:#0f172a }
.new_clear{ background:none; border:0; color:#4f46e5; font-weight:900; cursor:pointer; padding:6px 8px; border-radius:10px; }
.new_clear:hover{ background:rgba(79,70,229,.08); }
/* ───────── Range layout ───────── */
.new_popover .new_range{ position:relative; height:86px; padding-top:46px; }
.new_popover .range .range-labels{
position:absolute; left:0; right:0; top:0;
display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.new_popover .range .range-labels .val-input{
min-height:36px; padding:0 12px; border-radius:12px;
background:#fff; border:1px solid #e5e7eb; font-weight:900; color:#0f172a;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
outline:none; width:100%;
font:inherit; line-height:36px;
text-align:left;
}
.new_popover .range .range-labels .val-input.right{ text-align:right; }
.new_popover .range .range .val-input:focus{
border-color:#66f; box-shadow:0 0 0 3px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.75);
}
.new_popover .range .track{
position:absolute; left:0; right:0; top:62px; height:8px; background:#e5e7eb; border-radius:999px;
}
.new_popover .range .range-bar{
position:absolute; top:62px; height:8px; border-radius:999px;
background:linear-gradient(90deg,#66f, #4f46e5); transform-origin:left center;
will-change:transform;
}
.new_popover .range input[type="range"]{
position:absolute; left:0; right:0; top:52px; height:28px; margin:0; background:transparent;
pointer-events:none; -webkit-appearance:none; appearance:none;
}
.new_popover .range input[type="range"]::-webkit-slider-runnable-track{ height:28px; background:transparent }
.new_popover .range input[type="range"]::-moz-range-track{ height:28px; background:transparent }
/* Thumb with downward chevron */
.new_popover .range input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; pointer-events:auto; cursor:pointer;
width:24px; height:24px; border-radius:999px; background:#fff; border:2px solid #66f;
box-shadow:0 2px 8px rgba(2,6,23,.18);
background-position:center; background-repeat:no-repeat; background-size:14px 14px;
background-image:url('data:image/svg+xml;utf8,');
}
.new_popover .range input[type="range"]::-moz-range-thumb{
width:24px; height:24px; border-radius:999px; background:#fff; border:2px solid #66f;
box-shadow:0 2px 8px rgba(2,6,23,.18);
background-position:center; background-repeat:no-repeat; background-size:14px 14px;
background-image:url('data:image/svg+xml;utf8,');
}
.new_popover .range input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 6px rgba(99,102,241,.18), 0 2px 8px rgba(2,6,23,.18); }
.new_popover .range input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 6px rgba(99,102,241,.18), 0 2px 8px rgba(2,6,23,.18); }
/* ───────── Animations ───────── */
@keyframes popIn{ from{ opacity:0; transform:translateY(-8px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }
@keyframes popOut{ from{ opacity:1; transform:translateY(0) scale(1) } to{ opacity:0; transform:translateY(-6px) scale(.98) } }
.anim-in{ animation:popIn .18s cubic-bezier(.22,.75,.25,1) forwards; }
.anim-out{ animation:popOut .14s cubic-bezier(.22,.75,.25,1) forwards; }
@media (max-width:520px){ .new_popover{ width:calc(100vw - 20px) } }
/* --- Sort dropdown --- */
.new_opts{ display:grid; gap:12px; }
.new_sort_popover{
width:240px; /* fallback, JS sets width when opening */
padding:8px;
border-radius:14px;
border:1px solid rgba(15,23,42,.12);
background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
box-shadow:0 16px 38px rgba(2,6,23,.16), 0 2px 0 rgba(255,255,255,.85) inset;
}
.new_sort_list{ display:grid; gap:6px; }
.new_sort_item{ display:block; position:relative; }
.new_sort_item input{ position:absolute; opacity:0; pointer-events:none; }
.new_sort_row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 12px; border-radius:12px;
background:transparent; color:#0f172a; border:1px solid #0000;
cursor:pointer; user-select:none;
font:400 .85rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
transition:background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.new_sort_row::after{
content:"";
width:16px; height:16px; flex:0 0 16px;
background-repeat:no-repeat; background-position:center; background-size:16px 16px;
opacity:0; transform:scale(.9);
background-image:url('data:image/svg+xml;utf8,');
transition:opacity .15s, transform .15s;
}
.new_sort_item:hover .new_sort_row{
background:rgba(99,102,241,.08);
border-color:rgba(99,102,241,.35);
}
.new_sort_item input:checked + .new_sort_row{
background:rgba(99,102,241,.12);
border-color:rgba(99,102,241,.55);
}
.new_sort_item input:checked + .new_sort_row::after{ opacity:1; transform:scale(1); }
.new_sort_item input:focus-visible + .new_sort_row{
outline:2px solid var(--primary,#66f);
outline-offset:2px;
}
/* Segmented control for Asc/Desc */
.seg{
display:inline-grid; grid-auto-flow:column; gap:0; border-radius:12px; overflow:hidden;
border:1px solid #e5e7eb; background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.seg input{ position:absolute; pointer-events:none; opacity:0; }
.seg label{
padding:8px 12px; cursor:pointer; font-weight:900; user-select:none;
border-right:1px solid #e5e7eb;
}
.seg label:last-of-type{ border-right:0; }
.seg input:checked + label{
background:linear-gradient(180deg,#eef2ff,#e0e7ff);
color:#3730a3; border-right-color:#c7d2fe;
}
.new_filter-btn.group-left{ border-top-right-radius:0; border-bottom-right-radius:0; }
.new_filter-btn.group-right{
border-top-left-radius:0; border-bottom-left-radius:0;
margin-left:-1px; /* seamless border join */
position:relative;
}
/* remove chevron caret on the toggle */
.new_filter-btn.no-caret::after{ content:none; display:none; }
/* Hide 'Asc/Desc' text on the direction toggle */
#new_dirToggle .dir-txt{ display:none; }
#new_dirToggle{
border-left-color:rgba(15,23,42,.12);
}
/* Icon container */
#new_dirToggle .ico-dir{
position:relative; width:16px; height:16px; flex:0 0 16px;
}
#new_dirToggle:hover{ border-color:var(--primary,#66f);
}
/* Shared layer styles */
#new_dirToggle .ico-dir::before,
#new_dirToggle .ico-dir::after{
content:"";
position:absolute; inset:0;
background-repeat:no-repeat; background-position:center; background-size:16px 16px;
transition:opacity .18s ease, transform .18s ease;
}
/* DESC (long→short) */
#new_dirToggle .ico-dir::before{
background-image:url("data:image/svg+xml;utf8,");
opacity:1; transform:translateY(0);
}
/* ASC (short→long) */
#new_dirToggle .ico-dir::after{
background-image:url("data:image/svg+xml;utf8,");
opacity:0; transform:translateY(2px);
}
/* Toggle -> ASC */
#new_dirToggle.is-asc .ico-dir::before{ opacity:0; transform:translateY(-2px); }
#new_dirToggle.is-asc .ico-dir::after { opacity:1; transform:translateY(0); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
#new_dirToggle .ico-dir::before,
#new_dirToggle .ico-dir::after{ transition:none; }
}
/* ---- cubes background ---- */
:root{
--cube-color:#474BFF;
--cube-min:10px;
--cube-max:22px;
}
#bg-cubes{
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
overflow:hidden;
}
#bg-cubes .cube{
--size:14px;
position:absolute;
width:var(--size);
height:var(--size);
opacity:0;
border-radius:3px;
background:var(--cube-color);
animation:cubePulse var(--dur,7s) ease-in-out var(--delay,0s) infinite;
box-shadow:0 0 0 1px color-mix(in oklab, var(--cube-color) 20%, transparent) inset;
}
#bg-cubes .cube.outline{
background:transparent;
box-shadow:none;
border:1px solid color-mix(in oklab, var(--cube-color) 28%, white);
}
@keyframes cubePulse{
0%, 100% { opacity:0; }
45%, 55% { opacity:.3; }
}
@media (prefers-reduced-motion:reduce){
#bg-cubes .cube{
animation:none;
opacity:.14;
}
}