/* ==========================================================================
   Legal pages (privacy, terms, refund, shipping) — layout and reading comfort.
   Loaded only by those four pages, after styles.css. Uses the site's tokens.
   ========================================================================== */
.content-section:has(.legal-layout){ padding:64px 0 96px; }

.legal-layout{ display:grid; grid-template-columns:200px minmax(0, 720px); gap:72px; align-items:start; }
.legal-layout .legal-wrap{ max-width:none; }

/* "On this page" */
.legal-toc{ position:sticky; top:112px; font-size:13.5px; }
.legal-toc-title{ margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.legal-toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.legal-toc a{ display:block; padding:6px 0 6px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--muted); line-height:1.35; text-decoration:none; transition:color .15s, border-color .15s; }
.legal-toc a:hover{ color:var(--ink); }
.legal-toc a.is-active{ color:var(--teal); border-left-color:var(--teal); font-weight:700; }

/* Reading column */
.legal-meta{ display:inline-block; margin-bottom:26px; padding:6px 14px; border:1px solid var(--line); border-left:1px solid var(--line); border-radius:999px; background:var(--mint); font-size:12.5px; }
.legal-wrap > p:first-of-type{ font-size:17px; line-height:1.75; color:var(--ink); }
.legal-wrap h2{ font-size:25px; margin:44px 0 12px; padding-top:30px; border-top:1px solid var(--line); scroll-margin-top:110px; }
.legal-wrap h2:first-of-type{ margin-top:36px; }
.legal-wrap h3{ font-size:18.5px; margin:26px 0 6px; color:var(--ink); }
.legal-wrap p{ margin:0 0 14px; }
.legal-wrap strong{ color:var(--ink); }

.legal-wrap ul{ padding-left:0; margin:0 0 16px; }
.legal-wrap ul li{ position:relative; padding-left:22px; margin:8px 0; }
.legal-wrap ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.legal-wrap ol{ padding-left:22px; margin:0 0 16px; }
.legal-wrap ol li::marker{ color:var(--teal); font-weight:700; }

.legal-card{ padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--white); box-shadow:var(--shadow-card); }

/* Other policies */
.legal-nav{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:56px; padding-top:0; border-top:0; }
.legal-nav a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); font-size:13.5px; line-height:1.3; text-decoration:none; transition:border-color .15s, color .15s; }
.legal-nav a:hover{ border-color:var(--teal); color:var(--teal); }
.legal-nav a.active{ background:var(--mint); border-color:var(--teal); color:var(--teal); }

@media (max-width:1020px){
  .legal-layout{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .legal-toc{ display:none; }
  .legal-nav{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .content-section:has(.legal-layout){ padding:36px 0 64px; }
  .legal-wrap > p:first-of-type{ font-size:16px; }
  .legal-wrap h2{ font-size:22px; margin-top:34px; padding-top:24px; }
  .legal-wrap h3{ font-size:17px; }
}