/* ============================================================
  Downrange Supply — storefront styles
  Bootstrap 5 overrides + brand system (Oswald / Barlow / coyote-olive)
  ============================================================ */
:root {
  --ink:#1a1813;
  --olive:#7C714E;
  --olive-d:#282d1e;
  --coyote:#b8975c;
  --coyote-l:#c9a86a;
  --sand:#e7e0d0;
  --paper:#f6f2e8;
  --brown:#6E4B24;
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-family:'Barlow',sans-serif;
  color:#2b2820;
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
[id] {
  scroll-margin-top:118px
}
h1,h2,h3,h4 {
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height:1.03;
  margin:0
}
p {
  margin:0
}
a {
  text-decoration:none;
  color:var(--coyote)
}
a:hover {
  color:var(--coyote-l)
}
.dr-eyebrow {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:.82rem;
  color:var(--coyote)
}
.dr-logo {
  font-family:'Saira Stencil One',sans-serif;
  letter-spacing:1px;
  display:inline-flex;
  align-items:center;
  line-height:1
}
.dr-logo svg {
  width:.92em;
  height:.92em;
  margin:0 .05em
}
.dr-btn {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  border-radius:2px;
  padding:.72rem 1.5rem;
  border:2px solid transparent;
  transition:all .18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  cursor:pointer;
  font-size:.95rem;
  white-space:nowrap
}
.dr-btn-sm {
  padding:.5rem 1rem;
font-size:.85rem
}
.dr-btn-primary {
  background:var(--coyote);
  color:var(--ink);
  border-color:var(--coyote)
}
.dr-btn-primary:hover {
  background:var(--coyote-l);
  border-color:var(--coyote-l);
  color:var(--ink)
}
.dr-btn-ghost {
  background:transparent;
  color:var(--paper);
  border-color:rgba(246,242,232,.4)
}
.dr-btn-ghost:hover {
  border-color:var(--coyote-l);
color:var(--coyote-l)
}
.dr-btn-outline {
  background:transparent;
  color:var(--ink);
  border-color:#c7bda4
}
.dr-btn-outline:hover {
  border-color:var(--coyote);
  color:var(--coyote)
}
.dr-navlink {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(246,242,232,.82)!important;
  font-size:.98rem;
  padding:.4rem .85rem!important;
  transition:color .15s
}
.dr-navlink:hover,.dr-navlink.active {
  color:var(--coyote-l)!important
}
.dr-card {
  background:var(--paper);
  border:1px solid #e2d9c4;
  border-radius:4px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%
}
.dr-card:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(26,24,19,.16)
}
.dr-ph {
  
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}
.dr-ph.dark {
 
}
.dr-ph-label {
  font-family:ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:1px;
  color:#8a7f66;
  text-transform:uppercase;
  background:rgba(246,242,232,.72);
  padding:.24rem .5rem;
  border-radius:2px
}
.dr-ph.dark .dr-ph-label {
  color:#b9b09a;
  background:rgba(26,24,19,.55)
}
.dr-tag {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.72rem;
  padding:.22rem .6rem;
  border-radius:2px;
  display:inline-block
}
.dr-input {
  background:#fff;
  border:1px solid #d3c9b2;
  color:#2b2820;
  border-radius:2px;
  padding:.7rem .9rem;
  width:100%;
  font-family:'Barlow',sans-serif;
  transition:border-color .15s
}
.dr-input:focus {
  outline:none;
  border-color:var(--coyote)
}
.dr-input::placeholder {
  color:#a89e86
}
.dr-input-dark {
  background:rgba(246,242,232,.06);
  border:1px solid rgba(246,242,232,.22);
  color:#f6f2e8
}
.dr-input-dark::placeholder {
  color:rgba(246,242,232,.42)
}
.navbar-toggler:focus {
  box-shadow:none
}
.dr-spec {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:1px;
  color:#8a7f66;
  font-size:.86rem
}
.dr-mono {
  font-family:ui-monospace,'Barlow Condensed',monospace;
  letter-spacing:1px
}
.dr-price {
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:1.35rem;
  color:var(--ink)
}
.dr-price s {
  font-family:'Barlow',sans-serif;
  font-weight:400;
  font-size:.95rem;
  color:#a89e86;
  margin-left:.4rem
}
.dr-star {
  color:var(--coyote);
  letter-spacing:1px;
  font-size:.9rem
}
.dr-catlink {
  display:block;
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:1/1
}
.dr-catlink .dr-ph {
  position:absolute;
  inset:0
}
.dr-catlink .cat-name {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px;
  background:linear-gradient(0deg,rgba(20,19,14,.9),rgba(20,19,14,0));
  color:#f6f2e8;
  font-family:'Oswald';
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:1.05rem
}
.dr-catlink:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(26,24,19,.18)
}
.dr-catlink {
  transition:transform .2s ease, box-shadow .2s ease
}
.dr-ticker {
  background:var(--coyote);
  color:#1a1813;
  font-family:'Barlow Condensed';
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.82rem;
  padding:.55rem 0;
  overflow:hidden;
  white-space:nowrap
}
.dr-ticker span {
  margin:0 2.2rem
}
.dr-ticker-inner {
  animation:none
}

/* Navbar */
.navbar-dark-custom {
  background:#1a1813;
  border-bottom:1px solid #2c2a22
}
.navbar-brand-custom {
  font-size:22px;
  color:#f6f2e8;
  max-width: 250px;
}
.poptext {
  color: var(--coyote-l);
}
.navbar-actions {
  gap:6px
}
.navbar-toggler-custom {
  border-color:#4a4738
}

/* Hero Section */
.hero-section {
  position:relative;
  min-height:74vh;
  display:flex;
  align-items:center;
  background: url(../img/dr-home.webp) no-repeat center;
  color:#f6f2e8;
  overflow:hidden;
  background-size: cover;
}
.hero-ph-container {
  position:absolute;
  inset:0;
  
}
.hero-ph-label {
  position:absolute;
  right:16px;
  bottom:14px
}
.hero-overlay {
  position:absolute;
  inset:0;
  
}
.hero-content {
  position:relative;
  padding-top:64px;
  padding-bottom:48px
}
.hero-tag {
  background:var(--coyote);
  color:#1a1813;
  margin-bottom:18px
}
.hero-title {
  font-size:clamp(2.5rem,6.6vw,5rem)
}
.hero-description {
  max-width:560px;
  margin-top:20px;
  font-size:1.2rem;
  line-height:1.55;
  color:rgba(246,242,232,.82)
}
.hero-buttons {
  gap:14px;
  margin-top:30px
}
.hero-features {
  gap:26px;
  margin-top:32px;
  color:rgba(246,242,232,.7);
  font-family:'Barlow Condensed';
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:.9rem
}

/* Section Layouts */
.section-paper {
  background:var(--paper);
  padding:90px 0 40px
}
.section-paper-alt {
  background:var(--paper);
  padding:50px 0 90px
}
.section-paper-full {
  background:var(--paper);
  padding:90px 0
}
.section-dark {
  background:#282d1e;
  color:#f6f2e8;
  padding:90px 0
}
.section-sand {
  background:var(--sand);
  padding:90px 0
}
.section-brown {
  background:var(--brown);
  padding:90px 0
}
.section-olive {
  background:var(--olive);
  padding:90px 0
}
.section-coyote {
  background:var(--coyote);
  color:#1a1813;
  padding:64px 0
}
.section-footer {
  background:#141310;
  color:rgba(246,242,232,.6);
  padding:60px 0 28px
}

/* Section Headers */
.section-header {
  margin-bottom:36px
}
.section-header-alt {
  margin-bottom:32px
}
.section-header-lg {
  margin-bottom:48px
}
.section-heading-lg {
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  margin-top:10px
}
.section-heading-md {
  font-size:clamp(1.7rem,3.8vw,2.5rem);
  margin-top:10px
}
.section-heading-xl {
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  margin-top:10px;
  margin-bottom:16px
}
.section-heading-cta {
  font-size:clamp(1.7rem,3.8vw,2.4rem)
}
.text-paper {
  color: var(--paper);
}

/* Product Cards */
.product-image {
  aspect-ratio:1/1
}
.product-tag-sale {
  position:absolute;
  top:12px;
  left:12px;
  background:#7a2f2f;
  color:#f6f2e8
}
.product-tag-bulk {
  position:absolute;
  top:12px;
  left:12px;
  background:#363d2b;
  color:#e7e0d0
}
.product-content {
  flex:1
}
.product-title {
  font-size:1.05rem;
  margin:.35rem 0 .35rem;
  text-transform:none;
  letter-spacing:0;
  line-height:1.2
}
.product-rating {
  margin-bottom:.5rem
}
.product-rating-count {
  color:#a89e86
}

/* FFL / Steps */
.step-card {
  border:1px solid rgba(246,242,232,.16);
  border-radius:4px;
  padding:28px 24px;
  height:100%
}
.step-number {
  color:var(--coyote);
  font-weight:700;
  font-size:.85rem
}
.step-title {
  font-size:1.2rem;
  margin:.5rem 0 .5rem
}
.step-description {
  color:rgba(246,242,232,.72);
  line-height:1.5
}
.step-disclaimer {
  color:rgba(246,242,232,.55);
  font-size:.9rem;
  margin-top:30px;
  max-width:760px;
  margin-left:auto;
  margin-right:auto
}

/* Sell/Trade Section */
.trade-image {
  aspect-ratio:4/3;
  border-radius:4px
}
.trade-description {
  color:#5d564a;
  font-size:1.1rem;
  line-height:1.55;
  margin-bottom:24px
}
.trade-stats {
  margin-bottom:26px
}
.trade-stat-number {
  font-family:'Oswald';
  font-weight:700;
  font-size:1.9rem;
  color:var(--ink)
}

/* Why Buy Section */
.feature-icon {
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--sand);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px
}
.feature-title {
  font-size:1.15rem
}
.feature-description {
  color:#5d564a;
  line-height:1.5;
  margin-top:8px
}

/* Newsletter Section */
.newsletter-heading {
  font-size:clamp(1.7rem,3.8vw,2.4rem)
}
.newsletter-description {
  font-weight:500;
  font-size:1.08rem;
  margin-top:8px
}
.newsletter-form {
  gap:10px
}
.newsletter-input {
  flex:1;
  min-width:220px;
  background:#1a1813;
  border-color:#1a1813;
  color:#f6f2e8
}
.newsletter-button {
  background:#1a1813;
  color:#f6f2e8;
  border-color:#1a1813
}
.newsletter-disclaimer {
  font-size:.82rem;
  margin-top:10px;
  opacity:.8
}

/* Footer */
.footer-logo {
  font-size:24px;
  color:#f6f2e8
}
.footer-logo-img {
  max-width:300px
}
.footer-description {
  margin-top:16px;
  line-height:1.2em;
  font-size: 1.3em;
}
.footer-heading {
  color:#8a7f66;
  margin-bottom:14px
}
.footer-links {
  gap:10px
}
.footer-link {
  color:rgba(246,242,232,.72)
}
.footer-bottom {
  border-top:1px solid rgba(246,242,232,.12);
  margin-top:40px;
  padding-top:22px;
  gap:10px
}
.footer-text {
  font-family:'Barlow Condensed';
  letter-spacing:1px
}
/* --- inventory-inquiry page --- */
  .dr-stepnum{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.15rem;width:44px;height:44px;border-radius:50%;background:var(--coyote);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .dr-list{list-style:none;padding:0;margin:0}
  .dr-list li{display:flex;gap:12px;align-items:flex-start;padding:.55rem 0;line-height:1.5}
  .dr-list li svg{color:var(--coyote);flex:0 0 auto;margin-top:.15rem}
  .dr-formcard{background:#fff;border:1px solid #e2d9c4;border-radius:6px;box-shadow:0 20px 50px rgba(26,24,19,.14)}
  .dr-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:.8rem;color:#5d564a;display:block;margin-bottom:6px}
  .dr-chip{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:.82rem;border:1px solid #d3c9b2;border-radius:2px;padding:.5rem .9rem;cursor:pointer;background:#fff;color:#5d564a;transition:all .15s}
  .dr-chip:hover{border-color:var(--coyote);color:var(--ink)}
  .dr-chip input{position:absolute;opacity:0;pointer-events:none}
  .dr-chip:has(input:checked){background:var(--olive);border-color:var(--olive);color:var(--paper)}

/* ============================================================
   AGE VERIFICATION MODAL
   ============================================================ */
.age-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 24, 19, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.age-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.age-modal-container {
  max-width: 540px;
  width: 90%;
  margin: 0 auto;
  animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.age-modal-content {
  background: var(--ink);
  border-radius: 8px;
  padding: 24px 24px;
  text-align: center;
  border: 2px solid var(--coyote);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  color: var(--sand);
}

.age-modal-icon {
  color: var(--coyote);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 250px;
}

.age-modal-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--paper);
  margin: 0 0 16px;
}

.age-modal-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--paper);
  margin: 0 0 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.age-modal-checkbox {
  margin: 0 0 28px;
}

.age-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.age-checkbox-input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--coyote);
}

.age-checkbox-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--paper);
}

.age-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
}

.age-modal-btn {
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
}

.age-modal-legal {
  font-size: 0.82rem;
  color: var(--paper);
  line-height: 1.5;
  margin: 0;
}
#ageDenyButton {
  color: var(--paper);
}
/* Responsive adjustments */
@media (max-width: 576px) {
  .age-modal-content {
    padding: 36px 28px;
  }
  
  .age-modal-title {
    font-size: 1.6rem;
  }
  
  .age-modal-description {
    font-size: 1rem;
  }
}

/* Prevent body scroll when modal is open */
body.age-modal-open {
  overflow: hidden;
}