/* ============================================================
   Mig's Clothing Store — UI Refinement Layer
   Loaded after page-level styles so it can standardise the existing
   storefront and staff interfaces without changing their DOM hooks.
   ============================================================ */

:root {
  --surface-glass: rgba(25, 20, 42, 0.84);
  --surface-soft: rgba(124, 58, 237, 0.08);
  --border-glow: rgba(167, 139, 250, 0.3);
}

/* ---------- Shared public navigation ---------- */
.navbar {
  background: #11111b;
  border-bottom-color: rgba(196, 181, 253, 0.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
}

.public-sidebar {
  background:
    radial-gradient(circle at 40% 0, rgba(124, 58, 237, 0.18), transparent 13rem),
    linear-gradient(180deg, #151327 0%, #10101b 100%);
}

.public-sidebar-brand {
  border-bottom: 1px solid rgba(196, 181, 253, 0.13);
}

.public-sidebar-nav {
  padding: 22px 10px 28px;
  gap: 6px;
}

.public-nav-item {
  width: 100%;
  margin-left: 0;
  min-height: 48px;
  border-radius: 10px;
  color: var(--text-secondary);
}

.public-nav-item:hover {
  background: rgba(124, 58, 237, 0.11);
  color: #fff;
  transform: translateX(2px);
}

.public-nav-item.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.25), rgba(124, 58, 237, 0.06));
  box-shadow: inset 3px 0 0 var(--violet-400);
}

.public-nav-item.active::before {
  display: none;
}

.public-auth-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.public-auth-btn,
.public-create-account-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
}

.shop-banner,
.shop-page-status {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Storefront and catalog ---------- */
.hero-section {
  height: clamp(570px, 36vw, 620px);
  min-height: clamp(570px, 36vw, 620px);
  padding: var(--space-10) clamp(var(--space-5), 5vw, var(--space-16)) var(--space-12);
  align-items: start;
}

.hero-content {
  max-width: 720px;
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-title {
  font-size: clamp(2.35rem, 4.4vw, 4rem);
  max-width: 680px;
  margin-inline: auto;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.48);
}

.hero-subtitle {
  max-width: 620px;
  margin-bottom: var(--space-6);
  line-height: 1.75;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.56);
}

.hero-fashion-icon {
  width: 208px;
  height: 208px;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.28));
}

.hero-video-overlay {
  background: linear-gradient(180deg, rgba(7, 5, 13, 0.52) 0%, rgba(7, 5, 13, 0.58) 52%, rgba(7, 5, 13, 0.72) 100%);
}

.products-section {
  background:
    linear-gradient(180deg, rgba(19, 19, 31, 0.92), rgba(13, 13, 20, 0.98));
}

.section-header {
  margin-bottom: clamp(var(--space-8), 6vw, var(--space-12));
}

.featured-carousel {
  gap: clamp(10px, 2vw, 18px);
}

#featured-products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--space-3), 1.6vw, var(--space-5));
}

#featured-products .product-card {
  min-width: 0;
  height: 100%;
}

.featured-arrow {
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.product-card,
.pcard {
  background: linear-gradient(160deg, rgba(31, 29, 49, 0.96), rgba(18, 18, 30, 0.98));
  border-color: rgba(167, 139, 250, 0.17);
}

.product-card:hover,
.pcard:hover {
  border-color: rgba(167, 139, 250, 0.52);
}

.product-card-image,
.pcard-img {
  background: linear-gradient(145deg, #201834, #13131f);
}

.product-card-body,
.pcard-body {
  padding: var(--space-5);
}

.product-card-name,
.pcard-name {
  line-height: 1.4;
}

.footer {
  background: linear-gradient(145deg, #0d0d14, #171020);
}

.footer-inner {
  gap: clamp(var(--space-6), 7vw, var(--space-16));
}

.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Shop browsing ---------- */
.shop-layout {
  align-items: start;
}

.filter-sidebar {
  background: linear-gradient(160deg, rgba(31, 29, 49, 0.94), rgba(18, 18, 30, 0.98));
  border-color: rgba(167, 139, 250, 0.2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.filter-group + .filter-group {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.filter-opt {
  min-height: 34px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.filter-opt:hover {
  background: var(--surface-soft);
}

.results-bar {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.product-grid {
  gap: clamp(var(--space-3), 2vw, var(--space-5));
}

.pcard-img img {
  transition: transform var(--transition-slow);
}

.pcard:hover .pcard-img img {
  transform: scale(1.035);
}

.pcard-size-chip,
.variant-chip {
  min-height: 28px;
}

.stock-pill-wrap {
  gap: var(--space-2);
}

.detail-img {
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

/* ---------- Cart and reservations ---------- */
.cart-page {
  max-width: 1440px;
}

.cart-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(19, 19, 31, 0.7);
}

.ctab {
  border-radius: var(--radius-md);
}

.ctab.active {
  background: rgba(124, 58, 237, 0.16);
}

.cart-item-row,
.res-card {
  border-color: rgba(167, 139, 250, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cart-item-row:hover,
.res-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.summary-card {
  background: linear-gradient(160deg, rgba(37, 28, 59, 0.95), rgba(19, 19, 31, 0.98));
  border-color: rgba(167, 139, 250, 0.27);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
}

.ful-opt {
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.ful-opt:hover {
  transform: translateY(-1px);
}

.pay-action-bar {
  border-color: rgba(167, 139, 250, 0.24);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.sec-empty,
#cart-empty {
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top, rgba(124, 58, 237, 0.12), transparent 52%), var(--bg-surface);
}

/* ---------- Tracking ---------- */
.tracking-page {
  max-width: 1540px;
  margin-right: auto;
}

.tracking-tabs {
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.tracking-tab {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  margin-bottom: 0;
}

.tracking-tab:hover,
.tracking-tab.active {
  background: rgba(124, 58, 237, 0.1);
}

.tracking-tab.active {
  border-color: rgba(167, 139, 250, 0.25);
}

.order-card {
  border: 1px solid rgba(167, 139, 250, 0.17);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.empty-message,
#login-wall {
  border-color: rgba(167, 139, 250, 0.2);
  background: radial-gradient(circle at top, rgba(124, 58, 237, 0.1), transparent 52%), var(--bg-elevated);
}

/* ---------- Shared customer authentication ---------- */
.login-modal-overlay {
  background: rgba(4, 3, 10, 0.8);
  backdrop-filter: blur(10px);
}

.login-modal {
  border-color: rgba(167, 139, 250, 0.44);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.68), 0 0 48px rgba(124, 58, 237, 0.17);
}

.login-modal-brand {
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.18), transparent 70%), rgba(8, 7, 13, 0.7);
}

.login-modal-content .auth-tabs {
  border-color: rgba(167, 139, 250, 0.16);
}

.login-modal-content .auth-tab.active {
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.3);
}

.profile-trigger {
  border-color: rgba(167, 139, 250, 0.24);
}

.profile-menu.open .profile-panel {
  border-color: rgba(167, 139, 250, 0.22);
}

/* ---------- Dedicated sign-in and registration page ---------- */
.login-page {
  background:
    radial-gradient(circle at 14% 14%, rgba(124, 58, 237, 0.23), transparent 30%),
    radial-gradient(circle at 84% 88%, rgba(74, 24, 120, 0.18), transparent 30%),
    #06050b;
}

.login-card {
  border-color: rgba(167, 139, 250, 0.42);
}

.login-brand {
  background: radial-gradient(circle at 50% 38%, rgba(124, 58, 237, 0.23), transparent 65%), rgba(8, 7, 13, 0.72);
}

.login-form-panel {
  background: rgba(14, 11, 24, 0.35);
}

.login-page .demo-chip {
  min-height: 48px;
}

/* ---------- Staff dashboards ---------- */
.admin-section,
.cashier-section,
.supplier-section {
  animation: sectionReveal 0.24s ease both;
}

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

.chart-container,
.queue-card,
.supplier-product-modal {
  border-color: rgba(167, 139, 250, 0.22);
}

.queue-card {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.queue-card:hover {
  transform: translateY(-1px);
}

.cancel-reason-chip {
  min-height: 36px;
  border-radius: var(--radius-full);
}

.history-filter-bar,
.queue-search-bar {
  border-color: rgba(167, 139, 250, 0.18);
  background: rgba(19, 19, 31, 0.6);
}

.status-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.variant-row {
  border-color: rgba(167, 139, 250, 0.2);
}

.supplier-product-modal {
  background: linear-gradient(160deg, rgba(31, 29, 49, 0.98), rgba(19, 19, 31, 1));
}

/* ---------- Responsive composition ---------- */
@media (max-width: 1024px) {
  #featured-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-sidebar {
    position: static;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: var(--space-4);
  }

  .filter-sidebar .filter-group {
    margin-bottom: 0;
  }

  .filter-sidebar .filter-group + .filter-group {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 768px) {
  .public-sidebar {
    display: none;
  }

  .navbar {
    left: 0;
    height: 72px;
  }

  .storefront-main {
    margin-left: 0;
  }

  .hero-section {
    height: clamp(560px, calc(100dvh - 124px), 640px);
    min-height: 560px;
    padding: var(--space-8) var(--space-4) var(--space-10);
  }

  .hero-content {
    max-width: 580px;
    margin-top: var(--space-3);
  }

  .hero-fashion-icon {
    width: min(176px, 48vw);
    height: min(176px, 48vw);
  }

  .products-section,
  .footer {
    padding-inline: var(--space-4);
  }

  #featured-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-layout,
  .cart-page,
  .tracking-page {
    width: 100%;
    margin-left: 0;
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .filter-sidebar {
    grid-template-columns: 1fr;
  }

  .filter-sidebar .filter-group + .filter-group {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcard-body,
  .product-card-body {
    padding: var(--space-3);
  }

  .cart-with-sidebar {
    gap: var(--space-4);
  }

  .summary-card {
    position: static;
  }

  .cart-item-row {
    align-items: flex-start;
  }

  .tracking-list {
    grid-template-columns: 1fr;
  }

  .login-modal {
    border-radius: var(--radius-lg);
  }

  .login-modal-brand,
  .login-modal-content {
    padding: var(--space-6) var(--space-5);
  }

  .login-page .back-home {
    position: absolute;
  }

  .login-card {
    margin-top: var(--space-10);
  }
}

@media (max-width: 480px) {
  .public-auth-buttons {
    gap: 4px;
  }

  .public-auth-btn,
  .public-create-account-btn {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 0.75rem;
  }

  .hero-title {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .hero-subtitle {
    font-size: 0.96rem;
  }

  .product-grid {
    gap: var(--space-2);
  }

  #featured-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pcard-name,
  .product-card-name {
    font-size: 0.88rem;
  }

  .pcard-price,
  .product-card-price {
    font-size: 0.98rem;
  }

  .cart-tabs {
    overflow-x: auto;
  }

  .ctab {
    flex: 0 0 auto;
  }

  .login-page .back-home {
    left: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-section,
  .cashier-section,
  .supplier-section,
  .pcard-img img {
    animation: none;
    transition: none;
  }
}

/* ============================================================
   CUSTOMER EXPERIENCE POLISH
   A final presentation-only layer for the storefront, catalog, cart,
   and order tracking. It intentionally preserves existing IDs, state
   classes, and JavaScript-owned content containers.
   ============================================================ */

:root {
  color-scheme: dark;
  --public-rail: 270px;
  --public-status-height: 52px;
  --public-nav-height: 72px;
  --public-page-gutter: clamp(16px, 3vw, 48px);
}

/* Keep customer-facing status notices crisp instead of visually heavy. */
.shop-banner,
.shop-page-status {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.015em;
}

/* The hero must grow with its content so its primary action never clips. */
.hero-section {
  height: auto;
  min-height: 580px;
  padding-block: clamp(32px, 4vw, 64px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
}

.hero-fashion-icon {
  width: clamp(148px, 13vw, 184px);
  height: clamp(148px, 13vw, 184px);
  margin-bottom: var(--space-2);
}

.hero-title {
  margin-bottom: var(--space-4);
}

.hero-subtitle {
  margin-bottom: var(--space-6);
}

.hero-actions .btn {
  min-width: min(100%, 220px);
}

/* ---------- Shop browsing ---------- */
.shop-layout {
  grid-template-columns: minmax(218px, 250px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  padding: 148px var(--public-page-gutter) clamp(32px, 5vw, 64px);
}

.filter-sidebar {
  padding: var(--space-5);
  border-radius: 20px;
  top: 144px;
}

.filter-group-title,
.cat-group-hdr {
  letter-spacing: 0.12em;
}

.filter-opt {
  margin-inline: -6px;
  padding: 7px 6px;
  border-radius: 8px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.filter-opt:hover {
  background: var(--surface-soft);
}

.results-bar {
  min-height: 38px;
  margin-bottom: var(--space-5);
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 184px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.pcard {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  border-radius: 18px;
  will-change: transform;
}

.pcard:hover {
  transform: translateY(-5px);
}

.pcard-img {
  aspect-ratio: 4 / 5;
}

.pcard-body {
  display: flex;
  min-height: 142px;
  flex: 1;
  flex-direction: column;
  padding: var(--space-4);
}

.pcard-name {
  font-size: 0.92rem;
}

.pcard-price {
  letter-spacing: -0.02em;
}

.pcard-sizes {
  margin-top: auto;
  padding-top: var(--space-2);
}

.pcard-size-chip {
  min-width: 24px;
  text-align: center;
}

/* ---------- Cart and reservations ---------- */
.cart-page {
  padding: 148px var(--public-page-gutter) clamp(32px, 5vw, 64px);
}

.cart-tabs,
.tracking-tabs {
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(19, 19, 31, 0.62);
}

.ctab,
.tracking-tab {
  min-height: 42px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 10px;
}

.ctab:hover,
.tracking-tab:hover {
  background: var(--surface-soft);
}

.ctab.active,
.tracking-tab.active {
  border-color: rgba(167, 139, 250, 0.24);
  background: rgba(124, 58, 237, 0.16);
  box-shadow: 0 6px 18px rgba(52, 20, 88, 0.12);
}

.cart-with-sidebar {
  gap: clamp(18px, 2.4vw, 32px);
}

.cart-item-row {
  min-height: 94px;
  border-width: 1px;
  border-radius: 16px;
}

.cart-item-row.selected {
  border-color: var(--violet-500);
  box-shadow: 0 10px 26px rgba(109, 40, 217, 0.14);
}

.item-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.item-name {
  font-size: 0.94rem;
}

.item-price {
  font-size: 0.95rem;
}

.sel-bar,
.pay-action-bar {
  border-radius: 14px;
}

.summary-card {
  top: 144px;
  border-radius: 20px;
}

.ful-opt {
  border-radius: 12px;
}

.ful-opt.sel {
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.14);
}

.res-card {
  border-width: 1px;
  border-radius: 18px;
}

.res-card.selected {
  box-shadow: 0 12px 28px rgba(109, 40, 217, 0.14);
}

.sec-empty,
#cart-empty {
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: radial-gradient(circle at top, rgba(124, 58, 237, 0.14), transparent 48%), var(--bg-surface);
}

#cart-empty {
  padding: clamp(72px, 12vw, 152px) 20px 60px !important;
}

/* The cart uses a fixed signed-out panel. Give it a deliberate card edge. */
.cart-page .login-wall {
  top: calc(var(--public-nav-height) + var(--public-status-height) + var(--space-5));
  left: calc(var(--public-rail) + var(--space-5));
  right: var(--space-5);
  bottom: var(--space-5);
  min-height: 0;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 35%, rgba(124, 58, 237, 0.15), transparent 34%), var(--bg-surface);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
}

.cart-page .login-wall-icon,
.tracking-page .login-wall-icon {
  display: grid;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-5);
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 22px;
  background: rgba(124, 58, 237, 0.12);
  box-shadow: 0 12px 28px rgba(74, 24, 120, 0.16);
}

/* ---------- Order tracking ---------- */
.tracking-page {
  width: calc(100% - var(--public-rail));
  margin-left: var(--public-rail);
  padding: 148px var(--public-page-gutter) clamp(32px, 5vw, 64px);
}

.tracking-tabs {
  gap: 4px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.tracking-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.order-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 20px;
  padding: var(--space-5);
}

.order-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gradient-primary);
}

.track-product-image {
  grid-row: 1 / span 10;
  width: 92px;
  height: 112px;
  margin: 0;
  border-radius: 14px;
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.order-card h3,
.order-card p,
.order-card > .status,
.order-card .tracking-actions {
  grid-column: 2;
}

.order-card h3 {
  margin: 0 0 4px;
  color: var(--violet-200);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.order-card p {
  margin: 0 0 5px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.order-card p strong,
.order-card .order-product-name {
  color: var(--text-primary);
}

.order-card .order-product-name {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.35;
}

.order-card > .status,
.order-card .tracking-actions {
  margin-top: var(--space-3);
}

.order-card .status {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  letter-spacing: 0.035em;
}

.tracking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.empty-message {
  padding: clamp(52px, 8vw, 92px) var(--space-5);
  margin: 0;
  border-radius: 20px;
  background: radial-gradient(circle at top, rgba(124, 58, 237, 0.12), transparent 56%), var(--bg-elevated);
}

/* Tracking owns a static signed-out state rather than Cart's fixed panel. */
.tracking-page #login-wall {
  min-height: 460px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 72px) var(--space-6);
  transform: none;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 28%, rgba(124, 58, 237, 0.15), transparent 35%), var(--bg-surface);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
}

/* ---------- Responsive customer layouts ---------- */
@media (max-width: 1024px) {
  /* At tablet widths a full rail plus a full-width content layout clashes.
     Switch to the same compact public navigation used on phones. */
  .public-sidebar {
    display: none;
  }

  .navbar {
    left: 0;
  }

  .storefront-main,
  .cart-page,
  .tracking-page {
    width: 100%;
    margin-left: 0;
  }

  #mob-btn {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md);
    background: var(--bg-elevated) !important;
    color: var(--text-secondary);
    font-size: 1.35rem;
  }

  .mobile-nav.open {
    display: grid;
  }

  .mobile-navbar-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--violet-200);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .mobile-navbar-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  .navbar-auth {
    margin-left: 0;
  }

  body.shop-banner-visible .mobile-nav {
    top: calc(var(--public-status-height) + var(--public-nav-height));
  }

  body:not(.shop-banner-visible) .mobile-nav {
    top: var(--public-nav-height);
  }

  .shop-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
  }

  .filter-sidebar {
    top: auto;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Keep the long category list usable without hiding the product grid
     below the fold on tablets. */
  .filter-sidebar {
    max-height: min(44svh, 390px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 560px;
    padding: var(--space-8) var(--space-4) var(--space-10);
  }

  .hero-fashion-icon {
    width: min(154px, 43vw);
    height: min(154px, 43vw);
  }

  .shop-layout,
  .cart-page,
  .tracking-page {
    width: 100%;
    margin-left: 0;
    padding: 140px var(--space-4) var(--space-8);
  }

  .filter-sidebar {
    max-height: min(46svh, 360px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .cart-tabs,
  .tracking-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .ctab,
  .tracking-tab {
    flex: 0 0 auto;
  }

  .cart-page .login-wall {
    top: calc(var(--public-nav-height) + var(--public-status-height) + var(--space-4));
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    border-radius: 20px;
  }

  .tracking-page #login-wall {
    min-height: calc(100svh - 184px);
    padding: var(--space-8) var(--space-5);
    border-radius: 20px;
  }

  .order-card {
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: var(--space-4);
  }

  .track-product-image {
    width: 78px;
    height: 96px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .pcard-body {
    min-height: 132px;
    padding: var(--space-3);
  }

  .pcard-name {
    font-size: 0.84rem;
  }

  .pcard-price {
    font-size: 0.9rem;
  }

  .cart-item-row {
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .item-img {
    width: 60px;
    height: 60px;
  }

  .item-price {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    padding-left: 28px;
  }

  .order-card {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: var(--space-3);
  }

  .track-product-image {
    width: 68px;
    height: 84px;
  }

  .order-card .order-product-name {
    font-size: 0.9rem;
  }
}

/* Mobile receives a compact brand anchor because the full brand lives in the
   desktop rail. It is visual-only and keeps all existing navigation controls. */
.mobile-navbar-brand {
  display: none;
}

.order-card {
  position: relative;
}

/* Do not reserve a status-banner gap when the status endpoint is unavailable. */
body:not(.shop-banner-visible) .navbar,
body:not(.shop-banner-visible) .public-sidebar {
  top: 0;
}

body:not(.shop-banner-visible) .storefront-main {
  padding-top: var(--public-nav-height);
}

body:not(.shop-banner-visible) .shop-layout,
body:not(.shop-banner-visible) .cart-page,
body:not(.shop-banner-visible) .tracking-page {
  padding-top: calc(var(--public-nav-height) + var(--space-6));
}

body:not(.shop-banner-visible) .cart-page .login-wall {
  top: calc(var(--public-nav-height) + var(--space-5));
}

@media (max-width: 768px) {
  body:not(.shop-banner-visible) .shop-layout,
  body:not(.shop-banner-visible) .cart-page,
  body:not(.shop-banner-visible) .tracking-page {
    padding-top: calc(var(--public-nav-height) + var(--space-4));
  }

  body:not(.shop-banner-visible) .cart-page .login-wall {
    top: calc(var(--public-nav-height) + var(--space-4));
  }
}

@media (max-width: 560px) {
  .navbar {
    gap: 6px;
  }

  .navbar .public-create-account-btn {
    display: none;
  }

  .mobile-navbar-brand span {
    display: none;
  }
}

/* This sits after the desktop default so the tablet/mobile brand remains
   visible when the public rail is intentionally hidden. */
@media (max-width: 1024px) {
  .mobile-navbar-brand {
    display: inline-flex;
  }
}

/* The legacy mobile menu is only fully composed below 768px. Extend the
   same stable popover treatment to tablet navigation as well. */
@media (max-width: 1024px) {
  .mobile-nav {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 940;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: calc(100svh - var(--public-nav-height));
    overflow-y: auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
  }

  .mobile-nav.open {
    display: grid;
  }

  .mobile-nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.88rem;
  }

  .mobile-nav a:hover {
    background: var(--surface-soft);
    color: var(--violet-200);
  }

  .mobile-nav svg,
  .mobile-nav .lucide,
  .mobile-nav-icon {
    width: 18px;
    height: 18px;
    max-width: 18px;
    flex: 0 0 18px;
  }

  .mobile-nav #mob-auth {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-nav #mob-auth button {
    min-height: 42px;
    border-radius: 10px;
  }

  body.shop-banner-visible .mobile-nav {
    top: calc(var(--public-status-height) + var(--public-nav-height));
    max-height: calc(100svh - var(--public-status-height) - var(--public-nav-height));
  }

  body:not(.shop-banner-visible) .mobile-nav {
    top: var(--public-nav-height);
  }
}

/* ---------- Navbarless public shell ----------
   The account controls are deliberately independent of a full-width header.
   This preserves the existing JavaScript target (#nav-auth) while letting the
   storefront breathe above the page content. */
:root {
  --public-nav-height: 0px;
  --public-rail-inset: clamp(12px, 1.3vw, 18px);
  --public-actions-inset: clamp(12px, 1.8vw, 24px);
  --public-actions-height: 44px;
}

.public-account-actions {
  position: fixed;
  top: var(--public-actions-inset);
  right: var(--public-actions-inset);
  z-index: 950;
  display: flex;
  min-height: var(--public-actions-height);
  max-width: calc(100vw - (var(--public-actions-inset) * 2));
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.public-account-actions .navbar-auth {
  display: flex;
  min-width: 0;
  height: auto;
  margin: 0;
  align-items: center;
}

.public-account-actions .public-auth-buttons {
  gap: var(--space-2);
}

.public-account-actions #mob-btn {
  display: none;
}

/* Keep the account controls clear of a visible shop-status notice. */
body.shop-banner-visible .public-account-actions {
  top: calc(var(--public-status-height) + var(--public-actions-inset));
}

/* Reclaim the space previously reserved for the removed header. */
.storefront-main {
  padding-top: 0;
}

.shop-layout,
.cart-page,
.tracking-page {
  padding-top: var(--space-6);
}

.cart-page .login-wall {
  top: var(--space-5);
}

body.shop-banner-visible .storefront-main {
  padding-top: var(--public-status-height);
}

body.shop-banner-visible .shop-layout,
body.shop-banner-visible .cart-page,
body.shop-banner-visible .tracking-page {
  padding-top: calc(var(--public-status-height) + var(--space-6));
}

body.shop-banner-visible .cart-page .login-wall {
  top: calc(var(--public-status-height) + var(--space-5));
}

/* The rail now has the requested breathing room along its top, bottom, and
   content-side edge, while its original 270px content offset remains intact. */
@media (min-width: 1025px) {
  .public-sidebar,
  body:not(.shop-banner-visible) .public-sidebar {
    top: var(--public-rail-inset);
    bottom: var(--public-rail-inset);
    left: var(--public-rail-inset);
    width: calc(var(--public-rail) - var(--public-rail-inset));
    box-sizing: border-box;
    border-radius: 0 22px 22px 0;
    box-shadow: 12px 18px 36px rgba(0, 0, 0, 0.16);
  }

  body.shop-banner-visible .public-sidebar {
    top: calc(var(--public-status-height) + var(--public-rail-inset));
  }
}

@media (max-width: 1024px) {
  .public-account-actions #mob-btn {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .mobile-nav #mob-auth {
    display: none !important;
  }

  .mobile-nav,
  body:not(.shop-banner-visible) .mobile-nav {
    top: calc(var(--public-actions-inset) * 2 + var(--public-actions-height));
    max-height: calc(100svh - (var(--public-actions-inset) * 2 + var(--public-actions-height)));
  }

  body.shop-banner-visible .mobile-nav {
    top: calc(var(--public-status-height) + (var(--public-actions-inset) * 2) + var(--public-actions-height));
    max-height: calc(100svh - var(--public-status-height) - (var(--public-actions-inset) * 2 + var(--public-actions-height)));
  }
}

@media (max-width: 560px) {
  .public-account-actions {
    gap: 6px;
  }

  .public-account-actions .public-auth-buttons {
    gap: 6px;
  }

  .public-account-actions .public-auth-btn,
  .public-account-actions .public-create-account-btn {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 0.76rem;
  }

}

@media (max-width: 1024px) {
  .shop-layout,
  .cart-page,
  .tracking-page {
    padding-top: calc((var(--public-actions-inset) * 2) + var(--public-actions-height) + var(--space-5));
  }

  body.shop-banner-visible .shop-layout,
  body.shop-banner-visible .cart-page,
  body.shop-banner-visible .tracking-page {
    padding-top: calc(var(--public-status-height) + (var(--public-actions-inset) * 2) + var(--public-actions-height) + var(--space-5));
  }

  .cart-page .login-wall {
    top: calc((var(--public-actions-inset) * 2) + var(--public-actions-height) + var(--space-4));
  }

  body.shop-banner-visible .cart-page .login-wall {
    top: calc(var(--public-status-height) + (var(--public-actions-inset) * 2) + var(--public-actions-height) + var(--space-4));
  }
}

/* ---------- Restored public header and seamless side rail ----------
   The standard top navbar is back. The rail remains inset, but a matching
   backdrop fills its surrounding gutter so no black page surface shows. */
:root {
  --public-nav-height: 72px;
}

.storefront-main {
  padding-top: var(--public-nav-height);
}

.shop-layout,
.cart-page,
.tracking-page {
  padding-top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-6));
}

.cart-page .login-wall {
  top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-5));
}

body.shop-banner-visible .storefront-main {
  padding-top: var(--public-nav-height);
}

body.shop-banner-visible .shop-layout,
body.shop-banner-visible .cart-page,
body.shop-banner-visible .tracking-page {
  padding-top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-6));
}

body.shop-banner-visible .cart-page .login-wall {
  top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-5));
}

@media (min-width: 1025px) {
  body::before {
    content: "";
    position: fixed;
    z-index: 899;
    top: var(--public-status-height);
    bottom: 0;
    left: 0;
    width: var(--public-rail);
    pointer-events: none;
    background:
      radial-gradient(circle at 40% 0, rgba(124, 58, 237, 0.18), transparent 13rem),
      linear-gradient(180deg, #151327 0%, #10101b 100%);
  }

  body:not(.shop-banner-visible)::before {
    top: 0;
  }

}

@media (max-width: 1024px) {
  .mobile-nav #mob-auth {
    display: grid !important;
  }

  .mobile-nav,
  body:not(.shop-banner-visible) .mobile-nav {
    top: var(--public-nav-height);
    max-height: calc(100svh - var(--public-nav-height));
  }

  body.shop-banner-visible .mobile-nav {
    top: calc(var(--public-status-height) + var(--public-nav-height));
    max-height: calc(100svh - var(--public-status-height) - var(--public-nav-height));
  }

  .shop-layout,
  .cart-page,
  .tracking-page {
    padding-top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-5));
  }

  body:not(.shop-banner-visible) .shop-layout,
  body:not(.shop-banner-visible) .cart-page,
  body:not(.shop-banner-visible) .tracking-page {
    padding-top: calc(var(--public-nav-height) + var(--space-5));
  }

  body.shop-banner-visible .shop-layout,
  body.shop-banner-visible .cart-page,
  body.shop-banner-visible .tracking-page {
    padding-top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-5));
  }

  .cart-page .login-wall {
    top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-4));
  }

  body:not(.shop-banner-visible) .cart-page .login-wall {
    top: calc(var(--public-nav-height) + var(--space-4));
  }

  body.shop-banner-visible .cart-page .login-wall {
    top: calc(var(--public-status-height) + var(--public-nav-height) + var(--space-4));
  }
}

/* A single full-height desktop rail creates a deliberate boundary with the
   header and page content instead of an overlapping card with exposed gaps. */
.public-sidebar-brand {
  border-bottom: 0;
}

@media (min-width: 1025px) {
  .public-sidebar {
    top: var(--public-status-height);
    bottom: 0;
    left: 0;
    width: var(--public-rail);
    border-radius: 0 22px 22px 0;
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.14);
  }

  body:not(.shop-banner-visible) .public-sidebar {
    top: 0;
  }

  body.shop-banner-visible .public-sidebar {
    top: var(--public-status-height);
  }

  body::before {
    display: none;
  }
}

/* ---------- Unified public-header account actions ----------
   Every customer page injects the same controls into #nav-auth. This final
   rule intentionally wins over older page-local variants so navigation never
   shifts when moving between Home, Shop, Cart, and Tracking. */
.navbar .navbar-auth .public-auth-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.navbar .navbar-auth .public-auth-btn,
.navbar .navbar-auth .public-create-account-btn {
  display: inline-flex !important;
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.navbar .navbar-auth .public-auth-btn {
  min-width: 76px;
}

.navbar .navbar-auth .public-create-account-btn {
  min-width: 132px;
}

@media (max-width: 560px) {
  .navbar .navbar-auth .public-auth-btn,
  .navbar .navbar-auth .public-create-account-btn {
    min-height: 36px !important;
    height: 36px !important;
    min-width: 0;
    padding-inline: 10px !important;
    font-size: 0.75rem !important;
  }
}