/* Fonts (unchanged) */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap'); /* ========================================================= 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); --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:901px){ body{ overflow:hidden; 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; } .exoBase{ pointer-events:auto; width:min(480px,calc(100% - 32px)); position:relative; 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) } .exoMain{padding:3rem 2rem 2rem} .exoMain>svg{width:40px; height:40px; margin-bottom:8px} .auth-close{ position:absolute; top:14px; right:14px; 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; } .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)}} .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%)}} #terms{font-size:.85rem; color:#64748b; padding:16px 24px; line-height:1.4; margin:1rem -24px -24px} #terms a{color:var(--primary,#474BFF); text-decoration:none} #terms a:hover{text-decoration:underline} @media (max-width:520px){ .exoBase{width:calc(100% - 24px); margin:12px} .exoMain{padding:16px 20px 20px} .exoSub h1{font-size:1.3rem} #categoryGrid{grid-template-columns:repeat(2,1fr)} } .site-header{ position:relative; z-index:1100; isolation:isolate; } .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{ max-width:1500px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.6); backdrop-filter:blur(8px); 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;} @media (min-width:901px){ /* True horizontal centering regardless of left/right content widths. */ .nav-links{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } } .nav-links{ gap:8px; padding:4px; background:#ffffff; border:1px solid #e5e7eb; border-radius:999px } .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} .nav-actions{display:flex; align-items:center; gap:10px} /* Keep dropdowns above the featured filter dock (avoids "blurred" menu items). */ #navFeatureDock{ position:relative; z-index:10; } /* 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:180px; 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[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: remove the pill outlines for top-right actions (Cart / Español / Profile). */ @media (min-width:901px){ #navActions #cartBtn, #navActions #langToggle, #navActions #profileMenu .profile-menu__btn{ border:0 !important; box-shadow:none !important; } #navActions #cartBtn:focus, #navActions #langToggle:focus, #navActions #profileMenu .profile-menu__btn:focus{ outline:none; } #navActions #cartBtn:focus-visible, #navActions #langToggle:focus-visible, #navActions #profileMenu .profile-menu__btn:focus-visible{ outline:none; box-shadow:0 0 0 5px var(--ring) !important; } } .nav-main a{ color:var(--text); text-decoration:none; font-weight:700; opacity:.9; transition:opacity var(--speed), background var(--speed), color var(--speed); padding:8px 12px; border-radius:999px } .nav-main a:hover{opacity:1; background:#f3f4f6} .nav-main a.active{background:linear-gradient(135deg,var(--primary),var(--primary-600)); color:#fff; opacity:1} .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:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:8px 16px 16px; background:rgba(255,255,255,.72); backdrop-filter:blur(8px); } .nav-feature-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 16px; border-radius:999px; border:1px solid #e5e7eb; background:#ffffff; color:var(--text); font-weight:700; transition:background var(--speed), color var(--speed), box-shadow var(--speed), border-color var(--speed); cursor:pointer; } .nav-feature-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; padding:2px 6px; border-radius:999px; font-size:12px; font-weight:700; line-height:1; background:rgba(79,70,229,.12); color:#4f46e5; transition:background var(--speed), color var(--speed), opacity var(--speed); } .nav-feature-btn:hover, .nav-feature-btn:focus-visible{ border-color:#c7d2fe; box-shadow:0 6px 16px rgba(79,70,229,.15); } .nav-feature-btn.is-active, .nav-feature-btn[aria-pressed="true"]{ background:linear-gradient(135deg,var(--primary),var(--primary-600)); border-color:transparent; color:#ffffff; box-shadow:0 10px 24px rgba(79,70,229,.25); } .nav-feature-btn.is-active .nav-feature-count, .nav-feature-btn[aria-pressed="true"] .nav-feature-count{ background:rgba(255,255,255,.28); color:#ffffff; } .nav-feature-btn.is-empty .nav-feature-count{ opacity:.5; } /* Mobile nav */ @media (max-width:900px){ 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{ --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; } .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%; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; transition:gap .22s cubic-bezier(.2,.85,.2,1); } 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:12px; right:12px; top:auto; bottom:calc(var(--btf-vv-bottom, 0px) + var(--btf-mobile-dock-float) + var(--btf-mobile-header-h) + env(safe-area-inset-bottom) + 12px); z-index:1200; transform:none; max-height:calc(100dvh - var(--btf-mobile-header-h) - env(safe-area-inset-bottom) - 24px); overflow:auto; border-radius:16px; padding:14px; gap:12px; flex-direction:column; border:1px solid rgba(99,102,241,.25); background: radial-gradient(60% 50% at 50% -20%, rgba(99,102,241,.14), transparent 65%), linear-gradient(180deg,#ffffff, #fbfbff); box-shadow:0 24px 60px rgba(2,6,23,.12); } .nav-links.open{display:flex} .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{ display:none; } #navLinks .nav-main + .nav-section{ padding-top:0; border-top:0; } .nav-section{ width:100%; display:grid; gap:10px; padding-top:12px; 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 #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{ padding:0; background:transparent; backdrop-filter:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; justify-content:stretch; } #menuFiltersSlot .nav-feature-btn{ width:100%; justify-content:space-between; height:42px; border-radius:14px; padding:0 12px; } #menuFiltersSlot .nav-feature-count{ min-width:26px; padding:2px 8px; } } .wrap{ margin:0 auto; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; width:100%; position:relative; border-top-right-radius:2rem; border-top-left-radius:2rem; z-index:0; } .wrap::before{ content:""; position:absolute; inset:0; background:#eee; border-top-right-radius:2rem; border-top-left-radius:2rem; z-index:-1; } .wrap-scroll{ flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:visible; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; } #browseSection{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } .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; } .browse-main #grid{ flex:1 1 auto; min-width:0; min-height:0; overflow:auto; } .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; } #ordersSection, #checkoutSection{ flex:1 1 auto; min-height:0; overflow:auto; padding:2rem clamp(1.5rem, 5vw, 4rem); } @media (max-width:900px){ /* 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; } #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: avoid clipping by stacking earlier ===================== */ /* Grid areas keep layout predictable and easy to reshuffle */ .bar{ display:flex; align-items:center; gap:10px; margin: 0 4rem 1rem; flex-wrap:wrap; } #pager2{ grid-area:pager; } .new_filterbar{ grid-area:filters; display:flex; gap:8px; flex-wrap:nowrap;} #exeBtn{ grid-area:export; justify-self:end; } .bar > *{ min-width:0; } /* allow shrinking instead of overflow */ .bar-search{ grid-area:search; flex:1 1 240px; display:flex; } .bar-search .search{ width:100%; min-width:0; height:auto; padding:8px 12px; border-radius:var(--radius); font:400 .85rem system-ui,-apple-system,Segoe UI,Roboto,sans-serif; border:1px solid #0000; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(2,6,23,.06); } .bar-search .search:hover{ border-color:var(--primary,#66f); } .bar-search .search:focus{ border-color:var(--primary,#66f); box-shadow:0 0 0 3px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(2,6,23,.06); } .new_filter-btn{ white-space:nowrap; flex:0 0 auto; } /* keep chip widths tidy */ .new_sort_group{ display:flex} @media (max-width:900px){ /* Mobile: keep browse controls inside the Menu panel */ #browseSection > .mfg-carousel, #browseSection > .cat-carousel, #browseSection > .bar, #browseSection > #filtersBlock{ display:none; } #menuBrowseSlot .bar{ margin:0; display:grid; grid-template-columns: 1fr auto; grid-template-areas: "filters actions" "pager pager"; gap:8px; align-items:center; } #menuBrowseSlot #pager2{ grid-area:pager; justify-self:center; } #menuBrowseSlot .new_filterbar{ grid-area:filters; width:100%; overflow-x:auto; overflow-y:hidden; padding:2px 0; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #menuBrowseSlot .new_filterbar::-webkit-scrollbar{ display:none; } /* Search already exists in the dedicated mobile search dock. */ #menuBrowseSlot .bar-search{ display:none; } #menuBrowseSlot #filtersBtn{ grid-area:actions; display:inline-flex !important; align-self:stretch; justify-self:end; } #menuBrowseSlot .mfg-stage{ padding:10px 0; } #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){ #menuBrowseSlot .new_filter-btn{ padding:7px 10px; font-size:.82rem; } #menuBrowseSlot .bar-search .search{ padding:7px 10px; font-size:.82rem; } #menuBrowseSlot #filtersBtn{ padding:7px 10px; font-size:.82rem; } #menuBrowseSlot .pager{ gap:6px; } #menuBrowseSlot .pager button{ padding:.5rem .65rem; font-size:.82rem; } } @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:900px){ .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:transparent; } #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 } .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-sm{ width:54px; height:32px; text-align:center; border:1px solid #e5e7eb; background:#ffffff; color:#0f172a; outline:none; border-radius:.5rem; } #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 .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:900px){ #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(5)::before{content:none} #checkoutSection .cart-table td:nth-child(2), #checkoutSection .cart-table td:nth-child(4){ font-variant-numeric:tabular-nums; font-weight:900; } #checkoutSection .cart-table td:nth-child(5) a.btn{ width:100%; height:40px; border-radius:12px; justify-content:center; } #checkoutSection .qty{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border-radius:999px; background:#f3f4f6; border:1px solid #e5e7eb; } #checkoutSection .qty button{ width:32px; height:32px; border-radius:999px; background:#ffffff; border:1px solid #e5e7eb; 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 .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 0 0 auto; 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: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:12px; position:relative; } .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:12px 4rem; 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:4rem solid transparent; border-right:4rem 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:linear-gradient(180deg, var(--card), var(--card-2)); color:var(--text); border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .2s ease, filter .2s ease, opacity .2s ease, border-color .2s ease, box-shadow .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;right:10px;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:0 14px 32px rgba(99,102,241,.28), 0 0 0 2px rgba(99,102,241,.26), inset 0 1px 0 rgba(255,255,255,.8); } .mfg-card.is-visible:hover{ filter:brightness(1.03) } .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; } /* 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; } .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; } /* 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-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; } .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.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 .price, .deal-row .stock{ width:auto; text-align:left; display:flex; flex-direction:column; gap:2px; align-items:flex-start; } .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 .stock{ font-weight:800; } .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{ width:44px; height:var(--qty-size); line-height:var(--qty-size); border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px rgba(71,75,255,.18); } .deal-row .qty button{ --btn-base:#e0e7ff; --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; 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); transition:transform .12s ease, box-shadow .18s ease, filter .18s ease; } .deal-row .qty button:hover{ --btn-hi:rgba(255,255,255,.85); filter:brightness(1.04); } .deal-row .qty button:active{ transform:scale(.96); } .deal-row .qty button.is-pulsing{ animation:btf-qty-pulse .42s ease-out; } .deal-row.row-top-deal .qty button{ color:#f70; --btn-base:#ffe4e6; --btn-border:rgba(249,115,22,.25); --btn-pulse:rgba(249,115,22,.22); } @keyframes btf-qty-pulse{ 0% { transform:scale(1); box-shadow:inset 0 0 0 1px var(--btn-border), 0 0 0 0 var(--btn-pulse); } 45% { transform:scale(1.08); box-shadow:inset 0 0 0 1px var(--btn-border), 0 0 0 6px var(--btn-pulse); } 100% { transform:scale(1); box-shadow:inset 0 0 0 1px var(--btn-border), 0 0 0 0 rgba(0,0,0,0); } } @media (prefers-reduced-motion:reduce){ .deal-row .qty button{ transition:none; } .deal-row .qty button:active{ transform:none; } .deal-row .qty button.is-pulsing{ animation:none; } } .deal-row .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{ content:""; position:absolute; left:50%; top:50%; width:2px; height:14px; transform:translate(-50%,-50%); background:currentColor; border-radius:2px; } } .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} /* ETA icon */ .eta-ico{ width:18px; height:18px; border-radius:999px; display:inline-grid; place-items:center; background:#ccf; border:1px solid #0000; color:#66f; cursor:help;font-size:.78rem; } .eta-ico svg{ width:12px; height:12px; display:block; fill:#66f} .eta-ico svg path{stroke:#66f} .row-top-deal .eta-ico{background:#fcc;color:#f70} .row-top-deal .eta-ico svg{fill:#f70} .row-top-deal .eta-ico svg path{stroke:#f70} .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} .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} .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_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; } }