/*--------- Abstracts variable ---------- */

@import url(./bootstrap-select.min.css);



:root {

  --white: #ffffff;

  --black: #000000;

  /* --primary: #C8102E; */

  --primary: #f37021;

  --secondary: #D7EB3A;

  --third: rgba(44, 129, 83, 1);

  --text: #5F615E;

  --text-2: #8A8C8A;

  --text-3: #ACAFAB;

  --text-4: #E4E4E4;

  --text-5: #FFFFFF80;

  --text-6: #00000080;

  --text-7: #B3907A;

  --bg: #E4E4E4;

  --bg-2: #F5F5F5;

  --bg-3: #021A62;

  --bg-4: #534696;

  --bg-5: #C8A07C;

  --bg-6: #B2CBEA;

  --bg-7: #EC6E1A;

  --bg-8: #FAFAFA;

  --bg-9: #F6F4F1;

  --bg-10: #C8102E12;

  --bg-11: #EEDFC6;

  --bg-12: #F7F7F7;

  --bg-13: #F8F8F8;

  --bg-14: #4F684C;

  --bg-15: #42514A;

  --bg-16: #F7EDE4;

  --bg-17: #FAFAFD;

  --line: #EDEDED;

  --line-2: #FFFFFF33;

  --line-3: #FFFFFF1A;

  --line-4: #FFFFFF80;

  --line-5: #FFFFFFB3;

  --line-6: #E7E7E7;

  --line-7: #E2E2E2;

  --line-8: #00000012;

  --line-9: #FFFFFF4D;

  --line-10: #ECECEC;

  --shadow-1: #A3A3A340;

  --linear-1: linear-gradient(180deg, rgba(246, 221, 190, 0) 0%, rgba(246, 221, 190, 0.5) 100%);

  --linear-2: linear-gradient(137.6deg, #C09C71 23.87%, #664B18 99.83%);

  --linear-3: linear-gradient(285.63deg, #4B2C17 5.45%, #905E3D 94.52%);

  --linear-4: linear-gradient(133.57deg, #FFF0D3 25.62%, #EBD1A2 100%);

  --linear-5: linear-gradient(138.03deg, #FFF3E5 23.68%, #FFCDA2 100%);

  --verified: #00BF43;

  --success: #28A745;

  --error: #ff4949;

}



.primary {

  --primary: #C8102E;

}



.primary-2 {

  --primary: #007a41;

}



.primary-3 {

  --primary: rgb(67, 107, 228);

}



.primary-4 {

  --primary: rgb(104, 91, 199);

}



.primary-5 {

  --primary: rgb(232, 83, 49);

}



.primary-6 {

  --primary: rgb(88, 126, 87);

}



/*---------- Reset css styles ----------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

  font-family: inherit;

  font-size: 100%;

  font-style: inherit;

  font-weight: inherit;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}



/* Elements

-------------------------------------------------------------- */

html {

  margin-right: 0 !important;

  scroll-behavior: smooth;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: "Open Sans", sans-serif !important;

  font-size: 16px;

  line-height: 22px;

  font-weight: 400;

  color: var(--text);

  background-color: var(--white);

}



body::-webkit-scrollbar {

  width: 5px;

}



body::-webkit-scrollbar-thumb {

  cursor: grab;

  background-color: var(--primary);

}



/* @media (max-width: 1199px) {

  body {

    padding-bottom: 81px;

  }

} */



img {

  max-width: 100%;

  height: auto;

  transform: scale(1);

  vertical-align: middle;

  -ms-interpolation-mode: bicubic;

}



.row {

  margin-right: -16px;

  margin-left: -16px;

}



.row>* {

  padding-left: 16px;

  padding-right: 16px;

}



@media (min-width: 1200px) {

  .row {

    margin-right: -24px;

    margin-left: -24px;

  }



  .row>* {

    padding-left: 24px;

    padding-right: 24px;

  }

}



ul,

li {

  list-style-type: none;

  margin-bottom: 0;

  padding-left: 0;

  list-style: none;

}



table {

  width: 100%;

  overflow-x: auto;

  table-layout: auto;

  border-collapse: collapse;

}



td,

th {

  padding: 12px 16px;

}



@media (min-width: 1200px) {



  td,

  th {

    padding: 16px 24px;

  }

}



.container {

  max-width: 1472px;

  width: 100%;

  margin: auto;

  padding-left: 16px;

  padding-right: 16px;

}



@media (min-width: 1200px) {

  .container {

    max-width: 1488px;

    padding-left: 24px;

    padding-right: 24px;

  }

}



.container-full {

  width: 100%;

  max-width: 1920px;

  margin: 0 auto;

  padding: 0px 16px;

}



@media (min-width: 1200px) {

  .container-full {

    padding-left: 24px;

    padding-right: 24px;

  }

}



@media (min-width: 1600px) {

  .container-full {

    padding-left: 48px;

    padding-right: 48px;

  }

}



.container-full-2 {

  width: 100%;

  max-width: 1920px;

  margin: 0 auto;

  padding: 0px 16px;

}



@media (min-width: 1200px) {

  .container-full-2 {

    padding-left: 24px;

    padding-right: 24px;

  }

}



@media (min-width: 1600px) {

  .container-full-2 {

    padding-left: 40px;

    padding-right: 40px;

  }

}



.container-full-3 {

  width: 100%;

  max-width: 1920px;

  margin: 0 auto;

  padding: 0px 16px;

}



@media (min-width: 1200px) {

  .container-full-3 {

    padding-left: 24px;

    padding-right: 24px;

  }

}



@media (min-width: 1600px) {

  .container-full-3 {

    padding-left: 54px;

    padding-right: 54px;

  }

}



.container-full-4 {

  width: 100%;

  max-width: 1920px;

  margin: 0 auto;

  padding: 0px 16px;

}



@media (min-width: 1200px) {

  .container-full-4 {

    padding-left: 24px;

    padding-right: 24px;

  }

}



.container-layout-right {

  width: calc(100vw - (100vw - 1548px) / 2 - 4px);

  margin-right: unset;

  max-width: 100%;

  margin-left: auto;

  padding-left: 15px;

}



svg path {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



button {

  background: transparent;

  border: 0;

  display: inline-flex;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



/* Since FF19 lowers the opacity of the placeholder by default */

:-ms-input-placeholder {

  color: var(--secondary-2);

}



/* Typography

-------------------------------------------------------------- */

h1,

h2,

h3,

h4,

h5,

h6 {

  /* font-family:   "Dela Gothic One", serif !important; */

  text-rendering: optimizeLegibility;

  font-weight: 500;

  margin-bottom: 0;

  letter-spacing: 0;

  color: var(--black);

}



.h1,

.h2,

.h3,

.h4,

.h5,

.h6 {

  /* font-family:  "Dela Gothic One", serif !important; */

  text-rendering: optimizeLegibility;

  font-weight: 400;

  margin-bottom: 0;

  letter-spacing: 0;

}



h1,

.h1 {

  font-family:   "Dela Gothic One", serif !important;

  font-size: clamp(32px, 5.5vw, 56px);

  line-height: clamp(44px, 6.5vw, 67px);

}



h2,

.h2 {

  font-size: clamp(28px, 3.2vw, 40px);

  line-height: clamp(32px, 3.2vw, 40px);

}



h2.type-semibold,

.h2.type-semibold {

  line-height: 120%;

  font-weight: 600;

}



h3,

.h3 {

  font-size: clamp(20px, 2.2vw, 32px);

  line-height: clamp(28px, 3vw, 43px);

}



h4,

.h4 {

  font-size: clamp(20px, 3vw, 24px);

  line-height: clamp(26px, 4vw, 32px);

}



h5,

.h5 {

  font-size: clamp(18px, 3vw, 20px);

  line-height: clamp(24px, 4vw, 27px);

}



h6,

.h6 {

  font-size: 18px;

  line-height: 24px;

}



.text-display {

  font-size: clamp(40px, 6vw, 70px);

  line-height: 100%;

}



.text-display-2 {

  font-size: clamp(32px, 5vw, 48px);

  line-height: 120%;

}



.text-display-3 {

  font-size: clamp(24px, 4.5vw, 40px);

  line-height: 95%;

}



.text-large {

  font-size: 16px;

  line-height: 22px;

}



.text-small {

  font-size: 14px;

  line-height: 20px;

}



.text-small-2 {

  font-size: 12px;

  line-height: 16px;

}



.text-small-3 {

  font-size: 10px;

  line-height: 14px;

}



.font-main {

  font-family: "Open Sans", sans-serif !important;

}



.font-2 {

  font-family: "Open Sans", sans-serif , cursive !important;

}



b,

strong {

  font-weight: bolder;

}



video {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.font-sora {

  font-family: "Open Sans", sans-serif !important;

}



.fw-3 {

  font-weight: 300 !important;

}



.fw-4 {

  font-weight: 400 !important;

}



.fw-5 {

  font-weight: 500 !important;

}



.fw-6 {

  font-weight: 600 !important;

}



.fw-7 {

  font-weight: 700 !important;

}



.fw-8 {

  font-weight: 800 !important;

}



.fs-10 {

  font-size: 10px;

}



.fs-12 {

  font-size: 12px !important;

}



.fs-14 {

  font-size: 14px !important;

}



.fs-20 {

  font-size: 20px;

}



.fs-18 {

  font-size: 18px;

}



.fs-35 {

  font-size: 35px;

}



.lh-19 {

  line-height: 19px !important;

}



.lh-20 {

  line-height: 20px !important;

}



.lh-28 {

  line-height: 28px !important;

}



.lh-32 {

  line-height: 32px !important;

}



.fs-24 {

  font-size: 24px !important;

}



.text-black {

  color: var(--black) !important;

}



.text-instock {

  color: #2C8153 !important;

}



.text-primary {

  color: var(--primary) !important;

}



.text-third {

  color: var(--third) !important;

}



.text-secondary {

  color: var(--secondary) !important;

}



.text-white-2 {

  color: var(--white-2) !important;

}



.text-white_50 {

  color: rgba(255, 255, 255, 0.5019607843) !important;

}



.text-white_70 {

  color: rgba(255, 255, 255, 0.7019607843) !important;

}



.text-star {

  color: #EF9122;

}



.text-main {

  color: var(--text) !important;

}



.text-main-2 {

  color: var(--text-2) !important;

}



.text-main-3 {

  color: var(--text-3) !important;

}



.text-main-5 {

  color: var(--text-5) !important;

}



.text-main-6 {

  color: var(--text-6) !important;

}



.text-main-7 {

  color: var(--text-7) !important;

}



.text-price {

  color: #E85331 !important;

}



.text-star {

  color: #E69600 !important;

}



.outline {

  outline: 1px solid var(--line);

}



.line-black {

  border: 1px solid var(--black) !important;

}



.line {

  border: 1px solid var(--line);

}



.line-2 {

  border: 1px solid var(--line-8);

}



.line-bt-2 {

  border: 1px solid var(--line-2);

}



.line-bt-3 {

  border-bottom: 1px solid var(--line-3);

}



.line-tp {

  border-top: 1px solid var(--line);

}



.line-bt {

  border-bottom: 1px solid var(--line);

}



.line-y {

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}



.bg-primary {

  background-color: var(--primary) !important;

}



.bg-secondary {

  background-color: var(--secondary) !important;

}



.bg-line {

  background-color: var(--line) !important;

}



.bg-dark {

  background-color: var(--black);

}



.bg-line-3 {

  background-color: var(--line-3) !important;

}



.bg-min-white {

  background-color: var(--bg-8) !important;

}



.bg-rose-white {

  background-color: #FAF3F1;

}



.bg-white-smoke {

  background-color: var(--bg-2);

}



.bg-dark-blu {

  background-color: var(--bg-3) !important;

}



.bg-deep-violet {

  background-color: var(--bg-4) !important;

}



.bg-light-brown {

  background-color: var(--bg-5);

}



.bg-baby-blue {

  background-color: var(--bg-6);

}



.bg-baby-blue-2 {

  background-color: #ECF5FF;

}



.bg-baby-blue-3 {

  background-color: #EDF1FD;

}



.bg-blue-1 {

  background-color: rgb(178, 203, 234) !important;

}



.bg-ice-blue {

  background-color: #E5EFF0 !important;

}



.bg-vivid-orange {

  background-color: var(--bg-7);

}



.bg-light-purple {

  background-color: #D5D4FE !important;

}



.bg-dark-charcoal {

  background-color: #201E21 !important;

}



.bg-dark-jade {

  background-color: #114842 !important;

}



.bg-light-beige {

  background-color: #EEDFC6 !important;

}



.bg-sage-green {

  background-color: #71A46E !important;

}



.bg-tomato {

  background-color: #F55B31 !important;

}



.bg-honey-orange {

  background-color: #F3A729 !important;

}



.bg-dark-olive {

  background-color: #444828 !important;

}



.bg-dark-olive-2 {

  background-color: #4F684C !important;

}



.bg-hot-pink {

  background-color: #F56EB7 !important;

}



.bg-muted-violet {

  background-color: #51518D !important;

}



.bg-dusty-olive {

  background-color: #A6AB84 !important;

}



.bg-caramel {

  background-color: #C8A07C;

}



.bg-deep-orange {

  background-color: #EC6E1A;

}



.bg-baby-blue {

  background-color: #B2CBEA;

}



.bg-teal-blue {

  background-color: #277A9F;

}



.bg-medium-gray {

  background-color: #CFD0CA;

}



.bg-off-white {

  background-color: var(--bg-9) !important;

}



.bg-ghost-white {

  background-color: #FAFAFD;

}



.bg-deep-green {

  background-color: #42514A !important;

}



.bg-soft-peach {

  background-color: #F7EDE4 !important;

}



.bg-black-gray {

  background: linear-gradient(to right, #000000 50%, #888888 50%) !important;

}



.bg-black-green {

  background: linear-gradient(to right, #888888 50%, #4CAF50 50%) !important;

}



.bg-dusty-rose {

  background-color: #B3907A !important;

}



.bg-sand-white {

  background-color: #EFE7DA !important;

}



.bg-cosmic-purple {

  background-color: #685BC7 !important;

}



.bg-brown {

  background-color: #8b674d;

}



.text-stroke-white {

  -webkit-text-stroke: 2px var(--white);

  color: transparent;

}



.text-normal {

  text-transform: none !important;

}



.text-purple {

  color: var(--bg-4) !important;

}



a {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  text-decoration: none;

  cursor: pointer;

  display: inline-block;

  color: var(--black);

}



a:focus,

a:hover {

  text-decoration: none;

  outline: 0;

}



.link {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.link:hover {

  color: var(--primary) !important;

}



.link-secondary {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.link-secondary:hover {

  color: var(--secondary) !important;

}



.link-black {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.link-black:hover {

  color: var(--black) !important;

}



.link-purple {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.link-purple:hover {

  color: var(--bg-4) !important;

}



.grid-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

}



.grid-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

}



.grid-4 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

}



.grid-6 {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

}



.gap-4 {

  gap: 4px !important;

}



.gap-5 {

  gap: 5px !important;

}



.gap-6 {

  gap: 6px !important;

}



.gap-8 {

  gap: 8px;

}



.gap-10 {

  gap: 10px !important;

}



.gap-12 {

  gap: 12px !important;

}



.gap-13 {

  gap: 13px !important;

}



.gap-15 {

  gap: 15px;

}



.gap-16 {

  gap: 16px !important;

}



.gap-20 {

  gap: 20px;

}



.gap-24 {

  gap: 24px !important;

}



.gap-28 {

  gap: 28px !important;

}



.gap-30 {

  gap: 30px !important;

}



.gap-x-10 {

  column-gap: 10px !important;

}



.radius-3 {

  border-radius: 3px !important;

}



.radius-5 {

  border-radius: 5px !important;

}



.radius-10 {

  border-radius: 10px !important;

}



.radius-12 {

  border-radius: 12px !important;

}



.radius-16 {

  border-radius: 16px !important;

}



.radius-20 {

  border-radius: 20px !important;

}



.flat-spacing {

  padding-top: 112px;

  padding-bottom: 112px;

}



@media (max-width: 1024px) {

  .flat-spacing {

    padding-top: 80px;

    padding-bottom: 80px;

  }

}



@media (max-width: 767px) {

  .flat-spacing {

    padding-top: 60px;

    padding-bottom: 60px;

  }

}



.flat-spacing-2 {

  padding-top: 118px;

  padding-bottom: 118px;

}



@media (max-width: 1024px) {

  .flat-spacing-2 {

    padding-top: 80px;

    padding-bottom: 80px;

  }

}



@media (max-width: 767px) {

  .flat-spacing-2 {

    padding-top: 60px;

    padding-bottom: 60px;

  }

}



.flat-spacing-3 {

  padding-top: 80px;

  padding-bottom: 80px;

}



@media (max-width: 767px) {

  .flat-spacing-3 {

    padding-top: 60px;

    padding-bottom: 60px;

  }

}



[data-grid=grid-1] {

  display: grid;

  gap: 30px;

  grid-template-columns: 1fr;

}



[data-grid=grid-2] {

  display: grid;

  gap: 30px;

  grid-template-columns: 1fr 1fr;

}



[data-grid=grid-3] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(3, 1fr);

}



[data-grid=grid-4] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(4, 1fr);

}



[data-grid=grid-5] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(5, 1fr);

}



[data-grid=grid-6] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(6, 1fr);

}



[data-grid=grid-7] {

  display: grid;

  gap: 30px;

  grid-template-columns: repeat(7, 1fr);

}



.grid-template-columns-2 {

  grid-template-columns: 1fr 1fr;

}



.tf-row-flex {

  display: flex;

  flex-direction: row;

  column-gap: 30px;

  row-gap: 30px;

}



.tf-grid-layout {

  display: grid;

  column-gap: 12px;

  row-gap: 32px;

}



.tf-grid-layout.tf-col-2 {

  grid-template-columns: 1fr 1fr;

}



.tf-grid-layout.tf-col-3 {

  grid-template-columns: repeat(3, 1fr);

}



.tf-grid-layout.tf-col-4 {

  grid-template-columns: repeat(4, 1fr);

}



.tf-grid-layout.tf-col-5 {

  grid-template-columns: repeat(5, 1fr);

}



.tf-grid-layout.tf-col-6 {

  grid-template-columns: repeat(6, 1fr);

}



.tf-grid-layout.tf-col-7 {

  grid-template-columns: repeat(7, 1fr);

}



.tf-grid-layout .wd-full {

  grid-column: 1/-1;

}



.tf-grid-layout .wd-2-cols {

  grid-column: span 2;

}



@media (min-width: 576px) {

  .tf-grid-layout.sm-col-2 {

    grid-template-columns: 1fr 1fr;

  }



  .tf-grid-layout.sm-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }



  .tf-grid-layout.sm-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }



  .tf-grid-layout.sm-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }



  .tf-grid-layout.sm-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }



  .tf-grid-layout.sm-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}



@media (min-width: 768px) {

  .tf-grid-layout.md-col-2 {

    grid-template-columns: 1fr 1fr;

  }



  .tf-grid-layout.md-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }



  .tf-grid-layout.md-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }



  .tf-grid-layout.md-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }



  .tf-grid-layout.md-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }



  .tf-grid-layout.md-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}



@media (min-width: 992px) {

  .tf-grid-layout {

    column-gap: 30px;

  }



  .tf-grid-layout.lg-col-2 {

    grid-template-columns: 1fr 1fr;

  }



  .tf-grid-layout.lg-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }



  .tf-grid-layout.lg-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }



  .tf-grid-layout.lg-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }



  .tf-grid-layout.lg-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }



  .tf-grid-layout.lg-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}



@media (min-width: 1200px) {

  .tf-grid-layout {

    row-gap: 48px;

    column-gap: 48px;

  }



  .tf-grid-layout.row-xl-gap-40 {

    row-gap: 40px;

  }



  .tf-grid-layout.row-xl-gap-56 {

    row-gap: 56px;

  }



  .tf-grid-layout.xl-col-2 {

    grid-template-columns: 1fr 1fr;

  }



  .tf-grid-layout.xl-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }



  .tf-grid-layout.xl-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }



  .tf-grid-layout.xl-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }



  .tf-grid-layout.xl-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }



  .tf-grid-layout.xl-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}



@media (min-width: 1440px) {

  .tf-grid-layout.xxl-col-2 {

    grid-template-columns: 1fr 1fr;

  }



  .tf-grid-layout.xxl-col-3 {

    grid-template-columns: repeat(3, 1fr);

  }



  .tf-grid-layout.xxl-col-4 {

    grid-template-columns: repeat(4, 1fr);

  }



  .tf-grid-layout.xxl-col-5 {

    grid-template-columns: repeat(5, 1fr);

  }



  .tf-grid-layout.xxl-col-6 {

    grid-template-columns: repeat(6, 1fr);

  }



  .tf-grid-layout.xxl-col-7 {

    grid-template-columns: repeat(7, 1fr);

  }

}



.overflow-unset {

  overflow: unset !important;

}



.sticky-top {

  position: sticky !important;

  z-index: 50;

  top: 15px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.wmax {

  width: max-content !important;

}



.cursor-not-allowed {

  cursor: not-allowed;

}



.cursor-auto {

  cursor: auto;

}



.z-1 {

  z-index: 1;

}



.z-5 {

  z-index: 5;

}



.text-line-clamp-1 {

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  display: -webkit-box !important;

  overflow: hidden;

}



.text-line-clamp-2 {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.text-line-clamp-3 {

  -webkit-line-clamp: 3 !important;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.aspect-ratio-0 {

  aspect-ratio: 0 !important;

}



.aspect-ratio-1 {

  aspect-ratio: 1/1 !important;

}



#scroll-top {

  position: fixed;

  display: block;

  width: 48px;

  height: 48px;

  line-height: 50px;

  border-radius: 4px;

  z-index: 1;

  border-radius: 50%;

  opacity: 0;

  visibility: hidden;

  cursor: pointer;

  overflow: hidden;

  z-index: 100;

  background-color: var(--main);

  border: 0;

  bottom: 92px;

  right: 20px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



#scroll-top.show {

  opacity: 1;

  visibility: visible;

}



#scroll-top.type-1 {

  bottom: 140px;

}



#scroll-top:hover {

  transform: translateY(-5px);

  background-color: var(--primary);

}



/* Preload 

------------------------------------------- */

.preload-container {

  display: flex;

  position: relative;

  width: 100%;

  height: 100%;

  background: #ffffff;

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  z-index: 99999999999;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.spinner {

  width: 60px;

  height: 60px;

  border: 3px solid transparent;

  border-top: 3px solid var(--primary);

  border-radius: 100%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  animation: spin 1s infinite linear;

}



@keyframes spin {

  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }

}



.br-line {

  width: 100%;

  height: 1px;

  display: inline-flex;

  background-color: var(--line);

}



.br-line.type-vertical {

  width: 1px;

  height: 16px;

}



.br-line.h-24 {

  height: 24px;

}



.opacity-10 {

  opacity: 0.1 !important;

}



.simpleParallax {

  height: 100%;

  width: 100%;

}



.simpleParallax img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.backdrop-ft-unset {

  backdrop-filter: unset !important;

}



.mb-2 {

  margin-bottom: 2px !important;

}



.mb-4 {

  margin-bottom: 4px !important;

}



.mb-7 {

  margin-bottom: 7px !important;

}



.mb-8 {

  margin-bottom: 8px !important;

}



.mb-20 {

  margin-bottom: 20px;

}



.mb-24 {

  margin-bottom: 24px !important;

}



.mb-32 {

  margin-bottom: 32px !important;

}



.mb-12 {

  margin-bottom: 12px !important;

}



.mb-14 {

  margin-bottom: 14px !important;

}



.mb-15 {

  margin-bottom: 15px !important;

}



.mb-16 {

  margin-bottom: 16px !important;

}



.mb-40 {

  margin-bottom: 40px !important;

}



.mt-30 {

  margin-top: 30px;

}



.lt-sp-nor {

  letter-spacing: -0.32px;

}



.letter-space-0 {

  letter-spacing: 0px !important;

}



.tf-swiper .swiper-slide {

  height: auto;

}



.tf-swiper .swiper-slide>* {

  height: 100%;

}



.mb_48 {

  margin-bottom: 48px !important;

}



.mb_32 {

  margin-bottom: 32px !important;

}



.mb_30 {

  margin-bottom: 30px;

}



.mb_16 {

  margin-bottom: 16px !important;

}



.mb_15 {

  margin-bottom: 15px !important;

}



.text-vertical {

  writing-mode: vertical-lr;

  transform: rotate(180deg);

}



.py-20 {

  padding-top: 20px;

  padding-bottom: 20px;

}



.cs-pointer {

  cursor: pointer;

}



.pt-30 {

  padding-top: 30px;

}



.max-width_1 {

  max-width: 1424px;

  width: 100%;

}



#goTop {

  position: fixed;

  padding: 0;

  bottom: 90px;

  right: 20px;

  width: 38px;

  height: 38px;

  background: var(--white);

  color: black;

  font-size: 20px;

  text-align: center;

  line-height: 50px;

  cursor: pointer;

  border: none;

  border-radius: 50%;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease;

  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1019607843);

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



#goTop .border-progress {

  position: absolute;

  top: -1px;

  left: -1px;

  width: calc(100% + 2px);

  height: calc(100% + 2px);

  border-radius: 50%;

  border: 1px solid #000;

  mask-image: conic-gradient(#000 var(--progress-angle, 0deg), transparent 0);

  -webkit-mask-image: conic-gradient(#000 var(--progress-angle, 0deg), transparent 0);

  content: "";

  z-index: 1;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



#goTop.show {

  opacity: 1;

  visibility: visible;

}



#goTop .icon {

  font-size: 20px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: #000;

  animation: iconBounce 2s linear 0s infinite;

}



#goTop .icon-arrow-right-2 {

  transform: rotate(-90deg);

}



#goTop:hover {

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);

}



@media (min-width: 992px) {

  #goTop {

    right: 40px;

  }

}



@media (max-width: 1199px) {

  #goTop.pos1 {

    bottom: 200px;

  }

}



@media (max-width: 767px) {

  #goTop.pos1 {

    bottom: 230px;

  }

}



.initial-child-container {

  flex: 0 0 auto;

  display: flex;

  min-width: auto;

  flex-direction: row;

  align-items: center;

}



.marquee-wrapper {

  display: flex;

  animation: infiniteScroll 7s linear infinite;

  align-items: center;

  transition: animation-duration 300ms;

}



.min-w-unset {

  min-width: unset !important;

}



.opacity-100 {

  opacity: 1 !important;

}



.flex-1 {

  flex: 1;

}



@media (min-width: 1200px) {

  .flex-xl-1 {

    flex: 1 !important;

  }

}



@media (min-width: 576px) {

  .flex-sm-1 {

    flex: 1 !important;

  }

}



.h-unset {

  height: unset !important;

}



@media (min-width: 576px) {

  .h-sm-100 {

    height: 100% !important;

  }

}



@media (min-width: 1200px) {

  .gap-xl-64 {

    gap: 64px !important;

  }



  .gap-xl-40 {

    gap: 40px !important;

  }



  .h-xl-unset {

    height: unset !important;

  }

}



@media (min-width: 1440px) {

  .text-xxl-nowrap {

    white-space: nowrap !important;

  }

}



@media (min-width: 1600px) {

  .d-xxxl-flex {

    display: flex !important;

  }

}



.w-maxcontent {

  width: max-content !important;

}



@media (prefers-reduced-motion: reduce) {

  * {

    animation: none !important;

    transition: none !important;

  }

}



/*------------ Components ---------------- */

/*------------ header ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

header {

  position: sticky;

  z-index: 100;

  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}



header.header-sticky {

  background-color: var(--white);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.header-abs-1 {

  margin-bottom: -94px;

}



@media (max-width: 1199px) {

  .header-abs-1 {

    margin-bottom: -77px;

  }

}



.header-abs-2 {

  margin-bottom: -113px;

}



.header-abs-2 .item-link {

  padding-top: 45px;

  padding-bottom: 44px;

}



@media (max-width: 1199px) {

  .header-abs-2 {

    margin-bottom: -77px;

  }

}



.header-abs-3 {

  margin-bottom: -164px;

}



.header-abs-3 .logo-site {

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: unset;

}



.header-abs-3 .logo-site img {

  height: 64px;

}



.header-abs-3 .logo-bottom {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: -2px;

}



.header-abs-3 .item-link {

  padding-top: 11px;

  padding-bottom: 11px;

  font-weight: normal;

}



.header-abs-3 .header-inner {

  border-top: 1px solid var(--line-3);

  border-bottom: 1px solid var(--line-3);

}



.header-abs-3.header-sticky {

  background-color: var(--black);

}



@media (min-width: 1200px) {

  .header-abs-3 .header-top {

    padding-top: 16px;

    padding-bottom: 24px;

  }



  .header-abs-3 .logo-bottom {

    gap: 18px;

  }

}



@media (max-width: 1199px) {

  .header-abs-3 {

    margin-bottom: -100px;

  }

}



.logo-site {

  display: flex;

}



.logo-site img {

  width: 100%;

  max-width: 133px;

  /* aspect-ratio: 2.5094339623; */

}



.tf-topbar {

  padding-top: 8px;

  padding-bottom: 8px;

}



@media (min-width: 1200px) {

  .tf-topbar.type-space-2 {

    padding-top: 12px;

    padding-bottom: 12px;

  }



  .tf-topbar.type-space-3 {

    padding-top: 16px;

    padding-bottom: 16px;

  }



  .tf-topbar.type-space-3.sp-has_line_bt {

    padding-bottom: 15px;

  }

}



.topbar-top {

  padding-top: 8px;

  padding-bottom: 8px;

}



.topbar-center {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

}



.topbar-left {

  display: flex;

  align-items: center;

  gap: 24px;

}



.topbar-left .group-btn {

  gap: 12px;

}



.topbar-right {

  display: flex;

  align-items: center;

  justify-content: end;

  gap: 24px;

}



.topbar-option-list {

  display: flex;

  align-items: center;

  justify-content: end;

  gap: 24px;

}



.topbar-option-list .br-line {

  background-color: var(--white);

  opacity: 0.2;

  height: 16px;

  width: 1px;

}



.topbar-option-list .track {

  display: flex;

  align-items: center;

  gap: 6px;

}



.topbar-option-list .track .icon {

  font-size: 20px;

}



.text-logo {

  font-size: clamp(40px, 6vw, 56px);

  line-height: clamp(53px, 8vw, 75px);

  font-weight: 700;

}



.text-logo-mb {

  font-weight: 700;

  font-size: 40px;

  line-height: 53px;

}



.btn-mobile-menu {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 24px;

  width: 24px;

  position: relative;

}



.btn-mobile-menu span {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  display: block;

  width: 18px;

  height: 2px;

  background-color: var(--black);

  border-radius: 5px;

}



.btn-mobile-menu::after,

.btn-mobile-menu::before {

  content: "";

  position: absolute;

  width: 18px;

  height: 2px;

  background-color: var(--black);

  border-radius: 1px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.btn-mobile-menu::before {

  top: 5px;

}



.btn-mobile-menu::after {

  bottom: 5px;

}



.btn-mobile-menu.type-small {

  width: 20px;

  height: 20px;

}



.btn-mobile-menu.type-small>span {

  width: 16px;

}



.btn-mobile-menu.type-small::after,

.btn-mobile-menu.type-small::before {

  width: 16px;

}



.btn-mobile-menu.style-white span,

.btn-mobile-menu.style-white::after,

.btn-mobile-menu.style-white::before {

  background-color: var(--white);

}



.box-navigation.style-white .item-link {

  color: var(--white);

}



.box-navigation.style-white .item-link .icon {

  color: var(--white);

}



.box-navigation.style-white .menu-item:hover .item-link {

  color: var(--primary);

}



.box-navigation.style-white .menu-item:hover .item-link .icon {

  color: var(--primary);

}



.box-nav-menu {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 32px;

}



.menu-item:hover .item-link {

  color: var(--primary);

}



.menu-item:hover .item-link::after {

  display: block;

}



.menu-item:hover .item-link .icon {

  color: var(--primary);

  transform: rotate(180deg);

}



.menu-item:hover .sub-menu {

  transform: scale(1);

  pointer-events: all;

  opacity: 1;

  visibility: visible;

}



.item-link {

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 700;

  font-size: 18px;

  line-height: 24px;

  padding-top: 35px;

  padding-bottom: 35px;

  position: relative;

}



.item-link .icon {

  font-size: 14px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: var(--black);

}



.item-link::after {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  width: calc(100% + 67px);

  height: 100%;

  display: none;

}



.sub-menu {

  position: absolute;

  top: 100%;

  background-color: var(--white);

  box-shadow: 0px 12px 46px 0px rgba(0, 0, 0, 0.1019607843);

  min-width: 200px;

  left: -31px;

  transform: scale(0.9);

  transform-origin: top;

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.mega-menu {

  width: 100%;

  left: 0;

  padding: 56px 0px;

  max-height: calc(100vh + 70px);

  overflow: auto;

}



.mega-menu-item .menu-heading {

  margin-bottom: 24px;

}



.mega-menu-item .sub-menu_list,

.mega-menu-item .sub-menu_link {

  padding: 0;

}



.mega-menu-item .sub-menu_list {

  gap: 16px;

  display: grid;

}



.mega-menu-item .list-ver {

  gap: 24px;

}



.sub-menu_list {

  padding: 24px 0px;

}



.sub-menu_link {

  color: var(--text);

  padding: 8px 32px;

  display: flex;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

}



.sub-menu_link:hover {

  color: var(--black);

}



.nav-icon-list {

  display: flex;

  align-items: center;

  justify-content: end;

  gap: 12px;

}



.nav-icon-list li {

  display: flex;

}



.nav-icon-list .shop-cart {

  position: relative;

  margin-right: 12px;

}



.nav-icon-list .count {

  width: 24px;

  height: 24px;

  display: block;

  border-radius: 50%;

  background: var(--primary);

  position: absolute;

  top: -12px;

  right: -12px;

  font-weight: 700;

  font-size: 12px;

  line-height: 16px;

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

}



@media (min-width: 768px) {

  .nav-icon-list .shop-cart {

    margin-right: 12px;

  }

}



@media (min-width: 1200px) {

  .nav-icon-list {

    gap: 24px;

  }

}



@media (max-width: 1199px) {

  .nav-icon-list .count {

    width: 20px;

    height: 20px;

    font-size: 12px;

    line-height: 16px;

    font-weight: normal;

  }

}



.nav-icon-item {

  display: flex;

}



.nav-icon-item .count {

  top: -8px;

  right: -8px;

}



.nav-icon-item .icon {

  font-size: 24px;

}



.nav-icon-item-2 {

  display: flex;

  align-items: center;

  gap: 12px;

  position: relative;

}



.nav-icon-item-2 .icon {

  font-size: 24px;

}



.nav-icon-item-2 .nav-icon-item_sub {

  display: grid;

}



.nav-icon-item-2 .text-sub {

  color: var(--line-4);

}



.nav-icon-item-2 .count {

  top: -8px;

  right: -8px;

}



@media (min-width: 768px) {

  .nav-icon-item-2 .icon {

    font-size: 40px;

  }

}



@media (max-width: 1199px) {

  .tf-header {

    padding-top: 12px;

    padding-bottom: 12px;

  }

}



.row-demo {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 24px;

  overflow: visible;

  margin-bottom: 40px;

}



@media (min-width: 1440px) {

  .row-demo {

    margin-bottom: 48px;

  }

}



.demo-item {

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 12px;

  padding: 8px 8px 12px;

  backdrop-filter: blur(4px);

  border: 1px solid var(--line);

  background-color: var(--bg-8);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.demo-item .demo-img {

  position: relative;

}



.demo-item .demo-img img {

  aspect-ratio: 0.8679245283;

}



.demo-item .demo-name {

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.demo-item:hover {

  border-color: var(--primary);

}



.demo-item:hover .demo-name {

  color: var(--primary);

}



.demo-coming {

  backdrop-filter: blur(4px);

  border: 1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.demo-coming .text {

  position: absolute;

  z-index: 3;

  bottom: 10px;

}



.demo-coming::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20.58%, rgba(0, 0, 0, 0.8) 102.91%);

  z-index: 2;

}



.header-right {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



.tf-header .form_search {

  max-width: 440px;

  width: 100%;

  margin-right: 20px;

}



@media (min-width: 1200px) {

  .tf-header .form_search {

    margin-right: 40px;

    margin-left: 40px;

  }

}



@media (min-width: 1440px) {

  .tf-header .form_search {

    margin-left: 80px;

  }

}



.tf-header.style-3 .item-link {

  padding-top: 24px;

  padding-bottom: 40px;

}



.tf-header.style-3.header-fixed .item-link {

  padding-top: 24px;

  padding-bottom: 24px;

}



.tf-header.style-3.style-3_2 .item-link {

  padding-top: 24px;

  padding-bottom: 24px;

}



.tf-header.style-3.style-3_2.header-sticky .header-inner .br-line {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-header.style-3.style-3_2.header-sticky .header-inner .br-line.last {

  background-color: transparent;

}



.tf-header.style-4 .item-link {

  padding-top: 11px;

  padding-bottom: 12px;

}



.tf-header.style-5 {

  background-color: var(--bg-3);

}



.tf-header.style-5 .header-right {

  gap: 30px;

}



.tf-header.style-5 .item-link {

  padding-top: 11px;

  padding-bottom: 12px;

}



.tf-header.style-6 {

  background-color: var(--bg-4);

}



.tf-header.style-6 .item-link {

  padding-top: 32px;

  padding-bottom: 32px;

}



.tf-header.style-6 .form_search {

  max-width: 368px;

}



.tf-header.style-6 .form_search input {

  padding-top: 13px;

  padding-bottom: 13px;

}



.tf-header.style-7 .item-link {

  padding-top: 23px;

  padding-bottom: 23px;

}



@media (min-width: 1200px) {

  .tf-header.style-2 {

    padding: 27px 0px;

  }



  .tf-header.style-3 .header-top {

    padding: 32px 0px 31px 0px;

  }



  .tf-header.style-4 .header-top {

    padding: 31px 0px 26px 0px;

  }



  .tf-header.style-5 .header-top {

    padding: 27px 0px;

  }

}



@media (min-width: 1440px) {

  .tf-header.style-5 .nav-icon-list {

    gap: 33px;

  }

}



@media (min-width: 1600px) {

  .tf-header.style-5 .header-right {

    gap: 74px;

    margin-left: -48px;

  }



  .tf-header.style-6 .form_search {

    margin-right: 44px;

    margin-left: 103px;

  }

}



.header-inner_wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.header-inner_wrap .col-left {

  display: flex;

  align-items: center;

  gap: 40px;

}



.header-inner_wrap .col-right {

  display: flex;

  align-items: center;

  gap: 12px;

}



.header-inner_wrap .col-right .icon {

  font-size: 20px;

  color: var(--primary);

}



.header-inner_wrap>.br-line {

  height: 24px;

}



.header-inner_wrap.wrap-2 .col-left {

  gap: 32px;

}



.nav-category-wrap {

  position: relative;

}



.box-nav-category {

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

  padding-top: 18px;

  padding-bottom: 18px;

  position: absolute;

  left: 0;

  top: calc(100% + 12px);

  min-width: 272px;

  background-color: var(--white);

  transform: translateY(10px);

  opacity: 0;

  visibility: hidden;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.box-nav-category.active {

  transform: translateY(0px);

  opacity: 1;

  visibility: visible;

}



@media (min-width: 1440px) {

  .box-nav-category {

    left: -25px;

  }

}



.box-nav-category.type-2 {

  left: 0;

  top: 100%;

}



.nav-category_link {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 24px;

  color: var(--text);

}



.nav-category_link .icon {

  font-size: 20px;

}



.nav-category_link:hover {

  color: var(--primary);

}



.btn-nav-drop {

  display: flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

}



.btn-nav-drop .name-category {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.btn-nav-drop:hover,

.btn-nav-drop.active {

  color: var(--primary);

}



.btn-nav-drop:hover .btn-mobile-menu::after,

.btn-nav-drop:hover .btn-mobile-menu::before,

.btn-nav-drop:hover .btn-mobile-menu>span,

.btn-nav-drop.active .btn-mobile-menu::after,

.btn-nav-drop.active .btn-mobile-menu::before,

.btn-nav-drop.active .btn-mobile-menu>span {

  background-color: var(--primary);

}



.btn-nav-drop:hover .name-category,

.btn-nav-drop.active .name-category {

  color: var(--primary);

}



.btn-nav-drop.style-2 {

  min-width: 272px;

  color: var(--white);

  background-color: var(--primary);

  padding-top: 11px;

  padding-bottom: 12px;

  padding-left: 24px;

  padding-right: 24px;

  border-radius: 16px 16px 0px 0px;

}



.btn-nav-drop.style-2 .icon {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.btn-nav-drop.style-2 .name-category {

  color: var(--white);

  flex: 1;

}



.btn-nav-drop.style-2:hover,

.btn-nav-drop.style-2.active {

  color: var(--white);

}



.btn-nav-drop.style-2:hover .btn-mobile-menu::after,

.btn-nav-drop.style-2:hover .btn-mobile-menu::before,

.btn-nav-drop.style-2:hover .btn-mobile-menu>span,

.btn-nav-drop.style-2.active .btn-mobile-menu::after,

.btn-nav-drop.style-2.active .btn-mobile-menu::before,

.btn-nav-drop.style-2.active .btn-mobile-menu>span {

  background-color: var(--white);

}



.btn-nav-drop.style-2:hover .name-category,

.btn-nav-drop.style-2.active .name-category {

  color: var(--white);

}



/* Menu Mobile */

.canvas-mb {

  width: 325px !important;

}



.canvas-mb .icon-close-popup {

  position: absolute;

  right: 0;

  top: 0;

  padding: 10px;

}



.canvas-mb .canvas-header {

  padding-bottom: 32px;

  position: relative;

}



.canvas-mb .canvas-header .br-line {

  position: absolute;

  height: 1px;

  background-color: var(--line);

  left: 24px;

  right: 24px;

  bottom: 0px;

  width: auto;

}



.canvas-mb .canvas-header .icon {

  font-weight: 600;

}



.canvas-mb .canvas-body {

  padding-top: 32px;

  padding-bottom: 16px;

  display: flex;

  flex-direction: column;

}



.canvas-mb .canvas-body>*:not(:last-child) {

  margin-bottom: 32px;

}



.canvas-mb .mb-content-top {

  flex: 1;

}



.canvas-mb .canvas-footer {

  display: flex;

  gap: 16px;

  box-shadow: unset;

}



.canvas-mb .canvas-footer .br-line {

  width: 1px;

  height: 24px;

  background-color: var(--line);

}



.canvas-mb .group-btn {

  gap: 12px;

}



.canvas-mb .group-btn .icon {

  font-weight: 600;

}



.canvas-mb .group-btn>* {

  width: 100%;

}



.flow-us-wrap .title {

  margin-bottom: 16px;

}



.payment-wrap .title {

  margin-bottom: 8px;

}



.mb-menu-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-weight: 700;

  font-size: 18px;

  line-height: 24px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.mb-menu-link .icon {

  font-size: 14px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  transform: rotate(0deg);

}



.mb-menu-link:not(.collapsed) {

  padding-bottom: 24px;

}



.mb-menu-link:not(.collapsed) .icon {

  transform: rotate(180deg);

}



.sub-nav-link .icon {

  font-size: 14px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  transform: rotate(0deg);

}



.sub-nav-link:not(.collapsed) {

  padding-bottom: 24px;

}



.sub-nav-link:not(.collapsed) .icon {

  transform: rotate(180deg);

}



.nav-ul-mb li:not(:last-child) .mb-menu-link {

  padding-bottom: 24px;

}



.nav-ul-mb li:not(:last-child) .sub-nav-menu:not(.sub-menu-level-2) {

  margin-bottom: 24px;

}



.sub-nav-menu {

  padding-left: 16px;

  padding-top: 4px;

  padding-bottom: 4px;

  margin-left: 16px;

  border-left: 1px solid var(--line);

}



.sub-nav-menu .sub-nav-link {

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  color: var(--text);

  display: flex;

  padding-top: 8px;

  padding-bottom: 8px;

  align-items: center;

  justify-content: space-between;

}



.sub-nav-menu .sub-nav-link .icon {

  font-size: 14px;

}



.sub-nav-menu .sub-nav-link.active {

  font-weight: 700;

  color: var(--black);

}



.payment-method-list {

  display: flex;

  align-items: center;

  gap: 8px;

}



.payment-method-list li {

  max-width: 50px;

}



.box-support-online {

  display: flex;

  align-items: center;

  gap: 16px;

}



.box-support-online .icon {

  font-size: 24px;

}



.box-support-online .br-line {

  height: 52px;

}



.box-support-online .sp-wrap {

  display: grid;

}



.tf-header.header-fixed {

  top: 0;

  left: 0;

  right: 0;

  position: fixed;

  opacity: 0;

  z-index: 100;

  -webkit-transform: translateY(-120%);

  -khtml-transform: translateY(-120%);

  -moz-transform: translateY(-120%);

  -ms-transform: translateY(-120%);

  -o-transform: translateY(-120%);

  transform: translateY(-120%);

  -webkit-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);

  -khtml-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);

  -moz-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);

  -ms-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);

  -o-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);

  transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);

  visibility: hidden;

  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.08);

  pointer-events: none;

  background-color: var(--white);

}



.tf-header.header-fixed.is-fixed {

  -webkit-transform: translateY(0);

  -khtml-transform: translateY(0);

  -moz-transform: translateY(0);

  -ms-transform: translateY(0);

  -o-transform: translateY(0);

  transform: translateY(0);

  visibility: visible;

  opacity: 1;

  pointer-events: all;

}



.demo-label {

  position: absolute;

  top: 10px;

  right: 10px;

  display: flex;

  gap: 5px;

}



.demo-label span {

  font-size: 14px;

  line-height: 20px;

  padding: 0px 8px;

  border-radius: 4px;

  background-color: var(--primary);

  color: var(--white);

}



.demo-label .demo-hot {

  background-color: #62d15e;

}



/*------------ footer ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.tf-footer.style-color-white .footer-heading {

  color: var(--white);

}



.tf-footer.style-color-white .footer-heading-mobile::before,

.tf-footer.style-color-white .footer-heading-mobile::after {

  background-color: var(--white);

}



.tf-footer.style-color-white .footer-menu-list a {

  color: var(--text-5);

}



.tf-footer.style-color-white .footer-contact .br-line {

  background-color: #FFFFFF;

  opacity: 0.1;

}



.tf-footer.style-color-white .footer-contact .icon,

.tf-footer.style-color-white .footer-contact a {

  color: var(--text-5);

}



.tf-footer.style-color-white .inner-bottom {

  border-color: var(--line-3);

}



.tf-footer.style-color-white .list-hor .br-line {

  background-color: var(--text);

}



.tf-footer.style-3 {

  background-color: var(--bg-4);

  position: relative;

  margin-top: 18px;

}



.tf-footer.style-3 .inner-bottom {

  border-color: var(--line-3);

}



.tf-footer.style-3 .ft-item-img {

  position: absolute;

  top: -18px;

  left: 0;

  right: 0;

}



.tf-footer.style-3 .ft-item-img img {

  min-height: 50px;

}



.tf-footer.style-3 .footer-heading {

  color: var(--white);

}



.tf-footer.style-3 .footer-heading-mobile::before,

.tf-footer.style-3 .footer-heading-mobile::after {

  background-color: var(--white);

}



.tf-footer.style-3 .footer-menu-list a {

  color: var(--white);

}



.tf-footer.style-3 .footer-contact .br-line {

  background-color: #FFFFFF;

  opacity: 0.1;

}



.tf-footer.style-3 .footer-contact .icon,

.tf-footer.style-3 .footer-contact a {

  color: var(--white);

}



.ft_logo {

  display: grid;

  gap: 8px;

}



.footer-infor {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



@media (min-width: 1200px) {

  .footer-infor {

    gap: 24px;

  }

}



@media (min-width: 1440px) {

  .footer-infor {

    max-width: 324px;

    width: 100%;

  }

}



.footer-heading {

  font-weight: normal;

  margin-bottom: 12px;

  font-size: 24px;

  line-height: 32px;

  color: var(--black);

}



@media (min-width: 1200px) {

  .footer-heading {

    margin-bottom: 24px;

  }

}



.footer-menu-list {

  display: grid;

  gap: 12px;

}



.footer-menu-list.class {

  display: block;

  margin-left: -10px;

}



.footer-menu-list.class li {

  display: inline-block;

}



.footer-menu-list.class li a {

  padding: 5px 10px;

}



.footer-menu-list.Information {

  display: flex;

  flex-wrap: wrap;

}



.footer-menu-list.Information li {

  width: 47.5%;

}



.footer-menu-list a {

  color: var(--text);

}



.footer-contact {

  display: grid;

  gap: 16px;

}



.footer-contact li {

  display: flex;

  align-items: center;

  gap: 8px;

}



.footer-contact .br-line {

  width: 1px;

  height: 16px;

  background-color: var(--line);

}



.footer-body {

  padding-top: 90px;

  padding-bottom: 56px;

  position: relative;

  z-index: 4;

}



.footer-body .footer-contact {

  margin-bottom: 24px;

}



@media (max-width: 1024px) {

  .footer-body {

    padding-top: 80px;

  }

}



@media (max-width: 767px) {

  .footer-body {

    padding-top: 60px;

    padding-bottom: 60px;

  }

}



.footer-newsletter .caption {

  margin-bottom: 16px;

}



@media (max-width: 575px) {

  .footer-heading-mobile {

    display: block;

    position: relative;

    padding-right: 20px;

    line-height: 24px;

  }



  .footer-heading-mobile::after {

    position: absolute;

    content: "";

    right: 0px;

    top: 50%;

    transform: translateY(-50%);

    width: 14px;

    height: 2px;

    background-color: var(--black);

    transition: 0.25s ease-in-out;

  }



  .footer-heading-mobile::before {

    position: absolute;

    content: "";

    right: 5px;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 2px;

    height: 14px;

    background-color: var(--black);

    transition: 0.25s ease-in-out;

  }



  .footer-heading-mobile.text-white::after,

  .footer-heading-mobile.text-white::before {

    background-color: var(--white);

  }



  .footer-col-block:not(:last-child) .tf-collapse-content {

    margin-bottom: 30px;

  }



  .footer-col-block:last-child .tf-collapse-content {

    margin-top: 20px;

  }



  .footer-col-block:last-child .footer-heading {

    margin-bottom: 0px;

  }



  .footer-col-block.open .footer-heading-mobile::before {

    opacity: 0;

  }



  .footer-col-block.open .footer-heading-mobile::after {

    transform: translate(0%, -50%) rotate(180deg);

  }



  .footer-col-block .tf-collapse-content {

    display: none;

  }

}



.footer-bottom {

  position: relative;

  z-index: 5;

}



.footer-bottom .inner-bottom {

  padding: 32px 0px;

  border-top: 1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 15px;

}



@media (max-width: 767px) {

  .footer-bottom .inner-bottom {

    justify-content: center;

  }



  .footer-bottom .inner-bottom>* {

    width: 100%;

    justify-content: center;

  }

}



.footer-bottom .tf-currencies .dropdown>.dropdown-menu {

  transform: translate3d(0px, -26px, 0px) !important;

  inset: auto auto 0px 0px !important;

}



.footer-bottom .tf-currencies .dropdown>.dropdown-menu::after {

  top: unset;

  transform: translate(-50%, 50%) rotate(45deg);

  bottom: 0;

}



@media (min-width: 992px) {



  .footer-bottom .inner-bottom>*:first-child,

  .footer-bottom .inner-bottom>*:last-child {

    flex: 1;

  }



  .footer-bottom .inner-bottom>*:last-child {

    justify-content: end;

  }

}



@media (min-width: 1200px) {



  .footer-wrap-1,

  .footer-wrap-2 {

    width: max-content;

  }

}



.footer-2 {

  background-color: var(--bg-8);

}



.footer-2 .footer-top {

  padding-bottom: 32px;

}



.footer-2 .footer-body {

  padding-top: 48px;

  padding-bottom: 48px;

}



.footer-2 .footer-bottom {

  padding-top: 32px;

}



@media (max-width: 1199px) {

  .footer-2 .footer-body {

    padding-top: 32px;

    padding-bottom: 32px;

  }

}



.footer-body_inner {

  display: flex;

  gap: 40px;

}



.footer-body_inner>*:not(.br-lin) {

  flex: 1;

}



.footer-body_inner .br-lin {

  border-right: 1px solid var(--line);

}



.footer-title {

  padding-bottom: 30px;

}



/*------------ slider banner ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.sw-dot-default {

  margin-top: 24px;

}



.sw-dot-default .swiper-pagination-bullet {

  width: 14px;

  height: 14px;

  background-color: transparent;

  position: relative;

  border: 1px solid transparent;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 1;

}



.sw-dot-default .swiper-pagination-bullet::before {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background-color: var(--text-2);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.sw-dot-default .swiper-pagination-bullet.swiper-pagination-bullet-active {

  border: 1px solid var(--black);

}



.sw-dot-default .swiper-pagination-bullet.swiper-pagination-bullet-active::before {

  background-color: var(--black);

}



@media (max-width: 767px) {

  .sw-dot-default .swiper-pagination-bullet {

    width: 16px;

    height: 16px;

  }



  .sw-dot-default .swiper-pagination-bullet::before {

    width: 6px;

    height: 6px;

  }

}



.sw-dot-default.style-white .swiper-pagination-bullet.swiper-pagination-bullet-active {

  border: 1px solid var(--white);

}



.sw-dot-default.style-white .swiper-pagination-bullet.swiper-pagination-bullet-active::before {

  background-color: var(--white);

}



.sw-dot-default.style-white .swiper-pagination-bullet::before {

  background-color: rgba(255, 255, 255, 0.6);

}



.sw-dot-default.style-primary .swiper-pagination-bullet.swiper-pagination-bullet-active {

  border: 1px solid var(--primary);

}



.sw-dot-default.style-primary .swiper-pagination-bullet.swiper-pagination-bullet-active::before {

  background-color: var(--primary);

}



.sw-dot-default.style-primary .swiper-pagination-bullet::before {

  background-color: var(--text-2);

}



.sw-dot-default.type-small {

  gap: 5px;

}



.sw-dot-default.type-small .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

}



.sw-dot-default.type-small .swiper-pagination-bullet::before {

  width: 4px;

  height: 4px;

  background-color: #AFAFAF;

}



.sw-dot-default.type-small .swiper-pagination-bullet.swiper-pagination-bullet-active {

  border: 1px solid var(--black);

}



.sw-dot-default.type-small .swiper-pagination-bullet.swiper-pagination-bullet-active::before {

  background-color: var(--black);

}



@media (min-width: 1200px) {

  .sw-dot-default {

    margin-top: 35px;

  }



  .sw-dot-default.type-space-2 {

    margin-top: 40px;

  }

}



@media (min-width: 1440px) {

  .sw-dot-default {

    margin-top: 56px;

  }

}



.sw-dot-default-2 {

  display: flex;

  gap: 8px;

  justify-content: center;

  margin-top: 24px;

}



.sw-dot-default-2 .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  background-color: var(--black);

  position: relative;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 0.16;

}



.sw-dot-default-2 .swiper-pagination-bullet.swiper-pagination-bullet-active {

  opacity: 1;

}



.sw-dot-default-2.style-white .swiper-pagination-bullet {

  background-color: var(--white);

}



.sw-dot-default-2.style-primary .swiper-pagination-bullet {

  background-color: var(--primary);

}



@media (min-width: 1200px) {

  .sw-dot-default-2 {

    margin-top: 32px;

  }

}



.tf-sw-nav {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background-color: var(--white);

  color: var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-sw-nav .icon {

  font-size: 20px;

}



.tf-sw-nav:hover {

  background-color: var(--black);

  color: var(--white);

}



.tf-sw-nav.style-2 {

  border: 1px solid var(--line);

}



.tf-sw-nav.style-2:hover {

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}



.tf-sw-nav.style-2.hv-primary:hover {

  background-color: var(--primary);

  border-color: var(--primary);

  color: var(--white);

}



.tf-sw-nav.hover-primary:hover {

  background-color: var(--primary);

  color: var(--white);

}



.tf-sw-nav.swiper-button-disabled {

  pointer-events: none;

  opacity: 0.5;

}



@media (min-width: 1600px) {

  .tf-sw-nav {

    width: 70px;

    height: 70px;

  }

}



@media (min-width: 1200px) {

  .tf-sw-nav.type-small {

    width: 48px;

    height: 48px;

  }



  .tf-sw-nav.type-small-2 {

    width: 64px;

    height: 64px;

  }



  .tf-sw-nav.type-small-2 .icon {

    font-size: 24px;

  }



  .tf-sw-nav.type-small-3 {

    width: 56px;

    height: 56px;

  }



  .tf-sw-nav.type-small-3 .icon {

    font-size: 24px;

  }



  .tf-sw-nav .icon {

    font-size: 24px;

  }

}



@media (max-width: 1199px) {

  .tf-sw-nav.type-small {

    width: 38px;

    height: 38px;

  }

}



.tf-btn-swiper-main {

  position: relative;

}



.tf-btn-swiper-main .tf-sw-pagination {

  position: absolute;

  bottom: 15px;

  z-index: 2;

}



.tf-btn-swiper-main .tf-sw-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

}



.tf-btn-swiper-main .tf-sw-nav.nav-next-swiper {

  right: 25px;

}



.tf-btn-swiper-main .tf-sw-nav.nav-prev-swiper {

  left: 25px;

}



.tf-btn-swiper-main.pst-2 .sw-dot-default {

  position: unset;

}



.tf-btn-swiper-main.pst-2 .tf-sw-nav {

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

}



.tf-btn-swiper-main.pst-2 .tf-sw-nav.nav-next-swiper {

  right: unset;

  left: calc(100% + 32px);

}



.tf-btn-swiper-main.pst-2 .tf-sw-nav.nav-prev-swiper {

  left: unset;

  right: calc(100% + 32px);

}



.tf-btn-swiper-main.pst-3 .sw-dot-default {

  position: unset;

}



.tf-btn-swiper-main.pst-3 .tf-sw-nav {

  top: 50%;

  transform: translateY(calc(-50% - 42px));

  z-index: 2;

}



.tf-btn-swiper-main.pst-3 .tf-sw-nav.nav-next-swiper {

  right: 15px;

}



.tf-btn-swiper-main.pst-3 .tf-sw-nav.nav-prev-swiper {

  left: 15px;

}



.tf-btn-swiper-main.pst-5 .tf-sw-nav {

  position: unset;

  transform: unset;

}



.tf-btn-swiper-main.pst-5 .band-swiper {

  position: absolute;

  bottom: 24px;

  right: 24px;

  gap: 12px;

}



@media (min-width: 576px) {

  .tf-btn-swiper-main.pst-5 .tf-sw-nav {

    display: flex !important;

  }

}



@media (min-width: 1440px) {

  .tf-btn-swiper-main.pst-2 .tf-sw-nav {

    transform: translateY(calc(50% - 70px));

  }



  .tf-btn-swiper-main.pst-2 .tf-sw-nav.nav-next-swiper {

    left: calc(100% + 32px);

  }



  .tf-btn-swiper-main.pst-2 .tf-sw-nav.nav-prev-swiper {

    right: calc(100% + 32px);

  }

}



@media (min-width: 1200px) {

  .tf-btn-swiper-main .tf-sw-pagination {

    bottom: 40px;

  }



  .tf-btn-swiper-main .tf-sw-nav.nav-next-swiper {

    right: 48px;

  }



  .tf-btn-swiper-main .tf-sw-nav.nav-prev-swiper {

    left: 48px;

  }

}



@media (min-width: 1800px) {

  .tf-btn-swiper-main.pst-3 .tf-sw-nav.nav-next-swiper {

    right: unset;

    left: calc(100% + 32px);

  }



  .tf-btn-swiper-main.pst-3 .tf-sw-nav.nav-prev-swiper {

    left: unset;

    right: calc(100% + 32px);

  }



  .tf-btn-swiper-main.pst-4 .tf-sw-nav.nav-next-swiper {

    right: unset;

    left: calc(100% + 40px);

  }



  .tf-btn-swiper-main.pst-4 .tf-sw-nav.nav-prev-swiper {

    left: unset;

    right: calc(100% + 40px);

  }

}



@media (max-width: 1799px) {

  .tf-btn-swiper-main .tf-sw-nav {

    display: none !important;

  }

}



.sw-dot-default {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

}



.sw-dot-default.swiper-pagination-lock {

  margin: 0;

}



@media (min-width: 768px) {

  .sw-dot-default {

    gap: 9px;

  }

}



.slider_effect_fade .swiper-slide.swiper-slide-active .fade-item {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

}



.slider_effect_fade .swiper-slide.swiper-slide-active .scale-item {

  transform: scale(1);

}



.slider_effect_fade .swiper-slide.swiper-slide-active .width-item {

  width: 100%;

}



.slider_effect_fade .fade-item {

  transform: translateY(100px);

  opacity: 0;

  visibility: hidden;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.slider_effect_fade .fade-item.fade-box {

  transition-delay: 0.4s;

  transform: translateY(0px);

}



.slider_effect_fade .fade-item.fade-item-1 {

  transition-delay: 0.5s;

}



.slider_effect_fade .fade-item.fade-item-2 {

  transition-delay: 0.6s;

}



.slider_effect_fade .fade-item.fade-item-3 {

  transition-delay: 0.7s;

}



.slider_effect_fade .fade-item.fade-item-4 {

  transition-delay: 0.8s;

}



.slider_effect_fade .scale-item {

  transform: scale(1.2);

  transition: all 0.5s linear;

}



.slider_effect_fade .scale-item.scale-item-1 {

  transition-delay: 0.3s;

}



.slider_effect_fade .width-item {

  width: 1%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.slider_effect_fade .width-item.width-item-3 {

  transition-delay: 0.7s;

}



@media (max-width: 767px) {

  .slider_effect_scale-md .swiper-slide {

    overflow: hidden;

  }



  .slider_effect_scale-md .swiper-slide.swiper-slide-active .scale-item {

    transform: scale(1);

  }



  .slider_effect_scale-md .scale-item {

    transform: scale(1.2);

    transition: all 1s linear;

  }

}



@media (max-width: 767px) {

  .slider_effect_fade-md .swiper-slide.swiper-slide-active .fade-item {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

  }



  .slider_effect_fade-md .fade-item {

    transform: translateY(100px);

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

  }



  .slider_effect_fade-md .fade-item.fade-box {

    transition-delay: 0.4s;

    transform: translateY(0px);

  }



  .slider_effect_fade-md .fade-item.fade-item-1 {

    transition-delay: 0.5s;

  }



  .slider_effect_fade-md .fade-item.fade-item-2 {

    transition-delay: 0.6s;

  }



  .slider_effect_fade-md .fade-item.fade-item-3 {

    transition-delay: 0.7s;

  }



  .slider_effect_fade-md .fade-item.fade-item-4 {

    transition-delay: 0.8s;

  }

}



@media (max-width: 1439px) {

  .tf-slideshow .slider-wrap {

    height: 650px;

  }

}



@media (max-width: 767px) {

  .tf-slideshow .slider-wrap {

    height: 600px;

  }

}



@media (max-width: 575px) {

  .tf-slideshow .slider-wrap {

    height: 450px;

  }

}



@media (max-width: 767px) {

  .tf-slideshow.type-abs .sld_content {

    transform: translateY(calc(-50% + 15px));

  }

}



@media (max-width: 1199px) {

  .tf-slideshow .wg-cls-2 .image {

    width: 100%;

  }



  .tf-slideshow .wg-cls-2 .image img {

    height: 500px;

    width: 100%;

    object-fit: cover;

    object-position: top;

  }

}



@media (max-width: 767px) {

  .tf-slideshow-2 .slider-wrap {

    height: 400px;

  }

}



@media (max-width: 575px) {

  .tf-slideshow-2 .slider-wrap {

    height: 350px;

  }

}



.hover-sw-nav .tf-sw-nav {

  visibility: hidden;

}



.hover-sw-nav .tf-sw-nav.nav-next-swiper {

  margin-right: 20px;

}



.hover-sw-nav .tf-sw-nav.nav-prev-swiper {

  margin-left: 20px;

}



.hover-sw-nav:hover .tf-sw-nav {

  margin: 0;

  visibility: visible;

}



.slider-wrap {

  position: relative;

}



.slider-wrap.has-overlay::after {

  content: "";

  inset: 0;

  position: absolute;

  z-index: 0;

  background: linear-gradient(-90deg, rgba(41, 27, 27, 0) 32.95%, #291B1B 80.78%);

}



.slider-wrap.style-2 .sub-title_sld,

.slider-wrap.style-2 .title_sld {

  margin-bottom: 15px;

}



.slider-wrap .type-radius {

  border-radius: 16px;

  overflow: hidden;

}



.slider-wrap.style-5 .sub-title_sld {

  margin-bottom: 12px;

}



.slider-wrap.style-5 .title_sld {

  margin-bottom: 24px;

}



.slider-wrap.style-7 .title_sld {

  margin-bottom: 32px;

}



.slider-wrap.style-7 .sub-text_sld {

  margin-bottom: 40px;

}



@media (min-width: 1200px) {



  .slider-wrap.style-2 .sub-title_sld,

  .slider-wrap.style-2 .title_sld {

    margin-bottom: 24px;

  }



  .slider-wrap.style-4 .title_sld {

    margin-bottom: 24px;

  }

}



@media (min-width: 1440px) {

  .slider-wrap.style-2 .sub-text_sld {

    margin-bottom: 56px;

  }



  .slider-wrap.style-3 .sub-title_sld-2 {

    margin-bottom: -16px;

  }



  .slider-wrap.style-3 .sub-text_sld {

    margin-bottom: 40px;

  }



  .slider-wrap.style-6 .title_sld {

    margin-bottom: 32px;

  }



  .slider-wrap.style-6 .sub-text_sld {

    margin-bottom: 40px;

  }



  .slider-wrap.has-nav {

    min-height: 639px;

  }

}



@media (max-width: 575px) {

  .slider-wrap.style-2 .title_sld {

    margin-bottom: 24px;

  }

}



.slider-wrap_2 {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

}



.slider-wrap_2>* {

  width: 100%;

  min-height: 400px;

}



.slider-wrap_2 .type-radius {

  border-radius: 24px;

  overflow: hidden;

}



.slider-wrap_2 .sld_content {

  padding-top: 30px;

  padding-bottom: 30px;

}



@media (min-width: 768px) {

  .slider-wrap_2 {

    flex-wrap: nowrap;

  }



  .slider-wrap_2>* {

    width: 50%;

  }

}



@media (max-width: 767px) {

  .slider-wrap_2 {

    height: auto !important;

    display: grid;

  }

}



@media (max-width: 575px) {

  .slider-wrap_2>* {

    min-height: 350px;

  }

}



.sld_content {

  left: 0;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  position: absolute;

  z-index: 2;

}



.sld_content .title_sld {

  margin-bottom: 12px;

}



.sld_content .sub-title_sld,

.sld_content .sub-text_sld {

  margin-bottom: 30px;

}



.sld_content.only-title .title_sld {

  margin-bottom: 30px;

}



.sld_content.type-2 {

  top: unset;

  left: 24px;

  bottom: 44px;

  right: 24px;

  transform: unset;

}



.sld_content.type-2 .title_sld {

  margin-bottom: 4px;

}



.sld_content.type-2 .br-line {

  margin-top: 16px;

  margin-bottom: 16px;

}



.sld_content.type-2 .content-sld_wrap {

  background-color:rgba(255,255,255,0.6);

  padding: 24px 32px;

  max-width: 480px;

  width: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.sld_content.type-3,

.sld_content.type-4 {

  top: unset;

  transform: unset;

  left: 16px;

  bottom: 32px;

  right: 16px;

}



.sld_content.pst-center {

  text-align: center;

}



.sld_content.pst-center .content-sld_wrap {

  padding: 30px 15px;

  background-color: var(--white);

  margin: auto;

  max-width: 624px;

  width: 100%;

  overflow: hidden;

}



.sld_content.type-space-x {

  left: 16px;

  right: 16px;

}



.sld_content.type-normal {

  position: unset;

  left: unset;

  right: unset;

  top: unset;

  transform: unset;

  display: flex;

  justify-self: start;

}



.sld_content.type-normal .sub-title_sld,

.sld_content.type-normal .title_sld {

  margin-bottom: 24px;

}



.sld_content.type-normal .sub-text_sld {

  margin-bottom: 40px;

}



@media (min-width: 1200px) {

  .sld_content.only-title .title_sld {

    margin-bottom: 56px;

  }



  .sld_content .sub-title_sld {

    margin-bottom: 40px;

  }



  .sld_content .sub-text_sld {

    margin-bottom: 40px;

  }



  .sld_content.type-2 {

    bottom: 24px;

  }



  .sld_content.type-3 {

    left: 32px;

    right: 32px;

  }



  .sld_content.type-4 {

    left: 40px;

    bottom: 40px;

    right: 40px;

  }



  .sld_content.type-center .content-sld_wrap {

    max-width: 607px;

    width: 100%;

  }



  .sld_content.style-2 {

    bottom: 24px;

  }



  .sld_content.pst-center .content-sld_wrap {

    padding: 48px 32px;

  }



  .sld_content.type-space-x {

    left: 32px;

    right: 32px;

  }



  .sld_content.type-normal .sub-text_sld {

    margin-bottom: 56px;

  }

}



@media (max-width: 575px) {

  .sld_content .title_sld {

    margin-bottom: 24px;

  }



  .sld_content .sub-text_sld {

    display: none;

  }



  .sld_content.type-normal .sub-text_sld {

    display: block;

  }

}



.slideshow-wrap {

  position: absolute;

  top: 60px;

  left: 0;

  right: 0;

  bottom: 60px;

  z-index: 3;

  pointer-events: none;

}



.slideshow-wrap .nav-shop-by {

  pointer-events: all;

}



.title_sld {

  font-weight: 600;

  color: var(--black);

}



.sub-title_sld.has-icon {

  display: flex;

  align-items: center;

  gap: 12px;

}



.sub-title_sld-2 {

  font-size: clamp(48px, 5vw, 100px);

  line-height: 1;

}



.price_sld {

  margin-bottom: 30px;

}



@media (min-width: 1200px) {

  .price_sld {

    margin-bottom: 40px;

    align-items: end !important;

  }



  .price_sld .price-old {

    padding-bottom: 7px;

  }

}



.sld_image {

  height: 100%;

  overflow: hidden;

}



.sld_image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.sld_image.image__right img {

  object-position: 60% center;

}



.group-btn-slider {

  display: flex;

  gap: 8px;

}



.swiper-grid.grid-colum-3 .swiper-wrapper {

  gap: 12px;

}



.swiper-grid.grid-colum-3 .swiper-slide {

  margin: 0 !important;

}



@media (min-width: 1200px) {

  .swiper-grid.grid-colum-3 .swiper-wrapper {

    gap: 48px;

  }

}



@media (min-width: 1440px) {

  .swiper-grid .swiper-wrapper {

    gap: 40px 48px;

  }



  .swiper-grid .swiper-wrapper.type-normal {

    gap: 48px;

  }



  .swiper-grid .swiper-slide {

    margin: 0 !important;

  }

}



@media (max-width: 767px) {

  .swiper-grid .swiper-wrapper {

    gap: 32px 12px;

  }



  .swiper-grid .swiper-slide {

    margin: 0 !important;

  }

}



.grid-colum-3 .card-product .wishlist,

.grid-colum-3 .card-product .compare {

  display: block;

}



@media (min-width: 576px) and (max-width: 767px) {



  .grid-colum-3 .card-product .wishlist,

  .grid-colum-3 .card-product .compare {

    display: none;

  }

}



.tes_thumb .group-btn-slider {

  margin-top: 30px;

}



@media (min-width: 576px) {

  .tes_thumb .group-btn-slider {

    padding-left: 55px;

  }

}



@media (min-width: 1200px) {

  .tes_thumb .group-btn-slider {

    margin-top: 48px;

    padding-left: 86px;

  }

}



@media (min-width: 1440px) {

  .tes_thumb .group-btn-slider {

    padding-left: 104px;

  }

}



.wrap-sw-over {

  margin-left: -10px;

  padding-left: 10px;

  margin-bottom: -10px;

  padding-bottom: 10px;

}



@media (min-width: 1200px) {

  .wrap-sw-over {

    margin-left: -40px;

    padding-left: 40px;

    margin-bottom: -40px;

    padding-bottom: 40px;

  }

}



@media (max-width: 1199px) {



  .tf-swiper .article-blog.style-row .blog-content,

  .tf-swiper .article-blog.style-row .entry_ima {

    flex: unset;

  }

}



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

  .tf-swiper .article-blog.style-row {

    display: flex;

    flex-direction: column;

    gap: 20px;

  }



  .tf-swiper .article-blog.style-row .entry_image {

    aspect-ratio: 0;

  }

}



.swiper-medical {

  margin-bottom: -76px;

  padding-bottom: 76px;

}



.swiper-medical .swiper-slide:not(:last-child) .card-product {

  border-right: 1px solid var(--line);

}



.slideshow-container {

  display: flex;

  gap: 12px;

}



.slideshow-container .sw-slide-show {

  width: 100%;

}



.slideshow-container .col-right {

  gap: 12px;

}



@media (min-width: 1600px) {

  .slideshow-container .sw-slide-show {

    width: 70.22%;

  }



  .slideshow-container .col-right {

    width: calc(29.78% - 12px);

  }



  .slideshow-container.width-2 {

    max-width: 1152px;

    margin-left: auto;

  }



  .slideshow-container.width-3 {

    max-width: 1168px;

    margin-left: auto;

  }



  .slideshow-container.width-3 .sw-slide-show {

    width: 100%;

  }

}



@media (min-width: 768px) {

  .slideshow-container.width-2 .sw-slide-show {

    width: 65.97%;

  }



  .slideshow-container.width-2 .col-right {

    width: calc(34.03% - 12px);

  }

}



@media (max-width: 767px) {

  .slideshow-container {

    display: unset;

  }



  .slideshow-container:not(.width-3) .sw-slide-show {

    margin-bottom: 12px;

  }



  .slideshow-container .col-right {

    display: grid;

  }



  .slideshow-container .box-image_image img {

    height: 242px;

  }

}



.slider-book .swiper-slide {

  opacity: 0 !important;

}



.slider-book .swiper-slide.swiper-slide-active {

  opacity: 1 !important;

}



/*------------ button ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.tf-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  font-size: 18px;

  line-height: 24px;

  padding: 16px 40px;

  position: relative;

  background-color: var(--black);

  color: var(--white);

  border-radius: 999px;

  font-weight: 600;

}



.tf-btn .icon {

  font-size: 18px;

}



.tf-btn.bg-green {

  background-color: #499F30 !important;

}



.tf-btn.type-very-small {

  padding-top: 9px;

  padding-bottom: 9px;

  padding-left: 9px;

  padding-right: 9px;

}



.tf-btn.style-2 {

  color: var(--black);

  background-color: var(--bg);

}



.tf-btn.style-2:hover {

  color: var(--white);

  background-color: var(--primary);

}



.tf-btn.btn-white {

  background-color: var(--white);

  color: var(--black);

}



.tf-btn.btn-fill-sec {

  background-color: var(--secondary);

  color: var(--bg-4);

}



.tf-btn.style-line {

  border: 1px solid var(--line);

  background-color: var(--white);

  color: var(--black);

}



.tf-btn.style-line:hover {

  background-color: var(--line);

}



.tf-btn.btn-primary {

  background-color: var(--primary);

}



.tf-btn.btn-primary:hover {

  background-color: var(--black);

}



.tf-btn.btn-black {

  background-color: #000;

}



.tf-btn.btn-black:hover {

  background-color: var(--primary);

}



.tf-btn.btn-secondary {

  border: 1px solid var(--secondary);

  background-color: var(--secondary);

  color: var(--black);

}



.tf-btn.btn-secondary:hover {

  background-color: var(--primary);

  color: var(--white);

  border-color: var(--primary);

}



.tf-btn.btn-purple {

  background-color: var(--bg-4);

  color: var(--white);

}



.tf-btn.btn-yellow {

  background-color: #FFC520;

  color: var(--black);

  font-weight: 600;

}



.tf-btn.btn-blue {

  background-color: rgba(67, 107, 228, 0.1019607843);

  color: var(--black);

}



.tf-btn.btn-blue:hover {

  background-color: #436BE4;

  color: var(--white);

}



.tf-btn.w-100 {

  padding-left: 12px;

  padding-right: 12px;

}



.tf-btn.style-transparent {

  background-color: transparent;

  color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

}



.tf-btn.style-transparent:hover {

  background-color: var(--black);

  color: var(--white);

}



.tf-btn.type-small-5 {

  padding: 8px 20px;

}



@media (min-width: 992px) {

  .tf-btn.type-small {

    padding: 12px 24px;

  }



  .tf-btn.type-small-2 {

    padding-left: 30.5px;

    padding-right: 30.5px;

  }



  .tf-btn.type-small-3 {

    padding: 16px 25px;

  }



  .tf-btn.type-small-4 {

    padding-top: 14px;

    padding-bottom: 14px;

  }



  .tf-btn.style-line {

    padding-top: 15px;

    padding-bottom: 15px;

  }

}



@media (min-width: 1200px) {

  .tf-btn.type-large {

    padding: 19px 74px;

  }



  .tf-btn.px-xxl-32 {

    padding-left: 32px;

    padding-right: 32px;

  }

}



@media (max-width: 991px) {

  .tf-btn {

    padding: 13px 24px;

  }



  .tf-btn.style-line {

    padding-top: 12px;

    padding-bottom: 12px;

  }



  .tf-btn.w-100 {

    padding: 13px;

  }

}



.animate-btn {

  position: relative;

  overflow: hidden;

}



.animate-btn:hover::after {

  animation: shine-reverse 1s forwards;

}



.animate-btn:after {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);

  top: 0;

  left: -100%;

  opacity: 0.6;

}



button.animate-btn::after,

.animate-btn.tf-btn::after {

  background-image: linear-gradient(120deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0) 70%);

}



.animate-btn.animate-dark::after {

  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25), transparent);

}



.tf-btn-link {

  display: flex;

  align-items: center;

  gap: 12px;

}



.tf-btn-link .icon {

  font-size: 18px;

}



.tf-btn-line {

  font-weight: 700;

  font-size: 16px;

  line-height: 21px;

  letter-spacing: 1.92px;

  text-transform: uppercase;

  color: var(--black);

  position: relative;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: linear-gradient(to right, var(--primary) 50%, var(--black) 50%);

  background-size: 200% 100%;

  background-position: right;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  transition: background-position 0.3s linear;

  cursor: pointer;

}



.tf-btn-line::after {

  position: absolute;

  content: "";

  left: 0;

  right: 0;

  bottom: 3px;

  height: 1px;

  background-color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-btn-line::before {

  position: absolute;

  content: "";

  left: 0;

  width: 0;

  bottom: 3px;

  height: 1px;

  background-color: var(--primary);

  transition: width 0.3s linear;

  z-index: 1;

}



.tf-btn-line.style-white {

  color: var(--white);

  background: linear-gradient(to right, var(--primary) 50%, var(--white) 50%);

  background-size: 200% 100%;

  background-position: right;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  transition: background-position 0.3s linear;

}



.tf-btn-line.style-white::after {

  background-color: var(--white);

}



.tf-btn-line.style-gray {

  color: var(--text-2);

  background: linear-gradient(to right, var(--black) 50%, var(--text-2) 50%);

  background-size: 200% 100%;

  background-position: right;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  transition: background-position 0.3s linear;

}



.tf-btn-line.style-gray::after {

  background-color: var(--text-2);

}



.tf-btn-line.style-gray::before {

  background-color: var(--black);

}



.tf-btn-line.has-icon {

  gap: 8px;

}



.tf-btn-line.has-icon .icon {

  font-size: 20px;

}



.tf-btn-line.none-line::before,

.tf-btn-line.none-line::after {

  display: none;

}



.tf-btn-line:hover {

  background-position: left;

}



.tf-btn-line:hover::before {

  width: 100%;

}



.tf-btn-line.active {

  background-position: left;

}



.tf-btn-line.active::before {

  width: 100%;

}



@media (min-width: 1200px) {



  .tf-btn-line.style-large::after,

  .tf-btn-line.style-large::before {

    height: 3px;

    bottom: 0;

  }



  .tf-btn-line.line-bot-0::after,

  .tf-btn-line.line-bot-0::before {

    bottom: 0;

  }

}



@media (max-width: 575px) {

  .tf-btn-line.sm-letter-1 {

    letter-spacing: 1px;

  }

}



.tf-loading {

  font-size: 14px;

  line-height: 20px;

  width: auto;

  height: 42px;

  min-width: 118px;

  padding: 10px;

}



.tf-loading.loadmore .spinner-circle {

  display: none;

}



.tf-loading.loadmore.loading .spinner-circle {

  display: block;

}



.tf-loading.loadmore.loading .text {

  display: none;

}



.tf-loading.loadmore:hover .spinner-child::before {

  background-color: var(--white);

}



.tf-loading.loadmore .spinner-child::before {

  background-color: var(--main);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.spinner-circle {

  width: 24px;

  height: 24px;

  position: relative;

}



.spinner-circle .spinner-child {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

}



.spinner-circle .spinner-child::before {

  content: "";

  display: block;

  margin: 0 auto;

  width: 20%;

  height: 20%;

  background-color: var(--white);

  border-radius: 100%;

  -webkit-animation: spinner-circleBounceDelay 1s infinite ease-in-out both;

  animation: spinner-circleBounceDelay 1s infinite ease-in-out both;

}



.spinner-circle .spinner-circle2 {

  -webkit-transform: rotate(40deg);

  -ms-transform: rotate(40deg);

  transform: rotate(40deg);

}



.spinner-circle .spinner-circle2::before {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}



.spinner-circle .spinner-circle3 {

  -webkit-transform: rotate(80deg);

  -ms-transform: rotate(80deg);

  transform: rotate(80deg);

}



.spinner-circle .spinner-circle3::before {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}



.spinner-circle .spinner-circle4 {

  -webkit-transform: rotate(120deg);

  -ms-transform: rotate(120deg);

  transform: rotate(120deg);

}



.spinner-circle .spinner-circle4::before {

  -webkit-animation-delay: -0.7s;

  animation-delay: -0.7s;

}



.spinner-circle .spinner-circle5 {

  -webkit-transform: rotate(160deg);

  -ms-transform: rotate(160deg);

  transform: rotate(160deg);

}



.spinner-circle .spinner-circle5::before {

  -webkit-animation-delay: -0.6s;

  animation-delay: -0.6s;

}



.spinner-circle .spinner-circle6 {

  -webkit-transform: rotate(200deg);

  -ms-transform: rotate(200deg);

  transform: rotate(200deg);

}



.spinner-circle .spinner-circle6::before {

  -webkit-animation-delay: -0.5s;

  animation-delay: -0.5s;

}



.spinner-circle .spinner-circle7 {

  -webkit-transform: rotate(240deg);

  -ms-transform: rotate(240deg);

  transform: rotate(240deg);

}



.spinner-circle .spinner-circle7::before {

  -webkit-animation-delay: -0.4s;

  animation-delay: -0.4s;

}



.spinner-circle .spinner-circle8 {

  -webkit-transform: rotate(280deg);

  -ms-transform: rotate(280deg);

  transform: rotate(280deg);

}



.spinner-circle .spinner-circle8::before {

  -webkit-animation-delay: -0.3s;

  animation-delay: -0.3s;

}



.spinner-circle .spinner-circle9 {

  -webkit-transform: rotate(320deg);

  -ms-transform: rotate(320deg);

  transform: rotate(320deg);

}



.spinner-circle .spinner-circle9::before {

  -webkit-animation-delay: -0.2s;

  animation-delay: -0.2s;

}



.tf-pin-btn {

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  position: relative;

}



.tf-pin-btn span {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background-color: rgba(0, 0, 0, 0.2);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-pin-btn span::before {

  position: absolute;

  content: "";

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border: solid 1px rgba(0, 0, 0, 0.2);

  border-radius: 50%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-pin-btn span::before {

  animation: ripple-line 2s linear infinite;

}



.tf-pin-btn span::after {

  position: absolute;

  content: "";

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background-color: var(--white);

}



.tf-btn-icon {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--black);

}



.tf-btn-icon i {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: var(--black);

  font-size: 20px;

}



.tf-btn-icon.style-white {

  color: var(--white);

}



.tf-btn-icon.style-white i {

  color: var(--white);

}



.tf-btn-icon:hover {

  color: var(--primary);

}



.tf-btn-icon:hover i {

  animation: link-icon 0.3s linear;

  color: var(--primary);

}



/*------------ form ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

form {

  position: relative;

  z-index: 30;

}



form textarea,

form input[type=text],

form input[type=password],

form input[type=datetime],

form input[type=datetime-local],

form input[type=date],

form input[type=month],

form input[type=time],

form input[type=week],

form input[type=number],

form input[type=email],

form input[type=url],

form input[type=search],

form input[type=tel],

form input[type=color] {

  outline: 0;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  width: 100%;

  padding: 15px 24px;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  border: 1px solid var(--bg-2);

  border-radius: 999px;

  color: var(--black);

  background-color: var(--bg-2);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



form textarea::placeholder,

form input[type=text]::placeholder,

form input[type=password]::placeholder,

form input[type=datetime]::placeholder,

form input[type=datetime-local]::placeholder,

form input[type=date]::placeholder,

form input[type=month]::placeholder,

form input[type=time]::placeholder,

form input[type=week]::placeholder,

form input[type=number]::placeholder,

form input[type=email]::placeholder,

form input[type=url]::placeholder,

form input[type=search]::placeholder,

form input[type=tel]::placeholder,

form input[type=color]::placeholder {

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  color: var(--text-2);

}



form textarea.style-def,

form input[type=text].style-def,

form input[type=password].style-def,

form input[type=datetime].style-def,

form input[type=datetime-local].style-def,

form input[type=date].style-def,

form input[type=month].style-def,

form input[type=time].style-def,

form input[type=week].style-def,

form input[type=number].style-def,

form input[type=email].style-def,

form input[type=url].style-def,

form input[type=search].style-def,

form input[type=tel].style-def,

form input[type=color].style-def {

  background-color: transparent;

  padding: 0;

  border: 0;

  border-radius: unset;

}



form textarea.style-stroke,

form input[type=text].style-stroke,

form input[type=password].style-stroke,

form input[type=datetime].style-stroke,

form input[type=datetime-local].style-stroke,

form input[type=date].style-stroke,

form input[type=month].style-stroke,

form input[type=time].style-stroke,

form input[type=week].style-stroke,

form input[type=number].style-stroke,

form input[type=email].style-stroke,

form input[type=url].style-stroke,

form input[type=search].style-stroke,

form input[type=tel].style-stroke,

form input[type=color].style-stroke {

  border-color: var(--line);

  background-color: transparent;

}



form textarea.style-stroke-2,

form input[type=text].style-stroke-2,

form input[type=password].style-stroke-2,

form input[type=datetime].style-stroke-2,

form input[type=datetime-local].style-stroke-2,

form input[type=date].style-stroke-2,

form input[type=month].style-stroke-2,

form input[type=time].style-stroke-2,

form input[type=week].style-stroke-2,

form input[type=number].style-stroke-2,

form input[type=email].style-stroke-2,

form input[type=url].style-stroke-2,

form input[type=search].style-stroke-2,

form input[type=tel].style-stroke-2,

form input[type=color].style-stroke-2 {

  border-color: var(--line-2);

  background-color: transparent;

  color: var(--white);

}



form textarea.style-stroke-2:focus,

form input[type=text].style-stroke-2:focus,

form input[type=password].style-stroke-2:focus,

form input[type=datetime].style-stroke-2:focus,

form input[type=datetime-local].style-stroke-2:focus,

form input[type=date].style-stroke-2:focus,

form input[type=month].style-stroke-2:focus,

form input[type=time].style-stroke-2:focus,

form input[type=week].style-stroke-2:focus,

form input[type=number].style-stroke-2:focus,

form input[type=email].style-stroke-2:focus,

form input[type=url].style-stroke-2:focus,

form input[type=search].style-stroke-2:focus,

form input[type=tel].style-stroke-2:focus,

form input[type=color].style-stroke-2:focus {

  border-color: var(--white);

}



form textarea.style-stroke-3,

form input[type=text].style-stroke-3,

form input[type=password].style-stroke-3,

form input[type=datetime].style-stroke-3,

form input[type=datetime-local].style-stroke-3,

form input[type=date].style-stroke-3,

form input[type=month].style-stroke-3,

form input[type=time].style-stroke-3,

form input[type=week].style-stroke-3,

form input[type=number].style-stroke-3,

form input[type=email].style-stroke-3,

form input[type=url].style-stroke-3,

form input[type=search].style-stroke-3,

form input[type=tel].style-stroke-3,

form input[type=color].style-stroke-3 {

  border-color: var(--line-3);

  background-color: var(--line-3);

  color: var(--white);

}



form textarea.style-stroke-3::placeholder,

form input[type=text].style-stroke-3::placeholder,

form input[type=password].style-stroke-3::placeholder,

form input[type=datetime].style-stroke-3::placeholder,

form input[type=datetime-local].style-stroke-3::placeholder,

form input[type=date].style-stroke-3::placeholder,

form input[type=month].style-stroke-3::placeholder,

form input[type=time].style-stroke-3::placeholder,

form input[type=week].style-stroke-3::placeholder,

form input[type=number].style-stroke-3::placeholder,

form input[type=email].style-stroke-3::placeholder,

form input[type=url].style-stroke-3::placeholder,

form input[type=search].style-stroke-3::placeholder,

form input[type=tel].style-stroke-3::placeholder,

form input[type=color].style-stroke-3::placeholder {

  color: var(--white);

}



form textarea.style-stroke-3:focus,

form input[type=text].style-stroke-3:focus,

form input[type=password].style-stroke-3:focus,

form input[type=datetime].style-stroke-3:focus,

form input[type=datetime-local].style-stroke-3:focus,

form input[type=date].style-stroke-3:focus,

form input[type=month].style-stroke-3:focus,

form input[type=time].style-stroke-3:focus,

form input[type=week].style-stroke-3:focus,

form input[type=number].style-stroke-3:focus,

form input[type=email].style-stroke-3:focus,

form input[type=url].style-stroke-3:focus,

form input[type=search].style-stroke-3:focus,

form input[type=tel].style-stroke-3:focus,

form input[type=color].style-stroke-3:focus {

  border-color: var(--white);

}



form textarea:focus,

form input[type=text]:focus,

form input[type=password]:focus,

form input[type=datetime]:focus,

form input[type=datetime-local]:focus,

form input[type=date]:focus,

form input[type=month]:focus,

form input[type=time]:focus,

form input[type=week]:focus,

form input[type=number]:focus,

form input[type=email]:focus,

form input[type=url]:focus,

form input[type=search]:focus,

form input[type=tel]:focus,

form input[type=color]:focus {

  border-color: var(--black);

}



@media (max-width: 991px) {



  form textarea,

  form input[type=text],

  form input[type=password],

  form input[type=datetime],

  form input[type=datetime-local],

  form input[type=date],

  form input[type=month],

  form input[type=time],

  form input[type=week],

  form input[type=number],

  form input[type=email],

  form input[type=url],

  form input[type=search],

  form input[type=tel],

  form input[type=color] {

    padding: 12px 24px;

  }

}



form button,

form input[type=button],

form input[type=reset],

form input[type=submit] {

  background-color: transparent;

  overflow: hidden;

  padding: 0;

}



form textarea {

  height: 150px;

  border-radius: 32px;

  resize: none;

}



form .cols {

  gap: 16px;

}



@media (min-width: 1200px) {

  form .cols {

    gap: 24px;

  }

}



form .form_content {

  gap: 16px;

  display: grid;

}



@media (min-width: 1200px) {

  form .form_content {

    gap: 24px;

  }

}



form.style-btn-abs {

  position: relative;

}



form.style-btn-abs .btn-submit {

  position: absolute;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

}



form.style-btn-abs .btn-submit .icon {

  font-size: 24px;

}



form.style-btn-abs input {

  padding-left: 48px;

}



form.style-btn-abs-end {

  position: relative;

}



form.style-btn-abs-end .btn-submit {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  right: 24px;

}



form.style-btn-abs-end .btn-submit .icon {

  font-size: 20px;

}



form.style-btn-abs-end input {

  padding-right: 48px;

}



input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



.password-wrapper {

  position: relative;

}



.password-wrapper .toggle-pass {

  position: absolute;

  right: 16px;

  top: 50%;

  transform: translateY(-50%);

  cursor: pointer;

}



.tf-check {

  position: relative;

  background: transparent;

  cursor: pointer;

  outline: 0;

  -webkit-appearance: none;

  width: 24px;

  height: 24px;

  min-width: 24px;

  border: 1px solid var(--line);

  padding: 0;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  background-color: var(--white);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-check:checked {

  border-color: var(--black);

  background-color: var(--black);

}



.tf-check:checked::before {

  opacity: 1;

  transform: scale(1);

}



.tf-check::before {

  font-weight: 500;

  font-family: "icomoon";

  content: "\e930";

  position: absolute;

  color: var(--white);

  opacity: 0;

  font-size: 16px;

  transform: scale(0);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-check.style-2 {

  width: 22px;

  height: 22px;

  min-width: 22px;

}



.tf-check.style-2::before {

  font-size: 14px;

}



.tf-check.style-3 {

  width: 18px;

  height: 18px;

  min-width: 18px;

  border-radius: 2px;

}



.tf-check.style-3::before {

  font-size: 12px;

}



.tf-check.style-white {

  background-color: var(--black);

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.checkbox-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

}



.checkbox-wrap input {

  padding: 0;

}



.checkbox-wrap label {

  cursor: pointer;

}



.checkbox-wrap .type-2 {

  gap: 8px;

}



.tf-field {

  position: relative;

}



.tf-field .tf-input {

  padding: 22px 0px 3px !important;

}



.tf-field .tf-input:not(:placeholder-shown)~.tf-lable,

.tf-field .tf-input:focus~.tf-lable {

  top: 0;

  transform: translateY(0%);

  font-size: 12px;

  line-height: 20px;

  letter-spacing: 0;

}



.tf-field .tf-input::placeholder {

  color: transparent;

}



.tf-field .tf-lable {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  cursor: text;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  font-size: 16px;

  line-height: 24px;

  letter-spacing: -0.32px;

  pointer-events: none;

}



.tf-field .tf-lable.type-2 {

  top: 22px;

  transform: 0;

}



.tf-check-rounded {

  padding: 0 !important;

  position: relative;

  border: 1px solid #9a9a9a;

  border-radius: 50%;

  background: none;

  cursor: pointer;

  outline: 0;

  height: 16px;

  width: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--white);

  -webkit-appearance: none;

}



.tf-check-rounded::before {

  content: "";

  position: absolute;

  border-radius: 50%;

  width: 8px;

  height: 8px;

  background-color: var(--black);

  opacity: 0;

}



.tf-check-rounded:checked {

  border-color: var(--black);

}



.tf-check-rounded:checked::before {

  opacity: 1;

}



.tf-check-rounded.style-2 {

  background-color: var(--bg-2);

  border-color: var(--bg-2);

  width: 18px;

  height: 18px;

}



.tf-check-rounded.style-2:checked {

  border-color: var(--black);

  background-color: var(--white);

}



.tf-check-rounded.style-2::before {

  width: 10px;

  height: 10px;

}



@media (min-width: 1200px) {

  .tf-check-rounded {

    height: 18px;

    width: 18px;

  }



  .tf-check-rounded::before {

    width: 10px;

    height: 10px;

  }



  .tf-check-rounded.style-2 {

    width: 22px;

    height: 22px;

  }



  .tf-check-rounded.style-2::before {

    width: 16px;

    height: 16px;

  }

}



.form_sub .f-content {

  display: flex;

  align-items: center;

  gap: 12px;

}



.form_sub .f-content input::placeholder {

  font-weight: 400;

  font-size: 16px;

  line-height: 22px;

}



.form_sub.has_check .f-content {

  margin-bottom: 16px;

}



@media (max-width: 991px) {

  .form_sub .f-content {

    flex-direction: column;

  }



  .form_sub .f-content>* {

    width: 100%;

  }

}



.form_search input:focus {

  border-color: var(--white) !important;

}



.form_search-product {

  display: flex;

  align-items: center;

  gap: 16px;

  max-width: 442px;

  width: 100%;

  padding: 15px 24px;

  border: 1px solid var(--line);

  border-radius: 999px;

}



.form_search-product .tf-select-category {

  white-space: nowrap;

}



.form_search-product.style-search-2 {

  background-color: var(--white);

  max-width: 1099px;

}



.form_search-product.style-search-3 {

  border: 1px solid var(--primary);

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725);

}



.form_search-product .btn-submit {

  position: absolute;

  top: -1px;

  right: -1px;

  bottom: -1px;

  background-color: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 16px 24px;

  border-radius: 0px 999px 999px 0px;

  color: var(--white);

}



.form_search-product .btn-submit .icon {

  font-size: 24px;

}



.form_search-product .btn-submit-2 {

  position: absolute;

  top: 4px;

  right: 4px;

  bottom: 4px;

  background-color: var(--primary);

  border-radius: 999px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

  padding: 12px 39px;

}



.form-search.style-2 input {

  padding: 13px 23px;

}



.form-search.style-2 button {

  position: absolute;

  right: 24px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 24px;

}



.tf-select {

  position: relative;

}



.tf-select select {

  width: 100%;

  padding: 16px 24px;

  border-radius: 999px;

  -webkit-appearance: none;

  appearance: none;

  outline: 0 !important;

  border: 0;

  background-color: var(--bg-2);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

}



.tf-select::after {

  font-family: "icomoon";

  position: absolute;

  content: "\e916";

  right: 24px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 14px;

  z-index: 1;

  font-weight: 400;

  color: var(--black);

}



.tf-select:hover select {

  border-color: var(--rgba-dark-2);

}



.tf-select.select-square select {

  padding-top: 14px;

  padding-bottom: 14px;

  border-radius: 6px;

  font-size: 14px;

  line-height: 20px;

  color: var(--text-3);

  opacity: 0.8;

  height: 50px;

}



.tf-select.style-1 select {

  width: 102px;

  border: 1px solid var(--line);

  border-radius: 99px;

  padding: 17px 0;

  background-color: transparent;

  text-align: center;

  font-weight: 600;

  font-size: 14px;

  line-height: 20px;

}



.tf-select.style-1::after {

  display: none;

}



.tf-select.style-2 select {

  border: 1px solid var(--line);

  border-radius: 99px;

  padding: 12px 21px;

  background-color: transparent;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

}



.tf-select.style-border select {

  border-radius: 0;

  background-color: transparent;

  border: 1px solid var(--line);

  padding: 12px 22px;

}



@media (max-width: 991px) {

  .tf-select select {

    padding: 13px 24px;

  }

}



@media (max-width: 991px) and (max-width: 991px) {

  .tf-select select {

    padding: 12px 24px;

  }

}



.tab-reviews .tab-reviews-heading {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px 50px;

  flex-wrap: wrap;

  padding-bottom: 56px;

  margin-bottom: 56px;

  border-bottom: 1px solid var(--line);

}



.tab-reviews .tab-reviews-heading .top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-grow: 1;

  width: 100%;

  max-width: 750px;

  gap: 30px;

}



.tab-reviews .tab-reviews-heading .top .number {

  display: flex;

  align-items: end;

  gap: 24px;

  font-weight: 700;

  font-size: 70px;

  line-height: 70px;

  margin-bottom: 9px;

  color: var(--black);

}



.tab-reviews .tab-reviews-heading .top .number span {

  font-weight: 400;

  font-size: 40px;

  line-height: 100%;

  color: var(--text-2);

}



.tab-reviews .tab-reviews-heading .list-star {

  margin-bottom: 4px;

}



.tab-reviews .rating-score {

  width: 100%;

  max-width: 365px;

}



.tab-reviews .rating-score .item {

  width: 100%;

  gap: 5px;

  display: flex;

  align-items: center;

}



.tab-reviews .rating-score .item:not(:last-child) {

  margin-bottom: 4px;

}



.tab-reviews .rating-score .number-1 {

  width: 12px;

  text-align: end;

  flex-shrink: 0;

  color: var(--black);

}



.tab-reviews .rating-score svg {

  flex-shrink: 0;

}



.tab-reviews .rating-score .icon {

  font-size: 15px;

  margin-left: 4px;

  color: var(--yellow);

}



.tab-reviews .rating-score .number-2 {

  width: 25px;

  color: var(--black);

  text-align: start;

}



.tab-reviews .rating-score .line-bg {

  margin: 0 5px;

  width: 100%;

  height: 8px;

  background-color: var(--line);

}



.tab-reviews .rating-score .line-bg div {

  height: 100%;

  background-color: var(--black);

}



@media (max-width: 1199px) {

  .tab-reviews .tab-reviews-heading .top .number {

    gap: 5px;

  }

}



@media (max-width: 767px) {

  .tab-reviews .tab-reviews-heading {

    padding-bottom: 32px;

    margin-bottom: 32px;

  }

}



.write-cancel-review-wrap .btn-comment-review {

  cursor: pointer;

}



.write-cancel-review-wrap .write-review-wrap,

.write-cancel-review-wrap .btn-cancel-review {

  display: none;

}



.write-cancel-review-wrap.write-review .cancel-review-wrap,

.write-cancel-review-wrap.write-review .btn-write-review {

  display: none;

}



.write-cancel-review-wrap.write-review .write-review-wrap,

.write-cancel-review-wrap.write-review .btn-cancel-review {

  display: block;

}



.reply-comment .reply-comment-filter {

  padding-bottom: 56px;

  margin-bottom: 56px;

  border-bottom: 1px solid var(--line);

}



.reply-comment .tf-dropdown-sort {

  min-width: unset;

}



.reply-comment .reply-comment-item {

  display: flex;

  gap: 14px;

}



.reply-comment .reply-comment-item:not(:last-child) {

  padding-bottom: 56px;

  margin-bottom: 56px;

  border-bottom: 1px solid var(--line);

}



.reply-comment .reply-comment-item .image {

  flex-shrink: 0;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  overflow: hidden;

}



.reply-comment .reply-comment-item .image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.reply-comment .reply-comment-item .user {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

  margin-bottom: 18px;

}



.reply-comment .reply-comment-item .user .user-infor {

  display: flex;

  gap: 10px;

  align-items: center;

}



.reply-comment .reply-comment-item .user .user-infor .line {

  height: 14px;

}



.reply-comment .reply-comment-item .user .name {

  margin-bottom: 4px;

}



.reply-comment .reply-comment-item .user .verified-purchase {

  display: flex;

  align-items: center;

  gap: 4px;

}



.reply-comment .reply-comment-item .user .verified-purchase .text {

  font-weight: 400;

  font-size: 16px;

  line-height: 140%;

  color: var(--black);

}



.reply-comment .reply-comment-item .desc {

  margin-bottom: 18px;

}



@media (max-width: 767px) {

  .reply-comment .reply-comment-filter {

    padding-bottom: 32px;

    margin-bottom: 32px;

  }



  .reply-comment .reply-comment-item:not(:last-child) {

    padding-bottom: 32px;

    margin-bottom: 32px;

  }

}



.filter-start-wrap {

  display: flex;

  gap: 8px;

  align-items: center;

  flex-wrap: wrap;

}



.filter-start-wrap .filter-item {

  padding: 15px 31px;

  border: 1px solid var(--line);

  border-radius: 99px;

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.filter-start-wrap .filter-item.active,

.filter-start-wrap .filter-item:hover {

  background-color: var(--black);

  color: var(--white);

}



@media (max-width: 575px) {

  .filter-start-wrap .filter-item {

    padding: 8px 24px;

  }

}



.form-write-review {

  max-width: 872px;

}



.form-write-review .heading {

  margin-bottom: 40px;

}



.form-write-review .text {

  margin-bottom: 24px;

}



.form-write-review .your-rating {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

}



.form-write-review textarea {

  height: 180px;

}



.form-write-review .form-content {

  margin-bottom: 12px;

}



.form-write-review .form-content .box-field {

  display: flex;

}



.form-write-review .form-content .box-field:not(:last-child) {

  margin-bottom: 24px;

}



.form-write-review .form-content .box-field .label {

  margin-bottom: 8px;

}



.form-write-review .form-content .box-field input,

.form-write-review .form-content .box-field textarea {

  padding: 16px 24px;

  border-radius: 32px;

}



.form-write-review .form-content .group-2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



@media (max-width: 767px) {

  .form-write-review .form-content .box-field:not(:last-child) {

    margin-bottom: 12px;

  }



  .form-write-review .form-content .group-2 {

    gap: 12px;

  }

}



/* custom rating */

.list-rating-check {

  display: flex;

  flex-direction: row-reverse;

  justify-content: left;

  gap: 4px;

}



.list-rating-check:not(:checked)>input {

  position: absolute;

  opacity: 0;

}



.list-rating-check:not(:checked)>label {

  font-size: 24px;

  cursor: pointer;

  white-space: nowrap;

  width: 30px;

  display: flex;

  width: 24px;

  height: 24px;

}



.list-rating-check:not(:checked)>label:before {

  display: flex;

  width: 24px;

  height: 24px;

  content: "";

  -webkit-mask: url("../../icon/start.svg") no-repeat center;

  -webkit-mask-size: contain;

  mask: url("../../icon/start.svg") no-repeat center;

  background: #EF9122;

  mask-size: contain;

}



.list-rating-check>input:checked~label {

  -webkit-mask: url("../../icon/start-1.svg") no-repeat center;

  -webkit-mask-size: contain;

  mask: url("../../icon/start-1.svg") no-repeat center;

  background: #EF9122;

  mask-size: contain;

}



.list-rating-check:not(:checked)>label:hover,

.list-rating-check:not(:checked)>label:hover~label {

  -webkit-mask: url("../../icon/start-1.svg") no-repeat center;

  -webkit-mask-size: contain;

  mask: url("../../icon/start-1.svg") no-repeat center;

  background: #EF9122;

  mask-size: contain;

}



.list-rating-check>input:checked+label:hover::before,

.list-rating-check>input:checked+label:hover~label:before,

.list-rating-check>input:checked~label:hover::before,

.list-rating-check>input:checked~label:hover~label:before,

.list-rating-check>label:hover~input:checked~label:before {

  -webkit-mask: url("../../icon/start-1.svg") no-repeat center;

  -webkit-mask-size: contain;

  mask: url("../../icon/start-1.svg") no-repeat center;

  background: #EF9122;

  mask-size: contain;

}



.form-login {

  display: grid;

  gap: 24px;

}



.form-login .text-social {

  display: flex;

  align-items: center;

  gap: 14px;

}



.form-login .check-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

}



@media (min-width: 1200px) {

  .form-login {

    gap: 40px;

  }

}



.form-ask .form_content {

  margin-bottom: 12px;

}



.form-change_pass .form_content {

  gap: 16px;

}



.form-change_pass .cols {

  gap: 16px;

}



@media (max-width: 1199px) {



  .btn-comment-review,

  .reply-comment-filter .tf-dropdown-sort,

  .reply-comment-filter .filter-item {

    padding: 11px 31px;

    font-size: 16px;

    line-height: 24px;

  }

}



@media (max-width: 575px) {



  .btn-comment-review,

  .reply-comment-filter .tf-dropdown-sort,

  .reply-comment-filter .filter-item {

    padding: 8px 22px;

  }

}



.sib-form {

  padding: 0;

  font-family: "Open Sans", sans-serif !important;

}



#sib-container {

  background-color: unset;

  padding: 0;

}



.sib-form .entry__field {

  background-color: unset;

  border: 0;

  box-shadow: none !important;

  margin: 0;

}



.sib-form .sib-form-container .input {

  outline: 0;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  width: 100%;

  padding: 15px 24px;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  border: 1px solid var(--line);

  border-radius: 999px;

  color: var(--black);

  background-color: transparent;

  height: unset !important;

}



.sib-form .sib-form-container .input.style-stroke-2 {

  border-color: var(--line-2);

  background-color: transparent;

  color: var(--white);

}



.sib-form .sib-form-container .input.style-stroke-2:focus {

  border-color: var(--white);

}



.sib-form .sib-form-container .input::placeholder {

  color: #8A8C8A !important;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.sib-form .entry__specification,

.sib-form .entry__error,

.entry__specification,

.entry__label {

  margin: 0 !important;

}



.sib-form-container a {

  text-decoration: none;

}



.sib-form .input_replaced {

  position: relative;

  opacity: 1;

  z-index: 1;

}



.sib-form-block {

  padding: 0;

}



#sib-form {

  position: relative;

}



.sib-form .clickable__icon {

  margin: 0 5px 0 0;

  fill: #fff;

}



.sib-form-message-panel {

  margin-bottom: 8px;

  padding: 0;

  border: 0;

}



.sib-form-message-panel#error-message .sib-form-message-panel__text {

  color: var(--error);

}



.sib-form-message-panel#success-message .sib-form-message-panel__text {

  color: var(--success);

}



.sib-form-message-panel__text .sib-notification__icon {

  height: 18px;

  width: 18px;

  margin-right: 8px;

}



.sib-form-message-panel__text {

  padding: 0;

}



.sib-form_newletter {

  margin-bottom: 24px;

}



.sib-form_newletter .sib-input,

.sib-form_newletter .form__label-row {

  margin-bottom: 12px;

}



.sib-form_footer .form-get_email {

  display: flex;

  gap: 12px;

  margin-bottom: 16px;

}



.sib-form_footer .fieldset-input_email {

  width: 100%;

}



.sib-form_footer .sib-form-container .input {

  font-weight: 400;

  font-size: 16px;

  line-height: 22px;

}



.sib-form_footer .sib-form-container .input:focus {

  border-color: var(--black);

}



.sib-form_footer .sib-form-container .input::placeholder {

  font-weight: 400;

  font-size: 16px;

  line-height: 22px;

}



.sib-form_footer .entry__choice {

  padding: 0;

  margin: 0;

  display: flex;

  align-items: center;

  gap: 8px;

  text-indent: unset;

}



.sib-form_footer .form__entry.entry_errored .entry__error {

  margin-top: 10px !important;

}



@media (max-width: 1199px) {

  .sib-form_footer .form-get_email {

    display: flex;

    flex-direction: column;

  }



  .sib-form_footer .fiedset-button_submit,

  .sib-form_footer .sib-form-block__button {

    width: 100%;

  }

}



.form-contact .cols {

  gap: 20px;

}



.form-contact .form-content {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.form-contact .form-content {

  margin-bottom: 30px;

}



.form-contact textarea {

  height: 150px;

}



@media (min-width: 992px) {

  .form-contact textarea {

    height: 299px;

  }



  .form-contact .form-content {

    margin-bottom: 40px;

  }

}



.form-contact-2 .form-content {

  display: grid;

  gap: 12px;

  margin-bottom: 12px;

}



.form-contact-2 .tf-grid-layout {

  gap: 12px;

}



.form-contact-2 .form-action {

  max-width: 464px;

  width: 100%;

  margin: 0 auto;

}



.form-contact-2 .form-action button {

  width: 100%;

}



@media (min-width: 1200px) {

  .form-contact-2 .form-content {

    gap: 24px;

  }



  .form-contact-2 .tf-grid-layout {

    gap: 24px;

  }

}



.form-add_review .form-content {

  display: grid;

  gap: 12px;

  margin-bottom: 12px;

}



.form-add_review .tf-grid-layout {

  gap: 12px;

}



.form-add_review .form-action button {

  max-width: 258px;

  width: 100%;

}



@media (min-width: 1200px) {

  .form-add_review .form-content {

    gap: 24px;

  }



  .form-add_review .tf-grid-layout {

    gap: 24px;

  }

}



/*------------ nice select ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.nice-select {

  -webkit-tap-highlight-color: transparent;

  background-color: #fff;

  border: 0;

  padding: 0;

  padding-right: 16px;

  box-sizing: border-box;

  clear: both;

  cursor: pointer;

  display: flex;

  font-size: 14px;

  line-height: 22px;

  font-weight: 500;

  outline: none;

  position: relative;

  transition: all linear 0.2s;

  user-select: none;

  white-space: nowrap;

  width: max-content;

  border-radius: 0;

  color: var(--main);

}



.nice-select:active,

.nice-select.open,

.nice-select:focus {

  border-color: var(--line);

}



.nice-select:after {

  border-bottom: 1.7px solid var(--main);

  border-right: 1.7px solid var(--main);

  content: "";

  height: 8px;

  width: 8px;

  margin-top: -6px;

  pointer-events: none;

  position: absolute;

  right: 0;

  top: 50%;

  -webkit-transform-origin: 66% 66%;

  -ms-transform-origin: 66% 66%;

  transform-origin: 66% 66%;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

  -webkit-transition: all 0.15s ease-in-out;

  transition: all 0.15s ease-in-out;

}



.nice-select.open:after {

  -webkit-transform: rotate(-135deg);

  -ms-transform: rotate(-135deg);

  transform: rotate(-135deg);

  -moz-transform: rotate(-135deg);

  -o-transform: rotate(-135deg);

}



.nice-select.open .list {

  opacity: 1;

  z-index: 10;

  pointer-events: auto;

  -webkit-transform: scale(1) translateY(0);

  -ms-transform: scale(1) translateY(0);

  transform: scale(1) translateY(0);

  width: 100%;

  -moz-transform: scale(1) translateY(0);

  -o-transform: scale(1) translateY(0);

}



.nice-select.disabled {

  border-color: #ededed;

  color: #999;

  pointer-events: none;

}



.nice-select.disabled:after {

  border-color: #cccccc;

}



.nice-select.wide {

  width: 100%;

}



.nice-select.wide .list {

  left: 0 !important;

  right: 0 !important;

}



.nice-select.right {

  float: right;

}



.nice-select.right .list {

  left: auto;

  right: 0;

}



.nice-select.small {

  font-size: 12px;

  height: 36px;

  line-height: 34px;

}



.nice-select.small:after {

  height: 4px;

  width: 4px;

}



.nice-select.small .option {

  line-height: 34px;

  min-height: 34px;

}



.nice-select .list {

  background-color: var(--white);

  border-radius: 5px;

  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);

  box-sizing: border-box;

  margin-top: 4px;

  opacity: 0;

  overflow: hidden;

  padding: 0;

  pointer-events: none;

  position: absolute;

  top: 100%;

  left: 0;

  -webkit-transform-origin: 50% 0;

  -ms-transform-origin: 50% 0;

  transform-origin: 50% 0;

  -webkit-transform: scale(0.75) translateY(-21px);

  -ms-transform: scale(0.75) translateY(-21px);

  transform: scale(0.75) translateY(-21px);

  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;

  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;

  z-index: 9;

  width: 100%;

  font-size: 14px;

  max-height: 155px;

  overflow: auto;

}



.nice-select .list.style {

  max-height: unset;

}



.nice-select .list::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

  background-color: #f5f5f5;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

}



.nice-select .list::-webkit-scrollbar-thumb {

  background-color: #a7a7a7;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

}



.nice-select .list::-webkit-scrollbar {

  width: 6px;

  height: 4px;

  background-color: #f5f5f5;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

}



.nice-select .option {

  cursor: pointer;

  font-weight: 500;

  line-height: 40px;

  list-style: none;

  min-height: 40px;

  outline: none;

  padding-left: 18px;

  padding-right: 29px;

  font-size: 16px;

  text-align: left;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  color: var(--main);

}



.nice-select .option:hover,

.nice-select .option.focus,

.nice-select .option.selected.focus {

  background-color: var(--white);

  color: var(--primary);

}



.nice-select .option.selected {

  font-weight: 600;

}



.nice-select .option.disabled {

  color: var(--main);

  cursor: default;

}



.no-csspointerevents .nice-select .list {

  display: none;

}



.no-csspointerevents .nice-select.open .list {

  display: block;

}



.tf-dropdown-select.style-default {

  width: unset !important;

  display: flex;

}



.tf-dropdown-select.style-default>select {

  display: none !important;

}



.tf-dropdown-select.style-default>.dropdown-toggle {

  padding: 0px;

  padding-right: 22px;

  background-color: transparent !important;

  border: 0;

  outline: none !important;

  color: var(--black);

}



.tf-dropdown-select.style-default>.dropdown-toggle::after {

  border: 0;

  position: absolute;

  right: 0;

  content: "\e916";

  font-family: "icomoon";

  font-size: 14px;

  color: var(--black);

  margin-left: 0px;

  top: 50%;

  transform: translateY(-50%);

}



.tf-dropdown-select.style-default .filter-option-inner-inner {

  display: flex;

  align-items: center;

  justify-content: start;

  font-weight: 400;

  font-size: clamp(16px, 2vw, 18px);

  line-height: clamp(22px, 3vw, 24px);

  gap: 8px;

}



.tf-dropdown-select.style-default .filter-option-inner-inner img {

  height: 24px;

  width: 24px;

}



.tf-dropdown-select.style-default>.dropdown-menu {

  overflow: unset !important;

  margin-top: 17px !important;

  margin-bottom: 17px !important;

  padding: 15px 20px;

  border-radius: 0;

  border: 0;

  background-color: var(--white);

  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;

}



.tf-dropdown-select.style-default>.dropdown-menu a {

  padding: 5px 0;

}



.tf-dropdown-select.style-default>.dropdown-menu a .text {

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 5px;

  font-weight: 400;

  font-size: 16px;

  line-height: 20px;

}



.tf-dropdown-select.style-default>.dropdown-menu a .text img {

  width: 20px;

  height: 20px;

}



.tf-dropdown-select.style-default>.dropdown-menu a:hover,

.tf-dropdown-select.style-default>.dropdown-menu a:active,

.tf-dropdown-select.style-default>.dropdown-menu a.active {

  color: var(--primary) !important;

  background-color: unset !important;

}



.tf-dropdown-select.style-default>.dropdown-menu::after {

  position: absolute;

  content: "";

  width: 16px;

  height: 16px;

  transform: translate(-50%, -50%) rotate(45deg);

  background-color: var(--white);

  top: 0;

  left: 50%;

  z-index: 2;

}



.tf-dropdown-select.style-default>.dropdown-menu[data-popper-placement=top-start]::after {

  display: none;

}



.tf-dropdown-select.style-default>.dropdown-menu[data-popper-placement=top-start]::before {

  position: absolute;

  content: "";

  width: 16px;

  height: 16px;

  transform: translate(-50%, 50%) rotate(45deg);

  background-color: var(--white);

  bottom: 0%;

  left: 50%;

  z-index: 2;

}



.tf-dropdown-select.style-default .dropdown-menu>.inner {

  overflow-y: hidden !important;

}



.tf-dropdown-select.type-currencies>.dropdown-menu {

  width: 100px !important;

}



.tf-dropdown-select.type-languages>.dropdown-menu {

  width: 110px !important;

}



.tf-dropdown-select.color-white>.dropdown-toggle {

  color: var(--white);

}



.tf-dropdown-select.color-white>.dropdown-toggle::after {

  color: var(--white);

}



.tf-dropdown-select.color-white-2>.dropdown-toggle {

  color: var(--text);

}



.tf-dropdown-select.color-white-2>.dropdown-toggle::after {

  color: var(--text);

}



.tf-dropdown-select.color-white-3>.dropdown-toggle {

  color: var(--line-4);

}



.tf-dropdown-select.color-white-3>.dropdown-toggle::after {

  color: var(--line-4);

}



.tf-dropdown-wrap {

  display: flex;

  gap: 20px;

}



.tf-dropdown-sort {

  padding: 8px 16px;

  min-width: 180px;

  border: 1px solid var(--line);

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  border-radius: 999px;

}



.tf-dropdown-sort .icon {

  font-size: 14px;

  display: inline-block;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  margin-bottom: 2px;

}



.tf-dropdown-sort .btn-select {

  display: flex;

  align-items: center;

  justify-content: space-between;

  text-wrap: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  text-transform: capitalize;

  font-size: 16px;

  line-height: 20px;

  gap: 12px;

}



.tf-dropdown-sort .btn-select .icon {

  font-size: 14px;

}



.tf-dropdown-sort.show .btn-select .icon {

  transform: rotate(180deg);

}



.tf-dropdown-sort .text-sort-value {

  text-wrap: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-weight: 600;

  font-size: 16px;

  line-height: 24px;

  color: var(--black);

}



.tf-dropdown-sort .dropdown-menu {

  min-width: 240px;

  border: 1px solid var(--line);

  padding: 10px 5px;

  border-radius: 0px;

  max-height: 68vh;

  isolation: isolate;

  overscroll-behavior-y: contain;

  overflow-y: auto;

  z-index: 99;

}



.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar {

  width: 3px;

}



.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar-thumb {

  border-radius: 4px;

}



.tf-dropdown-sort .select-item {

  position: relative;

  font-size: 16px;

  font-weight: 400;

  text-transform: capitalize;

  color: var(--black);

  padding: 0 15px;

  line-height: 30px;

  width: 100%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-dropdown-sort .select-item:hover,

.tf-dropdown-sort .select-item.active {

  background-color: #ebebeb;

}



.tf-dropdown-sort:hover {

  border-color: var(--black);

}



@media (min-width: 1200px) {

  .tf-dropdown-sort {

    padding: 15px 32px;

    min-width: 225px;

  }



  .tf-dropdown-sort .text-sort-value {

    font-size: 18px;

  }

}



.tf-select-category {

  display: flex;

  align-items: center;

  gap: 5px;

  color: var(--black);

}



.dropdown-filter .dropdown-toggle {

  min-width: 91px;

  border-radius: 999px;

  padding: 8px 16px;

  border: 1px solid var(--line);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.dropdown-filter .dropdown-toggle::after {

  display: none;

}



.dropdown-filter .dropdown-toggle.show .icon {

  transform: rotate(180deg);

}



.dropdown-filter .dropdown-toggle:hover {

  border-color: var(--dark);

}



.dropdown-filter .icon {

  font-size: 12px;

  display: inline-block;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  margin-top: 2px;

}



.dropdown-filter .text-value {

  text-wrap: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  text-transform: capitalize;

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

}



.dropdown-filter .dropdown-menu {

  margin-top: -2px !important;

  min-width: 238px;

  box-shadow: var(--shadow-1);

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 15px 10px;

  max-height: 68vh;

  isolation: isolate;

  overscroll-behavior-y: contain;

  overflow-y: auto;

  z-index: 99;

  box-shadow: 0 0 25px 3px rgba(0, 0, 0, 0.1);

}



.dropdown-filter .dropdown-menu::-webkit-scrollbar {

  width: 5px;

}



.dropdown-filter .dropdown-menu::-webkit-scrollbar-track {

  background-color: var(--line);

}



.dropdown-filter .dropdown-menu::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 4px;

}



.dropdown-filter .dropdown-menu.drop-menu-brand {

  max-height: 180px;

}



.dropdown-filter .filter-color-box,

.dropdown-filter .filter-size-box {

  gap: 8px;

}



@media (min-width: 1200px) {

  .dropdown-filter .dropdown-toggle {

    padding: 15px 31px;

  }



  .dropdown-filter .dropdown-menu {

    min-width: 300px;

    padding: 25px 15px;

  }

}



.select-category .dropdown_product_cat {

  display: none;

}



.select-category .close-option {

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.select-category .close-option:hover {

  color: var(--primary);

}



.select-category .select-options {

  overflow-y: auto;

  display: none;

  position: absolute;

  top: -3px;

  right: -3px;

  left: -3px;

  z-index: 999;

  margin: 0;

  padding: 20px;

  list-style: none;

  border-radius: 8px;

  background: #FFF;

  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);

  min-width: 200px;

}



.select-category .select-options li {

  display: inline-block;

  width: 32.88%;

  color: var(--gray);

  margin: 0;

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  padding: 8px 10px;

  position: relative;

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.select-category .select-options li:hover {

  color: var(--primary);

}



.select-category .header-select-option {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  padding-bottom: 20px;

  border-bottom: 1px solid #ededed;

  margin-bottom: 8px;

  color: var(--black);

}



.tf-select-custom {

  display: block;

  cursor: pointer;

  max-width: 120px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  padding-right: 20px;

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

  position: relative;

}



.tf-select-custom::after {

  content: "\e916";

  position: absolute;

  font-family: "icomoon";

  font-size: 16px;

  font-weight: normal;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

}



/*------------ carousel ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {

  margin: 0px;

}



.sw-auto .swiper-wrapper {

  align-items: center;

}



.sw-auto .swiper-slide {

  width: auto;

  transition-timing-function: linear;

}



.slider-auto-vertical .swiper-slide {

  height: max-content !important;

}



.layout-sw-center {

  overflow: hidden;

}



/*------------ pop up ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.offcanvas {

  border: none !important;

  color: var(--black);

  z-index: 3000;

}



.offcanvas .icon-close-popup {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  background: transparent;

  font-size: 16px;

  padding: 10px;

  border: none;

  color: var(--black);

  z-index: 10;

}



.offcanvas .icon-close-popup:hover {

  color: var(--primary);

}



.offcanvas .icon-close-popup.type-right {

  top: 16px;

  right: 16px;

}



.offcanvas .offcanvas-content {

  height: 100%;

}



.offcanvas.offcanvas-center {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) !important;

  opacity: 0;

  visibility: hidden;

  max-width: calc(100vw - 30px);

}



.offcanvas.offcanvas-center.show {

  visibility: visible;

  opacity: 1;

}



.offcanvas-backdrop {

  z-index: 2999;

  cursor: url(../images/cursor-close.svg), auto;

}



.overflow-x-auto::-webkit-scrollbar,

.overflow-y-auto::-webkit-scrollbar {

  width: 0px;

}



.modal {

  cursor: url(../images/cursor-close.svg), auto;

}



.modal .icon-close-popup {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  background: transparent;

  font-size: 16px;

  padding: 16px;

  border: none;

  color: var(--black);

  z-index: 10;

  position: absolute;

  top: 0px;

  right: 0px;

}



.modal .icon-close-popup:hover {

  color: var(--primary);

}



@media (min-width: 576px) {

  .modal .icon-close-popup {

    top: 10px;

    right: 10px;

  }

}



.modal .modal-content {

  border: 0;

}



.modal .modal-body {

  padding: 0;

}



.modal.fullRight .modal-dialog {

  transform: translate(100%, 0);

  min-width: 100%;

  height: 100%;

  margin: 0;

  transition: transform 1s ease-out;

}



.modal.fullRight .modal-dialog .modal-content {

  border-radius: 0;

  border: 0;

  margin: auto;

  overflow: hidden;

  position: absolute;

  right: 0;

  bottom: 0;

  top: 0;

  padding: 0;

}



.modal.fullRight .modal-dialog .modal-content .modal-body {

  overflow: auto;

  padding: 0;

  padding-bottom: 30px;

}



.modal.fullRight.show .modal-dialog {

  transform: none;

  transition: transform 0.4s ease-out;

}



.modal.fullLeft .modal-dialog {

  transform: translate(-100%, 0) !important;

  min-width: 100%;

  height: 100%;

  margin: 0;

  transition: all 0.3s !important;

}



.modal.fullLeft .modal-content {

  border-radius: 0;

  border: 0;

  margin: auto;

  overflow: hidden;

  position: absolute;

  left: 0;

  bottom: 0;

  top: 0;

  padding: 0;

}



.modal.fullLeft .modal-body {

  overflow: auto;

  padding: 0;

  padding-bottom: 30px;

}



.modal.fullLeft.show .modal-dialog {

  transform: translate(0, 0) !important;

}



.modal.fullBottom .modal-dialog {

  transform: translate(0, 100%);

  min-width: 100%;

  height: 100%;

  max-height: unset;

  margin: 0;

  transition: transform 0.3s linear !important;

}



.modal.fullBottom .modal-content {

  border-radius: 0;

  border: 0;

  margin: auto;

  overflow: hidden;

  position: absolute;

  right: 0;

  bottom: 0;

  padding: 0;

  max-height: max-content;

}



.modal.fullBottom .modal-body {

  overflow: auto;

  padding: 0;

  padding-bottom: 30px;

}



.modal.fullBottom.show .modal-dialog {

  transform: translate(0, 0);

}



.modal.modalCentered .modal-dialog {

  margin: 15px auto;

  padding-left: 15px;

  padding-right: 15px;

  transform: translate(0, 0) !important;

}



.modal.fade:not(.show) {

  opacity: 0;

}



.modal .modal-content {

  cursor: default !important;

  border-radius: 0px;

}



.modal-heading {

  position: relative;

  margin-bottom: 30px;

}



.modal-heading .icon-close-popup {

  top: 50%;

  transform: translateY(-50%);

  right: 0;

  left: unset;

  font-size: 24px;

}



@media (min-width: 992px) {

  .modal-heading {

    margin-bottom: 40px;

  }

}



.canvas-sidebar {

  max-width: 320px;

  width: 100%;

}



.canvas-sidebar .blog-sidebar {

  max-width: unset;

}



@media (min-width: 992px) {

  .canvas-sidebar {

    max-width: 535px;

    width: 100% !important;

  }

}



.canvas-wrapper {

  padding: 0;

  isolation: isolate;

  height: 100%;

  width: 100%;

  max-height: none;

  display: grid;

  grid-auto-rows: auto minmax(0, 1fr) auto;

  align-content: start;

}



.canvas-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 24px;

  position: relative;

  text-transform: capitalize;

}



.canvas-header .icon-close-popup {

  height: 32px;

  width: 32px;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

}



@media (min-width: 1200px) {

  .canvas-header {

    padding: 32px;

  }

}



.canvas-body {

  background-color: var(--white);

  padding: 10px 24px;

  overscroll-behavior-y: contain;

  overflow-y: auto;

  flex: 1;

}



.canvas-body::-webkit-scrollbar {

  width: 5px;

}



.canvas-body::-webkit-scrollbar-track {

  background-color: var(--white);

}



.canvas-body::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 4px;

}



@media (min-width: 1200px) {

  .canvas-body {

    padding: 12px 32px 15px;

  }

}



.canvas-footer,

.canvas-bottom {

  padding: 16px 24px 24px;

  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);

}



.modal-log .modal-top .title {

  margin-bottom: 30px;

}



.modal-log .modal-content {

  padding: 32px;

}



.modal-log .modal-bottom {

  width: 100%;

  max-width: 440px;

  margin: 0 auto;

}



.modal-log .other-login {

  display: grid;

  gap: 15px;

  margin-bottom: 40px;

}



@media (min-width: 768px) {

  .modal-log .modal-top .title {

    margin-bottom: 52px;

  }

}



@media (min-width: 1200px) {

  .modal-log .modal-content {

    padding-bottom: 100px;

  }



  .modal-log .modal-dialog {

    max-width: 934px;

  }

}



@media (max-width: 575px) {

  .modal-log .modal-content {

    padding: 20px 15px;

  }

}



.canvas-sidebar .icon-close-popup {

  font-size: 24px;

}



.canvas-sidebar .sub-title {

  margin-bottom: 20px;

}



@media (min-width: 1200px) {

  .canvas-sidebar .sub-title {

    margin-bottom: 32px;

  }

}



.popup-body {

  overscroll-behavior-y: contain;

  overflow-y: auto;

  padding: 20px;

}



@media (min-width: 1200px) {

  .popup-body {

    padding: 20px 32px;

  }

}



.tf-minicart-recommendations {

  width: 264px;

  flex-shrink: 0;

  padding: 32px;

  border-right: 1px solid var(--line);

  display: flex;

  flex-direction: column;

}



.tf-minicart-recommendations .title {

  margin-bottom: 24px;

}



.tf-minicart-recommendations>.wrap-recommendations {

  flex-grow: 1;

  overflow-y: auto;

}



.tf-minicart-recommendations>.wrap-recommendations::-webkit-scrollbar {

  width: 0px;

}



.tf-minicart-recommendations .list-cart-item:not(:last-child) {

  margin-bottom: 30px;

}



.tf-minicart-recommendations .list-cart-item .image {

  width: 100%;

  height: 100%;

  max-height: 267px;

  margin-bottom: 24px;

  overflow: hidden;

}



.tf-minicart-recommendations .list-cart-item .image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-minicart-recommendations .list-cart-item .name {

  margin-bottom: 4px;

}



.tf-minicart-recommendations .list-cart-item .cart-item-bot {

  position: relative;

  overflow: hidden;

}



.tf-minicart-recommendations .list-cart-item .cart-item-bot a {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  transform: translateY(30px);

}



.tf-minicart-recommendations .list-cart-item .price {

  transform: translateY(0px);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



@media (max-width: 767px) {

  .tf-minicart-recommendations {

    display: none;

  }

}



.popup-shopping-cart {

  flex-direction: row;

}



.popup-shopping-cart .popup-header {

  padding: 32px 32px 24px;

  display: flex;

  justify-content: space-between;

}



.popup-shopping-cart .popup-header .icon-close-popup {

  padding: 0;

  font-size: 24px !important;

}



.popup-shopping-cart .tf-mini-cart-threshold {

  padding: 0px 32px;

}



.popup-shopping-cart .tf-mini-cart-threshold .text {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;

}



.popup-shopping-cart .tf-mini-cart-threshold .desc {

  font-size: 16px;

  line-height: 140%;

}



.popup-shopping-cart .tf-mini-cart-threshold .tf-progress-ship {

  border-radius: 0;

  height: 9px;

  margin-bottom: 16px;

  background-color: var(--line);

}



.popup-shopping-cart .tf-mini-cart-threshold .tf-progress-ship .value {

  background-color: var(--black);

  height: 9px;

  -webkit-transition: all 0.5s ease;

  -moz-transition: all 0.5s ease;

  -ms-transition: all 0.5s ease;

  -o-transition: all 0.5s ease;

  transition: all 0.5s ease;

}



.popup-shopping-cart .tf-number-count {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--line);

}



.popup-shopping-cart .wrap {

  display: flex;

  flex-direction: column;

}



.popup-shopping-cart .tf-mini-cart-wrap {

  display: flex;

  flex-direction: column;

  flex-grow: 1;

  position: relative;

}



.popup-shopping-cart .tf-cart-totals-discounts {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}



@media (min-width: 1200px) {

  .popup-shopping-cart .tf-cart-totals-discounts {

    margin-bottom: 32px;

  }

}



.popup-shopping-cart .tf-mini-cart-bottom-wrap {

  padding: 16px 32px 32px;

}



.popup-shopping-cart .tf-mini-cart-bottom-wrap .tf-mini-cart-view-checkout {

  display: flex;

  gap: 12px;

  margin-bottom: 16px;

}



.popup-shopping-cart .tf-mini-cart-bottom-wrap .tf-mini-cart-view-checkout a {

  width: 100%;

}



.popup-shopping-cart .tf-mini-cart-bottom-wrap .free-shipping {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--text-2);

}



.popup-shopping-cart .tf-mini-cart-bottom-wrap .free-shipping .icon {

  font-size: 20px;

}



.popup-shopping-cart .tf-mini-cart-view-checkout {

  display: grid;

  gap: 12px;

}



@media (min-width: 576px) {

  .popup-shopping-cart {

    max-width: 794px;

    width: 100% !important;

  }

}



@media (max-width: 767px) {

  .popup-shopping-cart {

    flex-direction: column;

    max-width: min(500px, 100vw);

    max-width: 340px;

  }



  .popup-shopping-cart .tf-minicart-recommendations {

    padding: 16px 16px 0;

    width: unset;

  }



  .popup-shopping-cart .tf-minicart-recommendations .title {

    margin-bottom: 16px;

  }



  .popup-shopping-cart .list-cart {

    display: flex;

    gap: 15px;

    overflow-x: auto;

  }



  .popup-shopping-cart .list-cart .list-cart-item {

    padding-bottom: 0 !important;

    border-bottom: 0 !important;

    margin-bottom: 0 !important;

    min-width: 120px;

  }



  .popup-shopping-cart .list-cart .list-cart-item .image {

    max-height: 150px;

    margin-bottom: 12px;

  }



  .popup-shopping-cart .tf-mini-cart-threshold,

  .popup-shopping-cart .tf-mini-cart-sroll {

    padding: 0 16px;

  }



  .popup-shopping-cart .tf-mini-cart-item {

    padding-bottom: 16px;

    margin-bottom: 16px;

  }



  .popup-shopping-cart .tf-mini-cart-item .tf-mini-cart-image {

    width: 100px;

    height: 100px;

  }



  .popup-shopping-cart .tf-mini-cart-item .tf-mini-cart-info {

    gap: 2px;

  }



  .popup-shopping-cart .popup-header {

    padding: 16px;

  }



  .popup-shopping-cart .tf-mini-cart-tool {

    padding: 10px 16px;

  }



  .popup-shopping-cart .tf-mini-cart-tool-btn {

    padding: 6px 8px;

  }



  .popup-shopping-cart .tf-mini-cart-bottom-wrap {

    padding: 16px 16px 24px;

  }



  .popup-shopping-cart .tf-mini-cart-tool-openable .tf-mini-cart-tool-content {

    padding: 24px 16px;

  }

}



.tf-mini-cart-main {

  flex: 1 1 auto;

  position: relative;

}



.tf-mini-cart-sroll {

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  overflow: auto;

  padding: 0px 32px;

}



.tf-mini-cart-sroll::-webkit-scrollbar {

  width: 5px;

}



.tf-mini-cart-sroll::-webkit-scrollbar-thumb {

  background-color: var(--primary);

  border-radius: 5px;

}



.tf-mini-cart-items {

  display: flex;

  flex-direction: column;

  height: 100%;

}



.tf-mini-cart-items .tf-mini-cart-item:not(:last-child) {

  padding-bottom: 24px;

  margin-bottom: 24px;

  border-bottom: 1px solid var(--line);

}



.tf-mini-cart-items .tf-mini-cart-item:last-child {

  padding-bottom: 30px;

}



.tf-mini-cart-tool {

  padding: 30px 32px 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

}



@media (max-width: 767px) {

  .tf-mini-cart-tool {

    gap: 6px;

  }

}



.tf-mini-cart-tool-btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 10px;

  border-radius: 99px;

  border: 1px solid var(--line);

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-mini-cart-tool-btn .icon {

  font-size: 20px;

}



.tf-mini-cart-tool-btn:hover {

  background-color: var(--black);

  color: var(--white);

}



@media (max-width: 767px) {

  .tf-mini-cart-tool-btn {

    gap: 6px;

  }

}



.tf-mini-cart-tool-openable {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  transform: translateY(100%);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  z-index: 70;

  opacity: 0;

  visibility: hidden;

}



.tf-mini-cart-tool-openable.open {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

}



.tf-mini-cart-tool-openable.open>.overlay {

  opacity: 0;

  visibility: visible;

}



.tf-mini-cart-tool-openable.open .tf-mini-cart-tool-content {

  box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.1019607843);

}



.tf-mini-cart-tool-openable>.overlay {

  position: absolute;

  left: 0;

  bottom: 0;

  height: 200vh;

  right: 0;

  background-color: transparent;

  opacity: 0;

  background-color: var(--black);

  visibility: hidden;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-mini-cart-tool-openable .tf-mini-cart-tool-close {

  cursor: pointer;

}



.tf-mini-cart-tool-openable .tf-mini-cart-tool-content {

  position: relative;

  z-index: 80;

  padding: 32px;

  background-color: var(--white);

}



.tf-mini-cart-tool-openable .tf-mini-cart-tool-content .tf-mini-cart-tool-text {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 24px;

  color: var(--black);

}



.tf-mini-cart-tool-openable .tf-mini-cart-tool-content .tf-mini-cart-tool-text .icon {

  font-size: 20px;

}



.tf-mini-cart-tool-openable .tf-mini-cart-tool-content .tf-cart-tool-btns {

  display: flex;

  gap: 12px;

  flex-direction: column;

}



.tf-mini-cart-tool-openable.add-note textarea {

  height: 148px;

  margin-bottom: 24px;

  border-radius: 32px;

}



.tf-mini-cart-tool-openable.coupon .tf-mini-cart-tool-text1 {

  margin-bottom: 7px;

  color: #475467;

}



.tf-mini-cart-tool-openable.coupon input {

  margin-bottom: 90px;

}



.tf-mini-cart-tool-openable.add-gift .wrap {

  padding: 44.5px 15px;

  border-radius: 32px;

  border: 1px solid var(--line);

  text-align: center;

  margin-bottom: 24px;

}



.tf-mini-cart-tool-openable.add-gift .wrap .icon {

  margin-bottom: 8px;

  font-size: 40px;

}



.tf-mini-cart-tool-openable.estimate-shipping .field {

  margin-bottom: 24px;

}



.tf-mini-cart-tool-openable.estimate-shipping .tf-cart-tool-btns {

  margin-top: 30px;

}



.tf-mini-cart-tool-openable.estimate-shipping .error {

  margin-top: 20px;

  color: #FF6F61;

}



.tf-mini-cart-tool-openable.estimate-shipping .success {

  margin-top: 20px;

}



.tf-mini-cart-tool-openable.estimate-shipping .success .standard {

  color: #1CAA23;

  margin-top: 4px;

}



.canvas-size .canvas-body {

  display: grid;

  gap: 40px;

}



.canvas-size .title {

  margin-bottom: 12px;

}



.canvas-size .resize-info-list {

  display: grid;

  gap: 12px;

  color: var(--main-4);

  margin-bottom: 12px;

}



.canvas-size .tf-table-res-df .sub {

  margin-bottom: 24px;

}



.canvas-size .tf-sizeguide-table {

  white-space: nowrap;

  overflow: auto;

  width: 100%;

  height: max-content;

}



.canvas-delivery .delivery-list {

  display: grid;

  gap: 20px;

}



.canvas-delivery .delivery-list li {

  display: grid;

  gap: 4px;

}



@media (min-width: 992px) {

  .canvas-delivery .delivery-list {

    gap: 40px;

  }

}



.canvas-pickup .store-list {

  display: grid;

  gap: 35px;

}



@media (min-width: 992px) {

  .canvas-pickup .store-list {

    gap: 48px;

  }

}



.canvas-pickup .store-ready-item {

  display: flex;

  flex-direction: column;

  align-items: start;

  gap: 10px;

}



@media (min-width: 768px) {

  .canvas-pickup .store-ready-item {

    gap: 20px;

  }

}



.canvas-pickup .store-status {

  display: flex;

  align-items: center;

  gap: 10px;

}



.canvas-pickup .store-status .icon {

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #148710;

  border: 1px solid #148710;

  flex-shrink: 0;

}



.canvas-pickup .store-status .icon i {

  font-size: 8px;

}



@media (max-width: 991px) {

  .canvas-pickup .store-status .text {

    font-size: 14px;

  }

}



.canvas-description .des-list {

  display: grid;

  gap: 30px;

}



.canvas-description .des-list li {

  display: grid;

  gap: 4px;

}



@media (min-width: 992px) {

  .canvas-description .des-list {

    gap: 40px;

  }

}



.canvas-engrave .engrave-list {

  display: grid;

  gap: 20px;

}



.canvas-engrave .engrave-list li {

  display: grid;

  gap: 15px;

}



.canvas-engrave .engrave-more-infor {

  display: grid;

  gap: 9px;

}



.canvas-engrave .engrave-more-infor li {

  position: relative;

  padding-left: 10px;

  color: var(--main-4);

}



.canvas-engrave .engrave-more-infor li::after {

  content: "";

  top: 50%;

  transform: translateY(-50%);

  position: absolute;

  width: 2px;

  height: 2px;

  background-color: var(--main-4);

}



@media (min-width: 992px) {

  .canvas-engrave .engrave-list {

    gap: 40px;

  }

}



.tf-mini-cart-item {

  display: flex;

  align-items: center;

  gap: 24px;

}



.tf-mini-cart-item .tf-mini-cart-image {

  width: 122px;

  height: 122px;

}



.tf-mini-cart-item .tf-mini-cart-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-mini-cart-item .tf-mini-cart-info {

  display: flex;

  flex-direction: column;

  align-items: start;

  gap: 8px;

  flex: 1;

  align-items: stretch;

}



.tf-mini-cart-item .tf-mini-cart-info .icon-close {

  font-size: 16px;

  color: var(--text-3);

  cursor: pointer;

}



.size {

  display: flex;

  gap: 8px;

  align-items: center;

}



.size .dot-color {

  position: relative;

  display: flex;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  margin: 4px;

}



.size .dot-color::after {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 24px;

  height: 24px;

  border-radius: 50%;

  border: 1px solid var(--line);

}



.canvas-filter .canvas-header {

  box-shadow: 0px 4px 10px 0px rgba(212, 212, 212, 0.2509803922);

}



.canvas-filter .canvas-bottom {

  display: flex;

  align-items: center;

  gap: 10px;

  box-shadow: 0px -4px 10px 0px rgba(212, 212, 212, 0.2509803922);

}



.canvas-filter .canvas-bottom>* {

  width: 100%;

}



@media (min-width: 1200px) {



  .canvas-filter .canvas-header,

  .canvas-filter .canvas-body,

  .canvas-filter .canvas-bottom {

    padding: 32px 40px;

  }

}



@media (max-width: 767px) {

  .canvas-filter {

    max-width: 325px;

  }

}



.modal-quick-view .icon-close-popup {

  font-size: 24px;

  top: 30px;

  right: 16px;

}



.modal-quick-view .modal-dialog {

  max-width: 1470px;

}



.modal-quick-view .modal-content {

  display: flex;

  padding: 30px 16px;

  gap: 32px;

  justify-content: space-between;

}



.modal-quick-view .tf-single-slide {

  height: 100%;

}



.modal-quick-view .tf-single-slide .item {

  height: 100%;

}



.modal-quick-view .tf-single-slide .item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  aspect-ratio: 0.8405797101;

}



.modal-quick-view .tf-product-info-wrap {

  position: relative;

  margin: 0;

}



.modal-quick-view .tf-product-info-inner {

  display: flex !important;

  flex-direction: column;

  align-items: start;

}



.modal-quick-view .product-info-name {

  margin-bottom: 24px;

}



.modal-quick-view .product-info-meta {

  margin-bottom: 32px;

}



.modal-quick-view .product-info-meta .rating {

  display: flex;

  gap: 9px;

  align-items: center;

}



.modal-quick-view .product-info-price {

  margin-bottom: 24px;

}



.modal-quick-view .price-wrap {

  align-items: start;

  gap: 0;

}



.modal-quick-view .price-new {

  margin-right: 15px;

}



.modal-quick-view .price-old {

  margin-right: 8px;

}



.modal-quick-view .badges-on-sale {

  border-radius: 4px;

  padding: 0 7px;

  line-height: 22px;

  background-color: var(--primary);

  color: var(--white);

}



.modal-quick-view .product-infor-sub {

  margin-bottom: 32px;

}



@media (min-width: 768px) {

  .modal-quick-view .icon-close-popup {

    font-size: 24px;

    top: 0px;

    right: 0px;

  }



  .modal-quick-view .tf-product-media-wrap {

    width: 45%;

  }



  .modal-quick-view .tf-product-info-wrap {

    width: 55%;

  }



  .modal-quick-view .modal-content {

    flex-direction: row;

  }

}



@media (min-width: 1200px) {

  .modal-quick-view .product-info-price {

    margin-bottom: 32px;

  }



  .modal-quick-view .modal-content {

    padding: 48px;

  }



  .modal-quick-view .icon-close-popup {

    font-size: 24px;

    top: 10px;

    right: 10px;

  }

}



@media (min-width: 1440px) {

  .modal-quick-view .tf-product-media-wrap {

    max-width: 696px;

    width: 100%;

  }



  .modal-quick-view .tf-product-info-wrap {

    max-width: 600px;

    width: 100%;

    position: relative;

    margin: 0;

  }

}



.product-info-meta {

  display: flex;

  gap: 32px;

  align-items: center;

  flex-wrap: wrap;

}



.product-info-meta .rating {

  display: flex;

  gap: 9px;

  align-items: center;

}



@media (max-width: 991px) {

  .product-info-meta {

    gap: 18px;

  }

}



.product-info-price .price-wrap {

  align-items: start;

  gap: 0;

}



.product-info-price .price-new {

  margin-right: 15px;

}



.product-info-price .price-old {

  margin-right: 8px;

}



.product-info-price .badges-on-sale {

  border-radius: 4px;

  padding: 0 7px;

  line-height: 22px;

  background-color: var(--primary);

  color: var(--white);

}



.modal-quick-add .modal-content {

  padding: 30px 20px;

}



.modal-quick-add .tf-product-mini-view {

  margin-bottom: 24px;

  position: relative;

  padding-right: 20px;

}



.modal-quick-add .tf-product-mini-view .icon-close-popup {

  top: 0;

  right: 0;

  padding: 0;

}



@media (min-width: 768px) {

  .modal-quick-add .modal-dialog {

    max-width: 537px;

  }



  .modal-quick-add .modal-content {

    padding: 40px;

  }

}



.modal-auto-product .modal-dialog {

  max-width: 1413px;

}



.modal-auto-product .modal-content {

  padding: 40px 15px 20px;

}



.modal-auto-product .title,

.modal-auto-product .countdown-V03 {

  margin-bottom: 24px;

}



@media (min-width: 768px) {

  .modal-auto-product .modal-content {

    padding: 40px;

  }

}



@media (min-width: 1200px) {

  .modal-auto-product .modal-content {

    padding: 83px 80px;

  }



  .modal-auto-product .countdown-V03 {

    margin-bottom: 48px;

  }

}



.modal-auto-newletter .modal-dialog {

  max-width: 985px;

}



.modal-auto-newletter .modal-body {

  display: flex;

  align-items: center;

}



.modal-auto-newletter .content {

  padding: 40px 20px 20px 20px;

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.modal-auto-newletter .heading {

  display: grid;

  gap: 24px;

}



@media (min-width: 768px) {

  .modal-auto-newletter .image {

    max-width: 438px;

    width: 100%;

  }



  .modal-auto-newletter .image img {

    aspect-ratio: 0.7821428571;

  }



  .modal-auto-newletter .content {

    padding: 40px;

  }

}



@media (min-width: 1200px) {

  .modal-auto-newletter .content {

    padding: 82px 54px;

  }



  .modal-auto-newletter .heading {

    margin-bottom: 12px;

  }



  .modal-auto-newletter .form-newleter {

    margin-bottom: 20px;

  }

}



@media (max-width: 767px) {

  .modal-auto-newletter .modal-body {

    flex-direction: column;

  }

}



.canvas-compare {

  height: max-content !important;

  z-index: 5000;

}



.canvas-compare .close-popup {

  position: absolute;

  top: 30px;

  right: 30px;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  cursor: pointer;

}



.canvas-compare .canvas-body {

  padding: 32px 0;

}



.canvas-compare .canvas-wrapper {

  height: unset;

}



.offcanvas-backdrop {

  z-index: 2000;

}



.tf-compare-list {

  display: flex;

  align-items: center;

  gap: 10px;

}



.tf-compare-list .tf-compare-head {

  flex: 0 0 18.96%;

  display: flex;

  align-items: center;

  white-space: nowrap;

}



.tf-compare-list .tf-compare-head .title {

  font-size: 28px;

  line-height: 34px;

}



.tf-compare-list .tf-compare-offcanvas {

  display: flex;

  align-items: center;

  flex: 1 1 100%;

  overflow-x: auto;

}



.tf-compare-list .tf-compare-offcanvas .tf-compare-item {

  flex: 0 0 25%;

  max-width: 150px;

  height: 200px;

  padding: 0 12px;

  display: flex;

}



.tf-compare-list .tf-compare-offcanvas .tf-compare-item a {

  display: flex;

  position: relative;

}



.tf-compare-list .tf-compare-offcanvas .tf-compare-item .icon {

  position: absolute;

  z-index: 5;

  top: 8px;

  right: 8px;

  width: 32px;

  height: 32px;

  background-color: var(--white);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

}



.tf-compare-list .tf-compare-offcanvas .tf-compare-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-compare-list .tf-compare-buttons {

  display: flex;

  flex-direction: column;

  gap: 12px;

  flex: 0 0 17%;

}



.tf-compare-list .tf-compare-buttons .tf-compare-button-clear-all {

  cursor: pointer;

}



@media (max-width: 1024px) {

  .tf-compare-list {

    flex-direction: column;

    max-height: 100%;

    overflow-y: auto;

    gap: 20px;

  }



  .tf-compare-list>div {

    flex: 0 0 100% !important;

  }



  .tf-compare-list .tf-compare-offcanvas .tf-compare-item {

    max-width: unset;

    height: unset;

  }



  .tf-compare-list .tf-compare-buttons {

    width: 100%;

    justify-content: space-between;

    flex-direction: row;

  }

}



@media (max-width: 767px) {

  .tf-compare-list .tf-compare-offcanvas .tf-compare-item {

    flex: 0 0 33.333%;

  }

}



@media (max-width: 575px) {

  .tf-compare-list .tf-compare-offcanvas .tf-compare-item {

    flex: 0 0 50%;

  }

}



.modal-order-detail .modal-dialog {

  max-width: 1094px;

}



.modal-order-detail .modal-top {

  margin-bottom: 24px;

}



.modal-order-detail .modal-content {

  padding: 30px 15px;

}



.modal-order-detail .list-infor {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 24px;

}



.modal-order-detail .list-infor .br-line {

  height: 16px;

  width: 1px;

  background-color: var(--line-8);

}



@media (min-width: 1200px) {

  .modal-order-detail .list-infor {

    gap: 15px;

  }

}



.modal-order-detail .order-total-wrap {

  margin-top: 20px;

  margin-bottom: 40px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



.modal-order-detail .order-total-wrap .text,

.modal-order-detail .order-total-wrap .order-total {

  padding-left: 24px;

}



.modal-order-detail .order-total-wrap .text {

  max-width: 183px;

  width: 100%;

}



.modal-order-detail .order-total-wrap .order-total {

  max-width: 220px;

  width: 100%;

}



@media (min-width: 992px) {

  .modal-order-detail .modal-content {

    padding: 32px;

  }

}



@media (min-width: 1200px) {

  .modal-order-detail .list-infor {

    gap: 24px;

    margin-bottom: 48px;

  }



  .modal-order-detail .modal-top {

    margin-bottom: 48px;

  }



  .modal-order-detail .order-total-wrap {

    margin-top: 32px;

    margin-bottom: 64px;

  }

}



.modal-search .icon-close-popup {

  top: 0;

  right: 0;

}



.modal-search .modal-dialog {

  max-width: 974px;

}



.modal-search .modal-content {

  padding: 48px;

  display: grid;

  gap: 40px;

}



@media (max-width: 991px) {

  .modal-search .modal-content {

    padding: 48px 15px 30px;

  }

}



.modal-search .form-search {

  margin-bottom: 16px;

}



.modal-search .quick-link-list {

  display: flex;

  gap: 16px;

  align-items: center;

  flex-wrap: wrap;

}



.modal-search .view-history-wrap .title {

  margin-bottom: 24px;

}



.modal-search .view-history-wrap .view-history-list {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.modal-search .view-history-wrap .view-history-list .item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



.modal-search .view-history-wrap .view-history-list .item .icon {

  font-size: 24px;

}



.modal-search .trend-product-wrap .heading {

  display: flex;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;

  padding-bottom: 23px;

  border-bottom: 1px solid var(--line);

  margin-bottom: 24px;

}



.modal-search .trend-product-wrap .trend-product-inner {

  display: flex;

  gap: 30px;

}



@media (min-width: 768px) {

  .modal-search .trend-product-wrap .trend-product-inner>* {

    width: 50%;

  }

}



@media (max-width: 767px) {

  .modal-search .trend-product-wrap .trend-product-inner {

    flex-direction: column;

  }

}



.modal-search .trend-product-item {

  display: flex;

  gap: 24px;

}



.modal-search .trend-product-item .image {

  width: 122px;

  height: 122px;

  flex-shrink: 0;

}



.modal-search .trend-product-item .image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.modal-search .trend-product-item .sub {

  margin-bottom: 4px;

}



.modal-search .trend-product-item .title {

  margin-bottom: 8px;

}



.modal-search .trend-product-item .title a {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.modal-search .trend-product-item:not(:last-child) {

  padding-bottom: 24px;

  margin-bottom: 24px;

  border-bottom: 1px solid var(--line);

}



.tf-toolbar-bottom {

  display: none;

  padding: 21px 0px 12px;

  position: fixed;

  z-index: 200;

  bottom: 0;

  right: 0;

  left: 0;

  border-top: 1px solid #eeeeee;

  background-color: var(--white);

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

}



.tf-toolbar-bottom .toolbar-item {

  flex: 1 0 20%;

  position: relative;

}



.tf-toolbar-bottom a {

  width: 100%;

  gap: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.tf-toolbar-bottom .toolbar-icon {

  font-size: 24px;

  position: relative;

  display: flex;

}



.tf-toolbar-bottom .toolbar-count {

  position: absolute;

  top: -11px;

  right: -10px;

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--primary);

  border-radius: 50%;

  font-size: 12px;

  line-height: 16px;

  color: var(--white);

}



.tf-toolbar-bottom .toolbar-label {

  font-weight: 500;

  font-size: 16px;

  line-height: 21px;

}



@media (max-width: 1199px) {

  .tf-toolbar-bottom {

    display: flex;

  }

}



.modal-unavailable .tf-product-notify {

  border: 0;

}



.modal-unavailable .modal-dialog {

  max-width: 678px;

}



.canvas-nav {

  width: 320px !important;

}



.canvas-nav .icon-close-popup {

  position: absolute;

  top: 0px;

  right: 0px;

  font-size: 24px;

}



.canvas-nav .canvas-header {

  padding-bottom: 32px;

  position: relative;

}



.canvas-nav .canvas-header .br-line {

  position: absolute;

  height: 1px;

  background-color: var(--line);

  left: 24px;

  right: 24px;

  bottom: 0px;

  width: auto;

}



.canvas-nav .canvas-body {

  display: flex;

}



.canvas-nav .col-left {

  width: 68.96%;

  position: relative;

  overflow: auto;

  overflow-x: hidden;

  display: flex;

  flex-direction: column;

  gap: 30px;

}



.canvas-nav .col-left::-webkit-scrollbar {

  width: 5px;

}



.canvas-nav .col-left::-webkit-scrollbar-thumb {

  background-color: var(--black);

}



.canvas-nav .col-right {

  width: 31.04%;

  overflow: auto;

  gap: 12px;

}



.canvas-nav .col-right::-webkit-scrollbar {

  width: 5px;

}



.canvas-nav .col-right::-webkit-scrollbar-thumb {

  background-color: var(--black);

}



.canvas-nav .col-left {

  padding: 16px 24px 24px;

}



.canvas-nav .col-left>.group-btn {

  gap: 8px;

}



.canvas-nav .canvas-footer {

  display: flex;

  gap: 16px;

}



.canvas-nav .canvas-footer .br-line {

  width: 1px;

  height: 24px;

}



@media (min-width: 576px) {

  .canvas-nav {

    width: 767px !important;

  }



  .canvas-nav .icon-close-popup {

    top: 16px;

    right: 16px;

    border-radius: 50%;

    border: 1px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: center;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    position: absolute;

    background-color: var(--white);

  }



  .canvas-nav .icon-close-popup .icon {

    color: var(--black);

    font-size: 24px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

  }



  .canvas-nav .icon-close-popup:hover {

    border-color: var(--primary);

  }



  .canvas-nav .icon-close-popup:hover .icon {

    color: var(--primary);

  }

}



@media (min-width: 1200px) {

  .canvas-nav {

    width: 100% !important;

  }



  .canvas-nav .icon-close-popup {

    width: 60px;

    height: 60px;

  }

}



@media (min-width: 1440px) {

  .canvas-nav .col-left {

    padding: 48px;

  }

}



@media (min-width: 1600px) {

  .canvas-nav .icon-close-popup {

    width: 80px;

    height: 80px;

    top: 48px;

    right: 48px;

  }

}



@media (max-width: 1439px) {

  .canvas-nav .col-left {

    width: 60%;

  }



  .canvas-nav .col-right {

    width: 40%;

  }



  .canvas-nav .box-image_content {

    bottom: 16px;

    left: 16px;

  }

}



@media (max-width: 1199px) {

  .canvas-nav .col-left {

    width: 100%;

  }



  .canvas-nav .col-right {

    display: none;

  }

}



@media (max-width: 575px) {

  .canvas-nav .mmenu-item_link {

    font-weight: 700;

    font-size: 18px;

    line-height: 24px;

  }



  .canvas-nav .mmenu-item_link .icon {

    font-size: 18px;

  }

}



.mmenu-list {

  display: flex;

  flex-direction: column;

  max-width: 1040px;

  width: 100%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 1;

  visibility: visible;

}



.mmenu-list li:not(:first-child) .mmenu-item_link {

  padding-top: 16px;

}



.mmenu-list li:not(:last-child) .mmenu-item_link {

  padding-bottom: 16px;

  border-bottom: 1px solid var(--line);

}



@media (min-width: 1200px) {

  .mmenu-list {

    justify-content: center;

    flex: 1;

  }

}



@media (min-width: 1440px) {

  .mmenu-list li:not(:first-child) .mmenu-item_link {

    padding-top: 32px;

  }



  .mmenu-list li:not(:last-child) .mmenu-item_link {

    padding-bottom: 32px;

  }

}



@media (max-width: 575px) {

  .mmenu-list li:not(:first-child) .mmenu-item_link {

    padding-top: 8px;

  }



  .mmenu-list li:not(:last-child) .mmenu-item_link {

    padding-bottom: 8px;

  }

}



.mmenu-item_link {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.mmenu-item_link .icon {

  font-size: 32px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.mmenu-item_link:hover .icon {

  transform: rotate(45deg);

}



.sub-mmnenu-content {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: var(--white);

  padding: 16px 24px 24px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 0;

  visibility: hidden;

  transform: translateX(100%);

  overflow: auto;

}



.sub-mmnenu-content::-webkit-scrollbar {

  width: 3px;

}



.sub-mmnenu-content::-webkit-scrollbar-thumb {

  background-color: var(--primary);

}



.sub-mmnenu-content .sub-mmenu_head {

  margin-bottom: 30px;

}



.sub-mmnenu-content.active {

  transform: translateX(0);

  opacity: 1;

  visibility: visible;

}



@media (min-width: 1200px) {

  .sub-mmnenu-content {

    padding: 54px 48px;

  }



  .sub-mmnenu-content .sub-mmenu_head {

    margin-bottom: 48px;

  }

}



@media (max-width: 575px) {

  .sub-mmnenu-content .grid-recent {

    gap: 0;

  }



  .sub-mmnenu-content .grid-recent>*:not(:last-child)>*:last-child {

    padding-bottom: 25px;

    margin-bottom: 24px;

    border-bottom: 1px solid var(--line);

  }

}



.mega-mmenu_list {

  max-width: 1091px;

  width: 100%;

  display: flex;

  overflow: auto;

  gap: 32px;

}



.mega-mmenu_list .mega-mmenu_heading {

  margin-bottom: 24px;

}



.mega-mmenu_list .mega-mmenu_item:not(:last-child) {

  padding-right: 33px;

  border-right: 1px solid var(--line);

}



@media (min-width: 1600px) {

  .mega-mmenu_list {

    gap: 48px;

  }



  .mega-mmenu_list .mega-mmenu_item {

    min-width: 200px;

  }



  .mega-mmenu_list .mega-mmenu_item:not(:last-child) {

    padding-right: 49px;

  }

}



@media (min-width: 1440px) {

  .mega-mmenu_list .mega-mmenu_heading {

    margin-bottom: 32px;

  }

}



@media (min-width: 576px) and (max-width: 1439px) {

  .mega-mmenu_list.mmenu-list_product {

    display: grid;

    grid-template-columns: 1fr 1fr;

  }



  .mega-mmenu_list.mmenu-list_product .mega-mmenu_item {

    padding: 0;

    border: unset;

  }

}



@media (max-width: 575px) {

  .mega-mmenu_list {

    display: grid;

    grid-template-columns: 1fr;

  }



  .mega-mmenu_list .mega-mmenu_item {

    padding: 0 !important;

    border: unset !important;

  }

}



.sub-mmenu_head {

  display: flex;

  align-items: center;

  gap: 24px;

}



.sub-mmenu_head .br-line {

  height: 24px;

}



.sub-mmenu_head .icon {

  font-size: 30px;

}



@media (min-width: 1200px) {

  .sub-mmenu_head {

    gap: 32px;

  }



  .sub-mmenu_head .icon {

    font-size: 40px;

  }

}



.sub-mmenu_main {

  display: grid;

  gap: 40px;

}



.mega-menu_recent .title {

  margin-bottom: 24px;

}



.mega-menu_recent .list-ver {

  gap: 24px;

}



.mega-mmenu_heading {

  font-weight: 600;

}



.sub-mega-mmenu_list li:not(:first-child) .mega-mmenu_link {

  padding-top: 8px;

}



.sub-mega-mmenu_list li:not(:last-child) .mega-mmenu_link {

  padding-bottom: 8px;

}



.mega-mmenu_link {

  display: flex;

}



.mmenu-wrapper .group-btn,

.mmenu-wrapper .flow-us-wrap,

.mmenu-wrapper .payment-wrap {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 1;

  visibility: visible;

}



.mmenu-wrapper.submenu-open {

  overflow: hidden;

}



.mmenu-wrapper.submenu-open .group-btn,

.mmenu-wrapper.submenu-open .flow-us-wrap,

.mmenu-wrapper.submenu-open .payment-wrap {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 0;

  visibility: hidden;

}



.sidebar-filter {

  background-color: var(--white);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.sidebar-filter .canvas-header {

  color: var(--black);

}



.sidebar-filter .canvas-body {

  overflow-x: hidden;

}



@media (min-width: 1200px) {



  .sidebar-filter .canvas-body,

  .sidebar-filter .canvas-bottom {

    padding: 0;

  }

}



@media (max-width: 1199px) {

  .sidebar-filter {

    position: fixed;

    bottom: 0;

    z-index: 3000;

    display: flex;

    flex-direction: column;

    background-clip: padding-box;

    outline: 0;

  }



  .sidebar-filter.left {

    top: 0;

    left: 0;

    transform: translateX(-100%);

  }



  .sidebar-filter.right {

    top: 0;

    right: 0;

    transform: translateX(100%);

  }



  .sidebar-filter.show {

    transform: none;

  }

}



.modal-size-guide .modal-dialog {

  max-width: 974px;

}



.modal-size-guide .modal-content {

  border: 0;

  padding: 48px;

}



.modal-size-guide .modal-content .header {

  margin-bottom: 40px;

}



.modal-size-guide .modal-content .wrap {

  min-height: 328px;

}



@media (max-width: 1024px) {

  .modal-size-guide .modal-content {

    padding: 24px;

  }



  .modal-size-guide .modal-content .header {

    margin-bottom: 24px;

  }



  .modal-size-guide .suggests {

    flex-wrap: wrap;

  }

}



.box-text_empty.type-shop_cart {

  display: flex;

  flex-direction: column;

  height: 100%;

  padding-bottom: 32px;

  gap: 30px;

}



.box-text_empty.type-shop_cart .shop-empty_top {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  max-width: 354px;

  margin: 0 auto;

  flex: 1;

}



.box-text_empty.type-shop_cart .shop-empty_top .icon {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  background-color: var(--black);

  font-size: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

  margin-bottom: 24px;

}



.box-text_empty.type-shop_cart .shop-empty_top .text-emp {

  margin-bottom: 12px;

}



.box-text_empty.type-shop_cart .shop-empty_bot {

  display: grid;

  gap: 12px;

}



@media (max-width: 767px) {

  .box-text_empty.type-shop_cart .shop-empty_top .icon {

    width: 60px;

    height: 60px;

    font-size: 24px;

  }



  .box-text_empty.type-shop_cart .text-emp {

    font-size: 24px;

    line-height: 32px;

  }

}



.modal-compare_color .modal-dialog {

  max-width: 1470px;

}



.modal-compare_color .modal-content {

  padding: 30px 16px;

}



@media (min-width: 1200px) {

  .modal-compare_color .modal-content {

    padding: 48px;

  }

}



.compare-color_list {

  border: 1px solid var(--line);

  display: flex;

  overflow-x: auto;

  max-width: 1344px;

}



.compare-color_list .box-text_empty {

  padding: 20px 16px;

}



.compare-color_list .compare-color_item {

  border-right: 1px solid var(--line);

  flex: 0 0 auto;

  width: 335.5px;

}



@media (max-width: 767px) {

  .compare-color_list {

    max-width: 1000px;

  }



  .compare-color_list .compare-color_item {

    width: 250px;

  }

}



.compare-color_item {

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 16px;

  padding: 16px;

}



.compare-color_item .compare_image {

  position: relative;

}



.compare-color_item .remove {

  position: absolute;

  top: 8px;

  right: 8px;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  background-color: var(--white);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  border-radius: 50%;

  color: var(--black);

}



.compare-color_item .remove:hover {

  background-color: var(--black);

  color: var(--white);

  border-color: var(--black);

}



.compare-color_item .compare_colour {

  display: flex;

  align-items: center;

  color: var(--black);

  gap: 12px;

  border: 1px solid var(--line);

  padding: 7px;

  border-radius: 999px;

}



.compare-color_item .color {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  display: block;

}



.compare-color_item .compare_bot {

  display: grid;

  gap: 8px;

  width: 100%;

}



.modal-ask_question .modal-dialog,

.modal-ship_delivery .modal-dialog,

.modal-share .modal-dialog,

.modal-edit_address .modal-dialog,

.modal-newletter .modal-dialog {

  max-width: 726px;

}



.modal-ask_question .modal-content,

.modal-ship_delivery .modal-content,

.modal-share .modal-content,

.modal-edit_address .modal-content,

.modal-newletter .modal-content {

  padding: 30px 16px;

}



@media (min-width: 1200px) {



  .modal-ask_question .modal-content,

  .modal-ship_delivery .modal-content,

  .modal-share .modal-content,

  .modal-edit_address .modal-content,

  .modal-newletter .modal-content {

    padding: 48px;

  }

}



.modal-ask_question .form-ask {

  margin-bottom: 24px;

}



.legal-list {

  display: grid;

  gap: 32px;

}



.legal-list .legal-item {

  display: grid;

  gap: 16px;

}



.modal-share .tf-social-icon {

  margin-bottom: 30px;

}



.modal-share .wrap-code {

  position: relative;

  border-radius: 999px;

  padding: 16px 24px;

  background-color: var(--bg-2);

}



.modal-share .btn-coppy-text {

  position: absolute;

  top: 5px;

  right: 5px;

  bottom: 5px;

  min-width: 140px;

}



@media (min-width: 1200px) {

  .modal-share .tf-social-icon {

    margin-bottom: 40px;

  }

}



.modal-newletter .modal-heading {

  margin-bottom: 0;

}



.modal-newletter .icon-close-popup {

  background-color: var(--white);

  border-radius: 50%;

  transform: unset;

  top: 8px;

  right: 8px;

}



.modal-newletter .modal-body {

  padding: 30px;

}



.modal-newletter .sub-title,

.modal-newletter .title {

  text-align: center;

}



.modal-newletter .sub-title {

  margin-bottom: 8px;

}



.modal-newletter .title {

  margin-bottom: 30px;

}



.modal-newletter .form-newletter {

  margin-bottom: 24px;

}



@media (min-width: 1200px) {

  .modal-newletter .modal-body {

    padding: 48px;

  }



  .modal-newletter .title {

    margin-bottom: 40px;

  }

}



@media (max-width: 767px) {

  .modal-newletter .modal-body {

    padding: 30px 16px;

  }



  .modal-newletter .icon-close-popup {

    padding: 10px;

    font-size: 18px;

  }

}



.wrapper-invoice {

  background-color: var(--bg-2);

  display: flex;

  justify-content: center;

  align-items: center;

}



.s-invoice {

  padding-top: 32px;

  padding-bottom: 32px;

}



.s-invoice .heading {

  margin-bottom: 40px;

}



@media (min-width: 1200px) {

  .s-invoice .heading {

    margin-bottom: 56px;

  }

}



.wg-invoice {

  background-color: var(--white);

  padding: 30px 20px;

  display: grid;

  gap: 40px;

}



.wg-invoice .invoice-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px;

}



.wg-invoice .invoice-info {

  display: flex;

  justify-content: space-between;

  gap: 30px;

}



.wg-invoice .invoice-info_item {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.wg-invoice .invoice-info_item .invoice_value {

  display: grid;

  gap: 4px;

}



.wg-invoice .invoice-social {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px 30px;

}



.wg-invoice .invoice_link {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--text);

}



.wg-invoice .invoice_link .icon {

  font-size: 16px;

}



@media (min-width: 992px) {

  .wg-invoice .invoice-info_item {

    min-width: 150px;

  }



  .wg-invoice .invoice-info_item:not(:last-child) {

    padding-right: 30px;

    border-right: 1px solid var(--line);

  }

}



@media (min-width: 1200px) {

  .wg-invoice {

    padding: 48px;

    gap: 56px;

  }



  .wg-invoice .invoice-social {

    gap: 58px;

  }



  .wg-invoice .invoice-info {

    gap: 48px;

  }



  .wg-invoice .invoice-info_item.invoice-info_date {

    min-width: 248px;

  }



  .wg-invoice .invoice-info_item:not(:last-child) {

    padding-right: 48px;

  }



  .wg-invoice .invoice_download-btn {

    min-width: 248px;

  }

}



@media (max-width: 991px) {

  .wg-invoice .invoice-info {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 32px 16px;

  }

}



@media (max-width: 575px) {

  .wg-invoice .invoice-info {

    grid-template-columns: 1fr;

    gap: 24px;

  }

}



.invoice-table {

  color: var(--black);

}



.invoice-table thead {

  background-color: var(--bg-2);

}



.invoice-table th {

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

}



.invoice-table th,

.invoice-table td {

  white-space: nowrap;

}



.invoice-table tbody tr {

  border-bottom: 1px solid var(--line);

}



@media (min-width: 1200px) {

  .invoice-table {

    table-layout: fixed;

  }



  .invoice-table th:first-child,

  .invoice-table td:first-child {

    width: 444px;

  }



  .invoice-table th {

    padding: 24px;

  }



  .invoice-table td {

    padding: 24px 24px 23px;

  }

}



.modalDemo .demo-title {

  margin-top: 50px;

  margin-bottom: 44px;

  text-align: center;

}



.modalDemo .modal-dialog {

  max-width: 1540px;

  margin-top: 8px;

  margin-bottom: 8px;

  height: calc(100vh - 16px);

}



.modalDemo .modal-content {

  padding: 0 50px 40px;

  background-color: var(--white);

  width: 100%;

  border-radius: 20px;

  margin: 0 30px;

  max-height: calc(100vh - 60px);

  border: 0;

  cursor: default;

  overflow: hidden;

}



.modalDemo .mega-menu {

  padding: 0 32px;

  overscroll-behavior-y: contain;

  overflow-y: auto;

}



.modalDemo .mega-menu::-webkit-scrollbar {

  width: 6px;

}



.modalDemo .mega-menu::-webkit-scrollbar:hover {

  width: 12px;

  height: 12px;

}



.modalDemo .mega-menu::-webkit-scrollbar-thumb {

  background: var(--primary);

  transition: all 0.3s ease;

}



.modalDemo .header {

  position: relative;

}



.modalDemo .header .icon-close-popup {

  position: absolute;

  top: 18px;

  right: 0;

}



.modalDemo .row-demo {

  grid-template-columns: repeat(5, 1fr);

  row-gap: 32px;

}



.modalDemo .row-demo .demo-img {

  aspect-ratio: 0;

}



.compare-color_list .box-text_empty {

  display: none;

}



/*------------ box icon ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.box-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

}



.tf-social-icon {

  display: inline-flex;

  gap: 16px;

  --facebook-cl: rgb(59, 89, 152);

  --x-cl: rgb(85, 85, 85);

  --instagram-cl: linear-gradient(#8a3ab9, #e95950, #fccc63);

  --threads-cl: rgb(224, 53, 102);

  --youtube-cl: rgb(205, 32, 31);

  --tiktok-cl: linear-gradient(#25f4ee, #000, #fe2c55);

  --tiktok-cl2: rgb(254, 44, 85);

  --pinterest-cl: rgb(203, 32, 39);

  --tumblr-cl: rgb(55, 69, 92);

  --vimeo-cl: rgb(26, 183, 234);

  --snapchat-cl: rgb(255, 221, 0);

  --whatsapp-cl: rgb(0, 230, 118);

  --linked_in-cl: rgb(23, 106, 255);

  --wechat-cl: rgb(26, 173, 24);

  --reddit-cl: rgb(255, 69, 0);

  --line-cl: rgb(0, 195, 77);

  --spotify-cl: rgb(30, 125, 96);

}



.tf-social-icon a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: 1px solid;

  border-color: var(--line);

  position: relative;

}



.tf-social-icon a .icon {

  display: inline-flex;

  position: relative;

  z-index: 1;

  font-size: 16px;

}



.tf-social-icon a::after {

  content: "";

  border-radius: 50%;

  position: absolute;

  background: transparent;

  top: -1px;

  left: -1px;

  right: -1px;

  bottom: -1px;

  z-index: 0;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 0;

  visibility: hidden;

}



.tf-social-icon.style-2 a {

  border-color: var(--line-3);

  color: var(--white);

}



.tf-social-icon .social-facebook::after {

  background: var(--facebook-cl);

}



.tf-social-icon .social-facebook:hover {

  color: var(--white);

}



.tf-social-icon .social-facebook:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon .social-instagram::after {

  background: var(--instagram-cl);

}



.tf-social-icon .social-instagram:hover {

  color: var(--white);

}



.tf-social-icon .social-instagram:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon .social-x::after {

  background: #20a200;

}



.tf-social-icon .social-x:hover {

  color: #20a200;

}



.tf-social-icon .social-x .icon {

  display: flex;

  justify-content: center;

  align-items: center;

}



.tf-social-icon .social-x:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon .social-snapchat::after {

  background: var(--snapchat-cl);

}



.tf-social-icon .social-snapchat:hover {

  color: var(--white);

}



.tf-social-icon .social-snapchat:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon .social-pinterest::after {

  background: var(--pinterest-cl);

}



.tf-social-icon .social-pinterest:hover {

  color: var(--white);

}



.tf-social-icon .social-pinterest:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon .social-linkin::after {

  background: var(--linked_in-cl);

}



.tf-social-icon .social-linkin:hover {

  color: var(--white);

}



.tf-social-icon .social-linkin:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon .social-tiktok::after {

  background: var(--tiktok-cl);

}



.tf-social-icon .social-tiktok:hover {

  color: var(--white);

}



.tf-social-icon .social-tiktok:hover::after {

  opacity: 1;

  visibility: visible;

}



.tf-social-icon.style-white a {

  color: var(--white);

  border-color: var(--line);

}



.tf-social-icon_2 {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

}



.tf-social-icon_2 li,

.tf-social-icon_2 a {

  display: flex;

}



/*------------ hover ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.hover-img .img-style {

  overflow: hidden;

}



.hover-img .img-style>img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  -webkit-transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);

  transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);

}



.hover-img:hover .img-style>img {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}



.hover-img .img-style2 {

  overflow: hidden;

  border-radius: 10px;

}



.hover-img .img-style2 .img-hv {

  width: 100%;

  object-fit: cover;

  -webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;

  transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;

  transition: transform 500ms ease;

}



.hover-img2 .img-style2 {

  overflow: hidden;

  border-radius: 8px;

}



.hover-img2 .img-style2 .img2 {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.hover-img2:hover .img2 {

  transform: scale(1.1) rotate(3deg);

}



.hover-img3 .img-style3 {

  border-radius: 8px;

  overflow: hidden;

}



.hover-img3 .img-style3 img {

  width: 100%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.hover-img3:hover img {

  transform: scale(1.075);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.hover-img4 .img-style4 {

  position: relative;

  overflow: hidden;

}



.hover-img4 .img-style4:after {

  content: "";

  position: absolute;

  width: 200%;

  height: 0%;

  left: 50%;

  top: 50%;

  background-color: rgba(255, 255, 255, 0.3);

  transform: translate(-50%, -50%) rotate(-45deg);

  z-index: 1;

  pointer-events: none;

}



.hover-img4 .img-style4 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: all 1s;

}



.hover-img4:hover .img-style4:after {

  height: 250%;

  transition: all 600ms linear;

  background-color: transparent;

}



.hover-img4:hover .img-style4 img {

  transform: scale(1.1);

}



.pagi2 .swiper-pagination2:hover .box-img .icon-practice,

.swiper-button-next2:hover .box-img .icon-practice,

.swiper-button-prev2:hover .box-img .icon-practice,

.hv-one:hover .box-img .icon-practice {

  opacity: 1;

  z-index: 99;

  top: 50%;

  transition-delay: 0.5s;

}



.pagi2 .swiper-pagination2:hover .img-style::before,

.swiper-button-next2:hover .img-style::before,

.swiper-button-prev2:hover .img-style::before,

.hv-one:hover .img-style::before {

  opacity: 1;

}



.pagi2 .swiper-pagination2 .img-style,

.swiper-button-next2 .img-style,

.swiper-button-prev2 .img-style,

.hv-one .img-style {

  border-radius: 10px;

  overflow: hidden;

}



.pagi2 .swiper-pagination2 .img-style::before,

.swiper-button-next2 .img-style::before,

.swiper-button-prev2 .img-style::before,

.hv-one .img-style::before {

  content: "";

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  position: absolute;

  background: rgba(0, 0, 0, 0.5019607843);

  width: 100%;

  height: 100%;

  -webkit-transition: all 0.5s ease;

  -moz-transition: all 0.5s ease;

  -ms-transition: all 0.5s ease;

  -o-transition: all 0.5s ease;

  transition: all 0.5s ease;

  z-index: 99;

  opacity: 0;

  border-radius: 10px;

}



.pagi2 .swiper-pagination2 .img-style.s-one::before,

.swiper-button-next2 .img-style.s-one::before,

.swiper-button-prev2 .img-style.s-one::before,

.hv-one .img-style.s-one::before {

  border-radius: 50%;

}



.hv-one2:hover .img-style2::before {

  opacity: 1;

  visibility: visible;

}



.hv-one2 .img-style2::before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  -webkit-transition: all 0.4s ease-out 0s;

  -moz-transition: all 0.4s ease-out 0s;

  -ms-transition: all 0.4s ease-out 0s;

  -o-transition: all 0.4s ease-out 0s;

  transition: all 0.4s ease-out 0s;

  opacity: 0;

  visibility: hidden;

  background: rgba(0, 0, 0, 0.5);

  z-index: 1;

  border-radius: 10px;

}



.hv-tool {

  position: relative;

  transition: all 0.3s ease;

}



.hover-tooltip {

  position: relative;

}



.hover-tooltip .tooltip {

  position: absolute;

  white-space: nowrap;

  padding: 4px 12px;

  border-radius: 2px;

  bottom: calc(100% + 10px);

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  visibility: hidden;

  color: var(--white);

  background-color: var(--black);

  transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;

  z-index: 5;

  font-size: 12px;

  line-height: 22px;

  font-weight: 400;

  border-radius: 8px;

  text-align: center;

  font-family: "Open Sans", sans-serif !important;

  display: none;

}



.hover-tooltip .tooltip::before {

  content: "";

  left: 50%;

  transform: translateX(-50%) rotate(45deg);

  top: 26px;

  position: absolute;

  background: var(--black);

  width: 9px;

  height: 9px;

  z-index: -1;

}



@media (min-width: 1200px) {

  .hover-tooltip .tooltip {

    font-size: 16px;

    line-height: 22px;

    display: block;

  }

}



.hover-tooltip .tooltip.bg-primary::before {

  background: var(--primary);

}



.hover-tooltip:hover .tooltip {

  opacity: 1;

  visibility: visible;

}



.hover-tooltip.tooltip-bot .tooltip {

  top: calc(100% + 10px);

  bottom: unset;

}



.hover-tooltip.tooltip-bot .tooltip::before {

  top: -4px;

}



.hover-tooltip.tooltip-left .tooltip {

  right: 100%;

  bottom: auto;

  transform: translateX(0px);

  left: unset;

}



.hover-tooltip.tooltip-left .tooltip::before {

  top: 50%;

  left: auto;

  transform: translateY(-50%) rotate(45deg);

  right: -4px;

}



.hover-tooltip.tooltip-left:hover .tooltip {

  transform: translateX(-12px);

}



.hover-tooltip.tooltip-right .tooltip {

  left: 100%;

  bottom: auto;

  transform: translateX(0px);

}



.hover-tooltip.tooltip-right .tooltip::before {

  top: 50%;

  right: auto;

  transform: translateY(-50%) rotate(45deg);

  left: -4px;

}



.hover-tooltip.tooltip-right:hover .tooltip {

  transform: translateX(8px);

}



.hover-overlay {

  position: relative;

}



.hover-overlay::before {

  position: absolute;

  z-index: 2;

  content: "";

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.1);

  top: 0;

  left: 0;

  transition: 0.4s ease 0.1s;

  opacity: 0;

  visibility: hidden;

}



.hover-overlay:hover::before {

  opacity: 1;

  visibility: visible;

}



.hover-cursor-img .hover-image {

  display: none;

}



@media (min-width: 1200px) {

  .hover-cursor-img {

    position: relative;

  }



  .hover-cursor-img .hover-image {

    position: fixed;

    display: block;

    transform: scale(0);

    pointer-events: none;

    opacity: 0;

    transition: transform 0.3s ease, opacity 0.3s ease;

    z-index: 1000;

  }



  .hover-cursor-img .hover-image img {

    border-radius: 50%;

    max-width: 150px;

    box-shadow: 0px 10px 25px 0px rgba(43, 52, 74, 0.1215686275);

  }

}



/*------------ product ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.stagger-wrap .stagger-item {

  transition: 0.3s ease-in-out;

  transform: scale(0.5) rotate(90deg) skew(15deg);

  opacity: 0;

}



.stagger-wrap .stagger-item.stagger-finished {

  transform: scale(1) rotate(0deg) skew(0deg);

  opacity: 1;

}



.prd-recent {

  display: flex;

  gap: 24px;

}



.prd-recent .badge-tag {

  margin-bottom: 4px;

}



.prd-recent .name-prd {

  margin-bottom: 8px;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.prd-recent .image {

  max-width: 122px;

  width: 100%;

}



.prd-recent .image img {

  aspect-ratio: 1;

}



.card-product {

  display: flex;

  flex-direction: column;

  gap: 24px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.card-product:hover .variant-box,

.card-product:hover .product-action_bot,

.card-product:hover .product-btn_quick {

  transform: translateY(0px);

  opacity: 1;

  visibility: visible;

}



.card-product:hover .product-countdown {

  bottom: -20%;

}



.card-product:hover .product-marquee_sale {

  transform: translateY(100%);

}



.card-product.hover-xl-btn_bot {

  position: relative;

}



@media (min-width: 1200px) {

  .card-product.hover-xl-btn_bot .card-product_action-bot {

    background-color: var(--white);

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    transform: translateY(-10px);

    padding: 0px 24px 24px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    opacity: 0;

    visibility: hidden;

  }



  .card-product.hover-xl-btn_bot:hover .card-product_action-bot {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

  }

}



@media (min-width: 576px) {

  .card-product.has-size .product-action_bot {

    bottom: 63px;

  }

}



@media (min-width: 1200px) {

  .card-product.has-size .product-action_bot {

    bottom: 80px;

  }

}



.card-product.style-2 .product-action_list {

  top: unset;

  left: 8px;

  right: 8px;

  justify-content: center;

  flex-direction: row;

  bottom: 8px;

}



.card-product.style-2 .product-action_list li {

  transform: translateY(0px);

  transition-delay: unset !important;

}



@media (min-width: 576px) {

  .card-product.style-2 .product-action_list {

    bottom: 16px;

  }



  .card-product.style-2.has-size .product-action_list {

    bottom: 50px;

  }

}



.card-product.style-3 .box-icon {

  width: unset;

  height: unset;

  background-color: transparent;

  color: var(--white);

}



.card-product.style-3 .product-action_list {

  top: unset;

  bottom: 0;

  left: 0;

  right: 0;

  justify-content: center;

  flex-direction: row;

  background: var(--black);

  padding-top: 11px;

  padding-bottom: 11px;

}



.card-product.style-3 .product-action_list li {

  transform: translateY(0);

  transition-delay: unset !important;

}



.card-product.style-3 .product-action_list .br-line {

  background-color: var(--line-2);

}



@media (max-width: 575px) {

  .card-product.style-3 .product-action_list {

    padding-top: 5px;

    padding-bottom: 5px;

  }

}



.card-product.style-4 .product-action_list {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  justify-content: center;

  flex-direction: row;

}



.card-product.style-4 .product-action_list li {

  transform: translateY(0px);

  transition-delay: unset !important;

}



.card-product.style-5 .name-product {

  margin-bottom: 16px;

}



.card-product.style-5 .rate_wrap {

  margin-bottom: 16px;

}



.card-product.style-6 .card-product_info {

  gap: 16px;

}



.card-product.style-6 .price-wrap,

.card-product.style-6 .name-product {

  margin: 0;

}



.card-product.style-padding {

  padding: 30px 20px;

  background-color: var(--white);

  gap: 16px;

}



.card-product.style-padding-2 {

  padding: 20px 16px;

}



.card-product.style-padding-3 {

  padding: 24px;

  background-color: #FAFAFD;

}



.card-product.style-pading-4 {

  padding: 16px 16px 24px;

  background-color: #FAFAFA;

}



.card-product.out-of-stock .card-product_wrapper::before {

  content: "Sold Out";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 84px;

  height: 84px;

  border-radius: 50%;

  background-color: var(--white);

  color: var(--primary);

  font-size: 18px;

  font-weight: 600;

  line-height: 24px;

  text-transform: uppercase;

  text-align: center;

  padding: 10px;

  z-index: 5;

}



@media (max-width: 575px) {

  .card-product.out-of-stock .card-product_wrapper::before {

    width: 60px;

    height: 60px;

    font-size: 16px;

    line-height: 20px;

  }

}



.card-product.out-of-stock .card-product_wrapper .product-img::after {

  background: rgba(0, 0, 0, 0.2);

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 3;

}



.product-img.raffle::before {

  content: '抽一番賞';

  position: absolute;

  z-index: 3;

  right: -40px;

  top: 15px;

  transform: rotate(45deg);

  background-color: red;

  height: 35px;

  line-height: 35px;

  width: 140px;

  text-align: center;

  color: #fff;

  font-size: 16px;

  font-weight: 900;

}



@media (min-width: 576px) {

  .card-product.style-3 .variant-box {

    bottom: 58px;

  }

}



@media (min-width: 1200px) {

  .card-product:hover .product-action_list li {

    opacity: 1;

    visibility: visible;

  }



  .card-product:hover .product-action_list li:nth-child(1) {

    transform: translateX(0px);

  }



  .card-product:hover .product-action_list li:nth-child(2) {

    transform: translateX(0px);

    transition-delay: 0.1s;

  }



  .card-product:hover .product-action_list li:nth-child(3) {

    transform: translateX(0px);

    transition-delay: 0.2s;

  }



  .card-product:hover .product-action_list li:nth-child(4) {

    transform: translateX(0px);

    transition-delay: 0.3s;

  }



  .card-product.style-2 .product-action_list li {

    transform: translateY(20px);

  }



  .card-product.style-2:hover .product-action_list li {

    transform: translateY(0px);

  }



  .card-product.style-3 .product-action_list {

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    transform: translateY(20px);

    opacity: 0;

    visibility: hidden;

  }



  .card-product.style-3:hover .product-action_list {

    transform: translateY(0px);

    opacity: 1;

    visibility: visible;

  }



  .card-product.style-4 .product-action_list li {

    transform: translateY(20px);

  }



  .card-product.style-4:hover .product-action_list li {

    transform: translateY(0px);

  }



  .card-product.style-list {

    gap: 48px;

  }



  .card-product.style-padding {

    padding: 32px;

  }



  .card-product.style-padding-2 {

    padding: 24px;

  }

}



@media (max-width: 575px) {

  .card-product {

    gap: 12px;

  }

}



.product-style_list {

  flex-direction: row;

}



.product-style_list .product-img {

  height: 100%;

}



.product-style_list .card-product_wrapper {

  width: 35%;

}



.product-style_list .card-product_info {

  gap: 15px;

  width: calc(65% - 15px);

}



.product-style_list .card-product_info .product-action_list {

  position: unset;

  flex: 1;

  display: flex;

}



.product-style_list .product-color_list {

  margin-bottom: 14px;

}



.product-style_list .name-product {

  font-weight: 500;

}



.product-style_list .product-desc_list {

  display: grid;

  gap: 12px;

}



.product-style_list .product-info_list {

  flex: 2;

}



.product-style_list .group-btn {

  gap: 12px;

  white-space: nowrap;

}



@media (min-width: 768px) {

  .product-style_list .group-btn {

    flex-direction: column;

  }



  .product-style_list .card-product_info {

    display: flex;

    align-items: center;

  }



  .product-style_list .card-product_info .product-action_list {

    border-left: 1px solid var(--line);

    padding-left: 15px;

  }

}



@media (min-width: 1200px) {

  .product-style_list {

    gap: 30px;

  }



  .product-style_list .card-product_wrapper {

    max-width: 324px;

    width: 100%;

  }



  .product-style_list .card-product_info {

    width: 100%;

  }



  .product-style_list .product-desc_list {

    gap: 24px;

  }

}



@media (min-width: 1440px) {

  .product-style_list {

    gap: 48px;

  }



  .product-style_list .card-product_info {

    gap: 48px;

  }



  .product-style_list .card-product_info .product-action_list {

    gap: 24px;

    padding-left: 48px;

  }



  .product-style_list .product-color_list {

    margin-bottom: 32px;

  }



  .product-style_list .group-btn {

    max-width: 200px;

    width: 100%;

  }

}



@media (max-width: 767px) {

  .product-style_list .product-info_list {

    margin-bottom: 16px;

  }



  .product-style_list .card-product_info .product-action_list {

    align-items: start;

  }



  .product-style_list .card-product_wrapper .product-action_list {

    top: unset;

    bottom: 8px;

    left: 8px;

    right: 8px;

    flex-direction: row;

    justify-content: center;

  }



  .product-style_list .group-btn {

    flex-wrap: wrap;

  }

}



@media (max-width: 575px) {

  .product-style_list .card-product_wrapper {

    width: 45%;

  }



  .product-style_list .card-product_info {

    width: 60%;

  }



  .product-style_list .card-product_info .product-action_list .tf-btn {

    font-size: 16px;

    line-height: 20px;

  }

}



.box-price-rate,

.box-hurry-sale {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 5px;

}



.tag-product {

  margin-bottom: 4px;

}



.product-style_list-mini .name-product {

  margin-bottom: 8px;

}



.product-style_list-mini .card-product_wrapper {

  aspect-ratio: 1;

  z-index: 1;

}



.product-style_list-mini .card-product_info {

  align-self: flex-start;

  flex: 1;

}



.product-style_list-mini.type-2 {

  flex-direction: row;

  align-items: center;

}



.product-style_list-mini.type-2 .card-product_wrapper {

  max-width: 122px;

}



.product-style_list-mini.type-2 .name-product {

  margin-bottom: 16px;

}



.product-style_list-mini.type-2 .price-wrap {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  transform: translateY(0px);

  opacity: 1;

  visibility: visible;

}



.product-style_list-mini.type-3 {

  gap: 16px;

  height: 100%;

  flex-direction: row;

  align-items: center;

}



.product-style_list-mini.type-3 .card-product_wrapper {

  border-radius: 16px;

}



.product-style_list-mini.type-3 .card-product_info {

  display: grid;

  gap: 16px;

}



.product-style_list-mini.type-3 .name-product {

  margin-bottom: 12px;

}



.product-style_list-mini.type-3 .rate_wrap {

  margin-bottom: 3px;

}



.product-style_list-mini.type-3 .card-product_wrapper {

  max-width: 194px;

}



.product-style_list-mini.style-border {

  padding: 15px;

  border: 1px solid var(--line);

  border-radius: 16px;

}



@media (min-width: 1200px) {

  .product-style_list-mini.type-3 .name-product {

    -webkit-line-clamp: 3;

  }



  .product-style_list-mini.type-2:hover .price-wrap {

    transform: translateY(-16px);

    opacity: 0;

    visibility: hidden;

  }

}



@media (min-width: 1025px) {

  .product-style_list-mini {

    flex-direction: row;

    align-items: center;

  }



  .product-style_list-mini .card-product_wrapper {

    max-width: 122px;

  }

}



@media (max-width: 575px) {

  .product-style_list-mini.type-3 {

    flex-direction: column;

  }



  .product-style_list-mini.type-3 .card-product_wrapper {

    max-width: 100px;

  }



  .product-style_list-mini.type-3 .card-product_info {

    width: 100%;

  }

}



.group-action {

  position: relative;

  display: grid;

  gap: 8px;

}



.card-product_wrapper {

  aspect-ratio: 1/1;

  z-index: 20;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

  box-shadow: 0 0 15px #ccc;

}



.card-product_wrapper.style-line-radius {

  border-radius: 16px;

  border: 1px solid var(--line);

}



.card-product_wrapper .product-img {

  overflow: hidden;

  position: relative;

}



.card-product_wrapper .remove {

  position: absolute;

  top: 8px;

  right: 8px;

  z-index: 2;

}



.card-product_wrapper .remove .icon {

  font-size: 20px;

}



.card-product_wrapper .remove.box-icon {

  width: 35px;

  height: 35px;

  border-radius: 50%;

  background-color: var(--white);

}



.card-product_wrapper .remove.box-icon:hover {

  background-color: var(--black);

  color: var(--white);

}



@media (min-width: 1200px) {

  .card-product_wrapper .remove {

    top: 16px;

    right: 16px;

  }



  .card-product_wrapper .remove.box-icon {

    width: 48px;

    height: 48px;

  }

}



.card-product_wrapper img {

  display: block;

  height: 100%;

  width: 100%;

  object-fit: cover;

  object-position: center;

  transition-duration: 700ms;

}



.card-product_wrapper .img-hover {

  position: absolute;

  inset: 0;

  opacity: 0;

}



.card-product_wrapper:hover .img-hover {

  display: block;

  z-index: 1;

  opacity: 1;

  -webkit-transform: scale(1.05);

  transform: scale(1.05);

}



.product-action_list {

  position: absolute;

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 12px;

  top: 8px;

  right: 8px;

  z-index: 6;

}



.product-action_list .box-icon {

  width: 35px;

  height: 35px;

  border-radius: 50%;

  background-color: var(--white);

  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

}



.product-action_list .box-icon:hover {

  background-color: var(--black);

  color: var(--white);

}



.product-action_list .box-icon.hover-primary:hover {

  background-color: var(--primary);

  color: var(--white);

}



.product-action_list .icon {

  font-size: 20px;

}



.product-action_list.style-row {

  flex-direction: row;

  top: 0;

  left: 0;

}



.product-action_list.style-row .box-icon {

  width: 32px;

  height: 32px;

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07);

}



.product-action_list.style-row .box-icon .icon {

  font-size: 16px;

}



@media (min-width: 1200px) {

  .product-action_list {

    top: 16px;

    right: 16px;

  }



  .product-action_list .box-icon {

    width: 48px;

    height: 48px;

  }



  .product-action_list li {

    opacity: 0;

    visibility: hidden;

    transform: translateX(20px);

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

  }



  .product-action_list.style-row li {

    transform: translateY(-16px);

    transition-delay: unset !important;

  }

}



@media (max-width: 1199px) {

  .product-action_list.style-row {

    position: unset;

  }

}



@media (max-width: 575px) {



  .product-action_list .wishlist,

  .product-action_list .compare {

    display: none;

  }



  .product-action_list .icon {

    font-size: 16px;

  }

}



.card-product_info .product-text_sub {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.card-product_info .name-product {

  color: var(--black);

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

  margin-bottom: 4px;

}



.card-product_info .name-product a {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.card-product_info .price-wrap {

  margin-bottom: 16px;

}



.card-product_info .infor-head_wrap {

  display: flex;

  align-items: center;

  gap: 24px;

}



.card-product_info .infor-head_wrap .name-product {

  -webkit-line-clamp: 3;

}



.card-product_info .infor-head_wrap .card-product_wrapper {

  max-width: 113px;

  aspect-ratio: 0.7483443709;

}



.price-wrap {

  display: inline-flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0px 10px;

}



.price-wrap .price-new {

  color: var(--black);

  font-weight: 600;

}



.price-wrap .price-old {

  color: var(--text-3);

  display: inline;

  position: relative;

}



.price-wrap .price-old::after {

  content: "";

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 0;

  right: 0;

  width: 100%;

  height: 1px;

  background-color: var(--text-3);

}



.price-wrap .price-old.non-cl {

  text-decoration: line-through;

}



.price-wrap .price-old.non-cl::after {

  content: none;

}



.price-wrap.style-white {

  color: var(--white);

}



.price-wrap.style-white .price-old {

  color: rgba(255, 255, 255, 0.6);

}



.price-wrap.style-white .price-old::after {

  background-color: rgba(255, 255, 255, 0.6);

}



.price-wrap.price_sld .price-old {

  text-decoration: line-through;

  color: var(--text);

}



.price-wrap.price_sld .price-old::after {

  content: none;

}



.price-wrap.style-end {

  align-items: end;

}



.price-wrap.style-end .price-old {

  margin-bottom: 2px;

}



.product-color_list {

  display: flex;

  flex-wrap: wrap;

  gap: 3px;

  align-items: center;

}



.product-color_list .product-color-item {

  width: 24px;

  height: 24px;

  border: 1px solid var(--line);

  background-color: transparent;

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.product-color_list .product-color-item .swatch-value {

  width: 100%;

  height: 100%;

  border: 3px solid var(--white);

  display: inline-block;

  border-radius: 50%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-color_list .product-color-item img {

  visibility: hidden;

  width: 18px;

  height: 18px;

  position: absolute;

}



.product-color_list .product-color-item.style-img {

  width: 40px;

  height: 40px;

}



.product-color_list .product-color-item.style-img .swatch-value {

  width: 32px;

  height: 32px;

  border: 0;

}



.product-color_list .product-color-item.style-img .swatch-value::before {

  display: none;

}



.product-color_list .product-color-item.style-img .swatch-value .swatch-img {

  position: unset;

  border-radius: 50%;

  width: 100%;

  height: 100%;

  object-fit: cover;

  visibility: visible;

}



.product-color_list .product-color-item.style-img.active,

.product-color_list .product-color-item.style-img:hover {

  border-color: var(--white) !important;

}



.product-color_list .product-color-item.line {

  border: 1px solid transparent !important;

}



.product-color_list .product-color-item.line .swatch-value {

  position: relative;

}



.product-color_list .product-color-item.line .swatch-value::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  border: 1px solid var(--rgba-dark-3);

  top: 0;

  left: 0;

  z-index: 1;

  border-radius: 50%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-color_list .product-color-item.active,

.product-color_list .product-color-item:hover {

  border-color: var(--black) !important;

}



.product-color_list .product-color-item.active .swatch-value,

.product-color_list .product-color-item:hover .swatch-value {

  border-color: var(--white);

}



.product-color_list .product-color-item.active .swatch-value::before,

.product-color_list .product-color-item:hover .swatch-value::before {

  border-color: var(--text-3);

}



.product-color_list .product-color-item.active.border-color-black,

.product-color_list .product-color-item:hover.border-color-black {

  border-color: #252525 !important;

}



.product-color_list.style-2 .list-color-item.active .swatch-value,

.product-color_list.style-2 .list-color-item:hover .swatch-value {

  border-color: #e7ecd2;

}



.product-color_list.style-2 .swatch-value {

  border: 2px solid #e7ecd2;

}



.product-color_list.style-large .product-color-item {

  width: 40px;

  height: 40px;

}



.product-color_list.style-large .product-color-item .swatch-value {

  border-width: 4px;

}



@media (min-width: 1200px) {

  .product-color_list {

    gap: 8px;

  }

}



.product-badge_list {

  display: flex;

  gap: 9px;

  position: absolute;

  top: 8px;

  left: 8px;

  z-index: 1;

}



@media (max-width: 575px) {

  .product-badge_list {

    flex-direction: column;

    align-items: start;

    gap: 4px;

  }

}



.product-badge_item {

  padding: 3px 16px;

  color: var(--white);

  font-size: 18px;

  line-height: 24px;

}



.product-badge_item.sale {

  background-color: var(--primary);

}



.product-badge_item.hot {

  background-color: #EE7F00;

}



.product-badge_item.new {

  background-color: #499F30;

}



.product-badge_item.flash-sale {

  display: flex;

  gap: 4px;

  align-items: center;

  background-color: var(--black);

  font-weight: 700;

  font-size: 14px;

  line-height: 19px;

  text-transform: uppercase;

  padding-top: 5.5px;

  padding-bottom: 5.5px;

}



.product-badge_item.flash-sale .icon {

  color: var(--primary);

  font-size: 16px;

  animation: tf-ani-tada 2s infinite;

}



.product-badge_item.trend {

  background-color: #6265FE;

}



.product-badge_item.limit {

  background-color: #8809E3;

}



.product-badge_item.style-2 {

  background-color: var(--secondary);

  color: var(--bg-4);

  border-radius: 6px;

}



.product-badge_item.type-radius {

  border-radius: 16px;

}



@media (max-width: 991px) {

  .product-badge_item {

    padding: 2px 10px;

    font-size: 14px;

    line-height: 19px;

  }



  .product-badge_item.flash-sale {

    padding: 2px 10px;

    font-size: 14px;

    line-height: 19px;

  }



  .product-badge_item.flash-sale .icon {

    font-size: 14px;

  }

}



.product-marquee_sale {

  font-weight: 700;

  background-color: var(--black);

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  color: var(--white);

  padding: 5.5px 0px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-marquee_sale .initial-child-container {

  gap: 12px;

  align-items: center;

  display: flex;

}



.product-marquee_sale .icon {

  display: flex;

}



@media (max-width: 1199px) {

  .product-marquee_sale {

    display: none;

  }

}



.product-countdown {

  position: absolute;

  bottom: 16px;

  left: 50%;

  transform: translateX(-50%);

  padding: 12px 24px;

  background-color: var(--white);

  text-align: center;

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

  white-space: nowrap;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-countdown .countdown__item {

  color: var(--primary);

  font-weight: 500;

  font-size: clamp(20px, 3vw, 24px);

  line-height: clamp(26px, 4vw, 32px);

}



.product-countdown.type-2 {

  left: 7px;

  right: 7px;

  bottom: 8px;

  transform: unset;

  padding: 12px 16px;

}



.product-countdown.type-2 .countdown__item {

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

}



@media (max-width: 1199px) {

  .product-countdown {

    display: none;

  }

}



.variant-box {

  position: absolute;

  bottom: 16px;

  left: 16px;

  right: 16px;

  z-index: 5;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.variant-box.bot {

  bottom: 42px;

  backdrop-filter: blur(20px);

  left: 0;

  right: 0;

}



@media (min-width: 1200px) {

  .variant-box {

    transform: translateY(100%);

    opacity: 0;

    visibility: hidden;

  }

}



@media (max-width: 767px) {

  .variant-box {

    left: 8px;

    right: 8px;

    bottom: 8px;

  }

}



@media (max-width: 575px) {

  .variant-box {

    display: none;

  }

}



.product-size_list {

  border-radius: 999px;

  background-color: var(--white);

  padding: 10px 20px;

  width: max-content;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 12px;

}



.product-size_list .size-item {

  text-align: center;

}



.product-size_list .size-item:not(:last-child) {

  padding-right: 12px;

  border-right: 1px solid var(--line);

}



.product-size_list.type-2 {

  padding: 8px 0px;

  width: 100%;

  border-radius: 0px;

  background-color: var(--black);

  justify-content: center;

}



.product-size_list.type-2 .size-item {

  color: var(--white);

  border-color: var(--line-2);

}



.product-size_list.type-3 {

  padding: 9px 0px;

  width: 100%;

  border-radius: 0px;

  background-color: transparent;

  background: rgba(255, 255, 255, 0.1019607843);

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-size_list.type-3 .size-item {

  color: var(--white);

  border-color: var(--white);

}



@media (min-width: 1200px) {

  .product-size_list {

    padding: 16px 32px;

  }



  .product-size_list .size-item {

    min-width: 32px;

  }



  .product-size_list .size-item:not(:last-child) {

    min-width: 44px;

  }

}



@media (max-width: 575px) {

  .product-size_list .size-item {

    font-size: 14px;

    line-height: 19px;

  }

}



.product-size_list-2 {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background-color: var(--white);

  padding-top: 8px;

}



.product-size_list-2 .size-item {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  border: 1px solid var(--line);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: var(--black);

}



.product-size_list-2 .size-item:hover {

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}



@media (min-width: 1200px) {

  .product-size_list-2 {

    padding-top: 16px;

  }



  .product-size_list-2 .size-item {

    width: 85px;

    height: 48px;

    margin-bottom: 16px;

    border-radius: 10px;

  }

}



.product-style_list-slide .name-product {

  margin-bottom: 10px;

}



.product-style_list-slide .card-product_info {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.product-style_list-slide .card-product_wrapper {

  aspect-ratio: 1.28;

}



.product-style_list-slide .card-product_wrapper .product-img {

  width: 100%;

}



@media (min-width: 576px) {

  .product-style_list-slide {

    flex-direction: row;

  }



  .product-style_list-slide .card-product_info {

    gap: 32px;

  }



  .product-style_list-slide .card-product_wrapper {

    max-width: 284px;

    aspect-ratio: 0.6995073892;

  }

}



@media (min-width: 1200px) {

  .product-style_list-slide {

    gap: 32px;

  }

}



.product-action_bot {

  position: absolute;

  bottom: 16px;

  right: 15px;

  left: 15px;

  z-index: 2;

  text-align: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-action_bot>*:not(:last-child) {

  margin-bottom: 12px;

}



@media (min-width: 1200px) {

  .product-action_bot {

    transform: translateY(20px);

    opacity: 0;

    visibility: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

  }



  .product-action_bot>* {

    width: 180px;

    padding-left: 12px;

    padding-right: 12px;

  }

}



@media (max-width: 991px) {

  .product-action_bot {

    left: 8px;

    right: 8px;

  }

}



@media (max-width: 575px) {

  .product-action_bot {

    bottom: 8px;

  }



  .product-action_bot>* {

    padding: 10px 5px;

    width: 100%;

  }



  .product-action_bot>*:not(:last-child) {

    margin-bottom: 8px;

  }



  .product-action_bot .icon {

    font-size: 16px;

  }

}



.product-desc {

  font-size: 18px;

  line-height: 24px;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.product-desc .headline {

  color: var(--black);

}



.stagger-wrap .stagger-item {

  transition: 0.3s ease-in-out;

  transform: scale(0.5) rotate(90deg) skew(15deg);

  opacity: 0;

}



.stagger-wrap .stagger-item.stagger-finished {

  transform: scale(1) rotate(0deg) skew(0deg);

  opacity: 1;

}



.slider-scroll,

.product-thumbs-slider {

  display: flex;

  gap: 8px;

}



@media (max-width: 1199px) {



  .slider-scroll,

  .product-thumbs-slider {

    flex-direction: column;

  }

}



.thumbs-bottom {

  flex-direction: column;

  gap: 10px;

}



.thumbs-bottom .tf-product-media-thumbs {

  order: 1;

  width: 100%;

}



.thumbs-bottom .flat-wrap-media-product {

  width: 100%;

}



.thumbs-bottom .flat-wrap-media-product .tf-product-media-main .item {

  max-height: none;

}



.thumbs-abs .tf-product-media-thumbs .item::after {

  content: none !important;

}



@media (min-width: 1200px) {

  .thumbs-abs {

    position: relative;

  }



  .thumbs-abs .tf-product-media-thumbs {

    position: absolute;

    width: 124px;

    top: 12px;

    left: 12px;

    bottom: 12px;

    z-index: 2;

  }



  .thumbs-abs .tf-product-media-thumbs .swiper-slide {

    margin-bottom: 12px !important;

  }



  .thumbs-abs .tf-product-media-thumbs .item {

    height: 100%;

  }



  .thumbs-abs .tf-product-media-thumbs .item img {

    aspect-ratio: 0.8794326241 !important;

  }



  .thumbs-abs .flat-wrap-media-product {

    width: 100%;

  }



  .thumbs-abs .flat-wrap-media-product .tf-product-media-main .item {

    max-height: unset;

  }

}



@media (max-width: 991px) {

  .thumbs-abs .tf-product-media-thumbs .swiper-slide {

    max-height: unset;

    height: unset;

    aspect-ratio: 0;

  }



  .thumbs-abs .tf-product-media-thumbs .swiper-slide .item img {

    aspect-ratio: 0;

  }

}



.tf-product-media-thumbs {

  width: 115px;

  flex-shrink: 0;

  max-height: 764px;

}



.tf-product-media-thumbs .swiper-slide {

  height: max-content;

  width: auto;

  max-height: 153px;

}



.tf-product-media-thumbs .swiper-slide .item {

  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;

}



.tf-product-media-thumbs .swiper-slide .item img {

  aspect-ratio: 0.7516339869;

  width: 100%;

  height: 100%;

  object-fit: cover;

  inset: 0;
  margin: auto;

}



.tf-product-media-thumbs .swiper-slide .item::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border: 1px solid transparent;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {

  border-color: var(--black);

}



@media (max-width: 1199px) {

  .tf-product-media-thumbs {

    width: 100%;

    order: 1;

  }



  .tf-product-media-thumbs .swiper-slide {

    aspect-ratio: 0.7516339869;

  }

}



.wrap-btn-viewer {

  position: relative;

}



.wrap-btn-viewer::after {

  position: absolute;

  content: "";

  inset: 0;

  background-color: rgba(0, 0, 0, 0.3019607843);

  z-index: 1;

}



.wrap-btn-viewer .icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background-color: var(--white);

  font-size: 24px;

  color: var(--black);

  z-index: 2;

}



.flat-wrap-media-product {

  width: calc(100% - 115px - 8px);

  position: relative;

}



.flat-wrap-media-product .tf-product-media-main {

  height: 100%;

}



.flat-wrap-media-product .tf-product-media-main .item {

  display: flex;

  width: 100%;

  height: 100%;

  overflow: hidden;

  max-height: 764px;

}



.flat-wrap-media-product .tf-product-media-main .item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.flat-wrap-media-product .tf-product-media-main .swiper-slide {

  height: auto;

}



.flat-wrap-media-product .tf-product-media-main .slide-3d,

.flat-wrap-media-product .tf-product-media-main .slide-video {

  height: auto;

}



@media (max-width: 1199px) {

  .flat-wrap-media-product {

    width: 100%;

  }

}



@media (max-width: 991px) {

  .flat-wrap-media-product .tf-product-media-main .item {

    max-height: 550px;

  }

}



@media (max-width: 575px) {

  .flat-wrap-media-product .tf-product-media-main .item {

    max-height: 400px;

  }

}



.tf-product-info-wrap {

  display: grid;

}



@media (max-width: 767px) {

  .tf-product-info-wrap {

    margin-top: 40px;

  }

}



.tf-product-info-wrap .tf-product-info-brand {

  display: flex;

  align-items: center;

  gap: 4px;

  margin-bottom: 12px;

}



.tf-product-info-wrap .tf-product-information {

  display: grid;

  gap: 16px;

  margin-bottom: 40px;

}



.tf-product-info-wrap .tf-product-information li {

  display: flex;

  gap: 22px;

  align-items: center;

}



.tf-product-info-wrap .tf-product-information li>*:nth-child(1) {

  width: 25.86%;

}



.tf-product-info-wrap .tf-product-information li>*:nth-child(2) {

  width: 51.15%;

}



@media (max-width: 1439px) {

  .tf-product-info-wrap .tf-product-information li {

    gap: 10px;

    flex-wrap: wrap;

  }



  .tf-product-info-wrap .tf-product-information li>*:nth-child(1) {

    width: 35%;

  }



  .tf-product-info-wrap .tf-product-information li>*:nth-child(2) {

    width: 62%;

  }



  .tf-product-info-wrap .tf-product-information li>*:nth-child(3) {

    width: 100%;

  }

}



.tf-product-info-wrap .tf-product-assistance {

  display: flex;

  gap: 24px;

  align-items: center;

  margin-bottom: 24px;

}



.tf-product-info-wrap .tf-product-assistance .tf-social-icon {

  gap: 12px;

}



.tf-product-info-wrap .tf-product-assistance .tf-social-icon a {

  width: 56px;

  height: 56px;

}



.tf-product-info-wrap .tf-product-assistance .tf-social-icon a .icon {

  font-size: 24px;

}



.tf-product-info-wrap .tf-product-assistance .tf-social-icon a:hover {

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}



.tf-product-info-wrap .tf-product-call {

  margin-bottom: 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 15px 31px;

  border-radius: 99px;

  border: 1px solid var(--line);

}



.tf-product-info-wrap .tf-product-call .icon {

  font-size: 24px;

}



.tf-product-info-wrap .tf-product-video-call {

  display: flex;

  gap: 24px;

  align-items: center;

  margin-bottom: 40px;

  background-color: #F7F7F7;

}



.tf-product-info-wrap .tf-product-video-call .image {

  max-width: 200px;

}



.tf-product-info-wrap .tf-product-video-call .content {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.tf-product-info-wrap .tf-product-video-call .content a {

  display: flex;

  align-items: center;

  gap: 12px;

}



.tf-product-info-wrap .tf-product-video-call .content a .icon {

  font-size: 18px;

}



.tf-product-info-wrap .tf-product-icon-box {

  display: flex;

  gap: 25px;

  align-items: flex-start;

  padding: 16px;

  background-color: #F7F7F7;

  margin-bottom: 40px;

}



.tf-product-info-wrap .tf-product-icon-box .item {

  width: 100%;

  display: flex;

  align-items: center;

  flex-direction: column;

  gap: 12px;

  text-align: center;

}



@media (max-width: 1199px) {

  .tf-product-info-wrap .tf-product-icon-box {

    gap: 10px;

  }

}



.tf-product-info-wrap .form-out-stock {

  padding: 32px;

  border: 1px solid var(--line);

  display: grid;

  gap: 24px;

  margin-bottom: 40px;

}



.tf-product-info-wrap .form-out-stock .box-title-out-stock {

  display: flex;

  align-items: center;

  gap: 8px;

}



.tf-product-info-wrap .form-out-stock .box-title-out-stock .icon {

  font-size: 24px;

}



@media (max-width: 1199px) {

  .tf-product-info-wrap .form-out-stock {

    padding: 24px 16px;

    gap: 18px;

  }

}



.tf-product-info-wrap .tf-product-info-tags {

  display: grid;

  gap: 12px;

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-info-tags .tf-product-tags {

  display: flex;

  align-items: center;

  gap: 12px;

}



.tf-product-info-wrap .tf-product-info-tags .tf-product-tags .tags {

  padding: 4px 15px;

  border-radius: 4px;

  border: 1px solid var(--black);

  color: var(--black);

}



.tf-product-info-wrap .tf-product-info-tags .tf-product-tags svg {

  animation: tf-ani-flash 2s infinite;

}



.tf-product-info-wrap .tf-product-info-list {

  display: grid;

}



.tf-product-info-wrap .product-info-name {

  margin-bottom: 24px;

  font-weight: normal;

}



.tf-product-info-wrap .product-info-meta {

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-heading {

  display: flex;

  justify-content: space-between;

  gap: 15px;

  flex-wrap: wrap;

  padding: 15px 0;

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-info-countdown {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

}



.tf-product-info-wrap .tf-product-info-countdown.type-box {

  width: max-content;

  gap: 32px;

  padding: 15px 23px;

  border-radius: 6px;

  border: 1px solid var(--primary);

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-info-countdown.type-box .countdown-title {

  display: flex;

  align-items: center;

  gap: 8px;

}



@media (max-width: 1199px) {

  .tf-product-info-wrap .tf-product-info-countdown.type-box {

    flex-direction: column;

  }

}



.tf-product-info-wrap .brand-product {

  font-weight: 500;

  color: var(--text);

  font-size: 14px;

  line-height: 20px;

}



.tf-product-info-wrap .product-rate {

  display: flex;

  align-items: center;

}



.tf-product-info-wrap .product-rate .list-star {

  margin-right: 6px;

  display: flex;

  align-items: center;

}



.tf-product-info-wrap .product-rate .icon {

  font-size: 16px;

  color: #98ab23;

}



.tf-product-info-wrap .product-rate .icon:not(:last-child) {

  margin-right: 5px;

}



.tf-product-info-wrap .product-rate .count-review {

  font-weight: 500;

  font-size: 16px;

  line-height: 22.4px;

  letter-spacing: -3%;

  color: var(--text);

}



.tf-product-info-wrap .product-price {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  font-weight: 500;

}



.tf-product-info-wrap .product-price .price-new {

  color: var(--primary);

}



.tf-product-info-wrap .product-price .price-old {

  color: var(--rgba-dark);

  text-decoration: line-through;

}



.tf-product-info-wrap .badge-sale {

  font-size: 14px;

  line-height: 20px;

  font-weight: 400;

  background-color: var(--primary);

  border-radius: 22px;

  padding: 5px 10px;

  color: var(--white);

}



.tf-product-info-wrap .product-stock {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

  margin-top: 4px;

}



.tf-product-info-wrap .product-stock .icon {

  animation: tf-ani-flash 2s infinite;

}



.tf-product-info-wrap .product-stock .stock {

  padding: 5px 10px;

  border-radius: 5px;

  margin-right: 8px;

  font-weight: 500;

}



.tf-product-info-wrap .product-stock .in-stock {

  background-color: rgba(44, 163, 21, 0.1);

  color: #1d770b;

}



.tf-product-info-wrap .product-stock .out-stock {

  background-color: rgba(37, 37, 37, 0.1);

  color: #252525;

}



.tf-product-info-wrap .progress-cart {

  width: 100%;

  background-color: var(--line);

  height: 9px;

  position: relative;

}



.tf-product-info-wrap .progress-cart .value {

  position: relative;

  height: 100%;

  background-color: var(--black);

  transition: width 2s ease;

}



.tf-product-info-wrap .product-progress-sale {

  margin-bottom: 32px;

}



.tf-product-info-wrap .product-progress-sale .text {

  font-size: 16px;

  line-height: 22px;

}



.tf-product-info-wrap .product-progress-sale .title {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;

}



.tf-product-info-wrap .product-progress-sale .count {

  font-size: 20px;

  line-height: 24px;

  font-weight: 500;

  color: var(--primary);

}



.tf-product-info-wrap .tf-product-variant {

  display: grid;

  gap: 24px;

}



.tf-product-info-wrap .tf-product-info-liveview {

  display: flex;

  gap: 16px;

  align-items: center;

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-info-liveview .liveview-count {

  display: flex;

  gap: 8px;

  align-items: center;

  padding: 8px 16px;

  background-color: var(--black);

  border-radius: 99px;

  color: var(--white);

}



.tf-product-info-wrap .tf-product-info-liveview .liveview-count.size-40 {

  min-width: 40px;

  height: 40px;

  padding: 5px;

  justify-content: center;

}



.tf-product-info-wrap .tf-product-info-liveview .liveview-count .icon {

  font-size: 20px;

}



.tf-product-info-wrap .tf-product-info-liveview p {

  color: var(--black);

}



.tf-product-info-wrap .tf-product-variant {

  display: grid;

  gap: 32px;

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-variant .variant-picker-label {

  margin-bottom: 8px;

  font-size: 16px;

  line-height: 24px;

  color: var(--black);

}



.tf-product-info-wrap .tf-product-variant .variant-picker-label-value.value-currentColor {

  text-transform: capitalize;

}



.tf-product-info-wrap .variant-color .variant-picker-values {

  display: flex;

  gap: 12px;

}



@media (min-width: 1200px) {

  .tf-product-info-wrap .variant-color .variant-picker-values.gap24 {

    gap: 24px;

  }

}



.tf-product-info-wrap .variant-color .color-btn:not(.select-item) {

  position: relative;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  text-align: center;

  border: 1px solid var(--line);

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  border-radius: 50%;

}



.tf-product-info-wrap .variant-color .color-btn:not(.select-item) .check-color {

  width: 32px;

  height: 32px;

  display: flex;

  flex-shrink: 0;

  border-radius: 50%;

  border: 1px solid #dcdcdc;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-product-info-wrap .variant-color .color-btn:not(.select-item).active {

  border-color: var(--black);

}



.tf-product-info-wrap .variant-color .color-btn.style-image {

  width: 64px;

  height: 64px;

  padding: 6px;

  border: 1px solid transparent;

}



.tf-product-info-wrap .variant-color .color-btn.style-image .img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  overflow: hidden;

}



.tf-product-info-wrap .variant-color .color-btn.style-image img {

  width: 100%;

  object-fit: cover;

}



.tf-product-info-wrap .variant-color .color-btn.style-image.style-small {

  width: 40px;

  height: 40px;

  padding: 4px;

}



.tf-product-info-wrap .variant-color .color-btn.style-image-square {

  width: 120px;

  height: 160px;

  padding: 7px;

  border: 1px solid var(--line);

  border-radius: 8px;

}



.tf-product-info-wrap .variant-color .color-btn.style-image-square .img {

  width: 100%;

  height: 100%;

  border-radius: 6px;

  overflow: hidden;

}



.tf-product-info-wrap .variant-color .color-btn.style-image-square img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-product-info-wrap .variant-color .color-btn.style-image-square.active {

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

}



@media (max-width: 1199px) {

  .tf-product-info-wrap .variant-color .color-btn.style-image-square {

    width: 80px;

    height: 120px;

  }

}



.tf-product-info-wrap .variant-size .variant-picker-label {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

}



.tf-product-info-wrap .variant-size .size-guide {

  display: flex;

  align-items: center;

  gap: 8px;

}



.tf-product-info-wrap .variant-size .size-guide .icon {

  font-size: 20px;

}



.tf-product-info-wrap .variant-size .variant-picker-values {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.tf-product-info-wrap .variant-size .size-btn:not(.select-item) {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  border: 1px solid var(--line);

  font-size: 18px;

  line-height: 24px;

  color: var(--text);

  font-weight: 700;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}



.tf-product-info-wrap .variant-size .size-btn:not(.select-item).style-text {

  padding-left: 26.5px;

  padding-right: 26.5px;

  width: max-content;

  border-radius: 99px;

}



.tf-product-info-wrap .variant-size .size-btn:not(.select-item).active {

  border-color: var(--black);

  background-color: var(--black);

  color: var(--white);

}



.tf-product-info-wrap .product-info-countdown {

  margin-top: 8px;

  padding: 20px;

  display: inline-block;

  width: max-content;

  border: 1px solid var(--primary);

  border-radius: 8px;

}



.tf-product-info-wrap .product-info-countdown .countdown-title {

  display: flex;

  align-items: center;

  gap: 4px;

  margin-bottom: 12px;

}



.tf-product-info-wrap .product-info-countdown .countdown__timer {

  display: flex;

  gap: 12px;

}



.tf-product-info-wrap .product-info-countdown .countdown__item {

  width: 48px;

  height: 32px;

  font-size: 16px;

  line-height: 24px;

  color: var(--white);

  background-color: var(--primary);

  border-radius: 4px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.tf-product-info-wrap .product-info-countdown .countdown__item:not(:last-child)::after {

  position: absolute;

  content: ":";

  top: 50%;

  transform: translateY(-50%);

  right: -8px;

  color: var(--dark);

}



.tf-product-info-wrap .product-info-countdown.type-1 {

  min-width: 276px;

}



.tf-product-info-wrap .product-info-countdown.type-1 .countdown__timer {

  justify-content: center;

}



.tf-product-info-wrap .product-info-countdown.type-1 .countdown__item {

  width: unset;

  background-color: transparent;

  color: #e83524;

  font-weight: 500;

  font-size: 12px;

  line-height: 120%;

}



.tf-product-info-wrap .product-info-countdown.type-1 .countdown__item::after {

  color: #e83524;

}



.tf-product-info-wrap .tf-product-total-quantity {

  margin-bottom: 24px;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn {

  margin-bottom: 16px;

  display: flex;

  align-items: center;

  gap: 16px;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .tf-btn {

  gap: 16px;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .wg-quantity {

  flex-grow: 1;

  min-width: 126px;

  max-width: 180px;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .product-btns {

  width: 52px;

  height: 52px;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .btn-add-to-cart {

  flex-grow: 1;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .btn-add-to-cart .icon {

  font-size: 18px;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .box-icon {

  width: 55px;

  height: 55px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  border: 1px solid #ebebeb;

  border-radius: 50%;

  color: #252525;

}



.tf-product-info-wrap .tf-product-total-quantity .group-btn .box-icon:hover {

  background-color: #252525;

  color: var(--white);

}



@media (max-width: 1199px) {

  .tf-product-info-wrap .tf-product-total-quantity .group-btn {

    flex-wrap: wrap;

    gap: 8px;

  }



  .tf-product-info-wrap .tf-product-total-quantity .group-btn .btn-add-to-cart {

    width: 100%;

    order: 1;

  }

}



.tf-product-info-wrap .tf-product-total-quantity .btn-out-stock {

  background-color: var(--text);

  border-color: var(--text);

  cursor: not-allowed;

}



.tf-product-info-wrap .tf-product-extra-link {

  display: flex;

  align-items: center;

  gap: 24px;

  flex-wrap: wrap;

  margin-bottom: 40px;

}



.tf-product-info-wrap .tf-product-extra-link .product-extra-icon {

  display: flex;

  align-items: center;

  gap: 4px;

  font-weight: 500;

  font-size: 20px;

  line-height: 27px;

}



.tf-product-info-wrap .tf-product-extra-link .product-extra-icon .icon {

  font-size: 20px;

}



.tf-product-info-wrap .tf-product-delivery-return {

  display: flex;

  gap: 8px;

  flex-direction: column;

  margin-bottom: 24px;

}



.tf-product-info-wrap .tf-product-delivery-return .product-delivery {

  display: flex;

  gap: 8px;

  align-items: center;

}



.tf-product-info-wrap .tf-product-delivery-return .product-delivery .icon {

  font-size: 23px;

  color: var(--dark);

}



.tf-product-info-wrap .tf-product-delivery-return .return .icon {

  transform: rotateY(180deg);

}



.tf-product-info-wrap .tf-product-trust-seal {

  display: flex;

  gap: 16px;

  align-items: center;

  padding-bottom: 24px;

  margin-bottom: 24px;

  border-bottom: 1px solid var(--line);

  flex-wrap: wrap;

}



.tf-product-info-wrap .tf-product-trust-seal .list-card {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  justify-content: center;

}



.tf-product-info-wrap .tf-product-trust-seal .card-item {

  width: 50px;

  height: 32px;

  border-radius: 4px;

}



.tf-product-info-wrap .tf-product-cate-sku {

  display: flex;

  gap: 8px;

  flex-direction: column;

}



.tf-product-info-wrap .tf-product-cate-sku .item-cate-sku {

  display: flex;

  gap: 12px;

  align-items: center;

}



.tf-product-info-wrap .tf-product-pickup-available {

  display: flex;

  margin: 8px 0px;

  gap: 8px;

}



.tf-product-info-wrap .tf-product-pickup-available .icon {

  font-size: 21px;

  color: var(--light-green);

}



.tf-product-info-wrap .tf-product-pickup-available .content {

  display: grid;

  gap: 4px;

}



.tf-product-info-wrap .tf-product-pickup-available .check-availability {

  font-size: 12px;

  line-height: 18px;

  color: var(--text);

  text-decoration: underline;

}



.tf-product-info-wrap .form-group-product {

  margin-bottom: 8px;

}



.tf-product-info-wrap .tf-product-more-option {

  margin-bottom: 32px;

}



.tf-product-info-wrap .tf-product-property {

  margin-bottom: 32px;

}



.btn-add-wishlist .added {

  display: none;

}



.btn-add-wishlist.added-wishlist .add {

  display: none;

}



.btn-add-wishlist.added-wishlist .added {

  display: block;

}



.wg-quantity {

  display: flex;

  justify-content: center;

  border: 1px solid var(--line);

  padding: 7px 0;

  border-radius: 43px;

  overflow: hidden;

}



.wg-quantity .quantity-product {

  width: 40px;

  height: 40px;

  padding: 0;

  background-color: transparent;

  border: 0;

  text-align: center;

  font-family: "Sora";

  font-weight: 600;

  font-size: 14px;

  line-height: 20px;

  text-align: center;

  vertical-align: middle;

  color: var(--black);

  pointer-events: none;

}



.wg-quantity .btn-quantity {

  width: 40px;

  height: 40px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  color: var(--black);

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.wg-quantity .btn-quantity:hover {

  color: var(--primary);

}



.wg-quantity.small .btn-quantity,

.wg-quantity.small .quantity-product {

  height: 30px;

  width: 30px;

  font-size: 18px;

}



.wg-quantity.small .quantity-product {

  font-size: 14px;

  font-weight: 700;

  line-height: 16.8px;

  letter-spacing: -0.03em;

}



.tf-product-fbt {

  padding: 32px;

  border: 1px solid var(--line);

  margin-bottom: 40px;

}



.tf-product-fbt .title {

  margin-bottom: 12px;

}



.tf-product-fbt .tf-bundle-products {

  display: grid;

  gap: 12px;

}



.tf-product-fbt .tf-product-form-bundle {

  display: grid;

  gap: 32px;

}



.tf-product-fbt .btn-submit-total {

  font-weight: 600;

  text-transform: none;

}



.tf-product-fbt .bundle-total-submit {

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 24px;

  line-height: 32px;

  font-weight: 400;

  margin-bottom: 16px;

}



@media (max-width: 1199px) {

  .tf-product-fbt {

    padding: 16px;

  }

}



.tf-product-fbt-wrap {

  padding: 15px;

  border-radius: 16px;

  border: 1px solid var(--line);

}



.tf-product-fbt-wrap .list-fbt {

  display: flex;

  gap: 25px;

  align-items: center;

  overflow-x: auto;

  min-width: 100%;

}



.tf-product-fbt-wrap .list-fbt::-webkit-scrollbar {

  width: 4px;

  height: 4px;

}



.tf-product-fbt-wrap .list-fbt::-webkit-scrollbar-track {

  background-color: var(--bg-scrollbar-track);

}



.tf-product-fbt-wrap .list-fbt::-webkit-scrollbar-thumb {

  background: var(--bg-scrollbar-thumb);

  border-radius: 4px;

}



.tf-product-fbt-wrap .fbt-image {

  width: 129px;

  min-width: 129px;

  border-radius: 8px;

  overflow: hidden;

}



.tf-product-fbt-wrap .fbt-swatches {

  display: grid;

  gap: 8px;

}



.tf-product-fbt-wrap .fbt-info {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

}



.tf-product-fbt-wrap .fbt-info .bundle-variant,

.tf-product-fbt-wrap .fbt-info .bundle-title {

  margin-right: 10px;

}



.tf-product-fbt-wrap .fbt-info .bundle-price {

  display: flex;

  gap: 6px;

}



.tf-product-fbt-wrap .fbt-info .new-price {

  color: var(--primary);

}



.tf-product-fbt-wrap .fbt-info .old-price {

  color: #bfbfbf;

}



.tf-product-fbt-wrap .tf-product-form-fbt {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.tf-product-fbt-wrap .list-fbt {

  margin-bottom: 15px;

}



.tf-product-fbt-wrap .fbt-total-price {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

}



.tf-product-fbt-wrap .fbt-total-price .price-new {

  color: var(--primary);

}



.tf-product-fbt-wrap .fbt-total-price .price-old {

  color: #bfbfbf;

  text-decoration: line-through;

  font-size: 14px;

  line-height: 22.4px;

  margin-left: 5px;

}



.tf-bundle-product-item {

  display: flex;

  gap: 24px;

}



@media (max-width: 1199px) {

  .tf-bundle-product-item {

    gap: 10px;

  }



  .tf-bundle-product-item .bundle-image {

    width: 90px;

    height: 90px;

  }

}



.tf-bundle-product-item .bundle-image {

  width: 122px;

  height: 122px;

  flex-shrink: 0;

  overflow: hidden;

}



.tf-bundle-product-item .bundle-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-bundle-product-item .bundle-info {

  display: grid;

  gap: 8px;

  align-content: flex-start;

  flex-grow: 1;

}



.tf-bundle-product-item .bundle-price .new-price {

  color: var(--primary);

}



.tf-bundle-product-item .bundle-price .old-price {

  color: var(--rgba-dark);

  text-decoration: line-through;

}



.tf-bundle-product-item .tf-select {

  width: max-content;

}



.item-has-checkbox {

  opacity: 0.4;

}



.item-has-checkbox.check {

  opacity: 1;

}



.wd-product-descriptions .item .title {

  margin-bottom: 5px;

}



.wd-product-descriptions .item:not(:last-child) {

  margin-bottom: 20px;

}



.wd-product-descriptions .item p,

.wd-product-descriptions .item li {

  font-size: 14px;

  line-height: 22.4px;

}



.wd-product-descriptions .item ul li {

  position: relative;

  padding-left: 20px;

}



.wd-product-descriptions .item ul li::before {

  position: absolute;

  content: "";

  left: 5px;

  top: 50%;

  transform: translateY(-50%);

  background-color: var(--dark);

  width: 4px;

  height: 4px;

  border-radius: 50%;

}



.wd-product-descriptions .list-policies {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 15px;

}



.wd-product-descriptions .accordion-body {

  padding: 10px 0px 30px;

}



.tf-product-side-accordions {

  margin-bottom: 42px;

}



.tf-product-side-accordions .wd-customer-review {

  flex-direction: column;

  gap: 42px;

}



@media (min-width: 768px) {

  .product-grid-img .swiper-wrapper {

    transform: none !important;

    display: grid;

    gap: 12px;

  }



  .product-grid-img .swiper-wrapper .swiper-slide {

    height: auto;

    width: 100% !important;

  }



  .product-grid-img.product-grid-img2 .swiper-wrapper {

    grid-template-columns: 1fr 1fr;

    gap: 24px;

  }



  .product-grid-img.product-grid-stacked .swiper-wrapper {

    grid-template-columns: 1fr 1fr;

    gap: 24px;

  }



  .product-grid-img.product-grid-stacked .swiper-wrapper .swiper-slide:first-child {

    grid-column: 1/-1;

    width: 100%;

  }

}



@media (min-width: 1200px) {

  .product-grid-img.product-grid-img2 .swiper-wrapper {

    gap: 48px;

  }



  .product-grid-img.product-grid-stacked .swiper-wrapper {

    gap: 48px;

  }

}



.product-grid-stacked .item img {

  aspect-ratio: 0.75;

}



.recent-blog-item {

  display: flex;

  gap: 20px;

}



.recent-blog-item .img-product {

  width: 75px;

  height: 112px;

  border-radius: 4px;

  overflow: hidden;

  display: block;

}



.recent-blog-item .img-product img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.recent-blog-item .content {

  display: grid;

  gap: 8px;

  align-content: flex-start;

}



.recent-blog-item .content .old-price {

  margin-left: 6px;

  color: #5c5c5c;

}



.recent-blog-item .content .new-price {

  color: var(--primary);

}



.flat-wrap-frequently-bought-together .product-thumbs-slider {

  margin-bottom: 30px;

}



.tf-product-volume-discount {

  margin-bottom: 40px;

}



.tf-product-volume-discount .heading {

  margin-bottom: 12px;

}



.tf-product-volume-discount .list-volume-discount {

  margin-bottom: 12px;

}



.volume-discount-item {

  padding: 32px;

  position: relative;

  background-color: #F7F7F7;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

}



.volume-discount-item:not(:last-child) {

  margin-bottom: 12px;

}



.volume-discount-item .content {

  display: flex;

  align-items: center;

  gap: 24px;

  margin-bottom: 24px;

}



.volume-discount-item .name {

  flex-grow: 1;

}



.volume-discount-item .tags-save {

  padding: 3px 16px;

  background-color: var(--primary);

  color: var(--white);

  flex-shrink: 0;

}



.volume-discount-item .check {

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border: 1px solid var(--black);

  background-color: transparent;

  flex-shrink: 0;

}



.volume-discount-item .check span {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  display: block;

  background-color: transparent;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.volume-discount-item.active .check span,

.volume-discount-item:hover .check span {

  background-color: var(--black);

}



@media (max-width: 1199px) {

  .volume-discount-item {

    padding: 20px 15px;

  }

}



.list-volume-discount-thumbnail {

  gap: 12px;

  width: 100%;

  max-width: 100%;

  overflow-x: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-bottom: 12px;

}



.list-volume-discount-thumbnail::-webkit-scrollbar {

  width: 4px;

  height: 4px;

}



.list-volume-discount-thumbnail::-webkit-scrollbar-track {

  background-color: var(--line);

}



.list-volume-discount-thumbnail::-webkit-scrollbar-thumb {

  background: var(--black);

}



@media (max-width: 1439px) {

  .list-volume-discount-thumbnail {

    padding-bottom: 5px;

  }

}



.volume-discount-thumbnail-item {

  position: relative;

  padding: 7px 7px 24px;

  border: 1px solid var(--line);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.volume-discount-thumbnail-item .image-box {

  width: 208px;

  height: 284px;

  position: relative;

  margin-bottom: 24px;

}



.volume-discount-thumbnail-item .image-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.volume-discount-thumbnail-item .image-box.type-1 {

  width: 100%;

  height: auto;

}



.volume-discount-thumbnail-item .image-box.type-1 img {

  max-height: 308px;

}



.volume-discount-thumbnail-item .tags-save {

  position: absolute;

  top: 0;

  left: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 3px 16px;

  background-color: var(--primary);

  color: var(--white);

  flex-shrink: 0;

}



.volume-discount-thumbnail-item .content-discount {

  text-align: center;

}



.volume-discount-thumbnail-item .content-discount .count {

  margin-bottom: 8px;

}



.volume-discount-thumbnail-item .content-discount .size,

.volume-discount-thumbnail-item .content-discount .name {

  margin-bottom: 8px;

}



.volume-discount-thumbnail-item .content-discount .wg-quantity {

  width: 130px;

}



.volume-discount-thumbnail-item:hover,

.volume-discount-thumbnail-item.active {

  border-color: var(--black);

}



.sold-out-wrap {

  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

}



.sold-out-wrap::after {

  position: absolute;

  content: "";

  inset: 0;

  background-color: rgba(0, 0, 0, 0.2);

}



.sold-out-wrap .text {

  width: 128px;

  height: 128px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-radius: 50%;

  background-color: var(--white);

  z-index: 2;

}



.form-buyX-getY {

  padding: 24px;

  border: 1px solid var(--primary);

  margin-bottom: 40px;

}



@media (max-width: 767px) {

  .form-buyX-getY {

    padding: 20px 15px;

  }



  .form-buyX-getY .volume-discount-thumbnail-item {

    width: 100%;

  }

}



.buyX-getY-wrap {

  display: flex;

  gap: 20px;

  align-items: center;

  margin-bottom: 32px;

}



@media (max-width: 575px) {

  .buyX-getY-wrap {

    flex-direction: column;

  }

}



.more-option-item {

  display: flex;

  align-items: center;

  gap: 24px;

}



.more-option-item:not(:last-child) {

  padding-bottom: 23px;

  border-bottom: 1px solid var(--line);

  margin-bottom: 24px;

}



.more-option-item .name {

  flex-grow: 1;

}



.more-option-item .price {

  min-width: 100px;

}



.more-option-item .wg-quantity {

  width: 180px;

}



@media (max-width: 991px) {

  .more-option-item {

    gap: 8px;

    flex-wrap: wrap;

  }

}



.tf-product-property {

  display: grid;

  gap: 12px;

}



@keyframes pulse-rotate {

  0% {

    transform: scale(1) rotate(12deg);

  }



  50% {

    transform: scale(1.05) rotate(12deg);

  }



  100% {

    transform: scale(1) rotate(12deg);

  }

}



.list-color-product {

  display: flex;

  flex-wrap: wrap;

  gap: 3px;

  align-items: center;

}



.list-color-product .list-color-item {

  width: 20px;

  height: 20px;

  border: 1px solid transparent;

  background-color: transparent;

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.list-color-product .list-color-item .swatch-value {

  width: 100%;

  height: 100%;

  border: 2px solid var(--white);

  display: inline-block;

  border-radius: 50%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.list-color-product .list-color-item img {

  visibility: hidden;

  width: 18px;

  height: 18px;

  position: absolute;

}



.list-color-product .list-color-item.style-img {

  width: 40px;

  height: 40px;

}



.list-color-product .list-color-item.style-img .swatch-value {

  width: 32px;

  height: 32px;

  border: 0;

}



.list-color-product .list-color-item.style-img .swatch-value::before {

  display: none;

}



.list-color-product .list-color-item.style-img .swatch-value .swatch-img {

  position: unset;

  border-radius: 50%;

  width: 100%;

  height: 100%;

  object-fit: cover;

  visibility: visible;

}



.list-color-product .list-color-item.style-img.active,

.list-color-product .list-color-item.style-img:hover {

  border-color: var(--white) !important;

}



.list-color-product .list-color-item.line {

  border: 1px solid transparent !important;

}



.list-color-product .list-color-item.line .swatch-value {

  position: relative;

}



.list-color-product .list-color-item.line .swatch-value::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  border: 1px solid var(--rgba-dark-3);

  top: 0;

  left: 0;

  z-index: 1;

  border-radius: 50%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.list-color-product .list-color-item.active,

.list-color-product .list-color-item:hover {

  border-color: var(--dark) !important;

}



.list-color-product .list-color-item.active .swatch-value,

.list-color-product .list-color-item:hover .swatch-value {

  border-color: var(--white);

}



.list-color-product .list-color-item.active .swatch-value::before,

.list-color-product .list-color-item:hover .swatch-value::before {

  border-color: var(--line);

}



.list-color-product .list-color-item.active.border-color-black,

.list-color-product .list-color-item:hover.border-color-black {

  border-color: #252525 !important;

}



.list-color-product.style-2 .list-color-item.active .swatch-value,

.list-color-product.style-2 .list-color-item:hover .swatch-value {

  border-color: #e7ecd2;

}



.list-color-product.style-2 .swatch-value {

  border: 2px solid #e7ecd2;

}



.tf-sticky-btn-atc {

  position: fixed;

  width: 100%;

  bottom: 0;

  z-index: 70;

  box-shadow: 4px -4px 5px rgba(0, 0, 0, 0.03);

  background-color: var(--white);

  transition: all 0.3s linear;

  transform: translateY(100%);

}



.tf-sticky-btn-atc .tf-height-observer {

  padding: 14px 0;

  column-gap: 5px;

}



.tf-sticky-btn-atc .tf-sticky-atc-product {

  flex: 1 0 0%;

  gap: 15px;

}



.tf-sticky-btn-atc .tf-sticky-atc-img {

  width: 72px;

  height: 72px;

  flex-shrink: 0;

}



.tf-sticky-btn-atc .tf-sticky-atc-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}



.tf-sticky-btn-atc .tf-sticky-atc-variant-price {

  display: flex;

  gap: 24px;

  align-items: center;

}



.tf-sticky-btn-atc .tf-sticky-atc-title {

  font-size: 16px;

  line-height: 19px;

}



.tf-sticky-btn-atc .tf-product-info-quantity {

  display: flex;

  gap: 24px;

  align-items: center;

}



.tf-sticky-btn-atc .tf-sticky-atc-btns {

  display: flex;

  gap: 32px;

  align-items: center;

}



.tf-sticky-btn-atc .tf-sticky-atc-btns a {

  min-width: 324px;

}



.tf-sticky-btn-atc .tf-sticky-atc-infos form {

  display: flex;

  gap: 32px;

  align-items: center;

  flex-wrap: wrap;

}



.tf-sticky-btn-atc .tf-btn {

  min-width: 190px;

}



.tf-sticky-btn-atc.show {

  transform: translateY(0);

}



@media (max-width: 1439px) {

  .tf-sticky-btn-atc .tf-mini-cart-item .tf-mini-cart-image {

    width: 72px;

    height: 72px;

  }



  .tf-sticky-btn-atc .tf-mini-cart-item .tf-mini-cart-info {

    display: none;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-infos form {

    gap: 20px;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-btns a {

    min-width: unset;

  }

}



@media (max-width: 1199px) {

  .tf-sticky-btn-atc {

    bottom: 79px;

  }

}



@media (max-width: 767px) {



  .tf-sticky-btn-atc .title,

  .tf-sticky-btn-atc .tf-sticky-atc-product {

    display: none !important;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-infos {

    width: 100%;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-infos form {

    justify-content: center;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-infos form .tf-select select,

  .tf-sticky-btn-atc .tf-sticky-atc-infos form .wg-quantity {

    height: 42px;

    padding: 0;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-btns a {

    width: 100%;

  }



  .tf-sticky-btn-atc .tf-sticky-atc-btns {

    max-width: 500px;

    width: 100%;

  }

}



.list-product-description>*:not(:last-child) {

  margin-bottom: 80px;

}



@media (max-width: 767px) {

  .list-product-description>*:not(:last-child) {

    margin-bottom: 60px;

  }

}



.faq-descriptions .widget-accordion {

  border: 0 !important;

}



.faq-descriptions .widget-accordion:not(:last-child) .accordion-title::after {

  position: absolute;

  content: "";

  bottom: 0;

  left: 0;

  right: 0;

  height: 1px;

  background-color: var(--line);

}



.faq-descriptions .widget-accordion:not(:last-child) .accordion-title:not(.collapsed)::after {

  display: none;

}



.faq-descriptions .widget-accordion .accordion-title {

  position: relative;

  padding: 25px 0;

  justify-content: space-between;

}



.faq-descriptions .widget-accordion .accordion-title::after {

  position: absolute;

  content: "";

  bottom: 0;

  left: 0;

  right: 0;

  height: 1px;

  background-color: var(--line);

}



.faq-descriptions .widget-accordion .accordion-title .icon {

  position: relative;

  display: flex;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid var(--line);

  color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.faq-descriptions .widget-accordion .accordion-title .icon::after {

  position: absolute;

  font-family: "icomoon";

  content: "\e950";

  font-size: 16px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.faq-descriptions .widget-accordion .accordion-title:not(.collapsed) .icon {

  transform: none;

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}



.faq-descriptions .widget-accordion .accordion-title:not(.collapsed) .icon::after {

  content: "\e94d";

}



.faq-descriptions .widget-accordion .accordion-content {

  padding: 32px;

  border: 1px solid var(--line);

}



.product-progress_sold {

  display: grid;

  gap: 12px;

}



.product-progress_sold .box-quantity {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

}



.progress {

  height: 9px;

  border-radius: 999px;

}



.progress .progress-bar {

  border-radius: 999px;

  background-color: var(--primary);

}



.product-btn_quick {

  position: absolute;

  bottom: 0;

  right: 0;

  left: 0;

  z-index: 2;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.product-btn_quick .tf-btn {

  width: 100%;

}



@media (min-width: 1200px) {

  .product-btn_quick {

    transform: translateY(100%);

    opacity: 0;

    visibility: hidden;

  }

}



.tf-wishlist-empty {

  grid-column: 1/-1;

  width: 100%;

}



.tf-wishlist-empty .text-notice {

  margin-bottom: 32px;

  font-weight: normal;

  letter-spacing: 0;

}



.tf-wishlist-empty .btn-back-shop {

  font-weight: 500;

}



.tab-buy-wrap {

  padding: 30px 16px;

  border: 1px solid var(--line);

  overflow: hidden;

}



@media (min-width: 1200px) {

  .tab-buy-wrap {

    padding: 32px;

  }

}



.tab-buy_list {

  display: flex;

  align-items: center;

  gap: 24px;

  overflow: auto;

  padding-bottom: 32px;

  margin-bottom: 32px;

  border-bottom: 1px solid var(--line);

}



.tab-buy_list .tf-btn-tab {

  width: 104px;

}



@media (min-width: 1200px) {

  .tab-buy_list {

    gap: 32px;

  }

}



.wg-buy-look {

  display: flex;

  gap: 32px;

  flex-wrap: wrap;

}



.wg-buy-look .buy_image {

  width: 100%;

}



.wg-buy-look .buy_content {

  display: grid;

  gap: 16px;

  width: 100%;

}



.wg-buy-look .name {

  margin-bottom: 7px;

}



.wg-buy-look .title {

  margin-bottom: 16px;

}



.wg-buy-look .prd-action {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

}



.wg-buy-look .tf-select select {

  border-radius: 999px;

}



@media (min-width: 768px) {

  .wg-buy-look {

    flex-wrap: nowrap;

  }



  .wg-buy-look .buy_image {

    max-width: 268px;

    width: 100%;

  }



  .wg-buy-look .buy_content {

    max-width: 333px;

    display: grid;

    gap: 16px;

  }

}



@media (min-width: 1200px) {

  .wg-buy-look .tf-select select {

    padding-top: 15px;

    padding-bottom: 15px;

  }

}



.count-customer {

  display: flex;

  align-items: center;

  color: var(--primary);

  gap: 12px;

}



.count-customer .icon {

  font-size: 18px;

}



.action_quantity-product {

  display: flex;

  gap: 16px;

}



@media (min-width: 576px) {

  .action_quantity-product .wg-quantity {

    min-width: 140px;

  }

}



@media (max-width: 575px) {

  .action_quantity-product {

    flex-direction: column;

  }

}



/*------------ blog ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.article-blog {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.article-blog .blog-image {

  position: relative;

  display: inline-flex;

}



.article-blog .entry_image {

  position: relative;

}



.article-blog .entry_image img {

  aspect-ratio: 1.28;

  object-fit: cover;

  width: 100%;

}



.article-blog .entry_tag {

  position: absolute;

  top: 10px;

  left: 10px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.article-blog .entry_tag.pst-2 {

  top: 8px;

  left: 8px;

}



.article-blog .name-tag {

  display: block;

  padding: 8px 24px;

  background-color: var(--black);

  color: var(--white);

}



.article-blog .entry_name {

  margin-bottom: 4px;

  font-weight: normal;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.article-blog .text {

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.article-blog.style-row .entry_name {

  margin-bottom: 0;

}



.article-blog.style-row .blog-content {

  display: flex;

  align-items: start;

  flex-direction: column;

  gap: 12px;

}



.article-blog.style-large {

  grid-column: 1/-1;

}



.article-blog.style-large .entry_name {

  margin-bottom: 12px;

}



.article-blog.style-large .text {

  margin-bottom: 24px;

}



.article-blog.type-space-2 {

  gap: 28px;

}



.article-blog.type-space-2 .blog-content {

  padding: 0;

}



.article-blog.type-space-2 .entry_name {

  margin-bottom: 12px;

}



.article-blog.type-space-2 .text {

  margin-bottom: 24px;

}



.article-blog.type-space-2 .entry_tag {

  top: 0;

  left: 0;

}



.article-blog.style-radius {

  gap: 28px;

}



.article-blog.style-radius .entry_image {

  border-radius: 16px;

}



.article-blog.style-radius .name-tag {

  border-radius: 999px;

  background-color: var(--primary);

}



.article-blog.style-radius .entry_name {

  margin-bottom: 12px;

}



.article-blog.style-radius .text {

  margin-bottom: 24px;

}



.article-blog.style-radius .blog-content {

  padding: 0;

}



@media (min-width: 768px) {

  .article-blog.style-row {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 48px;

  }



  .article-blog.style-row .entry_image {

    aspect-ratio: 0.9256198347;

  }



  .article-blog.style-row .entry_image img {

    object-fit: cover;

  }



  .article-blog.style-row .blog-content {

    padding-left: 0px;

    max-width: 572px;

  }

}



@media (min-width: 1200px) {

  .article-blog {

    gap: 32px;

  }



  .article-blog .entry_tag {

    top: 16px;

    left: 16px;

  }



  .article-blog .blog-content {

    padding-left: 16px;

  }



  .article-blog.style-row .entry_name {

    margin-bottom: -12px;

  }



  .article-blog.style-row .blog-content {

    gap: 24px;

  }



  .article-blog.style-large {

    display: flex;

    flex-direction: column;

    gap: 48px;

  }



  .article-blog.style-large .entry_image img {

    aspect-ratio: 1.7770382696;

  }



  .article-blog.style-large .blog-content {

    padding-left: 0;

  }



  .article-blog.style-large .entry_name {

    font-size: 32px;

    line-height: 43px;

  }



  .article-blog.style-small img {

    aspect-ratio: 1.7802197802;

  }

}



.social-wrap .title {

  margin-bottom: 20px;

}



.wg-pagination {

  display: flex;

  align-items: center;

  gap: 9px;

}



@media (max-width: 575px) {

  .wg-pagination {

    justify-content: center;

  }

}



.pagination-item {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

}



.pagination-item.direct {

  border: 1px solid var(--line);

}



.pagination-item.direct:hover {

  border-color: var(--black);

}



.pagination-item.active,

.pagination-item:hover {

  background-color: var(--black);

  color: var(--white);

}



@media (min-width: 1200px) {

  .pagination-item {

    width: 56px;

    height: 56px;

  }



  .pagination-item .icon {

    font-size: 24px;

  }

}



@media (max-width: 575px) {

  .pagination-item:nth-child(6) {

    display: none;

  }

}



.sidebar-item:not(:last-child) {

  margin-bottom: 30px;

}



.sidebar-item .sb-title {

  margin-bottom: 15px;

}



@media (min-width: 1200px) {

  .sidebar-item:not(:last-child) {

    margin-bottom: 48px;

  }



  .sidebar-item .sb-title {

    margin-bottom: 24px;

  }

}



.sb-search .form-search input {

  padding-top: 15px;

  padding-bottom: 15px;

}



.sb-search .form-search .icon {

  font-size: 20px;

}



.sb-category {

  display: grid;

  gap: 12px;

}



.sb-category a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--text);

}



.sb-recent {

  display: grid;

  gap: 24px;

}



.sb-tag {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}



.sb-tag a {

  padding: 11px 15px;

  border: 1px solid var(--line);

  border-radius: 99px;

}



.sb-tag a:hover {

  border-color: var(--primary);

}



.sb-gallery {

  gap: 8px;

  width: 100%;

}



.sb-gallery img {

  width: 100%;

  min-height: 100px;

  object-fit: cover;

}



.wg-recent {

  display: flex;

  gap: 12px;

}



.wg-recent .image {

  max-width: 112px;

  flex: 1;

}



.wg-recent img {

  width: 100%;

  object-fit: cover;

}



.wg-recent .content {

  display: grid;

  gap: 8px;

  flex: 2;

}



.wg-recent .entry_name {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.sb-banner {

  position: relative;

}



.sb-banner .image {

  width: 100%;

}



.sb-banner img {

  aspect-ratio: 0.6821052632;

  object-fit: cover;

  width: 100%;

}



.sb-banner .content {

  position: absolute;

  bottom: 24px;

  left: 24px;

}



.sb-banner .sub-title {

  margin-bottom: 12px;

}



.sb-banner .title {

  margin-bottom: 30px;

}



@media (min-width: 1200px) {

  .sb-banner .title {

    margin-bottom: 40px;

  }

}



.btn-sidebar-mb {

  position: fixed;

  top: 30%;

  left: 0;

  z-index: 50;

}



.btn-sidebar-mb button {

  width: 40px;

  height: 40px;

  border: 1px solid var(--black);

  background-color: var(--black);

  color: var(--white);

  display: flex;

  justify-content: center;

  align-items: center;

}



.btn-sidebar-mb button i {

  font-size: 20px;

}



.btn-sidebar-mb button:hover {

  background-color: var(--white);

  color: var(--black);

}



.btn-sidebar-mb.right {

  left: unset;

  right: 0;

  transform: rotate(180deg);

}



.page-title-blog {

  position: relative;

}



.page-title-blog .bg-image {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.page-title-blog .bg-image .parallaxie {

  position: absolute;

  inset: 0;

}



.page-title-blog .name-tag {

  display: inline-flex;

  padding: 8px 24px;

  background-color: var(--black);

  color: var(--white);

  margin-bottom: 12px;

}



.page-title-blog .heading {

  text-transform: capitalize;

  margin-bottom: 24px;

}



.page-title-blog .content {

  padding-top: 200px;

  padding-bottom: 30px;

}



.page-title-blog .entry_author {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--text);

}



.page-title-blog .name-author {

  color: var(--text);

}



@media (min-width: 1200px) {

  .page-title-blog .content {

    padding-top: 300px;

  }

}



@media (min-width: 1440px) {

  .page-title-blog .heading {

    line-height: 66.5px;

  }



  .page-title-blog .content {

    padding-top: 475px;

    padding-bottom: 48px;

  }

}



@media (max-width: 1199px) {

  .page-title-blog {

    position: relative;

  }



  .page-title-blog::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.3019607843);

  }



  .page-title-blog .heading,

  .page-title-blog .entry_author,

  .page-title-blog .name-author {

    color: var(--white);

  }

}



.blog-detail_info {

  display: flex;

  flex-direction: column;

  gap: 32px;

  margin-top: 30px;

}



.blog-detail_info .title-label {

  margin-bottom: 8px;

}



.blog-detail_info .entry_date {

  font-weight: 600;

}



.blog-detail_info .tag-list {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  font-weight: 500;

  gap: 8px 16px;

}



@media (min-width: 1200px) {

  .blog-detail_info {

    max-width: 248px;

    width: 100%;

  }

}



.blog-detail_content .box-text {

  display: grid;

  gap: 32px;

}



.blog-detail_content .entry_image img {

  min-height: 300px;

  object-fit: cover;

}



.quote-blog {

  padding: 20px 15px;

  background-color: var(--black);

}



.quote-blog .icon {

  font-size: 56px;

  margin-bottom: 12px;

}



.quote-blog .icon,

.quote-blog .quote {

  color: var(--white);

}



.quote-blog .quote {

  font-style: italic;

}



@media (min-width: 1200px) {

  .quote-blog {

    padding: 32px;

  }

}



.group-direc {

  display: flex;

  gap: 20px;

}



.group-direc .br-line {

  width: 1px;

  height: 100%;

}



@media (min-width: 1200px) {

  .group-direc {

    gap: 32px;

  }

}



.btn-direc {

  display: flex;

  align-items: center;

  gap: 12px;

  flex: 1;

}



.btn-direc .name-post {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.btn-direc img {

  max-width: 112px;

}



.btn-direc .content {

  padding: 11px 0px;

  display: grid;

  gap: 8px;

}



.btn-direc.next {

  justify-content: flex-end;

  text-align: end;

}



@media (max-width: 767px) {

  .btn-direc img {

    display: none;

  }

}



.blog-detail_comment {

  padding-top: 64px;

  margin-bottom: 56px;

}



.blog-detail_comment .title {

  margin-bottom: 56px;

}



.blog-detail_comment .comment-list {

  padding-bottom: 28px;

}



.blog-detail_comment .comment-list .comment-item:not(:last-child) {

  margin-bottom: 28px;

}



.blog-detail_comment .comment-list .comment-item:not(:last-child) .cmt_content {

  padding-bottom: 28px;

  border-bottom: 1px solid var(--line-10);

}



.blog-detail_comment .btn-view-all {

  max-width: 988px;

  margin-left: auto;

}



.comment-item {

  display: flex;

  align-items: start;

  gap: 20px;

}



.comment-item .cmt_image {

  max-width: 60px;

  width: 100%;

  border-radius: 14px;

  overflow: hidden;

}



.comment-item .cmt_content {

  width: 100%;

}



.comment-item .head {

  display: flex;

  justify-content: space-between;

  margin-bottom: 12px;

}



.comment-item .cmt__text {

  margin-bottom: 16px;

}



.comment-item .image-cmt-list {

  display: flex;

  gap: 16px;

  margin-bottom: 16px;

}



.comment-item .feel-action-group {

  display: flex;

  align-items: center;

  gap: 16px;

}



.comment-item .btn-feel {

  display: flex;

  align-items: center;

  gap: 8px;

}



.comment-item .btn-feel .icon {

  font-size: 18px;

}



@media (max-width: 767px) {

  .comment-item {

    gap: 8px;

  }

}



.blog-detail_add_review .title {

  margin-bottom: 8px;

}



.blog-detail_add_review .sub-title {

  margin-bottom: 56px;

}



/*------------ testimonial ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.testimonial-V01 {

  padding: 30px 15px;

  display: grid;

  gap: 32px;

  border: 1px solid var(--line);

  background: var(--white);

}



.testimonial-V01 .tes_title {

  margin-bottom: 12px;

  font-weight: 600;

}



.testimonial-V01 .tes_text {

  margin-bottom: 24px;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.testimonial-V01 .tes_author {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 4px;

}



.testimonial-V01 .author-name {

  color: var(--black);

}



.testimonial-V01 .tes_product {

  display: flex;

  align-items: center;

  gap: 16px;

}



.testimonial-V01 .prd_name {

  margin-bottom: 4px;

}



.testimonial-V01 .product-image {

  max-width: 90px;

}



.testimonial-V01 .product-image img {

  aspect-ratio: 1;

  object-fit: cover;

}



@media (min-width: 768px) {

  .testimonial-V01 {

    padding: 31px;

  }



  .testimonial-V01 .mb-md-32 {

    margin-bottom: 32px !important;

  }

}



.testimonial-V02 {

  display: flex;

  align-items: center;

  gap: 30px;

}



.testimonial-V02 .tes_product {

  position: relative;

}



.testimonial-V02 .product-infor {

  position: absolute;

  bottom: 8px;

  left: 8px;

  right: 8px;

  background-color: var(--white);

  padding: 8px 16px;

}



.testimonial-V02 .prd_name {

  margin-bottom: 4px;

}



.testimonial-V02 .tes_icon {

  font-size: 40px;

  color: var(--black);

  margin-bottom: 20px;

}



.testimonial-V02 .tes_title {

  font-weight: 600;

}



.testimonial-V02 .tes_title,

.testimonial-V02 .tes_text {

  margin-bottom: 15px;

}



.testimonial-V02 .tes_author {

  margin-bottom: 8px;

  color: var(--black);

}



.testimonial-V02 .tes_text {

  -webkit-line-clamp: 5;

  -webkit-box-orient: vertical;

  display: -webkit-box !important;

  overflow: hidden;

}



.testimonial-V02.type-space-2 .tes_author {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 4px;

}



.testimonial-V02.type-space-3 .tes_title {

  margin-bottom: 4px;

}



.testimonial-V02.type-space-3 .prd_price {

  margin-bottom: 24px;

}



.testimonial-V02.type-space-3 .tes_author {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 4px;

}



@media (min-width: 1440px) {

  .testimonial-V02 {

    gap: 45px;

  }



  .testimonial-V02 .tes_content {

    flex: 2;

  }



  .testimonial-V02 .product-image {

    max-width: 324px;

    width: 100%;

  }



  .testimonial-V02 .product-image img {

    aspect-ratio: 0.7788461538;

    object-fit: cover;

  }



  .testimonial-V02.type-space-3 .product-image {

    width: 100%;

    max-width: 200px;

  }



  .testimonial-V02.type-space-3 .product-image img {

    aspect-ratio: 0.6622516556;

  }

}



@media (min-width: 1200px) {



  .testimonial-V02 .tes_title,

  .testimonial-V02 .tes_text {

    margin-bottom: 24px;

  }



  .testimonial-V02 .tes_icon {

    font-size: 56px;

    margin-bottom: 32px;

  }

}



@media (max-width: 1439px) {

  .testimonial-V02>* {

    width: 50%;

  }

}



@media (max-width: 1199px) {

  .testimonial-V02 {

    flex-wrap: wrap;

    align-items: start;

  }



  .testimonial-V02>* {

    width: 100%;

  }



  .testimonial-V02 .product-image img {

    max-height: 350px;

    width: 100%;

    object-fit: cover;

  }



  .testimonial-V02.type-space-3 .product-image img {

    max-height: 450px;

  }

}



@media (max-width: 991px) {

  .testimonial-V02 .product-image img {

    max-height: 300px;

  }

}



.testimonial-V03 {

  display: flex;

  gap: 15px;

}



.testimonial-V03 .tes_title {

  font-weight: 600;

}



.testimonial-V03 .tes_icon {

  font-size: 40px;

  color: var(--black);

}



.testimonial-V03 .author-name {

  color: var(--black);

}



.testimonial-V03 .tes_title,

.testimonial-V03 .tes_text {

  margin-bottom: 15px;

}



.testimonial-V03 .tes_author {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 8px;

}



@media (min-width: 1200px) {

  .testimonial-V03 {

    gap: 30px;

  }



  .testimonial-V03 .tes_icon {

    font-size: 56px;

  }



  .testimonial-V03 .tes_title,

  .testimonial-V03 .tes_text {

    margin-bottom: 24px;

  }



  .testimonial-V03 .author-verified {

    font-size: 24px;

  }

}



@media (min-width: 1440px) {

  .testimonial-V03 {

    gap: 48px;

  }

}



@media (max-width: 575px) {

  .testimonial-V03 {

    flex-direction: column;

  }

}



.testimonial-V04 {

  border: 1px solid var(--line);

  display: flex;

  flex-direction: column;

}



.testimonial-V04 .author-image,

.testimonial-V04 .tes_text {

  margin-bottom: 20px;

}



.testimonial-V04 .tes_text {

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.testimonial-V04 .author-image {

  overflow: hidden;

  border-radius: 50%;

  max-width: 72px;

}



.testimonial-V04 .author-image img {

  object-fit: cover;

}



.testimonial-V04 .tes_content {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  flex-direction: column;

  padding: 30px 15px;

  height: 100%;

}



.testimonial-V04 .tes_title {

  margin-bottom: 8px;

}



.testimonial-V04 .tes_product {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 12px;

  background-color: var(--bg-8);

  border-top: 1px solid var(--line);

}



.testimonial-V04 .prd_name {

  margin-bottom: 4px;

}



.testimonial-V04 .tes_author {

  margin-bottom: 8px;

  color: var(--black);

}



.testimonial-V04 .product-image {

  max-width: 90px;

}



.testimonial-V04 .product-image img {

  aspect-ratio: 1;

  object-fit: cover;

}



@media (min-width: 1200px) {

  .testimonial-V04 .tes_content {

    padding: 32px;

  }



  .testimonial-V04 .author-image,

  .testimonial-V04 .tes_text {

    margin-bottom: 32px;

  }

}



.testimonial-V05 {

  text-align: center;

}



.testimonial-V05 .tes_icon {

  font-size: 50px;

  color: var(--black);

  margin-bottom: 20px;

}



.testimonial-V05 .tes_author {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 4px;

}



.testimonial-V05 .tes_author .author-verified {

  font-size: 24px;

}



.testimonial-V05 .author-name {

  color: var(--black);

}



.testimonial-V05 .rate_wrap {

  margin-bottom: 20px;

  justify-content: center;

}



@media (min-width: 1200px) {

  .testimonial-V05 .tes_icon {

    font-size: 76px;

  }



  .testimonial-V05 .rate_wrap,

  .testimonial-V05 .tes_icon {

    margin-bottom: 32px;

  }

}



/*------------ accordion ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.widget-accordion {

  border-bottom: 1px solid var(--line);

}



.widget-accordion .accordion-title {

  display: flex;

  align-items: center;

  gap: 30px;

  padding: 32px 0px;

  font-weight: 400;

  font-size: clamp(20px, 3vw, 28px);

  line-height: clamp(26px, 3.2vw, 32px);

  text-transform: uppercase;

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



@media (max-width: 767px) {

  .widget-accordion .accordion-title {

    padding: 20px 0px;

  }

}



.widget-accordion .accordion-title .icon {

  font-size: clamp(16px, 3vw, 22px);

  transition: transform 0.35s linear;

}



.widget-accordion .accordion-title:not(.collapsed) {

  color: var(--primary);

}



.widget-accordion .accordion-title:not(.collapsed) .icon {

  transform: rotate(-90deg);

}



.widget-accordion .accordion-body {

  padding: 10px 0px 20px;

}



.widget-accordion:first-child {

  border-top: 1px solid var(--line);

}



.widget-accordion.style-2 .accordion-title {

  padding: 16px 0px;

  justify-content: space-between;

  font-size: 18px;

  line-height: 28px;

}



.widget-accordion.style-2 .accordion-title .icon {

  font-size: 16px;

}



.widget-accordion.style-2:first-child {

  border-top: unset;

}



.ic-accordion-custom {

  position: relative;

  width: 12px;

  height: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.35s linear;

}



.ic-accordion-custom::after,

.ic-accordion-custom::before {

  content: "";

  position: absolute;

  background-color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  border-radius: 2px;

}



.ic-accordion-custom::before {

  height: 100%;

  width: 2px;

}



.ic-accordion-custom::after {

  height: 2px;

  width: 100%;

}



.accor-mn-pl .accordion-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.accor-mn-pl .accordion-title .ic-accordion-custom::before {

  transform: rotate(90deg);

}



.accor-mn-pl .accordion-title .ic-accordion-custom::after {

  transform: rotate(180deg);

}



.accor-mn-pl .accordion-title.collapsed .ic-accordion-custom::before {

  transform: rotate(0deg);

}



.accor-mn-pl .accordion-title.collapsed .ic-accordion-custom::after {

  transform: rotate(0deg);

}



.accordion-faq .icon {

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background-color: var(--black);

  border-color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  flex-shrink: 0;

}



.accordion-faq .accordion-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  margin-bottom: 22px;

  gap: 10px;

}



.accordion-faq .accordion-title .text {

  color: var(--black);

  font-weight: 500;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  display: -webkit-box !important;

  overflow: hidden;

}



.accordion-faq .accordion-title .ic-accordion-custom::before {

  transform: rotate(90deg);

  background-color: var(--white);

}



.accordion-faq .accordion-title .ic-accordion-custom::after {

  transform: rotate(180deg);

  background-color: var(--white);

}



.accordion-faq .accordion-title.collapsed {

  margin-bottom: 0;

}



.accordion-faq .accordion-title.collapsed .text {

  color: var(--text);

  font-weight: 400;

}



.accordion-faq .accordion-title.collapsed .icon {

  border: 1px solid var(--line);

  background-color: transparent;

}



.accordion-faq .accordion-title.collapsed .ic-accordion-custom::before {

  transform: rotate(0deg);

  background-color: var(--black);

}



.accordion-faq .accordion-title.collapsed .ic-accordion-custom::after {

  transform: rotate(0deg);

  background-color: var(--black);

}



@media (min-width: 1200px) {

  .accordion-faq .icon {

    width: 40px;

    height: 40px;

  }

}



/*------------ zoom ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.drift-bounding-box.drift-open {

  background: rgba(255, 255, 255, 0.2509803922);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;

  z-index: 5000;

}



.drift-zoom-pane {

  z-index: 5000;

}



.section-image-zoom .other-image-zoom {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



@media (min-width: 1200px) {

  .section-image-zoom.zoom-active .other-image-zoom {

    opacity: 0.3;

  }

}



.pswp__bg {

  background: var(--white);

}



.pswp__icn {

  fill: rgb(34, 34, 34);

  color: var(--white);

}



.pswp__icn .pswp__icn-shadow {

  stroke: var(--white);

  stroke-width: 1px;

  fill: none;

}



.pswp__counter {

  color: #222;

  text-shadow: 1px 1px 3px #ffffff;

}



.tf-model-viewer {

  width: 100%;

  height: 100%;

  position: relative;

}



.tf-model-viewer model-viewer {

  display: block;

  position: relative;

  z-index: 5;

  width: 100%;

  height: 100%;

}



.tf-model-viewer model-viewer.disabled {

  pointer-events: none;

}



.tf-model-viewer.active model-viewer {

  pointer-events: all;

}



.tf-model-viewer.active .wrap-btn-viewer {

  display: none;

}



.tf-zoom-main1,

.tf-zoom-main {

  position: sticky;

  top: 30px;

  z-index: 50;

}



.tf-zoom-main1 .drift-zoom-pane,

.tf-zoom-main .drift-zoom-pane {

  top: 0;

  left: 0;

  height: 520px;

  max-width: 520px;

  width: 100%;

  background: #fff;

  -webkit-transform: translate3d(0, 0, 0);

  box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2);

  z-index: 3;

}



.tf-zoom-main1 .drift-zoom-pane img,

.tf-zoom-main .drift-zoom-pane img {

  object-fit: cover;

}



.drift-bounding-box.drift-open {

  background: rgba(255, 255, 255, 0.2509803922);

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;

  z-index: 5000;

}



.drift-zoom-pane {

  z-index: 5000;

}



.section-image-zoom .other-image-zoom {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.pswp__bg {

  background: var(--white);

}



.pswp__icn {

  fill: rgb(34, 34, 34);

  color: var(--white);

}



.pswp__icn .pswp__icn-shadow {

  stroke: var(--white);

  stroke-width: 1px;

  fill: none;

}



.pswp__counter {

  color: #222;

  text-shadow: 1px 1px 3px #ffffff;

}



.tf-model-viewer {

  width: 100%;

  height: 100%;

  position: relative;

}



.tf-model-viewer model-viewer {

  display: block;

  position: relative;

  z-index: 5;

  width: 100%;

  height: 100%;

}



.tf-model-viewer model-viewer.disabled {

  pointer-events: none;

}



.tf-model-viewer.active model-viewer {

  pointer-events: all;

}



.tf-model-viewer.active .wrap-btn-viewer {

  display: none;

}



.icv__label {

  border-radius: 999px;

  padding: 8px 32px;

  background-color: var(--black);

}



.icv__label {

  border-radius: 100px;

  padding: 6px 20px;

  font-size: 14px;

  line-height: 16.8px;

  font-weight: 600;

  background-color: var(--main);

  color: var(--white);

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  text-transform: uppercase;

}



@media (min-width: 992px) {

  .icv__control-line {

    width: 4px !important;

    background: #FAFAFA !important;

  }

}



/*------------ shop ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.noUi-target,

.noUi-target * {

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-user-select: none;

  -ms-touch-action: none;

  touch-action: none;

  -ms-user-select: none;

  -moz-user-select: none;

  user-select: none;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.noUi-target {

  position: relative;

  direction: ltr;

}



.noUi-base,

.noUi-connects {

  width: 100%;

  height: 100%;

  position: relative;

  z-index: 1;

}



.noUi-connects {

  overflow: hidden;

  z-index: 0;

}



.noUi-connect,

.noUi-origin {

  will-change: transform;

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  -ms-transform-origin: 0 0;

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-origin {

  left: auto;

  right: 0;

}



.noUi-vertical .noUi-origin {

  width: 0;

}



.noUi-horizontal .noUi-origin {

  height: 0;

}



.noUi-handle {

  position: absolute;

}



.noUi-state-tap .noUi-connect,

.noUi-state-tap .noUi-origin {

  -webkit-transition: transform 0.3s;

  transition: transform 0.3s;

}



.noUi-state-drag * {

  cursor: inherit !important;

}



.noUi-horizontal {

  height: 18px;

}



.noUi-horizontal .noUi-handle {

  width: 34px;

  height: 28px;

  left: -17px;

  top: -6px;

}



.noUi-vertical {

  width: 18px;

}



.noUi-vertical .noUi-handle {

  width: 28px;

  height: 34px;

  left: -6px;

  top: -17px;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-handle {

  right: -17px;

  left: auto;

}



.noUi-draggable {

  cursor: ew-resize;

}



.noUi-vertical .noUi-draggable {

  cursor: ns-resize;

}



.noUi-handle:after {

  left: 17px;

}



.noUi-vertical .noUi-handle:after,

.noUi-vertical .noUi-handle:before {

  width: 14px;

  height: 1px;

  left: 6px;

  top: 14px;

}



.noUi-vertical .noUi-handle:after {

  top: 17px;

}



[disabled] .noUi-connect {

  background: #b8b8b8;

}



[disabled] .noUi-handle,

[disabled].noUi-handle,

[disabled].noUi-target {

  cursor: not-allowed;

}



.noUi-pips,

.noUi-pips * {

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.noUi-pips {

  position: absolute;

  color: #999;

}



.noUi-value {

  position: absolute;

  white-space: nowrap;

  text-align: center;

}



.noUi-value-sub {

  color: #ccc;

  font-size: 10px;

}



.noUi-marker {

  position: absolute;

  background: #ccc;

}



.noUi-marker-sub {

  background: #aaa;

}



.noUi-marker-large {

  background: #aaa;

}



.noUi-pips-horizontal {

  padding: 10px 0;

  height: 80px;

  top: 100%;

  left: 0;

  width: 100%;

}



.noUi-value-horizontal {

  -webkit-transform: translate(-50%, 50%);

  transform: translate(-50%, 50%);

}



.noUi-rtl .noUi-value-horizontal {

  -webkit-transform: translate(50%, 50%);

  transform: translate(50%, 50%);

}



.noUi-marker-horizontal.noUi-marker {

  margin-left: -1px;

  width: 2px;

  height: 5px;

}



.noUi-marker-horizontal.noUi-marker-sub {

  height: 10px;

}



.noUi-marker-horizontal.noUi-marker-large {

  height: 15px;

}



.noUi-pips-vertical {

  padding: 0 10px;

  height: 100%;

  top: 0;

  left: 100%;

}



.noUi-value-vertical {

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%, 0);

  padding-left: 25px;

}



.noUi-rtl .noUi-value-vertical {

  -webkit-transform: translate(0, 50%);

  transform: translate(0, 50%);

}



.noUi-marker-vertical.noUi-marker {

  width: 5px;

  height: 2px;

  margin-top: -1px;

}



.noUi-marker-vertical.noUi-marker-sub {

  width: 10px;

}



.noUi-marker-vertical.noUi-marker-large {

  width: 15px;

}



.noUi-tooltip {

  display: block;

  position: absolute;

  border: 1px solid #d9d9d9;

  border-radius: 3px;

  background: #fff;

  color: #000;

  padding: 5px;

  text-align: center;

  white-space: nowrap;

}



.noUi-horizontal .noUi-tooltip {

  -webkit-transform: translate(-50%, 0);

  transform: translate(-50%, 0);

  left: 50%;

  bottom: 120%;

}



.noUi-vertical .noUi-tooltip {

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  top: 50%;

  right: 120%;

}



.noUi-horizontal {

  height: 2px;

}



.noUi-target {

  border: 0;

}



.noUi-base .noUi-connects {

  border-radius: 999px;

  background-color: var(--line);

}



.noUi-connect {

  background-color: var(--black);

}



.noUi-horizontal .noUi-handle,

.noUi-vertical .noUi-handle {

  height: 15px;

  width: 15px;

  border-radius: 50px;

  border: 4px solid var(--black);

  background-color: var(--white);

  box-shadow: unset;

  cursor: pointer;

}



.noUi-horizontal .noUi-handle::before,

.noUi-horizontal .noUi-handle::after,

.noUi-vertical .noUi-handle::before,

.noUi-vertical .noUi-handle::after {

  content: none;

}



html:not([dir=rtl]) .noUi-horizontal .noUi-handle {

  right: -8px;

}



.tf-btn-filter {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  border: 1px solid var(--line);

  border-radius: 999px;

  text-wrap: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  padding: 8px 16px;

  color: var(--black);

}



.tf-btn-filter .icon {

  font-size: 24px;

}



.tf-btn-filter:hover {

  border-color: var(--black);

}



.tf-btn-filter.active {

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}



@media (min-width: 1200px) {

  .tf-btn-filter {

    gap: 8px;

    min-width: 180px;

    padding: 15px;

  }

}



#filterDropdown {

  min-width: 93px;

}



.tf-shop-control {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px 8px;

  margin-bottom: 30px;

  flex-wrap: wrap;

}



.tf-shop-control .tf-control-sorting {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 12px;

}



@media (min-width: 1200px) {

  .tf-shop-control {

    margin-bottom: 48px;

  }

}



.tf-control-layout {

  display: flex;

  align-items: center;

  gap: 15px;

}



.tf-control-layout .tf-view-layout-switch {

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  color: var(--text-3);

}



.tf-control-layout .tf-view-layout-switch:hover,

.tf-control-layout .tf-view-layout-switch.active {

  color: var(--black);

}



@media (min-width: 992px) {

  .tf-control-layout {

    gap: 24px;

  }

}



@media (max-width: 575px) {

  .tf-view-layout-switch {

    font-size: 14px;

  }

}



.wrapper-shop {

  transition: all 0.3s ease-in-out;

  animation: fadeShop 0.5s ease-in-out;

  gap: 30px;

}



@media (max-width: 575px) {

  .wrapper-shop {

    column-gap: 12px;

    row-gap: 32px;

  }

}



.wrapper-control-shop {

  position: relative;

}



.wrapper-control-shop.loading-shop * {

  display: none;

}



.wrapper-control-shop.loading-shop::after {

  content: "";

  position: absolute;

  display: block;

  top: 50%;

  left: 50%;

  width: 30px;

  height: 30px;

  border: 2px solid transparent;

  border-top: 2px solid var(--black);

  border-right: 2px solid var(--black);

  border-radius: 50%;

  animation: spin 0.5s linear infinite;

  transform: translate(-50%, -50%);

  z-index: 10000;

}



@media (min-width: 1200px) {

  .wrapper-control-shop .tf-grid-layout .wg-pagination {

    margin-top: 16px;

    gap: 40px 20px;

  }

}



@keyframes fadeShop {

  0% {

    opacity: 0;

    transform: translateY(30px);

  }



  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



.listLayout-wrapper #product-count-grid {

  display: none;

}



.listLayout-wrapper #product-count-list {

  display: block;

}



.gridLayout-wrapper #product-count-grid {

  display: block;

}



.gridLayout-wrapper #product-count-list {

  display: none;

}



.widget-facet:not(:last-child) .collapse-body {

  padding-bottom: 32px;

}



.widget-facet .facet-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: var(--black);

}



.widget-facet .facet-title .icon {

  transform: rotate(0deg);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.widget-facet .facet-title.collapsed {

  margin-bottom: 32px;

}



.widget-facet .facet-title.collapsed .icon {

  transform: rotate(180deg);

}



.filter-group-check.group-category a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  color: var(--text);

}



.filter-group-check .list-item {

  display: flex;

  gap: 15px;

  align-items: center;

  cursor: pointer;

}



.filter-group-check .list-item:not(:last-child) {

  margin-bottom: 12px;

}



.filter-group-check .label {

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  width: 100%;

}



.filter-group-check .label>*:first-child {

  flex: 1;

}



@media (min-width: 1200px) {

  .filter-group-check .list-item {

    font-size: 18px;

    line-height: 24px;

    color: var(--text);

  }

}



.filter-size-box {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

}



.filter-size-box .size-item {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--line);

  background-color: var(--white);

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  position: relative;

  border-radius: 50%;

  color: var(--text);

}



.filter-size-box .size-item.active,

.filter-size-box .size-item:hover {

  background-color: var(--black);

  color: var(--white);

}



.filter-size-box .size-item.disabled {

  color: var(--black-4);

  pointer-events: none;

}



.filter-size-box .size-item.disabled::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 53.568px;

  height: 1px;

  background-color: var(--black-4);

  transform: rotate(45deg);

  transform-origin: top left;

}



.filter-size-box .size-item.over-size {

  width: 120px;

  border-radius: 999px;

}



@media (min-width: 1200px) {

  .filter-size-box .size-item {

    width: 56px;

    height: 56px;

  }

}



.filter-color-box {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.filter-color-box .color-item {

  width: 32px;

  height: 32px;

  display: block;

  border-radius: 50%;

  border: 1px solid var(--line);

  overflow: hidden;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  background-color: var(--white);

  cursor: pointer;

  padding: 4px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.filter-color-box .color-item .color {

  width: 100%;

  height: 100%;

  display: block;

  border-radius: 50%;

}



.filter-color-box .color-item.active {

  border-color: var(--dark) !important;

}



.filter-color-box .color-text {

  display: none;

}



@media (min-width: 1200px) {

  .filter-color-box .color-item {

    width: 40px;

    height: 40px;

  }

}



.meta-filter-shop {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px 20px;

  margin-bottom: 48px;

}



.meta-filter-shop #applied-filters {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}



.meta-filter-shop .filter-tag,

.meta-filter-shop .remove-all-filters {

  display: flex;

  align-items: center;

  text-transform: capitalize;

  gap: 10px;

  padding: 8px 16px;

  border-radius: 30px;

  color: var(--black);

  border: 1px solid var(--line);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  font-weight: 400;

  font-size: clamp(16px, 2.3vw, 18px);

  line-height: clamp(22px, 2.8vw, 24px);

}



.meta-filter-shop .filter-tag .icon,

.meta-filter-shop .remove-all-filters .icon {

  font-size: clamp(16px, 2.5vw, 20px);

}



.meta-filter-shop .filter-tag:hover,

.meta-filter-shop .remove-all-filters:hover {

  border-color: var(--primary);

  color: var(--primary);

}



@media (max-width: 575px) {



  .meta-filter-shop .filter-tag,

  .meta-filter-shop .remove-all-filters {

    gap: 6px;

    padding: 6px 12px;

  }

}



.meta-filter-shop.type-drop {

  margin-bottom: 20px;

}



@media (max-width: 991px) {

  .meta-filter-shop {

    margin-bottom: 30px;

  }

}



.overlay-filter {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 2000;

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.4);

  visibility: hidden;

  opacity: 0;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: url(../images/cursor-close.svg), auto;

}



.overlay-filter.show {

  opacity: 1;

  visibility: visible;

}



@media (min-width: 1200px) {

  .overlay-filter.type-drawer {

    display: none;

  }

}



.widget-price {

  display: grid;

  gap: 16px;

}



.widget-price .price-val-range {

  padding: 0px 8px;

  margin: 7px 0px;

}



.widget-price .price-box,

.widget-price .box-value-price {

  display: flex;

  gap: 8px;

}



.widget-price .price-box {

  color: var(--primary);

}



.widget-price .price-val {

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

  position: relative;

}



.widget-price .price-val::before {

  content: attr(data-currency);

}



@media (min-width: 1200px) {

  .widget-price {

    gap: 24px;

  }



  .widget-price .box-value-price {

    gap: 12px;

  }

}



.tf-list-layout {

  display: grid;

  gap: 24px;

}



@media (min-width: 1200px) {

  .tf-list-layout {

    gap: 40px;

  }

}



.tf-grid-layout.tf-col-5 .countdown__item {

  font-size: 20px;

  line-height: 27px;

}



.tf-grid-layout.tf-col-5 .variant-box {

  right: 15px;

  left: 15px;

}



.tf-grid-layout.tf-col-5 .product-size_list {

  padding: 12px 24px;

  gap: 6px;

}



.tf-grid-layout.tf-col-5 .product-size_list .size-item:not(:last-child) {

  min-width: 32px;

  padding-right: 6px;

}



.tf-grid-layout.tf-col-5 .card-product.style-2 .hover-tooltip .tooltip,

.tf-grid-layout.tf-col-5 .card-product.style-4 .hover-tooltip .tooltip {

  display: none;

}



.tf-grid-layout.tf-col-6 .product-countdown {

  transform: unset;

  left: 7px;

  right: 7px;

  bottom: 7px;

  padding: 12px 16px;

}



.tf-grid-layout.tf-col-6 .countdown__item {

  font-size: 18px;

  line-height: 24px;

}



.tf-grid-layout.tf-col-6 .variant-box:not(.bot) {

  bottom: 7px;

  right: 7px;

  left: 7px;

}



.tf-grid-layout.tf-col-6 .product-action_list,

.tf-grid-layout.tf-col-6 .product-action_bot {

  display: none;

}



.tf-grid-layout.tf-col-6 .product-size_list {

  padding: 12px 16px;

  gap: 6px;

}



.tf-grid-layout.tf-col-6 .product-size_list .size-item {

  min-width: 22px;

}



.tf-grid-layout.tf-col-6 .product-size_list .size-item:not(:last-child) {

  min-width: 28px;

  padding-right: 6px;

}



.shop-sale-text {

  display: flex;

  align-items: center;

  gap: 12px;

}



.shop-sale-text label {

  cursor: pointer;

}



.tf-filter-dropdown,

.meta-dropdown-filter {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.tf-shop-change {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

}



@media (min-width: 1200px) {

  .tf-shop-change {

    gap: 32px;

  }

}



@media (max-width: 991px) {

  .tf-shop-change {

    width: 100%;

    justify-content: space-between;

  }

}



@media (max-width: 1199px) {

  .tf-group-filter {

    margin-bottom: 32px;

  }

}



@media (min-width: 1200px) {

  .filter-drawer-wrap {

    max-width: 100%;

    position: absolute;

    z-index: 90;

    padding: 32px;

    top: 100%;

    left: 0;

    right: 0;

    opacity: 0;

    visibility: hidden;

    box-shadow: 0 0 25px 3px rgba(0, 0, 0, 0.1);

    border-radius: 16px;

  }



  .filter-drawer-wrap .tf-group-filter {

    display: flex;

    flex-direction: column;

    gap: 32px;

  }



  .filter-drawer-wrap .collapse-body {

    padding-bottom: 0 !important;

  }



  .filter-drawer-wrap .widget-facet {

    margin-bottom: 0;

    padding-bottom: 0;

    border: 0;

  }



  .filter-drawer-wrap .widget-facet .collapse:not(.show) {

    display: block;

  }



  .filter-drawer-wrap .widget-facet .collapsing {

    height: auto;

    transition: unset;

  }



  .filter-drawer-wrap .facet-title {

    padding: 0px;

    margin-bottom: 24px !important;

  }



  .filter-drawer-wrap .facet-title .icon {

    display: none;

  }



  .filter-drawer-wrap .filter-color-box {

    padding-right: 0;

  }



  .filter-drawer-wrap .canvas-body {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    overflow-y: unset;

    gap: 32px;

  }



  .filter-drawer-wrap.show {

    margin-top: 10px;

    opacity: 1;

    visibility: visible;

  }

}



/*------------ animation ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

@keyframes sliderShape {



  0%,

  100% {

    border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;

    transform: translate3d(0, 0, 0) rotateZ(0.01deg);

  }



  34% {

    border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;

    transform: translate3d(0, 5px, 0) rotateZ(0.01deg);

  }



  50% {

    transform: translate3d(0, 0, 0) rotateZ(0.01deg);

  }



  67% {

    border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;

    transform: translate3d(0, -3px, 0) rotateZ(0.01deg);

  }

}



@keyframes tf-animate-zoom-in-out {

  0% {

    transform: scale(1);

  }



  50% {

    transform: scale(1.1);

  }



  100% {

    transform: scale(1);

  }

}



@keyframes ripple-line {

  to {

    transform: scale(2);

    opacity: 0;

  }

}



@keyframes shine-reverse {

  0% {

    left: 100%;

  }



  100% {

    left: -100%;

  }

}



@-webkit-keyframes spinner-circleBounceDelay {



  0%,

  80%,

  100% {

    -webkit-transform: scale(0);

    transform: scale(0);

  }



  40% {

    -webkit-transform: scale(1);

    transform: scale(1);

  }

}



@keyframes spinner-circleBounceDelay {



  0%,

  80%,

  100% {

    -webkit-transform: scale(0);

    transform: scale(0);

  }



  40% {

    -webkit-transform: scale(1);

    transform: scale(1);

  }

}



@keyframes rotate {

  0% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(360deg);

  }

}



.ani-zoom {

  animation: tf-animate-zoom-in-out 30s linear infinite;

}



@keyframes iconBounce {



  0%,

  100%,

  20%,

  50%,

  80% {

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }



  40% {

    -webkit-transform: translateY(-8px);

    -ms-transform: translateY(-8px);

    transform: translateY(-8px);

  }



  60% {

    -webkit-transform: translateY(-5px);

    -ms-transform: translateY(-5px);

    transform: translateY(-5px);

  }

}



@keyframes float1 {



  0%,

  100% {

    transform: translateY(0) rotate(0deg);

  }



  50% {

    transform: translateY(-5px) rotate(-5deg);

  }

}



@keyframes float2 {



  0%,

  100% {

    transform: translateX(0) rotate(0deg);

  }



  50% {

    transform: translateX(5px) rotate(10deg);

  }

}



@keyframes float3 {



  0%,

  100% {

    transform: scale(1) rotate(0deg);

  }



  50% {

    transform: scale(1.1) rotate(-8deg);

  }

}



@keyframes float4 {



  0%,

  100% {

    opacity: 0.6;

    transform: translateY(0);

  }



  50% {

    opacity: 1;

    transform: translateY(-8px);

  }

}



@keyframes float5 {



  0%,

  100% {

    transform: rotate(0deg) scale(1);

  }



  25% {

    transform: rotate(5deg) scale(1.05);

  }



  75% {

    transform: rotate(-5deg) scale(1.05);

  }

}



@keyframes bgMove {

  from {

    background-position: 200% 0;

  }



  to {

    background-position: 0% 0;

  }

}



/*------------ tabs ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.widget-tabs .widget-menu-tab .item-title {

  cursor: pointer;

  position: relative;

}



.widget-tabs .widget-content-tab {

  position: relative;

  overflow: hidden;

}



.widget-tabs .widget-content-tab .widget-content-inner {

  display: block;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  right: 0;

  -webkit-transform: translateY(30px);

  -ms-transform: translateY(30px);

  transform: translateY(30px);

  transition-timing-function: ease-in;

  transition-duration: 0.2s;

}



.widget-tabs .widget-content-tab .widget-content-inner.active {

  pointer-events: auto;

  opacity: 1;

  visibility: visible;

  position: relative;

  z-index: 2;

  -webkit-transform: none;

  -ms-transform: none;

  transform: none;

  transition-timing-function: ease-out;

  transition-duration: 0.3s;

  transition-delay: 0.3s;

}



.widget-tabs.style-2 .widget-menu-tab {

  padding-bottom: 16px;

  border-bottom: 1px solid var(--line);

  display: flex;

  align-items: center;

}



.widget-tabs.style-2 .widget-menu-tab .item-title {

  position: relative;

  padding: 0px 24px;

  border-radius: 0px;

  color: var(--text);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.widget-tabs.style-2 .widget-menu-tab .item-title:first-child {

  padding-left: 0;

}



.widget-tabs.style-2 .widget-menu-tab .item-title::before {

  position: absolute;

  content: "";

  bottom: -16px;

  height: 1px;

  width: 0;

  left: 0;

  right: auto;

  background-color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.widget-tabs.style-2 .widget-menu-tab .item-title.active {

  color: var(--black);

}



.widget-tabs.style-2 .widget-menu-tab .item-title.active .inner {

  font-weight: 500;

}



.widget-tabs.style-2 .widget-menu-tab .item-title.active::before {

  width: 100%;

  left: auto;

  right: 0;

}



@media (max-width: 1024px) {

  .widget-tabs.style-2 .widget-menu-tab {

    padding-bottom: 10px;

    gap: 24px;

  }



  .widget-tabs.style-2 .widget-menu-tab .item-title::before {

    bottom: -10px;

  }

}



.widget-size {

  display: flex;

  gap: 40px;

  align-items: center;

}



.widget-size .box-title-size {

  display: flex;

  align-items: center;

}



.widget-size .box-title-size .title-size {

  width: 76px;

}



.widget-size .box-title-size .number-size {

  width: 102px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  padding: 17px 25px;

  border: 1px solid var(--line);

  border-radius: 99px;

  font-family: "Sora", sans-serif;

  color: var(--text);

}



.widget-size .box-title-size .number-size .max-size {

  font-weight: 700;

  color: var(--black);

}



.widget-size .tow-bar-block {

  position: relative;

  background: var(--line);

  height: 4px;

  border-radius: 0px;

}



.widget-size .tow-bar-block .progress-size {

  position: absolute;

  height: 4px;

  background: var(--black);

  left: 0;

}



.widget-size .range-input {

  position: relative;

  flex-grow: 1;

}



.widget-size .range-input input {

  position: absolute;

  top: 0;

  height: 4px;

  width: 100%;

  background: none;

  outline: none;

  border: none;

  pointer-events: none;

  appearance: none;

}



.widget-size .range-input input::-webkit-slider-thumb {

  cursor: pointer;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  border: 4px solid var(--black);

  outline: none;

  pointer-events: auto;

  -webkit-appearance: none;

  background: var(--white);

}



@media (max-width: 1024px) {

  .widget-size {

    gap: 16px;

  }



  .widget-size .box-title-size .title-size {

    width: 55px;

  }



  .widget-size .box-title-size .number-size {

    width: 90px;

    padding: 10px 0;

  }

}



.tab-size {

  display: flex;

  flex-direction: column;

  gap: 40px;

}



.tab-size .size-button-wrap {

  display: flex;

  gap: 32px;

}



.tab-size .size-button-wrap .size-button-item {

  width: 100%;

  padding: 15px 0;

  border-radius: 99px;

  border: 1px solid var(--line);

  background-color: transparent;

  text-align: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

}



.tab-size .size-button-wrap .size-button-item.select-option {

  border-color: var(--black);

  background-color: var(--black);

}



.tab-size .size-button-wrap .size-button-item.select-option .text {

  color: var(--white);

}



.tab-size .suggests {

  display: flex;

  gap: 24px;

  align-items: center;

}



@media (max-width: 1024px) {

  .tab-size {

    gap: 20px;

  }



  .tab-size .size-button-wrap {

    gap: 10px;

  }



  .tab-size .size-button-wrap .size-button-item {

    padding: 8px;

  }

}



.suggests-list {

  display: flex;

  gap: 24px;

  align-items: center;

  flex-wrap: wrap;

}



.suggests-list .suggests-item {

  width: 204px;

  padding: 15px;

  text-align: center;

  border: 1px solid var(--line);

  border-radius: 999px;

  font-weight: 600;

}



@media (max-width: 1024px) {

  .suggests-list {

    gap: 16px;

  }



  .suggests-list .suggests-item {

    width: max-content;

    padding: 10px 16px;

  }

}



.tab-sizeguide-table {

  border: 1px solid var(--line);

  border-radius: 5px;

  width: 100%;

}



.tab-sizeguide-table th {

  border: 1px solid var(--line);

  padding: 10px;

  font-weight: 600;

  line-height: 20px;

}



.tab-sizeguide-table td {

  border: 1px solid var(--line);

  border-width: 0 1px 1px 0;

  padding: 10px;

  line-height: 20px;

}



.flat-animate-tab .tab-content {

  position: relative;

}



.flat-animate-tab .tab-pane {

  display: block;

  pointer-events: none;

  opacity: 0;

  visibility: hidden;

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  right: 0;

  -webkit-transform: translateY(30px);

  -ms-transform: translateY(30px);

  transform: translateY(30px);

  transition-timing-function: ease-in;

  transition-duration: 0.2s;

}



.flat-animate-tab .tab-pane.active {

  pointer-events: auto;

  opacity: 1;

  visibility: visible;

  position: relative;

  z-index: 2;

  -webkit-transform: none;

  -ms-transform: none;

  transform: none;

  transition-timing-function: ease-out;

  transition-duration: 0.3s;

  transition-delay: 0.3s;

}



.flat-animate-tab.tab-style-1 {

  overflow: hidden;

}



.flat-animate-tab.tab-style-1 .tab-content {

  margin-top: 48px;

}



.flat-animate-tab.tab-style-2 {

  overflow: hidden;

  min-width: 200px;

}



.flat-animate-tab.tab-style-3 {

  overflow: hidden;

  display: flex;

  gap: 48px;

}



.flat-animate-tab.tab-style-3 .menu-tab {

  min-width: 200px;

  flex-shrink: 0;

}



.flat-animate-tab.tab-style-3 .tab-content {

  border: 1px solid var(--line);

}



.flat-animate-tab.tab-style-3 .tab-content .tab-pane {

  padding: 32px;

}



.flat-animate-tab .menu-tab-1 {

  border-bottom: 1px solid var(--line);

  display: flex;

  align-items: center;

  overflow: auto;

}



.flat-animate-tab .menu-tab-1 .nav-tab-item:first-child .tab-link {

  padding-left: 0 !important;

}



.flat-animate-tab .menu-tab-1 .tab-link {

  padding: 0 24px 16px;

  font-weight: 400;

  font-size: 32px;

  line-height: 100%;

  color: var(--text);

  display: block;

  position: relative;

  text-align: center;

  white-space: nowrap;

}



.flat-animate-tab .menu-tab-1 .tab-link::after {

  position: absolute;

  content: "";

  bottom: 0px;

  height: 1px;

  width: 0;

  left: 50%;

  transform: translateX(-50%);

  background-color: var(--black);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.flat-animate-tab .menu-tab-1 .tab-link.active {

  color: var(--black);

  font-weight: 500;

}



.flat-animate-tab .menu-tab-1 .tab-link.active::after {

  width: 100%;

}



@media (max-width: 991px) {

  .flat-animate-tab .menu-tab-1 .tab-link {

    padding: 0 12px 16px;

    font-size: 24px;

  }

}



.flat-animate-tab .menu-tab-2 {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.flat-animate-tab .menu-tab-2 .tab-link {

  position: relative;

  width: 100%;

  padding: 11px 23px;

  border: 1px solid var(--line);

  color: var(--text);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.flat-animate-tab .menu-tab-2 .tab-link::before {

  position: absolute;

  content: "";

  right: -8px;

  top: 50%;

  transform: translateY(-50%);

  width: 0;

  height: 0;

  border-top: 7px solid transparent;

  border-bottom: 7px solid transparent;

  border-left: 8px solid black;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 0;

  visibility: hidden;

}



.flat-animate-tab .menu-tab-2 .tab-link.active {

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}



.flat-animate-tab .menu-tab-2 .tab-link.active::before {

  opacity: 1;

  visibility: visible;

}



@media (max-width: 767px) {

  .flat-animate-tab .menu-tab-2 {

    flex-direction: row;

    overflow-x: auto;

  }



  .flat-animate-tab .menu-tab-2 .tab-link {

    width: max-content;

    padding: 8px 18px;

  }



  .flat-animate-tab .menu-tab-2 .tab-link::before {

    display: none;

  }

}



.flat-animate-tab .menu-tab-3 {

  border-left: 1px solid var(--line);

  height: max-content;

}



.flat-animate-tab .menu-tab-3 .nav-tab-item:first-child .tab-link {

  padding-top: 0;

}



.flat-animate-tab .menu-tab-3 .nav-tab-item:last-child .tab-link {

  padding-bottom: 0;

}



.flat-animate-tab .menu-tab-3 .tab-link {

  position: relative;

  padding: 16px 0 16px 21px;

  color: var(--text);

}



.flat-animate-tab .menu-tab-3 .tab-link::before {

  position: absolute;

  content: "";

  background-color: var(--black);

  width: 1px;

  height: 0;

  left: -1px;

  top: 0;

  bottom: auto;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.flat-animate-tab .menu-tab-3 .tab-link.active {

  color: var(--black);

}



.flat-animate-tab .menu-tab-3 .tab-link.active::before {

  height: 100%;

  top: auto;

  bottom: 0;

}



.tab-descriptions .desc {

  margin-bottom: 32px;

}



.tab-descriptions .list-infor {

  gap: 48px;

}



.tab-descriptions .list-infor .infor-item {

  border: 1px solid var(--line);

  padding: 24px;

}



.tab-descriptions .list-infor .infor-item .heading {

  margin-bottom: 24px;

  color: var(--black);

}



.tab-descriptions .list-infor ul {

  display: grid;

  gap: 16px;

}



.tab-descriptions .list-infor ul li {

  display: flex;

}



.tab-descriptions .list-infor ul li .title {

  min-width: 124px;

  width: 52.9%;

}



@media (max-width: 1199px) {

  .tab-descriptions .list-infor {

    gap: 30px;

  }

}



.tab-faqs .flat-animate-tab {

  display: flex;

  gap: 45px;

}



.tab-faqs .tab-content {

  margin-top: 0px !important;

  border: 1px solid var(--line);

  flex-grow: 1;

}



.tab-faqs .tab-faqs-descriptions {

  padding: 31px 31px 47px;

}



.tab-faqs .tab-faqs-descriptions ul {

  display: flex;

  gap: 16px;

  flex-direction: column;

}



.tab-faqs .tab-faqs-descriptions ul li {

  display: flex;

  gap: 22px;

}



.tab-faqs .tab-faqs-descriptions ul li .title {

  width: 40.87%;

  flex-shrink: 0;

}



.tab-faqs .tab-faqs-descriptions ul li .text {

  flex-grow: 1;

}



@media (max-width: 767px) {

  .tab-faqs .flat-animate-tab {

    flex-direction: column;

    gap: 24px;

  }



  .tab-faqs .tab-faqs-descriptions {

    padding: 30px 16px;

  }

}



.tab-product_list-2 {

  display: flex;

  gap: 4px;

  flex-wrap: nowrap;

  overflow: auto;

}



.tab-product_list-2.style-2 {

  margin-bottom: 30px;

  white-space: nowrap;

}



@media (min-width: 576px) {

  .tab-product_list-2.style-2 {

    justify-content: center;

  }

}



@media (min-width: 1200px) {

  .tab-product_list-2.style-2 {

    margin-bottom: 48px;

  }



  .tab-product_list-2.style-2 .tf-btn-tab-2 {

    min-width: 180px;

  }

}



.tf-btn-tab-2 {

  min-width: 140px;

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 13px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

}



.tf-btn-tab-2.style-2:hover,

.tf-btn-tab-2.style-2.active {

  color: var(--secondary);

  border-color: var(--bg-4);

  background-color: var(--bg-4);

}



.tf-btn-tab-2.style-primary:hover,

.tf-btn-tab-2.style-primary.active {

  color: var(--white);

  border-color: var(--primary);

  background-color: var(--primary);

}



.tf-btn-tab-2:hover,

.tf-btn-tab-2.active {

  color: var(--primary);

  border-color: var(--primary);

}



@media (max-width: 991px) {

  .tf-btn-tab-2 {

    min-width: 120px;

    padding: 10px 12px;

  }

}



.flat-animate-tab.tab-style-3 .list-infor {

  gap: 16px;

}



.flat-animate-tab.tab-style-3 .list-infor .infor-item {

  padding: 20px 16px;

}



@media (max-width: 1199px) {

  .flat-animate-tab.tab-style-3 {

    display: grid;

    gap: 24px;

  }



  .flat-animate-tab.tab-style-3 .menu-tab-3 {

    display: flex;

    align-items: center;

    white-space: nowrap;

    overflow: auto;

  }



  .flat-animate-tab.tab-style-3 .menu-tab-3>.nav-tab-item a {

    padding: 8px 16px !important;

  }



  .flat-animate-tab.tab-style-3 .menu-tab-3>.nav-tab-item a::before {

    content: unset;

  }



  .flat-animate-tab.tab-style-3 .menu-tab-3>.nav-tab-item a.active {

    color: var(--primary);

  }



  .flat-animate-tab.tab-style-3 .tab-pane {

    padding: 30px 16px !important;

  }



  .flat-animate-tab.tab-style-3 .tab-faqs .tab-pane li {

    flex-wrap: wrap;

    gap: 8px !important;

  }



  .flat-animate-tab.tab-style-3 .tab-faqs .tab-pane li>* {

    width: 100% !important;

  }



  .flat-animate-tab.tab-style-3 .tab-faqs .tab-style-2 {

    gap: 30px;

  }

}



@media (max-width: 1199px) and (max-width: 767px) {

  .flat-animate-tab.tab-style-3 .tab-faqs .menu-tab {

    display: flex;

    flex-wrap: nowrap;

    overflow: auto;

    min-width: unset;

    flex-direction: unset;

    max-width: 767px;

    width: 100%;

  }

}



/*------------ cart ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.tf-cart-sold {

  margin-bottom: 36px;

}



.tf-cart-sold .notification-sold {

  margin-bottom: 20px;

}



.tf-cart-sold .time-count {

  display: inline-block;

  font-weight: 600;

  color: var(--primary);

}



@media (min-width: 1200px) {

  .tf-cart-sold {

    margin-bottom: 54px;

  }



  .tf-cart-sold .notification-sold {

    margin-bottom: 48px;

  }

}



.notification-sold {

  background-color: var(--bg-11);

  padding: 16px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.notification-sold .icon {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  animation: tf-ani-flash 2s infinite;

}



.notification-sold .count-text {

  color: var(--black);

}



@media (min-width: 1200px) {

  .notification-sold .count-text {

    display: flex;

    align-items: center;

    gap: 12px;

  }

}



.notification-progress .text {

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.notification-progress .text .icon {

  font-size: 20px;

  color: var(--black);

}



.notification-progress .progress-cart {

  width: 100%;

  background-color: var(--line);

  height: 4px;

  position: relative;

}



.notification-progress .value {

  position: relative;

  height: 100%;

  background-color: var(--success);

  transition: width 2s ease;

}



.notification-progress .round {

  position: absolute;

  left: 100%;

  top: 50%;

  transform: translateY(-50%);

  width: 16px;

  height: 16px;

  background-color: var(--white);

  border: 4px solid var(--success);

  border-radius: 50%;

}



@media (min-width: 1200px) {

  .notification-progress .text {

    margin-bottom: 22px;

  }

}



.tf-table-page-cart {

  margin-bottom: 30px;

}



.tf-table-page-cart thead tr {

  background-color: var(--bg-2);

}



.tf-table-page-cart tr th {

  font-weight: 600;

  white-space: nowrap;

}



.tf-table-page-cart tbody tr {

  border-bottom: 1px solid var(--line);

}



@media (min-width: 768px) {



  .tf-table-page-cart th:last-child,

  .tf-table-page-cart td:last-child {

    width: 56px;

    padding: 0;

    text-align: center;

  }

}



@media (min-width: 1200px) {

  .tf-table-page-cart {

    margin-bottom: 48px;

  }



  .tf-table-page-cart th:first-child,

  .tf-table-page-cart td:first-child {

    width: 350px;

  }



  .tf-table-page-cart tr th {

    padding: 16px 24px;

    color: var(--black);

  }



  .tf-table-page-cart tr td {

    padding: 29px 24px;

  }

}



@media (min-width: 1440px) {

  .tf-table-page-cart {

    table-layout: fixed;

  }



  .tf-table-page-cart th:first-child,

  .tf-table-page-cart td:first-child {

    width: 458px;

  }

}



@media (max-width: 767px) {

  .tf-table-page-cart thead {

    display: none;

  }

}



.tf-cart_item .cart_product {

  display: flex;

  align-items: center;

  gap: 16px;

}



.tf-cart_item .cart_remove {

  font-size: 24px;

  cursor: pointer;

}



.tf-cart_item .img-prd {

  width: 100%;

}



.tf-cart_item .img-prd img {

  object-fit: cover;

}



.tf-cart_item .infor-prd {

  display: grid;

  gap: 8px;

}



.tf-cart_item .prd_select {

  display: flex;

  align-items: center;

  color: var(--text);

}



@media (min-width: 768px) {

  .tf-cart_item .img-prd {

    max-width: 90px;

  }



  .tf-cart_item .img-prd img {

    aspect-ratio: 1;

  }

}



@media (max-width: 767px) {

  .tf-cart_item {

    margin-bottom: 15px;

    padding-inline-start: 94px;

    min-height: 140px;

    display: block;

    font-size: 12px;

    font-weight: 500;

    position: relative;

  }



  .tf-cart_item .img-prd {

    position: absolute;

    top: 0;

    left: 0;

    overflow: hidden;

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

    width: 80px;

    max-height: 110px;

    flex-shrink: 0;

  }



  .tf-cart_item td {

    display: flex;

    align-items: center;

    flex-direction: row;

    flex-wrap: wrap;

    padding: 10px 0;

    margin: 0;

  }



  .tf-cart_item td:not(:last-child) {

    border-bottom: 1px solid var(--line);

  }



  .tf-cart_item td[data-cart-title]:before {

    content: attr(data-cart-title);

    color: var(--black);

    text-align: start;

    flex: 1 1 auto;

    font-weight: 600;

    font-size: 18px;

    line-height: 24px;

  }

}



.size-select {

  position: relative;

}



.size-select select {

  -webkit-appearance: none;

  appearance: none;

  outline: 0 !important;

  border: 0;

  padding-right: 14px;

  color: var(--text);

  cursor: pointer;

}



.size-select option {

  text-align: center;

}



.size-select::after {

  font-family: "icomoon";

  position: absolute;

  content: "\e916";

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  z-index: 1;

  color: var(--text);

  pointer-events: none;

}



.cart_quantity .wg-quantity {

  display: inline-flex;

  padding: 2px 4px;

}



@media (max-width: 575px) {



  .cart_quantity .btn-quantity,

  .cart_quantity .quantity-product {

    width: 30px;

    height: 30px;

  }

}



.ip-discount-code {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 32px;

  flex-wrap: wrap;

}



.ip-discount-code button {

  white-space: nowrap;

  width: 100%;

}



@media (min-width: 576px) {

  .ip-discount-code {

    flex-wrap: nowrap;

  }



  .ip-discount-code button {

    width: auto;

    min-width: 200px;

  }

}



.group-discount {

  display: flex;

  overflow-x: auto;

  gap: 20px;

  margin-bottom: 60px;

}



.group-discount>* {

  flex: 1 1 auto;

}



@media (min-width: 1600px) {

  .group-discount {

    gap: 48px;

  }

}



.box-discount {

  border-radius: 4px;

  position: relative;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  overflow: hidden;

  min-width: 288px;

}



.box-discount .discount-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 12px;

  border: 1px solid var(--line);

  border-bottom-style: dashed;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  border-top-left-radius: 4px;

  border-top-right-radius: 4px;

}



.box-discount .discount-bot {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid var(--line);

  border-top: none;

  padding: 8px 12px;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  border-bottom-left-radius: 4px;

  border-bottom-right-radius: 4px;

}



.box-discount .coupon-copy-wrap {

  font-weight: 700;

  padding: 6px 23px;

}



.box-discount::before,

.box-discount::after {

  position: absolute;

  z-index: 5;

  content: "";

  top: 73px;

  background-color: var(--white);

  border-radius: 50%;

  width: 16px;

  height: 16px;

  border: 1px solid var(--line);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.box-discount::before {

  left: -7px;

}



.box-discount::after {

  right: -7px;

}



.box-discount:hover .discount-bot,

.box-discount:hover .discount-top,

.box-discount.active .discount-bot,

.box-discount.active .discount-top {

  border-color: var(--primary);

}



.box-discount:hover::before,

.box-discount:hover::after,

.box-discount.active::before,

.box-discount.active::after {

  border-color: var(--primary);

}



.box-discount.style-2 .discount-bot {

  gap: 22px;

}



.box-discount.style-2::before,

.box-discount.style-2::after {

  top: 57px;

}



@media (min-width: 576px) {

  .box-discount.style-2 .discount-off {

    display: flex;

    align-items: center;

    gap: 12px;

  }



  .box-discount.style-2::before,

  .box-discount.style-2::after {

    top: 33px;

  }

}



@media (min-width: 1200px) {

  .box-discount {

    min-width: 320px;

  }



  .box-discount .discount-top,

  .box-discount .discount-bot {

    padding: 16px 24px;

  }



  .box-discount.style-2::before,

  .box-discount.style-2::after {

    top: 50px;

  }

}



.fl-sidebar-cart .title {

  margin-bottom: 24px;

}



.box-order-summary {

  padding: 30px 16px;

}



.box-order-summary .subtotal,

.box-order-summary .discount,

.box-order-summary .ship {

  margin-bottom: 12px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--line-6);

}



.box-order-summary .ship {

  display: grid;

  gap: 12px;

  margin-bottom: 24px;

}



.box-order-summary .ship-item {

  display: flex;

  align-items: center;

  gap: 8px;

}



.box-order-summary .ship-item:not(:last-child) {

  margin-bottom: 8px;

}



.box-order-summary .ship-item label {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-grow: 1;

  color: var(--text);

  cursor: pointer;

}



.box-order-summary .ship-item input:checked~label {

  color: var(--black);

}



.box-order-summary .box-progress-checkout {

  display: grid;

  gap: 12px;

}



.box-order-summary .check-agree {

  display: flex;

  gap: 8px;

  align-items: center;

}



.box-order-summary .check-agree label a {

  font-weight: 600;

  text-decoration: underline;

  text-transform: capitalize;

}



.box-order-summary .total-order {

  margin-bottom: 24px;

}



@media (min-width: 1200px) {

  .box-order-summary {

    padding: 32px;

  }

}



.tf-page-checkout {

  margin-bottom: 60px;

}



.wrap-coupon {

  margin-bottom: 40px;

}



@media (min-width: 1200px) {

  .wrap-coupon {

    margin-bottom: 56px;

  }

}



.tf-checkout-cart-main>*:not(:last-child) {

  margin-bottom: 40px;

}



.tf-checkout-cart-main .title {

  margin-bottom: 24px;

}



@media (min-width: 1200px) {

  .tf-checkout-cart-main .title {

    margin-bottom: 32px;

  }



  .tf-checkout-cart-main>*:not(:last-child) {

    margin-bottom: 56px;

  }

}



.payment-method-box .pay-title {

  font-size: 18px;

  line-height: 24px;

}



.payment_accordion {

  margin-bottom: 20px;

  border-bottom: 1px dashed var(--line);

}



.payment_accordion .payment_check {

  padding-bottom: 20px;

}



.payment_accordion .payment_body {

  padding-bottom: 20px;

}



.payment_check .pay-title {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: var(--black);

  cursor: pointer;

}



.payment_check .tf-check-rounded:checked~.pay-title {

  font-weight: 700;

}



.ip-card {

  position: relative;

}



.ip-card input {

  padding-right: 196px !important;

}



.ip-card .card-logo {

  position: absolute;

  right: 24px;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  gap: 8px;

}



.check-ship {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 15px 16px;

  border: 1px solid var(--bg-12);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  background-color: var(--bg-12);

  border-radius: 8px;

}



.check-ship:has(.tf-check-rounded:checked) {

  border-color: var(--black);

}



.check-ship:has(.tf-check-rounded:checked) .text {

  color: var(--black);

}



.check-ship .tf-check-rounded {

  flex-shrink: 0;

}



.check-ship .text {

  flex-grow: 1;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  color: rgba(102, 112, 133, 0.8);

}



.list-order-product {

  margin-bottom: 24px;

}



.list-order-product .img-prd {

  max-width: 90px;

}



.list-order-product .img-prd img {

  aspect-ratio: 1;

  object-fit: cover;

}



.list-order-product .order-item {

  display: flex;

  gap: 16px;

  align-items: center;

}



.list-order-product .order-item:not(:last-child) {

  margin-bottom: 15px;

}



.list-order-product .infor-prd {

  display: grid;

  gap: 8px;

  flex: 1;

}



.list-total {

  margin-bottom: 24px;

}



.list-total .total-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 12px;

  padding-top: 12px;

  border-bottom: 1px solid var(--line);

}



.list-total .total-item:first-child {

  border-top: 1px solid var(--line);

}



.box-your-order .last-total {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.tf-table-compare {

  overflow-x: auto;

}



.tf-table-compare::-webkit-scrollbar {

  width: 4px;

  height: 4px;

}



.tf-table-compare::-webkit-scrollbar-thumb {

  cursor: grab;

}



.tf-table-compare table {

  width: 100%;

}



.tf-table-compare thead {

  background-color: unset;

}



.tf-table-compare tbody tr:nth-child(even) {

  background-color: unset;

}



.tf-table-compare tbody tr:nth-child(odd) {

  background-color: #F8F8F8;

}



.tf-table-compare tr th:not(:first-child) {

  border-top: 1px solid var(--line);

  border-left: 1px solid var(--line);

}



.tf-table-compare tr td:not(:first-child) {

  border-left: 1px solid var(--line);

}



.tf-table-compare th,

.tf-table-compare td {

  min-width: 372px;

}



.tf-table-compare th:first-child,

.tf-table-compare td:first-child {

  min-width: 324px;

}



.tf-table-compare .compare-col {

  vertical-align: middle;

}



.tf-table-compare .item_image {

  aspect-ratio: 0.75;

  position: relative;

  margin-bottom: 24px;

}



.tf-table-compare .item_image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tf-table-compare .item_name {

  margin-bottom: 4px;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.tf-table-compare .remove {

  position: absolute;

  top: 8px;

  right: 8px;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  background-color: var(--white);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  cursor: pointer;

  border-radius: 50%;

  color: var(--black);

}



.tf-table-compare .remove:hover {

  background-color: var(--black);

  color: var(--white);

  border-color: var(--black);

}



.tf-table-compare .compare-title {

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

}



.tf-table-compare .compare_rate {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

}



.tf-table-compare .compare-value {

  text-align: center;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

}



@media (min-width: 1200px) {

  .tf-table-compare tr th {

    padding: 32px 24px;

  }



  .tf-table-compare tr td {

    padding: 16px 24px;

  }

}



@media (max-width: 1199px) {



  .tf-table-compare th,

  .tf-table-compare td {

    padding: 16px;

    min-width: 300px;

  }



  .tf-table-compare th:first-child,

  .tf-table-compare td:first-child {

    min-width: 250px;

  }

}



@media (max-width: 767px) {



  .tf-table-compare th,

  .tf-table-compare td {

    min-width: 200px;

  }



  .tf-table-compare th:first-child,

  .tf-table-compare td:first-child {

    display: none;

  }

}



.list-compare-color {

  display: flex;

  gap: 8px;

}



.list-compare-color .item {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  border: 4px solid var(--white);

  position: relative;

}



.list-compare-color .item::after {

  content: "";

  position: absolute;

  border-radius: 50%;

  top: -4px;

  left: -4px;

  right: -4px;

  bottom: -4px;

  border: 1px solid var(--line);

}



/*------------ Section ---------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.list-hor {

  display: flex;

  align-items: center;

  gap: 16px;

}



.list-ver {

  display: grid;

  gap: 16px;

}



.group-btn {

  display: flex;

  align-items: center;

}



.page-title-image {

  position: relative;

}



.page-title-image .heading {

  margin-bottom: 30px;

}



@media (min-width: 992px) {

  .page-title-image .heading {

    font-size: 48px;

  }

}



@media (min-width: 1200px) {

  .page-title-image .heading {

    margin-bottom: 40px;

  }

}



.page_image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 20% center;

}



@media (max-width: 1439px) {

  .page_image {

    height: 650px;

  }

}



@media (max-width: 767px) {

  .page_image {

    height: 600px;

  }

}



@media (max-width: 575px) {

  .page_image {

    height: 475px;

  }

}



.page_content {

  position: absolute;

  top: 60px;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 2;

  display: flex;

  align-items: center;

}



.s-page-title {

  padding: 60px 0px;

  background-color: var(--bg-9);

  position: relative;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

}



.s-page-title::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.4);

  top: 0;

  left: 0;

}



.s-page-title .content {

  text-align: center;

  position: relative;

  z-index: 1;

}



.s-page-title .title-page {

  margin-bottom: 12px;

}



.s-page-title.has-bg {

  position: relative;

  background-color: unset;

}



.s-page-title.has-bg::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.3019607843);

}



.s-page-title.style-2 {

  padding: 0;

}



.s-page-title.style-2 .content {

  padding-top: 15px;

  padding-bottom: 15px;

  text-align: left;

  border-top: 1px solid var(--line-8);

}



@media (max-width: 768px) {

  .s-page-title.style-2 .content {

    padding-top: 5px;

    padding-bottom: 5px;

  }



  .s-page-title.style-2 .content li h6,

  .s-page-title.style-2 .content li a {

    font-size: 12px;

  }

}



@media (min-width: 992px) {

  .s-page-title {

    padding: 80px 0px;

  }

}



@media (min-width: 1200px) {

  .s-page-title {

    padding-top: 111px;

    padding-bottom: 110px;

  }



  .s-page-title .title-page {

    line-height: 67px;

  }

}



.breadcrumbs-page {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.breadcrumbs-page .icon {

  font-size: 14px;

}



.wg-cls {

  display: flex;

  position: relative;

  height: 100%;

}



.wg-cls .image {

  height: 100%;

}



.wg-cls .image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.wg-cls .cls-content {

  padding: 12px 24px;

  border-radius: 999px;

  background-color: var(--white);

  display: flex;

  align-items: center;

  gap: 16px;

  position: absolute;

  bottom: 16px;

  left: 50%;

  transform: translateX(-50%);

  white-space: nowrap;

}



.wg-cls .br-line {

  background-color: var(--black);

  height: 24px;

}



.wg-cls.style-2 .cls-content {

  background-color: transparent;

  padding: 0;

}



@media (min-width: 992px) {

  .wg-cls.style-2 .cls-content {

    bottom: 32px;

  }

}



@media (min-width: 1200px) {

  .wg-cls .cls-content {

    gap: 24px;

  }



  .wg-cls.style-2 .cls-content {

    bottom: 49px;

  }

}



.wg-cls-2 {

  position: relative;

}



.wg-cls-2 .cls-content_wrap {

  position: absolute;

  bottom: 16px;

  left: 16px;

  right: 16px;

  display: flex;

  justify-content: center;

}



.wg-cls-2 .cls-content {

  padding: 12px 24px;

  border-radius: 999px;

  background-color: var(--white);

  display: flex;

  align-items: center;

  gap: 16px;

}



.wg-cls-2 .tag_cls {

  display: -webkit-box !important;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  word-break: normal;

  overflow-wrap: break-word;

}



.wg-cls-2 .br-line {

  background-color: var(--black);

  height: 24px;

}



@media (min-width: 1200px) {

  .wg-cls-2 .cls-content {

    gap: 24px;

  }



  .wg-cls-2 .cls-content_wrap {

    bottom: 24px;

  }



  .wg-cls-2 .cls-content_wrap.b-16 {

    bottom: 16px;

  }



  .wg-cls-2 .cls-content_wrap.b-xl-32 {

    bottom: 32px;

  }



  .wg-cls-2.type-space-2 .cls-content {

    padding: 16px 24px;

  }

}



@media (max-width: 991px) {

  .wg-cls-2.type-space-2 .cls-content_wrap {

    bottom: 8px;

    left: 8px;

    right: 8px;

  }



  .wg-cls-2.type-space-2 .tag_cls {

    font-size: 20px;

  }

}



.sect-title {

  margin-bottom: 40px;

  gap: 15px;

}



.sect-title.type-2 {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.sect-title.type-3 {

  margin-bottom: 32px;

  padding-bottom: 32px;

  border-bottom: 1px solid var(--line);

}



.sect-title.type-4 {

  margin-bottom: 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

}



.sect-title .title {

  color: var(--black);

  font-weight: 500;

}



@media (min-width: 1200px) {

  .sect-title {

    margin-bottom: 56px;

  }

}



@media (max-width: 575px) {

  .sect-title.type-2 {

    flex-wrap: wrap;

  }

}



.s-title {

  color: var(--black);

}



.box-image_image {

  display: inline-flex;

  width: 100%;

}



.box-image_image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.box-image_content {

  position: absolute;

  display: flex;

  align-items: start;

  flex-direction: column;

}



.box-image_V01 {

  position: relative;

  display: flex;

}



.box-image_V01 .title {

  margin-bottom: 4px;

}



.box-image_V01 .sub-title {

  margin-bottom: 32px;

}



.box-image_V01 .box-image_content {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.box-image_V01.type-2 {

  border-radius: 16px;

  overflow: hidden;

  margin-bottom: 30px;

}



.box-image_V01.type-2 .box-image_image img {

  max-height: 400px;

}



.box-image_V01.type-2 .box-image_content {

  top: 40%;

  left: 16px;

  right: 16px;

  transform: unset;

  text-align: center;

  align-items: center;

}



.box-image_V01.type-2 .title {

  margin-bottom: 0;

}



.box-image_V01.type-3 {

  margin-bottom: 0;

}



.box-image_V01.type-3 .box-image_image img {

  min-height: 400px;

}



.box-image_V01.type-3 .sub-title,

.box-image_V01.type-3 .desc {

  margin-bottom: 24px;

}



.box-image_V01.type-3 .title {

  margin-bottom: 8px;

}



.box-image_V01.type-3 .box-image_content {

  left: 16px;

  transform: translateY(-50%);

  align-items: start;

}



.box-image_V01.type-4 {

  border-radius: 16px;

  overflow: hidden;

}



.box-image_V01.type-4 .box-image_content {

  left: 16px;

  right: 16px;

  transform: translateY(-50%);

}



@media (min-width: 1200px) {

  .box-image_V01.type-3 .box-image_content {

    left: 32px;

  }

}



@media (min-width: 992px) {

  .box-image_V01.type-2 {

    height: 100%;

  }



  .box-image_V01.type-2 .box-image_image img {

    max-height: unset;

    height: 100%;

  }

}



@media (max-width: 1199px) {

  .box-image_V01 {

    margin-bottom: 30px;

  }



  .box-image_V01 .box-image_image img {

    max-height: 350px;

  }



  .box-image_V01 .box-image_content {

    align-items: center;

  }



  .box-image_V01.type-3::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 24.38%, #FFFfff 69.3%);

  }



  .box-image_V01.type-3 .box-image_content {

    z-index: 1;

  }

}



@media (max-width: 767px) {

  .box-image_V01 {

    margin-bottom: 12px;

  }

}



.box-image_V02 {

  position: relative;

  display: flex;

}



.box-image_V02 .sub-text {

  margin-bottom: 16px;

}



.box-image_V02 .title {

  margin-bottom: 32px;

}



.box-image_V02 .box-image_content {

  bottom: 30px;

  left: 30px;

}



.box-image_V02 .box-image_image img {

  min-height: 400px;

}



.box-image_V02.type-space-2 .title {

  margin-bottom: 4px;

}



.box-image_V02.type-space-2 .sub-text {

  margin-bottom: 24px;

}



.box-image_V02.type-space-3 .sub-text {

  margin-bottom: 5px;

}



.box-image_V02.type-space-3 .title {

  margin-bottom: 32px;

}



.box-image_V02.type-space-4 .box-image_content {

  bottom: 24px;

  left: 24px;

}



.box-image_V02.type-space-6 .title {

  margin-bottom: 12px;

}



.box-image_V02.type-space-6 .desc {

  margin-bottom: 30px;

}



@media (min-width: 1200px) {

  .box-image_V02.type-space-3 .box-image_content {

    bottom: 32px;

    left: 32px;

  }



  .box-image_V02 .box-image_content {

    bottom: 48px;

    left: 48px;

  }



  .box-image_V02.type-space-5 .box-image_content {

    bottom: 32px;

    left: 32px;

  }



  .box-image_V02.type-space-6 .desc {

    margin-bottom: 40px;

  }

}



.box-image_V03 {

  position: relative;

  display: flex;

}



.box-image_V03 .sub-text {

  margin-bottom: 12px;

}



.box-image_V03 .title {

  margin-bottom: 24px;

}



.box-image_V03 .box-image_content {

  bottom: 16px;

  left: 30px;

  right: 30px;

}



@media (min-width: 1200px) {

  .box-image_V03 .box-image_content {

    bottom: 32px;

    right: 46px;

    left: 46px;

  }

}



.box-image_V04 {

  position: relative;

  display: flex;

}



.box-image_V04 .box-image_content {

  top: 30px;

  left: 15px;

  right: 15px;

}



.box-image_V04 img {

  min-height: 350px;

}



.box-image_V04 .sub-text {

  margin-bottom: 24px;

}



.box-image_V04 .title {

  margin-bottom: 8px;

}



.box-image_V04 .sub-title {

  margin-bottom: 24px;

}



@media (min-width: 768px) {

  .box-image_V04 .box-image_content {

    left: 30px;

    right: 30px;

  }

}



@media (min-width: 1200px) {

  .box-image_V04 .box-image_content {

    top: 50px;

    left: 50%;

    transform: translateX(-50%);

    right: unset;

  }

}



@media (min-width: 1440px) {

  .box-image_V04 .box-image_content {

    top: 88px;

  }

}



.box-image_V05 {

  position: relative;

  display: flex;

}



.box-image_V05 .box-image_content {

  bottom: 32px;

  left: 32px;

}



.box-image_V05 .box-image_image img {

  min-height: 250px;

}



.box-image_V05 .sub-title {

  margin-bottom: 4px;

}



.box-image_V05 .title {

  margin-bottom: 16px;

}



.box-image_V05.type-space-2 .box-image_content {

  bottom: 24px;

  left: 24px;

}



.box-image_V05.type-space-2 .box-image_image img {

  min-height: unset;

}



@media (max-width: 767px) {

  .box-image_V05 .box-image_content {

    bottom: 30px;

    left: 15px;

  }

}



.box-image_V06 {

  position: relative;

  display: flex;

  border-radius: 16px;

  overflow: hidden;

}



.box-image_V06 .box-image_content {

  top: 49px;

  left: 16px;

  bottom: 16px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.box-image_V06 .sub-title {

  margin-bottom: 4px;

}



.box-image_V06 .title {

  margin-bottom: 8px;

}



.box-image_V06 .product-badge_list {

  left: 16px;

  top: 16px;

}



.box-image_V06 .product-badge_item {

  border-radius: 99px;

}



.box-image_V06 .box-image_image img {

  min-height: 242px;

}



.box-image_V06.has-overlay::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(-90deg, rgba(241, 242, 244, 0) 38.38%, #F1F2F4 66.3%);

}



.box-image_V06.has-overlay .box-image_image {

  z-index: 0;

}



.box-image_V06.has-overlay .box-image_content,

.box-image_V06.has-overlay .product-badge_list {

  z-index: 2;

}



.box-image_V06.has-overlay.overlay-2::after {

  background: linear-gradient(-90deg, rgba(59, 29, 10, 0) 32.95%, #3B1D0A 80.78%);

}



.box-image_V06.has-overlay.overlay-3::after {

  background: linear-gradient(270deg, rgba(6, 6, 11, 0) 37.83%, #06060B 80.14%);

}



.box-image_V06.has-overlay.overlay-4::after {

  background: linear-gradient(270deg, rgba(14, 18, 38, 0) 37.83%, #0E1226 80.14%);

}



.box-image_V06.has-overlay.overlay-5::after {

  background: linear-gradient(270deg, rgba(103, 107, 114, 0) 37.83%, #676B72 80.14%);

}



.box-image_V06.has-overlay.overlay-6::after {

  background: linear-gradient(270deg, rgba(68, 82, 95, 0) 37.83%, #44525F 80.14%);

}



.box-image_V06.type-space-2 .box-image_content {

  top: unset;

}



.box-image_V06.type-space-2 .title {

  margin-bottom: 16px;

}



.box-image_V06.type-space-3 .box-image_content {

  top: unset;

}



.box-image_V06.type-space-3 .sub-title {

  margin-bottom: 8px;

}



.box-image_V06.type-space-3 .title {

  margin-bottom: 20px;

}



.box-image_V06.type-space-3.pst-center-y .box-image_content {

  top: 16px;

  bottom: 16px;

  justify-content: center;

}



.box-image_V06.type-space-4 .box-image_content {

  top: unset;

}



.box-image_V06.type-space-4 .price-wrap {

  margin-bottom: 22px;

}



@media (min-width: 1200px) {

  .box-image_V06 .box-image_content {

    left: 24px;

    bottom: 24px;

  }



  .box-image_V06 .product-badge_list {

    top: 24px;

    left: 24px;

  }

}



.box-image_v07 {

  position: relative;

  border-radius: 24px;

  overflow: hidden;

}



.box-image_v07 .box-image_image {

  height: 100%;

}



.box-image_v07 .box-image_image img {

  width: 100%;

  height: 100%;

  min-height: 700px;

  object-fit: cover;

}



.box-image_v07 .box-image_content {

  bottom: 20px;

  right: 16px;

  left: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

}



.box-image_v07 .promo,

.box-image_v07 .desc {

  margin-bottom: 24px;

}



.box-image_v07 .title {

  margin-bottom: 8px;

}



@media (min-width: 992px) {

  .box-image_v07 .box-image_content {

    bottom: 32px;

  }

}



@media (min-width: 1200px) {

  .box-image_v07 .box-image_content {

    bottom: 56px;

  }

}



.box-image_V08 {

  display: flex;

  position: relative;

}



.box-image_V08 .box-image_content {

  bottom: 32px;

  right: 16px;

  left: 16px;

}



.box-image_V08 .title {

  margin-bottom: 9px;

}



.box-image_V08 .flat-off {

  padding: 3px 31px;

  position: relative;

}



.box-image_V08 .flat-off::before {

  content: "";

  inset: 0;

  z-index: 0;

  position: absolute;

  border-left: 2px solid var(--white);

  border-right: 2px solid var(--white);

}



.box-image_V08 .flat-off::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  width: 55px;

  z-index: 0;

  border-top: 2px solid var(--white);

  border-bottom: 2px solid var(--white);

}



.box-image_V08 .flat-off>.line-break::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  width: 55px;

  z-index: 0;

  border-top: 2px solid var(--white);

  border-bottom: 2px solid var(--white);

}



.box-image_V08 .text-off {

  line-height: 100%;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 11px;

}



.box-image_V08 .text-off span {

  font-size: clamp(36px, 6vw, 64px);

  line-height: clamp(36px, 6vw, 64px);

}



.box-image_category {

  position: relative;

  display: flex;

}



.box-image_category .box-image_content {

  bottom: 15px;

  right: 14px;

  left: 14px;

  align-items: center;

}



@media (min-width: 576px) {

  .box-image_category .tf-btn {

    min-width: 180px;

  }



  .box-image_category.style-2 .box-image_content {

    bottom: 18px;

  }



  .box-image_category.style-2 .tf-btn {

    min-width: unset;

    padding: 10.5px 24px;

  }

}



@media (min-width: 1200px) {

  .box-image_category .box-image_content {

    bottom: 24px;

  }

}



@media (max-width: 575px) {

  .box-image_category.style-2 .box-image_image img {

    min-height: 200px;

  }



  .box-image_category.style-2 .box-image_content {

    bottom: 8px;

    left: 8px;

    right: 8px;

  }



  .box-image_category.style-2 .tf-btn {

    width: 100%;

    font-size: 16px;

    line-height: 20px;

    padding-top: 8px;

    padding-bottom: 8px;

  }

}



.tf-countdown.style-1 .countdown__timer {

  display: flex;

  gap: 8px;

}



.tf-countdown.style-1 .countdown__item {

  width: 64px;

  height: 64px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border-radius: 50%;

  border: 1px solid var(--line);

}



.tf-countdown.style-1 .countdown__item .countdown__value {

  font-weight: 500;

  font-size: 24px;

  line-height: 32px;

  color: var(--primary);

  margin-bottom: -4px;

}



.tf-countdown.style-1 .countdown__item .countdown__label {

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;

  color: rgba(0, 0, 0, 0.5);

}



.banner-V01 .banner_img {

  margin-bottom: 30px;

}



.banner-V01 img {

  min-height: 350px;

}



.banner-V01 .sub-title {

  margin-bottom: 12px;

}



.banner-V01 .title {

  margin-bottom: 12px;

}



.banner-V01 .sub-text {

  margin-bottom: 24px;

}



@media (min-width: 1200px) {

  .banner-V01 .sub-text {

    margin-bottom: 40px;

  }

}



.banner-V02 {

  position: relative;

  overflow: hidden;

}



.banner-V02 .banner_img {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}



.banner-V02 .banner_img img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.banner-V02 .banner_content {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  flex-wrap: wrap;

  z-index: 2;

  padding: 50px 48px;

}



.banner-V02 .title {

  margin-bottom: 8px;

}



.banner-V02 .group-btn {

  gap: 16px;

  flex-wrap: wrap;

}



@media (max-width: 991px) {

  .banner-V02 .banner_img {

    filter: blur(3px);

  }



  .banner-V02 .banner_content {

    padding: 60px 15px;

  }

}



.banner-V03 {

  position: relative;

  overflow: visible;

  padding-top: 174px;

  padding-bottom: 201px;

}



.banner-V03 .banner_img {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}



.banner-V03 .banner_img img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.banner-V03 .banner_content {

  display: flex;

  flex-direction: column;

  align-items: start;

  justify-content: center;

  width: 100%;

}



.banner-V03 .sub-title {

  margin-bottom: 24px;

}



.banner-V03 .title {

  margin-bottom: 8px;

}



.banner-V03 .sub-text {

  margin-bottom: 30px;

}



@media (min-width: 1200px) {

  .banner-V03 .sub-text {

    margin-bottom: 40px;

  }



  .banner-V03 .tf-btn {

    min-width: 248px;

  }

}



@media (min-width: 1440px) {

  .banner-V03 .banner_content {

    bottom: 25px;

  }



  .banner-V03 .sub-text {

    margin-bottom: 56px;

  }

}



@media (max-width: 991px) {

  .banner-V03 .banner_img {

    filter: blur(3px);

  }

}



@media (max-width: 1024px) {

  .banner-V03 {

    padding-top: 80px;

    padding-bottom: 80px;

  }

}



@media (max-width: 767px) {

  .banner-V03 {

    padding-top: 60px;

    padding-bottom: 60px;

  }

}



.banner-V04 .icv__arrow-wrapper {

  display: none;

}



.banner-V04 .icv__circle {

  width: 40px;

  height: 40px;

  background-color: var(--white);

  position: relative;

  border-color: transparent !important;

}



.banner-V04 .icv__circle::after {

  position: absolute;

  content: "";

  display: block;

  width: 40px;

  height: 40px;

  border-radius: 999px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--white);

}



.banner-V04 .icv__circle::before {

  position: absolute;

  font-family: "icomoon";

  content: "\e921";

  top: 50%;

  left: 50%;

  z-index: 1;

  transform: translate(-50%, -50%);

  font-size: 20px;

  color: var(--black);

}



.banner-V04 .icv__label {

  padding: 8px 32px;

  color: var(--white);

  border-radius: 999px;

  background-color: var(--black);

  font-weight: 600;

  font-size: 18px;

  line-height: 24px;

  text-transform: uppercase;

  bottom: 24px;

}



.banner-V04 .icv__label-before {

  left: 24px;

}



.banner-V04 .icv__label-after {

  right: 24px;

}



@media (max-width: 767px) {

  .banner-V04 .icv__label {

    padding: 6px 20px;

    font-size: 14px;

    line-height: 22px;

    bottom: 12px;

  }



  .banner-V04 .icv__label-before {

    left: 12px;

  }



  .banner-V04 .icv__label-after {

    right: 12px;

  }



  .banner-V04 .icv__circle::after {

    width: 35px;

    height: 35px;

  }

}



.banner-V05 .wg-curve-text,

.banner-V05 .sub-text {

  margin-bottom: 30px;

}



.banner-V05 .title {

  margin-bottom: 8px;

}



.banner-V05 .sub-title {

  margin-bottom: 24px;

}



.banner-V05 .banner_content {

  background-color: var(--white);

  padding: 30px 15px;

}



@media (min-width: 1200px) {

  .banner-V05 .banner_content {

    padding: 56px;

  }



  .banner-V05 .wg-curve-text,

  .banner-V05 .sub-text {

    margin-bottom: 56px;

  }

}



.banner-V06 {

  padding-top: 250px;

  padding-bottom: 251px;

}



.banner-V06 .banner_content {

  text-align: center;

}



.banner-V06 .title {

  margin-bottom: 12px;

}



.banner-V06 .sub-title {

  margin-bottom: 40px;

}



@media (max-width: 1199px) {

  .banner-V06 {

    padding-top: 150px;

    padding-bottom: 150px;

  }

}



@media (max-width: 767px) {

  .banner-V06 {

    padding-top: 100px;

    padding-bottom: 100px;

  }

}



.banner-V07 .sub-title {

  margin-bottom: 32px;

}



.banner-V07 .title {

  margin-bottom: 32px;

}



.banner-V07 .desc {

  margin-bottom: 40px;

}



.banner-V07 .image-right {

  position: relative;

  padding-bottom: 126px;

  padding-left: 126px;

  margin-bottom: 30px;

}



.banner-V07 .image {

  overflow: hidden;

}



.banner-V07 .image.img-1 {

  max-width: 620px;

  margin: 0 auto;

}



.banner-V07 .image.img-2 {

  margin-top: 100px;

  margin-right: 100px;

  max-width: 448px;

  position: absolute;

  bottom: 0;

  left: 0;

}



@media (max-width: 1199px) {

  .banner-V07 .sub-title {

    margin-bottom: 24px;

  }



  .banner-V07 .title {

    margin-bottom: 24px;

  }



  .banner-V07 .desc {

    margin-bottom: 30px;

  }

}



.wg-curve-text {

  display: flex;

  justify-content: center;

  position: relative;

}



.wg-curve-text .icon {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  position: absolute;

}



.text-rotate {

  display: flex;

  justify-content: center;

  align-items: center;

  height: max-content;

  width: max-content;

  margin: 0;

  background-color: transparent;

  animation: rotate 10s linear infinite;

}



.text-rotate .circle {

  width: 174px;

  height: 174px;

  border-radius: 50%;

  position: relative;

}



.text-rotate span {

  font-weight: 700;

  font-size: 16px;

  line-height: 24px;

  position: absolute;

  top: 0;

  left: 50%;

  transform-origin: 0 87px;

  color: var(--black);

}



.banner-lookbook {

  position: relative;

  z-index: 2;

}



.banner-lookbook .img-banner {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.banner-lookbook .lookbook-item {

  position: absolute;

}



.banner-lookbook .position1 {

  top: 32%;

  left: 48%;

}



.banner-lookbook .position2 {

  top: 60%;

  left: 56%;

}



.banner-lookbook .position3 {

  top: 24%;

  left: 76%;

}



.banner-lookbook .position4 {

  top: 57%;

  left: 61%;

}



.banner-lookbook .position5 {

  top: 23%;

  left: 80%;

}



.banner-lookbook .position6 {

  top: 67%;

  left: 66%;

}



.banner-lookbook .position7 {

  top: 43%;

  left: 64%;

}



.banner-lookbook .position8 {

  top: 72%;

  left: 24%;

}



.banner-lookbook .position9 {

  top: 83%;

  left: 81%;

}



.banner-lookbook .dropdown-menu {

  border: 0;

  border-radius: 0px;

  background-color: transparent;

  margin: 0px 22px !important;

}



.banner-lookbook .dropdown.dropup .dropdown-menu {

  margin: 15px -25px !important;

}



.banner-lookbook .dropdown.dropup .dropdown-menu::after {

  display: none;

}



@media (min-width: 992px) {

  .banner-lookbook .lookbook-product {

    margin: -82px 0px;

  }

}



@media (min-width: 1600px) {

  .banner-lookbook .dropdown.dropstart .dropdown-menu::after {

    content: "";

    position: absolute;

    right: -7px;

    top: 50%;

    transform: translateY(-50%);

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-left: 8px solid var(--white);

    border-bottom: 10px solid transparent;

  }



  .banner-lookbook .dropdown.dropend .dropdown-menu::after {

    content: "";

    position: absolute;

    left: -7px !important;

    right: unset !important;

    top: 50%;

    transform: translateY(-50%);

    width: 0;

    height: 0;

    border-top: 10px solid transparent;

    border-right: 8px solid var(--white) !important;

    border-bottom: 10px solid transparent;

    border-left: unset !important;

  }

}



@media (max-width: 991px) {

  .banner-lookbook {

    height: 600px;

  }

}



.lookbook-product {

  padding: 16px;

  min-width: 368px;

  display: flex;

  align-items: center;

  background-color: var(--white);

}



.lookbook-product .tag {

  margin-bottom: 4px;

}



.lookbook-product .name-prd {

  margin-bottom: 8px;

}



.lookbook-product .image {

  max-width: 158px;

}



.lookbook-product .image img {

  aspect-ratio: 1;

  object-fit: cover;

}



@media (max-width: 767px) {

  .lookbook-product {

    min-width: max-content;

    gap: 10px;

  }



  .lookbook-product .image {

    max-width: 80px;

  }

}



@media (max-width: 575px) {

  .lookbook-product {

    min-width: 250px;

  }

}



.count-down_v01 .countdown__timer {

  display: flex;

  gap: 15px;

}



.count-down_v01 .countdown__item {

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

}



.count-down_v01 .countdown__value {

  font-weight: 400;

  font-size: clamp(48px, 6vw, 80px);

  line-height: clamp(64px, 8vw, 107px);

  color: var(--black);

}



.count-down_v01 .countdown__label {

  font-weight: 400;

  font-size: 24px;

  line-height: 34px;

  color: var(--black);

}



.count-down_v01 .countdown__custom--element {

  width: 4px;

  position: relative;

}



.count-down_v01 .countdown__custom--css {

  height: 16px;

  display: block;

  position: absolute;

  bottom: 50%;

  transform: translateY(calc(50% - 17px));

}



.count-down_v01 .countdown__custom--css::after,

.count-down_v01 .countdown__custom--css::before {

  content: "";

  position: absolute;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background-color: var(--black);

}



.count-down_v01 .countdown__custom--css::after {

  top: 0;

}



.count-down_v01 .countdown__custom--css::before {

  bottom: 0;

}



@media (min-width: 1200px) {

  .count-down_v01 .countdown__timer {

    gap: 33px;

  }



  .count-down_v01 .countdown__custom--element {

    width: 6px;

  }



  .count-down_v01 .countdown__custom--css {

    height: 22px;

  }



  .count-down_v01 .countdown__custom--css::after,

  .count-down_v01 .countdown__custom--css::before {

    width: 6px;

    height: 6px;

  }

}



@media (max-width: 575px) {

  .count-down_v01 .countdown__timer {

    gap: 8px;

  }

}



.count-down_v02 .countdown__timer {

  display: flex;

  gap: 8px;

}



.count-down_v02 .countdown__item {

  display: flex;

  flex-direction: column;

  text-align: center;

  padding: 8px;

  border-radius: 16px;

  background-color: var(--primary);

  color: var(--white);

  min-width: 64px;

}



.count-down_v02 .countdown__value {

  font-weight: 500;

  font-size: 24px;

  line-height: 32px;

}



.count-down_v02 .countdown__label {

  font-size: 14px;

  line-height: 20px;

}



.count-down_v02.style-2 .countdown__item {

  background-color: var(--bg-4);

}



.count-down_v02.style-2 .countdown__label {

  color: rgba(255, 255, 255, 0.5019607843);

}



@media (max-width: 575px) {

  .count-down_v02.style-2 .countdown__timer {

    gap: 5px;

  }



  .count-down_v02.style-2 .countdown__item {

    min-width: unset;

    padding: 4px;

    border-radius: 8px;

  }



  .count-down_v02.style-2 .countdown__value {

    font-size: 20px;

    line-height: 26px;

  }



  .count-down_v02.style-2 .countdown__label {

    font-size: 12px;

    line-height: 18px;

  }

}



.count-down_v02.style-3 .countdown__item {

  border-radius: 50%;

  background-color: #685BC7;

  min-width: 56px;

}



.count-down_v02.style-3 .countdown__value {

  font-size: 20px;

  line-height: 27px;

  margin-bottom: -7px;

}



.count-down_v02.rounded-0 .countdown__item {

  border-radius: 0px !important;

}



@media (min-width: 1200px) {

  .count-down_v02 .countdown__value {

    margin-bottom: -4px;

  }

}



.banner-cd_v01 {

  display: flex;

  flex-wrap: wrap-reverse;

  position: relative;

}



.banner-cd_v01>* {

  width: 100%;

}



.banner-cd_v01 .banner_content {

  background-color: var(--bg-8);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  padding: 60px 15px;

}



.banner-cd_v01 .banner_img {

  overflow: hidden;

}



.banner-cd_v01 .banner_img img {

  width: 100%;

  height: 100%;

  min-height: 350px;

  object-fit: cover;

  animation: tf-animate-zoom-in-out 30s linear infinite;

}



.banner-cd_v01 .title {

  margin-bottom: 8px;

}



.banner-cd_v01 .count-down_v01,

.banner-cd_v01 .sub-title {

  margin-bottom: 30px;

}



.banner-cd_v01 .img-item {

  position: absolute;

}



.banner-cd_v01 .img-item.item-1 {

  max-width: 496px;

  left: 32px;

}



.banner-cd_v01 .img-item.item-2 {

  max-width: 429px;

  right: 32px;

}



.banner-cd_v01.style-2 {

  background-color: var(--bg-8);

}



.banner-cd_v01.style-2 .banner_content {

  padding-top: 138px;

  padding-bottom: 138px;

  background-color: transparent;

  position: relative;

  z-index: 2;

  width: 100%;

}



.banner-cd_v01.style-3 {

  background: transparent;

  padding: 92px 0px;

  position: relative;

}



.banner-cd_v01.style-3 .banner_content {

  background-color: transparent;

}



.banner-cd_v01.style-3 .banner_img img {

  animation: unset;

}



.banner-cd_v01.style-3 .img-item_bg {

  position: absolute;

  inset: 0;

  display: flex;

}



.banner-cd_v01.style-3 .img-item_bg img {

  width: 100%;

}



.banner-cd_v01.style-3 .img-item_leaves {

  position: absolute;

}



.banner-cd_v01.style-3 .img-item_leaves.item-1 {

  top: -3%;

  left: 26%;

}



.banner-cd_v01.style-3 .img-item_leaves.item-2 {

  bottom: -2%;

  left: 30%;

}



.banner-cd_v01.style-3 .img-item_leaves.item-3 {

  bottom: -7%;

  left: 55%;

}



.banner-cd_v01.style-3 .img-item_leaves.item-4 {

  bottom: 4%;

  right: 18%;

}



.banner-cd_v01.style-3 .img-item_leaves.item-5 {

  top: -6%;

  right: 11%;

}



.banner-cd_v01.style-3 .img-item_leaves {

  position: relative;

}



.banner-cd_v01.style-3 .img-item_leaves.item-1,

.banner-cd_v01.style-3 .img-item_leaves.item-2,

.banner-cd_v01.style-3 .img-item_leaves.item-3,

.banner-cd_v01.style-3 .img-item_leaves.item-4,

.banner-cd_v01.style-3 .img-item_leaves.item-5 {

  position: absolute;

  animation-fill-mode: both;

  animation-timing-function: ease-in-out;

  transform-origin: center center;

}



.banner-cd_v01.style-3 .img-item_leaves.item-1 {

  animation: float1 3s ease-in-out infinite;

}



.banner-cd_v01.style-3 .img-item_leaves.item-2 {

  animation: float2 4s ease-in-out infinite;

}



.banner-cd_v01.style-3 .img-item_leaves.item-3 {

  animation: float3 2.5s ease-in-out infinite;

}



.banner-cd_v01.style-3 .img-item_leaves.item-4 {

  animation: float4 5s ease-in-out infinite;

}



.banner-cd_v01.style-3 .img-item_leaves.item-5 {

  animation: float5 3.5s ease-in-out infinite;

}



.banner-cd_v01.style-3>* {

  width: 100%;

}



@media (min-width: 768px) {

  .banner-cd_v01>* {

    width: 50%;

  }

}



@media (min-width: 1200px) {

  .banner-cd_v01 .img-item {

    top: 50%;

    transform: translateY(-50%);

  }



  .banner-cd_v01 .count-down_v01,

  .banner-cd_v01 .sub-title {

    margin-bottom: 40px;

  }

}



@media (min-width: 1440px) {



  .banner-cd_v01 .count-down_v01,

  .banner-cd_v01 .sub-title {

    margin-bottom: 56px;

  }

}



@media (max-width: 1599px) {

  .banner-cd_v01 .img-item.item-1 {

    max-width: 350px;

    left: 15px;

  }



  .banner-cd_v01 .img-item.item-2 {

    max-width: 350px;

    right: 15px;

  }

}



@media (max-width: 1439px) {



  .banner-cd_v01 .img-item.item-1,

  .banner-cd_v01 .img-item.item-2 {

    max-width: 250px;

  }

}



@media (max-width: 1199px) {

  .banner-cd_v01 .img-item.item-1 {

    max-width: 200px;

    top: 8px;

    left: 8px;

  }



  .banner-cd_v01 .img-item.item-2 {

    max-width: 200px;

    bottom: 8px;

    right: 8px;

  }



  .banner-cd_v01.style-3 .img-item_leaves {

    display: flex;

  }



  .banner-cd_v01.style-3 .img-item_leaves img {

    width: 70%;

  }

}



@media (max-width: 1024px) {

  .banner-cd_v01.style-2 .banner_content {

    padding-top: 80px;

    padding-bottom: 80px;

  }

}



@media (max-width: 767px) {



  .banner-cd_v01 .img-item.item-1,

  .banner-cd_v01 .img-item.item-2 {

    max-width: 120px;

  }



  .banner-cd_v01.style-2 .banner_content {

    padding-top: 60px;

    padding-bottom: 60px;

  }

}



.banner-cd_v02 {

  padding: 23px;

  border: 1px dashed var(--primary);

  border-radius: 12px;

  background-color: var(--bg-10);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px 24px;

  flex-wrap: wrap;

}



.banner-cd_v02 .banner_title {

  display: flex;

  align-items: center;

  gap: 8px;

}



@media (max-width: 575px) {

  .banner-cd_v02 {

    padding: 20px 8px;

  }

}



.gallery-item {

  position: relative;

  overflow: hidden;

  display: flex;

}



.gallery-item .box-icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: var(--white);

  position: absolute;

  z-index: 2;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--black);

  font-size: 16px;

}



.gallery-item .box-icon:hover {

  background-color: var(--black);

  color: var(--white);

}



.gallery-item.style-2 .image img {

  aspect-ratio: 1.0549450549;

}



@media (min-width: 992px) {

  .gallery-item .box-icon {

    opacity: 0;

    visibility: hidden;

  }



  .gallery-item:hover .box-icon {

    opacity: 1;

    visibility: visible;

  }

}



@media (min-width: 1200px) {

  .gallery-item .box-icon {

    width: 56px;

    height: 56px;

    font-size: 24px;

  }

}



.rate_wrap {

  display: flex;

  align-items: center;

  gap: 4px;

  font-size: 14px;

}



.author-verified {

  font-size: 20px;

  color: var(--verified);

}



.widget-collection {

  display: grid;

  gap: 24px;

}



.widget-collection.style-circle .collection_image {

  border-radius: 50%;

}



.widget-collection .collection_image {

  border-radius: 32px;

}



.widget-collection .collection_name {

  text-align: center;

}



.widget-collection .collection_content {

  display: grid;

  text-align: center;

  gap: 4px;

}



.widget-collection .collection_count {

  color: var(--text);

}



.widget-collection.type-space-2 {

  gap: 16px;

}



.widget-collection.style-2 {

  border-radius: 16px;

  overflow: hidden;

  border: 1px dashed #499F30;

  padding: 27px 12px 23px;

}



.widget-collection.style-2 .collection_image {

  max-width: 126px;

  margin: 0 auto;

}



.widget-collection.style-2.type-line_color_2 {

  border-color: #EE7F00;

}



.widget-collection.style-2.type-line_color_3 {

  border-color: #95C532;

}



.widget-collection.style-2.type-line_color_4 {

  border-color: #F44500;

}



.widget-collection.style-2.type-line_color_5 {

  border-color: #FED049;

}



.widget-collection.style-2.type-line_color_6 {

  border-color: #FED049;

}



.nav-shop-by {

  display: flex;

  flex-direction: column;

  border-radius: 16px;

  overflow: hidden;

  background-color: var(--white);

  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.0588235294);

}



.nav-shop-by li:not(:first-child):not(:last-child) {

  border-bottom: 1px solid var(--line);

}



.nav-shop-by li:not(:first-child):not(:last-child) .nav-shop_link {

  padding-bottom: 16px;

}



.nav-shop_link {

  padding: 16px 20px;

  display: flex;

  gap: 16px;

  align-items: center;

}



.nav-shop_link .icon {

  font-size: 22px;

}



.nav-shop_link .icon2 {

  font-size: 14px;

}



.nav-shop_link .text {

  flex: 1;

}



.nav-shop_link.nav-shop_title {

  background-color: var(--bg-4);

  color: var(--white);

}



.s-collection {

  padding: 15px 15px 0px;

}



.s-collection.type-2 {

  padding: 16px 16px 0px;

}



@media (min-width: 1200px) {

  .s-collection {

    padding: 24px 24px 0px;

  }

}



.tab-product_list {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

}



@media (max-width: 575px) {

  .tab-product_list {

    gap: 12px;

  }

}



@media (min-width: 1025px) {

  .sect-lookbook {

    display: flex;

  }



  .sect-lookbook>* {

    width: 50%;

  }

}



.banner-product-set {

  background-color: var(--bg-8);

  padding: 60px 15px;

}



.banner-product-set .banner_content {

  display: flex;

  align-items: start;

  justify-content: center;

  height: 100%;

  flex-direction: column;

}



.banner-product-set .product-badge_item,

.banner-product-set .total-price {

  margin-bottom: 16px;

}



.banner-product-set .list-ver {

  gap: 21px;

  margin-bottom: 32px;

}



.banner-product-set .set_title {

  margin-bottom: 8px;

}



.banner-product-set.style-2 {

  border-radius: 21px;

}



.banner-product-set.style-2 .banner_content {

  margin: 0 auto;

}



.banner-product-set.style-2 .product-badge_item {

  border-radius: 6px;

}



@media (min-width: 1025px) {

  .banner-product-set {

    padding: 60px 30px;

  }

}



@media (min-width: 1200px) {

  .banner-product-set .banner_content {

    max-width: 646px;

    width: 100%;

  }

}



@media (min-width: 1440px) {

  .banner-product-set {

    padding: 60px 72px;

  }

}



@media (max-width: 1024px) {

  .banner-product-set .list-ver {

    display: flex;

    gap: 12px;

  }



  .banner-product-set .list-ver .br-line {

    display: none;

  }

}



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

  .banner-product-set {

    padding: 80px 15px;

  }

}



.box-icon_V01 {

  text-align: center;

  position: relative;

}



.box-icon_V01 .icon {

  font-size: 45px;

  color: var(--black);

  margin-bottom: 24px;

  display: inline-flex;

  transition-duration: 0.5s;

}



.box-icon_V01::after {

  content: "";

  position: absolute;

  right: -48px;

  top: 50%;

  transform: translateY(-50%);

  height: 102px;

  width: 1px;

  background-color: var(--line);

}



.box-icon_V01 .title {

  margin-bottom: 4px;

}



.box-icon_V01:hover .icon {

  transform: scale(1.1);

  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);

}



.box-icon_V01.style-2 {

  padding-top: 32px;

  padding-bottom: 32px;

  background-color: #F9F7F5;

}



.box-icon_V01.style-2::after {

  content: none;

}



@media (min-width: 992px) {

  .box-icon_V01 .icon {

    font-size: 56px;

  }

}



@media (max-width: 1199px) {

  .box-icon_V01::after {

    right: -16px;

  }

}



@media (max-width: 767px) {

  .box-icon_V01::after {

    right: -6px;

  }

}



.s-category {

  padding-left: 12px;

  padding-right: 12px;

}



.tf-marquee {

  display: grid;

  gap: 11px;

  padding-top: 65px;

}



.tf-marquee .marquee-wrap {

  display: flex;

  align-items: center;

  gap: 56px;

}



.tf-marquee .text-display {

  line-height: clamp(58px, 7vw, 87px);

}



.tf-marquee.style-2 {

  margin: 0;

  padding: 24px 0px;

  color: var(--black);

}



.tf-marquee.style-2 .icon {

  font-size: 24px;

}



.tf-marquee.style-3 {

  margin: 0;

  padding: 12px 0px;

}



.tf-marquee.style-4 {

  margin: 0;

  padding: 8px 0px;

}



.tf-marquee.style-5 {

  margin: 0;

  padding: 16px 0px;

}



@media (max-width: 1199px) {

  .tf-marquee .text-display {

    line-height: 120%;

  }

}



@media (max-width: 767px) {

  .tf-marquee {

    padding-top: 60px;

  }

}



.text-clip {

  color: white;

  -webkit-text-stroke: 1px black;

}



.card-collection {

  display: grid;

  gap: 24px;

  margin-top: 60px;

}



.card-collection .name-cls {

  margin-bottom: 4px;

}



.card-collection .count-cls {

  margin-bottom: 24px;

}



@media (min-width: 1200px) {

  .card-collection .collection_contnet {

    padding-left: 24px;

  }

}



@media (max-width: 991px) {

  .s-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    max-height: 400px;

  }

}



.video-wrap {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.video-wrap img {

  object-fit: cover;

  width: 100%;

}



.video-wrap .popup-youtube {

  position: absolute;

  height: 100%;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

  z-index: 2;

}



.tf-variant-dropdown {

  position: relative;

  border-radius: 99px;

  padding: 12px 21px;

  min-width: 100px;

  border: 1px solid var(--line);

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-variant-dropdown .btn-select {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



.tf-variant-dropdown .btn-select .icon {

  font-size: 16px;

}



.tf-variant-dropdown .text-sort-value {

  text-wrap: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 18px;

  line-height: 24px;

  font-weight: 400;

  color: var(--black);

  text-transform: capitalize;

}



.tf-variant-dropdown .dropdown-menu {

  margin: 5px !important;

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);

  min-width: 180px;

  border: 0;

  padding-top: 10px;

  padding-bottom: 10px;

  border-radius: 6px;

  max-height: 68vh;

  isolation: isolate;

  overscroll-behavior-y: contain;

  overflow-y: auto;

}



.tf-variant-dropdown .dropdown-menu::-webkit-scrollbar {

  width: 5px;

}



.tf-variant-dropdown .dropdown-menu::-webkit-scrollbar-track {

  background-color: var(--line);

}



.tf-variant-dropdown .dropdown-menu::-webkit-scrollbar-thumb {

  background: var(--black);

  border-radius: 4px;

}



.tf-variant-dropdown .select-item {

  position: relative;

  font-size: 18px;

  line-height: 24px;

  font-weight: 400;

  text-transform: capitalize;

  color: var(--text);

  padding: 0 20px;

  line-height: 30px;

  width: 100%;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-variant-dropdown .select-item::after {

  height: 100%;

  content: "";

  width: 6px;

  position: absolute;

  z-index: 2;

  left: 3px;

  top: 0;

  background-color: var(--white);

}



.tf-variant-dropdown .select-item::before {

  left: 0;

  width: 3px;

  height: 100%;

  content: "";

  position: absolute;

  z-index: 1;

  top: 0;

  background-color: var(--line);

  border-radius: 0 3px 3px 0;

}



.tf-variant-dropdown .select-item.active {

  background-color: var(--line);

  color: var(--black);

}



.tf-variant-dropdown .select-item.active::before {

  background-color: var(--black);

}



.tf-variant-dropdown .select-item:hover {

  background-color: var(--line);

  color: var(--black);

}



.tf-variant-dropdown:hover {

  border-color: var(--black);

}



.tf-variant-dropdown.full .dropdown-menu {

  width: 100%;

  margin-left: 0 !important;

  margin-right: 0 !important;

}



.tf-variant-dropdown.full .select-item {

  line-height: 40px;

}



.tf-variant-dropdown.has-color .select-item {

  display: flex;

  gap: 6px;

  align-items: center;

}



.tf-variant-dropdown.has-color .box-color {

  width: 15px;

  height: 15px;

  border: 1px solid var(--line);

  display: inline-block;

  border-radius: 50%;

}



.s-banner-tes {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  flex-wrap: wrap-reverse;

}



.s-banner-tes>* {

  width: 100%;

  max-width: 100%;

}



.s-banner-tes .sw-tes {

  display: none;

}



.s-banner-tes .s-image {

  width: 100%;

  margin-left: auto;

}



@media (min-width: 992px) {

  .s-banner-tes {

    gap: 40px;

    flex-wrap: nowrap;

  }



  .s-banner-tes .sw-tes {

    max-width: 400px;

    margin-left: 0;

    margin-top: -196px;

    display: block;

  }



  .s-banner-tes .s-image {

    max-width: 572px;

  }



  .s-banner-tes .col-left {

    width: 50%;

  }



  .s-banner-tes .col-right {

    width: 50%;

  }

}



@media (min-width: 1440px) {

  .s-banner-tes .sw-tes {

    max-width: 508px;

  }



  .s-banner-tes .col-left {

    max-width: 652px;

    width: 100%;

  }



  .s-banner-tes .col-right {

    max-width: 708px;

    width: 100%;

  }

}



.product-thumbs {

  display: flex;

  background-color: var(--white);

}



.product-thumbs .image {

  max-width: 200px;

  width: 100%;

}



.product-thumbs .image img {

  width: 100%;

  object-fit: cover;

}



.product-thumbs .content {

  padding: 20px 15px;

}



@media (min-width: 1200px) {

  .product-thumbs .content {

    padding: 32px;

  }



  .product-thumbs .image {

    max-width: 273px;

  }

}



.s-intro .brand-name {

  font-size: clamp(60px, 16vw, 258px);

  line-height: clamp(86px, 20vw, 310px);

  font-weight: 500;

  color: var(--black);

}



@media (min-width: 992px) {

  .s-intro .box-intro {

    max-width: 712px;

    width: 100%;

  }

}



.box-intro .slogan {

  margin-bottom: 24px;

}



.box-intro.has-mb {

  margin-bottom: 30px;

}



@media (min-width: 1200px) {

  .box-intro.has-mb {

    margin-bottom: 48px;

  }

}



@media (min-width: 1200px) {

  .box-intro .slogan {

    line-height: 34px;

  }

}



.s-about .tf-grid-layout {

  gap: 16px;

}



.s-about .image img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.s-about .wg-curve-text {

  margin-bottom: 30px;

}



.s-about .content-blog {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

  text-align: center;

}



@media (min-width: 1200px) {

  .s-about .item_2 {

    grid-column: 2;

  }



  .s-about .wd-2-cols {

    grid-column: 3/span 2;

  }



  .s-about .content-blog {

    padding-left: 24px;

  }

}



@media (min-width: 1440px) {

  .s-about .wg-curve-text {

    margin-bottom: 48px;

  }

}



.wg-icon-image {

  display: grid;

  gap: 30px;

}



.wg-icon-image .box-icon {

  flex-direction: column;

  text-align: center;

}



.wg-icon-image .icon {

  margin-bottom: 20px;

}



.wg-icon-image .caption {

  margin-bottom: 8px;

}



@media (min-width: 1200px) {

  .wg-icon-image {

    gap: 40px;

  }



  .wg-icon-image .icon {

    margin-bottom: 32px;

  }

}



@media (max-width: 991px) {

  .wg-icon-image .icon svg {

    width: 45px;

    height: 45px;

  }

}



@media (max-width: 767px) {

  .wg-icon-image .image img {

    width: 100%;

    height: 100%;

    max-height: 350px;

    object-fit: cover;

  }

}



.slider-thumb-wrap .slider-content-thumb {

  margin-bottom: 40px;

}



.slider-thumb-wrap .slider-btn-thumbs {

  display: flex;

  justify-content: center;

  gap: 12px;

}



.slider-thumb-wrap .btn-thumbs {

  border-radius: 50%;

  overflow: hidden;

  cursor: pointer;

  max-width: 72px;

  filter: grayscale(100%);

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.slider-thumb-wrap .btn-thumbs.active {

  filter: grayscale(0%);

}



@media (min-width: 1200px) {

  .slider-thumb-wrap .slider-content-thumb {

    margin-bottom: 56px;

  }

}



.s-404 .image,

.s-404 .content {

  margin-bottom: 40px;

}



.s-404 .title {

  margin-bottom: 12px;

}



.s-404 .content {

  text-align: center;

}



.s-404 .wrap {

  max-width: 448px;

  width: 100%;

  margin: auto;

}



.s-404 .group-btn {

  gap: 12px;

}



.s-404 .group-btn>* {

  width: 100%;

}



@media (max-width: 575px) {

  .s-404 .group-btn {

    flex-wrap: wrap;

  }

}



.faq_title {

  margin-bottom: 20px;

  font-weight: normal;

}



.faq-list {

  display: grid;

  gap: 30px;

}



@media (min-width: 1200px) {

  .faq-list {

    gap: 40px;

    max-width: 992px;

  }

}



.faq_wrap .accordion-faq {

  padding-bottom: 22px;

  border-bottom: 1px solid var(--line);

}



.faq_wrap .accordion-faq:not(:last-child) {

  margin-bottom: 22px;

}



.s-our-store .wg-curve-text {

  margin-bottom: 40px;

}



.s-our-store .heading {

  max-width: 696px;

  width: 100%;

  margin: auto;

}



@media (min-width: 1200px) {

  .s-our-store .wg-curve-text {

    margin-bottom: 56px;

  }

}



.store-list .image {

  overflow: hidden;

}



.store-list .image img {

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.store-list .store-item {

  display: flex;

  flex-wrap: wrap;

}



.store-list .store-item>* {

  width: 100%;

}



.store-list .content {

  padding-left: 16px;

  padding-right: 16px;

  padding-top: 60px;

  padding-bottom: 60px;

  display: flex;

  justify-content: center;

  flex-direction: column;

}



@media (min-width: 768px) {

  .store-list .content {

    margin-left: auto;

  }



  .store-list .content.type-right {

    margin-left: unset;

  }



  .store-list .store-item>* {

    width: 50%;

  }

}



@media (min-width: 1200px) {

  .store-list .content {

    max-width: 735px;

  }



  .store-list .content.type-right {

    padding-left: 40px;

  }

}



@media (min-width: 1440px) {

  .store-list .content {

    padding-right: 80px;

  }



  .store-list .content.type-right {

    padding-left: 80px;

    padding-right: 16px;

  }

}



.store-item .name-store {

  margin-bottom: 30px;

}



.store-item .infor-store {

  display: grid;

  gap: 20px;

}



.store-item .caption {

  margin-bottom: 8px;

}



@media (min-width: 1200px) {

  .store-item .name-store {

    margin-bottom: 40px;

  }



  .store-item .infor-store {

    gap: 30px;

  }

}



@media (min-width: 1440px) {

  .store-item .name-store {

    margin-bottom: 56px;

  }



  .store-item .infor-store {

    display: grid;

    gap: 40px;

  }

}



@media (max-width: 767px) {

  .store-item:last-child .content {

    padding-bottom: 0px;

  }

}



.store-contact li {

  display: flex;

  align-items: center;

  gap: 8px;

}



.s-log {

  display: flex;

  justify-content: space-between;

  position: relative;

  gap: 60px 49px;

}



.s-log .heading {

  margin-bottom: 24px;

}



.s-log .text-sub {

  margin-bottom: 12px;

}



.s-log .col-left,

.s-log .col-right {

  width: 100%;

}



.s-log .btn_log {

  max-width: 280px;

  width: 100%;

}



@media (min-width: 768px) {



  .s-log .col-left,

  .s-log .col-right {

    max-width: 620px;

    width: 100%;

  }



  .s-log::after {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    bottom: 0;

    width: 1px;

    height: 100%;

    background-color: var(--line);

  }

}



@media (min-width: 1200px) {

  .s-log .heading {

    margin-bottom: 32px;

  }



  .s-log .text-sub {

    margin-bottom: 24px;

  }

}



@media (max-width: 767px) {

  .s-log {

    flex-wrap: wrap;

  }

}



.sidebar-account {

  display: flex;

  flex-direction: column;

  gap: 32px;

  background-color: var(--bg-2);

  padding: 24px;

}



@media (min-width: 1200px) {

  .sidebar-account {

    padding: 32px;

  }

}



.account-author .author_avatar {

  margin-bottom: 24px;

}



.account-author .author_name {

  margin-bottom: 4px;

}



.author_avatar {

  position: relative;

  display: inline-flex;

}



.author_avatar .image {

  border-radius: 50%;

  overflow: hidden;

  max-width: 168px;

  height: 168px;

}



.author_avatar img {

  height: 100%;

  aspect-ratio: 1;

  object-fit: cover;

}



.btn-change_img {

  background-color: var(--black);

  width: 32px;

  height: 32px;

  border-radius: 50%;

  position: absolute;

  top: 0;

  right: 22px;

  color: var(--white);

}



.btn-change_img .icon {

  font-size: 20px;

}



.my-account-nav_item {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--black);

  padding: 16px;

  font-weight: 500;

}



.my-account-nav_item .icon {

  font-size: 24px;

}



.my-account-nav_item:hover,

.my-account-nav_item.active {

  background-color: var(--white);

}



.my-account-content .account-title {

  margin-bottom: 32px;

}



.acount-order_stats {

  margin-bottom: 30px;

}



.acount-order_stats .order-box {

  border: 1px solid var(--line);

  display: flex;

  align-items: center;

  gap: 24px;

  padding: 25px 20px;

}



.acount-order_stats .order_icon {

  font-size: 48px;

}



.acount-order_stats .order_info {

  padding-left: 25px;

  border-left: 1px solid var(--line);

}



.acount-order_stats .info_label {

  margin-bottom: 4px;

}



@media (min-width: 1200px) {

  .acount-order_stats {

    margin-bottom: 48px;

  }

}



@media (min-width: 1440px) {

  .acount-order_stats .order-box {

    padding: 31px;

  }

}



.account-my_order .wg-pagination {

  margin-top: 32px;

}



.table-my_order thead {

  background-color: var(--bg-2);

}



.table-my_order th {

  color: var(--black);

  font-weight: 600;

}



.table-my_order th:first-child {

  border-left: 1px solid var(--bg-2);

}



.table-my_order th:last-child {

  border-right: 1px solid var(--bg-2);

}



.table-my_order td {

  border-bottom: 1px solid var(--line);

}



.table-my_order td:first-child {

  border-left: 1px solid var(--line);

}



.table-my_order td:last-child {

  border-right: 1px solid var(--line);

}



.table-my_order th,

.table-my_order td {

  font-size: 18px;

  line-height: 24px;

}



.table-my_order th:first-child,

.table-my_order td:first-child {

  width: 155px;

}



.table-my_order th:nth-child(2),

.table-my_order td:nth-child(2) {

  width: 415px;

}



.table-my_order th:last-child,

.table-my_order td:last-child {

  width: 130px;

}



.table-my_order.order_recent th:nth-child(2),

.table-my_order.order_recent td:nth-child(2) {

  width: 458px;

}



.table-my_order.order_recent th:last-child,

.table-my_order.order_recent td:last-child {

  width: unset;

}



@media (min-width: 1440px) {

  .table-my_order {

    table-layout: fixed;

  }

}



@media (min-width: 1440px) {

  .table-my_order td {

    height: 147px;

    vertical-align: middle;

  }

}



@media (max-width: 767px) {



  .table-my_order th:nth-child(2),

  .table-my_order td:nth-child(2) {

    min-width: 300px;

  }

}



.tb-order_product {

  display: flex;

  align-items: center;

  gap: 16px;

}



.tb-order_product .prd_select {

  display: flex;

  gap: 8px;

}



.tb-order_product .prd_name {

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

}



.tb-order_product .img-prd {

  width: 100%;

  max-width: 90px;

  flex-shrink: 0;

  height: 90px;

}



.tb-order_product .img-prd img {

  aspect-ratio: 1;

  height: 100%;

  object-fit: cover;

}



.tb-order_product .infor-prd {

  display: grid;

  gap: 8px;

}



.tb-order_product .prd_select {

  display: flex;

  align-items: center;

  color: var(--text);

}



.tb-order_status {

  /* max-width: 116px; */

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 8px;

  font-weight: 600;

      padding: 8px;

    font-weight: 600;

    font-size: 12px;

}



.tb-order_status.stt-complete {

  background: rgba(44, 129, 83, 0.0509803922);

  color: #2C8153;

}



.tb-order_status.stt-pending {

  background: rgba(232, 183, 70, 0.0509803922);

  color: #E8B746;

}



.tb-order_status.stt-delivery {

  background: rgba(59, 168, 188, 0.0509803922);

  color: #3BA8BC;

}



.tb-order_status.stt-cancel {

  background: rgba(200, 16, 46, 0.0509803922);

  color: #C8102E;

}



.form-change_pass {

  display: grid;

  gap: 40px;

}



.form-change_pass .site-change {

  margin-bottom: 32px;

}



@media (min-width: 1200px) {

  .form-change_pass {

    gap: 48px;

  }

}



.account-order_detail {

  display: flex;

  gap: 32px;

  margin-bottom: 36px;

}



.account-order_detail>* {

  width: 100%;

}



.account-order_detail .detail-content_info {

  display: grid;

  gap: 24px;

}



.account-order_detail .prd_name {

  margin-bottom: 4px;

}



.account-order_detail .info-item_label {

  margin-bottom: 8px;

}



.account-order_detail .info-item_value {

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  color: var(--black);

}



@media (min-width: 1200px) {

  .account-order_detail {

    gap: 48px;

    margin-bottom: 48px;

  }



  .account-order_detail .order-detail_image {

    max-width: 448px;

  }

}



@media (max-width: 575px) {

  .account-order_detail {

    flex-wrap: wrap;

  }



  .account-order_detail .order-detail_image img {

    max-height: 400px;

    width: 100%;

    object-fit: cover;

  }

}



.detail-info_status {

  padding: 8px 24px;

  color: var(--white);

  display: inline-flex;

  width: max-content;

}



.tab-order_detail {

  display: flex;

  border-bottom: 1px solid var(--line);

  margin-bottom: 32px;

  overflow: auto;

  white-space: nowrap;

}



.tab-order_detail .nav-tab-item .tf-btn-tab {

  padding-bottom: 16px;

  padding-right: 16px;

}



.tab-order_detail .nav-tab-item:not(:first-child) .tf-btn-tab {

  padding-left: 16px;

}



.tab-order_detail .tf-btn-tab {

  text-transform: none;

  letter-spacing: 0;

}



.tab-order_detail .tf-btn-tab span {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tab-order_detail .tf-btn-tab::after,

.tab-order_detail .tf-btn-tab::before {

  bottom: 0;

}



.tab-order_detail .tf-btn-tab::after {

  background-color: var(--line);

}



.tab-order_detail .tf-btn-tab.active span {

  font-weight: 600;

}



.order-timeline .timeline-step:not(:last-child) {

  padding-bottom: 40px;

}



.order-timeline .timeline-step:not(:last-child) .timeline_icon {

  margin-bottom: -40px;

}



.timeline-step {

  display: flex;

  gap: 20px;

}



.timeline-step .step-title {

  margin-bottom: 8px;

}



.timeline-step .step-date {

  margin-bottom: 16px;

}



.timeline-step .step-detail:not(:last-child) {

  margin-bottom: 8px;

}



.timeline-step.completed .timeline_icon .icon {

  background-color: #2C8153;

  border-color: #2C8153;

}



.timeline-step.completed .timeline_icon .icon::after {

  content: none;

}



.timeline-step.completed .timeline_icon::after {

  border-color: #2C8153;

}



@media (min-width: 1200px) {

  .timeline-step {

    gap: 40px;

  }

}



.timeline_icon {

  position: relative;

}



.timeline_icon .icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  position: relative;

  z-index: 2;

  background-color: white;

  border: 1px solid var(--line);

}



.timeline_icon .icon::after {

  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  background-color: var(--line);

  border-radius: 50%;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 3;

}



.timeline_icon::after {

  content: "";

  position: absolute;

  left: 50%;

  top: 0;

  bottom: 0;

  width: 1px;

  height: 100%;

  border: 1px dashed var(--line-7);

}



@media (min-width: 1200px) {

  .timeline_icon {

    padding: 0px 7.5px;

  }



  .timeline_icon .icon {

    width: 48px;

    font-size: 24px;

    height: 48px;

  }

}



.order-item_detail .prd-info {

  display: flex;

  align-items: center;

  gap: 16px;

}



.order-item_detail .info_image {

  max-width: 90px;

}



.order-item_detail .info_image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  aspect-ratio: 1;

}



.order-item_detail .info_detail {

  display: grid;

  gap: 2px;

}



.order-item_detail .prd-price {

  display: grid;

  gap: 8px;

}



.order-item_detail .info-price,

.order-item_detail .info-variant,

.order-item_detail .price_total,

.order-item_detail .price_dis,

.order-item_detail .prd-order_total {

  display: flex;

  align-items: center;

  gap: 9px;

}



.order-item_detail .price_total,

.order-item_detail .price_dis,

.order-item_detail .prd-order_total {

  justify-content: space-between;

}



.order-item_detail>*:not(:last-child) {

  padding-bottom: 24px;

  margin-bottom: 24px;

  border-bottom: 1px solid var(--line);

}



@media (min-width: 1200px) {

  .order-item_detail>*:not(:last-child) {

    padding-bottom: 32px;

    margin-bottom: 32px;

    border-bottom: 1px solid var(--line);

  }

}



.order-receiver {

  display: grid;

  gap: 2px;

}



.order-receiver .recerver_text {

  display: flex;

  align-items: center;

  gap: 9px;

}



.order-receiver .text_info {

  font-weight: 600;

  color: var(--black);

}



.account-my_address {

  display: grid;

  gap: 32px;

}



.account-address-item {

  padding: 20px 16px;

  border: 1px solid var(--line);

  display: flex;

  gap: 24px;

  flex-direction: column;

}



.account-address-item .address-item_content {

  display: grid;

  gap: 16px;

}



.account-address-item .address-item_action {

  display: grid;

  gap: 12px;

}



.account-address-item .address-item_action>* {

  width: 100%;

}



.account-address-item .address-info {

  display: grid;

  gap: 8px;

}



@media (min-width: 576px) {

  .account-address-item {

    flex-direction: row;

    align-items: center;

    padding: 24px;

  }



  .account-address-item .address-item_action {

    min-width: 180px;

  }



  .account-address-item .address-item_content {

    gap: 24px;

    flex: 1;

    padding-right: 24px;

    border-right: 1px solid var(--line);

  }

}



.contact-list {

  display: grid;

  gap: 16px;

}



.contact-list li {

  display: flex;

  align-items: center;

  gap: 8px;

}



.contact-list .br-line {

  width: 1px;

  height: 16px;

  background-color: var(--line);

}



@media (max-width: 991px) {

  .grid-photo {

    gap: 12px;

  }

}



.wg-real-image {

  position: relative;

}



.wg-real-image img {

  aspect-ratio: 1;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.wg-real-image .box-icon {

  position: absolute;

  top: 8px;

  right: 8px;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: var(--black);

}



@media (min-width: 1200px) {

  .wg-real-image .box-icon {

    top: 16px;

    right: 16px;

    width: 56px;

    height: 56px;

  }

}



.sect-border {

  border: 1px solid var(--line);

  padding-bottom: 40px;

}



.sect-border .s-head {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: -26px;

  margin-bottom: 40px;

}



.sect-border .s-title {

  display: flex;

  padding: 8px 30px;

  border-radius: 999px;

  border: 1px solid var(--line);

  background-color: var(--white);

}



@media (min-width: 1200px) {

  .sect-border {

    padding-bottom: 48px;

  }



  .sect-border .s-head {

    margin-top: -34px;

    margin-bottom: 63px;

  }



  .sect-border .s-title {

    padding: 12px 48px;

  }

}



.s-banner-header {

  padding-top: 34px;

  padding-bottom: 34px;

}



.s-banner-header .image {

  margin-bottom: 24px;

}



.s-banner-header .bot {

  display: flex;

  align-items: center;

  gap: 30px;

}



.s-banner-header .btn-open_search {

  display: flex;

  align-items: center;

  gap: 12px;

}



.s-banner-header .btn-open_search .icon {

  font-size: 24px;

}



@media (min-width: 992px) {

  .s-banner-header .image {

    margin-bottom: 40px;

  }

}



@media (min-width: 1200px) {

  .s-banner-header {

    padding-top: 63px;

  }



  .s-banner-header .image {

    margin-bottom: 68px;

  }



  .s-banner-header .bot {

    gap: 56px;

    white-space: nowrap;

  }

}



.s-banner-shop .product-info-name {

  margin-bottom: 4px;

}



.s-banner-shop .tf-prduct-desc {

  margin-bottom: 32px;

}



.s-banner-shop .tf-product-variant .variant-picker-label {

  margin-bottom: 24px;

}



.s-banner-shop .variant-color .variant-picker-values {

  gap: 8px;

}



.s-banner-shop .tf-product-info-wrap {

  margin-top: 40px;

}



.tf-lookbook-hover .bundle-pin-item {

  cursor: pointer;

}



.tf-lookbook-hover .bundle-hover-item {

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}



.tf-lookbook-hover .bundle-hover-item.no-hover {

  opacity: 0.3;

}



.wrap-lookbook_hover {

  position: relative;

}



.wrap-lookbook_hover .pst1 {

  position: absolute;

  top: 50%;

  left: 50%;

}



.wrap-lookbook_hover .pst2 {

  position: absolute;

  top: 70%;

  left: 70%;

}



.wg-copy {

  border-radius: 16px;

  padding: 8px;

  background-color: var(--primary);

}



.wg-copy .content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-radius: 16px;

  border: 1px dashed var(--line-9);

  padding: 20px 8px;

  gap: 5px;

}



.wg-copy .btn-coppy-text {

  cursor: pointer;

}



@media (min-width: 1200px) {

  .wg-copy .content {

    padding: 23px 31px;

  }

}



@media (min-width: 992px) {

  .wg-copy .btn-coppy-text {

    padding: 16px 32px;

  }

}



@media (max-width: 575px) {

  .wg-copy .content {

    flex-direction: column;

    justify-content: center;

    align-content: center;

    text-align: center;

    gap: 16px;

  }

}



.has-overlay-50 {

  position: relative;

}



.has-overlay-50::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background-color: rgba(0, 0, 0, 0.5019607843);

}



.has-overlay_left {

  position: relative;

}



.has-overlay_left::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background: linear-gradient(-90deg, rgba(241, 242, 244, 0) 38.38%, #F1F2F4 66.3%);

}



.body-lv-2 {

  padding-bottom: 40px;

}



.body-lv-2>* {

  padding: 32px;

  border-radius: 16px;

  background-color: var(--white);

  max-width: 1504px;

  width: 100%;

  margin: 0 auto;

}



.body-lv-2>* .container {

  padding: 0;

}



.body-lv-2>*:not(:last-child) {

  margin-bottom: 40px;

}



@media (max-width: 1199px) {

  .body-lv-2>* {

    padding: 32px 16px;

  }

}



.body-lv-2 .footer-body {

  margin-top: 56px;

  border-top: 1px solid var(--line);

  padding-top: 57px;

}



.grid-layout-product .item-grid-1 {

  margin-bottom: 24px;

}



@media (min-width: 1200px) {

  .grid-layout-product {

    display: flex;

    justify-content: space-between;

  }



  .grid-layout-product .tf-swiper {

    width: 100%;

  }



  .grid-layout-product .tf-swiper .swiper-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 1;

    display: unset;

    transition-property: unset;

    transition-timing-function: unset;

    box-sizing: unset;

    display: grid;

    gap: 24px;

  }



  .grid-layout-product .tf-swiper .swiper-slide {

    width: 100% !important;

    margin: 0 !important;

  }



  .grid-layout-product .item-grid-1 {

    width: calc(66.388888% - 12px);

    margin-bottom: 0;

  }



  .grid-layout-product .item-grid-2 {

    width: calc(33.61111111% - 12px);

  }

}



.grid-layout-product-2 .item-grid-1 {

  margin-bottom: 4px;

}



@media (min-width: 1200px) {

  .grid-layout-product-2 {

    display: flex;

    gap: 4px;

  }



  .grid-layout-product-2 .item-grid-1 {

    width: calc(30.972222222% - 2px);

    margin-bottom: 0;

  }



  .grid-layout-product-2 .item-grid-1>* {

    height: 100%;

  }



  .grid-layout-product-2 .item-grid-2 {

    width: calc(69.02777777% - 2px);

  }



  .grid-layout-product-2 .item-grid-2>* {

    height: 100%;

  }

}



.banner-card_product {

  display: flex;

  align-items: center;

  gap: 24px;

  background-color: var(--white);

  padding: 16px;

  border-radius: 16px;

  height: 100%;

}



.banner-card_product>* {

  width: calc(50% - 24px);

}



.banner-card_product .product-image {

  border-radius: 16px;

  overflow: hidden;

}



.banner-card_product .product-image img {

  aspect-ratio: 0.8212927757;

}



.banner-card_product.style-column {

  flex-direction: column;

  gap: 24px;

}



.banner-card_product.style-column>* {

  width: 100%;

}



.banner-card_product.style-2 {

  padding: 16px 16px 24px;

  background-color: #FAFAFA;

}



@media (min-width: 1440px) {

  .banner-card_product {

    gap: 48px;

  }



  .banner-card_product .product-content {

    padding-right: 24px;

  }

}



@media (max-width: 767px) {

  .banner-card_product {

    flex-direction: column;

  }



  .banner-card_product>* {

    width: 100%;

  }

}



.product-detail_info_mini {

  display: grid;

  gap: 24px;

}



.product-detail_info_mini .info-cate {

  margin-bottom: 4px;

  display: block;

}



.product-detail_info_mini .info-name {

  margin-bottom: 8px;

}



.product-detail_info_mini .product_count_buy {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--primary);

}



.product-detail_info_mini .product_count_buy .icon {

  font-size: 18px;

}



.product-detail_info_mini .prd-title {

  margin-bottom: 16px;

}



.product-detail_info_mini .product_action {

  display: flex;

  gap: 16px;

}



@media (min-width: 1200px) {

  .product-detail_info_mini .wg-quantity {

    min-width: 140px;

  }

}



@media (max-width: 767px) {

  .product-detail_info_mini .wg-quantity {

    min-width: 140px;

  }

}



@media (max-width: 575px) {

  .product-detail_info_mini .product_action {

    flex-direction: column;

  }

}



.wg-brand {

  display: flex;

  border: 1px solid var(--line);

  position: relative;

}



.wg-brand img {

  width: 100%;

  object-fit: cover;

  aspect-ratio: 1.8181818182;

}



.wg-brand::after {

  position: absolute;

  content: "";

  width: 0%;

  height: 1px;

  top: 0;

  left: 0;

  background-color: var(--black);

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

}



.wg-brand::before {

  position: absolute;

  content: "";

  height: 0%;

  width: 1px;

  bottom: 0;

  left: 0;

  background-color: var(--black);

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

}



.wg-brand .tf-overlay {

  position: absolute;

  inset: 0;

  z-index: -1;

}



.wg-brand .tf-overlay::after {

  position: absolute;

  content: "";

  width: 0%;

  height: 1px;

  right: 0;

  bottom: 0;

  background-color: var(--black);

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

}



.wg-brand .tf-overlay::before {

  position: absolute;

  content: "";

  height: 0%;

  width: 1px;

  right: 0;

  top: 0;

  background-color: var(--black);

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

}



.wg-brand:hover::after {

  width: 100%;

  transition-delay: 0.1s;

}



.wg-brand:hover::before {

  height: 100%;

  transition-delay: 0.4s;

}



.wg-brand:hover .tf-overlay::after {

  width: 100%;

  transition-delay: 0.1s;

}



.wg-brand:hover .tf-overlay::before {

  height: 100%;

  transition-delay: 0.4s;

}



.banner-parallax .card-product {

  margin-left: auto;

  max-width: 496px;

  width: 100%;

}



@media (min-width: 992px) {

  .banner-parallax .card-product {

    padding: 48px;

  }

}



.watch-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: auto auto;

  gap: 12px;

  grid-template-areas: "aa bb bb ee" "aa cc dd ee";

}



.watch-grid .aa {

  grid-area: aa;

}



.watch-grid .bb {

  grid-area: bb;

}



.watch-grid .cc {

  grid-area: cc;

}



.watch-grid .dd {

  grid-area: dd;

}



.watch-grid .ee {

  grid-area: ee;

}



@media (min-width: 1600px) {

  .watch-grid {

    grid-template-columns: 391px 1fr 1fr 391px;

    gap: 24px;

  }

}



@media (max-width: 1199px) {

  .watch-grid {

    grid-template-columns: 1fr 1fr;

    grid-template-areas: "aa ee" "aa ee" "bb bb" "cc dd";

  }



  .watch-grid .box-image_category img {

    max-height: 500px;

  }

}



@media (max-width: 575px) {

  .watch-grid {

    grid-template-columns: 1fr;

    grid-template-areas: "aa" "bb" "cc" "dd" "ee";

  }



  .watch-grid .box-image_category img {

    height: 300px;

  }

}



@media (max-width: 1199px) {

  .watch-grid_2 img {

    max-height: 500px;

  }

}



@media (max-width: 575px) {

  .watch-grid_2 img {

    max-height: 300px;

  }



  .watch-grid_2 .box-image_V02 .box-image_content {

    left: 16px;

    right: 16px;

  }

}



.text-linear {

  background: linear-gradient(90deg, #fdb79e 0%, #fdd1b1 25%, #feeacd 50%, #fdd1b1 75%, #fdb79e 100%);

  background-size: 200% 100%;

  background-position: 200% 0;

  animation: bgMove 3s linear infinite;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  color: transparent;

}



.wg-map {

  padding: 0px 15px;

  margin-bottom: 30px;

}



@media (min-width: 1200px) {

  .wg-map {

    margin-bottom: 70px;

    padding: 0px 30px;

  }

}



.s-contact-us .title,

.s-contact-us .sub-title {

  margin-bottom: 16px;

}



.s-contact-us .store-info-list {

  margin-bottom: 20px;

}



.s-contact-us .left-col {

  margin-bottom: 30px;

}



@media (min-width: 1200px) {



  .s-contact-us .title,

  .s-contact-us .sub-title {

    margin-bottom: 32px;

  }



  .s-contact-us .store-info-list {

    margin-bottom: 39px;

    gap: 16px;

  }

}



@media (min-width: 1025px) {

  .s-contact-us {

    padding-top: 80px;

  }

}



.store-info-list {

  display: grid;

  gap: 8px;

}



.s-contact-information .image {

  width: 100%;

  margin-bottom: 40px;

}



.s-contact-information .image img {

  width: 100%;

  object-fit: cover;

}



.s-contact-information .title {

  margin-bottom: 30px;

}



.s-contact-information .infor-store {

  display: grid;

  gap: 20px;

}



.s-contact-information .caption {

  margin-bottom: 8px;

}



@media (min-width: 1200px) {

  .s-contact-information .title {

    margin-bottom: 40px;

  }



  .s-contact-information .infor-store {

    gap: 30px;

  }

}



@media (min-width: 1440px) {

  .s-contact-information .title {

    margin-bottom: 56px;

  }



  .s-contact-information .infor-store {

    display: grid;

    gap: 40px;

  }

}



@media (max-width: 767px) {

  .s-contact-information:last-child .content {

    padding-bottom: 0px;

  }

}



.s-map {

  height: 700px;

}



@media (max-width: 1199px) {

  .s-map {

    height: 450px;

  }

}



/*-------------- RTL ----------------- */

/* ---------------------------------------------------------

    * Name: Ochaka - Multipurpose eCommerce HTML Template

    * Version: 1.0.2

    * Author: Themesflat

    * Author URI: http://themesflat.com 



	* Abstracts variable



    * Reset css styles



    * Components



        * header

        * footer

        * accordion

        * animation

        * blog

        * box icon

        * button

        * carousel

        * avatar

        * form

        * hover

        * nice select

        * popup

        * product

        * shop

        * slider

        * testimonial

        * zoom



    * Section

 ------------------------------------------------------------------------------ */

/*--------- Abstracts variable ---------- */

.toggle-rtl {

  padding: 0;

  position: fixed;

  top: 50%;

  right: 15px;

  width: 40px;

  height: 40px;

  min-width: 30px;

  text-transform: uppercase;

  z-index: 999;

  font-size: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 3px;

}



.rtl {

  /* START -- RTL EDIT CSS BOOSTRAP */

  /* END -- RTL EDIT CSS BOOSTRAP */

  /* Responsive */

}



.rtl .toggle-rtl {

  left: 15px;

  right: auto;

}



.rtl .modal.fullRight .modal-dialog {

  transform: translate(-100%, 0) !important;

  transition: all 0.3s !important;

}



.rtl .modal.fullRight .modal-dialog .modal-content {

  left: 0;

  right: unset;

}



.rtl .modal.fullRight.show .modal-dialog {

  transform: translate(0, 0) !important;

}



.rtl .offcanvas.offcanvas-end {

  left: 0;

  right: unset;

  transform: translateX(-100%);

}



.rtl .offcanvas.offcanvas-start {

  right: 0;

  left: unset;

  transform: translateX(100%);

}



.rtl .offcanvas.show:not(.hiding),

.rtl .offcanvas.showing {

  transform: none;

}



.rtl .offcanvas.hiding,

.rtl .offcanvas.show,

.rtl .offcanvas.showing {

  visibility: visible;

}



.rtl .ms-auto {

  margin-left: unset !important;

  margin-right: auto;

}



@media (min-width: 576px) {

  .rtl .ms-sm-auto {

    margin-left: unset !important;

    margin-right: auto;

  }



  .rtl .offset-sm-1 {

    margin-left: unset;

    margin-right: 8.33333333%;

  }

}



@media (min-width: 992px) {

  .rtl .offset-lg-2 {

    margin-left: unset;

    margin-right: 16.66666667%;

  }

}



@media (min-width: 768px) {

  .rtl .offset-md-2 {

    margin-left: unset;

    margin-right: 16.66666667%;

  }

}



.rtl .tf-marquee {

  direction: ltr;

}



.rtl .tf-slideshow .slider-wrap,

.rtl .tf-slideshow-2 .slider-wrap {

  direction: rtl;

}



.rtl .tf-slideshow .sld_image,

.rtl .tf-slideshow-2 .sld_image {

  transform: rotateY(180deg);

}



.rtl .card-product {

  direction: rtl;

}



.rtl .marquee-wrapper {

  animation: infiniteScrollRight 7s linear infinite;

}



.rtl .product-badge_list {

  right: 8px;

  left: auto;

}



.rtl .product-action_list {

  left: 8px;

  right: auto;

}



.rtl .product-action_list.style-row {

  top: 0;

  left: auto;

}



@media (min-width: 1200px) {

  .rtl .product-action_list {

    left: 16px;

  }



  .rtl .product-action_list li {

    transform: translateX(-20px);

  }

}



.rtl .product-action_list .hover-tooltip.tooltip-left .tooltip {

  right: auto;

  left: 100%;

  bottom: auto;

  transform: translateX(0px);

}



.rtl .product-action_list .hover-tooltip.tooltip-left .tooltip::before {

  top: 50%;

  right: auto;

  transform: translateY(-50%) rotate(45deg);

  left: -4px;

}



.rtl .product-action_list .hover-tooltip.tooltip-left:hover .tooltip {

  transform: translateX(8px);

}



.rtl .testimonial-V01,

.rtl .testimonial-V02,

.rtl .testimonial-V03,

.rtl .product-thumbs,

.rtl .testimonial-V04 {

  direction: rtl;

}



.rtl .article-blog {

  direction: rtl;

}



.rtl .article-blog .entry_tag {

  left: auto;

  right: 10px;

}



@media (min-width: 1200px) {

  .rtl .article-blog {

    right: 16px;

    left: auto;

  }

}



.rtl .article-blog.type-space-2 .entry_tag {

  right: 0;

}



.rtl .form-search.style-2 button {

  right: auto;

  left: 24px;

}



.rtl .box-image_V02 .box-image_image {

  transform: rotateY(180deg);

}



.rtl .box-image_V02 .box-image_content {

  left: auto;

  right: 30px;

}



@media (min-width: 1200px) {

  .rtl .box-image_V02 .box-image_content {

    left: auto;

    right: 48px;

  }

}



.rtl .box-image_V05 .box-image_image {

  transform: rotateY(180deg);

}



.rtl .box-image_V05 .box-image_content {

  left: auto;

  right: 32px;

}



.rtl .banner-lookbook .lookbook-product .content {

  text-align: start;

}



.rtl .tf-select::after {

  left: 24px;

  right: auto;

}



.rtl .tf-dropdown-select.style-default>.dropdown-toggle {

  padding-right: 0;

  padding-left: 22px;

}



.rtl .tf-dropdown-select.style-default>.dropdown-toggle::after {

  right: auto;

  left: 0;

}



.rtl .canvas-mb .icon-close-popup {

  left: 0;

  right: auto;

}



.rtl .form_search-product .btn-submit {

  border-radius: 999px 0px 0px 999px;

  right: auto;

  left: -1px;

}



.rtl .box-nav-category {

  left: auto;

  right: 0;

}



@media (min-width: 1440px) {

  .rtl .box-nav-category {

    left: auto;

    right: -25px;

  }

}



.rtl .box-image_V05.type-space-2 .box-image_content {

  direction: rtl;

}



.rtl .btn-sidebar-mb {

  left: auto;

  right: 0;

}



.rtl .banner-V03 .banner_img img {

  transform: rotateY(180deg);

}



.rtl .box-image_V02 .box-image_content {

  left: auto;

  right: 30px;

  direction: rtl;

}



.rtl .form_search-product .btn-submit-2 {

  right: unset;

  left: 4px;

}



.rtl .box-image_V06 .box-image_image {

  transform: rotateY(180deg);

}



.rtl .box-image_V06 .box-image_content {

  left: auto;

  right: 16px;

  direction: rtl;

}



.rtl .product-badge_item.flash-sale {

  direction: rtl;

}



.rtl .box-image_V06.has-overlay::after {

  transform: rotateY(180deg);

}



.rtl .product-countdown .countdown__timer {

  direction: ltr;

}



.rtl .box-image_V01.type-3 .box-image_image {

  transform: rotateY(180deg);

}



.rtl .box-image_V01.type-3 .box-image_content {

  left: auto;

  right: 16px;

}



.rtl .widget-price .price-box {

  direction: ltr;

}



.rtl .box-nav-category.type-2 {

  left: auto;

  right: 0;

}



.rtl .slider-wrap.has-overlay::after {

  background: linear-gradient(90deg, rgba(41, 27, 27, 0) 32.95%, #291B1B 80.78%);

}



.rtl .tf-btn-swiper-main.pst-5 .band-swiper {

  left: 24px;

  right: auto;

}



.rtl .sb-banner .content {

  right: 24px;

  left: auto;

}



.rtl .noUi-horizontal .noUi-handle {

  right: -8px;

  left: auto;

}



.rtl .product-size_list .size-item:not(:last-child) {

  padding-right: unset;

  border-right: unset;

  padding-left: 12px;

  border-left: 1px solid var(--line);

}



.rtl .s-page-title.style-2 .content {

  text-align: right;

}



.rtl .tf-zoom-main .drift-zoom-pane img {

  left: 0;

}



.rtl .volume-discount-thumbnail-item .tags-save {

  right: 0;

  left: auto;

}



.rtl .widget-size .tow-bar-block .progress-size {

  right: 0;

  left: auto;

}



.rtl .modal-heading .icon-close-popup {

  left: 0;

  right: unset;

}



.rtl .modal-share .btn-coppy-text {

  left: 5px;

  right: auto;

}



.rtl .flat-animate-tab .menu-tab-3 {

  border-left: unset;

  border-right: 1px solid var(--line);

}



.rtl .flat-animate-tab .menu-tab-3 .tab-link {

  padding: 16px 21px 16px 0px;

}



.rtl .flat-animate-tab .menu-tab-3 .tab-link::before {

  right: -1px;

  left: auto;

}



.rtl .page-title-image .page_image {

  transform: rotateY(180deg);

}



.rtl form.style-btn-abs-end .btn-submit {

  left: 24px;

  right: auto;

}



.rtl form.style-btn-abs-end input {

  padding-left: 48px;

  padding-right: 24px;

}



.rtl .acount-order_stats .order-box {

  direction: rtl;

}



.rtl .acount-order_stats .order_info {

  padding-left: unset;

  border-left: unset;

  padding-right: 25px;

  border-right: 1px solid var(--line);

}



.rtl .table-my_order td:first-child {

  border-left: unset;

  border-right: 1px solid var(--line);

}



.rtl .table-my_order td:last-child {

  border-left: 1px solid var(--line);

  border-right: unset;

}



.rtl .password-wrapper .toggle-pass {

  left: 16px;

  right: auto;

}



.rtl .page-title-blog .bg-image {

  transform: rotateY(180deg);

}



.rtl .page-title-blog .bg-image .parallaxie {

  background-position: center !important;

}



.rtl .modal-newletter .icon-close-popup {

  left: 8px;

}



.rtl .sub-nav-menu {

  padding-left: 0;

  margin-left: 0;

  border-left: 0;

  padding-right: 16px;

  margin-right: 16px;

  border-right: 1px solid var(--line);

}



.rtl .group-btn-slider {

  direction: ltr;

}



.rtl #sib-form .entry__choice label {

  text-align: start;

}



.rtl .s-banner-header .btn-open_search {

  direction: ltr;

}



@media (min-width: 576px) {

  .rtl .account-address-item .address-item_content {

    padding-right: 0;

    border-right: unset;

    padding-left: 24px;

    border-left: 1px solid var(--line);

  }

}



@media (min-width: 768px) {

  .rtl .store-list .content.type-right {

    margin-right: unset;

  }



  .rtl .store-list .content {

    margin-right: auto;

    margin-left: unset;

  }

}



@media (min-width: 1200px) {

  .rtl .product-action_list.style-row li {

    transform: translateY(-16px);

  }



  .rtl .box-image_V02.type-space-5 .box-image_content {

    left: auto;

    right: 32px;

  }



  .rtl .box-image_V02 .box-image_content {

    left: auto;

    right: 48px;

  }



  .rtl .box-image_V06 .box-image_content {

    left: auto;

    right: 24px;

  }



  .rtl .box-image_V01.type-3 .box-image_content {

    left: auto;

    right: 32px;

  }



  .rtl .s-about .content-blog {

    padding-left: 0;

    padding-right: 24px;

  }



  .rtl .s-about .content-blog .box-intro {

    text-align: start;

  }



  .rtl .store-list .content.type-right {

    padding-left: unset;

    padding-right: 40px;

  }

}



@media (min-width: 1440px) {

  .rtl .store-list .content.type-right {

    padding-right: 80px;

    padding-left: 16px;

  }



  .rtl .banner-card_product .product-content {

    padding-left: 24px;

    padding-right: 0;

  }

}



@media (min-width: 1600px) {

  .rtl .tf-header.style-5 .header-right {

    margin-left: 0;

    margin-right: -48px;

  }



  .rtl .slideshow-container.width-2 {

    margin-left: unset;

    margin-right: auto;

  }



  .rtl .slideshow-container.width-3 {

    margin-left: unset;

    margin-right: auto;

  }

}



@media (max-width: 1199px) {

  .rtl .box-image_V01.type-3::after {

    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 24.38%, #FFFfff 69.3%);

  }

}



@media (max-width: 575px) {

  .rtl .footer-heading-mobile {

    padding-right: 0px;

    padding-left: 20px;

  }



  .rtl .footer-heading-mobile::after {

    right: auto;

    left: 0;

  }



  .rtl .footer-heading-mobile::before {

    right: auto;

    left: 7px;

  }

}



#raffle {

  padding-top: 15px;

  padding-bottom: 15px;

}



#raffle ul {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 5px;

}





#raffle ul li {

  background-color: #000;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 35px;

  border-radius: 5px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

}



#raffle ul li.active {

  background-color: var(--primary);

}



#raffle ul li.disabled {

  background-color: #ccc;

  color: #666;

  text-decoration: line-through;

  cursor: not-allowed;

  opacity: 0.6;

}



#ranking .list {

  margin-top: 50PX;

  display: flex;

  flex-direction: column;

  gap: 20px;

  padding: 20px;

  background-color: #f5f5f5;

  /* 背景色讓卡片跳出來 */

}



#ranking .list .item {

  background-color: #fff;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* 更柔和的陰影 */

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  align-items: center;

  padding: 15px;

  /* 給予內部一點呼吸空間 */

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  position: relative;

  /* 為了定位 Medal */

  justify-content: space-between;

}



#ranking .list .item:hover {

  transform: translateY(-3px);

  /* 滑鼠移過去微微浮起 */

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



/* --- 各個區塊設定 --- */



/* 1. 獎牌 (固定寬度) */

#ranking .list .item .medal {

  width: 60px;

  flex-shrink: 0;

  display: flex;

  justify-content: center;

}



#ranking .list .item .medal img {

  width: 100%;

  max-width: 48px;

}



/* 2. 圖片 (固定寬度，但在手機版會變) */

#ranking .list .item .pic {

  width: 120px;

  /* 縮小一點預設寬度，太寬會佔據太多資訊版面 */

  height: 120px;

  flex-shrink: 0;

  margin: 0 20px;

  border-radius: 12px;

  overflow: hidden;

  background-color: #eee;

}



#ranking .list .item .pic img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* 確保圖片填滿且不變形 */

}



/* 3. 中間內容區塊 (使用 flex: 1 自動填滿剩餘空間) */

#ranking .list .item .content-group {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 8px;

  min-width: 0;

  /* 防止文字過長爆版 */

  padding-right: 20px;

}



#ranking .list .item .product_name {

  font-size: 20px;

  /* 標題大一點 */

  font-weight: 700;

  color: #333;

  /* 文字過長省略號 */

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



#ranking .list .item .info-row {

  display: flex;

  align-items: center;

  gap: 15px;

  color: #666;

  font-size: 14px;

}



#ranking .list .item .name {

  font-weight: 600;

  font-size: 24px;

  color: #000;

  display: flex;

  align-items: center;

  padding-top: 15px;

  padding-bottom: 15px;

}



/* 加個小圖示或裝飾讓名字更明顯 */

#ranking .list .item .name::before {

  content: '@';

  color: #999;

  margin-right: 2px;

}



#ranking .list .item .time {

  font-size: 12px;

  color: #999;

  line-height: 1.2;

}



/* 4. 按鈕 */

#ranking .list .item .btn {

  width: 140px;

  flex-shrink: 0;

}



#ranking .list .item .btn a {

  display: block;

  width: 100%;

  text-align: center;

  padding: 12px 0;

  border-radius: 50px;

  /* 圓角按鈕更現代 */

  /* background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); */

  /* 範例漸層 */

  background-color: #ff6b6b;

  /* fallback */

  color: #fff;

  /* 白字 */

  font-weight: 700;

  text-decoration: none;

  border: none;

  box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);

  transition: all 0.2s ease;

}



#ranking .list .item .btn a:hover {

  background: linear-gradient(135deg, #ff7a7e 0%, #fec0ef 100%);

  transform: scale(1.05);

  box-shadow: 0 6px 15px rgba(255, 107, 107, 0.4);

}



/* --- 手機版 RWD (斷點設在 768px) --- */

@media (max-width: 768px) {

  #ranking .list .item {

    flex-direction: column;

    /* 改為垂直排列 */

    padding: 0;

    /* 手機版通常圖片要滿版，先歸零 padding */

    padding-bottom: 20px;

  }



  /* 1. 獎牌改為左上角標籤 */

  #ranking .list .item .medal {

    position: absolute;

    top: -2px;

    left: 10px;

    z-index: 2;

    width: 40px;

    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));

  }



  /* 2. 圖片變為滿版大圖 */

  #ranking .list .item .pic {

    width: 100%;

    height: 200px;

    /* 固定高度 */

    margin: 0;

    border-radius: 0;

    /* 移除圓角 */

  }



  /* 3. 內容區塊調整 */

  #ranking .list .item .content-group {

    width: 100%;

    padding: 15px 20px 0 20px;

    align-items: flex-start;

    /* 靠左對齊 */

  }



  #ranking .list .item .product_name {

    white-space: normal;

    /* 手機版允許換行 */

    font-size: 18px;

    margin-top: 15px;

    margin-bottom: 15px;

  }



  #ranking .list .item .info-row {

    width: 100%;

    justify-content: space-between;

    /* 名字和時間左右分開 */

    margin-bottom: 15px;

  }



  /* 4. 按鈕全寬 */

  #ranking .list .item .btn {

    width: 100%;

    padding: 0 20px;

    box-sizing: border-box;

    margin-bottom: 15px;

  }

}



#ranking .top_three .title h3 {

  margin-bottom: 15px;

}



#ranking .top_three .title p {

  margin-bottom: 50px;

}



#ranking .top_three ul {

  display: flex;

  align-items: end;

  gap: 30px;

  justify-content: center;

}



#ranking .top_three ul li {

  border: 2px solid #000;

  border-radius: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 174px;

  font-weight: 900;

  position: relative;

  width: 275px;

}



#ranking .top_three ul li .medal {

  position: absolute;

  top: -7.5px;

  left: 0;

  z-index: 1;

  width: 64px;

}



#ranking .top_three ul li .name {

  font-size: 20px;

  position: absolute;

  left: 0;

  right: 0;

  margin: auto;

  text-align: right;

  bottom: 5px;

  color: #000;

  padding-right: 5px;

}



#ranking .top_three ul li .name span {

  background-color: #000;

  border-radius: 10px;

  color: #fff;

  display: inline-block;

  padding: 5px 10px;

  font-size: 24px;

}



#ranking .top_three ul li:nth-child(1) {

  height: 200px;

  color: silver;

}



#ranking .top_three ul li:nth-child(2) {

  height: 225px;

  color: gold;

}





#ranking .top_three ul li:nth-child(3) {

  height: 150px;

  color: #cd7f32;

}



.product_type_m {

  display: none;

  padding: 5px 10px;

  gap: 15px;

  justify-content: center;

  position: relative;

}



.product_type_m li a {

  color: #C8102E;

  font-size: 14px;

  font-weight: 600;

}





.product_type_m li.drop-down .type::after {

  content: '+';

  display: inline-block;

  margin-left: 5px;

  font-weight: 900;

}



.product_type_m li.drop-down.active .type::after {

  content: '-';

}



.product_type_m li.drop-down .drop-down-content {

  overflow-x: hidden;

  overflow-y: auto;

  padding: 0 15px;

  height: 0;

  width: 100dvw;

  position: absolute;

  top: calc(100% - 1px);

  left: 0;

  right: 0;

  background-color: #fff;

  z-index: 10;

  border-top: 1px solid #ccc;

  transition: 0.3s;

}



.product_type_m li.drop-down.active .drop-down-content {

  height: calc(100dvh - 119px);

  padding: 15px;

}



.product_type_m li.drop-down .drop-down-content a {

  margin: 4px 1px !important;

  height: 24px;

  line-height: 27px;

  width: 24%;

  border-radius: 100px;

  min-width: 80px;

  text-align: center;

  background: #ccc;

  color: #000;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-top {

  border-bottom: 1px solid #ccc;

  padding-bottom: 10px;

  margin-bottom: 15px;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-mid {

  border-bottom: 1px solid #ccc;

  padding-bottom: 10px;

  margin-bottom: 15px;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-top a {

  background: #ffeebc;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-top a:hover {

  background: #ffa800;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-mid a {

  background: #fde3d5;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-mid a:hover {

  background: #ff7a19;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-bottom a {

  background: #fbe0e9;

}



.product_type_m li.drop-down .drop-down-content .drop-down-content-bottom a:hover {

  background: #ff588f;

}



@media (max-width: 768px) {

  .product_type_m {

    display: flex;

  }



  #ranking .top_three ul {

    gap: 5px;

  }



  #ranking .top_three ul li {

    font-size: 64px;

  }



  #ranking .top_three ul li .medal {

    width: 48px;

    top: -5px;

  }



  #ranking .top_three ul li:nth-child(1) {

    height: 125px;

  }



  #ranking .top_three ul li:nth-child(2) {

    height: 150px;

  }





  #ranking .top_three ul li:nth-child(3) {

    height: 100px;

  }



  #ranking .top_three ul li .name {

    font-size: 12px;

    bottom: 5px;

    padding-right: 5px;

  }



  #ranking .top_three ul li .name span {

    border-radius: 5px;

    padding: 2.5px 5px;

    font-size: 12px;

  }

}



@media (min-width: 767px) {

  #raffle ul {

    grid-template-columns: repeat(10, 1fr);

  }



  #raffle ul li {

    font-size: 24px;

  }

}



@media (min-width: 1200px) {



  .sub-menu {

    width: 100dvw;

    box-sizing: border-box;

    left: 0;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    padding-top: 30px;

    padding-bottom: 30px;

    gap: 15px;

    max-width: 1199px;

    left: 0;

    right: 0;

    margin: auto;

  }



  .sub-menu_link {

    justify-content: center;

  }

}



.queue {

  background-color: #f9edd5;

  width: 100%;

  height: 50px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 5px;

}



.myProductSwiper .swiper-button-next,

.myProductSwiper .swiper-button-prev {

  color: #fff;

}



body {

  scrollbar-gutter: stable;

}



#animation_video {

  background-color: rgba(0, 0, 0, 0.9);

  position: fixed;

  z-index: 999999;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transform: 0.6s;

  opacity: 0;

  pointer-events: none;

}



#animation_video.active {

  opacity: 1;

  pointer-events: auto;

}



#animation_video video {

  width: 100%;

  height: auto;

  /* aspect-ratio: 21/9; */

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}







/* 容器卡片 */

#checkout-success.checkout-card {

  background: var(--bg-card);

  max-width: 480px;

  margin: 2rem auto;

  padding: 2.5rem;

  border-radius: 16px;

  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  text-align: center;

  font-family: 'Inter', system-ui, -apple-system, sans-serif;

  color: var(--text-main);

}



/* 成功圖示與標題 */

#checkout-success .icon-circle {

  width: 64px;

  height: 64px;

  background-color: #d1fae5;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1.5rem;

}



#checkout-success .check-icon {

  width: 32px;

  height: 32px;

  color: var(--success-color);

}



#checkout-success .title {

  margin: 0;

  font-size: 1.75rem;

  font-weight: 700;

  color: var(--text-main);

}



#checkout-success .subtitle {

  margin: 0.5rem 0 2rem;

  color: var(--text-sub);

  font-size: 0.95rem;

}



/* 按鈕共用樣式 */

#checkout-success .btn {

  width: 100%;

  padding: 0.75rem 1.5rem;

  border-radius: 8px;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  border: none;

  outline: none;

}



#checkout-success .btn:active {

  transform: scale(0.98);

}



#checkout-success .btn-secondary {

  background-color: transparent;

  color: var(--text-sub);

  border: 1px solid #e5e7eb;

  margin-bottom: 1.5rem;

}



#checkout-success .btn-secondary:hover {

  border-color: #9ca3af;

  color: var(--text-main);

}





/* --- 抽獎區塊 --- */

#checkout-success .lottery-section {

  margin-top: 1rem;

  padding: 2px;

  /* 用於製作漸層邊框的效果(選用) */

  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);

  border-radius: 12px;

  position: relative;

  animation: fadeUp 0.5s ease-out;

}



#checkout-success .lottery-content {

  background: #ffffff;

  border-radius: 10px;

  /* 比外層少一點 */

  padding: 1.5rem;

  position: relative;

  overflow: hidden;

}



/* 裝飾標籤 */

#checkout-success .lottery-tag {

  position: absolute;

  top: 0;

  right: 0;

  background: #f59e0b;

  color: white;

  font-size: 0.75rem;

  font-weight: bold;

  padding: 4px 12px;

  border-bottom-left-radius: 8px;

}



#checkout-success .lottery-content h3 {

  margin: 0.5rem 0 1.25rem;

  color: #b45309;

  font-size: 1.25rem;

}



/* 自定義 Checkbox 樣式 */

#checkout-success .checkbox-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 1rem;

  font-size: 0.9rem;

  color: var(--text-sub);

  cursor: pointer;

  user-select: none;

}



#checkout-success .checkbox-wrapper input {

  accent-color: var(--primary-color);

  width: 16px;

  height: 16px;

  cursor: pointer;

}



/* 抽獎按鈕 */

#checkout-success .btn-primary.btn-lottery {

  background: linear-gradient(to right, #f59e0b, #d97706);

  color: white;

  box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.4);

}



#checkout-success .btn-primary.btn-lottery:hover {

  box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.5);

  transform: translateY(-1px);

}



/* 簡單動畫 */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



#login-panel {

  display: flex;

  flex-direction: column;

  width: 100%;

  align-items: stretch;

  gap: 15px;

}



#login-panel .heading {

  margin: 0 0 10px 0;

  font-size: 40px;

  font-weight: normal;

  text-align: left;

}



#login-panel .text-sub {

  margin: 0 0 25px 0;

  color: #666;

  font-size: 16px;

  line-height: 1.5;

  text-align: left;

}



#login-panel .btn_log,

#login-panel .btn-social {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100% !important;

  padding: 15px 0;

  border-radius: 50px;

  text-decoration: none;

  font-size: 16px;

  font-weight: bold;

  box-sizing: border-box;

  cursor: pointer;

  transition: all 0.3s ease;

  max-width: 100%;

}



#login-panel .btn_log {

  background-color: #000;

  color: #fff;

  border: 1px solid #000;

  margin: 0;

}



#login-panel .btn_log:hover {

  background-color: #333;

  border-color: #333;

}



#login-panel .btn-line {

  background-color: #06C755;

  color: #fff;

  border: 1px solid #06C755;

}



#login-panel .btn-line:hover {

  background-color: #05b34c;

  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);

}



#login-panel .btn-google {

  background-color: #fff;

  color: #333;

  border: 1px solid #dadce0;

}



#login-panel .btn-google:hover {

  background-color: #f8f9fa;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



/* 設定基本字體與排版 */

#ichiban-kuji-container {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  width: 100%;

  background: #fff;

}



#ichiban-kuji-container .modal-content {

  border: none;

  border-radius: 4px;

  overflow: hidden;

  /* 確保圓角不被背景色蓋住 */

  display: flex;

  flex-direction: column;

}



/* 通用欄位設定 (Flexbox) */

#ichiban-kuji-container .kuji-header,

#ichiban-kuji-container .kuji-row,

#ichiban-kuji-container .kuji-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 15px;

  font-size: 15px;

}



/* 左側獎項名稱欄位 */

#ichiban-kuji-container .col-prize {

  flex: 1;

  text-align: left;

  font-weight: 500;

}



/* 右側數量欄位 */

#ichiban-kuji-container .col-count {

  width: 120px;

  /* 固定寬度讓數字對齊 */

  text-align: right;

  font-weight: 500;

}



/* --- 頭部樣式 (紅色背景) --- */

#ichiban-kuji-container .kuji-header {

  background-color: var(--primary);

  /* 一番賞紅 */

  color: white;

  font-weight: bold;

  border-top-left-radius: 4px;

  border-top-right-radius: 4px;

}



/* --- 列表樣式 --- */

#ichiban-kuji-container .kuji-row {

  background-color: #ffffff;

  color: #333;

  border-bottom: 1px solid #eee;

  /* 選用：增加分隔線 */

}



/* 斑馬紋效果：偶數行給予淺灰色背景 */

#ichiban-kuji-container .kuji-row:nth-child(even) {

  background-color: #f7f7f7;

}



/* --- 售完樣式 (sold-out) --- */

#ichiban-kuji-container .sold-out {

  color: #ccc;

  /* 灰色文字 */

  text-decoration: line-through;

  /* 刪除線 */

}



#ichiban-kuji-container .sold-out .col-prize,

#ichiban-kuji-container .sold-out .col-count {

  color: #bfbfbf;

}



/* --- 底部樣式 (粉色背景) --- */

#ichiban-kuji-container .kuji-footer {

  background-color: rgba(243, 112, 33,0.4);

  /* 淺粉紅 */

  color: #fff;

  font-weight: bold;

  font-size: 16px;

  border-top: 2px solid #eabec5;

}



.price-new.h6 {

  color: #e34f06;

}



@media (max-width: 1199px) {

  .tf-header {

    background-color: #fff;

    top: 0;

  }

}



#user {

  position: relative;

}



#user .name {

  max-width: 48px;

  /* height: 14px; */

  display: block;

  background: var(--primary);

  /* position: absolute;

  bottom: -12px;

  right: -12px; */

  font-weight: 700;

  font-size: 14px;

  line-height: 16px;

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2.5px 5px;

  border-radius: 5px;

  margin-right: 2.5px;

}



#user{

  /* background: var(--primary); */

  display: flex;

  align-items: center;

  padding: 2.5px 5px;

}



#user .icon{

  /* color: #fff; */

}





.bg-black {

  background-color: #174f80 !important;

}



footer a,

footer .h6 {

  color: #fff !important;

}







@media (min-width: 1200px) {

  .container.max-1280 {

    max-width: 1280px;

  }

}