/* ============================================================
   IBCToteGuide.com — Shared Stylesheet v1.0
   1.  Design Tokens
   2.  Dark Mode
   3.  Reset & Base
   4.  Typography
   5.  Layout Utilities
   6.  Buttons
   7.  Top Bar
   8.  Header & Nav
   9.  Mobile Hamburger Menu
   10. Hero
   11. Trust Bar
   12. Section Headers
   13. Cards
   14. Callout Boxes
   15. Product / Affiliate Components
   16. Table of Contents
   17. FAQ Accordion
   18. Breadcrumbs
   19. Pagination
   20. CTA Band
   21. Footer
   22. Animations
   23. Responsive
============================================================ */

/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root {
  --navy:         #0d1b2a;
  --navy-mid:     #1a2e42;
  --navy-light:   #243d57;
  --steel:        #3a5a78;
  --slate:        #6b8fa8;
  --ice:          #c8dde9;
  --white:        #f5f8fa;
  --pure:         #ffffff;
  --border:       #dce8f0;
  --border-mid:   #c4d8e6;
  --amber:        #e8a020;
  --amber-dark:   #c47f08;
  --amber-light:  #f5c060;
  --amber-glow:   rgba(232,160,32,0.15);
  --amber-border: rgba(232,160,32,0.3);
  --green:        #27ae60;
  --green-bg:     #e8f9f0;
  --red:          #c0392b;
  --red-bg:       #fdf0ee;
  --blue:         #1a6494;
  --blue-bg:      #e8f4fd;
  --text-primary:   #0d1b2a;
  --text-secondary: #4a6275;
  --text-muted:     #7a9aaf;
  --text-inverse:   #f5f8fa;
  --bg-page:      #f5f8fa;
  --bg-surface:   #ffffff;
  --bg-raised:    #eef4f8;
  --bg-sunken:    #e4eef5;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-serif:   'Lora', serif;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px; --space-5:  20px; --space-6:  24px;
  --space-8:  32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;
  --radius-sm:   4px;  --radius-md:  8px;
  --radius-lg:   16px; --radius-xl:  24px;
  --radius-full: 9999px;
  --shadow-xs:    0 1px 3px rgba(13,27,42,0.08);
  --shadow-sm:    0 2px 8px rgba(13,27,42,0.12);
  --shadow-md:    0 6px 24px rgba(13,27,42,0.16);
  --shadow-lg:    0 16px 48px rgba(13,27,42,0.22);
  --shadow-amber: 0 4px 20px rgba(232,160,32,0.35);
  --max-width:       1200px;
  --max-width-prose: 720px;
  --gutter:          clamp(16px, 4vw, 40px);
  --header-height:   68px;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms; --dur-mid: 250ms; --dur-slow: 400ms;
  --z-header:  200; --z-drawer: 100; --z-overlay: 50;
}

/* ============================================================
   2. DARK MODE
============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:   #e0eaf2; --text-secondary: #8aacbf; --text-muted: #5a7a90;
    --bg-page:    #0a1520; --bg-surface: #0d1b2a;
    --bg-raised:  #1a2e42; --bg-sunken:  #111e2d;
    --border:     #1e3348; --border-mid: #243d57;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 6px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  }
}
[data-theme="dark"] {
  --text-primary:#e0eaf2; --text-secondary:#8aacbf; --text-muted:#5a7a90;
  --bg-page:#0a1520; --bg-surface:#0d1b2a;
  --bg-raised:#1a2e42; --bg-sunken:#111e2d;
  --border:#1e3348; --border-mid:#243d57;
}
[data-theme="light"] {
  --text-primary:#0d1b2a; --text-secondary:#4a6275; --text-muted:#7a9aaf;
  --bg-page:#f5f8fa; --bg-surface:#ffffff;
  --bg-raised:#eef4f8; --bg-sunken:#e4eef5;
  --border:#dce8f0; --border-mid:#c4d8e6;
  --pure:#ffffff; --white:#f5f8fa;
}

/* ============================================================
   3. RESET & BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-primary);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;transition:background var(--dur-mid),color var(--dur-mid)}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--radius-sm)}
button{cursor:pointer;border:none;background:none;font:inherit}
input,textarea,select{font:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* ============================================================
   4. TYPOGRAPHY
============================================================ */
.display-xl{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,72px);line-height:var(--leading-tight);text-transform:uppercase;letter-spacing:0.01em}
.display-lg{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4.5vw,56px);line-height:var(--leading-tight);text-transform:uppercase}
.display-md{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,40px);line-height:var(--leading-snug);text-transform:uppercase}
.display-sm{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,24px);line-height:var(--leading-snug);text-transform:uppercase;letter-spacing:0.02em}

.prose{font-family:var(--font-serif);font-size:var(--text-md);line-height:var(--leading-loose);color:var(--text-secondary);max-width:var(--max-width-prose)}
.prose h2{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.5vw,30px);text-transform:uppercase;color:var(--text-primary);margin:var(--space-12) 0 var(--space-4);padding-top:var(--space-4);border-top:2px solid var(--border);letter-spacing:0.01em}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,22px);text-transform:uppercase;color:var(--text-primary);margin:var(--space-8) 0 var(--space-3)}
.prose h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);color:var(--text-primary);margin:var(--space-6) 0 var(--space-2);text-transform:uppercase;letter-spacing:0.05em}
.prose p{margin-bottom:var(--space-5)}
.prose a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(26,100,148,0.3);text-underline-offset:3px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.prose a:hover{color:var(--amber-dark);text-decoration-color:var(--amber)}
.prose ul,.prose ol{margin:var(--space-5) 0;padding-left:var(--space-6)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:var(--space-2);line-height:var(--leading-normal)}
.prose strong{font-weight:700;color:var(--text-primary)}
.prose blockquote{border-left:4px solid var(--amber);padding:var(--space-4) var(--space-6);background:var(--bg-raised);border-radius:0 var(--radius-md) var(--radius-md) 0;margin:var(--space-8) 0;font-style:italic;color:var(--text-secondary)}
.prose table{margin:var(--space-8) 0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.prose th{background:var(--navy);color:var(--ice);font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:var(--space-3) var(--space-4);text-align:left}
.prose td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);border-bottom:1px solid var(--border);color:var(--text-secondary);background:var(--bg-surface)}
.prose tr:last-child td{border-bottom:none}
.prose tr:nth-child(even) td{background:var(--bg-raised)}

.eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber)}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-full)}
.tag-buyers{background:var(--blue-bg);color:var(--blue)}
.tag-howto{background:var(--green-bg);color:#1a6e3d}
.tag-industrial{background:#fdf3e8;color:#7a4a0a}
.tag-diy{background:#f3e8fd;color:#5a1a8a}
.tag-reference{background:var(--bg-raised);color:var(--steel);border:1px solid var(--border)}
.tag-recycling{background:#e8f5e9;color:#2e7d32}

/* ============================================================
   5. LAYOUT UTILITIES
============================================================ */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}
.container-prose{max-width:var(--max-width-prose);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--space-20) var(--gutter)}
.section-sm{padding:var(--space-12) var(--gutter)}
.section-dark{background:var(--navy)}
.section-raised{background:var(--bg-raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-white{background:var(--bg-surface)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
.grid-auto-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.content-sidebar{display:grid;grid-template-columns:1fr 300px;gap:var(--space-10);align-items:start}
.sidebar{position:sticky;top:calc(var(--header-height) + 20px);display:flex;flex-direction:column;gap:var(--space-5)}
.divider{border:none;border-top:1px solid var(--border);margin:var(--space-8) 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ============================================================
   6. BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.08em;padding:12px 24px;border-radius:var(--radius-sm);border:2px solid transparent;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);white-space:nowrap;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--amber);color:var(--navy);box-shadow:var(--shadow-amber)}
.btn-primary:hover{background:var(--amber-dark);box-shadow:0 6px 28px rgba(232,160,32,0.45)}
.btn-secondary{background:transparent;color:var(--ice);border-color:var(--steel)}
.btn-secondary:hover{border-color:var(--ice);color:var(--pure);background:rgba(255,255,255,0.05)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--border-mid)}
.btn-outline:hover{border-color:var(--navy);background:var(--navy);color:var(--pure)}
.btn-ghost{background:transparent;color:var(--amber-dark);border-color:transparent;padding-left:0;padding-right:0;border-bottom:2px solid var(--amber);border-radius:0}
.btn-ghost:hover{color:var(--navy);border-bottom-color:var(--navy);transform:none}
.btn-block{width:100%;justify-content:center}
.btn-sm{font-size:12px;padding:8px 16px}
.btn-lg{font-size:16px;padding:16px 36px}

/* ============================================================
   7. TOP BAR
============================================================ */
.top-bar{background:var(--navy);color:var(--ice);font-size:var(--text-xs);letter-spacing:0.04em;padding:6px var(--gutter);text-align:center;border-bottom:2px solid var(--amber);line-height:1.4}
.top-bar a{color:var(--amber);font-weight:600;transition:opacity var(--dur-fast)}
.top-bar a:hover{opacity:0.8;text-decoration:underline}

/* ============================================================
   8. HEADER & NAV
============================================================ */
.site-header{background:var(--navy-mid);position:sticky;top:0;z-index:var(--z-header);box-shadow:var(--shadow-md);border-bottom:3px solid var(--amber)}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-6)}
.logo{display:flex;flex-direction:column;line-height:1;flex-shrink:0;text-decoration:none}
.logo-main{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--pure);letter-spacing:0.02em;text-transform:uppercase;white-space:nowrap;line-height:1}
.logo-amber{color:var(--amber)}
.logo-guide{color:var(--ice);opacity:0.85}
.logo-tagline{font-size:10px;color:var(--slate);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;margin-top:2px}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{font-family:var(--font-body);font-weight:500;font-size:13.5px;color:var(--ice);padding:8px 14px;border-radius:var(--radius-sm);letter-spacing:0.02em;transition:background var(--dur-fast),color var(--dur-fast);white-space:nowrap;position:relative}
.main-nav a:hover{background:var(--navy-light);color:var(--pure)}
.main-nav a.active{color:var(--amber);font-weight:600}
.main-nav a.active::after{content:'';position:absolute;bottom:-3px;left:14px;right:14px;height:2px;background:var(--amber);border-radius:var(--radius-full)}
.nav-cta{background:var(--amber) !important;color:var(--navy) !important;font-weight:700 !important;margin-left:var(--space-2)}
.nav-cta:hover{background:var(--amber-dark) !important;color:var(--navy) !important}
.header-controls{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.theme-toggle{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--navy-light);border:1px solid var(--steel);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background var(--dur-fast);color:var(--ice)}
.theme-toggle:hover{background:var(--steel)}

/* ============================================================
   9. MOBILE HAMBURGER MENU
============================================================ */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;border-radius:var(--radius-sm);background:var(--navy-light);border:1px solid var(--steel);cursor:pointer;transition:background var(--dur-fast);flex-shrink:0}
.hamburger:hover{background:var(--steel)}
.hamburger-line{display:block;width:100%;height:2px;background:var(--ice);border-radius:var(--radius-full);transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid)}
.hamburger.is-open .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.is-open .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;background:var(--navy-mid);border-top:1px solid var(--navy-light);border-bottom:3px solid var(--amber);z-index:var(--z-drawer);padding:var(--space-4) var(--gutter) var(--space-6);box-shadow:var(--shadow-lg);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid)}
.mobile-nav.is-open{display:block;transform:translateY(0);opacity:1;pointer-events:all}
.mobile-nav-links{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-4)}
.mobile-nav-links a{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ice);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);transition:background var(--dur-fast),color var(--dur-fast)}
.mobile-nav-links a:hover{background:var(--navy-light);color:var(--pure)}
.mobile-nav-links a.active{color:var(--amber)}
.mobile-nav-divider{border:none;border-top:1px solid var(--navy-light);margin:var(--space-3) 0}
.mobile-nav-cta{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-2)}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,18,28,0.6);z-index:calc(var(--z-drawer) - 1);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-mid)}
.nav-overlay.is-open{display:block;opacity:1}

/* ============================================================
   10. HERO
============================================================ */
.hero{background:var(--navy);position:relative;overflow:hidden;padding:72px var(--gutter) 64px}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(58,90,120,0.15) 1px,transparent 1px),linear-gradient(90deg,rgba(58,90,120,0.15) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--amber),transparent 80%)}
.hero-inner{max-width:var(--max-width);margin:0 auto;position:relative;display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--amber-glow);border:1px solid var(--amber-border);border-radius:var(--radius-full);padding:4px 14px 4px 10px;font-size:var(--text-xs);font-weight:700;color:var(--amber);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--space-5)}
.hero-eyebrow::before{content:'';width:6px;height:6px;background:var(--amber);border-radius:50%;flex-shrink:0}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5vw,60px);line-height:var(--leading-tight);color:var(--pure);text-transform:uppercase;letter-spacing:0.01em;margin-bottom:var(--space-5)}
.hero h1 em{color:var(--amber);font-style:normal}
.hero-sub{font-family:var(--font-serif);font-size:17px;color:var(--ice);line-height:1.7;margin-bottom:var(--space-8);max-width:560px}
.hero-cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.hero-stats{background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-lg);position:relative}
.hero-stats::before{content:'QUICK FACTS';position:absolute;top:-11px;left:24px;background:var(--amber);color:var(--navy);font-family:var(--font-display);font-size:var(--text-xs);font-weight:800;letter-spacing:0.1em;padding:2px 12px;border-radius:var(--radius-full)}
.stat-item{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--navy-light)}
.stat-item:last-child{border-bottom:none}
.stat-icon{width:40px;height:40px;background:var(--amber-glow);border:1px solid var(--amber-border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.stat-label{font-size:var(--text-xs);color:var(--slate);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2px}
.stat-value{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--pure);line-height:1.2}
.page-hero{background:var(--navy);padding:48px var(--gutter) 40px;position:relative;overflow:hidden;border-bottom:3px solid var(--amber)}
.page-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(58,90,120,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(58,90,120,0.1) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}
.page-hero-inner{max-width:var(--max-width);margin:0 auto;position:relative}
.page-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4vw,48px);text-transform:uppercase;color:var(--pure);line-height:var(--leading-tight);letter-spacing:0.01em;margin:var(--space-4) 0 var(--space-3);max-width:800px}
.page-hero-meta{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-4)}
.page-hero-meta span{font-size:var(--text-sm);color:var(--slate);display:flex;align-items:center;gap:var(--space-2)}

/* ============================================================
   11. TRUST BAR
============================================================ */
.trust-bar{background:var(--navy-light);border-bottom:1px solid rgba(200,221,233,0.1);padding:12px var(--gutter)}
.trust-bar-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,56px);flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:var(--space-2);font-size:12.5px;font-weight:600;color:var(--ice);letter-spacing:0.03em;white-space:nowrap}

/* ============================================================
   12. SECTION HEADERS
============================================================ */
.section-header{margin-bottom:var(--space-10)}
.section-header.centered{text-align:center}
.section-header.centered .section-desc{margin-left:auto;margin-right:auto}
.section-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--space-2)}
.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.5vw,40px);text-transform:uppercase;color:var(--text-primary);line-height:var(--leading-tight);letter-spacing:0.01em}
.section-title.light{color:var(--pure)}
.section-desc{font-family:var(--font-serif);font-size:var(--text-base);color:var(--text-secondary);line-height:1.7;margin-top:var(--space-3);max-width:600px}
.section-desc.light{color:var(--ice)}

/* ============================================================
   13. CARDS
============================================================ */
.category-card{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-8);transition:border-color var(--dur-mid),box-shadow var(--dur-mid),transform var(--dur-mid);position:relative;overflow:hidden}
.category-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid) var(--ease-out)}
.category-card:hover{border-color:var(--amber);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.category-card:hover::before,.category-card.featured::before{transform:scaleX(1)}
.category-card.featured{background:var(--navy);border-color:var(--amber)}
.cat-icon{font-size:32px;margin-bottom:var(--space-4);display:block}
.cat-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:var(--amber);color:var(--navy);padding:2px 10px;border-radius:var(--radius-full);margin-bottom:var(--space-3)}
.cat-title{font-family:var(--font-display);font-size:20px;font-weight:700;text-transform:uppercase;color:var(--text-primary);letter-spacing:0.02em;margin-bottom:var(--space-2)}
.category-card.featured .cat-title{color:var(--pure)}
.cat-desc{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-5)}
.category-card.featured .cat-desc{color:var(--ice)}
.cat-links{display:flex;flex-direction:column;gap:var(--space-2)}
.cat-link{display:flex;align-items:center;gap:var(--space-2);font-size:13.5px;font-weight:500;color:var(--steel);padding:3px 0;transition:color var(--dur-fast)}
.cat-link::before{content:'→';font-size:12px;color:var(--amber);flex-shrink:0}
.cat-link:hover{color:var(--text-primary)}
.category-card.featured .cat-link{color:var(--ice)}
.category-card.featured .cat-link:hover{color:var(--pure)}

.guide-card{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-mid),transform var(--dur-mid),border-color var(--dur-mid);display:block}
.guide-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-mid)}
.guide-card-img{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,var(--steel) 100%);height:180px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.guide-card-img::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(58,90,120,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(58,90,120,0.2) 1px,transparent 1px);background-size:28px 28px}
.guide-card-icon{font-size:52px;position:relative;z-index:2}
.guide-card-body{padding:var(--space-6)}
.guide-card-meta{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}
.guide-read-time{font-size:12px;color:var(--text-muted);font-weight:500}
.guide-card-title{font-family:var(--font-display);font-size:19px;font-weight:700;text-transform:uppercase;color:var(--text-primary);line-height:var(--leading-snug);letter-spacing:0.01em;margin-bottom:var(--space-2)}
.guide-card-excerpt{font-family:var(--font-serif);font-size:13.5px;color:var(--text-secondary);line-height:1.65;margin-bottom:var(--space-5)}
.guide-card-sm{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);display:flex;gap:var(--space-4);align-items:flex-start;transition:border-color var(--dur-mid),box-shadow var(--dur-mid);text-decoration:none}
.guide-card-sm:hover{border-color:var(--amber);box-shadow:var(--shadow-sm)}
.guide-sm-num{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--border-mid);line-height:1;flex-shrink:0;width:36px}
.guide-sm-tag{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber-dark);margin-bottom:4px}
.guide-sm-title{font-family:var(--font-display);font-size:15px;font-weight:700;text-transform:uppercase;color:var(--text-primary);line-height:1.2;margin-bottom:4px}
.guide-sm-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5}

.compliance-card{background:var(--navy-mid);border:1px solid var(--navy-light);border-left:3px solid var(--amber);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);transition:border-color var(--dur-mid),background var(--dur-mid)}
.compliance-card:hover{background:var(--navy-light)}
.compliance-title{font-family:var(--font-display);font-size:16px;font-weight:700;text-transform:uppercase;color:var(--pure);letter-spacing:0.02em;margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-3)}
.compliance-title span{font-size:18px}
.compliance-desc{font-size:13.5px;color:var(--slate);line-height:1.5}
.compliance-cta{display:inline-block;margin-top:var(--space-3);font-size:var(--text-xs);font-weight:700;color:var(--amber);letter-spacing:0.05em;transition:color var(--dur-fast)}
.compliance-cta:hover{color:var(--amber-light)}

.diy-card{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6) var(--space-5);text-align:center;transition:border-color var(--dur-mid),box-shadow var(--dur-mid),transform var(--dur-mid);cursor:pointer;display:block;text-decoration:none}
.diy-card:hover{border-color:var(--steel);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.diy-emoji{font-size:36px;margin-bottom:var(--space-3);display:block}
.diy-title{font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;color:var(--text-primary);letter-spacing:0.04em;line-height:var(--leading-snug)}

.tier-card{background:var(--bg-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);border:1.5px solid var(--border)}
.tier-header{padding:var(--space-5) var(--space-6) var(--space-4)}
.tier-header.b2b{background:var(--navy)}
.tier-header.commercial{background:var(--steel)}
.tier-header.diy{background:#3a7a5a}
.tier-label{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:4px}
.tier-name{font-family:var(--font-display);font-size:22px;font-weight:800;text-transform:uppercase;color:var(--pure);letter-spacing:0.02em}
.tier-body{padding:var(--space-5) var(--space-6)}
.tier-links{display:flex;flex-direction:column;gap:var(--space-3)}
.tier-link{display:flex;align-items:center;gap:var(--space-3);font-size:13.5px;font-weight:500;color:var(--steel);padding:var(--space-2) var(--space-3);background:var(--bg-raised);border-radius:var(--radius-sm);border:1px solid var(--border);transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);text-decoration:none}
.tier-link:hover{background:var(--navy);color:var(--pure);border-color:var(--navy)}
.tier-link-icon{font-size:15px;flex-shrink:0}

.widget{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.widget-header{background:var(--navy);padding:var(--space-3) var(--space-5);font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--pure);border-bottom:2px solid var(--amber)}
.widget-body{padding:var(--space-5)}
.widget-links{display:flex;flex-direction:column;gap:var(--space-2)}
.widget-links a{font-size:13.5px;color:var(--text-secondary);padding:5px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-2);transition:color var(--dur-fast)}
.widget-links a:last-child{border-bottom:none}
.widget-links a::before{content:'→';color:var(--amber);font-size:11px;flex-shrink:0}
.widget-links a:hover{color:var(--amber-dark)}

/* ============================================================
   14. CALLOUT BOXES
============================================================ */
.callout{border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin:var(--space-8) 0;border-left:4px solid;display:flex;gap:var(--space-4);align-items:flex-start}
.callout-icon{font-size:22px;flex-shrink:0;margin-top:1px}
.callout-title{font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-1)}
.callout-body{font-size:14px;line-height:1.6}
.callout-tip{background:var(--blue-bg);border-color:var(--blue)}
.callout-tip .callout-title{color:var(--blue)}
.callout-tip .callout-body{color:#1a406a}
.callout-warning{background:#fff8e1;border-color:#f59f00}
.callout-warning .callout-title{color:#854d0e}
.callout-warning .callout-body{color:#713f12}
.callout-danger{background:var(--red-bg);border-color:var(--red)}
.callout-danger .callout-title{color:var(--red)}
.callout-danger .callout-body{color:#7f1d1d}
.callout-success{background:var(--green-bg);border-color:var(--green)}
.callout-success .callout-title{color:#166534}
.callout-success .callout-body{color:#14532d}

.pro-pick{background:var(--navy);border:2px solid var(--amber);border-radius:var(--radius-lg);padding:var(--space-8);margin:var(--space-10) 0;position:relative}
.pro-pick::before{content:'⭐ OUR TOP PICK';position:absolute;top:-13px;left:24px;background:var(--amber);color:var(--navy);font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:0.1em;padding:2px 14px;border-radius:var(--radius-full)}
.pro-pick-inner{display:flex;gap:var(--space-6);align-items:flex-start}
.pro-pick-img{width:120px;height:120px;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:52px;flex-shrink:0}
.pro-pick-name{font-family:var(--font-display);font-size:22px;font-weight:800;text-transform:uppercase;color:var(--pure);margin-bottom:var(--space-2);letter-spacing:0.01em}
.pro-pick-tagline{font-size:14px;color:var(--ice);line-height:1.5;margin-bottom:var(--space-4)}
.pro-pick-stars{color:var(--amber);font-size:18px;margin-bottom:var(--space-3)}
.pro-pick-cta{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ============================================================
   15. PRODUCT / AFFILIATE COMPONENTS
============================================================ */
.product-table-wrap{overflow-x:auto;margin:var(--space-8) 0;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.product-table{width:100%;min-width:560px;border-collapse:collapse}
.product-table thead th{background:var(--navy);color:var(--ice);font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:var(--space-3) var(--space-4);text-align:left}
.product-table tbody td{padding:var(--space-4);font-size:var(--text-sm);border-bottom:1px solid var(--border);color:var(--text-secondary);background:var(--bg-surface);vertical-align:middle}
.product-table tbody tr:last-child td{border-bottom:none}
.product-table tbody tr:nth-child(even) td{background:var(--bg-raised)}
.product-table tbody tr.top-pick td{background:#fffdf0;border-left:3px solid var(--amber)}
.product-name{font-family:var(--font-body);font-weight:600;color:var(--text-primary);font-size:var(--text-base)}
.product-name small{display:block;font-weight:400;font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.product-rating{color:var(--amber);font-size:13px;white-space:nowrap}
.product-check{color:var(--green);font-size:16px}
.product-cross{color:var(--red);font-size:16px}
.product-price{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-primary);white-space:nowrap}
.product-table .btn-primary{font-size:11px;padding:6px 14px}

.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-8) 0}
.pros-block,.cons-block{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.pros-block-header{background:var(--green);padding:var(--space-3) var(--space-5);font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--pure)}
.cons-block-header{background:var(--red);padding:var(--space-3) var(--space-5);font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--pure)}
.pros-cons-list{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.pros-cons-list li{font-size:14px;color:var(--text-secondary);display:flex;gap:var(--space-3);align-items:flex-start;line-height:var(--leading-normal)}
.pros-cons-list li::before{font-size:14px;flex-shrink:0}
.pros-block .pros-cons-list li::before{content:'✓';color:var(--green);font-weight:700}
.cons-block .pros-cons-list li::before{content:'✗';color:var(--red);font-weight:700}

/* ============================================================
   16. TABLE OF CONTENTS
============================================================ */
.toc{background:var(--bg-raised);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);margin:var(--space-8) 0}
.toc-title{font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--amber);display:flex;align-items:center;gap:var(--space-2)}
.toc-links{display:flex;flex-direction:column;gap:var(--space-1);counter-reset:toc-counter}
.toc-links a{display:flex;align-items:baseline;gap:var(--space-3);font-size:14px;color:var(--text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);transition:background var(--dur-fast),color var(--dur-fast);counter-increment:toc-counter}
.toc-links a::before{content:counter(toc-counter,decimal-leading-zero);font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--amber);min-width:24px;flex-shrink:0}
.toc-links a:hover{background:var(--bg-sunken);color:var(--text-primary)}
.toc-links a.active{background:var(--amber-glow);color:var(--amber-dark);font-weight:600}

/* ============================================================
   17. FAQ ACCORDION
============================================================ */
.faq-section{margin:var(--space-10) 0}
.faq-title{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);font-weight:800;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--space-6);letter-spacing:0.01em}
.faq-item{border:1.5px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-3);overflow:hidden;transition:border-color var(--dur-mid),box-shadow var(--dur-mid)}
.faq-item.is-open{border-color:var(--amber);box-shadow:var(--shadow-sm)}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);font-family:var(--font-body);font-size:var(--text-base);font-weight:600;color:var(--text-primary);cursor:pointer;background:var(--bg-surface);transition:background var(--dur-fast);border:none;width:100%;text-align:left}
.faq-question:hover{background:var(--bg-raised)}
.faq-item.is-open .faq-question{background:var(--bg-raised);color:var(--amber-dark)}
.faq-icon{font-size:20px;color:var(--amber);flex-shrink:0;transition:transform var(--dur-mid) var(--ease-out);line-height:1}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-answer{display:none;padding:var(--space-5) var(--space-6) var(--space-6);background:var(--bg-raised);font-family:var(--font-serif);font-size:15px;color:var(--text-secondary);line-height:1.7;border-top:1px solid var(--border)}
.faq-item.is-open .faq-answer{display:block}

/* ============================================================
   18. BREADCRUMBS
============================================================ */
.breadcrumbs{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-xs);font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.breadcrumbs a{color:var(--slate);transition:color var(--dur-fast)}
.breadcrumbs a:hover{color:var(--amber)}
.breadcrumbs .sep{color:var(--navy-light)}
.breadcrumbs .current{color:var(--ice)}

/* ============================================================
   19. PAGINATION
============================================================ */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-12) 0;flex-wrap:wrap}
.page-link{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-3);font-family:var(--font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary);background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);text-decoration:none}
.page-link:hover{background:var(--navy);color:var(--pure);border-color:var(--navy)}
.page-link.active{background:var(--amber);color:var(--navy);border-color:var(--amber)}
.page-link.disabled{opacity:0.4;pointer-events:none}

/* ============================================================
   20. CTA BAND
============================================================ */
.cta-band{background:linear-gradient(135deg,var(--amber) 0%,var(--amber-dark) 100%);padding:56px var(--gutter);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.08) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.cta-band-inner{max-width:700px;margin:0 auto;text-align:center;position:relative}
.cta-band h2{font-family:var(--font-display);font-size:clamp(26px,4vw,40px);font-weight:800;text-transform:uppercase;color:var(--navy);letter-spacing:0.01em;margin-bottom:var(--space-3)}
.cta-band p{font-family:var(--font-serif);font-size:var(--text-base);color:rgba(13,27,42,0.72);margin-bottom:var(--space-8);line-height:1.6}
.email-form{display:flex;gap:var(--space-3);max-width:480px;margin:0 auto}
.email-input{flex:1;padding:13px 18px;border:none;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;background:var(--pure);color:var(--navy);outline:none;box-shadow:var(--shadow-sm)}
.email-input::placeholder{color:#8aacbf}
.email-input:focus{box-shadow:0 0 0 3px rgba(255,255,255,0.4)}
.email-submit{background:var(--navy);color:var(--pure);font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;padding:13px 24px;border:none;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast)}
.email-submit:hover{background:var(--navy-mid)}

/* ============================================================
   21. FOOTER
============================================================ */
.site-footer{background:var(--navy);border-top:3px solid var(--amber);padding:60px var(--gutter) var(--space-8);color:var(--slate)}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-12)}
.footer-logo{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--pure);text-transform:uppercase;letter-spacing:0.02em;margin-bottom:var(--space-3)}
.footer-logo span{color:var(--amber)}
.footer-desc{font-size:13.5px;line-height:1.6;color:var(--slate);margin-bottom:var(--space-5)}
.footer-disclosure{font-size:var(--text-xs);color:#4a6275;line-height:1.5;padding:var(--space-3);background:rgba(255,255,255,0.03);border:1px solid var(--navy-light);border-radius:var(--radius-sm)}
.footer-disclosure strong{color:var(--slate)}
.footer-col-title{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--ice);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--navy-light)}
.footer-links{display:flex;flex-direction:column;gap:var(--space-2)}
.footer-links a{font-size:13.5px;color:var(--slate);transition:color var(--dur-fast)}
.footer-links a:hover{color:var(--amber)}
.footer-bottom{border-top:1px solid var(--navy-light);padding-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}
.footer-copy{font-size:12px;color:#4a6275}
.footer-bottom-links{display:flex;gap:var(--space-5);flex-wrap:wrap}
.footer-bottom-links a{font-size:12px;color:#4a6275;transition:color var(--dur-fast)}
.footer-bottom-links a:hover{color:var(--slate)}

/* ============================================================
   22. ANIMATIONS
============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.animate-fade-up{animation:fadeUp var(--dur-slow) var(--ease-out) both}
.animate-fade-in{animation:fadeIn var(--dur-slow) both}
.animate-slide-left{animation:slideInLeft var(--dur-slow) var(--ease-out) both}
.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}
.delay-3{animation-delay:0.3s}.delay-4{animation-delay:0.4s}

/* ============================================================
   23. RESPONSIVE
============================================================ */
@media(max-width:1024px){
  .content-sidebar{grid-template-columns:1fr}
  .sidebar{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .hero-inner{grid-template-columns:1fr}
  .hero-stats{display:none}
}
@media(max-width:768px){
  :root{--gutter:20px}
  .main-nav{display:none}
  .hamburger{display:flex}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .pro-pick-inner{flex-direction:column}
  .pro-pick-img{width:80px;height:80px;font-size:36px}
  .page-hero h1{font-size:clamp(24px,5vw,36px)}
}
@media(max-width:480px){
  :root{--gutter:16px}
  .hero-cta-row{flex-direction:column;align-items:flex-start}
  .hero-cta-row .btn{width:100%;justify-content:center}
  .email-form{flex-direction:column}
  .email-submit{width:100%}
  .trust-item{font-size:11px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .section{padding:56px var(--gutter)}
}
@media print{
  .site-header,.top-bar,.trust-bar,.cta-band,.site-footer,.sidebar{display:none}
  body{font-size:12pt}
  .prose{max-width:100%}
}

/* ============================================================
   JS SNIPPET — paste into <script> on each page

  // Hamburger menu
  const hamburger = document.querySelector('.hamburger');
  const mobileNav = document.querySelector('.mobile-nav');
  const overlay   = document.querySelector('.nav-overlay');
  hamburger?.addEventListener('click', () => {
    const open = hamburger.classList.toggle('is-open');
    mobileNav.classList.toggle('is-open', open);
    overlay.classList.toggle('is-open', open);
    document.body.style.overflow = open ? 'hidden' : '';
  });
  overlay?.addEventListener('click', () => {
    [hamburger, mobileNav, overlay].forEach(el => el.classList.remove('is-open'));
    document.body.style.overflow = '';
  });

  // Dark mode
  const themeToggle = document.querySelector('.theme-toggle');
  const saved = localStorage.getItem('theme');
  if (saved) document.documentElement.setAttribute('data-theme', saved);
  themeToggle?.addEventListener('click', () => {
    const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
    themeToggle.textContent = next === 'dark' ? '☀️' : '🌙';
  });

  // FAQ accordion
  document.querySelectorAll('.faq-question').forEach(btn => {
    btn.addEventListener('click', () => {
      const item = btn.closest('.faq-item');
      const wasOpen = item.classList.contains('is-open');
      document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('is-open'));
      if (!wasOpen) item.classList.add('is-open');
    });
  });
============================================================ */