/* input(986,10): run-time error CSS1038: Expected hex color, found '#eee3'
input(1649,39): run-time error CSS1046: Expect comma, found '0'
input(1649,43): run-time error CSS1046: Expect comma, found '/' */
:root {
  --screen-size-1x: 1680px;
  --screen-size-2x: 1280px;
  --screen-size: 1336px;
  --color-primary: #ef4056;
  --color-border: #ddd;
  --color-section-title: #000;
  --color-neutral-000: #fff;
  --color-neutral-100: #f1f2f4;
  --color-neutral-200: #e0e0e6;
  --color-neutral-300: #c3c3ce;
  --color-neutral-400: #9e9fb1;
  --color-neutral-500: #767790;
  --color-neutral-600: #5a5c7a;
  --color-neutral-700: #3f4064;
  --color-neutral-800: #23254e;
  --color-neutral-900: #080a38;
  --color-neutral-black: #000000;
  --color-secondary-700: #008eb2;
  --color-secondary-500: #19bfd3;
  --color-secondary-300: #008deb;
  --color-secondary-100: #e6f4f7;
  --color-icon-primary: #ef4056;
  --color-icon-secondary: #19bfd3;
  --color-icon-brand: #e6123d;
  --color-icon-white: #fff;
  --color-icon-black: #0c0c0c;
  --color-icon-disable: #e0e0e2;
  --color-icon-low-emphasis: #a1a3a8;
  --color-icon-high-emphasis: #424750;
  --color-icon-success: #4caf50;
  --color-icon-warning: #f9a825;
  --color-icon-neutral-hint: #81858b;
  --color-icon-primary-100: #ffe440;
  --color-icon-rating-0-2: #f9bc00;
  --color-icon-rating-2-3: #b1b64d;
  --color-icon-rating-3-4: #65aa57;
  --color-icon-rating-4-5: #00a049;
  --color-icon-error: #d32f2f;
  --color-button-secondary: #19bfd3;
  --border-radius-1: 7px;
  --border-radius-2: 20px;
  --border-radius-3: 10px;
  --gap-0: 0.5rem;
  --gap-1: 1rem;
  --gap-2: 2rem;
}

/*********** CSS RESET **********/
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

  *,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

html {
  margin: 0;
  -webkit-text-size-adjust: none;
}

ol,
ul {
  list-style: none;
}

a img {
  border: none;
}

img {
  vertical-align: middle;
}

hr {
  border: none;
  border-bottom: 1px solid var(--color-border);
}

button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='file'] > button::-moz-focus-inner,
input[type='file'] > input[type='button']::-moz-focus-inner {
  margin: 0;
  border: 0;
  padding: 0;
}

button,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
textarea {
  border-radius: 0;
}


  input[type='text']:disabled,
  input[type='password']:disabled,
  input[type='email']:disabled,
  input[type='tel']:disabled,
  textarea:disabled {
    background: var(--color-neutral-200);
  }

button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
  -webkit-appearance: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1024px #fff;
}

script {
  display: none !important;
}

.required {
  color: var(--color-primary);
}

.row-gap-0 {
  row-gap: var(--gap-0);
}

.row-gap-1 {
  row-gap: var(--gap-1);
}

.row-gap-2 {
  row-gap: var(--gap-2);
}

.column-gap-0 {
  column-gap: var(--gap-0);
}

.column-gap-1 {
  column-gap: var(--gap-1);
}

.column-gap-2 {
  column-gap: var(--gap-2);
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

/*********** GLOBAL STYLES **********/
body {
  max-width: 100%;
  overflow-x: hidden;
  /* font: normal 14px 'IRANSans', Helvetica, sans-serif; */
  font: normal 14px 'IRANYekan', Helvetica, sans-serif;
  color: #000000;
  background: var(--color-neutral-000);
}

.body--fixed {
  overflow: hidden;
  height: 100vh;
}


@media screen and (min-width: 768px) {
  /* .body--fixed {
    overflow: unset;
    height: initial;
  } */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
}

a {
  color: inherit;
  cursor: pointer;
}

  a img {
    opacity: 0.99;
    /*firefox scale bug fix*/
  }

table {
  width: 100%;
  border-collapse: collapse;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='password'],
textarea,
select {
  height: 36px;
  /*safari padding fix*/
  vertical-align: middle;
}

input,
textarea,
select,
button {
  font-size: 14px;
  /*font-family: Arial, Helvetica, sans-serif;*/
  color: #777;
}

textarea {
  min-height: 50px;
}

select {
  min-width: 50px;
  height: 44px;
  padding: 1px 12px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  background: var(--color-neutral-000);
  width: 100%;
}

  input[type='text']:focus,
  input[type='password']:focus,
  input[type='email']:focus,
  input[type='tel']:focus,
  input[type='password']:focus,
  textarea:focus,
  select:focus {
    border-color: #ccc;
    color: #444;
    position: relative;
    z-index: 1;
  }

input[type='checkbox'],
input[type='radio'],
input[type='checkbox'] + *,
input[type='radio'] + * {
  vertical-align: middle;
}

input[type='button'],
input[type='submit'],
button,
.button-1,
.button-2 {
  cursor: pointer;
}

input[type='text'],
input[type='password'],
input[type='tel'],
input[type='email'],
textarea {
  min-width: 50px;
  padding: 1px 12px;
  height: 44px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  background: var(--color-neutral-000);
  width: 100%;
}

textarea {
  padding: 10px 12px;
  height: unset;
}

  textarea:focus {
    outline: none;
  }

label,
label + * {
  vertical-align: middle;
}

input:focus {
  outline: none !important;
}

input:focus-visible {
  outline: none !important;
}

.seprator {
  width: 1px;
  height: 30px;
  background: #ccc;
}

.ellipsis-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[type='checkbox'],
[type='radio'] {
  height: 21px;
  width: 21px;
}

svg #toman {
  height: 14px;
  width: 14px;
}

/******** General Styles ***************************************/
.flex {
  display: flex;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

/************ Grid Styles ****************************************************/
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.grid--1x2 {
  grid-template-columns: 1fr;
  gap: 2rem;
}

.grid--1x22 {
  grid-template-columns: 1fr;
}

.grid--1x3 {
  grid-template-columns: 1fr;
}

.grid--1x4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid--1x6 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid--gap-1 {
  gap: 1rem;
}

.grid--gap-half {
  gap: 1.5rem;
}

.grid--gap-2 {
  gap: 2rem;
}

.grid--2x2 {
  grid-template: auto auto/ 120px 1fr;
  grid-template-areas:
    'picture tools'
    'details details';
}

.grid__item_picture {
  grid-area: picture;
}

.grid__item_details {
  grid-area: details;
}

.grid__item_tools {
  grid-area: tools;
}

.grid__item--second {
  display: none;
}

@media screen and (min-width: 768px) {
  .grid--1x3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid--1x22 {
    grid-template-columns: 3fr 1fr;
  }

  .grid--1x6 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1024px) {
  .grid--1x2 {
    grid-template-columns: 1fr minmax(300px, 345px);
    gap: 1rem;
  }

  .grid--1x2-200 {
    grid-template-columns: 1fr 300px;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .grid--2x2 {
    grid-template-columns: 170px 1fr 200px;
    grid-template-areas: 'picture details tools';
  }

  .grid__item--second {
    display: block;
    padding-top: 0.5rem;
  }

  .grid--1x6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

/******** Notification Styles ***************************************/
/* .notification {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  border-radius: var(--border-radius-1);
  padding: 1rem;
  z-index: 100;
  display: block !important;
} */

.notification__container {
}

.bar-notification {
  position: fixed;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  height: 60px;
  border-radius: var(--border-radius-1);
  z-index: 100;
  box-shadow: 0 0 3px var(--color-neutral-300);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem 0 1rem;
  font-size: 18px;
  font-weight: 500;
}

  .bar-notification.error {
    background: var(--color-icon-error);
    color: white;
  }

  .bar-notification.success {
    background: var(--color-icon-success);
    color: rgb(46, 46, 46);
  }

  .bar-notification.warning {
    background: var(--color-icon-warning);
    color: rgb(255, 255, 255);
  }

  .bar-notification .close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    .bar-notification .close::after {
      content: '';
      background: url(../images/Icons/close-circled.svg);
      background-size: auto;
      background-size: cover;
      width: 30px;
      height: 30px;
      display: block;
    }

  .bar-notification a {
    text-decoration: underline;
    color: var(--color-neutral-200);
  }

/************ Ariyo Wrapper Styles ****************************************************/

.arWrapper {
  padding-top: 116px;
}

.arWrapper__body {
  min-height: 43vh !important;
}

.arWrapper__breadcrumb {
}

.arWrapper__content {
}

@media screen and (min-width: 768px) {
  .arWrapper {
    padding-top: 110px;
  }
}

/************ Ariyo pages Styles ****************************************************/
.page {
}

.page--home {
}

.page--inner {
  padding: 0;
}

.page--secondary {
  background-color: #f2f2f2;
}

.page--secondary-2 {
  background-color: #fff;
}

.page__title a {
  font-size: 15px;
}

.page__body {
}

.page--inner .page__body {
  padding: 1rem;
}

.page--checkout .page__body {
  padding-top: 0px;
  margin-top: -7px;
}
.page--newproduct {
  background-color: var(--color-neutral-000);
  
}
  .page--newproduct .page__title {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
  }
    .page--newproduct .page__title::before {
      content: "";
      background-image: url(../images/newProductPattern.svg);
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 25%;
      background-position: 50%;
    }
    .page--newproduct .page__title h1 {
      background:white;
      z-index:1;
      padding:1rem;
      color:var(--color-primary);
      padding-right:0px;
    }
    .page--newproduct .page__title a{z-index:1;}
    .page--newproduct .page__title svg{width:24px;height:24px;}
    @media screen and (min-width: 480px) {
      .page--secondary-2 {
    background-color: #f2f2f2;
  }
}

@media screen and (min-width: 1024px) {
  .page--inner {
    padding: 1rem 0;
  }

  .page--secondary-2 {
    padding: 5rem 0;
  }

  .page--inner .page__body {
    padding: 1rem 0;
  }

  .page__title a {
    font-size: 17px;
  }

  .page--checkout .page__body {
    margin-top: -17px;
  }
  .page--newproduct{
      padding-top:0rem;
  }
  .page--newproduct .page__title{
      padding-top:1rem;
  }
}

/************ Blocks Styles ****************************************************/
.block {
  padding: 0.5rem 0;
}

.block--first {
  padding: 0 0 0.5rem 0;
}

.block--striped {
  background: #eee;
}

.block__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.block__title {
  flex: 1 1 auto;
}

@media screen and (min-width:768px) {
  .block {
    padding: 1rem 0;
  }

  .block--first {
    padding: 0 0 1rem 0;
  }
}

/************ Ariyo Container Styles ****************************************************/
.arContainer {
  width: 100%;
}

.arContainer--1x {
  width: 100%;
}

.arContainer--2x {
  width: 100%;
}

.arContainer--fluid {
  width: 100%;
  max-width: 100%;
}

.arContainer--main {
  padding: 0;
}

login-input .arContainer--maxHeight {
  min-height: calc(100vh - 20rem);
}

@media screen and (min-width: 1024px) {
  .arContainer--main {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 1336px) {
  .arContainer {
    max-width: var(--screen-size);
    margin: 0 auto;
  }

  .arContainer--fluid {
    width: 100%;
    max-width: 100%;
  }

  .arContainer--1x {
    max-width: var(--screen-size-1x);
    margin: 0 auto;
  }
}

@media screen and (min-width: 1280px) {
  .arContainer--2x {
    max-width: var(--screen-size-2x);
    margin: 0 auto;
  }
}

/************ Layout Styles ****************************************************/
.layout--festival {
  padding: 0;
}

.layout__hr {
  border-color: var(--color-border);
  border-top: none;
}

.layout--Incredibles {
  padding: 0;
}

.layout--special {
  padding: 0;
}

.layout__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius-1);
}

.layout--Incredibles .layout__content {
  padding: 0.8rem 0 0.8rem 0;
  background: var(--color-icon-primary);
  border-radius: 0;
  border: none;
}

.layout--special .layout__content {
  padding: 0.8rem;
  background: #941b80;
  border-radius: 0;
  border: none;
}

.layout__title {
  font-size: 15px;
}

.layout {
  padding: 0 1rem;
  display: grid;
  gap: 1rem;
}

.layout--swiper {
  display: flex;
  padding: 0;
}

.layout--1x2 {
  /* grid-template-columns: 300px 1fr;
  grid-template-areas: 'layput__rightSide' 'layput__leftSide'; */
}

.layput__rightSide {
  background: var(--color-neutral-000);
  position: absolute;
  height: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: 0.3s;
}

.layput__rightSide--active {
  display: block;
  height: initial;
  overflow: initial;
  opacity: 1;
  transform: translateY(0);
  transition: 0.3s;
}

.layput__leftSide {
}

.layout__content--bordered {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2);
}

@media screen and (min-width: 768px) {
  .layput__rightSide {
    display: block;
  }

  .layout--1x2 {
    grid-template-columns: 300px 1fr;
    grid-template-areas: 'layput__rightSide' 'layput__leftSide';
  }

  .layput__rightSide {
    all: unset;
    position: initial;
  }
}

@media screen and (min-width:1024px) {

  .layout--Incredibles .layout__content,
  .layout--special .layout__content {
    padding: 1.2rem 1.2rem 1.2rem 0.13rem;
    border-radius: var(--border-radius-2);
  }

  .layout--special .layout__content {
    padding: 1rem;
    border-radius: var(--border-radius-2);
  }

  .layout--swiper {
    padding: 0 1rem;
  }
}

/************ SideBar Styles ****************************************************/
.sideBar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: 0.5s;
  position: initial;
  align-items: stretch;
  height: 100vh;
  overflow-y: scroll;
}

.sideBar__heading {
  display: flex;
  align-items: center;
  padding: 1rem;
  gap: 0.5rem;
}

.sideBar__title {
  font-size: 16px;
}

.sideBar__close {
  display: flex;
  cursor:pointer;
}

.sideBar__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.sideBar__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sideBar__footer {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .sideBar {
    position: sticky;
    height: unset;
    overflow-y: unset;
    align-items: unset;
  }

  .sideBar__heading {
    display: none;
  }

  .sideBar__footer {
    display: none;
  }
}

/************ Sections Styles ****************************************************/
.section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

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

.section--related {
  align-items: flex-start;
  width: 100%;
}

.section--news {
  gap: 0;
}

.section--news-list {
  gap: 1rem;
}

.section__header {
  padding: 1rem 0.5rem 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.section--news__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
}

.section__more {
  display: flex;
  align-items: center;
  color: var(--color-button-secondary);
}

.section__preTitle {
  display: none;
}

.section__title {
  color: var(--color-section-title);
  font-size: 18px;
  font-weight: 500;
  margin: 0 auto;
}

.section__preTitle + .section__title {
  margin: unset;
}

.section__afterHeader {
  display: flex;
}

  .section__afterHeader a {
    display: flex;
    align-items: center;
    color: var( --color-button-secondary);
  }

.section--news__title {
  font-size: 14px;
  font-weight: 500;
}

.section--related .section__header {
  padding: 0 1rem;
}

.section--related .section__title {
  font-size: 15px;
}


.section__body {
  width: 100%;
}

.section__label {
}

.section--bordered {
}

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

.section__body--bordered {
  overflow: hidden;
}

@media screen and (min-width: 780px) {
  .section__body--bordered {
    overflow: hidden;
  }
}

@media screen and (min-width: 1024px) {
  .section__body--bordered {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2);
    overflow: hidden;
  }

  .section__header {
    padding-top: 2rem;
  }


  .section--related .section__header {
    padding: 0;
  }

  .section__preTitle {
    display: block;
  }

  .section__title {
    font-size: 21px;
    margin: 0 auto;
  }

  .section--news-list {
    gap: 1.5rem;
  }

  .section--news__title {
    font-size: 16px;
    font-weight: 500;
  }

  .section--bordered {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2);
  }

  .section--related {
    padding: 1rem;
  }
}

/************ lists Styles ****************************************************/
.list {
  display: flex;
  width: 100%;
}

.list--horizontal {
  flex-direction: row;
  align-items: flex-start;
}

.list--vertical {
  flex-direction: column;
}

.list--justifySpaceBetween {
  justify-content: space-between;
}

.list--justifySpaceAround {
  justify-content: center;
}

.list--wrap {
  flex-wrap: wrap;
}

.list--grow-1 .list__item {
  /* flex-grow: 1; */
}

.list--1xn .list__item {
  flex: 1 1 calc(50% - 1rem);
}

.list--1x4 .list__item {
  flex-grow: 1;
  max-width: calc(50% - 1rem);
}

.list--1x3 .list__item {
  flex-grow: 1;
  max-width: calc(50% - 1rem);
}

.list--1x2 .list__item {
  flex-grow: 1;
  max-width: calc(50% - 1rem);
}

.list--mobile .list__item {
  flex-grow: 1;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .list--mobile .list__item {
    flex-grow: 1;
    max-width: inherit;
  }

  .list--1x3 .list__item {
    max-width: calc(33% - 1rem);
  }

  .list--1x2 .list__item {
    flex-grow: 1;
    width: calc(50% - 1rem);
  }

  .list--1x4 .list__item {
    max-width: calc(25% - 1rem);
  }

  .list--1xn .list__item {
    flex-grow: 1;
    max-width: 100%;
  }

  .list--1xn.list--wrap {
    flex-wrap: nowrap;
  }
}
/************ Background Styles ****************************************************/
.bg--white {
  background-color: white;
}

/************ Buttons Styles ****************************************************/
.btn {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
}

.btn--simple {
  border: 1px solid #ddd;
}

.btn--wide {
  width: 100%;
}

.btn--cerved {
  border-radius: var(--border-radius-2);
}

.btn--cervedSmall {
  border-radius: var(--border-radius-1);
}

.btn--large {
  padding: 0.7rem 1.4rem;
}

.btn--large-x2 {
  padding: 1rem 1.4rem;
}

.btn--small {
  padding: 0.3rem 0.7rem;
}

.btn--small-x1 {
  padding: 0.1rem 0.7rem;
}

.btn--primary {
  background-color: var(--color-primary);
  color: white;
}

.btn--secondary {
  background-color: var(--color-secondary-300);
  color: white;
}

.btn--yellow {
  background-color: var(--color-icon-primary-100);
  color: white;
}

.btn--accept {
  background-color: var(--color-icon-rating-4-5);
  color: white;
}

.btn--light {
  background: white;
  color: rgb(61, 61, 61);
  transition: 0.3s;
}

  .btn--light:hover {
    background: rgb(221, 221, 221);
    color: rgb(61, 61, 61);
  }

.btn--wired-primary {
  border: 1px solid var(--color-primary);
  background: none;
  color: var(--color-primary);
  transition: 0.3s;
}

.btn--wired-secondary {
  border: 1px solid var(--color-secondary-300);
  background: none;
  color: var(--color-secondary-300);
  transition: 0.3s;
}

.btn--nowired {
  border: none;
}

.btn--wired-primary:hover {
  background: var(--color-primary);
  color: white;
}

.btn--wired-secondary:hover {
  background: var(--color-secondary-300);
  color: white;
}

.btn--wired-primary i {
  color: var(--color-primary);
  transition: 0.3s;
}

.btn--wired-primary:hover .btn--wired-primary i {
  color: white;
}

.btn--wired-primary svg,
.btn--wired-primary path,
.btn--wired-primary g {
  fill: var(--color-primary);
  transition: 0.3s;
}

.btn--wired-primary:hover svg {
  fill: white;
}

.btn--wired-primary:hover path {
  fill: white;
}

.btn--wired-primary:hover g {
  fill: white;
}

.btn__icon {
  font-size: 18px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}

.btn__icon--small {
  font-size: 16px;
  width: 22px;
  height: 22px;
}

.btn__icon--large {
  font-size: 22px;
  width: 28px;
  height: 28px;
}

.btn__txt {
  font-size: 16px;
}

.btn__txt--small {
  font-size: 18px;
}

.btn__txt--large {
  font-size: 22px;
}

/************ preHeaders Styles ****************************************************/
.preHeader {
  background-color: white;
  width: 100%;
  /* padding: 0 0.5rem; */
}

.preHeader__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preHeader__right {
  display: flex;
  gap: 0.5rem;
}

.preHeader__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
}

  .preHeader__toggle svg {
    width: 20px;
  }

.preHeader__logo {
  display: flex;
}

  .preHeader__logo .header__logo_link {
    display: flex;
  }

  .preHeader__logo img {
    height: 35px;
  }

.preHeader__faq {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
}

  .preHeader__faq svg {
    width: 23px;
    height: 23px;
  }

@media screen and (min-width: 768px) {
  .preHeader {
    display: none;
  }
}

/************ Headers Styles ****************************************************/
.header {
  background-color: white;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 2;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-neutral-100);
  transition: top 0.3s;
}

.header--scrolled {
  top: -122px;
}

.mainHeader {
  /*! padding: 7px 0; */
  width: 100%;
}

.header__between {
  color: #eee3;
  border-bottom: none;
  margin: 0.5rem 0;
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*! padding: 0 0.5rem; */
}

.header__rightSide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.header__logo {
  display: none;
}

.header__search {
  flex-grow: 1;
}

.header__leftSide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-grow: 2;
  gap: 0.2rem;
}

.header__selectors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__tools_content {
}

.header__tools_items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.header__seprator {
  height: 24px;
  color: #d4d4d4;
  border-left: none;
}

@media screen and (min-width: 768px) {
  .header {
    padding: 0;
  }

  .mainHeader {
    padding: 12px 0;
    background: white;
  }

  .header__between {
    display: none;
  }

  .header__rightSide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1.5;
    gap: 1rem;
  }

  .header__leftSide {
    gap: 0.7rem;
  }

  .header__logo {
    display: block;
  }

    .header__logo img {
      height: 50px;
    }

  .header__logo_link {
    display: flex;
  }

  .header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }
}

/************ SearchBox Styles **********************************************/
.searchBox {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 0.2rem;
  /* overflow: hidden; */
  background-color: var(--color-neutral-100);
  height: 44px;
  position: relative;
}

  .searchBox .ui-autocomplete {
    position: absolute;
    top: 39px !important;
    left: 0 !important;
    right: 0 !important;
    background: #f0f0f1;
    border: none;
    border-radius: 0 0 var(--border-radius-1) var(--border-radius-1);
    width: 100% !important;
    border-top: 1px solid var(--color-neutral-200);
  }

  .searchBox .ui-menu-item {
    border-bottom: 1px solid var(--color-neutral-200);
  }

    .searchBox .ui-menu-item:last-child {
      border-bottom: none;
    }

    .searchBox .ui-menu-item .ui-menu-item-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      transition: 0.3s;
      font-family: 'IRANYekan';
    }

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background-color: var(--color-icon-primary) !important;
  border: none;
  margin: unset;
}

.ui-menu-item .ui-menu-item-wrapper span {
  font-size: 12px;
}

.ui-menu-item .ui-menu-item-wrapper img {
  width: 40px;
  height: auto;
}

@media screen and (min-width: 768px) {
  .searchBox .ui-menu-item .ui-menu-item-wrapper {
    gap: 1rem;
    padding: 0.5rem 1rem;
  }

  .ui-menu-item .ui-menu-item-wrapper span {
    font-size: 13px;
  }

  .ui-menu-item .ui-menu-item-wrapper img {
    width: 70px;
  }
}

input.searchBox__text {
  width: 100%;
  flex-grow: 1;
  border: none;
  background-color: transparent;
  padding: 0 0.2rem;
  border: none;
  height: 30px;
  background: transparent;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-neutral-500);
}

.searchBox__btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  width: 40px;
  height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .searchBox__btn i {
    font-size: 15px;
    vertical-align: middle;
  }

@media only screen and (min-width: 768px) {
  .searchBox {
    padding: 0 1rem;
  }

  input.searchBox__text {
    line-height: 50px;
    padding: 0 1rem;
    font-size: 12px;
  }

  .searchBox__btn {
    width: 24px;
    height: 24px;
    text-align: center;
  }

    .searchBox__btn i {
      font-size: 20px;
      color: #8c8c8c;
      vertical-align: middle;
    }
}

/********** cart styles *******************************************/

.cart {
  position: relative;
}

.cart__btn {
}

.cart__btn_wrapper {
}

.cart__btn_link {
  position: relative;
  border-radius: 7px;
  height: 41px;
  padding: 0.5rem 0.5rem 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  transition: background 0.3s ease 0.1s, color 0.6s ease 0.1s;
}

  .cart__btn_link:hover {
    color: #eb3a3a;
    background: #f1f1f1;
  }

.cart__btn_icon {
  font-size: 21px;
  color: black;
}

.cart__btn_label {
  font-size: 17px;
}

.cart__btn_countBox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0px;
  right: 2px;
  background-color: var(--color-primary);
  color: white;
  min-width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 6px;
  padding: 0.1rem;
}

.cart__btn_count {
  font-size: 12px;
  z-index: 1;
  font-weight: bold;
}

.cart__flyout {
  display: none;
}

@media only screen and (min-width: 768px) {
  .cart__btn_link {
    padding: 0.5rem;
  }

  .cart__flyout {
    display: block;
    transform: translateY(20px);
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    top: 51px;
    width: max-content;
    left: 0;
    background-color: #fff;
    border-radius: 15px;
    border-top: 3px solid #eb3a3a;
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0.1s;
    min-width: 350px;
  }

    .cart__flyout::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-right: 8px solid #eb3a3a;
      border-bottom: 8px solid transparent;
      left: 20px;
      top: -14px;
      transform: rotate(90deg);
    }

    .cart__flyout.active {
      transform: translateY(0px);
      visibility: visible;
      opacity: 1;
    }

  .cart__flyout_emptyBox {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .cart__flyout_emptyIcon {
    width: 173px;
    height: 173px;
    /*background: #eceff1;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart__flyout_emptyContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .cart__flyout_emptyTitle {
    font-size: 21px;
    font-weight: 500;
    color: var(--color-neutral-800);
  }

  .cart__flyout_emptySubTitle {
    font-size: 15px;
    color: #626262;
  }

  .cart__flyout_emptyLinks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
  }

  .cart__flyout_emptyLink {
    border: 1px solid #e6e6e6;
    padding: 8px 12px;
    color: #5e5e5e;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

    .cart__flyout_emptyLink:hover {
      color: #aa2828;
    }

  .cart__flyout_items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 15px;
  }

  .cart__flyout_item {
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    padding: 0.7rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__flyout_total {
    color: var(--color-primary);
    font-size: 16px;
  }

  .cart__flyout_tableItems {
    width: 100%;
    padding: 0.7rem 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .cart__flyout_tableItem {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

    .cart__flyout_tableItem:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

  .cart__flyout_itemPic, .cart__flyout_itemPic img {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    overflow: hidden;
  }

  .cart__flyout_itemInfo {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 0.2rem 0;
  }

  .cart__flyout_itemName {
    font-size: 14px;
    font-weight: bold;
  }

  .cart__flyout_itemAttributes {
    font-size: 13px;
    color: #7e7e7e;
  }

  .cart__flyout_itemFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__flyout_itemPrice {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-primary);
    direction: rtl;
  }

  .cart__flyout_itemControles {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart__flyout_itemControl {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    padding: 0.5rem;
    line-height: 1;
  }

  .cart__flyout_itemControl-uniq {
    border-radius: var(--border-radius-2);
    margin-right: 0.6rem;
  }

  .cart__flyout_itemControl-right {
    border-radius: 0 var(--border-radius-2) var(--border-radius-2) 0;
    border-right: none;
    padding-right: 13px;
  }

  .cart__flyout_itemControl-left {
    border-radius: var(--border-radius-2) 0 0 var(--border-radius-2);
    border-left: none;
    padding-left: 13px;
  }

  .cart__flyout_buttons {
  }

  .cart__flyout_button {
    width: 100%;
    height: 60px;
    border-radius: 0 0 15px 15px;
  }
}

/********** tools styles *******************************************/
.tools {
}

.tools__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.tools__backdrop {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.tools__btn {
  z-index: 2;
}

.tools__btn_link {
  background-color: white;
  border-radius: 7px;
  height: 41px;
  padding: 0.3rem 0.5rem 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: border-color 0.6s ease 0.1s, color 0.6s ease 0.1s;
  gap: 0.2rem;
}

  .tools__btn_link:hover {
    color: #eb3a3a;
    background: #f1f1f1;
  }

.tools__btn_icon {
  font-size: 21px;
  color: black;
}

.tools__btn_text {
  display: none;
}

.tools__btn_text_mobile {
  display: block;
  font-size: 12px;
}

.tools__modal {
  display: none;
}

.tools__btn_link {
  /* background: none; */
  padding: 0 1rem;
  gap: 0.3rem;
  border: 1px solid #ddd;
}

  .tools__btn_link:hover {
    /* border-color: #eb3a3a; */
    /* color: #eb3a3a; */
    /* background: none; */
  }

.tools__btn_text {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: black;
  letter-spacing: -0.5px;
}

.tools__btn_text_mobile {
  display: none;
}

.tools__modal {
  display: block;
  transform: translateY(20px);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 51px;
  width: max-content;
  left: 0px;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0.1s;
  z-index: 2;
}

  .tools__modal:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid var(--color-icon-primary);
    border-bottom: 8px solid transparent;
    left: 23px;
    top: -11px;
    transform: rotate(90deg);
  }

  .tools__modal.active {
    transform: translateY(0px);
    visibility: visible;
    opacity: 1;
  }

.tools__modal_header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 7px 7px 0 0;
  min-height: 58px;
  background-color: var(--color-icon-primary);
  padding: 0.5rem 0.7rem;
  gap: 0.6rem;
}

.tools__modal_avatar {
  border-radius: 50%;
  overflow: hidden;
  width: 40px;
  height: 40px;
}

.tools__modal_info {
  color: white;
  font-size: 16px;
}

.tools__modal_infoName {
}

.tools__modal_body {
  padding: 0.3rem 0;
}

.tools__modal_footer {
  border-top: 1px solid #eee;
}

.tools__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.tools__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 1.2rem;
  color: rgb(74, 95, 115);
  transition: color 0.3s;
}

  .tools__item:hover,
  .tools__item:hover i {
    color: #eb3a3a;
  }

  .tools__item span {
  }

  .tools__item i {
    color: #ccc;
    font-size: 16px;
    transition: color 0.3s;
  }

.tools__item-exit span,
.tools__item-exit i {
  color: var(--color-primary);
  transition: color 0.3s;
}

.tools__item-exit:hover span,
.tools__item-exit:hover i {
  color: #ae3333;
}

/********** Toolbar styles *******************************************/
.toolbar {
  position: fixed;
  z-index: 20;
  left: 0;
  bottom: -2px;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 60px;
  box-shadow: 0 -5px 10px -10px rgb(0 0 0 / 70%);
  padding: 0 10px;
  color: #000;
}

.toolbar__item {
  flex: 1;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

  .toolbar__item.active {
    flex: 1.25;
  }

.toolbar__link {
  display: inline-block;
  position: relative;
  z-index: 3;
  width: 43px;
  height: 43px;
  border-radius: 43px;
  line-height: 43px;
  text-align: center;
}

.toolbar__item.active .toolbar__link {
  background: #fef3f3;
  color: #eb3a3a;
  width: 100%;
}

.toolbar__icon {
  font-size: 20px;
  position: absolute;
  right: 0;
  top: -7px;
  width: 100%;
  height: 43px;
  line-height: 43px;
  transition: all 0.3s ease-in-out;
}

  .toolbar__icon svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    transition: all 0.3s ease-in-out;
  }

.toolbar__item.active .toolbar__link .toolbar__icon {
  top: 0;
  width: 45px;
  font-size: 17px;
}

  .toolbar__item.active .toolbar__link .toolbar__icon g {
    fill: #eb3a3a;
  }

.toolbar__text {
  display: block;
  font-size: 11px;
  font-weight: 300;
  width: 100%;
  position: absolute;
  left: 0;
  top: 15px;
  transition: all 0.3s ease-in-out;
}

.toolbar__item.active .toolbar__link .toolbar__text {
  padding-right: 25px;
  font-size: 13px;
  font-weight: bold;
  top: 0;
}

.toolbar__badge {
  position: absolute;
  top: -1px;
  right: -3px;
  border-radius: 15px;
  background-color: var(--color-primary);
  color: white;
  height: 21px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 2px 4px 0;
}

@media screen and (min-width: 768px) {
  .toolbar {
    display: none;
  }
}

/***************** Desktop Menu Styles**************************************************************/
.topMenu {
  display: none;
}

  .topMenu.active {
    display: block;
    background: white;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100svh;
    z-index: 3;
  }

.topMenu__content {
  display: flex;
  flex-direction: column;
  height: 100svh;
  justify-content: space-between;
}

.topMenu__close {
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  z-index: 2;
}

.topMenu__close_link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  cursor:pointer;
}

.topMenu__close_icon {
  font-size: 21px;
}

.topMenu__categories {
  position: relative;
  /* flex-grow: 1; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}

.topMenu__Title {
  border-bottom: 1px solid #ddd;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-neutral-700);
}

.topMenu__icon {
  font-size: 1.1rem;
  color: #727272;
}

.topMenu__topic {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*! flex-grow: 1; */
  min-width: max-content;
  border-left: 1px solid #ddd;
  padding: 0 0.5rem;
}

.topMenu__background {
  display: none;
}

.topMenu__subMenu {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: calc(100svh - 81px);
  margin-bottom: 40px;
  overflow: hidden;
}

.topMenu__right {
  border-left: 1px solid #ddd;
  height: calc(100svh - 80px);
  width: 110px;
  overflow-y: scroll;
}

.topMenu__left {
  height: calc(100svh - 80px);
  width: calc(100% - 110px);
  overflow-y: scroll;
  flex-grow: 1;
  display: flex;
}

.topMenu__subTitle {
  padding: 0.5rem 1rem 0.1rem;
}

.topMenu__subTitle_link {
  display: flex;
  align-items: center;
  color: var(--color-neutral-700);
  font-size: 13px;
  font-weight: 700;
  gap: 0.3rem;
}

  .topMenu__subTitle_link i {
    font-size: 20px;
  }

.topMenu__mainPages {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #ddd;
  height: 41px;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  flex-wrap: nowrap;
  overflow-x: scroll;
  direction: rtl;
  gap: 0;
  padding: 0.4rem;
  /*afzalnejad*/
  background: var(--color-neutral-100);
}

.topMenu__toggle {
  display: block;
}

@media screen and (min-width: 768px) {
  .topMenu {
    display: block;
    transition: top 0.6s;
    top: 68px;
    position: fixed;
    left: 0;
    right: 0;
    background: white;
    z-index: -10;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 0 rgba(0, 0, 0, 0.05);
  }

  .topMenu--scrolled {
    top: -50px;
  }

  .topMenu.active {
    display: block;
    position: initial;
    height: unset;
  }

  .topMenu__topic {
    border-left: unset;
    padding: unset;
  }

  .topMenu__content {
    flex-direction: row;
    gap: 20px;
    padding: 0 1rem;
    height: unset;
    justify-content: flex-start;
  }

  .topMenu__close {
    display: none;
  }

  .topMenu__Title {
    border-bottom-color: transparent;
    padding: unset;
  }

  .topMenu__subTitle {
    padding: 1rem;
  }

  .topMenu__mainPages {
    /* gap: 1.5rem; */
    border-top: none;
    position: initial;
/*    justify-content: stretch;
*/    flex-grow: 1;
    width: unset;
    flex-wrap: unset;
    overflow-x: unset;
    padding: 0;
    padding-right: 3px;
    align-items: stretch;
    /*afzalnejad*/
    background: unset;
    position: relative;
  }

    .topMenu__mainPages::before {
      content: '';
      width: 1px;
      background-color: var(--color-neutral-200);
      height: 16px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      top: 47%;
      position: absolute;
      right: 0;
    }

  .topMenu__toggle {
    display: none;
  }

  .topMenu__background {
    display: block;
    background: #000000ab;
    height: 105vh;
    position: absolute;
    left: 0;
    right: 0;
    top: 41px;
    bottom: 0;
    width: 100vw;
    z-index: 1;
    display: none;
    /* opacity: 0; */
    transition: 0.3s;
  }

  .topMenu__subMenu {
    background: white;
    border-radius: 0 0 15px 15px;
    border: 1px solid #ddd;
    display: flex;
    height: auto;
    left: 0;
    margin-bottom: unset;
    overflow: unset;
    position: absolute;
    right: 0;
    top: 41px;
    width: calc(100vw - 2rem);
    z-index: 1;
    transform: translateY(20px);
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
  }

    .topMenu__subMenu.active {
      transform: translateY(0px);
      visibility: visible;
      opacity: 1;
    }

  .topMenu__right {
    overflow-y: unset;
    height: 650px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /*! background-color: #f7f7f7; */
    border-radius: 0 0 15px 0;
    width: unset;
  }

  .topMenu__left {
    height: unset;
    overflow-y: unset;
    width: unset;
  }

  .topMenu__categories:hover {
    border-bottom: 2px solid var(--color-primary);
  }

  .topMenu__topic {
    border-bottom: 2px solid transparent;
    display: flex;
    flex-grow: initial;
    font-size: 12px;
    justify-content: stretch;
    padding: 0 12px;
    transition: border-bottom 0.3s ease-in-out;
    color: var(--color-neutral-600);
    font-weight: 400;
  }

    .topMenu__topic:hover {
      border-bottom: 3px solid var(--color-primary);
    }
}

@media screen and (min-width: 1700px) {
  .topMenu__subMenu {
    max-width: calc(var(--screen-size-1x) - 2rem);
  }
}

/***************** Navigation Styles**************************************************************/
.nav {
}

.nav__items {
}

.nav__item {
  /* min-height: 300px; */
}

/********* NavItem first-level *******************/
.topMenu__right .nav__item.first-level {
  border-bottom: 1px solid var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  transition: 0.3s;
  line-height: 2.17;
  flex-direction: column;
  border-right: 2px solid transparent;
  color: var(--color-neutral-700);
}

  .topMenu__right .nav__item.first-level:last-child {
    border-bottom: none;
  }

  .topMenu__right .nav__item.first-level.active {
    background: var(--color-neutral-100);
    border-right: 2px solid var(--color-primary);
  }

    .topMenu__right .nav__item.first-level.active:last-child {
      border-radius: 0 0 15px 0;
    }

  .topMenu__right .nav__item.first-level svg {
    height: 25px;
  }
.nav__item_link{
    cursor:pointer;
}
.topMenu__right .nav__item.first-level.active .nav__item_link {
  color: var(--color-neutral-600);
}

.nav__item.first-level .nav__item_link {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.2rem;
  justify-content: center;
  padding: 0.4rem 0.2rem 0.2rem;
  width: 100%;
}

.nav__item.first-level .nav__item_img {
  width: 65px;
}

@media screen and (min-width: 768px) {
  .nav__item.first-level .nav__item_img {
    width: 85px;
  }
}

/********* NavItem second-level *******************/
.nav__item.second-level {
  border-top: 1px solid #ddd;
  padding: 0.3rem;
  /*! align-items: stretch; */
  display: flex;
  flex-direction: column;
  /*! justify-content: stretch; */
  font-size: 14px;
  font-weight: 700;
  gap: 0.15rem;
  /* margin: 0.3rem; */
  /*! border-radius: 25px 7px 7px 7px; */
  /*! box-shadow: 0px 1px 2px 1px #ededed; */
  /*! background: white; */
}

  .nav__item.second-level:last-child {
    border-bottom: none;
  }

  .nav__item.second-level .nav__item_link {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-start;
    padding: 0.4rem 0.4rem;
    /*afzalnejad*/
    background: var(--color-neutral-200);
  }

  .nav__item.second-level .nav__item_img {
    /*afzalnejad*/
    width: auto;
    height: 27px;
    /*width: 60px;*/
  }

@media screen and (min-width:768px) {
  .nav__item.second-level .nav__item_link {
    padding: 0.2rem 0.4rem;
  }
}

/********* Sub List first-level *******************/
.nav__item_subList.first-level {
  flex-grow: 1;
  width: 100%;
}

/********* Sub List second-level *******************/
.nav__item_subList.second-level {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  row-gap: .8rem;
  padding: .8rem .2rem;
}

  .nav__item_subList.second-level .nav__item {
    align-items: flex-start;
    border-radius: 6px;
    /*! border: 1px solid #ddd; */
    display: flex;
    flex-grow: 1;
    font-size: 12px;
    font-weight: 300;
    justify-content: center;
    width: calc(100% / 3 - 0.2rem);
  }

  .nav__item_subList.second-level .nav__item_link {
    background: unset;
    border: none;
    box-shadow: unset;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.2rem;
    padding: 0.1rem;
    /*afzalnejad*/
    text-align: center;
  }

  .nav__item_subList.second-level .nav__item_img,
  .nav__item_subList.second-level img,
  .nav__item_subList.second-level svg {
    width: auto;
    height: 40px;
  }

/*afzalnejad*/
/*.nav__item_subList.second-level .nav__item_img {
        width: 55px;
    }*/

.nav__item_subListImage {
  display: none;
}

.topMenu__left .nav__item.first-level {
  display: none;
}

  .topMenu__left .nav__item.first-level.active {
    /*! background: #eee; */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

@media screen and (min-width: 768px) {
  .nav__item_subList.second-level {
    gap: 0.3rem;
    padding: 0;
  }

  .nav__item.first-level .nav__item_link {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1rem;
  }

  .topMenu__right .nav__item.first-level .nav__item_img {
    width: 31px;
  }

  .topMenu__right .nav__item.first-level {
    padding: 0.5rem 0.5rem;
    font-size: 13px;
  }

    .topMenu__right .nav__item.first-level:hover {
      color: var(--color-primary);
      /* background-color: #e4e4e4; */
      transform: background-color 0.3s;
    }

    .topMenu__right .nav__item.first-level:last-child {
      /* border-radius: 0 0 15px; */
    }

  /**** Left Side first-level ****/
  .topMenu__left .nav__item.first-level.active {
    background: none;
  }

  .topMenu__left .nav__item_subList.first-level .second-level,
  .topMenu__left .nav__item_subList.first-level .second-level .nav__item_link {
    color: black;
    transition: 0.3s;
    gap: 0.5rem;
  }

  .topMenu__left .nav__item_subList.first-level .nav__item.second-level .nav__item_link {
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-neutral-900l-500);
    font-weight: 700;
  }

  .topMenu__left .nav__item_subList.first-level .nav__item.second-level .nav__item_subListBox .nav__item_subList .nav__item_link {
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-neutral-500);
    font-weight: 500;
  }

  .topMenu__left .nav__item_subList.first-level .second-level:hover,
  .topMenu__left .nav__item_subList.first-level .second-level .nav__item_link:hover {
    color: red;
  }

  /**** Left Side subList second-level ****/
  .topMenu__left .nav__item_subList.second-level .nav__item {
    margin-right: 2.1rem;
  }

  /*afzalnejad*/
  .topMenu__left .nav__item.second-level .nav__item_link {
    background: unset;
  }

  /*afzalnejad*/
  .topMenu__left .nav__item_subList.second-level .nav__item_link {
    text-align: right;
  }

  /**** Left Side subList first-level ****/
  .nav__item_subListBox {
    display: flex;
    flex-grow: 1;
  }

  .nav__item_subListContent {
    flex-grow: 1;
  }

  .nav__item_subListImage {
    display: block;
    max-width: 350px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
  }

    .nav__item_subListImage img {
      width: 100%;
      border-radius: var(--border-radius-1);
    }

  .nav__item_subList.first-level {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .nav__item.second-level {
    /*afzalneajd*/
    width: calc(100% / 3);
    /*        width: 25%;*/
    flex-shrink: 1;
    border: none;
    box-shadow: unset;
    border-radius: unset;
    font-size: 14px;
  }

    .nav__item.second-level .nav__item_img {
      width: 20px;
      /*afzalnejad*/
      height: unset;
    }

  .nav__item_subList.second-level {
    flex-direction: column;
    gap: 0;
  }

    .nav__item_subList.second-level .nav__item {
      border-radius: unset;
      width: unset;
      border: none;
      /*! border-bottom: 1px solid #f0f0f1; */
      color: #727272;
      font-size: 14px;
    }

    .nav__item_subList.second-level .nav__item_img,
    .nav__item_subList.second-level img,
    .nav__item_subList.second-level svg {
      height: unset;
      display: none;
    }
}

/******** Footers Styles ***************************************/
.footer {
  background: #333;
  box-shadow: 0 -3px 10px -2px rgba(0, 0, 0, 0.1);
  color: white;
}

/******** Pre Footer Styles *********/
.footer__pre {
  /* background: rgba(0, 0, 0, 0.04); */
  /* background: var(--color-primary); */
  background: rgba(0, 0, 0, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__pre_content {
  padding: 0.5rem;
}

@media screen and (min-width: 1024px) {
  .footer__pre_content {
    padding: 0.5rem 1rem;
  }
}

/******** Top Footer Styles *********/

.footer__top {
  padding: 1rem 0;
}

.footer__items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 1.2rem;
}

.footer__item:last-child {
  margin-top: 1rem;
}

.footer__item:nth-child(2) {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1rem;
}

.footer__top .footer__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex-grow: 1;
}

.footer__title {
  font-size: 13px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer__link {
  font-size: 15px;
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

.footer__social_title {
  font-size: 12px;
}

.footer__social_items {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__social_item {
  border: 1px solid #515050;
  border-radius: var(--border-radius-1);
  min-width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__social_link {
  display: flex;
}

.footer__social_icon {
  height: 25px;
  fill: #aaa;
  transition: 0.3s;
}

.footer__social_item:hover .footer__social_icon {
  fill: rgb(255, 255, 255);
}

.footer__logoBox img {
  height: 50px;
}

.footer__describe {
  font-size: 11px;
  line-height: 2;
}

.footer__info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 12px;
}

.footer__info_icon {
  color: #aaa;
  min-width: 17px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 22px;
}

  .footer__info_icon i {
    font-size: 14px;
  }

.footer__info_value {
  color: #aaa;
}

.footer__info_label {
}

.footer__certificates {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
  width: 100%;
  flex-wrap: wrap;
}

.footer__certificate {
  flex-grow: 1;
  max-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__certificate_link {
  display: flex;
  align-content: center;
  padding: 1rem;
  background-color: white;
  border-radius: var(--border-radius-1);
  flex-grow: 1;
  justify-content: center;
}

.footer__certificate img {
  height: 16vw;
}

.footer__item_hr {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.5rem 0;
}

.footer__item {
  font-size: 12px;
}

@media screen and (min-width: 768px) {
  .footer__top {
    padding: 1.5rem 0;
  }

  .footer__items {
    flex-direction: row;
    gap: 2rem;
    padding: 0 1rem;
  }

  .footer__item:last-child {
    margin-top: unset;
  }

  .footer__item:nth-child(2) {
    border-top: unset;
    margin-top: unset;
  }

  .footer__top .footer__item {
    max-width: 25%;
  }

  .footer__certificate img {
    height: 5vw;
  }

  .footer__social_item {
    min-width: 47px;
    height: 47px;
  }

  .footer__social_title {
    font-size: 20px;
  }

  .footer__social_icon {
    height: 30px;
  }

  .footer__item_hr {
    margin: 1rem 0;
  }
}

@media screen and (min-width: 1024px) {
  .footer__describe {
    font-size: 13px;
    line-height: 1.8;
  }

  .footer__logoBox img {
    height: 70px;
  }

  .footer__info {
    font-size: 14px;
  }

  .footer__info_icon i {
    font-size: 16px;
  }

  .footer__title {
    font-size: 16px;
  }

  .footer__social_title {
    font-size: 14px;
  }
}

/******** Down Footer Styles *********/
.footer__down {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.5rem 0;
  background: #00000030;
  color: white;
}

  .footer__down .footer__items {
    justify-content: space-between;
    gap: 1rem;
  }

  .footer__down .footer__item {
    display: flex;
    align-items: center;
    align-items: center;
    gap: 0.5rem;
    border: none;
    margin-top: 0;
    font-size: 12px;
  }

  .footer__down .footer__info a strong {
    color: #df1f26;
  }

.footer__powered_by a {
  color: gray;
}

@media screen and (min-width: 768px) {
  .footer__down {
    padding: 1rem 0;
  }

    .footer__down .footer__item {
      border: none;
    }
}

@media screen and (min-width: 1024px) {
  .footer__down .footer__item {
    font-size: 14px;
  }
}

/******** Newsletter Styles ***************************************/
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}

.newsletter__titleBox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.newsletter__titleContent {
  display: flex;
  gap: 0.5rem;
  font-size: 14px;
}

.newsletter__preTitle {
  color: white;
}

.newsletter__title {
  color: #aaa;
}

.newsletter__subTitle {
  font-size: 12px;
}

.newsletter__contents {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.newsletter__subscribeBox {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter__emailBox {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12121233;
  /* border: 1px solid rgba(255, 255, 255, 0.25); */
  /* background: #ffffff1c; */
}

.newsletter__email {
  background: none;
  border: none;
  flex-grow: 1;
  color: white;
  padding: 1rem;
  font-size: 12px;
}

  .newsletter__email:focus {
    color: white !important;
  }

.newsletter__seprator {
  height: 33px;
  border: none;
  border-left-color: currentcolor;
  border-left-style: none;
  border-left-width: medium;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter__btn {
  border: none;
  background: none;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  cursor:pointer;
}

  .newsletter__btn i {
    font-size: 13px;
  }

.newsletter__resultBox {
  display: none;
}

.newsletter__validationBox {
  display: none;
}

@media screen and (min-width: 768px) {
  .newsletter__subTitle {
    font-size: 13px;
  }

  .newsletter__titleContent {
    font-size: 15px;
  }

  .newsletter__email {
    font-size: 13px;
  }

  .newsletter__btn {
    font-size: 14px;
  }

    .newsletter__btn i {
      font-size: 14px;
    }
}

/******** Collapsible Styles ***************************************/
.collapsible {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.footer__items .collapsible:last-child {
  border-bottom: none;
}

/* .collapsible:last-child {
  margin-bottom: 2rem !important;
  background-color: red !important;
} */

.collapsible__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

  .collapsible__header i {
    font-size: 18px;
    color: white;
    transform: rotate(0deg);
    transition: transform 0.3s;
  }

.collapsible--expanded .collapsible__header i {
  transform: rotate(-90deg);
}

.collapsible__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s;
  width: 100%;
}

.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 1;
}

.collapsible__link {
  color: #aaa;
  font-size: 12px;
  transform: 0.3s;
  display: flex;
}

@media screen and (min-width: 768px) {
  .collapsible {
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
  }

  .collapsible__header i {
    display: none;
  }

  .collapsible:last-child {
    margin-bottom: unset;
  }

  .collapsible__content {
    max-height: 100vh;
    opacity: 1;
  }

  .collapsible__link:hover {
    color: white;
  }
}

@media screen and (min-width: 1024px) {
  .collapsible__link {
    font-size: 14px;
  }
}

/************ lists Styles ****************************************************/
.category {
}

.category__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(30% - 1rem);
}

.category__link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.category__pic {
  width: 90px;
  height: 90px;
}

.category__title {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: rgb(8, 10, 56);
}

@media screen and (min-width: 768px) {
  .category__item {
    width: 20%;
  }

  .category__pic {
    width: 130px;
    height: 130px;
  }
}

@media screen and (min-width: 1024px) {
  .category__title {
    font-size: 12px;
  }
}

@media screen and (min-width: 1400px) {
  .category__pic {
    width: 170px;
    height: 170px;
  }
}

/******** Banners Styles ***************************************/
.banner {
}

.banner__pic {
  border-radius: var(--border-radius-2);
  width: 100%;
}

/******** Card Styles ***************************************/
.card {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
}

.card__picBox {
  height: 84px;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 50%; */
  /* background: #ddd; */
  /* overflow: hidden; */
}

.card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 0.8rem;
}

.card__pic {
  width: 84px;
  height: 84px;
}

.card__title {
  color: var(--color-section-title);
  font-size: 13px;
  font-weight: normal;
  width: 170px;
}

.card__number {
  color: #19bfd3;
  font-size: 26px;
  font-weight: 800;
  line-height: 2.1;
}

.card--horizontal {
}

  .card--horizontal .card__link {
    flex-direction: row;
    width: 100%;
    gap: 0.8rem;
    justify-content: stretch;
  }

  .card--horizontal .card__title {
    text-align: right;
    width: 200px;
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-neutral-100);
    font-size: 11px;
    font-weight: 400;
    color: rgb(63, 64, 100);
    line-height: 2.17;
  }

.swiper--bestSeller .swiper-slide:nth-child(3n) h3 {
  border-bottom: none;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  width: 40px !important;
  height: 40px !important;
  background: white;
  border-radius: 50%;
  /* box-shadow: 0px 3px 5px 2px #5959595e; */
  border: 1px solid var(--color-neutral-200);
}

  .swiper-button-prev::after,
  .swiper-rtl .swiper-button-next::after {
    content: 'prev';
    height: 20px;
    font-size: 13px !important;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
  }

@media screen and (min-width: 1024px) {
  .card--horizontal .card__title {
    font-size: 12px;
  }
}

/******** breadcrumb Styles ***************************************/
.breadcrumb {
}

.breadcrumb__content {
  padding: 1rem 1.2rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-neutral-500);
  flex-wrap: wrap;
}

.breadcrumb__currentItem {
  color: var(--color-neutral-700);
}

@media screen and (min-width: 1024px) {
  .breadcrumb__content {
    padding: 1rem;
  }
}

/******** filtersList Styles ***************************************/
.filterBox {
  border: none;
  padding: 0 1rem;
}

.filterBox__title {
  padding: 1rem 0.5rem 1rem;
  font-size: 16px;
}

.filtersList {
}

.filtersList__content {
}

.filtersList__items {
}

@media screen and (min-width: 768px) {
  .filterBox {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-1);
    padding: 0 1rem;
  }

  .filterBox__title {
    padding: 0.5rem 0;
    font-size: 16px;
  }
}

/******** filter Styles ***************************************/
.filter {
  border-top: 1px solid var(--color-neutral-100);
  padding: 0.8rem 1.1rem 0.8rem 0;
}

  .filter:last-child {
    border-bottom: none;
  }

.filter--slider {
  padding: 0.2rem 1.5rem 1.2rem 1rem;
}

.filter__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.filter__title_label {
  font-weight: 500;
  color: var(--color-neutral-700);
  font-size: 14px;
}

.filter__title_arrow {
  display: flex;
}

  .filter__title_arrow svg {
    transform: rotate(90deg);
    width: 24px;
    height: 24px;
    fill: var(--color-neutral-500);
    transition: 0.3s;
  }

.filter__title_arrow-show svg {
  transform: rotate(0deg);
  fill: var(--color-neutral-700);
}

.filter__content {
  max-height: 0;
  opacity: 0;
  transition: 0.5s;
  overflow: hidden;
  padding: 0 0.5rem 0 1rem;
}

.filter--slider .filter__content {
  all: unset;
}

.filter__content-show {
  max-height: fit-content;
  opacity: 1;
  margin-top: 0.5rem;
}

.filter__items {
}

.filter__item {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 1px solid var(--color-neutral-100);
}

  .filter__item:last-child {
    border: none;
  }

.filter__item_checkBox {
  height: unset;
  width: unset;
}

.filter__item_label {
  flex-grow: 1;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 13px;
}

.filter__item_color {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.filter__ranges {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .filter {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .filter--slider {
    padding: 0.5rem 0.5rem 1rem 0.5rem;
  }

  .filter__title_label {
    font-weight: 500;
    color: var(--color-neutral-700);
    font-size: 16px;
  }

  .filter__item_label {
    font-size: 15px;
  }
}

/******** SubCategories Styles ***************************************/
.subCategory {
}

.subCategory__content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.subCategory__heading {
  font-size: 17px;
  font-weight: bold;
}

.subCategory__list {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.subCategory__item {
  background: var(--color-neutral-100);
  border-radius: var(--border-radius-1);
  padding: 1rem;
  flex-grow: 1;
  width: 200px;
  max-width: 222px;
  width: min-content;
  max-width: max-content;
}

.subCategory__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-grow: 1;
  width: 100%;
}

.subCategory__title {
  font-size: 14px;
  font-weight: normal;
}

.subCategory__image {
  height: 100px;
}

@media screen and (min-width: 1024px) {
  .subCategory__list {
    flex-wrap: wrap;
  }
}

/******** Sort Styles ***************************************/
.sort {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--color-neutral-200);
  padding-bottom: 0.5rem;
}

.sort__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor:pointer;
}

.sort__icon {
  height: 20px;
  width: 20px;
}

.sort__title {
  font-size: 14px;
}

@media screen and (min-width: 768px) {
  .sort {
    display: none;
  }
}

/******** Selector Styles ***************************************/
.selector {
  height: 0;
  opacity: 0;
}

.selector--active {
  display: flex;
  gap: 1rem;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 2;
  background: #1212113d;
  opacity: 1;
  height: 100vh;
}

.selector__box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  bottom: 0;
  background: white;
  flex-direction: column;
  left: 0;
  right: 0;
  padding: 1rem 1rem 0;
  border-radius: var(--border-radius-2) var(--border-radius-2) 0 0;
  transform: translateY(100%);
  transition: 0.3s;
}

.selector--active .selector__box {
  transform: translateY(0);
  transition: 0.3s;
}

.selector__links {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  justify-content: center;
  line-height: 45px;
}

.selector__link {
  color: var(--color-neutral-500);
  border-bottom: 1px solid var(--color-neutral-100);
  flex-grow: 1;
  width: 100%;
}

.selector__link-active {
  color: var(--color-primary);
}

.selector__titleBox {
  display: none;
}

.selector__titleMobileBox {
  display: flex;
  align-items: center;
}

.selector__close {
  display: flex;
  align-items: center;
  cursor:pointer;
}

@media screen and (min-width: 768px) {
  .selector {
    all: unset;
    display: flex;
    gap: 1rem;
  }

  .selector__box {
    all: unset;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .selector__links {
    all: unset;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    /* display: contents; */
  }

  .selector__link {
    all: unset;
    color: var(--color-neutral-500);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 2.17;
    white-space: nowrap;
  }

  .selector__link-active {
    color: var(--color-primary);
  }

  .selector__titleBox {
    display: flex;
    align-items: center;
  }

  .selector__title {
    min-width: 66px;
    font-size: 12px;
    font-weight: 700;
    line-height: 2.17;
  }

  .selector__titleMobileBox {
    display: none;
  }

  .selector__icon {
    display: block;
  }

  .selector__close {
    display: none;
  }
}

/******** Cards Styles ***************************************/
.cardList {
  display: flex;
  flex-direction: column;
}

.cards {
}

.cards--special {
  margin-bottom: 2rem;
  /* background-color: #f9f9f9; */
  padding: 1rem;
  border-radius: var(--border-radius-1);
  border: 1px solid var(--color-border);
}

  .cards--special .cards__title {
    margin-bottom: 1rem;
    margin-right: 1rem;
    font-size: 18px;
  }

.cards__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cards__grid {
  display: flex;
  /* gap: 1rem; */
  flex-wrap: wrap;
  align-items: stretch;
}

.cards__item {
  /*afzalnejad*/
  width: 100%;
  min-height: 100%;
  margin-left: -1px;
  margin-bottom: -1px;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

.cards--twoColumn .cards__item {
  width: 50%;
}

.cards__item--half {
  /*afzalnejad*/
  width: 50%;
}

.cards--own {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 12px;
  padding-left: 12px;
  height: 100%;
}

  .cards--own .cards__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cards--own .cards__title {
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 700;
  }


  .cards--own .cards__link {
    display: flex;
    align-items: center;
    color: #b12ba4;
    font-size: 12px;
    font-weight: 700;
  }

  .cards--own .cards__content {
    flex-grow: 1;
  }

  .cards--own .grid {
    flex-grow: 1;
  }

@media screen and (min-width: 468px) {
  .card__grid-x6 .cards__item {
    width: calc(100% / 3);
  }
}

@media screen and (min-width: 780px) {
  .cardList {
    gap: 1rem;
  }

  .cards__item {
    width: 33.3333%;
  }

  .card__grid-x6 .cards__item {
    width: calc(100% / 4);
  }
}

@media screen and (min-width: 1024px) {
  .card__grid-x6 .cards__item {
    width: calc(100% / 5);
  }

  .cards--own {
    padding-right: 16px;
    padding-left: 16px;
  }

    .cards--own .cards__title {
      padding-top: 16px;
      padding-bottom: 16px;
    }

    .cards--own .cards__title {
      font-size: 16px;
    }
}

@media screen and (min-width: 1200px) {
  .cards__item {
    width: 25%;
  }

  .card__grid-x6 .cards__item {
    width: calc(100% / 6);
  }
}

@media screen and (min-width: 1400px) {
  .card__grid-x6 .cards__item {
    width: calc(100% / 6);
  }
}

@media screen and (min-width: 1600px) {
  .cards__item {
    width: 20%;
  }
}

/******** Pager Styles ***************************************/
.pager {
  padding: 1rem 1rem 1rem;
}

  .pager ul {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
  }

.next-page,
.previous-page {
  /* color: var(--color-primary); */
  /* flex-grow: 1; */
  font-size: 16px;
  padding: 0.25rem 1rem;
  background-color: whitesmoke;
  height: 1.9rem;
  line-height: 1.9rem;
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  position: relative;
}

.next-page {
  text-align: left;
  border-radius: 0 20px 20px 0;
}

.previous-page {
  text-align: right;
  border-radius: 20px 0 0 20px;
}

  .next-page a,
  .previous-page a {
    line-height: 1rem;
    font-size: 12px;
  }

    .next-page a::after {
      content: '>';
      position: absolute;
      left: -15px;
      margin-right: 0.5rem;
      font-size: 22px;
      width: 10px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      line-height: 1rem;
      bottom: 6px;
      font-weight: bold;
      background: whitesmoke;
      border-radius: 20px 0 0 20px;
      padding: 0.25rem 0.8rem;
      top: 0;
      height: 30px;
      align-items: center;
    }

  .previous-page::after {
    content: '<';
    position: absolute;
    right: -23px;
    margin-right: 0.5rem;
    font-size: 22px;
    width: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    line-height: 1rem;
    bottom: 6px;
    font-weight: bold;
    background: whitesmoke;
    border-radius: 0 20px 20px 0;
    padding: 0.25rem 0.8rem;
    top: 0;
    height: 30px;
    align-items: center;
  }

.current-page {
  width: 30px;
  height: 30px;
  color: var(--color-neutral-000);
  background: var(--color-primary);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}

.pager ul li:last-child.current-page {
  background-color: var(--color-icon-primary);
}

.individual-page {
  color: var(--color-neutral-900);
}

@media screen and (min-width: 768px) {
  .pager {
    padding: 0 1rem 0;
  }

    .pager ul li:last-child {
      padding: 0.25rem 1rem;
      border-radius: 20px;
      background-color: whitesmoke;
      height: 1.9rem;
      line-height: 1.9rem;
      display: flex;
      align-items: center;
      margin-right: 0.5rem;
    }

    .pager ul li:first-child {
      display: flex;
      align-items: center;
    }

      .pager ul li:first-child.current-page {
      }

    .pager ul li:last-child.current-page {
    }
}

/******** Slider Styles ***************************************/
.theme-custom {
  margin: 0 !important;
}

/******** Product Styles ***************************************/

.product {
  border-bottom: 1px solid var(--color-neutral-100);
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /*afzalnejad*/
  width: 100%;
}

.product--verticalWired {
  padding: 0.5rem 1rem;
}

.product--olnyImage {
  border: none;
}

.product--vertical {
  width: 234px;
  border: none;
  border-left: 1px solid var(--color-neutral-100);
  padding: 0.5rem 1rem;
}

.product--brands {
  width: auto;
  border: none;
  border-left: 1px solid var(--color-neutral-100);
}

  .product--brands img {
    width: auto;
    max-height: 110px;
  }

.product--vertical-incredible {
  width: auto;
  height: 246px !important;
}

  .product--vertical-incredible .product__body {
    height: 100%;
  }

  .product--vertical-incredible .product__info {
    align-items: center;
  }

  .product--vertical-incredible .product__prices {
    flex-direction: column-reverse;
    font-size: 13px;
  }

    .product--vertical-incredible .product__prices .product__price.product__price-old {
      font-size: 12px;
    }

    .product--vertical-incredible .product__prices .product__price.product__price-actual {
      font-size: 15px;
      font-weight: 500;
    }

.product--noBorder .product,
.product--noBorder:last-child .product {
  border: none;
  border-left: 1px solid var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-100);
}

.product--noBorder:nth-child(2n) .product {
  border-left: none;
}

.product--festival .product,
.product--festival:last-child .product {
  padding: 1rem 1rem;
  border: none;
  border-left: 1px solid var(--color-neutral-100);
  border-top: 1px solid var(--color-neutral-100);
}

.product--festival:nth-child(2n) .product {
  border-left: none;
}

.product--festival:nth-child(1) .product,
.product--festival:nth-child(2) .product {
  border-top: none;
}

.product--categorySeller .product {
  border: 1px solid var(--color-neutral-100);
}

.product--categorySeller:nth-child(1) .product {
  border-right-color: transparent;
  border-top-color: transparent;
}

.product--categorySeller:nth-child(2) .product {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.product--categorySeller:nth-child(3) .product {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.product--categorySeller:nth-child(4) .product {
  border-color: transparent;
}

.cards__item:last-child .product {
  border-bottom: none;
}

.product__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.product__badge {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0px;
}

.product__rateBox {
  display: flex;
  /* align-items: center; */
  gap: 0.5rem;
  flex-direction: row-reverse;
  min-height: 1.1rem;
}

.product__rate {
  font-size: 13px;
}

.product__body {
  display: flex;
  gap: 0.5rem;
}

.product--vertical .product__body,
.product--verticalWired .product__body {
  flex-direction: column;
  gap: 0.5rem;
}

.product__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product__image {
  position: relative;
  height: 100%;
}

  .product__image a {
    display: flex;
  }

  .product__image img, .product__image .swiper {
    width: 118px;
  }

.product__plus {
  border: 1px solid var(--color-icon-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  bottom: 0;
}

  .product__plus svg {
  }

.product__plus_link {
  display: flex;
}

.product--vertical .product__image img,
.product--verticalWired .product__image img {
  width: 100%;
}

.product__colors {
  display: flex;
  gap: 0.3rem;
}

.product--vertical .product__colors,
.product--verticalWired .product__colors {
  position: absolute;
  left: 0;
  top: 0;
  flex-direction: column;
}

.product__color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  outline: 1px solid var(--color-neutral-200);
}

.product__details {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100%;
  flex-grow: 1;
  height: 100%;
  gap: 0.5rem;
}

.product--noBorder .product__details {
  height: 100%;
}

.product__title {
  font-size: 11px;
  flex-grow: 1;
}

.product--vertical .product__title,
.product--verticalWired .product__title {
  height: 48px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
  line-height: 2;
}

.product__info {
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  height: 100%;
}

.product__prices {
  display: flex;
  gap: 0.1rem;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  flex-direction: column-reverse;
}

.product__price {
}

.product--vertical .product__price {
  font-size: 15px;
}

.product__price-old {
  color: var(--color-neutral-400);
  text-decoration: line-through;
}

.product__price-actual {
  font-weight: bold;
}

.product__tax {
}

.product__basePrice {
}

.product__discount {
  font-size: 12px;
  background-color: var(--color-primary);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  color: var(--color-neutral-000);
  height: fit-content;
}

.product__timer {
  border-radius: 20px;
  width: 100%;
  height: 7px;
  position: relative;
  background-color: var(--color-neutral-100);
}

.product__timer_progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 20px;
}

@media screen and (min-width: 480px) {
  .product {
    border: 1px solid var(--color-neutral-100);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
  }

  .cards__item:last-child .product {
    border: 1px solid var(--color-neutral-100);
  }

  .product--brands {
    border: none;
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--vertical {
    border: none;
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--olnyImage {
    border: none;
  }

  .cards__item:last-child .product--verticalWired {
    /* border: 1px solid var(--color-neutral-100); */
    /* border-left: none; */
  }

  .cards__item:last-child .product--vertical {
    border-bottom: none;
  }

  .product--noBorder:nth-child(2n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--noBorder:nth-child(3n) .product {
    border-left: none;
  }

  .product--festival:nth-child(2n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--festival:nth-child(3n) .product {
    border-left: none;
  }

  .product--festival:nth-child(1) .product,
  .product--festival:nth-child(2) .product,
  .product--festival:nth-child(3) .product {
    border-top: none;
  }

  .product--festival .product:last-child {
    border-bottom: none;
  }

  .cards__item.product--festival:last-child .product {
    border-right: none;
  }
}

@media screen and (min-width: 768px) {

  .product--olnyImage {
    border: none;
  }

  .product--noBorder:nth-child(2n) .product,
  .product--noBorder:nth-child(3n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--noBorder:nth-child(4n) .product {
    border-left: none;
  }

  .product--festival:nth-child(2n) .product,
  .product--festival:nth-child(3n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--festival:nth-child(4n) .product {
    border-left: none;
  }

  .product--festival:nth-child(1) .product,
  .product--festival:nth-child(2) .product,
  .product--festival:nth-child(3) .product,
  .product--festival:nth-child(4) .product {
    border-top: none;
  }

  .product__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
  }

  .product__info {
    align-items: center;
    min-height: unset;
  }

  .product__badge {
    color: var(--color-primary);
    font-weight: bold;
    font-size: 16px;
  }

  .product__content {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
  }

/*  .product__image img {
    width: 100%;
  }*/

  .product__image img, .product__image .swiper {
    width: 100%;
  }
  .product__image{
      overflow:hidden;
  }


  .product__colors {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .product__prices {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .product__title {
    height: 48px;
    max-height: 48px;
    min-height: 48px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media screen and (min-width: 1024px) {
  .product__title {
    font-size: 12px;
  }

  .product--noBorder:nth-child(2n) .product,
  .product--noBorder:nth-child(3n) .product,
  .product--noBorder:nth-child(4n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--noBorder:nth-child(5n) .product {
    border-left: none;
  }

  .product--festival:nth-child(2n) .product,
  .product--festival:nth-child(3n) .product,
  .product--festival:nth-child(4n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--festival:nth-child(5n) .product {
    border-left: none;
  }

  .product--festival:nth-child(1) .product,
  .product--festival:nth-child(2) .product,
  .product--festival:nth-child(3) .product,
  .product--festival:nth-child(4) .product,
  .product--festival:nth-child(5) .product {
    border-top: none;
  }
}

@media screen and (min-width: 1200px) {

  .product--noBorder:nth-child(2n) .product,
  .product--noBorder:nth-child(3n) .product,
  .product--noBorder:nth-child(4n) .product,
  .product--noBorder:nth-child(5n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--noBorder:nth-child(6n) .product {
    border-left: none;
  }

  .product--festival:nth-child(2n) .product,
  .product--festival:nth-child(3n) .product,
  .product--festival:nth-child(4n) .product,
  .product--festival:nth-child(5n) .product {
    border-left: 1px solid var(--color-neutral-100);
  }

  .product--festival:nth-child(6n) .product {
    border-left: none;
  }

  .product--festival:nth-child(1) .product,
  .product--festival:nth-child(2) .product,
  .product--festival:nth-child(3) .product,
  .product--festival:nth-child(4) .product,
  .product--festival:nth-child(5) .product,
  .product--festival:nth-child(6) .product {
    border-top: none;
  }
}

/******** Product subscription Styles ***************************************/
.page.back-in-stock-subscription-page {
  font-family: 'IRANYekan';
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.4rem;
  gap: 1rem;
}

  .page.back-in-stock-subscription-page .page-title {
    padding-top: 1rem;
  }

  .page.back-in-stock-subscription-page .page-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .ui-dialog-title,
  .page.back-in-stock-subscription-page .page-title, .page.back-in-stock-subscription-page button {
    font-family: 'IRANYekan';
  }
/******** Product Details Styles ***************************************/
.productDetails {
}

.productDetails__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0 1rem 0;
}

.productDetails__layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
  background: #fff;
}

.productDetails__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.2rem;
}

.productDetails__left {
  flex-grow: 1;
}

.productDetails__badge {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
}

.productDetails__accessories {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.productDetails__tools {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
}

.productDetails__gallery {
  flex-grow: 1;
}

.productDetails__toolLink {
  display: flex;
}

.productDetails__toolIcon {
  height: 26px !important;
}

.productDetails__row {
  padding: 0;
}

.productDetails__row-sticky {
  position: sticky;
  transition: top 0.3s;
  background-color: white;
  z-index: 1;
}

.productDetails__content {
  padding: 0 0.5rem 0.5rem;
  border-bottom: 4px solid var(--color-neutral-100);
}

.productDetails__content-withoutBorder {
  padding: 0.5rem 0 0;
  border: none;
}

@media screen and (min-width: 1024px) {
  .productDetails__layout {
    flex-direction: row;
    padding: 0 1rem 1rem;
  }

  .productDetails__right {
    min-width: 30%;
    max-width: 30%;
    gap: 0.5rem;
    padding: unset;
  }

  .productDetails__accessories {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
  }

  .productDetails__tools {
    flex-direction: column;
    justify-content: start;
  }

  .productDetails__row {
    padding: 0 1rem;
  }

  .productDetails__content {
    padding: 0.5rem;
    border-top: 1px solid var(--color-neutral-100);
    border-bottom: 4px solid var(--color-neutral-100);
  }

  .productDetails__content-withoutBorder {
    padding: 0.5rem 0 0;
    border: none;
  }
}

/******** Gallery Styles ***************************************/
.gallery {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gallery__picture {
  position: relative;
  display: flex;
  justify-content: center;
}

.gallery__picture_img {
  width: 100%;
}

.gallery__picture_glass {
  position: absolute;
  border: 3px solid #ffffff;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 200px;
  height: 200px;
}

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  overflow: hidden;
  max-height: 84px;
  transition: 0.3s;
}

.gallery__thumbs_item {
  position: relative;
  border: 1px solid var(--color-neutral-200);
  padding: 4px;
  border-radius: var(--border-radius-1);
  width: 81px;
  height: 81px;
  cursor: pointer;
  display: flex;
}

.gallery__thumbs_item-active::before {
  content: '';
  position: absolute;
  /* background: rgba(235, 55, 78, 0.64); */
  background: rgba(255, 255, 255, 0.64);
  /* border: 2px solid white; */
  backdrop-filter: blur(4px);
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 6px;
}

.gallery__thumbs_item-active::after {
  content: '...';
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #3f4064;
  line-height: 1;
  letter-spacing: -3px;
  /* text-shadow: 0 0 5px #000000; */
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: translateY(-5px);
  bottom: 0;
}




.gallery__thumbs_item-video::before {
  content: '';
  position: absolute;
  /* background: rgba(235, 55, 78, 0.64); */
  background: rgba(255, 255, 255, 0.64);
  /* border: 2px solid white; */
  backdrop-filter: blur(4px);
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 6px;
}

.gallery__thumbs_item-video::after {
  content: '\25B6';
  position: absolute;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #3f4064;
  line-height: 1;
  letter-spacing: -3px;
  width: 23px;
  height: 23px;
  z-index: 1;
  transform: translateY(-5px);
  border: 1px solid black;
  display: flex;
  border-radius: 50%;
  top: 35px;
  right: 28px;
}

.gallery__thumbs_item-video:hover::before {
  background: rgba(235, 55, 78, 0.64); 
  border: 2px solid white; 
}


.gallery__thumbs_item-video:hover::after {
  color: white;
  border-color: white;
}
  .gallery__thumbs_item img {
  width: 100%;
}

/******** Overview Styles ***************************************/
.overview {
}

.overview__header {
  padding: 0 1.2rem;
}

.overview__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.12;
  color: var(--color-neutral-black);
}

.overview__body {
  flex-grow: 1;
  display: grid;
  grid-template-columns: auto;
  grid-template-areas:
    'box1'
    'box3'
    'box2';
}

.overview__box1 {
  grid-area: box1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.2rem;
}

.overview__box2 {
  grid-area: box2;
  padding: 1.2rem;
  background: var(--color-neutral-100);
}

.overview__box3 {
  grid-area: box3;
  display: flex;
  flex-direction: column;
  border-top: 8px solid var(--color-neutral-100);
}

.overview__subTitleBox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  grid-area: subTitleBox;
}

.overview__subTitle {
  font-size: 13px;
  font-weight: 400;
  line-height: 2.17;
  color: var(--color-neutral-300);
}

.overview__subTitleSeprator {
  flex-grow: 1;
  height: 1px;
  background-color: var(--color-neutral-200);
}

.overview__describtionBox {
  border-right: 5px solid var(--color-secondary-500);
  filter: brightness(3);
  padding-right: 1rem;
}

.overview__shortDescription {
  font-size: 12px;
  line-height: 1.7;
  /* text-align: justify; */
}

  .overview__shortDescription p,
  .overview__shortDescription a,
  .overview__shortDescription lable,
  .overview__shortDescription strong,
  .overview__shortDescription span {
    font-size: 13px !important;
    line-height: 1.7;
    font-weight: 400 !important;
    /* text-align: justify; */
  }

  .overview__shortDescription a {
    color: var(--color-button-secondary);
  }


  .overview__shortDescription img,
  .overview__shortDescription video {
    width: 100%;
  }

.overview__featureSpecificationAttribute {
  padding-top: 1rem;
}

  .overview__featureSpecificationAttribute ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .overview__featureSpecificationAttribute li {
    padding-right: 0.5rem;
  }

    .overview__featureSpecificationAttribute li:first-child {
      padding-right: 0px;
    }

  .overview__featureSpecificationAttribute span {
    font-weight: bold;
  }

.overview__recomendationBox {
}

.overview__customAttributesBox {
  border-top: 1px solid var(--color-neutral-200);
}

.overview__attributesBox {
}

.overview__freeTransformsBox {
}

.overview__cartBox {
  display: flex;
  flex-direction: column;
  background: linear-gradient(0deg, hsla(240, 3%, 94%, 0.5), hsla(240, 3%, 94%, 0.5)), #fff;
  padding: 0.6rem 1.2rem;
  background: white;
}

.overview__cartBox--light {
  border: 1px solid var(--color-neutral-200);
  border-radius: 10px;
}

/* .overview__cartBox > div:nth-last-child(2) {
  border-bottom: none;
} */

.overview__buyBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 1rem 1rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 5px var(--color-neutral-400);
  gap: 1rem;
  z-index: 1;
}

@media screen and (max-width: 368px) {
  .overview__buyBox {
    padding: 0.5rem;
  }

  .overview__cartBox--availability {
    padding: 2rem 1.2rem;
  }
}

@media screen and (min-width: 768px) {

  .overview__shortDescription img,
  .overview__shortDescription video {
    width: auto;
    max-width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .overview {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .overview__header {
    padding: unset;
  }

  .overview__body {
    grid-template-columns: minmax(300px, auto) minmax(300px, 345px);
    grid-template-areas:
      'box1 box3'
      'box2 box3';
    gap: 1rem;
    grid-template-rows: auto 1fr;
    flex-grow: 1;
  }

  .overview__title {
    margin: 0;
    font-size: 19px;
    line-height: unset;
  }

  .overview__box1 {
    border-bottom: 1px solid var(--color-neutral-100);
    padding: unset;
  }

  .overview__box2 {
    all: unset;
    grid-area: box2;
  }

  .overview__box3 {
    gap: 1rem;
    border-top: none;
  }

  .overview__cartBox {
    background: linear-gradient(0deg, hsla(240, 3%, 94%, 0.5), hsla(240, 3%, 94%, 0.5)), #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-1);
    padding: 0.4rem 1rem;
  }

  .overview__cartBox--light {
    border: 1px solid #d0d0d0;
    box-shadow: 0 0 7px 2px #ddd;
    border-radius: var(--border-radius-3);
  }

  .overview__cartBox--sticky {
    display: block;
    position: sticky;
    top: 8.5rem;
    transition: top 0.6s;
  }

  /* .overview__cartBox > div:nth-last-child(2) {
    border-bottom: inherit;
  } */

  /* .overview__cartBox > div:last-child {
    border-bottom: none;
  } */

  /* .overview__cartBox:only-child div:last-child {
    border-bottom: none;
  } */

  /* .overview__cartBox > div:last-child {
    border-bottom: none;
  } */

  .overview__customAttributesBox {
    border-top: none;
  }

  .overview__buyBox {
    all: unset;
  }

  .overview__cartBox--availability {
    padding: 1.5rem 1.5rem;
  }
}

/******** Giftcard Styles ***************************************/
.giftcard {
  background: #fec52b;
  padding-bottom: 1.5rem;
  border-bottom: 8px solid var(--color-neutral-200);
}

.giftcard__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  display: flex;
  padding: 1.5rem 1rem 0;
}

.giftcard__row {
  display: grid;
  grid-template-columns: minmax(79px, auto) 1fr 10px;
  gap: 0.5rem;
  align-items: center;
}

.giftcard__label {
  text-align: left;
}

.giftcard__input {
  width: 100%;
  border: none;
  border-radius: var(--border-radius-1) !important;
  padding: 0 0.5rem;
  background: #fff;
}

textarea.giftcard__input {
}

.giftcard__row .required {
  color: var(--color-primary);
}

.giftcard__image {
  border-bottom: 2px solid #282828;
  position: relative;
  height: 100px;
}

  .giftcard__image svg {
    width: 80px;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto -14px;
  }

@media screen and (min-width: 1024px) {
  .giftcard {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-1);
    border-bottom: none;
  }
}

/******** attributes Styles ***************************************/
.attributes {
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.attributes__row {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid var(--color-neutral-100);
}

.attributes__groupbox {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

  .attributes__groupbox .disabled {
    opacity: 0.4;
    /* display: none; */
  }

  .attributes__groupbox .disabled {
    background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 1.5px), #e91e63 50%, rgba(0,0,0,0) calc(50% + 1.5px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 1.5px), #e91e63 50%, rgba(0,0,0,0) calc(50% + 1.5px), rgba(0,0,0,0) 100%);
  }

.attributes__content select option.disabled, .attributes__content select option:disabled {
  color: #cecece;
}

.attributes__groupbox_content {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.5em 0.4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-1);
}

.attributes__radioBox,
.attributes__checkBox {
  display: flex;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius-1);
  padding: 0.4rem 0.6rem;
  gap: 0.5rem;
}

.attributes__radioColor {
  position: relative;
  width: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
}

.attribute__radioColor_colorBox {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 27px;
  height: 27px;
}

.attribute__radioColor_color {
  display: flex;
  width: 27px;
  height: 27px;
  border-radius: 50%;
}

.attribute__radioColor_check {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.attributes__groupbox_content .attribute__radioColor_check:checked {
  filter: drop-shadow(0 0 5px #000);
}

/* .attribute__radioColor_check:checked:after {
  content: '';
  display: block;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
} */

.attributes__groupbox-gap1 {
  gap: 1rem;
}

.attributes__groupbox-list {
  flex-direction: column;
}

.attributes__imageBox {
  display: flex;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius-1);
  gap: 0;
}

.attributes__imageBox_label {
  padding: 0.4rem;
  border-left: 1px solid var(--color-neutral-300);
  display: flex;
  align-items: center;
}

.attributes__imageBox_content {
  padding: 0.5rem 0.7rem;
}

.attributes__imageBox_title {
}

.attributes__imageBox_imageContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-neutral-500);
}

.attributes__imageBox_image {
  width: auto;
  max-height: 100px;
}

.attributes__title {
  background: white;
}

.attributes__label {
  color: var(--color-neutral-900);
  font-size: 17px;
  font-weight: 500;
}

.attributes__required {
  color: var(--color-primary);
}

.attributes__description {
}

.attributes__content {
  /* padding: 0 1rem; */
  width: 100%;
}

.attributes .date-picker-wrapper {
  display: flex;
  gap: 0.5rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius-1);
  padding: 0 0.5rem 0 0.3rem;
}

  .attributes .date-picker-wrapper select {
    border: none;
    direction: ltr;
    text-align: right;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
  }

    .attributes .date-picker-wrapper select:last-child {
      border-left: none;
    }

    .attributes .date-picker-wrapper select option {
      direction: rtl;
    }

.attributes__uploader {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/******** reviews Styles ***************************************/
.reviews {
  display: flex;
  flex-direction: revert;
  gap: 0.5rem;
  align-items: center;
}

.reviews__rating {
  position: relative;
  height: 24px;
  width: 109px;
  display: flex;
  flex-direction: row-reverse;
}

.reviews__rating--single {
  position: relative;
  height: 13px;
  width: 10px;
}

.reviews__rating_progress {
  width: 0;
  height: 22px;
  background: var(--color-icon-warning);
}

.reviews__rating_mask {
  position: absolute;
  right: -2px;
  left: -2px;
  margin: 0 auto;
  height: 22px;
  background: url('../images/stars.svg');
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: cover;
  top: 0;
}

.reviews__rating--single .reviews__rating_mask,
.reviews__rating--single .reviews__rating_progress {
  height: 13px;
}

.reviews__links {
  color: var(--color-secondary-500);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.reviews__separator {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-neutral-300);
}

.reviews__noReview {
  color: var(--color-button-secondary);
}

.product__review {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  gap:1rem;
}

.product__review_right {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1rem;
  width: 100%;
}
  .product__review_right .btn{
      width:100%;
  }
.product__review_left {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position:relative;
  width:100%;
}

@media screen and (min-width:1000px){
  .product__review {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    gap: 1rem;
  }
  .product__review_right {
    flex: 0 0 300px;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 1rem 0 2.5rem;
    position: relative;
 
  }
/*  .product__review_left::before {
    content: ' ';
    height: 100%;
    border-right: 2px solid var(--color-border);
    position: absolute;
    right: -1.5rem;
  }*/
}

.review__total_rate {

  display:flex;
  align-items:center;
  gap:0.5rem;


}
.review__total_vote {
  font-size: 1.5rem;
  font-weight: bolder;
}
.review__total_start {
  display: flex;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--color-icon-low-emphasis);
  align-items:center;
}
.review__total_description {
  font-size: 0.7rem;
  color: var(--color-icon-low-emphasis);
  align-items: center;
}
.review__item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  gap: 1rem;
}

  .review__item:last-child {
    border-bottom: none;
    padding-bottom:0;
  }

.review__item_header {
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  align-items: baseline;
  gap: 1rem;
  color: var(--color-icon-low-emphasis);
  font-size: 0.8rem;
  position: relative;
}
.review__item_buy {
  color: var(--color-secondary-300);
  font-weight: bold;
  font-size: 0.9rem;
}
.review__item_date {
  margin-right: auto;
}
.review__item_title {
  font-weight: bold;
  font-size: 1rem;
}


.review__item_content {
  font-weight: normal;
  text-align: justify;
  font-size: 13px;
  color:var(--color-neutral-800);
}

.review__item_reply {
  margin-right: 1rem;
  border-right: 2px solid var(--color-border);
  padding-right: 1rem;
  display:flex;
  gap:0.5rem;
  color: var(--color-secondary-300);
}
  .review__reply_title{
      font-weight:bold;
      font-size:12px;
  }
.review__reply_content {
  font-size: 12px;
}

  .review__item_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    font-size: 0.7rem;
  }

.review__vote_item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--color-icon-low-emphasis);
}

  .review__vote_item svg {
    width: 24px;
    height: 24px;
    fill: var(--color-icon-low-emphasis);
  }

.arform--review textarea {
  min-height: 90px;
}

.review__item__ext {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-right:1rem;
  margin-top:-0.7rem;
}
  .review__item__ext:first-child{
      margin-top:0px;
  }
  .review__ext__title {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    font-weight: normal;
    font-size: 0.8rem;
    align-items: center;
  }

.review__item--like svg {
  width: 20px;
  height: 20px;
  fill: var(--color-icon-rating-4-5);
}
.review__item--like .review__ext__title {
  color: var(--color-icon-rating-4-5);
}
.review__item--dislike svg {
  width: 20px;
  height: 20px;
  fill: var(--color-icon-error);
}
.review__item--dislike .review__ext__title {
  color: var(--color-icon-error);
}
  .review__item__ext .reviews__rating {
    height: 17px;
    width: 81px;
  }
  .review__item__ext .reviews__rating_progress{height:17px;}
  .review__item__ext .reviews__rating_mask {
    background-size: contain;
    height: 17px;
  }
.review__item__ext.review__item--like .reviews__rating_progress {
  background-color: var(--color-icon-rating-4-5);
}
.review__item__ext.review__item--dislike .reviews__rating_progress {
  background-color: var(--color-icon-error);
}
/******** uploader Styles ***************************************/
.uploader {
}

.uploader__content {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.uploader__messages {
}

  .uploader__messages li.qq-upload-success {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
    direction: ltr;
    border-radius: var(--border-radius-1);
    padding: 0.76rem;
  }

/******** delivery Styles ***************************************/
.delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius-1);
  background: white;
}

.delivery__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 16px;
}

.delivery__title {
  font-size: 16px;
  font-weight: 500;
}

.delivery__text {
  font-size: 13px;
  color: var(--color-neutral-500);
}

@media screen and (min-width: 1024px) {
  .delivery {
    background: unset;
  }
}

/******** addToCart Styles ***************************************/
.addToCart {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.addToCart__panel {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.addToCart__btn {
  width: 100%;
  height: 50px;
}

.addToCart__enteredPrice {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-neutral-200);
}

.addToCart__enteredPrice_range {
  font-size: 13px;
  color: var(--color-neutral-600);
  padding: 0.5rem 0.5rem 0 0.5rem;
}

.addToCart__minQty {
  color: var(--color-neutral-500);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding-right: 0.3rem;
}

.addToCart__minQty_text {
  color: var(--color-neutral-500);
}

.addToCart__minQty_icon {
  width: 25px;
  height: 22px;
  padding-bottom: 0.4rem;
}

@media screen and (min-width: 1024px) {
  .addToCart {
    padding: 0.6rem 0;
  }

  .addToCart__panel {
    gap: 1rem;
  }
}

/******** inputBox Styles ***************************************/
.inputBox {
  background: white;
  display: flex;
  align-items: stretch;
  border-radius: 11px;
  border: 1px solid #f95c704a;
  height: 55px;
  overflow: hidden;
}

.inputBox__groupBox {
  display: flex;
  align-items: center;
  background: var(--color-neutral-100);
  border-radius: 0 11px 11px 0;
}

.inputBox__counterBox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.inputBox__counter {
  border: none;
  background: none;
  color: var(--color-neutral-600);
  font-size: 20px;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  flex-grow: 1;
  border-bottom: 1px solid #f95c704a;
}

.inputBox__counterBox .inputBox__counter:last-child {
  border-bottom: none;
}

.inputBox input {
  border: none;
  max-width: 40px;
  padding: 0;
  text-align: center;
  min-width: auto;
  font-size: 20px;
  color: var(--color-icon-primary);
  height: 100%;
  border-radius: 0 11px 11px 0;
  border-right: 1px solid #f95c704a;
  box-shadow: 3px 0px 3px #ddd;
}

.inputBox__btn {
  width: max-content;
  flex-grow: 1;
  border-radius: 10px 11px 11px 10px;
  font-size: 14px;
  padding: 0 0.5rem;
}

/******** prices Styles ***************************************/
.prices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.prices__title {
  display: none;
}

.prices__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.prices__oldPrice {
  font-size: 12px;
  color: var(--color-neutral-300);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

  .prices__oldPrice span {
    text-decoration: line-through;
  }

.prices__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 17px;
  font-weight: 500;
}

.prices__tag {
  font-size: 12px;
  background-color: var(--color-primary);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  color: var(--color-neutral-000);
  height: fit-content;
  text-decoration: none;
}

.prices__call {
  /* border: 1px solid var(--color-neutral-200); */
  border-radius: var(--border-radius-1);
  width: 100%;
  background: var(--color-neutral-000);
  box-shadow: 0 3px 17px var(--color-neutral-300);
  transition: 0.4s;
}

  .prices__call:hover {
    box-shadow: 0px 1px 3px var(--color-neutral-300);
    /* background: #232933; */
  }

.prices__call_link {
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

  .prices__call_link img {
    height: 35px;
  }

  .prices__call_link span {
    font-size: 17px;
    font-weight: 500;
    transition: 0.4s;
  }

@media screen and (max-width: 361px) {
  .prices__tag {
    font-size: 11px;
  }

  .prices__oldPrice span {
    font-size: 10px;
  }
}

@media screen and (min-width: 1024px) {
  .prices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-neutral-200);
    padding: 0.6rem 0;
  }

  .prices__title {
    display: block;
  }
}

/******** Shipping Styles ***************************************/
.shipping {
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0.6rem 0;
}

.shipping__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.shipping__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/******** Additional Styles ***************************************/
.additional {
}

.additional__row {
  border-bottom: 1px solid var(--color-neutral-200);
}

/******** vendor Styles ***************************************/
.vendor {
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0.6rem 0;
}

/******** SKU Styles ***************************************/
.sku {
  padding: 0.6rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sku__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.sku__label {
}

.sku__value {
}

/******** Availability Styles ***************************************/
.availability {
  padding: 0.6rem 0rem 0.2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.availability--is {
  flex-direction: row;
  padding: 0.2rem 0rem 0.6rem 0;
  gap: 0.3rem;
}

.availability__title {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .availability__title::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color-neutral-500);
    z-index: 0;
  }

  .availability__title span {
    font-size: 19px;
    font-weight: 500;
    color: var(--color-neutral-500);
    padding-right: 15px;
    padding-left: 15px;
    background-color: white;
    z-index: 1;
  }

.availability__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  gap: 1.5rem;
}

.availability__btnBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1rem;
  background: white;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.14), 0 -2px 2px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.availability__icon {
  width: 25px;
  height: 22px;
}

.availability--is .availability__icon {
  padding-bottom: 0.5rem;
}

.availability__label {
  color: var(--color-icon-secondary);
}

.availability__value {
  color: var(--color-neutral-700);
  font-size: 15px;
}

.availability--is .availability__value {
  font-size: 14px;
}

@media screen and (min-width: 1024px) {
  .availability__title span {
    background-color: hsl(0, 0%, 96.9%);
  }

  .availability__btnBox {
    all: unset;
    position: inherit;
  }
}

/******** Manufacturers Styles ***************************************/
.manufacturers {
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0.6rem 0;
  display: flex;
  justify-content: space-between;
}

.manufacturers__content {
  display: flex;
  gap: 0.5rem;
  width: 205px;
}

.manufacturers__value {
  width: 100%;
  flex-grow: 1;
}

.manufacturers__icon {
  width: 24px;
}

/******** tier Prices Styles ***************************************/
.tierPrices {
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tierPrices__content {
  display: flex;
  gap: 0.5rem;
}

.tierPrices__title {
}

.tierPrices__table {
  border-style: solid;
  border-width: 1px;
}

.tierPrices__table_th {
  border-style: solid;
  border-width: 1px;
  background: #3ecc5b;
  border-color: black;
  font-weight: 500;
  padding: 0.1rem 0;
}

.tierPrices__table_title {
  font-weight: 500;
  width: 50%;
  text-align: center;
  border-style: solid;
  border-width: 1px;
}

.tierPrices__table_value {
  text-align: center;
  width: 50%;
  border-style: solid;
  border-width: 1px;
}

/******** faqList Styles ***************************************/
.faqList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

.faqList--footer {
  padding-bottom: 0;
}

.faqList__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0;
}

.faqList__title {
  color: var(--color-neutral-400);
  font-size: 10px;
  text-align: center;
}

.faqList__icon {
  width: 42px;
  height: 42px;
}


@media screen and (min-width: 1024px) {
  .faqList__link {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .faqList__title {
    font-size: 12px;
    text-align: right;
  }

  .faqList--footer .faqList__icon {
    width: 60px;
    height: 60px;
  }
}

/******** tabMenu Styles ***************************************/
.tabMenu {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-neutral-200);
  flex-wrap: wrap;
}

.tabMenu__link {
  padding: 0.7rem 1rem;
  font-size: 13px;
  color: var(--color-neutral-500);
  font-weight: 500;
  margin-right: 1rem;
}
.tabMenu__link span{
    cursor:pointer;
}

.tabMenu__link--active {
  color: var(--color-icon-primary);
  position: relative;
}

  .tabMenu__link--active::after {
    content: '';
    border: 4px solid transparent;
    border-bottom: 4px solid var(--color-icon-primary);
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
  }

.tabMenu__body {
  display: none;
}

.tabMenu__body--active {
  display: block;
}

.tabMenu__link--select {
  color: var(--color-icon-primary);
  border: 4px solid transparent;
  border-bottom: 4px solid var(--color-icon-primary);
}

.tabMenu--center {
  justify-content: center;
}

.tabMenu__link--bold {
  font-size: large;
  font-weight: bold;
}
/******** Details Styles ***************************************/
.details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 4px solid var(--color-neutral-100);
}

.details__header {
  display: flex;
}

.details__title {
  font-size: 17px;
  font-weight: 700;
  border-bottom: 2px solid var(--color-icon-primary);
  padding: 0.5rem 0 0.5rem 2rem;
  margin-bottom: 0.5rem;
}

.details__body {
  position: relative;
  max-height: 400px;
  overflow: hidden;
  transition: 0.5s ease-out;
}

.details__body_collaps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7) 25%, rgba(215, 71, 71, 0) 100%);
}

.details__body p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-neutral-800);
}

details__body p,
.details__body a,
.details__body label,
.details__body strong,
.details__body span {
  font-size: 14px !important;
  line-height: 2.15;
  font-weight: 400 !important;
  text-align: justify;
}

.details__body a {
  color: var(--color-button-secondary);
}

.details__body strong {
  font-weight: 700 !important;
}

.details__body img,
.details__body video {
  width: 100%;
}

/* new style for detail body contents */
.details__body img {
  height: auto;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
}

.details__body h1,
.details__body h2,
.details__body h3,
.details__body h4,
.details__body h5,
.details__body h6 {
  background-color: whitesmoke;
  padding: 0.2rem 1rem;
  margin: 1rem 0;
  font-size: 16px;
  font-weight: 500;
}

.details__body p {
  line-height: 2.5;
}

.details__body ul {
  list-style: disc;
  font-size: 14px;
  margin-right: 1rem;
  font-weight: 500;
}

  .details__body ul li {
    padding-right: 0.5rem;
  }

.details__body table tr th {
  border: 1px solid #000;
  padding: 0.2rem 0.5rem;
  background-color: #ddd;
  font-weight: 500;
}

.details__body table tr td {
  border: 1px solid var(--color-border);
  padding: 0.2rem 0.5rem;
}

.details__body iframe {
  margin: 1rem 0 !important;
}

@media screen and (width >=1024px) {
  .details__body {
    padding: 1rem 0;
  }
}

.details__footer {
}

.details__link {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.details__link--up {
  display: none;
}

.details__link#collapsUp {
  display: none;
}

.details__link span {
  font-size: 14px;
  color: var(--color-button-secondary);
}

.details__link svg {
}

@media screen and (min-width: 1024px) {
  .details {
    padding: 1rem 0;
  }

  .details__body img,
  .details__body video {
    width: auto;
    max-width: 50%;
  }
}

/******** Details Styles ***************************************/
.productSpecs {
  border: 1px solid var(--color-neutral-200);
}

.productSpecs__groupName {
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 0.5rem;
}

.productSpecs__row {
  display: grid;
  border-bottom: 1px solid var(--color-neutral-100);
  grid-template-columns: 130px 1fr;
  /* padding: 0.5rem 1rem 0.5rem; */
}

.productSpecs__title {
  font-size: 14px;
  color: var(--color-neutral-500);
  border-left: 1px solid var(--color-neutral-100);
  padding: 0.5rem;
}

.productSpecs__value {
  font-size: 14px;
  color: var(--color-neutral-900);
  border-left: 1px solid var(--color-neutral-100);
  padding: 0.5rem;
}

  .productSpecs__title p,
  .productSpecs__value p {
    font-weight: unset;
    line-height: unset;
    color: inherit;
  }

.productSpecs__row .productSpecs__value:last-child {
  border-left: none;
}

.productSpecs .productSpecs__row:last-child {
  border-bottom: none;
}

/******** productTags Styles ***************************************/
.productTags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.productTags__item {
  background: #eaaeae;
  padding: 0.3rem 1.2rem 0.3rem 0.4rem;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.productTags__item_title {
  color: var(--color-neutral-800);
}

.productTags__item_total {
  color: #953232;
  background: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/******** cartBox Styles ***************************************/
.cartBox {
}

.cartBox__header {
  border-bottom: 1px dashed var(--color-neutral-300);
  display: flex;
  justify-content: space-between;
}

  .cartBox__header h2 {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-neutral-900);
  }

.cartBox__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cartBox__row {
  border: 1px solid var(--color-neutral-200);
  padding: 1rem;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cartBox__content {
  gap: 1rem;
}

.cartBox__row_item--list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.cartBox__row_item--details {
  border-top: 1px dashed var(--color-neutral-300);
  padding-top: 0.5rem;
}

.cartBox__picture img {
  width: 100%;
}

.cartBox__title {
  font-size: 17px;
  font-weight: 500;
  padding-bottom: 0.5rem;
  color: var(--color-neutral-900);
}

.cartBox__group {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: space-between;
}

.cartBox__sku {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .cartBox__sku label {
    color: var(--color-neutral-600);
    font-size: 15px;
  }

  .cartBox__sku span {
    color: var(--color-neutral-900);
    font-size: 13px;
  }

.cartBox__item {
  padding: 0.2rem 1rem;
}

.cartBox__item-bordered {
  border-top: 1px solid var(--color-neutral-400);
  padding: 0.5rem 1rem;
}

.cartBox__item label {
  font-size: 14px;
  color: var(--color-neutral-600);
}

.cartBox__item span {
  font-size: 19px;
  font-weight: 500;
}

.cartBox__discount {
  color: var(--color-neutral-400);
  font-size: 12px;
}

@media screen and (min-width: 1024px) {
  .cartBox__row {
    padding: 2rem;
  }

  .cartBox__content {
    column-gap: 1rem;
    row-gap: 0;
  }

  .cartBox__row_item--details {
    border-top: none;
    padding-top: 0;
  }
}

/******** Quantity Styles ***************************************/
.quantity {
}

.quantity__box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

  .quantity__box input {
    min-width: 50px;
    padding: 1px 5px;
    height: 36px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 3px;
    background: var(--color-neutral-000);
    width: 60px;
    text-align: center;
    box-shadow: 0 0 7px -1px var(--color-neutral-200);
    z-index: 1;
    font-size: 17px;
  }

.quantity__group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity__btn {
  border: 1px solid var(--color-neutral-300);
  justify-content: center;
  background: var(--color-neutral-100);
  z-index: 0;
}

.quantity__btn-uniq {
  border-radius: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-left: -5px;
  padding: 0 0.4rem 0 0.5rem;
}

.quantity__btn-right {
  border-left: none;
  border-radius: 0 10px 10px 0;
  height: 30px;
  display: flex;
  align-items: center;
  margin-left: -5px;
  padding: 0 0.5rem 0 0.7rem;
  font-size: 14px;
}

.quantity__btn-left {
  border-right: none;
  border-radius: 10px 0 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-right: -5px;
  padding: 0 0.8rem 0 0.7rem;
  font-size: 17px;
}


/******** checkout Styles ***************************************/
.page--checkout {
  background: white;
}

.page.checkout-page {
  margin-left: -1rem;
  margin-right: -1rem;
}

.checkout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*.checkout__item {
            padding: 10px 50px;
            box-sizing: border-box;
        }*/


.checkout__progress {
  grid-area: progress;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}


.checkout__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.checkout__summery {
  grid-area: summery;
}

.checkout__verify {
  grid-area: verify;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-right: -1rem;
}

@media screen and (min-width: 1200px) {
  .checkout {
    display: grid;
    grid-template-areas: 'progress progress progress' 'main main summery' 'main main verify' 'main main .';
    grid-template-columns: auto auto 300px;
    gap: 2rem;
  }

  .page.checkout-page {
    margin-left: 0;
    margin-right: 0;
  }

  .checkout__progress {
    padding: 1.2rem 0rem 0.2rem 0rem;
  }

  .checkout__main {
    grid-row-start: span 3;
    gap: 2rem;
  }

  .checkout__verify {
    position: sticky;
    top: 320px;
    width: auto;
    bottom: inherit;
    margin-right: 0;
    margin-top: -2rem;
  }

  .checkout__summery {
    position: sticky;
    top: 94px;
  }
}

/******** Block Checkout Styles ***************************************/

.block--checkout {
  display: flex;
  flex-direction: column;
  padding: 0;
}

  .block--checkout .block__header {
    background-color: var(--color-neutral-100);
    padding: 1rem;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.4) inset;
  }

  .block--checkout .block__title {
    font-weight: bold;
  }

  .block--checkout .block__icon svg {
    height: 20px;
    width: auto;
  }

  .block--checkout .block__body {
    background: white;
    padding: 1rem 1rem 0rem 1rem;
  }

.block--address .block__body {
  padding-top: 0rem;
}

@media screen and (min-width: 1200px) {
  .block--checkout {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-2);
    padding: 1rem;
  }

    .block--checkout .block__header--mobile {
      display: none;
    }

    .block--checkout .block__header {
      border-bottom: 0;
      box-shadow: none;
      border-top: none;
      background: none;
      padding: 0 0 0.5rem 0;
    }

  .block--address .block__header {
    border-bottom: 1px solid var(--color-border);
  }

  .block--checkout .block__body {
    background: inherit;
  }
}

/******** Address Checkout Styles ***************************************/

.checkout__addresses {
  display: flex;
  flex-direction: row;
}

.address__bar {
  border-left: 1px solid var(--color-border);
  width: 1rem;
}


.address__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-start;
  flex: 1 1 auto;
}

.address__item {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
  /*border-bottom: 1px solid var(--color-border);*/
  width: 100%;
  padding: 1rem 0.5rem;
}


  .address__item:last-child {
    border-bottom: none;
  }

.address__selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.address__icon {
  border-top: 2px dotted var(--color-border);
  width: 17px;
  margin: 0 -0.5rem;
}

.address__title {
  font-weight: bold;
}

.address__item::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid var(--color-border)
}

.address__item:last-child::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 23%;
  border-right: 1px solid var(--color-border)
}

.address__item::after {
  content: '';
  position: absolute;
  bottom: 0px;
  width: 96%;
  right: 1.2rem;
  height: 1px;
  border-bottom: 1px solid var(--color-border)
}

.address__item:last-child::after {
  display: none;
}


.address__text {
  flex: 1 1 auto;
  font-size: 13px;
}

.address__buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  align-self: flex-end;
}

.address--selected {
}

  .address--selected .address__icon {
    border-color: var(--color-primary);
  }

  .address--selected .address__selector input {
    accent-color: var(--color-primary);
  }

@media screen and (min-width: 1200px) {
  .address__item {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.5rem;
  }

    .address__item:last-child::before {
      height: 50%;
    }


    .address__item::after {
      width: 100%;
      right: 1.1rem;
    }
}
/******** Shiiping Checkout Styles ***************************************/
.shipping__body {
  display: flex;
  flex-direction: row;
}

.checkout__shipping {
}

.shipping__method {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  /* padding-top: 1rem;*/
}


/******** payment Checkout Styles ***************************************/


.payment__body {
  display: flex;
  flex-direction: row;
}

.checkout__payment {
}

.payment__method {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  /*  padding-top: 0.5rem;
*/
}

  .payment__method::before {
    border: 1px solid var(--color-border);
    position: absolute;
    height: 100%;
  }


/******** Checkout Buttin Styles     ***************************************/




.radiobox {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2);
  padding: 1rem;
  box-sizing: border-box;
  transition: 0.1s;
  cursor:pointer;
}
/*.radiobox--payment {
  border-radius: var(--border-radius-2);
  padding: 0.5rem;
  flex:0 0 auto;
}*/

.radiobox--payment {
  border-radius: 0;
  padding: .5rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

  .radiobox--payment:last-child {
    border-bottom: none;
  }

.radiobox--select {
  color: white;
  background-color: var(--color-primary);
  border-color: white;
}

.radiobox--payment.radiobox--select {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  color: black;
}

.radiobox--select .radiobox__header input {
  accent-color: var(--color-primary);
}

.radiobox--select .radiobox__icon svg * {
  fill: white;
}

.radiobox__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.radiobox--payment .radiobox__header {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.radiobox__header input {
  display: none;
}

.radiobox--payment .radiobox__header input {
  display: block;
}

.radiobox__icon img {
  width: 100%;
}

.radiobox--payment .radiobox__icon img {
  width: auto;
  height: 36px;
  filter: opacity(0.4);
}

.radiobox__title {
  font-size: 1.1rem;
  font-weight: bolder;
}

.radiobox--payment .radiobox__title {
  font-size: 0.8rem;
  font-weight: normal;
}

.radiobox__description {
  font-size: 0.8rem;
  padding-bottom: 1.1rem;
}

.radiobox--payment .radiobox__description {
  display: none;
}

.radiobox__price {
  position: absolute;
  bottom: 5px;
  left: 17px;
  font-weight: bold;
  font-size: 0.77rem;
  color: var(--color-primary);
}

.radiobox--select .radiobox__price {
  color: white;
}

.radiobox--payment.radiobox--select .radiobox__icon img {
  filter: none;
}

@media screen and (min-width:768px) {


  .radiobox--payment {
    border-radius: var(--border-radius-2);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1rem;
    flex: 0 0 calc(33% - 1rem);
    justify-content: space-between;
  }

    .radiobox--payment:last-child {
      border-bottom: 1px solid var(--color-border);
    }

    .radiobox--payment .radiobox__icon img {
      filter: opacity(0.7) grayscale(0.8);
    }


    .radiobox--payment .radiobox__header {
      flex-direction: row;
      justify-content: space-between;
    }

  .radiobox--shipping {
    flex: 1 1 calc(50% - 1rem);
  }

  .radiobox--payment.radiobox--select {
    color: white;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-2);
    border: 1px solid var(--color-border);
  }
}
/******** Payment Festival Styles     ***************************************/
.discount__body, .gifcard__body {
  padding-bottom: 1rem;
}

.payment__festival {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.payment__festival_input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: flex-start;
  gap: 1rem;
  flex: 1 1 100%;
}

  .payment__festival_input input {
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--border-radius-2);
    background: var(--color-neutral-000);
    width: 100%;
  }

  .payment__festival_input button {
    flex: 0 0 auto;
  }

.payment__festival_message {
  flex: 1 1 100%;
}

.payment__festival_code {
  flex: 0 0 auto;
  padding: 0.3rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2);
  background: var(--color-neutral-200);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

  .payment__festival_code button {
    border: none;
    background: none;
  }

    .payment__festival_code button svg {
      height: 10px;
      fill: var(--color-neutral-700);
    }

@media screen and (min-width:724px) {
  .discount__body, .gifcard__body {
    padding-bottom: 0rem;
  }

  .payment__festival_input input {
    width: 50%;
  }

  .payment__festival {
    gap: 0.5rem;
  }
}
/******** Booking Styles     ***************************************/
.booking__body {
  box-shadow: 0 12px 12px 0 hsla(0, 0%, 71%, 0.1);
  border: 1px solid #e7e7e7;
  background: #fff;
  border-radius: 15px;
  padding: 10px;
  margin-top: 1rem
}



/*----------------- booking Day ----------------------------------*/
.checkout__booking {
  display: grid;
}

.swiper--bookingDay .swiper-slide {
  min-height: 50px;
}

.bookingday {
  padding: 20px 0;
  position: relative;
}


.bookingDay__item {
}

  .bookingDay__item.swiper-slide-thumb-active .bookingDay__body {
    background: var(--color-primary);
    color: white;
  }

  .bookingDay__item::after {
    content: '';
    position: absolute;
    right: 50%;
    width: 1px;
    height: 20PX;
    border-right: 2px dotted var(--color-border);
  }

  /*  .bookingDay__item::before {
    top: -20px;
  }*/

  .bookingDay__item::after {
    bottom: -20px;
  }


  .bookingDay__item.swiper-slide-thumb-active::before, .bookingDay__item.swiper-slide-thumb-active::after {
    border-right-color: var(--color-primary);
  }

.bookingDay__body {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  padding: 10px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2);
  width: 117px;
}

.bookingDay__title {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -1px;
}

.bookingDay__day {
  font-size: 1.5rem;
  font-weight: 500;
}

.swiper--bookingDay .swiper-slide-thumb-active .bookingDay__item {
  color: #1080a6;
  border-bottom: 3px solid #1080a6;
}

.swiper--bookingDay .swiper-slide .bookingDay__item:hover {
  color: #1080a6;
  border-bottom: 3px solid #1080a6;
}
/*----------------- booking Time ----------------------------------*/

.swiper--bookingTime .swiper-slide {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2);
  align-items: start;
}


.bookingTime__item {
  display: flex;
  justify-content: start;
  gap: 0.5rem;
  font-size: 14px;
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;

}

  .bookingTime__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

.bookingTime__input input {
  accent-color: var(--color-icon-primary);
  cursor: pointer;
}

.bookingTime__title {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  cursor: pointer;
}

.bookingTime__des {
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
  .bookingTime__des label {
    cursor: pointer;
  }

  .bookingTime__action {
    border-radius: 5rem;
    color: red;
    background: rgba(245,127,23,.1);
    padding: 5px 10px;
    font-size: 11px;
  }

.bookingTime--disactive {
  opacity: 0.5;
}

@media screen and (min-width:1000px) {
  .bookingTime__item {
    justify-content: center;
    gap: 0.5rem;
    border: none;
    width: auto;
    padding-bottom: 0rem;
  }

  .bookingTime__title {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .swiper--bookingTime .swiper-slide {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-start;
  }
}

/******** Form Styles     ***************************************/
.arform {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.arform__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.arform__item {
  display: flex;
  gap: 0.4rem;
  flex-direction: column;
}

.arform__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.arform__input {
  display: flex;
  flex-direction: column;
  gap: 0.4rem
}

  .arform__input > span {
    color: var(--color-primary);
    font-size: 0.75rem;
  }

.arform__label .required {
  font-size: 1rem;
}

.arform--error .arform__input input, .arform--error .arform__input select {
  border-color: var(--color-primary);
}
.arform--error .arform__label {
  color: var(--color-primary);
}
@media screen and (min-width:1000px) {
  .arform__row {
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    justify-items: center;
  }

  .arform__item {
    flex: 1 1 0;
  }

  .arform--width-auto {
    flex: 0 0 auto;
  }
}

/******** Progress Styles ***************************************/
.progress__forward {
  border-top: 5px solid var(--color-neutral-200);
  height: 3px;
  left: 0;
  position: absolute;
  right: 8%;
  transition: 2s;
  background: white;
}

.progress__behind {
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  border-top: 5px solid var(--color-primary);
  background: white;
}


.progressbar {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  z-index: 1;
}

.progress__item {
  background: var(--color-neutral-000);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-radius: 15px;
  border: 1px solid #fff;
  transition: .3s;
  font-size: .5rem;
  padding: 0.5rem;
  align-items: center;
  gap: 0.5rem;
  cursor:default;
}

.progress__icon {
  display: flex;
  justify-content: center;
}

  .progress__icon svg {
    width: auto;
    height: 18px;
    fill: #dcdcdc;
  }

.progress__title {
  color: #707070;
  display: block;
  text-align: center;
  font-weight: bold;
}

.progress--active {
  box-shadow: 0px 0px 10px rgba(100,100,100,0.3);
  background-color: var(--color-primary);
}

  .progress--active .progress__icon svg {
    /*fill: var(--color-primary);*/
    fill: white;
  }

  .progress--active .progress__title {
    /*color: var(--color-primary);*/
    color: white;
    font-size: 0.6rem;
    font-weight: bolder;
  }



.progress--complete {
    cursor:pointer;
}

  .progress--complete .progress__icon svg {
    fill: var(--color-primary);
  }

  .progress--complete .progress__title {
    color: var(--color-primary);
  }

@media screen and (min-width: 1200px) {

  .progress__item {
    justify-content: center;
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--color-border);
    align-items: center;
    gap: 1rem;
    flex-direction: row;
    width: max-content;
  }

  .progress__title {
    font-size: 0.75rem;
    font-weight: bolder;
  }

  .progress--active {
    width: max-content;
  }

    .progress--active .progress__title {
      font-size: 0.8rem;
      font-weight: bolder;
    }
}


/*.progress {
  background: #f2f2f2;
  padding: 1rem 0 0;
}

.progress__content {
  display: flex;
  align-items: center;
}

.progress__content li {
  flex-grow: 1;
  flex-basis: 1fr;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 25px 1rem 0;
  clip-path: polygon(30px 0%,
      100% 0,
      calc(100% - 30px) 50%,
      100% 100%,
      30px 100%,
      0% 50%);
  margin-right: -45px;
  margin-left: 20px;
  font-weight: 500;
  font-size: 15px;
  color: var(--color-neutral-600);
}

.progress__content li:first-child {
  margin-right: 0px;
  padding: 1rem 0;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%);
}

.progress__content li:last-child {
  margin-left: 0px;
  clip-path: polygon(100% 0, calc(100% - 30px) 50%, 100% 100%, 0 100%, 0 0);
}

.progress__content li.active-step {
  background: var(--color-icon-primary);
  box-shadow: 0 0 5px 5px var(--color-neutral-800);
  color: white;
}

.progress__content li.inactive-step {
  background: var(--color-neutral-200);
}

@media screen and (min-width: 1024px) {
  .progress {
    padding: 3rem 0 0;
  }
}*/

/******** CheckOut Attribute Styles ***************************************/
.chkOutAtt {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

  .chkOutAtt > dl {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .chkOutAtt dt label {
    font-weight: 500;
    font-size: 15px;
  }

  .chkOutAtt dt span {
    color: var(--color-icon-primary);
  }

.chkOutAtt__selected {
  color: var(--color-neutral-500);
  padding-right: 0.7rem;
  font-size: 13px;
  margin: unset;
}

/******** Order Summary Styles ***************************************/
.orderSummary__option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /*  border-bottom: 1px solid var(--color-neutral-200);
*/ padding: 0.6rem 0;
}

.orderSummary__option_title span {
  font-weight: 500;
  font-size: 15px;
}

.orderSummary__option_inputBox {
  min-width: 50px;
  height: 44px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  background: var(--color-neutral-000);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

  .orderSummary__option_inputBox input {
    height: 30px;
    border: none;
  }

  .orderSummary__option_inputBox button {
    border: none;
    border-radius: 5px 0 0 5px;
    background-color: var(--color-icon-primary);
    min-width: max-content;
    flex-grow: 1;
    height: 100%;
    padding: 0 10px;
    color: white;
  }

.orderSummary__option_message {
  color: var(--color-neutral-500);
  padding-right: 0.7rem;
  font-size: 13px;
}

.orderSummary__table {
  /* border-style: solid;
  border-width: 1px; */
}

  .orderSummary__table td {
    text-align: center;
    width: 50%;
    border: 1px solid rgb(226, 226, 226);
    border-right: none;
    border-top: none;
    padding: 0.3rem;
    font-size: 13px;
  }

    .orderSummary__table td:last-child {
      border-left: none;
      border-top: none;
    }

.orderSummary__table_th {
  /* background: #f0f0f0; */
  font-weight: 700;
}

  .orderSummary__table_th td {
    font-size: 13px;
    border-bottom: none;
  }

.orderSummary__buyBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 1rem 1rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 5px var(--color-neutral-400);
  gap: 1rem;
  z-index: 2;
}

.orderSummary__chkBtn {
  width: max-content;
  flex-grow: 1;
  border-radius: 10px 11px 11px 10px;
  font-size: 14px;
  padding: 1rem;
  border: none;
}

.orderSummary__option__discoutCode {
  border-radius: var(--border-radius-2);
  background: var(--color-neutral-300);
  padding: 0.2rem 1rem 0.2rem 0.7rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: max-content;
}

  .orderSummary__option__discoutCode span {
    color: var(--color-neutral-700);
    font-size: 13px;
  }

  .orderSummary__option__discoutCode button {
    /* background: none; */
    border: none;
    padding: 0;
    background: none;
    display: flex;
  }

    .orderSummary__option__discoutCode button svg {
      height: 15px;
    }

.orderSummary__noData {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
}

@media screen and (min-width: 1024px) {
  .orderSummary__buyBox {
    padding: 1rem 0 0.5rem;
    position: initial;
    background: none;
    box-shadow: none;
  }
}

/*************** Login Styles ****************************************/
.login {
  min-width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.login__back {
  position: absolute;
  top: 37px;
  right: 33px;
  display: flex;
  color: var(--color-neutral-700);
  cursor: pointer;
}

  .login__back svg {
    width: 30px;
    height: 28px;
    fill: var(--color-icon-high-emphasis);
  }

.login__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.login__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login__title {
  font-size: 20px;
  font-weight: 500;
}

.login__logo {
  width: 156px;
  display: flex;
  justify-content: center;
}

.login__link {
  color: blueviolet;
  text-decoration: dashed;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login__timer {
  color: #8a2ce1;
}

@media screen and (min-width: 480px) {
  .login {
    min-width: 400px;
    background: var(--color-neutral-000);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-1);
  }
}

/******** Tooltip Styles *************************************/
.tooltiptext {
  display: none;
}

@media screen and (min-width: 1024px) {

  /* Tooltip container */
  .tooltip {
    position: relative;
    display: flex;
  }

  .tooltiptext {
    display: initial;
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: max-content;
    background-color: var(--color-neutral-700);
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    right: 128%;
    bottom: auto;
    top: -5px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tooltip-left .tooltiptext {
  }

  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-neutral-700);
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
}

/************************** ModalBox styles **************************************/
.modalBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: auto;
  /* background: #1c1e2282; */
  /* backdrop-filter: blur(62px); */
  background: #d3d3d382;
  backdrop-filter: blur(29px);
  z-index: 10;
}

.modalBox__closeBtn {
  position: absolute;
  left: 2.5rem;
  top: 2.5rem;
  width: 40px;
  height: 40px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(255, 255, 255, 0.2); */
  border-radius: 50%;
  box-shadow: 0px 5px 10px 0px #23293357;
  cursor: pointer;
  transition: 0.3s;
}

  .modalBox__closeBtn:hover {
    box-shadow: 0px 1px 2px 0px #23293357;
  }

  .modalBox__closeBtn path {
    fill: var(--color-neutral-800);
  }

.modalBox__title {
  color: white;
  font-size: 1.5rem;
}

.modalBox__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #242a33;
  background: #232b38;
  border-radius: 30px 30px 0 0;
  padding: 1.2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(100vh);
  transition: all 0.3s ease-in-out;
}

.modalBox--profile .modalBox__content {
  height: 90vh;
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 7rem;
  background: url('../img/back-transparent.svg');
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 46px -12px var(--color-neutral-400);
}

.modalBox__content-show {
  transform: translateY(0vh);
  transition: all 0.3s ease-out;
}

.modalBox__header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modalBox__title {
  font-size: 1.9rem;
  color: var(--color-neutral-800);
}

.modalBox__body {
}

.modalBox--profile .modalBox__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
}

.modalBox__footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 700px) {
  .modalBox {
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
  }

  .modalBox__content {
    position: relative;
    width: 400px;
    background: #242a33;
    border-radius: 1.8rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
  }
}

.modalBox--popup .modalBox__content {
  background: white;
  max-height: 100%;
  border-radius: 0;
  padding: 0;
}


.modalBox--popup .modalBox__header {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  gap: 1rem;
}

.modalBox--popup .modalBox__title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-neutral-800);
  flex: 1 1 auto;
}

.modalBox--popup .modalBox__icon {
  flex-basis: 25px;
}

  .modalBox--popup .modalBox__icon svg {
    width: 100%;
    height: auto;
  }

.modalBox--popup .modalBox__title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-neutral-800);
  flex: 1 1 auto;
}

.modalBox--popup .modalBox__tools {
  flex-basis: 18px;
}

  .modalBox--popup .modalBox__tools svg {
    width: 100%;
    height: auto;
  }




.modalBox--popup .modalBox__footer {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  gap: 1rem;
}

@media screen and (min-width: 700px) {
  .modalBox--popup .modalBox__content {
    border-radius: 1.8rem;
    max-height: 70%;
    width: 50%;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  }

  .modalBox--popup .modalBox__body {
    padding: 1rem 25px;
  }
}


.modalBox--popup .modalBox__main {
  scroll-behavior: smooth;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 70%;
  overflow: auto;
  padding: 1.5rem;
}

  .modalBox--popup .modalBox__main::-webkit-scrollbar {
    width: 8px
  }

  .modalBox--popup .modalBox__main::-webkit-scrollbar-track {
    background-color: var(--color-neutral-100)
  }

  .modalBox--popup .modalBox__main::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-300);
    border-radius: 16px;
    width: 8px
  }

  .modalBox--popup .modalBox__main:focus,
  .modalBox--popup .modalBox__main:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none
  }

/************************** ShareBox styles **************************************/
.ShareBox {
}

.shareBox__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.shareBox__icon {
  height: 50px !important;
  min-height: 50px !important;
  width: 50px !important;
}

.shareBox__name {
  color: white;
  font-size: 13px;
}

.shareBox__title {
  color: white;
  font-size: 16px;
}

.shareBox__btn {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.3rem;
  color: white;
  width: 100%;
  border-radius: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
  font-size: 15px;
  cursor: pointer;
}

.shareSwiper-pagination {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.shareSwiper .swiper-wrapper {
  padding: 1.2rem 0 0.5rem;
}

.shareSwiper .swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #b5b5b5);
}

/********************* Details Page Styles ********************************/
.detailsPage {
}

.detailsPage__content {
  padding: 2rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detailsPage__header {
  display: flex;
  flex-direction: column;
}

.detailsPage__body {
}

.detailsPage__title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailsPage__actions {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detailsPage__action img {
  height: 30px;
}

/********************* GroupBox Styles ********************************/
.groupBox {
  border: 1px solid var(--color-neutral-200);
  padding: 1.5rem;
  position: relative;
}

.groupBox__title {
  position: absolute;
  top: -15px;
  right: 20px;
  background: white;
  padding: 0 0.5rem;
  font-weight: 500;
  font-size: 16px;
}

.groupBox__items {
  display: flex;
  column-gap: 2rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.groupBox__item {
}

/* @media screen and (min-width: 1024px) {
  .groupBox__items {
    flex-direction: row;
  }
} */

/********************************** Table **********************************/
.table {
  border-collapse: collapse;
  border-bottom: none;
  width: 100%;
  border: 1px solid var(--color-neutral-200);
}

.table--total {
  width: max-content;
  width: 100%;
}

.table__header {
}

  .table__header tr {
    background: rgb(231, 231, 231);
  }

.table--total tr td {
  /* font-size: 14px; */
}

  .table--total tr td:last-child {
    background: rgb(240, 239, 239);
    font-weight: bold;
  }

.table__header th {
  padding: 0.5rem 0.2rem;
  text-align: center;
  border-left: 1px solid #ddd;
}

  .table__header th:last-child {
    border-left: none;
  }

.table tbody {
}

  .table tbody tr {
    border-bottom: 1px solid #ddd;
  }

    .table tbody tr:last-child {
      border-bottom: none;
    }

    .table tbody tr td {
      padding: 0.4rem 1rem;
      border-left: 1px solid #eee;
    }

      .table tbody tr td:last-child {
        border-left: none;
      }

.table__link {
  color: var(--color-secondary-300);
}

.table__actions {
  display: flex;
  padding: 1rem;
  justify-content: center;
}

/********************************** ticket Styles**********************************/

.ticket {
  display: flex;
  border: 1px solid var(--color-neutral-200);
  background: whitesmoke;
}

.ticket__header {
  background: var(--color-icon-success);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  min-width: 120px;
}

.ticket__icon {
  width: 60px;
  height: 40px;
}

.ticket__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ticket__items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ticket__item {
}

.ticket__label {
  font-size: 13px;
  color: gray;
  text-align: center;
}

.ticket__value {
  font-weight: 500;
  font-size: 15px;
}

.ticket__header .ticket__label {
  color: whitesmoke;
  font-size: 12px;
}

.ticket__header .ticket__value {
  color: white;
  font-size: 13px;
  text-align: center;
}

/**************** Status styles ************************/
.status--white {
  background: var(--color-icon-white);
}

  .status--white .ticket__icon path {
    fill: var(--color-secondary-300);
  }

  .status--white .ticket__label {
    color: var(--color-secondary-300);
  }

  .status--white .ticket__value {
    color: var(--color-icon-success);
  }

.status--blue {
  background: var(--color-secondary-300);
}

.status--green {
  background: var(--color-icon-success);
}

.status--red {
  background: var(--color-icon-error);
}

/*********** categories styles ****************************/
.categories {
}

.categories__content {
}

.categories__grid {
  display: grid;
}

.categories__grid-x4 {
  grid-template-columns: 1fr;
}

.categories__grid-2x2 {
  grid-template-columns: 1fr 1fr;
}

.categories__cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  padding: 1rem;
}

  .categories__cards:last-child {
    border-bottom: none;
  }

.categories__cards_header h4 {
  color: var(--color-neutral-800);
  font-size: 16px;
}

.categories__cards_header p {
  font-size: 12px;
  font-weight: 400;
  line-height: 2.17;
  color: var(--color-neutral-500);
}

.categories__cards_body {
}

.categories__cards_footer {
}

.categories__cards_link {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

  .categories__cards_link span {
    color: var(--color-button-secondary);
  }

.category__description_collaps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.7) 25%, rgba(215, 71, 71, 0) 100%);
}

@media screen and (min-width: 768px) {
  .categories__cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

    .categories__cards:last-child {
      border-left: none;
    }
}

@media screen and (min-width: 1024px) {
  .categories__grid-x4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .categories__cards {
    border: none;
    border-left: 1px solid var(--color-border);
  }
}

@media screen and (min-width: 1200px) {
  .categories__cards:last-child {
    border-left: none;
  }
}

/****************** Special Block ***************************************************/
.specialBlock {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.specialBlock__heading {
  background: url('../images/Icons/plus-widget.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 100%;
  min-height: 355px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.specialBlock__title {
}

.specialBlock__text {
  color: white;
  font-size: 14px;
  margin-top: 9px;
}

.specialBlock__link {
  border-radius: var(--border-radius-1);
  padding: 0.3rem 1rem;
  width: max-content;
  color: white;
  border: 1px solid white;
  margin-top: 0.6rem;
  font-size: 12px;
}

.specialBlock__content {
  background: white;
  flex-grow: 1;
  border-radius: var(--border-radius-1);
}

.specialBlock__grid {
}

@media screen and (min-width: 1024px) {
  .specialBlock {
    flex-direction: row;
  }

  .specialBlock__heading {
    padding-top: 24px;
    padding-right: 24px;
    gap: 0.5rem;
  }

  .specialBlock__text {
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .specialBlock__heading {
    background-size: 372px 279px;
    max-width: 390px;
  }
}


/****** digi scroll styles *****************************************/

html {
  scroll-behavior: smooth
}

body::-webkit-scrollbar {
  width: 8px
}

body::-webkit-scrollbar-track {
  background-color: var(--color-neutral-100)
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-300);
  border-radius: 16px;
  width: 8px
}

:focus,
:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none
}

/*************** SearchBlock ******************************************/
.bannerImage {
  min-height: 300px;
  background-color: rgb(190, 190, 190);
}

.searchBlock {
  background: rgba(255, 255, 255, 0.445);
  /* margin-top: -70px; */
  min-height: 200px;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--color-border);
}

.searchBlock__level1 {
  min-height: 70px;
  padding: 20px 0 0;
  border-bottom: 1px solid var(--color-border);
}

.searchBlock__categories {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  margin: 0 1rem;
  padding-bottom: 1rem;
}

.searchBlock__category {
}

.searchBlock__category_link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: stretch;
  height: 100%;
  padding: 0 1rem 0.5rem;
  border: 5px solid transparent;
}

  .searchBlock__category_link.active {
    border-bottom: 5px solid var(--color-icon-primary);
  }

  .searchBlock__category_link svg,
  .searchBlock__category_icon {
    flex-grow: 1;
    width: 70px;
    height: 70px;
    background-color: whitesmoke;
  }

.searchBlock__category_title {
  font-weight: 700;
}

.searchBlock__groups {
  display: flex;
  gap: 0;
  overflow-x: auto;
  margin: 0 1rem;
}

.searchBlock__level2 {
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  /* justify-content: center; */
}

.searchBlock__group {
  display: flex;
  align-items: center;
  display: flex;
  padding-bottom: 1rem;
}

.searchBlock__group_link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: stretch;
  height: 100%;
  border: 5px solid transparent;
  padding: 0.3rem 1rem;
}

  .searchBlock__group_link.active {
    border: 1px solid var(--color-border);
    border-radius: 50px;
    background-color: var(--color-neutral-100);
  }

.searchBlock__group_title {
  font-weight: 700;
  min-width: max-content;
}

.searchBlock__level3 {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 1.5rem 1.5rem;
  gap: 1rem;
}


@media screen and (min-width:768px) {
  .searchBlock__level1 {
    padding: 20px 20px 0 20px;
  }

  .searchBlock__categories {
    justify-content: center;
    margin: unset;
    padding: unset;
  }

  .searchBlock__groups {
    justify-content: center;
    overflow-x: auto;
    padding: 1rem 3rem 0;
    margin: unset;
    gap: 2rem;
  }
}

/* 
.searchBlock__items {
  display: flex;
  background: red;
}

.searchBlock__item {
  padding: 0.5rem 0;
}

.searchBlock__itemBox {
  position: relative;
  border: 1px solid var(--color-neutral-300);
  padding: 0.5rem;
  border-radius: var(--border-radius-1);
}

.searchBlock__itemBox .searchBlock__itemBox_input {
  font-size: 13px;
  border: none;
  height: 30px;
  background-color: transparent;
}

.searchBlock__itemBox_title {
  position: absolute;
  top: -0.7rem;
  right: 1rem;
  padding: 0 0.5rem;
  background: white;
  font-size: 13px;
  color: gray;
}

.searchBlock__item_btn {
  width: 200px;
  height: 47px;
} */

/*********** News Block ***********************************/
.newsHome__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  padding: 0 0.7rem;
}

.newsHome__items-list {
  gap: 1rem;
}

.newsHome__item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius-1);
  overflow: hidden;
}

.newsHome__items-list .newsHome__item {
  border-radius: var(--border-radius-3);
}

.newsHome__item_content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
}

.newsHome__item_image {
  /* min-height: 200px; */
  background-color: gray;
  /* width: 200px; */
  float: left;
}

.newsHome__item_title {
  font-weight: 400;
  font-size: 12px;
  max-height: 45px;
  height: 45px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  line-height: 2;
  white-space: nowrap;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.newsHome__item_date {
  align-self: flex-end;
  font-weight: 400;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.newsHome__item_summery {
  font-size: 12px;
  color: var(--color-neutral-700);
  max-height: 70px;
  height: 70px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  line-height: 2;
  white-space: nowrap;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 1024px) {
  .newsHome__items {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0;
  }

  .newsHome__items-list {
    gap: 2rem;
  }
}

/************* NewsDetail ***********************************/
.newsDetail {
  padding: 0 1rem;
  gap: 1rem;
}

.newsDetail__heading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}

.newsDetail__title {
  font-size: 16px;
  font-weight: 500;
}

.newsDetail__date {
  font-size: 12px;
  color: var(--color-neutral-600);
}

.newsDetail__body {
}

  .newsDetail__body h1,
  .newsDetail__body h2,
  .newsDetail__body h3,
  .newsDetail__body h4,
  .newsDetail__body h5,
  .newsDetail__body h6 {
    background-color: whitesmoke;
    padding: 0.2rem 1rem;
  }


.newsDetail__content {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 14px;
  color: var(--color-neutral-700);
  text-align: right;
  line-height: 2;
  border-bottom: 1px solid var(--color-border);
}

  .newsDetail__content img {
    height: auto;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
  }

  .newsDetail__content h1,
  .newsDetail__content h2,
  .newsDetail__content h3,
  .newsDetail__content h4,
  .newsDetail__content h5,
  .newsDetail__content h6 {
    background-color: whitesmoke;
    padding: 0.2rem 1rem;
    margin: 1rem 0;
    font-size: 16px;
    font-weight: 500;
  }

  .newsDetail__content p {
    line-height: 2.5;
  }

  .newsDetail__content ul {
    list-style: disc;
    font-size: 14px;
    margin-right: 1rem;
    font-weight: 500;
  }

    .newsDetail__content ul li {
      padding-right: 0.5rem;
    }

  .newsDetail__content table tr th {
    border: 1px solid #000;
    padding: 0.2rem 0.5rem;
    background-color: #ddd;
    font-weight: 500;
  }

  .newsDetail__content table tr td {
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.5rem;
  }





  .newsDetail__content .newsDetail__image {
    all: unset;
    width: 100%;
    height: auto;
    background-color: var(--color-neutral-400);
    margin-bottom: 1rem;
  }

@media screen and (width >=1024px) {
  .newsDetail {
    padding: 1rem 0;
  }

  .newsDetail__title {
    font-size: 18px;
  }

  .newsDetail__content .newsDetail__image {
    width: 300px;
    height: auto;
    float: left;
    margin-right: 1rem;
  }
}

/******************* Comment ****************************************/
.comment {
  margin-top: 2rem;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-3);
  padding: 1rem;
  background-color: #f7f7f7;
}

.comment__title {
  font-size: 18px;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.comment__notif {
  font-size: 13px;
  color: var(--color-neutral-700);
  text-align: right;
  margin-top: 1rem;
}

.comment__content {
  display: flex;
  flex-direction: column;
}

.comment__fields {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem 0;
  gap: 1rem;
}

.comment__field {
  display: grid;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  grid-template-columns: 50px 1fr;
}

.comment__field_inputs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.comment__field label {
  text-align: left;
}

.comment__field textarea {
  min-height: 100px;
}

.comment__buttons {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}

  .comment__buttons .btn {
    width: 100%;
  }

@media screen and (width >=1024px) {
  .comment {
    width: 50%;
  }

  .comment__buttons .btn {
    width: initial;
  }
}

/************ Blogs ****************************/
.section--blogs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section--blogs-list {
}

.section--blogs__header {
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

  .section--blogs__header span {
    display: none;
  }

.section--blogs__title {
  font-size: 20px;
  padding: 0;
  font-weight: 700;
}

.section--blogs__rss {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  transition: 0.3s;
}

  .section--blogs__rss:hover {
    color: var(--color-icon-primary);
  }

@media screen and (width >1024px) {
  .section--blogs__header {
    flex-direction: column-reverse;
    width: 100%;
    padding: 0;
    flex-direction: row;
  }

    .section--blogs__header span {
      display: block;
      width: 80px;
    }
}

.blogs {
}

.blogs__list {
  padding: 0 1rem;
}

.blogs__sidebar {
  padding: 0 1rem;
  position: relative;
}

.blogs__tools {
  position: sticky;
  top: 122px;
}

.blogs__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (width >=1024px) {
  .blogs__list {
    border-left: 1px solid var(--color-border);
    padding: 0 0 0 1rem;
  }

  .blogs__sidebar {
    padding: 0 1rem 1rem 0;
  }
}

.blog {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-3);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.blog__imageBox {
  width: 100%;
}

.blog__image {
  background-color: gray;
  width: 100%;
}

@media screen and (width >768px) {
  .blog {
    flex-direction: row;
  }

  .blog__imageBox {
    max-width: 285px;
    overflow: hidden;
  }

  .blog__image {
    width: 285px;
    height: auto;
  }
}

.blog__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  width: 100%;
}

.blog__title {
  font-size: 14px;
  font-weight: 700;
}

.blog__date {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.blog__body {
  font-size: 12px;
  color: var(--color-neutral-700);
  /* max-height: 70px;
  height: 70px; */
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  line-height: 2;
  white-space: nowrap;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog__details {
  width: 100%;
}

.blog__tags {
}

.blog__buttons {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.blog__comments,
.blog__more {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-neutral-800);
  transition: 0.3s;
}

  .blog__comments:hover,
  .blog__more:hover {
    color: var(--color-icon-primary);
  }

.blog__archive {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog__archive_title {
  font-size: 16px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3rem;
}

.blog__archive_list {
}

.blog__archive_items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog__archive_item {
  border: 1px solid var(--color-border);
  padding: 1rem;
  border-radius: var(--border-radius-3);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.blog__archive_number {
  font-size: 16px;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-border);
}

.blog__archive_sublist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog__archive_month {
  padding-right: 0.5rem;
  border-right: 7px solid var(--color-neutral-200);
  transition: 0.3s;
}

  .blog__archive_month:hover {
    border-right: 7px solid var(--color-neutral-500);
  }

.blogDetail {
}

.blogDetail__image {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
}

.blogDetail__title {
  font-size: 18px;
  font-weight: 700;
}

.blogDetail__date {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-neutral-500);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.blogDetail__body {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 14px;
  color: var(--color-neutral-700);
  text-align: right;
  line-height: 2;
}

  .blogDetail__body img {
    height: auto;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
  }

  .blogDetail__body h1,
  .blogDetail__body h2,
  .blogDetail__body h3,
  .blogDetail__body h4,
  .blogDetail__body h5,
  .blogDetail__body h6 {
    background-color: whitesmoke;
    padding: 0.2rem 1rem;
    margin: 1rem 0;
    font-size: 16px;
    font-weight: 500;
  }

  .blogDetail__body p {
    line-height: 2.5;
  }

  .blogDetail__body ul {
    list-style: disc;
    font-size: 14px;
    margin-right: 1rem;
    font-weight: 500;
  }

    .blogDetail__body ul li {
      padding-right: 0.5rem;
    }

  .blogDetail__body table tr th {
    border: 1px solid #000;
    padding: 0.2rem 0.5rem;
    background-color: #ddd;
    font-weight: 500;
  }

  .blogDetail__body table tr td {
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.5rem;
  }

.blog__details img {
  width: 100%
}

/********************************************************/
.searchBlock__items {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.searchBlock__item {
}

.searchBlock__item--group {
  position: relative;
  border: 1px solid var((--color-border));
}

.searchBlock__item_title {
  position: absolute;
  top: -8px;
  right: 1rem;
  background: white;
  padding: 0 0.5rem;
}

.searchBlock__item_content {
  padding: 1rem 0.5rem;
}

.searchBlock__item--group .searchBlock__item_content {
  padding: 1rem;
  display: flex;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 11px;
}

.searchBlock__itemBox {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.searchBlock__itemBox_input {
}

.searchBlock__itemBox_title {
  min-width: max-content;
}

.searchBlock__item_btn {
  min-width: 160px;
}

.padding-right-8 {
  padding-right: 8px;
}


/**************** searchPanel ***************************/
.searchPage {
  margin-bottom: 1rem;
}

.searchPanel {
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  margin: 2rem 0;
}

.searchPanel__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.searchPanel__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.searchPanel__basic {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.searchPanel__basic_input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.searchPanel__basic_reversed {
}

.searchPanel__advanced {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.searchPanel__advanced_input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.searchPanel__advanced_reversed {
}

/**************** Compare Page ***************************/


.page--compare {
  position: relative;
}
  .page--compare .page__title h1{
      font-size:1.5rem;
      text-align:center;
  }


.product__compare {
  display: flex;
  flex-direction: column;
  direction: rtl;
  
  background:white;

}
.compare__block {
  
}
.compare__block_body {
  display: flex;
  flex-direction: row;
  direction: rtl;

}
.compare__block_header {
  font-weight: bold;
  font-size: 1rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem;
}

.compare__block--first{position:sticky;top:72px;}
.compare__block--group {
  justify-content: center;
  border: 0;
  display: flex;
  border-top: 1px solid var(--color-border);
}
.compare__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #fff;
  padding: 1rem;
  border-left: 1px solid var(--color-border);
}


.compare__block--group .compare__item{border:none;}
.compare__block--group .compare__block_header {
  font-weight: bolder;
  font-size: 1.2rem;
  border: none;
}

.compare__item:last-child {
  border: none;
}
  .compare__header {
    display: flex;
    gap: 0.5rem;
    align-content: center;
    flex-direction: column;
    background: white;
    align-items: center;
    position: relative;
  }

.compare__remove{
    position:absolute;
    top:1px;
    left:0px;

}
.compare__picture img {
  height: 200px;
  width: auto;
}
.compare__remove .btn--remove {
  display: inline-block;
  border: 0;
  background: url('../images/remove.png') right center no-repeat;
  padding: 0 18px 0 0;
  font-size: 12px;
  color: #666
}

.compare__remove .btn--remove:hover, .compare__remove .btn--remove:focus {
  color: #4ab2f1
}


.page--compare .clear-list {
  display: inline-block;
  margin: 0 0 20px;
  background-color: #4ab2f1;
  padding: 10px 15px;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase
}

    .page--compare .clear-list:hover, .page--compare .clear-list:focus {
      background-color: #248ece
    }

  .page--compare .table-wrapper {
    margin: 0 0 30px;
    padding: 0 0 1px
  }

.compare-products-table td {
  min-width: 150px;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 20px;
  text-align: right;
  vertical-align: top;
  color: #444
}

  .compare-products-table td:first-child {
    min-width: 0
  }

  .compare-products-table td label {
    font-weight: normal;
    color: #777
  }

.compare-products-table .specification-group td {
  border: 0;
  padding: 20px 10px 10px 10px
}

  .compare-products-table .specification-group td label {
    font-size: 16px;
    color: #444
  }

.compare-products-table .remove-button {
  display: inline-block;
  border: 0;
  background: url('../images/remove.png') right center no-repeat;
  padding: 0 18px 0 0;
  font-size: 12px;
  color: #666
}

  .compare-products-table .remove-button:hover, .compare-products-table .remove-button:focus {
    color: #4ab2f1
  }

.compare-products-table .picture {
  display: block;
  position: relative;
  max-width: 200px;
  height: 200px;
  overflow: hidden
}

  .compare-products-table .picture img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto
  }

.compare-products-table .product-name td {
  font-weight: bold
}

  .compare-products-table .product-name td a:hover, .compare-products-table .product-name td a:focus {
    color: #4ab2f1
  }

.compare-products-table .short-description td {
  line-height: 22px
}

.compare-products-table .full-description td {
  display: none
}

.page--compare .no-data {
  margin: 25px 0 0
}