@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap");
html {
  --color-white: #ffffff;
  --color-text: #707070;
  --color-primary: #000000;
  --color-secondary: #3D5AF1;
  --color-border: #E2E2E2;
  --color-green: #11cc81;
  --color-red: #E81515;
  --color-gray: #f7f7f7;
  --color-text: #707070;
  --color-heading: #0E153A;
  --font-poppin: "Poppins", sans-serif;
  --radius-16: 1.5rem;
  --radius-8: 0.7rem;
  --pad-small: 1rem;
  --pad-large: 2rem;
  --container-lg: 1170px;
  --container: 95%;
  --pr-card: 200px;
  --pr-card-sm: 150px;
  --pr-list-card-sm: 250px;
  --shadow-lg: 0px 10px 6px rgba(134, 134, 134, 0.16);
  --shadow-sm: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
  --trans: all 0.4s linear;
}

.init, .upper-group, .explore-showgrid, .mdl-search-header, .sg-item, .sg-list, .sgg-helper, .content--s-group, .search-body-content, .s-sub-item, .s-sub, .s-division, .categoeyH6-dropdown, .main-cart-group, .dropitem, .dropList, .nexted, .agree-terms, .fpasss, .ctrl-prepend, .two-cols, .text-hy, .added-item, .added-inner, .nexted-items, .likee-group, .vr-tb-container-exposed, .more-d, .rss-group, .quantity, .select-item, .select-inner, .slecter-rss, .cms-select-wrap, .var-s-grid-items, .var-sub-group, .show-variants, .pricing, .item-show-name, .item-property, .images-holder-thumb, .images-holder, .scc-card, .item-section, .vr-grp, .var_, .cart-items ul, .cart-items, .cart-inner, .cart-header, .vr-list li a, .vr-list li, .vr-list, .vr-tb-container, .vr-tb-head, .variant-tabs, .srt li, .SJr, .floated-full, .pc-head, .ct-page, .site-copyright, .social-d, .connect, .email-news-subscribe, .mail-subscribe, .ft-link-group li, .floated, .clasic-footer, .b-brands ul, .b-brands, .product-grid, .pr-crad, .product-flex, .products-wrap, .fs-wrap ul, .fs-wrap, .category-slide ul, .category-slide, .add-text, .add-image, .banner-duo, .home-hero, .sr-search, .site-search form, .site-search .search-wrap, .site-cat, .header-finder, .header-wrap {
  position: relative;
  width: 100%;
}

.flex-align-justify, .banner-duo, .header-finder, .header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-white);
  font-family: var(--font-poppin);
}

.app {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ul {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  vertical-align: baseline;
}

.app-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.site-header-logo {
  height: 35px;
  width: 35px;
  position: relative;
  display: block;
}
.site-header-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 790px) {
  .site-header-logo {
    height: 50px;
    width: 50px;
  }
}

.sized-container {
  position: relative;
  width: var(--container-lg);
  max-width: var(--container);
  margin: 0 auto;
}

.m-header {
  position: relative;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0px 2px 6px rgba(146, 146, 146, 0.16);
  z-index: 30;
}
@media (min-width: 790px) {
  .m-header {
    top: 0;
    position: sticky;
  }
}

@media (max-width: 790px) {
  .header-wrap {
    flex-wrap: wrap;
    padding-top: 5px;
  }
  .header-wrap .flex-item-:nth-of-type(2) {
    order: 1;
  }
  .header-wrap .flex-item:nth-of-type(3) {
    order: 3;
  }
  .header-wrap .flex-item:nth-of-type(1) {
    order: 2;
  }
}

.header-logo, .header-nav {
  position: relative;
  display: block;
  width: 270px;
}
@media (max-width: 790px) {
  .header-logo, .header-nav {
    width: unset;
    align-self: flex-end;
  }
}

.sm-menu {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
.sm-menu svg {
  width: 18px;
  height: 18px;
  fill: var(--color-text);
}
@media (min-width: 790px) {
  .sm-menu {
    display: none;
  }
}

.header-finder {
  flex: 1 1 auto;
  padding: 0.5rem var(--pad-small);
}
@media (max-width: 790px) {
  .header-finder {
    padding-left: 0;
    padding-right: 0;
  }
}

.header-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: var(--pad-large);
}

.nav-ui {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nav-ui svg {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3px;
  width: 20px;
  height: 20px;
}

.nav-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--pad-small);
  transition: var(--trans);
}
.nav-item:last-child {
  margin-right: 0;
}

.ico-only {
  width: 30px;
  height: 30px;
  border-radius: 40px;
}
.ico-only:hover {
  background: var(--color-gray);
}
.ico-only img {
  width: 20px;
}
@media (min-width: 790px) {
  .ico-only {
    width: 40px;
    height: 40px;
  }
}

.nav-item.rss-btn {
  position: relative;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
}
@media (min-width: 790px) {
  .nav-item.rss-btn {
    font-size: 12px;
  }
}

.site-cat {
  width: 50px;
}
@media (min-width: 790px) {
  .site-cat {
    width: 200px;
  }
}

.cat-tab {
  position: relative;
  height: 35px;
  background: var(--color-gray);
  display: flex;
  align-items: center;
  padding: 0.5rem var(--pad-small);
  justify-content: space-between;
  cursor: pointer;
  transition: var(--trans);
  border-radius: 2px 0 0 2px;
}
.cat-tab:hover {
  background-color: #e3e3e3;
}
@media (min-width: 790px) {
  .cat-tab {
    height: 45px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid var(--color-border);
  }
}

.df {
  color: var(--color-heading);
  font-size: 16px;
  font-weight: 500;
  display: none;
}
@media (min-width: 790px) {
  .df {
    display: block;
  }
}

.df-ico {
  position: relative;
}
.df-ico svg {
  width: 10px;
  height: 10px;
  fill: var(--color-text);
  display: none;
}
@media (min-width: 790px) {
  .df-ico svg {
    display: block;
  }
}

.site-search {
  position: relative;
  height: 35px;
  flex: 1 auto;
  background-color: var(--color-gray);
  border-radius: 0 4px 4px 0;
}
.site-search form, .site-search .search-wrap {
  width: 100%;
}
.site-search .search-wrap {
  background: var(--color-gray);
  border-radius: 0 4px 4px 0;
}
@media (min-width: 790px) {
  .site-search {
    height: 45px;
  }
}

.sr-search {
  height: 35px;
  border: none;
  outline: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
  font-family: var(--font-poppin);
  background: transparent;
  transition: var(--trans);
  padding: 0 var(--pad-small);
  padding-left: 40px;
  border-radius: 0 4px 4px 0;
}
.sr-search:hover {
  background: #e7e7e7;
}
.sr-search:focus {
  background: #f2f2f2;
}
@media (min-width: 790px) {
  .sr-search {
    font-size: 14px;
    font-weight: 600;
    padding-left: 50px;
    height: 45px;
  }
}

.search-ico {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transform: translateY(-50%);
}
.search-ico svg {
  width: 15px;
  height: 15px;
  fill: var(--color-text);
}
@media (min-width: 790px) {
  .search-ico {
    width: 30px;
    height: 30px;
    left: var(--pad-small);
  }
  .search-ico svg {
    width: 18px;
    height: 18px;
  }
}

.xl-arr {
  display: none;
}
@media (min-width: 790px) {
  .xl-arr {
    display: inline;
  }
}

.mbl-exp-type {
  position: relative;
  width: 10px;
  height: 10px;
}
.mbl-exp-type::before, .mbl-exp-type::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
}
.mbl-exp-type::before {
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  top: 50%;
  transform: translateY(-50%);
}
.mbl-exp-type::after {
  height: 100%;
  width: 2px;
  background: var(--color-primary);
  left: 50%;
  transform: translateX(-50%);
}

.drop-expanded .mbl-exp-type::after {
  background: transparent;
  visibility: hidden;
}

.mbl-exp-type {
  position: relative;
  display: inline;
}
@media (min-width: 790px) {
  .mbl-exp-type {
    display: none;
  }
}

.cat-content {
  position: fixed;
  width: 100%;
  top: 85px;
  background: var(--color-white);
  z-index: 2;
  width: 100%;
  left: 0;
  display: none;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  animation: slideDownAccordionDesktop 0.4s linear 1 forwards;
}
@media (min-width: 790px) {
  .cat-content {
    top: 60px;
    position: absolute;
  }
}
@media (max-width: 790px) {
  .cat-content {
    overflow: auto;
    max-height: 80%;
  }
}

.cart-pr {
  position: relative;
}

.search-reslit {
  position: fixed;
  width: 100%;
  top: 85px;
  left: 0;
  background: var(--color-white);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-lg);
  border-top: 1px solid var(--color-border);
  display: none;
}
@media (min-width: 790px) {
  .search-reslit {
    position: absolute;
    top: 45px;
  }
}

.z10 {
  z-index: 10;
}

.search-reslit.show {
  display: block;
}

.result-wrap {
  position: relative;
  display: block;
  padding: var(--pad-small);
  max-height: 600px;
  overflow: auto;
}

.sh-ovl {
  position: relative;
  z-index: 2;
  display: none;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  left: 0;
  top: 0;
}

.ty .cat-content, .ty .sh-ovl {
  display: block;
}
.ty .overlay {
  z-index: 10;
}
.ty .cat-tab {
  padding-left: var(--pad-small);
  background: #f2f2f2;
}
.ty .search-wrap {
  border-radius: 4px;
}
@media (min-width: 790px) {
  .ty {
    background: #f2f2f2;
  }
  .ty .cat-tab {
    padding-left: 0;
  }
}

.yk .search-reslit {
  display: block;
}
.yk .search-wrap {
  border-radius: 8px 8px 0 0;
}

.headeryu.overlay, .off-overlay.overlay {
  z-index: 20;
}

.headerEx.overlay {
  z-index: 20;
}

.home-hero {
  height: auto;
  background: #FFE18D;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--pad-small);
}
@media (min-width: 790px) {
  .home-hero {
    height: 600px;
    padding-top: 0;
  }
}

.banner-duo {
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 790px) {
  .banner-duo {
    flex-wrap: unset;
    justify-content: space-between;
  }
}

.banner-static {
  width: 100%;
  display: flex;
  padding: var(--pad-large);
  border-radius: var(--radius-8);
  background: var(--color-white);
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  justify-content: space-between;
  position: relative;
}
.banner-static h1 {
  position: relative;
  display: block;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  color: var(--color-primary);
  z-index: 5;
}
.banner-static a {
  margin-bottom: 3rem;
  z-index: 5;
  margin-top: 3rem;
}
@media (min-width: 790px) {
  .banner-static {
    width: 50%;
    height: 500px;
  }
  .banner-static h1 {
    font-size: 54px;
    line-height: 60px;
  }
  .banner-static a {
    margin-top: 0;
  }
}

.swinger {
  position: absolute;
  width: 80%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
}
.swinger img {
  width: auto;
  height: 100%;
}
.swinger::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #fff;
  top: -50px;
  left: 0;
  z-index: 3;
}

.rss-btn {
  position: relative;
  padding: 0.7rem 1rem;
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  text-transform: capitalize;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  cursor: pointer;
}

.rss-btn.rss-btn-lg {
  padding: 0.7rem 2.5rem;
  font-size: 16px;
}
@media (min-width: 790px) {
  .rss-btn.rss-btn-lg {
    padding: 1rem 2.5rem;
  }
}

.swing {
  animation: swing ease-in-out 1.5s infinite alternate;
  transform-origin: center -20px;
}

@keyframes swing {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
.banner-dinamic {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-self: end;
}

.add-product-card {
  width: 300px;
  background: var(--color-white);
  border-radius: var(--radius-8);
  display: flex;
  padding: 0.7rem;
  flex-direction: column;
}

.add-image {
  height: 280px;
  border-radius: var(--radius-8);
  overflow: hidden;
}
.add-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.add-image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-primary);
  opacity: 0.03;
  border-radius: var(--radius-8);
}
.add-image:hover::after {
  opacity: 0.1;
}

.add-text {
  padding: 0.5em;
}
.add-text .is-currency {
  font-size: 18px;
}

.is-currency {
  position: relative;
  display: block;
/*  padding-left: 20px;*/
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}
/*.is-currency::before {
  content: "₦";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
  font-weight: 600;
}*/
@media (min-width: 790px) {
  .is-currency {
    font-size: 16px;
  }
}

.pro-text {
  position: relative;
  font-size: 11px;
  color: var(--color-text);
  font-weight: normal;
  min-height: 40px;
}
@media (min-width: 790px) {
  .pro-text {
    font-size: 14px;
  }
}

.ad-idy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ad-brand {
  position: relative;
  font-size: 12px;
  color: var(--color-text);
  font-weight: normal;
  text-transform: uppercase;
}

button {
  font-family: var(--font-poppin);
}

.section {
  position: relative;
  width: 100%;
  padding: 2rem 0;
}
@media (min-width: 790px) {
  .section {
    padding: 3rem 0;
  }
}

.section-heading {
  position: relative;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 1rem;
}
@media (min-width: 790px) {
  .section-heading {
    font-size: 27px;
    margin-bottom: 2rem;
  }
}

.category-slide ul {
  display: flex;
  max-width: 100%;
  padding: var(--pad-small);
}

.ct-s-item {
  position: relative;
}

.category .swiper-slide {
  width: auto;
}

.ct-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--trans);
}

.ct-img {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--color-white);
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  transition: var(--trans);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-small);
}
.ct-img img {
  width: 90%;
  height: 90%;
  object-fit: cover;
}
.ct-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-primary);
  opacity: 0.03;
  border-radius: var(--radius-8);
}
.ct-img:hover {
  border-color: var(--color-primary);
}
.ct-img:hover::after {
  opacity: 0.01;
}
@media (min-width: 790px) {
  .ct-img {
    width: 100px;
    height: 100px;
    margin-bottom: 0.7rem;
    border: 2px solid transparent;
  }
}

.ct-name {
  position: relative;
  width: 70px;
  text-align: center;
  text-overflow: ellipsis;
  color: #818181;
  font-size: 12px;
  font-weight: 500;
}
@media (min-width: 790px) {
  .ct-name {
    font-size: 14px;
    width: 100px;
  }
}

.ct-link:hover {
  opacity: 1 !important;
}
.ct-link:hover .ct-name {
  color: var(--color-primary);
}

.more-ct-d {
  position: relative;
  width: 100px;
  outline: none;
  display: flex;
  flex-direction: column;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: var(--trans);
  align-items: center;
}
.more-ct-d:hover .ct-ico {
  background: var(--color-primary);
  transition: var(--trans);
}
.more-ct-d:hover .ct-ico svg {
  fill: var(--color-white);
}

.ct-ico {
  width: 70px;
  height: 70px;
  background: var(--color-gray);
  border-radius: 50%;
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-ico svg {
  width: 30px;
  height: 30px;
  fill: var(--color-primary);
}
@media (min-width: 790px) {
  .ct-ico {
    width: 100px;
    height: 100px;
  }
  .ct-ico svg {
    width: 40px;
    height: 40px;
  }
}

.sponsord {
  background: #f2f2f2;
}

.fs-wrap ul {
  display: flex;
  align-items: center;
}
.fs-wrap ul li {
  position: relative;
}
.fs-wrap ul li a {
  position: relative;
  display: block;
  color: inherit;
}

.sponsored .swiper-slide {
  width: auto;
}

.list-crad {
  position: relative;
  width: 100%;
  background: var(--color-white);
  display: flex;
  overflow: hidden;
  border-radius: 8px;
}
@media (min-width: 790px) {
  .list-crad {
    width: 370px;
  }
}

.lc-img {
  width: 100px;
  height: 100px;
  background-color: var(--color-white);
  display: flex;
  padding: 0.5rem;
}
.lc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 790px) {
  .lc-img {
    width: 150px;
    height: 150px;
  }
}

.lc-text {
  position: relative;
  flex: 1;
  align-self: flex-start;
  padding: 0.5rem;
}
.lc-text .pro-text, .lc-text .ad-brand {
  margin-bottom: 0.7rem;
}
@media (min-width: 790px) {
  .lc-text {
    padding: var(--pad-small);
  }
}

.product-flex {
  display: flex;
  align-self: center;
}
.product-flex .pr-item {
  margin-right: 30px;
}
.product-flex .pr-item:last-child {
  margin-right: 0;
}
.product-flex .pr-text {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.pr-item {
  width: var(--pr-card-sm);
  position: relative;
}
@media (min-width: 790px) {
  .pr-item {
    width: var(--pr-card);
  }
}

.pr-crad {
  background: var(--color-white);
  border-radius: var(--radius-8);
  overflow: hidden;
  transition: var(--trans);
  display: block;
}
.pr-crad:hover .pro-text {
  color: var(--color-primary);
}

.pr-img {
  width: 100%;
  height: 170px;
  border-radius: var(--radius-8);
  background-color: var(--color-white);
  transition: var(--trans);
  position: relative;
}
@media (min-width: 790px) {
  .pr-img {
    height: 240px;
  }
}
.pr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-primary);
  opacity: 0.03;
  border-radius: var(--radius-8);
}
.pr-img:hover::after {
  opacity: 0.01;
}

.pr-text {
  padding: 0.5rem;
  position: relative;
}
.pr-text .pro-text, .pr-text .ad-brand {
  margin-bottom: 10px;
}
.pr-text .pro-text {
  color: #4d4a59;
}
@media (min-width: 790px) {
  .pr-text {
    padding: var(--pad-small);
  }
}

.product-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--pr-card-sm), 1fr));
}
.product-grid .pr-item {
  margin-right: 0;
  width: 100%;
}
@media (min-width: 790px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--pr-card), 1fr));
    grid-gap: 40px 20px;
  }
}

.recom {
  background: #eeeeee;
}
.recom .pr-img::after {
  background: transparent;
}

.b-brands ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.b-brands ul li {
  position: relative;
  margin-right: 20px;
  margin-bottom: 0.5rem;
}
.b-brands ul:hover a {
  opacity: 0.4;
}
.b-brands ul a {
  display: block;
  position: relative;
  transition: var(--trans);
}
.b-brands ul a:hover {
  opacity: 1;
}
.b-brands ul a:hover .b-brand-name {
  color: var(--color-primary);
}
@media (min-width: 790px) {
  .b-brands ul li {
    margin-right: 70px;
    margin-bottom: var(--pad-small);
  }
}

.b-brand-name {
  color: var(--color-text);
  font-size: 22px;
  line-height: 23px;
  font-family: serif;
}
@media (min-width: 790px) {
  .b-brand-name {
    font-size: 26px;
    line-height: 52px;
  }
}

.clasic-footer {
  background: var(--color-gray);
  border-bottom: 10px solid var(--color-primary);
}

.floated {
  display: flex;
  flex-wrap: wrap;
}

.usefull-link {
  position: relative;
  width: 800px;
  max-width: 100%;
}

.subscriber {
  flex: 1;
  position: relative;
}

.ft-headings {
  position: relative;
  display: block;
  margin-bottom: var(--pad-large);
  font-size: 14px;
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 500;
}

.ft-link-group {
  width: 350px;
  max-width: 100%;
  margin-bottom: var(--pad-large);
}
.ft-link-group li {
  margin-bottom: 0.5rem;
}
.ft-link-group li a {
  display: block;
  position: relative;
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 500;
}
.ft-link-group li a:hover {
  text-decoration: underline;
}
@media (min-width: 790px) {
  .ft-link-group {
    margin-bottom: 0;
  }
  .ft-link-group li {
    margin-bottom: var(--pad-small);
  }
  .ft-link-group li s {
    font-size: 13px;
  }
}

.mail-subscribe {
  margin-bottom: var(--pad-small);
}
.mail-subscribe form {
  display: block;
  position: relative;
}

.news-letter-group {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
}

.news-rrs {
  position: relative;
  flex: 1 auto;
  height: 100%;
  outline: none;
  border: none;
  padding: 0 var(--pad-small);
}

.news-rssBtn {
  outline: none;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
}
.news-rssBtn svg {
  width: 15px;
  height: 15px;
  opacity: 0.6;
  fill: var(--color-text);
}
.news-rssBtn:hover {
  background: var(--color-gray);
}
.news-rssBtn:hover svg {
  fill: var(--color-primary);
  opacity: 1;
}

.email-news-subscribe {
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
@media (min-width: 790px) {
  .email-news-subscribe {
    font-size: 14px;
  }
}

.connect {
  display: flex;
  flex-direction: column;
  padding-top: var(--pad-small);
}

.send-mail {
  position: relative;
  display: block;
  margin-bottom: var(--pad-small);
  font-weight: 500;
  color: #616db1;
  font-size: 16px;
}

.social-d {
  display: flex;
  align-items: center;
}
.social-d a {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.social-d a svg {
  width: 18px;
  height: 18px;
  fill: var(--color-heading);
}

.site-copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-small) 0;
  flex-wrap: wrap;
  margin-top: var(--pad-small);
  border-top: 1px solid var(--color-gray);
}

.sf {
  position: relative;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: normal;
}
@media (min-width: 790px) {
  .sf {
    font-size: 14px;
  }
}

.author {
  position: relative;
}

.auth-sign {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: normal;
  text-transform: capitalize;
}
.auth-sign a {
  margin-left: var(--pad-small);
}
.auth-sign a img {
  width: 30px;
  height: 30px;
}
.auth-sign a span {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: normal;
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  transition: var(--trans);
  visibility: hidden;
  opacity: 0;
  margin-top: var(--pad-small);
}
.auth-sign a span:hover {
  color: var(--color-secondary);
}
.auth-sign a:hover span {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%);
  margin-top: 0;
}

.ct-page {
  display: flex;
}
@media (min-width: 790px) {
  .ct-page {
    padding-top: var(--pad-small);
  }
}

.ct-page-sidebar {
  width: 250px;
  position: sticky;
  top: 145px;
  align-self: self-start;
  transition: var(--trans);
}
@media (max-width: 790px) {
  .ct-page-sidebar {
    position: fixed;
    top: 0;
    z-index: 1200;
    right: 0;
    height: 100%;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
  }
}

.ct-page-sidebar.is-collaps {
  transform: translateX(100%);
}
@media (min-width: 790px) {
  .ct-page-sidebar.is-collaps {
    transform: unset;
  }
}

.ct-page-content {
  position: relative;
  flex: 1;
}

.floated-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--pad-small);
}

.sort {
  position: relative;
  user-select: none;
}

.yU {
  padding-top: var(--pad-small);
  padding-bottom: var(--pad-large);
}

.sort-tab {
  width: 30px;
  height: 30px;
  border-radius: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
  cursor: pointer;
}
.sort-tab span {
  text-transform: capitalize;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: normal;
  display: none;
}
.sort-tab svg {
  width: 12px;
  height: 12px;
  fill: var(--color-text);
}
.sort-tab svg.ico-lg {
  display: none;
}
.sort-tab svg.ico-sm {
  display: block;
}
.sort-tab:hover {
  background-color: var(--color-gray);
}
@media (min-width: 790px) {
  .sort-tab {
    width: 200px;
    height: 40px;
    border-radius: 3px;
    padding: 0.5rem var(--pad-small);
    justify-content: space-between;
    border: 1px solid var(--color-border);
  }
  .sort-tab span {
    display: block;
  }
  .sort-tab svg.ico-lg {
    display: block;
  }
  .sort-tab svg.ico-sm {
    display: none;
  }
}

.sort-item-wrap {
  position: absolute;
  min-width: 100%;
  display: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  top: 0;
  right: 0;
  box-shadow: var(--shadow-sm);
  transition: var(--trans);
  width: 160px;
  z-index: 2;
  animation: slideDownAccordionDesktop 0.3s ease 1 both;
}
@media (min-width: 790px) {
  .sort-item-wrap {
    left: 0;
    width: 200px;
  }
}

.SJr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem var(--pad-small);
  border-bottom: 1px solid var(--color-border);
}
.SJr span {
  text-transform: capitalize;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: normal;
}
.SJr svg {
  width: 13px;
  height: 13px;
  fill: var(--color-text);
  cursor: pointer;
}
@media (min-width: 790px) {
  .SJr {
    padding: var(--pad-small);
  }
  .SJr span {
    font-size: 14px;
  }
  .SJr svg {
    width: 15px;
    height: 15px;
  }
}

.srt {
  position: relative;
  padding: var(--pad-small);
}
.rss-sort {
  width: 100%;
  display: flex;
  padding: 0.5rem var(--pad-small);
  border: none;
  cursor: pointer;
  background: var(--color-white);
  font-size: 12px;
  color: var(--color-primary);
  transition: var(--trans);
  outline: none;
}
.rss-sort:hover {
  background: var(--color-gray);
}
@media (min-width: 790px) {
  .rss-sort {
    font-size: 14px;
    padding: var(--pad-small);
  }
}

.rss-sort.current {
  border-left: 3px solid var(--color-primary);
}

.ut .sort-item-wrap {
  display: block;
}

.item-counter {
  color: var(--color-text);
  font-size: 14px;
  font-weight: normal;
}

.text-center {
  text-align: center;
}

.variant-tabs {
  padding-bottom: var(--pad-small);
  overflow: auto;
  max-height: 100vh;
}
@media (min-width: 790px) {
  .variant-tabs {
    max-height: 550px;
  }
}

.vr-tab-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
@media (min-width: 790px) {
  .vr-tab-group {
    padding-right: var(--pad-large);
  }
  .vr-tab-group:first-child .vr-tb-head {
    padding-top: 0;
  }
}

.vr-tb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding: var(--pad-small);
  cursor: pointer;
}
.vr-tb-head span {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 1px;
}
.vr-tb-head svg {
  width: 10px;
  height: 10px;
  fill: var(--color-text);
}
@media (min-width: 790px) {
  .vr-tb-head {
    padding-left: 0;
  }
  .vr-tb-head span {
    font-size: 15px;
  }
  .vr-tb-head svg {
    width: 12px;
    height: 12px;
  }
}

.scroll::-webkit-scrollbar, .modal-content::-webkit-scrollbar, .cat-extended::-webkit-scrollbar, .select-module::-webkit-scrollbar, .cart-contaner::-webkit-scrollbar, .vr-tb-container::-webkit-scrollbar, .result-wrap::-webkit-scrollbar, .variant-tabs::-webkit-scrollbar {
  width: 16px;
}
.scroll::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb, .cat-extended::-webkit-scrollbar-thumb, .select-module::-webkit-scrollbar-thumb, .cart-contaner::-webkit-scrollbar-thumb, .vr-tb-container::-webkit-scrollbar-thumb, .result-wrap::-webkit-scrollbar-thumb, .variant-tabs::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  border-radius: 100px;
  background-color: #cbcbcb;
  background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb, .cat-extended::-webkit-scrollbar-thumb, .select-module::-webkit-scrollbar-thumb, .cart-contaner::-webkit-scrollbar-thumb, .vr-tb-container::-webkit-scrollbar-thumb, .result-wrap::-webkit-scrollbar-thumb, .variant-tabs::-webkit-scrollbar-thumb {
  min-height: 68px;
}

.vr-tb-container {
  display: flex;
  overflow: auto;
  padding: var(--pad-small);
  padding-bottom: var(--pad-small);
  display: none;
}
@media (min-width: 790px) {
  .vr-tb-container {
    padding-top: var(--pad-small);
    padding-left: 0;
    max-height: 250px;
  }
}

@keyframes slideDownAccordionDesktop {
  0% {
    max-height: 0;
    overflow-y: hidden;
  }
  99% {
    max-height: 328px;
    overflow-y: hidden;
  }
  100% {
    overflow-y: auto;
  }
}
.vr-list li a {
  display: flex;
  align-items: center;
  transition: var(--trans);
  padding: 0.5rem 0;
}
.vr-list li a:hover .filter-checkbox {
  border-color: var(--color-primary);
}
.vr-list li a:hover .filter-lbel {
  color: var(--color-primary);
}

.filter-checkbox {
  position: relative;
  margin-right: var(--pad-small);
  width: 20px;
  height: 20px;
  border-radius: 40px;
  border: 1px solid;
  border-color: var(--color-border);
  transition: var(--trans);
}
.filter-checkbox:hover {
  background-color: var(--color-gray);
}

.filter-lbel {
  color: var(--color-text);
  font-size: 14px;
  font-weight: normal;
  transition: var(--trans);
}

.selected .filter-checkbox {
  border-width: 5px;
  border-color: var(--color-primary);
}
.selected .filter-lbel {
  color: var(--color-primary);
}

.expanded .vr-tb-container {
  display: block;
  animation: slideDownAccordionDesktop 0.3s ease 1 both;
}
.expanded .vr-tb-head svg {
  transform: scaleY(-1);
}

.cart-module {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1200;
}

.cart {
  width: 450px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  z-index: 100;
  animation: slideLeft 0.3s ease-in-out;
  filter: drop-shadow(-8px 3px 15px rgba(99, 98, 98, 0.15));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}
@media (min-width: 790px) {
  .cart {
    padding: var(--pad-small);
  }
}

.cart-header {
  align-self: flex-start;
  padding: 0 var(--pad-small);
}
@media (min-width: 790px) {
  .cart-header {
    padding: 0;
  }
}

.cart-footer {
  position: absolute;
  width: calc(100% - 2rem);
  bottom: 0;
  left: var(--pad-small);
}

.cart-contaner {
  position: relative;
  max-height: 500px;
  overflow: auto;
  flex: 1 1 auto;
  display: flex;
  padding: var(--pad-small);
  background: var(--color-gray);
  border-radius: 8px;
}

@keyframes slideLeft {
  0% {
    transform: translateX(300px);
  }
  100% {
    transform: translateX(0px);
  }
}
.col {
  flex-direction: column;
}

.space-btwn {
  justify-content: space-between;
  align-items: center;
}

.bag-txt {
  position: relative;
  color: var(--color-primary);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-width: 790px) {
  .bag-txt {
    font-size: 18px;
  }
}

.cart-inner {
  display: flex;
  padding: var(--pad-small) 0;
}
.cart-inner .rss-btn {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-weight: normal;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 0.7rem 1rem;
}
.cart-inner .rss-btn .is-currency {
  font-weight: normal;
  font-size: 12px;
  margin-bottom: 0;
}
.cart-inner .rss-btn svg {
  fill: var(--color-white);
  width: 14px;
  height: 14px;
  margin-left: 0.3rem;
}
.cart-inner .move-end {
  display: flex;
  align-items: center;
}
@media (min-width: 790px) {
  .cart-inner {
    font-size: 14px;
  }
  .cart-inner .rss-btn {
    font-size: 14px;
    padding: 1rem 2rem;
  }
  .cart-inner .rss-btn .is-currency {
    font-size: 14px;
  }
  .cart-inner .rss-btn svg {
    width: 18px;
    height: 18px;
  }
}

.back-Shop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem var(--pad-small);
  cursor: pointer;
  user-select: none;
}
.back-Shop:hover {
  text-decoration: underline;
}
.back-Shop:hover span {
  color: var(--color-primary);
}
.back-Shop:hover svg {
  fill: var(--color-primary);
}
.back-Shop span {
  color: var(--color-text);
  font-size: 12px;
}
.back-Shop svg {
  width: 15px;
  height: 15px;
  fill: var(--color-text);
  margin-right: var(--pad-small);
}
@media (min-width: 790px) {
  .back-Shop span {
    font-size: 14px;
  }
  .back-Shop svg {
    width: 15px;
    height: 15px;
  }
}

.close-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}
.close-cart span {
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 12px;
}
.close-cart svg {
  width: 16px;
  height: 16px;
  margin-left: 0.4rem;
}
@media (min-width: 790px) {
  .close-cart svg {
    width: 24px;
    height: 24px;
  }
}

.cart-items ul {
  display: flex;
  flex-direction: column;
}
.cart-items ul li {
  margin-bottom: var(--pad-small);
  padding: var(--pad-small);
  background: var(--color-white);
  border-radius: 8px;
  display: flex;
}

.crt-img {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crt-img img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.crt-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-primary);
  opacity: 0.03;
  border-radius: 4px;
}
.crt-img:hover::after {
  opacity: 0.1;
}

.crt-info {
  position: relative;
  flex: 1 1 auto;
  padding: 0 var(--pad-small);
  padding-right: 1.4rem;
}
.crt-info h5 {
  font-weight: normal;
  font-size: 12px;
  color: var(--color-text);
}
.crt-info .is-currency {
  font-weight: normal;
  font-size: 14px;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.var_ {
  margin-top: 0.2rem;
  display: flex;
}

.hide {
  display: none !important;
}

.hide-overflow {
  overflow: hidden !important;
}

.vr-grp {
  display: flex;
  flex-wrap: wrap;
}

.SD8 {
  position: relative;
  margin-right: var(--pad-small);
  font-size: 12px;
  color: var(--color-text);
}

.sd-vr {
  position: relative;
  font-size: 12px;
  color: var(--color-text);
}
.sd-vr span {
  margin-right: var(--pad-small);
  position: relative;
}
.sd-vr span:not(:last-child)::before {
  content: ",";
  position: absolute;
  right: -0.5rem;
  top: 50%;
  font-size: 12px;
  transform: translateY(-50%);
}
.sd-vr span:last-child {
  margin-right: 0;
}

.remove-crt-item {
  align-self: end;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}
.remove-crt-item svg {
  width: 12px;
  height: 12px;
  fill: var(--color-text);
}

@media (min-width: 790px) {
  .item-section {
    padding: var(--pad-large) 0;
  }
}

.scc-card {
  display: flex;
  background: var(--color-white);
  justify-content: flex-start;
  flex-wrap: wrap;
}
.scc-card .main-s .splide__arrow--next {
  right: 0;
  transform: translateY(-50%);
  bottom: unset;
}
.scc-card .main-s .splide__arrow--prev {
  left: 0;
  transform: translateY(-50%);
  bottom: unset;
}
@media (min-width: 790px) {
  .scc-card {
    flex-wrap: unset;
  }
  .scc-card .main-s .splide__arrow--next {
    right: -2rem;
  }
  .scc-card .main-s .splide__arrow--prev {
    left: -2rem;
  }
}

.scc--image-fig {
  position: relative;
  width: 100%;
  align-self: start;
}
@media (min-width: 790px) {
  .scc--image-fig {
    width: 400px;
    position: sticky;
    top: 80px;
  }
}

.scc-actions {
  position: relative;
  width: 100%;
}
@media (min-width: 790px) {
  .scc-actions {
    width: 500px;
    margin-left: 100px;
  }
}

.images-holder {
  background-color: var(--color-white);
  border-radius: var(--radius-8);
  height: 350px;
}
.images-holder a {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAABHNCSVQICAgIfAhkiAAAAYJJREFUSEvFl61SxDAURk8dEgcOFEgkljXgcK3kDXgEELwCbwCudTjWLK+AXBQ4cMh1Zb5MMpPttN0m2SWZqek0Offn6829BdPXPnACnNoth8AesAK+7bsl8AH8Tjm2mPDREXANCD51Cf4CfI1tGIMfAJfA8VRiz3efwBz46TtjCC5vKxvWBLbZqrTUfVHog5/ZMKdCu/uVhnf/ZRcuj2+2TfXOe/Ij4MOVY4Gl4F0tpUAGGA34cIHl+a6XRPjsw6PC3TTNRVmWbxHWmvA7z28D/2PDa9v2oSiK+wi46sCj4CoeggevBLhYBn5ui8l/w+eCRwst0fNlTrgR3F1wvO2GRM9XG+F1Xc/KspzFGNg0zaKqqsXQ3o3wMeg2PM8lOJPzXHCj9qz/edYKJ01lq+2CR91qCWpfu9VkQLDwIq9UdbSCrzUTWTuZ6PAHVL/BHs6dka17dQZk69udAdLAVWJTKXG9hk4sfhqzzGpdHakSakJ1U6oi46ZUN4tpStUzaUr9A31Mh32GAUA6AAAAAElFTkSuQmCC"), auto;
}
.images-holder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.images-holder-thumb {
  background-color: var(--color-white);
  border-radius: var(--radius-8);
  height: 100px;
  cursor: pointer;
}
.images-holder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-branded {
  position: relative;
  display: block;
  margin-bottom: var(--pad-small);
}
.item-branded span {
  font-size: 24px;
  font-weight: normal;
  color: var(--color-primary);
  text-transform: uppercase;
  font-family: serif;
}

.item-show-name {
  margin-bottom: var(--pad-small);
}
.item-show-name h3 {
  font-weight: normal;
  font-size: 16px;
}

.pricing {
  display: flex;
  align-items: center;
  margin-bottom: var(--pad-small);
}
.pricing .is-currency:not(:last-child) {
  margin-right: var(--pad-large);
}
.pricing .is-currency::before {
  font-weight: normal;
}

.selling-prce {
  font-size: 22px;
  font-weight: normal;
}

.slashed-prce {
  font-size: 14px;
  font-weight: normal;
  text-decoration: line-through;
  color: var(--color-text);
}

.show-variants {
  margin-bottom: var(--pad-small);
}

.var-s-headings {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: normal;
  margin-bottom: var(--pad-small);
}
.var-s-headings .fgr {
  display: block;
  font-size: 12px;
  text-decoration: underline;
  color: var(--color-text);
}

.var-s-grid-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.vsr-radio-grp {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--pad-small);
  cursor: pointer;
  user-select: none;
}
.vsr-radio-grp:not(:last-child) {
  margin-right: var(--pad-large);
}
.vsr-radio-grp label {
  color: var(--color-text);
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 0;
  transition: var(--trans);
  cursor: pointer;
  position: relative;
  padding-right: 35px;
}
.vsr-radio-grp label::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  display: inline;
  border: 1px solid;
  border-color: var(--color-border);
  border-radius: 40px;
  transition: all ease-in 0.2s;
  right: 0;
}
.vsr-radio-grp label:hover {
  color: var(--color-primary);
}
.vsr-radio-grp label:hover::before {
  border-color: var(--color-primary);
}
.vsr-radio-grp .var-radio {
  position: absolute;
  opacity: 0;
}
.vsr-radio-grp .var-radio:checked ~ label {
  color: var(--color-primary);
}
.vsr-radio-grp .var-radio:checked ~ label::before {
  border-color: var(--color-primary);
  border-width: 5px;
}

.slecter-rss {
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-small);
  cursor: pointer;
  user-select: none;
}
.slecter-rss:hover {
  border-color: var(--color-primary);
}
.slecter-rss span {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: normal;
}
.slecter-rss svg {
  width: 12px;
  height: 12px;
  fill: var(--color-primary);
}

.select-module {
  position: absolute;
  width: 100%;
  left: 0;
  top: 38px;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 0 0 2px 2px;
  border-top: none;
  z-index: 40;
  max-height: 350px;
  overflow: auto;
  display: none;
  animation: slideDownAccordionDesktop 0.3s ease 1 both;
}

.select-inner {
  position: relative;
  display: block;
  display: flex;
  flex-direction: column;
}

.select-item {
  position: relative;
  display: flex;
  padding: 0.7rem var(--pad-small);
  color: var(--color-primary);
  font-weight: normal;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.select-item:hover {
  background: var(--color-gray);
}

.wantSelect .select-module {
  display: block;
}
.wantSelect .slecter-rss {
  border-color: var(--color-primary);
}
.wantSelect .slecter-rss svg {
  transform: scaleY(-1);
}

.cssdf {
  color: var(--color-text);
}

.alert {
  display: flex;
  position: relative;
  width: 100%;
  padding: var(--pad-small);
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  align-items: center;
}
.alert:not(:last-child) {
  margin-bottom: var(--pad-small);
}
.alert svg {
  width: 24px;
  height: 24px;
  margin-right: var(--pad-small);
  align-self: flex-start;
  opacity: 0.7;
}
.alert p {
  position: relative;
  font-size: 14px;
}

.alert-info {
  border-color: #add7fc;
  background: aliceblue;
}
.alert-info svg {
  fill: var(--color-heading);
}
.alert-info p {
  color: var(--color-heading);
}

.alert-danger {
  border-color: #f8c890;
  background: #ffe9e3;
}
.alert-danger svg {
  fill: var(--color-red);
}
.alert-danger p {
  color: var(--color-heading);
}

.quantity {
  margin-bottom: var(--pad-small);
}

.s-qunatity-group {
  position: relative;
  display: flex;
  align-items: center;
}

.q-rss {
  position: relative;
  width: 28px;
  height: 28px;
  border: none;
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 40px;
  outline: none;
  transition: var(--trans);
}
.q-rss svg {
  width: 12px;
  height: 12px;
  fill: #333333;
}
.q-rss:hover {
  background: var(--color-gray);
}
.q-rss:active {
  background: var(--color-border);
  transform: scaleX(1.5);
}

.q-number {
  display: inline-flex;
  position: relative;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  user-select: none;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
}

.rss-group {
  margin-top: var(--pad-large);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.rss-group .rss-btn {
  width: 100%;
  margin-bottom: var(--pad-small);
}
.rss-group .rss-btn img {
  position: absolute;
  width: 15px;
  height: 15px;
  left: var(--pad-small);
  top: 50%;
  transform: translateY(-50%);
  filter: invert(1);
}
@media (min-width: 790px) {
  .rss-group .rss-btn {
    width: 47%;
    margin-bottom: var(--pad-small);
  }
  .rss-group .rss-btn img {
    width: 20px;
    height: 20px;
  }
}

.rss-lite {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.rss-lite svg {
  stroke: var(--color-primary);
  stroke-width: 2px;
  fill: none;
  position: absolute;
  cursor: pointer;
  overflow: visible;
  width: 40px;
  height: 40px;
  left: var(--pad-small);
  top: 50%;
  transform: translateY(-50%);
}

.last-etu {
  position: relative;
  flex: 1;
}

.more-d {
  margin-top: var(--pad-large);
}
.more-d .vr-tb-head span {
  font-size: 14px;
}
.more-d .vr-tb-head {
  border-bottom: none;
  justify-content: flex-start;
  user-select: none;
}
.more-d .vr-tb-head svg {
  fill: var(--color-primary);
  margin-right: var(--pad-small);
}

.content-text {
  position: relative;
  margin-bottom: var(--pad-small);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: normal;
}

.t-display {
  min-height: 500px;
}

.nexted-view {
  background: var(--color-gray);
}

.border-t {
  border-top: 1px solid var(--color-border);
}

.vr-tb-container-exposed {
  display: flex;
  padding-bottom: var(--pad-large);
  padding-top: var(--pad-large);
  border-top: 1px solid;
  border-color: var(--color-border);
  flex-direction: column;
}
.vr-tb-container-exposed p {
  color: var(--color-primary);
  font-size: 14px;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.vr-tb-container-exposed p span {
  color: var(--color-text);
  font-weight: normal;
}
.vr-tb-container-exposed .fdbk-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  border-radius: 50%;
  margin-right: var(--pad-small);
  border: none;
  cursor: pointer;
  outline: none;
  transition: var(--trans);
  display: flex;
  justify-content: center;
  align-items: center;
}
.vr-tb-container-exposed .fdbk-btn:last-child {
  margin-right: 0;
}
.vr-tb-container-exposed .fdbk-btn svg {
  width: 25px;
  height: 25px;
}
.vr-tb-container-exposed .fdbk-btn:hover {
  background-color: var(--color-gray);
}

.fdbk-btn.yes {
  background: var(--color-text);
}
.fdbk-btn.yes svg {
  fill: var(--color-white);
}
.fdbk-btn.yes:hover {
  background-color: var(--color-primary);
}

.feed-count {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-border);
  color: var(--color-primary);
  bottom: -1.2rem;
  border-radius: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.5rem;
}

.likee-group {
  display: flex;
  align-items: center;
}

.express-input {
  display: none;
}

.heart- {
  transform-origin: center;
  animation: animateHeartOut 0.3s linear forwards;
}

.likee-group {
  position: relative;
}
.likee-group svg {
  cursor: pointer;
  overflow: visible;
  width: 40px;
  height: 40px;
}

.heart-svg .main-circ {
  transform-origin: 29.5px 29.5px;
}

.rss-btn.saver-toast .heart-svg {
  cursor: pointer;
  overflow: visible;
  width: 40px;
  height: 40px;
  stroke: none;
}
.rss-btn.saver-toast .heart-svg .heart- {
  transform: scale(0.2);
  fill: #E2264D;
  animation: animateHeart 0.3s linear forwards 0.25s;
}
.rss-btn.saver-toast .heart-svg .main-circ {
  transition: all 2s;
  animation: animateCircle 0.3s linear forwards;
  opacity: 1;
}
.rss-btn.saver-toast .heart-svg #grp1 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp1 #oval1 {
  transform: scale(0) translate(0, -30px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp1 #oval2 {
  transform: scale(0) translate(10px, -50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp2 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp2 #oval1 {
  transform: scale(0) translate(30px, -15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp2 #oval2 {
  transform: scale(0) translate(60px, -15px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp3 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp3 #oval1 {
  transform: scale(0) translate(30px, 0px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp3 #oval2 {
  transform: scale(0) translate(60px, 10px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp4 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp4 #oval1 {
  transform: scale(0) translate(30px, 15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp4 #oval2 {
  transform: scale(0) translate(40px, 50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp4 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp4 #oval1 {
  transform: scale(0) translate(30px, 15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp4 #oval2 {
  transform: scale(0) translate(40px, 50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp5 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp5 #oval1 {
  transform: scale(0) translate(-10px, 20px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp5 #oval2 {
  transform: scale(0) translate(-60px, 30px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp6 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp6 #oval1 {
  transform: scale(0) translate(-30px, 0px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp6 #oval2 {
  transform: scale(0) translate(-60px, -5px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp7 {
  opacity: 1;
  transition: 0.1s all opacity 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp7 #oval1 {
  transform: scale(0) translate(-30px, -15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}
.rss-btn.saver-toast .heart-svg #grp7 #oval2 {
  transform: scale(0) translate(-55px, -30px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg .heart- {
  transform: scale(0.2);
  fill: #E2264D;
  animation: animateHeart 0.3s linear forwards 0.25s;
}

.express-input:checked + label svg .main-circ {
  transition: all 2s;
  animation: animateCircle 0.3s linear forwards;
  opacity: 1;
}

.express-input:checked + label svg #grp1 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp1 #oval1 {
  transform: scale(0) translate(0, -30px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp1 #oval2 {
  transform: scale(0) translate(10px, -50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp2 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp2 #oval1 {
  transform: scale(0) translate(30px, -15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp2 #oval2 {
  transform: scale(0) translate(60px, -15px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp3 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp3 #oval1 {
  transform: scale(0) translate(30px, 0px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp3 #oval2 {
  transform: scale(0) translate(60px, 10px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp4 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp4 #oval1 {
  transform: scale(0) translate(30px, 15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp4 #oval2 {
  transform: scale(0) translate(40px, 50px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp5 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp5 #oval1 {
  transform: scale(0) translate(-10px, 20px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp5 #oval2 {
  transform: scale(0) translate(-60px, 30px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp6 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp6 #oval1 {
  transform: scale(0) translate(-30px, 0px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp6 #oval2 {
  transform: scale(0) translate(-60px, -5px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp7 {
  opacity: 1;
  transition: 0.1s all 0.3s;
}

.express-input:checked + label svg #grp7 #oval1 {
  transform: scale(0) translate(-30px, -15px);
  transform-origin: 0 0 0;
  transition: 0.5s transform 0.3s;
}

.express-input:checked + label svg #grp7 #oval2 {
  transform: scale(0) translate(-55px, -30px);
  transform-origin: 0 0 0;
  transition: 1.5s transform 0.3s;
}

.express-input:checked + label svg #grp2 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

.express-input:checked + label svg #grp3 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

.express-input:checked + label svg #grp4 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

.express-input:checked + label svg #grp5 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

.express-input:checked + label svg #grp6 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

.express-input:checked + label svg #grp7 {
  opacity: 1;
  transition: 0.1s opacity 0.3s;
}

@keyframes animateCircle {
  40% {
    transform: scale(10);
    opacity: 1;
    fill: #DD4688;
  }
  55% {
    transform: scale(11);
    opacity: 1;
    fill: #D46ABF;
  }
  65% {
    transform: scale(12);
    opacity: 1;
    fill: #CC8EF5;
  }
  75% {
    transform: scale(13);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: 0.5;
  }
  85% {
    transform: scale(17);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: 0.2;
  }
  95% {
    transform: scale(18);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: 0.1;
  }
  100% {
    transform: scale(19);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: 0;
  }
}
@keyframes animateHeart {
  0% {
    transform: scale(0.2);
  }
  40% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes animateHeartOut {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
.nexted-items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-prev {
  display: block;
  position: relative;
  margin: var(--pad-small);
}
.ss-prev .ss-prev-itemLink {
  position: relative;
  display: flex;
  align-items: center;
}
.ss-prev .ss-prev-itemLink svg {
  width: 20px;
  height: 20px;
  fill: var(--color-border);
}
.ss-prev .ss-prev-itemLink:hover svg {
  fill: var(--color-text);
}

.ss-img {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--color-white);
  margin: var(--pad-small);
  border: 1px solid var(--color-border);
}
.ss-img img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  transition: var(--trans);
}
.ss-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-primary);
  opacity: 0;
  border-radius: var(--radius-8);
}
.ss-img:hover::after {
  opacity: 0.01;
}
.ss-img:hover img {
  transform: scale(0.9);
}
@media (min-width: 790px) {
  .ss-img {
    width: 120px;
    height: 120px;
  }
  .ss-img img {
    width: 100px;
    height: 100px;
  }
}

.touch--category {
  position: relative;
  border: none;
  background: transparent;
  outline: none;
  transition: var(--trans);
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.touch--category svg {
  width: 25px;
  height: 25px;
  fill: var(--color-text);
}
.touch--category span {
  font-size: 10px;
  color: var(--color-text);
  font-weight: 600;
  margin-top: var(--pad-small);
  opacity: 0.6;
}
.touch--category:hover span {
  opacity: 1;
}
@media (min-width: 790px) {
  .touch--category svg {
    width: 40px;
    height: 40px;
  }
  .touch--category span {
    font-size: 12px;
  }
}

.expand-notify {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: var(--color-text);
  font-weight: normal;
}

.splide--nav > .splide__track > .splide__list > .splide__slide {
  border-width: 1px;
}

.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  border-color: var(--color-primary);
}

.section .splide__slide {
  margin-right: 20px;
}
.section .splide__arrows {
  position: absolute;
  width: 60px;
  right: 0;
  bottom: 0;
}

.main-s .splide__arrow--prev {
  left: 0;
}
.main-s .splide__arrow--next {
  right: 0;
}
@media (max-width: 790px) {
  .main-s .splide__arrow--prev {
    left: 0;
    bottom: 0;
    transform: translateY(40%);
  }
  .main-s .splide__arrow--next {
    bottom: 0;
    right: 0;
    transform: translateY(40%);
  }
}

@media (max-width: 790px) {
  .sponsored li.splide__slide {
    width: 80%;
  }
}

.splide__arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
}
.splide__arrow svg:hover {
  fill: var(--color-text);
}
@media (max-width: 790px) {
  .splide__arrow svg {
    width: 10px;
    height: 10px;
  }
}

.splide__arrow:disabled {
  opacity: 0.2;
}

.splide__pagination__page:hover, .splide__pagination__page.is-active {
  background: var(--color-primary);
}

.splide {
  padding: 1em 0;
}
@media (min-width: 790px) {
  .splide {
    padding: 2rem 0;
  }
}

.added-module {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.added-module.show {
  display: block !important;
}

.added-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 150;
  width: 500px;
  max-width: 95%;
}

.added-toCart {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-8);
  width: 100%;
  border-top: 4px solid var(--color-green);
}

.closeAdded {
  position: absolute;
  right: 0;
  top: -1rem;
  width: 30px;
  height: 30px;
  background: var(--color-white);
  border-radius: 40px;
  cursor: pointer;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.closeAdded svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
}

.added-body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-small);
}

.added-footer {
  position: relative;
  display: flex;
  padding: var(--pad-small);
  padding-bottom: 0;
  background: var(--color-gray);
  border-radius: 0 0 8px 8px;
}
.added-footer .cart-inner {
  justify-content: space-between;
  align-items: center;
}
.added-footer .rss-btn {
  width: auto;
}

.alert-success-fill {
  align-items: center;
  background-color: var(--color-green);
  border: none;
}
.alert-success-fill p {
  flex: 1;
  color: var(--color-white);
}
.alert-success-fill p span {
  display: block;
  font-size: 12px;
  font-weight: bold;
}
.alert-success-fill .emo {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  margin-left: var(--pad-large);
}
.alert-success-fill .emo svg {
  width: 30px;
  height: 30px;
  margin-right: unset;
  align-self: unset;
  opacity: 1;
  stroke: var(--color-white);
}
.alert-success-fill .emo .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
.alert-success-fill .emo .path.circle {
  -webkit-animation: dash 0.9s ease-in-out;
  animation: dash 0.9s ease-in-out;
}
.alert-success-fill .emo .path.line {
  stroke-dashoffset: 1000;
  -webkit-animation: dash 0.9s 0.5s ease-in-out forwards;
  animation: dash 0.9s 0.35s ease-in-out forwards;
}
.alert-success-fill .emo .path.check {
  stroke-dashoffset: -100;
  -webkit-animation: dash-check 0.9s 0.5s ease-in-out forwards;
  animation: dash-check 0.9s 0.5s ease-in-out forwards;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
.added-item {
  display: flex;
  align-items: center;
  margin: var(--pad-small) 0;
  justify-content: space-between;
}

.added-item-img {
  position: relative;
  width: 60px;
  height: 60px;
  margin-right: var(--pad-small);
  border-radius: 8px;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  align-self: flex-start;
}
.added-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.added-item-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-primary);
  opacity: 0.08;
  border-radius: var(--radius-8);
}
.added-item-img:hover::after {
  opacity: 0.1;
}

.appear {
  animation-duration: 0.2s;
  animation-name: appear;
  animation-delay: 0.3s;
  animation-fill-mode: both;
  transition: all 0.1s linear;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  50% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.fade-in {
  animation: fadeIn ease-in 0.7s;
  -webkit-animation: fadeIn ease-in 0.7s;
  -moz-animation: fadeIn ease-in 0.7s;
  -o-animation: fadeIn ease-in 0.7s;
  -ms-animation: fadeIn ease-in 0.7s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.added-memo {
  position: relative;
  flex: 1 1 auto;
  max-width: 70%;
  font-size: 12px;
  color: var(--color-text);
  font-weight: normal;
}

.more-answer {
  border-top: 1px solid var(--color-border);
}

.get-more-wrapp {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.expand-more-btn {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(1, 14, 40, 0.05);
  background: var(--color-white);
  outline: none;
  padding: 0.5rem var(--pad-small);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
}
.expand-more-btn svg {
  margin-left: var(--pad-small);
  fill: var(--color-text);
  width: 14px;
  height: 14px;
}
.expand-more-btn:hover {
  color: var(--color-primary);
  box-shadow: 0 10px 20px rgba(3, 27, 78, 0.1);
  transition: box-shadow 0.25s linear;
}
.expand-more-btn:hover svg {
  fill: var(--color-primary);
}
@media (min-width: 790px) {
  .expand-more-btn {
    padding: var(--pad-small) var(--pad-large);
    font-size: 16px;
  }
  .expand-more-btn svg {
    width: 18px;
    height: 18px;
  }
}

.auth-dialoge {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1500;
  display: none;
}

.auth-dialoge.show {
  display: block;
}

.auth-type {
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 20;
  background: var(--color-white);
  padding: var(--pad-large);
  padding-bottom: 0;
  box-shadow: 0 2px 4px rgba(1, 14, 40, 0.05);
  border-radius: var(--radius-8);
  opacity: 0;
  visibility: hidden;
  margin-top: -2rem;
  transition: var(--trans);
}

.method-s {
  width: 200px;
  position: relative;
  margin-bottom: var(--pad-large);
}
.method-s button {
  width: 100%;
}

.authoption {
  position: relative;
}
.authoption .nav-item {
  margin-right: 0;
}
.authoption:hover .auth-type {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}

.auth-wrapper {
  position: absolute;
  width: 500px;
  max-width: 100%;
  z-index: 120;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 790px) {
  .auth-wrapper {
    height: 100%;
    overflow: auto;
    background: var(--color-white);
  }
}

.s-login {
  width: 400px;
}

.auth-card {
  width: 100%;
  background: var(--color-white);
  overflow: hidden;
}
@media (min-width: 790px) {
  .auth-card {
    border-radius: var(--radius-8);
  }
}

.auth-header {
  position: relative;
  padding: var(--pad-small);
  height: 50px;
  z-index: 3;
}
.auth-header .closeAdded {
  top: 0;
}

.auth-branded {
  width: 70px;
  height: 70px;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  position: absolute;
  box-shadow: 0 2px 4px rgba(1, 14, 40, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--pad-small);
  background: var(--color-white);
}
.auth-branded img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-body {
  position: relative;
  padding: var(--pad-large);
  padding-top: 50px;
}
.auth-body form {
  display: block;
  width: 100%;
  position: relative;
}

.text-hy {
  text-align: center;
  font-weight: normal;
  color: var(--color-primary);
  font-size: 18px;
  margin-bottom: var(--pad-large);
}

.ctrl-group {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.ctrl-group label {
  display: block;
  position: relative;
  font-size: 11px;
  color: var(--color-text);
  font-weight: 300;
  margin-bottom: 0.5rem;
  font-family: var(--font-poppin);
}
@media (min-width: 790px) {
  .ctrl-group {
    margin-bottom: 1.3rem;
  }
  .ctrl-group label {
    font-size: 13px;
  }
}

.ctrl {
  width: 100%;
  display: flex;
  border: 1px solid;
  border-color: #E5E5E4;
  border-radius: 3px;
  padding: 1rem;
  height: 40px;
  font-size: 14px;
  outline: none;
  transition: var(--trans);
  font-family: var(--font-poppin);
}
.ctrl:focus {
  border-color: var(--color-primary);
}
@media (min-width: 790px) {
  .ctrl {
    height: 55px;
  }
}

.two-cols {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.two-cols div {
  width: 100%;
}
@media (min-width: 790px) {
  .two-cols div {
    width: 48%;
  }
}

.ctrl-prepend {
  display: flex;
  align-items: center;
}
.ctrl-prepend .prepend {
  display: flex;
  height: 40px;
  width: 55px;
  background: var(--color-white);
  border-radius: 3px 0 0 3px;
  border: 1px solid #E5E5E4;
  border-right: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text);
}
.ctrl-prepend .ctrl {
  border-radius: 0 3px 3px 0;
}
@media (min-width: 790px) {
  .ctrl-prepend .prepend {
    height: 55px;
    width: 65px;
    font-size: 14px;
  }
}

.agree-terms, .fpasss {
  font-size: 10px;
  color: var(--color-text);
}
.agree-terms a, .fpasss a {
  text-decoration: underline;
  color: var(--color-primary);
}

.fpasss {
  font-size: 12px;
}

.hide-show {
  position: absolute;
  right: var(--pad-small);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: var(--color-white);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
}

.outStock {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outStock span {
  position: relative;
  background: var(--color-white);
  padding: 0.3rem var(--pad-small);
  z-index: 5;
  font-size: 10px;
  color: var(--color-red);
  font-weight: normal;
  text-transform: uppercase;
  border: 1px solid;
  border-color: var(--color-red);
  line-height: 10px;
}
.outStock::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--color-white);
  opacity: 0.6;
}
@media (min-width: 690px) {
  .outStock span {
    padding: 0.5rem var(--pad-small);
    font-size: 12px;
  }
}

.menu-drop {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: var(--trans);
  animation: slideDownAccordionDesktop 0.3s ease 1 both;
  display: none;
}

.expanded .menu-drop {
  display: block;
}

.dropList {
  display: flex;
  flex-direction: column;
  padding-top: var(--pad-small);
  padding-bottom: var(--pad-small);
}

.dropitem a {
  display: flex;
  position: relative;
  padding: 0.7rem var(--pad-small);
  font-size: 12px;
  color: var(--color-text);
  transition: var(--trans);
  align-items: center;
}
.dropitem a:hover {
  background: var(--color-gray);
  color: var(--color-primary);
}
.dropitem a svg {
  fill: none;
  stroke: var(--color-text);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  width: 20px;
  height: 20px;
  margin-right: var(--pad-small);
  opacity: 0.7;
}
.dropitem .current {
  background: var(--color-gray);
  color: var(--color-primary);
}
.dropitem .current svg {
  stroke: var(--color-primary);
}

.spacer {
  width: 100%;
  display: block;
  height: 1px;
  background: var(--color-gray);
}

.m-ct {
  width: 100%;
  display: flex;
  background: var(--color-white);
  flex-direction: column;
  min-height: 300px;
}
@media (min-width: 790px) {
  .m-ct {
    width: 220px;
    max-height: 400px;
    min-height: 300px;
    background: var(--color-gray);
  }
}

.cate-item {
  width: 100%;
}

.ct-itm-lk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 0.7rem var(--pad-small);
  z-index: 2;
  background: var(--color-white);
  transition: var(--trans);
  color: var(--color-text);
  font-size: 12px;
  font-weight: normal;
  border-bottom: 1px solid;
  border-color: var(--color-border);
}
.ct-itm-lk:last-child {
  border-bottom: none;
}
@media (min-width: 790px) {
  .ct-itm-lk {
    background: #f2f2f2;
  }
}

.sm-ctegory-heading {
  display: flex;
  position: relative;
  padding: 0.5rem var(--pad-small);
  font-size: 14px;
  text-transform: uppercase;
  color: #b4b0b0;
  border-bottom: 1px solid;
  border-color: var(--color-border);
  justify-content: space-between;
  align-items: center;
}
.sm-ctegory-heading svg {
  width: 15px;
  height: 15px;
  fill: #b3b3b3;
  cursor: pointer;
}
@media (min-width: 790px) {
  .sm-ctegory-heading {
    display: none;
  }
}

.cat-extended {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: var(--trans);
}
@media (min-width: 790px) {
  .cat-extended {
    width: 100%;
    position: absolute;
    display: flex;
    padding-left: 250px;
    top: 0;
    left: -1rem;
    visibility: hidden;
    flex-direction: row;
    opacity: 0;
    transition: var(--trans);
    height: 100%;
    overflow: auto;
  }
}

@media (min-width: 790px) {
  .cate-item:hover .ct-itm-lk {
    background: var(--color-white);
    color: var(--color-primary);
  }
  .cate-item:hover .cat-extended {
    left: 0;
    visibility: visible;
    opacity: 1;
  }
}

@media (max-width: 790px) {
  .cat-extended {
    display: none;
    animation: slideDownAccordionDesktop 0.4s linear 1 forwards;
  }

  .drop-expanded {
    position: relative;
  }
  .drop-expanded .cat-extended {
    display: block;
  }
  .drop-expanded .ct-itm-lk {
    background: var(--color-gray);
  }
}
.categoeyH6-dropdown {
  background: var(--color-white);
}

.s-division {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem;
  padding-top: 0;
}
@media (min-width: 790px) {
  .s-division {
    padding: 0;
  }
}

.s-group {
  position: relative;
  width: 50%;
  margin-bottom: var(--pad-small);
}
@media (min-width: 790px) {
  .s-group {
    width: 32%;
  }
}

.s-title {
  position: relative;
  margin: var(--pad-small) 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
}

.s-item-link {
  display: block;
  padding: 0.4rem 0;
  color: var(--color-text);
  line-height: 12px;
  font-size: 13px;
  transition: var(--trans);
}
.s-item-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.search-header {
  position: relative;
  width: 100%;
  margin-bottom: var(--pad-small);
  padding-bottom: var(--pad-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}
.search-header h4 {
  position: relative;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 16px;
  font-weight: normal;
  padding: 0 0.5rem;
}
.search-header svg {
  width: 15px;
  height: 15px;
  fill: #b3b3b3;
  cursor: pointer;
}

.content--s-group {
  margin-bottom: var(--pad-small);
}

.sgg-helper {
  font-size: 14px;
  line-height: 14px;
  color: var(--color-text);
  font-weight: normal;
  text-transform: uppercase;
  margin-bottom: var(--pad-small);
  padding: 0 0.5rem;
}
@media (min-width: 790px) {
  .sgg-helper {
    font-size: 16px;
    line-height: 16px;
  }
}

.sg-item a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.5rem;
  font-size: 12px;
  line-height: 12px;
  color: var(--color-text);
  transition: all linear 0.3s;
}
.sg-item a .sg-cat-set {
  font-weight: 600;
  margin-left: var(--pad-small);
}
.sg-item a:hover {
  background: var(--color-gray);
  color: var(--color-primary);
}
@media (min-width: 790px) {
  .sg-item a {
    font-size: 14px;
    line-height: 14px;
  }
}

.explore-category {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1500;
  display: none;
}

.explore-category.show {
  display: block;
}

.more-ct-mdl {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}
@media (min-width: 790px) {
  .more-ct-mdl {
    width: 700px;
  }
}

.modal-content {
  position: relative;
  width: 100%;
  padding: var(--pad-small);
  border-radius: var(--radius-8);
  background: var(--color-white);
  max-height: 600px;
  overflow: auto;
}
.modal-content .search-header {
  display: flex;
  align-items: center;
}
.modal-content .search-header svg {
  width: 18px;
  height: 18px;
}

.mdl-search-header {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  background: var(--color-gray);
  border-radius: 4px;
  cursor: text;
}

.search-placeholder {
  position: relative;
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
  font-family: var(--font-poppin);
  background: transparent;
  transition: var(--trans);
  padding: 0 var(--pad-small);
  padding-left: 35px;
  z-index: 1;
}
@media (min-width: 790px) {
  .search-placeholder {
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    padding-left: 50px;
  }
}

.close-explore {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  margin-left: var(--pad-large);
}

.explore-showgrid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  padding-bottom: var(--pad-large);
}
@media (min-width: 790px) {
  .explore-showgrid {
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.section.redefined {
  padding-top: 0;
  background: var(--color-gray);
}
@media (min-width: 790px) {
  .section.redefined {
    padding-top: 1rem;
    background: var(--color-white);
  }
}
@media (max-width: 790px) {
  .section.redefined .pr-img::after {
    background: transparent;
  }
}

.catgeds {
  display: flex;
  justify-content: space-between;
  align-items: unset;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  align-items: center;
  height: 50px;
  margin-bottom: 0;
}
.catgeds span {
  z-index: 1;
}
.catgeds .sort-df {
  z-index: 1;
}
@media (min-width: 790px) {
  .catgeds {
    top: 60px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    height: 70px;
    border-bottom: none;
  }
}

.upper-group {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 15;
  box-shadow: 0px 2px 6px rgba(146, 146, 146, 0.16);
}
@media (min-width: 790px) {
  .upper-group {
    top: 60px;
    box-shadow: none;
  }
}

.mobile-filter-navigation {
  display: flex;
  justify-content: space-between;
  z-index: 15;
  background: var(--color-white);
  padding: 0.5rem 0;
}
@media (min-width: 790px) {
  .mobile-filter-navigation {
    display: none;
  }
}

.hide-sm {
  display: none;
}
@media (min-width: 790px) {
  .hide-sm {
    display: block;
  }
}

.item-counter {
  z-index: 1;
  position: relative;
}

.setting-group {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
  position: relative;
}
.setting-group svg {
  fill: none;
  stroke: #bdbdbd;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}
.setting-group div {
  margin-right: var(--pad-large);
}
.setting-group div:last-child {
  margin-right: 0;
}
.setting-group button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--font-poppin);
  background: var(--color-white);
  display: flex;
  align-items: center;
  position: relative;
}

.view-tab {
  position: relative;
}

.sFilter-btn {
  height: 30px;
}
.sFilter-btn svg {
  stroke: var(--color-primary);
  margin-right: 0.3rem;
}
.sFilter-btn span {
  font-size: 12px;
  line-height: 12px;
}

.ico-grid {
  display: none;
}

.ico-list {
  stroke-width: 2px;
}

.list-view {
  position: relative;
}
.list-view .ico-grid {
  display: block;
}
.list-view .ico-list {
  display: none;
}
.list-view .product-grid {
  grid-gap: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(var(--pr-list-card-sm), 1fr));
}
@media (min-width: 690px) {
  .list-view .product-grid {
    grid-gap: 20px;
  }
}
.list-view .pr-crad {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  transition: unset;
}
.list-view .pr-img {
  width: 150px;
  height: 150px;
}
.list-view .pr-img::after {
  background: transparent;
}
.list-view .pr-text {
  flex: 1;
  align-self: flex-start;
}

.edge {
  position: relative;
  background-image: -webkit-linear-gradient(top, #dedede, #ebebeb 3%, #ebebeb 97%, #dedede);
  width: 100%;
  overflow: hidden;
}
.edge ul {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.edge ul li {
  position: relative;
  margin-right: 4rem;
}
.edge ul li:last-child {
  margin-right: 0;
}
.edge ul li a {
  position: relative;
  font-size: 16px;
  color: #404040;
  font-weight: 300;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--trans);
}
.edge ul li a svg {
  width: 2rem;
  height: 2rem;
  fill: #999999;
  margin-bottom: 10px;
  transition: var(--trans);
}
.edge ul li a:hover {
  color: var(--color-primary);
}
.edge ul li a:hover svg {
  fill: var(--color-primary);
}
.edge ul li a.current {
  font-weight: 600;
  color: var(--color-primary);
}
.edge ul li a.current::after {
  position: absolute;
  --bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  width: 2.5rem;
  height: 2.5rem;
  --transform-translate-x: 0;
  --transform-translate-y: 0;
  --transform-skew-x: 0;
  --transform-skew-y: 0;
  --transform-scale-x: 1;
  --transform-scale-y: 1;
  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
  --transform-rotate: 45deg;
  content: "";
  bottom: -1.75rem;
  left: 50%;
  margin-left: -1.25rem;
  box-shadow: #dedede 0px 0px 4px 4px;
}
.edge ul li a.current svg {
  fill: var(--color-primary);
}
@media (max-width: 690px) {
  .edge ul {
    flex-direction: column;
  }
  .edge ul li {
    margin-right: 0;
    width: 100%;
  }
  .edge ul li a {
    font-size: 14px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-direction: row;
  }
  .edge ul li a svg {
    width: 18px;
    height: 18px;
    margin-bottom: 0;
    margin-right: 0.7rem;
  }
  .edge ul li a.current::after {
    display: none;
    opacity: 0;
  }
}

.sized-sx {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.sized-sx h1 {
  font-size: 22px;
}
@media (min-width: 690px) {
  .sized-sx {
    width: 60rem;
  }
  .sized-sx h1 {
    font-size: 32px;
  }
}

.qText {
  position: relative;
  color: #404040;
  font-weight: 400;
  line-height: 1.3;
  font-size: 1.675rem;
  margin-bottom: 1rem;
}

.x-divide {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.x-divide .box- {
  width: 100%;
}
.x-divide .box- p {
  font-size: 14px;
  line-height: 1.425;
  color: #404040;
}
@media (min-width: 690px) {
  .x-divide {
    justify-content: space-between;
  }
  .x-divide .box- {
    width: 45%;
  }
  .x-divide .box- p {
    line-height: 1.625;
    font-size: 16px;
  }
  .x-divide .box- p a {
    color: var(--color-primary);
    font-weight: normal;
    text-decoration: underline;
  }
}
.x-divide .vr-tb-head {
  justify-content: flex-start;
  align-items: center;
  border: none;
}
.x-divide .vr-tb-head p {
  position: relative;
  flex: 1;
  padding-right: 0.5rem;
  color: #404040;
  font-size: 16px;
  font-weight: 600;
}
.x-divide .vr-tab-group {
  border-bottom: 1px solid var(--color-border);
  padding-right: 0;
}
.x-divide .vr-tb-container {
  padding-top: 0;
}
.x-divide .vr-tb-container .content-text {
  color: #404040;
  font-size: 14px;
  font-weight: normal;
}

.content-text ul {
  position: relative;
  padding: 1rem 0;
  list-style-type: disc;
  padding-left: 40px;
}
.content-text ul li {
  width: 100%;
  margin-bottom: 0.5rem;
}
.content-text ul li a {
  color: var(--color-primary);
  text-decoration: underline;
}
.content-text h3 {
  margin-top: 2rem;
  color: #404040;
  font-weight: 600;
}
.content-text h5 {
  position: relative;
  color: #404040;
  font-weight: 500;
  line-height: 1.3;
  font-size: 1rem;
  margin-top: 1rem;
}
.content-text p {
  margin-top: 1rem;
  color: #404040;
}
.content-text h1 {
  margin-top: 1rem;
}

.exp-ico {
  position: relative;
  width: 25px;
  height: 25px;
  border-color: #404040;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
}
.exp-ico::after {
  content: "";
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
  background: #404040;
}
.exp-ico::before {
  content: "";
  position: absolute;
  width: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70%;
  background: #404040;
}

.vr-tab-group.expanded .exp-ico {
  border-color: var(--color-primary);
}
.vr-tab-group.expanded .exp-ico::after {
  background: var(--color-primary);
}
.vr-tab-group.expanded .exp-ico::before {
  background: transparent;
  opacity: 0;
}

.box-full {
  width: 100%;
}

.faqItems {
  position: relative;
  width: 100%;
  padding-top: 2rem;
}