/* IDT Elements — chrome and homepage, ported from idtelements.no.
   Measurements follow the Magento/Magezon page: 1440px frame, 12px outer
   gutter, 24px gutters between cards, 12px radii, GT Planar Light body with
   stylistic set 02. Every rule is prefixed `.ks-themed .ie-…`, so it never
   meets the kd-* rules in theme.css (which loads after this file). */

body {
  margin: 0;
}
/* Doubled class: theme.css loads after this file and sets its own base
   line-height and weight on .ks-themed. */
.ks-themed.ks-themed {
  background: var(--ie-bg);
  color: var(--ie-ink);
  font-family: var(--ie-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.32px;
  font-feature-settings: 'ss02';
  /* The default theme antialiases, which thins white-on-dark GT Planar
     against idtelements.no; keep the browser's own smoothing. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.ks-themed .ie-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 12px;
}

.ks-themed .ie-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ── Header ─────────────────────────────────────────────────────────── */

/* idtelements.no paints the header transparent (`.page-header
   {background-color:transparent}`): it sits on the page, not in a band.
   Only a sticky header needs its own background, so content cannot show
   through while it is pinned. */
.ks-themed .ie-header {
  position: relative;
  z-index: 40;
  background: transparent;
}
.ks-themed .ie-header.ie-sticky {
  position: sticky;
  top: 0;
  background: var(--ie-bg);
}
/* idtelements.no's header is a flex row inside 10px/12px padding: the logo
   column shrinks from a basis of a third (28% between 981 and 1081px), the
   nav from a 717px basis, wrapping into centred 47px rows when it must; the
   account and cart icons sit in a fixed 81x34 box on the right. */
.ks-themed .ie-header-row {
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 10px;
  margin-bottom: 2px;
}
.ks-themed .ie-brand-col {
  flex: 0 1 33.333%;
  min-width: 0;
}
.ks-themed .ie-brand {
  display: flex;
  align-items: center;
  width: 150px;
  height: 25px;
  padding-left: 7px;
  color: var(--ie-ink);
}
.ks-themed .ie-brand .ie-logo-svg {
  display: block;
  height: 25px;
  width: auto;
}
.ks-themed .ie-brand:hover .ie-logo-svg path {
  fill: var(--ie-blue);
}
.ks-themed .ie-nav {
  flex: 0 1 717px;
  min-width: 0;
  margin-left: -10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ks-themed .ie-nav a {
  padding: 0 12px;
  color: #000;
  font-weight: 300;
  line-height: 47px;
  text-decoration: none;
  white-space: nowrap;
}
.ks-themed .ie-nav a span {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.ks-themed .ie-nav a:hover span,
.ks-themed .ie-nav a[aria-current='page'] span {
  border-bottom-color: #ccc;
}
.ks-themed .ie-header-actions {
  position: relative;
  flex: none;
  width: 81px;
  height: 34px;
  margin-left: auto;
}
.ks-themed .ie-header-actions .ie-account {
  position: absolute;
  left: 20px;
  top: 6px;
}
.ks-themed .ie-header-actions .ie-cart {
  position: absolute;
  left: 60px;
  top: 4px;
}
.ks-themed .ie-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ie-ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.ks-themed .ie-icon-link .ie-icon {
  width: 20px;
  height: 20px;
}
.ks-themed .ie-cart .ie-icon {
  width: 21px;
  height: 23px;
}
.ks-themed .ie-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ie-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

/* Phone drawer — hidden on desktop. */
.ks-themed .ie-mobile-nav {
  display: none;
}
.ks-themed .ie-mobile-nav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  padding: 4px;
  color: var(--ie-ink);
}
.ks-themed .ie-mobile-nav > summary::-webkit-details-marker {
  display: none;
}
.ks-themed .ie-mobile-nav .ie-icon {
  width: 24px;
  height: 24px;
}
.ks-themed .ie-mobile-nav .ie-close,
.ks-themed .ie-mobile-nav[open] .ie-burger {
  display: none;
}
.ks-themed .ie-mobile-nav[open] .ie-close {
  display: block;
}
.ks-themed .ie-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 20px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(40, 38, 37, 0.12);
}
.ks-themed .ie-drawer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ie-line);
  color: #000;
  font-weight: 300;
  text-decoration: none;
}
.ks-themed .ie-drawer a:last-child {
  border-bottom: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.ks-themed .ie-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 8px 10px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.ks-themed .ie-pill .ie-icon path {
  fill: currentColor;
}
.ks-themed .ie-pill-blue {
  background: var(--ie-blue);
  color: #fff;
}
.ks-themed .ie-pill-blue:hover {
  background: var(--ie-pill);
  color: #000;
}
.ks-themed .ie-pill-grey {
  background: var(--ie-pill);
  color: #000;
}
.ks-themed .ie-pill-grey:hover {
  background: var(--ie-blue);
  color: #fff;
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.ks-themed .ie-rule {
  margin: 0 0 7px;
  border: 0;
  border-top: 1px solid #d0cecc;
}
.ks-themed .ie-rule-gap {
  margin-top: 64px;
}
.ks-themed .ie-hero-grid {
  display: grid;
  grid-template-columns: calc((100% + 24px) / 3 - 12px) 1fr;
  align-items: stretch;
}
.ks-themed .ie-hero-copy {
  display: flex;
  flex-direction: column;
  padding: 372px 22px 8px 0;
}
.ks-themed .ie-hero-title {
  margin: 0;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.72px;
  color: #000;
}
.ks-themed .ie-hero-text {
  margin: 0;
  color: var(--ie-ink);
  line-height: 1.25;
}
.ks-themed .ie-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  margin-top: auto;
  /* idtelements.no's button row ignores the column's right padding. */
  margin-right: -22px;
  padding-top: 24px;
}
.ks-themed .ie-hero-media {
  position: relative;
  min-height: 814px;
  margin-right: 4px;
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #dcd9d6;
}
.ks-themed .ie-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ks-themed .ie-tag {
  position: absolute;
  left: calc(538px + (100% - 538px) / 2);
  top: 480px;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 7px;
  line-height: normal;
  padding: 8px 16px;
  border-radius: 20px;
  background: #fff;
  color: #000;
  font-weight: 300;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.ks-themed .ie-tag span {
  font-weight: 300;
}
.ks-themed .ie-tag:hover {
  background: var(--ie-blue);
  color: #fff;
}

/* ── Product-line cards ─────────────────────────────────────────────── */

.ks-themed .ie-lines {
  margin-top: 12px;
}
.ks-themed .ie-lines-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.ks-themed .ie-line {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border-radius: 12px;
  background: #fff;
  color: #77726c;
  text-decoration: none;
}
.ks-themed .ie-line-wide {
  grid-column: span 2;
}
.ks-themed .ie-line-title {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.72px;
  color: #77726c;
  margin-bottom: 52px;
  transition: color 0.15s;
}
.ks-themed .ie-line-title span {
  color: var(--ie-ink);
  margin-right: 3px;
  transition: color 0.15s;
}
.ks-themed .ie-line:hover .ie-line-title,
.ks-themed .ie-line:hover .ie-line-title span {
  color: var(--ie-blue);
}
.ks-themed .ie-line-media {
  position: relative;
  margin: 0 0 45px;
}
.ks-themed .ie-line-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 0.2s;
}
.ks-themed .ie-line-img-hover {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}
.ks-themed .ie-line-has-hover:hover .ie-line-img:not(.ie-line-img-hover) {
  opacity: 0;
}
.ks-themed .ie-line-has-hover:hover .ie-line-img-hover {
  opacity: 1;
}
.ks-themed .ie-line-text {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: #77726c;
  letter-spacing: -0.32px;
  margin-bottom: 10px;
}

/* ── "Tegn ditt rekkverk" panel ─────────────────────────────────────── */

.ks-themed .ie-draw {
  margin-top: 22px;
}
.ks-themed .ie-draw-panel {
  position: relative;
  display: grid;
  grid-template-columns: 33.333% 1fr;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ie-ink);
  color: #fff;
}
.ks-themed .ie-draw-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
}
.ks-themed .ie-draw-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.72px;
  color: #fff;
  margin-bottom: 165px;
}
.ks-themed .ie-draw-steps {
  counter-reset: ie-step;
  list-style: none;
  align-self: stretch;
  margin: 0 44px 38px 0;
  padding: 0;
  font-weight: 300;
}
.ks-themed .ie-draw-steps li {
  counter-increment: ie-step;
  position: relative;
  padding-left: 26px;
  line-height: 20px;
  margin-bottom: 10px;
}
.ks-themed .ie-draw-steps li:last-child {
  margin-bottom: 0;
}
.ks-themed .ie-draw-steps li::before {
  content: counter(ie-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  color: #272625;
  font: 700 12px/18px sans-serif;
  letter-spacing: 0;
  text-align: center;
}
.ks-themed .ie-draw .ie-pill-blue:hover {
  background: #ebebeb;
}
.ks-themed .ie-draw-media {
  /* idtelements.no paints the drawing as a cover/centre-bottom background
     of the right-hand column, which starts a third in and runs 8px past
     the panel's padding box. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% + 24px) / 3);
  right: -8px;
}
.ks-themed .ie-draw-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* ── Why IDT Elements ───────────────────────────────────────────────── */

.ks-themed .ie-why {
  padding: 84px 0 96px;
}
.ks-themed .ie-why-title,
.ks-themed .ie-why-num,
.ks-themed .ie-why-name {
  margin: 0;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.72px;
  color: #000;
}
.ks-themed .ie-why-title {
  padding-left: calc(100% / 3 + 8px);
  margin-bottom: 15px;
}
/* Magezon floats: number 33.3% + 8px, then 60% split 5/12 : 6/12 (≥992);
   below that 20% + 8px + 80% no longer fits, so the number takes its own
   line and the 80% holds title and points. */
.ks-themed .ie-why-row {
  display: grid;
  grid-template-columns: calc(100% / 3 + 8px) 25% 30% 1fr;
  padding: 12px 0 59px;
  border-top: 1px solid #d0cecc;
}
.ks-themed .ie-why-row:last-of-type {
  padding-bottom: 0;
}
.ks-themed .ie-why-points {
  margin: 0;
  color: var(--ie-ink);
  line-height: 20px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.ks-themed .ie-footer {
  border-top: 112px solid #f4f4f4;
  background: var(--ie-footer);
  color: #fff;
  padding: 69px 0 27px;
}
.ks-themed .ie-footer-grid {
  display: grid;
  grid-template-columns: calc((100% + 24px) / 3 - 9px) calc((100% + 24px) / 3 - 4px) 1fr;
}
.ks-themed .ie-footer-brand {
  margin-left: -2px;
}
.ks-themed .ie-footer-brand .ie-logo-svg {
  display: block;
  width: 163px;
  height: auto;
}
.ks-themed .ie-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-themed .ie-footer-links li {
  line-height: 20px;
  margin-bottom: 10px;
}
.ks-themed .ie-footer a {
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}
.ks-themed .ie-footer a:hover {
  text-decoration: underline;
}
.ks-themed .ie-footer-pay {
  grid-column: 2 / span 2;
  margin-top: 42px;
  padding-left: 1px;
}
.ks-themed .ie-payment-logos {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.ks-themed .ie-payment-logos svg {
  display: block;
}
.ks-themed .ie-footer-cookie {
  grid-column: 2 / span 2;
  margin-top: 16px;
}
.ks-themed .ie-footer-cookie-btn {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Breakpoints (idtelements.no: 1199 / 1081 / 991 / 980 / 767 / 575) ── */

@media (max-width: 1199px) {
  .ks-themed .ie-tag {
    left: calc(440px + (100% - 440px) / 2);
  }
}

@media (min-width: 981px) and (max-width: 1081px) {
  .ks-themed .ie-brand-col {
    flex-basis: 28%;
  }
}

@media (max-width: 991px) {
  .ks-themed .ie-hero-copy {
    padding-top: 348px;
  }
  .ks-themed .ie-hero-media {
    min-height: 794px;
  }
  .ks-themed .ie-tag {
    left: calc(280px + (100% - 280px) / 2);
  }
  .ks-themed .ie-line {
    padding: 20px 20px 18px;
  }
  .ks-themed .ie-why-row {
    grid-template-columns: calc(80% * 5 / 12) calc(80% * 6 / 12) 1fr;
  }
  .ks-themed .ie-why-num {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .ks-themed .ie-header-row {
    display: block;
    position: relative;
    height: 63px;
    padding: 0;
    margin: 0;
  }
  .ks-themed .ie-brand-col {
    position: absolute;
    left: 10px;
    top: 18px;
  }
  .ks-themed .ie-nav,
  .ks-themed .ie-account {
    display: none;
  }
  .ks-themed .ie-mobile-nav {
    display: block;
    position: absolute;
    top: 22px;
    right: 60px;
  }
  .ks-themed .ie-mobile-nav > summary {
    padding: 0;
  }
  .ks-themed .ie-mobile-nav .ie-icon {
    width: 17px;
    height: 20px;
  }
  .ks-themed .ie-drawer {
    position: fixed;
    top: 63px;
  }
  .ks-themed .ie-header-actions {
    position: absolute;
    right: 12px;
    top: 21px;
    width: 21px;
    height: 23px;
  }
  .ks-themed .ie-header-actions .ie-cart {
    left: 0;
    top: 0;
  }
  .ks-themed .ie-hero-actions .ie-pill-blue,
  .ks-themed .ie-draw .ie-pill {
    margin-bottom: 8px;
  }
  .ks-themed .ie-hero-actions {
    row-gap: 4px;
  }
}

/* Exactly 768px: Magento's own (max-width: 768px) rules land on top of the
   tablet layout — a taller header with the logo offset for the menu button,
   stacked card titles, and the 12px card grid pulled 6px outwards. */
@media (min-width: 768px) and (max-width: 768px) {
  .ks-themed .ie-header-row {
    height: 69px;
  }
  .ks-themed .ie-brand-col {
    left: 54px;
    top: 21.5px;
  }
  .ks-themed .ie-drawer {
    top: 69px;
  }
  .ks-themed .ie-lines {
    margin-top: 6px;
  }
  .ks-themed .ie-lines-grid {
    gap: 12px;
    margin: 0 -6px;
  }
  .ks-themed .ie-line-title {
    font-size: 16px;
  }
  .ks-themed .ie-line-title span {
    display: block;
  }
  .ks-themed .ie-draw {
    margin-top: 16px;
  }
  .ks-themed .ie-why {
    padding-bottom: 123px;
  }
  .ks-themed .ie-why-title,
  .ks-themed .ie-why-num,
  .ks-themed .ie-why-name {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .ks-themed .ie-header-row {
    height: 52px;
  }
  .ks-themed .ie-brand-col {
    left: 12px;
    top: 17.5px;
  }
  .ks-themed .ie-drawer {
    top: 52px;
  }
  .ks-themed .ie-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-themed .ie-hero-media {
    order: -1;
    min-height: 482px;
    margin: 24px -1px 12px 0;
  }
  .ks-themed .ie-tag {
    top: 200px;
  }
  .ks-themed .ie-hero-copy {
    padding: 0 10px 16px 0;
  }
  .ks-themed .ie-hero-copy .ie-rule {
    display: none;
  }
  .ks-themed .ie-hero-title {
    margin-bottom: 24px;
  }
  .ks-themed .ie-hero-actions {
    margin-top: 0;
    padding-top: 30px;
  }
  .ks-themed .ie-hero-actions .ie-pill-blue,
  .ks-themed .ie-draw .ie-pill {
    margin-bottom: 0;
  }
  .ks-themed .ie-lines {
    margin-top: 46px;
  }
  .ks-themed .ie-lines-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ks-themed .ie-line-wide {
    grid-column: span 1;
  }
  .ks-themed .ie-line-wide:first-child {
    grid-column: span 2;
  }
  .ks-themed .ie-line-title {
    font-size: 16px;
    margin-bottom: 18px;
  }
  .ks-themed .ie-line-title span {
    display: block;
  }
  .ks-themed .ie-line-media {
    margin-bottom: 27px;
  }
  .ks-themed .ie-draw {
    margin-top: 16px;
  }
  .ks-themed .ie-draw-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-themed .ie-draw-copy {
    padding: 32px 32px 33px;
  }
  .ks-themed .ie-draw-title {
    margin-bottom: 59px;
  }
  .ks-themed .ie-draw-media {
    display: none;
  }
  .ks-themed .ie-why {
    padding: 116px 0 123px;
  }
  .ks-themed .ie-why-title {
    padding-left: 0;
    font-size: 24px;
    line-height: 1.05;
  }
  .ks-themed .ie-why-row {
    grid-template-columns: minmax(0, 80%);
  }
  .ks-themed .ie-why-num,
  .ks-themed .ie-why-name {
    font-size: 24px;
    line-height: 1.05;
  }
  .ks-themed .ie-why-points {
    padding-top: 20px;
  }
  .ks-themed .ie-footer {
    padding: 37px 0 25px;
  }
  .ks-themed .ie-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-themed .ie-footer-brand {
    margin: 0 0 19px -2px;
  }
  .ks-themed .ie-footer-links:nth-of-type(1) {
    margin-left: -8px;
  }
  .ks-themed .ie-footer-links:nth-of-type(2) {
    margin-left: -2px;
  }
  .ks-themed .ie-footer-pay,
  .ks-themed .ie-footer-cookie {
    grid-column: 1;
  }
  .ks-themed .ie-footer-pay {
    margin-top: 43px;
    padding-left: 0;
    margin-left: -1px;
  }
}

@media (max-width: 575px) {
  .ks-themed .ie-hero-media {
    min-height: 282px;
  }
  .ks-themed .ie-tag {
    top: 100px;
    left: calc(100px + (100% - 100px) / 2);
  }
  .ks-themed .ie-hero-title {
    margin-bottom: 12px;
  }
  .ks-themed .ie-line {
    padding: 15px 15px 13px;
  }
  .ks-themed .ie-draw-title {
    margin-bottom: 47px;
  }
}

/* Between 481 and 767px idtelements.no's payment row is a 30px line of
   inline images, a few pixels taller than the marks themselves. */
@media (min-width: 481px) and (max-width: 767px) {
  .ks-themed .ie-footer {
    padding-bottom: 28px;
  }
}
@media (min-width: 481px) and (max-width: 575px) {
  .ks-themed .ie-footer {
    padding-bottom: 27px;
  }
}

@media (max-width: 480px) {
  /* idtelements.no stacks the marks as inline images, so each line carries
     the font's descender under the logo. */
  .ks-themed .ie-payment-logos {
    display: block;
  }
  .ks-themed .ie-payment-logos li {
    line-height: 1;
    margin-bottom: 10px;
  }
  .ks-themed .ie-payment-logos li:last-child {
    margin-bottom: 0;
  }
  .ks-themed .ie-payment-logos svg {
    display: inline;
    vertical-align: baseline;
  }
}

/* ── Content pages (templateSuffix "landing") ─────────────────────────
   The Magento content pages moved to CMS blocks in IDT-EL-6: Om IDT, Pure,
   Hjelp og montering, Forhandlere … Measured on idtelements.no at 1440px:
   a 1440px frame with 12px gutters on the warm page background, GT Planar
   Light headings in black, 16/20px body in --ie-ink, hairline separators
   and 20px-radius pill buttons. Sizes per heading and image are set on the
   blocks; these rules carry what a block cannot (weight, colour, rhythm). */
.ks-themed main.ks-main:has(.kd-page-body-ie) {
  background: var(--ie-bg);
}
.ks-themed .kd-page-body-ie {
  padding: 0;
  background: var(--ie-bg);
}
.ks-themed .kd-page-body-ie .kd-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 12px 64px;
}
/* The four frames the Magento content pages sit in (measured on idtelements.no
   at 1280px; the header is 69px, so page-main-full-width starts at y69):
   cms      page-layout-cms-full-width: 12px gutters, content from the header edge;
   category page-layout-1column category: 56px under the header, then 10px of
            padding and 22px of gutter, content on x32;
   sidebar  page-layout-2columns-left category: an empty 24.2% left column,
            content from x339 and 178px under the header.
   Each block row brings its own spacing, so these set only the frame. */
.ks-themed .kd-page-body-cms .kd-wrap {
  padding: 0 12px 44px;
}
.ks-themed .kd-page-body-category .kd-wrap {
  padding: 66px 12px 133px;
}
.ks-themed .kd-page-body-sidebar .kd-wrap {
  padding: 178px 20px 65px calc(24.17% + 30px);
}
@media (max-width: 1024px) {
  .ks-themed .kd-page-body-sidebar .kd-wrap {
    padding-left: calc(24.2% + 25px);
  }
}
@media (max-width: 768px) {
  .ks-themed .kd-page-body-category .kd-wrap {
    padding: 10px 10px 28px;
  }
  .ks-themed .kd-page-body-sidebar .kd-wrap {
    padding: 10px 10px 96px;
  }
  .ks-themed .kd-page-body-cms .kd-wrap {
    padding: 0 12px 28px;
  }
}
/* Every top-level CMS block brings its own centred container with 32px of
   vertical padding; on these pages the frame above is the container and the
   page's own spacer blocks set the rhythm. */
.ks-themed .kd-page-body-ie .kd-page-content > div,
.ks-themed .kd-page-body-ie .kd-page-content > div > div {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.ks-themed .kd-page-body-ie .kd-page-content > div {
  padding-top: 0;
  padding-bottom: 0;
}
.ks-themed .kd-page-body-ie .kd-page-content > div > div.my-4 {
  margin-top: 0;
  margin-bottom: 0;
}
/* Content headings are black, except a title the block sets white (text over a photo tile). */
.ks-themed .kd-page-body-ie :is(h1, h2, h3, h4):not(.text-white) {
  color: #000;
}
.ks-themed .kd-page-body-ie h1,
.ks-themed .kd-page-body-ie h2,
.ks-themed .kd-page-body-ie h3,
.ks-themed .kd-page-body-ie h4 {
  font-family: var(--ie-font);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.32px;
}
.ks-themed .kd-page-body-ie p {
  color: var(--ie-ink);
  font-weight: 300;
  line-height: 1.25;
}
.ks-themed .kd-page-body-ie p a {
  color: var(--ie-blue);
  text-decoration: none;
}
.ks-themed .kd-page-body-ie p a:hover {
  text-decoration: underline;
}
.ks-themed .kd-page-body-ie hr {
  max-width: none;
  border-color: #d0cecc;
}
/* Carousel frames carry a tinted tile; on these pages logos and photos sit
   on the page background, as on idtelements.no. */
.ks-themed .kd-page-body-ie figure > .bg-surface-subtle {
  background: transparent;
}
/* Pills keep their natural width and sit to the left (Magezon mont-btn). */
.ks-themed .kd-page-body-ie a.btn.w-full {
  width: auto;
  align-self: flex-start;
}
.ks-themed .kd-page-body-ie .btn {
  border-radius: 20px;
  padding: 8px 16px;
  min-height: 34px;
  font-family: var(--ie-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.15;
  box-shadow: none;
  /* A pill is one line, also in a narrow phone column ("Last ned" broke onto two). */
  white-space: nowrap;
}
/* A titled rule (Magezon separator with a title): black lines flank the title, as on idtelements.no. */
.ks-themed .kd-page-body-ie .cms-block-heading-lines::before,
.ks-themed .kd-page-body-ie .cms-block-heading-lines::after {
  background-color: #000;
}
/* A long word (a domain such as byggmakker.no) breaks in a narrow phone column instead of being cut off. */
.ks-themed .kd-page-body-ie :is(p, h1, h2, h3, h4, a) {
  overflow-wrap: anywhere;
}
/* A page title the Magento page does not show (its page-title-wrapper is display:none) stays in the
   document for search engines and screen readers, visually hidden. */
.ks-themed .kd-page-body-ie .kd-page-content > [data-homepage-contained-block='page-title'],
.ks-themed .kd-page-body-ie .kd-page-content .ks-page-blocks > [data-block-id='page-title'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Gallery rows are separated by a 2px rule inset 10px on both sides (Magezon separator, #e2e0df). */
.ks-themed .kd-page-body-sidebar .kd-page-content hr {
  border-top-width: 2px;
  border-color: #e2e0df;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > div > div.my-4:has(> hr) {
  max-width: none;
  margin: 9px 0;
  padding: 0 10px;
}
/* The inspiration overview: a bento grid of 440x200 photo tiles, 20px apart, square corners, no dimming
   and no button; the title is centred in white and the whole tile is the link (Magezon call to action). */
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full {
  padding: 10px 0;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full > div {
  padding: 0 10px;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full > div > div.hidden {
  gap: 20px;
  grid-template-rows: repeat(3, 200px) !important;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full .rounded-2xl {
  border-radius: 0;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full .rounded-2xl > div {
  align-items: center;
  justify-content: flex-start;
  padding: 46px 20px 0;
  text-align: center;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full h3 {
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.32px;
}
.ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full .btn {
  display: none;
}
@media (max-width: 767px) {
  .ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full > div > .md\:hidden {
    gap: 20px;
  }
  .ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full .md\:hidden .rounded-2xl {
    height: 200px !important;
    min-height: 200px !important;
  }
  .ks-themed .kd-page-body-sidebar .kd-page-content > section.w-full .md\:hidden .rounded-2xl > div {
    padding-top: 32px;
  }
}
.ks-themed .kd-page-body-ie .kd-page-content .ks-page-blocks > [data-block-id='page-title'] + * {
  margin-top: 0;
}
.ks-themed .kd-page-body-sidebar .kd-page-content img {
  border-radius: 0;
}
/* Category-frame pages (Magezon rows): separators sit flush between rows; the title is 48px at every desktop width. */
.ks-themed .kd-page-body-category .kd-page-content .my-4:has(> hr) {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .ks-themed .kd-page-body-category .kd-page-content h1[style*='clamp(32px'],
  .ks-themed .kd-page-body-category .kd-page-content h2[style*='clamp(32px'] {
    font-size: 48px !important;
  }
  /* A row of logo, name and link: an empty 34% column, then three of 22% (Magezon 34/22/22/22). */
  .ks-themed .kd-page-body-category .kd-page-content .grid[style*='--ks-cols:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)']:not(:has(> .rounded-xl)),
  .ks-themed .kd-page-body-category .kd-page-content .grid[style*='--ks-cols:minmax(0, 12fr) minmax(0, 8fr) minmax(0, 8fr) minmax(0, 8fr)'] {
    grid-template-columns: 34% 22% 22% 22% !important;
    column-gap: 0;
  }
  /* The numbered reasons: number, title, text (Magezon 34/25/30). */
  .ks-themed .kd-page-body-category .kd-page-content .grid[style*='--ks-cols:minmax(0, 12fr) minmax(0, 9fr) minmax(0, 11fr) minmax(0, 2fr)'] {
    grid-template-columns: 34% 25% 30% 11% !important;
    column-gap: 0;
  }
}
/* Headings keep the 1.05 line height the Magezon pages use; the block renderer writes 1.3 inline. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) :is(h1, h2, h3, h4) {
  line-height: 1.05 !important;
}
/* Small headings (18px) are the semibold ones on idtelements.no; GT Planar Medium is its closest face. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) :is(h3, h4)[style*='font-size:18px'] {
  font-weight: 500;
}
/* White tiles (Magezon column with a white background): 12px corners, 22/24/20px padding. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .rounded-xl.p-3 {
  padding: 22px 24px 20px;
  border-radius: 12px;
}
/* Tiles sit 24px apart both ways. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .grid:has(> .rounded-xl) {
  gap: 24px;
}
/* Magezon text rows: no gap between a column's blocks, 10px under every paragraph. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .kd-page-content .flex-col.gap-4 {
  gap: 0;
}
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .kd-page-content p {
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  /* Title | text rows (Magezon 1/3 + 2/3, no gutter) and the Kundeservice row. */
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 1fr) minmax(0, 2fr)'] {
    grid-template-columns: 33.05% 66.95% !important;
    column-gap: 0;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr)'] {
    grid-template-columns: 33.05% 37% 29.95% !important;
    column-gap: 0;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr) minmax(0, 3fr)'] {
    grid-template-columns: 33.05% 8.28% 43.55% 15.12% !important;
    column-gap: 0;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 5fr) minmax(0, 9fr) minmax(0, 1fr)'] {
    grid-template-columns: 33.05% 62% 4.95% !important;
    column-gap: 0;
  }
}
/* Inside a white tile the blocks keep their 16px rhythm and the caption is one 16px line. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .kd-page-content .rounded-xl .flex-col.gap-4 {
  gap: 16px;
}
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .kd-page-content .rounded-xl p {
  margin-bottom: 0;
  line-height: 1.15 !important;
}

/* ── Product pages (Pure, Frame, Simple, Alu, Breeze, Protect) on the cms frame ──────────────────────
   Measured on idtelements.no at 1280px. The first section is a white card: 12px corners, 20px above the
   title row, the picture edge to edge, 24px beneath. Its three equal columns hold the title, the lead and
   nothing. The 2/3 text column keeps its lines at two thirds of its width, the buttons sit side by side and
   wrap, and the six feature tiles are 206px squares, 24px apart, with the icon pinned to the foot. */
.ks-themed .kd-page-body-cms .kd-page-content > section {
  padding-top: 20px;
  margin-bottom: var(--ie-card-gap, 25px);
}
.ks-themed .kd-page-body-cms .kd-page-content > section > div {
  padding: 0;
}
.ks-themed .kd-page-body-cms .kd-page-content > section > div > div {
  max-width: none;
  margin: 0;
  padding: 0;
}
.ks-themed .kd-page-body-cms .kd-page-content > section .grid {
  column-gap: 0;
}
@media (min-width: 769px) {
  .ks-themed .kd-page-body-cms .kd-page-content > section .grid[style] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 3fr)'] {
    grid-template-columns: 33.4% 66.6% !important;
    column-gap: 0;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 3fr)'] > :last-child p {
    max-width: 66.5%;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] {
    grid-template-columns: var(--ie-tile-lead, 33.4%) repeat(3, var(--ie-tile-pitch, 18.3%)) !important;
    column-gap: 0;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] > .rounded-xl:not(:first-child) {
    aspect-ratio: 1;
    margin-right: var(--ie-tile-gap, 24px);
    padding: 14px 14px 7px;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] > .rounded-xl:first-child {
    padding: 0;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] > .rounded-xl > .flex-col {
    height: 100%;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] > .rounded-xl figure {
    margin-top: auto;
  }
}
/* The buttons of the lead column sit in a row and wrap (Magezon inline buttons, 8px apart). */
.ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 3fr)'] > :first-child > .flex-col {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 8px;
}
/* Two lines of the card, shown only below 992px (Magezon mgz-hidden-lg). */
@media (min-width: 992px) {
  .ks-themed .kd-page-body-cms .kd-page-content > section > div > div:has([data-block-id='hero-caption-title']),
  .ks-themed .kd-page-body-cms .kd-page-content > section > div > div:has([data-block-id='hero-caption-text']) {
    display: none;
  }
}
/* References: the carousel's arrows sit above the pictures, at the left. */
.ks-themed .kd-page-body-cms .kd-page-content .w-full > div:has(> .mt-6.justify-center) {
  display: flex;
  flex-direction: column;
}
.ks-themed .kd-page-body-cms .kd-page-content .w-full > div > .mt-6.justify-center {
  order: -1;
  justify-content: flex-start;
  margin: 0 0 16px;
  gap: 8px;
}
.ks-themed .kd-page-body-cms .kd-page-content .w-full > div > .mt-6.justify-center .btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px;
}
/* Feature-tile titles are 16px on a 24px line; the caption under them one 20px line. */
.ks-themed .kd-page-body-cms .kd-page-content .rounded-xl h3[style*='font-size:16px'] {
  line-height: 1.5 !important;
}
.ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] .rounded-xl p {
  line-height: 1.25 !important;
}
/* A block with its own margin or padding is wrapped once more; the container inside still drops the 32px. */
.ks-themed :is(.kd-page-body-cms, .kd-page-body-category, .kd-page-body-sidebar) .kd-page-content > div > div.mx-auto {
  padding-top: 0;
  padding-bottom: 0;
}
.ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] .rounded-xl .flex-col.gap-4 {
  gap: 0;
}
/* Frame and Breeze have smaller feature tiles: 184px squares, 20px apart. */
.ks-themed .kd-page-body[data-page='frame'],
.ks-themed .kd-page-body[data-page='breeze'] {
  --ie-tile-lead: 33.2%;
  --ie-tile-pitch: 16.24%;
  --ie-tile-gap: 20px;
}
/* Per page: the gap under the hero card differs (Simple 17px). */
.ks-themed .kd-page-body[data-page='simple'] {
  --ie-card-gap: 17px;
}
.ks-themed .kd-page-body[data-page='alu'] {
  --ie-card-gap: 26px;
}
/* Text pages in three equal columns (title, text, empty): the text column is exactly a third wide. */
@media (min-width: 769px) {
  .ks-themed .kd-page-body[data-page='reklamasjon'] .kd-page-content .grid[style*='--ks-cols:minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr)'],
  .ks-themed .kd-page-body[data-page='kontakt'] .kd-page-content .grid[style*='--ks-cols:minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr)'] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 0;
  }
}
/* 16px headings in text rows sit on a 24px line. */
.ks-themed .kd-page-body-cms h3[style*='font-size:16px'] {
  line-height: 1.5 !important;
}

/* ── Forms on the content pages (Kontakt, Reklamasjon) ──────────────────────────────────────────────
   The Amasty form of idtelements.no: 16px medium labels 8px above 48px fields (#f7f9fb, hairline #eff3f6,
   4px corners, 14px text), 15px between fields and 8px between two in a row, a blue 42px pill to send. */
.ks-themed .kd-page-body-cms form label {
  display: block;
  margin-bottom: 8px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
.ks-themed .kd-page-body-cms form label .text-error {
  color: #c10000;
  font-weight: 400;
}
.ks-themed .kd-page-body-cms form :is(input:not([type='file'], [type='checkbox'], [type='radio']), select) {
  height: 48px;
  padding: 12px 14px;
  border: 1px solid #eff3f6;
  border-radius: 4px;
  background: #f7f9fb;
  box-shadow: none;
  color: #555;
  font-size: 14px;
}
.ks-themed .kd-page-body-cms form textarea {
  min-height: 66px;
  height: 66px;
  padding: 12px 14px;
  border: 1px solid #eff3f6;
  border-radius: 4px;
  background: #f7f9fb;
  box-shadow: none;
  color: #555;
  font-size: 14px;
}
.ks-themed .kd-page-body-cms .kd-page-content form .flex-col.gap-4,
.ks-themed .kd-page-body-cms .kd-page-content form .flex-col.gap-6 {
  gap: 15px;
}
.ks-themed .kd-page-body-cms form .grid.gap-4 {
  gap: 15px 8px;
}
.ks-themed .kd-page-body-cms form button[type='submit'] {
  min-width: 120px;
  height: 42px;
  padding: 12px;
  border: 0;
  border-radius: 20px;
  background: #1347cd;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.ks-themed .kd-page-body-cms form div:has(> label + div > input[type='file']) {
  padding: 15px;
  border: 1px solid #999;
}
.ks-themed .kd-page-body-cms form input[type='file'] {
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #555;
  font-size: 14px;
}
@media (min-width: 769px) {
  .ks-themed .kd-page-body[data-page='om-idt'] .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 3fr)'] > :last-child p {
    max-width: 84%;
  }
}
/* Rows on the Magezon pages touch their separator lines; the spacing is set per block. */
.ks-themed .kd-page-body-cms .kd-page-content .my-4:has(> hr) {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Phones (390px) ───────────────────────────────────────────────────────────────────────────────────
   idtelements.no stacks the product pages: the lead texts are hidden, the six feature tiles run two to a
   row, the product tiles run one (the big pair) and two (the four small ones) to a row. */
@media (max-width: 768px) {
  .ks-themed .kd-page-body-cms [data-block-id='top-gap'] {
    height: 20px !important;
  }
  /* The lead's buttons stand one under the other. */
  .ks-themed .kd-page-body-cms .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 3fr)'] > :first-child > .flex-col {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ks-themed .kd-page-body-cms .kd-page-content .rounded-xl h3[style*='font-size:16px'] {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  /* Titles that are 48px on a desktop are 24px (h2) and 32px (h1) on a phone; text indented 30px keeps 20px. */
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content h2[style*='clamp(32px'] {
    font-size: 24px !important;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content h1[style*='clamp(32px'] {
    font-size: 32px !important;
  }
  .ks-themed .kd-page-body-category .kd-page-content [style*='padding-left:30px'] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .ks-themed .kd-page-body-cms .kd-page-content > section .grid[style] > :nth-child(2) {
    display: none;
  }
  .ks-themed .kd-page-body-cms:not([data-page='om-idt']) .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 3fr)'] > :last-child {
    display: none;
  }
  /* Om IDT: the numbered reasons keep their number beside the text. */
  .ks-themed .kd-page-body[data-page='om-idt'] .kd-page-content .grid[class*='ks-cols-phone'] {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    padding: 20px 0 15px;
  }
  .ks-themed .kd-page-body[data-page='om-idt'] .kd-page-content .grid[class*='ks-cols-phone'] > :nth-child(3) {
    display: none;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px;
    padding: 0 10px;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] > .rounded-xl:first-child {
    display: none;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'] > .rounded-xl:not(:first-child) {
    aspect-ratio: auto;
    margin-right: 0;
    min-height: 160px;
  }
  /* White product tiles: titles on 16px, the big pair's picture 180px, the four small ones 78px, two to a row. */
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .rounded-xl h3[style*='font-size:24px'] {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid:has(> .rounded-xl:nth-child(2)):not(:has(> :nth-child(3))) .overflow-hidden.rounded-lg[style*='height'] {
    height: 180px !important;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)']:has(> .rounded-xl) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid[style*='--ks-cols:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)']:has(> .rounded-xl) .overflow-hidden.rounded-lg[style*='height'] {
    height: 78px !important;
  }
  .ks-themed :is(.kd-page-body-cms, .kd-page-body-category) .kd-page-content .grid:has(> .rounded-xl) > .rounded-xl.p-3:not([style*='aspect']) {
    padding: 15px;
  }
}