: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);
}

/* Sold out — product stays visible and previewable, but reads inactive and
   has no add control. Set either by SHOPLINE availability or the block's
   "Mark as out of stock" toggle (used when the 3PL inventory sync is wrong). */
.dh-bb__flavor-card.is-sold-out .dh-bb__flavor-image {
  opacity: 0.45;
  filter: grayscale(1);
}
.dh-bb__flavor-card.is-sold-out:hover .dh-bb__flavor-image { transform: none; }
.dh-bb__flavor-card.is-sold-out .dh-bb__flavor-name,
.dh-bb__flavor-card.is-sold-out .dh-bb__flavor-desc,
.dh-bb__flavor-card.is-sold-out .dh-bb__flavor-price {
  opacity: 0.55;
}
.dh-bb__sold-out-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 99px;
  color: var(--bb-text);
  opacity: 0.7;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 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;
  }
}