/* ===== PrimeVue-aligned design tokens (Aura / noir, monochrome) ===== */
:root{
--surface-0:#ffffff;
--surface-50:#fafafa;
--surface-100:#f4f4f5;
--surface-150:#ededee;
--surface-200:#e4e4e7;
--surface-300:#d4d4d8;
--surface-900:#18181b;
--surface-950:#101012;
--text:#18181b;
--text-muted:#6b6b73;
--text-faint:#9a9aa2;
--primary:#18181b;
--primary-hover:#000000;
--primary-contrast:#ffffff;
--ok:#1f8a5b; /* in stock */
--ok-soft:#eaf5ef;
--warn:#9a6a16;
--warn-soft:#f7f0e1;
--info:#3a4a8c;
--info-soft:#eceef7;
--radius:8px;
--radius-sm:6px;
--radius-lg:12px;
--border:1px solid var(--surface-200);
--ring:0 0 0 3px rgba(24,24,27,.12);
--shadow-sm:0 1px 2px rgba(16,16,18,.06), 0 1px 1px rgba(16,16,18,.04);
--shadow-md:0 6px 24px -8px rgba(16,16,18,.16), 0 2px 6px -2px rgba(16,16,18,.08);
--ui:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--container:1320px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:clip;}
body{
font-family:var(--ui);
color:var(--text);
background:var(--surface-0);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;}
/* ===================== HEADER ===================== */
header.site{
position:sticky;top:0;z-index:60;
background:rgba(255,255,255,.92);
backdrop-filter:saturate(160%) blur(8px);
border-bottom:var(--border);
}
.header-row{
display:flex;align-items:center;gap:26px;height:74px;
}
.header-row > *{min-width:0;}
/* brand / logo as text */
.brand{display:flex;align-items:baseline;gap:8px;flex-shrink:0;line-height:1;}
.brand .b1{font-weight:800;font-size:23px;letter-spacing:-.02em;}
.brand .b2{font-weight:500;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-muted);}
.brand .mark{
width:30px;height:30px;border-radius:7px;background:var(--surface-900);
color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;margin-right:2px;
}
/* nav */
nav.main{display:flex;align-items:center;gap:2px;}
nav.main > .item{position:relative;}
nav.main > .item > a{
display:inline-flex;align-items:center;gap:6px;
padding:9px 13px;border-radius:var(--radius-sm);
font-size:14.5px;font-weight:500;color:var(--text);
transition:background .14s,color .14s;
}
nav.main > .item > a .car{width:9px;height:9px;opacity:.5;transition:transform .18s;}
nav.main > .item:hover > a{background:var(--surface-100);}
nav.main > .item:hover > a .car{transform:rotate(180deg);}
nav.main > .item > a.active{color:var(--primary);font-weight:600;}
/* dropdown panel */
.panel{
position:absolute;top:calc(100% + 10px);left:0;
min-width:230px;background:var(--surface-0);
border:var(--border);border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);padding:8px;
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .15s,transform .15s,visibility .15s;
}
nav.main > .item:hover .panel{opacity:1;visibility:visible;transform:translateY(0);}
.panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
.panel a,
.panel .nav-link-btn{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:9px 11px;border-radius:var(--radius-sm);font-size:14px;color:var(--text);
transition:background .12s;
}
.panel .nav-link-btn{border:none;background:none;width:100%;font-family:inherit;cursor:pointer;text-align:left;}
.panel a:hover,
.panel .nav-link-btn:hover{background:var(--surface-100);}
.panel a .meta,
.panel .nav-link-btn .meta{font-family:var(--mono);font-size:11px;color:var(--text-faint);}
.panel .ph{padding:8px 11px 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-weight:600;}
/* search */
.search{display:flex;align-items:stretch;flex:1;max-width:520px;margin-left:auto;}
.search .field{
display:flex;align-items:center;flex:1;
border:var(--border);border-right:none;
border-radius:var(--radius) 0 0 var(--radius);
background:var(--surface-0);padding-left:13px;
transition:box-shadow .15s,border-color .15s;
}
.search .field:focus-within{box-shadow:var(--ring);border-color:var(--surface-300);}
.search .field svg{width:17px;height:17px;color:var(--text-faint);flex-shrink:0;}
.search input{
border:none;outline:none;background:transparent;
font-family:inherit;font-size:14px;padding:11px 10px;width:100%;min-width:0;color:var(--text);
}
.search select{
border:var(--border);border-left:none;border-right:none;
background:var(--surface-50);font-family:inherit;font-size:13px;
padding:0 10px;color:var(--text-muted);outline:none;cursor:pointer;
}
.search .go{
border:none;background:var(--primary);color:var(--primary-contrast);
border-radius:0 var(--radius) var(--radius) 0;
padding:0 16px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
transition:background .15s;
}
.search .go:hover{background:var(--primary-hover);}
.search .go svg{width:16px;height:16px;}
.icon-btn{
flex-shrink:0;width:42px;display:grid;place-items:center;
border:var(--border);border-left:none;background:var(--surface-50);color:var(--text-muted);
transition:background .14s,color .14s;
}
.icon-btn:hover{background:var(--surface-100);color:var(--text);}
.icon-btn.struct{border-radius:0;}
.icon-btn svg{width:18px;height:18px;}
/* utils (account, cart) */
.utils{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.util{
position:relative;width:42px;height:42px;border-radius:var(--radius-sm);
display:grid;place-items:center;color:var(--text);
transition:background .14s;
}
.util:hover{background:var(--surface-100);}
.util svg{width:21px;height:21px;}
.util .badge{
position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;
background:var(--primary);color:#fff;border-radius:9px;
font-size:10.5px;font-weight:700;display:grid;place-items:center;
border:2px solid var(--surface-0);
}
/* ===================== HERO ===================== */
.hero{
background:
linear-gradient(180deg,var(--surface-50),var(--surface-0));
border-bottom:var(--border);position:relative;overflow:hidden;
}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(var(--surface-150) 1px,transparent 1px),
linear-gradient(90deg,var(--surface-150) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(120% 80% at 80% 20%,#000,transparent 70%);
mask-image:radial-gradient(120% 80% at 80% 20%,#000,transparent 70%);
opacity:.5;
}
.hero .container{
position:relative;display:grid;grid-template-columns:1.05fr .95fr;
gap:56px;align-items:center;padding-top:64px;padding-bottom:64px;
}
.eyebrow{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-muted);margin-bottom:20px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--text-faint);}
.hero h1{
font-size:clamp(34px,3.6vw,52px);line-height:1.06;letter-spacing:-.025em;
font-weight:800;margin:0 0 18px;text-wrap:balance;
}
.hero p.lead{
font-size:17px;color:var(--text-muted);max-width:46ch;margin:0 0 28px;line-height:1.6;
}
.hero-search{
display:flex;align-items:stretch;max-width:1260px;
box-shadow:var(--shadow-sm);border-radius:var(--radius);
}
.hero-search .field{display:flex;align-items:center;flex:1;min-width:0;border:var(--border);border-right:none;border-radius:var(--radius) 0 0 var(--radius);background:#fff;padding-left:15px;}
.hero-search .field:focus-within{box-shadow:var(--ring);}
.hero-search .field svg{width:18px;height:18px;color:var(--text-faint);}
.hero-search input{border:none;outline:none;font-family:inherit;font-size:15px;padding:14px 12px;width:100%;min-width:0;}
.hero-search .go{border:none;background:var(--primary);color:#fff;padding:0 24px;font-weight:600;font-size:15px;border-radius:0 var(--radius) var(--radius) 0;display:flex;align-items:center;gap:8px;}
.hero-search .go:hover{background:var(--primary-hover);}
.hero-search .go svg{width:16px;height:16px;}
.hero-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap;}
.hero-stats .s .n{font-size:23px;font-weight:800;letter-spacing:-.02em;}
.hero-stats .s .l{font-size:13px;color:var(--text-muted);margin-top:2px;}
.hero-copy{min-width:0;}
.hero-visual{position:relative;min-width:0;}
.hero-visual image-slot{width:100%;height:420px;border:var(--border);box-shadow:var(--shadow-md);}
.hero-visual .tagchip{
position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);
backdrop-filter:blur(4px);border:var(--border);border-radius:var(--radius);
padding:10px 14px;font-size:12.5px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-sm);
}
.hero-visual .tagchip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);}
/* ===================== SECTION HEADINGS ===================== */
.section{padding:72px 0;}
.section.alt{background:var(--surface-50);border-top:var(--border);border-bottom:var(--border);}
.sec-head{text-align:center;margin-bottom:42px;}
.sec-head h2{font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;}
.sec-head p{font-size:16px;color:var(--text-muted);margin:0;}
.sec-head .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);display:block;margin-bottom:12px;}
/* ===================== FEATURED PRODUCTS / CAROUSEL ===================== */
.carousel{position:relative;}
.track{
display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:22px;
overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
padding:6px 2px 18px;
scrollbar-width:thin;scrollbar-color:var(--surface-300) transparent;
}
.track::-webkit-scrollbar{height:8px;}
.track::-webkit-scrollbar-thumb{background:var(--surface-300);border-radius:8px;}
.track::-webkit-scrollbar-track{background:transparent;}
.card{
scroll-snap-align:start;
background:var(--surface-0);border:var(--border);border-radius:var(--radius-lg);
display:flex;flex-direction:column;overflow:hidden;
transition:box-shadow .18s,border-color .18s,transform .18s;
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--surface-300);transform:translateY(-2px);}
.card-top{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0;}
.tag{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;letter-spacing:.01em;
}
.tag .d{width:6px;height:6px;border-radius:50%;}
.tag.ok{background:var(--ok-soft);color:var(--ok);}
.tag.ok .d{background:var(--ok);}
.tag.warn{background:var(--warn-soft);color:var(--warn);}
.tag.warn .d{background:var(--warn);}
.tag.info{background:var(--info-soft);color:var(--info);}
.tag.info .d{background:var(--info);}
.compare{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--text-faint);border:var(--border);background:var(--surface-0);}
.compare:hover{color:var(--text);background:var(--surface-100);}
.compare svg{width:15px;height:15px;}
/* structure image tile (cards) */
.struct-tile{
margin:10px 12px 4px;height:138px;border-radius:var(--radius);
border:1px solid var(--surface-200);
background:#ffffff;
overflow:hidden;display:block;
}
.struct-tile mol-struct{
width:100%;height:100%;display:block;
}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;}
.card .name{font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.01em;min-height:40px;margin-bottom:8px;}
.card .cas{font-family:var(--mono);font-size:12px;color:var(--text-muted);margin-bottom:14px;}
.card .cas b{color:var(--text);font-weight:500;}
.price{
border:var(--border);border-radius:var(--radius);background:var(--surface-50);
padding:11px 13px;margin-bottom:14px;
}
.price .pl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}
.price .pv{display:flex;align-items:baseline;gap:6px;margin-top:3px;}
.price .pv .amt{font-size:21px;font-weight:800;letter-spacing:-.02em;}
.price .pv .per{font-family:var(--mono);font-size:12px;color:var(--text-muted);}
.specs{display:flex;flex-direction:column;gap:7px;font-size:12px;margin-bottom:16px;}
.specs .r{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.specs .r .k{color:var(--text-muted);}
.specs .r .v{font-family:var(--mono);color:var(--text);}
.card-actions{margin-top:auto;display:flex;gap:8px;}
.btn{
border:var(--border);border-radius:var(--radius-sm);background:var(--surface-0);
color:var(--text);font-weight:600;font-size:13.5px;padding:10px 14px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;
transition:background .14s,border-color .14s,color .14s;
}
.btn svg{width:15px;height:15px;}
.btn:hover{background:var(--surface-100);}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn.primary:hover{background:var(--primary-hover);}
.btn.ghost{flex:0 0 auto;width:42px;padding:0;}
/* arrows */
.car-arrow{
position:absolute;top:42%;transform:translateY(-50%);z-index:5;
width:46px;height:46px;border-radius:50%;background:var(--surface-0);
border:var(--border);box-shadow:var(--shadow-md);display:grid;place-items:center;color:var(--text);
transition:background .14s,opacity .14s;
}
.car-arrow:hover{background:var(--surface-100);}
.car-arrow:disabled{opacity:.35;cursor:default;}
.car-arrow svg{width:20px;height:20px;}
.car-arrow.prev{left:-22px;}
.car-arrow.next{right:-22px;}
.sec-foot{text-align:center;margin-top:34px;}
/* ===================== FOOTER ===================== */
footer.site{background:var(--surface-950);color:#b6b6bf;}
.foot-main{
display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.2fr;gap:40px;
padding:64px 0 48px;
}
footer .brand .b1{color:#fff;}
footer .brand .b2{color:#8c8c97;}
footer .brand .mark{background:#fff;color:#101012;}
.foot-col{min-width:0;}
.foot-about{font-size:14px;line-height:1.6;color:#9a9aa6;margin:18px 0 22px;max-width:30ch;overflow-wrap:anywhere;}
.foot-q{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#71717f;margin-bottom:6px;}
.foot-phone{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.foot-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:600;margin:2px 0 18px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.foot-col a,
.foot-col .foot-link-btn{font-size:14px;color:#9a9aa6;transition:color .14s;}
.foot-col .foot-link-btn{border:none;background:none;padding:0;font-family:inherit;cursor:pointer;text-align:left;}
.foot-col a:hover,
.foot-col .foot-link-btn:hover{color:#fff;}
.foot-contact-btn{
display:block;margin-top:4px;border:none;background:none;padding:0;
font-family:inherit;font-size:14px;font-weight:600;color:#9a9aa6;
cursor:pointer;transition:color .14s;
}
.foot-contact-btn:hover{color:#fff;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;
padding:7px 11px;border:1px solid #2a2a30;border-radius:6px;color:#c7c7d0;background:#1a1a1e;
}
.foot-sub{margin-top:22px;}
.contact-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#9a9aa6;margin-bottom:14px;line-height:1.5;min-width:0;}
.contact-row svg{width:16px;height:16px;color:#71717f;flex-shrink:0;margin-top:2px;}
.contact-row span,.contact-row a,.contact-row .foot-link-btn{overflow-wrap:anywhere;word-break:break-word;min-width:0;}
.contact-row .foot-link-btn{border:none;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;}
.contact-row a:hover,
.contact-row .foot-link-btn:hover{color:#fff;}
.foot-bottom{border-top:1px solid #232329;padding:22px 0;}
.foot-bottom .container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot-bottom .cp{font-size:13px;color:#71717f;}
.foot-bottom .disc{font-size:12px;color:#5f5f6a;max-width:62ch;line-height:1.5;}
.foot-bottom .disc b{color:#9a9aa6;font-weight:600;}
/* ===================== MOBILE NAV COMPONENTS (base) ===================== */
/* hamburger */
.menu-toggle{
display:none;width:42px;height:42px;border:none;background:none;
border-radius:var(--radius-sm);place-items:center;color:var(--text);flex-shrink:0;
}
.menu-toggle:hover{background:var(--surface-100);}
.menu-toggle svg{width:24px;height:24px;}
/* mobile search strip (under header) */
.msearch{display:none;border-bottom:var(--border);background:var(--surface-0);}
.msearch .container{display:flex;padding-top:11px;padding-bottom:11px;}
.msearch .field{display:flex;align-items:center;flex:1;border:var(--border);border-right:none;border-radius:var(--radius) 0 0 var(--radius);padding-left:13px;background:#fff;min-width:0;}
.msearch .field:focus-within{box-shadow:var(--ring);border-color:var(--surface-300);}
.msearch .field svg{width:17px;height:17px;color:var(--text-faint);flex-shrink:0;}
.msearch input{border:none;outline:none;font-family:inherit;font-size:15px;padding:12px 10px;width:100%;min-width:0;background:transparent;}
.msearch .struct{flex-shrink:0;width:46px;border:var(--border);border-left:none;border-right:none;background:var(--surface-50);color:var(--text-muted);display:grid;place-items:center;}
.msearch .struct svg{width:18px;height:18px;}
.msearch .go{border:none;background:var(--primary);color:#fff;border-radius:0 var(--radius) var(--radius) 0;padding:0 16px;display:grid;place-items:center;flex-shrink:0;}
.msearch .go svg{width:18px;height:18px;}
/* off-canvas drawer */
.drawer-overlay{
position:fixed;inset:0;background:rgba(16,16,18,.5);backdrop-filter:blur(2px);
z-index:90;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.drawer-overlay.open{opacity:1;visibility:visible;}
.drawer{
position:fixed;top:0;right:0;height:100%;width:min(370px,87vw);
background:var(--surface-0);z-index:95;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:-12px 0 40px -12px rgba(16,16,18,.3);
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:var(--border);flex-shrink:0;}
.drawer-close{width:40px;height:40px;border:none;background:none;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:28px;line-height:1;color:var(--text);}
.drawer-close:hover{background:var(--surface-100);}
.drawer-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 18px;}
.drawer-nav .dl-item{display:block;padding:13px 14px;font-size:15.5px;font-weight:600;border-radius:var(--radius-sm);border-bottom:var(--border);}
.drawer-nav .dl-item:hover{background:var(--surface-100);}
.dl-group{border-bottom:var(--border);}
.dl-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;font-size:15.5px;font-weight:600;border-radius:var(--radius-sm);}
.dl-group summary::-webkit-details-marker{display:none;}
.dl-group summary:hover{background:var(--surface-100);}
.dl-group summary .chev{width:18px;height:18px;transition:transform .2s;color:var(--text-muted);flex-shrink:0;}
.dl-group[open] summary .chev{transform:rotate(180deg);}
.dl-sub{padding:0 6px 12px;display:flex;flex-direction:column;}
.dl-sub a,
.dl-sub .drawer-sub-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;font-size:14px;color:var(--text-muted);border-radius:var(--radius-sm);}
.dl-sub .drawer-sub-link{border:none;background:none;width:100%;font-family:inherit;cursor:pointer;text-align:left;}
.dl-sub a:hover,
.dl-sub .drawer-sub-link:hover{background:var(--surface-50);color:var(--text);}
.dl-sub a .meta,
.dl-sub .drawer-sub-link .meta{font-family:var(--mono);font-size:11px;color:var(--text-faint);}
body.no-scroll{overflow:hidden;}
/* ===================== NAMELINK (home featured) ===================== */
.card a.name.namelink{color:var(--text);display:block;}
.card a.name.namelink:hover{text-decoration:underline;text-underline-offset:2px;}
/* ===================== BREADCRUMB ===================== */
.breadcrumb{padding:20px 0 0;}
.breadcrumb .container{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted);}
.breadcrumb a:hover{color:var(--text);}
.breadcrumb .sep{color:var(--text-faint);}
.breadcrumb .cur{color:var(--text);font-family:var(--mono);font-size:12px;}
/* ===================== PRODUCT ===================== */
.product{padding:8px 0 72px;}
.product .ptitle{font-size:clamp(23px,2.3vw,32px);font-weight:800;letter-spacing:-.02em;margin:14px 0 8px;line-height:1.15;text-wrap:balance;}
.product .psub{font-family:var(--mono);font-size:12.5px;color:var(--text-muted);margin-bottom:28px;display:flex;gap:20px;flex-wrap:wrap;}
.product .psub b{color:var(--text);font-weight:500;}
.product-grid{display:grid;grid-template-columns:440px 1fr;gap:34px;align-items:start;}
.product-grid > *{min-width:0;}
.product-left,.product-right{min-width:0;}
.struct-box{position:relative;background:#fff;border:var(--border);border-radius:var(--radius-lg);padding:14px;}
.struct-box image-slot{width:100%;height:356px;}
.struct-box mol-struct{width:100%;height:356px;display:block;border-radius:var(--radius-sm);}
.struct-badge{position:absolute;top:24px;right:24px;z-index:3;}
.struct-cap{margin-top:12px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}
.sds-btn{margin-top:16px;width:100%;}
.info-table{margin-top:18px;border:var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.info-table .row{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;font-size:14px;}
.info-table .row:nth-child(odd){background:var(--surface-50);}
.info-table .row .k{color:var(--text-muted);min-width:0;}
.info-table .row{min-width:0;}
.info-table .row .v{font-family:var(--mono);color:var(--text);text-align:right;overflow-wrap:anywhere;word-break:break-word;min-width:0;}
.buybox{border:var(--border);border-radius:var(--radius-lg);overflow:hidden;min-width:0;max-width:100%;}
.buybox .origin{display:flex;align-items:center;flex-wrap:wrap;gap:6px 11px;padding:14px 18px;border-bottom:var(--border);font-size:14px;color:var(--text-muted);min-width:0;}
.buybox .origin svg{width:19px;height:19px;flex-shrink:0;}
.buybox .origin b{color:var(--text);font-weight:600;}
.buybox .origin .amt{margin-left:auto;font-family:var(--mono);color:var(--ok);font-weight:600;white-space:nowrap;}
.ptable .ph,.ptable .pr{display:grid;grid-template-columns:54px 1fr 120px 138px 132px;align-items:center;}
.ptable .ph{background:var(--surface-900);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:12px 18px;}
.ptable .pr{padding:11px 18px;border-bottom:var(--border);font-size:14px;cursor:pointer;transition:background .12s;}
.ptable .pr:last-child{border-bottom:none;}
.ptable .pr:hover{background:var(--surface-50);}
.ptable .pr.sel{background:var(--surface-100);}
.ptable .pr .size{font-weight:600;}
.ptable .pr .price{font-family:var(--mono);font-weight:600;border:none;background:none;padding:0;margin:0;border-radius:0;}
.ptable .pr .price.inq{color:var(--text-muted);font-weight:400;}
.ptable .avail{font-size:12.5px;color:var(--text-muted);}
.radio{width:18px;height:18px;border:2px solid var(--surface-300);border-radius:50%;display:grid;place-items:center;}
.pr.sel .radio{border-color:var(--primary);}
.pr.sel .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary);}
.qcell .dash{color:var(--text-faint);}
.pr:not(.sel) .qty{display:none;}
.pr.sel .qcell .dash{display:none;}
.qty{display:inline-flex;align-items:center;border:var(--border);border-radius:var(--radius-sm);overflow:hidden;width:fit-content;background:#fff;}
.qty button{width:30px;height:30px;border:none;background:var(--surface-0);color:var(--text);font-size:16px;display:grid;place-items:center;line-height:1;}
.qty button:hover{background:var(--surface-100);}
.qty input{width:40px;border:none;text-align:center;font-family:var(--mono);font-size:14px;outline:none;-moz-appearance:textfield;padding:0;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.buyfoot{display:flex;align-items:center;gap:16px;padding:18px;background:var(--surface-50);border-top:var(--border);}
.buyfoot .total .tl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);}
.buyfoot .total .tv{font-size:26px;font-weight:800;letter-spacing:-.02em;}
.buyfoot .acts{margin-left:auto;display:flex;gap:10px;}
.buyfoot .btn{flex:0 0 auto;padding:13px 18px;}
.buyfoot .btn.primary{padding:13px 26px;}
.tabs{margin-top:44px;}
.tabbar{display:flex;gap:4px;border-bottom:var(--border);}
.tabbar button{border:none;background:none;padding:14px 22px;font-size:14.5px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabbar button.active{color:var(--text);border-bottom-color:var(--primary);}
.tabbar button:hover{color:var(--text);}
.tabpanel{display:none;padding:28px 0 0;}
.tabpanel.active{display:block;}
.prop-table{border:var(--border);border-radius:var(--radius-lg);overflow:hidden;max-width:780px;}
.prop-table .row{display:grid;grid-template-columns:1fr 1fr;font-size:14px;}
.prop-table .row > div{padding:12px 18px;border-bottom:var(--border);min-width:0;}
.prop-table .row:nth-child(odd){background:var(--surface-50);}
.prop-table .row .k{color:var(--text-muted);}
.prop-table .row .v{font-family:var(--mono);overflow-wrap:anywhere;word-break:break-word;}
.prop-table .row.more{display:none;}
.prop-table.expanded .row.more{display:grid;}
.showmore{margin-top:16px;}
.showmore .btn{max-width:200px;}
.safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:980px;}
.safety h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:0 0 16px;}
.ghs-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.ghs-picto{width:56px;height:56px;flex-shrink:0;display:block;}
.ghs{width:50px;height:50px;border:2px solid #b4452f;transform:rotate(45deg);display:grid;place-items:center;border-radius:7px;flex-shrink:0;}
.ghs span{transform:rotate(-45deg);font-size:22px;color:#b4452f;font-weight:800;}
.signal{display:inline-block;border:1.5px solid #b4452f;color:#b4452f;font-weight:700;font-size:13px;padding:6px 14px;border-radius:6px;letter-spacing:.04em;margin-bottom:20px;}
.hcodes{display:flex;flex-direction:column;gap:11px;font-size:14px;}
.hcodes .h{display:flex;gap:12px;}
.hcodes .h .c{font-family:var(--mono);color:var(--text);font-weight:600;min-width:74px;}
.hcodes .h .t{color:var(--text-muted);}
.handling{font-size:14px;color:var(--text-muted);line-height:1.7;}
.handling b{color:var(--text);font-weight:600;}
.safety-empty{font-size:14px;color:var(--text-muted);line-height:1.7;margin:0;}
.safety-source{font-size:12px;color:var(--text-faint);line-height:1.55;margin:14px 0 0;}
.docs{display:flex;flex-direction:column;gap:10px;max-width:560px;}
.doc{display:flex;align-items:center;gap:14px;border:var(--border);border-radius:var(--radius);padding:14px 16px;transition:background .12s;background:#fff;}
button.doc{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;}
button.doc:disabled{opacity:.55;cursor:not-allowed;}
.doc:hover{background:var(--surface-50);}
.doc .ic{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--surface-100);display:grid;place-items:center;color:var(--text-muted);flex-shrink:0;}
.doc .ic svg{width:18px;height:18px;}
.doc .meta{flex:1;}
.doc .meta .t{font-weight:600;font-size:14px;display:block;}
.doc .meta .s{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);margin-top:2px;display:block;}
.doc .dl{color:var(--text-muted);font-size:13px;font-weight:600;}
.doc:hover .dl{color:var(--text);}
/* ============================================================
RESPONSIVE — breakpoints aligned with PrimeVue
xl ≥1200 · lg ≤1180 · md ≤768 · sm ≤600 · xs ≤420
============================================================ */
/* ---- ≤1180 : tablet landscape — collapse main nav to drawer ---- */
@media (max-width:1180px){
nav.main{display:none;}
.menu-toggle{display:grid;}
.search{max-width:360px;}
.hero .container{grid-template-columns:1fr;gap:38px;padding-top:54px;padding-bottom:54px;}
.hero-copy{max-width:680px;}
.hero-visual image-slot{height:360px;}
.hero-search{max-width:100%;}
.foot-main{grid-template-columns:repeat(3,1fr);gap:36px 32px;}
}
/* ---- ≤900 : tablet portrait — stack product page ---- */
@media (max-width:900px){
.product-grid{grid-template-columns:1fr;gap:28px;}
.struct-box image-slot{height:300px;}
.struct-box mol-struct{height:300px;}
.safety-grid{grid-template-columns:1fr;gap:26px;}
.prop-table,.docs{max-width:none;}
.ptable .ph,.ptable .pr{grid-template-columns:44px 1fr 100px 120px;}
.ptable .avail,.ptable .ph .h-avail{display:none;}
}
/* ---- ≤768 : md — mobile search strip, 2-col footer ---- */
@media (max-width:768px){
.container{padding:0 16px;}
.search{display:none;}
.msearch{display:block;}
.header-row{height:60px;gap:10px;}
.brand .b2{display:none;}
.section{padding:48px 0;}
.sec-head{margin-bottom:28px;}
.car-arrow{display:none;}
.track{grid-auto-columns:256px;}
.foot-main{grid-template-columns:1fr 1fr;gap:28px 24px;padding:44px 0 32px;}
.buyfoot{flex-wrap:wrap;gap:12px;}
.buyfoot .acts{margin-left:0;width:100%;}
.buyfoot .acts .btn{flex:1;}
.breadcrumb .container{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
.ptable .ph,.ptable .pr{grid-template-columns:40px 1fr 90px 110px;}
.buybox .origin .amt{margin-left:0;}
}
/* ---- ≤600 : sm — single column, price table as cards ---- */
@media (max-width:600px){
.container{padding:0 14px;}
.hero h1{font-size:28px;}
.hero p.lead{font-size:15px;}
.hero-stats{gap:20px;}
.hero-visual image-slot{height:220px;}
.hero-search{border-radius:var(--radius);}
.product .ptitle{font-size:22px;}
.product .psub{gap:5px 16px;font-size:11.5px;}
.tabbar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabbar::-webkit-scrollbar{display:none;}
.tabbar button{padding:12px 15px;white-space:nowrap;flex-shrink:0;}
/* price table → card layout */
.ptable .ph{display:none;}
.ptable .pr{
grid-template-columns:24px 1fr auto;
grid-template-areas:"r size price" "r avail qty";
column-gap:12px;row-gap:8px;padding:13px 14px;align-items:center;
}
.ptable .pr .radio{grid-area:r;align-self:start;margin-top:2px;}
.ptable .pr .size{grid-area:size;}
.ptable .pr .price{grid-area:price;text-align:right;}
.ptable .pr .avail{grid-area:avail;display:block;font-size:12px;}
.ptable .pr .qcell{grid-area:qty;justify-self:end;}
.foot-main{grid-template-columns:1fr;gap:28px;padding:36px 0 28px;}
.foot-about{max-width:none;}
.foot-bottom .container{flex-direction:column;align-items:center;gap:10px;text-align:center;}
/* centre all footer cols on mobile */
.foot-col{text-align:center;}
.foot-col ul{align-items:center;}
.foot-about{margin-left:auto;margin-right:auto;}
.chips{justify-content:center;}
.foot-sub{justify-content:center;}
.contact-row{justify-content:center;}
footer .brand{justify-content:center;}
/* block button otherwise spans the column and sits left of QUESTIONS / phone */
.foot-contact-btn{width:fit-content;margin-left:auto;margin-right:auto;text-align:center;}
}
/* ============================================================
CATALOG (In Stock listing)
============================================================ */
.catalog-head{padding:30px 0 22px;border-bottom:var(--border);background:linear-gradient(180deg,var(--surface-50),var(--surface-0));}
.catalog-head .container{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.catalog-head .ch-l{min-width:0;}
.catalog-head h1{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.022em;margin:0 0 10px;line-height:1.1;}
.catalog-head h1 .ic{
display:inline-flex;align-items:center;gap:8px;
background:var(--ok-soft);color:var(--ok);
font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;
vertical-align:middle;margin-right:10px;letter-spacing:.01em;
}
.catalog-head h1 .ic .d{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,138,91,.18);}
.catalog-head p.sub{margin:0;color:var(--text-muted);font-size:15px;max-width:62ch;}
.catalog-head .ch-r{display:flex;align-items:center;gap:10px;}
.ch-stat{
border:var(--border);border-radius:var(--radius);background:#fff;
padding:10px 16px;min-width:120px;
}
.ch-stat .v{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.ch-stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-top:5px;}
.catalog{padding:30px 0 64px;}
.cat-grid{display:grid;grid-template-columns:268px 1fr;gap:34px;align-items:start;}
.cat-grid > *{min-width:0;}
/* ---- sidebar / filters ---- */
.fside{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px;}
.fside .fhead{display:flex;align-items:center;justify-content:space-between;padding:0 2px;}
.fside .fhead h3{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text);}
.fside .fhead .clear{background:none;border:none;font-size:12.5px;color:var(--text-muted);padding:4px 6px;border-radius:var(--radius-sm);}
.fside .fhead .clear:hover{color:var(--text);background:var(--surface-100);}
.fgrp{border:var(--border);border-radius:var(--radius-lg);background:#fff;overflow:hidden;}
.fgrp summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:13px 15px;font-size:13.5px;font-weight:600;
}
.fgrp summary::-webkit-details-marker{display:none;}
.fgrp summary:hover{background:var(--surface-50);}
.fgrp summary .chev{width:16px;height:16px;color:var(--text-muted);transition:transform .18s;flex-shrink:0;}
.fgrp[open] summary .chev{transform:rotate(180deg);}
.fgrp summary .cnt{font-family:var(--mono);font-size:11px;color:var(--text-faint);font-weight:500;}
.fgrp .fbody{padding:6px 12px 12px;border-top:var(--border);}
/* searchable list inside filter group */
.fgrp .fsearch{
display:flex;align-items:center;gap:6px;border:var(--border);border-radius:var(--radius-sm);
padding:6px 9px;margin:6px 2px 8px;background:var(--surface-50);
}
.fgrp .fsearch svg{width:13px;height:13px;color:var(--text-faint);}
.fgrp .fsearch input{border:none;outline:none;background:transparent;font-family:inherit;font-size:13px;width:100%;color:var(--text);}
/* checkbox row inside filter */
.fopt{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;transition:background .12s;}
.fopt:hover{background:var(--surface-50);}
.fopt input[type="checkbox"],.fopt input[type="radio"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--surface-300);border-radius:4px;flex-shrink:0;display:grid;place-items:center;background:#fff;cursor:pointer;margin:0;}
.fopt input[type="radio"]{border-radius:50%;}
.fopt input[type="checkbox"]:checked{background:var(--primary);border-color:var(--primary);}
.fopt input[type="checkbox"]:checked::after{content:"";width:10px;height:10px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.fopt input[type="radio"]:checked{border-color:var(--primary);}
.fopt input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);}
.fopt .lbl{flex:1;min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fopt .n{font-family:var(--mono);font-size:11px;color:var(--text-faint);font-weight:500;flex-shrink:0;}
.fopt.disabled{opacity:.45;cursor:not-allowed;}
/* range slider (pure CSS) */
.frange{padding:8px 6px 4px;}
.frange .vals{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--text);margin-bottom:8px;}
.frange .vals span{background:var(--surface-100);padding:3px 8px;border-radius:var(--radius-sm);}
.frange input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;}
.frange input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--surface-200);border-radius:4px;}
.frange input[type=range]::-moz-range-track{height:4px;background:var(--surface-200);border-radius:4px;}
.frange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);margin-top:-6px;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.frange input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.fmore{background:none;border:none;color:var(--text-muted);font-size:12.5px;padding:6px;margin-top:2px;cursor:pointer;font-family:inherit;}
.fmore:hover{color:var(--text);}
.fopt.more-hidden{display:none;}
.fgrp.expanded .fopt.more-hidden{display:flex;}
/* ---- main column ---- */
.cmain{min-width:0;display:flex;flex-direction:column;gap:18px;}
.ctoolbar{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
background:#fff;border:var(--border);border-radius:var(--radius-lg);
padding:10px 14px;
}
.ctoolbar .count{font-size:13.5px;color:var(--text-muted);}
.ctoolbar .count b{color:var(--text);font-weight:700;}
.ctoolbar .spacer{flex:1;}
.ctoolbar .sortbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);}
.ctoolbar select.sort{
border:var(--border);border-radius:var(--radius-sm);
padding:7px 28px 7px 10px;font-family:inherit;font-size:13.5px;color:var(--text);
background:#fff url("data:image/svg+xml;utf8,") right 8px center/12px no-repeat;
appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;
}
.ctoolbar select.sort:focus{box-shadow:var(--ring);border-color:var(--surface-300);}
.view-toggle{display:flex;border:var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.view-toggle button{
width:34px;height:34px;border:none;background:#fff;color:var(--text-muted);
display:grid;place-items:center;cursor:pointer;
}
.view-toggle button + button{border-left:var(--border);}
.view-toggle button.active{background:var(--primary);color:#fff;}
.view-toggle button svg{width:15px;height:15px;}
.filter-btn{
display:none;align-items:center;gap:8px;
background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);
padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;
}
.filter-btn svg{width:15px;height:15px;}
.filter-btn .pill{
background:rgba(255,255,255,.22);font-family:var(--mono);font-size:11px;
padding:1px 7px;border-radius:999px;margin-left:2px;
}
/* active filter chips */
.achips{display:flex;flex-wrap:wrap;gap:8px;}
.achips:empty{display:none;}
.achip{
display:inline-flex;align-items:center;gap:8px;
background:var(--surface-100);border:var(--border);
border-radius:999px;padding:5px 6px 5px 11px;font-size:12.5px;color:var(--text);
}
.achip .x{
width:18px;height:18px;border-radius:50%;background:var(--surface-200);
display:grid;place-items:center;border:none;cursor:pointer;color:var(--text);
}
.achip .x:hover{background:var(--surface-300);}
.achip .x svg{width:9px;height:9px;}
.achip.clear-all{background:transparent;border:none;color:var(--text-muted);padding:5px 8px;}
.achip.clear-all:hover{color:var(--text);}
/* product grid */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:20px;}
.cgrid .card{height:100%;}
/* list view */
.cgrid.list{grid-template-columns:1fr;gap:12px;}
.cgrid.list .card{flex-direction:row;align-items:stretch;}
.cgrid.list .card-top{position:absolute;top:10px;left:14px;right:14px;padding:0;z-index:2;}
.cgrid.list .struct-tile{width:160px;height:auto;min-height:158px;margin:14px 0 14px 14px;flex-shrink:0;}
.cgrid.list .card-body{padding:14px 18px;flex:1;min-width:0;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:18px;align-items:center;}
.cgrid.list .card .name{min-height:0;margin-bottom:4px;}
.cgrid.list .card .cas{margin-bottom:0;}
.cgrid.list .price{margin:0;}
.cgrid.list .specs{margin:0;}
.cgrid.list .card-actions{margin:0;flex-direction:column;gap:6px;min-width:140px;}
.cgrid.list .card-actions .btn{flex:0 0 auto;}
/* pagination */
.pager{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:18px 4px 4px;flex-wrap:wrap;
}
.pager .info{font-size:13px;color:var(--text-muted);font-family:var(--mono);}
.pages{display:flex;align-items:center;gap:4px;}
.pages button{
min-width:36px;height:36px;padding:0 10px;
border:var(--border);background:#fff;border-radius:var(--radius-sm);
font-family:var(--mono);font-size:13px;color:var(--text);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.pages button:hover:not(.active):not(:disabled){background:var(--surface-100);}
.pages button.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.pages button:disabled{opacity:.4;cursor:default;}
.pages button svg{width:14px;height:14px;}
.pages .dots{padding:0 4px;color:var(--text-faint);font-family:var(--mono);font-size:13px;}
.perpage{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);}
.perpage select{
border:var(--border);border-radius:var(--radius-sm);padding:6px 24px 6px 9px;
font-family:inherit;font-size:13px;background:#fff;outline:none;cursor:pointer;
appearance:none;-webkit-appearance:none;
background:#fff url("data:image/svg+xml;utf8,") right 6px center/12px no-repeat;
}
/* mobile filter drawer */
.filter-drawer{
position:fixed;left:0;right:0;bottom:0;top:0;z-index:95;
background:var(--surface-0);display:flex;flex-direction:column;
transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.filter-drawer.open{transform:translateY(0);}
.filter-drawer-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:var(--border);flex-shrink:0;
}
.filter-drawer-head h3{margin:0;font-size:16px;font-weight:700;}
.filter-drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 14px;display:flex;flex-direction:column;gap:12px;}
.filter-drawer-foot{
flex-shrink:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
border-top:var(--border);background:var(--surface-50);
display:flex;gap:10px;
}
.filter-drawer-foot .btn{flex:1;}
/* ---- responsive overrides ---- */
@media (max-width:1180px){
.cat-grid{grid-template-columns:240px 1fr;gap:24px;}
.fside{top:80px;}
}
@media (max-width:900px){
.cat-grid{grid-template-columns:1fr;}
.fside{display:none;}
.filter-btn{display:inline-flex;}
.cgrid.list .card-body{grid-template-columns:1fr 1fr;}
.cgrid.list .card-actions{grid-column:1/-1;flex-direction:row;min-width:0;}
}
@media (max-width:768px){
.catalog{padding:20px 0 44px;}
.catalog-head{padding:22px 0 18px;}
.ch-stat{padding:8px 12px;min-width:0;}
.ch-stat .v{font-size:18px;}
.ctoolbar{padding:10px 12px;gap:10px;}
.ctoolbar .count{flex-basis:100%;}
.view-toggle{display:none;}
.cgrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.cgrid.list{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));}
.cgrid.list .card{flex-direction:column;}
.cgrid.list .card-top{position:static;padding:12px 12px 0;}
.cgrid.list .struct-tile{width:auto;margin:10px 12px 4px;height:120px;}
.cgrid.list .card-body{display:flex;flex-direction:column;padding:14px 16px 16px;}
.pager{justify-content:center;}
.pager .info,.perpage{flex-basis:100%;justify-content:center;text-align:center;}
.perpage{justify-content:center;}
}
@media (max-width:600px){
.catalog-head .container{flex-direction:column;align-items:flex-start;}
.catalog-head .ch-r{width:100%;}
.ch-stat{flex:1;}
.cgrid{grid-template-columns:repeat(2,1fr);gap:10px;}
.cgrid .card .name{font-size:13.5px;min-height:34px;margin-bottom:6px;}
.cgrid .card .cas{font-size:11px;margin-bottom:10px;}
.cgrid .struct-tile{height:108px;margin:8px 10px 4px;}
.cgrid .card-body{padding:10px 12px 12px;}
.cgrid .price{padding:8px 10px;margin-bottom:10px;}
.cgrid .price .pv .amt{font-size:17px;}
.cgrid .specs{display:none;}
.cgrid .card-actions .btn{padding:8px 10px;font-size:12.5px;}
.pages button{min-width:32px;height:32px;font-size:12px;}
}
/* ============================================================
CART (Shopping Cart)
============================================================ */
.cart-head{padding:30px 0 22px;border-bottom:var(--border);background:linear-gradient(180deg,var(--surface-50),var(--surface-0));}
.cart-head .container{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cart-head h1{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.022em;margin:0 0 6px;line-height:1.1;}
.cart-head .sub{margin:0;color:var(--text-muted);font-size:15px;}
.cart-head .sub b{color:var(--text);font-weight:600;}
.cart-head .step{
display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);
font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;
}
.cart-head .step .it{display:inline-flex;align-items:center;gap:6px;}
.cart-head .step .it.cur{color:var(--text);font-weight:600;}
.cart-head .step .it .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--surface-300);display:grid;place-items:center;font-size:10px;font-weight:700;background:#fff;}
.cart-head .step .it.cur .dot{background:var(--primary);color:#fff;border-color:var(--primary);}
.cart-head .step .it.done .dot{background:var(--ok);border-color:var(--ok);color:#fff;}
.cart-head .step .ln{width:24px;height:1px;background:var(--surface-300);}
.cart{padding:30px 0 64px;}
.cart-grid{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start;}
.cart-grid > *{min-width:0;}
/* ---- items column ---- */
.citems{background:#fff;border:var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.citems .chead{
display:grid;grid-template-columns:40px 80px minmax(0,1fr) 120px 90px;
align-items:center;gap:12px;padding:14px 20px;
background:var(--surface-50);border-bottom:var(--border);
font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;
}
.citems .chead .right{text-align:right;}
.citems .chead .center{text-align:center;}
.crow{
display:grid;grid-template-columns:40px 80px minmax(0,1fr) 120px 90px;
align-items:center;gap:12px;padding:18px 20px;border-bottom:var(--border);
transition:background .15s;
}
.crow:last-child{border-bottom:none;}
.crow:hover{background:var(--surface-50);}
.crow .del{
width:34px;height:34px;border-radius:var(--radius-sm);
border:var(--border);background:#fff;color:var(--text-muted);
display:grid;place-items:center;cursor:pointer;transition:all .14s;
}
.crow .del:hover{color:#b03a3a;border-color:#e8c5c5;background:#fcf3f3;}
.crow .del svg{width:15px;height:15px;}
.crow .struct{
width:84px;height:84px;border:var(--border);border-radius:var(--radius);
background:#fff;overflow:hidden;display:block;
}
.crow .struct mol-struct{width:100%;height:100%;display:block;}
.crow .info{min-width:0;}
.crow .info .nm{
font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.01em;color:var(--text);
display:block;margin-bottom:8px;
}
.crow .info .nm:hover{text-decoration:underline;text-underline-offset:2px;}
.crow .info .meta{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12px;color:var(--text-muted);margin-top:6px;}
.crow .info .meta .it{display:inline-flex;align-items:center;gap:5px;}
.crow .info .meta .k{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--text-faint);}
.crow .info .meta .v{font-family:var(--mono);font-size:12px;color:var(--text);}
.crow .info .meta .v.cas{color:var(--text);}
/* ---- size picker (inline in cart row) ---- */
.size-picker{margin-top:10px;}
.size-trigger,
.size-static{
display:inline-flex;align-items:center;gap:8px;
border:var(--border);border-radius:var(--radius-sm);
padding:7px 11px;font-family:var(--mono);font-size:13px;
background:#fff;color:var(--text);
white-space:nowrap;
}
.size-static{margin-top:10px;}
.size-trigger{
cursor:pointer;
transition:background .14s,border-color .14s;
}
.size-trigger:hover{background:var(--surface-100);}
.size-trigger.is-static{cursor:default;}
.size-trigger.is-static:hover{background:#fff;}
.size-trigger.open{border-color:var(--primary);box-shadow:var(--ring);}
.size-trigger .sv,
.size-static .sv{font-weight:600;}
.size-trigger .sp,
.size-static .sp{color:var(--text-muted);font-weight:400;}
.size-trigger .chev{width:12px;height:12px;color:var(--text-muted);transition:transform .18s;flex-shrink:0;}
.size-trigger.open .chev{transform:rotate(180deg);}
.size-list{
display:none;margin-top:6px;
border:var(--border);border-radius:var(--radius-sm);
overflow:hidden;background:#fff;
box-shadow:var(--shadow-sm);
}
.size-list.open{display:block;}
.size-row{
display:grid;grid-template-columns:16px 56px 72px 1fr;
align-items:center;gap:10px;padding:9px 12px;
cursor:pointer;transition:background .12s;
}
.size-row:hover{background:var(--surface-50);}
.size-row+.size-row{border-top:var(--border);}
.size-row.sel{background:var(--surface-50);}
.size-row .radio{
width:16px;height:16px;border-radius:50%;
border:1.5px solid var(--surface-300);flex-shrink:0;
display:grid;place-items:center;background:#fff;
transition:border-color .12s;
}
.size-row.sel .radio{border-color:var(--primary);}
.size-row.sel .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);}
.size-row .sz{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);}
.size-row .pr-v{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text);}
.size-row .av{font-size:11.5px;color:var(--text-muted);}
.size-row.sel .sz,.size-row.sel .pr-v{color:var(--primary);}
.size-row .av.ok{color:var(--ok);}
.size-row .av.warn{color:var(--warn);}
/* qty stepper */
.qty{display:inline-flex;align-items:center;border:var(--border);border-radius:var(--radius-sm);background:#fff;justify-self:center;}
.qty button{
width:30px;height:32px;border:none;background:transparent;color:var(--text);
display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-sm);
}
.qty button:hover:not(:disabled){background:var(--surface-100);}
.qty button:disabled{color:var(--text-faint);cursor:not-allowed;}
.qty button svg{width:12px;height:12px;}
.qty input{
width:42px;height:32px;border:none;outline:none;
text-align:center;font-family:var(--mono);font-size:14px;font-weight:600;
color:var(--text);background:transparent;
border-left:var(--border);border-right:var(--border);
-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.crow .total{text-align:right;font-size:15px;font-weight:700;color:var(--text);font-family:var(--mono);letter-spacing:-.01em;}
/* empty state */
.empty{padding:64px 24px;text-align:center;}
.empty .ic{
width:72px;height:72px;border-radius:50%;background:var(--surface-100);
display:grid;place-items:center;margin:0 auto 18px;color:var(--text-muted);
}
.empty .ic svg{width:32px;height:32px;}
.empty h3{margin:0 0 6px;font-size:18px;font-weight:700;}
.empty p{margin:0 0 18px;color:var(--text-muted);font-size:14px;}
/* foot row under items */
.cfoot{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:16px 4px 0;flex-wrap:wrap;
}
.cfoot .left{display:flex;align-items:center;gap:10px;}
.cfoot .left .btn{padding:10px 16px;}
.cfoot .left .btn svg{width:14px;height:14px;}
.cfoot .right{font-size:13px;color:var(--text-muted);}
/* ---- summary column ---- */
.summary{
position:sticky;top:90px;
background:#fff;border:var(--border);border-radius:var(--radius-lg);
overflow:hidden;
}
.summary .sh{
padding:18px 22px;border-bottom:var(--border);background:var(--surface-50);
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
font-weight:700;color:var(--text);
}
.summary .sb{padding:18px 22px;}
.summary .row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px;color:var(--text-muted);}
.summary .row .v{color:var(--text);font-family:var(--mono);font-size:13px;font-weight:500;}
.summary .row.disc .v{color:var(--ok);}
.summary hr{border:none;border-top:var(--border);margin:12px 0;}
.summary .tot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:7px 0 14px;}
.summary .tot .l{font-size:15px;font-weight:600;color:var(--text);}
.summary .tot .v{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-family:var(--ui);}
.summary .tot .sub{font-size:11px;color:var(--text-faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:2px;}
.summary .acts{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.summary .acts .btn{justify-content:center;padding:13px 16px;font-size:14px;}
.summary .acts .btn.primary svg{width:14px;height:14px;}
/* promo */
.promo{margin-top:14px;border-top:var(--border);padding-top:14px;}
.promo summary,
.promo .promo-toggle{
list-style:none;cursor:pointer;font-size:13px;color:var(--text);font-weight:600;
display:flex;align-items:center;justify-content:space-between;padding:4px 0;
width:100%;background:none;border:none;font-family:inherit;text-align:left;
}
.promo summary::-webkit-details-marker{display:none;}
.promo summary .chev,
.promo .promo-toggle .chev{width:14px;height:14px;color:var(--text-muted);transition:transform .18s;}
.promo[open] summary .chev,
.promo.open .promo-toggle .chev{transform:rotate(180deg);}
.promo .pin{display:flex;gap:6px;margin-top:10px;}
.promo input{
flex:1;border:var(--border);border-radius:var(--radius-sm);
padding:9px 11px;font-family:var(--mono);font-size:13px;outline:none;
text-transform:uppercase;letter-spacing:.04em;color:var(--text);
}
.promo input:focus{box-shadow:var(--ring);border-color:var(--surface-300);}
.promo .pin button{
background:var(--surface-100);border:var(--border);border-radius:var(--radius-sm);
padding:0 16px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
}
.promo .pin button:hover{background:var(--surface-200);}
.promo .applied{
margin-top:10px;display:flex;align-items:center;justify-content:space-between;
background:var(--ok-soft);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;
}
.promo .applied .code{font-family:var(--mono);font-weight:700;color:var(--ok);}
.promo .applied button{background:none;border:none;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;}
/* trust strip below summary */
.strust{
margin-top:14px;background:#fff;border:var(--border);border-radius:var(--radius-lg);
padding:14px 18px;display:flex;flex-direction:column;gap:11px;
}
.strust .it{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text);}
.strust .it svg{width:18px;height:18px;color:var(--text-muted);flex-shrink:0;}
.strust .it b{font-weight:600;}
.strust .it .d{display:block;font-size:11.5px;color:var(--text-muted);font-weight:400;line-height:1.4;}
/* ---- recently viewed / suggestions ---- */
.sugg{margin-top:48px;}
.sugg h2{font-size:20px;font-weight:800;letter-spacing:-.015em;margin:0 0 16px;}
.sugg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
/* ---- responsive ---- */
@media (max-width:1180px){
.cart-grid{grid-template-columns:1fr 320px;gap:24px;}
.crow,.citems .chead{grid-template-columns:38px 72px minmax(0,1fr) 112px 84px;gap:10px;}
.crow{padding:16px 18px;}
.crow .struct{width:72px;height:72px;}
.crow .total{font-size:13px;}
}
@media (max-width:1100px){
.cart-grid{grid-template-columns:1fr;}
.summary{position:static;}
.citems .chead{display:none;}
.crow{
grid-template-columns:96px 1fr auto;
grid-template-areas:
"del del del"
"img info info"
"img qty total";
gap:10px 14px;padding:14px;align-items:start;
}
.crow .del{grid-area:del;justify-self:end;}
.crow .struct{grid-area:img;width:96px;height:96px;align-self:start;flex-shrink:0;}
.crow .info{grid-area:info;align-self:start;}
.qty{grid-area:qty;justify-self:start;}
.crow .total{grid-area:total;font-size:16px;}
}
@media (max-width:600px){
.cart{padding:18px 0 44px;}
.cart-head{padding:20px 0 16px;}
.cart-head .step{display:none;}
.crow{grid-template-columns:80px 1fr auto;padding:12px;gap:8px 12px;}
.crow .struct{width:80px;height:80px;}
.size-trigger,.size-static{font-size:12px;padding:6px 9px;}
.crow .info .nm{font-size:14px;margin-bottom:6px;}
.crow .info .meta{gap:2px 12px;font-size:12px;}
.summary .sb{padding:16px 18px;}
.summary .tot .v{font-size:20px;}
.sugg-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}
/* ============================================================
AUTH (Sign in / Register)
============================================================ */
.auth-wrap{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;}
.auth-wrap > *{min-width:0;}
/* left brand panel */
.auth-side{
position:relative;overflow:hidden;
background:var(--surface-950);color:#e7e7ec;
padding:40px 72px;display:flex;flex-direction:column;justify-content:flex-start;gap:32px;
}
.auth-side::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(120% 90% at 20% 10%,#000,transparent 72%);
mask-image:radial-gradient(120% 90% at 20% 10%,#000,transparent 72%);
}
.auth-side .as-top,.auth-side .as-mid,.auth-side .as-foot{position:relative;z-index:1;}
.auth-side .brand .b1{color:#fff;}
.auth-side .brand .b2{color:#9a9aa6;}
.auth-side .brand .mark{background:#fff;color:#101012;}
.auth-side .as-mid{}
.auth-side .as-eyebrow{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:#9a9aa6;margin-bottom:22px;
}
.auth-side .as-eyebrow::before{content:"";width:24px;height:1px;background:#56565e;}
.auth-side h2{font-size:clamp(26px,2.4vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:800;margin:0 0 18px;color:#fff;}
.auth-side p{font-size:15.5px;line-height:1.65;color:#b6b6bf;max-width:42ch;margin:0;}
.auth-side .as-list{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px;}
.auth-side .as-list li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:#d4d4da;}
.auth-side .as-list svg{width:19px;height:19px;color:#fff;flex-shrink:0;margin-top:1px;}
.auth-side .as-foot{font-size:13px;color:#71717f;display:flex;gap:22px;flex-wrap:wrap;}
.auth-side .as-foot a{color:#9a9aa6;}
.auth-side .as-foot a:hover{color:#fff;}
/* right form panel */
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 72px;background:var(--surface-0);}
.auth-card{width:100%;max-width:430px;}
.auth-card .ac-head{margin-bottom:26px;}
.auth-card .ac-head h1{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;}
.auth-card .ac-head p{margin:0;color:var(--text-muted);font-size:14.5px;}
/* tab switch */
.auth-tabs{
display:flex;background:var(--surface-100);border-radius:var(--radius);
padding:4px;margin-bottom:28px;
}
.auth-tabs button{
flex:1;border:none;background:transparent;border-radius:var(--radius-sm);
padding:10px 14px;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-muted);
cursor:pointer;transition:all .16s;
}
.auth-tabs button.active{background:#fff;color:var(--text);box-shadow:var(--shadow-sm);}
/* form */
.auth-form{display:none;}
.auth-form.active{display:block;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-group{margin-bottom:16px;}
.field-group label{
display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:7px;
}
.field-group label .req{color:#b03a3a;font-weight:400;}
.field-group label .opt{color:var(--text-faint);font-weight:400;font-size:12px;}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap .lead{position:absolute;left:13px;color:var(--text-faint);display:grid;place-items:center;pointer-events:none;}
.input-wrap .lead svg{width:17px;height:17px;}
.auth-input{
width:100%;border:var(--border);border-radius:var(--radius-sm);
padding:11px 13px 11px 40px;font-family:inherit;font-size:14.5px;color:var(--text);
background:#fff;outline:none;transition:box-shadow .15s,border-color .15s;
}
.auth-input.no-icon{padding-left:13px;}
.auth-input::placeholder{color:var(--text-faint);}
.auth-input:focus{box-shadow:var(--ring);border-color:var(--surface-300);}
.auth-input.invalid{border-color:#d8a0a0;box-shadow:0 0 0 3px rgba(176,58,58,.12);}
.pw-toggle{
position:absolute;right:8px;width:32px;height:32px;border:none;background:none;
color:var(--text-faint);display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-sm);
}
.pw-toggle:hover{color:var(--text);background:var(--surface-100);}
.pw-toggle svg{width:18px;height:18px;}
.field-hint{font-size:12px;color:var(--text-muted);margin-top:6px;}
.field-err{font-size:12px;color:#b03a3a;margin-top:6px;display:none;}
.field-err.show{display:block;}
/* pw strength */
.pw-strength{display:flex;gap:5px;margin-top:8px;}
.pw-strength .bar{height:4px;flex:1;border-radius:2px;background:var(--surface-200);transition:background .2s;}
.pw-strength.s1 .bar:nth-child(1){background:#c0563f;}
.pw-strength.s2 .bar:nth-child(-n+2){background:#cc9a3a;}
.pw-strength.s3 .bar:nth-child(-n+3){background:#5a9e54;}
.pw-strength.s4 .bar{background:var(--ok);}
/* row: remember + forgot */
.auth-aux{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 22px;flex-wrap:wrap;}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--text);user-select:none;}
.remember input{
appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--surface-300);
border-radius:4px;background:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0;margin:0;transition:all .14s;
}
.remember input:checked{background:var(--primary);border-color:var(--primary);}
.remember input:checked::after{content:"";width:10px;height:10px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.forgot{font-size:13.5px;color:var(--text);font-weight:600;}
.forgot:hover{text-decoration:underline;text-underline-offset:2px;}
.auth-submit{
width:100%;border:none;background:var(--primary);color:#fff;
border-radius:var(--radius-sm);padding:13px 16px;font-family:inherit;font-size:15px;font-weight:600;
cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;
}
.auth-submit:hover{background:var(--primary-hover);}
.auth-submit svg{width:16px;height:16px;}
/* terms */
.auth-terms{display:flex;align-items:flex-start;gap:9px;margin:2px 0 20px;font-size:12.5px;color:var(--text-muted);line-height:1.5;cursor:pointer;user-select:none;}
.auth-terms input{
appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--surface-300);
border-radius:4px;background:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0;margin:1px 0 0;transition:all .14s;
}
.auth-terms input:checked{background:var(--primary);border-color:var(--primary);}
.auth-terms input:checked::after{content:"";width:10px;height:10px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.auth-terms a{color:var(--text);font-weight:600;}
.auth-terms a:hover{text-decoration:underline;}
/* divider + social */
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-faint);font-size:12.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--surface-200);}
.auth-sso{display:flex;gap:12px;}
.auth-sso button{
flex:1;border:var(--border);background:#fff;border-radius:var(--radius-sm);
padding:11px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);
display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:background .14s;
}
.auth-sso button:hover{background:var(--surface-50);}
.auth-sso button svg{width:17px;height:17px;}
.auth-switch{text-align:center;margin-top:24px;font-size:14px;color:var(--text-muted);}
.auth-switch button{background:none;border:none;color:var(--text);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;padding:0;}
.auth-switch button:hover{text-decoration:underline;text-underline-offset:2px;}
.auth-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-muted);margin-bottom:26px;}
.auth-back:hover{color:var(--text);}
.auth-back svg{width:15px;height:15px;}
/* form-level success / error banner */
.auth-banner{
display:none;align-items:center;gap:10px;border-radius:var(--radius-sm);
padding:11px 14px;font-size:13.5px;margin-bottom:18px;
}
.auth-banner.show{display:flex;}
.auth-banner.ok{background:var(--ok-soft);color:var(--ok);}
.auth-banner.err{background:#fbf0f0;color:#b03a3a;}
.auth-banner svg{width:17px;height:17px;flex-shrink:0;}
/* forgot-password mini view */
.auth-form .forgot-intro{font-size:14px;color:var(--text-muted);line-height:1.6;margin:0 0 22px;}
@media (max-width:980px){
.auth-side{padding:32px 48px;}
.auth-main{padding:32px 48px;}
}
@media (max-width:860px){
.auth-wrap{grid-template-columns:1fr;}
.auth-side{display:none;}
.auth-main{padding:40px 24px 56px;}
.auth-card{max-width:440px;}
}
@media (max-width:480px){
.auth-main{padding:28px 18px 44px;}
.auth-card .ac-head h1{font-size:23px;}
.frow{grid-template-columns:1fr;gap:0;}
.auth-sso{flex-direction:column;}
}
/* ============================================================
CHECKOUT (Address selection)
============================================================ */
.co{padding:30px 0 64px;}
.co-grid{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start;}
.co-grid > *{min-width:0;}
.co-main{display:flex;flex-direction:column;gap:22px;}
.co-card{background:#fff;border:var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.co-card .cc-head{
display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:var(--border);background:var(--surface-50);
}
.co-card .cc-head .num{
width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0;
}
.co-card .cc-head h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;}
.co-card .cc-head .edit{margin-left:auto;font-size:13px;color:var(--text-muted);font-weight:600;background:none;border:none;cursor:pointer;}
.co-card .cc-head .edit:hover{color:var(--text);}
.co-card .cc-body{padding:20px 22px;}
/* address radio cards */
.addr-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.addr-opt{
position:relative;border:1.5px solid var(--surface-200);border-radius:var(--radius);
padding:16px 16px 16px 44px;cursor:pointer;transition:border-color .15s,background .15s;
}
.addr-opt:hover{border-color:var(--surface-300);background:var(--surface-50);}
.addr-opt.sel{border-color:var(--primary);background:var(--ok-soft);}
.addr-opt input{position:absolute;opacity:0;pointer-events:none;}
.addr-opt .radio{
position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;
border:1.5px solid var(--surface-300);background:#fff;display:grid;place-items:center;transition:border-color .15s;
}
.addr-opt.sel .radio{border-color:var(--primary);}
.addr-opt.sel .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary);}
.addr-opt .tag{
display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
color:var(--text-faint);background:var(--surface-100);padding:2px 7px;border-radius:4px;margin-bottom:8px;
}
.addr-opt.sel .tag{background:#fff;color:var(--ok);}
.addr-opt .tag{display:block;width:max-content;max-width:100%;}
.addr-opt .nm{display:block;font-size:14px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em;}
.addr-opt .ln{display:block;font-size:13px;color:var(--text-muted);line-height:1.5;}
.addr-opt .badge-def{
position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;
color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;
}
.addr-add{
border:1.5px dashed var(--surface-300);border-radius:var(--radius);
display:flex;align-items:center;justify-content:center;gap:8px;
padding:16px;cursor:pointer;color:var(--text-muted);font-size:13.5px;font-weight:600;
transition:border-color .15s,color .15s,background .15s;min-height:96px;
}
.addr-add:hover{border-color:var(--primary);color:var(--text);background:var(--surface-50);}
.addr-add svg{width:17px;height:17px;}
/* new-address form */
.addr-form{margin-top:18px;padding-top:18px;border-top:var(--border);display:none;}
.addr-form.open{display:block;}
.co-frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.co-frow.three{grid-template-columns:1fr 1fr 1fr;}
.co-field{margin-bottom:14px;}
.co-field.full{grid-column:1/-1;}
.co-field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.co-field label .req{color:#b03a3a;font-weight:400;}
.co-input,.co-select{
width:100%;border:var(--border);border-radius:var(--radius-sm);
padding:10px 12px;font-family:inherit;font-size:14px;color:var(--text);background:#fff;
outline:none;transition:box-shadow .15s,border-color .15s;
}
.co-select{
appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
background:#fff url("data:image/svg+xml;utf8,") right 9px center/13px no-repeat;
}
.co-input:focus,.co-select:focus{box-shadow:var(--ring);border-color:var(--surface-300);}
.co-input.invalid{border-color:#d8a0a0;box-shadow:0 0 0 3px rgba(176,58,58,.1);}
.co-err{font-size:12px;color:#b03a3a;margin-top:5px;display:none;}
.co-err.show{display:block;}
/* same-as-shipping toggle */
.co-check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text);cursor:pointer;user-select:none;margin-bottom:4px;}
.co-check input{
appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--surface-300);
border-radius:5px;background:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0;margin:0;transition:all .14s;
}
.co-check input:checked{background:var(--primary);border-color:var(--primary);}
.co-check input:checked::after{content:"";width:11px;height:11px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
/* delivery method radios */
.ship-opt{
display:flex;align-items:center;gap:14px;border:1.5px solid var(--surface-200);border-radius:var(--radius);
padding:14px 16px 14px 44px;position:relative;cursor:pointer;transition:border-color .15s,background .15s;
}
.ship-opt + .ship-opt{margin-top:10px;}
.ship-opt:hover{border-color:var(--surface-300);}
.ship-opt.sel{border-color:var(--primary);background:var(--ok-soft);}
.ship-opt input{position:absolute;opacity:0;pointer-events:none;}
.ship-opt .radio{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:1.5px solid var(--surface-300);background:#fff;display:grid;place-items:center;}
.ship-opt.sel .radio{border-color:var(--primary);}
.ship-opt.sel .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary);}
.ship-opt .si{flex:1;min-width:0;}
.ship-opt .si .t{display:block;font-size:14px;font-weight:700;margin-bottom:2px;}
.ship-opt .si .d{display:block;font-size:12.5px;color:var(--text-muted);line-height:1.45;}
.ship-opt .pr{font-family:var(--mono);font-size:14px;font-weight:600;}
.ship-opt .pr.free{color:var(--ok);}
/* mini order line in summary */
.co-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.co-li{display:flex;gap:12px;align-items:center;}
.co-li .th{width:46px;height:46px;border:var(--border);border-radius:var(--radius-sm);background:#fff;overflow:hidden;flex-shrink:0;position:relative;}
.co-li .th mol-struct{width:100%;height:100%;}
.co-li .th .q{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--surface-900);color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;display:grid;place-items:center;}
.co-li .ci{flex:1;min-width:0;}
.co-li .ci .n{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.co-li .ci .s{font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-top:2px;}
.co-li .lp{font-family:var(--mono);font-size:13px;font-weight:600;flex-shrink:0;}
.co-note{
display:flex;gap:10px;background:var(--surface-50);border:var(--border);border-radius:var(--radius);
padding:13px 15px;font-size:12.5px;color:var(--text-muted);line-height:1.5;margin-top:4px;
}
.co-note svg{width:17px;height:17px;flex-shrink:0;color:var(--text-faint);margin-top:1px;}
.place-order{
width:100%;border:none;background:var(--primary);color:#fff;border-radius:var(--radius-sm);
padding:14px 16px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;margin-top:6px;
}
.place-order:hover{background:var(--primary-hover);}
.place-order svg{width:16px;height:16px;}
.co-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text-muted);}
.co-back:hover{color:var(--text);}
.co-back svg{width:15px;height:15px;}
/* ---- confirmation overlay ---- */
.confirm-overlay{
position:fixed;inset:0;z-index:120;background:rgba(16,16,18,.55);
display:flex;align-items:center;justify-content:center;padding:24px;
opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.confirm-overlay.open{opacity:1;visibility:visible;}
.confirm-modal{
background:#fff;border-radius:var(--radius-lg);max-width:480px;width:100%;
padding:40px 40px 32px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3);
transform:translateY(12px) scale(.98);transition:transform .28s cubic-bezier(.34,1.4,.5,1);
}
.confirm-overlay.open .confirm-modal{transform:translateY(0) scale(1);}
.confirm-modal .ic{
width:74px;height:74px;border-radius:50%;background:var(--ok-soft);color:var(--ok);
display:grid;place-items:center;margin:0 auto 22px;
}
.confirm-modal .ic svg{width:38px;height:38px;}
.confirm-modal h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;}
.confirm-modal p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0 0 22px;}
.confirm-modal .order-ref{
display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--surface-50);border:var(--border);border-radius:var(--radius);
padding:12px 16px;margin-bottom:14px;font-size:13.5px;color:var(--text);
}
.confirm-modal .order-ref b{font-family:var(--mono);letter-spacing:.04em;}
.confirm-modal .next{
text-align:left;background:var(--surface-50);border-radius:var(--radius);padding:16px 18px;margin-bottom:24px;
}
.confirm-modal .next .nt{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:10px;}
.confirm-modal .next ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.confirm-modal .next li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text);line-height:1.45;}
.confirm-modal .next li svg{width:15px;height:15px;color:var(--ok);flex-shrink:0;margin-top:2px;}
.confirm-modal .ca{display:flex;gap:10px;}
.confirm-modal .ca .btn{flex:1;justify-content:center;}
@media (max-width:980px){
.co-grid{grid-template-columns:1fr 320px;gap:24px;}
}
@media (max-width:860px){
.co-grid{grid-template-columns:1fr;}
.co-summary-wrap{position:static;}
}
@media (max-width:560px){
.co{padding:18px 0 44px;}
.addr-list{grid-template-columns:1fr;}
.co-frow,.co-frow.three{grid-template-columns:1fr;gap:0;}
.confirm-modal{padding:32px 24px 26px;}
.confirm-modal .ca{flex-direction:column;}
}
/* ---- ≤420 : xs — small phones ---- */
@media (max-width:420px){
.brand .b1{font-size:19px;}
.brand .mark{width:26px;height:26px;font-size:13px;}
.hero h1{font-size:24px;}
.hero-search .go{padding:0 14px;font-size:14px;}
.track{grid-auto-columns:224px;}
.buyfoot{padding:14px;}
.buyfoot .total .tv{font-size:22px;}
.buyfoot .acts{flex-direction:column;gap:8px;}
.buyfoot .acts .btn{width:100%;flex:none;}
.prop-table .row{grid-template-columns:1fr;}
.prop-table .row > div{padding:9px 14px;}
.prop-table .row .k{padding-bottom:2px;border-bottom:none;}
.prop-table .row .v{padding-top:0;}
.struct-box image-slot{height:200px;}
.struct-box mol-struct{height:200px;}
}