/* Shared styling for the policy pages. Mirrors the Cherry Cola tokens in
   index.html so these read as the same shop, not a bolted-on legal annex. */
:root{
  --bg:#221715; --surf:#31201D; --surf2:#3D2925;
  --ink:#F4E8E4; --dim:#B99F98; --acc:#E05C4B; --line:#4A322D;
  --wrap:820px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---- top bar ---- */
header{
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:10;
}
header .wrap{display:flex; align-items:center; gap:14px; height:60px}
header a.home{
  color:var(--ink); text-decoration:none; font-weight:700;
  letter-spacing:.02em; display:flex; align-items:center; gap:9px;
}
header a.home img{width:22px;height:22px;display:block}
header .sp{flex:1}
header a.back{
  color:var(--dim); text-decoration:none; font-size:13px;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  transition:.18s cubic-bezier(.22,.61,.36,1);
}
header a.back:hover{border-color:var(--acc); color:var(--acc)}

/* ---- document ---- */
main{padding:44px 0 20px}
.eyebrow{
  color:var(--acc); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 10px;
}
h1{font-size:clamp(28px,5vw,38px); line-height:1.15; margin:0 0 12px; letter-spacing:-.01em}
.updated{color:var(--dim); font-size:13px; margin:0 0 34px}
h2{
  font-size:17px; margin:36px 0 12px; letter-spacing:.01em;
  padding-top:22px; border-top:1px solid var(--line);
}
h2:first-of-type{border-top:0; padding-top:0}
p{margin:0 0 14px}
ul{margin:0 0 14px; padding-left:20px}
li{margin:0 0 8px}
strong{color:#FFF}
a{color:var(--acc)}

/* a fact worth not burying */
.note{
  background:var(--surf); border:1px solid var(--line);
  border-left:3px solid var(--acc);
  border-radius:10px; padding:14px 16px; margin:0 0 18px;
}
.note p:last-child{margin-bottom:0}

table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{color:var(--dim); font-weight:400; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.scroll{overflow-x:auto}

/* ---- contact strip, filled from the live catalogue ---- */
.contact{
  background:var(--surf); border:1px solid var(--line); border-radius:14px;
  padding:20px; margin:38px 0 0;
}
.contact h3{margin:0 0 10px; font-size:15px}
.contact p{margin:0 0 6px; color:var(--dim); font-size:14px}
.contact a{color:var(--acc); text-decoration:none}
.contact a:hover{text-decoration:underline}

footer{border-top:1px solid var(--line); margin-top:44px; padding:26px 0 40px}
footer .links{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 14px; font-size:13px}
footer .links a{color:var(--dim); text-decoration:none}
footer .links a:hover{color:var(--acc)}
footer .tiny{color:var(--dim); font-size:12px; margin:0}
@media (max-width:520px){ main{padding-top:32px} h2{margin-top:30px} }