/** Shopify CDN: Minification failed

Line 145:14 Expected identifier but found whitespace
Line 145:16 Unexpected "{"
Line 145:25 Expected ":"
Line 145:50 Expected ":"
Line 823:14 Expected identifier but found whitespace
Line 823:16 Unexpected "{"
Line 823:25 Expected ":"
Line 823:50 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:footer (INDEX:9) */
/* ==========================================================================
     Raseco Footer
     ========================================================================== */

  .raseco-footer {
    margin-top: 8rem;

    color: #ffffff;
    background: #123d2c;
  }


  /* Newsletter
  -------------------------------------------------------------------------- */

  .raseco-footer__newsletter {
    padding: 4.8rem 0;

    background: #edf3e9;
  }

  .raseco-footer__newsletter-grid {
    display: grid;
    grid-template-columns: 1fr minmax(340px, 520px);
    align-items: center;
    gap: 5rem;
  }

  .raseco-footer__newsletter-heading {
    margin: 0 0 1rem;

    color: #123d2c;

    font-size: clamp(2.6rem, 3vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .raseco-footer__newsletter-text {
    max-width: 58rem;

    color: #5e6b63;

    font-size: 1.6rem;
    line-height: 1.6;
  }

  .raseco-footer__newsletter-text p {
    margin: 0;
  }

  .raseco-footer__newsletter-field {
    display: flex;
    gap: 1rem;
  }

  .raseco-footer__newsletter-field input {
    min-width: 0;
    height: 5rem;

    background: #ffffff;
    border-color: #d3ddd2;
  }

  .raseco-footer__newsletter-field .button {
    min-width: 13rem;
  }

  .raseco-footer__newsletter-message {
    margin-top: 1rem;

    color: #123d2c;

    font-size: 1.4rem;
  }

  .raseco-footer__newsletter-message--error {
    color: #b42318;
  }


  /* Main footer
  -------------------------------------------------------------------------- */

  .raseco-footer__main {
    padding: 6rem 0 2.4rem;
  }

.raseco-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr minmax(160px, 1fr) 320px;
    justify-content: space-between;
    gap: 3rem;
    align-items: start;
  }

  .raseco-footer__column--widget {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 320px;
    min-width: 320px;
  }

  .raseco-footer__column--widget valued-widget {
    width: 320px;
  }


  /* Brand
  -------------------------------------------------------------------------- */

  .raseco-footer__brand {
    max-width: 34rem;
  }

  .raseco-footer__logo {
    display: inline-flex;
    align-items: center;

    margin-bottom: 2rem;
  }

  .raseco-footer__logo img {
    display: block;

    width: auto;
    max-width: {{ section.settings.logo_width }}px;
    max-height: 6.4rem;
  }

  .raseco-footer__logo-fallback {
    display: flex;
    flex-direction: column;

    line-height: 1;
  }

  .raseco-footer__logo-name {
    color: #ffffff;

    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .raseco-footer__logo-tagline {
    margin-top: 0.4rem;

    color: #b8d8bf;

    font-size: 1.25rem;
    font-weight: 600;
  }

  .raseco-footer__description {
    color: rgba(255, 255, 255, 0.68);

    font-size: 1.5rem;
    line-height: 1.7;
  }

  .raseco-footer__description p:last-child {
    margin-bottom: 0;
  }


  /* Headings
  -------------------------------------------------------------------------- */

  .raseco-footer__heading {
    margin: 0 0 1.8rem;

    color: #ffffff;

    font-size: 1.5rem;
    font-weight: 700;
  }


  /* Menus
  -------------------------------------------------------------------------- */

  .raseco-footer__menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .raseco-footer__menu a,
  .raseco-footer__contact a {
    color: rgba(255, 255, 255, 0.68);

    font-size: 1.45rem;

    transition: color var(--transition-fast);
  }

  .raseco-footer__menu a:hover,
  .raseco-footer__contact a:hover {
    color: #ffffff;
  }


  /* Contact
  -------------------------------------------------------------------------- */

  .raseco-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    color: rgba(255, 255, 255, 0.68);

    font-size: 1.45rem;
    line-height: 1.6;
  }

  .raseco-footer__contact p {
    margin: 0;
  }


  /* Socials
  -------------------------------------------------------------------------- */

  .raseco-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;

    margin-top: 2.2rem;
  }

  .raseco-footer__socials a {
    color: #b8d8bf;

    font-size: 1.35rem;
    font-weight: 600;
  }

  .raseco-footer__socials a:hover {
    color: #ffffff;
  }


  /* Widget Kolom
  -------------------------------------------------------------------------- */

  .raseco-footer__column--widget {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .raseco-footer__column--widget valued-widget {
    width: 100%;
    max-width: 280px;
  }


  /* Trust row
  -------------------------------------------------------------------------- */

  .raseco-footer__trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;

    margin-top: 5rem;
    padding: 2.4rem 0;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .raseco-footer__trust-items {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
  }

  .raseco-footer__trust-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;

    color: rgba(255, 255, 255, 0.72);

    font-size: 1.35rem;
  }

  .raseco-footer__trust-item svg {
    width: 2rem;
    height: 2rem;

    fill: none;
    stroke: #a8cf71;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  /* Payments
  -------------------------------------------------------------------------- */

  .raseco-footer__payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
  }

  .raseco-footer__payments svg {
    width: 3.8rem;
    height: auto;
  }


  /* Bottom
  -------------------------------------------------------------------------- */

  .raseco-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;

    padding-top: 2.2rem;
  }

  .raseco-footer__copyright,
  .raseco-footer__bottom-links a {
    color: rgba(255, 255, 255, 0.5);

    font-size: 1.25rem;
  }

  .raseco-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2rem;
  }

  .raseco-footer__bottom-links a:hover {
    color: #ffffff;
  }

  .raseco-footer__bottom-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
  }

  .raseco-footer__company-detail {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25rem;
    line-height: 1.6;
  }

  .raseco-footer__company-detail::before {
    content: "•";
    margin-right: 1.8rem;
    color: rgba(255, 255, 255, 0.35);
  }

  @media screen and (max-width: 749px) {
    .raseco-footer__bottom-info {
      gap: 0.8rem 1.2rem;
    }

    .raseco-footer__company-detail::before {
      margin-right: 1.2rem;
    }
  }


  /* Tablet
  -------------------------------------------------------------------------- */

  @media screen and (max-width: 989px) {

    .raseco-footer__newsletter-grid {
      grid-template-columns: 1fr;
      gap: 2.8rem;
    }

    .raseco-footer__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
    }

    .raseco-footer__brand {
      max-width: none;
    }

    .raseco-footer__column--widget {
      justify-content: flex-start;
    }

    .raseco-footer__trust-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .raseco-footer__payments {
      justify-content: flex-start;
    }

  }


  /* Mobile
  -------------------------------------------------------------------------- */

  @media screen and (max-width: 749px) {

    .raseco-footer {
      margin-top: 5rem;
    }

    .raseco-footer__newsletter {
      padding: 3.8rem 0;
    }

    .raseco-footer__newsletter-field {
      flex-direction: column;
    }

    .raseco-footer__newsletter-field .button {
      width: 100%;
    }

    .raseco-footer__main {
      padding-top: 4.6rem;
    }

    .raseco-footer__grid {
      grid-template-columns: 1fr;
      gap: 3.4rem;
    }

    .raseco-footer__trust-items {
      flex-direction: column;
      gap: 1.6rem;
    }

    .raseco-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
    }

    .raseco-footer__bottom-links {
      justify-content: flex-start;
      gap: 1.4rem 2rem;
    }

  }

  /* ==========================================================================
     DIERENDAG FOOTER
     ========================================================================== */

  .raseco-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .raseco-footer--dierendag .raseco-footer__newsletter,
  .raseco-footer--dierendag .raseco-footer__main {
    position: relative;
    z-index: 2;
  }


  /* Decoratielaag */

  .raseco-footer__dierendag-decoration {
    position: absolute;
    inset: 0;
    z-index: 3;

    overflow: hidden;

    pointer-events: none;
    user-select: none;
  }


  /* ==========================================================================
     POOTJES
     ========================================================================== */

  .footer-dd-paw {
    position: absolute;
    display: block;

    line-height: 1;
    opacity: 0.42;

    filter:
      grayscale(1)
      brightness(0)
      invert(1);

    transform-origin: center;
  }


  /* Klein - linksboven */

  .footer-dd-paw--1 {
    top: 3%;
    left: 2%;

    font-size: 3rem;

    transform: rotate(-18deg);
  }


  /* Groot - nieuwsbrief rechts */

  .footer-dd-paw--2 {
    top: 7%;
    right: 7%;

    font-size: 7rem;

    transform: rotate(18deg);
  }


  /* Middel - begin groene footer */

  .footer-dd-paw--3 {
    top: 32%;
    left: 37%;

    font-size: 4.5rem;

    transform: rotate(24deg);
  }


  /* Groot - rechterkant groene footer */

  .footer-dd-paw--4 {
    top: 47%;
    right: 3%;

    font-size: 8rem;

    transform: rotate(-16deg);
  }


  /* Middel - onderaan links */

  .footer-dd-paw--5 {
    bottom: 7%;
    left: 5%;

    font-size: 5rem;

    transform: rotate(15deg);
  }


  /* Klein - onderaan midden/rechts */

  .footer-dd-paw--6 {
    right: 34%;
    bottom: 4%;

    font-size: 3.5rem;

    transform: rotate(-20deg);
  }


  /* ==========================================================================
     HARTJES
     ========================================================================== */

  .footer-dd-heart {
    position: absolute;
    display: block;

    color: #9ccc65;

    font-family: Arial, sans-serif;
    font-weight: 400;
    line-height: 1;

    opacity: 0.42;

    transform-origin: center;
  }


  /* Nieuwsbrief */

  .footer-dd-heart--1 {
    top: 4%;
    left: 27%;

    color: #2e7d32;

    font-size: 6rem;

    transform: rotate(-12deg);
  }


  /* Overgang nieuwsbrief/footer */

  .footer-dd-heart--2 {
    top: 29%;
    right: 28%;

    font-size: 4rem;

    transform: rotate(14deg);
  }


  /* Grote subtiele rechts onder */

  .footer-dd-heart--3 {
    right: 8%;
    bottom: 8%;

    font-size: 9rem;

    transform: rotate(-17deg);
  }


  /* Midden onder */

  .footer-dd-heart--4 {
    bottom: 12%;
    left: 44%;

    font-size: 5rem;

    transform: rotate(10deg);
  }


  /* ==========================================================================
     Decoraties op donkere footer iets lichter
     ========================================================================== */

  .raseco-footer--dierendag .raseco-footer__main {
    background:
      radial-gradient(
        circle at 85% 30%,
        rgba(124, 179, 66, 0.08),
        transparent 30%
      ),
      #123d2c;
  }


  /* ==========================================================================
     MOBILE
     ========================================================================== */

  @media screen and (max-width: 749px) {

    .footer-dd-paw--2 {
      font-size: 4.5rem;
    }

    .footer-dd-paw--3 {
      left: 80%;
    }

    .footer-dd-paw--4 {
      font-size: 5.5rem;
    }

    .footer-dd-heart--1 {
      left: 70%;

      font-size: 4.5rem;
    }

    .footer-dd-heart--2 {
      display: none;
    }

    .footer-dd-heart--3 {
      font-size: 6rem;
    }

    .footer-dd-heart--4 {
      left: 45%;

      font-size: 4rem;
    }

  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:10) */
/* ==========================================================================
     Raseco Header
     ========================================================================== */

  .raseco-header {
    position: relative;
    z-index: 100;

    width: 100%;

    background: var(--color-surface);
  }

  .raseco-header--sticky {
    position: sticky;
    top: 0;
  }


  /* USP bar
  -------------------------------------------------------------------------- */

  .raseco-header__usp-bar {
    color: #ffffff;
    background: #123d2c;
  }

  .raseco-header__usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;

    min-height: 3.8rem;
  }

  .raseco-header__usp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;

    padding: 0.8rem 1rem;

    font-size: 1.25rem;
    font-weight: 500;
  }

  .raseco-header__usp svg {
    flex: 0 0 auto;

    width: 1.7rem;
    height: 1.7rem;

    fill: none;
    stroke: #a8cf71;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  /* Main header
  -------------------------------------------------------------------------- */

  .raseco-header__main {
    background: var(--color-surface);
  }

  .raseco-header__main-grid {
    display: grid;
    grid-template-columns: 17rem minmax(280px, 1fr) auto;
    align-items: center;
    gap: 4rem;

    min-height: 9rem;
  }


  /* Logo
  -------------------------------------------------------------------------- */

  .raseco-header__logo {
    display: inline-flex;
    align-items: center;

    width: fit-content;
  }

  .raseco-header__logo img {
    display: block;

    width: auto;
    max-width: {{ section.settings.logo_width }}px;
    max-height: 6.5rem;
  }

  .raseco-header__logo-fallback {
    display: flex;
    flex-direction: column;

    line-height: 1;
  }

  .raseco-header__logo-name {
    color: #123d2c;

    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .raseco-header__logo-tagline {
    margin-top: 0.4rem;

    color: var(--color-dark);

    font-size: 1.25rem;
    font-weight: 600;
  }


  /* Search
  -------------------------------------------------------------------------- */

  .raseco-header__search {
    width: 100%;
    max-width: 62rem;
  }

  .raseco-header__search-form {
    position: relative;

    display: flex;

    width: 100%;
  }

  .raseco-header__search-form input {
    height: 5rem;
    padding: 0 6.5rem 0 1.8rem;

    background: #ffffff;
    border: 1px solid #d9ded9;
    border-radius: 1rem;

    font-size: 1.4rem;
  }

  .raseco-header__search-form input:focus {
    border-color: #123d2c;

    box-shadow: 0 0 0 2px rgba(18, 61, 44, 0.08);
  }

  .raseco-header__search-button {
    position: absolute;
    top: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 5.4rem;
    height: 5rem;

    padding: 0;

    color: #ffffff;
    background: #123d2c;

    border: 0;
    border-radius: 0 1rem 1rem 0;
  }

  .raseco-header__search-button:hover {
    background: var(--color-primary);
  }

  .raseco-header__search-button svg {
    width: 2rem;
    height: 2rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

/* Predictive search
-------------------------------------------------------------------------- */

.raseco-header__search,
.raseco-header__search-mobile-wrapper {
  position: relative;
}

.raseco-predictive-search {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  z-index: 120;

  width: 100%;
  max-height: min(62rem, calc(100vh - 16rem));
  overflow-y: auto;

  background: #ffffff;

  border: 1px solid #e2e7e3;
  border-radius: 1.4rem;

  box-shadow:
    0 18px 50px rgba(18, 61, 44, 0.12),
    0 4px 14px rgba(18, 61, 44, 0.06);
}

.raseco-predictive-search[hidden] {
  display: none;
}

.raseco-predictive-search__loading,
.raseco-predictive-search__empty {
  padding: 2.2rem;

  color: var(--color-text-muted);

  font-size: 1.35rem;
  text-align: center;
}

.raseco-predictive-search__heading {
  padding: 1.4rem 1.6rem 0.8rem;

  color: #6b756f;

  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.raseco-predictive-search__products {
  display: flex;
  flex-direction: column;
}

.raseco-predictive-product {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;

  padding: 1.2rem 1.6rem;

  border-top: 1px solid #eef1ee;
}

.raseco-predictive-product:first-child {
  border-top: 0;
}

.raseco-predictive-product:hover {
  background: #fafcf9;
}

.raseco-predictive-product__image-link {
  display: block;
}

.raseco-predictive-product__image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 7rem;
  height: 7rem;

  overflow: hidden;

  background: #f7f8f6;

  border-radius: 1rem;
}

.raseco-predictive-product__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.raseco-predictive-product__placeholder {
  width: 2.4rem;
  height: 2.4rem;

  color: #9ca39f;
}

.raseco-predictive-product__info {
  min-width: 0;
}

.raseco-predictive-product__title {
  display: block;

  margin-bottom: 0.5rem;

  color: #123d2c;

  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.raseco-predictive-product__title:hover {
  color: var(--color-primary);
}

.raseco-predictive-product__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;

  color: #123d2c;

  font-size: 1.4rem;
  font-weight: 700;
}

.raseco-predictive-product__compare-price {
  color: #929a95;

  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: line-through;
}

.raseco-predictive-product__action {
  min-width: 12rem;
}

.raseco-predictive-product__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  min-height: 4rem;
  padding: 0.8rem 1.4rem;

  color: #ffffff;
  background: #123d2c;

  border: 0;
  border-radius: 0.9rem;

  font-size: 1.2rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 160ms ease,
    transform 160ms ease;
}

.raseco-predictive-product__add:hover {
  background: var(--color-primary);
}

.raseco-predictive-product__add:disabled {
  cursor: default;
  opacity: 0.65;
}

.raseco-predictive-product__add svg {
  width: 1.6rem;
  height: 1.6rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.raseco-predictive-product__options {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 4rem;
  padding: 0.8rem 1.4rem;

  color: #123d2c;
  background: #eef5ee;

  border-radius: 0.9rem;

  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.raseco-predictive-search__footer {
  padding: 1.2rem 1.6rem;

  background: #f7faf7;

  border-top: 1px solid #e5e9e5;
  border-radius: 0 0 1.4rem 1.4rem;
}

.raseco-predictive-search__all {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #123d2c;

  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

.raseco-predictive-search__all svg {
  width: 1.7rem;
  height: 1.7rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

@media screen and (max-width: 989px) {

  .raseco-header__search-mobile-wrapper {
    width: 100%;
  }

  .raseco-predictive-search {
    top: calc(100% + 0.5rem);
  }

}

@media screen and (max-width: 749px) {

  .raseco-predictive-search {
    max-height: 60vh;

    border-radius: 1.2rem;
  }

  .raseco-predictive-product {
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 1rem;

    padding: 1rem 1.2rem;
  }

  .raseco-predictive-product__image {
    width: 5.8rem;
    height: 5.8rem;
  }

  .raseco-predictive-product__title {
    font-size: 1.25rem;
  }

  .raseco-predictive-product__action {
    grid-column: 2;

    min-width: 0;
  }

  .raseco-predictive-product__add,
  .raseco-predictive-product__options {
    min-height: 3.7rem;
    padding: 0.7rem 1.1rem;

    font-size: 1.15rem;
  }

}
  /* Account / cart
  -------------------------------------------------------------------------- */

  .raseco-header__actions {
    display: flex;
    align-items: center;
    gap: 2.6rem;
  }

  .raseco-header__action {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    color: #123d2c;

    font-size: 1.4rem;
    font-weight: 600;

    white-space: nowrap;
  }

  .raseco-header__action:hover {
    color: var(--color-primary);
  }

  .raseco-header__action > svg,
  .raseco-header__cart-icon > svg {
    width: 2.6rem;
    height: 2.6rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .raseco-header__cart-icon {
    position: relative;

    display: inline-flex;
  }

  .raseco-header__cart-count {
    position: absolute;
    top: -0.8rem;
    right: -1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.4rem;

    color: #ffffff;
    background: var(--color-primary);

    border-radius: 99rem;

    font-size: 1rem;
    font-weight: 700;
  }


  /* Navigation
  -------------------------------------------------------------------------- */

  .raseco-header__navigation {
    background: var(--color-surface);
    border-top: 1px solid #f0f1ef;
    border-bottom: 1px solid var(--color-border);
  }

  .raseco-header__menu {
    display: flex;
    align-items: center;
    gap: 4.2rem;
  }

  .raseco-header__menu-item {
    position: relative;
  }

  .raseco-header__menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 1.5rem 0;

    color: var(--color-dark);

    font-size: 1.4rem;
    font-weight: 600;

    transition: color var(--transition-fast);
  }

  .raseco-header__menu-link:hover,
  .raseco-header__menu-link--active {
    color: var(--color-primary);
  }

  .raseco-header__menu-link svg {
    width: 1.4rem;
    height: 1.4rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }


  /* Dropdown
  -------------------------------------------------------------------------- */

  .raseco-header__dropdown {
    position: absolute;
    top: calc(100% - 0.2rem);
    left: -1.8rem;

    min-width: 22rem;
    padding: 1rem;

    visibility: hidden;
    opacity: 0;

    background: #ffffff;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-md);

    transform: translateY(0.8rem);

    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast),
      visibility var(--transition-fast);
  }

  .raseco-header__menu-item:hover .raseco-header__dropdown,
  .raseco-header__menu-item:focus-within .raseco-header__dropdown {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);
  }

  .raseco-header__dropdown a {
    display: block;

    padding: 1rem 1.2rem;

    color: var(--color-text);

    border-radius: 0.7rem;

    font-size: 1.4rem;
  }

  .raseco-header__dropdown a:hover {
    color: var(--color-primary);
    background: #f5f8f3;
  }


  /* Mobile
  -------------------------------------------------------------------------- */

  .raseco-header__mobile-menu-button,
  .raseco-header__mobile-search {
    display: none;
  }

  .raseco-mobile-menu[hidden] {
    display: none;
  }


  @media screen and (max-width: 989px) {

    .raseco-header__usp-grid {
      display: flex;
      justify-content: center;
    }

    .raseco-header__usp {
      display: none;
    }

    .raseco-header__usp:first-child {
      display: flex;
    }

    .raseco-header__main-grid {
      grid-template-columns: 4.4rem 1fr auto;
      gap: 1.4rem;

      min-height: 7rem;
    }

    .raseco-header__mobile-menu-button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.45rem;

      width: 4.4rem;
      height: 4.4rem;

      padding: 1rem;

      color: #123d2c;
      background: transparent;

      border: 0;
    }

    .raseco-header__mobile-menu-button span {
      display: block;

      width: 2.2rem;
      height: 2px;

      background: currentColor;

      border-radius: 10rem;
    }

    .raseco-header__logo {
      justify-self: center;
    }

    .raseco-header__logo img {
      max-width: min({{ section.settings.logo_width }}px, 15rem);
    }

    .raseco-header__search,
    .raseco-header__navigation {
      display: none;
    }

    .raseco-header__actions {
      gap: 1.2rem;
    }

    .raseco-header__action > span:last-child {
      display: none;
    }

    .raseco-header__mobile-search {
      display: block;

      padding-bottom: 1.4rem;
    }

    .raseco-header__mobile-search .raseco-header__search-form input {
      height: 4.6rem;
    }

    .raseco-header__mobile-search .raseco-header__search-button {
      height: 4.6rem;
    }


    /* Mobile navigation */

    .raseco-mobile-menu {
      background: #ffffff;

      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .raseco-mobile-menu__list {
      padding: 1rem 0;
    }

    .raseco-mobile-menu__list > li + li {
      border-top: 1px solid var(--color-border);
    }

    .raseco-mobile-menu__link {
      display: block;

      padding: 1.5rem 0;

      color: var(--color-dark);

      font-size: 1.6rem;
      font-weight: 600;
    }

    .raseco-mobile-menu__children {
      padding: 0 0 1.4rem 1.6rem;
    }

    .raseco-mobile-menu__children a {
      display: block;

      padding: 0.8rem 0;

      color: var(--color-text-muted);

      font-size: 1.4rem;
    }

    .raseco-mobile-menu__account {
      padding: 1.6rem 0 2rem;

      border-top: 1px solid var(--color-border);
    }

    .raseco-mobile-menu__account a {
      color: var(--color-dark);

      font-size: 1.5rem;
      font-weight: 600;
    }

  }


  @media screen and (max-width: 749px) {

    .raseco-header__usp-grid {
      min-height: 3.4rem;
    }

    .raseco-header__usp {
      font-size: 1.15rem;
    }

    .raseco-header__main-grid {
      min-height: 6.4rem;
    }

    .raseco-header__logo-name {
      font-size: 2.4rem;
    }

    .raseco-header__logo-tagline {
      font-size: 1.05rem;
    }

    .raseco-header__actions {
      gap: 0.4rem;
    }

    .raseco-header__action {
      width: 4rem;
      height: 4rem;

      justify-content: center;
    }

    .raseco-header__action > svg,
    .raseco-header__cart-icon > svg {
      width: 2.4rem;
      height: 2.4rem;
    }

  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:11) */
/* ==========================================================================

     Raseco Hero

     ========================================================================== */

  .raseco-hero {

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(

      110deg,

      var(--hero-bg) 0%,

      var(--hero-bg) 55%,

      #f7f9f4 100%

    );

}

  .raseco-hero__inner {

  display: grid;

  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

  align-items: center;

  gap: clamp(4rem, 6vw, 8rem);

  min-height: 0;

  padding: 4rem 0;

}

  /* ==========================================================================

     Content

     ========================================================================== */

  .raseco-hero__content {

    position: relative;

    z-index: 2;

    max-width: 58rem;

  }

  /* Eyebrow

  -------------------------------------------------------------------------- */

  .raseco-hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 0.8rem;

    margin-bottom: 2rem;

    padding: 0.7rem 1.2rem;

    color: var(--hero-accent);

    background: rgba(46, 125, 50, 0.08);

    border-radius: 99rem;

    font-size: 1.3rem;

    font-weight: 700;

    letter-spacing: 0.02em;

  }

  .raseco-hero__eyebrow-icon {

    display: inline-flex;

  }

  .raseco-hero__eyebrow svg {

    width: 1.7rem;

    height: 1.7rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

  }

  /* Heading

  -------------------------------------------------------------------------- */

  .raseco-hero__heading {

    max-width: 58rem;

    margin: 0;

    color: var(--hero-text);

    font-size: clamp(4.6rem, 5.2vw, 7rem);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.055em;

  }

  /* Text

  -------------------------------------------------------------------------- */

  .raseco-hero__text {

    max-width: 51rem;

    margin-top: 2.6rem;

    color: #58645c;

    font-size: 1.75rem;

    line-height: 1.65;

  }

  .raseco-hero__text p {

    margin: 0;

  }

  /* ==========================================================================

     Buttons

     ========================================================================== */

  .raseco-hero__buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 1.2rem;

    margin-top: 3.2rem;

  }

  .raseco-hero__button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    min-height: 5.2rem;

    padding: 0 2.3rem;

    border: 1px solid transparent;

    border-radius: 1rem;

    font-size: 1.45rem;

    font-weight: 700;

    transition:

      background var(--transition-fast),

      color var(--transition-fast),

      border-color var(--transition-fast),

      transform var(--transition-fast);

  }

  .raseco-hero__button:hover {

    transform: translateY(-1px);

  }

  .raseco-hero__button svg {

    width: 1.8rem;

    height: 1.8rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

  }

  .raseco-hero__button--primary {

    color: #ffffff;

    background: #123d2c;

  }

  .raseco-hero__button--primary:hover {

    color: #ffffff;

    background: var(--hero-accent);

  }

  .raseco-hero__button--secondary {

    color: #123d2c;

    background: transparent;

    border-color: #aebbb2;

  }

  .raseco-hero__button--secondary:hover {

    color: #123d2c;

    background: rgba(255, 255, 255, 0.5);

    border-color: #7d9082;

  }

  /* ==========================================================================

     Trust points

     ========================================================================== */

  .raseco-hero__trust {

    display: flex;

    flex-wrap: wrap;

    gap: 1.6rem 2.4rem;

    margin-top: 3rem;

  }

  .raseco-hero__trust-item {

    display: flex;

    align-items: center;

    gap: 0.7rem;

    color: #68756c;

    font-size: 1.3rem;

    font-weight: 600;

  }

  .raseco-hero__check {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    color: #ffffff;

    background: var(--hero-accent);

    border-radius: 50%;

  }

  .raseco-hero__check svg {

    width: 1.2rem;

    height: 1.2rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.4;

    stroke-linecap: round;

    stroke-linejoin: round;

  }

  /* ==========================================================================

     Visual

     ========================================================================== */

  .raseco-hero__visual {

    position: relative;

    min-width: 0;

  }

  .raseco-hero__image-wrapper {

  position: relative;

  z-index: 1;

  overflow: hidden;

  width: var(--hero-image-width);

  height: var(--hero-image-height);

  margin-left: auto;

  margin-right: auto;

  background: #ffffff;

  border: 1px solid rgba(18, 61, 44, 0.08);

  border-radius: 2.4rem;

  box-shadow:

    0 1.5rem 4rem rgba(18, 61, 44, 0.08);

}

.raseco-hero__image {

  display: block;

  width: 100%;

  height: 100%;

  border-radius: inherit;

}

/* ================================================================

   OPVULLEN

   Vult het hele vlak. Er kan een deel van de foto worden afgesneden.

   ================================================================ */

.raseco-hero__image--cover {

  object-fit: cover;

  object-position: center;

}

/* ================================================================

   PASSEND

   De volledige afbeelding blijft zichtbaar.

   Er kan lege ruimte rondom ontstaan.

   ================================================================ */

.raseco-hero__image--contain {

  object-fit: contain;

  object-position: center;

}

/* ================================================================

   ORIGINELE VERHOUDING

   Afbeelding behoudt zijn eigen verhouding.

   ================================================================ */

.raseco-hero__image--natural {

  width: 100%;

  height: auto;

  max-height: 100%;

  object-fit: contain;

  object-position: center;

}

  /* Decorative glow */

  .raseco-hero__visual::before {

  display: none;

}

.raseco-hero__image-wrapper {

  position: relative;

  z-index: 1;

  overflow: hidden;

  aspect-ratio: 1.22 / 1;

  background: #ffffff;

  border: 1px solid rgba(18, 61, 44, 0.08);

  border-radius: 2.4rem;

  box-shadow:

    0 2rem 5rem rgba(18, 61, 44, 0.10);

}

  /* Image badge

  -------------------------------------------------------------------------- */

  .raseco-hero__image-badge {

    position: absolute;

    bottom: 2rem;

    left: 2rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    max-width: calc(100% - 4rem);

    padding: 1rem 1.4rem;

    color: #123d2c;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 1rem;

    box-shadow: 0 8px 30px rgba(18, 61, 44, 0.12);

    backdrop-filter: blur(8px);

    font-size: 1.3rem;

    font-weight: 700;

  }

  .raseco-hero__image-badge-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 3.2rem;

    height: 3.2rem;

    color: #ffffff;

    background: var(--hero-accent);

    border-radius: 50%;

  }

  .raseco-hero__image-badge svg {

    width: 1.8rem;

    height: 1.8rem;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

  }

  /* ==========================================================================

     Placeholder

     ========================================================================== */

  .raseco-hero__placeholder {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    aspect-ratio: 1.22 / 1;

    background:

      linear-gradient(

        135deg,

        #e4eee1 0%,

        #f3f6ee 100%

      );

    border-radius: 2.4rem;

  }

  .raseco-hero__placeholder-circle {

    position: absolute;

    width: 38rem;

    height: 38rem;

    background: rgba(124, 179, 66, 0.12);

    border-radius: 50%;

  }

  .raseco-hero__placeholder-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.6rem;

    color: #718077;

    font-size: 1.35rem;

    font-weight: 600;

    text-align: center;

  }

  .raseco-hero__placeholder-content svg {

    width: 14rem;

    height: 14rem;

    fill: none;

    stroke: #6f8e76;

    stroke-width: 2;

  }

  /* ==========================================================================

     Tablet

     ========================================================================== */

  @media screen and (max-width: 989px) {

  .raseco-hero__inner {

    grid-template-columns: 1fr;

    gap: 3rem;

    min-height: auto;

    padding: 4rem 0;

  }

  .raseco-hero__image-wrapper {

    height: auto;

    aspect-ratio: 16 / 9;

  }

    .raseco-hero__content {

      max-width: 68rem;

    }

    .raseco-hero__heading {

  max-width: 58rem;

  margin: 0;

  color: var(--hero-text);

  font-size: clamp(4.2rem, 4.5vw, 6rem);

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.05em;

}

    .raseco-hero__visual {

      max-width: 75rem;

    }

  }

  /* ==========================================================================

     Mobile

     ========================================================================== */

  @media screen and (max-width: 749px) {

    .raseco-hero__inner {

  gap: 2.8rem;

  padding: 3.2rem 0;

}

    .raseco-hero__eyebrow {

      margin-bottom: 1.6rem;

      font-size: 1.15rem;

    }

    .raseco-hero__heading {

      font-size: clamp(4rem, 13vw, 5.3rem);

      line-height: 1;

    }

    .raseco-hero__text {

  max-width: 51rem;

  margin-top: 1.8rem;

    }

    .raseco-hero__buttons {

      flex-direction: column;

      margin-top: 3.2rem;

    }

    .raseco-hero__button {

      width: 100%;

    }

    .raseco-hero__trust {

      flex-direction: column;

      gap: 1rem;

      margin-top: 2rem;

    }

    .raseco-hero__image-wrapper,

    .raseco-hero__placeholder {

      aspect-ratio: 1 / 0.9;

      border-radius: 1.6rem;

    }

    .raseco-hero__image-badge {

      right: 1.4rem;

      bottom: 1.4rem;

      left: 1.4rem;

      max-width: none;

    }

  }

  .raseco-hero--stretch-image .raseco-hero__image {

  width: 100%;

  height: 100%;

  object-fit: fill;

}

/* ==========================================================================

   AFBEELDINGSMODUS

   ========================================================================== */

.raseco-hero {

  isolation: isolate;

}

/* Normale modus: afbeelding rechts */

.raseco-hero--image-side .raseco-hero__visual {

  display: block;

}

/* Achtergrondmodus */

.raseco-hero--image-background {

  min-height: 54rem;

}

.raseco-hero--image-background .raseco-hero__inner {

  position: relative;

  z-index: 4;

  grid-template-columns: minmax(0, 62rem);

  justify-content: start;

  min-height: 54rem;

}

.raseco-hero--image-background .raseco-hero__visual {

  display: none;

}

.raseco-hero__background-image {

  position: absolute;

  inset: 0;

  z-index: 0;

}

.raseco-hero__background-img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}

/* Verloop zodat tekst altijd leesbaar blijft */

.raseco-hero__background-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(

      90deg,

      rgba(250, 250, 247, 0.97) 0%,

      rgba(250, 250, 247, 0.92) 30%,

      rgba(250, 250, 247, 0.60) 52%,

      rgba(250, 250, 247, 0.12) 75%,

      rgba(250, 250, 247, 0.02) 100%

    );

}

/* ==========================================================================

   HERO AFBEELDINGSMODUS

   ========================================================================== */

.raseco-hero {

  position: relative;

  isolation: isolate;

  overflow: hidden;

}

/* ==========================================================================

   NORMALE AFBEELDING RECHTS

   ========================================================================== */

.raseco-hero--image-side .raseco-hero__visual {

  display: block;

}

/* ==========================================================================

   AFBEELDING OVER VOLLEDIGE ACHTERGROND

   ========================================================================== */

.raseco-hero--image-background {

  background-image:

    linear-gradient(

      90deg,

      rgba(250, 250, 247, 0.98) 0%,

      rgba(250, 250, 247, 0.94) 30%,

      rgba(250, 250, 247, 0.68) 48%,

      rgba(250, 250, 247, 0.18) 68%,

      rgba(250, 250, 247, 0.02) 100%

    ),

    var(--hero-background-image);

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}

.raseco-hero--image-background .raseco-hero__inner {

  position: relative;

  z-index: 3;

  grid-template-columns: minmax(0, 58rem);

  justify-content: start;

  min-height: 54rem;

}

.raseco-hero--image-background .raseco-hero__visual {

  display: none;

}

/* ==========================================================================

   DIERENDAG BASIS

   ========================================================================== */

.raseco-hero--dierendag:not(.raseco-hero--image-background) {

  background:

    radial-gradient(

      circle at 80% 20%,

      rgba(210, 163, 105, 0.16),

      transparent 32%

    ),

    linear-gradient(

      110deg,

      #fffaf0 0%,

      #fbf2df 55%,

      #f6e4c9 100%

    );

}

/* Dierendag + achtergrondfoto */

.raseco-hero--dierendag.raseco-hero--image-background {

  background-image:

    linear-gradient(

      90deg,

      rgba(255, 250, 240, 0.98) 0%,

      rgba(255, 248, 235, 0.94) 30%,

      rgba(255, 244, 224, 0.70) 48%,

      rgba(255, 239, 211, 0.18) 68%,

      rgba(255, 239, 211, 0.02) 100%

    ),

    var(--hero-background-image);

}

/* ==========================================================================

   DIERENDAG DECORATIES

   ========================================================================== */

.raseco-hero__dierendag-decoration {

  position: absolute;

  inset: 0;

  z-index: 2;

  overflow: hidden;

  pointer-events: none;

  user-select: none;

}

.raseco-hero--dierendag .raseco-hero__content,

.raseco-hero--dierendag .raseco-hero__visual {

  position: relative;

  z-index: 4;

}

/* ==========================================================================

   POOTJES

   ========================================================================== */

.dd-paw {
  position: absolute;
  display: block;
  line-height: 1;
  opacity: 0.22;
  transform-origin: center;
}

.dd-paw--1 {

  top: 5%;

  left: 2%;

  font-size: 3rem;

  transform: rotate(-20deg);

}

.dd-paw--2 {

  top: 12%;

  left: 38%;

  font-size: 6.5rem;

  transform: rotate(18deg);

}

.dd-paw--3 {

  top: 6%;

  right: 5%;

  font-size: 4rem;

  transform: rotate(-12deg);

}

.dd-paw--4 {

  top: 44%;

  left: 48%;

  font-size: 3.8rem;

  transform: rotate(25deg);

}

.dd-paw--5 {

  right: 27%;

  bottom: 6%;

  font-size: 7rem;

  transform: rotate(-18deg);

}

.dd-paw--6 {

  bottom: 12%;

  left: 3%;

  font-size: 4.5rem;

  transform: rotate(15deg);

}

.dd-paw--7 {

  top: 46%;

  right: 2%;

  font-size: 3rem;

  transform: rotate(24deg);

}

/* ==========================================================================

   HARTJES

   ========================================================================== */

.dd-heart {
  position: absolute;
  display: block;
  color: #2e7d32;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 1;
  opacity: 0.30;
  transform-origin: center;
}

.dd-heart--1 {

  top: 8%;

  left: 27%;

  font-size: 7rem;

  transform: rotate(-12deg);

}

.dd-heart--2 {

  top: 28%;

  right: 28%;

  font-size: 4rem;

  transform: rotate(14deg);

}

.dd-heart--3 {

  right: 4%;

  bottom: 8%;

  font-size: 8rem;

  transform: rotate(-18deg);

}

.dd-heart--4 {

  bottom: 5%;

  left: 37%;

  font-size: 4.5rem;

  transform: rotate(12deg);

}

.dd-heart--5 {

  top: 52%;

  left: 1%;

  font-size: 5.5rem;

  transform: rotate(-20deg);

}

/* ==========================================================================

   MOBILE

   ========================================================================== */

@media screen and (max-width: 749px) {

  .raseco-hero--image-background {

    background-position: 65% center;

  }

  .raseco-hero--image-background .raseco-hero__inner {

    min-height: 62rem;

    align-items: flex-end;

    padding-top: 20rem;

    padding-bottom: 3rem;

  }

  .raseco-hero--image-background .raseco-hero__content {

    padding: 2.2rem;

    background: rgba(255, 250, 240, 0.90);

    border-radius: 1.6rem;

    backdrop-filter: blur(5px);

  }

  .raseco-hero--dierendag.raseco-hero--image-background {

    background-image:

      linear-gradient(

        180deg,

        rgba(255, 250, 240, 0.02) 0%,

        rgba(255, 250, 240, 0.08) 30%,

        rgba(255, 250, 240, 0.72) 58%,

        rgba(255, 250, 240, 0.98) 82%,

        #fffaf0 100%

      ),

      var(--hero-background-image);

  }

  .dd-paw--2 {

    font-size: 4.5rem;

  }

  .dd-paw--5 {

    font-size: 5rem;

  }

  .dd-heart--1 {

    font-size: 5rem;

  }

  .dd-heart--3 {

    font-size: 5.5rem;

  }

}
/* END_SECTION:hero */