/*===f/app.css===*//*===assets/css/theme-template-6.css===*/body[data-theme="template-6"]{
--primary:#2f6fdf;--primary-dark:#2059ba;--blue:#2f6fdf;--text:#172033;
--muted:#667085;--border:#dde3ec;--bg:#f7f9fc;--surface:#fff;
--radius:12px;--shadow:0 16px 40px -32px rgba(21,37,65,.42);
color:var(--text);background:#fff;font-variant-numeric:tabular-nums
}
body[data-theme="template-6"] .announcement{min-height:34px;padding:6px 20px;background:linear-gradient(90deg,#0d2b59,#245fd2);font-size:12px;font-weight:650;letter-spacing:0;text-transform:none}
body[data-theme="template-6"] .site-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);border-bottom:1px solid #e7ebf2;box-shadow:0 6px 22px -24px rgba(16,33,60,.8);backdrop-filter:blur(14px) saturate(120%)}
body[data-theme="template-6"] .header-main{min-height:78px;gap:clamp(14px,2vw,25px)}
body[data-theme="template-6"] .logo img{max-width:190px}
body[data-theme="template-6"] .search-form{overflow:hidden;border:1px solid #d9dfe9;border-radius:999px;background:#fff;box-shadow:0 4px 14px -12px rgba(31,54,91,.5)}
body[data-theme="template-6"] .search-form:focus-within{border-color:#78a3ef;box-shadow:0 0 0 4px rgba(47,111,223,.1)}
body[data-theme="template-6"] .search-form button{min-width:58px;border-radius:0;background:#4887f4;color:#fff}
body[data-theme="template-6"] .extra-icon,body[data-theme="template-6"] .nav-act{border-color:#dce3ed;border-radius:12px;background:#f8fafc;color:#172033}
body[data-theme="template-6"] .primary-nav-wrap{border-top:1px solid #edf0f5;border-bottom:1px solid #e5eaf1;background:#fff}
body[data-theme="template-6"] .mf-menu-toggle{border-color:#dbe2ec;border-radius:999px;background:#fff;color:#172033}
body[data-theme="template-6"] .nav-links a{color:#20283a;font-size:14px;font-weight:650}
body[data-theme="template-6"] .nav-links a:hover,body[data-theme="template-6"] .nav-links a.active{color:#2f6fdf}
body[data-theme="template-6"] .btn,body[data-theme="template-6"] .button{border-radius:10px;font-weight:700;transition:.2s ease}
body[data-theme="template-6"] .btn-primary,body[data-theme="template-6"] [data-add]:not(:disabled){border-color:#2f6fdf;background:#2f6fdf;color:#fff;box-shadow:0 12px 24px -18px rgba(47,111,223,.8)}
body[data-theme="template-6"] .btn-primary:hover,body[data-theme="template-6"] [data-add]:not(:disabled):hover{border-color:#2059ba;background:#2059ba;transform:translateY(-1px)}
body[data-theme="template-6"] .th-home{--th-primary:#2f6fdf;--th-ink:#101828;--th-muted:#667085;--th-line:#e1e7ef;background:#fff}
body[data-theme="template-6"] .th-hero{overflow:hidden;border:1px solid #e0e6ef;border-radius:20px;background:linear-gradient(135deg,#f8fbff 0%,#edf4ff 56%,#fff 100%);box-shadow:0 28px 64px -54px rgba(28,73,145,.6)}
body[data-theme="template-6"] .th-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(28,61,108,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(28,61,108,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 20% 10%,#000,transparent 72%)}
body[data-theme="template-6"] .th-hero h1{color:#101828;font-weight:650;letter-spacing:-.035em}
body[data-theme="template-6"] .th-section,body[data-theme="template-6"] .section{padding-block:clamp(30px,5vw,58px)}
body[data-theme="template-6"] .th-product,body[data-theme="template-6"] .product{border:1px solid #e1e6ee;border-radius:14px;background:#fff;box-shadow:0 12px 34px -30px rgba(21,38,67,.58);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
body[data-theme="template-6"] .th-product:hover,body[data-theme="template-6"] .product:hover{border-color:#c9d7eb;box-shadow:0 20px 40px -30px rgba(28,67,130,.55);transform:translateY(-2px)}
body[data-theme="template-6"] .th-product__media,body[data-theme="template-6"] .product-image{background:linear-gradient(145deg,#f7f9fc,#fff)}
body[data-theme="template-6"] .shop-layout{align-items:start;gap:28px}
body[data-theme="template-6"] .shop-layout>.sidebar{border:1px solid #dfe5ed;border-radius:14px;background:#fff;box-shadow:0 18px 40px -38px rgba(18,38,72,.55)}
body[data-theme="template-6"] .widget{border-bottom-color:#e5eaf1}
body[data-theme="template-6"] .widget-title{color:#172033;font-size:15px;letter-spacing:-.01em}
body[data-theme="template-6"] .toolbar{border:1px solid #e0e6ee;border-radius:13px;background:rgba(255,255,255,.95);box-shadow:0 12px 30px -28px rgba(20,37,65,.55)}
body[data-theme="template-6"] .view-btn,body[data-theme="template-6"] .sort-select{border-color:#dbe2ec;background:#fff}
body[data-theme="template-6"] .view-btn.active{border-color:#6f9bea;color:#2f6fdf;box-shadow:0 0 0 3px rgba(47,111,223,.08)}
body[data-theme="template-6"] .products.view-list .product{min-height:86px;padding:12px 18px;border-radius:12px}
body[data-theme="template-6"] .pd-layout,body[data-theme="template-6"] .cart-layout,body[data-theme="template-6"] .checkout-layout,body[data-theme="template-6"] .account-layout{gap:24px}
body[data-theme="template-6"] .pd-gallery,body[data-theme="template-6"] .pd-summary,body[data-theme="template-6"] .cart-table,body[data-theme="template-6"] .cart-totals,body[data-theme="template-6"] .checkout-section,body[data-theme="template-6"] .account-panel{border:1px solid #e0e6ee;border-radius:16px;background:#fff;box-shadow:0 18px 42px -38px rgba(17,38,72,.55)}
body[data-theme="template-6"] .mini-cart-content{border:1px solid #dce3ec;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 28px 70px -32px rgba(16,34,66,.55);backdrop-filter:blur(18px)}
body[data-theme="template-6"] .mc-head{border-bottom-color:#e4e9f0}
body[data-theme="template-6"] .mc-item{border-bottom-color:#edf0f4}
body[data-theme="template-6"] .mc-qty{border-color:#dbe3ee;background:#f8fafc}
body[data-theme="template-6"] .site-footer{margin-top:60px;border-top:1px solid #dfe5ed;background:#101a2c;color:#dbe5f5}
body[data-theme="template-6"] .site-footer a{color:#c8d8f0}
body[data-theme="template-6"] .site-footer h4{color:#fff}
body[data-theme="template-6"] .footer-bottom{border-top-color:rgba(255,255,255,.1);color:#91a3bf}
body[data-theme="template-6"] .ferry-main-home{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,3vw,28px)}
body[data-theme="template-6"] .ferry-main-home .lp-hero{position:relative;margin-top:18px;background:#f7f9fc;border:1px solid #e3e8ef;border-radius:16px}
body[data-theme="template-6"] .ferry-main-home .lp-lead{color:#5b6779}
body[data-theme="template-6"] .ferry-main-home .lp-product-slider{scroll-behavior:smooth;scrollbar-width:none}
body[data-theme="template-6"] .ferry-main-home .lp-product-slider::-webkit-scrollbar{display:none}
body[data-theme="template-6"] .ferry-main-home .lp-product-media img{width:100%;height:100%;object-fit:contain}
body[data-theme="template-6"] .ferry-main-footer{margin-top:0;background:#0b1220;color:#dce6f4}
body[data-theme="template-6"] .ferry-main-footer .footer-service-strip{border-bottom:1px solid rgba(255,255,255,.12);background:#111d31}
body[data-theme="template-6"] .ferry-main-footer .footer-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:22px}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item{display:flex;align-items:center;gap:13px}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item>svg{width:28px;height:28px;color:#77a7fa;flex:none}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item span{display:flex;flex-direction:column;gap:3px}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item strong{color:#fff;font-size:14px}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item small{color:#91a3bf}
body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:1.7fr repeat(4,1fr);gap:36px;padding-block:48px}
body[data-theme="template-6"] .ferry-main-footer .footer-logo{width:180px;height:auto;margin-bottom:16px;filter:brightness(0) invert(1)}
body[data-theme="template-6"] .ferry-main-footer .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
body[data-theme="template-6"] .ferry-main-footer .footer-links h4{margin:0 0 8px}
body[data-theme="template-6"] .ferry-main-footer .footer-bottom-inner{display:flex;justify-content:space-between;gap:20px;padding-block:18px}
body[data-theme="template-6"] :focus-visible{outline:3px solid rgba(47,111,223,.28);outline-offset:3px}
@media(max-width:900px){body[data-theme="template-6"] .header-main{min-height:64px}body[data-theme="template-6"] .shop-layout{gap:14px}body[data-theme="template-6"] .th-hero{border-radius:15px}body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:repeat(2,1fr)}body[data-theme="template-6"] .ferry-main-footer .footer-brand{grid-column:1/-1}}
@media(max-width:640px){body[data-theme="template-6"] .announcement{font-size:10px}body[data-theme="template-6"] .site-header{position:relative}body[data-theme="template-6"] .products.view-list .product{padding:10px}body[data-theme="template-6"] .site-footer{margin-top:36px}}
@media(max-width:640px){body[data-theme="template-6"] .ferry-main-footer .footer-service-grid,body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:1fr}body[data-theme="template-6"] .ferry-main-footer .footer-brand{grid-column:auto}body[data-theme="template-6"] .ferry-main-footer .footer-bottom-inner{flex-direction:column}}
@media(prefers-reduced-motion:reduce){body[data-theme="template-6"] *,body[data-theme="template-6"] *:before,body[data-theme="template-6"] *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
body .site-footer.footer-slim{background:#ffffff;color:#3c4450;border-top:1px solid #e3e8f0;margin-top:40px}
body .site-footer.footer-slim .footer-widgets{padding-top:34px;padding-bottom:26px}
body .site-footer.footer-slim .footer-col h4{color:#101a2c}
body .site-footer.footer-slim .footer-col a{color:#4a5568}
body .site-footer.footer-slim .footer-col a:hover{color:#2563eb}
body .site-footer.footer-slim .footer-col p,body .site-footer.footer-slim .footer-col li{color:#667085;font-size:13px;line-height:1.7}
body .site-footer.footer-slim .footer-col ul{list-style:none;margin:0;padding:0}
body .site-footer.footer-slim .footer-col ul li{margin-bottom:8px}
body .site-footer.footer-slim .footer-bottom{background:transparent;border-top:1px solid #eef1f6;color:#98a2b3;padding:14px 0;font-size:12px;text-align:center}
/*===assets/css/ferry-main-frontend.css===*/body[data-theme="template-6"] main{min-height:52vh}
body[data-theme="template-6"] .breadcrumb{max-width:1180px;margin:0 auto;padding:22px 0 12px;color:#768197;font-size:12px}
body[data-theme="template-6"] .breadcrumb a{color:#52627c;text-decoration:none}
body[data-theme="template-6"] .breadcrumb a:hover{color:#2f6fdf}
body[data-theme="template-6"] .ferry-main-catalog{max-width:1180px;margin:0 auto;padding-bottom:70px;grid-template-columns:270px minmax(0,1fr)}
body[data-theme="template-6"] .ferry-main-catalog>.sidebar{position:sticky;top:132px;max-height:calc(100vh - 150px);overflow:hidden}
body[data-theme="template-6"] .ferry-main-catalog .sidebar-body{max-height:calc(100vh - 152px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9b9ce transparent}
body[data-theme="template-6"] .ferry-main-catalog .sidebar-inner{padding:6px 17px 16px}
body[data-theme="template-6"] .ferry-main-catalog .widget{padding:17px 0}
body[data-theme="template-6"] .ferry-main-catalog .widget-title{margin:0 0 13px;padding-bottom:11px;border-bottom:1px solid #e8ecf2;font-size:14px;text-transform:uppercase;letter-spacing:.075em}
body[data-theme="template-6"] .cat-filter-list,body[data-theme="template-6"] .attr-list,body[data-theme="template-6"] .stock-filter-list{display:grid;gap:5px}
body[data-theme="template-6"] .cat-filter-item label,body[data-theme="template-6"] .attr-option,body[data-theme="template-6"] .stock-filter-item label{min-height:37px;padding:5px 7px;border-radius:8px;color:#364157;font-size:13px;transition:.16s ease}
body[data-theme="template-6"] .cat-filter-item label:hover,body[data-theme="template-6"] .attr-option:hover,body[data-theme="template-6"] .stock-filter-item label:hover{background:#f2f6fc;color:#1d4f9f}
body[data-theme="template-6"] .cat-filter-thumb{width:28px;height:28px;border:1px solid #e2e7ef;border-radius:7px;background:#f8fafc}
body[data-theme="template-6"] .cat-filter-thumb img{width:100%;height:100%;object-fit:contain}
body[data-theme="template-6"] .ferry-main-catalog .toolbar{position:sticky;top:113px;z-index:8;min-height:68px;padding:12px 16px}
body[data-theme="template-6"] .result-count{font-weight:700;color:#25324a}
body[data-theme="template-6"] .products.view-list{display:grid;gap:9px}
body[data-theme="template-6"] .products.view-list .product{grid-template-columns:70px minmax(260px,1fr) 140px 115px 128px;column-gap:17px}
body[data-theme="template-6"] .products.view-list .product-image{width:64px;height:64px;border-radius:9px}
body[data-theme="template-6"] .products.view-list .product-title{font-size:14px;font-weight:700;color:#182238}
body[data-theme="template-6"] .load-more{min-width:230px;padding:12px 28px;border:1px solid #9db2cf;border-radius:999px;background:#fff;color:#234774;box-shadow:0 10px 24px -22px #173a68}
body[data-theme="template-6"] .load-more:hover{border-color:#2f6fdf;color:#1f5fc8;transform:translateY(-1px)}
body[data-theme="template-6"] .cat-group{margin:20px 0 38px;padding:22px;border:1px solid #e2e7ef;border-radius:16px;background:#fff}
body[data-theme="template-6"] .cat-grid{gap:12px}
body[data-theme="template-6"] .cat-tile{border:1px solid #e5e9f0;border-radius:12px;background:#fafbfd;transition:.18s ease}
body[data-theme="template-6"] .cat-tile:hover{border-color:#b8c9e2;background:#fff;box-shadow:0 18px 36px -30px #1d467d;transform:translateY(-2px)}
body[data-theme="template-6"] .ferry-main-product-detail{max-width:1180px;margin:8px auto 30px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);gap:44px;padding:30px;border:1px solid #e1e6ed;border-radius:18px;background:#fff;box-shadow:0 26px 55px -46px #163762}
body[data-theme="template-6"] .ferry-main-product-detail .gallery{display:grid;grid-template-columns:74px minmax(0,1fr);gap:15px}
body[data-theme="template-6"] .ferry-main-product-detail .main-image{grid-column:2;grid-row:1;min-height:480px;border:1px solid #e7eaf0;border-radius:14px;background:#fafbfc}
body[data-theme="template-6"] .ferry-main-product-detail .main-image img{width:100%;height:480px;object-fit:contain;padding:24px}
body[data-theme="template-6"] .ferry-main-product-detail .thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:9px}
body[data-theme="template-6"] .ferry-main-product-detail .thumbs img{width:70px;height:70px;object-fit:contain;padding:5px;border:1px solid #e1e6ed;border-radius:9px;background:#fff}
body[data-theme="template-6"] .ferry-main-product-detail .thumbs img.active{border-color:#2f6fdf;box-shadow:0 0 0 3px rgba(47,111,223,.1)}
body[data-theme="template-6"] .ferry-main-product-detail .summary{padding:12px 4px}
body[data-theme="template-6"] .product_title{margin:0 0 12px;color:#111b2e;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.035em}
body[data-theme="template-6"] .price-big{margin:26px 0 17px;font-size:30px;font-weight:800;color:#15355f}
body[data-theme="template-6"] .qty-row{margin-top:26px;padding-top:22px;border-top:1px solid #e8ecf1}
body[data-theme="template-6"] .pd-actions{display:flex;gap:10px;margin-top:15px}
body[data-theme="template-6"] .pd-actions .btn{min-height:48px;padding-inline:24px}
body[data-theme="template-6"] .tabs{max-width:1180px;margin:0 auto 34px;border:1px solid #e1e6ed;border-radius:16px;background:#fff;overflow:hidden}
body[data-theme="template-6"] .tabs-nav{padding:0 22px;border-bottom:1px solid #e7ebf1;background:#f8fafc}
body[data-theme="template-6"] .tabs-nav button{padding:17px 18px}
body[data-theme="template-6"] .tab-panel{padding:26px;line-height:1.75;color:#46536a}
body[data-theme="template-6"] .ferry-main-cart,body[data-theme="template-6"] .ferry-main-checkout{max-width:1180px;margin:0 auto;padding-bottom:72px}
body[data-theme="template-6"] .checkout-head{margin:8px 0 22px}
body[data-theme="template-6"] .checkout-head h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.04em;color:#111b2e}
body[data-theme="template-6"] .cart-layout{grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}
body[data-theme="template-6"] .cart-panel,body[data-theme="template-6"] .cart-summary,body[data-theme="template-6"] .checkout-card,body[data-theme="template-6"] .checkout-order{border:1px solid #e0e5ed;border-radius:16px;background:#fff;box-shadow:0 20px 45px -40px #17375f}
body[data-theme="template-6"] .cart-row{padding:18px;grid-template-columns:78px minmax(0,1fr) 125px 110px 34px}
body[data-theme="template-6"] .cart-row__image{width:72px;height:72px;border:1px solid #e6eaf0;border-radius:10px;background:#f8fafc}
body[data-theme="template-6"] .cart-row__name{font-size:14px;color:#152238}
body[data-theme="template-6"] .cart-summary{position:sticky;top:132px;padding:22px}
body[data-theme="template-6"] .cart-checkout,body[data-theme="template-6"] .checkout-place{border-radius:10px;background:#2f6fdf;box-shadow:0 16px 26px -20px #144eaa}
body[data-theme="template-6"] .checkout-layout{grid-template-columns:minmax(0,1fr) 390px;gap:24px;align-items:start}
body[data-theme="template-6"] .checkout-main{display:grid;gap:15px}
body[data-theme="template-6"] .checkout-card{padding:23px}
body[data-theme="template-6"] .checkout-card__head{margin-bottom:18px}
body[data-theme="template-6"] .checkout-card__head h2{font-size:17px}
body[data-theme="template-6"] .checkout-field input,body[data-theme="template-6"] .checkout-field select{min-height:48px;border:1px solid #dfe5ed;border-radius:9px;background:#fbfcfe}
body[data-theme="template-6"] .checkout-field input:focus,body[data-theme="template-6"] .checkout-field select:focus{border-color:#6f9dec;box-shadow:0 0 0 4px rgba(47,111,223,.09)}
body[data-theme="template-6"] .checkout-order{position:sticky;top:132px;padding:22px}
body[data-theme="template-6"] .checkout-gateway{border:1px solid #e0e5ed;border-radius:10px;background:#fbfcfe}
body[data-theme="template-6"] .checkout-gateway:has(input:checked){border-color:#6e9aeb;background:#f4f8ff;box-shadow:0 0 0 3px rgba(47,111,223,.08)}
body[data-theme="template-6"] .ferry-main-account{max-width:1180px;padding-bottom:70px}
body[data-theme="template-6"] .myaccount{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
body[data-theme="template-6"] .myaccount-nav{position:sticky;top:132px;padding:10px;border:1px solid #e0e6ed;border-radius:14px;background:#f8fafc}
body[data-theme="template-6"] .myaccount-nav li{margin:2px 0}
body[data-theme="template-6"] .myaccount-nav a{display:block;padding:11px 13px;border-radius:8px;color:#41516b;font-size:13px;font-weight:650}
body[data-theme="template-6"] .myaccount-nav li.is-active a,body[data-theme="template-6"] .myaccount-nav a:hover{background:#fff;color:#205fca;box-shadow:0 8px 18px -16px #1c497f}
body[data-theme="template-6"] .myaccount-content{min-height:460px;padding:28px;border:1px solid #e0e6ed;border-radius:16px;background:#fff;box-shadow:0 22px 46px -42px #17375e}
body[data-theme="template-6"] .acct-cards{gap:12px}
body[data-theme="template-6"] .acct-card{border:1px solid #e1e7ee;border-radius:12px;background:#f9fbfd}
body[data-theme="template-6"] .acct-form input,body[data-theme="template-6"] .acct-form select,body[data-theme="template-6"] .acct-form textarea{border:1px solid #dfe5ed;border-radius:9px;background:#fbfcfe}
body[data-theme="template-6"] .cms-public{max-width:1180px;padding-bottom:76px}
body[data-theme="template-6"] .cms-public>header{margin:12px 0 28px;padding:34px clamp(22px,5vw,58px);border:1px solid #e0e6ee;border-radius:18px;background:linear-gradient(135deg,#f6f9fd,#eef4fc 60%,#fff)}
body[data-theme="template-6"] .cms-public>header h1{margin:0;font-size:clamp(32px,5vw,54px);letter-spacing:-.045em;color:#111b2e}
body[data-theme="template-6"] .cms-public-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body[data-theme="template-6"] .cms-public-card{overflow:hidden;border:1px solid #e1e6ed;border-radius:14px;background:#fff;box-shadow:0 18px 38px -34px #17385f;transition:.2s ease}
body[data-theme="template-6"] .cms-public-card:hover{transform:translateY(-3px);box-shadow:0 24px 46px -34px #17385f}
body[data-theme="template-6"] .cms-public-card img{aspect-ratio:16/9;object-fit:cover}
body[data-theme="template-6"] .cms-public-card>div{padding:20px}
body[data-theme="template-6"] .cms-public-single{max-width:940px}
body[data-theme="template-6"] .cms-public-single>header{text-align:left}
body[data-theme="template-6"] .cms-public-content{max-width:780px;margin:0 auto;padding:36px clamp(22px,5vw,58px);border:1px solid #e1e6ed;border-radius:16px;background:#fff;color:#3b485e;font-size:16px;line-height:1.8}
body[data-theme="template-6"] .cms-public-content h2,body[data-theme="template-6"] .cms-public-content h3{color:#162138;letter-spacing:-.02em}
@media(max-width:900px){
body[data-theme="template-6"] .ferry-main-catalog{grid-template-columns:1fr}
body[data-theme="template-6"] .ferry-main-catalog>.sidebar,body[data-theme="template-6"] .ferry-main-catalog .toolbar,body[data-theme="template-6"] .cart-summary,body[data-theme="template-6"] .checkout-order,body[data-theme="template-6"] .myaccount-nav{position:static}
body[data-theme="template-6"] .ferry-main-product-detail{grid-template-columns:1fr;gap:24px}
body[data-theme="template-6"] .cart-layout,body[data-theme="template-6"] .checkout-layout{grid-template-columns:1fr}
body[data-theme="template-6"] .myaccount{grid-template-columns:1fr}
body[data-theme="template-6"] .myaccount-nav ul{display:flex;gap:5px;overflow-x:auto}
body[data-theme="template-6"] .myaccount-nav li{flex:none}
body[data-theme="template-6"] .cms-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
body[data-theme="template-6"] .breadcrumb{padding-inline:16px}
body[data-theme="template-6"] .ferry-main-product-detail{margin:0 12px 22px;padding:14px;border-radius:13px}
body[data-theme="template-6"] .ferry-main-product-detail .gallery{display:block}
body[data-theme="template-6"] .ferry-main-product-detail .main-image,body[data-theme="template-6"] .ferry-main-product-detail .main-image img{min-height:300px;height:300px}
body[data-theme="template-6"] .ferry-main-product-detail .thumbs{margin-top:9px;flex-direction:row;overflow-x:auto}
body[data-theme="template-6"] .cart-row{grid-template-columns:60px minmax(0,1fr) 30px}
body[data-theme="template-6"] .cart-row__quantity,body[data-theme="template-6"] .cart-row__total{grid-column:2}
body[data-theme="template-6"] .checkout-card,body[data-theme="template-6"] .checkout-order,body[data-theme="template-6"] .myaccount-content{padding:16px}
body[data-theme="template-6"] .cms-public-grid{grid-template-columns:1fr}
}
/*===assets/themes/ferry-main/integration.css===*/body[data-theme="template-6"] {background:var(--bg-body);color:var(--text-main);font-family:var(--font);font-size:14px}
body[data-theme="template-6"] [hidden]{display:none!important}
body[data-theme="template-6"] .app-header{position:sticky;top:0;z-index:100}
body[data-theme="template-6"] .app-header .header-inner{position:relative;z-index:20;display:flex;align-items:center;overflow:visible}
body[data-theme="template-6"] .app-header .store-mega-menu{z-index:10}
body[data-theme="template-6"] .app-header .logo img{max-height:42px}
body[data-theme="template-6"] .app-header .search-bar{position:relative}
body[data-theme="template-6"] .app-header #search-input{width:100%;box-shadow:none}
body[data-theme="template-6"] .app-header .user-nav{display:flex;align-items:center}
body[data-theme="template-6"] .extras-menu{display:flex;list-style:none;gap:14px;align-items:center;margin:0;padding:0;flex:0 0 auto}
body[data-theme="template-6"] .extras-menu>li{position:relative;margin:0}
body[data-theme="template-6"] .extras-menu>li>a {
position: relative;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
padding: 0;
color: var(--text);
border-radius: 50%;
transition: transform .2s, color .2s, background .2s, border-color .2s, box-shadow .2s;
}
body[data-theme="template-6"] .extras-menu>li>a:hover{color:#fff;background:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 18px rgba(72,135,244,.30)}
body[data-theme="template-6"] .extras-menu .extra-icon{display:flex;align-items:center;justify-content:center;border:0;box-shadow:none;background:none}
body[data-theme="template-6"].fm-signed-in .fm-register{display:none}
body[data-theme="template-6"] .app-header .user-nav .fm-register{padding-inline:22px;white-space:nowrap}
body[data-theme="template-6"] .app-header .fm-register:hover{color:#163a68}
body[data-theme="template-6"] .ferry-announcement{flex:none}
body[data-theme="template-6"] .ferry-announcement__messages{width:100%;font-size:12px}
body[data-theme="template-6"] .store-mega-menu>.container{position:relative}
body[data-theme="template-6"] .b2b-dropdown-overlay{display:block;max-height:70vh;overflow:auto}
body[data-theme="template-6"] .b2b-dropdown-overlay[hidden]{display:none!important}
body[data-theme="template-6"] .b2b-mega-families{display:flex;gap:8px}
body[data-theme="template-6"] .b2b-family-btn{width:auto;flex:none;text-align:center}
body[data-theme="template-6"] .b2b-family-btn.active{background:#edf5ff;color:#2878ed;border-color:#9fc3f3}
body[data-theme="template-6"] .b2b-models-grid{display:block}
body[data-theme="template-6"] .fm-catalog-page{padding-top:0;padding-bottom:40px}
body[data-theme="template-6"] .fm-catalog-page .catalog-layout{margin-top:12px}
body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar{position:sticky;top:135px;max-height:calc(100dvh - 148px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9aa5b5 transparent}
body[data-theme="template-6"] .fm-catalog-page .catalog-main{min-width:0}
body[data-theme="template-6"] .quick-category{cursor:pointer;font-family:inherit;text-align:left}
body[data-theme="template-6"] .quick-category-thumb img{width:100%;height:100%;object-fit:contain}
body[data-theme="template-6"] .fm-catalog-products{display:block}
body[data-theme="template-6"] .b2b-products{width:100%;overflow-x:auto}
body[data-theme="template-6"] .b2b-table{margin:0;width:100%}
body[data-theme="template-6"] .b2b-table .b2b-img-wrap img{max-height:64px}
body[data-theme="template-6"] .fm-results-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 0 12px;font-size:12px}
body[data-theme="template-6"] .fm-results-tools #result-count{margin-right:auto}
body[data-theme="template-6"] .fm-results-tools select{width:auto;max-width:170px;min-height:32px;font-size:12px;padding:4px 10px}
body[data-theme="template-6"] .fm-results-tools .view-btn{padding:5px 10px;font-size:12px}
body[data-theme="template-6"] .catalog-sidebar .catalog-desktop-filters{padding:16px 14px;border-top:1px solid #e2e6ee}
body[data-theme="template-6"] .catalog-sidebar .field select{width:100%;max-width:100%;padding:9px;border:1px solid #dce2eb;border-radius:6px;background:#fff}
body[data-theme="template-6"] .catalog-sidebar .field{margin-block:12px}
body[data-theme="template-6"] .catalog-sidebar .field label{display:block;font-size:12px;margin-bottom:5px}
body[data-theme="template-6"] .catalog-sidebar .check-label{display:flex;gap:7px;align-items:center;padding-block:12px}
body[data-theme="template-6"] .catalog-smart-form{width:100%}
body[data-theme="template-6"] .search-results{position:absolute;top:calc(100% + 10px);right:0;left:auto;width:min(800px,90vw);max-height:65vh;overflow:auto}
body[data-theme="template-6"] .search-results.open{display:block}
body[data-theme="template-6"] .ferry-main-footer{margin-top:30px;background:#fff;color:var(--text-main)}
body[data-theme="template-6"] .ferry-main-footer .footer-widgets{display:grid}
body[data-theme="template-6"] .ferry-main-footer .footer-logo{width:180px;filter:none}
body[data-theme="template-6"] .mini-cart-content,body[data-theme="template-6"] .account-menu{z-index:140}
body[data-theme="template-6"] #app{min-height:50vh}
body[data-theme="template-6"] .sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-theme="template-6"] .lp-lead,body[data-theme="template-6"] .lp-search-hint{color:#64748b}
body[data-theme="template-6"] .b2b-table td{padding-block:8px}
body[data-theme="template-6"] .b2b-table .col-price{width:140px;white-space:nowrap}
body[data-theme="template-6"] .b2b-table .col-order{width:150px;white-space:nowrap}
body[data-theme="template-6"] .fm-search-popout{position:fixed!important;z-index:500;display:block;overflow:auto;background:#fff;border:1px solid #bdd0e8;border-radius:12px;box-shadow:0 20px 60px #18314d33}
body[data-theme="template-6"] .fm-search-popout .suggestion-group-title{position:sticky;top:0;z-index:1;background:#fff}
body[data-theme="template-6"] .fm-search-popout input{max-width:65px}
body[data-theme="template-6"] .ferry-main-home{max-width:1232px;margin:0 auto;padding-inline:16px}
@media(min-width:901px){body[data-theme="template-6"] .fm-catalog-page .catalog-layout{grid-template-columns:256px minmax(0,1fr);gap:18px}}
@media(max-width:900px){
body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar{position:static;max-height:420px}
body[data-theme="template-6"] .fm-catalog-page .catalog-layout{display:grid;grid-template-columns:1fr}
body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar .quick-categories{display:flex;flex-wrap:nowrap;overflow:auto;max-height:110px}
body[data-theme="template-6"] .fm-catalog-page .quick-category{flex:0 0 120px}
body[data-theme="template-6"] .catalog-desktop-filters{display:none}
body[data-theme="template-6"] .fm-filters-open .catalog-desktop-filters{display:block}
body[data-theme="template-6"] .fm-catalog-products .b2b-table{min-width:0}
body[data-theme="template-6"] .fm-results-tools{flex-wrap:wrap}
}
@media(max-width:540px){
body[data-theme="template-6"] .fm-catalog-products .b2b-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 12px;padding:14px}
body[data-theme="template-6"] .fm-catalog-products .b2b-row td{position:static;min-width:0;width:auto!important;padding:0!important;margin:0;border:0;white-space:normal}
body[data-theme="template-6"] .fm-catalog-products .b2b-row .col-img{grid-column:1;grid-row:1 / span 4}
body[data-theme="template-6"] .fm-catalog-products .b2b-row td:not(.col-img){grid-column:2}
body[data-theme="template-6"] .fm-catalog-products .b2b-prod-title{overflow-wrap:anywhere}
body[data-theme="template-6"] .app-header .header-inner{display:flex;flex-wrap:wrap;padding:10px 14px;gap:10px}
body[data-theme="template-6"] .app-header .logo{flex:1 1 auto}
body[data-theme="template-6"] .page-search-jump{order:3;margin:0;width:100%}
body[data-theme="template-6"] .app-header .user-nav{margin:0}
body[data-theme="template-6"] .app-header .user-nav .fm-register{padding:0 10px;font-size:11px;min-width:0}
body[data-theme="template-6"] .app-header .user-nav .nav-text{position:static;width:auto;height:auto;clip:auto;font-size:11px}
body[data-theme="template-6"] .b2b-mega-layout{display:grid;grid-template-columns:105px minmax(0,1fr)}
body[data-theme="template-6"] .b2b-mega-models{display:block;min-width:0}
body[data-theme="template-6"] .b2b-model-links{grid-template-columns:1fr}
}
/*===assets/themes/ferry-main/ferry-new-header.css===*/body:not(:has(.admin-shell)) .ferry-announcement {
min-height: 34px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 6px clamp(16px, 4vw, 48px);
background: linear-gradient(90deg, #0b1220 0%, #132743 52%, #0b1220 100%);
color: #fff;
font-size: 12px;
font-weight: 650;
letter-spacing: 0;
text-transform: none;
}
body:not(:has(.admin-shell)) .ferry-announcement__messages { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.ferry-announcement__messages > span + span:not(.ferry-preview-badge)::before { content:"|"; margin-right:18px; opacity:.55; }
.ferry-preview-badge { padding:3px 8px; border:1px solid rgba(255,255,255,.55); border-radius:999px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.ferry-announcement .language-control { margin-left:auto; color:#fff; }
.ferry-announcement .language-control select { color:#fff; background:transparent; border-color:rgba(255,255,255,.45); }
.ferry-announcement .language-control svg { color:#fff; stroke:currentColor; }
body:not(:has(.admin-shell)) .app-header {
position: sticky;
top: 0;
z-index: 100;
background: #f5f8fc;
border-bottom: 1px solid #e7edf5;
box-shadow: 0 8px 30px rgba(15, 33, 57, .07);
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header.is-scrolled {
background: #f5f8fc;
}
body:not(:has(.admin-shell)) .app-header .header-inner {
min-height: 80px;
height: auto;
padding-top: 13px;
padding-bottom: 13px;
gap: clamp(14px, 2vw, 24px);
}
body:not(:has(.admin-shell)) .app-header .logo {
position: relative;
display: inline-flex;
flex: 0 0 clamp(175px, 17vw, 218px);
flex-direction: column;
align-items: flex-start;
gap: 3px;
color: #0d2747;
text-decoration: none;
}
body:not(:has(.admin-shell)) .app-header .logo img { display:block; width:auto; max-width:100%; height:clamp(34px, 4vw, 42px); object-fit:contain; }
.app-header .page-search-jump { display:none; }
.app-header .search-bar { flex:1 1 auto; max-width:none; min-width:260px; }
body:not(:has(.admin-shell)) .app-header .search-input-wrapper:hover { border-color:#b9c8da; box-shadow:0 5px 16px rgba(20,40,68,.09); }
body:not(:has(.admin-shell)) .app-header .search-input-wrapper:focus-within { border-color:#2878ed; box-shadow:0 0 0 4px rgba(40,120,237,.13), 0 6px 18px rgba(20,55,100,.09); }
.app-header #search-input { min-height:48px; padding:0 8px; font-size:14px; }
.app-header .search-icon { color:#72798a; }
.search-submit .b2b-nav-icon{height:24px; width:24px; color:#000;}
button.search-submit {
border: 1px solid #f7faff;
background-color: #fff;
border-radius: 99px;
width: 52px;
margin: 2px 1px;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.app-header .user-nav { gap:6px; flex:0 0 auto; }
.app-header .user-nav .nav-link,
.app-header .user-nav > a,
.app-header .user-nav > button {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
height:44px;
padding:0 10px;
border:1px solid #dddfe6;
border-radius:12px;
background:#f6f7f9;
color:#202431;
transition:transform .2s, color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.app-header .user-nav .nav-link:hover,
.app-header .user-nav > a:hover,
.app-header .user-nav > button:hover {
color:#fff;
background:#4887f4;
border-color:#4887f4;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(72,135,244,.3);
}
.app-header .user-nav .nav-text { font-size:12px; font-weight:700; }
.app-header .cart-badge { background:#fc0909; box-shadow:0 0 0 2px #fff; }
body:not(:has(.admin-shell)) .app-header .store-menu,
body:not(:has(.admin-shell)) .app-header .store-mega-menu {
min-height:54px;
border-top:1px solid #dddfe6;
border-bottom:1px solid #edf0f4;
background:linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%);
}
.app-header .store-menu a { color:#202431; font-size:14px; font-weight:600; }
.app-header .store-menu a:hover,
.app-header .store-menu a[aria-current="page"] { color:#4887f4; }
@media (max-width: 820px) {
.ferry-announcement__messages span:nth-child(2),
.ferry-announcement__messages span:nth-child(3) { display:none; }
.ferry-announcement__messages > span + span::before { display:none; }
.app-header .header-inner { flex-wrap:wrap; padding-top:10px; padding-bottom:10px; }
body:not(:has(.admin-shell)) .app-header .logo { flex:1 1 auto; }
.app-header .user-nav { margin-left:auto; }
.app-header .search-bar { order:3; flex:0 0 100%; max-width:100%; min-width:0; }
}
@media (max-width: 540px) {
.ferry-announcement { justify-content:space-between; gap:8px; padding-inline:12px; }
.ferry-preview-badge { display:none; }
body:not(:has(.admin-shell)) .app-header .header-inner {
grid-template-columns: minmax(92px, 1fr) auto;
width: 100%;
max-width: 100%;
overflow: hidden;
}
body:not(:has(.admin-shell)) .app-header .logo { min-width: 0; }
body:not(:has(.admin-shell)) .app-header .logo img { width:112px; max-width:100%; height:auto; }
body:not(:has(.admin-shell)) .app-header .user-nav { min-width:0; gap:3px; }
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin {
width:40px;
min-width:40px;
padding:0;
font-size:0;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin svg { width:19px; height:19px; }
body:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
max-width:112px;
padding:0 11px;
overflow:hidden;
font-size:11px;
text-overflow:ellipsis;
white-space:nowrap;
}
.app-header .search-submit { min-width:48px; font-size:0; }
.app-header .search-submit::after { content:"⌕"; font-size:22px; }
.app-header .user-nav .nav-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
/*===assets/css/main.css===*/:root{
--primary:#4887f4;
--primary-hover:#1e61d4;
--sale:#fc0909;
--amber:#e59c00;
--text:#23282d;
--text-light:#696969;
--border:#e2e4e7;
--bg:#f5f5f5;
--header-bg:#fbfbfd;
--green:#2ecc71;
--radius:4px;
--maxw:1200px;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--sp:clamp(12px,2vw,18px);
--sp-lg:clamp(18px,3vw,28px);
--pad-x:clamp(12px,3vw,15px);
--fs-base:clamp(13px,0.5vw + 12px,15px);
--fs-h1:clamp(20px,3vw,28px);
--fs-h2:clamp(16px,2vw,22px);
--fs-price:clamp(15px,1.4vw,19px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:#fff;color:var(--text);padding:clamp(7px,1vw,9px) clamp(14px,1.6vw,18px);border-radius:var(--radius);font-size:13px;font-weight:600;transition:.2s}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-block{width:100%}
.site-header{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06);position:relative;z-index:50}
.announcement{background:var(--primary);color:#fff;font-size:12px}
.announcement .container{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;text-align:center}
.announcement a{color:#fff;text-decoration:underline}
.announcement .ann-left,.announcement .ann-right{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.header-main{padding:clamp(10px,1.6vw,16px) 0}
.header-row{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.header-logo{flex:0 0 clamp(150px,16vw,200px)}
.header-logo .site-logo{height:clamp(34px,5vw,46px);width:auto}
.header-extras{flex:1;min-width:260px;display:flex;align-items:center;gap:clamp(10px,1.6vw,18px)}
.dgwt-wcas-search-wrapp{flex:1;min-width:0;position:relative}
.dgwt-wcas-search-form{position:relative;display:flex;align-items:center}
.dgwt-wcas-sf-wrapp{display:flex;align-items:center;flex:1;min-width:0;background:#fff;border:1px solid var(--border);border-radius:999px;overflow:hidden;transition:border-color .15s,box-shadow .15s;position:relative;box-shadow:0 1px 3px rgba(20,30,50,.06)}
.dgwt-wcas-search-form:focus-within .dgwt-wcas-sf-wrapp{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.dgwt-wcas-search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-light);display:flex;pointer-events:none;transition:color .15s}
.dgwt-wcas-search-form:focus-within .dgwt-wcas-search-ico{color:var(--primary)}
.dgwt-wcas-search-input{flex:1;border:0;outline:0;background:transparent;padding:0 clamp(16px,2vw,22px) 0 44px;height:clamp(44px,5vw,50px);font-size:14px;min-width:0;color:var(--text)}
.dgwt-wcas-preloader{display:none}
.dgwt-wcas-search-submit{background:var(--primary);color:#fff;border:0;height:clamp(42px,5vw,48px);width:clamp(42px,5vw,48px);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s}
.dgwt-wcas-search-submit:hover{background:var(--primary-hover)}
.search-results{position:absolute;top:calc(100% + 9px);left:0;right:0;background:rgba(255,255,255,.98);border:1px solid #dfe6f0;border-radius:16px;box-shadow:0 24px 60px -24px rgba(20,42,80,.34),0 8px 20px -12px rgba(20,42,80,.18);z-index:200;display:none;overflow:hidden;backdrop-filter:blur(16px)}
.search-results.open{display:block}
.sr-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(170px,1fr);min-height:260px}.sr-column{display:flex;min-width:0;flex-direction:column}.sr-products{border-right:1px solid #e7ecf3}.sr-heading{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border-bottom:1px solid #e7ecf3;background:linear-gradient(180deg,#fff,#fbfcff);color:#12213a;font-size:12px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}.sr-heading b{display:grid;min-width:24px;height:24px;padding:0 6px;place-items:center;border-radius:999px;background:#edf4ff;color:var(--primary);font-size:11px}.sr-scroll{max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(72,135,244,.18) transparent}.sr-scroll::-webkit-scrollbar{width:4px}.sr-scroll::-webkit-scrollbar-track{background:transparent}.sr-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(72,135,244,.14)}.sr-scroll:hover{scrollbar-color:rgba(72,135,244,.62) transparent}.sr-scroll:hover::-webkit-scrollbar-thumb{background:rgba(72,135,244,.62)}
.sr-item{display:flex;align-items:center;gap:16px;margin:8px;padding:5px;border:1px solid #e8edf5;border-radius:13px;background:linear-gradient(145deg,#fff,#f8fbff);color:#15233a;box-shadow:0 12px 28px -24px rgba(22,67,140,.55);transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.sr-item:hover{background:linear-gradient(90deg,#f7faff,#edf4ff);transform:translateX(2px)}
.sr-item:last-child{border-bottom:0}
.sr-item img{width:32px;height:32px;padding:2px;object-fit:contain;border:1px solid #e2e8f099;border-radius:11px;background:#fff;flex:0 0 auto}.sr-copy{display:flex;min-width:0;flex-direction:column;gap:5px}.sr-item .sr-name{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:13px;font-weight:680;line-height:1.35}.sr-item .sr-sku{font-size:10.5px;color:var(--text-light)}.sr-category{position:relative;display:flex;align-items:center;min-height:42px;padding:8px 14px;border-bottom:1px solid #f0f3f7;color:#27364d;font-size:12px;font-weight:580;line-height:1.3;transition:color .2s ease,background .2s ease,padding-left .2s ease}.sr-category:hover{padding-left:18px;background:linear-gradient(90deg,#f8fbff,#edf4ff);color:var(--primary)}.sr-view{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:11px 16px;border-top:1px solid #e7ecf3;background:#fbfcff;color:var(--primary);font-size:11.5px;font-weight:700}.sr-view:hover{background:#f2f6ff}.sr-view span{font-size:16px;transition:transform .2s}.sr-view:hover span{transform:translateX(3px)}.sr-section-empty,.sr-empty{padding:28px 16px;color:#7a8799;font-size:12px;text-align:center}.sr-empty{padding:42px 20px}
@media(max-width:620px){.search-results{position:fixed;top:112px;right:12px;left:12px}.sr-layout{grid-template-columns:1fr}.sr-products{border-right:0}.sr-categories{border-top:1px solid #e7ecf3}.sr-scroll{max-height:230px}}
.extras-menu{display:flex;align-items:center;gap:4px;list-style:none;flex:0 0 auto;margin:0;padding:0}
.extra-menu-item{position:relative}
.extras-menu .wishlist-contents,.extras-menu .cart-contents,.extras-menu .item-register{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;color:var(--text);border-radius:12px;background:var(--bg);border:1px solid var(--border);transition:transform .2s,color .2s,background .2s,border-color .2s,box-shadow .2s}
.extras-menu .wishlist-contents:hover,.extras-menu .cart-contents:hover,.extras-menu .item-register:hover{color:#fff;background:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 18px rgba(72,135,244,.30)}
.extras-menu .extra-icon svg{display:block}
.menu-item-cart .cart-contents{position:relative}
.mini-item-counter{position:absolute;top:-4px;right:-4px;background:var(--sale);color:#fff;font-size:10px;font-weight:700;border-radius:10px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff;box-sizing:content-box;box-shadow:0 2px 6px rgba(252,9,9,.35)}
.menu-item-account .item-register{font-weight:600}
.mini-cart-content{position:absolute;top:100%;right:0;width:340px;max-width:92vw;overflow:visible;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.14);z-index:200;display:block;padding:14px;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(54px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.2,1),visibility 0s linear .9s}
.mini-cart-content.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition-delay:0s}
.mc-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:14px;font-weight:700;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.mc-head>span{justify-self:start}.mc-head b{justify-self:center;font-size:12px;color:var(--primary);background:var(--bg);padding:2px 9px;border-radius:10px;font-weight:700;white-space:nowrap}.mc-close{justify-self:end;display:grid;width:25px;height:25px;padding:0;place-items:center;border:1px solid #e1e6ed;border-radius:50%;background:#fff;color:#7b8798;font-size:17px;line-height:1;cursor:pointer;transition:.2s}.mc-close:hover{border-color:var(--primary);color:var(--primary);transform:rotate(90deg)}
.mc-items{max-height:40vh;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.16) transparent}
.mc-items:hover{scrollbar-color:rgba(72,135,244,.46) transparent}.mc-items::-webkit-scrollbar{width:4px}.mc-items::-webkit-scrollbar-track{background:transparent}.mc-items::-webkit-scrollbar-thumb{background:rgba(100,116,139,.14);border-radius:99px}.mc-items:hover::-webkit-scrollbar-thumb{background:rgba(72,135,244,.46)}
.mc-empty{text-align:center;color:var(--text-light);padding:26px 0}
.mc-empty__ic{display:block;font-size:30px;margin-bottom:8px}
.mc-item{display:flex;gap:8px;align-items:center;min-height:54px;padding:6px 0;border-bottom:1px solid #eef1f5;position:relative}
.mc-item img{width:42px;height:42px;object-fit:contain;border:1px solid #e5e9ef;border-radius:8px;flex:0 0 auto;background:#fff}
.mc-info{flex:1;min-width:0}
.mc-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:650;line-height:1.25;margin-bottom:5px;color:#1d2939}
.mc-line{display:flex;align-items:center;justify-content:flex-start;gap:7px}.mc-meta{display:inline-flex;align-items:center;min-width:0;font-size:clamp(8.5px,1vw,10px);line-height:1.15;color:var(--primary);font-weight:700;white-space:nowrap}.mc-price-loading{color:#8a94a5;font-size:9px;font-weight:600}
.mc-qty{display:inline-flex;align-items:center;height:24px;border:1px solid #dfe5ed;border-radius:7px;background:#f9fbfd;overflow:hidden}.mc-qty button{width:22px;height:22px;padding:0;border:0;background:transparent;color:#667085;font-size:14px;line-height:1;cursor:pointer;transition:.18s}.mc-qty button:hover{background:#eaf2ff;color:var(--primary)}.mc-qty input{width:26px;height:22px;padding:0;border:0;border-left:1px solid #e6eaf0;border-right:1px solid #e6eaf0;background:#fff;text-align:center;font-size:10.5px;font-weight:700;appearance:textfield}.mc-qty input::-webkit-inner-spin-button{appearance:none}
.mc-remove{position:relative;right:5px;flex:0 0 auto;width:23px;height:23px;border:1px solid #e1e6ed;background:#fff;border-radius:50%;font-size:14px;line-height:1;color:#98a2b3;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.mc-remove:hover{border-color:var(--sale);color:var(--sale)}
.mc-more{font-size:11px;color:var(--text-light);text-align:center;padding:8px 0;border-bottom:1px solid #eef1f5;background:#fff}
.mc-foot{padding-top:12px}
.mc-sub{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:12px}
.mc-sub b{font-size:16px;color:var(--text)}
.mc-actions{display:flex;gap:8px}
.mc-actions .btn{flex:1;justify-content:center;padding:9px 10px;font-size:13px}
.cart-fly-image{position:fixed;z-index:10000;object-fit:contain;pointer-events:none;border-radius:10px;background:#fff;border:1px solid var(--border);box-shadow:0 12px 28px rgba(20,30,50,.2);opacity:1;transform:rotate(0) scale(1);transition:left 1s cubic-bezier(.2,.75,.2,1),top 1s cubic-bezier(.2,.75,.2,1),width 1s cubic-bezier(.2,.75,.2,1),height 1s cubic-bezier(.2,.75,.2,1),opacity .95s ease,transform 1s cubic-bezier(.2,.75,.2,1)}
.cart-received{animation:cartReceived .48s cubic-bezier(.2,.75,.2,1)}
@keyframes cartReceived{0%,100%{transform:scale(1)}45%{transform:scale(1.13)}}
.nav-sticky-sentinel{display:block;width:100%;height:1px;margin:0 0 -1px;padding:0;pointer-events:none}
.primary-nav-wrap{position:relative;z-index:50;background:#fff;border-top:1px solid var(--border);transform:scale(1);transform-origin:top center;transition:background-color .4s,box-shadow .4s,border-color .4s,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.primary-nav-wrap.is-stuck{position:fixed;top:0;left:0;right:0;width:100%;z-index:200;background:rgba(255,255,255,.96);border-top-color:transparent;border-bottom:1px solid rgba(221,223,230,.9);box-shadow:0 10px 30px rgba(24,28,40,.10);backdrop-filter:saturate(170%) blur(10px);-webkit-backdrop-filter:saturate(170%) blur(10px);transform:scale(1.008)}
@keyframes navArrive{from{opacity:.92;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav-sticky-spacer{width:100%;height:0;margin:0;padding:0;pointer-events:none}
.nav-sticky-spacer.is-active{height:54px}
.primary-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:54px;position:relative}
.menu-wrap{position:relative;justify-self:start}
.nav-links{justify-self:center}
.nav-spacer{flex:1}
.nav-tag{font-size:13px;color:var(--text-light);font-weight:500;white-space:nowrap;justify-self:end}
.mf-menu-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;letter-spacing:.5px;height:42px;padding:0 18px;transition:.2s}
.mf-menu-toggle:hover{color:var(--primary);border-color:var(--primary);background:#fff}
.mf-menu-toggle .mf-bars{font-size:18px}
.mf-menu-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:min(390px,92vw);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 55px rgba(17,24,39,.2);z-index:410;display:block;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.98);transform-origin:top left;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.mf-menu-dropdown.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.slide-menu-head{height:58px;display:grid;grid-template-columns:82px 1fr 42px;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--border);background:#fff}
.slide-menu-head strong{text-align:center;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide-menu-back,.slide-menu-close{border:0;background:transparent;color:var(--text);cursor:pointer;font:inherit;font-weight:700;height:38px;border-radius:9px}
.slide-menu-back.is-hidden{visibility:hidden;pointer-events:none}
.slide-menu-back{text-align:left;color:var(--primary)}
.slide-menu-back:hover,.slide-menu-close:hover{background:var(--bg)}
.slide-menu-close{font-size:17px;width:38px}
.slide-menu-viewport{position:relative;overflow:hidden;height:min(620px,calc(100vh - 180px));min-height:220px;transition:height .28s ease;background:#fff}
.slide-menu-panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.75,.25,1);will-change:transform;scrollbar-width:thin;scrollbar-color:rgba(116,130,151,.3) transparent}
.slide-menu-panel:hover{scrollbar-color:rgba(116,130,151,.82) transparent}
.slide-menu-panel::-webkit-scrollbar{width:4px}
.slide-menu-panel::-webkit-scrollbar-track{background:transparent}
.slide-menu-panel::-webkit-scrollbar-thumb{background:rgba(116,130,151,.3);border-radius:999px}
.slide-menu-panel:hover::-webkit-scrollbar-thumb{background:rgba(116,130,151,.82)}
.slide-menu-panel.is-active{transform:translateX(0)}
.slide-menu-panel.to-left{transform:translateX(-100%)}
.slide-menu-panel.from-left{transform:translateX(-100%)}
.slide-menu-list{list-style:none;margin:0;padding:8px 0}
.slide-menu-item{display:flex;align-items:stretch;border-bottom:1px solid #edf0f4}
.slide-menu-item:last-child{border-bottom:0}
.slide-menu-link{display:block;flex:0 1 auto;min-width:0;padding:13px 8px 13px 18px;color:var(--text);font-size:14px;font-weight:500;line-height:1.25}
.slide-menu-item.has-children .slide-menu-link{font-weight:700}
.slide-menu-link:hover{background:var(--bg);color:var(--primary)}
.slide-menu-item>span:last-child{flex:1}
.slide-menu-next{position:relative;isolation:isolate;overflow:hidden;display:flex;flex:1;max-width:128px;min-width:44px;margin-left:auto;align-items:center;justify-content:flex-end;padding:0 14px 0 10px;border:0;border-left:1px solid #edf0f4;background:#fff;color:var(--text-light);cursor:pointer;font-size:21px;transform:scale(1);transform-origin:right center;transition:color 1.6s ease,transform .55s cubic-bezier(.2,.7,.2,1),padding .55s cubic-bezier(.2,.7,.2,1)}
.slide-menu-next::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(72 135 244 / 0%) 0%,rgb(72 135 244 / 29%) 38%,rgb(72 135 244 / 5%) 100%);transform:translateX(100%);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.slide-menu-next>span{position:relative;z-index:1}
.slide-menu-next:hover{color:color-mix(in srgb,var(--primary) 78%,var(--text-light));transform:scale(1.025);padding-right:17px}
.slide-menu-next:hover::before{transform:translateX(0)}
.slide-menu-empty,.slide-menu-loading,.slide-menu-error{padding:32px 20px;text-align:center;color:var(--text-light);font-size:14px}
body.mobile-menu-open::after{content:"";position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:40;animation:menuShade .2s ease both}
@keyframes menuShade{from{opacity:0}to{opacity:1}}
body.mobile-menu-open{overflow:hidden}
body.mobile-menu-open .site-header{position:relative;z-index:50}
body.mobile-menu-open .primary-nav-wrap{z-index:51}
@media(max-width:760px){
.mf-menu-dropdown{position:fixed;top:0;bottom:0;left:0;width:min(92vw,390px);max-width:none;border:0;border-radius:0 18px 18px 0;transform:translateX(-102%);transform-origin:left center;transition:transform .3s cubic-bezier(.22,.75,.25,1),visibility .3s;opacity:1}
.mf-menu-dropdown.open{transform:translateX(0)}
.slide-menu-head{height:64px;padding-top:env(safe-area-inset-top)}
.slide-menu-viewport{height:calc(100vh - 64px - env(safe-area-inset-top));min-height:0}
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);list-style:none;margin:0;padding:0;flex:0 0 auto}
.nav-links a{font-size:clamp(14.5px,.35vw + 12px,16px);font-weight:650;color:var(--text);position:relative;padding:4px 0;letter-spacing:-.01em}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover{color:var(--primary)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--primary)}
.nav-item-has-children{position:relative}
.nav-item-has-children > a::after{content:"▾";margin-left:.35rem;font-size:.7em;vertical-align:middle;opacity:.7}
.sub-menu{position:absolute;top:100%;left:0;min-width:210px;margin:6px 0 0;padding:.4rem 0;list-style:none;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(20,30,50,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;z-index:200}
.nav-item-has-children:hover .sub-menu,.nav-item-has-children:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li a{display:block;padding:.55rem .95rem;font-size:.85rem;font-weight:600;white-space:nowrap;color:var(--text)}
.sub-menu li a:hover{background:var(--soft,#f4f6f9);color:var(--primary)}
.sub-menu li a.is-current{background:var(--soft,#f4f6f9);color:var(--primary);font-weight:700}
.account-btn{font-size:20px;display:inline-flex;align-items:center;color:var(--text)}
.account-btn:hover{color:var(--primary)}
.menu-item-account .account-menu,.menu-item-wishlist .wishlist-content,.nav-actions .account-menu,.nav-actions .wishlist-content{position:absolute;top:calc(100% + 8px);right:0;width:230px;max-width:90vw;background:rgba(255,255,255,.98);border:1px solid #e1e7ef;box-shadow:0 18px 44px -22px rgba(22,42,76,.38),0 8px 20px -15px rgba(22,42,76,.22);z-index:200;display:none;padding:10px 0;border-radius:14px;overflow:hidden;backdrop-filter:blur(14px)}
.menu-item-account .account-menu.open,.menu-item-wishlist .wishlist-content.open,.nav-actions .account-menu.open,.nav-actions .wishlist-content.open{display:block}
.nav-actions{display:none;align-items:center;gap:24px;position:relative;justify-self:end}
.primary-nav-wrap.is-stuck .nav-actions{display:flex}
.nav-act{position:relative;background:var(--bg);border:1px solid var(--border);cursor:pointer;color:var(--text);display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:12px;line-height:1;transition:transform .2s,color .2s,background .2s,border-color .2s,box-shadow .2s}
.nav-act:hover{color:#fff;background:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 18px rgba(72,135,244,.30)}
.nav-act .extra-icon svg{display:block}
.mini-cart-content.open{display:block}
.account-menu a{display:flex;align-items:center;gap:9px;margin:0 7px;padding:9px 11px;border:0;border-radius:9px;font-size:12.5px;font-weight:560;color:var(--text);transition:background .22s ease,color .22s ease,transform .22s ease}
.account-menu a:last-child{border-bottom:0}
.account-menu a:hover{background:#f2f6ff;color:var(--primary);transform:translateX(2px)}.account-menu .account-logout{margin-top:7px;padding-top:10px;border-top:1px solid #edf0f4;border-radius:0 0 9px 9px;color:#b34a4a}.account-menu .account-logout:hover{background:#fff3f3;color:#c62929}.account-logout svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wl-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1f1f1}
.wl-item img{width:46px;height:46px;object-fit:contain;border:1px solid var(--border);flex:0 0 auto}
.wl-item .wl-info{flex:1;min-width:0}
.wl-item .wl-name{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-item .wl-price{font-size:12px;color:var(--primary);font-weight:700}
.wl-item .wl-actions{display:flex;gap:6px;flex:0 0 auto}
.wl-item .wl-actions button{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}
.wl-item .wl-actions .wl-add:hover{border-color:var(--primary);color:var(--primary)}
.wl-item .wl-actions .wl-remove:hover{border-color:var(--sale);color:var(--sale)}
.wl-empty{color:var(--text-light);padding:14px 0;text-align:center;font-size:13px}
.wl-foot{margin-top:10px}
.wl-heart{position:absolute;top:8px;right:8px;width:34px;height:34px;border:1px solid var(--border);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;color:var(--text-light)}
.wl-heart svg{width:16px;height:16px}
.wl-heart.active{color:var(--sale);border-color:var(--sale)}
.wl-heart-btn{display:inline-flex;align-items:center;gap:6px}
.site-content{min-height:60vh;padding:var(--sp-lg) 0 calc(var(--sp-lg) + 20px)}
.page-head{margin-bottom:var(--sp)}
.page-head h1{font-size:var(--fs-h1);font-weight:700}
.breadcrumb{font-size:12px;color:var(--text-light);margin-bottom:var(--sp)}
.breadcrumb a:hover{color:var(--primary)}
.hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp);margin-bottom:var(--sp-lg)}
.hero-main{background:linear-gradient(120deg,#4887f4,#1e61d4);color:#fff;border-radius:8px;padding:clamp(24px,5vw,48px);display:flex;flex-direction:column;justify-content:center;min-height:clamp(200px,28vw,280px)}
.hero-main h2{font-size:clamp(22px,4vw,32px);font-weight:800;margin-bottom:12px}
.hero-main p{font-size:15px;opacity:.92;margin-bottom:20px;max-width:420px}
.hero-main .btn{background:#fff;color:var(--primary);align-self:flex-start}
.hero-side{display:grid;gap:var(--sp);align-content:start}
.hero-promo{background:#222;color:#fff;border-radius:8px;padding:clamp(16px,3vw,22px);display:flex;flex-direction:column;justify-content:center}
.hero-promo h3{font-size:18px;margin-bottom:6px}
.hero-promo .amber{color:var(--amber)}
.section{margin-bottom:var(--sp-lg)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp);border-bottom:2px solid var(--primary);padding-bottom:8px;gap:12px;flex-wrap:wrap}
.section-head h2{font-size:var(--fs-h2);font-weight:700}
.section-head a{font-size:13px;color:var(--primary);font-weight:600}
.cat-box{background:#fff;border:1px solid var(--border);border-radius:8px;padding:var(--sp);text-align:center;transition:.2s}
.cat-box:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(72,135,244,.15)}
.cat-box .cat-name{font-size:13px;font-weight:600;margin-top:8px}
.promo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp)}
.promo-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:clamp(16px,2.4vw,20px);display:flex;align-items:center;gap:16px}
.promo-card .p-icon{font-size:28px;flex:0 0 auto}
.promo-card h4{font-size:15px;margin-bottom:4px}
.promo-card p{font-size:12px;color:var(--text-light)}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.empty{padding:30px;text-align:center;color:var(--text-light)}
.hp-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(40px,6vw,84px) 0;isolation:isolate}
.hp-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
radial-gradient(1100px 620px at 82% -15%, rgba(0,170,224,.42), transparent 60%),
radial-gradient(900px 560px at -8% 118%, rgba(99,102,241,.40), transparent 55%),
linear-gradient(135deg,#04122b 0%,#07245c 46%,#0a3f93 100%)}
.hp-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(circle at 72% 32%,#000,transparent 80%);
mask-image:radial-gradient(circle at 72% 32%,#000,transparent 80%)}
.hp-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.hp-hero h1{font-size:clamp(30px,4.6vw,54px);font-weight:800;line-height:1.06;letter-spacing:-.02em;margin-bottom:18px}
.hp-hero h1 .accent{background:linear-gradient(90deg,#5fd0ff,#9b8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bfe0ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hp-hero__copy p{font-size:clamp(14px,1.4vw,17px);opacity:.9;max-width:540px;margin-bottom:26px;line-height:1.6}
.hp-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hp-hero__actions .btn-primary{background:linear-gradient(90deg,#37e0ff,#3b82f6);color:#04122b;border-color:transparent;font-weight:700;box-shadow:0 12px 30px rgba(56,189,248,.35)}
.hp-hero__actions .btn-primary:hover{filter:brightness(1.08);background:linear-gradient(90deg,#37e0ff,#3b82f6);color:#04122b}
.hp-hero__actions .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hp-hero__actions .btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.hp-hero__stats{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.hp-hero__stats > div{padding-left:18px;border-left:2px solid rgba(255,255,255,.22)}
.hp-hero__stats b{display:block;font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.01em}
.hp-hero__stats span{font-size:12px;opacity:.8}
.hp-hero__media{position:relative;min-height:clamp(240px,32vw,360px);display:flex;align-items:center;justify-content:center}
.hp-hero__feature{position:relative;z-index:2;width:100%;max-width:440px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hp-hero__feature img{width:100%;height:clamp(170px,24vw,250px);object-fit:cover;border-radius:14px}
.hp-hero__float{position:absolute;z-index:3;width:96px;height:96px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);box-shadow:0 16px 34px rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hp-hero__float img{width:100%;height:100%;object-fit:cover}
.hp-hero__float--1{top:-12px;right:4%}
.hp-hero__float--2{bottom:-12px;left:2%}
.hp-hero__badge{position:absolute;z-index:4;top:4%;left:-6px;background:linear-gradient(135deg,#ff3b6b,#ff7a3d);color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:1.05;padding:12px 16px;border-radius:14px;box-shadow:0 14px 30px rgba(255,59,107,.4)}
.hp-hero__badge strong{display:block;font-size:28px;font-weight:800}
.cat-rail{display:flex;gap:var(--sp);overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.cat-card{flex:0 0 clamp(140px,16vw,180px);background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;justify-content:space-between;transition:.2s}
.cat-card:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(72,135,244,.16);transform:translateY(-2px)}
.cat-card__media{width:100%;height:118px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#f3f7fd);border-radius:8px;overflow:hidden}
.cat-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.cat-art{width:92px;height:92px;display:block}
.cat-card__name{font-size:14px;font-weight:700;line-height:1.25}
.cat-card__go{font-size:12px;color:var(--primary);font-weight:600}
.slider{position:relative;display:flex;align-items:center}
.slider-viewport{overflow:hidden;flex:1;min-width:0}
.slider-track{display:flex;gap:var(--sp);will-change:transform;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.slider-slide{flex:0 0 auto;width:clamp(190px,21vw,235px)}
.slider-slide .product,.slider-slide .cat-card{width:100%;height:100%}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.10);cursor:pointer;transition:.2s}
.slider-arrow:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.slider-arrow--prev{left:-6px}
.slider-arrow--next{right:-6px}
.hp-deal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:linear-gradient(120deg,#fff,#eef4ff);border:1px solid var(--border);border-radius:14px;padding:clamp(22px,3vw,36px)}
.hp-deal__copy h2{font-size:clamp(20px,2.6vw,28px);margin-bottom:10px}
.hp-deal__copy p{color:var(--text-light);margin-bottom:18px;max-width:520px}
.hp-deal__count{display:flex;gap:10px;font-weight:800;font-size:22px;color:var(--primary);min-height:46px}
.hp-deal__count span{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 12px;min-width:46px;text-align:center}
.hp-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp)}
.hp-trust article{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px}
.hp-trust__ic{font-size:26px}
.hp-trust b{display:block;font-size:14px}
.hp-trust small{color:var(--text-light);font-size:12px}
.hp-flash{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.hp-flash__intro{background:linear-gradient(160deg,#1e61d4,#4887f4);color:#fff;border-radius:14px;padding:24px}
.hp-flash__ic{font-size:22px}
.hp-flash__intro span{font-size:12px;opacity:.9}
.hp-flash__intro h2{font-size:22px;margin:6px 0 8px}
.hp-flash__intro p{font-size:13px;opacity:.9;margin-bottom:14px}
.hp-flash__count{font-size:24px;font-weight:800;letter-spacing:2px;min-height:34px}
.hp-flash__count span{margin:0 2px}
.campaign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp)}
.campaign-card{position:relative;overflow:hidden;border-radius:14px;padding:24px;color:#fff;min-height:170px;display:flex;align-items:flex-end;transition:.25s}
.campaign-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.campaign-card>div{position:relative;z-index:2}
.campaign-card span{font-size:12px;opacity:.9}
.campaign-card h3{font-size:18px;margin:4px 0 6px}
.campaign-card p{font-size:12px;opacity:.92;margin-bottom:10px}
.campaign-card b{font-size:13px;font-weight:700}
.campaign-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.35))}
.camp--apple{background:linear-gradient(140deg,#4887f4,#2f6fd6)}
.camp--samsung{background:linear-gradient(140deg,#1e61d4,#0b3e9e)}
.camp--huawei{background:linear-gradient(140deg,#fc0909,#c20505)}
.camp--xiaomi{background:linear-gradient(140deg,#e59c00,#c47e00)}
.camp--google{background:linear-gradient(140deg,#34a853,#1e7e3a)}
.camp--oneplus{background:linear-gradient(140deg,#eb0029,#b00020)}
.bestseller-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),260px));gap:var(--sp);justify-content:center}
.bestseller-col{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px}
.bestseller-col__title{font-size:15px;padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--primary)}
.bestseller-col__items{display:flex;flex-direction:column;gap:12px}
.best-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp)}
.best-tab{border:1px solid var(--border);background:#fff;color:var(--text);font-size:13px;font-weight:600;padding:8px 18px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.best-tab:hover{border-color:var(--primary);color:var(--primary)}
.best-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.best-panel{display:none}
.best-panel.is-active{display:block}
.hp-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp)}
.offer-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
.offer-card__ic{font-size:26px;flex:0 0 auto}
.offer-card h3{font-size:16px;margin:2px 0}
.offer-card p{font-size:12px;color:var(--text-light)}
.offer-card button,.offer-card a{margin-left:auto;font-size:12px;font-weight:700;color:var(--primary);border:1px solid var(--primary);background:#fff;border-radius:6px;padding:6px 12px;white-space:nowrap;cursor:pointer}
.offer-card button:hover,.offer-card a:hover{background:var(--primary);color:#fff}
.hp-benefits{background:var(--primary);margin-top:var(--sp-lg)}
.hp-benefits__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:22px 0}
.hp-benefits article{display:flex;align-items:center;gap:10px;color:#fff}
.hp-benefits article span{font-size:24px}
.hp-benefits b{display:block;font-size:14px}
.hp-benefits small{font-size:12px;opacity:.9}
.section-head--center{justify-content:center;text-align:center}
.hp-reviews .section-head--center{display:flex;flex-wrap:wrap}
.review-rail{display:flex;gap:var(--sp);overflow-x:auto;padding-bottom:10px}
.review-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px}
.slider-slide.review-slide{width:clamp(260px,32vw,340px)}
.slider-slide.review-slide .review-card{flex:1 1 auto;width:100%;height:100%}
.review-stars{color:var(--amber);margin-bottom:8px}
.review-card p{font-size:14px;margin-bottom:12px}
.review-by b{display:block;font-size:13px}
.review-by small{color:var(--text-light);font-size:12px}
.hp-brands{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;justify-content:center;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:var(--sp-lg)}
.hp-brands__label{font-size:12px;color:var(--text-light);font-weight:600}
.hp-brands span{font-size:clamp(16px,2vw,22px);font-weight:800;color:#9aa3ad;letter-spacing:.04em}
.hp-news{background:linear-gradient(120deg,#1e61d4,#4887f4);margin-top:var(--sp-lg)}
.hp-news__inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;padding:clamp(24px,3vw,40px) var(--pad-x)}
.hp-news__copy{display:flex;align-items:center;gap:16px;color:#fff}
.hp-news__ic{font-size:34px}
.hp-news__copy h2{font-size:clamp(18px,2.4vw,24px)}
.hp-news__copy p{font-size:13px;opacity:.92}
.hp-news__form{display:flex;gap:10px;flex:1;min-width:260px;max-width:460px}
.hp-news__form input{flex:1;min-width:0;padding:12px 16px;border:0;border-radius:8px;font-size:14px}
.hp-news__form button{background:#fff;color:var(--primary);border:0;border-radius:8px;padding:12px 22px;font-weight:700;cursor:pointer}
.hp-news__thanks{color:#fff;font-weight:700;padding:12px 0}
@media(max-width:980px){
.campaign-grid{grid-template-columns:repeat(2,1fr)}
.bestseller-columns{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),260px))}
.hp-benefits__grid{grid-template-columns:repeat(3,1fr)}
.hp-offers{grid-template-columns:1fr}
}
@media(max-width:760px){
.hp-hero__inner{grid-template-columns:1fr}
.hp-hero__media{order:-1}
.hp-trust{grid-template-columns:repeat(2,1fr)}
.hp-flash{grid-template-columns:1fr}
.hp-flash__intro{order:2}
}
@media(max-width:560px){
.campaign-grid{grid-template-columns:1fr}
.bestseller-columns{grid-template-columns:minmax(0,360px);margin:0 auto}
.hp-benefits__grid{grid-template-columns:repeat(2,1fr)}
.hp-trust{grid-template-columns:1fr}
}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(168px,18vw,218px)),1fr));gap:clamp(8px,.85vw,12px);align-items:stretch}
.product{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .5s ease,box-shadow .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;min-width:0;height:100%}
.product:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));box-shadow:0 7px 18px rgba(20,30,50,.075);transform:translateY(-1px)}
.mf-product-thumbnail{position:relative;padding:8px 10px 4px;display:flex;align-items:center;justify-content:center;height:clamp(92px,10vw,116px)}
.mf-product-thumbnail img{max-height:clamp(76px,8.8vw,100px);object-fit:contain;width:auto}
.prod-badge{position:absolute;top:10px;left:10px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px}
.prod-badge.out{background:#999}
.mf-product-details{padding:8px 12px 12px;display:flex;flex-direction:column;flex:1;min-width:0}
.mf-product-content{flex:1;min-width:0}
.mf-product-content h2{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:4px;min-height:2.6em}
.mf-product-content h2 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.mf-product-content h2 a:hover{color:var(--primary)}
.product-color{display:flex;align-items:center;gap:6px;min-height:18px;margin-top:2px;font-size:12px;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-color i{display:inline-block;flex:0 0 13px;width:13px;height:13px;border-radius:50%;background:var(--swatch);border:1px solid rgba(16,24,40,.48);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.product-title-cell{min-width:0}
.sku{font-size:11px;color:var(--text-light);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock{font-size:11px;color:var(--green);font-weight:600;margin-bottom:6px}
.out-of-stock{color:var(--sale)}
.price{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;min-height:20px}
.loginprices{font-size:13px;margin-bottom:8px}
.mc-login{color:var(--primary);font-weight:600;font-size:12px;text-decoration:none}
.mc-login:hover{text-decoration:underline}
.loginprices a{color:var(--primary);font-weight:700}
.footer-button{margin-top:auto}
.footer-button .button{width:100%;background:var(--primary);color:#fff;border:0;padding:8px;font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;transform:scale(1);transition:background .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.footer-button .button:hover{background:var(--primary-hover);transform:translateY(-1px) scale(1.018);box-shadow:0 7px 14px rgba(31,95,230,.18)}
.footer-button .button:active{transform:scale(.99)}
.footer-button .button:disabled{background:#ccc;cursor:not-allowed}
.shop-layout{display:grid;grid-template-columns:minmax(220px,clamp(220px,22vw,260px)) minmax(0,1fr);gap:var(--sp-lg);align-items:start}
.shop-main{min-width:0}
.sidebar{background:#fff;border:1px solid var(--border);border-radius:8px;padding:0 var(--sp) var(--sp);min-width:0;position:sticky;top:clamp(80px,9vw,96px);height:520px;max-height:min(520px,calc(100vh - clamp(100px,12vw,132px)));overflow-x:hidden;overflow-y:auto}
.sidebar-body{display:block}
.sidebar-body > .sidebar-inner{min-height:0}
.widget.filter-cat .widget-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;padding:0 0 10px;font-size:15px;font-weight:700;color:var(--text);cursor:pointer}
.widget.filter-cat .widget-toggle .wt-caret{transition:transform .4s cubic-bezier(.4,0,.2,1);font-size:12px}
.widget.filter-cat.collapsed .wt-caret{transform:rotate(-90deg)}
.widget.filter-cat .widget-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1)}
.widget.filter-cat.collapsed .widget-collapse{grid-template-rows:0fr}
.widget.filter-cat .widget-collapse > *{overflow:hidden;min-height:0}
.widget{margin-bottom:clamp(12px,1.5vw,22px);max-height:none;overflow:visible;padding-right:4px}
.widget:last-child{margin-bottom:0}
.widget-title{position:sticky;top:0;z-index:4;background:#fff;font-size:clamp(14.5px,.38vw + 12px,16px);font-weight:750;margin:0 0 10px;padding:var(--sp) 0 8px;border-bottom:1px solid var(--border);box-shadow:0 5px 8px -9px rgba(22,35,52,.5)}
.widget ul li{margin-bottom:8px}
.widget label{display:flex;align-items:center;gap:8px;font-size:clamp(12.75px,.28vw + 11.5px,14px);cursor:pointer}
.widget input[type=checkbox]{accent-color:var(--primary)}
.filter-cat a{display:block;font-size:13px;padding:4px 0;color:var(--text)}
.filter-cat a:hover,.filter-cat a.active{color:var(--primary);font-weight:600}
.filter-cat .cat-tree{list-style:none;margin:0;padding:0}
.cat-filter-list{list-style:none;margin:0;padding:0}
.cat-filter-children{list-style:none;margin:0;padding-left:14px}
.cat-filter-item{margin-bottom:6px}
.cat-filter-sub{margin-bottom:4px}
.cat-filter-item > label{display:flex;align-items:center;gap:clamp(7px,.6vw,10px);font-size:clamp(12.75px,.28vw + 11.5px,14px);line-height:1.3;cursor:pointer;min-width:0;padding:2px 3px;border-radius:8px;transition:background .2s ease,color .2s ease}
.cat-filter-item > label:hover{background:#f5f8fd;color:var(--primary)}
.cat-name{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-filter-item input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cat-filter-thumb{display:grid;place-items:center;flex:0 0 clamp(25px,2.1vw,30px);width:clamp(25px,2.1vw,30px);height:clamp(25px,2.1vw,30px);overflow:hidden;border:1px solid #e5eaf1;border-radius:8px;background:#f8fafc;color:#6d7d91;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.cat-filter-thumb img,.cat-filter-thumb svg{width:100%;height:100%;object-fit:cover}.cat-filter-thumb svg{padding:5px}.cat-filter-item input:checked + .cat-filter-thumb{border-color:color-mix(in srgb,var(--primary) 56%,#dfe5ed);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent);transform:scale(1.03)}.cat-filter-item input:checked ~ .cat-name{color:var(--primary);font-weight:700}
.filter-style-checkmarks .cat-filter-thumb{display:none}.filter-style-checkmarks .cat-filter-item input[type=checkbox]{position:static;width:15px;height:15px;opacity:1;pointer-events:auto;accent-color:var(--primary);flex:0 0 auto;margin:0}.filter-style-checkmarks .cat-filter-item input:checked ~ .cat-name{font-weight:650}.filter-style-checkmarks .cat-filter-item>label{padding:3px 1px}
.cat-filter-back > label{font-weight:600;color:var(--primary)}
.cat-filter-back{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.stock-filter-list{list-style:none;margin:0;padding:0}
.stock-filter-item{margin-bottom:6px}
.stock-filter-item > label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-width:0}
html{scrollbar-width:thin;scrollbar-color:#c2c8d2 #f1f3f6}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f1f3f6}
::-webkit-scrollbar-thumb{background:#c2c8d2;border-radius:10px;border:2px solid #f1f3f6}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}
.sidebar{scrollbar-width:thin;scrollbar-color:#c2c8d2 transparent}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{border-color:transparent}
.cat-node{list-style:none}
.cat-row{display:flex;align-items:center;gap:6px;padding:7px 0}
.cat-caret{width:14px;text-align:center;cursor:pointer;color:var(--text-light);transition:transform .4s cubic-bezier(.4,0,.2,1);font-size:11px;user-select:none;flex:0 0 auto}
.cat-caret.open{transform:rotate(90deg)}
.cat-caret.leaf{cursor:default;visibility:hidden}
.cat-link{flex:1;font-size:13px;color:var(--text);line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-link:hover,.cat-link.active{color:var(--primary);font-weight:600}
.cat-children{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1)}
.cat-children > .cat-children-inner{overflow:hidden;min-height:0;list-style:none;margin:0;padding:0}
.cat-node.open > .cat-children{grid-template-rows:1fr}
.cat-children-inner .cat-row{padding-left:14px}
.cat-children-inner .cat-children-inner .cat-row{padding-left:14px}
.price-inputs{display:flex;gap:8px;align-items:center}
.price-inputs input{width:100%;min-width:0;padding:7px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px}
.price-apply{margin-top:10px}
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:18px}
.toolbar .result-count{font-size:13px;color:var(--text-light)}
.toolbar .sort-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;min-width:0}
.toolbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.view-toggle{display:flex;gap:6px}
.view-btn{border:1px solid var(--border);background:#fff;border-radius:var(--radius);padding:7px 12px;font-size:13px;line-height:1;cursor:pointer;color:var(--text-light);display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s}
.view-btn.active{border-color:var(--primary);color:var(--primary);font-weight:600}
.products.view-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(168px,18vw,218px)),1fr));gap:clamp(8px,.85vw,12px);grid-auto-rows:1fr;align-items:stretch}
.products.view-grid .product{height:100%}
.slider-track{align-items:stretch}
.slider-slide.product-slide{display:flex;width:clamp(180px,20vw,220px)}
.slider-slide.product-slide>article,.slider-slide.product-slide>.product{width:100%;height:100%}
.button.is-added,.th-add.is-added,[data-add].is-added{background:#1f9d68!important;border-color:#188657!important;color:#fff!important}
.added-check{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.2);font-size:11px;font-weight:800}
.products.view-list{display:block}
.products.view-list .product{
display:grid;
grid-template-columns:clamp(44px,5vw,56px) minmax(220px,1fr) minmax(105px,.42fr) minmax(90px,.32fr) minmax(82px,.28fr) minmax(76px,.25fr) minmax(126px,.38fr);
grid-template-areas:"thumb name variant sku stock price action";
align-items:center;
gap:6px clamp(10px,1.5vw,18px);
padding:6px 12px;
margin-bottom:6px;
border-radius:6px;
text-align:left;
}
.products.view-list .mf-product-thumbnail{grid-area:thumb;flex:none;height:clamp(44px,5vw,56px);padding:4px}
.products.view-list .mf-product-thumbnail img{max-height:100%;max-width:100%}
.products.view-list .mf-product-details{display:contents}
.products.view-list .mf-product-content{display:contents}
.products.view-list .product-title-cell{grid-area:name;align-self:center;min-width:0;display:flex;flex-direction:column;justify-content:center}
.products.view-list .mf-product-content h2{min-height:0;margin:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.products.view-list .product-color{max-width:100%;margin-top:3px}
.product-variant{display:none}
.products.view-list .product-variant{display:block;grid-area:variant;min-width:0;font-size:12px;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}
.products.view-list .sku{grid-area:sku;font-size:11px;color:var(--text-light);white-space:nowrap}
.products.view-list .price{grid-area:price;font-size:14px;font-weight:700;white-space:nowrap;min-width:72px}
.products.view-list .guest-card-price{grid-area:price;min-width:72px}
.attr-option{display:flex;align-items:center;gap:8px}.filter-color-swatch{display:inline-block;width:12px;height:12px;flex:0 0 auto;border:1px solid rgba(15,23,42,.34);border-radius:50%;background:var(--filter-color,#dbe4ef);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}.attr-option--color span{line-height:1.2}
.products.view-list .loginprices{grid-area:price;font-size:12px;font-weight:600;white-space:normal;min-width:72px}
.products.view-list .loginprices a{color:var(--primary)}
.products.view-list .loginprices{text-align:center;min-width:40px}
.products.view-list .loginprices a{display:inline-grid;place-items:center;width:26px;height:26px;font-size:0;line-height:1;text-decoration:none}
.products.view-list .loginprices a::before{content:"\00d7";color:#dc2626;opacity:.44;font-size:27px;font-weight:500;line-height:1}
.products.view-list .loginprices a:hover::before{opacity:.65}
.products.view-list .stock{grid-area:stock;font-size:12px;white-space:nowrap}
.products.view-list .footer-button{grid-area:action;margin-top:0;flex:none}
.products.view-list .footer-button .button{width:auto;padding:8px 16px;white-space:nowrap}
@media (max-width:640px){
.products.view-list .product{grid-template-columns:clamp(44px,14vw,56px) 1fr auto;grid-template-areas:"thumb name action" "thumb variant action" "thumb sku stock" "thumb price stock";row-gap:2px}
.products.view-list .sku,.products.view-list .price,.products.view-list .stock{white-space:normal}
}
.pagination{display:flex;align-items:center;justify-content:center;flex-direction:column;flex-wrap:wrap;gap:10px;margin-top:26px;min-height:44px}
.pagination-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}.pagination-status{color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.load-more{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;width:min(100%,310px);min-height:48px;margin:clamp(22px,3vw,34px) auto 0;padding:8px 10px 8px 20px;border:1px solid color-mix(in srgb,var(--primary) 34%,var(--border));border-radius:999px;background:transparent;color:color-mix(in srgb,var(--primary) 72%,#26364a);font:inherit;font-size:clamp(13px,.22vw + 12px,14px);font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 9px 24px -22px rgba(21,58,105,.72),inset 0 1px 0 rgba(255,255,255,.8);transition:border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease}
.load-more>span{text-align:left}.load-more>small{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:999px;color:var(--muted);font-size:10px;font-weight:650;white-space:nowrap}
.load-more::after{content:"↓";display:none}
.load-more:hover{border-color:color-mix(in srgb,var(--primary) 68%,var(--border));background:transparent;color:var(--primary);box-shadow:0 15px 32px -24px rgba(21,58,105,.9),inset 0 0 0 1px rgba(63,132,246,.06);transform:translateY(-2px)}
.load-more:hover>small{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));color:var(--primary)}.load-more:active{transform:translateY(0);box-shadow:none}.load-more:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 18%,transparent);outline-offset:3px}.load-more:disabled,.pagination.is-loading .load-more{cursor:wait;opacity:.55;transform:none}
.pagination .page-link{display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:.2s ease}.pagination .page-link:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));color:var(--primary);transform:translateY(-1px)}.pagination .page-link.active{border-color:color-mix(in srgb,var(--primary) 60%,var(--border));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 15%,transparent),0 8px 20px -17px var(--primary);color:var(--primary)}.pagination .page-arrow{border-radius:999px}.infinite-sentinel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;color:var(--muted)}.infinite-sentinel span{width:18px;height:18px;border:2px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-top-color:var(--primary);border-radius:50%;animation:shop-spin .75s linear infinite}.infinite-sentinel small{font-size:12px}.catalog-complete{padding:10px 16px;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.04em}@keyframes shop-spin{to{transform:rotate(360deg)}}
.pop-cats{margin-top:-4px;margin-bottom:14px;padding-left:0;padding-right:0}
.pop-cats__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pop-cats__title{font-size:16px;font-weight:700;color:var(--text);margin:0}
.pop-cats__nav{display:flex;gap:6px}
.pop-cats__nav button{border:1px solid var(--border);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:18px;line-height:1;color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s,color .15s}
.pop-cats__nav button:hover{transform:scale(.94);border-color:var(--primary);color:var(--primary)}
.pop-cats__track{display:flex;gap:10px;width:100%;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
.pop-cats__track.is-static{overflow:hidden}
.pop-cats__track::-webkit-scrollbar{display:none}
.pop-cat{flex:0 0 auto;width:80px;text-align:center;scroll-snap-align:start}
.pop-cat a{display:block;text-decoration:none;color:var(--text)}
.pop-cat__img{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:1px solid var(--border);border-radius:10px;background-color:#f5f6f8;overflow:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .55s ease}
.pop-cat__img img{width:100%;height:100%;object-fit:cover;display:block}
.pop-cat__img .cat-art{width:80px;height:80px;display:block}
.pop-cat a:hover .pop-cat__img{transform:translateY(-1px) scale(1.012);border-color:color-mix(in srgb,var(--primary) 45%,var(--border));box-shadow:0 5px 13px rgba(20,30,50,.075)}
.pop-cat__name{display:block;margin-top:6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-group{margin-bottom:26px}
.cat-group__title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.cat-group__title a{color:inherit;text-decoration:none}
.cat-group__title a:hover{color:var(--primary)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;background:#fff;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s,box-shadow .2s}
.cat-tile:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 10px 22px rgba(72,135,244,.14)}
.cat-tile__media{width:84px;height:84px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#f3f7fd}
.cat-tile__media img{width:100%;height:100%;object-fit:cover;display:block}
.cat-tile__media .cat-art{width:84px;height:84px;display:block}
.cat-tile__name{font-size:12.5px;font-weight:600;text-align:center;line-height:1.25}
.pagination a,.pagination span{padding:8px 13px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;background:#fff}
.pagination a:hover{border-color:var(--primary);color:var(--primary)}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}
.single-product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,36px)}
.gallery .main-image{border:1px solid var(--border);border-radius:8px;background:#fff;padding:clamp(16px,3vw,24px);display:flex;align-items:center;justify-content:center;height:clamp(280px,40vw,380px)}
.gallery .main-image img{max-height:clamp(240px,35vw,330px);object-fit:contain}
.gallery .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery .thumbs img{width:70px;height:70px;object-fit:contain;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:#fff;flex:0 0 auto}
.gallery .thumbs img.active{border-color:var(--primary)}
.summary .product_title{font-size:clamp(20px,3vw,24px);font-weight:700;margin-bottom:8px;line-height:1.3}
.summary .sku{font-size:13px;margin-bottom:14px}
.summary .price-big{font-size:clamp(22px,3vw,26px);font-weight:800;color:var(--primary);margin-bottom:6px}
.summary .loginprices{font-size:15px;margin-bottom:10px}
.summary .stock{font-size:14px;margin-bottom:14px}
.summary .qty-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.qty-row input{width:70px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.summary .attrs{margin-top:18px}
.attr-table{width:100%;border-collapse:collapse;font-size:13px}
.attr-table td{padding:8px 10px;border:1px solid var(--border)}
.attr-table td:first-child{background:var(--bg);font-weight:600;width:40%}
.tabs{margin-top:30px}
.tabs-nav{display:flex;gap:0;border-bottom:2px solid var(--border);flex-wrap:wrap}
.tabs-nav button{background:none;border:0;padding:12px 18px;font-size:14px;font-weight:600;color:var(--text-light);border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs-nav button.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-panel{display:none;padding:18px 0;font-size:14px;line-height:1.7}
.tab-panel.active{display:block}
.related{margin-top:40px}
.cart-table{width:100%;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;border-collapse:collapse}
.cart-table th,.cart-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
.cart-table th{background:var(--bg);font-weight:600}
.cart-table img{width:60px;height:60px;object-fit:contain;border:1px solid var(--border)}
.cart-table .qty{width:64px;min-width:0;padding:8px;border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.cart-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.cart-totals{background:#fff;border:1px solid var(--border);border-radius:8px;padding:20px;max-width:360px;margin-left:auto;width:100%}
.cart-totals .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.cart-totals .row.total{font-size:18px;font-weight:800;border-bottom:0;color:var(--primary)}
.empty-cart{text-align:center;padding:60px 20px;color:var(--text-light)}
.empty-cart .btn{margin-top:16px}
.cart-page{max-width:1180px}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:clamp(12px,1.6vw,20px);align-items:start}
.cart-panel,.cart-summary{background:#fff;border:1px solid #e3e9f1;border-radius:16px;box-shadow:0 12px 34px rgba(19,43,77,.055)}
.cart-panel{min-width:0;overflow:hidden}
.cart-panel__head{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border-bottom:1px solid #edf1f5;font-size:13px;font-weight:750}
.cart-clear{border:0;background:transparent;color:#a04444;font-size:11.5px;font-weight:650;cursor:pointer;padding:7px 8px;border-radius:8px;transition:background .2s,color .2s}
.cart-clear:hover{background:#fff1f1;color:#c42f2f}
.cart-list{padding:0 10px}
.cart-row{position:relative;display:grid;grid-template-columns:38px minmax(230px,1fr) 94px minmax(72px,auto) 30px;gap:9px;align-items:center;min-height:54px;padding:3px 2px;border-bottom:1px solid #edf1f5}
.cart-row:last-child{border-bottom:0}
.cart-row__image{width:38px;height:38px;display:grid;place-items:center;border:1px solid #e5ebf2;border-radius:9px;background:#fff;overflow:hidden}
.cart-row__image img{width:100%;height:100%;padding:3px;object-fit:cover}
.cart-row__product{min-width:0;display:flex;flex-direction:column;gap:2px}
.cart-row__name{overflow:hidden;color:#17243a;font-size:12.5px;font-weight:680;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.cart-row__name:hover{color:var(--primary)}
.cart-row__meta{display:flex;align-items:center;gap:3px 10px;min-width:0;overflow:hidden;color:#7a8797;font-size:9.5px;line-height:1.25;white-space:nowrap}
.cart-row__meta span{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cart-row__meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 7px 2px 0;border-radius:50%;background:#c2cad5}
.cart-row__meta b{color:#59687a;font-weight:700}
.cart-row__meta .cart-row__color{display:inline-flex;align-items:center;overflow:visible}
.cart-row__color i{display:block;width:11px;height:11px;flex:0 0 11px;border:1px solid rgba(15,23,42,.35);border-radius:50%;background:var(--cart-swatch,#d7dee8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.48)}
.cart-row__sku,.cart-row__unit{color:#7a8797;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-row__unit{display:none}
.cart-row__quantity,.cart-row__total{display:flex;flex-direction:column;gap:2px}
.cart-row__label{color:#8995a5;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cart-stepper{display:grid;grid-template-columns:28px 36px 28px;width:92px;height:30px;border:1px solid #dfe6ef;border-radius:9px;overflow:hidden;background:#f8faff}
.cart-stepper button{border:0;background:transparent;color:#5d6c80;font-size:15px;cursor:pointer;transition:background .2s,color .2s}
.cart-stepper button:hover{background:#eaf2ff;color:var(--primary)}
.cart-stepper .qty{width:36px;min-width:0;border:0;border-inline:1px solid #e4eaf2;background:#fff;text-align:center;font-size:12px;font-weight:700;appearance:textfield}
.cart-stepper .qty::-webkit-inner-spin-button,.cart-stepper .qty::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
.cart-stepper .qty:focus{outline:0;box-shadow:inset 0 0 0 2px rgba(72,135,244,.2)}
.cart-row__total strong{color:#17243a;font-size:13px;white-space:nowrap}
.cart-row__remove{width:30px;height:30px;display:grid;place-items:center;border:1px solid #e3e9f1;border-radius:9px;background:#fff;color:#9aa6b5;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s}
.cart-row__remove svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-row__remove:hover{color:#d33f4f;border-color:#f1c4c9;background:#fff4f5;transform:scale(1.04)}
.cart-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:12px 16px;border-top:1px solid #edf1f5;color:#8995a5;font-size:10.5px}
.cart-continue{display:inline-flex;align-items:center;gap:7px;color:#315e9f;font-size:12px;font-weight:680}
.cart-continue:hover{color:var(--primary)}
.cart-summary{position:sticky;top:92px;padding:16px}
.cart-summary__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #edf1f5;color:#17243a;font-size:14px;font-weight:780}
.cart-summary__head span:last-child{color:#718096;font-size:11px;font-weight:600}
.cart-summary__row,.cart-summary__total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;color:#526174;font-size:12px}
.cart-summary__row{border-bottom:1px solid #edf1f5}
.cart-summary__row strong{color:#17243a;font-size:13px}
.cart-summary__row small{color:#788598;font-size:10.5px;text-align:right}
.cart-summary__total{padding:15px 0 13px;color:#17243a;font-weight:750}
.cart-summary__total strong{font-size:18px;letter-spacing:-.02em}
.cart-checkout{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:11px;background:#1f5fe6;color:#fff;font-size:12.5px;font-weight:730;cursor:pointer;box-shadow:0 8px 18px rgba(31,95,230,.18);transition:background .25s,transform .25s,box-shadow .25s}
.cart-checkout:hover{background:#194fc8;transform:translateY(-1px);box-shadow:0 11px 23px rgba(31,95,230,.24)}
.cart-assurance{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:13px;color:#728094;font-size:9.5px}
.cart-assurance span::first-letter{color:#1b9b67}
.empty-cart{max-width:520px;margin:30px auto;padding:46px 24px;border:1px solid #e3e9f1;border-radius:18px;background:#fff;box-shadow:0 14px 38px rgba(19,43,77,.06)}
.empty-cart__icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:18px;background:#edf4ff;font-size:25px}
.empty-cart h1{margin:0 0 7px;color:#17243a;font-size:22px}
.empty-cart p{margin:0;color:#778598;font-size:13px}
@media(max-width:860px){.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.cart-row{grid-template-columns:38px minmax(180px,1fr) 92px minmax(72px,auto) 30px}}
@media(max-width:620px){.cart-row{grid-template-columns:38px minmax(0,1fr) 28px;grid-template-areas:"image product remove" "image qty total";gap:3px 8px;min-height:70px;padding-block:3px}.cart-row__image{grid-area:image;width:38px;height:38px}.cart-row__product{grid-area:product}.cart-row__quantity{grid-area:qty}.cart-row__total{grid-area:total;align-items:flex-end}.cart-row__remove{grid-area:remove}.cart-row__unit{display:block}.cart-row__meta{gap:2px 7px;font-size:8.5px}.cart-row__meta span+span::before{margin-right:5px}.cart-actions>span{display:none}.cart-summary{padding:14px}.cart-list{padding:0 8px}}
.checkout-page{max-width:1040px}
.checkout-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 0 20px}
.checkout-head>div:first-child>span{color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.checkout-head h1{margin:3px 0 5px;font-size:clamp(23px,3vw,31px);letter-spacing:-.04em}
.checkout-head p{margin:0;color:#718096;font-size:12px}
.checkout-steps{display:flex;align-items:center;gap:7px;color:#65758a;font-size:10px;font-weight:650}
.checkout-steps b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#edf4ff;color:var(--primary);font-size:10px}
.checkout-steps i{width:32px;height:1px;background:#dce4ef}
.checkout-notice{margin-bottom:14px;padding:10px 13px;border:1px solid #f2d494;border-radius:11px;background:#fff9e9;color:#7d5d17;font-size:12px}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,315px);gap:clamp(12px,1.6vw,18px);align-items:start}
.checkout-main{display:grid;gap:12px}
.checkout-card,.checkout-order{border:1px solid #e3e9f1;border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(19,43,77,.05)}
.checkout-card{padding:15px}
.checkout-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.checkout-card__head>div{display:flex;align-items:center;gap:9px}
.checkout-card__head>div>span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#edf4ff;color:#286bd4;font-size:9px;font-weight:800}
.checkout-card__head h2{margin:0;color:#17243a;font-size:14px;letter-spacing:-.015em}
.checkout-card__head small{color:#8a96a5;font-size:9.5px}
.checkout-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px}
.checkout-address{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:93px;padding:11px 32px 10px 11px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#66758a;text-align:left;font-size:9.5px;line-height:1.32;cursor:pointer;transition:border-color .22s,background .22s,box-shadow .22s,transform .22s}
.checkout-address strong{color:#17243a;font-size:11.5px}
.checkout-address:hover{border-color:#b9cff5;background:#fbfdff;transform:translateY(-1px)}
.checkout-address.is-selected{border-color:#5a91ee;background:#f5f9ff;box-shadow:0 0 0 2px rgba(72,135,244,.1)}
.checkout-address__check{position:absolute;right:9px;top:9px;width:18px;height:18px;display:grid;place-items:center;border:1px solid #dbe4ef;border-radius:50%;color:transparent;background:#fff;font-size:9px}
.checkout-address.is-selected .checkout-address__check{border-color:var(--primary);background:var(--primary);color:#fff}
.checkout-no-address{padding:12px;border:1px dashed #cfd9e6;border-radius:11px;background:#fafcff;color:#738196;font-size:11px}
.checkout-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 11px}
.checkout-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.checkout-field--wide{grid-column:1/-1}
.checkout-field>span{color:#526174;font-size:10px;font-weight:700}
.checkout-field input,.checkout-field select{width:100%;height:38px;min-width:0;padding:0 11px;border:1px solid #dce4ee;border-radius:10px;background:#fff;color:#17243a;font-size:12px;transition:border-color .2s,box-shadow .2s}
.checkout-field input:focus,.checkout-field select:focus{outline:0;border-color:#6397ef;box-shadow:0 0 0 3px rgba(72,135,244,.11)}
.checkout-save-note{display:flex;align-items:center;gap:6px;margin:10px 0 0;color:#718096;font-size:9.5px}.checkout-save-note span{color:#199769}
.checkout-gateways{display:grid;grid-template-columns:1fr;gap:7px}
.checkout-gateway{position:relative;display:grid;grid-template-columns:18px 34px 1fr auto;align-items:center;gap:8px;padding:10px;border:1px solid #dfe6ef;border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.checkout-gateway:has(input:checked){border-color:#5a91ee;background:#f5f9ff;box-shadow:0 0 0 2px rgba(72,135,244,.1)}
.checkout-gateway input{accent-color:var(--primary)}
.checkout-gateway__mark{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#6657e8;color:#fff;font-weight:850}.checkout-gateway__mark--paypal{background:#0876c9}
.checkout-gateway strong,.checkout-gateway small{display:block}.checkout-gateway strong{font-size:11.5px}.checkout-gateway small{margin-top:2px;color:#7a8798;font-size:8.8px}
.checkout-gateway em{padding:3px 5px;border-radius:5px;background:#fff0c9;color:#7b5b08;font-size:7px;font-style:normal;font-weight:800;letter-spacing:.08em}
.checkout-gateway.is-disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.5)}
.checkout-gateway-warning{margin-top:9px;padding:9px 11px;border-radius:9px;background:#fff5f5;color:#a34444;font-size:10px}
.checkout-order{position:sticky;top:92px;padding:15px}
.checkout-payment-side{margin:2px 0 12px;padding-top:12px;border-top:1px solid #edf1f5}
.checkout-payment-side__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.checkout-payment-side__head strong{color:#26364d;font-size:11px}.checkout-payment-side__head small{padding:3px 6px;border-radius:6px;background:#fff3d3;color:#7b5b08;font-size:7.5px;font-weight:800;text-transform:uppercase}
.checkout-items{max-height:285px;overflow:auto;margin:0 -3px;padding:0 3px;scrollbar-width:thin;scrollbar-color:rgba(119,137,160,.35) transparent}
.checkout-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #edf1f5}
.checkout-item img{width:38px;height:38px;padding:2px;border:1px solid #e4eaf1;border-radius:9px;object-fit:cover}
.checkout-item div{min-width:0}.checkout-item strong{display:block;overflow:hidden;color:#25344a;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.checkout-item span{display:block;margin-top:2px;color:#8490a0;font-size:9px}.checkout-item>b{color:#25344a;font-size:10.5px;white-space:nowrap}
.checkout-total-row,.checkout-grand-total{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf1f5;color:#637287;font-size:11px}.checkout-total-row small{font-size:9.5px}.checkout-grand-total{border:0;color:#17243a;font-weight:750}.checkout-grand-total b{font-size:18px;letter-spacing:-.03em}
.checkout-coupon{margin:12px 0 2px;padding:12px;border:1px solid #e4ebe8;border-radius:12px;background:linear-gradient(145deg,#fbfdfc,#f5f8f7)}.checkout-coupon>label{display:block;margin-bottom:7px;color:#34483f;font-size:10px;font-weight:750}.checkout-coupon>div{display:flex}.checkout-coupon input{min-width:0;flex:1;height:38px;padding:0 11px;border:1px solid #d7e1de;border-radius:9px 0 0 9px;background:#fff;text-transform:uppercase}.checkout-coupon button{height:38px;padding:0 14px;border:1px solid #aebfba;border-left:0;border-radius:0 9px 9px 0;background:rgba(233,240,238,.8);color:#3e5b51;font-weight:750;cursor:pointer}.checkout-coupon button:hover{background:#e1ebe7}.checkout-coupon small{display:block;min-height:14px;margin-top:6px;color:#4d7868;font-size:9px}.checkout-discount b{color:#3d7a64}
.checkout-place{width:100%;height:43px;border:0;border-radius:11px;background:#1f5fe6;color:#fff;font-size:12px;font-weight:750;cursor:pointer;box-shadow:0 9px 20px rgba(31,95,230,.2);transition:background .2s,transform .2s,box-shadow .2s}.checkout-place:hover{background:#194fc8;transform:translateY(-1px);box-shadow:0 12px 24px rgba(31,95,230,.26)}.checkout-place:disabled{opacity:.6;cursor:wait}
.checkout-message{min-height:14px;margin-top:8px;color:#526174;font-size:10px;text-align:center}.checkout-message.is-error{color:#bd303e}
.checkout-security{margin-top:8px;color:#8a96a5;font-size:8.5px;text-align:center}
.checkout-result{max-width:560px;margin:50px auto;padding:30px;border:1px solid #e3e9f1;border-radius:18px;background:#fff;text-align:center}.checkout-result h1{font-size:23px}.checkout-result p{margin:8px 0 18px;color:#718096}
@media(max-width:880px){.checkout-layout{grid-template-columns:1fr}.checkout-order{position:static}.checkout-head{align-items:flex-start}.checkout-steps{display:none}}
@media(max-width:600px){.checkout-fields{grid-template-columns:1fr}.checkout-field--wide{grid-column:auto}.checkout-head h1{font-size:23px}.checkout-card,.checkout-order{padding:12px}.checkout-card__head small{display:none}}
.account-note{font-size:13px;color:var(--text-light);margin-bottom:16px}
.myaccount-login{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);max-width:900px;margin:0 auto;padding-top:8px}
.myaccount-login h2{font-size:22px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.myaccount-login label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.myaccount-login input[type=text],.myaccount-login input[type=email],.myaccount-login input[type=password]{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;font-size:14px;transition:.2s}
.myaccount-login input:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 3px rgba(72,135,244,.15)}
.remember{display:flex;align-items:center;gap:8px;font-weight:500;margin:4px 0 16px}
.remember input{width:auto;margin:0}
.lost-pass{font-size:13px;margin-top:10px}
.lost-pass a{color:var(--primary)}
.myaccount{display:grid;grid-template-columns:240px 1fr;gap:clamp(20px,3vw,40px);align-items:start;padding-top:8px}
.myaccount-nav ul{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.myaccount-nav li a{display:block;padding:13px 18px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);transition:.2s}
.myaccount-nav li:last-child a{border-bottom:0}
.myaccount-nav li a:hover{background:var(--bg);color:var(--primary)}
.myaccount-nav li.is-active a{background:var(--primary);color:#fff;font-weight:600}
.myaccount-content{background:#fff;border:1px solid var(--border);border-radius:8px;padding:clamp(20px,3vw,32px);min-height:300px}
.myaccount-content h2{font-size:20px;margin-bottom:14px}
.acct-greeting{margin-bottom:14px;font-size:15px}
.acct-greeting strong{color:var(--primary)}
.acct-greeting a{color:var(--primary)}
.acct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:22px}
.acct-card{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--border);border-radius:8px;background:var(--bg);text-decoration:none;color:var(--text);transition:.2s}
.acct-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.acct-card b{font-size:26px;color:var(--primary)}
.acct-card span{font-size:13px}
.acct-empty{padding:30px 0;text-align:center;color:var(--text-light)}
.acct-order-success{margin:0 0 14px;padding:13px 15px;border:1px solid #b9ddd0;border-radius:12px;background:linear-gradient(135deg,#f1faf6,#fbfdfc);color:#275f4e;font-size:12px;box-shadow:0 9px 22px -20px rgba(26,91,70,.6)}.acct-order-success b,.acct-order-success span{display:block}.acct-order-success b{font-size:13px}.acct-order-success span{margin-top:2px;color:#698078;font-size:10px}.acct-order-success p{margin:8px 0 0;line-height:1.55}
.acct-orders-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}.acct-orders-heading>div>span{display:block;margin-bottom:5px;color:#2878f0;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.acct-orders-heading h2{margin:0 0 5px;font-size:24px}.acct-orders-heading p{margin:0;color:#6b7b91;font-size:12px}.acct-orders-heading>b{flex:0 0 auto;padding:7px 11px;border:1px solid #dce5f0;border-radius:999px;background:#f6f9fc;color:#466079;font-size:10px}.acct-orders-table-wrap{border:1px solid #dde6ef;border-radius:14px;background:#fff;box-shadow:0 14px 34px -30px rgba(25,48,78,.55);overflow:hidden}.acct-orders-table{width:100%;border-collapse:collapse;table-layout:auto}.acct-orders-table th{padding:10px 12px;border-bottom:1px solid #dde6ef;background:#f7f9fc;color:#6c7b8d;font-size:9px;font-weight:850;letter-spacing:.08em;text-align:left;text-transform:uppercase}.acct-orders-table th:last-child{text-align:center}.acct-orders-table td{padding:13px 12px;border-bottom:1px solid #e7edf3;color:#1e2c3d;font-size:11px;vertical-align:middle}.acct-orders-table tbody:last-child tr:last-child td{border-bottom:0}.acct-orders-table td:first-child{min-width:132px}.acct-orders-table td:nth-child(4){white-space:nowrap}.acct-orders-table td>small,.acct-orders-table td>strong{display:block}.acct-orders-table td>small{margin-top:3px;color:#7b8999;font-size:9.5px;line-height:1.35}.acct-orders-table td>strong{font-size:12px}.acct-order-number{padding:0;border:0;background:none;color:#0875df;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.acct-order-number:hover{text-decoration:underline}.acct-order-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #d9e3ed;border-radius:999px;background:#f2f6fa;color:#53677c;font-size:9.5px;font-weight:800;white-space:nowrap}.acct-order-status i{width:6px;height:6px;border-radius:50%;background:currentColor}.acct-order-status.is-complete{border-color:#c8e8d8;background:#edf9f3;color:#168451}.acct-order-status.is-processing{border-color:#cddffa;background:#eef5ff;color:#2568bd}.acct-order-status.is-hold{border-color:#f0d5ad;background:#fff7e9;color:#a85b10}.acct-order-status.is-failed{border-color:#f1caca;background:#fff1f1;color:#c33434}.acct-order-status.is-refunded{border-color:#ddd7ef;background:#f7f4ff;color:#7655aa}.acct-order-actions{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.acct-order-action{display:inline-grid;width:31px;height:31px;min-height:0;place-items:center;padding:0;border:1px solid #d5e0eb;border-radius:8px;background:#fff;color:#31516f;text-decoration:none;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}.acct-order-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.acct-order-action:hover{border-color:#9fbbd7;background:#f6faff;color:#0875df;transform:translateY(-1px)}.acct-order-action.is-primary{border-color:#2878f0;background:#2878f0;color:#fff}.acct-order-action.is-primary:hover{border-color:#1468db;background:#1468db;color:#fff}.acct-order-action.is-track{border-color:#b9dccb;background:#f2faf6;color:#267552}.acct-order-tracking{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acct-order-detail-row[hidden]{display:none!important}.acct-order-detail-row>td{padding:0;background:#f7fafe}.acct-order-detail{padding:18px 20px;border-bottom:1px solid #dfe8f1}.acct-order-detail-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.acct-order-detail-head span,.acct-order-detail-head b{display:block}.acct-order-detail-head div span{color:#2878f0;font-size:10px;font-weight:850;text-transform:uppercase}.acct-order-detail-head div b{margin-top:2px;font-size:12px}.acct-order-detail-head>span{padding:5px 8px;border-radius:999px;background:#eaf2fc;color:#315f94;font-size:9px;font-weight:800}.acct-order-detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(190px,.75fr);gap:18px}.acct-order-detail h3{margin:0 0 9px;font-size:12px}.acct-order-products{border:1px solid #dfe7f0;border-radius:10px;background:#fff;overflow:hidden}.acct-order-products table{width:100%;border-collapse:collapse}.acct-order-products th,.acct-order-products td{padding:9px 10px;border-bottom:1px solid #e8edf3;font-size:9.5px;text-align:left}.acct-order-products th{background:#f8fafc;color:#748397;font-size:8px;text-transform:uppercase}.acct-order-products th:nth-child(2),.acct-order-products td:nth-child(2){width:44px;text-align:center}.acct-order-products th:last-child,.acct-order-products td:last-child{text-align:right}.acct-order-products tr:last-child td{border-bottom:0}.acct-order-products b,.acct-order-products small{display:block}.acct-order-products b{font-size:10px}.acct-order-products small{margin-top:2px;color:#8290a0;font-size:8.5px}.acct-order-detail aside{padding:13px;border:1px solid #dfe7f0;border-radius:10px;background:#fff}.acct-order-detail dl{margin:0}.acct-order-detail dl>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;color:#657589;font-size:9.5px}.acct-order-detail dl dd{margin:0;color:#25384d;font-weight:750}.acct-order-detail dl .is-total{margin-top:4px;padding-top:9px;border-top:1px solid #e3eaf1;color:#17283a;font-weight:850}.acct-order-detail aside>p{margin:10px 0 0;padding-top:10px;border-top:1px solid #e5ebf1;color:#6f7f91;font-size:9px}.acct-order-detail aside>p span,.acct-order-detail aside>p b{display:block}.acct-order-detail aside>p b{margin-top:3px;color:#293d52;font-size:9.5px;line-height:1.5}.acct-order-detail-loading{padding:20px;text-align:center;color:#748397;font-size:11px}.acct-orders-empty{display:grid;gap:4px}.acct-orders-empty strong{color:#273a50;font-size:13px}.acct-orders-empty span{font-size:11px}
.return-history{display:grid;gap:7px;margin-bottom:22px}.return-history article{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e0e9e5;border-radius:11px;background:#fff}.return-history article div span{display:block;margin-top:2px;color:#829089;font-size:9.5px}.return-history article strong{font-size:10.5px}.return-history article>p{grid-column:1/-1;margin:0;padding-top:8px;border-top:1px solid #edf1ef;color:#60716b;font-size:10.5px}.return-request-form{margin-bottom:8px;border:1px solid #dfe8e4;border-radius:12px;background:#fff;overflow:hidden}.return-request-form>header{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:#fbfcfc}.return-request-form header b,.return-request-form header span{display:block}.return-request-form header b{font-size:11.5px}.return-request-form header span{color:#85938e;font-size:9px}.return-form-toggle{border:1px solid #cad8d3;border-radius:8px;background:#f2f7f5;color:#49665c;padding:7px 10px;font:inherit;font-size:10px;font-weight:750;cursor:pointer}.return-request-fields{display:grid;gap:11px;padding:13px;border-top:1px solid #e7eeeb}.return-request-fields>label{display:grid;gap:5px;color:#50635c;font-size:10px;font-weight:700}.return-request-fields select,.return-request-fields textarea,.return-request-fields input{border:1px solid #d9e3df;border-radius:8px;background:#fff;padding:8px;color:#1f2937;font:inherit}.return-product-list{display:grid;gap:6px}.return-product-list>label{display:grid;grid-template-columns:auto minmax(0,1fr) 70px 125px;align-items:center;gap:8px;padding:8px;border:1px solid #e4ebe8;border-radius:9px}.return-product-list b,.return-product-list small{display:block}.return-product-list b{font-size:10.5px}.return-product-list small{color:#8b9893;font-size:9px}.return-product-list .return-qty,.return-product-list .return-condition{width:100%;padding:6px;font-size:9.5px}.return-form-message{margin:0;color:#526c63;font-size:10px}@media(max-width:680px){.return-history article{grid-template-columns:1fr auto}.return-product-list>label{grid-template-columns:auto 1fr}.return-product-list .return-qty,.return-product-list .return-condition{grid-column:2}}
.bulk-order-input{width:100%;min-height:210px;resize:vertical;margin:10px 0 12px;padding:14px;border:1px solid #dce4eb;border-radius:13px;background:#fbfcfd;font:500 13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;outline:0}.bulk-order-input:focus{border-color:#88a39a;box-shadow:0 0 0 3px rgba(107,137,127,.12)}.bulk-result{display:grid;gap:6px;margin:15px 0}.bulk-result p{display:flex;justify-content:space-between;gap:16px;margin:0;padding:10px 12px;border:1px solid #dfe8e4;border-radius:10px;background:#f7faf9;font-size:12px}.bulk-result p strong{color:#467265}.bulk-result .is-unavailable{opacity:.65;background:#faf8f7}.bulk-result .is-unavailable strong{color:#9c5b55}
.saved-list-create{display:flex;gap:9px;margin:14px 0 18px}.saved-list-create input{flex:1;min-width:0;padding:10px 12px;border:1px solid #dce4eb;border-radius:11px;background:#fbfcfd}.saved-list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}.saved-list-card{padding:14px;border:1px solid #dfe6e3;border-radius:14px;background:linear-gradient(145deg,#fff,#f8faf9);box-shadow:0 8px 22px rgba(31,54,48,.05)}.saved-list-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #e8eeeb}.saved-list-card header b,.saved-list-card header small{display:block}.saved-list-card header small{margin-top:3px;color:#7c8b87;font-size:10px}.saved-list-delete{border:0;background:none;color:#94615b;font-size:10px;cursor:pointer}.saved-list-card p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:8px 0;border-bottom:1px solid #edf1ef;font-size:11px}.saved-list-card>div{margin-bottom:12px}.saved-list-card em{display:block;padding:15px 0;color:#87938f;font-size:11px}.store-notice{position:fixed;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,30px);z-index:1000;max-width:min(360px,calc(100vw - 28px));padding:11px 15px;border:1px solid rgba(85,116,106,.28);border-radius:12px;background:rgba(247,251,249,.96);box-shadow:0 12px 34px rgba(28,51,44,.16);color:#29483e;font-size:12px;font-weight:650;opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s ease}.store-notice.is-visible{opacity:1;transform:translateY(0)}
.acct-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.acct-form input{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;font-size:14px}
.acct-form input:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 3px rgba(72,135,244,.15)}
@media(max-width:768px){
.myaccount,.myaccount-login{grid-template-columns:1fr}
.acct-orders-heading{align-items:flex-start}.acct-orders-table-wrap{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}.acct-orders-table,.acct-orders-table tbody{display:block}.acct-orders-table thead{display:none}.acct-orders-table .acct-order-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;padding:14px;border:1px solid #dde6ef;border-radius:13px;background:#fff;box-shadow:0 10px 24px -24px rgba(25,48,78,.55)}.acct-orders-table .acct-order-row td{display:block;padding:0;border:0}.acct-orders-table .acct-order-row td::before{display:block;margin-bottom:4px;color:#8794a3;content:attr(data-label);font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.acct-orders-table .acct-order-row td:first-child,.acct-orders-table .acct-order-row td:last-child{grid-column:1/-1}.acct-order-actions{justify-content:center;flex-wrap:wrap;white-space:normal}.acct-order-detail-row{display:block;margin:-10px 0 10px}.acct-order-detail-row>td{display:block}.acct-order-detail{padding:14px;border:1px solid #dde6ef;border-top:0;border-radius:0 0 13px 13px}.acct-order-detail-grid{grid-template-columns:1fr}.bulk-result p{display:grid;gap:4px}.saved-list-create{align-items:stretch;flex-direction:column}
}
.cart-drawer{position:fixed;top:0;right:0;width:380px;max-width:90vw;height:100%;background:#fff;z-index:300;transform:translateX(100%);transition:.3s;box-shadow:-8px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--border)}
.cart-drawer-head h3{font-size:17px}
.cart-drawer-close{background:none;border:0;font-size:24px;line-height:1}
.cart-drawer-body{flex:1;overflow:auto;padding:14px}
.cart-drawer-foot{padding:16px;border-top:1px solid var(--border)}
.cart-drawer-foot .btn{width:100%}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:250;display:none}
.overlay.open{display:block}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-inner{background:#fff;border-radius:10px;padding:clamp(20px,4vw,30px);max-width:420px;width:100%;position:relative}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:24px}
.modal h3{font-size:20px;margin-bottom:10px}
.login-note{font-size:13px;color:var(--text-light);margin-bottom:18px}
.modal label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.modal input{width:100%;min-width:0;padding:11px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;font-size:14px}
.login-demo{font-size:12px;color:var(--text-light);margin-top:12px;text-align:center}
.login-price-link,.loginprices a{color:var(--primary);font-weight:700;text-decoration:none;font-size:13px}
[hidden]{display:none!important}.is-guest .price,.is-guest .price-big,.is-guest .loginprices,.is-guest .th-product__price,.is-guest .th-hero-card__price,.is-guest .t4-product__price,.is-guest .t5-product__price{display:none!important}.is-guest button[data-add]{display:none!important}
button[data-add].login-required,button[data-add].login-required:disabled{background:rgba(220,38,38,.15)!important;border:1px solid rgba(185,28,28,.24)!important;color:#991b1b!important;box-shadow:none!important;cursor:not-allowed!important;opacity:1!important;filter:none!important;transform:none!important}
button[data-add].login-required:hover{background:rgba(220,38,38,.15)!important;transform:none!important}
.pd-actions .login-required,.pd-actions .login-required:disabled{background:rgba(220,38,38,.15)!important;border-color:rgba(185,28,28,.24)!important;color:#991b1b!important;opacity:1;cursor:not-allowed;box-shadow:none}
.guest-price-mask{position:relative;display:inline-flex;width:max-content;max-width:100%;flex-direction:column;gap:4px;margin:18px 0 10px;padding:11px 16px;overflow:hidden;border:1px solid rgba(185,28,28,.14);border-radius:11px;background:linear-gradient(135deg,rgba(254,242,242,.92),rgba(255,255,255,.92));user-select:none}.guest-price-mask span{color:rgba(127,29,29,.26);font-size:22px;font-weight:800;letter-spacing:.08em;filter:blur(4px)}.guest-price-mask::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.75) 48%,transparent 70%);transform:translateX(-110%);animation:maskedPriceSweep 3.8s ease-in-out infinite}.guest-price-mask small{position:relative;z-index:1;color:#8b5a5a;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}.pd-actions--guest{align-items:stretch}.pd-add-guest,.pd-add-guest:disabled{background:rgba(220,38,38,.14)!important;border:1px solid rgba(185,28,28,.22)!important;color:rgba(153,27,27,.72)!important;box-shadow:none!important;cursor:not-allowed!important;opacity:1!important;transform:none!important}.pd-add-guest:hover{background:rgba(220,38,38,.14)!important;transform:none!important}.button.is-added:disabled,.th-add.is-added:disabled,[data-add].is-added:disabled{cursor:not-allowed!important;opacity:.9!important;transform:none!important;box-shadow:none!important}@keyframes maskedPriceSweep{0%,45%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}@media(prefers-reduced-motion:reduce){.guest-price-mask::after{animation:none}}
.guest-card-price{position:relative;display:inline-grid;width:88px;height:27px;place-items:center;overflow:hidden;border:1px solid rgba(185,28,28,.09);border-radius:8px;background:rgba(254,242,242,.46);user-select:none}.guest-card-price span{color:rgba(153,27,27,.42);font-size:10.5px;font-weight:680;letter-spacing:.01em}.guest-card-add,.guest-card-add:disabled{display:flex!important;background:rgba(220,38,38,.075)!important;border:1px solid rgba(185,28,28,.14)!important;color:rgba(153,27,27,.48)!important;box-shadow:none!important;cursor:not-allowed!important;opacity:1!important;transform:none!important}.guest-card-add:hover{background:rgba(220,38,38,.075)!important;transform:none!important}
.account-gate{max-width:620px;margin:48px auto;padding:46px 28px;text-align:center;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 16px 44px rgba(25,52,92,.08)}.account-gate .auth-lock{margin:0 auto 14px}.account-gate h1{font-size:26px;margin-bottom:8px}.account-gate p{color:var(--text-light);margin-bottom:22px}
.status-pill{display:inline-block;margin-bottom:12px;padding:5px 10px;border-radius:999px;background:#fff3cd;color:#8a5b00;font-size:12px;font-weight:700}.pending-details{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.pending-details span{padding:12px;border:1px solid var(--border);border-radius:10px;color:var(--text-light);font-size:11px}.pending-details strong{display:block;margin-top:4px;color:var(--text);font-size:13px;overflow-wrap:anywhere}
.auth-modal-card{max-width:610px;max-height:min(88vh,780px);overflow:auto;padding:20px 22px;border:1px solid rgba(72,135,244,.14);border-radius:16px;background:linear-gradient(155deg,#fff 0%,#fbfdff 100%);box-shadow:0 24px 65px rgba(9,30,66,.2);scrollbar-width:thin;scrollbar-color:rgba(103,119,143,.18) transparent}
.auth-modal-card:has(.auth-panel[data-auth-panel="login"].active){max-width:430px;padding:22px 28px}.auth-panel[data-auth-panel="login"] form{max-width:350px;margin:0 auto}.auth-panel[data-auth-panel="login"] .login-demo{max-width:350px;margin-left:auto;margin-right:auto}
.auth-modal-card:hover{scrollbar-color:rgba(72,135,244,.52) transparent}
.auth-modal-card::-webkit-scrollbar{width:5px}.auth-modal-card::-webkit-scrollbar-track{background:transparent}.auth-modal-card::-webkit-scrollbar-thumb{background:rgba(103,119,143,.16);border-radius:99px}.auth-modal-card:hover::-webkit-scrollbar-thumb{background:rgba(72,135,244,.5)}
.auth-heading{display:flex;gap:10px;align-items:flex-start;padding-right:25px;margin-bottom:14px}
.auth-heading h3{margin:0 0 2px;font-size:18px}.auth-heading p{margin:0;color:var(--text-light);font-size:11.5px;line-height:1.42}
.auth-lock{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#edf4ff,#e3edff);font-size:16px;box-shadow:inset 0 0 0 1px rgba(72,135,244,.1)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#f1f4f8;border-radius:10px;margin-bottom:14px}
.auth-tab{border:0;background:transparent;border-radius:7px;padding:8px;font-size:12.5px;font-weight:700;color:#667085;cursor:pointer;transition:.25s ease}
.auth-tab.active{background:#fff;color:var(--primary);box-shadow:0 3px 12px rgba(21,42,80,.1)}
.auth-panel[hidden]{display:none}.auth-panel.active{display:block}
.auth-modal-card label{color:#344054;font-size:11.5px!important}.auth-modal-card input,.auth-modal-card select{width:100%;min-width:0;height:38px;margin-top:4px;margin-bottom:8px;padding:8px 10px;border:1px solid #dfe5ed;border-radius:8px;background:#fff;font-size:12.5px;transition:border-color .2s,box-shadow .2s}
.auth-modal-card input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(72,135,244,.14);background:#fff}
.password-control{position:relative;display:block}.password-control input{padding-right:40px!important}.password-toggle{position:absolute;right:5px;top:8px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:transparent;color:#778397;cursor:pointer;transition:background .22s,color .22s,transform .22s}.password-toggle:hover{background:#edf4ff;color:var(--primary);transform:scale(1.04)}.password-toggle:focus-visible{outline:2px solid rgba(72,135,244,.45);outline-offset:1px}.password-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.password-toggle.is-visible svg{color:var(--primary)}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.auth-grid-3{grid-template-columns:1fr 1fr 1fr}.auth-modal-card label small{font-weight:400;color:var(--text-light)}.password-help{font-size:11px;color:var(--text-light);margin:-6px 0 13px}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px}.auth-check{display:flex!important;align-items:center;gap:6px;margin:0!important;font-weight:500!important}.auth-check input{width:14px!important;height:14px;margin:0!important}.auth-link{border:0;background:none;color:var(--primary);font-size:11px;cursor:pointer}.auth-terms{font-size:11px!important;margin:2px 0 11px!important}.auth-modal-card .btn-block{min-height:39px;padding:8px 14px;border-radius:8px;font-size:12.5px}
.auth-message{min-height:15px;margin:8px 0 0;text-align:center;color:#16794d;font-size:11.5px;font-weight:600}.auth-message.is-error{color:#b42318}.login-demo{font-size:10.5px;margin-top:8px}.password-help{font-size:10px!important;margin:-2px 0 8px!important}
@media(max-width:560px){.auth-modal-card{padding:20px 16px}.auth-grid,.auth-grid-3,.pending-details{grid-template-columns:1fr}.auth-heading{margin-bottom:15px}.auth-modal-card input{margin-bottom:10px}}
.site-footer{background:#1c1f23;color:#cfd3d8;margin-top:40px}
.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,3vw,30px);padding:clamp(30px,5vw,44px) var(--pad-x)}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:14px}
.footer-col a{color:#cfd3d8}
.footer-col a:hover{color:var(--primary)}
.footer-col p{font-size:13px;line-height:1.7}
.footer-bottom{background:#15171a;border-top:1px solid #2a2d31;padding:14px 0;font-size:12px;color:#8a8f96;text-align:center}
.loading{padding:60px;text-align:center;color:var(--text-light)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
.shop-layout{grid-template-columns:1fr}
.sidebar{position:static;max-height:none;overflow:visible}
.hero{grid-template-columns:1fr}
.single-product{grid-template-columns:1fr}
.header-logo{flex:0 0 100%}
.header-extras{flex:0 0 100%}
}
@media(max-width:520px){
.cart-totals{margin-left:0}
.nav-tag{display:none}
}
:root{
--navy:#003366;
--navy2:#0099cc;
}
.home .announcement{background:linear-gradient(90deg,var(--navy),var(--navy2))}
.home .announcement .container{justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.home .announcement .ann-sep{opacity:.55;color:#fff}
.home .announcement a{text-decoration:none}
.home .nav-links a:hover,
.home .nav-links a.active{color:var(--navy)}
.home .hp-hero{background:transparent}
.home .hp-hero__actions .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.home .hp-hero__actions .btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.home .hp-hero__actions .btn-primary{background:linear-gradient(90deg,#37e0ff,#3b82f6);color:#04122b;border-color:transparent;box-shadow:0 12px 30px rgba(56,189,248,.35)}
.home .hp-hero__actions .btn-primary:hover{filter:brightness(1.08);background:linear-gradient(90deg,#37e0ff,#3b82f6);color:#04122b}
.home .hp-deal{grid-template-columns:minmax(0,1fr) auto;background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;border-color:transparent}
.home .hp-deal__copy h2,
.home .hp-deal__copy .eyebrow{color:#fff}
.home .hp-deal__copy .eyebrow{color:rgba(255,255,255,.85)}
.home .hp-deal__copy p{color:rgba(255,255,255,.92)}
.home .hp-deal .btn-primary{background:#fff;color:var(--navy);border-color:#fff}
.home .hp-deal .btn-primary:hover{background:rgba(255,255,255,.9);color:var(--navy)}
.home .hp-deal__count span{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.home .hp-deal__media{display:flex;align-items:center;justify-content:center}
.home .hp-deal__media img{width:100%;max-width:clamp(180px,22vw,260px);border-radius:16px;box-shadow:0 22px 44px rgba(0,0,0,.28);object-fit:cover;aspect-ratio:4/3}
.home .site-footer{background:var(--navy)}
.home .footer-bottom{background:#012448;border-top-color:#01315c}
body.js-reveal .th-section{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.js-reveal .th-section.in{opacity:1;transform:none}
.cms-public{padding-top:28px;padding-bottom:60px}.cms-public>header{margin:24px 0}.cms-public-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.cms-public-card{overflow:hidden;border:1px solid #e0e7e5;border-radius:16px;background:#fff;box-shadow:0 18px 45px -38px rgba(20,45,36,.55)}.cms-public-card>div{padding:18px}.cms-public-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.cms-public-card h2{margin:6px 0;font-size:19px}.cms-public-card a{color:inherit;text-decoration:none}.cms-public-card p{color:#687a74;line-height:1.6}.cms-public-single{max-width:960px}.cms-public-hero{width:100%;max-height:480px;object-fit:cover;border-radius:18px}.cms-public-single>header{margin:26px 0}.cms-public-single h1{font-size:clamp(30px,5vw,54px)}.cms-public-content{font-size:17px;line-height:1.8}.cms-public-content img{max-width:100%;height:auto}
.acct-address-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.acct-address-head h2{margin:0}.acct-address-head p{color:var(--muted);margin:5px 0 0}.acct-address-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}.acct-address-card{border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;justify-content:space-between;gap:12px;background:rgba(255,255,255,.72)}.acct-address-card b,.acct-address-card span{display:block}.acct-address-card span{font-size:12px;text-transform:uppercase;color:var(--primary);margin-top:3px}.acct-address-card p{line-height:1.55;color:var(--muted);margin:10px 0 0}.acct-address-delete{align-self:flex-start;border:1px solid var(--border);background:transparent;border-radius:9px;padding:7px 10px;color:#9a4040;cursor:pointer}.acct-address-form{margin-top:18px;padding:18px;border:1px solid var(--border);border-radius:14px;background:#fafcfb}.acct-address-form[hidden]{display:none}.acct-address-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.maintenance-banner{position:relative;z-index:1000;padding:10px clamp(16px,4vw,64px);border-bottom:1px solid rgba(120,91,35,.22);background:linear-gradient(90deg,#fff8e8,#f6f1e6,#fff8e8);color:#5d4b2a;font-size:clamp(12px,1.1vw,14px);font-weight:650;line-height:1.45;text-align:center}
/*===assets/css/compact-ui.css===*/:root{
--sp:clamp(10px,1.5vw,15px);
--sp-lg:clamp(16px,2.2vw,22px);
--fs-h1:clamp(19px,2.5vw,25px);
--fs-h2:clamp(15px,1.7vw,20px);
}
.announcement .container{padding-top:6px;padding-bottom:6px}
.header-main{padding:10px 0}
.header-row{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:18px}
.header-logo{flex-basis:clamp(140px,14vw,180px)}
.header-logo .site-logo{height:clamp(32px,4vw,40px)}
.header-extras{display:grid;grid-template-columns:minmax(320px,650px) auto;justify-content:center;align-items:center;gap:28px;min-width:0}
.dgwt-wcas-search-wrapp{width:100%;max-width:560px}
.dgwt-wcas-sf-wrapp{box-shadow:none;border-color:#dbe2ec}
.dgwt-wcas-search-form:focus-within .dgwt-wcas-sf-wrapp{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent)}
.dgwt-wcas-search-input{height:36px;font-size:13px;padding-left:40px}
.dgwt-wcas-search-ico{left:15px}
.dgwt-wcas-search-submit{width:44px;height:40px}
.extras-menu{gap:24px}
.extras-menu .wishlist-contents,.extras-menu .cart-contents,.extras-menu .item-register,
.nav-act{width:38px;height:38px;border-radius:10px}
.extras-menu .wishlist-contents,.extras-menu .cart-contents,.extras-menu .item-register,.nav-actions .nav-act{background:#fff;border-color:#dbe2ec;color:#172033;box-shadow:0 2px 7px rgba(18,35,60,.06)}
.extras-menu .wishlist-contents:hover,.extras-menu .cart-contents:hover,.extras-menu .item-register:hover,.nav-actions .nav-act:hover{color:#fff;background:var(--primary);border-color:var(--primary);transform:translateY(-1px);box-shadow:0 5px 12px rgba(31,95,230,.16)}
.extras-menu .extra-icon svg{width:19px;height:19px}
.mini-item-counter,body[data-theme] .mini-item-counter{top:-6px;right:-7px;min-width:19px;height:18px;padding:0 5px;border:1px solid rgba(255,255,255,.72);border-radius:999px;box-sizing:border-box;background:rgba(31,95,230,.78);color:#fff;box-shadow:0 2px 6px rgba(31,95,230,.14);backdrop-filter:blur(7px) saturate(145%);-webkit-backdrop-filter:blur(7px) saturate(145%);font-size:9px;line-height:16px}
.primary-nav{min-height:48px}
.primary-nav-wrap{padding-top:3px;padding-bottom:3px}
.mf-menu-toggle{height:38px;padding:0 14px;font-size:12px}
.nav-links{gap:clamp(12px,1.4vw,20px)}
.nav-links a{font-size:13px;transition:color .2s,font-size 1.6s cubic-bezier(.2,.7,.2,1)}
.mf-menu-toggle{transition:color .2s,border-color .2s,background .2s,font-size 1.6s cubic-bezier(.2,.7,.2,1)}
.primary-nav-wrap.is-stuck .nav-links a{font-size:14px}
.primary-nav-wrap.is-stuck .mf-menu-toggle{font-size:13px}
.mf-menu-dropdown{width:min(340px,88vw);border-radius:13px}
.slide-menu-head{height:50px;grid-template-columns:72px 1fr 36px;padding:0 10px}
.slide-menu-head strong{font-size:14px}
.slide-menu-back,.slide-menu-close{height:34px;font-size:13px}
.slide-menu-close{width:34px;font-size:15px}
.slide-menu-viewport{height:min(500px,calc(100vh - 210px));min-height:190px}
.slide-menu-item{grid-template-columns:minmax(0,1fr) 44px}
.slide-menu-link{padding:10px 7px 10px 15px;font-size:13px}
.slide-menu-next{font-size:19px}
.btn,body[data-theme] .btn{padding:.6rem 1rem;font-size:.84rem;border-radius:9px}
body[data-theme] .th-add{padding:.58rem .85rem;font-size:.82rem;border-radius:9px}
.footer-button .button{padding:7px 9px;font-size:12px}
.tabs-nav button{padding:9px 14px;font-size:13px}
.qty button{width:30px;height:30px}
.site-content{padding:12px 0 30px}
.breadcrumb{margin-bottom:10px}
.th-section{padding:clamp(30px,4vw,52px) 0}
.th-section--tight{padding:clamp(22px,3vw,36px) 0}
.th-head{margin-bottom:clamp(16px,2vw,26px)}
.th-head h2{font-size:clamp(1.3rem,2.5vw,1.75rem)}
.th-head p{font-size:.92rem}
.th-product__name{font-size:.9rem;padding:.75rem .85rem 0}
.th-product{height:100%}
.th-product__media{aspect-ratio:auto;height:clamp(130px,15vw,176px)}
.th-product__name{min-height:calc(2 * 1.35em + .75rem);margin-bottom:.2rem}
.th-product__stock{padding:0 .85rem}
.th-product__price{margin:.3rem 0 .65rem;padding:0 .85rem;font-size:1.05rem}
.th-add{width:calc(100% - 1.7rem);margin:auto .85rem .85rem;padding:.62rem .8rem;transform:scale(1);transition:background .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.th-add:hover:not(:disabled){transform:translateY(-1px) scale(1.018);box-shadow:0 7px 14px rgba(31,95,230,.18)}
.campaign-card{padding:18px;min-height:145px}
.hp-news__inner{padding:clamp(18px,2vw,28px) var(--pad-x)}
.fr-hero{padding:clamp(1.65rem,3.2vw,2.8rem) max(1rem,calc((100vw - 1200px)/2))}
.fr-eyebrow{margin-bottom:.85rem;padding:.3rem .7rem;font-size:.7rem}
.fr-hero h1{font-size:clamp(1.75rem,3.4vw,2.65rem)}
.fr-lead{margin-top:.8rem;font-size:clamp(.9rem,1.2vw,1rem)}
.fr-search{margin-top:1.35rem;max-width:36rem}
.fr-search-field{padding:.35rem .35rem .35rem .8rem;border-radius:11px}
.fr-search-field input{padding:.5rem 0;font-size:.9rem}
.fr-search-submit{padding:.6rem 1.1rem;font-size:.85rem;border-radius:8px;box-shadow:0 2px 7px rgba(31,95,230,.18);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.fr-search-submit:hover{background:hsl(217,91%,47%);transform:translateY(-1px);box-shadow:0 7px 15px rgba(31,95,230,.24)}
.fr-search-submit:active{transform:translateY(0);box-shadow:0 2px 5px rgba(31,95,230,.18)}
.fr-chips{margin-top:1.15rem}
.fr-chips a{padding:.38rem .72rem;font-size:.8rem}
.fr-stats{margin-top:1.4rem;padding-top:1rem;gap:clamp(1.2rem,3vw,2.5rem)}
.fr-stats dd{font-size:clamp(1.15rem,2vw,1.45rem)}
@media(max-width:760px){
.mf-menu-dropdown{width:min(86vw,340px)}
.slide-menu-head{height:56px}
.slide-menu-viewport{height:calc(100vh - 56px - env(safe-area-inset-top))}
.header-row{display:flex;gap:10px}
.header-logo{flex-basis:140px}
.header-extras{display:grid;grid-template-columns:minmax(0,1fr) auto;flex:0 0 100%;gap:9px}
.dgwt-wcas-search-wrapp{max-width:none}
.extras-menu{gap:4px}
}
@media(max-width:560px){
.btn,body[data-theme] .btn{padding:.56rem .85rem;font-size:.8rem}
.fr-hero{padding:1.5rem 1rem}
}
/*===assets/css/readability.css===*/:root{--text:#17231f;--text-light:#52635d;--border:#d6dfdc;--bg:#f2f5f4}
html{font-size:16px}
body{color:var(--text);background:var(--bg);font-size:14px;line-height:1.55;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body[data-theme="template-6"]{--text:#14231e;--muted:#53645e;--border:#d5dfdc;--bg:#f3f6f5;color:var(--text);background:var(--bg)}
body :where(input,select,textarea){color:var(--text);background-color:#fff;border-color:var(--border)}
body :where(.muted,small,.text-muted,.help-text){color:#586963}
.product :where(p,small),.mc-meta,.cart-row__meta,.cart-actions,.cart-assurance,.account-panel small,.acct-orders article div span,.return-history small{color:#596a64;font-size:11.5px;line-height:1.45}
.product-title,.mc-name,.cart-row__name{color:#17231f;line-height:1.4}
.widget,.toolbar,.product,.cart-list,.cart-summary,.account-panel,.checkout-card{border-color:var(--border);background-color:#fff}
.checkout-page{--co-ink:#1b3028!important;--co-muted:#52665d!important;--co-line:#d6e0dc!important}
.checkout-page :where(.checkout-card__head small,.checkout-save-note,.checkout-gateway small,.checkout-item span,.checkout-coupon small,.checkout-message,.checkout-security,.checkout-address-line){color:#56685f!important;font-size:11.5px!important;line-height:1.5}
.checkout-page .checkout-gateway em{font-size:10.5px!important}
.checkout-page .checkout-item strong,.checkout-page .checkout-gateway strong,.checkout-page .checkout-address strong{font-size:12.5px!important;line-height:1.45}
.checkout-page .checkout-total-row,.checkout-page .checkout-coupon>label{font-size:12px;color:#42584e}
@media(max-width:640px){body{font-size:14px}body[data-theme="template-6"] .announcement{font-size:11px}}
@media(prefers-contrast:more){:root,body[data-theme="template-6"]{--text:#07110e;--text-light:#30413b;--border:#aebdb8}body :where(.muted,small,.text-muted,.help-text){color:#354740}}
.country-select2{position:relative;width:100%;min-width:0}.country-select2__control{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;padding:0 13px;border:1px solid #cedbd3;border-radius:9px;background:#fff;color:#20352e;font:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(23,61,46,.03)}.country-select2__control:hover{border-color:#9eb4aa}.country-select2.open .country-select2__control,.country-select2__control:focus-visible{border-color:#678a79;outline:0;box-shadow:0 0 0 3px rgba(82,119,98,.12)}.country-select2__control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s}.country-select2.open .country-select2__control svg{transform:rotate(180deg)}.country-select2__dropdown{position:absolute;z-index:160;top:calc(100% + 7px);right:0;left:0;overflow:hidden;padding:8px;border:1px solid #d4dfda;border-radius:13px;background:#fff;box-shadow:0 24px 60px -30px rgba(20,48,38,.55)}.country-select2__dropdown[hidden]{display:none}.country-select2__dropdown>label{display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #d9e2de;border-radius:9px;background:#f8faf9}.country-select2__dropdown>label svg{width:17px;height:17px;fill:none;stroke:#65776f;stroke-width:1.8}.country-select2__dropdown input{width:100%;height:40px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0}.country-select2__options{max-height:260px;margin-top:7px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8c9c2 transparent}.country-select2__options button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:#fff;color:#294037;font:inherit;text-align:left;cursor:pointer}.country-select2__options button:hover,.country-select2__options button[aria-selected="true"]{background:#eef4f1;color:#214b3b}.country-select2__options button[aria-selected="true"]{font-weight:700}.country-select2__options small{color:#75857f;font-size:10px;font-weight:700;letter-spacing:.06em}
.checkout-page .checkout-payment-side .checkout-gateway{position:relative;grid-template-columns:18px 78px minmax(0,1fr) auto 24px;gap:12px;min-height:70px;padding:14px;border:1px solid #d6e1dc;border-radius:14px;background:#fff;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.checkout-page .checkout-payment-side .checkout-gateway:hover{border-color:#a9beb4;background:#fcfefd;transform:translateY(-1px)}.checkout-page .checkout-payment-side .checkout-gateway:has(input:checked){border-color:#6f9583;background:linear-gradient(135deg,#f1f7f4,#fff);box-shadow:0 0 0 3px rgba(74,117,96,.09),0 12px 28px -25px rgba(31,69,53,.55)}.checkout-page .checkout-payment-side .checkout-gateway__mark{display:block;width:78px;height:38px;border:0;border-radius:10px;background:transparent;overflow:hidden}.checkout-page .checkout-gateway__mark svg{display:block;width:78px;height:38px}.checkout-page .checkout-gateway__copy{display:grid;gap:3px;min-width:0}.checkout-page .checkout-payment-side .checkout-gateway__copy small{margin:0!important;font-size:11px!important}.checkout-page .checkout-gateway__selected{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d3dfda;border-radius:50%;background:#fff;color:transparent;font-size:12px;font-weight:850}.checkout-page .checkout-gateway:has(input:checked) .checkout-gateway__selected{border-color:#527963;background:#527963;color:#fff}.checkout-page .checkout-payment-side .checkout-gateway>em{align-self:center}.checkout-page #checkout-shipping-methods .checkout-gateway{grid-template-columns:18px minmax(0,1fr)}
@media(max-width:540px){.checkout-page .checkout-payment-side .checkout-gateway{grid-template-columns:18px 62px minmax(0,1fr) 22px;padding:12px;gap:9px}.checkout-page .checkout-payment-side .checkout-gateway__mark,.checkout-page .checkout-gateway__mark svg{width:62px;height:32px}.checkout-page .checkout-payment-side .checkout-gateway>em{display:none}.country-select2__dropdown{position:fixed;z-index:400;top:auto;right:12px;bottom:12px;left:12px}.country-select2__options{max-height:min(48vh,360px)}}
.country-select2__empty{margin:7px 0 0;padding:10px;color:#75857f;font-size:13px;text-align:center}
.checkout-page .checkout-payment-side .checkout-gateway{grid-template-columns:18px auto minmax(0,1fr) auto 24px}.checkout-page .checkout-payment-side .checkout-gateway__mark>img,.checkout-page .checkout-payment-side .checkout-gateway__mark>svg{display:block;width:100%;height:100%;object-fit:contain}@media(max-width:540px){.checkout-page .checkout-payment-side .checkout-gateway,.checkout-page .checkout-payment-side .checkout-gateway--image-after{grid-template-columns:16px auto minmax(0,1fr) 22px}.checkout-page .checkout-payment-side .checkout-gateway>em{display:none}.checkout-page .checkout-payment-side .checkout-gateway__selected{grid-column:-2}.checkout-page .checkout-payment-side .checkout-gateway__mark{max-width:min(92px,26vw);max-height:56px}}
.checkout-page .checkout-payment-side .checkout-gateway{grid-template-columns:18px 64px minmax(0,1fr) auto 20px;gap:8px;min-height:56px;padding:8px 10px}
.checkout-page .checkout-payment-side .checkout-gateway--image-after{grid-template-columns:18px minmax(0,1fr) 64px auto 20px}
.checkout-page .checkout-payment-side .checkout-gateway__mark{width:64px!important;height:32px!important;max-width:64px;max-height:32px;padding:0}
.checkout-page .checkout-payment-side .checkout-gateway__mark>img,.checkout-page .checkout-payment-side .checkout-gateway__mark>svg{width:100%;height:100%;object-fit:contain}
.checkout-page .checkout-payment-side .checkout-gateway__copy{min-width:0;overflow:hidden}
.checkout-page .checkout-payment-side .checkout-gateway__copy{gap:1px}
.checkout-page .checkout-payment-side .checkout-gateway__copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12px!important;line-height:1.2!important;overflow-wrap:anywhere}
.checkout-page .checkout-payment-side .checkout-gateway__copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px!important;line-height:1.25!important}
.checkout-page .checkout-payment-side .checkout-gateway>em{justify-self:end;white-space:nowrap;font-size:9px!important}
.checkout-page .checkout-payment-side .checkout-gateway__selected{display:grid;place-items:center;width:18px;height:18px;border:1px solid #d3dfda;border-radius:50%;background:#fff;color:transparent;font-size:10px;font-weight:850;line-height:1}
.checkout-page .checkout-payment-side .checkout-gateway:has(input:checked) .checkout-gateway__selected{border-color:#2875df;background:#2875df;color:#fff}
@media(max-width:540px){.checkout-page .checkout-payment-side .checkout-gateway,.checkout-page .checkout-payment-side .checkout-gateway--image-after{grid-template-columns:16px minmax(0,1fr) 54px 18px;gap:7px;padding:8px}.checkout-page .checkout-payment-side .checkout-gateway:not(.checkout-gateway--image-after){grid-template-columns:16px 54px minmax(0,1fr) 18px}.checkout-page .checkout-payment-side .checkout-gateway__mark{width:54px!important;height:28px!important;max-width:54px;max-height:28px}.checkout-page .checkout-payment-side .checkout-gateway>em{display:none}.checkout-page .checkout-payment-side .checkout-gateway__copy small{font-size:9px!important}}
/*===assets/css/ferry-port-fixes.css===*/body[data-theme="template-6"] .app-header .header-inner{max-width:1240px;margin:auto;display:flex;align-items:center;gap:24px;min-height:78px;padding:10px 20px}
body[data-theme="template-6"] .app-header .logo{display:flex;align-items:center;flex:0 0 210px;min-width:0}
body[data-theme="template-6"] .app-header .logo img{display:block;width:205px;max-width:100%;height:auto;max-height:52px;object-fit:contain}
body[data-theme="template-6"] .app-header .search-bar{flex:1;min-width:180px}
body[data-theme="template-6"] .app-header .ferry-main-search-form{display:block;margin:0}
body[data-theme="template-6"] .app-header .search-input-wrapper input{flex:1;min-width:0;height:40px;border:0;outline:0;background:transparent;font-size:14px}
body[data-theme="template-6"] .app-header .search-icon{display:flex;align-items:center;flex:none}
body[data-theme="template-6"] .app-header .user-nav{display:flex;align-items:center;gap:13px;white-space:nowrap}
body[data-theme="template-6"] .app-header .extras-menu{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
body[data-theme="template-6"] .app-header .extras-menu>li{position:relative;list-style:none}
body[data-theme="template-6"] .app-header .extras-menu>li>a{display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid #e4eaf1;border-radius:50%;color:#28405a;text-decoration:none;background:#fff}
body[data-theme="template-6"] .app-header .fm-register{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:1px solid #e4eaf1;border-radius:10px;color:#1e3852;text-decoration:none;font-size:13px;font-weight:650;background:#f7f9fc}
body[data-theme="template-6"] .store-mega-menu{min-height:49px;background:#f5f8fc;border-top:1px solid #e5eaf1;border-bottom:1px solid #e5eaf1}
body[data-theme="template-6"] .store-mega-menu>.container{max-width:1240px;margin:auto;padding:0 20px}
body[data-theme="template-6"] .b2b-top-nav{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0;min-height:48px}
body[data-theme="template-6"] .b2b-nav-item{position:relative;list-style:none}
body[data-theme="template-6"] .b2b-nav-link{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 14px;border:0;border-radius:7px;background:transparent;color:#27425e;text-decoration:none;font:600 13px system-ui,sans-serif;cursor:pointer}
body[data-theme="template-6"] .b2b-nav-link:hover,body[data-theme="template-6"] .b2b-nav-item.open>.b2b-nav-link{background:#e5efff;color:#1565ca}
body[data-theme="template-6"] .b2b-mobile-toggle{display:none}
body[data-theme="template-6"] .b2b-dropdown-overlay{position:absolute;top:100%;left:0;z-index:100;width:min(750px,calc(100vw - 40px));background:#fff;border:1px solid #dbe5ef;border-radius:12px;box-shadow:0 20px 55px #142e4d24;padding:20px}
body[data-theme="template-6"] .b2b-dropdown-overlay[hidden]{display:none}
body[data-theme="template-6"] .b2b-mega-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;min-height:250px}
body[data-theme="template-6"] .b2b-mega-families{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding-right:14px;border-right:1px solid #e6edf5}
body[data-theme="template-6"] .b2b-family-btn{display:block;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:#2a4662;text-align:left;font:600 13px system-ui,sans-serif;cursor:pointer}
body[data-theme="template-6"] .b2b-family-btn:hover,body[data-theme="template-6"] .b2b-family-btn.active{border-color:#c5dbf6;background:#edf5ff;color:#1769c9}
body[data-theme="template-6"] .b2b-mega-models{min-width:0}
body[data-theme="template-6"] .b2b-mega-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:#17344f;font-weight:750;font-size:17px;margin-bottom:14px}
body[data-theme="template-6"] .b2b-mega-heading span{display:flex;flex-direction:column;gap:3px}
body[data-theme="template-6"] .b2b-mega-heading small{color:#788ca1;font-size:12px;font-weight:400}
body[data-theme="template-6"] .b2b-menu-close{border:0;background:#f0f5fb;color:#385976;border-radius:7px;padding:7px 10px;cursor:pointer}
body[data-theme="template-6"] .b2b-model-search-panel{padding:12px;background:#f6f9fd;border:1px solid #e6edf5;border-radius:10px;margin-bottom:14px}
body[data-theme="template-6"] .b2b-model-search-panel>strong{display:block;color:#2b4560;font-size:13px}
body[data-theme="template-6"] .b2b-model-search-panel>small{display:block;color:#6f8499;margin:3px 0 10px}
body[data-theme="template-6"] .b2b-model-search-wrap{display:flex;align-items:center;gap:10px;color:#567089;font-size:12px}
body[data-theme="template-6"] .b2b-model-search-wrap input{flex:1;min-width:0;max-width:340px;height:34px;border:1px solid #cad9e9;border-radius:7px;padding:7px 10px;background:#fff}
body[data-theme="template-6"] .b2b-model-status{margin:0 0 11px;color:#6c8197;font-size:12px}
body[data-theme="template-6"] .b2b-model-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body[data-theme="template-6"] .b2b-model-link{display:block;border:1px solid #e4ecf4;border-radius:7px;padding:8px 9px;color:#2e526f;text-decoration:none;font-size:12px;background:#fff}
body[data-theme="template-6"] .b2b-model-link:hover{border-color:#9bc1f2;background:#f3f8ff;color:#1768ca}
body[data-theme="template-6"] .b2b-family-all{display:inline-block;margin-top:14px;color:#1768ca;text-decoration:none;font-size:13px;font-weight:700}
@media(max-width:700px){body[data-theme="template-6"] .b2b-dropdown-overlay{left:0;width:calc(100vw - 28px);max-height:70vh;overflow:auto;padding:14px}body[data-theme="template-6"] .b2b-mega-layout{grid-template-columns:1fr;gap:12px}body[data-theme="template-6"] .b2b-mega-families{flex-direction:row;overflow-x:auto;padding:0 0 10px;border:0;border-bottom:1px solid #e6edf5}body[data-theme="template-6"] .b2b-family-btn{white-space:nowrap;width:auto}body[data-theme="template-6"] .b2b-model-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){body[data-theme="template-6"] .app-header .header-inner{flex-wrap:wrap;gap:10px;padding:10px 14px}body[data-theme="template-6"] .app-header .logo{flex:1 1 auto}body[data-theme="template-6"] .app-header .logo img{width:160px}body[data-theme="template-6"] .app-header .search-bar{order:3;flex:1 1 100%}body[data-theme="template-6"] .app-header .user-nav{margin-left:auto}body[data-theme="template-6"] .b2b-mobile-toggle{display:inline-flex;align-items:center;gap:8px;min-height:45px;border:0;background:transparent;color:#24405e;font-weight:700}body[data-theme="template-6"] .b2b-top-nav{display:none;flex-wrap:wrap;padding-bottom:8px}body[data-theme="template-6"] .b2b-top-nav.mobile-open{display:flex}}
body[data-theme="template-6"] .ferry-announcement__messages{display:flex;justify-content:center;gap:18px;align-items:center;min-height:34px}
body[data-theme="template-6"] .ferry-announcement__messages span+span::before{content:"|";margin-right:18px;opacity:.55}
body[data-theme="template-6"] .fm-catalog-page{max-width:1240px;margin-inline:auto;padding:22px 20px 64px}
body[data-theme="template-6"] .catalog-breadcrumb{display:flex;align-items:center;gap:10px;color:#758398;font-size:13px;margin:0 0 18px}
body[data-theme="template-6"] .catalog-breadcrumb a{color:#47607a;text-decoration:none}
body[data-theme="template-6"] .catalog-breadcrumb a:hover{color:#226bd3}
body[data-theme="template-6"] .catalog-price-notice{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#edf5ff;border:1px solid #dbeafa;border-radius:12px;color:#234363;padding:12px 17px;margin-bottom:18px;font-size:13px}
body[data-theme="template-6"] .catalog-price-notice a{color:#1767cb;font-weight:700;text-decoration:none}
body[data-theme="template-6"] .catalog-layout{display:grid;grid-template-columns:256px minmax(0,1fr);align-items:start;gap:20px}
body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar{position:sticky;top:180px;max-height:none;overflow-x:hidden;overflow-y:auto;background:#fff;border:1px solid #e0e8f1;border-radius:14px;box-shadow:0 10px 30px #1634560b;padding:18px}
body[data-theme="template-6"] .catalog-sidebar-heading{margin-bottom:16px}
body[data-theme="template-6"] .catalog-sidebar-heading>span{display:block;color:#2876da;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
body[data-theme="template-6"] .catalog-sidebar-heading h2{font-size:19px;line-height:1.2;margin:5px 0 0;color:#152d46}
body[data-theme="template-6"] .quick-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:visible;max-height:none;margin:0 0 15px;padding:0}
body[data-theme="template-6"] .quick-category{width:auto;min-height:91px;padding:10px 7px;border-radius:10px;gap:5px;justify-content:center;box-shadow:none;font-size:12px}
body[data-theme="template-6"] .quick-category-thumb{width:38px;height:38px;flex:none}
body[data-theme="template-6"] .quick-category-thumb svg{width:100%;height:100%}
body[data-theme="template-6"] .catalog-sidebar-active{padding-top:12px;border-top:1px solid #e6edf5}
body[data-theme="template-6"] .catalog-sidebar-active button{border:1px solid #dbe5f0;border-radius:7px;background:#fff;color:#30516e;padding:7px 10px;cursor:pointer}
body[data-theme="template-6"] .catalog-main{min-width:0;background:#fff;border:1px solid #e0e8f1;border-radius:14px;padding:18px;box-shadow:0 10px 30px #1634560b}
body[data-theme="template-6"] .catalog-refine-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
body[data-theme="template-6"] .catalog-refine-row button{min-height:34px;padding:7px 12px;border:1px solid #dbe5ef;border-radius:8px;background:#fff;color:#31506a;font-weight:650;cursor:pointer}
body[data-theme="template-6"] .catalog-refine-row button.active{border-color:#95b8ec;background:#edf5ff;color:#1768c7}
body[data-theme="template-6"] .fm-results-tools{border-bottom:1px solid #e5ebf2;margin-bottom:12px;padding-bottom:12px;color:#526a82;font-size:13px}
body[data-theme="template-6"] .fm-results-tools .view-toggle{display:flex;gap:5px}
body[data-theme="template-6"] .fm-results-tools .view-btn{border:1px solid #dbe4ef;border-radius:7px;background:#fff;color:#466078;cursor:pointer}
body[data-theme="template-6"] .fm-results-tools .view-btn.active{border-color:#8db5f0;color:#1768c9;background:#f1f7ff}
body[data-theme="template-6"] .fm-results-tools select{border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#304a62}
body[data-theme="template-6"] .lp-product-section:empty{display:none}
body[data-theme="template-6"] .lp-product-grid .lp-product{min-width:0}
body[data-theme="template-6"] .lp-product-slider{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b5c5d7 transparent;scroll-snap-type:x mandatory;padding-bottom:10px}
body[data-theme="template-6"] .lp-product-slider>.lp-product{scroll-snap-align:start}
body[data-theme="template-6"] .ferry-main-footer{background:#fff;color:#263e56;border-top:1px solid #e3ebf3}
body[data-theme="template-6"] .ferry-main-footer .footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:28px;padding-block:42px}
body[data-theme="template-6"] .ferry-main-footer .footer-brand{min-width:0}
body[data-theme="template-6"] .ferry-main-footer .footer-logo{width:180px;height:auto;filter:none;margin-bottom:15px}
body[data-theme="template-6"] .ferry-main-footer .footer-col h4{color:#15304b;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
body[data-theme="template-6"] .ferry-main-footer .footer-col p{color:#52677d;font-size:13px;line-height:1.6}
body[data-theme="template-6"] .ferry-main-footer .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
body[data-theme="template-6"] .ferry-main-footer .footer-links a{color:#435b72;text-decoration:none;font-size:13px}
body[data-theme="template-6"] .ferry-main-footer .footer-links a:hover{color:#176ad2}
body[data-theme="template-6"] .ferry-main-footer .footer-bottom{background:#0e2037;color:#d5e3f2}
body[data-theme="template-6"] .ferry-main-footer .footer-bottom-inner{display:flex;justify-content:space-between;gap:16px}
@media(max-width:900px){body[data-theme="template-6"] .catalog-layout{grid-template-columns:1fr}body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar{position:static;max-height:none;overflow-x:hidden;overflow-y:auto}body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar .quick-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible}body[data-theme="template-6"] .fm-catalog-page .quick-category{flex:auto}body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-theme="template-6"] .ferry-main-footer .footer-brand{grid-column:1/-1}}
@media(max-width:600px){body[data-theme="template-6"] .ferry-announcement__messages{gap:0}body[data-theme="template-6"] .ferry-announcement__messages span:nth-child(n+2){display:none}body[data-theme="template-6"] .fm-catalog-page{padding:16px 12px 40px}body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar .quick-categories{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-theme="template-6"] .quick-category{min-height:72px;flex-direction:row;justify-content:flex-start;gap:8px;text-align:left}body[data-theme="template-6"] .quick-category-thumb{width:32px;height:32px}body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}body[data-theme="template-6"] .ferry-main-footer .footer-bottom-inner{flex-direction:column}}
body[data-theme="template-6"]:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar .quick-categories>*{min-width:0}
body[data-theme="template-6"]:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar .quick-category{overflow:hidden}
body[data-theme="template-6"]:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar .quick-category span:last-child{white-space:normal;overflow-wrap:anywhere}
/*===assets/css/reference-adjustments.css===*/body.home[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:start; height:auto!important; min-height:128px!important; }
body.home[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header>.header-inner { grid-row:1; }
body.home[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header>#store-menu { grid-row:2; align-self:stretch; width:100%; }
@media (min-width: 901px) {
body:not(:has(.admin-shell)) .fm-catalog-page { width: 100%; max-width: 1240px; padding: 0 20px 56px; margin: 14px auto 0; }
body:not(:has(.admin-shell)) .fm-catalog-page > .catalog-breadcrumb { display: none; }
body:not(:has(.admin-shell)) .catalog-price-notice { width: min(100%, 480px); min-height: 66px; margin: 0 auto 16px; padding: 11px 12px 11px 16px; border: 1px solid #dce5f0; border-radius: 14px; background: #fff; bo-x-shadow: 0 8px 24px rgba(25, 50, 82, .08); display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 12px; color: #25364d; }
body:not(:has(.admin-shell)) .catalog-layout { grid-template-columns: 252px minmax(0, 1fr); gap: 18px; margin-top: 0; align-items: start; }
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px 4px; border-radius: 5px; box-shadow: none; }
body[data-theme="template-6"] .fm-catalog-page .catalog-layout { margin-top: 0; }
body[data-theme="template-6"] .fm-catalog-page .catalog-sidebar { position: sticky; top: 12px; max-height: calc(100dvh - 24px); }
body:not(:has(.admin-shell)) .catalog-sidebar-heading { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; }
body:not(:has(.admin-shell)) .catalog-sidebar-heading > span { font-size: 10px; letter-spacing: .05em; }
body:not(:has(.admin-shell)) .catalog-sidebar-heading h2 { font-size: 14px; margin: 0; }
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar .quick-categories { display: grid; grid-template-columns: 1fr; gap: 2px; max-height: none; overflow: visible; margin: 0; }
body:not(:has(.admin-shell)) .fm-catalog-page .quick-category { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; min-height: 38px; padding: 5px 8px; gap: 10px; border: 0; border-radius: 4px; text-align: left; font-size: 12px; }
body:not(:has(.admin-shell)) .fm-catalog-page .quick-category-thumb { width: 25px; height: 25px; flex: 0 0 25px; }
body:not(:has(.admin-shell)) .catalog-main { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body:not(:has(.admin-shell)) .catalog-refine-row,
body:not(:has(.admin-shell)) .fm-results-tools { display: none !important; }
body:not(:has(.admin-shell)) .catalog-main > .b2b-products { margin: 0; border: 1px solid #d9dde2; border-radius: 0; box-shadow: none; }
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table { width: 100%; }
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th { height: 54px; padding-block: 17px; }
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table td { height: 76px; padding-block: 11px; }
body:not(:has(.admin-shell)) .b2b-row .col-img { width: 68px; padding: 7px 0 7px 10px !important; }
body:not(:has(.admin-shell)) .b2b-img-wrap { width: 54px; height: 54px; border-radius: 4px; }
}
body:not(:has(.admin-shell)) .app-header .extras-menu .menu-item-wishlist,
body:not(:has(.admin-shell)) .app-header .extras-menu .menu-item-cart,
body:not(:has(.admin-shell)).is-guest .app-header .extras-menu .menu-item-account { display: none !important; }
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .menu-item-wishlist,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .menu-item-cart,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .menu-item-account { display: list-item !important; }
@media (min-width: 769px) {
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .b2b-dropdown-overlay {
position: fixed !important;
top: var(--fm-menu-top, 150px) !important;
left: 50vw !important;
right: auto !important;
width: min(1120px, calc(100vw - 32px)) !important;
max-width: calc(100vw - 32px) !important;
max-height: min(80vh, calc(100vh - var(--fm-menu-top, 150px) - 12px)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
transform: translateX(-50%) !important;
overscroll-behavior: contain;
}
}
body:not(:has(.admin-shell)) .app-header .user-nav { gap: 8px; }
body:not(:has(.admin-shell)) .app-header .user-nav .fm-register { min-width: 68px; padding: 0 9px; background: transparent; border-color: transparent; }
@media (max-width: 900px) {
body:not(:has(.admin-shell)) .fm-catalog-page { padding-top: 0; margin-top: 12px; }
body:not(:has(.admin-shell)) .fm-catalog-page > .catalog-breadcrumb { display: none; }
}
body:not(:has(.admin-shell)) .b2b-table { table-layout: fixed; }
body:not(:has(.admin-shell)) .b2b-table .col-img { width: 64px; }
body:not(:has(.admin-shell)) .b2b-table .col-product { width: auto; min-width: 220px; }
body:not(:has(.admin-shell)) .b2b-table .col-quality { width: 112px; }
body:not(:has(.admin-shell)) .b2b-table .col-price { width: 94px; }
body:not(:has(.admin-shell)) .b2b-table .col-sku { width: 108px; }
body:not(:has(.admin-shell)) .b2b-table .col-stock { width: 104px; }
body:not(:has(.admin-shell)) .b2b-table .col-order { width: 220px; }
body:not(:has(.admin-shell)) .b2b-quality { color:#183b70; font-weight:650; }
body:not(:has(.admin-shell)) .b2b-table .b2b-sku { color:#566477; font-weight:650; overflow-wrap:anywhere; }
body:not(:has(.admin-shell)) .b2b-order-controls { gap:4px; flex-wrap:nowrap; }
body:not(:has(.admin-shell)) .b2b-qty-step { width:28px; height:34px; border:0; background:transparent; color:#12233f; font-size:18px; cursor:pointer; border-radius:6px; }
body:not(:has(.admin-shell)) .b2b-qty-step:hover { background:#edf5ff; color:#076bd8; }
body:not(:has(.admin-shell)) .b2b-order-controls .b2b-qty-input { width:38px; flex:0 0 38px; padding:0 3px; border:0; box-shadow:none; }
body:not(:has(.admin-shell)) .b2b-order-controls .b2b-add-btn { width:auto; min-width:92px; padding:0 13px; border-radius:17px; font-size:13px; font-weight:700; white-space:nowrap; }
@media (max-width: 760px) {
body:not(:has(.admin-shell)) .b2b-table .col-quality,
body:not(:has(.admin-shell)) .b2b-table .col-sku { padding-left:68px !important; width:100% !important; margin-bottom:5px; }
body:not(:has(.admin-shell)) .b2b-table .col-quality::before { content:"Quality: "; color:#718096; font-weight:500; }
body:not(:has(.admin-shell)) .b2b-table .col-sku::before { content:"SKU: "; color:#718096; font-weight:500; }
body:not(:has(.admin-shell)) .b2b-order-controls { max-width:100%; }
body:not(:has(.admin-shell)) .b2b-order-controls .b2b-add-btn { min-width:104px; width:auto; flex:0 0 auto; }
}
body:not(:has(.admin-shell)) .catalog-empty-state {
min-height:430px; display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:56px 24px; text-align:center; background:#fff; border:1px solid #dbe5f0; border-radius:14px;
}
body:not(:has(.admin-shell)) .catalog-empty-state svg { width:150px; height:auto; margin-bottom:20px; }
body:not(:has(.admin-shell)) .catalog-empty-state h2 { margin:0 0 9px; color:#10233f; font-size:28px; line-height:1.2; letter-spacing:-.02em; }
body:not(:has(.admin-shell)) .catalog-empty-state p { margin:0 0 24px; color:#5b6b80; font-size:17px; line-height:1.55; }
body:not(:has(.admin-shell)) #shop-pagination[hidden] { display:none !important; }
body:not(:has(.admin-shell)) :is(.cart-row__title,.checkout-item__title){display:flex;align-items:center;gap:5px;min-width:0}
body:not(:has(.admin-shell)) :is(.cart-row__toggle,.checkout-item__toggle){width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#5f7187;cursor:pointer}
body:not(:has(.admin-shell)) :is(.cart-row__toggle,.checkout-item__toggle):hover{background:#eaf3ff;color:#0874df}
body:not(:has(.admin-shell)) :is(.cart-row__toggle,.checkout-item__toggle) svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
body:not(:has(.admin-shell)) :is(.cart-row.is-expanded .cart-row__toggle,.checkout-item.is-expanded .checkout-item__toggle) svg{transform:rotate(180deg)}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row{grid-template-columns:32px minmax(0,1fr) 94px 86px 28px;gap:7px;min-height:44px;padding:5px 6px}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-panel{min-height:0!important}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__image{width:32px;height:32px;border-radius:7px}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__image img{padding:2px;object-fit:contain}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__product{gap:0}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__name{min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.35}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__meta,
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__unit{display:none}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row.is-expanded{align-items:start;padding-block:8px}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row.is-expanded .cart-row__name{white-space:normal;overflow:visible}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row.is-expanded .cart-row__meta{display:flex;flex-wrap:wrap;white-space:normal;margin-top:4px}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row.is-expanded .cart-row__unit{display:block;margin-top:3px}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:7px 0;align-items:center}
body:not(:has(.admin-shell)) .checkout-page .checkout-item img{padding:2px;border-radius:6px;object-fit:contain}
body:not(:has(.admin-shell)) .checkout-page .checkout-product-preview::after{top:-5px;right:-5px;min-width:16px;height:16px;padding:0 3px;font-size:8px;border-width:1px}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__copy{min-width:0}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item__title strong{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.35}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item.is-expanded{align-items:start;padding-block:9px}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity{display:none;grid-template-columns:28px 42px 28px;align-items:center;width:max-content;margin-top:6px;border:1px solid #dce5ef;border-radius:9px;overflow:hidden;background:#fff}
body:not(:has(.admin-shell)) .checkout-page .checkout-item.is-expanded .checkout-item__quantity{display:grid}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity button{width:28px;height:28px;padding:0;border:0;background:#f6f9fc;color:#38516d;font-size:15px;cursor:pointer}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity button:hover{background:#eaf3ff;color:#0874df}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity input{width:42px;height:28px;padding:0 2px;border:0;border-inline:1px solid #dce5ef;background:#fff;color:#17243a;font-size:11px;font-weight:700;line-height:1;text-align:center;appearance:textfield}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity input::-webkit-inner-spin-button{display:none}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__warning{display:none!important}
body:not(:has(.admin-shell)) .checkout-page .checkout-item.is-invalid{background:#fff!important}
@media(max-width:620px){
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row{grid-template-columns:32px minmax(0,1fr) 28px;grid-template-areas:"image product remove" "image qty total"}
}
body:not(:has(.admin-shell)) .catalog-main .b2b-stock-indicator{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;word-break:normal}
body:not(:has(.admin-shell)) .catalog-main .b2b-staff-note{display:none!important}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .extra-icon svg,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu>li>a .extra-icon svg{width:24px!important;height:24px!important;min-width:24px;min-height:24px;flex:0 0 24px}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu>li>a{position:relative;padding:0;border-color:#dce5ef;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 4px 14px rgba(38,74,119,.08);transition:color .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .extra-icon{display:grid;place-items:center;border:0!important;border-radius:0!important;background:transparent!important;color:inherit;line-height:0}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .extra-icon svg{display:block;overflow:visible;stroke:currentColor}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu>li>a:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(31,111,223,.14)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .mini-item-counter{top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;background:#377eea;box-shadow:0 3px 8px rgba(36,101,204,.28);font-size:10px;font-weight:750;line-height:16px}
html{overflow-x:clip}
body:not(:has(.admin-shell)){width:100%;max-width:100%;overflow-x:clip}
body:not(:has(.admin-shell)) .test-banner,
body:not(:has(.admin-shell)) .app-header,
body:not(:has(.admin-shell)) #app,
body:not(:has(.admin-shell)) .site-content{width:100%;max-width:100%;min-width:0}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .header-inner{width:min(100%,1240px);max-width:100%;min-width:0;margin-inline:auto}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .logo,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .page-search-jump,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .user-nav{min-width:0}
body[data-theme="template-6"]:not(:has(.admin-shell)) .store-mega-menu>.container{width:100%;max-width:1240px;min-width:0;margin-inline:auto;padding-inline:20px}
@media(max-width:1100px){
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .header-inner{padding-inline:18px;gap:14px}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .logo{flex-basis:clamp(150px,18vw,185px)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .page-search-jump{min-width:0;padding-inline:18px}
}
body:not(:has(.admin-shell)) #shop-pagination.pagination{display:flex;flex-direction:row;align-items:center;justify-content:center;min-height:0;margin:28px 0 10px;gap:0}
body:not(:has(.admin-shell)) #shop-pagination .pagination-shell{display:inline-flex;align-items:center;gap:10px;padding:7px;border:1px solid #dce5f0;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 16px 40px -28px rgba(18,54,99,.48),inset 0 1px 0 #fff}
body:not(:has(.admin-shell)) #shop-pagination .pagination-status{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 10px;border:0;border-radius:10px;background:#f4f7fb;color:#63748a;font-size:11px;font-weight:650;line-height:1;letter-spacing:.025em;text-transform:none;white-space:nowrap}
body:not(:has(.admin-shell)) #shop-pagination .pagination-status span{padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:inherit}
body:not(:has(.admin-shell)) #shop-pagination .pagination-status strong{color:#152b45;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
body:not(:has(.admin-shell)) #shop-pagination .pagination-divider{width:1px;height:24px;padding:0;border:0;border-radius:0;background:#e3eaf2}
body:not(:has(.admin-shell)) #shop-pagination .pagination-pages{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap}
body:not(:has(.admin-shell)) #shop-pagination .page-link{display:grid;place-items:center;min-width:38px;width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:#34465c;font-size:12px;font-weight:750;line-height:1;box-shadow:none;transition:color .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .28s ease}
body:not(:has(.admin-shell)) #shop-pagination .page-link:hover:not(:disabled):not(.active){border-color:#c9d9ec;background:#edf5ff;color:#126dd2;transform:translateY(-1px)}
body:not(:has(.admin-shell)) #shop-pagination .page-link.active{border-color:#176fda;background:linear-gradient(145deg,#2583ee,#0867d5);color:#fff!important;box-shadow:0 8px 18px -8px rgba(19,104,215,.72),inset 0 1px 0 rgba(255,255,255,.28);transform:none}
body:not(:has(.admin-shell)) #shop-pagination .page-arrow{border-color:#dbe5ef;background:#fff;color:#52667f;border-radius:10px}
body:not(:has(.admin-shell)) #shop-pagination .page-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body:not(:has(.admin-shell)) #shop-pagination .page-link:disabled{border-color:transparent;background:#f7f9fc;color:#bcc6d2;cursor:default;opacity:.72}
body:not(:has(.admin-shell)) #shop-pagination .page-link:focus-visible{outline:3px solid rgba(37,131,238,.2);outline-offset:2px}
@media(max-width:560px){
body:not(:has(.admin-shell)) #shop-pagination .pagination-shell{gap:6px;padding:6px}
body:not(:has(.admin-shell)) #shop-pagination .pagination-status{padding-inline:8px}
body:not(:has(.admin-shell)) #shop-pagination .pagination-divider{display:none}
body:not(:has(.admin-shell)) #shop-pagination .page-link{min-width:34px;width:34px;height:36px}
}
body:not(:has(.admin-shell)) .pd-page{max-width:1320px;padding-bottom:56px}
body:not(:has(.admin-shell)) .pd-page>.breadcrumb{margin:14px 0 16px;color:#718096;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(:has(.admin-shell)) .pd-page>.breadcrumb a{color:#276fca;font-weight:650}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail{position:relative;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:clamp(32px,4vw,58px);max-width:none;margin:0;padding:clamp(24px,3vw,42px);overflow:hidden;border:1px solid #dfe7f0;border-radius:24px;background:linear-gradient(145deg,#fff 0%,#fbfdff 62%,#f5f9ff 100%);box-shadow:0 28px 70px -50px rgba(20,58,105,.55)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail::before{content:"";position:absolute;right:-140px;top:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(50,120,235,.10),transparent 68%);pointer-events:none}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .gallery{position:relative;z-index:1;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:12px;border:1px solid #e4ebf3;border-radius:20px;background:#f8fafc}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image{min-height:500px;overflow:hidden;border:0;border-radius:16px;background:linear-gradient(145deg,#fff,#f4f7fa)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image img{height:500px;padding:38px;transition:transform .7s cubic-bezier(.22,1,.36,1)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image:hover img{transform:scale(1.035)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .thumbs{gap:10px}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .thumbs img{width:72px;height:72px;padding:7px;border-color:#dfe7f0;border-radius:12px;cursor:pointer;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .thumbs img:hover{transform:translateY(-2px)}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .summary{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;padding:10px 2px}
body:not(:has(.admin-shell)) .pd-eyebrow{width:max-content;margin-bottom:12px;padding:6px 10px;border:1px solid #d8e8fb;border-radius:999px;background:#eef6ff;color:#1768bd;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .product_title{max-width:700px;margin:0;color:#132238;font-size:clamp(28px,3vw,42px);font-weight:780;line-height:1.08;letter-spacing:-.035em}
body:not(:has(.admin-shell)) .pd-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;color:#66778b;font-size:12px}
body:not(:has(.admin-shell)) .pd-meta span,body:not(:has(.admin-shell)) .pd-meta a{padding:6px 9px;border:1px solid #e1e8f0;border-radius:8px;background:#fff;color:#52657b;text-decoration:none}
body:not(:has(.admin-shell)) .pd-meta b{color:#172a43;font-weight:750}
body:not(:has(.admin-shell)) .pd-price-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding:18px 20px;border:1px solid #cfe3fa;border-radius:16px;background:linear-gradient(135deg,#edf6ff,#fff);box-shadow:0 16px 35px -30px rgba(29,105,190,.75)}
body:not(:has(.admin-shell)) .pd-price-card>div{display:flex;min-width:0;flex-direction:column;gap:3px}
body:not(:has(.admin-shell)) .pd-price-label{color:#3975b7;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body:not(:has(.admin-shell)) .pd-price-card .price-big{margin:0;color:#0e3260;font-size:clamp(26px,2.7vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.035em}
body:not(:has(.admin-shell)) .pd-price-card small{color:#657a91;font-size:10.5px;line-height:1.4}
body:not(:has(.admin-shell)) .pd-price-check{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:50%;background:#dff5e8;color:#197442;font-size:17px;font-weight:800}
body:not(:has(.admin-shell)) .pd-price-card--locked{border-color:#e2e7ee;background:linear-gradient(135deg,#f7f9fb,#fff)}
body:not(:has(.admin-shell)) .pd-price-card--locked .pd-lock{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:12px;background:#eaf2fd;color:#1f67b8}
body:not(:has(.admin-shell)) .pd-price-card--locked .pd-lock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
body:not(:has(.admin-shell)) .pd-price-card--locked>div{margin-right:auto}
body:not(:has(.admin-shell)) .pd-price-card--locked strong{color:#192b42;font-size:15px}
body:not(:has(.admin-shell)) .pd-price-card--locked .btn{min-height:40px;padding:0 18px;border-radius:10px}
body:not(:has(.admin-shell)) .pd-stockline{display:flex;align-items:center;gap:7px;margin-top:16px;padding:12px 2px;border-bottom:1px solid #e5ebf2;color:#177545}
body:not(:has(.admin-shell)) .pd-stockline.is-out{color:#c73939}
body:not(:has(.admin-shell)) .pd-stock-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent)}
body:not(:has(.admin-shell)) .pd-stockline strong{font-size:13px}
body:not(:has(.admin-shell)) .pd-stockline small{margin-left:auto;color:#748397;font-size:10.5px}
body:not(:has(.admin-shell)) .pd-purchase{display:flex;align-items:flex-end;gap:16px;margin-top:20px;padding:18px;border:1px solid #e1e8f0;border-radius:16px;background:#fff}
body:not(:has(.admin-shell)) .pd-quantity{display:flex;flex-direction:column;gap:6px}
body:not(:has(.admin-shell)) .pd-quantity>span{color:#66768a;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
body:not(:has(.admin-shell)) .pd-quantity>small{color:#8592a2;font-size:9px}
body:not(:has(.admin-shell)) .pd-stepper{display:grid;grid-template-columns:34px 48px 34px;height:42px;overflow:hidden;border:1px solid #dbe4ed;border-radius:11px;background:#f8fafc}
body:not(:has(.admin-shell)) .pd-stepper button{width:34px;border:0;background:transparent;color:#45617f;font-size:18px;cursor:pointer}
body:not(:has(.admin-shell)) .pd-stepper button:hover{background:#eaf3ff;color:#0874df}
body:not(:has(.admin-shell)) .pd-stepper input{width:48px;padding:0;border:0;border-inline:1px solid #e0e7ef;background:#fff;color:#15263d;font-size:13px;font-weight:750;text-align:center;appearance:textfield}
body:not(:has(.admin-shell)) .pd-stepper input::-webkit-inner-spin-button{appearance:none}
body[data-theme="template-6"]:not(:has(.admin-shell)) .pd-purchase .pd-actions{flex:1;margin:0}
body[data-theme="template-6"]:not(:has(.admin-shell)) .pd-purchase .pd-actions .btn{min-height:46px;border-radius:12px}
body[data-theme="template-6"]:not(:has(.admin-shell)) .pd-purchase .pd-actions .btn-primary{flex:1;box-shadow:0 12px 24px -16px #0b6fe4}
body:not(:has(.admin-shell)) .pd-purchase .wl-heart-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#263d58}
body:not(:has(.admin-shell)) .pd-purchase .wl-heart-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
body:not(:has(.admin-shell)) .pd-guest-note,body:not(:has(.admin-shell)) .pd-unavailable{margin-top:14px;padding:12px 14px;border-radius:10px;background:#f7f9fc;color:#607086;font-size:11px;line-height:1.5}
body:not(:has(.admin-shell)) .pd-unavailable{background:#fff4f4;color:#a43b3b}
body:not(:has(.admin-shell)) .pd-assurance{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;color:#607187;font-size:10px;font-weight:650}
body:not(:has(.admin-shell)) .pd-assurance span{display:flex;align-items:center;gap:5px}
body:not(:has(.admin-shell)) .pd-assurance b{display:grid;width:16px;height:16px;place-items:center;border-radius:50%;background:#e5f6ec;color:#187342;font-size:9px}
body:not(:has(.admin-shell)) .pd-page>.tabs{margin-top:22px;padding:22px;border:1px solid #e0e7ef;border-radius:18px;background:#fff;box-shadow:0 18px 45px -42px rgba(19,51,91,.55)}
@media(max-width:980px){body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail{grid-template-columns:1fr;gap:24px}body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image,body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image img{min-height:420px;height:420px}}
@media(max-width:620px){body:not(:has(.admin-shell)) .pd-page{padding-inline:12px}body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail{margin:0;padding:14px;border-radius:17px}body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .gallery{display:flex;flex-direction:column;padding:8px}body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image,body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .main-image img{min-height:300px;height:300px}body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-product-detail .thumbs{order:2;flex-direction:row}body:not(:has(.admin-shell)) .pd-price-card{align-items:flex-start;flex-wrap:wrap;padding:15px}body:not(:has(.admin-shell)) .pd-price-card--locked .btn{width:100%}body:not(:has(.admin-shell)) .pd-purchase{align-items:stretch;flex-direction:column}body[data-theme="template-6"]:not(:has(.admin-shell)) .pd-purchase .pd-actions{flex-wrap:wrap}body:not(:has(.admin-shell)) .pd-stockline small{display:none}}
body:not(:has(.admin-shell)) .catalog-main .b2b-table {
--catalog-image-track: clamp(48px, 4vw, 64px);
--catalog-action-track: clamp(160px, 14vw, 190px);
width:100%;
min-width:0!important;
table-layout:fixed;
}
body:not(:has(.admin-shell)) .catalog-main .b2b-products{overflow-x:hidden!important}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-image{width:var(--catalog-image-track)}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-title{width:28%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-quality{width:9%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-price{width:10%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-sku{width:10%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-stock{width:13%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table col.col-track-action{width:clamp(190px,16vw,205px)}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-img{width:auto;padding-left:clamp(6px,1vw,10px);padding-right:4px!important}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-product{width:auto;min-width:0}
body:not(:has(.admin-shell)) .catalog-main .b2b-img-wrap{margin-inline:auto}
body:not(:has(.admin-shell)) .catalog-main .b2b-prod-title-line{width:100%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table td{min-width:0;padding-inline:8px;overflow:hidden}
body:not(:has(.admin-shell)) .catalog-main .b2b-price,
body:not(:has(.admin-shell)) .catalog-main .b2b-sku{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-title{width:32%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-quality{width:9%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-price{width:9%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-sku{width:10%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-stock{width:14%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-action{width:142px}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-login-link{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:30px;padding:0 10px;border:1px solid #d7e6f7;border-radius:999px;background:#f2f7fd;color:#096bcc;font-size:11px;font-weight:750;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .28s ease,border-color .28s ease,color .28s ease,transform .28s ease}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-login-link:hover{border-color:#abcbea;background:#e8f3ff;color:#075cab;transform:translateY(-1px)}
body:not(:has(.admin-shell)).is-guest .catalog-main .col-price{text-align:center}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-price-login{min-width:58px}
@media(min-width:901px) and (max-width:1180px){
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-layout{grid-template-columns:220px minmax(0,1fr);gap:14px}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-title{width:31%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-quality{width:11%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-price{width:9%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-sku{width:11%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-stock{width:14%}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-table col.col-track-action{width:122px}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-order-login{min-width:0;padding-inline:8px}
}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row{
grid-template-columns:minmax(0,1fr) clamp(206px,23vw,230px) 30px;
column-gap:10px;
}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-columns{display:grid;grid-template-columns:minmax(0,1fr) clamp(206px,23vw,230px) 30px;column-gap:10px;align-items:end;padding:7px 6px 3px;border-bottom:1px solid #edf1f5;color:#8795a8;font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-columns>div{display:grid;grid-template-columns:minmax(106px,1fr) minmax(82px,.78fr);gap:12px;text-align:center}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__label{display:none}
body:not(:has(.admin-shell)) .cart-row__primary,
body:not(:has(.admin-shell)) .checkout-item__product{
grid-template-columns:clamp(48px,4vw,64px) minmax(0,1fr);
}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__commerce{
display:grid;
grid-template-columns:minmax(106px,1fr) minmax(82px,.78fr);
gap:12px;
width:100%;
}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__title::after{
content:"";
min-width:18px;
flex:1 1 auto;
margin-inline:6px 2px;
border-top:1px dashed #cbd6e3;
opacity:.82;
}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row.is-expanded .cart-row__title::after{display:none}
@media(max-width:620px){
body:not(:has(.admin-shell)) .ferry-main-cart .cart-columns{display:none}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row{grid-template-columns:minmax(0,1fr) 28px}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__commerce{width:min(230px,100%)}
}
@media(min-width:761px) and (max-width:1050px){body:not(:has(.admin-shell)) .catalog-main .b2b-table{min-width:0!important}}
body[data-theme="template-6"] .app-header .extras-menu .extra-icon svg,
body[data-theme="template-6"] .app-header .extras-menu>li>a svg{width:24px;height:24px;flex:0 0 24px}
body:not(:has(.admin-shell)) .catalog-main .b2b-table td{height:62px;padding-block:6px}
body:not(:has(.admin-shell)) .catalog-main .b2b-img-wrap{width:48px;height:48px;border-radius:7px}
body:not(:has(.admin-shell)) .catalog-main .b2b-img-wrap img{width:48px;height:48px;padding:2px;object-fit:contain}
body:not(:has(.admin-shell)) .b2b-prod-title-line{display:flex;align-items:center;gap:5px;min-width:0}
body:not(:has(.admin-shell)) .b2b-prod-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.35;font-weight:700}
body:not(:has(.admin-shell)) .b2b-product-toggle{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:#60748c;cursor:pointer}
body:not(:has(.admin-shell)) .b2b-product-toggle:hover{background:#eaf3ff;color:#0874df}
body:not(:has(.admin-shell)) .b2b-product-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .42s cubic-bezier(.22,1,.36,1)}
body:not(:has(.admin-shell)) .b2b-product-extra{display:none;margin-top:4px;color:#65758b;font-size:10.5px;line-height:1.35}
body:not(:has(.admin-shell)) .b2b-product-extra b{color:#3c4e65}
body:not(:has(.admin-shell)) .b2b-row.is-expanded .b2b-prod-title{white-space:normal;overflow:visible}
body:not(:has(.admin-shell)) .b2b-row.is-expanded .b2b-product-extra{display:block}
body:not(:has(.admin-shell)) .b2b-row.is-expanded .b2b-product-toggle svg{transform:rotate(180deg)}
body:not(:has(.admin-shell)) .catalog-main .b2b-row{transform:scaleY(.98);transform-origin:center;transition:transform 1.05s cubic-bezier(.22,1,.36,1),filter 1.05s cubic-bezier(.22,1,.36,1)}
body:not(:has(.admin-shell)) .catalog-main .b2b-row:hover,
body:not(:has(.admin-shell)) .catalog-main .b2b-row:focus-within{transform:scaleY(1);filter:drop-shadow(0 8px 12px rgba(22,61,105,.08))}
body:not(:has(.admin-shell)) .catalog-main .b2b-add-btn:disabled{opacity:1;cursor:default;background:#e8f6ed;color:#18733b;box-shadow:none}
body:not(:has(.admin-shell)) .catalog-main .b2b-add-btn.success span{margin-left:4px;font-size:14px}
@media(prefers-reduced-motion:reduce){body:not(:has(.admin-shell)) .catalog-main .b2b-row,body:not(:has(.admin-shell)) .b2b-product-toggle svg{transition:none;transform:none}}
@media(min-width:761px) and (max-width:1050px){body:not(:has(.admin-shell)) .catalog-main .b2b-products{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#aebfd3 transparent}body:not(:has(.admin-shell)) .catalog-main .b2b-table{min-width:960px}}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row{grid-template-columns:minmax(0,1fr) auto 30px;gap:10px}
body:not(:has(.admin-shell)) .cart-row__primary{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;min-width:0}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__image{width:48px;height:48px}
body:not(:has(.admin-shell)) .cart-row__commerce{display:flex;align-items:center;gap:12px}
body:not(:has(.admin-shell)) .cart-row__commerce .cart-row__quantity,
body:not(:has(.admin-shell)) .cart-row__commerce .cart-row__total{justify-content:center}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item{grid-template-columns:minmax(0,1fr) 72px 28px;gap:8px;min-height:60px}
body:not(:has(.admin-shell)) .checkout-item__product{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;min-width:0}
body:not(:has(.admin-shell)) .checkout-page .checkout-product-preview,
body:not(:has(.admin-shell)) .checkout-page .checkout-item img{width:48px;height:48px}
body:not(:has(.admin-shell)) .checkout-item__remove{width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #e0e7ef;border-radius:8px;background:#fff;color:#8d9aaa;cursor:pointer;transition:color .3s ease,border-color .3s ease,background .3s ease,transform .3s ease}
body:not(:has(.admin-shell)) .checkout-item__remove:hover{color:#c93545;border-color:#f0b7bd;background:#fff4f5;transform:scale(1.06)}
body:not(:has(.admin-shell)) .checkout-item__remove svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-img{width:58px}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-product{width:36%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-details{text-align:center}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-quality{width:12%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-price{width:11%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-sku{width:12%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-stock{width:13%}
body:not(:has(.admin-shell)) .catalog-main .b2b-table .col-order{width:190px}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls{gap:0;justify-content:flex-end}
body:not(:has(.admin-shell)) .catalog-main .b2b-qty-step{width:24px;height:26px;flex:0 0 24px;padding:0;border:1px solid #dfe5ed;border-radius:0;background:#f9fbfd;color:#667085;font-size:14px;line-height:1}
body:not(:has(.admin-shell)) .catalog-main .b2b-qty-step:first-child{border-radius:7px 0 0 7px;border-right:0}
body:not(:has(.admin-shell)) .catalog-main .b2b-qty-step:nth-of-type(2){border-radius:0 7px 7px 0;border-left:0}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls .b2b-qty-input{width:30px;height:26px;flex:0 0 30px;padding:0;border:1px solid #e6eaf0;border-radius:0;background:#fff;font-size:11px;font-weight:700;text-align:center;appearance:textfield}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls .b2b-qty-input::-webkit-inner-spin-button{appearance:none}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls .b2b-add-btn{height:32px;margin-left:9px}
body:not(:has(.admin-shell)) .catalog-main .b2b-add-btn.cart-returned{animation:cart-button-return .52s cubic-bezier(.22,1,.36,1)}
@keyframes cart-button-return{0%{transform:scale(.94);box-shadow:0 0 0 0 rgba(8,116,223,.28)}55%{transform:scale(1.035);box-shadow:0 0 0 7px rgba(8,116,223,0)}100%{transform:scale(1);box-shadow:none}}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item{grid-template-columns:48px minmax(0,1fr) 28px;gap:9px;min-height:58px;padding:6px 0;align-items:center;border-bottom:1px solid #e7ede8;transform:scaleY(.98);transform-origin:center;transition:transform .85s cubic-bezier(.22,1,.36,1),background-color .85s ease}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item:hover,
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item:focus-within{transform:scaleY(1)}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item>img{width:48px;height:48px;padding:3px;border:1px solid #e1e7e2;border-radius:8px;background:#fff;object-fit:contain}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item__copy{display:flex;min-width:0;flex-direction:column;justify-content:center}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item__title{gap:3px}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item__title strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px!important;line-height:1.3!important;font-weight:650}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item__toggle{width:18px;height:18px;flex-basis:18px}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item__details{display:none;margin-top:4px;color:#657267;font-size:10px}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item.is-expanded .checkout-item__details{display:block}
body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item.is-expanded .checkout-item__title strong{white-space:normal;overflow:visible}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__commerce{display:flex;align-items:center;gap:7px;margin-top:5px}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__commerce>b{font-size:10.5px;font-weight:700;color:#5d6e65;white-space:nowrap;font-variant-numeric:tabular-nums}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity,
body:not(:has(.admin-shell)) .checkout-page .checkout-item.is-expanded .checkout-item__quantity{display:grid;grid-template-columns:22px 28px 22px;width:72px;height:24px;margin:0;border:1px solid #dfe5ed;border-radius:7px;overflow:hidden;background:#f9fbfd}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity button{width:22px;height:22px;background:transparent;color:#667085;font-size:14px}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__quantity input{width:28px;height:22px;padding:0;border:0;border-inline:1px solid #e6eaf0;background:#fff;font-size:10.5px;font-weight:700;text-align:center}
body:not(:has(.admin-shell)) .checkout-page .checkout-item__remove{align-self:center}
body:not(:has(.admin-shell)) .catalog-main .b2b-table th{color:#7b8798;font-size:12px;font-weight:700;letter-spacing:.045em}
body:not(:has(.admin-shell)) .catalog-main .b2b-table td{color:#34465d;font-size:13px;line-height:1.35}
body:not(:has(.admin-shell)) .catalog-main .b2b-prod-title{color:#0874df;font-size:13px;font-weight:700;line-height:1.35}
body:not(:has(.admin-shell)) .catalog-main .b2b-quality{color:#233d62;font-size:13px;font-weight:650}
body:not(:has(.admin-shell)) .catalog-main .b2b-price{color:#17243a;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
body:not(:has(.admin-shell)) .catalog-main .b2b-sku{color:#596a80;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
body:not(:has(.admin-shell)) .catalog-main .b2b-stock-indicator{font-size:13px;font-weight:650;white-space:nowrap}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-price-login{display:inline-flex;min-width:0;min-height:24px;align-items:center;padding:0;color:#2878f0;font-size:12px;font-weight:750;text-decoration:none}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-price-login{color:#f5f5f5!important;background:transparent!important;border:0!important;box-shadow:none!important}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-price-login>span{display:inline-block;color:#f5f5f5!important;filter:blur(4px);opacity:1;user-select:none;white-space:nowrap;text-shadow:none}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-price-login:hover>span{filter:blur(4px);opacity:1}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-price-login:focus-visible{outline:2px solid #2878f0;outline-offset:3px;border-radius:3px}
body:not(:has(.admin-shell)).is-guest .catalog-main .b2b-order-login{min-width:0;min-height:36px;padding:0 12px;font-size:12px;font-weight:700}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls .b2b-add-btn{font-size:12px;font-weight:700}
body:not(:has(.admin-shell)) .catalog-price-notice__copy{display:grid;gap:3px;min-width:0}
body:not(:has(.admin-shell)) .catalog-price-notice__copy strong{color:#17243a;font-size:13px;font-weight:750;line-height:1.3}
body:not(:has(.admin-shell)) .catalog-price-notice__copy span{color:#66758b;font-size:12px;line-height:1.4}
body:not(:has(.admin-shell)) .catalog-price-notice__login:hover{background:#1768d9;box-shadow:0 6px 14px rgba(40,120,237,.23);transform:translateY(-1px)}
body:not(:has(.admin-shell)) .catalog-price-notice__dismiss{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:50%;background:#f1f5f9;color:#68788e;font-size:18px;line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease}
body:not(:has(.admin-shell)) .catalog-price-notice__dismiss:hover{background:#e5edf7;color:#25364d}
@media(max-width:768px){body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header{min-height:176px!important}}
@media(max-width:900px){body:not(:has(.admin-shell)) .catalog-price-notice{width:min(100%,480px);min-height:64px;margin:0 auto 14px;padding:10px 11px 10px 14px;border:1px solid #dce5f0;border-radius:13px;background:#fff;box-shadow:0 6px 18px rgba(25,50,82,.07);display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:9px;color:#25364d}}
@media(max-width:480px){body:not(:has(.admin-shell)) .catalog-price-notice{grid-template-columns:minmax(0,1fr) 30px;gap:5px 8px}body:not(:has(.admin-shell)) .catalog-price-notice__copy{grid-column:1}body:not(:has(.admin-shell)) .catalog-price-notice__login{grid-column:1;grid-row:2;justify-self:start;min-height:32px}body:not(:has(.admin-shell)) .catalog-price-notice__dismiss{grid-column:2;grid-row:1}}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header{display:block;height:auto!important;min-height:78px!important;overflow:visible}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header>.header-inner{display:grid;grid-template-columns:clamp(150px,15vw,190px) minmax(0,1fr) minmax(190px,280px) auto;grid-template-rows:78px;align-items:center;gap:clamp(8px,1.1vw,16px);width:min(100%,1480px);max-width:100%;min-height:78px;height:auto;margin-inline:auto;padding:8px 20px}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header .logo{grid-column:1;grid-row:1;min-width:0;flex:none}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;min-width:0;min-height:48px;align-self:center;border:0;background:transparent;box-shadow:none;z-index:2}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu>.container{display:block;width:100%;max-width:none;min-width:0;margin:0;padding:0}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-top-nav{justify-content:center;flex-wrap:nowrap;gap:1px;min-height:48px}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-nav-link{min-height:38px;padding:6px clamp(5px,.7vw,10px);gap:6px;white-space:nowrap;font-size:13px}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .page-search-jump{grid-column:3;grid-row:1;display:none;min-width:44px;width:44px;height:44px;padding:0;justify-self:end}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .search-bar{grid-column:3;grid-row:1;display:block;min-width:0;width:100%;max-width:280px;justify-self:end}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .user-nav{grid-column:4;grid-row:1;justify-self:end;min-width:0;gap:6px}
body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action{width:40px;height:40px;flex-basis:40px}
@media(max-width:1180px){body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header .header-inner{grid-template-columns:150px minmax(0,1fr) 44px auto;gap:8px;padding-inline:14px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .search-bar{display:none}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .page-search-jump{display:inline-flex}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-nav-link{padding-inline:6px;gap:4px;font-size:12px}}
@media(max-width:850px){body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header{min-height:68px!important}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header>.header-inner{grid-template-columns:minmax(100px,1fr) auto 44px auto;grid-template-rows:68px;gap:6px;padding:8px 12px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu{grid-column:2;min-height:44px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-mobile-toggle{display:inline-flex;width:auto;min-height:40px;padding:6px 10px;border:1px solid #dce5f0;border-radius:10px;background:#fff;font-size:12px;white-space:nowrap}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-top-nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;width:min(420px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;padding:6px;border:1px solid #dce5f0;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(24,44,72,.16);z-index:1200}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-top-nav.mobile-open{display:flex}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-nav-link{width:100%;justify-content:flex-start;padding:9px 11px;font-size:13px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .search-bar{display:none}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .page-search-jump{display:inline-flex;grid-column:3;grid-row:1}}
@media(max-width:520px){body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header>.header-inner{grid-template-columns:minmax(78px,1fr) auto 38px auto;gap:4px;padding-inline:8px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #site-header .logo img{width:100px;height:auto}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) #store-menu .b2b-mobile-toggle{gap:4px;padding-inline:7px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .page-search-jump{width:36px;min-width:36px;height:36px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .user-nav{gap:3px}body.is-innerpage-header[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action{width:34px;height:34px;flex-basis:34px}}
body:not(:has(.admin-shell)) .b2b-search-results[role="dialog"]{width:min(820px,calc(100vw - 24px));max-height:min(68vh,620px);padding:0;border:1px solid #d9e3ef;border-radius:16px;background:#fff;box-shadow:0 22px 56px rgba(20,42,72,.2);scrollbar-color:#bdcde0 #f5f8fc;scrollbar-width:thin}
body:not(:has(.admin-shell)) .b2b-search-results[role="dialog"]::-webkit-scrollbar{width:8px}
body:not(:has(.admin-shell)) .b2b-search-results[role="dialog"]::-webkit-scrollbar-track{background:#f5f8fc}
body:not(:has(.admin-shell)) .b2b-search-results[role="dialog"]::-webkit-scrollbar-thumb{background:#bdcde0;border:2px solid #f5f8fc;border-radius:8px}
body:not(:has(.admin-shell)) .b2b-search-results .suggestion-group-title{min-height:62px;padding:12px 16px;background:#fff;border-bottom:1px solid #e8edf4;backdrop-filter:none}
body:not(:has(.admin-shell)) .b2b-search-results .suggestion-group-title strong{font-size:15px;font-weight:700;color:#172b45}
body:not(:has(.admin-shell)) .b2b-search-results .suggestion-group-title small{font-size:12px;color:#75849a;font-weight:500}
body:not(:has(.admin-shell)) .b2b-search-results .search-popout-close{width:32px;height:32px;border-color:#e0e7f0;background:#f8fafc;font-size:21px}
body:not(:has(.admin-shell)) .b2b-search-results .smart-search-context{min-height:38px;padding:8px 16px;background:#f7f9fc;border-bottom:1px solid #e8edf4;color:#77859a;font-size:12px}
body:not(:has(.admin-shell)) .b2b-search-results .smart-search-context>span+span::before{display:none}
body:not(:has(.admin-shell)) .b2b-search-results .smart-search-context strong{margin-left:3px;color:#344962;font-weight:700}
body:not(:has(.admin-shell)) .b2b-suggestion{display:grid;grid-template-columns:minmax(0,1fr) 128px 176px;align-items:center;gap:14px;min-height:76px;padding:10px 16px;border-bottom:1px solid #edf1f5;background:#fff;transition:background .16s ease}
body:not(:has(.admin-shell)) .b2b-suggestion:hover{background:#f8fbff}
body:not(:has(.admin-shell)) .b2b-suggestion-link{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;min-width:0}
body:not(:has(.admin-shell)) .b2b-suggestion-link img{width:48px;height:48px;padding:3px;border:1px solid #e5ebf2;border-radius:10px;background:#fff}
body:not(:has(.admin-shell)) .b2b-suggestion-info{gap:3px}
body:not(:has(.admin-shell)) .b2b-suggestion-info strong{color:#20344d;font-size:13px;font-weight:650;line-height:1.35}
body:not(:has(.admin-shell)) .b2b-suggestion-info small{color:#8290a3;font-size:11px;line-height:1.3}
body:not(:has(.admin-shell)) .b2b-suggestion-stock{display:inline-flex;align-items:center;gap:5px;width:max-content}
body:not(:has(.admin-shell)) .b2b-suggestion-stock i{width:6px;height:6px;border-radius:50%;background:#22a06b}
body:not(:has(.admin-shell)) .b2b-suggestion-stock.is-out i{background:#dc514b}
body:not(:has(.admin-shell)) .b2b-suggestion-price{color:#263a53;font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
body:not(:has(.admin-shell)) .b2b-suggestion-order{justify-content:flex-end;gap:7px;min-width:0}
body:not(:has(.admin-shell)) .b2b-suggestion-order input{width:48px;height:36px;border-color:#dce5ef;border-radius:9px;background:#fff;color:#24374f}
body:not(:has(.admin-shell)) .b2b-suggestion-order .b2b-add{min-width:98px;height:36px;padding:0 12px;border-radius:9px;background:#176fe5;box-shadow:0 3px 8px rgba(23,111,229,.16);font-size:12px;white-space:nowrap}
body:not(:has(.admin-shell)) .b2b-suggestion-order .b2b-add:hover{background:#0f60cb}
body:not(:has(.admin-shell)) .search-stock-unavailable{color:#9b4b18;font-size:12px;font-weight:650;white-space:nowrap}
body:not(:has(.admin-shell)) .b2b-search-results .suggestion-footer{min-height:48px;padding:14px 16px;border-top:1px solid #e5ebf2;background:#f7faff;color:#1769d2;font-size:13px}
@media(max-width:650px){body:not(:has(.admin-shell)) .b2b-suggestion{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:11px 12px}body:not(:has(.admin-shell)) .b2b-suggestion-link{grid-column:1/-1}body:not(:has(.admin-shell)) .b2b-suggestion-price{text-align:left}body:not(:has(.admin-shell)) .b2b-suggestion-order{grid-column:2;grid-row:2}body:not(:has(.admin-shell)) .b2b-suggestion-order .b2b-add{min-width:92px}}
@media(prefers-reduced-motion:reduce){body:not(:has(.admin-shell)) .checkout-page .checkout-order .checkout-item{transition:none;transform:none}body:not(:has(.admin-shell)) .catalog-main .b2b-add-btn.cart-returned{animation:none}}
@media(max-width:620px){
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row{grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:none}
body:not(:has(.admin-shell)) .cart-row__primary{grid-column:1;grid-row:1}
body:not(:has(.admin-shell)) .cart-row__commerce{grid-column:1;grid-row:2;padding-left:57px}
body:not(:has(.admin-shell)) .ferry-main-cart .cart-row__remove{grid-column:2;grid-row:1}
}
body.is-homepage-header:not(:has(.admin-shell)) #site-header.app-header{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto!important;min-height:128px!important;overflow:visible!important}
body.is-homepage-header:not(:has(.admin-shell)) #site-header.app-header>.header-inner{grid-row:1!important}
body.is-homepage-header:not(:has(.admin-shell)) #site-header.app-header>#store-menu{display:block!important;grid-row:2!important;position:relative!important;width:100%!important;visibility:visible!important}
body.is-homepage-header:has(.checkout-page) #site-header :is(.store-mega-menu,.search-bar,.page-search-jump){display:revert!important}
body.is-homepage-header:has(.checkout-page) #site-header .search-bar{display:block!important}
body.is-homepage-header:has(.checkout-page) #site-header{box-shadow:0 1px 0 rgba(15,31,54,.06),0 10px 30px rgba(15,31,54,.05)!important;border-bottom:1px solid #e7ebf2!important}
@media(max-width:768px){body.is-homepage-header:not(:has(.admin-shell)) #site-header.app-header{min-height:176px!important}}
@media(min-width:901px){.app-header .page-search-jump{display:none !important}}
body.is-homepage-header:has(.checkout-page) #site-header .page-search-jump.page-search-jump{display:none !important}
body.is-homepage-header:has(.checkout-page) #site-header .search-bar.search-bar{display:block !important}
body.is-homepage-header:has(.checkout-page) #site-header #store-menu{display:block !important}
body:not(:has(.admin-shell)) #site-header .search-bar{display:block !important}
body:not(:has(.admin-shell)) #site-header #store-menu{display:block !important}
body:not(:has(.admin-shell)) #site-header .page-search-jump{display:none !important}
body[data-theme="template-6"]:not(:has(.admin-shell)) .ferry-main-account{max-width:1180px;margin-inline:auto;padding-inline:20px}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option>.part-type-thumb{width:28px;height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;gap:0;border-radius:6px;background:#eff6ff;color:var(--pt-c,#64748b);overflow:hidden}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option>.part-type-thumb svg{width:100%;display:block}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option.active>.part-type-thumb{background:var(--primary);color:#fff}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-intro{display:flex;align-items:center;margin:0;flex:1 1 100%}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-intro>strong{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#8a94a6);white-space:nowrap;line-height:1.2;margin:0}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-options{flex:1 1 100%;min-width:0}
body:not(:has(.admin-shell)) .catalog-main .b2b-products{margin:0}
body:not(:has(.admin-shell)) .catalog-main .b2b-table thead th{height:56px;padding-block:0;vertical-align:middle}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar{border-radius:8px;padding-top:0}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-heading{
position:sticky;top:0;z-index:3;
margin:0 0 10px;padding:0 14px;
height:56px;min-height:56px;box-sizing:border-box;
display:flex;align-items:center;justify-content:space-between;gap:8px;
background:#fff;border-bottom:1px solid #e5e5ea;border-radius:8px 8px 0 0;
}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-heading>h2{margin:0;font-size:14px;line-height:1.25;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-heading>span{
order:2;margin:0;flex:0 0 auto;font-size:9px;line-height:1;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#94a3b8;white-space:nowrap;
}
body:not(:has(.admin-shell)) .lp-slider-controls button{font-size:0;line-height:0;transition:background .18s ease,color .18s ease,transform .18s ease}
body:not(:has(.admin-shell)) .lp-slider-controls button::before{content:"";display:block;width:16px;height:16px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
body:not(:has(.admin-shell)) .lp-slider-controls button[data-fm-slide="-1"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
body:not(:has(.admin-shell)) .lp-slider-controls button[data-fm-slide="1"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
body:not(:has(.admin-shell)) .lp-slider-controls button:hover{transform:translateY(-1px)}
body:not(:has(.admin-shell)) .lp-slider-controls button:active{transform:translateY(0) scale(.94)}
body:not(:has(.admin-shell)) #site-header.app-header{background:#fff;border-bottom:1px solid rgba(15,32,66,.08);box-shadow:0 1px 0 rgba(15,32,66,.03),0 12px 28px -28px rgba(15,32,66,.55);transition:background .25s ease,box-shadow .25s ease}
body:not(:has(.admin-shell)) #site-header.app-header .header-inner .nav-icon-action svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
body:not(:has(.admin-shell)) #site-header.app-header .header-inner .nav-icon-action:hover svg{transform:translateY(-1px) scale(1.06)}
body:not(:has(.admin-shell)) .lp-search-field{border-radius:16px;background:#fff;border:1px solid #cfd8e6;box-shadow:0 1px 2px rgba(15,32,66,.04),0 16px 32px -24px rgba(15,32,66,.5);transition:border-color .2s ease,box-shadow .22s ease}
body:not(:has(.admin-shell)) .lp-search-field:focus-within{border-color:#2474f5;box-shadow:0 0 0 4px rgba(36,116,245,.13),0 22px 40px -24px rgba(15,32,66,.55)}
body:not(:has(.admin-shell)) .lp-search-field input{transition:color .2s ease}
body:not(:has(.admin-shell)) .lp-search-field input::placeholder{color:#94a3b8}
body:not(:has(.admin-shell)) .lp-search-field button{border-radius:12px;background:linear-gradient(180deg,#3b82f6,#2168e0);box-shadow:0 8px 18px -10px rgba(36,116,245,.95);transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,filter .18s ease}
body:not(:has(.admin-shell)) .lp-search-field button:hover{transform:translateY(-1px);box-shadow:0 14px 24px -10px rgba(36,116,245,.95)}
body:not(:has(.admin-shell)) .lp-search-field button:active{transform:translateY(0) scale(.985)}
body:not(:has(.admin-shell)) .lp-search-hint{transition:color .2s ease}
body:not(:has(.admin-shell)) .lp-chips a{transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
body:not(:has(.admin-shell)) .lp-chips a:hover{transform:translateY(-1px);border-color:#2474f5;color:#1d4ed8;background:#f5f9ff;box-shadow:0 8px 16px -12px rgba(36,116,245,.7)}
body:not(:has(.admin-shell)) .lp-eyebrow{background:#fff;border:1px solid #cfd8e6;color:#5b6779;letter-spacing:.015em;box-shadow:0 10px 20px -18px rgba(15,32,66,.7)}
body:not(:has(.admin-shell)) .lp-section-head h2{letter-spacing:-.015em}
body:not(:has(.admin-shell)) .lp-kicker{color:#2474f5;letter-spacing:.1em;text-transform:uppercase}
body:not(:has(.admin-shell)) .lp-section-link{transition:color .18s ease,gap .18s ease}
body:not(:has(.admin-shell)) .lp-section-link:hover{color:#1d4ed8}
body:not(:has(.admin-shell)) .catalog-main .b2b-table thead th{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7b8798;background:#fff;border-bottom:1px solid #e5e5ea}
body:not(:has(.admin-shell)) .catalog-main .b2b-table tbody tr{transition:background .16s ease}
body:not(:has(.admin-shell)) .catalog-main .b2b-table tbody tr:hover{background:#f7f9fd}
body:not(:has(.admin-shell)) .fm-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:9999;pointer-events:none;background:linear-gradient(90deg,#2474f5,#7cb2fb 50%,#2474f5);background-size:220% 100%;animation:fmBar 1.05s linear infinite;box-shadow:0 1px 9px rgba(36,116,245,.55)}
@keyframes fmBar{0%{background-position:130% 0}100%{background-position:-45% 0}}
body:not(:has(.admin-shell)) .catalog-main{transition:opacity .22s ease}
body:not(:has(.admin-shell)).fm-catalog-busy .catalog-main{opacity:.4;filter:saturate(.82);pointer-events:none;position:relative}
body:not(:has(.admin-shell)).fm-catalog-busy .catalog-main::after{content:"";position:absolute;inset:-2px;border-radius:12px;pointer-events:none;background:linear-gradient(100deg,rgba(246,248,251,.16) 0%,rgba(255,255,255,.93) 45%,rgba(246,248,251,.16) 90%);background-size:220% 100%;animation:fmShimmer 1.05s linear infinite}
@keyframes fmShimmer{0%{background-position:130% 0}100%{background-position:-45% 0}}
body:not(:has(.admin-shell)) [data-catalog-shell].fm-anim .b2b-table tbody tr{animation:fmRowIn .34s cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(var(--fm-i,0) * 26ms)}
@keyframes fmRowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body:not(:has(.admin-shell)) .fm-progress{animation:none;background:#2474f5}body:not(:has(.admin-shell)).fm-catalog-busy .catalog-main::after{animation:none}body:not(:has(.admin-shell)) [data-catalog-shell].fm-anim .b2b-table tbody tr{animation:none}}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar{overflow:hidden}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-body{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:transparent transparent}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar:hover .catalog-sidebar-body{scrollbar-color:#b6c2d2 transparent}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-body::-webkit-scrollbar{width:8px}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-body::-webkit-scrollbar-track{background:transparent}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-body::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar:hover .catalog-sidebar-body::-webkit-scrollbar-thumb{background-color:#b6c2d2;border:2px solid transparent;background-clip:padding-box}
body:not(:has(.admin-shell)) #search-form .search-input-wrapper{display: flex;
border-radius: 999px;padding:0px 0px 0px 20px;
box-shadow: 0px 0px 6px 1px rgba(15, 32, 66, .05);
transition: border-color .6s ease, box-shadow .62s ease;}
body:not(:has(.admin-shell)) #search-form .search-input-wrapper:focus-within{border-color:#2474f5;box-shadow:0 0 0 4px rgba(36,116,245,.12)}
body:not(:has(.admin-shell)) #search-form input[type=search]{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;border-right: 3px solid #e1e6ed;}
body:not(:has(.admin-shell)) #site-header .user-nav .wishlist-contents,body:not(:has(.admin-shell)) #site-header .user-nav .cart-contents,body:not(:has(.admin-shell)) #site-header .user-nav .item-register.account-btn{box-shadow:none;transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,box-shadow .18s ease,background .18s ease}
body:not(:has(.admin-shell)) #site-header .user-nav .wishlist-contents:hover,body:not(:has(.admin-shell)) #site-header .user-nav .cart-contents:hover,body:not(:has(.admin-shell)) #site-header .user-nav .item-register.account-btn:hover{transform:translateY(-1px);border-color:#2474f5;box-shadow:0 6px 14px -10px rgba(15,32,66,.5)}
@media(min-width:761px){body:not(:has(.admin-shell)) #shop-main .b2b-products{overflow-x:clip!important;overflow-y:visible}}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-desktop-filters{padding-top:10px;padding-bottom:4px}
body:not(:has(.admin-shell)) .fm-catalog-page #fm-filters{padding-top:8px;padding-bottom:0}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar .check-label{padding-block:8px}
body:not(:has(.admin-shell)) .fm-catalog-page .catalog-sidebar-active{margin-top:8px;padding-top:8px}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option>span:not(.part-type-thumb){flex:1 1 auto;min-width:0;overflow:hidden}
/*===assets/css/button-contrast.css===*/body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login) {
background: transparent !important;
border: 1.5px solid #aac3e8 !important;
color: #aac3e8 !important;
box-shadow: none !important;
text-decoration: none;
transition: transform .55s cubic-bezier(.2,.75,.2,1), border-color .55s ease, color .55s ease, box-shadow .55s ease !important;
transform: scale(1);
transform-origin: center;
padding: 7px 20px;
border-radius: 99px;
}
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login):hover:not(:disabled) {
background: transparent !important;
border-color: #4887f4 !important;
box-shadow: 0 7px 18px rgba(16,110,61,.12) !important;
transform: scale(1.055) !important;
}
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login):active:not(:disabled) {
transform: scale(.98) !important;
}
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login):focus-visible {
outline: 3px solid #16834b;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login) {
transition: none !important;
transform: none !important;
}
}
/*===assets/css/unavailable-actions.css===*/body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable{opacity:1}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable :is(.b2b-qty-step,.b2b-qty-input){border-color:#dce7f6;background:#f6f9fd;color:#9db2d0;box-shadow:none;cursor:not-allowed;opacity:1}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable .b2b-add-btn,
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable #pd-add{border:1px solid #bbd3f3;background:#eaf3ff;color:#7d9fc9;box-shadow:none;cursor:not-allowed;opacity:1;transform:none}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable .b2b-add-btn:hover,
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable #pd-add:hover{border-color:#bbd3f3;background:#eaf3ff;color:#7d9fc9;box-shadow:none;transform:none}
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable .pd-stepper{border-color:#dce7f6;background:#f6f9fd}
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable .pd-stepper :is(button,input){background:#f6f9fd;color:#9db2d0;cursor:not-allowed;opacity:1}
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable .pd-quantity small{color:#7589a5}
body:not(:has(.admin-shell)) :is(.th-add,.th-hero-card__add,.button)[disabled][data-add]{background:#eaf3ff;color:#7d9fc9;border-color:#bbd3f3;box-shadow:none;opacity:1;cursor:not-allowed;transform:none}
/*===f/home.css===*//*===*/
.lp {
--lp-ink: #0b1220;
--lp-ink-soft: #142238;
--lp-line: #e3e8ef;
--lp-line-strong: #cfd8e6;
--lp-muted: #5b6779;
--lp-accent: hsl(217, 91%, 55%);
--lp-accent-soft: hsl(217, 91%, 96%);
--lp-hero-text: #eaf1ff;
--lp-hero-muted: #a8bada;
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 4.5rem);
padding: 0.5rem 0 3.5rem;
font-variant-numeric: tabular-nums;
}
.lp-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.lp a, .lp a:hover { text-decoration: none; }
.lp h1, .lp h2, .lp h3 { letter-spacing: -0.02em; }
.lp :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; border-radius: 6px; }
.lp-hero {
padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 3.5vw, 3rem);
}
.lp-hero-body { position: relative; max-width: 46rem; }
.lp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
padding: 0.375rem 0.875rem;
border: 1px solid var(--lp-line-strong);
border-radius: 999px;
background: #ffffff;
color: var(--lp-muted);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.lp .lp-hero h1 {
margin: 0;
color: var(--lp-ink);
font-size: clamp(1.875rem, 4.2vw, 2.875rem);
line-height: 1.12;
font-weight: 600;
}
.lp-hero h1 span { color: var(--lp-accent); }
.lp-lead {
margin: 1.125rem 0 0;
max-width: 38rem;
color: var(--lp-hero-muted);
font-size: clamp(1rem, 1.6vw, 1.125rem);
line-height: 1.6;
}
.lp-search { position: relative; margin-top: 2rem; max-width: 40rem; }
.lp-search-field {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.5rem 0.5rem 1rem;
background: #ffffff;
border-radius: 14px;
border: 1px solid var(--lp-line-strong);
box-shadow: 0 10px 26px -24px rgba(15, 32, 66, 0.55);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-search-field:focus-within {
border-color: var(--lp-accent);
box-shadow: 0 0 0 4px hsla(217, 91%, 55%, 0.16), 0 10px 26px -24px rgba(15, 32, 66, 0.55);
}
.lp-search-field > svg { width: 20px; height: 20px; color: var(--lp-muted); flex: none; }
.lp-search-field input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
outline: none;
color: var(--lp-ink);
font-size: 1rem;
font-family: inherit;
padding: 0.625rem 0;
}
.lp-search-field input::-webkit-search-cancel-button { cursor: pointer; }
.lp-search-submit {
flex: none;
border: 0;
border-radius: 10px;
padding: 0.75rem 1.5rem;
background: var(--lp-accent);
color: #ffffff;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease;
}
.lp-search-submit:hover { background: hsl(217, 91%, 47%); }
.lp-search-hint {
margin: 0.75rem 0 0;
color: var(--lp-hero-muted);
font-size: 0.8125rem;
}
.lp-search-hint strong { color: var(--lp-ink); font-weight: 650; }
.lp-search-hint span::before { content: " · "; }
.lp-search .search-suggestions { text-align: left; color: var(--lp-ink); }
.lp-search .smart-search-context {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem 0.625rem;
border-bottom: 1px solid var(--border-light);
background: #f7faff;
color: var(--lp-muted);
font-size: 0.72rem;
}
.lp-search .smart-search-context > span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.lp-search .smart-search-context > span + span::before {
content: "›";
margin-right: 0.25rem;
color: var(--lp-accent);
font-weight: 700;
}
.lp-search .smart-search-understood {
color: var(--lp-ink);
margin-right: auto;
}
.lp-search .smart-search-understood strong { color: var(--lp-accent); }
.lp-search .smart-search-parts {
padding: 0.75rem 1rem 0.875rem;
border-bottom: 1px solid var(--border-light);
background: #fff;
}
.lp-search .smart-search-parts > p {
margin: 0 0 0.55rem;
color: var(--lp-ink);
font-size: 0.75rem;
font-weight: 700;
}
.lp-search .smart-search-part-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 0.5rem;
}
.lp-search .smart-search-part {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 0.625rem;
min-width: 0;
min-height: 58px;
padding: 0.4rem 0.55rem;
border: 1px solid #dfe7f1;
border-radius: 9px;
background: #f8fbff;
color: var(--lp-ink);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.lp-search .smart-search-part:hover,
.lp-search .smart-search-part:focus-visible {
border-color: #9fc5f1;
background: #edf6ff;
color: var(--lp-accent);
text-decoration: none;
transform: translateY(-1px);
}
.lp-search .smart-search-part-media {
display: grid;
place-items: center;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 7px;
background: #fff;
}
.lp-search .smart-search-part-media img {
width: 100%;
height: 100%;
padding: 3px;
object-fit: contain;
}
.lp-search .smart-search-part-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.lp-search .smart-search-part-copy strong {
overflow: hidden;
color: inherit;
font-size: 0.75rem;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.lp-search .smart-search-part-copy small {
margin-top: 2px;
color: var(--lp-muted);
font-size: 0.68rem;
}
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.lp .lp-chips a {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.5rem 0.9375rem;
border: 1px solid var(--lp-line-strong);
border-radius: 999px;
background: #ffffff;
color: var(--lp-ink);
font-size: 0.875rem;
font-weight: 600;
transition: background 0.18s ease, border-color 0.18s ease;
}
.lp-chips a small { color: var(--lp-muted); font-weight: 500; font-size: 0.75rem; }
.lp-chips a:hover { background: var(--lp-accent-soft); border-color: var(--lp-accent); }
.lp-stats {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 3.5rem);
margin: 2.25rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--lp-line);
}
.lp-stats div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.lp-stats dd { margin: 0; color: var(--lp-ink); font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 600; line-height: 1; }
.lp-stats dt { color: var(--lp-muted); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--lp-line);
}
.lp-kicker {
margin: 0 0 0.375rem;
color: var(--lp-accent);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.lp .lp-section-head h2 { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.875rem); color: var(--lp-ink); }
.lp .lp-section-link {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
flex: none;
color: var(--lp-ink);
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
}
.lp-section-link svg { width: 17px; height: 17px; transition: transform 0.18s ease; }
.lp .lp-section-link:hover { color: var(--lp-accent); }
.lp-section-link:hover svg { transform: translateX(3px); }
.lp-empty { margin: 0; color: var(--lp-muted); }
.lp-grid { display: grid; gap: 0.875rem; }
.lp-categories { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.lp-category {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
align-items: center;
gap: 0.125rem 0.875rem;
padding: 1.125rem 1.125rem 1.125rem 1rem;
background: #ffffff;
border: 1px solid var(--lp-line);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.lp-category::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--lp-accent);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.2s ease;
}
.lp-category:hover {
border-color: var(--lp-line-strong);
box-shadow: 0 14px 30px -22px rgba(11, 18, 32, 0.55);
transform: translateY(-2px);
}
.lp-category:hover::before { transform: scaleY(1); }
.lp-category-icon {
grid-row: span 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 11px;
background: var(--lp-accent-soft);
color: var(--lp-accent);
}
.lp-category-icon svg { width: 22px; height: 22px; }
.lp-category-name { color: var(--lp-ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.lp-category-count { color: var(--lp-muted); font-size: 0.8125rem; grid-column: 2; }
.lp-category-go {
grid-row: span 2;
display: grid;
place-items: center;
color: var(--lp-line-strong);
transition: color 0.18s ease, transform 0.18s ease;
}
.lp-category-go svg { width: 18px; height: 18px; }
.lp-category:hover .lp-category-go { color: var(--lp-accent); transform: translateX(2px); }
.lp-devices { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.25rem; }
.lp-families { display: grid; gap: 0.625rem; align-content: start; }
.lp-family {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 1rem;
padding: 1rem 1.125rem;
background: #ffffff;
border: 1px solid var(--lp-line);
border-radius: 12px;
transition: border-color 0.18s ease, background 0.18s ease;
}
.lp-family:hover { border-color: var(--lp-accent); background: var(--lp-accent-soft); }
.lp-family-name { color: var(--lp-ink); font-weight: 600; }
.lp-family-count { color: var(--lp-muted); font-size: 0.8125rem; }
.lp-family-go { display: grid; place-items: center; color: var(--lp-line-strong); }
.lp-family-go svg { width: 17px; height: 17px; }
.lp-family:hover .lp-family-go { color: var(--lp-accent); }
.lp-models {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1.5rem;
border-radius: 16px;
color: var(--lp-hero-text);
background:
radial-gradient(100% 120% at 100% 0%, rgba(56, 132, 255, 0.32), transparent 60%),
linear-gradient(160deg, #101b2f 0%, #0b1220 100%);
}
.lp .lp-models h3 { margin: 0; color: var(--lp-hero-text); font-size: 1.125rem; }
.lp-models-note { margin: 0.375rem 0 1.125rem; color: var(--lp-hero-muted); font-size: 0.875rem; }
.lp-model-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lp .lp-model-chip {
display: inline-flex;
align-items: baseline;
gap: 0.4375rem;
padding: 0.4375rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 9px;
background: rgba(255, 255, 255, 0.05);
color: var(--lp-hero-text);
font-size: 0.8125rem;
font-weight: 600;
transition: background 0.18s ease, border-color 0.18s ease;
}
.lp-model-chip small { color: var(--lp-hero-muted); font-weight: 500; }
.lp-model-chip:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.34); }
.lp .lp-models-all {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
margin-top: 1.25rem;
color: #8fc0ff;
font-size: 0.875rem;
font-weight: 600;
}
.lp-models-all svg { width: 16px; height: 16px; transition: transform 0.18s ease; }
.lp-models-all:hover svg { transform: translateX(3px); }
.lp-product-sections {
display: grid;
gap: clamp(4rem, 7vw, 6.5rem);
min-width: 0;
}
.lp-product-section {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.lp-product-section-actions {
display: flex;
align-items: center;
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.lp-product-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: clamp(0.5rem, 0.8vw, 0.75rem);
width: 100%;
min-width: 0;
}
.lp-product-slider {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-auto-flow: column;
grid-auto-columns: calc((100% - 4rem) / 5);
gap: 0.75rem 1rem;
overflow-x: hidden;
width: 100%;
min-width: 0;
max-width: 100%;
padding: 0.125rem 0;
will-change: transform;
}
body[data-theme="template-6"] .ferry-main-home .lp-product-slider {
overflow-x: hidden;
scrollbar-width: none;
scroll-snap-type: none;
padding-bottom: 0.125rem;
}
body[data-theme="template-6"] .ferry-main-home .lp-product-slider::-webkit-scrollbar { display: none; }
.lp-product-slider > * {
width: 100%;
min-width: 0;
}
.lp-slider-controls { display: flex; gap: 0.375rem; }
.lp-slider-controls button {
display: grid;
place-items: center;
width: clamp(2rem, 3vw, 2.25rem);
height: clamp(2rem, 3vw, 2.25rem);
padding: 0;
border: 1px solid var(--lp-line-strong);
border-radius: 50%;
background: #fff;
color: var(--lp-ink);
font: 500 1.4rem/1 inherit;
cursor: pointer;
}
.lp-slider-controls button:hover { border-color: var(--lp-accent); color: var(--lp-accent); }
.lp-product {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--lp-line);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
min-width: 0;
height: 100%;
}
.lp-product:hover {
border-color: var(--lp-line-strong);
box-shadow: 0 18px 34px -26px rgba(11, 18, 32, 0.6);
transform: translateY(-2px);
}
.lp-product-media {
display: grid;
place-items: center;
position: relative;
aspect-ratio: 4 / 3;
background: #f6f8fb;
border-bottom: 1px solid var(--lp-line);
overflow: hidden;
}
.lp-product-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0;
mix-blend-mode: multiply;
transform: translate(var(--lp-image-x, 0), var(--lp-image-y, 0)) scale(var(--lp-image-scale, 0.82));
transform-origin: center;
transition: transform 0.18s ease;
}
.lp-product-placeholder { color: var(--lp-line-strong); }
.lp-product-placeholder svg { width: 40px; height: 40px; }
.lp-product-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 0.875rem 1rem; flex: 1; }
.lp-product-context { margin: 0; color: var(--lp-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-product-name { min-height: 2.7em; margin: 0; overflow: hidden; font-size: 0.9375rem; line-height: 1.35; font-weight: 600; }
.lp-product-name a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lp .lp-product-name a { color: var(--lp-ink); }
.lp .lp-product-name a:hover { color: var(--lp-accent); }
.lp-product-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; }
.lp-product-details-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; min-height: 24px; }
.lp-product-details-row .lp-product-meta { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; }
.lp-product-details-row .lp-product-sku { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-product-sku,
.lp-product-quality {
padding: 0.125rem 0.4375rem;
border-radius: 5px;
background: #f1f5f9;
color: var(--lp-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.lp-product-stock { display: flex; flex: 0 0 auto; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.lp-product-stock span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lp-product-stock.is-ok { color: hsl(150, 65%, 32%); }
.lp-product-stock.is-out { color: hsl(4, 72%, 45%); }
.lp-product-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.875rem;
}
.lp-product-price { color: var(--lp-ink); font-size: 1.0625rem; font-weight: 700; }
.lp .lp-product-login { color: var(--lp-accent); font-size: 0.875rem; font-weight: 600; }
.lp .lp-product-login:hover { text-decoration: underline; }
.lp-product-add {
border: 1px solid var(--lp-ink);
border-radius: 9px;
padding: 0.5rem 0.875rem;
background: var(--lp-ink);
color: #ffffff;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
}
.lp-product-add:hover { background: var(--lp-accent); border-color: var(--lp-accent); }
.lp-product-add:disabled { opacity: 0.6; cursor: progress; }
.lp-method { border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); padding: clamp(1.75rem, 3vw, 2.5rem) 0; }
.lp-method-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.lp-method-list li { display: flex; flex-direction: column; gap: 0.375rem; }
.lp-step { color: var(--lp-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; }
.lp .lp-method-list h3 { margin: 0; font-size: 1rem; color: var(--lp-ink); }
.lp-method-list p { margin: 0; color: var(--lp-muted); font-size: 0.875rem; line-height: 1.55; }
.lp-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
border-radius: 24px;
color: var(--lp-ink);
background: #ffffff;
border: 1px solid var(--lp-line);
box-shadow: 0 12px 32px -16px rgba(15, 32, 66, 0.08);
}
.lp .lp-cta h2 {
margin: 0 0 0.5rem;
color: var(--lp-ink);
font-size: clamp(1.5rem, 2.8vw, 2rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
}
.lp-cta p { margin: 0; max-width: 34rem; color: var(--lp-muted); font-size: 1rem; line-height: 1.55; }
.lp-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lp-btn {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
padding: 0.8125rem 1.375rem;
border-radius: 11px;
font-size: 0.9375rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
font-family: inherit;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.lp-btn svg { width: 17px; height: 17px; transition: transform 0.18s ease; }
.lp-btn:hover svg { transform: translateX(3px); }
.lp .lp-btn-primary { background: #1768d4; color: #ffffff; }
.lp .lp-btn-primary:hover { background: #0f56b8; box-shadow: 0 4px 12px rgba(23, 104, 212, 0.22); }
.lp .lp-btn-ghost { border-color: var(--lp-line-strong); background: #ffffff; color: var(--lp-ink); }
.lp .lp-btn-ghost:hover { border-color: var(--lp-muted); background: #f8fafc; }
.lp-alert { margin: 0; }
.lp-alert[hidden] { display: none; }
.lp-alert .lp-btn-ghost { margin-top: 0.75rem; border-color: currentColor; color: inherit; }
.lp-skeleton { border-radius: 12px; background: linear-gradient(100deg, #eef2f7 30%, #f7fafc 50%, #eef2f7 70%); background-size: 220% 100%; animation: lp-shimmer 1.4s ease-in-out infinite; }
.lp-skeleton-card { height: 78px; }
.lp-skeleton-row { height: 56px; }
.lp-skeleton-chip { height: 32px; width: 118px; border-radius: 9px; }
.lp-skeleton-product { height: 300px; }
@keyframes lp-shimmer {
from { background-position: 140% 0; }
to { background-position: -40% 0; }
}
@media (max-width: 1100px) {
.lp-devices { grid-template-columns: 1fr; }
.lp-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.lp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-product-slider { grid-auto-columns: calc((100% - 1.5rem) / 3); gap:0.75rem; }
}
@media (max-width: 720px) {
.lp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-product-slider { grid-auto-columns:calc((100% - 0.75rem) / 2); }
}
@media (max-width: 640px) {
.lp-search-field { flex-wrap: wrap; padding: 0.625rem; }
.lp-search .smart-search-part-grid {
display: flex;
overflow-x: auto;
padding-bottom: 0.25rem;
scroll-snap-type: x proximity;
}
.lp-search .smart-search-part {
flex: 0 0 178px;
scroll-snap-align: start;
}
.lp-search-field input { flex: 1 1 60%; padding-left: 0.25rem; }
.lp-search-submit { flex: 1 1 100%; }
.lp-section-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.lp-product-section-actions { width: 100%; justify-content: space-between; }
.lp-stats { gap: 1.25rem 2rem; }
.lp-categories { grid-template-columns: 1fr; }
.lp-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
.lp-product-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.lp *, .lp *::before { transition: none !important; animation: none !important; }
.lp-category:hover, .lp-product:hover, .lp-chips a:hover { transform: none; }
}
body:not(:has(.admin-shell)) .ferry-main-home .lp-hero{width:100%;max-width:1200px;align-self:stretch;margin:18px 0 0;}
.language-control { display:flex; align-items:center; margin-left:.35rem; }
.language-control select { appearance:auto; border:1px solid var(--border, #d7dce3); border-radius:6px; background:transparent; color:inherit; font:inherit; font-size:.75rem; font-weight:700; letter-spacing:.04em; padding:.38rem .25rem; cursor:pointer; }
.language-control select:focus-visible { outline:2px solid var(--primary, #1769aa); outline-offset:2px; }
@media (max-width: 768px) { .language-control { order:2; margin-left:auto; } .language-control select { min-height:34px; } }
:root {
--primary: hsl(217, 91%, 60%);
--primary-hover: hsl(217, 91%, 50%);
--primary-active: hsl(217, 91%, 40%);
--primary-light: hsl(217, 91%, 95%);
--bg-body: #f8fafc;
--bg-surface: #ffffff;
--bg-surface-hover: #f1f5f9;
--text-main: #0f172a;
--text-muted: #64748b;
--text-inverse: #ffffff;
--border: #e2e8f0;
--border-light: #f1f5f9;
--border-focus: #93c5fd;
--danger: hsl(350, 70%, 50%);
--danger-hover: hsl(350, 70%, 40%);
--danger-bg: hsl(350, 70%, 97%);
--danger-border: hsl(350, 70%, 90%);
--success: hsl(150, 70%, 40%);
--success-bg: hsl(150, 70%, 96%);
--success-border: hsl(150, 70%, 85%);
--warning: hsl(35, 90%, 45%);
--warning-bg: hsl(35, 90%, 97%);
--warning-border: hsl(35, 90%, 85%);
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 12px;
--font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
min-height: 100vh;
}
a {
color: var(--primary);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text-main); }
img, svg { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 1rem; } .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; }
.p-0 { padding: 0 !important; } .p-2 { padding: 0.5rem; } .pb-4 { padding-bottom: 1.5rem; } .pt-4 { padding-top: 1.5rem; } .pl-0 { padding-left: 0 !important; }
.border-top { border-top: 1px solid var(--border-light); }
.text-center { text-align: center; } .text-right { text-align: right; }
.text-muted { color: var(--text-muted); } .text-primary { color: var(--primary); } .text-danger { color: var(--danger) !important; }
.font-weight-bold { font-weight: 700; } .font-weight-normal { font-weight: 400; }
.text-sm { font-size: 0.875rem; } .small { font-size: 0.75rem; }
.d-flex { display: flex; } .d-block { display: block; } .flex-1 { flex: 1; }
.justify-between { justify-content: space-between; } .align-center { align-items: center; }
.main-content { min-height: calc(100svh - 10rem); }
#store-menu { min-height: 48px; }
.page-loader { display: flex; justify-content: center; align-items: center; min-height: calc(100svh - 14rem); }
.spinner { width: 2rem; height: 2rem; border: 3px solid var(--border-light); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.test-banner { background: var(--text-main); color: var(--warning); text-align: center; padding: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.app-header { background: var(--bg-surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 4.5rem; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 48px; width: auto; }
.search-bar { flex: 1; max-width: 500px; position: relative; }
.search-input-wrapper:focus-within { background: var(--bg-surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.search-icon { color: var(--text-muted); margin: 0 0.5rem; flex-shrink: 0; }
#search-input, .hero-search-input { flex: 1; border: none; background: transparent; padding: 0.5rem 0; font-size: 0.875rem; outline: none; min-width: 0; }
.hero-btn { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.hero-btn:hover { background: var(--primary-hover); }
.search-suggestions { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); overflow: hidden; z-index: 200; max-height: 80vh; overflow-y: auto; }
.search-suggestions a.is-active { background: var(--primary-light); outline: 2px solid var(--primary); outline-offset: -2px; }
.suggestion-group { border-bottom: 1px solid var(--border-light); }
.suggestion-group:last-child { border-bottom: none; }
.suggestion-group-title { padding: 0.75rem 1rem 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.suggestion-item, .suggestion-product { display: flex; align-items: center; padding: 0.5rem 1rem; color: var(--text-main); transition: background 0.1s; }
.suggestion-item:hover, .suggestion-product:hover { background: var(--bg-body); text-decoration: none; }
.suggestion-text { flex: 1; font-weight: 500; font-size: 0.875rem; }
.suggestion-meta { font-size: 0.75rem; }
.suggestion-product { gap: 1rem; }
.suggestion-img { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-body); flex-shrink: 0; }
.suggestion-img img { width: 100%; height: 100%; object-fit: contain; }
.suggestion-product-info { flex: 1; min-width: 0; }
.suggestion-product-name { font-weight: 500; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-product-sku { font-size: 0.75rem; color: var(--text-muted); font-family: ui-monospace, monospace; }
.suggestion-product-price { font-weight: 700; font-size: 0.875rem; color: var(--text-main); font-variant-numeric: tabular-nums; }
.suggestion-footer { display: block; padding: 0.75rem 1rem; text-align: center; background: var(--bg-body); font-weight: 500; font-size: 0.875rem; }
.suggestion-footer:hover { background: var(--border-light); text-decoration: none; }
.suggestion-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; }
.user-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-link { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--text-main); font-size: 0.75rem; font-weight: 500; transition: color 0.2s; }
.nav-link:hover { color: var(--primary); text-decoration: none; }
.cart-icon-wrapper { position: relative; display: flex; }
.cart-badge { position: absolute; top: -6px; right: -8px; background: var(--primary); color: white; font-size: 0.65rem; font-weight: 700; padding: 0 0.35rem; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-surface); }
.cart-flyer {
position: fixed;
z-index: 3000;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(38, 105, 187, .18);
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 28px rgba(20, 74, 140, .24);
pointer-events: none;
will-change: transform, opacity;
}
.cart-flyer img { width: 100%; height: 100%; object-fit: contain; }
.cart-flyer > span { color: var(--primary); font-size: 1.5rem; font-weight: 600; }
.nav-cart.cart-receiving .cart-icon-wrapper {
animation: cart-receive-pulse .56s cubic-bezier(.2,.8,.25,1);
}
@keyframes cart-receive-pulse {
0%,100% { transform: scale(1); }
42% { transform: scale(1.22) rotate(-4deg); }
68% { transform: scale(.96) rotate(2deg); }
}
.part-add-btn {
transition: transform .14s ease, background-color .14s ease, opacity .14s ease;
}
.part-add-btn.is-adding,
.part-add-btn[data-pending="true"] {
opacity: .82;
transform: scale(.93);
}
@media (prefers-reduced-motion: reduce) {
.nav-cart.cart-receiving .cart-icon-wrapper { animation-duration: .01ms; }
.part-add-btn { transition-duration: .01ms; }
}
@media (min-width: 769px) {
body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
position: fixed;
top: var(--fm-menu-top, 150px);
left: 50%;
right: auto;
width: min(1120px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
max-height: min(80vh, calc(100vh - var(--fm-menu-top, 150px) - 12px));
overflow-x: hidden;
overflow-y: auto;
transform: translateX(-50%);
overscroll-behavior: contain;
}
}
body:not(:has(.admin-shell)) .b2b-model-series {
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
max-width: 100%;
min-width: 0;
}
body:not(:has(.admin-shell)) .b2b-model-series-group,
body:not(:has(.admin-shell)) .b2b-model-links,
body:not(:has(.admin-shell)) .b2b-series-body {
min-width: 0;
max-width: 100%;
}
@media (max-width: 980px) {
body:not(:has(.admin-shell)) .b2b-model-series { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
body:not(:has(.admin-shell)) .b2b-model-series { grid-template-columns: minmax(0, 1fr); }
body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
left: 0;
right: 0;
width: 100%;
max-width: 100%;
max-height: 80vh;
transform: none;
overflow-x: hidden;
overflow-y: auto;
}
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li {
display: block;
position: relative;
list-style: none;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li > a {
display: grid;
place-items: center;
border: 1px solid #d8e2ef;
border-radius: 50%;
background: #fff;
color: #263c58;
text-decoration: none;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li > a:hover,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li > a:focus-visible {
border-color: #90bdf0;
background: #f1f7ff;
color: #0869d8;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .mini-item-counter {
top: 0;
right: 0;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > .menu-item-wishlist { order: 1; }
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > .menu-item-cart { order: 2; }
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > .menu-item-account { order: 3; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all 0.2s; text-align: center; font-variant-numeric: tabular-nums; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-outline { background: var(--bg-surface); border-color: var(--border); color: var(--text-main); }
.btn-outline:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-body); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-link { background: transparent; color: var(--primary); padding: 0; border: none; font-weight: 500; }
.btn-link:hover:not(:disabled) { color: var(--primary-hover); text-decoration: underline; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; display: flex; }
.btn-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0.25rem; }
.form-group { margin-bottom: 1.25rem; }
.form-label, .form-group label { display: block; margin-bottom: 0.375rem; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); }
.form-control { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); transition: all 0.2s; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); outline: none; }
.form-control:disabled { background: var(--bg-body); color: var(--text-muted); }
select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1rem; padding-right: 2.5rem; }
.check-label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; }
.check-label input { margin-top: 0.2rem; }
.alert { padding: 1rem; border-radius: var(--radius); background: var(--bg-surface); border: 1px solid var(--border); font-size: 0.875rem; color: var(--text-main); display: flex; flex-direction: column; gap: 0.25rem; }
.alert h3, .alert h4 { margin: 0 0 0.25rem 0; font-size: 1rem; }
.alert.error, .alert.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-hover); }
.alert.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.alert.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 9999px; background: var(--border-light); color: var(--text-muted); }
.badge.success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge.warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modal-content { background: var(--bg-surface); border-radius: var(--radius-lg); width: 100%; max-width: 500px; box-shadow: var(--shadow-float); overflow: hidden; animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border-light); }
.modal-header h2 { font-size: 1.25rem; margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); padding: 0.25rem; line-height: 1; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--bg-body); color: var(--text-main); }
.modal-body { padding: 1.5rem; }
.modal-success-content { text-align: center; }
.modal-success-content .success-icon { margin-bottom: 1rem; }
.home-hero { background: var(--text-main); color: white; padding: 4rem 1.5rem; margin-bottom: 3rem; text-align: center; }
.home-hero-inner { max-width: 800px; margin: 0 auto; }
.hero-title { font-size: 3rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.hero-subtitle { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 2.5rem; }
.finder-box { background: var(--bg-surface); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.hero-search-wrapper { border-color: var(--border); padding: 0.5rem; border-radius: var(--radius); }
.hero-search-input { font-size: 1rem; padding: 0.5rem; }
.hero-btn { font-size: 1rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); }
.finder-divider { margin: 2rem 0; text-align: center; position: relative; }
.finder-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--border-light); }
.finder-divider span { background: var(--bg-surface); padding: 0 1rem; position: relative; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.1em; }
.hero-dropdowns { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 1rem; align-items: flex-end; text-align: left; }
.hero-field label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.hero-submit .btn { height: 42px; font-size: 0.875rem; padding: 0 1.5rem; }
@media (max-width: 768px) {
.hero-dropdowns { grid-template-columns: 1fr; }
.finder-box { padding: 1.5rem; }
.hero-title { font-size: 2rem; }
}
.section-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); }
.section-title h2 { font-size: 1.5rem; margin: 0; }
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }
.catalog-sidebar { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-block { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.sidebar-title { font-size: 1rem; margin-bottom: 1rem; }
.sidebar-subtitle { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 1rem; }
.cat-nav-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-radius: var(--radius-sm); color: var(--text-main); font-size: 0.875rem; transition: background 0.15s; border: 1px solid transparent; }
.cat-nav-item:hover { background: var(--bg-body); text-decoration: none; }
.cat-nav-item.active { background: var(--bg-body); border-color: var(--border); font-weight: 600; color: var(--primary-active); }
.nav-count { font-size: 0.75rem; color: var(--text-muted); background: var(--border-light); padding: 0.125rem 0.375rem; border-radius: 9999px; font-variant-numeric: tabular-nums; }
.cat-nav-item.active .nav-count { background: var(--border); color: var(--text-main); }
.catalog-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.page-title { font-size: 1.75rem; margin-bottom: 0.25rem; line-height: 1.1; }
.results-count { font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.catalog-controls { display: flex; align-items: center; gap: 1rem; }
.sort-select { width: 180px; }
.view-toggle button { background: transparent; border: none; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); transition: all 0.2s; }
.view-toggle button:hover { color: var(--text-main); }
.active-filters-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-right: 0.5rem; }
.filter-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-surface); border: 1px solid var(--border); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; color: var(--text-main); transition: all 0.2s; }
.filter-chip:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); text-decoration: none; }
.filter-chip .remove { font-size: 1rem; line-height: 1; margin-left: 0.25rem; }
.product-container { display: grid; gap: 0.75rem; }
.part-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
display: flex;
overflow: hidden;
transition: all 0.2s;
}
.part-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.part-img-link {
width: 140px; height: 140px; min-height: 0;
background: var(--bg-surface);
border-right: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: center;
padding: 0.5rem; flex-shrink: 0;
}
.part-img-link img { width: 100%; height: 100%; object-fit: contain; }
.part-main { padding: 1rem; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.part-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.part-sku { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.part-quality { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; background: var(--bg-body); padding: 0.125rem 0.375rem; border-radius: 2px; color: var(--text-main); border: 1px solid var(--border); }
.part-name { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; }
.part-name a { color: var(--text-main); }
.part-name a:hover { color: var(--primary); }
.part-stock { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; margin-top: auto; }
.stock-ok { color: var(--success); } .stock-ok .status-dot { background: var(--success); } .stock-low .status-dot { background: var(--warning); }
.stock-out { color: var(--danger); } .stock-out .status-dot { background: var(--danger); }
.part-buy-area { width: 180px; padding: 1rem; border-left: 1px solid var(--border-light); display: flex; flex-direction: column; justify-content: center; background: var(--bg-body); flex-shrink: 0; }
.part-price { font-size: 1.25rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; margin-bottom: 0.75rem; }
.part-action { display: flex; gap: 0.25rem; }
.part-add-btn { flex: 1; padding: 0.5rem; display: flex; align-items: center; justify-content: center; }
.view-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.view-grid .part-card { flex-direction: column; min-width:0; }
.view-grid .part-img-link { width: 100%; height: 160px; border-right: none; border-bottom: 1px solid var(--border-light); }
.view-grid .part-buy-area { width: 100%; border-left: none; border-top: 1px solid var(--border-light); padding: 1rem; flex-direction: row; justify-content: space-between; align-items: center; }
.view-grid .part-price { margin-bottom: 0; font-size: 1.125rem; }
.pagination-container { display: flex; justify-content: center; margin-top: 2rem; margin-bottom: 2rem; }
.pagination { display: flex; align-items: center; gap: 0.25rem; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; color: var(--text-main); background: var(--bg-surface); border: 1px solid var(--border); transition: all 0.2s; font-variant-numeric: tabular-nums; }
.page-link:hover { background: var(--bg-body); text-decoration: none; }
.page-link.active { background: var(--primary); color: white; border-color: var(--primary); }
.page-ellipsis { padding: 0 0.5rem; color: var(--text-muted); }
.breadcrumb { font-size: 0.875rem; margin-bottom: 1.5rem; }
.product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.product-gallery { display: flex; flex-direction: column; gap: 1rem; }
.main-image-container { aspect-ratio: 1; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius); position: relative; cursor: zoom-in; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.main-image-container img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.2s; }
.main-image-container:hover img { transform: scale(1.02); }
.zoom-hint { position: absolute; bottom: 1rem; right: 1rem; background: var(--bg-surface); border: 1px solid var(--border); padding: 0.5rem; border-radius: var(--radius-sm); color: var(--text-muted); display: flex; pointer-events: none; box-shadow: var(--shadow-sm); }
.gallery-thumbnails { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
.gallery-thumb { width: 4.5rem; height: 4.5rem; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); padding: 0.25rem; cursor: pointer; transition: all 0.2s; }
.gallery-thumb:hover, .gallery-thumb:focus { border-color: var(--primary); outline: none; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-info { display: flex; flex-direction: column; }
.sku-large { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.product-title-lg { font-size: 2rem; margin-bottom: 0.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.product-stock-status { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.product-price-lg { font-size: 2.25rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.purchase-box { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.purchase-controls { display: flex; gap: 0.5rem; }
.qty-input { width: 80px; text-align: center; font-size: 1.125rem; font-weight: 700; }
.qty-hint { font-size: 0.75rem; font-weight: 600; }
.section-heading { font-size: 1rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.model-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.model-tag { background: var(--bg-surface); border: 1px solid var(--border); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; color: var(--text-main); }
.product-detail-loading { min-height: 620px; }
.product-detail-loading .breadcrumb { min-height: 1.2rem; }
.product-detail-loading .product-detail-layout { pointer-events: none; }
.product-detail-loading-copy { gap: 1rem; padding-top: 0.25rem; }
.product-detail-skeleton {
display: block;
border-radius: 0.45rem;
background: linear-gradient(100deg, #edf1f6 28%, #f8fafc 48%, #edf1f6 68%);
background-size: 220% 100%;
animation: product-detail-shimmer 1.25s ease-in-out infinite;
}
.product-detail-skeleton-link { width: 9rem; height: 0.9rem; }
.product-detail-skeleton-media { width: 100%; min-height: 26rem; }
.product-detail-skeleton-meta { width: 8rem; height: 1.35rem; }
.product-detail-skeleton-title { width: min(100%, 30rem); height: 2.8rem; }
.product-detail-skeleton-stock { width: 7rem; height: 1.1rem; }
.product-detail-skeleton-price { width: 9rem; height: 2.4rem; }
.product-detail-skeleton-purchase { width: min(100%, 25rem); min-height: 5.5rem; }
.product-detail-skeleton-description { width: 100%; height: 1rem; }
.product-detail-skeleton-description.short { width: 72%; }
@keyframes product-detail-shimmer {
from { background-position: 140% 0; }
to { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
.product-detail-skeleton { animation: none; }
}
.gallery-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17, 24, 39, 0.95); z-index: 2000; display: flex; flex-direction: column; }
.gallery-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; color: white; }
.gallery-counter { font-variant-numeric: tabular-nums; font-weight: 500; }
.gallery-close { background: none; border: none; color: white; font-size: 2rem; cursor: pointer; line-height: 1; padding: 0.5rem; opacity: 0.8; }
.gallery-close:hover { opacity: 1; }
.gallery-content { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 2rem; min-height: 0; position: relative; }
.gallery-img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; user-select: none; }
.gallery-nav { background: rgba(255,255,255,0.1); border: none; color: white; width: 3rem; height: 3rem; border-radius: var(--radius); font-size: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; position: absolute; top: 50%; transform: translateY(-50%); }
.gallery-nav:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
.gallery-nav:disabled { opacity: 0.2; cursor: not-allowed; }
.gallery-nav.prev { left: 2rem; } .gallery-nav.next { right: 2rem; }
.page-header { margin-bottom: 1.5rem; }
.commerce-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
.cart-header { display: flex; padding: 0.75rem 1.5rem; background: var(--bg-body); border-bottom: 1px solid var(--border-light); font-weight: 700; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cart-item { display: flex; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-light); }
.cart-item:last-child { border-bottom: none; }
.cart-item-img { width: 64px; height: 64px; flex-shrink: 0; border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.25rem; margin-right: 1.5rem; background: var(--bg-surface); }
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-details { flex: 1; min-width: 0; padding-right: 1rem; }
.cart-item-title { font-weight: 600; display: block; margin-bottom: 0.25rem; color: var(--text-main); font-size: 0.875rem; }
.cart-item-meta { font-size: 0.75rem; color: var(--text-muted); font-family: ui-monospace, monospace; }
.cart-item-price { width: 100px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-item-qty { width: 100px; padding-right: 1rem; }
.cart-item-total { width: 100px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-card { padding: 1.5rem; }
.sticky-card { position: sticky; top: 6rem; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.checkout-step { padding: 1.5rem; }
.step-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem; }
.step-number { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); background: var(--text-main); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; }
.step-header h3 { margin: 0; font-size: 1.125rem; }
.address-grid, .payment-grid { display: grid; gap: 1rem; }
.address-card, .payment-card { display: block; position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; cursor: pointer; transition: all 0.2s; background: var(--bg-surface); }
.address-card:hover, .payment-card:hover { border-color: var(--border-focus); }
.address-card.selected, .payment-card.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--bg-body); }
.address-card input[type="radio"], .payment-card input[type="radio"] { position: absolute; opacity: 0; }
.address-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.check-icon { color: var(--primary); opacity: 0; transform: scale(0.8); transition: all 0.2s; }
.address-card.selected .check-icon, .payment-card.selected .check-icon { opacity: 1; transform: scale(1); }
.auth-wrapper { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 200px); padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 400px; padding: 2rem; box-shadow: var(--shadow); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }
.auth-link { color: var(--primary); font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-light); font-variant-numeric: tabular-nums; }
.data-table th { background: var(--bg-body); font-weight: 700; color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border-bottom: 2px solid var(--border-light); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-body); }
.app-footer { background: var(--text-main); color: white; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; padding: 4rem 0; }
.footer-logo { height: 32px; margin-bottom: 1.5rem; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-brand p { color: var(--text-muted); font-size: 0.875rem; max-width: 300px; color: rgba(255,255,255,0.6); }
.footer-links h4 { margin-bottom: 1.5rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); }
.footer-links a { display: block; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; font-size: 0.875rem; }
.footer-links a:hover { color: white; }
.footer-bottom { background: rgba(0,0,0,0.2); padding: 1.5rem 0; text-align: center; color: rgba(255,255,255,0.4); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.mobile-only { display: none; }
.hidden-mobile { display: flex; }
.catalog-sidebar-overlay { display: contents; }
@media (max-width: 1100px) {
.commerce-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.catalog-layout { grid-template-columns: 1fr; gap: 1rem; }
.catalog-sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; }
.catalog-sidebar-overlay.open { display: block; }
.catalog-sidebar { position: absolute; top: 0; bottom: 0; right: 0; width: 300px; max-width: 85vw; background: var(--bg-surface); padding: 0; display: flex; flex-direction: column; gap: 0; }
.sidebar-scroll-area { flex: 1; overflow-y: auto; padding: 1rem; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-light); background: var(--bg-body); }
.sidebar-header h3 { margin: 0; font-size: 1.125rem; }
.sidebar-block { border: none; padding: 0 0 1.5rem 0; }
.catalog-header { flex-direction: column; align-items: stretch; gap: 1rem; }
.mobile-only { display: inline-flex; }
.commerce-layout { grid-template-columns: 1fr; }
.cart-header { display: none; }
.cart-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "image details" "image quantity" "total total"; align-items: start; gap: 0.75rem; padding: 1rem; }
.cart-item-img { grid-area: image; width: 80px; height: 80px; margin: 0; }
.cart-item-details { grid-area: details; min-width: 0; padding: 0; }
.cart-item-title, .cart-item-meta { overflow-wrap: anywhere; }
.cart-item-price { display: none; }
.cart-item-qty { grid-area: quantity; width: 100%; padding: 0; margin: 0; display: flex; align-items: center; gap: 1rem; }
.cart-item-qty .form-control { width: 80px; max-width: 100%; }
.cart-item-total { grid-area: total; width: auto; min-width: 0; margin: 0; align-self: center; font-size: 1.125rem; overflow-wrap: anywhere; text-align: right; border-top: 1px solid var(--border-light); padding-top: 0.75rem; }
.cart-actions { flex-wrap: wrap; }
.product-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
.footer-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
.search-bar { order: 3; max-width: 100%; margin-top: 1rem; width: 100%; }
.header-inner { flex-wrap: wrap; height: auto; padding: 1rem 0; gap: 0.5rem; }
.logo { flex: 1; }
}
.home-hero-section {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border);
padding: 4rem 1.5rem;
text-align: center;
}
.home-hero-container {
max-width: 800px;
margin: 0 auto;
}
.home-hero-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.home-hero-subtitle {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
}
.home-search-panel {
background: var(--bg-body);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
text-align: left;
position: relative;
}
.home-search-input-wrapper {
display: flex;
align-items: center;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.5rem;
}
.home-search-input-wrapper:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-light);
}
.home-search-input {
flex: 1;
border: none;
background: transparent;
padding: 0.5rem 1rem;
font-size: 1rem;
outline: none;
min-width: 0;
}
.home-search-input-wrapper svg {
color: var(--text-muted);
margin-left: 0.5rem;
}
.home-finder-divider {
margin: 1.5rem 0;
text-align: center;
position: relative;
}
.home-finder-divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px solid var(--border-light);
}
.home-finder-divider span {
background: var(--bg-body);
padding: 0 1rem;
position: relative;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.home-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.home-cat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.2s;
color: var(--text-main);
}
.home-cat-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
text-decoration: none;
transform: translateY(-2px);
}
.home-cat-icon {
height: 48px;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.home-cat-icon svg { width: 100%; height: 100%; }
.home-cat-icon img { max-height: 100%; object-fit: contain; }
.home-cat-name {
font-size: 0.875rem;
font-weight: 600;
}
.device-fields {
display: flex;
gap: 1rem;
align-items: flex-end;
}
.device-fields .field {
flex: 1;
min-width: 0;
}
.device-fields .field label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 0.375rem;
text-transform: uppercase;
}
.home-submit-field { flex: 0 0 auto !important; }
.model-picker { position: relative; width: 100%; }
.model-picker summary {
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; list-style: none;
border: 1px solid var(--border);
background: var(--bg-surface);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
min-height: 38px;
}
.model-picker summary::-webkit-details-marker { display: none; }
.model-picker-popover {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: #fff; border: 1px solid var(--border);
box-shadow: var(--shadow-lg); z-index: 100;
max-height: 300px; display: flex; flex-direction: column;
border-radius: var(--radius);
}
.model-search { padding: 0.5rem; border-bottom: 1px solid var(--border-light); }
.model-search input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; outline: none; }
.model-options { overflow-y: auto; flex: 1; }
.model-option { padding: 0.5rem 1rem; cursor: pointer; transition: background 0.1s; }
.model-option:hover { background: var(--bg-body); }
.model-empty { padding: 1rem; text-align: center; color: var(--text-muted); }
.category-group { margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }
.category-group summary { font-weight: 600; padding: 0.75rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.category-group summary::-webkit-details-marker { display: none; }
.category-group summary::after { content: '+'; font-size: 1.25rem; color: var(--text-muted); }
.category-group[open] summary::after { content: '›'; }
.category-group .nav-item { padding: 0.5rem 0.5rem 0.5rem 1rem; display: block; color: var(--text-main); transition: color 0.1s; }
.category-group .nav-item:hover, .category-group .nav-item.active { color: var(--primary); font-weight: 600; text-decoration: none; }
.catalog-breadcrumb { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.catalog-description { font-size: 1rem; color: var(--text-main); margin-bottom: 1rem; }
.catalog-price-notice { font-size: 0.875rem; background: var(--bg-body); padding: 0.5rem 1rem; border-radius: var(--radius); display: inline-block; color: var(--text-muted); margin-bottom: 1rem; }
.login-for-price { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--text-muted); transition: color 0.2s; }
.login-for-price:hover { color: var(--text-main); border-bottom-color: var(--text-main); }
.part-card .login-for-price { font-size: 0.875rem; }
.filter-dialog { position: fixed; inset: 0; background: var(--bg-surface); z-index: 1000; display: none; flex-direction: column; }
.filter-dialog[open] { display: flex; }
.filter-dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-light); font-weight: 700; }
.filter-dialog-actions { padding: 1rem; border-top: 1px solid var(--border-light); display: flex; gap: 1rem; }
.filter-dialog .discovery-filters { flex: 1; overflow-y: auto; padding: 1rem; }
@media (max-width: 768px) {
.device-fields { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}
.home-device-row { display:flex; gap:16px; align-items:flex-end; }
.home-device-row > .device-fields { flex:1; min-width:0; }
.home-device-row .home-submit-field { flex:0 0 auto; }
.home-cat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-cat-card { flex-direction:row; gap:18px; text-align:left; padding:20px; min-height:100px; }
.home-cat-icon { flex:0 0 52px; width:52px; height:52px; margin:0; color:var(--primary); }
.home-cat-icon img { max-width:52px; }
.home-cat-name { font-size:15px; line-height:1.4; }
.catalog-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:12px; padding-top:20px; }
.catalog-heading h1 { font-size:30px; line-height:1.2; margin:6px 0 10px; }
.catalog-eyebrow { color:var(--primary); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.catalog-sidebar { align-self:start; max-height:calc(100dvh - 145px); overflow-y:auto; scrollbar-width:thin; }
.catalog-sidebar .device-fields,.filter-dialog .device-fields { flex-direction:column; align-items:stretch; gap:16px; }
.discovery-filters .field { margin-bottom:0; }
.discovery-filters > button { margin-top:18px; }
.advanced-filters { margin-top:18px; border-top:1px solid var(--border-light); padding-top:10px; }
.advanced-filters > summary { padding:7px 0; cursor:pointer; font-weight:600; font-size:13px; }
.advanced-filters > summary small { margin-left:6px; color:var(--text-muted); font-weight:400; }
.advanced-filters .field { margin:12px 0; }
.check-label { display:flex; gap:8px; align-items:center; margin-top:14px; font-size:13px; }
.check-label input { width:16px; height:16px; accent-color:var(--primary); }
.model-caption { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-search { flex:none; min-height:42px; }
.model-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:0; border-radius:0; text-align:left; background:white; font:inherit; font-size:13px; color:var(--text-main); min-height:42px; }
.model-option small { color:var(--text-muted); font-size:11px; }
.model-option.selected { background:#eff6ff; color:#1d4ed8; }
.model-option[hidden],.model-empty[hidden] { display:none; }
.category-group .nav-item { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; border-radius:6px; padding:9px 6px; }
.category-group .nav-item small { color:var(--text-muted); font-size:11px; font-weight:400; }
.category-group .nav-item.active { background:#eff6ff; padding-left:10px; }
.category-group summary { font-size:13px; }
.result-range { font-size:13px; color:var(--text-muted); margin-right:auto; }
.catalog-sort label { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.catalog-sort select { width:auto; min-width:170px; font-size:13px; }
.catalog-price-notice { display:flex; gap:14px; font-size:12px; align-items:center; background:#edf3fa; padding:12px 16px; }
.catalog-price-notice a { font-weight:600; }
.catalog-pagination { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; padding:32px 0; }
.filter-dialog { width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto; border:1px solid var(--border); border-radius:14px; padding:0; box-shadow:0 24px 80px #0f172a33; }
body:has(.filter-dialog[open]) { overflow:hidden; }
.filter-dialog-actions { position:sticky; bottom:-16px; background:white; padding:16px 0 0; margin-top:24px; }
.filter-dialog-actions .btn-primary { flex:1; }
.part-add-btn { min-width:40px; min-height:40px; }
a.btn.btn-primary { color:#fff; }
.img-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); font-size:11px; }
.img-placeholder::after { content:"Geen foto"; }
@media(max-width:900px) {
.desktop-only { display:none; }
.catalog-heading h1 { font-size:25px; }
.home-device-row { flex-direction:column; align-items:stretch; }
.home-device-row .home-submit-field { width:100%; }
.home-cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
.view-list .part-card { display:grid; grid-template-columns:76px minmax(0,1fr); }
.view-list .part-img-link { grid-column:1; grid-row:1; width:76px; height:90px; min-height:0; border:0; padding:12px 8px; align-self:start; }
.view-list .part-main { grid-column:2; grid-row:1; padding:12px; }
.view-list .part-meta { flex-wrap:wrap; gap:5px; }
.view-list .part-name { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.view-list .part-stock { margin-top:8px; }
.view-list .part-buy-area { grid-column:1/-1; grid-row:2; width:auto; padding:12px; border-left:0; border-top:1px solid var(--border-light); flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.view-list .part-price { font-size:18px; margin:0; }
.view-list .part-action { width:116px; }
.catalog-heading { margin:20px 0; gap:12px; }
.catalog-heading h1 { font-size:23px; }
.catalog-toolbar { gap:10px; }
.catalog-sort { order:2; width:100%; }
.catalog-sort select { flex:1; min-width:0; }
.catalog-price-notice { flex-wrap:wrap; gap:5px 12px; }
.home-cat-card { flex-direction:column; text-align:center; padding:16px 10px; gap:12px; min-height:134px; }
.home-cat-name { font-size:13px; }
.home-device-row .device-fields { width:100%; }
.catalog-pagination .btn { min-width:34px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) {
*,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
:root {
--brand-blue: #0056b3;
--brand-blue-dark: #004494;
--brand-blue-light: #e0f2fe;
--wb-bg: #f8fafc;
--wb-surface: #ffffff;
--wb-border: #cbd5e1;
--wb-border-light: #e2e8f0;
--wb-text: #0f172a;
--wb-text-muted: #475569;
--wb-text-light: #94a3b8;
--wb-success: #16a34a;
--wb-success-bg: #dcfce7;
--wb-warning: #ea580c;
--wb-warning-bg: #ffedd5;
--wb-danger: #dc2626;
--wb-danger-bg: #fee2e2;
--wb-info: #0284c7;
--wb-info-bg: #e0f2fe;
--wb-radius: 4px;
--wb-radius-lg: 8px;
--wb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--wb-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.layout-sidebar {
display: grid;
grid-template-columns: 260px 1fr;
gap: 2rem;
align-items: start;
}
.layout-sidebar aside .card {
padding: 1rem;
position: sticky;
top: 5rem;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.sidebar-nav a {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
border-radius: var(--wb-radius);
color: var(--wb-text);
transition: all 0.15s;
border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
background: var(--wb-bg);
border-left-color: var(--wb-border);
text-decoration: none;
}
.sidebar-nav a.active {
background: var(--brand-blue-light);
color: var(--brand-blue-dark);
border-left-color: var(--brand-blue);
font-weight: 600;
}
@media (max-width: 768px) {
body:not(:has(.admin-shell)) .layout-sidebar {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
width: 100%;
min-width: 0;
}
body:not(:has(.admin-shell)) .layout-sidebar > *,
body:not(:has(.admin-shell)) .layout-sidebar .card,
body:not(:has(.admin-shell)) .layout-sidebar form,
body:not(:has(.admin-shell)) .layout-sidebar .form-group,
body:not(:has(.admin-shell)) .layout-sidebar .grid-cols-2 {
min-width: 0;
max-width: 100%;
}
body:not(:has(.admin-shell)) .layout-sidebar aside .card {
position: static;
}
body:not(:has(.admin-shell)) .layout-sidebar .grid-cols-2 {
grid-template-columns: minmax(0, 1fr);
}
}
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--wb-border-light);
border-radius: var(--wb-radius);
background: var(--wb-surface);
margin-bottom: 1.5rem;
}
table.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
white-space: nowrap;
}
table.data-table th {
background: var(--wb-bg);
color: var(--wb-text-muted);
font-weight: 600;
padding: 0.75rem 1rem;
border-bottom: 2px solid var(--wb-border-light);
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 0.75rem;
}
table.data-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--wb-border-light);
color: var(--wb-text);
font-variant-numeric: tabular-nums;
}
table.data-table tbody tr:hover {
background-color: var(--wb-bg);
}
table.data-table tbody tr:last-child td {
border-bottom: none;
}
.wb-badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 9999px;
letter-spacing: 0.01em;
}
.wb-badge-neutral { background: var(--wb-bg); color: var(--wb-text-muted); border: 1px solid var(--wb-border-light); }
.wb-badge-info { background: var(--wb-info-bg); color: var(--wb-info); }
.wb-badge-success { background: var(--wb-success-bg); color: var(--wb-success); }
.wb-badge-warning { background: var(--wb-warning-bg); color: var(--wb-warning); }
.wb-badge-danger { background: var(--wb-danger-bg); color: var(--wb-danger); }
.form-section {
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--wb-border-light);
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.form-section-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--wb-text);
}
.wb-details {
background: var(--wb-bg);
border: 1px solid var(--wb-border-light);
border-radius: var(--wb-radius);
margin-top: 1rem;
margin-bottom: 1rem;
}
.wb-details summary {
padding: 0.75rem 1rem;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
user-select: none;
color: var(--brand-blue);
}
.wb-details summary:hover {
background: var(--brand-blue-light);
}
.wb-details-content {
padding: 1rem;
border-top: 1px solid var(--wb-border-light);
background: var(--wb-surface);
}
.page-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.page-header h1 {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
color: var(--wb-text);
}
#wb-toast-container {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 0.5rem;
pointer-events: none;
}
.wb-toast {
background: var(--wb-surface);
border: 1px solid var(--wb-border);
box-shadow: var(--wb-shadow);
padding: 0.75rem 1rem;
border-radius: var(--wb-radius);
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
pointer-events: auto;
animation: toast-in 0.2s ease-out forwards;
min-width: 250px;
}
.wb-toast-success { border-left: 4px solid var(--wb-success); }
.wb-toast-error { border-left: 4px solid var(--wb-danger); }
.wb-toast-info { border-left: 4px solid var(--wb-info); }
@keyframes toast-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.data-label {
font-size: 0.75rem;
color: var(--wb-text-muted);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 0.125rem;
}
.data-value {
font-size: 0.875rem;
color: var(--wb-text);
font-weight: 500;
margin-bottom: 0.75rem;
}
.admin-card-danger {
border-top: 3px solid var(--wb-danger);
}
.model-check-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
border-radius: var(--wb-radius);
cursor: pointer;
transition: background 0.15s;
}
.model-check-item:hover {
background: var(--wb-bg);
}
:root {
--primary: #087ce7;
--primary-hover: #0768c3;
--primary-active: #0554a0;
--primary-light: #eaf3fc;
--bg-body: #f5f6f8;
--bg-surface: #ffffff;
--bg-surface-hover: #f9fafb;
--bg-alt: #eef0f3;
--text-main: #111827;
--text-muted: #64748b;
--text-inverse: #ffffff;
--border: #e2e8f0;
--border-light: #f1f5f9;
--border-focus: #087ce7;
--danger: #ef4444;
--danger-hover: #dc2626;
--danger-bg: #fef2f2;
--danger-border: #fecaca;
--success: #10b981;
--success-bg: #ecfdf5;
--success-border: #a7f3d0;
--warning: #f59e0b;
--warning-bg: #fffbeb;
--warning-border: #fde68a;
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow: 0 2px 4px rgba(0,0,0,0.06);
--shadow-lg: 0 4px 8px -2px rgba(0,0,0,0.1);
--shadow-float: 0 10px 20px -5px rgba(0,0,0,0.15);
--transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-order-number {
max-width: 220px;
padding: 0;
overflow: hidden;
border: 0;
background: transparent;
color: var(--wb-primary);
font: inherit;
font-size: .875rem;
font-weight: 700;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.admin-order-number:hover { text-decoration: underline; }
.catalog-gap-panel {
margin: 0 0 2rem;
padding: 1rem;
border: 1px solid var(--warning-border);
border-radius: var(--radius-lg);
background: var(--warning-bg);
}
.catalog-gap-panel-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.catalog-gap-panel h3 { margin: 0 0 .25rem; font-size: 1rem; }
.catalog-gap-panel p { max-width: 700px; margin: 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
.catalog-gap-summary {
margin: 0 0 1rem;
color: var(--text-muted);
font-size: .875rem;
}
.catalog-gap-summary strong { color: var(--text-main); }
.catalog-gap-list {
display: grid;
gap: .5rem;
min-width: 290px;
margin: 0;
padding: 0;
list-style: none;
}
.catalog-gap-entry {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .5rem .625rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.catalog-gap-entry span:first-child { display: grid; gap: .125rem; }
.catalog-gap-entry small { color: var(--text-muted); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.catalog-gap-entry strong { font-size: .8125rem; }
.catalog-gap-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.catalog-gap-actions a { color: var(--primary-active); font-size: .75rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) {
.catalog-gap-panel-heading, .catalog-gap-entry { align-items: stretch; flex-direction: column; }
.catalog-gap-actions { justify-content: flex-start; }
}
.modal-content:has(.admin-quick-edit) {
width: min(720px, calc(100vw - 32px));
max-width: 720px;
}
.admin-quick-edit-main {
display: grid;
grid-template-columns: minmax(150px, .65fr) minmax(220px, 1fr);
gap: 14px;
}
.quick-edit-group-prices {
margin: 4px 0 18px;
padding: 16px;
border: 1px solid var(--wb-border);
border-radius: 10px;
background: var(--wb-bg);
}
.quick-edit-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.quick-edit-section-head h3 { margin: 0 0 4px; font-size: .95rem; }
.quick-edit-section-head p {
max-width: 430px;
margin: 0;
color: var(--wb-text-muted);
font-size: .78rem;
line-height: 1.45;
}
.quick-edit-group-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
.quick-edit-group-price > span {
display: block;
margin-bottom: 5px;
color: var(--wb-text);
font-size: .75rem;
font-weight: 700;
}
.quick-edit-money-input { position: relative; }
.quick-edit-money-input > span {
position: absolute;
top: 50%;
left: 11px;
z-index: 1;
color: var(--wb-text-muted);
font-size: .8rem;
transform: translateY(-50%);
}
.quick-edit-money-input .form-control { padding-left: 26px; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
.admin-quick-edit-main,
.quick-edit-group-grid { grid-template-columns: 1fr; }
.quick-edit-section-head { flex-direction: column; gap: 6px; }
}
.admin-order-actions {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.modal-content:has(.admin-order-quick) {
width: min(920px, calc(100vw - 32px));
max-width: 920px;
max-height: min(880px, calc(100dvh - 32px));
}
.admin-order-quick { color: var(--wb-text); }
.admin-order-quick-head,
.admin-order-manage-summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.admin-order-quick-head h3 {
margin: 3px 0 5px;
font-size: 1.05rem;
}
.admin-order-quick-head p { margin: 0; color: var(--wb-text-muted); }
.admin-order-quick-total {
font-size: 1.25rem;
font-weight: 800;
white-space: nowrap;
}
.admin-order-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 20px 0;
padding: 14px;
border: 1px solid var(--wb-border);
border-radius: 10px;
background: var(--wb-bg);
}
.admin-order-facts > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.admin-order-facts > div > span,
.admin-order-quick h4,
.customer-application dt {
color: var(--wb-text-muted);
font-size: .68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.admin-order-facts strong,
.admin-order-facts small {
overflow-wrap: anywhere;
}
.admin-order-quick h4 { margin: 20px 0 8px; }
.admin-order-quick-grid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 24px;
}
.admin-order-quick-grid p { line-height: 1.55; }
.admin-order-quick-grid dl { margin: 0; }
.admin-order-quick-grid dl > div {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 5px 0;
}
.admin-order-quick-grid dt,
.admin-order-quick-grid dd { margin: 0; }
.admin-order-history {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.admin-order-history li {
display: grid;
grid-template-columns: minmax(100px, .4fr) minmax(150px, .6fr);
gap: 4px 16px;
padding-left: 12px;
border-left: 2px solid var(--wb-border);
font-size: .8rem;
}
.admin-order-history li span { color: var(--wb-text-muted); }
.admin-order-history li p { grid-column: 1 / -1; margin: 0; }
.admin-order-modal-actions {
position: sticky;
bottom: -1px;
display: flex;
justify-content: flex-end;
gap: 8px;
margin: 24px -4px -4px;
padding: 12px 4px 4px;
background: var(--wb-surface);
border-top: 1px solid var(--wb-border);
}
.admin-order-manage-form {
display: grid;
gap: 16px;
}
.admin-order-manage-form .form-group { margin: 0; }
.admin-order-manage-form .form-group > span {
display: block;
margin-bottom: 6px;
font-size: .78rem;
font-weight: 700;
}
.admin-order-manage-summary {
padding: 12px 14px;
border-radius: 8px;
background: var(--wb-bg);
}
.modal-content:has(.rma-workspace) {
width: min(1040px, calc(100vw - 32px));
max-width: 1040px;
max-height: min(900px, calc(100dvh - 32px));
}
.rma-workspace { color: var(--wb-text, var(--text-main)); }
.rma-summary {
display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
padding:3px 0 18px; border-bottom:1px solid var(--wb-border, var(--border));
}
.rma-eyebrow { margin:0 0 5px; color:var(--wb-text-muted, var(--text-muted)); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.rma-summary h3 { margin:0 0 5px; font-size:1.3rem; }
.rma-summary p { margin:0; color:var(--wb-text-muted, var(--text-muted)); }
.rma-summary-status { display:grid; gap:6px; justify-items:end; text-align:right; font-size:.8rem; }
.rma-summary-status strong { font-size:1.05rem; font-variant-numeric:tabular-nums; }
.rma-summary-status small { color:var(--wb-text-muted, var(--text-muted)); }
.rma-section { padding:18px 0; border-bottom:1px solid var(--wb-border, var(--border)); }
.rma-section h4 { margin:0; font-size:.92rem; }
.rma-section-head { margin-bottom:12px; }
.rma-section-head p, .rma-finance p { margin:4px 0 0; color:var(--wb-text-muted, var(--text-muted)); font-size:.8125rem; line-height:1.45; }
.rma-lines td { vertical-align:middle; }
.rma-lines td small { display:block; margin-top:3px; color:var(--wb-text-muted, var(--text-muted)); font-size:.75rem; }
.rma-lines .form-control { min-width:76px; max-width:116px; }
.rma-select { display:flex; align-items:center; gap:8px; }
.rma-of { display:block; margin-top:4px; color:var(--wb-text-muted, var(--text-muted)); font-size:.72rem; }
.rma-create-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.rma-create-fields label, .rma-section > label { display:grid; gap:6px; font-size:.8rem; font-weight:700; }
.rma-create-fields label span { color:var(--wb-text-muted, var(--text-muted)); font-weight:400; }
.rma-finance { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; background:var(--wb-bg, var(--bg-body)); margin:18px -14px; padding:15px 14px; border:0; border-radius:9px; }
.rma-credit-note { display:grid; gap:.35rem; margin-top:.75rem; }
.rma-credit-preview strong { color:var(--wb-text, var(--text-main)); font-variant-numeric:tabular-nums; }
.rma-timeline { display:grid; gap:9px; padding:0; margin:12px 0 0; list-style:none; }
.rma-timeline li { display:grid; grid-template-columns:minmax(120px, .4fr) minmax(160px, .6fr); gap:4px 14px; padding-left:12px; border-left:2px solid var(--wb-border, var(--border)); font-size:.8rem; }
.rma-timeline li span, .rma-timeline li p { color:var(--wb-text-muted, var(--text-muted)); }
.rma-timeline li p { grid-column:1 / -1; margin:0; }
.rma-error { margin-top:14px; padding:10px 12px; border:1px solid var(--danger-border, #fecaca); border-radius:7px; background:var(--danger-bg, #fef2f2); color:var(--danger, #ef4444); font-size:.8125rem; }
.rma-status-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(112px, 1fr)); gap:9px; margin:0 0 18px; }
.rma-status-summary a { display:flex; justify-content:space-between; gap:8px; padding:11px 12px; border:1px solid var(--wb-border, var(--border)); border-radius:8px; background:var(--wb-surface, var(--bg-surface)); color:var(--wb-text-muted, var(--text-muted)); text-decoration:none; font-size:.75rem; }
.rma-status-summary a strong { color:var(--wb-text, var(--text-main)); font-size:1rem; }
.rma-status-summary a:hover, .rma-status-summary a.active { border-color:var(--wb-primary, var(--primary)); background:var(--wb-primary-light, var(--primary-light)); color:var(--wb-primary, var(--primary)); }
@media (max-width: 700px) {
.admin-order-facts,
.admin-order-quick-grid { grid-template-columns: 1fr; }
.admin-order-quick-head { flex-direction: column; gap: 8px; }
.admin-order-modal-actions .btn { flex: 1; }
.rma-summary, .rma-finance { flex-direction:column; }
.rma-summary-status { justify-items:start; text-align:left; }
.rma-create-fields { grid-template-columns:1fr; }
.rma-timeline li { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition: 0s;
}
}
body {
font-family: var(--font);
background-color: var(--bg-body);
color: var(--text-main);
letter-spacing: -0.01em;
}
.app-header .header-inner { min-height: 3.75rem; height: auto; gap: 1rem; }
.app-header .logo img { height: 28px; width: auto; }
.app-header #search-input { padding: 0.375rem 0; font-size: 0.8125rem; }
.ws-home-compact {
padding-bottom: 2rem;
}
.ws-hero-compact {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-light);
}
.ws-title-compact {
font-size: 1.25rem;
font-weight: 800;
margin: 0;
color: var(--text-main);
letter-spacing: -0.02em;
}
.ws-search-compact {
flex: 1 1 300px;
max-width: 500px;
display: flex;
align-items: center;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 4px;
position: relative;
box-shadow: var(--shadow-sm);
transition: border var(--transition), box-shadow var(--transition);
}
.ws-search-compact:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-light);
}
.ws-search-compact svg {
color: var(--text-muted);
margin: 0 6px;
flex-shrink: 0;
}
.ws-search-input-compact {
flex: 1;
min-width: 0;
border: none;
background: transparent;
padding: 4px;
font-size: 0.8125rem;
font-weight: 600;
outline: none;
}
.ws-search-btn-compact {
background: var(--primary);
color: #fff;
border: none;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 700;
border-radius: 4px;
cursor: pointer;
}
.ws-search-btn-compact:hover {
background: var(--primary-hover);
}
.ws-dashboard-compact {
display: grid;
gap: 12px;
align-items: start;
}
@media (min-width: 800px) {
.ws-dashboard-compact {
grid-template-columns: minmax(0, 1fr) 280px;
}
}
.ws-finder-panel-compact, .ws-cats-panel-compact {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px;
box-shadow: var(--shadow-sm);
}
.ws-cats-group h3 {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 6px 0;
border-bottom: 1px solid var(--border-light);
padding-bottom: 4px;
}
.ws-pill-grid {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.cat-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-body);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-main);
text-decoration: none;
border: 1px solid transparent;
}
.cat-pill:hover {
background: var(--primary-light);
color: var(--primary-active);
border-color: var(--primary);
}
.cat-pill-img, .cat-pill-icon {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.cat-pill:hover .cat-pill-icon {
color: var(--primary);
}
.ws-featured-compact { margin-top: 1rem; }
.ws-featured-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 8px;
}
.ws-featured-header h2 { font-size: 1rem; margin: 0; font-weight: 700; }
.ws-featured-header a { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.ws-featured-header a:hover { text-decoration: underline; }
.fast-finder {
display: flex;
flex-direction: column;
gap: 8px;
}
.finder-heading {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.finder-heading h2 {
font-size: 1rem;
margin: 0;
color: var(--text-main);
font-weight: 700;
}
.finder-eyebrow { display: none; }
.finder-caption {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 500;
}
.finder-brands {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 2px;
}
.finder-brands button {
background: var(--bg-body);
border: 1px solid transparent;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-main);
cursor: pointer;
}
.finder-brands button:hover { background: var(--border-light); }
.finder-brands button.active { background: var(--text-main); color: var(--text-inverse); }
.finder-search-label { display: none; }
.finder-model-search {
display: flex;
align-items: center;
gap: 6px;
background: var(--bg-body);
border: 1px solid var(--border);
border-radius: 4px;
padding: 4px 8px;
height: 32px;
}
.finder-model-search:focus-within {
border-color: var(--primary);
background: var(--bg-surface);
box-shadow: 0 0 0 2px var(--primary-light);
}
.finder-model-search svg { width: 14px; height: 14px; color: var(--text-muted); }
.finder-model-search input {
flex: 1; min-width: 0; border: none; background: transparent;
font-size: 0.8125rem; font-weight: 600; outline: none; color: var(--text-main);
}
.finder-model-search kbd {
font-size: 0.625rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);
background: var(--bg-surface); border: 1px solid var(--border); padding: 0 4px; border-radius: 3px;
}
.finder-list-tools {
display: flex; justify-content: space-between; align-items: center;
margin-top: 0; padding-bottom: 4px; border-bottom: 1px solid var(--border-light);
}
.finder-status { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); margin: 0; }
.finder-list-tools label { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); }
.finder-sort { border: 1px solid var(--border); background: var(--bg-body); padding: 0 4px; height: 20px; border-radius: 3px; font-weight: 600; font-size: 0.6875rem; color: var(--text-main); }
.finder-models {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 6px;
}
.finder-model {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
background: var(--bg-body);
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
color: var(--text-main);
gap: 6px;
}
.finder-model:hover {
background: var(--bg-surface);
border-color: var(--primary);
box-shadow: var(--shadow-sm);
}
.finder-model span:first-child { min-width: 0; }
.finder-model strong {
font-size: 0.75rem; font-weight: 700; display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finder-model small { display: none; }
.finder-model span:last-child {
flex-shrink: 0; color: var(--text-muted); font-size: 0.875rem;
}
.finder-model:hover span:last-child { color: var(--primary); }
.finder-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); }
.finder-recent[hidden] { display: none; }
.finder-recent a { background: var(--bg-body); padding: 2px 4px; border-radius: 3px; color: var(--text-main); text-decoration: none; }
.finder-recent a:hover { background: var(--border-light); }
.finder-recent button { background: transparent; border: none; color: var(--primary); font-weight: 600; cursor: pointer; padding: 0; margin-left: 4px; }
.finder-empty { padding: 1.5rem; text-align: center; background: var(--bg-body); border-radius: 6px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }
.finder-empty a { display: inline-block; margin-top: 4px; color: var(--primary); text-decoration: none; }
.finder-footer {
display: flex; justify-content: space-between; align-items: center;
padding-top: 6px; margin-top: 2px; font-size: 0.75rem; font-weight: 600;
}
.finder-footer button, .finder-footer a { color: var(--primary); background: transparent; border: none; cursor: pointer; text-decoration: none; }
.catalog-layout { display: block !important; margin-top: 0 !important; }
.catalog-breadcrumb {
margin: 8px 0;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
}
.catalog-breadcrumb a { color: var(--text-muted); text-decoration: none; margin: 0 4px; }
.catalog-breadcrumb a:first-child { margin-left: 0; }
.catalog-breadcrumb a:hover { color: var(--primary); }
.catalog-heading {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 8px 0;
padding: 0;
border: none;
}
.catalog-heading > div:first-child {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.catalog-eyebrow { display: none; }
.catalog-heading h1 {
font-size: 1.125rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
color: var(--text-main);
}
.catalog-description {
font-size: 0.75rem;
color: var(--text-muted);
margin: 0;
}
.model-command {
width: auto;
flex: 1 1 200px;
max-width: 280px;
background: transparent;
border: none;
padding: 0;
box-shadow: none;
display: flex;
align-items: center;
position: relative;
}
.model-command-label { display: none; }
.model-command-input {
flex: 1;
display: flex;
align-items: center;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
height: 28px;
transition: border var(--transition);
}
.model-command-input:focus-within { border-color: var(--primary); }
.model-command-input svg { width: 12px; height: 12px; color: var(--text-muted); margin-right: 6px; flex-shrink: 0; }
.model-command-input input {
flex: 1; min-width: 0; border: none; background: transparent;
font-size: 0.75rem; font-weight: 600; outline: none; color: var(--text-main);
}
.model-browse {
height: 28px; padding: 0 6px; font-size: 0.6875rem; border-radius: 3px;
border: 1px solid var(--border); background: var(--bg-body); cursor: pointer;
white-space: nowrap; margin-left: 6px; color: var(--text-main); font-weight: 600;
}
.model-command-popover {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px;
box-shadow: var(--shadow-float); z-index: 100; max-height: 250px; overflow-y: auto;
}
.model-command-status {
padding: 6px 8px; margin: 0; font-size: 0.6875rem; font-weight: 600;
color: var(--text-muted); background: var(--bg-body); border-bottom: 1px solid var(--border-light);
}
#inline-model-results a {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 8px; border-bottom: 1px solid var(--border-light);
color: var(--text-main); text-decoration: none; font-size: 0.75rem;
}
#inline-model-results a[aria-selected="true"], #inline-model-results a:hover {
background: var(--primary-light); color: var(--primary-active);
}
#inline-model-results a strong { display: block; font-weight: 700; }
#inline-model-results a small { color: var(--text-muted); }
.quick-categories { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.quick-category {
display: inline-flex; align-items: center; gap: 4px;
background: var(--bg-surface); border: 1px solid var(--border-light);
padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;
color: var(--text-main); text-decoration: none;
}
.quick-category:hover { background: var(--bg-body); border-color: var(--border); }
.quick-category.active, .quick-category[aria-current="page"] {
background: var(--text-main); color: var(--text-inverse); border-color: var(--text-main);
}
.quick-category small {
background: rgba(0,0,0,0.06); padding: 0 4px; border-radius: 8px; font-size: 0.625rem; font-variant-numeric: tabular-nums;
}
.quick-category.active small { background: rgba(255,255,255,0.2); color: #fff; }
.customer-payment-controls { min-width: 260px; }
.customer-payment-summary {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 9px;
}
.customer-payment-options-form { max-width: 620px; }
.customer-payment-options-intro {
margin: 0 0 18px;
color: var(--wb-text-muted);
line-height: 1.55;
}
.customer-payment-option-list {
display: grid;
gap: 10px;
}
.customer-payment-option {
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: 15px 16px;
border: 1px solid var(--wb-border);
border-radius: 10px;
background: var(--wb-surface);
cursor: pointer;
}
.customer-payment-option:hover { border-color: var(--wb-primary); }
.customer-payment-option-copy { flex: 1; min-width: 0; }
.customer-payment-option-copy strong { display: block; margin-bottom: 3px; }
.customer-payment-option-copy small {
display: block;
color: var(--wb-text-muted);
line-height: 1.45;
}
.customer-payment-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.customer-payment-switch {
position: relative;
width: 42px;
height: 24px;
flex: 0 0 42px;
border-radius: 999px;
background: var(--wb-border);
transition: background .18s ease;
}
.customer-payment-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
transition: transform .18s ease;
}
.customer-payment-option input:checked + .customer-payment-switch { background: var(--wb-primary); }
.customer-payment-option input:checked + .customer-payment-switch::after { transform: translateX(18px); }
.customer-payment-option input:focus-visible + .customer-payment-switch {
outline: 3px solid color-mix(in srgb, var(--wb-primary) 25%, transparent);
outline-offset: 2px;
}
.customer-payment-options-note {
margin-top: 14px;
padding: 11px 13px;
border-radius: 8px;
background: var(--wb-bg);
color: var(--wb-text-muted);
font-size: .8125rem;
line-height: 1.45;
}
.modal-content:has(.customer-workspace),
.modal-content:has(.customer-workspace-state),
.modal-content:has(.customer-address-form) {
width: min(1040px, calc(100vw - 32px));
max-width: 1040px;
max-height: min(900px, calc(100dvh - 32px));
background: var(--wb-surface, var(--bg-surface));
}
.customer-workspace { color: var(--wb-text, var(--text-main)); }
.customer-workspace-summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 4px 0 20px;
border-bottom: 1px solid var(--wb-border, var(--border));
}
.customer-workspace-eyebrow {
margin: 0 0 5px;
color: var(--wb-text-muted, var(--text-muted));
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.customer-workspace-summary h3 { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.2; }
.customer-workspace-summary p { margin: 0; color: var(--wb-text-muted, var(--text-muted)); }
.customer-workspace-status { display: grid; justify-items: end; gap: 8px; color: var(--wb-text-muted, var(--text-muted)); font-size: .8125rem; text-align: right; }
.customer-workspace-section { padding: 20px 0; border-bottom: 1px solid var(--wb-border, var(--border)); }
.customer-workspace-section:last-child { border-bottom: 0; padding-bottom: 0; }
.customer-workspace-section h4 { margin: 0; font-size: .9rem; }
.customer-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.customer-section-heading p { margin: 4px 0 0; color: var(--wb-text-muted, var(--text-muted)); font-size: .8125rem; }
.customer-workspace-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 12px 0 0;
}
.customer-workspace-facts > div { min-width: 0; padding: 11px 12px; border-radius: 8px; background: var(--wb-bg, var(--bg-body)); }
.customer-workspace-facts dt { margin-bottom: 4px; color: var(--wb-text-muted, var(--text-muted)); font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.customer-workspace-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .8125rem; }
.customer-address-card, .customer-shipping-card {
padding: 14px 15px;
border: 1px solid var(--wb-border, var(--border));
border-radius: 9px;
background: var(--wb-surface, var(--bg-surface));
color: var(--wb-text, var(--text-main));
font-size: .875rem;
line-height: 1.55;
}
.customer-shipping-list { display: grid; gap: 9px; }
.customer-shipping-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.customer-shipping-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-weight: 700; }
.customer-shipping-card p { margin: 7px 0 0; color: var(--wb-text-muted, var(--text-muted)); }
.customer-shipping-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.customer-recent-orders { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.customer-recent-orders > div { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--wb-bg, var(--bg-body)); font-size: .8rem; }
.customer-recent-orders span { color: var(--wb-text-muted, var(--text-muted)); }
.customer-workspace-state { padding: 32px 20px; color: var(--wb-text-muted, var(--text-muted)); text-align: center; }
.customer-workspace-error { color: var(--danger, #ef4444); }
.customer-address-form { max-width: 760px; }
.customer-form-help { margin: 0 0 16px; color: var(--wb-text-muted, var(--text-muted)); font-size: .8125rem; }
.customer-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.customer-address-grid label { display: grid; gap: 5px; color: var(--wb-text, var(--text-main)); font-size: .8125rem; font-weight: 650; }
.customer-address-grid label > span { color: var(--danger, #ef4444); }
.customer-address-grid small { color: var(--wb-text-muted, var(--text-muted)); font-weight: 400; }
.customer-address-wide { grid-column: 1 / -1; }
.customer-default-choice { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: .875rem; }
.page-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.staff-customer-create-form { max-width: 760px; }
.staff-customer-create-section {
min-width: 0;
margin: 0 0 18px;
padding: 0 0 18px;
border: 0;
border-bottom: 1px solid var(--wb-border, var(--border));
}
.staff-customer-create-section:last-of-type { margin-bottom: 12px; }
.staff-customer-create-section legend {
width: 100%;
margin-bottom: 12px;
color: var(--wb-text, var(--text-main));
font-size: .9375rem;
font-weight: 750;
}
.staff-customer-billing-choice {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
padding: 12px 13px;
border: 1px solid var(--wb-border, var(--border));
border-radius: 9px;
background: var(--wb-bg, var(--bg-body));
color: var(--wb-text, var(--text-main));
cursor: pointer;
}
.staff-customer-billing-choice input { margin-top: 3px; }
.staff-customer-billing-choice span { display: grid; gap: 3px; }
.staff-customer-billing-choice strong { font-size: .875rem; }
.staff-customer-billing-choice small { color: var(--wb-text-muted, var(--text-muted)); font-size: .775rem; font-weight: 400; line-height: 1.4; }
.staff-customer-billing-fields { padding-top: 2px; }
.staff-customer-terms {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 14px;
color: var(--wb-text, var(--text-main));
font-size: .8125rem;
line-height: 1.45;
}
.staff-customer-terms input { margin-top: 2px; }
.staff-customer-create-error {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 8px;
background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
color: var(--danger, #b91c1c);
font-size: .875rem;
}
@media (max-width: 620px) {
.modal-content:has(.customer-workspace), .modal-content:has(.customer-workspace-state), .modal-content:has(.customer-address-form) { width: calc(100vw - 16px); }
.customer-workspace-summary, .customer-section-heading, .customer-shipping-card { flex-direction: column; }
.customer-workspace-status, .customer-shipping-actions { justify-items: start; justify-content: flex-start; text-align: left; }
.customer-workspace-facts, .customer-address-grid { grid-template-columns: 1fr; }
.customer-address-wide { grid-column: auto; }
}
.part-type-picker {
display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px;
background: transparent; border: none; border-bottom: 1px solid var(--border-light);
padding: 0 0 8px 0; margin-bottom: 8px; border-radius: 0; box-shadow: none;
}
.part-type-intro { width: auto; flex-shrink: 0; }
.part-type-intro span { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.part-type-intro small { display: none; }
.part-type-options { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.part-type-option {
display: inline-flex; align-items: center; gap: 4px;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
padding: 2px 8px; min-width: 0; flex: 0 0 auto; color: var(--text-main); text-decoration: none;
}
.part-type-option:hover { background: var(--bg-alt); border-color: var(--primary); }
.part-type-option.active, .part-type-option[aria-current="page"] {
background: var(--primary-light); border-color: var(--primary); color: var(--primary-active);
}
.part-type-option.is-empty { opacity: 0.5; }
.part-type-option span { display: flex; align-items: center; gap: 4px; }
.part-type-option strong { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.part-type-option b {
font-size: 0.625rem; font-weight: 700; color: var(--text-muted);
background: var(--bg-alt); padding: 0 4px; border-radius: 8px; font-variant-numeric: tabular-nums;
}
.part-type-option.active b { background: var(--primary); color: #fff; }
.part-type-option small { display: none; }
.catalog-refine-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
padding: 0 0 8px 0; margin-bottom: 8px;
background: transparent; border: none; border-bottom: 1px solid var(--border-light);
border-radius: 0; box-shadow: none;
}
.catalog-tool-field { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); }
.catalog-tool-field select {
padding: 0 16px 0 6px; border: 1px solid var(--border); background-color: var(--bg-surface);
font-weight: 600; font-size: 0.75rem; height: 26px; border-radius: 3px; color: var(--text-main);
}
.stock-shortcut {
display: inline-flex; align-items: center; padding: 0 8px; height: 26px;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px;
font-size: 0.75rem; font-weight: 600; color: var(--text-main); cursor: pointer;
}
.stock-shortcut[aria-pressed="true"], .stock-shortcut.active {
background: var(--primary-light); color: var(--primary-active); border-color: var(--primary);
}
#open-catalog-filters { height: 26px; padding: 0 8px; font-size: 0.75rem; border-radius: 3px; }
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.result-range { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.catalog-sort { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); }
.catalog-sort select { height: 26px; padding: 0 16px 0 6px; font-size: 0.75rem; border: 1px solid var(--border); border-radius: 3px; }
.view-toggle { display: flex; background: var(--bg-surface); border-radius: 3px; padding: 2px; border: 1px solid var(--border); }
.view-toggle button { background: transparent; border: none; padding: 2px 6px; border-radius: 2px; font-size: 0.75rem; cursor: pointer; color: var(--text-muted); }
.view-toggle button.active { background: var(--bg-body); color: var(--primary); font-weight: 800; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.filter-chip {
display: inline-flex; align-items: center; gap: 4px; background: var(--bg-surface);
border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px;
font-size: 0.6875rem; font-weight: 600; color: var(--text-main); text-decoration: none;
}
.filter-chip span { font-size: 0.875rem; line-height: 1; color: var(--text-muted); }
.filter-chip:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.filter-chip:hover span { color: var(--danger); }
.clear-filters { font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); margin-left: 4px; text-decoration: underline; }
.catalog-price-notice {
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px;
padding: 6px 12px; margin-bottom: 12px; display: flex; justify-content: space-between;
align-items: center; font-size: 0.75rem; font-weight: 700;
}
.catalog-price-notice a { color: var(--primary); text-decoration: none; }
.view-list { display: flex; flex-direction: column; gap: 4px; }
.view-list .part-card {
display: flex; flex-direction: column; background: var(--bg-surface);
border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; gap: 8px;
}
@media (min-width: 640px) {
.view-list .part-card { flex-direction: row; align-items: center; }
}
.view-list .part-card:hover { border-color: var(--primary); }
.view-list .part-img-link {
width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--border-light);
border-radius: 4px; padding: 2px; background: var(--bg-body);
display: flex; align-items: center; justify-content: center;
}
.view-list .part-img-link img { max-width: 100%; max-height: 100%; object-fit: contain; }
.view-list .part-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.view-list .part-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.view-list .part-sku { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); }
.view-list .part-quality {
font-size: 0.625rem; font-weight: 800; text-transform: uppercase; background: var(--bg-body);
padding: 1px 4px; border-radius: 2px; color: var(--text-main); border: 1px solid var(--border);
}
.part-type-badge {
font-size: 0.625rem; font-weight: 600; background: var(--bg-alt); color: var(--text-muted);
padding: 1px 4px; border-radius: 2px; border: 1px solid var(--border-light); display: inline-block; vertical-align: middle; margin-left: 4px;
}
.view-list .part-name { font-size: 0.9375rem; font-weight: 700; margin: 0 0 4px 0; white-space: normal; overflow-wrap: anywhere; line-height:1.35; }
.view-list .part-name a { color: var(--text-main); text-decoration: none; }
.view-list .part-name a:hover { color: var(--primary); }
.view-list .part-stock { font-size: 0.6875rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.view-list .part-buy-area {
display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0;
}
@media (max-width: 639px) {
.view-list .part-buy-area { justify-content: space-between; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border-light); }
}
.view-list .part-price { font-size: 1rem; font-weight: 800; color: var(--text-main); margin: 0; font-variant-numeric: tabular-nums; }
.view-list .part-action { display: flex; align-items: stretch; }
.part-qty { width: 44px; height: 28px; text-align: center; border-radius: 3px 0 0 3px; font-weight: 700; font-size: 0.8125rem; border: 1px solid var(--border); padding: 0; }
.part-add-btn { height: 28px; padding: 0 8px; border-radius: 0 3px 3px 0; margin-left: -1px; border: 1px solid var(--primary); font-size: 0.75rem; display: flex; align-items: center; }
.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,220px), 1fr)); gap: 10px; }
.view-grid .part-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); padding: 0; }
.view-grid .part-img-link { width: 100%; height: 112px; padding: 8px; background: var(--bg-body); border:0; border-bottom: 1px solid var(--border-light); border-radius: 6px 6px 0 0; }
.view-grid .part-img-link img { max-width: 100%; max-height: 100%; object-fit: contain; }
.view-grid .part-main { padding:12px; flex:1 0 auto; min-height:0; display:flex; flex-direction:column; }
.view-grid .part-meta { margin-bottom:6px; flex-wrap:wrap; gap:4px; }
.view-grid .part-name { white-space:normal; display:block; -webkit-line-clamp:unset; height:auto; overflow:visible; overflow-wrap:anywhere; font-size:14px; line-height:1.4; margin-bottom:6px; }
.view-grid .part-stock { margin-top:auto; padding-top:6px; }
.view-grid .part-buy-area { padding:10px 12px; gap:8px; background:var(--bg-surface); border-top:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; border-radius:0 0 6px 6px; }
.view-grid .part-price { white-space:nowrap; font-size:16px; }
.view-grid .part-action { width:auto; flex:0 0 auto; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.stock-low { color: #956108; }
dialog.photo-preview-dialog {
margin: auto; padding: 0; border: none; border-radius: 8px; background: var(--bg-surface);
box-shadow: var(--shadow-float); width: 90vw; max-width: 600px; max-height: 85vh; overflow: hidden;
}
dialog.photo-preview-dialog::backdrop { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(2px); }
.photo-preview-shell { display: flex; flex-direction: column; height: 100%; max-height: 85vh; }
.photo-preview-header {
display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
border-bottom: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-main); flex-shrink: 0;
}
.photo-preview-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.photo-preview-title { margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; }
.photo-preview-counter { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.photo-preview-close { background: transparent; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-muted); border-radius: 3px; padding: 0 4px; line-height: 1; }
.photo-preview-close:hover { color: var(--text-main); background: var(--bg-body); }
.photo-preview-tools { display:flex; align-items:center; justify-content:center; gap:4px; flex-shrink:0; }
.photo-preview-tools button { min-width:32px; height:32px; padding:0 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg-surface); color:var(--text-main); cursor:pointer; font-weight:700; }
.photo-preview-tools button:disabled { opacity:0.4; cursor:not-allowed; }
.photo-preview-zoom-level { width:54px; text-align:center; font-size:0.75rem; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.photo-preview-content {
position: relative; padding: 1rem; background: var(--bg-body); display: flex; align-items: center; justify-content: center; flex: 1; min-height: 250px; overflow: hidden;
}
.photo-preview-figure { margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; scrollbar-gutter:stable; }
.photo-preview-figure.is-zoomed { display:block; cursor:grab; }
.photo-preview-figure.is-dragging { cursor:grabbing; user-select:none; }
.photo-preview-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-preview-nav {
position: absolute; top: 50%; transform: translateY(-50%); background: var(--bg-surface); border: 1px solid var(--border);
border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
font-size: 1.25rem; cursor: pointer; color: var(--text-main); box-shadow: var(--shadow-sm); z-index: 10;
}
.photo-preview-nav:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.photo-preview-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.photo-preview-nav.prev { left: 8px; } .photo-preview-nav.next { right: 8px; }
.image-upload-result { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--wb-border-light); font-size:0.8125rem; overflow-wrap:anywhere; }
.image-upload-result span { min-width:0; }
.image-upload-result strong { flex-shrink:0; }
.image-upload-result.success strong { color:var(--success); }
.image-upload-result.error strong { color:var(--danger); max-width:55%; text-align:right; }
button.part-img-link.part-photo-preview { cursor: zoom-in; }
button.part-img-link.part-photo-preview:hover { border-color: var(--primary); }
div.part-img-link.part-no-photo { opacity: 0.7; }
.finder-dialog { padding: 0; border: none; border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-float); width: 95vw; max-width: 700px; max-height: 90vh; margin: auto; overflow: hidden; }
.finder-dialog::backdrop { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(2px); }
.finder-dialog [data-finder-body] { padding: 1.5rem; max-height: 90vh; overflow-y: auto; }
.finder-dialog [data-close-finder] {
position: absolute; top: 8px; right: 8px; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
background: var(--bg-body); border: none; border-radius: 50%; font-size: 1.25rem; cursor: pointer; color: var(--text-muted); z-index: 20;
}
.finder-dialog [data-close-finder]:hover { background: var(--border); color: var(--text-main); }
.finder-dialog .fast-finder { gap: 12px; }
.filter-dialog { padding: 0; border: none; border-radius: 8px; width: 100%; max-width: 360px; margin: auto; box-shadow: var(--shadow-float); }
.filter-dialog::backdrop { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(2px); }
.filter-dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-light); }
.filter-dialog-heading h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.discovery-filters { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.filter-dialog-actions { display: flex; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.filter-dialog-actions button { flex: 1; height: 32px; font-size: 0.8125rem; }
.app-header .logo img { height:34px; width:auto; }
.catalog-heading h1 { font-size:22px; line-height:1.25; }
.model-command { max-width:350px; min-width:0; }
.model-command-input { min-width:0; height:36px; }
.model-command-input input { width:0; font-size:13px; }
.model-browse { min-height:32px; font-size:12px; }
.model-command-popover { max-height:330px; }
#inline-model-results a { min-height:42px; font-size:13px; }
.quick-category, .part-type-option { min-height:28px; font-size:12px; }
.catalog-refine-row select, .catalog-sort select, .stock-shortcut, #open-catalog-filters { min-height:32px; font-size:12px; }
.view-list { gap:0; border-radius:8px; border:1px solid var(--border); overflow:hidden; background:var(--bg-surface); }
.view-list .part-card { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 14px; border:0; border-bottom:1px solid var(--border-light); border-radius:0; }
.view-list .part-card:last-child { border-bottom:0; }
.view-list .part-img-link { width:56px; height:56px; }
.view-list .part-main { padding:0; }
.view-list .part-meta { flex-wrap:wrap; row-gap:4px; }
.view-list .part-buy-area { min-width:160px; width:auto; background:transparent; border:0; padding:0; gap:16px; }
.view-list .part-price { font-size:18px; }
.view-list .part-stock { font-size:12px; }
.part-type-badge { font-size:11px; }
.part-qty, .part-add-btn { height:36px; }
.part-add-btn { min-width:38px; }
.photo-preview-header { position:relative; inset:auto; }
.photo-preview-heading { min-width:0; }
.photo-preview-title { overflow-wrap:anywhere; }
.photo-preview-close { width:36px; height:36px; flex-shrink:0; color:var(--text-main); }
.photo-preview-content { height:auto; min-height:0; max-height:min(70dvh,480px); }
.photo-preview-image { width:auto; height:auto; max-height:min(62dvh,420px); }
.photo-preview-nav[hidden] { display:none; }
@media(max-width:767px) {
.app-header .header-inner { min-height:0; height:auto; padding:10px 16px; gap:8px; }
.app-header .logo { flex:0 0 auto; }
.app-header .logo img { width:130px; height:auto; }
.app-header .user-nav { flex:1; min-width:0; justify-content:flex-end; gap:12px; }
.app-header .user-nav .btn { font-size:12px; padding:8px; }
.app-header .nav-text { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.app-header .search-bar { flex:0 0 100%; order:3; width:100%; min-width:0; margin-top:2px; }
.catalog-heading { gap:10px; }
.catalog-heading h1 { font-size:20px; }
.model-command { width:100%; max-width:none; flex-basis:auto; }
.model-command-input { height:40px; }
.model-command-input input { font-size:14px; }
.model-browse { height:36px; }
.quick-categories { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; gap:6px; scrollbar-width:thin; }
.quick-category { flex:0 0 auto; min-height:36px; }
.part-type-picker { display:block; min-width:0; padding-bottom:8px; }
.part-type-intro { margin-bottom:5px; }
.part-type-options { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; gap:6px; scrollbar-width:thin; }
.part-type-option { min-height:36px; white-space:nowrap; }
.catalog-refine-row { gap:8px; }
.catalog-refine-row select, .catalog-sort select, .stock-shortcut, #open-catalog-filters { min-height:36px; font-size:12px; }
.catalog-toolbar { gap:8px; }
.active-filters { gap:4px; margin:8px 0; }
.view-list .part-card { grid-template-columns:48px minmax(0,1fr); align-items:start; gap:10px; padding:12px; }
.view-list .part-img-link { width:48px; height:48px; }
.view-list .part-main { padding:0; }
.view-list .part-buy-area { grid-column:1 / -1; width:100%; min-width:0; justify-content:space-between; margin-top:0; padding-top:8px; border-top:1px solid var(--border-light); }
.view-list .part-meta { gap:4px; }
.view-list .part-name { font-size:14px; }
.part-qty, .part-add-btn { height:40px; }
.part-add-btn { min-width:44px; }
.photo-preview-close { width:40px; height:40px; }
dialog.photo-preview-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; border-radius:0; }
.photo-preview-shell { max-height:100dvh; }
.photo-preview-header { flex-wrap:wrap; padding:6px 8px; }
.photo-preview-heading { order:1; flex:1 1 calc(100% - 48px); }
.photo-preview-close { order:2; }
.photo-preview-tools { order:3; width:100%; }
.photo-preview-tools button { min-width:40px; height:40px; }
.photo-preview-content { padding:8px; max-height:none; }
.photo-preview-nav.prev { left:4px; } .photo-preview-nav.next { right:4px; }
.filter-dialog-actions button { height:40px; }
}
:root {
--apple-bg: #f5f5f7;
--apple-surface: #ffffff;
--apple-text: #1d1d1f;
--apple-muted: #86868b;
--apple-blue: #0071e3;
--apple-blue-hover: #0077ed;
--apple-border: #d2d2d7;
--apple-border-light: #e5e5ea;
}
body:not(:has(.admin-shell)) {
--sf-pro: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-family: var(--sf-pro);
background-color: var(--apple-bg);
color: var(--apple-text);
letter-spacing: -0.015em;
-webkit-font-smoothing: antialiased;
--primary: var(--apple-blue);
--primary-hover: var(--apple-blue-hover);
--primary-active: #0058b0;
--border-light: var(--apple-border-light);
--border: var(--apple-border);
}
body:not(:has(.admin-shell)):has(.catalog-layout) {
background-color: #f2f7fc;
}
body:not(:has(.admin-shell)) h1,
body:not(:has(.admin-shell)) h2,
body:not(:has(.admin-shell)) h3,
body:not(:has(.admin-shell)) h4 {
font-family: var(--sf-pro);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--apple-text);
}
body:not(:has(.admin-shell)) a {
color: var(--primary);
text-decoration: none;
}
body:not(:has(.admin-shell)) a:hover {
text-decoration: underline;
}
body:not(:has(.admin-shell)) .app-header {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: none;
}
body:not(:has(.admin-shell)) .test-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--primary, #4887f4);
color: #fff;
text-align: center;
font-size: 0.75rem;
padding: 0.35rem max(12px, calc((100% - 1240px) / 2));
letter-spacing: 0.05em;
border-bottom: none;
font-weight: 600;
}
body:not(:has(.admin-shell)) .test-banner > span {
justify-self: center;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.site-header {
visibility: hidden;
height: 134px;
min-height: 134px;
overflow: hidden;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header {
visibility: visible;
height: auto;
min-height: 0;
overflow: visible;
}
@media (max-width: 820px) {
body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.site-header { height: 174px; min-height: 174px; }
}
body:not(:has(.admin-shell)) .app-header .header-inner {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
body:not(:has(.admin-shell)) .app-header .nav-link {
color: var(--apple-text);
font-weight: 500;
font-size: 0.875rem;
}
body:not(:has(.admin-shell)) .app-header .nav-link:hover {
color: var(--primary);
}
body:not(:has(.admin-shell)) .btn {
border-radius: 999px;
padding: 0.6rem 1.25rem;
font-weight: 500;
font-size: 0.9375rem;
border: none;
transition: all 0.2s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
body:not(:has(.admin-shell)) .btn-primary {
background-color: var(--primary);
color: white;
}
body:not(:has(.admin-shell)) .btn-primary:hover {
background-color: var(--primary-hover);
text-decoration: none;
}
body:not(:has(.admin-shell)) .btn-outline {
background-color: transparent;
color: var(--primary);
box-shadow: inset 0 0 0 1px var(--primary);
}
body:not(:has(.admin-shell)) .btn-outline:hover {
background-color: var(--primary);
color: white;
text-decoration: none;
}
body:not(:has(.admin-shell)) .form-control {
border-radius: 12px;
border: 1px solid var(--border);
padding: 0.75rem 1rem;
font-size: 1rem;
background: #fff;
transition: all 0.2s ease;
}
body:not(:has(.admin-shell)) .form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}
body:not(:has(.admin-shell)) .product-container.view-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
body:not(:has(.admin-shell)) .part-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
border: 1px solid var(--border-light);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
height: 100%;
}
body:not(:has(.admin-shell)) .part-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
body:not(:has(.admin-shell)) .part-img-link {
background: #ffffff;
padding: 0;
display: block;
aspect-ratio: 1 / 1;
width: 100% !important;
height: auto !important;
min-height: 120px;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
body:not(:has(.admin-shell)) .part-img-link img {
position: absolute;
top: 5%;
left: 5%;
width: 90% !important;
height: 90% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.05));
transition: transform 0.2s ease;
}
body:not(:has(.admin-shell)) .part-img-link:hover img {
transform: scale(1.05);
}
body:not(:has(.admin-shell)) .part-main {
padding: 0 1rem 1rem 1rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
body:not(:has(.admin-shell)) .part-meta {
margin-bottom: 0.5rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
body:not(:has(.admin-shell)) .part-quality {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #e56000;
background: transparent;
padding: 0;
}
body:not(:has(.admin-shell)) .part-type-badge {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--apple-muted);
}
body:not(:has(.admin-shell)) .part-name {
font-size: 0.9375rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
body:not(:has(.admin-shell)) .part-name a {
color: var(--apple-text);
}
body:not(:has(.admin-shell)) .part-name a:hover {
text-decoration: none;
color: var(--primary);
}
body:not(:has(.admin-shell)) .part-stock {
font-size: 0.875rem;
color: var(--apple-muted);
margin-bottom: auto;
display: flex;
align-items: center;
gap: 0.25rem;
}
body:not(:has(.admin-shell)) .part-stock .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
body:not(:has(.admin-shell)) .stock-ok .status-dot { background: #34c759; }
body:not(:has(.admin-shell)) .stock-low .status-dot { background: #ff9f0a; }
body:not(:has(.admin-shell)) .stock-out .status-dot { background: #ff3b30; }
body:not(:has(.admin-shell)) .part-buy-area {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
border-top: none;
margin-top: auto;
}
body:not(:has(.admin-shell)) .part-price {
font-size: 1.125rem;
font-weight: 600;
color: var(--apple-text);
}
body:not(:has(.admin-shell)) .part-action {
display: flex;
gap: 0.5rem;
align-items: center;
}
body:not(:has(.admin-shell)) .part-qty {
width: 60px;
padding: 0.4rem;
text-align: center;
font-size: 0.875rem;
}
body:not(:has(.admin-shell)) .part-add-btn {
flex-grow: 1;
padding: 0.4rem 1rem;
font-size: 0.875rem;
}
body:not(:has(.admin-shell)) .product-container.view-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-card {
flex-direction: row;
align-items: stretch;
height: auto;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-img-link {
width: 140px !important;
flex: 0 0 140px;
padding: 0.75rem;
border-right: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .product-container.view-list .part-main {
padding: 1rem;
justify-content: center;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-buy-area {
width: 180px !important;
border-left: 1px solid var(--border-light);
justify-content: center;
padding: 1rem;
}
.instant-home {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 1.5rem;
}
.instant-intro {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1rem;
}
.instant-intro h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
line-height: 1.2;
}
.intro-help {
text-align: right;
font-size: 0.875rem;
}
.instant-search {
margin: 1rem 0;
max-width: 680px;
}
.search-input-container {
position: relative;
display: flex;
align-items: center;
}
.search-input-container svg {
position: absolute;
left: 1rem;
color: var(--apple-muted);
pointer-events: none;
width: 20px;
height: 20px;
}
.instant-home .search-input-container input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem !important;
font-size: 1rem;
border-radius: 8px;
border: 1px solid var(--border);
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
transition: all 0.2s ease;
}
.search-input-container input:focus {
box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 4px rgba(0,113,227,0.2);
outline: none;
}
.instant-categories-strip {
margin: 1rem 0;
overflow-x: auto;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.instant-categories-strip::-webkit-scrollbar {
display: none;
}
.instant-category-options {
display: flex;
gap: 0.5rem;
}
.instant-category-options button {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
background: #fff;
border: 1px solid var(--border-light);
cursor: pointer;
font-family: var(--sf-pro);
font-size: 0.875rem;
font-weight: 500;
color: var(--apple-text);
padding: 0.5rem 1rem;
border-radius: 999px;
transition: all 0.2s;
min-width: 0;
}
.instant-category-options button:hover,
.instant-category-options button[aria-pressed="true"] {
background: var(--apple-bg);
border-color: var(--apple-text);
}
.instant-category-options button .cat-icon {
display: none;
}
.instant-models {
background: #fff;
border-radius: 12px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.02);
border: 1px solid var(--border-light);
}
.instant-model-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.instant-model-title h2 {
font-size: 1.25rem;
margin: 0;
}
.instant-family-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.instant-family-options button {
background: #f5f5f7;
border: 1px solid transparent;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
transition: all 0.2s;
color: var(--apple-text);
width: 100%;
}
.instant-family-options button small {
font-size: 0.75rem;
font-weight: 400;
color: var(--apple-muted);
}
.instant-family-options button:not([aria-pressed="true"]):hover {
background: #e8e8ed;
box-shadow: inset 0 0 0 1px #c7c7cc;
}
.instant-family-options button[aria-pressed="true"] {
background: #1d1d1f;
color: #fff;
}
.instant-family-options button[aria-pressed="true"] small {
color: #a1a1a6;
}
.instant-model-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.5rem;
}
.instant-model-options button {
background: #f5f5f7;
border: 1px solid transparent;
padding: 0.75rem 1rem;
border-radius: 8px;
text-align: left;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
color: var(--apple-text);
}
.instant-model-options button:hover,
.instant-model-options button[aria-pressed="true"] {
background: #fff;
border-color: var(--border);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.instant-selection {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
align-items: center;
}
.instant-selection:empty {
display: none;
}
.instant-results-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem 0 1rem 0;
gap: 1rem;
}
.instant-results-heading h2 {
font-size: 1.25rem;
margin: 0;
font-weight: 600;
}
.results-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.instant-all-results {
margin-top: 1.5rem;
text-align: center;
}
[data-home-refine] {
display: flex;
gap: 0.5rem;
}
[data-home-refine] select {
padding: 0.4rem 2rem 0.4rem 0.75rem;
font-size: 0.875rem;
border-radius: 6px;
border: 1px solid var(--border-light);
background: #fff;
}
body:not(:has(.admin-shell)) .product-detail-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5rem;
padding: 2rem 0;
}
body:not(:has(.admin-shell)) .product-detail-layout > * {
min-width: 0;
}
body:not(:has(.admin-shell)) .product-gallery {
position: sticky;
top: 100px;
}
body:not(:has(.admin-shell)) .main-image-container {
background: #fff;
border-radius: 32px;
padding: 4rem;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 30px rgba(0,0,0,0.03);
margin-bottom: 1.5rem;
border: none;
width: 100%;
cursor: zoom-in;
}
body:not(:has(.admin-shell)) .main-image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
body:not(:has(.admin-shell)) .gallery-thumbnails {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 1rem;
}
body:not(:has(.admin-shell)) .gallery-thumb {
width: 90px;
height: 90px;
background: #fff;
border: 2px solid transparent;
border-radius: 16px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
body:not(:has(.admin-shell)) .gallery-thumb:hover {
border-color: var(--primary);
}
body:not(:has(.admin-shell)) .product-info {
padding-top: 1rem;
}
body:not(:has(.admin-shell)) .product-title-lg {
font-family: inherit;
font-size: clamp(1.75rem, 2.4vw, 2.25rem);
line-height: 1.18;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 0.875rem;
overflow-wrap: anywhere;
}
body:not(:has(.admin-shell)) .product-price-lg {
font-size: 2.25rem;
font-weight: 600;
margin-bottom: 2rem;
}
body:not(:has(.admin-shell)) .purchase-box {
background: #fff;
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 4px 30px rgba(0,0,0,0.04);
margin-bottom: 3rem;
border: none;
}
body:not(:has(.admin-shell)) .purchase-controls {
display: flex;
gap: 1rem;
}
body:not(:has(.admin-shell)) .purchase-controls .btn {
padding: 1.25rem 2rem;
font-size: 1.125rem;
}
body:not(:has(.admin-shell)) .product-description {
font-size: 1.125rem;
line-height: 1.6;
color: var(--apple-text);
}
body:not(:has(.admin-shell)) .catalog-heading {
text-align: center;
padding: 2rem 0;
}
body:not(:has(.admin-shell)) .catalog-heading h1 {
font-size: 2rem;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
body:not(:has(.admin-shell)) .catalog-description {
font-size: 1rem;
color: var(--apple-muted);
}
body:not(:has(.admin-shell)) .catalog-layout {
display: flex;
gap: 2rem;
}
body:not(:has(.admin-shell)) .catalog-refine-row {
background: #fff;
padding: 1rem 1.5rem;
border-radius: 12px;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
border: 1px solid var(--border-light);
margin-bottom: 2rem;
}
body:not(:has(.admin-shell)) .catalog-tool-field {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 500;
}
body:not(:has(.admin-shell)) .catalog-tool-field select {
border: none;
background: #f5f5f7;
border-radius: 999px;
padding: 0.5rem 1.25rem;
font-weight: 500;
font-size: 0.9375rem;
}
body:not(:has(.admin-shell)) .commerce-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
}
body:not(:has(.admin-shell)) .cart-list {
background: transparent;
border: none;
box-shadow: none;
}
body:not(:has(.admin-shell)) .cart-item {
display: flex;
align-items: center;
padding: 2rem 0;
border-bottom: 1px solid var(--border-light);
gap: 2rem;
background: #fff;
border-radius: 24px;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
body:not(:has(.admin-shell)) .cart-item-img {
width: 140px;
height: 140px;
background: #f5f5f7;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
body:not(:has(.admin-shell)) .cart-item-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
body:not(:has(.admin-shell)) .cart-sidebar .summary-card,
body:not(:has(.admin-shell)) .checkout-sidebar .summary-card {
background: #fff;
border-radius: 32px;
padding: 3rem;
box-shadow: 0 4px 30px rgba(0,0,0,0.04);
position: sticky;
top: 100px;
}
body:not(:has(.admin-shell)) .summary-card h3 {
font-size: 1.75rem;
margin-bottom: 2rem;
}
body:not(:has(.admin-shell)) .summary-row {
font-size: 1.125rem;
}
body:not(:has(.admin-shell)) .checkout-step {
background: #fff;
border-radius: 32px;
padding: 3rem;
margin-bottom: 2rem;
box-shadow: 0 4px 30px rgba(0,0,0,0.03);
}
body:not(:has(.admin-shell)) .step-header {
margin-bottom: 2.5rem;
}
body:not(:has(.admin-shell)) .step-number {
width: 40px;
height: 40px;
font-size: 1.125rem;
}
body:not(:has(.admin-shell)) .step-header h3 {
font-size: 1.75rem;
}
body:not(:has(.admin-shell)) .address-card,
body:not(:has(.admin-shell)) .payment-card {
background: #f5f5f7;
border-radius: 20px;
padding: 2rem;
}
body:not(:has(.admin-shell)) .address-card.selected,
body:not(:has(.admin-shell)) .payment-card.selected {
box-shadow: 0 4px 20px rgba(0,113,227,0.15);
}
body:not(:has(.admin-shell)) .auth-wrapper {
min-height: 75vh;
}
body:not(:has(.admin-shell)) .auth-card {
background: #fff;
border-radius: 32px;
padding: 4rem;
max-width: 480px;
box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
body:not(:has(.admin-shell)) .auth-header h2 {
font-size: 2.25rem;
}
body:not(:has(.admin-shell)) .auth-card-login {
max-width: 420px;
padding: 34px 36px 30px;
border: 1px solid #e1e7ef;
border-radius: 22px;
box-shadow: 0 18px 48px rgba(24, 39, 60, .09);
}
body:not(:has(.admin-shell)) .auth-login-header {
margin-bottom: 26px;
}
body:not(:has(.admin-shell)) .auth-brand-logo {
display: block;
width: auto;
height: 48px;
max-width: min(100%, 230px);
margin: 0 auto 24px;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-header h2 {
margin: 0 0 7px;
font-size: 1.875rem;
line-height: 1.15;
letter-spacing: -.025em;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-header p {
margin: 0;
font-size: .9375rem;
line-height: 1.45;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-form {
display: grid;
gap: 18px;
}
body:not(:has(.admin-shell)) .auth-card-login .form-group {
margin: 0;
}
body:not(:has(.admin-shell)) .auth-card-login .form-label {
margin-bottom: 7px;
color: #46566c;
font-size: .75rem;
font-weight: 700;
letter-spacing: .055em;
}
body:not(:has(.admin-shell)) .auth-card-login .form-control {
min-height: 46px;
padding: 10px 13px;
border-color: #d5dde7;
border-radius: 10px;
background: #fff;
font-size: .9375rem;
}
body:not(:has(.admin-shell)) .auth-card-login .form-control:focus {
border-color: #6aa5e8;
box-shadow: 0 0 0 3px rgba(40, 120, 237, .12);
}
body:not(:has(.admin-shell)) .auth-card-login .auth-link {
font-size: .75rem;
letter-spacing: 0;
text-transform: none;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-submit {
min-height: 46px;
margin-top: 4px;
border-radius: 10px;
font-size: .9375rem;
box-shadow: 0 5px 14px rgba(0, 113, 227, .18);
}
body:not(:has(.admin-shell)) .auth-login-footer {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #edf1f5;
line-height: 1.45;
}
@media (max-width: 520px) {
body:not(:has(.admin-shell)) .auth-wrapper {
align-items: flex-start;
padding: 20px 14px 32px;
}
body:not(:has(.admin-shell)) .auth-card-login {
padding: 28px 22px 24px;
border-radius: 18px;
}
body:not(:has(.admin-shell)) .auth-brand-logo {
height: 44px;
margin-bottom: 21px;
}
}
body:not(:has(.admin-shell)) .registration-wrapper {
align-items: flex-start;
padding-top: 42px;
padding-bottom: 64px;
}
body:not(:has(.admin-shell)) .registration-card {
max-width: 920px;
padding: 40px 48px 38px;
border: 1px solid #e1e7ef;
border-radius: 22px;
box-shadow: 0 18px 48px rgba(24, 39, 60, .08);
}
body:not(:has(.admin-shell)) .registration-header {
margin-bottom: 32px;
}
body:not(:has(.admin-shell)) .registration-header .auth-brand-logo {
height: 46px;
margin-bottom: 22px;
}
body:not(:has(.admin-shell)) .registration-header h2 {
margin: 0 0 7px;
font-size: 2rem;
letter-spacing: -.03em;
}
body:not(:has(.admin-shell)) .registration-header p {
margin: 0 0 8px;
font-size: .9375rem;
}
body:not(:has(.admin-shell)) .registration-header small {
color: #8290a3;
font-size: .75rem;
}
.registration-section {
padding: 24px 0;
border-top: 1px solid #e8edf3;
}
.registration-section-heading {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.registration-section-heading > span {
display: grid;
place-items: center;
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #eaf3ff;
color: #1768c5;
font-size: .75rem;
font-weight: 800;
}
.registration-section-heading h3 {
margin: 1px 0 3px;
color: #172033;
font-size: 1rem;
}
.registration-section-heading p {
margin: 0;
color: #718096;
font-size: .8125rem;
line-height: 1.45;
}
.registration-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
}
.registration-field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.registration-field > span {
color: #46566c;
font-size: .72rem;
font-weight: 700;
letter-spacing: .045em;
text-transform: uppercase;
}
.registration-field .form-control {
width: 100%;
height: 46px;
min-height: 46px;
margin: 0;
border-color: #d5dde7;
border-radius: 11px;
font-size: .875rem;
background: #fbfcfe;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.registration-field .form-control:focus {
border-color: #2180de;
background: #fff;
box-shadow: 0 0 0 4px rgba(33, 128, 222, .11);
}
.registration-field small {
color: #77869a;
font-size: .75rem;
line-height: 1.4;
}
.registration-span-2 {
grid-column: span 2;
}
.registration-street {
grid-column: span 1;
}
.registration-city {
grid-column: span 2;
}
.registration-tax-field {
grid-column: 1 / -1;
}
.registration-country-help {
padding: 10px 12px;
border-radius: 8px;
background: #f5f7fa;
}
.registration-country-help.swiss {
background: #eef6ff;
color: #245786;
}
.registration-consents {
display: grid;
gap: 12px;
padding: 20px 0 4px;
border-top: 1px solid #e8edf3;
}
.registration-consents label {
display: flex;
align-items: flex-start;
gap: 10px;
color: #536176;
font-size: .8125rem;
line-height: 1.45;
}
.registration-consents input {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 1px;
accent-color: #0878e5;
}
body:not(:has(.admin-shell)) .registration-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 52px;
margin-top: 24px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #0878e5 0%, #1263c8 100%);
font-size: .9375rem;
font-weight: 750;
box-shadow: 0 10px 24px rgba(18, 99, 200, .24);
transition: transform .18s ease, box-shadow .18s ease;
}
body:not(:has(.admin-shell)) .registration-submit:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(18, 99, 200, .3);
}
body:not(:has(.admin-shell)) .registration-footer {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #edf1f5;
}
@media (max-width: 720px) {
body:not(:has(.admin-shell)) .registration-wrapper {
padding: 20px 12px 40px;
}
body:not(:has(.admin-shell)) .registration-card {
padding: 28px 20px 24px;
border-radius: 18px;
}
.registration-grid,
.registration-address-grid {
grid-template-columns: 1fr;
}
.registration-span-2,
.registration-street,
.registration-city,
.registration-tax-field {
grid-column: 1;
}
}
body:not(:has(.admin-shell)) .table {
width: 100%;
border-collapse: collapse;
}
body:not(:has(.admin-shell)) .table th {
text-align: left;
padding: 1rem;
color: var(--apple-muted);
font-weight: 500;
border-bottom: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .table td {
padding: 1rem;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
body:not(:has(.admin-shell)) .alert {
border-radius: 16px;
padding: 1rem 1.5rem;
border: none;
}
body:not(:has(.admin-shell)) .alert.warning {
background: #fff8e1;
color: #8f6c00;
}
body:not(:has(.admin-shell)) .alert.error {
background: #ffe5e5;
color: #c90000;
}
body:not(:has(.admin-shell)) .alert.success {
background: #e5ffe5;
color: #008f00;
}
.main-content:not(:has(.admin-shell)) .empty-state {
text-align: center;
padding: 4rem 2rem;
background: #fff;
border-radius: 32px;
box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
@media (max-width: 768px) {
body:not(:has(.admin-shell)) .app-header .header-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.75rem;
height: auto;
min-height: 60px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
body:not(:has(.admin-shell)) .app-header .logo { grid-column: 1; grid-row: 1; }
body:not(:has(.admin-shell)) .app-header .user-nav {
grid-column: 2;
grid-row: 1;
min-width: 0;
gap: 0.75rem !important;
flex-wrap: wrap;
justify-content: flex-end;
}
body:not(:has(.admin-shell)) .app-header .user-nav .btn { padding: 0.6rem 0.875rem; font-size: 0.8125rem; }
body:not(:has(.admin-shell)) .app-header .search-bar {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
min-width: 0;
max-width: none !important;
margin: 0 !important;
}
body:not(:has(.admin-shell)) .app-header .search-bar input { min-width: 0; }
.instant-intro { flex-direction: column; align-items: flex-start; gap: 1rem; }
.instant-intro h1 { font-size: 2.25rem; white-space: normal; overflow-wrap: break-word; }
.instant-results-heading h2 { font-size: 2rem; white-space: normal; overflow-wrap: break-word; }
body:not(:has(.admin-shell)) .product-detail-layout {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
body:not(:has(.admin-shell)) .product-gallery { position: static; }
body:not(:has(.admin-shell)) .main-image-container { padding: 1.5rem; }
body:not(:has(.admin-shell)) .product-title-lg { font-size: clamp(1.6rem, 6.5vw, 2rem); }
body:not(:has(.admin-shell)) .purchase-box { padding: 1.25rem; }
body:not(:has(.admin-shell)) .purchase-controls { flex-wrap: wrap; }
body:not(:has(.admin-shell)) .purchase-controls .btn { min-width: 0; white-space: normal; }
body:not(:has(.admin-shell)) .category-models { padding: 1rem; }
body:not(:has(.admin-shell)) .device-family-choice { padding: 0.75rem; }
body:not(:has(.admin-shell)) .category-model-choice { padding: 0.5rem 0.75rem; gap: 0.5rem; font-size: 0.8125rem; }
body:not(:has(.admin-shell)) .catalog-heading { padding: 1rem 0; }
body:not(:has(.admin-shell)) .catalog-heading h1 { font-size: 1.5rem; }
body:not(:has(.admin-shell)) .quick-categories { justify-content: flex-start; }
body:not(:has(.admin-shell)) .commerce-layout {
grid-template-columns: 1fr;
}
body:not(:has(.admin-shell)) .cart-item {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem;
}
body:not(:has(.admin-shell)) .cart-item-img {
width: 100%;
height: 200px;
}
body:not(:has(.admin-shell)) .catalog-layout {
flex-direction: column;
}
body:not(:has(.admin-shell)) .catalog-refine-row {
flex-direction: column;
align-items: stretch;
border-radius: 20px;
}
body:not(:has(.admin-shell)) .product-container.view-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.5rem;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-card {
flex-direction: column;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-img-link {
width: 100% !important;
border-right: none;
border-bottom: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .product-container.view-list .part-buy-area {
width: 100% !important;
border-left: none;
border-top: 1px solid var(--border-light);
}
.instant-models {
padding: 2rem 1.5rem;
}
.instant-family-options {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.instant-family-options button {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.instant-model-options {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.instant-model-options button {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
}
.main-image-container {
padding: 1.5rem;
}
}
body:not(:has(.admin-shell)) .app-footer {
background-color: var(--apple-surface);
color: var(--apple-text);
border-top: 1px solid var(--border-light);
margin-top: 4rem;
}
body:not(:has(.admin-shell)):has(.lp) .app-footer {
margin-top: 2rem;
}
body:not(:has(.admin-shell)) .footer-grid {
display: grid;
grid-template-columns: minmax(220px, 1.45fr) repeat(4, minmax(130px, 1fr));
gap: clamp(1.5rem, 3vw, 3rem);
padding: 3rem 0;
}
body:not(:has(.admin-shell)) .footer-service-strip {
border-bottom: 1px solid var(--border-light);
background: #f7faff;
}
body:not(:has(.admin-shell)) .footer-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:not(:has(.admin-shell)) .footer-service-item {
display: flex;
align-items: center;
gap: 0.875rem;
min-height: 92px;
padding: 1.25rem clamp(1rem, 2.5vw, 2rem);
border-right: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .footer-service-item:first-child { padding-left: 0; }
body:not(:has(.admin-shell)) .footer-service-item:last-child { border-right: 0; }
body:not(:has(.admin-shell)) .footer-service-item svg {
flex: 0 0 auto;
width: 25px;
height: 25px;
fill: none;
stroke: #1768d4;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
body:not(:has(.admin-shell)) .footer-service-item span { display: grid; gap: 0.2rem; }
body:not(:has(.admin-shell)) .footer-service-item strong { color: #17283d; font-size: 0.9rem; font-weight: 650; }
body:not(:has(.admin-shell)) .footer-service-item small { color: #68778b; font-size: 0.8rem; line-height: 1.35; }
body:not(:has(.admin-shell)) .footer-logo {
display: block;
width: clamp(200px, 18vw, 240px);
max-width: 100%;
height: auto;
margin-bottom: 1.25rem;
filter: none;
opacity: 1;
}
body:not(:has(.admin-shell)) .footer-brand p {
color: #5b6779;
font-size: 0.9375rem;
line-height: 1.6;
max-width: 340px;
}
body:not(:has(.admin-shell)) .footer-brand .footer-business-note {
margin-top: 1rem;
padding-left: 0.85rem;
border-left: 2px solid #b9d8fb;
color: #68778b;
font-size: 0.8125rem;
}
body:not(:has(.admin-shell)) .footer-links h4 {
font-size: 0.875rem;
font-weight: 600;
color: var(--apple-text);
margin-bottom: 1.25rem;
text-transform: none;
letter-spacing: -0.012em;
}
body:not(:has(.admin-shell)) .footer-links a {
display: block;
color: #5b6779;
font-size: 0.9375rem;
margin-bottom: 0.875rem;
transition: color 0.2s ease;
}
body:not(:has(.admin-shell)) .footer-links a:hover {
color: #1768d4;
text-decoration: none;
}
body:not(:has(.admin-shell)) .footer-links p.text-muted.small {
color: #5b6779;
font-size: 0.8125rem;
line-height: 1.5;
margin-bottom: 1rem;
}
body:not(:has(.admin-shell)) .footer-bottom {
background: transparent;
border-top: 1px solid var(--border-light);
padding: 1.5rem 0;
text-align: left;
color: #5b6779;
font-size: 0.8125rem;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
body:not(:has(.admin-shell)) .footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
@media (max-width: 900px) {
body:not(:has(.admin-shell)) .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
padding: 2.5rem 0;
}
body:not(:has(.admin-shell)) .footer-brand { grid-column: 1 / -1; }
body:not(:has(.admin-shell)) .footer-service-grid { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .footer-service-item,
body:not(:has(.admin-shell)) .footer-service-item:first-child {
min-height: 0;
padding: 1rem 0;
border-right: 0;
border-bottom: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .footer-service-item:last-child { border-bottom: 0; }
body:not(:has(.admin-shell)) .footer-bottom-inner { align-items: flex-start; flex-direction: column; }
body:not(:has(.admin-shell)) .footer-logo {
width: min(220px, 100%);
}
}
@media (max-width: 560px) {
body:not(:has(.admin-shell)) .footer-grid { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .footer-brand { grid-column: auto; }
}
.category-models [hidden] { display: none !important; }
.category-models {
display: flex;
flex-direction: column;
}
.category-model-heading {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 1.5rem;
}
.device-family-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
body:not(:has(.admin-shell)) .category-models { padding: 12px; margin-bottom: 16px; border-radius: 8px; box-shadow: none; background: #fff; border: 1px solid var(--border-light); }
body:not(:has(.admin-shell)) .category-models { padding: 0; overflow: hidden; }
body:not(:has(.admin-shell)) .category-model-trigger {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 9px 14px;
list-style: none;
cursor: pointer;
background: #fff;
}
body:not(:has(.admin-shell)) .category-model-trigger::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .category-model-trigger:hover { background: #f8fbff; }
body:not(:has(.admin-shell)) .category-model-trigger:focus-visible { outline: 2px solid #2f6fe4; outline-offset: -2px; }
body:not(:has(.admin-shell)) .category-model-trigger-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 9px;
background: #eef5ff;
color: #1768c5;
}
body:not(:has(.admin-shell)) .category-model-trigger-icon svg { width: 18px; height: 18px; }
body:not(:has(.admin-shell)) .category-models .category-model-heading { gap: 2px; margin: 0; font-size: 14px; }
body:not(:has(.admin-shell)) .category-models .category-model-heading small { font-size: 12px; }
body:not(:has(.admin-shell)) .category-model-chevron { color: #7c899a; transition: transform .18s ease; }
body:not(:has(.admin-shell)) .category-models[open] .category-model-chevron { transform: rotate(180deg); }
body:not(:has(.admin-shell)) .category-model-body { padding: 10px 12px 12px; border-top: 1px solid #e7edf5; background: #fafcff; }
body:not(:has(.admin-shell)) .category-models .device-family-options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
body:not(:has(.admin-shell)) .device-family-group {
background: #fdfdfd;
border: 1px solid #dfe3e8;
border-radius: 6px;
overflow: hidden;
}
body:not(:has(.admin-shell)) .device-family-group[open] {
border-color: #8db7e8;
box-shadow: 0 4px 12px rgba(24, 89, 168, 0.08);
}
body:not(:has(.admin-shell)) .device-family-choice {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 40px;
padding: 8px 12px;
background: #fff;
cursor: pointer;
font-size: 14px;
line-height: 1.3;
list-style: none;
}
body:not(:has(.admin-shell)) .device-family-choice::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .device-family-choice strong { font-weight: 500; }
body:not(:has(.admin-shell)) .device-family-choice svg { color: #8c97a8; transition: transform 0.2s; }
body:not(:has(.admin-shell)) .device-family-group[open] .device-family-choice svg { transform: rotate(180deg); color: #1859a8; }
body:not(:has(.admin-shell)) .device-family-choice:hover { background: #f8fafb; }
body:not(:has(.admin-shell)) .device-family-group[open] .device-family-choice {
background: #eef5ff;
border-bottom: 1px solid #dce8f5;
color: #1859a8;
}
body:not(:has(.admin-shell)) .device-family-dropdown {
padding: 0;
background: #fff;
}
body:not(:has(.admin-shell)) .category-model-tools { position: sticky; top: 0; z-index: 2; padding: 13px; background: #eaf4ff; border-bottom: 1px solid #c9def5; }
body:not(:has(.admin-shell)) .category-model-search-title { display: block; margin: 0 0 2px; color: #123b69; font-size: 14px; }
body:not(:has(.admin-shell)) .category-model-search-copy { display: block; margin: 0 0 9px; color: #506c8d; font-size: 11px; line-height: 1.4; }
body:not(:has(.admin-shell)) .category-models .category-model-search { position: relative; display: block; margin: 0; }
body:not(:has(.admin-shell)) .category-model-search-icon { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; color: #718096; transform: translateY(-50%); pointer-events: none; }
body:not(:has(.admin-shell)) .category-model-search-icon svg { display: block; width: 100%; height: 100%; }
body:not(:has(.admin-shell)) .category-models .category-model-search input { width: 100%; min-height: 46px; padding: 8px 12px 8px 36px; font-size: 14px; border-radius: 10px; border: 2px solid #70a8e4; background: #fff; box-shadow: 0 3px 10px rgba(26, 91, 163, .08); }
body:not(:has(.admin-shell)) .category-models .category-model-search input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); }
body:not(:has(.admin-shell)) .category-model-search-hint { margin: 7px 2px 0; color: #758196; font-size: 11px; line-height: 1.35; }
body:not(:has(.admin-shell)) .device-family-models { padding: 10px 12px 0; }
body:not(:has(.admin-shell)) .category-model-results-meta { margin-bottom: 8px; color: #64748b; font-size: 11px; font-weight: 600; }
body:not(:has(.admin-shell)) .category-model-scroll { max-height: none; overflow: visible; padding-right: 0; }
body:not(:has(.admin-shell)) .category-model-series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; }
body:not(:has(.admin-shell)) .category-model-series-grid .category-model-series { margin: 0; overflow: hidden; border: 1px solid #dbe4ef; border-radius: 9px; background: #fff; }
body:not(:has(.admin-shell)) .category-model-series-grid .category-model-series[open] { grid-column: 1 / -1; border-color: #9fc2e8; box-shadow: 0 4px 12px rgba(24, 89, 168, .07); }
body:not(:has(.admin-shell)) .category-model-series > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 11px; list-style: none; cursor: pointer; color: #243b55; font-size: 13px; font-weight: 700; }
body:not(:has(.admin-shell)) .category-model-series > summary::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .category-model-series:not([open]) > .category-model-series-body { display: none; }
body:not(:has(.admin-shell)) .category-model-series > summary small { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: #e9f2fc; color: #4c6e94; text-align: center; font-size: 10px; }
body:not(:has(.admin-shell)) .category-model-series[open] > summary { border-bottom: 1px solid #e2eaf3; background: #f2f7fd; color: #145da8; }
body:not(:has(.admin-shell)) .category-model-series-body { padding: 9px; }
body:not(:has(.admin-shell)) .category-model-series-more { width: 100%; min-height: 36px; margin-top: 7px; border: 1px solid #c9def4; border-radius: 7px; background: #eff6ff; color: #1764b5; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
body:not(:has(.admin-shell)) .category-model-series + .category-model-series { margin-top: 13px; }
body:not(:has(.admin-shell)) .category-model-series h4 { margin: 0 0 6px; color: #506074; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body:not(:has(.admin-shell)) .category-models .category-model-options {
display: grid;
grid-template-columns: 1fr;
margin: 0;
gap: 6px;
}
body:not(:has(.admin-shell)) .category-models .category-model-choice { min-width: 0; min-height: 38px; padding: 8px 10px; gap: 8px; border: 1px solid transparent; border-radius: 8px; background: #f7f9fc; font-size: 13px; line-height: 1.3; box-shadow: none; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; }
body:not(:has(.admin-shell)) .category-models .category-model-choice:hover { background: #f0f4f8; border-color: #cdd8e4; }
body:not(:has(.admin-shell)) .category-models .category-model-choice strong { font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
body:not(:has(.admin-shell)) .category-models .category-model-choice small { flex-shrink: 0; padding: 2px 6px; background: #f0f2f5; color: #687585; font-size: 10px; border-radius: 4px; }
body:not(:has(.admin-shell)) .category-models .category-model-choice.active { background: #eef5ff; border-color: #8db7e8; color: #1859a8; }
body:not(:has(.admin-shell)) .category-models .category-model-choice.active small { background: #dce8f5; color: #1859a8; }
body:not(:has(.admin-shell)) .category-model-show-all { width: 100%; margin-top: 9px; padding: 9px 10px; border: 0; border-top: 1px solid #e7edf5; background: #fff; color: #1768c5; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
body:not(:has(.admin-shell)) .category-model-show-all:hover { background: #f5f9ff; }
body:not(:has(.admin-shell)) .category-model-show-all:focus-visible { outline: 2px solid #2f6fe4; outline-offset: -2px; }
body:not(:has(.admin-shell)) .category-model-empty { margin: 0; padding: 12px 4px 16px; color: #687585; font-size: 13px; }
body:not(:has(.admin-shell)) .device-family-all-link { padding: 10px 12px 12px; border-top: 1px solid #edf1f6; }
body:not(:has(.admin-shell)) .category-browse {
margin-bottom: 14px;
overflow: hidden;
border: 1px solid #dbe4ef;
border-radius: 10px;
background: #fff;
}
body:not(:has(.admin-shell)) .category-browse-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
padding: 16px 18px;
border-bottom: 1px solid #e4eaf2;
background: #f7faff;
}
body:not(:has(.admin-shell)) .category-browse-heading span {
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .category-browse-heading h2 {
margin: 3px 0 0;
color: #17283d;
font-size: 18px;
line-height: 1.25;
letter-spacing: -.02em;
}
body:not(:has(.admin-shell)) .category-browse-heading p {
max-width: 420px;
margin: 0;
color: #64748b;
font-size: 12px;
line-height: 1.45;
text-align: right;
}
body:not(:has(.admin-shell)) .category-browse-grid {
display: grid;
grid-template-columns: minmax(190px, .72fr) minmax(320px, 1.28fr);
align-items: start;
}
body:not(:has(.admin-shell)) .category-brand-browse {
min-width: 0;
padding: 14px;
border-right: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .category-browse-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
}
body:not(:has(.admin-shell)) .category-browse-label h3 {
margin: 0;
color: #475569;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .category-browse-label small {
color: #7c899a;
font-size: 11px;
}
body:not(:has(.admin-shell)) .category-brand-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
body:not(:has(.admin-shell)) .category-brand-choice {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
min-height: 38px;
gap: 8px;
padding: 7px 9px;
border: 1px solid transparent;
border-radius: 7px;
background: #f7f9fc;
color: #334155;
font-size: 12px;
text-decoration: none;
}
body:not(:has(.admin-shell)) .category-brand-choice:hover {
border-color: #cdd8e4;
background: #f0f4f8;
text-decoration: none;
}
body:not(:has(.admin-shell)) .category-brand-choice.active {
border-color: #8db7e8;
background: #eef5ff;
color: #1859a8;
}
body:not(:has(.admin-shell)) .category-brand-choice strong {
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(:has(.admin-shell)) .category-brand-choice small {
flex: 0 0 auto;
min-width: 20px;
padding: 2px 5px;
border-radius: 4px;
background: #e9eef5;
color: #64748b;
text-align: center;
}
body:not(:has(.admin-shell)) .category-brand-choice.active small { background: #dce8f5; color: #1859a8; }
body:not(:has(.admin-shell)) .category-browse .category-models--prominent {
margin: 0;
border: 0;
border-radius: 0;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent > .category-model-trigger {
min-height: 52px;
border-bottom: 1px solid #e7edf5;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-body { padding: 12px 14px 14px; }
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 7px;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-group[open] {
grid-column: 1 / -1;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-scroll {
max-height: none;
}
body:not(:has(.admin-shell)) .category-browse-loading {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 16px 18px;
}
body:not(:has(.admin-shell)) .category-browse-loading i {
display: block;
height: 40px;
border-radius: 7px;
background: linear-gradient(90deg, #f2f5f9 25%, #e8edf3 50%, #f2f5f9 75%);
background-size: 200% 100%;
animation: category-browse-loading 1.2s ease-in-out infinite;
}
@keyframes category-browse-loading {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
body:not(:has(.admin-shell)) .housing-guide-heading {
background: #f3f8ff;
}
body:not(:has(.admin-shell)) .housing-guide-steps {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
align-items: start;
}
body:not(:has(.admin-shell)) .housing-guide-step {
min-width: 0;
padding: 14px;
}
body:not(:has(.admin-shell)) .housing-guide-step:first-child {
grid-row: span 2;
border-right: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .housing-guide-step:nth-child(2) {
border-bottom: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .housing-result-step {
padding-block: 12px;
}
body:not(:has(.admin-shell)) .housing-step-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 11px;
}
body:not(:has(.admin-shell)) .housing-step-heading > b {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #dbeafe;
color: #1d4ed8;
font-size: 13px;
}
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b {
background: #dcfce7;
color: #15803d;
}
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b::after { content: "✓"; }
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b { font-size: 0; }
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b::after { font-size: 13px; }
body:not(:has(.admin-shell)) .housing-step-heading span { display: grid; gap: 2px; }
body:not(:has(.admin-shell)) .housing-step-heading strong { color: #17283d; font-size: 14px; }
body:not(:has(.admin-shell)) .housing-step-heading small { color: #64748b; font-size: 11px; line-height: 1.35; }
body:not(:has(.admin-shell)) .housing-guide .category-models--prominent {
margin: 0;
border: 1px solid #dfe6ef;
border-radius: 8px;
}
body:not(:has(.admin-shell)) .housing-part-options {
display: grid;
gap: 6px;
}
body:not(:has(.admin-shell)) .housing-part-choice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 9px 10px;
border: 1px solid #dfe6ef;
border-radius: 8px;
background: #fff;
color: #334155;
text-decoration: none;
}
body:not(:has(.admin-shell)) .housing-part-choice:hover {
border-color: #9abfe9;
background: #f8fbff;
text-decoration: none;
}
body:not(:has(.admin-shell)) .housing-part-choice.active {
border-color: #72a7e5;
background: #eef5ff;
color: #1859a8;
}
body:not(:has(.admin-shell)) .housing-part-choice > span { display: grid; gap: 2px; min-width: 0; }
body:not(:has(.admin-shell)) .housing-part-choice strong { font-size: 13px; }
body:not(:has(.admin-shell)) .housing-part-choice small { color: #718096; font-size: 10px; line-height: 1.3; }
body:not(:has(.admin-shell)) .housing-part-choice b {
flex: 0 0 auto;
padding: 3px 6px;
border-radius: 5px;
background: #eef2f7;
color: #64748b;
font-size: 11px;
}
body:not(:has(.admin-shell)) .housing-step-locked,
body:not(:has(.admin-shell)) .housing-products-locked {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px dashed #cdd8e4;
border-radius: 8px;
background: #f8fafc;
color: #64748b;
}
body:not(:has(.admin-shell)) .housing-step-locked > span {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #e8edf3;
font-weight: 700;
}
body:not(:has(.admin-shell)) .housing-step-locked p,
body:not(:has(.admin-shell)) .housing-products-locked p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }
body:not(:has(.admin-shell)) .housing-products-locked { display: block; margin-top: 12px; }
@media (max-width: 900px) {
body:not(:has(.admin-shell)) .housing-guide-steps { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .housing-guide-step:first-child { grid-row: auto; border-right: 0; border-bottom: 1px solid #e4eaf2; }
}
@media (max-width: 760px) {
body:not(:has(.admin-shell)) .category-browse-heading { align-items: start; flex-direction: column; gap: 6px; }
body:not(:has(.admin-shell)) .category-browse-heading p { text-align: left; }
body:not(:has(.admin-shell)) .category-browse-grid { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .category-brand-browse { border-right: 0; border-bottom: 1px solid #e4eaf2; }
body:not(:has(.admin-shell)) .category-brand-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 214px; }
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-options { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-options { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .category-browse-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
body:not(:has(.admin-shell)) .category-models .category-model-options { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .category-models .category-model-choice { min-height: 40px; }
body:not(:has(.admin-shell)) .category-model-scroll { max-height: min(46svh, 380px); }
}
.currency-context-note { font-size: .8rem; color: var(--text-muted); margin-top: .65rem; }
.currency-context-note.error { color: var(--danger, #b42318); }
body:not(:has(.admin-shell)) .catalog-accessory-filters {
margin: .75rem 0 1rem;
max-width: 100%;
border-top: 1px solid #dfe7f0;
border-bottom: 1px solid #dfe7f0;
}
body:not(:has(.admin-shell)) .catalog-accessory-toolbar {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: end;
gap: 1rem;
padding: .7rem 0;
}
body:not(:has(.admin-shell)) .catalog-accessory-title {
align-self: center;
color: #24364b;
font-size: .875rem;
white-space: nowrap;
}
body:not(:has(.admin-shell)) .catalog-accessory-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
}
body:not(:has(.admin-shell)) .catalog-accessory-control {
display: grid;
gap: .35rem;
min-width: 0;
}
body:not(:has(.admin-shell)) .catalog-accessory-control > span {
color: #64748b;
font-size: .625rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .catalog-accessory-control select {
width: 100%;
min-height: 36px;
padding: .35rem .5rem;
border: 1px solid #cfdce9;
border-radius: 6px;
background: #fff;
color: #334155;
}
@media (max-width: 900px) {
body:not(:has(.admin-shell)) .catalog-accessory-toolbar {
grid-template-columns: 1fr;
align-items: start;
gap: .65rem;
}
}
@media (max-width: 640px) {
body:not(:has(.admin-shell)) .catalog-accessory-controls { grid-template-columns: 1fr; }
}
body:not(:has(.admin-shell)) .catalog-desktop-filters {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid #e8edf3;
}
body:not(:has(.admin-shell)) .catalog-desktop-filters > h3 {
margin: 0 0 16px;
color: #738196;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .catalog-sidebar .device-fields,
body:not(:has(.admin-shell)) .filter-dialog .device-fields {
gap: 10px;
}
@media (min-width: 1000px) {
body:not(:has(.admin-shell)) .catalog-sidebar {
flex: 0 0 256px;
}
body:not(:has(.admin-shell)) .catalog-main {
min-width: 0;
}
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step {
position: relative;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #fff;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step::before {
display: none;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step > label,
body:not(:has(.admin-shell)) .advanced-filters .field > label {
display: block;
margin: 0 0 6px;
color: #637087;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step .form-control {
min-height: 36px;
padding: 6px 9px;
border-color: transparent;
background: transparent;
box-shadow: none;
font-size: 0.8125rem;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step .model-picker summary {
min-height: 42px;
align-items: flex-start;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step .model-caption {
display: block;
flex: 1 1 auto;
min-width: 0;
max-height: 2.7em;
white-space: normal !important;
overflow: hidden;
overflow-wrap: anywhere;
line-height: 1.35;
}
body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover {
right: auto;
width: min(300px, calc(100vw - 32px));
max-height: min(68vh, 540px);
border-radius: 12px;
overflow: hidden;
}
body:not(:has(.admin-shell)) .discovery-filters .model-search-wrap {
position: relative;
display: block;
margin: 12px 12px 0;
}
body:not(:has(.admin-shell)) .discovery-filters .model-search-wrap svg {
position: absolute;
z-index: 1;
left: 11px;
top: 50%;
width: 17px;
height: 17px;
color: #718096;
transform: translateY(-50%);
pointer-events: none;
}
body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover .model-search {
width: 100%;
min-height: 42px;
padding: 8px 34px;
background: #f8fafc;
border-color: #dce4ee;
border-radius: 10px;
font-size: 0.8rem;
}
body:not(:has(.admin-shell)) .discovery-filters .model-search-help {
margin: 7px 14px 10px;
color: #738095;
font-size: 0.68rem;
line-height: 1.35;
}
body:not(:has(.admin-shell)) .discovery-filters .model-options {
display: flex;
min-height: 0;
overflow: hidden;
flex-direction: column;
}
body:not(:has(.admin-shell)) .discovery-filters .model-options-scroll {
max-height: min(42vh, 330px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
padding: 0 8px 8px;
}
body:not(:has(.admin-shell)) .discovery-filters .model-option {
min-height: 39px;
margin: 2px 0;
padding: 7px 9px;
border-radius: 8px;
background: #f7f9fc;
}
body:not(:has(.admin-shell)) .discovery-filters .model-option span {
min-width: 0;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
body:not(:has(.admin-shell)) .discovery-filters .model-option-all {
min-height: 36px;
margin: 0 12px 7px;
width: auto;
color: #526176;
background: #fff;
border: 1px solid #e7edf5;
}
body:not(:has(.admin-shell)) .discovery-filters .model-result-count {
margin: 0 12px 7px;
color: #64748b;
font-size: 0.68rem;
font-weight: 600;
}
body:not(:has(.admin-shell)) .discovery-filters .model-option-group + .model-option-group {
margin-top: 12px;
}
body:not(:has(.admin-shell)) .discovery-filters .model-option-group h4 {
margin: 0 3px 5px;
color: #526176;
font-size: 0.66rem;
letter-spacing: .07em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .discovery-filters .model-show-all {
flex: none;
min-height: 40px;
border: 0;
border-top: 1px solid #e7edf5;
background: #fff;
color: #1768c5;
cursor: pointer;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
}
body:not(:has(.admin-shell)) .discovery-filters .model-show-all:hover {
background: #f5f9ff;
}
@media (max-width: 760px) {
body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover {
right: 0;
width: 100%;
}
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step:focus-within {
border-color: #94a3b8;
box-shadow: inset 2px 0 0 #3b82f6;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step.has-value {
border-color: #cbd5e1;
background: #f8fafc;
}
body:not(:has(.admin-shell)) .discovery-filters .filter-step.has-value::before {
display: none;
}
body:not(:has(.admin-shell)) .advanced-filters {
margin-top: 14px;
padding-top: 0;
border-top: 0;
border-bottom: 1px solid #e8edf3;
}
body:not(:has(.admin-shell)) .advanced-filters > summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
padding: 8px 2px;
color: #42546b;
list-style: none;
}
body:not(:has(.admin-shell)) .advanced-filters > summary::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .advanced-filters > summary::after {
content: "+";
color: #6c7d91;
font-size: 1rem;
}
body:not(:has(.admin-shell)) .advanced-filters[open] > summary::after { content: "›"; }
body:not(:has(.admin-shell)) .advanced-filters .field {
margin: 6px 0 12px;
}
body:not(:has(.admin-shell)) .advanced-filters .form-control {
min-height: 40px;
font-size: 0.8125rem;
}
body:not(:has(.admin-shell)) .filter-auto-hint {
margin: 11px 0 0;
color: #8190a3;
font-size: 0.6875rem;
line-height: 1.45;
}
.b2b-products {
background: #ffffff;
border-radius: 8px;
border: 1px solid var(--border-light);
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
overflow: visible;
margin: 1rem 0;
}
body:not(:has(.admin-shell)) .catalog-main > .b2b-products,
body:not(:has(.admin-shell)) .catalog-empty-surface {
margin: 0;
overflow: hidden;
border: 1px solid var(--catalog-shell-border, var(--border-light));
border-radius: 10px;
background: #fff;
box-shadow: var(--catalog-shell-shadow, 0 2px 8px rgba(15, 23, 42, 0.035));
}
body:not(:has(.admin-shell)) .catalog-main > .b2b-products {
border: 1px solid var(--catalog-shell-border, var(--border-light));
}
body:not(:has(.admin-shell)) .b2b-products-toolbar {
display: flex;
min-height: 48px;
padding: 7px 12px;
align-items: center;
justify-content: flex-end;
background: var(--catalog-header-surface, #f5f5f7);
border-bottom: 1px solid var(--catalog-shell-border, var(--border-light));
}
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th {
height: 56px;
background: var(--catalog-header-surface, #f5f5f7);
border-radius: 0;
box-sizing: border-box;
}
body:not(:has(.admin-shell)) .catalog-empty-surface .empty-state {
margin: 0;
border: 0;
border-radius: 0;
}
.b2b-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
text-align: left;
}
.b2b-table th {
background: var(--catalog-header-surface, #f5f5f7);
font-weight: 600;
color: var(--apple-muted);
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--border-light);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
white-space: nowrap;
}
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th:first-child,
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th:last-child {
border-radius: 0;
}
.b2b-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.b2b-table tr:last-child td {
border-bottom: none;
}
.b2b-table tr:hover {
background: #fcfcfc;
}
.col-img { width: 68px; padding-right: 0 !important; }
.col-product { min-width: 300px; }
.col-stock { width: 125px; }
.col-price { width: 135px; font-weight: 600; }
.col-order { width: 155px; }
.b2b-img-wrap {
position: relative;
display: flex;
width: 56px;
height: 56px;
padding: 0;
background: #fff;
border-radius: 6px;
overflow: hidden;
align-items: center;
justify-content: center;
border: 1px solid var(--border-light);
text-decoration: none;
}
button.b2b-img-wrap {
appearance: none;
color: inherit;
font: inherit;
cursor: zoom-in;
}
.b2b-img-wrap img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.2s ease;
}
.b2b-img-wrap:hover img,
.b2b-img-wrap:focus-visible img {
transform: scale(1.14);
}
.b2b-img-wrap:focus-visible {
outline: 3px solid rgba(0, 113, 227, .28);
outline-offset: 2px;
border-color: var(--primary);
}
.b2b-img-zoom {
position: absolute;
right: 3px;
bottom: 3px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
color: #1769aa;
border: 1px solid #c9daea;
border-radius: 999px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 1px 4px rgba(17, 55, 91, .16);
pointer-events: none;
transition: transform .2s ease, border-color .2s ease;
}
.b2b-img-zoom svg {
width: 12px;
height: 12px;
}
.b2b-img-wrap:hover .b2b-img-zoom,
.b2b-img-wrap:focus-visible .b2b-img-zoom {
transform: scale(1.08);
border-color: #72a5d1;
}
.b2b-img-wrap.no-img svg {
width: 30px;
height: 30px;
color: #52799e;
}
.b2b-img-wrap.no-img {
background:
radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.92), transparent 42%),
linear-gradient(145deg, #f2f7fb, #e7f0f8);
border-color: #d5e2ee;
}
.b2b-img-wrap.no-img:hover {
background:
radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.96), transparent 42%),
linear-gradient(145deg, #edf5fb, #dceaf5);
border-color: #b9cee0;
}
.b2b-prod-title {
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 0.15rem;
line-height: 1.22;
}
.b2b-prod-title a { color: #1d1d1f; text-decoration: none; transition: color 0.2s ease; }
body:not(:has(.admin-shell)) .b2b-prod-title a:hover,
body:not(:has(.admin-shell)) .b2b-prod-title a:focus-visible {
color: var(--primary);
text-decoration: none;
}
.b2b-prod-meta {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.15rem;
font-size: 0.75rem;
flex-wrap: wrap;
}
.b2b-sku {
color: var(--apple-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.b2b-badge {
padding: 0.1rem 0.3rem;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 0.6875rem;
letter-spacing: 0.02em;
}
.b2b-badge.quality {
background: #fff0e6;
color: #e56000;
}
.b2b-badge.type {
background: #f0f0f5;
color: #555;
}
.b2b-prod-models {
color: var(--apple-muted);
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
.b2b-stock-indicator {
display: flex;
align-items: center;
gap: 0.3rem;
font-weight: 500;
}
.b2b-dot { width: 8px; height: 8px; border-radius: 50%; }
.b2b-stock-ok { color: #1f7a37; }
.b2b-stock-ok .b2b-dot { background: #34c759; }
.b2b-stock-out { color: #c72c22; }
.b2b-stock-out .b2b-dot { background: #ff3b30; }
.b2b-min-qty-warn {
font-size: 0.75rem;
color: #ff3b30;
margin-top: 0.25rem;
font-weight: 600;
}
.b2b-price {
font-size: 1rem;
line-height: 1.35;
}
.b2b-login-link {
font-size: 0.8125rem;
color: var(--primary);
text-decoration: underline;
font-weight: 500;
}
.b2b-order-controls {
display: flex;
gap: 0.35rem;
align-items: center;
}
.b2b-qty-input {
width: 54px;
height: 34px;
padding: 0 0.5rem;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
font-size: 0.875rem;
background: #fff;
color: #1d1d1f;
}
.b2b-qty-input:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 2px rgba(0,113,227,0.15);
}
.b2b-add-btn {
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
width: 44px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.b2b-add-btn:hover:not(:disabled) {
background: var(--primary-hover);
}
.b2b-add-btn.loading {
background: var(--apple-muted);
pointer-events: none;
}
.b2b-add-btn.success {
background: #34c759;
}
.b2b-row-feedback {
display: block;
box-sizing: border-box;
width: max-content;
max-width: 100%;
min-height: calc(2.7em + 0.44rem);
margin-top: 0.4rem;
padding: 0;
font-size: 0.72rem;
line-height: 1.35;
}
.b2b-row-feedback-message {
display: inline-block;
max-width: 100%;
border: 1px solid transparent;
border-radius: 999px;
opacity: 0;
overflow-wrap: anywhere;
transform: translateY(-2px);
transition: opacity .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.b2b-row-feedback.has-message .b2b-row-feedback-message {
opacity: 1;
transform: translateY(0);
}
.b2b-row-feedback.success .b2b-row-feedback-message {
padding: 0.22rem 0.5rem;
background: #edf8f0;
border-color: #d0ecd8;
color: #1f7a37;
font-weight: 650;
}
.b2b-row-feedback.success .b2b-row-feedback-message::before { content: "✓"; margin-right: 0.3rem; }
.b2b-row-feedback.error .b2b-row-feedback-message {
padding: 0.22rem 0.5rem;
background: #fff4f3;
border-color: #ffd8d2;
color: #c72c22;
font-weight: 600;
}
.b2b-row-feedback.is-adding .b2b-row-feedback-message {
padding: 0.22rem 0.5rem;
background: #f3f6fa;
border-color: #e0e7ef;
color: #607087;
}
@media (prefers-reduced-motion: reduce) {
.b2b-row-feedback-message {
transition-duration: .01ms;
}
}
.b2b-staff-note {
font-size: 0.75rem;
color: var(--apple-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.b2b-empty {
padding: 3rem 1rem;
text-align: center;
color: var(--apple-muted);
font-size: 0.9375rem;
}
[data-catalog-shell] { position: relative; }
.catalog-refresh-progress {
position: absolute;
top: 0;
left: 0;
z-index: 4;
width: 42%;
height: 2px;
border-radius: 999px;
background: var(--primary);
animation: catalog-progress 1.05s ease-in-out infinite;
}
.is-catalog-refreshing [data-catalog-results]::after {
content: "";
position: absolute;
z-index: 3;
inset: 0;
pointer-events: auto;
background: linear-gradient(105deg, rgba(255,255,255,.38), rgba(245,248,252,.62), rgba(255,255,255,.38));
background-size: 200% 100%;
animation: catalog-veil 1.2s linear infinite;
}
.is-catalog-refreshing [data-catalog-results] { position: relative; opacity: 1; }
.catalog-refresh-error {
display: flex;
align-items: center;
gap: .6rem;
margin: 0 0 .75rem;
padding: .55rem .75rem;
color: #9f2f26;
background: #fff5f4;
border: 1px solid #f0d1cd;
border-radius: 7px;
font-size: .8125rem;
}
.catalog-refresh-error .btn { padding: .35rem .65rem; font-size: .75rem; }
.catalog-skeleton { padding-top: 1.25rem; }
.catalog-skeleton i { display: block; border-radius: 6px; background: #e7ebf0; }
.catalog-skeleton-heading { margin: .85rem 0 1.5rem; }
.catalog-skeleton-heading h1 { margin: .32rem 0 .25rem; font-size: clamp(1.45rem, 2.5vw, 2rem); color: var(--apple-text); }
.catalog-skeleton-heading p { margin: 0; color: var(--apple-muted); font-size: .875rem; }
.catalog-skeleton .catalog-sidebar { display: block; }
.catalog-skeleton-side-title { padding: 1rem 1rem .85rem; border-bottom: 1px solid #edf0f3; }
.catalog-skeleton-side-title i:first-child { width: 28%; height: 9px; margin-bottom: .65rem; }
.catalog-skeleton-side-title i:last-child { width: 68%; height: 18px; }
.catalog-skeleton-side-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: .7rem; min-height: 52px; padding: .55rem .75rem; }
.catalog-skeleton-side-row > i { width: 30px; height: 30px; }
.catalog-skeleton-side-row span i { width: 68%; height: 11px; }
.catalog-skeleton-toolbar { display: flex; justify-content: flex-end; align-items: center; height: 48px; padding: 0 12px; margin-bottom: 0; border: 1px solid #edf0f3; border-bottom: 0; border-radius: 8px 8px 0 0; }
.catalog-skeleton-toolbar i { width: 155px; height: 34px; }
.catalog-skeleton-row { display: grid; grid-template-columns: 58px minmax(180px, 1fr) 112px 82px 70px; align-items: center; gap: 1rem; min-height: 92px; padding: .75rem 1rem; border-bottom: 1px solid #edf0f3; }
.catalog-skeleton-photo { width: 54px; height: 62px; }
.catalog-skeleton-copy { display: grid; gap: .45rem; }
.catalog-skeleton-copy i:first-child { width: min(360px, 84%); height: 13px; }
.catalog-skeleton-copy i:nth-child(2) { width: 42%; height: 9px; }
.catalog-skeleton-copy i:last-child { width: 58%; height: 9px; }
.catalog-skeleton-stock { width: 76px; height: 12px; }
.catalog-skeleton-price { width: 62px; height: 16px; }
.catalog-skeleton-action { width: 42px; height: 34px; justify-self: end; }
.catalog-skeleton .b2b-products { overflow: hidden; border: 1px solid #edf0f3; border-radius: 0 0 8px 8px; background: #fff; }
.catalog-skeleton i { background: linear-gradient(100deg, #e9edf2 25%, #f5f7fa 45%, #e9edf2 65%); background-size: 220% 100%; animation: catalog-skeleton-shimmer 1.25s ease-in-out infinite; }
.catalog-result-status {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@keyframes catalog-progress { 0% { transform: translateX(-105%); } 100% { transform: translateX(340%); } }
@keyframes catalog-veil { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@keyframes catalog-skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
.catalog-refresh-progress, .is-catalog-refreshing [data-catalog-results]::after, .catalog-skeleton i { animation: none; }
}
@media (max-width: 768px) {
.catalog-skeleton-heading { margin: .6rem 0 1rem; padding: 0 .15rem; }
.catalog-skeleton .catalog-sidebar { display: none; }
.catalog-skeleton-toolbar { height: 54px; padding: 0 10px; }
.catalog-skeleton-toolbar i { width: min(72%, 280px); height: 38px; }
.catalog-skeleton-row {
grid-template-columns: 54px minmax(0, 1fr) 42px;
grid-template-areas:
"photo copy action"
"photo stock price";
gap: .45rem .75rem;
min-height: 112px;
padding: .8rem .75rem;
}
.catalog-skeleton-photo { grid-area: photo; width: 50px; height: 66px; }
.catalog-skeleton-copy { grid-area: copy; }
.catalog-skeleton-stock { grid-area: stock; width: 74px; }
.catalog-skeleton-price { grid-area: price; width: 56px; justify-self: end; }
.catalog-skeleton-action { grid-area: action; width: 38px; height: 34px; }
}
.store-menu {
background: #ffffff;
border-bottom: 1px solid var(--border-light);
}
.store-menu-container {
display: flex;
}
.b2b-menu-wrapper {
position: relative;
display: inline-block;
}
.b2b-menu-btn {
background: #3967d6;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 0.9375rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-family: inherit;
border-right: 1px solid rgba(255,255,255,0.1);
}
.b2b-menu-btn:hover, .b2b-menu-btn.active {
background: #2a52b3;
}
.b2b-menu-btn .chevron {
transition: transform 0.2s;
margin-left: 0.25rem;
}
.b2b-menu-btn.active .chevron {
transform: rotate(180deg);
}
.b2b-menu-dropdown[hidden] {
display: none !important;
}
.b2b-menu-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 320px;
max-width: calc(100vw - 40px);
background: #fff;
box-shadow: 0 16px 40px rgba(0,0,0,0.12);
border: 1px solid var(--border-light);
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 75vh;
min-height: 300px;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 1000;
}
.b2b-menu-loader {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
height: 100%;
}
.b2b-menu-slider {
position: relative;
width: 100%;
height: 100%;
flex: 1;
overflow: hidden;
}
.b2b-menu-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
background: #fff;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.5rem 0;
}
.b2b-panel-active { transform: translateX(0); z-index: 2; }
.b2b-panel-hidden-left { transform: translateX(-100%); visibility: hidden; }
.b2b-panel-hidden-right, .b2b-panel-hidden { transform: translateX(100%); visibility: hidden; }
.b2b-menu-group { margin-bottom: 0.5rem; }
.b2b-menu-heading {
font-size: 1rem;
font-weight: 800;
padding: 1rem 1.25rem 0.5rem;
color: #1d1d1f;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.b2b-menu-item {
display: flex;
align-items: center;
width: 100%;
padding: 0.6rem 1.25rem;
background: none;
border: none;
text-align: left;
font-size: 0.9375rem;
color: #1d1d1f;
cursor: pointer;
text-decoration: none;
}
.b2b-menu-item:hover {
background: #f5f5f7;
text-decoration: none;
}
.b2b-menu-item.b2b-has-children {
justify-content: space-between;
}
.b2b-menu-back {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
width: 100%;
background: #f5f5f7;
border: none;
border-bottom: 1px solid var(--border-light);
font-weight: 600;
cursor: pointer;
font-size: 0.9375rem;
margin-bottom: 0.5rem;
color: #1d1d1f;
}
.b2b-menu-back:hover { background: #e8e8ed; }
.b2b-menu-all {
color: var(--primary);
font-weight: 600;
border-bottom: 1px solid var(--border-light);
margin-bottom: 0.5rem;
padding-bottom: 0.75rem;
}
.instant-search {
position: relative;
}
.b2b-search-results[role="dialog"] {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 0 0 12px 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
z-index: 1000;
max-height: 60vh;
overflow-y: auto;
padding: 0.5rem 0;
margin-top: 4px;
}
.b2b-search-results .smart-search-context {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1rem 0.65rem;
border-bottom: 1px solid var(--border-light);
background: #f7faff;
color: #66758a;
font-size: 0.72rem;
}
.b2b-search-results .smart-search-context > span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.b2b-search-results .smart-search-context > span + span::before {
content: "›";
margin-right: 0.25rem;
color: var(--primary);
font-weight: 700;
}
.b2b-search-results .smart-search-understood {
margin-right: auto;
color: #263449;
}
.b2b-search-results .smart-search-understood strong { color: var(--primary); }
.b2b-search-results .smart-search-parts {
padding: 0.75rem 1rem 0.875rem;
border-bottom: 1px solid var(--border-light);
background: #fff;
}
.b2b-search-results .smart-search-parts > p {
margin: 0 0 0.55rem;
color: #263449;
font-size: 0.75rem;
font-weight: 700;
}
.b2b-search-results .smart-search-part-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 0.5rem;
}
.b2b-search-results .smart-search-part {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 0.625rem;
min-width: 0;
min-height: 58px;
padding: 0.4rem 0.55rem;
border: 1px solid #dfe7f1;
border-radius: 9px;
background: #f8fbff;
color: #263449;
text-decoration: none;
}
.b2b-search-results .smart-search-part:hover,
.b2b-search-results .smart-search-part:focus-visible {
border-color: #9fc5f1;
background: #f1f7ff;
text-decoration: none;
}
.b2b-search-results .smart-search-part-media,
.b2b-search-results .smart-search-part-media img {
width: 44px;
height: 44px;
}
.b2b-search-results .smart-search-part-media img {
object-fit: contain;
border-radius: 6px;
}
.b2b-search-results .smart-search-part-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.b2b-search-results .smart-search-part-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.78rem;
}
.b2b-search-results .smart-search-part-copy small {
color: #718096;
font-size: 0.7rem;
}
.b2b-products .sr-only,
.b2b-search-results .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;
}
.b2b-suggestion {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
gap: 1rem;
border-bottom: 1px solid var(--border-light);
}
.b2b-suggestion:last-child { border-bottom: none; }
.b2b-suggestion:hover { background: #fcfcfc; }
.b2b-suggestion-link {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
text-decoration: none;
color: inherit;
min-width: 0;
}
.b2b-suggestion-link:hover { text-decoration: none; }
.b2b-suggestion-link img {
width: 44px;
height: 44px;
object-fit: contain;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 2px;
}
.b2b-suggestion-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.b2b-suggestion-info strong {
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #1d1d1f;
}
.b2b-suggestion-info small {
font-size: 0.75rem;
color: var(--apple-muted);
}
.b2b-suggestion-price {
font-weight: 600;
font-size: 0.9375rem;
color: #1d1d1f;
white-space: nowrap;
}
.b2b-suggestion-order {
display: flex;
align-items: center;
gap: 0.35rem;
}
.b2b-suggestion-order input {
width: 50px;
height: 32px;
padding: 0 0.5rem;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
font-size: 0.875rem;
}
.b2b-add {
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 0 0.75rem;
height: 32px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.b2b-add:hover { background: var(--primary-hover); }
@media (max-width: 768px) {
body:not(:has(.admin-shell)) .b2b-products-toolbar {
min-height: 54px;
padding: 8px 10px;
}
body:not(:has(.admin-shell)) .b2b-products-toolbar .catalog-sort {
width: 100%;
justify-content: space-between;
}
body:not(:has(.admin-shell)) .b2b-products-toolbar .catalog-sort select {
min-width: 0;
max-width: min(72%, 280px);
}
.b2b-table, .b2b-table tbody { display: block; width: 100%; min-width: 0; }
.b2b-table thead { display: none; }
.b2b-table tr {
display: block;
padding: 0.75rem;
position: relative;
border-bottom: 5px solid var(--apple-bg);
}
.b2b-table td {
display: block;
padding: 0;
border: none;
width: 100% !important;
}
.col-img {
position: absolute;
top: 0.85rem;
left: 0.75rem;
width: 56px !important;
}
.b2b-img-wrap { width: 56px; height: 56px; }
.col-product {
padding-left: 68px !important;
margin-bottom: 0.4rem;
min-height: 56px;
}
.b2b-prod-models { white-space: normal; max-width: none; }
.col-stock {
padding-left: 68px !important;
margin-bottom: 0.25rem;
}
.col-price {
padding-left: 68px !important;
font-size: 1rem;
margin-bottom: 0.4rem;
}
.col-order {
padding-left: 68px !important;
}
.b2b-order-controls {
width: auto;
max-width: 126px;
gap: 6px;
}
.b2b-qty-input { flex: 0 0 66px; width: 66px; max-width: 66px; height: 40px; font-size: 1rem; }
.b2b-add-btn { flex: 0 0 48px; width: 48px; height: 40px; }
.b2b-suggestion {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
}
.b2b-suggestion-link { grid-column: 1 / -1; width: auto; }
.b2b-suggestion-info strong { white-space: normal; overflow-wrap: anywhere; }
.b2b-suggestion-price { margin: 0; min-width: 0; white-space: normal; }
.b2b-suggestion-order { margin: 0; min-width: 0; justify-content: flex-end; gap: 0.35rem; }
.b2b-suggestion-order input { flex: 0 0 48px; width: 48px; min-width: 0; height: 40px; font-size: 16px; }
.b2b-suggestion-order .b2b-add { flex: 0 0 auto; width: auto; min-width: 0; height: 40px; padding: 0 0.6rem; white-space: nowrap; letter-spacing: normal; }
.b2b-suggestion > .b2b-row-feedback { grid-column: 1 / -1; min-width: 0; }
.b2b-search-results .smart-search-context {
display: grid;
grid-template-columns: 1fr auto;
}
.b2b-search-results .smart-search-understood { grid-column: 1 / -1; margin-right: 0; }
body:not(:has(.admin-shell)) .instant-home .instant-category-options { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
}
.b2b-search-results[role="dialog"] {
top: calc(100% + 14px);
left: -12px;
right: auto;
width: min(960px, calc(100vw - 48px));
max-height: min(68vh, 660px);
margin-top: 0;
padding: 0;
overflow-y: auto;
overscroll-behavior: contain;
border: 2px solid #77aef0;
border-radius: 18px;
box-shadow: 0 24px 70px rgba(20, 54, 96, 0.24), 0 6px 20px rgba(20, 54, 96, 0.12);
scrollbar-color: #3580d8 #eaf2fb;
scrollbar-width: auto;
transform-origin: top center;
}
.b2b-search-results[role="dialog"]::-webkit-scrollbar { width: 14px; }
.b2b-search-results[role="dialog"]::-webkit-scrollbar-track { background: #eaf2fb; border-radius: 0 16px 16px 0; }
.b2b-search-results[role="dialog"]::-webkit-scrollbar-thumb { background: #3580d8; border: 3px solid #eaf2fb; border-radius: 999px; }
.b2b-search-results.search-popout-enter { animation: search-popout-enter .28s cubic-bezier(.2,.82,.28,1) both; }
@keyframes search-popout-enter {
from { opacity: 0; transform: translateY(-8px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.search-popout-active .lp-search-field,
.search-popout-active.catalog-smart-form .catalog-smart-field,
.search-popout-active .catalog-smart-field {
border: 2px solid transparent;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(100deg, #1677ff, #7c3aed, #ec4899, #f59e0b, #10b981, #1677ff) border-box;
background-size: 100% 100%, 300% 100%;
box-shadow: 0 0 0 5px rgba(31, 111, 235, .12), 0 12px 34px rgba(27, 92, 172, .18);
animation: active-search-rainbow 2.4s linear infinite;
}
@keyframes active-search-rainbow {
to { background-position: 0 0, 300% 0; }
}
.b2b-search-results .suggestion-group-title {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 62px;
padding: 10px 14px 10px 18px;
border-bottom: 1px solid #dce6f2;
background: rgba(248, 251, 255, .97);
backdrop-filter: blur(12px);
}
.b2b-search-results .suggestion-group-title > span { display: grid; gap: 2px; }
.b2b-search-results .suggestion-group-title strong { color: #17283d; font-size: 14px; letter-spacing: 0; text-transform: none; }
.b2b-search-results .suggestion-group-title small { color: #68778b; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.search-popout-close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid #cedaea;
border-radius: 50%;
background: #fff;
color: #40516a;
cursor: pointer;
font-size: 24px;
line-height: 1;
}
.search-popout-close:hover { border-color: #76a9e6; background: #edf5ff; color: #145cae; }
.search-scroll-cue {
position: sticky;
bottom: 50px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: max-content;
max-width: calc(100% - 32px);
margin: -42px auto 8px;
padding: 7px 13px;
border: 1px solid #b8d5f6;
border-radius: 999px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 5px 18px rgba(24, 78, 143, .18);
color: #175fae;
font-size: 11px;
font-weight: 700;
pointer-events: none;
}
.search-scroll-cue[hidden] { display: none; }
.search-scroll-cue svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
animation: search-cue-bounce .9s ease-in-out infinite alternate;
}
@keyframes search-cue-bounce { to { transform: translateY(3px); } }
.b2b-search-results .suggestion-footer {
position: sticky;
bottom: 0;
z-index: 5;
min-height: 50px;
padding: 14px 18px;
border-top: 1px solid #d7e3f1;
background: #edf5ff;
color: #145cae;
font-weight: 700;
}
.b2b-suggestion:has(.b2b-suggestion-link:focus-visible),
.b2b-suggestion:has(.b2b-suggestion-link.is-active) {
background: #edf5ff;
box-shadow: inset 4px 0 #2878d0;
}
@media (max-width: 760px) {
body.search-popout-mobile-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 2998;
background: rgba(10, 25, 45, .34);
backdrop-filter: blur(2px);
}
.b2b-search-results[role="dialog"] {
position: fixed;
top: max(10px, env(safe-area-inset-top));
right: 10px;
bottom: 10px;
left: 10px;
z-index: 2999;
width: auto;
max-height: none;
border-radius: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.b2b-search-results.search-popout-enter,
.search-popout-active .lp-search-field,
.search-popout-active.catalog-smart-form .catalog-smart-field,
.search-popout-active .catalog-smart-field,
.search-scroll-cue svg { animation: none; }
}
body:not(:has(.admin-shell)) .model-part-search {
display: grid;
grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
align-items: center;
gap: 18px;
margin: 0 0 10px;
padding: 14px 16px;
border: 1px solid #bfd5f0;
border-radius: 10px;
background: linear-gradient(110deg, #f3f8ff, #fff);
box-shadow: 0 4px 16px rgba(32, 91, 157, .08);
}
body:not(:has(.admin-shell)) .model-part-search-copy {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
body:not(:has(.admin-shell)) .model-part-search-icon {
display: grid;
flex: 0 0 38px;
place-items: center;
width: 38px;
height: 38px;
border-radius: 9px;
background: #e2efff;
color: #1765be;
}
body:not(:has(.admin-shell)) .model-part-search-icon svg { width: 20px; height: 20px; }
body:not(:has(.admin-shell)) .model-part-search h2 {
margin: 0 0 2px;
color: #17283d;
font-size: 14px;
line-height: 1.3;
}
body:not(:has(.admin-shell)) .model-part-search p {
margin: 0;
color: #617188;
font-size: 11px;
line-height: 1.4;
}
body:not(:has(.admin-shell)) .model-part-search-form {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
body:not(:has(.admin-shell)) .model-part-search-form > .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;
}
body:not(:has(.admin-shell)) .model-part-search-field {
display: flex;
flex: 1;
align-items: center;
min-width: 0;
min-height: 44px;
padding-left: 12px;
border: 1px solid #aebfd4;
border-radius: 8px;
background: #fff;
box-shadow: inset 0 1px 2px rgba(20, 45, 75, .04);
}
body:not(:has(.admin-shell)) .model-part-search-field:focus-within {
border-color: #2878d0;
box-shadow: 0 0 0 3px rgba(40, 120, 208, .14);
}
body:not(:has(.admin-shell)) .model-part-search-field > svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
color: #6c7d92;
}
body:not(:has(.admin-shell)) .model-part-search-field input {
flex: 1;
min-width: 0;
height: 42px;
padding: 0 10px;
border: 0;
outline: 0;
background: transparent;
color: #17283d;
font: inherit;
font-size: 13px;
}
body:not(:has(.admin-shell)) .model-part-search-field button {
align-self: stretch;
margin: 4px;
padding: 0 14px;
border: 0;
border-radius: 6px;
background: #2878d0;
color: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
body:not(:has(.admin-shell)) .model-part-search-field button:hover { background: #1765b9; }
body:not(:has(.admin-shell)) .model-part-search-clear {
flex: 0 0 auto;
color: #52657c;
font-size: 11px;
font-weight: 650;
}
@media (max-width: 900px) {
body:not(:has(.admin-shell)) .model-part-search {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media (max-width: 560px) {
body:not(:has(.admin-shell)) .model-part-search { padding: 13px; }
body:not(:has(.admin-shell)) .model-part-search-form { align-items: stretch; flex-direction: column; }
body:not(:has(.admin-shell)) .model-part-search-field {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
min-height: 46px;
padding: 8px 10px 10px;
}
body:not(:has(.admin-shell)) .model-part-search-field input { width: 100%; padding-right: 0; }
body:not(:has(.admin-shell)) .model-part-search-field button {
grid-column: 1 / -1;
min-height: 40px;
margin: 4px 0 0;
padding: 0 10px;
}
body:not(:has(.admin-shell)) .model-part-search-clear { align-self: flex-start; padding: 3px 0; }
}
body:not(:has(.admin-shell)) .app-header .header-inner {
height: 72px;
gap: 24px;
}
body:not(:has(.admin-shell)) .app-header .logo {
flex-shrink: 0;
}
body:not(:has(.admin-shell)) .app-header .logo img {
display: block;
height: 46px;
width: auto;
}
body:not(:has(.admin-shell)) .app-header .search-bar {
flex: 1;
min-width: 120px;
max-width: 640px;
margin: 0;
}
body:not(:has(.admin-shell)) .app-header .search-input-wrapper:hover {
border-color: #c6cedb;
}
body:not(:has(.admin-shell)) .app-header .search-input-wrapper:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}
body:not(:has(.admin-shell)) .app-header .search-icon {
flex-shrink: 0;
margin: 0;
color: #98a2b3;
}
body:not(:has(.admin-shell)) .app-header #search-input {
flex: 1;
min-width: 0;
padding: 0;
border: none;
background: transparent;
outline: none;
font-size: .9375rem;
color: var(--text-main);
}
body:not(:has(.admin-shell)) .app-header #search-input::placeholder {
color: #98a2b3;
}
body:not(:has(.admin-shell)) .app-header #search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
body:not(:has(.admin-shell)):has(.lp) .app-header .search-bar,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .search-bar {
display: none;
}
body:not(:has(.admin-shell)) .app-header .page-search-jump {
display: none;
}
body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 112px;
height: 40px;
margin-left: auto;
padding: 0 18px;
border: 1px solid #d7e2ef;
border-radius: 999px;
background: #f7faff;
color: #1768c5;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 1px 2px rgba(21, 58, 103, .04);
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump:hover,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump:hover {
background: #edf5ff;
border-color: #b7cdea;
}
body:not(:has(.admin-shell)) .app-header .page-search-jump:active { transform: scale(.98); }
body:not(:has(.admin-shell)) .app-header .page-search-jump:focus-visible { outline: 2px solid #2878ed; outline-offset: 2px; }
body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
margin-left: 4px;
}
body:not(:has(.admin-shell)) .catalog-smart-search {
position: relative;
display: grid;
grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
align-items: center;
gap: 18px;
margin: 0 0 18px;
padding: 14px;
border: 1px solid transparent;
border-radius: 14px;
background:
linear-gradient(135deg, #f8fbff, #fff) padding-box,
linear-gradient(105deg, #78baf0 0%, #9a91e6 28%, #dea0cb 52%, #efb184 75%, #7ac9ce 100%) border-box;
box-shadow: 0 10px 28px rgba(48, 83, 130, .09);
}
body:not(:has(.admin-shell)) .catalog-smart-search[hidden] {
display: none;
}
body:not(:has(.admin-shell)) .catalog-smart-intro {
display: flex;
flex-direction: column;
gap: 2px;
}
body:not(:has(.admin-shell)) .catalog-smart-intro strong { font-size: 14px; color: #172033; }
body:not(:has(.admin-shell)) .catalog-smart-intro span { font-size: 12px; color: #69778b; line-height: 1.35; }
body:not(:has(.admin-shell)) .catalog-smart-form { position: relative; min-width: 0; }
body:not(:has(.admin-shell)) .catalog-smart-field {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 50px;
padding: 5px 5px 5px 15px;
border: 1px solid transparent;
border-radius: 11px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(105deg, #8bc5f0, #aca1eb 32%, #e4adcf 57%, #f0bb91 79%, #8bd3d3) border-box;
box-shadow: 0 4px 14px rgba(31, 75, 128, .08);
}
body:not(:has(.admin-shell)) .catalog-smart-field:focus-within {
box-shadow:
0 0 0 4px rgba(122, 145, 229, .12),
0 8px 24px rgba(45, 84, 140, .13);
}
body:not(:has(.admin-shell)) .catalog-smart-field > svg { width: 20px; color: #728197; }
body:not(:has(.admin-shell)) .catalog-smart-field input {
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 14px;
}
body:not(:has(.admin-shell)) .catalog-smart-field button {
min-height: 40px;
padding: 0 18px;
border: 0;
border-radius: 8px;
background: #2878ed;
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
body:not(:has(.admin-shell)) .catalog-smart-search .b2b-search-results[role="dialog"] { top: calc(100% + 5px); }
@media (max-width: 720px) {
body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump {
min-width: 94px;
height: 38px;
padding: 0 13px;
}
body:not(:has(.admin-shell)) .catalog-smart-search { grid-template-columns: 1fr; gap: 9px; padding: 11px; }
body:not(:has(.admin-shell)) .catalog-smart-intro span { display: none; }
body:not(:has(.admin-shell)) .catalog-smart-field { grid-template-columns: 20px minmax(0, 1fr); padding: 7px 10px; }
body:not(:has(.admin-shell)) .catalog-smart-field button { grid-column: 1 / -1; width: 100%; }
}
body:not(:has(.admin-shell)) .app-header .user-nav {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
body:not(:has(.admin-shell)) .app-header .nav-account-menu {
position: relative;
flex: 0 0 auto;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown {
position: absolute;
z-index: 110;
top: 100%;
right: 0;
display: grid;
width: min(230px, calc(100vw - 24px));
padding: 6px;
border: 1px solid #dfe5ed;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 30px rgba(20, 36, 60, .14);
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown[hidden] { display: none; }
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown a,
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown button {
display: block;
width: 100%;
padding: 10px 12px;
border: 0;
border-radius: 6px;
background: transparent;
color: #34465e;
font: inherit;
font-size: 13px;
text-align: left;
text-decoration: none;
cursor: pointer;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown a:hover,
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown button:hover {
background: #f3f8ff;
color: #1768c5;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown a:focus-visible,
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown button:focus-visible {
outline: 2px solid #2878ed;
outline-offset: -2px;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown .nav-account-logout {
border-top: 1px solid #e7ebf0;
border-radius: 0 0 6px 6px;
}
body:not(:has(.admin-shell)) .test-banner .language-control {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
height: 24px;
margin: 0;
padding: 0 3px 0 5px;
border: 0;
border-radius: 4px;
background: transparent;
color: #f5f5f7;
box-shadow: none;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body:not(:has(.admin-shell)) .test-banner .language-control:hover {
background: rgba(255,255,255,.1);
}
body:not(:has(.admin-shell)) .test-banner .language-control:focus-within {
box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
body:not(:has(.admin-shell)) .test-banner .language-control > label.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body:not(:has(.admin-shell)) .test-banner .language-control__icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: currentColor;
}
body:not(:has(.admin-shell)) .test-banner .language-control select {
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
color: #f5f5f7;
font: inherit;
font-size: 11px;
font-weight: 750;
letter-spacing: .04em;
line-height: 24px;
cursor: pointer;
outline: none;
}
body:not(:has(.admin-shell)) .test-banner .language-control select option {
color: #1d1d1f;
}
body:not(:has(.admin-shell)) .test-banner .language-control__chevron {
width: 10px;
height: 10px;
flex: 0 0 auto;
color: currentColor;
pointer-events: none;
}
@media (max-width: 640px) {
body:not(:has(.admin-shell)) .test-banner {
justify-content: center;
padding: 5px 8px 5px 12px;
font-size: 10px;
line-height: 1.25;
text-align: center;
}
body:not(:has(.admin-shell)) .test-banner > span {
justify-self: center;
}
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px;
border-radius: 999px;
font-size: .875rem;
font-weight: 500;
color: var(--text-main);
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-link:hover {
background: #f1f4f9;
text-decoration: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid #dfe5ed;
border-radius: 999px;
background: #fff;
color: #34465e;
box-shadow: 0 1px 2px rgba(20, 36, 60, .04);
cursor: pointer;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action:hover {
border-color: #bcd2ed;
background: #f3f8ff;
color: #1768c5;
transform: translateY(-1px);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signout-action:hover {
border-color: #edc5c8;
background: #fff5f5;
color: #b4232d;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action:active {
transform: translateY(0) scale(.97);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action:focus-visible {
outline: 2px solid #2878ed;
outline-offset: 2px;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart {
flex-direction: row;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 14px 0 12px;
border: 1px solid #dfe5ed;
border-radius: 999px;
background: #fff;
color: #34465e;
font-size: .875rem;
font-weight: 600;
line-height: 1;
box-shadow: 0 1px 2px rgba(20, 36, 60, .04);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart:hover {
border-color: #bcd2ed;
background: #f3f8ff;
color: #1768c5;
transform: translateY(-1px);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart:active {
transform: translateY(0) scale(.98);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart:focus-visible {
outline: 2px solid #2878ed;
outline-offset: 2px;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart .cart-icon-wrapper {
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart .nav-text {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: nowrap;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin {
height: 40px;
padding: 0 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #344054;
font-weight: 600;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin:hover {
border-color: transparent;
background: transparent;
color: var(--primary);
text-decoration: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin svg {
flex: none;
transition: transform .15s ease;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin:hover svg {
transform: translateY(-1px);
}
body:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
height: 40px;
padding: 0 22px;
font-size: .875rem;
font-weight: 600;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
body:not(:has(.admin-shell)) .store-mega-menu {
background: #f5f8fc;
border-top: 1px solid #edf1f6;
border-bottom: 1px solid #dbe3ed;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .9),
0 2px 5px rgba(28, 50, 82, .035);
position: relative;
z-index: 900;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .search-bar {
display: none;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .page-search-jump {
display: inline-flex;
align-items: center;
justify-content: center;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .header-inner {
justify-content: flex-start;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .user-nav {
margin-left: 4px;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .page-search-jump:hover {
background: #edf5ff;
border-color: #b7cdea;
}
@media (max-width: 768px) {
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .page-search-jump {
width: 100%;
min-width: 0;
height: 42px;
justify-self: stretch;
border-color: transparent;
background:
linear-gradient(#f8fbff, #f8fbff) padding-box,
linear-gradient(102deg, #84aef7, #8ebcf0 42%, #c6a6ee 70%, #ef9b93) border-box;
}
}
body:not(:has(.admin-shell)) .store-mega-menu > .container {
position: relative;
width: calc(100% - 48px);
}
#store-menu [hidden] {
display: none !important;
}
#store-menu :is(button, a, input):focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
#store-menu .b2b-menu-error {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 12px 0;
font-size: 13px;
}
body:not(:has(.admin-shell)) .b2b-nav-skeleton {
display: flex;
gap: 1rem;
padding: 0.5rem 1rem;
}
body:not(:has(.admin-shell)) .b2b-skeleton-item {
width: 80px;
height: 20px;
background: #f0f0f0;
border-radius: 4px;
animation: pulse 1.5s infinite;
}
body:not(:has(.admin-shell)) .b2b-top-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
gap: 0 6px;
}
body:not(:has(.admin-shell)) .b2b-top-nav-immediate {
opacity: .92;
}
body:not(:has(.admin-shell)) .b2b-nav-link {
display: flex;
align-items: center;
min-height: 44px;
gap: 8px;
padding: 0.6rem 1.1rem;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
color: #28384d;
background: transparent;
border: 0;
border-radius: 10px;
white-space: nowrap;
cursor: pointer;
border-bottom: 0;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-nav-icon {
flex: 0 0 auto;
color: #31516f;
}
body:not(:has(.admin-shell)) .b2b-nav-all {
margin: 5px 4px 5px 0;
min-height: 34px;
padding-block: 0;
color: #1670d5;
background: #edf6ff;
}
body:not(:has(.admin-shell)) .b2b-nav-item.has-dropdown {
display: flex;
align-items: center;
flex-wrap: wrap;
}
body:not(:has(.admin-shell)) .b2b-nav-link.is-linked {
padding-right: 4px;
}
body:not(:has(.admin-shell)) .b2b-nav-caret {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
width: 28px;
padding: 0;
font: inherit;
color: #5f7188;
background: transparent;
border: 0;
border-bottom: 0;
cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-link,
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-caret,
body:not(:has(.admin-shell)) .b2b-nav-item.has-dropdown:hover > .b2b-nav-link,
body:not(:has(.admin-shell)) .b2b-nav-item.has-dropdown:hover > .b2b-nav-caret,
body:not(:has(.admin-shell)) .b2b-nav-link:hover {
color: var(--primary);
background: #eef6ff;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-link,
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-caret {
color: #075ead;
background: #eaf3ff;
border-bottom-color: #075ead;
box-shadow: inset 0 3px 0 #075ead;
}
@media (min-width: 769px) {
body:not(:has(.admin-shell)):has(.b2b-nav-item.is-open) .app-header {
position: relative;
}
}
body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 18px 44px rgba(16, 55, 96, 0.2);
border-bottom: 1px solid var(--border-light);
z-index: 1000;
height: auto;
min-height: 0;
border: 2px solid #2b7dcc;
border-top-width: 3px;
border-radius: 0 0 8px 8px;
box-sizing: border-box;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-dropdown-overlay {
display: flex;
}
body:not(:has(.admin-shell)) .b2b-mega-layout {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
margin: 0 auto;
height: auto;
}
body:not(:has(.admin-shell)) .b2b-mega-families {
width: 100%;
flex: 0 0 auto;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 36px;
background: #f8fafc;
border-right: 0;
border-bottom: 1px solid var(--border-light);
align-items: center;
gap: 10px;
overflow-x: hidden;
overflow-y: hidden;
padding: 10px 20px;
scrollbar-width: none;
scroll-behavior: auto;
touch-action: pan-y;
}
body:not(:has(.admin-shell)) .b2b-mega-families::-webkit-scrollbar { display: none; }
body:not(:has(.admin-shell)) .b2b-family-slider-viewport { min-width:0; overflow:hidden; }
body:not(:has(.admin-shell)) .b2b-family-slider-arrow {
display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #d4dfec;border-radius:50%;
background:#fff;color:#1e5f9e;cursor:pointer;box-shadow:0 2px 8px rgba(26,75,126,.08);
}
body:not(:has(.admin-shell)) .b2b-family-slider-arrow:hover { border-color:#76a9e2;background:#edf5ff; }
body:not(:has(.admin-shell)) .b2b-family-slider-arrow:focus-visible { outline:2px solid #2b7dcc;outline-offset:2px; }
body:not(:has(.admin-shell)) .b2b-family-slider-arrow svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
body:not(:has(.admin-shell)) .b2b-mega-families.is-static { grid-template-columns:minmax(0,1fr); }
body:not(:has(.admin-shell)) .b2b-mega-families.is-static .b2b-family-slider-arrow { display:none; }
body:not(:has(.admin-shell)) .b2b-mega-families.is-static .b2b-family-slider-viewport { overflow:visible; }
body:not(:has(.admin-shell)) .b2b-family-row {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
body:not(:has(.admin-shell)) .b2b-family-link {
flex: 1 1 auto;
display: flex;
align-items: center;
min-height: 40px;
padding: 0.5rem 0.25rem 0.5rem 1.25rem;
font-size: 0.8125rem;
font-weight: 500;
color: #1d1d1f;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-family-btn {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
min-height: 38px;
padding: 7px 14px;
background: #fff;
border: 1px solid #dce3ed;
border-radius: 999px;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
color: #34465e;
white-space: nowrap;
cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-family-row:hover,
body:not(:has(.admin-shell)) .b2b-family-row:focus-within {
background: transparent;
}
body:not(:has(.admin-shell)) .b2b-family-row.active {
background: transparent;
box-shadow: none;
}
body:not(:has(.admin-shell)) .b2b-family-row.active .b2b-family-link,
body:not(:has(.admin-shell)) .b2b-family-row.active .b2b-family-btn,
body:not(:has(.admin-shell)) .b2b-family-link:hover {
font-weight: 600;
color: var(--primary);
border-color: #9fc3f3;
background: #edf5ff;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-mega-models {
flex: 0 0 auto;
min-width: 0;
padding: 10px 20px 18px;
overflow: visible;
background: #fff;
}
body:not(:has(.admin-shell)) .b2b-mega-heading {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
position: sticky;
top: 0;
z-index: 4;
background: #fff;
}
body:not(:has(.admin-shell)) :is(.b2b-menu-close, .b2b-menu-back, .b2b-menu-retry) {
flex: 0 0 auto;
align-self: flex-start;
border: 1px solid #dbe2eb;
border-radius: 4px;
background: #fff;
color: #48617e;
padding: 7px 11px;
min-height: 32px;
font: inherit;
font-size: 12px;
cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-menu-back {
display: none;
}
body:not(:has(.admin-shell)) .b2b-model-search-wrap {
display: block;
position: relative;
width: 100%;
max-width: 420px;
}
body:not(:has(.admin-shell)) .b2b-model-search-wrap > span {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
body:not(:has(.admin-shell)) .b2b-model-status {
margin: 0 0 8px;
color: #64748b;
font-size: 12px;
}
body:not(:has(.admin-shell)) .b2b-family-all {
display: flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-size: 12.5px;
font-weight: 600;
min-height: 36px;
padding: 8px 0 0;
margin-top: 10px;
color: var(--primary);
border-top: 1px solid #edf0f5;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-family-all:hover {
text-decoration: underline;
}
body:not(:has(.admin-shell)) .b2b-family-all small {
font-weight: 500;
color: #64748b;
}
body:not(:has(.admin-shell)) .b2b-mega-brands {
padding: 0 0 8px;
margin-bottom: 8px;
border-bottom: 1px solid #dfe5ee;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body:not(:has(.admin-shell)) .b2b-brand-families.active {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 8px;
width: max-content;
min-width: 100%;
}
body:not(:has(.admin-shell)) .b2b-brand-btn {
padding: 7px 9px;
min-height: 34px;
font: inherit;
font-size: 12px;
background: #fff;
color: #344b66;
border: 1px solid #d9e1ed;
border-radius: 4px;
cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-brand-btn.active {
border-color: var(--primary);
color: var(--primary);
background: #edf5ff;
}
body:not(:has(.admin-shell)) .b2b-model-search {
width: 100%;
max-width: 360px;
height: 44px;
padding: 8px 11px;
margin: 0;
font: inherit;
font-size: 13px;
background: #fff;
border: 2px solid #70a8e4;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(26, 91, 163, .08);
}
body:not(:has(.admin-shell)) .b2b-mega-view-all {
font-size: 0.8125rem;
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
body:not(:has(.admin-shell)) .b2b-mega-view-all:hover {
text-decoration: underline;
}
body:not(:has(.admin-shell)) .b2b-models-grid {
display: none;
}
body:not(:has(.admin-shell)) .b2b-models-grid.active {
display: flex;
flex-direction: column;
min-width: 0;
}
body:not(:has(.admin-shell)) .b2b-model-links {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
gap: 2px 16px;
align-content: start;
}
body:not(:has(.admin-shell)) .b2b-model-series {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
align-items: start;
gap: 10px;
}
body:not(:has(.admin-shell)) .b2b-model-series-group {
min-width: 0;
padding: 0;
border: 1px solid #e4e9f0;
border-radius: 8px;
background: #fbfcfe;
}
body:not(:has(.admin-shell)) .b2b-model-series-group[open] { grid-column: span 1; border-color: #a9c9eb; box-shadow: 0 4px 12px rgba(24, 89, 168, .07); }
body:not(:has(.admin-shell)) .b2b-model-series-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 9px 11px; list-style: none; cursor: pointer; color: #26384d; font-size: 13px; font-weight: 700; }
body:not(:has(.admin-shell)) .b2b-model-series-group > summary::after{content:none;display:none}
body:not(:has(.admin-shell)) .b2b-model-series-group > summary::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .b2b-model-series-group:not([open]) > .b2b-series-body { display: none; }
body:not(:has(.admin-shell)) .b2b-model-series-group > summary small { padding: 2px 6px; border-radius: 999px; background: #e9f2fc; color: #557698; font-size: 10px; }
body:not(:has(.admin-shell)) .b2b-model-series-group[open] > summary { border-bottom: 1px solid #e1e8f0; background: #eff6ff; color: #155fae; }
body:not(:has(.admin-shell)) .b2b-model-series-group[open] > summary::after { transform: rotate(-90deg); }
body:not(:has(.admin-shell)) .b2b-series-body { padding: 7px; }
body:not(:has(.admin-shell)) .b2b-series-more {
display: inline-block;
margin: 5px 3px 1px;
padding: 2px 0;
border: 0;
background: transparent;
color: var(--primary);
font: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-series-more:hover,
body:not(:has(.admin-shell)) .b2b-series-more:focus-visible {
text-decoration: underline;
}
body:not(:has(.admin-shell)) .b2b-model-series-group h4 {
display: flex;
align-items: baseline;
gap: 7px;
margin: 0 0 5px;
padding: 0 2px 8px;
border-bottom: 1px solid #e5eaf1;
color: #26384d;
font-size: 0.8125rem;
font-weight: 700;
}
body:not(:has(.admin-shell)) .b2b-model-series-group .b2b-model-links {
display: flex;
flex-direction: column;
gap: 1px;
max-height: none;
overflow-y: visible;
overscroll-behavior: auto;
}
body:not(:has(.admin-shell)) .b2b-model-series-group .b2b-model-link {
flex: 0 0 auto;
min-height: 31px;
padding: 4px 3px;
}
body:not(:has(.admin-shell)) .b2b-model-series-group h4 small {
color: #7b8798;
font-size: 0.6875rem;
font-weight: 500;
}
body:not(:has(.admin-shell)) .b2b-model-link {
font-size: 0.8125rem;
color: #1d1d1f;
text-decoration: none;
display: flex;
align-items: center;
min-height: 34px;
padding: 5px 8px;
line-height: 1.4;
border-radius: 4px;
white-space: normal;
overflow-wrap: anywhere;
}
body:not(:has(.admin-shell)) .b2b-model-expand {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
padding: 7px 11px;
margin-top: 12px;
border: 1px solid #cfe0f4;
border-radius: 6px;
background: #f4f8fd;
color: #1768bd;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-model-expand:hover {
border-color: #9fc2e8;
background: #eaf3fd;
}
body:not(:has(.admin-shell)) .b2b-model-link:hover {
color: var(--primary);
background: #f0f6ff;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-model-link[aria-current="page"] {
background: #e9f2ff;
color: var(--primary);
font-weight: 600;
}
body:not(:has(.admin-shell)) .b2b-mega-accessories {
display: flex;
flex-wrap: wrap;
align-content: start;
gap: 8px 24px;
padding: 24px;
width: 100%;
overflow: auto;
}
body:not(:has(.admin-shell)) .b2b-acc-group {
min-width: 220px;
}
body:not(:has(.admin-shell)) .b2b-acc-group h4 {
font-size: 0.8125rem;
text-transform: uppercase;
color: var(--apple-muted);
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
border-bottom: 1px solid var(--border-light);
padding-bottom: 0.25rem;
}
body:not(:has(.admin-shell)) .b2b-acc-link {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #1d1d1f;
padding: 0.25rem 0;
text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-acc-link:hover {
color: var(--primary);
}
body:not(:has(.admin-shell)) .b2b-mobile-toggle {
display: none;
}
body:not(:has(.admin-shell)) .mobile-chevron {
display: block;
width: 12px;
opacity: 0.55;
}
@media (max-width: 960px) {
body:not(:has(.admin-shell)) .app-header .header-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
height: auto;
gap: 10px;
padding-block: 12px;
}
body:not(:has(.admin-shell)) .app-header .logo {
grid-column: 1;
grid-row: 1;
}
body:not(:has(.admin-shell)) .app-header .logo img {
height: 30px;
}
body:not(:has(.admin-shell)) .app-header .user-nav {
grid-column: 2;
grid-row: 1;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
body:not(:has(.admin-shell)) .app-header .search-bar {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
min-width: 0;
max-width: none;
}
}
@media (max-width: 768px) {
body:not(:has(.admin-shell)) .b2b-mobile-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: #1d1d1f;
cursor: pointer;
width: 100%;
text-align: left;
}
body:not(:has(.admin-shell)) .mobile-chevron {
display: block;
transition: transform 0.2s;
}
body:not(:has(.admin-shell)) .b2b-top-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
max-height: none;
max-width: 100%;
overflow-x: hidden;
overflow-y: visible;
background: #fff;
box-shadow: 0 12px 24px #14233b26;
border-top: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .store-mega-menu > .container {
width: calc(100% - 24px);
}
body:not(:has(.admin-shell)) .b2b-top-nav.mobile-open {
display: flex;
}
body:not(:has(.admin-shell)) .b2b-nav-item {
border-bottom: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .b2b-nav-link {
width: 100%;
padding: 0.8rem 1rem;
justify-content: flex-start;
}
body:not(:has(.admin-shell)) .b2b-nav-link .mobile-chevron {
margin-left: auto;
}
body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
position: static;
display: none;
height: auto;
box-shadow: none;
border-top: 1px solid var(--border-light);
border-bottom: none;
padding: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-dropdown-overlay {
display: flex;
flex-direction: column;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-link .mobile-chevron {
transform: rotate(180deg);
}
body:not(:has(.admin-shell)) .b2b-mega-layout {
flex-direction: column;
height: auto;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
body:not(:has(.admin-shell)) .b2b-mega-families {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 6px;
height: auto;
max-height: 200px;
border-right: none;
border-bottom: 1px solid var(--border-light);
padding: 10px;
}
body:not(:has(.admin-shell)) .b2b-family-row {
flex: 1 1 140px;
border: 1px solid #dce3eb;
border-radius: 4px;
background: #fff;
}
body:not(:has(.admin-shell)) .b2b-family-row.active {
border-color: var(--primary);
background: #edf5ff;
box-shadow: none;
}
body:not(:has(.admin-shell)) .b2b-family-link {
min-height: 38px;
padding: 8px 6px 8px 10px;
}
body:not(:has(.admin-shell)) .b2b-family-btn {
flex: 1 1 auto;
width: 100%;
min-height: 38px;
padding: 8px 10px;
border: 0;
border-radius: 4px;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-dropdown-overlay {
flex: 1 0 100%;
}
body:not(:has(.admin-shell)) .b2b-nav-link.is-linked {
width: auto;
flex: 1 1 auto;
}
body:not(:has(.admin-shell)) .b2b-nav-caret {
width: 48px;
min-height: 46px;
}
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-caret .mobile-chevron {
transform: rotate(180deg);
}
body:not(:has(.admin-shell)) .b2b-mega-models {
height: auto;
max-height: none;
padding: 1rem;
width: 100%;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
body:not(:has(.admin-shell)) .b2b-mega-heading {
position: static;
}
body:not(:has(.admin-shell)) .b2b-model-search-wrap,
body:not(:has(.admin-shell)) .b2b-model-search {
max-width: none;
}
body:not(:has(.admin-shell)) .b2b-model-series {
grid-template-columns: 1fr;
gap: 8px;
}
body:not(:has(.admin-shell)) .b2b-models-grid,
body:not(:has(.admin-shell)) .b2b-model-series,
body:not(:has(.admin-shell)) .b2b-model-series-group {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
body:not(:has(.admin-shell)) .b2b-model-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
}
body:not(:has(.admin-shell)) .b2b-model-link {
min-height: 40px;
}
body:not(:has(.admin-shell)) .b2b-brand-families.active {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body:not(:has(.admin-shell)) .b2b-mega-heading small {
display: block;
margin: 4px 0 0;
}
body:not(:has(.admin-shell)) .b2b-menu-back {
display: block;
margin-top: 14px;
}
}
@media (max-width: 768px) {
body:not(:has(.admin-shell)) .app-header .header-inner,
body:not(:has(.admin-shell)):has(.lp) .app-header .header-inner,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .header-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: 46px auto;
align-items: center;
gap: 10px 12px;
min-height: 0;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
}
body:not(:has(.admin-shell)) .app-header .logo {
grid-column: 1;
grid-row: 1;
min-width: 0;
justify-self: start;
}
body:not(:has(.admin-shell)) .app-header .logo img {
width: auto;
height: 42px;
max-width: min(100%, 190px);
}
body:not(:has(.admin-shell)) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
grid-column: 2;
grid-row: 1;
margin: 0;
min-width: 0;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 8px !important;
}
body:not(:has(.admin-shell)) .app-header .page-search-jump,
body:not(:has(.admin-shell)) .app-header .search-bar {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
max-width: none;
margin: 0 !important;
}
body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump {
width: 100%;
min-width: 0;
height: 42px;
justify-self: stretch;
border-color: transparent;
background:
linear-gradient(#f8fbff, #f8fbff) padding-box,
linear-gradient(105deg, #8bc5f0, #aca1eb 35%, #e4adcf 62%, #8bd3d3) border-box;
box-shadow: 0 3px 12px rgba(39, 83, 137, .07);
}
}
@media (max-width: 480px) {
body:not(:has(.admin-shell)) .app-header .header-inner,
body:not(:has(.admin-shell)):has(.lp) .app-header .header-inner,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .header-inner {
grid-template-columns: minmax(112px, 1fr) auto;
grid-template-rows: 40px auto;
gap: 8px;
padding-left: 12px;
padding-right: 12px;
}
body:not(:has(.admin-shell)) .app-header .logo {
grid-column: 1;
grid-row: 1;
}
body:not(:has(.admin-shell)) .app-header .logo img {
height: 40px;
max-width: min(100%, 170px);
}
body:not(:has(.admin-shell)) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
grid-column: 2;
grid-row: 1;
width: auto;
justify-content: flex-end;
overflow: visible;
}
body:not(:has(.admin-shell)) .app-header .nav-signin {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
border: 0;
border-radius: 999px;
background: transparent;
}
body:not(:has(.admin-shell)) .app-header .nav-signin span {
display: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-register {
min-width: 0;
max-width: 142px;
min-height: 40px;
padding: 0 10px;
overflow: hidden;
font-size: 12px;
font-weight: 650;
color: #1769aa;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #bdd1e5;
border-radius: 8px;
background: #f7fbff;
box-shadow: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-register:hover,
body:not(:has(.admin-shell)) .app-header .user-nav .nav-register:focus-visible {
color: #0f568f;
border-color: #82add3;
background: #edf6fd;
box-shadow: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-link {
min-width: 40px;
min-height: 40px;
}
body:not(:has(.admin-shell)) .app-header .page-search-jump,
body:not(:has(.admin-shell)) .app-header .search-bar {
grid-column: 1 / -1;
grid-row: 2;
}
}
@media (max-width: 240px) {
body:not(:has(.admin-shell)) .app-header .header-inner,
body:not(:has(.admin-shell)):has(.lp) .app-header .header-inner,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .header-inner {
grid-template-rows: 40px auto auto;
}
body:not(:has(.admin-shell)) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
grid-column: 1;
grid-row: 2;
width: 100%;
justify-content: flex-start;
}
body:not(:has(.admin-shell)) .app-header .page-search-jump,
body:not(:has(.admin-shell)) .app-header .search-bar {
grid-column: 1;
grid-row: 3;
}
body:not(:has(.admin-shell)) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
flex-wrap: wrap;
overflow: visible;
}
body:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
width: 100%;
max-width: none;
height: auto;
padding-block: 9px;
white-space: normal;
text-align: center;
text-overflow: clip;
}
body:not(:has(.admin-shell)) .app-header .search-input-wrapper {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
min-height: 0;
padding: 8px;
}
}
body[data-header-zoomed]:not(:has(.admin-shell)) .test-banner,
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header {
width: var(--header-visual-width);
max-width: var(--header-visual-width);
box-sizing: border-box;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .header-inner {
width: var(--header-visual-width);
margin-left: 0;
margin-right: auto;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 40px auto auto;
gap: 8px;
padding-left: 12px;
padding-right: 12px;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .logo {
grid-column: 1;
grid-row: 1;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .logo img {
height: 40px;
max-width: min(100%, 170px);
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .user-nav {
grid-column: 1;
grid-row: 2;
width: 100%;
min-width: 0;
margin: 0;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px !important;
overflow: visible;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .nav-signin {
width: 38px;
height: 38px;
padding: 0;
justify-content: center;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .nav-signin span {
display: none;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
width: 100%;
max-width: none;
height: auto;
min-height: 40px;
padding: 9px 8px;
white-space: normal;
text-align: center;
text-overflow: clip;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .page-search-jump,
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .search-bar {
grid-column: 1;
grid-row: 3;
width: 100%;
max-width: none;
margin: 0 !important;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .search-input-wrapper {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
min-height: 0;
padding: 8px;
}
body[data-header-zoomed]:not(:has(.admin-shell)) .store-mega-menu > .container {
width: calc(100% - 24px);
}
body:not(:has(.admin-shell)):has(.catalog-layout) .catalog-breadcrumb {
display: none;
}
body:not(:has(.admin-shell)):has(.catalog-layout) .catalog-heading {
display: none;
}
body:not(:has(.admin-shell)):has(.catalog-layout) .catalog-eyebrow {
display: none;
}
body:not(:has(.admin-shell)) .catalog-table-model {
color: var(--apple-text);
font-size: 14px;
letter-spacing: 0;
text-transform: none;
}
body:not(:has(.admin-shell)) .catalog-table-count {
margin-left: 8px;
color: var(--apple-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
body:not(:has(.admin-shell)) .catalog-refine-row {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 8px 16px;
padding: 8px 12px;
background: #fff;
border-radius: 6px;
margin-bottom: 10px;
border: 1px solid var(--border-light);
box-shadow: none;
}
body:not(:has(.admin-shell)) .catalog-tool-field {
font-size: 0.75rem;
color: var(--apple-muted);
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0;
}
body:not(:has(.admin-shell)) .catalog-tool-field select {
background: #fff;
border: 1px solid var(--border-light);
border-radius: 4px;
padding: 0.1rem 1.25rem 0.1rem 0.4rem;
font-size: 0.8125rem;
min-height: 32px;
color: #1d1d1f;
}
body:not(:has(.admin-shell)) .stock-shortcut,
body:not(:has(.admin-shell)) #open-catalog-filters {
min-height: 32px;
padding: 0 0.5rem;
font-size: 0.8125rem;
border-radius: 4px;
background: #fff;
border: 1px solid var(--border-light);
color: #1d1d1f;
cursor: pointer;
font-weight: 500;
}
body:not(:has(.admin-shell)) .stock-shortcut.active {
background: #1d1d1f;
color: #fff;
border-color: #1d1d1f;
}
body:not(:has(.admin-shell)) #open-catalog-filters:hover,
body:not(:has(.admin-shell)) .stock-shortcut:hover:not(.active) {
background: #e8e8ed;
}
body:not(:has(.admin-shell)) .active-filters {
display: flex;
gap: 0.35rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
body:not(:has(.admin-shell)) .filter-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #eef5ff;
border: 1px solid #cce0ff;
color: var(--primary);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
}
body:not(:has(.admin-shell)) .filter-chip span {
color: #8bb4e8;
font-weight: bold;
}
body:not(:has(.admin-shell)) .filter-chip:hover {
background: #dbeaff;
text-decoration: none;
}
body:not(:has(.admin-shell)) .clear-filters {
font-size: 0.75rem;
color: var(--apple-muted);
text-decoration: underline;
display: inline-flex;
align-items: center;
padding: 0.15rem 0.4rem;
}
body:not(:has(.admin-shell)) .catalog-sort {
display: flex;
align-items: center;
gap: 0.35rem;
}
body:not(:has(.admin-shell)) .catalog-sort select {
padding: 0.15rem 1.25rem 0.15rem 0.4rem;
font-size: 0.8125rem;
min-height: 32px;
width: auto;
max-width: 100%;
color: #25364d;
background: #fff;
line-height: normal;
border-radius: 4px;
border: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .catalog-price-notice {
background: #f1f6fd;
color: #3a5476;
padding: 0.4rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
margin-bottom: 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #dce7f5;
}
body:not(:has(.admin-shell)) .catalog-price-notice a {
font-weight: 600;
color: var(--primary);
}
body:not(:has(.admin-shell)) .part-type-picker {
margin-bottom: 1rem;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 0.75rem;
}
body:not(:has(.admin-shell)) .part-type-intro {
display: none;
}
body:not(:has(.admin-shell)) .part-type-options {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
body:not(:has(.admin-shell)) .part-type-option {
border: 1px solid var(--border-light);
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
body:not(:has(.admin-shell)) .part-type-option b {
background: rgba(0,0,0,0.05);
padding: 0 4px;
border-radius: 2px;
font-weight: normal;
}
body:not(:has(.admin-shell)) .part-type-option small { display: none; }
body:not(:has(.admin-shell)) .part-type-option.active {
background: #1d1d1f;
color: #fff;
border-color: #1d1d1f;
}
body:not(:has(.admin-shell)) .part-type-option.active b {
background: rgba(255,255,255,0.2);
}
@media (min-width: 1024px) {
body:not(:has(.admin-shell)) .catalog-layout {
--catalog-header-surface: #f5f5f7;
--catalog-shell-border: var(--border-light);
--catalog-shell-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);
display: grid !important;
grid-template-columns: 256px minmax(0, 1fr);
gap: 18px;
align-items: start;
margin-top: 12px !important;
}
body:not(:has(.admin-shell)) .catalog-sidebar {
width: 256px;
min-width: 256px;
position: sticky;
top: 126px;
max-height: calc(100dvh - 142px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 14px;
gap: 0;
background: #fff;
border: 1px solid var(--catalog-shell-border);
border-radius: 10px;
box-shadow: var(--catalog-shell-shadow);
scrollbar-width: thin;
}
body:not(:has(.admin-shell)) .catalog-sidebar-heading {
display: flex;
height: 56px;
min-height: 56px;
flex: 0 0 56px;
margin: -14px -14px 10px;
padding: 0 14px;
flex-direction: row;
align-items: center;
gap: 8px;
background: var(--catalog-header-surface);
border-bottom: 1px solid var(--catalog-shell-border);
border-radius: 9px 9px 0 0;
box-sizing: border-box;
}
body:not(:has(.admin-shell)) .catalog-sidebar-heading span,
body:not(:has(.admin-shell)) .catalog-desktop-filters > h3,
body:not(:has(.admin-shell)) .catalog-sidebar-active > span {
display: block;
margin: 0;
color: #64748b;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
body:not(:has(.admin-shell)) .catalog-sidebar-heading h2 {
margin: 0;
color: #0f172a;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-categories {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 0 24px;
padding: 0 0 24px;
border-bottom: 1px solid #e2e8f0;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 38px;
padding: 4px 10px 4px 8px;
gap: 10px;
border: 1px solid transparent;
border-radius: 6px;
box-shadow: none;
font-size: 13px;
font-weight: 500;
color: #475569;
transition: background-color 0.15s ease, color 0.15s ease;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category:hover {
transform: none;
background: #f1f5f9;
box-shadow: none;
border-color: transparent;
color: #0f172a;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active {
background: #eff6ff;
color: #1d4ed8;
font-weight: 600;
border-color: transparent;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active::before {
content: "";
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
background: #2563eb;
border-radius: 0 4px 4px 0;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category-thumb {
width: 28px;
height: 28px;
border-radius: 4px;
background: #fff;
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: border-color 0.15s ease;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active .quick-category-thumb {
border-color: #bfdbfe;
box-shadow: 0 1px 2px rgba(29, 78, 216, 0.05);
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category-thumb img {
max-width: 18px;
max-height: 18px;
object-fit: contain;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category-thumb.is-glyph svg {
width: 16px;
height: 16px;
color: #64748b;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active .quick-category-thumb.is-glyph svg {
color: #1d4ed8;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category span {
text-align: left;
-webkit-line-clamp: 2;
}
body:not(:has(.admin-shell)) .catalog-sidebar .quick-category small {
display: none;
}
body:not(:has(.admin-shell)) .catalog-sidebar .category-models {
display: none;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-picker {
margin: 0 0 24px;
padding: 0 0 24px;
border: 0;
border-bottom: 1px solid #e2e8f0;
border-radius: 0;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-intro {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 0 16px;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-intro span {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: .06em;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-options {
display: flex;
flex-direction: column;
gap: 2px;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 34px;
padding: 4px 0px 6px 4px;
border-bottom: 1px solid #e8edf3;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #475569;
font-size: 13px;
font-weight: 500;
transition: background-color 0.15s ease, color 0.15s ease;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option:hover {
background: #f1f5f9;
color: #0f172a;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option.active {
background: #eff6ff;
color: #1d4ed8;
font-weight: 600;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option span {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option b {
background: transparent;
padding: 5px;
border-radius: p99x;
font-weight: 600;
font-size: 12px;
color: #4989ef;
border: 1px solid #f7f9fc;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option.active b {
color: #1d4ed8;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option small {
display: none;
}
body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option strong {
font-weight: inherit;
}
body:not(:has(.admin-shell)) .catalog-desktop-filters {
padding-top: 2px;
}
body:not(:has(.admin-shell)) .catalog-sidebar .discovery-filters,
body:not(:has(.admin-shell)) .catalog-sidebar .device-fields {
display: flex;
flex-direction: column;
gap: 12px;
}
body:not(:has(.admin-shell)) .catalog-sidebar .field,
body:not(:has(.admin-shell)) .catalog-sidebar .field select {
width: 100%;
min-width: 0;
}
body:not(:has(.admin-shell)) .catalog-sidebar .advanced-filters {
margin: 0;
border-top: 1px solid #e8edf4;
padding-top: 12px;
}
body:not(:has(.admin-shell)) .catalog-sidebar .filter-auto-hint {
margin: 0;
color: #78879a;
font-size: 11px;
line-height: 1.4;
}
body:not(:has(.admin-shell)) .catalog-sidebar-active {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #e8edf4;
}
body:not(:has(.admin-shell)) .catalog-sidebar-active .active-filters {
margin: 0;
}
body:not(:has(.admin-shell)) .catalog-main {
min-width: 0;
}
body:not(:has(.admin-shell)) .catalog-main .catalog-refine-row,
body:not(:has(.admin-shell)) .catalog-main > .active-filters {
display: none;
}
body:not(:has(.admin-shell)) .catalog-price-notice {
margin-bottom: 10px;
}
}
@media (max-width: 1023px) {
body:not(:has(.admin-shell)) .catalog-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: 0;
}
body:not(:has(.admin-shell)) .catalog-sidebar {
display: block;
}
body:not(:has(.admin-shell)) .catalog-sidebar-heading,
body:not(:has(.admin-shell)) .catalog-desktop-filters,
body:not(:has(.admin-shell)) .catalog-sidebar-active {
display: none;
}
}
@media (max-width: 768px) {
body:not(:has(.admin-shell)) .catalog-heading {
flex-wrap: wrap;
align-items: flex-start;
}
body:not(:has(.admin-shell)) .catalog-heading h1 {
font-size: 20px;
line-height: 1.3;
}
body:not(:has(.admin-shell)) .catalog-refine-row {
gap: 8px;
padding: 10px;
align-items: center;
}
body:not(:has(.admin-shell)) .catalog-tool-field {
flex-wrap: wrap;
min-width: 0;
flex: 1 1 110px;
}
body:not(:has(.admin-shell)) .catalog-tool-field select {
max-width: 100%;
width: 100%;
}
body:not(:has(.admin-shell)) :is(.quick-category, .device-family-choice, .category-model-choice, .part-type-option) {
min-height: 38px;
}
body:not(:has(.admin-shell)) :is(.catalog-tool-field select, .stock-shortcut, #open-catalog-filters, #catalog-sort) {
min-height: 38px;
}
body:not(:has(.admin-shell)) .catalog-sort {
min-width: 0;
}
body:not(:has(.admin-shell)) .catalog-sort select {
min-width: 0;
flex: 1;
}
}
@media (prefers-reduced-motion: reduce) {
#store-menu *, #store-menu *::before, #store-menu *::after {
animation: none;
transition: none;
scroll-behavior: auto;
}
}
body:not(:has(.admin-shell)) .quick-categories {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 12px;
overflow: visible;
padding: 2px 2px 4px;
margin-bottom: 24px;
}
body:not(:has(.admin-shell)) .quick-category {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 104px;
min-height: 104px;
padding: 12px 8px;
gap: 8px;
border: 1px solid #e5e9f0;
border-radius: 8px;
background: #fff;
color: #1d1d1f;
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
box-shadow: 0 1px 2px rgba(16, 27, 46, 0.02);
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
body:not(:has(.admin-shell)) .quick-category span {
text-align: center;
line-height: 1.2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 100%;
}
body:not(:has(.admin-shell)) .quick-category small {
display: none;
}
body:not(:has(.admin-shell)) .quick-category-thumb {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
}
body:not(:has(.admin-shell)) .quick-category-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.2s ease;
}
body:not(:has(.admin-shell)) .quick-category-thumb.is-glyph svg {
width: 24px;
height: 24px;
color: #6a7c92;
transition: transform 0.2s ease, color 0.2s ease;
}
body:not(:has(.admin-shell)) .quick-category:hover {
transform: translateY(-2px);
border-color: #c9d6ea;
box-shadow: 0 6px 12px rgba(21, 42, 82, 0.05);
}
body:not(:has(.admin-shell)) .quick-category:hover .quick-category-thumb img {
transform: scale(1.08);
}
body:not(:has(.admin-shell)) .quick-category:hover .quick-category-thumb.is-glyph svg {
transform: scale(1.08);
color: var(--primary);
}
body:not(:has(.admin-shell)) .quick-category:focus-visible {
outline: 2px solid #2f6fe4;
outline-offset: 2px;
}
body:not(:has(.admin-shell)) .quick-category.active,
body:not(:has(.admin-shell)) .quick-category[aria-current="page"] {
background: #f4f8fe;
border-color: #a3c2ea;
box-shadow: inset 0 0 0 1px #e3edfa;
color: var(--primary);
}
body:not(:has(.admin-shell)) .quick-category.active .quick-category-thumb.is-glyph svg {
color: var(--primary);
}
@media (max-width: 640px) {
body:not(:has(.admin-shell)) .quick-categories {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding-bottom: 6px;
margin-bottom: 14px;
}
body:not(:has(.admin-shell)) .quick-categories::-webkit-scrollbar { display: none; }
body:not(:has(.admin-shell)) .quick-category {
flex: 0 0 auto;
scroll-snap-align: start;
}
}
.order-flow {
--line-cols: 64px minmax(0, 1fr) 112px 124px 116px 36px;
max-width: 1360px;
margin: 0 auto;
}
.order-flow-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1.5rem;
margin: 0 0 1rem;
}
.order-flow-intro {
margin: 0.35rem 0 0;
color: var(--text-muted);
font-size: 0.875rem;
}
.order-flow-head h1 {
margin: 0;
font-size: clamp(1.6rem, 2.6vw, 2.125rem);
letter-spacing: -0.025em;
line-height: 1.1;
}
.order-flow-sub {
margin: 0;
font-size: 0.8125rem;
color: var(--text-muted);
}
.order-flow-sub strong {
color: var(--text-main);
font-weight: 600;
}
.order-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 1.125rem;
align-items: start;
}
.order-progress {
margin: 0 0 1.15rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--border-light);
}
.order-progress ol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 620px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.order-progress li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-width: 0;
color: var(--text-muted);
font-size: 0.75rem;
}
.order-progress li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
left: calc(50% + 54px);
width: calc(100% - 108px);
height: 1px;
background: var(--border);
}
.order-progress li span {
display: inline-flex;
width: 24px;
height: 24px;
flex: 0 0 24px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eef2f7;
color: #64748b;
font-weight: 700;
}
.order-progress li strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.order-progress li.active {
color: var(--text-main);
}
.order-progress li.active span {
color: #fff;
background: var(--primary);
box-shadow: 0 0 0 4px var(--primary-light);
}
.line-items {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.line-items-head {
display: grid;
grid-template-columns: var(--line-cols);
gap: 1rem;
align-items: center;
padding: 0.72rem 1rem;
background: #fbfcfe;
border-bottom: 1px solid var(--border-light);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
}
.line-items-head .num {
text-align: right;
}
.line-item {
display: grid;
grid-template-columns: var(--line-cols);
gap: 1rem;
align-items: center;
padding: 0.78rem 1rem;
border-top: 1px solid var(--border-light);
}
.line-item:first-child {
border-top: 0;
}
.line-item:hover {
background: #fcfdff;
}
.line-item-thumb {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border: 1px solid var(--border-light);
border-radius: 10px;
background: var(--bg-surface);
overflow: hidden;
}
.line-item-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.line-item-thumb .img-placeholder {
color: var(--text-muted);
opacity: 0.5;
}
.line-item-body {
min-width: 0;
}
.line-item-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text-main);
text-decoration: none;
}
.line-item-name:hover {
color: var(--primary);
}
.line-item-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-top: 0.35rem;
}
.line-item-sku {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.6875rem;
letter-spacing: 0.02em;
color: var(--text-muted);
background: var(--bg-body);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 0.1rem 0.35rem;
}
.line-item-min {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-muted);
background: var(--bg-body);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 0.1rem 0.35rem;
}
.line-item-stock {
font-size: 0.6875rem;
font-weight: 600;
color: #15803d;
}
.line-item-stock::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 0.3rem;
border-radius: 50%;
background: currentColor;
vertical-align: 1px;
}
.line-item-stock.low {
color: var(--warning);
}
.line-item-unit,
.line-item-total {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.line-item-unit {
font-size: 0.8125rem;
color: var(--text-muted);
text-align: right;
}
.line-item-total {
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-main);
text-align: right;
}
.line-item-alert {
grid-column: 2 / -1;
margin-top: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--danger);
}
.stepper {
display: inline-flex;
align-items: center;
height: 38px;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--bg-surface);
overflow: hidden;
}
.stepper:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-light);
}
.stepper-btn {
width: 34px;
height: 36px;
border: 0;
background: transparent;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.stepper-btn:hover:not(:disabled) {
background: var(--bg-surface-hover);
color: var(--text-main);
}
.stepper-btn:focus-visible,
.line-item-remove:focus-visible,
.order-link:focus-visible,
.summary-cta:focus-visible {
outline: 3px solid var(--primary-light);
outline-offset: 2px;
}
.stepper-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.stepper-input {
width: 40px;
height: 36px;
border: 0;
border-inline: 1px solid var(--border-light);
padding: 0;
text-align: center;
font-size: 0.875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-main);
background: transparent;
appearance: textfield;
-moz-appearance: textfield;
}
.stepper-input:focus {
outline: none;
}
.stepper-input:focus-visible {
background: var(--primary-light);
color: var(--primary);
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.line-item-remove {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border: 1px solid transparent;
border-radius: 8px;
background: #f8fafc;
color: #94a3b8;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.line-item-remove:hover {
border-color: var(--danger-border);
background: var(--danger-bg);
color: var(--danger);
}
.order-main-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1rem;
}
.order-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.95rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-surface);
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-main);
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.order-link:hover {
border-color: var(--text-main);
}
.order-link.danger,
body:not(:has(.admin-shell)) a.order-link.danger {
border-color: transparent;
background: transparent;
color: var(--text-muted);
}
.order-link.danger:hover,
body:not(:has(.admin-shell)) a.order-link.danger:hover {
border-color: var(--danger-border);
background: var(--danger-bg);
color: var(--danger);
}
.order-rail {
position: sticky;
top: 88px;
display: grid;
gap: 0.75rem;
}
.summary-panel {
position: relative;
padding: 1.4rem;
border: 1px solid var(--border);
border-radius: 14px;
color: var(--text-main);
background: var(--bg-surface);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.summary-panel > * {
position: relative;
z-index: 1;
}
body:not(:has(.admin-shell)) .summary-panel .summary-title {
margin: 0 0 1.15rem;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-main);
}
body:not(:has(.admin-shell)) a.summary-cta {
color: #fff;
}
body:not(:has(.admin-shell)) a.summary-cta:hover {
color: #fff;
}
body:not(:has(.admin-shell)) a.line-item-name {
color: var(--text-main);
}
body:not(:has(.admin-shell)) a.line-item-name:hover {
color: var(--primary);
}
body:not(:has(.admin-shell)) a.order-link {
color: var(--text-main);
}
body:not(:has(.admin-shell)) a.order-link:hover {
color: var(--text-main);
}
.summary-items {
display: grid;
gap: 0.55rem;
margin-bottom: 1.1rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--border-light);
max-height: 232px;
overflow-y: auto;
}
.summary-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
font-size: 0.8125rem;
line-height: 1.4;
}
.summary-item-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--text-muted);
}
.summary-item-qty {
display: inline-block;
min-width: 1.6em;
margin-right: 0.3rem;
font-weight: 700;
color: var(--text-main);
}
.summary-item-value {
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--text-main);
}
.summary-lines {
display: grid;
gap: 0.6rem;
margin: 0;
}
.summary-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
font-size: 0.875rem;
}
.summary-line dt {
color: var(--text-muted);
}
.summary-line dd {
margin: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--text-main);
}
.summary-line dd.is-free {
color: #6ee7a8;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.06em;
}
.summary-line.discount dd {
color: #15803d;
}
.summary-rule {
height: 1px;
margin: 1.1rem 0;
background: var(--border-light);
}
.summary-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.summary-total span {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-main);
}
.summary-total strong {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--text-main);
}
.summary-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
width: 100%;
height: 50px;
margin-top: 1.15rem;
border: 0;
border-radius: 10px;
background: linear-gradient(180deg, #3b86ff 0%, #1f6bf0 100%);
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
box-shadow: 0 8px 18px rgba(31, 107, 240, 0.24);
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.summary-cta:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(31, 107, 240, 0.42);
}
.summary-cta:disabled {
filter: grayscale(0.5);
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.summary-panel .currency-context-note {
margin: 0.85rem 0 0;
font-size: 0.75rem;
text-align: center;
color: var(--text-muted);
}
.summary-panel .currency-context-note.error {
color: #fca5a5;
}
.summary-status {
display: flex;
align-items: center;
gap: 0.45rem;
margin: -0.35rem 0 1.1rem;
padding: 0.5rem 0.7rem;
border: 1px solid var(--border-light);
border-radius: 10px;
background: var(--bg-body);
font-size: 0.75rem;
color: var(--text-muted);
}
.summary-status.error {
border-color: rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.12);
color: #fca5a5;
}
.rail-notes {
display: grid;
gap: 0.55rem;
margin: 1rem 0 0;
padding: 0.9rem 0 0;
list-style: none;
border: 0;
border-top: 1px solid var(--border-light);
border-radius: 0;
background: transparent;
}
.rail-notes li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.75rem;
line-height: 1.45;
color: var(--text-muted);
}
.rail-notes svg {
flex-shrink: 0;
margin-top: 1px;
color: var(--primary);
}
.checkout-steps {
display: grid;
gap: 1rem;
}
body:not(:has(.admin-shell)) .order-flow .checkout-step {
padding: 1.35rem 1.5rem;
margin: 0;
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: none;
}
body:not(:has(.admin-shell)) .order-flow .step-header {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 1.1rem;
}
body:not(:has(.admin-shell)) .order-flow .step-number {
width: 26px;
height: 26px;
min-width: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
box-shadow: none;
}
body:not(:has(.admin-shell)) .order-flow .step-header h3 {
margin: 0;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.01em;
}
body:not(:has(.admin-shell)) .order-flow .address-card,
body:not(:has(.admin-shell)) .order-flow .payment-card {
display: block;
padding: 0.9rem 1rem;
border-radius: 14px;
box-shadow: none;
}
body:not(:has(.admin-shell)) .order-flow .address-card.selected,
body:not(:has(.admin-shell)) .order-flow .payment-card.selected {
box-shadow: 0 0 0 1px var(--primary) inset;
}
body:not(:has(.admin-shell)) .order-flow .address-card:focus-within,
body:not(:has(.admin-shell)) .order-flow .payment-card:focus-within {
outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
outline-offset: 2px;
}
body:not(:has(.admin-shell)) .order-flow .address-card.selected {
border-color: var(--success);
background: var(--success-bg);
box-shadow: 0 0 0 1px var(--success) inset;
}
body:not(:has(.admin-shell)) .order-flow .address-card.selected .address-header,
body:not(:has(.admin-shell)) .order-flow .address-card.selected .check-icon {
color: var(--success);
}
.address-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem;
}
.address-grid.address-grid-single {
grid-template-columns: minmax(360px, 2fr) minmax(220px, .8fr);
align-items: stretch;
}
.checkout-postal-address {
margin: 0;
color: var(--text-main);
font-size: .875rem;
font-style: normal;
line-height: 1.55;
}
.checkout-address-company,
.checkout-address-person {
font-weight: 650;
}
body:not(:has(.admin-shell)) .order-flow .address-card-new-inline {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
@media (max-width: 760px) {
.address-grid.address-grid-single { grid-template-columns: 1fr; }
body:not(:has(.admin-shell)) .order-flow .address-card-new-inline {
justify-content: flex-start;
}
}
.payment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.step-optional {
margin-left: 0.4rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
body:not(:has(.admin-shell)) .order-flow .address-card-new {
border-style: dashed;
border-color: color-mix(in srgb, var(--text-muted) 30%, var(--border));
background: color-mix(in srgb, var(--bg-body) 72%, var(--bg-surface));
color: var(--text-muted);
}
body:not(:has(.admin-shell)) .order-flow .address-card-new:hover,
body:not(:has(.admin-shell)) .order-flow .address-card-new:focus-within {
border-color: var(--primary);
color: var(--text-main);
}
.checkout-step .form-group {
margin-bottom: 0.75rem;
}
.checkout-step .form-group label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
}
.payment-card.disabled {
opacity: .6;
cursor: not-allowed;
background: var(--bg-body);
}
.payment-card.disabled input { cursor: not-allowed; }
.buyer-order-list { display: grid; gap: .75rem; }
.buyer-order-card {
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-surface);
}
.buyer-order-card-head { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.buyer-order-number { display:block; font-weight:700; color:var(--text-main); text-decoration:none; }
.buyer-order-number:hover { color:var(--primary); }
.buyer-order-card-head small { display:block; margin-top:.2rem; color:var(--text-muted); font-size:.75rem; }
.buyer-order-card-head strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.buyer-order-states { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
.buyer-order-states div { min-width:0; }
.buyer-order-states dt { margin-bottom:.3rem; color:var(--text-muted); font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.buyer-order-states dd { margin:0; font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; }
.invoice-overview { margin:0 0 1.5rem; }
.invoice-overview p { color:var(--wb-text-muted); font-size:.875rem; }
@media (max-width: 1080px) {
.order-grid {
grid-template-columns: minmax(0, 1fr) 312px;
}
.order-flow {
--line-cols: 56px minmax(0, 1fr) 92px 116px 100px 32px;
}
}
@media (max-width: 900px) {
.order-grid {
grid-template-columns: minmax(0, 1fr);
}
.order-rail {
position: static;
}
.summary-panel {
padding: 1.35rem;
}
}
@media (max-width: 640px) {
.address-grid.address-grid-single {
grid-template-columns: minmax(0, 1fr);
}
body:not(:has(.admin-shell)) .order-flow .address-card-compact {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.compact-address-line {
white-space: normal;
}
body:not(:has(.admin-shell)) .order-flow .address-card-new-inline {
min-width: 0;
}
}
@media (max-width: 640px) {
.buyer-order-states { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
.order-progress {
margin-bottom: 1rem;
padding: 0.65rem 0;
}
.order-progress li {
gap: 0.3rem;
font-size: 0.6875rem;
}
.order-progress li:not(:last-child)::after {
left: calc(50% + 32px);
width: calc(100% - 64px);
}
.order-progress li strong {
max-width: 88px;
overflow: visible;
line-height: 1.15;
text-align: center;
text-overflow: clip;
white-space: normal;
}
.order-flow-head {
display: block;
}
.order-flow-sub {
margin-top: 0.65rem;
}
.line-items-head {
display: none;
}
.line-item {
grid-template-columns: 56px minmax(0, 1fr) auto;
grid-template-areas:
"thumb body remove"
"qty qty total";
gap: 0.5rem 0.75rem;
padding: 1rem;
}
.line-item-thumb {
grid-area: thumb;
width: 56px;
height: 56px;
}
.line-item-body {
grid-area: body;
}
.line-item-remove {
grid-area: remove;
align-self: start;
}
.line-item-unit {
display: none;
}
.line-item-qty {
grid-area: qty;
margin-top: 0.35rem;
}
.line-item-total {
grid-area: total;
align-self: center;
margin-top: 0.35rem;
font-size: 1rem;
}
.line-item-alert {
grid-column: 1 / -1;
}
.order-main-foot {
justify-content: space-between;
}
}
:root {
--interaction-focus: #005fcc;
--interaction-focus-halo: rgba(0, 113, 227, .26);
--interaction-primary-shadow: 0 12px 22px rgba(0, 96, 204, .24);
--interaction-surface-shadow: 0 10px 22px rgba(18, 58, 105, .12);
--interaction-ease: cubic-bezier(.2, .8, .2, 1);
}
body:not(:has(.admin-shell)) :is(
.btn,
.hero-btn,
.page-search-jump,
.catalog-smart-field button,
.summary-cta,
.filter-chip,
.page-link,
.view-toggle button,
.cat-nav-item,
.part-img-link,
.main-image-container,
.gallery-thumb,
.b2b-img-wrap,
.b2b-add-btn,
.b2b-qty-input,
.modal-close
) {
transition:
transform .18s var(--interaction-ease),
box-shadow .18s var(--interaction-ease),
background-color .18s ease,
border-color .18s ease,
color .18s ease;
}
body:not(:has(.admin-shell)) :is(
.btn-primary,
.hero-btn,
.summary-cta,
.catalog-smart-field button,
.b2b-add-btn
) {
box-shadow: 0 4px 9px rgba(0, 96, 204, .16);
}
@media (hover: hover) and (pointer: fine) {
body:not(:has(.admin-shell)) :is(
.btn-primary,
.hero-btn,
.summary-cta,
.catalog-smart-field button,
.b2b-add-btn
):hover:not(:disabled):not([aria-disabled="true"]) {
background-color: var(--primary-hover);
color: #fff;
box-shadow: var(--interaction-primary-shadow);
transform: translateY(-2px);
text-decoration: none;
}
body:not(:has(.admin-shell)) .catalog-smart-field button:hover:not(:disabled) {
background-color: #075fc9;
}
body:not(:has(.admin-shell)) :is(
.btn-outline,
.page-search-jump,
.filter-chip,
.page-link,
.view-toggle button,
.cat-nav-item,
.gallery-thumb
):hover:not(:disabled):not([aria-disabled="true"]) {
border-color: color-mix(in srgb, var(--primary) 62%, var(--border));
background-color: #eaf4ff;
color: var(--primary-active);
box-shadow: 0 5px 12px rgba(28, 100, 181, .12);
transform: translateY(-1px);
text-decoration: none;
}
body:not(:has(.admin-shell)) .app-header :is(.nav-link, .nav-icon-action, .nav-cart):hover {
color: var(--primary);
border-radius: 10px;
box-shadow: 0 0 0 4px rgba(0, 113, 227, .10);
text-decoration: none;
}
body:not(:has(.admin-shell)) :is(.b2b-nav-link, .b2b-nav-caret):hover,
body:not(:has(.admin-shell)) .b2b-nav-item.is-open :is(.b2b-nav-link, .b2b-nav-caret) {
background: #eaf4ff;
color: var(--primary-active);
box-shadow: inset 0 -2px 0 var(--primary);
}
body:not(:has(.admin-shell)) .search-input-wrapper:hover {
border-color: #8db7e9;
box-shadow: 0 3px 12px rgba(30, 100, 178, .10);
}
body:not(:has(.admin-shell)) .form-control:hover:not(:focus):not(:disabled) {
border-color: #8db7e9;
box-shadow: 0 2px 8px rgba(30, 100, 178, .08);
}
body:not(:has(.admin-shell)) .part-card:hover {
border-color: #78aeea;
box-shadow: 0 16px 30px rgba(27, 88, 157, .16);
transform: translateY(-3px);
}
body:not(:has(.admin-shell)) .part-card:hover .part-name a {
color: var(--primary-active);
}
body:not(:has(.admin-shell)) .part-img-link:hover img {
transform: scale(1.075);
}
body:not(:has(.admin-shell)) .main-image-container:hover {
border-color: #78aeea;
box-shadow: var(--interaction-surface-shadow);
}
body:not(:has(.admin-shell)) .main-image-container:hover img {
transform: scale(1.04);
}
body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row > td {
transition: background-color .18s ease, box-shadow .18s ease;
}
body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:hover > td {
background: #eff7ff;
}
body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:hover > td:first-child {
box-shadow: inset 4px 0 0 var(--primary);
}
body:not(:has(.admin-shell)) .b2b-img-wrap:hover img {
transform: scale(1.075);
}
body:not(:has(.admin-shell)) .b2b-qty-input:hover:not(:focus):not(:disabled) {
border-color: #78aeea;
box-shadow: 0 2px 8px rgba(30, 100, 178, .10);
}
body:not(:has(.admin-shell)) .main-content a:not(.btn):not(.summary-cta):hover {
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
}
body:not(:has(.admin-shell)) :is(
.btn,
.hero-btn,
.page-search-jump,
.catalog-smart-field button,
.summary-cta,
.filter-chip,
.page-link,
.view-toggle button,
.cat-nav-item,
.part-img-link,
.main-image-container,
.gallery-thumb,
.b2b-img-wrap,
.b2b-add-btn
):active:not(:disabled):not([aria-disabled="true"]) {
box-shadow: 0 2px 6px rgba(0, 82, 175, .18);
transform: translateY(1px) scale(.985);
}
body:not(:has(.admin-shell)) :is(
.btn-primary,
.hero-btn,
.summary-cta,
.catalog-smart-field button,
.b2b-add-btn
):active:not(:disabled):not([aria-disabled="true"]) {
background-color: var(--primary-active);
}
body:not(:has(.admin-shell)) .part-card:focus-within {
border-color: #5d9ce4;
box-shadow: 0 0 0 3px rgba(0, 113, 227, .16), 0 10px 22px rgba(27, 88, 157, .12);
}
body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:has(:focus-visible) > td {
background: #eff7ff;
}
body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:has(:focus-visible) > td:first-child {
box-shadow: inset 4px 0 0 var(--interaction-focus);
}
body:not(:has(.admin-shell)) :is(
.btn,
.hero-btn,
.page-search-jump,
.catalog-smart-field button,
.summary-cta,
.filter-chip,
.page-link,
.view-toggle button,
.cat-nav-item,
.part-img-link,
.main-image-container,
.gallery-thumb,
.b2b-img-wrap,
.b2b-add-btn,
.b2b-qty-input,
.b2b-prod-title a,
.b2b-login-link,
.modal-close,
.form-control,
.part-name a,
.main-content a
):focus-visible {
outline: 3px solid var(--interaction-focus);
outline-offset: 3px;
box-shadow: 0 0 0 6px var(--interaction-focus-halo);
}
body:not(:has(.admin-shell)) :is(:disabled, [aria-disabled="true"]) {
cursor: not-allowed;
}
:is(
.wsp-btn,
.wsp-tab,
.wsp-quick-row-remove,
.wsp-field select,
.wsp-field input,
.wsp-input,
.wsp-paste-area
) {
transition:
transform .18s var(--interaction-ease),
box-shadow .18s var(--interaction-ease),
background-color .18s ease,
border-color .18s ease,
color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.wsp-btn:hover:not(:disabled):not([aria-disabled="true"]) {
border-color: #6a9de2;
box-shadow: 0 7px 15px rgba(24, 83, 158, .15);
transform: translateY(-1px);
}
.wsp-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
background: #124fc0;
border-color: #124fc0;
box-shadow: 0 10px 18px rgba(24, 83, 158, .24);
}
.wsp-tab:hover:not(.active) {
background: #eaf4ff;
color: #124fc0;
box-shadow: inset 0 -2px 0 #75a9e9;
}
.wsp-list-card:hover {
border-color: #8db7e9;
box-shadow: 0 10px 20px rgba(20, 69, 130, .13);
}
.wsp-table tbody tr:hover td {
background: #f0f7ff;
}
:is(.wsp-field select, .wsp-field input, .wsp-input, .wsp-paste-area):hover:not(:focus):not(:disabled) {
border-color: #8db7e9;
box-shadow: 0 2px 8px rgba(30, 100, 178, .08);
}
}
:is(.wsp-btn, .wsp-tab, .wsp-quick-row-remove):active:not(:disabled):not([aria-disabled="true"]) {
transform: translateY(1px) scale(.985);
}
:is(
.wsp-btn,
.wsp-tab,
.wsp-quick-row-remove,
.wsp-field select,
.wsp-field input,
.wsp-input,
.wsp-paste-area,
.wsp-list-card h3 a,
.wsp-table td a
):focus-visible {
outline: 3px solid var(--interaction-focus);
outline-offset: 3px;
box-shadow: 0 0 0 6px var(--interaction-focus-halo);
}
body:has(.admin-shell) :is(
.btn,
.admin-nav a,
.admin-nav-link,
.finance-summary-tile,
.checkbox-card,
.image-preview-trigger,
.image-item-del,
.action-del-img,
.action-hide-incorrect-img,
.image-upload-area
) {
transition:
transform .16s var(--interaction-ease),
box-shadow .16s var(--interaction-ease),
background-color .16s ease,
border-color .16s ease,
color .16s ease;
}
@media (hover: hover) and (pointer: fine) {
body:has(.admin-shell) .btn-primary:hover:not(:disabled),
body:has(.admin-shell) .btn:not(.btn-outline):not(.btn-danger):not(.btn-sm):hover:not(:disabled) {
background: var(--wb-primary-hover);
box-shadow: 0 8px 16px rgba(11, 78, 150, .26);
transform: translateY(-1px);
}
body:has(.admin-shell) .btn-outline:hover:not(:disabled) {
border-color: var(--wb-primary);
box-shadow: 0 5px 12px rgba(11, 78, 150, .12);
transform: translateY(-1px);
}
body:has(.admin-shell) .btn-danger:hover:not(:disabled) {
box-shadow: 0 8px 16px rgba(192, 35, 49, .22);
transform: translateY(-1px);
}
body:has(.admin-shell) :is(.admin-nav a, .admin-nav-link):hover {
box-shadow: inset 3px 0 0 #74b4ff, 0 5px 12px rgba(0, 0, 0, .14);
transform: translateX(2px);
}
body:has(.admin-shell) .finance-summary-tile:hover {
border-color: var(--wb-primary);
box-shadow: 0 10px 20px rgba(11, 78, 150, .16);
transform: translateY(-2px);
}
body:has(.admin-shell) .data-table tbody tr:hover td {
background: #eef6ff;
}
body:has(.admin-shell) .checkbox-card:hover,
body:has(.admin-shell) .image-upload-area:hover {
border-color: var(--wb-primary);
box-shadow: 0 6px 14px rgba(11, 78, 150, .12);
}
body:has(.admin-shell) :is(.editor-input, .form-control):hover:not(:focus):not(:disabled) {
border-color: #74a8e7;
}
}
body:has(.admin-shell) :is(
.btn,
.admin-nav a,
.admin-nav-link,
.finance-summary-tile,
.checkbox-card,
.image-preview-trigger,
.image-item-del,
.action-del-img,
.action-hide-incorrect-img
):active:not(:disabled):not([aria-disabled="true"]) {
transform: translateY(1px) scale(.985);
}
body:has(.admin-shell) :is(
.btn,
.admin-nav a,
.admin-nav-link,
.finance-summary-tile,
.checkbox-card,
.image-item-del,
.action-del-img,
.action-hide-incorrect-img,
.image-upload-area,
.editor-input,
.editor-card input:not([type="hidden"]),
.editor-card select,
.editor-card textarea,
.form-control,
.data-table td a
):focus-visible {
outline: 3px solid #4da3ff;
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(77, 163, 255, .22);
}
@media (prefers-reduced-motion: reduce) {
:is(
.btn,
.hero-btn,
.page-search-jump,
.summary-cta,
.part-card,
.part-img-link img,
.main-image-container img,
.wsp-btn,
.wsp-tab,
.wsp-list-card,
.admin-nav a,
.admin-nav-link,
.finance-summary-tile
) {
transition-duration: .01ms !important;
}
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim {
position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(48px, 7vw, 88px);
border-top: 1px solid #dce6f1; background: #fff; color: #18334f;
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim::before {
position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none;
background: radial-gradient(ellipse at 5% 0, rgba(42,119,204,.07), transparent 35%), radial-gradient(ellipse at 96% 65%, rgba(67,145,220,.045), transparent 32%);
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-strip {
border-bottom: 1px solid #e2eaf3; background: linear-gradient(105deg,#f3f8fe 0%,#f9fbfe 52%,#f2f7fc 100%);
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-grid {
display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(calc(100% - 48px),1240px); margin-inline: auto;
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item {
display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 84px; padding: 16px clamp(14px,2.4vw,28px); border-right: 1px solid #e0e8f1;
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item:first-child { padding-left: 0; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item:last-child { border-right: 0; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid #d8e6f5; border-radius: 12px; background: #fff; color: #2879c8; box-shadow: 0 3px 10px rgba(25,62,101,.05); }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-icon svg { width: 20px; height: 20px; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item>span:last-child { display: grid; gap: 4px; min-width: 0; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item strong { color: #203b58; font-size: 12px; font-weight: 750; line-height: 1.35; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item small { color: #6c7f94; font-size: 11px; line-height: 1.4; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid {
display: grid; grid-template-columns: minmax(240px,1.65fr) repeat(3,minmax(130px,.8fr)); gap: clamp(24px,4vw,52px);
width: min(calc(100% - 48px),1240px); margin-inline: auto; padding-block: clamp(38px,5vw,58px);
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col { min-width: 0; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-brand p,
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-contact p { max-width: 330px; margin: 15px 0 0; color: #5f7388; font-size: 12px; line-height: 1.75; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-wordmark { display: inline-flex; align-items: center; gap: 10px; color: #18334f; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.045em; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-wordmark-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#2879c8,#145da8); color: white; box-shadow: 0 7px 16px rgba(31,102,174,.2); font-size: 20px; font-weight: 800; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-wordmark>span:last-child { display: grid; gap: 3px; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-wordmark small { color: #7a8ba0; font-size: 8px; font-weight: 750; letter-spacing: .16em; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-region-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 10px; border: 1px solid #e2eaf3; border-radius: 999px; background: rgba(255,255,255,.8); color: #566d84; font-size: 10px; font-weight: 650; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-region-badge i { width: 7px; height: 7px; border-radius: 50%; background: #23a36c; box-shadow: 0 0 0 3px rgba(35,163,108,.11); }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col h4 { position: relative; margin: 3px 0 14px; padding-bottom: 10px; color: #203b58; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col h4::after { position: absolute; bottom: 0; left: 0; width: 25px; height: 2px; border-radius: 2px; background: #3282ca; content: ""; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col li { margin: 0; padding: 0; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col li a { display: inline-flex; padding: 5px 0; color: #5b7086; font-size: 12px; line-height: 1.45; text-decoration: none; transition: color .18s ease,transform .18s ease; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-col li a:hover { transform: translateX(2px); color: #1766b2; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-contact-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px 12px; border: 1px solid #dce7f2; border-radius: 10px; background: #fff; color: #265577; font-size: 11px; font-weight: 700; text-decoration: none; transition: border-color .18s ease,background .18s ease,transform .18s ease; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-contact-link:hover { transform: translateY(-1px); border-color: #a9c9e8; background: #f7fbff; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-contact-link svg { width: 15px; height: 15px; color: #2879c8; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom { border-top: 1px solid #e3eaf2; background: rgba(246,249,252,.92); color: #718197; font-size: 10px; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(calc(100% - 48px),1240px); min-height: 54px; margin-inline: auto; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom-note { color: #8795a6; }
@media (max-width: 900px) {
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 26px; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-brand { grid-column: 1/-1; }
}
@media (max-width: 640px) {
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-grid { grid-template-columns: 1fr; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item,
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item:first-child { min-height: 0; padding: 12px 0; border-right: 0; border-bottom: 1px solid #e0e8f1; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item:last-child { border-bottom: 0; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid { gap: 25px 18px; width: min(calc(100% - 36px),1240px); padding-block: 32px; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-grid,
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom-inner { width: min(calc(100% - 36px),1240px); }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 13px; }
}
@media (max-width: 460px) {
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid { grid-template-columns: 1fr; gap: 23px; }
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-brand { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim :is(.footer-col li a,.footer-contact-link) { transition: none; }
}
body:not(:has(.admin-shell)) .b2b-model-series-group>summary small{display:none}
body:not(:has(.admin-shell)) .b2b-model-series-group{border-radius:12px;background:linear-gradient(180deg,#ffffff,#f5f9fe);box-shadow:0 1px 2px rgba(16,42,78,.05);transition:box-shadow .2s ease,border-color .2s ease}
body:not(:has(.admin-shell)) .b2b-model-series-group[open]{box-shadow:0 10px 24px rgba(24,89,168,.12);border-color:#9cc3ec}
body:not(:has(.admin-shell)) .b2b-model-series-group>summary{border-radius:11px 11px 0 0}
body:not(:has(.admin-shell)) .b2b-model-link{transition:background .15s ease,border-color .15s ease,color .15s ease}
body:not(:has(.admin-shell)) .b2b-model-link:hover{background:#e9f3fe;border-color:#bcd9f5;color:#0d4f9e}
body:not(:has(.admin-shell)) .b2b-model-search:focus{outline:2px solid #bcd9f5;border-color:#8fbdea}
body:not(:has(.admin-shell)) .b2b-menu-close{transition:background .15s ease,color .15s ease,border-color .15s ease}
body:not(:has(.admin-shell)) .b2b-menu-close:hover{background:#0d5dc9;color:#fff;border-color:#0d5dc9}
/*===assets/themes/ferry-main/workspace.css===*//* workspace.css - Ferry Telecom Workbench Aesthetic */
:root {
    --brand-blue: #0056b3;
    --brand-blue-dark: #004494;
    --brand-blue-light: #e0f2fe;
    
    --wb-bg: #f8fafc;
    --wb-surface: #ffffff;
    --wb-border: #cbd5e1;
    --wb-border-light: #e2e8f0;
    
    --wb-text: #0f172a;
    --wb-text-muted: #475569;
    --wb-text-light: #94a3b8;
    
    --wb-success: #16a34a;
    --wb-success-bg: #dcfce7;
    --wb-warning: #ea580c;
    --wb-warning-bg: #ffedd5;
    --wb-danger: #dc2626;
    --wb-danger-bg: #fee2e2;
    --wb-info: #0284c7;
    --wb-info-bg: #e0f2fe;
    
    --wb-radius: 4px;
    --wb-radius-lg: 8px;
    --wb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --wb-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Base Overrides for Workbench feel */
.layout-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
}
.layout-sidebar aside .card {
    padding: 1rem;
    position: sticky;
    top: 5rem;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sidebar-nav a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--wb-radius);
    color: var(--wb-text);
    transition: all 0.15s;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
    background: var(--wb-bg);
    border-left-color: var(--wb-border);
    text-decoration: none;
}
.sidebar-nav a.active {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border-left-color: var(--brand-blue);
    font-weight: 600;
}

@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .layout-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        width: 100%;
        min-width: 0;
    }
    body:not(:has(.admin-shell)) .layout-sidebar > *,
    body:not(:has(.admin-shell)) .layout-sidebar .card,
    body:not(:has(.admin-shell)) .layout-sidebar form,
    body:not(:has(.admin-shell)) .layout-sidebar .form-group,
    body:not(:has(.admin-shell)) .layout-sidebar .grid-cols-2 {
        min-width: 0;
        max-width: 100%;
    }
    body:not(:has(.admin-shell)) .layout-sidebar aside .card {
        position: static;
    }
    body:not(:has(.admin-shell)) .layout-sidebar .grid-cols-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dense Data Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--wb-border-light);
    border-radius: var(--wb-radius);
    background: var(--wb-surface);
    margin-bottom: 1.5rem;
}
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    white-space: nowrap;
}
table.data-table th {
    background: var(--wb-bg);
    color: var(--wb-text-muted);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--wb-border-light);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
}
table.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wb-border-light);
    color: var(--wb-text);
    font-variant-numeric: tabular-nums;
}
table.data-table tbody tr:hover {
    background-color: var(--wb-bg);
}
table.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Badges */
.wb-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}
.wb-badge-neutral { background: var(--wb-bg); color: var(--wb-text-muted); border: 1px solid var(--wb-border-light); }
.wb-badge-info { background: var(--wb-info-bg); color: var(--wb-info); }
.wb-badge-success { background: var(--wb-success-bg); color: var(--wb-success); }
.wb-badge-warning { background: var(--wb-warning-bg); color: var(--wb-warning); }
.wb-badge-danger { background: var(--wb-danger-bg); color: var(--wb-danger); }

/* Forms & Details */
.form-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wb-border-light);
}
.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--wb-text);
}
.wb-details {
    background: var(--wb-bg);
    border: 1px solid var(--wb-border-light);
    border-radius: var(--wb-radius);
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.wb-details summary {
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    color: var(--brand-blue);
}
.wb-details summary:hover {
    background: var(--brand-blue-light);
}
.wb-details-content {
    padding: 1rem;
    border-top: 1px solid var(--wb-border-light);
    background: var(--wb-surface);
}

/* Action Bars */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--wb-text);
}

/* Toast Container */
#wb-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}
.wb-toast {
    background: var(--wb-surface);
    border: 1px solid var(--wb-border);
    box-shadow: var(--wb-shadow);
    padding: 0.75rem 1rem;
    border-radius: var(--wb-radius);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
    animation: toast-in 0.2s ease-out forwards;
    min-width: 250px;
}
.wb-toast-success { border-left: 4px solid var(--wb-success); }
.wb-toast-error { border-left: 4px solid var(--wb-danger); }
.wb-toast-info { border-left: 4px solid var(--wb-info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Value displays */
.data-label {
    font-size: 0.75rem;
    color: var(--wb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.125rem;
}
.data-value {
    font-size: 0.875rem;
    color: var(--wb-text);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* Admin specific */
.admin-card-danger {
    border-top: 3px solid var(--wb-danger);
}
.model-check-item {
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    padding: 0.375rem 0.5rem; 
    border-radius: var(--wb-radius); 
    cursor: pointer;
    transition: background 0.15s;
}
.model-check-item:hover {
    background: var(--wb-bg);
}

/*===assets/css/account-premium.css===*//* Customer account: restrained navigation and readable order history. */
body[data-theme="template-6"] .ferry-main-account{max-width:1500px;padding-bottom:64px}
body[data-theme="template-6"] .ferry-main-account .myaccount{gap:28px;align-items:start}
body[data-theme="template-6"] .ferry-main-account .myaccount-nav{position:sticky;top:104px;padding:10px;border:1px solid #e3e9ef;border-radius:18px;background:#fff;box-shadow:0 16px 44px rgba(29,48,70,.055)}
body[data-theme="template-6"] .ferry-main-account .myaccount-nav ul{border:0;border-radius:0;background:transparent;overflow:visible}
body[data-theme="template-6"] .ferry-main-account .myaccount-nav li{margin:3px 0}
body[data-theme="template-6"] .ferry-main-account .myaccount-nav li a{display:flex;align-items:center;min-height:44px;padding:10px 15px;border:0;border-radius:10px;background:transparent;color:#40546b;font-size:13px;font-weight:650;text-decoration:none;box-shadow:none;transition:background .35s ease,color .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
body[data-theme="template-6"] .ferry-main-account .myaccount-nav li a:hover{background:#f2f7f5;color:#126b41;transform:translateX(3px)}
body[data-theme="template-6"] .ferry-main-account .myaccount-nav li.is-active a{background:#eaf5ee;color:#116a3c;box-shadow:inset 3px 0 #16834b;font-weight:750}
body[data-theme="template-6"] .ferry-main-account .myaccount-content{min-width:0;padding:34px 36px 40px;border:1px solid #e3e9ef;border-radius:20px;background:#fff;box-shadow:0 22px 55px rgba(29,48,70,.06)}
body[data-theme="template-6"] .acct-orders-heading{align-items:center;margin-bottom:26px}
body[data-theme="template-6"] .acct-orders-heading>div>span{margin-bottom:8px;color:#16834b;font-size:11px;letter-spacing:.12em}
body[data-theme="template-6"] .acct-orders-heading h2{margin-bottom:7px;color:#182b3f;font-size:30px;line-height:1.15;letter-spacing:-.035em}
body[data-theme="template-6"] .acct-orders-heading p{color:#627389;font-size:14px;line-height:1.5}
body[data-theme="template-6"] .acct-orders-heading>b{padding:8px 13px;border-color:#d6e8dc;background:#f4faf6;color:#286649;font-size:12px;font-weight:750}
body[data-theme="template-6"] .acct-orders-table-wrap{border-color:#e1e8ee;border-radius:16px;box-shadow:none;overflow:hidden}
body[data-theme="template-6"] .acct-orders-table th{padding:15px 18px;border-bottom-color:#e1e8ee;background:#f7f9fa;color:#62758a;font-size:11px;letter-spacing:.09em}
body[data-theme="template-6"] .acct-orders-table td{padding:19px 18px;border-bottom-color:#e9eef2;color:#223448;font-size:13px;line-height:1.4}
body[data-theme="template-6"] .acct-orders-table .acct-order-row{transition:background .3s ease}
body[data-theme="template-6"] .acct-orders-table .acct-order-row:hover{background:#fbfdfb}
body[data-theme="template-6"] .acct-order-number{color:#126b43;font-size:14px;font-weight:780}
body[data-theme="template-6"] .acct-orders-table td>strong{color:#172a3d;font-size:14px;font-weight:760}
body[data-theme="template-6"] .acct-orders-table td>small{margin-top:5px;color:#738397;font-size:11px}
body[data-theme="template-6"] .acct-order-status{gap:8px;min-height:30px;padding:6px 11px;font-size:11px;font-weight:750;letter-spacing:.01em}
body[data-theme="template-6"] .acct-order-status i{width:7px;height:7px;flex:none}
body[data-theme="template-6"] .acct-order-status.is-hold{border-color:#ecd8b9;background:#fffbf2;color:#8a570c}
body[data-theme="template-6"] .acct-order-status.is-processing{border-color:#cddff2;background:#f2f7fd;color:#215e9d}
body[data-theme="template-6"] .acct-order-status.is-complete{border-color:#cce5d5;background:#f2faf5;color:#176c43}
body[data-theme="template-6"] .acct-order-status.is-refunded{border-color:#e0d7ec;background:#faf7fd;color:#704b9c}
body[data-theme="template-6"] .acct-order-action,body[data-theme="template-6"] .acct-order-action.is-primary{width:38px;height:38px;border:1px solid #d5e4da;border-radius:10px;background:#fff;color:#176b43;box-shadow:none;transition:transform .5s cubic-bezier(.2,.75,.2,1),background .3s ease,border-color .3s ease,box-shadow .3s ease}
body[data-theme="template-6"] .acct-order-action:hover,body[data-theme="template-6"] .acct-order-action.is-primary:hover{border-color:#16834b;background:#f5fbf7;color:#116a3c;box-shadow:0 7px 15px rgba(22,131,75,.1);transform:scale(1.08)}
body[data-theme="template-6"] .acct-order-action svg{width:17px;height:17px}
body[data-theme="template-6"] .acct-order-action:focus-visible,body[data-theme="template-6"] .acct-order-number:focus-visible,body[data-theme="template-6"] .myaccount-nav a:focus-visible{outline:3px solid #16834b;outline-offset:3px}
@media(max-width:1100px){body[data-theme="template-6"] .ferry-main-account .myaccount{gap:18px}body[data-theme="template-6"] .ferry-main-account .myaccount-content{padding:26px}body[data-theme="template-6"] .acct-orders-table th,body[data-theme="template-6"] .acct-orders-table td{padding-inline:12px}}
@media(max-width:760px){body[data-theme="template-6"] .ferry-main-account .myaccount-nav{position:static}body[data-theme="template-6"] .ferry-main-account .myaccount-nav ul{display:flex;gap:5px;overflow-x:auto}body[data-theme="template-6"] .ferry-main-account .myaccount-nav li{flex:none}body[data-theme="template-6"] .ferry-main-account .myaccount-nav li a{white-space:nowrap}body[data-theme="template-6"] .ferry-main-account .myaccount-content{padding:22px 18px}body[data-theme="template-6"] .acct-orders-heading h2{font-size:26px}body[data-theme="template-6"] .acct-orders-table-wrap{border:0;border-radius:0;overflow:visible}body[data-theme="template-6"] .acct-orders-table .acct-order-row{padding:16px;border:1px solid #e1e8ee;border-radius:14px;box-shadow:0 8px 24px rgba(29,48,70,.045)}body[data-theme="template-6"] .acct-orders-table .acct-order-row td{padding:0;border:0}body[data-theme="template-6"] .acct-order-actions{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){body[data-theme="template-6"] .ferry-main-account .myaccount-nav li a,body[data-theme="template-6"] .acct-order-action{transition:none!important}body[data-theme="template-6"] .ferry-main-account .myaccount-nav li a:hover,body[data-theme="template-6"] .acct-order-action:hover{transform:none!important}}

body[data-theme=template-6] .acct-address-card__line svg,body[data-theme=template-6] .acct-address-card__phone svg{width:16px;height:16px;flex-shrink:0;vertical-align:middle}
body[data-theme=template-6] .acct-address-card__line>svg,body[data-theme=template-6] .acct-address-card__phone>svg,.acct-address-card__line>svg,.acct-address-card__phone>svg{width:16px;height:16px;min-width:16px;flex-shrink:0;vertical-align:-3px}
/* premium address cards */
.acct-address-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.acct-address-card{position:relative;flex-direction:column;gap:0;border-radius:18px;border:1px solid #e2eaf4;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 1px 2px rgba(16,42,78,.05),0 12px 28px -18px rgba(24,89,168,.25);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.acct-address-card::before{content:none}
.acct-address-card:hover{transform:translateY(-3px);border-color:#bcd7f2;box-shadow:0 2px 4px rgba(16,42,78,.06),0 20px 40px -18px rgba(24,89,168,.35)}
.acct-address-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed #e0e8f2}
.acct-address-card>header span{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0d5dc9;background:#e8f2fe;border:1px solid #cfe4fa;padding:4px 10px;border-radius:999px;margin:0 0 8px}
.acct-address-card[data-address-id^=shipping]>header span{color:#0e7a4f;background:#e6f6ee;border-color:#c4e8d5}
.acct-address-card>header b{font-size:17px;font-weight:750;color:#10233c;letter-spacing:-.01em}
.acct-address-card__actions{display:flex;gap:8px}
.acct-address-card__actions button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid #dfe7f1;background:#fff;color:#5b7290;cursor:pointer;transition:all .15s ease;padding:0}
.acct-address-card__actions button svg{width:15px;height:15px}
.acct-address-card__actions .acct-address-edit:hover{border-color:#0d5dc9;color:#0d5dc9;background:#eef5fe;box-shadow:0 4px 12px -4px rgba(13,93,201,.4)}
.acct-address-card__actions .acct-address-delete:hover{border-color:#e5a9a9;color:#c0392b;background:#fdf0f0}
.acct-address-card__body strong{display:block;font-size:14.5px;color:#1d2f45;margin-bottom:8px}
.acct-address-card__line,.acct-address-card__phone{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#43566d;margin:8px 0 0!important;line-height:1.55}
.acct-address-card__line>svg,.acct-address-card__phone>svg{width:16px;height:16px;min-width:16px;margin-top:2px;color:#0d5dc9;opacity:.75}
.acct-address-head .btn-primary{background:linear-gradient(135deg,#1873ec,#0d5dc9);border:0;box-shadow:0 8px 18px -8px rgba(13,93,201,.6);transition:transform .15s ease,box-shadow .15s ease}
.acct-address-head .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 22px -8px rgba(13,93,201,.65)}
.acct-address-form{border-radius:18px;box-shadow:0 12px 30px -18px rgba(24,89,168,.25)}
/*===assets/css/button-contrast.css===*//* Shared storefront secondary actions. Keep text legible in every state. */
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login) {
  background: transparent !important;
  border: 1.5px solid #aac3e8 !important;
  color: #aac3e8 !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), border-color .55s ease, color .55s ease, box-shadow .55s ease !important;
  transform: scale(1);
  transform-origin: center;
  padding: 7px 20px;
    border-radius: 99px;
}
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login):hover:not(:disabled) {
  background: transparent !important;
  border-color: #4887f4 !important;
  box-shadow: 0 7px 18px rgba(16,110,61,.12) !important;
  transform: scale(1.055) !important;
}
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login):active:not(:disabled) {
  transform: scale(.98) !important;
}
body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login):focus-visible {
  outline: 3px solid #16834b;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-shell)) :is(.btn-outline,.btn-secondary,.catalog-price-notice__login,.catalog-main .b2b-order-login) {
    transition: none !important;
    transform: none !important;
  }
}

/*===assets/css/unavailable-actions.css===*//* Keep the purchase layout visible when an item cannot be ordered. */
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable{opacity:1}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable :is(.b2b-qty-step,.b2b-qty-input){border-color:#dce7f6;background:#f6f9fd;color:#9db2d0;box-shadow:none;cursor:not-allowed;opacity:1}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable .b2b-add-btn,
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable #pd-add{border:1px solid #bbd3f3;background:#eaf3ff;color:#7d9fc9;box-shadow:none;cursor:not-allowed;opacity:1;transform:none}
body:not(:has(.admin-shell)) .catalog-main .b2b-order-controls.is-unavailable .b2b-add-btn:hover,
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable #pd-add:hover{border-color:#bbd3f3;background:#eaf3ff;color:#7d9fc9;box-shadow:none;transform:none}
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable .pd-stepper{border-color:#dce7f6;background:#f6f9fd}
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable .pd-stepper :is(button,input){background:#f6f9fd;color:#9db2d0;cursor:not-allowed;opacity:1}
body:not(:has(.admin-shell)) .pd-purchase.is-unavailable .pd-quantity small{color:#7589a5}
body:not(:has(.admin-shell)) :is(.th-add,.th-hero-card__add,.button)[disabled][data-add]{background:#eaf3ff;color:#7d9fc9;border-color:#bbd3f3;box-shadow:none;opacity:1;cursor:not-allowed;transform:none}

/*===assets/themes/ferry-main/category-models.css===*//* --------------------------------------------------------------------------
   Category Models - Baseline & Layout
   -------------------------------------------------------------------------- */
.category-models [hidden] { display: none !important; }

.category-models {
    display: flex;
    flex-direction: column;
}

.category-model-heading {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
}

.device-family-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body:not(:has(.admin-shell)) .category-models { padding: 12px; margin-bottom: 16px; border-radius: 8px; box-shadow: none; background: #fff; border: 1px solid var(--border-light); }
body:not(:has(.admin-shell)) .category-models { padding: 0; overflow: hidden; }
body:not(:has(.admin-shell)) .category-model-trigger {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 14px;
    list-style: none;
    cursor: pointer;
    background: #fff;
}
body:not(:has(.admin-shell)) .category-model-trigger::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .category-model-trigger:hover { background: #f8fbff; }
body:not(:has(.admin-shell)) .category-model-trigger:focus-visible { outline: 2px solid #2f6fe4; outline-offset: -2px; }
body:not(:has(.admin-shell)) .category-model-trigger-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eef5ff;
    color: #1768c5;
}
body:not(:has(.admin-shell)) .category-model-trigger-icon svg { width: 18px; height: 18px; }
body:not(:has(.admin-shell)) .category-models .category-model-heading { gap: 2px; margin: 0; font-size: 14px; }
body:not(:has(.admin-shell)) .category-models .category-model-heading small { font-size: 12px; }
body:not(:has(.admin-shell)) .category-model-chevron { color: #7c899a; transition: transform .18s ease; }
body:not(:has(.admin-shell)) .category-models[open] .category-model-chevron { transform: rotate(180deg); }
body:not(:has(.admin-shell)) .category-model-body { padding: 10px 12px 12px; border-top: 1px solid #e7edf5; background: #fafcff; }
body:not(:has(.admin-shell)) .category-models .device-family-options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }

body:not(:has(.admin-shell)) .device-family-group {
    background: #fdfdfd;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    overflow: hidden;
}
body:not(:has(.admin-shell)) .device-family-group[open] {
    border-color: #8db7e8;
    box-shadow: 0 4px 12px rgba(24, 89, 168, 0.08);
}

body:not(:has(.admin-shell)) .device-family-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 12px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    list-style: none; /* remove default arrow */
}
body:not(:has(.admin-shell)) .device-family-choice::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .device-family-choice strong { font-weight: 500; }
body:not(:has(.admin-shell)) .device-family-choice svg { color: #8c97a8; transition: transform 0.2s; }
body:not(:has(.admin-shell)) .device-family-group[open] .device-family-choice svg { transform: rotate(180deg); color: #1859a8; }
body:not(:has(.admin-shell)) .device-family-choice:hover { background: #f8fafb; }
body:not(:has(.admin-shell)) .device-family-group[open] .device-family-choice {
    background: #eef5ff;
    border-bottom: 1px solid #dce8f5;
    color: #1859a8;
}

body:not(:has(.admin-shell)) .device-family-dropdown {
    padding: 0;
    background: #fff;
}

body:not(:has(.admin-shell)) .category-model-tools { position: sticky; top: 0; z-index: 2; padding: 13px; background: #eaf4ff; border-bottom: 1px solid #c9def5; }
body:not(:has(.admin-shell)) .category-model-search-title { display: block; margin: 0 0 2px; color: #123b69; font-size: 14px; }
body:not(:has(.admin-shell)) .category-model-search-copy { display: block; margin: 0 0 9px; color: #506c8d; font-size: 11px; line-height: 1.4; }
body:not(:has(.admin-shell)) .category-models .category-model-search { position: relative; display: block; margin: 0; }
body:not(:has(.admin-shell)) .category-model-search-icon { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; color: #718096; transform: translateY(-50%); pointer-events: none; }
body:not(:has(.admin-shell)) .category-model-search-icon svg { display: block; width: 100%; height: 100%; }
body:not(:has(.admin-shell)) .category-models .category-model-search input { width: 100%; min-height: 46px; padding: 8px 12px 8px 36px; font-size: 14px; border-radius: 10px; border: 2px solid #70a8e4; background: #fff; box-shadow: 0 3px 10px rgba(26, 91, 163, .08); }
body:not(:has(.admin-shell)) .category-models .category-model-search input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); }
body:not(:has(.admin-shell)) .category-model-search-hint { margin: 7px 2px 0; color: #758196; font-size: 11px; line-height: 1.35; }
body:not(:has(.admin-shell)) .device-family-models { padding: 10px 12px 0; }
body:not(:has(.admin-shell)) .category-model-results-meta { margin-bottom: 8px; color: #64748b; font-size: 11px; font-weight: 600; }
body:not(:has(.admin-shell)) .category-model-scroll { max-height: none; overflow: visible; padding-right: 0; }
body:not(:has(.admin-shell)) .category-model-series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; }
body:not(:has(.admin-shell)) .category-model-series-grid .category-model-series { margin: 0; overflow: hidden; border: 1px solid #dbe4ef; border-radius: 9px; background: #fff; }
body:not(:has(.admin-shell)) .category-model-series-grid .category-model-series[open] { grid-column: 1 / -1; border-color: #9fc2e8; box-shadow: 0 4px 12px rgba(24, 89, 168, .07); }
body:not(:has(.admin-shell)) .category-model-series > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 11px; list-style: none; cursor: pointer; color: #243b55; font-size: 13px; font-weight: 700; }
body:not(:has(.admin-shell)) .category-model-series > summary::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .category-model-series:not([open]) > .category-model-series-body { display: none; }
body:not(:has(.admin-shell)) .category-model-series > summary small { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: #e9f2fc; color: #4c6e94; text-align: center; font-size: 10px; }
body:not(:has(.admin-shell)) .category-model-series[open] > summary { border-bottom: 1px solid #e2eaf3; background: #f2f7fd; color: #145da8; }
body:not(:has(.admin-shell)) .category-model-series-body { padding: 9px; }
body:not(:has(.admin-shell)) .category-model-series-more { width: 100%; min-height: 36px; margin-top: 7px; border: 1px solid #c9def4; border-radius: 7px; background: #eff6ff; color: #1764b5; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
body:not(:has(.admin-shell)) .category-model-series + .category-model-series { margin-top: 13px; }
body:not(:has(.admin-shell)) .category-model-series h4 { margin: 0 0 6px; color: #506074; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

body:not(:has(.admin-shell)) .category-models .category-model-options { 
    display: grid; 
    grid-template-columns: 1fr;
    margin: 0; 
    gap: 6px; 
}
body:not(:has(.admin-shell)) .category-models .category-model-choice { min-width: 0; min-height: 38px; padding: 8px 10px; gap: 8px; border: 1px solid transparent; border-radius: 8px; background: #f7f9fc; font-size: 13px; line-height: 1.3; box-shadow: none; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; }
body:not(:has(.admin-shell)) .category-models .category-model-choice:hover { background: #f0f4f8; border-color: #cdd8e4; }
body:not(:has(.admin-shell)) .category-models .category-model-choice strong { font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
body:not(:has(.admin-shell)) .category-models .category-model-choice small { flex-shrink: 0; padding: 2px 6px; background: #f0f2f5; color: #687585; font-size: 10px; border-radius: 4px; }
body:not(:has(.admin-shell)) .category-models .category-model-choice.active { background: #eef5ff; border-color: #8db7e8; color: #1859a8; }
body:not(:has(.admin-shell)) .category-models .category-model-choice.active small { background: #dce8f5; color: #1859a8; }
body:not(:has(.admin-shell)) .category-model-show-all { width: 100%; margin-top: 9px; padding: 9px 10px; border: 0; border-top: 1px solid #e7edf5; background: #fff; color: #1768c5; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
body:not(:has(.admin-shell)) .category-model-show-all:hover { background: #f5f9ff; }
body:not(:has(.admin-shell)) .category-model-show-all:focus-visible { outline: 2px solid #2f6fe4; outline-offset: -2px; }
body:not(:has(.admin-shell)) .category-model-empty { margin: 0; padding: 12px 4px 16px; color: #687585; font-size: 13px; }
body:not(:has(.admin-shell)) .device-family-all-link { padding: 10px 12px 12px; border-top: 1px solid #edf1f6; }

body:not(:has(.admin-shell)) .category-browse {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}
body:not(:has(.admin-shell)) .category-browse-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    border-bottom: 1px solid #e4eaf2;
    background: #f7faff;
}
body:not(:has(.admin-shell)) .category-browse-heading span {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body:not(:has(.admin-shell)) .category-browse-heading h2 {
    margin: 3px 0 0;
    color: #17283d;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.02em;
}
body:not(:has(.admin-shell)) .category-browse-heading p {
    max-width: 420px;
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
}
body:not(:has(.admin-shell)) .category-browse-grid {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(320px, 1.28fr);
    align-items: start;
}
body:not(:has(.admin-shell)) .category-brand-browse {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .category-browse-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
body:not(:has(.admin-shell)) .category-browse-label h3 {
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body:not(:has(.admin-shell)) .category-browse-label small {
    color: #7c899a;
    font-size: 11px;
}
body:not(:has(.admin-shell)) .category-brand-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
body:not(:has(.admin-shell)) .category-brand-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 38px;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f7f9fc;
    color: #334155;
    font-size: 12px;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .category-brand-choice:hover {
    border-color: #cdd8e4;
    background: #f0f4f8;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .category-brand-choice.active {
    border-color: #8db7e8;
    background: #eef5ff;
    color: #1859a8;
}
body:not(:has(.admin-shell)) .category-brand-choice strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .category-brand-choice small {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #e9eef5;
    color: #64748b;
    text-align: center;
}
body:not(:has(.admin-shell)) .category-brand-choice.active small { background: #dce8f5; color: #1859a8; }
body:not(:has(.admin-shell)) .category-browse .category-models--prominent {
    margin: 0;
    border: 0;
    border-radius: 0;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent > .category-model-trigger {
    min-height: 52px;
    border-bottom: 1px solid #e7edf5;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-body { padding: 12px 14px 14px; }
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 7px;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-group[open] {
    grid-column: 1 / -1;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-scroll {
    max-height: none;
}
body:not(:has(.admin-shell)) .category-browse-loading {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 18px;
}
body:not(:has(.admin-shell)) .category-browse-loading i {
    display: block;
    height: 40px;
    border-radius: 7px;
    background: linear-gradient(90deg, #f2f5f9 25%, #e8edf3 50%, #f2f5f9 75%);
    background-size: 200% 100%;
    animation: category-browse-loading 1.2s ease-in-out infinite;
}
@keyframes category-browse-loading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

body:not(:has(.admin-shell)) .housing-guide-heading {
    background: #f3f8ff;
}
body:not(:has(.admin-shell)) .housing-guide-steps {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
    align-items: start;
}
body:not(:has(.admin-shell)) .housing-guide-step {
    min-width: 0;
    padding: 14px;
}
body:not(:has(.admin-shell)) .housing-guide-step:first-child {
    grid-row: span 2;
    border-right: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .housing-guide-step:nth-child(2) {
    border-bottom: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .housing-result-step {
    padding-block: 12px;
}
body:not(:has(.admin-shell)) .housing-step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}
body:not(:has(.admin-shell)) .housing-step-heading > b {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 13px;
}
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b {
    background: #dcfce7;
    color: #15803d;
}
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b::after { content: "✓"; }
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b { font-size: 0; }
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b::after { font-size: 13px; }
body:not(:has(.admin-shell)) .housing-step-heading span { display: grid; gap: 2px; }
body:not(:has(.admin-shell)) .housing-step-heading strong { color: #17283d; font-size: 14px; }
body:not(:has(.admin-shell)) .housing-step-heading small { color: #64748b; font-size: 11px; line-height: 1.35; }
body:not(:has(.admin-shell)) .housing-guide .category-models--prominent {
    margin: 0;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
}
body:not(:has(.admin-shell)) .housing-part-options {
    display: grid;
    gap: 6px;
}
body:not(:has(.admin-shell)) .housing-part-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .housing-part-choice:hover {
    border-color: #9abfe9;
    background: #f8fbff;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .housing-part-choice.active {
    border-color: #72a7e5;
    background: #eef5ff;
    color: #1859a8;
}
body:not(:has(.admin-shell)) .housing-part-choice > span { display: grid; gap: 2px; min-width: 0; }
body:not(:has(.admin-shell)) .housing-part-choice strong { font-size: 13px; }
body:not(:has(.admin-shell)) .housing-part-choice small { color: #718096; font-size: 10px; line-height: 1.3; }
body:not(:has(.admin-shell)) .housing-part-choice b {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 5px;
    background: #eef2f7;
    color: #64748b;
    font-size: 11px;
}
body:not(:has(.admin-shell)) .housing-step-locked,
body:not(:has(.admin-shell)) .housing-products-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px dashed #cdd8e4;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
}
body:not(:has(.admin-shell)) .housing-step-locked > span {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8edf3;
    font-weight: 700;
}
body:not(:has(.admin-shell)) .housing-step-locked p,
body:not(:has(.admin-shell)) .housing-products-locked p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; }
body:not(:has(.admin-shell)) .housing-products-locked { display: block; margin-top: 12px; }

@media (max-width: 900px) {
    body:not(:has(.admin-shell)) .housing-guide-steps { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .housing-guide-step:first-child { grid-row: auto; border-right: 0; border-bottom: 1px solid #e4eaf2; }
}

@media (max-width: 760px) {
    body:not(:has(.admin-shell)) .category-browse-heading { align-items: start; flex-direction: column; gap: 6px; }
    body:not(:has(.admin-shell)) .category-browse-heading p { text-align: left; }
    body:not(:has(.admin-shell)) .category-browse-grid { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-brand-browse { border-right: 0; border-bottom: 1px solid #e4eaf2; }
    body:not(:has(.admin-shell)) .category-brand-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 214px; }
    body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-options { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-options { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-browse-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    body:not(:has(.admin-shell)) .category-models .category-model-options { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-models .category-model-choice { min-height: 40px; }
    body:not(:has(.admin-shell)) .category-model-scroll { max-height: min(46svh, 380px); }
}

/*===assets/themes/ferry-main/b2b-catalog.css===*//* B2B Catalog Table & Search Styling */

/* Calm, task-led catalogue filters */
body:not(:has(.admin-shell)) .catalog-desktop-filters {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e8edf3;
}

body:not(:has(.admin-shell)) .catalog-desktop-filters > h3 {
    margin: 0 0 16px;
    color: #738196;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:not(:has(.admin-shell)) .catalog-sidebar .device-fields,
body:not(:has(.admin-shell)) .filter-dialog .device-fields {
    gap: 10px;
}

@media (min-width: 1000px) {
    body:not(:has(.admin-shell)) .catalog-sidebar {
        flex: 0 0 256px;
    }

    body:not(:has(.admin-shell)) .catalog-main {
        min-width: 0;
    }
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step {
    position: relative;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step::before {
    display: none;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step > label,
body:not(:has(.admin-shell)) .advanced-filters .field > label {
    display: block;
    margin: 0 0 6px;
    color: #637087;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step .form-control {
    min-height: 36px;
    padding: 6px 9px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 0.8125rem;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step .model-picker summary {
    min-height: 42px;
    align-items: flex-start;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step .model-caption {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-height: 2.7em;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover {
    right: auto;
    width: min(300px, calc(100vw - 32px));
    max-height: min(68vh, 540px);
    border-radius: 12px;
    overflow: hidden;
}

body:not(:has(.admin-shell)) .discovery-filters .model-search-wrap {
    position: relative;
    display: block;
    margin: 12px 12px 0;
}

body:not(:has(.admin-shell)) .discovery-filters .model-search-wrap svg {
    position: absolute;
    z-index: 1;
    left: 11px;
    top: 50%;
    width: 17px;
    height: 17px;
    color: #718096;
    transform: translateY(-50%);
    pointer-events: none;
}

body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover .model-search {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px;
    background: #f8fafc;
    border-color: #dce4ee;
    border-radius: 10px;
    font-size: 0.8rem;
}

body:not(:has(.admin-shell)) .discovery-filters .model-search-help {
    margin: 7px 14px 10px;
    color: #738095;
    font-size: 0.68rem;
    line-height: 1.35;
}

body:not(:has(.admin-shell)) .discovery-filters .model-options {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

body:not(:has(.admin-shell)) .discovery-filters .model-options-scroll {
    max-height: min(42vh, 330px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 8px 8px;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option {
    min-height: 39px;
    margin: 2px 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f7f9fc;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option span {
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option-all {
    min-height: 36px;
    margin: 0 12px 7px;
    width: auto;
    color: #526176;
    background: #fff;
    border: 1px solid #e7edf5;
}

body:not(:has(.admin-shell)) .discovery-filters .model-result-count {
    margin: 0 12px 7px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option-group + .model-option-group {
    margin-top: 12px;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option-group h4 {
    margin: 0 3px 5px;
    color: #526176;
    font-size: 0.66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body:not(:has(.admin-shell)) .discovery-filters .model-show-all {
    flex: none;
    min-height: 40px;
    border: 0;
    border-top: 1px solid #e7edf5;
    background: #fff;
    color: #1768c5;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}

body:not(:has(.admin-shell)) .discovery-filters .model-show-all:hover {
    background: #f5f9ff;
}

@media (max-width: 760px) {
    body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover {
        right: 0;
        width: 100%;
    }
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step:focus-within {
    border-color: #94a3b8;
    box-shadow: inset 2px 0 0 #3b82f6;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step.has-value {
    border-color: #cbd5e1;
    background: #f8fafc;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step.has-value::before {
    display: none;
}

body:not(:has(.admin-shell)) .advanced-filters {
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
    border-bottom: 1px solid #e8edf3;
}

body:not(:has(.admin-shell)) .advanced-filters > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 2px;
    color: #42546b;
    list-style: none;
}

body:not(:has(.admin-shell)) .advanced-filters > summary::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .advanced-filters > summary::after {
    content: "+";
    color: #6c7d91;
    font-size: 1rem;
}
body:not(:has(.admin-shell)) .advanced-filters[open] > summary::after { content: "−"; }

body:not(:has(.admin-shell)) .advanced-filters .field {
    margin: 6px 0 12px;
}

body:not(:has(.admin-shell)) .advanced-filters .form-control {
    min-height: 40px;
    font-size: 0.8125rem;
}

body:not(:has(.admin-shell)) .filter-auto-hint {
    margin: 11px 0 0;
    color: #8190a3;
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* B2B Products Wrapper */
.b2b-products {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    overflow: visible;
    margin: 1rem 0;
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products,
body:not(:has(.admin-shell)) .catalog-empty-surface {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--catalog-shell-border, var(--border-light));
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--catalog-shell-shadow, 0 2px 8px rgba(15, 23, 42, 0.035));
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products {
    border: 1px solid var(--catalog-shell-border, var(--border-light));
}

body:not(:has(.admin-shell)) .b2b-products-toolbar {
    display: flex;
    min-height: 48px;
    padding: 7px 12px;
    align-items: center;
    justify-content: flex-end;
    background: var(--catalog-header-surface, #f5f5f7);
    border-bottom: 1px solid var(--catalog-shell-border, var(--border-light));
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th {
    height: 56px;
    background: var(--catalog-header-surface, #f5f5f7);
    border-radius: 0;
    box-sizing: border-box;
}

body:not(:has(.admin-shell)) .catalog-empty-surface .empty-state {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Dense Table */
.b2b-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.b2b-table th {
    background: var(--catalog-header-surface, #f5f5f7);
    font-weight: 600;
    color: var(--apple-muted);
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th:first-child,
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th:last-child {
    border-radius: 0;
}

.b2b-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.b2b-table tr:last-child td {
    border-bottom: none;
}

.b2b-table tr:hover {
    background: #fcfcfc;
}

/* Columns */
.col-img { width: 68px; padding-right: 0 !important; }
.col-product { min-width: 300px; }
.col-stock { width: 125px; }
.col-price { width: 135px; font-weight: 600; }
.col-order { width: 155px; }

/* Image */
.b2b-img-wrap {
    display: flex;
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    text-decoration: none;
}

.b2b-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.b2b-img-wrap:hover img {
    transform: scale(1.06);
}

.b2b-img-wrap.no-img svg {
    width: 30px;
    height: 30px;
    color: #52799e;
}

.b2b-img-wrap.no-img {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.92), transparent 42%),
        linear-gradient(145deg, #f2f7fb, #e7f0f8);
    border-color: #d5e2ee;
}

.b2b-img-wrap.no-img:hover {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.96), transparent 42%),
        linear-gradient(145deg, #edf5fb, #dceaf5);
    border-color: #b9cee0;
}

/* Product Info */
.b2b-prod-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
    line-height: 1.22;
}

.b2b-prod-title a { color: #1d1d1f; text-decoration: none; transition: color 0.2s ease; }
body:not(:has(.admin-shell)) .b2b-prod-title a:hover,
body:not(:has(.admin-shell)) .b2b-prod-title a:focus-visible {
    color: var(--primary);
    text-decoration: none;
}

.b2b-prod-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.b2b-sku {
    color: var(--apple-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.b2b-badge {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

.b2b-badge.quality {
    background: #fff0e6;
    color: #e56000;
}

.b2b-badge.type {
    background: #f0f0f5;
    color: #555;
}

.b2b-prod-models {
    color: var(--apple-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Stock */
.b2b-stock-indicator {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
}
.b2b-dot { width: 8px; height: 8px; border-radius: 50%; }
.b2b-stock-ok { color: #1f7a37; }
.b2b-stock-ok .b2b-dot { background: #34c759; }
.b2b-stock-out { color: #c72c22; }
.b2b-stock-out .b2b-dot { background: #ff3b30; }

.b2b-min-qty-warn {
    font-size: 0.75rem;
    color: #ff3b30;
    margin-top: 0.25rem;
    font-weight: 600;
}

/* Price */
.b2b-price {
    font-size: 1rem;
    line-height: 1.35;
}
.b2b-login-link {
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
}

/* Order Controls */
.b2b-order-controls {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.b2b-qty-input {
    width: 54px;
    height: 34px;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    background: #fff;
    color: #1d1d1f;
}
.b2b-qty-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,113,227,0.15);
}

.b2b-add-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.b2b-add-btn:hover:not(:disabled) {
    background: var(--primary-hover);
}

.b2b-add-btn.loading {
    background: var(--apple-muted);
    pointer-events: none;
}

.b2b-add-btn.success {
    background: #34c759;
}

.b2b-row-feedback {
    width: max-content;
    max-width: 100%;
    min-height: 0;
    margin-top: 0.3rem;
    padding: 0;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.35;
}
.b2b-row-feedback:empty { display: none; }
.b2b-row-feedback.success {
    padding: 0.22rem 0.5rem;
    background: #edf8f0;
    color: #1f7a37;
    font-weight: 650;
}
.b2b-row-feedback.success::before { content: "✓"; margin-right: 0.3rem; }
.b2b-row-feedback.error { color: #c72c22; font-weight: 600; }
.b2b-row-feedback.is-adding { color: #607087; }

.b2b-staff-note {
    font-size: 0.75rem;
    color: var(--apple-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.b2b-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--apple-muted);
    font-size: 0.9375rem;
}

/* Catalogue refreshes retain the last useful table, rather than swapping the
   entire page for a loader. The veil is deliberately light so row geometry
   remains stable and the filter rail can accept the next selection. */
[data-catalog-shell] { position: relative; }
.catalog-refresh-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 42%;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
    animation: catalog-progress 1.05s ease-in-out infinite;
}
.is-catalog-refreshing [data-catalog-results]::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: auto;
    background: linear-gradient(105deg, rgba(255,255,255,.38), rgba(245,248,252,.62), rgba(255,255,255,.38));
    background-size: 200% 100%;
    animation: catalog-veil 1.2s linear infinite;
}
.is-catalog-refreshing [data-catalog-results] { position: relative; opacity: 1; }
.catalog-refresh-error {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
    padding: .55rem .75rem;
    color: #9f2f26;
    background: #fff5f4;
    border: 1px solid #f0d1cd;
    border-radius: 7px;
    font-size: .8125rem;
}
.catalog-refresh-error .btn { padding: .35rem .65rem; font-size: .75rem; }
.catalog-skeleton { padding-top: 1.25rem; }
.catalog-skeleton i { display: block; border-radius: 6px; background: #e7ebf0; }
.catalog-skeleton-heading { margin: .85rem 0 1.5rem; }
.catalog-skeleton-heading h1 { margin: .32rem 0 .25rem; font-size: clamp(1.45rem, 2.5vw, 2rem); color: var(--apple-text); }
.catalog-skeleton-heading p { margin: 0; color: var(--apple-muted); font-size: .875rem; }
.catalog-skeleton .catalog-sidebar { display: block; }
.catalog-skeleton-side-title { padding: 1rem 1rem .85rem; border-bottom: 1px solid #edf0f3; }
.catalog-skeleton-side-title i:first-child { width: 28%; height: 9px; margin-bottom: .65rem; }
.catalog-skeleton-side-title i:last-child { width: 68%; height: 18px; }
.catalog-skeleton-side-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: .7rem; min-height: 52px; padding: .55rem .75rem; }
.catalog-skeleton-side-row > i { width: 30px; height: 30px; }
.catalog-skeleton-side-row span i { width: 68%; height: 11px; }
.catalog-skeleton-toolbar { display: flex; justify-content: flex-end; align-items: center; height: 48px; padding: 0 12px; margin-bottom: 0; border: 1px solid #edf0f3; border-bottom: 0; border-radius: 8px 8px 0 0; }
.catalog-skeleton-toolbar i { width: 155px; height: 34px; }
.catalog-skeleton-row { display: grid; grid-template-columns: 58px minmax(180px, 1fr) 112px 82px 70px; align-items: center; gap: 1rem; min-height: 92px; padding: .75rem 1rem; border-bottom: 1px solid #edf0f3; }
.catalog-skeleton-photo { width: 54px; height: 62px; }
.catalog-skeleton-copy { display: grid; gap: .45rem; }
.catalog-skeleton-copy i:first-child { width: min(360px, 84%); height: 13px; }
.catalog-skeleton-copy i:nth-child(2) { width: 42%; height: 9px; }
.catalog-skeleton-copy i:last-child { width: 58%; height: 9px; }
.catalog-skeleton-stock { width: 76px; height: 12px; }
.catalog-skeleton-price { width: 62px; height: 16px; }
.catalog-skeleton-action { width: 42px; height: 34px; justify-self: end; }
.catalog-skeleton .b2b-products { overflow: hidden; border: 1px solid #edf0f3; border-radius: 0 0 8px 8px; background: #fff; }
.catalog-skeleton i { background: linear-gradient(100deg, #e9edf2 25%, #f5f7fa 45%, #e9edf2 65%); background-size: 220% 100%; animation: catalog-skeleton-shimmer 1.25s ease-in-out infinite; }
.catalog-result-status {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@keyframes catalog-progress { 0% { transform: translateX(-105%); } 100% { transform: translateX(340%); } }
@keyframes catalog-veil { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@keyframes catalog-skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
    .catalog-refresh-progress, .is-catalog-refreshing [data-catalog-results]::after, .catalog-skeleton i { animation: none; }
}

@media (max-width: 768px) {
    .catalog-skeleton-heading { margin: .6rem 0 1rem; padding: 0 .15rem; }
    .catalog-skeleton .catalog-sidebar { display: none; }
    .catalog-skeleton-toolbar { height: 54px; padding: 0 10px; }
    .catalog-skeleton-toolbar i { width: min(72%, 280px); height: 38px; }
    .catalog-skeleton-row {
        grid-template-columns: 54px minmax(0, 1fr) 42px;
        grid-template-areas:
            "photo copy action"
            "photo stock price";
        gap: .45rem .75rem;
        min-height: 112px;
        padding: .8rem .75rem;
    }
    .catalog-skeleton-photo { grid-area: photo; width: 50px; height: 66px; }
    .catalog-skeleton-copy { grid-area: copy; }
    .catalog-skeleton-stock { grid-area: stock; width: 74px; }
    .catalog-skeleton-price { grid-area: price; width: 56px; justify-self: end; }
    .catalog-skeleton-action { grid-area: action; width: 38px; height: 34px; }
}

/* B2B Menu Navigation */
.store-menu {
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
}

.store-menu-container {
    display: flex;
}

.b2b-menu-wrapper {
    position: relative;
    display: inline-block;
}

.b2b-menu-btn {
    background: #3967d6; /* screenshot blue */
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.b2b-menu-btn:hover, .b2b-menu-btn.active {
    background: #2a52b3;
}

.b2b-menu-btn .chevron {
    transition: transform 0.2s;
    margin-left: 0.25rem;
}
.b2b-menu-btn.active .chevron {
    transform: rotate(180deg);
}

.b2b-menu-dropdown[hidden] {
    display: none !important;
}

.b2b-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 75vh;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.b2b-menu-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    height: 100%;
}

.b2b-menu-slider {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
}

.b2b-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 0;
}

.b2b-panel-active { transform: translateX(0); z-index: 2; }
.b2b-panel-hidden-left { transform: translateX(-100%); visibility: hidden; }
.b2b-panel-hidden-right, .b2b-panel-hidden { transform: translateX(100%); visibility: hidden; }

.b2b-menu-group { margin-bottom: 0.5rem; }

.b2b-menu-heading {
    font-size: 1rem;
    font-weight: 800;
    padding: 1rem 1.25rem 0.5rem;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.b2b-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9375rem;
    color: #1d1d1f;
    cursor: pointer;
    text-decoration: none;
}

.b2b-menu-item:hover {
    background: #f5f5f7;
    text-decoration: none;
}

.b2b-menu-item.b2b-has-children {
    justify-content: space-between;
}

.b2b-menu-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    width: 100%;
    background: #f5f5f7;
    border: none;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    color: #1d1d1f;
}
.b2b-menu-back:hover { background: #e8e8ed; }

.b2b-menu-all {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
}

.instant-search {
    position: relative;
}

/* MAIN Search Markup */
.b2b-search-results[role="dialog"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    margin-top: 4px;
}

/* Smart Search is one shared fast-order component in the homepage, header,
   and catalogue. Keep its context and category choices structured everywhere. */
.b2b-search-results .smart-search-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border-light);
    background: #f7faff;
    color: #66758a;
    font-size: 0.72rem;
}
.b2b-search-results .smart-search-context > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.b2b-search-results .smart-search-context > span + span::before {
    content: "›";
    margin-right: 0.25rem;
    color: var(--primary);
    font-weight: 700;
}
.b2b-search-results .smart-search-understood {
    margin-right: auto;
    color: #263449;
}
.b2b-search-results .smart-search-understood strong { color: var(--primary); }
.b2b-search-results .smart-search-parts {
    padding: 0.75rem 1rem 0.875rem;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
}
.b2b-search-results .smart-search-parts > p {
    margin: 0 0 0.55rem;
    color: #263449;
    font-size: 0.75rem;
    font-weight: 700;
}
.b2b-search-results .smart-search-part-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.5rem;
}
.b2b-search-results .smart-search-part {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    min-height: 58px;
    padding: 0.4rem 0.55rem;
    border: 1px solid #dfe7f1;
    border-radius: 9px;
    background: #f8fbff;
    color: #263449;
    text-decoration: none;
}
.b2b-search-results .smart-search-part:hover,
.b2b-search-results .smart-search-part:focus-visible {
    border-color: #9fc5f1;
    background: #f1f7ff;
    text-decoration: none;
}
.b2b-search-results .smart-search-part-media,
.b2b-search-results .smart-search-part-media img {
    width: 44px;
    height: 44px;
}
.b2b-search-results .smart-search-part-media img {
    object-fit: contain;
    border-radius: 6px;
}
.b2b-search-results .smart-search-part-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.b2b-search-results .smart-search-part-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}
.b2b-search-results .smart-search-part-copy small {
    color: #718096;
    font-size: 0.7rem;
}

.b2b-products .sr-only,
.b2b-search-results .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;
}

.b2b-suggestion {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border-light);
}
.b2b-suggestion:last-child { border-bottom: none; }
.b2b-suggestion:hover { background: #fcfcfc; }

.b2b-suggestion-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.b2b-suggestion-link:hover { text-decoration: none; }

.b2b-suggestion-link img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 2px;
}

.b2b-suggestion-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.b2b-suggestion-info strong {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1d1d1f;
}

.b2b-suggestion-info small {
    font-size: 0.75rem;
    color: var(--apple-muted);
}

.b2b-suggestion-price {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1d1d1f;
    white-space: nowrap;
}

.b2b-suggestion-order {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.b2b-suggestion-order input {
    width: 50px;
    height: 32px;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
}

.b2b-add {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 0.75rem;
    height: 32px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.b2b-add:hover { background: var(--primary-hover); }

/* Responsive Grid -> List Fallback for Mobile Table */
@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .b2b-products-toolbar {
        min-height: 54px;
        padding: 8px 10px;
    }
    body:not(:has(.admin-shell)) .b2b-products-toolbar .catalog-sort {
        width: 100%;
        justify-content: space-between;
    }
    body:not(:has(.admin-shell)) .b2b-products-toolbar .catalog-sort select {
        min-width: 0;
        max-width: min(72%, 280px);
    }
    .b2b-table, .b2b-table tbody { display: block; width: 100%; min-width: 0; }
    .b2b-table thead { display: none; }
    .b2b-table tr {
        display: block;
        padding: 0.75rem;
        position: relative;
        border-bottom: 5px solid var(--apple-bg);
    }
    .b2b-table td {
        display: block;
        padding: 0;
        border: none;
        width: 100% !important;
    }
    .col-img {
        position: absolute;
        top: 0.85rem;
        left: 0.75rem;
        width: 56px !important;
    }
    .b2b-img-wrap { width: 56px; height: 56px; }
    
    .col-product {
        padding-left: 68px !important;
        margin-bottom: 0.4rem;
        min-height: 56px;
    }
    .b2b-prod-models { white-space: normal; max-width: none; }
    
    .col-stock {
        padding-left: 68px !important;
        margin-bottom: 0.25rem;
    }
    
    .col-price {
        padding-left: 68px !important;
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    
    .col-order {
        padding-left: 68px !important;
    }
    .b2b-order-controls {
        width: auto;
        max-width: 126px;
        gap: 6px;
    }
    .b2b-qty-input { flex: 0 0 66px; width: 66px; max-width: 66px; height: 40px; font-size: 1rem; }
    .b2b-add-btn { flex: 0 0 48px; width: 48px; height: 40px; }

    /* Search suggestion mobile */
    .b2b-suggestion {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }
    .b2b-suggestion-link { grid-column: 1 / -1; width: auto; }
    .b2b-suggestion-info strong { white-space: normal; overflow-wrap: anywhere; }
    .b2b-suggestion-price { margin: 0; min-width: 0; white-space: normal; }
    .b2b-suggestion-order { margin: 0; min-width: 0; justify-content: flex-end; gap: 0.35rem; }
    .b2b-suggestion-order input { flex: 0 0 48px; width: 48px; min-width: 0; height: 40px; font-size: 16px; }
    .b2b-suggestion-order .b2b-add { flex: 0 0 auto; width: auto; min-width: 0; height: 40px; padding: 0 0.6rem; white-space: nowrap; letter-spacing: normal; }
    .b2b-suggestion > .b2b-row-feedback { grid-column: 1 / -1; min-width: 0; }
    .b2b-search-results .smart-search-context {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .b2b-search-results .smart-search-understood { grid-column: 1 / -1; margin-right: 0; }
    body:not(:has(.admin-shell)) .instant-home .instant-category-options { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
}

/* Search results behave as a distinct, visibly scrollable pop-out workspace. */
.b2b-search-results[role="dialog"] {
    top: calc(100% + 14px);
    left: -12px;
    right: auto;
    width: min(960px, calc(100vw - 48px));
    max-height: min(68vh, 660px);
    margin-top: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 2px solid #77aef0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(20, 54, 96, 0.24), 0 6px 20px rgba(20, 54, 96, 0.12);
    scrollbar-color: #3580d8 #eaf2fb;
    scrollbar-width: auto;
    transform-origin: top center;
}
.b2b-search-results[role="dialog"]::-webkit-scrollbar { width: 14px; }
.b2b-search-results[role="dialog"]::-webkit-scrollbar-track { background: #eaf2fb; border-radius: 0 16px 16px 0; }
.b2b-search-results[role="dialog"]::-webkit-scrollbar-thumb { background: #3580d8; border: 3px solid #eaf2fb; border-radius: 999px; }
.b2b-search-results.search-popout-enter { animation: search-popout-enter .28s cubic-bezier(.2,.82,.28,1) both; }
@keyframes search-popout-enter {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.search-popout-active .lp-search-field,
.search-popout-active.catalog-smart-form .catalog-smart-field,
.search-popout-active .catalog-smart-field {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(100deg, #1677ff, #7c3aed, #ec4899, #f59e0b, #10b981, #1677ff) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 0 0 0 5px rgba(31, 111, 235, .12), 0 12px 34px rgba(27, 92, 172, .18);
    animation: active-search-rainbow 2.4s linear infinite;
}
@keyframes active-search-rainbow {
    to { background-position: 0 0, 300% 0; }
}
.b2b-search-results .suggestion-group-title {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid #dce6f2;
    background: rgba(248, 251, 255, .97);
    backdrop-filter: blur(12px);
}
.b2b-search-results .suggestion-group-title > span { display: grid; gap: 2px; }
.b2b-search-results .suggestion-group-title strong { color: #17283d; font-size: 14px; letter-spacing: 0; text-transform: none; }
.b2b-search-results .suggestion-group-title small { color: #68778b; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.search-popout-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cedaea;
    border-radius: 50%;
    background: #fff;
    color: #40516a;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
.search-popout-close:hover { border-color: #76a9e6; background: #edf5ff; color: #145cae; }
.search-scroll-cue {
    position: sticky;
    bottom: 50px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: -42px auto 8px;
    padding: 7px 13px;
    border: 1px solid #b8d5f6;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 18px rgba(24, 78, 143, .18);
    color: #175fae;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}
.search-scroll-cue[hidden] { display: none; }
.search-scroll-cue svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    animation: search-cue-bounce .9s ease-in-out infinite alternate;
}
@keyframes search-cue-bounce { to { transform: translateY(3px); } }
.b2b-search-results .suggestion-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    min-height: 50px;
    padding: 14px 18px;
    border-top: 1px solid #d7e3f1;
    background: #edf5ff;
    color: #145cae;
    font-weight: 700;
}
.b2b-suggestion:has(.b2b-suggestion-link:focus-visible),
.b2b-suggestion:has(.b2b-suggestion-link.is-active) {
    background: #edf5ff;
    box-shadow: inset 4px 0 #2878d0;
}

@media (max-width: 760px) {
    body.search-popout-mobile-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 2998;
        background: rgba(10, 25, 45, .34);
        backdrop-filter: blur(2px);
    }
    .b2b-search-results[role="dialog"] {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 2999;
        width: auto;
        max-height: none;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .b2b-search-results.search-popout-enter,
    .search-popout-active .lp-search-field,
    .search-popout-active.catalog-smart-form .catalog-smart-field,
    .search-popout-active .catalog-smart-field,
    .search-scroll-cue svg { animation: none; }
}

/* A selected model owns a local product search. It never opens Smart Search. */
body:not(:has(.admin-shell)) .model-part-search {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
    align-items: center;
    gap: 18px;
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid #bfd5f0;
    border-radius: 10px;
    background: linear-gradient(110deg, #f3f8ff, #fff);
    box-shadow: 0 4px 16px rgba(32, 91, 157, .08);
}
body:not(:has(.admin-shell)) .model-part-search-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
body:not(:has(.admin-shell)) .model-part-search-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #e2efff;
    color: #1765be;
}
body:not(:has(.admin-shell)) .model-part-search-icon svg { width: 20px; height: 20px; }
body:not(:has(.admin-shell)) .model-part-search h2 {
    margin: 0 0 2px;
    color: #17283d;
    font-size: 14px;
    line-height: 1.3;
}
body:not(:has(.admin-shell)) .model-part-search p {
    margin: 0;
    color: #617188;
    font-size: 11px;
    line-height: 1.4;
}
body:not(:has(.admin-shell)) .model-part-search-form {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
body:not(:has(.admin-shell)) .model-part-search-form > .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;
}
body:not(:has(.admin-shell)) .model-part-search-field {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding-left: 12px;
    border: 1px solid #aebfd4;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(20, 45, 75, .04);
}
body:not(:has(.admin-shell)) .model-part-search-field:focus-within {
    border-color: #2878d0;
    box-shadow: 0 0 0 3px rgba(40, 120, 208, .14);
}
body:not(:has(.admin-shell)) .model-part-search-field > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #6c7d92;
}
body:not(:has(.admin-shell)) .model-part-search-field input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #17283d;
    font: inherit;
    font-size: 13px;
}
body:not(:has(.admin-shell)) .model-part-search-field button {
    align-self: stretch;
    margin: 4px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: #2878d0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .model-part-search-field button:hover { background: #1765b9; }
body:not(:has(.admin-shell)) .model-part-search-clear {
    flex: 0 0 auto;
    color: #52657c;
    font-size: 11px;
    font-weight: 650;
}

@media (max-width: 900px) {
    body:not(:has(.admin-shell)) .model-part-search {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
@media (max-width: 560px) {
    body:not(:has(.admin-shell)) .model-part-search { padding: 13px; }
    body:not(:has(.admin-shell)) .model-part-search-form { align-items: stretch; flex-direction: column; }
    body:not(:has(.admin-shell)) .model-part-search-field {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        min-height: 46px;
        padding: 8px 10px 10px;
    }
    body:not(:has(.admin-shell)) .model-part-search-field input { width: 100%; padding-right: 0; }
    body:not(:has(.admin-shell)) .model-part-search-field button {
        grid-column: 1 / -1;
        min-height: 40px;
        margin: 4px 0 0;
        padding: 0 10px;
    }
    body:not(:has(.admin-shell)) .model-part-search-clear { align-self: flex-start; padding: 3px 0; }
}

/*===assets/themes/ferry-main/category-rail.css===*//* Category rail — redesigned as image-led category tiles */

body:not(:has(.admin-shell)) .quick-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    overflow: visible;
    padding: 2px 2px 4px;
    margin-bottom: 24px;
}

body:not(:has(.admin-shell)) .quick-category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 104px;
    min-height: 104px;
    padding: 12px 8px;
    gap: 8px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
    color: #1d1d1f;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 27, 46, 0.02);
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

body:not(:has(.admin-shell)) .quick-category span {
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
}

body:not(:has(.admin-shell)) .quick-category small {
    display: none;
}

body:not(:has(.admin-shell)) .quick-category-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}

body:not(:has(.admin-shell)) .quick-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

body:not(:has(.admin-shell)) .quick-category-thumb.is-glyph svg {
    width: 24px;
    height: 24px;
    color: #6a7c92;
    transition: transform 0.2s ease, color 0.2s ease;
}

body:not(:has(.admin-shell)) .quick-category:hover {
    transform: translateY(-2px);
    border-color: #c9d6ea;
    box-shadow: 0 6px 12px rgba(21, 42, 82, 0.05);
}
body:not(:has(.admin-shell)) .quick-category:hover .quick-category-thumb img {
    transform: scale(1.08);
}
body:not(:has(.admin-shell)) .quick-category:hover .quick-category-thumb.is-glyph svg {
    transform: scale(1.08);
    color: var(--primary);
}

body:not(:has(.admin-shell)) .quick-category:focus-visible {
    outline: 2px solid #2f6fe4;
    outline-offset: 2px;
}

body:not(:has(.admin-shell)) .quick-category.active,
body:not(:has(.admin-shell)) .quick-category[aria-current="page"] {
    background: #f4f8fe;
    border-color: #a3c2ea;
    box-shadow: inset 0 0 0 1px #e3edfa;
    color: var(--primary);
}

body:not(:has(.admin-shell)) .quick-category.active .quick-category-thumb.is-glyph svg {
    color: var(--primary);
}

@media (max-width: 640px) {
    body:not(:has(.admin-shell)) .quick-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 6px;
        margin-bottom: 14px;
    }
    body:not(:has(.admin-shell)) .quick-categories::-webkit-scrollbar { display: none; }
    body:not(:has(.admin-shell)) .quick-category {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/*===assets/css/reference-storefront.css===*//* Storefront language switcher: deliberately independent from country/currency controls. */
.language-control { display:flex; align-items:center; margin-left:.35rem; }
/* ==========================================================================
   Ferry Telecom - Native Frontend Styles (Tech Counter Aesthetic)
   ========================================================================== */

:root {
  /* Brand Colors */
  --primary: hsl(217, 91%, 60%);
  --primary-hover: hsl(217, 91%, 50%);
  --primary-active: hsl(217, 91%, 40%);
  --primary-light: hsl(217, 91%, 95%);

  /* Backgrounds */
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f1f5f9;

  /* Typography */
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Borders */
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --border-focus: #93c5fd;

  /* Status Colors */
  --danger: hsl(350, 70%, 50%);
  --danger-hover: hsl(350, 70%, 40%);
  --danger-bg: hsl(350, 70%, 97%);
  --danger-border: hsl(350, 70%, 90%);
  
  --success: hsl(150, 70%, 40%);
  --success-bg: hsl(150, 70%, 96%);
  --success-border: hsl(150, 70%, 85%);
  
  --warning: hsl(35, 90%, 45%);
  --warning-bg: hsl(35, 90%, 97%);
  --warning-border: hsl(35, 90%, 85%);

  /* Sizing & Effects */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Keep centred storefront containers fixed when short model result pages lose
   their vertical scrollbar during an in-place catalogue refresh. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text-main); }

/* Utilities */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

.main-content { min-height: calc(100svh - 10rem); }

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.test-banner { background: var(--text-main); color: var(--warning); text-align: center; padding: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.search-input-wrapper:focus-within { background: var(--bg-surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.search-suggestions { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-float); overflow: hidden; z-index: 200; max-height: 80vh; overflow-y: auto; }

.user-nav { display: flex; align-items: center; gap: 1.5rem; }
.cart-flyer {
    position: fixed;
    z-index: 3000;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(38, 105, 187, .18);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(20, 74, 140, .24);
    pointer-events: none;
    will-change: transform, opacity;
}
.nav-cart.cart-receiving .cart-icon-wrapper {
    animation: cart-receive-pulse .56s cubic-bezier(.2,.8,.25,1);
}
@keyframes cart-receive-pulse {
    0%,100% { transform: scale(1); }
    42% { transform: scale(1.22) rotate(-4deg); }
    68% { transform: scale(.96) rotate(2deg); }
}
.part-add-btn {
    transition: transform .14s ease, background-color .14s ease, opacity .14s ease;
}
.part-add-btn.is-adding,
.part-add-btn[data-pending="true"] {
    opacity: .82;
    transform: scale(.93);
}
@media (prefers-reduced-motion: reduce) {
    .nav-cart.cart-receiving .cart-icon-wrapper { animation-duration: .01ms; }
    .part-add-btn { transition-duration: .01ms; }
}

/* Ferry Main catalogue menu: keep the panel inside the viewport and scroll
   its contents independently so long model lists never stretch the page. */
@media (min-width: 769px) {
    body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
        position: fixed;
        top: var(--fm-menu-top, 150px);
        left: 50%;
        right: auto;
        width: min(1120px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        max-height: min(80vh, calc(100vh - var(--fm-menu-top, 150px) - 12px));
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(-50%);
        overscroll-behavior: contain;
    }
}
body:not(:has(.admin-shell)) .b2b-model-series {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
body:not(:has(.admin-shell)) .b2b-model-series-group,
body:not(:has(.admin-shell)) .b2b-model-links,
body:not(:has(.admin-shell)) .b2b-series-body {
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 980px) {
    body:not(:has(.admin-shell)) .b2b-model-series { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    body:not(:has(.admin-shell)) .b2b-model-series { grid-template-columns: minmax(0, 1fr); }
    body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        transform: none;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li {
    display: block;
    position: relative;
    list-style: none;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li > a {
    display: grid;
    place-items: center;
    border: 1px solid #d8e2ef;
    border-radius: 50%;
    background: #fff;
    color: #263c58;
    text-decoration: none;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li > a:hover,
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu > li > a:focus-visible {
    border-color: #90bdf0;
    background: #f1f7ff;
    color: #0869d8;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) .app-header .extras-menu .mini-item-counter {
    top: 0;
    right: 0;
}

/* ==========================================================================
   Buttons & Forms
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all 0.2s; text-align: center; font-variant-numeric: tabular-nums; }

.form-group { margin-bottom: 1.25rem; }

.check-label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; }

/* ==========================================================================
   Alerts & Badges
   ========================================================================== */
.alert { padding: 1rem; border-radius: var(--radius); background: var(--bg-surface); border: 1px solid var(--border); font-size: 0.875rem; color: var(--text-main); display: flex; flex-direction: column; gap: 0.25rem; }

.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 9999px; background: var(--border-light); color: var(--text-muted); }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }

/* ==========================================================================
   Landing Page (Wat zoekt u?)
   ========================================================================== */
.home-hero { background: var(--text-main); color: white; padding: 4rem 1.5rem; margin-bottom: 3rem; text-align: center; }

@media (max-width: 768px) {
  .hero-dropdowns { grid-template-columns: 1fr; }
  .finder-box { padding: 1.5rem; }
  .hero-title { font-size: 2rem; }
}

.section-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); }

/* ==========================================================================
   Catalog Sidebar & Structure
   ========================================================================== */
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 1rem; }

.catalog-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }

/* ==========================================================================
   Product Cards & Grid/List views
   ========================================================================== */
.product-container { display: grid; gap: 0.75rem; }

.part-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    overflow: hidden;
    transition: all 0.2s;
}
.part-img-link {
    width: 140px; height: 140px; min-height: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    padding: 0.5rem; flex-shrink: 0;
}

.part-stock { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; margin-top: auto; }

.part-buy-area { width: 180px; padding: 1rem; border-left: 1px solid var(--border-light); display: flex; flex-direction: column; justify-content: center; background: var(--bg-body); flex-shrink: 0; }

/* Grid View override */
.view-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }

/* Pagination */
.pagination-container { display: flex; justify-content: center; margin-top: 2rem; margin-bottom: 2rem; }

/* ==========================================================================
   Product Detail Page
   ========================================================================== */
.breadcrumb { font-size: 0.875rem; margin-bottom: 1.5rem; }

.product-info { display: flex; flex-direction: column; }

.section-heading { font-size: 1rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.product-detail-skeleton {
    display: block;
    border-radius: 0.45rem;
    background: linear-gradient(100deg, #edf1f6 28%, #f8fafc 48%, #edf1f6 68%);
    background-size: 220% 100%;
    animation: product-detail-shimmer 1.25s ease-in-out infinite;
}
@keyframes product-detail-shimmer {
    from { background-position: 140% 0; }
    to { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .product-detail-skeleton { animation: none; }
}

/* Fullscreen Gallery */
.gallery-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17, 24, 39, 0.95); z-index: 2000; display: flex; flex-direction: column; }

/* ==========================================================================
   Cart & Checkout
   ========================================================================== */
.page-header { margin-bottom: 1.5rem; }

.summary-card { padding: 1.5rem; }

.checkout-step { padding: 1.5rem; }

.address-grid, .payment-grid { display: grid; gap: 1rem; }

/* ==========================================================================
   Auth Layouts & Data Tables
   ========================================================================== */
.auth-wrapper { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 200px); padding: 2rem 1rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.app-footer { background: var(--text-main); color: white; margin-top: 4rem; }

/* ==========================================================================
   Responsive Overrides
   ========================================================================== */
.mobile-only { display: none; }

@media (max-width: 1100px) {
  .commerce-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; gap: 1rem; }
  .catalog-sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; }
  .catalog-sidebar-overlay.open { display: block; }
  .catalog-sidebar { position: absolute; top: 0; bottom: 0; right: 0; width: 300px; max-width: 85vw; background: var(--bg-surface); padding: 0; display: flex; flex-direction: column; gap: 0; }
  .sidebar-scroll-area { flex: 1; overflow-y: auto; padding: 1rem; }
  .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-light); background: var(--bg-body); }
  .sidebar-header h3 { margin: 0; font-size: 1.125rem; }
  .sidebar-block { border: none; padding: 0 0 1.5rem 0; }
  
  .catalog-header { flex-direction: column; align-items: stretch; gap: 1rem; }
  .mobile-only { display: inline-flex; }
  
  .commerce-layout { grid-template-columns: 1fr; }
  .cart-header { display: none; }
  .cart-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "image details" "image quantity" "total total"; align-items: start; gap: 0.75rem; padding: 1rem; }
  .cart-item-img { grid-area: image; width: 80px; height: 80px; margin: 0; }
  .cart-item-details { grid-area: details; min-width: 0; padding: 0; }
  .cart-item-title, .cart-item-meta { overflow-wrap: anywhere; }
  .cart-item-price { display: none; }
  .cart-item-qty { grid-area: quantity; width: 100%; padding: 0; margin: 0; display: flex; align-items: center; gap: 1rem; }
  .cart-item-qty .form-control { width: 80px; max-width: 100%; }
  .cart-item-total { grid-area: total; width: auto; min-width: 0; margin: 0; align-self: center; font-size: 1.125rem; overflow-wrap: anywhere; text-align: right; border-top: 1px solid var(--border-light); padding-top: 0.75rem; }
  .cart-actions { flex-wrap: wrap; }
  
  .product-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
  
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
  
  .search-bar { order: 3; max-width: 100%; margin-top: 1rem; width: 100%; }
  .header-inner { flex-wrap: wrap; height: auto; padding: 1rem 0; gap: 0.5rem; }
  .logo { flex: 1; }
}

/* ==========================================================================
   Home & Discovery (New)
   ========================================================================== */
.home-hero-section {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 4rem 1.5rem;
    text-align: center;
}
.home-hero-container {
    max-width: 800px;
    margin: 0 auto;
}
.home-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.home-hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}
.home-search-panel {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: left;
    position: relative;
}
.home-search-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
}
.home-search-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.home-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    outline: none;
    min-width: 0;
}
.home-search-input-wrapper svg {
    color: var(--text-muted);
    margin-left: 0.5rem;
}
.home-finder-divider {
    margin: 1.5rem 0;
    text-align: center;
    position: relative;
}
.home-finder-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border-light);
}
.home-finder-divider span {
    background: var(--bg-body);
    padding: 0 1rem;
    position: relative;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.home-cat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s;
    color: var(--text-main);
}
.home-cat-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transform: translateY(-2px);
}
.home-cat-icon {
    height: 48px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.home-cat-name {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Device Fields (Discovery) */
.device-fields {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}
.device-fields .field {
    flex: 1;
    min-width: 0;
}
.device-fields .field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.model-picker { position: relative; width: 100%; }
.model-picker summary { 
    display: flex; justify-content: space-between; align-items: center; 
    cursor: pointer; list-style: none;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    min-height: 38px;
}
.model-picker-popover { 
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; 
    background: #fff; border: 1px solid var(--border); 
    box-shadow: var(--shadow-lg); z-index: 100; 
    max-height: 300px; display: flex; flex-direction: column; 
    border-radius: var(--radius); 
}

/* Category Groups in Sidebar */
.category-group { margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }

/* Catalog Header Info */
.catalog-breadcrumb { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; }

/* Part Card Tweak */
.login-for-price { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--text-muted); transition: color 0.2s; }

/* Filter Dialog for Mobile */
.filter-dialog { position: fixed; inset: 0; background: var(--bg-surface); z-index: 1000; display: none; flex-direction: column; }

@media (max-width: 768px) {
    .device-fields { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}

/* Discovery composition and native-dialog behavior. */
.home-device-row { display:flex; gap:16px; align-items:flex-end; }
@media(max-width:900px) {
    .desktop-only { display:none; }
    .catalog-heading h1 { font-size:25px; }
    .home-device-row { flex-direction:column; align-items:stretch; }
    .home-device-row .home-submit-field { width:100%; }
    .home-cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
    .view-list .part-card { display:grid; grid-template-columns:76px minmax(0,1fr); }
    .view-list .part-img-link { grid-column:1; grid-row:1; width:76px; height:90px; min-height:0; border:0; padding:12px 8px; align-self:start; }
    .view-list .part-main { grid-column:2; grid-row:1; padding:12px; }
    .view-list .part-meta { flex-wrap:wrap; gap:5px; }
    .view-list .part-name { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
    .view-list .part-stock { margin-top:8px; }
    .view-list .part-buy-area { grid-column:1/-1; grid-row:2; width:auto; padding:12px; border-left:0; border-top:1px solid var(--border-light); flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
    .view-list .part-price { font-size:18px; margin:0; }
    .view-list .part-action { width:116px; }
    .catalog-heading { margin:20px 0; gap:12px; }
    .catalog-heading h1 { font-size:23px; }
    .catalog-toolbar { gap:10px; }
    .catalog-sort { order:2; width:100%; }
    .catalog-sort select { flex:1; min-width:0; }
    .catalog-price-notice { flex-wrap:wrap; gap:5px 12px; }
    .home-cat-card { flex-direction:column; text-align:center; padding:16px 10px; gap:12px; min-height:134px; }
    .home-cat-name { font-size:13px; }
    .home-device-row .device-fields { width:100%; }
    .catalog-pagination .btn { min-width:34px; padding:8px; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* workspace.css - Ferry Telecom Workbench Aesthetic */
:root {
    --brand-blue: #0056b3;
    --brand-blue-dark: #004494;
    --brand-blue-light: #e0f2fe;
    
    --wb-bg: #f8fafc;
    --wb-surface: #ffffff;
    --wb-border: #cbd5e1;
    --wb-border-light: #e2e8f0;
    
    --wb-text: #0f172a;
    --wb-text-muted: #475569;
    --wb-text-light: #94a3b8;
    
    --wb-success: #16a34a;
    --wb-success-bg: #dcfce7;
    --wb-warning: #ea580c;
    --wb-warning-bg: #ffedd5;
    --wb-danger: #dc2626;
    --wb-danger-bg: #fee2e2;
    --wb-info: #0284c7;
    --wb-info-bg: #e0f2fe;
    
    --wb-radius: 4px;
    --wb-radius-lg: 8px;
    --wb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --wb-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Base Overrides for Workbench feel */
.layout-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
}
.layout-sidebar aside .card {
    padding: 1rem;
    position: sticky;
    top: 5rem;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sidebar-nav a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--wb-radius);
    color: var(--wb-text);
    transition: all 0.15s;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover {
    background: var(--wb-bg);
    border-left-color: var(--wb-border);
    text-decoration: none;
}
.sidebar-nav a.active {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border-left-color: var(--brand-blue);
    font-weight: 600;
}

@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .layout-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        width: 100%;
        min-width: 0;
    }
    body:not(:has(.admin-shell)) .layout-sidebar > *,
    body:not(:has(.admin-shell)) .layout-sidebar .card,
    body:not(:has(.admin-shell)) .layout-sidebar form,
    body:not(:has(.admin-shell)) .layout-sidebar .form-group,
    body:not(:has(.admin-shell)) .layout-sidebar .grid-cols-2 {
        min-width: 0;
        max-width: 100%;
    }
    body:not(:has(.admin-shell)) .layout-sidebar aside .card {
        position: static;
    }
    body:not(:has(.admin-shell)) .layout-sidebar .grid-cols-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dense Data Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--wb-border-light);
    border-radius: var(--wb-radius);
    background: var(--wb-surface);
    margin-bottom: 1.5rem;
}
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    white-space: nowrap;
}
table.data-table th {
    background: var(--wb-bg);
    color: var(--wb-text-muted);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--wb-border-light);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
}
table.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wb-border-light);
    color: var(--wb-text);
    font-variant-numeric: tabular-nums;
}
table.data-table tbody tr:hover {
    background-color: var(--wb-bg);
}
table.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Badges */
.wb-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}

/* Forms & Details */
.form-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wb-border-light);
}
.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--wb-text);
}
.wb-details {
    background: var(--wb-bg);
    border: 1px solid var(--wb-border-light);
    border-radius: var(--wb-radius);
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.wb-details summary {
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    color: var(--brand-blue);
}
.wb-details summary:hover {
    background: var(--brand-blue-light);
}
.wb-details-content {
    padding: 1rem;
    border-top: 1px solid var(--wb-border-light);
    background: var(--wb-surface);
}

/* Action Bars */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--wb-text);
}

/* Toast Container */
#wb-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}
.wb-toast {
    background: var(--wb-surface);
    border: 1px solid var(--wb-border);
    box-shadow: var(--wb-shadow);
    padding: 0.75rem 1rem;
    border-radius: var(--wb-radius);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
    animation: toast-in 0.2s ease-out forwards;
    min-width: 250px;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Value displays */
.data-label {
    font-size: 0.75rem;
    color: var(--wb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.125rem;
}
.data-value {
    font-size: 0.875rem;
    color: var(--wb-text);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* Admin specific */
.admin-card-danger {
    border-top: 3px solid var(--wb-danger);
}
.model-check-item {
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    padding: 0.375rem 0.5rem; 
    border-radius: var(--wb-radius); 
    cursor: pointer;
    transition: background 0.15s;
}
.model-check-item:hover {
    background: var(--wb-bg);
}

/* --------------------------------------------------------------------------
   Ferry Telecom - Workbench 2035 Aesthetic (Engineered, Dense, Fast)
   -------------------------------------------------------------------------- */

:root {
    --primary: #087ce7;
    --primary-hover: #0768c3;
    --primary-active: #0554a0;
    --primary-light: #eaf3fc;
    
    --bg-body: #f5f6f8;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f9fafb;
    --bg-alt: #eef0f3;

    --text-main: #111827;
    --text-muted: #64748b;
    --text-inverse: #ffffff;

    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --border-focus: #087ce7;

    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    
    --success: #10b981;
    --success-bg: #ecfdf5;
    --success-border: #a7f3d0;
    
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 8px -2px rgba(0,0,0,0.1);
    --shadow-float: 0 10px 20px -5px rgba(0,0,0,0.15);
    
    --transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fast, controlled order management */
.admin-order-number {
    max-width: 220px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--wb-primary);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.catalog-gap-panel {
    margin: 0 0 2rem;
    padding: 1rem;
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-lg);
    background: var(--warning-bg);
}
.catalog-gap-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.catalog-gap-summary {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: .875rem;
}
.catalog-gap-list {
    display: grid;
    gap: .5rem;
    min-width: 290px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.catalog-gap-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
@media (max-width: 700px) {
    .catalog-gap-panel-heading, .catalog-gap-entry { align-items: stretch; flex-direction: column; }
    .catalog-gap-actions { justify-content: flex-start; }
}

.modal-content:has(.admin-quick-edit) {
    width: min(720px, calc(100vw - 32px));
    max-width: 720px;
}
.admin-quick-edit-main {
    display: grid;
    grid-template-columns: minmax(150px, .65fr) minmax(220px, 1fr);
    gap: 14px;
}
.quick-edit-group-prices {
    margin: 4px 0 18px;
    padding: 16px;
    border: 1px solid var(--wb-border);
    border-radius: 10px;
    background: var(--wb-bg);
}
.quick-edit-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.quick-edit-section-head p {
    max-width: 430px;
    margin: 0;
    color: var(--wb-text-muted);
    font-size: .78rem;
    line-height: 1.45;
}
.quick-edit-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
.quick-edit-group-price > span {
    display: block;
    margin-bottom: 5px;
    color: var(--wb-text);
    font-size: .75rem;
    font-weight: 700;
}
.quick-edit-money-input > span {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 1;
    color: var(--wb-text-muted);
    font-size: .8rem;
    transform: translateY(-50%);
}
@media (max-width: 620px) {
    .admin-quick-edit-main,
    .quick-edit-group-grid { grid-template-columns: 1fr; }
    .quick-edit-section-head { flex-direction: column; gap: 6px; }
}
.admin-order-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.modal-content:has(.admin-order-quick) {
    width: min(920px, calc(100vw - 32px));
    max-width: 920px;
    max-height: min(880px, calc(100dvh - 32px));
}
.admin-order-quick-head,
.admin-order-manage-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.admin-order-quick-head h3 {
    margin: 3px 0 5px;
    font-size: 1.05rem;
}
.admin-order-quick-total {
    font-size: 1.25rem;
    font-weight: 800;
    white-space: nowrap;
}
.admin-order-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
    padding: 14px;
    border: 1px solid var(--wb-border);
    border-radius: 10px;
    background: var(--wb-bg);
}
.admin-order-facts > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.admin-order-facts > div > span,
.admin-order-quick h4,
.customer-application dt {
    color: var(--wb-text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.admin-order-facts strong,
.admin-order-facts small {
    overflow-wrap: anywhere;
}
.admin-order-quick-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 24px;
}
.admin-order-quick-grid dl > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 0;
}
.admin-order-history {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.admin-order-history li {
    display: grid;
    grid-template-columns: minmax(100px, .4fr) minmax(150px, .6fr);
    gap: 4px 16px;
    padding-left: 12px;
    border-left: 2px solid var(--wb-border);
    font-size: .8rem;
}
.admin-order-modal-actions {
    position: sticky;
    bottom: -1px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 24px -4px -4px;
    padding: 12px 4px 4px;
    background: var(--wb-surface);
    border-top: 1px solid var(--wb-border);
}
.admin-order-manage-form {
    display: grid;
    gap: 16px;
}
.admin-order-manage-form .form-group > span {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
}
.admin-order-manage-summary {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--wb-bg);
}

/* RMA workspace: line-level return and settlement controls */
.modal-content:has(.rma-workspace) {
    width: min(1040px, calc(100vw - 32px));
    max-width: 1040px;
    max-height: min(900px, calc(100dvh - 32px));
}
.rma-summary {
    display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
    padding:3px 0 18px; border-bottom:1px solid var(--wb-border, var(--border));
}
@media (max-width: 700px) {
    .admin-order-facts,
    .admin-order-quick-grid { grid-template-columns: 1fr; }
    .admin-order-quick-head { flex-direction: column; gap: 8px; }
    .admin-order-modal-actions .btn { flex: 1; }
    .rma-summary, .rma-finance { flex-direction:column; }
    .rma-summary-status { justify-items:start; text-align:left; }
    .rma-create-fields { grid-template-columns:1fr; }
    .rma-timeline li { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0s;
    }
}

body {
    font-family: var(--font);
    background-color: var(--bg-body);
    color: var(--text-main);
    letter-spacing: -0.01em;
}

/* Header Overrides for Maximum Density */
.app-header .header-inner { min-height: 3.75rem; height: auto; gap: 1rem; }

.app-header #search-input { padding: 0.375rem 0; font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   Home 2035 (Ultra-Compact)
   -------------------------------------------------------------------------- */
.ws-home-compact {
    padding-bottom: 2rem;
}

.ws-hero-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.ws-title-compact {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.ws-search-compact {
    flex: 1 1 300px;
    max-width: 500px;
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 4px;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: border var(--transition), box-shadow var(--transition);
}
.ws-search-compact:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.ws-search-compact svg {
    color: var(--text-muted);
    margin: 0 6px;
    flex-shrink: 0;
}
.ws-search-input-compact {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    outline: none;
}
.ws-search-btn-compact {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
}
.ws-search-btn-compact:hover {
    background: var(--primary-hover);
}

.ws-dashboard-compact {
    display: grid;
    gap: 12px;
    align-items: start;
}
@media (min-width: 800px) {
    .ws-dashboard-compact {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

.ws-finder-panel-compact, .ws-cats-panel-compact {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.ws-cats-group h3 {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 4px;
}

.ws-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-body);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    border: 1px solid transparent;
}
.cat-pill:hover {
    background: var(--primary-light);
    color: var(--primary-active);
    border-color: var(--primary);
}
.cat-pill-img, .cat-pill-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.cat-pill:hover .cat-pill-icon {
    color: var(--primary);
}

.ws-featured-compact { margin-top: 1rem; }
.ws-featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
}


/* --------------------------------------------------------------------------
   FastFinder Compact (Used in Home & Modal)
   -------------------------------------------------------------------------- */
.fast-finder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finder-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.finder-heading h2 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-main);
    font-weight: 700;
}

.finder-eyebrow { display: none; }

.finder-caption {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.finder-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 2px;
}

.finder-brands button {
    background: var(--bg-body);
    border: 1px solid transparent;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}

.finder-search-label { display: none; }

.finder-model-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    height: 32px;
}
.finder-model-search:focus-within {
    border-color: var(--primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.finder-model-search input {
    flex: 1; min-width: 0; border: none; background: transparent;
    font-size: 0.8125rem; font-weight: 600; outline: none; color: var(--text-main);
}
.finder-model-search kbd {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);
    background: var(--bg-surface); border: 1px solid var(--border); padding: 0 4px; border-radius: 3px;
}

.finder-list-tools {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0; padding-bottom: 4px; border-bottom: 1px solid var(--border-light);
}

.finder-models {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}

.finder-model {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-body);
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-main);
    gap: 6px;
}
.finder-model:hover {
    background: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.finder-model strong {
    font-size: 0.75rem; font-weight: 700; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} /* Kept visually quiet to save space */
.finder-model span:last-child {
    flex-shrink: 0; color: var(--text-muted); font-size: 0.875rem;
}

.finder-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); }

.finder-empty { padding: 1.5rem; text-align: center; background: var(--bg-body); border-radius: 6px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }

.finder-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 6px; margin-top: 2px; font-size: 0.75rem; font-weight: 600;
}


/* --------------------------------------------------------------------------
   Catalog Main View Redesign (Hyper-Dense)
   -------------------------------------------------------------------------- */
.catalog-layout { display: block !important; margin-top: 0 !important; }

.catalog-breadcrumb {
    margin: 8px 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
}

.catalog-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 8px 0;
    padding: 0;
    border: none;
}
.catalog-heading > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.catalog-heading h1 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--text-main);
}
.catalog-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.model-command {
    width: auto;
    flex: 1 1 200px;
    max-width: 280px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    position: relative;
}
.model-command-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    height: 28px;
    transition: border var(--transition);
}
.model-command-input input {
    flex: 1; min-width: 0; border: none; background: transparent;
    font-size: 0.75rem; font-weight: 600; outline: none; color: var(--text-main);
}
.model-browse {
    height: 28px; padding: 0 6px; font-size: 0.6875rem; border-radius: 3px;
    border: 1px solid var(--border); background: var(--bg-body); cursor: pointer;
    white-space: nowrap; margin-left: 6px; color: var(--text-main); font-weight: 600;
}

.model-command-popover {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px;
    box-shadow: var(--shadow-float); z-index: 100; max-height: 250px; overflow-y: auto;
}
.model-command-status {
    padding: 6px 8px; margin: 0; font-size: 0.6875rem; font-weight: 600;
    color: var(--text-muted); background: var(--bg-body); border-bottom: 1px solid var(--border-light);
}
#inline-model-results a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px; border-bottom: 1px solid var(--border-light);
    color: var(--text-main); text-decoration: none; font-size: 0.75rem;
}
#inline-model-results a[aria-selected="true"], #inline-model-results a:hover {
    background: var(--primary-light); color: var(--primary-active);
}

.quick-categories { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.quick-category {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-surface); border: 1px solid var(--border-light);
    padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;
    color: var(--text-main); text-decoration: none;
}
.quick-category.active, .quick-category[aria-current="page"] {
    background: var(--text-main); color: var(--text-inverse); border-color: var(--text-main);
}
.quick-category small {
    background: rgba(0,0,0,0.06); padding: 0 4px; border-radius: 8px; font-size: 0.625rem; font-variant-numeric: tabular-nums;
}

.customer-payment-controls { min-width: 260px; }
.customer-payment-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 9px;
}
.customer-payment-options-intro {
    margin: 0 0 18px;
    color: var(--wb-text-muted);
    line-height: 1.55;
}
.customer-payment-option-list {
    display: grid;
    gap: 10px;
}
.customer-payment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 16px;
    border: 1px solid var(--wb-border);
    border-radius: 10px;
    background: var(--wb-surface);
    cursor: pointer;
}
.customer-payment-option-copy small {
    display: block;
    color: var(--wb-text-muted);
    line-height: 1.45;
}
.customer-payment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.customer-payment-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border-radius: 999px;
    background: var(--wb-border);
    transition: background .18s ease;
}
.customer-payment-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
    transition: transform .18s ease;
}
.customer-payment-option input:focus-visible + .customer-payment-switch {
    outline: 3px solid color-mix(in srgb, var(--wb-primary) 25%, transparent);
    outline-offset: 2px;
}
.customer-payment-options-note {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    background: var(--wb-bg);
    color: var(--wb-text-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

/* Customer workspace: a calm, task-focused record view rather than an application dump. */
.modal-content:has(.customer-workspace),
.modal-content:has(.customer-workspace-state),
.modal-content:has(.customer-address-form) {
    width: min(1040px, calc(100vw - 32px));
    max-width: 1040px;
    max-height: min(900px, calc(100dvh - 32px));
    background: var(--wb-surface, var(--bg-surface));
}
.customer-workspace-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0 20px;
    border-bottom: 1px solid var(--wb-border, var(--border));
}
.customer-workspace-eyebrow {
    margin: 0 0 5px;
    color: var(--wb-text-muted, var(--text-muted));
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.customer-workspace-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 0;
}
.customer-address-card, .customer-shipping-card {
    padding: 14px 15px;
    border: 1px solid var(--wb-border, var(--border));
    border-radius: 9px;
    background: var(--wb-surface, var(--bg-surface));
    color: var(--wb-text, var(--text-main));
    font-size: .875rem;
    line-height: 1.55;
}
.staff-customer-create-section {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid var(--wb-border, var(--border));
}
.staff-customer-create-section legend {
    width: 100%;
    margin-bottom: 12px;
    color: var(--wb-text, var(--text-main));
    font-size: .9375rem;
    font-weight: 750;
}
.staff-customer-billing-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 13px;
    border: 1px solid var(--wb-border, var(--border));
    border-radius: 9px;
    background: var(--wb-bg, var(--bg-body));
    color: var(--wb-text, var(--text-main));
    cursor: pointer;
}
.staff-customer-terms {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 14px;
    color: var(--wb-text, var(--text-main));
    font-size: .8125rem;
    line-height: 1.45;
}
.staff-customer-create-error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    color: var(--danger, #b91c1c);
    font-size: .875rem;
}
@media (max-width: 620px) {
    .modal-content:has(.customer-workspace), .modal-content:has(.customer-workspace-state), .modal-content:has(.customer-address-form) { width: calc(100vw - 16px); }
    .customer-workspace-summary, .customer-section-heading, .customer-shipping-card { flex-direction: column; }
    .customer-workspace-status, .customer-shipping-actions { justify-items: start; justify-content: flex-start; text-align: left; }
    .customer-workspace-facts, .customer-address-grid { grid-template-columns: 1fr; }
    .customer-address-wide { grid-column: auto; }
}

.part-type-picker {
    display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px;
    background: transparent; border: none; border-bottom: 1px solid var(--border-light);
    padding: 0 0 8px 0; margin-bottom: 8px; border-radius: 0; box-shadow: none;
} /* Hide verbose descriptions */
.part-type-options { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.part-type-option {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 2px 8px; min-width: 0; flex: 0 0 auto; color: var(--text-main); text-decoration: none;
}
.part-type-option.active, .part-type-option[aria-current="page"] {
    background: var(--primary-light); border-color: var(--primary); color: var(--primary-active);
}
.part-type-option b {
    font-size: 0.625rem; font-weight: 700; color: var(--text-muted);
    background: var(--bg-alt); padding: 0 4px; border-radius: 8px; font-variant-numeric: tabular-nums;
} /* Hide inner verbose desc */

.catalog-refine-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 0 0 8px 0; margin-bottom: 8px;
    background: transparent; border: none; border-bottom: 1px solid var(--border-light);
    border-radius: 0; box-shadow: none;
}
.catalog-tool-field select {
    padding: 0 16px 0 6px; border: 1px solid var(--border); background-color: var(--bg-surface);
    font-weight: 600; font-size: 0.75rem; height: 26px; border-radius: 3px; color: var(--text-main);
}
.stock-shortcut {
    display: inline-flex; align-items: center; padding: 0 8px; height: 26px;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px;
    font-size: 0.75rem; font-weight: 600; color: var(--text-main); cursor: pointer;
}
.stock-shortcut[aria-pressed="true"], .stock-shortcut.active {
    background: var(--primary-light); color: var(--primary-active); border-color: var(--primary);
}

.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 4px; background: var(--bg-surface);
    border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px;
    font-size: 0.6875rem; font-weight: 600; color: var(--text-main); text-decoration: none;
}

.catalog-price-notice {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px;
    padding: 6px 12px; margin-bottom: 12px; display: flex; justify-content: space-between;
    align-items: center; font-size: 0.75rem; font-weight: 700;
}

/* --------------------------------------------------------------------------
   Product List View Optimization (Ultra-Dense)
   -------------------------------------------------------------------------- */
.view-list { display: flex; flex-direction: column; gap: 4px; }
.view-list .part-card {
    display: flex; flex-direction: column; background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; gap: 8px;
}
@media (min-width: 640px) {
    .view-list .part-card { flex-direction: row; align-items: center; }
}
.view-list .part-img-link {
    width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--border-light);
    border-radius: 4px; padding: 2px; background: var(--bg-body);
    display: flex; align-items: center; justify-content: center;
}
.view-list .part-quality {
    font-size: 0.625rem; font-weight: 800; text-transform: uppercase; background: var(--bg-body);
    padding: 1px 4px; border-radius: 2px; color: var(--text-main); border: 1px solid var(--border);
}
.part-type-badge {
    font-size: 0.625rem; font-weight: 600; background: var(--bg-alt); color: var(--text-muted);
    padding: 1px 4px; border-radius: 2px; border: 1px solid var(--border-light); display: inline-block; vertical-align: middle; margin-left: 4px;
}
.view-list .part-buy-area {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0;
}
@media (max-width: 639px) {
    .view-list .part-buy-area { justify-content: space-between; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border-light); }
}

/* Grid View Optimization */
.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,220px), 1fr)); gap: 10px; }

.status-dot { width: 6px; height: 6px; border-radius: 50%; }

/* --------------------------------------------------------------------------
   Modestly Enlarged Image Preview (Modals)
   -------------------------------------------------------------------------- */
dialog.photo-preview-dialog {
    margin: auto; padding: 0; border: none; border-radius: 8px; background: var(--bg-surface);
    box-shadow: var(--shadow-float); width: 90vw; max-width: 600px; max-height: 85vh; overflow: hidden;
}
.photo-preview-header {
    display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
    border-bottom: 1px solid var(--border-light); background: var(--bg-surface); color: var(--text-main); flex-shrink: 0;
}
.photo-preview-content {
    position: relative; padding: 1rem; background: var(--bg-body); display: flex; align-items: center; justify-content: center; flex: 1; min-height: 250px; overflow: hidden;
}
.photo-preview-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; cursor: pointer; color: var(--text-main); box-shadow: var(--shadow-sm); z-index: 10;
}

/* Dialog overriding for model-switch */
.finder-dialog { padding: 0; border: none; border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-float); width: 95vw; max-width: 700px; max-height: 90vh; margin: auto; overflow: hidden; }
.finder-dialog [data-close-finder] {
    position: absolute; top: 8px; right: 8px; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    background: var(--bg-body); border: none; border-radius: 50%; font-size: 1.25rem; cursor: pointer; color: var(--text-muted); z-index: 20;
}

/* Filter Dialog Mobile */
.filter-dialog { padding: 0; border: none; border-radius: 8px; width: 100%; max-width: 360px; margin: auto; box-shadow: var(--shadow-float); }

/* Compact dimensions without clipping names, touch targets or the mobile header. */
.app-header .logo img { height:34px; width:auto; }
@media(max-width:767px) {
    .app-header .header-inner { min-height:0; height:auto; padding:10px 16px; gap:8px; }
    .app-header .logo { flex:0 0 auto; }
    .app-header .logo img { width:130px; height:auto; }
    .app-header .user-nav { flex:1; min-width:0; justify-content:flex-end; gap:12px; }
    .app-header .user-nav .btn { font-size:12px; padding:8px; }
    .app-header .nav-text { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .app-header .search-bar { flex:0 0 100%; order:3; width:100%; min-width:0; margin-top:2px; }
    .catalog-heading { gap:10px; }
    .catalog-heading h1 { font-size:20px; }
    .model-command { width:100%; max-width:none; flex-basis:auto; }
    .model-command-input { height:40px; }
    .model-command-input input { font-size:14px; }
    .model-browse { height:36px; }
    .quick-categories { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; gap:6px; scrollbar-width:thin; }
    .quick-category { flex:0 0 auto; min-height:36px; }
    .part-type-picker { display:block; min-width:0; padding-bottom:8px; }
    .part-type-intro { margin-bottom:5px; }
    .part-type-options { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; gap:6px; scrollbar-width:thin; }
    .part-type-option { min-height:36px; white-space:nowrap; }
    .catalog-refine-row { gap:8px; }
    .catalog-refine-row select, .catalog-sort select, .stock-shortcut, #open-catalog-filters { min-height:36px; font-size:12px; }
    .catalog-toolbar { gap:8px; }
    .active-filters { gap:4px; margin:8px 0; }
    .view-list .part-card { grid-template-columns:48px minmax(0,1fr); align-items:start; gap:10px; padding:12px; }
    .view-list .part-img-link { width:48px; height:48px; }
    .view-list .part-main { padding:0; }
    .view-list .part-buy-area { grid-column:1 / -1; width:100%; min-width:0; justify-content:space-between; margin-top:0; padding-top:8px; border-top:1px solid var(--border-light); }
    .view-list .part-meta { gap:4px; }
    .view-list .part-name { font-size:14px; }
    .part-qty, .part-add-btn { height:40px; }
    .part-add-btn { min-width:44px; }
    .photo-preview-close { width:40px; height:40px; }
    dialog.photo-preview-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; border-radius:0; }
    .photo-preview-shell { max-height:100dvh; }
    .photo-preview-header { flex-wrap:wrap; padding:6px 8px; }
    .photo-preview-heading { order:1; flex:1 1 calc(100% - 48px); }
    .photo-preview-close { order:2; }
    .photo-preview-tools { order:3; width:100%; }
    .photo-preview-tools button { min-width:40px; height:40px; }
    .photo-preview-content { padding:8px; max-height:none; }
    .photo-preview-nav.prev { left:4px; } .photo-preview-nav.next { right:4px; }
    .filter-dialog-actions button { height:40px; }
}

/* ==========================================================================
   Storefront Redesign - Apple-like Premium B2B
   ========================================================================== */

:root {
    --apple-bg: #f5f5f7;
    --apple-surface: #ffffff;
    --apple-text: #1d1d1f;
    --apple-muted: #86868b;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-border: #d2d2d7;
    --apple-border-light: #e5e5ea;
}

body:not(:has(.admin-shell)) {
    --sf-pro: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-family: var(--sf-pro);
    background-color: var(--apple-bg);
    color: var(--apple-text);
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
    --primary: var(--apple-blue);
    --primary-hover: var(--apple-blue-hover);
    --primary-active: #0058b0;
    --border-light: var(--apple-border-light);
    --border: var(--apple-border);
}

body:not(:has(.admin-shell)):has(.catalog-layout) {
    background-color: #f2f7fc;
}

body:not(:has(.admin-shell)) h1,
body:not(:has(.admin-shell)) h2,
body:not(:has(.admin-shell)) h3,
body:not(:has(.admin-shell)) h4 {
    font-family: var(--sf-pro);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--apple-text);
}

body:not(:has(.admin-shell)) a {
    color: var(--primary);
    text-decoration: none;
}
body:not(:has(.admin-shell)) a:hover {
    text-decoration: underline;
}

/* Header */
body:not(:has(.admin-shell)) .app-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: none;
}

body:not(:has(.admin-shell)) .test-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary, #4887f4);
    color: #fff;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.35rem max(12px, calc((100% - 1240px) / 2));
    letter-spacing: 0.05em;
    border-bottom: none;
    font-weight: 600;
}

body:not(:has(.admin-shell)) .test-banner > span {
    justify-self: center;
}

/* Keep the legacy header markup as a hidden mount source; reveal only the final header. */
body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.site-header {
    visibility: hidden;
    height: 134px;
    min-height: 134px;
    overflow: hidden;
}
body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.app-header {
    visibility: visible;
    height: auto;
    min-height: 0;
    overflow: visible;
}
@media (max-width: 820px) {
    body[data-theme="template-6"]:not(:has(.admin-shell)) #site-header.site-header { height: 174px; min-height: 174px; }
}

body:not(:has(.admin-shell)) .app-header .header-inner {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body:not(:has(.admin-shell)) .app-header .nav-link {
    color: var(--apple-text);
    font-weight: 500;
    font-size: 0.875rem;
}
body:not(:has(.admin-shell)) .app-header .nav-link:hover {
    color: var(--primary);
}

/* Buttons */
body:not(:has(.admin-shell)) .btn {
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body:not(:has(.admin-shell)) .btn-primary {
    background-color: var(--primary);
    color: white;
}

body:not(:has(.admin-shell)) .btn-primary:hover {
    background-color: var(--primary-hover);
    text-decoration: none;
}

body:not(:has(.admin-shell)) .btn-outline {
    background-color: transparent;
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

body:not(:has(.admin-shell)) .btn-outline:hover {
    background-color: var(--primary);
    color: white;
    text-decoration: none;
}

/* Inputs */
body:not(:has(.admin-shell)) .form-control {
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: #fff;
    transition: all 0.2s ease;
}

body:not(:has(.admin-shell)) .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

/* Grid View */
body:not(:has(.admin-shell)) .product-container.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Product Cards */
body:not(:has(.admin-shell)) .part-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

body:not(:has(.admin-shell)) .part-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

body:not(:has(.admin-shell)) .part-img-link {
    background: #ffffff;
    padding: 0;
    display: block;
    aspect-ratio: 1 / 1;
    width: 100% !important;
    height: auto !important;
    min-height: 120px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

body:not(:has(.admin-shell)) .part-img-link img {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90% !important;
    height: 90% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.05));
    transition: transform 0.2s ease;
}
body:not(:has(.admin-shell)) .part-img-link:hover img {
    transform: scale(1.05);
}

body:not(:has(.admin-shell)) .part-main {
    padding: 0 1rem 1rem 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

body:not(:has(.admin-shell)) .part-meta {
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

body:not(:has(.admin-shell)) .part-quality {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #e56000;
    background: transparent;
    padding: 0;
}
body:not(:has(.admin-shell)) .part-type-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--apple-muted);
}

body:not(:has(.admin-shell)) .part-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

body:not(:has(.admin-shell)) .part-name a {
    color: var(--apple-text);
}
body:not(:has(.admin-shell)) .part-name a:hover {
    text-decoration: none;
    color: var(--primary);
}

body:not(:has(.admin-shell)) .part-stock {
    font-size: 0.875rem;
    color: var(--apple-muted);
    margin-bottom: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
body:not(:has(.admin-shell)) .part-stock .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

body:not(:has(.admin-shell)) .part-buy-area {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: none;
    margin-top: auto;
}

body:not(:has(.admin-shell)) .part-price {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--apple-text);
}

body:not(:has(.admin-shell)) .part-action {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

body:not(:has(.admin-shell)) .part-qty {
    width: 60px;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.875rem;
}

body:not(:has(.admin-shell)) .part-add-btn {
    flex-grow: 1;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
}

/* List View overrides */
body:not(:has(.admin-shell)) .product-container.view-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-card {
    flex-direction: row;
    align-items: stretch;
    height: auto;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-img-link {
    width: 140px !important;
    flex: 0 0 140px;
    padding: 0.75rem;
    border-right: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .product-container.view-list .part-main {
    padding: 1rem;
    justify-content: center;
}
body:not(:has(.admin-shell)) .product-container.view-list .part-buy-area {
    width: 180px !important;
    border-left: 1px solid var(--border-light);
    justify-content: center;
    padding: 1rem;
}

/* Home search specific */
.instant-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.instant-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.instant-intro h1 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}

.intro-help {
    text-align: right;
    font-size: 0.875rem;
}

.instant-search {
    margin: 1rem 0;
    max-width: 680px;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-container svg {
    position: absolute;
    left: 1rem;
    color: var(--apple-muted);
    pointer-events: none;
    width: 20px;
    height: 20px;
}

.instant-home .search-input-container input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.search-input-container input:focus {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 4px rgba(0,113,227,0.2);
    outline: none;
}

.instant-categories-strip {
    margin: 1rem 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}
.instant-categories-strip::-webkit-scrollbar {
    display: none;
}

.instant-category-options {
    display: flex;
    gap: 0.5rem;
}

.instant-category-options button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--border-light);
    cursor: pointer;
    font-family: var(--sf-pro);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--apple-text);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: all 0.2s;
    min-width: 0;
}

.instant-category-options button:hover,
.instant-category-options button[aria-pressed="true"] {
    background: var(--apple-bg);
    border-color: var(--apple-text);
}

.instant-category-options button .cat-icon {
    display: none;
}

/* Device Models Section */
.instant-models {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.02);
    border: 1px solid var(--border-light);
}

.instant-model-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.instant-model-title h2 {
    font-size: 1.25rem;
    margin: 0;
}

.instant-family-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.instant-family-options button {
    background: #f5f5f7;
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    transition: all 0.2s;
    color: var(--apple-text);
    width: 100%;
}

.instant-family-options button small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--apple-muted);
}

.instant-family-options button:not([aria-pressed="true"]):hover {
    background: #e8e8ed;
    box-shadow: inset 0 0 0 1px #c7c7cc;
}
.instant-family-options button[aria-pressed="true"] {
    background: #1d1d1f;
    color: #fff;
}
.instant-family-options button[aria-pressed="true"] small {
    color: #a1a1a6;
}

.instant-model-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.instant-model-options button {
    background: #f5f5f7;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    color: var(--apple-text);
}

.instant-model-options button:hover,
.instant-model-options button[aria-pressed="true"] {
    background: #fff;
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.instant-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}
.instant-selection:empty {
    display: none;
}

.instant-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0 1rem 0;
    gap: 1rem;
}
.instant-results-heading h2 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
}
.results-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.instant-all-results {
    margin-top: 1.5rem;
    text-align: center;
}
[data-home-refine] {
    display: flex;
    gap: 0.5rem;
}
[data-home-refine] select {
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: #fff;
}

/* Product Detail Page Overrides */
body:not(:has(.admin-shell)) .product-detail-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    padding: 2rem 0;
}
body:not(:has(.admin-shell)) .product-detail-layout > * {
    min-width: 0;
}
body:not(:has(.admin-shell)) .product-gallery {
    position: sticky;
    top: 100px;
}
body:not(:has(.admin-shell)) .main-image-container {
    background: #fff;
    border-radius: 32px;
    padding: 4rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 30px rgba(0,0,0,0.03);
    margin-bottom: 1.5rem;
    border: none;
    width: 100%;
    cursor: zoom-in;
}
body:not(:has(.admin-shell)) .main-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
body:not(:has(.admin-shell)) .gallery-thumbnails {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}
body:not(:has(.admin-shell)) .gallery-thumb {
    width: 90px;
    height: 90px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
body:not(:has(.admin-shell)) .gallery-thumb:hover {
    border-color: var(--primary);
}
body:not(:has(.admin-shell)) .product-info {
    padding-top: 1rem;
}
body:not(:has(.admin-shell)) .product-title-lg {
    font-family: inherit;
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.875rem;
    overflow-wrap: anywhere;
}
body:not(:has(.admin-shell)) .product-price-lg {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 2rem;
}
body:not(:has(.admin-shell)) .purchase-box {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.04);
    margin-bottom: 3rem;
    border: none;
}
body:not(:has(.admin-shell)) .purchase-controls {
    display: flex;
    gap: 1rem;
}
body:not(:has(.admin-shell)) .purchase-controls .btn {
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
}
body:not(:has(.admin-shell)) .product-description {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--apple-text);
}

/* Category Page Overrides */
body:not(:has(.admin-shell)) .catalog-heading {
    text-align: center;
    padding: 2rem 0;
}
body:not(:has(.admin-shell)) .catalog-heading h1 {
    font-size: 2rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
body:not(:has(.admin-shell)) .catalog-description {
    font-size: 1rem;
    color: var(--apple-muted);
}
body:not(:has(.admin-shell)) .catalog-layout {
    display: flex;
    gap: 2rem;
}
body:not(:has(.admin-shell)) .catalog-refine-row {
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}
body:not(:has(.admin-shell)) .catalog-tool-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
}
body:not(:has(.admin-shell)) .catalog-tool-field select {
    border: none;
    background: #f5f5f7;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
}

/* Category Rails */
/* Category Models Section */

/* Cart & Checkout */
body:not(:has(.admin-shell)) .commerce-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}
body:not(:has(.admin-shell)) .cart-list {
    background: transparent;
    border: none;
    box-shadow: none;
}
body:not(:has(.admin-shell)) .cart-item {
    display: flex;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-light);
    gap: 2rem;
    background: #fff;
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
body:not(:has(.admin-shell)) .cart-item-img {
    width: 140px;
    height: 140px;
    background: #f5f5f7;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
body:not(:has(.admin-shell)) .cart-item-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
body:not(:has(.admin-shell)) .cart-sidebar .summary-card,
body:not(:has(.admin-shell)) .checkout-sidebar .summary-card {
    background: #fff;
    border-radius: 32px;
    padding: 3rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.04);
    position: sticky;
    top: 100px;
}
body:not(:has(.admin-shell)) .summary-card h3 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}
body:not(:has(.admin-shell)) .summary-row {
    font-size: 1.125rem;
}

/* Checkout specific */
body:not(:has(.admin-shell)) .checkout-step {
    background: #fff;
    border-radius: 32px;
    padding: 3rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.03);
}
body:not(:has(.admin-shell)) .step-header {
    margin-bottom: 2.5rem;
}
body:not(:has(.admin-shell)) .step-number {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
}
body:not(:has(.admin-shell)) .step-header h3 {
    font-size: 1.75rem;
}

body:not(:has(.admin-shell)) .address-card,
body:not(:has(.admin-shell)) .payment-card {
    background: #f5f5f7;
    border-radius: 20px;
    padding: 2rem;
}
body:not(:has(.admin-shell)) .address-card.selected,
body:not(:has(.admin-shell)) .payment-card.selected {
    box-shadow: 0 4px 20px rgba(0,113,227,0.15);
}

/* Auth Pages */
body:not(:has(.admin-shell)) .auth-wrapper {
    min-height: 75vh;
}
body:not(:has(.admin-shell)) .auth-card {
    background: #fff;
    border-radius: 32px;
    padding: 4rem;
    max-width: 480px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
body:not(:has(.admin-shell)) .auth-header h2 {
    font-size: 2.25rem;
}

body:not(:has(.admin-shell)) .auth-card-login {
    max-width: 420px;
    padding: 34px 36px 30px;
    border: 1px solid #e1e7ef;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(24, 39, 60, .09);
}
body:not(:has(.admin-shell)) .auth-login-header {
    margin-bottom: 26px;
}
body:not(:has(.admin-shell)) .auth-brand-logo {
    display: block;
    width: auto;
    height: 48px;
    max-width: min(100%, 230px);
    margin: 0 auto 24px;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-header h2 {
    margin: 0 0 7px;
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -.025em;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-header p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.45;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-form {
    display: grid;
    gap: 18px;
}
body:not(:has(.admin-shell)) .auth-card-login .form-group {
    margin: 0;
}
body:not(:has(.admin-shell)) .auth-card-login .form-label {
    margin-bottom: 7px;
    color: #46566c;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .055em;
}
body:not(:has(.admin-shell)) .auth-card-login .form-control {
    min-height: 46px;
    padding: 10px 13px;
    border-color: #d5dde7;
    border-radius: 10px;
    background: #fff;
    font-size: .9375rem;
}
body:not(:has(.admin-shell)) .auth-card-login .form-control:focus {
    border-color: #6aa5e8;
    box-shadow: 0 0 0 3px rgba(40, 120, 237, .12);
}
body:not(:has(.admin-shell)) .auth-card-login .auth-link {
    font-size: .75rem;
    letter-spacing: 0;
    text-transform: none;
}
body:not(:has(.admin-shell)) .auth-card-login .auth-submit {
    min-height: 46px;
    margin-top: 4px;
    border-radius: 10px;
    font-size: .9375rem;
    box-shadow: 0 5px 14px rgba(0, 113, 227, .18);
}
body:not(:has(.admin-shell)) .auth-login-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
    line-height: 1.45;
}
@media (max-width: 520px) {
    body:not(:has(.admin-shell)) .auth-wrapper {
        align-items: flex-start;
        padding: 20px 14px 32px;
    }
    body:not(:has(.admin-shell)) .auth-card-login {
        padding: 28px 22px 24px;
        border-radius: 18px;
    }
    body:not(:has(.admin-shell)) .auth-brand-logo {
        height: 44px;
        margin-bottom: 21px;
    }
}

body:not(:has(.admin-shell)) .registration-wrapper {
    align-items: flex-start;
    padding-top: 42px;
    padding-bottom: 64px;
}
body:not(:has(.admin-shell)) .registration-card {
    max-width: 920px;
    padding: 40px 48px 38px;
    border: 1px solid #e1e7ef;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(24, 39, 60, .08);
}
body:not(:has(.admin-shell)) .registration-header {
    margin-bottom: 32px;
}
body:not(:has(.admin-shell)) .registration-header .auth-brand-logo {
    height: 46px;
    margin-bottom: 22px;
}
body:not(:has(.admin-shell)) .registration-header h2 {
    margin: 0 0 7px;
    font-size: 2rem;
    letter-spacing: -.03em;
}
body:not(:has(.admin-shell)) .registration-header p {
    margin: 0 0 8px;
    font-size: .9375rem;
}
body:not(:has(.admin-shell)) .registration-header small {
    color: #8290a3;
    font-size: .75rem;
}
.registration-section {
    padding: 24px 0;
    border-top: 1px solid #e8edf3;
}
.registration-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.registration-section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #1768c5;
    font-size: .75rem;
    font-weight: 800;
}
.registration-section-heading h3 {
    margin: 1px 0 3px;
    color: #172033;
    font-size: 1rem;
}
.registration-section-heading p {
    margin: 0;
    color: #718096;
    font-size: .8125rem;
    line-height: 1.45;
}
.registration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}
.registration-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.registration-field > span {
    color: #46566c;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.registration-field .form-control {
    width: 100%;
    height: 46px;
    min-height: 46px;
    margin: 0;
    border-color: #d5dde7;
    border-radius: 11px;
    font-size: .875rem;
    background: #fbfcfe;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.registration-field .form-control:focus {
    border-color: #2180de;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(33, 128, 222, .11);
}
.registration-field small {
    color: #77869a;
    font-size: .75rem;
    line-height: 1.4;
}
.registration-span-2 {
    grid-column: span 2;
}
.registration-street {
    grid-column: span 1;
}
.registration-city {
    grid-column: span 2;
}
.registration-tax-field {
    grid-column: 1 / -1;
}
.registration-country-help {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f5f7fa;
}
.registration-country-help.swiss {
    background: #eef6ff;
    color: #245786;
}
.registration-consents {
    display: grid;
    gap: 12px;
    padding: 20px 0 4px;
    border-top: 1px solid #e8edf3;
}
.registration-consents label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #536176;
    font-size: .8125rem;
    line-height: 1.45;
}
.registration-consents input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: #0878e5;
}
body:not(:has(.admin-shell)) .registration-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    margin-top: 24px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #0878e5 0%, #1263c8 100%);
    font-size: .9375rem;
    font-weight: 750;
    box-shadow: 0 10px 24px rgba(18, 99, 200, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}
body:not(:has(.admin-shell)) .registration-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(18, 99, 200, .3);
}
body:not(:has(.admin-shell)) .registration-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
}
@media (max-width: 720px) {
    body:not(:has(.admin-shell)) .registration-wrapper {
        padding: 20px 12px 40px;
    }
    body:not(:has(.admin-shell)) .registration-card {
        padding: 28px 20px 24px;
        border-radius: 18px;
    }
    .registration-grid,
    .registration-address-grid {
        grid-template-columns: 1fr;
    }
    .registration-span-2,
    .registration-street,
    .registration-city,
    .registration-tax-field {
        grid-column: 1;
    }
}

/* Tables & Standard Lists (Cart, Orders, etc) */
body:not(:has(.admin-shell)) .table {
    width: 100%;
    border-collapse: collapse;
}
body:not(:has(.admin-shell)) .table th {
    text-align: left;
    padding: 1rem;
    color: var(--apple-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-light);
}
body:not(:has(.admin-shell)) .table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
body:not(:has(.admin-shell)) .alert {
    border-radius: 16px;
    padding: 1rem 1.5rem;
    border: none;
}
body:not(:has(.admin-shell)) .alert.warning {
    background: #fff8e1;
    color: #8f6c00;
}
body:not(:has(.admin-shell)) .alert.error {
    background: #ffe5e5;
    color: #c90000;
}
body:not(:has(.admin-shell)) .alert.success {
    background: #e5ffe5;
    color: #008f00;
}
.main-content:not(:has(.admin-shell)) .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

/* Media Queries for Mobile */
@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .app-header .header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem;
        height: auto;
        min-height: 60px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    body:not(:has(.admin-shell)) .app-header .logo { grid-column: 1; grid-row: 1; }
    body:not(:has(.admin-shell)) .app-header .user-nav {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        gap: 0.75rem !important;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    body:not(:has(.admin-shell)) .app-header .user-nav .btn { padding: 0.6rem 0.875rem; font-size: 0.8125rem; }
    body:not(:has(.admin-shell)) .app-header .search-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        max-width: none !important;
        margin: 0 !important;
    }
    body:not(:has(.admin-shell)) .app-header .search-bar input { min-width: 0; }
    .instant-intro { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .instant-intro h1 { font-size: 2.25rem; white-space: normal; overflow-wrap: break-word; }
    .instant-results-heading h2 { font-size: 2rem; white-space: normal; overflow-wrap: break-word; }

    body:not(:has(.admin-shell)) .product-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    body:not(:has(.admin-shell)) .product-gallery { position: static; }
    body:not(:has(.admin-shell)) .main-image-container { padding: 1.5rem; }
    body:not(:has(.admin-shell)) .product-title-lg { font-size: clamp(1.6rem, 6.5vw, 2rem); }
    body:not(:has(.admin-shell)) .purchase-box { padding: 1.25rem; }
    body:not(:has(.admin-shell)) .purchase-controls { flex-wrap: wrap; }
    body:not(:has(.admin-shell)) .purchase-controls .btn { min-width: 0; white-space: normal; }
    body:not(:has(.admin-shell)) .category-models { padding: 1rem; }
    body:not(:has(.admin-shell)) .device-family-choice { padding: 0.75rem; }
    body:not(:has(.admin-shell)) .category-model-choice { padding: 0.5rem 0.75rem; gap: 0.5rem; font-size: 0.8125rem; }
    body:not(:has(.admin-shell)) .catalog-heading { padding: 1rem 0; }
    body:not(:has(.admin-shell)) .catalog-heading h1 { font-size: 1.5rem; }
    body:not(:has(.admin-shell)) .quick-categories { justify-content: flex-start; }
    body:not(:has(.admin-shell)) .commerce-layout {
        grid-template-columns: 1fr;
    }
    body:not(:has(.admin-shell)) .cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    body:not(:has(.admin-shell)) .cart-item-img {
        width: 100%;
        height: 200px;
    }
    body:not(:has(.admin-shell)) .catalog-layout {
        flex-direction: column;
    }
    body:not(:has(.admin-shell)) .catalog-refine-row {
        flex-direction: column;
        align-items: stretch;
        border-radius: 20px;
    }
    body:not(:has(.admin-shell)) .product-container.view-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.5rem;
    }
    body:not(:has(.admin-shell)) .product-container.view-list .part-card {
        flex-direction: column;
    }
    body:not(:has(.admin-shell)) .product-container.view-list .part-img-link {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    body:not(:has(.admin-shell)) .product-container.view-list .part-buy-area {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--border-light);
    }
    .instant-models {
        padding: 2rem 1.5rem;
    }
    .instant-family-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .instant-family-options button {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    .instant-model-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .instant-model-options button {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    .main-image-container {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   Footer Redesign
   ========================================================================== */
body:not(:has(.admin-shell)) .app-footer {
    background-color: var(--apple-surface);
    color: var(--apple-text);
    border-top: 1px solid var(--border-light);
    margin-top: 4rem;
}

body:not(:has(.admin-shell)):has(.lp) .app-footer {
    margin-top: 2rem;
}

body:not(:has(.admin-shell)) .footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) repeat(4, minmax(130px, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: 3rem 0;
}

body:not(:has(.admin-shell)) .footer-service-strip {
    border-bottom: 1px solid var(--border-light);
    background: #f7faff;
}

body:not(:has(.admin-shell)) .footer-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(:has(.admin-shell)) .footer-service-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 92px;
    padding: 1.25rem clamp(1rem, 2.5vw, 2rem);
    border-right: 1px solid var(--border-light);
}

body:not(:has(.admin-shell)) .footer-service-item:first-child { padding-left: 0; }
body:not(:has(.admin-shell)) .footer-service-item svg {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #1768d4;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body:not(:has(.admin-shell)) .footer-logo {
    display: block;
    width: clamp(200px, 18vw, 240px);
    max-width: 100%;
    height: auto;
    margin-bottom: 1.25rem;
    filter: none;
    opacity: 1;
}

body:not(:has(.admin-shell)) .footer-brand p {
    color: #5b6779;
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 340px;
}

body:not(:has(.admin-shell)) .footer-brand .footer-business-note {
    margin-top: 1rem;
    padding-left: 0.85rem;
    border-left: 2px solid #b9d8fb;
    color: #68778b;
    font-size: 0.8125rem;
}

body:not(:has(.admin-shell)) .footer-links h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--apple-text);
    margin-bottom: 1.25rem;
    text-transform: none;
    letter-spacing: -0.012em;
}

body:not(:has(.admin-shell)) .footer-links a {
    display: block;
    color: #5b6779;
    font-size: 0.9375rem;
    margin-bottom: 0.875rem;
    transition: color 0.2s ease;
}

body:not(:has(.admin-shell)) .footer-links a:hover {
    color: #1768d4;
    text-decoration: none;
}

body:not(:has(.admin-shell)) .footer-links p.text-muted.small {
    color: #5b6779;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

body:not(:has(.admin-shell)) .footer-bottom {
    background: transparent;
    border-top: 1px solid var(--border-light);
    padding: 1.5rem 0;
    text-align: left;
    color: #5b6779;
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

body:not(:has(.admin-shell)) .footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 900px) {
    body:not(:has(.admin-shell)) .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
        padding: 2.5rem 0;
    }

    body:not(:has(.admin-shell)) .footer-brand { grid-column: 1 / -1; }
    body:not(:has(.admin-shell)) .footer-service-grid { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .footer-service-item,
    body:not(:has(.admin-shell)) .footer-service-item:first-child {
        min-height: 0;
        padding: 1rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--border-light);
    }
    body:not(:has(.admin-shell)) .footer-service-item:last-child { border-bottom: 0; }
    body:not(:has(.admin-shell)) .footer-bottom-inner { align-items: flex-start; flex-direction: column; }

    body:not(:has(.admin-shell)) .footer-logo {
        width: min(220px, 100%);
    }
}

@media (max-width: 560px) {
    body:not(:has(.admin-shell)) .footer-grid { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .footer-brand { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Category Models - Baseline & Layout
   -------------------------------------------------------------------------- */
.category-models [hidden] { display: none !important; }

.category-models {
    display: flex;
    flex-direction: column;
}

.category-model-heading {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
}

.device-family-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body:not(:has(.admin-shell)) .category-models { padding: 12px; margin-bottom: 16px; border-radius: 8px; box-shadow: none; background: #fff; border: 1px solid var(--border-light); }
body:not(:has(.admin-shell)) .category-model-trigger {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 14px;
    list-style: none;
    cursor: pointer;
    background: #fff;
}
body:not(:has(.admin-shell)) .category-model-trigger-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #eef5ff;
    color: #1768c5;
}

body:not(:has(.admin-shell)) .device-family-group {
    background: #fdfdfd;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    overflow: hidden;
}
body:not(:has(.admin-shell)) .device-family-group[open] {
    border-color: #8db7e8;
    box-shadow: 0 4px 12px rgba(24, 89, 168, 0.08);
}

body:not(:has(.admin-shell)) .device-family-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 12px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    list-style: none; /* remove default arrow */
}
body:not(:has(.admin-shell)) .device-family-group[open] .device-family-choice {
    background: #eef5ff;
    border-bottom: 1px solid #dce8f5;
    color: #1859a8;
}

body:not(:has(.admin-shell)) .device-family-dropdown {
    padding: 0;
    background: #fff;
}

body:not(:has(.admin-shell)) .category-model-tools { position: sticky; top: 0; z-index: 2; padding: 13px; background: #eaf4ff; border-bottom: 1px solid #c9def5; }

body:not(:has(.admin-shell)) .category-models .category-model-options { 
    display: grid; 
    grid-template-columns: 1fr;
    margin: 0; 
    gap: 6px; 
}

body:not(:has(.admin-shell)) .category-browse {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}
body:not(:has(.admin-shell)) .category-browse-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    border-bottom: 1px solid #e4eaf2;
    background: #f7faff;
}
body:not(:has(.admin-shell)) .category-browse-heading span {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body:not(:has(.admin-shell)) .category-browse-heading h2 {
    margin: 3px 0 0;
    color: #17283d;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.02em;
}
body:not(:has(.admin-shell)) .category-browse-heading p {
    max-width: 420px;
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
}
body:not(:has(.admin-shell)) .category-browse-grid {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(320px, 1.28fr);
    align-items: start;
}
body:not(:has(.admin-shell)) .category-brand-browse {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .category-browse-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
body:not(:has(.admin-shell)) .category-browse-label h3 {
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body:not(:has(.admin-shell)) .category-browse-label small {
    color: #7c899a;
    font-size: 11px;
}
body:not(:has(.admin-shell)) .category-brand-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
body:not(:has(.admin-shell)) .category-brand-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 38px;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f7f9fc;
    color: #334155;
    font-size: 12px;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .category-brand-choice:hover {
    border-color: #cdd8e4;
    background: #f0f4f8;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .category-brand-choice.active {
    border-color: #8db7e8;
    background: #eef5ff;
    color: #1859a8;
}
body:not(:has(.admin-shell)) .category-brand-choice strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .category-brand-choice small {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #e9eef5;
    color: #64748b;
    text-align: center;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent {
    margin: 0;
    border: 0;
    border-radius: 0;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent > .category-model-trigger {
    min-height: 52px;
    border-bottom: 1px solid #e7edf5;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 7px;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-group[open] {
    grid-column: 1 / -1;
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-scroll {
    max-height: none;
}
body:not(:has(.admin-shell)) .category-browse-loading {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 18px;
}
body:not(:has(.admin-shell)) .category-browse-loading i {
    display: block;
    height: 40px;
    border-radius: 7px;
    background: linear-gradient(90deg, #f2f5f9 25%, #e8edf3 50%, #f2f5f9 75%);
    background-size: 200% 100%;
    animation: category-browse-loading 1.2s ease-in-out infinite;
}
@keyframes category-browse-loading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

body:not(:has(.admin-shell)) .housing-guide-heading {
    background: #f3f8ff;
}
body:not(:has(.admin-shell)) .housing-guide-steps {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
    align-items: start;
}
body:not(:has(.admin-shell)) .housing-guide-step {
    min-width: 0;
    padding: 14px;
}
body:not(:has(.admin-shell)) .housing-guide-step:first-child {
    grid-row: span 2;
    border-right: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .housing-guide-step:nth-child(2) {
    border-bottom: 1px solid #e4eaf2;
}
body:not(:has(.admin-shell)) .housing-result-step {
    padding-block: 12px;
}
body:not(:has(.admin-shell)) .housing-step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}
body:not(:has(.admin-shell)) .housing-step-heading > b {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 13px;
}
body:not(:has(.admin-shell)) .housing-guide-step.is-complete .housing-step-heading > b {
    background: #dcfce7;
    color: #15803d;
}
body:not(:has(.admin-shell)) .housing-guide .category-models--prominent {
    margin: 0;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
}
body:not(:has(.admin-shell)) .housing-part-options {
    display: grid;
    gap: 6px;
}
body:not(:has(.admin-shell)) .housing-part-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .housing-part-choice:hover {
    border-color: #9abfe9;
    background: #f8fbff;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .housing-part-choice.active {
    border-color: #72a7e5;
    background: #eef5ff;
    color: #1859a8;
}
body:not(:has(.admin-shell)) .housing-part-choice b {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 5px;
    background: #eef2f7;
    color: #64748b;
    font-size: 11px;
}
body:not(:has(.admin-shell)) .housing-step-locked,
body:not(:has(.admin-shell)) .housing-products-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px dashed #cdd8e4;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
}
body:not(:has(.admin-shell)) .housing-step-locked > span {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8edf3;
    font-weight: 700;
}

@media (max-width: 900px) {
    body:not(:has(.admin-shell)) .housing-guide-steps { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .housing-guide-step:first-child { grid-row: auto; border-right: 0; border-bottom: 1px solid #e4eaf2; }
}

@media (max-width: 760px) {
    body:not(:has(.admin-shell)) .category-browse-heading { align-items: start; flex-direction: column; gap: 6px; }
    body:not(:has(.admin-shell)) .category-browse-heading p { text-align: left; }
    body:not(:has(.admin-shell)) .category-browse-grid { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-brand-browse { border-right: 0; border-bottom: 1px solid #e4eaf2; }
    body:not(:has(.admin-shell)) .category-brand-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 214px; }
    body:not(:has(.admin-shell)) .category-browse .category-models--prominent .device-family-options { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-browse .category-models--prominent .category-model-options { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-browse-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    body:not(:has(.admin-shell)) .category-models .category-model-options { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .category-models .category-model-choice { min-height: 40px; }
    body:not(:has(.admin-shell)) .category-model-scroll { max-height: min(46svh, 380px); }
}
/* Currency notice shown with cart and checkout totals. The delivery country is
   set on the address, not in the header, so there is no picker to style. */
.currency-context-note { font-size: .8rem; color: var(--text-muted); margin-top: .65rem; }

/* B2B Catalog Table & Search Styling */

/* Calm, task-led catalogue filters */
body:not(:has(.admin-shell)) .catalog-accessory-filters {
    margin: .75rem 0 1rem;
    max-width: 100%;
    border-top: 1px solid #dfe7f0;
    border-bottom: 1px solid #dfe7f0;
}
body:not(:has(.admin-shell)) .catalog-accessory-toolbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: end;
    gap: 1rem;
    padding: .7rem 0;
}
body:not(:has(.admin-shell)) .catalog-accessory-title {
    align-self: center;
    color: #24364b;
    font-size: .875rem;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .catalog-accessory-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
body:not(:has(.admin-shell)) .catalog-accessory-control {
    display: grid;
    gap: .35rem;
    min-width: 0;
}
body:not(:has(.admin-shell)) .catalog-accessory-control > span {
    color: #64748b;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body:not(:has(.admin-shell)) .catalog-accessory-control select {
    width: 100%;
    min-height: 36px;
    padding: .35rem .5rem;
    border: 1px solid #cfdce9;
    border-radius: 6px;
    background: #fff;
    color: #334155;
}
@media (max-width: 900px) {
    body:not(:has(.admin-shell)) .catalog-accessory-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
        gap: .65rem;
    }
}
@media (max-width: 640px) {
    body:not(:has(.admin-shell)) .catalog-accessory-controls { grid-template-columns: 1fr; }
}

body:not(:has(.admin-shell)) .catalog-desktop-filters {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e8edf3;
}

body:not(:has(.admin-shell)) .catalog-desktop-filters > h3 {
    margin: 0 0 16px;
    color: #738196;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body:not(:has(.admin-shell)) .catalog-sidebar .device-fields,
body:not(:has(.admin-shell)) .filter-dialog .device-fields {
    gap: 10px;
}

@media (min-width: 1000px) {
    body:not(:has(.admin-shell)) .catalog-sidebar {
        flex: 0 0 256px;
    }

    body:not(:has(.admin-shell)) .catalog-main {
        min-width: 0;
    }
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step {
    position: relative;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step::before {
    display: none;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step > label,
body:not(:has(.admin-shell)) .advanced-filters .field > label {
    display: block;
    margin: 0 0 6px;
    color: #637087;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step .form-control {
    min-height: 36px;
    padding: 6px 9px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 0.8125rem;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step .model-picker summary {
    min-height: 42px;
    align-items: flex-start;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step .model-caption {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-height: 2.7em;
    white-space: normal !important;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover {
    right: auto;
    width: min(300px, calc(100vw - 32px));
    max-height: min(68vh, 540px);
    border-radius: 12px;
    overflow: hidden;
}

body:not(:has(.admin-shell)) .discovery-filters .model-search-wrap {
    position: relative;
    display: block;
    margin: 12px 12px 0;
}

body:not(:has(.admin-shell)) .discovery-filters .model-search-wrap svg {
    position: absolute;
    z-index: 1;
    left: 11px;
    top: 50%;
    width: 17px;
    height: 17px;
    color: #718096;
    transform: translateY(-50%);
    pointer-events: none;
}

body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover .model-search {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px;
    background: #f8fafc;
    border-color: #dce4ee;
    border-radius: 10px;
    font-size: 0.8rem;
}

body:not(:has(.admin-shell)) .discovery-filters .model-search-help {
    margin: 7px 14px 10px;
    color: #738095;
    font-size: 0.68rem;
    line-height: 1.35;
}

body:not(:has(.admin-shell)) .discovery-filters .model-options {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

body:not(:has(.admin-shell)) .discovery-filters .model-options-scroll {
    max-height: min(42vh, 330px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 8px 8px;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option {
    min-height: 39px;
    margin: 2px 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f7f9fc;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option span {
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option-all {
    min-height: 36px;
    margin: 0 12px 7px;
    width: auto;
    color: #526176;
    background: #fff;
    border: 1px solid #e7edf5;
}

body:not(:has(.admin-shell)) .discovery-filters .model-result-count {
    margin: 0 12px 7px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option-group + .model-option-group {
    margin-top: 12px;
}

body:not(:has(.admin-shell)) .discovery-filters .model-option-group h4 {
    margin: 0 3px 5px;
    color: #526176;
    font-size: 0.66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body:not(:has(.admin-shell)) .discovery-filters .model-show-all {
    flex: none;
    min-height: 40px;
    border: 0;
    border-top: 1px solid #e7edf5;
    background: #fff;
    color: #1768c5;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}

body:not(:has(.admin-shell)) .discovery-filters .model-show-all:hover {
    background: #f5f9ff;
}

@media (max-width: 760px) {
    body:not(:has(.admin-shell)) .discovery-filters .model-picker-popover {
        right: 0;
        width: 100%;
    }
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step:focus-within {
    border-color: #94a3b8;
    box-shadow: inset 2px 0 0 #3b82f6;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step.has-value {
    border-color: #cbd5e1;
    background: #f8fafc;
}

body:not(:has(.admin-shell)) .discovery-filters .filter-step.has-value::before {
    display: none;
}

body:not(:has(.admin-shell)) .advanced-filters {
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
    border-bottom: 1px solid #e8edf3;
}

body:not(:has(.admin-shell)) .advanced-filters > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 2px;
    color: #42546b;
    list-style: none;
}

body:not(:has(.admin-shell)) .advanced-filters > summary::-webkit-details-marker { display: none; }
body:not(:has(.admin-shell)) .advanced-filters > summary::after {
    content: "+";
    color: #6c7d91;
    font-size: 1rem;
}

body:not(:has(.admin-shell)) .advanced-filters .field {
    margin: 6px 0 12px;
}

body:not(:has(.admin-shell)) .advanced-filters .form-control {
    min-height: 40px;
    font-size: 0.8125rem;
}

body:not(:has(.admin-shell)) .filter-auto-hint {
    margin: 11px 0 0;
    color: #8190a3;
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* B2B Products Wrapper */
.b2b-products {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    overflow: visible;
    margin: 1rem 0;
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products,
body:not(:has(.admin-shell)) .catalog-empty-surface {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--catalog-shell-border, var(--border-light));
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--catalog-shell-shadow, 0 2px 8px rgba(15, 23, 42, 0.035));
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products {
    border: 1px solid var(--catalog-shell-border, var(--border-light));
}

body:not(:has(.admin-shell)) .b2b-products-toolbar {
    display: flex;
    min-height: 48px;
    padding: 7px 12px;
    align-items: center;
    justify-content: flex-end;
    background: var(--catalog-header-surface, #f5f5f7);
    border-bottom: 1px solid var(--catalog-shell-border, var(--border-light));
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th {
    height: 56px;
    background: var(--catalog-header-surface, #f5f5f7);
    border-radius: 0;
    box-sizing: border-box;
}

body:not(:has(.admin-shell)) .catalog-empty-surface .empty-state {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Dense Table */
.b2b-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.b2b-table th {
    background: var(--catalog-header-surface, #f5f5f7);
    font-weight: 600;
    color: var(--apple-muted);
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th:first-child,
body:not(:has(.admin-shell)) .catalog-main > .b2b-products .b2b-table th:last-child {
    border-radius: 0;
}

.b2b-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.b2b-table tr:last-child td {
    border-bottom: none;
}

.b2b-table tr:hover {
    background: #fcfcfc;
}

/* Columns */
.col-img { width: 68px; padding-right: 0 !important; }

/* Image */
.b2b-img-wrap {
    position: relative;
    display: flex;
    width: 56px;
    height: 56px;
    padding: 0;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    text-decoration: none;
}

button.b2b-img-wrap {
    appearance: none;
    color: inherit;
    font: inherit;
    cursor: zoom-in;
}

.b2b-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.b2b-img-wrap:hover img,
.b2b-img-wrap:focus-visible img {
    transform: scale(1.14);
}

.b2b-img-wrap:focus-visible {
    outline: 3px solid rgba(0, 113, 227, .28);
    outline-offset: 2px;
    border-color: var(--primary);
}

.b2b-img-zoom {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #1769aa;
    border: 1px solid #c9daea;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(17, 55, 91, .16);
    pointer-events: none;
    transition: transform .2s ease, border-color .2s ease;
}

.b2b-img-zoom svg {
    width: 12px;
    height: 12px;
}

.b2b-img-wrap:hover .b2b-img-zoom,
.b2b-img-wrap:focus-visible .b2b-img-zoom {
    transform: scale(1.08);
    border-color: #72a5d1;
}

.b2b-img-wrap.no-img svg {
    width: 30px;
    height: 30px;
    color: #52799e;
}

.b2b-img-wrap.no-img {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.92), transparent 42%),
        linear-gradient(145deg, #f2f7fb, #e7f0f8);
    border-color: #d5e2ee;
}

.b2b-img-wrap.no-img:hover {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.96), transparent 42%),
        linear-gradient(145deg, #edf5fb, #dceaf5);
    border-color: #b9cee0;
}

/* Product Info */
.b2b-prod-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
    line-height: 1.22;
}

.b2b-prod-title a { color: #1d1d1f; text-decoration: none; transition: color 0.2s ease; }
body:not(:has(.admin-shell)) .b2b-prod-title a:hover,
body:not(:has(.admin-shell)) .b2b-prod-title a:focus-visible {
    color: var(--primary);
    text-decoration: none;
}

.b2b-prod-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.b2b-sku {
    color: var(--apple-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.b2b-badge {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

.b2b-badge.quality {
    background: #fff0e6;
    color: #e56000;
}

.b2b-badge.type {
    background: #f0f0f5;
    color: #555;
}

.b2b-prod-models {
    color: var(--apple-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Stock */
.b2b-stock-indicator {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
}

.b2b-min-qty-warn {
    font-size: 0.75rem;
    color: #ff3b30;
    margin-top: 0.25rem;
    font-weight: 600;
}

/* Price */
.b2b-price {
    font-size: 1rem;
    line-height: 1.35;
}
.b2b-login-link {
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
}

/* Order Controls */
.b2b-order-controls {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.b2b-qty-input {
    width: 54px;
    height: 34px;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    background: #fff;
    color: #1d1d1f;
}
.b2b-qty-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,113,227,0.15);
}

.b2b-add-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.b2b-add-btn:hover:not(:disabled) {
    background: var(--primary-hover);
}

.b2b-add-btn.loading {
    background: var(--apple-muted);
    pointer-events: none;
}

.b2b-add-btn.success {
    background: #34c759;
}

.b2b-row-feedback {
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    min-height: calc(2.7em + 0.44rem);
    margin-top: 0.4rem;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1.35;
}
.b2b-row-feedback-message {
    display: inline-block;
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: 999px;
    opacity: 0;
    overflow-wrap: anywhere;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.b2b-row-feedback.has-message .b2b-row-feedback-message {
    opacity: 1;
    transform: translateY(0);
}
.b2b-row-feedback.success .b2b-row-feedback-message {
    padding: 0.22rem 0.5rem;
    background: #edf8f0;
    border-color: #d0ecd8;
    color: #1f7a37;
    font-weight: 650;
}
.b2b-row-feedback.error .b2b-row-feedback-message {
    padding: 0.22rem 0.5rem;
    background: #fff4f3;
    border-color: #ffd8d2;
    color: #c72c22;
    font-weight: 600;
}
.b2b-row-feedback.is-adding .b2b-row-feedback-message {
    padding: 0.22rem 0.5rem;
    background: #f3f6fa;
    border-color: #e0e7ef;
    color: #607087;
}

@media (prefers-reduced-motion: reduce) {
    .b2b-row-feedback-message {
        transition-duration: .01ms;
    }
}

.b2b-staff-note {
    font-size: 0.75rem;
    color: var(--apple-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.b2b-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--apple-muted);
    font-size: 0.9375rem;
}

/* Catalogue refreshes retain the last useful table, rather than swapping the
   entire page for a loader. The veil is deliberately light so row geometry
   remains stable and the filter rail can accept the next selection. */
[data-catalog-shell] { position: relative; }
.catalog-refresh-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 42%;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
    animation: catalog-progress 1.05s ease-in-out infinite;
}
.is-catalog-refreshing [data-catalog-results]::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: auto;
    background: linear-gradient(105deg, rgba(255,255,255,.38), rgba(245,248,252,.62), rgba(255,255,255,.38));
    background-size: 200% 100%;
    animation: catalog-veil 1.2s linear infinite;
}
.catalog-refresh-error {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
    padding: .55rem .75rem;
    color: #9f2f26;
    background: #fff5f4;
    border: 1px solid #f0d1cd;
    border-radius: 7px;
    font-size: .8125rem;
}
.catalog-result-status {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    .catalog-refresh-progress, .is-catalog-refreshing [data-catalog-results]::after, .catalog-skeleton i { animation: none; }
}

@media (max-width: 768px) {
    .catalog-skeleton-heading { margin: .6rem 0 1rem; padding: 0 .15rem; }
    .catalog-skeleton .catalog-sidebar { display: none; }
    .catalog-skeleton-toolbar { height: 54px; padding: 0 10px; }
    .catalog-skeleton-toolbar i { width: min(72%, 280px); height: 38px; }
    .catalog-skeleton-row {
        grid-template-columns: 54px minmax(0, 1fr) 42px;
        grid-template-areas:
            "photo copy action"
            "photo stock price";
        gap: .45rem .75rem;
        min-height: 112px;
        padding: .8rem .75rem;
    }
    .catalog-skeleton-photo { grid-area: photo; width: 50px; height: 66px; }
    .catalog-skeleton-copy { grid-area: copy; }
    .catalog-skeleton-stock { grid-area: stock; width: 74px; }
    .catalog-skeleton-price { grid-area: price; width: 56px; justify-self: end; }
    .catalog-skeleton-action { grid-area: action; width: 38px; height: 34px; }
}

/* B2B Menu Navigation */
.store-menu {
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
}

.store-menu-container {
    display: flex;
}

.b2b-menu-wrapper {
    position: relative;
    display: inline-block;
}

.b2b-menu-btn {
    background: #3967d6; /* screenshot blue */
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.b2b-menu-btn:hover, .b2b-menu-btn.active {
    background: #2a52b3;
}

.b2b-menu-btn .chevron {
    transition: transform 0.2s;
    margin-left: 0.25rem;
}
.b2b-menu-btn.active .chevron {
    transform: rotate(180deg);
}

.b2b-menu-dropdown[hidden] {
    display: none !important;
}

.b2b-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 75vh;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.b2b-menu-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    height: 100%;
}

.b2b-menu-slider {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
}

.b2b-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 0;
}

.b2b-panel-active { transform: translateX(0); z-index: 2; }

.b2b-menu-group { margin-bottom: 0.5rem; }

.b2b-menu-heading {
    font-size: 1rem;
    font-weight: 800;
    padding: 1rem 1.25rem 0.5rem;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.b2b-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9375rem;
    color: #1d1d1f;
    cursor: pointer;
    text-decoration: none;
}

.b2b-menu-item:hover {
    background: #f5f5f7;
    text-decoration: none;
}

.b2b-menu-item.b2b-has-children {
    justify-content: space-between;
}

.b2b-menu-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    width: 100%;
    background: #f5f5f7;
    border: none;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    color: #1d1d1f;
}

.b2b-menu-all {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
}

.instant-search {
    position: relative;
}

/* MAIN Search Markup */
.b2b-search-results[role="dialog"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    margin-top: 4px;
}

/* Smart Search is one shared fast-order component in the homepage, header,
   and catalogue. Keep its context and category choices structured everywhere. */
.b2b-search-results .smart-search-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border-light);
    background: #f7faff;
    color: #66758a;
    font-size: 0.72rem;
}
.b2b-search-results .smart-search-context > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.b2b-search-results .smart-search-context > span + span::before {
    content: "›";
    margin-right: 0.25rem;
    color: var(--primary);
    font-weight: 700;
}
.b2b-search-results .smart-search-understood {
    margin-right: auto;
    color: #263449;
}
.b2b-search-results .smart-search-parts {
    padding: 0.75rem 1rem 0.875rem;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
}
.b2b-search-results .smart-search-parts > p {
    margin: 0 0 0.55rem;
    color: #263449;
    font-size: 0.75rem;
    font-weight: 700;
}
.b2b-search-results .smart-search-part-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.5rem;
}
.b2b-search-results .smart-search-part {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    min-height: 58px;
    padding: 0.4rem 0.55rem;
    border: 1px solid #dfe7f1;
    border-radius: 9px;
    background: #f8fbff;
    color: #263449;
    text-decoration: none;
}
.b2b-search-results .smart-search-part:hover,
.b2b-search-results .smart-search-part:focus-visible {
    border-color: #9fc5f1;
    background: #f1f7ff;
    text-decoration: none;
}
.b2b-search-results .smart-search-part-media,
.b2b-search-results .smart-search-part-media img {
    width: 44px;
    height: 44px;
}
.b2b-search-results .smart-search-part-media img {
    object-fit: contain;
    border-radius: 6px;
}
.b2b-search-results .smart-search-part-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.b2b-search-results .smart-search-part-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}
.b2b-search-results .smart-search-part-copy small {
    color: #718096;
    font-size: 0.7rem;
}

.b2b-products .sr-only,
.b2b-search-results .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;
}

.b2b-suggestion {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.b2b-suggestion-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.b2b-suggestion-link img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 2px;
}

.b2b-suggestion-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.b2b-suggestion-info strong {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1d1d1f;
}

.b2b-suggestion-info small {
    font-size: 0.75rem;
    color: var(--apple-muted);
}

.b2b-suggestion-price {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1d1d1f;
    white-space: nowrap;
}

.b2b-suggestion-order {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.b2b-suggestion-order input {
    width: 50px;
    height: 32px;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
}

.b2b-add {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 0.75rem;
    height: 32px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

/* Responsive Grid -> List Fallback for Mobile Table */
@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .b2b-products-toolbar {
        min-height: 54px;
        padding: 8px 10px;
    }
    body:not(:has(.admin-shell)) .b2b-products-toolbar .catalog-sort {
        width: 100%;
        justify-content: space-between;
    }
    body:not(:has(.admin-shell)) .b2b-products-toolbar .catalog-sort select {
        min-width: 0;
        max-width: min(72%, 280px);
    }
    .b2b-table, .b2b-table tbody { display: block; width: 100%; min-width: 0; }
    .b2b-table thead { display: none; }
    .b2b-table tr {
        display: block;
        padding: 0.75rem;
        position: relative;
        border-bottom: 5px solid var(--apple-bg);
    }
    .b2b-table td {
        display: block;
        padding: 0;
        border: none;
        width: 100% !important;
    }
    .col-img {
        position: absolute;
        top: 0.85rem;
        left: 0.75rem;
        width: 56px !important;
    }
    .b2b-img-wrap { width: 56px; height: 56px; }
    
    .col-product {
        padding-left: 68px !important;
        margin-bottom: 0.4rem;
        min-height: 56px;
    }
    .b2b-prod-models { white-space: normal; max-width: none; }
    
    .col-stock {
        padding-left: 68px !important;
        margin-bottom: 0.25rem;
    }
    
    .col-price {
        padding-left: 68px !important;
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    
    .col-order {
        padding-left: 68px !important;
    }
    .b2b-order-controls {
        width: auto;
        max-width: 126px;
        gap: 6px;
    }
    .b2b-qty-input { flex: 0 0 66px; width: 66px; max-width: 66px; height: 40px; font-size: 1rem; }
    .b2b-add-btn { flex: 0 0 48px; width: 48px; height: 40px; }

    /* Search suggestion mobile */
    .b2b-suggestion {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }
    .b2b-suggestion-link { grid-column: 1 / -1; width: auto; }
    .b2b-suggestion-info strong { white-space: normal; overflow-wrap: anywhere; }
    .b2b-suggestion-price { margin: 0; min-width: 0; white-space: normal; }
    .b2b-suggestion-order { margin: 0; min-width: 0; justify-content: flex-end; gap: 0.35rem; }
    .b2b-suggestion-order input { flex: 0 0 48px; width: 48px; min-width: 0; height: 40px; font-size: 16px; }
    .b2b-suggestion-order .b2b-add { flex: 0 0 auto; width: auto; min-width: 0; height: 40px; padding: 0 0.6rem; white-space: nowrap; letter-spacing: normal; }
    .b2b-suggestion > .b2b-row-feedback { grid-column: 1 / -1; min-width: 0; }
    .b2b-search-results .smart-search-context {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .b2b-search-results .smart-search-understood { grid-column: 1 / -1; margin-right: 0; }
    body:not(:has(.admin-shell)) .instant-home .instant-category-options { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
}

/* Search results behave as a distinct, visibly scrollable pop-out workspace. */
.b2b-search-results[role="dialog"] {
    top: calc(100% + 14px);
    left: -12px;
    right: auto;
    width: min(960px, calc(100vw - 48px));
    max-height: min(68vh, 660px);
    margin-top: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 2px solid #77aef0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(20, 54, 96, 0.24), 0 6px 20px rgba(20, 54, 96, 0.12);
    scrollbar-color: #3580d8 #eaf2fb;
    scrollbar-width: auto;
    transform-origin: top center;
}
@keyframes search-popout-enter {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.search-popout-active .lp-search-field,
.search-popout-active.catalog-smart-form .catalog-smart-field,
.search-popout-active .catalog-smart-field {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(100deg, #1677ff, #7c3aed, #ec4899, #f59e0b, #10b981, #1677ff) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 0 0 0 5px rgba(31, 111, 235, .12), 0 12px 34px rgba(27, 92, 172, .18);
    animation: active-search-rainbow 2.4s linear infinite;
}
@keyframes active-search-rainbow {
    to { background-position: 0 0, 300% 0; }
}
.b2b-search-results .suggestion-group-title {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid #dce6f2;
    background: rgba(248, 251, 255, .97);
    backdrop-filter: blur(12px);
}
.search-popout-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cedaea;
    border-radius: 50%;
    background: #fff;
    color: #40516a;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
.search-scroll-cue {
    position: sticky;
    bottom: 50px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: -42px auto 8px;
    padding: 7px 13px;
    border: 1px solid #b8d5f6;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 18px rgba(24, 78, 143, .18);
    color: #175fae;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}
.search-scroll-cue svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    animation: search-cue-bounce .9s ease-in-out infinite alternate;
}
.b2b-search-results .suggestion-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    min-height: 50px;
    padding: 14px 18px;
    border-top: 1px solid #d7e3f1;
    background: #edf5ff;
    color: #145cae;
    font-weight: 700;
}
.b2b-suggestion:has(.b2b-suggestion-link:focus-visible),
.b2b-suggestion:has(.b2b-suggestion-link.is-active) {
    background: #edf5ff;
    box-shadow: inset 4px 0 #2878d0;
}

@media (max-width: 760px) {
    body.search-popout-mobile-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 2998;
        background: rgba(10, 25, 45, .34);
        backdrop-filter: blur(2px);
    }
    .b2b-search-results[role="dialog"] {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 2999;
        width: auto;
        max-height: none;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .b2b-search-results.search-popout-enter,
    .search-popout-active .lp-search-field,
    .search-popout-active.catalog-smart-form .catalog-smart-field,
    .search-popout-active .catalog-smart-field,
    .search-scroll-cue svg { animation: none; }
}

/* A selected model owns a local product search. It never opens Smart Search. */
body:not(:has(.admin-shell)) .model-part-search {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
    align-items: center;
    gap: 18px;
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid #bfd5f0;
    border-radius: 10px;
    background: linear-gradient(110deg, #f3f8ff, #fff);
    box-shadow: 0 4px 16px rgba(32, 91, 157, .08);
}
body:not(:has(.admin-shell)) .model-part-search-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
body:not(:has(.admin-shell)) .model-part-search-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #e2efff;
    color: #1765be;
}
body:not(:has(.admin-shell)) .model-part-search h2 {
    margin: 0 0 2px;
    color: #17283d;
    font-size: 14px;
    line-height: 1.3;
}
body:not(:has(.admin-shell)) .model-part-search p {
    margin: 0;
    color: #617188;
    font-size: 11px;
    line-height: 1.4;
}
body:not(:has(.admin-shell)) .model-part-search-form {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
body:not(:has(.admin-shell)) .model-part-search-form > .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;
}
body:not(:has(.admin-shell)) .model-part-search-field {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    padding-left: 12px;
    border: 1px solid #aebfd4;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(20, 45, 75, .04);
}
body:not(:has(.admin-shell)) .model-part-search-field:focus-within {
    border-color: #2878d0;
    box-shadow: 0 0 0 3px rgba(40, 120, 208, .14);
}
body:not(:has(.admin-shell)) .model-part-search-field > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #6c7d92;
}
body:not(:has(.admin-shell)) .model-part-search-field input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #17283d;
    font: inherit;
    font-size: 13px;
}
body:not(:has(.admin-shell)) .model-part-search-field button {
    align-self: stretch;
    margin: 4px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: #2878d0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .model-part-search-clear {
    flex: 0 0 auto;
    color: #52657c;
    font-size: 11px;
    font-weight: 650;
}

@media (max-width: 900px) {
    body:not(:has(.admin-shell)) .model-part-search {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
@media (max-width: 560px) {
    body:not(:has(.admin-shell)) .model-part-search { padding: 13px; }
    body:not(:has(.admin-shell)) .model-part-search-form { align-items: stretch; flex-direction: column; }
    body:not(:has(.admin-shell)) .model-part-search-field {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        min-height: 46px;
        padding: 8px 10px 10px;
    }
    body:not(:has(.admin-shell)) .model-part-search-field input { width: 100%; padding-right: 0; }
    body:not(:has(.admin-shell)) .model-part-search-field button {
        grid-column: 1 / -1;
        min-height: 40px;
        margin: 4px 0 0;
        padding: 0 10px;
    }
    body:not(:has(.admin-shell)) .model-part-search-clear { align-self: flex-start; padding: 3px 0; }
}
/* ==========================================================================
   B2B Navigation & Compact Catalog Discovery
   ========================================================================== */

/* 1. Mega Menu Header (Overrides for nav#store-menu) */
body:not(:has(.admin-shell)) .app-header .header-inner {
    height: 72px;
    gap: 24px;
}
body:not(:has(.admin-shell)) .app-header .logo {
    flex-shrink: 0;
}
body:not(:has(.admin-shell)) .app-header .logo img {
    display: block;
    height: 46px;
    width: auto;
}
body:not(:has(.admin-shell)) .app-header .search-bar {
    flex: 1;
    min-width: 120px;
    max-width: 640px;
    margin: 0;
}

body:not(:has(.admin-shell)) .app-header .search-input-wrapper:hover {
    border-color: #c6cedb;
}
body:not(:has(.admin-shell)) .app-header .search-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}
body:not(:has(.admin-shell)) .app-header .search-icon {
    flex-shrink: 0;
    margin: 0;
    color: #98a2b3;
}
body:not(:has(.admin-shell)) .app-header #search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: .9375rem;
    color: var(--text-main);
}
body:not(:has(.admin-shell)) .app-header #search-input::placeholder {
    color: #98a2b3;
}
body:not(:has(.admin-shell)) .app-header #search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

body:not(:has(.admin-shell)):has(.lp) .app-header .search-bar,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .search-bar {
    display: none;
}

body:not(:has(.admin-shell)) .app-header .page-search-jump {
    display: none;
}

body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 112px;
    height: 40px;
    margin-left: auto;
    padding: 0 18px;
    border: 1px solid #d7e2ef;
    border-radius: 999px;
    background: #f7faff;
    color: #1768c5;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(21, 58, 103, .04);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump:hover,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump:hover {
    background: #edf5ff;
    border-color: #b7cdea;
}

body:not(:has(.admin-shell)) .app-header .page-search-jump:active { transform: scale(.98); }


body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
    margin-left: 4px;
}

body:not(:has(.admin-shell)) .catalog-smart-search {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(135deg, #f8fbff, #fff) padding-box,
        linear-gradient(105deg, #78baf0 0%, #9a91e6 28%, #dea0cb 52%, #efb184 75%, #7ac9ce 100%) border-box;
    box-shadow: 0 10px 28px rgba(48, 83, 130, .09);
}

body:not(:has(.admin-shell)) .catalog-smart-search[hidden] {
    display: none;
}

body:not(:has(.admin-shell)) .catalog-smart-intro {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body:not(:has(.admin-shell)) .catalog-smart-intro strong { font-size: 14px; color: #172033; }
body:not(:has(.admin-shell)) .catalog-smart-field {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 5px 5px 5px 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(105deg, #8bc5f0, #aca1eb 32%, #e4adcf 57%, #f0bb91 79%, #8bd3d3) border-box;
    box-shadow: 0 4px 14px rgba(31, 75, 128, .08);
}
body:not(:has(.admin-shell)) .catalog-smart-field:focus-within {
    box-shadow:
        0 0 0 4px rgba(122, 145, 229, .12),
        0 8px 24px rgba(45, 84, 140, .13);
}
body:not(:has(.admin-shell)) .catalog-smart-field input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
}
body:not(:has(.admin-shell)) .catalog-smart-field button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #2878ed;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 720px) {
    body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump {
        min-width: 94px;
        height: 38px;
        padding: 0 13px;
    }
    body:not(:has(.admin-shell)) .catalog-smart-search { grid-template-columns: 1fr; gap: 9px; padding: 11px; }
    body:not(:has(.admin-shell)) .catalog-smart-intro span { display: none; }
    body:not(:has(.admin-shell)) .catalog-smart-field { grid-template-columns: 20px minmax(0, 1fr); padding: 7px 10px; }
    body:not(:has(.admin-shell)) .catalog-smart-field button { grid-column: 1 / -1; width: 100%; }
}
body:not(:has(.admin-shell)) .app-header .user-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
body:not(:has(.admin-shell)) .app-header .nav-account-menu {
    position: relative;
    flex: 0 0 auto;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown {
    position: absolute;
    z-index: 110;
    top: 100%;
    right: 0;
    display: grid;
    width: min(230px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid #dfe5ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 36, 60, .14);
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown a,
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #34465e;
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown a:hover,
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown button:hover {
    background: #f3f8ff;
    color: #1768c5;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown a:focus-visible,
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown button:focus-visible {
    outline: 2px solid #2878ed;
    outline-offset: -2px;
}
body:not(:has(.admin-shell)) .app-header .nav-account-dropdown .nav-account-logout {
    border-top: 1px solid #e7ebf0;
    border-radius: 0 0 6px 6px;
}

/* Language is a quiet utility in the top environment bar. */
body:not(:has(.admin-shell)) .test-banner .language-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    height: 24px;
    margin: 0;
    padding: 0 3px 0 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #f5f5f7;
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body:not(:has(.admin-shell)) .test-banner .language-control:hover {
    background: rgba(255,255,255,.1);
}
body:not(:has(.admin-shell)) .test-banner .language-control:focus-within {
    box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
body:not(:has(.admin-shell)) .test-banner .language-control > label.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
body:not(:has(.admin-shell)) .test-banner .language-control__icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: currentColor;
}
body:not(:has(.admin-shell)) .test-banner .language-control select {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: #f5f5f7;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    line-height: 24px;
    cursor: pointer;
    outline: none;
}
body:not(:has(.admin-shell)) .test-banner .language-control select option {
    color: #1d1d1f;
}
body:not(:has(.admin-shell)) .test-banner .language-control__chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    color: currentColor;
    pointer-events: none;
}

@media (max-width: 640px) {
    body:not(:has(.admin-shell)) .test-banner {
        justify-content: center;
        padding: 5px 8px 5px 12px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }
    body:not(:has(.admin-shell)) .test-banner > span {
        justify-self: center;
    }
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-main);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-link:hover {
    background: #f1f4f9;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dfe5ed;
    border-radius: 999px;
    background: #fff;
    color: #34465e;
    box-shadow: 0 1px 2px rgba(20, 36, 60, .04);
    cursor: pointer;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action:hover {
    border-color: #bcd2ed;
    background: #f3f8ff;
    color: #1768c5;
    transform: translateY(-1px);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signout-action:hover {
    border-color: #edc5c8;
    background: #fff5f5;
    color: #b4232d;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action:active {
    transform: translateY(0) scale(.97);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-icon-action:focus-visible {
    outline: 2px solid #2878ed;
    outline-offset: 2px;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid #dfe5ed;
    border-radius: 999px;
    background: #fff;
    color: #34465e;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(20, 36, 60, .04);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart:hover {
    border-color: #bcd2ed;
    background: #f3f8ff;
    color: #1768c5;
    transform: translateY(-1px);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart:active {
    transform: translateY(0) scale(.98);
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart:focus-visible {
    outline: 2px solid #2878ed;
    outline-offset: 2px;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart .cart-icon-wrapper {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-cart .nav-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin {
    height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #344054;
    font-weight: 600;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin:hover {
    border-color: transparent;
    background: transparent;
    color: var(--primary);
    text-decoration: none;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin svg {
    flex: none;
    transition: transform .15s ease;
}
body:not(:has(.admin-shell)) .app-header .user-nav .nav-signin:hover svg {
    transform: translateY(-1px);
}
body:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
    height: 40px;
    padding: 0 22px;
    font-size: .875rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
body:not(:has(.admin-shell)) .store-mega-menu {
    background: #f5f8fc;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #dbe3ed;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 2px 5px rgba(28, 50, 82, .035);
    position: relative;
    z-index: 900;
}

/* Route-owned header state prevents the full search from flashing during async navigation. */
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .search-bar {
    display: none;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .page-search-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .header-inner {
    justify-content: flex-start;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .user-nav {
    margin-left: 4px;
}
body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .page-search-jump:hover {
    background: #edf5ff;
    border-color: #b7cdea;
}

@media (max-width: 768px) {
    body:not(:has(.admin-shell))[data-header-search="compact"] .app-header .page-search-jump {
        width: 100%;
        min-width: 0;
        height: 42px;
        justify-self: stretch;
        border-color: transparent;
        background:
            linear-gradient(#f8fbff, #f8fbff) padding-box,
            linear-gradient(102deg, #84aef7, #8ebcf0 42%, #c6a6ee 70%, #ef9b93) border-box;
    }
}
body:not(:has(.admin-shell)) .store-mega-menu > .container {
    position: relative;
    width: calc(100% - 48px);
}
#store-menu [hidden] {
    display: none !important;
}
#store-menu :is(button, a, input):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
#store-menu .b2b-menu-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    font-size: 13px;
}

body:not(:has(.admin-shell)) .b2b-nav-skeleton {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
}
body:not(:has(.admin-shell)) .b2b-skeleton-item {
    width: 80px;
    height: 20px;
    background: #f0f0f0;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
}

body:not(:has(.admin-shell)) .b2b-top-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 0 6px;
}

body:not(:has(.admin-shell)) .b2b-top-nav-immediate {
    opacity: .92;
}

body:not(:has(.admin-shell)) .b2b-nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    padding: 0.6rem 1.1rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #28384d;
    background: transparent;
    border: 0;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 0;
    text-decoration: none;
}

body:not(:has(.admin-shell)) .b2b-nav-icon {
    flex: 0 0 auto;
    color: #31516f;
}

body:not(:has(.admin-shell)) .b2b-nav-all {
    margin: 5px 4px 5px 0;
    min-height: 34px;
    padding-block: 0;
    color: #1670d5;
    background: #edf6ff;
}

/* A brand is both a destination and a panel: the label navigates, the caret opens the models. */
body:not(:has(.admin-shell)) .b2b-nav-item.has-dropdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

body:not(:has(.admin-shell)) .b2b-nav-link.is-linked {
    padding-right: 4px;
}

body:not(:has(.admin-shell)) .b2b-nav-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 28px;
    padding: 0;
    font: inherit;
    color: #5f7188;
    background: transparent;
    border: 0;
    border-bottom: 0;
    cursor: pointer;
}

body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-link,
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-caret,
body:not(:has(.admin-shell)) .b2b-nav-item.has-dropdown:hover > .b2b-nav-link,
body:not(:has(.admin-shell)) .b2b-nav-item.has-dropdown:hover > .b2b-nav-caret,
body:not(:has(.admin-shell)) .b2b-nav-link:hover {
    color: var(--primary);
    background: #eef6ff;
    text-decoration: none;
}

body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-link,
body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-caret {
    color: #075ead;
    background: #eaf3ff;
    border-bottom-color: #075ead;
    box-shadow: inset 0 3px 0 #075ead;
}

/* Mega Dropdown */
@media (min-width: 769px) {
    body:not(:has(.admin-shell)):has(.b2b-nav-item.is-open) .app-header {
        position: relative;
    }
}

body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 55, 96, 0.2);
    border-bottom: 1px solid var(--border-light);
    z-index: 1000;
    height: auto;
    min-height: 0;
    border: 2px solid #2b7dcc;
    border-top-width: 3px;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
}

body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-dropdown-overlay {
    display: flex;
}

body:not(:has(.admin-shell)) .b2b-mega-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    height: auto;
}

body:not(:has(.admin-shell)) .b2b-mega-families {
    width: 100%;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    background: #f8fafc;
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 10px 20px;
    scrollbar-width: none;
    scroll-behavior: auto;
    touch-action: pan-y;
}
body:not(:has(.admin-shell)) .b2b-family-slider-arrow {
    display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #d4dfec;border-radius:50%;
    background:#fff;color:#1e5f9e;cursor:pointer;box-shadow:0 2px 8px rgba(26,75,126,.08);
}

/* A family row is a destination (the label) plus a preview control (the caret). */
body:not(:has(.admin-shell)) .b2b-family-row {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

body:not(:has(.admin-shell)) .b2b-family-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.5rem 0.25rem 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1d1d1f;
    text-decoration: none;
}

body:not(:has(.admin-shell)) .b2b-family-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #dce3ed;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #34465e;
    white-space: nowrap;
    cursor: pointer;
}

body:not(:has(.admin-shell)) .b2b-family-row:hover,
body:not(:has(.admin-shell)) .b2b-family-row:focus-within {
    background: transparent;
}

body:not(:has(.admin-shell)) .b2b-family-row.active {
    background: transparent;
    box-shadow: none;
}

body:not(:has(.admin-shell)) .b2b-family-row.active .b2b-family-link,
body:not(:has(.admin-shell)) .b2b-family-row.active .b2b-family-btn,
body:not(:has(.admin-shell)) .b2b-family-link:hover {
    font-weight: 600;
    color: var(--primary);
    border-color: #9fc3f3;
    background: #edf5ff;
    text-decoration: none;
}

body:not(:has(.admin-shell)) .b2b-mega-models {
    flex: 0 0 auto;
    min-width: 0;
    padding: 10px 20px 18px;
    overflow: visible;
    background: #fff;
}

body:not(:has(.admin-shell)) .b2b-mega-heading {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
}
body:not(:has(.admin-shell)) :is(.b2b-menu-close, .b2b-menu-back, .b2b-menu-retry) {
    flex: 0 0 auto;
    align-self: flex-start;
    border: 1px solid #dbe2eb;
    border-radius: 4px;
    background: #fff;
    color: #48617e;
    padding: 7px 11px;
    min-height: 32px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-menu-back {
    display: none;
}
body:not(:has(.admin-shell)) .b2b-model-search-wrap {
    display: block;
    position: relative;
    width: 100%;
    max-width: 420px;
}
body:not(:has(.admin-shell)) .b2b-model-search-wrap > span {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
body:not(:has(.admin-shell)) .b2b-model-status {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 12px;
}
body:not(:has(.admin-shell)) .b2b-family-all {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    min-height: 36px;
    padding: 8px 0 0;
    margin-top: 10px;
    color: var(--primary);
    border-top: 1px solid #edf0f5;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-family-all:hover {
    text-decoration: underline;
}
body:not(:has(.admin-shell)) .b2b-family-all small {
    font-weight: 500;
    color: #64748b;
}
body:not(:has(.admin-shell)) .b2b-mega-brands {
    padding: 0 0 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #dfe5ee;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body:not(:has(.admin-shell)) .b2b-brand-families.active {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    width: max-content;
    min-width: 100%;
}
body:not(:has(.admin-shell)) .b2b-brand-btn {
    padding: 7px 9px;
    min-height: 34px;
    font: inherit;
    font-size: 12px;
    background: #fff;
    color: #344b66;
    border: 1px solid #d9e1ed;
    border-radius: 4px;
    cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-brand-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: #edf5ff;
}
body:not(:has(.admin-shell)) .b2b-model-search {
    width: 100%;
    max-width: 360px;
    height: 44px;
    padding: 8px 11px;
    margin: 0;
    font: inherit;
    font-size: 13px;
    background: #fff;
    border: 2px solid #70a8e4;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(26, 91, 163, .08);
}

body:not(:has(.admin-shell)) .b2b-mega-view-all {
    font-size: 0.8125rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
body:not(:has(.admin-shell)) .b2b-mega-view-all:hover {
    text-decoration: underline;
}

body:not(:has(.admin-shell)) .b2b-models-grid {
    display: none;
}

body:not(:has(.admin-shell)) .b2b-models-grid.active {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body:not(:has(.admin-shell)) .b2b-model-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 2px 16px;
    align-content: start;
}

body:not(:has(.admin-shell)) .b2b-model-series {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
    gap: 10px;
}

body:not(:has(.admin-shell)) .b2b-model-series-group {
    min-width: 0;
    padding: 0;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fbfcfe;
}
body:not(:has(.admin-shell)) .b2b-series-more {
    display: inline-block;
    margin: 5px 3px 1px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-series-more:hover,
body:not(:has(.admin-shell)) .b2b-series-more:focus-visible {
    text-decoration: underline;
}

body:not(:has(.admin-shell)) .b2b-model-series-group h4 {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0 0 5px;
    padding: 0 2px 8px;
    border-bottom: 1px solid #e5eaf1;
    color: #26384d;
    font-size: 0.8125rem;
    font-weight: 700;
}

body:not(:has(.admin-shell)) .b2b-model-series-group .b2b-model-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
}

body:not(:has(.admin-shell)) .b2b-model-series-group .b2b-model-link {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 4px 3px;
}

body:not(:has(.admin-shell)) .b2b-model-series-group h4 small {
    color: #7b8798;
    font-size: 0.6875rem;
    font-weight: 500;
}

body:not(:has(.admin-shell)) .b2b-model-link {
    font-size: 0.8125rem;
    color: #1d1d1f;
    text-decoration: none;
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 8px;
    line-height: 1.4;
    border-radius: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
}

body:not(:has(.admin-shell)) .b2b-model-expand {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 7px 11px;
    margin-top: 12px;
    border: 1px solid #cfe0f4;
    border-radius: 6px;
    background: #f4f8fd;
    color: #1768bd;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
body:not(:has(.admin-shell)) .b2b-model-expand:hover {
    border-color: #9fc2e8;
    background: #eaf3fd;
}

body:not(:has(.admin-shell)) .b2b-model-link:hover {
    color: var(--primary);
    background: #f0f6ff;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-model-link[aria-current="page"] {
    background: #e9f2ff;
    color: var(--primary);
    font-weight: 600;
}

body:not(:has(.admin-shell)) .b2b-mega-accessories {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 8px 24px;
    padding: 24px;
    width: 100%;
    overflow: auto;
}

body:not(:has(.admin-shell)) .b2b-acc-group {
    min-width: 220px;
}
body:not(:has(.admin-shell)) .b2b-acc-group h4 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--apple-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.25rem;
}
body:not(:has(.admin-shell)) .b2b-acc-link {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1d1d1f;
    padding: 0.25rem 0;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .b2b-acc-link:hover {
    color: var(--primary);
}


/* Mobile menu handling */
body:not(:has(.admin-shell)) .b2b-mobile-toggle {
    display: none;
}
body:not(:has(.admin-shell)) .mobile-chevron {
    display: block;
    width: 12px;
    opacity: 0.55;
}
@media (max-width: 960px) {
    body:not(:has(.admin-shell)) .app-header .header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        height: auto;
        gap: 10px;
        padding-block: 12px;
    }
    body:not(:has(.admin-shell)) .app-header .logo {
        grid-column: 1;
        grid-row: 1;
    }
    body:not(:has(.admin-shell)) .app-header .logo img {
        height: 30px;
    }
    body:not(:has(.admin-shell)) .app-header .user-nav {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }
    body:not(:has(.admin-shell)) .app-header .search-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .b2b-mobile-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #1d1d1f;
        cursor: pointer;
        width: 100%;
        text-align: left;
    }
    body:not(:has(.admin-shell)) .mobile-chevron {
        display: block;
        transition: transform 0.2s;
    }
    body:not(:has(.admin-shell)) .b2b-top-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        max-height: none;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
        background: #fff;
        box-shadow: 0 12px 24px #14233b26;
        border-top: 1px solid var(--border-light);
    }
    body:not(:has(.admin-shell)) .store-mega-menu > .container {
        width: calc(100% - 24px);
    }
    body:not(:has(.admin-shell)) .b2b-top-nav.mobile-open {
        display: flex;
    }
    body:not(:has(.admin-shell)) .b2b-nav-item {
        border-bottom: 1px solid var(--border-light);
    }
    body:not(:has(.admin-shell)) .b2b-nav-link {
        width: 100%;
        padding: 0.8rem 1rem;
        justify-content: flex-start;
    }
    body:not(:has(.admin-shell)) .b2b-nav-link .mobile-chevron {
        margin-left: auto;
    }
    body:not(:has(.admin-shell)) .b2b-dropdown-overlay {
        position: static;
        display: none;
        height: auto;
        box-shadow: none;
        border-top: 1px solid var(--border-light);
        border-bottom: none;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-dropdown-overlay {
        display: flex;
        flex-direction: column;
    }
    body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-link .mobile-chevron {
        transform: rotate(180deg);
    }
    body:not(:has(.admin-shell)) .b2b-mega-layout {
        flex-direction: column;
        height: auto;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    body:not(:has(.admin-shell)) .b2b-mega-families {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        height: auto;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 10px;
    }
    body:not(:has(.admin-shell)) .b2b-family-row {
        flex: 1 1 140px;
        border: 1px solid #dce3eb;
        border-radius: 4px;
        background: #fff;
    }
    body:not(:has(.admin-shell)) .b2b-family-row.active {
        border-color: var(--primary);
        background: #edf5ff;
        box-shadow: none;
    }
    body:not(:has(.admin-shell)) .b2b-family-link {
        min-height: 38px;
        padding: 8px 6px 8px 10px;
    }
    body:not(:has(.admin-shell)) .b2b-family-btn {
        flex: 1 1 auto;
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        border: 0;
        border-radius: 4px;
    }
    body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-dropdown-overlay {
        flex: 1 0 100%;
    }
    body:not(:has(.admin-shell)) .b2b-nav-link.is-linked {
        width: auto;
        flex: 1 1 auto;
    }
    body:not(:has(.admin-shell)) .b2b-nav-caret {
        width: 48px;
        min-height: 46px;
    }
    body:not(:has(.admin-shell)) .b2b-nav-item.is-open > .b2b-nav-caret .mobile-chevron {
        transform: rotate(180deg);
    }
    body:not(:has(.admin-shell)) .b2b-mega-models {
        height: auto;
        max-height: none;
        padding: 1rem;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    body:not(:has(.admin-shell)) .b2b-mega-heading {
        position: static;
    }
    body:not(:has(.admin-shell)) .b2b-model-search-wrap,
    body:not(:has(.admin-shell)) .b2b-model-search {
        max-width: none;
    }
    body:not(:has(.admin-shell)) .b2b-model-series {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    body:not(:has(.admin-shell)) .b2b-models-grid,
    body:not(:has(.admin-shell)) .b2b-model-series,
    body:not(:has(.admin-shell)) .b2b-model-series-group {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    body:not(:has(.admin-shell)) .b2b-model-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }
    body:not(:has(.admin-shell)) .b2b-model-link {
        min-height: 40px;
    }
    body:not(:has(.admin-shell)) .b2b-brand-families.active {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    body:not(:has(.admin-shell)) .b2b-mega-heading small {
        display: block;
        margin: 4px 0 0;
    }
    body:not(:has(.admin-shell)) .b2b-menu-back {
        display: block;
        margin-top: 14px;
    }
}

/* One deliberate mobile header hierarchy, overriding older responsive layers. */
@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .app-header .header-inner,
    body:not(:has(.admin-shell)):has(.lp) .app-header .header-inner,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 46px auto;
        align-items: center;
        gap: 10px 12px;
        min-height: 0;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    body:not(:has(.admin-shell)) .app-header .logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        justify-self: start;
    }

    body:not(:has(.admin-shell)) .app-header .logo img {
        width: auto;
        height: 42px;
        max-width: min(100%, 190px);
    }

    body:not(:has(.admin-shell)) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px !important;
    }

    body:not(:has(.admin-shell)) .app-header .page-search-jump,
    body:not(:has(.admin-shell)) .app-header .search-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin: 0 !important;
    }

    body:not(:has(.admin-shell)):has(.lp) .app-header .page-search-jump,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .page-search-jump {
        width: 100%;
        min-width: 0;
        height: 42px;
        justify-self: stretch;
        border-color: transparent;
        background:
            linear-gradient(#f8fbff, #f8fbff) padding-box,
            linear-gradient(105deg, #8bc5f0, #aca1eb 35%, #e4adcf 62%, #8bd3d3) border-box;
        box-shadow: 0 3px 12px rgba(39, 83, 137, .07);
    }
}

@media (max-width: 480px) {
    body:not(:has(.admin-shell)) .app-header .header-inner,
    body:not(:has(.admin-shell)):has(.lp) .app-header .header-inner,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .header-inner {
        grid-template-columns: minmax(112px, 1fr) auto;
        grid-template-rows: 40px auto;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    body:not(:has(.admin-shell)) .app-header .logo {
        grid-column: 1;
        grid-row: 1;
    }

    body:not(:has(.admin-shell)) .app-header .logo img {
        height: 40px;
        max-width: min(100%, 170px);
    }

    body:not(:has(.admin-shell)) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        justify-content: flex-end;
        overflow: visible;
    }

    body:not(:has(.admin-shell)) .app-header .nav-signin {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
    }

    body:not(:has(.admin-shell)) .app-header .nav-signin span {
        display: none;
    }

    body:not(:has(.admin-shell)) .app-header .user-nav .nav-register {
        min-width: 0;
        max-width: 142px;
        min-height: 40px;
        padding: 0 10px;
        overflow: hidden;
        font-size: 12px;
        font-weight: 650;
        color: #1769aa;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid #bdd1e5;
        border-radius: 8px;
        background: #f7fbff;
        box-shadow: none;
    }

    body:not(:has(.admin-shell)) .app-header .user-nav .nav-register:hover,
    body:not(:has(.admin-shell)) .app-header .user-nav .nav-register:focus-visible {
        color: #0f568f;
        border-color: #82add3;
        background: #edf6fd;
        box-shadow: none;
    }

    body:not(:has(.admin-shell)) .app-header .user-nav .nav-link {
        min-width: 40px;
        min-height: 40px;
    }

    body:not(:has(.admin-shell)) .app-header .page-search-jump,
    body:not(:has(.admin-shell)) .app-header .search-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Reflow for a 320px mobile viewport at 200% browser zoom. */
@media (max-width: 240px) {
    body:not(:has(.admin-shell)) .app-header .header-inner,
    body:not(:has(.admin-shell)):has(.lp) .app-header .header-inner,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .header-inner {
        grid-template-rows: 40px auto auto;
    }

    body:not(:has(.admin-shell)) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        justify-content: flex-start;
    }

    body:not(:has(.admin-shell)) .app-header .page-search-jump,
    body:not(:has(.admin-shell)) .app-header .search-bar {
        grid-column: 1;
        grid-row: 3;
    }

    body:not(:has(.admin-shell)) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.lp) .app-header .user-nav,
    body:not(:has(.admin-shell)):has(.catalog-smart-search) .app-header .user-nav {
        flex-wrap: wrap;
        overflow: visible;
    }

    body:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
        width: 100%;
        max-width: none;
        height: auto;
        padding-block: 9px;
        white-space: normal;
        text-align: center;
        text-overflow: clip;
    }

    body:not(:has(.admin-shell)) .app-header .search-input-wrapper {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        min-height: 0;
        padding: 8px;
    }

}

/* Pinch/page scaling keeps the layout viewport wide; mirror the visual viewport. */
body[data-header-zoomed]:not(:has(.admin-shell)) .test-banner,
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header {
    width: var(--header-visual-width);
    max-width: var(--header-visual-width);
    box-sizing: border-box;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .header-inner {
    width: var(--header-visual-width);
    margin-left: 0;
    margin-right: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40px auto auto;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .logo {
    grid-column: 1;
    grid-row: 1;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .logo img {
    height: 40px;
    max-width: min(100%, 170px);
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .user-nav {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px !important;
    overflow: visible;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .nav-signin {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .nav-signin span {
    display: none;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .user-nav .btn-primary {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 40px;
    padding: 9px 8px;
    white-space: normal;
    text-align: center;
    text-overflow: clip;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .page-search-jump,
body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .search-bar {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

body[data-header-zoomed]:not(:has(.admin-shell)) .app-header .search-input-wrapper {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 0;
    padding: 8px;
}


body[data-header-zoomed]:not(:has(.admin-shell)) .store-mega-menu > .container {
    width: calc(100% - 24px);
}


/* 2. Compact Catalog Discovery Area */
body:not(:has(.admin-shell)):has(.catalog-layout) .catalog-breadcrumb {
    display: none;
}
body:not(:has(.admin-shell)):has(.catalog-layout) .catalog-heading {
    display: none;
}
body:not(:has(.admin-shell)):has(.catalog-layout) .catalog-eyebrow {
    display: none;
}
body:not(:has(.admin-shell)) .catalog-table-model {
    color: var(--apple-text);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}
body:not(:has(.admin-shell)) .catalog-table-count {
    margin-left: 8px;
    color: var(--apple-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Quick Categories (Pills) */

/* Category Models Selector (Make it very tight) */

/* Filter Bar (.catalog-refine-row) */
body:not(:has(.admin-shell)) .catalog-refine-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    box-shadow: none;
}
body:not(:has(.admin-shell)) .catalog-tool-field {
    font-size: 0.75rem;
    color: var(--apple-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}
body:not(:has(.admin-shell)) .catalog-tool-field select {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 0.1rem 1.25rem 0.1rem 0.4rem;
    font-size: 0.8125rem;
    min-height: 32px;
    color: #1d1d1f;
}
body:not(:has(.admin-shell)) .stock-shortcut,
body:not(:has(.admin-shell)) #open-catalog-filters {
    min-height: 32px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--border-light);
    color: #1d1d1f;
    cursor: pointer;
    font-weight: 500;
}
body:not(:has(.admin-shell)) .stock-shortcut.active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
}
body:not(:has(.admin-shell)) #open-catalog-filters:hover,
body:not(:has(.admin-shell)) .stock-shortcut:hover:not(.active) {
    background: #e8e8ed;
}

/* Active Filters */
body:not(:has(.admin-shell)) .active-filters {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
body:not(:has(.admin-shell)) .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #eef5ff;
    border: 1px solid #cce0ff;
    color: var(--primary);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .filter-chip span {
    color: #8bb4e8;
    font-weight: bold;
}
body:not(:has(.admin-shell)) .filter-chip:hover {
    background: #dbeaff;
    text-decoration: none;
}
body:not(:has(.admin-shell)) .clear-filters {
    font-size: 0.75rem;
    color: var(--apple-muted);
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.4rem;
}

body:not(:has(.admin-shell)) .catalog-sort {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
body:not(:has(.admin-shell)) .catalog-sort select {
    padding: 0.15rem 1.25rem 0.15rem 0.4rem;
    font-size: 0.8125rem;
    min-height: 32px;
    width: auto;
    max-width: 100%;
    color: #25364d;
    background: #fff;
    line-height: normal;
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

body:not(:has(.admin-shell)) .catalog-price-notice {
    background: #f1f6fd;
    color: #3a5476;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #dce7f5;
}
body:not(:has(.admin-shell)) .catalog-price-notice a {
    font-weight: 600;
    color: var(--primary);
}

/* Part type picker */
body:not(:has(.admin-shell)) .part-type-picker {
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0.75rem;
}
body:not(:has(.admin-shell)) .part-type-intro {
    display: none;
}
body:not(:has(.admin-shell)) .part-type-options {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
body:not(:has(.admin-shell)) .part-type-option {
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
body:not(:has(.admin-shell)) .part-type-option b {
    background: rgba(0,0,0,0.05);
    padding: 0 4px;
    border-radius: 2px;
    font-weight: normal;
}
body:not(:has(.admin-shell)) .part-type-option.active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
}
body:not(:has(.admin-shell)) .part-type-option.active b {
    background: rgba(255,255,255,0.2);
}

/* Desktop layout constraints */
@media (min-width: 1024px) {
    body:not(:has(.admin-shell)) .catalog-layout {
        --catalog-header-surface: #f5f5f7;
        --catalog-shell-border: var(--border-light);
        --catalog-shell-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);
        display: grid !important;
        grid-template-columns: 256px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
        margin-top: 12px !important;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar {
        width: 256px;
        min-width: 256px;
        position: sticky;
        top: 126px;
        max-height: calc(100dvh - 142px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px;
        gap: 0;
        background: #fff;
        border: 1px solid var(--catalog-shell-border);
        border-radius: 10px;
        box-shadow: var(--catalog-shell-shadow);
        scrollbar-width: thin;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar-heading {
        display: flex;
        height: 56px;
        min-height: 56px;
        flex: 0 0 56px;
        margin: -14px -14px 10px;
        padding: 0 14px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        background: var(--catalog-header-surface);
        border-bottom: 1px solid var(--catalog-shell-border);
        border-radius: 9px 9px 0 0;
        box-sizing: border-box;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar-heading span,
    body:not(:has(.admin-shell)) .catalog-desktop-filters > h3,
    body:not(:has(.admin-shell)) .catalog-sidebar-active > span {
        display: block;
        margin: 0;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar-heading h2 {
        margin: 0;
        color: #0f172a;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.015em;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-categories {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0 0 24px;
        padding: 0 0 24px;
        border-bottom: 1px solid #e2e8f0;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 38px;
        padding: 4px 10px 4px 8px;
        gap: 10px;
        border: 1px solid transparent;
        border-radius: 6px;
        box-shadow: none;
        font-size: 13px;
        font-weight: 500;
        color: #475569;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category:hover {
        transform: none;
        background: #f1f5f9;
        box-shadow: none;
        border-color: transparent;
        color: #0f172a;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active {
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 600;
        border-color: transparent;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 18px;
        background: #2563eb;
        border-radius: 0 4px 4px 0;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category-thumb {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        transition: border-color 0.15s ease;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active .quick-category-thumb {
        border-color: #bfdbfe;
        box-shadow: 0 1px 2px rgba(29, 78, 216, 0.05);
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category-thumb img {
        max-width: 18px;
        max-height: 18px;
        object-fit: contain;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category-thumb.is-glyph svg {
        width: 16px;
        height: 16px;
        color: #64748b;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category.active .quick-category-thumb.is-glyph svg {
        color: #1d4ed8;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category span {
        text-align: left;
        -webkit-line-clamp: 2;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .quick-category small {
        display: none;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .category-models {
        display: none;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-picker {
        margin: 0 0 24px;
        padding: 0 0 24px;
        border: 0;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 0;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-intro {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0 0 16px;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-intro span {
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-options {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 34px;
        padding: 4px 0px 6px 4px;
        border-bottom: 1px solid #e8edf3;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        color: #475569;
        font-size: 13px;
        font-weight: 500;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option:hover {
        background: #f1f5f9;
        color: #0f172a;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option.active {
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 600;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option span {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option b {
        background: transparent;
        padding: 5px;
        border-radius: p99x;
        font-weight: 600;
        font-size: 12px;
   color: #4989ef;
  border: 1px solid #f7f9fc;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option.active b {
 
        color: #1d4ed8;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option small {
        display: none;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .part-type-option strong {
        font-weight: inherit;
    }
    body:not(:has(.admin-shell)) .catalog-desktop-filters {
        padding-top: 2px;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .discovery-filters,
    body:not(:has(.admin-shell)) .catalog-sidebar .device-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .field,
    body:not(:has(.admin-shell)) .catalog-sidebar .field select {
        width: 100%;
        min-width: 0;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .advanced-filters {
        margin: 0;
        border-top: 1px solid #e8edf4;
        padding-top: 12px;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar .filter-auto-hint {
        margin: 0;
        color: #78879a;
        font-size: 11px;
        line-height: 1.4;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar-active {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid #e8edf4;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar-active .active-filters {
        margin: 0;
    }
    body:not(:has(.admin-shell)) .catalog-main {
        min-width: 0;
    }
    body:not(:has(.admin-shell)) .catalog-main .catalog-refine-row,
    body:not(:has(.admin-shell)) .catalog-main > .active-filters {
        display: none;
    }
    body:not(:has(.admin-shell)) .catalog-price-notice {
        margin-bottom: 10px;
    }
}
@media (max-width: 1023px) {
    body:not(:has(.admin-shell)) .catalog-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar {
        display: block;
    }
    body:not(:has(.admin-shell)) .catalog-sidebar-heading,
    body:not(:has(.admin-shell)) .catalog-desktop-filters,
    body:not(:has(.admin-shell)) .catalog-sidebar-active {
        display: none;
    }
}
@media (max-width: 768px) {
    body:not(:has(.admin-shell)) .catalog-heading {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    body:not(:has(.admin-shell)) .catalog-heading h1 {
        font-size: 20px;
        line-height: 1.3;
    }
    body:not(:has(.admin-shell)) .catalog-refine-row {
        gap: 8px;
        padding: 10px;
        align-items: center;
    }
    body:not(:has(.admin-shell)) .catalog-tool-field {
        flex-wrap: wrap;
        min-width: 0;
        flex: 1 1 110px;
    }
    body:not(:has(.admin-shell)) .catalog-tool-field select {
        max-width: 100%;
        width: 100%;
    }
    body:not(:has(.admin-shell)) :is(.quick-category, .device-family-choice, .category-model-choice, .part-type-option) {
        min-height: 38px;
    }
    body:not(:has(.admin-shell)) :is(.catalog-tool-field select, .stock-shortcut, #open-catalog-filters, #catalog-sort) {
        min-height: 38px;
    }
    body:not(:has(.admin-shell)) .catalog-sort {
        min-width: 0;
    }
    body:not(:has(.admin-shell)) .catalog-sort select {
        min-width: 0;
        flex: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    #store-menu *, #store-menu *::before, #store-menu *::after {
        animation: none;
        transition: none;
        scroll-behavior: auto;
    }
}

/* Category rail redesigned as image-led category tiles */

body:not(:has(.admin-shell)) .quick-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    overflow: visible;
    padding: 2px 2px 4px;
    margin-bottom: 24px;
}

body:not(:has(.admin-shell)) .quick-category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 104px;
    min-height: 104px;
    padding: 12px 8px;
    gap: 8px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
    color: #1d1d1f;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 27, 46, 0.02);
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

body:not(:has(.admin-shell)) .quick-category span {
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
}

body:not(:has(.admin-shell)) .quick-category small {
    display: none;
}

body:not(:has(.admin-shell)) .quick-category-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}

body:not(:has(.admin-shell)) .quick-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

body:not(:has(.admin-shell)) .quick-category-thumb.is-glyph svg {
    width: 24px;
    height: 24px;
    color: #6a7c92;
    transition: transform 0.2s ease, color 0.2s ease;
}

body:not(:has(.admin-shell)) .quick-category:hover {
    transform: translateY(-2px);
    border-color: #c9d6ea;
    box-shadow: 0 6px 12px rgba(21, 42, 82, 0.05);
}
body:not(:has(.admin-shell)) .quick-category:hover .quick-category-thumb img {
    transform: scale(1.08);
}
body:not(:has(.admin-shell)) .quick-category:hover .quick-category-thumb.is-glyph svg {
    transform: scale(1.08);
    color: var(--primary);
}

body:not(:has(.admin-shell)) .quick-category:focus-visible {
    outline: 2px solid #2f6fe4;
    outline-offset: 2px;
}

body:not(:has(.admin-shell)) .quick-category.active,
body:not(:has(.admin-shell)) .quick-category[aria-current="page"] {
    background: #f4f8fe;
    border-color: #a3c2ea;
    box-shadow: inset 0 0 0 1px #e3edfa;
    color: var(--primary);
}

body:not(:has(.admin-shell)) .quick-category.active .quick-category-thumb.is-glyph svg {
    color: var(--primary);
}

@media (max-width: 640px) {
    body:not(:has(.admin-shell)) .quick-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 6px;
        margin-bottom: 14px;
    }
    body:not(:has(.admin-shell)) .quick-categories::-webkit-scrollbar { display: none; }
    body:not(:has(.admin-shell)) .quick-category {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}


/* Cart and checkout share a compact, light working surface. */

.order-flow {
    --line-cols: 64px minmax(0, 1fr) 112px 124px 116px 36px;
    max-width: 1360px;
    margin: 0 auto;
}

.order-flow-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1rem;
}
.order-flow-intro {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.order-flow-head h1 {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.125rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.order-flow-sub {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.order-flow-sub strong {
    color: var(--text-main);
    font-weight: 600;
}

.order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.125rem;
    align-items: start;
}

.order-progress {
    margin: 0 0 1.15rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-light);
}
.order-progress ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 620px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.order-progress li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.order-progress li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% + 54px);
    width: calc(100% - 108px);
    height: 1px;
    background: var(--border);
}
.order-progress li span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2f7;
    color: #64748b;
    font-weight: 700;
}
.order-progress li strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.order-progress li.active {
    color: var(--text-main);
}
.order-progress li.active span {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

/* ---------- Line items ---------- */

.line-items {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.line-items-head {
    display: grid;
    grid-template-columns: var(--line-cols);
    gap: 1rem;
    align-items: center;
    padding: 0.72rem 1rem;
    background: #fbfcfe;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.line-items-head .num {
    text-align: right;
}

.line-item {
    display: grid;
    grid-template-columns: var(--line-cols);
    gap: 1rem;
    align-items: center;
    padding: 0.78rem 1rem;
    border-top: 1px solid var(--border-light);
}
.line-item:first-child {
    border-top: 0;
}
.line-item:hover {
    background: #fcfdff;
}

.line-item-thumb {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-surface);
    overflow: hidden;
}
.line-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.line-item-thumb .img-placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.line-item-body {
    min-width: 0;
}
.line-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text-main);
    text-decoration: none;
}
.line-item-name:hover {
    color: var(--primary);
}
.line-item-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.line-item-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
}
.line-item-min {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
}
.line-item-stock {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #15803d;
}
.line-item-stock::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}
.line-item-stock.low {
    color: var(--warning);
}

.line-item-unit,
.line-item-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.line-item-unit {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: right;
}
.line-item-total {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: right;
}

.line-item-alert {
    grid-column: 2 / -1;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danger);
}

/* Quantity stepper */
.stepper {
    display: inline-flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-surface);
    overflow: hidden;
}
.stepper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.stepper-btn {
    width: 34px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.stepper-btn:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}
.stepper-btn:focus-visible,
.line-item-remove:focus-visible,
.order-link:focus-visible,
.summary-cta:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}
.stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.stepper-input {
    width: 40px;
    height: 36px;
    border: 0;
    border-inline: 1px solid var(--border-light);
    padding: 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
}
.stepper-input:focus {
    outline: none;
}
.stepper-input:focus-visible {
    background: var(--primary-light);
    color: var(--primary);
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.line-item-remove {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.line-item-remove:hover {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.order-main-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}
.order-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.order-link:hover {
    border-color: var(--text-main);
}
.order-link.danger,
body:not(:has(.admin-shell)) a.order-link.danger {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}
.order-link.danger:hover,
body:not(:has(.admin-shell)) a.order-link.danger:hover {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

/* ---------- Summary rail ---------- */

.order-rail {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 0.75rem;
}

.summary-panel {
    position: relative;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-main);
    background: var(--bg-surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.summary-panel > * {
    position: relative;
    z-index: 1;
}

/* The storefront layer paints every heading and link with a body-level
   :has() rule, which outranks a single class. The dark panel and the ink-dark
   product links therefore repeat that prefix instead of fighting it. */
body:not(:has(.admin-shell)) .summary-panel .summary-title {
    margin: 0 0 1.15rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
body:not(:has(.admin-shell)) a.summary-cta {
    color: #fff;
}
body:not(:has(.admin-shell)) a.summary-cta:hover {
    color: #fff;
}
body:not(:has(.admin-shell)) a.line-item-name {
    color: var(--text-main);
}
body:not(:has(.admin-shell)) a.line-item-name:hover {
    color: var(--primary);
}
body:not(:has(.admin-shell)) a.order-link {
    color: var(--text-main);
}
body:not(:has(.admin-shell)) a.order-link:hover {
    color: var(--text-main);
}

.summary-items {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-light);
    max-height: 232px;
    overflow-y: auto;
}
.summary-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.summary-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-muted);
}
.summary-item-qty {
    display: inline-block;
    min-width: 1.6em;
    margin-right: 0.3rem;
    font-weight: 700;
    color: var(--text-main);
}
.summary-item-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
}

.summary-lines {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}
.summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}
.summary-line dt {
    color: var(--text-muted);
}
.summary-line dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
}
.summary-line dd.is-free {
    color: #6ee7a8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}
.summary-line.discount dd {
    color: #15803d;
}


.summary-rule {
    height: 1px;
    margin: 1.1rem 0;
    background: var(--border-light);
}

.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.summary-total span {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
}
.summary-total strong {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
}

.summary-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    height: 50px;
    margin-top: 1.15rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #3b86ff 0%, #1f6bf0 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(31, 107, 240, 0.24);
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.summary-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(31, 107, 240, 0.42);
}
.summary-cta:disabled {
    filter: grayscale(0.5);
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.summary-panel .currency-context-note {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-muted);
}
.summary-panel .currency-context-note.error {
    color: #fca5a5;
}
.summary-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: -0.35rem 0 1.1rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-body);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.summary-status.error {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.rail-notes {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0.9rem 0 0;
    list-style: none;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    background: transparent;
}
.rail-notes li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.rail-notes svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--primary);
}

/* ---------- Checkout steps ----------
   The storefront redesign styles these at showroom scale (3rem padding, 32px
   radius). Checkout is a working surface, so it is compacted here; the
   selectors mirror that file's prefix so the later load order wins. */

.checkout-steps {
    display: grid;
    gap: 1rem;
}

body:not(:has(.admin-shell)) .order-flow .checkout-step {
    padding: 1.35rem 1.5rem;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: none;
}
body:not(:has(.admin-shell)) .order-flow .step-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}
body:not(:has(.admin-shell)) .order-flow .step-number {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: none;
}
body:not(:has(.admin-shell)) .order-flow .step-header h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body:not(:has(.admin-shell)) .order-flow .address-card,
body:not(:has(.admin-shell)) .order-flow .payment-card {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    box-shadow: none;
}
body:not(:has(.admin-shell)) .order-flow .address-card.selected,
body:not(:has(.admin-shell)) .order-flow .payment-card.selected {
    box-shadow: 0 0 0 1px var(--primary) inset;
}
body:not(:has(.admin-shell)) .order-flow .address-card:focus-within,
body:not(:has(.admin-shell)) .order-flow .payment-card:focus-within {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}
body:not(:has(.admin-shell)) .order-flow .address-card.selected {
    border-color: var(--success);
    background: var(--success-bg);
    box-shadow: 0 0 0 1px var(--success) inset;
}
body:not(:has(.admin-shell)) .order-flow .address-card.selected .address-header,
body:not(:has(.admin-shell)) .order-flow .address-card.selected .check-icon {
    color: var(--success);
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.address-grid.address-grid-single {
    grid-template-columns: minmax(360px, 2fr) minmax(220px, .8fr);
    align-items: stretch;
}
.checkout-postal-address {
    margin: 0;
    color: var(--text-main);
    font-size: .875rem;
    font-style: normal;
    line-height: 1.55;
}
.checkout-address-company,
.checkout-address-person {
    font-weight: 650;
}
body:not(:has(.admin-shell)) .order-flow .address-card-new-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
@media (max-width: 760px) {
    .address-grid.address-grid-single { grid-template-columns: 1fr; }
    body:not(:has(.admin-shell)) .order-flow .address-card-new-inline {
        justify-content: flex-start;
    }
}
.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.step-optional {
    margin-left: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
body:not(:has(.admin-shell)) .order-flow .address-card-new {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--text-muted) 30%, var(--border));
    background: color-mix(in srgb, var(--bg-body) 72%, var(--bg-surface));
    color: var(--text-muted);
}
body:not(:has(.admin-shell)) .order-flow .address-card-new:hover,
body:not(:has(.admin-shell)) .order-flow .address-card-new:focus-within {
    border-color: var(--primary);
    color: var(--text-main);
}
.checkout-step .form-group {
    margin-bottom: 0.75rem;
}
.checkout-step .form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.payment-card.disabled {
    opacity: .6;
    cursor: not-allowed;
    background: var(--bg-body);
}

/* Buyer order history is deliberately card-based rather than an admin table. */
.buyer-order-list { display: grid; gap: .75rem; }
.buyer-order-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .order-grid {
        grid-template-columns: minmax(0, 1fr) 312px;
    }
    .order-flow {
        --line-cols: 56px minmax(0, 1fr) 92px 116px 100px 32px;
    }
}

@media (max-width: 900px) {
    .order-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .order-rail {
        position: static;
    }
    .summary-panel {
        padding: 1.35rem;
    }
}

@media (max-width: 640px) {
    .address-grid.address-grid-single {
        grid-template-columns: minmax(0, 1fr);
    }
    body:not(:has(.admin-shell)) .order-flow .address-card-compact {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .compact-address-line {
        white-space: normal;
    }
    body:not(:has(.admin-shell)) .order-flow .address-card-new-inline {
        min-width: 0;
    }
}
@media (max-width: 640px) {
    .buyer-order-states { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
    .order-progress {
        margin-bottom: 1rem;
        padding: 0.65rem 0;
    }
    .order-progress li {
        gap: 0.3rem;
        font-size: 0.6875rem;
    }
    .order-progress li:not(:last-child)::after {
        left: calc(50% + 32px);
        width: calc(100% - 64px);
    }
    .order-progress li strong {
        max-width: 88px;
        overflow: visible;
        line-height: 1.15;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
    }
    .order-flow-head {
        display: block;
    }
    .order-flow-sub {
        margin-top: 0.65rem;
    }
    .line-items-head {
        display: none;
    }
    .line-item {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb body remove"
            "qty qty total";
        gap: 0.5rem 0.75rem;
        padding: 1rem;
    }
    .line-item-thumb {
        grid-area: thumb;
        width: 56px;
        height: 56px;
    }
    .line-item-body {
        grid-area: body;
    }
    .line-item-remove {
        grid-area: remove;
        align-self: start;
    }
    .line-item-unit {
        display: none;
    }
    .line-item-qty {
        grid-area: qty;
        margin-top: 0.35rem;
    }
    .line-item-total {
        grid-area: total;
        align-self: center;
        margin-top: 0.35rem;
        font-size: 1rem;
    }
    .line-item-alert {
        grid-column: 1 / -1;
    }
    .order-main-foot {
        justify-content: space-between;
    }
}

/* ==========================================================================
   Clear interaction feedback
   Loaded after page-specific styles so hover, keyboard, and pressed states
   stay consistent across the storefront, workspace, and back office.
   ========================================================================== */

:root {
    --interaction-focus: #005fcc;
    --interaction-focus-halo: rgba(0, 113, 227, .26);
    --interaction-primary-shadow: 0 12px 22px rgba(0, 96, 204, .24);
    --interaction-surface-shadow: 0 10px 22px rgba(18, 58, 105, .12);
    --interaction-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Storefront controls ---------------------------------------------------- */

body:not(:has(.admin-shell)) :is(
    .btn,
    .hero-btn,
    .page-search-jump,
    .catalog-smart-field button,
    .summary-cta,
    .filter-chip,
    .page-link,
    .view-toggle button,
    .cat-nav-item,
    .part-img-link,
    .main-image-container,
    .gallery-thumb,
    .b2b-img-wrap,
    .b2b-add-btn,
    .b2b-qty-input,
    .modal-close
) {
    transition:
        transform .18s var(--interaction-ease),
        box-shadow .18s var(--interaction-ease),
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

body:not(:has(.admin-shell)) :is(
    .btn-primary,
    .hero-btn,
    .summary-cta,
    .catalog-smart-field button,
    .b2b-add-btn
) {
    box-shadow: 0 4px 9px rgba(0, 96, 204, .16);
}

@media (hover: hover) and (pointer: fine) {
    body:not(:has(.admin-shell)) :is(
        .btn-primary,
        .hero-btn,
        .summary-cta,
        .catalog-smart-field button,
        .b2b-add-btn
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        background-color: var(--primary-hover);
        color: #fff;
        box-shadow: var(--interaction-primary-shadow);
        transform: translateY(-2px);
        text-decoration: none;
    }

    body:not(:has(.admin-shell)) .catalog-smart-field button:hover:not(:disabled) {
        background-color: #075fc9;
    }

    body:not(:has(.admin-shell)) :is(
        .btn-outline,
        .page-search-jump,
        .filter-chip,
        .page-link,
        .view-toggle button,
        .cat-nav-item,
        .gallery-thumb
    ):hover:not(:disabled):not([aria-disabled="true"]) {
        border-color: color-mix(in srgb, var(--primary) 62%, var(--border));
        background-color: #eaf4ff;
        color: var(--primary-active);
        box-shadow: 0 5px 12px rgba(28, 100, 181, .12);
        transform: translateY(-1px);
        text-decoration: none;
    }

    body:not(:has(.admin-shell)) .app-header :is(.nav-link, .nav-icon-action, .nav-cart):hover {
        color: var(--primary);
        border-radius: 10px;
        box-shadow: 0 0 0 4px rgba(0, 113, 227, .10);
        text-decoration: none;
    }

    body:not(:has(.admin-shell)) :is(.b2b-nav-link, .b2b-nav-caret):hover,
    body:not(:has(.admin-shell)) .b2b-nav-item.is-open :is(.b2b-nav-link, .b2b-nav-caret) {
        background: #eaf4ff;
        color: var(--primary-active);
        box-shadow: inset 0 -2px 0 var(--primary);
    }

    body:not(:has(.admin-shell)) .search-input-wrapper:hover {
        border-color: #8db7e9;
        box-shadow: 0 3px 12px rgba(30, 100, 178, .10);
    }

    body:not(:has(.admin-shell)) .form-control:hover:not(:focus):not(:disabled) {
        border-color: #8db7e9;
        box-shadow: 0 2px 8px rgba(30, 100, 178, .08);
    }

    body:not(:has(.admin-shell)) .part-card:hover {
        border-color: #78aeea;
        box-shadow: 0 16px 30px rgba(27, 88, 157, .16);
        transform: translateY(-3px);
    }

    body:not(:has(.admin-shell)) .part-card:hover .part-name a {
        color: var(--primary-active);
    }

    body:not(:has(.admin-shell)) .part-img-link:hover img {
        transform: scale(1.075);
    }

    body:not(:has(.admin-shell)) .main-image-container:hover {
        border-color: #78aeea;
        box-shadow: var(--interaction-surface-shadow);
    }

    body:not(:has(.admin-shell)) .main-image-container:hover img {
        transform: scale(1.04);
    }

    body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row > td {
        transition: background-color .18s ease, box-shadow .18s ease;
    }

    body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:hover > td {
        background: #eff7ff;
    }

    body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:hover > td:first-child {
        box-shadow: inset 4px 0 0 var(--primary);
    }

    body:not(:has(.admin-shell)) .b2b-img-wrap:hover img {
        transform: scale(1.075);
    }

    body:not(:has(.admin-shell)) .b2b-qty-input:hover:not(:focus):not(:disabled) {
        border-color: #78aeea;
        box-shadow: 0 2px 8px rgba(30, 100, 178, .10);
    }

    body:not(:has(.admin-shell)) .main-content a:not(.btn):not(.summary-cta):hover {
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }
}

body:not(:has(.admin-shell)) :is(
    .btn,
    .hero-btn,
    .page-search-jump,
    .catalog-smart-field button,
    .summary-cta,
    .filter-chip,
    .page-link,
    .view-toggle button,
    .cat-nav-item,
    .part-img-link,
    .main-image-container,
    .gallery-thumb,
    .b2b-img-wrap,
    .b2b-add-btn
):active:not(:disabled):not([aria-disabled="true"]) {
    box-shadow: 0 2px 6px rgba(0, 82, 175, .18);
    transform: translateY(1px) scale(.985);
}

body:not(:has(.admin-shell)) :is(
    .btn-primary,
    .hero-btn,
    .summary-cta,
    .catalog-smart-field button,
    .b2b-add-btn
):active:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--primary-active);
}

body:not(:has(.admin-shell)) .part-card:focus-within {
    border-color: #5d9ce4;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .16), 0 10px 22px rgba(27, 88, 157, .12);
}

body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:has(:focus-visible) > td {
    background: #eff7ff;
}

body:not(:has(.admin-shell)) .b2b-table tbody > tr.b2b-row:has(:focus-visible) > td:first-child {
    box-shadow: inset 4px 0 0 var(--interaction-focus);
}

body:not(:has(.admin-shell)) :is(
    .btn,
    .hero-btn,
    .page-search-jump,
    .catalog-smart-field button,
    .summary-cta,
    .filter-chip,
    .page-link,
    .view-toggle button,
    .cat-nav-item,
    .part-img-link,
    .main-image-container,
    .gallery-thumb,
    .b2b-img-wrap,
    .b2b-add-btn,
    .b2b-qty-input,
    .b2b-prod-title a,
    .b2b-login-link,
    .modal-close,
    .form-control,
    .part-name a,
    .main-content a
):focus-visible {
    outline: 3px solid var(--interaction-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--interaction-focus-halo);
}

body:not(:has(.admin-shell)) :is(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
}

/* Account and customer workspace --------------------------------------- */

:is(
    .wsp-btn,
    .wsp-tab,
    .wsp-quick-row-remove,
    .wsp-field select,
    .wsp-field input,
    .wsp-input,
    .wsp-paste-area
) {
    transition:
        transform .18s var(--interaction-ease),
        box-shadow .18s var(--interaction-ease),
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .wsp-btn:hover:not(:disabled):not([aria-disabled="true"]) {
        border-color: #6a9de2;
        box-shadow: 0 7px 15px rgba(24, 83, 158, .15);
        transform: translateY(-1px);
    }

    .wsp-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
        background: #124fc0;
        border-color: #124fc0;
        box-shadow: 0 10px 18px rgba(24, 83, 158, .24);
    }

    .wsp-tab:hover:not(.active) {
        background: #eaf4ff;
        color: #124fc0;
        box-shadow: inset 0 -2px 0 #75a9e9;
    }

    .wsp-list-card:hover {
        border-color: #8db7e9;
        box-shadow: 0 10px 20px rgba(20, 69, 130, .13);
    }

    .wsp-table tbody tr:hover td {
        background: #f0f7ff;
    }

    :is(.wsp-field select, .wsp-field input, .wsp-input, .wsp-paste-area):hover:not(:focus):not(:disabled) {
        border-color: #8db7e9;
        box-shadow: 0 2px 8px rgba(30, 100, 178, .08);
    }
}

:is(.wsp-btn, .wsp-tab, .wsp-quick-row-remove):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px) scale(.985);
}

:is(
    .wsp-btn,
    .wsp-tab,
    .wsp-quick-row-remove,
    .wsp-field select,
    .wsp-field input,
    .wsp-input,
    .wsp-paste-area,
    .wsp-list-card h3 a,
    .wsp-table td a
):focus-visible {
    outline: 3px solid var(--interaction-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--interaction-focus-halo);
}

/* Back office ----------------------------------------------------------- */

body:has(.admin-shell) :is(
    .btn,
    .admin-nav a,
    .admin-nav-link,
    .finance-summary-tile,
    .checkbox-card,
    .image-preview-trigger,
    .image-item-del,
    .action-del-img,
    .action-hide-incorrect-img,
    .image-upload-area
) {
    transition:
        transform .16s var(--interaction-ease),
        box-shadow .16s var(--interaction-ease),
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    body:has(.admin-shell) .btn-primary:hover:not(:disabled),
    body:has(.admin-shell) .btn:not(.btn-outline):not(.btn-danger):not(.btn-sm):hover:not(:disabled) {
        background: var(--wb-primary-hover);
        box-shadow: 0 8px 16px rgba(11, 78, 150, .26);
        transform: translateY(-1px);
    }

    body:has(.admin-shell) .btn-outline:hover:not(:disabled) {
        border-color: var(--wb-primary);
        box-shadow: 0 5px 12px rgba(11, 78, 150, .12);
        transform: translateY(-1px);
    }

    body:has(.admin-shell) .btn-danger:hover:not(:disabled) {
        box-shadow: 0 8px 16px rgba(192, 35, 49, .22);
        transform: translateY(-1px);
    }

    body:has(.admin-shell) :is(.admin-nav a, .admin-nav-link):hover {
        box-shadow: inset 3px 0 0 #74b4ff, 0 5px 12px rgba(0, 0, 0, .14);
        transform: translateX(2px);
    }

    body:has(.admin-shell) .finance-summary-tile:hover {
        border-color: var(--wb-primary);
        box-shadow: 0 10px 20px rgba(11, 78, 150, .16);
        transform: translateY(-2px);
    }

    body:has(.admin-shell) .data-table tbody tr:hover td {
        background: #eef6ff;
    }

    body:has(.admin-shell) .checkbox-card:hover,
    body:has(.admin-shell) .image-upload-area:hover {
        border-color: var(--wb-primary);
        box-shadow: 0 6px 14px rgba(11, 78, 150, .12);
    }

    body:has(.admin-shell) :is(.editor-input, .form-control):hover:not(:focus):not(:disabled) {
        border-color: #74a8e7;
    }
}

body:has(.admin-shell) :is(
    .btn,
    .admin-nav a,
    .admin-nav-link,
    .finance-summary-tile,
    .checkbox-card,
    .image-preview-trigger,
    .image-item-del,
    .action-del-img,
    .action-hide-incorrect-img
):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px) scale(.985);
}

body:has(.admin-shell) :is(
    .btn,
    .admin-nav a,
    .admin-nav-link,
    .finance-summary-tile,
    .checkbox-card,
    .image-item-del,
    .action-del-img,
    .action-hide-incorrect-img,
    .image-upload-area,
    .editor-input,
    .editor-card input:not([type="hidden"]),
    .editor-card select,
    .editor-card textarea,
    .form-control,
    .data-table td a
):focus-visible {
    outline: 3px solid #4da3ff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(77, 163, 255, .22);
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .btn,
        .hero-btn,
        .page-search-jump,
        .summary-cta,
        .part-card,
        .part-img-link img,
        .main-image-container img,
        .wsp-btn,
        .wsp-tab,
        .wsp-list-card,
        .admin-nav a,
        .admin-nav-link,
        .finance-summary-tile
    ) {
        transition-duration: .01ms !important;
    }
}


/* Premium Ferry Telecom storefront footer */
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim {
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(48px, 7vw, 88px);
  border-top: 1px solid #dce6f1; background: #fff; color: #18334f;
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim::before {
  position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none;
  background: radial-gradient(ellipse at 5% 0, rgba(42,119,204,.07), transparent 35%), radial-gradient(ellipse at 96% 65%, rgba(67,145,220,.045), transparent 32%);
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-strip {
  border-bottom: 1px solid #e2eaf3; background: linear-gradient(105deg,#f3f8fe 0%,#f9fbfe 52%,#f2f7fc 100%);
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-grid {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(calc(100% - 48px),1240px); margin-inline: auto;
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item {
  display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 84px; padding: 16px clamp(14px,2.4vw,28px); border-right: 1px solid #e0e8f1;
}
body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid {
  display: grid; grid-template-columns: minmax(240px,1.65fr) repeat(3,minmax(130px,.8fr)); gap: clamp(24px,4vw,52px);
  width: min(calc(100% - 48px),1240px); margin-inline: auto; padding-block: clamp(38px,5vw,58px);
}
@media (max-width: 900px) {
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 26px; }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-brand { grid-column: 1/-1; }
}
@media (max-width: 640px) {
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-grid { grid-template-columns: 1fr; }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item,
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item:first-child { min-height: 0; padding: 12px 0; border-right: 0; border-bottom: 1px solid #e0e8f1; }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-item:last-child { border-bottom: 0; }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid { gap: 25px 18px; width: min(calc(100% - 36px),1240px); padding-block: 32px; }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-service-grid,
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom-inner { width: min(calc(100% - 36px),1240px); }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-bottom-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 13px; }
}
@media (max-width: 460px) {
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-premium-grid { grid-template-columns: 1fr; gap: 23px; }
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim .footer-brand { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.wp-admin-shell)) .ferry-main-footer.footer-slim :is(.footer-col li a,.footer-contact-link) { transition: none; }
}

/* premium mega-menu */
body:not(:has(.admin-shell)) .b2b-model-series-group>summary small{display:none}
/*===assets/css/checkout-premium.css===*//* Checkout-only presentation; pricing, validation and payment flows stay unchanged. */
.checkout-page.checkout-page{--co-ink:#20352e;--co-muted:#586b64;--co-line:#dce6e1;--co-soft:#f5f8f6;max-width:1200px;padding-block:12px 40px;color:var(--co-ink)}
.checkout-page>.breadcrumb{margin:0 0 8px;padding-block:0}
.checkout-page .checkout-head{align-items:center;gap:16px;padding:8px 0 16px;margin:0;min-height:0;border-bottom:1px solid var(--co-line)}
.checkout-page .checkout-head h1{font-size:clamp(26px,3vw,38px);font-weight:750;line-height:1.2;letter-spacing:-.045em;color:var(--co-ink);margin:8px 0 10px}
.checkout-page .checkout-head p{font-size:14px;line-height:1.6;color:var(--co-muted);max-width:480px}
.checkout-page .checkout-head>div:first-child>span{color:#4b695c;font-size:11px;letter-spacing:.16em}
.checkout-page .checkout-steps{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--co-line);border-radius:30px;font-size:12px;background:#fff;white-space:nowrap;color:var(--co-muted)}
.checkout-page .checkout-steps b{width:28px;height:28px;background:#eaf1ed;color:#365747;font-size:12px}
.checkout-page .checkout-layout{grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:24px;margin-top:18px}
.checkout-page .checkout-main{display:grid;gap:0;min-width:0;align-self:start}
.checkout-page .checkout-main,.checkout-page .checkout-order{padding:24px;border:1px solid var(--co-line);border-radius:16px;background:#fff;box-shadow:0 2px 5px #173d2e06;min-width:0}
.checkout-page .checkout-main>.checkout-card{padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.checkout-page .checkout-main>.checkout-card+.checkout-card{border-top:1px solid var(--co-line);margin-top:22px;padding-top:22px}
/* A long summary must remain fully reachable rather than sticking below the header. */
.checkout-page .checkout-order{position:static;align-self:start;background:linear-gradient(155deg,#f8fbf9,#fff 45%)}
.checkout-page .checkout-card__head{gap:12px;margin-bottom:22px;align-items:center;flex-wrap:wrap}
.checkout-page .checkout-card__head>div{gap:10px}
.checkout-page .checkout-card__head>div>span{width:30px;height:30px;background:#edf3ef;color:#486455;border-radius:10px;font-size:11px}
.checkout-page .checkout-field{gap:7px}
.checkout-page .checkout-field input,.checkout-page .checkout-field select{height:46px;padding:0 13px;border:1px solid #cedbd3;border-radius:10px;background:#fbfcfb;color:var(--co-ink);font-family:inherit;font-size:14px;box-shadow:0 1px 2px #173d2e05}
.checkout-page :is(input,select,button,a):focus-visible{outline:2px solid #527762;outline-offset:3px}
.checkout-page .checkout-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.checkout-page .checkout-address{padding:16px;text-align:left;font:inherit;border-radius:12px;border:1px solid var(--co-line);background:#fff;color:var(--co-muted);line-height:1.65}
.checkout-page .checkout-gateway{grid-template-columns:18px 32px minmax(0,1fr) auto;gap:10px;padding:14px 12px;border:1px solid var(--co-line);border-radius:12px;background:#fff;box-shadow:none;min-width:0}
.checkout-page #checkout-shipping-methods .checkout-gateway{grid-template-columns:18px minmax(0,1fr)}
.checkout-page .checkout-gateway input{accent-color:#486f57;width:16px;height:16px;margin:0}
.checkout-page .checkout-gateway strong{font-size:13px;color:var(--co-ink);line-height:1.4}
.checkout-page .checkout-gateway small{font-size:11px;color:var(--co-muted);line-height:1.5;margin-top:4px}
.checkout-page .checkout-gateway__mark{background:#eaf0ed;color:#365747;border:1px solid #d3dfd7;font-size:13px}
.checkout-page .checkout-gateway em{font-size:9px;letter-spacing:.02em;padding:4px 5px}
.checkout-page .checkout-gateway.is-disabled{opacity:1;background:#f6f7f6;border-style:dashed}
.checkout-page .checkout-gateway.is-disabled strong{color:#66746d}
.checkout-page .checkout-items{max-height:320px;padding:0 4px 0 0;scrollbar-color:#b7c9bd transparent;overscroll-behavior:contain}
.checkout-page .checkout-item{grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-color:var(--co-line)}
.checkout-page .checkout-item img{height:48px;width:48px;object-fit:contain;background:#fff;border-color:var(--co-line)}
.checkout-page .checkout-item strong{font-size:12px;line-height:1.5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--co-ink)}
.checkout-page .checkout-item span{font-size:11px;color:var(--co-muted);margin-top:5px}
.checkout-page .checkout-item>b{font-size:12px;color:var(--co-ink);font-variant-numeric:tabular-nums}
.checkout-page .checkout-coupon{padding:14px;background:var(--co-soft);border-color:var(--co-line);margin:18px 0 8px}
.checkout-page .checkout-coupon input,.checkout-page .checkout-coupon button{height:42px;font-size:13px}
.checkout-page .checkout-coupon small{font-size:11px;line-height:1.5}
.checkout-page .checkout-coupon small:empty{display:none}
.checkout-page .checkout-total-row{font-size:13px;padding:12px 0;border-color:var(--co-line);color:var(--co-muted)}
.checkout-page .checkout-total-row b{font-weight:600;color:var(--co-ink);font-variant-numeric:tabular-nums}
.checkout-page .checkout-grand-total{padding:20px 0;font-size:15px;color:var(--co-ink)}
.checkout-page .checkout-grand-total b{font-size:26px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.checkout-page .checkout-payment-side{padding-top:20px;border-color:var(--co-line)}
.checkout-page .checkout-payment-side__head{margin-bottom:14px;gap:10px}
.checkout-page .checkout-place{height:auto;min-height:50px;padding:12px 18px;margin-top:10px;font-size:14px;border-radius:12px;border:1px solid #345542;background:#3e654e;color:#fff;box-shadow:0 6px 14px #34554218}
.checkout-page .checkout-place:disabled{opacity:.65;cursor:wait}
.checkout-page .checkout-message{font-size:12px;line-height:1.6;margin-top:14px;color:var(--co-muted)}
.checkout-page .checkout-message.is-error{color:#a32e36}
.checkout-page .checkout-security{font-size:11px;line-height:1.6;color:var(--co-muted);padding-top:12px;border-top:1px solid var(--co-line)}
.checkout-page .checkout-order .checkout-item>b,.checkout-page .checkout-order .checkout-total-row{font-size:11px}
.checkout-page .checkout-order .checkout-grand-total{font-size:13px}
.checkout-page [hidden]{display:none!important}
@media(max-width:960px){.checkout-page .checkout-layout{grid-template-columns:1fr;gap:20px}.checkout-page .checkout-head{align-items:flex-start}.checkout-page .checkout-steps{display:none}}
@media(max-width:540px){.checkout-page.checkout-page{padding:16px 16px 40px}.checkout-page .checkout-head{padding:12px 0 22px}.checkout-page .checkout-card,.checkout-page .checkout-order{padding:18px;border-radius:16px}.checkout-page .checkout-fields{grid-template-columns:1fr;gap:16px}.checkout-page .checkout-field input,.checkout-page .checkout-field select{font-size:16px}.checkout-page .checkout-gateway{gap:7px;grid-template-columns:16px 28px minmax(0,1fr)}.checkout-page .checkout-gateway em{grid-column:3;justify-self:start}.checkout-page .checkout-card__head small{display:block}}
@media(max-width:540px){.checkout-page.checkout-page{padding-top:10px}.checkout-page .checkout-head{padding:6px 0 14px}.checkout-page .checkout-main{padding:18px}}
/* Flat, two-tone checkout: customer information left, order and payment right. */
body:has(.checkout-page){background:#fff}
.checkout-page.checkout-page{--co-ink:#262626;--co-muted:#646464;--co-line:#dedede;--co-soft:#f6f6f6;max-width:1180px;padding:18px 24px 48px;color:var(--co-ink)}
.checkout-page .checkout-head{padding:12px 0 22px;border:0}
.checkout-page .checkout-head h1{font-size:28px;font-weight:650;letter-spacing:-.025em;margin:5px 0 8px}
.checkout-page .checkout-head>div:first-child>span{display:none}
.checkout-page .checkout-head p{font-size:13px;color:var(--co-muted)}
.checkout-page .checkout-steps{border:0;padding:0;background:transparent;font-weight:500}
.checkout-page .checkout-layout{grid-template-columns:minmax(0,1.12fr) minmax(340px,1fr);gap:0;margin-top:0;border-top:1px solid var(--co-line)}
.checkout-page .checkout-main{padding:30px 38px 30px 0;border:0;border-radius:0;box-shadow:none;background:#fff}
.checkout-page .checkout-order{padding:30px 28px;border:0;border-left:1px solid var(--co-line);border-radius:0;box-shadow:none;background:#f6f6f6;align-self:stretch}
.checkout-page .checkout-card__head>div>span{display:none}
.checkout-page .checkout-main>.checkout-card+.checkout-card{border:0;margin-top:26px;padding-top:0}
.checkout-page .checkout-field input,.checkout-page .checkout-field select{height:50px;border-radius:6px;border-color:#cfcfcf;background:#fff;box-shadow:none;color:#262626}
.checkout-page .checkout-gateway{border-radius:6px;border-color:#d6d6d6;box-shadow:none;background:#fff}
.checkout-page .checkout-order .checkout-item{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:12px 0;border:0}
.checkout-page .checkout-order .checkout-item strong{font-size:12px;font-weight:550;color:#262626}
.checkout-page .checkout-order .checkout-item>b{font-size:12px;font-weight:550;color:#262626}
.checkout-page .checkout-coupon input{height:46px;border:1px solid #cfcfcf;border-radius:6px;background:#fff;font-size:13px}
.checkout-page .checkout-total-row{border:0;padding:7px 0;font-size:12px}
.checkout-page .checkout-grand-total{margin-top:10px;padding:16px 0;border-top:1px solid var(--co-line)}
.checkout-page .checkout-place{border-radius:6px;min-height:52px;background:#344e40;border-color:#344e40;box-shadow:none;font-size:14px;font-weight:600}
.checkout-page .checkout-summary>summary{display:none}
.checkout-page .checkout-summary:not([open])>summary{display:flex;justify-content:space-between;cursor:pointer;font-size:14px;padding-bottom:16px}
.checkout-page .checkout-summary-content>.checkout-card__head{margin-bottom:12px}
@media(max-width:960px){
 .checkout-page .checkout-layout{grid-template-columns:1fr}
 .checkout-page .checkout-main{padding:22px 0}
 .checkout-page .checkout-order{padding:22px;border:1px solid var(--co-line);border-radius:8px}
 .checkout-page .checkout-summary>summary{display:flex;justify-content:space-between;align-items:center;padding:0 0 14px;cursor:pointer;font-size:14px;font-weight:600;list-style:none}
 .checkout-page .checkout-summary>summary::-webkit-details-marker{display:none}
 .checkout-page .checkout-summary:not([open])>summary{padding-bottom:18px}
 .checkout-page .checkout-summary-content>.checkout-card__head{display:none}
}
@media(max-width:540px){.checkout-page.checkout-page{padding:12px 16px 32px}.checkout-page .checkout-head h1{font-size:25px}.checkout-page .checkout-order{padding:18px}.checkout-page .checkout-head{padding:8px 0 18px}}
/* Refined checkout finish: restrained contrast, consistent type and no heavy shadows. */
body[data-theme]:has(.checkout-page){background:#fafbf9}
.checkout-page.checkout-page{--co-ink:#24372e;--co-muted:#59675f;--co-line:#e0e7e1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;max-width:1220px;padding-top:14px}
.checkout-page .checkout-head{padding:10px 0 22px;gap:20px}
.checkout-page .checkout-head h1{font-family:inherit;font-size:clamp(25px,2.5vw,32px);font-weight:650;letter-spacing:-.045em;color:var(--co-ink)}
.checkout-page .checkout-head p{font-size:13px;line-height:1.6;color:var(--co-muted)}
.checkout-page .checkout-steps{gap:9px;color:#53635a;font-size:11px}
.checkout-page .checkout-steps b{width:27px;height:27px;background:#e9efe9;border:1px solid #d8e3da;color:#3d5c48}
.checkout-page .checkout-steps i{width:22px;background:#d9e1da}
.checkout-page .checkout-layout{border:1px solid var(--co-line);border-radius:16px;background:#fff;box-shadow:0 2px 5px #283e2d04;overflow:clip}
.checkout-page .checkout-main{padding:28px 32px;background:#fff}
.checkout-page .checkout-order{padding:28px;background:linear-gradient(145deg,#f1f5ef 0%,#f8faf6 60%,#f5f7f3 100%);border-color:var(--co-line)}
.checkout-page .checkout-card__head h2{font-family:inherit;font-size:17px;font-weight:650;letter-spacing:-.025em;color:var(--co-ink)}
.checkout-page .checkout-main>.checkout-card+.checkout-card{margin-top:28px;border-top:1px solid #edf0eb;padding-top:24px}
.checkout-page .checkout-card__head small{color:#64746a;font-size:10px}
.checkout-page .checkout-field input,.checkout-page .checkout-field select{border-radius:8px;border-color:#d6dfd7;background:linear-gradient(#fff,#fcfdfb);height:49px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}
.checkout-page .checkout-field :is(input,select):hover{border-color:#aebfb1}
.checkout-page .checkout-field :is(input,select):focus{border-color:#60836b;box-shadow:0 0 0 3px #60836b12;background:#fff}
.checkout-page .checkout-save-note{border-top:1px solid #edf0eb;padding-top:14px;font-size:10px;color:#617166}
.checkout-page .checkout-item img{width:60px;height:60px;padding:5px;background:#fff;border-radius:10px;border-color:#dde5dc;box-shadow:0 1px 2px #283e2d05}
.checkout-page .checkout-order .checkout-item strong{font-family:inherit;font-size:11px;font-weight:600;line-height:1.6;color:#304235}
.checkout-page .checkout-order .checkout-item>b{font-size:11px;font-weight:650;color:#304235}
.checkout-page .checkout-order .checkout-item span{font-size:10px;color:#657267}
.checkout-page .checkout-coupon input{border-radius:8px;border-color:#d5dfd4;font-family:inherit;background:#ffffffd9}
.checkout-page .checkout-coupon button{border-radius:8px;border-color:#cbd9cb;background:#e5ece2;color:#405d47;font-family:inherit;font-size:12px}
.checkout-page .checkout-order .checkout-total-row{font-size:11px;line-height:1.5;padding:8px 0;color:#607062}
.checkout-page .checkout-grand-total{background:#ffffff91;border:1px solid #dae3d7;border-radius:10px;padding:15px;margin:13px 0 20px}
.checkout-page .checkout-gateways{gap:8px}
.checkout-page .checkout-gateway{padding:12px;border-radius:9px;border-color:#dce4d9;background:#ffffffb8;transition:border-color .15s,background .15s}
.checkout-page .checkout-gateway:not(.is-disabled):hover{border-color:#adc2ae;background:#fff}
.checkout-page .checkout-gateway__mark{border-radius:8px;background:#f1f5ed;color:#4c6b52;border-color:#d5e0d1;font-family:inherit;font-size:12px}
.checkout-page .checkout-gateway.is-disabled{background:#f4f6f2;border-color:#e1e6de;filter:none}
.checkout-page .checkout-place{background:linear-gradient(135deg,#466a50,#36543f);border:1px solid #35523d;border-radius:9px;min-height:52px;box-shadow:0 2px 4px #2944310d;font-family:inherit;letter-spacing:.015em}
.checkout-page .checkout-security{font-size:10px;line-height:1.7;color:#69776b}
@media(max-width:960px){.checkout-page .checkout-layout{border:0;background:transparent;box-shadow:none;overflow:visible;gap:18px}.checkout-page .checkout-main{border:1px solid var(--co-line);border-radius:12px;padding:24px}.checkout-page .checkout-order{border:1px solid #dbe4d7;border-radius:12px;padding:24px}}
@media(max-width:540px){.checkout-page .checkout-main,.checkout-page .checkout-order{padding:18px}.checkout-page .checkout-field input,.checkout-page .checkout-field select{font-size:16px}.checkout-page .checkout-order .checkout-item{grid-template-columns:48px minmax(0,1fr) auto;gap:9px}.checkout-page .checkout-item img{width:48px;height:48px}.checkout-page .checkout-card__head h2{font-size:16px}}
/* Focused checkout shell, without the catalogue search/navigation distraction. */
body:has(.checkout-page) .ferry-announcement,
body:has(.checkout-page) #site-header :is(.store-mega-menu,.search-bar,.page-search-jump){display:none!important}
body:has(.checkout-page) #site-header .header-inner{max-width:1180px;min-height:74px;margin:auto;padding-inline:24px}
body:has(.checkout-page) #site-header .user-nav{margin-left:auto}
.checkout-page.checkout-page{max-width:1180px;padding:18px 24px 48px;--co-ink:#27362e;--co-line:#e3e7e1}
.checkout-page>.breadcrumb{font-size:11px;color:#708075;margin-bottom:6px}
.checkout-page .checkout-head{padding:8px 0 24px;align-items:center}
.checkout-page .checkout-head h1{font-size:clamp(26px,3vw,34px);letter-spacing:-.05em;margin:0 0 8px}
.checkout-page .checkout-head p{font-size:12px;margin:0;max-width:440px}
.checkout-page .checkout-layout{grid-template-columns:minmax(0,1.13fr) minmax(340px,1fr);border:1px solid #e1e6df;border-radius:18px;box-shadow:0 2px 4px #263c2c04}
.checkout-page .checkout-main{padding:32px;background:#fff}
.checkout-page .checkout-order{padding:28px 30px;background:linear-gradient(135deg,#f6f7f3,#f1f4ee);border-left:1px solid #e1e6df}
.checkout-page .checkout-card__head{margin-bottom:20px}
.checkout-page .checkout-field input,.checkout-page .checkout-field select{height:58px;padding:23px 13px 7px;font-size:14px;line-height:20px;border-color:#d6dfd6;border-radius:8px;background:#fff}
.checkout-page .checkout-field:focus-within :is(input,select){border-color:#63896d;box-shadow:0 0 0 3px #63896d10}
.checkout-page .checkout-product-preview{position:relative;overflow:visible}
.checkout-page .checkout-product-preview::after{content:attr(data-quantity);position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;border-radius:20px;background:#68766b;color:#fff;font:600 10px/1 system-ui;border:2px solid #f4f6f0}
.checkout-page .checkout-order .checkout-item{padding:10px 0 16px;align-items:center}
.checkout-page .checkout-order .checkout-item>b{font-size:12px;font-weight:600}
.checkout-page .checkout-coupon{margin:16px 0 20px;padding:16px 0;border-top:1px solid #e0e6dc;border-bottom:1px solid #e0e6dc}
.checkout-page .checkout-coupon button{background:#e4ebdf;border-color:#cfdbca;min-width:70px}
.checkout-page .checkout-grand-total{background:#ffffffb3;border-color:#dde5d7;border-radius:10px;margin-bottom:20px;padding:17px 14px}
.checkout-page .checkout-delivery-side{padding-top:20px}
.checkout-page .checkout-gateway{background:#ffffffc9;border-color:#d9e2d4;padding:13px 12px}
.checkout-page .checkout-gateway:has(input:checked){background:#edf4e8;border-color:#86a58a;box-shadow:inset 2px 0 #86a58a}
.checkout-page .checkout-place{margin-top:16px;min-height:54px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(120deg,#41634b,#304d39);border-radius:9px}
.checkout-page .checkout-place span{font-size:20px;line-height:1}
.checkout-page .checkout-security{font-size:10px;padding:14px 6px 0}
@media(max-width:960px){.checkout-page .checkout-layout{grid-template-columns:1fr;border:0;box-shadow:none;background:transparent;gap:16px}.checkout-page .checkout-main,.checkout-page .checkout-order{padding:24px;border:1px solid var(--co-line);border-radius:14px}.checkout-page .checkout-order{border-color:#dbe4d5}}
@media(max-width:540px){.checkout-page.checkout-page{padding:12px 16px 32px}.checkout-page .checkout-main,.checkout-page .checkout-order{padding:20px 18px}.checkout-page .checkout-field input,.checkout-page .checkout-field select{font-size:16px}.checkout-page .checkout-head{padding-bottom:20px}body:has(.checkout-page) #site-header .header-inner{padding-inline:16px}}
.checkout-page .checkout-field{display:flex;flex-direction:column;gap:6px}
.checkout-page .checkout-field input,.checkout-page .checkout-field select{height:46px;padding:10px 12px;background:#fff;border:1px solid #d6dfd6;border-radius:7px}
.checkout-page .checkout-address-edit{margin-top:16px;padding-top:14px;border-top:1px solid var(--co-line)}
.checkout-page .checkout-address-edit p{margin:0 0 10px;font-size:12px;color:#5c6d61}
.checkout-page .checkout-address-edit>div{display:flex;flex-wrap:wrap;gap:8px}
.checkout-page .checkout-address-edit button{min-height:38px;padding:8px 12px;border:1px solid #ccd9ce;border-radius:7px;background:#edf3ed;color:#36563e;font:600 12px/1.4 inherit;cursor:pointer}
.checkout-page .checkout-address-edit [data-reset]{background:#fff;font-weight:400}
.checkout-page .checkout-address-edit button:disabled{opacity:.5;cursor:default}
.checkout-page .checkout-address-edit [role=status]{display:block;font-size:12px;margin-top:8px;color:#365d43}
.checkout-page .checkout-address-edit .is-error{color:#a32e36}
.checkout-page .checkout-address strong,.checkout-page .checkout-address-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;line-height:1.25}
.checkout-page .checkout-address-line{font-size:11px;color:#627066}
.checkout-page .checkout-address-demo{padding:12px;margin:0 0 20px;border:1px dashed #cbd9cc;border-radius:10px;background:#f8faf6}
.checkout-page .checkout-address-demo summary{font-size:12px;font-weight:600;color:#4d6653;cursor:pointer}
.checkout-page .checkout-address-demo p{font-size:11px;line-height:1.4;color:#6c766e;margin:8px 0 12px}
.checkout-page .checkout-address-demo .checkout-address{cursor:default;transform:none;background:#fff}
.checkout-page label.checkout-address{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:10px;cursor:pointer}
.checkout-page label.checkout-address>div{min-width:0}
.checkout-page label.checkout-address>input{width:16px;height:16px;margin:0;accent-color:#50755a}
@media(prefers-reduced-motion:reduce){.checkout-page *{transition:none!important;scroll-behavior:auto!important}}
.checkout-item.is-invalid{position:relative;border-color:#e8b4b4;background:#fff8f8}
.checkout-item__warning{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#9b2f2f;font-size:.78rem;line-height:1.35;padding:8px 0 0}
.checkout-item__warning button{border:1px solid #dca6a6;background:#fff;color:#8b2d2d;border-radius:8px;padding:5px 10px;font:inherit;font-weight:700;cursor:pointer}
.checkout-item__warning button:hover{background:#fff0f0;border-color:#c77979}

/* Keep customer details compact while the longer order column continues. */
@media(min-width:961px){.checkout-page .checkout-layout{align-items:start;gap:18px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}.checkout-page .checkout-main{position:sticky;top:16px;align-self:start;height:max-content;border:1px solid var(--co-line);border-radius:16px;box-shadow:0 2px 5px #283e2d04}.checkout-page .checkout-order{align-self:start;height:auto;border:1px solid #dbe4d7;border-radius:16px;box-shadow:0 2px 5px #283e2d04}}

/* Premium delivery form: one deliberate visual system after the legacy layers above. */
.checkout-page.checkout-page{
  --co-accent:#146ee8;
  --co-accent-dark:#0c55bc;
  --co-accent-soft:#eef6ff;
  --co-ink:#132238;
  --co-muted:#65748a;
  --co-line:#dce5f0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.checkout-page .checkout-main{
  border-color:#dfe7f1;
  border-radius:20px;
  box-shadow:0 22px 60px -48px rgba(15,42,78,.42),0 1px 2px rgba(15,42,78,.04);
}
.checkout-page .checkout-main>.checkout-card+.checkout-card{border-top-color:#edf1f6}
.checkout-page .checkout-main .checkout-card__head{align-items:flex-start;margin-bottom:22px}
.checkout-page .checkout-main .checkout-card__head>div{align-items:center;gap:12px}
.checkout-page .checkout-main .checkout-card__head>div>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid #d8e8fc;
  border-radius:11px;
  background:var(--co-accent-soft);
  color:var(--co-accent-dark);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.checkout-page .checkout-main .checkout-card__head h2{
  color:var(--co-ink);
  font-size:18px;
  font-weight:750;
  letter-spacing:-.025em;
}
.checkout-page .checkout-main .checkout-card__head small{
  margin-left:auto;
  padding-top:8px;
  color:#7b899c;
  font-size:10px;
  font-weight:650;
  letter-spacing:.03em;
}
.checkout-page .checkout-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:18px;
  border:1px solid #e4ebf4;
  border-radius:16px;
  background:linear-gradient(145deg,#fbfdff,#f7faff);
}
.checkout-page .checkout-field{
  --field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M6 20V8l6-4 6 4v12M9 12h6M9 16h6'/%3E%3C/svg%3E");
  position:relative;
  display:block;
  min-width:0;
}
.checkout-page .checkout-field:has(input[name="name"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.checkout-page .checkout-field:has(input[name="company"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V7l8-4v18M12 9h8v12M8 8v.01M8 12v.01M8 16v.01M16 13v.01M16 17v.01'/%3E%3C/svg%3E")}
.checkout-page .checkout-field:has(input[name="phone"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a14 14 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2C9.7 20.5 3.5 14.3 3 6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E")}
.checkout-page .checkout-field:has(input[name="line1"]),.checkout-page .checkout-field:has(input[name="line2"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.checkout-page .checkout-field:has(input[name="city"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V10h6v11M11 21V4h8v17M7.5 14v.01M7.5 17v.01M14 8v.01M17 8v.01M14 12v.01M17 12v.01M14 16v.01M17 16v.01'/%3E%3C/svg%3E")}
.checkout-page .checkout-field:has(input[name="postcode"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
.checkout-page .checkout-field:has(select[name="country"]){--field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.checkout-page .checkout-field::before{
  content:"";
  position:absolute;
  z-index:3;
  left:15px;
  top:20px;
  width:19px;
  height:19px;
  background:#75869d;
  -webkit-mask:var(--field-icon) center/contain no-repeat;
  mask:var(--field-icon) center/contain no-repeat;
  pointer-events:none;
  transition:background-color .22s ease,transform .22s ease;
}
.checkout-page .checkout-field>span{
  position:absolute;
  z-index:3;
  top:8px;
  left:44px;
  max-width:calc(100% - 58px);
  color:#77869a;
  font-size:9px;
  font-weight:750;
  line-height:12px;
  letter-spacing:.055em;
  text-transform:uppercase;
  pointer-events:none;
  transition:color .2s ease;
}
.checkout-page .checkout-field input,
.checkout-page .checkout-field select,
.checkout-page .checkout-field .country-select2__control{
  width:100%;
  height:58px;
  padding:23px 13px 7px 44px;
  border:1px solid #d4dfec;
  border-radius:12px;
  background:#fff;
  color:var(--co-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:550;
  line-height:20px;
  box-shadow:0 1px 2px rgba(15,42,78,.025);
  transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease,transform .22s ease;
}
.checkout-page .checkout-field :is(input,select,.country-select2__control):hover{border-color:#abc0da;background:#fff}
.checkout-page .checkout-field:focus-within::before{background:var(--co-accent);transform:scale(1.06)}
.checkout-page .checkout-field:focus-within>span{color:var(--co-accent-dark)}
.checkout-page .checkout-field :is(input,select,.country-select2__control):focus,
.checkout-page .checkout-field .country-select2.open .country-select2__control{
  border-color:var(--co-accent);
  outline:0;
  background:#fff;
  box-shadow:0 0 0 4px rgba(20,110,232,.11),0 8px 22px -18px rgba(20,110,232,.65);
}
.checkout-page .checkout-field :is(input,select):user-invalid{border-color:#d64d5c;box-shadow:0 0 0 3px rgba(214,77,92,.09)}
.checkout-page .checkout-field .country-select2__control svg{width:17px;height:17px;color:#718198}
.checkout-page .country-select2__dropdown{
  top:calc(100% + 9px);
  padding:9px;
  border-color:#d5e0ed;
  border-radius:14px;
  box-shadow:0 24px 55px -28px rgba(15,42,78,.48),0 8px 24px rgba(15,42,78,.08);
}
.checkout-page .country-select2__dropdown>label{border-color:#dce5ef;border-radius:10px;background:#f7faff}
.checkout-page .country-select2__options button:hover,.checkout-page .country-select2__options button[aria-selected="true"]{background:var(--co-accent-soft);color:var(--co-accent-dark)}
.checkout-page .checkout-save-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin:14px 4px 0;
  padding:0;
  border:0;
  color:#6d7c90;
  font-size:10px;
  line-height:1.5;
}
.checkout-page .checkout-save-note span{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  background:#e9f8ef;
  color:#178447;
  font-size:10px;
  font-weight:800;
}
.checkout-page .checkout-addresses{grid-template-columns:1fr;gap:9px}
.checkout-page .checkout-address{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:2px 12px;
  width:100%;
  min-height:0;
  padding:13px 44px 13px 13px;
  overflow:hidden;
  border:1px solid #dfe7f1;
  border-radius:13px;
  background:#fff;
  color:#718095;
  font-family:inherit;
  line-height:1.35;
  box-shadow:none;
  cursor:pointer;
  transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.checkout-page .checkout-address:hover{border-color:#b7cbe3;background:#fbfdff;transform:translateY(-1px)}
.checkout-page .checkout-address__check{
  grid-row:1/5;
  align-self:center;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #d9e4f0;
  border-radius:10px;
  background:#f5f8fc;
  color:transparent;
  font-size:13px;
}
.checkout-page .checkout-address strong,
.checkout-page .checkout-address>span:not(.checkout-address__check){
  grid-column:2;
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.checkout-page .checkout-address strong{margin:0;color:var(--co-ink);font-size:12px;font-weight:750}
.checkout-page .checkout-address>span:not(.checkout-address__check){font-size:10px}
.checkout-page .checkout-address.is-selected{
  border-color:#86b8f8;
  background:linear-gradient(135deg,#f7fbff,#edf6ff);
  box-shadow:0 0 0 3px rgba(20,110,232,.07);
}
.checkout-page .checkout-address.is-selected::after{
  content:"Selected";
  position:absolute;
  top:12px;
  right:12px;
  color:var(--co-accent-dark);
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.checkout-page .checkout-address.is-selected .checkout-address__check{border-color:var(--co-accent);background:var(--co-accent);color:#fff}
.checkout-page .checkout-no-address{
  position:relative;
  padding:15px 16px 15px 48px;
  border:1px dashed #bcd2eb;
  border-radius:13px;
  background:#f7fbff;
  color:#63758b;
  font-size:11px;
  line-height:1.55;
}
.checkout-page .checkout-no-address::before{
  content:"+";
  position:absolute;
  top:50%;
  left:15px;
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:8px;
  background:#e5f1ff;
  color:var(--co-accent);
  font-size:17px;
  font-weight:500;
  transform:translateY(-50%);
}
@media(max-width:680px){
  .checkout-page .checkout-fields{grid-template-columns:1fr;padding:14px;gap:11px}
  .checkout-page .checkout-field--wide{grid-column:auto}
  .checkout-page .checkout-main .checkout-card__head small{width:100%;margin-left:46px;padding-top:0}
}
@media(max-width:540px){
  .checkout-page .checkout-main{border-radius:16px}
  .checkout-page .checkout-main .checkout-card__head h2{font-size:17px}
  .checkout-page .checkout-field input,.checkout-page .checkout-field select,.checkout-page .checkout-field .country-select2__control{font-size:16px}
}

/* Compact premium order rail: consistent scale, spacing and interaction states. */
.checkout-page .checkout-order{
  padding:21px;
  border-color:#dfe7f1;
  border-radius:20px;
  background:linear-gradient(155deg,#fbfdff,#f5f8fc);
  box-shadow:0 22px 60px -48px rgba(15,42,78,.36),0 1px 2px rgba(15,42,78,.04);
}
.checkout-page .checkout-order .checkout-card__head{margin-bottom:12px}
.checkout-page .checkout-order .checkout-card__head h2,.checkout-page .checkout-order .checkout-payment-side__head strong,.checkout-page .checkout-order .checkout-delivery-side h2{color:var(--co-ink);font-size:15px;font-weight:750;letter-spacing:-.02em}
.checkout-page .checkout-order .checkout-card__head small{color:#8190a3;font-size:9px!important;font-weight:700}
.checkout-page .checkout-items{max-height:278px;padding-right:3px;scrollbar-width:thin;scrollbar-color:#b6c8de transparent}
.checkout-page .checkout-order .checkout-item{grid-template-columns:44px minmax(0,1fr) 27px;gap:9px;padding:9px 0;border-bottom:1px solid #e6edf5}
.checkout-page .checkout-order .checkout-product-preview,.checkout-page .checkout-order .checkout-item img{width:44px;height:44px}
.checkout-page .checkout-order .checkout-item img{padding:3px;border-radius:9px;border-color:#dde6f0}
.checkout-page .checkout-product-preview::after{top:-5px;right:-5px;min-width:17px;height:17px;border-color:#f8fbfe;background:linear-gradient(135deg,#2582f4,#1265d5);box-shadow:0 4px 10px rgba(18,101,213,.28);font-size:8px}
.checkout-page .checkout-order .checkout-item strong{font-size:10px!important;line-height:1.35!important;font-weight:700}
.checkout-page .checkout-order .checkout-item__details{font-size:9px!important;line-height:1.35;color:#7b899b!important}
.checkout-page .checkout-order .checkout-item__commerce{gap:7px;margin-top:5px}
.checkout-page .checkout-order .checkout-item__quantity{height:26px;border-color:#d8e3ef;border-radius:7px;background:#fff}
.checkout-page .checkout-order .checkout-item__quantity button{width:25px;height:24px;color:#56708e;font-size:12px}
.checkout-page .checkout-order .checkout-item__quantity input{width:29px;height:24px;font-size:10px}
.checkout-page .checkout-order .checkout-item__commerce>b{font-size:10px;color:#40536a}
.checkout-page .checkout-order .checkout-item__remove{width:27px;height:27px;border-color:#dbe5ef;background:#fff;color:#8192a6}
.checkout-page .checkout-order .checkout-item__remove:hover{border-color:#edb9bf;background:#fff5f6;color:#b63745}
.checkout-page .checkout-coupon{margin:14px 0 15px;padding:13px;border:1px solid #e0e8f2;border-radius:13px;background:#fff;box-shadow:0 5px 20px -18px rgba(15,42,78,.35)}
.checkout-page .checkout-coupon>label{margin-bottom:7px;color:#51637a!important;font-size:10px!important;font-weight:750;letter-spacing:.02em}
.checkout-page .checkout-coupon>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.checkout-page .checkout-coupon input{height:39px;padding:0 11px;border-color:#d7e1ed;border-radius:9px;background:#fbfdff;font-size:11px}
.checkout-page .checkout-coupon input:focus{border-color:var(--co-accent);box-shadow:0 0 0 3px rgba(20,110,232,.1)}
.checkout-page .checkout-coupon button{height:39px;min-width:66px;border:1px solid #1267d6;border-radius:9px;background:#176fe6;color:#fff;font-size:10px;font-weight:750;box-shadow:0 7px 16px -11px rgba(23,111,230,.8);transition:background .2s,transform .2s}
.checkout-page .checkout-coupon button:hover{border-color:#0c58be;background:#0f5fc8;transform:translateY(-1px)}
.checkout-page .checkout-order .checkout-total-row{padding:7px 2px;border:0;color:#6f7e91;font-size:10px!important}
.checkout-page .checkout-order .checkout-total-row b{color:#34485f;font-size:10px;font-weight:700}
.checkout-page .checkout-order .checkout-grand-total{display:flex;align-items:center;justify-content:space-between;min-height:62px;margin:11px 0 18px;padding:12px 14px;border:1px solid #dce6f1;border-radius:13px;background:#fff;box-shadow:0 8px 24px -22px rgba(15,42,78,.45)}
.checkout-page .checkout-order .checkout-grand-total>span{color:#3c5067;font-size:11px;font-weight:750}
.checkout-page .checkout-order .checkout-grand-total b{color:#142840;font-size:22px;font-weight:780;letter-spacing:-.04em}
.checkout-page .checkout-delivery-side{margin-top:0;padding:17px 0;border-top:1px solid #dde6f0}
.checkout-page .checkout-delivery-side .checkout-card__head{margin-bottom:10px}
.checkout-page .checkout-order .checkout-gateway{min-height:56px;padding:10px;border:1px solid #dce6f0;border-radius:11px;background:#fff;box-shadow:none;transition:border-color .2s,background-color .2s,transform .2s}
.checkout-page .checkout-order .checkout-gateway small{margin-top:2px;color:#708197!important;font-size:9px!important}
.checkout-page .checkout-order .checkout-gateway__mark{width:48px;height:28px;border-radius:7px;background:#f3f7fc;border-color:#e0e8f1}
.checkout-page .checkout-place{min-height:47px;margin-top:13px;border:1px solid #0d5fc9;border-radius:11px;background:linear-gradient(135deg,#1c79ed,#1267d6);font-size:12px;font-weight:750;box-shadow:0 12px 24px -16px rgba(23,111,230,.8);transition:background .2s,transform .2s,box-shadow .2s}
.checkout-page .checkout-place:hover{background:linear-gradient(135deg,#146bda,#0b57b9);transform:translateY(-1px);box-shadow:0 15px 28px -16px rgba(23,111,230,.9)}
.checkout-page .checkout-security{padding-top:11px;border-top:0;color:#8090a3;font-size:8px!important;text-align:center}
@media(max-width:540px){.checkout-page .checkout-order{padding:16px}.checkout-page .checkout-order .checkout-grand-total b{font-size:20px}}

/* Address book and payment chooser — shared storefront finish. */
.ferry-main-account .acct-order-action{position:relative;border-color:#d6e0ea;background:#fff;color:#344b62}
.ferry-main-account .acct-order-action:hover{border-color:#aebdcb;background:#f7f9fb;color:#172a3e}
.ferry-main-account .acct-order-action.is-primary{border-color:#cbd7e3;background:#f2f5f8;color:#20384e}
.ferry-main-account .acct-order-action.is-primary:hover{border-color:#9fb1c2;background:#e9eef3;color:#102b43}
.ferry-main-account .acct-order-action.is-invoice{border-color:#e5b5ca;background:#fff;color:#bb4672}
.ferry-main-account .acct-order-action.is-invoice:hover{border-color:#bb4672;background:#fff1f6;color:#a82e5e}
.ferry-main-account .acct-order-action.is-packing{border-color:#d0c1e7;background:#fff;color:#7654ad}
.ferry-main-account .acct-order-action.is-packing:hover{border-color:#7654ad;background:#f7f2ff;color:#624094}
.ferry-main-account .acct-order-action.is-track{border-color:#b9dccb;background:#f2faf6;color:#267552}
.ferry-main-account .acct-order-doc-check{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:14px;height:14px;border:0;border-radius:50%;background:#fff;color:#5b8069;box-shadow:none;transform:translate(-50%,-50%);pointer-events:none}
.ferry-main-account .acct-order-doc-check svg{width:10px;height:10px;stroke-width:2.25}
.ferry-main-account #pane-addresses{color:#17243a}
.ferry-main-account .acct-address-head{align-items:center;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #e3eaf2}
.ferry-main-account .acct-address-head h2{color:#17243a;font-size:24px;letter-spacing:-.035em}
.ferry-main-account .acct-address-head p{max-width:620px;margin-top:6px;color:#66758a;font-size:13px;line-height:1.55}
.ferry-main-account .acct-address-head .btn{min-height:42px;padding:10px 16px;border:1px solid #176fe6;border-radius:10px;background:#176fe6;color:#fff;font-size:12px;font-weight:750;box-shadow:0 10px 22px -15px rgba(23,111,230,.8)}
.ferry-main-account .acct-address-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ferry-main-account .acct-address-card{display:block;min-width:0;padding:0;border:1px solid #dbe6f2;border-radius:16px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);overflow:hidden;box-shadow:0 14px 36px -30px rgba(17,45,82,.46);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ferry-main-account .acct-address-card:hover{border-color:#bdd0e7;box-shadow:0 20px 46px -34px rgba(17,45,82,.5);transform:translateY(-2px)}
.ferry-main-account .acct-address-card header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px 12px;border-bottom:1px solid #e8eef5;background:rgba(248,251,255,.86)}
.ferry-main-account .acct-address-card header>div:first-child{min-width:0}
.ferry-main-account .acct-address-card header span{margin:0 0 5px;color:#2878f0;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ferry-main-account .acct-address-card header b{overflow:hidden;color:#17243a;font-size:15px;font-weight:750;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.ferry-main-account .acct-address-card__body{display:grid;gap:9px;min-width:0;padding:14px 15px 15px}
.ferry-main-account .acct-address-card__body>strong{overflow:hidden;color:#273a51;font-size:12px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.ferry-main-account .acct-address-card__body p{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:0;color:#54657a;font-size:12px;line-height:1.4}
.ferry-main-account .acct-address-card__body p svg{flex:0 0 15px;width:15px;height:15px;fill:none;stroke:#6d8aad;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
.ferry-main-account .acct-address-card__body p span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ferry-main-account .acct-address-card__phone{color:#36536f!important;font-weight:650}
.ferry-main-account .acct-address-card__actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ferry-main-account .acct-address-card__actions button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #dbe5ef;border-radius:9px;background:#fff;color:#59728d;cursor:pointer;transition:border-color .18s,background-color .18s,color .18s,transform .18s}
.ferry-main-account .acct-address-card__actions button:hover{transform:translateY(-1px)}
.ferry-main-account .acct-address-card__actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.ferry-main-account .acct-address-card__actions .acct-address-edit:hover{border-color:#a9c7ec;background:#f3f8ff;color:#176fe6}
.ferry-main-account .acct-address-card__actions .acct-address-delete:hover{border-color:#edc0c5;background:#fff5f6;color:#aa3440}
.ferry-main-account .acct-address-form{margin-top:18px;padding:20px;border:1px solid #d9e5f1;border-radius:17px;background:#fbfdff;box-shadow:0 20px 54px -44px rgba(17,45,82,.5)}
.ferry-main-account .acct-address-form__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:17px}
.ferry-main-account .acct-address-form__head h3{margin:0;color:#17243a;font-size:19px;letter-spacing:-.025em}
.ferry-main-account .acct-address-form__head p{margin:4px 0 0;color:#748399;font-size:11px}
.ferry-main-account .acct-address-form__close{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #dbe5ef;border-radius:50%;background:#fff;color:#60738b;font:400 20px/1 inherit;cursor:pointer}
.ferry-main-account .acct-address-form .checkout-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ferry-main-account .acct-address-form .checkout-field{display:grid;gap:6px}
.ferry-main-account .acct-address-form .checkout-field span{color:#65768b;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ferry-main-account .acct-address-form :is(input,select,.country-select2__control){width:100%;min-height:44px;padding:0 12px;border:1px solid #d9e4ef;border-radius:10px;background:#fff;color:#23374f;font:600 13px/1.3 inherit;outline:0}
.ferry-main-account .acct-address-form :is(input,select,.country-select2__control):focus{border-color:#6ba5ef;box-shadow:0 0 0 3px rgba(40,120,240,.09)}
.ferry-main-account .acct-address-actions .btn{min-height:40px;border-radius:9px;font-size:12px;font-weight:700}
.ferry-main-account .acct-address-actions .btn[type=submit]:disabled{cursor:wait;opacity:.68}
.ferry-main-account #address-message{min-height:18px;margin:10px 0 0;color:#3b6d51;font-size:12px}

.checkout-page .checkout-payment-side{margin-top:2px;padding-top:18px;border-top:1px solid #dfe7f1}
.checkout-page .checkout-payment-side__head{margin-bottom:11px}
.checkout-page .checkout-payment-side__head strong{color:#172b43!important;font-size:16px!important;font-weight:780!important;letter-spacing:-.025em}
.checkout-page .checkout-payment-side__head small{padding:5px 8px;border-radius:7px;background:#edf7f1;color:#2d7750;font-size:8px!important;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.checkout-page .checkout-order .checkout-gateways{display:grid;gap:8px}
.checkout-page .checkout-order .checkout-gateway,.checkout-page .checkout-order .checkout-gateway--image-after{grid-template-columns:16px 70px minmax(0,1fr) auto 20px;gap:9px;min-height:58px;padding:9px 10px;border:1px solid #dce5ef;border-radius:12px;background:#fff;box-shadow:0 8px 22px -22px rgba(15,42,78,.35);transform:none}
.checkout-page .checkout-order .checkout-gateway--image-after{grid-template-columns:16px minmax(0,1fr) 70px auto 20px}
.checkout-page .checkout-order .checkout-gateway:not(.is-disabled):hover{border-color:#acc7e8;background:#fbfdff;transform:none}
.checkout-page .checkout-order .checkout-gateway:has(input:checked){border-color:#5f9bea;background:#f3f8ff;box-shadow:0 0 0 3px rgba(40,120,240,.08),inset 3px 0 #2878f0}
.checkout-page .checkout-order .checkout-gateway input{width:16px;height:16px;margin:0;accent-color:#2878f0}
.checkout-page .checkout-order .checkout-gateway__mark{display:grid;width:70px!important;height:34px!important;max-width:70px;max-height:34px;padding:0;border:0;border-radius:9px;background:transparent;overflow:hidden}
.checkout-page .checkout-order .checkout-gateway__mark>img,.checkout-page .checkout-order .checkout-gateway__mark>svg{width:100%;height:100%;object-fit:contain}
.checkout-page .checkout-order .checkout-gateway__copy{display:grid;gap:2px;min-width:0;overflow:hidden}
.checkout-page .checkout-order .checkout-gateway strong{display:block;overflow:hidden;color:#1f334b;font-size:12px!important;font-weight:760;line-height:1.25!important;text-overflow:ellipsis;white-space:nowrap}
.checkout-page .checkout-order .checkout-gateway small{display:block;overflow:hidden;margin:0;color:#6f8094!important;font-size:9.5px!important;line-height:1.3!important;text-overflow:ellipsis;white-space:nowrap}
.checkout-page .checkout-order .checkout-gateway>em{justify-self:end;padding:4px 6px;border-radius:6px;background:#fff2c9;color:#735709;font-size:8px!important;font-weight:850;letter-spacing:.04em;white-space:nowrap}
.checkout-page .checkout-order .checkout-gateway__selected{display:grid;place-items:center;width:20px;height:20px;border:1px solid #d5e0ec;border-radius:50%;background:#fff;color:transparent;font-size:10px;line-height:1}
.checkout-page .checkout-order .checkout-gateway:has(input:checked) .checkout-gateway__selected{border-color:#2878f0;background:#2878f0;color:#fff}
.checkout-page .checkout-order .checkout-gateway.is-disabled{opacity:.55;background:#f6f8fb;cursor:not-allowed}
@media(max-width:760px){.ferry-main-account .acct-address-grid,.ferry-main-account .acct-address-form .checkout-fields{grid-template-columns:1fr}.ferry-main-account .acct-address-head{align-items:flex-start;flex-direction:column}.ferry-main-account .acct-address-head .btn{width:100%}}
@media(max-width:540px){.checkout-page .checkout-order .checkout-gateway,.checkout-page .checkout-order .checkout-gateway--image-after{grid-template-columns:16px 54px minmax(0,1fr) 20px;gap:8px;padding:9px}.checkout-page .checkout-order .checkout-gateway--image-after{grid-template-columns:16px minmax(0,1fr) 54px 20px}.checkout-page .checkout-order .checkout-gateway__mark{width:54px!important;height:29px!important}.checkout-page .checkout-order .checkout-gateway>em{display:none}.ferry-main-account .acct-address-card header{align-items:center;flex-direction:row}.ferry-main-account .acct-address-card__actions{width:auto}}

/* Secure inline Stripe card form */
.checkout-page .stripe-payment-panel{margin-top:10px;padding:14px;border:1px solid #d8e4f4;border-radius:14px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);box-shadow:0 12px 28px rgba(23,55,97,.08)}
.checkout-page .stripe-payment-panel[hidden]{display:none!important}
.checkout-page .stripe-payment-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.checkout-page .stripe-payment-panel__head span{color:#14213d;font-size:14px;font-weight:800}
.checkout-page .stripe-payment-panel__head small{color:#54708f;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.checkout-page #stripe-card-element{min-height:44px;padding:13px 14px;border:1px solid #cfdaea;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(21,42,74,.04);transition:border-color .2s ease,box-shadow .2s ease}
.checkout-page #stripe-card-element.StripeElement--focus{border-color:#2878f0;box-shadow:0 0 0 3px rgba(40,120,240,.12)}
.checkout-page #stripe-card-element.StripeElement--invalid{border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.1)}
.checkout-page #stripe-payment-message{margin:9px 0 0;color:#54708f;font-size:12px;line-height:1.45}
.checkout-page #stripe-payment-message:empty{display:none}
.checkout-page #stripe-payment-message.is-error{color:#c82333}
@media(max-width:620px){.checkout-page .stripe-payment-panel{padding:12px;border-radius:12px}}

/* Premium sticky storefront header. */
body:not(:has(.admin-shell)) .header-sticky-spacer{display:block;width:100%;height:0;pointer-events:none}
body:not(:has(.admin-shell)) .app-header{position:sticky!important;top:0!important;z-index:500;transform:translate3d(0,0,0) scale(1);transform-origin:top center;will-change:transform;transition:transform .82s cubic-bezier(.22,.72,.18,1),box-shadow .55s ease,background-color .55s ease,border-color .55s ease}
body:not(:has(.admin-shell)) .app-header.is-scrolled{position:fixed!important;inset:0 0 auto;width:100%;border-bottom-color:rgba(174,193,216,.62);background:rgba(255,255,255,.94);box-shadow:0 14px 38px -25px rgba(13,39,76,.42);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);transform:translate3d(0,0,0) scale(.992)}
body:not(:has(.admin-shell)) .app-header.is-scroll-hidden{transform:translate3d(0,-108%,0) scale(.975)}
body:has(.checkout-page) #site-header{position:sticky!important;top:0!important;box-shadow:0 10px 32px -27px rgba(13,39,76,.32);border-bottom:1px solid #e3e9f1;background:rgba(255,255,255,.96)}
body:has(.checkout-page) #site-header.is-scrolled{position:fixed!important}
@media(prefers-reduced-motion:reduce){body:not(:has(.admin-shell)) .app-header{transition:none}body:not(:has(.admin-shell)) .app-header.is-scrolled,body:not(:has(.admin-shell)) .app-header.is-scroll-hidden{transform:none}}

/* Light premium template-6 footer: reuse the storefront container and blue palette. */
body[data-theme="template-6"] .ferry-main-footer{position:relative;margin-top:clamp(36px,5vw,60px);overflow:hidden;border-top:1px solid #dfe7ef;background:#fff;color:#18334f}
body[data-theme="template-6"] .ferry-main-footer::before{position:absolute;inset:0;content:"";background:radial-gradient(ellipse at 8% 0,rgba(40,125,208,.055),transparent 34%),radial-gradient(ellipse at 92% 100%,rgba(40,125,208,.035),transparent 32%);pointer-events:none}
body[data-theme="template-6"] .ferry-main-footer :is(.footer-service-strip,.footer-widgets,.footer-bottom){position:relative;z-index:1}
body[data-theme="template-6"] .ferry-main-footer :is(.footer-service-grid,.footer-widgets.container,.footer-bottom-inner){width:min(calc(100% - 48px),1280px);margin-inline:auto;padding-inline:0}
body[data-theme="template-6"] .ferry-main-footer .footer-service-strip{border-bottom:1px solid #e1eaf4;background:linear-gradient(110deg,#f4f8ff,#f8fbff 55%,#f2f7fd)}
body[data-theme="template-6"] .ferry-main-footer .footer-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-block:0}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item{display:flex;align-items:center;gap:14px;min-width:0;min-height:88px;padding:17px clamp(18px,2.6vw,32px);border-right:1px solid #dfe8f2}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item:first-child{padding-left:0}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item:last-child{border-right:0}
body[data-theme="template-6"] .ferry-main-footer .footer-service-icon{display:grid!important;flex:0 0 42px!important;width:42px;height:42px;place-items:center;border:1px solid #d7e7f8;border-radius:12px;background:#fff;box-shadow:0 3px 10px #17385a0a}
body[data-theme="template-6"] .ferry-main-footer .footer-service-icon svg{width:21px;height:21px;color:#287dd0;stroke:currentColor;stroke-width:1.8}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item>span:last-child{display:grid;gap:4px;min-width:0}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item strong{color:#18334f;font-size:13px;font-weight:750;letter-spacing:-.01em}
body[data-theme="template-6"] .ferry-main-footer .footer-service-item small{color:#6e8194;font-size:11px;line-height:1.45}
body[data-theme="template-6"] .ferry-main-footer .footer-grid{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(4,minmax(112px,.72fr));gap:clamp(24px,3vw,42px);padding-block:clamp(38px,4.5vw,54px)}
body[data-theme="template-6"] .ferry-main-footer .footer-brand{min-width:0;padding-right:clamp(0px,1.5vw,18px)}
body[data-theme="template-6"] .ferry-main-footer .footer-logo-link{display:inline-block;margin-bottom:15px}
body[data-theme="template-6"] .ferry-main-footer .footer-logo{display:block;width:180px;height:auto;margin:0;filter:none;opacity:1}
body[data-theme="template-6"] .ferry-main-footer .footer-brand>p{max-width:360px;margin:0;color:#526a80;font-size:12px;line-height:1.65}
body[data-theme="template-6"] .ferry-main-footer .footer-brand .footer-business-note{max-width:360px;margin-top:10px;padding:9px 11px;border:1px solid #e3edf7;border-left:3px solid #8db9e7;border-radius:0 8px 8px 0;background:#f8fbff;color:#6a7f93;font-size:11px}
body[data-theme="template-6"] .ferry-main-footer .footer-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
body[data-theme="template-6"] .ferry-main-footer .footer-contact>a{display:flex;align-items:center;gap:8px;min-height:42px;padding:7px 9px;border:1px solid #dfe7ef;border-radius:9px;background:#fff;color:#294760;text-decoration:none;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
body[data-theme="template-6"] .ferry-main-footer .footer-contact>a:hover{transform:translateY(-1px);border-color:#a9c9e9;background:#f5f9ff}
body[data-theme="template-6"] .ferry-main-footer .footer-contact svg{flex:0 0 16px;width:16px;height:16px;color:#287dd0}
body[data-theme="template-6"] .ferry-main-footer .footer-contact span{display:grid;gap:2px}
body[data-theme="template-6"] .ferry-main-footer .footer-contact small{color:#72869a;font-size:8px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
body[data-theme="template-6"] .ferry-main-footer .footer-contact strong{color:#294760;font-size:10px;font-weight:650;white-space:nowrap}
body[data-theme="template-6"] .ferry-main-footer .footer-links{display:flex;align-items:flex-start;flex-direction:column;gap:0}
body[data-theme="template-6"] .ferry-main-footer .footer-links h4{position:relative;margin:2px 0 14px;padding-bottom:9px;color:#18334f;font-size:11px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
body[data-theme="template-6"] .ferry-main-footer .footer-links h4::after{position:absolute;bottom:0;left:0;width:24px;height:2px;border-radius:2px;background:#287dd0;content:""}
body[data-theme="template-6"] .ferry-main-footer .footer-links a{position:relative;margin:0;padding:6px 0;color:#526a80;font-size:11.5px;line-height:1.4;text-decoration:none;transition:color .18s ease,transform .18s ease}
body[data-theme="template-6"] .ferry-main-footer .footer-links a:hover{transform:translateX(2px);color:#1764b6}
body[data-theme="template-6"] .ferry-main-footer .footer-bottom{padding:0;border:0;border-top:1px solid #e1e9f1;background:#f6f8fb;color:#657b90;font-size:10px;text-align:left}
body[data-theme="template-6"] .ferry-main-footer .footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding-block:12px}
body[data-theme="template-6"] .ferry-main-footer .footer-location{display:flex;align-items:center;gap:8px;text-align:right}
body[data-theme="template-6"] .ferry-main-footer .footer-location i{width:6px;height:6px;border-radius:50%;background:#21a66b;box-shadow:0 0 0 4px rgba(33,166,107,.1)}
@media(max-width:1050px){body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}body[data-theme="template-6"] .ferry-main-footer .footer-brand{grid-column:1/-1;padding-right:0}body[data-theme="template-6"] .ferry-main-footer .footer-brand>p,body[data-theme="template-6"] .ferry-main-footer .footer-brand .footer-business-note{max-width:620px}}
@media(max-width:760px){body[data-theme="template-6"] .ferry-main-footer .footer-service-grid{grid-template-columns:1fr}body[data-theme="template-6"] .ferry-main-footer .footer-service-item,body[data-theme="template-6"] .ferry-main-footer .footer-service-item:first-child{min-height:0;padding:13px 0;border-right:0;border-bottom:1px solid #e1eaf4}body[data-theme="template-6"] .ferry-main-footer .footer-service-item:last-child{border-bottom:0}body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;padding-block:34px}body[data-theme="template-6"] .ferry-main-footer .footer-brand{grid-column:1/-1}body[data-theme="template-6"] .ferry-main-footer .footer-bottom-inner{align-items:flex-start;flex-direction:column;min-height:0;padding-block:16px}body[data-theme="template-6"] .ferry-main-footer .footer-location{text-align:left}}
@media(max-width:480px){body[data-theme="template-6"] .ferry-main-footer .footer-grid{grid-template-columns:1fr;gap:23px}body[data-theme="template-6"] .ferry-main-footer .footer-brand{grid-column:auto}body[data-theme="template-6"] .ferry-main-footer .footer-contact{display:grid}body[data-theme="template-6"] .ferry-main-footer .footer-contact>a{width:100%}}

/* CALM checkout: normal simple flow. Decorative extras hidden, functions kept. */
.checkout-page .checkout-steps{display:none;}
.checkout-page .checkout-gateway__selected{display:none;}
.checkout-page .checkout-gateway em{display:none;}
.checkout-page .checkout-gateway img,.checkout-page .checkout-gateway__mark{display:none;}
.checkout-page .checkout-save-note{background:none;border:0;padding:8px 0 0;box-shadow:none;}
.checkout-page .checkout-security{background:none;border:0;box-shadow:none;padding:8px 0 0;}
.checkout-page .checkout-item__quantity button,.checkout-page .checkout-item__remove{box-shadow:none;}

/*===assets/themes/ferry-main/buyer-currency.css===*//* Currency notice shown with cart and checkout totals. The delivery country is
   set on the address, not in the header, so there is no picker to style. */
.currency-context-note { font-size: .8rem; color: var(--text-muted); margin-top: .65rem; }
.currency-context-note.error { color: var(--danger, #b42318); }

/*===assets/css/routes/cart/cart.css===*//* CART route only - top gap like checkout, breadcrumb everywhere, low soft shadow. */
.cart-page.cart-page{max-width:1200px;padding-block:12px 40px;}
.cart-page>.breadcrumb{margin:0 0 8px;padding-block:0;font-size:11px;}
.cart-panel,.cart-summary{box-shadow:0 2px 5px rgba(19,43,77,.06);}

/*===assets/themes/ferry-main/legal-pages.css===*/.legal-page {
    --legal-ink: #17283d;
    --legal-muted: #607086;
    --legal-line: #dfe6ef;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.5rem) 0 2rem;
    color: var(--legal-ink);
}

.legal-hero {
    max-width: 850px;
    padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

.legal-kicker {
    margin: 0 0 .75rem;
    color: #1768d4;
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.legal-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.legal-hero > p:not(.legal-kicker) {
    max-width: 760px;
    margin: 0;
    color: var(--legal-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.legal-meta span {
    padding: .38rem .68rem;
    border: 1px solid #cddbeb;
    border-radius: 999px;
    background: #f7faff;
    color: #42546b;
    font-size: .76rem;
    font-weight: 650;
}

.legal-page-nav {
    display: flex;
    gap: .5rem;
    margin-bottom: 2rem;
    padding: .5rem;
    overflow-x: auto;
    border: 1px solid var(--legal-line);
    border-radius: 12px;
    background: #fff;
    scrollbar-width: none;
}

.legal-page-nav::-webkit-scrollbar { display: none; }
.legal-page-nav a {
    flex: 0 0 auto;
    padding: .65rem .85rem;
    border-radius: 8px;
    color: #516177;
    font-size: .84rem;
    font-weight: 650;
    text-decoration: none;
}
.legal-page-nav a:hover { background: #f3f7fc; color: #1768d4; text-decoration: none; }
.legal-page-nav a[aria-current="page"] { background: #eaf3ff; color: #145cb9; }

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.legal-content {
    border-top: 1px solid var(--legal-line);
}

.legal-content section {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--legal-line);
}

.legal-content h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    letter-spacing: -.018em;
}

.legal-content p,
.legal-content li,
.legal-contact p,
.legal-contact address {
    color: var(--legal-muted);
    font-size: .95rem;
    line-height: 1.72;
}

.legal-content p { margin: .5rem 0 0; }
.legal-content ul,
.legal-content ol { margin: .75rem 0 0; padding-left: 1.3rem; }
.legal-content li + li { margin-top: .35rem; }
.legal-content a,
.legal-contact a { color: #1768d4; font-weight: 650; }
.legal-content address,
.legal-contact address { font-style: normal; }

.legal-contact {
    position: sticky;
    top: 1.5rem;
    padding: 1.35rem;
    border: 1px solid var(--legal-line);
    border-radius: 14px;
    background: #f7faff;
}

.legal-contact h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.legal-contact p { margin: 0 0 .8rem; }
.legal-contact hr { margin: 1.25rem 0; border: 0; border-top: 1px solid #d8e2ee; }
.legal-contact address { margin: .5rem 0; }
.legal-contact small { color: #78869a; }

@media (max-width: 760px) {
    .legal-page { padding-top: 2rem; }
    .legal-layout { grid-template-columns: 1fr; }
    .legal-contact { position: static; }
}