/* FEREA - consolidated stylesheet (hand-cleaned Webflow export).
   1  reset (normalize)
   2  base framework -- the load-bearing rules, renamed .wf-
   2b widget geometry the dropped runtime rules used to provide
   3  Ferea design
   4  components -- vanilla replacements for the Webflow runtime,
      its IX3 interactions and the designer's custom code

   Fonts: assets/fonts/fonts.css -- Fira Sans Extra Condensed and
   Akshar, both self-hosted woff2, both SIL OFL 1.1. */

/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}

/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
h1:where(:not([class*="heading-scale-"])), h2:where(:not([class*="heading-scale-"])), h3:where(:not([class*="heading-scale-"])), h4:where(:not([class*="heading-scale-"])), h5:where(:not([class*="heading-scale-"])), h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-1), :where(.heading-scale-2), :where(.heading-scale-3), :where(.heading-scale-4), :where(.heading-scale-5), :where(.heading-scale-6) {
  font-weight: bold;
  margin-bottom: 10px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed:before, .embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}

.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}@media screen and (max-width: 991px) {

  .wf-container {
    max-width: 728px;
  }}
@media screen and (max-width: 479px) {

  .wf-container {
    max-width: none;
  }}

.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}.richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}.richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.tabset {
  position: relative;
}
.tabset:before, .tabset:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.tabset:after {
  clear: both;
}
.tabset-menu {
  position: relative;
}
.tabset-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tabset-link[aria-current="page"], .tabset-link.is-active {
  background-color: #C8C8C8;
}
.tabset-link:focus {
  outline: 0;
}
.tabset-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabset-pane {
  position: relative;
  display: none;
}
.tabset-pane.is-active {
  display: block;
}@media screen and (max-width: 479px) {

  .tabset-link {
    display: block;
  }}
@keyframes spin {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }}


/* ======================================================================
   2b. Widget geometry, re-keyed on this design's own classes
   ======================================================================

   build_css drops every framework rule that existed only so the Webflow
   runtime could drive it. Some of those rules were also carrying real
   LAYOUT -- the navbar's floats and stacking, its mobile menu overlay, the
   slider's strip of inline slides -- and dropping them without restating
   that layout is how a converted template ships a navbar whose menu never
   opens or a slider whose slides stack.

   Everything below is transcribed from `css/webflow.css`, against the class
   or hook the element still carries after the rename. It is emitted BETWEEN
   the framework and the design sheet, so the design keeps overriding it in
   exactly the order it did before -- `.nav`'s transparent background beats
   the widget's `#dddddd` here just as it beat `.w-nav`. Every selector
   scores what the widget selector it replaces scored.
   ====================================================================== */

/* ---- navbar ---------------------------------------------------------- */
/* `.w-nav`, `.w-nav-brand`, `.w-nav-menu` and `.w-nav-button`, on the
   header's own classes. The navbar collapses below 992px
   (`data-collapse="medium"`). */
.nav {
  position: relative;
  background: #dddddd;
  z-index: 1000;
}

.nav::before,
.nav::after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.nav::after {
  clear: both;
}

.nav-logo {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333;
}

.nav-offcanvas {
  position: relative;
  float: right;
}

.hamburger-trigger {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

/* `.w-nav-button.w--open`: the widget's grey while the menu is open. The
   design's own `.hamburger-trigger.w--open` (now `.is-open`) clears it, as
   it did live. */
.hamburger-trigger.is-open {
  background-color: #c8c8c8;
  color: white;
}

/* The mobile menu's overlay. Webflow built it at runtime: below 992px it
   MOVED the <nav> into a `.w-nav-overlay` under the bar. Here the overlay
   is in the markup, round the <nav>, and above 991px it is `display:
   contents` -- no box at all -- so the desktop header's three-column grid
   still sees the <nav> as its first cell. */
.nav-overlay {
  display: contents;
}@media screen and (max-width: 991px) {

  /* `.w-nav[data-collapse="medium"] .w-nav-button { display: block }`
     scored (0,3,0) and so beat the design's `display: flex` on the
     hamburger: the published button IS a block. Two classes here, which
     still beat the design's one. */
  .nav .hamburger-trigger {
    display: block;
  }

  /* `.w-nav-overlay`, hung under the bar: main.js sets its box, as the
     runtime did, from the bar's bottom edge to the end of the document. */
  .nav-overlay {
    position: absolute;
    overflow: hidden;
    display: none;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
  }

  .nav.is-open .nav-overlay,
  .nav.is-closing .nav-overlay {
    display: block;
  }

  /* `[data-nav-menu-open]` in the framework: the menu while it is open,
     which main.js marks `data-menu-open`. An ATTRIBUTE is the point -- it
     scores (0,1,0) and sits before the design sheet, so the design's
     transparent, absolutely placed `.nav-offcanvas` still wins where it
     says something, exactly as it did live, while `display: block
     !important` opens it. */
  [data-menu-open] {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #c8c8c8;
    text-align: center;
    overflow: visible;
    min-width: 200px;
  }

  .nav-overlay [data-menu-open] {
    top: 0;
  }}


/* ---- slider --------------------------------------------------------- */
/* `.w-slider`, `.w-slider-mask`, `.w-slide` and the two arrows, on the home
   page's menu slider. Slides are a strip of inline-blocks in a `nowrap`
   mask; main.js places each slide by its own `transform`, as Webflow's
   runtime does. */
[data-slider] {
  position: relative;
  height: 300px;
  text-align: center;
  background: #dddddd;
  clear: both;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

[data-slider-track] {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
  left: 0;
  right: 0;
  height: 100%;
  white-space: nowrap;
}

[data-slide] {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: left;
}

[data-slider-left],
[data-slider-right] {
  position: absolute;
  width: 80px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  color: white;
  font-size: 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

[data-slider-left] {
  z-index: 3;
  right: auto;
}

[data-slider-right] {
  z-index: 4;
  left: auto;
}

/* The live-region label Webflow appended to every mask: visually hidden,
   read by assistive technology when a slide changes. */
.slider-status {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ---- forms ---------------------------------------------------------- */
/* `.w-form-done` and `.w-form-fail` are `display: none` in the framework,
   and the runtime showed them with an inline `display: block`. `hidden`
   is what main.js toggles now, so a state that is not hidden is shown. */
.form-success:not([hidden]),
.form-error:not([hidden]) {
  display: block;
}

/* ---- controls that used to be <div>s and <a>s ------------------------ */
/* The hamburger, the mega-menu head, the slider arrows, the tab links, the
   FAQ row heads and the cart's open / close / remove controls were a <div>
   or an <a> in the export and are real <button>s here. That crosses the
   UA's form-control reset, which (a) gives the control a border, a grey
   fill and `padding: 1px 6px`, (b) centres its text, and (c) drops the
   inherited `letter-spacing`, `word-spacing` and `text-transform` --
   `font: inherit` carries none of the three.

   Each of those is undone here and nothing else, inside `:where()` so the
   rule scores 0 and every design class still wins exactly as it did
   against the <div> or <a> it replaces. `display: block` is what a <div>
   was; the design sets its own display wherever it wants another. */
:where(.hamburger-trigger, .dropdown-head, .tabset-link, .faq-item-head,
       [data-slider-left], [data-slider-right], [data-cart-open],
       [data-cart-close], [data-cart-remove]) {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}

/* The links among them were inline-blocks (`.w-inline-block`). */
:where([data-cart-open], [data-cart-close], [data-cart-remove],
       .tabset-link) {
  display: inline-block;
}

/* The mega menu's head held its label as <div>s; as <span>s inside the
   <button> the two text lines would be inline boxes, shorter than the
   block boxes they were, and the label's `overflow: hidden` -- the window
   the hover roll runs behind -- applies to block boxes only. */
.dropdown-head .text-button,
.dropdown-head .text-button-normal-text,
.dropdown-head .text-button-hover-text,
.faq-item-head > span,
.header-hamburger-icon-wrapper,
.header-hamburger-icon-line,
.menu-tab-btn-content > span,
[data-slider-left] > span,
[data-slider-right] > span {
  display: block;
}

/* The tab links were <a>s: they took the bare `a` rule's colour and had
   no underline to lose. */
:where(.tabset-link) {
  color: inherit;
  text-decoration: none;
}

/* A <button> never stretches to its container, whatever its `display`: its
   `width: auto` is its own content size. The FAQ row head is a flex row
   that spread the question and the plus across the whole row as a <div>;
   as a <button> it would shrink to the text. */
.faq-item-head,
.dropdown-head {
  width: 100%;
}

/* The FAQ question's heading wrapper is there for the document outline
   only; it must not become a box between the row and its button. Nor may
   it change what the button INHERITS: `display: contents` removes the box
   but not the element, and an <h3> would otherwise hand its own size,
   weight and line height down to the question. */
.faq-heading {
  display: contents;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* `<main>` is inserted between the header and the footer for the document
   outline; it must not become a box the sections are laid out in. */
main {
  display: contents;
}

/* ---- focus ---------------------------------------------------------- */
/* Every control above is now reachable from a keyboard, so each gets a
   ring -- on `:focus-visible` only, the state a pointer press does not
   enter. */
.hamburger-trigger:focus-visible,
.dropdown-head:focus-visible,
.tabset-link:focus-visible,
.faq-item-head:focus-visible,
[data-slider-left]:focus-visible,
[data-slider-right]:focus-visible,
[data-cart-open]:focus-visible,
[data-cart-close]:focus-visible,
[data-cart-remove]:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---- the skip link --------------------------------------------------- */
/* Off-screen until focused. The one piece of chrome this build adds. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: #ffffff;
  color: #000000;
  font-size: 1rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ======================================================================
   3. Ferea design
   ====================================================================== */
:root {
  --_color---pale-cream: #f3efea;
  --text-regular--font-family: var(--_base---font-family--your-body-font);
  --_color---text-colors--paragraph-color: #7e4124;
  --text-regular--font-size: 16px;
  --text-regular--line-height: var(--_base---line-height--line-height-120);
  --text-regular--font-weight: var(--_base---font-weight--regular);
  --text-regular--letter-spacing: var(--_base---global-size--none);
  --_base---global-size--none: 0px;
  --h1--font-family: var(--_base---font-family--your-heading-font);
  --_color---text-colors--heading-color: #7e4124;
  --h1--font-size: clamp(70px, 13cqw, 200px);
  --h1--line-height: var(--_base---line-height--line-height-90);
  --h1--font-weight: var(--_base---font-weight--black);
  --h1--letter-spacing: var(--_base---global-size--none);
  --h2--font-family: var(--_base---font-family--your-heading-font);
  --h2--font-size: clamp(55px, 7.6cqw, 120px);
  --h2--line-height: var(--_base---line-height--line-height-90);
  --h2--font-weight: var(--_base---font-weight--black);
  --h3--font-family: var(--_base---font-family--your-heading-font);
  --h3--font-size: clamp(42px, 7cqw, 72px);
  --h3--line-height: var(--_base---line-height--line-height-90);
  --h3--font-weight: var(--_base---font-weight--black);
  --h3--letter-spacing: var(--_base---global-size--none);
  --h4--font-family: var(--_base---font-family--your-heading-font);
  --h4--font-size: clamp(36px, 6cqw, 64px);
  --h4--line-height: var(--_base---line-height--line-height-90);
  --h4--font-weight: var(--_base---font-weight--black);
  --h4--letter-spacing: var(--_base---global-size--none);
  --h5--font-family: var(--_base---font-family--your-heading-font);
  --h5--font-size: clamp(28px, 5.3cqw, 48px);
  --h5--line-height: var(--_base---line-height--line-height-90);
  --h5--font-weight: var(--_base---font-weight--black);
  --h5--letter-spacing: var(--_base---global-size--none);
  --h6--font-family: var(--_base---font-family--your-heading-font);
  --h6--font-size: 24px;
  --h6--line-height: var(--_base---line-height--line-height-90);
  --h6--font-weight: var(--_base---font-weight--bold);
  --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
  --_common-spacing---spacing-6x: 12px;
  --_common-spacing---spacing-11x: 24px;
  --_common-spacing---spacing-5x: 10px;
  --_common-spacing---flex-grid-gap--gap-12: 12px;
  --_base---line-height--line-height-150: 150%;
  --_base---global-size--full: 100%;
  --_base---font-weight--semi-bold: 600;
  --_base---font-family--your-heading-font: "Fira Sans Extra Condensed", sans-serif;
  --_base---font-size--font-size-16: 16px;
  --_base---line-height--line-height-160: 160%;
  --_ui---section--padding-default: 80px;
  --_ui---container--padding: 32px;
  --_ui---container--max-width: 1408px;
  --_common-spacing---spacing-3x: 6px;
  --_color---copper-brown: #ac6d36;
  --_base---bordar-radius--round-pill: 500px;
  --_ui---primary-button--font-family: var(--_base---font-family--your-body-font);
  --_ui---primary-button--font-size: var(--_base---font-size--font-size-24);
  --_ui---primary-button--line-height: var(--_base---line-height--line-height-100);
  --_ui---primary-button--font-weight: var(--_base---font-weight--bold);
  --_ui---primary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
  --_color---burnt-sienna: #7e4124;
  --_color---normal-color--transparent: transparent;
  --_base---bordar-radius--round: 100%;
  --text-extra-large--font-size: 20px;
  --_base---line-height--line-height-120: 120%;
  --_base---font-weight--regular: 400;
  --_common-spacing---spacing-8x: 16px;
  --_base---bordar-radius--round-2x: 12px;
  --_color---warm-ivory: #e7dfd3;
  --text-small--font-family: var(--_base---font-family--your-body-font);
  --text-small--font-size: 14px;
  --text-small--line-height: var(--_base---line-height--line-height-120);
  --text-small--font-weight: var(--_base---font-weight--regular);
  --text-small--letter-spacing: var(--_base---global-size--none);
  --_common-spacing---spacing-1x: 2px;
  --_base---bordar-radius--round-1x: 8px;
  --_color---rgba-colors--electric-purple-25: #9c4fff40;
  --_common-spacing---spacing-10x: 20px;
  --text-extra-large--font-family: var(--_base---font-family--your-body-font);
  --text-extra-large--line-height: var(--_base---line-height--line-height-120);
  --text-extra-large--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--letter-spacing: var(--_base---global-size--none);
  --_common-spacing---spacing-13x: 32px;
  --_color---rgba-color--rgba-4: #f3efeacc;
  --text-learge--font-family: var(--_base---font-family--your-body-font);
  --text-learge--font-size: 18px;
  --text-learge--line-height: var(--_base---line-height--line-height-120);
  --text-learge--font-weight: var(--_base---font-weight--regular);
  --text-learge--letter-spacing: var(--_base---global-size--none);
  --text-extra-small--font-family: var(--_base---font-family--your-body-font);
  --text-extra-small--font-size: 12px;
  --text-extra-small--line-height: var(--_base---line-height--line-height-120);
  --text-extra-small--font-weight: var(--_base---font-weight--regular);
  --text-extra-small--letter-spacing: var(--_base---global-size--none);
  --_common-spacing---spacing-18x: 64px;
  --_common-spacing---spacing-7x: 14px;
  --_common-spacing---spacing-14x: 40px;
  --_ui---section--padding-large: 160px;
  --_color---rgba-colors--black-25: #00000040;
  --_base---line-height--line-height-115: 115%;
  --_base---spacing-letter--spacing-letter-2x: -.02em;
  --text-large-2x--font-size: 24px;
  --_base---line-height--line-height-100: 100%;
  --_base---bordar-radius--round-4x: 24px;
  --_common-spacing---spacing-2x: 4px;
  --_common-spacing---spacing-15x: 48px;
  --_base---font-weight--bold: 700;
  --_common-spacing---spacing-17x: 60px;
  --_ui---section--first-section-padding-top: 160px;
  --_common-spacing---spacing-4x: 8px;
  --_base---bordar-radius--round-6x: 48px;
  --_common-spacing---spacing-22x: 100px;
  --_color---section-label-bg-gradiant--first-color: #110522;
  --_color---section-label-bg-gradiant--last-color: #1c003d;
  --_color---title-color-primary-gradiant--first-color: white;
  --_color---title-color-primary-gradiant--middle-color: #ff90ff;
  --_color---title-color-primary-gradiant--last-color: #852aff;
  --_color---rgba-color--rgba-3: #7e412480;
  --_base---font-family--your-body-font: Akshar, sans-serif;
  --text-large-3x--font-size: clamp(26px, 4.5cqw, 32px);
  --text-large-3x--font-weight: var(--_base---font-weight--semi-bold);
  --_common-spacing---spacing-20x: 80px;
  --_base---bordar-radius--round-7x: 64px;
  --_color---rgba-color--rgba-1: #5c230826;
  --_color---soft-taupe: #d0bbaf;
  --_color---normal-color--white: white;
  --_color---rgba-color--rgba-2: #7e41244d;
  --_base---bordar-radius--round-5x: 32px;
  --text-large-2x--font-family: var(--_base---font-family--your-body-font);
  --text-large-2x--line-height: var(--_base---line-height--line-height-120);
  --text-large-2x--font-weight: var(--_base---font-weight--regular);
  --text-large-2x--letter-spacing: var(--_base---global-size--none);
  --_ui---section--padding-small: 40px;
  --text-large-3x--font-family: var(--_base---font-family--your-body-font);
  --text-large-3x--line-height: var(--_base---line-height--line-height-120);
  --text-large-3x--letter-spacing: var(--_base---global-size--none);
  --_color---golden-amber: #dd9f57;
  --_common-spacing---spacing-25x: 130px;
  --_common-spacing---spacing-9x: 18px;
  --_common-spacing---spacing-19x: 70px;
  --_common-spacing---spacing-21x: 90px;
  --_common-spacing---spacing-28x: 160px;
  --_color---normal-color--black: black;
  --_base---global-size--hulf: 50%;
  --display-text--font-family: var(--_base---font-family--your-heading-font);
  --display-text--font-weight: var(--_base---font-weight--black);
  --display-text--font-size: clamp(60px, 20cqw, 280px);
  --display-text--line-height: var(--_base---line-height--line-height-90);
  --display-text--letter-spacing: var(--_base---global-size--none);
  --h2--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--thin: 100;
  --_base---font-weight--extra-light: 200;
  --_base---font-weight--light: 300;
  --_ui---secondary-button--font-family: var(--_base---font-family--your-body-font);
  --_base---font-weight--medium: 500;
  --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
  --_ui---secondary-button--font-size: var(--_base---font-size--font-size-16);
  --_ui---secondary-button--line-height: var(--_base---line-height--line-height-125);
  --_base---font-weight--extra-bold: 800;
  --_ui---secondary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-1x);
  --_base---font-weight--black: 900;
  --_base---font-size--font-size-14: 14px;
  --_base---font-size--font-size-18: 18px;
  --_base---font-size--font-size-20: 20px;
  --_base---font-size--font-size-22: 22px;
  --_base---font-size--font-size-24: 24px;
  --_base---font-size--font-size-26: 26px;
  --_base---font-size--font-size-28: 28px;
  --_base---font-size--font-size-36: 36px;
  --_base---font-size--font-size-40: 40px;
  --_base---font-size--font-size-46: 46px;
  --_base---font-size--font-size-52: 52px;
  --_base---font-size--font-size-64: 64px;
  --_base---font-size--font-size-68: 68px;
  --_base---font-size--font-size-72: 72px;
  --_base---font-size--font-size-80: 80px;
  --_base---line-height--line-height-90: 90%;
  --_base---line-height--line-height-105: 105%;
  --_base---line-height--line-height-110: 110%;
  --_base---line-height--line-height-125: 125%;
  --_base---line-height--line-height-130: 130%;
  --_base---line-height--line-height-135: 135%;
  --_base---line-height--line-height-140: 140%;
  --_base---line-height--line-height-170: 170%;
  --_base---bordar-radius--round-r4: 4px;
  --_base---bordar-radius--round-3x: 16px;
  --_base---spacing-letter--spacing-letter-1x: -.01em;
  --_common-spacing---spacing-12x: 28px;
  --_base---spacing-letter--spacing-letter-3x: -.03em;
  --_common-spacing---spacing-16x: 50px;
  --_base---spacing-letter--spacing-letter-4x: -.04em;
  --_common-spacing---spacing-23x: 110px;
  --_common-spacing---spacing-24x: 120px;
  --_common-spacing---spacing-26x: 140px;
  --_common-spacing---spacing-27x: 150px;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}@media screen and (max-width: 991px) {

  .wf-layout-blockcontainer {
    max-width: 728px;
  }}
@media screen and (max-width: 767px) {

  .wf-layout-blockcontainer {
    max-width: none;
  }
  .wf-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
  .wf-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }
  .wf-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }}
@media screen and (max-width: 479px) {

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }  .wf-commerce-commercecartquantity, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
  .wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }}

body {
  background-color: var(--_color---pale-cream);
  font-family: var(--text-regular--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-regular--font-size);
  line-height: var(--text-regular--line-height);
  font-weight: var(--text-regular--font-weight);
  letter-spacing: var(--text-regular--letter-spacing);
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h1--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h1--font-size);
  line-height: var(--h1--line-height);
  font-weight: var(--h1--font-weight);
  letter-spacing: var(--h1--letter-spacing);
  text-transform: uppercase;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h2--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h1--letter-spacing);
  text-transform: uppercase;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h3--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h3--font-size);
  line-height: var(--h3--line-height);
  font-weight: var(--h3--font-weight);
  letter-spacing: var(--h3--letter-spacing);
  text-transform: uppercase;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h4--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h4--font-size);
  line-height: var(--h4--line-height);
  font-weight: var(--h4--font-weight);
  letter-spacing: var(--h4--letter-spacing);
  text-transform: uppercase;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h5--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h5--font-size);
  line-height: var(--h5--line-height);
  font-weight: var(--h5--font-weight);
  letter-spacing: var(--h5--letter-spacing);
  text-transform: uppercase;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h6--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h6--font-size);
  line-height: var(--h6--line-height);
  font-weight: var(--h6--font-weight);
  letter-spacing: var(--h6--letter-spacing);
  text-transform: uppercase;
}
p {
  margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--text-regular--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-regular--font-size);
  line-height: var(--text-regular--line-height);
  font-weight: var(--text-regular--font-weight);
  letter-spacing: var(--text-regular--letter-spacing);
}
a {
  color: var(--_color---text-colors--paragraph-color);
  text-underline-offset: 4px;
  text-decoration: none;
}
ul {
  margin-top: var(--_common-spacing---spacing-6x);
  margin-bottom: var(--_common-spacing---spacing-6x);
  padding-left: var(--_common-spacing---spacing-11x);
  grid-column-gap: var(--_common-spacing---spacing-5x);
  grid-row-gap: var(--_common-spacing---spacing-5x);
  flex-flow: column;
  display: flex;
}
ol {
  margin-top: var(--_common-spacing---spacing-11x);
  margin-bottom: var(--_common-spacing---spacing-11x);
  padding-left: var(--_common-spacing---spacing-11x);
  grid-column-gap: var(--_common-spacing---flex-grid-gap--gap-12);
  grid-row-gap: var(--_common-spacing---flex-grid-gap--gap-12);
  flex-flow: column;
  display: flex;
}
li {
  line-height: var(--_base---line-height--line-height-150);
}
img {
  max-width: var(--_base---global-size--full);
  display: block;
}
strong {
  font-weight: var(--_base---font-weight--semi-bold);
}
em {
  font-style: italic;
}
blockquote {
  margin-top: var(--_common-spacing---spacing-11x);
  margin-bottom: var(--_common-spacing---spacing-11x);
  padding: var(--_common-spacing---spacing-11x);
  background-color: var(--_color---pale-cream);
  font-family: var(--_base---font-family--your-heading-font);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--_base---font-size--font-size-16);
  line-height: var(--_base---line-height--line-height-160);
  border-left: 5px solid #e2e2e2;
}
.utility-page-wrap {
  width: var(--_base---global-size--full);
  height: 100vh;
  padding-top: var(--_ui---section--padding-default);
  padding-right: var(--_ui---container--padding);
  padding-bottom: var(--_ui---section--padding-default);
  padding-left: var(--_ui---container--padding);
  justify-content: center;
  align-items: center;
  min-height: max-content;
  display: flex;
}
.utility-page-content {
  width: 556px;
  max-width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.container {
  width: var(--_base---global-size--full);
  max-width: var(--_ui---container--max-width);
  padding-right: var(--_ui---container--padding);
  padding-left: var(--_ui---container--padding);
  margin-left: auto;
  margin-right: auto;
}
.container.positon-relative {
  z-index: 50;
  position: relative;
}
.button {
  z-index: 30;
  padding: var(--_common-spacing---spacing-3x) var(--_common-spacing---spacing-3x) var(--_common-spacing---spacing-3x) var(--_common-spacing---spacing-11x);
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  border: 1px solid var(--_color---copper-brown);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---copper-brown);
  font-family: var(--_ui---primary-button--font-family);
  color: var(--_color---pale-cream);
  font-size: var(--_ui---primary-button--font-size);
  line-height: var(--_ui---primary-button--line-height);
  font-weight: var(--_ui---primary-button--font-weight);
  text-align: center;
  letter-spacing: var(--_ui---primary-button--letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .2s linear;
  display: flex;
  position: relative;
  overflow: hidden;
}
.button:where(.button-style-two) {
  border-color: var(--_color---burnt-sienna);
  background-color: var(--_color---normal-color--transparent);
  color: var(--_color---burnt-sienna);
}
.button:where(.button-style-four) {
  border-color: var(--_color---normal-color--transparent);
  background-color: var(--_color---pale-cream);
  color: var(--_color---copper-brown);
}
.button:where(.button-style-five) {
  padding: var(--_base---global-size--none);
  border-radius: var(--_base---bordar-radius--round);
}
.button:where(.button-style-six) {
  padding: var(--_base---global-size--none);
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  border-color: var(--_color---normal-color--transparent);
  background-color: var(--_color---normal-color--transparent);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--_base---line-height--line-height-120);
  font-weight: var(--_base---font-weight--regular);
  letter-spacing: var(--_base---global-size--none);
}
.button.style-three {
  padding-top: var(--_base---global-size--none);
  padding-right: var(--_base---global-size--none);
  padding-bottom: var(--_base---global-size--none);
  padding-left: var(--_base---global-size--none);
  grid-column-gap: var(--_common-spacing---spacing-5x);
  grid-row-gap: var(--_common-spacing---spacing-5x);
  border-top-color: var(--_color---normal-color--transparent);
  border-right-color: var(--_color---normal-color--transparent);
  border-bottom-color: var(--_color---copper-brown);
  border-left-color: var(--_color---normal-color--transparent);
  border-top-left-radius: var(--_base---global-size--none);
  border-top-right-radius: var(--_base---global-size--none);
  border-bottom-left-radius: var(--_base---global-size--none);
  border-bottom-right-radius: var(--_base---global-size--none);
  background-color: var(--_color---normal-color--transparent);
  color: var(--_color---copper-brown);
  width: fit-content;
}
.button-text-wrap {
  z-index: 10;
  position: relative;
  overflow: hidden;
}
.button-text-wrap:where(.button-style-five) {
  display: none;
}
.button-icon-wrap {
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 8px;
  height: 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}.button-icon-wrap.style-three {
  width: 12px;
  height: 12px;
}

.button-text.second-text {
  z-index: 10;
  position: absolute;
  bottom: auto;
  right: auto;
}
.button-icon {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.button-icon.hover-icon {
  position: absolute;
  inset: 0% auto auto 0%;
}
.header-section {
  z-index: 777;
  width: var(--_base---global-size--full);
  display: block;
  position: absolute;
  top: 0;
}
.style-guide-section {
  z-index: 200;
  padding-bottom: var(--_ui---section--padding-default);
  position: relative;
}
.style-guide-color-item {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
}
.color {
  border-radius: var(--_base---bordar-radius--round-2x);
  justify-content: flex-start;
  align-items: center;
  height: 150px;
}
.color.color-two {
  border: 1px solid var(--_color---burnt-sienna);
  background-color: var(--_color---pale-cream);
}
.color.color-five {
  background-color: var(--_color---burnt-sienna);
}
.color.color-one {
  background-color: var(--_color---copper-brown);
}
.color.color-four {
  background-color: var(--_color---warm-ivory);
}
.h6-style {
  font-family: var(--h6--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h6--font-size);
  line-height: var(--h6--line-height);
  font-weight: var(--h6--font-weight);
  letter-spacing: var(--h6--letter-spacing);
  text-transform: uppercase;
  display: block;
}
.h2-style {
  font-family: var(--h2--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h1--letter-spacing);
  text-transform: uppercase;
}
.h2-style.fream-text.home-attractive-heading-accent {
  margin-top: 0;
}
.h2-style.fream-text.is-team-section {
  margin-top: -5px;
  margin-bottom: -5px;
}
.h2-style.positon-relative {
  z-index: 10;
  position: relative;
}
.h5-style {
  font-family: var(--h5--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h5--font-size);
  line-height: var(--h5--line-height);
  font-weight: var(--h5--font-weight);
  letter-spacing: var(--h5--letter-spacing);
  text-transform: uppercase;
}
.style-guide-typography-items {
  flex-flow: column;
  display: flex;
}
.text-small {
  font-family: var(--text-small--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-small--font-size);
  line-height: var(--text-small--line-height);
  font-weight: var(--text-small--font-weight);
  letter-spacing: var(--text-small--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.text-small.payment-method-name {
  padding-top: var(--_common-spacing---spacing-1x);
  padding-right: var(--_common-spacing---spacing-6x);
  padding-bottom: 2px;
  padding-left: var(--_common-spacing---spacing-6x);
  border-top-left-radius: var(--_base---bordar-radius--round-1x);
  border-top-right-radius: var(--_base---bordar-radius--round-1x);
  border-bottom-left-radius: var(--_base---bordar-radius--round-1x);
  border-bottom-right-radius: var(--_base---bordar-radius--round-1x);
  background-color: var(--_color---rgba-colors--electric-purple-25);
  line-height: var(--text-small--line-height);
  justify-content: center;
  align-items: center;
  width: fit-content;
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}
.button-style-wrap {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.text-regular {
  font-family: var(--text-regular--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-regular--font-size);
  line-height: var(--text-regular--line-height);
  font-weight: var(--text-regular--font-weight);
  letter-spacing: var(--text-regular--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
}
.color-box {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.h4-style {
  font-family: var(--h4--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h4--font-size);
  line-height: var(--h4--line-height);
  font-weight: var(--h4--font-weight);
  letter-spacing: var(--h4--letter-spacing);
  text-transform: uppercase;
}
.h1-style {
  font-family: var(--h1--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h1--font-size);
  line-height: var(--h1--line-height);
  font-weight: var(--h1--font-weight);
  letter-spacing: var(--h1--letter-spacing);
  text-transform: uppercase;
}
.h1-style.home-hero-titloe {
  margin-top: var(--_common-spacing---spacing-8x);
  margin-bottom: var(--_common-spacing---spacing-11x);
}
.text-extra-large {
  font-family: var(--text-extra-large--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--text-extra-large--line-height);
  font-weight: var(--text-extra-large--font-weight);
  letter-spacing: var(--text-extra-large--letter-spacing);
}
.text-extra-large.home-hero-para {
  width: var(--_base---global-size--full);
  max-width: 514px;
  margin-right: auto;
  margin-bottom: var(--_common-spacing---spacing-13x);
  margin-left: auto;
}
.text-extra-large.weight-semi-bold.is-link {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_color---normal-color--transparent);
  text-decoration-color: var(--_color---normal-color--transparent);
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}
.text-extra-large.weight-semi-bold.is-link:hover {
  -webkit-text-decoration-color: var(--_color---burnt-sienna);
  text-decoration-color: var(--_color---burnt-sienna);
}
.text-extra-large.home-features-intro-text {
  width: var(--_base---global-size--full);
  max-width: 436px;
  margin-left: auto;
  margin-right: auto;
}
.text-extra-large.text-color-light.why-choos-section-para {
  max-width: 400px;
}
.text-extra-large.text-light-color-op {
  color: var(--_color---rgba-color--rgba-4);
}
.text-extra-large.text-normal-case._404-para {
  width: var(--_base---global-size--full);
  max-width: 266px;
  margin-left: auto;
  margin-right: auto;
}
.text-large {
  font-family: var(--text-learge--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-learge--font-size);
  line-height: var(--text-learge--line-height);
  font-weight: var(--text-learge--font-weight);
  letter-spacing: var(--text-learge--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.text-extra-small {
  font-family: var(--text-extra-small--font-family);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-extra-small--font-size);
  line-height: var(--text-extra-small--line-height);
  font-weight: var(--text-extra-small--font-weight);
  letter-spacing: var(--text-extra-small--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.style-guide-example-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-13x);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-item {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  display: flex;
}
.h3-style {
  font-family: var(--h3--font-family);
  color: var(--_color---text-colors--heading-color);
  font-size: var(--h3--font-size);
  line-height: var(--h3--line-height);
  font-weight: var(--h3--font-weight);
  letter-spacing: var(--h3--letter-spacing);
  text-transform: uppercase;
}
.style-guide-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  flex-flow: column;
  display: flex;
}
.changelog-item-head {
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-7x);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.utility-content-wrap {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  display: flex;
}
.utility-content-wrap.is-changelog {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}
.utility-content-wrap.is-instructions {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  max-width: 745px;
  margin-left: auto;
  margin-right: auto;
}
.utility-section {
  z-index: 100;
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
  position: relative;
}
.utility-content-item-inner {
  margin-top: var(--_common-spacing---spacing-11x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
}
.changelog-item {
  width: var(--_base---global-size--full);
  text-align: center;
  border-radius: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.instructions-item {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.license-item {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.fit-content-wrap {
  width: fit-content;
}
.margin-none {
  margin-top: 0;
  margin-bottom: 0;
}
.test-anim-item {
  width: var(--_base---global-size--full);
  aspect-ratio: 1;
  border: 1px solid var(--_color---rgba-colors--electric-purple-25);
  background-color: var(--_color---rgba-colors--black-25);
  object-fit: fill;
  justify-content: center;
  align-items: center;
  display: flex;
}
.text-button {
  z-index: 20;
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--_base---line-height--line-height-115);
  font-weight: var(--_base---font-weight--semi-bold);
  letter-spacing: var(--_base---global-size--none);
  text-transform: uppercase;
  width: fit-content;
  padding: 0;
  text-decoration: none;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: linear;
  position: relative;
  overflow: hidden;
}
.text-button:where(.text-button-style-two) {
  font-size: var(--h6--font-size);
  line-height: var(--h6--line-height);
  letter-spacing: var(--_base---spacing-letter--spacing-letter-2x);
}
.text-button:where(.text-button-style-three) {
  color: var(--_color---pale-cream);
  font-size: var(--text-large-2x--font-size);
  line-height: var(--_base---line-height--line-height-100);
}
.nav-wrap {
  z-index: 1;
  padding-top: var(--_common-spacing---spacing-6x);
  padding-bottom: var(--_common-spacing---spacing-6x);
  position: relative;
}
.hamburger-trigger-wrap {
  display: none;
}
.nav-dropdown-icon {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  position: relative;
}
.nav-dropdown-toggle-content {
  background-color: #0000;
  width: 100%;
  padding-top: 30px;
  display: none;
  position: absolute;
  left: 0;
}
.nav-dropdown-toggle-content.is-open {
  max-width: 100%;
}
.nav-dropdown-toggle-content.megamenu {
  z-index: 20;
  border-top-left-radius: var(--_base---bordar-radius--round-4x);
  border-top-right-radius: var(--_base---bordar-radius--round-4x);
  border-bottom-left-radius: var(--_base---bordar-radius--round-4x);
  border-bottom-right-radius: var(--_base---bordar-radius--round-4x);
  width: fit-content;
  min-width: 220px;
  display: none;
  left: 0%;
  overflow: hidden;
  transform: translate(0%);
  box-shadow: 0 5px 5px #0000000d;
}
.nav-offcanvas {
  position: static;
}
.nav-btn-inner {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
  display: flex;
}
.nav-dropdown-menu {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 0;
  display: flex;
}
.nav-dropdown-menu.megamenu {
  grid-column-gap: var(--_common-spacing---spacing-7x);
  grid-row-gap: var(--_common-spacing---spacing-7x);
  min-width: 100px;
}
.nav-dropdown-menu-arcive-first {
  padding: var(--_common-spacing---spacing-11x) var(--_common-spacing---spacing-13x);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-radius: var(--_base---bordar-radius--round-4x);
  background-color: var(--_color---pale-cream);
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
}
.nav-logo {
  max-height: 44px;
  padding: var(--_base---global-size--none);
}
.nav-dropdown-menu-arcive {
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.nav-dropdown {
  position: static;
}
.nav-dropdown-list-title {
  opacity: .8;
  font-size: var(--text-extra-large--font-size);
  white-space: nowrap;
}
.nav {
  background-color: #0000;
}
.nav-dropdown-menu-inner {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.nav-menu {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  justify-content: center;
  align-items: center;
  display: flex;
}
.desktop-hidden {
  display: none;
}
.nav-inner {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  grid-template-rows: auto;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
  position: static;
}
.section-label-content {
  padding-top: var(--_common-spacing---spacing-5x);
  padding-right: var(--_common-spacing---spacing-8x);
  padding-bottom: var(--_common-spacing---spacing-5x);
  padding-left: var(--_common-spacing---spacing-8x);
  border-top-left-radius: var(--_base---bordar-radius--round-pill);
  border-top-right-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-left-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-right-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---burnt-sienna);
  transform-origin: 0 100%;
  color: var(--_color---pale-cream);
  font-size: var(--h6--font-size);
  line-height: var(--_base---line-height--line-height-100);
  font-weight: var(--_base---font-weight--bold);
  text-align: center;
  text-transform: uppercase;
  width: fit-content;
  transform: rotate(-5deg);
}
.section-label-content:where(.section-label-style-two) {
  background-color: var(--_color---pale-cream);
  color: var(--_color---burnt-sienna);
}
.brand-marquee-truck {
  grid-column-gap: var(--_common-spacing---spacing-17x);
  grid-row-gap: var(--_common-spacing---spacing-17x);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
.utility-page-form.is-401 {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
}
.containe-size-banner {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  object-fit: contain;
}
.utility-hero-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-default);
}
.text-center {
  text-align: center;
}
.text-center.license-title-with-para {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  display: flex;
}
.rating-v1-item {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
}
.faq-item-icon {
  width: 38px;
  height: 38px;
  padding: var(--_common-spacing---spacing-5x);
  border-radius: var(--_base---bordar-radius--round);
  background-color: var(--_color---copper-brown);
  object-fit: contain;
  flex: none;
  overflow: visible;
}
.faq-item-head {
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-13x);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.faq-item {
  padding: var(--_common-spacing---spacing-11x);
  border-radius: var(--_base---bordar-radius--round-6x);
  background-color: var(--_color---warm-ivory);
  cursor: pointer;
}
.faq-item-body {
  padding-top: var(--_common-spacing---spacing-11x);
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  display: flex;
}
.faq-item-toggle-content {
  overflow: hidden;
}
.mission-vision-content-wrap {
  z-index: 10;
  width: var(--_base---global-size--full);
  max-width: var(--_ui---container--max-width);
  padding-right: var(--_ui---container--padding);
  padding-left: var(--_ui---container--padding);
  grid-column-gap: var(--_common-spacing---spacing-17x);
  grid-row-gap: var(--_common-spacing---spacing-17x);
  background-color: var(--_color---pale-cream);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: absolute;
}
.mission-vision-content-wrap.our-mission {
  z-index: 12;
}
.mission-vision-content-truck {
  height: 220vh;
}
.display-flex-center {
  justify-content: center;
  align-items: center;
  display: flex;
}
.empty-box {
  width: var(--_base---global-size--full);
}
.h3-style.text-align-center {
  text-align: center;
}
.pricing-plans-group {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.pricing-billing-toggle-switch {
  width: 48px;
  padding: var(--_common-spacing---spacing-2x);
  border-bottom: 1px solid var(--_color---rgba-colors--electric-purple-25);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-image: linear-gradient(0deg, var(--_color---section-label-bg-gradiant--first-color), var(--_color---section-label-bg-gradiant--last-color) 48%);
  cursor: pointer;
}
.decorative-dot-background {
  border-radius: var(--_base---bordar-radius--round);
  background-image: linear-gradient(180deg, var(--_color---title-color-primary-gradiant--first-color), var(--_color---title-color-primary-gradiant--middle-color) 50%, var(--_color---title-color-primary-gradiant--last-color));
  width: 20px;
  height: 20px;
}
.input-field {
  height: auto;
  padding: var(--_common-spacing---spacing-6x) var(--_common-spacing---spacing-11x);
  border: 1px solid var(--_color---burnt-sienna);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---pale-cream);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--_base---line-height--line-height-120);
  font-weight: var(--_base---font-weight--semi-bold);
  transition: all .2s linear;
}
.input-field:focus, .input-field.-wfp-focus {
  border-color: var(--_color---copper-brown);
  background-color: var(--_color---warm-ivory);
}
.input-field::placeholder {
  color: var(--_color---rgba-color--rgba-3);
}
.input-field.margin-zero.is-text-area {
  border-top-left-radius: var(--_base---bordar-radius--round-4x);
  border-top-right-radius: var(--_base---bordar-radius--round-4x);
  border-bottom-left-radius: var(--_base---bordar-radius--round-4x);
  border-bottom-right-radius: var(--_base---bordar-radius--round-4x);
  resize: vertical;
  min-height: 240px;
}
.input-field.is-cart-quantity {
  width: 100px;
}
.margin-zero {
  margin: var(--_base---global-size--none);
}
.submit-button {
  width: var(--_base---global-size--full);
  padding: var(--_common-spacing---spacing-8x) var(--_common-spacing---spacing-11x);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---copper-brown);
  font-family: var(--_ui---primary-button--font-family);
  color: var(--_color---pale-cream);
  font-size: var(--_ui---primary-button--font-size);
  line-height: var(--_ui---primary-button--line-height);
  font-weight: var(--_ui---primary-button--font-weight);
  text-align: center;
  letter-spacing: var(--_ui---primary-button--letter-spacing);
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.h6-style.text-color-light.text-normal-case.home-about-para {
  font-family: var(--_base---font-family--your-body-font);
  letter-spacing: var(--_base---global-size--none);
}
.h6-style.home-feature-card-description {
  font-family: var(--_base---font-family--your-body-font);
  font-size: var(--text-large-3x--font-size);
  font-weight: var(--text-large-3x--font-weight);
  text-transform: none;
}
.rating-v1-truck {
  height: 260vh;
}
.text-uppercase {
  text-transform: uppercase;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.utility-hero-content-wrap {
  padding: var(--_common-spacing---spacing-14x);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  border-radius: var(--_base---bordar-radius--round-7x);
  background-color: var(--_color---burnt-sienna);
  justify-content: center;
  align-items: center;
  display: flex;
}
.order-process-section {
  padding: var(--_ui---section--first-section-padding-top) var(--_common-spacing---spacing-10x) var(--_ui---section--padding-default);
  background-color: var(--_color---normal-color--transparent);
}
.h5-style.home-feature-card-heading {
  color: var(--_color---warm-ivory);
  text-align: center;
  -webkit-text-stroke-width: 16px;
  -webkit-text-stroke-color: var(--_color---burnt-sienna);
  stroke-linejoin: round;
  paint-order: stroke fill;
  width: fit-content;
  transform: translate(0, -50%);
}
.h5-style.about-benefits-item-heading {
  color: var(--_color---warm-ivory);
  -webkit-text-stroke-width: 16px;
  -webkit-text-stroke-color: var(--_color---burnt-sienna);
  stroke-linejoin: round;
  paint-order: stroke fill;
  width: fit-content;
  margin-top: -100px;
  transform: rotate(-10deg);
}
.block-header {
  padding: var(--_common-spacing---spacing-6x) var(--_common-spacing---spacing-10x);
  border-width: 0;
  border-color: var(--_color---normal-color--transparent);
  background-color: var(--_color---rgba-color--rgba-1);
}
.block-content {
  padding: var(--_common-spacing---spacing-10x);
  border-right: 1px solid var(--_color---soft-taupe);
  border-bottom: 1px solid var(--_color---soft-taupe);
  border-left: 1px solid var(--_color---soft-taupe);
  background-color: var(--_color---pale-cream);
}
.overview-box {
  top: var(--_ui---section--first-section-padding-top);
}
.error-message {
  width: var(--_base---global-size--full);
  padding: var(--_common-spacing---spacing-6x);
  border: 1px solid var(--_color---copper-brown);
  border-radius: var(--_base---bordar-radius--round-2x);
  background-color: var(--_color---burnt-sienna);
  font-family: var(--text-regular--font-family);
  color: var(--_color---warm-ivory);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--text-regular--line-height);
  font-weight: var(--text-regular--font-weight);
  text-align: center;
  letter-spacing: var(--text-regular--letter-spacing);
  justify-content: center;
  align-self: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
._404-banner-with-title {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
}
._401-title-with-para {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
._401-btn {
  height: var(--_base---global-size--full);
}
._401-field-with-btn {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  display: flex;
  position: relative;
}
.h4-style.fream-text.cta-title {
  background-color: var(--_color---burnt-sienna);
  margin-top: 0;
  transform: rotate(-4deg);
}
.cart-button {
  width: 30px;
  height: 30px;
  padding: var(--_common-spacing---spacing-1x);
  background-color: var(--_color---normal-color--transparent);
  justify-content: center;
  align-items: center;
}
.cart-quantity {
  aspect-ratio: 1;
  background-color: var(--_color---warm-ivory);
  min-width: auto;
  height: auto;
  color: var(--_color---burnt-sienna);
  font-size: 13px;
  line-height: var(--_base---line-height--line-height-100);
  font-weight: var(--_base---font-weight--bold);
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 2px 4px;
  display: flex;
  position: absolute;
  top: -5px;
  right: -5px;
}
.payment-methods-item {
  z-index: 50;
  width: var(--_base---global-size--full);
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.payment-methods-item.small-item {
  max-width: 100px;
}
.payment-methods-item-content {
  z-index: -10;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  background-color: var(--_color---burnt-sienna);
  filter: blur(50px);
  position: absolute;
  inset: 0% auto auto 0%;
}
.nav-btn-wrap {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  display: flex;
}
.cart-container {
  background-color: var(--_color---pale-cream);
}
.close-button {
  width: 30px;
  height: 30px;
  padding: var(--_common-spacing---spacing-2x);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}
.remove-button {
  padding-top: var(--_common-spacing---spacing-1x);
  padding-right: var(--_common-spacing---spacing-4x);
  padding-bottom: var(--_common-spacing---spacing-1x);
  padding-left: var(--_common-spacing---spacing-4x);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--_color---burnt-sienna);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--_color---burnt-sienna);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--_color---burnt-sienna);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--_color---burnt-sienna);
  border-top-left-radius: var(--_base---bordar-radius--round-1x);
  border-top-right-radius: var(--_base---bordar-radius--round-1x);
  border-bottom-left-radius: var(--_base---bordar-radius--round-1x);
  border-bottom-right-radius: var(--_base---bordar-radius--round-1x);
  color: var(--_color---burnt-sienna);
  width: fit-content;
}
.cart-header {
  border-bottom-color: var(--_color---warm-ivory);
}
.cart-footer {
  border-top-color: var(--_color---warm-ivory);
}
.utility-hero-para {
  max-width: 400px;
  color: var(--_color---warm-ivory);
}
.normal-message {
  color: var(--_color---burnt-sienna);
  font-size: var(--text-extra-large--font-size);
}
.secondary-btn-hover-text {
  position: absolute;
}
.btn-icon-wrap {
  border-radius: var(--_base---bordar-radius--round);
  background-color: var(--_color---pale-cream);
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: flex;
}
.btn-icon-wrap:where(.button-style-two) {
  background-color: var(--_color---copper-brown);
}
.btn-icon-wrap:where(.button-style-four) {
  background-color: var(--_color---copper-brown);
}
.btn-icon-wrap:where(.button-style-five) {
  width: 48px;
  height: 48px;
}
.btn-icon-wrap:where(.button-style-six) {
  transform: rotate(-90deg);
}
.btn-icon-wrap.style-three {
  width: auto;
  height: auto;
}
.text-button-hover-text {
  position: absolute;
  inset: 0% auto auto 0%;
}
.dropdown-head-content {
  z-index: 20;
}
.dropdown-head-content[aria-current="page"], .dropdown-head-content.is-active {
  color: var(--_color---normal-color--white);
}
.dropdown-head-content.dropdown-head {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.dropdown-head-content.dropdown-head.megamenu {
  cursor: pointer;
  width: 100%;
}
.hr-line-wrap {
  width: var(--_base---global-size--full);
  height: 1px;
  overflow: hidden;
}
.hr-line {
  border-top: .5px dashed var(--_color---burnt-sienna);
  width: 2400px;
  transform-style: preserve-3d;
  transform: scale3d(4, 1, 1);
}
.hr-line.color-light {
  border-top-color: var(--_color---pale-cream);
  opacity: .4;
}
.light-color {
  color: var(--_color---pale-cream);
}
.section-label {
  width: fit-content;
}
.home-hero-section {
  z-index: 100;
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-large);
  border-bottom-left-radius: var(--_base---bordar-radius--round-7x);
  border-bottom-right-radius: var(--_base---bordar-radius--round-7x);
  min-height: max-content;
  position: relative;
  overflow: hidden;
}
.home-hero-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  grid-template-rows: auto;
  grid-template-columns: 1.1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.home-hero-description-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  max-width: 364px;
  display: flex;
}
.home-hero-content-inner {
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.home-hero-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.home-hero-background-image-wrapper {
  z-index: -10;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  pointer-events: none;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.5fr;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  align-items: flex-end;
  display: grid;
  position: absolute;
  inset: 0% auto auto 0%;
}
.home-hero-main-image {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  filter: drop-shadow(-32px 52px 68px var(--_color---rgba-color--rgba-1));
  object-fit: contain;
}
.home-hero-background-image {
  width: var(--_base---global-size--full);
  height: auto;
  margin-top: 250px;
  margin-right: -100px;
}
.home-hero-main-image-wrapper {
  width: 30vw;
  max-width: 380px;
  margin-top: var(--_common-spacing---spacing-14x);
  pointer-events: none;
  transform: rotate(-15deg);
}
.fream-text {
  padding-top: var(--_common-spacing---spacing-6x);
  padding-right: var(--_common-spacing---spacing-6x);
  padding-bottom: var(--_common-spacing---spacing-6x);
  padding-left: var(--_common-spacing---spacing-6x);
  background-color: var(--_color---copper-brown);
  color: var(--_color---pale-cream);
  width: fit-content;
  margin-top: -24px;
  margin-left: 4px;
  transform: rotate(-6deg);
}
.home-hero-heading-content-wrapper {
  z-index: 50;
  position: relative;
}
.home-hero-decorative-image-wrapper-two {
  pointer-events: none;
  position: absolute;
  inset: auto 6% 13% auto;
}
.home-hero-decorative-image-wrapper-one {
  pointer-events: none;
  position: absolute;
  top: -19%;
  left: 4%;
}
.home-hero-decorative-image-one {
  width: 10.2vw;
  max-width: 130px;
  height: auto;
}
.home-hero-decorative-image-two {
  width: 10.2vw;
  max-width: 130px;
}
.home-about-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 85%;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.is-rating-with-why-choose {
  z-index: 30;
  padding-top: var(--_ui---section--padding-large);
  padding-bottom: var(--_ui---section--padding-large);
  grid-column-gap: var(--_ui---section--padding-large);
  grid-row-gap: var(--_ui---section--padding-large);
  border-radius: var(--_base---bordar-radius--round-7x);
  background-color: var(--_color---copper-brown);
  flex-flow: column;
  display: flex;
  position: relative;
}
.is-rating-with-why-choose.is-testimonial {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.text-color-light {
  color: var(--_color---pale-cream);
}
.home-about-section {
  z-index: 200;
  margin-top: -120px;
  position: relative;
}
.home-about-feature-image {
  width: var(--_base---global-size--full);
  max-width: 403px;
  filter: drop-shadow(0px 15px 15px var(--_color---rgba-color--rgba-2));
  margin-left: auto;
  margin-right: auto;
}
.home-about-description-wrapper {
  width: var(--_base---global-size--full);
  max-width: 432px;
  margin-top: var(--_common-spacing---spacing-18x);
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  text-align: center;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.text-normal-case {
  text-transform: none;
}
.home-about-badge-wrapper {
  z-index: 20;
  width: var(--_base---global-size--full);
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.home-about-badge-image {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  pointer-events: none;
  object-fit: contain;
  position: absolute;
}
.home-about-content-wrapper {
  z-index: 20;
  position: relative;
}
.home-about-coffee-beans-wrapper {
  width: var(--_base---global-size--full);
  pointer-events: none;
  height: 60%;
  font-family: var(--_base---font-family--your-body-font);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 50% auto auto 0%;
  transform: translate(0, -50%);
}
.about-section-coffee {
  pointer-events: none;
  max-width: none;
}
.about-section-coffee.item-one {
  max-width: 14vw;
}
.about-section-coffee.item-two {
  filter: blur(5px);
  max-width: 10vw;
  margin-top: 10%;
  margin-right: 20%;
}
.about-section-coffee.item-three {
  opacity: .7;
  filter: blur(5px);
  max-width: 14vw;
}
.about-section-coffee.item-four {
  max-width: 9vw;
}
.about-section-coffee.item-five {
  max-width: 12vw;
}
.about-section-coffee.item-six {
  max-width: 14vw;
  margin-left: 10%;
}
.about-section-coffee.rating-coffee-one {
  width: 12.5vw;
  max-width: 160px;
  height: auto;
  margin-left: 4vw;
}
.about-section-coffee.rating-coffee-two {
  width: 14vw;
  max-width: 186px;
  margin-left: auto;
  margin-right: 4vw;
}
.home-menu-header-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.home-menu-section {
  z-index: 200;
  padding-top: var(--_ui---section--padding-large);
  padding-bottom: var(--_ui---section--padding-large);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}
.home-menu-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  max-width: 380px;
  display: flex;
}
.menu-item-head {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  grid-template-rows: auto;
  grid-template-columns: 1fr auto;
  grid-auto-columns: 1fr;
  align-items: end;
  display: grid;
}
.menu-item-head.style-two {
  flex-flow: wrap;
  justify-content: space-between;
  display: flex;
}
.home-menu-mask {
  width: var(--_base---global-size--full);
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.home-menu-slider {
  background-color: var(--_color---normal-color--transparent);
  pointer-events: none;
  height: auto;
  padding-bottom: 80px;
}
.menu-item-banner {
  width: var(--_base---global-size--full);
  margin-top: auto;
  overflow: hidden;
}
.weight-semi-bold {
  font-weight: var(--_base---font-weight--semi-bold);
}
.menu-item-price {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  min-width: 110px;
  display: flex;
}
.menu-item-body {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  justify-content: space-between;
  display: flex;
}
.menu-item-vr {
  width: 2px;
  margin-top: var(--_common-spacing---spacing-3x);
  margin-bottom: var(--_common-spacing---spacing-3x);
  background-color: var(--_color---burnt-sienna);
}
.menu-item {
  height: var(--_base---global-size--full);
  padding-right: var(--_common-spacing---spacing-11x);
  border-right: 1px solid var(--_color---rgba-color--rgba-2);
  pointer-events: auto;
  flex-flow: column;
  display: flex;
}
.display-none {
  display: none;
}
.slide-nav {
  height: auto;
  min-height: auto;
  padding-top: var(--_common-spacing---spacing-5x);
  padding-right: var(--_common-spacing---spacing-4x);
  padding-bottom: var(--_common-spacing---spacing-2x);
  padding-left: var(--_common-spacing---spacing-4x);
  border-top-left-radius: var(--_base---bordar-radius--round-pill);
  border-top-right-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-left-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-right-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---warm-ivory);
  pointer-events: auto;
  width: fit-content;
  font-size: 10px;
  line-height: 0;
}
.features-section {
  z-index: 20;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.features-intro-content-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  text-align: center;
  flex-flow: column;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.features-content-wrapper {
  padding: var(--_ui---section--padding-large) var(--_ui---container--padding);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  border-radius: var(--_base---bordar-radius--round-7x);
  background-color: var(--_color---warm-ivory);
  flex-flow: column;
  display: flex;
}
.features-decorative-image {
  width: 13.8vw;
  max-width: 176px;
  position: absolute;
  transform: translate(0, -50%);
}
.cover-size-banner {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  object-fit: cover;
}
.features-card-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-6x);
  overflow: hidden;
}
.features-card-content {
  z-index: 20;
  width: 50%;
  position: relative;
}
.features-card-details-wrapper {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  padding: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}
.features-card-description-wrapper {
  padding: var(--_common-spacing---spacing-14x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---pale-cream);
  flex-flow: column;
  display: flex;
}
.menu-slider-button {
  width: 40px;
  height: 40px;
  padding: var(--_common-spacing---spacing-4x);
  border-radius: var(--_base---bordar-radius--round);
  background-color: var(--_color---warm-ivory);
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  display: flex;
}
.menu-slider-button.left-button {
  padding-right: var(--_common-spacing---spacing-5x);
  inset: auto auto 0% calc(50% - 50px);
}
.menu-slider-button.right-button {
  padding-left: var(--_common-spacing---spacing-5x);
  inset: auto calc(50% - 50px) 0% auto;
}
.text-large-2x {
  font-family: var(--text-large-2x--font-family);
  font-size: var(--text-large-2x--font-size);
  line-height: var(--text-large-2x--line-height);
  font-weight: var(--text-large-2x--font-weight);
  letter-spacing: var(--text-large-2x--letter-spacing);
}
.text-large-2x.weight-semi-bold {
  font-weight: var(--_base---font-weight--semi-bold);
}
.text-large-2x.weight-semi-bold.about-hero-para {
  width: var(--_base---global-size--full);
  max-width: 552px;
  margin-left: auto;
  margin-right: auto;
}
.text-large-2x.weight-bold._4wyrtyrt {
  width: var(--_base---global-size--full);
  max-width: 596px;
  color: var(--_color---pale-cream);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.features-card-item-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  display: flex;
}
.features-card-item-wrapper.item-one {
  z-index: 20;
  position: relative;
}
.features-card-item-wrapper.item-two {
  z-index: 10;
  position: absolute;
  top: 100px;
}
.features-cards-inner {
  z-index: 20;
  padding-top: 100px;
  position: sticky;
  top: 0;
}
.features-cards-wrapper {
  height: 400vh;
}
.feature-slide-section {
  padding-top: var(--_common-spacing---spacing-10x);
  padding-bottom: var(--_ui---section--padding-default);
}
.feature-slide-marquee-image {
  width: var(--_base---global-size--full);
  max-width: 94px;
}
.feature-slide-truck {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.feature-slide-marquee {
  padding-top: var(--_ui---section--padding-small);
  padding-bottom: var(--_ui---section--padding-small);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  border-radius: var(--_base---bordar-radius--round-7x);
  background-color: var(--_color---burnt-sienna);
  display: flex;
  overflow: hidden;
}
.our-place-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.our-place-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.our-place-gallery-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-5x);
  overflow: hidden;
}
.our-place-gallery-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.our-place-section {
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-default);
}
.attractive-heading-wrapper {
  margin-top: var(--_common-spacing---spacing-20x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.attractive-description-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.home-attractive-heading {
  width: var(--_base---global-size--full);
  max-width: 518px;
  margin-top: var(--_common-spacing---spacing-13x);
  text-align: center;
}
.attractive-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.attractive-section-image {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  filter: drop-shadow(0px 20px 20px var(--_color---rgba-color--rgba-2));
  object-fit: contain;
}
.attractive-section {
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-default);
  overflow: hidden;
}
.special-offer-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  display: flex;
}
.special-offer-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  grid-template-rows: auto;
  grid-template-columns: 1.1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.special-offer-menu-item {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.special-offer-menu-divider {
  width: var(--_base---global-size--full);
  background-color: var(--_color---rgba-color--rgba-1);
  height: 1px;
}
.special-offer-menu-content-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  justify-content: center;
  align-items: center;
  display: flex;
}
.special-offer-menu-image-wrapper {
  aspect-ratio: 1;
  width: 92px;
  overflow: hidden;
}
.text-no-wrap {
  white-space: nowrap;
}
.special-offer-menu-list {
  grid-column-gap: var(--_common-spacing---spacing-3x);
  grid-row-gap: var(--_common-spacing---spacing-3x);
  flex-flow: column;
  display: flex;
}
.special-offer-action-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: wrap-reverse;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.special-offer-menu-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  display: flex;
}
.special-offer-details-wrapper {
  width: var(--_base---global-size--full);
  max-width: 548px;
  padding-top: var(--_common-spacing---spacing-6x);
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.special-offer-background-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-5x);
  max-width: 662px;
  overflow: hidden;
}
.text-large-3x {
  font-family: var(--text-large-3x--font-family);
  font-size: var(--text-large-3x--font-size);
  line-height: var(--text-large-3x--line-height);
  font-weight: var(--text-large-3x--font-weight);
  letter-spacing: var(--text-large-3x--letter-spacing);
}
.text-large-3x.text-regular {
  font-weight: var(--_base---font-weight--regular);
}
.special-offer-price-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  display: flex;
}
.special-offer-section {
  z-index: 10;
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
  background-color: var(--_color---pale-cream);
}
.testimonial-heading-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.testimonial-cards-track {
  z-index: 30;
  width: var(--_base---global-size--full);
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.testimonial-card-wrapper {
  width: var(--_base---global-size--full);
  max-width: 480px;
  padding: var(--_common-spacing---spacing-14x);
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---warm-ivory);
  flex-flow: column;
  display: flex;
  position: absolute;
}
.testimonial-card-wrapper.item-one {
  background-color: var(--_color---burnt-sienna);
}
.testimonial-card-wrapper.item-three {
  background-color: var(--_color---golden-amber);
}
.testimonial-rating-star-icon {
  object-fit: contain;
  width: 32px;
}
.testimonial-quote-wrapper {
  width: var(--_base---global-size--full);
  aspect-ratio: 2;
  border-radius: var(--_base---bordar-radius--round-4x);
  overflow: hidden;
}
.testimonial-rating-stars-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-1x);
  grid-row-gap: var(--_common-spacing---spacing-1x);
  display: flex;
}
.testimonial-rating-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  display: flex;
}
.testimonial-author-wrapper {
  padding: var(--_common-spacing---spacing-4x) var(--_common-spacing---spacing-8x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---copper-brown);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.testimonial-author-wrapper.style-two {
  background-color: var(--_color---warm-ivory);
}
.testimonial-author-avatar {
  aspect-ratio: 1;
  border-radius: var(--_base---bordar-radius--round);
  object-fit: contain;
  width: 64px;
  overflow: hidden;
}
.testimonial-slider-wrapper {
  width: var(--_base---global-size--full);
  height: 200vh;
}
.weight-bold {
  font-weight: var(--_base---font-weight--bold);
}
.blog-v1-section {
  z-index: 20;
  padding-top: var(--_ui---section--padding-large);
  padding-bottom: var(--_ui---section--padding-default);
  background-color: var(--_color---pale-cream);
}
.blog-heading-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 724px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.blog-title-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.blog-card-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-4x);
  display: block;
  overflow: hidden;
}
.blog-card-content-wrapper {
  padding: var(--_common-spacing---spacing-8x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
}
.blog-card-link {
  padding: var(--_common-spacing---spacing-6x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---warm-ivory);
  display: block;
  overflow: hidden;
}
.blog-cards-grid {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.tag {
  padding: var(--_common-spacing---spacing-3x) var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---copper-brown);
  color: var(--_color---pale-cream);
  text-align: center;
}
.blog-card-tags-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-2x);
  grid-row-gap: var(--_common-spacing---spacing-2x);
  flex-flow: wrap;
  display: flex;
}
.faq-intro-column {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.5fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.faq-description-wrapper {
  bottom: var(--_common-spacing---spacing-15x);
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 364px;
  display: flex;
  position: sticky;
}
.faq-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.faq-items-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  display: flex;
}
.faq-section {
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
}
.faq-section:where(.faq-section-style-two) {
  padding-top: var(--_ui---section--padding-large);
}
.footer-cta-content-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 544px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.footer-main-wrapper {
  z-index: 50;
  width: var(--_base---global-size--full);
  padding-top: var(--_common-spacing---spacing-25x);
  padding-bottom: var(--_common-spacing---spacing-25x);
  border-radius: var(--_base---bordar-radius--round-7x);
  background-image: url('../images/cta-bg.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}
.footer-cta-heading-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-background-decoration {
  z-index: 10;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  background-color: var(--_color---rgba-color--rgba-3);
  position: absolute;
  inset: 0% auto auto 0%;
}
.footer-component-section {
  padding-bottom: var(--_ui---section--padding-default);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  border-top-left-radius: var(--_base---bordar-radius--round-7x);
  border-top-right-radius: var(--_base---bordar-radius--round-7x);
  background-color: var(--_color---burnt-sienna);
  flex-flow: column;
  display: flex;
}
.footer-newsletter-form-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-4x);
  grid-row-gap: var(--_common-spacing---spacing-4x);
  display: flex;
}
.footer-input-field {
  height: auto;
  margin: var(--_base---global-size--none);
  padding: var(--_common-spacing---spacing-6x) var(--_common-spacing---spacing-11x);
  border: 1px solid var(--_color---normal-color--transparent);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---pale-cream);
  color: var(--_color---text-colors--paragraph-color);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--_base---line-height--line-height-120);
  font-weight: var(--_base---font-weight--semi-bold);
  letter-spacing: var(--_base---global-size--none);
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}
.footer-input-field:focus {
  border: 1px solid var(--_color---copper-brown);
}
.footer-input-field::placeholder {
  color: var(--_color---rgba-color--rgba-3);
}
.footer-input-field.is-401 {
  background-color: var(--_color---warm-ivory);
}
.subscribe-form {
  width: var(--_base---global-size--full);
  max-width: 360px;
  margin: var(--_base---global-size--none);
}
.footer-newsletter-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-17x);
  grid-row-gap: var(--_common-spacing---spacing-17x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.form {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  display: flex;
}
.footer-newsletter-submit-wrapper {
  z-index: 20;
  border-radius: var(--_base---bordar-radius--round);
  flex: none;
  position: relative;
  overflow: hidden;
}
.submit-button-style-two {
  z-index: 100;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  background-color: var(--_color---pale-cream);
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}
.social-btn-link {
  width: 64px;
  padding: var(--_common-spacing---spacing-10x);
  aspect-ratio: 1;
  border-radius: var(--_base---bordar-radius--round);
  background-color: var(--_color---pale-cream);
  display: block;
  overflow: hidden;
}
.social-btn-hover-icon {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  position: absolute;
  inset: 100% auto auto 0%;
}
.footer-social-links-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  display: flex;
}
.social-btn-icon-wrapper {
  z-index: 20;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  position: relative;
  overflow: hidden;
}
.social-btn-normal-icon {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
}
.footer-column-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  display: flex;
}
.footer-columns-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.footer-primary-columns-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.1fr;
  grid-auto-columns: 1fr;
  max-width: 630px;
  display: grid;
}
.footer-column-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-5x);
  grid-row-gap: var(--_common-spacing---spacing-5x);
  flex-flow: column;
  display: flex;
}
.footer-column-group-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-13x);
  justify-content: space-between;
  max-width: 436px;
  display: flex;
}
.footer-location-details-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  flex-flow: column;
  display: flex;
}
.footer-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.footer-divider-group-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  flex-flow: column;
  display: flex;
}
.footer-copyright-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.about-hero-heading-wrapper {
  margin-bottom: var(--_common-spacing---spacing-13x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-hero-label-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-hero-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-default);
  overflow: hidden;
}
.about-hero-banner-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-6x);
  overflow: hidden;
}
.about-hero-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.about-story-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-story-section-inner-wrapper {
  width: var(--_base---global-size--full);
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
  position: sticky;
  top: 0;
}
.about-story-timeline-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-13x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 16px 1fr;
  grid-auto-columns: 1fr;
  max-width: 926px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.about-hero-title-group {
  z-index: 20;
  position: relative;
}
.about-hero-decorative-image-wrapper-one {
  pointer-events: none;
  position: absolute;
  top: -26%;
  left: 3%;
}
.about-hero-decorative-image-wrapper-two {
  pointer-events: none;
  position: absolute;
  inset: auto 0% 0% auto;
  transform: translate(40%, 16%);
}
.text-align-right {
  text-align: right;
}
.about-story-timeline-entry {
  z-index: 50;
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
  position: relative;
}
.about-story-timeline-content {
  grid-column-gap: var(--_common-spacing---spacing-4x);
  grid-row-gap: var(--_common-spacing---spacing-4x);
  flex-flow: column;
  display: flex;
}
.about-story-timeline-group {
  background-color: var(--_color---rgba-color--rgba-2);
  width: 2px;
  overflow: hidden;
}
.about-story-timeline-decoration {
  aspect-ratio: 1;
  border-radius: var(--_base---bordar-radius--round);
  background-color: var(--_color---burnt-sienna);
  width: 16px;
  position: absolute;
  inset: 0% -48px auto auto;
}
.about-story-timeline-decoration.left-align {
  left: -48px;
  right: auto;
}
.about-story-timeline-spacer {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  background-color: var(--_color---burnt-sienna);
}
.about-story-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.our-story-section {
  height: 300vh;
}
.about-story-image-gallery {
  z-index: -10;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}
.about-story-image-one {
  width: 50vw;
  max-width: 600px;
  height: auto;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: translate(-50%, -13%);
}
.about-story-image-two {
  width: 50vw;
  max-width: 600px;
  height: auto;
  position: absolute;
  inset: auto 0% 0% auto;
  transform: translate(25%, 10%);
}
.about-story-timeline-column {
  z-index: 20;
  position: relative;
}
.about-benefits-intro-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.about-benefits-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.about-benefits-item-wrapper {
  padding: var(--_common-spacing---spacing-14x);
  grid-column-gap: var(--_common-spacing---spacing-19x);
  grid-row-gap: var(--_common-spacing---spacing-19x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---pale-cream);
  flex-flow: column;
  display: flex;
}
.about-benefits-item-content {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  display: flex;
}
.about-benefits-section-content {
  grid-column-gap: var(--_ui---section--padding-large);
  grid-row-gap: var(--_ui---section--padding-large);
  flex-flow: column;
  display: flex;
}
.about-stats-content-wrapper {
  width: var(--_base---global-size--full);
  text-align: center;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
.about-stats-grid-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-21x);
  grid-row-gap: var(--_common-spacing---spacing-21x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.about-stats-heading-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.about-stats-item-icon-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-stats-item-icon-wrapper.right-alight {
  justify-content: flex-end;
  align-items: center;
}
.about-stats-icon {
  width: 30px;
  height: auto;
}
.about-stats-column-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  max-width: 330px;
  display: flex;
  overflow: hidden;
}
.about-stats-item-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  display: flex;
}
.about-stats-item-wrapper.right-alight {
  text-align: right;
}
.rating-section {
  padding-bottom: var(--_ui---section--padding-small);
}
.why-choose-us-section {
  z-index: 30;
  position: relative;
}
.about-team-section-decorative-image {
  z-index: -50;
  width: var(--_base---global-size--full);
  pointer-events: none;
  max-width: 1200px;
  height: auto;
  position: absolute;
  inset: auto auto 0% 50%;
  transform: translate(-50%);
}
.about-stats-banner-image-wrapper {
  width: var(--_base---global-size--full);
  filter: drop-shadow(0px 25px 18px var(--_color---rgba-color--rgba-2));
  overflow: hidden;
}
.about-stats-section-wrapper {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  pointer-events: none;
  max-width: 1300px;
  position: absolute;
  inset: 0% auto auto 50%;
  transform: translate(-50%);
}
.about-team-heading-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-team-intro-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-team-header-wrapper {
  z-index: 10;
  width: var(--_base---global-size--full);
  justify-content: center;
  align-items: center;
  height: 100svh;
  display: flex;
  position: sticky;
  top: 0;
}
.about-team-grid-wrapper {
  z-index: 20;
  grid-column-gap: var(--_common-spacing---spacing-28x);
  grid-row-gap: var(--_common-spacing---spacing-28x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
  position: relative;
}
.about-team-member-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-5x);
  overflow: hidden;
}
.about-team-member-card {
  width: var(--_base---global-size--full);
  max-width: 260px;
  padding: var(--_base---bordar-radius--round-2x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---warm-ivory);
}
.about-team-member-info-wrapper {
  padding: var(--_common-spacing---spacing-8x);
}
.team-section {
  padding-top: var(--_ui---section--padding-large);
  padding-bottom: var(--_ui---section--padding-large);
}
.nav-link-wrap {
  display: flex;
}
.menu-hero-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-default);
}
.menu-hero-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  flex-flow: column;
  display: flex;
}
.menu-tab-btn {
  padding: var(--_common-spacing---spacing-6x) var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---normal-color--transparent);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.menu-tab-btn[aria-current="page"], .menu-tab-btn.is-active {
  background-color: var(--_color---pale-cream);
}
.menu-category-tabs-menu {
  top: var(--_common-spacing---spacing-15x);
  width: var(--_base---global-size--full);
  max-width: 320px;
  padding: var(--_common-spacing---spacing-13x);
  border-radius: var(--_base---bordar-radius--round-6x);
  background-color: var(--_color---warm-ivory);
  flex-flow: column;
  align-self: flex-start;
  margin-right: auto;
  display: flex;
  position: sticky;
  overflow: hidden;
}
.menu-tab-btn-icon {
  object-fit: contain;
  width: 24px;
  height: 24px;
}
.menu-section {
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
}
.menu-collection-list {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-right: -1px;
  display: grid;
}
.menu-collection-list:where(.menu-collection-3-column) {
  width: var(--_base---global-size--full);
  grid-template-columns: 1fr 1fr 1fr;
}
.home-menu-item {
  margin-right: var(--_common-spacing---spacing-11x);
}
.menu-category-group-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-15x);
  grid-row-gap: var(--_common-spacing---spacing-15x);
  flex-flow: column;
  display: flex;
}
.menu-category-group-wrapper.style-two {
  grid-column-gap: var(--_ui---section--padding-default);
  grid-row-gap: var(--_ui---section--padding-default);
  justify-content: flex-start;
  align-items: center;
  margin-right: -1px;
}
.success-message {
  padding: var(--_common-spacing---spacing-10x);
  border: 1px solid var(--_color---soft-taupe);
  background-color: var(--_color---warm-ivory);
  font-family: var(--text-regular--font-family);
  color: var(--_color---burnt-sienna);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--text-regular--line-height);
  font-weight: var(--text-regular--font-weight);
  text-align: center;
  letter-spacing: var(--text-regular--letter-spacing);
}
.menu-category-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-28x);
  grid-row-gap: var(--_common-spacing---spacing-28x);
  flex-flow: column;
  display: flex;
}
.home-menu-collection-wrapper {
  min-height: 534px;
  display: flex;
}
.home-menu-collection-item {
  height: var(--_base---global-size--full);
}
.menu-tabs {
  display: flex;
}
.menu-tabs-content {
  width: var(--_base---global-size--full);
  max-width: 890px;
  margin-left: var(--_common-spacing---spacing-18x);
}
.menu-details-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-default);
}
.product-gallery-lightbox {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-6x);
  background-color: var(--_color---rgba-color--rgba-1);
  overflow: hidden;
}
.product-details-layout {
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.product-information-header-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
}
.product-availability-label-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-4x);
  grid-row-gap: var(--_common-spacing---spacing-4x);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.product-availability-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.default-state {
  height: var(--_base---global-size--full);
  margin: 0;
}
.product-availability-badge {
  z-index: 20;
  width: fit-content;
  position: relative;
}
.add-to-cart {
  z-index: 50;
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
  opacity: 0;
  position: absolute;
  inset: 0% auto auto 0%;
}
.add-to-cart-button {
  width: var(--_base---global-size--full);
  height: var(--_base---global-size--full);
}
.product-information-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  justify-content: space-between;
  max-width: 535px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 3px;
  display: flex;
  overflow: hidden;
}
.product-summary-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  flex-flow: column;
  display: flex;
}
.product-attributes-grid {
  width: var(--_base---global-size--full);
  padding: var(--_common-spacing---spacing-14x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---warm-ivory);
  flex-flow: column;
  display: flex;
}
.product-attribute-item {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.featured-menu-heading-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.featured-menu-content-wrapper {
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
  overflow: hidden;
}
.menu-tab-btn-content {
  grid-column-gap: var(--_common-spacing---spacing-4x);
  grid-row-gap: var(--_common-spacing---spacing-4x);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.menu-collection-wrapper {
  overflow: hidden;
}
.menu-collection-wrapper:where(.menu-collection-3-column) {
  margin-right: -1px;
}
.featured-menu-grid-wrapper {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.category-menu-content-wrapper {
  overflow: hidden;
}
.category-menu-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-large);
}
.blog-header-title-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-14x);
  grid-row-gap: var(--_common-spacing---spacing-14x);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.blog-header-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.blog-collection-list {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-collection-card-link {
  padding: var(--_common-spacing---spacing-6x);
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---warm-ivory);
  flex-flow: column;
  display: flex;
}
.blog-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-large);
}
.blog-collection-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-4x);
  overflow: hidden;
}
.blog-collection-content-wrapper {
  padding: var(--_common-spacing---spacing-8x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  flex-flow: column;
  display: flex;
}
.blog-meta-text {
  padding-top: var(--_common-spacing---spacing-3x);
  padding-right: var(--_common-spacing---spacing-8x);
  padding-bottom: var(--_common-spacing---spacing-3x);
  padding-left: var(--_common-spacing---spacing-8x);
  border-top-left-radius: var(--_base---bordar-radius--round-pill);
  border-top-right-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-left-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-right-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---copper-brown);
  color: var(--_color---pale-cream);
  font-size: var(--text-extra-large--font-size);
  text-align: center;
  width: fit-content;
}
.blog-details-meta-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-2x);
  grid-row-gap: var(--_common-spacing---spacing-2x);
  display: flex;
}
.blog-details-header-wrapper {
  width: var(--_base---global-size--full);
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-13x);
  flex-flow: column;
  max-width: 800px;
  display: flex;
}
.blog-details-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-default);
}
.blog-details-featured-image-wrapper {
  width: var(--_base---global-size--full);
  border-radius: var(--_base---bordar-radius--round-6x);
  overflow: hidden;
}
.blog-details-main-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.blog-details-content-layout {
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  grid-template-rows: auto;
  grid-template-columns: 2.5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-details-gallery-image-wrapper {
  width: var(--_base---global-size--full);
  aspect-ratio: 1;
  border-radius: var(--_base---bordar-radius--round-6x);
  overflow: hidden;
}
.blog-details-gallery-wrapper {
  margin-top: var(--_common-spacing---spacing-15x);
  margin-bottom: var(--_common-spacing---spacing-15x);
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-details-article-content {
  width: var(--_base---global-size--full);
  flex-flow: column;
  max-width: 890px;
  display: flex;
}
.blog-rich-text {
  margin-top: -48px;
}
.blog-rich-text p {
  margin-top: var(--_common-spacing---spacing-4x);
  margin-bottom: var(--_common-spacing---spacing-4x);
}
.blog-rich-text h6:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-6) {
  margin-top: var(--_common-spacing---spacing-8x);
  margin-bottom: var(--_common-spacing---spacing-4x);
}
.blog-rich-text h5:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
  margin-top: var(--_common-spacing---spacing-15x);
  margin-bottom: var(--_common-spacing---spacing-8x);
}
.blog-details-author-section {
  top: var(--_common-spacing---spacing-15x);
  width: var(--_base---global-size--full);
  min-width: 300px;
  max-width: 320px;
  padding: var(--_common-spacing---spacing-13x);
  grid-column-gap: var(--_common-spacing---spacing-13x);
  grid-row-gap: var(--_common-spacing---spacing-13x);
  border-radius: var(--_base---bordar-radius--round-6x);
  background-color: var(--_color---warm-ivory);
  flex-flow: column;
  display: flex;
  position: sticky;
  overflow: hidden;
}
.blog-details-author-avatar {
  border-radius: var(--_base---bordar-radius--round);
  object-fit: cover;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
}
.blog-details-author-info-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-details-author-details {
  grid-column-gap: var(--_common-spacing---spacing-2x);
  grid-row-gap: var(--_common-spacing---spacing-2x);
  flex-flow: column;
  display: flex;
}
.blog-details-social-icon {
  object-fit: contain;
  width: 24px;
  height: 24px;
}
.blog-details-social-link-item {
  padding: var(--_common-spacing---spacing-8x) var(--_common-spacing---spacing-11x);
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-pill);
  background-color: var(--_color---pale-cream);
  color: var(--_color---copper-brown);
  font-size: var(--text-extra-large--font-size);
  line-height: var(--text-regular--line-height);
  font-weight: var(--_base---font-weight--semi-bold);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-details-social-links-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  display: flex;
}
.blog-details-share-section {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  display: flex;
}
.related-blogsection {
  padding-top: var(--_ui---section--padding-default);
  padding-bottom: var(--_ui---section--padding-large);
}
.related-blog-title-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.related-blog-heading-group {
  grid-column-gap: var(--_common-spacing---spacing-10x);
  grid-row-gap: var(--_common-spacing---spacing-10x);
  flex-flow: column;
  display: flex;
}
.related-blog-header-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-20x);
  grid-row-gap: var(--_common-spacing---spacing-20x);
  flex-flow: column;
  display: flex;
}
.social-link-button {
  width: var(--_base---global-size--full);
  max-width: 570px;
}
.contact-section {
  padding-top: var(--_ui---section--first-section-padding-top);
  padding-bottom: var(--_ui---section--padding-large);
}
.contact-form-content-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-18x);
  grid-row-gap: var(--_common-spacing---spacing-18x);
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-content-layout {
  grid-column-gap: var(--_common-spacing---spacing-22x);
  grid-row-gap: var(--_common-spacing---spacing-22x);
  flex-flow: column;
  display: flex;
}
.contact-form-field-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-2x);
  grid-row-gap: var(--_common-spacing---spacing-2x);
  flex-flow: column;
  display: flex;
}
.contact-form-fields-wrapper {
  grid-column-gap: var(--_common-spacing---spacing-11x);
  grid-row-gap: var(--_common-spacing---spacing-11x);
  flex-flow: column;
  display: flex;
}
.contact-form-feedback-wrapper {
  z-index: 50;
  border-top-left-radius: var(--_base---bordar-radius--round-pill);
  border-top-right-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-left-radius: var(--_base---bordar-radius--round-pill);
  border-bottom-right-radius: var(--_base---bordar-radius--round-pill);
  width: fit-content;
  position: relative;
  overflow: hidden;
}
.contact-address-content {
  width: var(--_base---global-size--full);
  max-width: 320px;
  padding: var(--_common-spacing---spacing-6x);
  border-radius: var(--_base---bordar-radius--round-6x);
  background-color: var(--_color---warm-ivory);
  overflow: hidden;
}
.contact-address-heading-wrapper {
  padding: var(--_common-spacing---spacing-8x);
  border-radius: var(--_base---bordar-radius--round-5x);
  background-color: var(--_color---burnt-sienna);
}
.contact-address-icon {
  width: 48px;
  height: 48px;
  padding: var(--_common-spacing---spacing-6x);
  border-radius: var(--_base---bordar-radius--round);
  background-color: var(--_color---pale-cream);
  object-fit: contain;
}
.contact-address-menu-item {
  grid-column-gap: var(--_common-spacing---spacing-8x);
  grid-row-gap: var(--_common-spacing---spacing-8x);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.contact-address-menu {
  padding: var(--_common-spacing---spacing-10x);
  grid-column-gap: var(--_common-spacing---spacing-6x);
  grid-row-gap: var(--_common-spacing---spacing-6x);
  flex-flow: column;
  display: flex;
}
.contact-form {
  width: var(--_base---global-size--full);
  max-width: 776px;
  margin-bottom: var(--_base---global-size--none);
}
.studio-link {
  color: var(--_color---pale-cream);
  text-decoration: underline;
}
.home-about-badge-arrow {
  width: 16px;
}
.utility-hero-shape {
  object-fit: contain;
  width: 94px;
  height: 94px;
}
.cart-image {
  height: 60px;
}@media screen and (min-width: 1280px) {

  .menu-item-head.style-two {
    grid-template-columns: 1fr auto;
    place-items: end stretch;
    display: grid;
  }}
@media screen and (max-width: 991px) {

  body {
    --text-regular--font-family: var(--_base---font-family--your-body-font);
    --text-regular--font-size: 16px;
    --text-regular--line-height: var(--_base---line-height--line-height-120);
    --text-regular--font-weight: var(--_base---font-weight--regular);
    --text-regular--letter-spacing: var(--_base---global-size--none);
    --h1--font-family: var(--_base---font-family--your-heading-font);
    --h1--font-size: clamp(70px, 13cqw, 200px);
    --h1--line-height: var(--_base---line-height--line-height-90);
    --h1--font-weight: var(--_base---font-weight--black);
    --h1--letter-spacing: var(--_base---global-size--none);
    --h2--font-family: var(--_base---font-family--your-heading-font);
    --h2--font-size: clamp(55px, 7.6cqw, 120px);
    --h2--line-height: var(--_base---line-height--line-height-90);
    --h2--font-weight: var(--_base---font-weight--black);
    --h3--font-family: var(--_base---font-family--your-heading-font);
    --h3--font-size: clamp(42px, 7cqw, 72px);
    --h3--line-height: var(--_base---line-height--line-height-90);
    --h3--font-weight: var(--_base---font-weight--black);
    --h3--letter-spacing: var(--_base---global-size--none);
    --h4--font-family: var(--_base---font-family--your-heading-font);
    --h4--font-size: clamp(36px, 6cqw, 64px);
    --h4--line-height: var(--_base---line-height--line-height-90);
    --h4--font-weight: var(--_base---font-weight--black);
    --h4--letter-spacing: var(--_base---global-size--none);
    --h5--font-family: var(--_base---font-family--your-heading-font);
    --h5--font-size: clamp(28px, 5.3cqw, 48px);
    --h5--line-height: var(--_base---line-height--line-height-90);
    --h5--font-weight: var(--_base---font-weight--black);
    --h5--letter-spacing: var(--_base---global-size--none);
    --h6--font-family: var(--_base---font-family--your-heading-font);
    --h6--font-size: 18px;
    --h6--line-height: var(--_base---line-height--line-height-90);
    --h6--font-weight: var(--_base---font-weight--bold);
    --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
    --text-extra-large--font-size: 18px;
    --text-small--font-family: var(--_base---font-family--your-body-font);
    --text-small--font-size: 14px;
    --text-small--line-height: var(--_base---line-height--line-height-120);
    --text-small--font-weight: var(--_base---font-weight--regular);
    --text-small--letter-spacing: var(--_base---global-size--none);
    --text-extra-large--font-family: var(--_base---font-family--your-body-font);
    --text-extra-large--line-height: var(--_base---line-height--line-height-120);
    --text-extra-large--font-weight: var(--_base---font-weight--regular);
    --text-extra-large--letter-spacing: var(--_base---global-size--none);
    --text-learge--font-family: var(--_base---font-family--your-body-font);
    --text-learge--font-size: 18px;
    --text-learge--line-height: var(--_base---line-height--line-height-120);
    --text-learge--font-weight: var(--_base---font-weight--regular);
    --text-learge--letter-spacing: var(--_base---global-size--none);
    --text-extra-small--font-family: var(--_base---font-family--your-body-font);
    --text-extra-small--font-size: 12px;
    --text-extra-small--line-height: var(--_base---line-height--line-height-120);
    --text-extra-small--font-weight: var(--_base---font-weight--regular);
    --text-extra-small--letter-spacing: var(--_base---global-size--none);
    --text-large-2x--font-size: 20px;
    --text-large-3x--font-size: clamp(26px, 4.5cqw, 32px);
    --text-large-3x--font-weight: var(--_base---font-weight--semi-bold);
    --text-large-2x--font-family: var(--_base---font-family--your-body-font);
    --text-large-2x--line-height: var(--_base---line-height--line-height-120);
    --text-large-2x--font-weight: var(--_base---font-weight--regular);
    --text-large-2x--letter-spacing: var(--_base---global-size--none);
    --text-large-3x--font-family: var(--_base---font-family--your-body-font);
    --text-large-3x--line-height: var(--_base---line-height--line-height-120);
    --text-large-3x--letter-spacing: var(--_base---global-size--none);
    --display-text--font-family: var(--_base---font-family--your-heading-font);
    --display-text--font-weight: var(--_base---font-weight--black);
    --display-text--font-size: 60px;
    --display-text--line-height: var(--_base---line-height--line-height-90);
    --display-text--letter-spacing: var(--_base---global-size--none);
    --h2--letter-spacing: var(--_base---global-size--none);
    --_common-spacing---spacing-6x: 12px;
    --_common-spacing---spacing-11x: 22px;
    --_common-spacing---spacing-5x: 10px;
    --_common-spacing---flex-grid-gap--gap-12: 12px;
    --_common-spacing---spacing-3x: 6px;
    --_common-spacing---spacing-8x: 16px;
    --_common-spacing---spacing-1x: 2px;
    --_common-spacing---spacing-10x: 18px;
    --_common-spacing---spacing-13x: 28px;
    --_common-spacing---spacing-18x: 56px;
    --_common-spacing---spacing-7x: 14px;
    --_common-spacing---spacing-14x: 36px;
    --_common-spacing---spacing-2x: 4px;
    --_common-spacing---spacing-15x: 42px;
    --_common-spacing---spacing-17x: 52px;
    --_common-spacing---spacing-4x: 8px;
    --_common-spacing---spacing-22x: 84px;
    --_common-spacing---spacing-20x: 68px;
    --_common-spacing---spacing-25x: 110px;
    --_common-spacing---spacing-9x: 18px;
    --_common-spacing---spacing-19x: 60px;
    --_common-spacing---spacing-21x: 76px;
    --_common-spacing---spacing-28x: 120px;
    --_common-spacing---spacing-12x: 26px;
    --_common-spacing---spacing-16x: 44px;
    --_common-spacing---spacing-23x: 92px;
    --_common-spacing---spacing-24x: 100px;
    --_common-spacing---spacing-26x: 110px;
    --_common-spacing---spacing-27x: 120px;
    --_ui---section--padding-default: 80px;
    --_ui---container--padding: 24px;
    --_ui---container--max-width: 100%;
    --_ui---primary-button--font-family: var(--_base---font-family--your-body-font);
    --_ui---primary-button--font-size: var(--_base---font-size--font-size-16);
    --_ui---primary-button--line-height: var(--_base---line-height--line-height-100);
    --_ui---primary-button--font-weight: var(--_base---font-weight--bold);
    --_ui---primary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
    --_ui---section--padding-large: 120px;
    --_ui---section--first-section-padding-top: 120px;
    --_ui---section--padding-small: 40px;
    --_ui---secondary-button--font-family: var(--_base---font-family--your-body-font);
    --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
    --_ui---secondary-button--font-size: var(--_base---font-size--font-size-16);
    --_ui---secondary-button--line-height: var(--_base---line-height--line-height-125);
    --_ui---secondary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-1x);
  }
  .container {
    max-width: var(--_ui---container--max-width);
  }
  .button-icon-wrap {
    width: 20px;
    height: 20px;
  }
  .text-button {
    margin-left: 0;
    margin-right: 0;
  }
  .hamburger-trigger-wrap {
    grid-column-gap: var(--_common-spacing---spacing-11x);
    grid-row-gap: var(--_common-spacing---spacing-11x);
    flex: none;
    display: flex;
  }
  .nav-dropdown-icon.megamenu {
    right: 2px;
  }
  .nav-dropdown-toggle-content {
    width: 100%;
  }
  .nav-dropdown-toggle-content.is-open {
    position: relative;
  }
  .nav-dropdown-toggle-content.megamenu {
    min-width: 100%;
    box-shadow: none;
    padding-top: 0;
    display: block;
    position: relative;
    left: auto;
    transform: translate(0%);
    width: 100% !important;
  }
  .nav-offcanvas {
    width: var(--_base---global-size--full);
    max-width: var(--_ui---container--max-width);
    padding-top: var(--_common-spacing---spacing-2x);
    padding-right: var(--_ui---container--padding);
    padding-left: var(--_ui---container--padding);
    background-color: #0000;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
  }
  .nav-menu-inner {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: #0000;
    flex-flow: column;
    width: 100%;
    max-height: 68vh;
    display: block;
    overflow: auto;
  }
  .nav-menu-with-btn {
    padding: var(--_common-spacing---spacing-11x);
    border-radius: var(--_base---bordar-radius--round-1x);
    background-color: var(--_color---pale-cream);
  }
  .nav-btn-inner {
    align-self: auto;
    margin-left: auto;
    margin-right: 0;
    display: none;
  }
  .hamburger-trigger {
    z-index: 1;
    width: 34px;
    height: 28px;
    padding: var(--_common-spacing---spacing-2x) 2px;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .hamburger-trigger.is-open {
    background-color: #0000;
  }
  .nav-dropdown-menu-arcive-first {
    width: 100%;
    padding: var(--_common-spacing---spacing-10x);
    background-color: var(--_color---warm-ivory);
    flex-flow: column;
  }
  .nav-dropdown-menu-arcive {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
  .nav-dropdown {
    width: 100%;
    margin: 0;
  }
  .nav-dropdown.megamenu {
    position: relative;
  }
  .nav-dropdown-list-title {
    text-align: left;
    font-size: 16px;
  }
  .nav-menu {
    grid-column-gap: var(--_common-spacing---spacing-8x);
    grid-row-gap: var(--_common-spacing---spacing-8x);
    border-radius: 8px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .desktop-hidden {
    margin-top: 40px;
    display: flex;
  }
  .nav-inner {
    display: flex;
  }
  .rating-v1-item {
    position: static;
  }
  .faq-item-icon {
    width: 34px;
    height: 34px;
  }
  .display-flex-center {
    grid-column-gap: var(--_common-spacing---spacing-22x);
    grid-row-gap: var(--_common-spacing---spacing-22x);
    flex-flow: column;
  }
  .pricing-plans-group {
    grid-template-columns: 1fr;
  }
  .rating-v1-truck {
    height: auto;
  }
  .h5-style.about-benefits-item-heading {
    margin-top: -80px;
  }
  .payment-methods-item {
    max-width: 100px;
  }
  .payment-methods-item.small-item {
    max-width: 70px;
  }
  .header-hamburger-icon-line {
    width: var(--_base---global-size--full);
    background-color: var(--_color---burnt-sienna);
    height: 2px;
  }
  .header-hamburger-icon-wrapper {
    width: var(--_base---global-size--full);
    height: var(--_base---global-size--full);
    flex-flow: column;
    justify-content: space-between;
    display: flex;
  }
  .dropdown-head-content {
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    display: none;
  }
  .dropdown-head-content.dropdown-head {
    justify-content: space-between;
    align-items: center;
  }
  .dropdown-head-content.dropdown-head.megamenu {
    display: none;
  }
  .fream-text {
    margin-top: -16px;
  }
  .home-about-section {
    margin-top: -70px;
  }
  .home-about-feature-image {
    max-width: 300px;
  }
  .features-card-content.item-three {
    display: none;
  }
  .features-card-item-wrapper.item-one, .features-card-item-wrapper.item-two {
    position: static;
  }
  .features-cards-inner {
    grid-column-gap: var(--_common-spacing---spacing-20x);
    grid-row-gap: var(--_common-spacing---spacing-20x);
    flex-flow: column;
    padding-top: 0;
    display: flex;
    position: static;
  }
  .features-cards-wrapper {
    height: auto;
  }
  .feature-slide-marquee-image {
    max-width: 74px;
  }
  .blog-card-image-wrapper {
    aspect-ratio: 3 / 2;
  }
  .blog-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-component-section {
    padding-bottom: var(--_ui---section--padding-small);
  }
  .social-btn-link {
    width: 52px;
    padding: var(--_common-spacing---spacing-8x);
  }
  .about-story-timeline-decoration {
    right: -44px;
  }
  .about-story-timeline-decoration.left-align {
    left: -44px;
  }
  .about-story-image-gallery {
    overflow: hidden;
  }
  .about-story-image-one {
    transform: translate(-50%, -10%);
  }
  .about-benefits-content-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-22x);
    grid-row-gap: var(--_common-spacing---spacing-22x);
    grid-template-columns: 1fr;
  }
  .nav-link-wrap {
    display: none;
  }
  .menu-category-tabs-menu {
    max-width: var(--_base---global-size--full);
    flex-flow: wrap;
    position: static;
  }
  .menu-collection-list:where(.menu-collection-3-column) {
    grid-template-columns: 1fr 1fr;
  }
  .home-menu-collection-wrapper {
    min-height: 500px;
  }
  .menu-tabs {
    flex-flow: column;
  }
  .menu-tabs-content {
    max-width: var(--_base---global-size--full);
    margin-top: var(--_common-spacing---spacing-20x);
    margin-left: var(--_base---global-size--none);
  }
  .blog-collection-list {
    grid-template-columns: 1fr 1fr;
  }
  .blog-rich-text {
    margin-top: -32px;
  }
  .contact-form-content-wrapper {
    grid-template-columns: 2fr;
  }
  .contact-address-content, .contact-form {
    max-width: var(--_base---global-size--full);
  }
  .utility-hero-shape {
    width: 80px;
    height: 80px;
  }}
@media screen and (max-width: 767px) {

  body {
    --text-regular--font-family: var(--_base---font-family--your-body-font);
    --text-regular--font-size: 15px;
    --text-regular--line-height: var(--_base---line-height--line-height-120);
    --text-regular--font-weight: var(--_base---font-weight--regular);
    --text-regular--letter-spacing: var(--_base---global-size--none);
    --h1--font-family: var(--_base---font-family--your-heading-font);
    --h1--font-size: clamp(70px, 13cqw, 200px);
    --h1--line-height: var(--_base---line-height--line-height-90);
    --h1--font-weight: var(--_base---font-weight--black);
    --h1--letter-spacing: var(--_base---global-size--none);
    --h2--font-family: var(--_base---font-family--your-heading-font);
    --h2--font-size: clamp(55px, 7.6cqw, 120px);
    --h2--line-height: var(--_base---line-height--line-height-90);
    --h2--font-weight: var(--_base---font-weight--black);
    --h3--font-family: var(--_base---font-family--your-heading-font);
    --h3--font-size: clamp(42px, 7cqw, 72px);
    --h3--line-height: var(--_base---line-height--line-height-90);
    --h3--font-weight: var(--_base---font-weight--black);
    --h3--letter-spacing: var(--_base---global-size--none);
    --h4--font-family: var(--_base---font-family--your-heading-font);
    --h4--font-size: clamp(36px, 6cqw, 64px);
    --h4--line-height: var(--_base---line-height--line-height-90);
    --h4--font-weight: var(--_base---font-weight--black);
    --h4--letter-spacing: var(--_base---global-size--none);
    --h5--font-family: var(--_base---font-family--your-heading-font);
    --h5--font-size: clamp(28px, 5.3cqw, 48px);
    --h5--line-height: var(--_base---line-height--line-height-90);
    --h5--font-weight: var(--_base---font-weight--black);
    --h5--letter-spacing: var(--_base---global-size--none);
    --h6--font-family: var(--_base---font-family--your-heading-font);
    --h6--font-size: 24px;
    --h6--line-height: var(--_base---line-height--line-height-90);
    --h6--font-weight: var(--_base---font-weight--bold);
    --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
    --text-extra-large--font-size: 16px;
    --text-small--font-family: var(--_base---font-family--your-body-font);
    --text-small--font-size: 14px;
    --text-small--line-height: var(--_base---line-height--line-height-120);
    --text-small--font-weight: var(--_base---font-weight--regular);
    --text-small--letter-spacing: var(--_base---global-size--none);
    --text-extra-large--font-family: var(--_base---font-family--your-body-font);
    --text-extra-large--line-height: var(--_base---line-height--line-height-120);
    --text-extra-large--font-weight: var(--_base---font-weight--regular);
    --text-extra-large--letter-spacing: var(--_base---global-size--none);
    --text-learge--font-family: var(--_base---font-family--your-body-font);
    --text-learge--font-size: 16px;
    --text-learge--line-height: var(--_base---line-height--line-height-120);
    --text-learge--font-weight: var(--_base---font-weight--regular);
    --text-learge--letter-spacing: var(--_base---global-size--none);
    --text-extra-small--font-family: var(--_base---font-family--your-body-font);
    --text-extra-small--font-size: 12px;
    --text-extra-small--line-height: var(--_base---line-height--line-height-120);
    --text-extra-small--font-weight: var(--_base---font-weight--regular);
    --text-extra-small--letter-spacing: var(--_base---global-size--none);
    --text-large-2x--font-size: 18px;
    --text-large-3x--font-size: clamp(26px, 4.5cqw, 32px);
    --text-large-3x--font-weight: var(--_base---font-weight--semi-bold);
    --text-large-2x--font-family: var(--_base---font-family--your-body-font);
    --text-large-2x--line-height: var(--_base---line-height--line-height-120);
    --text-large-2x--font-weight: var(--_base---font-weight--regular);
    --text-large-2x--letter-spacing: var(--_base---global-size--none);
    --text-large-3x--font-family: var(--_base---font-family--your-body-font);
    --text-large-3x--line-height: var(--_base---line-height--line-height-120);
    --text-large-3x--letter-spacing: var(--_base---global-size--none);
    --display-text--font-family: var(--_base---font-family--your-heading-font);
    --display-text--font-weight: var(--_base---font-weight--black);
    --display-text--font-size: 44px;
    --display-text--line-height: var(--_base---line-height--line-height-90);
    --display-text--letter-spacing: var(--_base---global-size--none);
    --h2--letter-spacing: var(--_base---global-size--none);
    --_common-spacing---spacing-6x: 12px;
    --_common-spacing---spacing-11x: 20px;
    --_common-spacing---spacing-5x: 10px;
    --_common-spacing---flex-grid-gap--gap-12: 12px;
    --_common-spacing---spacing-3x: 6px;
    --_common-spacing---spacing-8x: 14px;
    --_common-spacing---spacing-1x: 2px;
    --_common-spacing---spacing-10x: 16px;
    --_common-spacing---spacing-13x: 26px;
    --_common-spacing---spacing-18x: 48px;
    --_common-spacing---spacing-7x: 12px;
    --_common-spacing---spacing-14x: 32px;
    --_common-spacing---spacing-2x: 4px;
    --_common-spacing---spacing-15x: 36px;
    --_common-spacing---spacing-17x: 44px;
    --_common-spacing---spacing-4x: 8px;
    --_common-spacing---spacing-22x: 72px;
    --_common-spacing---spacing-20x: 56px;
    --_common-spacing---spacing-25x: 90px;
    --_common-spacing---spacing-9x: 16px;
    --_common-spacing---spacing-19x: 52px;
    --_common-spacing---spacing-21x: 64px;
    --_common-spacing---spacing-28x: 100px;
    --_common-spacing---spacing-12x: 24px;
    --_common-spacing---spacing-16x: 38px;
    --_common-spacing---spacing-23x: 78px;
    --_common-spacing---spacing-24x: 80px;
    --_common-spacing---spacing-26x: 90px;
    --_common-spacing---spacing-27x: 100px;
    --_ui---section--padding-default: 70px;
    --_ui---container--padding: 20px;
    --_ui---container--max-width: 100%;
    --_ui---primary-button--font-family: var(--_base---font-family--your-body-font);
    --_ui---primary-button--font-size: var(--_base---font-size--font-size-16);
    --_ui---primary-button--line-height: var(--_base---line-height--line-height-100);
    --_ui---primary-button--font-weight: var(--_base---font-weight--bold);
    --_ui---primary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
    --_ui---section--padding-large: 90px;
    --_ui---section--first-section-padding-top: 100px;
    --_ui---section--padding-small: 40px;
    --_ui---secondary-button--font-family: var(--_base---font-family--your-body-font);
    --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
    --_ui---secondary-button--font-size: var(--_base---font-size--font-size-16);
    --_ui---secondary-button--line-height: var(--_base---line-height--line-height-125);
    --_ui---secondary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-1x);
  }
  .container {
    max-width: var(--_ui---container--max-width);
  }
  .button {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .color {
    height: 80px;
  }
  .text-extra-large.home-hero-para {
    max-width: 400px;
  }
  .style-guide-example-wrapper {
    grid-template-columns: 1fr;
  }
  .hamburger-trigger {
    width: 32px;
    height: 26px;
  }
  .section-label-content {
    font-size: var(--text-small--font-size);
  }
  .brand-marquee-truck {
    grid-column-gap: var(--_common-spacing---spacing-14x);
    grid-row-gap: var(--_common-spacing---spacing-14x);
  }
  .faq-item-icon {
    width: 28px;
    height: 28px;
    padding: var(--_common-spacing---spacing-4x);
  }
  .mission-vision-content-wrap {
    grid-column-gap: var(--_common-spacing---spacing-13x);
    grid-row-gap: var(--_common-spacing---spacing-13x);
    position: static;
  }
  .mission-vision-content-wrap.our-vision, .mission-vision-content-wrap.our-mission {
    grid-template-columns: 1fr;
  }
  .mission-vision-content-truck {
    height: auto;
  }
  .input-field {
    padding-top: var(--_common-spacing---spacing-5x);
    padding-bottom: var(--_common-spacing---spacing-5x);
  }
  .input-field.is-cart-quantity {
    width: 80px;
  }
  .h5-style.about-benefits-item-heading {
    margin-top: -60px;
  }
  .overview-box {
    position: static;
  }
  .payment-methods-item {
    max-width: 80px;
  }
  .payment-methods-item.small-item {
    max-width: 60px;
  }
  .btn-icon-wrap {
    width: 36px;
    height: 36px;
  }
  .fream-text {
    margin-top: -7px;
  }
  .home-hero-decorative-image-wrapper-two {
    right: 4%;
  }
  .home-about-section {
    margin-top: -40px;
  }
  .home-about-feature-image {
    max-width: 220px;
  }
  .home-menu-header-wrapper {
    grid-template-columns: 1fr;
  }
  .home-menu-mask {
    max-width: 400px;
  }
  .menu-item {
    padding-left: var(--_common-spacing---spacing-11x);
  }
  .features-card-content {
    width: var(--_base---global-size--full);
  }
  .features-card-item-wrapper.item-one {
    grid-column-gap: var(--_common-spacing---spacing-20x);
    grid-row-gap: var(--_common-spacing---spacing-20x);
    flex-flow: column;
  }
  .feature-slide-marquee-image {
    max-width: 70px;
  }
  .attractive-content-wrapper {
    grid-template-columns: 1.5fr;
  }
  .attractive-section-image {
    max-width: 300px;
  }
  .special-offer-content-wrapper {
    grid-template-columns: 1.1fr;
  }
  .special-offer-menu-image-wrapper {
    width: 80px;
  }
  .special-offer-details-wrapper, .special-offer-background-image-wrapper {
    max-width: var(--_base---global-size--full);
  }
  .testimonial-cards-track {
    height: auto;
    padding-right: var(--_ui---container--padding);
    padding-left: var(--_ui---container--padding);
    grid-column-gap: var(--_common-spacing---spacing-11x);
    grid-row-gap: var(--_common-spacing---spacing-11x);
    flex-flow: column;
    position: static;
  }
  .testimonial-card-wrapper {
    position: static;
  }
  .testimonial-slider-wrapper {
    height: auto;
  }
  .faq-intro-column {
    grid-column-gap: var(--_common-spacing---spacing-10x);
    grid-row-gap: var(--_common-spacing---spacing-10x);
    grid-template-columns: 1fr;
  }
  .faq-intro-column.is-bottom {
    grid-column-gap: var(--_common-spacing---spacing-18x);
    grid-row-gap: var(--_common-spacing---spacing-18x);
  }
  .faq-description-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-13x);
    grid-row-gap: var(--_common-spacing---spacing-13x);
  }
  .faq-content-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-10x);
    grid-row-gap: var(--_common-spacing---spacing-10x);
  }
  .footer-component-section {
    padding-bottom: var(--_common-spacing---spacing-10x);
  }
  .footer-newsletter-form-wrapper {
    justify-content: flex-start;
    align-items: center;
  }
  .footer-input-field {
    padding: var(--_common-spacing---spacing-4x) var(--_common-spacing---spacing-9x);
  }
  .footer-newsletter-wrapper {
    grid-template-columns: 1fr;
  }
  .social-btn-link {
    width: 46px;
  }
  .footer-columns-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-13x);
    grid-row-gap: var(--_common-spacing---spacing-13x);
    grid-template-columns: 1fr;
  }
  .footer-primary-columns-wrapper {
    max-width: var(--_base---global-size--full);
    grid-template-columns: 1fr;
  }
  .footer-divider-group-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-10x);
    grid-row-gap: var(--_common-spacing---spacing-10x);
  }
  .footer-copyright-content-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-6x);
    grid-row-gap: var(--_common-spacing---spacing-6x);
    flex-flow: column-reverse;
  }
  .about-story-timeline-decoration {
    right: -42px;
  }
  .about-story-timeline-decoration.left-align {
    left: -42px;
  }
  .our-story-section {
    height: auto;
  }
  .about-stats-grid-wrapper {
    grid-template-columns: 1fr;
  }
  .about-stats-item-icon-wrapper, .about-stats-item-icon-wrapper.right-alight {
    justify-content: center;
    align-items: flex-start;
  }
  .about-stats-column-wrapper {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .about-stats-item-wrapper.right-alight {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
  }
  .about-stats-banner-image-wrapper {
    width: var(--_base---global-size--full);
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .about-team-grid-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-18x);
    grid-row-gap: var(--_common-spacing---spacing-18x);
    grid-template-columns: 1fr;
  }
  .menu-tab-btn-icon {
    width: 22px;
    height: 22px;
  }
  .menu-collection-list {
    grid-template-columns: 1fr;
  }
  .home-menu-collection-wrapper {
    min-height: 400px;
  }
  .product-details-layout {
    grid-template-columns: 1fr;
  }
  .product-information-header-wrapper {
    width: var(--_base---global-size--full);
    max-width: 500px;
  }
  .product-availability-wrapper {
    flex-flow: wrap;
  }
  .product-information-wrapper {
    max-width: var(--_base---global-size--full);
  }
  .featured-menu-heading-wrapper {
    max-width: 500px;
  }
  .blog-collection-content-wrapper {
    padding: var(--_common-spacing---spacing-6x);
  }
  .blog-details-content-layout {
    grid-template-columns: 2.5fr;
  }
  .blog-details-article-content {
    max-width: var(--_base---global-size--full);
  }
  .blog-details-author-section {
    max-width: var(--_base---global-size--full);
    min-width: auto;
    position: static;
  }
  .blog-details-author-avatar {
    width: 50px;
    height: 50px;
  }
  .blog-details-social-icon {
    width: 22px;
    height: 22px;
  }
  .related-blog-title-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-11x);
    grid-row-gap: var(--_common-spacing---spacing-11x);
    grid-template-columns: 1.5fr;
  }
  .utility-hero-shape {
    width: 70px;
    height: 70px;
    display: none;
  }}
@media screen and (max-width: 479px) {

  body {
    --text-regular--font-family: var(--_base---font-family--your-body-font);
    --text-regular--font-size: 15px;
    --text-regular--line-height: var(--_base---line-height--line-height-120);
    --text-regular--font-weight: var(--_base---font-weight--regular);
    --text-regular--letter-spacing: var(--_base---global-size--none);
    --h1--font-family: var(--_base---font-family--your-heading-font);
    --h1--font-size: 70px;
    --h1--line-height: var(--_base---line-height--line-height-90);
    --h1--font-weight: var(--_base---font-weight--black);
    --h1--letter-spacing: var(--_base---global-size--none);
    --h2--font-family: var(--_base---font-family--your-heading-font);
    --h2--font-size: 50px;
    --h2--line-height: var(--_base---line-height--line-height-90);
    --h2--font-weight: var(--_base---font-weight--black);
    --h3--font-family: var(--_base---font-family--your-heading-font);
    --h3--font-size: 42px;
    --h3--line-height: var(--_base---line-height--line-height-90);
    --h3--font-weight: var(--_base---font-weight--black);
    --h3--letter-spacing: var(--_base---global-size--none);
    --h4--font-family: var(--_base---font-family--your-heading-font);
    --h4--font-size: 36px;
    --h4--line-height: var(--_base---line-height--line-height-90);
    --h4--font-weight: var(--_base---font-weight--black);
    --h4--letter-spacing: var(--_base---global-size--none);
    --h5--font-family: var(--_base---font-family--your-heading-font);
    --h5--font-size: 28px;
    --h5--line-height: var(--_base---line-height--line-height-90);
    --h5--font-weight: var(--_base---font-weight--black);
    --h5--letter-spacing: var(--_base---global-size--none);
    --h6--font-family: var(--_base---font-family--your-heading-font);
    --h6--font-size: 24px;
    --h6--line-height: var(--_base---line-height--line-height-90);
    --h6--font-weight: var(--_base---font-weight--bold);
    --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
    --text-extra-large--font-size: 16px;
    --text-small--font-family: var(--_base---font-family--your-body-font);
    --text-small--font-size: 13px;
    --text-small--line-height: var(--_base---line-height--line-height-120);
    --text-small--font-weight: var(--_base---font-weight--regular);
    --text-small--letter-spacing: var(--_base---global-size--none);
    --text-extra-large--font-family: var(--_base---font-family--your-body-font);
    --text-extra-large--line-height: var(--_base---line-height--line-height-120);
    --text-extra-large--font-weight: var(--_base---font-weight--regular);
    --text-extra-large--letter-spacing: var(--_base---global-size--none);
    --text-learge--font-family: var(--_base---font-family--your-body-font);
    --text-learge--font-size: 16px;
    --text-learge--line-height: var(--_base---line-height--line-height-120);
    --text-learge--font-weight: var(--_base---font-weight--regular);
    --text-learge--letter-spacing: var(--_base---global-size--none);
    --text-extra-small--font-family: var(--_base---font-family--your-body-font);
    --text-extra-small--font-size: 12px;
    --text-extra-small--line-height: var(--_base---line-height--line-height-120);
    --text-extra-small--font-weight: var(--_base---font-weight--regular);
    --text-extra-small--letter-spacing: var(--_base---global-size--none);
    --text-large-2x--font-size: 18px;
    --text-large-3x--font-size: 26px;
    --text-large-3x--font-weight: var(--_base---font-weight--semi-bold);
    --text-large-2x--font-family: var(--_base---font-family--your-body-font);
    --text-large-2x--line-height: var(--_base---line-height--line-height-120);
    --text-large-2x--font-weight: var(--_base---font-weight--regular);
    --text-large-2x--letter-spacing: var(--_base---global-size--none);
    --text-large-3x--font-family: var(--_base---font-family--your-body-font);
    --text-large-3x--line-height: var(--_base---line-height--line-height-120);
    --text-large-3x--letter-spacing: var(--_base---global-size--none);
    --display-text--font-family: var(--_base---font-family--your-heading-font);
    --display-text--font-weight: var(--_base---font-weight--black);
    --display-text--font-size: 34px;
    --display-text--line-height: var(--_base---line-height--line-height-90);
    --display-text--letter-spacing: var(--_base---global-size--none);
    --h2--letter-spacing: var(--_base---global-size--none);
    --_common-spacing---spacing-6x: 12px;
    --_common-spacing---spacing-11x: 18px;
    --_common-spacing---spacing-5x: 10px;
    --_common-spacing---flex-grid-gap--gap-12: 12px;
    --_common-spacing---spacing-3x: 6px;
    --_common-spacing---spacing-8x: 14px;
    --_common-spacing---spacing-1x: 2px;
    --_common-spacing---spacing-10x: 16px;
    --_common-spacing---spacing-13x: 24px;
    --_common-spacing---spacing-18x: 40px;
    --_common-spacing---spacing-7x: 12px;
    --_common-spacing---spacing-14x: 28px;
    --_common-spacing---spacing-2x: 4px;
    --_common-spacing---spacing-15x: 32px;
    --_common-spacing---spacing-17x: 38px;
    --_common-spacing---spacing-4x: 8px;
    --_common-spacing---spacing-22x: 60px;
    --_common-spacing---spacing-20x: 48px;
    --_common-spacing---spacing-25x: 80px;
    --_common-spacing---spacing-9x: 16px;
    --_common-spacing---spacing-19x: 44px;
    --_common-spacing---spacing-21x: 56px;
    --_common-spacing---spacing-28x: 100px;
    --_common-spacing---spacing-12x: 22px;
    --_common-spacing---spacing-16x: 34px;
    --_common-spacing---spacing-23x: 64px;
    --_common-spacing---spacing-24x: 70px;
    --_common-spacing---spacing-26x: 80px;
    --_common-spacing---spacing-27x: 90px;
    --_ui---section--padding-default: 50px;
    --_ui---container--padding: 15px;
    --_ui---container--max-width: 100%;
    --_ui---primary-button--font-family: var(--_base---font-family--your-body-font);
    --_ui---primary-button--font-size: var(--_base---font-size--font-size-16);
    --_ui---primary-button--line-height: var(--_base---line-height--line-height-100);
    --_ui---primary-button--font-weight: var(--_base---font-weight--bold);
    --_ui---primary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-4x);
    --_ui---section--padding-large: 80px;
    --_ui---section--first-section-padding-top: 100px;
    --_ui---section--padding-small: 30px;
    --_ui---secondary-button--font-family: var(--_base---font-family--your-body-font);
    --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
    --_ui---secondary-button--font-size: var(--_base---font-size--font-size-16);
    --_ui---secondary-button--line-height: var(--_base---line-height--line-height-125);
    --_ui---secondary-button--letter-spacing: var(--_base---spacing-letter--spacing-letter-1x);
  }
  .color-box {
    grid-template-columns: 1fr;
  }
  .h5-style.about-benefits-item-heading {
    margin-top: -50px;
  }
  .btn-icon-wrap {
    width: 34px;
    height: 34px;
  }
  .home-hero-content-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-20x);
    grid-row-gap: var(--_common-spacing---spacing-20x);
    grid-template-columns: 1.1fr;
  }
  .home-hero-background-image-wrapper {
    grid-template-columns: 1fr;
  }
  .home-hero-main-image-wrapper {
    width: 50vw;
    margin-top: var(--_base---global-size--none);
  }
  .home-hero-decorative-image-wrapper-one {
    top: -30%;
  }
  .home-hero-decorative-image-one, .home-hero-decorative-image-two {
    width: var(--_base---global-size--full);
    max-width: 80px;
  }
  .home-about-section {
    margin-top: 0;
  }
  .home-about-description-wrapper {
    max-width: 400px;
  }
  .feature-slide-marquee-image {
    max-width: 56px;
  }
  .our-place-gallery-image-wrapper {
    position: sticky;
    top: 4vh;
  }
  .our-place-gallery-wrapper {
    grid-template-columns: 1fr;
  }
  .attractive-section-image {
    max-width: 260px;
  }
  .special-offer-menu-item {
    grid-column-gap: var(--_common-spacing---spacing-7x);
    grid-row-gap: var(--_common-spacing---spacing-7x);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .special-offer-menu-image-wrapper {
    width: 60px;
  }
  .special-offer-menu-list {
    grid-column-gap: var(--_common-spacing---spacing-8x);
    grid-row-gap: var(--_common-spacing---spacing-8x);
  }
  .blog-cards-grid {
    grid-template-columns: 1fr;
  }
  .about-story-timeline-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-7x);
    grid-row-gap: var(--_common-spacing---spacing-7x);
  }
  .about-hero-decorative-image-wrapper-one {
    top: -37%;
    left: -11%;
  }
  .about-hero-decorative-image-wrapper-two {
    top: 20%;
    right: -6%;
  }
  .about-story-timeline-decoration {
    right: -28px;
  }
  .about-story-timeline-decoration.left-align {
    left: -28px;
  }
  .about-benefits-content-wrapper {
    grid-column-gap: var(--_common-spacing---spacing-20x);
    grid-row-gap: var(--_common-spacing---spacing-20x);
  }
  .about-stats-column-wrapper, .about-stats-banner-image-wrapper {
    max-width: 250px;
  }
  .menu-category-tabs-menu {
    flex-flow: column;
  }
  .menu-collection-list:where(.menu-collection-3-column) {
    grid-template-columns: 1fr;
  }
  .home-menu-collection-wrapper {
    min-height: 370px;
  }
  .featured-menu-heading-wrapper {
    max-width: 380px;
  }
  .blog-collection-list {
    grid-template-columns: 1fr;
  }
  .blog-collection-item {
    position: sticky;
    top: 4vh;
  }
  .blog-details-author-avatar {
    width: 56px;
    height: 56px;
  }
  .blog-details-social-icon {
    width: 20px;
    height: 20px;
  }}

#node-_7fc6fabb-8077-dfc7-b17d-ce941f7e778c-81e3a643 {
  justify-self: end;
}
#node-_7a7c6b4d-f3f3-6dc4-5734-b5dea5352cbd-81e3a643 {
  place-self: end;
}
#node-c25580c2-5f6e-897a-f29a-3c18a0d58e45-81e3a643 {
  place-self: end start;
}
#node-fc5b57bb-1c5f-e431-9cb0-89b641e2dc33-81e3a643 {
  place-self: end;
}
#node-_93247a11-14b6-497e-ab83-0c2a99041be0-81e3a643 {
  place-self: start end;
}
#node-a1b77ad2-c4c0-28d5-befe-8fbcfe913119-81e3a643 {
  justify-self: start;
}
#node-_42f56ba2-4796-8852-5378-1166f163afba-81e3a643 {
  align-self: end;
}
#node-_44356f45-3b17-aaf6-ad63-a656d553d2ee-81e3a643 {
  place-self: end;
}
#node-fc6b60ab-90cf-f57c-58ca-c8657eb16a75-81e3a643, #node-_7e12ff0f-e493-8531-49fa-2c1ede5828fd-81e3a643, #node-f1deb254-c16a-d64e-4e7b-658b38c24e2a-7f82f07e, #node-f1deb254-c16a-d64e-4e7b-658b38c24e5f-7f82f07e {
  justify-self: end;
}
#node-_8c4393a4-8a4c-3df9-fcfb-a81b4c2024b3-4c2024aa {
  align-self: end;
}
#node-_64f610b8-b7f0-2f1f-b553-ad2f528974b6-f4b42918 {
  justify-self: start;
}
#node-_64f610b8-b7f0-2f1f-b553-ad2f528974b4-f4b42918 {
  justify-self: center;
}
#node-_64f610b8-b7f0-2f1f-b553-ad2f5289751b-f4b42918, #node-_64f610b8-b7f0-2f1f-b553-ad2f52897525-f4b42918 {
  justify-self: end;
}
#node-fd637f60-8496-1cab-fdea-9e127d15a1f9-81e3a647 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_25f9421f-5d22-b7bf-04fa-e41d8717b704-81e3a64d {
  grid-area: span 3 / span 1 / span 3 / span 1;
  justify-self: center;
}
#node-bf08e17c-00bd-09ba-06a0-ee0284f63af1-81e3a64d {
  grid-area: span 2 / span 1 / span 2 / span 1;
  justify-self: end;
}
#node-_9b711fd8-f712-66e8-aff3-3b0d11eb0551-81e3a64d {
  justify-self: end;
}
#node-_35138517-20cf-fef7-8da4-61eb99dfafa2-81e3a657 {
  place-self: start end;
}
#node-_79cab7d6-2bd6-802e-bf6f-b1201c21a000-81e3a66c {
  align-self: center;
}
#node-_2a1e5334-499d-0210-559c-c69bfb389c01-50b354f1 {
  align-self: start;
}
#node-_744b4399-5b11-7c08-5edf-d394b4406c03-50b354f1 {
  place-self: end;
}@media screen and (max-width: 767px) {

  #node-_44356f45-3b17-aaf6-ad63-a656d553d2ee-81e3a643 {
    justify-self: start;
  }
  #node-fc6b60ab-90cf-f57c-58ca-c8657eb16a75-81e3a643 {
    justify-self: center;
  }
  #node-f1deb254-c16a-d64e-4e7b-658b38c24e2a-7f82f07e {
    justify-self: start;
  }
  #node-f1deb254-c16a-d64e-4e7b-658b38c24e5f-7f82f07e {
    place-self: end start;
  }
  #node-_9b711fd8-f712-66e8-aff3-3b0d11eb0551-81e3a64d {
    justify-self: start;
  }
  #node-_744b4399-5b11-7c08-5edf-d394b4406c03-50b354f1 {
    place-self: start;
  }}
@media screen and (max-width: 479px) {

  #node-_7fc6fabb-8077-dfc7-b17d-ce941f7e778c-81e3a643 {
    justify-self: center;
  }}


/* ======================================================================
   4. Components -- vanilla replacements for the Webflow runtime
   ======================================================================

   Everything the export left to scripts it no longer loads: the IX3
   interactions (hovers, scroll reveals, page-load sequences, loops and
   scroll-scrubbed timelines), Webflow's navbar, tabs, slider and lightbox,
   and the Ecommerce cart. main.js writes the state classes and custom
   properties; this sheet owns what they look like.

   Every value here is transcribed from the IX3 payload in the export's
   webflow.js. Two conventions run through it:

   * REST STATES ARE GATED ON `.js`. A visitor without scripting sees every
     section in its finished state; only a page that can run the reveals
     hides what they reveal.
   * MOTION USES THE INDIVIDUAL `translate`, `rotate` AND `scale`
     PROPERTIES, never `transform`. GSAP composed its x / y / rotation onto
     whatever the element already had -- the section labels and stickers
     are TILTED by the design's own `transform` -- and the individual
     properties compose with `transform` the same way, where a `transform`
     keyframe would replace it.
   ====================================================================== */

:root {
  /* GSAP's curves, as IX3 names them by index. */
  --ease-power1-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-power1-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* The section labels' custom curve (IX3 i-81e90e3c), sampled from its
     bezier path: it overshoots by 11% and settles. */
  --ease-label: linear(0, 0.181, 0.363, 0.544, 0.699, 0.81, 0.907, 1.006,
    1.053, 1.085, 1.108, 1.114, 1.102, 1.089, 1.076, 1.063, 1.05, 1.037,
    1.025, 1.012, 1);
}

/* ---- 1. button label roll ----------------------------------------------
   IX3 i-042241f7, on every `[data-roll]` (the export's `button-hover`):
   both label copies rise one line and the arrow is pushed out to the right
   as its twin slides in from the left -- GSAP's default 0.5s, power2.out,
   0.04s in. The twin arrow rests one width to the left. */
.button-text,
.button-icon {
  transition: translate 0.5s var(--ease-power2-out) 0.04s;
}

.button-icon.hover-icon {
  translate: -100% 0;
}

[data-roll]:hover .button-text {
  translate: 0 -100%;
}

[data-roll]:hover .button-icon.hover-icon {
  translate: 0 0;
}

[data-roll]:hover .button-icon.normal-icon {
  translate: 100% 0;
}

/* ---- 2. text-button roll -----------------------------------------------
   IX3 i-4c867da0, on every `.text-button` (the menu links): each letter of
   the label rises out of its window while the twin copy's letters rise in
   behind it, 0.17s each (power2.out), 0.04s apart. main.js splits the two
   labels into `.split-char`s numbered `--i`. */
.text-button .split-word {
  display: inline-block;
  white-space: nowrap;
}

.text-button .split-char {
  display: inline-block;
  transition: translate 0.17s var(--ease-power2-out);
  transition-delay: calc(0.04s + var(--i, 0) * 0.04s);
}

.text-button-hover-text .split-char {
  translate: 0 100%;
}

.text-button:hover .text-button-normal-text .split-char {
  translate: 0 -100%;
}

.text-button:hover .text-button-hover-text .split-char {
  translate: 0 0;
}

/* ---- 3. card hovers ----------------------------------------------------
   IX3 i-f5b3dc14: a menu card's photograph grows to 112% (0.55s,
   power2.out). IX3 i-6ef17fcb: a blog card's cover grows to 110% (0.35s,
   power2.out, 0.08s in). IX3 i-5abc714a, home page only: the large blog
   card's cover grows to 112%. */
.menu-item .containe-size-banner {
  transition: scale 0.55s var(--ease-power2-out);
}

.menu-item:hover .containe-size-banner {
  scale: 1.12;
}

.blog-collection-card-link .cover-size-banner,
[data-page="index"] .blog-card-link .cover-size-banner {
  transition: scale 0.35s var(--ease-power2-out) 0.08s;
}

.blog-collection-card-link:hover .cover-size-banner {
  scale: 1.1;
}

[data-page="index"] .blog-card-link:hover .cover-size-banner {
  scale: 1.12;
}

/* IX3 i-e2bb7db8, scoped by the payload to the home page: a footer social
   glyph rises out of its button as its twin rises in (0.35s, power1.out). */
[data-page="index"] .social-btn-normal-icon,
[data-page="index"] .social-btn-hover-icon {
  transition: translate 0.35s var(--ease-power1-out);
}

[data-page="index"] .social-btn-link:hover .social-btn-normal-icon,
[data-page="index"] .social-btn-link:hover .social-btn-hover-icon {
  translate: 0 -100%;
}

/* ---- 4. scroll reveals -------------------------------------------------
   One rule per family. main.js adds `.is-revealed` to the trigger when its
   top passes 92% of the viewport (88% for `[data-zoom-in]`), and each plays
   once. The rest state is a from-only keyframe's starting point, so a
   revealed element ends on its OWN translate / scale, never on a value
   this sheet pins.

     data-fade-up      IX3 i-1e0aaba9  opacity 0, y 50px    0.55s power2.out  +0.08s
     data-fade         IX3 i-b33a87e3  opacity 0            0.3s  power1.in   +0.05s
     data-fade-left    IX3 i-111058ed  opacity 0, x -40px   0.55s power2.out  +0.08s
     data-fade-right   IX3 i-dbcc4845  opacity 0, x 40px    0.55s power2.out  +0.08s
     data-fade-item    IX3 i-b8b0093a  opacity 0, y 50px    0.55s power2.out  +0.08s, 0.08s apart
     data-label-pop    IX3 i-81e90e3c  opacity 0, y -60px   0.45s custom      +0.02s
     data-zoom-in      IX3 i-9bdc2e0c  opacity 0, scale 0   0.4s  back.out          (about page)
*/
@keyframes reveal-fade {
  from { opacity: 0; }
}@keyframes reveal-up {

  from { opacity: 0; translate: 0 50px; }}
@keyframes reveal-left {

  from { opacity: 0; translate: -40px 0; }}
@keyframes reveal-right {

  from { opacity: 0; translate: 40px 0; }}
@keyframes reveal-label {

  from { opacity: 0; translate: 0 -60px; }}
@keyframes reveal-zoom {

  from { opacity: 0; scale: 0; }}


:where(.js) [data-fade-up]:not(.is-revealed),
:where(.js) [data-fade]:not(.is-revealed),
:where(.js) [data-fade-left]:not(.is-revealed),
:where(.js) [data-fade-right]:not(.is-revealed),
:where(.js) [data-label-pop]:not(.is-revealed),
:where(.js) [data-fade-group]:not(.is-revealed) [data-fade-item],
:where(.js) [data-page="about"] [data-zoom-in]:not(.is-revealed) {
  opacity: 0;
}

[data-fade-up].is-revealed {
  animation: reveal-up 0.55s var(--ease-power2-out) 0.08s backwards;
}

[data-fade].is-revealed {
  animation: reveal-fade 0.3s var(--ease-power1-in) 0.05s backwards;
}

[data-fade-left].is-revealed {
  animation: reveal-left 0.55s var(--ease-power2-out) 0.08s backwards;
}

[data-fade-right].is-revealed {
  animation: reveal-right 0.55s var(--ease-power2-out) 0.08s backwards;
}

[data-fade-group].is-revealed [data-fade-item] {
  animation: reveal-up 0.55s var(--ease-power2-out) backwards;
  animation-delay: calc(0.08s + var(--i, 0) * 0.08s);
}

[data-label-pop].is-revealed {
  animation: reveal-label 0.45s var(--ease-label) 0.02s backwards;
}

[data-page="about"] [data-zoom-in].is-revealed {
  animation: reveal-zoom 0.4s var(--ease-back-out) backwards;
}

/* IX3 i-dfa67ea2, home page: the paragraph under the special offer reads
   in letter by letter, each from 30% to full in 0.25s, 0.01s apart. */
.char-fade-char {
  opacity: 0.3;
}

[data-char-fade].is-revealed .char-fade-char {
  opacity: 1;
  transition: opacity 0.25s var(--ease-power1-out);
  transition-delay: calc(var(--i, 0) * 0.01s);
}

/* ---- 5. page-load sequences --------------------------------------------
   Each page's `wf:load` interaction, transcribed member by member in
   transform.LOAD_SEQUENCES: every member carries `data-load="<kind>"` and
   its own `--load-delay`. Until main.js marks the page `.is-loaded` (once
   the webfonts are in, so nothing rises and then re-wraps) each member
   holds its from-state.

     up      opacity 0, y 50px                          0.45s power1.out
     swing   opacity 0, x 100%, rotation 32deg          0.53s power1.out
     grow    opacity 0, x 50%, scale 0.5, from 100% 100%  0.57s power3.out
     pop     opacity 0, scale 0                         0.4s  back.out
     slide   opacity 0, x -50px                         0.34s power1.out
     settle  scale 0.8                                  0.26s power1.out
*/
@keyframes load-up {
  from { opacity: 0; translate: 0 50px; }
}@keyframes load-swing {

  from { opacity: 0; translate: 100% 0; rotate: 32deg; }}
@keyframes load-grow {

  from { opacity: 0; translate: 50% 0; scale: 0.5; }}
@keyframes load-pop {

  from { opacity: 0; scale: 0; }}
@keyframes load-slide {

  from { opacity: 0; translate: -50px 0; }}
@keyframes load-settle {

  from { scale: 0.8; }}


:where(.js:not(.is-loaded)) [data-load]:not([data-load="settle"]) {
  opacity: 0;
}

[data-load="grow"] {
  transform-origin: 100% 100%;
}

.is-loaded [data-load="up"] {
  animation: load-up 0.45s var(--ease-power1-out) var(--load-delay, 0s) backwards;
}

.is-loaded [data-load="swing"] {
  animation: load-swing 0.53s var(--ease-power1-out) var(--load-delay, 0s) backwards;
}

.is-loaded [data-load="grow"] {
  animation: load-grow 0.57s var(--ease-power3-out) var(--load-delay, 0s) backwards;
}

.is-loaded [data-load="pop"] {
  animation: load-pop 0.4s var(--ease-back-out) var(--load-delay, 0s) backwards;
}

.is-loaded [data-load="slide"] {
  animation: load-slide 0.34s var(--ease-power1-out) var(--load-delay, 0s) backwards;
}

.is-loaded [data-load="settle"] {
  animation: load-settle 0.26s var(--ease-power1-out) var(--load-delay, 0s) backwards;
}

/* ---- 6. loops ----------------------------------------------------------
   IX3 i-213de275: the word strip runs one track's width every 30s, for
   ever. IX3 i-ab76159f: the "discover more" badge turns from -360deg to
   360deg every 15s. IX3 i-ee993fe7: the stickers sway, 5deg to -16deg and
   -5deg to 15deg, over 5s each way (power1.out, yoyo), and the hero cup
   tips from 5deg to -3deg 2.37s into that cycle (0.5s, back.out). IX3
   i-6705bbd4, home page: the coffee-cup photograph by "Every cup tells a
   story" rocks from -20deg to 0 over 8s each way. */
@keyframes marquee-left {
  to { translate: -100% 0; }
}@keyframes spin-twice {

  from { rotate: -360deg; }
  to { rotate: 360deg; }}
@keyframes sway-one {

  from { rotate: 5deg; }
  to { rotate: -16deg; }}
@keyframes sway-two {

  from { rotate: -5deg; }
  to { rotate: 15deg; }}
@keyframes cup-tip {

  0%, 47.4% { rotate: 5deg; animation-timing-function: var(--ease-back-out); }
  57.4%, 100% { rotate: -3deg; }}
@keyframes rock {

  from { rotate: -20deg; }
  to { rotate: 0deg; }}


[data-marquee="left"] {
  animation: marquee-left 30s linear infinite;
}

[data-spin] {
  animation: spin-twice 15s linear infinite;
}

[data-sway="one"] {
  animation: sway-one 5s var(--ease-power1-out) infinite alternate;
}

[data-sway="two"] {
  animation: sway-two 5s var(--ease-power1-out) infinite alternate;
}

.home-hero-main-image {
  animation: cup-tip 5s linear infinite alternate;
}

[data-page="index"] .attractive-section-image {
  animation: rock 8s linear infinite alternate;
}

/* ---- 7. scroll-scrubbed timelines ---------------------------------------
   Five IX3 timelines run on the scroll position rather than on a clock.
   main.js measures each trigger's progress through its range (with the
   payload's `scrub: 0.8` lag) and writes it to `--scrub` on the trigger,
   0 to 1. Every animated part is a PAUSED animation whose delay is set from
   that number, so the browser renders exactly the frame the scroll position
   asks for, from the payload's own keyframes and timings:

       animation-delay: calc(<start>s - var(--scrub) * <timeline length>s)

   A part before its start shows its first keyframe (fill backwards) and a
   part past its end its last (fill forwards), as GSAP's timeline did. */
[data-scrub] .scrub-part,
.scrub-part {
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
}

/* IX3 i-8580c2b9, home: the photograph in the "more than coffee" section
   drifts from -80px to 20px as its frame crosses the viewport. The frame is
   ALSO a part of the section's own timeline below, so this trigger writes
   its progress under a name of its own, `--scrub-photo`. */
@keyframes scrub-about-photo {
  from { translate: 0 -80px; }
  to { translate: 0 20px; }
}

[data-scrub="photo"] > .containe-size-banner {
  animation-name: scrub-about-photo;
  animation-duration: 1s;
  animation-delay: calc(var(--scrub-photo, 0) * -1s);
}

/* IX3 i-1fb764d7, home (1.86s timeline over the section crossing the
   viewport): the heading rises in at 0.18s, the photograph drops in at
   0.44s while the paragraph reads in letter by letter, and the six coffee
   beans drift across the whole run. */
@keyframes scrub-rise-in {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}@keyframes scrub-drop-in {

  from { opacity: 0; translate: 0 -20px; }
  to { opacity: 1; translate: 0 0; }}
@keyframes scrub-letter {

  from { opacity: 0.3; }
  to { opacity: 1; }}
@keyframes scrub-bean-down-in {

  from { translate: 50px -35px; }
  to { translate: 0 35px; }}
@keyframes scrub-bean-down-out {

  from { translate: -50px -35px; }
  to { translate: 0 35px; }}
@keyframes scrub-bean-up {

  from { translate: 0 35px; }
  to { translate: 0 -35px; }}


[data-scrub="about"] .home-about-heading-wrapper > h2 {
  animation-name: scrub-rise-in;
  animation-duration: 0.26s;
  animation-delay: calc(0.18s - var(--scrub, 0) * 1.86s);
}

[data-scrub="about"] .home-about-feature-image {
  animation-name: scrub-drop-in;
  animation-duration: 0.25s;
  animation-delay: calc(0.44s - var(--scrub, 0) * 1.86s);
}

[data-scrub="about"] .home-about-para .split-char {
  animation-name: scrub-letter;
  animation-duration: 0.15s;
  animation-delay: calc(0.44s + var(--i, 0) * 0.00595s - var(--scrub, 0) * 1.86s);
}

[data-scrub="about"] .about-section-coffee.item-one,
[data-scrub="about"] .about-section-coffee.item-five {
  animation-name: scrub-bean-down-in;
}

[data-scrub="about"] .about-section-coffee.item-four,
[data-scrub="about"] .about-section-coffee.item-six {
  animation-name: scrub-bean-down-out;
}

[data-scrub="about"] .about-section-coffee.item-two,
[data-scrub="about"] .about-section-coffee.item-three {
  animation-name: scrub-bean-up;
}

[data-scrub="about"] .about-section-coffee {
  animation-duration: 1.86s;
  animation-delay: calc(var(--scrub, 0) * -1.86s);
}

/* IX3 i-409391be, home (2.77s timeline while the cards wrapper is pinned
   through the viewport): the first pair of cards trades places -- one
   shrinks to 65% as the other grows from it -- then at 1.28s the second
   pair fades in over the first and trades places the same way at 1.77s.
   The payload plays it at 992px and up only; below that the cards stand in
   their own layout, which is why the REST states are gated too. */
@keyframes scrub-shrink {
  from { scale: 1; }
  to { scale: 0.65; }
}@keyframes scrub-grow {

  from { scale: 0.65; }
  to { scale: 1; }}
@keyframes scrub-fade-in {

  from { opacity: 0; }
  to { opacity: 1; }}
@keyframes scrub-fade-out {

  from { opacity: 1; }
  to { opacity: 0; }}
@media screen and (min-width: 992px) {

  [data-scrub="features"] .features-card-content {
    animation-duration: 1s;
  }

  [data-scrub="features"] .features-card-content.item-one {
    animation-name: scrub-shrink;
    animation-delay: calc(var(--scrub, 0) * -2.77s);
  }

  [data-scrub="features"] .features-card-content.item-two {
    animation-name: scrub-grow;
    animation-delay: calc(var(--scrub, 0) * -2.77s);
  }

  [data-scrub="features"] .features-card-content.item-three {
    animation-name: scrub-shrink;
    animation-delay: calc(1.77s - var(--scrub, 0) * 2.77s);
  }

  [data-scrub="features"] .features-card-content.item-four {
    animation-name: scrub-grow;
    animation-delay: calc(1.77s - var(--scrub, 0) * 2.77s);
  }

  [data-scrub="features"] .features-card-item-wrapper.item-one {
    animation-name: scrub-fade-out;
    animation-duration: 0.24s;
    animation-delay: calc(1.28s - var(--scrub, 0) * 2.77s);
  }

  [data-scrub="features"] .features-card-item-wrapper.item-two {
    animation-name: scrub-fade-in;
    animation-duration: 0.24s;
    animation-delay: calc(1.28s - var(--scrub, 0) * 2.77s);
  }}


/* IX3 i-167e30e4, home (0.84s timeline while the testimonial deck is pinned
   through the viewport): the top card is thrown off to the right, the next
   off to the left, and the last grows from 80% into place. 768px and up
   only, as the payload has it. */
@keyframes scrub-throw-right {
  from { translate: 0 0; scale: 1; rotate: -5deg; }
  to { translate: 90vw 0; scale: 0.8; rotate: 10deg; }
}@keyframes scrub-throw-left {

  from { translate: 0 0; scale: 1; rotate: 5deg; }
  to { translate: -90vw 0; scale: 0.8; rotate: -10deg; }}
@media screen and (min-width: 768px) {

  [data-scrub="testimonials"] .testimonial-card-wrapper.item-three {
    animation-name: scrub-throw-right;
    animation-duration: 0.33s;
    animation-delay: calc(0.1s - var(--scrub, 0) * 0.84s);
  }

  [data-scrub="testimonials"] .testimonial-card-wrapper.item-two {
    animation-name: scrub-throw-left;
    animation-duration: 0.33s;
    animation-delay: calc(0.41s - var(--scrub, 0) * 0.84s);
  }

  [data-scrub="testimonials"] .testimonial-card-wrapper.item-one {
    animation-name: scrub-grow-card;
    animation-duration: 0.26s;
    animation-delay: calc(0.58s - var(--scrub, 0) * 0.84s);
  }  @keyframes scrub-grow-card {

    from { scale: 0.8; }
    to { scale: 1; }  }
}


/* IX3 i-87dc543c, about (1.33s timeline while the story section is pinned
   through the viewport): the timeline's line draws down, and as it passes
   each of the two lower entries (0.46s and 0.93s) the entry brightens from
   50% and its marker turns from taupe to sienna. */
@keyframes scrub-line-draw {
  from { translate: 0 -100%; }
  to { translate: 0 0; }
}@keyframes scrub-entry-on {

  from { opacity: 0.5; }
  to { opacity: 1; }}
@keyframes scrub-marker-on {

  from { background-color: var(--_color---soft-taupe); }
  to { background-color: var(--_color---burnt-sienna); }}


[data-scrub="story"] .about-story-timeline-spacer {
  animation-name: scrub-line-draw;
  animation-duration: 1.33s;
  animation-delay: calc(var(--scrub, 0) * -1.33s);
}

.about-story-timeline-entry[data-story-step] {
  animation-name: scrub-entry-on;
  animation-duration: 0.04s;
}

.about-story-timeline-decoration[data-story-step] {
  animation-name: scrub-marker-on;
  animation-duration: 0.04s;
}

[data-scrub="story"] [data-story-step="1"] {
  animation-delay: calc(0.46s - var(--scrub, 0) * 1.33s);
}

[data-scrub="story"] [data-story-step="2"] {
  animation-delay: calc(0.93s - var(--scrub, 0) * 1.33s);
}

/* The paused driver: every selector above that names an animation, and
   nothing else. */
[data-scrub="photo"] > .containe-size-banner,
[data-scrub="about"] .home-about-heading-wrapper > h2,
[data-scrub="about"] .home-about-feature-image,
[data-scrub="about"] .home-about-para .split-char,
[data-scrub="about"] .about-section-coffee,
[data-scrub="features"] .features-card-content,
[data-scrub="features"] .features-card-item-wrapper,
[data-scrub="testimonials"] .testimonial-card-wrapper,
[data-scrub="story"] .about-story-timeline-spacer,
[data-scrub="story"] [data-story-step] {
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
}

/* ---- 8. FAQ ------------------------------------------------------------
   IX3 i-f1ae1dca: a press anywhere on a row opens its answer from 0 to its
   height (0.35s, back.out -- it overshoots and settles, which main.js runs)
   and turns the plus into a cross. Every row ships closed. */
.faq-item-toggle-content {
  height: 0;
}

.faq-item.is-open .faq-item-toggle-content {
  height: auto;
}

.faq-item-icon {
  transition: rotate 0.35s var(--ease-back-out);
}

.faq-item.is-open .faq-item-icon {
  rotate: 45deg;
}

/* ---- 8b. menu tabs -----------------------------------------------------
   IX2 e-7 / e-8 (a-5, a-6) on every `.menu-tab-btn`: a tab's label rests
   32px to the left with its bean icon pushed out of the pill, and the
   ACTIVE tab slides both back into place -- 0.3s outQuad either way. */
.menu-tab-btn-content {
  translate: -32px 0;
  transition: translate 0.3s var(--ease-power1-out);
}

.menu-tab-btn-icon {
  translate: -100% 0;
  transition: translate 0.3s var(--ease-power1-out);
}

.menu-tab-btn.is-active .menu-tab-btn-content,
.menu-tab-btn.is-active .menu-tab-btn-icon {
  translate: 0 0;
}

/* ---- 9. the mega menu --------------------------------------------------
   IX3 i-91f59b14 above 991px: hovering (or focusing, or pressing) "ALL
   PAGES" shows the panel, which rises 6px into place (0.2s, power1.out)
   as it fades in (0.08s) and the chevron turns over. Below 992px the
   design shows the panel's links inline and hides the head. */
@keyframes mega-in {
  from { opacity: 0; translate: 0 6px; }
}

.nav-dropdown-icon.megamenu {
  transition: rotate 0.2s linear;
}@media screen and (min-width: 992px) {

  .nav-dropdown.is-open .nav-dropdown-toggle-content.megamenu {
    display: block;
    animation: mega-in 0.2s var(--ease-power1-out) backwards;
  }

  .nav-dropdown.is-open .nav-dropdown-icon.megamenu {
    rotate: 180deg;
  }}


/* ---- 10. the product lightbox ------------------------------------------
   Webflow's lightbox, as its own stylesheet drew it: the picture centred
   on a near-black backdrop with a close button in the corner. main.js
   builds the dialog on first use. */
.lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0.9);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-close svg {
  width: 20px;
  height: 20px;
}

.product-gallery-lightbox {
  cursor: zoom-in;
}

/* ---- 11. the cart ------------------------------------------------------
   A localStorage basket behind the export's own Ecommerce markup: every
   element keeps its `.wf-commerce-*` class and therefore its layout, and
   only the hook it hangs on has changed. The drawer's `display: none` was
   the runtime's inline rest state, which clean_style strips -- so the
   closed state is this pair of rules. */
.cart-modal {
  display: none;
}

.cart-modal.is-open {
  display: flex;
}

/* THE FORM IS CLOSED UNTIL THERE IS SOMETHING IN IT. The export hid it with
   an inline `display: none` the runtime removed once it had items; without
   this the subtotal and Continue to Checkout would sit on top of "No items
   found." in an empty cart. */
.cart-form {
  display: none;
}

.cart-form.is-filled {
  display: flex;
}

.cart-empty.is-hidden {
  display: none;
}

/* The remove control is a <button> now; it keeps the design's outlined
   pill and loses the UA's fill. */
.remove-button {
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* The add-to-cart control on a product page is a transparent form laid over
   the drawn ORDER NOW button, as the design built it. A keyboard user
   focusing the real control sees the ring on the drawing. */
.product-availability-badge:has(:focus-visible) .button,
.contact-form-feedback-wrapper:has(:focus-visible) .button {
  outline: 2px solid var(--_color---burnt-sienna);
  outline-offset: 3px;
}

/* Hovering the transparent control is hovering the drawing. */
.product-availability-badge[data-roll]:hover .button-text,
.contact-form-feedback-wrapper[data-roll]:hover .button-text {
  translate: 0 -100%;
}

/* ---- 11b. the special offer's regular price -----------------------------
   Struck through and dimmed beside the deal price, so the saving reads at a
   glance. The visually hidden "Regular price" tells a screen reader, which
   does not announce a strikethrough, what the first figure is. */
.special-offer-old-price {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- 12. reduced motion ------------------------------------------------
   Visitors who ask for less motion get every section in its finished state
   at once: no reveals, no load sequence, no loops, no scrubs, and the
   hover rolls made instant rather than removed. */
@media (prefers-reduced-motion: reduce) {
  [data-fade-up], [data-fade], [data-fade-left], [data-fade-right],
  [data-label-pop], [data-fade-item], [data-zoom-in], [data-load],
  [data-marquee], [data-spin], [data-sway], .home-hero-main-image,
  .attractive-section-image {
    animation: none !important;
    opacity: 1 !important;
  }

  .button-text, .button-icon, .text-button .split-char,
  .menu-item .containe-size-banner, .cover-size-banner,
  .social-btn-normal-icon, .social-btn-hover-icon, .faq-item-icon,
  .nav-dropdown-icon.megamenu, .char-fade-char, .menu-tab-btn-content,
  .menu-tab-btn-icon {
    transition: none !important;
  }

  .char-fade-char {
    opacity: 1;
  }
}