/* =========================================================
   VETRA: Customer app stylesheet (header, sidebar, tab bar,
   category rail, product grid, cart, orders...).
   Colours, type, spacing and radii all come from ../../vetra-tokens.css
   (Apple HIG based, light and dark). Never add a hex colour here:
   use a token, or it won't follow Dark Mode.
   ========================================================= */

:root {
  /* Old names, kept so existing rules work; every value comes from
     ../../vetra-tokens.css (loaded first), which also handles Dark Mode. */
  --navy: var(--c-text);
  --navy-2: var(--c-text);
  --ink: var(--c-text);
  --card: var(--c-surface);
  --muted: var(--c-text-2);
  --line: var(--c-sep);
  --purple1: var(--c-accent);
  --purple2: var(--c-accent);
  --font-body: var(--font-sans);
}

* {
  box-sizing: border-box;
}

/* See the matching comment in admin/assets/style.css: any class with its
   own `display` value beats the browser's built-in `[hidden]{display:none}`
   default, since author CSS always wins over user-agent CSS at equal
   specificity. This closes that whole bug class pre-emptively here too. */
[hidden] {
  display: none !important;
}

/* Every product/category card carrying this attribute is click-to-detail
   (see wireProductCardClicks() in assets/interactions.js), a plain
   cursor cue so it reads as clickable beyond just its Add to Cart button. */
[data-product-id] {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

html,
body {
  height: 100%;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-subhead);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* ---------- APP SHELL (sidebar + content) ---------- */
.app-shell {
  display: flex;
  height: 100vh;
  /* 100svh (small viewport height), not 100dvh: dvh recalculates live as a
     mobile browser's address bar collapses/expands during the scroll, which
     resizes .phone's scroll area mid-gesture and makes scrolling feel janky.
     svh is fixed to the smallest viewport up front. */
  height: 100svh;
  width: 100%;
  margin: 0;
  background: var(--c-bg);
  align-items: stretch;
  overflow: hidden;
}

.phone {
  width: auto;
  min-width: 0;
  min-height: 100%;
  background: var(--c-bg);
  position: relative;
  /* room for the tab bar plus the home indicator on notched phones */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Stop a scroll at the top/bottom from chaining into the page behind. */
  overscroll-behavior-y: contain;
}

/* ---------- SIDEBAR (desktop source list) ---------- */
.sidebar {
  display: none;
  /* shown only at the desktop breakpoint, see the media query below */
  flex-direction: column;
  width: 232px;
  flex-shrink: 0;
  background: var(--c-material);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--c-sep);
  min-height: 100vh;
  min-height: 100svh;
  position: sticky;
  top: 0;
  padding: var(--s-4) var(--s-3);
  transition: width var(--dur) var(--ease), padding var(--dur) var(--ease);
  overflow: hidden;
}

.sidebar.collapsed {
  width: 72px;
  padding: var(--s-4) var(--s-2);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  margin-bottom: var(--s-5);
  padding: 0 var(--s-2);
}

.sidebar-logo {
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-logo {
  opacity: 0;
  width: 0;
}

.sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease);
}

.sidebar-toggle:hover {
  background: var(--c-fill);
  color: var(--c-text);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--t-subhead);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}

.sidebar-link svg {
  flex-shrink: 0;
  color: var(--c-accent);
}

.sidebar-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-link span {
  display: none;
}

.sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 0;
}

.sidebar-link:hover {
  background: var(--c-fill-2);
}

.sidebar-link.active {
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-weight: 600;
}

/* floating reopen button, shown when the sidebar is fully hidden on desktop */
.sidebar-reopen {
  display: none;
  position: fixed;
  left: var(--s-4);
  top: var(--s-3);
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  background: var(--c-material);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--c-text);
  border: 1px solid var(--c-sep);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
}

.sidebar-reopen.show {
  display: flex;
}

/* ---------- TOP BAR ---------- */
/* Translucent, sticky: content scrolls underneath it, as in iOS. */
header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--c-material);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--c-sep);
  padding: var(--s-2) var(--s-4);
  padding-top: calc(var(--s-2) + env(safe-area-inset-top));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
}

.logo {
  margin: 0;
}

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  text-decoration: none;
  background: transparent;
  transition: background var(--dur) var(--ease);
}

/* Live cart-item and unread counts (assets/interactions.js) */
.cart-count-badge,
.notif-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--c-red);
  color: var(--c-on-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--c-material-solid);
}

/* "Added ✓" feedback state on an Add to Cart button */
.add-cart.added,
.add-btn.added {
  background: var(--c-green) !important;
  color: var(--c-on-accent) !important;
  border-color: var(--c-green) !important;
}

.icon-btn:hover {
  background: var(--c-fill);
}

.icon-actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* ---- Header profile avatar (links to settings.html) ---- */
.header-avatar {
  padding: 0;
  overflow: hidden;
  background: var(--c-fill);
  border: none;
}

.header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.header-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--c-accent);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: var(--s-2);
}

.header-toggle:hover {
  background: var(--c-fill);
}

/* Search field: the iOS style, a filled well rather than a bordered box. */
.searchbar {
  background: var(--c-fill);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-2) 0 var(--s-3);
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.searchbar .search-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-text-2);
  padding: 0;
}

.searchbar input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--t-callout);
  color: var(--c-text);
  background: transparent;
}

.searchbar input:focus-visible {
  box-shadow: none;
}

.searchbar:focus-within {
  box-shadow: var(--focus-ring);
}

.searchbar input::placeholder {
  color: var(--c-text-2);
}

.filter-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--c-sep);
  background: transparent;
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--s-2);
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
}

.filter-btn.active svg {
  stroke: var(--c-accent);
}

/* ---------- FILTER PANEL (search bar filter button) ---------- */
.filter-panel {
  display: none;
  background: var(--c-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin: 10px 16px 0;
  box-shadow: var(--shadow-float);
}

.filter-panel.open {
  display: block;
}

.filter-panel-row {
  margin-bottom: 14px;
}

.filter-panel-row:last-of-type {
  margin-bottom: 0;
}

.filter-panel-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.filter-panel select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--c-surface);
  font-family: var(--font-body);
}

.filter-panel select:focus {
  outline: none;
  border-color: var(--purple2);
  box-shadow: 0 0 0 3px rgba(63, 95, 224, 0.12);
}

.filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  cursor: pointer;
}

.filter-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-chip span {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--c-fill);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
  transition: background var(--dur) var(--ease), border-color .15s ease, color .15s ease;
}

.filter-chip input:checked + span {
  background: var(--c-accent-fill);
  border-color: transparent;
  color: var(--c-on-accent);
}

.filter-chip input:focus-visible + span {
  outline: 2px solid var(--purple2);
  outline-offset: 2px;
}

.filter-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-price-range input {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--c-surface);
  font-family: var(--font-body);
}

.filter-price-range input:focus {
  outline: none;
  border-color: var(--purple2);
  box-shadow: 0 0 0 3px rgba(63, 95, 224, 0.12);
}

.filter-price-sep {
  color: var(--muted);
  font-size: 13px;
  flex-shrink: 0;
}

.filter-panel-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.filter-panel-count {
  font-size: 12px;
  color: var(--muted);
}

.filter-panel-actions .secondary-btn.compact,
.order-track-actions .secondary-btn {
  width: auto;
  min-height: var(--tap);
  margin-top: 0;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-subhead);
}

.filter-empty-state {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13.5px;
  grid-column: 1 / -1;
}

/* ---------- BANNER / CAROUSEL ----------
   Picture-only: every slide is just an <img>, no text/color overlay.
   Both dashboard.html and explore.html render this from the site-wide,
   admin-managed banner list (Settings > Site Banners), built by each
   page's own inline script. There used to be a text+image variant
   (.banner-text/.banner-art) and a `.banner--picture-only` modifier
   class scoping around a second, conflicting copy of these rules
   elsewhere in this file, both pages are picture-only now, so that
   split no longer serves a purpose and was folded into one definition. */
.banner-wrap {
  padding: 14px 16px 6px;
  margin: 0;
}

.banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 220px;
  background: var(--c-accent-fill);
}

.banner-slide {
  display: none;
  height: 100%;
}

.banner-slide.active {
  display: block;
}

.banner-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* image placeholder used everywhere a real photo will eventually go */
.img-placeholder {
  background: var(--c-fill);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
  font-size: 10px;
  text-align: center;
  overflow: hidden;
}

.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 4px;
}

.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-fill);
  cursor: pointer;
}

.dots span.active {
  background: var(--c-text);
  width: 16px;
  border-radius: 4px;
}

/* ---------- CATEGORIES ---------- */
.categories {
  background: var(--c-surface);
  margin: var(--s-4) var(--s-4) 0;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  width: calc(100% - 2 * var(--s-4));
  box-shadow: var(--shadow-card);
}

.cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-3);
}

.cat-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  line-height: var(--lh-tight);
  color: var(--c-text);
  font-weight: 700;
}

.see-more {
  font-size: var(--t-subhead);
  font-weight: 400;
  color: var(--c-accent);
  background: none;
  border: none;
  padding: var(--s-2) 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.cat-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cat-scroll::-webkit-scrollbar {
  display: none;
}

.cat-card {
  flex: 0 0 auto;
  width: 96px;
  text-align: center;
}

.cat-thumb {
  width: 96px;
  height: 80px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  overflow: hidden;
  background: var(--c-surface-2);
  transition: transform var(--dur) var(--ease);
}

.cat-card:hover .cat-thumb {
}

.cat-card span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- TRENDING SEARCH CHIPS (explore.html) ---------- */
.trending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 2px;
}

.trending-chip {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--c-surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color .15s ease, transform .15s ease;
}

.trending-chip:hover {
  background: var(--c-fill);
  border-color: var(--purple2);
}

/* ---------- TOP VENDORS RAIL (explore.html) ---------- */
.vendor-rail {
  padding: 16px 16px 4px;
}

.vendor-mini-card {
  flex: 0 0 auto;
  width: 88px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.vendor-mini-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 6px;
  overflow: hidden;
  border: 2px solid var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow .18s ease;
}

.vendor-mini-card:hover .vendor-mini-avatar {
}

.vendor-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vendor-mini-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

/* The actual truncation target. .vendor-mini-name itself has no fixed
   width (inline-flex sizes to fit its content), so overflow/ellipsis on
   IT never engaged; a long store name just grew past its 88px-wide
   .vendor-mini-card and visually overlapped the next card in the rail.
   min-width: 0 is what actually lets a flex child shrink below its
   content's natural width instead of forcing the row wider. */
.vendor-mini-name-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendor-mini-meta {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- PRODUCT GRID ---------- */
.products-wrap {
  margin: var(--s-4) var(--s-4) 0;
  width: calc(100% - 2 * var(--s-4));
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
  vertical-align: middle;
}

.verified-badge svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.products-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.products-empty-state::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23b8bcc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96 12 12l8.73-5.04'/%3E%3Cpath d='M12 22.08V12'/%3E%3C/svg%3E") center/22px no-repeat;
}

.product {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease);
}

.product:hover {
}

.product-img {
  height: 96px;
  border-radius: 0;
}

.product-body {
  padding: 8px 9px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-name {
  font-size: var(--t-subhead);
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

.product-vendor {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-vendor .verified-badge {
  width: 13px;
  height: 13px;
}

.product-vendor .verified-badge svg {
  width: 9px;
  height: 9px;
}

.product-price {
  font-size: var(--t-headline);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  margin: 0 0 2px;
}

.product-loc {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 7px;
}

.product-loc svg {
  flex-shrink: 0;
}

/* Color/storage: single line, ellipsis past the card's own width so a
   long value never stretches the card or wraps into the row below. */
.product-specs {
  font-size: 10px;
  font-weight: 600;
  color: var(--purple2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 3px;
}

/* Description preview: clamped to 2 lines regardless of the real
   length; -webkit-line-clamp is supported in every browser this app
   already targets. */
.product-desc-preview {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 5px;
}

.product-qty-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 7px;
}

.product-qty-stepper .qty-btn {
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
}

.product-qty-value {
  min-width: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.add-cart {
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
  border: none;
  border-radius: 6px;
  padding: 7px 0;
  font-size: 11px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform .12s ease;
  margin-top: auto;
}

.add-cart:hover {
  background: var(--c-accent-fill);
}

.add-cart:active {
  transform: scale(.97);
}

/* ---------- BOTTOM NAV ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: none;
  /* iOS tab bar: translucent material with a hairline on top */
  background: var(--c-material);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--c-sep);
  display: flex;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 20;
}

.page-shell {
  padding: 18px 16px 90px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.page-kicker {
  margin: 0 0 2px;
  font-size: var(--t-footnote);
  font-weight: 400;
  color: var(--c-text-2);
}

.page-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-large-title);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--c-text);
}

.page-link {
  background: none;
  border: none;
  padding: var(--s-2) 0;
  color: var(--c-accent);
  font: inherit;
  font-size: var(--t-subhead);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.page-grid {
  display: grid;
  gap: 16px;
}

.page-card,
.summary-card,
.notification-card {
  background: var(--c-surface);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: var(--shadow-card);
}

.page-card {
  padding: var(--s-4);
}

.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-sep);
}

.cart-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cart-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cart-thumb {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--c-accent-tint);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  padding: 0;
}

.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-thumb.accent {
  background: var(--c-accent-tint);
}

.contact-vendor-btn {
  margin-top: 8px;
  border: none;
  background: var(--c-accent-tint);
  color: var(--c-accent);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.cart-item-main h3,
.summary-card h3,
.notification-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--c-text);
}

.cart-item-main p,
.notification-card p {
  margin: 0;
  font-size: 13px;
  color: var(--c-text-2);
}

.cart-item-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-sep);
  border-radius: 999px;
  background: var(--c-surface);
  cursor: pointer;
}

.qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-stock-hint {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-orange);
  white-space: nowrap;
}

.product-detail-actions .qty-stock-hint {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 12px;
  white-space: normal;
}

.cart-price {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--c-text);
}

.summary-card {
  padding: var(--s-5);
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--c-text-2);
}

.summary-row.total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-sep);
  color: var(--c-text);
  font-weight: 700;
}

.summary-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-2);
  text-align: center;
}

.primary-btn,
.secondary-btn {
  width: 100%;
  min-height: 50px;
  border-radius: var(--r-md);
  border: none;
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  font: inherit;
  font-size: var(--t-headline);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.primary-btn {
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
}

.primary-btn:hover {
  background: var(--c-accent-hover);
}

.primary-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Secondary actions: the accent as a tint, per Apple's tinted button style. */
.secondary-btn {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.secondary-btn {
  background: var(--c-fill);
  color: var(--c-text);
}

.notification-list {
  display: grid;
  gap: 12px;
}

.notification-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  align-items: flex-start;
}

.notification-card.unread {
  border: 1px solid var(--c-accent-tint);
  background: var(--c-surface-2);
}

.notif-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--c-accent-tint);
  flex-shrink: 0;
}

.notif-icon.accent {
  background: var(--c-accent-tint);
}

.notification-card span {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-accent);
}

/* ---------- VENDOR STORE PAGE (store.html) ---------- */
.store-cover-wrap {
  position: relative;
}

.store-cover {
  height: 168px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-fill);
  position: relative;
  overflow: hidden;
}

.store-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(11, 18, 32, 0.35) 100%);
}

.store-back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform .15s ease;
}

.store-back-btn:hover {
  background: rgba(11, 18, 32, 0.65);
  transform: translateX(-1px);
}

.store-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 6px 0;
}

/* Floats fully on the cover photo (bottom-left corner) instead of
   overlapping the text row below, avoids the two ever colliding
   regardless of how long the store name or category label is. */
.store-avatar {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--c-surface);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
  background: var(--c-accent-fill);
}

.store-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-header-info {
  flex: 1 1 200px;
  min-width: 0;
}

.store-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.store-name-row h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
}

.store-name-row .verified-badge {
  width: 18px;
  height: 18px;
}

.store-category-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--purple2);
  background: var(--c-accent-tint);
  padding: 4px 10px;
  border-radius: 999px;
}

.store-category-tag.pending {
  color: var(--c-orange);
  background: var(--c-orange-tint);
}

.store-bio {
  margin: 20px 6px 16px;
  color: var(--ink);
  line-height: 1.6;
  font-size: 14px;
}

.store-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 6px;
}

.store-stat {
  background: var(--c-surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.store-stat-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-tint);
  color: var(--purple2);
}

.store-stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-stat-label {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

.store-info-card {
  margin: 16px 6px 0;
}

.store-info-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.store-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
}

.store-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.store-meta-row strong {
  color: var(--ink);
}

.store-meta-row svg {
  color: var(--purple2);
  flex-shrink: 0;
}


@media (min-width: 900px) {
  .page-shell {
    padding: 24px 24px 32px;
  }

  .page-grid {
    grid-template-columns: 1.6fr 0.8fr;
    align-items: start;
  }
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--c-text-2);
  font-size: 10.5px;
  font-weight: 600;
  background: none;
  border: none;
  text-decoration: none;
}

.nav-item.active {
  color: var(--c-accent);
}

/* iOS tab bars mark the selected tab by colour alone. */
.nav-item .dot-indicator {
  display: none;
}

/* =========================================================
   RESPONSIVE BREAKPOINT: DESKTOP / WEB VIEW
   Below 900px: mobile layout, bottom nav, no sidebar.
   900px and up: sidebar replaces bottom nav, layout widens.
   ========================================================= */
@media (min-width: 900px) {

  body {
    display: block;
    overflow: hidden;
  }

  .app-shell {
    align-items: flex-start;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .sidebar {
    display: flex;
    height: 100vh;
    height: 100svh;
  }

  .header-toggle {
    display: flex;
  }

  /* The sidebar already shows the logo on desktop. */
  .topbar .logo {
    display: none;
  }

  .sidebar-reopen.show {
    display: flex;
  }

  .phone {
    max-width: none;
    padding-bottom: 24px;
    background: var(--c-bg);
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
  }

  .bottom-nav {
    display: none;
  }

  .banner-wrap,
  .categories,
  .products-wrap {
    margin-left: 24px;
    margin-right: 24px;
  }

  .cat-scroll {
    flex-wrap: wrap;
    overflow: visible;
  }

  .cat-card {
    width: 112px;
  }

  .cat-thumb {
    width: 112px;
    height: 92px;
  }

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

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

/* ---- Product badge ribbon ---- */
.product-img {
  position: relative;
}

.product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--c-on-accent);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-accent-fill);
  z-index: 1;
}

.product-badge.hot { background: var(--c-red); }
.product-badge.new { background: var(--c-green); }

.products-section {
  padding: 0 0 80px;
}

.products-section .cat-head {
  padding: 0 16px;
  margin-bottom: 12px;
}

@media (min-width: 900px) {
  .banner {
    height: 240px;
  }

  .products-section {
    padding: 0 0 32px;
  }
}

/* ---- Live chat widget: hidden until the visitor opens it ----
   Smartsupp's own hideWidget:true config (set in every page's inline
   Smartsupp snippet) hides the default floating launcher bubble on
   first load, but once a visitor has opened the chat at least once,
   Smartsupp shows its own floating bubble again from then on, which
   is not what we want here. So instead we keep the whole widget
   container hidden ourselves by default, and only reveal it while
   <body> carries "livechat-open", a class assets/support.js adds
   when "Support" is clicked. Closing it back down goes through our
   own #livechat-close-btn (also in support.js) rather than trying to
   detect Smartsupp's native in-widget close, since that state lives
   inside a cross-origin iframe this page can never read, see the
   long comment at the top of support.js for why. */
#smartsupp-widget-container {
  display: none !important;
}

body.livechat-open #smartsupp-widget-container {
  display: block !important;
}

/* Our own "close chat" control, see support.js. Fixed top-right so it
   never overlaps Smartsupp's bottom-anchored bubble/panel, and stays
   clickable above the widget's iframe via z-index. */
#livechat-close-btn {
  display: none;
  align-items: center;
  gap: 6px;
  position: fixed;
  top: 74px;
  right: 16px;
  z-index: 10000;
  border: none;
  border-radius: 999px;
  padding: 9px 16px 9px 14px;
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--t-footnote);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
}

#livechat-close-btn:hover {
  opacity: 0.88;
}

body.livechat-open #livechat-close-btn {
  display: inline-flex;
}
/* ---- Brand logo images (replaces plain "VETRA" text) ---- */
.logo-img {
  height: 34px;
  width: auto;
  display: block;
}

.sidebar-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

/* ---- Password reveal toggle (assets/password-toggle.js) ----
   The script wraps each type="password" input in this container and
   appends the eye-icon button, absolutely positioned inside it. */
.password-field-wrap {
  position: relative;
}

.password-field-wrap input.has-password-toggle {
  padding-right: 2.7rem;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color .15s ease;
}

.password-toggle-btn:hover {
  color: var(--ink);
  background: rgba(11, 18, 32, .06);
}

/* =========================================================
   ORDERS PAGE (customer/orders.html)
   Status filter tabs, order cards, and the per-order tracking
   timeline that expands under a card when it's clicked.
   ========================================================= */
/* Segmented control. Scrolls sideways when there are more segments than
   fit (the order statuses on a phone), instead of wrapping into rows. */
.order-filter-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: var(--s-4);
  background: var(--c-fill);
  border-radius: var(--r-md);
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
}

.filter-tab {
  flex-shrink: 0;
  min-height: 32px;
  font: inherit;
  font-size: var(--t-footnote);
  font-weight: 500;
  color: var(--c-text);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 2px);
  padding: 0 var(--s-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}

.filter-tab.active {
  color: var(--c-text);
  background: var(--c-segment);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

.order-list {
  display: grid;
  gap: 12px;
}

.order-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.order-card-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

.order-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--c-fill);
  flex-shrink: 0;
}

.order-card-info .order-id {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.order-card-info .order-meta {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--muted);
}

.order-card-info .order-date {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.order-tracking-line {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--purple2);
  font-weight: 600;
}

.order-card-side {
  text-align: right;
}

.order-card-side .order-amount {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.order-chevron {
  color: var(--muted);
  transition: transform var(--dur) var(--ease);
  justify-self: end;
}

.order-card.open .order-chevron {
  transform: rotate(180deg);
}

.status-pill {
  display: inline-block;
  font-size: var(--t-caption);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  text-transform: capitalize;
  white-space: nowrap;
}

.status-pill.pending { background: var(--c-orange-tint); color: var(--c-orange); }
.status-pill.processing { background: var(--c-accent-tint); color: var(--c-accent); }
.status-pill.shipped { background: var(--c-accent-tint); color: var(--c-accent); }
.status-pill.out-for-delivery { background: var(--c-orange-tint); color: var(--c-orange); }
.status-pill.completed { background: var(--c-green-tint); color: var(--c-green); }
.status-pill.cancelled { background: var(--c-red-tint); color: var(--c-red); }
.status-pill.verified { background: var(--c-green-tint); color: var(--c-green); }

/* ---------- VENDOR DIRECTORY (vendors.html) ---------- */
.vendor-directory-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 14px;
}

.vendor-directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 560px) {
  .vendor-directory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vendor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow .15s ease, border-color .15s ease;
}

.vendor-card:hover {
  border-color: var(--purple2);
}

.vendor-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--c-surface);
  box-shadow: var(--shadow-card);
}

.vendor-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vendor-card-body {
  min-width: 0;
}

.vendor-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.vendor-card-name-row h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendor-card-category {
  margin: 0 0 3px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.vendor-card-meta {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.order-track-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
  border-top: 1px solid var(--line);
}

.order-card.open .order-track-panel {
  /* Generously larger than any realistic content (was a hard 480px,
     which the item list added below can now exceed on a many-item
     order and get clipped by this panel's own overflow:hidden),
     still animates fine since a max-height transition only needs the
     end value to be >= the real content height, not exactly equal. */
  max-height: 2000px;
}

.order-track-steps {
  list-style: none;
  margin: 0;
  padding: 16px 18px 4px;
}

.order-detail-items {
  padding: 4px 18px 12px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.order-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.order-detail-item + .order-detail-item {
  border-top: 1px solid var(--c-sep);
}

.order-detail-item.is-unavailable {
  opacity: 0.6;
}

.order-detail-item.is-unavailable .order-detail-item-name {
  text-decoration: line-through;
}

.order-detail-item-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-surface-2);
  flex-shrink: 0;
}

.order-detail-item-name {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.order-detail-item-meta {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

.order-detail-unavailable-tag {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-red);
}

.order-track-steps .step {
  position: relative;
  padding-left: 24px;
  padding-bottom: 20px;
  display: flex;
  gap: 12px;
}

.order-track-steps .step::before {
  /* the connecting vertical line running through every dot */
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -6px;
  width: 2px;
  background: var(--line);
}

.order-track-steps .step:last-child::before {
  display: none;
}

.step-dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line);
  border: 2px solid var(--c-surface);
  box-shadow: 0 0 0 1px var(--line);
}

.order-track-steps .step.done .step-dot {
  background: var(--c-green);
  box-shadow: 0 0 0 1px var(--c-green);
}

.order-track-steps .step.current .step-dot {
  background: var(--purple2);
  box-shadow: 0 0 0 3px rgba(63, 95, 224, .22);
}

.order-track-steps .step.upcoming strong,
.order-track-steps .step.upcoming span {
  color: var(--muted);
}

.order-track-steps .step div strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}

.order-track-steps .step div span {
  font-size: 11.5px;
  color: var(--muted);
}

.order-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 18px 16px;
}

.order-track-actions .secondary-btn {
  flex: 1 1 auto;
  min-width: 140px;
}

/* =========================================================
   VENDOR STORE: REVIEWS SECTION (customer/store.html)
   Static/mocked review list + a "write a review" form that
   appends a new review to the list client-side. There's no
   backend, so a real "only after a completed order" check
   can't be enforced here, the form just simulates that flow.
   ========================================================= */
.review-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border-radius: 14px;
  margin-bottom: 14px;
}

.review-summary-score {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
}

.review-summary-meta {
  font-size: 12px;
  color: var(--muted);
}

.review-summary-stars {
  color: var(--c-orange);
  font-size: 14px;
}

.review-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}

.review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.review-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.review-card-date {
  font-size: 11px;
  color: var(--muted);
}

.review-card-stars {
  color: var(--c-orange);
  font-size: 12.5px;
  margin-bottom: 6px;
}

.review-card-text {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

.verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-green);
  background: var(--c-green-tint);
  padding: 2px 8px;
  border-radius: 999px;
}

.review-form-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
}

/* Generic labelled-field styling, shared by any page-specific form that
   isn't already covered by .form-input (that class lives in the admin/
   vendor stylesheets, not this one). Originally only defined inline on
   settings.html; pulled out here so store.html's review form (and any
   future customer-app form) doesn't have to redeclare it. */
.field-group {
  margin-bottom: 14px;
}

.field-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px var(--s-3);
  font: inherit;
  font-size: var(--t-body);
  color: var(--c-text);
  background: var(--c-fill);
  resize: vertical;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  background: var(--c-surface);
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--purple2);
  box-shadow: 0 0 0 3px rgba(63, 95, 224, .12);
}

.star-input {
  display: inline-flex;
  gap: 4px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  padding: 2px;
}

.star-btn.active {
  color: var(--c-orange);
}

@media (max-width: 520px) {
  .order-card-summary {
    grid-template-columns: 40px 1fr auto 16px;
    padding: 10px 12px;
  }

  .order-thumb {
    width: 40px;
    height: 40px;
  }
}

/* =========================================================
   MODAL: shared overlay/panel shell (first used by the "File a
   report" modal on orders.html). Same class names as the vendor
   and admin stylesheets' modal blocks so a modal looks/behaves
   identically everywhere on the site, even though each area's
   CSS file stays self-contained per the project's convention.
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-10) var(--s-4);
  overflow-y: auto;
  z-index: 300;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-float);
  animation: modal-pop var(--dur) var(--ease);
}

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-sep);
}

.modal-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.modal-close-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--c-fill);
  color: var(--c-text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: var(--c-fill);
  color: var(--ink);
}

.modal-body {
  padding: 20px;
  max-height: 72vh;
  overflow-y: auto;
}

/* ---- Shared confirm modal body text (see CustomerUI.confirm()/.info()
   in assets/ui.js) ---- */
.confirm-modal-body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
}

.confirm-modal-target {
  font-weight: 700;
  color: var(--ink);
}

/* ---- Photo preview modal (see CustomerUI.photoPreview() in assets/ui.js) ---- */
.photo-preview-frame {
  margin: 0 auto 16px;
  overflow: hidden;
  background: var(--c-fill);
}

.photo-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-preview-frame.is-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.photo-preview-frame.is-cover {
  width: 100%;
  height: 160px;
  border-radius: 12px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.form-actions .btn {
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.form-actions .btn-save {
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
}

.form-actions .btn-cancel {
  background: var(--c-fill);
  color: var(--c-text);
}

.report-filed-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--c-fill);
  padding: 6px 12px;
  border-radius: 999px;
}

/* =========================================================
   PRODUCT DETAIL PAGE (product.html)
   ========================================================= */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.product-detail-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-fill);
}

.product-detail-image img,
.product-detail-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}

.product-detail-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--c-fill);
  padding: 0;
  cursor: pointer;
  position: relative;
}

.product-detail-thumb.active {
  border-color: var(--purple2);
}

.product-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-detail-thumb-video-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.product-detail-price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 6px 0;
}

.product-detail-loc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 10px;
}

.product-detail-vendor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--purple2);
  text-decoration: none;
  margin-bottom: 14px;
}

.product-detail-vendor:hover {
  text-decoration: underline;
}

.product-detail-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
}

.product-detail-specs {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 12px;
}

.product-detail-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}

.product-detail-keyword-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--purple2);
  background: var(--purple-tint, rgba(123, 92, 240, 0.1));
  border-radius: 999px;
  padding: 4px 10px;
}

.product-detail-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.product-detail-actions .cart-item-actions {
  background: var(--c-surface-2);
  border-radius: 999px;
  padding: 6px 10px;
}

.product-detail-actions .primary-btn {
  flex: 1 1 auto;
  min-width: 160px;
}

.product-detail-actions .primary-btn.added {
  background: var(--c-green);
}

@media (min-width: 720px) {
  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .product-detail-image {
    aspect-ratio: 1 / 1;
  }
}

/* Tactile hover/active feedback for every button-style control, site-wide. */
button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
[class*="-btn"]:not(:disabled),
[class*="btn-"]:not(:disabled) {
  transition: transform var(--dur) var(--ease), filter 0.15s ease;
}

button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
[class*="-btn"]:not(:disabled):hover,
[class*="btn-"]:not(:disabled):hover {
  filter: brightness(1.04);
}

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active,
[class*="-btn"]:not(:disabled):active,
[class*="btn-"]:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.98);
}

/* ---------- Delivery (cart.html form, orders.html tracking panel) ----------
   Backed by /api/delivery, see backend/src/utils/delivery.js. */
.delivery-method-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin: 10px 0 12px;
  background: var(--c-fill);
  border-radius: 12px;
}

.delivery-method-option {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 9px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-2);
  cursor: pointer;
}

.delivery-method-option.active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
}

.delivery-form {
  display: grid;
  gap: 10px;
}

.delivery-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-2);
}

.delivery-field em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

.delivery-field input,
.delivery-field select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--c-surface);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
}

.delivery-pickup-note,
.delivery-quote-hint {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.delivery-quote-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.delivery-quote-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--c-text-2);
}

.delivery-quote-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-quote-row strong {
  flex-shrink: 0;
  color: var(--c-text);
}

.delivery-quote-row.is-error strong {
  color: var(--c-red);
  font-weight: 600;
}

.delivery-panel {
  display: grid;
  gap: 12px;
  margin: 4px 16px 14px;
}

.delivery-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--c-accent-tint);
  border: 1px solid rgba(63, 95, 224, 0.2);
}

.delivery-code-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-text-2);
}

.delivery-code-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--c-text);
  white-space: nowrap;
}

.delivery-rider-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
}

.delivery-rider-card strong {
  display: block;
  color: var(--c-text);
}

.delivery-rider-card span {
  color: var(--muted);
  font-size: 12px;
}

.delivery-call-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.rider-map {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 12px;
  display: block;
}

.delivery-map-caption {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

.delivery-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.delivery-events li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 12.5px;
  color: var(--c-text);
}

.delivery-events li::before {
  content: "";
  grid-row: span 2;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--c-accent-fill);
}

.delivery-events time {
  font-size: 11px;
  color: var(--muted);
}

.delivery-alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-orange-tint);
  color: var(--c-orange);
  font-size: 12.5px;
  line-height: 1.45;
}

.delivery-panel-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.order-confirm-btn {
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
}

/* Returning from Paystack (assets/orders.js, handlePaymentReturn) */
.payment-return-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 600;
}

.order-refund-line {
  margin: 0 16px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-green);
}

/* ---- Category rail (dashboard.html, assets/category-art.js) ---- */
a.cat-card {
  text-decoration: none;
  color: inherit;
}
.cat-thumb .cat-art {
  display: block;
  width: 100%;
  height: 100%;
}
.cat-card span {
  display: block;
  line-height: 1.25;
}
/* Collapsed on a wide screen: one row, the rest behind "See more". */
@media (min-width: 900px) {
  .cat-scroll:not(.expanded) .cat-extra {
    display: none;
  }
}
/* Expanded: every category as a wrapping grid, phones included. */
.cat-scroll.expanded {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  overflow: visible;
  row-gap: var(--s-3);
}
.cat-scroll.expanded .cat-card {
  width: auto;
}
.cat-scroll.expanded .cat-thumb {
  width: 100%;
}
@media (min-width: 900px) {
  .cat-scroll.expanded {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }
}

/* =========================================================
   Phones and tablets (under 900px): no bottom tab bar. The sidebar
   becomes a drawer that slides in from the left, opened by the
   header's menu button and closed by tapping outside it, pressing
   Escape, or picking a link (shared-ui.js, VetraChrome).
   ========================================================= */
@media (max-width: 899px) {
  .bottom-nav {
    display: none !important;
  }

  .phone {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .header-toggle {
    display: flex;
  }

  .app-shell .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(280px, 84vw);
    height: 100%;
    min-height: 0;
    padding-top: calc(var(--s-4) + env(safe-area-inset-top));
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
    background: var(--c-material-solid);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }

  .app-shell .sidebar.mobile-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s var(--ease), visibility 0s;
  }

  /* The desktop "collapse to icons" state doesn't apply to the drawer. */
  .app-shell .sidebar.collapsed {
    width: min(280px, 84vw);
  }
  .app-shell .sidebar.collapsed .sidebar-link span,
  .app-shell .sidebar.collapsed .sidebar-role-tag span {
    display: inline;
  }
  .app-shell .sidebar.collapsed .sidebar-link {
    justify-content: flex-start;
    padding: 0 var(--s-3);
  }
  .app-shell .sidebar-link {
    min-height: 46px;
  }

  .sidebar-reopen,
  .sidebar-reopen.show {
    display: none;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }
  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  body.sidebar-drawer-open {
    overflow: hidden;
  }
}