/* LieMo RS-60 plugin: styles for the unmodified liemo theme. Generated by tools/build_plugin.py
   from liemo/assets/css/style.css (section "RS-60"): do not edit. */

/* Menu: "Producten" is also highlighted on its child pages (WordPress: current-page-ancestor). */
.primary-nav .current-page-ancestor > a {
  color: var(--c-primary); font-weight: 600;
}
.primary-nav .current-page-ancestor > a::before { transform: scaleX(1); }

/* -------- RS-60 (home card, products page) -------- */

.product-card--feature { grid-column: 1 / -1; flex-direction: row; }

.product-card--feature .product-media { flex: 0 0 52%; aspect-ratio: 16/10; background: var(--grad-hero); }

.product-card--feature .product-media img { object-fit: cover; object-position: 50% 30%; padding: 0; }

.product-card--feature .product-media::after { display: none; }

.product-card--feature .product-tag { background: var(--grad-accent); color: #fff; }

.product-card--feature .product-body { padding: clamp(24px, 4vw, 44px); justify-content: center; }

.product-card--feature .product-body h3 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 700; }

.product-card--feature .product-body p { flex: 0 0 auto; font-size: 1rem; }

.product-card--feature .product-foot { flex-wrap: wrap; gap: 8px 16px; }

.product-card--feature .product-foot .link { white-space: nowrap; }



/* The photo fills the right of the card and fades into it, so it has no edge of its own. */

.rs60-feature {

  --rs60-pad: clamp(28px, 5vw, 54px);

  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

  align-items: center; min-height: 440px;

  margin-bottom: 36px; padding: var(--rs60-pad);

  border-radius: var(--radius-lg); background: var(--grad-hero); color: #fff;

  box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate;

}

.rs60-feature::before {

  content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;

  background: var(--grad-accent);

}

.rs60-feature__copy { position: relative; z-index: 1; }

.rs60-feature h2 {

  color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700;

  letter-spacing: -.03em; margin: 0 0 10px;

}

.rs60-feature__lead { font-size: 1.15rem; color: rgba(255,255,255,.82); margin: 0 0 22px; max-width: 34ch; }

.rs60-feature .check-list li { color: rgba(255,255,255,.82); }

.rs60-feature__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.rs60-feature__media {

  position: absolute; top: 0; right: 0; bottom: 0; width: 60%;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);

          mask-image: linear-gradient(to right, transparent, #000 40%);

}

.rs60-feature__media img {

  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;

  transition: transform .8s var(--ease);

}

.rs60-feature__media:hover img { transform: scale(1.03); }



.product-jumpnav .product-jumpnav__new { gap: 8px; background: var(--c-primary); color: #fff; }

.product-jumpnav .product-jumpnav__new:hover { background: var(--c-primary-2); }

.product-jumpnav__new span {

  padding: 2px 8px; border-radius: 999px; background: var(--grad-accent);

  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;

}



/* Products page: a lower page header, so the RS-60 block below it already shows on the first screen.

   Phones keep the compact header they have (the media queries further down). */

@media (min-width: 761px) {

  .page-producten .page-hero { padding: 170px 0 100px; }

  .page-producten .page-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); }

  .page-producten .product-catalog { padding-top: 64px; }

}



@media (max-width: 760px) {

  .product-card--feature { flex-direction: column; }

  .product-card--feature .product-media { flex: none; }

  .rs60-feature { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }

  .rs60-feature__media {

    position: relative; order: -1; width: auto; aspect-ratio: 16/10;

    margin: 0 calc(-1 * var(--rs60-pad)) 4px;

    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);

            mask-image: linear-gradient(to bottom, #000 55%, transparent);

  }

}