/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Utilities: Functions
******************************************************/
/******************************************************
* Functions: Units
******************************************************/
/******************************************************
* Utilities: Mixins
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Accessibility
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Breakpoints
******************************************************/
/******************************************************
* Mixins: Typography
******************************************************/
/*----- Base Styles -----*/
/*----- Named Styles -----*/
/*----- RTE Heading Type Sizes -----*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Layout
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Decorations
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Dropdown
******************************************************/
/******************************************************
* Mixins: Accordion
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Aspect Ratio
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Queries
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Positioning
******************************************************/
/******************************************************
* Mixins: Buttons
******************************************************/
/*----- Resets and Base Styles -----*/
/*----- Button Versions -----*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Utilities: Mixins
******************************************************/
/******************************************************
* Mixins: Cards
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Containers
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Display
******************************************************/
/*----- SR-Only/Invisible -----*/
/*----- No-Flicker -----*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Drawers
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Grid
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: HTML Elements
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Links
******************************************************/
/*----- Named Link Styles -----*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Media
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Scrollbars
******************************************************/
/******************************************************
* Mixins: Modals
******************************************************/
/******************************************************
* Utilities: Main
******************************************************/
/*
	This file contains all existing variables,
	breakpoints, functions, mixins, and extends
	that can be used in the site SCSS. It should
	be used at the top of every new SCSS file, using
	the following format: 

	@use '../utilities/main' as *; 
*/
/******************************************************
* Mixins: Toggles
******************************************************/
/******************************************************
* Utilities: Mixins
******************************************************/
/******************************************************
* Component: Product Gallery
******************************************************/

/******************************************************
* Components: Product Promotion
******************************************************/
.product-promotion {
  --offset-width: calc(var(--spacing-4) * 2);
  background-color: #ffffff;
}
.product-promotion__container {
  display: grid;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
}
.product-promotion__header {
  display: flex;
}
.product-promotion__header-text {
  display: grid;
  flex: 1 0 65%;
  gap: var(--spacing-4);
}
.product-promotion__title {
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 22px */
  letter-spacing: -0.44px;
  z-index: 1;
}
.product-promotion__badge {
  display: inline-block;
  padding-block-end: var(--spacing-2);
}
.product-promotion__description--desktop, .product-promotion__button--desktop {
  display: none;
}
.product-promotion__button {
  padding-block-start: var(--spacing-4);
}
.product-promotion__description {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
}
.product-promotion__description--mobile, .product-promotion__button--mobile {
  display: block;
}
.product-promotion__cta-container {
  flex: 1 1 auto;
  max-width: unset;
  position: relative;
  width: 200px;
}
.product-promotion__cta-container img {
  filter: drop-shadow(2px 0 white) drop-shadow(-2px 0 white) drop-shadow(0 2px white) drop-shadow(0 -2px white) drop-shadow(2px 2px white) drop-shadow(-2px -2px white) drop-shadow(2px -2px white) drop-shadow(-2px 2px white);
  left: 0;
  max-width: unset;
  position: absolute;
  right: 100%;
  transform: rotate(15deg);
  width: calc(100% + var(--offset-width));
}
.product-promotion__image {
  position: relative;
  top: calc(var(--spacing-6) * -1);
}

/******************************************************
* Components: Trust Tooltips
******************************************************/
.trust-tooltips {
  --icon-max-width: 1.25rem;
  --icon-max-height: 1.25rem;
  display: flex;
  gap: 0.625rem;
  padding-bottom: var(--spacing-5);
}
.trust-tooltips .icon-block {
  padding: 0;
  background: var(--background);
  aspect-ratio: 1/1;
}
.trust-tooltips__item {
  align-items: center;
  display: flex;
  flex: 1 1 33.33%;
  flex-direction: column;
  gap: 0.5rem;
}
.trust-tooltips__title {
  font-size: var(--text-base, 14px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 120%; /* 16.8px */
  text-align: center;
}
.trust-tooltips__icon {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
}

/******************************************************
* Components: Bundle Quantity Selector
******************************************************/
.bundle-quantity-selector__title {
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: var(--spacing-2);
  display: flex;
  font-size: var(--text-base, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
}
.bundle-quantity-selector__options {
  align-items: stretch;
  display: flex;
  gap: 1rem;
}
.bundle-quantity-selector input[type=radio] {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.bundle-quantity-selector input[type=radio]:focus-visible + .bundle-quantity-selector__option {
  outline: 0.125rem solid highlight;
  outline: 0.125rem solid -webkit-focus-ring-color;
  outline-offset: 0.25rem;
}
.bundle-quantity-selector__option {
  border: 0.0625rem solid rgb(var(--text-color));
  border-radius: var(--rounded-md);
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  max-width: calc(50% - 0.3125rem);
  padding: 1rem;
  position: relative;
}
input[type=radio]:checked + .bundle-quantity-selector__option {
  border-width: 0.1875rem;
}
.bundle-quantity-selector__item-discount-badge {
  background: rgb(var(--brand-colors-brand-secondary, #ffbf3f));
  border-radius: 3.75rem;
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: var(--text-sm, 14px);
  font-style: normal;
  font-weight: 400;
  left: 0;
  line-height: 120%; /* 16.8px */
  margin-inline: auto;
  padding: 0.125rem 0.75rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: -0.75rem;
  width: fit-content;
  z-index: 1;
}
.bundle-quantity-selector__item-image {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 56%;
  position: relative;
}
.bundle-quantity-selector__item-image img {
  height: 100%;
  left: 0;
  object-fit: contain;
  object-position: center;
  position: absolute;
  width: 100%;
}
.bundle-quantity-selector__image {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.bundle-quantity-selector__item-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.bundle-quantity-selector__item-header {
  display: flex;
  flex-direction: column;
}
.bundle-quantity-selector__item-title {
  font-size: var(--text-base, 16px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.32px;
  line-height: 100%; /* 16px */
  text-transform: uppercase;
}
.bundle-quantity-selector__item-info {
  color: rgb(var(--text-color-light));
  font-size: var(--text-xs, 11px);
}
.bundle-quantity-selector__item-pricing {
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: var(--text-xs, 11px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 13.2px */
}

/******************************************************
* Components: Product Anchor Link
******************************************************/
.product-anchor-link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-anchor-link__container {
  align-items: center;
  border-radius: var(--rounded-md);
  display: flex;
  flex-direction: column;
  justify-self: center;
  overflow: hidden;
  position: relative;
}
.product-anchor-link__container:before {
  background: rgb(var(--content-over-media-overlay));
  border-radius: inherit;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.product-anchor-link__heading {
  font-family: var(--fonts-heading-font-family, "Edu Favorit");
  font-size: var(--text-h3, 24px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.48px;
  line-height: 100%; /* 24px */
}
.product-anchor-link__link {
  align-items: center;
  display: flex;
  font-family: var(--fonts-text-font-family, "Edu Favorit");
  font-size: var(--text-lg, 18px);
  font-style: normal;
  font-weight: 400;
  gap: 1rem;
  justify-content: center;
  line-height: 120%; /* 21.6px */
}
.product-anchor-link__link-icon {
  height: 2.5rem;
  width: 2.5rem;
}
.product-anchor-link__image img {
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
}
.product-anchor-link__content {
  color: rgb(var(--text-color));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  min-height: 13rem;
  padding-block: 3rem;
  text-align: center;
  z-index: 1;
}

/******************************************************
* Sections: Product
******************************************************/
.product-info__separator {
  border-color: rgb(var(--brand-colors-brand-accent, #88b1e8));
  border-top-width: 3px;
}
.product-info__block-item .accordion {
  border-block-start-width: 2px;
  border-color: #ff7f32;
  border-block-end-width: 2px;
}
.product-info__block-item .accordion .circle-chevron {
  background: rgb(var(--brand-colors-brand-primary, #01483a));
}
.product-info__block-item .accordion .circle-chevron svg {
  color: #ffffff;
}
.product-info__description .prose p {
  margin-block-start: 0.5rem;
}
.product-info__footer-text {
  font-size: var(--text-base, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: 0.32px;
  text-align: center;
  margin-block-start: 0.75rem;
}
.product-info__price {
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: var(--text-h6, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
}
.product-info__price .price-list {
  gap: 0.5rem;
}
.product-info__price .rating-with-text {
  gap: var(--spacing-1);
  align-items: center;
}
.product .variant-picker__option-info {
  justify-content: flex-start;
  gap: 8px;
}
.product .block-swatch {
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */
  letter-spacing: 0.32px;
  text-transform: uppercase;
}
.product .block-swatch:before {
  box-shadow: 0 0 0 1px rgb(var(--text-color));
  opacity: 1;
  transform: scale(1);
}
.product :checked + .block-swatch:before,
.product .block-swatch.is-selected:before {
  box-shadow: 0 0 0 3px rgb(var(--text-color));
}
.product .price-list {
  font-size: var(--text-h6, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.product__badge-list {
  font-size: var(--text-xs, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 14.4px */
  text-transform: uppercase;
}
.product-info__usp {
  --mobile-icon-max-width: 28px;
  --icon-max-width: 42px;
  display: grid;
  gap: 12px;
  padding: 8px 0px 24px 0px;
}
.product-info__usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.product-info__usp-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  background-color: var(--icon-background);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 700px) {
  .product-promotion {
    --offset-width: calc(var(--spacing-6) * 2);
  }
  .product-promotion__container {
    padding: var(--spacing-6);
  }
  .product-promotion__header-text {
    gap: var(--spacing-2);
    padding-inline-end: var(--spacing-6);
  }
  .product-promotion__header-text, .product-promotion__description {
    flex: 1 1 90%;
  }
  .product-promotion__cta-container, .product-promotion__button,
  .product-promotion .button {
    width: calc(12.5rem - var(--offset-width));
  }
  .product-promotion__description--desktop, .product-promotion__button--desktop {
    display: block;
  }
  .product-promotion__description--mobile, .product-promotion__button--mobile {
    display: none;
  }
  .product-promotion__content-mobile {
    display: none;
  }
  .product-promotion__cta-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
    max-width: unset;
  }
  .product-promotion__cta-container img {
    max-width: unset;
    position: absolute;
    transform: rotate(0deg);
    width: calc(100% + var(--spacing-12));
  }
  .product-promotion__image {
    padding-block-end: calc(var(--promo-image-padding) - var(--spacing-12) + var(--spacing-6));
    position: relative;
    top: calc(var(--offset-width) * -1);
  }
  .bundle-quantity-selector__option {
    max-width: 10.125rem;
  }
  .product-anchor-link__heading {
    letter-spacing: -0.72px;
  }
  .product-anchor-link__content {
    min-height: 12.5rem;
  }
  .product-info__usp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px 0px 24px 0px;
  }
  .product-info__usp-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .product-info__usp-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
  }
}
@media screen and (min-width: 1000px) {
  .product-gallery {
    position: sticky;
    top: var(--header-height);
  }
  .product-promotion__header-text {
    flex: 1 1 65%;
  }
  .product-promotion__cta-container, .product-promotion__button,
  .product-promotion .button {
    width: calc(14.6875rem - var(--offset-width));
  }
  .product-promotion__cta-container img {
    filter: drop-shadow(3px 0 white) drop-shadow(-3px 0 white) drop-shadow(0 3px white) drop-shadow(0 -3px white) drop-shadow(3px 3px white) drop-shadow(-3px -3px white) drop-shadow(3px -3px white) drop-shadow(-3px 3px white);
  }
  .trust-tooltips {
    gap: 0.5rem;
  }
}