/* Standalone informational / legal pages (Contact, FAQ, Shipping, Returns,
   Privacy, Terms, Accessibility). Loaded on top of app.css, which already
   provides the design tokens, nav, drawer and footer styles. This file only
   adds the article/content layout. */

.page{
  max-width:820px;margin:0 auto;
  padding:clamp(120px,17vh,168px) 24px 40px;
  min-height:calc(100svh - 170px);
}
@media(max-width:560px){
  /* no under-nav search bar here, so less top padding than the shop views */
  .page{padding-top:calc(max(12px,env(safe-area-inset-top)) + 78px)}
}

.page-head{margin-bottom:30px}
.page-head .tier-eyebrow{margin-bottom:16px}
.page-title{
  font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,56px);
  letter-spacing:-.03em;line-height:1.03;color:var(--ink);
}
.page-title em{font-style:italic;color:var(--accent)}
.page-lede{margin-top:14px;color:var(--ink-mid);font-weight:300;font-size:16px;line-height:1.7;max-width:64ch}
.page-updated{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
  padding:8px 13px;border-radius:999px;border:1px solid var(--line-soft);background:var(--glass);
}

/* ── Prose ── */
.prose{color:var(--ink-mid);font-weight:300;font-size:15.5px;line-height:1.75;max-width:72ch}
.prose > h2{
  font-family:var(--display);font-weight:500;font-size:clamp(21px,3vw,27px);letter-spacing:-.01em;
  color:var(--ink);margin:40px 0 12px;line-height:1.2;
}
.prose > h2:first-child{margin-top:0}
.prose > h3{
  font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:.01em;
  color:var(--ink);margin:26px 0 8px;
}
.prose p{margin:0 0 15px}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);transition:color .2s}
.prose a:hover{color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--accent)}
.prose hr{border:none;border-top:1px solid var(--line-soft);margin:34px 0}
/* highlighted placeholders the store owner still needs to fill in */
.prose .fill{
  color:var(--ink);font-weight:500;background:var(--accent-soft);
  padding:1px 7px;border-radius:6px;border:1px dashed var(--line);white-space:nowrap;
}

/* ── Callout card ── */
.note{
  margin:22px 0;padding:16px 18px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--glass);
  color:var(--ink-mid);font-size:14.5px;line-height:1.65;
}
.note strong{color:var(--ink)}

/* ── Contact page ── */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:6px 0 30px}
.contact-card{
  padding:20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--glass);
  display:flex;flex-direction:column;gap:6px;
}
.contact-card .ic{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--glass-2);
  display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:6px;
}
.contact-card .ic svg{width:18px;height:18px}
.contact-card h3{font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.contact-card a,.contact-card p{color:var(--ink);font-size:15.5px;line-height:1.5;text-decoration:none}
.contact-card a[href]{border-bottom:1px solid var(--accent);width:fit-content}
.contact-card .muted{color:var(--ink-mid);font-size:13.5px;font-weight:300}

.cform{display:grid;gap:14px;max-width:560px;margin-top:8px}
.cform label{display:block;font:600 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.cform input,.cform textarea{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--glass);color:var(--ink);font:400 15px/1.4 var(--body);transition:border-color .2s,box-shadow .2s;
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-dim)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--ink-mid);box-shadow:0 0 0 3px var(--glass-2)}
.cform textarea{resize:vertical;min-height:140px}
.cform .btn.solid{width:auto;align-self:start;padding-left:26px;padding-right:26px}
.cform .btn.solid[disabled]{opacity:.6;cursor:default}
/* honeypot — kept in the DOM/tab order for bots but hidden from people */
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── FAQ accordions ── */
.faq{max-width:760px;display:flex;flex-direction:column;gap:12px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);overflow:hidden;
  transition:border-color .2s;
}
.faq details[open]{border-color:var(--ink-mid)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:500 16px/1.4 var(--body);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-ico{
  flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:16px;line-height:1;
  transition:transform .25s var(--ease);
}
.faq details[open] summary .q-ico{transform:rotate(45deg)}
.faq .faq-a{padding:0 20px 20px;color:var(--ink-mid);font-weight:300;font-size:15px;line-height:1.7}
.faq .faq-a a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}

/* toast for the contact form */
.page-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);padding:13px 20px;border-radius:999px;
  font:600 13px/1 var(--body);box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:200;
}
.page-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}