.product__container klarna-placement {
  min-height: 2.5000rem;
  display: block;
}

@media screen and (max-width: 749px) {
  .product__container {
    margin: 0;
    overflow-x: hidden;
  }

  .product__media-wrapper {
    padding: 0;
  }

  .product__media-slider {
    height: 100vw;
    height: 100svw;
  }

  .product__container klarna-placement {
    padding: 0 0.6250rem;
  }
}

.product__container.is-loading:has(hh-variant-picker)
  :is(
    .product__media-wrapper,
    .product-heading__price,
    .product-form__buttons
  ) {
  opacity: 0;
}

.product-hero__details--vat {
  margin-left: 10px;
}

.product__info-container > * + * {
  margin: 0.9375rem 0;
}

.product__media-wrapper {
  position: relative;
}

.product__info-wrapper {
  padding: 0;
}

@media screen and (min-width: 750px) {
  .product__info-container--sticky {
    position: sticky;
    top: 1.8750rem;
    z-index: 2;
    transition: top var(--hh-duration-medium) ease-in-out;
  }

  .sticky-header-showing .product__info-container--sticky {
    top: calc(var(--hh-total-header-height) + 0.6250rem);
  }

  .product__info-wrapper {
    padding: 1.8750rem 2.1875rem 0.6250rem;
  }

  .product__info-container > *:first-child {
    margin-top: 0;
  }

  .product__media-wrapper {
    max-width: 54% !important;
    width: calc(54% - 0.6250rem / 2) !important;
    padding-bottom: 0;
  }

  .product__info-wrapper {
    max-width: 46% !important;
    width: calc(46% - 0.6250rem / 2) !important;
  }
}

.product__description {
  color: var(--hh-color-subdued);
  font: var(--hh-body-small-font);
  padding-bottom: 0.2813rem;
}

.product__sticky-atc-button--bundle[disabled] {
  display: none;
}

.product__sticky-atc-button--bundle[disabled] {
  display: none;
}

/* Product form */
.product-form__buttons {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 2fr;
  gap: 0.6250rem;
  padding: 0 0.6250rem;
  margin-bottom: 0.5000rem;
}

.product-form__atc[disabled] {
  pointer-events: none;
}

.product-form__atc[disabled] {
  pointer-events: none;
}

.pdp-quantity-message {
  padding: 0 0.6250rem;
}

@media screen and (min-width: 750px) and (max-width: 1024px) {
  .product-form__buttons {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 750px) {
  .product-form__buttons {
    display: flex;
    padding: 0;
  }

  .pdp-quantity-message {
    padding: 0;
  }
}

#BIS_trigger[data-event-notify-me] {
  display: block;
}

#BIS_trigger {
  display: none;
  background: var(--hh-color-grey, #595959);
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--hh-font-family-body);
  border-color: var(--hh-color-grey, #595959);
  width: 100%;
}

@media screen and (max-width: 749px) {
  #BIS_trigger {
    margin-left: 0.6250rem !important;
    margin-right: 0.6250rem !important;
    max-width: calc(100vw - 1.2500rem);
  }
}

#BIS_trigger:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_2' viewBox='0 0 10.9 12.38' style='&%2310; /* background-color: red; */&%2310;'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2'%3E%3Cpath class='cls-1' d='m7.28,9.99c-.22,0-.39.18-.39.39,0,.67-.55,1.22-1.22,1.22s-1.22-.55-1.22-1.22c0-.22-.18-.39-.39-.39s-.39.18-.39.39c0,.71.38,1.37,1,1.73.62.36,1.38.36,2,0,.62-.36,1-1.02,1-1.73,0-.21-.17-.39-.38-.39Z'/%3E%3Cpath class='cls-1' d='m10.78,8.6l-1.1-1.05h0c-.14-.14-.22-.32-.22-.52v-1.84c0-.99-.37-1.94-1.02-2.67-.66-.73-1.56-1.2-2.54-1.31V.39c0-.22-.18-.39-.39-.39s-.39.18-.39.39v.81c-1,.09-1.93.54-2.61,1.28-.68.74-1.06,1.71-1.06,2.71v1.85c0,.2-.08.39-.22.52L.12,8.6h0c-.11.11-.15.28-.09.43.06.15.2.24.36.25h10.13,0c.16,0,.3-.1.36-.25.06-.15.02-.31-.09-.43Zm-9.42-.11l.4-.38h0c.3-.28.46-.67.46-1.08v-1.85c0-1.15.62-2.22,1.62-2.8,1-.58,2.23-.58,3.23,0,1,.58,1.62,1.64,1.62,2.8v1.85c0,.41.17.8.46,1.08l.4.38H1.36Z'/%3E%3C/g%3E%3C/svg%3E");
  border: none;
}

#BIS_trigger:hover:after {
  background-color: transparent;
}

.product-form__quantity-wrapper {
  flex-shrink: 0;
}

.product-form__quantity {
  max-width: 9.0625rem;
  width: 100%;
  font-size: 0.8750rem;
}

.product-form__quantity[disabled] {
  pointer-events: none;
  opacity: .5;
}

.product-form__quantity[disabled] {
  pointer-events: none;
  opacity: .5;
}

.product-form__quantity-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8750rem;
}

.product-form__buttons hh-button {
  width: 100%;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

/* Form Elements */

/* Product info */

.product__accordion .accordion__content {
  padding: 0 0.6250rem;
}

.product-info__mobile {
  padding: 0.6250rem 0.6250rem 0.5000rem;
  width: 100%;
}

/* Product Badges */
.product__media-badge {
  position: absolute;
  top: 0.6250rem;
  left: 0.6250rem;
  z-index: 1;
}

@media screen and (min-width: 750px) {
  .product__media-badge {
    top: 3.1250rem;
    left: 1.8750rem;
  }
}

.product__media-badge .badge {
  margin: 0 0.3125rem 0.3125rem 0;
  border: 1px solid transparent;
  display: inline-block;
  font: var(--hh-body-caption);
  padding: 0.2500rem 0.4688rem;
  text-align: center;
  background-color: var(--hh-color-background);
  color: var(--hh-color-foreground);
  word-break: break-word;
}

.product__zoom-cursor {
  display: none;
  position: fixed;
  top: -0.6250rem;
  left: 0;
  background-color: var(--hh-color-background);
  border: 0.0625rem solid var(--hh-color-light);
  color: var(--hh-color-foreground);
  font: var(--hh-body-small-font);
  letter-spacing: var(--hh-body-small-letter-spacing);
  line-height: 1.4;
  border-radius: 2.1875rem;
  padding: 0.5000rem 0.7500rem;
  z-index: 2;
}

/* Klarna block */
.shopify-app-block *::part(osm-container) {
  border: 0;
  padding: 0;
}

.shopify-app-block *::part(osm-message),
.shopify-app-block *::part(osm-logo) {
  font: var(--hh-body-x-small-font);
}

.shopify-app-block *::part(osm-cta) {
  font: var(--hh-body-x-small-font);
  transition: all var(--hh-duration-medium) ease-in-out;
}

.shopify-app-block *::part(osm-cta):hover {
  text-decoration-thickness: 0.1250rem;
}

body.template-product #chat-button {
  z-index: 2 !important;
}

.product-form__shopify_installments {
  font: var(--hh-body-caption);
  letter-spacing: var(--hh-body-letter-spacing);
  color: var(--hh-color-subdued-secondary);
  filter: grayscale(1);
  margin-top: 0.7500rem;
  padding: 0 0.6250rem;
}

@media screen and (min-width: 990px) {
  .product-form__shopify_installments {
    margin-top: 0.5000rem;
    padding: 0;
  }
}

/* Personalization confirmation close popup */
.personalize-close-confirm {
  padding: 1.5625rem 0.9375rem;
  max-width: 20.3125rem;
}

@media screen and (min-width: 750px) {
  .personalize-close-confirm {
    max-width: 23.4375rem;
  }
}

.personalize-close-confirm__header {
  margin-bottom: 0.9375rem;
}

.personalize-close-confirm__actions {
  gap: 0.6250rem;
}

.personalize-close-confirm hh-button[theme='primary'] {
  --hh-background: var(--hh-color-night);
}

/* Product recommendations */
.product .product-recommendations {
  --hh-button-width: 1.8750rem;
  --hh-button-height: 1.8750rem;
  --hh-buttons-bottom: calc(100% + 1.2500rem);

  display: block;
  padding: 0 0.6250rem;
}

.product .product-recommendations .product-card-alt {
  --hh-background: transparent;
  gap: 0.6250rem;
  height: 100%;
}

.product .product-recommendations .product-card-alt__text {
  gap: 0.3750rem;
  height: 100%;
  justify-content: space-between;
}

.product .product-recommendations .product-card-alt__text .cart-item__title,
.product .product-recommendations .product-card-alt__text .cart-item__variant {
  font-size: 0.8750rem;
  line-height: 1.3;
  letter-spacing: 0.0125rem;
}

.product .product-recommendations .product-card-alt hh-button {
  --hh-font: var(--hh-body-font);
  --hh-height: 1.3125rem;
}

.product .product-recommendations .product-card-alt .product-card-alt__action {
  margin-top: -0.2500rem;
}

.product .product-recommendations__heading {
  margin: 0;
  margin-bottom: 1.2500rem;
  padding: 0.3125rem;
  line-height: 1.3750rem;
  letter-spacing: 0.0125rem;
  font-size: 0.8750rem;
}

@media screen and (min-width: 750px) {
  .product .product-recommendations {
    padding: 0;
  }

  .product .product-recommendations .product-card-alt hh-button {
    --hh-font: var(--hh-body-small-font);
  }
}

.product .product-recommendations__card {
  min-width: max(140px, 40vw);
  scroll-snap-align: start;
}

@media screen and (min-width: 750px) {
  .product .product-recommendations__card {
    min-width: calc((100% - 40px) / 3);
  }
}

.product .product-recommendations .media {
  aspect-ratio: 380 / 480;
  padding-bottom: 0 !important;
}

.product .product-recommendations__slider {
  display: flex;
  flex-direction: column;
}

.product .product-recommendations__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2500rem;
}

@media screen and (min-width: 750px) {
  .product .product-recommendations__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Exclusive benefits */
.exclusive-benefits {
  padding: 0 0.6250rem;
}

.exclusive-benefits__heading {
  line-height: 1.3750rem;
  margin: 0.6250rem 0;
  font-size: 0.8750rem;
}

.exclusive-benefits__list {
  display: grid;
  gap: 0.5000rem;
}

@media screen and (min-width: 750px) and (max-width: 1023px) {
  .exclusive-benefits {
    padding: 0;
  }

  .exclusive-benefits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.0625rem;
  }
}

@media screen and (min-width: 1024px) {
  .exclusive-benefits__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.0625rem;
  }
}

.exclusive-benefits-item {
  padding: 0.9375rem 0.6250rem;
  background-color: var(--hh-color-light);
  border: solid 0.0625rem var(--hh-color-night-x-light-opacity);
  gap: 0.5000rem;
}

.exclusive-benefits-item__icon {
  width: 0.9375rem;
  height: auto;
}

.exclusive-benefits-item__heading {
  font: var(--hh-body-x-small-font);
  margin: 0;
  font-weight: 450;
}

.exclusive-benefit-drawer__icon {
  position: absolute;
  top: 0.2500rem;
  right: 0.6875rem;
}

.exclusive-benefit-drawer__trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.exclusive-benefit-drawer__close {
  font: var(--hh-body-small-font);
  background: var(--hh-color-brand-tertiary);
  width: 3.7500rem;
  height: 1.8750rem;
  border-radius: 1.8750rem;
  position: absolute;
  top: 1.2500rem;
  right: 1.1250rem;
  border: 0;
}

.exclusive-benefit-drawer__content {
  padding: 1.8750rem 1.1250rem 1.2500rem;
  gap: 1.2500rem;
}

@media screen and (min-width: 990px) {
  .exclusive-benefit-drawer__content {
    padding: 3.7500rem 4.5000rem 2.5000rem;
    gap: 0.9375rem;
  }
}
/* Rise ai gift button */

.gwbutton {
  padding-top: 0;
  padding-bottom: 0;
}

.bis__trigger {
  background: var(--hh-color-grey, #595959);
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--hh-font-family-body);
  border-color: var(--hh-color-grey, #595959);
  width: 100%;

  &:hover {
    &:after{
      background-color: transparent;
    } 
  }

  &:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_2' viewBox='0 0 10.9 12.38' style='&%2310; /* background-color: red; */&%2310;'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2'%3E%3Cpath class='cls-1' d='m7.28,9.99c-.22,0-.39.18-.39.39,0,.67-.55,1.22-1.22,1.22s-1.22-.55-1.22-1.22c0-.22-.18-.39-.39-.39s-.39.18-.39.39c0,.71.38,1.37,1,1.73.62.36,1.38.36,2,0,.62-.36,1-1.02,1-1.73,0-.21-.17-.39-.38-.39Z'/%3E%3Cpath class='cls-1' d='m10.78,8.6l-1.1-1.05h0c-.14-.14-.22-.32-.22-.52v-1.84c0-.99-.37-1.94-1.02-2.67-.66-.73-1.56-1.2-2.54-1.31V.39c0-.22-.18-.39-.39-.39s-.39.18-.39.39v.81c-1,.09-1.93.54-2.61,1.28-.68.74-1.06,1.71-1.06,2.71v1.85c0,.2-.08.39-.22.52L.12,8.6h0c-.11.11-.15.28-.09.43.06.15.2.24.36.25h10.13,0c.16,0,.3-.1.36-.25.06-.15.02-.31-.09-.43Zm-9.42-.11l.4-.38h0c.3-.28.46-.67.46-1.08v-1.85c0-1.15.62-2.22,1.62-2.8,1-.58,2.23-.58,3.23,0,1,.58,1.62,1.64,1.62,2.8v1.85c0,.41.17.8.46,1.08l.4.38H1.36Z'/%3E%3C/g%3E%3C/svg%3E");
    border: none;
  }
}

/* This styling is for the BIS widget. The styling actually happens here (https://app.backinstock.org/widget/edit/language?category=bis)
but I added it to the repo here for safekeeping */

/* @font-face {
  font-family: 'Suisse Works';
  src: url('//creed-global-dev.myshopify.com/cdn/shop/t/245/assets/SuisseWorks-Regular.woff2?v=31309207510227209521692301916')
      format('woff2'),
    url('//creed-global-dev.myshopify.com/cdn/shop/t/245/assets/SuisseWorks-Regular.woff?v=38871715859515129771692301916')
      format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Intl';
  src: url('//creed-global-dev.myshopify.com/cdn/shop/t/245/assets/SuisseIntl-Regular.woff2?v=103204768134235909111692301915')
      format('woff2'),
    url('//creed-global-dev.myshopify.com/cdn/shop/t/245/assets/SuisseIntl-Regular.woff?v=48246285841723261661692301915')
      format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#BISModal {
  max-width: none;
}
#container {
  border-radius: 0 !important;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 20px;
  padding: 0.6250rem !important;
  font-family: 'Suisse Intl' !important;
  position: relative;
}
@media screen and (min-width: 750px) {
  #container {
    padding: 2.5000rem !important;
  }
}
.input-lg {
  border-radius: 0 !important;
}
.btn {
  border-radius: 0 !important;
}
#submit-btn {
  font-weight: normal;
  text-align: left;
}
#submit-btn:after {
  content: '';
  display: inline-block;
  margin-left: 0.6250rem;
  font-size: 0.7500rem;
  height: 0.6250rem;
  width: 0.6250rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
  transition: background-color 0.2s;
  flex: 0 0 0.6250rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.8750rem;
}
#submit-btn:hover:after {
  background-color: white;
}
#bis-modal-title {
  display: none;
}
#bis-modal-desc {
  order: 1;
  font-size: 14px;
  color: #666;
}
hr {
  display: none;
}
.product-name {
  font-family: 'Suisse Works' !important;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  order: 0;
  margin-top: 0;
  margin-bottom: 10px;
}
.form-horizontal {
  order: 2;
  width: 100%;
  margin-bottom: 0;
}
.small-print {
  order: 3;
}
.action-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.checkbox {
  text-align: left;
} */
