/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./styles/style.scss ***!
  \****************************************************************************************************************************************/
@charset "UTF-8";
/* -------------------------- *\
    BULTAG Styles
\* -------------------------- */
/* -------------------------- *\
    BULTAG Variables:
\* -------------------------- */
:root {
  /* Text */
  --font-family: "Montserrat", sans-serif;
  font-weight: 400;
  --default-font-size: 1.6rem;
  --line-height: 1.3rem;
  font-size: 10px;
}

/* Colors */
/* -------------------------- *\
    BULTAG Clearfix
\* -------------------------- */
/* -------------------------- *\
    Media Queries
\* -------------------------- */
/* -------------------------- *\
    Nav Menu
\* -------------------------- */
/* -------------------------- *\
    Transition
\* -------------------------- */
/* -------------------------- *\
    Transform Center
\* -------------------------- */
/* -------------------------- *\
   Hovers
\* -------------------------- */
/* -------------------------- *\
    BULTAG Reset
\* -------------------------- */
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  outline: 0;
  box-sizing: border-box;
}

@media (min-width: 1920px) {
  :root {
    font-size: 0.5209vw;
  }
}

* {
  -webkit-locale: "en";
  font-feature-settings: "locl" 0;
  white-space: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  --thumb-width: 33.5rem;
  --thumb-margin: 0.5rem;
  --thumb-total: calc(var(--thumb-width) + 2 * var(--thumb-margin));
  --header-height: 5.8rem;
  --header-hide: 0rem;
  --scroller-width: 0.7rem;
}
@media (min-width: 380px) {
  * {
    --thumb-margin: 1rem;
  }
}
@media (min-width: 990px) {
  * {
    --thumb-width: 28.5rem;
    --thumb-margin: 2.2rem;
  }
}
@media (min-width: 1024px) {
  * {
    --header-height: 15.5rem;
    --header-hide: -10.5rem;
  }
}

svg {
  --svg-fill: rgba(0,0,0,0);
  --svg-color: rgba(0,0,0,1);
}

/* -------------------------- *\
    BULTAG Base
\* -------------------------- */
body {
  background: #fff;
  font-family: var(--font-family);
  font-size: var(--default-font-size);
  line-height: var(--line-height);
  color: var(--text-color);
  min-height: 100%;
  overflow: visible;
  counter-reset: div;
  display: flex;
  justify-content: end;
  flex-direction: column;
  padding-top: var(--header-height);
}
body.has-filt {
  height: 100%;
}
body.ex {
  overflow: hidden;
}

html {
  font-size: 62.5%;
  overflow: visible;
  height: 100%;
}
html.ex {
  overflow: hidden;
}
@media (min-width: 1024px) {
  html.ex body {
    width: calc(100% - var(--scroller-width));
  }
  html.ex header {
    width: calc(100% - var(--scroller-width));
  }
}

a {
  text-decoration: none;
  transition: color 0.3s;
  color: #5F8508;
}
a:hover {
  color: #7BA914;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------- *\
    Shell
\* -------------------------- */
.shell {
  max-width: 160rem;
  margin: 0 auto;
}

section {
  padding: 5.5rem 1rem 4rem 1rem;
  position: relative;
  height: fit-content;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 319px) {
  section {
    padding: 3rem 1rem 1.5rem 1rem;
  }
}
@media (min-width: 380px) {
  section {
    padding: 5.5rem 2rem 5.5rem 2rem;
  }
}
@media (min-width: 990px) {
  section {
    padding: 7rem 2rem 2.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  section {
    padding: 7rem 4.5rem 2.5rem 4.5rem;
  }
}
section:before {
  content: "";
  width: 100%;
  height: 1.5rem;
  position: absolute;
  background: #EAEAEA;
  display: block;
  z-index: 10;
  bottom: 0;
  left: 0;
}
@media (min-width: 990px) {
  section:before {
    height: 2.5rem;
  }
}
section:last-of-type {
  margin-bottom: 0;
}
section:last-of-type:before {
  display: none;
}

figure {
  position: relative;
}
figure figcaption {
  position: absolute;
  z-index: -5;
  transform: translate(999vw, 0);
}

img.no-js {
  display: none;
}

input,
textarea {
  border: solid 0.1rem #000;
  max-width: 100%;
  font-family: var(--font-family);
  font-size: 1.6rem;
  line-height: 2.8rem;
  padding: 1rem;
}

input {
  height: 5rem;
}

.gform_wrapper form input {
  border: solid 0.1rem #000;
  border-radius: 0;
}
.gform_wrapper form label.gfield_label {
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
}
.gform_wrapper form label.gfield_label span {
  color: #7BA914;
}
.gform_wrapper form .gform_footer {
  padding: 0;
  margin: 0;
  grid-column: 1/span 2;
}
.gform_wrapper form .gform_footer input[type=submit] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 2rem;
  border-width: 0.1rem;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--font-family);
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
}
.gform_wrapper form .gform_footer input[type=submit]:hover {
  background: #E4E4E4;
}
.gform_wrapper form .gform_footer input[type=submit]:active {
  background: #000;
  color: #fff;
}
.gform_wrapper .gfield_html {
  font-style: normal;
  font-size: 1.2rem;
  line-height: 2.2rem;
}
.gform_wrapper .gfield_html a {
  color: #7BA914;
}
.gform_wrapper .field_sublabel_below {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-style: italic;
}
.gform_wrapper .field_sublabel_below label {
  font-style: normal;
}
.gform_wrapper .gfield_html {
  font-style: normal;
}

.scroller {
  scrollbar-color: #7BA914 #F2F2F2;
  scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
  background: #F2F2F2;
  width: var(--scroller-width);
  border-radius: 0.3rem;
  margin-left: 0.5rem;
}
.scroller::-webkit-scrollbar-thumb {
  background: #7BA914;
  border-radius: 0.3rem;
}
.scroller--hor {
  scrollbar-color: #7BA914 #F2F2F2;
  scrollbar-height: thin;
}
.scroller--hor::-webkit-scrollbar {
  background: #F2F2F2;
  height: var(--scroller-width);
  border-radius: 0.3rem;
}
.scroller--hor::-webkit-scrollbar-thumb {
  background: #7BA914;
  border-radius: 0.3rem;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  transition: top 0.3s;
  will-change: transform;
}

/* -------------------------- *\
    Typography:
\ -------------------------- */
/*@font-face {
    font-family: Tungsten Rounded;
    src: url("../fonts/tungsten-rounded/TungstenRounded-Light.eot");
    src: url("../fonts/tungsten-rounded/TungstenRounded-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/tungsten-rounded/TungstenRounded-Light.woff") format("woff"), url("../fonts/tungsten-rounded/TungstenRounded-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Tungsten Rounded;
    src: url("../fonts/tungsten-rounded/TungstenRounded-Book.eot");
    src: url("../fonts/tungsten-rounded/TungstenRounded-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/tungsten-rounded/TungstenRounded-Book.woff") format("woff"), url("../fonts/tungsten-rounded/TungstenRounded-Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Tungsten Rounded;
    src: url("../fonts/tungsten-rounded/TungstenRounded-Medium.eot");
    src: url("../fonts/tungsten-rounded/TungstenRounded-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/tungsten-rounded/TungstenRounded-Medium.woff") format("woff"), url("../fonts/tungsten-rounded/TungstenRounded-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Tungsten Rounded;
    src: url("../fonts/tungsten-rounded/TungstenRounded-SemiBold.eot");
    src: url("../fonts/tungsten-rounded/TungstenRounded-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/tungsten-rounded/TungstenRounded-SemiBold.woff") format("woff"), url("../fonts/tungsten-rounded/TungstenRounded-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Tungsten Rounded;
    src: url("../fonts/tungsten-rounded/TungstenRounded-Bold.eot");
    src: url("../fonts/tungsten-rounded/TungstenRounded-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/tungsten-rounded/TungstenRounded-Bold.woff") format("woff"), url("../fonts/tungsten-rounded/TungstenRounded-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Tungsten Rounded;
    src: url("../fonts/tungsten-rounded/TungstenRounded-Black.eot");
    src: url("../fonts/tungsten-rounded/TungstenRounded-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/tungsten-rounded/TungstenRounded-Black.woff") format("woff"), url("../fonts/tungsten-rounded/TungstenRounded-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal
}*/
p {
  font-size: var(--default-font-size);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #000;
}

/* -------------------------- *\
    .Sprite
\* -------------------------- */
.i {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/*
.i-Gluiten-Free-1 {
	font-size:(math.div(69,10))*1rem;
	width:(math.div(69,69))*1em;
}
.i-Lab-Tested {
	font-size:(math.div(67,10))*1rem;
	width:(math.div(67,67))*1em;
}
.i-Logo {
	font-size:(math.div(69,10))*1rem;
	width:(math.div(59,69))*1em;
}
.i-MINUS {
	font-size:(math.div(2,10))*1rem;
	width:(math.div(10,2))*1em;
}
.i-Non-GMO {
	font-size:(math.div(67,10))*1rem;
	width:(math.div(67,67))*1em;
}
.i-PLUS {
	font-size:(math.div(10,10))*1rem;
	width:(math.div(10,10))*1em;
}
.i-THC-free {
	font-size:(math.div(67,10))*1rem;
	width:(math.div(67,67))*1em;
}
.i-Vegan {
	font-size:(math.div(67,10))*1rem;
	width:(math.div(67,67))*1em;
}
.i-arr-big {
	font-size:(math.div(68,10))*1rem;
	width:(math.div(36,68))*1em;
}
.i-arr-down {
	font-size:(math.div(8,10))*1rem;
	width:(math.div(15,8))*1em;
}
.i-background {
	font-size:(math.div(30,10))*1rem;
	width:(math.div(31,30))*1em;
}
.i-basic_mail {
	font-size:(math.div(13,10))*1rem;
	width:(math.div(16,13))*1em;
}
.i-bg_shape1 {
	font-size:(math.div(263,10))*1rem;
	width:(math.div(428,263))*1em;
}
.i-bg_shape2 {
	font-size:(math.div(320,10))*1rem;
	width:(math.div(427,320))*1em;
}
.i-chat {
	font-size:(math.div(60.02,10))*1rem;
	width:(math.div(60.02,60.02))*1em;
}
.i-check {
	font-size:(math.div(13,10))*1rem;
	width:(math.div(17,13))*1em;
}
.i-clicking {
	font-size:(math.div(27,10))*1rem;
	width:(math.div(19,27))*1em;
}
.i-credit-card {
	font-size:(math.div(18,10))*1rem;
	width:(math.div(21,18))*1em;
}
.i-delivery {
	font-size:(math.div(18,10))*1rem;
	width:(math.div(34,18))*1em;
}
.i-dowble-right {
	font-size:(math.div(14,10))*1rem;
	width:(math.div(13,14))*1em;
}
.i-down_arr {
	font-size:(math.div(7,10))*1rem;
	width:(math.div(13,7))*1em;
}
.i-download {
	font-size:(math.div(29,10))*1rem;
	width:(math.div(29,29))*1em;
}
.i-eye {
	font-size:(math.div(512,10))*1rem;
	width:(math.div(512,512))*1em;
}
.i-facebook {
	font-size:(math.div(20,10))*1rem;
	width:(math.div(10,20))*1em;
}
.i-filters {
	font-size:(math.div(28,10))*1rem;
	width:(math.div(33,28))*1em;
}
.i-g_plus {
	font-size:(math.div(13,10))*1rem;
	width:(math.div(18,13))*1em;
}
.i-gold-medal {
	font-size:(math.div(25,10))*1rem;
	width:(math.div(22,25))*1em;
}
.i-hart_full {
	font-size:(math.div(27,10))*1rem;
	width:(math.div(29,27))*1em;
}
.i-heart {
	font-size:(math.div(27,10))*1rem;
	width:(math.div(29,27))*1em;
}
.i-instagram {
	font-size:(math.div(20,10))*1rem;
	width:(math.div(20,20))*1em;
}
.i-location {
	font-size:(math.div(26,10))*1rem;
	width:(math.div(20,26))*1em;
}
.i-logo_full_l {
	font-size:(math.div(313,10))*1rem;
	width:(math.div(134,313))*1em;
}
.i-logo_full_r {
	font-size:(math.div(313,10))*1rem;
	width:(math.div(133,313))*1em;
}
.i-logo_lines {
	font-size:(math.div(241,10))*1rem;
	width:(math.div(208,241))*1em;
}
.i-magnifiying-glass {
	font-size:(math.div(20,10))*1rem;
	width:(math.div(20,20))*1em;
}
.i-mail {
	font-size:(math.div(20,10))*1rem;
	width:(math.div(27,20))*1em;
}
.i-network {
	font-size:(math.div(27,10))*1rem;
	width:(math.div(28,27))*1em;
}
.i-percent {
	font-size:(math.div(19,10))*1rem;
	width:(math.div(20,19))*1em;
}
.i-phone {
	font-size:(math.div(24,10))*1rem;
	width:(math.div(24,24))*1em;
}
.i-refresh {
	font-size:(math.div(22,10))*1rem;
	width:(math.div(21,22))*1em;
}
.i-rss {
	font-size:(math.div(16,10))*1rem;
	width:(math.div(15,16))*1em;
}
.i-shop-bag {
	font-size:(math.div(25,10))*1rem;
	width:(math.div(19,25))*1em;
}
.i-sms {
	font-size:(math.div(18,10))*1rem;
	width:(math.div(20,18))*1em;
}
.i-star-full {
	font-size:(math.div(14,10))*1rem;
	width:(math.div(14,14))*1em;
}
.i-star-hollow {
	font-size:(math.div(14,10))*1rem;
	width:(math.div(15,14))*1em;
}
.i-trending {
	font-size:(math.div(18,10))*1rem;
	width:(math.div(14,18))*1em;
}
.i-twitter {
	font-size:(math.div(16,10))*1rem;
	width:(math.div(20,16))*1em;
}
.i-up-arrow {
	font-size:(math.div(17,10))*1rem;
	width:(math.div(12,17))*1em;
}
.i-user {
	font-size:(math.div(512,10))*1rem;
	width:(math.div(512,512))*1em;
}
.i-user-3 {
	font-size:(math.div(512,10))*1rem;
	width:(math.div(512,512))*1em;
}
.i-user_full {
	font-size:(math.div(17,10))*1rem;
	width:(math.div(15,17))*1em;
}
.i-whatsapp {
	font-size:(math.div(800,10))*1rem;
	width:(math.div(800,800))*1em;
}
.i-youtube {
	font-size:(math.div(14,10))*1rem;
	width:(math.div(20,14))*1em;
}
*/
/* -------------------------- *\
    .after_sprite
\* -------------------------- */
.i {
  transition: 0.3s ease;
}
.i.c1 {
  fill: #7BA914;
}
.i.c2 {
  fill: #F2F2F2;
}

.i-call.reda {
  font-size: 15rem;
  color: red;
}

.i-call {
  color: green;
  font-size: 50rem;
}

.i-bultag-logo {
  font-size: 200rem !important;
  color: red;
}

/* -------------------------- *\
    Plugins
\* -------------------------- */
/*@import "_flickity.css";*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/*@import "_image-viewer-lightbox-previewer";*/
/* -------------------------- *\
    slick-theme.css
\* -------------------------- */
/* Slider */
/* Icons */
/*@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}*/
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir=rtl] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "<";
  transform: scale(2, 1) !important;
}

[dir=rtl] .slick-prev:before {
  content: ">";
}

.slick-next {
  right: -25px;
}

[dir=rtl] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: ">";
  transform: scale(2, 1) rotate(90deg) !important;
  color: red;
}

[dir=rtl] .slick-next:before {
  content: "<";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:before {
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}

/* -------------------------- *\
    Styles
\* -------------------------- */
/* -------------------------- *\
    header - mobile
    .cover
    .message
\* -------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s;
}
header.ex {
  transform: translateY(var(--header-hide));
}
@media (max-width: 1023px) {
  header .button-h {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: end;
    position: relative;
    height: 100%;
    padding-bottom: 1rem;
    font-size: 0.8rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
  }
  header .h1_mob {
    display: grid;
    grid-template-columns: 5rem 1fr 20rem;
    background: #fff;
    height: 5.8rem;
  }
  header .h1_mob .logo {
    position: relative;
    opacity: 0;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header .h1_mob .logo {
    opacity: 1;
  }
}
@media (max-width: 1023px) and (min-width: 380px) {
  header .h1_mob .logo {
    transform: translateY(1rem);
  }
}
@media (max-width: 1023px) {
  header .h1_mob .open span,
header .h1_mob .open span:before,
header .h1_mob .open span:after {
    content: "";
    width: 2rem;
    height: 0.2rem;
    position: absolute;
    background: #000;
    display: block;
    border-radius: 0.2rem;
  }
  header .h1_mob .open span {
    top: 2rem;
  }
  header .h1_mob .open span:before {
    top: 0.6rem;
  }
  header .h1_mob .open span:after {
    top: 1.2rem;
  }
}
@media (max-width: 1023px) {
  header .h1_mob > div {
    display: flex;
  }
  header .h1_mob > div > * {
    width: 25%;
  }
  header .h1_mob > div > * svg {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.9rem;
    height: 1.9rem;
  }
  header .h1_mob > div > * span {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #7BA914;
    color: #fff;
    font-size: 0.711rem;
    line-height: 0.9rem;
    font-weight: 700;
  }
  header .h1_mob > div > *.h-fav > a svg {
    width: 2.3rem;
    height: 2.3rem;
  }
  header .h1_mob > div > *.cust_cart a svg {
    width: 2.3rem;
    height: 2.3rem;
  }
  header .h1_mob > div > *.cust_cart > div {
    display: none;
  }
}
@media (max-width: 1023px) {
  header .mob-ctrl {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100vw;
    height: 5.8rem;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr 5.8rem;
    transform: translateY(-100%);
    transition: transform 0.5s;
  }
  header .mob-ctrl.ex {
    transform: translateY(0);
  }
  header .mob-ctrl div:not(.button) {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  header .mob-ctrl div:not(.button) p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.5;
  }
  header .mob-ctrl div:not(.button).ex {
    background: #FBFBFD;
  }
  header .mob-ctrl div:not(.button).ex p {
    opacity: 1;
  }
  header .mob-ctrl .close {
    position: relative;
    padding-bottom: 1.5rem;
  }
  header .mob-ctrl .close:before, header .mob-ctrl .close:after {
    content: "";
    width: 2rem;
    height: 0.2rem;
    position: absolute;
    background: #000;
    display: block;
    top: 2rem;
    left: 2rem;
  }
  header .mob-ctrl .close:before {
    transform: rotate(45deg);
  }
  header .mob-ctrl .close:after {
    transform: rotate(-45deg);
  }
}
@media (max-width: 1023px) {
  header nav {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 200vw;
    height: calc(100vh - var(--header-height));
    overflow-y: scroll;
    background: #FBFBFD;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 7rem 7rem 7rem 7rem auto 1fr;
    transform: translateY(-100%);
    transition: transform 0.5s, left 0.5s;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav {
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 7rem 7rem auto 1fr;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  header nav {
    width: 100vw;
    grid-template-columns: calc(50% - 2rem) calc(25% - 3rem) calc(25% - 3rem);
    column-gap: 4rem;
    padding: 0 1rem;
  }
}
@media (max-width: 1023px) {
  header nav .logo-desk {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav .search {
    position: absolute;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    width: 100vw;
    height: var(--header-height);
    transform: translateY(100%);
    background: #fff;
    z-index: -5;
    opacity: 0;
    transition: all 0.3s;
    visibility: hidden;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header nav .search {
    gap: 1rem;
    padding: 0.5rem 1rem;
  }
}
@media (max-width: 1023px) {
  header nav .search svg {
    width: 2rem;
    height: 2rem;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header nav .search svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 1023px) {
  header nav .search input {
    height: 100%;
    border: none;
    border-radius: 2.5rem;
    background: #FBFBFD;
    padding: 0 1rem;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.6rem;
    font-family: var(--font-family);
  }
  header nav .search input::placeholder {
    font-family: var(--font-family);
    color: #000;
    opacity: 0.4;
  }
}
@media (max-width: 1023px) {
  header nav .search > p {
    font-size: 1.177rem;
    line-height: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 60%;
    border-radius: 2rem;
    background: #E4E4E4;
    position: relative;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header nav .search > p {
    width: 7rem;
  }
}
@media (max-width: 1023px) {
  header nav .search > p input {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
  }
}
@media (max-width: 1023px) {
  header nav .search > p span:nth-of-type(1) {
    display: none;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header nav .search > p span:nth-of-type(1) {
    display: inline;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header nav .search > p span:nth-of-type(2) {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav.ex {
    transform: translateY(5.8rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
  header nav.ex .search {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav.ex-left {
    left: -100vw;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  header nav.ex-left {
    left: 0;
  }
}
@media (max-width: 1023px) {
  header nav .tabs-h {
    display: flex;
    flex-flow: column;
    grid-row: 1/span 6;
    grid-column: 1/span 1;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav .tabs-h {
    grid-row: 1/span 4;
    grid-column: 1/span 1;
  }
}
@media (max-width: 1023px) {
  header nav .tabs-h li {
    list-style: none;
  }
  header nav .tabs-h li a,
header nav .tabs-h li a p {
    height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 0 3rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.8rem;
    letter-spacing: 0.058rem;
    text-transform: uppercase;
    position: relative;
    color: #000;
    border-bottom: solid 0.1rem #E4E4E4;
  }
  header nav .tabs-h li a.cont:before,
header nav .tabs-h li a p.cont:before {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    background: rgba(0, 0, 0, 0);
    display: block;
    border-right: solid 0.3rem #000;
    border-top: solid 0.3rem #000;
    top: 50%;
    right: 3rem;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform 0.3s;
  }
  header nav .tabs-h li a > svg,
header nav .tabs-h li a p > svg {
    width: 2.1rem;
    height: 2.1rem;
    fill: #000;
    margin-left: 1.5rem;
  }
  header nav .tabs-h li a .fav-count,
header nav .tabs-h li a p .fav-count {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    position: relative;
    bottom: 1rem;
    left: 0.5rem;
    background: #7BA914;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 700;
    padding-top: 0.2rem;
  }
  header nav .tabs-h li.ex a.cont::before {
    transform: translate(-50%, -50%) rotate(135deg);
  }
  header nav .tabs-h li > div {
    height: 0;
    overflow: hidden;
    transition: height 0.5s;
  }
  header nav .tabs-h li > div > ul > li > a {
    padding-left: 4rem;
  }
  header nav .tabs-h li > div > ul > li > a p {
    padding-left: 2rem;
  }
  header nav .tabs-h li.big-tab > div > ul > li > ul > li > a {
    padding-left: 5rem;
    gap: 2rem;
  }
  header nav .tabs-h li.big-tab > div > ul > li > ul > li > a > p {
    text-transform: none;
    padding: 0;
    width: auto;
  }
  header nav .tabs-h li.big-tab > div > ul > li > ul > li > a > p:nth-child(2) {
    color: #7BA914;
  }
}
@media (max-width: 1023px) {
  header nav .tabs-h > li > a > svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: #7BA914;
    margin-left: 1.5rem;
  }
}
@media (max-width: 1023px) {
  header nav .acc-link {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 0;
    width: fit-content;
    position: relative;
    align-self: center;
  }
  header nav .acc-link svg {
    width: 3rem;
    height: 3rem;
    grid-row: 1/span 2;
    margin-right: 0.8rem;
  }
  header nav .acc-link .big {
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
  }
  header nav .acc-link p:not(.big) {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
  header nav .acc-link > span {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 700;
    padding-top: 0.2rem;
    background: #7BA914;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    top: -0.2rem;
    left: 2rem;
  }
}
@media (max-width: 1023px) {
  header nav .acc {
    grid-row: 1/span 1;
    grid-column: 2/span 1;
    align-self: center;
  }
  header nav .acc > form {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav .cust_cart {
    grid-row: 2/span 1;
    grid-column: 2/span 1;
    align-self: center;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav .cust_cart {
    grid-row: 1/span 1;
    grid-column: 3/span 1;
  }
}
@media (max-width: 1023px) {
  header nav .cust_cart > div {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav .h-fav {
    grid-row: 3/span 1;
    grid-column: 2/span 1;
    align-self: center;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav .h-fav {
    grid-row: 2/span 1;
    grid-column: 2/span 1;
  }
}
@media (max-width: 1023px) {
  header nav .h-fav > div {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav .join {
    grid-row: 4/span 1;
    grid-column: 2/span 1;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav .join {
    grid-row: 2/span 1;
    grid-column: 3/span 1;
  }
}
@media (max-width: 1023px) {
  header nav .join p:not(.big) {
    font-size: 1.4rem;
  }
}
@media (max-width: 1023px) {
  header nav .links {
    grid-row: 5/span 1;
    grid-column: 2/span 1;
    display: flex;
    flex-flow: column;
    width: 100%;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav .links {
    grid-row: 3/span 1;
    grid-column: 2/span 2;
  }
}
@media (max-width: 1023px) {
  header nav .links li {
    list-style: none;
    height: 6rem;
    width: 100%;
    border-top: solid 0.1rem #E4E4E4;
  }
  header nav .links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    letter-spacing: 0.058rem;
    line-height: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
  }
}
@media (max-width: 1023px) {
  header nav .call-us {
    grid-row: 6/span 1;
    grid-column: 2/span 1;
    display: flex;
    flex-flow: column;
    align-items: center;
    border-top: solid 0.1rem #E4E4E4;
  }
}
@media (max-width: 1023px) and (min-width: 360px) {
  header nav .call-us {
    grid-row: 4/span 1;
    grid-column: 2/span 2;
  }
}
@media (max-width: 1023px) {
  header nav .call-us svg {
    display: inline-block;
    margin: 0 1rem;
  }
}
@media (max-width: 1023px) {
  header nav .call-us p {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  header nav .call-us p:first-child {
    height: 6.5rem;
    font-size: 1.6rem;
    line-height: 1.9rem;
    font-weight: 400;
  }
  header nav .call-us p:first-child svg {
    width: 2rem;
    height: 2rem;
  }
  header nav .call-us p:first-child a {
    color: #000;
  }
}
@media (max-width: 1023px) and (min-width: 320px) {
  header nav .call-us p:first-child a br {
    display: none;
  }
}
@media (max-width: 1023px) {
  header nav .call-us p:last-child {
    height: 4.5rem;
    width: 100%;
    background: #000;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.8rem;
  }
  header nav .call-us p:last-child a {
    color: #fff;
  }
  header nav .call-us p:last-child svg {
    fill: #fff;
    width: 2rem;
    height: 2rem;
  }
}
header.ex-search .search {
  opacity: 1;
  visibility: visible;
}
header.ex-search nav {
  overflow: visible;
}
header.ex-search .tabs-h {
  display: none;
}

body > .cover {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
body > .cover.ex {
  opacity: 0.5;
  visibility: visible;
}

.message {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  display: flex;
  padding: 2rem;
  width: calc(100% - 2vw);
  max-width: 30rem;
  position: absolute;
  top: calc(100% + 1rem);
  right: 1vw;
  border: solid 0.2rem rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  background: #fff;
}
.message p {
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 2.6rem;
}
.message.ex {
  opacity: 1;
  visibility: visible;
}

.test {
  position: fixed;
  top: 0;
  left: calc(50% - 0.1rem);
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
  opacity: 0.3;
}
.test img {
  display: block;
  width: fit-content;
  max-width: unset;
  height: auto;
}

/* -------------------------- *\
    header - desktop
\* -------------------------- */
@media (min-width: 1024px) {
  header {
    background: #fff;
    padding: 0 1rem;
  }
  header.ex nav > *:not(.tabs-h) {
    opacity: 0;
  }
  header .h1_mob,
header .mob-ctrl {
    display: none;
  }
  header:before {
    content: "";
    width: 100%;
    height: 3.5rem;
    position: absolute;
    background: #000;
    display: block;
    top: 0;
    left: 0;
  }
  header:after {
    content: "";
    width: 100%;
    height: 0.1rem;
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    display: block;
    bottom: 0;
  }
  header nav {
    position: relative;
    z-index: 10;
    max-width: 160rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto 2fr 1fr 2fr auto auto;
    grid-template-rows: 3.5rem 5rem 5rem;
    row-gap: 1rem;
  }
  header nav > *:not(.tabs-h) {
    opacity: 1;
    transition: opacity 0.3s;
  }
  header nav li {
    list-style: none;
  }
  header nav .join {
    grid-row: 1/span 1;
    grid-column: 1/span 1;
  }
  header nav .join > a {
    height: 100%;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    padding-right: 1.5rem;
  }
  header nav .join > a:before {
    content: "";
    width: 0.1rem;
    height: 1.7rem;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    display: block;
    right: 0;
    top: 1rem;
  }
  header nav .join > a svg {
    fill: #fff;
    width: 2rem;
    height: 2rem;
  }
  header nav .join > a p {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 400;
  }
  header nav .join > a p:last-of-type {
    font-weight: 700;
  }
  header nav .links {
    grid-row: 1/span 1;
    grid-column: 2/span 2;
    display: flex;
    max-width: 41rem;
    padding-left: 1rem;
    justify-content: space-between;
    align-items: center;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .links {
    padding-left: 3rem;
  }
}
@media (min-width: 1024px) {
  header nav .links li {
    display: block;
    transition: transform 0.2s;
  }
  header nav .links li a {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .links li a {
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  header nav .links li:hover {
    transform: scale(1.2);
  }
}
@media (min-width: 1024px) {
  header nav .call-us {
    grid-row: 1/span 1;
    grid-column: 5/span 3;
    display: flex;
    justify-self: end;
  }
  header nav .call-us p {
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.2s;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .call-us p {
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  header nav .call-us p:hover {
    transform: scale(1.05);
  }
}
@media (min-width: 1024px) {
  header nav .call-us p:first-of-type {
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  header nav .call-us p:last-of-type {
    font-weight: 700;
    position: relative;
    padding-left: 0.5rem;
  }
  header nav .call-us p:last-of-type:before {
    content: "";
    width: 0.1rem;
    height: 1.7rem;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    display: block;
    left: 0;
    top: 1rem;
  }
}
@media (min-width: 1024px) {
  header nav .call-us p svg {
    width: 2rem;
    height: 2rem;
    fill: #fff;
    display: inline-block;
    margin: 0 1rem;
    transform: translateY(0.5rem);
  }
}
@media (min-width: 1024px) {
  header nav .call-us p a {
    color: #fff;
  }
  header nav .call-us p a br {
    display: none;
  }
}
@media (min-width: 1024px) {
  header nav .logo-desk {
    grid-row: 2/span 1;
    grid-column: 1/span 2;
    margin: -1rem 0;
  }
  header nav .logo-desk img {
    height: 100%;
    width: auto;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) and (min-width: 1500px) {
  header nav .logo-desk {
    grid-row: 2/span 2;
    grid-column: 1/span 2;
    margin: 0;
  }
}
@media (min-width: 1024px) {
  header nav .search {
    grid-row: 2/span 1;
    grid-column: 3/span 3;
    background: #FBFBFD;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    border-radius: 2.5rem;
    margin: 0 2rem;
  }
  header nav .search svg {
    width: 2.1rem;
    height: 2.1rem;
    margin: 0 2rem;
  }
  header nav .search input {
    height: 100%;
    border: none;
    background: none;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-family: var(--font-family);
  }
  header nav .search input::placeholder {
    font-family: var(--font-family);
    color: #000;
    opacity: 0.4;
  }
  header nav .search p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.3rem;
    height: 3.3rem;
    margin: 0 1rem;
    background: #E6E6E6;
    font-size: 1.077rem;
    line-height: 1.3rem;
    font-weight: 700;
    border-radius: 1.683rem;
    text-transform: uppercase;
    transition: background 0.3s, color 0.3s;
    cursor: pointer;
    user-select: none;
    position: relative;
  }
  header nav .search p input {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
  }
  header nav .search p span:nth-of-type(2) {
    display: none;
  }
  header nav .search p:hover {
    background: #000;
    color: #fff;
  }
}
@media (min-width: 1024px) {
  header nav .acc {
    grid-row: 2/span 1;
    grid-column: 6/span 2;
    z-index: 10;
  }
  header nav .acc > a {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    height: 100%;
    gap: 1.5rem;
    padding-right: 3.7rem;
    position: relative;
  }
  header nav .acc > a:before {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    background: rgba(0, 0, 0, 0);
    display: block;
    border-right: solid 0.3rem #000;
    border-top: solid 0.3rem #000;
    top: 45%;
    right: 1rem;
    transform: translate(-50%, -50%) rotate(135deg);
    transition: transorm;
  }
  header nav .acc > a p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.8rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .acc > a p {
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  header nav .acc > a p.big {
    font-weight: 700;
  }
}
@media (min-width: 1024px) {
  header nav .acc > a svg {
    display: none;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h {
    grid-row: 3/span 1;
    grid-column: 1/span 5;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    max-width: 108rem;
    position: relative;
    padding: 0;
  }
}
@media (min-width: 1024px) and (min-width: 1500px) {
  header nav .tabs-h {
    grid-row: 3/span 1;
    grid-column: 3/span 3;
    padding: 0 2rem;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li {
    height: 100%;
    padding: 0 0.5rem;
    position: relative;
    text-align: center;
  }
  header nav .tabs-h > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    color: #000;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.058;
    line-height: 1.8rem;
    text-transform: uppercase;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .tabs-h > li > a {
    font-size: 1.4rem;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li > a:before {
    content: "";
    width: 100%;
    height: 0.3rem;
    position: absolute;
    background: #000;
    display: block;
    z-index: 10;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li > a svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #7BA914;
    display: inline-block;
    margin-left: 1rem;
    transform: translateY(-0.3rem);
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li > div {
    position: absolute;
    top: 100%;
    left: -1.5rem;
    background: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
  }
  header nav .tabs-h > li > div > ul {
    width: 30rem;
    padding: 0 1rem 1rem 1rem;
  }
  header nav .tabs-h > li > div > ul li {
    height: 5.5rem;
    width: 100%;
  }
  header nav .tabs-h > li > div > ul li a {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 2rem;
    width: 100%;
    height: 100%;
    padding-left: 2rem;
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  header nav .tabs-h > li > div > ul li a svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: #000;
  }
  header nav .tabs-h > li > div > ul li a p {
    font-size: 1.4rem;
    letter-spacing: 0.058rem;
    line-height: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  header nav .tabs-h > li > div > ul li a:hover {
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li:last-child {
    display: none;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li:hover > a:before {
    opacity: 1;
    visibility: visible;
  }
  header nav .tabs-h > li:hover > div {
    opacity: 1;
    visibility: visible;
  }
}
@media (min-width: 1024px) {
  header nav .tabs-h > li.big-tab {
    position: static;
  }
  header nav .tabs-h > li.big-tab > div {
    width: 100%;
  }
  header nav .tabs-h > li.big-tab > div > ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 6rem 3rem 4rem;
  }
  header nav .tabs-h > li.big-tab > div > ul > li {
    height: auto;
    width: auto;
  }
  header nav .tabs-h > li.big-tab > div > ul > li > a {
    height: 6rem;
    font-size: 1.4rem;
    letter-spacing: 0.058rem;
    line-height: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    opacity: 1;
  }
  header nav .tabs-h > li.big-tab > div > ul > li > ul > li {
    height: 3.8rem;
  }
  header nav .tabs-h > li.big-tab > div > ul > li > ul > li a p {
    text-transform: none;
  }
  header nav .tabs-h > li.big-tab > div > ul > li > ul > li a p:nth-child(2) {
    color: #7BA914;
    position: relative;
  }
  header nav .tabs-h > li.big-tab > div > ul > li > ul > li a p:nth-child(2):before {
    content: "";
    width: 0.1rem;
    height: 1.5rem;
    position: absolute;
    background: #000;
    display: block;
    top: 0;
    left: -1rem;
  }
}
@media (min-width: 1024px) {
  header nav .h-fav {
    grid-row: 3/span 1;
    grid-column: 6/span 1;
  }
  header nav .h-fav > a {
    padding: 0 0.5rem;
  }
}
@media (min-width: 1024px) and (min-width: 1500px) {
  header nav .h-fav > a {
    padding: 0 3rem 0 3rem;
  }
}
@media (min-width: 1024px) {
  header nav .h-fav > a span {
    left: 1.8rem;
    top: 1rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .h-fav > a span {
    top: 0.5rem;
    left: 2.7rem;
  }
}
@media (min-width: 1024px) and (min-width: 1500px) {
  header nav .h-fav > a span {
    left: 5.2rem;
    top: 0.2rem;
  }
}
@media (min-width: 1024px) {
  header nav .h-fav > a svg {
    width: 2rem;
    height: 2rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .h-fav > a svg {
    width: 3rem;
    height: 3rem;
  }
}
@media (min-width: 1024px) {
  header nav .cust_cart {
    grid-row: 3/span 1;
    grid-column: 7/span 1;
  }
  header nav .cust_cart > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding-left: 0.5rem;
  }
}
@media (min-width: 1024px) and (min-width: 1500px) {
  header nav .cust_cart > a {
    padding-left: 3rem;
  }
}
@media (min-width: 1024px) {
  header nav .cust_cart > a span {
    left: 3rem;
    top: 1rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .cust_cart > a span {
    top: 0.5rem;
    left: 3.5rem;
  }
}
@media (min-width: 1024px) and (min-width: 1500px) {
  header nav .cust_cart > a span {
    left: 5.2rem;
    top: 0.5rem;
  }
}
@media (min-width: 1024px) {
  header nav .cust_cart > a svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .cust_cart > a svg {
    width: 3rem;
    height: 3rem;
  }
}
@media (min-width: 1024px) {
  header nav .cust_cart > a:before {
    content: "";
    width: 0.1rem;
    height: 3.7rem;
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    display: block;
    left: 0;
  }
}
@media (min-width: 1024px) {
  header nav .h-fav,
header nav .cust_cart {
    position: relative;
    transform: translateY(-1rem);
  }
  header nav .h-fav > a,
header nav .cust_cart > a {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .h-fav > a,
header nav .cust_cart > a {
    gap: 1.2rem;
  }
}
@media (min-width: 1024px) {
  header nav .h-fav > a span,
header nav .cust_cart > a span {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    border-radius: 50%;
    background: #7BA914;
    color: #fff;
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 700;
    text-align: center;
    padding-top: 0.1rem;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  header nav .h-fav > a span,
header nav .cust_cart > a span {
    width: 1.8rem;
    height: 1.8rem;
    padding-top: 0.2rem;
  }
}
@media (min-width: 1024px) {
  header nav .h-fav > a p,
header nav .cust_cart > a p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
    font-weight: 700;
  }
  header nav .h-fav > a p:last-of-type,
header nav .cust_cart > a p:last-of-type {
    display: none;
  }
}

.club-fixed {
  display: flex;
  gap: 1rem;
  height: 4rem;
  position: fixed;
  z-index: 1000;
  left: 0;
  bottom: 0;
  transform-origin: bottom left;
  transform: rotate(-90deg) translateY(100%);
}
@media (max-width: 1023px) {
  .club-fixed {
    display: none;
  }
}
.club-fixed > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 2rem;
  border-bottom-right-radius: 1rem;
}
.club-fixed > div:first-child {
  background: #fff;
  color: #000;
  font-size: 1.2rem;
  line-height: 1.5rem;
  filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.2));
}
.club-fixed > div:last-child {
  background: #000;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.8rem;
  border-bottom-left-radius: 1rem;
}
.club-fixed > div:last-child svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: #fff;
}

.fixed-chat {
  position: fixed;
  z-index: 1000;
  bottom: 1.5rem;
  right: 1.5rem;
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  background: #7BA914;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  border-radius: 3.8rem;
  border-top-right-radius: 0.8rem;
}
@media (max-width: 1023px) {
  .fixed-chat {
    display: none;
  }
}
.fixed-chat span {
  display: block;
  background: #fff;
  width: 2.8rem;
  height: 0.4rem;
  border-radius: 0.247rem;
  position: absolute;
  top: 40%;
  right: 1.8rem;
  overflow: visible;
}
.fixed-chat span:before, .fixed-chat span:after {
  content: "";
  background: #fff;
  height: 100%;
  border-radius: 0.247rem;
  position: absolute;
  top: 1rem;
}
.fixed-chat span:before {
  left: 0;
  width: 73%;
}
.fixed-chat span:after {
  right: 0;
  width: 17%;
}

/* -------------------------- *\
    .acc
    .cust_cart
    .h-fav
    .join
    .cart_sect
\* -------------------------- */
@media (max-width: 1023px) {
  header nav .acc,
.cust_cart,
header nav .h-fav,
header nav .join {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 7vw;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  header nav .acc,
.cust_cart,
header nav .h-fav,
header nav .join {
    padding-left: 2vw;
  }
}
header nav .acc .acc-btn,
.cust_cart .acc-btn,
header nav .h-fav .acc-btn,
header nav .join .acc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
  height: 4.5rem;
  border-radius: 2.8rem;
  transition: font-size 0.2s;
}
@media (max-width: 379px) {
  header nav .acc .acc-btn,
.cust_cart .acc-btn,
header nav .h-fav .acc-btn,
header nav .join .acc-btn {
    gap: 1rem;
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
}
header nav .acc .acc-btn:hover,
.cust_cart .acc-btn:hover,
header nav .h-fav .acc-btn:hover,
header nav .join .acc-btn:hover {
  font-size: 1.8rem;
}
header nav .acc input:not(.qty),
.cust_cart input:not(.qty),
header nav .h-fav input:not(.qty),
header nav .join input:not(.qty) {
  font-family: var(--font-family);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  border: solid 0.1rem #E4E4E4;
}
header nav .acc > div:not(.woocommerce-notices-wrapper), header nav .acc > form,
.cust_cart > div:not(.woocommerce-notices-wrapper),
.cust_cart > form,
header nav .h-fav > div:not(.woocommerce-notices-wrapper),
header nav .h-fav > form,
header nav .join > div:not(.woocommerce-notices-wrapper),
header nav .join > form {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  background: #fff;
  position: absolute;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border: solid 0.1rem #E4E4E4;
  margin: 0;
}
@media (max-width: 1023px) {
  header nav .acc > div:not(.woocommerce-notices-wrapper), header nav .acc > form,
.cust_cart > div:not(.woocommerce-notices-wrapper),
.cust_cart > form,
header nav .h-fav > div:not(.woocommerce-notices-wrapper),
header nav .h-fav > form,
header nav .join > div:not(.woocommerce-notices-wrapper),
header nav .join > form {
    left: 50%;
  }
}
header nav .acc > div:not(.woocommerce-notices-wrapper) .password-input, header nav .acc > form .password-input,
.cust_cart > div:not(.woocommerce-notices-wrapper) .password-input,
.cust_cart > form .password-input,
header nav .h-fav > div:not(.woocommerce-notices-wrapper) .password-input,
header nav .h-fav > form .password-input,
header nav .join > div:not(.woocommerce-notices-wrapper) .password-input,
header nav .join > form .password-input {
  display: block;
  width: 100%;
}
header nav .acc:hover > div, header nav .acc:hover > form,
.cust_cart:hover > div,
.cust_cart:hover > form,
header nav .h-fav:hover > div,
header nav .h-fav:hover > form,
header nav .join:hover > div,
header nav .join:hover > form {
  opacity: 1;
  pointer-events: all;
}

header nav .acc > div:not(.woocommerce-notices-wrapper):after, header nav .acc > form:after,
header nav .cust_cart > div:not(.woocommerce-notices-wrapper):after,
header nav .cust_cart > form:after,
header nav .h-fav > div:not(.woocommerce-notices-wrapper):after,
header nav .h-fav > form:after,
header nav .join > div:not(.woocommerce-notices-wrapper):after,
header nav .join > form:after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  background: #fff;
  display: block;
  border-top: solid 0.1rem #E4E4E4;
  border-right: solid 0.1rem #E4E4E4;
  transform: translate(8.5rem, -3.6rem) rotate(-45deg);
}
@media (max-width: 1023px) {
  header nav .acc > div:not(.woocommerce-notices-wrapper):after, header nav .acc > form:after,
header nav .cust_cart > div:not(.woocommerce-notices-wrapper):after,
header nav .cust_cart > form:after,
header nav .h-fav > div:not(.woocommerce-notices-wrapper):after,
header nav .h-fav > form:after,
header nav .join > div:not(.woocommerce-notices-wrapper):after,
header nav .join > form:after {
    content: none;
  }
}

header nav .acc .woocommerce-form {
  margin: 0;
}
header nav .acc .woocommerce-form-login {
  margin-right: 0;
}
header nav .acc > form, header nav .acc > div {
  top: 9.5rem;
  right: 0;
  width: 32.4rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 3rem 2rem 3rem;
}
@media (max-width: 1023px) {
  header nav .acc > form, header nav .acc > div {
    top: 14rem;
    width: 100vw;
  }
}
@media (max-width: 359px) {
  header nav .acc > form, header nav .acc > div {
    top: 28rem;
  }
}
header nav .acc > form .acc__top, header nav .acc > div .acc__top {
  color: #7BA914;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
}
header nav .acc > form .acc__inst, header nav .acc > div .acc__inst {
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 400;
  margin-bottom: 2rem;
}
header nav .acc > form .acc__top a,
header nav .acc > form .acc__inst a, header nav .acc > div .acc__top a,
header nav .acc > div .acc__inst a {
  color: #000;
}
header nav .acc > form .acc__top a:hover,
header nav .acc > form .acc__inst a:hover, header nav .acc > div .acc__top a:hover,
header nav .acc > div .acc__inst a:hover {
  color: #7BA914;
}
header nav .acc > form input, header nav .acc > div input {
  width: 100%;
  height: 4.5rem;
}
header nav .acc > form input::placeholder, header nav .acc > div input::placeholder {
  color: #000;
  opacity: 0.5;
}
header nav .acc > form .acc_log, header nav .acc > div .acc_log {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
  background: #7BA914;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border: none;
}
header nav .acc > form .acc__bot, header nav .acc > div .acc__bot {
  font-size: 1.2rem;
  line-height: 1.5rem;
}
header nav .acc > form .acc__bot span, header nav .acc > div .acc__bot span {
  opacity: 0.5;
}
header nav .acc > form .acc__bot a, header nav .acc > div .acc__bot a {
  color: #5F8508;
  font-weight: 600;
}

.cust_cart > form:before {
  transform: translate(39.5rem, -2.6rem) rotate(-45deg);
}

.cust_cart .product-thumbnail img {
  margin: 0 auto;
}

header nav .h-fav > div:before {
  transform: translate(26.5rem, -2.6rem) rotate(-45deg);
}

.cust_cart > div, .cust_cart > form,
header nav .h-fav > div,
header nav .h-fav > form {
  right: 0;
  top: 100%;
  width: 47.1rem;
  display: flex;
  gap: 3rem;
  flex-flow: column;
  padding: 2rem 1.5rem 2.5rem 1.5rem;
}
@media (max-width: 1023px) {
  .cust_cart > div, .cust_cart > form,
header nav .h-fav > div,
header nav .h-fav > form {
    top: 14rem;
    width: 100vw;
  }
}
@media (max-width: 359px) {
  .cust_cart > div, .cust_cart > form,
header nav .h-fav > div,
header nav .h-fav > form {
    top: 28rem;
  }
}
.cust_cart > div > div, .cust_cart > form > div,
header nav .h-fav > div > div,
header nav .h-fav > form > div {
  position: relative;
}
.cust_cart > div > div:after, .cust_cart > form > div:after,
header nav .h-fav > div > div:after,
header nav .h-fav > form > div:after {
  content: "";
  width: 100%;
  height: 0.1rem;
  position: absolute;
  background: #E4E4E4;
  display: block;
  bottom: -1.5rem;
  left: 0;
}
.cust_cart > div > div:last-child:after, .cust_cart > form > div:last-child:after,
header nav .h-fav > div > div:last-child:after,
header nav .h-fav > form > div:last-child:after {
  content: none;
}
.cust_cart > div .cart__item, .cust_cart > form .cart__item,
header nav .h-fav > div .cart__item,
header nav .h-fav > form .cart__item {
  display: grid;
  grid-template-columns: 8.3rem 1fr;
  gap: 1rem;
}
@media (min-width: 380px) {
  .cust_cart > div .cart__item, .cust_cart > form .cart__item,
header nav .h-fav > div .cart__item,
header nav .h-fav > form .cart__item {
    grid-template-columns: 8.3rem 1fr 10.3rem;
    gap: 3rem;
  }
}
.cust_cart > div .cart__item .item-data, .cust_cart > form .cart__item .item-data,
header nav .h-fav > div .cart__item .item-data,
header nav .h-fav > form .cart__item .item-data {
  display: flex;
  gap: 0.3rem;
  flex-flow: column;
  justify-content: center;
}
.cust_cart > div .cart__item .item-data .product-name a, .cust_cart > form .cart__item .item-data .product-name a,
header nav .h-fav > div .cart__item .item-data .product-name a,
header nav .h-fav > form .cart__item .item-data .product-name a {
  color: #000;
}
.cust_cart > div .cart__item .item-data .product-name a:hover, .cust_cart > form .cart__item .item-data .product-name a:hover,
header nav .h-fav > div .cart__item .item-data .product-name a:hover,
header nav .h-fav > form .cart__item .item-data .product-name a:hover {
  color: #5F8508;
}
.cust_cart > div .cart__item .item-data p, .cust_cart > form .cart__item .item-data p,
header nav .h-fav > div .cart__item .item-data p,
header nav .h-fav > form .cart__item .item-data p {
  font-size: 1.4rem;
  letter-spacing: 0.058rem;
  line-height: 1.8rem;
}
.cust_cart > div .cart__item .item-data p:nth-child(1), .cust_cart > form .cart__item .item-data p:nth-child(1),
header nav .h-fav > div .cart__item .item-data p:nth-child(1),
header nav .h-fav > form .cart__item .item-data p:nth-child(1) {
  font-weight: 600;
}
.cust_cart > div .cart__item .item-data p:nth-child(2), .cust_cart > form .cart__item .item-data p:nth-child(2),
header nav .h-fav > div .cart__item .item-data p:nth-child(2),
header nav .h-fav > form .cart__item .item-data p:nth-child(2) {
  margin-bottom: 0.5rem;
  display: block;
  min-height: 1.8rem;
}
.cust_cart > div .cart__item .item-data p:nth-child(3) span:nth-child(1), .cust_cart > form .cart__item .item-data p:nth-child(3) span:nth-child(1),
header nav .h-fav > div .cart__item .item-data p:nth-child(3) span:nth-child(1),
header nav .h-fav > form .cart__item .item-data p:nth-child(3) span:nth-child(1) {
  font-weight: 600;
  color: #5F8508;
}
.cust_cart > div .cart__item .item-data p:nth-child(3) span:nth-child(2), .cust_cart > form .cart__item .item-data p:nth-child(3) span:nth-child(2),
header nav .h-fav > div .cart__item .item-data p:nth-child(3) span:nth-child(2),
header nav .h-fav > form .cart__item .item-data p:nth-child(3) span:nth-child(2) {
  font-weight: 600;
  opacity: 0.33;
  text-decoration: line-through;
}
.cust_cart > div .cart__item .item-qty, .cust_cart > form .cart__item .item-qty,
header nav .h-fav > div .cart__item .item-qty,
header nav .h-fav > form .cart__item .item-qty {
  display: flex;
  flex-flow: column;
  align-items: center;
}
@media (max-width: 379px) {
  .cust_cart > div .cart__item .item-qty, .cust_cart > form .cart__item .item-qty,
header nav .h-fav > div .cart__item .item-qty,
header nav .h-fav > form .cart__item .item-qty {
    grid-column: 1/span 2;
    max-width: 25rem;
    width: 100%;
    margin: 0 auto;
  }
}
.cust_cart > div .cart__item .item-qty .qty-btn--nav, .cust_cart > form .cart__item .item-qty .qty-btn--nav,
header nav .h-fav > div .cart__item .item-qty .qty-btn--nav,
header nav .h-fav > form .cart__item .item-qty .qty-btn--nav {
  width: 100%;
  height: 3.5rem;
  border-radius: 0.5rem;
  border: solid 0.1rem #E4E4E4;
  margin-bottom: 1rem;
  --btn-width: 3rem;
  --sign-len: 1.1rem;
  --sign-thick: 0.2rem;
  --sign-offset: 1.2rem;
  --font-size: 1.4rem;
  --letter-spacing: 0.058rem;
  --line-height: 1.8rem;
}
.cust_cart > div .cart__item .item-qty .remove, .cust_cart > form .cart__item .item-qty .remove,
header nav .h-fav > div .cart__item .item-qty .remove,
header nav .h-fav > form .cart__item .item-qty .remove {
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
  font-weight: 600;
  display: block;
  padding-left: 1.5rem;
  opacity: 0.5;
  transition: color 0.2s;
  position: relative;
  cursor: pointer;
  user-select: none;
  width: fit-content;
  color: #000 !important;
  border-radius: 0;
  background: none;
  height: unset;
}
.cust_cart > div .cart__item .item-qty .remove a, .cust_cart > form .cart__item .item-qty .remove a,
header nav .h-fav > div .cart__item .item-qty .remove a,
header nav .h-fav > form .cart__item .item-qty .remove a {
  color: #000;
}
.cust_cart > div .cart__item .item-qty .remove:before, .cust_cart > div .cart__item .item-qty .remove:after, .cust_cart > form .cart__item .item-qty .remove:before, .cust_cart > form .cart__item .item-qty .remove:after,
header nav .h-fav > div .cart__item .item-qty .remove:before,
header nav .h-fav > div .cart__item .item-qty .remove:after,
header nav .h-fav > form .cart__item .item-qty .remove:before,
header nav .h-fav > form .cart__item .item-qty .remove:after {
  content: "";
  width: 1rem;
  height: 0.2rem;
  position: absolute;
  background: #000;
  display: block;
  top: 50%;
  left: 0.5rem;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background 0.2s;
}
.cust_cart > div .cart__item .item-qty .remove:after, .cust_cart > form .cart__item .item-qty .remove:after,
header nav .h-fav > div .cart__item .item-qty .remove:after,
header nav .h-fav > form .cart__item .item-qty .remove:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.cust_cart > div .cart__item .item-qty .remove:hover, .cust_cart > form .cart__item .item-qty .remove:hover,
header nav .h-fav > div .cart__item .item-qty .remove:hover,
header nav .h-fav > form .cart__item .item-qty .remove:hover {
  color: #7BA914;
}
.cust_cart > div .cart__item .item-qty .remove:hover a, .cust_cart > form .cart__item .item-qty .remove:hover a,
header nav .h-fav > div .cart__item .item-qty .remove:hover a,
header nav .h-fav > form .cart__item .item-qty .remove:hover a {
  color: #7BA914;
}
.cust_cart > div .cart__item .item-qty .remove:hover:before, .cust_cart > div .cart__item .item-qty .remove:hover:after, .cust_cart > form .cart__item .item-qty .remove:hover:before, .cust_cart > form .cart__item .item-qty .remove:hover:after,
header nav .h-fav > div .cart__item .item-qty .remove:hover:before,
header nav .h-fav > div .cart__item .item-qty .remove:hover:after,
header nav .h-fav > form .cart__item .item-qty .remove:hover:before,
header nav .h-fav > form .cart__item .item-qty .remove:hover:after {
  background: #7BA914;
}
.cust_cart > div .cart__item .item-qty .remove:hover, .cust_cart > form .cart__item .item-qty .remove:hover,
header nav .h-fav > div .cart__item .item-qty .remove:hover,
header nav .h-fav > form .cart__item .item-qty .remove:hover {
  color: #7BA914 !important;
  opacity: 1;
}
.cust_cart > div .cart__item .item-qty p, .cust_cart > form .cart__item .item-qty p,
header nav .h-fav > div .cart__item .item-qty p,
header nav .h-fav > form .cart__item .item-qty p {
  font-size: 1.4rem;
  letter-spacing: 0.058rem;
  line-height: 1.8rem;
  font-weight: 600;
  color: #5F8508;
}
.cust_cart > div .cart__disc, .cust_cart > form .cart__disc,
header nav .h-fav > div .cart__disc,
header nav .h-fav > form .cart__disc {
  display: grid;
  grid-template-columns: 1fr 9.5rem;
  grid-template-rows: auto 3.5rem;
  gap: 1rem;
}
.cust_cart > div .cart__disc > p, .cust_cart > form .cart__disc > p,
header nav .h-fav > div .cart__disc > p,
header nav .h-fav > form .cart__disc > p {
  grid-column: 1/span 2;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
  opacity: 0.5;
}
.cust_cart > div .cart__disc input, .cust_cart > form .cart__disc input,
header nav .h-fav > div .cart__disc input,
header nav .h-fav > form .cart__disc input {
  width: 100%;
  height: 100%;
}
.cust_cart > div .cart__disc button, .cust_cart > form .cart__disc button,
header nav .h-fav > div .cart__disc button,
header nav .h-fav > form .cart__disc button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.058rem;
  line-height: 1.8rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: font-size 0.3s;
}
.cust_cart > div .cart__disc button:hover, .cust_cart > form .cart__disc button:hover,
header nav .h-fav > div .cart__disc button:hover,
header nav .h-fav > form .cart__disc button:hover {
  font-size: 1.8rem;
}
.cust_cart > div .cart__co, .cust_cart > form .cart__co,
header nav .h-fav > div .cart__co,
header nav .h-fav > form .cart__co {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 2rem;
  padding: 0 1rem;
}
.cust_cart > div .cart__co p, .cust_cart > form .cart__co p,
header nav .h-fav > div .cart__co p,
header nav .h-fav > form .cart__co p {
  font-size: 1.6rem;
  letter-spacing: 0.067rem;
  line-height: 1.9rem;
  font-weight: 600;
}
.cust_cart > div .cart__co p:nth-of-type(2), .cust_cart > form .cart__co p:nth-of-type(2),
header nav .h-fav > div .cart__co p:nth-of-type(2),
header nav .h-fav > form .cart__co p:nth-of-type(2) {
  color: #7BA914;
  justify-self: end;
}
.cust_cart > div .cart__co a, .cust_cart > form .cart__co a,
header nav .h-fav > div .cart__co a,
header nav .h-fav > form .cart__co a {
  color: #fff;
  width: 100%;
}
.cust_cart > div .cart__co a svg, .cust_cart > form .cart__co a svg,
header nav .h-fav > div .cart__co a svg,
header nav .h-fav > form .cart__co a svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #fff;
}
.cust_cart > div .cart__co a:nth-of-type(1), .cust_cart > form .cart__co a:nth-of-type(1),
header nav .h-fav > div .cart__co a:nth-of-type(1),
header nav .h-fav > form .cart__co a:nth-of-type(1) {
  background: #000;
}
.cust_cart > div .cart__co a:nth-of-type(2), .cust_cart > form .cart__co a:nth-of-type(2),
header nav .h-fav > div .cart__co a:nth-of-type(2),
header nav .h-fav > form .cart__co a:nth-of-type(2) {
  background: #7BA914;
}
.cust_cart > div .update, .cust_cart > form .update,
header nav .h-fav > div .update,
header nav .h-fav > form .update {
  display: none;
  margin-top: 2rem;
}
.cust_cart > div .update button, .cust_cart > form .update button,
header nav .h-fav > div .update button,
header nav .h-fav > form .update button {
  padding-left: 2rem;
  padding-right: 2rem;
}
.cust_cart > div .update.ex, .cust_cart > form .update.ex,
header nav .h-fav > div .update.ex,
header nav .h-fav > form .update.ex {
  display: flex;
  justify-content: end;
}
.cust_cart > div .fav-link, .cust_cart > form .fav-link,
header nav .h-fav > div .fav-link,
header nav .h-fav > form .fav-link {
  background: #000;
  color: #fff;
  width: 26.8rem;
  margin: 0 auto;
  margin-top: 1rem;
}
.cust_cart > div .fav-link svg, .cust_cart > form .fav-link svg,
header nav .h-fav > div .fav-link svg,
header nav .h-fav > form .fav-link svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #fff;
}

.cust_cart form {
  padding: 0;
}

.cust_cart .cart_totals {
  display: none;
}

.cart_sect {
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: block;
}
.cart_sect h1 {
  text-align: center;
  margin-bottom: 2rem;
}
.cart_sect form.woocommerce-cart-form {
  opacity: 1;
  pointer-events: all;
  position: relative;
  top: unset;
  right: unset;
  left: unset;
  margin: 0 auto 3rem auto;
  width: 100%;
}
@media (min-width: 768px) {
  .cart_sect form.woocommerce-cart-form {
    width: 80%;
  }
}
@media (min-width: 1200px) {
  .cart_sect form.woocommerce-cart-form {
    width: 50%;
  }
}
.cart_sect form.woocommerce-cart-form > a {
  display: none;
}
.cart_sect form.woocommerce-cart-form > div {
  position: relative;
  opacity: 1;
  width: 100%;
  top: unset;
  left: unset;
}
.cart_sect form.woocommerce-cart-form .cart__co {
  display: none;
}
.cart_sect .cart_totals h2 {
  margin-bottom: 1rem;
}
.cart_sect .cust_cart {
  padding-left: 0;
}
.cart_sect .cart-collaterals.cart__co {
  display: block;
  position: relative;
  opacity: 1;
  pointer-events: all;
  width: 100%;
  margin: 0 auto;
  left: unset;
  top: unset;
}
@media (min-width: 768px) {
  .cart_sect .cart-collaterals.cart__co {
    width: 80%;
  }
}
@media (min-width: 1200px) {
  .cart_sect .cart-collaterals.cart__co {
    width: 50%;
  }
}
.cart_sect .cart-collaterals.cart__co .cart_totals {
  display: block;
  float: unset;
  width: 100%;
}
.cart_sect .cart-collaterals.cart__co .cart_totals .wc-proceed-to-checkout {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .cart_sect .cart-collaterals.cart__co .cart_totals .wc-proceed-to-checkout {
    width: 80%;
  }
}
@media (min-width: 1200px) {
  .cart_sect .cart-collaterals.cart__co .cart_totals .wc-proceed-to-checkout {
    width: 50%;
  }
}

/* -------------------------- *\
    footer
\* -------------------------- */
footer {
  background: #000;
  overflow: hidden;
  padding: 0 2rem;
}
footer li {
  list-style: none;
}
footer .shell {
  padding: 4rem 0 2rem 0;
}
@media (min-width: 1024px) {
  footer .shell {
    padding-bottom: 1rem;
  }
}
footer .shell div a {
  color: #fff;
  font-size: 1.68rem;
  letter-spacing: 0.053rem;
  line-height: 2rem;
  display: block;
  width: fit-content;
  position: relative;
}
@media (min-width: 1024px) {
  footer .shell div a {
    font-size: 1.4rem;
    letter-spacing: 0.044rem;
    line-height: 1.8rem;
  }
}
footer .shell div a:before {
  content: "";
  width: 0;
  height: 0.1rem;
  position: absolute;
  background: #fff;
  display: block;
  top: 100%;
  left: 0;
  transition: width 0.5s;
}
footer .shell div a:hover:before {
  width: 100%;
}
footer .shell div > a {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
}
@media (min-width: 380px) {
  footer .shell div > a {
    margin-bottom: 4rem;
  }
}
footer .shell div > a:after {
  content: "";
  width: 1rem;
  height: 0.1rem;
  position: absolute;
  background: #7BA914;
  display: block;
  left: 0;
  top: 150%;
  pointer-events: none;
}
@media (min-width: 380px) {
  footer .shell div > a:after {
    top: 200%;
  }
}
footer .shell .top {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  footer .shell .top {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
}
footer .shell .top > a:after {
  content: none;
}
footer .shell .top .call-us {
  display: flex;
  flex-flow: column;
  align-items: center;
}
@media (min-width: 1024px) {
  footer .shell .top .call-us {
    flex-flow: row;
  }
}
footer .shell .top .call-us svg {
  fill: #fff;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  margin: 0 1rem;
}
@media (min-width: 1024px) {
  footer .shell .top .call-us svg {
    width: 2.1rem;
    height: 2.1rem;
  }
}
footer .shell .top .call-us p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  letter-spacing: unset;
  flex-wrap: wrap;
}
@media (min-width: 380px) {
  footer .shell .top .call-us p {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1024px) {
  footer .shell .top .call-us p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
footer .shell .top .call-us p:first-child {
  height: 6.5rem;
  font-weight: 400;
}
@media (min-width: 1024px) {
  footer .shell .top .call-us p:first-child {
    padding-right: 1rem;
  }
}
footer .shell .top .call-us p:first-child span {
  width: 100%;
}
@media (min-width: 380px) {
  footer .shell .top .call-us p:first-child span {
    width: unset;
  }
}
footer .shell .top .call-us p:first-child a {
  color: #fff;
}
footer .shell .top .call-us p:first-child strong {
  font-size: 2.16rem;
}
@media (min-width: 1024px) {
  footer .shell .top .call-us p:first-child strong {
    font-size: 1.8rem;
  }
}
footer .shell .top .call-us p:last-child {
  height: 4.5rem;
  width: 100%;
  font-weight: 700;
}
@media (min-width: 1024px) {
  footer .shell .top .call-us p:last-child {
    width: unset;
    padding-left: 0.5rem;
    position: relative;
  }
  footer .shell .top .call-us p:last-child:before {
    content: "";
    width: 0.1rem;
    height: 1.5rem;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    display: block;
    left: 0;
    top: 1.5rem;
  }
}
footer .shell .mid {
  display: grid;
  row-gap: 4rem;
  padding: 0 1rem 0 1rem;
}
@media (min-width: 380px) {
  footer .shell .mid {
    padding: 0 1rem 0 2.5rem;
  }
}
@media (min-width: 768px) {
  footer .shell .mid {
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
  }
}
@media (min-width: 1024px) {
  footer .shell .mid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 3rem;
  }
}
@media (min-width: 1600px) {
  footer .shell .mid {
    grid-template-columns: repeat(5, auto);
    column-gap: 0rem;
    padding-bottom: 4rem;
  }
}
@media (min-width: 380px) {
  footer .shell .mid > div ul.two-col {
    column-count: 2;
    column-gap: 0;
  }
}
@media (min-width: 1024px) {
  footer .shell .mid > div ul.two-col {
    column-count: 1;
  }
}
footer .shell .mid > div ul li a {
  display: block;
  margin-bottom: 1rem;
}
@media (min-width: 380px) {
  footer .shell .mid > div ul li a {
    margin-bottom: 2rem;
  }
}
footer .shell .mid__last {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}
@media (min-width: 380px) {
  footer .shell .mid__last {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  footer .shell .mid__last {
    grid-column: 1/span 2;
  }
}
@media (min-width: 1024px) {
  footer .shell .mid__last {
    grid-column: 2/span 2;
  }
}
@media (min-width: 1600px) {
  footer .shell .mid__last {
    grid-column: unset;
    align-items: start;
    grid-template-rows: auto auto 1fr;
    grid-row-gap: 1rem;
  }
}
@media (min-width: 380px) {
  footer .shell .mid__last .contacts {
    grid-row: 1/span 2;
    grid-column: 1/span 1;
  }
}
@media (min-width: 1600px) {
  footer .shell .mid__last .video-blog {
    display: flex;
    gap: 6rem;
  }
}
footer .shell .mid__last .video-blog a {
  margin-bottom: 3rem;
}
footer .shell .mid__last .video-blog a:after {
  display: none;
}
footer .shell .mid__last .soc {
  display: flex;
}
@media (min-width: 1600px) {
  footer .shell .mid__last .soc {
    grid-row: 3/span 1;
    grid-column: 1/span 1;
  }
}
footer .shell .mid__last .soc li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.8rem;
  height: 4.8rem;
  transition: transform 0.2s;
  position: relative;
}
footer .shell .mid__last .soc li:before {
  content: "";
  width: 3.6rem;
  height: 3.6rem;
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  display: block;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
footer .shell .mid__last .soc li a {
  margin: 0;
}
footer .shell .mid__last .soc li a:hover:before {
  display: none;
}
footer .shell .mid__last .soc li svg {
  width: 2rem;
  height: 2rem;
  position: relative;
  z-index: 10;
}
footer .shell .mid__last .soc li:hover {
  transform: scale(1.4);
}
footer .shell .mid__last .pay {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: auto 4.5rem 4.5rem;
  flex-wrap: wrap;
  max-width: 23.1rem;
  margin-top: 4rem;
}
@media (min-width: 380px) {
  footer .shell .mid__last .pay {
    grid-column: 1/span 2;
  }
}
@media (min-width: 1600px) {
  footer .shell .mid__last .pay {
    grid-row: 2/span 2;
    grid-column: 2/span 1;
    margin-top: 0;
  }
}
footer .shell .mid__last .pay > p {
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.044rem;
  line-height: 1.8rem;
  text-transform: uppercase;
  font-weight: 600;
  grid-column: 1/span 4;
  margin-bottom: 4rem;
}
@media (min-width: 1600px) {
  footer .shell .mid__last .pay > p {
    margin-bottom: 4rem;
  }
}
footer .shell .mid__last .pay span {
  transform-origin: top left;
  transform: scale(0.5);
}
footer .shell .bot {
  display: flex;
  flex-flow: column;
  padding: 1rem 1rem 0 1rem;
  position: relative;
}
@media (min-width: 1024px) {
  footer .shell .bot {
    flex-flow: row;
    justify-content: space-between;
  }
}
footer .shell .bot:before {
  content: "";
  width: 100vw;
  height: 0.1rem;
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  display: block;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
footer .shell .bot p,
footer .shell .bot p a {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.044rem;
  line-height: 1.8rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  footer .shell .bot p,
footer .shell .bot p a {
    width: fit-content;
    margin-bottom: 0;
  }
}
footer .shell .bot p a,
footer .shell .bot p a a {
  display: block;
}
@media (min-width: 380px) {
  footer .shell .bot p a,
footer .shell .bot p a a {
    display: inline;
  }
}
footer .shell .bot p a:nth-child(2),
footer .shell .bot p a a:nth-child(2) {
  font-size: 1.266rem;
  line-height: 1.5rem;
  font-weight: 700;
}
footer .shell .bot p a svg,
footer .shell .bot p a a svg {
  width: 3.3rem;
  height: 1.5rem;
  transform: translateY(0.3rem);
}

/* -------------------------- *\
    .sub-popup
\* -------------------------- */
.sub-popup.sub-popup {
  padding: 1rem;
}
.sub-popup.sub-popup > div {
  max-width: 50rem;
  height: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 0 1rem 3rem 1rem;
  background: #fff;
  border-radius: 2.5rem;
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div {
    padding: 0 1rem 5rem 1rem;
  }
}
.sub-popup.sub-popup > div .sub__close {
  background: rgba(0, 0, 0, 0);
}
.sub-popup.sub-popup > div .sub__close:before, .sub-popup.sub-popup > div .sub__close:after {
  background: #fff;
}
.sub-popup.sub-popup > div .img {
  display: flex;
  justify-content: center;
  padding: 2rem 0 1rem 0;
  margin: 0 -1rem;
  width: calc(100% + 2rem);
  background: #7BA914;
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div .img {
    padding: 3rem 0 2rem 0;
  }
}
.sub-popup.sub-popup > div .img img {
  filter: drop-shadow(0.3rem 0.4rem 0 rgba(0, 0, 0, 0.2));
}
.sub-popup.sub-popup > div h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  gap: 1rem;
  margin: 0 -1rem 2rem -1rem;
  width: calc(100% + 2rem);
  padding: 1rem;
  background: #000;
  color: #fff;
}
@media (min-width: 340px) {
  .sub-popup.sub-popup > div h2 {
    font-size: 3.5rem;
  }
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div h2 {
    font-size: 4rem;
  }
}
.sub-popup.sub-popup > div h2 svg {
  width: 3rem;
  height: 3rem;
  fill: #fff;
}
@media (min-width: 340px) {
  .sub-popup.sub-popup > div h2 svg {
    width: 5rem;
    height: 5rem;
  }
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div h2 svg {
    width: 7rem;
    height: 7rem;
  }
}
.sub-popup.sub-popup > div p {
  text-align: center;
}
.sub-popup.sub-popup > div .sub__price {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div .sub__price {
    font-size: 3.5rem;
  }
}
.sub-popup.sub-popup > div .sub__price span {
  font-size: 2rem;
  font-weight: 500;
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div .sub__price span {
    font-size: 2.5rem;
  }
}
.sub-popup.sub-popup > div .sub__notes {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2rem;
  line-height: 1.7rem;
}
.sub-popup.sub-popup > div .sub__benefits,
.sub-popup.sub-popup > div .sub__phone {
  display: block;
  position: relative;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 2rem;
  text-align: left;
}
@media (min-width: 430px) {
  .sub-popup.sub-popup > div .sub__benefits,
.sub-popup.sub-popup > div .sub__phone {
    font-size: 2rem;
  }
}
.sub-popup.sub-popup > div .sub__benefits {
  padding-left: 2.5rem;
}
.sub-popup.sub-popup > div .sub__benefits:before {
  content: "";
  width: 1.7rem;
  height: 0.9rem;
  position: absolute;
  background: rbga(0, 0, 0, 0);
  display: block;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
  border-left: solid 0.4rem #7BA914;
  border-bottom: solid 0.4rem #7BA914;
}
.sub-popup.sub-popup > div .sub__join {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  border-radius: 2rem;
  border: solid 0.2rem #000;
  font-size: 2.5rem;
  font-weight: 600;
  color: #7BA914;
  margin-bottom: 1rem;
  transition: transform 0.2s;
}
.sub-popup.sub-popup > div .sub__join:hover {
  transform: scale(1.15);
}

/*-------------------------------*\
.t1
.t2
.t3
.t4
.t5
.t6
.t7
.t8
.terms-of-use
\*-------------------------------*/
h2, h3 {
  font-size: 2.1rem;
  line-height: 2.5rem;
  font-weight: 600;
}

p, li {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400;
}

.terms-of-use .shell {
  max-width: 100rem;
  margin-bottom: 3rem;
}
@media (min-width: 1024px) {
  .terms-of-use .shell {
    margin-bottom: 10rem;
  }
}
.terms-of-use .shell p, .terms-of-use .shell h1 {
  max-width: 100%;
}
.terms-of-use .shell p a, .terms-of-use .shell h1 a {
  color: #7BA914;
}
.terms-of-use .shell h2, .terms-of-use .shell h3 {
  margin-bottom: 2.5rem;
}
.terms-of-use .shell p {
  margin-bottom: 2.5rem;
}
.terms-of-use .shell > div {
  border-top: solid 0.1rem #E4E4E4;
  padding: 3.5rem 0 0.5rem 0;
}
.terms-of-use .shell > div:first-of-type {
  margin-top: 5.5rem;
}

.t1 {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
@media (min-width: 768px) {
  .t1 {
    font-size: 2.3rem;
  }
}
@media (min-width: 1024px) {
  .t1 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
}

.t2 {
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 3.4rem;
  letter-spacing: -0.078rem;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
@media (min-width: 768px) {
  .t2 {
    font-size: 4rem;
  }
}
@media (min-width: 1024px) {
  .t2 {
    font-size: 7.2rem;
    letter-spacing: -0.2rem;
    line-height: 8.8rem;
  }
}
@media (min-width: 1024px) {
  .t2.t8 {
    font-size: 4.8rem;
    letter-spacing: -0.133rem;
    line-height: 5.8rem;
  }
}

.t3 {
  font-size: 2.6rem;
  line-height: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
@media (min-width: 1024px) {
  .t3 {
    font-size: 4.2rem;
    line-height: 3.9rem;
  }
}
.t3.t6 {
  line-height: 3.2rem;
  margin-bottom: 1.9rem;
}
@media (min-width: 1024px) {
  .t3.t6 {
    line-height: 5.2rem;
    margin-bottom: 3.5rem;
  }
}
.t3.t6 span {
  color: #7BA914;
}
.t3.t7 {
  text-transform: none;
}
.t3.t9 {
  line-height: 3.2rem;
  text-align: left;
}
@media (min-width: 1024px) {
  .t3.t9 {
    line-height: 5.2rem;
  }
}
.t3.t12 {
  text-align: left;
}
@media (min-width: 1024px) {
  .t3.t12 {
    font-size: 3.6rem;
    line-height: 4.4rem;
    text-transform: uppercase;
    text-align: left;
  }
}

.t4 {
  font-size: 1.4rem;
  line-height: 2.6rem;
  color: #696969;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 1024px) {
  .t4 {
    font-size: 1.6rem;
  }
}
.t4.t5 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  max-width: 63rem;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .t4.t5 {
    margin-bottom: 0.8rem;
  }
}
.t4.t13 {
  color: #000;
}
@media (min-width: 1024px) {
  .t4.t13 {
    font-size: 1.6rem;
    line-height: 1.9rem;
  }
}
.t4.t10 {
  text-align: left;
}
.t4.t17 {
  font-weight: 400;
  color: #000;
  text-align: left;
}

.t14 {
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 3rem;
}
.t14 svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #7BA914;
  margin-right: 1.5rem;
}
.t14 a {
  color: #7BA914;
}

.t15 {
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.t15 a {
  color: #7BA914;
}
.t15.t16 {
  line-height: 2.2rem;
}

/* -------------------------- *\
    .cust-btn
\* -------------------------- */
.cust-btn .slick-list {
  order: 1;
  width: 100%;
}
.cust-btn .slick-arrow {
  position: relative;
  top: unset;
  width: 50%;
  height: 4.8rem;
  transform: none;
}
@media (min-width: 380px) {
  .cust-btn .slick-arrow {
    width: 4.8rem;
  }
}
.cust-btn .slick-arrow:before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-left: solid 0.3rem rgba(0, 0, 0, 0.2);
  border-top: solid 0.3rem rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  z-index: 5;
}
@media (min-width: 1024px) {
  .cust-btn .slick-arrow:before {
    width: 1.6rem;
    height: 1.6rem;
    border-width: 0.4rem;
  }
}
.cust-btn .slick-arrow:after {
  content: "";
  width: 3.8rem;
  height: 3.8rem;
  position: absolute;
  background: #FBFBFD;
  display: block;
  border-radius: 1.984rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.cust-btn .slick-arrow.slick-prev {
  order: 2;
  left: unset;
}
.cust-btn .slick-arrow.slick-prev:before {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.cust-btn .slick-arrow.slick-next {
  order: 3;
  right: unset;
}
@media (min-width: 380px) {
  .cust-btn .slick-arrow.slick-next {
    order: 4;
  }
}
.cust-btn .slick-arrow.slick-next:before {
  transform: translate(-50%, -50%) rotate(135deg) !important;
}
.cust-btn .slick-dots {
  position: relative;
  order: 4;
  bottom: unset;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}
@media (min-width: 380px) {
  .cust-btn .slick-dots {
    order: 3;
    max-width: calc(100% - 10rem);
  }
}
.cust-btn .slick-dots li {
  margin: 0;
  width: 4.8rem;
  height: 4.8rem;
}
@media (min-width: 1024px) {
  .cust-btn .slick-dots li {
    width: 3.3rem;
    height: 3.3rem;
  }
}
.cust-btn .slick-dots li button {
  width: 100%;
  height: 100%;
  position: relative;
}
.cust-btn .slick-dots li button:before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .cust-btn .slick-dots li button:before {
    width: 1.4rem;
    height: 1.4rem;
  }
}

/*
Woocommerce styles
*/
.woocommerce a.button.alt {
  background-color: #5F8508;
  transition: background-color 0.3s;
}

.woocommerce a.button.alt:hover {
  background-color: #7BA914;
}

.woocommerce .addresses address {
  line-height: 2.5rem;
}

#customer_details {
  display: flex;
  flex-flow: column;
  max-width: 76.8rem;
  margin: 0 auto;
}
@media (min-width: 1300px) {
  #customer_details {
    max-width: 120rem;
    margin: 0 auto;
  }
}
#customer_details .form-row-first,
#customer_details .form-row-last {
  width: 100%;
}
#customer_details .col-1 {
  width: 100%;
}
@media (min-width: 1300px) {
  #customer_details .col-1 .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  #customer_details .col-1 .woocommerce-billing-fields__field-wrapper p {
    margin: 0;
  }
}
#customer_details .col-2 {
  width: 100%;
}
@media (min-width: 1300px) {
  #customer_details .col-2 .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  #customer_details .col-2 .woocommerce-shipping-fields__field-wrapper p {
    margin: 0;
  }
}

.wc-section {
  padding-bottom: 2rem;
}

.woocommerce .woocommerce-Input {
  border-radius: 0;
  border: solid 0.1rem #000;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt {
  background: #5F8508;
  color: #fff;
  transition: all 0.3s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
  background: #7BA914;
  color: #fff;
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce button.button.alt:active {
  transform: scale(1.1);
}
.woocommerce fieldset {
  margin-bottom: 2rem;
}
.woocommerce form .form-row {
  margin-bottom: 2rem;
}
.woocommerce form .form-row label {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.9rem;
  margin-bottom: 1rem;
}
.woocommerce form .form-row label .required {
  color: #7BA914;
}
.woocommerce table.shop_table {
  border-radius: 0;
}
.woocommerce a.added_to_cart {
  display: none;
}
.woocommerce .input-text.qty.text > * {
  height: 100%;
}
.woocommerce .input-text.qty.text::-webkit-inner-spin-button {
  opacity: 1;
}
.woocommerce .input-text.qty.text::-webkit-textfield-decoration-container {
  height: 100%;
}
.woocommerce-notices-wrapper, .woocommerce-result-count {
  display: none;
}
.woocommerce form.register,
.woocommerce form.login {
  border-radius: 0;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  display: none;
}

@media (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
  }
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  color: #000;
}

.logged-in.woocommerce-account .woocommerce {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
}
@media (min-width: 320px) {
  .logged-in.woocommerce-account .woocommerce {
    padding: 1.5rem;
  }
}
@media (min-width: 769px) {
  .logged-in.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 28rem 1fr;
    gap: 1rem;
  }
}
@media (min-width: 769px) {
  .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    width: 100%;
  }
}
.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-content > p {
  font-weight: 500;
}
@media (min-width: 769px) {
  .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-content > .woocommerce-Addresses {
    display: flex;
    justify-content: space-between;
  }
}
.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-flow: column;
  padding: 1rem 0;
  background: rgba(123, 169, 20, 0.2);
}
@media (max-width: 768px) {
  .logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1rem;
  }
}
.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li {
  font-size: 2rem;
  padding: 0.5rem 1.5rem;
  list-style: none;
}
.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li.is-active {
  background: rgba(123, 169, 20, 0.3);
  font-weight: 600;
}
.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a {
  display: block;
  width: max-content;
}
.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
  color: #000;
  transform: scale(1.05);
}
.logged-in.woocommerce-account .woocommerce .woocommerce-Address {
  border: solid 0.1rem rgba(0, 0, 0, 0.5);
  padding: 1rem;
}
.logged-in.woocommerce-account .woocommerce .woocommerce-Address address {
  line-height: 2.5rem;
}
.logged-in.woocommerce-account .woocommerce .woocommerce-Address a {
  display: block;
  padding: 0.5rem 1rem;
  background: rgba(123, 169, 20, 0.5);
  font-weight: 600;
}
.logged-in.woocommerce-account .woocommerce .woocommerce-Address a:hover {
  color: #000;
  transform: scale(1.05);
}

.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
  width: 49%;
}
@media (max-width: 768px) {
  .woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
    width: 100%;
  }
}
.woocommerce-page .woocommerce-info {
  border-top: none;
}

.edit-account fieldset {
  border: none;
  margin-top: 4rem;
}

.woocommerce-shipping-methods input {
  height: auto;
  opacity: 0;
}

.woocommerce-shipping-methods label {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.woocommerce-shipping-methods label:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  background: #fff;
  display: block;
  border: solid 0.1rem #000;
  right: calc(100% + 1rem);
  top: 50%;
  transform: translate(0, -50%);
}

.woocommerce-shipping-methods input:checked + label:before {
  background: #7BA914;
}

.woocommerce-shipping-methods input:hover + label:before {
  background: rgba(123, 169, 20, 0.5);
}

.woocommerce-form__label {
  display: flex;
  align-items: centert;
  gap: 1rem;
}
.woocommerce-form__label input {
  height: 2.5rem;
  width: 2.5rem;
}

/*-------------------------------*\
.main-top
.btn-green
.v-prev
\*-------------------------------*/
.main-top {
  padding: 0;
  background: #000;
}
.main-top .shell {
  max-width: 100%;
}
.main-top .shell.benefits {
  max-width: 160rem;
}
.main-top__top {
  position: relative;
  height: calc(100vh - var(--header-height));
}
.main-top__bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.main-top__bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
  display: block;
}
.main-top__cont {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: start;
  padding: 9.7vh 1rem;
  position: relative;
  z-index: 10;
  height: 100%;
}
@media (min-width: 1024px) {
  .main-top__cont {
    padding: 9.2vh 1rem;
  }
}
.main-top__cont .logo {
  margin-bottom: 8.9vh;
}
@media (min-width: 1024px) {
  .main-top__cont .logo {
    margin-bottom: 7.8vh;
  }
}
.main-top__cont p {
  margin-bottom: 2.5%;
}
@media (min-width: 1024px) {
  .main-top__cont p {
    margin-bottom: 0.5%;
  }
}
.main-top__cont h1 {
  max-width: 38rem;
  margin-bottom: 8.7vh;
}
@media (min-width: 500px) {
  .main-top__cont h1 {
    max-width: 100%;
  }
}
@media (min-width: 1024px) {
  .main-top__cont h1 {
    margin-bottom: 7.8vh;
  }
}
.main-top__cont .d-arr {
  --size: 3rem;
  --pos: 0;
  --thick: 0.3rem;
  --color: white;
  --bottom: 12.5vh;
  position: relative;
  z-index: 10;
  display: block;
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: 50%;
  bottom: var(--bottom);
  transform: translate(-50%, var(--pos)) rotate(-45deg);
  animation: 3s infinite running move-up-down;
}
@media (min-width: 1024px) {
  .main-top__cont .d-arr {
    --bottom: 11.3vh;
    --size: 3.8rem;
  }
}
.main-top__cont .d-arr:before, .main-top__cont .d-arr:after {
  border-radius: 0.5rem;
}
.main-top__cont .d-arr:before {
  content: "";
  width: 100%;
  height: var(--thick);
  position: absolute;
  background: var(--color);
  display: block;
  bottom: 0;
  left: 0;
}
.main-top__cont .d-arr:after {
  content: "";
  width: var(--thick);
  height: 100%;
  position: absolute;
  background: var(--color);
  display: block;
  bottom: 0;
  left: 0;
}
@keyframes move-up-down {
  from {
    bottom: var(--bottom);
  }
  40% {
    bottom: calc(var(--bottom) - 2rem);
  }
  80% {
    bottom: var(--bottom);
  }
  to {
    bottom: var(--bottom);
  }
}
.main-top__cont .d-arr--2 {
  --size: 2rem;
  --pos: -1.5rem;
  --thick: 0.2rem;
  --color: rgb(127, 127, 127);
}
@media (min-width: 1024px) {
  .main-top__cont .d-arr--2 {
    --size: 2.6rem;
    --pos: -1.8rem;
  }
}

.btn-green {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.2rem;
  max-width: 20.6rem;
  width: 100%;
  height: 4.4rem;
  background: #7BA914;
  color: #fff;
  border-radius: 2.24rem;
  font-size: 1.28rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  font-weight: 600;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  .btn-green {
    font-size: 1.6rem;
    line-height: 1.9rem;
    height: 5.5rem;
    border-radius: 2.8rem;
    max-width: 25.7rem;
    padding: 0 3rem 0.2rem 3rem;
  }
}
.btn-green:hover {
  color: #fff;
  font-size: 1.8rem;
}

.v-prev {
  position: absolute;
  z-index: 10;
  bottom: 1.7rem;
  left: 1.7rem;
  width: 7.8rem;
  height: 7.8rem;
  border-width: 0.7rem;
  cursor: pointer;
  user-select: none;
  background: #000;
  transition: all 0.7s ease-out;
}
@media (min-width: 768px) {
  .v-prev {
    width: 11.1rem;
    height: 11.1rem;
    border-width: 1rem;
  }
}
@media (min-width: 1024px) {
  .v-prev {
    bottom: 5rem;
    left: 5rem;
  }
}
.v-prev img {
  opacity: 0.4;
  visibility: visible;
  transition: opacity 0.5s, visibility 0.5s;
}
.v-prev__play {
  position: absolute;
  bottom: 0.8rem;
  left: 4.9rem;
  display: flex;
  width: fit-content;
  padding: 0.4rem 1rem;
  background: #fff;
  border-radius: 0.9rem;
  overflow: hidden;
  font-size: 0.848rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s, visibility 0.5s;
}
@media (min-width: 768px) {
  .v-prev__play {
    font-size: 1.2rem;
    line-height: 1.5rem;
    border-radius: 1.3rem;
  }
}
@media (min-width: 1024px) {
  .v-prev__play {
    left: 7.3rem;
    bottom: 1.2rem;
    padding: 0.5rem 1.3rem;
  }
}
.v-prev__play svg {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
  left: -0.2rem;
}
@media (min-width: 768px) {
  .v-prev__play svg {
    width: 1.5rem;
    height: 1.5rem;
    left: -0.3rem;
  }
}
.v-prev:hover img {
  opacity: 1;
}
.v-prev.ex {
  width: 100%;
  height: 100%;
  bottom: 100%;
  left: 0;
  transform: translate(0, 100%);
  pointer: unset;
}
.v-prev.ex .v-prev__play, .v-prev.ex > img {
  opacity: 0;
  visibility: hidden;
}
.v-prev.ex .close {
  display: block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 5rem;
  height: 5rem;
}
.v-prev.ex .close:before, .v-prev.ex .close:after {
  content: "";
  width: 2.3rem;
  height: 0.4rem;
  position: absolute;
  background: #fff;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.v-prev.ex .close:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* -------------------------- *\
    Styles
\* -------------------------- */
.leg-col {
  padding: 0;
  background: #FBFBFD;
  overflow: hidden;
  position: relative;
  padding-bottom: 1.5rem;
}
@media (min-width: 990px) {
  .leg-col {
    padding-bottom: 2.5rem;
  }
}
.leg-col:before {
  top: unset;
  bottom: 0;
}
.leg-col .t1 {
  color: #7BA914;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .leg-col .t1 {
    font-size: 3.2rem;
    line-height: 3.9rem;
    margin-bottom: 0.7rem;
  }
}
.leg-col .t3 {
  margin-bottom: 2.7rem;
}
@media (min-width: 1024px) {
  .leg-col .t3 {
    margin-bottom: 3.8rem;
  }
}
.leg-col .t4 {
  max-width: 95%;
  margin: 0 auto 4rem auto;
}
@media (min-width: 1024px) {
  .leg-col .t4 {
    margin-bottom: 6rem;
    max-width: 100%;
  }
}
.leg-col .shell {
  position: relative;
  z-index: 10;
  max-width: 63.5rem;
  margin: 0 auto 1.5rem auto;
  border: solid 0.1rem #979797;
  padding: 3rem 1rem;
}
@media (min-width: 380px) {
  .leg-col .shell {
    padding: 5rem 3rem;
  }
}
@media (min-width: 600px) {
  .leg-col .shell {
    border: none;
  }
}
@media (min-width: 1024px) {
  .leg-col .shell {
    padding: 7rem 0;
    margin-bottom: 2.5rem;
  }
}
.leg-col .shell > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 5rem;
}
@media (max-width: 319px) {
  .leg-col .shell > div {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 379px) {
  .leg-col .shell > div {
    gap: 1rem;
  }
}
@media (min-width: 600px) {
  .leg-col .shell > div {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .leg-col .shell > div {
    column-gap: 3rem;
  }
}
.leg-col .shell > div:before {
  content: "";
  width: 100vw;
  height: 1.5rem;
  position: absolute;
  background: #E4E4E4;
  display: block;
  z-index: 5;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1024px) {
  .leg-col .shell > div:before {
    height: 2.5rem;
  }
}
.leg-col .shell > div > a {
  display: flex;
  align-items: center;
  height: 6.6rem;
  position: relative;
  padding-left: 7rem;
  padding-right: 1rem;
  background: #fff;
  border-radius: 2.508rem;
  filter: drop-shadow(0 0.2rem 0.9rem rgba(0, 0, 0, 0.25));
  transform: translateZ(0);
}
@media (max-width: 379px) {
  .leg-col .shell > div > a {
    padding-left: 5rem;
  }
}
@media (min-width: 1024px) {
  .leg-col .shell > div > a {
    height: 7.4rem;
    padding-left: 7.8rem;
    filter: none;
    transition: filter 0.2s;
  }
  .leg-col .shell > div > a:hover {
    filter: drop-shadow(0 0.2rem 0.9rem rgba(0, 0, 0, 0.25));
  }
}
.leg-col .shell > div > a span {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  left: 3.7rem;
  top: 50%;
}
@media (max-width: 379px) {
  .leg-col .shell > div > a span {
    left: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .leg-col .shell > div > a span {
    transform: translate(-50%, -50%) scale(0.55);
    left: 4.2rem;
    top: 48%;
  }
}
.leg-col .shell > div > a p {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2.15rem;
}
@media (min-width: 1024px) {
  .leg-col .shell > div > a p {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}
.leg-col .all-prods {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 8rem;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  background: #7BA914;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .leg-col .all-prods {
    height: 10rem;
  }
}
.leg-col .all-prods:after {
  content: "";
  width: 26.5rem;
  height: 13.8rem;
  position: absolute;
  background: rgba(0, 0, 0, 0.05);
  display: block;
  z-index: 0;
  border-radius: 8.8rem;
  overflow: hidden;
  transition: width 0.5s;
}
@media (min-width: 1024px) {
  .leg-col .all-prods:after {
    width: 46.4rem;
    height: 17.6rem;
  }
}
.leg-col .all-prods:hover:after {
  width: 100%;
}
.leg-col .all-prods a {
  font-size: 2.1rem;
  line-height: 2.5rem;
  font-weight: 600;
  color: #000;
  position: relative;
  z-index: 10;
}
@media (min-width: 1024px) {
  .leg-col .all-prods a {
    font-size: 2.4rem;
    line-height: 2.9rem;
  }
}
.leg-col .all-prods a span {
  color: #fff;
}
.leg-col__bg {
  position: absolute;
  z-index: 0;
  top: 0;
}
.leg-col__bg--1 {
  transform: translate(13.3rem, 15rem) rotate(180deg) scale(-0.72);
  right: 0;
}
@media (min-width: 1024px) {
  .leg-col__bg--1 {
    transform: translate(13rem, 24.5rem) rotate(180deg) scale(-0.7);
  }
}
.leg-col__bg--2 {
  transform: translate(22.8rem, 8rem) rotate(-140deg) scale(-0.6);
  right: 0;
}
@media (min-width: 1024px) {
  .leg-col__bg--2 {
    transform: translate(31.5rem, 3.8rem) rotate(-137deg) scale(-0.46);
  }
}
.leg-col__bg--3 {
  transform: translate(-19.7rem, 4rem) rotate(170deg) scale(0.5);
  left: 0;
}
@media (min-width: 1024px) {
  .leg-col__bg--3 {
    transform: translate(-32.7rem, 4.5rem) rotate(155deg) scale(0.35, -0.35);
  }
}
.leg-col__bg--4 {
  transform: translate(-16rem, 11rem) rotate(-175deg) scale(0.65);
  left: 0;
}
@media (min-width: 1024px) {
  .leg-col__bg--4 {
    transform: translate(-19.5rem, 23rem) rotate(-180deg) scale(0.55, -0.55);
  }
}
.leg-col__bg--5 {
  display: none;
}
@media (min-width: 1024px) {
  .leg-col__bg--5 {
    display: block;
    transform: translate(45.5rem, -13rem) rotate(-100deg) scale(-0.4);
    right: 0;
  }
}

/* -------------------------- *\
    .prod-slid
\* -------------------------- */
.prod-slid {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 380px) {
  .prod-slid {
    padding-left: 1.7rem;
    padding-right: 1.7rem;
  }
}
@media (min-width: 1024px) {
  .prod-slid {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.prod-slid .shell {
  max-width: calc(5 * var(--thumb-total));
}
.prod-slid .shell .prod-thumb {
  margin: 0 var(--thumb-margin);
}
.prod-slid .shell .tabs {
  display: flex;
  justify-content: start;
  border-bottom: solid 0.1rem #E4E4E4;
  width: fit-content;
}
@media (min-width: 1024px) {
  .prod-slid .shell .tabs {
    margin: 0 auto;
  }
}
.prod-slid .shell .tabs p {
  white-space: nowrap;
  padding: 1.5rem 1rem;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.6rem;
  opacity: 0.5;
  user-select: none;
  cursor: pointer;
}
@media (min-width: 380px) {
  .prod-slid .shell .tabs p {
    padding: 1.6rem 2.1rem 1.7rem 2.1rem;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.9rem;
  }
}
@media (min-width: 1024px) {
  .prod-slid .shell .tabs p {
    padding: 1.6rem 2.4rem 1.7rem 2.7rem;
  }
}
.prod-slid .shell .tabs p.ex {
  opacity: 1;
  position: relative;
}
.prod-slid .shell .tabs p.ex:before {
  content: "";
  width: 100%;
  height: 0.3rem;
  position: absolute;
  background: #000;
  display: block;
  bottom: 0;
  left: 0;
}
@media (min-width: 1024px) {
  .prod-slid .shell .tabs p.ex:before {
    height: 0.4rem;
    width: calc(100% - 0.8rem);
    left: 0.4rem;
    bottom: -0.1rem;
  }
}
.prod-slid .shell > div {
  display: grid;
  grid-template-columns: 100%;
  overflow: hidden;
}
.prod-slid .shell > div .slider {
  grid-row: 2/span 1;
  grid-column: 1/span 1;
  display: none;
  position: absolute;
  opacity: 0;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 1rem;
  margin: 2rem 1rem;
}
@media (min-width: 380px) {
  .prod-slid .shell > div .slider {
    margin: 2.5rem 2rem;
    row-gap: 3rem;
  }
}
@media (min-width: 1024px) {
  .prod-slid .shell > div .slider {
    margin: 4rem 0;
    row-gap: 0rem;
  }
}
.prod-slid .shell > div .slider:before, .prod-slid .shell > div .slider:after {
  content: "";
  width: calc(50% - var(--thumb-width) / 2 - var(--thumb-margin));
  height: 100%;
  position: absolute;
  background: #fff;
  display: block;
  z-index: 10;
  top: 0;
}
@media (min-width: 480px) {
  .prod-slid .shell > div .slider:before, .prod-slid .shell > div .slider:after {
    width: calc(50% - var(--thumb-width) - 2 * var(--thumb-margin));
  }
}
@media (min-width: 768px) {
  .prod-slid .shell > div .slider:before, .prod-slid .shell > div .slider:after {
    width: calc(50% - (var(--thumb-width) + 2 * var(--thumb-margin)) * 3 / 2);
  }
}
@media (min-width: 990px) {
  .prod-slid .shell > div .slider:before, .prod-slid .shell > div .slider:after {
    width: calc(50% - (var(--thumb-width) + 2 * var(--thumb-margin)) * 2);
  }
}
@media (min-width: 1300px) {
  .prod-slid .shell > div .slider:before, .prod-slid .shell > div .slider:after {
    width: calc(50% - (var(--thumb-width) + 2 * var(--thumb-margin)) * 5 / 2);
  }
}
.prod-slid .shell > div .slider:before {
  left: -0.2rem;
}
.prod-slid .shell > div .slider:after {
  right: -0.2rem;
}
.prod-slid .shell > div .slider.ex {
  display: flex;
  opacity: 1;
  position: relative;
}
.prod-slid .shell > div .slider .slick-list {
  width: 100%;
  padding: 0 calc(50% - var(--thumb-total) / 2);
  position: relative;
}
@media (min-width: 480px) {
  .prod-slid .shell > div .slider .slick-list {
    padding: 0 calc(50% - var(--thumb-total));
  }
}
@media (min-width: 768px) {
  .prod-slid .shell > div .slider .slick-list {
    padding: 0 calc(50% - var(--thumb-total) * 3 / 2);
  }
}
@media (min-width: 990px) {
  .prod-slid .shell > div .slider .slick-list {
    padding: 0 calc(50% - var(--thumb-total) * 2);
  }
}
@media (min-width: 1300px) {
  .prod-slid .shell > div .slider .slick-list {
    padding: 0 calc(50% - var(--thumb-total) * 5 / 2);
  }
}
.prod-slid .shell > .slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: var(--thumb-total);
  margin: 2rem 1rem;
}
@media (min-width: 480px) {
  .prod-slid .shell > .slider {
    max-width: calc(2 * var(--thumb-total));
  }
}
@media (min-width: 768px) {
  .prod-slid .shell > .slider {
    max-width: calc(3 * var(--thumb-total));
  }
}
@media (min-width: 990px) {
  .prod-slid .shell > .slider {
    max-width: calc(4 * var(--thumb-total));
  }
}
@media (min-width: 1300px) {
  .prod-slid .shell > .slider {
    max-width: calc(5 * var(--thumb-total));
  }
}
@media (min-width: 380px) {
  .prod-slid .shell > .slider {
    margin: 2.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .prod-slid .shell > .slider {
    margin: 4rem 0;
  }
}

/* -------------------------- *\
    .prod-thumb
    .attr
    .add-cart
\* -------------------------- */
.prod-thumb {
  position: relative;
  display: flex !important;
  flex-flow: column;
  align-items: center;
  max-width: var(--thumb-width);
  gap: 0.5rem;
  margin: 1rem var(--thumb-margin);
  overflow: visible;
  padding-bottom: 1rem;
}
.prod-thumb .img {
  display: block;
  position: relative;
}
@media (min-width: 1024px) {
  .prod-thumb .img {
    aspect-ratio: 1/1;
    padding: 1.5rem 1.5rem 0 1.5rem;
    display: flex;
    align-items: center;
  }
}
.prod-thumb .img img {
  position: relative;
  display: block;
  margin: 0 auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .prod-thumb .img img {
    aspect-ratio: unset;
  }
}
.prod-thumb .img.out img {
  opacity: 0.6;
}
.prod-thumb .img p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.3rem;
  height: 3.5rem;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 600;
  background: #fff;
}
.prod-thumb .text-top,
.prod-thumb .text-bot {
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.prod-thumb .text-top {
  font-weight: 600;
  color: #7BA914;
  margin-top: 0.5rem;
}
.prod-thumb h3 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.2rem;
  text-align: center;
}
.prod-thumb h3 a {
  color: #000;
}
.prod-thumb .text-bot {
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.prod-thumb .price {
  font-size: 1.8rem;
  letter-spacing: 0.075rem;
  line-height: 2.2rem;
  margin-bottom: 0.5rem;
}
.prod-thumb .price span:first-child {
  font-weight: 600;
  color: #5F8508;
}
.prod-thumb .price span:last-child {
  opacity: 0.5;
  text-decoration: line-through;
}
.prod-thumb .club {
  opacity: 0;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.058rem;
  line-height: 1.8rem;
  font-weight: 600;
  color: #fff;
  background: #000;
  border-radius: 1.1rem;
  padding-bottom: 0.2rem;
}
@media (min-width: 1024px) {
  .prod-thumb .club {
    max-width: 26.7rem;
    height: 2.2rem;
    margin-bottom: 0.2rem;
  }
}
.prod-thumb .club.vis {
  opacity: 1;
}
.prod-thumb .club svg {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
  position: relative;
  transform: translateY(0.2rem);
}
.prod-thumb .add-cart {
  display: none;
}
@media (min-width: 1024px) {
  .prod-thumb .add-cart {
    display: grid;
    margin-top: 0.5rem;
  }
}
.prod-thumb .add-cart.dis {
  transform: translateY(0);
  pointer-events: none;
  opacity: 0.5;
}
.prod-thumb:hover .add-cart {
  transform: translateY(0);
  opacity: 1;
}
.prod-thumb:hover .add-cart.dis {
  opacity: 0.5;
}
.prod-thumb--list {
  margin: 0;
}
@media (min-width: 380px) and (max-width: 599px) {
  .prod-thumb--list {
    max-width: 18.8rem;
    margin: 0;
  }
  .prod-thumb--list .shadow {
    filter: drop-shadow(0 0.1rem 0.2rem rgba(0, 0, 0, 0.25));
    transform: translateZ(0);
  }
  .prod-thumb--list .attr {
    left: 0;
  }
  .prod-thumb--list .attr > div {
    height: 2.4rem;
  }
  .prod-thumb--list .attr > div p {
    font-size: 0.76rem;
    line-height: 9rem;
  }
  .prod-thumb--list .attr > div.disc {
    padding: 0 1rem 0 3rem;
  }
  .prod-thumb--list .attr > div.disc svg {
    width: 1.1rem;
    height: 1.1rem;
    left: 0.7rem;
    top: 0.7rem;
  }
  .prod-thumb--list .attr > div.disc:before {
    width: 2.4rem;
    filter: drop-shadow(0 0.1rem 0.2rem rgba(0, 0, 0, 0.25));
    transform: translateZ(0);
  }
  .prod-thumb--list .attr > div.seller {
    padding: 0 1rem 0 3rem;
  }
  .prod-thumb--list .attr > div.seller img {
    transform: scale(0.3);
    top: -2.7rem;
    left: -2.7rem;
  }
  .prod-thumb--list .fav {
    width: 3rem;
    height: 3rem;
  }
  .prod-thumb--list .fav svg {
    width: 1.7rem;
    height: 1.7rem;
  }
  .prod-thumb--list .text-top {
    font-size: 1rem;
    line-height: 1.3rem;
  }
  .prod-thumb--list h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
  .prod-thumb--list .text-bot {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
  .prod-thumb--list .price {
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: 0.058rem;
  }
  .prod-thumb--list .club {
    font-size: 1rem;
    letter-spacing: 0.042;
    line-height: 1.3rem;
  }
}
.prod-thumb .added_to_cart {
  display: none;
}

.shadow {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
}

.fav {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  background: #F2F2F2;
  border-radius: 50%;
  width: 4.8rem;
  height: 4.8rem;
  cursor: pointer;
  user-select: none;
}
.fav svg {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  --svg-color: black;
  --svg-fill: rgba(0,0,0,0);
}
.fav.sel svg {
  --svg-fill: #7BA914;
}
.fav:hover svg {
  --svg-fill: black;
}
.fav p {
  display: none;
}

.attr {
  position: absolute;
  z-index: 10;
  top: 0;
  left: -0.2rem;
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 1rem;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .attr {
    left: -0.5rem;
  }
}
.attr > div {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 5rem;
  padding-right: 1rem;
  height: 3.8rem;
  border-radius: 1.963rem;
  background: #fff;
  position: relative;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.25));
  transform: translateZ(0);
}
.attr > div p {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.attr > div.disc {
  padding-left: 3.8rem;
  padding-right: 0;
}
@media (min-width: 380px) {
  .attr > div.disc {
    padding-left: 4.8rem;
    padding-right: 1.5rem;
  }
}
.attr > div.disc:before {
  content: "";
  width: 3.8rem;
  height: 100%;
  position: absolute;
  background: #7BA914;
  display: block;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 5;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
}
.attr > div.disc svg {
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  fill: #fff;
}
.attr > div.disc p {
  display: none;
}
@media (min-width: 380px) {
  .attr > div.disc p {
    display: block;
  }
}
.attr > div.seller {
  padding-left: 3.8rem;
  padding-right: 0;
}
@media (min-width: 380px) {
  .attr > div.seller {
    padding-left: 4.8rem;
    padding-right: 1rem;
  }
}
.attr > div.seller img {
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 380px) {
  .attr > div.seller img {
    left: -1.9rem;
    top: -1.9rem;
    transform: scale(0.5);
  }
}
.attr > div.seller p {
  display: none;
}
@media (min-width: 380px) {
  .attr > div.seller p {
    display: block;
  }
}
.attr > div.new {
  background: #7BA914;
  padding-left: 1rem;
}
.attr > div.new p {
  color: #fff;
}

.add-cart {
  width: 100%;
  display: grid;
  align-items: center;
  height: 5rem;
  position: relative;
  border-radius: 2rem;
  filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.25));
  padding-left: 35%;
  background: #fff;
  transform: translateY(110%) translateZ(0);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s, padding-left 0.3s;
}
.add-cart > div {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2rem;
  height: 100%;
  width: 35%;
  background: #7BA914;
  transition: background 0.3s, width 0.3s;
}
.add-cart > div:before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  position: absolute;
  background: #fff;
  display: block;
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 10;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.9rem;
  top: 0.5rem;
  left: 56%;
  color: #000;
  transition: left 0.3s;
}
.add-cart > div svg {
  position: absolute;
  z-index: 5;
  width: 3.1rem;
  height: 2.9rem;
  fill: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.3s;
}
.add-cart p {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.3s;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0));
  grid-row: 1/span 1;
  grid-column: 1/span 1;
}
.add-cart p.add {
  z-index: 5;
  opacity: 1;
}
.add-cart.sel > div {
  background: #5F8508;
}
.add-cart.sel > div:before {
  content: "-";
}
.add-cart.sel p.add {
  opacity: 0;
}
.add-cart.out {
  padding-left: 6.3rem;
}
.add-cart.out > div {
  background: #7BA914;
  width: 6.3rem;
}
.add-cart.out > div:before {
  content: none;
}
.add-cart:hover {
  padding-left: 4rem;
}
.add-cart:hover > div {
  width: 100%;
}
.add-cart:hover > div:before {
  left: 28%;
}
.add-cart:hover > div svg {
  left: 25%;
}
.add-cart:hover p {
  color: #fff;
  filter: drop-shadow(0 0.1rem 0.2rem rgba(0, 0, 0, 0.5));
}
.add-cart.dis {
  pointer-events: none;
  opacity: 0.5;
}

/* -------------------------- *\
    .three-vids
\* -------------------------- */
.three-vids {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  .three-vids {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.three-vids .shell p,
.three-vids .shell .name {
  font-size: 1.4rem;
  line-height: 2rem;
}
@media (min-width: 380px) {
  .three-vids .shell p,
.three-vids .shell .name {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}
.three-vids .shell > div {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
  padding-top: 1.5rem;
}
@media (min-width: 380px) {
  .three-vids .shell > div {
    margin-bottom: 3.5rem;
  }
}
@media (min-width: 1024px) {
  .three-vids .shell > div {
    gap: 4rem;
    margin-bottom: 4.7rem;
  }
}
.three-vids .shell > p {
  font-weight: 500;
  text-align: center;
}
.three-vids .shell > p a {
  color: #696969;
}
.three-vids .shell > p a:hover {
  color: #5F8508;
}
.three-vids.more .shell > div {
  display: grid;
  grid-template-columns: 100%;
}
@media (min-width: 600px) {
  .three-vids.more .shell > div {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 990px) {
  .three-vids.more .shell > div {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.three-vids.more .shell > div .video {
  display: grid;
}

.video {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-row-gap: 2rem;
  max-width: 50.6rem;
  width: 100%;
  cursor: pointer;
}
@media (min-width: 380px) {
  .video {
    grid-template-columns: 75% 25%;
  }
}
.video .bg {
  position: relative;
  grid-column: 1/span 2;
  border-radius: 2rem;
  aspect-ratio: 395/272;
  width: 100%;
  overflow: hidden;
}
.video .bg figure {
  width: 100%;
  height: 100%;
}
.video .bg figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video .bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #D8D8D8;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.4;
  z-index: 5;
  transition: opacity 0.3s;
}
.video .bg .play {
  display: block;
  width: 7.2rem;
  height: 5.5rem;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1.7rem;
  opacity: 0;
  transition: opacity 0.3s;
}
@media (min-width: 1024px) {
  .video .bg .play {
    width: 12rem;
    height: 9.2rem;
    border-radius: 2.8rem;
  }
}
.video .bg .play svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.6rem;
  fill: #fff;
}
@media (min-width: 1024px) {
  .video .bg .play svg {
    width: 5rem;
    height: 5.4rem;
    left: 55%;
    top: 55%;
  }
}
.video .bg .time {
  position: absolute;
  bottom: 1.3rem;
  right: 1.6rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 1.3rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.9rem;
  padding: 0.3rem 1.4rem;
  z-index: 10;
}
@media (min-width: 1024px) {
  .video .bg .time {
    bottom: 1.5rem;
    right: 1.4rem;
  }
}
.video:nth-child(2) {
  display: none;
}
@media (min-width: 600px) {
  .video:nth-child(2) {
    display: grid;
  }
}
.video:nth-child(3) {
  display: none;
}
@media (min-width: 990px) {
  .video:nth-child(3) {
    display: grid;
  }
}
.video .name {
  font-weight: 600;
}
.video > p {
  margin-top: -0.7rem;
  font-weight: 600;
  text-align: right;
  opacity: 0;
}
.video > p svg {
  width: 3.4rem;
  height: 2.8rem;
  position: relative;
  top: 0.5rem;
  left: 0.5rem;
}
.video:hover .bg:before {
  opacity: 0;
}
.video:hover .play {
  opacity: 1;
}

.form-popup.video-popup > div > span {
  border-radius: 50%;
}
.form-popup.video-popup .content {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-popup.video-popup iframe {
  width: 100%;
  height: 100%;
}

/* -------------------------- *\
    .grow-lights
\* -------------------------- */
.grow-lights {
  background: #FBFBFD;
}
.grow-lights .shell {
  max-width: 45rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .grow-lights .shell {
    max-width: 80rem;
  }
}
@media (min-width: 1300px) {
  .grow-lights .shell {
    max-width: 160rem;
  }
}
.grow-lights .shell > div {
  display: grid;
  gap: 2.4rem;
  padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
  .grow-lights .shell > div {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1300px) {
  .grow-lights .shell > div {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3.4rem;
    padding: 1.5rem 0;
  }
}
.grow-lights .shell > div > a {
  display: block;
  padding: 7rem 1.5rem 4rem 1.5rem;
  border-radius: 2rem;
  background: #fff;
  filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  position: relative;
}
@media (min-width: 380px) {
  .grow-lights .shell > div > a {
    padding: 8.7rem 3.5rem 2.5rem 3.7rem;
  }
}
@media (min-width: 1024px) {
  .grow-lights .shell > div > a {
    filter: none;
    transition: filter 0.2s;
  }
  .grow-lights .shell > div > a:hover {
    filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  }
}
.grow-lights .shell > div > a > span {
  position: absolute;
  left: 6rem;
  top: 5rem;
  transform: translate(-50%, -50%) scale(0.5);
}
@media (min-width: 1024px) {
  .grow-lights .shell > div > a > span {
    left: 5.7rem;
    top: 4.7rem;
  }
}
.grow-lights .shell > div > a h3 {
  color: #000;
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 1rem;
}
.grow-lights .shell > div > a h3 span {
  color: #7BA914;
}
.grow-lights .shell > div > a p {
  color: #696969;
  font-size: 1.4rem;
  line-height: 2.4rem;
}

/* -------------------------- *\
    .grow-plants
\* -------------------------- */
.grow-plants {
  background: #FBFBFD;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1024px) {
  .grow-plants {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.grow-plants .shell {
  padding-bottom: 2rem;
  max-width: 170rem;
}
@media (min-width: 1024px) {
  .grow-plants .shell {
    margin-bottom: 7rem;
    padding-bottom: 0;
  }
}
.grow-plants .shell > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.2rem;
  row-gap: 1.7rem;
  padding-top: 1.5rem;
}
@media (min-width: 1024px) {
  .grow-plants .shell > div {
    column-gap: 4rem;
    row-gap: 2rem;
  }
}
.grow-plants .shell > div a {
  display: flex;
  align-items: end;
  justify-content: center;
  padding-bottom: 2rem;
  max-width: 12.4rem;
  width: calc(50% - 0.6rem);
  height: 12.4rem;
  background: #fff;
  border-radius: 2rem;
  filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  position: relative;
}
@media (min-width: 320px) {
  .grow-plants .shell > div a {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .grow-plants .shell > div a {
    filter: none;
  }
  .grow-plants .shell > div a:hover {
    filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  }
}
.grow-plants .shell > div a span {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  left: 50%;
  top: 4rem;
}
.grow-plants .shell > div a h3 {
  color: #000;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
}

/* -------------------------- *\
    .solutions
\* -------------------------- */
.solutions {
  padding-right: 1.8rem;
  padding-left: 1.8rem;
}
@media (min-width: 1024px) {
  .solutions {
    padding-right: 5rem;
    padding-left: 5rem;
  }
}
.solutions .shell {
  max-width: 45rem;
  margin-bottom: 7rem;
}
@media (min-width: 768px) {
  .solutions .shell {
    max-width: 90rem;
    margin-bottom: 9.5rem;
  }
}
@media (min-width: 1300px) {
  .solutions .shell {
    max-width: 160rem;
  }
}
.solutions .shell .content {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 380px) {
  .solutions .shell .content {
    padding-top: 1.8rem;
  }
}
@media (min-width: 768px) {
  .solutions .shell .content {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1300px) {
  .solutions .shell .content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-top: 5.2rem;
    gap: 4rem;
  }
}

.thumb {
  display: flex;
  flex-flow: column;
  align-items: start;
  justify-content: end;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  padding: 0 2rem 3.5rem 2rem;
  min-height: 39.5rem;
}
@media (min-width: 1024px) {
  .thumb {
    min-height: 38.5rem;
    padding: 0 2rem 0 2rem;
    transition: all 0.3s;
  }
}
.thumb:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 5;
  left: 0;
  top: 0;
}
.thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb p,
.thumb h3 {
  position: relative;
  z-index: 10;
  color: #fff;
}
.thumb h3 {
  font-size: 2.1rem;
  line-height: 2.5rem;
  font-weight: 700;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
}
@media (min-width: 1024px) {
  .thumb h3 {
    font-size: 2.8rem;
    line-height: 3.4rem;
  }
}
.thumb > p {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
}
.thumb .btn {
  display: none;
}
@media (min-width: 1024px) {
  .thumb .btn {
    display: block;
    height: 0;
    width: 24rem;
    transition: height 0.3s;
  }
  .thumb .btn p {
    display: block;
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 0.2rem #fff;
    border-radius: 2rem;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s;
  }
}
@media (min-width: 1024px) {
  .thumb:hover .btn {
    height: 5rem;
  }
  .thumb:hover .btn p {
    opacity: 1;
  }
}
@media (min-width: 1300px) {
  .thumb:hover {
    margin-top: -4rem;
    min-height: 42.5rem;
    padding-bottom: 4.5rem;
  }
}

/* -------------------------- *\
    .consult
\* -------------------------- */
.consult {
  background: #FBFBFD;
}
.consult .shell {
  position: relative;
  padding-top: 7rem;
}
.consult .shell .png-icon {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}
.consult .shell > p {
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .consult .shell > p {
    margin-bottom: 1rem;
  }
}
.consult .shell > p:last-of-type {
  margin-bottom: 4.3rem;
}
@media (min-width: 1024px) {
  .consult .shell > h2 {
    margin-bottom: 2rem;
  }
}
.consult .shell > div {
  display: grid;
  grid-template-columns: 100%;
  justify-items: center;
}
@media (min-width: 768px) {
  .consult .shell > div {
    grid-template-columns: repeat(3, minmax(auto, 39.3rem));
    justify-content: space-between;
    gap: 2rem;
  }
}
.consult .shell > div > div {
  max-width: 30.1rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 4.5rem;
}
@media (min-width: 1024px) {
  .consult .shell > div > div {
    max-width: 39.3rem;
  }
}
.consult .shell > div > div figure {
  background: #fff;
  border-radius: 4.9rem;
  padding-top: 3rem;
  filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .consult .shell > div > div figure {
    max-width: 39.3rem;
    border-radius: 6.4rem;
    filter: none;
    background: rgba(0, 0, 0, 0);
    transition: filter 0.3s, background 0.3s;
    padding-top: 4.3rem;
    margin-bottom: 3rem;
  }
}
.consult .shell > div > div figure img {
  display: block;
  margin: 0 auto;
}
.consult .shell > div > div h3, .consult .shell > div > div p {
  text-align: center;
}
.consult .shell > div > div h3 {
  font-size: 2.142rem;
  line-height: 2.6rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .consult .shell > div > div h3 {
    font-size: 2.6rem;
    line-height: 3.4rem;
  }
}
.consult .shell > div > div p {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
  color: #696969;
}
@media (min-width: 380px) {
  .consult .shell > div > div .quote {
    position: absolute;
    z-index: 10;
    top: -1.3rem;
    right: -10.5vw;
    width: 12.3rem;
  }
  .consult .shell > div > div .quote:before {
    content: "";
    width: 3rem;
    height: 3rem;
    position: absolute;
    background: #000;
    display: block;
    left: -1rem;
    top: 4.3rem;
    transform: skew(-25deg, -25deg) rotate(10deg);
  }
}
@media (min-width: 1024px) {
  .consult .shell > div > div .quote {
    opacity: 0;
    transition: opacity 0.3s;
    right: -3rem;
  }
}
@media (min-width: 1500px) {
  .consult .shell > div > div .quote {
    width: 28.4rem;
    right: -59%;
    top: 5.9rem;
  }
}
.consult .shell > div > div .quote p {
  display: block;
  position: relative;
  z-index: 5;
  font-size: 1.4rem;
  line-height: 2.6rem;
  font-weight: 700;
  text-align: center;
  font-style: italic;
}
@media (min-width: 380px) {
  .consult .shell > div > div .quote p {
    padding: 2rem 1.5rem;
    filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.2));
    transform: translateZ(0);
    background: #000;
    color: #fff;
    border-radius: 2rem;
  }
}
@media (min-width: 1500px) {
  .consult .shell > div > div .quote p {
    font-size: 1.8rem;
    line-height: 2.6rem;
    padding: 1.9rem 2.9rem 1.9rem 3.1rem;
    letter-spacing: 0.01rem;
  }
}
@media (min-width: 1024px) {
  .consult .shell > div > div:hover figure {
    filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.2));
    background: #fff;
  }
  .consult .shell > div > div:hover .quote {
    opacity: 1;
  }
}

/* -------------------------- *\
    .join-club
\* -------------------------- */
.join-club {
  background: #7BA914;
  position: relative;
  overflow: hidden;
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .join-club {
    padding-top: 5rem;
  }
}
@media (min-width: 1024px) {
  .join-club {
    padding-top: 8rem;
    padding-bottom: 2.5rem;
  }
}
.join-club:before {
  top: unset;
  bottom: 0;
}
.join-club .shell {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  z-index: 10;
}
.join-club .shell h2 {
  text-align: center;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3.4rem;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  display: block;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .join-club .shell h2 {
    font-size: 4.2rem;
    line-height: 5.2rem;
    margin-bottom: 2.5rem;
  }
}
.join-club .shell h2 svg {
  position: absolute;
  top: -1.5rem;
  right: 1rem;
  width: 3rem;
  height: 2.7rem;
  transform: translate(50%, -50%) rotate(21deg);
  fill: #fff;
}
@media (min-width: 380px) {
  .join-club .shell h2 svg {
    top: -1rem;
    right: -1.5rem;
  }
}
@media (min-width: 1024px) {
  .join-club .shell h2 svg {
    width: 4.5rem;
    height: 4.5rem;
    right: -0.5rem;
  }
}
.join-club .shell a {
  display: block;
  width: 100%;
  max-width: 32.6rem;
  margin: 0 auto;
  padding: 1.5rem;
  background: #000;
  color: #fff;
  border-radius: 3.12rem;
  text-align: center;
  font-size: 1.92rem;
  line-height: 2.4rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .join-club .shell a {
    max-width: 40.8rem;
    font-size: 2.4rem;
    line-height: 2.9rem;
    padding: 2rem;
    border-radius: 3.9rem;
    margin-bottom: 10.5rem;
  }
}
.join-club__logo {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .join-club__logo {
    margin-bottom: 1.5rem;
  }
}
.join-club__bg {
  position: absolute;
  opacity: 0.28;
}
.join-club__bg--1 {
  bottom: 0;
  right: 0;
  transform: translate(25%, 35%) rotate(180deg);
}
@media (min-width: 1024px) {
  .join-club__bg--1 {
    transform: translate(15%, 23%) rotate(205deg);
  }
}
.join-club__bg--2 {
  bottom: 0;
  right: 0;
  transform: translate(40%, -4.5rem) rotate(202deg) scale(0.7);
}
@media (min-width: 1024px) {
  .join-club__bg--2 {
    transform: translate(38%, -7.4rem) rotate(226deg) scale(0.7);
  }
}
.join-club__bg--3 {
  bottom: 0;
  right: 0;
  transform: translate(50%, -9.4rem) rotate(230deg) scale(0.4);
}
@media (min-width: 1024px) {
  .join-club__bg--3 {
    transform: translate(57%, -7.2rem) rotate(253deg) scale(0.6);
  }
}
.join-club__bg--4 {
  top: 0;
  left: 0;
  transform: translate(-19.5rem, 10.5rem) rotate(4deg) scale(1.1, -0.9);
}
@media (min-width: 1024px) {
  .join-club__bg--4 {
    transform: translate(-17.5rem, 22.5rem) rotate(-15deg) scale(0.95, -0.8);
  }
}
.join-club__bg--5 {
  top: 0;
  left: 0;
  transform: translate(-18.3rem, 1.6rem) rotate(-23deg) scale(0.55, -0.55);
}
@media (min-width: 1024px) {
  .join-club__bg--5 {
    transform: translate(-39rem, 13rem) rotate(-40deg) scale(0.65, -0.45);
  }
}

/* -------------------------- *\
    .brands
\* -------------------------- */
.brands {
  --item-width: 24.4rem;
  --item-margin: 1.1rem;
  --item-total: calc(var(--item-width) + 2 * var(--item-margin));
  background: #FBFBFD;
  padding: 5.2rem 0.5rem 5.5rem 0.5rem;
}
@incluide min(380) {
  .brands {
    --item-width: 18.7rem;
  }
}
@incluide min(550) {
  .brands {
    --item-width: 24.7rem;
  }
}
@media (min-width: 1400px) {
  .brands {
    --item-margin: 1.3rem;
  }
}
@media (min-width: 1024px) {
  .brands {
    padding-top: 6.7rem;
  }
}
.brands .shell {
  max-width: 100%;
}
.brands .shell > p {
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .brands .shell > p {
    margin-bottom: 0.7rem;
  }
}
.brands .shell > h2 {
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .brands .shell > h2 {
    margin-bottom: 3.8rem;
  }
}
.brands__slider {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;
  justify-content: center;
  align-items: center;
  max-width: var(--item-total);
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 380px) {
  .brands__slider {
    max-width: calc(2 * var(--item-total));
  }
}
@media (min-width: 550px) {
  .brands__slider {
    max-width: calc(3 * var(--item-total));
  }
}
@media (min-width: 768px) {
  .brands__slider {
    max-width: calc(4 * var(--item-total));
  }
}
@media (min-width: 1024px) {
  .brands__slider {
    max-width: calc(5 * var(--item-total));
    row-gap: 3.5rem;
  }
}
@media (min-width: 1300px) {
  .brands__slider {
    max-width: calc(6 * var(--item-total));
  }
}
.brands__slider .slide {
  max-width: var(--item-width);
  height: 10.9rem;
  margin: var(--item-margin);
  background: #fff;
  border-radius: 2rem;
  transition: filter 0.3s;
}
@media (min-width: 1024px) {
  .brands__slider .slide {
    height: 14.2rem;
  }
}
.brands__slider .slide figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.brands__slider .slide:hover {
  filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
}

/* -------------------------- *\
    .we-care
\* -------------------------- */
.we-care {
  padding-top: 5rem;
}
@media (min-width: 1024px) {
  .we-care {
    padding-top: 6.5rem;
  }
}
.we-care .shell {
  max-width: 108.5rem;
  padding-bottom: 1rem;
}
@media (min-width: 1024px) {
  .we-care .shell {
    padding-bottom: 1rem;
  }
}
.we-care .shell > p {
  margin-bottom: 0.3rem;
}
@media (min-width: 1024px) {
  .we-care .shell > p {
    margin-bottom: 1rem;
  }
}
.we-care .shell > h2 {
  margin-bottom: 8rem;
}
@media (min-width: 1024px) {
  .we-care .shell > h2 {
    margin-bottom: 10rem;
  }
}
.we-care .shell > div {
  display: grid;
  justify-items: center;
}
@media (min-width: 600px) {
  .we-care .shell > div {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}
.we-care .shell > div > div {
  display: flex;
  flex-flow: column;
  align-items: center;
  max-width: 26.9rem;
  position: relative;
  padding-top: 5.6rem;
  margin-bottom: 6.1rem;
}
@media (max-width: 1023px) {
  .we-care .shell > div > div:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .we-care .shell > div > div {
    padding-top: 5rem;
  }
}
.we-care .shell > div > div span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%) scale(0.5);
  margin-bottom: 0.2rem;
}
.we-care .shell > div > div h3, .we-care .shell > div > div p {
  text-align: center;
}
.we-care .shell > div > div h3 {
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .we-care .shell > div > div h3 {
    font-size: 2.4rem;
    line-height: 2.9rem;
  }
}
.we-care .shell > div > div p {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: #696969;
}

/* -------------------------- *\
    .main-about
\* -------------------------- */
.main-about {
  position: relative;
  padding: 3.7rem 1.5rem 6.5rem 1.5rem;
}
@media (min-width: 380px) {
  .main-about {
    padding: 4.7rem 3.5rem 5rem 3.5rem;
  }
}
@media (min-width: 1024px) {
  .main-about {
    padding: 7rem 3.5rem 7.5rem 3.5rem;
  }
}
.main-about__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main-about__bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  display: block;
}
.main-about__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-about .shell {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  max-width: 63rem;
}
.main-about .shell figure {
  margin-bottom: 3.5rem;
}
@media (min-width: 1024px) {
  .main-about .shell figure {
    margin-bottom: 3.2rem;
  }
}
.main-about .shell p,
.main-about .shell a {
  color: #fff;
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
  text-align: center;
}
.main-about .shell a {
  display: block;
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .main-about .shell a {
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  .main-about .shell a:hover {
    opacity: 1;
  }
}

/* -------------------------- *\
    .main-comm
\* -------------------------- */
.main-comm {
  --comm-width: 39.5rem;
  --comm-margin: 1.2rem;
  --comm-total: calc(var(--comm-width) + 2 * var(--comm-margin));
  background: #FBFBFD;
  padding: 3rem 0;
}
@media (min-width: 1024px) {
  .main-comm {
    --comm-width: 50.6rem;
    --comm-margin: 2.1rem;
  }
}
@media (min-width: 380px) {
  .main-comm {
    padding: 5rem 0 2rem 0;
  }
}
@media (min-width: 1024px) {
  .main-comm {
    padding: 7rem 0;
  }
}
.main-comm .shell {
  max-width: calc(var(--comm-total) + 1rem);
}
@media (min-width: 768px) {
  .main-comm .shell {
    max-width: calc(2 * var(--comm-total) + 2rem);
  }
}
@media (min-width: 1024px) {
  .main-comm .shell {
    max-width: calc(3 * var(--comm-total) + 3rem);
  }
}
.main-comm .shell > p {
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .main-comm .shell > p {
    margin-bottom: 0.7rem;
  }
}
.main-comm .shell > h2 {
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .main-comm .shell > h2 {
    margin-bottom: 5.2rem;
  }
}
.main-comm .shell .rat {
  font-size: 2.8rem;
  line-height: 3.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .main-comm .shell .rat {
    font-size: 3.6rem;
    line-height: 4.4rem;
    margin-bottom: 1.3rem;
  }
}
.main-comm .shell > .stars {
  text-align: center;
  margin-bottom: 0.5rem;
}
.main-comm .shell > .stars svg {
  --svg-color: #7BA914;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0.2rem;
}
.main-comm .shell .based {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .main-comm .shell .based {
    margin-bottom: 2.3rem;
  }
}
.main-comm .shell .all-comms {
  display: grid;
  grid-template-columns: 100%;
  gap: 2rem;
  margin-bottom: 3rem;
  justify-items: center;
}
@media (min-width: 768px) {
  .main-comm .shell .all-comms {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .main-comm .shell .all-comms {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    width: fit-content;
    margin: 0 auto 6rem auto;
  }
}
.main-comm .shell .comment {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 2rem;
  overflow: hidden;
  filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  transition: filter 0.4s;
  margin: var(--comm-margin);
}
@media (min-width: 1024px) {
  .main-comm .shell .comment {
    filter: none;
    padding-bottom: 2rem;
  }
  .main-comm .shell .comment:hover {
    filter: drop-shadow(0 0.2rem 1.3rem rgba(0, 0, 0, 0.2));
  }
}
.main-comm .shell .comment--testi {
  margin: 0;
  max-width: 50.6rem;
  width: 100%;
}
.main-comm .shell .comment h3,
.main-comm .shell .comment .stars {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #FBFBFD;
  height: 4rem;
  padding: 0 2rem;
  grid-column: 1/span 2;
}
@media (min-width: 300px) {
  .main-comm .shell .comment h3,
.main-comm .shell .comment .stars {
    grid-column: unset;
    height: 6rem;
  }
}
.main-comm .shell .comment h3 {
  font-size: 1.6rem;
  line-height: 2rem;
}
@media (min-width: 380px) {
  .main-comm .shell .comment h3 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    justify-content: start;
    padding: 0.1rem 0 0 3.2rem;
  }
}
@media (min-width: 1024px) {
  .main-comm .shell .comment h3 {
    padding: 0 0 0.2rem 3.2rem;
  }
}
@media (min-width: 380px) {
  .main-comm .shell .comment .stars {
    justify-content: end;
    padding: 0.5rem 2.7rem 0 2.7rem;
  }
}
@media (min-width: 1024px) {
  .main-comm .shell .comment .stars {
    padding: 0 2.9rem 0.4rem 0;
  }
}
.main-comm .shell .comment .stars svg {
  --svg-color: #7BA914;
  width: 2rem;
  height: 2rem;
  margin: 0 0.2rem;
}
.main-comm .shell .comment .text,
.main-comm .shell .comment .date {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #696969;
  text-align: center;
  grid-column: 1/span 2;
}
.main-comm .shell .comment .text {
  padding: 2rem 1.5rem 1rem 1.5rem;
}
@media (min-width: 380px) {
  .main-comm .shell .comment .text {
    padding: 1.8rem 3.5rem 1rem 3.5rem;
  }
}
@media (min-width: 1024px) {
  .main-comm .shell .comment .text {
    padding: 1.5rem 3.5rem 1.5rem 3.5rem;
  }
}
.main-comm .shell .comment .date {
  position: relative;
  display: block;
  transform: translate(5.5rem, -1.8rem);
}
@media (min-width: 1024px) {
  .main-comm .shell .comment .date {
    transform: none;
  }
}
.main-comm.testimonials {
  padding: 3rem 1rem;
}
.main-comm.testimonials .shell {
  max-width: unset;
}
@media (min-width: 1024px) {
  .main-comm.testimonials {
    padding: 5rem 5rem 2rem 5rem;
  }
}
.main-comm__slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
@media (min-width: 1024px) {
  .main-comm__slider {
    row-gap: 2rem;
    column-gap: 1rem;
  }
}
.main-comm__slider .draggable {
  padding: 1rem 0.5rem;
}
@media (min-width: 768px) {
  .main-comm__slider .draggable {
    padding: 1rem 1rem;
  }
}
@media (min-width: 1024px) {
  .main-comm__slider .draggable {
    padding: 1rem 1.5rem;
  }
}
.main-comm__slider .draggable .comment {
  transition: filter 0.4s;
}
.main-comm__slider .draggable .comment:not(.slick-active) {
  filter: none;
}
@media (min-width: 1024px) {
  .main-comm__slider .slick-dots li {
    width: 3.1rem;
  }
}
.main-comm .testi-form {
  max-width: 107rem;
  margin: 0 auto;
  border-radius: 2rem;
  padding: 1rem;
  background: #fff;
}
.main-comm .testi-form > p {
  text-align: left;
  max-width: 100%;
}
@media (min-width: 768px) {
  .main-comm .testi-form {
    padding: 2rem;
  }
}
@media (min-width: 1025px) {
  .main-comm .testi-form {
    padding: 5rem 8rem 5.5rem 8rem;
    margin-bottom: 7.5rem;
  }
}
.main-comm .testi-form .gform_wrapper form {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}
@media (min-width: 600px) {
  .main-comm .testi-form .gform_wrapper form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .main-comm .testi-form .gform_wrapper form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 7rem;
  }
}
.main-comm .testi-form .gform_wrapper form label {
  margin-top: 0;
  display: block;
  margin-bottom: 1.5rem;
}
.main-comm .testi-form .gform_wrapper form input {
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.main-comm .testi-form .gform_wrapper form #field_40_1 {
  grid-column: unset;
}
.main-comm .testi-form .gform_wrapper form .gform_heading,
.main-comm .testi-form .gform_wrapper form #field_40_5,
.main-comm .testi-form .gform_wrapper form #field_40_6,
.main-comm .testi-form .gform_wrapper form .gform_footer {
  grid-column: 1/span 2;
}
.main-comm .testi-form .gform_wrapper form .gform_heading input,
.main-comm .testi-form .gform_wrapper form #field_40_5 input,
.main-comm .testi-form .gform_wrapper form #field_40_6 input,
.main-comm .testi-form .gform_wrapper form .gform_footer input {
  margin-bottom: 0;
}
.main-comm .testi-form .gform_wrapper form #field_40_5 {
  margin: 3rem 0 2rem 0;
}
.main-comm .testi-form .gform_wrapper form .gfield_html {
  text-align: center;
  margin-bottom: 2rem;
}

/* -------------------------- *\
    .blog-slider
    .blog-sidebar
\* -------------------------- */
.blog-slider {
  --slide-width: 39.3rem;
  --slide-margin: 1rem;
  --slide-total: calc(var(--slide-width) + 2 * var(--slide-margin));
  background: #FBFBFD;
  padding: 5rem 0 1rem 0;
}
@media (min-width: 380px) {
  .blog-slider {
    --slide-margin: 2rem;
  }
}
@media (min-width: 1024px) {
  .blog-slider {
    padding: 7.2rem 5rem;
  }
}
.blog-slider .shell {
  max-width: var(--slide-total);
  margin-bottom: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .blog-slider .shell {
    max-width: calc(var(--slide-total) * 2);
  }
}
@media (min-width: 1024px) {
  .blog-slider .shell {
    max-width: calc(var(--slide-total) * 3);
  }
}
@media (min-width: 1300px) {
  .blog-slider .shell {
    max-width: 160rem;
  }
}
.blog-slider .shell h2 {
  text-transform: uppercase;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .blog-slider .shell h2 {
    margin-bottom: 0rem;
  }
}
@media (min-width: 1300px) {
  .blog-slider .shell h2 {
    margin-bottom: 4.7rem;
  }
}
.blog-slider .shell p {
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .blog-slider .shell p {
    margin-bottom: 1rem;
  }
}
.blog-slider .shell .blog-slider__slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1299px) {
  .blog-slider .shell .blog-slider__slider {
    row-gap: 1rem;
    column-gap: 0;
  }
}
@media (min-width: 1300px) {
  .blog-slider .shell .blog-slider__slider {
    display: grid;
  }
}
.blog-slider .shell .blog-slider__slider .thumb {
  position: relative;
  padding: 0 1rem 3.5rem 1rem;
  min-height: 41rem;
  display: flex;
  flex-flow: column;
}
@media (max-width: 1299px) {
  .blog-slider .shell .blog-slider__slider .thumb {
    width: var(--slide-width);
    margin: 1.8rem var(--slide-margin);
  }
}
@media (min-width: 380px) {
  .blog-slider .shell .blog-slider__slider .thumb {
    padding: 0 1.5rem 2.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .blog-slider .shell .blog-slider__slider .thumb {
    min-height: 38.5rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
    gap: 1.6rem;
  }
}
@media (min-width: 1024px) and (max-width: 1299px) {
  .blog-slider .shell .blog-slider__slider .thumb {
    margin-top: 5.3rem;
  }
}
@media (min-width: 1024px) {
  .blog-slider .shell .blog-slider__slider .thumb:hover {
    padding-bottom: 3.5rem;
    gap: 2.5rem;
    min-height: 42rem;
  }
}
@media (min-width: 1024px) and (max-width: 1299px) {
  .blog-slider .shell .blog-slider__slider .thumb:hover {
    margin-top: 1.8rem;
  }
}
.blog-slider .shell .blog-slider__slider .thumb h3 {
  line-height: 3.4rem;
}
@media (max-width: 379px) {
  .blog-slider .shell .blog-slider__slider .thumb h3 {
    font-size: 1.8rem;
    line-height: 2.9rem;
  }
}
@media (min-width: 1024px) {
  .blog-slider .shell .blog-slider__slider .thumb h3 {
    font-size: 2.4rem;
    line-height: 3.4rem;
  }
}
.blog-slider .shell .blog-slider__slider .thumb .date {
  position: absolute;
  top: 2rem;
  left: 1.8rem;
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 700;
}
.blog-slider.posts-list .shell h2, .blog-slider.posts-list .shell p {
  text-align: left;
  max-width: unset;
}
.blog-slider.posts-list .shell h2 {
  text-transform: none;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .blog-slider.posts-list .shell > .content {
    padding-top: 3rem;
  }
}
@media (min-width: 1300px) {
  .blog-slider.posts-list .shell > .content {
    row-gap: 5rem;
    column-gap: 2rem;
  }
}
@media (min-width: 1500px) {
  .blog-slider.posts-list .shell > .content {
    column-gap: 4rem;
  }
}
@media (min-width: 1300px) {
  .blog-slider.posts-list .shell > .content .thumb:first-child {
    grid-column: 1/span 2;
  }
  .blog-slider.posts-list .shell > .content .thumb:first-child h3 {
    max-width: 32.9rem;
  }
}
.blog-slider.posts-list .shell .hidden {
  margin-bottom: 5rem;
  transition: height 0.5s;
  overflow: hidden;
}
.blog-slider.posts-list .shell .reveal {
  display: flex;
  padding: 0;
}
.blog-slider.tall-thumbs .shell h2 {
  margin-bottom: 2rem;
}
.blog-slider.tall-thumbs .shell > div .thumb {
  min-height: 48.5rem;
}
.blog-slider.tall-thumbs .shell > div .thumb:hover {
  min-height: 52.5rem;
}
.blog-slider.blog-sidebar {
  display: grid;
  grid-template-columns: 100%;
  padding: 5rem 1rem 2rem 1rem;
}
@media (min-width: 1024px) {
  .blog-slider.blog-sidebar {
    overflow: visible;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    --slide-margin: 1rem;
    padding: 0 5rem;
    margin: 5rem 0 2rem 0;
  }
}
@media (min-width: 1300px) {
  .blog-slider.blog-sidebar {
    gap: 4rem;
    --slide-margin: 2rem;
  }
}
.blog-slider.blog-sidebar .shell {
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .blog-slider.blog-sidebar .shell {
    max-width: calc(var(--slide-total) * 2);
  }
}
@media (min-width: 1024px) {
  .blog-slider.blog-sidebar .shell {
    margin: 0;
    max-width: 160rem;
  }
}
@media (min-width: 1300px) {
  .blog-slider.blog-sidebar .shell .blog-slider__slider {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* -------------------------- *\
    .newsletter
\* -------------------------- */
.newsletter {
  background: #7BA914;
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
}
@media (min-width: 1024px) {
  .newsletter {
    padding-top: 6.5rem;
    padding-bottom: 7.5rem;
  }
}
.newsletter .shell {
  position: relative;
  z-index: 10;
}
.newsletter .shell h2,
.newsletter .shell h1 {
  color: #fff;
  font-size: 2.6rem;
  line-height: 3.2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .newsletter .shell h2,
.newsletter .shell h1 {
    font-size: 3.2rem;
    line-height: 3.9rem;
    font-weight: 700;
  }
}
.newsletter .shell p {
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: #fff;
  font-weight: 400;
  text-align: center;
  padding: 0 2rem;
  max-width: 67rem;
  margin: 0 auto 2.5rem auto;
}
@media (min-width: 1024px) {
  .newsletter .shell p {
    margin-bottom: 2rem;
  }
}
.newsletter .shell > div {
  max-width: 39.5rem;
  height: 5.5rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 2.8rem;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .newsletter .shell > div {
    max-width: 45.9rem;
  }
}
.newsletter .shell > div > form {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 12rem;
}
@media (min-width: 1024px) {
  .newsletter .shell > div > form {
    grid-template-columns: 1fr 15.6rem;
  }
}
.newsletter .shell > div > form .gform_heading {
  display: none;
}
.newsletter .shell > div > form label {
  display: none;
}
.newsletter .shell > div > form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
  height: 100%;
  width: 100%;
  padding: 0 0 0 2.5rem;
  border: none;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 500;
  font-family: var(--font-family);
  color: #000;
}
.newsletter .shell > div > form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file])::placeholder {
  opacity: 0.25;
}
.newsletter .shell > div > form .gform_footer {
  grid-column: 2/span 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsletter .shell > div > form .gform_footer .gform_button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 2.5rem;
  height: 4.9rem;
  margin-right: 0.3rem;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
}
.newsletter .shell > div > form .gform_footer .gform_ajax_spinner {
  padding: 0 0.5rem;
}
.newsletter__bg {
  position: absolute;
  z-index: 0;
  opacity: 0.28;
}
.newsletter__bg img {
  width: 100%;
  height: 100%;
}
.newsletter__bg--1 {
  top: 0;
  right: 0;
  width: 19.9rem;
  height: 6.2rem;
  transform: translate(16rem, 2rem) rotate(-160deg) scale(-1, 1);
}
@media (min-width: 768px) {
  .newsletter__bg--1 {
    width: 37rem;
    height: 11.5rem;
    transform: translate(18rem, 2rem) rotate(-160deg) scale(-1, 1);
  }
}
@media (min-width: 1024px) {
  .newsletter__bg--1 {
    transform: translate(32.5rem, 22rem) rotate(-92deg) scale(-1, 1);
    width: 54.9rem;
    height: 17.1rem;
  }
}
.newsletter__bg--2 {
  top: 0;
  right: 0;
  width: 21.9rem;
  height: 6.2rem;
  transform: translate(15.5rem, 6.7rem) rotate(175deg) scale(-1, 1);
}
@media (min-width: 768px) {
  .newsletter__bg--2 {
    width: 40rem;
    height: 10.5rem;
    transform: translate(18rem, 6.7rem) rotate(175deg) scale(-1, 1);
  }
}
@media (min-width: 1024px) {
  .newsletter__bg--2 {
    width: 59rem;
    height: 13rem;
    transform: translate(17.5rem, 25rem) rotate(-115deg) scale(-1, 1);
  }
}
.newsletter__bg--3 {
  top: 0;
  right: 0;
  width: 30.4rem;
  height: 10.4rem;
  transform: translate(20rem, 12.7rem) rotate(140deg) scale(-1, 1);
}
@media (min-width: 768px) {
  .newsletter__bg--3 {
    width: 55rem;
    height: 15rem;
    transform: translate(30rem, 12.7rem) rotate(140deg) scale(-1, 1);
  }
}
@media (min-width: 1024px) {
  .newsletter__bg--3 {
    width: 83.8rem;
    height: 20.6rem;
    transform: translate(10.5rem, 26rem) rotate(-157deg) scale(-1, 1);
  }
}
.newsletter__bg--4 {
  bottom: 0;
  left: 0;
  width: 28.5rem;
  height: 6.5rem;
  transform: translate(-22rem, -9rem) rotate(-18deg) scale(-1, 1);
}
@media (min-width: 768px) {
  .newsletter__bg--4 {
    width: 50rem;
    height: 11rem;
  }
}
@media (min-width: 1024px) {
  .newsletter__bg--4 {
    width: 81.2rem;
    height: 15.9rem;
    transform: translate(-34.5rem, 0rem) rotate(-13deg) scale(-1, -1);
  }
}
.newsletter__bg--5 {
  bottom: 0;
  left: 0;
  width: 36rem;
  height: 7rem;
  transform: translate(-21.5rem, -2.5rem) rotate(3deg) scale(-1, -1);
}
@media (min-width: 768px) {
  .newsletter__bg--5 {
    width: 40rem;
    height: 8.5rem;
  }
}
@media (min-width: 1024px) {
  .newsletter__bg--5 {
    width: 54.9rem;
    height: 10.6rem;
    transform: translate(-30rem, -13rem) rotate(-38deg) scale(-1, -1);
  }
}
.newsletter.blog-top {
  background: #000;
  padding: 6.5rem 0 0 0;
  margin-bottom: 0;
}
.newsletter.blog-top:before {
  content: none;
}
.newsletter.blog-top h1 {
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  .newsletter.blog-top h1 {
    font-size: 4.8rem;
    line-height: 5.8rem;
  }
}
.newsletter.blog-top .shell {
  margin-bottom: 7rem;
}
.newsletter.blog-top .newsletter__bg {
  opacity: 0.1;
}
.newsletter.blog-top .br-cr {
  position: relative;
  z-index: 10;
}

/* -------------------------- *\
    .page-top
    .br-cr
\* -------------------------- */
.page-top {
  padding: 0;
  position: relative;
  min-height: 14.2rem;
  margin-bottom: 0;
}
.page-top.br-cr-only {
  min-height: unset;
}
@media (min-width: 768px) {
  .page-top {
    min-height: 34rem;
  }
}
.page-top:before {
  content: none;
}
.page-top__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 11rem;
}
@media (min-width: 768px) {
  .page-top__bg {
    height: 30rem;
  }
}
.page-top__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-top__bg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
  display: block;
}
.page-top .shell {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  min-height: 11rem;
}
@media (min-width: 768px) {
  .page-top .shell {
    min-height: 30rem;
  }
}
.page-top .shell p,
.page-top .shell h1 {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.br-cr {
  background: #E4E4E4;
  padding: 0.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .br-cr {
    padding: 1rem 3rem;
  }
}
.br-cr p {
  font-size: 1.2rem;
  line-height: 2.6rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #696969;
  text-align: center;
}
@media (min-width: 768px) {
  .br-cr p {
    font-size: 1.4rem;
  }
}
.br-cr p a {
  color: #696969;
}

/* -------------------------- *\
    .prod-list
    .prod-list--search
\* -------------------------- */
.prod-list {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  overflow: visible;
}
.prod-list .shell {
  display: grid;
  max-width: 164rem;
  width: 100%;
  justify-content: center;
  justify-items: center;
  column-gap: 1rem;
  row-gap: 3rem;
}
@media (min-width: 380px) {
  .prod-list .shell {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 900px) {
  .prod-list .shell {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .prod-list .shell {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1500px) {
  .prod-list .shell {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.prod-list .facetwp-type-pager {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}
.prod-list .facetwp-type-pager div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.prod-list .facetwp-type-pager div .facetwp-page {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .prod-list .facetwp-type-pager div .facetwp-page {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.prod-list .facetwp-type-pager div .facetwp-page:not(.prev, .next) {
  opacity: 0.3;
}
.prod-list .facetwp-type-pager div .facetwp-page.active {
  opacity: 1;
}
.prod-list .facetwp-type-pager .prev,
.prod-list .facetwp-type-pager .next {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  position: relative;
  color: rgba(0, 0, 0, 0);
}
.prod-list .facetwp-type-pager .prev:before,
.prod-list .facetwp-type-pager .next:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #FBFBFD;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 50%;
}
.prod-list .facetwp-type-pager .prev:after,
.prod-list .facetwp-type-pager .next:after {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-left: solid 0.3rem rgba(0, 0, 0, 0.2);
  border-top: solid 0.3rem rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  z-index: 5;
}
.prod-list .facetwp-type-pager .prev:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.prod-list .facetwp-type-pager .next:after {
  transform: translate(-50%, -50%) rotate(135deg);
}
.prod-list .shell.prods {
  padding: 5rem 2rem;
}
@media (min-width: 1024px) {
  .prod-list .shell.prods {
    padding: 0 5rem 5rem 5rem;
  }
}
.prod-list--search {
  padding: 2rem 0;
}
.prod-list .shell.pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1rem;
  column-gap: 3rem;
  width: fit-content;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.prod-list .shell.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-weight: 600;
  color: #5F8508;
  text-align: center;
}
.prod-list .shell.pagination a:hover {
  color: #7BA914;
}
.prod-list .shell.pagination .nav-next {
  justify-self: end;
  grid-column: 2/span 1;
}
.prod-list .shell.pagination .nav-prev {
  justify-self: start;
  grid-column: 1/span 1;
}
.prod-list .shell.pagination .navigation {
  grid-column: 1/span 2;
}
.prod-list .shell.pagination .navigation h2,
.prod-list .shell.pagination .navigation .next,
.prod-list .shell.pagination .navigation .prev {
  display: none;
}
.prod-list .shell.pagination .navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.prod-list .shell.pagination .navigation a,
.prod-list .shell.pagination .navigation span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 3rem;
  border: solid 0.1rem rgba(123, 169, 20, 0.5);
}
.prod-list .shell.filters {
  position: sticky;
  position: -webkit-sticky;
  top: var(--header-height);
  z-index: 200;
  padding: 1.5rem;
  background: #fff;
  transition: top 0.3s;
  display: block;
}
@media (min-width: 990px) {
  .prod-list .shell.filters {
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: start;
    padding: 1.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .prod-list .shell.filters {
    padding: 1.5rem 5rem;
    max-width: 100%;
  }
}
@media (min-width: 1640px) {
  .prod-list .shell.filters {
    padding: 1.5rem calc(50% - 82rem);
  }
}
.prod-list .shell.filters > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-bottom: 1.5rem;
}
@media (max-width: 379px) {
  .prod-list .shell.filters > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-bottom: 0;
  }
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:first-child {
    padding: 0;
  }
}
.prod-list .shell.filters > div:first-child > p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
}
@media (max-width: 379px) {
  .prod-list .shell.filters > div:first-child > p {
    grid-column: 1/span 2;
  }
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:first-child > p {
    display: none;
  }
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:first-child .open {
    display: none;
  }
}
@media (max-width: 379px) {
  .prod-list .shell.filters > div:first-child .sort {
    grid-row: 1/span 1;
    grid-column: 2/span 1;
  }
  .prod-list .shell.filters > div:first-child .sort .black-br {
    padding: 0 1rem;
  }
  .prod-list .shell.filters > div:first-child .sort .black-br:before {
    content: none;
  }
  .prod-list .shell.filters > div:first-child .sort .black-br > p:first-of-type {
    display: none;
  }
}
.prod-list .shell.filters > div:last-child {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.5rem;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 164rem;
  margin: 0 auto;
  transform: translateX(-100%);
  transition: transform 0.5s;
  background: #fff;
  max-height: calc(80vh - var(--header-height));
  overflow-y: auto;
}
.prod-list .shell.filters > div:last-child.ex {
  transform: translateX(0);
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child {
    top: 0%;
    transform: translateX(0);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    flex-flow: column-reverse;
    justify-content: start;
    position: relative;
    padding: 0;
    overflow: visible;
    width: 100%;
  }
}
.prod-list .shell.filters > div:last-child .clear {
  display: none;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .clear {
    display: block;
    color: #fff;
    grid-row: 2/span 1;
    grid-column: 2/span 1;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  .prod-list .shell.filters > div:last-child .clear:before, .prod-list .shell.filters > div:last-child .clear:after {
    content: "";
    width: 1.4rem;
    height: 0.3rem;
    position: absolute;
    background: #000;
    display: block;
    right: 0.5rem;
    top: 50%;
  }
  .prod-list .shell.filters > div:last-child .clear:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .prod-list .shell.filters > div:last-child .clear:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets {
    grid-row: 1/span 1;
    grid-column: 1/span 2;
    padding-right: 24rem;
    flex-wrap: wrap;
  }
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .facetwp-selections {
    grid-row: 2/span 1;
    grid-column: 1/span 1;
  }
}
.prod-list .shell.filters > div:last-child .facetwp-selections ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 1rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .facetwp-selections ul {
    padding: 0;
  }
}
.prod-list .shell.filters > div:last-child .facetwp-selections ul li {
  display: flex;
  column-gap: 1rem;
  row-gap: 1rem;
}
.prod-list .shell.filters > div:last-child .facetwp-selections ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5rem;
  border: solid 0.1rem #979797;
  border-radius: 1.2rem;
  padding: 0 3rem 0 2rem;
  cursor: pointer;
  user-select: none;
  background: #FBFBFD;
  position: relative;
  margin: 0;
}
.prod-list .shell.filters > div:last-child .facetwp-selections ul li span:before, .prod-list .shell.filters > div:last-child .facetwp-selections ul li span:after {
  content: "";
  width: 1.1rem;
  height: 0.2rem;
  position: absolute;
  background: #000;
  display: block;
  right: 0.5rem;
  top: 50%;
}
.prod-list .shell.filters > div:last-child .facetwp-selections ul li span:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.prod-list .shell.filters > div:last-child .facetwp-selections ul li span:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.prod-list .shell.filters > div:last-child .facetwp-selections .facetwp-selection-label {
  display: none;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets {
    display: flex;
    gap: 1rem;
    position: relative;
    z-index: 50;
  }
}
@media (min-width: 1200px) {
  .prod-list .shell.filters > div:last-child .fil-sets {
    gap: 3rem;
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .open-fil {
  width: 100%;
  justify-content: start;
}
.prod-list .shell.filters > div:last-child .fil-sets .open-fil.ex {
  background: #000;
  color: #fff;
}
.prod-list .shell.filters > div:last-child .fil-sets .open-fil.ex:before {
  border-color: #fff;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets .open-fil {
    width: unset;
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil {
  margin-top: 2.5rem;
  overflow: hidden;
  transition: height 0.5s;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil {
    position: absolute;
    top: calc(100% + 4.9rem);
    left: 0;
    width: 100%;
    padding-bottom: 0;
    overflow-x: visible;
    overflow-y: clip;
    margin-top: 0;
  }
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil:before {
    content: "";
    width: 900vw;
    height: 100%;
    position: absolute;
    background: #fff;
    display: block;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet {
  position: relative;
  z-index: 10;
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  align-items: start;
  background: #fff;
  padding: 2rem 0;
}
@media (min-width: 380px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 700px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1300px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet > div {
  display: block;
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .group {
  margin-bottom: 3rem;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .group {
    margin-bottom: 0;
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .group .facetwp-depth {
  margin-left: 3rem;
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .facetwp-checkbox {
  font-size: 1.238rem;
  line-height: 1.6rem;
  font-weight: 500;
  min-height: 1.7rem;
  padding-left: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  background: none;
  margin-bottom: 1.5rem;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .facetwp-checkbox {
    font-size: 1.6rem;
    line-height: 1.9rem;
    min-height: 2.1rem;
    margin-bottom: 2rem;
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .facetwp-checkbox:before {
  content: "";
  width: 1.7rem;
  height: 1.7rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  left: 0;
  top: 0;
  border: solid 0.1rem #979797;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .facetwp-checkbox:before {
    width: 2.1rem;
    height: 2.1rem;
  }
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .facetwp-checkbox.checked:before {
  background: #000;
  border-color: #000;
}
.prod-list .shell.filters > div:last-child .fil-sets .cont-fil .facetwp-facet .facetwp-checkbox .facetwp-expand {
  display: none;
}
.prod-list .shell.filters > div:last-child .apply {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.9rem;
  width: 100%;
  border-radius: 2.5rem;
  background: #000;
  color: #fff;
  margin: 1rem 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.9rem;
  text-transform: uppercase;
}
@media (min-width: 990px) {
  .prod-list .shell.filters > div:last-child .apply {
    display: none;
  }
}

.black-br {
  font-size: 1.2rem;
  line-height: 1.5rem;
  height: 4rem;
  width: fit-content;
  font-weight: 500;
  padding: 0 5rem 0 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 0.1rem #000;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 990px) {
  .black-br {
    height: 5rem;
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding: 0 5rem 0 2rem;
  }
}
.black-br:before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-right: solid 0.2rem #000;
  border-bottom: solid 0.2rem #000;
  right: 1.5rem;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s;
}
.black-br.ex:before {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.sort {
  position: relative;
  z-index: 30;
}
@media (min-width: 990px) {
  .sort {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    min-width: 21rem;
  }
}
.sort > div:first-child {
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 0.2rem;
  padding-right: 4.5rem;
  width: 100%;
}
.sort > div:first-child > p:first-child {
  font-size: 0.88rem;
  line-height: 1.1rem;
  font-weight: 500;
}
.sort > div:first-child > p:nth-child(2) {
  font-size: 1.2rem;
  line-height: 1.1rem;
  font-weight: 500;
}
.sort > div:nth-child(2) {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  overflow: hidden;
  border: solid 0.1rem #000;
  border-top: none;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.3s, opacity 0.3s;
}
.sort > div:nth-child(2).ex {
  opacity: 1;
  visibility: visible;
}
.sort > div:nth-child(2) p {
  width: 100%;
  background: #fff;
  justify-content: start;
  padding-right: 3rem;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.sort > div:nth-child(2) p:before {
  content: none;
}
.sort > div:nth-child(2) p.ex {
  display: none;
}
.sort > div:nth-child(2) p:hover {
  background: #FBFBFD;
}
.sort > div:nth-child(2) p:active {
  background: #E4E4E4;
}

.woocommerce-result-count {
  display: none;
}

.woocommerce-ordering {
  position: absolute;
  z-index: -10;
}

/*-------------------------------*\
.about-cat
\*-------------------------------*/
.about-cat {
  padding: 5.5rem 1rem 3rem 1rem;
}
@media (min-width: 380px) {
  .about-cat {
    padding: 5.5rem 3.5rem 3rem 3.5rem;
  }
}
.about-cat .shell {
  max-width: 134rem;
}
.about-cat .shell > p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.6rem;
  color: #696969;
  text-align: center;
}
.about-cat .shell > h2 {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 3rem;
}
.about-cat .shell .top h3,
.about-cat .shell .bot > div > div h3 {
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  text-align: left;
}
.about-cat .shell .top p,
.about-cat .shell .bot > div > div p {
  font-size: 1.4rem;
  line-height: 2.6rem;
  color: #696969;
  font-weight: 500;
  text-align: center;
  margin-bottom: 3rem;
  text-align: left;
}
@media (min-width: 1024px) {
  .about-cat .shell .top p,
.about-cat .shell .bot > div > div p {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}
.about-cat .shell .top > div,
.about-cat .shell .bot > div > div {
  margin-bottom: 3rem;
}
@media (min-width: 990px) {
  .about-cat .shell .top > div,
.about-cat .shell .bot > div > div {
    column-count: 2;
  }
}
.about-cat .shell .bot > div {
  overflow: hidden;
  transition: height 0.5s;
}
.about-cat .shell .bot > span {
  display: block;
  margin: 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.about-cat .shell .bot > span:before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-left: solid 0.4rem rgba(0, 0, 0, 0.2);
  border-top: solid 0.4rem rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(-135deg);
  transition: transform 0.5s;
}
.about-cat .shell .bot > span:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #FBFBFD;
  display: block;
  border-radius: 1.984rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.about-cat .shell .bot > span.ex:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* -------------------------- *\
    .benefits
\* -------------------------- */
.benefits-bl {
  padding: 0;
  background: #000;
}

.benefits {
  display: grid;
  gap: 1.5rem;
  background: #000;
  padding: 1rem;
}
@media (min-width: 320px) {
  .benefits {
    grid-template-columns: 1fr 1fr;
    padding: 2.5rem 1rem 3.5rem 1rem;
    row-gap: 2.5rem;
    column-gap: 0;
  }
}
@media (min-width: 500px) {
  .benefits {
    padding: 2rem 2rem 3.5rem 2rem;
  }
}
@media (min-width: 768px) {
  .benefits {
    grid-template-columns: repeat(4, auto);
    justify-content: space-around;
  }
}
@media (min-width: 1024px) {
  .benefits {
    padding: 2.5rem 0 5rem 0;
    justify-content: space-between;
  }
}
.benefits div {
  position: relative;
  padding-left: 4rem;
}
@media (min-width: 320px) {
  .benefits div {
    padding-left: 4.9rem;
  }
}
@media (min-width: 1024px) {
  .benefits div {
    padding-left: 5.4rem;
    margin: 0 1rem;
  }
}
.benefits div p {
  color: #fff;
}
.benefits div p:first-of-type {
  padding-bottom: 0.9rem;
  font-size: 1.5rem;
  line-height: 1.9rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .benefits div p:first-of-type {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
.benefits div p:nth-of-type(2) {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .benefits div p:nth-of-type(2) {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.benefits div svg {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  fill: #fff;
}
.benefits div svg.i-operator {
  width: 2.5rem;
  height: 2.5rem;
  transform: translateX(0.6rem);
}
@media (min-width: 1024px) {
  .benefits div svg.i-operator {
    width: 3.1rem;
    height: 3.1rem;
  }
}
.benefits div svg.i-exchange {
  width: 3.2rem;
  height: 3.2rem;
  transform: translate(0.4rem, 0.2rem);
}
@media (min-width: 1024px) {
  .benefits div svg.i-exchange {
    width: 3.9rem;
    height: 3.9rem;
  }
}
.benefits div svg.i-delivery {
  width: 4rem;
  height: 4rem;
  transform: translateX(-0.7rem);
}
@media (min-width: 1024px) {
  .benefits div svg.i-delivery {
    width: 4.7rem;
    height: 4.7rem;
  }
}
.benefits div svg.i-leaf {
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(1rem, 0.5rem);
}

/* -------------------------- *\
    .about-us
\* -------------------------- */
.about-us .shell {
  margin: 0rem auto 7rem auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .about-us .shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0rem;
  }
}
.about-us .shell > div {
  height: fit-content;
}
.about-us .shell .text {
  padding: 0 1rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 380px) {
  .about-us .shell .text {
    padding: 0 2rem;
  }
}
.about-us .shell .text > p {
  margin-bottom: 1.5rem;
}
.about-us .shell .text > h2 {
  margin-bottom: 4rem;
  text-transform: none;
}
.about-us .shell .text > div > p {
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: #696969;
  text-align: center;
  max-width: 63.8rem;
  margin: 0 auto 4rem auto;
}
.about-us .shell .text .signs {
  display: flex;
  justify-content: center;
}
.about-us .shell .text .signs > div {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.about-us .shell .text .signs > div img {
  margin-bottom: 1rem;
}
.about-us .shell .text .signs > div p:nth-of-type(1) {
  margin-bottom: 0.5rem;
}
.about-us .shell .text .signs > div p:nth-of-type(2) {
  color: #696969;
  font-size: 1.2rem;
  line-height: 1.262;
  font-weight: 500;
}
.about-us .shell .text .btn-black {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6.2rem;
  height: 4.9rem;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
  background: #000;
  color: #fff;
  border-radius: 2.5rem;
  transition: transform 0.2s;
}
.about-us .shell .text .btn-black:hover {
  transform: scale(1.2);
}
.about-us .shell > div:not(.text) {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
}
.about-us .shell > div:not(.text) .v-prev {
  --white-space: 1.5rem;
  bottom: 0;
  left: 0;
  position: absolute;
  border: solid 1.5rem #fff;
  width: calc(11.1rem + 2 * var(--white-space));
  height: calc(11.1rem + 2 * var(--white-space));
  border-top-right-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  display: flex;
  align-items: center;
}
.about-us .shell > div:not(.text) .v-prev iframe,
.about-us .shell > div:not(.text) .v-prev video {
  display: none;
}
.about-us .shell > div:not(.text) .v-prev iframe {
  width: 100%;
  height: 100%;
}
.about-us .shell > div:not(.text) .v-prev.ex {
  border-width: 0;
  border-radius: 1.8rem;
  width: 100%;
  height: 100%;
  bottom: 100%;
}
.about-us .shell > div:not(.text) .v-prev.ex iframe,
.about-us .shell > div:not(.text) .v-prev.ex video {
  display: block;
}
.about-us .shell > div:not(.text) .v-prev.ex img {
  display: none;
}
.about-us.left .shell .text {
  grid-row: 1/span 1;
  grid-column: 2/span 1;
}
.about-us.left .shell > div:not(.text) {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
}
.about-us.left .shell > div:not(.text) .v-prev {
  left: 100%;
  transform: translate(-100%, 0);
  border-radius: 0;
  border-bottom-right-radius: 1.8rem;
  border-top-left-radius: 1.8rem;
}
.about-us.left .shell > div:not(.text) .v-prev.ex {
  transform: translate(-100%, 100%);
}
.about-us.left .shell > div:not(.text) .v-prev__play {
  left: -5rem;
}

/* -------------------------- *\
    .sidebar
\* -------------------------- */
.sidebar {
  display: grid;
  grid-template-columns: 100%;
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: 8rem;
    width: 30vw;
    height: calc(100vh - var(--header-height) - 2rem);
    grid-template-rows: auto 1fr;
  }
}
@media (min-width: 1300px) {
  .sidebar {
    width: 36.9rem;
  }
}
.sidebar h2 {
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: start;
  min-height: 4.5rem;
  width: 100%;
  border-bottom: solid 0.1rem #E4E4E4;
}
.sidebar > div {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  border-radius: 2rem;
  background: #fff;
}
.sidebar .top {
  display: grid;
  grid-template-columns: 100%;
  padding: 1.5rem;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 1300px) {
  .sidebar .top {
    padding: 1.5rem 3rem;
  }
}
.sidebar .top .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #E4E4E4;
  border-radius: 1rem;
  height: 6rem;
}
.sidebar .top .tabs h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  border-radius: 1rem;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s;
}
.sidebar .top .tabs h3.ex {
  background: #fff;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.2));
}
.sidebar .top .slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-row-gap: 1rem;
  opacity: 0;
  visibility: hidden;
  grid-row: 3/span 1;
  grid-column: 1/span 1;
  margin-bottom: 0;
}
.sidebar .top .slider.ex {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1024px) {
  .sidebar .top .slider .slick-dots li {
    width: 2.2rem;
    height: 2.2rem;
  }
  .sidebar .top .slider .slick-dots li button:before {
    width: 1.1rem;
    height: 1.1rem;
  }
}
@media (min-width: 1024px) {
  .sidebar .top .slider .slick-arrow:after {
    width: 3.6rem;
    height: 3.6rem;
  }
  .sidebar .top .slider .slick-arrow:before {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.sidebar .top .slider .thumb {
  min-height: 19.6rem;
  display: flex;
  justify-content: end;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
}
.sidebar .top .slider .thumb h4 {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.6rem;
  position: relative;
  z-index: 10;
  color: #fff;
  text-align: left;
  text-transform: none;
}
.sidebar .top .slider .thumb .date {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.6rem;
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
}
.sidebar .top .slider .thumb .btn {
  height: 0;
  width: 70%;
  padding: 0;
}
.sidebar .top .slider .thumb .btn p {
  font-size: 1.4rem;
  height: 3.5rem;
}
.sidebar .top .slider .thumb:hover {
  min-height: 19.6rem;
  padding-bottom: 1rem;
  margin-top: 0;
}
.sidebar .top .slider .thumb:hover .btn {
  height: 3.5rem;
}
.sidebar .bot {
  overflow: hidden;
  height: 100%;
}
.sidebar .bot > div {
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 1.3rem;
  padding: 1.5rem 2rem 3rem 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
@media (min-width: 1300px) {
  .sidebar .bot > div {
    padding: 1.5rem 3rem 3rem 3rem;
  }
}
.sidebar .bot > div a {
  display: block;
  font-size: 1.6rem;
  line-height: 2.4rem;
  position: relative;
  color: #000;
}
.sidebar .bot > div a.sel {
  font-weight: 600;
}
.sidebar .bot > div a.sel:before {
  content: "";
  width: 100%;
  height: 0.5rem;
  position: absolute;
  background: #000;
  display: block;
  right: calc(100% + 0.8rem);
  top: 0.8rem;
}
@media (min-width: 1300px) {
  .sidebar .bot > div a.sel:before {
    right: calc(100% + 1.5rem);
  }
}
.sidebar .bot > div a:hover {
  color: #5F8508;
}

/* -------------------------- *\
    .blog-post
    .blog-post-br-cr
\* -------------------------- */
.blog-post-br-cr {
  padding: 0;
}
.blog-post-br-cr:before {
  content: none;
}

.blog-post {
  padding-top: 0;
}
@media (min-width: 1024px) {
  .blog-post {
    display: grid;
    grid-template-columns: calc(100% - 37.9rem) 36.9rem;
    column-gap: 1rem;
  }
}
@media (min-width: 1300px) {
  .blog-post {
    column-gap: 4rem;
    grid-template-columns: calc(100% - 40.9rem) 36.9rem;
  }
}
.blog-post .sidebar {
  grid-row: 1/span 3;
  grid-column: 2/span 1;
}
.blog-post .shell {
  margin-bottom: 3rem;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .blog-post .shell {
    margin-bottom: 5rem;
    grid-column: 1/span 1;
  }
}
.blog-post .shell.post-head {
  margin: 0 0 1rem 0;
}
.blog-post .shell.post-head p, .blog-post .shell.post-head h1 {
  text-align: left;
}
.blog-post .shell.post-head p {
  margin-bottom: 1.5rem;
}
.blog-post .shell.post-head h1 {
  text-transform: none;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .blog-post .shell.post-head h1 {
    margin-bottom: 3rem;
  }
}
.blog-post .shell.post-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.blog-post .shell.post-head > div p, .blog-post .shell.post-head > div a {
  font-size: 1.4rem;
  line-height: 1.6rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: #000;
  margin: 0 1rem 0 0;
}
.blog-post .shell.post-head > div p.views svg, .blog-post .shell.post-head > div a.views svg {
  width: 2.3rem;
  height: 2.3rem;
}
.blog-post .shell.post-head > div p.rating, .blog-post .shell.post-head > div a.rating {
  margin-right: 0;
}
.blog-post .shell.post-head > div p.rating svg, .blog-post .shell.post-head > div a.rating svg {
  width: 2rem;
  height: 2rem;
  --svg-color: #7BA914;
}
.blog-post .shell.post-head > div p.comment, .blog-post .shell.post-head > div a.comment {
  position: relative;
  padding-left: 3rem;
}
.blog-post .shell.post-head > div p.comment .png-icon, .blog-post .shell.post-head > div a.comment .png-icon {
  position: absolute;
  left: -1rem;
  top: -0.5rem;
  transform: scale(0.5);
}
.blog-post .shell.post-head .rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
@media (max-width: 320px) {
  .blog-post .shell.post-head .rate {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
  }
}
.blog-post .shell.post-head .rate p {
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 600;
  display: block;
}
@media (max-width: 320px) {
  .blog-post .shell.post-head .rate p {
    width: 100%;
    padding: 0 1rem;
  }
}
.blog-post .shell.post-head .rate a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
}
.blog-post .shell.post-head .rate a svg {
  width: 70%;
  height: 70%;
}
.blog-post .shell.post-head .share {
  display: flex;
  align-items: center;
}
.blog-post .shell.post-head .share p {
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 600;
}
.blog-post .shell.post-head .share a {
  display: block;
  border: solid 0.1rem #C2C2C2;
  border-radius: 0.3rem;
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
}
.blog-post .shell.post-head .share a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0.4;
  transition: opacity 0.2s;
}
.blog-post .shell.post-head .share a:hover span {
  opacity: 1;
}
.blog-post .shell.big-img figure {
  margin-bottom: 5rem;
}
.blog-post .shell.big-img p {
  font-size: 1.6rem;
  line-height: 2.8rem;
}
.blog-post .shell.contents {
  position: relative;
}
.blog-post .shell.contents:before, .blog-post .shell.contents:after {
  content: "";
  width: 100%;
  height: 0.5rem;
  position: absolute;
  background: #fff;
  display: block;
  left: 0;
}
.blog-post .shell.contents:before {
  top: 0;
}
.blog-post .shell.contents:after {
  bottom: 0;
}
@media (min-width: 1024px) {
  .blog-post .shell.contents ul {
    column-count: 2;
  }
}
.blog-post .shell.contents ul li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 1.5rem;
  border-left: solid 0.3rem #7BA914;
  height: 4rem;
}
@media (min-width: 1024px) {
  .blog-post .shell.contents ul li {
    padding-left: 3rem;
  }
}
.blog-post .shell.contents ul li a {
  color: #000;
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 500;
  position: relative;
  display: inline-block;
  padding-right: 3rem;
  transition: opacity 0.3s;
}
@media (min-width: 1024px) {
  .blog-post .shell.contents ul li a {
    opacity: 0.5;
  }
}
.blog-post .shell.contents ul li a:before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-right: solid 0.3rem #7BA914;
  border-top: solid 0.3rem #7BA914;
  top: 50%;
  right: 0;
  transform: translate(-3rem, -50%) rotate(45deg);
  opacity: 0;
  transition: all 0.3s;
}
.blog-post .shell.contents ul li a:hover {
  opacity: 1;
}
.blog-post .shell.contents ul li a:hover:before {
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 1;
}
.blog-post .shell.main-block {
  margin-bottom: 8rem;
}
.blog-post .shell.main-block > p, .blog-post .shell.main-block > h2 {
  text-align: left;
}
.blog-post .shell.main-block > p {
  margin-bottom: 1rem;
}
.blog-post .shell.main-block h2 {
  text-transform: none;
  margin-bottom: 3rem;
}
.blog-post .shell.main-block > div > p {
  font-size: 1.6rem;
  line-height: 2.8rem;
  margin-bottom: 4rem;
}
.blog-post .shell.main-block .images {
  display: grid;
  margin-bottom: 4rem;
  gap: 1.5rem;
  justify-items: center;
}
@media (min-width: 400px) {
  .blog-post .shell.main-block .images {
    grid-template-columns: auto auto;
  }
}
.blog-post .shell.main-block .images img,
.blog-post .shell.main-block .images figure {
  overflow: hidden;
  border-radius: 2rem;
}
.blog-post .shell.main-block .images figure {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
}
@media (min-width: 400px) {
  .blog-post .shell.main-block .images figure {
    grid-row: 1/span 1;
    grid-column: 1/span 2;
  }
}
@media (min-width: 1300px) {
  .blog-post .shell.main-block .images figure {
    grid-row: 1/span 2;
    grid-column: 1/span 1;
  }
}
.blog-post .shell.main-block .videos,
.blog-post .shell.main-block .products {
  display: flex;
}
.blog-post .shell.main-block .videos {
  gap: 8.2rem;
  margin-bottom: 3rem;
}
.blog-post .shell.main-block .videos h3 {
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.blog-post .shell.main-block .products {
  overflow-y: auto;
}
.blog-post .shell.main-block .products .prod-thumb {
  min-width: 20rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
  .blog-post .shell.main-block .products .prod-thumb {
    min-width: 25rem;
  }
}
.blog-post .shell.main-block .questions {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 4rem;
}
@media (min-width: 1200px) {
  .blog-post .shell.main-block .questions {
    flex-flow: row;
  }
}
.blog-post .shell.main-block .questions > div > div {
  margin-bottom: 2.5rem;
  max-width: 73.6rem;
  overflow: hidden;
  transition: height 0.5s;
}
.blog-post .shell.main-block .questions > div > div h3 {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 5rem;
  padding: 0 3.2rem;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-weight: 600;
  border-bottom: solid 0.1rem #E4E4E4;
  user-select: none;
  cursor: pointer;
  position: relative;
}
.blog-post .shell.main-block .questions > div > div h3:before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  right: 1rem;
  top: 50%;
  border-bottom: solid 0.3rem #000;
  border-right: solid 0.3rem #000;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s;
}
.blog-post .shell.main-block .questions > div > div h3.ex:before {
  transform: translate(-50%, -50%) rotate(-135deg);
}
.blog-post .shell.main-block .questions > div > div > div {
  padding: 3rem;
  border-bottom: solid 0.1rem #E4E4E4;
}
.blog-post .shell.main-block .questions > div > div > div p {
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.blog-post .shell.main-block .questions > a {
  color: #000;
}
.blog-post .shell.main-block .questions > a:hover {
  color: #fff;
}

@media (min-width: 1024px) {
  .post-sidebar {
    z-index: 100;
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: fit-content;
    padding: 1rem;
    transition: all 0.3s;
  }
  .post-sidebar.ex {
    opacity: 0;
    visibility: hidden;
  }
  .post-sidebar .sidebar {
    top: 0;
  }
}

/* -------------------------- *\
    .comm-form
    .comms
\* -------------------------- */
@media (min-width: 1024px) {
  .comm-form .shell,
.comms .shell {
    padding-right: 38rem;
  }
}
.comm-form .shell > p, .comm-form .shell h2,
.comms .shell > p,
.comms .shell h2 {
  text-align: left;
}
.comm-form .shell > p,
.comms .shell > p {
  margin-bottom: 1.5rem;
}
.comm-form .shell > h2,
.comms .shell > h2 {
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  .comm-form {
    padding-bottom: 7rem;
  }
}
.comm-form .shell {
  margin-left: 0;
}
.comm-form .shell .comment-respond h3 {
  display: none;
}
.comm-form .shell .comment-respond form {
  display: grid;
  grid-template-columns: 100%;
  column-gap: 3rem;
}
@media (min-width: 500px) {
  .comm-form .shell .comment-respond form {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 700px) {
  .comm-form .shell .comment-respond form {
    column-gap: 7rem;
  }
}
.comm-form .shell .comment-respond form p {
  display: flex;
  flex-flow: column;
}
.comm-form .shell .comment-respond form p label {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.9rem;
  margin-bottom: 1.5rem;
}
.comm-form .shell .comment-respond form p label span {
  color: #7BA914;
}
.comm-form .shell .comment-respond form p input {
  border: solid 0.1rem #000;
  height: 5rem;
  border-radius: 0;
  margin-bottom: 3rem;
  font-family: var(--font-family);
  font-size: 1.6rem;
  line-height: 2.6rem;
  padding: 1rem;
  width: 100%;
}
.comm-form .shell .comment-respond form .logged-in-as {
  display: flex;
  flex-flow: column;
}
.comm-form .shell .comment-respond form .logged-in-as p {
  display: inline;
}
.comm-form .shell .comment-respond form .comment-notes {
  grid-row: 4/span 1;
  grid-column: 1/span 1;
}
@media (min-width: 500px) {
  .comm-form .shell .comment-respond form .comment-notes {
    grid-row: 3/span 1;
    grid-column: 1/span 2;
  }
}
.comm-form .shell .comment-respond form .comment-form-comment {
  margin-bottom: 1.5rem;
  grid-row: 3/span 1;
  grid-column: 1/span 1;
}
@media (min-width: 500px) {
  .comm-form .shell .comment-respond form .comment-form-comment {
    grid-row: 2/span 1;
    grid-column: 1/span 2;
  }
}
.comm-form .shell .comment-respond form .comment-form-comment textarea {
  border: solid 0.1rem #000;
  height: 15.1rem;
  max-width: 100%;
  font-family: var(--font-family);
  font-size: 1.6rem;
  line-height: 2.6rem;
  padding: 1rem;
}
.comm-form .shell .comment-respond form .comment-form-author {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
}
.comm-form .shell .comment-respond form .comment-form-url {
  display: none;
}
.comm-form .shell .comment-respond form .comment-notes {
  display: inline;
  font-size: 1.2rem;
  line-height: 2.2rem;
  margin-bottom: 3rem;
}
.comm-form .shell .comment-respond form .comment-notes a {
  color: #7BA914;
}
.comm-form .shell .comment-respond form .form-submit {
  grid-row: 5/span 1;
  grid-column: 1/span 1;
}
@media (min-width: 500px) {
  .comm-form .shell .comment-respond form .form-submit {
    grid-row: 4/span 1;
    grid-column: 1/span 2;
  }
}
.comm-form .shell .comment-respond form .form-submit input {
  border-radius: 2rem;
  height: 5rem;
  margin-bottom: 0;
  background: #fff;
  font-size: 1.4rem;
  line-height: 1.8rem;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-family);
  transition: color 0.3s, background 0.3s;
  cursor: pointer;
  user-select: none;
}
.comm-form .shell .comment-respond form .form-submit input:hover {
  background: #000;
  color: #fff;
}
.comm-form .shell .comment-respond form .comment-form-cookies-consent {
  display: none;
}

.comms .shell > div .comm {
  margin-bottom: 5rem;
}
.comms .shell > div .comm > div {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.comms .shell > div .comm > div p:first-child {
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
}
.comms .shell > div .comm > div p:first-child span {
  color: #7BA914;
}
.comms .shell > div .comm > div span {
  transform: scale(0.5);
}
.comms .shell > div .comm > div p:last-child {
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #696969;
}
.comms .shell > div .comm p {
  font-size: 1.6rem;
  line-height: 2.8rem;
}
.comms .shell > div .comm p:nth-child(3) {
  display: flex;
  justify-content: end;
}
.comms .shell > div .comm p:nth-child(3) a {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #696969;
}
.comms .shell > div .comm p:nth-child(3) a span {
  display: inline-block;
  transform: scale(0.5);
}

/* -------------------------- *\
    .cont-us
\* -------------------------- */
.cont-us .shell {
  display: grid;
  grid-template-columns: 100%;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
  .cont-us .shell {
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
  }
}
@media (min-width: 1300px) {
  .cont-us .shell {
    gap: 11rem;
  }
}
.cont-us .shell .t4 {
  text-align: left;
  margin-bottom: 1.5rem;
}
.cont-us .shell .t3 {
  line-height: 3rem;
  text-align: left;
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .cont-us .shell .t3 {
    line-height: 4.4rem;
  }
}
.cont-us .shell .form form {
  display: flex;
  flex-flow: column;
}
@media (min-width: 500px) {
  .cont-us .shell .form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
@media (min-width: 1024px) {
  .cont-us .shell .form form {
    row-gap: 1rem;
  }
}
@media (min-width: 1300px) {
  .cont-us .shell .form form {
    column-gap: 7rem;
  }
}
.cont-us .shell .form form input {
  margin-bottom: 2rem;
}
.cont-us .shell .form form label {
  display: block;
  margin-bottom: 1.5rem;
}
.cont-us .shell .form form .gform_heading {
  display: none;
}
.cont-us .shell .form form #field_37_5 {
  grid-column: 1/span 2;
}
.cont-us .shell .form form #field_37_6 {
  grid-column: 1/span 2;
  font-size: 1.2rem;
  line-height: 2.2rem;
}
.cont-us .shell .form form #field_37_6 a {
  color: #7BA914;
}
.cont-us .shell .form form .gform_footer {
  grid-column: 1/span 2;
}
.cont-us .shell .info {
  display: flex;
  flex-flow: column;
  gap: 7rem;
}
.cont-us .shell .info .consult {
  display: grid;
  grid-template-columns: 100%;
  background: #fff;
}
@media (min-width: 430px) {
  .cont-us .shell .info .consult {
    grid-template-columns: 1fr auto;
    column-gap: 3rem;
  }
}
@media (min-width: 430px) {
  .cont-us .shell .info .consult .two {
    grid-column: 1/span 2;
  }
}
.cont-us .shell .info .consult > div:first-of-type {
  background: #7BA914;
  border-radius: 2.625rem;
  border-top-left-radius: 0;
  height: 7rem;
  max-width: 33.8rem;
  width: 100%;
  min-width: 23.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 5rem 0 1rem;
}
.cont-us .shell .info .consult > div:first-of-type:before {
  content: "";
  width: 7rem;
  height: 6rem;
  position: absolute;
  background: #fff;
  display: block;
  border-radius: 2.625rem;
  border-bottom-left-radius: 0;
  z-index: 5;
  top: 50%;
  right: 0.5rem;
  transform: translate(0, -50%);
}
.cont-us .shell .info .consult > div:first-of-type p {
  font-size: 2.1rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: #fff;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
}
.cont-us .shell .info .consult > div:first-of-type span {
  position: absolute;
  z-index: 10;
  top: 50%;
  right: -1.8rem;
  transform: translate(0, -50%) scale(0.45);
}
.cont-us .shell .info .consult > div:last-of-type {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  justify-content: center;
}
.cont-us .shell .info .consult > div:last-of-type p {
  margin: 0;
}
.cont-us .shell .info .consult > div:last-of-type p:first-of-type {
  font-weight: 600;
}
.cont-us .shell .info .consult > div:last-of-type p:last-of-type {
  font-weight: 400;
}
.cont-us .shell .info .call p:nth-child(4) {
  font-weight: 600;
  margin-bottom: 1rem;
}
.cont-us .shell .info .call p:nth-child(5) {
  font-weight: 400;
}
.cont-us .shell .info .email p:last-child {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 2.1rem;
  line-height: 2.5rem;
  font-weight: 600;
  padding-left: 5rem;
  position: relative;
}
.cont-us .shell .info .email p:last-child span {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translate(0, -50%) scale(0.5);
}

/* -------------------------- *\
    .locations
\* -------------------------- */
.locations .shell {
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .locations .shell {
    padding-bottom: 7rem;
  }
}
.locations .shell > p {
  text-align: left;
  margin-bottom: 1.5rem;
}
.locations .shell > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
}
@media (min-width: 1500px) {
  .locations .shell > div {
    justify-content: space-between;
    gap: 2rem;
  }
}
.locations .shell > div > div {
  max-width: 44.7rem;
  width: 100%;
}
@media (min-width: 600px) {
  .locations .shell > div > div {
    width: 45%;
  }
}
.locations .shell > div > div h2 {
  text-align: left;
  margin-bottom: 2.5rem;
}
.locations .shell > div > div > p:not(.t14) {
  font-weight: 400;
}
.locations .shell > div > div > p:first-of-type {
  font-size: 1.8rem;
  line-height: 2.8rem;
  margin-bottom: 3.5rem;
}
.locations .shell > div > div > p.t14 {
  margin-bottom: 3.5rem;
}
.locations .shell > div > div > p.t14 a {
  color: #000;
}
.locations .shell > div > div > p.t14 a:hover {
  color: #7BA914;
}
.locations .shell > div > div .times {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  margin-bottom: 5rem;
}
.locations .shell > div > div .times p {
  text-align: left;
}
.locations .shell > div > div iframe {
  width: 100% !important;
}

/* -------------------------- *\
    .free-cons
    .bg-leafs
    .reg-top
\* -------------------------- */
.free-cons {
  padding-top: 2rem;
}
.free-cons .shell {
  max-width: 91rem;
}
.free-cons .shell .chose {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 600px) {
  .free-cons .shell .chose {
    justify-content: space-between;
  }
}
.free-cons .shell .chose > div {
  display: flex;
  flex-flow: column;
  align-items: center;
  max-width: 16.4rem;
  width: 100%;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.free-cons .shell .chose > div img {
  margin-bottom: 1.5rem;
  border-radius: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.free-cons .shell .chose > div p:first-of-type {
  font-size: 1.621rem;
  font-weight: 600;
  line-height: 2rem;
  margin-bottom: 0.3rem;
}
.free-cons .shell .chose > div p:last-of-type {
  font-size: 0.926rem;
  font-weight: 500;
  line-height: 1.505rem;
  color: #696969;
}
.free-cons .shell .chose > div:before {
  content: "";
  width: 100%;
  height: auto;
  position: absolute;
  background: #E4E4E4;
  display: block;
  top: 0;
  left: 0;
  border-radius: 50%;
  aspect-ratio: 1/1;
  z-index: -5;
  opacity: 0;
  transition: opacity 0.3s;
}
.free-cons .shell .chose > div.ex:before {
  opacity: 1;
}
.free-cons .shell .gform_wrapper form {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 2rem;
}
@media (min-width: 700px) {
  .free-cons .shell .gform_wrapper form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 2rem;
  }
}
@media (min-width: 900px) {
  .free-cons .shell .gform_wrapper form {
    column-gap: 7rem;
    row-gap: 3rem;
  }
}
.free-cons .shell .gform_wrapper form .gform_heading,
.free-cons .shell .gform_wrapper form #field_38_3,
.free-cons .shell .gform_wrapper form #field_38_10 {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
.free-cons .shell .gform_wrapper form #field_38_1,
.free-cons .shell .gform_wrapper form #field_38_4 {
  display: flex;
  flex-flow: column;
}
@media (min-width: 450px) {
  .free-cons .shell .gform_wrapper form #field_38_1,
.free-cons .shell .gform_wrapper form #field_38_4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
}
@media (min-width: 800px) {
  .free-cons .shell .gform_wrapper form #field_38_1,
.free-cons .shell .gform_wrapper form #field_38_4 {
    column-gap: 4rem;
  }
}
.free-cons .shell .gform_wrapper form #field_38_1 label,
.free-cons .shell .gform_wrapper form #field_38_4 label {
  grid-column: 1/span 2;
  margin-bottom: 1rem;
}
.free-cons .shell .gform_wrapper form #field_38_1 .t15,
.free-cons .shell .gform_wrapper form #field_38_4 .t15 {
  grid-row: 2/span 1;
  grid-column: 1/span 2;
  text-align: left;
  margin-bottom: 2.5rem;
}
.free-cons .shell .gform_wrapper form #field_38_1 .date,
.free-cons .shell .gform_wrapper form #field_38_1 .time,
.free-cons .shell .gform_wrapper form #field_38_4 .date,
.free-cons .shell .gform_wrapper form #field_38_4 .time {
  display: flex;
  border: solid 0.1rem #000;
  position: relative;
  height: 5.2rem;
  margin-bottom: 2rem;
}
@media (min-width: 450px) {
  .free-cons .shell .gform_wrapper form #field_38_1 .date,
.free-cons .shell .gform_wrapper form #field_38_1 .time,
.free-cons .shell .gform_wrapper form #field_38_4 .date,
.free-cons .shell .gform_wrapper form #field_38_4 .time {
    margin-bottom: 0;
  }
}
.free-cons .shell .gform_wrapper form #field_38_1 .date:before,
.free-cons .shell .gform_wrapper form #field_38_1 .time:before,
.free-cons .shell .gform_wrapper form #field_38_4 .date:before,
.free-cons .shell .gform_wrapper form #field_38_4 .time:before {
  content: "";
  width: 3rem;
  height: 5rem;
  position: absolute;
  background: #fff;
  display: block;
  aspect-ratio: 1/1;
  top: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}
.free-cons .shell .gform_wrapper form #field_38_1 .date:after,
.free-cons .shell .gform_wrapper form #field_38_1 .time:after,
.free-cons .shell .gform_wrapper form #field_38_4 .date:after,
.free-cons .shell .gform_wrapper form #field_38_4 .time:after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  top: 50%;
  right: 1rem;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: solid 0.2rem #000;
  border-bottom: solid 0.2rem #000;
  z-index: 10;
}
.free-cons .shell .gform_wrapper form #field_38_1 .date input,
.free-cons .shell .gform_wrapper form #field_38_1 .date select,
.free-cons .shell .gform_wrapper form #field_38_1 .time input,
.free-cons .shell .gform_wrapper form #field_38_1 .time select,
.free-cons .shell .gform_wrapper form #field_38_4 .date input,
.free-cons .shell .gform_wrapper form #field_38_4 .date select,
.free-cons .shell .gform_wrapper form #field_38_4 .time input,
.free-cons .shell .gform_wrapper form #field_38_4 .time select {
  border: none;
  border-left: solid 0.1rem #000;
  width: 100%;
  text-align: center;
}
.free-cons .shell .gform_wrapper form #field_38_1 .date span,
.free-cons .shell .gform_wrapper form #field_38_1 .time span,
.free-cons .shell .gform_wrapper form #field_38_4 .date span,
.free-cons .shell .gform_wrapper form #field_38_4 .time span {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  transform: translate(-50%, -50%) scale(0.5);
}
.free-cons .shell .gform_wrapper form #field_38_1 .date,
.free-cons .shell .gform_wrapper form #field_38_4 .date {
  padding: 0 5rem;
}
.free-cons .shell .gform_wrapper form #field_38_1 .time,
.free-cons .shell .gform_wrapper form #field_38_4 .time {
  padding: 0 1rem 0 5rem;
}
.free-cons .shell .gform_wrapper form #field_38_4 input {
  grid-column: 1/span 2;
}
.free-cons .shell .gform_wrapper form .gform_footer,
.free-cons .shell .gform_wrapper form #field_38_9,
.free-cons .shell .gform_wrapper form .validation_error {
  grid-column: 1/span 2;
}
.free-cons .shell .gform_wrapper form .gform_footer .t15,
.free-cons .shell .gform_wrapper form #field_38_9 .t15,
.free-cons .shell .gform_wrapper form .validation_error .t15 {
  margin: 0;
}
.free-cons .shell .gform_wrapper form .gform_footer {
  margin: 0;
  padding: 0;
}

.reg-top .shell {
  padding-bottom: 5rem;
}
.reg-top .shell > .png-icon {
  transform: scale(0.5);
  margin: 0 auto;
}
.reg-top .shell > p {
  margin-bottom: 1rem;
  max-width: 63rem;
  margin: 0 auto 1rem auto;
}
.reg-top .shell > p:nth-child(4) {
  margin-bottom: 3rem;
}
.reg-top .shell > h1 {
  margin-bottom: 2rem;
}
.reg-top .shell .t15 {
  text-align: center;
  margin-bottom: 4rem;
}

.bg-leafs {
  position: relative;
  background: #FBFBFD;
}
.bg-leafs .shell {
  position: relative;
  z-index: 10;
}
.bg-leafs .bg-leaf {
  position: absolute;
}
.bg-leafs .bg-leaf img {
  width: 100%;
  height: 100%;
}
.bg-leafs .bg-leaf--1 {
  top: 0;
  left: 0;
  width: 14rem;
  height: 3rem;
  transform: translate(-5.7rem, 12.6rem) rotate(161deg);
}
@media (min-width: 768px) {
  .bg-leafs .bg-leaf--1 {
    width: 27.5rem;
    height: 5.4rem;
    transform: translate(-11.7rem, 12.6rem) rotate(161deg);
  }
}
@media (min-width: 1024px) {
  .bg-leafs .bg-leaf--1 {
    width: 54.9rem;
    height: 10.4rem;
    transform: translate(-31.7rem, 32.6rem) rotate(161deg);
  }
}
.bg-leafs .bg-leaf--2 {
  top: 0;
  left: 0;
  width: 20rem;
  height: 4rem;
  transform: translate(-10rem, 18.6rem) rotate(175deg);
}
@media (min-width: 768px) {
  .bg-leafs .bg-leaf--2 {
    width: 42rem;
    height: 8rem;
    transform: translate(-19.5rem, 23.6rem) rotate(175deg);
  }
}
@media (min-width: 1024px) {
  .bg-leafs .bg-leaf--2 {
    width: 83.8rem;
    height: 16.5rem;
    transform: translate(-39.5rem, 47.6rem) rotate(175deg);
  }
}
.bg-leafs .bg-leaf--3 {
  top: 0;
  left: 0;
  width: 13rem;
  height: 2rem;
  transform: translate(-6.9rem, 25rem) rotate(-155deg);
}
@media (min-width: 768px) {
  .bg-leafs .bg-leaf--3 {
    width: 27rem;
    height: 5.3rem;
    transform: translate(-12.9rem, 35rem) rotate(-155deg);
  }
}
@media (min-width: 1024px) {
  .bg-leafs .bg-leaf--3 {
    width: 54.8rem;
    height: 10.6rem;
    transform: translate(-29.9rem, 60rem) rotate(-155deg);
  }
}
.bg-leafs .bg-leaf--4 {
  top: 0;
  right: 0;
  width: 12rem;
  height: 2.5rem;
  transform: translate(4.7rem, 11.3rem) scale(-1, 1) rotate(144deg);
}
@media (min-width: 768px) {
  .bg-leafs .bg-leaf--4 {
    width: 27rem;
    height: 6rem;
    transform: translate(12.7rem, 11.3rem) scale(-1, 1) rotate(144deg);
  }
}
@media (min-width: 1024px) {
  .bg-leafs .bg-leaf--4 {
    width: 54.9rem;
    height: 12.4rem;
    transform: translate(32.7rem, 26.3rem) scale(-1, 1) rotate(144deg);
  }
}
.bg-leafs .bg-leaf--5 {
  top: 0;
  right: 0;
  width: 18rem;
  height: 4rem;
  transform: translate(7.7rem, 17.3rem) scale(-1, 1) rotate(185deg);
}
@media (min-width: 768px) {
  .bg-leafs .bg-leaf--5 {
    width: 42rem;
    height: 10rem;
    transform: translate(18.7rem, 20.3rem) scale(-1, 1) rotate(185deg);
  }
}
@media (min-width: 1024px) {
  .bg-leafs .bg-leaf--5 {
    width: 83.8rem;
    height: 20.6rem;
    transform: translate(38.7rem, 40.3rem) scale(-1, 1) rotate(185deg);
  }
}
.bg-leafs .bg-leaf--6 {
  top: 0;
  right: 0;
  width: 15rem;
  height: 4rem;
  transform: translate(6.7rem, 25.3rem) scale(-1, 1) rotate(-162deg);
}
@media (min-width: 768px) {
  .bg-leafs .bg-leaf--6 {
    width: 27rem;
    height: 6rem;
    transform: translate(12.7rem, 30.3rem) scale(-1, 1) rotate(-162deg);
  }
}
@media (min-width: 1024px) {
  .bg-leafs .bg-leaf--6 {
    width: 54.8rem;
    height: 12.4rem;
    transform: translate(22.7rem, 66.3rem) scale(-1, 1) rotate(-162deg);
  }
}

/* -------------------------- *\
    .careers
    .job-data
    .job-info
\* -------------------------- */
.careers .shell {
  max-width: 100rem;
}
.careers .shell > p:nth-child(4) {
  margin-bottom: 5.5rem;
}
.careers .shell .locations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4.2rem;
}
.careers .shell .locations p {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.5rem;
  border: solid 0.1rem #000;
  border-radius: 2.5rem;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 600;
  transition: color 0.3s, background 0.3s;
  height: 4rem;
  cursor: pointer;
  user-select: none;
}
.careers .shell .locations p.ex {
  color: #fff;
  background: #000;
}
.careers .shell .jobs .job {
  border-top: solid 0.1rem #E4E4E4;
  padding: 3rem 0 3.3rem 0;
  display: none;
}
.careers .shell .jobs .job.ex {
  display: block;
}
.careers .shell .jobs .job .top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.careers .shell .jobs .job .top a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 3.5rem;
  position: relative;
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 600;
  color: #000;
}
.careers .shell .jobs .job .top a span {
  position: absolute;
  right: -1rem;
  top: 45%;
  transform: translate(0, -50%) scale(0.5);
}
.careers .shell .jobs .job .top a:hover {
  color: #7BA914;
}
.careers .shell .jobs .job > p {
  margin-bottom: 2.5rem;
}
.careers .shell .jobs .job .bot {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 3rem;
}

.job-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.8rem 2.5rem 0.8rem 5.5rem;
  position: relative;
  border-radius: 2.5rem;
  border: solid 0.1rem #979797;
  font-size: 1.4rem;
  line-height: 2.3rem;
  font-weight: 500;
  background: #fff;
}
.job-data span {
  position: absolute;
  top: 2rem;
  left: 3.2rem;
  transform: translate(-50%, -50%) scale(0.5);
}
.job-data--a span {
  top: 2.3rem;
}

.job-info {
  padding-top: 4rem;
}
.job-info .shell {
  max-width: 100rem;
}
.job-info .shell .job-data {
  width: fit-content;
  margin: 0 auto 1.5rem auto;
}
.job-info .shell > div {
  border-top: solid 0.1rem #E4E4E4;
  padding: 3.5rem 0 4.2rem 0;
}
.job-info .shell > div:first-of-type {
  margin-top: 4rem;
}
.job-info .shell > div h2, .job-info .shell > div h3 {
  margin-bottom: 2.5rem;
}
.job-info .shell > div h3 {
  margin-top: 5rem;
}
.job-info .shell > div > p, .job-info .shell > div li {
  margin-bottom: 2.5rem;
}
.job-info .shell > div li {
  list-style: none;
  padding-left: 2.5rem;
  position: relative;
}
.job-info .shell > div li:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  top: 0.5rem;
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 15 15'><path d='M17.8262273,8.2118001 L23.4340885,16.4366632 C23.7452109,16.8929759 23.6275108,17.515105 23.171198,17.8262273 C23.0051473,17.9394437 22.8088358,18 22.6078612,18 L11.3921388,18 C10.8398541,18 10.3921388,17.5522847 10.3921388,17 C10.3921388,16.7990254 10.4526951,16.6027139 10.5659115,16.4366632 L16.1737727,8.2118001 C16.484895,7.75548734 17.1070241,7.63778725 17.5633368,7.94890958 C17.6666295,8.01933643 17.7558005,8.1085074 17.8262273,8.2118001 Z' id='Triangle' transform='translate(20, -10) rotate(90)'></path></svg>");
}
.job-info .shell .gform_wrapper {
  padding: 0;
}
@media (min-width: 450px) {
  .job-info .shell .gform_wrapper form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 2rem;
  }
}
@media (min-width: 768px) {
  .job-info .shell .gform_wrapper form {
    column-gap: 7rem;
  }
}
.job-info .shell .gform_wrapper form label {
  margin-bottom: 1.5rem;
  display: block;
}
.job-info .shell .gform_wrapper form input {
  margin-bottom: 1rem;
}
.job-info .shell .gform_wrapper form .gform_heading {
  grid-column: 1/span 2;
}
.job-info .shell .gform_wrapper form #field_39_5 {
  grid-column: 1/span 2;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.job-info .shell .gform_wrapper form #field_39_5 > div {
  width: fit-content;
  height: 3.5rem;
  padding: 0 2rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s;
}
.job-info .shell .gform_wrapper form #field_39_5 > div > span {
  transform: scale(0.5);
}
.job-info .shell .gform_wrapper form #field_39_5 label,
.job-info .shell .gform_wrapper form #field_39_5 input {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 18rem;
  height: 4rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  user-select: none;
}
.job-info .shell .gform_wrapper form #field_39_5 label {
  z-index: 20;
}
.job-info .shell .gform_wrapper form #field_39_5:hover > div {
  transform: scale(1.1);
}
.job-info .shell .gform_wrapper form #field_39_8 {
  grid-column: 1/span 2;
  text-align: center;
  margin: 0;
}
.job-info .shell .gform_wrapper form .gform_footer {
  grid-column: 1/span 2;
  margin: 0;
  padding: 0;
}

/* -------------------------- *\
    .prod-page-top
\* -------------------------- */
.prod-page-top {
  padding: 3rem 1.5rem 5rem 1.5rem;
}
@media (min-width: 1024px) {
  .prod-page-top {
    padding: 0 5rem 5rem 5rem;
    overflow: visible;
  }
}
.prod-page-top .shell {
  display: grid;
  grid-template-columns: 100%;
  gap: 2rem;
  max-width: 60rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell {
    max-width: 160rem;
    grid-template-columns: 48% 48%;
    justify-content: space-between;
    row-gap: 0;
    overflow: visible;
    grid-template-rows: auto 1fr;
    align-items: start;
  }
}
@media (min-width: 1600px) {
  .prod-page-top .shell {
    grid-template-columns: 83.1rem 68.2rem;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .prod-head {
    top: 0;
    padding-top: 5rem;
  }
}
.prod-page-top .shell .prod-head .empty {
  display: none;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .prod-head .empty {
    display: block;
  }
}
.prod-page-top .shell .attr--prod-head {
  margin-bottom: 1rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  justify-content: start;
  width: 100%;
  pointer-events: all;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head {
    gap: 2rem;
    left: 0;
  }
}
.prod-page-top .shell .attr--prod-head > div {
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.25));
  transform: translateZ(0);
  margin-bottom: 3rem;
}
.prod-page-top .shell .attr--prod-head .disc,
.prod-page-top .shell .attr--prod-head .seller,
.prod-page-top .shell .attr--prod-head .new {
  height: 3rem;
  width: 3rem;
  padding: 0;
}
@media (min-width: 380px) {
  .prod-page-top .shell .attr--prod-head .disc,
.prod-page-top .shell .attr--prod-head .seller,
.prod-page-top .shell .attr--prod-head .new {
    padding-left: 3.8rem;
    padding-right: 1.5rem;
    width: auto;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .disc,
.prod-page-top .shell .attr--prod-head .seller,
.prod-page-top .shell .attr--prod-head .new {
    height: 3.8rem;
    padding-left: 5rem;
  }
}
.prod-page-top .shell .attr--prod-head .disc p,
.prod-page-top .shell .attr--prod-head .seller p,
.prod-page-top .shell .attr--prod-head .new p {
  font-size: 0.96rem;
  line-height: 1.1rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .disc p,
.prod-page-top .shell .attr--prod-head .seller p,
.prod-page-top .shell .attr--prod-head .new p {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
}
.prod-page-top .shell .attr--prod-head .disc:before {
  width: 3rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .disc:before {
    width: 3.8rem;
  }
}
.prod-page-top .shell .attr--prod-head .disc svg {
  left: 0.8rem;
  top: 0.8rem;
  width: 1.5rem;
  height: 1.5rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .disc svg {
    left: 1rem;
    top: 1rem;
    width: 1.8rem;
    height: 1.8rem;
  }
}
@media (min-width: 380px) {
  .prod-page-top .shell .attr--prod-head .seller img {
    top: -2.4rem;
    left: -2.4rem;
    transform: scale(0.4);
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .seller img {
    top: -2rem;
    left: -2rem;
    transform: scale(0.5);
  }
}
.prod-page-top .shell .attr--prod-head .new {
  padding: 0 1rem;
  justify-content: center;
  width: auto;
}
.prod-page-top .shell .attr--prod-head .yith-wcwl-add-to-wishlist {
  width: 3.8rem;
  height: 3.8rem;
  justify-self: end;
  filter: none;
  margin: 0;
  position: relative;
  grid-column: 4/span 1;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .yith-wcwl-add-to-wishlist {
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 0;
  }
}
.prod-page-top .shell .attr--prod-head .yith-wcwl-add-to-wishlist .fav--prod-page-top {
  padding: 0;
  display: block;
  border-radius: 50%;
  background: #FBFBFD;
}
.prod-page-top .shell .attr--prod-head .yith-wcwl-add-to-wishlist .fav--prod-page-top svg {
  width: 2.5rem;
  height: 2.5rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .attr--prod-head .yith-wcwl-add-to-wishlist .fav--prod-page-top svg {
    width: 2.7rem;
    height: 2.7rem;
  }
}
.prod-page-top .shell .titles {
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .titles {
    margin-bottom: 3rem;
  }
}
.prod-page-top .shell .titles > p {
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
  color: #7BA914;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .titles > p {
    font-size: 2.1rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
}
.prod-page-top .shell .titles h1 {
  font-size: 2.6rem;
  line-height: 3.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .titles h1 {
    font-size: 3.6rem;
    line-height: 4.4rem;
    margin-bottom: 1.5rem;
  }
  .prod-page-top .shell .titles h1 br {
    display: none;
  }
}
.prod-page-top .shell .titles > div {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 1.5rem;
}
.prod-page-top .shell .titles > div p {
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 500;
}
.prod-page-top .shell .titles > div p:nth-child(4), .prod-page-top .shell .titles > div p:nth-child(5) {
  position: relative;
  padding-left: 3rem;
}
.prod-page-top .shell .titles > div p:nth-child(4) span, .prod-page-top .shell .titles > div p:nth-child(5) span {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translate(-50%, -50%) scale(0.5);
}
.prod-page-top .shell .titles > div .sku {
  text-transform: uppercase;
  opacity: 0.2;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .titles > div .sku {
    font-size: 1.6rem;
    line-height: 1.9rem;
  }
}
.prod-page-top .shell .titles > div .stars svg {
  display: inline-block;
  --svg-color: #7BA914;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0 0.1rem;
}
.prod-page-top .shell .titles .open-comm,
.prod-page-top .shell .titles .open-ques {
  cursor: pointer;
  user-select: none;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .gallery {
    grid-row: 1/span 2;
    grid-column: 1/span 1;
    padding-top: 5rem;
  }
}
.prod-page-top .shell .gallery .preview {
  display: grid;
  grid-template-columns: 100%;
  padding: 0 1rem;
  margin-bottom: 6rem;
  position: relative;
}
@media (min-width: 380px) {
  .prod-page-top .shell .gallery .preview {
    margin-bottom: 3rem;
    padding: 0 5.5rem;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .gallery .preview {
    padding: 0 7.5rem;
  }
}
.prod-page-top .shell .gallery .preview .img {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-page-top .shell .gallery .preview .img.ex {
  opacity: 1;
  visibility: visible;
}
.prod-page-top .shell .gallery .preview .img img {
  position: relative;
  margin: 0 auto;
}
.prod-page-top .shell .gallery .preview .arr-prev,
.prod-page-top .shell .gallery .preview .arr-next {
  position: absolute;
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  top: calc(100% + 3rem);
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
}
@media (min-width: 380px) {
  .prod-page-top .shell .gallery .preview .arr-prev,
.prod-page-top .shell .gallery .preview .arr-next {
    top: 50%;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .gallery .preview .arr-prev,
.prod-page-top .shell .gallery .preview .arr-next {
    width: 5.1rem;
    height: 5.1rem;
  }
}
.prod-page-top .shell .gallery .preview .arr-prev:before,
.prod-page-top .shell .gallery .preview .arr-next:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border: solid 0.4rem rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media (min-width: 1024px) {
  .prod-page-top .shell .gallery .preview .arr-prev:before,
.prod-page-top .shell .gallery .preview .arr-next:before {
    width: 3.2rem;
    height: 3.2rem;
    border: solid 0.9rem rgba(0, 0, 0, 0.1);
  }
}
.prod-page-top .shell .gallery .preview .arr-prev {
  left: 0rem;
}
.prod-page-top .shell .gallery .preview .arr-prev:before {
  border-top: none;
  border-right: none;
}
.prod-page-top .shell .gallery .preview .arr-next {
  right: 0rem;
}
.prod-page-top .shell .gallery .preview .arr-next:before {
  border-bottom: none;
  border-left: none;
}
.prod-page-top .shell .gallery .thumbs {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 1rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .gallery .thumbs {
    gap: 4.5rem;
  }
}
.prod-page-top .shell .gallery .thumbs .img {
  width: 5.2rem;
  height: 5.2rem;
  min-width: 5.2rem;
  min-height: 5.2rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .gallery .thumbs .img {
    width: 10.2rem;
    height: 10.2rem;
    min-width: 10.2rem;
    min-height: 10.2rem;
  }
}
.prod-page-top .shell .gallery .thumbs .img img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .prod-page-top .shell .main-data-wrap {
    height: auto !important;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data-wrap {
    top: 0;
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
.prod-page-top .shell .main-data p, .prod-page-top .shell .main-data li {
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.prod-page-top .shell .main-data li {
  list-style: none;
}
.prod-page-top .shell .main-data p {
  margin-bottom: 1.5rem;
}
.prod-page-top .shell .main-data .features,
.prod-page-top .shell .main-data .quant-disc {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 1.5rem;
  column-gap: 2rem;
  margin-bottom: 3rem;
  padding: 1rem;
}
@media (min-width: 380px) {
  .prod-page-top .shell .main-data .features,
.prod-page-top .shell .main-data .quant-disc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .features {
    padding: 0 0 1rem 0;
  }
}
.prod-page-top .shell .main-data .quant-disc {
  background: #FBFBFD;
  border-radius: 2rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .quant-disc {
    padding: 1.5rem 4rem;
  }
}
.prod-page-top .shell .main-data .prod-benef {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
  row-gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prod-benef {
    justify-content: center;
    column-gap: 5.5rem;
  }
}
.prod-page-top .shell .main-data .prod-benef li {
  padding-left: 3rem;
  position: relative;
}
.prod-page-top .shell .main-data .prod-benef li span {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translate(-50%, -50%) scale(0.5);
}
.prod-page-top .shell .main-data .prices {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
  background: #FBFBFD;
  border-radius: 2rem;
  padding: 1rem 1.5rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices {
    justify-content: center;
    gap: 3rem;
  }
}
.prod-page-top .shell .main-data .prices .main {
  padding: 0.7rem 0 0.5rem 0;
  display: flex;
  flex-flow: column;
  gap: 0.8rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .main {
    gap: 1rem;
  }
}
.prod-page-top .shell .main-data .prices .main p {
  margin-bottom: 0;
}
.prod-page-top .shell .main-data .prices .main p:first-child {
  font-size: 1.139rem;
  line-height: 1.4rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .main p:first-child {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.prod-page-top .shell .main-data .prices .main p:first-child span:nth-child(2) {
  color: #7BA914;
  font-weight: 600;
  position: relative;
  padding-left: 2rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .main p:first-child span:nth-child(2) {
    padding-left: 2.3rem;
  }
}
.prod-page-top .shell .main-data .prices .main p:first-child span:nth-child(2):before {
  content: "";
  width: 1rem;
  height: 0.5rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-left: solid 0.2rem #7BA914;
  border-bottom: solid 0.2rem #7BA914;
  left: 1rem;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .main p:first-child span:nth-child(2):before {
    width: 1.3rem;
    height: 0.7rem;
    border-width: 0.3rem;
    top: 40%;
  }
}
.prod-page-top .shell .main-data .prices .main p:last-child {
  font-size: 1.758rem;
  letter-spacing: 0.073rem;
  line-height: 2.1rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .main p:last-child {
    font-size: 2.16rem;
    letter-spacing: 0.09rem;
    line-height: 2.6rem;
  }
}
.prod-page-top .shell .main-data .prices .main p:last-child span:first-child {
  font-weight: 600;
  color: #5F8508;
}
.prod-page-top .shell .main-data .prices .main p:last-child span:last-child {
  opacity: 0.5;
  text-decoration: line-through;
}
.prod-page-top .shell .main-data .prices .club {
  padding: 0.7rem 2rem 0rem 2rem;
  display: flex;
  flex-flow: column;
  gap: 0.3rem;
  background: #000;
  border-radius: 0.895rem;
}
.prod-page-top .shell .main-data .prices .club p {
  color: #fff;
  margin: 0;
}
.prod-page-top .shell .main-data .prices .club p:first-child {
  font-size: 1.139rem;
  letter-spacing: 0.049rem;
  line-height: 1.4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .club p:first-child {
    font-size: 1.4rem;
    letter-spacing: 0.058rem;
    line-height: 1.8rem;
  }
}
.prod-page-top .shell .main-data .prices .club p:first-child svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: #fff;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .club p:first-child svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.prod-page-top .shell .main-data .prices .club p:last-child {
  font-size: 1.709rem;
  letter-spacing: 0.071rem;
  line-height: 2.604rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices .club p:last-child {
    font-size: 2.1rem;
    letter-spacing: 0.087rem;
    line-height: 3.2rem;
  }
}
.prod-page-top .shell .main-data .prices > img {
  display: none;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .main-data .prices > img {
    display: block;
    width: 13.6rem;
    height: 6.3rem;
  }
}
.prod-page-top .shell .order {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 4rem;
  gap: 1.5rem;
}
@media (min-width: 380px) {
  .prod-page-top .shell .order {
    grid-template-columns: 38% 1fr;
    max-width: 50rem;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 5rem;
    max-width: 60.5rem;
    column-gap: 3rem;
  }
}
.prod-page-top .shell .order p {
  margin-bottom: 0;
  font-size: 1.12rem;
  line-height: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.prod-page-top .shell .order > * {
  filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.25));
  background: #fff;
  border-radius: 1.6rem;
  height: 100%;
  z-index: 10;
  transform: translateZ(0);
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order > * {
    border-radius: 2rem;
  }
}
.prod-page-top .shell .order .qty-btn--prod {
  --btn-width: 4.8rem;
  --sign-len: 1.1rem;
  --sign-thick: 0.2rem;
  --sign-offset: 2.5rem;
  --font-size: 1.598rem;
  --letter-spacing: 0.067rem;
  --line-height: 1.9rem;
  width: 100%;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order .qty-btn--prod {
    --btn-width: 6rem;
    --sign-len: 1.5rem;
    --sign-thick: 0.3rem;
    --font-size: 1.997rem;
    --letter-spacing: 0.083rem;
    --line-height: 2.4rem;
  }
}
.prod-page-top .shell .order .add-cart--prod-page-top {
  display: grid;
  transform: none;
  opacity: 1;
  width: 100%;
  padding-left: 6rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order .add-cart--prod-page-top {
    padding-left: 9.4rem;
  }
}
.prod-page-top .shell .order .add-cart--prod-page-top > div {
  border-radius: 1.6rem;
  width: 7.533rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order .add-cart--prod-page-top > div {
    border-radius: 2rem;
    width: 9.4rem;
  }
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order .add-cart--prod-page-top > div svg {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.prod-page-top .shell .order .add-cart--prod-page-top > div:before {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.28rem;
  left: 4.5rem;
  filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order .add-cart--prod-page-top > div:before {
    width: 1.7rem;
    height: 1.7rem;
    left: 60%;
    top: 0.5rem;
    font-size: 1.6rem;
  }
}
.prod-page-top .shell .order .add-cart--prod-page-top.loading {
  opacity: 0.5;
  cursor: loading;
  position: relative;
}
.prod-page-top .shell .order .add-cart--prod-page-top.loading:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  top: 0;
  left: 0;
  z-index: 100;
}
.prod-page-top .shell .order .add-cart--prod-page-top .add {
  display: block;
}
.prod-page-top .shell .order .add-cart--prod-page-top .more {
  display: none;
}
.prod-page-top .shell .order .add-cart--prod-page-top.added .add {
  display: none;
}
.prod-page-top .shell .order .add-cart--prod-page-top.added .more {
  display: block;
}
.prod-page-top .shell .order .add-cart--prod-page-top:hover > div {
  width: 100%;
}
.prod-page-top .shell .order .add-cart--prod-page-top:hover > div:before {
  left: 29%;
}
.prod-page-top .shell .order .yith-wcwl-add-to-wishlist {
  margin: 0;
  position: relative;
}
.prod-page-top .shell .order .yith-wcwl-add-to-wishlist p {
  display: block;
  text-align: center;
}
.prod-page-top .shell .order .yith-wcwl-add-to-wishlist .fav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1.5rem;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
}
.prod-page-top .shell .order .yith-wcwl-add-to-wishlist .fav svg {
  position: relative;
  left: unset;
  top: unset;
  transform: none;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order .yith-wcwl-add-to-wishlist .fav svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.prod-page-top .shell .order > div.quick {
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-page-top .shell .order > div.quick p {
  display: flex;
  position: relative;
  left: -0.7rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order > div.quick p {
    left: 0;
  }
}
.prod-page-top .shell .order > div.quick p span {
  transform: scale(0.5);
}
@media (min-width: 1024px) {
  .prod-page-top .shell .order > div.quick p span {
    transform: translateX(-0.5rem) scale(0.65);
  }
}
.prod-page-top .shell .more-info {
  margin-top: 3rem;
}
@media (min-width: 1024px) {
  .prod-page-top .shell .more-info {
    margin-top: 10rem;
  }
}
.prod-page-top .shell .more-info__text {
  margin-bottom: 3rem;
}

/*-------------------------------*\
.prod-questions
.prod-btn
.reveal
\*-------------------------------*/
.prod-questions .shell .top {
  margin-bottom: 4rem;
}
@media (min-width: 1024px) {
  .prod-questions .shell .top {
    display: grid;
    grid-template-columns: 1fr 24rem;
  }
}
.prod-questions .shell .top > p:not(.ask) {
  margin-bottom: 0.5rem;
}
.prod-questions .shell .top h2 {
  margin-bottom: 2rem;
}
.prod-questions .shell .content {
  overflow: hidden;
  transition: height 0.5s;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .prod-questions .shell .content {
    column-count: 2;
    column-gap: 9rem;
    padding: 0 3rem;
  }
}
.prod-questions .shell .content > div {
  overflow: hidden;
  transition: height 0.5s;
}
.prod-questions .shell .content .ques {
  overflow: hidden;
  transition: height 0.5s;
  border-bottom: solid 0.1rem #E4E4E4;
}
.prod-questions .shell .content .ques h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 5.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.9rem;
  padding: 0.5rem 5rem 0.5rem 1rem;
  position: relative;
  user-select: none;
  cursor: pointer;
  margin-top: 0.5rem;
}
@media (min-width: 380px) {
  .prod-questions .shell .content .ques h3 {
    padding: 0.5rem 5rem 0.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .prod-questions .shell .content .ques h3 {
    margin-top: 2rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
.prod-questions .shell .content .ques h3:before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-right: solid 0.2rem #000;
  border-bottom: solid 0.2rem #000;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s;
}
.prod-questions .shell .content .ques h3.ex:before {
  transform: translateY(-50%) rotate(-135deg);
}
.prod-questions .shell .content .ques div p {
  font-size: 1.4rem;
  line-height: 2.6rem;
  padding: 1rem;
}
@media (min-width: 380px) {
  .prod-questions .shell .content .ques div p {
    padding: 2rem 2rem 1.5rem 2rem;
  }
}

.prod-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 24rem;
  width: 100%;
  height: 5rem;
  border-radius: 2rem;
  border: solid 0.2rem #000;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.6rem;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
  user-select: none;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .prod-btn {
    grid-row: 1/span 2;
    grid-column: 2/span 1;
  }
}
.prod-btn a {
  color: inherit;
  transition: none;
}
.prod-btn:hover {
  background: #000;
  color: #fff;
}

.reveal {
  margin: 0 auto;
  width: 11rem;
  height: 11rem;
  text-align: center;
  padding-top: 2rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.reveal p {
  font-size: 1.4rem;
  line-height: 1.8rem;
  white-space: nowrap;
}
.reveal p:nth-child(1) {
  display: block;
}
.reveal p:nth-child(2) {
  display: none;
}
.reveal:before {
  content: "";
  width: 3.8rem;
  height: 3.8rem;
  position: absolute;
  background: #FBFBFD;
  display: block;
  z-index: 0;
  left: 50%;
  top: 6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.reveal:after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-right: solid 0.3rem rgba(0, 0, 0, 0.2);
  border-bottom: solid 0.3rem rgba(0, 0, 0, 0.2);
  left: 50%;
  top: 6rem;
  transform: translate(-50%, -50%) rotate(45deg);
}
.reveal.ex p:nth-child(1) {
  display: none;
}
.reveal.ex p:nth-child(2) {
  display: block;
}
.reveal.ex:after {
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* -------------------------- *\
    .prod-comments
\* -------------------------- */
.prod-comments {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1024px) {
  .prod-comments {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.prod-comments .shell .top {
  margin-bottom: 4rem;
}
@media (min-width: 1024px) {
  .prod-comments .shell .top {
    display: grid;
    grid-template-columns: 1fr 24rem;
  }
}
.prod-comments .shell .top > p:not(.ask) {
  margin-bottom: 0.5rem;
}
.prod-comments .shell .top h2 {
  margin-bottom: 3rem;
}
@media (min-width: 990px) {
  .prod-comments .shell .rating {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 7.5rem;
  }
}
.prod-comments .shell .rating > div:nth-child(1) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media (min-width: 380px) {
  .prod-comments .shell .rating > div:nth-child(1) {
    padding-left: 2rem;
  }
}
.prod-comments .shell .rating > div:nth-child(1) p:nth-child(1) {
  font-size: 2.8rem;
  line-height: 3.4rem;
  font-weight: 600;
  grid-row: 1/span 2;
  grid-column: 1/span 1;
}
@media (min-width: 1024px) {
  .prod-comments .shell .rating > div:nth-child(1) p:nth-child(1) {
    font-size: 4.8rem;
    line-height: 5.8rem;
  }
}
.prod-comments .shell .rating > div:nth-child(1) p:nth-child(2) svg {
  width: 2rem;
  height: 2rem;
  margin-left: 0;
  margin-right: 0.2rem;
  --svg-color: #7BA914;
}
@media (min-width: 380px) {
  .prod-comments .shell .rating > div:nth-child(1) p:nth-child(2) svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0;
    margin-right: 0.4rem;
  }
}
@media (min-width: 1024px) {
  .prod-comments .shell .rating > div:nth-child(1) p:nth-child(2) svg {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.prod-comments .shell .rating > div:nth-child(1) p:nth-child(3) {
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.prod-comments .shell .rating > div:nth-child(2) {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3rem;
  grid-auto-rows: 2.5rem;
  row-gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media (min-width: 380px) {
  .prod-comments .shell .rating > div:nth-child(2) {
    grid-template-columns: 7.5rem calc(100% - 11rem) 3.5rem;
    max-width: 53rem;
  }
}
@media (min-width: 990px) {
  .prod-comments .shell .rating > div:nth-child(2) {
    grid-template-columns: 7.5rem calc(100% - 12rem) 4.5rem;
    max-width: 54rem;
    width: 100%;
    margin: 0 auto;
  }
}
.prod-comments .shell .rating > div:nth-child(2) p:nth-child(3n+1), .prod-comments .shell .rating > div:nth-child(2) p:nth-child(3n+3) {
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.prod-comments .shell .rating > div:nth-child(2) p:nth-child(3n+1) {
  font-weight: 600;
}
.prod-comments .shell .rating > div:nth-child(2) p:nth-child(3n+3) {
  justify-self: end;
}
.prod-comments .shell .rating > div:nth-child(2) span {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: 100%;
  background: #FBFBFD;
  position: relative;
}
.prod-comments .shell .rating > div:nth-child(2) span:before {
  content: "";
  width: var(--fill);
  height: 100%;
  position: absolute;
  background: #7BA914;
  display: block;
  left: 0;
  top: 0;
}
.prod-comments .shell .rating > div:nth-child(3) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media (min-width: 380px) {
  .prod-comments .shell .rating > div:nth-child(3) {
    padding-left: 2rem;
  }
}
.prod-comments .shell .rating > div:nth-child(3) p:nth-child(1) {
  font-size: 2.6rem;
  line-height: 3.2rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .prod-comments .shell .rating > div:nth-child(3) p:nth-child(1) {
    font-size: 4.8rem;
    line-height: 5.8rem;
  }
}
.prod-comments .shell .rating > div:nth-child(3) p:nth-child(2) {
  font-size: 1.4rem;
  line-height: 1.8rem;
  max-width: 16.9rem;
}
.prod-comments .shell .sorting {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  grid-row-gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
  display: none;
}
.prod-comments .shell .sorting > p {
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .prod-comments .shell .sorting > p {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
.prod-comments .shell .sorting .sort .black-br {
  width: 16.8rem;
}
@media (min-width: 1024px) {
  .prod-comments .shell .sorting .sort .black-br {
    width: 21rem;
  }
}
@media (min-width: 1024px) {
  .prod-comments .shell .sorting .sort .black-br p:first-child {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
}
@media (min-width: 1024px) {
  .prod-comments .shell .sorting .sort .black-br p:last-child {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }
}
.prod-comments .shell .comments p {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #696969;
}
.prod-comments .shell .comments > div {
  overflow: hidden;
  border-radius: 2rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .prod-comments .shell .comments > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div {
    grid-template-columns: 1fr 27.5rem;
    row-gap: 2rem;
    column-gap: 5rem;
    margin-bottom: 6rem;
  }
}
@media (min-width: 1300px) {
  .prod-comments .shell .comments > div {
    column-gap: 24rem;
  }
}
.prod-comments .shell .comments > div .comm-top {
  background: #FBFBFD;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2rem;
  height: 6rem;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .prod-comments .shell .comments > div .comm-top {
    grid-row: 1/span 1;
    grid-column: 1/span 2;
    padding: 0 2rem;
  }
}
.prod-comments .shell .comments > div .comm-top p {
  font-weight: 600;
  line-height: 1.8rem;
  display: flex;
  color: #000;
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div .comm-top p {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}
.prod-comments .shell .comments > div .comm-top svg {
  width: 2rem;
  height: 2rem;
  --svg-color: #7BA914;
  margin-right: 0.2rem;
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div .comm-top svg {
    width: 2.2rem;
    height: 2.2rem;
    margin-right: 0.4rem;
  }
}
.prod-comments .shell .comments > div .text {
  padding: 1rem 0.5rem;
}
@media (min-width: 380px) {
  .prod-comments .shell .comments > div .text {
    padding: 2rem 1.5rem;
  }
}
@media (min-width: 768px) {
  .prod-comments .shell .comments > div .text {
    padding-top: 0;
  }
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div .text {
    padding: 0 3rem;
  }
}
.prod-comments .shell .comments > div .text p {
  line-height: 2.4rem;
}
.prod-comments .shell .comments > div div:nth-child(3), .prod-comments .shell .comments > div div:nth-child(4), .prod-comments .shell .comments > div div:nth-child(5) {
  padding: 0 0.5rem;
}
@media (min-width: 380px) {
  .prod-comments .shell .comments > div div:nth-child(3), .prod-comments .shell .comments > div div:nth-child(4), .prod-comments .shell .comments > div div:nth-child(5) {
    padding: 0 1.5rem;
  }
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div div:nth-child(3), .prod-comments .shell .comments > div div:nth-child(4), .prod-comments .shell .comments > div div:nth-child(5) {
    padding: 0 3rem;
  }
}
.prod-comments .shell .comments > div div:nth-child(3), .prod-comments .shell .comments > div div:nth-child(4) {
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div div:nth-child(3), .prod-comments .shell .comments > div div:nth-child(4) {
    margin-bottom: 0;
  }
}
.prod-comments .shell .comments > div div:nth-child(4) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 40rem;
}
@media (min-width: 1024px) {
  .prod-comments .shell .comments > div div:nth-child(4) {
    max-width: 43rem;
  }
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) {
  display: flex;
  align-items: center;
  width: 12.5rem;
  font-weight: 600;
  line-height: 1.8rem;
  position: relative;
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2):before {
  content: "";
  width: 0.1rem;
  height: 2rem;
  position: absolute;
  background: #E4E4E4;
  display: block;
  left: 50%;
  top: 1rem;
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(1),
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3) {
  transform: scale(0.5);
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(1):active,
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3):active {
  transform: scale(0.7);
  opacity: 0.7;
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(1):hover,
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3):hover {
  transform: scale(0.6);
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(1).sel,
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3).sel {
  opacity: 1;
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3) {
  transform: scale(0.5) rotate(180deg);
  margin-left: 2.3rem;
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3):active {
  transform: scale(0.7) rotate(180deg);
}
.prod-comments .shell .comments > div div:nth-child(4) p:nth-child(2) span:nth-of-type(3):hover {
  transform: scale(0.6) rotate(180deg);
}
@media (min-width: 768px) {
  .prod-comments .shell .comments > div div:nth-child(5) {
    grid-row: 2/span 3;
    grid-column: 2/span 1;
  }
}
.prod-comments .shell .comments > div div:nth-child(5) p:nth-child(3) {
  margin-bottom: 1rem;
}
.prod-comments .shell .comments > div div:nth-child(5) p:nth-child(4) {
  padding-left: 2.5rem;
  position: relative;
}
.prod-comments .shell .comments > div div:nth-child(5) p:nth-child(4):before {
  content: "";
  width: 1.7rem;
  height: 1.7rem;
  position: absolute;
  background: #7BA914;
  display: block;
  left: 1rem;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.prod-comments .shell .comments > div div:nth-child(5) p:nth-child(4):after {
  content: "";
  width: 0.8rem;
  height: 0.4rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  z-index: 10;
  left: 1rem;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-left: solid 0.2rem #fff;
  border-bottom: solid 0.2rem #fff;
}
.prod-comments .shell .reveal {
  display: none;
}

/* -------------------------- *\
    .prod-info
\* -------------------------- */
.prod-info {
  margin-bottom: 4rem;
  width: 100%;
  max-width: 83.1rem;
}
@media (min-width: 1024px) {
  .prod-info {
    margin-bottom: 10rem;
  }
}
.prod-info > p {
  text-align: left;
}
.prod-info h2 {
  text-transform: none;
  margin-bottom: 6rem;
}
.prod-info > figure {
  margin-bottom: 5rem;
}
.prod-info .info-items {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 1300px) {
  .prod-info .info-items {
    display: block;
    column-count: 2;
    column-gap: 2rem;
  }
}
@media (min-width: 1600px) {
  .prod-info .info-items {
    column-gap: 4.5rem;
  }
}
.prod-info .info-items li {
  list-style: none;
  display: inline-block;
  padding: 1rem 1.5rem;
  width: 100%;
}
@media (min-width: 380px) {
  .prod-info .info-items li {
    padding: 2rem 3.5rem;
  }
}
@media (min-width: 1024px) {
  .prod-info .info-items li {
    min-height: 10.3rem;
  }
}
@media (min-width: 1300px) {
  .prod-info .info-items li {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1600px) {
  .prod-info .info-items li {
    margin-bottom: 3rem;
  }
}
.prod-info .info-items li.item {
  background: #FBFBFD;
  border-radius: 2rem;
  font-size: 1.4rem;
  line-height: 2.6rem;
}
@media (min-width: 1024px) {
  .prod-info .info-items li.item {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}
.prod-info .info-items li.ast {
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .prod-info .info-items li.ast {
    font-style: italic;
    font-weight: 400;
  }
}
.prod-info .questions,
.prod-info .images {
  display: flex;
  gap: 2rem;
  flex-flow: column;
}
.prod-info .questions li,
.prod-info .images li {
  list-style: none;
  display: block;
  overflow: hidden;
  transition: height 0.5s;
}
.prod-info .questions li h3,
.prod-info .images li h3 {
  display: flex;
  align-items: center;
  justify-content: start;
  min-height: 5.5rem;
  padding: 1rem 1.5rem;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 400;
  border-bottom: solid 0.1rem #E4E4E4;
  position: relative;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 380px) {
  .prod-info .questions li h3,
.prod-info .images li h3 {
    padding: 1rem 3.5rem;
  }
}
@media (min-width: 1024px) {
  .prod-info .questions li h3,
.prod-info .images li h3 {
    font-style: unset;
  }
}
.prod-info .questions li h3:before,
.prod-info .images li h3:before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  border-right: solid 0.3rem #000;
  border-bottom: solid 0.3rem #000;
  top: 50%;
  right: 2rem;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s;
}
.prod-info .questions li h3.ex:before,
.prod-info .images li h3.ex:before {
  transform: translate(-50%, -50%) rotate(-135deg);
}
.prod-info .questions li > div, .prod-info .questions li > figure,
.prod-info .images li > div,
.prod-info .images li > figure {
  padding: 1.5rem 0 1rem 1.5rem;
  border-bottom: solid 0.1rem #E4E4E4;
}
@media (min-width: 380px) {
  .prod-info .questions li > div, .prod-info .questions li > figure,
.prod-info .images li > div,
.prod-info .images li > figure {
    padding: 3.5rem 0 1rem 3.5rem;
  }
}
.prod-info .questions li > div p, .prod-info .questions li > figure p,
.prod-info .images li > div p,
.prod-info .images li > figure p {
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.prod-info .images {
  max-width: 41.5rem;
  width: 100%;
}
.prod-info .images li h3 {
  font-style: unset;
}

/* -------------------------- *\
    .question
    .form-popup
\* -------------------------- */
.form-popup {
  position: fixed;
  z-index: 1500;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
.form-popup > span {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  display: block;
  top: 0;
  left: 0;
  z-index: 5;
  cursor: pointer;
}
.form-popup.ex {
  visibility: visible;
  opacity: 1;
}
.form-popup > div {
  width: 90%;
  height: 90vh;
  max-width: 107rem;
  border-radius: 2rem;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
@media (max-width: 430px) {
  .form-popup > div {
    width: 92vw;
  }
}
.form-popup > div .close {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  position: absolute;
  z-index: 10;
  top: 2.5rem;
  right: 2.5rem;
  cursor: pointer;
  user-select: none;
  background: #fff;
}
@media (max-width: 768px) {
  .form-popup > div .close {
    top: 1rem;
    right: 1rem;
  }
}
.form-popup > div .close:before, .form-popup > div .close:after {
  content: "";
  width: 2.3rem;
  height: 0.4rem;
  position: absolute;
  background: #000;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.form-popup > div .close:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.form-popup .content {
  background: #fff;
  padding: 4.5rem 8rem;
  overflow-y: auto;
  position: relative;
  width: 100%;
  max-height: 100%;
  height: 100%;
}
@media (max-width: 1100px) {
  .form-popup .content {
    padding: 3.5rem 4rem;
  }
}
@media (max-width: 430px) {
  .form-popup .content {
    padding: 3.5rem 1rem;
  }
}
.form-popup .content .gform_wrapper form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 7rem;
}
@media (max-width: 1100px) {
  .form-popup .content .gform_wrapper form {
    column-gap: 3rem;
  }
}
@media (max-width: 768px) {
  .form-popup .content .gform_wrapper form {
    grid-template-columns: 1fr;
  }
}
.form-popup .content .gform_wrapper form .left {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}
.form-popup .content .gform_wrapper form .right {
  grid-column: 2/span 1;
  grid-row: 1/span 1;
}
.form-popup .content .gform_wrapper form .validation_error {
  grid-column: 1/span 2;
}
@media (max-width: 768px) {
  .form-popup .content .gform_wrapper form .validation_error {
    grid-column: 1/span 1;
  }
}
.form-popup .content .gform_wrapper form label {
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 1.5rem;
  display: block;
}
.form-popup .content .gform_wrapper form label span {
  font-size: 1.2rem;
  line-height: 1.9rem;
  font-weight: 400;
}
.form-popup .content .gform_wrapper form input,
.form-popup .content .gform_wrapper form textarea {
  border-radius: 0;
  border: solid 0.1rem #000;
}
.form-popup .content .gform_wrapper form input {
  height: 5rem;
  margin-bottom: 2rem;
}
.form-popup .content .gform_wrapper form .gfield_required {
  color: #7BA914;
}
.form-popup .content .gform_wrapper form .gfield_radio,
.form-popup .content .gform_wrapper form .gfield_checkbox {
  display: flex;
  flex-flow: column;
  margin-bottom: 4rem;
}
.form-popup .content .gform_wrapper form .gfield_radio input[type=radio],
.form-popup .content .gform_wrapper form .gfield_checkbox input[type=radio] {
  width: 0;
  height: 0;
  margin: 0;
}
.form-popup .content .gform_wrapper form .gfield_radio label,
.form-popup .content .gform_wrapper form .gfield_checkbox label {
  display: flex;
  align-items: center;
  justify-content: start;
  border: solid 0.1rem #000;
  border-bottom: none;
  font-weight: 500;
  height: 5rem;
  margin: 0;
  padding-left: 2.3rem;
  user-select: none;
  cursor: pointer;
}
@media (max-width: 990px) {
  .form-popup .content .gform_wrapper form .gfield_radio label,
.form-popup .content .gform_wrapper form .gfield_checkbox label {
    padding: 0 1rem;
  }
}
.form-popup .content .gform_wrapper form .gfield_radio label:hover,
.form-popup .content .gform_wrapper form .gfield_checkbox label:hover {
  background: #E4E4E4;
}
.form-popup .content .gform_wrapper form .gfield_radio label:last-of-type,
.form-popup .content .gform_wrapper form .gfield_checkbox label:last-of-type {
  border-bottom: solid 0.1rem #000;
}
.form-popup .content .gform_wrapper form .gfield_radio input[type=radio]:checked + label,
.form-popup .content .gform_wrapper form .gfield_radio input[type=checkbox]:checked + label,
.form-popup .content .gform_wrapper form .gfield_checkbox input[type=radio]:checked + label,
.form-popup .content .gform_wrapper form .gfield_checkbox input[type=checkbox]:checked + label {
  background: #000;
  color: #fff;
}
.form-popup .content .gform_wrapper form .gfield {
  margin-bottom: 0.5rem;
}
.form-popup .content .gform_heading {
  display: none;
}
.form-popup .content .gform_footer {
  margin: 0;
}
.form-popup .content .gform_footer input[type=submit] {
  border-radius: 2rem;
}
@media (min-width: 360px) {
  .form-popup.comment .content {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
  }
}
.form-popup.comment .content > img {
  grid-row: 1/span 2;
  width: 8.6rem;
  height: 8.6rem;
}
.form-popup.comment .content .gform_wrapper {
  grid-column: 1/span 2;
  --half-gap: 1.5rem;
}
.form-popup.comment .content .gform_wrapper .gfield_checkbox,
.form-popup.comment .content .gform_wrapper #input_36_6 {
  row-gap: 1.5rem;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.form-popup.comment .content .gform_wrapper .gfield_checkbox input,
.form-popup.comment .content .gform_wrapper #input_36_6 input {
  width: 0;
  height: 0;
  position: absolute;
}
.form-popup.comment .content .gform_wrapper .gfield_checkbox label,
.form-popup.comment .content .gform_wrapper #input_36_6 label {
  border: solid 0.1rem #000;
  width: calc(50% - var(--half-gap));
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.8rem;
}
@media (max-width: 380px) {
  .form-popup.comment .content .gform_wrapper .gfield_checkbox label,
.form-popup.comment .content .gform_wrapper #input_36_6 label {
    width: 100%;
  }
}
.form-popup.comment .content .gform_wrapper .gfield_radio label {
  padding: 0.7rem;
  min-height: 5rem;
  height: unset;
}
.form-popup.comment .content .gform_wrapper #field_36_3,
.form-popup.comment .content .gform_wrapper #field_36_4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-popup.comment .content .gform_wrapper #field_36_3 > label,
.form-popup.comment .content .gform_wrapper #field_36_3 .gfield_checkbox,
.form-popup.comment .content .gform_wrapper #field_36_4 > label,
.form-popup.comment .content .gform_wrapper #field_36_4 .gfield_checkbox {
  width: 100%;
}
.form-popup.comment .content .gform_wrapper #field_36_3 .gfield_checkbox,
.form-popup.comment .content .gform_wrapper #field_36_4 .gfield_checkbox {
  margin-bottom: 1.5rem;
}
.form-popup.comment .content .gform_wrapper #field_36_3 > input,
.form-popup.comment .content .gform_wrapper #field_36_4 > input {
  display: inline-block;
  width: calc(100% - 10.5rem);
  padding: 0 2.5rem;
}
@media (max-width: 380px) {
  .form-popup.comment .content .gform_wrapper #field_36_3 > input,
.form-popup.comment .content .gform_wrapper #field_36_4 > input {
    width: calc(100% - 7.5rem);
  }
}
.form-popup.comment .content .gform_wrapper #field_36_3 > input::placeholder,
.form-popup.comment .content .gform_wrapper #field_36_4 > input::placeholder {
  color: #000;
}
.form-popup.comment .content .gform_wrapper #field_36_3 > p,
.form-popup.comment .content .gform_wrapper #field_36_4 > p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 5rem;
  border: solid 0.1rem #000;
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-style: normal;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 380px) {
  .form-popup.comment .content .gform_wrapper #field_36_3 > p,
.form-popup.comment .content .gform_wrapper #field_36_4 > p {
    width: 5rem;
  }
}
.form-popup.comment .content .gform_wrapper #field_36_3 > p:hover,
.form-popup.comment .content .gform_wrapper #field_36_4 > p:hover {
  background: #E4E4E4;
}

#field_40_1 {
  grid-column: 1/span 2;
}

#field_36_14,
#field_40_1 {
  display: flex;
  flex-flow: column;
  gap: 0.3rem;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  #field_36_14,
#field_40_1 {
    grid-column: 1/span 1;
  }
}
#field_36_14 input,
#field_40_1 input {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}
#field_36_14 label,
#field_40_1 label {
  margin: 0;
}
#field_36_14 > div,
#field_40_1 > div {
  display: flex;
}
#field_36_14 > div svg,
#field_40_1 > div svg {
  display: block;
  width: 2.8rem;
  height: 2.5rem;
  padding-right: 0.3rem;
  --svg-color: #7BA914;
  cursor: pointer;
  user-select: none;
}
#field_36_14 > div svg.ex,
#field_40_1 > div svg.ex {
  --svg-fill: #7BA914;
}

#field_35_11 {
  display: none;
}

/* -------------------------- *\
    .user-list
\* -------------------------- */
.user-list {
  padding-bottom: 5rem;
}
.user-list .shell {
  max-width: 50rem;
}
.user-list .shell h1 {
  margin-bottom: 2rem;
}
.user-list .shell p {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  width: 100%;
}
.user-list .shell .user-cont {
  position: relative;
  border-bottom: solid 0.1rem #000;
}
.user-list .shell .user-cont > div {
  display: none;
}
.user-list .shell .user-cont input {
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
}
.user-list .shell .user-cont input:checked + label + div {
  display: block;
}
.user-list .shell .user-cont label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  background: rgba(194, 194, 194, 0.3);
  font-weight: 500;
  font-size: 2.2rem;
}
.user-list .shell .user-cont label.member {
  background: rgba(123, 169, 20, 0.3);
}
@media (max-width: 320px) {
  .user-list .shell .user-cont label {
    font-size: 2rem;
  }
}
.user-list .shell .user-cont input:checked + label {
  background: rgba(194, 194, 194, 0.5);
}
.user-list .shell .user-cont input:checked + label.member {
  background: rgba(123, 169, 20, 0.5);
}

/* -------------------------- *\
    .qty-btn
\* -------------------------- */
.qty-btn {
  --btn-width: 4.8rem;
  --sign-len: 1.1rem;
  --sign-thick: 0.2rem;
  --sign-offset: 2.5rem;
  --font-size: 1.598rem;
  --letter-spacing: 0.067rem;
  --line-height: 1.9rem;
  width: 100;
  position: relative;
  overflow: hidden;
}
.qty-btn .pl,
.qty-btn .mi {
  display: block;
  width: var(--btn-width);
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
  user-select: none;
  background: #fff;
  z-index: 10;
}
.qty-btn .pl:before, .qty-btn .pl:after,
.qty-btn .mi:before,
.qty-btn .mi:after {
  content: "";
  width: var(--sign-len);
  height: var(--sign-thick);
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  top: calc(50% - 0.1rem);
}
.qty-btn .pl:after,
.qty-btn .mi:after {
  transform: rotate(90deg);
}
.qty-btn .mi {
  left: 0;
}
.qty-btn .mi:before {
  left: var(--sign-offset);
}
.qty-btn .mi:after {
  content: none;
}
.qty-btn .pl {
  right: 0;
}
.qty-btn .pl:before, .qty-btn .pl:after {
  right: var(--sign-offset);
}
.qty-btn .quantity,
.qty-btn input {
  position: relative;
}
.qty-btn .quantity,
.qty-btn input {
  border: none;
  font-size: var(--font-size);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  font-weight: 600;
  text-align: center;
  font-family: var(--font-family);
  padding: 0;
  height: 100%;
  width: 100%;
  left: 1rem;
}
.qty-btn .quantity {
  width: 100%;
  height: 100%;
  left: 1rem;
}
.qty-btn .quantity input,
.qty-btn .quantity input.input-text.qty.text {
  left: -0.5rem;
  width: 100%;
}