/* Styles for the legal pages and for the small additions injected into the
   storefront at build time (footer credit, checkout consent line). The
   storefront's own stylesheet is never edited. */

/* ---- additions to the storefront ---------------------------------------- */

.site-footer .footer-bottom {
  flex-wrap: wrap;
}

.site-footer .dev-credit {
  flex: 1 1 100%;
  text-align: center;
  padding: 14px 0 22px;
  font-size: 12px;
  letter-spacing: .02em;
  color: #d0dbce;
}

.site-footer .dev-credit a {
  color: #d4ecaa;
  font-weight: 600;
  text-decoration: none;
}

.site-footer .dev-credit a:hover {
  text-decoration: underline;
}

.legal-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #687268;
  text-align: center;
}

.legal-note a {
  color: #218b32;
  text-decoration: underline;
}

/* ---- legal pages -------------------------------------------------------- */

.policy-page {
  margin: 0;
  background: #f7f6ed;
  color: #18251a;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
}

.policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 8%;
  background: #fff;
  border-bottom: 1px solid #e7e8d8;
}

.policy-brand img {
  display: block;
  height: 52px;
  width: auto;
}

.policy-back {
  color: #145c2b;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.policy-back:hover {
  text-decoration: underline;
}

.policy-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.policy-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #218b32;
}

.policy-main h1 {
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.2;
  color: #145c2b;
}

.policy-updated {
  margin: 0 0 32px;
  font-size: 14px;
  color: #687268;
}

.policy-body {
  background: #fff;
  border-radius: 18px;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: 0 16px 45px rgba(29, 54, 31, .08);
}

.policy-body h2 {
  margin: 34px 0 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: #145c2b;
}

.policy-body h2:first-child {
  margin-top: 0;
}

.policy-body p,
.policy-body li {
  font-size: 15.5px;
}

.policy-body ul,
.policy-body ol {
  padding-left: 22px;
}

.policy-body li {
  margin-bottom: 6px;
}

.policy-body a {
  color: #218b32;
}

.policy-body .callout {
  margin: 18px 0;
  padding: 16px 18px;
  background: #f1f7e6;
  border-left: 4px solid #a9d51b;
  border-radius: 8px;
}

.policy-body .callout p {
  margin: 0;
}

.policy-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14.5px;
}

.policy-body th,
.policy-body td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid #ecefdf;
}

.policy-body th {
  background: #f7f6ed;
  font-weight: 600;
}

.policy-footer {
  padding: 28px 8% 34px;
  background: #153b25;
  color: #d0dbce;
  text-align: center;
  font-size: 13px;
}

.policy-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 14px;
}

.policy-footer a {
  color: #d4ecaa;
  text-decoration: none;
}

.policy-footer a:hover {
  text-decoration: underline;
}

.policy-footer p {
  margin: 4px 0;
}

.policy-footer .dev-credit a {
  font-weight: 600;
}

@media (max-width: 600px) {
  .policy-header {
    padding: 14px 20px;
  }
  .policy-body table,
  .policy-body thead,
  .policy-body tbody,
  .policy-body tr,
  .policy-body th,
  .policy-body td {
    display: block;
  }
  .policy-body thead {
    display: none;
  }
  .policy-body td:first-child {
    font-weight: 600;
    background: #f7f6ed;
    border-bottom: 0;
  }
}