/* ==========================================================================
   PEPTISSIMA — FAQS
   Section styles ported verbatim from the {% stylesheet %} block of each
   Shopify section listed below. The shared .p-doc-* spine (hero, list,
   notice, CTA panel) lives in peptissima.css.
   ========================================================================== */

/* ---- sections/faq-hero.liquid ---- */

.faq-hero__notice {
  margin-top: 32px;
}

/* ---- sections/faq-accordion.liquid ---- */

.faq-accordion {
  background: var(--surface);
}

.faq-accordion__group + .faq-accordion__group {
  margin-top: 64px;
}

/* Peptissima Support sits below the six question categories and is set apart
   rather than hidden among them, which is what "then place Peptissima Support
   beneath the accordions" asks for. */
.faq-accordion__group--accent {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 2px solid var(--gold);
}

.faq-accordion__cat {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}

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

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

.faq-accordion__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.2s ease;
}

/* Both are needed: the pseudo-element for WebKit, `list-style: none` above
   for Firefox. Without them the browser draws its own disclosure triangle
   next to the champagne chevron. */
.faq-accordion__q::-webkit-details-marker {
  display: none;
}

.faq-accordion__q:hover {
  color: var(--red);
}

.faq-accordion__q-text {
  min-width: 0;
}

.faq-accordion__cue {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--gold-deep);
  transition: transform 0.2s ease;
}

.faq-accordion__cue svg {
  width: 18px;
  height: 18px;
}

.faq-accordion__item[open] .faq-accordion__cue {
  transform: rotate(180deg);
}

.faq-accordion__item[open] .faq-accordion__q {
  color: var(--red);
}

.faq-accordion__a {
  padding: 0 48px 26px 0;
  max-width: 78ch;
}

.faq-accordion__a p {
  color: var(--text);
  opacity: 0.78;
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0 0 12px;
}

.faq-accordion__a p:last-child {
  margin-bottom: 0;
}

/* The spec answers a run of questions with a flat "No." or "Yes." before the
   explanation. That one word is the answer, so it is not buried in the body
   copy. */
.faq-accordion__emphasis {
  color: var(--text) !important;
  opacity: 1 !important;
  font-family: var(--font-serif);
  font-size: var(--text-lg) !important;
  font-weight: 700;
  line-height: 1.3 !important;
}

.faq-accordion__a .p-bullets {
  margin: 12px 0;
}

.faq-accordion__cta {
  margin-top: 16px;
}

@media screen and (max-width: 1024px) {
  .faq-accordion__group + .faq-accordion__group {
    margin-top: 56px;
  }

  .faq-accordion__group--accent {
    margin-top: 64px;
    padding-top: 48px;
  }

  .faq-accordion__a {
    padding-right: 24px;
    max-width: none;
  }
}

@media screen and (max-width: 749px) {
  .faq-accordion__cat {
    font-size: var(--text-lg);
  }

  .faq-accordion__q {
    gap: 16px;
    font-size: var(--text-base);
    padding: 18px 0;
  }

  .faq-accordion__cue {
    width: 20px;
    height: 20px;
  }

  .faq-accordion__cue svg {
    width: 16px;
    height: 16px;
  }

  .faq-accordion__a {
    padding: 0 0 22px;
  }
}

/* ---- sections/faq-close.liquid ---- */

.faq-close {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
}