/*
Theme Name: Thorem Vineyards
Theme URI: https://theoremvineyards.com/
Author: Vin
Author URI: https://vinagency.com
Version: 1.0.0
*/

/* =Overrides */

body :where(.wp-site-blocks :focus) {
outline: none;
}

:root {
--c7-primary-color: #c79b31;
--c7-primary-color-dark: #c79b31;
--c7-primary-color-text: #c79b31;
--c7-font-family: PT Sans;
--c7-font-weight: 400;
--c7-heading-font-family: EB Garamond;
--c7-heading-font-weight: 600;
}


section.c7-content:before,
.template-contact-us:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(/wp-content/themes/theorem-vineyards/assets/images/commerce-seven/commerce-7-bg.jpg.webp);
z-index: -1;
background-repeat: no-repeat;
background-size: cover;
background-position: top;
}


/* =Theorem Styles */

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,700|Cormorant+Garamond:400,500,700|Mrs+Saint+Delafield&display=block");
:root {
  --primary: #c79b31;
  --primary-dark: #876822;
  --secondary: #5d4219;
  --light: #fff9e6;
  --dark: #0e0e0f;
  --white: #ffffff;
  --black: #000000;
}
.btn {
  --btn-clr: inherit;
  --btn-gp: 0.5rem;
  gap: var(--btn-gp);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: var(--fnt-t);
  color: var(--btn-clr);
  font-weight: 700;
  line-height: 1;
  z-index: 1;
  &.v1 {
    border: solid 1px var(--primary);
    padding: 0.8em 1.125em;
    text-transform: uppercase;
    transition: background-color 0.35s ease;
    &:not(:has(svg)) {
      text-align: center;
    }
    svg {
      font-size: 1.25em;
      transition: margin 0.35s ease, opacity 0.35s ease;
      &:last-of-type:not(:first-of-type) {
        margin-inline-start: calc(var(--btn-gp) * -1 - 1em);
        opacity: 0;
      }
    }
  }
  &:not(.ato) {
    flex-shrink: 0;
  }
  svg {
    color: var(--primary);
  }
}
@media (hover: hover) and (pointer: fine) {
  a:is(:hover, :focus-visible) .btn.v1,
  .btn.v1:is(:hover, :focus-visible),
  .btn.v1.active {
    background-color: hsl(from var(--primary) h s l / 0.3);
    svg {
      &:first-of-type:not(:only-of-type) {
        margin-inline-end: calc(var(--btn-gp) * -1 - 1em);
        opacity: 0;
      }
      &:last-of-type:not(:first-of-type) {
        margin-inline-start: 0;
        opacity: 1;
      }
    }
  }
}
:root {
  --bs-fnt-s: 0.8334svw;
  --g-pd-v: 3.5rem;
  --g-pd-h: 2.5rem;
  --hd-mrg-bt: 3rem;
  --mn-w: 100rem;
  --mn-t: 80rem;
  --mn-ch: 100ch;
  --flx-gap: 3rem;
  --grd-sp: 1rem;
  --grd-sp-sml: 1rem;
  --grd-sp-lrg: 1.25rem;
  --full: 100%;
  --half: 50%;
  --two-thirds: 66.667%;
  --third: 33.333%;
  --three-fourths: 75%;
  --fourth: 25%;
  --four-fifths: 80%;
  --three-fifths: 60%;
  --two-fifths: 40%;
  --fifth: 20%;
  --sixth: 16.667%;
  --lg-w: 9.5rem;
}
html {
  font-size: clamp(16px, var(--bs-fnt-s), 20px);
  position: relative;
  overflow-x: clip;
}
body {
  font-family: var(--fnt-m);
  line-height: var(--bdy-lh);
  font-weight: var(--bdy-w);
  text-wrap: pretty;
}
section {
  position: relative;
  padding: var(--g-pd-v) var(--g-pd-h);
  &:has([class*="anm_scl"]) {
    contain: paint;
  }
  header {
    position: relative;
    z-index: 1;
    &:not(:last-child) {
      margin-block-end: var(--hd-mrg-bt);
    }
  }
}
.overlap :is(.mstg, .bnr) > div {
  padding-block-start: var(--g-pd-v);
}
.lt-bg:not(.bg-image, .lns) + .lt-bg:not(.bg-image, .lns),
.lt-bg:not(.bg-image, .lns) + form .lt-bg:not(.bg-image, .lns),
form:has(.lt-bg:not(.bg-image, .lns)) + .lt-bg:not(.bg-image, .lns),
form:has(.lt-bg:not(.bg-image, .lns)) + form .lt-bg:not(.bg-image, .lns),
.dk-bg:not(.bg-image, .lns) + .dk-bg:not(.bg-image, .lns),
.dk-bg:not(.bg-image, .lns) + form .dk-bg:not(.bg-image, .lns),
form:has(.dk-bg:not(.bg-image, .lns)) + .dk-bg:not(.bg-image, .lns),
form:has(.dk-bg:not(.bg-image, .lns)) + form .dk-bg:not(.bg-image, .lns) {
  padding-block-start: 0;
}
.rlt {
  position: relative;
}
.blk {
  display: block;
}
.hdn {
  display: none;
  visibility: hidden;
}
.m-ato {
  margin-inline: auto;
}
.el-panel:not(.active) {
  display: none;
}
.ui-scroll {
  &::-webkit-scrollbar-track {
    background-color: hsl(from var(--theme-color) h s l / 0.1);
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--primary);
  }
}
[class*="ta_"] {
  text-align: center;
}
.ta_r {
  text-align: right;
}
.lg {
  display: block;
  width: var(--lg-w);
  img {
    display: none;
    width: 100%;
  }
}
.lt-bg .dk-lg,
.dk-bg .lt-lg {
  display: block;
}
.lns {
  position: relative;
  &.bg-bx {
    --bg-bx-pd-v: var(--g-pd-h);
    --bg-bx-pd-h: var(--g-pd-h);
  }
  &:before,
  &:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: hsl(from var(--primary) h s l / 0.5);
    pointer-events: none;
    z-index: 1;
  }
  &:before {
    border-width: 1px 0;
    inset: calc(var(--g-pd-h) * 0.5) calc(var(--g-pd-h) * 0.25);
  }
  &:after {
    border-width: 0 1px;
    inset: calc(var(--g-pd-h) * 0.25) calc(var(--g-pd-h) * 0.5);
  }
  &:not(section, .bg-bx) {
    padding: var(--g-pd-h);
    &:before {
      inset: calc(var(--g-pd-h) * 0.25) 0;
    }
    &:after {
      inset: 0 calc(var(--g-pd-h) * 0.25);
    }
  }
}
body.overlap main > .lns:first-child,
body.overlap main > form:first-child > .lns {
  --lns-hdr-sp: 2.5rem;
  &:before {
    border-width: 1px 0 0;
    border-image: 1
      linear-gradient(
        90deg,
        hsl(from var(--primary) h s l / 0.5)
          calc(50% - var(--lg-w) * 0.5 - 1rem),
        transparent calc(50% - var(--lg-w) * 0.5 - 1rem),
        transparent calc(50% + var(--lg-w) * 0.5 + 1rem),
        hsl(from var(--primary) h s l / 0.5)
          calc(50% + var(--lg-w) * 0.5 + 1rem)
      );
    box-shadow: 0 1px 0 hsl(from var(--primary) h s l / 0.5);
    inset: calc(var(--lns-hdr-sp) + var(--g-pd-h) * 0.25)
      calc(var(--g-pd-h) * 0.25) calc(var(--g-pd-h) * 0.5);
  }
  &:after {
    inset: var(--lns-hdr-sp) calc(var(--g-pd-h) * 0.5)
      calc(var(--g-pd-h) * 0.25);
  }
}
@media screen and (width >= 1280px) {
  body.overlap main > .lns:first-child,
  body.overlap main > form:first-child > .lns {
    --lns-hdr-sp: 3.5rem;
  }
}
.bg {
  position: absolute;
  inset: 0;
  &:not(:has(img, video, svg)) {
    display: none;
    visibility: hidden;
  }
  &.ovly {
    --ovly-clr: transparent;
    --ovly-grd-d: 90deg;
    --ovly-grd-c: var(--theme-background);
    --ovly-grd: linear-gradient(
      var(--ovly-grd-d),
      var(--ovly-grd-c),
      transparent
    );
    --ovly-grd-o: 0.7;
    &:has(> video) {
      --ovly-clr: var(--ovly-grd-c);
      --ovly-grd: none;
      --ovly-grd-o: 0.5;
    }
    &:after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--ovly-clr);
      background-image: var(--ovly-grd);
      opacity: var(--ovly-grd-o);
    }
  }
  @media screen and (width < 1280px) {
    &.ovly {
      --ovly-grd: linear-gradient(
        var(--ovly-grd-d),
        var(--ovly-grd-c),
        hsl(from var(--ovly-grd-c) h s l / 0.5)
      );
    }
  }
  :is(img, video) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.lt-bg > .bg {
  opacity: 0.1;
  filter: sepia(100%);
  img {
    mask-image: linear-gradient(
      180deg,
      transparent,
      var(--background),
      transparent
    );
  }
}
.dk-bg > .bg:not(.ovly) {
  opacity: 0.5;
}
:is(section, aside):not(.bg-image) > .bg {
  display: none;
}
[class*="mn_"] {
  width: 100%;
  position: relative;
  margin-inline: auto;
  max-width: var(--mn-wth, none);
}
.mn_wd {
  --mn-wth: var(--mn-w);
}
.mn_tn {
  --mn-wth: var(--mn-t);
}
.mn_ch {
  --mn-wth: var(--mn-ch);
}
.bg-bx {
  --bg-bx-pd-v: 2rem;
  --bg-bx-pd-h: 2rem;
  position: relative;
  z-index: 1;
  padding: var(--bg-bx-pd-v) var(--bg-bx-pd-h);
  backdrop-filter: blur(0.5rem);
  &:has([class*="anm_scl"]) {
    contain: paint;
  }
  .bg.ovly {
    --ovly-grd-c: var(--theme-background);
  }
}
.lt-bg .lk-bg,
.dk-bg .ulk-bg {
  border: solid 1px var(--primary);
}
.lt-bg .ulk-bg,
.dk-bg .lk-bg {
  .bg:not(.ovly) {
    opacity: 0.5;
  }
}
.f_gp {
  gap: var(--flx-gap);
  > .half {
    width: calc(var(--half) - var(--flx-gap) * 0.5);
  }
  > .third {
    width: calc(var(--third) - var(--flx-gap) * 0.667);
  }
  > .two-thirds {
    width: calc(var(--two-thirds) - var(--flx-gap) * 0.333);
  }
  > .two-fifths {
    width: calc(var(--two-fifths) - var(--flx-gap) * 0.6);
  }
  > .three-fifths {
    width: calc(var(--three-fifths) - var(--flx-gap) * 0.4);
  }
}
[class*="gp_sp"] {
  gap: var(--grd-gap);
  &:not([class*="-sml"], [class*="-lrg"]) {
    --grd-gap: var(--grd-sp);
  }
  &[class*="-sml"] {
    --grd-gap: var(--grd-sp-sml);
  }
  &[class*="-lrg"] {
    --grd-gap: var(--grd-sp-lrg);
  }
  > .half {
    width: calc(var(--half) - var(--grd-gap) * 0.5);
  }
  > .third {
    width: calc(var(--third) - var(--grd-gap) * 0.667);
  }
  > .two-thirds {
    width: calc(var(--two-thirds) - var(--grd-gap) * 0.333);
  }
  > .fourth {
    width: calc(var(--fourth) - var(--grd-gap) * 0.75);
  }
  > .three-fourths {
    width: calc(var(--three-fourths) - var(--grd-gap) * 0.25);
  }
  > .fifth {
    width: calc(var(--fifth) - var(--grd-gap) * 0.8);
  }
  > .two-fifths {
    width: calc(var(--two-fifths) - var(--grd-gap) * 0.6);
  }
  > .three-fifths {
    width: calc(var(--three-fifths) - var(--grd-gap) * 0.4);
  }
  > .four-fifths {
    width: calc(var(--four-fifths) - var(--grd-gap) * 0.2);
  }
}
.full {
  width: var(--full);
}
.half {
  width: var(--half);
}
.two-thirds {
  width: var(--two-thirds);
}
.third {
  width: var(--third);
}
.three-fourths {
  width: var(--three-fourths);
}
.fourth {
  width: var(--fourth);
}
.four-fifths {
  width: var(--four-fifths);
}
.three-fifths {
  width: var(--three-fifths);
}
.two-fifths {
  width: var(--two-fifths);
}
.fifth {
  width: var(--fifth);
}
.sixth {
  width: var(--sixth);
}
.tag {
  line-height: 1.25;
  font-family: var(--fnt-t);
  &:not(:has(a)),
  a {
    display: inline-block;
    padding: 0.5em;
    color: inherit;
    border: solid 1px hsl(from var(--primary) h s l / 0.5);
    transition: background-color 0.35s ease 0s;
  }
  @media (hover: hover) and (pointer: fine) {
    a:is(:hover, :focus-visible) {
      background-color: hsl(from var(--primary) h s l / 0.3);
    }
  }
}
@media screen and (width >= 700px) {
  :root {
    --g-pd-v: 6rem;
    --g-pd-h: 4rem;
    --grd-sp-lrg: 3rem;
  }
  .hd-700 {
    display: none !important;
    visibility: hidden !important;
  }
  .ta_l-700 {
    text-align: left;
  }
  .ta_r-700 {
    text-align: right;
  }
}
@media screen and (width >= 1280px) {
  :root {
    --g-pd-v: 9rem;
    --g-pd-h: 7.5rem;
    --flx-gap: 5rem;
    --grd-sp: 2.5rem;
    --grd-sp-sml: 1.5rem;
    --grd-sp-lrg: 4rem;
  }
  .hd-1280 {
    display: none !important;
    visibility: hidden !important;
  }
  .ta_l-1280 {
    text-align: left;
  }
  .ta_r-1280 {
    text-align: right;
  }
}
@media screen and (width >= 1500px) {
  .hd-1500 {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen and (width < 1500px) {
  .sw-1500 {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen and (width < 1280px) {
  .sw-1280 {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen and (width < 700px) {
  .sw-700 {
    display: none !important;
    visibility: hidden !important;
  }
  br {
    display: none;
  }
}
:root {
  --fnt-m: "DM Sans", sans-serif;
  --fnt-t: "Cormorant Garamond", serif;
  --fnt-c: "Mrs Saint Delafield", cursive;
  --bdy-lh: 1.7;
  --bdy-w: 400;
  --kckr-s: 0.875rem;
  --kckr-f: var(--fnt-t);
  --kckr-w: 400;
  --kckr-lh: 1;
  --kckr-ls: 0.4em;
  --kckr-tt: uppercase;
  --h1-s: 3rem;
  --h1-f: var(--fnt-t);
  --h1-w: 500;
  --h1-lh: 0.85;
  --h1-big-s: 18.75svw;
  --h1-big-w: inherit;
  --h1-big-tt: uppercase;
  --h1-crsv-s: 1.667em;
  --h1-crsv-f: var(--fnt-c);
  --h1-crsv-w: 400;
  --h2-s: 2rem;
  --h2-f: var(--fnt-t);
  --h2-w: 500;
  --h2-lh: 1.3;
  --h3-s: 1.5rem;
  --h3-f: var(--fnt-t);
  --h3-w: 500;
  --h3-lh: 1.3;
  --h4-s: 1.25rem;
  --h4-f: var(--fnt-t);
  --h4-w: 500;
  --h4-lh: 1.3;
  --h5-s: 1.125rem;
  --h5-f: var(--fnt-t);
  --h5-w: 500;
  --h5-lh: 1.3;
  --h6-s: 1rem;
  --h6-f: var(--fnt-t);
  --h6-w: 500;
  --h6-lh: 1.3;
  --itm-ttl-s: 2.5rem;
  --itm-ttl-f: var(--fnt-t);
  --itm-ttl-w: 500;
  --itm-ttl-lh: 1.3;
  --itm-ttl-tt: uppercase;
  --qte-s: 1.25rem;
  --qte-f: var(--fnt-t);
  --qte-w: 500;
  --qte-lh: 1.3;
  --atr-s: 1rem;
  --atr-f: var(--fnt-m);
  --atr-w: inherit;
  --atr-lh: 1.1;
}
.fnt_t-k,
section header > small {
  font-size: var(--kckr-s);
  font-family: var(--kckr-f);
  font-weight: var(--kckr-w);
  line-height: var(--kckr-lh);
  letter-spacing: var(--kckr-ls);
  text-transform: var(--kckr-tt);
  &:after {
    content: "";
    display: block;
    height: 1px;
    max-width: 4.25em;
    background-color: var(--primary);
    margin-block-start: var(--title-sp);
  }
}
.ta_ .fnt_t-k:after {
  margin-inline: auto;
}
h1,
.fnt_t-1,
section header:not(:has(> small)) > :first-child:not([class*="fnt_"], p),
section header > small + :not([class*="fnt_"]) {
  position: relative;
  z-index: 1;
  font-size: var(--h1-s);
  font-family: var(--h1-f);
  font-weight: var(--h1-w);
  line-height: var(--h1-lh);
  &:has(em, i) ~ * {
    z-index: 1;
    position: relative;
  }
  :is(strong, b) {
    display: block;
    position: relative;
    white-space: nowrap;
    font-size: var(--h1-big-s);
    font-weight: var(--h1-big-w);
    text-transform: var(--h1-big-tt);
    margin-block-end: -0.2em;
    z-index: -1;
  }
  :is(em, i) {
    pointer-events: none;
    display: inline-block;
    font-style: inherit;
    position: relative;
    font-size: var(--h1-crsv-s);
    font-family: var(--h1-crsv-f);
    font-weight: var(--h1-crsv-w);
    margin-block-end: -0.3em;
    z-index: -1;
  }
}
h2,
.fnt_t-2,
section header:not(:has(> small)) > :nth-child(2):not([class*="fnt_"], p),
section header:has(> small) > :nth-child(3):not([class*="fnt_"], p) {
  font-style: inherit;
  font-size: var(--h2-s);
  font-family: var(--h2-f);
  font-weight: var(--h2-w);
  line-height: var(--h2-lh);
}
h3,
.fnt_t-3 {
  font-size: var(--h3-s);
  font-family: var(--h3-f);
  font-weight: var(--h3-w);
  line-height: var(--h3-lh);
}
h4,
.fnt_t-4 {
  font-size: var(--h4-s);
  font-family: var(--h4-f);
  font-weight: var(--h4-w);
  line-height: var(--h4-lh);
}
h5,
.fnt_t-5 {
  font-size: var(--h5-s);
  font-family: var(--h5-f);
  font-weight: var(--h5-w);
  line-height: var(--h5-lh);
}
h6,
.fnt_t-6 {
  font-size: var(--h6-s);
  font-family: var(--h6-f);
  font-weight: var(--h6-w);
  line-height: var(--h6-lh);
}
.fnt_t-itm {
  font-size: var(--itm-ttl-s);
  font-family: var(--itm-ttl-f);
  font-weight: var(--itm-ttl-w);
  line-height: var(--itm-ttl-lh);
  text-transform: var(--itm-ttl-tt);
}
blockquote {
  font-size: var(--qte-s);
  font-family: var(--qte-f);
  font-weight: var(--qte-w);
  line-height: var(--qte-lh);
  :is(em, i) {
    font-style: inherit;
  }
  address {
    font-size: var(--atr-s);
    font-family: var(--atr-f);
    font-weight: var(--atr-w);
    line-height: var(--atr-lh);
  }
}
@media screen and (width >= 700px) {
  :root {
    --kckr-s: 1.125rem;
    --h1-s: 6rem;
    --h1-crsv-s: 1.6em;
    --h2-s: 2.25rem;
    --h3-s: 1.75rem;
    --h5-s: 1.25rem;
    --h6-s: 1.125rem;
    --itm-ttl-s: 3rem;
    --qte-s: 2rem;
  }
}
@media screen and (width >= 1280px) {
  :root {
    --h1-s: 7rem;
    --h2-s: 2.75rem;
    --h4-s: 1.5rem;
    --itm-ttl-s: 3.25rem;
    --qte-s: 2.5rem;
  }
}
@media screen and (width >= 1500px) {
  :root {
    --h1-s: 8.75rem;
    --h2-s: 3rem;
    --h3-s: 2rem;
    --itm-ttl-s: 3.5rem;
    --qte-s: 3rem;
  }
}
@media screen and (width >= 1920px) {
  :root {
    --h1-s: 9.375rem;
  }
}
:root {
  --title-sp: 1.5rem;
  --content-sp: 2rem;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  padding: 0;
}
figure {
  margin: 0;
}
picture {
  display: block;
  img {
    width: 100%;
    &[src*=".png"] {
      object-fit: contain;
    }
    &[src*=".jpg"],
    &.static-map {
      object-fit: cover;
    }
  }
}
img,
video {
  display: block;
  max-width: 100%;
}
source {
  width: 0;
}
svg {
  height: 1em;
  width: 1em;
  display: block;
  fill: currentColor;
  * {
    pointer-events: none;
  }
  use {
    opacity: 0;
    &:empty {
      display: none;
    }
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
[class*="fnt_t"] {
  display: block;
  margin-block: var(--title-sp);
  text-wrap: balance;
  &:first-child {
    margin-block-start: 0;
  }
  &:last-child {
    margin-block-end: 0;
  }
}
p {
  margin-block: var(--content-sp);
  &:first-child {
    margin-block-start: 0;
  }
  &:last-child {
    margin-block-end: 0;
  }
}
li :not(.cnt-stl) > p {
  --content-sp: 0.5rem;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
dl,
dt,
dd,
time {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
label {
  display: block;
}
input,
select,
textarea {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  resize: none;
  display: block;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}
:-moz-placeholder {
  color: inherit;
  opacity: 1;
}
::-moz-placeholder {
  color: inherit;
  opacity: 1;
}
::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}
blockquote {
  margin: 0;
  address {
    margin-block-start: 2.5rem;
  }
}
address {
  font-style: inherit;
}
a,
button {
  cursor: pointer;
  transition: color 0.25s ease;
}
a {
  text-decoration: none;
}
button {
  padding: 0;
  border: none;
  text-align: inherit;
  line-height: inherit;
  background-color: transparent;
}
.input-text {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  &:not([class*="flx"]) label {
    margin-block-end: 0.5rem;
  }
}
input:not([type="radio"], [type="checkbox"]),
select,
textarea {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.75em 1em;
  color: var(--white);
  background-color: hsl(from var(--black) h s l / 0.7);
  border: solid 1px hsl(from var(--primary) h s l / 0.5);
}
textarea {
  min-height: 7rem;
}
:root {
  --color: var(--dark);
  --background: var(--light);
  --theme-color: inherit;
  --theme-background: hsl(from var(--light) h s l / 0.6);
  --border: var(--primary);
  --link: var(--primary-dark);
  --link-hover: inherit;
  --title: var(--secondary);
  --title-italic: var(--primary);
  --title-bold: hsl(from var(--primary) h s l / 0.3);
}
body,
.dk-bg {
  color: var(--color);
  background-color: var(--background);
}
.dk-bg,
.lt-bg .ulk-bg {
  --color: var(--white);
  --background: var(--black);
  --theme-color: var(--light);
  --theme-background: var(--dark);
  --title: var(--white);
  --title-bold: hsl(from var(--light) h s l / 0.5);
}
.bg-bx {
  color: var(--theme-color);
  background-color: var(--theme-background);
}
h1,
h2,
h3,
h4,
h5,
h6,
[class*="fnt_t"],
section header:not(:has(> small)) > :first-child:not([class*="fnt_"], p),
section header > small + :not([class*="fnt_"]) {
  color: var(--title);
}
h1,
.fnt_t-1,
section header:not(:has(> small)) > :first-child:not([class*="fnt_"], p),
section header > small + :not([class*="fnt_"]) {
  :is(strong, b) {
    color: var(--title-bold);
  }
  :is(em, i) {
    color: var(--title-italic);
  }
}
a,
button {
  color: var(--link);
  @media (hover: hover) and (pointer: fine) {
    &:is(:hover, :focus-visible) {
      color: var(--link-hover);
    }
  }
  &.clr-swp {
    color: var(--link-hover);
    @media (hover: hover) and (pointer: fine) {
      &:is(:hover, :focus-visible) {
        color: var(--link);
      }
    }
  }
}
.clr-txt {
  color: inherit;
}
.clr-lnk {
  color: var(--link);
}
.cnt-stl {
  ul,
  ol {
    margin-block: var(--content-sp);
    padding-left: 1.5rem;
    &:first-child {
      margin-block-start: 0;
    }
    &:last-child {
      margin-block-end: 0;
    }
    ul,
    ol {
      margin-block: 0;
    }
  }
  ol {
    list-style-type: decimal;
  }
  ul {
    list-style-type: disc;
  }
  .lns {
    --g-pd-h: 3rem;
  }
  .image-style-side {
    margin-block: var(--content-sp);
    img {
      width: 100%;
    }
  }
  @media screen and (width >= 700px) {
    .image-style-side {
      width: 30%;
      float: right;
      margin-inline-start: 2rem;
    }
  }
}
@media screen and (width >= 1280px) {
  .cnt-stl {
    --qte-s: 2rem;
  }
}
[class*="flx"] {
  display: flex;
}
.f_rev {
  flex-direction: row-reverse;
}
.f_clm {
  flex-direction: column;
}
.f_wrp {
  flex-wrap: wrap;
}
.f_t {
  align-items: flex-start;
}
.f_m {
  align-items: center;
}
.f_b {
  align-items: flex-end;
}
.f_c {
  justify-content: center;
}
.f_r {
  justify-content: flex-end;
}
.f_sb {
  justify-content: space-between;
}
.fit {
  flex-shrink: 0;
}
.ato {
  flex-grow: 1;
}
.str {
  align-self: stretch;
}
@media screen and (width < 1280px) {
  .flx-at-1280 {
    flex-direction: column;
    align-items: flex-start;
    > * {
      width: 100% !important;
    }
  }
  :is(.ta_, .ta_l-1280, .ta_r-1280) .flx-at-1280,
  :is(.ta_, .ta_l-1280, .ta_r-1280).flx-at-1280 {
    align-items: center;
  }
}
@media screen and (width < 700px) {
  .flx-at-700 {
    flex-direction: column;
    align-items: flex-start;
    > * {
      width: 100% !important;
    }
  }
  :is(.ta_, .ta_l-700, .ta_r-700) .flx-at-700,
  :is(.ta_, .ta_l-700, .ta_r-700).flx-at-700 {
    align-items: center;
  }
}
:has(> .grd) {
  container-type: inline-size;
}
.grd {
  --itm-val: 100;
  --itm-w: calc(var(--itm-val) * 1cqw);
  --itm-grw: 1;
  display: flex;
  flex-wrap: wrap;
  &[class*="gp_sp"] {
    --itm-w: calc(
      var(--itm-val) * 1cqw - (var(--grd-gap) * ((100 - var(--itm-val)) * 0.01))
    );
  }
  &.ato-fit {
    --itm-grw: 0;
  }
  &.mx-6,
  &.mx-7 {
    --itm-val: 50;
  }
  > * {
    flex: var(--itm-grw) 0 var(--itm-w);
  }
  @container (width >= 35rem) {
    &:not([class*="mx-"]) {
      --itm-val: 50;
    }
    &.mx-6 {
      --itm-val: 33.333;
    }
    &.mx-7 {
      --itm-val: 25;
    }
  }
  @container (width >= 50rem) {
    &.mx-2,
    &.mx-3,
    &.mx-4 {
      --itm-val: 50;
    }
    &:not([class*="mx-"]) {
      --itm-val: 33.333;
    }
    &.mx-6 {
      --itm-val: 25;
    }
  }
  @container (width >= 78rem) {
    &.mx-3 {
      --itm-val: 33.333;
    }
    &.mx-4 {
      --itm-val: 25;
    }
    &:not([class*="mx-"]) {
      --itm-val: 20;
    }
    &.mx-6 {
      --itm-val: 16.66667;
    }
    &.mx-7 {
      --itm-val: 14.285;
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [class*="anm_itm"] {
      --animation-amt: 5rem;
      opacity: 0;
      animation: anmItem linear forwards;
      animation-timeline: view();
      animation-range-start: entry;
      animation-range-end: 50svh;
      &:is(.anm_itm-up, .anm_itm-dwn) {
        translate: 0 var(--animation-sp);
      }
      &.anm_itm-up {
        --animation-sp: var(--animation-amt);
      }
      &.anm_itm-dwn {
        --animation-sp: calc(var(--animation-amt) * -1);
      }
      &:is(.anm_itm-lt, .anm_itm-rt) {
        translate: var(--animation-sp) 0;
      }
      &.anm_itm-lt {
        --animation-sp: var(--animation-amt);
      }
      &.anm_itm-rt {
        --animation-sp: calc(var(--animation-amt) * -1);
      }
    }
    @keyframes anmItem {
      to {
        translate: 0 0;
        opacity: 1;
      }
    }
    [class*="anm_scl"] {
      opacity: 0;
      animation: anmScale linear forwards;
      animation-timeline: view();
      animation-range-start: entry;
      animation-range-end: 50svh;
      &.anm_scl-up {
        scale: 0.8;
      }
      &.anm_scl-dwn {
        scale: 1.4;
      }
    }
    @keyframes anmScale {
      to {
        opacity: 1;
        scale: 1;
      }
    }
    .anm_fltr {
      animation: anmFilter linear forwards;
      animation-timeline: view();
      animation-range-start: 75svh;
      animation-range-end: 100svh;
      ~ :is([class*="anm_itm"], [class*="anm_scl"]),
      ~ * :is([class*="anm_itm"], [class*="anm_scl"]) {
        animation-range-start: 50svh;
        animation-range-end: 80svh;
      }
    }
    .lt-bg .anm_fltr {
      opacity: 1;
      filter: none;
    }
    @keyframes anmFilter {
      to {
        opacity: 0.1;
        filter: sepia(100%);
      }
    }
  }
}
.ftr {
  --g-pd-v: 3rem;
  &.lt-bg {
    --theme-color: var(--secondary);
  }
  .ft-lg {
    color: var(--primary);
    margin-block: calc(var(--g-pd-v) * 2);
    svg {
      width: 100%;
      height: auto;
    }
  }
  address {
    font-family: var(--fnt-t);
    font-size: 1.5em;
    font-weight: 700;
    br {
      display: block;
    }
  }
  small {
    font-size: inherit;
    border-top: solid 1px hsl(from var(--primary) h s l / 0.5);
    margin-block-start: var(--g-pd-v);
    padding-block-start: var(--g-pd-v);
  }
  @media screen and (width < 700px) {
    nav {
      ul {
        gap: 0;
      }
      a {
        display: block;
        padding-block: 1.25em;
        border-bottom: solid 1px hsl(from var(--primary) h s l / 0.5);
      }
    }
    .ft-lg {
      margin-block-end: var(--g-pd-v);
    }
  }
}
#HeaderZone {
  position: relative;
  z-index: 20;
}
body.overlap {
  #HeaderZone {
    position: absolute;
    inset: 0 0 auto;
  }
  .hdr {
    background-color: transparent;
  }
  .lg {
    background-color: transparent;
    padding: 0;
    width: var(--lg-w);
  }
}
.hdr {
  --g-pd-v: 1rem;
  > [class*="mn_"] {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "lt-sd lg rt-sd";
    > nav {
      grid-area: lt-sd;
    }
    > :not(nav, .lg) {
      grid-area: rt-sd;
    }
  }
  .lg {
    --lg-pd-v: 1.375rem;
    --lg-pd-h: 0.8rem;
    background-color: var(--background);
    border-radius: 50%;
    padding: var(--lg-pd-v) var(--lg-pd-h);
    width: calc(var(--lg-w) + var(--lg-pd-h) * 2);
    grid-area: lg;
  }
  @media screen and (width >= 1280px) {
    .lg {
      margin-block-end: -5.5rem;
    }
  }
  nav {
    text-transform: uppercase;
    font-family: var(--fnt-t);
    line-height: 1.25;
    a {
      padding-block: 1em;
    }
  }
}
.dd-nv {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 16rem;
  max-width: 20rem;
  padding: 1rem;
  background-color: var(--background);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.35s ease-in-out 0s, opacity 0.35s ease-in-out 0s;
  ul {
    max-height: calc(100dvh - 10rem);
    padding-inline-end: 0.5rem;
  }
  li + li {
    border-top: solid 1px hsl(from var(--theme-color) h s l / 0.1);
  }
}
li:is(:hover, :focus-visible) > .dd-nv,
li:has(a:is(:hover, :focus-visible)) > .dd-nv,
.dd-nv:has(a:is(:hover, :focus-visible)) {
  opacity: 1;
  visibility: visible;
}
.cms-content {
  .mbl-mnu {
    position: relative;
    display: block !important;
    translate: 0 0;
    visibility: visible !important;
    height: auto;
    width: 50%;
    nav {
      display: none;
    }
  }
}
:root {
  --ui-scroll-brd-rds: 12px;
  --ui-scroll-w: 0.278rem;
}
.ui-scroll {
  overflow: auto;
  &::-webkit-scrollbar {
    width: var(--ui-scroll-w) !important;
    height: calc(var(--ui-scroll-w) * 2) !important;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--text-color);
    border-radius: var(--ui-scroll-brd-rds);
    border: 0;
  }
  &::-webkit-scrollbar-track {
    background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
    border-radius: var(--ui-scroll-brd-rds);
    box-shadow: none;
    opacity: 0.3;
  }
  &[class*="ht-"] {
    --ui-height: auto;
    max-height: var(--ui-height);
  }
  &.ht-10 {
    --ui-height: 10rem;
  }
  &.ht-15 {
    --ui-height: 15rem;
  }
  &.ht-20 {
    --ui-height: 20rem;
  }
}
.mnu-btn {
  font-size: 2.75rem;
  margin-inline-start: auto;
}
.mbl-mnu {
  width: 83%;
  height: 100dvh;
  inset: 0 auto 0 0;
  translate: -100% 0;
  border: none;
  position: fixed;
  transition: translate 0.35s ease, display 0.35s ease allow-discrete,
    overlay 0.35s ease allow-discrete;
  &::backdrop {
    opacity: 0;
    background: hsl(from var(--black) h s l / 0.7);
    transition: opacity 0.35s ease;
    backdrop-filter: blur(3px);
  }
  &:popover-open {
    translate: 0 0;
    &::backdrop {
      opacity: 1;
    }
    @starting-style {
      translate: -100% 0;
      &::backdrop {
        opacity: 0;
      }
    }
  }
  [popovertargetaction="hide"] {
    margin-inline-start: auto;
    gap: 0.5em;
  }
  nav {
    flex-shrink: 1;
    li {
      border-bottom: solid 1px hsl(from var(--primary) h s l / 0.5);
    }
    svg {
      font-size: 2em;
    }
  }
}
.mstg {
  min-height: 100svh;
  .fnt_t-k:after {
    content: "";
    display: block;
    height: 1px;
    max-width: 4.25em;
    background-color: var(--primary);
    margin-block-start: var(--title-sp);
  }
  &.ta_ .fnt_t-k:after,
  .ta_ .fnt_t-k:after {
    margin-inline: auto;
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      [class*="mn_"] {
        > :is(div, ul) {
          opacity: 0;
          translate: 0 1rem;
          animation: anmItem 1s ease-in-out forwards;
        }
        > ul {
          animation-delay: 1s;
        }
        @media screen and (width >= 1280px) {
          &.flx-at-1280 > ul {
            translate: -5rem 0;
          }
        }
      }
    }
  }
}

.wns.v1 {
  header {
    > :first-child :is(strong, b) {
      margin-block-end: -0.415em;
      translate: -3% 0;
    }
  }
  .btn {
    margin-block-start: 2.5rem;
  }
  @media screen and (width >= 1280px) {
    header span {
      margin-inline-start: calc(var(--half) + var(--grd-sp-lrg) * 0.5);
    }
    picture:not(.bg) {
      margin-block-start: calc(var(--hd-mrg-bt) * -1 - 6.5rem);
      width: 34%;
    }
    p {
      max-width: 30rem;
    }
  }
}
.imgs.v1 {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      picture {
        width: 0;
        contain: paint;
        animation: spanning linear forwards;
        animation-timeline: view();
        animation-range: entry;
      }
      img {
        width: 100dvw;
        max-width: none;
      }
    }
  }
}
@keyframes spanning {
  to {
    width: 100%;
  }
}
.gly.v1 {
  header > :first-child {
    :is(strong, b) {
      display: inline-block;
      margin-block-start: -0.335em;
      margin-inline-end: -0.3em;
    }
  }
  .btn {
    margin-block-start: 2.5rem;
  }
  @media screen and (width >= 1280px) {
    header > :first-child {
      display: flex;
      align-items: flex-start;
    }
    picture:not(.bg) {
      margin-block-start: calc((var(--hd-mrg-bt) + var(--h1-s)) * -1);
    }
  }
}
.cta.v1 {
  header > :first-child :is(strong, b) {
    display: inline-block;
    margin-block-end: 0;
    margin-inline-end: -0.5em;
    line-height: 0.175;
    pointer-events: none;
  }
  br {
    display: block;
  }
  p {
    max-width: 32em;
  }
}
@media screen and (width >= 1280px) {
  .cta.v1 {
    min-height: 93svh;
  }
}
.stry.v1 {
  .bg-bx {
    --bg-bx-pd-v: 0;
    --bg-bx-pd-h: 0;
    z-index: 0;
    &:has(video) {
      picture:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
          to top,
          hsl(from var(--black) h s l / 0.5) 20%,
          transparent 55%
        );
      }
    }
    &:not(:has(video)) {
      .btn {
        display: none;
      }
    }
    .btn {
      position: absolute;
      bottom: 18%;
      left: 50%;
      translate: -50% 0;
    }
  }
  .cnt-stl .btn {
    margin-block-start: 2.5rem;
  }
  img {
    height: 100%;
  }
  @media screen and (width >= 1280px) {
    header {
      > :first-child :is(strong, b) {
        text-align: right;
        margin-block-start: -0.335em;
      }
      span {
        text-align: right;
      }
    }
    .cnt-str > div:not(.cnt-stl) {
      margin-block-start: -15%;
    }
  }
}
.pop {
  position: fixed;
  border: none;
  padding: 0;
  opacity: 0;
  background-color: transparent;
  width: calc(100% - var(--g-pd-h) * 2);
  transition-property: opacity, scale, overlay, display;
  transition-duration: 0.35s;
  transition-behavior: allow-discrete;
  &::backdrop {
    opacity: 0;
    backdrop-filter: blur(0.5rem);
    background-color: hsl(from var(--black) h s l / 0.7);
    transition: opacity 0.35s ease-in-out;
  }
  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 1;
    }
    @starting-style {
      opacity: 0;
      scale: 0.8;
      &::backdrop {
        opacity: 0;
      }
    }
  }
  [popovertargetaction="hide"] {
    display: block;
    font-size: 1.25rem;
    margin-block-end: 0.5rem;
    margin-inline-start: auto;
  }
  > div:not(:has(> video:only-child)) {
    padding: 1.5rem 2rem;
  }
  video {
    width: 100%;
  }
}
[class*="asp_"] {
  width: 100%;
  &.asp_1-1 :where(img, video, .imap, iframe) {
    aspect-ratio: 1/1;
  }
  &.asp_16-9 :where(img, video, .imap, iframe) {
    aspect-ratio: 16/9;
  }
  &.asp_9-16 :where(img, video, .imap, iframe) {
    aspect-ratio: 9/16;
  }
  &.asp_3-4 :where(img, video, .imap, iframe) {
    aspect-ratio: 3/4;
  }
  &.asp_5-4 :where(img, video, .imap, iframe) {
    aspect-ratio: 5/4;
  }
  &.asp_12-5 :where(img, video, .imap, iframe) {
    aspect-ratio: 12/5;
  }
  iframe {
    width: 100%;
    height: auto;
  }
}
.pbl.v1 {
  header > :first-child :is(strong, b) {
    translate: -5% 0;
  }
  .btn {
    margin-block-start: 2.5rem;
  }
  .bg-bx img {
    aspect-ratio: 1;
  }
  @media screen and (width >= 700px) {
    .bg-bx {
      --bg-bx-pd-v: 4.5rem;
      --bg-bx-pd-h: 4.5rem;
    }
  }
  @media screen and (width >= 1280px) {
    header {
      width: var(--half);
    }
    ul {
      margin-block-start: calc(var(--hd-mrg-bt) * -1 - 10rem);
    }
    li:nth-child(n + 3) {
      translate: -50% 0;
    }
    p {
      max-width: 30rem;
    }
  }
  @media screen and (700px <= width < 1280px) {
    li {
      width: calc(var(--fourth) - var(--grd-gap) * 0.75);
    }
    .bg-bx {
      --bg-bx-pd-v: 1.5rem;
      --bg-bx-pd-h: 1.5rem;
    }
  }
}
.cta.v2 {
  figure {
    color: var(--primary);
    inset: auto;
    width: 50%;
    left: 50%;
    top: 0;
    translate: -50% 0;
    > div {
      position: absolute;
      top: 50%;
      right: 43%;
      width: 150%;
      height: 40%;
      translate: 0 -65%;
      clip-path: polygon(
        0 0,
        100% 0,
        100% 36%,
        99.75% 44%,
        99.25% 47%,
        99% 50%,
        98.5% 53%,
        98% 53%,
        97% 56%,
        96.25% 58%,
        96.5% 63%,
        98% 100%,
        0 100%
      );
      svg {
        width: auto;
        height: 100%;
      }
    }
    > svg {
      opacity: 0.075;
      width: 100%;
      height: auto;
    }
  }
  header > :first-child :is(strong, b) {
    display: inline-block;
    vertical-align: text-top;
  }
  .btn {
    margin-block-start: 2.5rem;
  }
}
@media screen and (width >= 1280px) {
  .cta.v2 {
    min-height: 120svh;
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        [class*="anm_itm-up"] {
          animation-range-start: 45svh;
          animation-range-end: 75svh;
        }
        figure {
          > div {
            overflow: clip;
            display: block;
            visibility: visible;
            svg {
              left: 0;
              animation: keyPosition linear forwards;
              animation-timeline: view();
              animation-range-start: 15svh;
              animation-range-end: 40svh;
            }
          }
          > svg {
            opacity: 0.3;
            animation: lockOpacity linear forwards;
            animation-timeline: view();
            animation-range-start: 40svh;
            animation-range-end: 65svh;
          }
        }
      }
    }
  }
  @keyframes keyPosition {
    30% {
      left: 25%;
    }
    100% {
      left: 25%;
      opacity: 0;
    }
  }
  @keyframes lockOpacity {
    to {
      opacity: 0.075;
    }
  }
}
.bsn.v1 {
  padding-block-end: 0;
  nav {
    background-color: var(--background);
    margin-block-end: -1.75em;
    max-width: 72rem;
    z-index: 5;
  }
  .bg-bx {
    --bg-bx-pd-v: var(--g-pd-v);
    --bg-bx-pd-h: var(--g-pd-h);
    margin-inline: calc(var(--g-pd-h) * -1);
  }
  small {
    text-transform: uppercase;
    margin-block-start: 0.3em;
  }
  @media screen and (width < 1280px) {
    .bg-bx {
      padding-block: 30% var(--g-pd-v);
      .bg.ovly {
        --ovly-grd: linear-gradient(
          var(--ovly-grd-d),
          var(--ovly-grd-c) 50%,
          transparent
        );
        --ovly-grd-d: 0deg;
        --ovly-grd-o: 0.9;
      }
    }
  }
  @media screen and (width < 700px) {
    .bg-bx {
      padding-block-start: 56%;
    }
  }
  @media screen and (width >= 1280px) {
    nav button {
      font-size: 1.25rem;
    }
    .bg-bx {
      min-height: 80svh;
    }
    p {
      max-width: 30rem;
    }
  }
}
.cta.v3 {
  padding: var(--g-pd-h) !important;
  header > :first-child :is(em, i) {
    display: block;
  }
  @media screen and (width >= 1280px) {
    padding: 2.5rem !important;
    .bg-bx {
      min-height: 95svh;
    }
  }
}



/* =Commerce7 Site Styles */

@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,700|Cormorant+Garamond:400,500,700|Mrs+Saint+Delafield&display=block');

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

html {
  border: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--light);
  font-family: var(--fnt-m);
}

form {
  margin: 0;
  padding: 0;
  border: 0;
}

img {
  border: none;
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
}

/* Fonts */
:root {
	--fnt-m: "DM Sans", sans-serif;
	--fnt-t: "Cormorant Garamond", serif;
	--fnt-c: "Mrs Saint Delafield", cursive;
	
	--bdy-lh: 1.7;
	--bdy-w: 400;
	
	--kckr-s: 0.875rem;
	--kckr-f: var(--fnt-t);
	--kckr-w: 400;
	--kckr-lh: 1;
	--kckr-ls: 0.4em;
	--kckr-tt: uppercase;
	
	--h1-s: 3rem;
	--h1-f: var(--fnt-t);
	--h1-w: 500;
	--h1-lh: 0.85;
	
	--h1-big-s: 18.75svw;
	--h1-big-w: inherit;
	--h1-big-tt: uppercase;
	
	--h1-crsv-s: 1.667em;
	--h1-crsv-f: var(--fnt-c);
	--h1-crsv-w: 400;
	
	--h2-s: 2rem;
	--h2-f: var(--fnt-t);
	--h2-w: 500;
	--h2-lh: 1.3;
	
	--h3-s: 1.5rem;
	--h3-f: var(--fnt-t);
	--h3-w: 500;
	--h3-lh: 1.3;
	
	--h4-s: 1.25rem;
	--h4-f: var(--fnt-t);
	--h4-w: 500;
	--h4-lh: 1.3;
	
	--h5-s: 1.125rem;
	--h5-f: var(--fnt-t);
	--h5-w: 500;
	--h5-lh: 1.3;
	
	--h6-s: 1rem;
	--h6-f: var(--fnt-t);
	--h6-w: 500;
	--h6-lh: 1.3;
	
	--itm-ttl-s: 2.5rem;
	--itm-ttl-f: var(--fnt-t);
	--itm-ttl-w: 500;
	--itm-ttl-lh: 1.3;
	--itm-ttl-tt: uppercase;
	
	--qte-s: 1.25rem;
	--qte-f: var(--fnt-t);
	--qte-w: 500;
	--qte-lh: 1.3;
	
	--atr-s: 1rem;
	--atr-f: var(--fnt-m);
	--atr-w: inherit;
	--atr-lh: 1.1;
	
	/* Color Variables */
	--primary: #C79B31;
	--secondary: #5D4219;
	--light: #FFF9E6;
	--dark: #0E0E0F;
	--white: #FFFFFF;
	--black: #000000;
}

.fnt_t-k, 
section header > small {
	font-size: var(--kckr-s);
	font-family: var(--kckr-f);
	font-weight: var(--kckr-w);
	line-height: var(--kckr-lh);
	letter-spacing: var(--kckr-ls);
	text-transform: var(--kckr-tt);
	
	&:after {
		content: '';
		display: block;
		height: 1px;
		max-width: 4.25em;
		background-color: var(--primary);
		margin-block-start: var(--title-sp);
	}
	
}
	
.ta_ .fnt_t-k:after {
	margin-inline: auto;
}

h1, .fnt_t-1, 
section header:not( :has( > small) ) > :first-child:not([class*='fnt_'], p), 
section header > small + :not([class*='fnt_']) {
	position: relative;
	z-index: 1;
	font-size: var(--h1-s);
	font-family: var(--h1-f);
	font-weight: var(--h1-w);
	line-height: var(--h1-lh);
	
	&:has(em, i) ~ * {
		z-index: 1;
		position: relative;
	}
	
	:is(strong, b) {
		display: block;
		position: relative;
		white-space: nowrap;
		font-size: var(--h1-big-s);
		font-weight: var(--h1-big-w);
		text-transform: var(--h1-big-tt);
		margin-block-end: -0.2em;
		z-index: -1;
	}
	
	:is(em, i) {
		pointer-events: none;
		display: inline-block;
		font-style: inherit;
		position: relative;
		font-size: var(--h1-crsv-s);
		font-family: "Mrs Saint Delafield", cursive;
		font-weight: var(--h1-crsv-w);
		margin-block-end: -0.3em;
		z-index: -1;
		color: var(--primary);
		line-height: 1;
		display: block;
	}
	
}

h2, .fnt_t-2, 
section header:not( :has( > small) ) > :nth-child(2):not([class*='fnt_'], p), 
section header:has( > small) > :nth-child(3):not([class*='fnt_'], p) {
	font-style: inherit;
	font-size: var(--h2-s);
	font-family: var(--h2-f);
	font-weight: var(--h2-w);
	line-height: var(--h2-lh);
}

h3, .fnt_t-3 {
	font-size: var(--h3-s);
	font-family: var(--h3-f);
	font-weight: var(--h3-w);
	line-height: var(--h3-lh);
}

h4, .fnt_t-4 {
	font-size: var(--h4-s);
	font-family: var(--h4-f);
	font-weight: var(--h4-w);
	line-height: var(--h4-lh);
}

h5, .fnt_t-5 {
	font-size: var(--h5-s);
	font-family: var(--h5-f);
	font-weight: var(--h5-w);
	line-height: var(--h5-lh);
}

h6, .fnt_t-6 {
	font-size: var(--h6-s);
	font-family: var(--h6-f);
	font-weight: var(--h6-w);
	line-height: var(--h6-lh);
}

.fnt_t-itm {
	font-size: var(--itm-ttl-s);
	font-family: var(--itm-ttl-f);
	font-weight: var(--itm-ttl-w);
	line-height: var(--itm-ttl-lh);
	text-transform: var(--itm-ttl-tt);
}

blockquote {
	font-size: var(--qte-s);
	font-family: var(--qte-f);
	font-weight: var(--qte-w);
	line-height: var(--qte-lh);
	
	:is(em, i) {
		font-style: inherit;
	}
	
	address {
		font-size: var(--atr-s);
		font-family: var(--atr-f);
		font-weight: var(--atr-w);
		line-height: var(--atr-lh);
	}
	
}

.c7-product-collection .c7-h1 {
	text-align: center;
	font-size: 4rem;
	color: var(--secondary);
}

.c7-product-collection__products--featured .c7-product-collection__product-list {
	margin-top: 60px;
}

.c7-product-collection__products--featured .c7-product__image {
	margin-top: 0;
}

.c7-product__title a,
.c7-reservation-type .c7-h2{
	color: #5D4219;
}

.c7-product-collection .c7-product, 
.c7-product-allocation .c7-product, 
.c7-product-detail .c7-product,
.c7-reservation-type {
	border-radius: 4px;
	border: 1px solid #C79B31;
	background: rgba(255, 249, 230, 0.60);
	backdrop-filter: blur(5px);
	padding: 2rem;
}

.c7-reservation-type .c7-reservation__search {
	padding-top: 20px;
	border-top: 1px solid #C79B31;
}

section.c7-content:before,
.template-contact-us:before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(https://www.theoremvineyards.com/images/commerce-seven/commerce-7-bg.jpg.webp);
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.c7-personalization[data-block-code="homepage"]:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	background-color: rgb(0,0,0,0.5);
}

.c7-personalization[data-block-code="homepage"] .bg {
	position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
    object-fit: cover;
}

.c7-personalization[data-block-code="homepage"] h1 + p {
	margin-top: 0;
}

.btn-con {
	display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.75rem;
    
    .btn + .btn {
		margin-left: 2rem;
	}
    
}

.btn {
	color: #FFFFFF;
	font-family: var(--fnt-t);
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1rem 1.1250rem;
	border: solid 1px var(--primary);
	text-decoration: none;
	line-height: 1;
	transition: background-color 0.3s ease;
}

.btn:is(:hover, :focus) {
	background-color: hsl(from var(--primary) h s l / 0.3);
}

.template-homepage,
.template-homepage header.storefront-header nav a,
.template-homepage .c7-user-nav__account > a, 
.template-homepage .c7-user-nav__cart > button,
.template-homepage footer.storefront-footer .footer__meta .footer__legal,
.template-homepage footer.storefront-footer .footer__nav ul li a,
.template-homepage .newsletter h3 {
	color: #FFFFFF;
}

.template-homepage header.storefront-header .c7-user-nav__cart__title svg,
.template-homepage header.storefront-header .nav-toggle-open svg, 
.template-homepage header.storefront-header .nav-toggle-close svg {
	stroke: #FFFFFF;
}

.c7-account-details__delete-account {
	display: none !important;
}

.newsletter {
	background: transparent;
	padding: 0;
}

.newsletter h3 {
	text-align: center;
	margin-block: 0;
}

.newsletter .c7-personalization__content {
	margin-bottom: 1rem;
}

.newsletter .c7-subscribe__success-message {
	text-align: center;
}

.newsletter .c7-subscribe__success-message h3 {
	font-size: 3rem;
}

.newsletter .c7-form {
	margin-inline: auto;
}

.c7-message.c7-message--alert-error {
	color: var(--black);
}

/* Width >= 700px */
@media screen and (width >= 700px) {
	
	:root {
		--kckr-s: 1.125rem;
		--h1-s: 6rem;
		--h1-crsv-s: 1.6em;
		--h2-s: 2.25rem;
		--h3-s: 1.75rem;
		--h5-s: 1.25rem;
		--h6-s: 1.125rem;
		--itm-ttl-s: 3rem;
		--qte-s: 2rem;
	}
	
	h1.c7-product__title {
		font-size: 4.375rem;
	}
	
}

/* Width < 768px */
@media screen and (width >= 768px) {
	
	header.storefront-header {
		margin-top: 0 !important;
	}
	
}


/* Width < 768px */
@media screen and (width < 768px) {
	
	.template-homepage header.storefront-header .c7-tools,
	.template-homepage header.storefront-header .navigation-wrapper{
		background-color: var(--secondary);
	}
	
	.c7-product-collection .c7-h1 {
		font-size: 3rem;
	}
	
}

/* Width < 1000px */
@media screen and (width < 1000px) {
	
	.c7-product-detail .c7-product,
	.c7-product-collection .c7-product, 
	.c7-product-allocation .c7-product, 
	.c7-product-detail .c7-product {
		display: block;
	}
	
	.c7-product-collection .c7-product__image,
	.c7-product-allocation .c7-product__image {
		margin-right: 0;
		margin-bottom: 20px;
	}
	
}

/* Width >= 1280px */
@media screen and (width >= 1000px) {
	
	h1.c7-product__title {
		font-size: 4.375rem;
		margin-top: 0;
	}
	
}

/* Width >= 1280px */
@media screen and (width >= 1280px) {
	
	:root {
		--h1-s: 7rem;
		--h2-s: 2.75rem;
		--h4-s: 1.5rem;
		--itm-ttl-s: 3.25rem;
		--qte-s: 2.5rem;
	}
	
	h1.c7-product__title {
		font-size: 5.375rem;
	}
	
	.c7-personalization[data-block-code="homepage"] h1 + p {
		margin-top: -8em;
	}
	
	.btn-con {
		margin-top: 3.75rem;
	}
	
}

/* Width >= 1500px */
@media screen and (width >= 1500px) {
	
	:root {
		--h1-s: 8.75rem;
		--h2-s: 3rem;
		--h3-s: 2rem;
		--itm-ttl-s: 3.5rem;
		--qte-s: 3rem;
	}
	
}

/* Width >= 1920px */
@media screen and (width >= 1920px) {
	
	:root {
		--h1-s: 9.375rem;
	}
	
}