@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

/* ===== AdrinShop — design tokens ===== */
:root{
  --brand:#4f46e5; --brand-2:#0d9488; --brand-ink:#fff; --brand-soft:#eef0ff;
  --rose:#e11d48; --amber:#f59e0b; --green:#059669;
  --bg:#f4f6fb; --bg-soft:#eaeef7; --surface:#fff; --surface-2:#f8f9fd;
  --text:#10131f; --text-2:#59627f; --border:#e3e7f1;
  --shadow:0 1px 2px rgba(16,19,31,.05), 0 10px 26px -14px rgba(16,19,31,.22);
  --shadow-lg:0 20px 50px -22px rgba(16,19,31,.35);
  --r:16px; --r-sm:10px; --r-lg:24px;
  --head:#4f46e5; --head-ink:#fff;
  --ring:0 0 0 3px rgba(79,70,229,.35);
}
[data-theme="dark"]{
  --brand:#8b8bfa; --brand-2:#2dd4bf; --brand-ink:#0b0f18; --brand-soft:#1d2140;
  --rose:#fb7185; --amber:#fbbf24; --green:#34d399;
  --bg:#0a0e17; --bg-soft:#0f1420; --surface:#141a28; --surface-2:#1b2233;
  --text:#e9edf8; --text-2:#96a1bf; --border:#242d42;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.8);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.9);
  --head:#141a28; --head-ink:#e9edf8;
  --ring:0 0 0 3px rgba(139,139,250,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-size:15px; line-height:1.75;
  font-family:Vazirmatn,'IRANSansX','IRANSans','Segoe UI',Tahoma,system-ui,sans-serif;
  transition:background .25s, color .25s;
}
h1,h2,h3,h4{margin:0 0 .5rem; line-height:1.45; font-weight:800; letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1rem}
p{margin:0 0 .6rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
.container{width:min(1240px,100% - 28px); margin-inline:auto}
.main{min-height:62vh; padding:18px 0 46px}
.skip-link{position:absolute; inset-inline-start:-9999px; top:8px; z-index:99; background:var(--brand); color:var(--brand-ink); padding:10px 16px; border-radius:10px}
.skip-link:focus{inset-inline-start:12px}
.icon-btn svg,.search__icon,.ico{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ===== topbar ===== */
.topbar{background:var(--surface-2); border-bottom:1px solid var(--border); font-size:.8rem; color:var(--text-2)}
.topbar__in{display:flex; align-items:center; gap:16px; height:36px; overflow:hidden}
.topbar__spacer{flex:1}
.topbar__item{white-space:nowrap}
.topbar a:hover{color:var(--brand)}

/* ===== header ===== */
.site-header{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow)}
.header__in{display:flex; align-items:center; gap:14px; min-height:68px}
.logo{display:flex; align-items:center; gap:8px; flex:none}
.logo__me{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--brand); flex:none}
.logo__mark{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#fff}
.logo__text{font-size:1.2rem; font-weight:800; letter-spacing:-.02em}
.logo__text b{color:var(--brand); font-weight:800}
.logo--foot .logo__text{font-size:1.35rem}

.search{position:relative; flex:1; display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1.5px solid var(--border); border-radius:14px; padding:0 12px; height:46px; transition:border-color .2s, box-shadow .2s}
.search:focus-within{border-color:var(--brand); box-shadow:var(--ring)}
.search__icon{width:20px; height:20px; color:var(--text-2); flex:none}
.search__input{flex:1; min-width:0; background:none; border:0; outline:none; height:100%}
.search__input::-webkit-search-cancel-button{filter:grayscale(1)}
.search__btn{flex:none; background:var(--brand); color:var(--brand-ink); border:0; border-radius:10px; padding:7px 16px; font-weight:700; font-size:.85rem}
.search__btn:hover{filter:brightness(1.08)}
.search__panel{position:absolute; inset-inline:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; max-height:60vh; overflow:auto; z-index:50}
.sug{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px}
.sug:hover,.sug:focus{background:var(--surface-2)}
.sug__thumb{width:40px; height:40px; flex:none; border-radius:8px; background:var(--surface-2); overflow:hidden}
.sug__t{flex:1; min-width:0; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sug__p{font-size:.8rem; color:var(--brand); font-weight:700; white-space:nowrap}
.sug--empty{padding:14px; text-align:center; color:var(--text-2); font-size:.86rem}

.header__actions{display:flex; align-items:center; gap:6px; flex:none}
.icon-btn{position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text)}
.icon-btn svg{width:21px; height:21px}
.icon-btn:hover{background:var(--surface-2); border-color:var(--brand); color:var(--brand)}
.ico-moon{display:none}
[data-theme="dark"] .ico-sun{display:none}
[data-theme="dark"] .ico-moon{display:block}
.cart-btn__badge{position:absolute; top:-5px; inset-inline-start:-5px; min-width:20px; height:20px; padding:0 4px; border-radius:999px; background:var(--rose); color:#fff; font-size:.7rem; font-weight:700; display:grid; place-items:center; border:2px solid var(--surface)}
.only-mobile{display:none}

.mainnav{border-top:1px solid var(--border); background:var(--surface)}
.mainnav__in{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.mainnav__in::-webkit-scrollbar{display:none}
.mainnav a{padding:11px 12px; font-size:.87rem; color:var(--text-2); white-space:nowrap; border-bottom:2.5px solid transparent}
.mainnav a:hover{color:var(--brand); border-bottom-color:var(--brand)}
.mainnav__hot{color:var(--rose)!important; font-weight:700}

/* ===== footer ===== */
.site-footer{background:var(--surface); border-top:1px solid var(--border); margin-top:30px; padding:26px 0 18px; font-size:.86rem}
.foot-trust{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-bottom:22px; border-bottom:1px solid var(--border)}
.foot-trust__i{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
.foot-trust__i span{font-size:1.5rem; line-height:1.6}
.foot-trust__i small{color:var(--text-2); font-size:.76rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:26px; padding:24px 0}
.foot-col h3{font-size:.92rem; margin-bottom:.7rem}
.foot-col a{display:block; color:var(--text-2); padding:3px 0}
.foot-col a:hover{color:var(--brand)}
.foot-col--brand p{color:var(--text-2); line-height:1.9; margin-bottom:.8rem}
.foot-phone{font-weight:800; font-size:1.05rem; color:var(--text)!important; direction:ltr; text-align:end}
.foot-bottom{border-top:1px solid var(--border); padding-top:14px; color:var(--text-2); display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; font-size:.78rem}
.foot-bottom p{margin:0}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-trust{grid-template-columns:repeat(2,1fr); gap:16px}
}
@media(max-width:720px){
  .topbar__item:first-child{display:none}
  .header__in{flex-wrap:wrap; padding:10px 0; min-height:0; gap:10px}
  .search{order:3; flex-basis:100%; height:44px}
  .search__btn{display:none}
  .header__actions{margin-inline-start:auto}
  .only-mobile{display:grid}
  .mainnav{display:none}
  .mainnav.is-open{display:block}
  .mainnav__in{flex-direction:column; max-height:60vh; overflow-y:auto}
  .foot-grid{grid-template-columns:1fr; gap:18px}
}