/* =========================================================================
   LEGAL PAGES — shared styling for privacy, terms, refund, shipping pages.
   Stripped-down layout (simple header, focused body) so the reader isn't
   distracted by full site chrome while reviewing policy text.
   ========================================================================= */

body{
  background:var(--canvas);
  color:var(--green-deep);
  font-family:var(--body);
  line-height:1.6;
}

/* Simple header — logo linking back to home */
.legal-header{
  padding:22px 0;
  border-bottom:1px solid var(--line);
  background:var(--canvas);
}
.legal-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.legal-logo{display:inline-block;line-height:0}
.legal-logo img{
  height:44px;
  width:auto;
}
.legal-back{
  font-family:var(--body);
  font-size:.85rem;
  color:var(--green-deep);
  text-decoration:none;
  border:1px solid var(--line);
  padding:.55em 1.1em;
  border-radius:100px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.legal-back:hover{
  background:var(--green-deep);
  color:#fff;
  border-color:var(--green-deep);
}

/* Main body */
.legal-main{
  padding:56px 0 80px;
  min-height:60vh;
}
.legal-main .wrap{max-width:820px}

.legal-title{
  margin-bottom:44px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.legal-title .eyebrow{
  color:var(--green);
  font-family:var(--body);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.legal-title h1{
  font-family:var(--display);
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:400;
  line-height:1.1;
  margin:12px 0 10px;
  color:var(--green-deep);
}
.legal-date{
  font-family:var(--body);
  font-size:.85rem;
  color:var(--muted);
  margin:0;
  font-style:italic;
}

.legal-body{
  font-size:.98rem;
  line-height:1.7;
  color:var(--green-mid);
}

.legal-body h2{
  font-family:var(--display);
  font-size:1.55rem;
  font-weight:400;
  color:var(--green-deep);
  margin:36px 0 12px;
  line-height:1.2;
}
.legal-body h2:first-child{margin-top:0}

.legal-body h3{
  font-family:var(--body);
  font-size:1rem;
  font-weight:600;
  color:var(--green-deep);
  margin:22px 0 8px;
}

.legal-body p{margin:0 0 14px}

.legal-body ul,
.legal-body ol{
  padding-left:22px;
  margin:0 0 18px;
}
.legal-body li{
  margin-bottom:8px;
  line-height:1.6;
}

.legal-body a{
  color:var(--green);
  text-decoration:underline;
}
.legal-body a:hover{color:var(--green-deep)}

.legal-body strong{
  color:var(--green-deep);
  font-weight:600;
}

/* Callout box for important notices */
.legal-callout{
  background:var(--boxes-bg);
  border-left:3px solid var(--green);
  padding:16px 20px;
  margin:20px 0;
  border-radius:4px;
  font-size:.92rem;
}

/* Footer — links to every legal page + contact info */
.legal-footer{
  background:var(--green-deep);
  color:var(--on-dark-1);
  padding:36px 0 28px;
  font-size:.86rem;
}
.legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  margin-bottom:18px;
}
.legal-links a{
  color:var(--on-dark-2);
  text-decoration:none;
  font-size:.86rem;
  transition:color .2s ease;
}
.legal-links a:hover{color:#fff}
.legal-copyright{
  color:var(--on-dark-5);
  margin:0;
  font-size:.75rem;
  line-height:1.5;
}

@media (max-width:640px){
  .legal-header{padding:16px 0}
  .legal-logo img{height:38px}
  .legal-back{font-size:.78rem;padding:.5em .95em}
  .legal-main{padding:40px 0 60px}
  .legal-body{font-size:.94rem}
  .legal-body h2{font-size:1.35rem;margin-top:28px}
}
</content>
</invoke>