/* ------------------------------------------------------------------ tokens */
/* Quinta ("paper & ink" version): an unhurried botanical retreat. Paper, charcoal ink, an olive accent; Italiana for display
   headings, DM Sans for everything else (both self-hosted in fonts/, SIL Open Font License). */
@font-face { font-family: "Italiana"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/italiana-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-italic-latin.woff2") format("woff2"); }
:root {
  /* Paper & ink: a whiter page and charcoal text, so green is kept for headings, buttons and selected answers
     (green type on green backgrounds is tiring to read). */
  --accent: #365a3b;        /* olive green: buttons, links, selected answers */
  --accent-d: #2c4a31;
  --accent-dd: #2c4a31;     /* deep green: headings */
  --accent-soft: #e9eddf;   /* pale sage: small selected backgrounds, step numbers */
  --garden: #f2ede1;        /* linen: the landing hero's panel (with a fine olive line) */
  --garden-line: #b8c3a6;
  --cream: #fdfcf8;         /* the page */
  --paper: #ffffff;
  --ink: #2f2d29;           /* warm charcoal: body text */
  --ink-2: #45423b;         /* secondary text */
  --muted: #6e6a61;
  --line: #e4e0d4;
  --gold: #a8843a;          /* ochre: focus rings */
  --gold-ink: #8a6a2f;      /* ochre text: the small capitals above headings */
  --gold-soft: #e2d6a8;
  --ok: #2f7a4b;
  --err: #b3261e;
  --offer: #b0532e;         /* terracotta: offer badges */
  --wine: #7a2f3d;          /* deep red wine: the questions on a style's page (olive's complement; easy to read on cream) */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(47, 45, 41, .04), 0 6px 22px rgba(47, 45, 41, .05);
  --serif: "Italiana", "Didot", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.locked { overflow: hidden; }
.wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px; }
main.wrap { flex: 1; padding-top: 8px; padding-bottom: 40px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; color: var(--accent-dd); letter-spacing: -.01em; }
h3, h4 { font-family: var(--sans); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); letter-spacing: -.02em; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }

/* ------------------------------------------------------------------ chrome */
.testmode {
  background: #fff4cc; color: #6b5300; font-size: .82rem; text-align: center; padding: 6px 12px;
  border-bottom: 1px solid #f0dc8c;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  max-width: 600px; width: 100%; margin: 0 auto; padding: 16px 20px 8px;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--accent-dd); font-family: var(--serif); font-size: 1.45rem; font-weight: 400; letter-spacing: .01em;
}
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); padding: 3px; }
.lang button {
  border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); padding: 5px 11px; border-radius: 999px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent-d); color: #fff; }

.foot { text-align: center; color: var(--muted); font-size: .82rem; padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--line); }
.foot p { margin: .3em 0; }

/* ------------------------------------------------------------------ buttons */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 13px 20px; min-height: 48px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-lg { font-size: 1.08rem; padding: 16px 26px; min-height: 56px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(54, 90, 59, .25); }
.btn-primary:hover:not([disabled]) { background: var(--accent-d); }
.btn-ghost { background: transparent; color: var(--accent-d); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper); }
.btn-link { background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 10px; min-height: 0; font-weight: 500; }
.btn-whatsapp { background: #1f8f4e; color: #fff; }
.btn-whatsapp:hover { background: #17733e; }

/* ------------------------------------------------------------------ landing */
.hero { margin: 14px 0 6px; padding: 46px 22px 22px; text-align: center; background: var(--garden); border: 1.5px solid var(--garden-line);
        border-radius: 50% 50% 16px 16px / 170px 170px 16px 16px; }
.hero::before { content: ""; display: block; width: 64px; height: 40px; margin: 0 auto 14px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M6 34 C20 28 34 18 58 6' fill='none' stroke='%2354734d' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='18' cy='25' rx='8' ry='3.2' transform='rotate(-55 18 25)' fill='%236c8356'/%3E%3Cellipse cx='25' cy='27' rx='8' ry='3.2' transform='rotate(15 25 27)' fill='%237d9466'/%3E%3Cellipse cx='33' cy='15' rx='8' ry='3.2' transform='rotate(-60 33 15)' fill='%237d9466'/%3E%3Cellipse cx='41' cy='18' rx='8' ry='3.2' transform='rotate(10 41 18)' fill='%236c8356'/%3E%3Cellipse cx='50' cy='6' rx='7' ry='3' transform='rotate(-20 50 6)' fill='%236c8356'/%3E%3Ccircle cx='29' cy='31' r='3' fill='%233f5a3a'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero .lead { margin-left: auto; margin-right: auto; }
.kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--gold-ink); margin-bottom: .8em; }
.kicker.light { color: var(--gold-ink); }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 34em; }
.cta-group { margin: 26px 0 18px; }
.cta-group .btn { width: 100%; }
.cta-group p { text-align: center; margin-top: 10px; }
.offer {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font-size: .95rem; box-shadow: var(--shadow);
}
.offer-dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }

.how, .products { padding-top: 34px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 14px; }
.steps .num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-family: var(--sans); font-weight: 700;
}
.steps h3 { margin-bottom: .2em; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.prod-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .prod-grid { grid-template-columns: 1fr 1fr; } }
.prod { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.prod h3 { font-size: 1.08rem; margin-bottom: .3em; }
.prod p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.cta-bottom { padding-top: 28px; display: grid; gap: 8px; justify-items: center; }
.cta-bottom .btn-primary { width: 100%; }

/* ------------------------------------------------------------------ quiz */
.quiz, .contact, .thanks { padding-top: 12px; }
.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0 22px; }
.progress .bar { height: 100%; background: linear-gradient(90deg, var(--accent), #5b7f55); border-radius: 999px; transition: width .35s ease; }
.section-label { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .6em; }
.section-label .muted { font-weight: 500; letter-spacing: 0; text-transform: none; }
.q { font-size: clamp(1.8rem, 7vw, 2.3rem); }
.hint { color: var(--muted); margin-top: -.2em; }

.opts { display: grid; gap: 10px; margin: 18px 0 8px; }
.opt {
  -webkit-appearance: none; appearance: none; width: 100%; text-align: left; font: inherit; color: inherit;
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; min-height: 58px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.opt:hover { border-color: #c4cdb3; }
.opt.is-sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.opt-label { font-weight: 600; }
.opt-desc { font-size: .9rem; color: var(--muted); }
.opt .tick {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #bcc6ad; background: #fff;
}
.opt.is-sel .tick { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--accent); }
.opt .opt-label { flex: 1; }
.swatch {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
}
.swatch.sm { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; margin-right: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.swatch.bubbles {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 58%, rgba(255,255,255,.95) 0 1.6px, transparent 2px),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.9) 0 1.3px, transparent 1.8px),
    var(--sw);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.chip {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: .95rem; font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 15px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.chip.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip[disabled] { opacity: .4; cursor: not-allowed; }
.chip.exclusive { border-style: dashed; }
.chip.exclusive.is-sel { border-style: solid; }
/* "No idea" above a line; "trying new grapes" under a labelled line of its own */
.chip-sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0 0; }
.chips + .chip-sep + .chips { margin-top: 14px; }
.chip-sep-label { border-top: 1px solid var(--line); margin: 16px 0 0; padding-top: 12px; color: var(--muted); font-size: .92rem; }
.chip-sep-label + .chips { margin-top: 10px; }

.scale { display: flex; justify-content: space-between; gap: 6px; margin: 26px 0 8px; }
.dot {
  -webkit-appearance: none; appearance: none; flex: 1; aspect-ratio: 1 / 1; max-width: 64px;
  border: 1.5px solid var(--line); background: var(--paper); border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.dot span { width: calc(100% * var(--s) * .6); aspect-ratio: 1 / 1; border-radius: 50%; background: #dfe5cf; transition: background .15s; }
.dot.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dot.is-sel span { background: var(--accent); }
.scale-labels { display: flex; justify-content: space-between; gap: 16px; font-size: .88rem; color: var(--muted); }
.scale-labels span:last-child { text-align: right; }
/* sliders (one per taste dimension; start "not set") */
.hint.note { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; padding: 11px 14px; color: var(--ink-2); font-size: .95rem; margin-top: 4px; }
.sliders { display: grid; gap: 12px; margin: 18px 0 8px; }
.slider { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; transition: border-color .15s; }
.slider:not(.unset) { border-color: #b9c6a6; }
.slider.unset { border-style: dashed; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slider-name { font-weight: 600; }
.radio { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--muted); cursor: pointer; padding: 4px 2px; }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.slider.unset .radio { color: var(--accent-d); font-weight: 600; }
.scale-labels.three { display: grid; grid-template-columns: 1fr auto 1fr; }
.scale-labels.three span:nth-child(2) { text-align: center; opacity: .8; }
.slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 2px 0 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.slider input[type="range"]:focus { outline: none; }
.slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #e3e8d5, var(--accent)); }
.slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #e3e8d5, var(--accent)); }
.slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(40, 61, 49, .25); }
.slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(40, 61, 49, .25); }
.slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--gold); outline-offset: 2px; }
.slider.unset input[type="range"]::-webkit-slider-runnable-track { background: repeating-linear-gradient(90deg, #d9d5c8 0 10px, transparent 10px 16px); }
.slider.unset input[type="range"]::-moz-range-track { background: repeating-linear-gradient(90deg, #d9d5c8 0 10px, transparent 10px 16px); }
/* "Not sure": hide the thumb so the middle of the scale isn't mistaken for an answer */
.slider.unset input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.slider.unset input[type="range"]::-moz-range-thumb { opacity: 0; }
.slider .scale-labels { font-size: .8rem; }
/* Two-handle slider: the track and the chosen range are drawn behind two overlaid range inputs; only the handles
   take touches (except while not set, when tapping anywhere sets it). */
.range-demo { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-start; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 14px 0 0; }
.range-demo .demo { margin: 0; text-align: center; }
.range-demo svg { display: block; max-width: 100%; height: auto; }
.range-demo figcaption { font-size: .85rem; font-weight: 600; margin-top: 2px; }
.range-tip { flex-basis: 100%; font-size: .9rem; color: var(--muted, #6c7a6c); margin: 4px 0 0; }
.range2 { position: relative; height: 40px; margin: 2px 0 0; }
.range2::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #eef1e4, #cfd8bd); }
.range2-fill { position: absolute; top: 16px; height: 8px; border-radius: 999px; background: var(--accent);
  left: calc(15px + (100% - 30px) * (var(--lo, 3) - 1) / 4); width: calc((100% - 30px) * (var(--hi, 3) - var(--lo, 3)) / 4); }
.slider .range2 input[type="range"] { position: absolute; left: 0; top: 0; margin: 0; height: 40px; pointer-events: none; }
.slider .range2 input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.slider .range2 input[type="range"]::-moz-range-track { background: transparent; }
.slider .range2 input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.slider .range2 input[type="range"]::-moz-range-thumb { pointer-events: auto; }
/* Tap targets: one per point, centred where the handle sits for that value (the 30px thumb's centre runs from
   15px in from each end), under the handles so dragging a handle still works. */
.range2-taps { position: absolute; left: 15px; right: 15px; top: 0; height: 40px; }
.range2-tap { position: absolute; top: 0; height: 40px; width: 25%; left: calc((var(--v) - 1) * 25% - 12.5%); padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.range2-tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #a9b896; }
.slider.unset .range2::before { background: repeating-linear-gradient(90deg, #d9d5c8 0 10px, transparent 10px 16px); }
.slider.unset .range2-fill { display: none; }
.slider.unset .range2 input[type="range"]::-webkit-slider-runnable-track, .slider.unset .range2 input[type="range"]::-moz-range-track { background: transparent; }
/* Ranking: the number tapped appears in a circle. */
.rank .rank-num { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.rank .is-sel .rank-num { border: 0; background: var(--accent); color: #fff; }
.unsure-row { margin-top: 18px; display: flex; justify-content: center; }
/* quiz B: several questions on one page, then the tune page */
.qgroup { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.qgroup:first-of-type { border-top: 0; padding-top: 4px; }
/* each question on a style's page: a step down from the page title, in the plain font so it reads easily */
.qg-title { font-size: clamp(1.22rem, 4.6vw, 1.38rem); font-weight: 600; line-height: 1.25; color: var(--wine); margin: 0 0 6px; }
.qgroup .chips { margin-top: 10px; }
.qgroup textarea.input { margin-top: 8px; }
.qgroup .hint { font-size: .92rem; margin: 0 0 4px; }   /* the small line under a question: e.g. "you can add more than one" */
.tune-why { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.tune-style { display: flex; align-items: center; gap: 4px; margin: 22px 0 4px; font-size: 1.1rem; }

.input {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; min-height: 50px;
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(54, 90, 59, .12); }
textarea.input { resize: vertical; margin-top: 16px; }
.input.other { margin-top: 10px; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7a6c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }

.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.nav-stack { flex-direction: column-reverse; align-items: stretch; }

/* ------------------------------------------------------------------ contact form */
.field { margin: 0 0 16px; border: 0; padding: 0; }
.field > label, .field legend { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; padding: 0; }
.field textarea.input { margin-top: 0; }
.field-hint { font-size: .84rem; color: var(--muted); margin: 6px 0 0; }
.err { color: var(--err); font-size: .88rem; margin: 6px 0 0; }
.err:empty { display: none; }
.has-err .input { border-color: var(--err); }
.seg { display: flex; gap: 8px; }
.seg-opt { flex: 1; position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper); font-weight: 600;
}
.seg-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); box-shadow: 0 0 0 1px var(--accent) inset; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.checks { display: grid; gap: 8px; }
.basket-value[hidden] { display: none; }
.split { margin-top: 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.split-title { font-weight: 700; margin: 0 0 2px; }
.split-row { margin-top: 10px; }
.split-head { display: flex; align-items: center; gap: 8px; }
.split-name { font-weight: 600; flex: 1; }
.split-eur { font-weight: 700; color: var(--accent); min-width: 3em; text-align: right; display: inline-flex; align-items: center; gap: 2px; }
.split-eur input { width: 3.6em; font: inherit; color: inherit; text-align: right; padding: 4px 6px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--cream); }
.split-eur input:focus { border-color: var(--accent); outline: none; }
.split-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.split-apply .field-hint { margin: 0; }
.split-err { color: var(--err); font-weight: 600; }
.split-bottles { font-size: .85rem; color: var(--muted, #6c7a6c); min-width: 8.5em; text-align: right; }
.split input[type="range"] { width: 100%; accent-color: var(--accent); height: 32px; margin: 0; }
.split-total { margin-top: 8px; }
.share .credit { background: var(--accent-soft, #eef1e4); border-radius: 8px; padding: 8px 10px; }
.check-opt { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 500; }
.check-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .92rem; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.has-err.check label { color: var(--err); }
.form-error { background: #fdecea; color: var(--err); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ thanks */
.profile-card {
  position: relative; overflow: hidden;
  background: #eef1e6; border: 1px solid #d6dcc8;
  color: #3e4a40; border-radius: 20px; padding: 26px 22px 22px; margin: 20px 0; box-shadow: var(--shadow);
}
.profile-card h2 { color: var(--accent-dd); font-size: 2.2rem; }
.profile-card p { color: #3e4a40; }
.profile-card .mark { position: absolute; right: 18px; top: 18px; color: #b8c3a6; }
.traits { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.traits li { background: #fff; border: 1px solid #d6dcc8; border-radius: 999px; padding: 5px 12px; font-size: .86rem; }
.profile-card .starting { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #d6dcc8; font-size: .95rem; }
.profile-card .starting strong { color: var(--gold-ink); font-weight: 600; }
.profile-card.loading h2 { font-size: 1.7rem; }
.dots { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.pcards { display: grid; gap: 10px; margin: -6px 0 14px; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.pcard h3 { font-size: 1.1rem; margin-bottom: .35em; display: flex; align-items: center; }
.pcard p { margin: 0 0 .6em; font-size: .97rem; color: var(--ink-2); }
.pcard .learning { font-size: .88rem; color: var(--muted); font-style: italic; }
.pcard .try { font-size: .9rem; }
.pcard .try strong { color: var(--accent); font-weight: 600; }
.react { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.react > span { font-size: .85rem; color: var(--muted); margin-right: 4px; }
.react .chip { min-height: 36px; padding: 6px 13px; font-size: .88rem; }
.feedback textarea { margin: 0 0 10px; }
.fb-msg { margin: 10px 0 0; font-size: .92rem; color: var(--ok); }
.fb-msg.is-err { color: var(--err); }
.learned ul { list-style: none; margin: 0; padding: 0; }
.learned li { padding: 8px 0; border-top: 1px solid var(--line); }
.learned li:first-child { border-top: 0; }
.learned li.is-off .learned-text { text-decoration: line-through; color: #8a968a; }
.learned-text { font-weight: 600; }
.learned-conflict { display: block; color: #8a5a00; margin-top: 2px; }
.learned-noted { margin: 4px 0 0; color: var(--ink-2); }
.updated { background: #eaf5ee; color: var(--ok); border-radius: 12px; padding: 10px 14px; font-size: .95rem; font-weight: 600; margin: 16px 0 0; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 14px 0; box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
.share-link { display: flex; gap: 8px; margin-bottom: 12px; }
.share-link .input { font-size: .9rem; min-height: 48px; }
.share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.share-actions .btn { flex: 1; }
.center-block { text-align: center; padding: 60px 0; }

/* ------------------------------------------------------------------ age gate */
.gate {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(40, 61, 49, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gate[hidden] { display: none; }
.gate-card { background: var(--cream); border-radius: 22px; padding: 30px 24px 24px; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.gate-card { position: relative; }
.gate-lang { position: absolute; top: 14px; right: 14px; }
.gate-card .mark { color: var(--accent); display: flex; justify-content: center; margin-bottom: 4px; }
.brandline { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--accent-d); font-size: 1.15rem; margin-bottom: 1em; }
.gate-actions { display: grid; gap: 8px; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------- accounts & wines */
.usernav { display: flex; gap: 2px; margin-left: auto; margin-right: 10px; flex-wrap: wrap; justify-content: flex-end; }
.navlink { background: none; border: 0; color: var(--accent-d); font: inherit; font-size: .88rem; padding: 6px 8px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.navlink:hover { background: rgba(0,0,0,.05); }
@media (max-width: 520px) { .usernav .navlink { padding: 5px 5px; font-size: .8rem; } }
.wines-title { margin-top: 28px; }
.wines-note { font-size: 1.02rem; color: var(--ink-2); }
.wines { display: grid; gap: 12px; margin: 10px 0 16px; }
.wine { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.wine h3 { font-size: 1.12rem; margin: .1em 0 .3em; }
.wine p { margin: 0 0 .55em; font-size: .97rem; color: var(--ink-2); }
.wine-meta { display: flex; align-items: center; font-size: .82rem !important; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .04em; }
.wine-headline { font-weight: 600; color: var(--accent) !important; }
.wine .shop a { color: var(--accent); }
.admin-note { background: #f6f1e7; border-radius: 8px; padding: 6px 9px; color: #6b5a3a !important; }
.rate-note { display: grid; gap: 8px; margin-top: 10px; }
.card.notice { border-color: var(--accent); }
.card.loading h3 { display: flex; align-items: center; gap: 4px; }
.earlier { margin: 10px 0 20px; }
.earlier summary { cursor: pointer; color: var(--accent-d); font-weight: 600; margin-bottom: 8px; }

/* Bottle numbers on the wine cards (the bottles arrive numbered to match) */
.wine-n { display: inline-block; background: var(--accent-d); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 600; margin-right: 6px; }

/* Delivery booking */
.card.delivery { margin-top: 18px; }
.card.delivery.is-booked { border-color: var(--accent); }
.card.delivery .del-when { font-size: 1.05rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }
.wine .swap { margin: 10px 0 0; }
.received { margin-top: 26px; }
/* the monthly subscription */
.acc-basket { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 18px 0; }
.acc-basket legend { font-weight: 600; padding: 0 6px; }
.sub-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.sub-card.is-on { border-color: var(--accent); }
.sub-card p { margin: 0 0 .5em; }
.sub-check { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.sub-line { color: var(--accent); }
/* the shop guide */
.guide { margin-top: 10px; }
.g-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.g-count { font-size: .78rem; opacity: .85; }
.g-style h3 { display: flex; align-items: center; gap: 6px; font-size: 1.08rem; margin: 18px 0 8px; }
.g-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.g-wine { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.g-wine p { margin: 0 0 .45em; color: var(--ink-2); }
.g-head { display: flex; gap: 10px; align-items: flex-start; }
.g-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-d); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }
.g-wine h4 { margin: 0 0 .15em; font-size: 1.02rem; }
.g-meta { font-size: .95rem; }
.g-price { font-weight: 700; }
.g-off { background: var(--offer); color: #fff; border-radius: 999px; padding: 0 7px; font-size: .8rem; font-weight: 600; }
.g-loved { color: var(--accent) !important; font-weight: 600; }
.g-wine .shop a { color: var(--accent); }
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; text-transform: uppercase; }
.code-ok { color: var(--accent-d); font-weight: 600; }
.del-sure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* "What was off?" under a wine they didn't love; the confirm-your-email card */
.react.off { margin-top: 8px; }
.react.off .chip { border-style: dashed; }
.react.off .chip.is-sel { border-style: solid; }
.card.verify { margin: 12px 0; }


/* The Christmas gift special: a deep wine-red panel with a gold edge, at the top of the landing page and of their page,
   so it stands out from the linen and olive of the rest of the site. */
.gift-special { margin: 14px 0 18px; border: 2px solid var(--gold); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 28px rgba(122, 47, 61, .22); background: var(--paper); }
.gift-head { padding: 22px 20px 18px; color: #fff8ec; text-align: center;
  background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .10) 0 2px, transparent 3px) 0 0 / 46px 46px,
              linear-gradient(135deg, #8a3445 0%, var(--wine) 55%, #5c1f2c 100%); }
.gift-head h2 { color: #fff; margin: 4px 0 10px; font-size: 1.6rem; line-height: 1.2; }
.gift-head p { margin: 8px 0; }
.gift-kicker { color: var(--gold-soft); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.gift-quote { font-style: italic; color: #fbe9c7; }
.gift-head .btn-link { color: #fbe9c7; }
.btn-gift { background: #fff8ec; color: var(--wine); font-weight: 700; border: 2px solid var(--gold-soft); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.btn-gift:hover { background: #fff; }
.gift-body { padding: 18px 20px 6px; }
.gift-body h3 { margin-top: 18px; }
.gift-item { border-top: 1px solid var(--line); padding: 12px 0; }
.gift-paid { color: var(--ok); font-weight: 600; }
.gift-msg { border-color: var(--wine); }