/* ============================================================
   DESIGN SYSTEM — 3D Creations & Innovations, LLC
   Visual Layer — Dark Theme · Blue · Orange · Metallic Silver
   Apply AFTER wireframe.css to transform grayscale → branded
   ============================================================

   HOW TO USE
   ----------
   1. Keep wireframe.css linked first (layout foundation).
   2. Link design-system.css second to apply visual styling.

   <link rel="stylesheet" href="wireframe.css" />
   <link rel="stylesheet" href="design-system.css" />

   The design system overrides only color, typography, shadow,
   border-radius, and surface values — never layout or spacing.
   ============================================================ */

/* ============================================================
   §1 — GOOGLE FONTS IMPORT
       Inter (body + UI) · Rajdhani (display headings)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

/* ============================================================
   §2 — DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     2A · COLOR PALETTE
  ---------------------------------------------------------- */

  /* Backgrounds */
  --ds-bg-primary:      #080C16;   /* Page base — deep space black */
  --ds-bg-secondary:    #0F1629;   /* Section alt — dark navy */
  --ds-bg-elevated:     #141C30;   /* Cards, modals — elevated surface */
  --ds-bg-inset:        #0B1020;   /* Input fields, sunken areas */
  --ds-bg-overlay:      rgba(8, 12, 22, 0.85); /* Overlay / backdrop */

  /* Accent — Electric Blue */
  --ds-blue-100:        #C7DEFF;
  --ds-blue-200:        #93BFFD;
  --ds-blue-400:        #3B82F6;   /* Interactive / links */
  --ds-blue-500:        #2563EB;   /* Primary CTA */
  --ds-blue-600:        #1D4ED8;   /* CTA hover */
  --ds-blue-glow:       rgba(37, 99, 235, 0.30); /* Focus / glow ring */

  /* Accent — Vivid Orange */
  --ds-orange-100:      #FFEDD5;
  --ds-orange-300:      #FDB26B;
  --ds-orange-400:      #FB923C;   /* Highlight / badge */
  --ds-orange-500:      #C2410C;   /* Secondary CTA */
  --ds-orange-600:      #9A3412;   /* CTA hover */
  --ds-orange-glow:     rgba(249, 115, 22, 0.25);

  /* Metallic Silver */
  --ds-silver-100:      #F1F5F9;
  --ds-silver-200:      #CBD5E1;
  --ds-silver-300:      #94A3B8;   /* Body text secondary */
  --ds-silver-400:      #64748B;   /* Muted / disabled */
  --ds-silver-500:      #475569;   /* Borders */
  --ds-silver-shimmer:  linear-gradient(
                          135deg,
                          #CBD5E1 0%,
                          #94A3B8 35%,
                          #E2E8F0 55%,
                          #94A3B8 75%,
                          #CBD5E1 100%
                        );

  /* Text */
  --ds-text-primary:    #F8FAFC;   /* Headlines, bold labels */
  --ds-text-secondary:  #94A3B8;   /* Body copy, captions */
  --ds-text-muted:      #64748B;   /* Placeholder, disabled */
  --ds-text-inverse:    #080C16;   /* Text on light backgrounds */
  --ds-text-accent:     #3B82F6;   /* Links, interactive text */
  --ds-text-highlight:  #FB923C;   /* Callout text, badges */

  /* Borders */
  --ds-border-subtle:   rgba(148, 163, 184, 0.12);  /* Very faint rule */
  --ds-border-default:  rgba(148, 163, 184, 0.20);  /* Card edges */
  --ds-border-strong:   rgba(148, 163, 184, 0.38);  /* Input focus off */
  --ds-border-active:   #2563EB;                     /* Focus ring */
  --ds-border-accent:   rgba(249, 115, 22, 0.50);   /* Orange trim */

  /* Status / Feedback */
  --ds-success:  #10B981;
  --ds-warning:  #F59E0B;
  --ds-error:    #EF4444;
  --ds-info:     #3B82F6;

  /* ----------------------------------------------------------
     2B · TYPOGRAPHY
  ---------------------------------------------------------- */
  --ds-font-display: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
  --ds-font-body:    'Inter',    'Segoe UI', Arial, sans-serif;
  --ds-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Scale — inherits from wireframe.css, extended here */
  --ds-leading-tight:  1.1;
  --ds-leading-snug:   1.3;
  --ds-leading-normal: 1.6;
  --ds-leading-loose:  1.8;

  /* Letter spacing */
  --ds-tracking-tight:  -0.02em;
  --ds-tracking-normal:  0;
  --ds-tracking-wide:    0.04em;
  --ds-tracking-wider:   0.10em;
  --ds-tracking-widest:  0.18em;

  /* ----------------------------------------------------------
     2C · ELEVATION / SHADOW
  ---------------------------------------------------------- */
  --ds-shadow-xs:  0 1px 2px rgba(0,0,0,0.40);
  --ds-shadow-sm:  0 2px 8px  rgba(0,0,0,0.50);
  --ds-shadow-md:  0 4px 20px rgba(0,0,0,0.55);
  --ds-shadow-lg:  0 8px 40px rgba(0,0,0,0.60);
  --ds-shadow-xl:  0 16px 64px rgba(0,0,0,0.65);

  /* Glow shadows (branded) */
  --ds-glow-blue:   0 0 24px rgba(37, 99, 235, 0.35),
                    0 0 48px rgba(37, 99, 235, 0.15);
  --ds-glow-orange: 0 0 24px rgba(249, 115, 22, 0.35),
                    0 0 48px rgba(249, 115, 22, 0.15);
  --ds-glow-silver: 0 0 16px rgba(203, 213, 225, 0.15);

  /* ----------------------------------------------------------
     2D · SHAPE / GEOMETRY
  ---------------------------------------------------------- */
  --ds-radius-xs:  2px;
  --ds-radius-sm:  4px;
  --ds-radius-md:  8px;
  --ds-radius-lg:  12px;
  --ds-radius-xl:  16px;
  --ds-radius-2xl: 24px;
  --ds-radius-pill: 9999px;

  /* ----------------------------------------------------------
     2E · MOTION
  ---------------------------------------------------------- */
  --ds-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ds-duration-fast:   120ms;
  --ds-duration-base:   200ms;
  --ds-duration-slow:   360ms;

  /* ----------------------------------------------------------
     2F · SURFACE GRADIENTS
  ---------------------------------------------------------- */
  --ds-gradient-hero:   linear-gradient(135deg, #080C16 0%, #0F1A35 60%, #0A1628 100%);
  --ds-gradient-card:   linear-gradient(180deg, #1A2240 0%, #141C30 100%);
  --ds-gradient-blue:   linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);
  --ds-gradient-orange: linear-gradient(135deg, #EA580C 0%, #F97316 60%, #FB923C 100%);
  --ds-gradient-dark:   linear-gradient(180deg, #0F1629 0%, #080C16 100%);
  --ds-gradient-shimmer:linear-gradient(90deg,
                          transparent 0%,
                          rgba(255,255,255,0.04) 50%,
                          transparent 100%);
}

/* ============================================================
   §3 — BASE OVERRIDES
       Applies dark background, fonts, and text colors globally
   ============================================================ */

html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--ds-bg-primary);
  color:            var(--ds-text-primary);
  font-family:      var(--ds-font-body);
  font-size:        1rem;
  line-height:      var(--ds-leading-normal);
}

/* ------ Typography overrides ------ */
h1, h2, h3 {
  font-family:    var(--ds-font-display);
  font-weight:    700;
  letter-spacing: var(--ds-tracking-tight);
  color:          var(--ds-text-primary);
  line-height:    var(--ds-leading-tight);
}
h4, h5, h6 {
  font-family: var(--ds-font-body);
  font-weight: 600;
  color:        var(--ds-text-primary);
  line-height:  var(--ds-leading-snug);
}
p {
  font-family: var(--ds-font-body);
  color:       var(--ds-text-secondary);
  line-height: var(--ds-leading-normal);
}
a {
  color:      var(--ds-text-accent);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
a:hover { color: var(--ds-blue-200); }

small { color: var(--ds-text-muted); }

/* Section label */
.section-label {
  font-family:     var(--ds-font-body);
  font-weight:     600;
  letter-spacing:  var(--ds-tracking-widest);
  color:           var(--ds-orange-400);
  text-transform:  uppercase;
  font-size:       0.70rem;
}

/* Section titles */
.section-title {
  font-family: var(--ds-font-display);
  color:        var(--ds-text-primary);
}

.section-subtitle { color: var(--ds-text-secondary); }

/* ============================================================
   §4 — GLOBAL HEADER
   ============================================================ */
.site-header {
  background:    rgba(8, 12, 22, 0.92);
  border-bottom: 1px solid var(--ds-border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--ds-border-subtle),
              0 4px 24px rgba(0,0,0,0.40);
}

.site-logo .logo-box {
  background:   var(--ds-gradient-blue);
  border:       none;
  border-radius:var(--ds-radius-sm);
  color:        #fff;
  font-family:  var(--ds-font-display);
  font-weight:  700;
  font-size:    0.6rem;
  letter-spacing: 0.05em;
  box-shadow:   var(--ds-glow-blue);
}

.site-logo .logo-text {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size:   1.05rem;
  color:       var(--ds-text-primary);
  letter-spacing: 0.01em;
}
.site-logo .logo-text span {
  font-family: var(--ds-font-body);
  font-size:   0.65rem;
  color:       var(--ds-silver-300);
  letter-spacing: var(--ds-tracking-wider);
  text-transform: uppercase;
}

.site-nav a {
  font-family:    var(--ds-font-body);
  font-size:      0.875rem;
  font-weight:    500;
  color:          var(--ds-silver-300);
  border-radius:  var(--ds-radius-sm);
  letter-spacing: var(--ds-tracking-normal);
  transition: color var(--ds-duration-fast) var(--ds-ease-out),
              background var(--ds-duration-fast) var(--ds-ease-out);
}
.site-nav a:hover {
  background: rgba(148, 163, 184, 0.08);
  color:      var(--ds-text-primary);
}
.site-nav a.active {
  color:      var(--ds-blue-400);
  background: rgba(37, 99, 235, 0.10);
  font-weight:600;
}

.nav-toggle span { background: var(--ds-silver-300); }

/* ============================================================
   §5 — BUTTONS
   ============================================================ */

/* Reset wireframe border-radius */
.btn {
  font-family:    var(--ds-font-body);
  font-weight:    600;
  letter-spacing: var(--ds-tracking-wide);
  border-radius:  var(--ds-radius-sm);
  transition:     background   var(--ds-duration-base) var(--ds-ease-out),
                  border-color var(--ds-duration-base) var(--ds-ease-out),
                  box-shadow   var(--ds-duration-base) var(--ds-ease-out),
                  color        var(--ds-duration-base) var(--ds-ease-out),
                  transform    var(--ds-duration-fast) var(--ds-ease-out);
}
.btn:active { transform: translateY(1px); }

/* ---- Primary — Blue ---- */
.btn-primary {
  background:   var(--ds-gradient-blue);
  color:        #ffffff;
  border:       none;
  box-shadow:   var(--ds-shadow-sm),
                0 0 0 0 var(--ds-blue-glow);
}
.btn-primary:hover {
  background:  var(--ds-blue-600);
  box-shadow:  var(--ds-glow-blue),
               var(--ds-shadow-md);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-blue-glow), var(--ds-shadow-md);
}

/* ---- Secondary — Dark outlined ---- */
.btn-secondary {
  background:   transparent;
  color:        var(--ds-silver-200);
  border:       1px solid var(--ds-border-strong);
}
.btn-secondary:hover {
  background:   rgba(148, 163, 184, 0.08);
  border-color: var(--ds-silver-300);
  color:        var(--ds-text-primary);
}

/* ---- Outline White (used on dark CTA sections) ---- */
.btn-outline-white {
  background:  transparent;
  color:       var(--ds-text-primary);
  border:      1px solid rgba(248, 250, 252, 0.30);
}
.btn-outline-white:hover {
  background:  rgba(248, 250, 252, 0.08);
  border-color:rgba(248, 250, 252, 0.60);
  color:       #fff;
}

/* ---- Orange accent button (optional utility class) ---- */
.btn-accent {
  background:   var(--ds-gradient-orange);
  color:        #fff;
  border:       none;
  box-shadow:   var(--ds-shadow-sm);
}
.btn-accent:hover {
  background:  var(--ds-orange-600);
  box-shadow:  var(--ds-glow-orange), var(--ds-shadow-md);
}

/* ---- Disabled state ---- */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:         0.38;
  pointer-events:  none;
  box-shadow:      none;
  filter:          grayscale(0.6);
}

/* ============================================================
   §6 — CARDS
   ============================================================ */

/* ---- Base card ---- */
.card {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  box-shadow:    var(--ds-shadow-sm);
  transition:    border-color var(--ds-duration-base) var(--ds-ease-out),
                 box-shadow   var(--ds-duration-base) var(--ds-ease-out),
                 transform    var(--ds-duration-base) var(--ds-ease-out);
}
.card:hover {
  border-color: var(--ds-border-strong);
  box-shadow:   var(--ds-shadow-md);
}

.card-title { color: var(--ds-text-primary); }
.card-text  { color: var(--ds-text-secondary); }

/* ---- Product card ---- */
.product-card {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  box-shadow:    var(--ds-shadow-sm);
  overflow:      hidden;
  transition:    border-color var(--ds-duration-base) var(--ds-ease-out),
                 box-shadow   var(--ds-duration-base) var(--ds-ease-out),
                 transform    var(--ds-duration-base) var(--ds-ease-out);
}
.product-card:hover {
  border-color: var(--ds-blue-500);
  box-shadow:   var(--ds-glow-blue), var(--ds-shadow-md);
  transform:    translateY(-6px);
}

/* Product card image placeholder tinted */
.product-card .img-placeholder {
  background: linear-gradient(180deg, #1A2240 0%, #0F1629 100%);
  border:     none;
  border-bottom: 1px solid var(--ds-border-subtle);
  color:      var(--ds-silver-400);
  font-size:  0.7rem;
  letter-spacing: var(--ds-tracking-wider);
  text-transform: uppercase;
}

.product-card-name { color: var(--ds-text-primary); }
.product-card-desc { color: var(--ds-text-secondary); }

/* ---- Category card ---- */
.category-card {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  transition:    border-color var(--ds-duration-base) var(--ds-ease-out),
                 box-shadow   var(--ds-duration-base) var(--ds-ease-out),
                 transform    var(--ds-duration-base) var(--ds-ease-out);
}
.category-card:hover {
  background:   var(--ds-bg-elevated);
  border-color: var(--ds-orange-500);
  box-shadow:   var(--ds-glow-orange);
  transform:    translateY(-2px);
}
.category-card-title { color: var(--ds-text-primary); }
.category-card-desc  { color: var(--ds-text-secondary); }
.category-card-link  {
  color:       var(--ds-orange-400);
  font-weight: 600;
}
.category-card:hover .category-card-link { color: var(--ds-orange-300); }

/* ---- Review card ---- */
.review-card {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  box-shadow:    var(--ds-shadow-sm);
  transition:    border-color var(--ds-duration-base) var(--ds-ease-out),
                 box-shadow   var(--ds-duration-base) var(--ds-ease-out);
}
.review-card:hover {
  border-color: var(--ds-border-strong);
  box-shadow:   var(--ds-shadow-md);
}

/* Stars — gold/amber fill */
.review-star {
  width:         16px;
  height:        16px;
  background:    var(--ds-warning);
  border-radius: 2px;
  box-shadow:    0 0 6px rgba(245, 158, 11, 0.40);
}

.review-text         { color: var(--ds-text-secondary); }
.review-author-name  { color: var(--ds-text-primary); }
.review-author-label { color: var(--ds-text-muted); }
.review-avatar {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
}

/* ---- Feature block ---- */
.feature-block {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
  transition:    border-color var(--ds-duration-base) var(--ds-ease-out),
                 box-shadow   var(--ds-duration-base) var(--ds-ease-out);
}
.feature-block:hover {
  border-color: var(--ds-border-default);
  box-shadow:   var(--ds-shadow-sm);
}
.feature-block-title { color: var(--ds-text-primary); }
.feature-block-text  { color: var(--ds-text-secondary); }

/* ---- Audience tile ---- */
.audience-tile {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg);
}
.audience-icon {
  background: var(--ds-bg-inset);
  border:     1px solid var(--ds-border-default);
  color:      var(--ds-silver-300);
}
.audience-title { color: var(--ds-text-primary); }
.audience-desc  { color: var(--ds-text-secondary); }

/* ============================================================
   §7 — SECTION BACKGROUNDS
   ============================================================ */

section {
  background: var(--ds-bg-primary);
}

section.section--gray {
  background: var(--ds-bg-secondary);
  border-top:    1px solid var(--ds-border-subtle);
  border-bottom: 1px solid var(--ds-border-subtle);
}

section.section--dark {
  background: var(--ds-bg-inset);
}

/* Divider */
.divider { background: var(--ds-border-subtle); }

/* ============================================================
   §8 — GLOBAL HERO (Homepage)
   ============================================================ */

/* The homepage hero section uses inline styles on the <section>
   element. Override the background via the first child section. */
main > section:first-child {
  background: var(--ds-gradient-hero) !important;
  position:   relative;
  overflow:   hidden;
}
main > section:first-child::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 70% 50%,
                rgba(37, 99, 235, 0.12) 0%,
                transparent 65%),
              radial-gradient(ellipse at 30% 80%,
                rgba(249, 115, 22, 0.06) 0%,
                transparent 55%);
  pointer-events: none;
}

/* Hero headings get extra scale on Rajdhani */
main > section:first-child h1 {
  font-size:      4rem;
  letter-spacing: -0.03em;
  line-height:    1.05;
  background:     linear-gradient(135deg,
                    var(--ds-text-primary) 0%,
                    var(--ds-silver-200)   100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero image placeholder */
main > section:first-child .img-placeholder {
  background:    linear-gradient(135deg, #1A2545 0%, #0F1629 100%);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-xl);
  color:         var(--ds-silver-400);
  box-shadow:    var(--ds-shadow-xl),
                 0 0 80px rgba(37, 99, 235, 0.10);
}

/* ============================================================
   §9 — TRUST STRIP
   ============================================================ */
.trust-strip {
  background:  var(--ds-bg-secondary);
  border-top:    1px solid var(--ds-border-subtle);
  border-bottom: 1px solid var(--ds-border-subtle);
}

.trust-item-icon {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
}

.trust-item      { border-right-color: var(--ds-border-subtle); }
.trust-item-text { color: var(--ds-text-primary); }
.trust-item-sub  { color: var(--ds-text-muted); }

/* ============================================================
   §10 — CTA SECTION
   ============================================================ */
.cta-section {
  background:  var(--ds-gradient-dark);
  border-top:  1px solid var(--ds-border-subtle);
  position:    relative;
  overflow:    hidden;
}
.cta-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 50% 100%,
                rgba(37, 99, 235, 0.15) 0%,
                transparent 60%);
  pointer-events: none;
}
.cta-section h2 { color: var(--ds-text-primary); }
.cta-section p  { color: var(--ds-text-secondary); }

/* ============================================================
   §11 — GLOBAL FOOTER
   ============================================================ */
.site-footer {
  background:  var(--ds-bg-secondary);
  border-top:  1px solid var(--ds-border-subtle);
}

.logo-box-footer {
  background:    var(--ds-gradient-blue);
  border-radius: var(--ds-radius-sm);
  color:         #fff;
  box-shadow:    var(--ds-glow-blue);
}

.footer-brand .brand-name    { color: var(--ds-text-primary); }
.footer-brand .brand-tagline { color: var(--ds-text-muted); }
.footer-brand p              { color: var(--ds-text-muted); }

.footer-col-title { color: var(--ds-silver-200); }
.footer-col ul li a {
  color:      var(--ds-text-muted);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.footer-col ul li a:hover { color: var(--ds-text-primary); }

.footer-contact-item      { color: var(--ds-text-muted); }
.footer-contact-item .contact-icon {
  background:    var(--ds-bg-inset);
  border-radius: var(--ds-radius-xs);
  border:        1px solid var(--ds-border-subtle);
}

.footer-social a {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  color:         var(--ds-silver-300);
  border-radius: var(--ds-radius-sm);
  transition:    background   var(--ds-duration-fast) var(--ds-ease-out),
                 border-color var(--ds-duration-fast) var(--ds-ease-out),
                 color        var(--ds-duration-fast) var(--ds-ease-out);
}
.footer-social a:hover {
  background:   var(--ds-blue-500);
  border-color: var(--ds-blue-500);
  color:        #fff;
  box-shadow:   var(--ds-glow-blue);
}

.footer-bottom { border-top-color: var(--ds-border-subtle); }
.footer-bottom p { color: var(--ds-text-muted); }

.footer-etsy-link {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  color:         var(--ds-silver-200);
  border-radius: var(--ds-radius-sm);
  transition:    background   var(--ds-duration-fast) var(--ds-ease-out),
                 border-color var(--ds-duration-fast) var(--ds-ease-out),
                 color        var(--ds-duration-fast) var(--ds-ease-out);
}
.footer-etsy-link:hover {
  background:   var(--ds-orange-500);
  border-color: var(--ds-orange-500);
  color:        #fff;
  box-shadow:   var(--ds-glow-orange);
}

/* ============================================================
   §12 — PAGE HERO (Inner Pages)
   ============================================================ */
.page-hero {
  background:    var(--ds-bg-secondary) !important;
  border-bottom: 1px solid var(--ds-border-subtle);
}

.page-hero h1 { color: var(--ds-text-primary); }
.page-hero p  { color: var(--ds-text-secondary); }

.breadcrumb     { color: var(--ds-text-muted); }
.breadcrumb a   { color: var(--ds-text-muted); }
.breadcrumb a:hover { color: var(--ds-text-primary); }
.breadcrumb span    { color: var(--ds-silver-500); }

/* ============================================================
   §13 — ICON & IMAGE PLACEHOLDERS
   ============================================================ */
.icon-placeholder {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  color:         var(--ds-silver-400);
  font-size:     0.65rem;
  letter-spacing:var(--ds-tracking-widest);
}

.img-placeholder {
  background: linear-gradient(160deg, #141C30 0%, #0B1020 100%);
  border:     1px solid var(--ds-border-default);
  color:      var(--ds-silver-400);
  font-size:  0.7rem;
  letter-spacing: var(--ds-tracking-wider);
  text-transform: uppercase;
}

/* ============================================================
   §14 — FORMS
   ============================================================ */
.form-label {
  color:       var(--ds-silver-200);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size:   0.8rem;
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}

.form-control {
  background:   var(--ds-bg-inset);
  border:       1px solid var(--ds-border-strong);
  border-radius:var(--ds-radius-sm);
  color:        var(--ds-text-primary);
  font-family:  var(--ds-font-body);
  font-size:    0.9375rem;
  transition:   border-color var(--ds-duration-fast) var(--ds-ease-out),
                box-shadow   var(--ds-duration-fast) var(--ds-ease-out);
}
.form-control::placeholder { color: var(--ds-text-muted); }
.form-control:focus {
  border-color: var(--ds-blue-500);
  box-shadow:   0 0 0 3px var(--ds-blue-glow);
  outline:      none;
}

.form-upload {
  background:    var(--ds-bg-inset);
  border:        2px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  color:         var(--ds-text-muted);
  transition:    border-color var(--ds-duration-fast) var(--ds-ease-out);
}
.form-upload:hover { border-color: var(--ds-blue-500); }

.form-note { color: var(--ds-text-muted); }

/* ============================================================
   §15 — STEP INDICATORS
   ============================================================ */
.step-number {
  background:    var(--ds-bg-inset);
  border:        2px solid var(--ds-border-strong);
  color:         var(--ds-silver-300);
  font-family:   var(--ds-font-display);
  font-weight:   700;
}

.step-title { color: var(--ds-text-primary); }
.step-text  { color: var(--ds-text-secondary); }

.process-step-num {
  background:    var(--ds-bg-inset);
  border:        2px solid var(--ds-blue-500);
  color:         var(--ds-blue-400);
  font-family:   var(--ds-font-display);
  font-weight:   700;
  box-shadow:    0 0 12px rgba(37, 99, 235, 0.25);
}

.process-step-title { color: var(--ds-text-primary); }
.process-step-desc  { color: var(--ds-text-muted); }

/* ============================================================
   §16 — PRODUCT DETAIL (Single Product Page)
   ============================================================ */
.product-title  { color: var(--ds-text-primary); }
.product-badge  {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  color:         var(--ds-silver-300);
  border-radius: var(--ds-radius-pill);
}

.feature-list li {
  border-bottom-color: var(--ds-border-subtle);
  color:               var(--ds-text-secondary);
}
.feature-list li::before {
  background: var(--ds-blue-500);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.35);
}

.compat-block {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
}
.compat-block h5 { color: var(--ds-text-primary); }
.compat-tag {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  color:         var(--ds-silver-300);
  border-radius: var(--ds-radius-pill);
}

.shipping-block {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  border-left:   3px solid var(--ds-blue-500);
}
.shipping-icon {
  background: var(--ds-bg-elevated);
  border:     1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
}
.shipping-text { color: var(--ds-text-primary); }

/* ============================================================
   §17 — ABOUT PAGE SPECIFICS
   ============================================================ */
.about-stat-block {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
}
.about-stat-num   { color: var(--ds-text-primary); }
.about-stat-label { color: var(--ds-text-muted); }

.commitment-item { border-bottom-color: var(--ds-border-subtle); }
.commitment-icon {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
}
.commitment-text h5 { color: var(--ds-text-primary); }
.commitment-text p  { color: var(--ds-text-secondary); }

/* ============================================================
   §18 — CONTACT PAGE SPECIFICS
   ============================================================ */
.contact-info-card {
  background:    var(--ds-bg-elevated);
  border:        1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
}
.contact-info-item {
  border-bottom-color: var(--ds-border-subtle);
}
.contact-info-icon {
  background:    var(--ds-bg-inset);
  border:        1px solid var(--ds-border-default);
  color:         var(--ds-silver-300);
}
.contact-info-label { color: var(--ds-text-muted); }
.contact-info-value { color: var(--ds-text-primary); }
.contact-info-note  { color: var(--ds-text-muted); }

/* ============================================================
   §19 — PRODUCT CATEGORY STICKY NAV (Products Page)
   ============================================================ */
/* Sticky jump-nav bar on products page */
[style*="position: sticky"] {
  background:    var(--ds-bg-secondary) !important;
  border-bottom: 1px solid var(--ds-border-subtle) !important;
}

/* ============================================================
   §20 — BADGE / TAG OVERRIDES
   ============================================================ */
/* Review category badge */
[style*="border-radius: 20px"],
[style*="border-radius:20px"] {
  background: rgba(37, 99, 235, 0.12) !important;
  color:      var(--ds-blue-200) !important;
  border:     1px solid rgba(37, 99, 235, 0.25) !important;
}

/* ============================================================
   §21 — SCROLLBAR (optional polish)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ds-bg-primary);
}
::-webkit-scrollbar-thumb {
  background:    var(--ds-silver-500);
  border-radius: var(--ds-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ds-silver-400);
}

/* ============================================================
   §22 — SELECTION
   ============================================================ */
::selection {
  background: var(--ds-blue-500);
  color:      #fff;
}

/* ============================================================
   §23 — FOCUS VISIBLE (accessibility)
   ============================================================ */
:focus-visible {
  outline:       2px solid var(--ds-blue-500);
  outline-offset:2px;
  border-radius: var(--ds-radius-xs);
}

/* ============================================================
   §23.5 — FACEBOOK LINK HIGHLIGHT
   ============================================================ */
.footer-facebook-highlight {
  background: #1877f2;
  color: #ffffff !important;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.footer-facebook-highlight:hover {
  background: #145ec9;
  transform: translateY(-1px);
}

/* ============================================================
   §24 — RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {

  /* Tighten hero heading on mobile */
  main > section:first-child h1 {
    font-size: 2rem;
  }

  /* Nav open state on dark bg */
  .site-nav.open {
    background:    var(--ds-bg-secondary) !important;
    border-bottom: 1px solid var(--ds-border-subtle) !important;
  }

  .site-nav.open a {
    border-radius: var(--ds-radius-sm);
  }

}