/* ============================================================================
   LEGAL / TERMS PAGE (terms.html) — shared with privacy-policy / shipping
   -policy / returns once those pages exist: same template, different
   the_content(). Header and footer reuse the rules above unchanged.
   ============================================================================ */
.legal{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:100%;
  margin-block-start:24px;
  padding-inline: var(--gutter);
}
.legal h1{
  font-size: var(--fs-h1);
  font-weight:700;
  line-height:1.1;
  text-align:center;
  color: var(--color-brown);
  width:100%;
}
/* ---------- .legal__body: generic WYSIWYG / Gutenberg content ----------
   Binds to the_content() as-is. Block flow (not flex) on purpose — real WP
   content is a flat, unpredictable stream of core blocks (headings, lists,
   quotes, images, tables…), so rhythm comes from margins on bare tags
   rather than a flex `gap` that would only ever have applied to two known
   children. Every rule here targets plain elements, never a class, so any
   combination an editor produces still lands on-brand with zero markup
   changes on this page. */
.legal__body{
  width:100%;
  text-align:start;
  color: var(--color-brown);
  font-size: var(--fs-quote);
  line-height:1.2;
}
.legal__body > *{ margin-block:0; }
.legal__body > * + *{ margin-block-start:16px; }
.legal__body > :where(h2,h3,h4,h5,h6):not(:first-child){ margin-block-start:32px; }
.legal__body :where(h2,h3,h4,h5,h6){
  font-weight:600;
  line-height:1.1;
  color: var(--color-brown);
}
.legal__body h2{ font-size: var(--fs-body); }
.legal__body h3{ font-size: var(--fs-name); }
.legal__body :where(h4,h5,h6){ font-size: var(--fs-quote); }
.legal__body :where(ul,ol){
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-inline-start:22px;
}
.legal__body ul{ list-style:disc; }
.legal__body ol{ list-style:decimal; }
.legal__body li{ padding-inline-start:4px; }
.legal__body li > :where(ul,ol){ margin-block-start:8px; }
.legal__body a{ color: var(--color-gold); text-decoration:underline; text-underline-offset:2px; }
.legal__body a:hover{ opacity:.75; }
.legal__body :where(strong,b){ font-weight:700; }
.legal__body :where(em,i){ font-style:italic; }
.legal__body blockquote{
  border-inline-start:3px solid var(--color-border-2);
  padding-inline-start:16px;
  color: rgba(70,67,52,.8);
}
.legal__body blockquote > *:first-child{ margin-block-start:0; }
.legal__body hr{
  border:none;
  border-block-start:1px solid var(--color-border);
}
.legal__body :where(figure,img){ max-width:100%; }
.legal__body img{ display:block; width:100%; height:auto; border-radius:16px; }
.legal__body figcaption{ font-size: var(--fs-tag); color: rgba(70,67,52,.7); margin-block-start:8px; }
.legal__body table{ width:100%; border-collapse:collapse; }
.legal__body :where(th,td){ border:1px solid var(--color-border); padding:8px 12px; text-align:start; }
/* ============================================================
   LEGAL — ≥ 992px
   ============================================================ */
@media (min-width: 992px){
.legal{ gap:40px; }
.legal__body{ max-width:1006px; font-size: var(--fs-quote); }
.legal__body > * + *{ margin-block-start:16px; }
.legal__body > :where(h2,h3,h4,h5,h6):not(:first-child){ margin-block-start:40px; }
}