/*
 * Herbadrug UI — DiXi art direction
 * FTP: /user/documents/upload/herbadrug-ui/css/brands/dixi.css
 */

.hd-brand--dixi,
body.hd-brand-page--dixi .hd-brand-top,
body.hd-brand-page--dixi .hd-brand-bottom {
  --hd-brand-ink: #011e41;
  --hd-brand-paper: #f3f4f1;
  --hd-brand-surface: #ffffff;
  --hd-brand-accent: #1f5b46;
  --hd-brand-muted: #536170;
  --hd-brand-line: rgba(1, 30, 65, 0.17);
  --hd-brand-on-dark: #ffffff;
  --hd-brand-font: "Aller", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --hd-brand-display: "Aller", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

body.hd-brand-page--dixi .breadcrumbs-wrapper {
  border-bottom-color: rgba(1, 30, 65, 0.1);
}

body.hd-brand-page--dixi .hd-brand-top,
body.hd-brand-page--dixi .hd-brand-bottom {
  background: var(--hd-brand-surface);
}

.hd-brand--dixi .hd-brand-hero,
body.hd-brand-page--dixi .hd-brand-hero {
  background: #011e41;
}

.hd-brand--dixi .hd-brand-hero__content,
body.hd-brand-page--dixi .hd-brand-hero__content {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035)),
    #011e41;
}

.hd-brand--dixi .hd-brand-hero__content::after,
body.hd-brand-page--dixi .hd-brand-hero__content::after {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  width: 3.5rem;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.58);
}

.hd-brand--dixi .hd-brand-hero .hd-kicker,
body.hd-brand-page--dixi .hd-brand-hero .hd-kicker {
  color: #c8d6d0;
}

.hd-brand--dixi .hd-brand-hero__lead,
body.hd-brand-page--dixi .hd-brand-hero__lead {
  color: rgba(255, 255, 255, 0.82);
}

.hd-brand--dixi .hd-brand-hero__title,
body.hd-brand-page--dixi .hd-brand-hero__title {
  color: #ffffff !important;
}

.hd-brand--dixi .hd-brand-hero .hd-button--primary,
body.hd-brand-page--dixi .hd-brand-hero .hd-button--primary {
  border-color: #ffffff;
  background: #ffffff;
  color: #011e41;
}

.hd-brand--dixi .hd-brand-hero .hd-button--primary:hover,
body.hd-brand-page--dixi .hd-brand-hero .hd-button--primary:hover {
  border-color: #c8d6d0;
  background: #c8d6d0;
}

.hd-brand--dixi .hd-brand-hero .hd-button--secondary,
body.hd-brand-page--dixi .hd-brand-hero .hd-button--secondary {
  border-color: rgba(255, 255, 255, 0.52);
  color: #ffffff;
}

.hd-brand--dixi .hd-brand-hero .hd-button--secondary:hover,
body.hd-brand-page--dixi .hd-brand-hero .hd-button--secondary:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.hd-brand--dixi .hd-brand-nav,
body.hd-brand-page--dixi .hd-brand-nav {
  background: #ffffff;
}

.hd-brand--dixi .hd-brand-nav-card,
body.hd-brand-page--dixi .hd-brand-nav-card {
  background: #173b31;
}

.hd-brand--dixi .hd-brand-nav-card:nth-child(3),
.hd-brand--dixi .hd-brand-nav-card:nth-child(6),
body.hd-brand-page--dixi .hd-brand-nav-card:nth-child(3),
body.hd-brand-page--dixi .hd-brand-nav-card:nth-child(6) {
  background: #011e41;
}

.hd-brand--dixi .hd-brand-feature,
body.hd-brand-page--dixi .hd-brand-feature {
  background: #1f5b46;
  color: #ffffff;
}

.hd-brand--dixi .hd-brand-feature .hd-kicker,
body.hd-brand-page--dixi .hd-brand-feature .hd-kicker {
  color: #d5e2d5;
}

.hd-brand--dixi .hd-brand-feature__copy,
body.hd-brand-page--dixi .hd-brand-feature__copy {
  color: rgba(255, 255, 255, 0.83);
}

.hd-brand--dixi .hd-brand-feature .hd-button,
body.hd-brand-page--dixi .hd-brand-feature .hd-button {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.hd-brand--dixi .hd-brand-feature .hd-button:hover,
body.hd-brand-page--dixi .hd-brand-feature .hd-button:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #1f5b46;
}

.hd-brand--dixi .hd-product-intro,
body.hd-brand-page--dixi .hd-product-intro {
  background: #f3f4f1;
}

.hd-brand--dixi .hd-brand-story,
body.hd-brand-page--dixi .hd-brand-story {
  background: #e9edf0;
}

.hd-brand--dixi .hd-brand-story .hd-kicker,
body.hd-brand-page--dixi .hd-brand-story .hd-kicker {
  color: #1f5b46;
}

.hd-brand--dixi .hd-brand-facts,
.hd-brand--dixi .hd-brand-faq,
body.hd-brand-page--dixi .hd-brand-facts,
body.hd-brand-page--dixi .hd-brand-faq {
  background: #ffffff;
}

body.hd-brand-page--dixi #filters-wrapper,
body.hd-brand-page--dixi #category-header,
body.hd-brand-page--dixi #products,
body.hd-brand-page--dixi .listingControls {
  font-family: var(--hd-brand-font);
}

body.hd-brand-page--dixi #category-header {
  border-top: 0;
}

@media (max-width: 47.99rem) {
  .hd-brand--dixi .hd-brand-hero__media img,
  body.hd-brand-page--dixi .hd-brand-hero__media img {
    object-position: 50% 38%;
  }
}