/* YunaGRP V6.6.2 — Mobile UX/UI Rebuild */

/* Universal safety — prevents seasonal grid overflow */
body.store-page .home-app-shell,
body.store-page .home-main-panel,
body.store-page .home-dashboard-grid,
body.store-page .home-profile-hero,
body.store-page .quick-menu-card,
body.store-page .usage-summary-card,
body.store-page .compact-rentals-card,
body.store-page .recent-orders-card,
body.store-page .menu-link-item,
body.store-page .profile-info-lines > span{
  min-width:0;
  box-sizing:border-box;
}

/* Stat pills: outer span owns pill, icon span does not. */
.profile-info-lines > span{
  position:relative;
  overflow:visible;
}
.profile-info-lines > span > .launcher-icon{
  padding:0!important;
  margin:0!important;
  border-width:1px!important;
  box-sizing:border-box!important;
}

@media(max-width:900px){
  body.store-page{overflow-x:hidden!important}

  /* Production final: mobile header scrolls with the page, never sticks over content. */
  body.store-page .topbar{
    position:relative!important;
    top:auto!important;
    inset:auto!important;
    z-index:20!important;
  }
  body.store-page main.container,
  body.store-page .container{max-width:100%!important;width:100%!important}
  body.store-page main.container{padding-left:12px!important;padding-right:12px!important}

  /* Header becomes a compact two-row launcher rail. */
  body.store-page .topbar{padding:8px 0!important}
  body.store-page .topbar .nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px 12px!important;
    border-radius:22px!important;
    min-height:0!important;
  }
  body.store-page .topbar .brand{min-width:0!important}
  body.store-page .topbar .brand>span:last-child{min-width:0!important}
  body.store-page .topbar .brand strong{font-size:16px!important}
  body.store-page .topbar .brand small{font-size:8px!important;white-space:normal!important;line-height:1.25!important}
  body.store-page .topbar .brand-icon{width:44px!important;height:44px!important;min-width:44px!important}
  body.store-page .mobile-menu-btn{display:none!important}
  body.store-page .topbar nav[data-menu]{
    grid-column:1/-1!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 0 1px!important;
    min-width:0!important;
  }
  body.store-page .topbar nav[data-menu]::-webkit-scrollbar{display:none!important}
  body.store-page .topbar nav[data-menu] a,
  body.store-page .topbar nav[data-menu] .theme-toggle{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding:7px 10px!important;
    border-radius:14px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  body.store-page .topbar nav[data-menu] .launcher-icon{width:1.55em!important;height:1.55em!important}
  body.store-page .theme-toggle-text{display:inline!important}

  /* Every launcher collapses cleanly before theme-specific personality is reapplied. */
  body.store-page .home-app-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
  }
  body.store-page .home-side-panel{
    position:static!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    padding:12px!important;
    border-radius:20px!important;
  }
  body.store-page .home-side-brand{display:none!important}
  body.store-page .home-side-nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  body.store-page .home-side-nav a{
    min-width:0!important;
    min-height:52px!important;
    padding:10px!important;
    margin:0!important;
    transform:none!important;
    border-radius:14px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:13px!important;
  }
  body.store-page .home-side-nav .launcher-icon{width:1.85em!important;height:1.85em!important}

  body.store-page .home-main-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:none!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.store-page .home-main-panel > *{
    grid-column:1!important;
    grid-row:auto!important;
    grid-area:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    order:initial!important;
  }
  body.store-page .home-dashboard-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
  }
  body.store-page .home-dashboard-grid > *{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    order:initial!important;
  }

  /* Hero stays full-width and balanced. */
  body.store-page .home-profile-hero{
    width:100%!important;
    padding:18px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  body.store-page .home-profile-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    align-items:start!important;
  }
  body.store-page .home-profile-head h1{font-size:34px!important;line-height:1.05!important;margin-top:8px!important}
  body.store-page .home-profile-email{font-size:15px!important;word-break:break-word!important}
  body.store-page .home-profile-badges{align-items:flex-end!important;gap:8px!important}
  body.store-page .user-avatar-orb{width:62px!important;height:62px!important;border-radius:18px!important}
  body.store-page .home-profile-badges .btn{padding:10px 14px!important;font-size:13px!important}

  /* Critical icon/pill repair. */
  body.store-page .profile-info-lines{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin-top:12px!important;
  }
  body.store-page .profile-info-lines > span{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    transform:none!important;
    min-width:0!important;
    padding:9px 10px!important;
    border-radius:14px!important;
    font-size:11px!important;
    overflow:hidden!important;
  }
  body.store-page .profile-info-lines > span b{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.store-page .profile-info-lines .launcher-icon{
    width:1.7em!important;height:1.7em!important;
    min-width:1.7em!important;min-height:1.7em!important;
    flex:0 0 1.7em!important;
    padding:0!important;margin:0!important;
    transform:none!important;
  }

  /* Generic section rhythm */
  body.store-page .quick-menu-card,
  body.store-page .usage-summary-card,
  body.store-page .compact-rentals-card,
  body.store-page .recent-orders-card{padding:16px!important;border-radius:20px!important}
  body.store-page .section-head{gap:8px!important;flex-wrap:wrap!important}
  body.store-page .section-chip{font-size:11px!important}

  body.store-page .usage-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.store-page .usage-mini-grid>div{min-width:0!important;padding:12px!important}
  body.store-page .customer-login-session-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.store-page .compact-rental-list,
  body.store-page .mobile-order-list{grid-template-columns:1fr!important}

  /* Forms/profile/package pages: never retain desktop split grids. */
  body.store-page .client-hub-shell,
  body.store-page .package-overview-grid,
  body.store-page .client-menu-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:none!important;
    width:100%!important;
  }
  body.store-page .client-hub-shell > *,
  body.store-page .package-overview-grid > *,
  body.store-page .client-menu-grid > *{
    grid-column:1!important;grid-row:auto!important;grid-area:auto!important;min-width:0!important;width:100%!important;
  }
  body.store-page .client-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Seasonal identity preserved on mobile */
  html[data-skin="spring"] body.store-page .home-side-nav a{border-radius:999px!important;justify-content:center!important}
  html[data-skin="spring"] body.store-page .menu-link-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  html[data-skin="spring"] body.store-page .menu-link-item{min-height:126px!important;border-radius:22px!important;padding:14px!important}

  html[data-skin="summer"] body.store-page .home-side-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html[data-skin="summer"] body.store-page .home-side-nav a{
    min-height:78px!important;
    flex-direction:column!important;
    justify-content:center!important;
    text-align:center!important;
    gap:5px!important;
    border-radius:20px!important;
  }
  html[data-skin="summer"] body.store-page .home-side-nav .launcher-icon{width:2.15em!important;height:2.15em!important}
  html[data-skin="summer"] body.store-page .menu-link-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  html[data-skin="summer"] body.store-page .menu-link-item{
    position:relative!important;
    min-height:138px!important;
    padding:54px 13px 13px!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    text-align:left!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  html[data-skin="summer"] body.store-page .menu-link-item>.launcher-icon{
    position:absolute!important;
    left:13px!important;top:12px!important;
    width:2.25em!important;height:2.25em!important;
    min-width:2.25em!important;min-height:2.25em!important;
  }
  html[data-skin="summer"] body.store-page .menu-link-item>div{position:relative!important;z-index:2!important;width:100%!important}
  html[data-skin="summer"] body.store-page .menu-link-item strong{font-size:15px!important;line-height:1.2!important;padding-right:20px!important}
  html[data-skin="summer"] body.store-page .menu-link-item small{font-size:11px!important;line-height:1.35!important;max-width:100%!important}
  html[data-skin="summer"] body.store-page .menu-link-item>span:last-child{right:12px!important;top:10px!important}
  html[data-skin="summer"] body.store-page .usage-summary-card,
  html[data-skin="summer"] body.store-page .quick-menu-card{grid-column:1!important;width:100%!important}

  html[data-skin="autumn"] body.store-page .home-side-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-skin="autumn"] body.store-page .home-side-nav a{border-radius:4px!important}
  html[data-skin="autumn"] body.store-page .home-profile-head h1{font-size:38px!important}
  html[data-skin="autumn"] body.store-page .menu-link-list{grid-template-columns:1fr!important}
  html[data-skin="autumn"] body.store-page .menu-link-item{min-height:92px!important;border-radius:4px!important}

  html[data-skin="winter"] body.store-page .home-side-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html[data-skin="winter"] body.store-page .home-side-nav a{
    min-height:72px!important;
    flex-direction:column!important;
    justify-content:center!important;
    text-align:center!important;
    letter-spacing:.03em!important;
    font-size:11px!important;
  }
  html[data-skin="winter"] body.store-page .menu-link-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html[data-skin="winter"] body.store-page .menu-link-item{min-height:100px!important;border-radius:10px!important}
}

@media(max-width:520px){
  body.store-page main.container{padding-left:10px!important;padding-right:10px!important}
  body.store-page .topbar .nav{padding:9px 10px!important}
  body.store-page .topbar nav[data-menu] a,
  body.store-page .topbar nav[data-menu] .theme-toggle{font-size:11px!important;padding:7px 9px!important}
  body.store-page .home-profile-head h1{font-size:30px!important}
  body.store-page .profile-info-lines{grid-template-columns:1fr!important}
  body.store-page .profile-info-lines > span{font-size:11px!important}
  body.store-page .customer-login-session-grid{grid-template-columns:1fr!important}
  body.store-page .usage-mini-grid{grid-template-columns:1fr 1fr!important}

  html[data-skin="spring"] body.store-page .menu-link-list,
  html[data-skin="summer"] body.store-page .menu-link-list,
  html[data-skin="winter"] body.store-page .menu-link-list{grid-template-columns:1fr!important}
  html[data-skin="summer"] body.store-page .menu-link-item{min-height:110px!important;padding-top:48px!important}
  html[data-skin="winter"] body.store-page .home-side-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:380px){
  body.store-page .home-side-nav{grid-template-columns:1fr!important}
  html[data-skin="summer"] body.store-page .home-side-nav,
  html[data-skin="winter"] body.store-page .home-side-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.store-page .usage-mini-grid{grid-template-columns:1fr!important}
}