.cluster-page {
  /* local aliases, mapped off core.css tokens */
  --primary-red: var(--button-color);
  --text-dark: var(--text-color);
  --bg-light: var(--accordiansandboxes-color);
  --orange-accent: var(--information-color);
  --white: var(--color-white);

  /* content rhythm */
  --prose-max: 62.5rem;                        /* 1000px reading column */
  --section-gap: clamp(2.5rem, 5vw, 6rem);
  --block-gap: clamp(1rem, 2vw, 1.75rem);
  --radius: 10px;

  overflow-x: hidden;
}

/* =========================================================
   HEADER
========================================================= */

.main-nav .nav-wrapper {
  border-bottom: 1px solid var(--border-color);
}

/* =========================================
   Layout primitives
   ========================================= */

.cluster-main {
  padding-block: clamp(1.5rem, 3vw, 3rem) 0;
}

.cluster-section {
  margin-block: var(--section-gap);
}

/* narrow, centred reading column inside the full-width .container */
.cluster-prose {
  max-width: var(--prose-max);
  margin-inline: auto;
}

.cluster-section + .cluster-section {
  margin-top: calc(var(--section-gap) * 0.7);
}

/* =========================================
   Typography
   ========================================= */

.cluster-page .heading-2 {
  /* core sets a 27–60px bottom margin — too airy for body copy */
  margin-bottom: clamp(1rem, 1.6vw, 1.75rem);
  color: var(--text-dark);
  font-size: clamp(1.25rem, 1.0417rem + 0.9259vw, 1.875rem);
  text-align: center;
}

.cluster-page h1.heading-2 {
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

/* sub-headings inside body copy (core has no .heading-3) */
.cluster-page .heading-3 {
  margin-bottom: clamp(0.75rem, 1.2vw, 1.25rem);
  color: var(--text-dark);
  font-size: clamp(1.125rem, 0.9583rem + 0.7407vw, 1.625rem);
  text-align: center;
}

.cluster-prose p,
.cluster-prose li {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.8;
  color: var(--text-muted);
}

.cluster-prose p + p {
  margin-top: var(--block-gap);
}

.cluster-prose ul,
.cluster-prose ol {
  margin-block: var(--block-gap);
  padding-inline-start: 1.5rem;
}

.cluster-prose ul {
  list-style: disc;
}

.cluster-prose ol {
  list-style: decimal;
}

.cluster-prose li + li {
  margin-top: 0.5rem;
}

.cluster-prose strong {
  color: var(--text-dark);
  font-weight: 700;
}

.cluster-prose a {
  color: var(--primary-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.25s ease;
}

.cluster-prose a:hover {
  opacity: 0.7;
}

/* intro paragraph under the H1 */
.cluster-lead p {
  font-size: clamp(14px, 1.11vw, 16px);
  text-align: center;
}

/* =========================================
   Hero
   ========================================= */

.cluster-page .hero-area {
  margin-bottom: var(--section-gap);
}

.cluster-hero__media {
  max-width: var(--prose-max);
  margin: clamp(1.25rem, 3vw, 2.5rem) auto;
}

.cluster-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* =========================================
   Figures / inline images
   ========================================= */

.cluster-figure {
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.cluster-figure img {
  margin-inline: auto;
  border-radius: var(--radius);
}

.cluster-figure figcaption {
  margin-top: 0.75rem;
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  color: var(--text-muted);
}

/* several images side by side (shoe photos, allergy hero) */
.cluster-figure--row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: center;
}

/* =========================================
   Buttons
   ========================================= */

.cluster-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-block: clamp(1.75rem, 3vw, 2.75rem);
}

/* outline variant to pair with core's solid .btn */
.cluster-page .btn--outline {
  color: var(--text-dark);
  background: transparent;
  border: 2px solid var(--primary-red);
}

.cluster-page .btn--outline:hover {
  color: var(--white);
  background: var(--primary-red);
}

/* =========================================
   Video embed
   ========================================= */

.cluster-page .iframe-container {
  position: relative;
  max-width: 700px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.cluster-page .iframe-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ================= WHY SECTION ================= */

.why .heading-2 {
  margin-bottom: clamp(27px, 4vw, 60px);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(25px, 3vw, 50px) clamp(15px, 3vw, 50px);
  margin-bottom: clamp(35px, 4vw, 50px);
}

/* cluster pages carry four items, so use a 2 x 2 grid */
.why-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

.why-item {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 20px);
}

.why-icon-wrapper {
  width: 68px;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.why-icon-wrapper img {
  max-height: 60px;
  object-fit: contain;
  margin: auto;
}

/* sprite-sheet icons used by the NL cluster pages */
.why-icon-wrapper .why-sprite {
  width: 100%;
  height: 100%;
  max-height: 60px;
  fill: currentColor;
  color: var(--text-muted);
}

.why-item h3 {
  font-size: clamp(0.75rem, 0.4943rem + 1.2784vw, 1.3125rem);
  margin-bottom: clamp(6px, 1vw, 10px);
}

.why-item p {
  line-height: 1.2;
}

.why .btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
  margin-top: clamp(20px, 2vw, 30px);
}

@media (max-width: 767px) {
  .why-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .why-item {
    width: 70%;
  }

  .why-icon-wrapper {
    width: 42px;
    height: 42px;
  }

  .why-icon-wrapper img {
    max-height: 36px;
  }
	
   .mn-faq-container {
    grid-template-columns: 1fr;
  }

  .mn-faq-sidebar {
    text-align: center;
  }

  .mn-faq-desc,
  .mn-faq-btn {
    display: none;
  }

  .mn-faq-title {
    margin-bottom: 0;
  }
}

@media (min-width: 500px) and (max-width: 850px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .why-item {
    width: 90%;
  }
}

/* ================= FAQ SECTION ================= */
.mn-faq-container {
  display: grid;
  grid-template-columns: 0.6fr 2fr;
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: start;
}

.mn-faq-items {
  display: flex;
  gap: clamp(5px, 1vw, 30px);
}

.mn-faq-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 15px);
}

.mn-faq-title {
  font-size: clamp(1.5625rem, 0.7917rem + 3.4259vw, 3.875rem);
  margin-bottom: 20px;
}

.mn-faq-title.mn-faq-title-2 {
  font-size: clamp(1.5625rem, 0.8523rem + 3.5511vw, 3.125rem);
}

.mn-faq-desc {
  margin-bottom: 20px;
  max-width: 19rem;
}

.mn-faq-btn {
  background: var(--information-color);
  font-size: 16px;
}

.mn-faq-btn.mn-faq-btn-pt {
  font-size: clamp(0.75rem, 0.6071rem + 0.2976vw, 0.875rem);
  width: max-content;
}

.mn-faq-card {
  background: var(--overlay-bg-blur);
  overflow: hidden;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.mn-faq-card:hover {
  transform: translateY(-0.2rem);
}

.mn-faq-toggle {
  display: none;
}

.mn-faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(15px, 2vw, 30px) clamp(15px, 2vw, 45px);
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.8333rem + 0.463vw, 1.25rem);
  background-color: var(--accordiansandboxes-color);
  cursor: pointer;
  user-select: none;
}

.mn-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.mn-icon::before,
.mn-icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-black);
  transition: transform 0.3s var(--curve);
}

.mn-icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.mn-icon::after {
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mn-faq-toggle:checked + .mn-faq-summary .mn-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.mn-faq-animator {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--curve);
}

.mn-faq-toggle:checked ~ .mn-faq-animator {
  max-height: 500px;
}

/* cluster-page answers run longer than the homepage ones; give them room on narrow phones */
.cluster-page .mn-faq-toggle:checked ~ .mn-faq-animator {
  max-height: 1200px;
}

.mn-faq-animator p {
  padding: clamp(15px, 2vw, 30px) clamp(15px, 2vw, 45px);
  padding-bottom: clamp(6px, 1vw, 15px);
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
}

.mn-faq-toggle:checked ~ .mn-faq-animator p {
  opacity: 1;
}


/* =========================================
   Checkbox tabs  (allergy-stickers)
   ========================================= */

.cluster-page .tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--prose-max);
  margin-inline: auto;
}

.cluster-page .tab {
  background: var(--bg-light);
  border-radius: var(--radius);
  overflow: hidden;
}

.cluster-page .tab-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.25rem, 2vw, 1.875rem);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
  color: var(--text-dark);
  cursor: pointer;
}

.cluster-page .tab-label::after {
  content: "+";
  font-size: clamp(1.25rem, 1.67vw, 1.5rem);
  font-weight: 400;
  line-height: 1;
}

.cluster-page .tab input:checked ~ .tab-label::after {
  content: "\2013";
}

.cluster-page .tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--curve);
}

.cluster-page .tab input:checked ~ .tab-content {
  max-height: 160rem;
}

.cluster-page .tab-content > * {
  padding-inline: clamp(1.25rem, 2vw, 1.875rem);
}

.cluster-page .tab-content > *:last-child {
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.cluster-page .tab-content .cluster-figure {
  margin-bottom: 0;
}

.cluster-page .tab-content p {
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.8;
  color: var(--text-muted);
}

/* =========================================
   Two-up comparison grid  (.gridbox / .row / .col)
   ========================================= */

.cluster-page .gridbox .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.cluster-page .gridbox .col .inside {
  height: 100%;
  padding: clamp(1.25rem, 2vw, 2rem);
  background: var(--bg-light);
  border-radius: var(--radius);
}

/* =========================================
   Rainbow divider
   ========================================= */

.cluster-page .rainbow-border {
  display: flex;
  height: 0.5rem;
  margin-top: var(--section-gap);
  background: #707070;
}

.cluster-page .rainbow-border span {
  flex: 1;
}

.cluster-page .rainbow-border span:nth-child(1) { background: #94d84f; }
.cluster-page .rainbow-border span:nth-child(2) { background: #ffe000; }
.cluster-page .rainbow-border span:nth-child(3) { background: #ff90be; }
.cluster-page .rainbow-border span:nth-child(4) { background: #22ccaf; }
.cluster-page .rainbow-border span:nth-child(5) { background: #8b82e8; }
.cluster-page .rainbow-border span:nth-child(6) { background: #2db1f7; }

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1920px) {
  .mn-faq-items {
    flex-direction: column;
  }
}

@media (max-width: 969px) {
  .cluster-page .faq__inner {
    grid-template-columns: 1fr;
  }

  .cluster-page .faq__left {
    max-width: 32rem;
    margin-inline: auto;
  }

  .cluster-page .cloth-main {
    grid-template-columns: 1fr;
  }

  .cluster-page .gridbox .row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .cluster-page h1.heading-2 {
    max-width: none;
  }

  .cluster-page .cloth-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cluster-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .cluster-cta .btn,
  .cluster-page .cluster-cta .c-btn {
    width: 100%;
  }
}

/* =========================================
   RTL  (ar_AE / ar_SA)
   ========================================= */

[dir="rtl"] .cluster-prose ul,
[dir="rtl"] .cluster-prose ol {
  padding-inline-start: 1.5rem;
}

/* =========================================
   Print
   ========================================= */

@media print {
  .cluster-page .iframe-container,
  .cluster-page .cluster-cta,
  .cluster-page .rainbow-border {
    display: none;
  }

  .cluster-page .faq__right details p {
    max-height: none;
  }
}