.inline-cart-free-samples {
  padding: 0.9375rem 0.5000rem;
  border-top: solid 0.0625rem var(--hh-color-brand-tertiary);
  border-bottom: solid 0.0625rem var(--hh-color-brand-tertiary);
}

.inline-cart-free-samples.hide {
  display: none;
}

@media screen and (min-width: 990px) {
  .inline-cart-free-samples {
    padding: 2.0000rem 2.2500rem 2.8125rem;
  }
}

.free-samples__status {
  color: var(--hh-color-subdued);
  gap: 0.2500rem;
  margin-bottom: 0.8125rem;
}

.free-sample-drawer__footer .free-samples__status {
  margin-bottom: 0;
}

.free-samples__status svg {
  display: none;
}

hh-free-samples[full='true'] .free-samples__status,
hh-sampler-set-builder[full='true'] .free-samples__status {
  color: var(--hh-color-night);
}

hh-free-samples[full='true'] .free-samples__status svg,
hh-sampler-set-builder[full='true'] .free-samples__status svg {
  display: block;
}

.free-sample-items {
  gap: 0.6250rem;
  flex-direction: column;
}

.free-sample-drawer__header {
  padding: 1.5000rem 2.3750rem 1.6250rem;
  gap: 0.4375rem;
  text-align: center;
}

@media screen and (min-width: 749px) {
  .free-samples__status {
    margin-bottom: 1.1875rem;
  }

  .free-sample-drawer__header {
    text-align: left;
  }

  .free-sample-items {
    gap: 1.3125rem;
    flex-direction: row;
  }
}

.free-sample-item {
  padding: 0.3750rem 0.3750rem 0.3750rem 1.2500rem;
  border: solid 0.0625rem var(--hh-color-brand-tertiary);
  min-width: 14.0625rem;
}

.free-sample-item.is-empty {
  cursor: pointer;
}

.free-sample-item__actions {
  gap: 0.4688rem;
}

.free-sample-item__actions * {
  line-height: 1;
}

.free-sample-item__actions hh-button {
  --hh-font: var(--hh-body-x-small-font);
}

.free-sample-item__media {
  background-color: #f5f5f5;
  width: 4.5000rem;
  height: 4.5000rem;
  border: none;
  padding: 0;
}

.free-sample-media__wrapper {
  min-height: 4.5000rem;
}

.free-sample-media {
  width: 6.8750rem;
  height: 1.5000rem;
}

.free-sample-item.is-empty .free-sample-item__media {
  cursor: pointer;
}

@media screen and (max-width: 750px) {
  .free-sample-media__wrapper {
    min-height: 2.8125rem;
  }

  .free-sample-item.is-empty .free-sample-item__media {
    width: 2.8125rem;
    height: 2.8125rem;
  }
}

.free-sample-selection-item {
  border-top: solid 0.0625rem var(--hh-color-brand-tertiary);
  padding: 1.6250rem 4.3750rem 1.6250rem 4.5000rem;
  position: relative;
  gap: 1.1250rem;
}

.free-sample-selections {
  max-height: calc(100vh - 10.0000rem);
  overflow-y: auto;
}

.free-sample-selections li:last-child .free-sample-selection-item {
  border-bottom: solid 0.0625rem var(--hh-color-brand-tertiary);
}

.free-sample-selection-item.selected {
  background-color: #f7f7f7;
}

.free-sample-drawer__footer {
  position: absolute;
  left: 0;
  bottom: 0;
}

.free-sample-selection-item__badge {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: var(--hh-color-night);
  writing-mode: vertical-lr;
  padding: 0.5625rem 0.4375rem;
  transform: rotate(180deg);
  white-space: nowrap;
}

.free-sample-selection-item__image {
  width: 11.2500rem;
  height: 2.5000rem;
}

.free-sample-selection-item__title,
.free-sample-selection-item__subtitle {
  font: var(--hh-body-x-small-font);
  margin: 0;
}

.free-sample-learn-more__action svg {
  width: 0.5000rem;
  margin-left: 0.1875rem;
}

@media screen and (min-width: 749px) {
  .free-sample-selection-item__title {
    font-size: 1.0000rem;
  }

  .free-sample-selection-item__subtitle {
    font-size: 0.8750rem;
  }

  .free-sample-learn-more__action {
    margin-top: 0.2500rem;
  }
}

@media screen and (max-width: 750px) {
  .free-sample-selections {
    max-height: calc(100vh - 13.7500rem);
    max-height: calc(100dvh - 13.7500rem);
  }

  .free-sample-drawer__footer {
    padding: 0.8750rem 0.4375rem;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
  }

  .free-sample-selection-item__badge {
    line-height: 1;
  }

  .free-sample-selection-item {
    padding: 1.6250rem 3.1250rem 1.6250rem 2.5000rem;
  }

  .free-sample-selection-item__image {
    width: 6.8750rem;
    height: 1.5000rem;
  }
}

.learn-more-trigger {
  border: 0;
  background-color: transparent;
}

.free-sample-learn-more {
  position: fixed;
  z-index: 1;
  background: var(--hh-color-day);
  left: 0;
  top: 0;
  height: 100%;
  transform: translateX(-100%);
  transition: 0.25s;
}

.free-sample-learn-more__close {
  cursor: pointer;
  top: var(--hh-close-top, 1.3125rem);
  right: var(--hh-close-right, 1.1250rem);
  color: var(--hh-close-color, inherit);
  background-color: var(--hh-close-background-color, transparent);
  border: var(--hh-close-border, none);
  padding: var(--hh-close-padding, 0.2500rem 0.6250rem);
  border-radius: var(--hh-close-border-radius, 2.1875rem);
  font: var(--hh-close-font, inherit);
  position: absolute;
  z-index: 1;
}

hh-free-samples[full='true']
  .free-sample-selection-item:not(.selected)
  .free-sample-selection-item__action,
hh-sampler-set-builder[full='true']
  .free-sample-selection-item:not(.selected)
  .free-sample-selection-item__action {
  opacity: 0.5;
  pointer-events: none;
}

hh-free-samples[full='true']
  .free-sample-selection-item:not(.selected)
  .free-sample-selection-item__action
  button,
hh-sampler-set-builder[full='true']
  .free-sample-selection-item:not(.selected)
  .free-sample-selection-item__action
  button {
  pointer-events: none;
}

.free-sample-selection-item__action {
  width: 1.2500rem;
  height: 1.2500rem;
  border-radius: 1.2500rem;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 2.2500rem;
}

.free-sample-selection-item__action svg {
  transition: 0.25s;
  width: 1.2500rem;
  height: 1.2500rem;
}

@media screen and (max-width: 750px) {
  .free-sample-selection-item__action {
    right: 0.2500rem;
    padding: 0.4688rem;
    height: 2.5000rem;
    width: 2.5000rem;
    cursor: pointer;
  }

  .free-sample-selection-item__action svg {
    width: 1.5625rem;
    height: 1.5625rem;
  }
}

.free-sample-selection-item.selected .free-sample-selection-item__action svg {
  transform: rotate(45deg);
}

.free-sample-learn-more.visible {
  transform: translateX(0);
}

.free-sample-learn-more__body {
  padding: 1.2500rem 1.5625rem;
  white-space: break-spaces;
}

@media screen and (min-width: 749px) {
  .free-sample-learn-more__body {
    padding: 3.7500rem 4.6875rem;
  }
}

.free-sample-learn-more__media {
  padding-bottom: 38%;
}

hh-free-samples[selected='true'] .free-sample-drawer__action--pending,
hh-sampler-set-builder[full='true'] .free-sample-drawer__action--pending {
  display: none;
}

hh-free-samples:not([selected='true']) .free-sample-drawer__action--confirm,
hh-sampler-set-builder:not([full='true']) .free-sample-drawer__action--confirm {
  display: none;
}

.free-sample-drawer__close {
  position: absolute;
  cursor: pointer;
  top: 0.8750rem;
  left: 0.8125rem;
  font: var(--hh-body-small-font);
  gap: 0.5000rem;
}

.free-sample-drawer__close .icon {
  width: 0.8750rem;
  height: 0.7500rem;
  margin-right: 0.1250rem;
}

@media screen and (min-width: 749px) {
  .free-sample-drawer__close {
    top: var(--hh-close-top, 1.3125rem);
    right: var(--hh-close-right, 1.1250rem);
    left: auto;
    background-color: var(--hh-close-background-color, transparent);
    padding: var(--hh-close-padding, 0.2500rem 0.6250rem);
    border-radius: var(--hh-close-border-radius, 2.1875rem);
    font: var(--hh-close-font, inherit);
  }

  .free-sample-drawer__close .icon {
    display: none;
  }
}