/* Ignite Design · Policy page (shipping and returns, and any other page of terms). Sits on ignite.css.
   A reading page: no photo, no announcement bar, the header solid from the start. The label column of the other pages
   becomes a table of contents that follows the reader; the text sits in the same six-column measure as every closing chapter. */

.policy-page{--bar:0px}
.policy{padding:calc(var(--nav) + env(safe-area-inset-top,0px) + var(--s7)) var(--gutter) var(--section)}

/* ---------- title ---------- */
.policy__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4);padding-bottom:var(--s6);border-bottom:.8px solid var(--rule)}
.policy__head>.label{grid-column:1 / span 3;padding-top:.6em;color:var(--ash)}
.policy__intro{grid-column:4 / span 7;display:grid;gap:var(--s4);max-width:720px}
.policy__intro .lead{max-width:34ch}
.policy__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);color:var(--ash)}

/* ---------- contents + text ---------- */
.policy__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4);padding-top:var(--s6);align-items:start}
.policy__toc{grid-column:1 / span 3;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav) + 32px);display:grid;gap:var(--s3);max-width:240px}
.policy__toc .label{color:var(--ash)}
.policy__toc ol{list-style:none;margin:0;padding:0;display:grid;border-top:.8px solid var(--rule)}
.policy__toc li{border-bottom:.8px solid var(--rule)}
.policy__toc a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s2);align-items:baseline;padding:11px 0;text-decoration:none;color:var(--ash);transition:color var(--d-fast) var(--e-out)}
.policy__toc a .caption{color:var(--ember);opacity:.7;transition:opacity var(--d-fast) var(--e-out)}
.policy__toc a:hover,.policy__toc a[aria-current="true"]{color:var(--ink)}
.policy__toc a[aria-current="true"] .caption{opacity:1}

.policy__body{grid-column:4 / span 6;max-width:640px}

/* the page's own content: headings, paragraphs, lists, links */
.prose{display:grid;gap:var(--s4)}
.prose>*{margin:0;min-width:0}
.prose h2{font:350 var(--t-3)/1.15 var(--f-serif);letter-spacing:-.01em;text-wrap:balance;margin-top:var(--s5);padding-top:var(--s5);border-top:.8px solid var(--rule);scroll-margin-top:calc(var(--nav) + 40px)}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font:500 var(--t-body)/1.3 var(--f-sans);letter-spacing:-.005em;margin-top:var(--s2)}
.prose p,.prose li{font-size:var(--t-body-lg);line-height:1.6;letter-spacing:-.005em}
.prose ul,.prose ol{padding:0;display:grid;gap:var(--s2)}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--ember)}
.prose ol{list-style:none;counter-reset:n}
.prose ol li{position:relative;padding-left:36px;counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.35em;font:400 var(--t-caption)/1 var(--f-mono);color:var(--ember)}
.prose a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.8px;text-decoration-color:rgba(235,106,67,.9);transition:color var(--d-fast) var(--e-out)}
.prose a:hover{color:var(--ember)}
.prose strong{font-weight:500}
.prose em{font-style:italic}
.prose hr{border:0;border-top:.8px solid var(--rule);margin:var(--s3) 0}
.prose blockquote{margin:0;padding-left:var(--s4);border-left:.8px solid var(--ember);color:var(--ash)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:.8px solid var(--rule)}
.prose th{font:500 var(--t-label)/1.2 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.prose img{border-radius:3px}

/* ---------- phones and tablets ---------- */
@media (max-width:899px){
  .policy{padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + var(--s6))}
  .policy__head,.policy__grid{grid-template-columns:1fr}
  .policy__head>.label,.policy__intro,.policy__toc,.policy__body{grid-column:1}
  .policy__head>.label{padding-top:0}
  .policy__grid{padding-top:0;gap:var(--s5)}
  /* the contents become a row of chips that stays under the header while the text scrolls */
  .policy__toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav));z-index:5;max-width:none;margin:0 calc(-1 * var(--gutter));padding:12px var(--gutter);background:var(--paper);box-shadow:0 .8px 0 var(--rule)}
  .policy__toc .label{display:none}
  .policy__toc ol{display:flex;gap:8px;overflow-x:auto;border:0;scrollbar-width:none;scroll-snap-type:x proximity}
  .policy__toc ol::-webkit-scrollbar{display:none}
  .policy__toc li{border:0;flex:none;scroll-snap-align:start}
  .policy__toc a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:.8px solid var(--rule);border-radius:999px;font-size:var(--t-button);white-space:nowrap;color:var(--ink)}
  .policy__toc a[aria-current="true"]{border-color:var(--ember);background:rgba(235,106,67,.08)}
  .policy__body{max-width:none}
  .prose h2{scroll-margin-top:calc(var(--nav) + 72px)}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}