*,
::after,
::before {
   -webkit-box-sizing: border-box !important;
   box-sizing: border-box !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 700 !important;
}

#wrapper {
   padding-top: 0;
}

.desktop {
   display: none !important;
}
@media screen and (min-width: 1024px) {
   .desktop {
      display: block !important;
   }
}

@media screen and (min-width: 1024px) {
   .mobile {
      display: none !important;
   }
}

.series-page {
   position: relative;
   max-width: 100%;
   padding-bottom: 4em;
   background-color: #eaf2e6;
   overflow: hidden;
}

.series-page-content {
   padding-block: 4em;
}
@media screen and (width < 1024px) {
   .series-page-content--mobile-bottom {
      padding-block: 0 4em;
   }
}

.flex-1 {
   flex: 1 !important;
}

.flex-2 {
   flex: 2 !important;
}

.order-2 {
   order: 2 !important;
}

@media screen and (min-width: 1024px) {
   .order-2-desktop {
      order: 2 !important;
   }
}

.headline .subtitle {
   display: block;
   line-height: 1.4;
   font-size: 0.6em;
   margin-block: 1em;
}

@media screen and (min-width: 1024px) {
   .break-line-desktop {
      display: block;
   }
}

/* Hero Banner */
.hero-banner {
   position: relative;
}

.hero-banner .hero-banner__img {
   width: 100%;
   height: auto;
}

.hero-banner .hero-banner__content {
   position: relative;
   width: 100%;
   padding: 1.5em 2em;
   background-color: #fff;
}
@media screen and (min-width: 1024px) {
   .hero-banner .hero-banner__content {
      position: absolute;
      top: 50%;
      width: auto;
      max-width: 45%;
      padding: 0;
      transform: translate(0, -50%);
      background-color: transparent;
   }
   .hero-banner .hero-banner__content--left {
      left: 8vw;
   }
   .hero-banner .hero-banner__content--right {
      right: 10vw;
   }
}

.hero-banner__title {
   margin: 0;
   font-size: 1.5em;
   font-weight: 600;
   line-height: 1.2;
   color: #528a71;
   text-align: center;
   text-transform: none;
   word-break: break-word;
}
@media screen and (min-width: 768px) {
   .hero-banner__title {
      font-size: 2em;
   }
}
@media screen and (min-width: 1024px) {
   .hero-banner__title {
      font-size: 2.5em;
      text-align: left;
      color: #fff;
   }
}
@media screen and (min-width: 1200px) {
   .hero-banner__title {
      font-size: 3em;
   }
}
/* !Hero Banner */

/* Product tiles (for the 'pr' page)  */
.series-page-tiles {
   padding-block: 2em;
}

.series-page-tiles .headline {
   padding-bottom: 4em;
}

.product-tiles {
   padding-inline: 2.5em;
}

.product-tiles-box {
   display: flex;
   flex-wrap: wrap;
   align-items: normal;
   align-items: stretch;
   justify-content: center;
   gap: 0.75em;
}

.product-tile {
   position: relative;
   display: grid;
   width: calc(100% - 1em);
   transition: .3s all;
}

@media screen and (min-width: 768px) {
   .product-tile {
      width: calc(100% / 2 - 1em);
      max-width: 500px;
   }
}

@media screen and (min-width: 1024px) {
   .product-tile {
      width: calc(100% / 3 - 1em);
   }
}

.product-tile__slogan {
   position: relative;
   width: 100%;
   height: 8em;
   padding-block: 1.5em;
   padding-inline: 1em;
   z-index: 2;
}

@media screen and (min-width: 768px) {
   .product-tile__slogan .headline__h4 {
      font-size: 1.325em;
   }
}

.product-tile-background,
.product-tile-background--hover {
   position: absolute;
   top: 0;
   width: 100%;
   background-color: #fff;
   transition: .3s all;
   z-index: 1;
}

.product-tile-background {
   height: 50%;
}

.product-tile-background--hover {
   height: 100%;
   opacity: 0;
}

.product-tile:hover .product-tile-background--hover {
   opacity: 1;
   transition: .3s all;
}

.product-tile__picture,
.product-tile__content {
   position: relative;
   width: 100%;
   padding-inline: 0.75em;
   text-align: center;
   z-index: 2;
}

.product-tile__picture .product-tile__img {
   display: inline;
   max-width: 200px;
   height: auto;
   cursor: pointer;
}

.product-tile__content {
   display: grid;
   place-items: center;
   padding-block: 0.5em 1.75em;
   gap: 10px;
}

.product-tile__content>* {
   margin: 0;
}

.product-tile__flag-wrapper {
   padding: 0.5em;
}

.flag {
   display: inline-block;
   padding-block: 0.25em;
   padding-inline: 1.25em;
   border-radius: 5px;
   line-height: 1.2;
}

.flag--new {
   color: #fff;
   font-weight: 600;
   background-color: #9E6193;
}

.product-tile__series-name {
   font-size: 1.35em;
   font-weight: 600;
}

.product-tile__series-name,
.product-tile__series-name:hover,
.product-tile__series-name:active,
.product-tile__series-name:focus {
   color: #393f45;
   text-decoration: none;
}

.product-tile__price {
   cursor: pointer;
   font-size: 0.85em;
}
/* !Product tiles (for the 'pr' page) */

/* Section with texts and images */
.box {
   display: flex;
   place-items: center;
   flex-direction: column;
   background-color: #fff;
   position: relative;
   overflow: hidden;
}
@media screen and (min-width: 1024px) {
   .box {
      flex-direction: row;
   }
}

@media screen and (min-width: 1024px) {
   .equal-columns>.box__content,
   .equal-columns>.box__picture {
      max-width: 50%;
   }
}

.box__content {
   flex: 1;
   padding: 2em;
}
@media screen and (min-width: 1024px) {
   .box__content {
      flex-direction: row;
      padding-block: 0;
   }
   .box__content--short-text {
      padding-inline: 3em 2em;
   }
}
@media screen and (min-width: 1280px) {
   .box__content--short-text {
      padding-inline: 3.5em 2em;
   }
}

.box__content .headline__h3 {
   font-size: 1.75em;
   line-height: 1.5;
}
@media screen and (min-width: 1024px) {
   .box__content .headline__h3.headline__h3--large {
      margin: 0;
   }
}
@media screen and (min-width: 1280px) {
   .box__content .headline__h3.headline__h3--large {
      font-size: 2.25em;
   }
}

.box__picture {
   flex: 2;
   width: 100%;
}

.box__picture picture {
   position: relative;
}

.box__image {
   max-width: 100%;
   width: 100%;
   height: auto;
}

/* Section with text and video */
.box__video .headline__h2 {
   padding-block: 0 1em;
}
@media screen and (max-width: 768px) {
   .box__video .headline__h2 {
      padding-block: 0;
   }
}
.box__video .box__content {
   padding-block: 1em;
}
.box__video .box__picture {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.box__video.box__video.video__fullwidth .box__picture picture::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #00000070;
}
.box__video .youtube__movie {
   line-height: 0;
}
.box__video .box__picture iframe {
   height: 100%;
   min-height: 530px;
}
@media screen and (max-width: 1400px) {
   .box__video .box__picture iframe {
      min-height: 480px;
   }
}
@media screen and (max-width: 768px) {
   .box__video .box__picture iframe {
      min-height: unset;
   }
}
.box__picture .button__play-video {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 96%;
   text-align: center;
   overflow: hidden;
   cursor: pointer;
}
@media screen and (max-width: 768px) {
   .box__picture .button__play-video img {
      width: 50px;
      height: 50px;
   }
}

.label__video {
   background-color: #64a70b;
   padding-block: 0.5em;
   padding-inline: 1.25em;
   border-radius: 0.5em;
   margin: 0.325em auto;
   color: #fff;
   font-size: 1.75em;
   font-weight: 600;
   width: max-content;
}
@media screen and (max-width: 1024px) {
   .label__video {
      font-size: 1.5em;
   }
}
@media screen and (max-width: 768px) {
   .label__video {
      font-size: 1.25em;
      padding-block: 0.25em;
      padding-inline: 0.25em;
   }
}
@media screen and (max-width: 576px) {
   .label__video {
      font-size: 1em;
   }
}

.box__video.video__fullwidth {
   padding: 4em;
   background-color: transparent;
}
@media screen and (max-width: 1024px) {
   .box__video.video__fullwidth {
      padding: 2em;
   }
}
@media screen and (max-width: 768px) {
   .box__video.video__fullwidth {
      padding: 1em;
   }
}
/* !Section with text and video */
/* !Section with texts and images */

/* Interactive slider */
#slider_braava .box__content {
   padding: 1em;
   text-align: center;
}
@media screen and (min-width: 1024px) {
   #slider_braava .box__content {
      text-align: left;
   }
}

#slider_braava .box .box__picture {
   display: none;
   flex: none;
}
@media screen and (min-width: 1024px) {
   #slider_braava .box .box__picture {
      display: block;
      flex: 2;
   }
}

.interactive-sliders {
   display: grid;
   place-items: center;
   position: relative;
   background-color: #fff;
   max-width: 100%;
}
@media screen and (min-width: 1024px) {
   .interactive-sliders {
      padding: 3em;
      margin-bottom: 2em;
      background-color: transparent;
   }
}

.interactive-sliders__container {
   position: relative;
   left: 0;
   width: 100%;
   height: 100%;
   transition: .7s all;
}

.interactive-slider__picture .interactive-slider__image {
   width: 100%;
   height: auto;
}

.interactive-slider__container {
   display: block;
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   height: 100%;
   overflow: hidden;
   visibility: hidden;
   transition: 1s all ease-in-out;
}

.interactive-slider__container--active {
   visibility: visible;
   z-index: 2;
}

.interactive-slider__content {
   background-color: #fff;
   padding-block: 4em 3em;
   padding-inline: 2em;
   text-align: center;
}

.interactive-slider__content .headline__h4 {
   font-size: 1.325em;
   line-height: 1.5;
   margin-bottom: 1em;
   color: #528a71;
}

.interactive-slides-navigation {
   position: absolute;
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding-inline: 1em;
   z-index: 2;
}

.interactive-slides-navigation .button__slider {
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   cursor: pointer;
}

.interactive-slides-navigation .button__slider:focus,
.interactive-slides-navigation .button__slider:active {
   outline: none;
}

.button__slider .material-icons {
   color: #bec5cd;
   font-size: 2.5em;
}

.interactive-slides-pagination {
   display: flex;
   position: absolute;
   left: 50%;
   width: auto;
   max-width: 70vw;
   margin: 0;
   padding: 0.25em 0.75em;
   border-radius: 2em;
   text-align: center;
   list-style: none;
   transform: translate(-50%, 0);
   transition: .3s all;
   z-index: 15;
}

.interactive-slides-pagination li {
   width: 16px;
   height: 16px;
   margin: 0.325em;
   border-radius: 50%;
   color: transparent;
   cursor: pointer;
   text-indent: -999px;
   border: 1px solid #bec5cd;
   background-color: #fff;
}

.interactive-slides-pagination li.active {
   background-color: #bec5cd;
}

@media screen and (min-width: 1024px) {
   .interactive-sliders__container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1em;
      width: 100%;
      max-width: 1024px;
   }

   .interactive-slider__container {
      position: relative;
      left: 0 !important;
      height: auto;
      width: calc(100% / 2 - 2em);
      max-width: 500px;
      padding: 2em;
      margin-block: 1em;
      visibility: visible !important;
      transition: .3s all;
   }

   .interactive-slider__container--active {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 15px 0 #c8c8c8;
      transition: .3s all;
   }

   .interactive-slider__picture {
      display: none;
   }

   .interactive-slider__content {
      text-align: left;
      background-color: transparent;
      padding: 0;
   }

   .interactive-slider__content .headline__h4 {
      font-size: 1.15em;
      line-height: 1.5;
      margin-bottom: 1em;
      color: #6c7680;
   }

   .interactive-slider__container--active .interactive-slider__content .headline__h4 {
      color: #528a71;
   }

   .interactive-slider__content p {
      line-height: 1.5;
   }

   .interactive-slider__container--active .interactive-slider__content p {
      font-weight: 600;
   }
}
/* !Interactive slider for Braava & Roomba */

.footnotes {
   padding-block: 2em 0;
   padding-inline: 2em;
}


/* Roomba Combo - section with boxes under the hero banner */
.items-container {
   padding-block: 2em;
   padding-inline: 2em;
}

.item-row {
   display: flex;
   justify-content: center;
   flex-direction: column;
   gap: 1em;
   padding-block: 1em;
}
@media screen and (min-width: 768px) {
   .item-row {
      padding-block: 2em;
   }
}
@media screen and (min-width: 1024px) {
   .item-row {
      flex-direction: row;
   }
}

.item-column {
   width: 100%;
   max-width: 100%;
}

@media screen and (min-width: 1024px) {
   .item-column--2 {
      width: 50%;
      max-width: 500px;
   }

   .item-column--3 {
      width: calc(100% / 3);
      max-width: 500px;
   }
}

.item__picture.item__picture--combo-j7 {
   height: 0;
   padding-bottom: 75%;
   margin-bottom: 1.5em;
   border-radius: 0.325em;
   overflow: hidden;
}

.item__img {
   width: 100%;
   height: auto;
}

.item__content .item__content--link {
   font-weight: bold;
   text-decoration: underline;
}
/* !Roomba Combo - section with boxes under the hero banner */

/* Product box */
.product__boxes {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 2em;
   padding-inline: 2em;
}

.product__box {
   position: relative;
   display: flex;
   flex-direction: column;
   background-color: #dce9d5;
   padding-block: 0 2em;
   max-width: 350px;
}
@media screen and (max-width: 768px) {
   .product__box {
      max-width: 100%;
   }
}

.product__box>div:nth-child(n):not(:first-child) {
   padding-inline: 2em;
}

.product__box .headline-background,
.product__box .product__picture,
.product__box .product__description,
.product__box .product__price,
.product__optional-content,
.product__box .product__cta {
   position: relative;
}

.product__box .headline-background {
   top: 0;
   left: 0;
   width: 100%;
   min-height: 160px;
   background-color: #447355;
   padding-block: 0 0.75em;
   z-index: 0;
   order: 1;
}
@media screen and (max-width: 768px) {
   .product__box .headline-background {
      order: 2;
      min-height: auto;
      background-color: transparent;
   }
}

.product__box .headline {
   position: relative;
   padding-inline: 2em;
   padding-block: 1em;
   text-align: left;
   width: 100%;
   z-index: 1;
}
@media screen and (max-width: 768px) {
   .product__box .headline {
      padding-block: 0 1em;
   }
}

.product__box .headline h3 {
   padding-block: 0.25em;
   padding-inline: 0;
   margin: 0
}

.product__box .headline .subtitle {
   padding: 0;
   margin: 0;
   color: #fff;
   font-size: 1em;
   font-weight: 400;
   line-height: 1.2;
}

@media screen and (max-width: 768px) {
   .product__box .headline .subtitle {
      color: #000;
   }
}

.product__box .headline .product-tile__flag-wrapper {
   padding-inline: 0;
   height: 2.725em;
}
@media screen and (max-width: 768px) {
   .product__box .headline .product-tile__flag-wrapper {
      height: auto;
   }
}

.product__box .headline a {
   color: #fff;
}
@media screen and (max-width: 768px) {
   .product__box .headline a {
      color: #518a70;
   }
}

.product__box .product__picture {
   display: flex;
   justify-content: center;
   align-items: center;
   order: 2;
   padding: 1em;
   max-width: 100%;
}
@media screen and (max-width: 768px) {
   .product__box .product__picture {
      order: 1;
   }
   .product__box .product__picture::before {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      padding: 2.5em;
      background-color: #447355;
   }
}

.product__box .product__picture picture {
   position: relative;
   padding-bottom: 250px;
   height: 0;
}

.product__box .product__picture img {
   width: auto;
   max-height: 250px;
}

.product__box .product__description {
   order: 3;
}

.product__box .product__description p {
   color: #000;
   margin: 0;
   padding-bottom: 1.5em;
}

.product__box .product__cta button {
   width: 100%;
}

.product__box .product__price {
   padding-block: 0 1em;
   order: 4;
}

.product__price p,
.product__optional-content p {
   color: #000;
}

.product__price .price--standard {
   font-size: 1.25em;
}

.product__optional-content {
   order: 5
}

.product__optional-content p {
   margin: 0;
   font-size: 0.9em;
   padding-block: 0 2em;
}

.product__box .product__cta {
   order: 6;
}
/* !Product box */