/* TechStore mobile hardening layer.
   Loaded last so it fixes mobile/tablet layout without changing desktop. */

@media (max-width: 900px) {
  :root {
    --mobile-page-gap: 14px;
    --mobile-card-radius: 18px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  video,
  svg,
  canvas {
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font: inherit;
  }

  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  .container,
  .products-page,
  .profile-page,
  .product-detail,
  .product-reviews,
  .similar-products-section,
  .product-description-section {
    width: calc(100% - (var(--mobile-page-gap) * 2)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .page-body {
    min-width: 0;
    overflow-x: clip;
  }

  /* Header */
  .header {
    min-height: 58px !important;
  }

  .header .header-top-row {
    min-height: 58px !important;
    width: calc(100% - 18px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .header-primary {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-navbar {
    order: 0 !important;
    flex: 0 0 auto !important;
  }

  .header .logo {
    min-width: 0 !important;
    margin: 0 !important;
    max-width: 128px !important;
  }

  .header .logo-img {
    max-width: 108px !important;
    max-height: 30px !important;
    object-fit: contain !important;
  }

  .header .logo-site-name {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-search {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    justify-self: end;
  }

  .header-search .search-toggle,
  .nav-toggle,
  .mobile-nav-close {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .header .actions {
    min-width: 0;
    gap: 3px !important;
    justify-content: flex-end !important;
  }

  .header .actions > a,
  .header .actions > button,
  .header .cart-action,
  .header .theme-toggle,
  .header .bell-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }

  .header .actions .btn-label {
    display: none !important;
  }

  .header-search .search-form {
    left: 10px !important;
    right: 10px !important;
    top: 66px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  .header-search .search-form input {
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .header-navbar nav {
    width: min(330px, 90vw) !important;
    max-width: 90vw !important;
    height: 100dvh !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  .header-navbar nav > ul > li > a,
  .header-navbar .nav-dropdown-toggle,
  .header-navbar .nav-theme-btn {
    min-height: 48px !important;
  }

  .header-navbar .nav-dropdown.nav-mega {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    padding: 8px !important;
    grid-template-columns: 1fr !important;
    box-shadow: none !important;
  }

  .header-navbar .nav-mega-head {
    display: none !important;
  }

  .header-navbar .nav-mega-col {
    padding: 8px !important;
  }

  /* Home */
  .apple-hero {
    padding: 34px 0 46px !important;
  }

  .apple-hero-layout {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    text-align: center !important;
  }

  .apple-hero-copy {
    max-width: 620px !important;
    margin-inline: auto !important;
  }

  .apple-display-title {
    font-size: clamp(2.2rem, 9vw, 3.8rem) !important;
    line-height: 1.02 !important;
  }

  .apple-display-subtitle {
    max-width: 40ch !important;
    margin-inline: auto !important;
    font-size: .9rem !important;
    line-height: 1.85 !important;
  }

  .apple-hero-actions,
  .apple-hero-proof,
  .apple-eyebrow {
    justify-content: center !important;
  }

  .apple-product-stage {
    min-height: clamp(330px, 72vw, 500px) !important;
  }

  .apple-section-head,
  .section-head-row {
    gap: 10px !important;
  }

  .tech-world-grid {
    grid-template-columns: 1fr !important;
  }

  .tech-world-card {
    min-height: 360px !important;
  }

  .category-mini-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .product-rail {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .product-rail > .product-card {
    scroll-snap-align: start;
  }

  /* Shop */
  .products-page {
    padding-top: 18px !important;
  }

  .shop-hero-panel {
    padding: 20px !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  .shop-search-row,
  .shop-layout {
    grid-template-columns: 1fr !important;
  }

  .shop-toolbar {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .shop-toolbar-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
  }

  .shop-sort-select,
  .shop-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .shop-filter-toggle {
    min-height: 42px !important;
    white-space: nowrap;
  }

  .filter-drawer {
    width: min(390px, 94vw) !important;
    max-width: 94vw !important;
    height: 100dvh !important;
  }

  .filter-sidebar-inner {
    min-width: 0 !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .products-grid > * {
    min-width: 0 !important;
  }

  .products-grid .product-card {
    min-width: 0 !important;
    border-radius: 16px !important;
  }

  .products-grid .product-card-media,
  .products-grid .product-card-image-wrap {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .products-grid .product-card-media img,
  .products-grid .product-card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .products-grid .product-card-title {
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Product detail */
  .product-detail-breadcrumb {
    width: calc(100% - (var(--mobile-page-gap) * 2)) !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .product-detail {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding-top: 16px !important;
  }

  .product-detail .product-gallery {
    position: static !important;
    width: 100% !important;
  }

  .product-detail .product-image-swiper .swiper-slide {
    height: clamp(320px, 68vw, 480px) !important;
    min-height: 0 !important;
  }

  .product-detail .product-image-swiper img {
    max-height: 100% !important;
  }

  .product-detail .product-info {
    width: 100% !important;
    min-width: 0 !important;
  }

  .product-detail .product-price-panel {
    width: 100% !important;
  }

  .product-detail .buy-box {
    width: 100% !important;
  }

  .product-detail .add-to-cart-form {
    min-width: 0 !important;
  }

  .product-detail .product-assurance-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  /* Account/profile */
  .profile-page {
    padding-top: 18px !important;
  }

  .profile-header {
    padding: 16px !important;
    border-radius: var(--mobile-card-radius) !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
  }

  .profile-header-info {
    min-width: 0 !important;
  }

  .profile-avatar {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
  }

  .profile-header h1 {
    font-size: 1.15rem !important;
    overflow-wrap: anywhere;
  }

  .profile-status {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .profile-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .profile-nav {
    position: sticky !important;
    top: 58px !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    background: color-mix(in srgb,var(--ts-surface) 94%,transparent) !important;
    backdrop-filter: blur(18px);
  }

  .profile-nav::-webkit-scrollbar {
    display: none;
  }

  .profile-nav-link {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }

  .profile-nav-exit {
    margin-inline-start: auto !important;
  }

  .profile-main {
    min-width: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  .dashboard-cards,
  .customer-dashboard-cards,
  .quick-actions-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  .dashboard-stat-card,
  .quick-action-card {
    min-width: 0 !important;
  }

  .profile-section {
    min-width: 0 !important;
  }

  .profile-form .form-row,
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .profile-form input,
  .profile-form select,
  .profile-form textarea,
  .auth-form input,
  .auth-form select,
  .auth-form textarea {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  /* Cart, wishlist, orders */
  .cart-modern-layout {
    grid-template-columns: 1fr !important;
  }

  .cart-modern-summary {
    position: static !important;
  }

  .cart-modern-item {
    min-width: 0 !important;
  }

  .wishlist-item-card {
    min-width: 0 !important;
  }

  .orders-page,
  .orders-list,
  .order-card {
    min-width: 0 !important;
  }

  .order-card-head,
  .order-card-foot,
  .order-detail-head {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .order-status-steps {
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  /* Authentication */
  .auth-page {
    min-height: calc(100dvh - 58px) !important;
    padding: 18px 0 !important;
  }

  .auth-split {
    width: calc(100% - 22px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 22px !important;
  }

  .auth-main {
    min-width: 0 !important;
    padding: 22px !important;
  }

  .auth-side {
    min-height: 220px !important;
  }

  /* Footer + overlays */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 24px !important;
  }

  .cart-drawer {
    width: min(390px, 96vw) !important;
    max-width: 96vw !important;
  }

  .bell-panel,
  .account-panel {
    max-width: calc(100vw - 20px) !important;
  }

  .messages-wrap {
    top: 66px !important;
  }

  /* Generic tables/forms */
  .admin-table-wrap,
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    width: 100%;
  }

  /* Admin */
  .admin-layout {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  .admin-layout .sidebar.admin-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }

  .admin-sidebar .admin-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 5px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  .admin-sidebar .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-sidebar .admin-nav-item {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;
  }

  .admin-sidebar .admin-nav-item span {
    white-space: nowrap !important;
  }

  .admin-sidebar .admin-nav-exit {
    display: none !important;
  }

  .admin-panel {
    min-width: 0 !important;
    width: 100% !important;
  }

  .admin-panel-header,
  .admin-dashboard-head,
  .inventory-list-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .admin-panel-actions,
  .admin-dashboard-head > *,
  .accounting-toolbar-actions {
    max-width: 100%;
  }

  .admin-management-grid,
  .admin-catalog-lists,
  .chart-grid {
    grid-template-columns: 1fr !important;
  }

  .products-filter-bar,
  .inventory-filter-bar,
  .reviews-filter-card {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .products-filter-search,
  .inventory-filter-search,
  .reviews-filter-search {
    grid-column: 1 / -1 !important;
  }

  .kpi-grid,
  .reviews-kpi-grid,
  .admin-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .admin-table-wrap .admin-table {
    min-width: 720px;
  }

  /* Touch sizing */
  .btn,
  button:not(.swiper-button-next):not(.swiper-button-prev),
  input[type="submit"] {
    min-height: 40px;
  }
}

@media (max-width: 620px) {
  :root {
    --mobile-page-gap: 11px;
  }

  .header .header-top-row {
    width: calc(100% - 12px) !important;
    grid-template-columns: auto minmax(0,1fr) auto auto !important;
    gap: 5px !important;
  }

  .header .logo {
    max-width: 92px !important;
  }

  .header .logo-img {
    max-width: 84px !important;
    max-height: 27px !important;
  }

  .header .logo-site-name {
    display: none !important;
  }

  .header .actions {
    gap: 1px !important;
  }

  .header .actions > a,
  .header .actions > button,
  .header .cart-action,
  .header .theme-toggle,
  .header .bell-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }

  .apple-display-title {
    font-size: clamp(2rem, 12vw, 3rem) !important;
  }

  .apple-hero-actions {
    width: 100%;
    flex-direction: column;
  }

  .apple-btn,
  .apple-link-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .apple-hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    width: 100%;
  }

  .category-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .tech-world-card {
    min-height: 330px !important;
    border-radius: 20px !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .products-grid .product-card-body {
    padding: 8px !important;
  }

  .products-grid .product-card-title {
    font-size: .68rem !important;
  }

  .products-grid .product-card-desc,
  .products-grid .stock-line,
  .products-grid .pc-cat {
    display: none !important;
  }

  .product-detail .product-info h1 {
    font-size: 1.65rem !important;
  }

  .product-detail .product-price-panel {
    padding: 13px !important;
    align-items: flex-start !important;
  }

  .product-detail .product-techcoin {
    display: none !important;
  }

  .product-detail .add-to-cart-form {
    grid-template-columns: 1fr !important;
  }

  .product-detail .qty-selector,
  .product-detail .buy-btn {
    width: 100% !important;
  }

  .product-detail .product-assurance-grid {
    grid-template-columns: 1fr !important;
  }

  .product-description-head {
    padding: 17px !important;
  }

  .product-description-content {
    padding: 18px !important;
  }

  .profile-header {
    padding: 13px !important;
  }

  .profile-main {
    padding: 13px !important;
  }

  .dashboard-cards,
  .customer-dashboard-cards,
  .quick-actions-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .dashboard-stat-card,
  .quick-action-card {
    padding: 12px !important;
  }

  .profile-section-head {
    align-items: flex-start !important;
  }

  .cart-modern-item {
    grid-template-columns: 76px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 11px !important;
  }

  .cart-modern-media {
    width: 76px !important;
    height: 76px !important;
  }

  .cart-modern-bottom {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding-top: 10px;
    border-top: 1px solid var(--ts-line);
  }

  .wishlist-item-card {
    grid-template-columns: 78px minmax(0,1fr) !important;
    gap: 10px !important;
  }

  .wishlist-item-media {
    width: 78px !important;
    height: 78px !important;
  }

  .wishlist-item-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .order-card {
    padding: 13px !important;
  }

  .auth-main {
    padding: 18px !important;
  }

  .auth-side {
    min-height: 180px !important;
  }

  .footer {
    padding-top: 38px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .footer-bottom {
    gap: 8px;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .mobile-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .products-filter-bar,
  .inventory-filter-bar,
  .reviews-filter-card,
  .kpi-grid,
  .reviews-kpi-grid,
  .admin-dashboard-kpis {
    grid-template-columns: 1fr !important;
  }

  .products-filter-search,
  .inventory-filter-search,
  .reviews-filter-search {
    grid-column: auto !important;
  }

  .admin-panel {
    padding: 12px !important;
  }

  .admin-panel-header {
    padding: 12px !important;
  }

  .management-form-row,
  .management-form-row--compact,
  .accounting-date-fields,
  .inventory-action-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .header .actions .theme-toggle {
    display: none !important;
  }

  .header .logo {
    max-width: 74px !important;
  }

  .header .logo-img {
    max-width: 70px !important;
  }

  .apple-hero-proof {
    grid-template-columns: 1fr 1fr !important;
  }

  .products-grid {
    gap: 7px !important;
  }

  .products-grid .product-card-body {
    padding: 7px !important;
  }

  .products-grid .product-card-title {
    font-size: .64rem !important;
  }

  .dashboard-stat-card,
  .quick-action-card {
    min-height: 82px !important;
  }

  .profile-nav-link {
    font-size: .68rem !important;
    padding-inline: 9px !important;
  }

  .cart-modern-item,
  .wishlist-item-card {
    grid-template-columns: 70px minmax(0,1fr) !important;
  }

  .cart-modern-media,
  .wishlist-item-media {
    width: 70px !important;
    height: 70px !important;
  }

  .admin-table-wrap .admin-table {
    min-width: 650px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .product-card:hover,
  .category-card:hover,
  .tech-world-card:hover,
  .dashboard-stat-card:hover,
  .quick-action-card:hover {
    transform: none !important;
  }

  .btn,
  button,
  .profile-nav-link,
  .admin-nav-item {
    touch-action: manipulation;
  }
}


/* =========================================================
   Mobile compactness pass v3
   ========================================================= */
@media (max-width:900px){
  /* Bottom bar: all five actions use exactly the same geometry. */
  .mobile-bottom-bar{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom))!important;
    min-height:58px!important;
  }
  .mobile-bottom-bar .mb-item{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    height:50px!important;
    margin:0!important;
    padding:4px 0!important;
    gap:2px!important;
    border-radius:10px!important;
    font-size:.61rem!important;
    line-height:1!important;
  }
  .mobile-bottom-bar .mb-item i{
    width:20px!important;
    height:20px!important;
    display:grid!important;
    place-items:center!important;
    margin:0 auto!important;
    font-size:1rem!important;
    line-height:1!important;
  }
  .mobile-bottom-bar .mb-item > span:not(.mb-cart-badge){
    display:block!important;
    min-height:11px!important;
    margin:0!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  .mobile-bottom-bar .mb-cart-badge{
    top:2px!important;
    right:calc(50% - 20px)!important;
  }

  /* Mobile menu: category title itself is the action; remove duplicate view buttons. */
  .header-navbar .nav-mega-col-link,
  .header-navbar .nav-dropdown-all{
    display:none!important;
  }
  .header-navbar .nav-dropdown.nav-mega{
    padding:4px!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
  }
  .header-navbar .nav-mega-col{
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid var(--ts-line)!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .header-navbar .nav-mega-col:last-of-type{
    border-bottom:0!important;
  }
  .header-navbar .nav-mega-col-title{
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 10px!important;
    margin:0!important;
    font-size:.76rem!important;
    font-weight:800!important;
    line-height:1.2!important;
  }
  .header-navbar .nav-mega-sub{
    margin:0 10px 7px!important;
    padding:0!important;
    display:grid!important;
    gap:2px!important;
  }
  .header-navbar .nav-mega-sub li{
    margin:0!important;
  }
  .header-navbar .nav-mega-sub a{
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 10px!important;
    border-radius:8px!important;
    font-size:.68rem!important;
  }
}

@media (max-width:620px){
  /* Reduce vertical rhythm throughout the storefront. */
  .apple-categories,
  .categories-section,
  .product-rail-section,
  .special-products,
  .new-products-section,
  .best-sellers-section,
  .brands-section,
  .apple-features,
  .trust-strip{
    padding-top:30px!important;
    padding-bottom:30px!important;
  }

  .section-head-row,
  .apple-section-head{
    margin-bottom:14px!important;
  }
  .section-kicker{
    font-size:.58rem!important;
    padding:4px 8px!important;
  }
  .section-head-copy h2,
  .apple-section-head h2{
    font-size:1.35rem!important;
    line-height:1.35!important;
  }
  .section-head-copy p,
  .apple-section-head p{
    font-size:.68rem!important;
    line-height:1.65!important;
  }
  .section-link{
    min-height:32px!important;
    padding:0 9px!important;
    font-size:.60rem!important;
  }

  /* Benefit cards: 2x2 compact grid instead of four tall cards. */
  .apple-features .trust-strip-grid,
  .features.trust-strip .trust-strip-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .apple-features .trust-item,
  .features.trust-strip .trust-item{
    min-height:82px!important;
    padding:9px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:2px!important;
    align-content:center!important;
    align-items:center!important;
    border-radius:14px!important;
  }
  .apple-features .trust-item .feature-icon,
  .features.trust-strip .trust-item .feature-icon{
    width:30px!important;
    height:30px!important;
    grid-row:1 / 3!important;
    border-radius:9px!important;
    font-size:.72rem!important;
  }
  .apple-features .trust-item h3,
  .features.trust-strip .trust-item h3{
    margin:0!important;
    font-size:.68rem!important;
    line-height:1.45!important;
  }
  .apple-features .trust-item p,
  .features.trust-strip .trust-item p{
    margin:0!important;
    font-size:.54rem!important;
    line-height:1.5!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  /* Category cards: two compact columns. */
  .category-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .category-mini-card{
    min-height:68px!important;
    padding:9px!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:8px!important;
    border-radius:14px!important;
  }
  .category-mini-icon{
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
    font-size:.72rem!important;
  }
  .category-mini-copy{
    gap:2px!important;
  }
  .category-mini-copy strong{
    font-size:.70rem!important;
    line-height:1.35!important;
  }
  .category-mini-copy>span{
    font-size:.55rem!important;
    line-height:1.3!important;
  }
  .category-mini-arrow{
    display:none!important;
  }

  /* Category listing page cards. */
  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .category-grid .category-card{
    min-height:112px!important;
    padding:12px!important;
    border-radius:15px!important;
  }
  .category-grid .category-icon{
    width:36px!important;
    height:36px!important;
    margin-bottom:8px!important;
  }
  .category-grid .category-card h3{
    font-size:.76rem!important;
  }
  .category-grid .category-card p{
    font-size:.58rem!important;
  }
  .category-grid .category-subcats{
    gap:4px!important;
  }
  .category-grid .category-subcat-chip{
    padding:3px 6px!important;
    font-size:.52rem!important;
  }

  /* Product cards across home rails + shop grid. */
  .product-rail-section .products-scroll-wrap{
    padding:6px 5px 42px!important;
    border-radius:16px!important;
  }
  .product-rail-section .product-rail{
    gap:7px!important;
    padding:4px 22px 8px!important;
  }
  .product-rail-section .product-rail>.product-card{
    flex:0 0 min(43vw,158px)!important;
    width:min(43vw,158px)!important;
    min-width:min(43vw,158px)!important;
    max-width:158px!important;
  }
  .product-card{
    border-radius:14px!important;
  }
  .product-card .product-card-media,
  .product-card .product-card-image-wrap{
    aspect-ratio:1.12 / 1!important;
    min-height:0!important;
  }
  .product-card .product-card-media img,
  .product-card .product-card-image-wrap img{
    padding:4px!important;
  }
  .product-card .pc-floating-actions{
    display:none!important;
  }
  .product-card .pc-badges{
    top:6px!important;
    right:6px!important;
    gap:3px!important;
  }
  .product-card .pc-discount,
  .product-card .pc-rank,
  .product-card .pstock-badge{
    padding:3px 6px!important;
    font-size:.50rem!important;
  }
  .product-card .product-card-body{
    padding:7px!important;
    gap:4px!important;
  }
  .product-card .product-card-meta,
  .product-card .card-rating,
  .product-card .product-card-desc,
  .product-card .stock-line,
  .product-card .sold-badge{
    display:none!important;
  }
  .product-card .product-card-title{
    min-height:2.5em!important;
    margin:0 0 4px!important;
    font-size:.64rem!important;
    line-height:1.45!important;
    -webkit-line-clamp:2!important;
  }
  .product-card .product-card-prices{
    margin:0!important;
    gap:4px!important;
  }
  .product-card .price{
    font-size:.75rem!important;
    line-height:1.4!important;
  }
  .product-card .price-old{
    font-size:.52rem!important;
  }
  .product-card .product-card-footer{
    margin-top:4px!important;
    padding-top:6px!important;
    border-top:1px solid var(--ts-line)!important;
  }
  .product-card .card-add-btn{
    width:100%!important;
    min-height:30px!important;
    padding:0 7px!important;
    justify-content:center!important;
    border-radius:8px!important;
    font-size:.56rem!important;
    gap:4px!important;
  }

  /* Brand grid: keep logos visible but halve tile height. */
  .brand-logo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:15px!important;
  }
  .brand-logo-card{
    min-height:74px!important;
    padding:8px!important;
    gap:4px!important;
  }
  .brand-logo-card .brand-logo-mark{
    height:24px!important;
    max-height:24px!important;
    max-width:72px!important;
  }
  .brand-logo-card .brand-logo-mark--word{
    height:20px!important;
    max-height:20px!important;
    max-width:72px!important;
  }
  .brand-logo-card .brand-logo-fallback{
    font-size:.68rem!important;
  }
  .brand-logo-card span{
    font-size:.54rem!important;
  }

  /* Large editorial cards. */
  .tech-world-card:not(.tech-world-mobile){
    min-height:260px!important;
    border-radius:18px!important;
  }
  .tech-world-copy{
    padding:17px!important;
  }
  .tech-world-copy h3{
    font-size:1.2rem!important;
  }
  .tech-world-copy p{
    font-size:.66rem!important;
    line-height:1.6!important;
    margin:6px 0 10px!important;
  }

  /* Account/dashboard cards. */
  .dashboard-stat-card,
  .quick-action-card{
    min-height:74px!important;
    padding:9px!important;
    gap:7px!important;
    border-radius:13px!important;
  }
  .dashboard-stat-icon{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
  }
  .dashboard-stat-card strong{
    font-size:.82rem!important;
  }
  .dashboard-stat-card span,
  .quick-action-card{
    font-size:.60rem!important;
  }
}

@media (max-width:390px){
  .product-rail-section .product-rail>.product-card{
    flex-basis:154px!important;
    width:154px!important;
    min-width:154px!important;
  }
  .category-mini-card{
    min-height:64px!important;
    padding:8px!important;
  }
  .apple-features .trust-item,
  .features.trust-strip .trust-item{
    min-height:78px!important;
    padding:8px!important;
  }
}


/* Technology worlds — compact 2 + 1 mobile composition */
@media (max-width:620px){
  .apple-tech-worlds{
    padding-top:28px!important;
    padding-bottom:30px!important;
  }

  .apple-tech-worlds .tech-world-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
    direction:rtl;
    align-items:stretch!important;
  }

  .apple-tech-worlds .tech-world-card,
  .apple-tech-worlds .tech-world-card:first-child,
  .apple-tech-worlds .tech-world-card:nth-child(2),
  .apple-tech-worlds .tech-world-card:nth-child(3){
    width:100%!important;
    min-width:0!important;
    aspect-ratio:auto!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }

  .apple-tech-worlds .tech-world-mobile{
    grid-column:1!important;
    grid-row:1!important;
    height:205px!important;
    min-height:205px!important;
    max-height:205px!important;
  }

  .apple-tech-worlds .tech-world-laptop{
    grid-column:2!important;
    grid-row:1!important;
    height:205px!important;
    min-height:205px!important;
    max-height:205px!important;
  }

  .apple-tech-worlds .tech-world-gaming{
    grid-column:1 / -1!important;
    grid-row:2!important;
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
  }

  .apple-tech-worlds .tech-world-card img{
    width:100%!important;
    height:100%!important;
    inset:0!important;
    object-fit:cover!important;
  }

  .apple-tech-worlds .tech-world-mobile img{
    object-position:center center!important;
  }

  .apple-tech-worlds .tech-world-copy,
  .apple-tech-worlds .tech-world-mobile .tech-world-copy{
    padding:11px!important;
  }

  .apple-tech-worlds .tech-world-copy>span{
    margin-bottom:3px!important;
    font-size:.48rem!important;
    letter-spacing:.08em!important;
  }

  .apple-tech-worlds .tech-world-copy h3,
  .apple-tech-worlds .tech-world-mobile .tech-world-copy h3{
    margin:0!important;
    font-size:.76rem!important;
    line-height:1.4!important;
    letter-spacing:0!important;
  }

  .apple-tech-worlds .tech-world-copy p,
  .apple-tech-worlds .tech-world-mobile .tech-world-copy p{
    display:none!important;
  }

  .apple-tech-worlds .tech-world-copy strong,
  .apple-tech-worlds .tech-world-mobile .tech-world-copy strong{
    margin-top:6px!important;
    gap:4px!important;
    font-size:.53rem!important;
    line-height:1.2!important;
  }

  .apple-tech-worlds .tech-world-gaming .tech-world-copy{
    padding:12px 14px!important;
  }

  .apple-tech-worlds .tech-world-gaming .tech-world-copy h3{
    font-size:.88rem!important;
  }

  .apple-tech-worlds .tech-world-gaming .tech-world-copy strong{
    font-size:.56rem!important;
  }
}

@media (max-width:390px){
  .apple-tech-worlds .tech-world-mobile,
  .apple-tech-worlds .tech-world-laptop{
    height:190px!important;
    min-height:190px!important;
    max-height:190px!important;
  }

  .apple-tech-worlds .tech-world-gaming{
    height:140px!important;
    min-height:140px!important;
    max-height:140px!important;
  }
}


/* Mobile category menu — flatten it to match the rest of the drawer */
@media (max-width:900px){
  .header-navbar .nav-dropdown.nav-mega{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .header-navbar .nav-mega-col{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid var(--ts-line)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .header-navbar .nav-mega-col:last-child{
    border-bottom:0!important;
  }

  .header-navbar .nav-mega-col-title{
    min-height:46px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    color:var(--ts-text)!important;
    font-size:.75rem!important;
    font-weight:700!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .header-navbar .nav-mega-col-title:hover,
  .header-navbar .nav-mega-col-title:focus-visible{
    background:var(--ts-surface-soft)!important;
  }

  .header-navbar .nav-mega-sub{
    margin:0!important;
    padding:0 12px 7px!important;
    display:grid!important;
    gap:2px!important;
  }

  .header-navbar .nav-mega-sub a{
    min-height:36px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    border-radius:8px!important;
    color:var(--ts-muted)!important;
    background:transparent!important;
    font-size:.66rem!important;
    font-weight:600!important;
  }

  .header-navbar .nav-mega-sub a:hover,
  .header-navbar .nav-mega-sub a:focus-visible{
    color:var(--ts-text)!important;
    background:var(--ts-surface-soft)!important;
  }
}


/* =========================================================
   Home typography & spacing — professional minimal mobile pass
   ========================================================= */
@media (max-width:620px){
  .home-page-shell{
    overflow:hidden!important;
  }

  /* Hero hierarchy */
  .home-page-shell .apple-hero{
    padding:26px 0 32px!important;
  }

  .home-page-shell .apple-hero-layout{
    gap:20px!important;
  }

  .home-page-shell .apple-hero-copy{
    max-width:100%!important;
    padding-inline:6px!important;
  }

  .home-page-shell .apple-eyebrow{
    margin:0 0 10px!important;
    gap:6px!important;
    justify-content:center!important;
    font-size:.61rem!important;
    line-height:1.4!important;
  }

  .home-page-shell .apple-eyebrow-dot{
    width:6px!important;
    height:6px!important;
    box-shadow:0 0 0 3px rgba(34,211,238,.10)!important;
  }

  .home-page-shell .apple-display-title{
    max-width:13ch!important;
    margin:0 auto!important;
    font-size:clamp(1.72rem,8.5vw,2.05rem)!important;
    line-height:1.22!important;
    letter-spacing:-.025em!important;
    text-wrap:balance!important;
  }

  .home-page-shell .apple-display-subtitle{
    max-width:35ch!important;
    margin:12px auto 0!important;
    font-size:.72rem!important;
    line-height:1.75!important;
    text-wrap:pretty!important;
  }

  .home-page-shell .apple-hero-actions{
    width:auto!important;
    margin-top:16px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:7px!important;
  }

  .home-page-shell .apple-btn,
  .home-page-shell .apple-link-btn{
    width:auto!important;
    min-height:36px!important;
    padding:0 13px!important;
    border-radius:10px!important;
    justify-content:center!important;
    font-size:.65rem!important;
    gap:5px!important;
  }

  .home-page-shell .apple-hero-proof{
    width:min(100%,330px)!important;
    margin:18px auto 0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
  }

  .home-page-shell .apple-hero-proof>div{
    min-width:0!important;
    padding:5px 7px!important;
  }

  .home-page-shell .apple-hero-proof strong{
    font-size:.70rem!important;
    line-height:1.25!important;
  }

  .home-page-shell .apple-hero-proof span{
    margin-top:2px!important;
    font-size:.50rem!important;
    line-height:1.35!important;
  }

  .home-page-shell .hero-random-slider{
    min-height:350px!important;
    border-radius:18px!important;
  }

  .home-page-shell .hero-random-product-link{
    inset:8px 8px 50px!important;
    border-radius:14px!important;
  }

  .home-page-shell .hero-random-product-visual{
    padding:10px!important;
  }

  .home-page-shell .hero-random-product-content{
    padding:8px 10px 9px!important;
    gap:4px!important;
  }

  .home-page-shell .hero-random-product-title{
    font-size:.70rem!important;
    line-height:1.45!important;
  }

  .home-page-shell .hero-random-product-price>strong{
    font-size:.70rem!important;
  }

  .home-page-shell .hero-random-product-cta{
    min-height:27px!important;
    padding-inline:8px!important;
    font-size:.52rem!important;
  }

  /* Section headers: one clean row, consistent hierarchy */
  .home-page-shell .section-head-row,
  .home-page-shell .apple-section-head{
    width:100%!important;
    margin-bottom:12px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:10px!important;
    text-align:right!important;
  }

  .home-page-shell .section-head-copy{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .home-page-shell .section-kicker{
    width:max-content!important;
    max-width:100%!important;
    margin:0 0 4px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    font-size:.52rem!important;
    line-height:1.4!important;
    font-weight:750!important;
  }

  .home-page-shell .section-head-copy h2,
  .home-page-shell .apple-section-head h2{
    margin:0!important;
    font-size:1.08rem!important;
    line-height:1.4!important;
    letter-spacing:-.018em!important;
    text-wrap:balance!important;
  }

  .home-page-shell .section-head-copy p,
  .home-page-shell .apple-section-head p{
    max-width:34ch!important;
    margin:4px 0 0!important;
    font-size:.58rem!important;
    line-height:1.55!important;
  }

  .home-page-shell .section-link{
    flex:0 0 auto!important;
    min-height:28px!important;
    padding:0 8px!important;
    gap:4px!important;
    border:1px solid var(--ts-line)!important;
    border-radius:999px!important;
    background:var(--ts-surface)!important;
    font-size:.53rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .home-page-shell .section-link i{
    font-size:.48rem!important;
  }

  /* Tighter, consistent section rhythm */
  .home-page-shell .apple-tech-worlds,
  .home-page-shell .apple-categories,
  .home-page-shell .categories-section,
  .home-page-shell .product-rail-section,
  .home-page-shell .special-products,
  .home-page-shell .new-products-section,
  .home-page-shell .best-sellers-section,
  .home-page-shell .brands-section,
  .home-page-shell .apple-features,
  .home-page-shell .trust-strip{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  .home-page-shell .apple-worlds-head{
    margin-bottom:10px!important;
  }

  /* Editorial card text stays inside safe zones */
  .home-page-shell .tech-world-copy,
  .home-page-shell .tech-world-mobile .tech-world-copy{
    right:0!important;
    left:0!important;
    bottom:0!important;
    max-width:100%!important;
    text-align:right!important;
  }

  .home-page-shell .tech-world-copy h3,
  .home-page-shell .tech-world-mobile .tech-world-copy h3{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  /* Product section controls should not compete with headings */
  .home-page-shell .product-rail-section .section-head-row{
    padding-inline:2px!important;
  }

  .home-page-shell .brands-section .section-head-row{
    margin-bottom:10px!important;
  }
}

@media (max-width:390px){
  .home-page-shell .apple-display-title{
    font-size:1.65rem!important;
    max-width:12ch!important;
  }

  .home-page-shell .apple-display-subtitle{
    font-size:.68rem!important;
  }

  .home-page-shell .section-head-copy h2,
  .home-page-shell .apple-section-head h2{
    font-size:1rem!important;
  }

  .home-page-shell .section-head-copy p{
    max-width:28ch!important;
    font-size:.54rem!important;
  }

  .home-page-shell .section-link{
    min-height:27px!important;
    padding-inline:7px!important;
    font-size:.50rem!important;
  }
}


/* =========================================================
   Mobile hero balance v7
   One-row header + calmer hero proportions.
   ========================================================= */
@media (max-width:620px){
  /* The bottom bar already owns search on phones; keep the top header one row. */
  .header .container.header-top-row{
    min-height:54px!important;
    height:54px!important;
    padding:0 8px!important;
    display:grid!important;
    grid-template-areas:"toggle logo actions"!important;
    grid-template-columns:40px minmax(0,1fr) auto!important;
    grid-template-rows:54px!important;
    column-gap:7px!important;
    row-gap:0!important;
    align-items:center!important;
  }

  .header .nav-toggle{
    grid-area:toggle!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    justify-self:start!important;
  }

  .header .header-primary{
    display:contents!important;
  }

  .header .logo{
    grid-area:logo!important;
    justify-self:start!important;
    margin:0!important;
    max-width:64px!important;
  }

  .header .logo-img{
    max-width:58px!important;
    max-height:30px!important;
  }

  .header .header-navbar{
    width:0!important;
    min-width:0!important;
    height:0!important;
    overflow:visible!important;
  }

  .header .header-search{
    display:none!important;
  }

  .header .actions{
    grid-area:actions!important;
    justify-self:end!important;
    min-width:0!important;
    gap:1px!important;
    margin:0!important;
  }

  .header .actions>a,
  .header .actions>button,
  .header .cart-action,
  .header .bell-btn{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    border-radius:9px!important;
  }

  /* Hero: copy and product visual should carry similar visual weight. */
  .home-page-shell .apple-hero{
    padding:18px 0 24px!important;
  }

  .home-page-shell .apple-hero-layout{
    gap:14px!important;
  }

  .home-page-shell .apple-hero-copy{
    width:min(100%,330px)!important;
    margin-inline:auto!important;
    padding-inline:2px!important;
  }

  .home-page-shell .apple-eyebrow{
    margin-bottom:8px!important;
  }

  .home-page-shell .apple-display-title{
    max-width:12ch!important;
    font-size:1.62rem!important;
    line-height:1.25!important;
  }

  .home-page-shell .apple-display-subtitle{
    max-width:32ch!important;
    margin-top:9px!important;
    font-size:.66rem!important;
    line-height:1.68!important;
  }

  .home-page-shell .apple-hero-actions{
    margin-top:12px!important;
    gap:6px!important;
  }

  .home-page-shell .apple-btn,
  .home-page-shell .apple-link-btn{
    min-height:34px!important;
    padding-inline:11px!important;
    font-size:.60rem!important;
  }

  .home-page-shell .apple-hero-proof{
    width:min(100%,300px)!important;
    margin-top:13px!important;
    padding-top:10px!important;
  }

  .home-page-shell .apple-hero-proof>div{
    padding-inline:5px!important;
  }

  .home-page-shell .apple-hero-proof strong{
    font-size:.66rem!important;
  }

  .home-page-shell .apple-hero-proof span{
    font-size:.47rem!important;
  }

  .home-page-shell .apple-hero-visual{
    width:min(100%,330px)!important;
    margin-inline:auto!important;
  }

  .home-page-shell .hero-random-slider{
    width:100%!important;
    min-height:315px!important;
    border-radius:17px!important;
    box-shadow:0 14px 38px rgba(0,0,0,.10)!important;
  }

  .home-page-shell .hero-random-product-link{
    inset:7px 7px 46px!important;
    border-radius:13px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.08)!important;
  }

  .home-page-shell .hero-random-product-visual{
    padding:8px!important;
  }

  .home-page-shell .hero-random-product-visual img{
    max-height:205px!important;
  }

  .home-page-shell .hero-random-product-content{
    padding:7px 9px 8px!important;
    gap:3px!important;
  }

  .home-page-shell .hero-random-product-meta{
    gap:4px!important;
  }

  .home-page-shell .hero-random-product-brand,
  .home-page-shell .hero-random-product-discount{
    min-height:18px!important;
    padding:2px 6px!important;
    font-size:.48rem!important;
  }

  .home-page-shell .hero-random-product-title{
    font-size:.66rem!important;
    line-height:1.35!important;
  }

  .home-page-shell .hero-random-product-bottom{
    gap:8px!important;
    align-items:center!important;
  }

  .home-page-shell .hero-random-product-price>strong{
    font-size:.66rem!important;
  }

  .home-page-shell .hero-random-product-price del{
    font-size:.48rem!important;
  }

  .home-page-shell .hero-random-product-cta{
    min-height:25px!important;
    padding:0 7px!important;
    font-size:.48rem!important;
  }

  .home-page-shell .hero-random-slider-controls{
    right:7px!important;
    left:7px!important;
    bottom:6px!important;
    min-height:34px!important;
    grid-template-columns:28px minmax(0,1fr) auto 28px!important;
    gap:5px!important;
    padding:3px 5px!important;
    border-radius:10px!important;
  }

  .home-page-shell .hero-random-slider-arrow{
    width:26px!important;
    height:26px!important;
    border-radius:8px!important;
  }
}

@media (max-width:390px){
  .home-page-shell .apple-display-title{
    font-size:1.55rem!important;
  }

  .home-page-shell .hero-random-slider{
    min-height:305px!important;
  }

  .home-page-shell .hero-random-product-visual img{
    max-height:195px!important;
  }
}


/* =========================================================
   Profile overview — professional minimal mobile layout
   ========================================================= */
@media (max-width:620px){
  .profile-overview-page{
    width:calc(100% - 16px)!important;
    padding:10px 0 18px!important;
  }

  .profile-overview-page .profile-header{
    margin-bottom:8px!important;
    padding:11px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    border-radius:16px!important;
    background:var(--ts-surface)!important;
    box-shadow:none!important;
  }

  .profile-overview-page .profile-header-info{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
  }

  .profile-overview-page .profile-avatar{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    border-width:1px!important;
    box-shadow:none!important;
  }

  .profile-overview-page .profile-avatar-placeholder{
    font-size:1rem!important;
  }

  .profile-overview-page .profile-header h1{
    margin:0!important;
    font-size:.88rem!important;
    line-height:1.4!important;
    font-weight:850!important;
  }

  .profile-overview-page .profile-username{
    margin:2px 0 0!important;
    font-size:.56rem!important;
    line-height:1.3!important;
  }

  .profile-overview-page .profile-status{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px 9px!important;
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
    border-radius:12px!important;
    font-size:.58rem!important;
    line-height:1.35!important;
  }

  .profile-overview-page .profile-status>i{
    width:20px!important;
    height:20px!important;
    display:grid!important;
    place-items:center!important;
    font-size:.70rem!important;
  }

  .profile-overview-page .profile-status-copy{
    min-width:0!important;
    display:grid!important;
    gap:1px!important;
  }

  .profile-overview-page .profile-status-copy strong{
    font-size:.61rem!important;
    line-height:1.35!important;
  }

  .profile-overview-page .profile-status-copy small{
    color:var(--ts-muted)!important;
    font-size:.49rem!important;
    line-height:1.45!important;
  }

  .profile-overview-page .profile-status-action{
    min-height:30px!important;
    padding:0 8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:8px!important;
    background:#10b981!important;
    color:#fff!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    font-size:.52rem!important;
    font-weight:800!important;
  }

  .profile-overview-page .profile-layout{
    display:block!important;
  }

  /* One slim scrollable navigation row instead of a multi-row menu card. */
  .profile-overview-page .profile-nav{
    position:static!important;
    width:100%!important;
    margin:0 0 9px!important;
    padding:4px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border:1px solid var(--ts-line)!important;
    border-radius:12px!important;
    background:var(--ts-surface)!important;
    box-shadow:none!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity;
  }

  .profile-overview-page .profile-nav::-webkit-scrollbar{
    display:none!important;
  }

  .profile-overview-page .profile-nav-link{
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:0 8px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:var(--ts-muted)!important;
    white-space:nowrap!important;
    font-size:.54rem!important;
    font-weight:700!important;
    scroll-snap-align:start;
  }

  .profile-overview-page .profile-nav-link i{
    width:auto!important;
    font-size:.62rem!important;
    color:inherit!important;
  }

  .profile-overview-page .profile-nav-link.active{
    background:rgba(0,113,227,.09)!important;
    color:var(--ts-blue)!important;
    box-shadow:none!important;
  }

  .profile-overview-page .profile-nav-exit{
    margin:0!important;
    padding:0 8px!important;
    border:0!important;
    color:#ef4444!important;
  }

  /* Remove the large nested panel on the overview screen. */
  .profile-overview-page .profile-main{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .profile-overview-page .profile-section-head{
    min-height:auto!important;
    margin:0!important;
    padding:8px 2px 9px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    border-bottom:1px solid var(--ts-line)!important;
  }

  .profile-overview-page .profile-section-head>i{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    border-radius:9px!important;
    font-size:.68rem!important;
  }

  .profile-overview-page .profile-section-head h3{
    margin:0!important;
    font-size:.80rem!important;
    line-height:1.35!important;
  }

  .profile-overview-page .profile-section-head p{
    margin:2px 0 0!important;
    font-size:.50rem!important;
    line-height:1.4!important;
  }

  .profile-overview-page .dashboard-cards{
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .profile-overview-page .dashboard-stat-card{
    min-height:62px!important;
    padding:8px!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    border-radius:11px!important;
    background:var(--ts-surface)!important;
    box-shadow:none!important;
  }

  .profile-overview-page .dashboard-stat-icon{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
    border-radius:8px!important;
    font-size:.65rem!important;
  }

  .profile-overview-page .dashboard-stat-card>div:last-child{
    min-width:0!important;
  }

  .profile-overview-page .dashboard-stat-card strong{
    margin:0!important;
    font-size:.74rem!important;
    line-height:1.15!important;
    font-weight:850!important;
  }

  .profile-overview-page .dashboard-stat-card span{
    margin-top:2px!important;
    display:block!important;
    overflow:hidden!important;
    color:var(--ts-muted)!important;
    font-size:.49rem!important;
    line-height:1.3!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  /* These duplicate the nav on mobile, so keep the overview clean. */
  .profile-overview-page .quick-actions-grid{
    display:none!important;
  }
}

@media (max-width:390px){
  .profile-overview-page{
    width:calc(100% - 12px)!important;
  }

  .profile-overview-page .profile-header{
    padding:9px!important;
  }

  .profile-overview-page .profile-avatar{
    width:42px!important;
    height:42px!important;
    flex-basis:42px!important;
  }

  .profile-overview-page .profile-header h1{
    font-size:.82rem!important;
  }

  .profile-overview-page .profile-status{
    grid-template-columns:18px minmax(0,1fr) auto!important;
    padding:7px 8px!important;
  }

  .profile-overview-page .dashboard-stat-card{
    min-height:58px!important;
    padding:7px!important;
  }
}


/* =========================================================
   Mobile navigation v9 — reliable drawer + category mega accordion
   #siteNav is moved under <body> on mobile, so these selectors must
   not depend on .header-navbar ancestry.
   ========================================================= */
@media (max-width:992px){
  #siteNav{
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    will-change:transform;
  }

  #siteNav.open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #siteNav:not(.open){
    pointer-events:none!important;
  }

  #siteNav .nav-dropdown-wrap{
    width:100%!important;
  }

  #siteNav .nav-dropdown-wrap > .nav-dropdown-toggle{
    width:100%!important;
    min-height:46px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:var(--ts-text)!important;
    pointer-events:auto!important;
    cursor:pointer!important;
    font-size:.74rem!important;
    font-weight:700!important;
    text-decoration:none!important;
  }

  #siteNav .nav-dropdown-wrap > .nav-dropdown-toggle:hover,
  #siteNav .nav-dropdown-wrap > .nav-dropdown-toggle:focus-visible,
  #siteNav .nav-dropdown-wrap.mobile-expanded > .nav-dropdown-toggle{
    background:var(--ts-surface-soft)!important;
    color:var(--ts-text)!important;
  }

  #siteNav .nav-dropdown-arrow{
    display:inline-grid!important;
    place-items:center!important;
    width:20px!important;
    height:20px!important;
    flex:0 0 20px!important;
    opacity:.65!important;
    font-size:.58rem!important;
    transition:transform .22s ease!important;
  }

  #siteNav .nav-dropdown-wrap.mobile-expanded .nav-dropdown-arrow{
    transform:rotate(180deg)!important;
  }

  /* Closed by default. The JS adds .mobile-expanded to the wrapper. */
  #siteNav .nav-dropdown.nav-mega{
    display:none!important;
    position:static!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(56dvh,520px)!important;
    margin:5px 0 7px!important;
    padding:8px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    overflow-y:auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    border:1px solid var(--ts-line)!important;
    border-radius:13px!important;
    background:color-mix(in srgb,var(--ts-surface-soft) 82%,var(--ts-surface))!important;
    box-shadow:none!important;
  }

  #siteNav .nav-dropdown-wrap.mobile-expanded > .nav-dropdown.nav-mega{
    display:grid!important;
    animation:mobileCategoryMegaIn .18s ease both;
  }

  #siteNav .nav-mega-head{
    grid-column:1 / -1!important;
    min-height:32px!important;
    padding:0 5px 6px!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    border-bottom:1px solid var(--ts-line)!important;
    color:var(--ts-muted)!important;
    font-size:.58rem!important;
    font-weight:750!important;
  }

  #siteNav .nav-mega-head i{
    color:var(--ts-blue)!important;
    font-size:.62rem!important;
  }

  #siteNav .nav-mega-col{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--ts-line)!important;
    border-radius:10px!important;
    background:var(--ts-surface)!important;
    overflow:hidden!important;
  }

  #siteNav .nav-mega-col-title{
    width:100%!important;
    min-height:39px!important;
    margin:0!important;
    padding:0 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--ts-text)!important;
    font-size:.64rem!important;
    font-weight:800!important;
    line-height:1.35!important;
    text-decoration:none!important;
  }

  #siteNav .nav-mega-col-title:hover,
  #siteNav .nav-mega-col-title:focus-visible{
    background:color-mix(in srgb,var(--ts-blue) 7%,transparent)!important;
    color:var(--ts-blue)!important;
  }

  #siteNav .nav-mega-sub{
    margin:0!important;
    padding:0 7px 7px!important;
    display:grid!important;
    gap:2px!important;
    list-style:none!important;
  }

  #siteNav .nav-mega-sub li{
    margin:0!important;
    padding:0!important;
  }

  #siteNav .nav-mega-sub a{
    min-height:29px!important;
    padding:0 6px!important;
    display:flex!important;
    align-items:center!important;
    border:0!important;
    border-radius:7px!important;
    background:transparent!important;
    color:var(--ts-muted)!important;
    font-size:.54rem!important;
    font-weight:600!important;
    line-height:1.3!important;
    text-decoration:none!important;
  }

  #siteNav .nav-mega-sub a:hover,
  #siteNav .nav-mega-sub a:focus-visible{
    background:var(--ts-surface-soft)!important;
    color:var(--ts-text)!important;
  }

  @keyframes mobileCategoryMegaIn{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media (max-width:350px){
  #siteNav .nav-dropdown.nav-mega{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Mobile notification panel v10 — viewport centered
   ========================================================= */
@media (max-width:620px){
  .header .bell-wrap{
    position:static!important;
  }

  .header .bell-panel{
    position:fixed!important;
    top:62px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(62dvh,460px)!important;
    margin:0!important;
    border:1px solid var(--ts-line)!important;
    border-radius:16px!important;
    background:color-mix(in srgb,var(--ts-surface) 96%,transparent)!important;
    box-shadow:0 18px 50px rgba(0,0,0,.16)!important;
    overflow:hidden!important;
    z-index:10050!important;
    transform:none!important;
    animation:mobileBellPanelIn .18s ease both!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  .header .bell-panel-head{
    min-height:44px!important;
    padding:0 13px!important;
    background:var(--ts-surface-soft)!important;
  }

  .header .bell-panel-head strong{
    font-size:.70rem!important;
  }

  .header .bell-panel-head a{
    font-size:.58rem!important;
  }

  .header .bell-list{
    max-height:min(46dvh,340px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  .header .bell-list a{
    min-height:52px!important;
    padding:9px 12px!important;
  }

  .header .bell-list a span{
    font-size:.62rem!important;
    line-height:1.65!important;
  }

  .header .bell-list a time{
    font-size:.50rem!important;
  }

  .header .bell-empty{
    min-height:112px!important;
    padding:18px!important;
    gap:7px!important;
  }

  .header .bell-empty i{
    font-size:1.35rem!important;
  }

  .header .bell-empty span{
    font-size:.65rem!important;
  }

  .header .bell-footer{
    padding:8px 10px!important;
  }

  @keyframes mobileBellPanelIn{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }
}