:root {
  /* ── Modern minimal luxury palette ─────────────────────────────
     Warm near-white paper · soft near-black ink · one clay accent. */

  /* Ink */
  --ink: #1c1917;
  --ink-2: #232019;
  --ink-soft: #4d453e;

  /* Paper — warm, crisp, luminous */
  --paper: #fbf9f5;
  --paper-2: #f3efe8;
  --paper-deep: #ece5db;

  /* The one confident accent — warm clay (a nod to skin tones) */
  --accent: #c06a49;
  --accent-deep: #97472d;
  --accent-soft: #ecd8cc;

  /* Soft, muted pastel tints for alternating colourful blocks */
  --tint-blush: #f8e7e1;
  --tint-sage: #e7efe6;
  --tint-butter: #f7efda;
  --tint-sky: #e4edf1;
  --tint-lilac: #eee7f0;

  /* Refined neutral "skin" ramp — kept for back-compat with existing markup */
  --skin-1: #f1e8df;
  --skin-2: #e5d6c9;
  --skin-3: #d0af9c;
  --skin-4: #a5654b;
  --skin-5: #6d4232;

  /* Gold aliases now resolve to the single accent (no more gradient gold) */
  --gold: var(--accent);
  --gold-2: #d99878;

  --line: rgba(28, 25, 23, 0.1);
  --line-strong: rgba(28, 25, 23, 0.2);
  --line-light: rgba(251, 249, 245, 0.16);
  --muted: #6f665e;
  --ok: #3d6b4f;
  --shadow: 0 30px 80px rgba(28, 25, 23, 0.12);

  /* "Every shade" brand whisper — soft skin-tone ramp, no longer a loud rainbow */
  --spectrum: linear-gradient(
    90deg,
    #6d4232,
    #a5654b,
    #d0af9c,
    #ecd8cc,
    #d0af9c,
    #a5654b,
    #6d4232
  );

  --font-display: "Spectral", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --max: 1180px;
  --header-h: 5.6rem;

  /* Depth & shape */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  /* Soft, luminous shadows for a light palette */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04), 0 6px 18px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.06), 0 20px 44px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 10px 30px rgba(28, 25, 23, 0.08), 0 44px 90px rgba(28, 25, 23, 0.12);

  /* Motion easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Generous spacing scale — breathing room is the whole point */
  --space-1: 0.75rem;
  --space-2: 1.5rem;
  --space-3: 2.5rem;
  --space-4: 4rem;
  --space-5: 6.5rem;
  --space-6: 9rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(110% 55% at 100% -5%, rgba(192, 106, 73, 0.045), transparent 60%),
    var(--paper);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  /* Colour as well as font. Without this a button falls back to the browser's
     own default text colour, which is black in Chrome and something else
     entirely in Safari -- which is how the shop filter chips came to render as
     empty outlines on an iPad while looking correct on every desktop.
     Inheriting is right nearly everywhere: a button on a dark panel wants light
     text, one on paper wants dark, and anything needing a specific colour sets
     its own below. */
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

.container {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.15rem;
  padding: 0.85rem 1.55rem;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.4s var(--ease-spring), background 0.28s ease,
    filter 0.28s ease, box-shadow 0.35s ease, color 0.28s ease;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(-1px) scale(0.985);
}

/* Magnetic pull applied inline by script via --mx / --my */
.btn[data-magnetic] {
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--skin-5);
}

.btn-gold {
  background: var(--accent);
  color: #fff;
}

.btn-gold:hover {
  background: var(--accent-deep);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(8, 7, 6, 0.28);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-light {
  background: var(--paper);
  color: var(--ink);
}

.btn-light:hover {
  background: var(--gold-2);
}

.section {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.section-head {
  display: grid;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 44rem;
}

.section-head h2 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
}

.section-head p {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 40rem;
}

.product-grid {
  display: grid;
  gap: 2.25rem 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 940px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Shared card depth — applies to both component-rendered and
   JS-rendered (shop) cards, which scoped styles can't reach. */
.product-grid .media {
  position: relative;
  border-radius: var(--radius);
  background: var(--paper-deep);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.5s var(--ease-out);
}

/* Trade + RRP price block — global so JS-rendered shop cards match */
.card .price {
  display: grid;
  gap: 0.15rem;
  line-height: 1.15;
}
.card .price-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.card .price-line strong {
  font-size: 1.1rem;
  font-weight: 800;
}
.card .unit {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--skin-4);
  font-weight: 700;
}
.card .was {
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: line-through;
}
.sale-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: var(--ink);
  color: var(--gold-2, #f0d78a);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.55rem;
}

/* Floating brand badge — kept for legacy cards if present */
.brand-float {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.34rem 0.72rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(251, 249, 245, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.product-grid .card {
  transition: transform 0.5s var(--ease-out);
}

.product-grid .card:hover {
  transform: translateY(-4px);
}

.product-grid .card:hover .media {
  box-shadow: var(--shadow-lg);
}

/* Full card styling in global so the shop's JS-rendered cards match the ProductCard component */
.product-grid .card {
  display: grid;
  gap: 1rem;
}
.product-grid .card .media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.product-grid .card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-grid .card:hover .media img {
  transform: scale(1.07);
}
.product-grid .card .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  display: flex;
  justify-content: center;
  background: linear-gradient(transparent, rgba(8, 7, 6, 0.72));
  opacity: 0;
  transform: translateY(8px);
  transition: 0.35s ease;
}
.product-grid .card .overlay span {
  color: var(--paper);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(248, 243, 237, 0.45);
  padding: 0.55rem 0.9rem;
  background: rgba(8, 7, 6, 0.35);
}
.product-grid .card:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}
.product-grid .card .meta {
  display: grid;
  gap: 0.4rem;
}
.product-grid .card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.product-grid .card .cat {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--skin-4);
  font-weight: 700;
}
.product-grid .card .wish {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
}
.product-grid .card .wish.active,
.product-grid .card .wish:hover {
  color: var(--skin-4);
}
.product-grid .card h3 {
  font-size: 1.28rem;
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
}
.product-grid .card .meta p {
  color: var(--muted);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-grid .card .tag {
  justify-self: start;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--skin-5, #4a2d21);
  background: rgba(226, 176, 144, 0.22);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.product-grid .card .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.product-grid .card .discover {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.spectrum-line {
  height: 2px;
  width: 100%;
  background: var(--spectrum);
  opacity: 0.85;
}

.fade-up {
  animation: fadeUp 0.9s var(--ease-out) both;
}

/* Legal / policy pages */
.legal {
  max-width: 52rem;
  margin: 0 auto;
}
.legal h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0.4rem;
}
.legal .updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
.legal h2 {
  font-size: 1.4rem;
  margin: 2.2rem 0 0.6rem;
}
.legal h3 {
  font-size: 1.05rem;
  margin: 1.3rem 0 0.35rem;
}
.legal p,
.legal li {
  color: var(--ink-soft);
  line-height: 1.7;
}
.legal ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0 0.8rem;
}
.legal li {
  margin-bottom: 0.35rem;
}
.legal a {
  color: var(--skin-4);
  text-decoration: underline;
}
.legal address {
  font-style: normal;
  color: var(--ink-soft);
  line-height: 1.7;
}
.legal .lead {
  font-size: 1.05rem;
}

/* Screen-reader-only (kept in the accessibility tree + for SEO, hidden visually) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fade-up-delay {
  animation: fadeUp 1s var(--ease-out) 0.12s both;
}

.fade-up-delay-2 {
  animation: fadeUp 1.05s var(--ease-out) 0.24s both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Native scroll-driven reveals ─────────────────────────────
   Elements rise + fade as they enter the viewport. Progressive
   enhancement: only browsers that support animation-timeline get
   the effect — everyone else sees fully-visible content by default,
   so there is never a stuck-invisible element. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal,
    .reveal-child > * {
      animation: revealIn both linear;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }

    /* Stagger children of a container (product grids, tile rows) */
    .reveal-child > *:nth-child(2) { animation-range: entry 8% cover 28%; }
    .reveal-child > *:nth-child(3) { animation-range: entry 11% cover 30%; }
    .reveal-child > *:nth-child(4) { animation-range: entry 14% cover 32%; }
    .reveal-child > *:nth-child(n + 5) { animation-range: entry 16% cover 34%; }

    .reveal-scale {
      animation: revealScale both linear;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

@keyframes revealIn {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealScale {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Global scroll-progress bar (native scroll-driven, zero JS) ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--gold-2));
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: progressGrow linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── Film grain + drifting light — filmic depth on any surface ── */
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@keyframes kenburns {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.14);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 174, 74, 0.45);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(212, 174, 74, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fade-up,
  .fade-up-delay,
  .fade-up-delay-2,
  .reveal,
  .reveal-scale,
  .reveal-child > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .grain::before {
    display: none;
  }
  .btn[data-magnetic] {
    transform: none !important;
  }
}

/* Placeholder banner on legal pages awaiting the client's final wording.
   Deliberately loud: a draft policy that looks finished is worse than an
   obvious gap, because nobody chases it. */
.legal-draft {
  margin: 0 0 1.8rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--tint-butter, #f7f2e8);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  line-height: 1.65;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0 1.4rem;
  font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.legal-table th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Header search ────────────────────────────────────────────────
   Replaces an icon that merely linked to /shop/. A GET form, so it works
   without JavaScript and every result is a shareable URL. */

.header-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.header-search-input {
  width: clamp(9rem, 16vw, 15rem);
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.header-search-input::placeholder {
  color: var(--muted);
}

.header-search-input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}

/* Remove the browser's own clear button, which sits awkwardly in a pill. */
.header-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* On phones the field would crowd out the logo, so it collapses to just the
   button. Submitting still works: the button posts an empty q, which the shop
   treats as "no filter". */
@media (max-width: 760px) {
  .header-search-input {
    display: none;
  }
}

/* ── Footer newsletter ────────────────────────────────────────── */

.footer-newsletter {
  margin-bottom: 1.6rem;
}

.footer-newsletter h4 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.footer-newsletter p {
  margin: 0 0 0.7rem;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 26rem;
}

.newsletter-form input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-family: inherit;
  font-size: 0.88rem;
}

.newsletter-form input[type="email"]::placeholder {
  color: currentColor;
  opacity: 0.5;
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.14);
}

.newsletter-form .btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ── Reviews ──────────────────────────────────────────────────── */

.stars {
  margin: 0;
  letter-spacing: 0.12em;
  line-height: 1;
}

.stars .star {
  color: var(--line-strong);
}

.stars .star.on {
  color: var(--gold);
}

.stars-lg {
  font-size: 1.4rem;
  margin-top: 0.4rem;
}

.review-count {
  font-size: 0.6em;
  color: var(--muted);
}

.review-cta {
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.review-pending,
.review-note {
  font-size: 0.88rem;
  color: var(--muted);
}

.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}

.review {
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}

.review h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.05rem;
}

.review-body {
  margin: 0.4rem 0 0.8rem;
  line-height: 1.7;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.review-verified {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(31, 122, 77, 0.12);
  color: #1f7a4d;
  font-size: 0.75rem;
}

/* Star rating input on the review form */
.rating-field {
  border: 0;
  padding: 0;
  margin: 0 0 1.2rem;
}

.rating-field legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rating-field ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.rating-field label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ── Trade price list ─────────────────────────────────────────── */

.pricelist-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.pricelist-meta,
.pricelist-note {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.pricelist-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pricelist-group {
  margin-top: 2rem;
  /* Keep a category's heading with at least some of its rows when printing. */
  break-inside: auto;
}

.pricelist-group h2 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--ink);
}

.pricelist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.pricelist-table th,
.pricelist-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.pricelist-table th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pricelist-table th span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pricelist-table .num {
  text-align: right;
  white-space: nowrap;
}

.pricelist-table .sku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  color: var(--muted);
}

.pricelist-table .brand {
  font-size: 0.78rem;
  color: var(--muted);
}

.pricelist-table .poa {
  color: var(--muted);
  font-style: italic;
}

.pricelist-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

/* The browser's own "Save as PDF" is the PDF export. Strip everything that
   should not appear on paper and force ink-friendly colours. */
@media print {
  .no-print,
  header,
  footer.site-footer,
  .marquee {
    display: none !important;
  }

  .pricelist {
    padding: 0;
  }

  .pricelist-table {
    font-size: 10pt;
  }

  .pricelist-table thead {
    display: table-header-group; /* repeat the header on every page */
  }

  .pricelist-table tr {
    break-inside: avoid;
  }

  a[href]::after {
    content: none; /* no URL noise beside every link */
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ── Back-in-stock capture ────────────────────────────────────── */

.stock-alert-form {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}

.stock-alert-lead {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.stock-alert-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stock-alert-row input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
}

.inline-form {
  display: inline;
}

/* ── Skincare assistant ───────────────────────────────────────────
   Revealed by static/js/chat.js, so nothing shows without JavaScript. */

/* Raised clear of the footer. The distance is the footer's own bottom bar
   plus a little breathing room, which is what the bubble would otherwise
   cover. */
.chat-widget.is-raised {
  transform: translateY(-5.5rem);
}

@media (max-width: 640px) {
  .chat-widget.is-raised {
    transform: translateY(-7rem);
  }
}

/* The [hidden] attribute must win over the display rules below.
   An author `display: flex` beats the user-agent stylesheet's
   `[hidden] { display: none }`, so without these two rules the panel is
   visible from page load and the close button appears to do nothing -- it
   sets an attribute that CSS then ignores. Same for the widget itself, which
   would otherwise render for visitors with JavaScript disabled. */
.chat-widget[hidden],
.chat-panel[hidden] {
  display: none !important;
}

.chat-widget {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  /* Lifted while the footer is on screen, so the bubble stops sitting on top
     of the logo lockup and the "Every Shade - Every Ritual" line. Driven by
     static/js/chat.js watching the footer; without JavaScript the widget is
     not rendered at all, so the default position is never seen uncovered. */
  transition: transform 0.25s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}

.chat-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(28, 25, 23, 0.28);
  transition: transform 0.2s ease, background 0.2s ease;
}

.chat-toggle:hover {
  transform: translateY(-2px);
  background: var(--ink-2);
}

.chat-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.chat-widget.is-open .chat-toggle {
  display: none;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2rem));
  height: min(30rem, calc(100vh - 6rem));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(28, 25, 23, 0.28);
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--ink);
  color: var(--paper);
}

.chat-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.chat-subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  opacity: 0.7;
}

.chat-close {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
}

.chat-close:hover {
  opacity: 1;
}

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Momentum scrolling inside the panel, not the page behind it. */
  overscroll-behavior: contain;
}

.chat-msg {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  /* A pasted URL or a long product code has no space to break at, and would
     otherwise push the bubble past the panel and leave the log scrolling
     sideways. */
  overflow-wrap: anywhere;
}

.chat-msg p {
  margin: 0 0 0.5rem;
}

.chat-msg p:last-child {
  margin-bottom: 0;
}

.chat-msg.assistant {
  align-self: flex-start;
  background: var(--paper-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

.chat-msg a {
  color: inherit;
  text-decoration: underline;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chat-suggestions button {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.chat-suggestions button:hover {
  background: var(--paper-2);
  border-color: var(--ink);
}

.chat-typing {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chatBlink 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatBlink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.chat-form {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.88rem;
}

.chat-form input:focus {
  outline: none;
  border-color: var(--ink);
}

.chat-send {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.chat-send:disabled {
  opacity: 0.45;
  cursor: default;
}

.chat-disclaimer {
  margin: 0;
  padding: 0 0.9rem 0.7rem;
  font-size: 0.7rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .chat-toggle,
  .chat-typing span {
    transition: none;
    animation: none;
  }
}

/* On a phone the panel takes the screen; a 23rem card floating over content
   is unusable at that size. */
@media (max-width: 520px) {
  .chat-widget {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    align-items: stretch;
  }

  .chat-panel {
    width: 100%;
    height: min(78vh, calc(100vh - 5rem));
  }

  .chat-toggle {
    align-self: flex-end;
  }
}

/* ── Loose ends found by auditing template classes against the CSS ──
   Each of these was a class I introduced with no rule behind it, so the
   element fell back to browser defaults: a validation error in body text, a
   reorder button with no spacing, a search button that did not line up with
   its pill-shaped input. */

/* Field-level validation message. Errors that look like ordinary text get
   missed, which is the one thing an error must not do. */
.field-error {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: #b3261e;
}

/* Reorder, on a past order */
.reorder-form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 1.4rem;
}

.reorder-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* The header search button sits against a pill-shaped input, so it needs the
   same round geometry or the pair looks mismatched. */
.header-search-btn {
  flex: 0 0 auto;
  border-radius: 50%;
}

.chat-toggle-label {
  white-space: nowrap;
}

/* On a narrow phone the chat bubble competes with the basket and menu, so it
   collapses to just the icon. */
@media (max-width: 380px) {
  .chat-toggle-label {
    display: none;
  }

  .chat-toggle {
    padding: 0.75rem;
  }
}

/* ── Contact: map, address and socials ────────────────────────────
   Ported from the Phase 1 contact page, which our first pass had dropped. */

.contact-map-section {
  padding-top: 0;
}

.contact-map-grid {
  display: grid;
  gap: 1.6rem;
  align-items: start;
}

@media (min-width: 860px) {
  .contact-map-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}

.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* A fixed aspect ratio rather than a fixed height, so the map is not a
     letterbox slit on a phone or a wasteland on a desktop. */
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}

.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-meta h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.map-meta > p {
  margin: 0 0 1.2rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.meta-rows {
  display: grid;
  gap: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.meta-rows span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.meta-rows p {
  margin: 0;
  line-height: 1.65;
}

/* The contact page's row of text links, under a rule. Named for that page:
   the footer has its own row of icon buttons which shares nothing but the
   idea, and used to inherit this divider by accident. */
.contact-socials {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.socials-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-socials a {
  font-size: 0.9rem;
}

/* ── Refunds on a customer's order ────────────────────────────────── */

/* Sits in the totals column under the order total. Money that went back, so
   it reads as a credit rather than another charge. */
.summary-row.refunded {
  color: var(--accent);
  font-weight: 600;
}

.refund-reason {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--line-light);
  background: var(--paper-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

.refund-note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Cookie consent ───────────────────────────────────────────────── */

.cookie-consent {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.cookie-consent.is-shown {
  transform: translateY(0);
  opacity: 1;
}

/* [hidden] loses to any display rule unless it is said outright -- the same
   trap that kept the chat panel open for a fortnight. */
.cookie-consent[hidden],
.cookie-consent__prefs[hidden],
.cookie-consent__main[hidden] {
  display: none !important;
}

.cookie-consent__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-consent__close:hover,
.cookie-consent__close:focus-visible {
  background: var(--paper-2);
  color: var(--ink);
}

.cookie-consent__main {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.cookie-consent__icon {
  flex: 0 0 auto;
  color: var(--accent);
  margin-top: 0.1rem;
}

.cookie-consent__body {
  min-width: 0;
}

.cookie-consent p {
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
  line-height: 1.55;
  padding-right: 1.4rem;
}

.cookie-consent a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

.cookie-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  /* Two words never break across two lines inside a pill. */
  white-space: nowrap;
}

.cookie-btn--accept {
  padding: 0.55rem 1.6rem;
  border-color: var(--ink);
  font-weight: 700;
}

.cookie-btn--accept:hover,
.cookie-btn--accept:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* Decline is plain text beside the pill, but it is a real choice and has to be
   as easy to hit -- same height, same target, no colour trickery to make it
   look like the lesser option. */
.cookie-btn--decline {
  padding: 0.55rem 0.4rem;
  color: var(--muted);
}

.cookie-btn--decline:hover,
.cookie-btn--decline:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.cookie-consent__manage {
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.cookie-consent__manage:hover,
.cookie-consent__manage:focus-visible {
  color: var(--ink);
}

/* ── the preferences panel ── */

.cookie-consent__prefs h2 {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
}

.cookie-pref {
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-light);
}

.cookie-pref__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.cookie-pref__name {
  font-size: 0.86rem;
  font-weight: 600;
}

.cookie-pref__locked {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cookie-pref p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  padding-right: 0;
}

.cookie-pref__none {
  margin: 0.9rem 0 1rem !important;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-light);
  font-size: 0.78rem !important;
  color: var(--muted);
}

/* A switch, built from a real checkbox so it is keyboard reachable and
   announces its own state. */
.cookie-switch {
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

.cookie-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  /* Above the track it is hidden behind. A click on the label toggles it either
     way, but with the track on top nothing can click the input itself -- which
     assistive tech and automated checks both try to do. */
  z-index: 1;
}

.cookie-switch__track {
  display: block;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s ease;
}

.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.2s ease;
}

.cookie-switch input:checked + .cookie-switch__track {
  background: var(--accent);
}

.cookie-switch input:checked + .cookie-switch__track::after {
  transform: translateX(1.15rem);
}

.cookie-switch input:focus-visible + .cookie-switch__track {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cookie-consent__actions--prefs {
  margin-top: 0.4rem;
}

/* On a phone the card sits above the chat button, which shares the corner. */
@media (max-width: 640px) {
  .cookie-consent {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 5.5rem;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent,
  .cookie-switch__track,
  .cookie-switch__track::after {
    transition: none;
  }
}

/* ── Welcome-offer popup ─────────────────────────────────────────── */

.promo-popup {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.promo-popup.is-shown { opacity: 1; }
.promo-popup[hidden] { display: none !important; }

.promo-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.55);
}

.promo-popup__card {
  position: relative;
  overflow: hidden;
  width: min(27rem, 100%);
  padding: 3rem 2.2rem 2rem;
  border-radius: 20px;
  /* A warm wash behind the paper so the card reads as part of the shop rather
     than a white box dropped on top of it. */
  background:
    radial-gradient(120% 80% at 50% 0%, var(--paper-2), transparent 62%),
    var(--paper);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.25s ease;
}

/* A hairline of the accent along the top edge, the same gesture the site uses
   above the header and the footer. */
.promo-popup__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold-2), var(--accent));
}

.promo-popup.is-shown .promo-popup__card { transform: none; }

/* The figure, set enormous and faint behind the words. It carries the offer at
   a glance so the sentence underneath can stay short -- and being decorative it
   is hidden from screen readers, which get the heading instead. */
.promo-popup__figure {
  position: absolute;
  /* Sliced by the card's top edge on purpose, but only just: cut it deeper and
     the digits stop being readable as a number and start looking like a
     rendering fault. */
  top: -0.16em;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 10.5rem;
  line-height: 1;
  color: var(--gold-2);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.promo-popup__close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.promo-popup__close:hover,
.promo-popup__close:focus-visible { background: var(--paper-2); color: var(--ink); }

.promo-popup__eyebrow {
  position: relative;
  margin: 0 0 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.promo-popup h2 {
  position: relative;
  margin: 0 0 0.7rem;
  font-size: 1.85rem;
  line-height: 1.15;
}

.promo-popup__lead {
  position: relative;
  margin: 0 0 1.4rem;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--muted);
}

.promo-popup__form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.promo-popup__form[hidden],
.promo-popup__result[hidden] { display: none !important; }

.promo-popup__form input[type="email"] {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.72rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: inherit;
  font-size: 0.9rem;
}

.promo-popup__form .btn { flex: 0 0 auto; white-space: nowrap; }

.promo-popup__result {
  position: relative;
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Only the outcome carrying a code is set up to be selected and copied.
   Doing that to a sentence makes it awkward to read. */
.promo-popup__result[data-tone="code"] {
  font-weight: 600;
  user-select: all;
}

/* "Already on the list" is neither a win nor a failure. */
.promo-popup__result[data-tone="info"] { color: var(--muted); }

.promo-popup__result[data-tone="error"] {
  background: #fdf1ef;
  color: #b3261e;
}

.promo-popup__decline {
  position: relative;
  display: block;
  margin: 1.1rem auto 0;
  padding: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.promo-popup__decline:hover,
.promo-popup__decline:focus-visible { color: var(--ink); }

/* On a narrow screen the figure would swamp the card. */
@media (max-width: 420px) {
  .promo-popup__figure { font-size: 7.5rem; }
  .promo-popup__card { padding: 2.4rem 1.4rem 1.6rem; }
  .promo-popup h2 { font-size: 1.55rem; }
  .promo-popup__lead { font-size: 0.83rem; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-popup, .promo-popup__card { transition: none; }
}

/* ── The offer tab ────────────────────────────────────────────────────
   Sits bottom-left once the popup has been closed, so the discount stays one
   click away on every page instead of being gone the moment it is dismissed.
   Bottom-left because the assistant owns bottom-right and the cookie card
   leaves that corner as soon as it is answered. */

.promo-tab {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 55;
  /* It floats over the page, so it will always be on top of something. Keeping
     it small and slightly translucent means the words underneath stay legible
     instead of disappearing behind a solid disc -- it was covering the product
     count on the shop page. It goes fully opaque on hover, when it is the thing
     being aimed at. */
  opacity: 0.92;
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 3.9rem;
  height: 3.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
}

.promo-tab[hidden] { display: none !important; }

.promo-tab.is-shown {
  transform: scale(1);
  opacity: 0.92;
}

.promo-tab:hover,
.promo-tab:focus-visible {
  background: var(--ink);
  transform: scale(1.06);
  opacity: 1;
}

.promo-tab__figure {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.promo-tab__word {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* The assistant sits bottom-right, so this can stay in the bottom-left corner
   on a phone as well. The cookie card is the only thing that shares the space,
   and the tab does not appear until that has been answered. */
@media (max-width: 640px) {
  .promo-tab {
    left: 0.75rem;
    bottom: 0.75rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-tab { transition: none; }
}


/* ── Readable at arm's length ─────────────────────────────────────────
   Anything that reads as a sentence sits at 0.85rem or more. The uppercase
   micro-labels -- eyebrows, tags, button text -- stay small on purpose: they
   are three words in wide tracking, not something anybody reads a paragraph of.
   Whole sentences at 11px are simply hard work, and harder the older the eyes
   looking at them. */

.chat-disclaimer,
.chat-subtitle,
.form-smallprint,
.field .helptext,
.helptext,
.cookie-pref__none,
.promo-popup__small,
.legal .updated {
  font-size: 0.85rem !important;
  line-height: 1.55;
}

/* Inline links inside body copy inherit the size of the text around them
   rather than shrinking away from it. */
.prose a,
.legal a,
.form-smallprint a,
.helptext a {
  font-size: inherit;
}