/* ============================================================
   faq.html and policies.html. Nothing else loads this file.

   Both pages are long-form reading, which the rest of the site
   is not, so they get one column, a comfortable measure, and
   nothing that moves.
   ============================================================ */

.page {
  max-width: 760px;
  margin-inline: auto;
  /* 102px is what .pdp already uses to clear the fixed header */
  margin-block-start: 102px;
  padding: clamp(32px, 6vw, 72px) 20px 96px;
}

.page__eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
  margin-block-end: 10px;
}

.page__title { margin-block-end: 14px; }

.page__lede {
  font-size: clamp(16px, 1.2vw, 19px);
  color: rgba(20,20,20,.72);
  max-width: 52ch;
  margin-block-end: 40px;
}

/* a phone number is one thing: without this the line breaks
   between the country code and the digits */
.page bdi { white-space: nowrap; }

.page__group { margin-block-start: 48px; }

.page__group > h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(20,20,20,.5);
  padding-block-end: 10px;
  border-block-end: 2px solid var(--ink);
  margin-block-end: 4px;
}

/* ---- one question --------------------------------------

   <details> because it opens and closes with no script at all,
   and a reader whose JavaScript never runs still gets every
   answer. ------------------------------------------------ */

.qa { border-block-end: 1px solid rgba(20,20,20,.12); }

.qa > summary {
  cursor: pointer;
  list-style: none;
  padding-block: 18px;
  padding-inline: 0 34px;
  font-weight: 800;
  font-size: clamp(15px, 1.1vw, 17px);
  position: relative;
}

.qa > summary::-webkit-details-marker { display: none; }

/* the sign sits at the end of the line, so it follows the text
   over to the left when the page turns Arabic */
.qa > summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 15px;
  font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--red);
}

.qa[open] > summary::after { content: "\2212"; }

.qa > summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.qa__a {
  padding-block-end: 22px;
  padding-inline-end: 34px;
  color: rgba(20,20,20,.78);
  line-height: 1.75;
}

.qa__a > p + p { margin-block-start: 12px; }
.qa__a a { color: var(--red); text-decoration: underline; }
.qa__a strong { color: var(--ink); }

/* ---- the nutrition table and the ingredient blocks ------ */

.qa__wrap { overflow-x: auto; }

.qa__table {
  width: 100%; border-collapse: collapse;
  margin-block-start: 10px; min-width: 340px;
}

.qa__table th, .qa__table td {
  text-align: start;
  padding-block: 8px;
  padding-inline: 0 12px;
  border-block-end: 1px solid rgba(20,20,20,.1);
  font-size: 14px;
}

.qa__table th { font-weight: 800; color: var(--ink); }
.qa__table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.qa__h {
  font-weight: 800; color: var(--ink);
  margin-block-start: 16px;
}

.qa__ing {
  font-size: 13.5px; line-height: 1.8;
  color: rgba(20,20,20,.72);
  background: rgba(20,20,20,.04);
  border-radius: 12px;
  padding: 14px 16px;
  margin-block-start: 8px;
}

/* ---- a policy ------------------------------------------- */

.pol { margin-block-start: 56px; scroll-margin-block-start: 118px; }
.pol > h2 { margin-block-end: 14px; }
.pol p { color: rgba(20,20,20,.78); line-height: 1.8; }
.pol p + p { margin-block-start: 14px; }
.pol a { color: var(--red); text-decoration: underline; }

.pol__stamp {
  margin-block-start: 64px;
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(20,20,20,.12);
  font-size: 13px; color: rgba(20,20,20,.5);
}