/* =========================================================
   Shared shell for the information pages: delivery, returns,
   terms, privacy, contact and 404.

   index.html and thanks.html each carry their own stylesheet
   and are untouched by this file.

   The tokens below are COPIES of the ones in index.html's
   :root — the client's real packaging colours. Never change a
   value here on its own: change it in index.html, thanks.html
   and this file together, or the site drifts apart.
   ========================================================= */
:root{
  --sage:#CFC9B5; --olive:#B0A874; --gold:#D9A227;
  --ink:#22221F; --grey:#6E6E68;
  --paper:#FBF9F4; --card:#FFFFFF; --line:#E6E2D6;
  --gap:clamp(24px,6vw,30px);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--sage);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{
  max-width:520px;margin:0 auto;background:var(--paper);min-height:100vh;
  box-shadow:0 0 0 1px rgba(34,34,31,.06),0 18px 60px rgba(34,34,31,.13);
}
@media(min-width:560px){.app{margin:22px auto 34px;border-radius:24px;min-height:0}}

/* The header. These rules are COPIES of the ones in index.html, so that every
   page wears the same bar: burger on the left, wordmark centred, basket on the
   right with its count. Change one, change the other, or the site drifts apart.

   The basket itself is NOT here. Tapping the bag returns to the shop and opens
   the drawer there, so the drawer markup, the quantity handling and the
   checkout call live in exactly one place. */
.top{
  position:sticky;top:0;z-index:30;background:rgba(251,249,244,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:10px var(--gap);
}
.top__logo{display:flex;align-items:center;gap:10px;justify-self:center;text-decoration:none;color:inherit}
.top__logo img{height:25px;width:auto}
.top__logo span{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.top__btn{
  display:grid;place-items:center;width:38px;height:38px;padding:0;
  background:none;border:0;border-radius:10px;color:var(--ink);cursor:pointer;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.top__btn svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.top__menu{margin-left:-9px}
.top__bag{margin-right:-9px;position:relative}
.bagcount{
  position:absolute;top:1px;right:1px;min-width:17px;height:17px;
  display:grid;place-items:center;padding:0 4px;
  background:var(--ink);color:#fff;border-radius:999px;
  font-size:10px;font-weight:700;line-height:1;letter-spacing:0;
}
.menu{
  position:absolute;top:calc(100% + 8px);left:var(--gap);z-index:40;
  min-width:212px;margin:0;padding:6px;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px rgba(34,34,31,.14);
}
.menu[hidden]{display:none}
.menu a{
  display:block;padding:10px 12px;border-radius:9px;text-decoration:none;
  font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.012em;
}
.menu a:hover{background:var(--paper)}

main{padding:32px var(--gap) 34px}
.label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--olive);margin:0}
h1{font-size:29px;font-weight:800;letter-spacing:-.028em;line-height:1.12;margin:12px 0 14px}
h2{font-size:17px;font-weight:800;letter-spacing:-.022em;margin:28px 0 9px}
p{font-size:14.5px;font-weight:400;color:var(--grey);line-height:1.62;margin:0 0 13px}
p b,li b{color:var(--ink);font-weight:600}
main a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--olive);text-underline-offset:2px}
ul,ol{margin:0 0 13px;padding-left:20px}
li{font-size:14.5px;color:var(--grey);line-height:1.62;margin-bottom:8px}

/* a fact the client still has to supply. Deliberately loud: an unfilled
   legal page must never read as though it were finished. */
.todo{
  display:inline-block;padding:1px 7px;border:1.5px dashed var(--gold);border-radius:6px;
  font-size:13px;font-weight:600;color:var(--ink);background:#FDF6E4;
}

/* the flat panel used for the delivery prices and the trader identity */
.panel{
  margin:18px 0 20px;padding:4px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;
}
.panel div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.panel div:last-child{border-bottom:0}
.panel dt{font-size:13.5px;font-weight:500;color:var(--grey)}
.panel dd{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-align:right}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:#EFECE2;border-radius:5px;padding:1px 5px;color:var(--ink);
}
.updated{margin-top:26px;font-size:12.5px;color:#A5A59D}

/* The information pages carry no photography except this one. Same rounded
   card as everywhere else on the site, full width of the text column. */
.figure{margin:20px 0;padding:0}
.figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}

/* the line a page signs off on */
.closer{
  margin-top:22px;font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;line-height:1.5;
}

.pagenav{padding:20px var(--gap) 30px;border-top:1px solid var(--line);text-align:center}
.pagenav a,.pagenav .clink{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#B3B3AB;text-decoration:none;line-height:2.1;
}
.pagenav a:hover,.pagenav .clink:hover{color:var(--ink)}
.pagenav span{color:#D5D1C4;padding:0 4px}

/* Trader identity. The Companies Act and the E-Commerce Regulations want the
   company name, number and registered office available on the site — they do
   not want them dominating the page. Small, quiet, on every page. */
.legal{
  max-width:520px;margin:16px auto 0;font-size:10.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:#B3B3AB;line-height:1.75;
}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{color:var(--ink)}

a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}