/* ============================================================
   SACAR MART — EXTRAS
   Part of the split style.css (see index.html for load order).
   Split preserves the exact original rule order — cascade/
   specificity behavior is unchanged from the single-file version.
   ============================================================ */
/* ===== Product Details image carousel (multi-image support) ===== */
.modal-img-carousel {
  position: relative;
  text-align: center;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 2;
}
.carousel-arrow-left { left: 8px; }
.carousel-arrow-right { right: 8px; }
.carousel-arrow:hover { background: rgba(0,0,0,0.65); }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active {
  background: var(--accent-color);
  transform: scale(1.25);
}

/* Manual quantity input — visually identical to the old plain number, but tappable to type */
.qty-manual-input {
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
  -moz-appearance: textfield;
}
.qty-manual-input::-webkit-outer-spin-button,
.qty-manual-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-manual-input:focus {
  background: var(--light-bg);
  border-radius: 4px;
}

/* ===== Home: All Categories as a single-row horizontal scroller (distinct from the dedicated All Categories page, which stays a wrapping grid) ===== */
.home-category-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 14px;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.home-category-slider::-webkit-scrollbar { display: none; }
.home-category-slider .featured-category-card {
  flex: 0 0 130px;
}

/* ===== Skeleton loading placeholders — home page is never blank while data loads ===== */
@keyframes skeletonPulse {
  0% { opacity: 0.55; }
  50% { opacity: 1; }
  100% { opacity: 0.55; }
}
.skeleton-cat-card {
  flex: 0 0 130px;
  height: 150px;
  border-radius: 14px;
  background: var(--border-color);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton-product-card {
  flex: 0 0 150px;
  height: 220px;
  border-radius: 8px;
  background: var(--border-color);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
/* Higher-specificity override so this always wins over .qty-display-value's flex:1
   and .cart-qty-value's unconstrained width, regardless of source order — this is
   what actually fixes the width blowing out product cards / cart / checkout. */
input.qty-manual-input {
  flex: 0 0 auto;
  min-width: 0;
  width: 3.4ch;
  max-width: 56px;
  text-align: center;
}

.quantity-counter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 5px 0;
}

.qty-round-btn {
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.qty-round-btn.plus {
  background: linear-gradient(145deg, #4299e1, #2b6cb0);
  box-shadow: 0 3px 8px rgba(49, 130, 206, 0.4);
}

.qty-round-btn.plus:hover {
  background: linear-gradient(145deg, #3182ce, #2c5282);
  box-shadow: 0 5px 12px rgba(49, 130, 206, 0.5);
  transform: translateY(-2px);
}

.qty-round-btn.minus,
.qty-round-btn.danger {
  background: linear-gradient(145deg, #fc8181, #e53e3e);
  box-shadow: 0 3px 8px rgba(229, 62, 62, 0.4);
}

.qty-round-btn.minus:hover,
.qty-round-btn.danger:hover {
  background: linear-gradient(145deg, #f56565, #c53030);
  box-shadow: 0 5px 12px rgba(229, 62, 62, 0.5);
  transform: translateY(-2px);
}

.qty-round-btn:active {
  transform: scale(0.88);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

@media (max-width: 480px) {
  .qty-round-btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

.qty-display-value {
  flex: 1;
  margin: 0 10px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: var(--text-color);
}

.category-slider-section {
  margin-bottom: 30px;
  background: transparent;
}

.slider-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  margin-bottom: 10px;
}

.slider-section-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
}

.view-all-btn {
  background: transparent;
  border: none;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s;
}

.view-all-btn:hover {
  transform: translateX(3px);
}

.category-slider-row {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 5px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.category-slider-row::-webkit-scrollbar {
  display: none;
}

.category-slider-row .product-card {
  flex: 0 0 200px;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#sub-category-select {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-right: 10px;
}

.sub-category-showcase {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px;
  position: sticky;
  /* Sits flush under the Category row, whose own height differs between the
     mobile (wrapped, 2-row) and desktop (1-row) header layouts — computed
     dynamically via updateHeaderHeightVar() instead of a fixed number.
     Fallback values (92px + 71px = 163px) match the original fixed value. */
  top: calc(var(--header-height, 92px) + var(--category-row-height, 71px));
  z-index: 997;
  background: var(--light-bg);
  border-bottom: 1.5px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  transition: top 0.3s ease;
}

/* ============================================================
   MICRO CATEGORY ROW — 3rd-level filter nested under the active
   Category + Sub Category. Only ever rendered (JS toggles
   display:block/none) when that pair actually has micro_category
   data, so it never reserves blank space.

   FINAL UI SYSTEM: whenever this row is visible, Micro Category is
   the deepest active level and both Main Category and Sub Category
   are fully hidden above it (see the "CATEGORY NAVIGATION ROW" rules
   further down — body.category-page-active / body.micro-row-active),
   so at most one navigation row is ever on screen. Micro Category
   still gets its own slightly taller, clearly "designed" pill row
   here rather than a bare-minimum compact one, but deliberately short
   of the full-size padding those pills use outside this state, so a
   Sub Category with many Micro items never blows the row out. The
   "All" chip is a fixed sibling of the scrollable strip (mirrors the
   Sub Category row's fixed Sort/Offer buttons), so it never scrolls
   away while the rest of the chips do.
   ============================================================ */
.micro-category-showcase {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 20px;
  position: sticky;
  /* Sits flush under the Sub Category row, same dynamic-height approach
     as the Sub Category row's own `top` above. */
  top: calc(var(--header-height, 92px) + var(--category-row-height, 71px) + var(--sub-category-row-height, 0px));
  z-index: 996;
  background: var(--light-bg);
  border-bottom: 1.5px solid var(--border-color);
  transition: top 0.3s ease;
}
.micro-category-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.micro-category-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: none;
  background-image: none;
}
.micro-category-scroll::-webkit-scrollbar { display: none; }
.micro-chip {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.micro-chip.active,
.micro-chip:hover {
  background: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}
/* Fixed "All" chip — sits to the left of the scrollable strip and never
   scrolls with it (mirrors the Sub Category row's fixed Sort/Offer
   buttons). */
.micro-all-chip {
  flex-shrink: 0;
}

.sub-category-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-action-btn {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sub-action-btn.active {
  background: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
  box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.sub-action-btn span {
  display: inline-block;
  max-width: 60px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 700px) {
  /* As the Subcategory row scrolls right, Sort/Offer shrink to icon-only
     (smoothly, via the existing button transition + these span/gap rules)
     to free up room for more subcategory chips — reverts once scrolled
     back to the start. See updateSubCategoryCompactState() in script.js. */
  .sub-category-wrapper.subcat-scrolled .sub-action-btn {
    padding: 8px 10px;
    gap: 0;
  }
  .sub-category-wrapper.subcat-scrolled .sub-action-btn span {
    max-width: 0;
    opacity: 0;
  }
}

.sub-category-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.sub-category-scroll::-webkit-scrollbar {
  display: none;
}

.sub-chip {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sub-chip.active, .sub-chip:hover {
  background: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}

.bottom-sheet {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}

.bottom-sheet.active {
  display: block;
}

.bottom-sheet-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.bottom-sheet-content {
  position: fixed;
  width: 260px;
  max-width: 90vw;
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 2001;
  transform-origin: top center;
  animation: dropdownFade 0.16s ease-out;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.bottom-sheet-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
}

.close-sheet-btn {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--text-color);
}

.bottom-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sort-option-btn {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.sort-option-btn i {
  color: var(--accent-color);
  font-size: 16px;
}

.sort-option-btn:hover {
  background: var(--border-color);
}

.sort-option-btn.active {
  background: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}

.sort-option-btn.active i {
  color: #ffffff;
}

.controls-hidden {
  display: none !important;
}

.cart-line-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}
.cart-line-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--light-bg);
}
.cart-line-info {
  flex: 1;
  min-width: 0;
}
.cart-line-name {
  font-weight: 600;
  font-size: 14px;
  display: block;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-line-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.cart-line-orig-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 12px;
}
.cart-line-price {
  color: var(--accent-color);
  font-weight: 700;
  font-size: 14px;
}
.cart-line-qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cart-qty-btn {
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  transition: transform 0.15s ease, background 0.2s ease;
}
.cart-qty-btn.plus {
  background: linear-gradient(145deg, #4299e1, #2b6cb0);
}
.cart-qty-btn.minus {
  background: linear-gradient(145deg, #fc8181, #e53e3e);
}
.cart-qty-btn.danger {
  background: linear-gradient(145deg, #fc8181, #c53030);
}
.cart-qty-btn:active {
  transform: scale(0.88);
}
.cart-qty-value {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-color);
}
.empty-cart-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 30px 0;
}

.user-status-box {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 6px;
}
.user-points-badge {
  color: #dd6b20;
  background: #feebc8;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
[data-theme="dark"] .user-points-badge {
  background: rgba(246, 173, 85, 0.18);
  color: #f6ad55;
}
.user-logout-btn {
  background: none;
  border: none;
  color: var(--danger-color);
  cursor: pointer;
  font-size: 16px;
  margin-left: 4px;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.2s;
}
.user-logout-btn:hover {
  background: rgba(229, 62, 62, 0.12);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.form-group input, .form-group textarea {
  background: var(--input-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-submit-btn, .submit-order-btn, .search-btn, .checkout-btn, .order-btn {
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.auth-submit-btn:hover, .search-btn:hover {
  background: var(--primary-color-hover);
}
.submit-order-btn:hover {
  background: var(--success-color-hover);
}
.checkout-btn:hover {
  background: var(--success-color-hover);
  transform: translateY(-1px);
}
.order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(49, 130, 206, 0.3);
}

.product-card, .modal-content, .cart-drawer, .sidebar, .bottom-sheet-content, .toast-item {
  box-shadow: var(--card-shadow);
}

.chip.active, .chip:hover {
  box-shadow: 0 3px 8px rgba(49, 130, 206, 0.25);
}

.floating-cart-bubble {
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff8a3d, #e85d2c);
  box-shadow: 0 6px 20px rgba(232, 93, 44, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 27px;
  cursor: grab;
  z-index: 950;
  touch-action: none;
  user-select: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  animation: bubblePulse 2.6s ease-in-out infinite;
}
@keyframes bubblePulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(232, 93, 44, 0.45), 0 0 0 0 rgba(232, 93, 44, 0.35);
  }
  50% {
    box-shadow: 0 6px 20px rgba(232, 93, 44, 0.45), 0 0 0 10px rgba(232, 93, 44, 0);
  }
}
.floating-cart-bubble:active {
  cursor: grabbing;
  box-shadow: 0 3px 10px rgba(232, 93, 44, 0.4);
  transform: scale(0.96);
  animation-play-state: paused;
}
.floating-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e53e3e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2.5px solid var(--card-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mobile-cart-bar-content {
  display: none;
}

/* Mobile: same element, restyled as a fixed bottom bar instead of a draggable circular bubble.
   Show/hide logic is untouched (updateFloatingBubbleVisibility() / display:none/flex) — only the
   shape and content change here. Small side/bottom margins keep it looking like a floating card
   rather than being glued to the screen edge. */
@media (max-width: 700px) {
  .floating-cart-bubble {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    height: auto;
    border-radius: 16px;
    padding: 12px 16px;
    justify-content: flex-start;
    gap: 10px;
    font-size: 18px;
    animation: none;
    cursor: pointer;
    touch-action: auto;
  }
  .floating-cart-bubble:active {
    transform: scale(0.98);
  }
  .floating-cart-badge {
    display: none;
  }
  .mobile-cart-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 10px;
  }
  .mobile-cart-bar-count {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
  }
  .mobile-cart-bar-view {
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
  }
  .mobile-cart-bar-total {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
  }
}

.profile-dashboard {
  max-width: 720px;
  margin: 20px auto 40px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-header-card {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border-radius: 16px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(49, 130, 206, 0.25);
  animation: dashFadeIn 0.25s ease;
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.profile-header-info {
  flex: 1;
  min-width: 0;
}
.profile-header-info h2 {
  font-size: 19px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-header-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  opacity: 0.9;
}
.profile-header-points {
  text-align: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px 14px;
}
.profile-header-points .points-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
}
.profile-header-points .points-label {
  font-size: 10px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.welcome-banner {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
  animation: dashFadeIn 0.3s ease;
}
.welcome-greeting {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.welcome-banner h3 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 4px;
}
.welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.sr-only-biz {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.welcome-banner.biz-card-section {
  background: transparent;
  border: none;
  padding: 0;
}


@keyframes dashFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dashboard-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
  animation: dashFadeIn 0.3s ease;
}
.dashboard-card h4 {
  font-size: 15px;
  color: var(--primary-color);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.card-title-row h4 { margin-bottom: 0; }
.tier-badge {
  background: rgba(49, 130, 206, 0.12);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reward-progress-track {
  width: 100%;
  height: 10px;
  background: var(--light-bg);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.reward-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-color), var(--success-color));
  border-radius: 6px;
  transition: width 0.4s ease;
}
.reward-progress-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 4px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: dashFadeIn 0.3s ease;
}
.stat-card i {
  font-size: 16px;
  color: var(--accent-color);
}
.stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-color);
}
.stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.quick-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-action-btn {
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.quick-action-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-1px);
}
.quick-action-btn.danger:hover {
  border-color: var(--danger-color);
  color: var(--danger-color);
}
.acct-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: 13px;
}
.acct-info-row:last-child { border-bottom: none; }
.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.status-badge.active {
  background: rgba(46, 204, 113, 0.15);
  color: var(--success-color);
}
.status-badge.muted {
  background: var(--light-bg);
  color: var(--text-muted);
}
.referral-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.referral-code-box {
  flex: 1;
  min-width: 140px;
  background: var(--light-bg);
  border: 1px dashed var(--accent-color);
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent-color);
  font-size: 14px;
}
.referral-copy-btn, .referral-share-btn {
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}
.referral-copy-btn:hover, .referral-share-btn:hover {
  background: var(--accent-color-hover);
}
.referral-link-row {
  display: flex;
  gap: 8px;
}
.referral-link-row input {
  flex: 1;
}
.referral-stats-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.referral-stats-row > div {
  flex: 1;
  text-align: center;
  background: var(--light-bg);
  border-radius: 10px;
  padding: 12px 8px;
}
.referral-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-color);
}
.referral-stat-label {
  font-size: 10px;
  color: var(--text-muted);
}
.addr-quick-select-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.addr-quick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--light-bg);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.addr-quick-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: rgba(49, 130, 206, 0.08);
}
.addr-quick-btn.active {
  border-color: var(--accent-color);
  background: rgba(49, 130, 206, 0.12);
  color: var(--accent-color);
}
.order-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color);
  gap: 10px;
}
.order-history-row:last-child { border-bottom: none; }
.order-history-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.order-history-id {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-history-date {
  font-size: 11px;
  color: var(--text-muted);
}
.order-history-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.order-history-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 64px;
}
.order-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: capitalize;
  white-space: nowrap;
}
.order-status-badge.completed {
  background: rgba(46, 204, 113, 0.15);
  color: var(--success-color);
}
.order-status-badge.pending {
  background: rgba(246, 173, 85, 0.18);
  color: var(--warning-color);
}
.order-status-badge.cancelled {
  background: rgba(229, 62, 62, 0.12);
  color: var(--danger-color);
}
.order-history-total {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-color);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.order-download-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.order-download-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}
@media (max-width: 480px) {
  .order-history-id { max-width: 140px; }
}
.empty-order-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 0;
}

.profile-view-mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
}
.profile-view-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.profile-view-row:hover { border-color: var(--accent-color); }
.view-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.view-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 480px) {
  .profile-view-mode { grid-template-columns: 1fr; }
}
.profile-edit-mode {
  animation: dashFadeIn 0.2s ease;
}
#prof-phone-noneditable-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
}
.profile-edit-actions {
  display: flex;
  gap: 10px;
}
.profile-edit-actions .auth-submit-btn {
  margin: 0;
  flex: 1;
}
.auth-submit-btn.cancel-btn {
  background: var(--border-color);
  color: var(--text-color);
  box-shadow: none;
}

.profile-header-wallet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.wallet-box {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.wallet-box:hover {
  background: rgba(255, 255, 255, 0.25);
}
.wallet-box i {
  font-size: 12px;
}


/* ============================================================
   CATEGORY NAVIGATION ROW — "at most ONE row visible" system.

   Home / All Categories: Main Category is the only nav row (default
   markup/CSS — untouched here).

   Inside any specific Main Category (body.category-page-active, set
   by applyHomeViewMode() in script.js exactly when
   homeViewMode === 'category'): Main Category is now fully removed
   (display:none, zero height — not compacted), and Sub Category
   takes its spot as the one designed/full-size row (Sub Category's
   own default styling is already the full "beautiful" pill design —
   untouched, nothing extra needed here to make it look that way).

   Inside a Sub Category that has Micro Category data
   (body.micro-row-active, set by script.js in buildMicroCategoryChips()/
   hideMicroCategoryRow() at the exact moment that row's real data
   condition puts it on screen): Sub Category is also fully removed,
   and Micro Category becomes the one visible row. Main Category
   never reappears at this level (body.category-page-active still
   applies underneath, so its own display:none rule stays in force).

   In every case only ONE row is ever on screen, so there's no
   leftover height/gap to account for — updateHeaderHeightVar()
   (already called right after each class toggles, unchanged) reads
   each row's real (now 0, when hidden) offsetHeight into
   --category-row-height / --sub-category-row-height, so whichever
   row IS visible re-pins directly under the Breadcrumb with no gap.
   ============================================================ */
body.category-page-active .category-showcase {
  display: none;
}

body.micro-row-active .sub-category-showcase {
  display: none;
}

/* Product Page: no Main/Sub/Micro Category row above the Breadcrumb —
   Main Header -> Breadcrumb -> Product Content. Sub/Micro rows are already
   hidden via hideStoreControls()/hideMicroCategoryRow(); this hides the
   Main Category row the same way, only while on the Product Page. */
body.product-page-active .category-showcase {
  display: none;
}