:root {
  --dh-cream: #fbfaf6;
  --dh-green: #002d1e;
  --dh-orange: #dc4213;
  --dh-red: #c5492a;
  --dh-brown-1: #1b0e0b;
  --dh-brown-2: #230f07;
  --dh-burnt: #761800;
  --dh-gold: #d7a353;
  --dh-gold-kicker: #cba36a;
  --dh-cream-on-dark: #fdf4e4;
  --dh-card-border: #f4e9da;
  --dh-footer-bg: #f9f9fa;

  --color-page-background: 251, 250, 246 !important;
  --color-text: 0, 45, 30 !important;
  --color-headings-text: 0, 45, 30 !important;

  --page-width: 1600px !important;
  --page-padding: 32px !important;
}

@media (min-width: 1920px) {
  :root {
    --page-padding: 160px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --page-padding: 16px !important;
  }
}

/* Shopline color schemes (.color-scheme-1..N on body) re-declare --color-text
   SCOPED on the element, so a :root override is shadowed. Re-point the scheme's text token
   to the brand green at the scheme scope. color-scheme-1 is the homepage default (cream bg). */
body[class*="color-scheme-1"] {
  --color-text: 0, 45, 30 !important;
  --color-headings-text: 0, 45, 30 !important;
}

/* Override the Shopline "Fashion" theme defaults (body→Poppins, headings→Jost, 16px, theme text color).
   `html body` raises specificity above the theme-default body rule; !important on the declarations it still loses to. */
html body,
body,
html {
  font-family: 'GalanoGrotesque', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400;
  font-size: 18px !important;
  line-height: 27px !important;
  color: rgb(var(--color-text)) !important;
}

@media (max-width: 768px) {
  html body,
  body,
  html {
    font-size: 15px !important;
    line-height: 22.5px !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Clever', Georgia, 'Times New Roman', serif !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (max-width: 959px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}
:root {
  --body-scrollbar-width: 17px;
}
@supports (-webkit-appearance: none) {
  :root {
    --body-scrollbar-width: 15px;
  }
}
body {
  --body-container-width: calc(100vw - var(--body-scrollbar-width));

  width: 100%;
  margin: 0;
}
body,
html {
  color: rgba(var(--color-text));
  background-color: rgb(var(--color-page-background));
}
ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
dl {
  margin-block: 0;
}
dd {
  margin-inline-start: 0;
}
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty,
section:empty,
article:empty,
p:empty,
a:empty,
ol:empty,
ul:empty,
dl:empty,
summary:empty {
  display: none;
}
a:not([href]) {
  cursor: not-allowed;
}
a:not(.button),
a:not(.button):hover {
  color: rgba(var(--color-button-text-link, --color-text), 1);
  text-decoration: none;
}
svg.icon circle,
svg.icon path {
  vector-effect: non-scaling-stroke;
}
p:first-child {
  margin-block-start: 0;
}
p:last-child {
  margin-block-end: 0;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
summary {
  position: relative;
  display: inline-block;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
summary::-webkit-details-marker {
  display: none;
}
:root {
  --z-index-hover: 1;
  --z-index-active: 2;
  --z-index-focus: 3;
  --z-index-sticky: 1000;
  --z-index-dropdown: 1010;
  --z-index-fixed: 1020;
  --z-index-modal: 1030;
  --z-index-popover: 1040;
  --z-index-tooltip: 1050;
  --z-index-toast: 1060;
}
:root {
  --page-padding: 30px;
}
@media (max-width: 959px) {
  :root {
    --page-padding: 20px;
  }
}
.page-width {
  width: 100%;
  max-width: calc(var(--page-padding) * 2 + var(--page-width));
  padding-inline: var(--page-padding);
  margin-inline: auto;
}
.page-width.page-width--fluid {
  max-width: 100%;
}
.page-width.page-width--thin {
  max-width: 726px;
}
@media (max-width: 959px) {
  .page-width {
    max-width: 100%;
    padding-inline: var(--page-padding);
  }
}
.grid {
  --column-gap: var(--grid-horizontal-spacing);
  --row-gap: var(--grid-vertical-spacing);

  display: grid;
  grid-auto-columns: var(--column-width);
  grid-auto-flow: column;
  gap: var(--row-gap) var(--column-gap);
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 959px) {
  .grid {
    --column-gap: calc(var(--grid-horizontal-spacing) / 2);
    --row-gap: calc(var(--grid-vertical-spacing) / 2);
    --column-width: calc(
      (
          100% - var(--column-gap, 0px) *
            (var(--mobile-gap-columns, var(--mobile-columns)) - 1)
        ) /
        var(--mobile-columns)
    );

    grid-template-rows: repeat(var(--mobile-rows, auto), auto);
    grid-template-columns: repeat(var(--mobile-columns), var(--column-width));
    grid-auto-flow: var(--mobile-auto-flow);
  }
}
@media (min-width: 960px) {
  .grid {
    --column-width: calc(
      (
          100% - var(--column-gap, 0px) *
            (var(--desktop-gap-columns, var(--desktop-columns)) - 1)
        ) /
        var(--desktop-columns)
    );

    grid-template-rows: repeat(var(--desktop-rows, auto), auto);
    grid-template-columns: repeat(var(--desktop-columns), var(--column-width));
    grid-auto-flow: var(--desktop-auto-flow);
  }
}
.button,
.shopline-element-buy-now {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--button-border-thickness) + 9px)
    calc(var(--button-border-thickness) + 18px);
  font-family: var(--sort-body-font);
  font-size: var(--body2-font-size);
  font-weight: var(--body-bold-font-weight);
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-button-text));
  text-align: center;
  text-decoration: none;
  letter-spacing: var(--sort-body-letter-spacing);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: rgba(
    var(--color-button-background),
    var(--button-background-opacity)
  );
  border: none;
  border-radius: var(--button-border-radius);
  transition: opacity 150ms ease-in-out;

  --border-opacity: calc(100% - var(--button-border-opacity));
  --alpha-button-background: 1;
}
.button:not(.button--link, .button--text, .button--icon),
.shopline-element-buy-now {
  white-space: nowrap;
  box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y)
    var(--button-shadow-blur)
    rgba(var(--color-shadow), var(--button-shadow-opacity));
}
.button:not(.button--link, .button--text, .button--icon)::after,
.shopline-element-buy-now::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: var(--button-border-radius);
  box-shadow:
    0 0 0 var(--button-border-thickness, 1px)
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--button-border-thickness, 1px)
      rgba(var(--color-button-background), var(--alpha-button-background));
  transition: box-shadow var(--duration-short, 0.3s) ease;
}
.button:disabled,
.button.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.button:not([disabled], .button--icon):hover,
.shopline-element-buy-now:hover {
  background-color: rgba(
    var(--color-button-background),
    calc(var(--button-background-opacity) - 10%)
  );
}
.button:not([disabled], .button--icon):hover::after,
.shopline-element-buy-now:hover::after {
  box-shadow:
    0 0 0 calc(var(--button-border-thickness) + 1px)
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--button-border-thickness) + 1px)
      rgba(var(--color-button-background), var(--alpha-button-background));
}
.button:not([disabled], .button--icon)::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: "";
}
.button:not([disabled], .button--icon):active::after {
  animation: animation-button-press linear 0.6s 1;
  animation-fill-mode: forwards;
}
@keyframes animation-button-press {
  0% {
    background-color: rgba(var(--color-button-text), 0.08);
    background-image: radial-gradient(
      circle,
      rgba(var(--color-button-text), 0.08) 1%,
      transparent 1%
    );
    background-repeat: no-repeat;
    background-position: 50%;
    background-origin: padding-box;
    background-size: 100%;
  }

  100% {
    background-position: 50%;
    background-size: 25000%;
  }
}
.button--secondary {
  --color-button-background: var(--color-button-secondary-background);
  --color-button-text: var(--color-button-secondary-text);
  --border-opacity: var(--button-border-opacity);
}
.button--secondary:not(.button--link, .button--text)::after {
  box-shadow: 0 0 0 var(--button-border-thickness, 1px)
    rgba(var(--color-button-secondary-border), var(--button-border-opacity));
}
.button--secondary:not(.button--link, .button--text):active::after {
  box-shadow:
    0 0 0 rgb(var(--color-button-secondary-border)),
    inset var(--button-border-thickness, 1px) 0 0
      rgba(var(--color-button-secondary-border), var(--button-border-opacity)),
    inset 0 var(--button-border-thickness, 1px) 0
      rgba(var(--color-button-secondary-border), var(--button-border-opacity));
}
.button--link {
  --color-button-background: transparent;
  --color-button-text: rgb(var(--color-text));

  position: relative;
  padding: 0 1px;
  text-decoration: underline !important;
  text-underline-offset: 6px;
}
.button--text {
  --color-button-background: transparent;
  --color-button-text: rgb(var(--color-text));

  position: relative;
  padding: 0 1px;
}
.button__spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  width: 20px;
  height: 20px;
  margin-block-start: -10px;
  margin-inline-start: -10px;
  color: rgb(var(--color-button-text));
}
.button.loading {
  color: transparent;
}
.button.loading .button__spinner {
  display: flex;
  animation: animation-circling linear 1.5s infinite;
}
.button--fill {
  width: 100%;
}
.button--icon {
  position: relative;
  display: inline-flex;
  padding: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
  transition: transform 300ms;
}
@media (min-width: 960px) {
  .button--icon:hover,
  .button--icon:focus {
    transform: scale(1.11);
  }
}
.button--icon::after {
  display: none;
}
.button.button--icon:hover {
  background-color: transparent;
  box-shadow: none;
}
.loading--rotator {
  display: none;
}
.loading .loading--rotator {
  animation: animation-circling linear 1.5s infinite;
}
.loading > .loading--rotator {
  display: inline-flex;
}
.button.loading .loading--rotator {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: flex;
  width: 20px;
  height: 20px;
  margin-block-start: -10px;
  margin-inline-start: -10px;
  color: rgb(var(--color-button-text));
  content: "";
}
.field {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-block-end: 20px;
  font-size: var(--body4-font-size);
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
  transition: all 300ms;
}
@media (max-width: 959px) {
  .field {
    margin-block-end: 16px;
  }
}
.field::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  border-color: rgba(var(--color-text), var(--input-border-opacity));
  border-style: solid;
  border-width: var(--input-border-thickness);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y)
    var(--input-shadow-blur)
    rgba(var(--color-text), var(--input-shadow-opacity));
  transition: border-color 300ms;
}
.field__inner {
  position: relative;
  flex: 1;
}
.field__group {
  display: flex;
  gap: 16px;
}
.field__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 16px 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: inherit;
  color: rgb(var(--color-light-text));
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: break-word;
  pointer-events: none;
  transition: transform 300ms ease;
  transform: translateY(-50%);
  transform-origin: left top;
  -webkit-box-orient: vertical;
}
.field__input {
  width: 100%;
  padding: 24px 16px 10px;
  font-size: inherit;
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-text));
  appearance: none;
  background: none;
  border: none;
  outline: none;
  box-shadow: none !important;
}
.field__input::placeholder {
  opacity: 0;
}
.field__input::-webkit-search-cancel-button {
  display: none;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: normal;
  white-space: nowrap;
  transform: scale(0.7) translate(0, -120%);
  -webkit-box-orient: vertical;
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
.field__input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgb(var(--color-background)) inset !important;
  -webkit-text-fill-color: rgb(var(--color-text));
}
.field__input.textarea {
  min-height: 100px;
  padding-block: 0;
  padding-inline: 16px;
  margin-block: 20px 6px;
  resize: none;
}
.field__input.textarea + .field__label {
  inset-block-start: 25px;
}
.field__suffix {
  display: flex;
  justify-content: center;
  padding-block: 6px;
  padding-inline-end: 10px;
}
.field__info {
  display: flex;
  font-size: 12px;
  line-height: 1.4;
}
.field__info > svg {
  margin-inline-end: 4px;
}
.field__info--error {
  margin-block: -10px 20px;
  font-size: var(--body6-font-size);
  color: rgb(var(--color-error-message));
}
.field__info--error:empty {
  display: none;
}
@media (min-width: 960px) {
  .field__info > svg {
    margin-inline-end: 8px;
  }
}
.field:hover::after {
  border-color: rgba(var(--color-text), var(--input-border-opacity));
  border-width: calc(var(--input-border-thickness) + 1px);
}
.field:focus::after,
.field:focus-within::after {
  border-color: rgba(var(--color-text), var(--input-border-opacity));
  border-width: calc(var(--input-border-thickness) + 1px);
}
.field--disabled {
  pointer-events: none;
}
.field--disabled::after {
  background-color: rgb(0 0 0 / 10%);
  border-color: rgb(0 0 0 / 10%);
}
.field--error::after {
  border-color: rgba(var(--color-error-message), var(--input-border-opacity));
  border-width: calc(var(--input-border-thickness) + 1px);
}
.field--normal .field__input {
  padding: 13px 16px;
}
.field--normal .field__input::placeholder {
  opacity: 1;
}
.field--normal .field__input ~ .field__label,
.field--normal .field__input:focus ~ .field__label,
.field--normal .field__input:not(:placeholder-shown) ~ .field__label,
.field--normal .field__input:-webkit-autofill ~ .field__label {
  display: none;
}
.field-checkbox {
  position: relative;
  inset-block-start: 0.2em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  outline: none;
}
.field-checkbox input[type="checkbox"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: auto;
  cursor: pointer;
  opacity: 0;
}
.field-checkbox .checkbox {
  position: relative;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-collapse: separate;
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: 2px;
  transition: all 0.3s;
  direction: ltr;
}
.field-checkbox .checkbox::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 21.5%;
  display: table;
  width: 6px;
  height: 8px;
  content: " ";
  border: 2px solid rgb(var(--color-button-text));
  border-block-start: 0;
  border-inline-start: 0;
  opacity: 0;
  transition:
    all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
    opacity 0.1s;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
}
.field-checkbox input[type="checkbox"]:checked + .checkbox {
  background-color: rgb(var(--color-button-background));
  border-color: rgb(var(--color-button-background));
}
.field-checkbox input[type="checkbox"]:checked + .checkbox::after {
  position: absolute;
  display: table;
  content: " ";
  border: 2px solid rgb(var(--color-button-text));
  border-block-start: 0;
  border-inline-start: 0;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
}
.field select ~ .icon-arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  margin-block: auto;
  margin-inline: auto;
  pointer-events: none;
}
.field-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.field-switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: rgba(var(--color-text), 0.1);
  border-radius: 20px;
  transition: 0.2s;
}
.field-switch-slider::before {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  content: "";
  background-color: rgb(var(--color-page-background));
  border-radius: 50%;
  transition: 0.2s;
}
.field-switch input {
  width: 0;
  height: 0;
  opacity: 0;
}
.field-switch input:checked + .field-switch-slider {
  background-color: rgba(var(--color-text), 1);
}
.field-switch input:checked + .field-switch-slider::before {
  transform: translateX(20px);
}
.field-radio {
  position: relative;
  margin-inline-end: 8px;
}
.field-radio-wrapper {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 20px;
  cursor: pointer;
}
.field-radio-wrapper:last-child {
  margin-inline-end: 0;
}
.field-radio .radio {
  position: relative;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 16px;
  height: 16px;
  border-collapse: separate;
  background-color: rgb(var(--color-page-background));
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: 50%;
  transition: all 0.3s;
}
.field-radio .radio::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 16px;
  height: 16px;
  margin-block-start: -8px;
  margin-inline-start: -8px;
  content: "";
  background-color: rgb(var(--color-button-background));
  border-radius: 16px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transform: scale(0);
}
.field-radio > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.field-radio > input:checked + .radio {
  border-color: rgb(var(--color-button-background));
}
.field-radio > input:checked + .radio::after {
  opacity: 1;
  transform: scale(0.5);
}
.form__error-message {
  margin-block: -10px 20px;
  font-size: var(--body6-font-size);
  color: rgb(var(--color-error-message));
}
.form__error-message:empty {
  display: none;
}
@media (max-width: 959px) {
  .form__error-message {
    margin-block: -8px 16px;
  }
}
@keyframes animation-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes animation-fade-in-center {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-zoom-in {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes animation-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes animation-slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes animation-circling {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(1turn);
  }
}
@keyframes animation-dropdown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes column-fade-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
:root {
  --title1-font-size: calc(var(--sort-title-size) * 2.3333);
  --title2-font-size: calc(var(--sort-title-size) * 1.6667);
  --title3-font-size: calc(var(--sort-title-size) * 1.2);
  --title4-font-size: calc(var(--sort-title-size) * 1);
  --title5-font-size: calc(var(--sort-title-size) * 0.8333);
  --title6-font-size: calc(var(--sort-title-size) * 0.6667);
  --body1-font-size: calc(var(--sort-body-size) * 1.5714);
  --body2-font-size: calc(var(--sort-body-size) * 1.2857);
  --body3-font-size: calc(var(--sort-body-size) * 1.1429);
  --body4-font-size: calc(var(--sort-body-size) * 1);
  --body5-font-size: calc(var(--sort-body-size) * 0.9286);
  --body6-font-size: calc(var(--sort-body-size) * 0.8571);
  --title0-font-size-mobile-ratio: 30 / 70;
  --title1-font-size-mobile-ratio: 30 / 70;
  --title2-font-size-mobile-ratio: 25 / 48;
  --title3-font-size-mobile-ratio: 24 / 36;
  --title4-font-size-mobile-ratio: 22 / 30;
  --title5-font-size-mobile-ratio: 20 / 25;
  --title6-font-size-mobile-ratio: 18 / 20;
  --body0-font-size-mobile-ratio: 14 / 16;
  --body1-font-size-mobile-ratio: 16 / 22;
  --body2-font-size-mobile-ratio: 15 / 18;
  --body3-font-size-mobile-ratio: 14 / 16;
  --body4-font-size-mobile-ratio: 13 / 14;
  --body5-font-size-mobile-ratio: 12 / 13;
  --body6-font-size-mobile-ratio: 1;
}
@media (max-width: 959px) {
  :root {
    --title1-font-size: calc(var(--sort-title-size) * 1);
    --title2-font-size: calc(var(--sort-title-size) * 0.8333);
    --title3-font-size: calc(var(--sort-title-size) * 0.7333);
    --title4-font-size: calc(var(--sort-title-size) * 0.6667);
    --title5-font-size: calc(var(--sort-title-size) * 0.6);
    --title6-font-size: calc(var(--sort-title-size) * 0.6);
    --body1-font-size: calc(var(--sort-body-size) * 1.1429);
    --body2-font-size: calc(var(--sort-body-size) * 1.0714);
    --body3-font-size: calc(var(--sort-body-size) * 1);
    --body4-font-size: calc(var(--sort-body-size) * 0.9286);
    --body5-font-size: calc(var(--sort-body-size) * 0.8571);
    --body6-font-size: calc(var(--sort-body-size) * 0.8571);
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
.title0,
.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
  margin-block: 0;
  font-family: var(--sort-title-font);
  font-size: var(--sort-title-size);
  font-style: var(--sort-title-font-style);
  font-weight: var(--sort-title-font-weight, 700);
  line-height: var(--sort-title-line-height);
  text-transform: var(--sort-title-text-transform);
  letter-spacing: var(--sort-title-letter-spacing);
  word-break: break-word;
}
h1.body-font-bold,
h1.title-font-bold,
h2.body-font-bold,
h2.title-font-bold,
h3.body-font-bold,
h3.title-font-bold,
h4.body-font-bold,
h4.title-font-bold,
h5.body-font-bold,
h5.title-font-bold,
h6.body-font-bold,
h6.title-font-bold,
.title0.body-font-bold,
.title0.title-font-bold,
.title1.body-font-bold,
.title1.title-font-bold,
.title2.body-font-bold,
.title2.title-font-bold,
.title3.body-font-bold,
.title3.title-font-bold,
.title4.body-font-bold,
.title4.title-font-bold,
.title5.body-font-bold,
.title5.title-font-bold,
.title6.body-font-bold,
.title6.title-font-bold {
  font-weight: calc(var(--sort-title-font-weight, 700) + 300) !important;
}
@media (max-width: 959px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .title0,
  .title1,
  .title2,
  .title3,
  .title4,
  .title5,
  .title6,
  .mobile-title0,
  .mobile-title1,
  .mobile-title2,
  .mobile-title3,
  .mobile-title4,
  .mobile-title5,
  .mobile-title6 {
    font-family: var(--sort-title-font-mobile, var(--sort-title-font));
    font-size: var(--sort-title-size-mobile, var(--sort-title-size));
    font-style: var(
      --sort-title-font-style-mobile,
      var(--sort-title-font-style)
    );
    font-weight: var(
      --sort-title-font-weight-mobile,
      var(--sort-title-font-weight, 700)
    );
    line-height: var(
      --sort-title-line-height-mobile,
      var(--sort-title-line-height)
    );
    text-transform: var(
      --sort-title-text-transform-mobile,
      var(--sort-title-text-transform)
    );
    letter-spacing: var(
      --sort-title-letter-spacing-mobile,
      var(--sort-title-letter-spacing)
    );
  }

  h1.body-font-bold,
  h1.title-font-bold,
  h2.body-font-bold,
  h2.title-font-bold,
  h3.body-font-bold,
  h3.title-font-bold,
  h4.body-font-bold,
  h4.title-font-bold,
  h5.body-font-bold,
  h5.title-font-bold,
  h6.body-font-bold,
  h6.title-font-bold,
  .title0.body-font-bold,
  .title0.title-font-bold,
  .title1.body-font-bold,
  .title1.title-font-bold,
  .title2.body-font-bold,
  .title2.title-font-bold,
  .title3.body-font-bold,
  .title3.title-font-bold,
  .title4.body-font-bold,
  .title4.title-font-bold,
  .title5.body-font-bold,
  .title5.title-font-bold,
  .title6.body-font-bold,
  .title6.title-font-bold,
  .mobile-title0.body-font-bold,
  .mobile-title0.title-font-bold,
  .mobile-title1.body-font-bold,
  .mobile-title1.title-font-bold,
  .mobile-title2.body-font-bold,
  .mobile-title2.title-font-bold,
  .mobile-title3.body-font-bold,
  .mobile-title3.title-font-bold,
  .mobile-title4.body-font-bold,
  .mobile-title4.title-font-bold,
  .mobile-title5.body-font-bold,
  .mobile-title5.title-font-bold,
  .mobile-title6.body-font-bold,
  .mobile-title6.title-font-bold {
    font-weight: calc(
      var(--sort-title-font-weight-mobile, var(--sort-title-font-weight, 700)) +
        300
    ) !important;
  }
}
.title0 {
  --sort-title-font: var(--sort-title0-font);
  --sort-title-size: var(--sort-title0-size);
  --sort-title-size-mobile: calc(
    var(--sort-title0-size) * var(--title0-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title0-font-style);
  --sort-title-font-weight: var(--sort-title0-font-weight);
  --sort-title-line-height: var(--sort-title0-line-height);
  --sort-title-text-transform: var(--sort-title0-text-transform);
  --sort-title-letter-spacing: var(--sort-title0-letter-spacing);
}
h1,
.title1 {
  --sort-title-font: var(--sort-title1-font);
  --sort-title-size: var(--sort-title1-size);
  --sort-title-size-mobile: calc(
    var(--sort-title1-size) * var(--title1-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title1-font-style);
  --sort-title-font-weight: var(--sort-title1-font-weight);
  --sort-title-line-height: var(--sort-title1-line-height);
  --sort-title-text-transform: var(--sort-title1-text-transform);
  --sort-title-letter-spacing: var(--sort-title1-letter-spacing);
}
h2,
.title2 {
  --sort-title-font: var(--sort-title2-font);
  --sort-title-size: var(--sort-title2-size);
  --sort-title-size-mobile: calc(
    var(--sort-title2-size) * var(--title2-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title2-font-style);
  --sort-title-font-weight: var(--sort-title2-font-weight);
  --sort-title-line-height: var(--sort-title2-line-height);
  --sort-title-text-transform: var(--sort-title2-text-transform);
  --sort-title-letter-spacing: var(--sort-title2-letter-spacing);
}
h3,
.title3 {
  --sort-title-font: var(--sort-title3-font);
  --sort-title-size: var(--sort-title3-size);
  --sort-title-size-mobile: calc(
    var(--sort-title3-size) * var(--title3-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title3-font-style);
  --sort-title-font-weight: var(--sort-title3-font-weight);
  --sort-title-line-height: var(--sort-title3-line-height);
  --sort-title-text-transform: var(--sort-title3-text-transform);
  --sort-title-letter-spacing: var(--sort-title3-letter-spacing);
}
h4,
.title4 {
  --sort-title-font: var(--sort-title4-font);
  --sort-title-size: var(--sort-title4-size);
  --sort-title-size-mobile: calc(
    var(--sort-title4-size) * var(--title4-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title4-font-style);
  --sort-title-font-weight: var(--sort-title4-font-weight);
  --sort-title-line-height: var(--sort-title4-line-height);
  --sort-title-text-transform: var(--sort-title4-text-transform);
  --sort-title-letter-spacing: var(--sort-title4-letter-spacing);
}
h5,
.title5 {
  --sort-title-font: var(--sort-title5-font);
  --sort-title-size: var(--sort-title5-size);
  --sort-title-size-mobile: calc(
    var(--sort-title5-size) * var(--title5-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title5-font-style);
  --sort-title-font-weight: var(--sort-title5-font-weight);
  --sort-title-line-height: var(--sort-title5-line-height);
  --sort-title-text-transform: var(--sort-title5-text-transform);
  --sort-title-letter-spacing: var(--sort-title5-letter-spacing);
}
h6,
.title6 {
  --sort-title-font: var(--sort-title6-font);
  --sort-title-size: var(--sort-title6-size);
  --sort-title-size-mobile: calc(
    var(--sort-title6-size) * var(--title6-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title6-font-style);
  --sort-title-font-weight: var(--sort-title6-font-weight);
  --sort-title-line-height: var(--sort-title6-line-height);
  --sort-title-text-transform: var(--sort-title6-text-transform);
  --sort-title-letter-spacing: var(--sort-title6-letter-spacing);
}
.mobile-title0 {
  --sort-title-font-mobile: var(--sort-title0-font);
  --sort-title-size-mobile: calc(
    var(--sort-title0-size) * var(--title0-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title0-font-style);
  --sort-title-font-weight-mobile: var(--sort-title0-font-weight);
  --sort-title-line-height-mobile: var(--sort-title0-line-height);
  --sort-title-text-transform-mobile: var(--sort-title0-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title0-letter-spacing);
}
h1.mobile-typography-default,
.mobile-title1 {
  --sort-title-font-mobile: var(--sort-title1-font);
  --sort-title-size-mobile: calc(
    var(--sort-title1-size) * var(--title1-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title1-font-style);
  --sort-title-font-weight-mobile: var(--sort-title1-font-weight);
  --sort-title-line-height-mobile: var(--sort-title1-line-height);
  --sort-title-text-transform-mobile: var(--sort-title1-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title1-letter-spacing);
}
h2.mobile-typography-default,
.mobile-title2 {
  --sort-title-font-mobile: var(--sort-title2-font);
  --sort-title-size-mobile: calc(
    var(--sort-title2-size) * var(--title2-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title2-font-style);
  --sort-title-font-weight-mobile: var(--sort-title2-font-weight);
  --sort-title-line-height-mobile: var(--sort-title2-line-height);
  --sort-title-text-transform-mobile: var(--sort-title2-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title2-letter-spacing);
}
h3.mobile-typography-default,
.mobile-title3 {
  --sort-title-font-mobile: var(--sort-title3-font);
  --sort-title-size-mobile: calc(
    var(--sort-title3-size) * var(--title3-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title3-font-style);
  --sort-title-font-weight-mobile: var(--sort-title3-font-weight);
  --sort-title-line-height-mobile: var(--sort-title3-line-height);
  --sort-title-text-transform-mobile: var(--sort-title3-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title3-letter-spacing);
}
h4.mobile-typography-default,
.mobile-title4 {
  --sort-title-font-mobile: var(--sort-title4-font);
  --sort-title-size-mobile: calc(
    var(--sort-title4-size) * var(--title4-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title4-font-style);
  --sort-title-font-weight-mobile: var(--sort-title4-font-weight);
  --sort-title-line-height-mobile: var(--sort-title4-line-height);
  --sort-title-text-transform-mobile: var(--sort-title4-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title4-letter-spacing);
}
h5.mobile-typography-default,
.mobile-title5 {
  --sort-title-font-mobile: var(--sort-title5-font);
  --sort-title-size-mobile: calc(
    var(--sort-title5-size) * var(--title5-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title5-font-style);
  --sort-title-font-weight-mobile: var(--sort-title5-font-weight);
  --sort-title-line-height-mobile: var(--sort-title5-line-height);
  --sort-title-text-transform-mobile: var(--sort-title5-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title5-letter-spacing);
}
h6.mobile-typography-default,
.mobile-title6 {
  --sort-title-font-mobile: var(--sort-title6-font);
  --sort-title-size-mobile: calc(
    var(--sort-title6-size) * var(--title6-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title6-font-style);
  --sort-title-font-weight-mobile: var(--sort-title6-font-weight);
  --sort-title-line-height-mobile: var(--sort-title6-line-height);
  --sort-title-text-transform-mobile: var(--sort-title6-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title6-letter-spacing);
}
.body0,
.body1,
.body2,
.body3,
.body4,
.body5,
.body6 {
  font-family: var(--sort-body-font);
  font-size: var(--sort-body-size);
  font-style: var(--sort-body-font-style);
  font-weight: var(--sort-body-font-weight, 400);
  line-height: var(--sort-body-line-height);
  letter-spacing: var(--sort-body-letter-spacing);
  word-break: break-word;
}
.body0.body-font-bold,
.body0.title-font-bold,
.body1.body-font-bold,
.body1.title-font-bold,
.body2.body-font-bold,
.body2.title-font-bold,
.body3.body-font-bold,
.body3.title-font-bold,
.body4.body-font-bold,
.body4.title-font-bold,
.body5.body-font-bold,
.body5.title-font-bold,
.body6.body-font-bold,
.body6.title-font-bold {
  font-weight: calc(var(--sort-body-font-weight, 400) + 300) !important;
}
@media (max-width: 959px) {
  .body0,
  .body1,
  .body2,
  .body3,
  .body4,
  .body5,
  .body6,
  .mobile-body0,
  .mobile-body1,
  .mobile-body2,
  .mobile-body3,
  .mobile-body4,
  .mobile-body5,
  .mobile-body6 {
    font-family: var(--sort-body-font-mobile, var(--sort-body-font));
    font-size: var(--sort-body-size-mobile, var(--sort-body-size));
    font-style: var(--sort-body-font-style-mobile, var(--sort-body-font-style));
    font-weight: var(
      --sort-body-font-weight-mobile,
      var(--sort-body-font-weight, 700)
    );
    line-height: var(
      --sort-body-line-height-mobile,
      var(--sort-body-line-height)
    );
    letter-spacing: var(
      --sort-body-letter-spacing-mobile,
      var(--sort-body-letter-spacing)
    );
  }

  .body0.body-font-bold,
  .body0.title-font-bold,
  .body1.body-font-bold,
  .body1.title-font-bold,
  .body2.body-font-bold,
  .body2.title-font-bold,
  .body3.body-font-bold,
  .body3.title-font-bold,
  .body4.body-font-bold,
  .body4.title-font-bold,
  .body5.body-font-bold,
  .body5.title-font-bold,
  .body6.body-font-bold,
  .body6.title-font-bold,
  .mobile-body0.body-font-bold,
  .mobile-body0.title-font-bold,
  .mobile-body1.body-font-bold,
  .mobile-body1.title-font-bold,
  .mobile-body2.body-font-bold,
  .mobile-body2.title-font-bold,
  .mobile-body3.body-font-bold,
  .mobile-body3.title-font-bold,
  .mobile-body4.body-font-bold,
  .mobile-body4.title-font-bold,
  .mobile-body5.body-font-bold,
  .mobile-body5.title-font-bold,
  .mobile-body6.body-font-bold,
  .mobile-body6.title-font-bold {
    font-weight: calc(
      var(--sort-body-font-weight-mobile, var(--sort-body-font-weight, 700)) +
        300
    ) !important;
  }
}
.body0 {
  --sort-body-font: var(--sort-body0-font);
  --sort-body-size: var(--sort-body0-size);
  --sort-body-size-mobile: calc(
    var(--sort-body0-size) * var(--body0-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body0-style);
  --sort-body-font-weight: var(--sort-body0-font-weight);
  --sort-body-line-height: var(--sort-body0-line-height);
  --sort-body-letter-spacing: var(--sort-body0-letter-spacing);
}
.body1 {
  --sort-body-font: var(--sort-body1-font);
  --sort-body-size: var(--sort-body1-size);
  --sort-body-size-mobile: calc(
    var(--sort-body1-size) * var(--body1-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body1-style);
  --sort-body-font-weight: var(--sort-body1-font-weight);
  --sort-body-line-height: var(--sort-body1-line-height);
  --sort-body-letter-spacing: var(--sort-body1-letter-spacing);
}
.body2 {
  --sort-body-font: var(--sort-body2-font);
  --sort-body-size: var(--sort-body2-size);
  --sort-body-size-mobile: calc(
    var(--sort-body2-size) * var(--body2-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body2-style);
  --sort-body-font-weight: var(--sort-body2-font-weight);
  --sort-body-line-height: var(--sort-body2-line-height);
  --sort-body-letter-spacing: var(--sort-body2-letter-spacing);
}
.body3 {
  --sort-body-font: var(--sort-body3-font);
  --sort-body-size: var(--sort-body3-size);
  --sort-body-size-mobile: calc(
    var(--sort-body3-size) * var(--body3-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body3-style);
  --sort-body-font-weight: var(--sort-body3-font-weight);
  --sort-body-line-height: var(--sort-body3-line-height);
  --sort-body-letter-spacing: var(--sort-body3-letter-spacing);
}
.body4 {
  --sort-body-font: var(--sort-body4-font);
  --sort-body-size: var(--sort-body4-size);
  --sort-body-size-mobile: calc(
    var(--sort-body4-size) * var(--body4-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body4-style);
  --sort-body-font-weight: var(--sort-body4-font-weight);
  --sort-body-line-height: var(--sort-body4-line-height);
  --sort-body-letter-spacing: var(--sort-body4-letter-spacing);
}
.body5 {
  --sort-body-font: var(--sort-body5-font);
  --sort-body-size: var(--sort-body5-size);
  --sort-body-size-mobile: calc(
    var(--sort-body5-size) * var(--body5-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body5-style);
  --sort-body-font-weight: var(--sort-body5-font-weight);
  --sort-body-line-height: var(--sort-body5-line-height);
  --sort-body-letter-spacing: var(--sort-body5-letter-spacing);
}
.body6 {
  --sort-body-font: var(--sort-body6-font);
  --sort-body-size: var(--sort-body6-size);
  --sort-body-size-mobile: calc(
    var(--sort-body6-size) * var(--body6-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body6-style);
  --sort-body-font-weight: var(--sort-body6-font-weight);
  --sort-body-line-height: var(--sort-body6-line-height);
  --sort-body-letter-spacing: var(--sort-body6-letter-spacing);
}
.mobile-body0 {
  --sort-body-font-mobile: var(--sort-body0-font);
  --sort-body-size-mobile: calc(
    var(--sort-body0-size) * var(--body0-font-size-mobile-ratio)
  );
  --sort-body-font-weight-mobile: var(--sort-body0-font-weight);
  --sort-body-font-style-mobile: var(--sort-body0-style);
  --sort-body-line-height-mobile: var(--sort-body0-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body0-letter-spacing);
}
.mobile-body1 {
  --sort-body-font-mobile: var(--sort-body1-font);
  --sort-body-size-mobile: calc(
    var(--sort-body1-size) * var(--body1-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body1-style);
  --sort-body-font-weight-mobile: var(--sort-body1-font-weight);
  --sort-body-line-height-mobile: var(--sort-body1-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body1-letter-spacing);
}
.mobile-body2 {
  --sort-body-font-mobile: var(--sort-body2-font);
  --sort-body-size-mobile: calc(
    var(--sort-body2-size) * var(--body2-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body2-style);
  --sort-body-font-weight-mobile: var(--sort-body2-font-weight);
  --sort-body-line-height-mobile: var(--sort-body2-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body2-letter-spacing);
}
.mobile-body3 {
  --sort-body-font-mobile: var(--sort-body3-font);
  --sort-body-size-mobile: calc(
    var(--sort-body3-size) * var(--body3-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body3-style);
  --sort-body-font-weight-mobile: var(--sort-body3-font-weight);
  --sort-body-line-height-mobile: var(--sort-body3-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body3-letter-spacing);
}
.mobile-body4 {
  --sort-body-font-mobile: var(--sort-body4-font);
  --sort-body-size-mobile: calc(
    var(--sort-body4-size) * var(--body4-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body4-style);
  --sort-body-font-weight-mobile: var(--sort-body4-font-weight);
  --sort-body-line-height-mobile: var(--sort-body4-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body4-letter-spacing);
}
.mobile-body5 {
  --sort-body-font-mobile: var(--sort-body5-font);
  --sort-body-size-mobile: calc(
    var(--sort-body5-size) * var(--body5-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body5-style);
  --sort-body-font-weight-mobile: var(--sort-body5-font-weight);
  --sort-body-line-height-mobile: var(--sort-body5-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body5-letter-spacing);
}
.mobile-body6 {
  --sort-body-font-mobile: var(--sort-body6-font);
  --sort-body-size-mobile: calc(
    var(--sort-body6-size) * var(--body6-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body6-style);
  --sort-body-font-weight-mobile: var(--sort-body6-font-weight);
  --sort-body-line-height-mobile: var(--sort-body6-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body6-letter-spacing);
}
.title-font-bold {
  font-weight: var(--sort-title-font-weight-bold) !important;
}
.body-font-bold {
  font-weight: var(--sort-body-font-weight-bold) !important;
}
.text-left {
  text-align: start;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: end;
}
@media (max-width: 959px) {
  .text-left-mobile {
    text-align: start;
  }

  .text-center-mobile {
    text-align: center;
  }

  .text-right-mobile {
    text-align: end;
  }
}
.hidden {
  display: none !important;
}
@media (max-width: 959px) {
  .hidden-mobile {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .hidden-desktop {
    display: none !important;
  }
}
.hidden-empty:empty {
  display: none;
}
.overflow-hidden {
  overflow: hidden;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
.flex-justify-center {
  display: flex;
  justify-content: center;
}
.block-full-width {
  display: block;
  width: 100%;
}
.tag-unstyled {
  padding: 0;
  margin: 0;
}
.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}
.font-bold {
  font-weight: bold;
}
.hover-scale .hover-scale__image {
  transition: all 0.5s;
}
.hover-scale:hover .hover-scale__image {
  transform: scale(1.05);
}
.modal-border-shadow {
  box-sizing: border-box;
  border-color: rgba(var(--color-text), var(--modal-border-opacity));
  border-style: solid;
  border-width: var(--modal-border-thickness);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y)
    var(--modal-shadow-blur)
    rgba(var(--color-shadow), var(--modal-shadow-opacity));
}
.product-card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--product-card-border-opacity));
  border-style: solid;
  border-width: var(--product-card-border-thickness) !important;
  border-radius: var(--product-card-border-radius);
  box-shadow: var(--product-card-shadow-offset-x)
    var(--product-card-shadow-offset-y) var(--product-card-shadow-blur)
    rgba(var(--color-shadow), var(--product-card-shadow-opacity));
}
.collection-card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--collection-card-border-opacity));
  border-style: solid;
  border-width: var(--collection-card-border-thickness) !important;
  border-radius: var(--collection-card-border-radius);
  box-shadow: var(--collection-card-shadow-offset-x)
    var(--collection-card-shadow-offset-y) var(--collection-card-shadow-blur)
    rgba(var(--color-shadow), var(--collection-card-shadow-opacity));
}
.article-card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--article-card-border-opacity));
  border-style: solid;
  border-width: var(--article-card-border-thickness) !important;
  border-radius: var(--article-card-border-radius);
  box-shadow: var(--article-card-shadow-offset-x)
    var(--article-card-shadow-offset-y) var(--article-card-shadow-blur)
    rgba(var(--color-shadow), var(--article-card-shadow-opacity));
}
.card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--card-border-opacity));
  border-style: solid;
  border-width: var(--card-border-thickness) !important;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y)
    var(--card-shadow-blur)
    rgba(var(--color-shadow), var(--card-shadow-opacity));
}
.pointer-events {
  pointer-events: none;
}
.schema-background {
  background-color: rgb(var(--color-background));
}
.rte::after {
  display: block;
  clear: both;
  content: "";
}
.rte ul,
.rte ol {
  padding: revert;
  margin: revert;
  list-style: revert;
}
.rte > p:first-child {
  margin-block-start: 0;
}
.rte > p:last-child {
  margin-block-end: 0;
}
.rte a,
.rte a:hover {
  position: relative;
  padding: 0 1px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.rte {
  word-break: break-word;
}
.rte img,
.rte video {
  max-width: 100%;
  height: auto;
}
.rte iframe {
  max-width: 100%;
}
.rte p img {
  vertical-align: bottom;
}
.rte table {
  table-layout: fixed;
}
.icon--checkbox {
  cursor: pointer;
}
.icon--checkbox .filled {
  opacity: 0;
  fill: rgba(var(--color-text, 61, 56, 25), 1);
  stroke: rgba(var(--color-text, 61, 56, 25), 1);
  transition: opacity 0.1s ease;
}
.icon--checkbox .checkmark {
  stroke: rgba(var(--color-button-text, 255, 255, 255), 1);
  transition: stroke-dashoffset 0.3s ease;
}
input:checked ~ .icon--checkbox .filled {
  opacity: 1;
}
input:checked ~ .icon--checkbox .box {
  stroke: rgba(var(--color-entry-line, 232, 232, 225), 1);
}
input:checked ~ .icon--checkbox .checkmark {
  stroke-dashoffset: 0;
}
@layer component {
  theme-input-number {
    --input-padding-inline: 30px;

    position: relative;
    display: inline-flex;
    width: calc(
      4 * var(--sort-body-size) + var(--input-border-thickness) * 2 +
        var(--input-padding-inline) * 2
    );
    color: rgba(var(--color-text));
    background: rgb(var(--color-background));
    border-radius: var(--input-border-radius-outset);
  }

  theme-input-number::before {
    position: absolute;
    inset: 0;
    z-index: var(--z-index-hover);
    pointer-events: none;
    content: "";
    border-radius: var(--input-border-radius-outset);
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y)
      var(--input-shadow-blur)
      rgba(var(--color-text), var(--input-shadow-opacity));
  }

  theme-input-number::after {
    position: absolute;
    inset: var(--input-border-thickness);
    z-index: var(--z-index-hover);
    pointer-events: none;
    content: "";
    border-radius: var(--input-border-radius);
    box-shadow: 0 0 0 var(--input-border-thickness)
      rgba(var(--color-text), var(--input-border-opacity));
    transition: box-shadow 0.2s;
  }
  theme-input-number:hover::after {
    box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px)
      rgba(var(--color-text), var(--input-border-opacity));
  }

  theme-input-number button[name="minus"],
  theme-input-number button[name="plus"] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: 30px;
    padding: 0;
    color: rgb(var(--color-text));
    background: transparent;
    border: 0;
  }

  theme-input-number button[name="minus"]:disabled,
  theme-input-number button[name="plus"]:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
  }

  theme-input-number button[name="minus"] .icon,
  theme-input-number button[name="plus"] .icon {
    width: 10px;
    height: 10px;
    pointer-events: none;
  }

  theme-input-number input[type="number"] {
    flex: 1 0 0;
    width: 100%;
    padding: 0.6em 0;
    color: currentcolor;
    text-align: center;
    appearance: textfield;
    background: transparent;
    border: 0;
    outline-style: none;
  }

  theme-input-number input[type="number"]::-webkit-outer-spin-button,
  theme-input-number input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
  }
  theme-input-number[data-border-style="line"]::before,
  theme-input-number[data-border-style="line"]::after {
    border-radius: 0;
  }

  theme-input-number[data-border-style="line"]::before {
    display: none;
  }

  theme-input-number[data-border-style="line"]::after {
    --box-shadow-thickness: var(--input-border-thickness);

    box-shadow:
      0 calc(1 * var(--box-shadow-thickness)) 0 0
        rgba(var(--color-text), var(--input-border-opacity)),
      0 calc(-1 * var(--box-shadow-thickness)) 0 0
        rgba(var(--color-text), var(--input-border-opacity));
  }

  theme-input-number[data-border-style="line"]:hover::after {
    --box-shadow-thickness: calc(var(--input-border-thickness) + 1px);
  }

  theme-input-number[data-border-style="none"] {
    --input-padding-inline: 40px;
  }

  theme-input-number[data-border-style="none"]::before,
  theme-input-number[data-border-style="none"]::after {
    display: none;
  }

  theme-input-number[data-border-style="none"] button[name="minus"],
  theme-input-number[data-border-style="none"] button[name="plus"] {
    width: 40px;
  }

  theme-input-number[data-border-style="none"] button[name="minus"] .icon,
  theme-input-number[data-border-style="none"] button[name="plus"] .icon {
    width: 20px;
    height: auto;
    padding: 4px;
    color: rgb(var(--color-background));
    background-color: rgb(var(--color-text));
    border-radius: 50%;
  }
}
.country-select {
  position: relative;
  display: flex;
  padding-inline-start: 8px;
}
.country-select__dropdown {
  position: absolute;
  inset: 0;
  appearance: none;
  cursor: pointer;
  border: none;
  opacity: 0;
}
.country-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: 16px;
}
.country-select__trigger span {
  padding-inline-end: 4px;
  color: rgb(var(--color-text));
}
.country-select__trigger::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  content: " ";
  border-inline-start: 1px solid rgb(var(--color-entry-line));
}
@layer component {
  theme-show-more:empty {
    display: none;
  }
  theme-show-more:not([open]) [data-more="true"],
  theme-show-more:not([open]) .view-less {
    display: none !important;
  }
  theme-show-more[open] .view-more {
    display: none !important;
  }
}
.product-price {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.product-price__item {
  display: inline;
}
.product-price__sale {
  color: rgb(var(--color-sale));
}
.product-price__origin {
  color: rgb(var(--color-light-text));
  text-decoration: line-through;
}
.product-price__save--text-style {
  color: rgb(var(--color-discount));
}
.product-price__save--button-style {
  padding: 2px 8px;
  color: rgb(var(--color-tag-text));
  background-color: rgb(var(--color-tag-background));
  border-radius: var(--save-button-radius);
}
theme-sticky-position[data-enforce="true"] {
  display: contents;
}

/* ===== DH HEADER — Drink Hippie parity ===== */
.header {
  background-color: #fcfaf6 !important;
  min-height: 85px !important;
  padding: 18px 32px 16px !important;
}
/* single-row grid: logo left | nav center | icons right */
.header__container-top-wrap {
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}
.header__container-top-wrap > theme-nav-bar {
  grid-column: 2 !important;
  justify-self: center !important;
  order: 0 !important;
}
.header__container-top-wrap > .header__logo {
  grid-column: 1 !important;
  justify-self: start !important;
  order: 0 !important;
}
.header__container-top-wrap > .header-action-bar.right {
  grid-column: 3 !important;
  justify-self: end !important;
  order: 0 !important;
}
.header__container-top-wrap > .header-action-bar.left {
  grid-column: 1 !important;
  order: 0 !important;
}
.header__logo,
.header__heading {
  margin: 0 !important;
}
.header__logo-link {
  display: inline-flex !important;
  align-items: center !important;
}
.dh-header__emblem {
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
}
.header__logo-text {
  display: none !important;
}
/* nav typography — GalanoGrotesque 14/700/0.5px/#151515 (font is on the anchor) */
.header-nav__menu-item > a.header-nav__underline,
.header-nav__menu-item > a.header-nav__underline > span,
.header-nav__menu-item .header-nav__ellipsis {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: #151515 !important;
  line-height: 1.2 !important;
}
.header-nav .header-nav__menu {
  flex-wrap: nowrap !important;
  gap: 0 !important;
  justify-content: center !important;
}
.header-nav .header-nav__menu-item {
  margin-inline: 14px !important;
}
.header-nav__menu-item > a.header-nav__underline {
  transition: opacity .18s ease !important;
}
.header-nav__menu-item:hover > a.header-nav__underline {
  opacity: 0.6 !important;
}
/* hide the locale picker (defensive — also off via setting) */
.header theme-locale-picker {
  display: none !important;
}
/* right cluster icon sizing + gap */
.header-action-bar.right {
  gap: 12px !important;
}
.header-action-bar.right .button--icon svg {
  width: 22px !important;
  height: 22px !important;
}
.header-action-bar.right .button--icon {
  color: #151515 !important;
}

@media (max-width: 768px) {
  .header {
    padding: 14px 16px !important;
    min-height: 64px !important;
  }
  .dh-header__emblem {
    width: 44px !important;
    height: 44px !important;
  }
  /* mobile: hamburger left, logo center-ish, icons right; hide inline nav */
  .header__container-top-wrap > theme-nav-bar {
    display: none !important;
  }
  .header__container-top-wrap {
    grid-template-columns: auto 1fr auto !important;
  }
  .header__container-top-wrap > .header-action-bar.left {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  .header__container-top-wrap > .header__logo {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  .header__container-top-wrap > .header-action-bar.right {
    grid-column: 3 !important;
    justify-self: end !important;
  }
}

/* ===== DH PDP — main-product info column ===== */
/* Scoped to Target-product PDPs via the .dh-target-pdp marker (absent on the gift card). */

/* Title: Clever 54/59.4 700 0.5px #002d1e */
.product-detail__info .product-detail__title {
  font-family: 'Clever', Georgia, serif !important;
  font-size: 54px !important;
  line-height: 59.4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #002d1e !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
}

/* Product template page background: cream #fbfaf6 (scheme-1 wrappers default to white) */
[id^="shopline-section-template--product__"] .color-scheme-1,
[id^="shopline-section-template--product__"].color-scheme-1 {
  background-color: #fbfaf6 !important;
}

/* Brand eyebrow */
.dh-product-eyebrow {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: #002d1e !important;
  margin-bottom: 2px !important;
}

/* Hide native buy chrome ONLY on Target-product PDPs (marker present) */
.product-detail__info:has(.dh-target-pdp) .product-detail__price,
.product-detail__info:has(.dh-target-pdp) .product-detail__variant-picker,
.product-detail__info:has(.dh-target-pdp) .product-detail__buy-button-group,
.product-detail__info:has(.dh-target-pdp) .product-detail__sell-info,
.product-detail__info:has(.dh-target-pdp) [class*="quantity"],
.product-detail__info:has(.dh-target-pdp) > .product-description,
.product-detail__info:has(.dh-target-pdp) > .product-detail__additional {
  display: none !important;
}
/* native description/additional are wrapped one level deeper in some renders */
.product-detail__info:has(.dh-target-pdp) .product-description,
.product-detail__info:has(.dh-target-pdp) theme-collapse.product-detail__additional {
  display: none !important;
}

/* DH accordions (Description open, Benefits collapsed) — native <details>, no JS */
.dh-pdp-accordion {
  border-top: 1px solid #002d1e;
  font-family: 'GalanoGrotesque', sans-serif;
}
.dh-pdp-accordion > details > summary.dh-pdp-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 85px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dh-pdp-accordion summary::-webkit-details-marker { display: none; }
.dh-pdp-accordion__title {
  font-family: 'GalanoGrotesque', sans-serif;
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #002d1e;
}
.dh-pdp-accordion__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dh-pdp-accordion__icon::before,
.dh-pdp-accordion__icon::after {
  content: "";
  position: absolute;
  background: #002d1e;
  transition: opacity 0.15s ease;
}
.dh-pdp-accordion__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.dh-pdp-accordion__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.dh-pdp-accordion > details[open] .dh-pdp-accordion__icon::after { opacity: 0; }
.dh-pdp-accordion__body {
  font-family: 'GalanoGrotesque', sans-serif;
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: normal;
  color: #002d1e;
  padding: 0 0 24px;
}
.dh-pdp-accordion__body p { margin: 0 0 12px; }
/* Open/close is animated (smooth height expand) by initPdpAccordions in layout/theme.html,
   matching the Shopify wt-collapse behaviour. Native <details> fallback toggles instantly. */
/* No native bullet — only the ✔ (::before). The theme .rte adds list-style:disc + padding, so force it off. */
.dh-pdp-accordion__body ul.dh-benefits-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dh-benefits-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 27px;
  list-style: none !important;
}
.dh-benefits-list li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  top: 0;
  color: #002d1e;
}

/* The 2 Target CTAs (verbatim tokens) */
.custom-add-to-cart-module {
  margin-top: 0;
  margin-bottom: 16px;
  padding-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #002d1e;
}
.custom-atc-button {
  width: 100%;
  height: 70px;
  padding: 0 24px;
  background-color: #CC0000 !important;
  color: #FFFFFF !important;
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
  box-sizing: border-box;
}
.custom-atc-button:hover {
  background-color: #A60000 !important;
  color: #FFFFFF !important;
}
.custom-atc-button .target-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* DH PDP share row — Clever "Share" label + 5 icons (FB / X / Pinterest / WhatsApp / Email), 18×18 */
#shopline-section-template--product__main-product-info .dh-pdp-share {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  border-top: 1px solid #002d1e !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
}
#shopline-section-template--product__main-product-info .dh-pdp-share__label {
  font-family: 'Clever', Georgia, serif !important;
  font-size: 24px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #002d1e !important;
  text-transform: none !important;
}
#shopline-section-template--product__main-product-info .dh-pdp-share__list {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#shopline-section-template--product__main-product-info .dh-pdp-share__list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#shopline-section-template--product__main-product-info .dh-pdp-share__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #002d1e !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease !important;
}
#shopline-section-template--product__main-product-info .dh-pdp-share__link:hover {
  opacity: 0.6 !important;
}
#shopline-section-template--product__main-product-info .dh-pdp-share__icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
}
@media (max-width: 768px) {
  #shopline-section-template--product__main-product-info .dh-pdp-share {
    gap: 14px !important;
  }
  #shopline-section-template--product__main-product-info .dh-pdp-share__list {
    gap: 18px !important;
  }
  #shopline-section-template--product__main-product-info .dh-pdp-share__link {
    padding: 8px !important;
    margin: -8px !important;
  }
}

/* Title @390 → 24px */
@media (max-width: 390px) {
  .product-detail__info .product-detail__title {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}

/* ===== DH PDP — gallery =====
   Vertical thumb strip LEFT of a 1:1 main image. Scoped to the PDP section id
   so the rules never leak into the home featured-product (shared .media-gallery__* classes). */
#shopline-section-template--product__main-product-info .media-gallery__content {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
#shopline-section-template--product__main-product-info .media-gallery__thumbnails,
#shopline-section-template--product__main-product-info .media-gallery__thumbnail-list {
  width: 80px !important;
  flex: 0 0 80px !important;
}
#shopline-section-template--product__main-product-info .media-gallery__thumbnail-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#shopline-section-template--product__main-product-info .media-gallery__thumbnail {
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
#shopline-section-template--product__main-product-info .media-gallery__thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
#shopline-section-template--product__main-product-info .media-gallery__list-wrapper {
  flex: 1 1 auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
#shopline-section-template--product__main-product-info .media-gallery__list > li {
  flex: 0 0 100% !important;
  width: 100% !important;
}
#shopline-section-template--product__main-product-info .media-gallery__list img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  #shopline-section-template--product__main-product-info .media-gallery__content {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #shopline-section-template--product__main-product-info .media-gallery__thumbnails,
  #shopline-section-template--product__main-product-info .media-gallery__thumbnail-list {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  #shopline-section-template--product__main-product-info .media-gallery__thumbnail-list {
    flex-direction: row !important;
    gap: 8px !important;
  }
}

/* ===== DH PDP — below-fold sections =====
   Breadcrumb / featured-collection / FAQ / collection-list overrides live here
   (index.css recompiles reliably; per-section custom_css can serve stale via CDN). */

/* Breadcrumb — GalanoGrotesque 13/400 #002d1e, override the body4 Poppins default + letter-spacing. */
#shopline-section-template--product__breadcrumbs .section-breadcrumb .block-breadcrumb,
#shopline-section-template--product__breadcrumbs .section-breadcrumb .block-breadcrumb a,
#shopline-section-template--product__breadcrumbs .section-breadcrumb .block-breadcrumb li,
#shopline-section-template--product__breadcrumbs .section-breadcrumb .block-breadcrumb span,
#shopline-section-template--product__breadcrumbs .section-breadcrumb theme-breadcrumb {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: #002d1e !important;
  text-transform: none !important;
}

/* ========================================================================
   DH Collection grid — scoped to the collection product-grid section.
   Matches drinkhippie.com/collections/hippie-brew (3 cols / square cards /
   centered title / price shown 18/700 / dark quick-add). Scoped under the
   section id so it never leaks to homepage grids or the PDP cards which
   share .block-product-* classes.
   ===================================================================== */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .main-collection {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
#shopline-section-template--collection__main-collection-products .main-collection__list {
  column-gap: 16px !important;
  row-gap: 16px !important;
}
/* Square card image + contained crossfade (no lift/shadow/scale) */
#shopline-section-template--collection__main-collection-products .block-product-image__layer-image-wrapper {
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  width: 100% !important;
  overflow: hidden !important;
}
#shopline-section-template--collection__main-collection-products .block-product-image__layer-image-wrapper .block-product-image__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}
#shopline-section-template--collection__main-collection-products .block-product-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Title: GalanoGrotesque 18/400 centered #002d1e */
#shopline-section-template--collection__main-collection-products .block-product-title,
#shopline-section-template--collection__main-collection-products .block-product-title * {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  color: #002d1e !important;
  text-transform: none !important;
}
#shopline-section-template--collection__main-collection-products .block-product-title {
  padding: 0 8px !important;
  margin-top: 16px !important;
}
/* Price: SHOWN — GalanoGrotesque 18/700 #002d1e (centered to match title) */
#shopline-section-template--collection__main-collection-products .block-product-price {
  display: block !important;
}
#shopline-section-template--collection__main-collection-products .block-product-price,
#shopline-section-template--collection__main-collection-products .block-product-price .product-price__item,
#shopline-section-template--collection__main-collection-products .block-product-price .product-price {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  color: #002d1e !important;
}
#shopline-section-template--collection__main-collection-products .block-product-price .product-price__item--sale,
#shopline-section-template--collection__main-collection-products .block-product-price .product-price__sale {
  color: #002d1e !important;
}
/* No description in the Shopify reference card — hide the placeholder block */
#shopline-section-template--collection__main-collection-products .block-product-card__description {
  display: none !important;
}
/* Quick-add "Add to cart" button */
#shopline-section-template--collection__main-collection-products .block-product-card__quick-add,
#shopline-section-template--collection__main-collection-products .block-product-buy-button-wrapper button {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: #150a0f !important;
  color: #fbfaf6 !important;
  border-radius: 10px !important;
  border: none !important;
}
#shopline-section-template--collection__main-collection-products .block-product-card__quick-add:hover,
#shopline-section-template--collection__main-collection-products .block-product-buy-button-wrapper button:hover {
  background-color: #2a1820 !important;
  color: #fbfaf6 !important;
}
/* Toolbar: count far-left, Filter + Sort right */
#shopline-section-template--collection__main-collection-products .facets-count {
  color: #002d1e !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-summary,
#shopline-section-template--collection__main-collection-products .facets-sorting__summary {
  color: #002d1e !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
/* Sort option rows + active-item highlight (active = label with the checked radio) */
#shopline-section-template--collection__main-collection-products .facets-sorting__content-body > label {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
}
#shopline-section-template--collection__main-collection-products .facets-sorting__content-body > label:has(input:checked) {
  background-color: rgba(0, 45, 30, 0.05) !important;
  border-radius: 10px !important;
}

@media (max-width: 959px) {
  #shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .main-collection {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #shopline-section-template--collection__main-collection-products .main-collection__list {
    column-gap: 16px !important;
    row-gap: 8px !important;
  }
  #shopline-section-template--collection__main-collection-products .block-product-title,
  #shopline-section-template--collection__main-collection-products .block-product-title * {
    font-size: 15px !important;
  }
  #shopline-section-template--collection__main-collection-products .block-product-price,
  #shopline-section-template--collection__main-collection-products .block-product-price .product-price__item,
  #shopline-section-template--collection__main-collection-products .block-product-price .product-price {
    font-size: 15px !important;
  }
  /* Filter trigger = filled button on mobile (mobile summary lacks the
     __modal-summary class the desktop trigger carries) */
  #shopline-section-template--collection__main-collection-products .facets-filtering details > summary:not(.facets-filtering__modal-summary) {
    background-color: #150a0f !important;
    color: #fbfaf6 !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    font-family: "GalanoGrotesque", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  #shopline-section-template--collection__main-collection-products .facets-filtering details > summary:not(.facets-filtering__modal-summary) svg,
  #shopline-section-template--collection__main-collection-products .facets-filtering details > summary:not(.facets-filtering__modal-summary) path {
    color: #fbfaf6 !important;
    fill: currentColor !important;
  }
  /* mobile count own row, far left */
  #shopline-section-template--collection__main-collection-products .page-width.facets-count {
    color: #002d1e !important;
    font-family: "GalanoGrotesque", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }
}

/* ========================================================================
   DH Collection banner — 50/50 split (title LEFT, image RIGHT) forced over
   the native overlay-paradigm cover. Scoped to the collection cover section.
   ===================================================================== */
#shopline-section-template--collection__main-collection-cover .main-collection-cover {
  background-color: #fbfaf6 !important;
}
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 260px !important;
  min-height: 260px !important;
  background-color: #fbfaf6 !important;
  overflow: hidden !important;
}
/* kill the dark overlay tint */
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-mask {
  position: relative !important;
  order: 2 !important;
  width: 50% !important;
  height: 260px !important;
  inset: auto !important;
  background-color: #fbfaf6 !important;
  transform: none !important;
}
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-mask::before,
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-mask::after {
  background: none !important;
  display: none !important;
}
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-mask img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* text cell: left half, left-aligned, no overlay */
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-inner {
  position: relative !important;
  order: 1 !important;
  width: 50% !important;
  height: 260px !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 32px !important;
  text-align: left !important;
  background-color: #fbfaf6 !important;
}
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-inner > div {
  width: 100% !important;
  text-align: left !important;
}
/* hide the inline "Home/" baked into the banner — breadcrumb is its own section now */
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-inner a.body4 {
  display: none !important;
}
#shopline-section-template--collection__main-collection-cover .block-main-collection__banner-inner br {
  display: none !important;
}
/* title: Clever 42/700/0.5px #002d1e, left */
#shopline-section-template--collection__main-collection-cover .block-main-collection__heading,
#shopline-section-template--collection__main-collection-cover .block-main-collection__heading * {
  font-family: "Clever", serif !important;
  font-size: 42px !important;
  line-height: 46.2px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #002d1e !important;
  text-transform: none !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  /* mobile: stack title above / image below */
  #shopline-section-template--collection__main-collection-cover .block-main-collection__banner {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #shopline-section-template--collection__main-collection-cover .block-main-collection__banner-inner {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    padding: 28px 16px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #shopline-section-template--collection__main-collection-cover .block-main-collection__banner-inner > div,
  #shopline-section-template--collection__main-collection-cover .block-main-collection__heading,
  #shopline-section-template--collection__main-collection-cover .block-main-collection__heading * {
    text-align: center !important;
  }
  #shopline-section-template--collection__main-collection-cover .block-main-collection__heading,
  #shopline-section-template--collection__main-collection-cover .block-main-collection__heading * {
    font-size: 42px !important;
    line-height: 46px !important;
  }
  #shopline-section-template--collection__main-collection-cover .block-main-collection__banner-mask {
    order: 2 !important;
    width: 100% !important;
    height: 220px !important;
  }
}

/* ========================================================================
   DH Collection toolbar — count FAR LEFT, Filter + Sort grouped RIGHT.
   The native count sits inside .facets-sorting-wrapper (right). A scoped
   JS DOM-move (theme.html) relocates it to .facets-filtering (left cell);
   CSS below pins it left + groups Filter before Sort on the right.
   ===================================================================== */
/* DESKTOP toolbar row only — scope to the desktop facets form so the mobile
   filter drawer (.facets-mobile__modals .facets-filtering, a column layout) is
   left untouched. */
#shopline-section-template--collection__main-collection-products .facets-desktop > .facets-filtering {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
/* count moved into the filtering (left) cell sits first + flush left */
#shopline-section-template--collection__main-collection-products .facets-desktop > .facets-filtering .facets-count.hidden-mobile {
  order: -1 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  color: #002d1e !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
/* DESKTOP only — the visible "Filter" trigger (.facets-filtering__filters)
   is the 2nd flex child of the .facets-filtering (left grid cell); it was
   stranded mid-bar (x≈794). The count above uses margin-right:auto, but the
   trailing "Clear all" (.facets-filtering__active, empty when no facets are
   active) absorbs the free space and leaves Filter mid-cell. Pin the Filter
   group to the cell's RIGHT edge so it abuts the Sort cell → Filter + Sort
   adjacent far-right. Mobile drawer form is display:none here, so gate >=769px. */
@media (min-width: 769px) {
  /* "Clear all" (.facets-filtering__active, empty when no facet active) is the
     first item of the right group and carries margin-left:auto to push the
     whole right group (Clear all → Filter) to the cell's right edge so Filter
     abuts the Sort cell. Filter itself must NOT flex-grow (theme default grow:1
     stretched it back toward center). */
  /* Now the cell is a ROW (flex-direction:row above — the theme default was
     flex-direction:column, which centered the items horizontally and is why
     count + Filter clustered mid-bar). count is order:-1 → far left. The right
     group ("Clear all" then Filter) carries margin-left:auto on its first item
     to absorb all free space and pack against the cell's right edge, so Filter
     abuts the Sort cell. flex:0 0 auto neutralises the theme's grow on the group. */
  #shopline-section-template--collection__main-collection-products .facets-desktop > .facets-filtering .facets-filtering__active {
    order: 1 !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  #shopline-section-template--collection__main-collection-products .facets-desktop > .facets-filtering .facets-filtering__filters {
    order: 2 !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* ========================================================================
   DH Collection filter drawer interior — brand tokens.
   Real DOM: .facets-filtering__modal-content (header/body/footer),
   __summary headings, __checkbox-wrapper inputs, price-range inputs,
   Confirm/Clear footer buttons. Scoped to the products section.
   ===================================================================== */
/* drawer title "Filter" — Clever */
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-header .body1 {
  font-family: "Clever", serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #002d1e !important;
}
/* section headings Availability / Price — Clever */
#shopline-section-template--collection__main-collection-products .facets-filtering__summary .body2 {
  font-family: "Clever", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #002d1e !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__summary svg,
#shopline-section-template--collection__main-collection-products .facets-filtering__summary path {
  color: #002d1e !important;
  fill: currentColor !important;
}
/* facet rows — GalanoGrotesque #002d1e */
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper .body3,
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper .body4,
#shopline-section-template--collection__main-collection-products .facets-filtering__content-header,
#shopline-section-template--collection__main-collection-products .facets-filtering__content-header * {
  font-family: "GalanoGrotesque", sans-serif !important;
  color: #002d1e !important;
  letter-spacing: 0 !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper .body3 {
  font-size: 16px !important;
  font-weight: 400 !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__reset {
  font-family: "GalanoGrotesque", sans-serif !important;
  color: #002d1e !important;
}
/* facet checkbox — the native input is rendered 0x0/hidden, so restyle it to be visible */
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1.5px solid #002d1e !important;
  border-radius: 4px !important;
  background-color: #fbfaf6 !important;
  position: relative !important;
  flex: none !important;
  cursor: pointer !important;
  margin: 0 10px 0 0 !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper input[type="checkbox"]:checked {
  background-color: #002d1e !important;
  border-color: #002d1e !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fbfaf6 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__checkbox-wrapper.disabled {
  opacity: 0.45 !important;
}
/* price-range inputs + currency — GalanoGrotesque #002d1e */
#shopline-section-template--collection__main-collection-products .price-range-input .field__input,
#shopline-section-template--collection__main-collection-products .price-range-input .field-currency {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  color: #002d1e !important;
  letter-spacing: 0 !important;
}
#shopline-section-template--collection__main-collection-products .price-range-input .field {
  border-color: #002d1e !important;
}
/* price slider bar/dots — brand green */
#shopline-section-template--collection__main-collection-products .price-range-bar {
  background-color: #002d1e !important;
}
#shopline-section-template--collection__main-collection-products .price-range-dot {
  background-color: #002d1e !important;
  border-color: #002d1e !important;
}
/* footer count */
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-footer .facets-count {
  font-family: "GalanoGrotesque", sans-serif !important;
  color: #002d1e !important;
  letter-spacing: 0 !important;
}
/* Confirm (Apply) — brand dark button */
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-footer .button[name="confirm"] {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: #150a0f !important;
  color: #fbfaf6 !important;
  border-radius: 10px !important;
  border: none !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-footer .button[name="confirm"]:hover {
  background-color: #2a1820 !important;
  color: #fbfaf6 !important;
}
/* Clear (Remove all) — brand secondary */
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-footer .button--secondary {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: #fbfaf6 !important;
  color: #002d1e !important;
  border: 1.5px solid #002d1e !important;
  border-radius: 10px !important;
}
#shopline-section-template--collection__main-collection-products .facets-filtering__modal-footer .button--secondary:hover {
  background-color: #002d1e !important;
  color: #fbfaf6 !important;
}

/* ===== DH FAQ page (/pages/faq) — moved from page.faq.json custom_css (per-section custom_css does not reliably compile on page templates; index.css is global+reliable). Marker .dh-faq is unique → leak-safe. ===== */
.dh-faq { max-width: 944px; margin: 0 auto; width: 100%; }
.dh-faq__head { text-align: center; margin-bottom: 64px; }
.dh-faq__title { font-family: 'Clever', serif !important; font-weight: 700 !important; font-size: 42px !important; line-height: 46.2px !important; letter-spacing: 0.5px !important; color: #002d1e !important; margin: 0 0 12px !important; text-align: center !important; }
.dh-faq__sub { font-family: 'GalanoGrotesque', sans-serif !important; font-weight: 400 !important; font-size: 16px !important; line-height: 24px !important; letter-spacing: normal !important; color: #002d1e !important; margin: 0 auto !important; max-width: 620px; text-align: center !important; }
.dh-faq__cat { margin-bottom: 48px; }
.dh-faq__cat-title { font-family: 'Clever', serif !important; font-weight: 700 !important; font-size: 48px !important; line-height: 52.8px !important; letter-spacing: 0.5px !important; color: #002d1e !important; text-align: center !important; margin: 0 0 24px !important; }
.dh-faq__list { display: block; }
.dh-faq__item { border-bottom: 1px solid #002d1e; }
.dh-faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; }
.dh-faq__q::-webkit-details-marker { display: none; }
.dh-faq__q-text { font-family: 'GalanoGrotesque', sans-serif !important; font-weight: 700 !important; font-size: 22.5px !important; line-height: 27px !important; letter-spacing: 0.5px !important; color: #002d1e !important; flex: 1; }
.dh-faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.dh-faq__icon::before, .dh-faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: #002d1e; transition: opacity .2s ease, transform .2s ease; }
.dh-faq__icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.dh-faq__icon::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.dh-faq__item[open] .dh-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.dh-faq__a { padding: 0 6px 20px; }
.dh-faq__a p { font-family: 'GalanoGrotesque', sans-serif !important; font-weight: 400 !important; font-size: 18px !important; line-height: 27px !important; color: #002d1e !important; margin: 0 0 12px; }
.dh-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 959px) {
  .dh-faq__head { margin-bottom: 40px; }
  .dh-faq__title { font-size: 34px !important; line-height: 38px !important; }
  .dh-faq__cat-title { font-size: 36px !important; line-height: 40px !important; }
  .dh-faq__q-text { font-size: 18px !important; line-height: 23px !important; }
  .dh-faq__a p { font-size: 16px !important; line-height: 24px !important; }
  .dh-faq__q { padding: 14px 0; }
}

/* ========================================================================
   DH Search — scoped to the search section. drinkhippie.com/search reference:
   heading "Search results: <term>" (Clever brand) → toolbar (count left,
   Filter+Sort right) → 3-col product grid (same cards as collection).

   NB: this store's search experience is owned by the 3rd-party "Product
   Search & Filter" Shopline app (.plugin-product-search--theme3_0). The
   NATIVE main-search results body (.main-search__body, .block-product-card)
   only renders when search.performed is true; the app currently intercepts
   the page and returns its own (empty-index) results. The grid rules below
   reuse the collection card tokens and apply to the native results IF/WHEN
   they render; the app search-bar rules below style the app's own input.
   ===================================================================== */

/* (A) Heading — Clever, brand #002d1e, ~42px, centered (matches the
   collection page heading scale). Native title is "Search" / when a query is
   performed "Search results: <term>". */
#shopline-section-template--search__main-search .main-search__title,
#shopline-section-template--search__main-search .main-search__count > h4 {
  font-family: "Clever", serif !important;
  font-size: 42px !important;
  line-height: 46.2px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #002d1e !important;
  text-transform: none !important;
  font-style: normal !important;
  text-align: center !important;
}
#shopline-section-template--search__main-search .main-search__count > p {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #002d1e !important;
}

/* (B) 3rd-party app search bar — to brand. Native input is Poppins/no border;
   restyle to GalanoGrotesque + brand border/radius + brand icon button. */
#shopline-section-template--search__main-search .plugin-product-search-index-page-input-warp {
  border: 1px solid #002d1e !important;
  border-radius: 10px !important;
  background-color: #fbfaf6 !important;
}
#shopline-section-template--search__main-search .plugin-product-search-page-search-bar input,
#shopline-section-template--search__main-search .plugin-product-search-index-input input {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  color: #002d1e !important;
}
#shopline-section-template--search__main-search .plugin-product-search-page-search-bar input::placeholder {
  color: rgba(0, 45, 30, 0.55) !important;
}
#shopline-section-template--search__main-search .plugin-product-search-index-page-input-icon {
  color: #002d1e !important;
}
#shopline-section-template--search__main-search .plugin-product-search-index-input-clear-btn {
  font-family: "GalanoGrotesque", sans-serif !important;
  color: #002d1e !important;
}

/* (C) Native results grid — reuse the collection card tokens, search-scoped.
   These mirror #...collection__main-collection-products and target the same
   .block-product-* classes the native $results blocks render. Dormant until
   the native results body renders. */
#shopline-section-template--search__main-search .main-search__body {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
#shopline-section-template--search__main-search .main-collection__list,
#shopline-section-template--search__main-search .block-product-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
}
#shopline-section-template--search__main-search .block-product-image__layer-image-wrapper {
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  width: 100% !important;
  overflow: hidden !important;
}
#shopline-section-template--search__main-search .block-product-image__layer-image-wrapper .block-product-image__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}
#shopline-section-template--search__main-search .block-product-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
#shopline-section-template--search__main-search .block-product-title,
#shopline-section-template--search__main-search .block-product-title * {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  color: #002d1e !important;
  text-transform: none !important;
}
#shopline-section-template--search__main-search .block-product-title {
  padding: 0 8px !important;
  margin-top: 16px !important;
}
#shopline-section-template--search__main-search .block-product-price {
  display: block !important;
}
#shopline-section-template--search__main-search .block-product-price,
#shopline-section-template--search__main-search .block-product-price .product-price__item,
#shopline-section-template--search__main-search .block-product-price .product-price {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  color: #002d1e !important;
}
#shopline-section-template--search__main-search .block-product-card__description {
  display: none !important;
}
#shopline-section-template--search__main-search .block-product-card__quick-add,
#shopline-section-template--search__main-search .block-product-buy-button-wrapper button {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: #150a0f !important;
  color: #fbfaf6 !important;
  border-radius: 10px !important;
  border: none !important;
}
#shopline-section-template--search__main-search .block-product-card__quick-add:hover,
#shopline-section-template--search__main-search .block-product-buy-button-wrapper button:hover {
  background-color: #2a1820 !important;
  color: #fbfaf6 !important;
}

@media (max-width: 959px) {
  #shopline-section-template--search__main-search .main-search__body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #shopline-section-template--search__main-search .main-collection__list,
  #shopline-section-template--search__main-search .block-product-list {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
  }
  #shopline-section-template--search__main-search .main-search__title,
  #shopline-section-template--search__main-search .main-search__count > h4 {
    font-size: 34px !important;
    line-height: 38px !important;
  }
  #shopline-section-template--search__main-search .block-product-title,
  #shopline-section-template--search__main-search .block-product-title * {
    font-size: 15px !important;
  }
  #shopline-section-template--search__main-search .block-product-price,
  #shopline-section-template--search__main-search .block-product-price .product-price__item,
  #shopline-section-template--search__main-search .block-product-price .product-price {
    font-size: 15px !important;
  }
}

/* (D) Suppress the broken 3rd-party plugin overlay on /search. Its index is
   empty and it covers the native section with an "Enter here and click search"
   bar. Hidden everywhere (it never renders a working result on this build); the
   header search + this page now use the native predictive index instead. */
[class*="plugin-product-search"] {
  display: none !important;
}

/* (E) Injected /search chrome (.dh-search-results) — built by the /search injector
   in theme.html to match the Shopify reference 1:1: Clever heading (term
   underlined) → Products|Articles|Pages tab bar → toolbar (count left, Filter +
   Sort right) → 4-col left-aligned product grid (vendor eyebrow + title + price).
   Products = substring catalog; Articles/Pages = native suggest link cards. */
.dh-search-results {
  width: 100% !important;
  max-width: 1296px !important;
  margin: 8px auto 0 !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}
.dh-search-results__heading {
  font-family: "Clever", serif !important;
  font-size: 48px !important;
  line-height: 72px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 8px 0 24px !important;
}
.dh-search-results__term {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* Tab bar — Products | Articles | Pages, centered, brand underline on active. */
.dh-search-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 32px !important;
  border-bottom: 1px solid var(--dh-green) !important;
  margin: 0 0 20px !important;
  padding: 0 0 12px !important;
}
.dh-search-tab {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  color: var(--dh-green) !important;
  background: none !important;
  border: none !important;
  padding: 0 0 12px !important;
  margin-bottom: -13px !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: 18.4px !important;
}
.dh-search-tab.active {
  border-bottom: 2px solid var(--dh-green) !important;
}

/* Toolbar — count left, Filter + Sort right. */
.dh-search-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 0 24px !important;
  gap: 16px !important;
}
.dh-search-toolbar__count {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
}
.dh-search-toolbar__controls {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.dh-search-toolbar__divider {
  width: 1px !important;
  height: 20px !important;
  background-color: rgba(0, 45, 30, 0.25) !important;
}
.dh-search-filter {
  font-family: "Clever", serif !important;
  font-size: 22.5px !important;
  line-height: 24.75px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.dh-search-sort {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--dh-green) !important;
  cursor: pointer !important;
}
.dh-search-sort__select {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--dh-green) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 18px 0 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23002d1e' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}

/* Brand facets row (revealed by Filter). */
.dh-search-facets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
}
.dh-search-facet {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--dh-green) !important;
  background: #fff !important;
  border: 1px solid var(--dh-green) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
}
.dh-search-facet.active {
  background: var(--dh-green) !important;
  color: var(--dh-cream) !important;
}

.dh-search-results__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 32px !important;
  align-items: start !important;
}
/* The injector owns the /search render: it adds .dh-search-owned to the section and
   mounts .dh-search-results. Hide EVERY native default child of .main-search__content
   so ONLY the injected block renders — no duplicate empty/results state. */
#shopline-section-template--search__main-search.dh-search-owned .main-search__content > *:not(.dh-search-results) {
  display: none !important;
}
.dh-search-results__grid--empty {
  display: block !important;
}
.dh-search-results__grid--list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.dh-search-results__empty {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  color: var(--dh-green) !important;
}
.dh-search-results .predictive-search__result-item {
  list-style: none !important;
}
.dh-search-results .predictive-search__result-item > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  text-decoration: none !important;
  text-align: left !important;
}
.dh-search-results .predictive-search__product {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}
.dh-search-results .predictive-search__product-image-wrap {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-color: #fff !important;
  margin-bottom: 12px !important;
}
.dh-search-results .predictive-search__product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.dh-search-results .predictive-search__product-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.dh-search-results .predictive-search__product-vendor {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: rgb(113, 113, 113) !important;
  text-transform: none !important;
  margin-bottom: 2px !important;
}
.dh-search-results .predictive-search__product-title {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 0 4px !important;
}
.dh-search-results .predictive-search__product-title .dh-hl { font-weight: 700 !important; }
.dh-search-results .predictive-search__product-price {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
}

/* Article/Page link cards (dark card, badge eyebrow, green title) — matches the
   reference's non-product result tiles. */
.dh-search-link-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 150px !important;
  padding: 24px !important;
  border-radius: 14px !important;
  background-color: #150a0f !important;
  text-decoration: none !important;
  position: relative !important;
}
.dh-search-link-card__badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #150a0f !important;
  background-color: var(--dh-gold) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}
.dh-search-link-card__title {
  font-family: "Clever", serif !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: var(--dh-green) !important;
}
.dh-search-link-card__title .dh-hl { color: var(--dh-cream-on-dark) !important; }

@media (max-width: 959px) {
  .dh-search-results { padding: 0 16px !important; }
  .dh-search-results__heading { font-size: 40px !important; line-height: 60px !important; }
  .dh-search-tabs { gap: 16px !important; }
  .dh-search-results__grid,
  .dh-search-results__grid--list {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
  }
  .dh-search-results .predictive-search__product-title,
  .dh-search-results .predictive-search__product-price { font-size: 15px !important; }
}

@media (max-width: 749px) {
  .dh-search-results__heading {
    font-size: 40px !important;
    line-height: 60px !important;
    margin: 8px 0 20px !important;
  }
  /* Tabs: match Shopify mobile — 14px / ls2px / gap16, one line each. */
  .dh-search-tabs { gap: 16px !important; }
  .dh-search-tab {
    font-size: 14px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
  }
  /* Toolbar: count on its own row, Filter + Sort on a second full-width row. */
  .dh-search-toolbar {
    flex-wrap: wrap !important;
    row-gap: 12px !important;
  }
  .dh-search-toolbar__count {
    flex: 0 0 100% !important;
    font-size: 16px !important;
  }
  .dh-search-toolbar__controls {
    flex: 0 0 100% !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .dh-search-filter {
    font-size: 18px !important;
    white-space: nowrap !important;
  }
  .dh-search-sort {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
  }
  .dh-search-sort,
  .dh-search-sort__select { font-size: 15px !important; }
  /* Page/Article results: Shopify mobile renders plain Clever text links, not dark
     badge cards. Flatten the dark card to a clean green text link. */
  .dh-search-results__grid--list {
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
  }
  .dh-search-link-card {
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .dh-search-link-card__badge { display: none !important; }
  .dh-search-link-card__title {
    font-size: 17.5px !important;
    line-height: 1.25 !important;
    color: var(--dh-green) !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .dh-search-link-card__title .dh-hl { color: var(--dh-green) !important; }
}

@media (max-width: 360px) {
  .dh-search-tab { font-size: 13px !important; letter-spacing: 1px !important; }
}

/* Tab focus: no default blue box on tap; keyboard-only brand ring. */
.dh-search-tab:focus { outline: none !important; }
.dh-search-tab:focus-visible {
  outline: 2px solid var(--dh-green) !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}

/* ============================================================
   DH HEADER OVERLAYS — native cart drawer.
   Brand-only restyle of the native Shopline cart drawer; native
   open/close JS wiring untouched. All rules scoped to .cart-drawer*.
   ============================================================ */

/* ---- CART DRAWER : panel ---- */
.cart-drawer .cart-drawer__body {
  width: 500px !important;
  max-width: 100vw !important;
  background-color: var(--dh-cream) !important;
  color: var(--dh-green) !important;
}
.cart-drawer .cart-drawer__inner,
.cart-drawer .cart-drawer__payment,
.cart-drawer theme-cart-fixed-checkout.cart-drawer__fixed-checkout {
  background-color: var(--dh-cream) !important;
}

/* header bar */
.cart-drawer .cart-drawer__header {
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--dh-green) !important;
}
.cart-drawer .cart-drawer__header h2.title4 {
  font-family: 'Clever', Georgia, serif !important;
  font-size: 22.5px !important;
  line-height: 24.75px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
}
.cart-drawer .cart-drawer__close {
  color: var(--dh-green) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cart-drawer .cart-drawer__close svg { color: var(--dh-green) !important; }
.cart-drawer .cart-drawer__close:hover { background: none !important; }

/* body / items */
.cart-drawer .cart-drawer__inner { padding: 0 24px !important; }
.cart-drawer .cart-item { padding: 24px 0 !important; }
.cart-drawer .cart-item__picture img {
  width: 94px !important;
  height: 94px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}
.cart-drawer .cart-item__title,
.cart-drawer .cart-item__title a {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--dh-green) !important;
}
.cart-drawer .cart-item__total,
.cart-drawer .cart-item__total .price,
.cart-drawer .cart-item__total span {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: var(--dh-green) !important;
}
.cart-drawer .cart-item__options,
.cart-drawer .cart-item__options * {
  font-family: 'GalanoGrotesque', sans-serif !important;
  color: var(--dh-green) !important;
}

/* quantity stepper */
.cart-drawer .cart-item__amount-operator theme-input-number {
  display: inline-flex !important;
  align-items: center !important;
  width: 114px !important;
  height: 47px !important;
  background-color: #ffffff !important;
  border: 1px solid rgb(21, 21, 21) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.cart-drawer .cart-item__amount-operator theme-input-number button {
  width: 36px !important;
  height: 45px !important;
  color: rgb(113, 113, 113) !important;
  background: transparent !important;
  border: none !important;
  transition: color 0.3s ease-in !important;
}
.cart-drawer .cart-item__amount-operator theme-input-number button:hover { color: rgb(21, 21, 21) !important; }
.cart-drawer .cart-item__amount-operator theme-input-number button svg { color: inherit !important; }
.cart-drawer .cart-item__amount-operator theme-input-number input {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgb(21, 21, 21) !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
}
.cart-drawer .cart-item__remove svg { color: var(--dh-green) !important; }

/* footer / totals */
.cart-drawer theme-cart-fixed-checkout .cart-fixed-checkout__container { padding: 16px !important; }
.cart-drawer theme-cart-fixed-checkout {
  border-top: 1px solid var(--dh-green) !important;
}
.cart-drawer .cart-fixed-checkout__total-text {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--dh-green) !important;
}
.cart-drawer .cart-fixed-checkout__total-price span.body2,
.cart-drawer .cart-fixed-checkout__total-price span {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 22px !important;
  line-height: 33px !important;
  font-weight: 700 !important;
  color: var(--dh-green) !important;
}
.cart-drawer .cart-taxes,
.cart-drawer .cart-taxes * {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  color: rgb(113, 113, 113) !important;
}

/* checkout button -> brand gold */
.cart-drawer .cart-checkout button.button--fill,
.cart-drawer .cart-checkout .cart-form button {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: var(--dh-gold) !important;
  color: var(--dh-cream) !important;
  border: none !important;
  border-radius: 10px !important;
  width: 100% !important;
  transition: background-color 0.3s ease-in, color 0.3s ease-in !important;
}
.cart-drawer .cart-checkout button.button--fill:hover,
.cart-drawer .cart-checkout .cart-form button:hover {
  background-color: #c79b58 !important;
  color: var(--dh-cream) !important;
}

@media (max-width: 749px) {
  .cart-drawer .cart-drawer__body { width: 100vw !important; }
  .cart-drawer .cart-item__picture img { width: 88px !important; height: 88px !important; }
  .cart-drawer .cart-fixed-checkout__total-price span.body2,
  .cart-drawer .cart-fixed-checkout__total-price span { font-size: 19px !important; line-height: 28.5px !important; }
  .cart-drawer .cart-checkout button.button--fill,
  .cart-drawer .cart-checkout .cart-form button { font-size: 14px !important; }
}

/* ========================================================================
   DH MOBILE MENU — native Shopline header nav drawer (.header-nav-drawer),
   branded to the Shopify reference: cream panel (#fbfaf6), "Hello!" greeting
   (Clever green) in the header, bold green GalanoGrotesque nav links with a
   thin 1px green divider under each, and the account row ("Log in") moved to
   the footer in brand orange. Native open/close JS wiring is untouched.
   ======================================================================== */
.header-nav-drawer__content {
  background-color: var(--dh-cream) !important;
  width: 390px !important;
  max-width: 100% !important;
}
.header-nav-drawer__header {
  padding: 16px 32px !important;
  border-bottom: none !important;
}
.header-nav-drawer__header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* "Hello!" greeting injected by the header shim into the drawer header. */
.dh-drawer__greeting {
  font-family: "Clever", serif !important;
  font-size: 17.25px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
}
/* Native top "Log in" account link is relocated to the footer — hide it up top. */
.header-nav-drawer__header .header-nav-drawer__login { display: none !important; }
.header-nav-drawer__icon svg { color: var(--dh-green) !important; }

.header-nav-drawer__menu { padding: 16px 0 !important; margin: 0 !important; }
.header-nav-drawer__menu-item {
  position: relative !important;
  padding: 12px 0 !important;
  list-style: none !important;
}
.header-nav-drawer__menu-item::after {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  right: 32px !important;
  bottom: 0 !important;
  height: 1px !important;
  background-color: var(--dh-green) !important;
}
.header-nav-drawer__menu-item:last-child::after { display: none !important; }
.header-nav-drawer__link {
  display: block !important;
  padding: 8px 32px !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: var(--dh-green) !important;
}

/* Footer "Log in" — brand orange, matches the reference's bottom account link. */
.header-nav-drawer__footer { padding: 24px 32px !important; }
.dh-drawer__login {
  display: inline-block !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dh-orange, #dc4213) !important;
  text-decoration: none !important;
}

/* ========================================================================
   HEADER SEARCH — 3rd-party "Product Search & Filter" app (theme3_0).
   The header magnifier (a.header-action-bar__search) is owned by the plugin:
   it masks the native icon (.plugin-product-search-searchIconMask) and opens
   its own full-width bar (.plugin-product-search-searchInputWrap, sticky
   top:0). The native theme-search-bar is hidden behind it and never opens, so
   the styling below targets the plugin's bar, not the native overlay.

   These rules brand the plugin's header bar: cream full-width sheet, centered
   640px white pill input (radius 10px, border 1px #151515), GalanoGrotesque
   18px #151515 text, #717171 placeholder, brand-green icons, dark "view all"
   and "Clear" treatment. Scoped under #plugin-product-search so it can't
   collide with the /search page block above (scoped under
   #shopline-section-template--search__main-search, which targets the page-input
   classes .plugin-product-search-index-page-input-warp / -page-search-bar —
   distinct from the header bar's -searchInputWrap / -SearchBar classes).

   The header instance currently renders only the bar (icon + input + "Clear" +
   close) and no predictive dropdown, because the app's product index is empty.
   The result-row rules below are dormant and apply only once the app populates
   header results. ===================================================================== */

/* (1) Bar -> FULL-PAGE cream canvas.
   The plugin injects .plugin-product-search-SearchBar (position:absolute;
   inset:0) into the sticky height:0 #plugin-product-search root ONLY while
   the overlay is open, so promoting it to position:fixed inset:0 makes it
   fill the viewport as an opaque cream sheet ABOVE the header — and stays
   leak-safe because the node does not exist in the DOM when search is closed.
   The inner column (input + results) is centered via .searchInputWrap below. */
#plugin-product-search .plugin-product-search-SearchBar {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  background-color: var(--dh-cream) !important;
  z-index: 1300 !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 48px 24px 24px !important;
  box-sizing: border-box !important;
}
#plugin-product-search .plugin-product-search-searchInputWrap {
  position: static !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  min-height: 48px !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* (2) Input wrap -> centered 640px white bordered pill */
#plugin-product-search .plugin-product-search-index-input.plugin-product-search-searchInputWarp,
#plugin-product-search .plugin-product-search-searchInputWarp {
  width: 640px !important;
  max-width: calc(100vw - 96px) !important;
  flex: 0 1 640px !important;
  min-height: 48px !important;
  background-color: #ffffff !important;
  border: 1px solid rgb(21, 21, 21) !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
#plugin-product-search .plugin-product-search-index-input-bg,
#plugin-product-search .plugin-product-search-index-input-bg-item {
  background-color: transparent !important;
  width: 100% !important;
}

/* (3) Input field -> brand font/size/color */
#plugin-product-search input.plugin-product-search-searchInput {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: rgb(21, 21, 21) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  padding: 10px 0 !important;
}
#plugin-product-search input.plugin-product-search-searchInput::placeholder {
  color: rgb(113, 113, 113) !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

/* (4) Icons -> brand green */
#plugin-product-search .plugin-product-search-search-input-searchBtn,
#plugin-product-search .plugin-product-search-searchIcon,
#plugin-product-search .plugin-product-search-closeIcon {
  color: var(--dh-green) !important;
}
#plugin-product-search .plugin-product-search-searchIcon path,
#plugin-product-search .plugin-product-search-closeIcon path {
  stroke: var(--dh-green) !important;
}

/* (5) "Clear" button -> brand text, inside the pill (right) */
#plugin-product-search .plugin-product-search-index-input-clear-btn {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  color: rgb(113, 113, 113) !important;
}

/* (5b) Results region -> centered content container.
   Whatever results node the app injects as a sibling of the input wrap
   inside .SearchBar is constrained to a centered ~1180px column so the
   Products grid + Pages/Collections sit centered under the input, matching
   the reference. Targets the direct children of .SearchBar that are NOT the
   input wrap (the results/expand region) without needing the app's exact
   result class names (which the empty-index build never renders). */
#plugin-product-search .plugin-product-search-SearchBar > *:not(.plugin-product-search-searchInputWrap) {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
#plugin-product-search .plugin-product-search-SearchBar > *:not(.plugin-product-search-searchInputWrap):not(:empty) {
  margin-top: 16px !important;
}

/* (6) Dormant predictive result rows — keyed to the plugin namespace so
   they brand any header results the app may later return (currently none:
   empty index). Mirrors the SPEC predictive tokens. */
#plugin-product-search [class*="-title"]:not(input):not(.plugin-product-search-searchInput),
#plugin-product-search [class*="Title"] {
  font-family: "Clever", Georgia, serif !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
}
#plugin-product-search [class*="-item-img"] img,
#plugin-product-search [class*="-itemImg"] img,
#plugin-product-search [class*="-thumb"] img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}
#plugin-product-search [class*="-item-price"],
#plugin-product-search [class*="-itemPrice"],
#plugin-product-search [class*="-price"] {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgb(21, 21, 21) !important;
}
#plugin-product-search [class*="-viewAll"],
#plugin-product-search [class*="-view-all"],
#plugin-product-search [class*="-more"] button,
#plugin-product-search button[class*="-more"] {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: rgb(21, 10, 15) !important;
  color: var(--dh-cream) !important;
  border: none !important;
  border-radius: 10px !important;
}

@media (max-width: 749px) {
  #plugin-product-search .plugin-product-search-SearchBar {
    padding: 24px 16px !important;
  }
  #plugin-product-search .plugin-product-search-searchInputWrap {
    min-height: 48px !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  #plugin-product-search .plugin-product-search-index-input.plugin-product-search-searchInputWarp,
  #plugin-product-search .plugin-product-search-searchInputWarp {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  #plugin-product-search input.plugin-product-search-searchInput {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  #plugin-product-search .plugin-product-search-SearchBar > *:not(.plugin-product-search-searchInputWrap) {
    max-width: 100% !important;
  }
  #plugin-product-search [class*="-item-img"] img,
  #plugin-product-search [class*="-itemImg"] img,
  #plugin-product-search [class*="-thumb"] img { width: 80px !important; height: 80px !important; }
}

/* ============================================================
   HEADER SEARCH — native theme-search-bar overlay.
   On this build the visible header-search overlay is the NATIVE
   <theme-search-bar class="header-search-bar">, not the 3rd-
   party plugin bar (the plugin masks the icon but its own overlay
   does not render). Shopline toggles open/closed via opacity +
   pointer-events from its own (cross-origin) sheet — it adds NO
   .open class or open-state attribute we can hook. The closed bar
   sits at opacity:0; pointer-events:none, so scoping these brand
   rules to the always-present .header-search-bar is harmless when
   closed (invisible) and applies correctly when opened. The form is
   a full-width sheet; brand it to the cream sheet + centered 640px
   white bordered input pill from SPEC.
   Scoped to .header-search-bar so it never touches the /search page
   block (#shopline-section-template--search__main-search) or the
   dormant plugin block (#plugin-product-search).
   ============================================================ */

.header-search-bar .header-search-bar__form {
  background-color: var(--dh-cream) !important;
  padding: 48px 24px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
}
.header-search-bar .header-search-bar__form > .header-search-bar__icon:not(.button) {
  display: none !important;
}
.header-search-bar .header-search-bar__form > .header-search-bar__icon:not(.button) svg { color: var(--dh-green) !important; }
.header-search-bar .header-search-bar__form input.field__input {
  width: 640px !important;
  max-width: calc(100vw - 96px) !important;
  flex: 0 0 auto !important;
  height: 48px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  border: 1px solid #151515 !important;
  border-radius: 10px !important;
  padding: 0 16px 0 18px !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #151515 !important;
}
.header-search-bar .header-search-bar__form input.field__input::placeholder {
  color: rgb(113, 113, 113) !important;
  font-family: "GalanoGrotesque", sans-serif !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
.header-search-bar .header-search-bar__form button.header-search-bar__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  color: var(--dh-green) !important;
  flex: 0 0 auto !important;
}
.header-search-bar .header-search-bar__form button.header-search-bar__icon svg { color: var(--dh-green) !important; }

@media (max-width: 749px) {
  .header-search-bar .header-search-bar__form { padding: 24px 16px !important; }
  .header-search-bar .header-search-bar__form input.field__input {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
}

.header-search-bar .header-search-bar__backdrop {
  background: var(--dh-cream) !important;
}

/* ------------------------------------------------------------
   HEADER PREDICTIVE DROPDOWN — native .predictive-search panel
   rendered inside the header search overlay. The native suggest
   endpoint returns ONLY a Products section (header + product grid
   + a "Search for X" footer button); no Pages/Collections/brand
   eyebrow are returned natively. Brand the panel to the reference:
   cream sheet, green Clever titles, square thumbs, black view-all.
   Scoped to .header-search-bar so it never touches the /search page.
   ------------------------------------------------------------ */
.header-search-bar .header-search-bar__results {
  background-color: var(--dh-cream) !important;
  padding: 8px 48px 40px !important;
}
.header-search-bar .predictive-search__header {
  border-bottom: 1px solid var(--dh-card-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}
.header-search-bar .predictive-search__title,
.header-search-bar .predictive-search__count {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--dh-green) !important;
}
.header-search-bar .predictive-search__results {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 20px 24px !important;
  padding: 0 !important;
  list-style: none !important;
}
.header-search-bar .predictive-search__result-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
}
.header-search-bar .predictive-search__product {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}
.header-search-bar .predictive-search__product-image-wrap {
  flex: 0 0 auto !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #fff !important;
}
.header-search-bar .predictive-search__product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.header-search-bar .predictive-search__product-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.header-search-bar .predictive-search__product-title {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
  margin: 0 !important;
}
.header-search-bar .predictive-search__product-price {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
}
.header-search-bar .predictive-search__footer {
  margin-top: 28px !important;
  padding: 0 !important;
  display: flex !important;
}
.header-search-bar .predictive-search__more {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  color: #fff !important;
  background-color: #150a0f !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  width: auto !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease !important;
}
.header-search-bar .predictive-search__more:hover {
  background-color: #2a1820 !important;
  color: #fff !important;
}
/* Hide the leftover "most popular" block in the header dropdown — the Shopify
   reference has no popular-searches section. Unconditional (empty AND results
   states) and strictly scoped to .header-search-bar so nothing else is affected. */
.header-search-bar .header-search-bar__popular-title,
.header-search-bar .header-search-bar__popular,
.header-search-bar [class*="popular"] {
  display: none !important;
}

@media (max-width: 749px) {
  .header-search-bar .header-search-bar__results {
    padding: 8px 16px 32px !important;
  }
  .header-search-bar .predictive-search__results {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .header-search-bar .predictive-search__product-image-wrap {
    width: 64px !important;
    height: 64px !important;
  }
  .header-search-bar .predictive-search__product-title { font-size: 16px !important; }
  .header-search-bar .predictive-search__more { width: 100% !important; justify-content: center !important; text-align: center !important; }
  .header-search-bar .predictive-search__footer { display: block !important; }
}

/* DH owns the header predictive render: the substring injector mounts .dh-predictive
   into .header-search-bar__results and adds .dh-predictive-owned. Hide the native
   prefix-only results list (which still receives keystroke fetches) so only the
   injected substring block shows. The injected block now matches the reference:
   Products column (2-up rows) on the left + a right rail (Pages/Collections),
   separated by a thin divider, with a black "View all" button under products. */
.header-search-bar.dh-predictive-owned .header-search-bar__results-list {
  display: none !important;
}
.header-search-bar .dh-predictive:empty {
  display: none !important;
}

/* Two-column dropdown layout. */
.header-search-bar .dh-predictive.dh-predictive--has-rail {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 0 48px !important;
  align-items: start !important;
}
.header-search-bar .dh-predictive.dh-predictive--has-rail .dh-predictive__rail {
  border-left: 1px solid var(--dh-card-border) !important;
  padding-left: 48px !important;
}
.header-search-bar .dh-predictive__col-title {
  font-family: "Clever", serif !important;
  font-size: 18px !important;
  line-height: 21.6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
  margin: 0 0 20px !important;
}
.header-search-bar .dh-predictive__products .predictive-search__results {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.header-search-bar .dh-predictive .predictive-search__product-vendor {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
  text-transform: none !important;
}
.header-search-bar .dh-predictive .predictive-search__product-title .dh-hl { font-weight: 700 !important; }
.header-search-bar .dh-predictive__rail-group + .dh-predictive__rail-group { margin-top: 28px !important; }
.header-search-bar .dh-predictive__rail-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.header-search-bar .dh-predictive__rail-list a {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dh-green) !important;
  text-decoration: none !important;
}
.header-search-bar .dh-predictive__rail-list a .dh-hl { font-weight: 700 !important; }
.header-search-bar .dh-predictive__empty {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 16px !important;
  color: var(--dh-green) !important;
  margin: 0 0 24px !important;
}
.header-search-bar .dh-predictive__footer {
  margin-top: 28px !important;
  display: flex !important;
}
.header-search-bar .dh-predictive__more {
  font-family: "GalanoGrotesque", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  color: #fff !important;
  background-color: #150a0f !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease !important;
}
.header-search-bar .dh-predictive__more:hover {
  background-color: #2a1820 !important;
  color: #fff !important;
}

@media (max-width: 749px) {
  .header-search-bar .dh-predictive .predictive-search__results,
  .header-search-bar .dh-predictive__products .predictive-search__results {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .header-search-bar .dh-predictive.dh-predictive--has-rail {
    grid-template-columns: 1fr !important;
    gap: 28px 0 !important;
  }
  .header-search-bar .dh-predictive.dh-predictive--has-rail .dh-predictive__rail {
    border-left: none !important;
    border-top: 1px solid var(--dh-card-border) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
  }
  .header-search-bar .dh-predictive__more { width: 100% !important; justify-content: center !important; text-align: center !important; }
}

/* ============================================================
   DH BUNDLE BUILDER (build-your-bundle page) — ported from the
   Shopify dh-bundle-builder.css. Component rules are verbatim &
   scoped under .dh-bb* (leak-safe). The immersive/chrome-hide
   block is re-keyed to Shopline's DOM:
   body > .section > .custom-sline > .page-width > .custom-sline__inner
        > .rte > dh-bundle-builder.dh-bb

   IMPORTANT — anchor on the PAGE-UNIQUE custom element <dh-bundle-builder>,
   NOT the bare .dh-bb class. The homepage benefit-bar marquee renders
   <dh-benefit-bar class="dh-bb"> and also reuses the dh-bb__ prefix
   (dh-bb__track/__item/__check), so a bare .dh-bb / :has(.dh-bb) anchor
   leaks onto the homepage. Only the builder owns <dh-bundle-builder>, so
   :has(dh-bundle-builder) and dh-bundle-builder.dh-bb match the builder
   page exclusively and never the benefit bar.
   ============================================================ */

html:has(dh-bundle-builder),
body:has(dh-bundle-builder) {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Cascade full height through every Shopline wrapper down to the builder. */
body:has(dh-bundle-builder) .section:has(dh-bundle-builder),
body:has(dh-bundle-builder) .custom-sline:has(dh-bundle-builder),
body:has(dh-bundle-builder) .custom-sline:has(dh-bundle-builder) > .page-width,
body:has(dh-bundle-builder) .custom-sline:has(dh-bundle-builder) .custom-sline__inner,
body:has(dh-bundle-builder) .custom-sline:has(dh-bundle-builder) .rte {
  height: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

/* The builder itself must keep its flex column layout so the fixed-height
   step constrains the media panel into a scroll viewport — same resets,
   without forcing display:block. */
body:has(dh-bundle-builder) dh-bundle-builder {
  height: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide site chrome (header group, announcement bar, footer group) on the builder page. */
body:has(dh-bundle-builder) #shopline-section-sections--header-group__announcement-bar,
body:has(dh-bundle-builder) [id*="sections--header-group__header"],
body:has(dh-bundle-builder) [id*="sections--header-group"],
body:has(dh-bundle-builder) [id*="sections--footer-group"],
body:has(dh-bundle-builder) header.header-section,
body:has(dh-bundle-builder) .header-section,
body:has(dh-bundle-builder) footer {
  display: none !important;
}

/* Kill any sibling sections so only the builder section occupies the viewport. */
body:has(dh-bundle-builder) .section:not(:has(dh-bundle-builder)):not([id*="header-group"]):not([id*="footer-group"]) {
  display: none !important;
}

/* =============================================================
   ROOT — fills the viewport exactly
   ============================================================= */

dh-bundle-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

dh-bundle-builder.dh-bb {
  --bb-bg: #FBFAF6;
  --bb-primary: #DC4213;
  --bb-text: #761800;
  --bb-text-light: rgba(118, 24, 0, 0.55);
  --bb-text-muted: rgba(118, 24, 0, 0.35);
  --bb-btn: #D7A353;
  --bb-btn-text: #fff;
  --bb-card-bg: #FFFFFF;
  --bb-card-border: rgba(118, 24, 0, 0.12);
  --bb-success: #1A7A4E;
  --bb-radius: 12px;
  --bb-radius-sm: 8px;

  background: var(--bb-bg);
  color: var(--bb-text);
  height: 100%;
  font-family: var(--font-base, 'GalanoGrotesque', sans-serif);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   HEADER — minimal, centered
   ============================================================ */

/* Header — navigation bar with back, title/progress, and next-step CTA */
.dh-bb__header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-card-border);
  flex-shrink: 0;
  z-index: 20;
}

.dh-bb__header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--bb-text);
  text-decoration: none;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.dh-bb__header-back:hover {
  background: rgba(118, 24, 0, 0.06);
}

.dh-bb__header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.dh-bb__header-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-text);
  line-height: 1;
}

.dh-bb__progress {
  width: 100%;
  max-width: 200px;
  height: 3px;
  background: rgba(118, 24, 0, 0.10);
  border-radius: 99px;
  overflow: hidden;
}

.dh-bb__progress-fill {
  height: 100%;
  width: 33.33%;
  background: var(--bb-primary);
  border-radius: 99px;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dh-bb__progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-text-light);
  line-height: 1;
}

/* Next-step CTA in header (replaces the old X close) */
.dh-bb__header-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bb-primary);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.dh-bb__header-next:hover { background: color-mix(in srgb, var(--bb-primary) 80%, #fff); }
.dh-bb__header-next:disabled {
  opacity: 0.35;
  cursor: default;
}
.dh-bb__header-next:not(:disabled) span {
  display: inline-block;
  animation: dh-arrow-nudge 1.8s ease-in-out infinite;
}

@keyframes dh-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.dh-bb__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dh-spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes dh-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   STEPS
   ============================================================ */

.dh-bb__step {
  display: none;
  flex: 1;
  min-height: 0; /* allow flex children to shrink */
}
.dh-bb__step.is-active { display: flex; }
.dh-bb__step[hidden] { display: none; }

/* Transitions */
.dh-bb__step.is-entering-right { animation: bb-in-r 250ms ease-out forwards; }
.dh-bb__step.is-entering-left  { animation: bb-in-l 250ms ease-out forwards; }
.dh-bb__step.is-exiting-left   { animation: bb-out-l 250ms ease-in forwards; }
.dh-bb__step.is-exiting-right  { animation: bb-out-r 250ms ease-in forwards; }

@keyframes bb-in-r  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes bb-in-l  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes bb-out-l { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-100%); } }
@keyframes bb-out-r { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .dh-bb__step.is-entering-right,
  .dh-bb__step.is-entering-left,
  .dh-bb__step.is-exiting-left,
  .dh-bb__step.is-exiting-right { animation: none; }
}

/* ============================================================
   SPLIT LAYOUT — the core pattern
   ============================================================ */

/* Split takes remaining space after header, minus the builder footer. */
.dh-bb__split {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 50px; /* mobile footer clearance; desktop override below */
}

/* --- Media panel wrapper — positions dots absolutely over the scroll area --- */
.dh-bb__media-panel {
  position: relative;
  flex: 0 0 auto;
  height: 38dvh;
}

/* --- Left: Media panel ---
   Mobile: shown as a top row, ~40dvh tall, scrolls horizontally.
   Desktop override (≥1024px) swaps it back to a 50% side panel. */
.dh-bb__split-media {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #F0EBE1;
  -webkit-overflow-scrolling: touch;
}

/* Pagination dots — absolutely positioned well inside the image area */
.dh-bb__media-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 3;
  pointer-events: auto;
}
.dh-bb__media-dots:empty { display: none; }

.dh-bb__media-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dh-bb__media-dot.is-active {
  width: 18px;
  border-radius: 4px;
  background: #fff;
}

.dh-bb__split-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Media stack: scrollable vertical gallery driven by the focused product --- */
.dh-bb__media-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.dh-bb__media-item {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.dh-bb__media-item:focus-visible {
  outline: 3px solid rgba(220, 66, 19, 0.4);
  outline-offset: -3px;
}

.dh-bb__media-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 150ms ease;
}

.dh-bb__media-item:hover .dh-bb__media-image {
  opacity: 0.92;
}

/* Fallback: product can arrangement */
.dh-bb__split-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #F0EBE1 0%, #E8E0D0 100%);
  position: relative;
  padding: 10%;
}

.dh-bb__fallback-can {
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.12));
}
.dh-bb__fallback-can--1 { position: relative; z-index: 2; max-width: 40%; }
.dh-bb__fallback-can--2 { position: absolute; left: 8%; bottom: 15%; z-index: 1; max-width: 30%; opacity: 0.9; }
.dh-bb__fallback-can--3 { position: absolute; right: 8%; bottom: 15%; z-index: 1; max-width: 30%; opacity: 0.9; }

/* --- Right: Content panel --- */
.dh-bb__split-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dh-bb__split-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}

/* --- Headings --- */
.dh-bb__heading {
  font-family: var(--font-headline, 'Clever Bold', serif);
  font-size: 32px;
  line-height: 1.05;
  color: var(--bb-primary);
  margin: 0 0 8px;
}

.dh-bb__subheading {
  font-size: 15px;
  color: var(--bb-text-light);
  margin: 0 0 16px;
}

/* ============================================================
   STEP 1 — PROGRESSIVE BENEFITS STEPPER
   ============================================================ */

.dh-bb__benefits {
  margin: 0;
  padding: 0;
}

/* Track */
.dh-bb__benefits-track {
  height: 4px;
  background: rgba(118, 24, 0, 0.08);
  border-radius: 99px;
  margin-bottom: 14px;
  overflow: hidden;
}

.dh-bb__benefits-fill {
  height: 100%;
  width: 0%;
  background: var(--bb-primary);
  border-radius: 99px;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tiers row — space evenly under the track */
.dh-bb__benefits-tiers {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: 4px;
}

/* Individual tier */
.dh-bb__benefits-tier {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.3;
  transition: opacity 250ms ease;
  text-align: center;
  font-size: 10px;
  white-space: nowrap;
}

.dh-bb__benefits-tier.is-active {
  opacity: 1;
}

.dh-bb__benefits-tier.is-reached {
  opacity: 0.55;
}

/* Dot */
.dh-bb__tier-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bb-card-border);
  background: var(--bb-card-bg);
  flex-shrink: 0;
  transition: border-color 250ms ease, background 250ms ease;
}

.dh-bb__benefits-tier.is-active .dh-bb__tier-dot,
.dh-bb__benefits-tier.is-reached .dh-bb__tier-dot {
  border-color: var(--bb-primary);
  background: var(--bb-primary);
}

/* Tier info */
.dh-bb__tier-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dh-bb__tier-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-text);
}

.dh-bb__tier-perk {
  font-size: 10px;
  font-weight: 600;
  color: var(--bb-text-light);
}

.dh-bb__benefits-tier.is-active .dh-bb__tier-perk {
  color: var(--bb-primary);
  font-weight: 700;
}

/* Current price + hint */
.dh-bb__benefits-current {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

.dh-bb__current-price {
  font-family: var(--font-base, 'GalanoGrotesque', sans-serif);
  font-weight: 800;
  font-size: 20px;
  color: var(--bb-primary);
  line-height: 1;
}

.dh-bb__current-hint {
  font-size: 13px;
  color: var(--bb-text-light);
}

.dh-bb__quick-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px 20px;
  background: var(--bb-text);
  border: none;
  border-radius: 99px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.dh-bb__quick-add:hover { opacity: 0.85; }
.dh-bb__quick-add.is-added { background: var(--bb-success); }

/* ============================================================
   SAVINGS BAR — two-position progress (mobile footer)
   Shows current achieved tier and next unlock target.
   ============================================================ */

.dh-bb__savings-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #761800;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--font-base, 'GalanoGrotesque', sans-serif);
}

.dh-bb__savings-price {
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.dh-bb__savings-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dh-bb__savings-milestone {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dh-bb__savings-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 250ms ease;
}

.dh-bb__savings-milestone--achieved .dh-bb__savings-dot {
  background: #D7A353;
}
.dh-bb__savings-milestone--target .dh-bb__savings-dot {
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
}

.dh-bb__savings-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.85;
}

.dh-bb__savings-milestone--achieved .dh-bb__savings-label {
  color: #D7A353;
}

.dh-bb__savings-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  overflow: hidden;
  min-width: 20px;
}

.dh-bb__savings-fill {
  height: 100%;
  width: 0%;
  background: #D7A353;
  border-radius: 99px;
  transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tier unlock pulse — applied by JS when a tier is achieved */
@keyframes dh-savings-unlock {
  0%   { box-shadow: 0 0 0 0 rgba(215, 163, 83, 0.7); transform: scale(1); }
  40%  { transform: scale(1.2); }
  70%  { box-shadow: 0 0 0 8px rgba(215, 163, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 163, 83, 0); transform: scale(1); }
}

/* Label pop — applied by JS on the target label when progress changes */
@keyframes dh-savings-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.dh-bb__savings-milestone--achieved.is-unlocking .dh-bb__savings-dot {
  animation: dh-savings-unlock 500ms ease-out;
}

.dh-bb__savings-milestone--target.is-popping .dh-bb__savings-label {
  animation: dh-savings-pop 300ms ease-out;
}

/* Slide-in for label changes */
@keyframes dh-savings-slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.dh-bb__savings-milestone.is-sliding-in .dh-bb__savings-label {
  animation: dh-savings-slide-in 300ms ease-out;
}

/* Desktop summary inside savings bar — hidden on mobile */
.dh-bb__savings-summary { display: none; }

/* Desktop scroll hint — hidden on mobile (has horizontal dots instead) */
.dh-bb__scroll-hint { display: none; }

/* Mobile shows two-position, desktop shows full-tier */
.dh-bb__savings-progress--desktop { display: none; }
.dh-bb__savings-progress--mobile { display: flex; }

@media (min-width: 1024px) {
  .dh-bb__savings-progress--mobile { display: none; }
  .dh-bb__savings-progress--desktop { display: flex; }
}

/* Desktop full-tier progression */
.dh-bb__savings-full-tier {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: opacity 250ms ease;
}

.dh-bb__savings-full-tier.is-reached {
  opacity: 0.5;
}

.dh-bb__savings-full-tier.is-active .dh-bb__savings-dot {
  background: #D7A353;
  border-color: #D7A353;
}

.dh-bb__savings-full-tier.is-active .dh-bb__savings-label,
.dh-bb__savings-full-tier.is-active .dh-bb__savings-perk {
  color: #D7A353;
}

.dh-bb__savings-full-tier:not(.is-active):not(.is-reached) .dh-bb__savings-dot {
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  box-sizing: border-box;
}

.dh-bb__savings-perk {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
}

/* Flavor wrap — holds chevrons + scroll grid on mobile */
.dh-bb__flavors-wrap {
  position: relative;
  margin: 0 -20px;
}

/* Grid — mobile: horizontal scroll-snap row. Desktop override: vertical stack. */
.dh-bb__flavor-grid {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  padding: 8px 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dh-bb__flavor-grid::-webkit-scrollbar {
  display: none;
}

/* Chevron nav — mobile only */
.dh-bb__flavors-nav {
  display: none; /* Hidden on all viewports — flavor cards scroll naturally */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--bb-card-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--bb-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease, transform 120ms ease;
}

.dh-bb__flavors-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.dh-bb__flavors-nav--prev { left: 6px; }
.dh-bb__flavors-nav--next { right: 6px; }

.dh-bb__flavors-nav:active:not(:disabled) {
  transform: translateY(-50%) scale(0.92);
}

/* Dots — mobile only */
.dh-bb__flavors-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 16px;
}

.dh-bb__flavors-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(118, 24, 0, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease, transform 150ms ease;
}

.dh-bb__flavors-dot.is-active {
  background: var(--bb-primary);
  transform: scale(1.3);
}

/* Card — horizontal layout: image left, info right */
.dh-bb__flavor-card {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 0 0 85%;
  scroll-snap-align: start;
  border: 2px solid transparent;
  border-radius: var(--bb-radius);
  background: var(--bb-card-bg);
  padding: 10px;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Hover — neutral baseline only */
.dh-bb__flavor-card:hover:not(.is-focused) {
  border-color: rgba(118, 24, 0, 0.15);
}

/* Focused — the only card-level visual state. The qty stepper carries the
   "in cart" signal on its own; a second border treatment competed with
   focused and made it ambiguous which card was being previewed. */
.dh-bb__flavor-card.is-focused {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 1px var(--bb-primary);
}

/* Image wrap — square, fixed size */
.dh-bb__flavor-image-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: var(--bb-radius-sm);
  overflow: hidden;
  background: #F0EBE1;
}

/* Info column */
.dh-bb__flavor-info {
  flex: 1;
  min-width: 0;
}

.dh-bb__flavor-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform 300ms ease;
}
.dh-bb__flavor-card:hover .dh-bb__flavor-image { transform: scale(1.04); }

/* Price + controls row */
.dh-bb__flavor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.dh-bb__flavor-controls {
  flex-shrink: 0;
}

.dh-bb__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--bb-text);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 120ms ease, transform 80ms ease;
}
.dh-bb__add-btn:hover { opacity: 0.85; }
.dh-bb__add-btn:active { transform: scale(0.95); }

/* Inline qty stepper */
.dh-bb__qty-inline {
  display: none;
  align-items: center;
  gap: 0;
  background: var(--bb-text);
  border-radius: 99px;
  padding: 2px;
}

.dh-bb__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  transition: background 100ms ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.dh-bb__qty-btn:hover { background: rgba(255,255,255,0.30); }
.dh-bb__qty-btn:active { transform: scale(0.92); }

.dh-bb__qty-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff !important;
  display: block;
}

.dh-bb__qty-value {
  font-weight: 700;
  font-size: 14px;
  min-width: 22px;
  text-align: center;
  color: #fff;
  line-height: 1;
}

/* Card text */
.dh-bb__flavor-name {
  font-family: var(--font-headline, 'Clever Bold', serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--bb-text);
  margin: 0;
  line-height: 1.2;
}

.dh-bb__flavor-desc {
  font-size: 13px;
  color: var(--bb-text-light);
  margin: 2px 0 0;
  line-height: 1.3;
}

.dh-bb__flavor-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--bb-text);
  margin: 0;
  white-space: nowrap;
}

.dh-bb__sold-out {
  font-size: 13px;
  color: var(--bb-text-muted);
  margin-top: 4px;
}

/* ============================================================
   STEP 2: PLAN SELECTION
   ============================================================ */

.dh-bb__plan-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.dh-bb__plan-card {
  position: relative;
  background: var(--bb-card-bg);
  border: 2px solid var(--bb-card-border);
  border-radius: var(--bb-radius);
  padding: 20px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dh-bb__plan-card.is-selected {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 1px var(--bb-primary);
}
.dh-bb__plan-card:not(.is-selected) .dh-bb__plan-body { opacity: 0.5; }
.dh-bb__plan-card:hover:not(.is-selected) { border-color: rgba(118, 24, 0, 0.25); }
.dh-bb__plan-card:focus-visible { outline: 3px solid rgba(220, 66, 19, 0.3); outline-offset: 2px; }

/* Badge */
.dh-bb__plan-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 3px 12px;
  background: var(--bb-btn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 99px;
}

/* Radio */
.dh-bb__plan-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--bb-card-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  transition: border-color 150ms ease;
}
.dh-bb__plan-card.is-selected .dh-bb__plan-radio { border-color: var(--bb-primary); }

.dh-bb__radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 150ms ease;
}
.dh-bb__plan-card.is-selected .dh-bb__radio-dot { background: var(--bb-primary); }

/* Body */
.dh-bb__plan-body { flex: 1; transition: opacity 150ms ease; }

.dh-bb__plan-title {
  font-family: var(--font-headline, 'Clever Bold', serif);
  font-size: 18px;
  margin: 0;
  color: var(--bb-text);
}

/* Per-can hero price in plan cards */
.dh-bb__plan-hero-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 4px;
}

.dh-bb__plan-per-can {
  font-family: var(--font-base, 'GalanoGrotesque', sans-serif);
  font-weight: 800;
  font-size: 24px;
  color: var(--bb-text);
  line-height: 1;
}

.dh-bb__plan-card.is-selected .dh-bb__plan-per-can {
  color: var(--bb-primary);
}

.dh-bb__plan-save-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-success);
}

.dh-bb__plan-save-tag[hidden] { display: none; }

.dh-bb__plan-subtitle {
  font-size: 13px;
  color: var(--bb-text-light);
  margin: 4px 0 0;
}

.dh-bb__plan-pricing { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.dh-bb__plan-price-original { font-size: 14px; color: var(--bb-text-muted); text-decoration: line-through; }
.dh-bb__plan-price-discount { font-weight: 700; font-size: 18px; color: var(--bb-text); text-decoration: none; }
.dh-bb__plan-price-full { font-weight: 700; font-size: 16px; color: var(--bb-text); }

/* Details (hidden when not selected) */
.dh-bb__plan-details { margin-top: 16px; border-top: 1px solid var(--bb-card-border); padding-top: 16px; }
.dh-bb__plan-card:not(.is-selected) .dh-bb__plan-details { display: none; }

.dh-bb__plan-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dh-bb__plan-benefits li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bb-text); }
.dh-bb__plan-benefits svg { flex-shrink: 0; color: var(--bb-success); }

/* Order summary */
.dh-bb__order-summary {
  background: rgba(118, 24, 0, 0.04);
  border-radius: var(--bb-radius);
  padding: 20px;
  margin-top: 24px;
}

.dh-bb__summary-title { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-text-light); margin: 0 0 12px; }
.dh-bb__summary-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.dh-bb__summary-item-thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dh-bb__summary-item-qty { font-weight: 700; font-size: 12px; color: var(--bb-text-light); }
.dh-bb__summary-item-cans {
  color: var(--bb-text-muted);
  font-weight: 400;
}

.dh-bb__summary-total-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-text-light);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--bb-card-border);
}

.dh-bb__summary-divider { border: none; border-top: 1px solid var(--bb-card-border); margin: 10px 0; }
.dh-bb__summary-divider-line { border: none; border-top: 2px solid var(--bb-primary, #762400); margin: 8px 0 4px; }
.dh-bb__summary-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.dh-bb__summary-row--savings { color: var(--bb-success); font-weight: 600; }
.dh-bb__summary-row--discount { color: var(--bb-success); font-weight: 600; padding: 2px 0; }
.dh-bb__summary-row--discount[data-discount-source="code"] { color: var(--bb-primary, #762400); }
.dh-bb__summary-discounts { display: flex; flex-direction: column; gap: 1px; }
.dh-bb__summary-discount-value { font-variant-numeric: tabular-nums; }
.dh-bb__review-totals-row--savings[data-discount-source="code"] { color: var(--bb-primary, #762400); }
.dh-bb__summary-row--total { font-weight: 800; font-size: 18px; }

.dh-bb__summary-per-can { text-align: right; font-size: 13px; color: var(--bb-text-light); }
.dh-bb__shipping-free { color: var(--bb-success); font-weight: 600; }
.dh-bb__summary-row--shipping del { color: var(--bb-text-light); }
.dh-bb__review-totals-row--shipping del { color: var(--bb-text-light); }

.dh-bb__edit-link {
  display: inline-block; margin-top: 12px; background: none; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--bb-text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0;
}
.dh-bb__edit-link:hover { color: var(--bb-primary); }

/* Inline CTA — secondary next/checkout button at bottom of each step's content */
.dh-bb__inline-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 24px;
  background: var(--bb-primary);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.dh-bb__inline-cta:hover { background: color-mix(in srgb, var(--bb-primary) 80%, #fff); }
.dh-bb__inline-cta:disabled { opacity: 0.35; cursor: default; }
.dh-bb__inline-cta:not(:disabled) span:last-child {
  display: inline-block;
  animation: dh-arrow-nudge 1.8s ease-in-out infinite;
}

/* ============================================================
   STEP 3: REVIEW
   ============================================================ */

.dh-bb__review-card {
  background: var(--bb-card-bg);
  border: 1px solid var(--bb-card-border);
  border-radius: var(--bb-radius);
  padding: 20px;
  margin-bottom: 12px;
}

.dh-bb__review-label { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-text-light); margin: 0 0 12px; }

.dh-bb__review-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.dh-bb__review-item + .dh-bb__review-item { border-top: 1px solid var(--bb-card-border); }
.dh-bb__review-item-image { width: 40px; height: 40px; border-radius: var(--bb-radius-sm); object-fit: cover; background: #F0EBE1; }
.dh-bb__review-item-name { flex: 1; font-size: 14px; font-weight: 500; }
.dh-bb__review-item-qty { font-weight: 700; font-size: 13px; color: var(--bb-text-light); }
.dh-bb__review-item-cans { font-weight: 400; font-size: 12px; opacity: 0.7; }
.dh-bb__review-item-price { font-size: 14px; font-weight: 600; min-width: 60px; text-align: right; }

.dh-bb__review-plan-type { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.dh-bb__review-plan-frequency { font-size: 13px; color: var(--bb-text-light); }

.dh-bb__review-totals-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.dh-bb__review-totals-row--savings { color: var(--bb-success); font-weight: 600; }
.dh-bb__review-totals-divider { border: none; border-top: 1px solid var(--bb-card-border); margin: 6px 0; }
.dh-bb__review-totals-row--total { font-family: var(--font-base, 'GalanoGrotesque', sans-serif); font-weight: 800; font-size: 22px; padding: 8px 0 4px; }
.dh-bb__review-totals-per-can { font-size: 13px; color: var(--bb-text-light); text-align: right; }

/* Cross-sell */
.dh-bb__cross-sell { background: rgba(118, 24, 0, 0.04); border-radius: var(--bb-radius); padding: 20px; margin-top: 12px; }
.dh-bb__cross-sell-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-primary); margin-bottom: 10px; }
.dh-bb__cross-sell-content { display: flex; gap: 14px; align-items: flex-start; }
.dh-bb__cross-sell-image { width: 72px; height: 72px; border-radius: var(--bb-radius-sm); object-fit: cover; flex-shrink: 0; }
.dh-bb__cross-sell-title { font-family: var(--font-headline, 'Clever Bold', serif); font-size: 16px; margin: 0 0 4px; }
.dh-bb__cross-sell-desc { font-size: 13px; color: var(--bb-text-light); margin: 0 0 10px; }
.dh-bb__cross-sell-btn {
  background: var(--bb-btn); border: none; padding: 8px 18px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bb-btn-text); border-radius: 99px; cursor: pointer; transition: opacity 120ms ease;
}
.dh-bb__cross-sell-btn:hover { opacity: 0.85; }
.dh-bb__cross-sell-btn.is-added { background: var(--bb-success); }

/* --- Focus --- */
dh-bundle-builder.dh-bb button:focus-visible,
dh-bundle-builder.dh-bb a:focus-visible,
dh-bundle-builder.dh-bb select:focus-visible { outline: 3px solid rgba(220, 66, 19, 0.3); outline-offset: 2px; }

/* --- SR --- */
.dh-bb__sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 600px) {
  .dh-bb__heading { font-size: 38px; }
  .dh-bb__split-scroll { padding: 32px 32px; }
}

/* ============================================================
   DESKTOP — split layout kicks in
   ============================================================ */

@media (min-width: 1024px) {
  .dh-bb__split {
    flex-direction: row;
  }

  /* Left panel: media panel wrapper fills 50% on desktop */
  .dh-bb__media-panel {
    flex: 0 0 50%;
    width: 50%;
    height: auto;
  }

  .dh-bb__split-media {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
  }

  /* Right panel: scrollable content */
  .dh-bb__split-content {
    width: 50%;
    min-height: 0;
  }

  /* Steps 2 & 3 don't have the media-panel wrapper — constrain the bare split-media */
  .dh-bb__step[data-step="2"] .dh-bb__split-media,
  .dh-bb__step[data-step="3"] .dh-bb__split-media {
    flex: 0 0 50%;
    width: 50%;
    align-self: stretch;
  }

  .dh-bb__step[data-step="2"] .dh-bb__split-image,
  .dh-bb__step[data-step="3"] .dh-bb__split-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hide savings bar on steps 2-3 — tier info is locked from step 1,
     plan cards already show pricing. Removes distraction. */
  .dh-bb[data-current-step="2"] .dh-bb__savings-bar,
  .dh-bb[data-current-step="3"] .dh-bb__savings-bar {
    display: none;
  }

  /* No footer clearance needed on steps 2-3 since savings bar is hidden */
  .dh-bb[data-current-step="2"] .dh-bb__split,
  .dh-bb[data-current-step="3"] .dh-bb__split {
    padding-bottom: 0;
  }

  .dh-bb__split-scroll {
    padding: 32px 48px;
  }

  .dh-bb__heading { font-size: 44px; }

  .dh-bb__flavor-image-wrap {
    width: 100px;
    height: 100px;
  }

  /* Flavor row returns to vertical stack — undo mobile scroll-snap */
  .dh-bb__flavors-wrap {
    margin: 0;
  }

  .dh-bb__flavor-grid {
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    gap: 10px;
  }

  .dh-bb__flavor-card {
    flex: 0 0 auto;
    scroll-snap-align: none;
  }

  .dh-bb__flavors-nav,
  .dh-bb__flavors-dots {
    display: none;
  }

  /* Desktop: flatten the subheading-row back to a regular block so the inline
     mobile button hides and desktop layout matches the original (quick-add
     appears below the benefits stepper, above the flavor grid). */
  .dh-bb__subheading-row {
    display: block;
  }
  .dh-bb__quick-add--inline {
    display: none;
  }
  .dh-bb__quick-add:not(.dh-bb__quick-add--inline) {
    display: inline-flex;
  }

  /* Scroll affordance — subtle dark gradient at bottom of media panel */
  .dh-bb__media-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.18));
    pointer-events: none;
    z-index: 2;
    transition: opacity 400ms ease;
  }

  .dh-bb__media-panel.is-scrolled-bottom::after {
    opacity: 0;
  }

  .dh-bb__scroll-hint {
    display: flex;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transition: opacity 400ms ease;
    background: rgba(0, 30, 20, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 14px 6px 12px;
    border-radius: 99px;
  }

  .dh-bb__scroll-hint-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FDF4E4;
    opacity: 0.85;
  }

  .dh-bb__scroll-hint-line {
    width: 2px;
    height: 32px;
    overflow: hidden;
    border-radius: 1px;
    flex-shrink: 0;
  }

  .dh-bb__scroll-hint-line::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #FDF4E4;
    opacity: 0.85;
    border-radius: 1px;
    animation: dh-scroll-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: top center;
  }

  @keyframes dh-scroll-pulse {
    0%   { transform: scaleY(0) translateY(0); opacity: 0; }
    15%  { transform: scaleY(0.4) translateY(0); opacity: 0.9; }
    50%  { transform: scaleY(1) translateY(0); opacity: 0.85; }
    80%  { transform: scaleY(1) translateY(100%); opacity: 0; }
    100% { transform: scaleY(0) translateY(0); opacity: 0; }
  }

  .dh-bb__media-panel.is-scrolled-bottom .dh-bb__scroll-hint {
    opacity: 0;
  }

  /* Desktop: media panel returns to vertical image stack */
  .dh-bb__split-media {
    scroll-snap-type: none;
  }
  .dh-bb__split-media .dh-bb__media-stack {
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .dh-bb__split-media .dh-bb__media-item {
    width: 100%;
    height: auto;
    scroll-snap-align: none;
    display: block;
  }
  .dh-bb__split-media .dh-bb__media-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .dh-bb__media-dots { display: none; }

  /* Desktop: show header CTA with more room */
  .dh-bb__header-next {
    padding: 10px 24px;
    font-size: 13px;
  }

  /* Desktop: single-row footer — savings bar becomes the only bottom bar.
     Builder-footer is hidden; its summary + CTA are replicated in the savings bar. */
  .dh-bb__savings-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 32px;
    gap: 20px;
  }

  .dh-bb__savings-price { font-size: 18px; }
  .dh-bb__savings-label { font-size: 12px; }
  .dh-bb__savings-dot { width: 10px; height: 10px; }
  .dh-bb__savings-milestone--target .dh-bb__savings-dot { width: 10px; height: 10px; }

  /* Desktop summary + CTA inside the savings bar — right-aligned */
  .dh-bb__savings-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-left: auto;
  }

  .dh-bb__savings-summary-text {
    font-size: 13px;
    opacity: 0.85;
    white-space: nowrap;
    text-align: right;
    line-height: 1.3;
  }

  .dh-bb__savings-summary-detail {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #D7A353;
  }

  /* Hide the builder-footer on desktop — savings bar replaces it */
  dh-builder-footer,
  .dh-builder-footer {
    display: none !important;
  }

  /* Clearance for the single footer row */
  .dh-bb__split {
    padding-bottom: 60px;
  }
}

/* ============================================================
   WIDE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {
  .dh-bb__split-scroll {
    padding: 40px 64px;
  }

  .dh-bb__heading { font-size: 48px; }

  .dh-bb__flavor-grid { gap: 20px; }
}

/* ============================================================
   MOBILE POLISH (< 1024px)
   — compact header/footer, rising-card content panel,
     reordered step-1 content so cards sit above the savings stepper
   ============================================================ */

@media (max-width: 1023px) {
  /* Mobile media panel — horizontal scroll */
  .dh-bb__media-panel {
    background: transparent;
  }

  /* Media panel recedes; delineation comes from the rising content card below.
     Mobile: horizontal scroller so images become a paginated gallery (height = container, width auto). */
  .dh-bb__split-media {
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dh-bb__split-media::-webkit-scrollbar { display: none; }

  .dh-bb__split-media .dh-bb__media-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
  }

  .dh-bb__split-media .dh-bb__media-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dh-bb__split-media .dh-bb__media-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* Rising card — thicker drop shadow for stronger delineation from the images above */
  .dh-bb__split-content {
    background: #FFFFFF;
    border-radius: 18px 18px 0 0;
    margin-top: -14px;
    position: relative;
    z-index: 2;
    box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.22), 0 -2px 6px rgba(0, 0, 0, 0.08);
  }

  /* Inline the "Try One of Each" button beside the subheading, hide the separate below-cards one */
  .dh-bb__subheading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .dh-bb__subheading-row .dh-bb__subheading {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .dh-bb__quick-add--inline {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  /* Hide the original (below-cards) quick-add on mobile; inline version is used instead */
  .dh-bb__quick-add:not(.dh-bb__quick-add--inline) {
    display: none;
  }

  .dh-bb__split-scroll {
    padding: 20px 20px 24px;
  }

  /* Reorder step-1 content so flavor cards sit directly under the title,
     pushing the savings stepper below. Desktop keeps natural DOM order. */
  .dh-bb__step[data-step="1"] .dh-bb__split-scroll {
    display: flex;
    flex-direction: column;
  }
  .dh-bb__step[data-step="1"] .dh-bb__heading          { order: 1; }
  .dh-bb__step[data-step="1"] .dh-bb__subheading-row   { order: 2; margin-bottom: 14px; }
  .dh-bb__step[data-step="1"] .dh-bb__flavors-wrap     { order: 3; }
  .dh-bb__step[data-step="1"] .dh-bb__flavors-dots     { order: 4; }
  .dh-bb__step[data-step="1"] .dh-bb__inline-cta       { order: 5; }

  /* Compact header */
  .dh-bb__header {
    height: 48px;
    padding: 0 12px;
    gap: 8px;
  }

  .dh-bb__header-back {
    width: 36px;
    height: 36px;
  }

  .dh-bb__header-title { font-size: 12px; }
  .dh-bb__progress { max-width: 140px; height: 2px; }
  .dh-bb__progress-label { font-size: 10px; }
  .dh-bb__header-next { font-size: 11px; padding: 7px 14px; }

  /* Images fill remaining space — no fixed height */
  .dh-bb__media-panel {
    height: auto;
    flex: 1;
    min-height: 0;
  }

  /* Step 1: compact drawer — fixed height, no overflow */
  .dh-bb__step[data-step="1"] .dh-bb__split-content {
    flex: 0 0 auto;
  }

  /* Steps 2 & 3: content takes full space and scrolls (no image panel visible) */
  .dh-bb__step[data-step="2"] .dh-bb__split-media,
  .dh-bb__step[data-step="3"] .dh-bb__split-media {
    display: none;
  }

  .dh-bb__step[data-step="2"] .dh-bb__split-content,
  .dh-bb__step[data-step="3"] .dh-bb__split-content {
    flex: 1;
    min-height: 0;
  }

  .dh-bb__step[data-step="2"] .dh-bb__split-scroll,
  .dh-bb__step[data-step="3"] .dh-bb__split-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 24px;
  }

  .dh-bb__split-scroll {
    padding: 16px 20px 16px;
  }

  .dh-bb__heading { font-size: 28px; margin-bottom: 4px; }

  /* Hide savings bar on steps 2-3 for mobile too */
  .dh-bb[data-current-step="2"] .dh-bb__savings-bar,
  .dh-bb[data-current-step="3"] .dh-bb__savings-bar {
    display: none;
  }

  /* Hide the desktop builder-footer on mobile; savings bar replaces it */
  .dh-builder-footer {
    display: none;
  }

  /* Savings bar is the mobile footer */
  .dh-bb__savings-bar {
    z-index: 100;
  }

  /* No vertical page overflow */
  .dh-bb__split {
    padding-bottom: 0;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.dh-bb__lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 8, 4, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dh-bb-lightbox-in 180ms ease-out;
}

.dh-bb__lightbox[hidden] {
  display: none;
}

@keyframes dh-bb-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dh-bb__lightbox-stage {
  position: relative;
  max-width: min(100%, 1100px);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dh-bb__lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.dh-bb__lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease;
}

.dh-bb__lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.dh-bb__lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease;
}

.dh-bb__lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.dh-bb__lightbox-nav--prev { left: 16px; }
.dh-bb__lightbox-nav--next { right: 16px; }

.dh-bb__lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  pointer-events: none;
}

.dh-bb__lightbox button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Prevent body from scrolling behind the lightbox (defense in depth —
   builder is already locked, but safe to enforce). */
body.dh-bb-lightbox-open {
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .dh-bb__lightbox { animation: none; }
}

/* ========================================================================
   DH CART PAGE — native main-cart section, brand restyle.
   Scoped to the cart page section id only (leak-safe; the slide-in cart
   DRAWER is a separate component, branded earlier under .cart-drawer).
   Reference: live Shopify /cart (analysis/cart-page/SPEC.md) — Clever 28/700
   green title, GalanoGrotesque green body, gold checkout CTA, qty stepper
   r10 + 1px border, grey taxes note, cream background.
   ===================================================================== */
#shopline-section-template--cart__main-cart .main-cart__container {
  background-color: var(--dh-cream) !important;
}
#shopline-section-template--cart__main-cart .main-cart-items__container,
#shopline-section-template--cart__main-cart .main-cart-footer__container {
  background-color: transparent !important;
}

/* Page title — Clever 28/42/700 green */
#shopline-section-template--cart__main-cart .main-cart-header h2 {
  font-family: 'Clever', Georgia, serif !important;
  font-size: 28px !important;
  line-height: 42px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: var(--dh-green) !important;
}

/* Header "Continue shopping" link — GalanoGrotesque green, underline kept */
#shopline-section-template--cart__main-cart .main-cart-header a.button--link {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
  text-decoration: underline !important;
}

/* Column header labels — GalanoGrotesque green */
#shopline-section-template--cart__main-cart .main-cart-items__header > div {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
}

/* Line-item divider */
#shopline-section-template--cart__main-cart .main-cart-items__list .cart-item {
  border-block-end: 1px solid var(--dh-card-border) !important;
}
#shopline-section-template--cart__main-cart .main-cart-items__list .cart-item:first-child {
  border-block-start: 1px solid var(--dh-card-border) !important;
}

/* Item title + price + meta — GalanoGrotesque green */
#shopline-section-template--cart__main-cart .cart-item__title,
#shopline-section-template--cart__main-cart .cart-item__title a,
#shopline-section-template--cart__main-cart .cart-item__option,
#shopline-section-template--cart__main-cart .cart-item__property,
#shopline-section-template--cart__main-cart .cart-item__total-final,
#shopline-section-template--cart__main-cart .cart-item__total-wrapper .cart-item__total-final {
  font-family: 'GalanoGrotesque', sans-serif !important;
  color: var(--dh-green) !important;
  letter-spacing: normal !important;
}
#shopline-section-template--cart__main-cart .cart-item__title,
#shopline-section-template--cart__main-cart .cart-item__title a {
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
}
#shopline-section-template--cart__main-cart .cart-item__total-final {
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 700 !important;
}
#shopline-section-template--cart__main-cart .cart-item__total-original {
  font-family: 'GalanoGrotesque', sans-serif !important;
  color: rgb(113, 113, 113) !important;
}

/* Quantity stepper — white, r10, 1px border rgb(21,21,21); grey -/+ → dark on hover */
#shopline-section-template--cart__main-cart .cart-item__amount-operator theme-input-number {
  background-color: #fff !important;
  border: 1px solid rgb(21, 21, 21) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
#shopline-section-template--cart__main-cart .cart-item__amount-operator theme-input-number button {
  color: rgb(113, 113, 113) !important;
  transition: color 0.2s ease-in !important;
}
#shopline-section-template--cart__main-cart .cart-item__amount-operator theme-input-number button:hover {
  color: rgb(21, 21, 21) !important;
}
#shopline-section-template--cart__main-cart .cart-item__amount-operator theme-input-number button svg {
  color: inherit !important;
}
#shopline-section-template--cart__main-cart .cart-item__amount-operator theme-input-number input {
  font-family: 'GalanoGrotesque', sans-serif !important;
  color: rgb(21, 21, 21) !important;
  background: transparent !important;
}

/* Remove control — green trash */
#shopline-section-template--cart__main-cart .cart-item__remove svg {
  color: var(--dh-green) !important;
}

/* Totals / subtotal — GalanoGrotesque green */
#shopline-section-template--cart__main-cart .cart-amount em,
#shopline-section-template--cart__main-cart .cart-amount span {
  font-family: 'GalanoGrotesque', sans-serif !important;
  color: var(--dh-green) !important;
  letter-spacing: normal !important;
}
#shopline-section-template--cart__main-cart .cart-amount__subtotal em,
#shopline-section-template--cart__main-cart .cart-amount__total em {
  font-size: 18px !important;
  line-height: 21.6px !important;
  font-weight: 700 !important;
}
#shopline-section-template--cart__main-cart .cart-amount__total span {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Taxes / shipping note — 12px grey */
#shopline-section-template--cart__main-cart .cart-taxes,
#shopline-section-template--cart__main-cart .cart-taxes * {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  color: rgb(113, 113, 113) !important;
  letter-spacing: normal !important;
}

/* Checkout button — gold brand primary (matches drawer CTA) */
#shopline-section-template--cart__main-cart .cart-checkout button.button--fill,
#shopline-section-template--cart__main-cart .cart-checkout .cart-form button {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: none !important;
  background-color: var(--dh-gold) !important;
  color: var(--dh-cream) !important;
  border: none !important;
  border-radius: 10px !important;
  width: 100% !important;
  padding: 16px 24px !important;
  transition: background-color 0.3s ease-in, color 0.3s ease-in !important;
}
#shopline-section-template--cart__main-cart .cart-checkout button.button--fill:hover,
#shopline-section-template--cart__main-cart .cart-checkout .cart-form button:hover {
  background-color: #c79b58 !important;
  color: var(--dh-cream) !important;
}

/* Empty state — green tips + green icon, cream bg already applied */
#shopline-section-template--cart__main-cart .cart-empty__tips {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-size: 18px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  color: var(--dh-green) !important;
  letter-spacing: normal !important;
}
#shopline-section-template--cart__main-cart .cart-empty__icon svg {
  color: var(--dh-green) !important;
}
#shopline-section-template--cart__main-cart .cart-empty__login-title {
  font-family: 'Clever', Georgia, serif !important;
  color: var(--dh-green) !important;
  letter-spacing: normal !important;
}
#shopline-section-template--cart__main-cart .cart-empty__login-text {
  font-family: 'GalanoGrotesque', sans-serif !important;
  color: var(--dh-green) !important;
  letter-spacing: normal !important;
}
#shopline-section-template--cart__main-cart .cart-empty__login-link {
  font-family: 'GalanoGrotesque', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--dh-green) !important;
  text-decoration: underline !important;
}

/* Mobile sticky checkout bar (cart-fixed-checkout, shows < 960px) — brand it */
@media (max-width: 959px) {
  #shopline-section-template--cart__main-cart .cart-fixed-checkout__total-text,
  #shopline-section-template--cart__main-cart .cart-fixed-checkout__total-price span {
    font-family: 'GalanoGrotesque', sans-serif !important;
    font-weight: 700 !important;
    color: var(--dh-green) !important;
    letter-spacing: normal !important;
  }
  #shopline-section-template--cart__main-cart .cart-fixed-checkout__total-price span {
    font-size: 22px !important;
    line-height: 33px !important;
  }
  #shopline-section-template--cart__main-cart .cart-checkout button.button--fill,
  #shopline-section-template--cart__main-cart .cart-checkout .cart-form button {
    font-size: 14px !important;
  }
}