/* ==========================================================================
   DTMW Design System
   Single source of truth for palette, surfaces, spacing and component skins.
   MUST be loaded LAST (after bootstrap.min.css, style.css and crumbs.css).

   Every foreground/background pair below is verified >= WCAG 2.1 AA
   (4.5:1 body text, 3:1 large text and UI boundaries) in BOTH themes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand — sampled from the DTMW wallet mark (tan #A9763C / brown #2F2210)
     and the hero art, then darkened until every pairing clears AA. -------- */
  --dtmw-primary:        #7A5320;  /* filled surface, 6.81:1 with white     */
  --dtmw-primary-hover:  #5E3F18;  /* 9.54:1 with white                     */
  --dtmw-on-primary:     #FFFFFF;
  --dtmw-primary-text:   #6B4718;  /* 7.10:1 on page, 8.14:1 on surface     */
  --dtmw-primary-subtle: #F0E3D0;
  --dtmw-primary-border: #C9A876;

  /* Commerce accent (Amazon / "Buy" call to action) ---------------------- */
  --dtmw-accent:         #FFB020;
  --dtmw-accent-hover:   #E89A08;
  --dtmw-accent-border:  #8A5E08;  /* keeps the CTA edge visible on cream   */
  --dtmw-on-accent:      #2B1D08;  /* 8.96:1 on accent                      */

  /* Surfaces ------------------------------------------------------------- */
  --dtmw-page:           #F3EDE3;
  --dtmw-surface:        #FFFDF9;
  --dtmw-surface-2:      #F7F1E7;
  --dtmw-border:         #DCD0BE;
  --dtmw-shadow:         0 .5rem 1.5rem rgba(43, 29, 8, .12);
  --dtmw-shadow-lg:      0 1rem 2.5rem rgba(43, 29, 8, .18);

  /* Text ----------------------------------------------------------------- */
  --dtmw-text:           #231A0F;  /* 14.71:1 on page  */
  --dtmw-text-secondary: #5A4A38;  /*  7.30:1 on page  */
  --dtmw-text-muted:     #63533F;  /*  6.35:1 on page  */

  /* Status --------------------------------------------------------------- */
  --dtmw-danger:         #A4231B;
  --dtmw-danger-subtle:  #F8E2DF;
  --dtmw-success:        #14663B;
  --dtmw-success-subtle: #DFF0E5;
  --dtmw-warning-text:   #7A5200;
  --dtmw-warning-subtle: #FBEECF;
  --dtmw-info:           #0B5E86;
  --dtmw-info-subtle:    #DEEDF5;

  /* Footer — intentionally constant in both themes ----------------------- */
  --dtmw-footer-bg:      #1C150E;
  --dtmw-footer-bg-2:    #100C08;
  --dtmw-footer-text:    #F0EAE1;  /* 15.1:1 */
  --dtmw-footer-link:    #E3DBD0;  /* 13.2:1 */
  --dtmw-footer-accent:  #E0AE72;  /*  9.0:1 */

  /* Hero band ------------------------------------------------------------ */
  --dtmw-hero-scrim-a:   #241A10;
  --dtmw-hero-scrim-b:   #12100C;

  /* Interaction ---------------------------------------------------------- */
  --dtmw-focus:          #7A5320;

  /* Layout --------------------------------------------------------------- */
  --dtmw-nav-h:          84px;
  --dtmw-radius:         .875rem;
  --dtmw-radius-sm:      .5rem;
  --dtmw-section-gap:    4rem;
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  --dtmw-primary:        #D9A15C;  /* 7.18:1 with the dark on-colour        */
  --dtmw-primary-hover:  #E5B378;
  --dtmw-on-primary:     #2B1D08;
  --dtmw-primary-text:   #E0AE72;  /* 9.29:1 on page, 8.50:1 on surface     */
  --dtmw-primary-subtle: #33261A;
  --dtmw-primary-border: #6A5334;

  --dtmw-accent:         #FFB020;
  --dtmw-accent-hover:   #FFC24D;
  --dtmw-accent-border:  #FFB020;
  --dtmw-on-accent:      #2B1D08;

  --dtmw-page:           #16120D;
  --dtmw-surface:        #211B14;
  --dtmw-surface-2:      #2B231A;
  --dtmw-border:         #463A2C;
  --dtmw-shadow:         0 .5rem 1.5rem rgba(0, 0, 0, .45);
  --dtmw-shadow-lg:      0 1rem 2.5rem rgba(0, 0, 0, .55);

  --dtmw-text:           #F0EAE1;
  --dtmw-text-secondary: #CBBFB0;
  --dtmw-text-muted:     #BCAF9E;

  --dtmw-danger:         #FF9E94;
  --dtmw-danger-subtle:  #3A1A16;
  --dtmw-success:        #68D394;
  --dtmw-success-subtle: #12301F;
  --dtmw-warning-text:   #F5C86A;
  --dtmw-warning-subtle: #33280C;
  --dtmw-info:           #8FCDEB;
  --dtmw-info-subtle:    #10242F;

  --dtmw-hero-scrim-a:   #241A10;
  --dtmw-hero-scrim-b:   #12100C;

  --dtmw-focus:          #E0AE72;
}

/* --------------------------------------------------------------------------
   2. BOOTSTRAP VARIABLE BRIDGE
   Re-point Bootstrap's own custom properties at the tokens above so that every
   built-in utility and component inherits the palette automatically.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --bs-primary:                  var(--dtmw-primary);
  --bs-primary-rgb:              122, 83, 32;
  --bs-secondary:                var(--dtmw-text-secondary);
  --bs-success:                  var(--dtmw-success);
  --bs-danger:                   var(--dtmw-danger);
  --bs-warning:                  var(--dtmw-accent);
  --bs-info:                     var(--dtmw-info);

  --bs-body-bg:                  var(--dtmw-surface);
  --bs-body-color:               var(--dtmw-text);
  --bs-emphasis-color:           var(--dtmw-text);
  --bs-heading-color:            var(--dtmw-text);
  --bs-secondary-color:          var(--dtmw-text-muted);
  --bs-tertiary-color:           var(--dtmw-text-muted);
  --bs-secondary-bg:             var(--dtmw-surface-2);
  --bs-tertiary-bg:              var(--dtmw-surface-2);
  --bs-border-color:             var(--dtmw-border);
  --bs-border-color-translucent: var(--dtmw-border);

  --bs-link-color:               var(--dtmw-primary-text);
  --bs-link-hover-color:         var(--dtmw-primary-hover);
  --bs-link-color-rgb:           107, 71, 24;

  --bs-primary-text-emphasis:    var(--dtmw-primary-text);
  --bs-primary-bg-subtle:        var(--dtmw-primary-subtle);
  --bs-primary-border-subtle:    var(--dtmw-primary-border);
  --bs-danger-text-emphasis:     var(--dtmw-danger);
  --bs-danger-bg-subtle:         var(--dtmw-danger-subtle);
  --bs-danger-border-subtle:     var(--dtmw-danger);
  --bs-success-text-emphasis:    var(--dtmw-success);
  --bs-success-bg-subtle:        var(--dtmw-success-subtle);
  --bs-success-border-subtle:    var(--dtmw-success);
  --bs-warning-text-emphasis:    var(--dtmw-warning-text);
  --bs-warning-bg-subtle:        var(--dtmw-warning-subtle);
  --bs-warning-border-subtle:    var(--dtmw-warning-text);
  --bs-info-text-emphasis:       var(--dtmw-info);
  --bs-info-bg-subtle:           var(--dtmw-info-subtle);
  --bs-info-border-subtle:       var(--dtmw-info);

  --bs-light:                    var(--dtmw-surface-2);
  --bs-dark:                     var(--dtmw-text);
  --bs-white:                    #FFFFFF;

  --bs-box-shadow:               var(--dtmw-shadow);
  --bs-box-shadow-lg:            var(--dtmw-shadow-lg);
  --bs-border-radius:            var(--dtmw-radius-sm);
}

[data-bs-theme="dark"] {
  --bs-primary-rgb:    217, 161, 92;
  --bs-link-color-rgb: 224, 174, 114;
}

/* --------------------------------------------------------------------------
   3. PAGE SHELL - identical on every route
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dtmw-nav-h) + 1rem); }

body,
body.page-bg {
  background-color: var(--dtmw-page);
  color: var(--dtmw-text);
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Every page renders a fixed-top navbar; reserve its height once, globally,
     instead of the per-page <br> stacks this replaced. */
  padding-top: var(--dtmw-nav-h);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--dtmw-text);
}

main { display: block; }

/* Content surface: the standard "panel" every page section sits on. */
.content-bg,
.surface {
  background-color: var(--dtmw-surface) !important;
  color: var(--dtmw-text);
  border: 1px solid var(--dtmw-border);
}

/* Standard vertical rhythm between top-level sections. */
.section-stack > section,
.section-stack > .section {
  margin-bottom: var(--dtmw-section-gap);
}

/* --------------------------------------------------------------------------
   4. FOCUS + SKIP LINK  (keyboard accessibility)
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dtmw-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: 3px solid var(--dtmw-focus);
  outline-offset: 2px;
  box-shadow: none;
  border-color: var(--dtmw-primary);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3000;
  padding: .75rem 1.25rem;
  background: var(--dtmw-primary);
  color: var(--dtmw-on-primary) !important;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform .15s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   5. TEXT UTILITY CORRECTIONS
   Bootstrap's colour utilities are !important, so these must be too. They map
   the utilities onto contrast-checked tokens for the current theme.
   -------------------------------------------------------------------------- */
.text-primary               { color: var(--dtmw-primary-text) !important; }
.text-secondary             { color: var(--dtmw-text-secondary) !important; }
.text-muted,
.text-body-secondary,
.text-body-tertiary         { color: var(--dtmw-text-muted) !important; }
.text-body,
.text-body-emphasis         { color: var(--dtmw-text) !important; }
.text-danger                { color: var(--dtmw-danger) !important; }
.text-success               { color: var(--dtmw-success) !important; }
.text-warning               { color: var(--dtmw-warning-text) !important; }
.text-info                  { color: var(--dtmw-info) !important; }

/* .bg-* helpers always carry a readable foreground. */
.bg-primary  { background-color: var(--dtmw-primary) !important; color: var(--dtmw-on-primary) !important; }
.bg-primary a, .bg-primary .h1, .bg-primary .h2, .bg-primary .h3,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4 { color: var(--dtmw-on-primary) !important; }
.bg-success  { background-color: var(--dtmw-success) !important; }
.bg-danger   { background-color: var(--dtmw-danger)  !important; }
.bg-warning  { background-color: var(--dtmw-accent)  !important; color: var(--dtmw-on-accent) !important; }
.bg-light    { background-color: var(--dtmw-surface-2) !important; color: var(--dtmw-text) !important; }
.bg-white    { background-color: var(--dtmw-surface) !important; color: var(--dtmw-text) !important; }
.bg-body,
.bg-body-tertiary,
.bg-body-secondary { color: var(--dtmw-text); }

[data-bs-theme="light"] .bg-success,
:root .bg-success,
[data-bs-theme="light"] .bg-danger,
:root .bg-danger { color: #fff !important; }
[data-bs-theme="dark"] .bg-success,
[data-bs-theme="dark"] .bg-danger { color: #16120D !important; }

.badge.bg-success,
.badge.bg-danger,
.badge.bg-primary,
.badge.bg-warning { font-weight: 600; }

/* --------------------------------------------------------------------------
   6. BUTTONS
   Bootstrap hard-codes hex values inside .btn-*; style.css then overrode them
   with a pair that rendered ~1:1 on hover. Both are replaced here.
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: 'Poppins', system-ui, sans-serif;
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn.btn-primary,
.btn.btn.btn-primary {
  --bs-btn-color: var(--dtmw-on-primary);
  --bs-btn-bg: var(--dtmw-primary);
  --bs-btn-border-color: var(--dtmw-primary);
  --bs-btn-hover-color: var(--dtmw-on-primary);
  --bs-btn-hover-bg: var(--dtmw-primary-hover);
  --bs-btn-hover-border-color: var(--dtmw-primary-hover);
  --bs-btn-active-color: var(--dtmw-on-primary);
  --bs-btn-active-bg: var(--dtmw-primary-hover);
  --bs-btn-active-border-color: var(--dtmw-primary-hover);
  --bs-btn-disabled-color: var(--dtmw-on-primary);
  --bs-btn-disabled-bg: var(--dtmw-primary);
  --bs-btn-disabled-border-color: var(--dtmw-primary);
  background: var(--dtmw-primary) !important;
  color: var(--dtmw-on-primary) !important;
  border-color: var(--dtmw-primary) !important;
}
.btn.btn-primary:hover,
.btn.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.btn.btn-primary:active {
  background: var(--dtmw-primary-hover) !important;
  color: var(--dtmw-on-primary) !important;
  border-color: var(--dtmw-primary-hover) !important;
}

.btn.btn-secondary {
  --bs-btn-color: var(--dtmw-text);
  --bs-btn-bg: var(--dtmw-surface-2);
  --bs-btn-border-color: var(--dtmw-border);
  background: var(--dtmw-surface-2) !important;
  color: var(--dtmw-text) !important;
  border: 1px solid var(--dtmw-border) !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
  background: var(--dtmw-surface) !important;
  color: var(--dtmw-primary-text) !important;
  border-color: var(--dtmw-primary) !important;
}

/* Commerce CTA - the only amber in the system. */
.btn.btn-warning,
.btn.btn-warning.retailer-link,
.sideBarBtn {
  --bs-btn-color: var(--dtmw-on-accent);
  --bs-btn-bg: var(--dtmw-accent);
  --bs-btn-border-color: var(--dtmw-accent-border);
  background: var(--dtmw-accent) !important;
  color: var(--dtmw-on-accent) !important;
  border: 1px solid var(--dtmw-accent-border) !important;
  font-weight: 700;
}
.btn.btn-warning:hover,
.btn.btn-warning:focus-visible,
.sideBarBtn:hover {
  background: var(--dtmw-accent-hover) !important;
  color: var(--dtmw-on-accent) !important;
}

.btn.btn-outline-primary {
  --bs-btn-color: var(--dtmw-primary-text);
  --bs-btn-border-color: var(--dtmw-primary);
  --bs-btn-hover-color: var(--dtmw-on-primary);
  --bs-btn-hover-bg: var(--dtmw-primary);
  --bs-btn-hover-border-color: var(--dtmw-primary);
  --bs-btn-active-color: var(--dtmw-on-primary);
  --bs-btn-active-bg: var(--dtmw-primary);
}
.btn.btn-outline-secondary {
  --bs-btn-color: var(--dtmw-text-secondary);
  --bs-btn-border-color: var(--dtmw-border);
  --bs-btn-hover-color: var(--dtmw-text);
  --bs-btn-hover-bg: var(--dtmw-surface-2);
  --bs-btn-hover-border-color: var(--dtmw-primary);
}
.btn.btn-danger {
  --bs-btn-bg: var(--dtmw-danger);
  --bs-btn-border-color: var(--dtmw-danger);
}
.btn-link { color: var(--dtmw-primary-text); }

/* Icon buttons keep a real hit target (>=44px) on touch. */
.btn-square, .btn-sm-square, .btn-md-square, .btn-lg-square { min-width: 44px; min-height: 44px; }

/* Sits above the reCAPTCHA badge, which also anchors bottom-right. */
.back-to-top {
  right: 24px; bottom: 92px; width: 48px; height: 48px;
  box-shadow: var(--dtmw-shadow);
}

/* --------------------------------------------------------------------------
   7. NAVBAR
   -------------------------------------------------------------------------- */
.navbar.fixed-top,
.nav-bar .navbar {
  background-color: var(--dtmw-surface) !important;
  border-bottom: 1px solid var(--dtmw-border);
  box-shadow: var(--dtmw-shadow);
}
.navbar-brand,
.navbar-brand .display-5 { color: var(--dtmw-text) !important; font-size: 1.75rem; }
.navbar-brand img { max-height: 48px; width: auto; }

.navbar-light .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link,
.sticky-top .navbar-light .navbar-nav .nav-link {
  color: var(--dtmw-text) !important;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  margin-right: 1rem;
  padding: 1.75rem 0;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.active {
  color: var(--dtmw-primary-text) !important;
}
.navbar-light .navbar-nav .nav-link:after,
.navbar-light .navbar-nav .nav-link::before,
.navbar .navbar-nav .nav-link:after,
.navbar .navbar-nav .nav-link::before { background: var(--dtmw-primary) !important; }

.navbar-toggler {
  border: 1px solid var(--dtmw-border) !important;
  color: var(--dtmw-text) !important;
}
.navbar .dropdown-menu,
.navbar .nav-item:hover .dropdown-menu {
  background: var(--dtmw-surface) !important;
  border: 1px solid var(--dtmw-border);
  box-shadow: var(--dtmw-shadow);
}
.dropdown-item { color: var(--dtmw-text); }
.dropdown .dropdown-menu a:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--dtmw-primary) !important;
  color: var(--dtmw-on-primary) !important;
}
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus { color: var(--dtmw-on-primary) !important; }

@media (max-width: 991.98px) {
  :root { --dtmw-nav-h: 80px; }
  .navbar-light .navbar-nav .nav-link,
  .navbar .navbar-nav .nav-link { padding: .625rem 0; margin-right: 0; }
  .navbar .navbar-collapse {
    background: var(--dtmw-surface) !important;
    border-top: 1px solid var(--dtmw-border);
    margin-top: .75rem;
    padding: .75rem 0;
    max-height: 75vh;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   8. HERO / BREADCRUMB BAND
   The old scrim was a 90%-grey wash - white copy on it measured 3.95:1.
   A dark brand scrim guarantees >= 11:1 whatever image sits behind it.
   -------------------------------------------------------------------------- */
.bg-breadcrumb,
.page-hero {
  /* A flat brand gradient rather than a photo: every stock hero in /img has
     baked-in typography that fought the page heading, and a gradient keeps the
     white-on-dark ratio identical on every route. */
  background-image:
    radial-gradient(120% 140% at 15% 0%, rgba(217, 161, 92, .22), transparent 55%),
    linear-gradient(135deg, var(--dtmw-hero-scrim-a), var(--dtmw-hero-scrim-b));
  background-color: #1C150E;
  padding: 3.5rem 0;
  color: #fff;
}
.bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb p,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero p { color: #fff !important; }
.bg-breadcrumb .display-3, .page-hero .display-3 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.bg-breadcrumb .breadcrumb, .page-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.85); margin-bottom: 0; }
.bg-breadcrumb .breadcrumb-item a, .page-hero .breadcrumb-item a { color: #fff; }
.bg-breadcrumb .breadcrumb-item.active, .page-hero .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.bg-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.75); }

/* Home carousel caption - same scrim treatment. */
.carousel-header .carousel-inner .carousel-item .carousel-caption {
  background: linear-gradient(rgba(20, 14, 8, .78), rgba(12, 9, 6, .86));
}
.carousel-header .carousel-inner .carousel-item .carousel-caption h1,
.carousel-header .carousel-inner .carousel-item .carousel-caption h2,
.carousel-header .carousel-inner .carousel-item .carousel-caption h4,
.carousel-header .carousel-inner .carousel-item .carousel-caption h5,
.carousel-header .carousel-inner .carousel-item .carousel-caption p { color: #fff !important; }
.carousel-header .carousel-inner .carousel-item .carousel-caption .display-1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
}

/* --------------------------------------------------------------------------
   9. SECTION TITLES
   -------------------------------------------------------------------------- */
.section-title .sub-style,
.sub-title { color: var(--dtmw-primary-text) !important; letter-spacing: .08em; font-weight: 600; }
.section-title .sub-style::before, .sub-title::before { border-color: var(--dtmw-primary) !important; }
.section-title .sub-style::after,  .sub-title::after  { border-color: var(--dtmw-accent) !important; }
.section-title p, .section-title .lead { color: var(--dtmw-text-secondary); }
.section-title .display-5 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.lead { color: var(--dtmw-text-secondary); }
.lead.fs-3 { font-size: 1.25rem !important; line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. CARDS, LISTS, TABLES, FORMS, MODALS
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--dtmw-surface);
  --bs-card-border-color: var(--dtmw-border);
  --bs-card-cap-bg: var(--dtmw-surface-2);
  color: var(--dtmw-text);
  overflow: hidden;
}
.card-title, .card-header h3, .card-header h4 { color: var(--dtmw-text); }
.card-text, .card-body { color: var(--dtmw-text); }
.card-footer { background: var(--dtmw-surface-2); border-top: 1px solid var(--dtmw-border); }
.card a:not(.btn) { color: var(--dtmw-primary-text); }
.card.border-primary { border-color: var(--dtmw-primary) !important; }

.list-group-item { background: var(--dtmw-surface); color: var(--dtmw-text); border-color: var(--dtmw-border); }
.list-group-item a { color: var(--dtmw-text); text-decoration: none; }
.list-group-item a:hover { color: var(--dtmw-primary-text); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dtmw-text);
  --bs-table-border-color: var(--dtmw-border);
  --bs-table-hover-bg: var(--dtmw-surface-2);
  --bs-table-hover-color: var(--dtmw-text);
  color: var(--dtmw-text);
}
.table > thead th { color: var(--dtmw-text); border-bottom: 2px solid var(--dtmw-border); }

.form-control, .form-select {
  background-color: var(--dtmw-surface);
  color: var(--dtmw-text);
  border-color: var(--dtmw-border);
}
.form-control::placeholder { color: var(--dtmw-text-muted); opacity: 1; }
.form-label, .form-floating > label { color: var(--dtmw-text-muted); }
.input-group-text { background: var(--dtmw-surface-2); color: var(--dtmw-text); border-color: var(--dtmw-border); }
.invalid-feedback { color: var(--dtmw-danger); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--dtmw-danger); }

.modal-content { background: var(--dtmw-surface); color: var(--dtmw-text); border-color: var(--dtmw-border); }
.modal-header, .modal-footer { border-color: var(--dtmw-border); }
.modal-title { color: var(--dtmw-text) !important; }
#searchModal .modal-content { background: var(--dtmw-surface); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.alert { border-width: 1px; }
.toast { background: var(--dtmw-surface); color: var(--dtmw-text); }

/* --------------------------------------------------------------------------
   11. FOOTER
   Previously: inline #1e1e2f with inherited near-black body text (1.06:1).
   -------------------------------------------------------------------------- */
.footer {
  background: var(--dtmw-footer-bg) !important;
  color: var(--dtmw-footer-text);
}
.footer, .footer p, .footer span, .footer li, .footer address { color: var(--dtmw-footer-text) !important; }
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5 { color: var(--dtmw-footer-accent) !important; }
.footer .footer-item a,
.footer a { color: var(--dtmw-footer-link) !important; text-decoration: none; line-height: 2; }
.footer .footer-item a:hover,
.footer a:hover, .footer a:focus-visible {
  color: var(--dtmw-footer-accent) !important;
  text-decoration: underline;
  letter-spacing: normal; /* the old hover shifted layout */
}
.footer .social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--dtmw-footer-text) !important;
}
.footer .social-link:hover, .footer .social-link:focus-visible {
  background: var(--dtmw-footer-accent);
  border-color: var(--dtmw-footer-accent);
  color: var(--dtmw-on-primary) !important;
}
.footer .form-control { background: #FFFDF9; color: #231A0F; border-color: transparent; }
.footer .form-control::placeholder { color: #63533F; }
.footer .error-message { color: #FF9E94; }

.copyright {
  background: var(--dtmw-footer-bg-2) !important;
  border-top: 1px solid rgba(255,255,255,.10);
}
.copyright, .copyright p, .copyright span { color: var(--dtmw-footer-text) !important; }
.copyright a { color: var(--dtmw-footer-text) !important; }
.copyright a:hover { color: var(--dtmw-footer-accent) !important; }

/* --------------------------------------------------------------------------
   12. PAGE-SPECIFIC COMPONENT SKINS (ported off hard-coded hex)
   -------------------------------------------------------------------------- */
.breadcrumb-pills .breadcrumb-item { background-color: var(--dtmw-surface-2); }
.breadcrumb-pills .breadcrumb-item a { color: var(--dtmw-primary-text); }
.breadcrumb-pills .breadcrumb-item + .breadcrumb-item::before { color: var(--dtmw-text-muted); }
.breadcrumb-pills .breadcrumb-item.active { background-color: var(--dtmw-primary); color: var(--dtmw-on-primary) !important; }

.social-icon { color: var(--dtmw-text-secondary); width: 44px; height: 44px; }
.social-icon:hover, .social-icon:focus-visible { background-color: var(--dtmw-surface-2); color: var(--dtmw-primary-text); }

.quick-reads { background: var(--dtmw-surface) !important; }
.quick-reads h3 a { color: var(--dtmw-text); }
.quick-reads h3 a:hover { color: var(--dtmw-primary-text); }
.quick-reads p { color: var(--dtmw-text-secondary); }
.related-articles a { color: var(--dtmw-text); }

.poll-section { background: var(--dtmw-surface-2) !important; border: 1px solid var(--dtmw-border); }
.poll-option { background: var(--dtmw-surface); color: var(--dtmw-text); border: 1px solid var(--dtmw-border); }
.poll-option:hover { background: var(--dtmw-primary-subtle); color: var(--dtmw-text); }
.btn-check:checked + .poll-option {
  background-color: var(--dtmw-primary) !important;
  border-color: var(--dtmw-primary) !important;
  color: var(--dtmw-on-primary) !important;
}

.jump-card { background: var(--dtmw-primary); color: var(--dtmw-on-primary); }
.jump-card:hover { box-shadow: var(--dtmw-shadow-lg); }

.error-message { color: var(--dtmw-danger); font-size: .95rem; min-height: 1.2em; }

.modal-header.branded { background-color: var(--dtmw-primary); color: var(--dtmw-on-primary); }
.modal-footer.branded { background-color: var(--dtmw-surface-2); border-top: 1px solid var(--dtmw-border); }
.modal-body.branded { background: var(--dtmw-primary); color: var(--dtmw-on-primary); }

.disclosure-notice {
  background-color: var(--dtmw-warning-subtle) !important;
  color: var(--dtmw-warning-text) !important;
  border: 2px solid var(--dtmw-warning-text) !important;
  outline: none !important;
  border-radius: var(--dtmw-radius-sm);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

/* Service ("Deal Categories") tiles */
.service .service-item .service-inner .service-title .service-content {
  background: var(--dtmw-primary);
}
.service .service-item .service-inner .service-title .service-content,
.service .service-item .service-inner .service-title .service-content h3,
.service .service-item .service-inner .service-title .service-content p,
.service .service-item .service-inner .service-title .service-content a {
  color: var(--dtmw-on-primary) !important;
}
.service .service-item .service-inner .service-title .service-content .btn.btn-primary {
  background: var(--dtmw-on-primary) !important;
  color: var(--dtmw-primary) !important;
  border-color: var(--dtmw-on-primary) !important;
}
/* Hover-only reveal is unreachable by keyboard/touch - also reveal on focus. */
.service .service-item:focus-within .service-inner .service-title .service-content { bottom: 0; opacity: 1; }
.service .service-item:focus-within .service-inner .service-title .service-title-name { opacity: 0; }

.features .feature-item { background: var(--dtmw-surface); }
.features .feature-item .feature-icon { background: var(--dtmw-primary-subtle); }
.features .feature-item i { color: var(--dtmw-primary-text) !important; }

/* Product gallery */
.main-product-image { background-color: var(--dtmw-surface-2); border-color: var(--dtmw-border); }
.thumbnail-gallery-vertical img { border: 2px solid transparent; opacity: .75; }
.thumbnail-gallery-vertical img:hover,
.thumbnail-gallery-vertical img:focus-visible { opacity: 1; }
.thumbnail-gallery-vertical img.active { opacity: 1; border-color: var(--dtmw-primary); }
.product-features li::before { content: '\2714'; color: var(--dtmw-success); font-weight: 700; }

/* Chat */
#chat-container { max-width: 820px; }
.chat-window {
  background: var(--dtmw-surface);
  border: 1px solid var(--dtmw-border) !important;
  border-radius: var(--dtmw-radius);
  font-size: 1rem !important;
  color: var(--dtmw-text);
}
.chat-input { background: var(--dtmw-surface); color: var(--dtmw-text); border-color: var(--dtmw-border); }
.chat-status { color: var(--dtmw-text-muted); font-size: .875rem; }
.message.user { background-color: var(--dtmw-primary); color: var(--dtmw-on-primary); }
.message.assistant { background-color: var(--dtmw-surface-2); color: var(--dtmw-text); }
#send-button { background: var(--dtmw-primary); color: var(--dtmw-on-primary); min-width: 44px; min-height: 44px; }
#form-container { border-top: 1px solid var(--dtmw-border); }

/* Admin tables / offcanvas */
.sideBarBtn { color: var(--dtmw-on-accent); }
.offcanvas { background: var(--dtmw-surface); color: var(--dtmw-text); }
.offcanvas.text-bg-dark { background: var(--dtmw-surface) !important; color: var(--dtmw-text) !important; }
.scrollable, .max-h-300 { border-radius: var(--dtmw-radius-sm); }

/* Home "Wallet Wire" block */
#section_blogs h2, #section_blogs p { color: inherit !important; }
#section_blogs .card p, #section_blogs .card h2, #section_blogs .card h3 { color: var(--dtmw-text) !important; }

/* --------------------------------------------------------------------------
   13. RESPONSIVE / OVERFLOW GUARDS
   -------------------------------------------------------------------------- */
img, video { max-width: 100%; height: auto; }
.card-img-top { object-fit: cover; }
.table-responsive { overflow-x: auto; }

/* Widths that were pinned with inline styles now collapse on small screens. */
.layout-wide { width: min(1400px, 92%); margin-inline: auto; }
.layout-narrow { width: min(720px, 92%); margin-inline: auto; }

@media (max-width: 767.98px) {
  .w-50, .w-75 { width: 100% !important; }
  .display-1 { font-size: 2.5rem; }
  .display-3 { font-size: 2rem; }
  .display-4 { font-size: 1.85rem; }
  .display-5 { font-size: 1.6rem; }
  .fs-3 { font-size: 1.15rem !important; }
  .fs-4 { font-size: 1.05rem !important; }
  .bg-breadcrumb, .page-hero { padding: 2.5rem 0; border-radius: 0; }
}

/* --------------------------------------------------------------------------
   14. MEDIA RATIOS
   Fixed pixel heights were previously set with inline `style` on every image;
   these classes give the same rhythm without inline styles or !important.
   -------------------------------------------------------------------------- */
.product-thumb      { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: var(--dtmw-surface-2); }
.product-thumb-tall { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; background: var(--dtmw-surface-2); }
.product-thumb-wide { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--dtmw-surface-2); }
.blog-thumb         { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--dtmw-surface-2); }
.blog-thumb-sm      { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--dtmw-surface-2); }
.product-item .rounded.overflow-hidden { height: auto; }

.list-group-item-action { color: var(--dtmw-text); }
.list-group-item-action:hover,
.list-group-item-action:focus { background: var(--dtmw-primary-subtle); color: var(--dtmw-text); }

.about-figure { background: var(--dtmw-surface-2); border: 1px solid var(--dtmw-border); }
.about-figure img { padding: 1.5rem; }

.flash-alert { position: sticky; top: 0; z-index: 1035; }
.toast-header { background: var(--dtmw-surface-2); color: var(--dtmw-text); }

/* --------------------------------------------------------------------------
   15. LOADING SPINNER FAIL-SAFE
   #spinner is a full-viewport white cover that main.js removes on load. If the
   jQuery CDN is slow or blocked the whole site is a blank page, so retire the
   cover from CSS as well.
   -------------------------------------------------------------------------- */
#spinner {
  background: var(--dtmw-page) !important;
  animation: dtmw-spinner-retire .3s linear 2.5s forwards;
}
@keyframes dtmw-spinner-retire { to { opacity: 0; visibility: hidden; } }

/* List-group links are navigation rows, not inline links — keep them on body
   colour so a rail reads as one block rather than alternating hues. */
.card .list-group-item-action,
.card a.list-group-item { color: var(--dtmw-text); }
.card .list-group-item-action:hover,
.card .list-group-item-action:focus { color: var(--dtmw-text); background: var(--dtmw-primary-subtle); }

/* The section-title flourish is drawn with absolutely-positioned pseudo
   elements that stick out ~100px each side. Retire it on narrow screens rather
   than relying on body overflow clipping. */
@media (max-width: 575.98px) {
  .section-title .sub-style::before,
  .section-title .sub-style::after,
  .sub-title::before,
  .sub-title::after { display: none; }
}

/* --------------------------------------------------------------------------
   16. CAROUSEL SIZING
   style.css pinned .carousel-header to 700px under 768px while the slides kept
   min-height:60vh, so on tall/narrow screens the slides overflowed the header
   and the next section painted on top of them.
   -------------------------------------------------------------------------- */
.carousel-header { height: auto !important; overflow: hidden; }
.carousel-header .carousel-inner .carousel-item { min-height: clamp(420px, 62vh, 620px); }
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next { width: 12%; }
.carousel-header .carousel-control-prev .carousel-control-prev-icon,
.carousel-header .carousel-control-next .carousel-control-next-icon {
  margin: 0 !important;
  width: 3rem; height: 3rem;
  background-color: rgba(18, 16, 12, .55);
  border-radius: 50%;
  background-size: 45% 45%;
}
.carousel-header .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-header .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(18, 16, 12, .85);
}

/* Below Bootstrap's first breakpoint .container is full-bleed; keep a gutter so
   the rounded panels still read as cards rather than full-width bands. */
@media (max-width: 575.98px) {
  .content-bg, .surface { margin-inline: .75rem; }
  .section-stack > section, .section-stack > .section { margin-bottom: 2.5rem; }
}