/* Product FAQ section: heading on the left, questions on the right. */
body#product .tk-pdp-faq {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 86px);
  margin: 0 0 clamp(70px, 8vw, 120px);
  padding-top: clamp(50px, 6vw, 90px);
  border-top: 1px solid var(--tk-line);
}

body#product .tk-pdp-faq .tk-pdp-extra__title {
  margin: 0;
  color: var(--tk-ink);
  font: 800 clamp(34px, 4vw, 60px)/.95 Manrope, Arial, sans-serif;
  letter-spacing: -.07em;
}

.tk-faq-list {
  border-top: 1px solid var(--tk-line);
}

.tk-faq-item {
  border-bottom: 1px solid var(--tk-line);
}

.tk-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  color: var(--tk-ink);
  font: 800 16px/1.35 Manrope, Arial, sans-serif;
  letter-spacing: -.025em;
  list-style: none;
  cursor: pointer;
}

.tk-faq-item summary::-webkit-details-marker {
  display: none;
}

.tk-faq-item summary:focus-visible {
  outline: 2px solid var(--tk-mint-deep);
  outline-offset: 4px;
}

.tk-faq-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--tk-line);
  border-radius: 50%;
  color: var(--tk-ink);
  transition: background-color .2s ease, border-color .2s ease;
}

.tk-faq-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.tk-faq-icon__v {
  transition: opacity .2s ease;
}

.tk-faq-item summary:hover .tk-faq-icon {
  border-color: var(--tk-ink);
}

.tk-faq-item[open] .tk-faq-icon {
  border-color: var(--tk-ink);
  background: var(--tk-ink);
  color: var(--tk-paper);
}

.tk-faq-item[open] .tk-faq-icon__v {
  opacity: 0;
}

.tk-faq-item p {
  max-width: 680px;
  margin: -4px 54px 22px 0;
  color: var(--tk-muted);
  font: 400 15px/1.7 Manrope, Arial, sans-serif;
}

.tk-faq-more {
  margin: 20px 0 0;
  color: var(--tk-muted);
  font: 400 14px/1.5 Manrope, Arial, sans-serif;
}

.tk-faq-more a {
  color: var(--tk-ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.tk-faq-more a:hover {
  color: var(--tk-mint-text, #1f6f60);
}

@media (max-width: 980px) {
  body#product .tk-pdp-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 46px;
  }

  .tk-faq-item p {
    margin-right: 0;
  }
}