:root {
  --card-border-radius: 12px;
  --color-brand-red: #ed1b2d;
  --color-brand-red-darker: #c6101f;
  --color-brand-red-darker2: #960c18;
  --best-sellers-section-columns: 1;
  --footer-background: #231f20;
  --footer-color: #fff;
  --footer-link-color: #fff;
  --footer-link-color-hover: #dcdcdc;
}

@view-transition {
  navigation: auto;
}

#dev-indicator::after {
  background: red;
  color: #fff;
  content: 'DEV';
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  padding: 4px;
  position: fixed;
  left: 0;
  text-align: center;
  top: 0;
  width: 300px;
  z-index: 9999999999;
}

:where(.front) h2,
:where(.front) h3,
:where(.front) h4,
:where(.front) .h2,
:where(.front) .h3,
:where(.front) .h4 {
  /* color: #6d7a80; */
  /* A11y: */
  color: #677379;
}

#modal-search .search-result {
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 0;
}

.app {
  display: flow-root; /* required to prevent elements from margin collapsing into the header space */
}

/* A11y */
:where(.front) .button.alert {
  background: #E03015;
}
:where(.front) .button.alert:hover {
  background: #ED533B;
}

.colored-link-block a {
  border-radius: 10px;
}

.propane-colored-link-blocks .colored-link-block--horizontal img {
  width: 120px !important;
}

.colored-link-block.electric-block-powerfulsolutions {
  background: transparent;
}

.colored-link-block.electric-block-powerfulsolutions a {
  background: #e2f581;
}

.colored-link-block.electric-block-powerfulsolutions a:hover {
  background: #c0da3a;
}

.seo-cross-links {
  font-size: .8rem;
}

.disclaimer {
  color: #666;
}

.page-footer {
  padding-bottom: 4rem;
}

.page-footer .disclaimer {
  color: #969696;
}

.page-footer .ngcom {
  color: inherit;
  font-size: 12px;
}

.page-footer .ngcom img {
  border: 1px solid #fff;
  width: 26px;
}

.accordion-title {
  padding-right: 2rem;
}

/*
 * Reveals
 */

.reveal .close-button {
  border-radius: 0;
}

.reveal .close-button:hover,
.reveal .close-button:focus,
.reveal .close-button:active {
  background: var(--app-red);
}

/*
 * Showroom Appointment / Product - Appointment modal
 */

.county-accordion .accordion-title {
  font-weight: bold;
  text-align: center;
}

.county-stack {
  margin: 1rem 0 2rem;
}

.county-stack .cms-block-button {
  margin: 0;
}

.county-stack .button {
  background: #0513df;
  margin: 0 8px;
  max-width: 300px;
  width: auto;
}

.county-stack .button:hover, .county-stack .button.primary:hover {
  background: #eee;
  color: #000;
}

/*
 * Product Category detail page
 */

.product-category-detail__category-svg svg {
  width: 120px;
}

.product-category-detail__category-svg,
.product-category-detail__category-heading,
.product-category-detail__category-heading h1 {
  margin: 0;
}

/*
 * Locations
 */

.location-heading {
  text-align: center;
}

.location-heading h3 {
  color: inherit;
  margin: 6px 0 0;
}

.location-box {
  --light-gray: #F4F4F4;
  align-content: center;
  background: var(--light-gray);
  border-radius: var(--card-border-radius);
  display: grid;
  font-size: .9rem;
  padding: calc(var(--gutter) * 2) calc(var(--gutter) / 2);
  row-gap: 1.4rem;
}

.location-box .cms-block {
  margin: 0;
}

.location-box .cms-block:first-child {
  margin-top: 0;
}

.location-box .cms-block:last-child {
  margin-bottom: 0;
}

.location-box img {
  width: auto !important;
}

.location-box p {
  line-height: 1.1;
}

.location-box strong {
  font-size: 1.1rem;
}

.location-map-button {
  margin-top: 6px !important;
}

/*
 * Press
 */

.press__sidebar .press-contact {
  min-height: 150px;
}

.press__sidebar .press-contact .card__image {
  background-position: 50% top;
}

/*
 * Five9 Chat
 */

html .five9-frame,
html .five9-chat-button,
html .five9-frame .five9-frame-full .five9-header {
  height: 42px;
}

html .five9-chat-button {
  align-items: center;
  background: linear-gradient(to bottom, #416ec9, #6f51c3);
  border: 1px solid #6f51c3;
  border-bottom: none;
  display: inline-flex;
  font-family: inherit;
  font-weight: 500;
  justify-content: center;
  min-width: 160px;
  padding: 10px 12px;
}

html .five9-chat-button .five9-icon {
  position: relative;
  left: auto;
  margin-left: -8px;
  top: auto;
}

html .five9-frame .five9-text {
  vertical-align: middle;
}

/*
 * Best Sellers reusable section
 */

.best-sellers-section .best-sellers {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: repeat(var(--best-sellers-section-columns), auto);
  row-gap: 3rem;
}

.best-sellers-section .product__thumbnail .thumb {
  aspect-ratio: 1;
  object-fit: contain;
}

/*
 * Careers
 */

.careers-top-bar {
  --menu-items-padding-y: 0.62rem;
  font-size: .75rem;
  left: 0;
  padding-inline: 1rem;
  padding-bottom: var(--menu-items-padding-y);
  padding-top: var(--menu-items-padding-y);
  position: sticky;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: var(--mobile-header-height);
  z-index: 10;
}

.careers-top-bar .app-menu {
  justify-content: center;
}

.careers-top-bar .nav-link:hover .ib {
  text-decoration: underline;
}

.careers-top-bar .menu .is-active > .nav-link,
.careers-top-bar .menu .is-active > a,
.careers-top-bar .menu .is-active > span {
  background: transparent;
  color: inherit;
}
@media (min-width: 768px) {
:root {
  --best-sellers-section-columns: 2;
}

/*
 * Showroom Appointment / Product - Appointment modal
 */

.county-accordion {
  max-width: 600px;
}

/*
 * Product Category detail page
 */

.product-category-detail__category-svg {
  margin-right: 1rem;
}

/*
 * Careers
 */

.careers-top-bar {
  font-size: 1rem;
}

.careers-top-bar .app-menu {
  justify-content: end;
}

.careers-top-bar .app-menu .nav-item {
  margin-bottom: 0;
  margin-top: 0;
}
}
@media (min-width: 1280px) {
:root {
  --best-sellers-section-columns: 3;
}

.page-header__desktop .page-header__main .desktop-menu .nav-link {
  padding: .68rem .5rem;
}

.redesign-2021 .page-header__desktop {
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
}

/*
 * Careers
 */

.careers-top-bar {
  top: 0;
}

.careers-top-bar .nav-item {
  margin-left: 1rem;
}
}
@media (min-width: 1440px) {
.page-header__desktop .page-header__main .desktop-menu .nav-link {
  padding: .68rem 1rem;
}
}
@media (min-width: 1920px) {
:root {
  --best-sellers-section-columns: 4;
}
}