/* ZenPath Craft V7.9.2 — compact, deliberate mobile home layout.
 * Presentation only. No routes, authorization, CMS or cart logic changed.
 * Loaded after previous theme layers to resolve legacy mobile overrides.
 */
@media (max-width: 650px) {
  /* The header contains four intentional controls, no redundant ZP square. */
  .header .head-inner {
    width: calc(100% - 28px);
    height: 66px;
    min-height: 66px;
    gap: 8px;
    align-items: center;
  }
  .head-brand { flex: 0 1 auto; min-width: 0; padding: 0!important; }
  .head-brand::before { content: none!important; display: none!important; }
  .head-brand .zp-brand-logo {
    width: 108px;
    max-width: 108px;
    max-height: 47px;
    object-fit: contain;
  }
  .right-nav { gap: 7px; min-width: 0; }
  .zp-mobile-account {
    min-height: 39px;
    padding: 0 10px;
    border-radius: 8px;
    background: #8c2636;
    border: 1px solid #ce6f70a8;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0;
  }
  .right-nav .icon-button { width: 38px; height: 39px; border-radius: 8px; }
  .right-nav .icon-button svg { width: 18px; height: 18px; }
  .mobile-nav-toggle { display: grid!important; }
  /* Content has its own width rather than inheriting the desktop hero heights. */
  #page-home .hero {
    display: flex!important;
    flex-direction: column;
    align-items: stretch;
    min-height: 0!important;
    height: auto!important;
    overflow: hidden;
    isolation: isolate;
    background: #110d0f;
  }
  #page-home .hero-bg {
    background:
      linear-gradient(180deg, rgba(12,9,11,.61) 0%, rgba(20,12,15,.52) 24%, rgba(15,9,12,.65) 57%, rgba(12,10,11,.95) 91%, #0c0c0d 100%) 0 0 / 100% 100% no-repeat,
      linear-gradient(90deg,rgba(21,6,13,.32),transparent 70%) 0 0 / 100% 100% no-repeat,
      var(--site-hero-url) 71% 49% / cover no-repeat!important;
    background-position:center,center,71% 49%!important;
    background-size:100% 100%,100% 100%,cover!important;
    background-repeat:no-repeat!important;
    transform:none!important;
  }
  #page-home .hero::before {
    background: linear-gradient(180deg, rgba(11,8,10,.3), transparent 22%, rgba(9,8,9,.18) 56%, #0c0c0d 100%)!important;
  }
  #page-home .hero::after { display:none!important; }
  #page-home .hero-inner {
    width: calc(100% - 36px)!important;
    max-width: 380px;
    min-height: 0!important;
    height: auto!important;
    margin: 0 auto;
    padding: 105px 0 0!important;
    align-items: center!important;
    justify-content: flex-start;
    text-align: center!important;
  }
  #page-home .zp-path-eyebrow {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    margin:0 auto 13px!important;
    font-family: 'Noto Sans Thai', Tahoma, sans-serif;
    font-size: 9.5px!important;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: .09em!important;
    color:#e0b98f;
    white-space: normal;
  }
  #page-home .zp-path-eyebrow::before {
    display:block;
    width:18px;
    flex:0 0 18px;
    background:#caa073;
  }
  #page-home .hero-logo {
    display: block;
    width: min(228px, 70vw)!important;
    max-width: 100%;
    max-height: 120px!important;
    height:auto;
    object-fit:contain;
    margin:0 auto 16px!important;
    filter:drop-shadow(0 9px 19px rgba(0,0,0,.65))!important;
  }
  #page-home .hero h1 {
    width:100%;
    max-width:340px;
    margin:0 auto 10px!important;
    font-size:clamp(22px,6.25vw,27px)!important;
    font-weight:900;
    line-height:1.43!important;
    letter-spacing:-.02em;
    text-align:center!important;
    text-wrap:balance;
    overflow-wrap:break-word;
  }
  #page-home .hero p {
    width:100%;
    max-width:338px!important;
    font-size:12.5px!important;
    line-height:1.8!important;
    font-weight:450;
    text-align:center!important;
    margin:0 auto!important;
    color:#e6d8d2!important;
    text-wrap:pretty;
  }
  #page-home .hero-controls {
    display:flex;
    width:100%;
    max-width:354px;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    gap:10px!important;
    margin:23px auto 0!important;
  }
  #page-home .hero .zp-main-cta {
    width:100%;
    max-width:none;
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:9px!important;
  }
  #page-home .hero .ip-chip {
    width:100%;
    max-width:none;
    height:54px;
    min-height:54px!important;
    padding:10px 16px!important;
    justify-content:center;
    border-radius:10px!important;
    text-align:left;
    background:linear-gradient(120deg,#ab3542,#7d2230)!important;
    border:1px solid #e08383a1!important;
  }
  #page-home .hero .ip-chip .tiny { font-size:10px; }
  #page-home .hero .ip-chip strong { font-size:15px; }
  #page-home .hero .zp-hero-store {
    width:100%;
    min-height:44px!important;
    height:44px;
    border-radius:10px!important;
    background:#241a1edc!important;
    color:#fff4eb;
    justify-content:center;
    font-size:13px;
    padding:8px 15px!important;
  }
  #page-home .hero .zp-hero-links {
    width:100%;
    max-width:none;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch!important;
    justify-items:stretch;
    justify-content:center!important;
    gap:8px!important;
    margin:0 auto!important;
  }
  #page-home .hero .zp-hero-mini {
    min-width:0;
    width:100%;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:6px 5px!important;
    border:1px solid #b27e6a4f!important;
    background:#1c1517a8;
    border-radius:8px;
    font-size:11.25px!important;
    color:#efdcce;
    white-space:nowrap;
  }
  #page-home .hero .zp-hero-mini svg {width:15px;height:15px;flex:none}
  #page-home .hero-status {
    position:relative!important;
    display:flex;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    transform:none!important;
    width:max-content;
    max-width:calc(100% - 36px);
    min-height:30px;
    margin:21px auto 17px;
    padding:7px 11px;
    justify-content:center;
    border-radius:20px;
    color:#e6d0bf;
    text-align:center;
    white-space:normal;
    gap:7px;
    font-size:10px;
    line-height:1.45;
    background:#1b1315c9;
    border:1px solid #a27d675e;
  }
  #page-home .hero-status i {flex:0 0 6px}
  /* Promotions should be the next story beat; no artificial blank section. */
  #page-home .promos {
    padding:20px 0 43px!important;
    margin:0;
    background:#0c0c0d!important;
  }
  #page-home .promos .wrap {width:calc(100% - 32px)}
  #page-home .zp-promo-heading {
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:8px;
    margin-bottom:17px;
  }
  #page-home .zp-promo-title .kicker {font-size:9px;letter-spacing:.08em;margin-bottom:2px}
  #page-home .zp-promo-heading .s-title {font-size:23px;line-height:1.35;margin:0!important}
  #page-home .zp-promo-heading-actions {flex-shrink:0}
  #page-home .zp-promo-heading .see-all{font-size:12px}
  #page-home .promo-stage {
    height:242px!important;
    min-height:242px;
    border-radius:14px!important;
    background:linear-gradient(125deg,#39151b,#271417 52%,#171013)!important;
  }
  #page-home .promo-body {
    left:17px;
    top:23px;
    transform:none;
    width:calc(100% - 54px);
    max-width:none;
  }
  #page-home .promo-body h3 {font-size:22px;line-height:1.4;margin:7px 0 7px}
  #page-home .promo-body p {font-size:12px;line-height:1.65;max-width:100%;margin-bottom:14px}
  #page-home .promo-body .btn {font-size:12px;padding:10px 13px}
  #page-home .promo-illustration {font-size:72px;right:13px;top:16px;opacity:.18}
  #page-home .promo-next {width:35px;height:35px;right:9px;bottom:12px}
  #page-home .promo-count{right:56px;bottom:23px}
  #page-home .promo-foot{margin-top:13px}
  #page-home .server-area {padding:45px 0 62px!important}
  #page-home .server-card {height:220px!important;min-height:220px!important}
}
@media(max-width:355px){
  .header .head-inner {width:calc(100% - 24px);gap:5px}
  .head-brand .zp-brand-logo{width:88px;max-width:88px}
  .right-nav{gap:4px}
  .zp-mobile-account{min-height:37px;padding:0 7px;font-size:10.5px}
  .zp-mobile-account svg{width:12px;height:12px}
  .right-nav .icon-button{width:35px;height:37px}
  #page-home .hero-inner {width:calc(100% - 30px)!important;padding-top:97px!important}
  #page-home .hero h1{font-size:22px!important}
  #page-home .hero-logo{width:min(205px,69vw)!important}
  #page-home .hero .zp-hero-mini{font-size:10px!important;padding:6px 3px!important}
  #page-home .hero .zp-hero-links{gap:5px!important}
  #page-home .hero-status{font-size:9.5px;gap:5px}
  #page-home .zp-promo-heading .s-title{font-size:21px}
  #page-home .promo-body h3{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  #page-home .hero *,#page-home .promo-stage *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}