/******************************************************
* 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
******************************************************/
/******************************************************
* Sections: Comparison table
******************************************************/
.comparison-table {
  gap: 32px;
}
.comparison-table__feature-chart {
  padding: 0 var(--container-gutter);
  scroll-padding-top: var(--sticky-area-height);
  display: block;
  min-width: min-content;
}
.comparison-table .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-block-start-width: 0.125rem;
  border-color: rgb(var(--border-color));
}
.comparison-table__table-row {
  --comparison-table-heading-width: 140px;
  grid-template-columns: var(--comparison-table-heading-width) repeat(var(--comparison-table-values-columns-count), minmax(140px, 1fr));
  min-width: min-content;
  display: grid;
}
.comparison-table__table-row--last .comparison-table__value--current {
  border-end-end-radius: var(--rounded-md);
  border-end-start-radius: var(--rounded-md);
}
.comparison-table__toggle {
  text-align: center;
  border-top-width: 1px;
  justify-content: center;
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
  display: grid;
}
.comparison-table.is-expanded .comparison-table__toggle .circle-chevron {
  transform: rotate(180deg);
}
.comparison-table__product {
  --comparison-table-product-image-width: 124px;
  --comparison-table-product-aspect-ratio: 1.066 / 1;
  gap: 0.75rem;
  place-content: start;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 0.5rem;
}
.comparison-table__product .price-list {
  justify-content: center;
}
.comparison-table__product--logo {
  align-items: center;
  display: flex;
  justify-content: center;
}
.comparison-table__product-image {
  aspect-ratio: var(--comparison-table-product-aspect-ratio);
}
.comparison-table__product-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.comparison-table__product--current {
  border-start-end-radius: var(--rounded-md);
  border-start-start-radius: var(--rounded-md);
}
.comparison-table__product--non-current .comparison-table__product-image {
  border-radius: var(--rounded-md);
}
.comparison-table__product-content, .comparison-table__product-info {
  display: grid;
  gap: 0.75rem;
}
.comparison-table__product-info {
  justify-content: center;
  text-align: center;
}
.comparison-table__product-title {
  font-family: var(--fonts-text-font-family, "Edu Favorit");
  font-size: var(--text-h6, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
}
.comparison-table__product-current-text {
  font-family: var(--fonts-text-font-family, "Edu Favorit");
  font-size: var(--text-sm, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 14.4px */
  padding-block: 1rem;
}
.comparison-table__product :is(img, svg) {
  width: var(--comparison-table-product-image-width);
  object-fit: contain;
}
.comparison-table__product .color-swatch {
  margin: 0;
}
.comparison-table__product .badge {
  position: absolute;
  top: 0;
}
.comparison-table__product .badge:not(:lang(ae),
:lang(ar),
:lang(arc),
:lang(bcc),
:lang(bqi),
:lang(ckb),
:lang(dv),
:lang(fa),
:lang(glk),
:lang(he),
:lang(ku),
:lang(mzn),
:lang(nqo),
:lang(pnb),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ur),
:lang(yi)) {
  left: 0;
}
.comparison-table__product .badge:is(:lang(ae),
:lang(ar),
:lang(arc),
:lang(bcc),
:lang(bqi),
:lang(ckb),
:lang(dv),
:lang(fa),
:lang(glk),
:lang(he),
:lang(ku),
:lang(mzn),
:lang(nqo),
:lang(pnb),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ur),
:lang(yi)) {
  right: 0;
}
.comparison-table__product-placeholder {
  height: auto;
}
.comparison-table__table-row--sticky {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  background: rgb(var(--background));
  padding-block: var(--spacing-5);
  border-bottom-width: 1px;
  transition: opacity 0.2s, visibility 0.2s, top 0.2s;
  position: fixed;
  top: calc(var(--header-is-visible, 1) * var(--sticky-area-height));
  border-top-width: 0 !important;
}
.comparison-table__table-row--sticky.is-visible {
  opacity: 1;
  visibility: visible;
}
.comparison-table__table-row--sticky .comparison-table__product img {
  max-width: 48px;
}
.comparison-table__table-row--sticky .comparison-table__view-button-container {
  display: none;
}
.comparison-table__view-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
.comparison-table__view-button-container .button {
  padding: 16px 40px;
}
.comparison-table__value-content {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 12px;
  padding: 20px 8px;
  text-align: center;
  font-family: var(--fonts-text-font-family, "Edu Favorit");
  font-size: var(--text-base, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
}
.comparison-table__value-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgb(var(--brand-colors-brand-secondary));
  display: flex;
  justify-content: center;
  align-items: center;
}
.comparison-table__value-icon-wrapper {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.comparison-table__value-icon-wrapper svg {
  width: var(--icon-height);
  height: var(--icon-height);
}
.comparison-table__value-icon-wrapper--false {
  background-color: transparent;
  border: 2px solid rgb(var(--text-color));
}
.comparison-table__value-icon-wrapper--true {
  background-color: rgb(var(--text-color));
}
.comparison-table__value--cta {
  text-align: center;
}
.comparison-table__value--cta a {
  text-decoration: underline;
}
.comparison-table__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--fonts-text-font-family, "Edu Favorit");
  font-size: var(--text-h6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 24px */
}
.comparison-table__value--cta.comparison-table__value--current {
  border-end-end-radius: var(--rounded-md);
  border-end-start-radius: var(--rounded-md);
}
@media screen and (min-width: 700px) {
  .comparison-table {
    gap: 3rem;
  }
  .comparison-table__table-container {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-colors-brand-primary)) transparent;
  }
  .comparison-table__table-container::-webkit-scrollbar {
    width: 0.25rem;
  }
  .comparison-table__table-container::-webkit-scrollbar-track {
    background: transparent;
  }
  .comparison-table__table-container::-webkit-scrollbar-thumb {
    background-color: rgba(var(--brand-colors-brand-primary));
    border-radius: 0.125rem;
  }
  .comparison-table__table-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--brand-colors-brand-primary));
  }
  .comparison-table__feature-chart {
    border-radius: var(--rounded-sm);
    padding: var(--spacing-4) var(--spacing-12);
  }
  .comparison-table__feature-chart--no-products {
    padding: 2rem;
  }
  .comparison-table__table-row--product > :first-child, .comparison-table__table-row--cta > :first-child {
    grid-column-start: 2;
  }
  .comparison-table__product-image {
    padding: 1.5rem;
  }
  .comparison-table__value-content {
    padding: 20px 16px;
  }
  .comparison-table__heading {
    padding: 20px 16px 20px 0px;
  }
}
@media screen and (min-width: 1000px) {
  .comparison-table {
    gap: 4.5rem;
  }
  .comparison-table__table-row {
    --comparison-table-heading-width: 198px;
  }
  .comparison-table__table-row--sticky {
    padding-block: var(--spacing-6);
  }
  .comparison-table__toggle {
    padding-block-start: var(--spacing-5);
    padding-block-end: var(--spacing-6);
  }
  .comparison-table__product {
    --comparison-table-product-image-width: 150px;
    --comparison-table-product-aspect-ratio: 1.384 / 1;
    padding: 1.25rem 1rem;
  }
  .comparison-table__table-row--sticky .comparison-table__product {
    grid-auto-flow: column;
    justify-content: start;
  }
  .comparison-table__table-row--sticky .comparison-table__product img {
    max-width: 5rem;
  }
}
@media screen and (min-width: 1150px) {
  .comparison-table__feature-chart--no-products {
    padding: 3rem;
  }
}
@media screen and (max-width: 699px) {
  .comparison-table {
    padding-block-start: 48px;
  }
  .comparison-table__table, .comparison-table__feature-chart {
    margin-inline-start: calc(-1 * var(--container-gutter));
    margin-inline-end: calc(-1 * var(--container-gutter));
    padding-inline-start: var(--container-gutter);
    padding-inline-end: var(--container-gutter);
    display: grid;
  }
  .comparison-table__table-row {
    grid-template-columns: repeat(var(--comparison-table-values-columns-count), minmax(140px, 1fr));
  }
  .comparison-table__table--multi-columns .comparison-table__table-row {
    grid-template-columns: repeat(var(--comparison-table-values-columns-count), 150px);
  }
  .comparison-table__heading {
    position: absolute;
    max-width: 150px;
    padding-block-start: 16px;
    margin-inline-start: var(--container-gutter);
  }
  .comparison-table__heading--mobile-underline {
    text-decoration: underline;
  }
  .comparison-table__heading:not(:lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)) {
    left: 0;
  }
  .comparison-table__heading:is(:lang(ae),
  :lang(ar),
  :lang(arc),
  :lang(bcc),
  :lang(bqi),
  :lang(ckb),
  :lang(dv),
  :lang(fa),
  :lang(glk),
  :lang(he),
  :lang(ku),
  :lang(mzn),
  :lang(nqo),
  :lang(pnb),
  :lang(ps),
  :lang(sd),
  :lang(ug),
  :lang(ur),
  :lang(yi)) {
    right: 0;
  }
  .comparison-table__value {
    grid-row: 2;
  }
  .comparison-table__heading, .comparison-table__value {
    padding-inline: 8px;
  }
  .comparison-table__product-title p {
    text-align: left;
  }
}