/* =========================================================
   ASMATA E-Commerce Plus — custom layer
   Works alongside Tailwind CDN. Nothing here conflicts with
   Tailwind classes; it only fills gaps.
   Brand palette extracted from logo:
     forest green  #1a5c2e   (primary)
     golden yellow #f2b91c   (accent)
     ocean blue    #1668d6   (secondary)
     cream         #f7f5ee   (base surface)
     green-black   #0d2416   (ink)
   Set data-theme on <html> (document.documentElement).
   ========================================================= */

/* =========================================================
   Theme tokens
   ========================================================= */

   :root,
   [data-theme="light"] {
     /* Brand core */
     --brand-green:       #1a5c2e;
     --brand-green-dark:  #0f3d1e;
     --brand-green-soft:  #e6f1e9;
     --brand-yellow:      #f2b91c;
     --brand-yellow-dark: #c9930a;
     --brand-yellow-soft: #fdf3d4;
     --brand-blue:        #1668d6;
     --brand-blue-dark:   #0f4fa8;
     --brand-blue-soft:   #e3eefc;
     --brand-ink:         #0d2416;
   
     /* Surfaces */
     --surface:        #ffffff;
     --surface-alt:    #f7f5ee;   /* cream */
     --surface-subtle: #f2efe4;
     --surface-hover:  #ebe7d8;
   
     /* Borders */
     --border:        rgba(26, 92, 46, 0.12);
     --border-strong: rgba(26, 92, 46, 0.28);
   
     /* Text */
     --text:            #0d2416;
     --text-muted:      #3d5546;
     --text-faint:      #7a8a7f;
     --text-on-accent:  #0d2416;
     --text-on-primary: #ffffff;
   
     /* Accent / primary */
     --accent:        #f2b91c;
     --accent-hover:  #c9930a;
     --accent-soft:   #fdf3d4;
     --primary:       #1a5c2e;
     --primary-hover: #0f3d1e;
     --primary-soft:  #e6f1e9;
   
     /* Status */
     --success:      #1a5c2e;
     --success-soft: #e6f1e9;
     --danger:       #b91c1c;
     --danger-soft:  #fde2e2;
     --danger-text:  #5c0000;
     --warn:         #b26a00;
     --warn-soft:    #fdf3d4;
   
     /* Hero / overlays */
     --hero-glow-a:   rgba(22, 104, 214, 0.20);
     --hero-glow-b:   rgba(26, 92, 46, 0.18);
     --cta-glow:      rgba(242, 185, 28, 0.35);
     --cta-bg:        #1a5c2e;
     --cta-ink:       #ffffff;
     --overlay-strong: rgba(13, 36, 22, 0.85);
   
     /* Scrollbar */
     --scrollbar-thumb: #c9cdc4;
   
     /* Layout */
     --radius:    16px;
     --radius-sm: 10px;
     --header-h:  64px;
   
     /* Shadows */
     --shadow-sm: 0 1px 2px rgba(13, 36, 22, 0.06), 0 1px 3px rgba(13, 36, 22, 0.04);
     --shadow-md: 0 4px 12px rgba(13, 36, 22, 0.08);
     --shadow-lg: 0 12px 32px rgba(13, 36, 22, 0.10);
   
     color-scheme: light;
   }
   
   @media (min-width: 1024px) {
     :root { --header-h: 120px; }
   }
   
   [data-theme="dark"] {
     /* Surfaces */
     --surface:        #12201a;
     --surface-alt:    #0a1410;
     --surface-subtle: #16261f;
     --surface-hover:  #1c2f26;
   
     /* Borders */
     --border:        rgba(242, 185, 28, 0.14);
     --border-strong: rgba(242, 185, 28, 0.30);
   
     /* Text */
     --text:            #f4f4f5;
     --text-muted:      #b0b8b2;
     --text-faint:      #7a8a7f;
     --text-on-accent:  #0d2416;
     --text-on-primary: #0d2416;
   
     /* Accent / primary (yellow becomes primary on dark) */
     --accent:        #f2b91c;
     --accent-hover:  #ffcd3d;
     --accent-soft:   #2a2410;
     --primary:       #f2b91c;
     --primary-hover: #ffcd3d;
     --primary-soft:  #2a2410;
   
     /* Status */
     --success:      #6bbf59;
     --success-soft: #17301e;
     --danger:       #f87171;
     --danger-soft:  #3b1414;
     --danger-text:  #fecaca;
     --warn:         #f2b91c;
     --warn-soft:    #2a2410;
   
     /* Hero / overlays */
     --hero-glow-a:   rgba(22, 104, 214, 0.28);
     --hero-glow-b:   rgba(107, 191, 89, 0.22);
     --cta-glow:      rgba(242, 185, 28, 0.25);
     --cta-bg:        #12201a;
     --cta-ink:       #f4f4f5;
     --overlay-strong: rgba(0, 0, 0, 0.85);
   
     /* Scrollbar */
     --scrollbar-thumb: #3a3a3d;
   
     /* Shadows */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
     --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
   
     color-scheme: dark;
   }
   
   /* =========================================================
      Reset / base
      ========================================================= */
   
   *,
   *::before,
   *::after { box-sizing: border-box; }
   
   html { scroll-behavior: smooth; }
   html,
   body { margin: 0; padding: 0; }
   
   body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     overscroll-behavior-y: none;
     background: var(--surface-alt);
     color: var(--text);
   }
   
   img,
   svg { max-width: 100%; display: block; }
   button { font: inherit; }
   
   ::-webkit-scrollbar { width: 10px; height: 10px; }
   ::-webkit-scrollbar-thumb {
     background: var(--scrollbar-thumb);
     border-radius: 999px;
   }
   ::-webkit-scrollbar-track { background: transparent; }
   
   /* =========================================================
      Skip link
      ========================================================= */
   
   .skip-link {
     position: absolute;
     left: -9999px;
     top: 0;
     padding: 8px 12px;
     background: var(--primary);
     color: var(--text-on-primary);
     border-radius: 0 0 8px 0;
     z-index: 100;
   }
   .skip-link:focus { left: 0; }
   
   /* =========================================================
      Header
      ========================================================= */
   
   .site-header {
     transition: box-shadow 200ms ease, background-color 200ms ease;
     background: var(--surface);
     color: var(--text);
   }
   .site-header:hover { box-shadow: var(--shadow-sm); }
   
   .brand-mark {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     background: var(--primary);
     color: var(--text-on-primary);
     border-radius: 10px;
   }
   [data-theme="dark"] .brand-mark {
     color: var(--brand-ink);
   }
   
   .icon-14 { font-size: 14px; }
   .icon-16 { font-size: 16px; }
   .icon-18 { font-size: 18px; }
   .icon-20 { font-size: 20px; }
   .icon-22 { font-size: 22px; }
   .icon-24 { font-size: 24px; }
   .icon-fill { font-variation-settings: 'FILL' 1; }
   
   .nav-link,
   .nav-pill {
     display: inline-flex;
     align-items: center;
     padding: 6px 12px;
     font-size: 13px;
     font-weight: 600;
     color: var(--text-muted);
     border-radius: 999px;
     text-decoration: none;
     transition: background-color 160ms ease, color 160ms ease;
   }
   .nav-link:hover,
   .nav-pill:hover {
     background: var(--primary-soft);
     color: var(--primary);
   }
   .nav-pill-active {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   .nav-pill-active:hover {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .nav-pill-active {
     color: var(--brand-ink);
   }
   
   .icon-btn {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     color: var(--text-muted);
     background: transparent;
     border: 0;
     cursor: pointer;
     transition: background-color 160ms ease, color 160ms ease;
   }
   .icon-btn:hover {
     background: var(--primary-soft);
     color: var(--primary);
   }
   
   .cart-badge {
     position: absolute;
     top: 4px;
     right: 4px;
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     font-weight: 700;
     background: var(--accent);
     color: var(--text-on-accent);
     border-radius: 999px;
     border: 2px solid var(--surface);
   }
   
   .search-input {
     transition: border-color 160ms ease, background-color 160ms ease;
     background: var(--surface-subtle);
     color: var(--text);
     border: 1px solid transparent;
   }
   .search-input::placeholder { color: var(--text-faint); }
   .search-input:focus {
     outline: none;
     background: var(--surface);
     border-color: var(--border-strong);
   }
   
   /* =========================================================
      Buttons
      ========================================================= */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 10px 16px;
     font-size: 14px;
     font-weight: 600;
     border-radius: 12px;
     border: 0;
     cursor: pointer;
     text-decoration: none;
     transition: transform 120ms ease, background-color 160ms ease, color 160ms ease;
   }
   .btn:active { transform: scale(0.98); }
   .btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
   .btn-lg { padding: 14px 22px; font-size: 15px; }
   
   .btn-primary {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   .btn-primary:hover {
     background: var(--primary-hover);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .btn-primary,
   [data-theme="dark"] .btn-primary:hover {
     color: var(--brand-ink);
   }
   
   .btn-secondary {
     background: var(--accent);
     color: var(--text-on-accent);
   }
   .btn-secondary:hover {
     background: var(--accent-hover);
     color: var(--text-on-accent);
   }
   
   /* =========================================================
      Mobile menu
      ========================================================= */
   
   .mobile-menu {
     max-height: 0;
     overflow: hidden;
     transition: max-height 240ms ease;
     background: var(--surface);
     border-top: 1px solid var(--border);
   }
   .mobile-menu[data-open="true"] { max-height: 420px; }
   
   .mobile-link {
     display: block;
     padding: 12px 14px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 600;
     color: var(--text);
     text-decoration: none;
   }
   .mobile-link:hover {
     background: var(--primary-soft);
     color: var(--primary);
   }
   .mobile-link-cta {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   .mobile-link-cta:hover {
     background: var(--primary-hover);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .mobile-link-cta,
   [data-theme="dark"] .mobile-link-cta:hover {
     color: var(--brand-ink);
   }
   
   /* =========================================================
      Hero
      ========================================================= */
   
   .hero {
     position: relative;
     overflow: hidden;
     background: linear-gradient(
       180deg,
       var(--surface-alt) 0%,
       var(--surface) 100%
     );
   }
   
   .hero-glow {
     position: absolute;
     border-radius: 999px;
     filter: blur(64px);
     pointer-events: none;
   }
   .hero-glow-a {
     top: -80px;
     right: -80px;
     width: 320px;
     height: 320px;
     background: var(--hero-glow-a);
   }
   .hero-glow-b {
     bottom: -60px;
     left: 5%;
     width: 260px;
     height: 260px;
     background: var(--hero-glow-b);
   }
   
   .hero-title {
     font-size: clamp(28px, 6.4vw, 48px);
     line-height: 1.08;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--text);
     margin: 0 0 16px 0;
   }
   .hero-title-accent {
     display: block;
     color: var(--primary);
     text-decoration: underline;
     text-decoration-color: var(--border-strong);
     text-decoration-thickness: 2px;
     text-underline-offset: 4px;
   }
   [data-theme="dark"] .hero-title-accent { color: var(--accent); }
   
   .hero-lede {
     font-size: clamp(14px, 2.4vw, 16px);
     line-height: 1.55;
     color: var(--text-muted);
     max-width: 44rem;
     margin: 0 0 20px 0;
   }
   
   .hero-search {
     display: flex;
     flex-direction: column;
     gap: 0;
     background: var(--surface);
     border-radius: var(--radius);
     box-shadow: var(--shadow-md);
     padding: 6px;
     margin: 20px 0 0;
   }
   @media (min-width: 640px) {
     .hero-search { flex-direction: row; align-items: stretch; }
   }
   
   .chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 14px;
     background: var(--surface);
     color: var(--text);
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
     text-decoration: none;
     box-shadow: var(--shadow-sm);
     transition: background-color 160ms ease, color 160ms ease;
   }
   .chip:hover {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .chip:hover { color: var(--brand-ink); }
   
   .chip-accent {
     background: var(--accent-soft);
     color: var(--text-on-accent);
   }
   .chip-accent:hover {
     background: var(--accent);
     color: var(--text-on-accent);
   }
   
   .hero-stats {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
     margin: 24px 0 0;
     padding: 16px 0 0;
     border-top: 1px solid var(--border);
   }
   .stat dt {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-faint);
     text-transform: uppercase;
     letter-spacing: 0.06em;
   }
   .stat dd {
     margin: 4px 0 0;
     font-size: clamp(18px, 3vw, 22px);
     font-weight: 700;
     color: var(--text);
   }
   
   .hero-card {
     background: var(--surface);
     padding: 16px;
     border-radius: var(--radius);
     box-shadow: var(--shadow-lg);
   }
   .hero-card-thumb {
     position: relative;
     height: 220px;
     border-radius: 12px;
     overflow: hidden;
     background: var(--brand-green-dark);
     display: flex;
     align-items: center;
     justify-content: center;
   }
   @media (min-width: 640px) {
     .hero-card-thumb { height: 260px; }
   }
   .hero-card-thumb-overlay {
     position: absolute;
     inset: auto 0 0 0;
     padding: 16px;
     background: linear-gradient(
       180deg,
       transparent 0%,
       var(--overlay-strong) 100%
     );
     color: #ffffff;
   }
   
   .badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 8px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     border-radius: 999px;
   }
   .badge-primary {
     background: var(--brand-yellow);
     color: var(--brand-ink);
   }
   .badge-secondary-fixed {
     background: var(--brand-blue-soft);
     color: var(--brand-blue-dark);
   }
   [data-theme="dark"] .badge-secondary-fixed {
     background: var(--brand-blue-dark);
     color: #ffffff;
   }
   
   /* =========================================================
      Health chip
      ========================================================= */
   
   .health-chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     font-weight: 600;
     color: var(--text-muted);
   }
   .health-dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: var(--text-faint);
   }
   .health-chip[data-state="ok"] .health-dot { background: var(--success); }
   .health-chip[data-state="down"] .health-dot { background: var(--danger); }
   .health-chip[data-state="ok"] .health-text { color: var(--success); }
   .health-chip[data-state="down"] .health-text { color: var(--danger); }
   
   /* =========================================================
      Sections
      ========================================================= */
   
   .section { padding: 40px 0; }
   @media (min-width: 768px) { .section { padding: 64px 0; } }
   .section-alt { background: var(--surface-subtle); }
   
   .section-head {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-bottom: 24px;
   }
   @media (min-width: 768px) {
     .section-head {
       flex-direction: row;
       align-items: flex-end;
       justify-content: space-between;
       margin-bottom: 32px;
     }
   }
   
   .eyebrow {
     display: inline-block;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--primary);
     margin: 0 0 6px;
   }
   [data-theme="dark"] .eyebrow { color: var(--accent); }
   .eyebrow-tertiary { color: var(--success); }
   .eyebrow-secondary { color: var(--brand-blue); }
   
   .section-title {
     font-size: clamp(22px, 4vw, 32px);
     line-height: 1.15;
     font-weight: 700;
     letter-spacing: -0.015em;
     color: var(--text);
     margin: 0 0 6px;
   }
   .section-lede {
     font-size: 14px;
     color: var(--text-muted);
     margin: 0;
     max-width: 44rem;
   }
   
   .link-arrow {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     color: var(--primary);
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     align-self: flex-start;
   }
   @media (min-width: 768px) { .link-arrow { align-self: center; } }
   .link-arrow:hover { color: var(--primary-hover); }
   [data-theme="dark"] .link-arrow { color: var(--accent); }
   [data-theme="dark"] .link-arrow:hover { color: var(--accent-hover); }
   
   /* =========================================================
      Card base
      ========================================================= */
   
   .card {
     background: var(--surface);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: box-shadow 200ms ease, transform 200ms ease;
   }
   .card:hover { box-shadow: var(--shadow-md); }
   
   /* =========================================================
      Category grid
      ========================================================= */
   
   .category-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 10px;
   }
   @media (min-width: 480px) {
     .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
   }
   @media (min-width: 768px) {
     .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
   }
   @media (min-width: 1024px) {
     .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
   }
   
   .category-tile {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     padding: 16px 8px;
     background: var(--surface);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
     text-decoration: none;
     color: var(--text);
     transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
   }
   .category-tile:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
     color: var(--primary);
   }
   [data-theme="dark"] .category-tile:hover { color: var(--accent); }
   
   .category-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: var(--primary-soft);
     color: var(--primary);
     font-size: 22px;
   }
   [data-theme="dark"] .category-icon {
     background: var(--accent-soft);
     color: var(--accent);
   }
   .category-tile:hover .category-icon {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .category-tile:hover .category-icon {
     background: var(--accent);
     color: var(--brand-ink);
   }
   
   .category-name {
     text-align: center;
     font-size: 12px;
     font-weight: 600;
     line-height: 1.3;
   }
   @media (min-width: 640px) { .category-name { font-size: 13px; } }
   
   /* =========================================================
      Product grid
      ========================================================= */
   
   .product-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
   }
   @media (min-width: 640px) {
     .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
   }
   @media (min-width: 768px) {
     .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   }
   @media (min-width: 1024px) {
     .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
   }
   
   .product-card { position: relative; }
   
   .product-thumb {
     position: relative;
     aspect-ratio: 1 / 1;
     background: var(--surface-subtle);
     overflow: hidden;
     display: block;
   }
   .product-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 400ms ease;
   }
   .product-card:hover .product-thumb img { transform: scale(1.04); }
   
   .product-thumb .badge-verified {
     position: absolute;
     top: 8px;
     left: 8px;
     background: color-mix(in srgb, var(--surface) 94%, transparent);
     color: var(--success);
     backdrop-filter: blur(4px);
   }
   .product-thumb .badge-category {
     position: absolute;
     top: 8px;
     right: 8px;
     background: var(--primary);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .product-thumb .badge-category {
     color: var(--brand-ink);
   }
   
   .product-body {
     padding: 10px 12px 12px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     flex: 1;
   }
   @media (min-width: 768px) { .product-body { padding: 12px 14px 14px; } }
   
   .product-shop,
   .product-market {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 11px;
     color: var(--text-faint);
     overflow: hidden;
   }
   .product-shop span.truncate,
   .product-market span.truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   
   .product-name {
     font-size: 14px;
     font-weight: 600;
     line-height: 1.3;
     color: var(--text);
     margin: 2px 0 4px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   @media (min-width: 768px) { .product-name { font-size: 15px; } }
   
   .product-rating {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
     color: var(--accent-hover);
   }
   .product-rating .rating-value { font-weight: 700; color: var(--text); }
   .product-rating .rating-count { color: var(--text-faint); }
   
   .product-footer {
     margin-top: auto;
     padding-top: 8px;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 8px;
   }
   .product-price { display: flex; flex-direction: column; min-width: 0; }
   .price-label { font-size: 10px; color: var(--text-faint); }
   .price-value {
     font-size: clamp(15px, 3vw, 18px);
     font-weight: 700;
     color: var(--primary);
     letter-spacing: -0.01em;
   }
   [data-theme="dark"] .price-value { color: var(--accent); }
   
   /* =========================================================
      Market grid
      ========================================================= */
   
   .market-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
   }
   @media (min-width: 640px) {
     .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (min-width: 1024px) {
     .market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
   }
   
   .market-thumb {
     position: relative;
     height: 160px;
     overflow: hidden;
     display: block;
     background: var(--brand-green-dark);
   }
   @media (min-width: 768px) { .market-thumb { height: 180px; } }
   .market-thumb img { width: 100%; height: 100%; object-fit: cover; }
   
   .market-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(
       180deg,
       transparent 30%,
       var(--overlay-strong) 100%
     );
   }
   .market-thumb .badge-count {
     position: absolute;
     bottom: 10px;
     left: 10px;
     background: var(--surface);
     color: var(--text);
   }
   
   .market-body {
     padding: 14px;
     display: flex;
     flex-direction: column;
     gap: 6px;
     flex: 1;
   }
   .market-name {
     font-size: 16px;
     font-weight: 700;
     color: var(--text);
     margin: 0;
   }
   .market-desc {
     font-size: 13px;
     color: var(--text-muted);
     margin: 0;
   }
   .market-body .link-arrow { margin-top: auto; padding-top: 4px; }
   
   /* =========================================================
      Shop grid
      ========================================================= */
   
   .shop-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
   }
   @media (min-width: 640px) {
     .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (min-width: 1024px) {
     .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
   }
   
   .shop-card { padding: 16px; }
   .shop-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 12px;
     gap: 8px;
   }
   .shop-avatar {
     width: 56px;
     height: 56px;
     border-radius: 14px;
     background: var(--primary-soft);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-weight: 700;
     overflow: hidden;
     flex-shrink: 0;
   }
   [data-theme="dark"] .shop-avatar {
     background: var(--accent-soft);
     color: var(--accent);
   }
   .shop-avatar img { width: 100%; height: 100%; object-fit: cover; }
   
   .shop-card .badge-verified {
     background: var(--brand-yellow);
     color: var(--brand-ink);
   }
   .shop-name {
     font-size: 15px;
     font-weight: 700;
     color: var(--text);
     margin: 0 0 2px;
   }
   .shop-market {
     font-size: 12px;
     color: var(--text-muted);
     margin: 0 0 8px;
   }
   .shop-rating {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
     color: var(--accent-hover);
     margin-bottom: 8px;
   }
   .shop-rating .rating-value { font-weight: 700; color: var(--text); }
   .shop-rating .rating-count { color: var(--text-faint); }
   .shop-footer { margin-top: auto; padding-top: 12px; }
   
   /* =========================================================
      Steps
      ========================================================= */
   
   .step {
     background: var(--surface);
     border-radius: var(--radius);
     padding: 20px;
     box-shadow: var(--shadow-sm);
     list-style: none;
   }
   .step-num {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: var(--primary);
     color: var(--text-on-primary);
     font-weight: 700;
     margin-bottom: 12px;
   }
   [data-theme="dark"] .step-num { color: var(--brand-ink); }
   .step-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--text);
     margin: 0 0 6px;
   }
   .step-desc {
     font-size: 13px;
     color: var(--text-muted);
     margin: 0;
   }
   
   /* =========================================================
      Trader CTA
      ========================================================= */
   
   .cta {
     position: relative;
     background: var(--cta-bg);
     color: var(--cta-ink);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
   }
   .cta-glow {
     position: absolute;
     top: -80px;
     right: -80px;
     width: 320px;
     height: 320px;
     background: var(--cta-glow);
     border-radius: 999px;
     filter: blur(56px);
     pointer-events: none;
   }
   .cta-inner {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     padding: 24px;
   }
   @media (min-width: 1024px) {
     .cta-inner {
       grid-template-columns: 2fr 1fr;
       gap: 32px;
       padding: 48px;
       align-items: center;
     }
   }
   .cta-copy { display: flex; flex-direction: column; gap: 12px; }
   .cta-title {
     font-size: clamp(24px, 4.5vw, 34px);
     font-weight: 700;
     letter-spacing: -0.015em;
     margin: 0;
     line-height: 1.15;
     color: var(--cta-ink);
   }
   .cta-lede {
     font-size: 14px;
     color: color-mix(in srgb, var(--cta-ink) 78%, transparent);
     margin: 0;
     max-width: 44rem;
   }
   .cta-actions {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 6px;
   }
   @media (min-width: 640px) {
     .cta-actions { flex-direction: row; align-items: center; }
   }
   .cta-card {
     background: color-mix(in srgb, var(--cta-ink) 8%, transparent);
     border: 1px solid color-mix(in srgb, var(--cta-ink) 14%, transparent);
     backdrop-filter: blur(6px);
     border-radius: var(--radius);
     padding: 20px;
     text-align: center;
   }
   
   /* =========================================================
      Empty / skeleton
      ========================================================= */
   
   .empty-state {
     grid-column: 1 / -1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     padding: 40px 16px;
     background: var(--surface);
     border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
     text-align: center;
   }
   .empty-icon { font-size: 40px; color: var(--text-faint); }
   .empty-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--text);
     margin: 0;
   }
   .empty-msg {
     font-size: 13px;
     color: var(--text-muted);
     margin: 0;
     max-width: 32rem;
   }
   
   .skeleton {
     background: var(--surface);
     box-shadow: var(--shadow-sm);
   }
   .skeleton-thumb {
     width: 100%;
     aspect-ratio: 1 / 1;
     background: linear-gradient(
       90deg,
       var(--surface-subtle) 0%,
       var(--surface-hover) 50%,
       var(--surface-subtle) 100%
     );
     background-size: 200% 100%;
     animation: shimmer 1.4s infinite linear;
   }
   .skeleton-body {
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   .skeleton-line {
     height: 12px;
     border-radius: 6px;
     background: linear-gradient(
       90deg,
       var(--surface-subtle) 0%,
       var(--surface-hover) 50%,
       var(--surface-subtle) 100%
     );
     background-size: 200% 100%;
     animation: shimmer 1.4s infinite linear;
   }
   .skeleton-line.w-90 { width: 90%; }
   .skeleton-line.w-60 { width: 60%; }
   .skeleton-line.w-40 { width: 40%; }
   .skeleton-category { aspect-ratio: 1 / 1; }
   .skeleton-market .skeleton-thumb { aspect-ratio: 16 / 9; }
   
   @keyframes shimmer {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
   }
   
   /* =========================================================
      Footer
      ========================================================= */
   
   .site-footer {
     background: var(--surface-subtle);
     color: var(--text);
     margin-top: 40px;
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     margin-bottom: 32px;
   }
   @media (min-width: 640px) {
     .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (min-width: 1024px) {
     .footer-grid {
       grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
       gap: 32px;
     }
   }
   
   .footer-lede {
     font-size: 13px;
     color: var(--text-muted);
     margin: 8px 0 0;
     max-width: 30rem;
   }
   .footer-head {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--text);
     margin: 0 0 10px;
   }
   .footer-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   .footer-list a {
     color: var(--text-muted);
     font-size: 13px;
     text-decoration: none;
   }
   .footer-list a:hover { color: var(--primary); }
   [data-theme="dark"] .footer-list a:hover { color: var(--accent); }
   
   .footer-legal {
     border-top: 1px solid var(--border);
     padding-top: 16px;
     display: flex;
     flex-direction: column;
     gap: 6px;
     font-size: 12px;
     color: var(--text-faint);
   }
   @media (min-width: 768px) {
     .footer-legal {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
     }
   }
   
   /* =========================================================
      Report floating button
      ========================================================= */
   
   .report-floating-btn {
     position: fixed;
     bottom: 16px;
     right: 16px;
     z-index: 100;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 10px 14px;
     background: var(--surface);
     color: var(--text);
     border: 1px solid var(--border);
     border-radius: 999px;
     box-shadow: 0 4px 12px rgba(13, 36, 22, 0.08);
     font-family: inherit;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
   }
   .report-floating-btn:hover {
     background: var(--surface-hover);
     box-shadow: 0 6px 16px rgba(13, 36, 22, 0.12);
   }
   .report-floating-btn:active { transform: scale(0.98); }
   .report-floating-btn .material-symbols-outlined {
     color: var(--danger);
     font-size: 18px;
   }
   [data-theme="dark"] .report-floating-btn {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
   }
   [data-theme="dark"] .report-floating-btn:hover {
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
   }
   
   /* =========================================================
      Focus rings
      ========================================================= */
   
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
     outline: 2px solid var(--primary);
     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 {
     outline-color: var(--accent);
   }
   
   /* =========================================================
      Print
      ========================================================= */
   
   @media print {
     .site-header,
     .site-footer,
     .hero-glow,
     .cta-glow,
     .report-floating-btn { display: none !important; }
   }