/* Houston machine detail pages (vendingmachines/*.html): light-touch alignment
   with the homepage look. Every rule is scoped to body.hx-tpl-vending. */

/* Hero: homepage heading style + outcome line */
.hx-tpl-vending #about h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
}
.hx-tpl-vending .hx-tv-sub {
  color: #fff;
  font-size: 17px;
  line-height: 1.45;
  margin: 0;
  max-width: 32em;
}
.hx-tpl-vending #about p > button { font-size: 18px; min-height: 48px; padding: 10px 22px !important; }
.hx-tpl-vending #about p > button:hover { background: #0271b0 !important; }
/* The template caps the hero wrapper at 375px; let it grow for the extra line */
.hx-tpl-vending .section2-bg { max-height: none !important; }
.hx-tpl-vending #about.home { min-height: 0 !important; padding-bottom: 28px; }

/* Body copy section: was a fixed 75px padding, which left a 240px column on phones */
.hx-tpl-vending #seo-text {
  margin: 0;
  padding: 32px 16px 8px;
  color: #4a5a68;
  font-size: 17px;
  line-height: 1.65;
}
.hx-tpl-vending #seo-text .container-fluid { padding: 0; }
.hx-tpl-vending #seo-text #main {
  max-width: 1100px;
  margin: 0 auto;
}
.hx-tpl-vending #seo-text #main::after { content: ''; display: table; clear: both; }
.hx-tpl-vending #seo-text p { font-size: 17px; line-height: 1.65; color: #4a5a68; margin: 0 0 16px; }
.hx-tpl-vending #seo-text h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #014F81;
  margin: 24px 0 10px;
}
.hx-tpl-vending #seo-text ul { padding-left: 1.2em; margin: 0 0 16px; }
.hx-tpl-vending #seo-text li { margin-bottom: 6px; line-height: 1.5; }

/* Product photo: stacked and centered on phones, beside the copy from tablet up */
.hx-tpl-vending .hx-tv-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 240px);
  max-height: 380px;
  margin: 0 auto 24px;
  object-fit: contain;
}
@media (min-width: 768px) {
  .hx-tpl-vending #seo-text { padding: 56px 24px 16px; }
  .hx-tpl-vending .hx-tv-img {
    float: right;
    max-width: 320px;
    max-height: 480px;
    margin: 0 0 24px 40px;
  }
}

/* The empty spacer above the body button */
.hx-tpl-vending #seo-text #main div > p:only-child { display: none; }
.hx-tpl-vending #seo-text button { margin-top: 8px !important; }
.hx-tpl-vending #seo-text button:hover { background: #0271b0 !important; }

/* Closing "Get Vending Machines For My Location" button: homepage button style */
.hx-tpl-vending .faq a.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px !important;
  border: 0;
  border-radius: 6px;
  background: #0699d4;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 18px !important;
  line-height: 1.3;
  box-shadow: none;
  white-space: normal;
}
.hx-tpl-vending .faq a.btn.btn-primary:hover,
.hx-tpl-vending .faq a.btn.btn-primary:focus { background: #0271b0; color: #fff; }
.hx-tpl-vending .faq a.btn.btn-primary:focus { outline: 3px solid #014F81; outline-offset: 2px; }