@charset "UTF-8";
:root {
  --primary-color: #78d7fa;
  --secondary-color: #eeeeec;
  --second-color: green;
  --light-grey: #d5d5d5;
  --second-grey: #eeeeec;
  --light-green: #abdabe;
  --primary-link-color: #000;
  --secondary-link-color: #008dc1;
  --hover-color: #54bde3;
  --header1: 24px;
  --header2: 20px;
  --header3: 16px;
  --button-text: 14px;
}

@media screen and (min-width: 599px) {
  :root {
    --header1: 28px;
    --header2: 22px;
    --header3: 18px;
  }
  
}

/* Bigger Heading fonts <h>-tags for Banners, Images etc. */
.heading-two {
  font-size: 44px !important;
  line-height: 48px;
  font-weight: 700;
  color: black !important;
}

.heading-three {
  font-size: 32px !important;
  line-height: 40px;
  font-weight: 500;
  color: black !important;
}

.heading-four {
  font-size: 20px !important;
  line-height: 24px;
  font-weight: 700;
  color: black !important;
}

@media only screen and (min-width: 599px) {
  .heading-one {
    font-size: 64px;
    line-height: 68px;
    font-weight: 700;
    color: black !important;
  }
  .heading-two {
    font-size: 54px !important;
    line-height: 58px;
    font-weight: 700;
  }
  .heading-three {
    font-size: 48px !important;
    line-height: 52px;
    font-weight: 700;
  }
  .heading-four {
    font-size: 44px !important;
    line-height: 48px;
  }
  .heading-five {
    font-size: 32px !important;
    line-height: 40px;
    font-weight: 500;
    color: black !important;
  }
}

.heading1 {
  font-size: 24px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
  color: black !important;
}

.heading2 {
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: black !important;
}

.heading3 {
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  color: black !important;
}

.heading4 {
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
  color: black !important;
}

.heading5 {
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  color: black !important;
}

@media only screen and (min-width: 599px) {
  .heading1 {
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 500 !important;
  }
  .heading2 {
    font-size: 24px !important;
    line-height: 28px !important;
    font-weight: 500 !important;
  }
  .heading3 {
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
  }
  .heading4 {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
  }
  .heading5 {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
  }
}

/* Ingress text, Bold */
.ingress {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}

@media only screen and (min-width: 599px) {
  .ingress {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
  }
  .ex-ingress {
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
  }
}

/* Card text, Header ex. Hämta i butik, Oral B etc */
.card__header {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: black;
}

@media only screen and (min-width: 599px) {
  .card__header {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    margin-bottom: 8px;
  }
}

/* Small text, Small text (information boxes) - Desktop */
.small-text {
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
}

.XS-small-text {
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
}

/* Diffrent changes to fonts. Colors, etc */
.text-white {
  color: white !important;
}

.text-blue {
  color: #78d7fa !important;
}

/* Centrera text på mobil, vänsterställd på desktop */
.text-lg-left {
  text-align: center;
}

@media only screen and (min-width: 599px) {
  .text-lg-left {
    text-align: left;
  }
}

.category__description .title-two {
  font-size: var(--header2) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  color: black !important;
}

h1.title-two  {
  font-weight: 600;
}

.co-brand-pages-container h1, .content-container h1, .category-hero-img-only h1 {
  font-size: var(--header1);
  line-height: 1.12;
}

.category__description .content-container h2, .content .content-container h2, .category__description h2, .co-brand-pages-container h2, .banner-content h2 {
  font-size: var(--header2) !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  color: black !important;
}

.category__description .content-container h3, .category__description h3, .co-brand-pages-container h3, .banner-content h3 {
  font-size: var(--header3) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: black !important;
}

@media only screen and (min-width: 599px) {
  .category__description .title-two {
    line-height: 1.12 !important;
    font-weight: 500 !important;
  }
  .category__description .content-container h2, .category__description h2 {
    line-height: 1.12 !important;
    font-weight: 500 !important;
  }
  .category__description .content-container h3, .category__description h3 {
    line-height: 1.12 !important;
    font-weight: 500 !important;
  }
}

/* Margin och padding for components */
.mt-18 {
  margin-top: 18px !important;
}

.mb-16 {
  margin-bottom: 8px !important;
}

.mb-32 {
  margin-bottom: 18px !important;
}

.mb-48 {
  margin-bottom: 32px !important;
}

.ml-10 {
  margin-left: 10px;
}

@media only screen and (min-width: 599px) {
  .mt-18 {
    margin-top: 32px !important;
  }

  .mb-16 {
    margin-bottom: 16px !important;
  }

  .mb-32 {
    margin-bottom: 32px !important;
  }
  .mb-48 {
    margin-bottom: 48px !important;
  }

  .ml-10 {
    margin-left: 0px;
  }
}

/* Länkar ReBrand */
.linkNB {
  color: #000;
  text-decoration: underline;
  font-weight: bold;
}

.linkNB:hover {
  color: #54bde3;
}

.linkNB:active {
  color: #54bde3;
}

.linkNB-sec {
  color: #54bde3;
  text-decoration: none;
  font-weight: bold;
}

.linkNB-sec:hover {
  color: #000;
  text-decoration: underline;
}

.linkNB-sec:active {
  color: #000;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-regular {
  font-weight: 400 !important;
}

/* Buttons CO-Blue and Secondary color, grey */
.btnNB {
  height: 38px;
  border-radius: 3px;
  background-color: #78d7fa;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 12px;
  padding: 10px 20px;
  text-transform: uppercase;
  display: inline-block;
}

.btnNB:hover {
  background-color: #008dc1;
  text-decoration: none;
  color: black;
}

.btnNB-secondary {
  background-color: #eeeeec;
}

.btnNB-secondary:hover {
  background-color: #a8acad;
}

.category__description .content-container ol {
  list-style-type: disc;
  padding-left: 16px;
}

.category__description .content-container ol li {
  padding: 5px 0 0;
  border-bottom: none;
}

.category__description .content-container ul li {
  padding: 5px 0 0;
  border-bottom: none;
}

.carousel__component.carousel-component-parent {
  margin-bottom: 18px;
}

.carousel__component.carousel-component-parent
  .carousel__component--headline
  h2 {
  margin-top: 0;
}

@media only screen and (min-width: 599px) {
  .carousel__component.carousel-component-parent {
    margin-bottom: 32px;
  }
}

/* CSS GRID från Storybook */

.co-grid {
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-template-columns: 1fr;
  -ms-grid-template-rows: 1fr 10px 1fr 10px 1fr;
  gap: 10px;
  max-width: 600px;
  width: 100%;
  position: relative;
  padding: 0 10px;
}

.co-grid img {
  width: 100%;
}

.co-grid--2s1b {
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  -ms-grid-columns: 1fr 16px 1fr 16px 2fr;
  -ms-grid-rows: 1fr;
}

.co-grid--2s1b div:nth-of-type(3) {
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

.co-grid--1b2s {
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  -ms-grid-columns: 1fr 16px 1fr 16px 2fr;
  -ms-grid-rows: 1fr;
}

.co-grid--1b2s div:nth-of-type(1) {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

@media only screen and (min-width: 599px) {
  .co-grid {
    max-width: 992px;
    padding: 0px;
    gap: 16px;
  }
  .co-grid--1 {
    padding: 0;
    margin-top: 0px;
  }

  .co-grid--1col2 {
    padding: 0;
    margin-top: 0px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    -ms-grid-rows: 1fr;
  }
  .co-grid--2 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 16px 1fr;
    -ms-grid-rows: 1fr;
  }
  .co-grid--2 div:nth-of-type(2) {
    -ms-grid-column: 3;
  }
  .co-grid--2s1b {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }
  .co-grid--2s1b div:nth-of-type(3) {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    grid-column: 3 / 5;
  }
  .co-grid--1b2s {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }
  .co-grid--1b2s div:nth-of-type(1) {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
  .co-grid--3 {
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr;
    -ms-grid-rows: 1fr;
  }
  .co-grid--3 div:nth-of-type(2) {
    -ms-grid-column: 3;
  }
  .co-grid--3 div:nth-of-type(3) {
    -ms-grid-column: 5;
  }
  .co-grid--4 {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
    -ms-grid-rows: 1fr;
  }
  .co-grid-menu-4 div:nth-of-type(2) {
    -ms-grid-column: 3;
  }
  .co-grid-menu-4 div:nth-of-type(3) {
    -ms-grid-column: 5;
  }
  .co-grid-menu-4 div:nth-of-type(4) {
    -ms-grid-column: 7;
  }
}

/* Co Meny Grid */
.co-grid-menu-2,
.co-grid-menu-4 {
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 10px 1fr;
  -ms-grid-rows: 1fr;
}

@media only screen and (min-width: 600px) {
  .co-grid-menu-2 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 10px 1fr;
    -ms-grid-rows: 1fr;
  }
  .co-grid-menu-4 {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    -ms-grid-rows: 1fr;
  }
}

/* Menyn */
.meny-grid--container {
  background: #eeeeec;
}

.meny-grid--container:hover {
  background: #d1d1d0;
}

.meny-grid--container a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  padding: 7px 0;
  -webkit-transition: 0.1s ease-in background;
  transition: 0.1s ease-in background;
}

.meny-grid--container a:hover,
.meny-grid--container a:active {
  color: #000;
  text-decoration: none;
}

.meny-grid__link {
  display: block;
  line-height: 1em;
  margin: auto 16px;
  position: relative;
  padding: 7px 0;
}

.meny-grid__link::after {
  content: url('https://images.clasohlson.com/SE/storybook/arrow.svg');
  width: 10px;
  height: 5px;
  position: absolute;
  right: -13px;
  top: 8px;
}
/* Arrows after linked p text in modules */
.co-arrow img{
  margin-bottom: 10px;
}
.co-arrow p{
  padding-right: 10px; 
  position: relative;

}
.co-arrow p::after {
  content: url(https://images.clasohlson.com/SE/2021autumn/arrow.svg);
  width: 10px;
  height: 5px;
  position: absolute;
  right: -7px;
  bottom: 12px;
}

@media only screen and (min-width: 599px) {
  .co-arrow p::after {
    bottom: 14px;
    right: -10px;
  }
}

/* styles only for IE  */
@media screen and (-ms-high-contrast: active),
  screen and (-ms-high-contrast: none) {
  .meny-grid__link::after {
    width: 5px;
    height: 5px;
  }
}

/* Header */
.co-header-container {
  max-width: 992px;
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #eeeeec;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.co-header__textarea h1,
.co-header__textarea h2,
.co-header__textarea h3 {
  color: black;
  font-weight: bold;
  text-align: left !important;
  font-size: 22px;
  line-height: 26px;
}

.co-header-container img {
  max-width: 78px;
}

@media only screen and (min-width: 375px) {

  .co-header__textarea h1,
  .co-header__textarea h2,
  .co-header__textarea h3 {
    font-size: 24px;
    line-height: 28px;
  }

  .co-header-container img {
    max-width: 88px;
  }
}

.co-header__textarea h1,
.co-header__textarea h2,
.co-header__textarea h3 {
  margin: 10px;
}

@media only screen and (min-width: 600px) {

  .co-header__textarea h1,
  .co-header__textarea h2,
  .co-header__textarea h3 {
    font-size: 44px;
    line-height: 48px;
  }

  .co-header-container img {
    max-width: 100px;
  }
}

/* CSS FÖR LÄSER MER MODULE */
.co-grid--1 {
  grid-template-columns: 1fr;
  -ms-grid-columns: 1fr;
  background-color: #eeeeec;
  grid-gap: 0px;
  padding: 0;
}

.co-grid-acc div {
  padding-bottom: 8px;
}

.co-grid-acc p {
  text-align: left;
  margin: 0 10px;
}

.readMore {
  display: inline;
}

.readLess {
  display: none;
  margin-bottom: 10px;
}

.co-grid--1 p,
.co-grid--1 h2,
.co-grid--1 h3,
.co-grid--1 ul,
.co-grid--1 ol {
  display: none;
}

.co-grid--1 ul {
  padding: 0 10px;
}

.co-grid--1 ul li,
.co-grid--1 ol li {
  padding: 5px 0 5px;
  border: 0;
}

.co-grid--1 h2,
.co-grid--1 h3 {
  margin: 10px;
}

.co-grid--1 h2:first-of-type,
.co-grid--1 p:first-of-type {
  display: block;
}

@media only screen and (min-width: 599px) {
  .co-grid-acc {
    margin: 0px;
    width: 100%;
  }

  .co-grid-acc div {
    padding-bottom: 0px;
  }

  #readMoreImg {
    float: left;
    width: 50%;
    margin-right: 32px;
  }

  .co-grid--1 h2:first-of-type {
    margin-top: 32px;
  }

  .co-grid--1 {
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    background-color: #eeeeec;
    grid-gap: 16px;
  }

  .co-grid-acc p {
    text-align: left;
    margin: 0 32px;
    padding: 0px;
  }

  .co-grid--1 h2,
  .co-grid--1 h3 {
    margin: 10px 32px;
  }

  .co-grid--1 ul,
  .co-grid--1 ol {
    padding: 0 32px;
  }

  .readLess {
    margin-bottom: 32px;
  }
}

/* Accordion style */
.co__accordian {
  width: 100%;
}

.co__accordian input {
  display: none;
}

.co__accordian label {
  display: block;
  position: relative;
  cursor: pointer;
  background: #eeeeec;
  margin: 0;
  width: 100%;
  max-width: 992px;
  color: #000;
  font-weight: bold;
  font-size: 12px;
}

.co__accordian label .meny-grid__link::after {
  content: '';
}

.inside-container {
  display: block;
  height: 0px;
  width: 100%;
  padding: 0px 16px;
  background: #eeeeec;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 12px;
}

.inside-container ul {
  display: block;
}

.inside-container ul li {
  padding: 5px 0;
}

@media only screen and (min-width: 600px) {
  .inside-container ul li {
    border: 0;
    padding: 5px 0;
  }
}

.co__accordian input:checked ~ .inside-container {
  height: 235px;
}

@media only screen and (min-width: 768px) {
  .co__accordian input:checked ~ .inside-container {
    height: 170px;
  }
}

.co__accordian label::after {
  content: url(https://images.clasohlson.com/SE/2021spring/kampanj/arrow-icon1a.png);
  width: 10px;
  position: absolute;
  right: 10px;
  top: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

input:checked + label::after {
  content: url(https://images.clasohlson.com/SE/2021spring/kampanj/arrow-icon1a.png);
  width: 10px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  right: 5px;
  top: 0px;
}

.acc-link {
  color: #2d8ac0 !important;
  text-decoration: none;
}

.acc-link:hover {
  color: #2d8ac0 !important;
  background-color: transparent !important;
}

/* styles only for IE  */
@media screen and (-ms-high-contrast: active),
  screen and (-ms-high-contrast: none) {
  .ms-grid1 {
    -ms-grid-column: 1;
  }
  .ms-grid2 {
    -ms-grid-column: 3;
  }
  .ms-grid3 {
    -ms-grid-column: 5;
  }
  .ms-grid4 {
    -ms-grid-column: 7;
  }
  .ms-row2 {
    -ms-grid-row: 3;
  }
}

/* Fixed new css for categorypages */


.banner-content {
  padding: 10px 0 0;
}

@media only screen and (min-width: 599px) {
  .banner-content {
    padding: 16px 0 0;
  }
}


    
        .banner-content li {
          border-bottom: none;
          padding: 0px;
        }
    
        .mission-carousell .owl-carousel .co-lista-mission {
          margin: 0 5px;
        }
   
        .banner-content .mission-carousell li {
          padding: 0;
        }

        .co-karusell-lg .block-arrow::after {
          content: url(https://images.clasohlson.com/SE/2021autumn/arrow.svg);
          width: 10px;
          height: 5px;
          position: absolute;
          right: 0px;
          bottom: 23px;
        }
    
        .co-karusell-lg.owl-carousel.slider-component .owl-nav {
          top: 50% !important;
        }
    
        @media only screen and (max-width: 599px) {
          .co-karusell-guide.owl-carousel.slider-component .owl-nav {
            top: 90px !important;
          }
    
          .co-karusell-sm.owl-carousel.slider-component .owl-nav {
            top: 72px !important;
          }
        }

@media only screen and (max-width: 599px) {
  .category__description {
    margin: 0 10px;
  }

  .read-more {
    margin-left: 10px
  }

  .read-less {
    margin-left: 10px
  }
}
.mission-grid__link {
  display: block;
  line-height: 1em;
  margin: auto 8px auto 0px;
  position: relative;
  padding: 7px 0;
}

            .mission-grid__link a {
              text-decoration: none;
            }

.mission-grid__link::after {
  content: url(https://images.clasohlson.com/SE/storybook/arrow.svg);
  width: 10px;
  height: 5px;
  position: absolute;
  right: -13px;
  top: 8px;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.banner-content .category__description h1 {
  font-size: var(--header1) !important;
  text-align: left !important;
  line-height: 1.12em;
}

      /* #region Grid Card Style */
      .co-card_grid__card {
        display: grid;
        background: var(--secondary-color);
        transition: 300ms ease-in-out;
        max-width: 236px;
        border-bottom: none !important;
        transition: 300ms ease-in-out 0;
      }
    
      .co-card_grid__card:hover {
        background: var(--light-grey);
      }
    
      .co-card_grid__card-img {
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
        display: grid;
        grid-template-rows: 80% 20%;
        text-decoration: none !important;
        transition: 300ms ease-in-out 0;
        overflow: visible;
        align-items: center;
        aspect-ratio: 1; 
      }
    
      .co-card_grid__card-img img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        align-self: start;
      }
    
      .co-card_grid__card-text {
          grid-row: 2 / span 1;
          grid-column: 1 / span 1;
          container-type: size;
          width: 100%;
          text-align: center;
          font-weight: 600;
          line-height: 1;
          color: #000;
          align-self: end;
          height: 100%;
          display: flex;
      }

      .co-card_grid__card-text span {
          margin: auto;
          display: block;
          width: 100%;
          font-size: 10px;
          font-size: clamp(10px, 38cqh, 20px);
      }

      @media screen and (min-width: 599px) {
          .co-card_grid__card-text span {
            font-size: 14px;
            font-size: clamp(10px, 38cqh, 20px);
          }
      }
/* #endregion Grid Card Style */  

/* #region 4-card gird */
    .co-card-4-grid {
      --column-count: 2;
      display: grid !important;
      grid-template-columns: repeat(var(--column-count), 1fr);
      grid-template-rows: 1fr;
      gap: 8px;
      max-width: 992px;
      margin: auto;
      width: calc(100% - 20px);        
  }

  @media screen and (min-width: 599px) {
      .co-card-4-grid {
          --column-count: 4;
          gap: 16px;
          width: 100%;
      }
  }
/* #endregion 4-card gird */

/* #endregion Grid style */
.co-card-grid {
  --column-count: 3;
  display: grid !important;
  grid-template-columns: repeat(var(--column-count), 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  max-width: 992px;
  margin: auto;
  width: calc(100% - 20px);
  /* grid-auto-rows: 0 stops new implicit rows from auto generating */
  grid-auto-rows: 0;
  overflow: hidden;
}

@media screen and (min-width: 599px) {
  .co-card-grid {
    --column-count: 4;
    gap: 16px;
    width: 100%;
  }
}

.expand-grid:checked + .co-card-grid {
  grid-auto-rows: 1fr;
}

.co-grid-toggle {
  display: none;
  cursor: pointer;
  width: fit-content;
}

.co-grid-toggle::after {
  font-size: 14px;
  font-weight: bold;
  content: "Show more +";
  margin: auto auto auto 10px;
}

@media screen and (min-width: 599px) {
  .co-grid-toggle::after {
    margin: auto;
  }
}

#gridToggle {
  display: none;
}

.expand-grid:checked ~ .co-grid-toggle::after {
  content: "Show less -";
}

.expand-grid:checked ~ .co-grid-toggle {
  padding: 10px 0 0 0;
}

@media screen and (min-width: 599px) {
  .expand-grid:checked ~ .co-grid-toggle {
    padding: 16px 0 0 0;
  }
}

.expand-grid {
  display: none;
}

/* #endregion Grid style */

/* #region general catergory style */
.category-hero-img-only {
  display: block;
  margin-top: 10px;
}

@media screen and (min-width: 599px) {
  .category-hero-img-only {
      margin-top: 16px
  }
}

.category-hero-img-only img {
  object-fit: cover;
  aspect-ratio: 16/9;
  width: 100%;
  max-height: 530px;
}

@media screen and (min-width: 599px) {
    .category-hero-img-only img {
      max-height: 350px;
    }
}

.banner-content:has(.category-hero-img-only) h1 {
  text-align: left;
  font-size: 30px !important;
}

@media screen and (min-width: 599px) {
  .banner-content:has(.category-hero-img-only) h1{
    font-size: 40px !important;
  }
}

h1 + .button-carousel {
  margin: auto auto 18px auto;
}

@media screen and (min-width: 599px) {
  h1 + .button-carousel {
    margin: auto auto 32px auto;
  }
}

.category-hero-img-only h1 {
  margin-left: 10px;
  text-align: left;
}

@media screen and (min-width: 599px) {
  .category-hero-img-only h1 {
    margin-left: 0;
  }
}

.mb-24{
  margin-bottom: 16px;
}

@media screen and (min-width: 599px) {
  .mb-24{
    margin-bottom: 24px !important;
  }
}
/* #endregion */

/* #region Black button carousel */
    /* Sets background color of button and centers text */
    .button-carousel.owl-carousel li {
      background: #000;
      text-align: center;
      /* Overrides padding on list items in master CSS */
      padding: 0 !important;
  }

  /* Controls the typeface of the button */
  .button-carousel.owl-carousel a {
      color: #fff;
      font-weight: bold;
      display: block;
      width: 100%;
      /* Padding sets the height on button. If there's a change in padding, adjust the height attribute of the nav buttons (if using) */
      padding: 6px 0;
      /* Overrides default text-decoration in master CSS */
      text-decoration: none;
      font-size: var(--button-text);
      line-height: 1;
  }

  @media screen and (min-width: 599px) {
      .button-carousel.owl-carousel a {
         padding: 9px 0; 
      }
  }

  /* For use on category pages. Provides whitespace around the carousel when adjacent to category__description */
  .category__description + .button-carousel {
      padding: 16px 0 0 !important;
  }

  @media screen and (min-width: 599px) {
      .category__description + .button-carousel {
          padding: 32px 0 0 !important;
      }
  }

  /* Controls whether or not nav buttons are on (display: block) or off (display: none). */
  .button-carousel .owl-nav, .button-carousel .owl-nav:hover {
      display: none !important;
  }

  .button-carousel .owl-prev, .button-carousel .owl-next {
      /* This sets the height of the scroll button. 46px fits the height of the button when padding-top & padding-bottom is set to 13px*/
      height: 46px !important;
       /* This sets the width of the scroll button. 30px minimum for desktop, more is needed for mobile */
      width: 30px;
       /* This sets the background color of the scroll button to solid white on */
      background-color: hsla(0,0%,100%,.89) !important;
  }

  /* This sets the background color of the scroll button to solid white on :hover */
  .button-carousel .owl-prev:hover span:before, .owl-next:hover span:after {
      background: (0,0%,100%,1);
  }

  /* Sets the nav buttons to match the y-position of the carousel buttons */
  .button-carousel .owl-nav {
      top: 0 !important;
      transform: translateY(0) !important;
      -webkit-transform: translateY(0) !important;
      -moz-transform: translateY(0) !important;
      -ms-transform: translateY(0) !important;
      -o-transform: translateY(0) !important;
}

/* #endregion Black button carousel */



/*Allows hero image to be 100% width and override the style to give mobile side paddings */
.pageType-ContentPage .content:has(.co-block-1):first-of-type {
  width: 100%;
}

/* Provides 10px gutter to all content pages by default on mobile */
body[class*="page-cmsitem-"] .yCmsContentSlot > .content {
  margin: auto;
  width: calc(100% - 20px);
}

@media screen and (min-width: 599px) {
  body[class*="page-cmsitem-"] .yCmsContentSlot > .content {
     width: 100%;
  }
}

/* Used for switching display between SE and FISE. JS will change styles if detected */
.co-cat_4-btns.lan-fisv-block, .lan-fisv-block, .co-cat_4-btns.lan-fisv-grid, .lan-fisv-grid {
  display: none;
}

/* #region Category 4 buttons */
.co-cat_4-btns {
  width: calc(100% - 20px);
  display: -ms-grid;
  display: grid;
  gap: 10px;
  margin: auto auto 18px;
  grid-template-columns: 1fr 1fr;
  -ms-grid-columns: 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
}

.category__description .co-cat_4-btns {
  width: 100%
}

.co-cat_4-btns a:nth-of-type(1) {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.co-cat_4-btns a:nth-of-type(2) {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}

.co-cat_4-btns a:nth-of-type(3) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.co-cat_4-btns a:nth-of-type(4) {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

@media only screen and (min-width: 599px) {
  .co-cat_4-btns {
    margin: auto auto 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
    gap: 16px;
    max-width: 992px;
    width: 100%;
  }

  .co-cat_4-btns a:first-of-type {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  .co-cat_4-btns a:nth-of-type(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
  }

  .co-cat_4-btns a:nth-of-type(3) {
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }

  .co-cat_4-btns a:nth-of-type(4) {
    -ms-grid-column: 7;
    -ms-grid-row: 1;
  }
}
    
.co-cat_4-btns a,
.co-cat_4-btns a:active {
  text-decoration: none;
}

.co-cat_4-btns a:first-of-type {
  margin: auto;
}

.co-cat_4-btns a {
  display: block;
  width: 100%;
  color: #fff;
  background: black;
  border-radius: 3px;
}

.co-cat_4-btns a:hover,
.co-cat_4-btns a:active {
  background: #a8acad;
  color: black;
}

@media only screen and (min-width: 599px) {
  .co-cat_4-btns a {
    margin: auto;
  }
}

.co-cat_4-btns span {
  /* font-weight: 600; */
  display: block;
  width: 100%;
  padding: 13px 0;
  text-align: center;
  font-size: var(--button-text);
  font-weight: bold;
  line-height: 1;
}
/* #endregion Category 4 buttons */

/* #region HP 4-btns  */
.co-hp_4-btns {
  width: calc(100% - 20px);
  display: -ms-grid;
  display: grid;
  gap: 10px;
  margin: auto auto 18px;
  grid-template-columns: 1fr 1fr;
  -ms-grid-columns: 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
}

.co-hp_4-btns a:nth-of-type(1) {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.co-hp_4-btns a:nth-of-type(2) {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}

.co-hp_4-btns a:nth-of-type(3) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.co-hp_4-btns a:nth-of-type(4) {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

@media only screen and (min-width: 599px) {
  .co-hp_4-btns {
    margin: auto auto 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
    gap: 16px;
    max-width: 992px;
    width: 100%;
  }

  .co-hp_4-btns a:first-of-type {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }

  .co-hp_4-btns a:nth-of-type(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
  }

  .co-hp_4-btns a:nth-of-type(3) {
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }

  .co-hp_4-btns a:nth-of-type(4) {
    -ms-grid-column: 7;
    -ms-grid-row: 1;
  }
}

.co-hp_4-btns a,
.co-hp_4-btns a:active {
  text-decoration: none;
}

.co-hp_4-btns a:first-of-type {
  margin: auto;
}

.co-hp_4-btns a {
  display: block;
  width: 100%;
  color: white;
  background: black;
  border-radius: 3px;
}

.co-hp_4-btns a:hover,
.co-hp_4-btns a:active {
  background: #a8acad;
  color: black;
}

@media only screen and (min-width: 599px) {
  .co-hp_4-btns a {
    margin: auto;
  }
}

.co-hp_4-btns span {
  /* font-weight: 600; */
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}
/* #endregion HP 4-btns  */

/* #region btn-banner  */

#btn-banner {
  margin: auto auto 10px;
}

@media only screen and (min-width: 599px) {
  #btn-banner {
    margin: auto auto 16px;
  }
}
/* #endregion btn-banner  */

.cat-grid-container {
  width: calc(100% - 20px);
  margin: auto;
}

.cat-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.cat-grid-item {
  border: 1px solid #eeeeec;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.cat-grid-img {
  width: 100%;
  height: 80px;
  object-fit: contain;
  padding: 12px;
  object-position: center;
}
.cat-grid-text-link {
  width: 100%;
  display: flex;
  background: #eeeeec;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  flex: auto
}

.cat-grid-text {
  background: #eeeeec;
  width: fit-content;
  padding: 6px 5px 4px;
  display: block;
  margin: auto;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cat-grid-container h3 {
  text-align: center;
  margin: 0 0 30px 0;
  font-size: 20px;
  font-weight: bold;
}

@media screen and (min-width: 599px) {
  .cat-grid-container {
      width: 100%;
      margin: auto;
  }

  .cat-grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(6, 1fr);
  }

  .cat-grid-img {
      height: 120px;
  }

  .cat-grid-text {
      font-size: 14px;
      padding: 12px 5px 9px;
      
  }

  .cat-grid-container h3 {
          text-align: left;
          margin: 0 0 20px 0;
  }

}