/* Shared style for the policy pages (shipping, returns, privacy, terms, contact, local).
   Same workbench as the shop: the page is the green cutting mat, and the text sits on a
   sheet of paper laid on it. */
:root{
  color-scheme:light;
  --mat:#1E5B47;--mat-dark:#0F3D2E;--grid:rgba(255,255,255,.10);--grid-strong:rgba(255,255,255,.22);
  --on-mat:#FFFFFF;--on-mat-soft:#D3E6DB;--paper:#FFFFFF;--ink:#16201B;--muted:#4F5D56;
  --card:#F4F7F5;--line:#B9C6BF;--yellow:#F2C14E;
  /* older names some pages still use */
  --plastic:var(--mat-dark);
}
*{box-sizing:border-box}
body{margin:0;color:var(--on-mat);font:400 17px/1.6 "Barlow",system-ui,-apple-system,sans-serif;
  background-color:var(--mat);
  background-image:
    linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px}
a{color:var(--mat-dark)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
main :focus-visible{outline-color:var(--mat-dark)}
h1,h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;line-height:1.05;margin:0}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

header{padding:20px 0 6px}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--on-mat)}
.brand .logo{display:block;width:120px;height:auto;flex:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.brand small{display:block;max-width:12em;font:400 13px/1.3 "Barlow",sans-serif;color:var(--on-mat-soft)}
@media (max-width:700px){.brand .logo{width:96px}}
.back{font-weight:600;color:var(--on-mat)}

/* the sheet of paper */
main.wrap{max-width:780px;margin:18px auto 0;padding:36px 40px 48px;background:var(--paper);color:var(--ink);
  border-radius:4px;box-shadow:0 14px 28px rgba(0,0,0,.28)}
@media (max-width:600px){main.wrap{margin:12px 10px 0;padding:26px 20px 36px}}
h1{font-size:clamp(38px,6vw,54px);margin-bottom:6px}
.updated{color:var(--muted);font-size:15px;margin:0 0 28px}
h2{font-size:28px;margin:30px 0 8px}
p,li{max-width:36em}
ul{padding-left:20px}
li{margin:4px 0}
/* The key point on each page, on a yellow note like the shop's (no border, no accent stripe) */
.box{background:#FFE27A;color:var(--ink);padding:14px 18px;margin:18px 0;border-radius:2px;box-shadow:0 6px 12px rgba(0,0,0,.14)}
.box p{margin:0}

footer{padding:26px 0 40px;font-size:15px;color:var(--on-mat-soft)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:8px}
footer a{color:var(--on-mat);font-weight:600}
footer a[aria-current="page"]{color:var(--yellow)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:6px;background:var(--yellow);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{left:16px}
#main:focus{outline:none}