/* src/assets/css/components/request.css */
.request {
  padding: var(--spacing--container);
  color: var(--color--bg-light);
  overflow: hidden;
}

.request__inner {
  padding: var(--spacing--container) var(--spacing--container) 2.1375rem;
  grid-column-gap: 3.6rem;
  border-radius: var(--radius--lg);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
  background-image: url("/assets/images/request-background.avif");
  background-position: 50%;
  background-size: cover;
  justify-content: flex-start;
  align-items: stretch;
}

@media screen and (max-width: 991px) {
  .request__inner {
    grid-column-gap: var(--spacing--container);
  }
}

@media screen and (max-width: 767px) {
  .request__inner {
    grid-row-gap: 1.8rem;
    grid-template-columns: 1fr;
    align-items:  center;
    padding-top: 2.7rem;
  }
}

@media screen and (max-width: 479px) {
  .request__inner {
    padding-top: 4.05rem;
  }
}

.request__text {
  grid-row-gap: var(--spacing--gap-alt);
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: -.73125rem;
}

@media screen and (max-width: 767px) {
  .request__text {
    text-wrap: balance;
    margin-top: 0;
  }
}

.request-form-wrap {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 19.107rem;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .request-form-wrap {
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .request-form-wrap {
    height: auto;
  }
}

.request .error-message {
  left: var(--spacing--container);
  position: absolute;
  width: 28.8rem;
  bottom: 1.8rem;
}

@media screen and (max-width: 991px) {
  .error-message.is-request {
    width: 26.55rem;
    height: auto;
    bottom: 3.15rem;
  }

  .request .error-message {
    width: 26.55rem;
    padding: .3375rem .675rem .45rem;
  }
}

@media screen and (max-width: 767px) {
  .request .error-message {
    width: calc(100% - var(--spacing--container) * 2);
    padding: .84375rem .675rem .7875rem;
    top: 8.6625rem;
    bottom: auto;
  }
}

@media screen and (max-width: 479px) {
  .error-message.is-request {
    padding: 0 var(--spacing--gap);
    white-space: break-spaces;
    text-wrap: balance;
    top: 9.675rem;
  }
}

/* src/assets/css/pages/product.css */
@media screen and (max-width: 479px) {
  .product {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
    margin: 7px;
  }
}

.product.full {
  padding-bottom: var(--spacing--container);
}

.product.full .product__img {
  aspect-ratio: 5 / 6;
}

.product__inner {
  grid-column-gap: var(--spacing--container);
  grid-template-rows: 100%;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  align-items:  start;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .product__inner {
    overscroll-behavior-y: auto;
    grid-template-columns: 1fr;
    display: flex;
    flex-flow: column;
  }
}

.product__inner:has([data-toggle^="variant1"]:not(:checked)) [data-option="1"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.product__inner:has([data-toggle^="variant2"]:not(:checked)) [data-option="2"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.product__inner:has([data-toggle^="variant1"]:not(:checked)) [data-option="1"]:not(.tag) {
  inset: 0;
}

.product__inner:has([data-toggle^="variant2"]:not(:checked)) [data-option="2"]:not(.tag) {
  inset: 0;
}

.product__media {
  align-items:  flex-start;
  row-gap: var(--spacing--gap);
  display: flex;
  flex-flow: column;
}

@media screen and (max-width: 767px) {
  .product__media {
    width: 100%;
  }
}

.product__img-wrap, .product__img {
  width: 100%;
}

.product__img {
  border-radius: var(--radius--md);
  object-fit: cover;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .product__img {
    position: static;
    flex: none;
  }
}

.product__content {
  padding: var(--spacing--lg-alt) 3.6rem 0 0;
  grid-row-gap: var(--spacing--gap);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items:  flex-start;
}

@media screen and (max-width: 767px) {
  .product__content {
    padding: 2.25rem 0 0;
  }
}

.product__title {
  text-wrap: balance;
  position: relative;
  width: 100%;
}

.product__options {
  grid-column-gap: .39375rem;
  border-radius: var(--radius--pill);
  display: flex;
}

.product__stripe {
  grid-row-gap: 1.8rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items:  flex-start;
  width: 100%;
}

.product__price {
  display: inline-flex;
  position: relative;
  flex-flow: column;
  height: 100%;
}

.product__price .price {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  width: auto;
}

.product__price .price[data-has-compare] {
  gap: .45rem;
}

.product__price .price[data-has-compare] .price__value {
  display: inline-flex;
  align-items: baseline;
  gap: .1125rem;
}

.product__price .price[data-has-compare] .price__value--compare {
  font-weight: 400;
}

.product__qty-add-wrapper {
  grid-column-gap: var(--spacing--gap);
  grid-row-gap: var(--spacing--gap);
  display: flex;
  width: 100%;
}

.product__quantity {
  background-color: var(--color--tp-light);
  border-radius: var(--radius--btn);
  height: var(--height--btn);
  display: flex;
  align-items:  center;
}

.product__content .toggle-item {
  position: relative;
}

.toggle-item > [data-option] {
  grid-area: 1 / 1;
}

.product__inner:has([data-toggle]) .toggle-item > [data-option] {
  position: static;
  inset: auto;
}

.product__description {
  display: flex;
  position: relative;
  flex-flow: column;
  width: 100%;
}

.product__section-heading {
  font-size: 1.04062rem;
  font-weight: 500;
  line-height: 1.34;
}

.product__section-label {
  color: var(--color--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  font-size: 11px;
  font-weight: 400;
}

.product__section-label + .product__notes {
  margin-top: .5rem;
}

.product__notes {
  margin: 0 0 var(--spacing--gap-alt);
  width: 100%;
}

.product__note {
  column-gap: var(--spacing--gap);
  border-bottom: 1px solid var(--color--tp-light);
  display: flex;
  align-items: baseline;
  padding: .9rem 0;
}

.product__note-label {
  color: var(--color--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: none;
  width: 10.5rem;
  margin: 0;
  font-size: 11px;
}

@media screen and (max-width: 479px) {
  .product__note-label {
    width: 100%;
  }
}

.product__note-value {
  font-family: var(--font-display);
  flex: 1;
  margin: 0;
  font-size: 1.06875rem;
  line-height: 1.35;
}

.product__note-value .toggle-item {
  display: inline-grid;
  vertical-align: top;
}

@media screen and (max-width: 479px) {
  .product__note {
    flex-flow: column;
    row-gap: .3rem;
  }
}

.product__ingredients {
  margin: .55rem 0 var(--spacing--gap-alt);
  padding-bottom: var(--spacing--gap-alt);
  border-bottom: 1px solid var(--color--tp-light);
  font-family: var(--font-display);
  font-size: 1.06875rem;
  line-height: 1.55;
}

.product__ingredients .toggle-item {
  display: inline-grid;
  vertical-align: top;
}

.product__stamp {
  justify-content: space-between;
  align-items:  flex-end;
  column-gap: var(--spacing--gap);
  display: flex;
  width: 100%;
  margin-top: .35rem;
}

.product__caffeine {
  color: var(--color--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items:  center;
  column-gap: .55rem;
  margin: 0;
  font-size: 11px;
}

.product__caffeine-dots {
  display: flex;
  column-gap: .3rem;
}

.product__caffeine-dot {
  border: 1px solid var(--color--muted);
  border-radius: 50%;
  width: .5rem;
  height: .5rem;
}

.product__caffeine-dot.is-filled {
  background-color: var(--color--muted);
}

.product__mark {
  flex: none;
  width: 5rem;
  height: auto;
}

.product__directions {
  grid-row-gap: 1.125rem;
  display: flex;
  position: relative;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-top: .9rem;
}

.product__directions h2 .toggle-item {
  white-space: nowrap;
  display: inline-grid;
  vertical-align: top;
}

.product__directions > .toggle-item {
  display: grid;
}

/* src/assets/css/bundles/product.bundle.css */