/* Shared responsive polish for ARIEL STORE. Loaded after page and theme styles. */
:root {
  --site-safe-bottom: env(safe-area-inset-bottom, 0px);
  --site-safe-left: env(safe-area-inset-left, 0px);
  --site-safe-right: env(safe-area-inset-right, 0px);
}

html { -webkit-text-size-adjust: 100%; }
body, main { min-width: 0; }
img, video, canvas, iframe { max-width: 100%; }

/* Wide desktop navigation; touch devices use the existing slide-over drawer. */
.desktop-store-nav-wrap {
  position: sticky;
  top: 10px;
  z-index: 9980;
  width: 100%;
  margin: 10px auto 0;
  padding: 0 clamp(16px, 2vw, 28px);
}
.desktop-store-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  width: 100%;
  max-width: 1480px;
  min-height: 68px;
  margin: 0 auto;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(9,10,13,.95);
  box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.desktop-store-brand {
  display: flex;
  align-items: center;
  flex: 0 1 220px;
  min-width: 120px;
  gap: 10px;
  color: #f4f5f8 !important;
  text-decoration: none !important;
}
.desktop-store-brand img, .desktop-store-brand-fallback {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(var(--theme-main-rgb),.12);
  border: 1px solid rgba(var(--theme-main-rgb),.34);
}
.desktop-store-brand-fallback { color:#fff; font-weight:800; }
.desktop-store-brand-name {
  overflow: hidden;
  color: #f4f5f8;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-store-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
}
.desktop-store-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #c3c6d0 !important;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.desktop-store-links a:hover, .desktop-store-links a.active {
  color: #fff !important;
  background: rgba(var(--theme-main-rgb),.14);
  border-color: rgba(var(--theme-main-rgb),.28);
}
.desktop-store-links a i { color: rgb(var(--theme-main-rgb)); }
.desktop-store-actions { display:flex; align-items:center; flex:0 0 auto; gap:8px; }
.desktop-theme-toggle, .desktop-store-account {
  display:grid;
  place-items:center;
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#f4f5f8 !important;
  background:rgba(255,255,255,.045);
  text-decoration:none !important;
}
.desktop-store-balance, .desktop-store-admin, .desktop-store-login, .desktop-store-register {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:0 12px;
  border:1px solid rgba(var(--theme-main-rgb),.34);
  border-radius:11px;
  color:#fff !important;
  background:rgba(var(--theme-main-rgb),.12);
  font:inherit;
  font-size:12px;
  font-weight:750;
  text-decoration:none !important;
  white-space:nowrap;
  cursor:pointer;
}
.desktop-store-register { color:#111 !important; background:linear-gradient(135deg, rgb(var(--theme-main-rgb)), color-mix(in srgb, rgb(var(--theme-main-rgb)) 64%, #fff)); }
.desktop-store-admin { color:#17120a !important; background:#fbbf24; border-color:#fbbf24; }
.desktop-store-balance:hover, .desktop-store-login:hover { filter:brightness(1.12); }
.desktop-store-register:hover, .desktop-store-admin:hover { filter:brightness(1.06); }

/* Tablet and smaller screens retain the slide-over menu, with notch-safe spacing. */
@media (max-width: 1199.98px) {
  .mobile-top-nav {
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: max(14px, var(--site-safe-left)) !important;
    padding-right: max(14px, var(--site-safe-right)) !important;
  }
  .mobile-top-nav + div { height: calc(56px + env(safe-area-inset-top, 0px)) !important; }
  .mobile-top-nav > a { min-width:0; max-width:65%; }
  .mobile-top-nav .nav-brand-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48vw; }
  .mobile-top-nav button, .drawer-close { min-width:44px; min-height:44px; }
  .mobile-menu-drawer { height:100dvh; padding-bottom:var(--site-safe-bottom); }
}

@media (max-width: 767.98px) {
  .nv-page, .store-page-container { width:100%; max-width:100%; padding-left:12px !important; padding-right:12px !important; }
  .nv-hero .nv-title { overflow-wrap:anywhere; }
  .nv-ctas { width:100%; }
  .nv-btn, .pd-buy, .cat-pill-btn { min-height:44px; }
  .store-toolbar { grid-template-columns:minmax(0,1fr) minmax(112px,130px) !important; }
  .store-toolbar > *, .search-input-wrap { min-width:0 !important; }
  .store-search-form .search-input-field { min-width:0; font-size:16px !important; }
  .category-filter-scroll { scroll-snap-type:x proximity; touch-action:pan-x; }
  .category-filter-scroll > * { scroll-snap-align:start; }
  .table-responsive { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .modal-dialog { max-width:calc(100vw - 20px) !important; }
  .floating-chat-btn { right:max(14px, var(--site-safe-right)) !important; bottom:calc(18px + var(--site-safe-bottom)) !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size:16px; }
}

@media (max-width: 359.98px) {
  .store-toolbar { grid-template-columns:minmax(0,1fr) 112px !important; gap:6px !important; }
  .store-toolbar .store-sort-select { padding-left:8px !important; padding-right:24px !important; font-size:10.5px !important; }
  .nv-page, .store-page-container { padding-left:10px !important; padding-right:10px !important; }
  .nv-stat { padding:9px !important; gap:7px !important; }
  .nv-stat .val { font-size:21px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-store-links a, .desktop-store-actions a, .desktop-store-actions button { transition:none !important; }
}