/* ArtVerse — หัวเว็บ: ปุ่มโปรไฟล์ ช่องค้นหา และแถบหมวดหมู่
   ไฟล์นี้เป็นส่วนหนึ่งของ css/parts/*.css โหลดตามลำดับเลขหน้าไฟล์ (ลำดับมีผล: ไฟล์หลังทับไฟล์ก่อน) */

/* =========================================================
   Profile + hamburger button — white pill style
   Matches the supplied reference across every screen.
   ========================================================= */
.reference-actions .profile-drawer-btn,
.actions .profile-drawer-btn,
.profile-drawer-btn,
html[data-theme="dark"] .profile-drawer-btn{
  height:36px!important;
  min-width:76px!important;
  padding:0 8px!important;
  gap:8px!important;
  border:1px solid #d9dce2!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#555b66!important;
  box-shadow:none!important;
}
.reference-actions .profile-drawer-btn:hover,
.actions .profile-drawer-btn:hover,
.profile-drawer-btn:hover,
html[data-theme="dark"] .profile-drawer-btn:hover{
  background:#fafafa!important;
  border-color:#cfd3da!important;
}
.profile-drawer-avatar{
  width:22px!important;
  height:22px!important;
  border-radius:50%!important;
  background:#f0f0f3!important;
  color:#5e318f!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 22px!important;
}
.profile-drawer-avatar svg{
  width:12px!important;
  height:12px!important;
  display:block!important;
  color:#5e318f!important;
}
.profile-drawer-divider{
  width:1px!important;
  height:18px!important;
  background:#d8dbe0!important;
  flex:0 0 1px!important;
}
.profile-drawer-bars{
  width:17px!important;
  height:17px!important;
  color:#555b66!important;
  background:transparent!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 17px!important;
}
.profile-drawer-bars svg{
  width:16px!important;
  height:16px!important;
  display:block!important;
  color:#555b66!important;
}
@media(max-width:760px){.profile-drawer-btn{
    height:34px!important;
    min-width:72px!important;
    padding:0 7px!important;
    gap:7px!important;
  }}
/* =========================================================
   Index header preferences + sticky inline search
   - Language: Thai / English only
   - Currency: THB / USD only
   - Keep the complete index header visible while scrolling
   - Place a compact search field beside "เกี่ยวกับเรา"
   ========================================================= */
.header-pref-control{position:relative;display:inline-flex;align-items:center}
.header-pref-control .pref-trigger{gap:5px;cursor:pointer;white-space:nowrap}
.header-pref-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:1200;
  width:178px;
  padding:6px;
  border:1px solid #e1e3e7;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 38px rgba(20,28,45,.16);
  display:none;
}
.header-pref-menu.show{display:grid}
.header-pref-menu button{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#222;
  padding:7px 10px;
  text-align:left;
  cursor:pointer;
}
.header-pref-menu button:hover,.header-pref-menu button.active{background:#f4f7fb}
.header-pref-menu button.active:after{content:"✓";color:#1976ed;font-weight:900}
.header-pref-menu button strong{font-size:12px;font-weight:800}
.header-pref-menu button small{font-size:9px;color:#9a9a9a;margin-left:auto}
.language-pill{gap:6px!important}
body[data-page="home"] .site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:#fff!important;
}
/* At the very top of index.html the compact header search is absent.
   Once the page has moved even 1px, JS adds .home-header-search-visible. */
body[data-page="home"] .reference-topbar{
  grid-template-columns:auto auto 1fr;
  gap:20px;
}
body[data-page="home"] .reference-actions{justify-self:end}
body[data-page="home"] .header-inline-search{
  height:34px;
  min-width:0;
  display:none;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid #dedede;
  border-radius:999px;
  background:#fff;
  color:#555;
}
body[data-page="home"].home-header-search-visible .reference-topbar{
  grid-template-columns:auto auto minmax(180px,260px) auto;
}
body[data-page="home"].home-header-search-visible .header-inline-search{display:flex}
body[data-page="home"] .header-inline-search>span{font-size:17px;color:#4d5560;transform:rotate(-15deg)}
body[data-page="home"] .header-inline-search input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#222;
  font-size:11px;
}
body[data-page="home"] .header-inline-search input::placeholder{color:#b4b7bd}
body[data-page="home"] .reference-actions .language-pill{height:34px;padding:0 10px;font-size:11px}
body[data-page="home"] .reference-actions .currency-pill{cursor:pointer}
@media(max-width:1180px){body[data-page="home"] .reference-topbar{grid-template-columns:auto auto 1fr;gap:13px}
body[data-page="home"].home-header-search-visible .reference-topbar{grid-template-columns:auto auto minmax(150px,1fr) auto}
body[data-page="home"] .reference-main-nav{gap:14px;font-size:12px}
body[data-page="home"] .header-inline-search{padding-inline:10px}
body[data-page="home"] .reference-actions{gap:5px}
body[data-page="home"] .reference-actions .language-pill{padding:0 8px}}
@media(max-width:900px){body[data-page="home"] .reference-topbar{grid-template-columns:auto 1fr auto}
body[data-page="home"].home-header-search-visible .reference-topbar{grid-template-columns:auto minmax(170px,1fr) auto}
body[data-page="home"].home-header-search-visible .reference-main-nav{display:none}
body[data-page="home"] .header-inline-search{grid-column:2;grid-row:1}
body[data-page="home"] .reference-actions .language-pill span:nth-child(2){display:none}
body[data-page="home"] .reference-actions .language-pill{min-width:34px;padding:0 8px}}
@media(max-width:720px){body[data-page="home"] .reference-topbar{grid-template-columns:auto 1fr auto;row-gap:8px;padding-bottom:8px}
body[data-page="home"].home-header-search-visible .reference-topbar{grid-template-columns:auto 1fr auto}
body[data-page="home"] .header-inline-search{grid-column:1/-1;grid-row:2;width:100%;height:36px}
body[data-page="home"] .reference-actions .language-pill{display:none}
body[data-page="home"] .reference-actions .currency-pill{min-width:54px;padding:0 8px}
.header-pref-menu{position:fixed;right:12px;top:58px;width:170px}}
/* =========================================================
   Home header: keep BOTH navigation rows visible at all times
   Fixed positioning is used instead of sticky so the header does not
   disappear when the page is scrolled inside browsers that treat
   overflow-x on html/body as a scrolling ancestor.
   ========================================================= */
body[data-page="home"]{
  padding-top:var(--home-fixed-header-height,119px);
}
body[data-page="home"] .site-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:5000!important;
  background:#fff!important;
}
body[data-page="home"] #homeApp{
  position:relative;
}
body[data-page="home"] [id]{
  scroll-margin-top:calc(var(--home-fixed-header-height,119px) + 12px);
}