/* =========================================================
   ASMATA Storefront — theme tokens (brand-matched)
   Set data-theme on <html> (document.documentElement).
   ========================================================= */

   :root,
   [data-theme="light"] {
    color-scheme: light;
     /* Layout */
     --sf-topbar-h: 56px;
     --sf-sidebar-w: 220px;
     --sf-content-max: 1120px;
     --sf-radius: 12px;
   
     /* Brand core */
     --brand-green:       #1a5c2e;
     --brand-green-dark:  #0f3d1e;
     --brand-yellow:      #f2b91c;
     --brand-yellow-dark: #c9930a;
     --brand-blue:        #1668d6;
     --brand-ink:         #0d2416;
   
     /* Surfaces */
     --sf-bg:         #f7f5ee;
     --sf-bg-subtle:  #f2efe4;
     --sf-bg-hover:   #ebe7d8;
     --sf-surface:    #ffffff;
   
     /* Borders */
     --sf-border:        rgba(26, 92, 46, 0.12);
     --sf-border-strong: rgba(26, 92, 46, 0.28);
   
     /* Text */
     --sf-text:           #0d2416;
     --sf-text-muted:     #3d5546;
     --sf-text-faint:     #7a8a7f;
     --sf-text-on-accent: #0d2416;
   
     /* Accent — golden yellow */
     --sf-accent:       #f2b91c;
     --sf-accent-hover: #c9930a;
     --sf-accent-soft:  #fdf3d4;
   
     /* Status */
     --sf-success:      #1a5c2e;
     --sf-success-soft: #e6f1e9;
     --sf-danger:       #b91c1c;
     --sf-danger-soft:  #fde2e2;
     --sf-warn:         #b26a00;
     --sf-warn-soft:    #fdf3d4;
   
     /* Media / overlays */
     --sf-media-bg:       #ffffff;
     --sf-pill-bg:        rgba(255, 255, 255, 0.9);
     --sf-pill-bg-strong: rgba(255, 255, 255, 0.85);
     --sf-overlay:        rgba(13, 36, 22, 0.4);
     --sf-overlay-strong: rgba(13, 36, 22, 0.55);
   
     /* Shadows */
     --sf-shadow-sm: 0 1px 2px rgba(13, 36, 22, 0.06);
     --sf-shadow-md: 0 6px 20px rgba(13, 36, 22, 0.08);
   
     /* Brand mark */
     --sf-brand-mark-bg:   #1a5c2e;
     --sf-brand-mark-ink:  #ffffff;
   }
   
   [data-theme="dark"] {
    color-scheme: dark;
     --sf-bg:         #0a1410;
     --sf-bg-subtle:  #12201a;
     --sf-bg-hover:   #16261f;
     --sf-surface:    #12201a;
   
     --sf-border:        rgba(242, 185, 28, 0.14);
     --sf-border-strong: rgba(242, 185, 28, 0.30);
   
     --sf-text:           #f4f4f5;
     --sf-text-muted:     #b0b8b2;
     --sf-text-faint:     #7a8a7f;
     --sf-text-on-accent: #0d2416;
   
     --sf-accent:       #f2b91c;
     --sf-accent-hover: #ffcd3d;
     --sf-accent-soft:  #2a2410;
   
     --sf-success:      #6bbf59;
     --sf-success-soft: #17301e;
     --sf-danger:       #f87171;
     --sf-danger-soft:  #3b1414;
     --sf-warn:         #f2b91c;
     --sf-warn-soft:    #2a2410;
   
     --sf-media-bg:       #12201a;
     --sf-pill-bg:        rgba(18, 32, 26, 0.9);
     --sf-pill-bg-strong: rgba(18, 32, 26, 0.85);
     --sf-overlay:        rgba(0, 0, 0, 0.55);
     --sf-overlay-strong: rgba(0, 0, 0, 0.7);
   
     --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
     --sf-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.6);
   
     --sf-brand-mark-bg:  #f2b91c;
     --sf-brand-mark-ink: #0d2416;
   }
   
   /* =========================================================
      Reset
      ========================================================= */
   
   *,
   *::before,
   *::after { box-sizing: border-box; }
   
   html,
   body {
     margin: 0;
     padding: 0;
     height: 100%;
     max-width: 100%;
     overflow: hidden;
     overscroll-behavior: none;
   }
   
   body.sf-body {
     background: var(--sf-bg);
     color: var(--sf-text);
     font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     font-size: 14px;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
   }
   
   [data-theme="dark"] .sf-product-thumb img,
   [data-theme="dark"] .sf-pd-main img,
   [data-theme="dark"] .sf-pd-thumb img {
     filter: brightness(0.92);
   }

   .filters-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sf-text, #0d2416);
    cursor: pointer;
    user-select: none;
    padding: 10px 12px;
    background: var(--sf-bg-subtle, #f2efe4);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background-color 140ms ease, border-color 140ms ease;
    min-height: 40px;
  }
  
  .filters-checkbox:hover {
    background: var(--sf-bg-hover, #ebe7d8);
  }
  
  .filters-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-green, #1a5c2e);
  }
  
  [data-theme="dark"] .filters-checkbox input {
    accent-color: var(--brand-yellow, #f2b91c);
  }
  
  [data-theme="dark"] .filters-checkbox {
    background: var(--sf-bg-subtle, #16261f);
  }

  /* =========================================================
   Storefront footer — social icons only
   ========================================================= */

.sf-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 20px 40px;
  border-top: 1px solid var(--sf-border, rgba(26, 92, 46, 0.12));
  margin-top: 64px;
}

.sf-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.sf-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sf-surface, #ffffff);
  border: 1px solid var(--sf-border, rgba(26, 92, 46, 0.12));
  color: var(--sf-text, #0d2416);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease,
              border-color 140ms ease, transform 140ms ease;
}

.sf-social-icon:hover {
  transform: translateY(-2px);
}

.sf-social-icon svg,
.sf-social-icon .material-symbols-outlined {
  width: 20px;
  height: 20px;
  font-size: 20px;
  display: block;
}

/* Per-platform hover colors */
.sf-social-icon[data-social="instagram"]:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
  color: #ffffff;
}

.sf-social-icon[data-social="twitter"]:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.sf-social-icon[data-social="facebook"]:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
}

.sf-social-icon[data-social="tiktok"]:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.sf-social-icon[data-social="youtube"]:hover {
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
}

[data-theme="dark"] .sf-social-icon {
  background: var(--sf-bg, #12201a);
  border-color: var(--sf-border-strong, rgba(242, 185, 28, 0.30));
  color: var(--sf-text, #f4f4f5);
}

@media print {
  .sf-footer { display: none; }
}
   
   /* =========================================================
      Topbar
      ========================================================= */
   
   .sf-topbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--sf-topbar-h);
     z-index: 50;
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 12px;
     background: color-mix(in srgb, var(--sf-bg) 92%, transparent);
     border-bottom: 1px solid var(--sf-border);
   }
   @media (min-width: 1024px) {
     .sf-topbar { padding: 0 20px; gap: 16px; }
   }
   @media (prefers-reduced-motion: no-preference) {
     .sf-topbar {
       backdrop-filter: saturate(180%) blur(12px);
       -webkit-backdrop-filter: saturate(180%) blur(12px);
     }
   }
   
   .sf-topbar-menu {
     width: 36px;
     height: 36px;
     border: 0;
     background: transparent;
     border-radius: 8px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--sf-text-muted);
     flex-shrink: 0;
   }
   .sf-topbar-menu:hover { background: var(--sf-bg-hover); color: var(--sf-text); }
   @media (min-width: 1024px) {
     .sf-topbar-menu { display: none; }
   }
   
   .sf-topbar-brand {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     color: var(--sf-text);
     flex-shrink: 0;
   }
   @media (min-width: 1024px) {
     .sf-topbar-brand { padding-left: 4px; }
   }
   
   .sf-topbar-brand-mark {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: var(--sf-brand-mark-bg);
     color: var(--sf-brand-mark-ink);
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   .sf-topbar-brand-mark .material-symbols-outlined { font-size: 18px; }
   
   .sf-topbar-brand-name {
     font-size: 15px;
     font-weight: 600;
     letter-spacing: -0.01em;
   }
   
   .sf-topbar-search {
     position: relative;
     flex: 1;
     max-width: 520px;
     margin: 0 auto;
     display: none;
   }
   @media (min-width: 640px) {
     .sf-topbar-search { display: flex; }
   }
   .sf-topbar-search .material-symbols-outlined {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 18px;
     color: var(--sf-text-faint);
     pointer-events: none;
   }
   .sf-topbar-search input,
   .sf-mobile-search input {
     width: 100%;
     padding: 8px 12px 8px 36px;
     font-size: 14px;
     font-family: inherit;
     background: var(--sf-bg-subtle);
     border: 1px solid transparent;
     border-radius: 10px;
     outline: none;
     color: var(--sf-text);
   }
   .sf-topbar-search input::placeholder,
   .sf-mobile-search input::placeholder { color: var(--sf-text-faint); }
   .sf-topbar-search input:focus,
   .sf-mobile-search input:focus {
     background: var(--sf-surface);
     border-color: var(--sf-border-strong);
   }
   
   .sf-topbar-actions {
     display: flex;
     gap: 2px;
     margin-left: auto;
     flex-shrink: 0;
   }
   .sf-topbar-icon {
     position: relative;
     width: 36px;
     height: 36px;
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--sf-text-muted);
     text-decoration: none;
   }
   .sf-topbar-icon:hover { background: var(--sf-bg-hover); color: var(--sf-text); }
   .sf-topbar-icon .material-symbols-outlined { font-size: 20px; }
   
   .sf-cart-badge {
     position: absolute;
     top: 4px;
     right: 4px;
     min-width: 14px;
     height: 14px;
     padding: 0 3px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 9px;
     font-weight: 700;
     background: var(--sf-brand-mark-bg);
     color: var(--sf-brand-mark-ink);
     border-radius: 999px;
   }
   .sf-cart-badge[data-count="0"] { display: none; }
   
   /* =========================================================
      Shell
      ========================================================= */
   
   .sf-shell {
     display: flex;
     height: 100vh;
     height: 100dvh;
     padding-top: var(--sf-topbar-h);
     overflow: hidden;
   }
   
   /* =========================================================
      Sidebar
      ========================================================= */
   
   .sf-sidebar {
     position: fixed;
     top: var(--sf-topbar-h);
     bottom: 0;
     left: 0;
     width: min(80vw, 260px);
     max-width: 260px;
     background: var(--sf-bg-subtle);
     border-right: 1px solid var(--sf-border);
     transform: translateX(-105%);
     transition: transform 200ms ease;
     z-index: 60;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     overscroll-behavior: contain;
   }
   .sf-sidebar.open { transform: translateX(0); }
   
   @media (min-width: 1024px) {
     .sf-sidebar {
       position: static;
       transform: none;
       width: var(--sf-sidebar-w);
       max-width: var(--sf-sidebar-w);
       flex-shrink: 0;
       z-index: 1;
     }
   }
   
   .sf-sidebar-nav {
     padding: 12px 8px;
     display: flex;
     flex-direction: column;
     gap: 2px;
     flex: 1;
   }
   
   .sf-nav-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 12px;
     border-radius: 8px;
     color: var(--sf-text);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     transition: background-color 120ms;
   }
   .sf-nav-item .material-symbols-outlined {
     font-size: 18px;
     color: var(--sf-text-muted);
     flex-shrink: 0;
   }
   .sf-nav-item:hover { background: var(--sf-bg-hover); }
   .sf-nav-item:hover .material-symbols-outlined { color: var(--sf-text); }
   .sf-nav-item.active {
     background: var(--sf-surface);
     color: var(--sf-text);
     box-shadow: 0 0 0 1px var(--sf-border);
   }
   .sf-nav-item.active .material-symbols-outlined { color: var(--sf-text); }
   .sf-nav-item-soft { margin-top: 4px; }
   
   .sf-sidebar-divider {
     height: 1px;
     background: var(--sf-border);
     margin: 8px 12px;
   }
   
   .sf-sidebar-footer {
     padding: 12px;
     border-top: 1px solid var(--sf-border);
     margin-top: auto;
   }
   .sf-sidebar-user {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px;
     border-radius: 10px;
     text-decoration: none;
     color: inherit;
   }
   .sf-sidebar-user:hover { background: var(--sf-bg-hover); }
   .sf-sidebar-user-avatar {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: var(--sf-brand-mark-bg);
     color: var(--sf-brand-mark-ink);
     font-weight: 600;
     font-size: 13px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   .sf-sidebar-user-info {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
     min-width: 0;
   }
   .sf-sidebar-user-info strong {
     font-size: 13px;
     font-weight: 500;
     color: var(--sf-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .sf-sidebar-user-info span {
     font-size: 11px;
     color: var(--sf-text-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   
   /* =========================================================
      Backdrop
      ========================================================= */
   
   .sf-backdrop {
     position: fixed;
     inset: var(--sf-topbar-h) 0 0 0;
     background: var(--sf-overlay);
     z-index: 55;
     backdrop-filter: blur(2px);
   }
   .sf-backdrop[hidden] { display: none; }
   @media (min-width: 1024px) {
     .sf-backdrop { display: none !important; }
   }
   
   /* =========================================================
      Main column
      ========================================================= */
   
   .sf-main {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: contain;
     scroll-behavior: smooth;
     outline: none;
     background: var(--sf-bg);
     color: var(--sf-text);
   }
   
   .sf-content {
     max-width: var(--sf-content-max);
     margin: 0 auto;
     padding: 32px 16px 96px;
     width: 100%;
   }
   @media (min-width: 640px) {
     .sf-content { padding: 40px 24px 112px; }
   }
   @media (min-width: 1024px) {
     .sf-content { padding: 48px 40px 128px; }
   }
   
   /* =========================================================
      Loading
      ========================================================= */
   
   .sf-loading {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     padding: 64px 0;
     color: var(--sf-text-muted);
   }
   .sf-loading .material-symbols-outlined {
     font-size: 32px;
     animation: sf-spin 1.6s linear infinite;
   }
   @keyframes sf-spin { to { transform: rotate(360deg); } }
   
   /* =========================================================
      Hero
      ========================================================= */
   
   .sf-hero { padding: 16px 0 48px; }
   .sf-hero-title {
     font-size: clamp(28px, 4vw, 40px);
     line-height: 1.1;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0 0 12px;
     color: var(--sf-text);
   }
   .sf-hero-accent { color: var(--brand-green); }
   [data-theme="dark"] .sf-hero-accent { color: var(--brand-yellow); }
   .sf-hero-lede {
     font-size: 15px;
     line-height: 1.6;
     color: var(--sf-text-muted);
     margin: 0 0 24px;
     max-width: 40rem;
   }
   .sf-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
   
   /* =========================================================
      Section
      ========================================================= */
   
   .sf-section {
     padding: 32px 0;
     border-top: 1px solid var(--sf-border);
   }
   .sf-section:first-of-type { border-top: 0; }
   
   .sf-section-head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 20px;
     flex-wrap: wrap;
   }
   .sf-section-title {
     font-size: clamp(18px, 2.5vw, 22px);
     font-weight: 600;
     letter-spacing: -0.01em;
     margin: 0;
     color: var(--sf-text);
   }
   .sf-section-sub {
     font-size: 13px;
     color: var(--sf-text-muted);
     margin: 4px 0 0;
   }
   .sf-section-link {
     font-size: 13px;
     font-weight: 500;
     color: var(--sf-text);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 4px;
   }
   .sf-section-link:hover { color: var(--brand-green); }
   [data-theme="dark"] .sf-section-link:hover { color: var(--brand-yellow); }
   
   /* =========================================================
      Buttons
      ========================================================= */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 9px 16px;
     font-size: 14px;
     font-weight: 500;
     font-family: inherit;
     border-radius: 10px;
     border: 1px solid transparent;
     cursor: pointer;
     text-decoration: none;
     transition: background-color 120ms, border-color 120ms;
     white-space: nowrap;
     color: var(--sf-text);
   }
   .btn-primary {
     background: var(--brand-green);
     color: #ffffff;
   }
   .btn-primary:hover:not(:disabled) { background: var(--brand-green-dark); }
   [data-theme="dark"] .btn-primary {
     background: var(--brand-yellow);
     color: var(--brand-ink);
   }
   [data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #ffcd3d; }
   
   .btn-secondary {
     background: transparent;
     border-color: var(--sf-border-strong);
     color: var(--sf-text);
   }
   .btn-secondary:hover:not(:disabled) { background: var(--sf-bg-hover); }
   
   .btn-accent {
     background: var(--brand-yellow);
     color: var(--brand-ink);
   }
   .btn-accent:hover:not(:disabled) { background: var(--brand-yellow-dark); }
   
   .btn-danger {
     background: transparent;
     color: var(--sf-danger);
     border-color: var(--sf-border-strong);
   }
   .btn-danger:hover:not(:disabled) {
     background: var(--sf-danger-soft);
     border-color: var(--sf-danger);
   }
   
   .btn-sm { padding: 6px 12px; font-size: 13px; }
   .btn-lg { padding: 11px 20px; font-size: 15px; }
   .btn:disabled { opacity: 0.5; cursor: not-allowed; }
   
   .btn-block {
     width: 100%;
     padding: 11px 16px;
     font-size: 14px;
     font-weight: 500;
     font-family: inherit;
     border-radius: 10px;
     border: 1px solid transparent;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   .btn-block-primary {
     background: var(--brand-green);
     color: #ffffff;
   }
   .btn-block-primary:hover:not(:disabled) { background: var(--brand-green-dark); }
   [data-theme="dark"] .btn-block-primary {
     background: var(--brand-yellow);
     color: var(--brand-ink);
   }
   [data-theme="dark"] .btn-block-primary:hover:not(:disabled) { background: #ffcd3d; }
   .btn-block:disabled { opacity: 0.5; cursor: not-allowed; }
   
   /* =========================================================
      Product grid
      ========================================================= */
   
   .sf-product-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
   }
   @media (min-width: 640px) {
     .sf-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
   }
   @media (min-width: 1024px) {
     .sf-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
   }
   
   .sf-product-card {
     display: block;
     text-decoration: none;
     color: inherit;
   }
   .sf-product-thumb {
     position: relative;
     aspect-ratio: 1 / 1;
     background: var(--sf-bg-subtle);
     border-radius: var(--sf-radius);
     overflow: hidden;
     margin-bottom: 10px;
   }
   .sf-product-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 300ms ease;
   }
   .sf-product-card:hover .sf-product-thumb img { transform: scale(1.03); }
   .sf-product-name {
     font-size: 13px;
     font-weight: 500;
     line-height: 1.4;
     color: var(--sf-text);
     margin: 0 0 3px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   .sf-product-meta {
     font-size: 12px;
     color: var(--sf-text-muted);
     display: flex;
     align-items: center;
     gap: 4px;
     margin-bottom: 2px;
   }
   .sf-product-meta .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .sf-price {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--sf-text);
     margin-top: 4px;
   }
   .sf-price-label { display: none; }
   
   .sf-verified-pill,
   .sf-category-pill,
   .sf-out-of-stock {
     position: absolute;
     font-size: 10px;
     font-weight: 500;
     padding: 3px 6px;
     border-radius: 999px;
   }
   .sf-verified-pill {
     top: 6px;
     left: 6px;
     background: var(--sf-pill-bg);
     color: var(--brand-green);
     display: inline-flex;
     align-items: center;
     gap: 2px;
     backdrop-filter: blur(6px);
   }
   [data-theme="dark"] .sf-verified-pill { color: var(--brand-yellow); }
   .sf-verified-pill .material-symbols-outlined { font-size: 11px; }
   .sf-category-pill { display: none; }
   .sf-out-of-stock {
     inset: 0;
     border-radius: var(--sf-radius);
     background: var(--sf-pill-bg-strong);
     color: var(--sf-text-muted);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
   }
   
   /* =========================================================
      Category tiles
      ========================================================= */
   
   .sf-cat-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
   }
   @media (min-width: 480px) { .sf-cat-grid { grid-template-columns: repeat(3, 1fr); } }
   @media (min-width: 768px) { .sf-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
   @media (min-width: 1024px) { .sf-cat-grid { grid-template-columns: repeat(6, 1fr); } }
   
   .sf-cat-tile {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     padding: 16px 8px;
     border: 1px solid var(--sf-border);
     border-radius: var(--sf-radius);
     text-decoration: none;
     color: var(--sf-text);
     background: transparent;
     transition: border-color 120ms, background-color 120ms;
   }
   .sf-cat-tile:hover {
     border-color: var(--sf-border-strong);
     background: var(--sf-bg-subtle);
   }
   .sf-cat-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--sf-bg-subtle);
     color: var(--sf-text-muted);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
   }
   .sf-cat-tile:hover .sf-cat-icon {
     background: var(--sf-accent-soft);
     color: var(--brand-green);
   }
   [data-theme="dark"] .sf-cat-tile:hover .sf-cat-icon { color: var(--brand-yellow); }
   .sf-cat-name {
     font-size: 12px;
     font-weight: 500;
     text-align: center;
     line-height: 1.3;
     color: var(--sf-text);
   }
   
   /* =========================================================
      Market cards
      ========================================================= */
   
   .sf-market-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
   @media (min-width: 640px) { .sf-market-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .sf-market-grid { grid-template-columns: repeat(3, 1fr); } }
   
   .sf-market-card {
     display: block;
     text-decoration: none;
     color: inherit;
     border: 1px solid var(--sf-border);
     border-radius: var(--sf-radius);
     overflow: hidden;
     transition: border-color 120ms;
   }
   .sf-market-card:hover { border-color: var(--sf-border-strong); }
   .sf-market-thumb {
     height: 110px;
     background: var(--sf-bg-subtle);
     display: flex;
     align-items: flex-end;
     padding: 14px;
   }
   .sf-market-thumb h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--sf-text); }
   .sf-market-body { padding: 14px; border-top: 1px solid var(--sf-border); }
   .sf-market-desc {
     font-size: 13px;
     color: var(--sf-text-muted);
     line-height: 1.5;
     margin: 0 0 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   
   /* =========================================================
      Product detail
      ========================================================= */
   
   .sf-pd { display: grid; grid-template-columns: 1fr; gap: 24px; }
   @media (min-width: 1024px) { .sf-pd { grid-template-columns: 1fr 1fr; gap: 48px; } }
   
   .sf-pd-gallery {
     background: var(--sf-bg-subtle);
     border-radius: var(--sf-radius);
     padding: 12px;
     align-self: start;
   }
   .sf-pd-main {
     width: 100%;
     aspect-ratio: 1 / 1;
     border-radius: 10px;
     overflow: hidden;
     background: var(--sf-media-bg);
   }
   .sf-pd-main img { width: 100%; height: 100%; object-fit: cover; }
   .sf-pd-thumbs { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; }
   .sf-pd-thumb {
     width: 52px;
     height: 52px;
     flex-shrink: 0;
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid transparent;
     padding: 0;
     cursor: pointer;
     background: var(--sf-media-bg);
   }
   .sf-pd-thumb.active { border-color: var(--sf-text); }
   .sf-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
   
   .sf-pd-info { display: flex; flex-direction: column; gap: 14px; }
   .sf-pd-title {
     font-size: clamp(22px, 3vw, 28px);
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0;
     line-height: 1.2;
     color: var(--sf-text);
   }
   .sf-pd-price {
     font-size: clamp(22px, 3vw, 28px);
     font-weight: 600;
     letter-spacing: -0.02em;
     color: var(--sf-text);
   }
   .sf-pd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
   .sf-pd-actions .btn { flex: 1 1 140px; padding: 12px 20px; font-size: 14px; }
   .sf-pd-meta {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 16px 0;
     border-top: 1px solid var(--sf-border);
     border-bottom: 1px solid var(--sf-border);
     font-size: 14px;
     color: var(--sf-text-muted);
     line-height: 1.6;
   }
   .sf-pd-meta strong { color: var(--sf-text); font-weight: 500; }
   .sf-pd-desc {
     font-size: 14px;
     line-height: 1.7;
     color: var(--sf-text-muted);
     white-space: pre-wrap;
   }
   
   /* =========================================================
      Quantity picker
      ========================================================= */
   
   .sf-qty {
     display: inline-flex;
     align-items: center;
     border: 1px solid var(--sf-border-strong);
     border-radius: 10px;
     overflow: hidden;
   }
   .sf-qty button {
     width: 36px;
     height: 36px;
     border: 0;
     background: var(--sf-surface);
     cursor: pointer;
     font-size: 16px;
     font-family: inherit;
     color: var(--sf-text);
   }
   .sf-qty button:hover:not(:disabled) { background: var(--sf-bg-subtle); }
   .sf-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
   .sf-qty span {
     min-width: 36px;
     text-align: center;
     font-size: 14px;
     font-weight: 500;
     color: var(--sf-text);
   }
   
   /* =========================================================
      Cart
      ========================================================= */
   
   .sf-cart { display: grid; grid-template-columns: 1fr; gap: 24px; }
   @media (min-width: 1024px) { .sf-cart { grid-template-columns: 1fr 320px; gap: 40px; } }
   
   .sf-cart-shop-group { border-top: 1px solid var(--sf-border); }
   .sf-cart-shop-group:first-child { border-top: 0; }
   .sf-cart-shop-head {
     padding: 14px 0 10px;
     font-size: 12px;
     font-weight: 500;
     color: var(--sf-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
   .sf-cart-line {
     display: flex;
     gap: 14px;
     padding: 14px 0;
     align-items: flex-start;
     border-top: 1px solid var(--sf-border);
   }
   .sf-cart-shop-group .sf-cart-line:first-of-type { border-top: 0; }
   .sf-cart-thumb {
     width: 64px;
     height: 64px;
     border-radius: 10px;
     overflow: hidden;
     background: var(--sf-bg-subtle);
     flex-shrink: 0;
   }
   .sf-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
   .sf-cart-info { flex: 1; min-width: 0; }
   .sf-cart-name { font-size: 14px; font-weight: 500; margin: 0 0 3px; color: var(--sf-text); }
   .sf-cart-price { font-size: 13px; color: var(--sf-text-muted); }
   
   .sf-cart-summary {
     background: var(--sf-surface);
     border: 1px solid var(--sf-border);
     border-radius: var(--sf-radius);
     padding: 20px;
     position: sticky;
     top: 16px;
     align-self: start;
   }
   .sf-cart-summary h3 { font-size: 14px; font-weight: 600; margin: 0 0 16px; color: var(--sf-text); }
   .sf-cart-summary-row {
     display: flex;
     justify-content: space-between;
     font-size: 14px;
     color: var(--sf-text-muted);
     margin-bottom: 8px;
   }
   .sf-cart-summary-row.total {
     font-size: 15px;
     font-weight: 600;
     color: var(--sf-text);
     padding-top: 12px;
     border-top: 1px solid var(--sf-border);
     margin-top: 12px;
   }
   
   /* =========================================================
      Checkout
      ========================================================= */
   
   .sf-checkout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
   @media (min-width: 1024px) { .sf-checkout-grid { grid-template-columns: 1.4fr 1fr; gap: 40px; } }
   
   .sf-checkout-section {
     padding: 16px 0;
     border-bottom: 1px solid var(--sf-border);
   }
   .sf-checkout-section:last-child { border-bottom: 0; }
   .sf-checkout-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--sf-text); }
   
   .sf-address-option {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     padding: 12px;
     border: 1px solid var(--sf-border);
     border-radius: 10px;
     margin-bottom: 8px;
     cursor: pointer;
     background: var(--sf-surface);
     transition: border-color 120ms, background-color 120ms;
   }
   .sf-address-option:hover { border-color: var(--sf-border-strong); }
   .sf-address-option.selected {
     border-color: var(--brand-green);
     background: var(--sf-accent-soft);
   }
   [data-theme="dark"] .sf-address-option.selected {
     border-color: var(--brand-yellow);
   }
   .sf-address-option input { margin-top: 3px; accent-color: var(--brand-green); }
   [data-theme="dark"] .sf-address-option input { accent-color: var(--brand-yellow); }
   .sf-address-option-body { flex: 1; min-width: 0; }
   .sf-address-option-body strong { font-size: 14px; font-weight: 500; color: var(--sf-text); }
   .sf-address-option-body p {
     margin: 3px 0 0;
     font-size: 13px;
     color: var(--sf-text-muted);
     line-height: 1.5;
   }
   
   /* =========================================================
      Orders
      ========================================================= */
   
   .sf-order-card {
     display: flex;
     gap: 14px;
     align-items: center;
     padding: 16px 0;
     border-bottom: 1px solid var(--sf-border);
     text-decoration: none;
     color: inherit;
   }
   .sf-order-card:hover { background: var(--sf-bg-subtle); }
   .sf-order-info { flex: 1; min-width: 0; }
   .sf-order-number { font-size: 14px; font-weight: 500; margin-bottom: 3px; color: var(--sf-text); }
   .sf-order-meta { font-size: 13px; color: var(--sf-text-muted); }
   
   /* =========================================================
      Auth
      ========================================================= */
   
   .sf-auth-wrap { max-width: 400px; margin: 24px auto 0; }
   @media (min-width: 640px) { .sf-auth-wrap { margin: 48px auto 0; } }
   
   .sf-auth-card {
     padding: 28px 24px;
     border: 1px solid var(--sf-border);
     border-radius: var(--sf-radius);
     background: var(--sf-surface);
   }
   .sf-auth-title {
     font-size: 22px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0 0 6px;
     color: var(--sf-text);
   }
   .sf-auth-lede {
     font-size: 14px;
     color: var(--sf-text-muted);
     margin: 0 0 20px;
     line-height: 1.5;
   }
   .sf-auth-switch {
     text-align: center;
     font-size: 13px;
     color: var(--sf-text-muted);
     margin: 16px 0 0;
   }
   .sf-auth-switch a { color: var(--brand-green); font-weight: 500; text-decoration: none; }
   [data-theme="dark"] .sf-auth-switch a { color: var(--brand-yellow); }
   .sf-auth-switch a:hover { text-decoration: underline; }
   
   /* =========================================================
      Forms
      ========================================================= */
   
   .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
   .field label { font-size: 13px; font-weight: 500; color: var(--sf-text); }
   .field .hint { font-size: 12px; color: var(--sf-text-muted); font-weight: 400; }
   .field-error { font-size: 12px; color: var(--sf-danger); min-height: 14px; }
   
   .input,
   .input-wrap input,
   .input-wrap textarea,
   select.input {
     width: 100%;
     padding: 10px 12px;
     font-size: 14px;
     font-family: inherit;
     color: var(--sf-text);
     background: var(--sf-bg-subtle);
     border: 1px solid transparent;
     border-radius: 10px;
     outline: none;
     transition: background-color 120ms, border-color 120ms;
   }
   .input:focus,
   .input-wrap input:focus,
   select.input:focus {
     background: var(--sf-surface);
     border-color: var(--sf-border-strong);
   }
   .input::placeholder { color: var(--sf-text-faint); }
   .input[aria-invalid="true"] { border-color: var(--sf-danger); }
   
   .input-wrap { position: relative; display: flex; align-items: center; }
   .input-wrap .material-symbols-outlined {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 18px;
     color: var(--sf-text-faint);
     pointer-events: none;
   }
   .input-wrap input { padding-left: 40px; }
   .input-toggle {
     position: absolute;
     right: 6px;
     top: 50%;
     transform: translateY(-50%);
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 0;
     background: transparent;
     color: var(--sf-text-faint);
     cursor: pointer;
     border-radius: 6px;
     font-family: inherit;
   }
   .input-toggle:hover { background: var(--sf-bg-hover); color: var(--sf-text); }
   
   /* =========================================================
      Chips
      ========================================================= */
   
   .chip {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 8px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     background: var(--sf-bg-subtle);
     color: var(--sf-text-muted);
   }
   .chip-success { background: var(--sf-success-soft); color: var(--sf-success); }
   .chip-danger { background: var(--sf-danger-soft); color: var(--sf-danger); }
   .chip-warn { background: var(--sf-warn-soft); color: var(--sf-warn); }
   .chip-info { background: var(--sf-accent-soft); color: var(--sf-text-on-accent); }
   .chip-neutral { background: var(--sf-bg-subtle); color: var(--sf-text-muted); }
   
   /* =========================================================
      Alerts
      ========================================================= */
   
   .alert {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     padding: 12px 14px;
     border-radius: 10px;
     font-size: 13px;
     line-height: 1.5;
     margin-bottom: 14px;
   }
   .alert-icon { font-size: 18px; flex-shrink: 0; }
   .alert-error { background: var(--sf-danger-soft); color: var(--sf-danger); }
   .alert-success { background: var(--sf-success-soft); color: var(--sf-success); }
   .alert-info { background: var(--sf-accent-soft); color: var(--sf-text-on-accent); }
   .alert[hidden] { display: none; }
   
   /* =========================================================
      Modal
      ========================================================= */
   
   .modal-host {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
     z-index: 200;
     background: var(--sf-overlay-strong);
     backdrop-filter: blur(4px);
   }
   .modal-host[hidden] { display: none; }
   .modal {
     background: var(--sf-surface);
     border-radius: 14px;
     max-width: 480px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     color: var(--sf-text);
   }
   .modal-head { padding: 18px 22px 6px; }
   .modal-title { font-size: 17px; font-weight: 600; margin: 0; color: var(--sf-text); }
   .modal-sub { font-size: 13px; color: var(--sf-text-muted); margin: 3px 0 0; }
   .modal-body { padding: 10px 22px; }
   .modal-foot {
     padding: 10px 22px 22px;
     display: flex;
     gap: 8px;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
   
   /* =========================================================
      Toast
      ========================================================= */
   
   .toast-host {
     position: fixed;
     bottom: 16px;
     right: 16px;
     z-index: 300;
     display: flex;
     flex-direction: column;
     gap: 8px;
     pointer-events: none;
     max-width: min(360px, calc(100vw - 32px));
   }
   .toast {
     background: var(--sf-surface);
     color: var(--sf-text);
     border: 1px solid var(--sf-border);
     border-radius: 12px;
     padding: 12px 14px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
     display: flex;
     gap: 10px;
     align-items: flex-start;
     font-size: 13px;
     pointer-events: auto;
     animation: toast-in 180ms ease;
   }
   .toast .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
   .toast.success .material-symbols-outlined { color: var(--sf-success); }
   .toast.error .material-symbols-outlined { color: var(--sf-danger); }
   .toast.info .material-symbols-outlined { color: var(--brand-yellow-dark); }
   .toast-body { flex: 1; min-width: 0; }
   .toast-title { font-weight: 500; margin: 0 0 2px; color: var(--sf-text); }
   .toast-msg { margin: 0; color: var(--sf-text-muted); font-size: 13px; }
   @keyframes toast-in {
     from { opacity: 0; transform: translateY(6px); }
     to { opacity: 1; transform: none; }
   }
   
   /* =========================================================
      Empty
      ========================================================= */
   
   .empty { padding: 48px 24px; text-align: center; color: var(--sf-text-muted); }
   .empty .material-symbols-outlined { font-size: 40px; color: var(--sf-text-faint); }
   .empty h3 { font-size: 16px; font-weight: 500; margin: 8px 0 4px; color: var(--sf-text); }
   .empty p { font-size: 13px; margin: 0; }
   
   /* =========================================================
      Skeleton
      ========================================================= */
   
   .skeleton {
     background: linear-gradient(
       90deg,
       var(--sf-bg-subtle) 0%,
       var(--sf-bg-hover) 50%,
       var(--sf-bg-subtle) 100%
     );
     background-size: 200% 100%;
     animation: sf-shimmer 1.4s infinite linear;
     border-radius: 8px;
   }
   @keyframes sf-shimmer {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
   }
   
   /* =========================================================
      Utility
      ========================================================= */
   
   .row { display: flex; gap: 8px; flex-wrap: wrap; }
   .row-between {
     display: flex;
     gap: 8px;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
   }
   .muted { color: var(--sf-text-muted); font-size: 12px; }
   .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: inherit; }
   .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   
   /* =========================================================
      Focus
      ========================================================= */
   
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible,
   textarea:focus-visible {
     outline: 2px solid var(--brand-green);
     outline-offset: 2px;
     border-radius: 6px;
   }
   [data-theme="dark"] a:focus-visible,
   [data-theme="dark"] button:focus-visible,
   [data-theme="dark"] input:focus-visible,
   [data-theme="dark"] select:focus-visible,
   [data-theme="dark"] textarea:focus-visible {
     outline-color: var(--brand-yellow);
   }
   
   /* =========================================================
   Announcement banner — token-driven, light + dark
   ========================================================= */

.asmata-announcement {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sf-accent-soft, var(--admin-accent-soft, #fdf3d4));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border: 1px solid color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 30%,
    transparent
  );
  margin-bottom: 24px;
  overflow: hidden;
}

.asmata-announcement-image {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
}
.asmata-announcement-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asmata-announcement-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 25%,
    transparent
  );
  color: var(--brand-green-dark, var(--sf-success, var(--admin-success, #0f3d1e)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.asmata-announcement-icon .material-symbols-outlined { font-size: 20px; }

.asmata-announcement-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.asmata-announcement-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: inherit;
}
.asmata-announcement-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.9;
}

.asmata-announcement-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  position: relative;
  z-index: 1;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.asmata-announcement-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.asmata-announcement-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.asmata-announcement-more:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.asmata-announcement-more .material-symbols-outlined { font-size: 16px; }

/* ---------- Dark-mode overrides ---------- */

[data-theme="dark"] .asmata-announcement {
  background: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 12%,
    var(--sf-bg-subtle, var(--admin-surface-alt, #16261f))
  );
  color: #f5e6b3;
  border-color: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 35%,
    transparent
  );
}

[data-theme="dark"] .asmata-announcement-icon {
  background: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 30%,
    transparent
  );
  color: var(--brand-yellow, #f2b91c);
}

/* =========================================================
   Shop page — inline-style replacements
   ========================================================= */

/* Product meta icons */
.shop-product-shop-icon {
  font-size: 14px;
  color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
}
[data-theme="dark"] .shop-product-shop-icon {
  color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
}

.shop-product-market-icon {
  font-size: 12px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}

/* Skeleton — token-driven shimmer that flips with theme */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4)) 0%,
    var(--sf-bg-hover, var(--admin-surface-alt, #ebe7d8)) 50%,
    var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4)) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: inherit;
}
.skeleton-w-60 { width: 60%; }
.skeleton-w-90 { width: 90%; }
.skeleton-w-50 { width: 50%; }
.skeleton.sf-product-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty / error state on the shop grid */
.shop-empty-state {
  grid-column: 1 / -1;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.shop-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.shop-empty-icon-error {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.shop-empty-title {
  font-size: 18px;
  margin: 12px 0 0;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.shop-empty-msg {
  margin: 6px 0 0;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  font-size: 13px;
}

/* Pagination row (was inline flex styles) */
.shop-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
}

.shop-pagination-ellipsis {
  padding: 0 4px;
}

/* Filters filter inputs at 100px fixed width (was inline) */
#f-min,
#f-max {
  width: 100px;
}

/* =========================================================
   Shops — token-driven colors for inline-style replacements
   ========================================================= */

/* Inline verified pill (used in shop cards, shop head, reviews) */
.shop-verified-inline {
  position: static;
  background: var(--sf-success-soft, var(--admin-success-soft, #e6f1e9));
  color: var(--sf-success, var(--admin-success, #1a5c2e));
}
[data-theme="dark"] .shop-verified-inline {
  background: var(--sf-success-soft, var(--admin-success-soft, #17301e));
  color: var(--sf-success, var(--admin-success, #6bbf59));
}

/* Star rating icon — brand-consistent in light + dark */
.shop-star {
  color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
}
[data-theme="dark"] .shop-star {
  color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
}

/* Empty / error line used in grids */
.shop-empty-line {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 0;
  margin: 0;
}

/* Back link */
.shop-back-link { font-size: 13px; }
.shop-back-icon { font-size: 14px; }

/* Shop head card (was #shop-head inline) */
.shop-head-card {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 20px;
  margin-bottom: 20px;
}

/* Skeleton placeholders inside the shop head */
.shop-skeleton-title {
  width: 50%;
  height: 22px;
}
.shop-skeleton-sub {
  width: 70%;
  height: 14px;
  margin-top: 10px;
}

/* Section heading (smaller than default) */
.shop-section-heading {
  font-size: 20px;
}

/* Shop head layout */
.shop-head-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.shop-head-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  flex-shrink: 0;
}
.shop-head-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-head-body {
  flex: 1;
  min-width: 0;
}
.shop-head-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--sf-text, var(--admin-text, #0d2416));
  margin: 0 0 4px;
}
.shop-head-market {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.shop-head-market-icon {
  font-size: 14px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.shop-head-desc {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 8px 0 0;
}
.shop-head-report-wrap {
  margin-top: 12px;
}
.shop-report-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  font-size: 13px;
}
.shop-report-btn:hover {
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}
.shop-report-icon { font-size: 14px; }

/* Empty state (no products in a shop) */
.shop-empty-state {
  grid-column: 1 / -1;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.shop-empty-icon {
  font-size: 40px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.shop-empty-msg {
  margin-top: 8px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  font-size: 13px;
}

/* Review summary card */
.shop-review-summary {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.shop-review-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Review card */
.shop-review-card {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.shop-review-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.shop-review-comment {
  margin: 6px 0;
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

/* Full-page error state */
.shop-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.shop-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.shop-error-title {
  font-size: 16px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.shop-error-msg {
  margin-top: 6px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  font-size: 13px;
}
.shop-error-actions {
  margin-top: 16px;
}

/* =========================================================
   Product detail — token-driven colors for inline-style replacements
   ========================================================= */

/* Star rating icons — brand-consistent, dark-aware */
.pd-star {
  color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
}
[data-theme="dark"] .pd-star {
  color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
}

/* Inline verified pill (used in product header + review cards) */
.pd-verified-inline {
  position: static;
  background: var(--sf-success-soft, var(--admin-success-soft, #e6f1e9));
  color: var(--sf-success, var(--admin-success, #1a5c2e));
}
[data-theme="dark"] .pd-verified-inline {
  background: var(--sf-success-soft, var(--admin-success-soft, #17301e));
  color: var(--sf-success, var(--admin-success, #6bbf59));
}

/* Back link */
.pd-back-wrap { margin-bottom: 16px; }
.pd-back-link { font-size: 13px; }
.pd-back-icon { font-size: 16px; }

/* Rating row under price */
.pd-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-rating-value {
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* "Out of stock" text in the meta list */
.pd-out-of-stock {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}

/* Shop link inside the meta list */
.pd-shop-link {
  color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
  text-decoration: none;
}
.pd-shop-link:hover {
  color: var(--brand-green-dark, var(--sf-success, var(--admin-success, #0f3d1e)));
  text-decoration: underline;
}
[data-theme="dark"] .pd-shop-link {
  color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
}
[data-theme="dark"] .pd-shop-link:hover {
  color: var(--brand-yellow-dark, var(--sf-accent, var(--admin-accent, #c9930a)));
}

/* Quantity row */
.pd-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Action icon inside Add to cart */
.pd-action-icon { font-size: 20px; }

/* Description heading */
.pd-desc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text, var(--admin-text, #0d2416));
  margin: 8px 0 6px;
}

/* Report link block */
.pd-report-wrap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
}
.pd-report-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  font-size: 13px;
}
.pd-report-btn:hover {
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}
.pd-report-icon { font-size: 14px; }

/* Reviews section */
.pd-reviews-section { margin-top: 32px; }
.pd-section-heading { font-size: 20px; }

/* Review card */
.pd-review-card {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.pd-review-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pd-review-title {
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.pd-review-comment {
  margin: 6px 0;
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}
.pd-review-meta {
  margin-top: 4px;
}

/* Review footnote */
.pd-reviews-note {
  margin-top: 12px;
  font-size: 12px;
}

/* Full-page error state */
.pd-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.pd-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.pd-error-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.pd-error-msg {
  margin-top: 6px;
}
.pd-error-actions {
  margin-top: 16px;
}

/* =========================================================
   Manual payment modal — token-driven colors + dark mode
   ========================================================= */

/* Tabs container */
.pay-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  border-radius: 10px;
  padding: 4px;
}

/* Individual tab */
.pay-tab {
  flex: 1;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.pay-tab:hover:not(:disabled):not(.pay-tab-active) {
  background: color-mix(in srgb, var(--sf-text, var(--admin-text, #0d2416)) 6%, transparent);
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.pay-tab-active {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  box-shadow: 0 1px 3px rgba(13, 36, 22, 0.08);
}
.pay-tab-disabled,
.pay-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Breakdown card */
.pay-breakdown {
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  line-height: 1.7;
}
.pay-breakdown-row {
  display: flex;
  justify-content: space-between;
}
.pay-breakdown-total {
  border-top: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  padding-top: 8px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Account card */
.pay-account {
  border: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.pay-account-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  margin-bottom: 10px;
}
.pay-account-grid {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.pay-account-number-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pay-account-number {
  flex: 1;
}
.pay-account-mono {
  font-size: 15px;
}
.pay-account-note {
  font-size: 12px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  margin: 10px 0 0;
}
.pay-account-skeleton {
  width: 100%;
  height: 120px;
}

/* Upload section */
.pay-help {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 0 0 10px;
}
.pay-input {
  padding-left: 14px;
}
.pay-textarea {
  min-height: 60px;
  resize: vertical;
}
.pay-optional {
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  font-weight: 400;
}
.pay-hint {
  font-size: 12px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.pay-file {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border: 1px solid transparent;
}
.pay-file:focus {
  outline: 2px solid var(--focus-ring, var(--sf-accent, var(--admin-accent, #1668d6)));
  outline-offset: 2px;
}

/* Error text inside account card */
.pay-error {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
  font-size: 13px;
  margin: 0;
}

/* Dark-mode refinements */
[data-theme="dark"] .pay-tab-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .pay-account {
  background: var(--sf-surface, var(--admin-surface, #12201a));
}

/* =========================================================
   Customer orders list — token-driven, light + dark
   ========================================================= */

/* Skeleton placeholders for the initial loading state */
.orders-skeleton {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* Right-side status column (order status + payment status chips) */
.orders-status-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Empty state (no orders yet) */
.orders-empty-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.orders-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.orders-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.orders-empty-msg {
  margin-top: 6px;
}
.orders-empty-actions {
  margin-top: 16px;
}

/* Error state (could not load orders) */
.orders-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.orders-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.orders-error-title {
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.orders-error-msg {
  margin-top: 6px;
}

/* =========================================================
   Order detail — token-driven colors + dark mode
   ========================================================= */

/* Loading skeleton */
.od-skeleton-main {
  width: 100%;
  height: 400px;
  border-radius: 16px;
}

/* Back link */
.od-back-wrap { margin-bottom: 16px; }
.od-back-link { font-size: 13px; }
.od-back-icon { font-size: 14px; }

/* Order number */
.od-order-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Delivery row + timeline */
.od-delivery-row {
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.od-delivery-timeline {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  line-height: 1.6;
}
.od-delivery-failure {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}

/* Item row */
.od-item-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
}
.od-item-info { flex: 1; min-width: 0; }
.od-item-name {
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.od-item-meta { margin-top: 2px; }
.od-item-price { text-align: right; }
.od-item-subtotal {
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Totals block */
.od-totals { margin-top: 12px; }
.od-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}
.od-total-row + .od-total-row { margin-top: 4px; }
.od-total-grand {
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.18)));
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Delivery address */
.od-address {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  line-height: 1.6;
}
.od-address strong { color: var(--sf-text, var(--admin-text, #0d2416)); }

/* Notes */
.od-notes {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 0;
}

/* Action buttons row */
.od-actions {
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.od-action-icon { font-size: 16px; }
.od-action-icon-sm { font-size: 16px; }

/* Payment blocks — one class per status, all token-driven */
.od-pay-block {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
}
.od-pay-msg {
  margin: 6px 0 0;
  font-size: 13px;
}
.od-pay-actions {
  gap: 8px;
  margin-top: 10px;
}

/* Pending proof (waiting for confirmation) */
.od-pay-block-pending {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #fdf3d4));
  color: var(--sf-warn, var(--admin-warn, #b26a00));
}
[data-theme="dark"] .od-pay-block-pending {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}

/* Rejected proof */
.od-pay-block-rejected {
  background: var(--sf-danger-soft, var(--admin-danger-soft, #fde2e2));
  color: var(--sf-danger-text, var(--admin-danger-text, #5c0000));
}
[data-theme="dark"] .od-pay-block-rejected {
  background: var(--sf-danger-soft, var(--admin-danger-soft, #3b1414));
  color: var(--sf-danger, var(--admin-danger, #f87171));
}
.od-pay-msg-rejected {
  margin: 6px 0 10px;
}

/* Pending payment action block */
.od-pay-block-pending-action {
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.od-pay-block-pending-action .od-pay-msg {
  margin: 6px 0 10px;
}
.od-pay-icon { font-size: 18px; }

/* Paid block */
.od-pay-block-paid {
  background: var(--sf-success-soft, var(--admin-success-soft, #e6f1e9));
  color: var(--sf-success, var(--admin-success, #1a5c2e));
}
[data-theme="dark"] .od-pay-block-paid {
  background: var(--sf-success-soft, var(--admin-success-soft, #17301e));
  color: var(--sf-success, var(--admin-success, #6bbf59));
}

/* Full-page error state */
.od-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.od-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.od-error-title {
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.od-error-msg { margin-top: 6px; }
.od-error-actions { margin-top: 16px; }

/* Review modal inputs */
.od-input { padding-left: 14px; }
.od-textarea {
  min-height: 80px;
  resize: vertical;
}

/* =========================================================
   Not found page — token-driven, light + dark
   ========================================================= */

.nf-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 64px 24px;
  text-align: center;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.nf-icon {
  font-size: 56px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.nf-title {
  font-size: 24px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.nf-msg {
  margin-top: 6px;
}
.nf-actions {
  margin-top: 20px;
}

/* =========================================================
   My reports — token-driven colors + dark mode
   ========================================================= */

/* Back icon in header */
.mr-back-icon { font-size: 16px; }

/* Loading skeletons */
.mr-skeleton {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.mr-skeleton-last { margin-bottom: 0; }

/* Error state */
.mr-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.mr-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.mr-error-title {
  font-size: 16px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.mr-error-msg { margin-top: 6px; }

/* Empty state */
.mr-empty-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.mr-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.mr-empty-title {
  font-size: 16px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.mr-empty-msg { margin-top: 6px; }

/* Report card */
.mr-card {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.mr-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.mr-card-body { flex: 1; min-width: 0; }

.mr-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.mr-description {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 6px 0;
  white-space: pre-wrap;
}

.mr-meta {
  font-size: 12px;
  margin-top: 4px;
}

/* Status notes — one class per status, all token-driven */
.mr-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

/* Received (OPEN) */
.mr-note-open {
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

/* Under review */
.mr-note-review {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #fdf3d4));
  color: var(--sf-warn, var(--admin-warn, #b26a00));
}
[data-theme="dark"] .mr-note-review {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}

/* Resolved */
.mr-note-resolved {
  background: var(--sf-success-soft, var(--admin-success-soft, #e6f1e9));
  color: var(--sf-success, var(--admin-success, #1a5c2e));
}
[data-theme="dark"] .mr-note-resolved {
  background: var(--sf-success-soft, var(--admin-success-soft, #17301e));
  color: var(--sf-success, var(--admin-success, #6bbf59));
}

/* Dismissed */
.mr-note-dismissed {
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

/* Pagination row */
.mr-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}
.mr-pagination-actions { gap: 8px; }

/* =========================================================
   Market page — token-driven colors + dark mode
   ========================================================= */

/* Shop icon inside product meta */
.market-product-shop-icon {
  font-size: 14px;
  color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
}
[data-theme="dark"] .market-product-shop-icon {
  color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
}

/* Market card "Explore market" link */
.market-explore-link { font-size: 13px; }
.market-explore-icon { font-size: 14px; }

/* Empty line used in grids */
.market-empty-line {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 0;
  margin: 0;
}

/* Back link */
.market-back-wrap { margin-bottom: 16px; }
.market-back-link { font-size: 13px; }
.market-back-icon { font-size: 14px; }

/* Market head card */
.market-head-card {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 20px;
  margin-bottom: 20px;
}
.market-skeleton-title {
  width: 60%;
  height: 24px;
}
.market-skeleton-sub {
  width: 90%;
  height: 14px;
  margin-top: 10px;
}

/* Section heading size */
.market-section-heading { font-size: 20px; }

/* Market name + description inside the head */
.market-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--sf-text, var(--admin-text, #0d2416));
  margin: 0 0 6px;
}
.market-desc {
  font-size: 14px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 0;
}

/* "See all" link in the Products section head */
.market-see-all { font-size: 13px; }
.market-see-all-icon { font-size: 14px; }

/* Empty products state inside the grid */
.market-empty-state {
  grid-column: 1 / -1;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.market-empty-icon {
  font-size: 40px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.market-empty-msg {
  margin-top: 8px;
}

/* Full-page error state */
.market-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.market-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.market-error-title {
  font-size: 16px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.market-error-msg { margin-top: 6px; }
.market-error-actions { margin-top: 16px; }

/* =========================================================
   Category page — token-driven colors + dark mode
   ========================================================= */

/* Product meta icons */
.cat-product-shop-icon {
  font-size: 14px;
  color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
}
[data-theme="dark"] .cat-product-shop-icon {
  color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
}

.cat-product-market-icon {
  font-size: 12px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}

/* Category tile skeleton line */
.cat-tile-line {
  height: 12px;
  width: 70%;
  border-radius: 6px;
}

/* Skeleton lines inside product cards */
.cat-skeleton-line-60 {
  height: 12px;
  width: 60%;
}
.cat-skeleton-line-90 {
  height: 14px;
  width: 90%;
  margin-top: 8px;
}

/* Empty line used in the categories grid */
.cat-empty-line {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 0;
  margin: 0;
}

/* Back link at the top of single category view */
.cat-back-link {
  font-size: 13px;
  margin-bottom: 6px;
}
.cat-back-icon { font-size: 14px; }

/* Empty / error state inside the product grid */
.cat-empty-state {
  grid-column: 1 / -1;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.cat-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.cat-empty-icon-error {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.cat-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.cat-empty-title-error {
  font-size: 16px;
}
.cat-empty-msg {
  margin-top: 6px;
}

/* =========================================================
   Cart page — token-driven colors + dark mode
   ========================================================= */

/* Sign-in required state */
.cart-signin-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
  text-align: center;
}
.cart-signin-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.cart-signin-title {
  font-size: 20px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.cart-signin-msg { margin-top: 6px; }
.cart-signin-actions { margin-top: 16px; }

/* Loading skeleton */
.cart-skeleton {
  width: 100%;
  height: 200px;
  border-radius: 16px;
}

/* Error state */
.cart-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.cart-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.cart-error-title {
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.cart-error-msg { margin-top: 6px; }

/* Empty cart state */
.cart-empty-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.06);
}
.cart-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.cart-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.cart-empty-msg { margin-top: 6px; }
.cart-empty-actions { margin-top: 16px; }

/* Shop head icon inside cart group */
.cart-shop-head-icon {
  font-size: 14px;
  vertical-align: middle;
}

/* Unavailable note inside a cart line */
.cart-unavailable-note {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
  font-size: 12px;
  margin-top: 4px;
}

/* Right side of cart line (subtotal + remove) */
.cart-line-right { text-align: right; }
.cart-line-subtotal {
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.cart-remove-btn { margin-top: 8px; }

/* Summary note */
.cart-summary-note { margin: 10px 0; }

/* Checkout button */
.cart-checkout-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  margin-top: 8px;
}

/* Clear button */
.cart-clear-btn {
  width: 100%;
  margin-top: 8px;
}

/* =========================================================
   Shop filters — token-driven, light + dark
   ========================================================= */

.filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  margin-bottom: 20px;
}

/* Row 1: search + sort */
.filters-search-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .filters-search-row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    align-items: end;
  }
}

.filters-search {
  position: relative;
  display: flex;
  align-items: center;
}
.filters-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  pointer-events: none;
}
.filters-search .filters-input {
  padding-left: 42px;
}

/* Row 2: category + market */
.filters-selects-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .filters-selects-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Row 3: price range + reset */
.filters-price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
@media (min-width: 640px) {
  .filters-price-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

/* Field wrapper (label + input/select) */
.filters-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.filters-sort {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Label */
.filters-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}

/* Shared input + select styling */
.filters-input,
.filters-select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border: 1px solid transparent;
  outline: none;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  min-width: 0;
  font-family: inherit;
}
.filters-input::placeholder { color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f)); }

.filters-input:focus,
.filters-select:focus {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  border-color: var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e)));
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--brand-green, var(--sf-success, var(--admin-success, #1a5c2e))) 18%,
    transparent
  );
}
[data-theme="dark"] .filters-input:focus,
[data-theme="dark"] .filters-select:focus {
  border-color: var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c)));
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--brand-yellow, var(--sf-accent, var(--admin-accent, #f2b91c))) 22%,
    transparent
  );
}

/* Naira prefix wrapper for price inputs */
.filters-naira {
  position: relative;
  display: flex;
  align-items: center;
}
.filters-naira-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  pointer-events: none;
}
.filters-input-naira {
  padding-left: 32px;
}

/* Reset button row */
.filters-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
@media (min-width: 640px) {
  .filters-actions { justify-content: flex-end; }
}

.filters-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filters-reset-icon { font-size: 16px; }

/* Dark-mode: soften the field background so inputs don't glow */
[data-theme="dark"] .filters-input,
[data-theme="dark"] .filters-select {
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #16261f));
}
[data-theme="dark"] .filters-input:focus,
[data-theme="dark"] .filters-select:focus {
  background: var(--sf-surface, var(--admin-surface, #12201a));
}

/* =========================================================
   First-load PDF guide popup — token-driven, light + dark
   ========================================================= */

   .pdf-guide-host {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .pdf-guide-host[hidden] { display: none; }
  
  .pdf-guide-backdrop {
    position: absolute;
    inset: 0;
    background: var(--sf-overlay-strong, rgba(13, 36, 22, 0.55));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .pdf-guide-modal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: min(90vh, 720px);
    overflow-y: auto;
    background: var(--sf-surface, var(--admin-surface, #ffffff));
    color: var(--sf-text, var(--admin-text, #0d2416));
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(13, 36, 22, 0.28);
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 480px) {
    .pdf-guide-modal { max-height: 94vh; border-radius: 14px; }
  }
  
  /* Head */
  .pdf-guide-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 20px 20px 12px;
  }
  .pdf-guide-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--brand-green, #1a5c2e) 14%, transparent);
    color: var(--brand-green, #1a5c2e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  [data-theme="dark"] .pdf-guide-icon {
    background: color-mix(in srgb, var(--brand-yellow, #f2b91c) 18%, transparent);
    color: var(--brand-yellow, #f2b91c);
  }
  .pdf-guide-icon .material-symbols-outlined { font-size: 24px; }
  
  .pdf-guide-head-text { flex: 1; min-width: 0; }
  .pdf-guide-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sf-text, var(--admin-text, #0d2416));
  }
  .pdf-guide-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  }
  
  .pdf-guide-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .pdf-guide-close:hover {
    background: var(--sf-bg-hover, #ebe7d8);
    color: var(--sf-text, var(--admin-text, #0d2416));
  }
  .pdf-guide-close .material-symbols-outlined { font-size: 20px; }
  
  /* Body */
  .pdf-guide-body {
    padding: 4px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Each PDF item */
  .pdf-guide-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
    border-radius: 12px;
    background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
    flex-wrap: wrap;
  }
  .pdf-guide-item-info {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
  }
  .pdf-guide-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--sf-danger, #b91c1c) 14%, transparent);
    color: var(--sf-danger, #b91c1c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pdf-guide-item-icon .material-symbols-outlined { font-size: 20px; }
  .pdf-guide-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .pdf-guide-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text, var(--admin-text, #0d2416));
  }
  .pdf-guide-item-desc {
    font-size: 12px;
    color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
    line-height: 1.4;
  }
  
  .pdf-guide-download {
    flex-shrink: 0;
  }
  .pdf-guide-download-icon { font-size: 16px; }
  
  /* Instructions */
  .pdf-guide-instructions {
    margin-top: 4px;
    padding: 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-green, #1a5c2e) 6%, transparent);
  }
  [data-theme="dark"] .pdf-guide-instructions {
    background: color-mix(in srgb, var(--brand-yellow, #f2b91c) 8%, transparent);
  }
  .pdf-guide-instructions-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  }
  .pdf-guide-instructions-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  }
  .pdf-guide-instructions-list li + li { margin-top: 4px; }
  .pdf-guide-instructions-list strong {
    color: var(--sf-text, var(--admin-text, #0d2416));
    font-weight: 600;
  }
  
  /* Foot */
  .pdf-guide-foot {
    padding: 12px 20px 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  }
  .pdf-guide-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
    cursor: pointer;
    user-select: none;
  }
  .pdf-guide-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-green, #1a5c2e);
  }
  [data-theme="dark"] .pdf-guide-remember input {
    accent-color: var(--brand-yellow, #f2b91c);
  }
  
  .pdf-guide-continue {
    min-width: 180px;
  }
  @media (max-width: 480px) {
    .pdf-guide-continue { width: 100%; }
  }

  .sf-sponsored-pill {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--brand-yellow, #f2b91c);
    color: var(--brand-ink, #0d2416);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    z-index: 1;
  }
  .sf-sponsored-pill .material-symbols-outlined {
    font-size: 11px;
  }
  [data-theme="dark"] .sf-sponsored-pill {
    background: var(--brand-yellow, #f2b91c);
    color: var(--brand-ink, #0d2416);
  }

  /* =========================================================
   Trader boosts — token-driven colors + dark mode
   ========================================================= */

/* Toolbar */
.boost-toolbar { margin-bottom: 16px; }
.boost-toolbar-actions { gap: 8px; }
.boost-toolbar-icon { font-size: 16px; }

/* Loading skeleton */
.boost-skeleton {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 14px;
}

/* Error / empty states */
.boost-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 14px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 40px 24px;
}
.boost-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.boost-error-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-error-actions { margin-top: 16px; }

.boost-empty-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 14px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
  text-align: center;
}
.boost-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.boost-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-empty-msg { margin-top: 6px; }
.boost-empty-actions { margin-top: 16px; }

/* Section heading in the group list */
.boost-section-title {
  margin: 20px 0 10px;
  font-size: 14px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Boost card */
.boost-card {
  margin-bottom: 12px;
}
.boost-card-head { align-items: flex-start; }
.boost-card-head-text { flex: 1; min-width: 0; }
.boost-card-target {
  font-weight: 600;
  font-size: 15px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-card-meta {
  margin-top: 4px;
  font-size: 13px;
}
.boost-card-actions {
  gap: 8px;
  margin-top: 12px;
}

/* Active boost stats */
.boost-active-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
}
.boost-active-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-success, var(--admin-success, #1a5c2e));
}
[data-theme="dark"] .boost-active-value {
  color: var(--sf-success, var(--admin-success, #6bbf59));
}
.boost-active-started {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

/* Pending review note */
.boost-pending-review-note {
  margin-top: 12px;
  font-size: 12px;
}

/* Pending payment panel */
.boost-pending-payment {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--sf-warn-soft, var(--admin-warn-soft, #fdf3d4));
  color: var(--sf-warn, var(--admin-warn, #b26a00));
}
[data-theme="dark"] .boost-pending-payment {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}
.boost-pending-payment-msg {
  margin: 6px 0 0;
  line-height: 1.5;
}
.boost-pending-payment-account {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}

/* Rejected panel */
.boost-rejected {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--sf-danger-soft, var(--admin-danger-soft, #fde2e2));
  color: var(--sf-danger-text, var(--admin-danger-text, #5c0000));
}
[data-theme="dark"] .boost-rejected {
  background: var(--sf-danger-soft, var(--admin-danger-soft, #3b1414));
  color: var(--sf-danger, var(--admin-danger, #f87171));
}
.boost-rejected-msg { margin: 6px 0 0; }

/* Modal — create boost */
.boost-input {
  padding-left: 14px;
}
.boost-field-hint {
  font-size: 12px;
}
.boost-price-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: var(--sf-accent-soft, var(--admin-accent-soft, #fdf3d4));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
[data-theme="dark"] .boost-price-panel {
  background: var(--sf-accent-soft, var(--admin-accent-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}
.boost-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.boost-price-value {
  font-weight: 700;
  font-size: 15px;
}
.boost-price-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Modal — submit proof */
.boost-proof-intro {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--sf-warn-soft, var(--admin-warn-soft, #fdf3d4));
  color: var(--sf-warn, var(--admin-warn, #b26a00));
}
[data-theme="dark"] .boost-proof-intro {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}
.boost-proof-amount { font-weight: 600; }

.boost-proof-account {
  padding: 14px;
  border: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  border-radius: 12px;
  margin-bottom: 14px;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-proof-account-number {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.boost-proof-account-mono { font-size: 15px; }

.boost-file-input {
  padding-left: 14px;
  padding: 10px;
}

/* Help card at the bottom */
.boost-help-card {
  margin-top: 20px;
}
.boost-help-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

.pd-variant-selector { margin-top: 8px; }

.pd-variant-axis-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-text-faint, #7a8a7f);
  margin-bottom: 8px;
}

.pd-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pd-variant-option {
  padding: 8px 14px;
  border: 1px solid var(--sf-border-strong, rgba(26, 92, 46, 0.28));
  background: var(--sf-surface, #ffffff);
  color: var(--sf-text, #0d2416);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}

.pd-variant-option:hover:not(.is-selected) {
  background: var(--sf-bg-hover, #ebe7d8);
}

.pd-variant-option.is-selected {
  background: var(--brand-green, #1a5c2e);
  color: #ffffff;
  border-color: var(--brand-green, #1a5c2e);
  font-weight: 600;
}

[data-theme="dark"] .pd-variant-option.is-selected {
  background: var(--brand-yellow, #f2b91c);
  color: var(--brand-ink, #0d2416);
  border-color: var(--brand-yellow, #f2b91c);
}

.pd-variant-status {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  min-height: 22px;
}

.pd-variant-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--sf-text, #0d2416);
}

.pd-variant-unavailable {
  color: var(--sf-danger, #b91c1c);
  font-weight: 600;
}

/* Variant attribute line under the product name in a cart row. */
.sf-cart-variant {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}

.od-item-variant {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}

/* Share button + modal on product detail page */
.pd-actions-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-border, rgba(26, 92, 46, 0.12));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-share-btn,
.pd-report-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sf-text-faint, #7a8a7f);
  font-size: 13px;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.pd-share-btn:hover,
.pd-report-btn:hover {
  color: var(--sf-text-muted, #3d5546);
}

.pd-share-icon,
.pd-report-icon {
  font-size: 16px;
}

/* Share modal grid — shared by product and shop pages */
.pd-share-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 480px) {
  .pd-share-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pd-share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--sf-bg-subtle, #f2efe4);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--sf-text, #0d2416);
  font-size: 12px;
  font-family: inherit;
  transition: background-color 120ms, border-color 120ms;
}

.pd-share-target:hover {
  background: var(--sf-bg-hover, #ebe7d8);
  border-color: var(--sf-border-strong, rgba(26, 92, 46, 0.28));
}

.pd-share-target .material-symbols-outlined {
  font-size: 24px;
  color: var(--brand-green, #1a5c2e);
}

[data-theme="dark"] .pd-share-target .material-symbols-outlined {
  color: var(--brand-yellow, #f2b91c);
}

/* SVG icons inside share targets */
.pd-share-target svg {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--brand-green, #1a5c2e);
  transition: color 120ms ease, transform 120ms ease;
}

[data-theme="dark"] .pd-share-target svg {
  color: var(--brand-yellow, #f2b91c);
}

/* Lift the icon slightly on hover for a tactile feel */
.pd-share-target:hover svg {
  transform: translateY(-1px);
}

/* Brand-accurate hover colors.
   The parent already has hover styling; these override the icon color
   on hover to match each platform. */
.pd-share-target[aria-label*="WhatsApp"]:hover svg {
  color: #25D366;
}
.pd-share-target[aria-label*="Twitter"]:hover svg {
  color: #000000;
}
[data-theme="dark"] .pd-share-target[aria-label*="Twitter"]:hover svg {
  color: #ffffff;
}
.pd-share-target[aria-label*="Facebook"]:hover svg {
  color: #1877F2;
}
.pd-share-target[aria-label*="Telegram"]:hover svg {
  color: #229ED9;
}

/* =========================================================
   PWA install prompt
   ========================================================= */

.pwa-prompt {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--sf-surface, #ffffff);
  color: var(--sf-text, #0d2416);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(13, 36, 22, 0.18);
  border: 1px solid var(--sf-border, rgba(26, 92, 46, 0.12));
  animation: pwa-slide-up 260ms ease;
  max-width: 460px;
}

@media (min-width: 640px) {
  .pwa-prompt {
    bottom: 24px;
    right: 24px;
    left: auto;
    width: 380px;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pwa-prompt-icon { flex-shrink: 0; }
  .pwa-prompt-body { flex: 1; min-width: 0; }
  .pwa-prompt-actions { width: 100%; justify-content: flex-end; }
}

.pwa-prompt-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-green, #1a5c2e);
}

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

.pwa-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.pwa-prompt-body strong {
  font-size: 14px;
  font-weight: 600;
}

.pwa-prompt-body span {
  color: var(--sf-text-muted, #3d5546);
}

.pwa-prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.pwa-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--sf-bg-subtle, #f2efe4);
  border-radius: 4px;
  vertical-align: -4px;
}

.pwa-inline-icon svg {
  width: 14px;
  height: 14px;
  color: var(--brand-green, #1a5c2e);
}

[data-theme="dark"] .pwa-prompt {
  background: var(--sf-bg, #12201a);
  color: var(--sf-text, #f4f4f5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-color: var(--sf-border, rgba(242, 185, 28, 0.14));
}

@keyframes pwa-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Cross-market cart warning
   ========================================================= */

.cart-market-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--sf-danger-soft, #fde2e2);
  border-left: 4px solid var(--sf-danger, #b91c1c);
  color: var(--sf-danger, #b91c1c);
}

[data-theme="dark"] .cart-market-warning {
  background: var(--sf-danger-soft, #3b1414);
  color: var(--sf-danger, #f87171);
}

.cart-market-warning-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.cart-market-warning-body {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}

.cart-market-warning-body strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: inherit;
}

.cart-market-warning-list {
  margin: 0 0 6px;
  font-weight: 600;
  color: inherit;
}

.cart-market-warning-help {
  margin: 0;
  opacity: 0.9;
  color: inherit;
}


/* =========================================================
   Support — token-driven colors + dark mode
   ========================================================= */

/* Header button icon */
.sup-icon-16 { font-size: 16px; }

/* Loading skeletons */
.sup-skeleton {
  width: 100%;
  height: 80px;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Empty state */
.sup-empty-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
  text-align: center;
}
.sup-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.sup-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.sup-empty-msg { margin-top: 6px; }
.sup-empty-actions { margin-top: 16px; }

/* Error state */
.sup-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
}
.sup-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.sup-error-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.sup-error-msg { margin-top: 6px; }
.sup-error-actions { margin-top: 16px; }

/* Ticket list */
.sup-list-wrap {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  border-radius: 16px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  overflow: hidden;
}

.sup-ticket-item {
  border-radius: 0;
}

.sup-ticket-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sup-chip-sm { font-size: 10px; }

.sup-ticket-subject {
  margin-top: 6px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* New-ticket modal inputs */
.sup-input {
  padding-left: 14px;
}
.sup-textarea {
  min-height: 100px;
  resize: vertical;
}
.sup-textarea-sm {
  min-height: 80px;
  resize: vertical;
}

/* Ticket thread */
.sup-thread-body {
  max-height: 70vh;
  overflow-y: auto;
}
.sup-thread-skeleton {
  width: 100%;
  height: 120px;
  border-radius: 10px;
}
.sup-thread-error {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.sup-thread-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sup-thread-messages {
  margin-bottom: 16px;
}
.sup-thread-closed {
  text-align: center;
}
.sup-thread-actions {
  gap: 8px;
  margin-bottom: 12px;
}

/* Message rows */
.sup-msg-row {
  display: flex;
  margin-bottom: 8px;
}
.sup-msg-row-me { justify-content: flex-end; }
.sup-msg-row-support { justify-content: flex-start; }

/* Message bubbles */
.sup-msg-bubble {
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 12px;
}
.sup-msg-bubble-me {
  background: var(--sf-accent-soft, var(--admin-accent-soft, #fdf3d4));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.sup-msg-bubble-support {
  background: var(--sf-success-soft, var(--admin-success-soft, #e6f1e9));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
[data-theme="dark"] .sup-msg-bubble-me {
  background: color-mix(
    in srgb,
    var(--brand-yellow, var(--sf-accent, #f2b91c)) 15%,
    transparent
  );
  color: var(--sf-text, var(--admin-text, #f4f4f5));
}
[data-theme="dark"] .sup-msg-bubble-support {
  background: color-mix(
    in srgb,
    var(--brand-green, var(--sf-success, #1a5c2e)) 20%,
    transparent
  );
  color: var(--sf-text, var(--admin-text, #f4f4f5));
}

.sup-msg-author {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  margin-bottom: 2px;
}
.sup-msg-text {
  font-size: 13px;
  color: var(--sf-text, var(--admin-text, #0d2416));
  white-space: pre-wrap;
}
.sup-msg-time {
  margin-top: 4px;
  text-align: right;
  font-size: 11px;
}

.sf-topbar-brand-logo {
  height: 40px;          /* tune to match your topbar height */
  width: auto;
  display: block;
  object-fit: contain;
}

[data-theme="dark"] .sf-topbar-brand-logo {
  content: url("../assets/asmatalogo.png");
}

/* =========================================================
   KYT (Know Your Trader) — storefront trust signal
   ========================================================= */

/* Gold badge, visually distinct from the green "Verified" pill.
   The KYT badge REPLACES the plain "Verified" badge, so a trader
   who is both KYT-verified and association-verified sees the
   stronger badge only. */
.badge-kyt-verified {
  background: linear-gradient(135deg, #c9930a 0%, #f2b91c 100%);
  color: var(--brand-ink, #0d2416);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 6px;   /* rectangle, not a pill — differentiates from "Verified" */
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.15);
}

[data-theme="dark"] .badge-kyt-verified {
  background: linear-gradient(135deg, #f2b91c 0%, #ffcd3d 100%);
  color: var(--brand-ink, #0d2416);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.badge-kyt-verified .material-symbols-outlined {
  font-size: 12px;
  font-variation-settings: 'FILL' 1;
}

/* Storefront card variant — used by the .sf-* card renderers.
   Same visual language, but as a "pill" to fit the .sf-product-thumb
   corner layout. */
.sf-kyt-pill {
  background: linear-gradient(135deg, #c9930a 0%, #f2b91c 100%);
  color: var(--brand-ink, #0d2416);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(13, 36, 22, 0.2);
}

[data-theme="dark"] .sf-kyt-pill {
  background: linear-gradient(135deg, #f2b91c 0%, #ffcd3d 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sf-kyt-pill .material-symbols-outlined {
  font-size: 12px;
  font-variation-settings: 'FILL' 1;
}

/* Product detail page — a full-width trust row above the price.
   This is the highest-signal location: a customer who lands on a
   product page from a shared link sees the KYT badge immediately. */
.pd-trust-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.pd-trust-row .material-symbols-outlined {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  font-variation-settings: 'FILL' 1;
}

.pd-trust-row strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.pd-trust-row span:not(.material-symbols-outlined) {
  font-size: 12px;
  opacity: 0.85;
}

/* KYT variant — gold, prominent */
.pd-trust-kyt {
  background: linear-gradient(135deg, rgba(201, 147, 10, 0.12) 0%, rgba(242, 185, 28, 0.12) 100%);
  border: 1px solid rgba(201, 147, 10, 0.35);
  color: var(--brand-yellow-dark, #c9930a);
}

[data-theme="dark"] .pd-trust-kyt {
  background: linear-gradient(135deg, rgba(242, 185, 28, 0.14) 0%, rgba(255, 205, 61, 0.10) 100%);
  border-color: rgba(242, 185, 28, 0.4);
  color: var(--brand-yellow, #f2b91c);
}

.pd-trust-kyt strong {
  color: var(--brand-yellow-dark, #c9930a);
}

[data-theme="dark"] .pd-trust-kyt strong {
  color: var(--brand-yellow, #f2b91c);
}

/* Verified-only variant — green, less prominent */
.pd-trust-verified {
  background: var(--sf-success-soft, #e6f1e9);
  border: 1px solid color-mix(in srgb, var(--sf-success, #1a5c2e) 30%, transparent);
  color: var(--sf-success, #1a5c2e);
}

[data-theme="dark"] .pd-trust-verified {
  background: var(--sf-success-soft, #17301e);
  border-color: color-mix(in srgb, var(--sf-success, #6bbf59) 40%, transparent);
  color: var(--sf-success, #6bbf59);
}
   
   /* =========================================================
      Print
      ========================================================= */
   
   @media print {
     .sf-topbar,
     .sf-sidebar,
     .sf-backdrop,
     .toast-host,
     .modal-host { display: none !important; }
   }