/* GOLDEN FLASH - 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  Eyeconic design, including the renamed commerce layout
   4  components -- vanilla replacements for the Webflow runtime
      and its IX2 / IX3 interactions

   Fonts: assets/fonts/fonts.css (BDO Grotesk + Inter, self-hosted
   woff2; the export shipped BDO as .otf and pulled Inter from Google
   at runtime). */

/* ======================================================================
   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, .wf-select {
  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, .wf-select::placeholder {
  color: #999;
}
.wf-input:focus, .wf-select:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-select[disabled], .wf-input[readonly], .wf-select[readonly], fieldset[disabled] .wf-input, fieldset[disabled] .wf-select {
  cursor: not-allowed;
}
.wf-input[readonly], .wf-select[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input, textarea.wf-select {
  height: auto;
}
.wf-select {
  background-color: #f3f3f3;
}
.wf-select[multiple] {
  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.wf-richtext-figure-type-image, .richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure.wf-richtext-figure-type-image > div, .richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure.wf-richtext-figure-type-image > figcaption, .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%;
}
.richtext figure.wf-richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.wf-richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.wf-richtext-align-fullwidth > figcaption {
  display: block;
}
.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 the dropped rules used to provide
   ====================================================================== */
/* EYECONIC - the geometry the dropped framework rules used to provide.

   build_css removes every rule in webflow.css that only existed for the
   runtime to drive: the nav overlay, the dropdown's open state, the slider, the lightbox, the dyn-list empty states and the icon webfont.  Some of those
   rules were pure behaviour and are gone for good; the rest carried LAYOUT
   that the design sheet builds on top of, and this file restates that half.

   It is emitted BETWEEN the framework and the design sheet, so every rule here
   sits exactly where the one it replaces used to sit and the design sheet goes
   on overriding it unchanged.  Selectors keep the framework's own specificity
   for the same reason: `:where()` here would be a change to the cascade, not a
   neutral one, and on Aureva a selector that outscored the class it stood in
   for threw a slider arrow across the page.

   Where the markup keeps the framework class (`.wf-slider`, `.wf-dropdown`), the rule is keyed on it.  Where the class went with the runtime that read it
   (`.w-nav`, `.w-nav-menu`, `.w-nav-button`), the rule is re-keyed on the
   design's own class for the same element. */


/* ---------------------------------------------------------------------------
   Retagged controls

   Six things in this template become <button> (the hamburger, both cart
   controls, both tab strips, the three sliders' arrows, the Pages toggle and
   the two video openers).  Crossing into a form control costs them the UA's
   inherited typography, and `font: inherit` does NOT bring back
   letter-spacing, word-spacing or text-transform.

   These use the BARE element selector, not `:where(button)`.  normalize.css
   sets `button { text-transform: none }` at (0, 0, 1), and a zero-specificity
   selector loses to it however late it comes -- which is how a tab label ships
   in the wrong case.  At (0, 0, 1) and later in the sheet this wins over
   normalize and still loses to every design class, which is the position the
   original `<a>` was in. */
button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
/* An <a> that becomes a <button> also stops matching the design sheet's own
   bare `a` rule, which is where every link in this template gets its colour, its 16px, its 120% line height, its medium weight and its lack of
   underline. Those five declarations are restated here, verbatim.

   At (0, 1, 0) and emitted BEFORE the design sheet, this loses to every class
   the element already carries -- which is the position the `a` rule was in.
   Leaving it out made the two category tab strips take their line height from
   `body` (166%) instead, and every product tab measured 7px taller. */
.link-button {
  color: var(--color--secondary);
  font-size: var(--_typography---small);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
  display: inline-block;
}
/* ---------------------------------------------------------------------------
   Navbar  (.w-nav, .w-nav-brand, .w-nav-menu, .w-nav-button)

   `data-collapse="medium"`: the framework hid `.w-nav-menu` and showed
   `.w-nav-button` below 992px, and the runtime then measured the panel and
   animated it open.  Both halves are static here -- the design already sizes
   the open panel (100vh, 90vh below 768px, 85vh below 480px) -- so the closed
   state is a transform on the panel and the open state hangs off the button's
   own `aria-expanded`, in components.hand.css. */
.navbar {
  position: relative;
  z-index: 1000;
}
/* The framework's clearfix, for the float pair below it.  Kept because
   `.navbar` is a block box: as a flex container these two would be flex items
   with real height, which is how one earlier conversion gained 8px of header
   on every page. */
.navbar:before, .navbar:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.navbar:after {
  clear: both;
}
.brand-logo {
  position: relative;
  float: left;
  color: #333;
  text-decoration: none;
}
.nav-menu {
  position: relative;
  float: right;
}
.menu-button {
  float: right;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}
@media screen and (max-width: 991px) {
  .menu-button {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .brand-logo {
    padding-left: 10px;
  }
}
/* ---------------------------------------------------------------------------
   Dropdown  (.w-dropdown and friends -- the class survives in the markup)

   `.wf-dropdown-list` keeps `display: none`; components.hand.css opens it from
   the toggle's `aria-expanded` rather than from a `.w--open` the runtime used
   to add. */
.wf-dropdown {
  z-index: 900;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}
.wf-dropdown-toggle, .wf-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}
.wf-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}
.wf-dropdown-link {
  padding: 10px 20px;
  display: block;
}
.wf-dropdown-list {
  min-width: 100%;
  background: #ddd;
  display: none;
  position: absolute;
}
/* The chevron box.  The framework filled it with a glyph from its own
   `webflow-icons` webfont; that font is dropped with the rest of the runtime
   and transform.py puts an <svg> of the same shape in the same box. */
.wf-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  inset: 0 0 0 auto;
}
.dropdown-chevron {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
/* ---------------------------------------------------------------------------
   Sliders  (.w-slider and friends -- the classes survive in the markup)

   The three carousels here are all `animation: slide`, `infinite: true`, `duration: 500` with autoplay off, so the track below is a flex row that
   main.js translates by whole slides.  `white-space: nowrap` on the mask and
   `display: inline-block` on the slide were the framework's way of laying the
   same row out; a flex row does it without the inline-block whitespace, and
   the slide keeps `width: 100%` so a mask still shows exactly one. */
.wf-slider {
  height: 300px;
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #ddd;
  position: relative;
}
.wf-slider-mask {
  z-index: 1;
  height: 100%;
  display: block;
  position: relative;
  inset: 0 0 auto;
  overflow: hidden;
}
.wf-slide {
  vertical-align: top;
  width: 100%;
  height: 100%;
  text-align: left;
  white-space: normal;
  flex: 0 0 100%;
  position: relative;
}
.wf-slider-arrow-left, .wf-slider-arrow-right {
  width: 80px;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.wf-slider-arrow-left {
  z-index: 3;
  right: auto;
}
.wf-slider-arrow-right {
  z-index: 4;
  left: auto;
}
/* ---------------------------------------------------------------------------
   Accessibility helpers this build adds

   `.skip-link` is the one keyboard shortcut past the header; `.visually-hidden`
   carries the <h1> on the four pages that show no title of their own. */
.skip-link {
  z-index: 100000;
  color: #171717;
  background-color: #ffe55b;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
.visually-hidden {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
/* Anything focused by keyboard gets a visible ring.  The framework shipped
   `:focus { outline: 0 }` on its toggle, its links and its slider arrows; the
   replacements are real controls, so the ring is restored where a pointer will
   never see it. */
:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 2px;
}
/* ======================================================================
   3. Eyeconic design
   ====================================================================== */
:root {
  --color--whtie: white;
  --font--primary-font: Inter, sans-serif;
  --color--secondary: #171717;
  --_typography---small: 16px;
  --_line-height---line-height-jumbo: 166%;
  --font-weight--regular: 400;
  --padding-none: 0px;
  --_typography---h1: 120px;
  --_line-height---line-height-s: 100%;
  --font-weight--medium: 500;
  --_letter-speacing---letter-speacing-xl: -3.6px;
  --_typography---h2: 80px;
  --_letter-speacing---letter-speacing-l: -1.6px;
  --_typography---h3: 40px;
  --font-weight--semi-blod: 600;
  --_letter-speacing---letter-speacing-m: -.8px;
  --_typography---h4: 24px;
  --_line-height---line-height-l: 133%;
  --_letter-speacing---letter-speacing-s: -.48px;
  --_line-height---line-height-xl: 125%;
  --_typography---medium: 18px;
  --_line-height---line-height-m: 120%;
  --color--ash: #17171799;
  --full-size: 100%;
  --padding-m: 24px;
  --padding-l: 40px;
  --padding-xs: 20px;
  --color--gray: #f7f6f3;
  --_line-height---line-height-xxxl: 150%;
  --color--transparent: transparent;
  --padding-xxxl: 120px;
  --padding-jumbo: 198px;
  --padding-xl: 80px;
  --color--black-light: #111;
  --padding-xxl: 60px;
  --color--primary-color: #ffe55b;
  --color--black-dark: #0b0d13;
  --_typography---large: 20px;
  --color--black: black;
  --_line-height---line-height-xxl: 140%;
  --padding-s: 38px;
  --border-radius--border-xl: 999px;
  --color--transparent-black: #0000001a;
  --font--secondary: "Inter Tight", sans-serif;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.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-leftSidebar {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  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-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.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-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartoptionpillgroup {
  margin-bottom: 10px;
  display: flex;
}
.wf-commerce-commerceaddtocartoptionpill {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
  margin-right: 10px;
  padding: 8px 15px;
}
.wf-commerce-commerceaddtocartoptionpill.is-selected {
  color: #fff;
  background-color: #000;
}
.wf-commerce-commerceaddtocartoptionpill.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartquantityinput {
  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-commerceaddtocartquantityinput::placeholder {
  color: #999;
}
.wf-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.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-commerceaddtocartbutton.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.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-commercecartquantity, .wf-commerce-commerceaddtocartquantityinput, .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--whtie);
  font-family: var(--font--primary-font);
  color: var(--color--secondary);
  font-size: var(--_typography---small);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--regular);
  --_letter-speacing---letter-speacing-xl: -3.6px;
  --_letter-speacing---letter-speacing-l: -1.6px;
  --_letter-speacing---letter-speacing-m: -.8px;
  --_letter-speacing---letter-speacing-s: -.48px;
  --_typography---small: 16px;
  --_typography---h1: 120px;
  --_typography---h2: 80px;
  --_typography---h3: 40px;
  --_typography---h4: 24px;
  --_typography---medium: 18px;
  --_typography---large: 20px;
  ---mode--collection-f645ad43-c800-2f28-c97a-b8e998364993: base;
  --color--whtie: white;
  --font--primary-font: Inter, sans-serif;
  --color--secondary: #171717;
  --font-weight--regular: 400;
  --padding-none: 0px;
  --font-weight--medium: 500;
  --font-weight--semi-blod: 600;
  --color--ash: #17171799;
  --full-size: 100%;
  --padding-m: 24px;
  --padding-l: 40px;
  --padding-xs: 20px;
  --color--gray: #f7f6f3;
  --color--transparent: transparent;
  --padding-xxxl: 120px;
  --padding-jumbo: 198px;
  --padding-xl: 80px;
  --color--black-light: #111;
  --padding-xxl: 60px;
  --color--primary-color: #ffe55b;
  --color--black-dark: #0b0d13;
  --color--black: black;
  --padding-s: 38px;
  --border-radius--border-xl: 999px;
  --color--transparent-black: #0000001a;
  --font--secondary: "Inter Tight", sans-serif;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  margin-top: var(--padding-none);
  margin-bottom: var(--padding-none);
  font-size: var(--_typography---h1);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_letter-speacing---letter-speacing-xl);
  text-transform: uppercase;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--padding-none);
  margin-bottom: var(--padding-none);
  font-size: var(--_typography---h2);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_letter-speacing---letter-speacing-l);
  text-transform: uppercase;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--padding-none);
  margin-bottom: var(--padding-none);
  font-size: var(--_typography---h3);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-m);
  text-transform: uppercase;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--padding-none);
  margin-bottom: var(--padding-none);
  color: var(--color--secondary);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--padding-none);
  margin-bottom: var(--padding-none);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  margin-bottom: var(--padding-none);
  color: var(--color--ash);
}
a {
  color: var(--color--secondary);
  font-size: var(--_typography---small);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
  display: inline-block;
}
ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
img {
  width: var(--full-size);
  height: var(--full-size);
  max-height: var(--full-size);
  max-width: var(--full-size);
  display: inline-block;
}
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin-bottom: 10px;
}
.navbar {
  z-index: 999999999;
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
  background-color: #fff9;
  position: absolute;
  inset: 0% 0% auto;
}
.container {
  max-width: 1310px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container.h100 {
  height: 100%;
}
.nav-menu-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav-link-block {
  height: 24px;
  color: var(--color--secondary);
  font-size: var(--_typography---small);
  line-height: var(--_line-height---line-height-xxxl);
  font-weight: var(--font-weight--medium);
  letter-spacing: -.16px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  transition: color .4s;
  overflow: hidden;
}
.section {
  padding-top: var(--padding-xxxl);
  padding-bottom: var(--padding-xxxl);
}
.section.style {
  padding-top: var(--padding-jumbo);
  padding-bottom: var(--padding-xl);
}
.section.footer {
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-none);
  background-color: var(--color--black-light);
}
.section.changelog {
  padding-top: var(--padding-jumbo);
  padding-bottom: var(--padding-xl);
}
.section.license {
  padding-top: var(--padding-jumbo);
}
.section.contact {
  padding-top: 96px;
  padding-bottom: var(--padding-none);
  overflow: hidden;
}
.section.follow {
  padding-top: var(--padding-none);
  padding-bottom: var(--padding-none);
}
.section.more-contact {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-l);
  overflow: hidden;
}
.section.shop {
  background-image: url('../images/Shop-BG.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 280px;
  padding-bottom: 200px;
}
.section.about {
  padding-top: var(--padding-jumbo);
  background-color: var(--color--gray);
}
.section.life {
  background-color: var(--color--gray);
}
.section.next {
  height: 1138px;
  padding-bottom: 200px;
  position: relative;
  overflow: hidden;
}
.section.hero {
  height: 100vh;
  padding-top: 140px;
  padding-bottom: var(--padding-xxl);
  background-image: url('../images/Hero-Image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}
.section.confidence {
  background-color: var(--color--primary-color);
  font-size: var(--_typography---medium);
}
.section.reach {
  padding-bottom: var(--padding-xxl);
  background-image: url('../images/Reach-Image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}
.section.customers {
  background-color: var(--color--gray);
  overflow: hidden;
}
.section.discover {
  background-color: var(--color--gray);
}
.section.testimonial {
  background-color: var(--color--primary-color);
}
.section.blog, .section.blog-single {
  padding-top: var(--padding-jumbo);
  padding-bottom: var(--padding-none);
  background-color: var(--color--gray);
}
.section.blog-rich {
  padding-top: var(--padding-xxl);
}
.section.checkout {
  padding-top: var(--padding-xxxl);
}
.section.tricker {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-l);
  background-color: var(--color--primary-color);
  overflow: hidden;
}
.style-wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.style-top-wrap {
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.style-title {
  text-align: center;
}
.style-details {
  max-width: 800px;
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  font-weight: var(--font-weight--regular);
  text-align: center;
}
.style-wrap {
  margin-top: var(--padding-l);
}
.style-single-wrap {
  padding: var(--padding-l);
  background-color: var(--color--gray);
  border-bottom: 1px solid #0000001a;
  transition: all .4s;
}
.style-single-wrap:hover {
  background-color: var(--color--primary-color);
}
.style-single-title-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.style-single-title {
  text-align: center;
}
.style-color-wrap {
  margin-top: var(--padding-l);
  padding: var(--padding-l) var(--padding-l) var(--padding-xl);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--color--whtie);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-single-wrap {
  background-color: var(--color--primary-color);
  height: 147px;
  color: var(--color--black-dark);
  justify-content: center;
  align-items: center;
  display: flex;
}
.color-single-wrap._02 {
  background-color: var(--color--secondary);
  color: var(--color--whtie);
}
.color-single-wrap._03 {
  border: 1px solid var(--color--ash);
  background-color: var(--color--whtie);
}
.color-single-wrap._04 {
  background-color: var(--color--ash);
  color: var(--color--whtie);
}
.style-button-wrap {
  margin-top: var(--padding-l);
  padding: var(--padding-xl) var(--padding-l);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--color--whtie);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.style-typography-wrap {
  margin-top: var(--padding-l);
  padding: var(--padding-l);
  grid-column-gap: var(--padding-xxl);
  grid-row-gap: var(--padding-xxl);
  background-color: var(--color--whtie);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.typography-single-wrap {
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  flex-flow: column;
  display: flex;
}
.typography-details-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.typography-single-details {
  color: var(--color--secondary);
}
.paragraph-02 {
  font-size: var(--_typography---medium);
}
.paragraph-01 {
  font-size: var(--_typography---large);
}
.footer-grid-wrap {
  grid-column-gap: 166px;
  grid-row-gap: 166px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.849fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.footer-right-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.footer-form-title {
  color: var(--color--whtie);
  font-size: var(--_typography---small);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
  margin-top: 45px;
  margin-bottom: 16px;
}
.footer-form-block {
  margin-bottom: 0;
}
.footer-form {
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  flex-flow: column;
  display: flex;
}
.footer-email-field {
  border: 1px solid var(--color--whtie);
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--whtie);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--regular);
  margin-bottom: 0;
  padding: 17px;
}
.footer-email-field:focus {
  border-color: var(--color--primary-color);
}
.footer-email-field::placeholder {
  color: #fff6;
}
.footer-submit-button {
  background-color: var(--color--whtie);
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-align: center;
  letter-spacing: -.54px;
  padding-top: 23px;
  padding-bottom: 23px;
  transition: all .4s;
}
.footer-submit-button:hover {
  background-color: var(--color--primary-color);
}
.success-message {
  background-color: var(--color--primary-color);
  color: var(--color--secondary);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
}
.error-message {
  color: var(--color--whtie);
  text-align: center;
  background-color: red;
  margin-top: 15px;
  padding: 20px 15px;
}
.footer-single-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-all-menu-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-single-title {
  color: var(--color--primary-color);
  font-size: var(--_typography---medium);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
}
.foooter-signle-link {
  color: var(--color--whtie);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--regular);
  transition: all .3s;
}
.foooter-signle-link:hover {
  color: var(--color--primary-color);
  transform: translate(5px);
}
.foooter-signle-link[aria-current="page"], .foooter-signle-link.is-active {
  color: var(--color--primary-color);
}
.copyright-wrapper {
  margin-top: var(--padding-l);
  background-color: var(--color--secondary);
  padding-top: 30px;
  padding-bottom: 30px;
  overflow: hidden;
}
.copyright-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.copyright-text {
  color: var(--color--gray);
  line-height: var(--_line-height---line-height-m);
}
.copyright-link {
  color: var(--color--whtie);
  transition: all .3s;
}
.copyright-link:hover {
  color: var(--color--primary-color);
}
.changelog-wrapper {
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}
.changelog-wrap {
  margin-top: var(--padding-l);
}
.changelog-single-wrap {
  padding: var(--padding-l);
  background-color: var(--color--whtie);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.changelog-single-title {
  color: #1f1f1f;
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.changelog-single-date {
  margin-top: 10px;
  margin-bottom: var(--padding-m);
  color: #1f1f1f;
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-jumbo);
}
.changelog-all-list-wrap {
  flex-flow: column;
  display: flex;
}
.changelog-single-list {
  color: #6d6d6d;
  font-size: var(--_typography---medium);
  line-height: 130%;
  font-weight: var(--font-weight--regular);
}
.chagnelog-details {
  max-width: 645px;
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  font-weight: var(--font-weight--regular);
  text-align: center;
}
.license-single-wrap {
  margin-top: var(--padding-l);
  padding: var(--padding-xl) var(--padding-l) var(--padding-l);
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  background-color: var(--color--whtie);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.license-image {
  max-width: 130px;
}
.license-single-link {
  transition: color .3s;
}
.license-single-link:hover {
  color: var(--color--ash);
}
.contact-wrapper {
  position: relative;
  overflow: hidden;
}
.contact-image-block {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-image-wrap {
  z-index: 1;
  position: relative;
  overflow: hidden;
}
.contact-single-image {
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  height: 818px;
}
.contact-details-block {
  position: absolute;
  inset: 60px 0% auto;
}
.contact-form-wrapper {
  display: flex;
}
.contact-blank-wrap {
  width: 100%;
  max-width: 670px;
  margin-right: 80px;
}
.contact-form-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  width: 100%;
  max-width: 560px;
  display: flex;
}
.contact-title {
  color: var(--color--secondary);
  font-size: var(--_typography---h2);
  line-height: var(--_line-height---line-height-s);
}
.gray-color {
  color: var(--color--ash);
  display: inline-block;
}
.contact-form-block {
  margin-bottom: var(--padding-none);
}
.contact-form {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  display: flex;
}
.contact-text-field {
  border: 1px solid var(--color--ash);
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--regular);
  background-image: url('../images/Massage-Icon.svg');
  background-position: 17px;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 0;
  padding: 17px 17px 17px 54px;
}
.contact-text-field:focus {
  border-color: var(--color--primary-color);
}
.contact-text-field::placeholder {
  color: var(--color--ash);
}
.contact-text-field._01 {
  background-image: url('../images/User-Icon.svg');
}
.contact-text-field._02 {
  background-image: url('../images/Massage-Icon.svg');
}
.contact-text-field._03 {
  background-image: url('../images/Call-Icon.svg');
}
.contact-all-field-wrap {
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  flex-flow: column;
  display: flex;
}
.contact-massage-area {
  border: 1px solid var(--color--ash);
  background-color: var(--color--transparent);
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 170px;
  min-height: 170px;
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--regular);
  background-image: url('../images/Massage.svg');
  background-position: 17px 17px;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 0;
  padding: 17px 17px 17px 54px;
}
.contact-massage-area:focus {
  border-color: var(--color--primary-color);
}
.contact-massage-area::placeholder {
  color: var(--color--ash);
}
.contact-submit-button {
  border: 1px solid var(--color--secondary);
  background-color: var(--color--whtie);
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  padding-top: 18px;
  padding-bottom: 18px;
  transition: all .3s;
}
.contact-submit-button:hover {
  border-color: var(--color--primary-color);
  background-color: var(--color--primary-color);
}
.follow-wrapper {
  padding-top: 534px;
  padding-bottom: 392px;
  position: relative;
  overflow: hidden;
}
.follow-wrap {
  z-index: 1;
  max-width: 971px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.follow-title {
  text-align: center;
}
.more-contact-grid-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.more-single-wrap {
  background-image: url('../images/Cta-Image-01.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 160px 30px 30px;
}
.more-single-wrap._02 {
  background-image: url('../images/Cta-Image-02.avif');
}
.more-single-wrap._03 {
  background-image: url('../images/Cta-Image-03.avif');
}
.more-single-title {
  color: var(--color--black-dark);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--regular);
  letter-spacing: -.54px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.more-contact-link {
  color: #262626;
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  letter-spacing: -.72px;
}
.more-contact-link._01 {
  max-width: 253px;
}
.shop-title-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.shop-title {
  color: var(--color--whtie);
  text-align: center;
}
.yellow {
  color: var(--color--primary-color);
  display: inline-block;
}
.product-wrap {
  position: relative;
}
.product-tabs-menu {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}
.product-tabs-content {
  margin-top: var(--padding-l);
}
.product-tab-link {
  background-color: var(--color--whtie);
  text-transform: uppercase;
  border: 1px solid #bababa;
  padding: 20px 30px;
}
.product-tab-link[aria-current="page"], .product-tab-link.is-active {
  border-color: var(--color--black);
  background-color: var(--color--whtie);
}
.product-grid-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-xxl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.product-item-wrap {
  overflow: hidden;
}
.product-image-wrap {
  display: flex;
  position: relative;
  overflow: hidden;
}
.product-image {
  width: 100%;
}
.product-button {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--color--secondary);
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--medium);
  text-align: center;
  letter-spacing: -.6px;
  background-color: #fff9;
  justify-content: center;
  align-items: center;
  padding: 20px 80px;
  display: flex;
  position: absolute;
  inset: auto 24px 24px;
}
.button-arrrow {
  width: 28px;
}
.product-title-price-wrap {
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
  border-bottom: 1px solid var(--color--ash);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.product-title {
  font-family: var(--font--primary-font);
  color: var(--color--secondary);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
  transition: color .3s;
}
.product-title:hover {
  color: var(--color--ash);
}
.product-price {
  color: var(--color--ash);
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-xxl);
  font-weight: var(--font-weight--regular);
}
.about-top-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.about-details {
  max-width: 360px;
  color: var(--color--ash);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--regular);
}
.about-details._01 {
  max-width: 338px;
}
.about-wrap {
  margin-top: var(--padding-xl);
}
.about-light-box {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.about-light-box-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.play-icon {
  width: 114px;
  max-width: 114px;
  max-height: 114px;
  position: absolute;
}
.story-top-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.story-wrap {
  margin-top: var(--padding-xl);
}
.story-title {
  flex: none;
}
.story-details {
  width: 100%;
  max-width: 620px;
  color: var(--color--ash);
  font-size: var(--_typography---medium);
}
.story-grid-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.story-left-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.story-right-wrap {
  position: relative;
  overflow: hidden;
}
.story-image {
  width: 100%;
}
.story-image-wrap {
  position: relative;
  overflow: hidden;
}
.story-single-image {
  width: 100%;
}
.story-single-details-wrap {
  margin-top: var(--padding-m);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.story-single-title {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.story-single-details {
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--regular);
}
.vision-wrap {
  margin-top: var(--padding-xl);
}
.vision-grid-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.vision-single-wrap {
  padding: var(--padding-m);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  background-color: var(--color--gray);
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}
.vision-icon-wrap {
  z-index: 1;
  border-radius: var(--border-radius--border-xl);
  background-color: var(--color--primary-color);
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  display: flex;
  position: relative;
}
.vision-icon {
  width: 24px;
}
.vision-details-wrap {
  z-index: 1;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  display: flex;
  position: relative;
}
.vision-single-title {
  color: var(--color--secondary);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.vision-single-details {
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-jumbo);
}
.vision-single-bg {
  border-radius: var(--border-radius--border-xl);
  background-color: var(--color--secondary);
  width: 0;
  height: 0;
  position: absolute;
  inset: -35% -30% auto auto;
}
.life-top-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.life-wrap {
  margin-top: var(--padding-xxl);
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  display: flex;
}
.life-details {
  max-width: 329px;
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.life-title {
  text-align: right;
  width: 100%;
  max-width: 830px;
}
.life-image-wrap {
  position: sticky;
  top: 140px;
}
.life-image-wrap._02 {
  top: 200px;
}
.life-image-wrap._03 {
  top: 260px;
}
.life-image {
  width: 100%;
}
.next-wrapper {
  z-index: 1;
  max-width: 766px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.next-blank-wrap {
  height: 538px;
}
.next-wrap {
  padding: var(--padding-l);
  background-color: var(--color--whtie);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.next-blank-image {
  width: 100%;
}
.next-title {
  color: var(--color--secondary);
  text-align: center;
}
.next-details {
  margin-top: 15px;
  margin-bottom: var(--padding-l);
  color: var(--color--ash);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--regular);
  text-align: center;
}
.next-buton-wrap {
  display: flex;
}
.primary-button {
  border: 2px solid var(--color--secondary);
  color: var(--color--secondary);
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--medium);
  text-align: center;
  text-transform: uppercase;
  padding: 20px 30px;
  position: relative;
  overflow: hidden;
}
.primary-btn-wrap {
  z-index: 1;
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.primary-btn-icon {
  max-width: 30px;
}
.primary-btn-bg {
  background-color: var(--color--black);
  position: absolute;
  inset: auto 0% 0%;
}
.next-image {
  object-fit: cover;
  width: 100%;
  height: 115%;
  max-height: 115%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}
.hero-wrapper {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  display: flex;
}
.hero-top-wrap {
  width: var(--full-size);
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.hero-bottom-wrap {
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  display: flex;
}
.hero-left-wrap {
  max-width: 275px;
  color: var(--color--whtie);
}
.hero-title {
  max-width: 644px;
  color: var(--color--whtie);
}
.hero-lightbox {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 374px;
  display: flex;
  overflow: hidden;
}
.hero-lightbox-image {
  width: 100%;
  max-width: 150px;
}
.hero-play-icon {
  max-width: 30px;
  max-height: 90px;
}
.explore-wrapper {
  overflow: hidden;
}
.explore-top-wrap {
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 12px;
  display: flex;
}
.explore-title {
  max-width: 758px;
}
.explore-line {
  width: 100%;
  height: 1px;
  margin-top: var(--padding-xl);
  margin-bottom: var(--padding-xl);
  background-color: var(--color--ash);
}
.confidence-top-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.confidence-left-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 330px;
  display: flex;
}
.confidence-left-image {
  width: 100%;
  max-width: 195px;
}
.confidence-left-details {
  max-width: 360px;
  color: var(--color--black-dark);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--regular);
}
.confidence-title {
  text-align: right;
  max-width: 812px;
}
.confidence-line {
  width: 100%;
  height: 1px;
  margin-top: var(--padding-xxl);
  margin-bottom: var(--padding-xxl);
  background-color: var(--color--secondary);
}
.comfort-wrap {
  grid-column-gap: var(--padding-xl);
  grid-row-gap: var(--padding-xl);
  grid-template-rows: auto;
  grid-template-columns: 1.206fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.comfort-right-wrap {
  position: relative;
  overflow: hidden;
}
.comfort-right-image {
  width: 100%;
}
.comfort-top-wrap {
  grid-column-gap: var(--padding-m);
  grid-row-gap: var(--padding-m);
  flex-flow: column;
  display: flex;
}
.comfort-title {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.comfort-details {
  color: var(--color--black-dark);
  font-size: var(--_typography---medium);
}
.comfort-img-wrap {
  margin-top: var(--padding-l);
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  grid-template-rows: auto;
  grid-template-columns: 1.265fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.comfort-single-image {
  position: relative;
  overflow: hidden;
}
.comfort-image {
  width: 100%;
}
.comfort-line {
  width: 100%;
  height: 1px;
  margin-top: var(--padding-l);
  margin-bottom: var(--padding-l);
  background-color: #17171733;
}
.comfort-single-details {
  color: var(--color--secondary);
}
.confidence-wrap {
  margin-top: var(--padding-xxl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.confidence-single-wrap {
  padding: var(--padding-l);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-top: 1px solid #17171733;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  flex-flow: column;
  display: flex;
}
.confidence-single-wrap._01 {
  border-top-left-radius: 0;
}
.confidence-single-wrap._03 {
  border-top-right-radius: 0;
}
.confidence-single-wrap._02 {
  border-left: 1px solid #17171733;
  border-right: 1px solid #17171733;
}
.confidence-single-title {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.confidence-single-details {
  color: var(--color--black-dark);
}
.reach-top-wrap {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.reach-title {
  max-width: 656px;
  color: var(--color--whtie);
}
.reach-button-wrap {
  display: flex;
}
.reach-tricker {
  margin-top: 104px;
}
.reach-flex-wrap {
  display: flex;
}
.reach-single-wrap {
  flex: none;
  display: flex;
}
.reach-item-wrap {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  background-color: var(--color--whtie);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  margin-right: 16px;
  padding: 36px 64px;
  display: flex;
}
.reach-single-icon {
  width: 40px;
}
.reach-single-text {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.customers-wrapper {
  overflow: hidden;
}
.coustomer-line {
  width: 100%;
  height: 1px;
  margin-top: var(--padding-xxl);
  margin-bottom: var(--padding-xxl);
  background-color: var(--color--ash);
}
.coustomer-slider {
  background-color: var(--color--transparent);
  height: auto;
}
.coustomer-slider-mask {
  max-width: 410px;
  overflow: visible;
}
.coustomer-single-slide {
  margin-right: var(--padding-m);
}
.coustomer-slide-wrap {
  padding: var(--padding-m);
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  background-color: var(--color--whtie);
  flex-flow: column;
  display: flex;
}
.display-none {
  display: none;
}
.coustome-quote-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.coustome-quote-image {
  max-width: 24px;
}
.coustome-quote-image.star {
  max-width: 108px;
}
.coustome-single-details {
  font-size: var(--_typography---medium);
}
.coustome-author-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.coustome-author-wrap._01 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.coustome-author-img {
  width: 48px;
}
.coustome-author-img._01 {
  width: 64px;
}
.coustome-author-details-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.coustome-author-pst {
  color: var(--color--ash);
}
.coustome-author-pst._01 {
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
}
.coustome-author-name {
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
}
.coustome-author-name._01 {
  font-size: var(--_typography---h4);
  font-weight: var(--font-weight--semi-blod);
}
.slider-left-arrow {
  border-radius: var(--border-radius--border-xl);
  background-color: var(--color--transparent);
  border: 1px solid #1717171a;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  transition: all .4s;
  display: flex;
  inset: -290px 100px auto auto;
}
.slider-left-arrow:hover {
  border-color: var(--color--primary-color);
  background-color: var(--color--primary-color);
}
.slider-left-arrow._01 {
  top: -320px;
}
.slider-right-arrow {
  border-radius: var(--border-radius--border-xl);
  background-color: var(--color--transparent);
  border: 1px solid #0b0d131a;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  transition: all .4s;
  display: flex;
  inset: -290px 0% auto auto;
}
.slider-right-arrow:hover {
  border-color: var(--color--primary-color);
  background-color: var(--color--primary-color);
}
.slider-right-arrow._02 {
  top: -320px;
}
.slider-arrow {
  width: 32px;
  height: 32px;
}
.everyone-wrap {
  margin-top: var(--padding-xxl);
}
.everyone-grid-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.everyone-single-wrap {
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}
.everyone-single-image {
  width: 100%;
}
.everyone-ctg-wrap {
  position: absolute;
  inset: auto 22px 22px;
}
.everyone-button {
  border: 1px solid var(--color--gray);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  width: 100%;
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-s);
  letter-spacing: -.4px;
  text-transform: uppercase;
  background-color: #fff9;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.everyone-btn-wrap {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.everyone-btn-icon {
  max-width: 30px;
}
.everyone-btn-bg {
  background-color: var(--color--whtie);
  position: absolute;
  inset: auto 0% 0%;
}
.discover-top-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.discover-title {
  z-index: 1;
  text-align: center;
  max-width: 857px;
  position: relative;
}
.discove-details-wrap {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1044px;
  margin-top: -75px;
  margin-left: 130px;
  display: flex;
}
.discove-details {
  max-width: 296px;
  color: var(--color--ash);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.discover-details-image {
  width: 100%;
  max-width: 177px;
}
.discover-grid-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.discover-btn-wrap {
  margin-top: var(--padding-xxl);
  justify-content: center;
  align-items: center;
  display: flex;
}
.find-top-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.find-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  display: flex;
}
.find-title {
  max-width: 580px;
}
.find-right-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.find-right-image {
  width: 100%;
  max-width: 160px;
}
.find-right-details {
  max-width: 233px;
  color: var(--color--ash);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.find-card-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  background-color: var(--color--gray);
  justify-content: space-between;
  align-items: center;
  padding: 46px 140px;
  display: flex;
  position: sticky;
  top: 140px;
}
.find-card-wrap._02 {
  background-color: var(--color--whtie);
  position: sticky;
  top: 200px;
}
.find-card-wrap._03 {
  background-color: var(--color--primary-color);
  position: sticky;
  top: 260px;
}
.find-card-left-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 574px;
  display: flex;
}
.find-card-right-wrap {
  width: 100%;
  max-width: 182px;
  transform: rotate(-14deg);
}
.find-card-title {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.find-card-details {
  color: var(--color--black-dark);
  font-size: var(--_typography---medium);
}
.find-card-image {
  width: 100%;
}
.explore-slider {
  background-color: var(--color--transparent);
  height: auto;
}
.explore-slider-mask {
  width: 100%;
  max-width: 400px;
  overflow: visible;
}
.explore-single-slide {
  margin-right: var(--padding-l);
}
.testimonial-top-wrap {
  grid-column-gap: var(--padding-m);
  grid-row-gap: var(--padding-m);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.testimonial-wrap {
  margin-top: var(--padding-xl);
}
.happy-card-wrap {
  padding: var(--padding-m);
  background-color: var(--color--whtie);
}
.happy-card-icon-wrap {
  border-radius: var(--border-radius--border-xl);
  background-color: var(--color--primary-color);
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  display: flex;
}
.happy-counter {
  margin-top: 90px;
  margin-bottom: 15px;
}
.happy-card-title {
  color: var(--color--ash);
  font-size: var(--_typography---medium);
}
.happy-card-icon {
  width: 24px;
}
.testimonial-slider {
  background-color: var(--color--transparent);
  height: auto;
  padding-bottom: 150px;
}
.testimonial-slider-mask {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-left-arrow {
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  width: 15%;
  height: 72px;
  color: var(--color--ash);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  inset: auto auto 0% 0%;
}
.testimonial-left-arrow._01 {
  justify-content: flex-end;
  align-items: center;
  inset: auto 0% 0% auto;
}
.testimonial-single-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.testimonial-quotes {
  max-width: 51px;
}
.testimonial-review {
  text-align: center;
  text-transform: none;
  margin-top: 32px;
  margin-bottom: 32px;
}
.testimonial-arrow {
  border-radius: var(--border-radius--border-xl);
  border: 1px solid #1717171a;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  display: flex;
}
.testimonial-arrow-icon {
  width: 32px;
  height: 32px;
}
.testimonial-black-line {
  background-color: #ccb749;
  justify-content: flex-start;
  align-items: center;
  width: 870px;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: auto 0% 36px;
}
.testimonial-gray-line {
  background-color: var(--color--black);
  width: 25%;
  height: 2px;
}
._404-wrapper {
  height: 100vh;
  padding: var(--padding-xxl) 15px;
}
._404-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}
._404-image {
  width: 460px;
  height: 282px;
}
._404-title {
  margin-top: var(--padding-l);
  margin-bottom: var(--padding-xs);
  text-align: center;
}
._404-details {
  max-width: 645px;
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  text-align: center;
}
._404-button-wrap {
  margin-top: var(--padding-l);
  display: flex;
}
.blog-top-item-wrap {
  grid-column-gap: var(--padding-xl);
  grid-row-gap: var(--padding-xl);
  flex-flow: column;
  display: flex;
}
.blog-top-flex-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.blog-top-img-wrap {
  display: flex;
  position: relative;
  overflow: hidden;
}
.blog-top-img {
  width: 100%;
}
.blog-top-left-wrap {
  flex-flow: column;
  justify-content: space-between;
  max-width: 540px;
  display: flex;
}
.blog-top-right-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  display: flex;
}
.blog-top-details {
  font-size: var(--_typography---medium);
}
.blog-top-title {
  color: var(--color--secondary);
  font-size: var(--_typography---h3);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-m);
  text-transform: uppercase;
}
.blog-top-btm-wrap {
  grid-column-gap: var(--padding-m);
  grid-row-gap: var(--padding-m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-top-btm-wrap._01 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.blog-top-btm-single {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-top-btm-img._01 {
  opacity: .6;
  width: 20px;
}
.blog-top-btm-img.author {
  width: 32px;
}
.blog-top-btm-author {
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-xxl);
  font-weight: var(--font-weight--medium);
  letter-spacing: -.54px;
}
.blog-top-btm-author._01 {
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--regular);
  letter-spacing: 0;
}
.blog-pb-date {
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-xxl);
  font-weight: var(--font-weight--regular);
}
.more-blog-wrapper {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.more-blog-tabs {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.more-blog-tabs-menu {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  width: 100%;
  max-width: 214px;
  margin-top: 48px;
  display: flex;
}
.more-blog-tabs-content {
  width: 100%;
  max-width: 856px;
  margin-left: 160px;
}
.more-blog-tab-link {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--color--transparent);
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  font-weight: var(--font-weight--regular);
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  display: flex;
}
.more-blog-tab-link[aria-current="page"], .more-blog-tab-link.is-active {
  background-color: var(--color--transparent);
  color: var(--color--secondary);
}
.more-blog-tab-img {
  aspect-ratio: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.more-blog-tab-img-01 {
  aspect-ratio: 1;
  object-fit: fill;
}
.more-blog-tab-img-02 {
  aspect-ratio: 1;
  position: absolute;
}
.more-blog-all-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  display: flex;
}
.more-blog-flex-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  border-bottom: 1px solid #17171733;
  padding-bottom: 40px;
  display: flex;
}
.more-blog-left-wrap {
  max-width: 258px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.more-blog-right-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 558px;
  display: flex;
}
.more-blog-image {
  width: 258px;
}
.more-blog-title {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.more-blog-details {
  margin-top: 12px;
  margin-bottom: var(--padding-l);
  color: var(--color--ash);
  font-size: var(--_typography---medium);
}
.more-blog-date-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-single-wrapper {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.blog-single-details {
  margin-top: var(--padding-xs);
  margin-bottom: var(--padding-m);
  font-size: var(--_typography---medium);
}
.blog-rich-text p {
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-jumbo);
}
.blog-rich-text h5:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--semi-blod);
  margin-top: 58px;
  margin-bottom: 14px;
}
.blog-rich-text blockquote {
  background-color: var(--color--gray);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-jumbo);
  font-weight: var(--font-weight--semi-blod);
  text-transform: uppercase;
  border-left-style: none;
  margin-bottom: 0;
  padding: 32px;
}
.blog-rich-text figure {
  margin-top: 40px;
  margin-bottom: 58px;
}
.blog-rich-text ul {
  margin-top: var(--padding-xs);
  margin-bottom: var(--padding-none);
  color: var(--color--ash);
  flex-flow: column;
  padding-left: 25px;
  display: flex;
}
.blog-thimble-image {
  margin-top: var(--padding-m);
  position: relative;
  overflow: hidden;
}
.blog-thimble-img {
  object-fit: cover;
  width: 100%;
  height: 410px;
}
.blog-share-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  margin-top: 58px;
  display: flex;
}
.blog-share-wrap.paragraph-01 {
  margin-top: 0;
}
.blog-share-title {
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-xxl);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.blog-share-title.paragraph-01 {
  font-size: var(--_typography---h4);
  font-weight: var(--font-weight--medium);
  letter-spacing: -.72px;
}
.blog-all-share-wrap {
  grid-column-gap: var(--padding-xs);
  grid-row-gap: var(--padding-xs);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-share-link {
  transition: transform .4s;
}
.blog-share-link:hover {
  transform: translate(0, -10px);
}
.blog-share-image {
  transition: filter .4s;
}
.blog-share-image:hover {
  filter: invert();
}
.password-form-wrap {
  margin-top: var(--padding-jumbo);
  margin-bottom: var(--padding-xxxl);
}
.password-form {
  max-width: 675px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.password-form-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.password-icon {
  width: 248px;
}
.password-title {
  text-align: center;
  margin-top: -28px;
}
.password-details {
  margin-top: var(--padding-xs);
  margin-bottom: var(--padding-l);
  color: var(--color--ash);
  font-size: var(--_typography---medium);
  font-weight: var(--font-weight--regular);
  text-align: center;
}
.password-field-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  width: 100%;
  display: flex;
}
.password-text-field {
  border: 1px solid var(--color--ash);
  background-color: var(--color--whtie);
  height: auto;
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
  background-image: url('../images/Lock.svg');
  background-position: 17px;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 0;
  padding: 17px 17px 17px 55px;
}
.password-text-field:focus {
  border-color: var(--color--primary-color);
}
.password-text-field::placeholder {
  color: var(--color--ash);
}
.password-submit-button {
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
  background-color: #262626;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all .4s;
}
.password-submit-button:hover {
  background-color: var(--color--primary-color);
  color: var(--color--black);
}
.checkout-form {
  background-color: var(--color--transparent);
  min-height: auto;
  padding: 0;
}
.checkout-left-wrap {
  flex-basis: 850px;
}
.checkout-right-wrap {
  flex-basis: 400px;
  top: 140px;
}
.block-header {
  border-color: var(--color--transparent-black);
  background-color: var(--color--transparent);
  padding: 20px;
}
.checkout-title {
  font-size: var(--_typography---h3);
  line-height: var(--_line-height---line-height-s);
  text-transform: none;
}
.checkout-email-field {
  border-color: var(--color--transparent-black);
  background-color: var(--color--transparent);
  height: 45px;
}
.checkbox-label {
  margin-bottom: 0;
}
.checkbox {
  margin-top: 0;
}
.checkout-submit-button {
  background-color: var(--color--secondary);
  color: var(--color--whtie);
  font-size: var(--_typography---medium);
  text-transform: uppercase;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: all .4s;
}
.checkout-submit-button:hover {
  background-color: var(--color--primary-color);
  color: var(--color--secondary);
}
.product-single-price-wrap {
  margin-top: var(--padding-m);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 32px;
  display: flex;
}
.product-single-price {
  color: var(--color--secondary);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-transform: uppercase;
}
.compare-price {
  color: #7f7f7f;
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
  text-decoration: line-through;
}
.product-details {
  margin-bottom: 32px;
}
.prudct-signle-right-wrap {
  flex-flow: column;
  width: 100%;
  max-width: 560px;
  margin-top: 60px;
  display: flex;
}
.product-color {
  border-width: 1px;
  border-color: var(--color--ash);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
  padding: 18px 30px;
}
.product-color.is-selected {
  border-width: 2px;
  border-color: var(--color--secondary);
  background-color: var(--color--whtie);
  color: var(--color--secondary);
}
.field-label {
  color: var(--color--ash);
  font-weight: var(--font-weight--regular);
  margin-bottom: 12px;
}
.option-list {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}
.button-group {
  margin-bottom: 0;
}
.default-state {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  margin-bottom: 0;
  display: flex;
}
.add-to-cart-button {
  background-color: var(--color--secondary);
  color: var(--color--whtie);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all .4s;
}
.add-to-cart-button:hover {
  background-color: var(--color--primary-color);
  color: var(--color--secondary);
}
.cart-image {
  object-fit: cover;
  width: 150px;
  height: 180px;
}
.cart-div {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  width: 100%;
  display: flex;
}
.cart-item-flex-wrap {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}
.cart-item-title {
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  text-transform: uppercase;
}
.cart-item-left-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.cart-item {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 0;
}
.cart-price {
  font-size: var(--_typography---large);
  font-weight: var(--font-weight--semi-blod);
}
.cart-quantity {
  border-color: var(--color--secondary);
  background-color: var(--color--transparent);
  border-radius: 0;
}
.close-button {
  border-radius: var(--border-radius--border-xl);
  background-color: var(--color--primary-color);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}
.cart-header {
  border-bottom-color: var(--color--transparent-black);
}
.cart-footer {
  border-top-color: var(--color--transparent-black);
}
.cart-button {
  background-color: var(--color--transparent);
  padding: 0;
}
.cart-quantity-2 {
  background-color: var(--color--secondary);
  color: var(--color--whtie);
  position: absolute;
  inset: auto -5px -5px auto;
}
.image-overly-bg {
  z-index: 2;
  background-color: var(--color--whtie);
  width: 102%;
  height: 0%;
  position: absolute;
  inset: auto 0% 0%;
}
.image-overly-bg.gray {
  background-color: var(--color--gray);
}
.image-overly-bg.bg {
  background-color: var(--color--primary-color);
}
.confidence-left-image-wrap, .find-image-wrap {
  position: relative;
  overflow: hidden;
}
.blog-cl-flex-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  flex-flow: column;
  display: flex;
}
.quick-title {
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  text-transform: uppercase;
  position: absolute;
  inset: 0% auto auto 0%;
}
.dropdown-link-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
  display: flex;
}
.dropdown-toggle-icon {
  margin: 0;
  position: static;
}
.dropdown-all-item-wrap {
  grid-column-gap: 160px;
  grid-row-gap: 160px;
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  background-color: #262626cc;
  border-radius: 16px;
  padding: 30px;
  display: flex;
}
.dropdown-list-wrap {
  transform-origin: 50% 0;
  background-color: #fff0;
  overflow: hidden;
  transform: translate(-50%);
}
.dropdown-list-wrap.is-open {
  background-color: #fff0;
}
.dropdown-item-title {
  color: var(--color--primary-color);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-xxxl);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
}
.nav-dropdown-toggle {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  color: #000;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  transition: color .4s;
  display: flex;
}
.dropdown-link {
  color: var(--color--whtie);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--regular);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  transition: color .4s;
}
.dropdown-link:hover, .dropdown-link[aria-current="page"], .dropdown-link.is-active {
  color: var(--color--primary-color);
}
.dropdown-padding {
  padding-top: 30px;
  overflow: hidden;
}
.tricker-flex-wrap {
  grid-column-gap: var(--padding-l);
  grid-row-gap: var(--padding-l);
  justify-content: center;
  align-items: center;
  display: flex;
}
.tricker-image {
  width: auto;
}
.tricker-image._01 {
  max-width: 312px;
}
.tricker-line {
  background-color: var(--color--ash);
  width: 1px;
  height: 16px;
}
.follow-image {
  object-fit: cover;
  width: 100%;
  max-width: 250px;
  max-height: 250px;
  position: absolute;
}
.follow-image._01 {
  inset: 70px auto auto 40%;
}
.follow-image._02 {
  inset: 320px auto auto 20%;
}
.follow-image._03 {
  inset: 320px 20% auto auto;
}
.follow-image._04 {
  inset: auto auto 310px 0%;
}
.follow-image._05 {
  inset: auto 0% 310px auto;
}
.follow-image._06 {
  inset: auto auto 70px 40%;
}
.more-product-top-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.more-product-wrap {
  margin-top: var(--padding-xxl);
}
.more-product-details {
  max-width: 297px;
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
  letter-spacing: var(--_letter-speacing---letter-speacing-s);
}
.secondary-button {
  border: 2px solid var(--color--whtie);
  color: var(--color--whtie);
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-s);
  font-weight: var(--font-weight--medium);
  text-align: center;
  text-transform: uppercase;
  padding: 20px 30px;
  position: relative;
  overflow: hidden;
}
.secondary-btn-bg {
  background-color: var(--color--whtie);
  position: absolute;
  inset: auto 0% 0%;
}
.product-select-block {
  margin-bottom: 0;
  position: absolute;
  inset: 0% 0% auto auto;
}
.product-select-form {
  border: 1px solid #000;
  padding-right: 30px;
  display: none;
}
.product-select {
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--secondary);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
  border: 1px #000;
  margin-bottom: 0;
  padding: 18px 0 18px 30px;
}
.blog-social-wrap {
  position: absolute;
  inset: 272px auto auto 0%;
}
.button {
  background-color: var(--color--black);
  font-size: var(--_typography---medium);
  line-height: var(--_line-height---line-height-m);
  text-transform: uppercase;
  padding: 24px 50px;
}
.line-item {
  font-weight: var(--font-weight--semi-blod);
}
.hero-product-link {
  color: var(--color--whtie);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  text-transform: uppercase;
  transition: color .3s;
}
.hero-product-link:hover {
  color: var(--color--secondary);
}
.collection-list {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.hero-bottom-text {
  color: var(--color--whtie);
  font-size: var(--_typography---h4);
  line-height: var(--_line-height---line-height-xl);
}
.play-button {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--color--secondary);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-lightbox-text {
  color: var(--color--secondary);
  font-size: var(--_typography---large);
  line-height: var(--_line-height---line-height-l);
  font-weight: var(--font-weight--semi-blod);
  text-transform: uppercase;
}
.hero-lightbox-right {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: var(--color--whtie);
  flex-flow: column;
  justify-content: space-between;
  padding: 16px 16px 20px;
  display: flex;
}
.scroll-button {
  aspect-ratio: 1;
  border: 1px solid var(--color--whtie);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100px;
  transition: background-color .3s;
  display: flex;
}
.scroll-button:hover {
  background-color: var(--color--primary-color);
}
.paragraph-3 {
  color: var(--color--whtie);
}
@media screen and (max-width: 991px) {
  body {
    --_typography---small: 16px;
    --_typography---h1: 70px;
    --_typography---h2: 40px;
    --_typography---h3: 36px;
    --_typography---h4: 22px;
    --_typography---medium: 18px;
    --_typography---large: 20px;
    --_letter-speacing---letter-speacing-xl: -2.5px;
    --_letter-speacing---letter-speacing-l: -1px;
    --_letter-speacing---letter-speacing-m: -.6px;
    --_letter-speacing---letter-speacing-s: -.3px;
    ---mode--collection-f645ad43-c800-2f28-c97a-b8e998364993: mode-7980c092-0f45-232e-94c3-c87c2300f320;
    --color--whtie: white;
    --font--primary-font: Inter, sans-serif;
    --color--secondary: #171717;
    --font-weight--regular: 400;
    --padding-none: 0px;
    --font-weight--medium: 500;
    --font-weight--semi-blod: 600;
    --color--ash: #17171799;
    --full-size: 100%;
    --padding-m: 20px;
    --padding-l: 30px;
    --padding-xs: 20px;
    --color--gray: #f7f6f3;
    --color--transparent: transparent;
    --padding-xxxl: 100px;
    --padding-jumbo: 160px;
    --padding-xl: 60px;
    --color--black-light: #111;
    --padding-xxl: 50px;
    --color--primary-color: #ffe55b;
    --color--black-dark: #0b0d13;
    --color--black: black;
    --padding-s: 35px;
    --border-radius--border-xl: 999px;
    --color--transparent-black: #0000001a;
    --font--secondary: "Inter Tight", sans-serif;
  }
  .nav-button-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .nav-menu-wrap {
    padding: var(--padding-l);
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    background-color: var(--color--gray);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: auto;
  }
  .menu-button {
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
  }
  .menu-button.is-open {
    background-color: var(--color--transparent);
  }
  .nav-menu {
    background-color: var(--color--transparent);
    height: 100vh;
    overflow: auto;
  }
  .section.contact {
    padding-bottom: var(--padding-xl);
  }
  .section.shop {
    padding-top: var(--padding-jumbo);
    padding-bottom: var(--padding-xxxl);
  }
  .section.next {
    height: 950px;
    padding-bottom: 100px;
  }
  .section.hero {
    height: 80vh;
    padding-top: 120px;
  }
  .footer-grid-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1.4fr;
  }
  .footer-brand-logo {
    width: 180px;
  }
  .footer-form-title {
    margin-top: 35px;
  }
  .footer-submit-button {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .copyright-wrapper {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .contact-image-block {
    grid-template-columns: 1fr;
    padding-left: 15px;
    padding-right: 15px;
  }
  .contact-blank {
    display: none;
  }
  .contact-single-image {
    object-position: 50% 50%;
    height: 500px;
  }
  .contact-details-block {
    margin-top: var(--padding-xxl);
    position: static;
  }
  .contact-blank-wrap {
    display: none;
  }
  .contact-form-wrap {
    max-width: none;
  }
  .contact-massage-area {
    height: 150px;
    min-height: 150px;
  }
  .more-contact-grid-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .more-single-wrap._02, .more-single-wrap._03, .more-single-wrap._01 {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .product-grid-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .product-button {
    padding-left: 15px;
    padding-right: 15px;
  }
  .about-details {
    text-align: center;
  }
  .play-icon {
    width: 80px;
  }
  .story-top-wrap {
    grid-column-gap: var(--padding-s);
    grid-row-gap: var(--padding-s);
  }
  .story-grid-wrap {
    grid-template-columns: 1fr;
  }
  .vision-single-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .life-top-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .life-details {
    text-align: center;
    max-width: 450px;
  }
  .life-title {
    text-align: center;
    order: -9999;
  }
  .next-blank-wrap {
    height: auto;
  }
  .next-image {
    height: 130%;
  }
  .hero-title {
    max-width: 340px;
  }
  .explore-top-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .explore-title {
    text-align: center;
  }
  .explore-line {
    margin-top: var(--padding-l);
    margin-bottom: var(--padding-l);
  }
  .confidence-top-wrap {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .confidence-left-wrap {
    flex-flow: row;
    width: 100%;
    max-width: none;
  }
  .confidence-left-image {
    max-width: 250px;
  }
  .confidence-title {
    text-align: center;
    order: -9999;
  }
  .comfort-wrap {
    grid-template-columns: 1.206fr;
  }
  .comfort-right-image {
    object-fit: cover;
    object-position: 50% 0%;
    height: 700px;
  }
  .confidence-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    grid-template-columns: 1fr 1fr;
  }
  .confidence-single-wrap {
    border: 1px solid #17171733;
    border-radius: 20px;
  }
  .confidence-single-wrap._01, .confidence-single-wrap._03 {
    border-radius: 20px;
  }
  .reach-top-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    justify-content: flex-start;
    align-items: center;
  }
  .reach-title {
    text-align: center;
  }
  .reach-tricker {
    margin-top: 100px;
  }
  .reach-item-wrap {
    padding: 25px 40px;
  }
  .reach-single-text {
    font-size: var(--_typography---large);
  }
  .coustomer-slider {
    padding-bottom: 120px;
  }
  .slider-left-arrow {
    width: 60px;
    height: 60px;
    inset: auto 0% 0% -15%;
  }
  .slider-left-arrow._01 {
    width: 60px;
    height: 60px;
    inset: auto 0% 0% -12%;
  }
  .slider-right-arrow {
    width: 60px;
    height: 60px;
    inset: auto -15% 0% 0%;
  }
  .slider-right-arrow._02 {
    width: 60px;
    height: 60px;
    inset: auto -12% 0% 0%;
  }
  .everyone-grid-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .discove-details-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-left: 0;
  }
  .discove-details {
    text-align: center;
    order: -9999;
    max-width: none;
  }
  .discover-details-image {
    max-width: none;
  }
  .discover-grid-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .find-top-wrap {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .find-title {
    text-align: center;
  }
  .find-right-wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
  .find-right-image {
    max-width: none;
  }
  .find-right-details {
    text-align: center;
    order: -9999;
    max-width: none;
  }
  .find-card-wrap {
    padding: 40px;
  }
  .explore-slider {
    padding-bottom: 120px;
  }
  .testimonial-top-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .happy-card-icon-wrap {
    width: 50px;
    height: 50px;
  }
  .happy-counter {
    margin-top: 50px;
  }
  .testimonial-slider {
    padding-bottom: 120px;
  }
  .testimonial-left-arrow {
    width: 30%;
  }
  .testimonial-review {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .testimonial-black-line {
    display: none;
  }
  ._404-image {
    width: 400px;
    height: 240px;
  }
  ._404-title {
    line-height: var(--_line-height---line-height-m);
  }
  .blog-top-btm-wrap._01 {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .blog-top-btm-wrap._02 {
    flex-flow: wrap;
  }
  .more-blog-tabs {
    flex-flow: column;
  }
  .more-blog-tabs-content {
    margin-top: var(--padding-xxl);
    margin-left: 0;
  }
  .blog-single-title {
    line-height: var(--_line-height---line-height-m);
  }
  .blog-rich-text h5:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
    margin-top: 40px;
  }
  .blog-rich-text blockquote {
    padding: 30px;
  }
  .blog-rich-text figure {
    margin-bottom: 40px;
  }
  .blog-share-wrap {
    margin-top: 50px;
  }
  .password-field-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }
  .checkout-right-wrap {
    flex-basis: 300px;
  }
  .row {
    flex-flow: column;
  }
  .product-single-price-wrap, .product-details {
    margin-bottom: 30px;
  }
  .prudct-signle-right-wrap {
    max-width: none;
    margin-top: 0;
  }
  .option-list, .default-state {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .nav-dropdown {
    margin-left: 0;
    margin-right: 0;
  }
  .dropdown-all-item-wrap {
    padding-left: 24px;
  }
  .dropdown-list-wrap {
    transform: none;
  }
  .tricker-flex-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    flex-flow: wrap;
  }
  .follow-image {
    max-width: 200px;
    max-height: 200px;
  }
  .product-select-block {
    display: none;
  }
  .blog-social-wrap {
    inset: 0% 0% auto auto;
  }
  .hero-lightbox-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
@media screen and (max-width: 767px) {
  body {
    --_typography---small: 16px;
    --_typography---h1: 64px;
    --_typography---h2: 36px;
    --_typography---h3: 32px;
    --_typography---h4: 21px;
    --_typography---medium: 17px;
    --_typography---large: 19px;
    --_letter-speacing---letter-speacing-xl: -2px;
    --_letter-speacing---letter-speacing-l: -.8px;
    --_letter-speacing---letter-speacing-m: -.4px;
    --_letter-speacing---letter-speacing-s: -.2px;
    ---mode--collection-f645ad43-c800-2f28-c97a-b8e998364993: mode-0a57f5ad-0f36-7a86-ff79-489aa0646757;
    --color--whtie: white;
    --font--primary-font: Inter, sans-serif;
    --color--secondary: #171717;
    --font-weight--regular: 400;
    --padding-none: 0px;
    --font-weight--medium: 500;
    --font-weight--semi-blod: 600;
    --color--ash: #17171799;
    --full-size: 100%;
    --padding-m: 20px;
    --padding-l: 25px;
    --padding-xs: 20px;
    --color--gray: #f7f6f3;
    --color--transparent: transparent;
    --padding-xxxl: 80px;
    --padding-jumbo: 140px;
    --padding-xl: 50px;
    --color--black-light: #111;
    --padding-xxl: 40px;
    --color--primary-color: #ffe55b;
    --color--black-dark: #0b0d13;
    --color--black: black;
    --padding-s: 30px;
    --border-radius--border-xl: 999px;
    --color--transparent-black: #0000001a;
    --font--secondary: "Inter Tight", sans-serif;
  }
  .nav-button-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }
  .brand-logo {
    padding-left: 0;
  }
  .brand-image {
    width: 120px;
  }
  .menu-button {
    width: 35px;
    height: 35px;
  }
  .nav-menu {
    height: 90vh;
  }
  .section.next {
    height: 800px;
    padding-bottom: 80px;
  }
  .section.hero {
    height: auto;
    padding-top: 110px;
    padding-bottom: var(--padding-xxl);
  }
  .style-color-wrap {
    grid-template-columns: 1fr;
  }
  .color-single-wrap {
    height: 120px;
  }
  .style-button-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: wrap;
  }
  .typography-details-wrap {
    grid-column-gap: var(--padding-l);
    grid-row-gap: var(--padding-xs);
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .footer-grid-wrap {
    grid-template-columns: 1fr;
  }
  .footer-brand-logo {
    width: 180px;
  }
  .footer-form-title {
    margin-top: 30px;
  }
  .footer-submit-button {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .footer-single-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .copyright-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .copyright-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
  }
  .changelog-all-list-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
  .changelog-single-list {
    font-size: var(--_typography---small);
  }
  .contact-single-image {
    height: 400px;
  }
  .contact-massage-area {
    height: 140px;
    min-height: 140px;
  }
  .follow-wrapper {
    padding-top: 350px;
    padding-bottom: 350px;
  }
  .more-contact-grid-wrap {
    grid-template-columns: 1fr;
  }
  .more-contact-link._01 {
    max-width: none;
  }
  .product-tabs-menu {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .product-grid-wrap {
    grid-template-columns: 1fr;
  }
  .product-button {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .about-top-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    flex-flow: column;
  }
  .about-details {
    text-align: center;
  }
  .play-icon {
    width: 60px;
  }
  .story-top-wrap {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .story-details {
    text-align: center;
  }
  .vision-grid-wrap {
    grid-template-columns: 1fr;
  }
  .vision-single-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    position: sticky;
    top: 140px;
  }
  .life-image-wrap._02, .life-image-wrap._03 {
    top: 140px;
  }
  .next-blank-wrap {
    height: auto;
  }
  .hero-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .hero-bottom-wrap {
    grid-column-gap: var(--padding-l);
    grid-row-gap: var(--padding-l);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .hero-title {
    max-width: 292px;
  }
  .hero-lightbox {
    max-width: none;
  }
  .confidence-left-wrap {
    flex-flow: column;
  }
  .confidence-left-image, .confidence-left-details {
    max-width: none;
  }
  .comfort-right-image {
    height: 500px;
  }
  .confidence-wrap {
    grid-template-columns: 1fr;
  }
  .confidence-single-wrap._01, .confidence-single-wrap._03, .confidence-single-wrap._02 {
    background-color: var(--color--primary-color);
    position: sticky;
    top: 120px;
  }
  .reach-top-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }
  .reach-tricker {
    margin-top: 80px;
  }
  .reach-item-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 20px 25px;
  }
  .reach-single-icon {
    width: 28px;
  }
  .reach-single-text {
    font-size: var(--_typography---small);
  }
  .coustomer-slider {
    padding-bottom: 100px;
  }
  .slider-left-arrow, .slider-left-arrow._01, .slider-right-arrow, .slider-right-arrow._02 {
    width: 55px;
    height: 55px;
  }
  .everyone-grid-wrap {
    grid-template-columns: 1fr;
  }
  .everyone-single-image {
    object-fit: cover;
    object-position: 50% 0%;
    height: 500px;
  }
  .everyone-button {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .discove-details-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-top: 20px;
  }
  .discover-grid-wrap {
    grid-template-columns: 1fr;
  }
  .find-card-wrap {
    padding: 30px;
    position: static;
  }
  .find-card-right-wrap {
    transform: none;
  }
  .explore-slider {
    padding-bottom: 100px;
  }
  .happy-card-icon-wrap {
    width: 45px;
    height: 45px;
  }
  .happy-counter {
    margin-top: 40px;
  }
  .testimonial-left-arrow {
    width: 50%;
  }
  .testimonial-review {
    font-size: var(--_typography---h3);
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .testimonial-arrow {
    width: 55px;
    height: 55px;
  }
  ._404-image {
    width: 320px;
    height: 200px;
  }
  .blog-top-flex-wrap {
    flex-flow: column;
  }
  .blog-top-left-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
  }
  .blog-top-title {
    line-height: var(--_line-height---line-height-m);
  }
  .more-blog-flex-wrap {
    flex-flow: column;
  }
  .more-blog-left-wrap, .more-blog-right-wrap {
    max-width: none;
  }
  .more-blog-image {
    width: 100%;
  }
  .blog-rich-text h5:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
    margin-top: 30px;
  }
  .blog-rich-text blockquote {
    padding: 25px 20px;
  }
  .blog-rich-text figure {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .blog-thimble-img {
    height: 320px;
  }
  .blog-share-wrap {
    margin-top: 40px;
  }
  .password-field-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .checkout-right-wrap {
    flex: 0 auto;
  }
  .block-header {
    padding: 15px;
  }
  .product-single-price-wrap, .product-details {
    margin-bottom: 25px;
  }
  .option-list, .default-state {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }
  .dropdown-link-wrap {
    margin-top: 16px;
  }
  .nav-dropdown {
    width: 100%;
  }
  .dropdown-all-item-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    display: flex;
  }
  .dropdown-list-wrap {
    width: 100%;
  }
  .dropdown-item-title {
    width: 100%;
    max-width: 100%;
  }
  .dropdown-padding {
    width: 100%;
  }
  .tricker-flex-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .tricker-flex-wrap._01 {
    flex-flow: wrap;
  }
  .tricker-image._01 {
    width: 240px;
  }
  .tricker-line._01 {
    display: none;
  }
  .follow-image {
    max-width: 140px;
    max-height: 150px;
  }
  .follow-image._01 {
    top: 40px;
  }
  .follow-image._02 {
    top: 200px;
    left: 10%;
  }
  .follow-image._03 {
    top: 200px;
    right: 10%;
  }
  .follow-image._04, .follow-image._05 {
    bottom: 200px;
  }
  .follow-image._06 {
    bottom: 40px;
    left: 35%;
  }
  .more-product-top-wrap {
    grid-column-gap: var(--padding-m);
    grid-row-gap: var(--padding-m);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .more-product-title, .more-product-details {
    text-align: center;
  }
  .hero-lightbox-right {
    width: 100%;
  }
}
@media screen and (max-width: 479px) {
  body {
    --_typography---small: 16px;
    --_typography---h1: 42px;
    --_typography---h2: 32px;
    --_typography---h3: 28px;
    --_typography---h4: 20px;
    --_typography---medium: 16px;
    --_typography---large: 18px;
    --_letter-speacing---letter-speacing-xl: -1px;
    --_letter-speacing---letter-speacing-l: -.4px;
    --_letter-speacing---letter-speacing-m: -.2px;
    --_letter-speacing---letter-speacing-s: 0px;
    ---mode--collection-f645ad43-c800-2f28-c97a-b8e998364993: mode-9e06c769-3217-e2d0-aae7-b43af930a1e1;
    --color--whtie: white;
    --font--primary-font: Inter, sans-serif;
    --color--secondary: #171717;
    --font-weight--regular: 400;
    --padding-none: 0px;
    --font-weight--medium: 500;
    --font-weight--semi-blod: 600;
    --color--ash: #17171799;
    --full-size: 100%;
    --padding-m: 15px;
    --padding-l: 20px;
    --padding-xs: 15px;
    --color--gray: #f7f6f3;
    --color--transparent: transparent;
    --padding-xxxl: 60px;
    --padding-jumbo: 120px;
    --padding-xl: 40px;
    --color--black-light: #111;
    --padding-xxl: 30px;
    --color--primary-color: #ffe55b;
    --color--black-dark: #0b0d13;
    --color--black: black;
    --padding-s: 20px;
    --border-radius--border-xl: 999px;
    --color--transparent-black: #0000001a;
    --font--secondary: "Inter Tight", sans-serif;
  }
  .nav-button-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .brand-image {
    width: 100px;
  }
  .menu-button {
    width: 30px;
    height: 30px;
  }
  .nav-menu {
    height: 85vh;
  }
  .section.next {
    height: 600px;
    padding-bottom: 60px;
  }
  .section.hero {
    height: auto;
    padding-top: 100px;
  }
  .style-single-wrap {
    padding-right: var(--padding-m);
    padding-left: var(--padding-m);
  }
  .color-single-wrap {
    height: 100px;
  }
  .footer-right-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 30px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }
  .footer-brand-logo {
    width: 160px;
  }
  .footer-form-title {
    margin-top: 25px;
  }
  .footer-single-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
  .footer-all-menu-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
  .copyright-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .changelog-single-wrap {
    padding-right: var(--padding-m);
    padding-left: var(--padding-m);
  }
  .contact-single-image {
    height: 300px;
  }
  .contact-text-field._01, .contact-text-field._02, .contact-text-field._03 {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
  }
  .contact-massage-area {
    height: 120px;
    min-height: 120px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
  }
  .follow-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .more-single-wrap._02, .more-single-wrap._03, .more-single-wrap._01 {
    padding: 100px 15px 15px;
  }
  .product-tabs-menu {
    grid-template-columns: 1fr;
  }
  .product-tab-link {
    text-align: center;
  }
  .product-button {
    padding: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }
  .product-title, .about-details {
    font-size: var(--_typography---large);
  }
  .play-icon {
    width: 40px;
  }
  .story-left-wrap {
    grid-template-columns: 1fr;
  }
  .vision-single-wrap {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }
  .primary-button {
    padding: 15px 25px;
  }
  .hero-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .hero-top-wrap {
    grid-column-gap: var(--padding-xl);
    grid-row-gap: var(--padding-xl);
    text-align: center;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
  .hero-bottom-wrap {
    text-align: center;
    justify-content: space-between;
    align-items: center;
  }
  .hero-title {
    max-width: none;
  }
  .hero-lightbox {
    flex-flow: column;
  }
  .hero-lightbox-image {
    max-width: none;
  }
  .hero-play-icon {
    width: 60px;
    max-height: 60px;
  }
  .explore-title, .confidence-title {
    font-size: var(--_typography---h3);
  }
  .comfort-right-image {
    height: 300px;
  }
  .comfort-img-wrap {
    grid-template-columns: 1.265fr;
  }
  .reach-top-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .reach-title {
    font-size: var(--_typography---h3);
  }
  .reach-tricker {
    margin-top: 60px;
  }
  .reach-item-wrap {
    padding: 15px 20px;
  }
  .coustomer-slider {
    padding-bottom: 80px;
  }
  .slider-left-arrow {
    width: 50px;
    height: 50px;
    left: -25%;
  }
  .slider-left-arrow._01 {
    left: -25%;
  }
  .slider-right-arrow {
    width: 50px;
    height: 50px;
    right: -25%;
  }
  .slider-right-arrow._02 {
    right: -25%;
  }
  .everyone-single-image {
    height: 350px;
  }
  .everyone-button {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .find-card-wrap {
    padding: 25px 20px;
  }
  .find-card-wrap._01 {
    flex-flow: column;
  }
  .find-card-wrap._02 {
    flex-flow: column;
    position: static;
    box-shadow: 0 2px 5px #0003;
  }
  .find-card-wrap._03 {
    flex-flow: column;
    position: static;
  }
  .find-card-right-wrap {
    max-width: none;
  }
  .testimonial-top-wrap {
    grid-template-columns: 1fr;
  }
  .happy-card-wrap {
    position: sticky;
    top: 140px;
  }
  .happy-card-icon-wrap {
    width: 40px;
    height: 40px;
  }
  .happy-counter {
    margin-top: 30px;
  }
  .testimonial-left-arrow {
    font-size: var(--_typography---medium);
  }
  .testimonial-review {
    font-size: var(--_typography---h4);
    letter-spacing: var(--_letter-speacing---letter-speacing-m);
    margin-top: 20px;
    margin-bottom: 20px;
  }
  ._404-image {
    width: 240px;
    height: 150px;
  }
  .blog-top-btm-wrap._01 {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .blog-rich-text h5:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
    margin-top: 20px;
  }
  .blog-rich-text blockquote {
    padding: 20px 15px;
  }
  .blog-rich-text figure {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .blog-thimble-img {
    height: 280px;
  }
  .blog-share-wrap {
    margin-top: 30px;
  }
  .password-icon {
    width: 200px;
  }
  .password-title {
    margin-top: 20px;
  }
  .password-field-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
  .product-single-price-wrap, .product-details {
    margin-bottom: 20px;
  }
  .product-color {
    padding: 15px;
  }
  .option-list, .default-state {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .cart-image {
    width: 100%;
    height: 120px;
  }
  .cart-item {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .cart-quantity {
    margin-bottom: 0;
  }
  .order-item {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }
  .checkout-image {
    width: 100%;
  }
  .dropdown-link-wrap._02 {
    width: 148px;
  }
  .nav-dropdown {
    width: 100%;
  }
  .dropdown-all-item-wrap {
    grid-column-gap: 20px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    width: auto;
    padding: 16px;
    display: grid;
  }
  .dropdown-list-wrap.is-open {
    width: 100%;
    margin-left: -5px;
  }
  .dropdown-padding {
    width: 100%;
    max-width: 100%;
  }
  .tricker-flex-wrap {
    grid-column-gap: var(--padding-xs);
    grid-row-gap: var(--padding-xs);
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .tricker-flex-wrap._01 {
    grid-template-columns: 1fr;
    place-items: center;
  }
  .tricker-image {
    width: auto;
  }
  .tricker-line, .follow-image {
    display: none;
  }
  .secondary-button {
    padding: 15px 25px;
  }
  .blog-social-wrap {
    margin-top: 30px;
    position: static;
  }
  .hero-lightbox-right {
    justify-content: space-between;
    align-items: center;
  }
  #node-_520ce4c6-2b12-1736-3134-5cd39f6daa10-965e8d9f {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
/* ======================================================================
   4. Components (hand-written)
   ====================================================================== */
/* EYECONIC - the components, hand-written.

   Everything the Webflow runtime and its IX2 payload used to do, re-authored
   as CSS with the smallest possible amount of JavaScript beside it
   (assets/js/main.js).  The export needed jQuery, a 2.5 MB bundle and a lottie
   player for what is below.

   Values are the payload's, not an approximation: every duration, easing and
   keyframe here was read out of ix2.json (see lists.txt for the decoded
   dump).  Where a rest state CONTRADICTS the design sheet -- the overlay that
   starts full height, the button that starts pushed 200% down, the arrow puck
   that is yellow only because an interaction says so -- it is restated here, because transform.py strips the inline copy IX2 baked in and the sheet's own
   value is the END of the animation, not its beginning.  Dropping one of those
   on Puchix left white text on a lime button.

   Sections
     1  reveals                     the three scroll presets
     2  image zooms + overlay wipe  the reveal every picture shares
     3  hovers                      the seven pairs
     4  navbar                      panel, hamburger, Pages dropdown
     5  tab sets                    blog categories, shop categories
     6  sliders                     collections, reviews, testimonials
     7  video lightbox
     8  cart, checkout and forms
     9  reduced motion
*/


/* ===========================================================================
   1. Reveals

   `slideInBottom`, `slideInLeft` and `growBigIn`, at the nine delays the
   payload carries (40-700ms).  main.js adds `.is-revealed` when the element
   first crosses into view; the delay comes from `data-reveal-delay`.

   These are ANIMATIONS, not transitions.  A `transition:` shorthand on a
   reveal wrapper DELETES whatever transition the element already had -- which
   is how Nuestudio lost a hover on every card it revealed.  An animation
   composes instead.

   The rest state is gated on `.js`.  Without scripting nothing would ever add
   `.is-revealed`, so an ungated `opacity: 0` is a blank page; `:where(.js)`
   keeps the gate at zero specificity so it changes nothing else. */
:where(.js) .reveal {
  opacity: 0;
}
:where(.js) .reveal-up {
  transform: translateY(100px);
}
:where(.js) .reveal-left {
  transform: translateX(-100px);
}
:where(.js) .reveal-grow {
  transform: scale(0);
}
.reveal.is-revealed {
  animation: reveal-fade 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.reveal-up.is-revealed {
  animation-name: reveal-fade, reveal-up;
}
.reveal-left.is-revealed {
  animation-name: reveal-fade, reveal-left;
}
.reveal-grow.is-revealed {
  animation-name: reveal-fade, reveal-grow;
}
@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reveal-up {
  from { transform: translateY(100px); }
  to { transform: none; }
}
@keyframes reveal-left {
  from { transform: translateX(-100px); }
  to { transform: none; }
}
@keyframes reveal-grow {
  from { transform: scale(0); }
  to { transform: none; }
}
/* ===========================================================================
   2. Image zooms and the overlay wipe

   Fourteen interactions with one shape: as a section arrives, a picture
   settles out of a scale-up while a solid panel retracts off it.

   `--zoom-from` / `--zoom-ms` carry the three settings the payload uses. The
   hook's value names the class the payload animates; transform.py marks that
   element `.zoom-image`, because the trigger is sometimes the picture itself
   and sometimes a wrapper two levels above it. */
[data-zoom] {
  --zoom-from: 1.5;
  --zoom-ms: 1200ms;
}
[data-zoom="contact-single-image"], [data-zoom="blog-thimble-img"], [data-zoom="confidence-left-image"], [data-zoom="comfort-image"], [data-zoom="comfort-right-image"], [data-zoom="everyone-single-image"] {
  --zoom-ms: 1500ms;
}
[data-zoom="about-light-box-image"], [data-zoom="story-single-image"], [data-zoom="story-image"] {
  --zoom-from: 1.4;
  --zoom-ms: 1500ms;
}
/* The scale-up is the REST state: the design sheet has no transform on any of
   these, so without this line the picture simply sits at its final size and
   the reveal never happens. */
:where(.js) .zoom-image {
  transform: scale(var(--zoom-from));
}
/* BOTH forms. `.is-revealed` lands on the TRIGGER, and the trigger is the
   picture itself on three of the fourteen (`.about-light-box-image` carries
   its own data-w-id) and a wrapper two levels above it on the rest -- so a
   rule keyed only on `.zoom-image.is-revealed` animates three of them and
   silently leaves eleven sitting at their final size. */
.zoom-image.is-revealed, [data-zoom].is-revealed .zoom-image {
  animation: zoom-settle var(--zoom-ms) ease both;
}
@keyframes zoom-settle {
  from { transform: scale(var(--zoom-from)); }
  to { transform: none; }
}
/* `.image-overly-bg` is `height: 0%` in the design sheet -- its END state. IX2
   put it at 100% on load and retracted it over 1200ms, so 100% is the rest
   state here. */
:where(.js) [data-overlay] {
  height: 100%;
}
[data-overlay].is-revealed {
  animation: overlay-wipe 1200ms ease both;
}
@keyframes overlay-wipe {
  from { height: 100%; }
  to { height: 0%; }
}
/* The contact page's six polaroids pop in one after another, 300ms apart.
   Scale 0 is again a rest state the sheet does not carry. */
:where(.js) [data-stagger="follow"] .follow-image {
  transform: scale(0);
}
[data-stagger="follow"].is-revealed .follow-image {
  animation: follow-pop 300ms ease both;
}
[data-stagger="follow"].is-revealed ._01 { animation-delay: 0ms; }
[data-stagger="follow"].is-revealed ._02 { animation-delay: 300ms; }
[data-stagger="follow"].is-revealed ._03 { animation-delay: 600ms; }
[data-stagger="follow"].is-revealed ._04 { animation-delay: 900ms; }
[data-stagger="follow"].is-revealed ._05 { animation-delay: 1200ms; }
[data-stagger="follow"].is-revealed ._06 { animation-delay: 1500ms; }
@keyframes follow-pop {
  from { transform: scale(0); }
  to { transform: none; }
}
/* The reach belt: `.reach-single-wrap` walks its own width and starts again, 30 seconds a lap, forever. The track ships twice in the markup so the second
   copy takes the first one's place as it leaves. */
[data-marquee="reach"] {
  overflow: hidden;
}
[data-marquee="reach"] .reach-single-wrap {
  animation: reach-belt 30s linear infinite;
  will-change: transform;
}
@keyframes reach-belt {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
/* The "next" section's photograph drifts up as the section crosses the
   viewport: -15% at a fifth of the way through, 0 at four fifths. main.js sets
   `--scrub` to that 0..1 progress. */
[data-scrub="next-image"] .next-image {
  transform: translateY(calc(-15% + var(--scrub, 0) * 15%));
}
/* ===========================================================================
   3. Hovers

   Seven pairs of MOUSE_OVER / MOUSE_OUT lists, all of them CHILDREN-scoped and
   all of them expressible as `:hover`. The "in" duration is the payload's own;
   the "out" list is the same move backwards, so only the transition needs both
   numbers -- the export used 400ms out, 400-600ms in.

   `:focus-visible` is added everywhere the hover lands on something focusable, so the same feedback reaches a keyboard. */

/* --- product card: "View Details" rides up from below the frame ---------- */
[data-hover="product-image"] .product-button {
  transform: translateY(200%);
  transition: transform 400ms ease;
}
[data-hover="product-image"]:hover .product-button, [data-hover="product-image"]:focus-visible .product-button {
  transform: none;
  transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* --- vision card: a black disc grows out of the corner ------------------- */
[data-hover="vision-single"] .vision-single-bg {
  transition: width 400ms ease, height 400ms ease;
}
[data-hover="vision-single"] .vision-single-title, [data-hover="vision-single"] .vision-single-details {
  position: relative;
  transition: color 400ms ease;
}
[data-hover="vision-single"] .vision-single-title {
  color: var(--color--secondary);
}
[data-hover="vision-single"] .vision-single-details {
  color: var(--color--ash);
}
[data-hover="vision-single"]:hover .vision-single-bg {
  width: 1010px;
  height: 1010px;
}
[data-hover="vision-single"]:hover .vision-single-title {
  color: var(--color--whtie);
}
[data-hover="vision-single"]:hover .vision-single-details {
  color: #ffffffb3;
}
/* --- the two buttons: a panel wipes up behind the label ------------------ */
[data-hover="primary-button"], [data-hover="secondary-button"], [data-hover="everyone-button"] {
  transition: color 400ms ease;
}
[data-hover="primary-button"] .primary-btn-bg, [data-hover="secondary-button"] .secondary-btn-bg, [data-hover="everyone-button"] .everyone-btn-bg {
  height: 0%;
  transition: height 400ms ease;
}
[data-hover="primary-button"] .primary-btn-icon, [data-hover="secondary-button"] .primary-btn-icon {
  transition: filter 400ms ease;
}
/* The label and the icon sit ON the panel, so they need a stacking context of
   their own or the wipe covers them. */
[data-hover="primary-button"] .primary-btn-wrap, [data-hover="secondary-button"] .primary-btn-wrap, [data-hover="everyone-button"] .everyone-btn-wrap {
  position: relative;
  z-index: 1;
}
[data-hover="primary-button"]:hover .primary-btn-bg, [data-hover="primary-button"]:focus-visible .primary-btn-bg, [data-hover="secondary-button"]:hover .secondary-btn-bg, [data-hover="secondary-button"]:focus-visible .secondary-btn-bg, [data-hover="everyone-button"]:hover .everyone-btn-bg, [data-hover="everyone-button"]:focus-visible .everyone-btn-bg {
  height: 100%;
}
[data-hover="primary-button"]:hover, [data-hover="primary-button"]:focus-visible {
  color: var(--color--whtie);
}
[data-hover="secondary-button"]:hover, [data-hover="secondary-button"]:focus-visible {
  color: var(--color--secondary);
}
[data-hover="primary-button"]:hover .primary-btn-icon, [data-hover="primary-button"]:focus-visible .primary-btn-icon, [data-hover="secondary-button"]:hover .primary-btn-icon, [data-hover="secondary-button"]:focus-visible .primary-btn-icon {
  filter: invert(100%);
}
/* --- statistic card: the whole card inverts ------------------------------ */
[data-hover="happy-card"] .happy-card-wrap {
  transition: background-color 400ms ease;
}
[data-hover="happy-card"] .happy-counter, [data-hover="happy-card"] .happy-card-title {
  transition: color 400ms ease;
}
[data-hover="happy-card"] .happy-counter {
  color: var(--color--secondary);
}
[data-hover="happy-card"]:hover .happy-card-wrap {
  background-color: var(--color--secondary);
}
[data-hover="happy-card"]:hover .happy-counter {
  color: var(--color--whtie);
}
[data-hover="happy-card"]:hover .happy-card-title {
  color: #ffffff99;
}
/* --- testimonial arrows --------------------------------------------------
   The yellow puck is NOT in the design sheet: `.testimonial-arrow` there has a
   border and no background at all, and the fill comes entirely from this
   interaction's rest state. The export baked it inline on one of the two
   arrows and left the other to the runtime, so both are set here. */
[data-hover="testimonial-arrow"] {
  color: var(--color--ash);
  transition: color 400ms ease;
}
[data-hover="testimonial-arrow"] .testimonial-arrow {
  background-color: var(--color--primary-color);
  transition: background-color 400ms ease;
}
[data-hover="testimonial-arrow"] .testimonial-arrow-icon {
  filter: invert(0%);
  transition: filter 400ms ease;
}
[data-hover="testimonial-arrow"]:hover, [data-hover="testimonial-arrow"]:focus-visible {
  color: var(--color--secondary);
}
[data-hover="testimonial-arrow"]:hover .testimonial-arrow, [data-hover="testimonial-arrow"]:focus-visible .testimonial-arrow {
  background-color: var(--color--black);
}
[data-hover="testimonial-arrow"]:hover .testimonial-arrow-icon, [data-hover="testimonial-arrow"]:focus-visible .testimonial-arrow-icon {
  filter: invert(100%);
}
/* ===========================================================================
   4. Navbar

   Above 992px the menu is an ordinary inline row and none of this applies.
   Below it, `.nav-menu` is the full-screen panel the design already sizes
   (100vh, 90vh below 768px, 85vh below 480px) -- so the open height is a
   constant the stylesheet can hold, and the runtime's measure-and-animate is
   an ordinary transition. main.js only moves `.is-nav-open` on `.navbar` and
   keeps the button's `aria-expanded` in step. */
@media screen and (max-width: 991px) {
  .navbar .nav-menu {
    z-index: 1000;
    float: none;
    width: 100%;
    position: absolute;
    inset: 100% 0 auto 0;
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height 400ms ease, visibility 0s linear 400ms;
  }

  .navbar.is-nav-open .nav-menu {
    max-height: 100vh;
    overflow: auto;
    visibility: visible;
    transition: max-height 400ms ease, visibility 0s;
  }
}
@media screen and (max-width: 767px) {
  .navbar.is-nav-open .nav-menu {
    max-height: 90vh;
  }
}
@media screen and (max-width: 479px) {
  .navbar.is-nav-open .nav-menu {
    max-height: 85vh;
  }
}
/* The body does not scroll behind an open panel or an open cart. */
.no-scroll {
  overflow: hidden;
}
/* --- the hamburger ------------------------------------------------------
   Four strokes in the lottie's own 50x50 geometry, scaled to the button: two
   "buns" at 30.5% and 69.5% of the height and two centre bars that read as one
   line until they rotate apart. Stroke weight and colour are the lottie's
   (6/50 of the box, black). */
.hamburger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.hamburger-bun, .hamburger-cross {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 12%;
  border-radius: 999px;
  background-color: currentColor;
  transform-origin: 50% 50%;
  transition: transform 400ms ease, opacity 400ms ease;
}
.hamburger-bun:first-child { top: 24.5%; }
.hamburger-bun:last-child { bottom: 24.5%; }
.hamburger-cross { top: 44%; }
[aria-expanded="true"] .hamburger-bun {
  opacity: 0;
  transform: translateY(0);
}
[aria-expanded="true"] .hamburger-bun:first-child {
  transform: translateY(72%);
}
[aria-expanded="true"] .hamburger-bun:last-child {
  transform: translateY(-72%);
}
[aria-expanded="true"] .hamburger-cross:nth-of-type(2) {
  transform: rotate(45deg);
}
[aria-expanded="true"] .hamburger-cross:nth-of-type(3) {
  transform: rotate(-45deg);
}
/* --- the Pages dropdown -------------------------------------------------
   Webflow opened it on hover AND on click. Both survive: the hover is the
   `:hover` rule below, the click is `aria-expanded` from main.js, and either
   one is enough on its own. The panel fades and grows exactly as a-28 did
   (400ms ease, opacity 0->1, height 0->auto). */
[data-dropdown="nav"] .wf-dropdown-list {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 400ms ease, transform 400ms ease,
              visibility 0s linear 400ms;
}
[data-dropdown="nav"]:hover .wf-dropdown-list, [data-dropdown="nav"]:focus-within .wf-dropdown-list, [data-dropdown="nav"] [aria-expanded="true"] + .wf-dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 400ms ease, transform 400ms ease, visibility 0s;
}
[data-dropdown="nav"] .dropdown-toggle-icon {
  transition: transform 400ms ease;
}
[data-dropdown="nav"]:hover .dropdown-toggle-icon, [data-dropdown="nav"]:focus-within .dropdown-toggle-icon, [data-dropdown="nav"] [aria-expanded="true"] .dropdown-toggle-icon {
  transform: rotate(180deg);
}
/* ===========================================================================
   5. Tab sets

   `.is-active` is what the design sheet styles (build_css maps both
   `.w--tab-active` and the tab link's `.w--current` onto it) and main.js moves
   it. The pane's own `display: none` comes from the framework sheet, which
   keeps its tab rules; this only has to give the active one back. */
.tabset-pane {
  display: none;
}
.tabset-pane.is-active {
  display: block;
}
/* The blog category strip swaps an empty circle for a ticked one. Both images
   are stacked in `.more-blog-tab-img`; the payload cross-fades their opacity
   over 400ms. */
[data-tab-media="more-blog"] .more-blog-tab-img-01, [data-tab-media="more-blog"] .more-blog-tab-img-02 {
  transition: opacity 400ms ease;
}
[data-tab-media="more-blog"] .more-blog-tab-img-02 {
  opacity: 0;
}
[data-tab-media="more-blog"].is-active .more-blog-tab-img-01 {
  opacity: 0;
}
[data-tab-media="more-blog"].is-active .more-blog-tab-img-02 {
  opacity: 1;
}
/* ===========================================================================
   6. Sliders

   All three are `animation: slide`, `duration: 500`, `infinite: true`, with
   autoplay off -- so the track is a flex row main.js translates by whole
   slides, and the ends wrap. The dot strip is gone: the design set it
   `display: none` and only the runtime ever put dots in it. */
/* NO `overflow: hidden` on the slider itself. Two of the three masks are
   deliberately `overflow: visible` and narrower than the slider they sit in --
   that is how the collections row shows three cards at once -- and the design
   clips the spill further out, at `.explore-wrapper` and
   `.customers-wrapper`. Clipping it here as well adds a second, competing
   clip box, and it is the reason the row went blank a step or two in. */
/* `width: 100%` of the mask, not `max-content`: the slide's own
   `flex: 0 0 100%` is 100% of the TRACK, and that is how a slide comes out at
   the mask's width -- 400px in the collections row, 1000px in the
   testimonials -- exactly as the framework's `.w-slide { width: 100% }` did
   inside a `white-space: nowrap` mask. */
[data-slider-track] {
  display: flex;
  width: 100%;
  transition: transform 500ms ease;
  will-change: transform;
}
/* The testimonial slider's progress rule. IX2 set it to 33 / 66 / 100 per
   slide from `data-slide-progress`; main.js copies the active slide's value
   into `--slide-progress`. 33% is the first slide's, which is the width the
   runtime wrote on load. */
.testimonial-gray-line {
  width: var(--slide-progress, 33%);
  transition: width 400ms ease;
}
/* ===========================================================================
   7. Video lightbox

   Two openers, one clip. The iframe is built when the dialog opens and thrown
   away when it closes, so no page loads YouTube's player until somebody asks
   for it -- and the embed is youtube-nocookie. */
.lightbox {
  z-index: 100000;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}
.lightbox[hidden] {
  display: none;
}
.lightbox-backdrop {
  background-color: #000000e6;
  position: absolute;
  inset: 0;
}
.lightbox-frame {
  width: min(90vw, 1100px);
  aspect-ratio: 16 / 9;
  position: relative;
}
.lightbox-video, .lightbox-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lightbox-close {
  color: #fff;
  width: 44px;
  height: 44px;
  font-size: 32px;
  line-height: 1;
  position: absolute;
  top: -52px;
  right: 0;
}
.play-button, .play-icon {
  cursor: pointer;
}
/* ===========================================================================
   8. Cart, checkout and forms

   The cart drawer's closed state was an inline `display: none` the runtime
   removed; transform.py strips it and this pair replaces it, so the drawer has
   a class to open by. Everything else here is the same story: a state the
   runtime used to write, written in CSS instead. */
.cart-modal {
  display: none;
}
.cart-modal.is-open {
  display: flex;
}
.cart-form {
  display: none;
}
.cart-form.is-active {
  display: flex;
}
.cart-empty {
  display: flex;
}
.cart-empty.is-hidden, .cart-error-state.is-hidden {
  display: none;
}
.cart-error-state {
  display: block;
}
/* The checkout's two error boxes. The export hides them with an inline style
   the runtime removed when its API returned an error; there is no API here, so
   the one error this checkout can have is an empty basket, and main.js is what
   shows it. */
.checkout-error {
  display: none;
}
.checkout-error.is-shown {
  display: block;
}
/* The order summary and the confirmation page render from the same basket. */
.checkout-items:empty {
  display: none;
}
/* The demo forms. Webflow swapped these in itself after its own POST; main.js
   does the swap now, and `hidden` is the resting state transform.py writes. */
.form-success[hidden], .form-error[hidden] {
  display: none;
}
.form-success:not([hidden]), .form-error:not([hidden]) {
  display: block;
}
/* The product grid's sort control reorders the cards in place, so the cards
   need to be able to move: the grid is the flex/grid container the design
   already made, and `order` is set by main.js. */
[data-product-sort] {
  cursor: pointer;
}
/* ===========================================================================
   9. Reduced motion

   Everything above is decoration. A visitor who has asked for less of it gets
   the end state immediately -- nothing is hidden, nothing is unreachable. */
@media (prefers-reduced-motion: reduce) {
  :where(.js) .reveal,
  :where(.js) .zoom-image,
  :where(.js) [data-stagger="follow"] .follow-image {
    opacity: 1;
    transform: none;
  }

  :where(.js) [data-overlay] {
    height: 0%;
  }

  [data-scrub="next-image"] .next-image {
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}