:root{
--primary:#0061ff;
--primary2:#2e7cff;
--ink:#10234b;
--muted:#71809b;
--bg:#f5f8fc;
--card:#fff;
--line:#e3ebf7;
--soft:#f6f9ff;
--shadow:0 18px 50px rgba(25,57,100,.09);
--radius:20px
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:linear-gradient(180deg,#fff 0,#f5f8fc 100%);
color:var(--ink);
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}
a{color:inherit}
button,input{font:inherit}

.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(255,255,255,.94);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line)
}

.header-inner{
max-width:1600px;
margin:auto;
min-height:82px;
padding:14px 24px;
display:grid;
grid-template-columns:250px minmax(300px,1fr) 100px;
gap:25px;
align-items:center
}

.brand{
display:flex;
align-items:center;
gap:11px;
text-decoration:none;
font-size:20px;
font-weight:850;
letter-spacing:-.5px
}

.brand b{color:var(--primary)}
.brand small{
display:block;
color:#8c99ad;
font-size:8px;
letter-spacing:1.5px;
margin-top:2px
}

.brand-mark{
width:42px;
height:42px;
border-radius:13px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;
box-shadow:0 10px 24px rgba(0,97,255,.24);
flex:none
}

.search{
height:50px;
display:flex;
align-items:center;
gap:10px;
background:#f6f9fd;
border:1px solid var(--line);
border-radius:15px;
padding:5px 6px 5px 16px;
transition:.2s
}

.search:focus-within{
background:#fff;
border-color:#9fc2ff;
box-shadow:0 0 0 4px rgba(0,97,255,.08)
}

.search>i{color:var(--primary)}
.search input{
min-width:0;
flex:1;
border:0;
outline:0;
background:transparent;
padding:0 8px;
color:var(--ink);
font-size:14px
}

.search button,
.hero-search button{
border:0;
background:var(--primary);
color:#fff;
border-radius:11px;
padding:12px 20px;
font-weight:850;
cursor:pointer;
transition:.2s
}

.search button:hover,
.hero-search button:hover{
transform:translateY(-1px);
box-shadow:0 9px 22px rgba(0,97,255,.24)
}

.header-actions{
display:flex;
justify-content:flex-end;
gap:8px
}

.head-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:13px;
color:#63738d;
text-decoration:none;
transition:.2s
}

.head-icon:hover{
color:var(--primary);
border-color:#b8d1ff;
transform:translateY(-2px)
}

.nav{border-top:1px solid #f0f3f7}
.nav-inner{
max-width:1600px;
margin:auto;
padding:0 24px;
display:flex;
gap:3px;
overflow:auto
}
.nav a{
white-space:nowrap;
text-decoration:none;
color:#526177;
font-size:13px;
font-weight:750;
padding:14px 13px;
border-radius:9px
}
.nav a:hover{
color:var(--primary);
background:#f1f6ff
}

.container{
max-width:1600px;
margin:auto;
padding:34px 24px 60px
}

.hero{
position:relative;
overflow:hidden;
border-radius:28px;
background:linear-gradient(135deg,#0061ff 0%,#0052d8 100%);
color:#fff;
padding:48px;
margin-bottom:30px;
box-shadow:0 24px 60px rgba(0,97,255,.18)
}

.hero:before{
content:"";
position:absolute;
width:450px;
height:450px;
right:-150px;
top:-270px;
border-radius:50%;
background:rgba(255,255,255,.13)
}

.hero:after{
content:"";
position:absolute;
width:240px;
height:240px;
left:-100px;
bottom:-160px;
border-radius:50%;
background:rgba(255,255,255,.08)
}

.hero-content{position:relative;z-index:2}
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 13px;
border-radius:999px;
background:rgba(255,255,255,.13);
font-size:12px;
font-weight:800
}

.hero h1{
margin:18px 0 12px;
font-size:clamp(34px,4.5vw,62px);
line-height:1.02;
letter-spacing:-2.5px
}

.hero h1 span{color:#dceaff}
.hero p{
max-width:760px;
margin:0;
color:#dbe8ff;
line-height:1.65;
font-size:15px
}

.hero-search{
max-width:800px;
margin-top:26px;
display:flex;
gap:8px;
padding:7px;
border-radius:16px;
background:#fff;
box-shadow:0 15px 35px rgba(0,20,70,.15)
}

.hero-search-input{
display:flex;
align-items:center;
gap:10px;
flex:1;
min-width:0;
padding-left:10px
}

.hero-search-input i{color:var(--primary)}
.hero-search input{
width:100%;
border:0;
outline:0;
padding:12px 8px;
font-size:15px;
color:var(--ink)
}

.hero-search button{
padding:14px 22px;
border-radius:12px
}

.category-hero{padding:38px 44px}
.category-hero h1{font-size:clamp(32px,4vw,54px)}

.section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:15px;
margin:30px 0 15px
}

.section-head h2{
font-size:25px;
letter-spacing:-.7px;
margin:0
}

.section-head p{
margin:6px 0 0;
font-size:13px;
color:var(--muted)
}

.result-tools{display:flex;gap:8px}
.sort-btn{
border:1px solid var(--line);
background:#fff;
color:#5c6d86;
border-radius:11px;
padding:10px 13px;
font-size:12px;
font-weight:800;
cursor:pointer
}
.sort-btn.active{
color:var(--primary);
border-color:#bdd2ff;
background:#f2f6ff
}

.products{
display:grid;
grid-template-columns:repeat(10,minmax(0,1fr));
gap:10px;
align-items:stretch
}

.product-card{
position:relative;
min-width:0;
height:100%;
display:flex;
flex-direction:column;
overflow:hidden;
background:#fff;
border:1px solid var(--line);
border-radius:17px;
text-decoration:none;
transition:transform .22s,box-shadow .22s,border-color .22s;
cursor:pointer
}

.product-card:hover{
transform:translateY(-4px);
border-color:#c7d9ff;
box-shadow:var(--shadow)
}

.product-img{
position:relative;
height:155px;
min-height:155px;
padding:12px;
display:grid;
place-items:center;
background:linear-gradient(180deg,#fbfcff,#f4f8fd);
border-bottom:1px solid #edf2f8
}

.product-img img{
display:block;
width:100%;
height:100%;
object-fit:contain
}

.image-placeholder{
width:100%;
height:100%;
display:grid;
place-items:center;
color:#b8c4d4;
font-size:34px
}

.product-info{
padding:12px;
display:flex;
flex-direction:column;
min-height:125px;
overflow:hidden
}

.product-title{
font-size:12px;
line-height:1.4;
font-weight:800;
margin:0;
height:35px;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical
}

.price{
margin-top:auto;
padding-top:10px;
font-size:15px;
line-height:1.2;
font-weight:950;
color:var(--primary);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.go{
margin-top:7px;
font-size:10px;
font-weight:800;
color:#70809a;
display:flex;
align-items:center;
gap:5px
}

.go i{color:var(--primary)}
.best-badge{
position:absolute;
left:9px;
top:9px;
display:inline-flex;
align-items:center;
gap:4px;
padding:6px 8px;
border-radius:999px;
background:var(--primary);
color:#fff;
font-size:9px;
font-weight:850;
box-shadow:0 7px 18px rgba(0,97,255,.25)
}

.loading,
.empty,
.error-box{
padding:36px;
text-align:center;
background:#fff;
border:1px solid var(--line);
border-radius:20px;
color:var(--muted)
}

.loading{
display:flex;
flex-direction:column;
align-items:center;
gap:8px
}

.loading strong{color:var(--ink);font-size:14px}
.loading span{font-size:12px}

.spinner{
width:32px;
height:32px;
border:3px solid #dce7fa;
border-top-color:var(--primary);
border-radius:50%;
animation:spin .75s linear infinite;
margin-bottom:4px
}

@keyframes spin{to{transform:rotate(360deg)}}

.empty-icon{
width:48px;
height:48px;
display:grid;
place-items:center;
margin:0 auto 12px;
border-radius:15px;
background:#edf4ff;
color:var(--primary);
font-size:19px
}

.empty h2,
.empty h3,
.error-box h3{margin:0 0 7px;color:var(--ink)}
.empty p,
.error-box p{margin:0 0 18px}

.cta{
display:inline-flex;
align-items:center;
gap:8px;
padding:13px 17px;
border-radius:12px;
background:var(--primary);
color:#fff;
text-decoration:none;
font-weight:850;
font-size:13px
}

.history{
display:flex;
flex-wrap:wrap;
gap:9px
}

.history a{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 13px;
background:#fff;
border:1px solid var(--line);
border-radius:999px;
text-decoration:none;
color:#536580;
font-size:12px;
transition:.2s
}

.history a:hover{
color:var(--primary);
border-color:#b9d0ff;
transform:translateY(-1px)
}

.category-block{
background:#fff;
border:1px solid var(--line);
border-radius:22px;
padding:15px;
margin:18px 0;
box-shadow:0 8px 25px rgba(25,57,100,.04)
}

.category-title{
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 5px 13px
}

.category-name{
display:flex;
align-items:center;
gap:9px;
font-size:17px;
font-weight:900
}

.category-name span{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:10px;
background:#edf4ff;
color:var(--primary)
}

.category-products{
grid-template-columns:repeat(6,minmax(0,1fr))
}

.breadcrumb{
display:flex;
align-items:center;
gap:8px;
color:#8490a0;
font-size:13px;
margin:5px 0 20px
}
.breadcrumb a{
color:var(--primary);
text-decoration:none
}

.footer{
margin-top:30px;
background:#101a29;
color:#dce5f0
}

.footer-main{
max-width:1600px;
margin:auto;
padding:45px 24px;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px
}

.footer p{
max-width:450px;
color:#91a0b5;
line-height:1.7;
font-size:13px
}

.footer-brand{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-weight:900;
text-decoration:none
}

.footer-brand .brand-mark{
width:38px;
height:38px
}

.footer h4{
margin:4px 0 15px;
color:#fff
}

.footer a:not(.footer-brand){
display:block;
color:#9eabc0;
text-decoration:none;
font-size:13px;
margin:11px 0
}

.footer a:hover{color:#fff}

.footer-bottom{
max-width:1600px;
margin:auto;
border-top:1px solid #253246;
padding:18px 24px;
display:flex;
justify-content:space-between;
gap:15px;
color:#77879d;
font-size:11px
}

@media(max-width:1250px){
.header-inner{
grid-template-columns:220px minmax(250px,1fr) 90px;
gap:15px
}
.products{grid-template-columns:repeat(5,minmax(0,1fr))}
.category-products{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(max-width:850px){
.header-inner{
grid-template-columns:1fr auto;
padding:13px 16px
}
.brand{grid-column:1}
.search{
grid-column:1/-1;
grid-row:2
}
.header-actions{
grid-column:2;
grid-row:1
}
.nav-inner{padding:0 12px}
.nav a{padding:12px 10px}
.container{padding:24px 14px 45px}
.hero{padding:32px 24px;border-radius:22px}
.products,
.category-products{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-img{height:155px;min-height:155px}
.footer-main{
grid-template-columns:1fr 1fr;
gap:25px
}
.footer-main>div:first-child{grid-column:1/-1}
}

@media(max-width:520px){
.header-actions .head-icon:nth-child(2){display:none}
.brand span:last-child{font-size:17px}
.brand small{font-size:7px}
.hero{
padding:26px 18px;
margin-bottom:24px
}
.hero h1{
font-size:34px;
letter-spacing:-1.5px
}
.hero p{font-size:13px}
.hero-search{
display:block;
background:transparent;
box-shadow:none;
padding:0
}
.hero-search-input{
background:#fff;
border-radius:13px;
padding:4px 10px;
margin-bottom:8px
}
.hero-search input{font-size:14px}
.hero-search button{
width:100%;
display:flex;
justify-content:center;
align-items:center;
gap:7px
}
.section-head{
align-items:flex-start;
flex-direction:column
}
.result-tools{width:100%}
.sort-btn{width:100%}
.products,
.category-products{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px
}
.product-img{
height:135px;
min-height:135px;
padding:9px
}
.product-info{padding:10px}
.product-title{font-size:11px}
.price{font-size:14px}
.go{font-size:9px}
.category-block{
padding:10px;
border-radius:18px
}
.category-name{font-size:15px}
.footer-main{grid-template-columns:1fr}
.footer-main>div:first-child{grid-column:auto}
.footer-bottom{
padding:15px;
flex-direction:column
}
}

@media(max-width:360px){
.products,
.category-products{gap:7px}
.product-img{
height:120px;
min-height:120px
}
.product-title{font-size:10px}
.price{font-size:13px}
}