/* The Tuck Box - core stylesheet, v2
   ------------------------------------------------------------------
   Same brand, less furniture.

   The v1 problem was not colour or type, it was density: every piece
   of content sat in a bordered white card on an off-white background,
   so nothing could recede. v2 puts content on white, uses space
   instead of boxes to group things, and spends the yellow once per
   screen rather than everywhere.

   Class names are unchanged from v1 so the scripts keep working.
   ------------------------------------------------------------------ */

:root {
  --black: #0a0a0a;
  --ink: #161614;
  --yellow: #f0e000;
  --paper: #ffffff;
  --off-white: #faf9f6;
  --light: #f4f3ef;
  --border: #e8e7e2;
  --rule: #f0efea;
  --grey: #78776f;
  --grey-dark: #4a4945;
  /* Full semantic palette, restored from v0. Each colour has a tint so
     status can be shown with colour rather than grey-on-grey text. */
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --blue: #2563eb;
  --blue-bg: #eff6ff;
  --orange: #d97706;
  --orange-bg: #fef9ee;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --purple: #7c3aed;
  --purple-bg: #faf5ff;

  --wrap: 1080px;
  --gutter: 20px;

  /* One shadow, used sparingly. */
  --lift: 0 1px 2px rgba(10, 10, 10, 0.04);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--black); }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 680px; margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px;
  background: var(--black); color: var(--yellow);
  padding: 12px 18px; font-weight: 700; z-index: 2000;
}
.skip:focus { left: 12px; top: 12px; }

/* ==========================================================
   HEADER
   v1 had ten tappable targets up here. v2 has four: the logo,
   one menu, Account and Basket. Everything else moved into
   the menu or into the page where it is relevant.
   ========================================================== */

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--paper);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06), 0 4px 14px rgba(10, 10, 10, 0.04);
}

.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.logo {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none; color: var(--black);
  white-space: nowrap;
}

.nav-desktop { display: none; gap: 28px; align-items: center; }
.nav-desktop a {
  font-size: 14px; font-weight: 600;
  color: var(--grey-dark); text-decoration: none;
}
.nav-desktop a:hover, .nav-desktop a[aria-current='page'] { color: var(--black); }

.header-actions { display: flex; align-items: center; gap: 4px; }

/* Header controls are quiet text, not a row of competing buttons. */
.header-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--grey-dark); text-decoration: none;
  padding: 8px 10px;
}
.header-link:hover { color: var(--black); }
.header-link .nav-badge {
  background: var(--black); color: var(--yellow);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 9px;
}

/* WhatsApp in the header carries the brand yellow rather than
   WhatsApp green, so the header stays on-brand. */
.header-wa {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--yellow); color: var(--black);
  font-size: 13.5px; font-weight: 700;
  padding: 8px 13px; text-decoration: none;
}
.header-wa svg { width: 15px; height: 15px; fill: currentColor; }
.header-wa:hover { background: #ffee1a; }
@media (max-width: 899px) { .header-wa .wa-num { display: none; } }

/* Header favourites heart: no circle, black when active. */
.header-heart { padding: 8px 8px; }
.header-heart svg { width: 19px; height: 19px; fill: none; stroke: var(--grey); stroke-width: 1.7; }
.header-heart:hover svg { stroke: var(--black); }
.header-heart[aria-pressed='true'] svg,
.header-heart.active svg { fill: var(--black); stroke: var(--black); }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 4px; width: 38px; height: 38px; align-items: center;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span { width: 17px; height: 1.5px; background: var(--black); display: block; }

.nav-mobile {
  display: none; background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 6px var(--gutter) 22px;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block; padding: 13px 0;
  font-size: 16px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.nav-mobile .nav-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--grey);
  padding: 22px 0 2px;
}

@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ==========================================================
   BUTTONS  -  two real variants, not four
   ========================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  font-family: 'Figtree', sans-serif;
  font-size: 14.5px; font-weight: 700; line-height: 1;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: opacity 0.12s ease;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: translateY(1px); }

/* Yellow is the primary action colour: add to basket, place order,
   the main CTA on every page. Black is the secondary action. */
.btn-primary { background: var(--yellow); color: var(--black); }
.btn-primary:hover { background: #ffee1a; opacity: 1; }

.btn-dark { background: var(--black); color: #fff; }
.btn-outline { background: transparent; color: var(--black); border-color: var(--border); }
.btn-outline:hover { border-color: var(--black); opacity: 1; }

.btn-yellow { background: var(--yellow); color: var(--black); }

.btn-sm { padding: 9px 15px; font-size: 13.5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================
   TYPE  -  four sizes, not eight
   ========================================================== */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

h1 { font-family: 'Syne', sans-serif; font-size: clamp(32px, 6vw, 46px); }
h2 { font-family: 'Syne', sans-serif; font-size: clamp(22px, 3.4vw, 28px); }
h3 { font-family: 'Figtree', sans-serif; font-size: 17px; letter-spacing: -0.01em; }
h4 { font-family: 'Figtree', sans-serif; font-size: 14px; letter-spacing: 0; }

.lede {
  font-size: clamp(16.5px, 2vw, 18.5px);
  color: var(--grey-dark);
  line-height: 1.6;
  max-width: 58ch;
}

/* Eyebrows were on every section in v1, which made them meaningless.
   Kept for the rare case where a section genuinely needs a category. */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--grey);
  margin-bottom: 14px;
}

.text-small { font-size: 13.5px; color: var(--grey); line-height: 1.55; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ==========================================================
   SECTIONS  -  space does the grouping
   ========================================================== */

.section { padding: 76px 0; }
.section-tight { padding: 48px 0; }
.section-light { background: var(--off-white); }
.section-dark { background: var(--black); color: #e9e8e3; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lede { color: #a8a7a0; }

.section-head { margin-bottom: 38px; max-width: 60ch; position: relative; padding-top: 18px; }
.section-head::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--yellow); }
.section-head h2 { margin-bottom: 12px; }

.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 52px; }
.prose h3 { margin-top: 36px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li + li { margin-top: 10px; }
.prose p, .prose li { color: var(--grey-dark); }
.prose strong { color: var(--ink); font-weight: 700; }

/* ==========================================================
   CARDS  -  no border by default. Grouping comes from space.
   ========================================================== */

.grid { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 660px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card { background: transparent; border: none; padding: 0; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--grey-dark); }
.card p + .card-link { margin-top: 12px; }

a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover h3 { text-decoration: underline; }

/* The bordered variant still exists for the few places that need
   a real container, such as the price panel. */
.card-bordered {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 26px;
}

.card-link {
  display: inline-block; font-size: 14px; font-weight: 700;
  color: var(--black); text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 1px;
}
.card-link:hover { border-bottom-color: var(--black); }

/* ==========================================================
   TAGS  -  exceptions only
   v1 tagged every product "Stock", which is the default state and
   therefore not information. v2 marks only what differs.
   ========================================================== */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; padding: 3px 8px; width: fit-content;
}
.tag-custom { background: var(--orange-bg); color: var(--orange); }
.tag-stock { background: var(--green-bg); color: var(--green); }
.tag-neutral { background: var(--light); color: var(--grey-dark); }
.tag-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* ==========================================================
   PRICE LIST  -  the signature element, kept
   ========================================================== */

.price-table { border-top: 1px solid var(--border); }

.price-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px 20px; align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.price-row .pname { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.price-row .pmeta { font-size: 13px; color: var(--grey); margin-top: 2px; }
.price-row .pval {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 19px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price-row .punit {
  display: block; font-family: 'Figtree', sans-serif;
  font-size: 11px; font-weight: 600; color: var(--grey);
  text-align: right; margin-top: 1px;
}
.price-note { font-size: 13.5px; color: var(--grey); margin-top: 18px; line-height: 1.55; }

/* ==========================================================
   TABLES
   ========================================================== */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.compare {
  width: 100%; min-width: 600px; border-collapse: collapse;
  font-size: 14.5px;
}
table.compare th, table.compare td {
  padding: 15px 16px; text-align: left;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.compare thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--grey);
  border-bottom-color: var(--border);
}
table.compare tbody th { font-weight: 700; color: var(--ink); width: 28%; }
table.compare td { color: var(--grey-dark); }
table.compare .col-us { background: #fffef2; }

/* ==========================================================
   STEPS
   ========================================================== */

.steps { counter-reset: step; }
.step { display: flex; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.step:last-child { border-bottom: none; }
.step-num {
  counter-increment: step; flex-shrink: 0;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--grey); padding-top: 2px; min-width: 26px;
}
.step-num::before { content: counter(step); }
.step-body h3 { margin-bottom: 6px; }
.step-body p { font-size: 15px; color: var(--grey-dark); }

/* ==========================================================
   CALLOUT  -  one style, no colour variants competing
   ========================================================== */

.callout {
  border-left: 2px solid var(--border);
  padding: 4px 0 4px 20px;
  font-size: 15px; line-height: 1.65;
  color: var(--grey-dark);
}
.callout .callout-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--grey);
  display: block; margin-bottom: 8px;
}
.callout-yellow { border-left-color: var(--yellow); }

/* ==========================================================
   CTA
   ========================================================== */

.cta-band { background: var(--black); color: #e9e8e3; padding: 72px 0; border-top: 4px solid var(--yellow); }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band .eyebrow { color: var(--yellow); }
.cta-band p { color: #a8a7a0; max-width: 54ch; margin-bottom: 26px; font-size: 16.5px; }
.cta-band .btn-outline { color: #fff; border-color: #3a3a35; }
.cta-band .btn-outline:hover { border-color: #fff; }

/* ==========================================================
   WHATSAPP
   The floating button was permanently in front of the content in
   v1. v2 keeps it, smaller and quieter, and relies on the
   contextual links in the page for the real work.
   ========================================================== */

.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 950;
  display: inline-flex; align-items: center; gap: 9px;
  width: 52px; height: 52px; justify-content: center;
  background: var(--yellow); color: var(--black);
  font-size: 14px; font-weight: 700; text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 3px 14px rgba(10, 10, 10, 0.22);
}
.wa-float svg { width: 21px; height: 21px; flex-shrink: 0; fill: currentColor; }
.wa-float .wa-label { display: none; }

.wa-inline {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--black); text-decoration: none;
  border-bottom: 2px solid var(--yellow);
}
.wa-inline:hover { border-bottom-color: var(--black); }
.wa-inline svg { width: 15px; height: 15px; fill: currentColor; }

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer { background: var(--black); color: #85847d; padding: 62px 0 34px; font-size: 14.5px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-bottom: 42px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer .logo { color: #fff; font-size: 15px; }
.site-footer p { margin-top: 14px; max-width: 38ch; line-height: 1.6; }
.footer-col h4 {
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 14px;
}
.footer-col a { display: block; color: #85847d; text-decoration: none; padding: 6px 0; }
.footer-col a:hover { color: var(--yellow); }
.footer-base {
  border-top: 1px solid #1d1d1a; padding-top: 26px;
  font-size: 12.5px; line-height: 1.7; color: #67665f;
}

/* ==========================================================
   HERO
   ========================================================== */

.hero { padding: 72px 0 68px; }
.hero-grid { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 60px; } }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }

.hero-price-card { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--yellow); }
.hero-price-head { padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.hero-price-head .eyebrow { margin-bottom: 3px; }
.hero-price-head p { font-size: 13.5px; color: var(--grey); }
.hero-price-card .price-table { border-top: none; padding: 0 22px; }
.hero-price-card .price-row:last-child { border-bottom: none; }

/* ==========================================================
   ROUTES  -  the "what brings you here" list
   Decorative 01/02/03 numbering removed: these are parallel
   options, not a sequence, so numbering encoded nothing.
   ========================================================== */

.route-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.route {
  display: flex; gap: 16px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease;
}
.route:hover h3 { text-decoration: underline; }
.route-mark { display: none; }
.route h3 { margin-bottom: 5px; }
.route p { font-size: 15px; color: var(--grey-dark); }
.route .arrow { margin-left: auto; color: var(--grey); font-size: 18px; flex-shrink: 0; transition: color 0.12s ease; }
.route:hover .arrow { color: var(--black); }
.route:hover { border-bottom-color: var(--yellow); }

/* ==========================================================
   ARTICLES
   ========================================================== */

.article-item {
  display: block; padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.article-item:hover h3 { text-decoration: underline; }
.article-meta {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--grey); margin-bottom: 8px;
}
.article-item p { font-size: 15px; color: var(--grey-dark); margin-top: 7px; }

/* ==========================================================
   FAQ  -  no boxes, just rules
   ========================================================== */

details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary {
  padding: 20px 0; font-weight: 700; font-size: 16px;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+'; font-family: 'Syne', sans-serif; font-size: 18px;
  color: var(--grey); flex-shrink: 0;
}
details.faq[open] summary::after { content: '-'; }
details.faq .faq-body {
  padding: 0 0 22px; font-size: 15px; color: var(--grey-dark); line-height: 1.65;
}
details.faq .faq-body > * + * { margin-top: 14px; }

/* ==========================================================
   BREADCRUMB
   ========================================================== */

.crumb { font-size: 13px; color: var(--grey); padding: 20px 0 0; }
.crumb a { color: var(--grey); text-decoration: none; }
.crumb a:hover { color: var(--black); }

/* ==========================================================
   UTILITIES
   ========================================================== */

.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 26px; }
.mt-32 { margin-top: 38px; }
.mb-24 { margin-bottom: 26px; }

/* Highlighted phrase in the hero. Black block, yellow text, so the
   emphasis carries the brand rather than just being bold. */
.mark {
  background: var(--black);
  color: var(--yellow);
  padding: 0 0.12em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==========================================================
   COOKIE CONSENT
   Sits above the WhatsApp bubble so it cannot be obscured.
   ========================================================== */

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--black); color: #d9d8d2;
  border-top: 3px solid var(--yellow);
  padding: 18px var(--gutter);
}
.consent-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.consent-text { flex: 1; min-width: 240px; }
.consent-text strong { color: #fff; display: block; font-size: 14px; margin-bottom: 4px; }
.consent-text p { font-size: 13.5px; line-height: 1.55; margin: 0; }
.consent-text a { color: var(--yellow); }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-actions .btn-outline { color: #fff; border-color: #3a3a35; }
.consent-actions .btn-outline:hover { border-color: #fff; }