/* V6 product landing pages — light, 1140px, conversion CTAs.
   Loaded after styles.css so it can override the dark master body. */

body.v6-product {
  --v6-max: 1140px;
  --v6-paper: #FBFAF7;
  --v6-ink: #0F172A;
  --v6-muted: #5B6B84;
  --v6-navy: #0B1F3A;
  --v6-green: #22C55E;
  --v6-green-dark: #16A34A;
  --v6-orange: #FF9900;
  --v6-orange-dark: #E47911;
  --v6-line: rgba(11, 31, 58, 0.10);
  --v6-head: "Playfair Display", Georgia, serif;
  --v6-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
  background: var(--v6-paper) !important;
  color: var(--v6-ink);
  font-family: var(--v6-body);
  -webkit-font-smoothing: antialiased;
}

body.v6-product .v6-product-shell {
  max-width: var(--v6-max);
  margin: 0 auto;
  padding: 36px 32px 80px;
}

body.v6-product .product-detail {
  max-width: 100%;
}

body.v6-product .product-detail__crumb {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--v6-muted);
}
body.v6-product .product-detail__crumb a {
  color: var(--v6-muted);
  text-decoration: none;
}
body.v6-product .product-detail__crumb a:hover {
  color: var(--v6-navy);
}

/* 2-column: copy left, photo right (HP slideshow size) */
body.v6-product .product-detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "copy visual";
  gap: 40px 40px;
  align-items: start;
}

body.v6-product .product-detail__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  grid-area: copy;
}

body.v6-product .product-detail__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A6E3B;
}

body.v6-product .product-detail__title {
  margin: 0 0 16px;
  font-family: var(--v6-head);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  color: var(--v6-navy);
}

body.v6-product .product-detail__accent {
  font-style: italic;
  color: #8A6E3B;
}

body.v6-product .product-detail__text {
  margin: 0 0 22px;
  max-width: 36rem;
  font-size: 16px;
  line-height: 1.65;
  color: var(--v6-muted);
}

body.v6-product .product-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

body.v6-product .product-detail__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 34rem;
}
body.v6-product .product-detail__badges span {
  font-size: 11.5px;
  font-weight: 700;
  color: #0F172A;
  border: 1px solid var(--v6-line);
  border-radius: 999px;
  padding: 6px 13px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  animation: permanentWave 6s ease-in-out infinite;
}
body.v6-product .product-detail__badges span:nth-child(1),
body.v6-product .product-detail__badges span:nth-child(2) {
  color: #16A34A;
  animation-name: permanentWaveGreen;
}
body.v6-product .product-detail__badges span:nth-child(1) { animation-delay: 0s; }
body.v6-product .product-detail__badges span:nth-child(2) { animation-delay: 1.5s; }
body.v6-product .product-detail__badges span:nth-child(3) { animation-delay: 3s; }
body.v6-product .product-detail__badges span:nth-child(4) { animation-delay: 4.5s; }
@keyframes permanentWave {
  0%, 100% { color: #0F172A; }
  50% { color: #16A34A; }
}
@keyframes permanentWaveGreen {
  0%, 100% { color: #16A34A; }
  50% { color: #15803d; }
}
@media (prefers-reduced-motion: reduce) {
  body.v6-product .product-detail__badges span {
    animation: none;
    color: #0F172A;
  }
  body.v6-product .product-detail__badges span:nth-child(1),
  body.v6-product .product-detail__badges span:nth-child(2) {
    color: #16A34A;
  }
}

body.v6-product .product-detail__cta,
body.v6-product .product-reassure__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--v6-green);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 24px -8px rgba(34, 197, 94, 0.55);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
body.v6-product .product-detail__cta:hover,
body.v6-product .product-reassure__cta:hover {
  background: var(--v6-green-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(34, 197, 94, 0.65);
}

body.v6-product .product-detail__secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--v6-line);
  color: var(--v6-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  background: #fff;
}
body.v6-product .product-detail__secondary:hover {
  border-color: var(--v6-navy);
}

body.v6-product .product-detail__visual {
  grid-area: visual;
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 4 / 3.1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--v6-line);
  background: #e8eef5;
  box-shadow: 0 18px 40px -24px rgba(11, 31, 58, 0.35);
}

body.v6-product .product-detail__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.v6-product .product-detail__panel {
  width: 100%;
  margin-top: 40px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid var(--v6-line);
  background: #fff;
  box-sizing: border-box;
}

body.v6-product .product-detail__panel-title {
  margin: 0 0 14px;
  font-family: var(--v6-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--v6-navy);
}

body.v6-product .product-detail__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  column-gap: 20px;
  row-gap: 10px;
}

body.v6-product .product-detail__panel-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--v6-ink);
}

body.v6-product .product-detail__panel-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #22C55E;
  font-weight: 700;
  font-size: 12px;
}

/* Two named rows (title, body) so each card can adopt them as a subgrid.
   Without this the h3 sizes itself per card, so a title that wraps to two
   lines in one language pushes only that card's paragraph down: measured at
   1920px the body text started at y925 in four cards and y952 in the fifth
   (NL), y873 vs y899 (EN), y985 vs y959 (FR), y975 vs y948 (DE) — every
   language had an odd one out. Sharing the rows makes the tallest title in
   the band set the height for all of them, so the paragraphs always start on
   the same line whatever the translation does. */
body.v6-product .product-detail__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: auto auto;
  gap: 14px;
  margin-top: 40px;
}

body.v6-product .product-benefit {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-height: 0;
  padding: 20px 18px;
  border-radius: 16px;
  border: 1px solid var(--v6-line);
  background: #fff;
}

body.v6-product .product-benefit h3 {
  margin: 0 0 6px;
  font-family: var(--v6-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--v6-navy);
}

body.v6-product .product-benefit p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v6-muted);
}

body.v6-product .product-reassure {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1.15fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 40px;
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid var(--v6-line);
  background: #fff;
}

body.v6-product .product-reassure__story {
  display: flex;
  align-items: center;
  gap: 16px;
}

body.v6-product .product-reassure__photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 2px solid rgba(34, 197, 94, 0.35);
  background: #e8eef5;
}
body.v6-product .product-reassure__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.v6-product .product-reassure__headline {
  margin: 0 0 4px;
  font-family: var(--v6-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--v6-navy);
}

body.v6-product .product-reassure__quote {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--v6-muted);
}

body.v6-product .product-reassure__rating {
  margin: 0;
  font-size: 13px;
  color: var(--v6-muted);
}
body.v6-product .product-reassure__rating span {
  color: #C9A24A;
  letter-spacing: 1px;
}
body.v6-product .product-reassure__rating .product-reassure__rating-text {
  color: inherit;
  letter-spacing: normal;
}

body.v6-product .product-reassure__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
body.v6-product .product-reassure__metric {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--v6-navy);
}
body.v6-product .product-reassure__metric-icon {
  color: var(--v6-green);
  flex: none;
  margin-top: 1px;
}
body.v6-product .product-reassure__metric-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

body.v6-product .product-reassure__cta-wrap {
  text-align: right;
}
body.v6-product .product-reassure__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--v6-muted);
}

@media (max-width: 960px) {
  body.v6-product .v6-product-shell {
    padding: 24px 20px 64px;
  }
  body.v6-product .product-detail__hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual";
  }
  body.v6-product .product-detail__visual {
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.1;
  }
  body.v6-product .product-detail__panel-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  body.v6-product .product-reassure {
    grid-template-columns: 1fr;
  }
  body.v6-product .product-reassure__cta-wrap {
    text-align: left;
  }
}