/* =========================================================
   E-SHOP — visual system
   Palette drawn from imigongo (Rwandan geometric line art):
   paper + ink, market green, ochre pigment, sand, brick.
   ========================================================= */

:root {
  --paper: #F7F4EE;
  --ink: #211B17;
  --ink-soft: #5C544C;
  --green: #2F6F4E;
  --green-dark: #234F38;
  --ochre: #C77B2C;
  --sand: #E8E2D6;
  --sand-dark: #D9D0BF;
  --brick: #B34A3C;
  --white: #FFFFFF;
  /* Always this exact dark green regardless of light/dark theme — the sidebar is a
     deliberately dark surface on its own, not something the theme toggle should touch */
  --sidebar-bg: #234F38;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(33, 27, 23, 0.06), 0 4px 14px rgba(33, 27, 23, 0.06);
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --paper: #1A1815;
  --ink: #EDECE7;
  --ink-soft: #A6A49C;
  --green: #4F9973;
  --green-dark: #6BB08C;
  --ochre: #D68F42;
  --sand: #2E2B26;
  --sand-dark: #3D3931;
  --brick: #D66A5A;
  --white: #221F1A;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

/* Form controls don't inherit color/font from the page like normal text does (a
   long-standing browser default) - every input/select/textarea across the site
   would otherwise keep rendering plain black text regardless of theme, which is
   unreadable once a dark background makes that text invisible. */
input, select, textarea {
  color: var(--ink);
  font-family: inherit;
}

/* Plain content links (nav/button links have their own, more specific rules) */
a {
  color: var(--green-dark);
  text-decoration: none;
}

a:hover, a:focus-visible {
  text-decoration: underline;
}

/* ---- Secondary/help links below a form (e.g. login, register) ---- */
.form-links {
  margin-top: 18px;
}

.form-links p {
  margin: 10px 0;
}

.form-links .help-links {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sand-dark);
}

.form-links .help-links-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.form-links .help-links a {
  font-size: 13px;
  color: var(--ink-soft);
}

.form-links .help-links-sep {
  color: var(--sand-dark);
  margin: 0 8px;
  font-size: 13px;
}

/* ---- Single "Help" disclosure toggle (login page) - replaces two separately
   labeled links with one, revealing both only once actually needed. ---- */
.help-toggle-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.help-toggle-link:hover,
.help-toggle-link:focus-visible {
  color: var(--green-dark);
}

.help-links-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A plain class selector's `display` always beats the [hidden] attribute's
   UA-stylesheet default, so the links stayed visible even while collapsed -
   this combined selector's higher specificity is what actually hides them. */
.help-links-wrap[hidden] {
  display: none;
}

.help-links-wrap a {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---- Back link: consistent affordance at the top of a detail/sub-page. A plain <a>,
   not a JS history.back() - it always points at a known parent page, so it still works
   correctly if someone landed here from a bookmark or shared link with no real
   "previous page" to go back to; it supplements the browser's own Back button rather
   than replacing it. ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  padding: 6px 4px;
}

.back-link:hover, .back-link:focus-visible {
  color: var(--green-dark);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  /* Several headings include dynamic content (a seller's business name, a product
     name) with no length limit - wrap rather than overflow the viewport on narrow
     screens no matter how long that text turns out to be. */
  overflow-wrap: break-word;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

/* ---- Time-of-day greeting banner (homepage/login: general; dashboards: + name) ---- */
.greeting-banner {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-dark);
  margin: 0 0 10px 0;
}

/* ---- Homepage hero band: a slim, brand-colored ticker strip rather than a tall
   block - its welcome copy scrolls past instead of taking up standing vertical
   space on a page whose job is product discovery, not a marketing pitch. ---- */
.home-hero {
  background: linear-gradient(120deg, var(--green-dark), var(--green));
  border-radius: var(--radius);
  padding: 11px 0;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.home-hero-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.home-hero-marquee-track {
  display: inline-block;
  margin: 0;
  transform: translateX(-100%);
  animation: home-hero-marquee 16s linear infinite;
}

@keyframes home-hero-marquee {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-marquee {
    overflow: visible;
    white-space: normal;
    padding: 0 20px;
  }

  .home-hero-marquee-track {
    display: block;
    animation: none;
    transform: none;
  }
}

.home-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-right: 14px;
}

[data-theme="dark"] .home-hero-eyebrow {
  color: #F0C089;
}

.home-hero-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-right: 14px;
}

.home-hero-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Signature: imigongo triangle strip ---- */
.imigongo-strip {
  height: 8px;
  width: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--ink) 0, var(--ink) 8px,
      var(--ochre) 8px, var(--ochre) 16px,
      var(--green) 16px, var(--green) 24px,
      var(--paper) 24px, var(--paper) 32px
    );
  background-size: 32px 8px;
}

/* ---- Layout shell: sidebar nav + main content, side by side ---- */
.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

/* ---- Sidebar (column nav) ---- */
.sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-bg);
  width: 220px;
  flex-shrink: 0;
  padding: 24px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.sidebar .logo {
  color: var(--white);
}

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

.sidebar nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 0;
  transition: color 0.15s ease;
}

.sidebar nav a:hover,
.sidebar nav a:focus-visible {
  color: var(--ochre);
}

/* ---- Language switcher: sits inline in whichever nav it's included into (top
   navbar or sidebar), so it's part of normal layout flow and can never overlap
   other nav items regardless of how wide the selected language name is. ---- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--sand-dark);
  border-radius: 20px;
  padding: 7px 14px;
  margin-left: 22px;
}

.lang-switcher #theme-toggle-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--sand-dark);
  padding: 0 10px 0 0;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.lang-switcher .lang-select {
  border: none;
  background: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: var(--font-body);
  cursor: pointer;
  max-width: 120px;
}

/* Dashboard pages (seller/agent/admin) have a sidebar on the left with nothing else
   pinned to the top-right of the content area, so the switcher can safely float
   fixed in that corner there - unlike the guest header, nothing can ever overlap it. */
.lang-switcher-corner {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 50;
}

.lang-switcher-corner .lang-switcher {
  margin-left: 0;
  box-shadow: var(--shadow);
}

/* ---- Top navbar (guest/customer storefront — the sidebar above is dashboard-only) ----
   Two rows, Amazon-style: a top row (logo, deliver-to, account/cart) and a secondary
   category quick-links row underneath it — in E-SHOP's own palette, not Amazon's. */
.site-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--sand);
}

.site-header-top {
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.site-header-top .logo {
  margin-bottom: 0;
}

.deliver-to-chip {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.3;
  padding: 5px 12px;
  border-radius: 7px;
  transition: background 0.15s ease;
}

.deliver-to-chip:hover,
.deliver-to-chip:focus-visible {
  background: var(--paper);
}

.deliver-to-label {
  font-size: 11px;
  color: var(--ink-soft);
}

.deliver-to-value {
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* An inline SVG icon rather than the 🇷🇼 flag emoji - Windows has no built-in
   flag glyphs and renders regional-indicator emoji as plain "RW" letters
   instead of a flag, so the emoji looked broken there. An SVG draws the same
   way on every platform. */
.deliver-to-value::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%2320603D'/%3E%3Crect width='30' height='13' fill='%23E5BE01'/%3E%3Crect width='30' height='10' fill='%2300A1DE'/%3E%3Ccircle cx='21' cy='6' r='3' fill='%23E5BE01'/%3E%3C/svg%3E");
  background-size: cover;
}

.site-header-top nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-left: auto;
}

.site-header-top nav a {
  margin-left: 22px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  transition: color 0.15s ease;
}

.site-header-top nav a:hover,
.site-header-top nav a:focus-visible {
  color: var(--green);
}

.cart-nav-link {
  display: inline-flex;
  align-items: center;
}

.cart-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--ochre);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.site-header-categories {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 32px;
  background: var(--sidebar-bg);
  overflow-x: auto;
}

.category-pill {
  flex-shrink: 0;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.category-pill:hover,
.category-pill:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

.category-pill-active {
  background: var(--white);
  color: var(--sidebar-bg);
}

/* ---- Guest footer: additional info + the seller-location map (moved out of the
   main homepage content so it doesn't compete with product discovery there) ----
   Same constant dark-green surface as the sidebar/category bar, tying the guest
   chrome together top and bottom regardless of the light/dark toggle. */
.site-footer {
  background: var(--sidebar-bg);
  margin-top: 40px;
  padding: 32px 32px 22px;
}

.site-footer .logo {
  color: #FFFFFF;
  margin-bottom: 8px;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.site-footer-col h4 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}

.site-footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  transition: color 0.15s ease;
}

.site-footer-col a:hover,
.site-footer-col a:focus-visible {
  color: var(--ochre);
}

.site-footer-col a.site-footer-lang-active {
  color: var(--ochre);
  font-weight: 700;
}

.site-footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 220px;
  margin: 4px 0 0;
}

.site-footer .btn.secondary {
  margin-left: 0;
}

#footer-map-wrap {
  margin-top: 12px;
}

#footer-sellers-map {
  height: 260px;
  border-radius: var(--radius);
}

.footer-map-caption {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin: 8px 0 0;
}

.container {
  flex: 1;
  min-width: 0;
  max-width: 960px;
  margin: 36px auto;
  padding: 0 20px;
}

/* ---- Immersive auth screens (login): full-bleed split layout, no header/sidebar ---- */
.container.container-auth {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-split {
  display: flex;
  flex: 1;
}

.auth-form-panel {
  flex: 1 1 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--paper);
}

.auth-form-panel .auth-form-inner {
  width: 100%;
  max-width: 380px;
}

.auth-form-panel h1 {
  font-size: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 24px 0;
}

.auth-form-panel .form-box label:first-of-type {
  margin-top: 0;
}

.auth-form-panel .form-box {
  width: 100%;
  max-width: none;
  padding: 0;
  box-shadow: none;
  border: none;
  background: transparent;
}

/* The login page dropped its illustration panel, so its form is the only
   content on an otherwise plain background - give it back a proper card
   (the standard look for a standalone login form) instead of the borderless
   treatment designed for sitting next to a colorful illustration. */
.auth-form-panel-solo .form-box {
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--sand);
  background: var(--white);
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  .auth-split {
    flex-direction: column;
  }

  .auth-form-panel {
    padding: 30px 20px;
  }
}

.flash-message {
  background-color: #FCEFD9;
  border: 1px solid var(--ochre);
  color: #6B4415;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  font-size: 14px;
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

/* ---- Homepage product tiles: image + name only, the whole tile is the link.
   A deliberately lighter-weight card than .product-card (used on the seller
   storefront page, which still shows full product detail) - the homepage's
   job is discovery, not decision, so everything else lives one tap away on the
   product page instead. ---- */
.product-grid.product-tiles {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}

.product-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}

.product-tile-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--sand);
  background-color: var(--sand);
  margin-bottom: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-tile-image.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
  padding: 10px;
}

.product-tile:hover .product-tile-image,
.product-tile:focus-visible .product-tile-image {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ---- Product tile meta ----
   The homepage card carries only what a buyer needs to choose: photo, name, price and
   who is selling it. Everything else lives on the detail page. */
.product-tile-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  margin-top: 2px;
}

.product-tile-seller {
  font-size: 12px;
  color: var(--ink-soft);
  /* One line: a long shop name must not push the tiles in a row out of alignment. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-tile-unavailable {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7A2E22;
  background: #F5E1DE;
  border: 1px solid var(--brick);
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: 4px;
}

.product-tile-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  /* Long product names stay to two lines so every tile in a row keeps the same
     height, instead of some rows growing taller than others. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .product-grid.product-tiles {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .product-grid.product-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.product-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--sand);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 4px rgba(33,27,23,0.05), 0 10px 24px rgba(33,27,23,0.10);
}

.product-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
  background-color: var(--sand);
}

.product-image.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sand);
  color: var(--ink-soft);
  font-size: 13px;
}

.product-card h3 {
  margin-top: 0;
  margin-bottom: 4px;
}

.seller-label {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 8px 0;
  font-style: normal;
  display: inline-block;
  padding: 2px 8px;
  background: var(--sand);
  border-radius: 20px;
}

.seller-location {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 8px 0;
}

.product-card .description {
  color: var(--ink-soft);
  font-size: 14px;
  min-height: 40px;
  margin-top: 8px;
}

.product-card .price {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--green-dark);
  margin: 10px 0 4px 0;
}

.in-stock {
  color: var(--green-dark);
  font-size: 13px;
  font-family: var(--font-mono);
}

.out-of-stock {
  color: var(--brick);
  font-size: 13px;
  font-family: var(--font-mono);
}

.product-card form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.product-card input[type="number"] {
  width: 60px;
  padding: 8px;
  border: 1px solid var(--sand-dark);
  border-radius: 6px;
  font-family: var(--font-mono);
}

/* ---- Buttons ---- */
button, .btn {
  background-color: var(--green);
  color: var(--white);
  border: none;
  padding: 11px 18px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

button:hover, .btn:hover {
  background-color: var(--green-dark);
}

button:active, .btn:active {
  transform: scale(0.98);
}

button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

button:disabled {
  background-color: var(--sand-dark);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.btn.secondary {
  background-color: var(--white);
  color: var(--ink);
  border: 1px solid var(--sand-dark);
  margin-left: 10px;
}

.btn.secondary:hover {
  background-color: var(--sand);
}

.suggestion-toggle-btn {
  background-color: var(--ochre);
  color: var(--white);
  border: none;
  padding: 10px 18px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.suggestion-toggle-btn:hover {
  background-color: #A8641F;
}

.suggestion-toggle-btn:active {
  transform: scale(0.98);
}

/* ---- Search bar ---- */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.search-bar input[type="text"] {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--sand-dark);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--white);
}

.search-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 111, 78, 0.12);
}

.search-bar select {
  padding: 11px 14px;
  border: 1px solid var(--sand-dark);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--white);
}

.search-bar select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 111, 78, 0.12);
}

/* ---- Forms ---- */
.form-box {
  background: var(--white);
  padding: 28px;
  border-radius: var(--radius);
  max-width: 420px;
  box-shadow: var(--shadow);
  border: 1px solid var(--sand);
}

.form-box label {
  display: block;
  margin-top: 14px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.form-box input {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--sand-dark);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--paper);
}

.form-box input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 111, 78, 0.12);
  background: var(--white);
}

.form-box button {
  margin-top: 22px;
  width: 100%;
}

/* ---- Collapsible "advanced inventory settings" on the product add/edit forms -
   collapsed by default so a casual seller's form looks as simple as before the
   unit/inventory fields were added. ---- */
.advanced-inventory-settings {
  margin-top: 18px;
  border-top: 1px solid var(--sand-dark);
  padding-top: 4px;
}

.low-stock-row {
  background: rgba(199, 123, 44, 0.08);
}

.advanced-inventory-settings summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 0;
}

/* ---- Remember-me + forgot-password row (login page) ---- */
.remember-forgot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

/* Specificity note: same fight as .password-toggle-btn below - ".form-box label"
   (element+class) otherwise beats the lone class ".remember-me-field" and the
   checkbox label renders bold/uppercase like the field labels above it. */
.form-box label.remember-me-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
  cursor: pointer;
}

.remember-forgot-row .forgot-password-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
}

.form-box input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--green-dark);
}

/* ---- Password show/hide toggle (added by JS to every password field) ---- */
.password-field-wrap {
  position: relative;
  display: block;
  margin-top: 6px;
}

.password-field-wrap input {
  margin-top: 0;
  padding-right: 42px;
}

/* Specificity note: plain ".password-toggle-btn" would lose to ".form-box button"
   (an element+class selector outranks a lone class), which sets width:100% and
   margin-top:22px - exactly the "stretched and shoved below the field" bug this
   caused. Qualifying with ".form-box" here wins that fight explicitly. */
.form-box .password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  margin-top: 0;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.form-box .password-toggle-btn:hover,
.form-box .password-toggle-btn:focus-visible {
  color: var(--ink);
}

/* ---- Tables (cart, orders) ---- */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--sand);
}

.cart-table th, .cart-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--sand);
  font-size: 14px;
}

.cart-table td:has(+ td.price-cell),
.cart-table .price-cell {
  font-family: var(--font-mono);
}

.cart-table th {
  background-color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.cart-table tr:last-child td {
  border-bottom: none;
}

.dashboard-links {
  margin-bottom: 24px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ---- Small inline-SVG icons replacing emoji on the seller/agent dashboards -
   emoji render inconsistently across platforms (see the Rwanda-flag fix above),
   so these draw the same way everywhere. Dark mode gets its own lighter-colored
   copy since the SVG's stroke color can't reference a CSS variable. ---- */
.icon-pin::before,
.icon-camera::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-pin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

.icon-camera::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-2h6l2 2h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='14' r='3.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-pin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-camera::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-2h6l2 2h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='14' r='3.5'/%3E%3C/svg%3E");
}

.icon-dot::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}

.icon-dot-red::before {
  background: var(--brick);
}

.icon-dot-green::before {
  background: var(--green);
}

/* ---- More emoji-replacement icons, same approach as .icon-pin/.icon-camera
   above (inline SVG, light/dark stroke variants). These sit in front of a text
   label, so they share that pair's sizing/spacing. ---- */
.icon-comment::before,
.icon-map::before,
.icon-warning::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.icon-map::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6z'/%3E%3Cline x1='9' y1='3' x2='9' y2='18'/%3E%3Cline x1='15' y1='6' x2='15' y2='21'/%3E%3C/svg%3E");
}

/* The maintenance banner uses its own fixed (not theme-aware) colors, so this icon
   matches that banner's text color directly instead of needing a dark-mode variant. */
.icon-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2E22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cline x1='12' y1='9' x2='12' y2='14'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%237A2E22' stroke='none'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-map::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6z'/%3E%3Cline x1='9' y1='3' x2='9' y2='18'/%3E%3Cline x1='15' y1='6' x2='15' y2='21'/%3E%3C/svg%3E");
}

/* The mobile nav drawer's avatar circle sits on the sidebar's fixed dark-green
   background (--sidebar-bg, unaffected by the light/dark theme toggle), so this
   icon always uses a light stroke - no separate dark-mode override needed. */
.icon-avatar::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.5-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}

/* Theme toggle (moon/sun) and password show/hide (eye/eye-off): these buttons
   carry no text label, only the icon, so JS toggles between the two classes
   below instead of swapping emoji textContent (see base.html). */
.icon-moon::before,
.icon-sun::before,
.icon-eye::before,
.icon-eye-off::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-moon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
}

.icon-sun::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
}

.icon-eye::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.icon-eye-off::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M6.5 6.6C3.7 8.4 1 12 1 12s4 7 11 7c1.9 0 3.6-.5 5.1-1.3'/%3E%3Cpath d='M17.4 17.4C19.8 15.8 23 12 23 12s-1.4-2.5-4-4.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-moon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-sun::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-eye::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

[data-theme="dark"] .icon-eye-off::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M6.5 6.6C3.7 8.4 1 12 1 12s4 7 11 7c1.9 0 3.6-.5 5.1-1.3'/%3E%3Cpath d='M17.4 17.4C19.8 15.8 23 12 23 12s-1.4-2.5-4-4.5'/%3E%3C/svg%3E");
}

.order-card {
  background: var(--white);
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--sand);
}

/* ---- Stats ---- */
.chart-canvas {
  max-width: 100%;
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px;
}

.stats-box {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.stats-box .stat {
  background: var(--white);
  padding: 16px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--sand);
  text-align: center;
  min-width: 110px;
}

.stats-box .stat strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--green-dark);
}

.stats-box .stat span {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Status badges ---- */
.status-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 10px;
}

.status-pending, .status-unpaid, .status-ready_for_pickup, .status-agent_accepted, .status-picked_up,
.status-open, .status-under_review, .status-processing {
  background-color: #FCEFD9;
  color: #8A5A1E;
}

.status-confirmed, .status-accepted, .status-paid, .status-delivered, .status-resolved {
  background-color: #E1EDE6;
  color: var(--green-dark);
}

.status-cancelled, .status-declined, .status-failed, .status-rejected {
  background-color: #F5E1DE;
  color: var(--brick);
}

.category-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: #E8ECF7;
  color: #3B4A8C;
  margin-bottom: 6px;
}

[data-theme="dark"] .status-pending, [data-theme="dark"] .status-unpaid,
[data-theme="dark"] .status-ready_for_pickup, [data-theme="dark"] .status-agent_accepted,
[data-theme="dark"] .status-picked_up, [data-theme="dark"] .status-open,
[data-theme="dark"] .status-under_review, [data-theme="dark"] .status-processing {
  background-color: #4A3A1E;
  color: #F0C878;
}

[data-theme="dark"] .status-confirmed, [data-theme="dark"] .status-accepted,
[data-theme="dark"] .status-paid, [data-theme="dark"] .status-delivered,
[data-theme="dark"] .status-resolved {
  background-color: #1E3A2C;
  color: #8FD6AC;
}

[data-theme="dark"] .status-cancelled, [data-theme="dark"] .status-declined,
[data-theme="dark"] .status-failed, [data-theme="dark"] .status-rejected {
  background-color: #4A2620;
  color: #E8988A;
}

[data-theme="dark"] .category-badge {
  background-color: #232B4A;
  color: #A8B6E8;
}

/* ---- Mobile hamburger menu toggle (hidden on desktop; see the media query below
   for what it looks like and does on narrow screens) ---- */
.mobile-nav-toggle {
  display: none;
}

/* The dashboard drawer's own header (avatar + greeting + close button) only
   exists for the mobile drawer - hidden by default so it never appears inside
   the plain desktop sidebar column. */
.mobile-nav-header {
  display: none;
}

/* =========================================================
   Responsive: tablets and phones
   ========================================================= */
@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
  }

  /* Sidebar becomes a slim, compact top bar: logo + hamburger only - the nav itself
     is an overlay (below), not part of this row's height. The desktop rule above sets
     overflow-y: auto (so a tall nav can scroll inside a fixed-height sidebar) - that
     same property clips anything extending past this box's own edges, which is exactly
     what the dropdown does, so it never became visible even though the click handler
     was working correctly and toggling its class. Resetting overflow here is what
     actually lets the dropdown render below the bar instead of being clipped away. */
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 16px;
  }

  .site-header-top {
    position: relative;
    flex-wrap: nowrap;
    padding: 10px 16px;
  }

  /* The full deliver-to indicator only fits a spacious desktop header - on the
     compact mobile top bar it's dropped in favor of logo + hamburger only, same
     as the sidebar's mobile treatment above. */
  .deliver-to-chip {
    display: none;
  }

  .site-header-categories {
    padding: 8px 16px;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--sand-dark);
    border-radius: 8px;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
  }

  .sidebar .mobile-nav-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
  }

  /* Collapsed by default on mobile; the hamburger toggles .mobile-nav-open (see the
     script in base.html) - closes again automatically once a link is followed, or the
     backdrop behind it is tapped. As a dropdown overlay (not normal document flow),
     opening it never pushes the page's real content down. */
  .sidebar nav, .site-header-top nav {
    display: none;
    width: 100%;
  }

  .site-header-top nav.mobile-nav-open {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    /* The base (desktop) rule for this nav sets align-items: center, for centering
       items vertically in a horizontal row - once flex-direction flips to column here,
       that same property centers each item horizontally instead, shrinking every link
       to its own text width (and its border-bottom underline along with it). Overriding
       to stretch is what makes each row a full-width, left-aligned, edge-to-edge tap
       target - the standard mobile menu look, not a column of centered labels. */
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 4px 0 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    background: var(--white);
    border-bottom: 1px solid var(--sand);
  }

  /* Dashboard (seller/agent/admin) mobile menu: a full-height slide-in drawer
     anchored to the left edge, not a dropdown under the top bar - the same dark
     green surface and white nav-link style as the desktop sidebar itself, just
     as a full-height overlay instead of a static column. */
  .sidebar nav.mobile-nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 300px);
    z-index: 110;
    background: var(--sidebar-bg);
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding: 0;
  }

  .sidebar nav.mobile-nav-open .mobile-nav-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 20px 18px;
    flex-shrink: 0;
  }

  .mobile-nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 17px;
    flex-shrink: 0;
  }

  .mobile-nav-greeting {
    flex: 1;
    font-weight: 700;
    font-size: 15px;
  }

  .mobile-nav-close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
    padding: 6px;
    cursor: pointer;
  }

  .sidebar nav a {
    width: 100%;
    text-align: left;
    padding: 13px 20px;
  }

  .site-header-top nav a {
    width: 100%;
    text-align: left;
    margin-left: 0;
    padding: 13px 20px;
    border-bottom: 1px solid var(--sand);
  }

  .site-header-top nav .lang-switcher {
    margin-left: 20px;
    margin-top: 12px;
    align-self: flex-start;
  }

  /* Immediate visual feedback on tap, like any standard mobile app menu */
  .site-header-top nav.mobile-nav-open a:active,
  .site-header-top nav.mobile-nav-open a:hover {
    background: var(--paper);
  }

  .sidebar nav.mobile-nav-open a {
    color: rgba(255, 255, 255, 0.75);
  }

  .sidebar nav.mobile-nav-open a:active,
  .sidebar nav.mobile-nav-open a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ochre);
  }

  /* Dims the page behind an open mobile menu, and gives the user an obvious large
     target to tap to close it without hunting for the hamburger again. */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 90;
  }

  .mobile-nav-backdrop.visible {
    display: block;
  }

  /* On mobile the sidebar/header becomes a top bar, so the fixed corner switcher
     moves to the bottom instead to stay clear of it */
  .lang-switcher-corner {
    top: auto;
    bottom: 14px;
    right: 14px;
  }

  .container {
    margin: 20px auto;
    padding: 0 16px;
  }

  .site-footer {
    margin-top: 28px;
    padding: 24px 16px 18px;
  }

  h1 { font-size: 23px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }

  /* Every control in a search/filter row becomes its own full-width stacked row on
     mobile, instead of wrapping into cramped, differently-sized pieces */
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar input[type="text"],
  .search-bar select,
  .search-bar button,
  .search-bar .btn {
    width: 100%;
    flex-basis: auto;
    margin-left: 0;
  }

  .search-bar #near-me-status {
    align-self: flex-start;
  }

  .product-card form {
    flex-wrap: wrap;
  }

  .stats-box .stat {
    min-width: 45%;
  }

  .dashboard-links {
    gap: 8px;
  }

  .dashboard-links .btn, .dashboard-links button {
    flex: 1 1 auto;
    text-align: center;
  }

  .form-box {
    max-width: none;
    padding: 20px;
  }

  /* ---- Tables become labeled cards instead of scrolling sideways. Each <td> gets
     a data-label attribute from base.html's script, read here via ::before content. ---- */
  .cart-table {
    display: block;
    white-space: normal;
    background: transparent;
    box-shadow: none;
    border: none;
  }

  .cart-table tr {
    display: block;
  }

  .cart-table tr:first-child {
    /* the header row itself is only needed to source the data-label text */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .cart-table tr:not(:first-child) {
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    padding: 6px 14px;
  }

  .cart-table td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
    padding: 10px 0;
    border-bottom: 1px solid var(--sand);
  }

  .cart-table td:last-child {
    border-bottom: none;
  }

  .cart-table td::before {
    content: attr(data-label);
    margin-right: auto;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
  }

  .cart-table td:empty {
    display: none;
  }
}

/* =========================================================
   Responsive: small phones
   ========================================================= */
@media (max-width: 480px) {
  .container {
    padding: 0 14px;
  }

  h1 { font-size: 20px; }

  .stats-box .stat {
    min-width: 100%;
  }

  .form-box {
    padding: 16px;
  }

  .dashboard-links {
    flex-direction: column;
  }

  .dashboard-links .btn, .dashboard-links button {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  #footer-sellers-map {
    height: 220px !important;
  }
}

/* ---- Navigation icons ----
   Drawn with mask-image rather than background-image so the glyph takes its colour
   from the link it sits in (currentColor). The older .icon-* classes bake a dark
   stroke into the SVG, which is invisible against the dark sidebar; a mask works on
   the sidebar, on hover, and in dark mode from a single definition. */
[class*="nav-icon-"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Keeps the label from wrapping under its own icon on a narrow sidebar. */
.sidebar nav a[class*="nav-icon-"] {
  display: flex;
  align-items: center;
}

.nav-icon-shop::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
}
.nav-icon-cart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.5 12h11L21 7H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.5 12h11L21 7H6'/%3E%3C/svg%3E");
}
.nav-icon-track::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.nav-icon-dashboard::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
}
.nav-icon-sellers::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1 13H5z'/%3E%3Cpath d='M9 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1 13H5z'/%3E%3Cpath d='M9 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
.nav-icon-agents::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
.nav-icon-complaints::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z'/%3E%3Cpath d='M12 9v3'/%3E%3Cpath d='M12 15h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z'/%3E%3Cpath d='M12 9v3'/%3E%3Cpath d='M12 15h.01'/%3E%3C/svg%3E");
}
.nav-icon-appeals::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M5 7l-2 6a3 3 0 0 0 6 0z'/%3E%3Cpath d='M19 7l2 6a3 3 0 0 1-6 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M5 7l-2 6a3 3 0 0 0 6 0z'/%3E%3Cpath d='M19 7l2 6a3 3 0 0 1-6 0z'/%3E%3C/svg%3E");
}
.nav-icon-coupons::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v3a2.5 2.5 0 0 0 0 6v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a2.5 2.5 0 0 0 0-6z'/%3E%3Cpath d='M14 8l-4 8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v3a2.5 2.5 0 0 0 0 6v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a2.5 2.5 0 0 0 0-6z'/%3E%3Cpath d='M14 8l-4 8'/%3E%3C/svg%3E");
}
.nav-icon-promotion::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v5'/%3E%3Cpath d='M4 12h16v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M12 6v13'/%3E%3Cpath d='M12 6S9 2.5 7 4s1.5 2 5 2 7-.5 5-2-5 2-5 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v5'/%3E%3Cpath d='M4 12h16v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M12 6v13'/%3E%3Cpath d='M12 6S9 2.5 7 4s1.5 2 5 2 7-.5 5-2-5 2-5 2z'/%3E%3C/svg%3E");
}
.nav-icon-activity::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8 4-16 3 8h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8 4-16 3 8h4'/%3E%3C/svg%3E");
}
.nav-icon-notifications::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 6-3 7-3 7h18s-3-1-3-7z'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 6-3 7-3 7h18s-3-1-3-7z'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}
.nav-icon-security::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.nav-icon-pricing::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9 9 9-9 9z'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M10 10h3a1.5 1.5 0 0 1 0 3h-2a1.5 1.5 0 0 0 0 3h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9 9 9-9 9z'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M10 10h3a1.5 1.5 0 0 1 0 3h-2a1.5 1.5 0 0 0 0 3h3'/%3E%3C/svg%3E");
}
/* Analytics: a bar chart, the one shape that reads as "numbers over time". */
.nav-icon-analytics::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-7'/%3E%3Cpath d='M22 20H2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-7'/%3E%3Cpath d='M22 20H2'/%3E%3C/svg%3E");
}
.nav-icon-logout::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4'/%3E%3Cpath d='M10 16l-4-4 4-4'/%3E%3Cpath d='M6 12h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4'/%3E%3Cpath d='M10 16l-4-4 4-4'/%3E%3Cpath d='M6 12h11'/%3E%3C/svg%3E");
}
.nav-icon-deliveries::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
}
.nav-icon-suggestions::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.4.3.5.8.5 1.1h6c0-.3.1-.8.5-1.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.4.3.5.8.5 1.1h6c0-.3.1-.8.5-1.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.nav-icon-rules::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10l4 4v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10l4 4v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
}
.nav-icon-passport::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='2.8'/%3E%3Cpath d='M7.5 18a4.5 4.5 0 0 1 9 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='2.8'/%3E%3Cpath d='M7.5 18a4.5 4.5 0 0 1 9 0'/%3E%3C/svg%3E");
}
.nav-icon-idcard::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2.2'/%3E%3Cpath d='M5 16.5a3.2 3.2 0 0 1 6 0'/%3E%3Cpath d='M14 10h4'/%3E%3Cpath d='M14 14h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2.2'/%3E%3Cpath d='M5 16.5a3.2 3.2 0 0 1 6 0'/%3E%3Cpath d='M14 10h4'/%3E%3Cpath d='M14 14h4'/%3E%3C/svg%3E");
}