/* ============================================================
   Variables
   ============================================================ */
:root{
  --xe-main-color:#0EA5E9;
  --xe-dark-color:#0284c7;
  --xe-light-color:#7dd3fc;
  --xe-deep-color:#0369a1;
  --xe-link-color:#555555;
  --xe-bg-color:#fafafa;
  --xe-fg-color:#333333;
  --xe-hf-bg-color:#ffffff;
  --xe-hf-fg-color:#333333;
  --xe-border-color:#f0f0f0;
  --xe-muted:#999;
  --xe-page-width:1320px;
  --xe-radius:8px;
  --xe-shadow:0 0 1.25rem rgba(31,45,61,.05);
  --xe-shadow-hover:0 1rem 3rem rgba(31,45,61,.125);
}

/* ============================================================
   Base Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--xe-fg-color);
  background-color:var(--xe-bg-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;border-style:none;vertical-align:middle;display:block}
a{color:var(--xe-link-color);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--xe-main-color);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1rem}
button,input{font-family:inherit}
button{cursor:pointer}

.container{
  width:100%;
  max-width:var(--xe-page-width);
  margin:0 auto;
  padding:0 15px;
}

@keyframes fade-in{
  0%{transform:translateY(20px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* ============================================================
   Top Bar
   ============================================================ */
.topbar{
  background:var(--xe-hf-bg-color);
  border-bottom:1px solid var(--xe-border-color);
  font-size:12px;
  color:var(--xe-muted);
  line-height:1;
}
.topbar .inner{
  display:flex;align-items:center;justify-content:space-between;height:34px;
}
.topbar .left{display:flex;align-items:center;gap:6px}
.topbar .left svg{width:14px;height:14px;fill:var(--xe-main-color)}
.topbar .right{display:flex;align-items:center;gap:16px}
.topbar a{color:var(--xe-muted);font-size:12px}
.topbar a:hover{color:var(--xe-main-color)}

.topbar .top-menu ul{
  display:flex;
  gap:20px;
}

/* ============================================================
   Header
   ============================================================ */
.xe-header{
  position:sticky;top:0;z-index:100;
  background-color:var(--xe-hf-bg-color);
  color:var(--xe-hf-fg-color);
  box-shadow:0 1px 3px #eee;
}
@media only screen and (min-width: 768px) {
  .admin-bar .xe-header{
    top:32px;
  }
}

.navbar{position:relative;display:flex;align-items:center;height:68px;gap:24px}
.navbar-brand{flex:0 0 auto}
.navbar-brand{
  font-size:26px;line-height:1;color:var(--xe-hf-fg-color);
  letter-spacing:.5px;display:flex;align-items:center;gap:8px;
  font-weight:600;
    flex-grow:1;
}
.navbar-brand .logo-mark{
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:linear-gradient(135deg,var(--xe-main-color),var(--xe-dark-color));
  color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 4px 10px rgba(var(--xe-main-rgb),.35);
}
.navbar-brand:hover{color:var(--xe-hf-fg-color)}
.xe-header .custom-logo-link{
  flex-grow:1;
}
.xe-header .custom-logo{
  height:38px;
  width:auto;
}
.mobile-menu .custom-logo{
    height:auto;
}

/* ============================================================
   Main Navigation (with second-level dropdown)
   ============================================================ */
.main-menu { flex: 1 1 auto; min-width: 0; }

.main-menu > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu > ul > li { position: relative; }

.main-menu > ul > li > a {
  position: relative;
  display: block;
  padding: 23px 14px;
  font-size: 15px;
  color: var(--xe-hf-fg-color);
  white-space: nowrap;
  transition: color .2s ease;
}

.main-menu > ul > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--xe-main-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.current-menu-item > a,
.main-menu > ul > li.current_page_item > a,
.main-menu > ul > li.current-menu-ancestor > a,
.main-menu > ul > li.current-menu-parent > a {
  color: var(--xe-main-color);
}

.main-menu > ul > li > a:hover::after,
.main-menu > ul > li.current-menu-item > a::after,
.main-menu > ul > li.current_page_item > a::after,
.main-menu > ul > li.current-menu-ancestor > a::after,
.main-menu > ul > li.current-menu-parent > a::after {
  transform: scaleX(1);
}

.main-menu > ul > li.menu-item-has-children > a { padding-right: 28px; }

.main-menu > ul > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .25s ease, margin-top .25s ease;
}


/* ---------- Second-level menu ---------- */
.main-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border-radius: var(--xe-radius);
  box-shadow:
    0 12px 32px rgba(31, 45, 61, .12),
    0 0 0 1px rgba(0, 0, 0, .03);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  z-index: 99;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.main-menu > ul > li.menu-item-has-children:hover > .sub-menu,
.main-menu > ul > li.menu-item-has-children:focus-within > .sub-menu,
.main-menu > ul > li.menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.main-menu .sub-menu li {
  position: relative;
  margin: 0;
  padding: 0;
}

.main-menu .sub-menu a {
  position: relative;
  display: block;
  padding: 10px 20px 10px 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--xe-fg-color);
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}

.main-menu .sub-menu a::after { display: none; }

.main-menu .sub-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 2px 2px 0;
  background: var(--xe-main-color);
  transform: translateY(-50%);
  transition: height .2s ease;
}

.main-menu .sub-menu a:hover,
.main-menu .sub-menu li.current-menu-item > a,
.main-menu .sub-menu li.current_page_item > a {
  color: var(--xe-main-color);
  background: rgba(var(--xe-main-rgb), .06);
  padding-left: 26px;
}

.main-menu .sub-menu a:hover::before,
.main-menu .sub-menu li.current-menu-item > a::before,
.main-menu .sub-menu li.current_page_item > a::before {
  height: 60%;
}

/* ============================================================
   Mobile Drawer Menu (with second-level support)
   ============================================================ */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -72%;
  width: 72%;
  height: 100%;
  margin: 0;
  padding: 24px 22px;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .14);
  overflow-y: auto;
  z-index: 200;
  visibility: hidden;
  transition: left .3s ease, visibility .3s ease;
}
.mobile-menu.open { left: 0; visibility: visible; }

.admin-bar .mobile-menu.bar-height { top: 46px; }

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu li { position: relative; }

.mobile-menu > ul > li > a {
  position: relative;
  display: block;
  padding: 14px 0;
  font-size: 15px;
  color: var(--xe-hf-fg-color);
  border-bottom: 1px solid #f3f3f3;
  transition: color .2s ease;
}

.mobile-menu > ul > li > a::after { display: none; }

.mobile-menu > ul > li > a:hover,
.mobile-menu > ul > li.current-menu-item > a,
.mobile-menu > ul > li.current_page_item > a,
.mobile-menu > ul > li.current-menu-ancestor > a,
.mobile-menu > ul > li.current-menu-parent > a {
  color: var(--xe-main-color);
}

.mobile-menu > ul > li:last-child > a { border-bottom: 0; }

.mobile-menu > ul > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  border-bottom: 1px solid #f3f3f3;
}

.mobile-menu > ul > li.menu-item-has-children > a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 0;
}

.mobile-menu .submenu-toggle {
  flex: 0 0 auto;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: #999;
  cursor: pointer;
  outline: 0;
  transition: color .2s ease;
}

.mobile-menu .submenu-toggle:hover,
.mobile-menu .submenu-toggle:focus-visible {
  color: var(--xe-main-color);
}

.mobile-menu .submenu-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform .3s ease;
}

.mobile-menu li.is-open > .submenu-toggle {
  color: var(--xe-main-color);
}
.mobile-menu li.is-open > .submenu-toggle svg {
  transform: rotate(180deg);
}

.mobile-menu li.is-open > a {
  color: var(--xe-main-color);
}

.mobile-menu > ul > li.menu-item-has-children > .sub-menu {
  flex: 0 0 100%;
  width: 100%;
}

.mobile-menu .sub-menu {
  max-height: 0;
  margin: 0;
  padding: 0 0 0 14px;
  overflow: hidden;
  border-left: 2px solid transparent;
  transition:
    max-height .35s ease,
    margin .35s ease,
    border-color .35s ease;
}

.mobile-menu li.is-open > .sub-menu {
  max-height: 800px;
  margin: 4px 0 8px;
}

.mobile-menu .sub-menu li { margin: 0; }

.mobile-menu .sub-menu a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--xe-muted);
  border-bottom: 1px dashed #f5f5f5;
  transition: color .2s ease, padding-left .2s ease;
}

.mobile-menu .sub-menu a::after { display: none; }

.mobile-menu .sub-menu a:hover,
.mobile-menu .sub-menu li.current-menu-item > a,
.mobile-menu .sub-menu li.current_page_item > a {
  color: var(--xe-main-color);
  padding-left: 6px;
}

.mobile-menu .sub-menu li:last-child > a { border-bottom: 0; }

/* ---------- Mobile menu header ---------- */
.mobile-menu-head{
  display:flex;align-items:center;justify-content:space-between;
}

.mobile-menu-close{
  flex:0 0 auto;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;
  color:#8a8a8a;background:#f5f5f5;outline:0;
  transition:color .2s,background-color .2s,transform .25s ease;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible{color:#fff;background:var(--xe-main-color)}
.mobile-menu-close:hover{transform:rotate(90deg)}
.mobile-menu-close svg{width:15px;height:15px;fill:currentColor}

/* ============================================================
   Mobile Drawer - Logo & Search Polish
   ============================================================ */
.mobile-menu .mobile-menu-head {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--xe-border-color);
}

.mobile-menu .mobile-menu-head .navbar-brand {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  gap: 9px;
  overflow: hidden;
}

.mobile-menu .mobile-menu-head .navbar-brand .logo-mark {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 7px;
}

.mobile-menu .mobile-menu-head .navbar-brand img {
  max-height: 32px;
  width: auto;
}

.mobile-menu .mobile-menu-head .mobile-menu-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-left: 10px;
}

.mobile-menu .header-search {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  flex: none;
}

.mobile-menu .header-search input {
  width: 100%;
  height: 44px;
  padding: 0 50px 0 18px;
  font-size: 14px;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 22px;
}

.mobile-menu .header-search input:focus {
  background: #fff;
  border-color: var(--xe-light-color);
}

.mobile-menu .header-search input::placeholder {
  color: #b5b5b5;
}

.mobile-menu .header-search button {
  top: 5px;
  right: 5px;
  width: 34px;
  height: 34px;
  background: var(--xe-main-color);
  color: #fff;
}

.mobile-menu .header-search button:hover {
  background: var(--xe-dark-color);
  color: #fff;
}

.mobile-menu .header-search svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   Header Search (Desktop)
   ============================================================ */
.header-search{position:relative;flex:0 0 auto}
.header-search input{
  width:230px;height:38px;padding:0 42px 0 14px;
  font-size:14px;color:#555;background:#f7f7f7;
  border:1px solid transparent;border-radius:20px;outline:none;
  transition:background .2s,border-color .2s;
}
.header-search input:focus{background:#fff;border-color:var(--xe-light-color)}
.header-search input::placeholder{color:#bbb}
.header-search button{
  position:absolute;top:2px;right:2px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;background:transparent;color:#999;outline:0;
  transition:color .2s;
}
.header-search button:hover{color:var(--xe-main-color)}
.header-search svg{width:16px;height:16px;fill:currentColor}

/* ============================================================
   Header Actions (Cart / Account)
   ============================================================ */
.header-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.icon-btn{
  position:relative;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:#555;border-radius:50%;
  transition:color .2s,background-color .2s;
}
.icon-btn:hover{color:var(--xe-main-color);background:#fafafa}
.icon-btn svg{width:19px;height:19px;fill:currentColor}
.icon-btn .badge{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;line-height:1;
  color:#fff;background:var(--xe-main-color);border-radius:8px;
}

/* ============================================================
   Mobile Menu Toggle & Shade
   ============================================================ */
.menu-toggle{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--xe-hf-fg-color);
}
.menu-toggle svg{width:22px;height:22px;fill:currentColor}

.menu-shade{display:none;position:fixed;inset:0;background:#212529;opacity:.5;z-index:190}
.menu-shade.show{display:block}
body.menu-open{overflow:hidden}

/* ============================================================
   Footer
   ============================================================ */
.xe-footer{
  padding:22px 0 22px;
  background-color:var(--xe-hf-bg-color);color:var(--xe-hf-fg-color);
  box-shadow:0 -1px 3px #eee;font-size:13px;
}
.footer-top{display:flex;flex-wrap:wrap;gap:40px;padding-top:28px;padding-bottom:28px;margin-bottom:22px;border-bottom:1px solid var(--xe-border-color)}
.footer-col{flex:1 1 180px;min-width:160px}
.footer-col.brand-col{flex:1.6 1 260px}
.footer-col h4{font-size:14px;margin-bottom:14px;color:var(--xe-fg-color)}
.footer-col p{font-size:13px;color:var(--xe-muted);line-height:1.75;margin:0}
.footer-col ul li{margin-bottom:9px}
.footer-col ul a{font-size:13px;color:var(--xe-muted);transition:color .2s,padding-left .2s}
.footer-col ul a:hover{color:var(--xe-main-color);padding-left:4px}
.footer-col ul span{font-size:13px;color:var(--xe-muted);transition:color .2s,padding-left .2s}
.footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.footer-brand .logo-mark{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:linear-gradient(135deg,var(--xe-main-color),var(--xe-dark-color));
  color:#fff;font-size:15px;font-weight:700;
}
.footer-brand strong{font-size:17px}
.xe-footer .custom-logo{
  height:35px;
  width:auto;
}
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;font-size:12px;color:var(--xe-muted);
}
.footer-bottom .links{display:flex;flex-wrap:wrap;gap:14px}
.footer-bottom a{color:var(--xe-muted);font-size:12px}
.footer-bottom a:hover{color:var(--xe-main-color)}
.footer-bottom .bottom-menu ul{
  display:flex;
  gap:20px;
}
.footer-notice{margin-top:15px;padding:10px 12px;font-size:12px;line-height:1.7;color:#9a9a9a;background:#fafafa;border-radius:6px}

/* ============================================================
   Back to Top
   ============================================================ */
.rollbar{position:fixed;right:30px;bottom:60px;z-index:90;display:flex;flex-direction:column;gap:8px}
.rollbar .rollbar-item{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  padding:0;border:1px solid #ddd;border-radius:8px;background:#fff;color:#555;
  opacity:.85;transition:opacity .3s,transform .3s,border-color .3s,color .3s;
}
.rollbar .rollbar-item:hover{opacity:1;color:var(--xe-main-color);border-color:var(--xe-light-color);transform:translateY(-3px)}
.rollbar svg{width:18px;height:18px;fill:currentColor}
.rollbar .rollbar-item.hide{display:none}

/* ============================================================
   Posts / Pages / Archives (shared styles)
   ============================================================ */
.xe-main{padding-bottom:20px}
.wp-singular .entry-header:not(.loop-entry__body .entry-header) {
    display: flex;
    margin: 20px auto 20px;
    flex-direction: column;
    align-items: center;
}
.entry-title{font-size:22px;margin:0 0 14px}
.entry-meta,.entry-footer{font-size:12px;color:var(--xe-muted);margin:0 0 10px}
.entry-content{font-size:15px;line-height:1.8;margin-top:14px}
.entry-content img{border-radius:6px}
.entry-content pre{background:#f6f8fa;padding:14px;border-radius:6px;overflow:auto}
.entry-content .wp-block-heading{
    margin: 20px auto;
}
.entry-content .wp-block-separator {
    color: #eee;
    border-top: 1px solid;
    margin: 15px auto;
}
.page-header{
  margin: 0 0 20px;
  padding: 20px 18px;
  background: #fff;
  border-radius: var(--xe-radius);
  box-shadow: var(--xe-shadow);
  transition: transform .2s, box-shadow .2s;
}
.page-header .page-title{font-size:24px}
.post-thumbnail img{border-radius:8px;margin-bottom:14px}

/* ============================================================
   Pagination (shared across archives / blog / home)
   ============================================================ */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:44px 0 0}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 12px;font-size:14px;color:#666;
  background:#fff;border:1px solid var(--xe-border-color);border-radius:6px;
  transition:all .2s;
}
.pagination .page-numbers:hover{color:var(--xe-main-color);border-color:var(--xe-light-color)}
.pagination .page-numbers.current{
  color:#fff;background:var(--xe-main-color);border-color:var(--xe-main-color);
  box-shadow:0 4px 12px rgba(var(--xe-main-rgb),.3);
}
.pagination .page-numbers.dots{background:transparent;border-color:transparent}

/* ============================================================
   Responsive - Mobile
   ============================================================ */
@media screen and (max-width:767px){
  .topbar .right{display:none}

  .navbar{gap:10px;height:58px;
    width: 100%;
    justify-content: space-between;
  }
  .main-menu { display: none !important; } 
  .menu-toggle{display:flex;order:0;margin-left:-10px}
  .navbar-brand{
    flex-grow:1;
  }
  .navbar-brand h1{font-size:20px;gap:6px}
  .navbar-brand .logo-mark{width:26px;height:26px;font-size:13px;border-radius:7px}
  .header-search{display:none}
  .header-actions .icon-btn:nth-child(2){display:none}

  .pagination{margin-top:28px;gap:5px}
  .pagination .page-numbers{min-width:32px;height:32px;padding:0 9px;font-size:13px;border-radius:5px}

  .xe-footer{margin-top:36px;padding:28px 0 18px}
  .footer-top{gap:24px;padding-bottom:20px}
  .footer-col{flex:1 1 100%}
  .footer-col h4{font-size:13px;margin-bottom:10px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;font-size:11px}
  .footer-bottom .links{gap:12px}
  .footer-notice{font-size:11px}

  .rollbar{right:14px;bottom:20px;gap:6px}
  .rollbar .rollbar-item{width:38px;height:38px;border-radius:7px}
  .rollbar svg{width:16px;height:16px}
}

/* ============================================================
   404 / Archive / Comments
   ============================================================ */
.error-404{
  margin:48px auto;padding:56px 24px;text-align:center;
  background:#fff;border-radius:var(--xe-radius);box-shadow:var(--xe-shadow);
}
.error-404__code{
  display:inline-block;margin-bottom:12px;font-size:88px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--xe-main-color),var(--xe-dark-color));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.error-404 .page-title{font-size:22px;margin:0 0 12px}
.error-404 .archive-description{color:var(--xe-muted);margin:0 auto 26px;max-width:520px}
.error-404__search{max-width:480px;margin:0 auto 24px}
.error-404__search input[type="search"]{
  width:100%;height:48px;padding:0 60px 0 18px;font-size:15px;
  border:1px solid var(--xe-border-color);border-radius:999px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.error-404__search input[type="search"]:focus{
  border-color:var(--xe-light-color);box-shadow:0 0 0 4px rgba(var(--xe-main-rgb),.08);
}
.error-404__search .search-submit{
  position:absolute;right:6px;top:6px;
  height:36px;padding:0 18px;border:0;border-radius:999px;
  color:#fff;background:linear-gradient(135deg,var(--xe-main-color),var(--xe-dark-color));
  cursor:pointer;
}
.error-404__search form{position:relative}
.error-404__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
.error-404__actions .button{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:500;
  color:#fff;background:linear-gradient(135deg,var(--xe-main-color),var(--xe-dark-color));
  box-shadow:0 6px 16px rgba(var(--xe-main-rgb),.32);
  transition:transform .2s,box-shadow .2s;
}
.error-404__actions .button.outline{
  color:var(--xe-main-color);background:#fff;border:1px solid rgba(var(--xe-main-rgb),.35);box-shadow:none;
}
.error-404__actions .button:hover{transform:translateY(-2px)}

/* Post navigation / comments */
.post-navigation .nav-links{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.post-navigation .nav-previous,
.post-navigation .nav-next{
  flex:1 1 260px;padding:14px 18px;background:#fff;border-radius:var(--xe-radius);
  box-shadow:var(--xe-shadow);transition:transform .2s,box-shadow .2s;
}
.post-navigation a{display:block;color:var(--xe-fg-color)}
.post-navigation a:hover{color:var(--xe-main-color)}
.post-navigation .nav-subtitle{display:block;font-size:12px;color:var(--xe-muted);margin-bottom:4px}
.post-navigation .nav-title{font-size:14px;font-weight:500;line-height:1.4}

.comments-area{margin:20px 0 0;padding:24px;background:#fff;border-radius:var(--xe-radius);box-shadow:var(--xe-shadow)}
.comments-title{font-size:17px;margin:0 0 18px;padding-left:12px;position:relative}
.comments-title::before{
  content:"";position:absolute;left:0;top:50%;width:4px;height:18px;margin-top:-9px;
  border-radius:2px;background:linear-gradient(180deg,var(--xe-main-color),var(--xe-dark-color));
}
.comment-list{list-style:none;padding:0;margin:0 0 20px}
.comment-list ol.children{list-style:none;padding-left:24px;margin-top:14px}
.comment-list .comment-body{
  padding:14px 16px;background:#fafafa;border-radius:var(--xe-radius);margin-bottom:12px;
}
.comment-list .comment-author{font-size:13px;font-weight:600;color:var(--xe-fg-color)}
.comment-list .comment-meta{font-size:12px;color:var(--xe-muted);margin-bottom:8px}
.comment-list .comment-content{font-size:14px;line-height:1.7;color:#555}
.comment-reply-link{
  display:inline-block;margin-top:8px;font-size:12px;color:var(--xe-main-color);
}
.comment-form .comment-form-comment label,
.comment-form .comment-form-author label,
.comment-form .comment-form-email label,
.comment-form .comment-form-url label{
  display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--xe-fg-color);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;padding:10px 14px;font-size:14px;color:var(--xe-fg-color);
  background:#fff;border:1px solid var(--xe-border-color);border-radius:var(--xe-radius);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.comment-form textarea{min-height:120px;line-height:1.6}
.comment-form input:focus,
.comment-form textarea:focus{
  border-color:var(--xe-light-color);box-shadow:0 0 0 3px rgba(var(--xe-main-rgb),.1);
}
.comment-form .submit{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 28px;font-size:14px;font-weight:500;color:#fff;
  background:linear-gradient(135deg,var(--xe-main-color),var(--xe-dark-color));
  border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 16px rgba(var(--xe-main-rgb),.35);
  transition:transform .2s,box-shadow .2s;
}
.comment-form .submit:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(var(--xe-main-rgb),.45)}

@media (max-width:767px){
  .error-404{padding:36px 16px;margin:24px auto}
  .error-404__code{font-size:64px}
  .error-404 .page-title{font-size:18px}
  .comments-area{padding:16px;border-radius:6px}
  .comment-list ol.children{padding-left:12px}
  .post-navigation .nav-links{gap:8px}
}

/* ============================================================
   Sidebar
   ============================================================ */
.content-with-sidebar {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.home .content-with-sidebar, .blog .content-with-sidebar {
  margin-top:20px;
}
.content-with-sidebar .content-main {
  flex: 1 1 auto;
  min-width: 0;
}
.content-with-sidebar .content-main article {
  padding: 20px 18px;
  background: #fff;
  border-radius: var(--xe-radius);
  box-shadow: var(--xe-shadow);
  transition: transform .2s, box-shadow .2s;
  margin: 0 0 20px;
}

.content-no-sidebar .content-main {
  width: 100%;
}

.xe-sidebar {
  flex: 0 0 300px;
  width: 300px;
  align-self: flex-start;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.xe-sidebar .widget {
  margin: 0;
  padding: 20px;
  background: #fff;
  border-radius: var(--xe-radius);
  box-shadow: var(--xe-shadow);
  font-size: 14px;
  color: var(--xe-fg-color);
}

.xe-sidebar .widget-title, .xe-sidebar h2.wp-block-heading {
  position: relative;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--xe-fg-color);
}



.xe-sidebar .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.xe-sidebar .widget ul li {
  position: relative;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #555;
  border-bottom: 1px dashed var(--xe-border-color);
}

.xe-sidebar .widget ul li:last-child {
  border-bottom: 0;
}

.xe-sidebar .widget ul li a {
  color: #555;
  transition: color .2s, padding-left .2s;
}

.xe-sidebar .widget ul li a:hover {
  color: var(--xe-main-color);
  padding-left: 4px;
}

.xe-sidebar .widget .count,
.xe-sidebar .widget .cat-item .count {
  float: right;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--xe-muted);
  background: #f4f4f4;
  border-radius: 999px;
}

.xe-sidebar .tagcloud,
.xe-sidebar .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1;
}

.xe-sidebar .tagcloud a,
.xe-sidebar .wp-block-tag-cloud a {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12.5px !important;
  color: #666;
  background: #fafafa;
  border: 1px solid var(--xe-border-color);
  border-radius: 999px;
  transition: color .2s, background-color .2s, border-color .2s, transform .2s;
}

.xe-sidebar .tagcloud a:hover,
.xe-sidebar .wp-block-tag-cloud a:hover {
  color: #fff;
  background: var(--xe-main-color);
  border-color: var(--xe-main-color);
  transform: translateY(-2px);
}

.xe-sidebar .widget_search form,
.xe-sidebar .wp-block-search__inside-wrapper {
  position: relative;
}

.xe-sidebar .widget_search input[type="search"],
.xe-sidebar .wp-block-search__input {
  width: 100%;
  height: 42px;
  padding: 0 52px 0 16px;
  font-size: 14px;
  color: var(--xe-fg-color);
  background: #fafafa;
  border: 1px solid var(--xe-border-color);
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.xe-sidebar .widget_search input[type="search"]:focus,
.xe-sidebar .wp-block-search__input:focus {
  background: #fff;
  border-color: var(--xe-light-color);
  box-shadow: 0 0 0 4px rgba(var(--xe-main-rgb), .08);
}

.xe-sidebar .widget_search button,
.xe-sidebar .widget_search .search-submit,
.xe-sidebar .wp-block-search__button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--xe-main-color), var(--xe-dark-color));
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--xe-main-rgb), .3);
  transition: transform .2s, box-shadow .2s;
}

.xe-sidebar .widget_search button:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(var(--xe-main-rgb), .45);
}

.xe-sidebar .widget_search button::before {
  content: "";
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.xe-sidebar .widget_recent_entries ul li,
.xe-sidebar .widget_recent_comments ul li {
  padding: 10px 0;
  line-height: 1.5;
}

.xe-sidebar .widget_recent_entries ul li a {
  display: block;
  font-weight: 500;
  color: var(--xe-fg-color);
}

.xe-sidebar .widget_recent_entries .post-date {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--xe-muted);
}

.xe-sidebar .widget_recent_comments a {
  color: var(--xe-main-color);
}

.xe-sidebar .widget_calendar table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.xe-sidebar .widget_calendar th,
.xe-sidebar .widget_calendar td {
  padding: 6px 2px;
  text-align: center;
  border: 0;
}

.xe-sidebar .widget_calendar caption {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--xe-fg-color);
}

.xe-sidebar .widget_calendar #today {
  color: #fff;
  background: var(--xe-main-color);
  border-radius: 4px;
}

.xe-sidebar .widget select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--xe-fg-color);
  background: #fafafa;
  border: 1px solid var(--xe-border-color);
  border-radius: var(--xe-radius);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.xe-sidebar .widget select:focus {
  border-color: var(--xe-light-color);
  box-shadow: 0 0 0 3px rgba(var(--xe-main-rgb), .1);
}

.xe-sidebar .widget img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.xe-sidebar ol.wp-block-latest-comments {
    padding-left: 0;
}
@media screen and (max-width: 1100px) {
  .content-with-sidebar {
    gap: 20px;
  }
  .xe-sidebar {
    flex: 0 0 260px;
    width: 260px;
  }
}

@media screen and (max-width: 991px) {
  .content-with-sidebar {
    flex-direction: column;
    gap: 20px;
  }

  .content-with-sidebar .content-main,
  .xe-sidebar {
    flex: 1 1 auto;
    width: 100%;
  }

  .xe-sidebar {
    position: static;
    top: auto;
  }

  .xe-sidebar .widget {
    padding: 16px;
    border-radius: 6px;
  }

  .xe-sidebar .widget-title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .xe-sidebar .tagcloud a,
  .xe-sidebar .wp-block-tag-cloud a {
    font-size: 12px !important;
    padding: 4px 10px;
  }
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.xe-breadcrumbs {
  margin: 15px 0 15px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--xe-muted);
}

.xe-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xe-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--xe-muted);
}

.xe-breadcrumbs__item a {
  color: var(--xe-muted);
  text-decoration: none;
  transition: color .2s ease;
}

.xe-breadcrumbs__item a:hover {
  color: var(--xe-main-color);
}

.xe-breadcrumbs__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  color: #c9c9c9;
  line-height: 1;
  transform: translateY(1px);
}
.xe-breadcrumbs__sep svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.xe-breadcrumbs__item .current {
  color: var(--xe-fg-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.xe-breadcrumbs ol,
.xe-breadcrumbs ul {
  list-style: none;
  padding-left: 0;
}

@media screen and (max-width: 767px) {
  .xe-breadcrumbs {
    font-size: 12px;
    margin-bottom: 14px;
  }

  .xe-breadcrumbs__sep {
    margin: 0 6px;
  }

  .xe-breadcrumbs__item .current {
    max-width: 60vw;
  }
}

/* ============================================================
   Nothing Found - content-none.php empty state
   ============================================================ */
.no-results {
  position: relative;
  padding: 60px 28px 56px;
  text-align: center;
  background: #fff;
  border-radius: var(--xe-radius);
  box-shadow: var(--xe-shadow);
  animation: fade-in .55s ease both;
}

.no-results::before {
  content: "";
  display: block;
  width: 78px;
  height: 78px;
  margin: 0 auto 24px;
  background-color: rgba(var(--xe-main-rgb), .08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230EA5E9'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(var(--xe-main-rgb), .12);
}

.no-results .page-header {
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.no-results .page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--xe-fg-color);
}

.no-results .page-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--xe-main-color), var(--xe-dark-color));
}

.no-results .page-content {
  max-width: 520px;
  margin: 0 auto;
}

.no-results .page-content > p {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--xe-muted);
}

.no-results .page-content > p a {
  color: var(--xe-main-color);
  font-weight: 500;
}

.no-results .page-content > p a:hover {
  color: var(--xe-dark-color);
}

.no-results .search-form {
  position: relative;
  display: block;
  max-width: 460px;
  margin: 0 auto;
}

.no-results .search-form label {
  display: block;
  width: 100%;
  margin: 0;
}

.no-results .search-form .search-field {
  width: 100%;
  height: 50px;
  padding: 0 62px 0 22px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--xe-fg-color);
  background: #fafafa;
  border: 1px solid var(--xe-border-color);
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.no-results .search-form .search-field::placeholder {
  color: #bbb;
}

.no-results .search-form .search-field:focus {
  background: #fff;
  border-color: var(--xe-light-color);
  box-shadow: 0 0 0 4px rgba(var(--xe-main-rgb), .1);
}

.no-results .search-form .search-submit {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--xe-main-color), var(--xe-dark-color));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 16px, cover;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(var(--xe-main-rgb), .32);
  transition: transform .2s ease, box-shadow .2s ease;
}

.no-results .search-form .search-submit:hover,
.no-results .search-form .search-submit:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(var(--xe-main-rgb), .45);
  outline: none;
}

.no-results .search-form .search-submit:active {
  transform: scale(.98);
}

@media screen and (max-width: 767px) {
  .no-results {
    margin: 24px 0;
    padding: 40px 18px 36px;
    border-radius: 6px;
  }

  .no-results::before {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    background-size: 25px;
  }

  .no-results .page-title {
    font-size: 19px;
  }

  .no-results .page-title::after {
    margin-top: 12px;
  }

  .no-results .page-content > p {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .no-results .search-form .search-field {
    height: 46px;
    padding: 0 56px 0 18px;
    font-size: 14px;
  }

  .no-results .search-form .search-submit {
    top: 4px;
    right: 4px;
    width: 38px;
    height: 38px;
    background-size: 15px, cover;
  }
}

/* ============================================================
   Loop Entry - thumbnail left + excerpt
   ============================================================ */
.loop-entry {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 20px 0;
  padding: 20px;
  background: #fff;
  border-radius: var(--xe-radius);
  box-shadow: var(--xe-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: fade-in .5s ease both;
}

.loop-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--xe-shadow-hover);
}

.loop-entry__thumb {
  flex: 0 0 220px;
  width: 220px;
  height: 150px;
  display: block;
  overflow: hidden;
  background: #f4f4f4;
  border-radius: var(--xe-radius);
}

.loop-entry__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .45s ease;
}

.loop-entry:hover .loop-entry__thumb img {
  transform: scale(1.06);
}

.loop-entry__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.loop-entry .entry-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--xe-fg-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loop-entry .entry-title a {
  color: var(--xe-fg-color);
  transition: color .2s ease;
}

.loop-entry .entry-title a:hover {
  color: var(--xe-main-color);
}

.loop-entry .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--xe-muted);
}

.loop-entry .entry-meta a {
  color: var(--xe-muted);
}

.loop-entry .entry-meta a:hover {
  color: var(--xe-main-color);
}

.loop-entry .entry-meta .posted-on,
.loop-entry .entry-meta .byline {
  display: inline-flex;
  align-items: center;
}

.loop-entry .entry-meta .posted-on + .byline::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: #ccc;
  vertical-align: middle;
}

.loop-entry .entry-summary {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #777;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loop-entry .entry-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--xe-muted);
  border-top: 1px dashed var(--xe-border-color);
}

.loop-entry .entry-footer:empty {
  display: none;
}

.loop-entry .entry-footer a {
  color: var(--xe-muted);
}

.loop-entry .entry-footer a:hover {
  color: var(--xe-main-color);
}

.loop-entry .entry-footer .cat-links,
.loop-entry .entry-footer .tags-links,
.loop-entry .entry-footer .comments-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.loop-entry .entry-footer .comments-link a {
  color: var(--xe-main-color);
  font-weight: 500;
}

.loop-entry .entry-footer .edit-link {
  margin-left: auto;
}

.loop-entry.no-thumb .loop-entry__body {
  flex: 1 1 100%;
}

@media screen and (max-width: 767px) {
  .loop-entry {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 6px;
  }

  .loop-entry:hover {
    transform: none;
  }

  .loop-entry__thumb {
    flex: 0 0 auto;
    width: 100%;
    height: 180px;
  }

  .loop-entry .entry-title {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .loop-entry .entry-meta {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .loop-entry .entry-summary {
    font-size: 13px;
    -webkit-line-clamp: 3;
    margin-bottom: 10px;
  }

  .loop-entry .entry-footer {
    padding-top: 10px;
    font-size: 12px;
  }
}

/* ============================================================
   Sticky Footer - keep the footer at the bottom on short pages
   ============================================================ */
#page.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#page.site > .topbar,
#page.site > .xe-header {
  flex: 0 0 auto;
}

#page.site > main.site-main {
  flex: 1 0 auto;
  min-height: 0;
}

#page.site > .xe-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

.admin-bar #page.site {
  min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar #page.site {
    min-height: calc(100vh - 46px);
  }
}