/******************************************************
* 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
******************************************************/
/******************************************************
* Components: Bundle Builder
******************************************************/
.bundle-builder__container {
  display: grid;
  gap: 0.75rem;
}
.bundle-builder__slots {
  display: grid;
  gap: 0.5rem;
}
.bundle-builder__progress {
  padding-block-end: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  position: relative;
}
.bundle-builder__progress:before {
  border-radius: 8px;
  content: "";
  display: block;
  width: calc(100% - 5px);
  height: 8px;
  background-color: var(--color-border);
  position: absolute;
  border-radius: --radius-pill;
  border: 1px solid rgb(var(--brand-colors-brand-primary, #01483a));
  left: 2px;
  z-index: 1;
}
.bundle-builder__progress:after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  position: absolute;
  background-color: rgb(var(--brand-colors-brand-tertiary, 255, 127, 50));
  width: var(--progress-step, 0%);
  z-index: 0;
}
.bundle-builder__progress .bundle-builder__progress-text--short {
  display: none;
}
.bundle-builder__progress .bundle-builder__progress-text--long {
  display: block;
}
.bundle-builder__progress--lg .bundle-builder__progress-text--short {
  display: block;
}
.bundle-builder__progress--lg .bundle-builder__progress-text--long {
  display: none;
}
.bundle-builder__progress-step {
  position: relative;
}
.bundle-builder__progress-step:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(var(--brand-colors-brand-primary, #01483a));
  background-color: rgb(var(--background));
  border-radius: 50%;
  z-index: 1;
  position: relative;
}
.bundle-builder__progress-step:not(:first-of-type):not(:last-of-type) .bundle-builder__progress-text {
  position: absolute;
  transform: translateX(calc(-50% + 8px));
}
.bundle-builder__progress-step--complete:before {
  background-color: rgb(var(--brand-colors-brand-tertiary, 255, 127, 50));
}
.bundle-builder__progress-step--final .bundle-builder__progress-text {
  right: 0;
}
.bundle-builder__progress-text {
  position: absolute;
  width: max-content;
  text-align: center;
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: var(--text-sm, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 14.4px */
  padding-block-start: 8px;
}
.bundle-builder__pack-options {
  display: grid;
  padding-block-end: 0.5rem;
}
.bundle-builder-slot {
  --accordion-spacing: var(--spacing-5);
  box-sizing: content-box;
  border: 1px dashed rgb(var(--brand-colors-brand-primary, #01483a));
  border-radius: 3rem;
  background: rgb(var(--brand-colors-brand-neutral, #ddcdbf));
  transition: background 0.2s ease-in-out;
}
.bundle-builder-slot .circle-plus {
  width: 3rem;
  height: 3rem;
}
.bundle-builder-slot.is-active {
  background: transparent;
}
.bundle-builder-slot.is-active, .bundle-builder-slot[open] {
  border: 1px solid rgb(var(--brand-colors-brand-primary, #01483a));
}
.bundle-builder-slot[open] {
  border-radius: 2rem;
  background: #ffffff;
}
.bundle-builder-slot[open] .text-with-icon svg {
  fill: rgb(var(--text-color));
}
.bundle-builder-slot__toggle {
  gap: var(--spacing-2);
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  display: flex;
  min-height: 72px;
  height: 72px;
}
.bundle-builder-slot__toggle .bundle-builder-options__image {
  width: 4rem;
}
.bundle-builder-slot__toggle-text {
  display: grid;
  gap: 0.25rem;
}
.bundle-builder-slot__toggle-title {
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: var(--text-base, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: 0.42px;
  text-transform: uppercase;
}
.bundle-builder-slot__toggle-subtitle {
  display: block;
  font-size: var(--text-h6, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 17.6px */
  letter-spacing: -0.32px;
}
.bundle-builder-slot__toggle-product-title {
  font-family: var(--fonts-heading-font-family, "Edu Favorit");
  font-size: var(--text-h6, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 17.6px */
  letter-spacing: -0.32px;
}
.bundle-builder-slot__toggle-variant-title {
  font-family: var(--fonts-text-font-numbers, "Space Grotesk");
  font-size: var(--text-xs, 11px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 11px */
  letter-spacing: 0.33px;
  text-transform: uppercase;
}
.bundle-builder-slot__cta-text {
  display: none;
}
.bundle-builder-slot__content {
  padding: 0 0.75rem 0.75rem;
}
.bundle-builder-slot__cta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bundle-builder-slot__toggle-icon-edit {
  display: flex;
}
.bundle-builder__add-to-cart-button, .bundle-builder__add-to-bundle-button {
  display: flex;
  min-height: 60px;
  padding: 16px 60px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
}
.bundle-builder__add-to-cart-button div,
.bundle-builder__add-to-cart-button span, .bundle-builder__add-to-bundle-button div,
.bundle-builder__add-to-bundle-button span {
  pointer-events: none;
}

.bundle-builder-options .block-swatch {
  background: transparent;
  font-size: var(--text-base, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */
  letter-spacing: 0.32px;
  text-transform: uppercase;
}
.bundle-builder-options .block-swatch.is-disabled {
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 50%, currentColor 50% calc(50% + 2px), rgba(0, 0, 0, 0) calc(50% + 2px));
  color: rgb(var(--text-color)/0.5);
}
.bundle-builder-options .block-swatch.is-disabled:before {
  box-shadow: 0 0 0 1px rgb(var(--text-color)/0.5);
}
.bundle-builder-options__fieldset-legend-container {
  display: flex;
  gap: 0.5rem;
  font-size: var(--text-base, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
  margin-block-end: 0.5rem;
}
.bundle-builder-options__legend {
  display: flex;
  align-items: center;
  text-wrap: nowrap;
  white-space: nowrap;
}
.bundle-builder-options__helper-text a {
  text-decoration: underline;
}
.bundle-builder-options__size-chart-text {
  text-decoration: underline;
}
.bundle-builder-options__separator.shape-line {
  background: rgb(var(--brand-colors-brand-accent, #88b1e8));
  width: 1px;
  height: unset;
}
.bundle-builder-options__title {
  font-size: var(--text-h5, 24px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.48px;
  line-height: 100%; /* 24px */
  margin-bottom: 0.75rem;
}
.bundle-builder-options--slot, .bundle-builder-options__variant-picker {
  display: grid;
  gap: 1rem;
}
.bundle-builder-options__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 0.5rem;
}
.bundle-builder-options__options--slot {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}
.bundle-builder-options input[type=radio] {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.bundle-builder-options input[type=radio]:focus-visible + .bundle-builder-options__option {
  outline: 0.125rem solid highlight;
  outline: 0.125rem solid -webkit-focus-ring-color;
  outline-offset: 0.25rem;
}
.bundle-builder-options__option {
  border: 0.0625rem solid rgb(var(--text-color));
  border-radius: var(--rounded-md);
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
}
input[type=radio]:checked + .bundle-builder-options__option {
  border-width: 0.1875rem;
}
.bundle-builder-options__option--slot {
  padding: 0;
}
.bundle-builder-options__option--pack {
  min-height: 44px;
  padding: 32px 16px 20px 16px;
}
.bundle-builder-options__option--pack .bundle-builder-options__item-content {
  gap: 1rem;
}
.bundle-builder-options__unit-price-label {
  display: block;
  padding-block-start: 0.25rem;
}
.bundle-builder-options__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-builder-options__item-image {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 56%;
  position: relative;
}
.bundle-builder-options__item-image img {
  height: 100%;
  left: 0;
  object-fit: contain;
  object-position: center;
  position: absolute;
  width: 100%;
}
.bundle-builder-options__image {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.bundle-builder-options__item-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.bundle-builder-options__item-header {
  display: flex;
  flex-direction: column;
}
.bundle-builder-options__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-builder-options__item-title--slot {
  font-size: var(--text-base, 14px);
  line-height: 120%; /* 16.8px */
  padding: 4px 4px 8px 4px;
  text-transform: capitalize;
}
.bundle-builder-options__item-info {
  color: rgb(var(--text-color-light));
  font-size: var(--text-xs, 11px);
}
.bundle-builder-options__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 */
}

/******************************************************
* Sections: Bundle Product
******************************************************/

@media screen and (min-width: 700px) {
  .bundle-builder-slot__toggle-subtitle {
    display: none;
  }
  .bundle-builder-slot__cta-text {
    display: block;
    font-size: var(--text-h6, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 17.6px */
    letter-spacing: -0.32px;
  }
  .bundle-builder-options__item-title--slot {
    padding: 8px 8px 12px 8px;
  }
}