@charset "utf-8";

/*
Theme Name: Collinetta - Family Vineyard & Farm Stay HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Illustrated Icons
   1.8 Sun Warm
2. Preloader & Reveals
   2.1 Secateurs Snip
   2.2 Reveal States
   2.3 Leaf Curtain
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Accordion
   7.2 Tabs & Arrows
   7.3 Faces & Badges
   7.4 Label Rows & Figures
   7.5 Newsletter
   7.6 Photo Pieces
   7.7 Years Line
   7.8 Voices
   7.9 Team Circles
   7.10 Cards
   7.11 Hours & Info
   7.12 Shared Extras
8. Home One
   8.1 Hero Slider
   8.2 The Vineyard
   8.3 Nameplates On The Posts
   8.4 Harvest Band
   8.5 Strip & Wines
   8.6 Visit
9. Home Two
   9.1 Hero Slider
   9.2 The Harvest
   9.3 Hand To Hand
   9.4 The Day
   9.5 The Season
   9.6 Bring The Family
   9.7 Wine Shop & Letter
10. Home Three
   10.1 Hero Panels
   10.2 Stay Columns
   10.3 The Family Tree
   10.4 Long-Table Dinners
   10.5 Questions & Included
   10.6 Gallery Grid
11. Inner Pages
   11.1 Sidebar & Widgets
   11.2 Rows, Choices & Pages
   11.3 Quantity Stepper
12. Vineyard Pages
   12.1 Panels & Wizards
   12.2 Long-Table Calendar
   12.3 Dinner & Seats
   12.4 History & Chef
   12.5 Gallery
   12.6 Account Dashboard
   12.7 Contact & Articles
   12.8 Photo Pairs & Profiles
   12.9 Adopt A Vine
   12.10 The Rows
   12.11 Harvest & Stays
   12.12 Panels On Limewash
   12.13 Gallery Masonry
13. Wine Shop
   13.1 Shop Grid
   13.2 Product Page
   13.3 Bag, Checkout & Wishlist
   13.4 Toast
14. Blog & Account
   14.1 Blog List
   14.2 Blog Details
   14.3 Account Pages
   14.4 Coming Soon & 404
15. Subheader
16. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand */
  --vd-grape: #4A3222;
  --vd-grape-rgb: 74, 50, 34;
  --vd-grape-2: #5C412E;
  --vd-grape-deep: #362317;
  --vd-clay: #B5562E;
  --vd-clay-rgb: 181, 86, 46;
  --vd-clay-deep: #9C4524;
  --vd-straw: #D9B26A;
  --vd-straw-rgb: 217, 178, 106;
  --vd-leaf-green: #5C7A2E;
  --vd-wood: #7A5236;
  --vd-lime-fixed: #F8F3EA;
  /* the white ground baked into the bottle packshots, the same in both themes */
  --vd-product: #FFFFFF;
  /* semantic (the dark theme swaps these) */
  --vd-bg: #FFFFFF;
  --vd-bg-rgb: 255, 255, 255;
  --vd-surface: #FFFFFF;
  --vd-surface-rgb: 255, 255, 255;
  --vd-lime: #F8F3EA;
  --vd-lime-rgb: 248, 243, 234;
  --vd-lime-2: #FCF9F4;
  --vd-heading: #342C22;
  --vd-heading-rgb: 52, 44, 34;
  --vd-text: #5A4E55;
  --vd-muted: #74676E;
  --vd-line: #EDE5D9;
  --vd-line-2: #DCCDB2;
  --vd-field: #F6F0E6;
  --vd-primary: #4A3222;
  --vd-on-primary: #FFFFFF;
  --vd-accent-text: #A14A25;
  --vd-red-text: #B3261E;
  --vd-leaf-text: #4F6B26;
  --vd-night: #4A3222;
  --vd-night-rgb: 74, 50, 34;
  --vd-shadow: 0 18px 44px rgba(74, 50, 34, 0.08);
  --vd-shadow-lg: 0 30px 70px rgba(74, 50, 34, 0.16);
  --vd-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type */
  --vd-ff-display: 'Lustria', Georgia, 'Times New Roman', serif;
  --vd-ff-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --vd-fs-h1: clamp(42px, 4.2vw, 72px);
  --vd-fs-h2: clamp(31px, 2.7vw, 46px);
  --vd-fs-h3: clamp(22px, 1.6vw, 27px);
  --vd-fs-h4: 22px;
  --vd-fs-h5: 19px;
  --vd-fs-h6: 16.5px;
  /* WebGL colours (per section below): cloud shadow, sun, a third tone */
  --gl-1: #4A3222;
  --gl-2: #E9C985;
  --gl-3: #B5562E;
  --gl-alpha: 0.1;
}
[data-theme="dark"] {
  --vd-bg: #211A13;
  --vd-bg-rgb: 33, 26, 19;
  --vd-surface: #2D231B;
  --vd-surface-rgb: 45, 35, 27;
  --vd-lime: #292018;
  --vd-lime-rgb: 41, 32, 24;
  --vd-lime-2: #251D16;
  --vd-heading: #F6EFE6;
  --vd-heading-rgb: 246, 239, 230;
  --vd-text: #CFC3C8;
  --vd-muted: #A89BA2;
  --vd-line: rgba(246, 239, 230, 0.12);
  --vd-line-2: rgba(246, 239, 230, 0.24);
  --vd-field: #372D22;
  --vd-primary: #B5562E;
  --vd-accent-text: #E08A5F;
  --vd-red-text: #F0806F;
  --vd-leaf-text: #A9C46E;
  --vd-night: #17110C;
  --vd-night-rgb: 23, 17, 12;
  --vd-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --vd-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.48);
  --gl-1: #000000;
  --gl-2: #D9B26A;
  --gl-alpha: 0.2;
}
/* bands that stay grape in both themes */
.is-night {
  --vd-heading: #F8F3EA;
  --vd-heading-rgb: 248, 243, 234;
  --vd-text: rgba(248, 243, 234, 0.82);
  --vd-muted: rgba(248, 243, 234, 0.66);
  --vd-line: rgba(248, 243, 234, 0.14);
  --vd-line-2: rgba(248, 243, 234, 0.26);
  --vd-accent-text: #D9B26A;
  --vd-red-text: #F49283;
  --vd-leaf-text: #B7D17E;
  --vd-surface: #5C412E;
  --vd-surface-rgb: 92, 65, 46;
  --vd-field: rgba(248, 243, 234, 0.08);
  --vd-primary: #F8F3EA;
  --vd-on-primary: #4A3222;
  --gl-1: #170F09;
  --gl-2: #D9B26A;
  --gl-alpha: 0.24;
  background-color: var(--vd-night);
  color: var(--vd-text);
}
/* a light card placed inside a grape band or on a photograph keeps its own ink */
.is-night .vd-on-light,
.vd-photo-band .vd-on-light {
  --vd-heading: #342C22;
  --vd-text: #5A4E55;
  --vd-muted: #74676E;
  --vd-line: #EDE5D9;
  --vd-accent-text: #A14A25;
  --vd-red-text: #B3261E;
  --vd-leaf-text: #4F6B26;
  --vd-surface: #FFFFFF;
  --vd-field: #F6F0E6;
  --vd-primary: #4A3222;
  --vd-on-primary: #FFFFFF;
}
[data-theme="dark"] .is-night .vd-on-light,
[data-theme="dark"] .vd-photo-band .vd-on-light {
  --vd-heading: #F6EFE6;
  --vd-text: #CFC3C8;
  --vd-muted: #A89BA2;
  --vd-line: rgba(246, 239, 230, 0.12);
  --vd-accent-text: #E08A5F;
  --vd-red-text: #F0806F;
  --vd-leaf-text: #A9C46E;
  --vd-surface: #2D231B;
  --vd-field: #372D22;
  --vd-primary: #B5562E;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--vd-bg);
  color: var(--vd-text);
  font-family: var(--vd-ff-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.78;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--vd-ease), background-color 0.3s var(--vd-ease);
}
a:hover {
  color: var(--vd-accent-text);
}
::selection {
  background: var(--vd-clay);
  color: #FFFFFF;
}
:focus-visible {
  outline: 2px solid var(--vd-clay);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Lustria for every heading, Raleway for everything that is read */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-weight: 400;
}
h1 {
  font-size: var(--vd-fs-h1);
  line-height: 1.12;
  letter-spacing: -0.005em;
}
h2 {
  font-size: var(--vd-fs-h2);
  line-height: 1.22;
}
h3 {
  font-size: var(--vd-fs-h3);
  line-height: 1.32;
}
h4 {
  font-size: var(--vd-fs-h4);
  line-height: 1.36;
}
h5 {
  font-size: var(--vd-fs-h5);
  line-height: 1.4;
}
h6 {
  font-size: var(--vd-fs-h6);
  line-height: 1.45;
}
/* a heading at its outline level that looks like another level */
.vd-h2 {
  font-size: var(--vd-fs-h2);
  line-height: 1.22;
}
.vd-h3 {
  font-size: var(--vd-fs-h3);
  line-height: 1.32;
}
.vd-h4 {
  font-size: var(--vd-fs-h4);
  line-height: 1.36;
}
.vd-h5 {
  font-size: var(--vd-fs-h5);
  line-height: 1.4;
}
.vd-h6 {
  font-size: var(--vd-fs-h6);
  line-height: 1.45;
}
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--vd-accent-text);
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.vd-lead {
  font-family: var(--vd-ff-display);
  font-size: 19px;
  line-height: 1.7;
  color: var(--vd-text);
}
.vd-caps {
  font-family: var(--vd-ff-body);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vd-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.vd-bg-lime {
  position: relative;
  isolation: isolate;
  background-color: var(--vd-lime);
}
.vd-bg-lime-2 {
  background-color: var(--vd-lime-2);
}
/* photo band: one style everywhere (cover photo under a grape wash from the copy side, limewash copy) */
.vd-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--vd-grape);
  --vd-heading: #F8F3EA;
  --vd-text: rgba(248, 243, 234, 0.88);
  --vd-muted: rgba(248, 243, 234, 0.72);
  --vd-accent-text: #E7C887;
  --vd-primary: #F8F3EA;
  --vd-on-primary: #4A3222;
  color: var(--vd-text);
}
.vd-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vd-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(54, 35, 23, 0.92) 0%, rgba(54, 35, 23, 0.74) 44%, rgba(54, 35, 23, 0.22) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: small grape caps, the Lustria title, a quiet serif lead; Collinetta adds the slashed rule */
.vd-title {
  margin-bottom: 56px;
}
.vd-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.is-night .vd-eyebrow,
.vd-photo-band .vd-eyebrow {
  color: var(--vd-accent-text);
}
.vd-title h2 {
  max-width: 780px;
}
/* the base's hairline with a slash through it */
.vd-rule {
  position: relative;
  display: block;
  width: 64px;
  height: 18px;
  margin-top: 20px;
  transform-origin: left center;
}
.vd-rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 1px;
  background: var(--vd-clay);
}
.vd-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 18px;
  background: var(--vd-clay);
  transform: rotate(38deg);
}
.is-night .vd-rule::before,
.is-night .vd-rule::after,
.vd-photo-band .vd-rule::before,
.vd-photo-band .vd-rule::after {
  background: var(--vd-straw);
}
.vd-title .vd-lead {
  max-width: 640px;
  margin: 22px 0 0;
}
.vd-title.text-center h2,
.vd-title.text-center .vd-lead {
  margin-left: auto;
  margin-right: auto;
}
.vd-title.text-center .vd-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.vd-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.vd-title.is-split .vd-lead {
  max-width: 500px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's square button in grape: tracked caps; house physics on hover (lift, terracotta, the arrow slides out and its twin in) */
.vd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 0;
  background: var(--vd-primary);
  color: var(--vd-on-primary);
  font-family: var(--vd-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--vd-ease), color 0.35s var(--vd-ease), box-shadow 0.35s var(--vd-ease), transform 0.35s var(--vd-ease);
}
.vd-btn i {
  position: relative;
  font-size: 13px;
  transition: transform 0.4s var(--vd-ease), opacity 0.3s ease;
}
.vd-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.vd-btn:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--vd-clay-rgb), 0.28);
  transform: translateY(-2px);
}
.vd-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.vd-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.vd-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.vd-btn.is-clay {
  background: var(--vd-clay);
  color: #FFFFFF;
}
.vd-btn.is-clay:hover {
  background: var(--vd-grape);
  box-shadow: 0 14px 30px rgba(var(--vd-grape-rgb), 0.28);
}
.vd-btn.is-tonal {
  background: var(--vd-lime);
  color: var(--vd-heading);
}
.vd-btn.is-tonal i {
  color: var(--vd-accent-text);
}
/* on a limewash ground the tonal face turns white so it still reads as a button */
.vd-bg-lime .vd-btn.is-tonal {
  background: var(--vd-surface);
}
.vd-btn.is-tonal:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
.vd-btn.is-tonal:hover i {
  color: #FFFFFF;
}
.vd-btn.is-light {
  background: #F8F3EA;
  color: var(--vd-grape);
}
.vd-btn.is-light:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
.vd-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.vd-btn.is-block {
  width: 100%;
}
.is-night .vd-btn.is-tonal,
.vd-photo-band .vd-btn.is-tonal {
  background: rgba(248, 243, 234, 0.1);
  color: #F8F3EA;
}
.is-night .vd-btn.is-tonal i,
.vd-photo-band .vd-btn.is-tonal i {
  color: var(--vd-straw);
}
.is-night .vd-btn:hover,
.vd-photo-band .vd-btn:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
/* the base's text link: a thin slash in front of tracked caps; the slash stands up and the words step on */
.vd-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-left: 30px;
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s var(--vd-ease), padding 0.4s var(--vd-ease);
}
.vd-link::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  width: 1px;
  height: 34px;
  background: var(--vd-clay);
  transform: rotate(38deg);
  transition: transform 0.4s var(--vd-ease);
}
.vd-link:hover {
  padding-left: 36px;
  color: var(--vd-accent-text);
}
.vd-link:hover::before {
  transform: rotate(0deg);
}
.is-night .vd-link::before,
.vd-photo-band .vd-link::before {
  background: var(--vd-straw);
}
.vd-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
}

/*----- 1.5 Forms -----*/
.vd-field {
  position: relative;
  margin-bottom: 20px;
}
.vd-field label,
.vd-label {
  display: block;
  margin-bottom: 8px;
  color: var(--vd-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* tonal fields: a limewash face, no outline; the focus draws a terracotta line under them */
.vd-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 50px 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: var(--vd-field);
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 16px;
  font-variant-numeric: lining-nums;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.vd-bg-lime .vd-input {
  background: var(--vd-surface);
}
textarea.vd-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.vd-input::placeholder {
  color: var(--vd-muted);
}
.vd-input:focus {
  border-bottom-color: var(--vd-clay);
  box-shadow: 0 6px 18px rgba(var(--vd-clay-rgb), 0.14);
  outline: 0;
}
.vd-input.is-invalid {
  border-bottom-color: var(--vd-red-text);
  box-shadow: inset 0 -1px 0 var(--vd-red-text);
}
.vd-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--vd-clay);
  font-size: 14px;
  pointer-events: none;
}
.vd-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--vd-muted);
}
.form-status.is-ok {
  color: var(--vd-leaf-text);
}
.form-status.is-error {
  color: var(--vd-red-text);
}
.vd-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  cursor: pointer;
}
.vd-check input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 4px;
  accent-color: var(--vd-clay);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.vd-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vd-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--vd-ease);
}
.vd-social a:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.is-night .vd-social a {
  background: rgba(248, 243, 234, 0.1);
  color: #F8F3EA;
}
/* a round portrait beside a name */
.vd-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
/* overlapping faces with a count */
.vd-faces {
  display: inline-flex;
  align-items: center;
}
.vd-faces img {
  width: 46px;
  height: 46px;
  margin-right: -12px;
  border: 3px solid var(--vd-bg);
  border-radius: 50%;
  object-fit: cover;
}
.vd-faces span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border: 3px solid var(--vd-bg);
  border-radius: 23px;
  background: var(--vd-clay);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
}
.vd-bg-lime .vd-faces img,
.vd-bg-lime .vd-faces span {
  border-color: var(--vd-lime);
}
.is-night .vd-faces img,
.is-night .vd-faces span {
  border-color: var(--vd-night);
}
/* the base's play ring: a thin white circle with a solid triangle */
.vd-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 20px;
  transition: transform 0.4s var(--vd-ease), background-color 0.4s ease, color 0.4s ease;
}
.vd-play i {
  margin-left: 4px;
}
.vd-play:hover {
  background: #F8F3EA;
  color: var(--vd-grape);
  transform: scale(1.06);
}
/* progress line (places taken, seats taken): filled to its value by the engines */
.vd-meter {
  position: relative;
  height: 3px;
  background: var(--vd-line);
}
.vd-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--vd-clay);
  transition: width 1.2s var(--vd-ease);
}
.vd-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--vd-clay);
  font-size: 12px;
}
.is-night .vd-stars {
  color: var(--vd-straw);
}
/* a small tracked-caps tag (New, Sale, Few places left) */
.vd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vd-accent-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vd-tag.is-red {
  color: var(--vd-red-text);
}
.vd-tag.is-leaf {
  color: var(--vd-leaf-text);
}
.vd-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--vd-grape);
  color: #F8F3EA;
  font-size: 15px;
  box-shadow: var(--vd-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--vd-ease);
}
.vd-toast i {
  color: var(--vd-straw);
}
.vd-toast.is-shown {
  transform: translate(-50%, 0);
}
.vd-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--vd-grape);
  color: #F8F3EA;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--vd-ease), background-color 0.3s ease;
}
.vd-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.vd-back-top:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.vd-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.vd-gl.is-on {
  opacity: 1;
}

/*----- 1.7 Illustrated Icons -----*/
.vd-ico {
  display: inline-flex;
  flex-shrink: 0;
}
.vd-ico img {
  width: 100%;
  height: 100%;
}
.vd-ico .ico-night,
[data-theme="dark"] .vd-ico .ico-day,
.is-night .vd-ico .ico-day,
.vd-photo-band .vd-ico .ico-day {
  display: none;
}
[data-theme="dark"] .vd-ico .ico-night,
.is-night .vd-ico .ico-night,
.vd-photo-band .vd-ico .ico-night {
  display: block;
}
.is-night .vd-on-light .vd-ico .ico-night {
  display: none;
}
.is-night .vd-on-light .vd-ico .ico-day {
  display: block;
}
[data-theme="dark"] .is-night .vd-on-light .vd-ico .ico-night {
  display: block;
}
[data-theme="dark"] .is-night .vd-on-light .vd-ico .ico-day {
  display: none;
}

/*----- 1.8 Sun Warm -----*/
/* the hover accent: a card's photo warms in tone, as if the sun came out over it */
.vd-sun {
  position: relative;
  overflow: hidden;
}
.vd-sun img {
  transition: transform 0.9s var(--vd-ease), filter 0.9s var(--vd-ease);
}
.vd-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 78% 8%, rgba(255, 196, 108, 0.5), rgba(233, 150, 72, 0.18) 55%, rgba(181, 86, 46, 0.08));
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--vd-ease);
}
.vd-warm:hover .vd-sun img,
.vd-sun:hover img {
  filter: saturate(1.16) sepia(0.16) brightness(1.04);
  transform: scale(1.03);
}
.vd-warm:hover .vd-sun::after,
.vd-sun:hover::after {
  opacity: 1;
}

/*======================
2. Preloader & Reveals
========================*/
/*----- 2.1 Secateurs Snip -----*/
/* on limewash a cane runs along the wire with a cluster hanging from it; terracotta secateurs close on the stem,
   the cluster drops and settles as the mark, the wordmark rises under it, then the panel lifts away */
.vd-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vd-lime-fixed);
}
[data-theme="dark"] .vd-preloader {
  background: var(--vd-grape-deep);
}
/* without script the page shows at once */
.no-js .vd-preloader {
  display: none;
}
.vd-preloader .pre-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vd-preloader .pre-scene {
  display: block;
  width: 500px;
  max-width: 84vw;
  height: auto;
  overflow: visible;
}
.vd-preloader .pre-logo img {
  display: block;
  height: 58px;
  width: auto;
}
.vd-preloader .pre-logo .logo-light,
[data-theme="dark"] .vd-preloader .pre-logo .logo-main {
  display: none;
}
[data-theme="dark"] .vd-preloader .pre-logo .logo-light {
  display: block;
}
.pre-scene .cane {
  fill: none;
  stroke: #7A5236;
  stroke-width: 7;
  stroke-linecap: round;
}
.pre-scene .tendril,
.pre-scene .stem-top {
  fill: none;
  stroke: #7A5236;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.pre-scene .stem-top {
  stroke-width: 4.6;
}
.pre-scene .leaf-a {
  fill: #6F9338;
}
.pre-scene .leaf-b {
  fill: #5E8231;
}
.pre-scene .leaf-c {
  fill: #B5562E;
}
.pre-scene .cl-grape {
  fill: #4A3222;
}
.pre-scene .cl-stem {
  stroke: #7A5236;
}
.pre-scene .cl-leaf {
  fill: #B5562E;
}
.pre-scene .cl-hi {
  fill: #FFFFFF;
}
.pre-scene .cl-vein {
  stroke: #FFFFFF;
}
.pre-scene .blade-up {
  fill: #CDD2D6;
  stroke: #8E969C;
  stroke-width: 1;
}
.pre-scene .blade-low {
  fill: #B4BBC0;
  stroke: #8E969C;
  stroke-width: 1;
}
.pre-scene .handle-up {
  fill: #B5562E;
}
.pre-scene .handle-low {
  fill: #9C4524;
}
.pre-scene .spring {
  fill: none;
  stroke: #8E969C;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.pre-scene .pivot {
  fill: #8E969C;
}
.pre-scene .pivot-hi {
  fill: #E6E9EB;
}
.pre-scene .snip path {
  fill: none;
  stroke: #B5562E;
  stroke-width: 2.4;
  stroke-linecap: round;
}
[data-theme="dark"] .pre-scene .cl-grape {
  fill: #D9B26A;
}
[data-theme="dark"] .pre-scene .cl-stem,
[data-theme="dark"] .pre-scene .cane,
[data-theme="dark"] .pre-scene .tendril,
[data-theme="dark"] .pre-scene .stem-top {
  stroke: #D9B26A;
}
[data-theme="dark"] .pre-scene .cl-leaf {
  fill: #E07F50;
}

/*----- 2.2 Reveal States -----*/
/* nothing is hidden by CSS: the reveal engine sets every start state itself, so
   every skip path (reduced motion, no script, a hidden tab) leaves the page as authored */
.vd-rule {
  will-change: transform;
}

/*----- 2.3 Leaf Curtain -----*/
/* two banks of vine leaves meet over a photo; the reveal engine adds them and parts them to either side */
/*rtl:begin:ignore*/
.vd-leaf {
  position: relative;
  overflow: hidden;
}
.leaf-curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.leaf-curtain .lc-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64%;
  will-change: transform;
}
.leaf-curtain .is-l {
  left: 0;
}
.leaf-curtain .is-r {
  right: 0;
}
.leaf-curtain .lc-mass,
.leaf-curtain .lc-front {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.leaf-curtain .is-l .lc-mass {
  background-image: url(../img/decor/leaf-mass-l.png);
  background-position: right center;
}
.leaf-curtain .is-r .lc-mass {
  background-image: url(../img/decor/leaf-mass-r.png);
  background-position: left center;
}
.leaf-curtain .lc-front {
  inset: -8% -10%;
}
.leaf-curtain .is-l .lc-front {
  background-image: url(../img/decor/leaf-front-l.png);
  background-position: right center;
}
.leaf-curtain .is-r .lc-front {
  background-image: url(../img/decor/leaf-front-r.png);
  background-position: left center;
}
/*rtl:end:ignore*/

/*======================
3. Header
========================*/
/* Collinetta's header, in the base's three moods: style one is the white bar with the logo on the left (Home 1 and the
   inner pages), style two lies over the hero photograph (Home 2), style three centres the logo between the menu and
   the actions, as the base's tour home does (Home 3). A slim grape bar runs above all three. */
.vd-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--vd-surface);
  --hd-ink: var(--vd-heading);
  --hd-hover: var(--vd-accent-text);
  --hd-icon: var(--vd-lime);
  --hd-line: var(--vd-line);
}
.vd-header .wide {
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.vd-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.vd-logo img {
  height: 50px;
  width: auto;
}
.vd-logo .logo-light,
[data-theme="dark"] .vd-logo .logo-main {
  display: none;
}
[data-theme="dark"] .vd-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 42px;
  background: var(--vd-grape);
  color: rgba(248, 243, 234, 0.84);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow: visible;
  transition: height 0.4s var(--vd-ease), opacity 0.3s ease;
}
[data-theme="dark"] .header-top {
  background: #17110C;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-top a:hover {
  color: var(--vd-straw);
}
.header-top i {
  margin-right: 6px;
  color: var(--vd-straw);
}
.vd-open {
  display: inline-flex;
  align-items: center;
}
.vd-open::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.vd-open.is-open::before {
  opacity: 1;
  background: #A9C46E;
  box-shadow: 0 0 0 4px rgba(169, 196, 110, 0.2);
}
.header-top .top-right > a {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* the base's slash between the links */
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 1px;
  height: 14px;
  background: var(--vd-straw);
  transform: translateY(-50%) rotate(28deg);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.header-main .wide {
  height: 96px;
  gap: 40px;
}
/* style two: over the hero, limewash ink, the light logo */
.header-style-two {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: transparent;
  --hd-ink: #F8F3EA;
  --hd-hover: #E7C887;
  --hd-icon: rgba(248, 243, 234, 0.12);
  --hd-line: rgba(248, 243, 234, 0.18);
}
.header-style-two .vd-logo .logo-main {
  display: none;
}
.header-style-two .vd-logo .logo-light {
  display: block;
}
.header-style-two .header-top {
  background: rgba(54, 35, 23, 0.42);
}
/* style three: the menu on the left, the logo in the middle, the actions on the right */
.header-style-three .header-main .wide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.header-style-three .vd-logo {
  order: 2;
  justify-self: center;
}
.header-style-three .vd-nav {
  order: 1;
}
.header-style-three .header-right {
  order: 3;
  justify-self: end;
}
.header-style-three .header-help {
  display: none;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.header-help {
  display: none;
  flex-direction: column;
  color: var(--hd-ink);
  line-height: 1.3;
  white-space: nowrap;
}
.header-help small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
}
.header-help b {
  font-family: var(--vd-ff-display);
  font-size: 16px;
  font-weight: 400;
}
.header-help:hover {
  color: var(--hd-hover);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--vd-clay);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.vd-theme-toggle .ti-sun,
[data-theme="dark"] .vd-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .vd-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  display: none;
  margin-left: 8px;
}
.header-style-two .header-actions .header-btn {
  background: #F8F3EA;
  color: var(--vd-grape);
}
.header-style-two .header-actions .header-btn:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
/* the base's three-line menu mark */
.vd-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  width: 46px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.vd-menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--hd-ink);
  transition: width 0.3s var(--vd-ease);
}
.vd-menu-toggle span:nth-child(2) {
  width: 18px;
}
.vd-menu-toggle span:nth-child(3) {
  width: 22px;
}
.vd-menu-toggle:hover span {
  width: 26px;
}

/*----- 3.3 Main Menu -----*/
.vd-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vd-nav li {
  position: relative;
}
.vd-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 38px 0;
  white-space: nowrap;
  color: var(--hd-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vd-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--vd-ease);
}
.vd-nav > ul > li:hover > a,
.vd-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.vd-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.vd-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 260px;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--vd-ease), transform 0.35s var(--vd-ease), visibility 0.3s;
}
.vd-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 2px;
  background: var(--vd-clay);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.vd-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.vd-nav li:hover > .sub-menu,
.vd-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vd-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 28px;
  color: var(--vd-heading);
  font-size: 15.5px;
  font-weight: 500;
  transition: color 0.3s var(--vd-ease), padding 0.35s var(--vd-ease);
}
.vd-nav .sub-menu a i {
  font-size: 9px;
  color: var(--vd-muted);
}
.vd-nav .sub-menu li:hover > a,
.vd-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--vd-accent-text);
}
.vd-nav .sub-menu .sub-menu {
  top: -18px;
  left: 100%;
}
.vd-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.vd-nav .has-mega {
  position: static;
}
.vd-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(960px, calc(100vw - 60px));
  padding: 30px;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--vd-ease), transform 0.35s var(--vd-ease), visibility 0.3s;
}
.vd-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.vd-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  height: 2px;
  background: var(--vd-clay);
}
.vd-nav .has-mega:hover > .mega-menu,
.vd-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* style three's menu sits on the left: its mega menu opens from the menu's start */
.header-style-three .vd-nav .has-mega {
  position: relative;
}
.header-style-three .vd-nav .mega-menu {
  left: -30px;
  transform: translate(0, 12px);
}
.header-style-three .vd-nav .has-mega:hover > .mega-menu,
.header-style-three .vd-nav .has-mega:focus-within > .mega-menu {
  transform: translate(0, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--vd-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--vd-lime);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--vd-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--vd-accent-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--vd-ff-display);
  font-size: 17px;
  font-weight: 400;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--vd-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.vd-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: vd-header-in 0.6s var(--vd-ease) both;
}
.vd-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.vd-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(74, 50, 34, 0.12);
}
.vd-header.is-sticky .header-main .wide {
  height: 78px;
}
.vd-header.is-sticky .vd-nav > ul > li > a {
  padding: 29px 0;
}
/* over the hero the bar is see-through; once it sticks it takes the page's ground */
.header-style-two.is-sticky {
  --hd-bar: var(--vd-surface);
  --hd-ink: var(--vd-heading);
  --hd-hover: var(--vd-accent-text);
  --hd-icon: var(--vd-lime);
  --hd-line: var(--vd-line);
}
.header-style-two.is-sticky .vd-logo .logo-main {
  display: block;
}
.header-style-two.is-sticky .vd-logo .logo-light,
[data-theme="dark"] .header-style-two.is-sticky .vd-logo .logo-main {
  display: none;
}
[data-theme="dark"] .header-style-two.is-sticky .vd-logo .logo-light {
  display: block;
}
.header-style-two.is-sticky .header-actions .header-btn {
  background: var(--vd-primary);
  color: var(--vd-on-primary);
}
.vd-header-spacer {
  display: none;
}
.vd-header-spacer.is-on {
  display: block;
}
/* the transparent bar never leaves a gap behind it */
.header-style-two + .vd-header-spacer.is-on {
  display: none;
}
@keyframes vd-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.vd-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--vd-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--vd-ease), box-shadow 0.6s var(--vd-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.vd-offcanvas.open {
  box-shadow: var(--vd-shadow-lg);
  transform: none;
}
.vd-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(74, 50, 34, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.vd-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--vd-line);
}
.offcanvas-head .vd-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--vd-ease);
}
.offcanvas-close:hover {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--vd-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--vd-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--vd-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--vd-line);
  color: var(--vd-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--vd-clay);
  color: var(--vd-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--vd-ff-display);
  font-size: 30px;
  line-height: 1.2;
  color: var(--vd-clay);
}
.oc-phone {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 500;
}
.oc-mail {
  color: var(--vd-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.vd-select {
  position: relative;
}
.vd-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.vd-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid var(--vd-line-2);
  background: var(--vd-surface);
  font-size: 15px;
  text-align: left;
  color: var(--vd-heading);
  transition: border-color 0.3s var(--vd-ease);
}
.vd-select.is-open .select-button,
.vd-select .select-button:hover {
  border-color: var(--vd-clay);
}
.vd-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vd-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--vd-accent-text);
  transition: transform 0.35s var(--vd-ease);
}
.vd-select.is-open .select-button i {
  transform: rotate(180deg);
}
.vd-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--vd-surface);
  border-top: 2px solid var(--vd-clay);
  box-shadow: var(--vd-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--vd-ease), transform 0.3s var(--vd-ease), visibility 0.3s;
}
.vd-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--vd-clay);
  transform: translateY(-10px);
}
.vd-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vd-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--vd-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--vd-ease), color 0.2s var(--vd-ease);
}
.vd-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vd-accent-text);
}
.vd-select .select-option .option-meta.is-none {
  color: var(--vd-muted);
}
.vd-select .select-option.is-focused,
.vd-select .select-option:hover {
  background-color: var(--vd-lime);
}
.vd-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.vd-select .select-option.is-selected {
  color: var(--vd-accent-text);
}
.vd-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--vd-accent-text);
}
.vd-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--vd-lime);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.vd-lang {
  position: relative;
  flex-shrink: 0;
}
.vd-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--vd-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vd-lang .lang-btn:hover,
.vd-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--vd-grape);
}
.vd-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.vd-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.vd-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.vd-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--vd-lime);
  color: var(--vd-heading);
}
.vd-lang.is-icon .lang-btn:hover,
.vd-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--vd-grape);
  color: #FFFFFF;
}
.vd-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-lg);
  font-family: var(--vd-ff-body);
  text-align: start;
  white-space: normal;
}
.vd-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.vd-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.vd-lang .lang-menu[hidden] {
  display: none;
}
.vd-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vd-muted);
}
.vd-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vd-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--vd-line);
}
.vd-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.vd-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vd-muted);
}
.vd-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--vd-accent-text);
  opacity: 0;
}
.vd-lang .lang-item:hover,
.vd-lang .lang-item[aria-pressed="true"] {
  background: var(--vd-lime);
}
.vd-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.vd-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.vd-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--vd-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--vd-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Accordion -----*/
.vd-accordion .acc-item {
  border-bottom: 1px solid var(--vd-line);
}
.vd-accordion .acc-item:first-child {
  border-top: 1px solid var(--vd-line);
}
.vd-accordion .acc-title {
  margin: 0;
  font-size: inherit;
}
/* the base's accordion: tracked caps questions, a thin plus */
.vd-accordion .acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.vd-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-accent-text);
  font-size: 11px;
  transition: transform 0.35s var(--vd-ease), background-color 0.3s ease, color 0.3s ease;
}
.vd-bg-lime .vd-accordion .acc-head i {
  background: var(--vd-surface);
}
.is-night .vd-accordion .acc-head i {
  background: rgba(248, 243, 234, 0.1);
}
.vd-accordion .acc-item.is-open .acc-head {
  color: var(--vd-accent-text);
}
.vd-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
  background: var(--vd-clay);
  color: #FFFFFF;
}
.vd-accordion .acc-body {
  padding: 0 50px 24px 0;
}
.vd-accordion .acc-item.is-unmatched {
  display: none;
}

/*----- 7.2 Tabs & Arrows -----*/
.vd-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.vd-filter-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 22px;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vd-bg-lime .vd-filter-tabs button {
  background: var(--vd-surface);
}
.vd-filter-tabs button:hover {
  color: var(--vd-accent-text);
}
.vd-filter-tabs button.is-active {
  background: var(--vd-grape);
  color: #F8F3EA;
}
[data-theme="dark"] .vd-filter-tabs button.is-active {
  background: var(--vd-clay);
}
.vd-filter-tabs.is-sm {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}
.vd-filter-tabs.is-sm button {
  height: 38px;
  padding: 0 16px;
  font-size: 11px;
}
/* the base's wine colours: a small dot before each tab */
.wine-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7A1E2C;
}
.wine-dot.is-white {
  background: #E6D9A6;
}
.wine-dot.is-rose {
  background: #E79A9A;
}
.wine-dot.is-sparkling {
  background: #F1DFAE;
  box-shadow: inset 0 0 0 1px rgba(74, 50, 34, 0.25);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--vd-ease);
}
.vd-bg-lime .slider-arrow {
  background: var(--vd-surface);
}
.slider-arrow:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}
.is-night .slider-arrow {
  background: rgba(248, 243, 234, 0.08);
  color: var(--vd-straw);
}
.is-night .slider-arrow:hover {
  background: var(--vd-clay);
  color: #FFFFFF;
}

/*----- 7.3 Faces & Badges -----*/
.vd-avatars {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.vd-avatars .faces {
  display: flex;
}
.vd-avatars .faces img,
.vd-avatars .faces .more {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--vd-bg);
  border-radius: 50%;
  object-fit: cover;
}
.vd-avatars .faces img:first-child {
  margin-left: 0;
}
.vd-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vd-clay);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}
.vd-avatars .txt {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.4;
  color: var(--vd-muted);
}
.vd-avatars .txt b {
  color: var(--vd-heading);
  font-size: 15px;
  font-weight: 700;
}
.vd-bg-lime .vd-avatars .faces img,
.vd-bg-lime .vd-avatars .faces .more {
  border-color: var(--vd-lime);
}
.is-night .vd-avatars .faces img,
.is-night .vd-avatars .faces .more {
  border-color: var(--vd-night);
}
.vd-photo-band .vd-avatars .faces img,
.vd-photo-band .vd-avatars .faces .more {
  border-color: rgba(248, 243, 234, 0.9);
}
.vd-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--vd-surface);
  color: var(--vd-heading);
  box-shadow: var(--vd-shadow);
}
.vd-review > i {
  font-size: 22px;
  color: var(--vd-accent-text);
}
.vd-review .rv-score {
  font-family: var(--vd-ff-display);
  font-size: 34px;
  line-height: 1;
}
.vd-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vd-review small {
  color: var(--vd-muted);
  font-size: 13px;
}
.is-night .vd-review {
  background: rgba(248, 243, 234, 0.07);
  box-shadow: none;
}

/*----- 7.4 Label Rows & Figures -----*/
/* label / value rows, never pills: the label in small caps on the left, the value on the right */
.label-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--vd-line);
}
.label-rows li:first-child {
  border-top: 1px solid var(--vd-line);
}
.label-rows li span {
  color: var(--vd-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.label-rows li span small {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 500;
}
.label-rows li b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 17px;
  font-weight: 400;
  text-align: right;
}
.label-rows li b.vd-tag {
  font-family: var(--vd-ff-body);
  font-size: 11px;
  color: var(--vd-accent-text);
}
.label-rows li b.vd-tag.is-red {
  color: var(--vd-red-text);
}
/* a row of large figures under a section */
.vd-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  border-top: 1px solid var(--vd-line-2);
}
.vd-figures li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 26px 0;
  border-left: 1px solid var(--vd-line-2);
}
.vd-figures li:first-child {
  padding-left: 0;
  border-left: 0;
}
.vd-figures span {
  color: var(--vd-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vd-figures b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 1.15;
}

/*----- 7.5 Newsletter -----*/
.vd-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 460px;
}
.vd-newsletter input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 52px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--vd-line-2);
  border-radius: 0;
  background: var(--vd-field);
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 16px;
}
.vd-bg-lime .vd-newsletter input {
  background: var(--vd-surface);
}
.vd-newsletter input:focus {
  border-bottom-color: var(--vd-clay);
  outline: 0;
}
.vd-newsletter button {
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  color: var(--vd-accent-text);
  font-size: 17px;
  transition: color 0.3s ease, transform 0.3s var(--vd-ease);
}
.vd-newsletter button:hover {
  color: var(--vd-heading);
  transform: translateX(3px);
}
.vd-newsletter .form-status {
  flex-basis: 100%;
}

/*----- 7.6 Photo Pieces -----*/
.vd-video-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(420px, 44vw, 700px);
  overflow: clip;
  background: var(--vd-grape);
}
.vd-video-band .vb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vd-video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(54, 35, 23, 0.3);
}
.vd-video-band .vd-play {
  position: relative;
  z-index: 2;
}
/* the base's overlap: a photo with a limewash tile stepping over its lower corner */
.overlap-pair {
  position: relative;
  padding: 0 0 80px 90px;
}
.overlap-pair .op-photo {
  aspect-ratio: 4 / 5;
}
.overlap-pair .op-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlap-pair .op-tile {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  padding: 30px;
  background: var(--vd-lime);
  box-shadow: var(--vd-shadow);
}

/*----- 7.7 Years Line -----*/
/* the base's roadmap: a hairline with slashes, the months alternating above and below it with a drawn badge */
.years-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 26px;
  padding: 10px 0;
}
.years-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--vd-line-2);
}
.yl-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 14px;
}
.yl-item::before {
  content: "";
  position: absolute;
  left: 18px;
  top: calc(50% - 11px);
  width: 1px;
  height: 22px;
  background: var(--vd-clay);
  transform: rotate(38deg);
}
.yl-item.is-up > * {
  grid-row: 1;
  align-self: end;
  padding-bottom: 34px;
}
.yl-item.is-down > * {
  grid-row: 2;
  align-self: start;
  padding-top: 34px;
}
.yl-badge .vd-ico {
  width: 54px;
  height: 54px;
}
.yl-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yl-year {
  color: var(--vd-accent-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.yl-copy b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 19px;
  font-weight: 400;
}

/*----- 7.8 Voices -----*/
/* the base's testimonial: a large Lustria quote mark, the words in the serif, the guest's face and name */
.voices-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}
.voices-slider {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.voice {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.voice-mark {
  display: block;
  height: 70px;
  color: var(--vd-clay);
  font-family: var(--vd-ff-display);
  font-size: 140px;
  line-height: 1;
}
.voice blockquote {
  margin: 0;
}
.voice-q {
  margin: 0;
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.45;
}
.voice figcaption {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  text-align: left;
}
.voice-face {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}
.voice figcaption span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.voice figcaption b {
  color: var(--vd-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.voice figcaption small {
  color: var(--vd-muted);
  font-size: 14.5px;
}
.voices-foot {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/*----- 7.9 Team Circles -----*/
/* the base's round portraits: the face in a circle, the name in Lustria, the role small under it */
.team-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: var(--vd-heading);
}
.team-circle .tc-img {
  display: block;
  width: min(100%, 210px);
  aspect-ratio: 1;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--vd-lime);
  box-shadow: 0 0 0 10px rgba(var(--vd-clay-rgb), 0);
  transition: box-shadow 0.5s var(--vd-ease), transform 0.5s var(--vd-ease);
}
.team-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.12);
  transition: transform 0.8s var(--vd-ease), filter 0.8s var(--vd-ease);
}
.team-circle b {
  font-family: var(--vd-ff-display);
  font-size: 21px;
  font-weight: 400;
}
.team-circle small {
  color: var(--vd-accent-text);
  font-size: 14px;
}
.team-circle:hover .tc-img {
  box-shadow: 0 0 0 10px rgba(var(--vd-clay-rgb), 0.16);
  transform: translateY(-6px);
}
.team-circle:hover img {
  transform: scale(1.18);
  filter: saturate(1.16) sepia(0.14);
}

/*----- 7.10 Cards -----*/
/* house hover physics on every card: a lift, a deeper shadow, the photo warming in the sun */
.stay-card,
.dinner-card,
.post-card,
.row-card,
.plan-card {
  height: 100%;
  background: var(--vd-surface);
  transition: transform 0.45s var(--vd-ease), box-shadow 0.45s var(--vd-ease);
}
.vd-bg-lime .stay-card,
.vd-bg-lime .dinner-card,
.vd-bg-lime .post-card,
.vd-bg-lime .row-card,
.vd-bg-lime .plan-card {
  box-shadow: var(--vd-shadow);
}
.stay-card:hover,
.dinner-card:hover,
.post-card:hover,
.row-card:hover,
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vd-shadow-lg);
}
.stc-media,
.dn-media,
.pcd-img {
  position: relative;
  display: block;
  overflow: hidden;
}
.stc-media img,
.dn-media img,
.pcd-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dn-media img {
  aspect-ratio: 16 / 11;
}
.stc-kind {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 10px 18px;
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.stc-body,
.dn-body,
.pcd-body {
  padding: 30px 30px 32px;
}
.stc-body h3,
.dn-body h3,
.pcd-body h3 {
  margin-bottom: 16px;
}
.stc-body h3 a,
.dn-body h3 a,
.pcd-body h3 a,
.row-card h3 a {
  color: var(--vd-heading);
}
.stc-body h3 a:hover,
.dn-body h3 a:hover,
.pcd-body h3 a:hover {
  color: var(--vd-accent-text);
}
.stc-foot,
.dn-foot,
.rc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.stc-price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.stc-price b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 26px;
  font-weight: 400;
}
.stc-price small {
  color: var(--vd-muted);
  font-size: 13px;
}
.stc-note {
  display: block;
  margin-top: 14px;
}
.stay-card.is-dim {
  opacity: 0.55;
}
/* the base's date square, in grape */
.dn-date,
.post-date {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 10px 8px 9px;
  background: var(--vd-grape);
  color: #F8F3EA;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dn-date b,
.post-date b {
  font-family: var(--vd-ff-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.dn-body .vd-eyebrow {
  margin-bottom: 10px;
  color: var(--vd-accent-text);
}
.dn-body .vd-meter {
  margin-top: 22px;
}
.dn-price {
  color: var(--vd-muted);
  font-size: 14px;
}
.dn-price b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 24px;
  font-weight: 400;
}
.pcd-cat {
  display: block;
  margin-bottom: 10px;
  color: var(--vd-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pcd-body p {
  margin-bottom: 14px;
}
/* a row of the vineyard: its number large, the grape, the year planted, the vines free */
.row-card {
  display: flex;
  flex-direction: column;
  padding: 32px 32px 30px;
}
.rc-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.rc-no {
  color: var(--vd-clay);
  font-family: var(--vd-ff-display);
  font-size: 54px;
  line-height: 1;
}
.rc-grape {
  display: flex;
  flex-direction: column;
}
.rc-grape b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 22px;
  font-weight: 400;
}
.rc-grape small {
  color: var(--vd-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.row-card .vd-meter {
  margin-top: 22px;
}
.row-card .rc-foot {
  margin-top: auto;
  padding-top: 20px;
}
.row-card.is-full .rc-no {
  color: var(--vd-muted);
}
/* the base's price column: a vertical tab beside a large price */
.plan-card,
.stay-col {
  position: relative;
  height: 100%;
}
.plan-card {
  padding: 40px 34px 36px 92px;
}
.plan-tab,
.sc-tab {
  position: absolute;
  left: 30px;
  top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 150px;
  padding: 16px 0;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 15px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.plan-card.is-featured .plan-tab,
.stay-col.is-featured .sc-tab {
  background: var(--vd-grape);
  color: #F8F3EA;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.plan-price b {
  color: var(--vd-accent-text);
  font-family: var(--vd-ff-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
}
.plan-price small {
  color: var(--vd-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-card h3 {
  margin-bottom: 10px;
}
.plan-card .label-rows,
.stay-col .label-rows {
  margin: 20px 0 22px;
}

/*----- 7.11 Hours & Info -----*/
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--vd-line);
  font-size: 15px;
}
.hours-list li span {
  color: var(--vd-muted);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
}
.hours-list li b {
  color: var(--vd-heading);
  font-weight: 600;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--vd-accent-text);
}
.info-card {
  height: 100%;
  padding: 40px 34px;
  background: var(--vd-lime);
  text-align: center;
  transition: transform 0.45s var(--vd-ease), box-shadow 0.45s var(--vd-ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--vd-shadow-lg);
}
.info-card .vd-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}
.info-card h2,
.info-card h3 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 14px;
}
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vd-heading);
  font-size: 14px;
  font-weight: 700;
}
.open-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vd-muted);
}
.open-status.is-open::before {
  background: var(--vd-leaf-green);
  box-shadow: 0 0 0 4px rgba(92, 122, 46, 0.18);
}

/*----- 7.12 Shared Extras -----*/
/* a small bottle beside its name and price */
.product-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--vd-heading);
}
.product-mini img {
  width: 58px;
  height: 72px;
  object-fit: cover;
  background: var(--vd-product);
  transform: scale(1);
}
.product-mini span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.product-mini small {
  color: var(--vd-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.product-mini b {
  font-family: var(--vd-ff-display);
  font-size: 17px;
  font-weight: 400;
}
.product-mini em {
  color: var(--vd-muted);
  font-style: normal;
}
.chef-jar .product-mini + .product-mini {
  margin-top: 14px;
}
/* two calls to action side by side, a slashed hairline between them */
.hn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hn-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 60px;
  text-align: center;
}
.hn-col + .hn-col {
  border-left: 1px solid var(--vd-line-2);
}
.hn-col .vd-ico {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
}
.hn-col h2 {
  margin-bottom: 12px;
}
.hn-col p {
  max-width: 420px;
  margin-bottom: 18px;
}

/*======================
8. Home One
========================*/
/*----- 8.1 Hero Slider -----*/
/* the base's main hero: a wide sunny photograph, the small caps and the Lustria title centred on it, small square
   arrows at the two edges; Collinetta adds a soft grape wash under the words and a slide count */
.vd-hero {
  position: relative;
  overflow: hidden;
  background: var(--vd-grape);
}
.hero-one .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(560px, 78vh, 820px);
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-one .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(54, 35, 23, 0.52), rgba(54, 35, 23, 0.12) 70%), linear-gradient(180deg, rgba(54, 35, 23, 0.18), rgba(54, 35, 23, 0.3));
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 30px;
  color: rgba(248, 243, 234, 0.9);
  text-align: center;
}
.hero-copy .vd-eyebrow {
  color: #F8F3EA;
  margin-bottom: 20px;
}
.hero-title {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--vd-ff-display);
  font-size: clamp(44px, 5vw, 84px);
  font-weight: 400;
  line-height: 1.1;
}
/* hero titles on set lines */
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-lead {
  max-width: 560px;
  margin: 24px auto 34px;
  font-family: var(--vd-ff-display);
  font-size: 19px;
  line-height: 1.6;
}
.hero-copy .vd-btns {
  justify-content: center;
}
.hero-copy .vd-link {
  color: #F8F3EA;
}
.hero-copy .vd-link::before {
  background: var(--vd-straw);
}
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  background: rgba(54, 35, 23, 0.72);
  color: #F8F3EA;
  font-size: 13px;
  transition: background-color 0.3s ease, width 0.3s var(--vd-ease);
}
.hero-arrow:hover {
  background: var(--vd-clay);
}
.hero-prev {
  left: 0;
}
.hero-next {
  right: 0;
}
.hero-count {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #F8F3EA;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  transform: translateX(-50%);
}
.hero-count span {
  width: 54px;
  height: 1px;
  background: rgba(248, 243, 234, 0.5);
  transform: rotate(-20deg);
}
.hero-count small {
  font-size: 12px;
  opacity: 0.7;
}

/*----- 8.2 The Vineyard -----*/
.intro-lead {
  margin: 26px 0 26px;
  max-width: 600px;
}
.intro-facts li b {
  font-size: 22px;
}
/* the base's photograph that starts at the container and runs to the right edge of the screen */
.bleed-right {
  margin: 90px 0 100px;
  padding-left: max(15px, calc((100vw - 1320px) / 2 + 12px));
}
.bleed-photo {
  height: clamp(320px, 34vw, 600px);
}
.bleed-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facts-grid {
  max-width: 1080px;
  margin: 0 auto;
}
.fact-item .vd-ico {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.fact-item h3 {
  margin-bottom: 8px;
  color: var(--vd-heading);
  font-size: 12.5px;
}
.fact-item p {
  max-width: 300px;
  font-size: 15.5px;
}

/*----- 8.3 Nameplates On The Posts -----*/
/* Home 1's scroll moment: a vine row drawn across the section, posts along the wire, the adopters' plaques
   hung on the posts one by one; the clouds' shadows pass over it */
.nameplates {
  overflow: hidden;
}
.np-btns {
  margin-top: 26px;
}
.vine-row {
  position: relative;
  height: 400px;
  margin: 20px 0 0;
}
.vr-wire {
  position: absolute;
  left: 0;
  right: 0;
  top: 132px;
  height: 2px;
  background: linear-gradient(90deg, rgba(122, 82, 54, 0.15), rgba(122, 82, 54, 0.55) 6%, rgba(122, 82, 54, 0.55) 94%, rgba(122, 82, 54, 0.15));
}
.vr-track {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  padding: 0 max(84px, 5vw);
}
.vr-bay {
  flex: 1;
  min-width: 0;
  background: url(../img/decor/vine-bay.png) center 56px / auto 330px repeat-x;
}
/* every bay its own stretch of the canopy */
.vr-bay:nth-child(4n) {
  background-position: 22% 56px;
}
.vr-bay:nth-child(4n+2) {
  background-position: 71% 56px;
}
.vr-bay:nth-child(8n+6) {
  background-position: 38% 56px;
}
.vr-post {
  position: relative;
  z-index: 3;
  flex: 0 0 18px;
  margin-top: 70px;
  background: linear-gradient(90deg, #5E3F29, #8A6143 45%, #6B4A33);
  box-shadow: 4px 0 8px rgba(74, 50, 34, 0.18);
}
.vr-cap {
  position: absolute;
  left: -2px;
  right: -2px;
  top: -6px;
  height: 10px;
  border-radius: 50% 50% 0 0;
  background: #5E3F29;
}
/* the plaque: an oak tag on a nail, the name in Lustria */
.vine-plaque {
  position: absolute;
  left: 50%;
  top: 112px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 132px;
  margin-left: -66px;
  padding: 14px 12px 12px;
  background: linear-gradient(170deg, #F6E7C9, #E9D3A8);
  border: 1px solid #C9A86A;
  color: var(--vd-grape);
  text-align: center;
  box-shadow: 0 10px 22px rgba(74, 50, 34, 0.22);
  transform-origin: 50% 0;
}
.vine-plaque::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #7A5236;
}
.vine-plaque b {
  font-family: var(--vd-ff-display);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}
.vine-plaque small {
  color: #7A5236;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vr-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 46px;
  background: linear-gradient(180deg, rgba(122, 82, 54, 0), rgba(122, 82, 54, 0.22) 60%, rgba(122, 82, 54, 0.3));
}
[data-theme="dark"] .vine-plaque {
  background: linear-gradient(170deg, #E9D3A8, #D9BC87);
}

/*----- 8.4 Harvest Band -----*/
.harvest-band .vd-avatars {
  margin-top: 30px;
}
.harvest-card {
  padding: 36px 34px;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-lg);
}
.hc-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}
.hc-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  background: var(--vd-grape);
  color: #F8F3EA;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hc-date b {
  font-family: var(--vd-ff-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.hc-top .vd-eyebrow {
  margin-bottom: 6px;
  color: var(--vd-accent-text);
}
.hc-in {
  color: var(--vd-muted);
  font-size: 14px;
}
.harvest-card .label-rows {
  margin: 22px 0 26px;
}

/*----- 8.5 Strip & Wines -----*/
/* the base's three tall photographs, from the container's left to the screen's right edge */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 110px;
  padding-left: max(15px, calc((100vw - 1320px) / 2 + 12px));
}
.ps-item {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
}
.ps-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-item figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 12px 20px;
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wines-title {
  max-width: 760px;
}
/* the base's hairline cells round the bottles */
.wine-cells {
  border-top: 1px solid var(--vd-line-2);
  border-left: 1px solid var(--vd-line-2);
}
.wine-cells > div {
  border-right: 1px solid var(--vd-line-2);
  border-bottom: 1px solid var(--vd-line-2);
}
.wine-cells .product-card {
  padding: 26px 22px 30px;
}
.wines-foot {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/*----- 8.6 Visit -----*/
.cta-copy {
  max-width: 980px;
  margin: 0 auto;
}
.cta-title {
  margin: 4px 0 40px;
  font-size: clamp(34px, 3.4vw, 56px);
  line-height: 1.2;
}
.cta-title span {
  display: block;
}

/*======================
9. Home Two
========================*/
/*----- 9.1 Hero Slider -----*/
/* Harvest Days: a full-height photograph under the transparent header, the words on the left and the next
   harvest day docked on the right; the arrows and the count sit together at the foot */
.hero-two .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(640px, 100vh, 960px);
  padding-top: 110px;
  overflow: hidden;
}
.hero-two .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(54, 35, 23, 0.82) 0%, rgba(54, 35, 23, 0.5) 46%, rgba(54, 35, 23, 0.08) 80%), linear-gradient(180deg, rgba(54, 35, 23, 0.45), rgba(54, 35, 23, 0) 30%);
}
.hero-two .swiper-slide .container {
  position: relative;
  z-index: 2;
}
.hero-two .hero-copy {
  max-width: 640px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.hero-two .hero-lead {
  margin: 24px 0 34px;
}
.hero-two .hero-copy .vd-btns {
  justify-content: flex-start;
}
.hero-dock {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  padding-top: 60px;
  pointer-events: none;
  transform: translateY(-50%);
}
.hero-ticket {
  width: 360px;
  padding: 28px 28px 26px;
  pointer-events: auto;
}
.hero-ticket .hc-date {
  width: 72px;
  height: 72px;
}
.hero-ticket .label-rows {
  margin: 18px 0 20px;
}
.hero-nav {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  transform: translateX(-50%);
}
.hero-nav .hero-arrow {
  position: static;
  margin: 0;
  background: rgba(248, 243, 234, 0.14);
}
.hero-nav .hero-arrow:hover {
  background: var(--vd-clay);
}
.hero-nav .hero-count {
  position: static;
  transform: none;
}

/*----- 9.2 The Harvest -----*/
.icon-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.icon-row .vd-ico {
  width: 92px;
  height: 92px;
  margin-bottom: 16px;
}
.icon-row h3 {
  margin-bottom: 6px;
  color: var(--vd-heading);
  font-size: 12.5px;
}
.icon-row p {
  color: var(--vd-muted);
  font-size: 15px;
}

/*----- 9.3 Hand To Hand -----*/
/* Home 2's scroll moment: five stations along the row; the basket hops from one to the next as the section
   travels, and the station holding it lights up */
.basket-chain {
  overflow: hidden;
}
.chain-track {
  position: relative;
  padding-top: 110px;
}
.chain-stations {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.chain-station {
  position: relative;
  padding-top: 14px;
  border-top: 1px solid var(--vd-line-2);
  transition: border-color 0.4s ease;
}
.chain-station::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 3px;
  background: var(--vd-clay);
  transition: width 0.6s var(--vd-ease);
}
.cs-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--vd-surface);
}
.cs-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.96);
  transition: filter 0.6s var(--vd-ease), transform 0.8s var(--vd-ease);
}
.cs-no {
  display: block;
  margin-bottom: 6px;
  color: var(--vd-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chain-station h3 {
  margin-bottom: 6px;
}
.chain-station p {
  font-size: 15px;
}
.chain-station.is-here::before,
.chain-station.is-past::before {
  width: 100%;
}
.chain-station.is-here .cs-photo img {
  filter: saturate(1.15) sepia(0.12) brightness(1.04);
  transform: scale(1.04);
}
.chain-station.is-here .cs-no {
  color: var(--vd-accent-text);
}
/* the basket rides over the stations (placed by the script) */
.chain-basket {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 120px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(74, 50, 34, 0.25));
}

/*----- 9.4 The Day -----*/
.day-photo {
  height: clamp(300px, 34vw, 560px);
  margin-bottom: 60px;
}
.day-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.day-note {
  color: var(--vd-accent-text);
  font-size: 15px;
}
.programme li {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vd-line);
}
.programme li:first-child {
  border-top: 1px solid var(--vd-line);
}
.pg-time {
  color: var(--vd-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.programme b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 18px;
  font-weight: 400;
}
.pg-end {
  color: var(--vd-muted);
  font-size: 13px;
}
.programme li.is-now {
  padding-left: 16px;
  background: var(--vd-lime);
  box-shadow: inset 3px 0 0 var(--vd-clay);
}
.programme li.is-now .pg-end::after {
  content: " \00B7  On Now";
  color: var(--vd-accent-text);
  font-weight: 700;
}
.programme li.is-next .pg-end::after {
  content: " \00B7  Next";
  color: var(--vd-accent-text);
  font-weight: 700;
}

/*----- 9.5 The Season -----*/
/* the base's split band: a photograph on the left half, the list on the dark right half */
.season-split,
.faq-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split-photo {
  min-height: 560px;
}
.split-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-copy {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 100px 0;
}
.split-inner {
  width: 100%;
  max-width: 560px;
  padding: 0 70px;
}
.split-inner h2 {
  margin-bottom: 0;
}
.harvest-list {
  margin: 30px 0 30px;
}
.harvest-list li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vd-line);
}
.hl-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 0 6px;
  background: rgba(248, 243, 234, 0.08);
  color: var(--vd-heading);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hl-date b {
  font-family: var(--vd-ff-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.hl-main {
  display: flex;
  flex-direction: column;
}
.hl-main b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 18px;
  font-weight: 400;
}
.hl-main small {
  color: var(--vd-muted);
  font-size: 13.5px;
}

/*----- 9.6 Bring The Family -----*/
.family-pickers .vd-avatars {
  margin-top: 26px;
}
.fp-btns {
  margin-top: 32px;
}
.op-tile .vd-eyebrow {
  color: var(--vd-accent-text);
}
.op-tile .label-rows li b {
  font-size: 15.5px;
}

/*----- 9.7 Wine Shop & Letter -----*/
.wine-tabs {
  margin-bottom: 40px;
}
.wine-shop .wine-cells > div {
  background: var(--vd-surface);
}
.wine-shop .wine-cells .product-card {
  padding: 26px 22px 30px;
}
.subscribe-band h2 {
  margin-top: 0;
}

/*======================
10. Home Three
========================*/
/*----- 10.1 Hero Panels -----*/
/* Stay & Dine: the base's tour home - the title over a row of three tall photographs that slide on, each with its
   own name; the logo sits centred in the header above */
.hero-three {
  background: var(--vd-bg);
}
.h3-head {
  padding: 70px 0 54px;
  text-align: center;
}
.h3-head .vd-eyebrow {
  margin-bottom: 18px;
}
.hero-three .hero-title {
  color: var(--vd-heading);
  font-size: clamp(40px, 4.4vw, 74px);
}
.panels-wrap {
  position: relative;
}
.panels-slider {
  width: 100%;
}
.panel {
  position: relative;
  display: block;
  height: clamp(420px, 40vw, 640px);
  overflow: hidden;
}
.panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(54, 35, 23, 0) 55%, rgba(54, 35, 23, 0.72));
}
.panel-copy {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #F8F3EA;
}
.panel-copy small {
  color: #E7C887;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.panel-copy b {
  font-family: var(--vd-ff-display);
  font-size: 26px;
  font-weight: 400;
}
.panels-prev {
  left: 0;
}
.panels-next {
  right: 0;
}

/*----- 10.2 Stay Columns -----*/
.stay-col {
  padding: 40px 30px 36px 92px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  transition: transform 0.45s var(--vd-ease), box-shadow 0.45s var(--vd-ease);
}
.stay-col:hover {
  transform: translateY(-6px);
  box-shadow: var(--vd-shadow-lg);
}
.stay-col h3 a {
  color: var(--vd-heading);
}
.stay-col h3 a:hover {
  color: var(--vd-accent-text);
}
.stays-foot {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/*----- 10.3 The Family Tree -----*/
/* Home 3's scroll moment: the tree grows from its roots to its crown, each generation appearing on its branches */
.tree-area {
  overflow: hidden;
}
.family-tree {
  position: relative;
  aspect-ratio: 1000 / 760;
}
.tree-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tree-night,
[data-theme="dark"] .tree-day {
  display: none;
}
[data-theme="dark"] .tree-night {
  display: block;
}
.tree-gen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tree-person,
.tree-year {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
}
/* a portrait on its branch, the name and the part they play under it */
.tree-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 150px;
  margin: -30px 0 0 -75px;
  text-align: center;
  transform-origin: 50% 30px;
}
.tree-person.is-right {
  margin: -30px -75px 0 0;
}
.tree-person img {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border: 3px solid var(--vd-lime);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(74, 50, 34, 0.2);
}
.tree-person img.is-old {
  filter: sepia(0.6) grayscale(0.4) contrast(0.95);
}
.tree-person figcaption,
.ty-copy {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  background: rgba(var(--vd-lime-rgb), 0.88);
  line-height: 1.25;
}
.tree-person b,
.ty-copy b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 15px;
  font-weight: 400;
}
.tree-person small,
.ty-copy small {
  color: var(--vd-muted);
  font-size: 12px;
}
.ty-leaf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border: 2px dashed var(--vd-clay);
  border-radius: 50%;
  background: var(--vd-surface);
  transition: background-color 0.3s ease;
}
.ty-leaf .vd-ico {
  width: 36px;
  height: 36px;
}
.tree-yours:hover .ty-leaf {
  background: var(--vd-lime);
  border-style: solid;
}
.tree-year {
  display: flex;
  width: 80px;
  margin: -16px 0 0 -40px;
  padding: 4px 0;
  background: var(--vd-grape);
  color: #F8F3EA;
  text-align: center;
  justify-content: center;
  transform-origin: 50% 50%;
}
.tree-year b {
  font-family: var(--vd-ff-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
}
.tree-year small {
  display: none;
}
.tp-x20 { left: 20%; }
.tp-x28 { left: 28%; }
.tp-x31 { left: 31%; }
.tp-x50 { left: 50%; }
.tp-r20 { right: 20%; }
.tp-r21 { right: 21%; }
.tp-r28 { right: 28%; }
.tp-r31 { right: 31%; }
.tp-y17 { top: 15%; }
.tp-y24 { top: 22%; }
.tp-y33 { top: 33%; }
.tp-y44 { top: 42%; }
.tp-y49 { top: 50%; }
.tp-y66 { top: 64%; }
.tp-y70 { top: 71%; }
.tp-y88 { top: 84%; }
.tp-y97 { top: 97%; }

/*----- 10.4 Long-Table Dinners -----*/
.dinners-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.dinners-nav {
  display: flex;
  gap: 10px;
}
.dinner-slide {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 60px;
}
.ds-media {
  display: block;
  overflow: hidden;
}
.ds-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 1s var(--vd-ease);
}
.ds-media:hover img {
  transform: scale(1.04);
}
.ds-copy h3 {
  margin-bottom: 14px;
}
.ds-copy h3 a {
  color: var(--vd-heading);
}
.ds-copy .label-rows {
  margin: 22px 0 26px;
}

/*----- 10.5 Questions & Included -----*/
.faq-split .vd-accordion {
  margin-top: 30px;
}
.included .fact-item {
  text-align: center;
}
.included .fact-item p {
  margin: 0 auto;
}

/*----- 10.6 Gallery Grid -----*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--vd-bg);
}
.gg-item {
  display: block;
  aspect-ratio: 1;
}
.gg-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Sidebar & Widgets -----*/
/* Collinetta's sidebar is quiet: a small heading, a coral stroke, plain lists. Collinetta sets each widget on linen */
.vd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.vd-sidebar .widget {
  padding: 34px 32px;
  background: var(--vd-lime);
}
.vd-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.vd-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--vd-clay);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--vd-line);
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--vd-clay);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--vd-clay-deep);
  color: #FFFFFF;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--vd-grape);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--vd-line-2);
  color: var(--vd-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--vd-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--vd-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--vd-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--vd-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--vd-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--vd-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--vd-grape);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vd-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--vd-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--vd-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--vd-heading);
}
.side-posts h3 a:hover {
  color: var(--vd-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--vd-text);
}
.widget-tags a:hover {
  color: var(--vd-accent-text);
}
.vd-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--vd-night);
  text-align: center;
}
.widget-cta .vd-script {
  display: block;
  color: var(--vd-straw);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vd-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .vd-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--vd-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--vd-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--vd-accent-text);
}

/*----- 11.2 Rows, Choices & Pages -----*/
.vd-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--vd-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 30px;
  font-weight: 400;
}
.vd-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--vd-line);
}
.vd-kv li:first-child {
  border-top: 1px solid var(--vd-line);
}
.vd-kv li b {
  color: var(--vd-heading);
  font-weight: 500;
  text-align: end;
}
.vd-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--vd-lime);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.vd-bg-lime .choice-card,
.vd-bg-lime .choice-card {
  background: var(--vd-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--vd-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--vd-clay-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--vd-lime-2);
  box-shadow: inset 3px 0 0 var(--vd-clay);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--vd-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--vd-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--vd-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--vd-clay);
  box-shadow: none;
  color: var(--vd-grape);
}
.vd-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.vd-pagination a,
.vd-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vd-pagination a i {
  color: var(--vd-accent-text);
  font-size: 13px;
}
.vd-pagination .is-current,
.vd-pagination a:hover,
.vd-pagination a:hover i {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.vd-zoom {
  display: block;
  overflow: hidden;
}
.vd-zoom img {
  width: 100%;
  transition: transform 0.9s var(--vd-ease);
}
.vd-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--vd-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.vd-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--vd-line-2);
  accent-color: var(--vd-clay-deep);
  appearance: none;
  -webkit-appearance: none;
}
.vd-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--vd-surface);
  border-radius: 50%;
  background: var(--vd-clay);
  box-shadow: 0 2px 8px rgba(74, 50, 34, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.vd-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--vd-surface);
  border-radius: 50%;
  background: var(--vd-clay);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--vd-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vd-panel .chip-choice > span {
  background: var(--vd-lime);
}
.chip-choice:hover > span {
  background: var(--vd-lime-2);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--vd-clay-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.chip-choice > span small {
  color: var(--vd-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 11.3 Quantity Stepper -----*/
.vd-qty {
  display: inline-flex;
  align-items: center;
  background: var(--vd-lime);
}
.vd-bg-lime .vd-qty {
  background: var(--vd-surface);
}
.vd-qty button {
  width: 46px;
  height: 54px;
  color: var(--vd-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.vd-qty button:hover {
  background: var(--vd-lime-2);
  color: var(--vd-accent-text);
}
.vd-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--vd-line);
  background: transparent;
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.vd-qty input::-webkit-outer-spin-button,
.vd-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.vd-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.vd-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
12. Vineyard Pages
========================*/
/*----- 12.1 Panels & Wizards -----*/
.vd-panel {
  padding: 40px 42px;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow);
}
.vd-panel.is-night {
  background: var(--vd-night);
  box-shadow: none;
}
.vd-panel h2,
.vd-panel h3 {
  margin-bottom: 20px;
}
.wz-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 36px;
}
.wz-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--vd-lime);
  color: var(--vd-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: default;
}
.wz-steps li span {
  color: var(--vd-accent-text);
  font-family: var(--vd-ff-display);
  font-size: 20px;
  letter-spacing: 0;
}
.wz-steps li.is-done {
  cursor: pointer;
  color: var(--vd-heading);
}
.wz-steps li.is-active {
  background: var(--vd-grape);
  color: #F8F3EA;
}
.wz-steps li.is-active span {
  color: var(--vd-straw);
}
.wz-step {
  display: none;
}
.wz-step.is-active {
  display: block;
}
.wz-step > h3 {
  margin-bottom: 24px;
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--vd-line);
}
.wz-nav .vd-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wz-review li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--vd-line);
}
.wz-review li span {
  color: var(--vd-muted);
}
.wz-review li b {
  color: var(--vd-heading);
  font-weight: 600;
  text-align: end;
}
.wz-review + .vd-check {
  margin-top: 22px;
}
.wz-done {
  padding: 20px 0 10px;
  text-align: center;
}
.done-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--vd-clay-deep);
  color: #FFFFFF;
  font-size: 26px;
}
.choice-list.is-row {
  grid-template-columns: repeat(3, 1fr);
}
.choice-list.is-row .choice-card {
  align-items: flex-start;
  padding: 18px 18px 20px;
}
.cc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-body b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
}
.cc-body small {
  color: var(--vd-muted);
  font-size: 14px;
  line-height: 1.45;
}
.cc-price {
  margin-top: 6px;
  color: var(--vd-accent-text);
  font-size: 14px;
  font-weight: 700;
}
.choice-ico .vd-ico {
  width: 40px;
  height: 40px;
}
.choice-ico {
  background: var(--vd-surface);
}
/* date chips */
.date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.date-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 82px;
  padding: 10px 6px 12px;
  background: var(--vd-lime);
  color: var(--vd-heading);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.date-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.date-choice .dc-week,
.date-choice .dc-month {
  color: var(--vd-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.date-choice .dc-num {
  font-family: var(--vd-ff-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}
.date-choice:hover {
  background: var(--vd-lime-2);
}
.date-choice:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--vd-clay-rgb), 0.3);
}
.date-choice.is-checked {
  background: var(--vd-grape);
  color: #F8F3EA;
}
.date-choice.is-checked .dc-week,
.date-choice.is-checked .dc-month {
  color: var(--vd-straw);
}
.slot-group + .slot-group {
  margin-top: 18px;
}
.slot-head {
  display: block;
  margin-bottom: 10px;
  color: var(--vd-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot-row .chip-choice > span {
  height: 42px;
  padding: 0 16px;
  border-radius: 0;
  font-size: 15px;
}
.party-qty {
  margin-bottom: 6px;
}
.booking-summary h3,
.event-estimate h3 {
  margin-bottom: 18px;
}
.booking-summary .vd-label {
  margin-top: 26px;
  color: var(--vd-straw);
}
.bs-note,
.ee-per {
  margin: 18px 0 0;
  font-size: 14.5px;
}
.bs-note a {
  color: var(--vd-straw);
  text-decoration: underline;
}
.vd-panel.is-night .sum-total b {
  color: #F8F3EA;
}
.event-estimate .ee-per b {
  color: #F8F3EA;
}

/*----- 12.2 Long-Table Calendar -----*/
.icon-row.is-steps .vd-ico {
  width: 64px;
  height: 64px;
}
.cal-list {
  display: grid;
  gap: 8px;
}
.cal-row {
  display: grid;
  grid-template-columns: 76px 1fr auto auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px 24px 16px 16px;
  background: var(--vd-surface);
  transition: transform 0.4s var(--vd-ease), box-shadow 0.4s var(--vd-ease);
}
.cal-row:hover {
  transform: translateX(4px);
  box-shadow: var(--vd-shadow);
}
.cr-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--vd-grape);
  color: #F8F3EA;
  line-height: 1;
}
.cr-date b {
  font-family: var(--vd-ff-display);
  font-size: 28px;
  font-weight: 400;
}
.cr-date small {
  margin-top: 5px;
  color: var(--vd-straw);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cr-main h3 {
  margin-bottom: 4px;
}
.cr-main span {
  color: var(--vd-muted);
  font-size: 14.5px;
}
.cr-price {
  color: var(--vd-muted);
  font-size: 14px;
  white-space: nowrap;
}
.cr-price b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 22px;
  font-weight: 400;
}

/*----- 12.3 Dinner & Seats -----*/
.dd-photo img,
.chef-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.dd-courses-head {
  margin: 30px 0 14px;
}
.dd-courses {
  display: grid;
  gap: 10px;
}
.dd-courses li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--vd-line-2);
}
.dc-n {
  color: var(--vd-accent-text);
  font-family: var(--vd-ff-display);
  font-size: 20px;
}
.dd-courses b {
  color: var(--vd-heading);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* the long table from above: a row of seats on each side of a long plank */
.seat-map {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 40px;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow);
}
.sm-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0 18px;
}
.sm-table {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin: 12px 0;
  background: linear-gradient(180deg, #8A6143, #6B4A33);
  color: rgba(255, 244, 222, 0.85);
  font-family: var(--vd-ff-display);
  font-size: 17px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 10px 20px -10px rgba(40, 24, 8, 0.5);
}
.seat-map .seat,
.sm-key .seat {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vd-lime);
  box-shadow: inset 0 0 0 2px var(--vd-line-2);
}
.seat-map .seat.is-taken,
.sm-key .seat.is-taken {
  background: var(--vd-clay);
  box-shadow: none;
}
.seat-map .seat.is-mine,
.sm-key .seat.is-mine {
  background: var(--vd-grape);
  box-shadow: 0 0 0 3px rgba(var(--vd-clay-rgb), 0.45);
}
.sm-key {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 20px 0 44px;
  font-size: 14px;
}
.sm-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.seat-form {
  max-width: 1100px;
  margin: 0 auto;
}
.seat-form .vd-field {
  margin-bottom: 0;
}
.sf-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.sf-total span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.sf-total small {
  color: var(--vd-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sf-total b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 34px;
  font-weight: 400;
}

/*----- 12.4 History & Chef -----*/
.history-rows {
  display: grid;
  gap: 90px;
}
.history-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 70px;
}
.history-row.is-flip .hr-media {
  order: 2;
}
.hr-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hr-copy h3 {
  margin-bottom: 18px;
}
.chef-jar .product-mini {
  padding: 12px 0;
  border-bottom: 1px solid var(--vd-line);
}
.chef-jar .vd-more {
  margin-top: 20px;
}

/*----- 12.5 Gallery -----*/
.gallery-grid-cols .gal-item {
  position: relative;
  display: block;
  overflow: hidden;
}
.gallery-grid-cols .gal-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--vd-ease);
}
.gallery-grid-cols .is-tall .gal-item img {
  aspect-ratio: 4 / 5;
}
.gal-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(0deg, rgba(74, 50, 34, 0.85), rgba(74, 50, 34, 0));
  color: #F8F3EA;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s var(--vd-ease);
}
.gal-cap i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F8F3EA;
  color: var(--vd-grape);
  font-size: 11px;
}
.gal-item:hover img {
  transform: scale(1.06);
}
.gal-item:hover .gal-cap,
.gal-item:focus .gal-cap {
  opacity: 1;
  transform: none;
}

/*----- 12.6 Account Dashboard -----*/
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--vd-muted);
  font-size: 14px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .vd-ico {
  width: 34px;
  height: 34px;
}
.dash-tabs button.is-active {
  background: var(--vd-grape);
  color: #F8F3EA;
}
.dash-tabs button.is-active .ico-day {
  display: none;
}
.dash-tabs button.is-active .ico-night {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 24px;
}
.table-wrap {
  margin-bottom: 30px;
  overflow-x: auto;
}
.vd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.vd-table th {
  padding: 12px 14px;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}
.vd-table td {
  padding: 14px;
  border-bottom: 1px solid var(--vd-line);
  vertical-align: top;
}
.vd-table td:first-child {
  color: var(--vd-heading);
  font-weight: 700;
  white-space: nowrap;
}
.my-seats {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.my-seats li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 20px;
  background: var(--vd-lime);
}
.my-seats li b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-weight: 400;
  text-transform: uppercase;
}
.my-seats li.is-empty {
  color: var(--vd-muted);
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}

/*----- 12.7 Contact & Articles -----*/
.contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
.contact-hours {
  margin-top: 24px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0;
  padding: 22px 26px;
}
.sum-hint {
  margin: 14px 0 0;
  color: var(--vd-muted);
  font-size: 14px;
  text-align: center;
}


/*----- 12.8 Photo Pairs & Profiles -----*/
/* the base's offset pair: a tall photo, a square one stepping over its corner */
.offset-pair {
  position: relative;
  padding: 0 0 70px;
}
.offset-pair .op-tall {
  width: 58%;
  aspect-ratio: 3 / 4.4;
}
.offset-pair .op-square {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  aspect-ratio: 1;
  box-shadow: var(--vd-shadow-lg);
}
.offset-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-btns {
  margin-top: 30px;
}
.info-card.is-white {
  background: var(--vd-surface);
}
.profile-photo {
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 14px var(--vd-lime);
}
.profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.dd-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.team-year-btn {
  margin-top: 30px;
}
.story-years li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--vd-line);
}
.story-years li:first-child {
  border-top: 1px solid var(--vd-line);
}
.story-years b {
  color: var(--vd-accent-text);
  font-family: var(--vd-ff-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}
.story-years span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15.5px;
}
.story-years strong {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 19px;
  font-weight: 400;
}
.story-photo {
  display: block;
}
.story-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/*----- 12.9 Adopt A Vine -----*/
.plan-choices {
  margin: 18px 0 30px;
}
.plan-choice {
  flex-direction: column;
  gap: 2px;
}
.plan-choice .cc-name,
.choice-card .cc-name {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 18px;
  line-height: 1.25;
}
.plan-choice .cc-price,
.choice-card .cc-price {
  margin-top: 4px;
  color: var(--vd-muted);
  font-size: 13.5px;
  font-weight: 500;
}
.choice-card .cc-price b {
  color: var(--vd-accent-text);
  font-family: var(--vd-ff-display);
  font-size: 22px;
  font-weight: 400;
}
.choice-card .cc-note {
  margin-top: 6px;
  color: var(--vd-muted);
  font-size: 13.5px;
  line-height: 1.45;
}
.adopt-fields .vd-label small {
  margin-left: 6px;
  color: var(--vd-muted);
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 500;
}
.year-chips .chip-choice > span small {
  margin-left: 6px;
}
.chip-choice.is-checked > span small {
  color: inherit;
  opacity: 0.85;
}
/* the plaque on its post, as it will hang in the row */
.plaque-preview {
  position: relative;
  display: flex;
  justify-content: center;
  height: 210px;
  margin: -6px -6px 18px;
  background: linear-gradient(180deg, rgba(var(--vd-lime-rgb), 0), var(--vd-lime) 90%), url(../img/decor/vine-bay.png) center 0 / auto 230px repeat-x;
  overflow: hidden;
}
.pp-post {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 18px;
  margin-left: -9px;
  background: linear-gradient(90deg, #5E3F29, #8A6143 45%, #6B4A33);
}
.vine-plaque.is-static {
  position: relative;
  top: 70px;
  left: auto;
  margin: 0;
  align-self: flex-start;
  min-width: 170px;
}
.vine-plaque.is-static b {
  font-size: 18px;
}
.pp-count {
  margin: 0 0 16px;
  color: var(--vd-muted);
  font-size: 13px;
  text-align: center;
}
.adopt-summary .vd-btn {
  margin-top: 22px;
}
.my-vine {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 30px;
  margin-bottom: 30px;
}
.my-vine .vine-plaque.is-static {
  top: 0;
}

/*----- 12.10 The Rows -----*/
.rows-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}
.rows-tools .vd-filter-tabs {
  margin: 0;
}
.rows-search {
  width: min(100%, 340px);
}
.vd-rows .vd-lead b {
  color: var(--vd-accent-text);
  font-weight: 400;
}

/*----- 12.11 Harvest & Stays -----*/
.wizard .wz-note {
  color: var(--vd-muted);
  font-size: 15px;
}
.wz-sub {
  margin: 30px 0 16px;
}
.party-rows {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.party-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  background: var(--vd-lime);
}
.party-row > span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.party-row b {
  color: var(--vd-heading);
  font-family: var(--vd-ff-display);
  font-size: 18px;
  font-weight: 400;
}
.party-row small {
  color: var(--vd-muted);
  font-size: 13.5px;
}
.party-row .vd-qty {
  background: var(--vd-surface);
}
.bottle-row {
  margin-top: 14px;
}
.date-choice .dc-left {
  margin-top: 2px;
  color: var(--vd-leaf-text);
  font-size: 11px;
  font-weight: 700;
}
.date-choice .dc-left.is-red {
  color: var(--vd-red-text);
}
.date-choice.is-checked .dc-left {
  color: var(--vd-straw);
}
.cal-row.is-full {
  opacity: 0.55;
}
.cal-row .cr-main .vd-meter {
  display: block;
  max-width: 260px;
  margin-top: 10px;
}
.day-book {
  margin-top: 22px;
}
/* the stays search: dates and guests in one bar */
.stay-search {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: end;
  gap: 20px;
  margin-bottom: 70px;
}
.ss-field label,
.ss-field .vd-label {
  display: block;
  margin-bottom: 8px;
  color: var(--vd-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ss-field .vd-input {
  padding-right: 16px;
}
.stays-title {
  margin-bottom: 44px;
}
.stay-gallery {
  position: relative;
  margin-bottom: 50px;
}
.stay-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.stay-gallery .mini-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
}
.stay-book {
  position: sticky;
  top: 110px;
}
.stay-book .party-row {
  margin: 4px 0 16px;
}
.sb-breakfast {
  margin-bottom: 18px;
}
.sb-head {
  margin: 8px 0 6px;
}
.sb-nights {
  max-height: 220px;
  margin-bottom: 8px;
  overflow-y: auto;
}
.sb-nights li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--vd-line-2);
  font-size: 14.5px;
}
.sb-nights li span {
  display: flex;
  flex-direction: column;
  color: var(--vd-heading);
}
.sb-nights small {
  color: var(--vd-muted);
  font-size: 12.5px;
}
.sb-nights b {
  color: var(--vd-heading);
  font-weight: 600;
}
.season-rows li span small {
  margin-left: 8px;
}
.season-extras {
  margin-top: 18px;
}

/*----- 12.12 Panels On Limewash -----*/
/* a white panel on a limewash band gives its fields and choices back their own limewash face */
.vd-bg-lime .vd-panel .vd-input,
.vd-bg-lime .vd-panel .vd-qty,
.vd-bg-lime .vd-panel .choice-card,
.vd-bg-lime .vd-panel .date-choice,
.vd-bg-lime .vd-panel .party-row,
.vd-bg-lime .vd-panel .chip-choice > span {
  background: var(--vd-lime);
}
.vd-bg-lime .vd-panel .party-row .vd-qty {
  background: var(--vd-surface);
}
.vd-bg-lime .vd-panel .choice-card.is-checked {
  background: var(--vd-lime-2);
}
.vd-bg-lime .vd-panel .date-choice.is-checked {
  background: var(--vd-grape);
}
.vd-bg-lime .vd-panel .chip-choice.is-checked > span {
  background: var(--vd-clay);
}

/*----- 12.13 Gallery Masonry -----*/
/* the gallery falls into three columns of mixed heights; a filtered-out photo simply leaves its column */
.row.gallery-grid-cols {
  display: block;
  margin: 0;
  columns: 3;
  column-gap: 24px;
}
.row.gallery-grid-cols > .gal-col {
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  break-inside: avoid;
}

/*======================
13. Wine Shop
========================*/
/*----- 13.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--vd-product);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--vd-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vd-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--vd-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
/* the base's wine cell: the bottle standing on white, the vintage and rows, the name in Lustria and the price
   centred under it; on hover the bottle eases forward, the photo warms and the bag button rises */
.product-card {
  height: 100%;
  text-align: center;
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--vd-product);
  transition: box-shadow 0.5s var(--vd-ease);
}

.pc-img {
  display: block;
}
/* the packshots stand small in a wide white frame: the cell zooms in on the bottle */
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.36);
  transition: transform 1s var(--vd-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.44);
}
.pc-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  color: var(--vd-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pc-badge.is-sale {
  color: var(--vd-red-text);
}
[data-theme="dark"] .pc-badge {
  color: #A14A25;
}
[data-theme="dark"] .pc-badge.is-sale {
  color: #B3261E;
}
.pc-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 6px 16px rgba(var(--vd-grape-rgb), 0.12);
  color: var(--vd-grape);
  font-size: 14px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.35s var(--vd-ease), transform 0.35s var(--vd-ease), background-color 0.3s var(--vd-ease), color 0.3s var(--vd-ease);
}
.pc-act:nth-child(2) {
  transition-delay: 0.05s;
}
.product-card:hover .pc-act,
.pc-act:focus,
.pc-act.is-on {
  opacity: 1;
  transform: none;
}
.pc-act:hover,
.pc-act.is-on {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  background: var(--vd-grape);
  color: #F8F3EA;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.45s var(--vd-ease), background-color 0.3s var(--vd-ease);
}
.product-card:hover .pc-add,
.pc-add:focus {
  transform: none;
}
.pc-add:hover {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.pc-body {
  padding: 22px 10px 6px;
}
.pc-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vd-accent-text);
}
.pc-body h3 {
  margin: 8px 0 6px;
  font-size: 19px;
}
.pc-body h3 a {
  color: var(--vd-heading);
}
.pc-body h3 a:hover {
  color: var(--vd-accent-text);
}
.pc-price {
  color: var(--vd-accent-text);
  font-size: 16px;
  font-weight: 600;
}
.pc-price del {
  margin-left: 6px;
  font-size: 14px;
  color: var(--vd-muted);
}

/*----- 13.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--vd-product);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--vd-product);
  box-shadow: inset 0 0 0 1px var(--vd-line-2);
  transition: box-shadow 0.3s var(--vd-ease);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--vd-clay);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--vd-accent-text);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--vd-muted);
}
.pd-info .vd-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .vd-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--vd-accent-text);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--vd-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--vd-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--vd-clay);
  transform: scaleX(0);
  transition: transform 0.4s var(--vd-ease);
}
.pd-tablist button.is-active {
  color: var(--vd-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--vd-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--vd-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 13.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--vd-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--vd-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--vd-product);
  box-shadow: inset 0 0 0 1px var(--vd-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.bl-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vd-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--vd-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--vd-muted);
}
.bl-total {
  min-width: 90px;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  color: var(--vd-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--vd-ease), color 0.3s var(--vd-ease);
}
.bl-remove:hover {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--vd-line-2);
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--vd-clay);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--vd-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vd-clay);
  transition: width 0.8s var(--vd-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--vd-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--vd-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--vd-product);
  box-shadow: inset 0 0 0 1px var(--vd-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vd-clay-deep);
  color: #FFFFFF;
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--vd-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--vd-heading);
}
.order-summary .vd-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--vd-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--vd-accent-text);
}

/*----- 13.4 Toast -----*/
.vd-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--vd-grape);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--vd-lime-fixed);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--vd-ease), transform 0.4s var(--vd-ease), visibility 0.4s;
}
.vd-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vd-clay-deep);
  color: #FFFFFF;
  font-size: 11px;
}
.vd-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*======================
14. Blog & Account
========================*/
/*----- 14.1 Blog List -----*/
/* Collinetta's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--vd-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--vd-grape);
  color: #F8F3EA;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(74, 50, 34, 0.28);
}
.post-thumb.is-video .vd-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--vd-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .vd-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--vd-accent-text);
}
.bp-body h3 a {
  color: var(--vd-heading);
}
.bp-body h3 a:hover {
  color: var(--vd-accent-text);
}
.bp-body .vd-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a grape card with the title set large in cream and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--vd-grape);
  --vd-heading: #F8F3EA;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: var(--vd-straw);
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #F8F3EA;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #F8F3EA;
}
.blog-post.is-quote h3 a:hover {
  color: var(--vd-straw);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(248, 243, 234, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(248, 243, 234, 0.1);
  font-size: 120px;
}

/*----- 14.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .vd-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--vd-lime-2);
  border-inline-start: 4px solid var(--vd-clay);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--vd-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--vd-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vd-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--vd-line);
}
.article-rows dt {
  color: var(--vd-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--vd-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vd-clay-deep);
  color: #FFFFFF;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--vd-grape);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--vd-lime);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .vd-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--vd-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--vd-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vd-lime);
  color: var(--vd-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--vd-clay-deep);
  color: #FFFFFF;
}
.post-nav .pn-all {
  color: var(--vd-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--vd-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--vd-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--vd-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 14.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--vd-surface);
  box-shadow: var(--vd-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--vd-grape);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(74, 50, 34, 0.1) 0%, rgba(74, 50, 34, 0.55) 45%, rgba(74, 50, 34, 0.95) 100%);
}
.account-side > .vd-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .vd-script {
  color: var(--vd-clay);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .vd-avatars .faces img,
.as-copy .vd-avatars .more {
  border-color: var(--vd-grape);
}
.account-form {
  padding: 56px 54px;
}
.account-form .vd-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--vd-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--vd-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--vd-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #C13A2C;
  transition: width 0.4s var(--vd-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--vd-clay);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--vd-leaf-green);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--vd-muted);
  font-size: 13px;
}

/*----- 14.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Collinetta's split, with the seal turning on the seam */
.vd-bare-page {
  min-height: 100vh;
  background: var(--vd-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .vd-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .vd-rule {
  margin: 24px 0;
}
.bare-inner .vd-lead {
  max-width: 560px;
}
.bare-inner .vd-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--vd-clay);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .vd-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--vd-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--vd-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-grape {
  background: var(--vd-grape);
  color: #F8F3EA;
}
.launch-count b {
  font-family: var(--vd-ff-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--vd-surface);
  color: var(--vd-heading);
  font-family: var(--vd-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--vd-clay);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: #FFFFFF;
  color: #4A3222;
}

/*======================
15. Subheader
========================*/
/* the base's page title: a wide sunny photograph under a grape wash with the Cloud Shadows layer drifting over
   it, the crumbs, the Lustria title, the slashed rule and a lead centred on it. Shop and account pages take a quiet
   limewash band (the shadows of the clouds still pass over it). */
.vd-subheader {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 460px;
  padding: 90px 0;
  overflow: clip;
  text-align: center;
}
.vd-subheader .sub-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.vd-subheader.is-night {
  background: var(--vd-grape);
}
.vd-subheader.is-night::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(54, 35, 23, 0.5) 0%, rgba(54, 35, 23, 0.68) 100%);
}
.vd-subheader .vd-gl {
  z-index: 0;
  --gl-1: #170F09;
  --gl-2: #F2CC86;
  --gl-alpha: 0.3;
}
.vd-subheader.is-plain .vd-gl {
  --gl-1: #4A3222;
  --gl-2: #E9C985;
  --gl-alpha: 0.12;
}
[data-theme="dark"] .vd-subheader.is-plain .vd-gl {
  --gl-1: #000000;
  --gl-2: #D9B26A;
  --gl-alpha: 0.22;
}
.vd-subheader .container {
  position: relative;
  z-index: 1;
}
.sub-copy {
  max-width: 820px;
  margin: 0 auto;
}
.sub-copy h1 {
  font-size: clamp(38px, 4vw, 64px);
}
.sub-copy .vd-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.sub-copy .vd-lead {
  max-width: 620px;
  margin: 22px auto 0;
}
.vd-subheader.is-plain {
  min-height: 0;
  padding: 70px 0 64px;
}
.vd-subheader.is-plain .vd-lead {
  margin-top: 14px;
}
.vd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--vd-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vd-crumbs a {
  color: var(--vd-heading);
}
.vd-crumbs a:hover {
  color: var(--vd-accent-text);
}
.vd-crumbs i {
  color: var(--vd-clay);
  font-size: 8px;
}
.vd-crumbs span {
  color: var(--vd-accent-text);
}

/*======================
16. Footer
========================*/
/* the base's footer, dark on every page with the wordmark centred: here grape, the Kaleidoscope above the wordmark
   (vine leaves folded into six mirrored wedges, turning), the address and the farm gate's hours either side */
.vd-footer {
  position: relative;
  isolation: isolate;
  padding-top: 100px;
  background: var(--vd-night);
  /* the kaleidoscope's leaves, its autumn leaves and its ground: the same in both themes */
  --gl-1: #D9B26A;
  --gl-2: #C7653A;
  --gl-3: #362317;
  --gl-alpha: 1;
}
.footer-main {
  padding-bottom: 70px;
}
.vd-footer .widget h2 {
  margin-bottom: 22px;
}
.footer-address {
  margin-bottom: 18px;
}
.footer-contact li + li {
  margin-top: 10px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vd-text);
}
.footer-contact a i {
  width: 16px;
  color: var(--vd-straw);
}
.footer-contact a:hover {
  color: var(--vd-straw);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-kaleido {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(248, 243, 234, 0.04), 0 24px 50px rgba(0, 0, 0, 0.3);
}
.footer-kaleido .vd-gl {
  z-index: 0;
}
.footer-word {
  display: inline-flex;
}
.footer-word img {
  height: 62px;
  width: auto;
  transition: opacity 0.3s ease;
}
.footer-word:hover img {
  opacity: 0.82;
}
.footer-brand p {
  max-width: 340px;
  margin: 14px 0 22px;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.footer-social a {
  color: var(--vd-straw);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-social a:hover {
  color: #F8F3EA;
}
.footer-hours .hours-list li span {
  color: var(--vd-muted);
}
.footer-note {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--vd-muted);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 28px 0;
  border-top: 1px solid var(--vd-line);
  font-size: 14.5px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--vd-straw);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}