/* Loofi — shared styling for the legal pages.
   Mirrors the tokens used inline on index.html so the pages match the shop. */

/* Self-hosted, so no visitor data goes to a font CDN. Licence: fonts/OFL.txt */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root{
  --green:#2FAE4B;
  --forest:#2F4A1D;
  --ink:#1C2B18;
  --panel:#faf7ef;
  --lime:#7cb518;
  --mustard:#f3d24e;
  --line:rgba(28,43,24,.18);
  --hairline:#ececec;
  --muted-green:#5a6b4d;
  --muted-grey:#8a8f85;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:#fff;
  color:var(--ink);
  line-height:1.6;
  padding:clamp(14px,3vw,40px);
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:820px;margin:0 auto}

/* ---------- header ---------- */
header{padding:0 0 28px}
.logo-img{width:clamp(112px,14vw,150px);height:auto;display:block}
header a{display:inline-block}

/* ---------- draft notice ----------
   Remove class="draft" from <body> on each page to hide this. */
.draft-notice{display:none}
.draft .draft-notice{
  display:block;
  background:#fff4d6;
  border:2px solid #e0a800;
  border-radius:14px;
  padding:16px 20px;
  margin:0 0 30px;
  font-size:14px;
}
.draft .draft-notice strong{display:block;margin-bottom:4px;color:#7a5c00}

/* ---------- content ---------- */
main{background:var(--panel);padding:clamp(26px,4vw,48px)}
h1{
  font-weight:500;font-size:clamp(27px,3.4vw,38px);
  line-height:1.08;letter-spacing:-1px;color:var(--forest);margin-bottom:6px;
}
.updated{font-size:13px;opacity:.7;margin-bottom:26px}
h2{
  font-weight:700;font-size:19px;letter-spacing:-.02em;
  color:var(--forest);margin:30px 0 8px;
}
h2:first-of-type{margin-top:0}
h3{font-weight:600;font-size:15px;margin:20px 0 6px;color:var(--forest)}
p{margin-bottom:12px;font-size:15px}
ul,ol{margin:0 0 14px 22px}
li{margin-bottom:7px;font-size:15px}
a{color:var(--forest)}
strong{font-weight:600}

/* placeholders that must be filled before publishing */
.ph{
  background:#ffe9a8;
  border-bottom:2px dotted #b8860b;
  padding:1px 5px;border-radius:4px;
  font-weight:600;font-style:normal;
  white-space:normal;
}

/* the model cancellation form on the returns page */
.model-form{background:#fff;padding:18px 20px;margin:12px 0 16px}
.model-form p:last-child{margin-bottom:0;font-size:13px}

/* ---------- footer ---------- */
footer{
  margin-top:34px;
  background:#fff;
  text-align:left;
}
.foot-main{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;padding:26px 2px 22px;
}
.foot-company{font-size:12.5px;line-height:1.85;color:var(--muted-green)}
.foot-company a{color:var(--muted-green);text-decoration:underline}
.foot-legal{font-size:13.5px;line-height:1.9;color:var(--muted-green)}
.foot-legal a{color:var(--forest);text-decoration:underline;white-space:nowrap}
.foot-bottom{
  border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;
  padding:14px 2px 6px;font-size:12px;color:var(--muted-grey);
}
.foot-bottom a{color:var(--muted-grey);text-decoration:underline}

@media (max-width:600px){
  footer{text-align:center}
  .foot-main{flex-direction:column;align-items:center;gap:20px}
  .foot-bottom{flex-direction:column;align-items:center;gap:6px}
}