/* 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;
  /* These links print the URL as their own text, and a URL has no spaces in
     it to break at -- so on a narrow phone the longest of them
     (fonts.google.com/specimen/Inter) is wider than the column and pushes the
     whole page sideways. `anywhere` lets it wrap mid-word, which is the only
     thing that can give: the text is the address, so it cannot be shortened,
     and truncating it would hide where the link actually goes. */
  overflow-wrap: anywhere;
}
.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). */
/* CLOSED IS `display: none`, NOT `visibility: hidden`.
   A hidden element still takes part in layout, and this panel is 706px wide, absolutely positioned, and anchored near the right of the container -- so a
   closed dropdown added up to 380px of scrollable width to EVERY page at every
   width from 992px up. It was invisible in three ways at once: nothing
   was on screen to see, the reveal audits do not look at geometry, and the
   parity harness hid the panel outright before measuring.

   Because it is `display: none` at rest, the entrance is an ANIMATION rather
   than a transition: an animation runs when an element becomes displayed, where a transition has nothing to transition from. That also leaves the
   design's own `transform: translate(-50%)` -- which is what centres the panel
   under its toggle -- completely untouched. Setting `transform` here at all
   was the second half of the same bug: a transform REPLACES, it never layers, so the `translateY(-6px)` entrance silently threw the panel 353px to the
   right of where the design puts it. */
[data-dropdown="nav"] .wf-dropdown-list {
  display: none;
}
[data-dropdown="nav"]:hover .wf-dropdown-list, [data-dropdown="nav"]:focus-within .wf-dropdown-list, [data-dropdown="nav"] [aria-expanded="true"] + .wf-dropdown-list {
  display: flex;
  animation: dropdown-open 400ms ease both;
}
@keyframes dropdown-open {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Below about 1172px the centred panel no longer fits: it is a fixed 706px
   wide, and its centre -- the toggle -- moves inward only half as fast as the
   viewport edge does, so the two meet. Between 992px and there, the panel is
   anchored to the right of its toggle instead of centred on it, which is the
   only part of the design that has to give if the page is not to scroll
   sideways while the menu is open. The crossover measures at ~1172px and
   drifts a few pixels run to run with font metrics, so the switch is held at
   1280px: that leaves ~47px of clearance at the narrowest centred width,
   where 1200px would have left 7px and put the fix back within its own
   measurement noise.

   The crossover is measured with the bar FULLY RENDERED. An earlier reading
   put it at ~1048px, which is what a nav whose brand logo has not loaded
   reports: `.brand-image` is `loading="lazy"` and the SVG carries no CSS
   width, so until it arrives the anchor is 0px wide and every item after it --
   the toggle this panel is centred on included -- sits 63px further left than
   it will once the page has settled. Measuring it in a viewport that never
   triggered the lazy load is how 1080px came to look like enough; it left
   1080-1171px still scrolling sideways whenever the menu was opened.

   This is the one place `transform` is deliberately replaced rather than left
   alone -- the centring is exactly what is being overridden. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  [data-dropdown="nav"] .wf-dropdown-list {
    left: auto;
    right: 0;
    transform: none;
  }
}
[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;
}
/* ===========================================================================
   8b. Source defect: the Discover row overflows the page

   `.discove-details-wrap` is `width: 100%` with `margin-left: 130px`, so its
   outer width is always its parent's width PLUS 130px. Above about 1204px the
   `max-width: 1044px` takes over and it fits; below that -- and above 991px, where the design resets the margin to 0 -- it hangs 30 to 35px past the
   right edge and the whole home page scrolls sideways.

   This is in the export and on the published site, identically; it is not a
   conversion difference. Capping the width at the space actually available
   leaves the design untouched wherever it already fitted (the cap only bites
   below ~1204px, where the alternative is a horizontal scrollbar) and keeps
   the 130px offset the layout is built around. */
@media screen and (min-width: 992px) {
  .discove-details-wrap {
    max-width: min(1044px, 100% - 130px);
  }
}
/* ===========================================================================
   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;
  }
}