/* @import MUST be the first rule in the file — CSS spec. It previously sat ~line 385
   (after other rules) which meant browsers silently ignored it and the v8 fonts never
   loaded, falling back to Arial. Keep this at the very top. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

/* ==========================================================================
   Delaware Tactical brand skin  (2026-08-26)
   Loaded AFTER professional-fixes.min.css so these win the !important ties.
   Maps the inherited TheGunDock orange/navy theme to the approved Delaware
   palette from the design handoff BUILD_SPEC.json:
     olive accent  #4a571f   ink #101416   canvas #ffffff   surface #f5f5f2
     dark footer   #182326   utility bar #3b451a (deep olive)
   Scope: global color skin only. Section structure (Daily Feature, category /
   product rails) is staged separately for review against the comp.
   ========================================================================== */

:root {
  --primary-color: #4a571f !important;
  --primary-dark:  #3b451a !important;
  --olive:         #4a571f;
  --olive-dark:    #3b451a;
  --ink:           #101416;
  --footer-bg:     #182326;
}

/* ---- accent recolor: everything the theme painted orange -> olive ---- */
a:hover,
.main-nav .dropdown-menu a:hover,
.content-page a:not(.btn):not([class*="btn-"]),
.content-article a:not(.btn):not([class*="btn-"]),
.product-description a:not(.btn):not([class*="btn-"]),
.social-link:hover,
.breadcrumb a:hover,
.product-tab-btn:hover, .product-tab-btn.active,
.tab-link:hover, .tab-link.active { color: #4a571f !important; }

.product-tab-btn.active, .tab-link.active { border-bottom-color: #4a571f !important; }

/* buttons / CTAs */
.btn, button.btn, a.btn, .btn-primary, .btn-add-to-cart,
.hero-content .btn, .hero-slide .btn,
input[type="submit"], .search-bar button, .search-form-large button {
  background: #4a571f !important;
  border-color: #4a571f !important;
  color: #ffffff !important;
}
.btn:hover, a.btn:hover, .btn-primary:hover, .btn-add-to-cart:hover,
.hero-content .btn:hover, .search-bar button:hover { background: #3b451a !important; }
a.btn.btn-secondary, .btn-secondary { background-color: #f5f5f2 !important; color: #101416 !important; }

/* focus rings */
.form-control:focus, input:focus, textarea:focus, select:focus { border-color: #4a571f !important; }

/* ---- utility (announcement) bar: deep olive with white text ---- */
.header-top { background: #3b451a !important; color: #ffffff !important; }
.header-top a { color: #ffffff !important; }
.header-top a:hover { color: #d7dcc4 !important; }

/* ---- header: light canvas ---- */
.site-header { background: #ffffff !important; color: #101416 !important; }

/* ---- primary nav: light bar, dark text (reference shows white nav, not navy).
   Raised specificity (html body ...) to beat header.php's inline <style> gradient
   which loads after this file with equal specificity. ---- */
html body .main-nav {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e4e4df !important;
  box-shadow: none !important;
}
html body .main-nav a, html body .main-nav .nav-link, html body .main-nav li a { color: #101416 !important; }
html body .main-nav a:hover, html body .main-nav .nav-link:hover, html body .main-nav li a:hover {
  color: #4a571f !important; background: #f5f5f2 !important;
}
.main-nav .dropdown-menu { background: #ffffff !important; border: 1px solid #e4e4df !important; }
.main-nav .dropdown-menu a { color: #101416 !important; }
/* keep promotional nav items (Sale / Daily Deals) red per the comp */
.main-nav a.nav-sale, .main-nav a.nav-deals { color: #c0392b !important; }

/* ---- product price: dark ink per the comp (not the inherited red) ---- */
.product-card .product-price, .featured-product .product-price { color: #101416 !important; }

/* ---- footer: near-black per the comp ---- */
.site-footer, .footer, footer { background: #182326 !important; color: #cdd3d0 !important; }
.site-footer h2, .site-footer h3, .site-footer h4,
.footer h3, .footer h4, footer h3, footer h4,
.footer-heading, .footer-col h3 { color: #ffffff !important; }
.site-footer a, .footer a, footer a,
.site-footer p, .site-footer li, .footer p, .footer li { color: #cdd3d0 !important; }
.site-footer a:hover, .footer a:hover, footer a:hover { color: #8faf3a !important; }
.footer-bottom { border-top: 1px solid #1c2a30 !important; }
.footer-trust-row .trust-badge svg { color: #8faf3a !important; stroke: #8faf3a !important; }
.social-link:hover { color: #8faf3a !important; }

/* headings keep the condensed industrial character the comp uses */
h1, h2, h3, h4, h5, h6, .section-header h2, .product-title {
  font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif !important;
}

/* ==========================================================================
   Delaware Tactical — bespoke homepage sections (2026-08-26)
   Built to the approved design pack (BUILD_SPEC.json). Section order:
   primary trust -> daily feature -> category strip -> featured rail -> secondary trust.
   Palette: olive #4a571f / olive-dark #3b451a / ink #101416 / surface #f5f5f2 /
            dark #182326 / border #e4e4df.
   ========================================================================== */

.dt-trust, .dt-daily, .dt-cats, .dt-featured, .dt-trust2 { background:#ffffff; }
.dt-trust-inner, .dt-daily-inner, .dt-cats-inner, .dt-featured-inner, .dt-trust2-inner {
  max-width:1500px; margin:0 auto; padding-left:24px; padding-right:24px; box-sizing:border-box;
}

/* ---- primary trust strip (4) ---- */
.dt-trust { border-bottom:1px solid #ecece8; }
.dt-trust-inner { display:flex; align-items:center; gap:0; padding-top:20px; padding-bottom:20px; }
.dt-trust-item { flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:4px 18px; position:relative; }
.dt-trust-item + .dt-trust-item::before { content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:1px; height:40px; background:#e4e4df; }
.dt-trust-item svg { width:32px; height:32px; color:#101416; flex:0 0 auto; }
.dt-trust-item div { display:flex; flex-direction:column; line-height:1.25; }
.dt-trust-item strong { font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
  font-weight:700; letter-spacing:.4px; color:#101416; font-size:15px; }
.dt-trust-item span { color:#6b6f66; font-size:12.5px; }

/* ---- daily feature ---- */
.dt-daily { padding:22px 0 6px; }
.dt-daily-inner { display:flex; align-items:center; gap:26px; background:#ffffff;
  border:1px solid #e4e4df; border-radius:6px; padding:18px 22px; box-shadow:0 1px 2px rgba(16,20,22,.04); }
.dt-daily-flag { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.dt-daily-tag { display:inline-flex; align-items:center; gap:8px; background:#4a571f; color:#fff;
  font-family:'Roboto Condensed',Arial,sans-serif; font-weight:700; letter-spacing:.6px;
  font-size:14px; padding:9px 14px; border-radius:4px; white-space:nowrap; }
.dt-daily-tag svg { width:18px; height:18px; }
.dt-daily-sub { display:inline-flex; align-items:center; gap:6px; color:#6b6f66; font-size:12px;
  font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.dt-daily-media { flex:0 0 auto; display:block; }
.dt-daily-media img { width:130px; height:130px; object-fit:contain; }
.dt-daily-details { flex:1 1 auto; min-width:0; }
.dt-daily-details h3 { margin:0 0 8px; font-size:19px; line-height:1.25; }
.dt-daily-details h3 a { color:#101416 !important; }
.dt-daily-details h3 a:hover { color:#4a571f !important; }
.dt-daily-details ul { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:2px 18px; }
.dt-daily-details li { position:relative; padding-left:14px; color:#3a3f38; font-size:13px; line-height:1.6; }
.dt-daily-details li::before { content:"\2022"; position:absolute; left:0; color:#4a571f; }
.dt-daily-buy { flex:0 0 auto; text-align:left; min-width:150px; }
.dt-daily-price { font-family:'Roboto Condensed',Arial,sans-serif; font-weight:700;
  font-size:26px; color:#101416; line-height:1; }
.dt-daily-price-tbd { font-size:16px; color:#6b6f66; }
.dt-daily-reg { color:#8a8f85; font-size:12.5px; margin-top:3px; }
.dt-daily-save { color:#4a571f; font-weight:700; font-size:12.5px; margin-top:1px; }
.dt-daily-cta.btn { margin-top:10px; padding:9px 20px; font-size:13px; }
.dt-daily-timer { flex:0 0 auto; text-align:center; }
.dt-timer-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:#6b6f66; margin-bottom:6px; }
.dt-timer-clock { display:flex; align-items:center; gap:4px; justify-content:center; }
.dt-timer-clock span { background:#101416; color:#fff; font-family:'Roboto Condensed',Arial,sans-serif;
  font-weight:700; font-size:20px; min-width:38px; padding:7px 4px; border-radius:4px; text-align:center; }
.dt-timer-clock i { color:#101416; font-style:normal; font-weight:700; }
.dt-timer-units { display:flex; justify-content:center; gap:4px; margin-top:4px; }
.dt-timer-units em { font-style:normal; min-width:38px; font-size:9.5px; letter-spacing:.5px;
  color:#8a8f85; text-align:center; }

/* ---- category strip (7 photo tiles) ---- */
.dt-cats { padding:14px 0 4px; }
.dt-cats-inner { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.dt-cat-card { position:relative; display:block; height:104px; border-radius:5px; overflow:hidden;
  text-decoration:none; background:#101416; color:#fff; border:1px solid #1c2a30;
  transition:transform .16s ease, box-shadow .16s ease; }
.dt-cat-card::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:3px;
  background:#4a571f; opacity:.9; z-index:3; }
.dt-cat-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(12,23,27,.35); }
.dt-cat-card:hover .dt-cat-img { transform:scale(1.06); }
.dt-cat-img { position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:cover; transition:transform .35s ease; }
/* Scrim: dark where the label sits, clearing to the right so the product stays visible. */
/* Bottom-weighted, because the label sits bottom-left - NOT a left-to-right wash.
   The previous version ran rgba(8,12,14,.93) across the whole left half, which buried
   the product photography these tiles exist to show (BUILD_SPEC v2 asks for a
   "brightened tonal treatment"). Darkening only the bottom band keeps the white label
   at high contrast while the top two-thirds of the image stays readable. */
.dt-cat-scrim { position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(8,12,14,.86) 0%, rgba(8,12,14,.42) 34%, rgba(8,12,14,.08) 66%, rgba(8,12,14,0) 100%),
    linear-gradient(90deg,  rgba(8,12,14,.30) 0%, rgba(8,12,14,.08) 45%, rgba(8,12,14,0) 100%); }
.dt-cat-text { position:absolute; left:13px; bottom:11px; z-index:2; display:flex; flex-direction:column; }
.dt-cat-name { font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif; font-weight:700;
  letter-spacing:.5px; font-size:15px; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.75); }
.dt-cat-shop { font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#a6c94a;
  font-weight:700; margin-top:2px; text-shadow:0 1px 3px rgba(0,0,0,.75); }
.dt-cat-star { position:absolute; top:10px; right:11px; z-index:3; color:#a6c94a; font-size:16px;
  text-shadow:0 1px 3px rgba(0,0,0,.8); }

/* ---- featured products rail ---- */
.dt-featured { padding:26px 0 30px; }
.dt-featured-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.dt-featured-head h2 { margin:0; font-size:22px; letter-spacing:.4px; }
.dt-viewall { font-size:13px; font-weight:700; color:#4a571f !important; text-transform:uppercase;
  letter-spacing:.5px; white-space:nowrap; }
.dt-viewall:hover { color:#3b451a !important; }
.dt-rail-wrap { position:relative; }
.dt-rail { display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; padding:2px 2px 12px;
  scrollbar-width:thin; }
.dt-rail::-webkit-scrollbar { height:7px; }
.dt-rail::-webkit-scrollbar-thumb { background:#cfd3c6; border-radius:4px; }
.dt-rail-card { flex:0 0 224px; width:224px; margin:0 !important; }
.dt-rail-arrow { position:absolute; top:38%; transform:translateY(-50%); z-index:3; width:34px; height:34px;
  border-radius:50%; border:1px solid #d9dccf; background:#fff; color:#101416; font-size:20px; line-height:1;
  cursor:pointer; box-shadow:0 2px 8px rgba(16,20,22,.14); display:flex; align-items:center; justify-content:center; }
.dt-rail-arrow:hover { background:#4a571f; color:#fff; border-color:#4a571f; }
.dt-rail-prev { left:-8px; } .dt-rail-next { right:-8px; }
.dt-featured-empty { border:1px dashed #d9dccf; border-radius:6px; padding:34px 20px; text-align:center;
  color:#6b6f66; background:#f7f7f4; }
.dt-featured-empty a { color:#4a571f !important; font-weight:700; }

/* ---- secondary trust bar (5) ---- */
.dt-trust2 { background:#f5f5f2; border-top:1px solid #e4e4df; border-bottom:1px solid #e4e4df; }
.dt-trust2-inner { display:flex; align-items:center; gap:0; padding-top:16px; padding-bottom:16px; }
.dt-trust2-item { flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:11px; padding:2px 14px; }
.dt-trust2-item svg { width:24px; height:24px; color:#4a571f; flex:0 0 auto; }
.dt-trust2-item div { display:flex; flex-direction:column; line-height:1.2; }
.dt-trust2-item strong { font-family:'Roboto Condensed',Arial,sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.4px; color:#101416; }
.dt-trust2-item span { color:#6b6f66; font-size:11.5px; }

/* ---- responsive ---- */
@media (max-width:1024px){
  .dt-cats-inner { grid-template-columns:repeat(4,1fr); }
  .dt-daily-inner { flex-wrap:wrap; }
  .dt-daily-details ul { grid-template-columns:1fr 1fr; }
  .dt-daily-timer { margin-left:auto; }
}
@media (max-width:767px){
  .dt-trust-inner, .dt-trust2-inner { flex-wrap:wrap; }
  .dt-trust-item { flex:1 1 50%; justify-content:flex-start; padding:10px 12px; }
  .dt-trust-item + .dt-trust-item::before { display:none; }
  .dt-trust2-item { flex:1 1 50%; justify-content:flex-start; padding:8px 10px; }
  .dt-cats-inner { grid-template-columns:repeat(2,1fr); }
  .dt-daily-inner { gap:16px; }
  .dt-daily-flag { flex-direction:row; align-items:center; width:100%; }
  .dt-daily-media { margin:0 auto; }
  .dt-daily-details { flex:1 1 100%; }
  .dt-daily-details ul { grid-template-columns:1fr; }
  .dt-daily-buy { flex:1 1 100%; }
  .dt-daily-timer { width:100%; }
  .dt-rail-card { flex:0 0 62vw; width:62vw; max-width:260px; }
  .dt-rail-arrow { display:none; }
  .dt-featured-head h2 { font-size:19px; }
}

/* ==========================================================================
   Layout + footer corrections (2026-08-26)
   1. Dead white band above the footer: theme.min.css forces
      .main-content{min-height:60vh} and .site-footer{margin-top:4rem}. On this
      homepage the content is shorter than 60vh, so the page padded itself out
      with empty white. Both are neutralised here.
   2. Footer rebuilt to the approved comp: brand column + 4 link columns +
      signup + contact, evenly distributed rather than crowded to the left.
   ========================================================================== */

html body .main-content { min-height:0 !important; }
html body .site-footer, html body .footer, html body footer { margin-top:0 !important; }

/* ---- footer shell ---- */
.site-footer { padding:0 !important; }
.site-footer .footer-content { padding:38px 0 0; }
/* 1344px, not 1500: the approved footer container is "1344px centered" like every other
   section. The 1500px here predates the layout map being read. */
.site-footer .footer-content > .container { max-width:1344px !important; width:100%;
  padding-left:24px !important; padding-right:24px !important; box-sizing:border-box; }

/* Distribute the columns across the full width instead of stacking them left.
   Brand column is widest; link columns share the rest evenly. */
.site-footer .footer-row { display:grid !important;
  grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:34px; align-items:start; }
.site-footer .footer-col { min-width:0; }
.site-footer .footer-heading { font-size:13px !important; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; margin:0 0 14px; color:#ffffff !important; }
.site-footer .footer-subheading { font-size:12.5px !important; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; margin:18px 0 10px; color:#ffffff !important; }
.site-footer .footer-desc { font-size:13px; line-height:1.65; color:#aab0a8 !important;
  margin:0 0 6px; max-width:34ch; }
.site-footer .footer-links, .site-footer .contact-list { list-style:none; margin:0; padding:0; }
.site-footer .footer-links li { margin:0 0 7px; }
.site-footer .footer-links a { font-size:13px; color:#c3c8bf !important; text-decoration:none;
  line-height:1.5; }
.site-footer .footer-links a:hover { color:#a6c94a !important; }
.site-footer .contact-list li { font-size:13px; line-height:1.6; margin-bottom:9px; color:#c3c8bf !important; }

/* social row: left-aligned under the brand blurb, not a full-width centred band */
.site-footer .footer-social-row { border-top:1px solid rgba(255,255,255,.08); margin-top:26px; padding:18px 0 4px; }
.site-footer .footer-social-row .footer-heading { text-align:center !important; margin-bottom:14px !important; }
.site-footer .social-links { gap:22px !important; }
.site-footer .social-link { font-size:13px !important; }

/* trust badges */
.site-footer .footer-trust-row { gap:34px !important; padding:16px 0 !important;
  border-top:1px solid rgba(255,255,255,.08); }
.site-footer .footer-trust-row .trust-badge { font-size:13px !important; }

/* bottom bar */
.site-footer .footer-bottom { display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding:16px 0; margin-top:0; }
.site-footer .footer-bottom p { margin:0 0 4px; font-size:12.5px; color:#9aa197 !important; }
.site-footer .footer-bottom .legal-notice { font-size:11.5px; color:#7d857a !important; }

/* ---- footer responsive: the comp's 4 columns must not crush on tablet/mobile ---- */
@media (max-width:1024px){
  .site-footer .footer-row { grid-template-columns:1fr 1fr; gap:26px 30px; }
}
@media (max-width:767px){
  .site-footer .footer-content { padding-top:26px; }
  .site-footer .footer-row { grid-template-columns:1fr; gap:6px; }
  /* Collapse long link lists into tidy two-column blocks so the footer isn't a
     mile-long single file of links on a phone. */
  .site-footer .footer-col { border-top:1px solid rgba(255,255,255,.08); padding:16px 0 4px; }
  .site-footer .footer-col:first-child { border-top:0; padding-top:0; }
  .site-footer .footer-col .footer-links { columns:2; column-gap:18px; }
  .site-footer .footer-col .footer-links li { break-inside:avoid; margin-bottom:9px; }
  .site-footer .footer-desc { max-width:none; }
  .site-footer .footer-trust-row { gap:14px 22px !important; justify-content:flex-start !important; }
  .site-footer .footer-trust-row .trust-badge { font-size:12px !important; }
  .site-footer .social-links { justify-content:flex-start !important; gap:18px !important; }
  .site-footer .footer-social-row .footer-heading { text-align:left !important; }
  .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:12px; }
  .site-footer .footer-bottom-right .payment-methods { flex-wrap:wrap; }
}

/* ==========================================================================
   Accessibility pass (2026-08-27) — BUILD_SPEC v2 accessibility_floor: required
   ========================================================================== */

/* Visible keyboard focus on every interactive element this homepage adds.
   :focus-visible so a mouse click does not leave a ring behind, with a plain
   :focus fallback for browsers that lack it. Two-tone ring so it stays visible
   on both the white sections and the dark category tiles. */
.dt-cat-card:focus-visible,
.dt-rail-arrow:focus-visible,
.dt-viewall:focus-visible,
.dt-daily-cta:focus-visible,
.dt-daily-details h3 a:focus-visible,
.dt-featured-empty a:focus-visible,
.dt-rail-card a:focus-visible,
.dt-rail-card button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #4a571f;
  border-radius: 4px;
}
.dt-cat-card:focus,
.dt-rail-arrow:focus,
.dt-viewall:focus,
.dt-daily-cta:focus {
  outline: 3px solid #4a571f;
  outline-offset: 2px;
}
.dt-cat-card:focus:not(:focus-visible),
.dt-rail-arrow:focus:not(:focus-visible),
.dt-viewall:focus:not(:focus-visible),
.dt-daily-cta:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* WCAG 2.5.5 target size: the rail arrows were 34px. */
.dt-rail-arrow { width: 44px; height: 44px; font-size: 22px; }
.dt-rail-prev { left: -12px; } .dt-rail-next { right: -12px; }

/* Category tiles are the primary navigation on this page; give them a
   comfortable target on touch, where the arrows are hidden anyway. */
@media (max-width: 767px) {
  .dt-cat-card { height: 88px; }
  .dt-trust-item, .dt-trust2-item { min-height: 44px; }
}

/* Respect reduced-motion: the tiles scale/translate and the rail smooth-scrolls. */
@media (prefers-reduced-motion: reduce) {
  .dt-cat-card,
  .dt-cat-img,
  .dt-rail-arrow { transition: none !important; }
  .dt-cat-card:hover { transform: none !important; }
  .dt-cat-card:hover .dt-cat-img { transform: none !important; }
  .dt-rail { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Creation Station v8 tokens — Delaware Tactical (2026-08-27)
   Applied from BUILD_SPEC.json v4. Supersedes the v2 values above where they
   conflict; kept as a trailing block so the origin of every change is legible.
   ========================================================================== */


:root {
  /* semantic colour roles (v8) */
  --dt-canvas:      #F7F7F4;   /* page background   fg #101618 */
  --dt-surface:     #FFFFFF;   /* cards/header      fg #101618 */
  --dt-ink:         #101618;   /* primary text      fg-on #FFFFFF */
  --dt-olive:       #525B25;   /* primary CTA       fg #FFFFFF */
  --dt-olive-hover: #3B4219;
  --dt-olive-active:#303615;
  --dt-olive-dis:   #A8AC91;
  --dt-footer:      #0C1518;   /* footer            fg #FFFFFF */
  --dt-border:      #DADDD6;
  --dt-focus:       #B7C25B;   /* keyboard focus, pairs with #101618 */
  --dt-danger:      #C42026;   /* SALE emphasis ONLY */

  /* remap the inherited theme tokens onto the v8 roles */
  --primary-color:  #525B25 !important;
  --primary-dark:   #3B4219 !important;
}

/* ---- typography: Oswald headings / Inter body, per-breakpoint scale ---- */
html body { font-family: 'Inter', Arial, sans-serif; background: var(--dt-canvas); color: var(--dt-ink); }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .section-header h2, html body .product-title, html body .dt-cat-name,
html body .dt-featured-head h2, html body .stat-value {
  font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
}
/* desktop scale */
html body h1 { font-size: 54px; line-height: 1.02; }
html body h2 { font-size: 32px; line-height: 1.10; }
html body h3 { font-size: 22px; line-height: 1.20; }
html body, html body p, html body li { font-size: 16px; line-height: 1.50; }
html body small, html body .dt-trust-item span, html body .dt-cat-shop { font-size: 13px; line-height: 1.40; }

@media (max-width: 1024px) {   /* tablet */
  html body h1 { font-size: 44px; line-height: 1.04; }
  html body h2 { font-size: 28px; line-height: 1.12; }
}
@media (max-width: 767px) {    /* mobile */
  html body h1 { font-size: 32px; line-height: 1.08; }
  html body h2 { font-size: 24px; line-height: 1.15; }
  html body h3 { font-size: 19px; }
}

/* ---- colour application ---- */
.dt-trust, .dt-daily, .dt-cats, .dt-featured { background: var(--dt-canvas); }
.dt-daily-inner { background: var(--dt-surface); border-color: var(--dt-border); }
.dt-trust2 { background: var(--dt-surface); border-color: var(--dt-border); }
.dt-trust { border-bottom-color: var(--dt-border); }
.dt-daily-tag { background: var(--dt-olive); }
.dt-cat-card::after { background: var(--dt-olive); }

html body .btn, html body a.btn, html body .btn-primary, html body .btn-add-to-cart,
html body input[type="submit"], html body .search-bar button, html body .search-form-large button {
  background: var(--dt-olive) !important; border-color: var(--dt-olive) !important; color: #FFFFFF !important;
}
html body .btn:hover, html body a.btn:hover, html body .btn-primary:hover,
html body .btn-add-to-cart:hover, html body .search-bar button:hover { background: var(--dt-olive-hover) !important; }
html body .btn:active, html body a.btn:active, html body .btn-primary:active { background: var(--dt-olive-active) !important; }
html body .btn:disabled, html body .btn[disabled], html body .btn-primary:disabled {
  background: var(--dt-olive-dis) !important; border-color: var(--dt-olive-dis) !important; cursor: not-allowed;
}
.site-footer, .footer, footer { background: var(--dt-footer) !important; }
.header-top { background: var(--dt-olive-hover) !important; }
/* SALE red is emphasis-only per the token role — never a general accent. */
.main-nav a.nav-sale, .main-nav a.nav-deals, .price-sale { color: var(--dt-danger) !important; }

/* ---- focus ring: the v8 token, pairing #B7C25B with ink for the inner edge ---- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body .dt-cat-card:focus-visible,
html body .dt-rail-arrow:focus-visible {
  outline: 3px solid var(--dt-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(16,22,24,.55) !important;
  border-radius: 3px;
}

/* ==========================================================================
   Creation Station v10 — Delaware Tactical (2026-08-28)
   Classic Hero + Daily Feature. Appended last so it wins ties over the v8 block
   and the base theme. Fonts: Oswald headings / Inter body (loaded via the
   @import at the very top of this file). Olive #4a571f accent, ink #101416.
   ========================================================================== */

/* ---- fonts must actually win ----
   The base theme sets  body{font-family:'Roboto' !important}. The v8 rule was
   not !important, so Roboto won and Inter never applied. Force it here. */
html body,
html body p, html body li, html body a, html body span, html body div,
html body input, html body button, html body select, html body textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .dt-hero-title, html body .dt-cats-head, html body .dt-featured-head h2,
html body .dt-cat-name, html body .dt-daily-tag, html body .dt-daily-price,
html body .dt-fact-label, html body .product-title {
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
}

/* ============================ HERO ============================ */
.dt-hero {
  position: relative; overflow: hidden; background: #0c1214;
  min-height: 460px; display: flex; align-items: stretch;
}
.dt-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;  /* keep rifle/crates visible */
  z-index: 0;
}
/* left-weighted scrim so the HTML copy always has contrast over the art */
.dt-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,12,14,.92) 0%, rgba(8,12,14,.82) 32%, rgba(8,12,14,.35) 55%, rgba(8,12,14,.05) 74%, rgba(8,12,14,0) 100%);
}
.dt-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1300px;
  margin: 0 auto; padding: 44px 24px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.dt-hero-copy { flex: 1 1 auto; max-width: 620px; min-width: 0; }
.dt-hero-title {
  margin: 0 0 14px; color: #ffffff; font-weight: 700;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.03; letter-spacing: .5px;
  text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.dt-hero-accent { color: #a6c94a; }
.dt-hero-sub {
  margin: 0 0 22px; color: #e7e9e2; font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: .8px; text-transform: uppercase; font-weight: 600;
}
.dt-hero-cta.btn {
  display: inline-block; padding: 13px 34px; font-size: 15px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; border-radius: 6px;
}
/* right trust rail overlaid on the art on desktop */
.dt-hero-rail {
  flex: 0 0 auto; width: 300px; max-width: 40%;
  background: rgba(10,15,17,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 6px 18px; backdrop-filter: blur(2px);
}
.dt-fact { display: flex; align-items: center; gap: 13px; padding: 14px 0; }
.dt-hero-rail .dt-fact + .dt-fact { border-top: 1px solid rgba(255,255,255,.12); }
.dt-hero-rail .dt-fact svg { width: 26px; height: 26px; color: #a6c94a; flex: 0 0 auto; }
.dt-fact-body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dt-hero-rail .dt-fact-label {
  color: #ffffff; font-weight: 700; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
}
.dt-hero-rail .dt-fact-value { color: #d6d9cf; font-size: 13px; word-break: break-word; }
.dt-hero-rail .dt-fact-value a { color: #d6d9cf !important; text-decoration: none; }
.dt-hero-rail .dt-fact-value a:hover { color: #a6c94a !important; }

/* ============================ CATEGORY TEXT TILES ============================
   Overrides the old image-based tiles (pack shipped no per-tile art). */
.dt-cats { padding: 30px 0 8px; }
.dt-cats-head {
  max-width: 1300px; margin: 0 auto 16px; padding: 0 24px;
  font-size: clamp(20px, 2.4vw, 26px); color: #101416; letter-spacing: .4px; text-transform: uppercase;
}
.dt-cats-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
}
.dt-cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  height: 104px; padding: 14px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, #1c2a10 0%, #101416 100%);
  border: 1px solid #26301a; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dt-cat-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #4a571f;
}
.dt-cat-card:hover {
  transform: translateY(-3px); box-shadow: 0 8px 20px rgba(12,23,27,.35); border-color: #4a571f;
}
.dt-cat-name {
  color: #ffffff; font-weight: 700; font-size: 15px; line-height: 1.15;
  letter-spacing: .4px; text-transform: uppercase;
}
.dt-cat-shop {
  margin-top: 4px; color: #a6c94a; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}

/* ============================ LIVE-SECTION STATES ============================ */
.dt-state {
  border: 1px dashed #d9dccf; border-radius: 8px; padding: 30px 22px; text-align: center;
  background: #fafaf7; color: #3a3f38; flex: 1 1 auto;
}
.dt-state p { margin: 0 0 12px; font-size: 15px; }
.dt-state-error { border-color: #e6c9c9; background: #fdf6f6; }
.dt-state-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dt-state-link {
  display: inline-block; padding: 8px 16px; border: 1px solid #4a571f; border-radius: 6px;
  color: #4a571f !important; font-weight: 700; font-size: 13px; text-decoration: none;
}
.dt-state-link:hover { background: #4a571f; color: #ffffff !important; }

/* skeletons: reserve real height so there is no layout jump on load */
.dt-skel {
  position: relative; overflow: hidden; background: #e9eae4; border-radius: 6px;
}
.dt-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: dtShimmer 1.2s infinite;
}
@keyframes dtShimmer { 100% { transform: translateX(100%); } }
.dt-skel-img { width: 150px; height: 150px; flex: 0 0 auto; }
.dt-skel-line { height: 13px; margin: 0 0 9px; }
.dt-skel-btn { width: 130px; height: 40px; margin-top: 10px; border-radius: 6px; }
.dt-skel-card { display: flex; flex-direction: column; padding: 12px; }
.dt-skel-card .dt-skel-img { width: 100%; height: 150px; margin-bottom: 12px; }

/* ============================ TRUST FACTS STRIP ============================ */
.dt-trust2 { background: #f5f5f2; border-top: 1px solid #e4e4df; border-bottom: 1px solid #e4e4df; }
.dt-trust2-inner {
  max-width: 1300px; margin: 0 auto; padding: 16px 24px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.dt-fact--strip { flex: 1 1 200px; justify-content: flex-start; padding: 8px 12px; }
.dt-fact--strip svg { width: 24px; height: 24px; color: #4a571f; flex: 0 0 auto; }
.dt-fact--strip .dt-fact-label { color: #101416; font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.dt-fact--strip .dt-fact-value { color: #6b6f66; font-size: 12.5px; word-break: break-word; }
.dt-fact--strip .dt-fact-value a { color: #4a571f !important; text-decoration: none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .dt-cats-inner { grid-template-columns: repeat(4, 1fr); }
  .dt-hero-rail { width: 250px; }
}
@media (max-width: 767px) {
  .dt-hero { min-height: 0; }
  .dt-hero::before {
    background: linear-gradient(180deg, rgba(8,12,14,.72) 0%, rgba(8,12,14,.82) 60%, rgba(8,12,14,.92) 100%);
  }
  .dt-hero-bg { object-position: 68% center; }
  .dt-hero-inner { flex-direction: column; align-items: stretch; padding: 30px 18px; gap: 20px; }
  .dt-hero-copy { max-width: 100%; }
  .dt-hero-rail { width: 100%; max-width: 100%; box-sizing: border-box; }
  .dt-cats-inner { grid-template-columns: repeat(2, 1fr); }
  .dt-daily-inner { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .dt-cats-inner { grid-template-columns: repeat(2, 1fr); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dt-cat-card, .dt-hero-cta { transition: none !important; }
  .dt-cat-card:hover { transform: none !important; }
  .dt-skel::after { animation: none !important; }
}

/* =====================================================================
   DELAWARE TACTICAL — approved homepage (design job 20260902-122908_dropin_924bd)
   Mockup: MOST_UPDATED_Mock.png. Tokens copied from the job's design.tokens.css.

   VISUAL BUILD ONLY (Brad's standing rule 2026-09-02): presentation only, no live
   data. Backend wiring is attached later, on request.

   Tenant-scoped on purpose — this file matches brand-*.css so the Trinity release
   pipeline never ships or overwrites it, and the shared header/footer stay untouched.
   ===================================================================== */
:root {
  --dt-page: #f4f4f2;      --dt-card: #f7f7f5;      --dt-white: #fff;
  --dt-ink: #222426;       --dt-ink-soft: #2d2f31;  --dt-black: #0f1010;
  --dt-muted: #8c8c86;     --dt-muted-d: #545650;   --dt-border: #d4d4cf;
  --dt-orange: #b43a11;    --dt-orange-d: #8f2c0b;  --dt-tan: #b59a72;
  --dt-focus: #f07a28;
  --dt-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --dt-max: 1344px;
  --dt-gap: 18px;
}

/* ------------------------------------------------- header logo ---------
   Brad, 2026-09-02: "the logo in the top left should always be as big as it can be for
   brand awareness without looking weird."

   Delaware only. The column widths here are NOT invented -- they are the approved
   main_header geometry from the design job's LAYOUT_MAP.json:
       "height": "124px", "grid": "390px minmax(420px, 1fr) 228px", "gap": "36px"
   The first build used 220px because it never read that spec, which is the defect the
   2026-09-02 accuracy audit surfaced. Brad's "as big as it can be" instruction was already
   in the approved design.

   Height-led, not width-led: width-led sizing is what ballooned the square smokewagon logo
   and shrank the wide wordmarks. The real constraint was never on .logo -- theme.css pins
   `.header-main .container { grid-template-columns: 180px 1fr auto }`, so the mark was
   sized by a hardcoded grid track. (theme.css line 298 carries Brad's 2026-07-09 note that
   200px was "about 10% too big"; that was a WIDTH judgement on a wide wordmark, which is
   the difference between "bigger" and "too big".)

   A blanket version was tried across all seven tenants and backed out -- stretching the
   mark to the row is circular and dahlonega's header went 200px -> 353px. Per-tenant,
   measured, one at a time. */
.header-main .container {
  /* approved main_header: container 1344px, height 124px, gap 36px */
  max-width: 1344px !important;
  min-height: 124px;
  grid-template-columns: 390px minmax(420px, 1fr) 228px !important;
  gap: 36px !important;
}
.site-header .logo { width: auto !important; max-width: 390px; flex: 0 0 auto; }
.site-header .logo a { display: block; line-height: 0; }
.site-header .logo img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  /* 124px approved header height; 112px leaves 6px above and below. At the mark's native
     2.5:1 that renders ~280x112 inside the 390px column. */
  max-height: 112px;
  object-fit: contain;
}
@media (max-width: 1100px) {
  /* below the approved desktop authority the fixed tracks would overflow */
  .header-main .container { grid-template-columns: auto 1fr auto !important; gap: 20px !important; }
  .site-header .logo img { max-height: 76px; }
}

/* ------------------------------------------- approved chrome geometry ---
   LAYOUT_MAP gives the shared chrome real numbers, and the platform ships different ones:
   utility bar 38px against an approved 32px, primary nav 62px against 52px, and 1200px
   containers against an approved 1344px centred. These bring the bands to spec.

   Scope note: this is GEOMETRY conformance only. The approved design also shows a different
   navigation architecture and a different footer structure, and neither of those is fixed
   here or measured by the fidelity gate. Sizing the bands correctly does not make the chrome
   match the comp — that is still the open rebaseline decision.

   Tenant-scoped and release-excluded, so no other install is affected. */
.container { max-width: 1344px !important; }
.header-top {
  height: 32px; min-height: 32px; padding-top: 0 !important; padding-bottom: 0 !important;
}
.header-top .container { height: 32px; display: flex; align-items: center; justify-content: space-between; }
/* The nav and footer containers carry their own, more specific caps (1280px and 1500px),
   so the generic .container rule above never reached them. Matched specificity here. */
.main-nav { height: 52px; min-height: 52px; }
/* header.php carries an inline <style> setting `.main-nav .container { max-width:1280px
   !important }`. An inline block in the head loads after this stylesheet, so at equal
   specificity it wins even against !important. Raised to html body … to outrank it rather
   than editing shared chrome for one tenant. */
html body .main-nav .container {
  max-width: 1344px !important; height: 52px; min-height: 52px;
  display: flex; align-items: center;
}
.main-nav .container > * { align-self: center; }
/* 2026-10-16: the 52px band is the DESKTOP nav. Below 1024px its links are hidden (the
   hamburger takes over), so the fixed height left an empty white strip under the search bar
   on every phone and tablet page. Collapse it there. */
@media (max-width: 1023px) {
  .main-nav, html body .main-nav .container { height: auto; min-height: 0; }
}
.site-footer .container,
.footer-content .container { max-width: 1344px !important; }

/* page canvas */
html body { background: var(--dt-page) !important; }
.dt-wrap { max-width: var(--dt-max); margin: 0 auto; padding: 0 48px; }

/* ------------------------------------------------- mosaic ------------- */
/* Approved promo_mosaic height is 1098px. Its own rows sum to 1050 (278+278+270+170 + 3x18
   gap), so the spec's section height implies 48px of vertical padding. 24px top and bottom
   reconciles the two numbers exactly rather than leaving a 4% unexplained gap. */
/* Padding sits on the WRAP, not the section: the approved promo_mosaic is "1344px centered,
   height 1098px", and its own rows sum to 1050 (278+278+270+170 + 3x18 gap). The 48px
   difference is the section's vertical padding, so putting it on the 1344px element makes
   the measured box match the approved number exactly instead of leaving a 4% gap. */
.dt-mosaic { padding: 0; }
.dt-mosaic .dt-wrap { padding-top: 24px; padding-bottom: 24px; }
.dt-mosaic-top { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: var(--dt-gap); }
.dt-mosaic-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--dt-gap); min-width: 0; }
.dt-mosaic-row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--dt-gap); margin-top: var(--dt-gap); }

/* TILE FIT CONTRACT — see Creation Station "Cell-fit rulings".
   Rev 2026-09-02 after Brad's review: "button overlaps and the full image not being
   represented inside each cell."

   Root cause of both defects was one rule applied to nine differently-composed assets:
   a full-bleed `object-fit:cover` image with an absolutely-overlaid 62%-wide copy block.
   Measuring the art (C:\tmp\tile_subject_map.py, edge-density map) showed why that
   could not work:
     - copy-safe left zone per tile: 24% (optics) .. 57% (ammunition) — every one of
       them NARROWER than the 62% copy block, so the CTA always landed on the product;
     - subjects occupy the LOWER band of the frame (down to 81-98% of height) with empty
       sky on top, so a centre-anchored vertical crop discarded the product, not the
       background.

   A two-column SPLIT was tried first and measured worse: every tile cell is taller than
   it is wide once the copy takes a column, so a 1.50:1 source landed in a ~0.74:1 box and
   lost 51-63% of its WIDTH — cutting products clean in half. Full-bleed keeps the entire
   product width and trims only height, which is the axis with sky to spare.

   So the model stays FULL-BLEED OVERLAY, with the two things that were actually wrong
   fixed, per tile, from the measurements:
     --dt-copy  : copy column width, never wider than that art's measured quiet zone.
                  This is what stops the button landing on the product.
     --dt-art-y : vertical crop anchor, chosen so the window still contains the product's
                  measured band. This is what stops the crop eating the product's base.
   Both are set per tile via [data-art] below. Do not set a blanket value: the nine assets
   have quiet zones from 1% to 57% and one number cannot serve them. */
.dt-tile {
  --dt-copy: 44%;
  --dt-art-y: 60%;
  position: relative; display: grid; align-items: center; overflow: hidden;
  grid-template-columns: minmax(0, var(--dt-copy)) minmax(0, 1fr);
  /* Pin the single row to the tile. Without this the art sizes to its natural ratio (a
     1536x1024 file in a 424px column wants 283px), which inflates the implicit row past the
     tile height and pushes the centred copy block down out of the cell -- measured: the band
     CTA sat up to 24px below its 170px tile and was clipped by overflow:hidden. */
  grid-template-rows: minmax(0, 1fr);
  text-decoration: none;
  background: var(--dt-card); border: 1px solid var(--dt-border); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(15,16,16,.08); transition: box-shadow .18s, transform .18s;
  min-width: 0;
}
.dt-tile:hover { box-shadow: 0 8px 22px rgba(15,16,16,.18); transform: translateY(-2px); text-decoration: none; }
.dt-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,122,40,.38); }
.dt-tile-body {
  position: relative; z-index: 2; grid-area: 1 / 1 / 2 / 2; align-self: center;
  padding: 30px 26px; min-width: 0;
}
.dt-tile-img {
  grid-area: 1 / 1 / 2 / 3;              /* full bleed, behind the copy column */
  width: 100%; height: 100%; display: block; align-self: stretch;
  object-fit: cover; object-position: 50% var(--dt-art-y);
}
/* Scrim only under the copy column, fading out before the product starts, so the
   headline stays legible where it grazes the art without veiling the picture. */
.dt-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(244,244,242,.95) 0%,
    rgba(244,244,242,.86) calc(var(--dt-copy) * .72),
    rgba(244,244,242,0)   calc(var(--dt-copy) + 6%));
}
.dt-band--dark::before {
  background: linear-gradient(90deg,
    rgba(15,16,16,.92) 0%,
    rgba(15,16,16,.80) calc(var(--dt-copy) * .72),
    rgba(15,16,16,0)   calc(var(--dt-copy) + 6%));
}
.dt-tile--hero .dt-tile-body { padding: 34px 30px; }

/* ---- per-asset geometry, derived from tile_subject_map.py -------------------
   --dt-copy stops short of where that asset's PRODUCT begins (edge density above 55% of
   peak). A first pass used the 25%-of-peak boundary instead and produced copy columns of
   22-33% — narrow enough that a 34px headline wrapped per-word and stretched the tiles to
   688px. The lower threshold was finding background scenery (harbour skyline, lighthouse),
   not the product; copy may sit on scenery, it may not sit on the product.
   --dt-art-y keeps the measured vertical subject band inside the crop window. */
/* RE-MEASURED 2026-09-02 against the re-issued comp-matched art. The art changed, so the
   geometry derived from it had to be re-derived -- the AR-15 now begins at 29% instead of
   39%, and the previous 34% copy column would have landed on the barrel. Measuring the
   delivered art is the ruling; carrying old numbers forward would have quietly reintroduced
   the exact defect the audit was raised for. */
.dt-tile[data-art="ar15_harbor"]          { --dt-copy: 28%; --dt-art-y: 50%; }  /* product 29%, subj 26-93 */
.dt-tile[data-art="daily_pistol"]         { --dt-copy: 45%; --dt-art-y: 50%; }  /* product 51%, subj 27-95 */
.dt-tile[data-art="optics_harbor"]        { --dt-copy: 38%; --dt-art-y: 50%; }  /* product 43%, subj 27-88 */
.dt-tile[data-art="ammunition"]           { --dt-copy: 50%; --dt-art-y: 50%; }  /* product 58%, subj 11-87 */
.dt-tile[data-art="handguns"]             { --dt-copy: 43%; --dt-art-y: 50%; }  /* product 48%, subj 33-95 */
.dt-tile[data-art="gear_bags"]            { --dt-copy: 50%; --dt-art-y: 50%; }  /* product 59%, subj 25-88 */
.dt-tile[data-art="plate_carrier"]        { --dt-copy: 50%; --dt-art-y: 48%; }  /* product 57%, subj 11-87 */
/* full-frame textures: no quiet zone exists, so the scrim carries legibility */
.dt-tile[data-art="deals_texture"]        { --dt-copy: 46%; --dt-art-y: 50%; }
.dt-tile[data-art="new_arrivals_texture"] { --dt-copy: 46%; --dt-art-y: 50%; }

/* hero headline sized to fit the 28% column the new art leaves clear */
.dt-tile-h--hero { font-size: 46px; }

/* Type inside the small tiles is sized to FIT its copy column at the approved tile
   height. Left at hero sizes it wrapped per-word in a ~180px column and stretched the
   mosaic from 452px to 688px — content silently rewriting the locked geometry. */
.dt-tile--wide .dt-tile-h,
.dt-tile--third .dt-tile-h { font-size: 27px; }
.dt-tile--wide .dt-tile-sub,
.dt-tile--third .dt-tile-sub { font-size: 15px; margin-bottom: 14px; }
.dt-tile--wide .dt-btn,
.dt-tile--third .dt-btn,
.dt-tile--band .dt-btn { font-size: 13px; padding: 12px 15px; white-space: nowrap; }
.dt-tile--wide .dt-rule,
.dt-tile--third .dt-rule { margin-bottom: 10px; }

/* APPROVED GEOMETRY — LAYOUT_MAP.json promo_mosaic:
     "grid": "12 columns, rows 278px 278px 270px 170px, gap 18px"
   Hero spans rows 1-2 = 278 + 18 + 278 = 574. These are the spec's numbers, not estimates
   off the raster comp. The first build invented 452/217/232/176 and then let content
   stretch the band row to 270px (+59%); the accuracy audit caught it. */
.dt-tile--hero  { height: 574px; }
.dt-tile--wide  { height: 278px; }
.dt-tile--third { height: 270px; }
.dt-tile--band  { height: 170px; }
.dt-mosaic-side { grid-template-rows: 278px 278px; }

/* Band type is sized to FIT 170px, which is what forced the row open before: at the larger
   sizes the copy needed ~230px and content beat the min-height. 170 - 36 padding = 134px
   for headline + sub + link. */
.dt-tile--band .dt-tile-body { padding: 16px 20px; }
.dt-tile--band .dt-tile-h--sm { font-size: 19px; margin-bottom: 5px; line-height: 1.03; }
.dt-tile--band .dt-tile-sub { font-size: 12.5px; line-height: 1.08; margin-bottom: 7px; }
/* "Parts & Accessories" is the longest band headline and its copy block measured 173px in
   the approved 170px cell. Measured, not eyeballed -- see band_fit. */

.dt-tile-h {
  font-family: var(--dt-display); font-weight: 900; text-transform: uppercase;
  color: var(--dt-ink); line-height: 1; margin: 0 0 12px; font-size: 34px; letter-spacing: .01em;
}
.dt-tile-h--hero { font-size: 54px; }
/* Split tiles sit on the light card, so band type is dark by default and only goes
   white on the one tile that actually has a dark background. Under the old full-bleed
   overlay every band tile was assumed dark. */
.dt-tile-h--sm { font-size: 26px; }
.dt-band--dark .dt-tile-h--sm { color: var(--dt-white); }
.dt-rule { display: block; width: 54px; height: 3px; background: var(--dt-orange); margin: 0 0 14px; }
.dt-tile-sub {
  font-family: var(--dt-display); font-weight: 800; text-transform: uppercase;
  color: var(--dt-ink-soft); font-size: 18px; line-height: 1.12; margin: 0 0 18px;
}
.dt-tile--band .dt-tile-sub { font-size: 15px; }
.dt-band--dark .dt-tile-sub { color: rgba(255,255,255,.9); }

.dt-btn {
  display: inline-block; font-family: var(--dt-display); font-weight: 800; text-transform: uppercase;
  font-size: 15px; line-height: 1; padding: 13px 20px; border: 2px solid var(--dt-orange);
  color: var(--dt-orange); background: transparent; border-radius: 2px;
}
.dt-btn--solid { background: var(--dt-orange); color: #fff; }
.dt-tile:hover .dt-btn { background: var(--dt-orange); color: #fff; }
.dt-tile:hover .dt-btn--solid { background: var(--dt-orange-d); border-color: var(--dt-orange-d); }
.dt-link {
  font-family: var(--dt-display); font-weight: 800; text-transform: uppercase; font-size: 14px;
  color: var(--dt-orange); letter-spacing: .02em;
}
.dt-band--dark { background: var(--dt-black); }
.dt-band--dark .dt-link { color: #f0a06a; }
/* "Shop Plate Carriers" wrapped to two lines in the band copy column and read as a
   layout fault rather than a link. Keep band CTAs on one line. */
.dt-tile--band .dt-link { font-size: 13px; white-space: nowrap; }
.dt-tile--band .dt-tile-body { padding: 22px 22px; }

/* Warm band tiles (Deals, New Arrivals): white copy on the brown texture + a decorative
   white-outline icon (crosshair / star), matching the approved comp's bottom row. */
.dt-band--warm .dt-tile-h--sm { color: var(--dt-white); text-shadow: 0 2px 3px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.4); }
.dt-band--warm .dt-tile-sub   { color: rgba(255,255,255,.94); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dt-band--warm .dt-link       { color: #f4a76f; }
/* Brad 2026-09-03: bottom-row bands read too dark. GPT-guided ~50% lift that preserves the
   warm brown coloration, plus a lighter graded copy scrim (>=0.48 so white headlines hold). */
.dt-band--warm .dt-tile-img { filter: brightness(1.45) contrast(1.05) saturate(1.12) sepia(.08); }
.dt-band--dark .dt-tile-img { filter: brightness(1.26) contrast(1.02); }
.dt-band--warm::before {
  background: linear-gradient(90deg,
    rgba(26,17,9,.54) 0%,
    rgba(26,17,9,.50) 38%,
    rgba(26,17,9,.24) 62%,
    rgba(26,17,9,0)   100%);
}
.dt-tile-icon {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  stroke: #fff; stroke-width: 3; fill: none; opacity: .9;
  stroke-linejoin: round; stroke-linecap: round; pointer-events: none;
}
.dt-icon--crosshair { width: 88px; height: 88px; left: 45%; }
.dt-icon--star      { width: 116px; height: 116px; left: 49%; opacity: .82; }

/* ------------------------------------------------- brand rail ---------
   Brad, 2026-09-02: "brand rail should carousel".

   Approved brand_rail height is 72px, so the marquee runs inside a fixed 72px band and the
   rail cannot grow the page. The track holds the brand list TWICE and translates by exactly
   -50%, which is what makes the loop seamless with no JS.

   Marks render as <img> when a logo asset exists and as a styled wordmark when it does not.
   Today every brand falls back to text: the only brand art anywhere in the platform is
   32-48px favicons (verified across all six installs and the /brands page), which cannot
   render a 72px wordmark rail. Drop real files into assets/images/brands/wordmarks/ and
   they are picked up with no further change. */
.dt-brands { border-top: 1px solid var(--dt-border); margin-top: 26px; background: var(--dt-page); }
.dt-brands-inner {
  height: 72px; display: flex; align-items: center; gap: 0;
  padding: 0; overflow: hidden; position: relative;
}
/* edge fades so marks enter and leave instead of being chopped off */
.dt-brands-inner::before, .dt-brands-inner::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none;
}
.dt-brands-inner::before { left: 0;  background: linear-gradient(90deg, var(--dt-page), rgba(244,244,242,0)); }
.dt-brands-inner::after  { right: 0; background: linear-gradient(270deg, var(--dt-page), rgba(244,244,242,0)); }

.dt-brand-track {
  display: flex; align-items: center; gap: 64px; flex: 0 0 auto;
  width: max-content; animation: dt-marquee 38s linear infinite;
}
.dt-brands-inner:hover .dt-brand-track,
.dt-brands-inner:focus-within .dt-brand-track { animation-play-state: paused; }
@keyframes dt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .dt-brand-track { animation: none; }
  .dt-brands-inner { overflow-x: auto; }
}

.dt-brand {
  font-family: var(--dt-display); font-weight: 900; text-transform: uppercase;
  font-size: 19px; letter-spacing: .04em; color: var(--dt-ink); opacity: .82; white-space: nowrap;
  flex: 0 0 auto; text-decoration: none;
}
a.dt-brand:hover { opacity: 1; color: var(--dt-orange); }
.dt-brand img { height: 26px; width: auto; display: block; filter: grayscale(1); opacity: .78; }
a.dt-brand:hover img { filter: none; opacity: 1; }
.dt-brand-all {
  font-family: var(--dt-display); font-weight: 800; text-transform: uppercase; font-size: 13px;
  color: var(--dt-muted-d); text-decoration: none; white-space: nowrap;
}
.dt-brand-all:hover { color: var(--dt-orange); }

/* The platform's floating "Your Data is Protected" badge is position:fixed bottom-left and
   permanently covers part of the Ammunition tile (measured 181x36 at 20,944 over a tile at
   96,844). The approved design has no floating badge, and the trust rail below already
   carries "Secure Checkout — shop with confidence", so the signal is not lost. Tenant-scoped;
   the badge is untouched on every other install. */
#security-badge, .security-badge { display: none !important; }

/* ------------------------------------------------- trust rail --------- */
.dt-trust { border-top: 1px solid var(--dt-border); background: var(--dt-page); }
/* approved trust_rail height is 74px (LAYOUT_MAP.json); the first build ran 92px (+24%) */
.dt-trust-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  height: 74px; align-items: center; padding-top: 0; padding-bottom: 0; gap: 18px;
}
.dt-trust-item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.dt-trust-item + .dt-trust-item { border-left: 1px solid var(--dt-border); }
.dt-trust-ico { font-size: 24px; line-height: 1; }
.dt-trust-item strong {
  display: block; font-family: var(--dt-display); font-weight: 800; text-transform: uppercase;
  font-size: 16px; color: var(--dt-ink); line-height: 1.1;
}
.dt-trust-item span { display: block; font-size: 13px; color: var(--dt-muted-d); }

/* ------------------------------------------------- tablet ------------- */
@media (max-width: 1024px) {
  .dt-wrap { padding: 0 24px; }
  .dt-mosaic-top { grid-template-columns: 1fr; }
  .dt-mosaic-side { grid-template-rows: auto auto; }
  .dt-tile--hero { min-height: 360px; }
  .dt-tile-h--hero { font-size: 44px; }
}
@media (max-width: 768px) {
  .dt-mosaic-row3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dt-tile-body { padding: 24px 20px; }
  /* Tiles narrow here, so copy needs a pixel FLOOR -- but it must not get a blanket
     percentage. An earlier revision set --dt-copy: max(46%,108px) for every tile, which
     overrode the measured per-tile columns and put copy back on the AR-15 and the handgun.
     A minmax() floor keeps each tile's own measured width and only rescues the narrow ones. */
  .dt-tile { grid-template-columns: minmax(96px, var(--dt-copy)) minmax(0, 1fr); }
  .dt-tile-h { font-size: 24px; }
  .dt-tile-h--sm { font-size: 20px; }
  .dt-tile-sub { font-size: 15px; }
  .dt-trust-inner { grid-template-columns: 1fr; }
  .dt-trust-item + .dt-trust-item { border-left: 0; border-top: 1px solid var(--dt-border); padding-top: 16px; }
  .dt-trust-item { justify-content: flex-start; }
}

/* ------------------------------------------- tablet + phone: stack -----
   Raised from 640px to 768px. At tablet the cells crop the art horizontally, which drags
   the product leftward on screen -- measured, the AR-15's product start moved from 29% in
   the file to 23% on screen, so a copy column narrow enough to clear it could no longer
   hold the headline. Stacking removes the conflict instead of trading one defect for the
   other: full 3:2 art, nothing cropped, nothing overlapping. */
@media (max-width: 768px) {
  .dt-wrap { padding: 0 16px; }
  .dt-mosaic-row3 { grid-template-columns: 1fr; gap: 14px; }
  .dt-mosaic-top, .dt-mosaic-side { gap: 14px; }
  .dt-mosaic-row3 { margin-top: 14px; }
  /* Phone: STACK instead of splitting. A ~358px tile cannot hold two usable columns.
     Stacked, the art gets the full width at its native 3:2 — nothing is cropped and
     nothing overlaps, so the phone view is the most faithful of the three. */
  /* stacked needs TWO rows; the desktop rule pins the grid to one so the art cannot
     inflate the cell, and that pin has to be released here */
  .dt-tile { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .dt-tile-body { grid-area: 1 / 1 / 2 / 2; padding: 22px 18px; }
  .dt-tile-img {
    grid-area: 2 / 1 / 3 / 2; aspect-ratio: 3 / 2; height: auto;
    object-fit: cover; object-position: 50% 50%;
  }
  .dt-tile::before { display: none; }   /* nothing overlaps once stacked — no scrim needed */
  .dt-tile--hero, .dt-tile--wide, .dt-tile--third, .dt-tile--band { min-height: 0; }
  .dt-tile-h { font-size: clamp(28px, 9vw, 34px); }
  .dt-tile-h--sm { font-size: 24px; }
  .dt-tile-sub { font-size: 16px; }
  .dt-tile-h--hero { font-size: clamp(38px, 13vw, 48px); }
  .dt-btn { padding: 13px 18px; }              /* >=44px tap target */
  .dt-brands-inner { justify-content: flex-start; gap: 16px; }
  .dt-brand { font-size: 15px; }
}

/* Band tiles sit on dark artwork: force a readable scrim + light type at every width, not
   just on phones. The plate-carrier tile rendered near-black text on a near-black image. */
.dt-tile--band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(15,16,16,.82) 0%, rgba(15,16,16,.60) 55%, rgba(15,16,16,.20) 100%);
}
.dt-tile--band .dt-tile-body { position: relative; z-index: 2; }
.dt-tile--band .dt-tile-h, .dt-tile--band .dt-tile-h--sm { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.dt-tile--band .dt-tile-sub { color: rgba(255,255,255,.92) !important; }
.dt-tile--band .dt-link { color: #f6a06a !important; }

/* 2026-10-08: the search bar clear (x) button keeps its own look. The brand rule above colours EVERY search bar
   button, which turned the x into a large coloured block with a gap beside it on phones. */
html body .search-bar button.search-clear{background:transparent !important;border:0 !important;color:#999 !important;width:28px !important;height:28px !important;padding:0 !important;box-shadow:none !important;}
html body .search-bar button.search-clear:hover{background:#f0f0f0 !important;color:#333 !important;}