/* EMKAN v140 — precision regression pass.
   Targeted fixes only: narrower/thinner navigation across breakpoints,
   canonical Store controls, article reading spacing, and account theme sizing. */

/* --------------------------------------------------------------------------
   1) HEADER / MENU — keep the approved thin two-line language.
      Desktop menu is deliberately much narrower than the page-content frame.
   -------------------------------------------------------------------------- */
@media (min-width:1280px){
  html body .site-header{
    width:min(calc(100% - 320px),1120px)!important;
    max-width:1120px!important;
    margin-inline:auto!important;
  }
  html body .site-header .nav-frame{
    min-height:34px!important;
    height:34px!important;
    margin-top:14px!important;
    padding:0!important;
  }
  html body .site-header .primary-nav{
    height:34px!important;
    min-height:34px!important;
    padding-inline:64px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  html body .site-header .nav-list{
    gap:clamp(15px,1.15vw,22px)!important;
    min-height:0!important;
  }
  html body .site-header .language-button{left:4px!important;right:auto!important;}
  html body .site-header .theme-button,
  html body .site-header .nav-frame>#themeButton.theme-button{right:4px!important;left:auto!important;}
}

@media (min-width:901px) and (max-width:1279px){
  html body .site-header{
    width:min(calc(100% - 120px),980px)!important;
    max-width:980px!important;
    margin-inline:auto!important;
  }
  html body .site-header .nav-frame{
    min-height:34px!important;
    height:34px!important;
    margin-top:13px!important;
    padding:0!important;
  }
  html body .site-header .primary-nav{
    height:34px!important;
    min-height:34px!important;
    padding-inline:58px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  html body .site-header .nav-list{
    gap:clamp(8px,.9vw,14px)!important;
    min-height:0!important;
  }
  html body .site-header .language-button{left:3px!important;right:auto!important;}
  html body .site-header .theme-button,
  html body .site-header .nav-frame>#themeButton.theme-button{right:3px!important;left:auto!important;}
}

@media (min-width:901px){
  html body .site-header .nav-frame{box-sizing:border-box!important;align-items:center!important;}
  html body .site-header .nav-list>li{margin:0!important;padding:0!important;min-height:0!important;height:auto!important;}
  html body .site-header .nav-link{padding-block:0!important;line-height:1.22!important;}
  html body .site-header :is(.language-button,.theme-button){
    top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;margin:0!important;
  }
}

/* Mobile/tablet: same thin rhythm, with utilities close to the actual edge. */
@media (max-width:900px){
  html body .site-header{
    width:calc(100% - 20px)!important;
    max-width:720px!important;
    margin-inline:auto!important;
  }
  html body .site-header .nav-frame{
    margin-top:14px!important;
    min-height:40px!important;
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    grid-template-areas:"lang toggle theme" "nav nav nav"!important;
    align-items:center!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html body .site-header .language-button,
  html body .site-header .theme-button{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    min-height:30px!important;
    height:30px!important;
  }
  html body .site-header .language-button{
    grid-area:lang!important;
    justify-self:start!important;
    min-width:34px!important;
    padding-inline:0!important;
  }
  html body .site-header .theme-button,
  html body .site-header .nav-frame>#themeButton.theme-button{
    grid-area:theme!important;
    justify-self:end!important;
    width:30px!important;
    min-width:30px!important;
    padding:0!important;
  }
  html body .site-header .mobile-menu-button{
    grid-area:toggle!important;
    justify-self:center!important;
    width:32px!important;
    height:32px!important;
  }
  html body .site-header .mobile-menu-icon{width:17px!important;height:9px!important;}
  html body .site-header .mobile-menu-icon span{width:17px!important;}
  html body .site-header .primary-nav{
    grid-area:nav!important;
    padding-inline:0!important;
  }
  html body .site-header .nav-list{
    padding:4px 0 6px!important;
    gap:0!important;
  }
  html body .site-header .nav-link,
  :is(html[lang="fa"],html[lang="ar"]) body .site-header .nav-link{
    padding:6px 3px!important;
    line-height:1.25!important;
    font-size:12px!important;
  }
  html body .site-header .theme-icon-wrap,
  html body .site-header .theme-icon{width:13.5px!important;height:13.5px!important;}
  html body .site-header .theme-icon--moon{font-size:13px!important;line-height:13.5px!important;}
}
@media (max-width:420px){
  html body .site-header{width:calc(100% - 14px)!important;}
  html body .site-header .nav-frame{grid-template-columns:36px minmax(0,1fr) 36px!important;min-height:38px!important;}
  html body .site-header .language-button{min-width:32px!important;font-size:.67rem!important;}
  html body .site-header .theme-button{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;}
}

/* --------------------------------------------------------------------------
   2) STORE SEARCH — copy the Architecture search geometry exactly.
      No proxy, no double line, one real magnifier, same hover/focus behavior.
   -------------------------------------------------------------------------- */
.store-category-side .emkan-store-search-proxy,
.emkan-store-filter-rail .emkan-store-search-proxy{display:none!important;}

html body .store-category-side>.product-search,
html body .store-category-side .product-search:has(#productSearch){
  width:100%!important;
  margin:0 0 12px!important;
  position:relative!important;
  display:block!important;
  min-height:28px!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html body .store-category-side .product-search>span[class^="lang-"]{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
html body .store-category-side .product-search #productSearch{
  width:100%!important;
  height:28px!important;
  min-height:28px!important;
  margin:0!important;
  padding:0 26px 2px 2px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  color:var(--category,var(--fg))!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:clamp(10.5px,.76vw,12px)!important;
  font-weight:400!important;
  line-height:1.4!important;
  opacity:.72!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  transition:border-color 420ms var(--theme-ease),color var(--theme-duration) var(--theme-ease),opacity 420ms ease!important;
}
:is(html[lang="fa"],html[lang="ar"]) body .store-category-side .product-search #productSearch{
  direction:rtl!important;text-align:right!important;padding:0 2px 2px 26px!important;font-family:var(--font-fa)!important;
}
html[lang="en"] body .store-category-side .product-search #productSearch{
  direction:ltr!important;text-align:left!important;font-family:var(--font-en)!important;
}
html body .store-category-side .product-search #productSearch::placeholder{color:var(--category-muted)!important;opacity:.62!important;}
html body .store-category-side .product-search #productSearch:hover,
html body .store-category-side .product-search #productSearch:focus{border-bottom-color:var(--hover-accent)!important;opacity:1!important;}

/* Hide all legacy Store SVG/icon variants and draw one non-DOM-dependent
   magnifier. This cannot disappear because of script ordering. */
html body .store-category-side .product-search>:is(svg,i,.search-icon,.article-search-icon,.emkan-search-icon){display:none!important;}
html body .store-category-side .product-search::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:10!important;
  top:50%!important;
  right:8px!important;
  left:auto!important;
  width:13px!important;
  height:13px!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  opacity:.62!important;
  background:var(--category-muted,var(--fg))!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.75' fill='none' stroke='black' stroke-width='1.55'/%3E%3Cpath d='m15 15 4.25 4.25' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.75' fill='none' stroke='black' stroke-width='1.55'/%3E%3Cpath d='m15 15 4.25 4.25' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
:is(html[lang="fa"],html[lang="ar"]) body .store-category-side .product-search::after{right:auto!important;left:8px!important;}
/* Store category + sort use the exact same disclosure mark as every other module. */
html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary{
  min-height:24px!important;
  padding:3px 0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  background:transparent!important;
  color:var(--category-muted,var(--fg))!important;
  line-height:1.35!important;
}
html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary:hover,
html body .store-category-side :is(.store-subcategory-filter,.store-sort-filter)>summary:focus-visible{
  color:var(--hover-accent)!important;
  border-bottom-color:var(--hover-accent)!important;
  background:transparent!important;
}
html body .store-category-side :is(.store-subcategory-list,.store-sort-list){
  gap:0!important;row-gap:0!important;padding:3px 0 1px!important;margin:0!important;
}
html body .store-category-side :is(.store-subcategory-list a,.store-sort-list button){
  min-height:0!important;margin:0!important;padding:2px 0!important;line-height:1.35!important;
}

/* Product purchase row: keep the button label optically centered with quantity field. */
html body .product-info .buy-row>button#addToCart{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1.25!important;
}
html body .product-info .buy-row>button#addToCart>span{display:block!important;transform:translateY(1px)!important;}

/* --------------------------------------------------------------------------
   3) ARTICLE READING — remove the remaining oversized post-menu void.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  html body .article-page{
    padding-top:10px!important;
    margin-top:0!important;
  }
  html body .article-page>.article-page-back{margin-top:0!important;}
}
@media (max-width:900px){
  html body .article-page{padding-top:8px!important;margin-top:0!important;}
}

/* --------------------------------------------------------------------------
   4) ACCOUNT THEME — exact same visual footprint as the public site control.
   -------------------------------------------------------------------------- */
html body .account-language-rail #themeToggle.theme-toggle{
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  margin-inline-start:6px!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:1!important;
}
html body .account-language-rail #themeToggle.theme-toggle :is(svg,i),
html body .account-language-rail #themeToggle.theme-toggle :is(.theme-sun,.theme-moon,.emkan-v132-theme-sun,.emkan-v132-theme-moon,.emkan-v133-theme-icon){
  width:13.5px!important;
  height:13.5px!important;
  max-width:13.5px!important;
  max-height:13.5px!important;
  font-size:13px!important;
  line-height:13.5px!important;
  padding:0!important;
  margin:0!important;
}