@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,500;1,400;1,500&family=Roboto:ital,wght@0,100;0,400;0,500;1,400&display=swap');

:root, :root[theme='light'] {
  --bg-color: #ffffff;

  /* Theme */
  --primary-color: #ff6600;
  --primary-dark: #cc5200;
  --primary-light: #ff944d;

  /* Text Colors */
  --primary-text: #333e48;
  --secondary-text: #868e8e;

  /* General Colors */
  --white: #ffffff;
  --black: #000000;
  --light: #f0f0f0;
  --gray: #d2d6de;
  --dark: #222222;
  --red: #dd4b39;
  --yellow: #fed700;
  --aqua: #00c0ef;
  --green: #00a65a;
  --lime: #01ff70;
  --maroon: #d81b60;
  --pink: #e75b8d;

  /* Blue and Rose theme */
  --blue: #663ee6;
  --rose: #fb5185;

  /* Fonts */
  --primary-font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --font-size: 14px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 21px;

  /* Theme Styling */
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  --border-radius: 6px;
  --border-radius-3: 3px;
  --transition: all 500ms ease;
}

/* Dark theme */
:root[theme='dark'] {
  --bg-color: #0B0C10;
	--primary-color: #45A29E;
  --dark: #1F2833;
  --light: #222222;
  --white: #1F2833;
	--primary-text: #66FCF1;
	--secondary-text: #C5C6C7;
}

/* Blue and Rose theme */
:root[theme='blue'] {
	--primary-color: #663ee6;
  --dark: #fb5185;
	--secondary-text: #7496e7;
}

::-moz-selection {
  background: #05cbfc;
  color: var(--white);
  text-shadow: none;
}

::selection {
  background: #05cbfc;
  text-shadow: none;
  color: var(--white);
}

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

@media print {

  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid var(--secondary-text);
    page-break-inside: avoid;
  }

  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

html,
body {
  margin: 0px;
  padding: 0px;
  color: var(--primary-text);
  font-size: var(--font-size);
  background-color: var(--bg-color);
  overflow-x: hidden;
  font-family: var(--primary-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

a:hover,
a,
a span {
  color: #0066c0;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
}

a.btn.btn-default,
a.btn.btn-default span {
  color: var(--primary-text);
}

a:hover,
a:hover span,
a:hover .svg-icon {
  color: var(--primary-color);
  fill: var(--primary-color);
}

a:focus {
  color: var(--primary-color);
  box-shadow: none;
  text-decoration: none;
  outline: 0;
}

a i {
  margin-bottom: 2px;
}

select {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-appearance: none;
}

textarea {
  resize: vertical;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

button:focus,
input:focus,
img:focus,
textarea:focus,
input:focus,
.slick-slide:focus {
  outline: none;
}

iframe {
  display: block;
  border: none;
  height: 100vh;
  width: 100%;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--gray);
  margin: 1em 0;
  padding: 0;
  width: 100%;
}

hr.double {
  border-top: 3px double var(--gray);
}

hr.dotted {
  border-top: 1px dotted var(--gray);
}

hr.dashes {
  border-top: 1px dashed var(--gray);
}

.svg-icon {
  transition: var(--transition);
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-primary:hover {
  color: var(--primary-text) !important;
}

/* borders */
.border {
  border: 1px solid var(--light) !important;
}

.border-x,
.border-t {
  border-top: 1px solid var(--light) !important;
}

.border-y,
.border-r {
  border-inline-end: 1px solid var(--light) !important;
}

.border-x,
.border-b {
  border-bottom: 1px solid var(--light) !important;
}

.border-y,
.border-l {
  border-inline-start: 1px solid var(--light) !important;
}

.shadow {
  box-shadow: var(--box-shadow);
}

.radius {
  border-radius: var(--border-radius) !important;
}

.radius-top {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.radius-bottom {
  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}

.w-100 {
  width: 100% !important;
}

.hidden {
  display: none !important;
}

img.lazy {
  border-radius: var(--border-radius);
}

.table-bordered,
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
  border: 1px solid var(--light);
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  border-color: var(--light) !important;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
  border-bottom-width: 1px !important;
}
.table-striped>tbody>tr:nth-of-type(odd){
  background-color: var(--light) !important;
}
.fa.no-fill,
.fas.no-fill {
  font-weight: 100 !important;
  margin-inline-end: 3px;
}

body.rtl {
  direction: rtl;
}

section {
  margin: 0 0 35px 0;
}

@media screen and (max-width: 991px) {
  section {
    margin: 0 0 30px 0;
  }
}

.clearfix:before,
.clearfix:after {
  display: block;
  clear: both;
  content: ""
}

.visible {
  visibility: visible !important
}

.invisible {
  visibility: hidden !important
}

.overlay.active {
  position: absolute;
  width: 100%;
  height: 150%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 3;
}

.busy {
  cursor: wait;
}

#loading {
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0.85;
  background-color: var(--white);
  cursor: wait;
  text-align: center;
  z-index: 99;
}

#loading-image {
  position: absolute;
  top: 45%;
  z-index: 100;
}

.bg-gray {
  background-color: var(--gray) !important;
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-red {
  background-color: var(--red) !important;
}

.bg-yellow {
  background-color: var(--yellow) !important;
}

.bg-aqua {
  background-color: var(--aqua) !important;
}

.bg-green {
  background-color: var(--green) !important;
}

.bg-lime {
  background-color: var(--lime) !important;
}

.bg-maroon {
  background-color: var(--maroon) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.svg-icon {
  color: var(--primary-text);
  fill: var(--primary-text);
}

.btn:focus,
.btn:active {
  outline: 0 !important;
}

.btn-primary {
  color: var(--white) !important;
  background-color: var(--primary-color) !important;
  border: none;
  outline: none;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  fill: var(--white);
}

.btn-primary:hover .svg-icon,
.btn-default:hover .svg-icon {
  fill: var(--white);
}

.btn-primary span {
  color: var(--white) !important;
}

.btn-black {
  color: var(--light);
  background: var(--dark);
  border: 1px solid transparent;
}

.btn-black:hover {
  background-color: var(--primary-color);
  color: var(--light);
}

.btn-primary.focus,
.btn-primary:focus,
.btn-black.focus,
.btn-black:focus {
  color: var(--white) !important;
  border-color: transparent;
}

.btn-black.focus,
.btn-black:focus {
  background-color: var(--primary-text) !important;
}

.btn-primary.focus,
.btn-primary:focus {
  background-color: var(--red) !important;
}

.text-success {
  color: var(--primary-color) !important;
}

.text-muted {
  color: var(--secondary-text) !important;
}

/*
 * Content area starts here
 */
div[data-notify="container"] {
  border-radius: 0 !important;
}

.container-fluid {
  width: 98%;
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
}

#content-wrapper {
  min-height: 380px;
}

.page-header {
  margin: 10px 0;
  border: none;
  padding-bottom: 0;
}

.page-header h3,
.page-header h2,
.page-header h1 {
  text-align: center;
  color: var(--dark);
}

#buy-now-btn {
  border-radius: var(--border-radius);
}

.add-to-card-now-btn {
  color: var(--white) !important;
  background-image: linear-gradient(213deg, #ff7b48 7%, #f73c22 92%);
  border-style: solid;
  border-color: transparent;
  border-radius: var(--border-radius);
  background-color: var(--primary-color);
}

.add-to-card-now-btn:hover {
  color: var(--white);
  background-image: linear-gradient(239deg, #ffac2d 7%, #ff8219);
}

.btn-link {
  text-decoration: none !important;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--primary-color);
  letter-spacing: 0.5px;
}

.select-box-wrapper .selectboxit-container,
.select-box-wrapper .selectboxit-container .selectboxit,
.select-box-wrapper .selectboxit-container .selectboxit-options {
  width: 100% !important;
}

.select-box-wrapper .selectboxit-container {
  margin-inline-start: unset;
}

.selectboxit-container .selectboxit {
  background: var(--light);
  border-radius: var(--border-radius);
}

@media (min-width: 992px) {
  .nopadding {
    padding: 0 !important;
    margin: 0 !important;
  }

  .sm-padding {
    padding-inline-end: 2px !important;
    padding-inline-start: 2px !important;
  }
}

@media (max-width: 830px) {
  .page-header {
    margin: 5px 0;
  }
}

.noborder {
  border: none !important;
}

.center-block {
  display: block;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.vertical-center {
  vertical-align: middle !important;
}

/* Confirmation box hackes */
.jconfirm.jconfirm-light .jconfirm-box,
.jconfirm.jconfirm-white .jconfirm-box {
  border-radius: 0;
}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button {
  font-weight: 400;
  letter-spacing: 1px;
}

.breadcrumb.nav-breadcrumb li {font-size: 14px;}
/**** breadcrumb ****/
.nav-breadcrumb {
  margin: 0;
  padding: 0;
  background: unset;
  font-size: 0.75em;
  border-radius: 0px;
}

.nav-breadcrumb>li>a {
  color: var(--secondary-text);
}

.nav-breadcrumb>li>a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumb>li+li:before {
  padding: 0 2px;
  content: "/\00a0";
  /*content: "›\00a0";*/
  zoom: 1.25;
}

/* essential classes */
.flex-between-center {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.flex-center-y {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.flex-center {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.wrapper::before {
  position: fixed;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  pointer-events: none;
  z-index: 998;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease .1s;
}

/* Navigations */
header.header {
  position: relative;
  background-color: var(--white);
  /* z-index: 4; */
}

.top-nav {
  border-bottom: 1px solid var(--light);
}

.top-nav a {
  font-size: var(--font-size-sm);
}

@media screen and (max-width: 991px) {
  .top-nav {
    display: none;
  }
}

.top-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.top-nav-left h3 {
  font-weight: normal;
  font-size: var(--font-size-sm);
  color: var(--primary-text);
  letter-spacing: 1px;
}

@media screen and (max-width: 1199px) {
  .top-nav-left h3 {
    display: none;
  }
}

.top-nav-right>ul {
  display: flex;
  align-items: center;
}

.top-nav-right>ul a {
  color: var(--secondary-text);
}

.top-nav-right>ul a:hover {
  color: var(--primary-color);
}

.top-nav-right>ul>li {
  padding: 0px 15px;
}

.top-nav-right>ul>li:not(:first-child) {
  border-inline-start: 1px solid var(--light);
}

.top-nav-right .image-icon a {
  display: flex;
  align-items: center;
}

.top-nav-right .image-icon a span {
  color: var(--secondary-text);
}

.top-nav-right .image-icon img,
.top-nav-right .image-icon i {
  display: block;
  width: 20px;
}

.top-nav-right .currency select {
  font-weight: normal;
  font-size: var(--font-size-sm);
  color: var(--secondary-text);
  border: none;
  outline: none;
  cursor: pointer;
}

.top-nav-right .currency select:focus {
  border: none;
  outline: none;
}

.top-nav-right .language a {
  display: flex;
  align-items: center;
}

.top-nav-right .language a i {
  margin-inline-start: 10px;
  font-size: 10px;
}

.top-nav-right .language-icon {
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 50% 50% 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-nav-right .language-icon img {
  width: 25px;
  height: 25px;
  border-radius: 50px;
}

.nav-tabs {
  border-bottom: none;
}

.nav-tabs>li {
  float: left;
  /* margin: 0 -2px; */
}

.nav-tabs>li>a {
  position: relative;
  top: 7px;
  font-size: var(--font-size);
  letter-spacing: 0.3px;
  color: var(--secondary-text);
  padding: 10px 25px;
  border: 1px solid var(--gray);
  /* border-bottom: none; */
  border-radius: var(--border-radius);
  /* font-weight: 400; */
  /* text-transform: uppercase; */
}

.nav-tabs>li.active>a {
  padding: 10px 25px;
  top: 1px;
  color: var(--primary-color);
  text-decoration: underline;
  /*z-index: 999;*/
}

.nav-tabs.nav-justified>li>a {
  border: 1px solid var(--light);
  border-radius: 6px 6px 0 0;
  font-size: var(--font-size-lg);
}

.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus {
  border: 1px solid var(--light);
  border-bottom: 1px solid transparent;
  text-decoration: underline;
}

.nav-tabs-custom>.nav {
  border-radius: 50rem;
}

.nav-tabs-custom>.nav>li>a {
  border-top: none;
  border-inline-start-color: #f4f4f4;
  /* border-inline-end-color: #f4f4f4; */
  background: #f8f9fa;
  color: #444;
  border-radius: 50rem;
  /* border: none; */
}

.nav-tabs-custom>.nav>li.active>a {
  background: var(--primary-color);
  color: var(--white);
  text-decoration: none;
}

.tab-content {
  padding: 25px 20px;
  background: var(--white);
  /* color: var(--dark); */
  line-height: 1.5em;
  border: 1px solid var(--light);
  border-top: none;
  border-radius: var(--border-radius);
}

.box {
  position: relative;
  margin: 1px 5px;
  padding: 0 5px 5px 5px;
  /* border: 1px solid transparent; */
  outline: transparent solid 1px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

@media screen and (max-width: 991px) {
  .box {
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .box {
    margin: 0px;
    padding: 0 7px;
  }
}

.box:hover {
  /* border: 1px solid var(--primary-color); */
  outline: var(--primary-color) solid 1px;
  box-shadow: var(--box-shadow);
}

.box:hover .box-action {
  bottom: 0px;
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .box:hover .box-action {
    bottom: 10px;
    border-radius: var(--border-radius-3);
  }
}

.box-img {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 5px 0 0 0;
}

.box-img img {
  height: 200px;
  object-fit: contain;
}

.box-img::after {
  transition: var(--transition);
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(255, 255, 255, 0.2);
}

.box:hover .box-img::after {
  height: 100%;
}

.box .btn-primary {
  border-radius: var(--border-radius);
  transition: var(--transition);
}

@media screen and (max-width: 991px) {
  .box .btn-primary {
    font-size: var(--font-size-sm);
  }
}

.box-ratting ul {
  display: flex;
  align-items: center;
}

.box-ratting ul a {
  padding-inline-end: 5px;
  font-size: var(--font-size-sm);
  color: var(--primary-light);
}

.box-title {
  /* padding: 5px 0; */
  line-height: 20px;
  height: 40px;
  overflow: hidden;
}

.box-title a {
  color: inherit;
  /* font-size: var(--font-size-lg);
  line-height: 20px; */
}


.box-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin-top: 5px;
}

.box-price-new {
  color: var(--primary-color);
  font-size: var(--font-size-xl);
  /* line-height: 27px; */
  font-weight: 500;
  padding-inline-end: 7px;
}

@media screen and (max-width: 991px) {
  .box-price-new {
    font-size: var(--font-size-lg);
    /* line-height: 24px; */
  }
}

.box-price-old {
  color: var(--secondary-text);
  font-size: var(--font-size);
  text-decoration: line-through;
  /* line-height: 24px; */
}

@media screen and (max-width: 991px) {
  .box-price-old {
    font-size: var(--font-size);
    /* line-height: 22px; */
  }
}

.box-action {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -58px;
  padding: 12px;
  background-color: var(--white);
  width: 100%;
  transition: 400ms all ease;
  visibility: hidden;
  border-radius: var(--border-radius);
}

@media screen and (max-width: 991px) {
  .box-action {
    justify-content: flex-start;
  }
}

.box-action a {
  padding: 8px 10px;
  background-color: var(--light);
  color: var(--primary-text);
  font-size: 13px;
  line-height: 28px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

@media screen and (max-width: 991px) {
  .box-action a {
    font-size: var(--font-size-sm);
    margin-inline-end: 10px;
  }
}

.box-action a:hover {
  background-color: var(--primary-dark);
  /* color: var(--yellow); */
}

.box-action i {
  font-size: var(--font-size);
}

.box-action .box-action-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  visibility: hidden;
}

.box:hover .box-action-price {
  visibility: visible;
}

/* Banner */
.banner {
  width: 100%;
}

.banner-box {
  position: relative;
}

.banner-box img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.banner-content-img {
  min-height: 450px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}

.banner-content-left,
.banner-content-right {
  position: absolute;
  top: 25%;
  width: 50%;
}

.banner-content-left {
  left: 0;
}

.banner-content-right {
  right: 0;
  margin-inline-end: 0;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.banner-texts {
  padding-bottom: 10px;
}

.banner-content-text {
  margin-bottom: 10px;
}

.banner-content-text p {
  font-size: var(--font-size-xl);
  line-height: 20px;
  color: var(--secondary-text);
  font-weight: 300;
  text-align: center;
}

.banner-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 25px;
  color: var(--primary-text);
}

.banner-overlay-title h3 {
  font-size: 27px;
  line-height: 32px;
  font-weight: 600;
  /* text-shadow: 0.1px 0.1px 0.9px rgba(0, 0, 0, 0.2); */
}

.banner-overlay-text {
  font-weight: 400;
}

.banner-overlay-text h3 {
  font-size: 36px;
}

.banner-overlay-text p {
  font-size: var(--font-size-lg);
}

.banner-overlay p {
  color: var(--light);
}

.banner-overlay-price-text {
  position: absolute;
  bottom: 20px;
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.banner-overlay-price-text h3 {
  font-size: var(--font-size-xl);
}

.banner-content-text p span {
  color: var(--dark);
}

.banner-content-sub-title {
  margin-bottom: 10px;
}

.banner-content-sub-title h3 {
  font-size: var(--font-size-xxl);
  line-height: 24px;
  color: var(--primary-text);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
}

.banner-content-title {
  margin-bottom: 10px;
}

.banner-content-sub-title h3 span {
  color: var(--yellow);
}

.banner-content-title h1 {
  font-size: 40px;
  line-height: 50px;
  color: var(--primary-text);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.banner-content-title h1 span {
  color: var(--yellow);
}

.banner-content-btn {
  text-align: center;
  margin: 15px 0;
}

.banner-content-btn a {
  padding: 14px 28px;
  background-color: var(--yellow);
  color: var(--dark);
  font-size: var(--font-size);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--border-radius-3);
  display: inline-block;
  transition: var(--transition);
  letter-spacing: 2px;
}

.banner-content-btn a:hover {
  background-color: var(--primary-dark);
  color: var(--light);
}

@media screen and (max-width: 991px) {
  .banner-overlay-text {
    font-size: var(--font-size-xl);
  }

  .banner-texts {
    padding-bottom: 0px;
  }

  .banner-overlay-title h3 {
    font-size: var(--font-size-xxl);
    line-height: 24px;
  }

  .banner-overlay-price-text {
    bottom: 35px;
  }

  .banner-overlay-price-text h3 {
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--primary-color);
  }

  .banner-overlay-price-text p {
    font-size: var(--font-size);
  }

  .banner-content-left,
  .banner-content-right {
    width: 100%;
  }

  .banner-content-img {
    min-height: 45vh;
    background-size: cover;
  }

  .banner-content-text {
    display: none !important;
  }

  .banner-content-text p {
    margin-bottom: 0px;
  }

  .banner-content-sub-title h3 {
    padding: 3px 0;
    font-size: var(--font-size-lg);
    line-height: 18px;
  }

  .banner-content-title h1 {
    padding: 3px 0px;
    font-size: 24px;
    line-height: 15px;
  }

  .banner-content-btn {
    margin: 0;
  }

  .banner-content-btn a {
    padding: 4px 15px;
    margin: 0;
    font-size: var(--font-size-sm);
  }
}

@media screen and (max-width: 767px) {
  .banner-overlay-text p {
    font-size: var(--font-size-xl);
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 360px) {
  .banner-overlay {
    padding: 15px;
  }

  .banner-overlay-title h3 {
    font-size: var(--font-size-lg);
  }
}

.datepicker .table>thead>tr>th,
.datepicker .table>tbody>tr>th,
.datepicker .table>tfoot>tr>th,
.datepicker .table>thead>tr>td,
.datepicker .table>tbody>tr>td,
.datepicker .table>tfoot>tr>td {
  border-top: 1px solid #f4f4f4;
  vertical-align: middle;
}

.datepicker .table>thead>tr>th {
  vertical-align: middle;
}

.datepicker.dropdown-menu table thead tr:first-child {
  border-bottom: 1px solid #19b6ee;
}

.timepicker-dropdown.timepicker-orient-bottom:before,
.datepicker-dropdown.datepicker-orient-bottom:before,
.bootstrap-datetimepicker-dropdown.datetimepicker-orient-bottom:before {
  border-top: 7px solid rgba(0, 0, 0, 0.2);
}

.timepicker.dropdown-menu,
.datepicker.dropdown-menu,
.bootstrap-datetimepicker.dropdown-menu {
  border: none;
  box-shadow: var(--box-shadow);
}

.timepicker.dropdown-menu,
.timepicker table tr td,
.timepicker table tr th,
.timepicker table tr td span,
.datepicker.dropdown-menu,
.datepicker table tr td,
.datepicker table tr th,
.datepicker table tr td span,
.bootstrap-datetimepicker.dropdown-menu,
.bootstrap-datetimepicker table tr td,
.bootstrap-datetimepicker table tr th,
.bootstrap-datetimepicker table tr td span {
  font-family: inherit;
  border-radius: 0 !important;
}

.timepicker.dropdown-menu table thead tr,
.timepicker.dropdown-menu table thead tr th,
.datepicker.dropdown-menu table thead tr,
.datepicker.dropdown-menu table thead tr th,
.bootstrap-datetimepicker.dropdown-menu table thead tr,
.bootstrap-datetimepicker.dropdown-menu table thead tr th {
  border: none;
}

div.tooltip {
  position: absolute;
  z-index: 9999;
}

/* jquery 3 hack fix */
div.datepicker>div {
  display: block;
}

/* ==========================================================================
    Modals
   ========================================================================== */
.modal-header {
  font-size: var(--font-size);
  color: var(--dark);
  margin-bottom: 10px;
  padding: 10px 10px 5px;
  font-weight: 100;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid #19b6ee;
}

.modal-header .close {
  /* margin-top: 0px; */
  font-weight: 400;
  position: absolute;
  top: 12px;
  right: 15px;
  /* .modal-body is position:relative and comes after .modal-header in the
     DOM, so without an explicit z-index its subtree (e.g. .form-title's
     -2rem margin-top pulling a heading up into the header) paints on top of
     this absolutely-positioned button and swallows its clicks. */
  z-index: 5;
}

.modal-body,
.modal-footer,
.modal-title {
  background: 0 0;
  border: none;
  margin: 0;
  padding-bottom: 0;
}

.modal-title {
  font-weight: 300;
  padding: 0;
  margin-bottom: 3px;
  letter-spacing: 2px;
}

.modal-content {
  background-clip: padding-box;
  background-color: var(--white);
  border: var(--dark);
  box-shadow: var(--box-shadow);
}

.modal-footer {
  margin: 25px 0 20px;
  padding-bottom: 15px;
  /*text-align: right !important;*/
}

.modal-footer a {
  color: var(--secondary-text);
}

.modal-footer a:hover {
  color: var(--primary-color);
}

@media (min-width: 768px) {
  .modal-dialog {
    width: auto;
  }

  .modal-content {
    box-shadow: var(--box-shadow);
  }

  .modal-dialog.modal-xs {
    width: 300px;
  }

  .modal-dialog.modal-sm {
    width: 450px;
  }

  .modal-dialog.modal-md {
    width: 600px;
  }

  .modal-dialog.modal-lg {
    width: 800px;
  }

  .modal-dialog.modal-xl {
    width: 90%;
  }
}

/* ==========================================================================
    Form
   ========================================================================== */
/* iCheck */
.icheckbox_minimal,
.iradio_minimal {
  display: inline-block;
  /*display: inline;*/
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../img/icheck/minimal.png) no-repeat;
  border: none;
  cursor: pointer;
}

.icheckbox_minimal {
  background-position: 0 0;
}

.icheckbox_minimal.hover {
  background-position: -20px 0;
}

.icheckbox_minimal.checked {
  background-position: -40px 0;
}

.icheckbox_minimal.disabled {
  background-position: -60px 0;
  cursor: default;
}

.icheckbox_minimal.checked.disabled {
  background-position: -80px 0;
}

.iradio_minimal {
  background-position: -100px 0;
}

.iradio_minimal.hover {
  background-position: -120px 0;
}

.iradio_minimal.checked {
  background-position: -140px 0;
}

.iradio_minimal.disabled {
  background-position: -160px 0;
  cursor: default;
}

.iradio_minimal.checked.disabled {
  background-position: -180px 0;
}

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {

  .icheckbox_minimal,
  .iradio_minimal {
    background-image: url(../img/icheck/minimal@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}

/* iCheck plugin Minimal skin, blue
----------------------------------- */
.icheckbox_minimal-blue,
.iradio_minimal-blue {
  display: inline-block;
  /*display: inline;*/
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url(../img/icheck/blue.png) no-repeat;
  border: none;
  cursor: pointer;
}

.icheckbox_minimal-blue {
  background-position: 0 0;
}

.icheckbox_minimal-blue.hover {
  background-position: -20px 0;
}

.icheckbox_minimal-blue.checked {
  background-position: -40px 0;
}

.icheckbox_minimal-blue.disabled {
  background-position: -60px 0;
  cursor: default;
}

.icheckbox_minimal-blue.checked.disabled {
  background-position: -80px 0;
}

.iradio_minimal-blue {
  background-position: -100px 0;
}

.iradio_minimal-blue.hover {
  background-position: -120px 0;
}

.iradio_minimal-blue.checked {
  background-position: -140px 0;
}

.iradio_minimal-blue.disabled {
  background-position: -160px 0;
  cursor: default;
}

.iradio_minimal-blue.checked.disabled {
  background-position: -180px 0;
}

img.img-tiny {
  max-width: 30px;
  max-height: 30px;
}

img.img-small {
  max-width: 100px;
  max-height: 100px;
}

img.img-medium {
  max-width: 250px;
  max-height: 250px;
}

img.verified-badge {
  margin-inline-start: 5px;
  margin-bottom: 3px;
  margin-inline-end: 5px !important;
}

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {

  .icheckbox_minimal-blue,
  .iradio_minimal-blue {
    background-image: url(../img/icheck/blue@2x.png);
    -webkit-background-size: 200px 20px;
    background-size: 200px 20px;
  }
}

.icheckbox_minimal,
.iradio_minimal,
.iradio_minimal-blue,
.icheckbox_minimal-blue {
  margin-inline-end: 2px !important;
}

.radio label,
.checkbox label {
  padding-inline-start: 0;
  margin-inline-start: 0;
  margin-bottom: 5px;
}

.form-control,
.form-control:focus {
  box-shadow: none;
}

.form-group label {
  font-weight: 400;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-inline-start: 0;
  margin-bottom: 5px;
}

.form-group label:hover {
  letter-spacing: 0.5px;
}

.form-control::placeholder,
.form-control::-ms-input-placeholder {
  font-weight: 100;
  letter-spacing: 1.5px;
  opacity: 1;
}

label.buyer_note {
  font-size: var(--font-size);
  text-transform: none;
}

/*
 * Component: Label
 */
.label {
  color: var(--white) !important;
  font-weight: 400;
  letter-spacing: 0.35px;
}

.label-outline {
  color: var(--dark) !important;
  background-color: transparent !important;
  border: 1px solid var(--gray);
  display: inline-block;
}

.label-default {
  background-color: var(--gray);
}

.modal .modal-header {
  padding: 15px;
  border-bottom: none;
}

.modal .form-title {
  margin: -2rem 0rem 2rem;
}

.modal .form-title h4 {
  font-weight: normal;
}

.modal .input-lg {
  font-size: var(--font-size);
}

.modal .help-block {
  text-align: left;
}

.modal .btn-round {
  border-radius: var(--border-radius);
  /* border-radius: 3rem; */
}

.modal .social-buttons .btn {
  color: var(--white);
  margin: 0 0.5rem 1rem;
}

.modal .signup-section {
  padding: 0.3rem 0rem;
}

.modal .modal-footer {
  margin: 10px 0;
  padding-bottom: 10px;
}

.btn-social {
  color: var(----white);
  position: relative;
  padding-inline-start: 44px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-social.btn-lg {
  padding-inline-start: 45px;
}

.btn-social> :first-child {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  line-height: 34px;
  font-size: 1.6em;
  text-align: center;
  border-inline-end: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-social:hover {
  color: var(--gray);
}

.btn-facebook {
  background-color: #3b5998;
}

.btn-google {
  background-color: var(--red);
}

.btn-twitter {
  background-color: #55acee;
}

.btn-apple {
  background-color: var(--secondary-text);
}

/* ==========================================================================
    Main Nav
   ========================================================================== */
.top-promo-banner {
  position: relative;
  z-index: 3;
}

.top-promo-banner a {
  display: block;
  color: var(--primary-text)
}

.top-promo-banner a.close-button {
  position: absolute;
  top: 0;
  right: 10px;
  border: none;
  font-size: 1.6em;
  color: var(--light);
  text-shadow: 1px 2px var(--black);
}

.top-promo-banner img {
  width: 100%;
}

.dropdown {
  position: static;
}

.dropdown-caret {
  position: absolute;
  top: 50%;
  right: 20px;
  font-style: normal;
  transform: translateY(-50%);
}

.dropdown-caret:before {
  content: "\f107";
  font-family: "FontAwesome";
}

@media (min-width: 992px) {
  .dropdown-caret {
    display: none;
  }
}

.navbar-main {
  position: relative;
  margin: 0;
  border: none;
  padding-bottom: 5px;
  background: #365271;
  border-radius: 0;
  z-index: 10;
}

.navbar-main.border-bottom {
  -webkit-box-shadow: 0 0 1px var(--gray);
  box-shadow: 0 0 1px var(--gray);
}

.navbar-main .navbar-nav>li:hover>a {
  background: var(--white);
  color: var(--primary-color);
}

.navbar-main .navbar-nav>li.open>a {
  background: #2b415b !important;
  color: var(--white) !important;
}

@media (max-width: 992px) {
  .navbar-top {
    padding-top: 0px !important;
  }

  .navbar-main {
    padding-bottom: 0px !important;
  }

  .navbar-main .navbar-nav>li.open .dropdown-menu>li>a {
    color: var(--primary-text);
  }

  .brand-centered {
    display: flex;
    justify-content: center;
    /*position: absolute;*/
    /*width: 100%;*/
    left: 0;
    top: 0;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    padding: 5px !important;
  }
}

img.lang-flag {
  width: 20px;
}

.navbar-main .navbar-nav>li>a {
  color: var(--white);
}

@media (min-width: 992px) {
  .navbar-main .dropdown:hover>.dropdown-menu {
    display: block;
  }
}

.navbar-brand {
  padding: 5px 25px 5px 15px;
}

.navbar-brand>img {
  max-width: 120px;
  max-height: 40px;
}

.navbar-item-mergin-top {
  margin-top: 12px;
}

.navbar-nav>li>a {
  font-size: var(--font-size);
}

.navbar-nav>li>a>span {
  display: block;
  font-size: 11px;
  line-height: 1em;
  opacity: 0.3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  height: 10px;
  margin-bottom: 2px;
}

.navbar-nav>li>a:hover>span {
  color: var(--black);
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
}

.navbar-light .navbar-nav>li>a>span {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  color: var(--secondary-text);
}

.navbar-light .navbar-nav>li>a:hover>span {
  color: var(--white);
}

.navbar-light .navbar-nav>li>a {
  color: var(--secondary-text);
}

@media (max-width: 992px) {
  .navbar-mob-left>li {
    float: left;
  }
}

@media (min-width: 992px) {
  .navbar-main .navbar-collapse {
    padding: 0;
    margin-inline-start: -15px !important;
  }
}

.navbar-light {
  background: var(--white);
  margin: 0;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 10;
}

@media (min-width: 992px) {
  .navbar-light .dropdown:hover>.dropdown-menu {
    display: block;
  }
}

.navbar-light .dropdown-menu {
  border-top: 2px solid var(--primary-color);
  box-shadow: var(--box-shadow);
}

.navbar-light .navbar-nav>li:hover>a {
  color: var(--white);
  background: var(--primary-color);
}

.navbar-light .navbar-search {
  box-shadow: 0 0 0 1px var(--gray);
}

.navbar-top {
  padding-top: 10px;
  z-index: 11;
}

.navbar-top .navbar-nav>li>a {
  padding: 12px;
}

.navbar-nav>li>a {
  padding-top: 5px;
  padding-bottom: 5px;
}

.dropdown-menu.nav-list li a {
  color: var(--secondary-text);
  padding: 5px 10px;
}

.dropdown-menu.nav-list li .fa {
  width: 20px;
  opacity: 0.6;
}

/****** Navbar Category Dropdown ******/

/*lsdklasdk;askldasd*/
.dropdown-menu {
  border: none;
  border-radius: 0;
  z-index: 10000;
}

.menu-category-dropdown {
  margin: 0;
  padding: 0;
  background: var(--white) !important;
}

@media (min-width: 992px) {
  .menu-category-dropdown>li:hover .category-section {
    display: block;
  }
}

.menu-category-dropdown>li:hover>a {
  /* background-color: unset; */
  color: var(--secondary-text);
  letter-spacing: 1px;
}

.menu-category-dropdown>li:hover>a .category-icon {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}

.menu-category-dropdown>li {
  cursor: pointer;
}

.menu-category-dropdown>li>a {
  height: 32px;
  line-height: 32px !important;
  padding: 0 12px 0 35px !important;
  font-size: 13px;
  position: relative;
  width: 232px;
}

@media (max-width: 992px) {
  .menu-category-dropdown>li>a {
    width: 100%;
  }
}

.menu-category-dropdown>li>a:after {
  position: absolute;
  display: block;
  content: "\f105";
  font-family: "FontAwesome";
  top: 0;
  right: 0;
  width: 20px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
}

.menu-category-dropdown>li:hover>a:after {
  content: "";
}

@media (max-width: 992px) {
  .menu-category-dropdown>li>a:after {
    display: none;
  }
}

.category-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: var(--font-size);
  opacity: 0.3;
  filter: alpha(opacity=30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

.category-section {
  position: absolute;
  top: 0;
  left: 232px;
  min-width: 601px;
  min-height: 491px;
  display: none;
  background: var(--white);
}

.category-section.expanded {
  width: 800px;
}

.category-section-inner {
  position: absolute;
  /*height: 100%;*/
  width: 100%;
  background: var(--white);
}

.category-section-content {
  position: relative;
  z-index: 999;
  padding: 20px;
  height: auto;
}

#all-categories-wrapper h2 {
  background: #E5E5E5;
  line-height: 1px;
  border-radius: 4px;
  padding-inline-start: 5px;
  position: relative;
}

#all-categories-wrapper h2::before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: var(--white);
  top: 50%;
  transform: translateY(-50%);
  left: -8px;
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

#all-categories-wrapper h2 a {
  font-size: 13px;
  letter-spacing: 1px !important;
  word-spacing: 3px;
  color: var(--black);
  font-weight: bolder;
  display: inline-block;
  padding: 16px 10px 15px;
  outline: 4px solid #E5E5E5;
  outline-offset: 2px;
  border-radius: 1px 8px 8px 1px;
}

#all-categories-wrapper a:hover {
  color: var(--primary-color);
  letter-spacing: 0.15px;
  border-color: var(--primary-color) !important;
}

.category-grp-wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  border-radius: var(--border-radius);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: 300px auto;
  background-position: right bottom;
}

#all-categories-wrapper .less {
  max-height: 60px !important;
  overflow: hidden;
}

.nav-category-section-bg-img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  bottom: 0;
  right: 0;
  z-index: 998;
}

.nav-category-inner-title,
.nav-category-inner-title a {
  font-weight: 700;
  color: var(--primary-text);
  font-size: 15px;
}

.nav-category-inner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
}

.nav-category-inner-list + .show-hide-content-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,.03);
  margin-top: 8px;
  padding: 5px 5px 4px;
  border-radius: 4px;
  font-size: 14px;
}

.nav-category-inner-list>li>a {
  color: var(--primary-text);
  font-size: 14px;
  display: inline-block;
  line-height: 22px;
}

.nav-category-inner-list>li>a:hover {
  text-decoration: none;
  color: var(--secondary-text);
}

.nav-category-inner-list>li>p {
  font-size: 11px;
  color: var(--secondary-text);
  margin: 0;
}

/****** End of Navbar Category Dropdown ******/
/****** Main Search Box ******/
.navbar-search {
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-search .form-group {
  display: block;
}

.navbar-search .form-control {
  width: 100%;
  padding-inline-start: 150px;
  border: none;
}

.navbar-search .form-control:focus {
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.navbar-search .selectboxit-container,
.navbar-search .selectboxit {
  position: absolute;
  top: 2px;
  left: -2px;
  width: 150px !important;
  border-radius: 4px 0 0 4px !important;
  padding: 0;
  font-size: 13px;
  color: var(--secondary-text);
  border: none;
}

.navbar-search .selectboxit-container span,
.navbar-search .selectboxit-container .selectboxit-options a {
  height: 36px;
  line-height: 36px;
}

.header-search {
  max-width: 850px;
  padding: 15px 15px 0;
}

.search-box {
  display: flex;
  border-radius: var(--border-radius);
  border: 2px solid var(--primary-color);
  box-shadow: var(--box-shadow);
}

.search-box-select {
  position: relative;
  border-inline-end: 1px solid #e0e0e0;
}

.search-box-select:after {
  content: "";
  position: absolute;
  top: 14px;
  right: 15px;
  width: 8px;
  height: 5px;
  overflow: hidden;
  z-index: 2;
}

.search-box-select select:focus {
  border: none;
  outline: none;
}

.search-category-select {
  line-height: 39px;
  padding-inline-start: 18px;
  color: var(--secondary-text);
  border-radius: 6px 0 0 6px;
  border: none;
  background: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-category-select:focus {
  outline: none;
}

.exit-search {
  display: none !important;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--white);
  color: var(--primary-color);
  position: absolute;
  top: -35px;
  right: 0;
  font-size: 22px;
  z-index: 999;
}

.exit-search::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  right: calc(100% - 5px);
  bottom: 0px;
  border-radius: 0 0 10px 0;
  border-bottom: 4px solid #fff;
  border-right: 4px solid #fff;
}

/* .search-category-select option {
  background: var(--white);
  padding: 6px 0;
} */

/*
* header-main
*/
#header-main {
  padding-top: 15px;
  z-index: 10;
}

.header-menu-toggler {
  display: none;
}

@media screen and (max-width: 991px) {
  .header-menu-toggler {
    display: block;
    order: -3;
    margin-inline-start: 0;
  }

  .header-menu-toggler a {
    color: var(--secondary-text);
    font-size: 26px;
  }
}

.header-main-inner {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 576px) {
  .header-main-inner {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.header-logo {
  margin-inline-start: 10px;
}

.header-logo img {
  max-height: 60px;
  max-width: 160px;
}

.flash-deal-area .flash-deal-product-utility a span.d-sm-none {display: inline-block !important;}

@media screen and (max-width: 991px) {
  .header-logo img {
    height: 46px;
    order: -2;
    margin-inline-start: auto;
  }
}

@media screen and (max-width: 767px) {
  .header-logo img {
    height: 50px;
  }
}

@media screen and (max-width: 575px) {
  .header-logo img {
    height: 30px;
  }
}

.header-utility {
  float: right;
  /* display: flex; */
  /* margin-inline-start: 30px; */
}


.header-utility ul li + li {margin-inline-start: 8px;}

.header-utility ul a,
.search-btn span {
  color: var(--primary-text);
  position: relative;
  font-size: var(--font-size-xl);
}

.search-btn span {
  display: inline-block;
  margin-top: 3px;
}

.header-utility ul a:hover,
.search-btn span:hover {color: var(--primary-color)}
.header .menu-cat .menu-list {padding: 0px;background: var(--white);}
.menu-list-wrapper .simplebar-track.simplebar-vertical,
.menu-list-wrapper .simplebar-scrollbar,
.menu-list-wrapper .simplebar-scrollbar:before {opacity: 1 !important;}
.menu-list-wrapper .simplebar-scrollbar:before {background: var(--secondary-text)}
.menu-list-wrapper .simplebar-track.simplebar-vertical {
  width: 6px;
  right: calc(100% - 5px);
}

.header .menu-cat .menu-list>li>a {
  display: flex;
  align-items: center;
  padding: 8px;
  color: var(--primary-text);
  font-size: 13px;
  font-weight: normal;
}

.header .menu-cat .menu-list>li>a> span {
  flex: 1;
  color: var(--primary-text);
}

.header .menu-cat .menu-list>li>a>i:not(.header .menu-cat .menu-list>li>a>i~i) {
  font-size: 14px;
  width: 24px;
  text-align: center;
  margin-inline-end: 3px;
  color: var(--secondary-text);
}

.header .menu-cat .menu-list>li>a>span+i{
  font-size: 12px;
  transform: translateY(1px);
}

.header .menu-cat .menu-list>li>a,
.header .menu-cat .menu-list>li>a>span,
.header .menu-cat .menu-list>li>a>i {transition: all .3s ease 0s !important;}
.header .menu-cat .menu-list>li.is-active>a {background: rgba(0, 0, 0, .03);}
.header .menu-cat .menu-list>li.is-active>a,
.header .menu-cat .menu-list>li.is-active>a>span,
.header .menu-cat .menu-list>li.is-active>a>i {color: var(--primary-color) !important}
.menu-list-wrapper {max-height: 434px;}
.mega-dropdown.common-dropdown {max-height: 451px;}
.search-btn {display: none;}

.header-utility ul a:hover span.badge {
  color: var(--white);
}

.header-utility ul a span.badge {
  position: absolute;
  top: -11px;
  right: -8px;
  padding: 2px 5px;
  font-size: 0.65em;
  line-height: 16px;
  letter-spacing: 1px;
  background-color: var(--primary-color);
}

/* @media screen and (max-width: 991px) {
  .header-utility ul li {
    display: inline-block;
  }
  .header-utility ul li:nth-child(3) {
    margin-inline-start: 0;
    display: block !important;
  }

  .header-utility ul li:nth-child(3) img {
    width: 30px;
  }
} */
.global-search .nice-select .list::-webkit-scrollbar-track {background: transparent}
.global-search .nice-select .list::-webkit-scrollbar {width: 5px}
.global-search .nice-select .list::-webkit-scrollbar-thumb {background-color: var(--primary-color);border-radius: 4px;}
.global-search .nice-select .list {max-height: 400px}
.global-search .nice-select .list > li {cursor: pointer !important;}
.global-search .nice-select .nice-select-dropdown {cursor: auto !important;}
.global-search .nice-select.open .nice-select-search-box {
  cursor: text !important;
  pointer-events: visible;
}
.global-search .nice-select .optgroup {
  padding-inline-start: 16px;
  text-transform: uppercase;
  color: var(--dark);
  font-weight: 700;
  border-block: 1px solid rgba(0, 0, 0, .04);
  background: rgba(0, 0, 0, .02);
  margin-inline-start: 5px;
  border-radius: 4px;
}

.global-search .nice-select:after {margin-top: -3px;}

.hot-words a {
  position: relative;
  padding: 5px 8px;
  color: var(--secondary-text);
  font-size: 13px;
  display: inline-block;
  text-transform: lowercase;
  /* font-weight: 500; */
  letter-spacing: .03rem;
}
.headerSticky .hot-words a {
  padding: 5px;
}
.hot-words a:hover {
  color: var(--primary-color);
}

.hot-words a:not(:first-child):before {
  position: absolute;
  left: -1px;
  top: 10px;
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  font-size: 0;
  overflow: hidden;
  background-color: #e9e9e9;
}

.hot-words a:first-child {
  padding-inline-start: 0;
}

.header-search {
  flex-direction: column !important;
}

.header .menu-cat {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  /* height: 495px; */
  background: var(--white);
  opacity: 0;
  z-index: 9;
  visibility: hidden;
  padding: 8px 0px;
  border-radius: 0 0 0 6px;
  border: 1px solid var(--light);
  border-top: none;
  transition: var(--transition);
  transition-duration: .3s;
  transform: translate(0, 10px) 0;
}

.header .menu-cat:hover {
  border-radius: 0 0 0 6px;
}

.header .menu-cat.active {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

.header .menu-cat a {
  color: var(--primary-text);
}

/* .header .menu-cat a:hover {
  color: var(--primary-color);
  letter-spacing: 0.25px;
} */

.header .menu-cat>li {
  transition: all .3s ease;
}

.header .menu-cat>li:hover {background: rgba(0,0,0,.03);}

.header .menu-cat>li>a {
  display: flex;
  align-items: center;
  padding: 8px 0px 8px 10px;
  color: var(--primary-text);
  font-size: 13px;
  font-weight: normal;
  transition: color 500ms, letter-spacing 500ms, padding-inline-start 500ms;
}

.header .menu-cat>li>a span {
  margin-inline-start: 5px;
  color: var(--primary-text);
}

.header .menu-cat>li>a img {
  object-fit: contain;
  margin-inline-end: 15px;
}

.header .menu-cat>li>a i:not(.fa-chevron-right) {
  width: 22px;
  text-align: center;
}
.header .menu-cat>li>a i {
  color: var(--secondary-text);
  transform: translateY(1px);
}

/* .header .menu-cat>li>a:hover {
  padding-inline-start: 10px;
  letter-spacing: 0.55px;
} */

.header .menu-cat>li:hover>a span,
.header .menu-cat>li:hover>a i {
  color: var(--primary-color);
}

.header .menu-cat>li>a i.fa-chevron-right {
  margin-inline-end: 10px;
}

.header .menu-cat .mega-dropdown-item li>a {
  font-size: var(--font-size-sm);
}

.header .menu-cat .mega-dropdown {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 100%;
  height: 495px;
  padding: 0 20px 20px;
  background: var(--white);
  background-repeat: no-repeat;
  background-size: 300px auto;
  background-position: right bottom;
  border-radius: 0 0 6px 0;
  border: 1px solid var(--light);
  border-top: none;
  /* transition: var(--transition); */
  transform: translate(0, 10px) 0;
  z-index: 9;
}


.mega-dropdown .simplebar-track.simplebar-vertical,
.mega-dropdown .simplebar-scrollbar,
.mega-dropdown .simplebar-scrollbar:before {opacity: 0 !important;transition: none !important;}
.mega-dropdown .simplebar-scrollbar:before {background: var(--secondary-text)}
.mega-dropdown .simplebar-track.simplebar-vertical {
  width: 8px;
  right: 0;
}

.mega-dropdown.is-open .simplebar-track.simplebar-vertical,
.mega-dropdown.is-open .simplebar-scrollbar,
.mega-dropdown.is-open .simplebar-scrollbar:before {opacity: 1 !important;}

.header .mega-dropdown-item a:hover {
  color: var(--primary-color);
}

.header .menu-cat .mega-dropdown-item h3 {
  line-height: 1px;
  margin: 15px 0 3px;
}
.header .menu-cat .mega-dropdown-item h3 a {
  font-weight: 700;
  font-size: var(--font-size);
  line-height: 18px;
}

.header .menu-cat .mega-dropdown-item p {
  font-weight: 100;
  font-size: var(--font-size-sm);
  line-height: 18px;
  color: var(--secondary-text);
}

.header .menu-cat li:hover .mega-dropdown {
  visibility: visible;
  min-height: 450px;
}

.header .navbar-cat-item ul li {
  margin-top: 15px;
  transition: var(--transition);
}

.header .navbar-cat-item ul li:hover {
  padding-inline-start: 5px;
}

.header .navbar-cat-item ul li p {
  font-weight: normal;
  font-size: var(--font-size);
  line-height: 14px;
  color: var(--secondary-text);
}

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

@media screen and (max-width: 991px) {
  .primary-nav {
    display: none;
  }
}

.primary-nav-inner {
  display: flex;
}

.primary-nav-category>li {
  position: relative;
}

.primary-nav-category a.menu-link {
  font-size: var(--font-size);
  line-height: 22px;
  color: var(--light);
}

.primary-nav-category .menu-link {
  display: flex;
  align-items: center;
  padding: 13px 0px 11px;
}

.primary-nav-category .menu-link img {
  margin-inline-end: 20px;
}

.primary-nav-category > li > a.menu-link {
  font-weight: 500;
  line-height: 22px;
  color: var(--light);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 15px;
  transition: all .3s ease;
}

.primary-nav-category > li:hover > a.menu-link {
  background: rgba(255,255,255,.2);
}

.header-nav-items {
  display: flex;
  align-items: center;
}

.header-nav-items>li {
  position: relative;
  /* margin-inline-start: 30px; */
  display: flex;
  height: 100%;
}

.header-nav-items a {
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  color: var(--light);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 15px;
  transition: all .3s ease;
}

.header-nav-items a:hover {
  background: rgba(255,255,255,.2);
}

.header-nav-items .menu-link {
  display: flex;
  align-items: center;
}

.header-nav-items .menu-link img {
  margin-inline-end: 20px;
}

.header-nav-items .menu-link i {
  margin: 3px 0 0 5px;
  font-size: 8px;
  font-weight: bold;
  /* color: var(--yellow); */
}

.header .shop-menu {
  min-width: 700px;
  padding: 15px 20px;
  height: 60vh;
  overflow-y: auto;
}

.header .menu-banner a,
.header .menu-banner img {
  display: block;
}

.header .shale-text {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}

.header .shale-text:hover {background: rgba(255, 255, 255, .2);}

.header .shale-text::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--white);
  outline: 1px solid var(--white);
  outline-offset: 3px;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.header .shale-text::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--white);
  outline: 1px solid var(--white);
  outline-offset: 3px;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.header .shale-text p {
  font-size: 13px;
  font-weight: 500;
  /* text-transform: uppercase; */
  line-height: 22px;
  color: var(--light);
  padding: 3px 20px;
  border-inline: 1px solid var(--white);
  letter-spacing: .03em;
}

.header .shale-text a {
  display: block;
  padding: 8px 0;
}

.search-box-input {
  width: 100%;
  position: relative;
}

.search-box-input input {
  border: none;
  padding: 10px;
  line-height: 18px;
  color: var(--primary-text);
  display: block;
  width: 100%;
  border-radius: 6px 0 0 6px;
}

.search-box-button {
  margin: -5px;
}

.search-box-button button {
  width: 60px;
  height: 100%;
  color: var(--light);
  text-align: center;
  background-color: var(--primary-color);
  cursor: pointer;
  border: none;
  border-radius: var(--border-radius);
}

.search-box-button button:hover {
  background-color: var(--primary-text);
  background-color: var(--primary-dark);
  /* color: var(--light); */
}

.navbar-search-submit i.fa-search {
  margin: 0;
}

/* @media (max-width: 575px) {
  #header-main {
    padding: 5px 0 0 0;
  }

  .header-search {
    margin-top: 6px;
  }
} */

.menu-dropdown-list:hover .menu-cat {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* Styling fixes for the RTL languages */
body.rtl .search-category-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 3px;
  text-overflow: "";
}

body.rtl .navbar-search .form-control {
  padding-inline-end: 40px;
}

body.rtl .product-info-labels {
  left: unset;
  right: -1px;
}

body.rtl .product-info-labels>li {
  border-radius: 15px 0 0 15px;
}

body.rtl .product-info-feature-list {
  right: unset;
  left: 0;
}

body.rtl .product-info-price span.old-price {
  float: left;
}

body.rtl .product-info-price span.old-prices {
  float: left;
}

body.rtl #single-product-wrapper .col-md-7.nopadding {
  padding: unset !important;
  padding-inline-end: 10px !important;
}

body.rtl #single-product-wrapper #calculation-section .product-qty-wrapper,
body.rtl #single-product-wrapper #calculation-section .col-sm-3.col-xs-4 {
  float: right !important;
}

body.rtl .text-right {
  text-align: left;
}

body.rtl .owl-carousel,
body.rtl .bx-wrapper {
  direction: ltr;
}

body.rtl .owl-carousel .owl-item {
  direction: rtl;
}

body.rtl .input-group-addon:first-child {
  border-inline-end: 1px solid var(--gray);
  border-inline-start: 0;
}

body.rtl .input-group-btn:last-child>.btn,
body.rtl .input-group-btn:last-child>.btn-group {
  margin-inline-start: unset;
  margin-inline-end: -1px;
}

body.rtl .shopping-cart-item-table>thead>tr>th:first-child,
body.rtl .shopping-cart-item-table>tbody>tr>td:first-child {
  border-inline-end: 1px solid var(--gray);
}

body.rtl .shopping-cart-item-table>thead>tr>th:last-child,
body.rtl .shopping-cart-item-table>tbody>tr>td:last-child {
  border-inline-end: unset;
}

body.rtl .product-list-top-filter .pull-right {
  float: left !important;
}

@media (max-width: 830px) {
  .navbar-search {
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
  }

  .navbar-search .form-control {
    padding-inline-start: 133px;
  }
}

@media screen and (max-width: 375px) {
  .search-category-select {
    width: 90px;
    font-size: 11px;
    padding: 0 5px;
  }

  .navbar-search {
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
  }

  .navbar-search .form-control {
    padding-inline-start: 99px;
    font-size: var(--font-size-sm);
  }
}

.navbar-light .navbar-search-submit {
  color: var(--white);
  background: var(--primary-color);
  cursor: pointer;
}

.navbar-search-submit i.fa-search {
  margin: 4px 0px 0px 4px;
}

.dropdown-menu>li>a.btn-primary {
  display: inline-block;
  padding: 6px 12px;
  color: var(--white);
  clear: unset;
  border: 1px solid transparent;
}

.dropdown-menu>li>a.btn-primary:hover {
  color: var(--white);
  background-color: var(--dark);
}

.ei-slider {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 350px;
  margin: 0 auto;
}

.ei-slider-loading {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: var(--light);
  color: var(--secondary-text);
  text-align: center;
  letter-spacing: 2px;
  line-height: 300px;
  z-index: 1;
}

.ei-slider-large {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 0px;
}

.ei-slider-large li {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  /* height: 100%; */
  width: 100%;
  opacity: 0;
}

.ei-slider-large li img {
  width: 100% !important;
  margin-inline-start: 0 !important;
}

.ei-slider-thumbs {
  height: 4px;
  margin: 0 auto;
  position: relative;
}

.ei-slider-thumbs li {
  position: relative;
  float: left;
  height: 100%;
}

.ei-slider-thumbs li.ei-slider-element {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  z-index: 2;
  text-indent: -9000px;
  background: var(--primary-text);
  background: rgba(0, 0, 0, 0.9);
}

.ei-slider-thumbs li a {
  display: block;
  text-indent: -9000px;
  background: #c3c3c3;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: var(--transition);
}

.ei-slider-thumbs li a:hover {
  background-color: var(--light);
}

.ei-slider-thumbs li img {
  position: absolute;
  bottom: 20px;
  opacity: 0;
  z-index: 8;
  max-width: 150%;
  max-height: unset !important;
  transition: var(--transition);
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, 0.3)));
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: none;
  height: 80px;
  object-fit: cover;
  object-position: left center;
}

.ei-slider-thumbs li:hover img {
  opacity: 1;
  bottom: 3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: none;
}

@media screen and (max-width: 830px) {
  .ei-slider {
    height: 200px;
  }

  .ei-slider-loading {
    line-height: 200px;
  }
}

@media screen and (max-width: 375px) {
  .ei-slider {
    height: 135px;
  }

  .ei-slider-loading {
    line-height: 135px;
  }
}

@media (min-width: 1500px) {
  .ei-slider-large li img {
    margin-top: 0 !important;
  }

  .ei-slider {
    height: 350px;
  }
}

@media (min-width: 1100px) and (max-width: 1299px) {
  .ei-slider-large li img {
    margin-top: 0 !important;
  }

  .ei-slider {
    height: 350px;
  }
}

@media (min-width: 1300px) and (max-width: 1499px) {
  .ei-slider-large li img {
    margin-top: 0 !important;
  }

  .ei-slider {
    height: 350px;
  }
}

.section-title {
  position: relative;
  text-align: center;
  margin: 20px auto 8px auto;
}

.section-title h4 {
  display: inline-block;
  position: relative;
  font-size: 19px;
  font-weight: 400;
  color: var(--primary-text);
  padding: 0px 20px;
}

.section-title h4.small {
  font-size: var(--font-size-lg);
}

.modal-content .section-title {
  text-align: left;
  padding: 0px 12px;
  margin-top: 10px;
}

.banner-content-title h2 {
  font-size: 40px;
  line-height: 50px;
  color: var(--primary-text);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.seller-info {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--light);
}

.seller-info .section-title {
  color: var(--secondary-text);
}

.seller-info .seller-info-logo {
  width: 100px;
}

.seller-info .seller-info-name {
  display: inline-block;
  color: var(--primary-text);
  font-size: var(--font-size-lg);
  margin: 5px;
  text-decoration: none;
}

.seller-info .seller-info-name:hover {
  color: var(--primary-color);
}

.seller-info .product-info-rating {
  display: block;
}

.category-filters {
  display: block;
}

.category-filters h3,
.category-filters h4,
.category-filters h3 a,
.category-filters h4 a {
  color: var(--dark);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.category-filters h3 {
  margin: 13px 0 !important;
  font-size: 13px;
}

.category-filters h4,
.category-filters h4 a {
  margin-bottom: 5px;
  font-size: 11px;
  font-style: italic;
}

.category-filters-section {
  border-bottom: 1px solid var(--gray);
  padding: 10px 0;
}

.category-filters-section:last-child {
  border-bottom: none;
}

.category-filters-section .checkbox {
  font-size: var(--font-size-sm);
}

.category-filters-section .radio label,
.category-filters-section .checkbox label {
  margin-inline-start: 0px !important;
}

.link-filter-opt.active,
.category-filters-section span.small.active {
  color: var(--primary-color);
  font-weight: 500;
}

.cateogry-filters-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.cateogry-filters-list>li {
  margin-bottom: 5px;
}

.cateogry-filters-list>li>ul>li {
  padding-inline-start: 10px;
}

.cateogry-filters-list>li>a,
.cateogry-filters-list>li>a span {
  font-size: var(--font-size);
  color: var(--primary-text);
}

.cateogry-filters-list>li>a:hover,
.cateogry-filters-list>li>a:hover span {
  color: var(--primary-color);
  /* text-decoration: underline; */
}

.category-filters-section .product-info-rating span:not(.small) {
  color: var(--primary-color);
}

.product-list-top-filter {
  width: 100%;
  line-height: 3em;
  vertical-align: middle !important;
  box-shadow: var(--box-shadow);
}

.product-list-top-filter .selectBoxIt {
  margin-top: 0.8em !important;
}

.product-list-top-filter .checkbox,
.product-list-top-filter .radio {
  display: inline;
}

.product-list-top-filter .checkbox label,
.product-list-top-filter .radio label {
  padding-inline-start: 20px;
}

#filterBtn {
  display: none;
  padding: 2px 15px;
  border-radius: 4px;
  border: 1px solid var(--gray);
  background-color: transparent;
}

#filterBtn:focus {
  outline: none;
}

@media screen and (max-width: 767px) {
  .product-list-top-filter {
    zoom: 0.8;
  }

  .product-list-top-filter .viewSwitcher {
    display: none;
  }
}

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

.pagenav-wrapper .pagination {
  margin: 0;
}

.pagination {
  z-index: 9999 !important;
}

.pagination a {
  color: var(--dark);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: var(--transition);
}

.pagination a.active {
  background-color: var(--red);
  color: var(--white);
}

.pagination a:hover:not(.active) {
  background-color: var(--gray);
}

.review-user-name {
  font-size: var(--font-size-lg);
  font-weight: 500;
}

.account-section .title {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  font-size: var(--font-size-lg);
}

#buyer-order-table tbody tr.order-info-head {
  background-color: var(--light);
}

#buyer-order-table tbody .order-info-head td {
  padding: 10px;
}

#buyer-order-table tbody .order-info-head h5 {
  font-size: var(--font-size-lg);
  font-weight: normal;
}

#buyer-payment-detail-table tr.buyer-payment-info-head,
#buyer-order-table tbody tr.order-info-footer {
  background-color: var(--light);
}

#buyer-order-table tbody tr.order-body td {
  font-size: 13px;
  border: none;
  border-top: 1px solid var(--light);
  border-inline-end: 1px solid var(--light);
}

#buyer-order-table .order-body .product-img-wrap {
  display: inline-block;
  margin-bottom: 0;
}

#buyer-order-table .order-body .product-img-wrap img {
  max-width: 60px;
}

#buyer-order-table .order-body .product-info {
  display: inline-block;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  font-size: 13px;
}

#buyer-order-table .product-info .product-info-title {
  font-size: 13px;
  margin-top: 0;
}

#buyer-order-table .product-info .order-info-amount {
  font-size: var(--font-size-sm);
  margin: 7px 0;
}

#buyer-order-table .order-info-properties {
  margin-top: 5px;
  font-size: 11px;
  list-style: none;
}

#buyer-order-table .order-info-properties>li {
  margin-inline-start: 5px;
  padding-inline-start: 5px;
  display: inline-block;
  border-inline-start: 1px solid var(--gray);
}

#buyer-order-table .order-info-properties>li:first-child {
  border: none;
  margin: 0;
  padding: 0;
}

#buyer-order-table .order-body .order-actions {
  vertical-align: middle;
}

#buyer-order-table .order-body .order-actions button.btn-block {
  margin-top: 5px;
}

#buyer-order-table tr.message_from_seller {
  background-color: var(--light);
}

#buyer-order-table .message_from_seller p,
#buyer-order-table .order-detail-buyer-note {
  font-size: var(--font-size-sm);
  color: var(--primary-text);
  margin: 5px 0;
}

#buyer-payment-detail-table tr.buyer-payment-info-head td {
  font-size: var(--font-size);
  color: var(--primary-text);
}

/* Seller cantact messages*/
.message-list {
  padding: 20px 0;
  border: 1px solid #e8e8e8;
}

.message-list form {
  padding: 10px 30px;
}

.message-list-header {
  border-bottom: 1px solid #e8e8e8;
}

.message-list-header h4 {
  margin-inline-start: 30px;
  font-size: var(--font-size-lg);
  font-weight: 100;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.message-list-item {
  margin-top: 20px;
}

.message-content {
  position: relative;
  display: inline-block;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--border-radius);
}

.message-seller .message-content {
  background-color: var(--light);
}

.message-buyer .message-content {
  background-color: var(--yellow);
  float: right;
}

.message-user-info {
  font-size: 13px;
  padding-top: 6px;
}

.message-seller .message-user-info {
  text-align: right;
}

.message-user-name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.message-date {
  color: var(--secondary-text);
}

.message-content-wrapper .message-attachment {
  margin: 0 20px;
}

.message-content-wrapper .message-attachment img {
  margin-bottom: 0;
}

/* Step Wizard */
.step-wizard-wrapper {
  position: relative;
  width: 100%;
  text-align: center;
  min-height: 150px;
}

.step-wizard {
  display: block;
}

.step-wizard .progress {
  position: absolute;
  display: block;
  top: 25px;
  left: 12.5%;
  height: 12px;
  width: 75%;
}

.step-wizard .progressbar {
  position: absolute;
  display: block;
  background-color: #0aa89e;
  opacity: 0.4;
  height: 12px;
  border: 1px solid #e5e6e6;
  width: 0%;
  transition: var(--transition);
}

.step-wizard .progressbar.empty {
  opacity: 1;
  width: 100%;
  background-color: #e5e6e6;
}

.step-wizard ul {
  position: absolute;
  width: 100%;
  list-style-type: none;
  padding: 0;
  left: -2%;
}

.step-wizard li {
  display: inline-block;
  text-align: center;
  width: 24.5%;
}

.step-wizard li .step {
  position: absolute;
  display: inline-block;
  font-size: 0.75em;
  line-height: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid;
  border-color: #e5e6e6;
  background: var(--white);
  transition: var(--transition);
}

.step-wizard li .title {
  position: absolute;
  width: 100%;
  left: 20px;
  padding-top: 42px;
  color: #969c9c;
  transition: var(--transition);
}

.step-wizard li.active .step {
  border-color: #0aa89e;
}

.step-wizard li.active .title {
  color: black;
}

.step-wizard li.done .step {
  color: white;
  background-color: #0aa89e;
}

.step-wizard li>a {
  display: block;
  width: 100%;
  color: black;
  position: relative;
  text-align: center;
}

.step-wizard li>a:hover .step {
  border-color: #0aa89e;
}

.step-wizard li>a:hover .title {
  color: black;
}

@media only screen and (max-width: 1200px) {
  .step-wizard li {
    width: 24%;
  }
}

@media only screen and (max-width: 375px) {
  .step-wizard li {
    width: 22%;
  }
}

/* End Step Wizard */
.product-list-wrapper {margin-top: 30px;}
.product-list-wrapper .product {
  position: relative;
  display: inline-block;
  margin-block: 0 10px;
  margin-inline: 10px 0;
  padding: 10px;
  /* zoom: 1; */
  background-size: 100% 200px;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-image: -webkit-linear-gradient(bottom, #fafafa 0, #fdfdfd 20%, #fff 60%);
  background-image: linear-gradient(to top, #fafafa 0, #fdfdfd 20%, #fff 60%);
}

.product-widget .product-info-title,
.product-list-wrapper .product .product-info-title {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--primary-text);
  font-size: var(--font-size);
}

.product-grid-view .product-info-title {
  margin: 0;
}

.small .product-info-rating,
.product-list-wrapper .product .product-info-rating {
  font-size: var(--font-size);
}

.product-info-feature-list {
  position: absolute;
  right: 0;
  bottom: 11px;
  margin: 0;
  padding: 0;
  font-size: 11px;
  list-style: none;
}

.product-info-feature-list>li {
  margin-inline-start: 5px;
  padding-inline-start: 5px;
  color: var(--secondary-text);
  display: inline-block;
  border-inline-start: 1px solid var(--gray);
}

.product-info-feature-list>li:first-child {
  border: none;
  margin: 0;
  padding: 0;
}
.list-view-card {
  -ms-flex-preferred-size: 100% !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
}
.product-list-wrapper .product.product-list-view {display: block !important;}
.product-list-wrapper .product.product-grid-view {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.product-list-view:after {
  content: "";
  display: table;
  clear: both;
}

.product-list-view .product-img-wrap {
  float: left;
  width: 25%;
  margin-inline-end: 20px;
  margin-bottom: 0;
}

.product-list-view .product-info {
  float: left;
  width: 55%;
  margin: 10px 0;
}

.product-list-view .product-info-price {
  margin: 10px 0;
}

.product-list-view .product-info-feature-list {
  position: static;
  font-size: 13px;
  margin: 10px 0;
}

.product-list-view .product-info-title {
  font-size: var(--font-size-xl) !important;
}

.product-list-view .product-info-desc {
  line-height: 1.25em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-list-view .product-info-price>span {
  font-size: var(--font-size-xxl);
  margin-bottom: 10px;
}

.product-list-view .product-info-rating {
  font-size: var(--font-size-sm);
}

@media screen and (max-width: 992px) {
  .seller-info {
    margin-top: 20px;
  }
}

.product-list-view .product-actions {
  position: absolute;
  top: 42px;
  right: 15px;
  padding: 0;
  margin: 0;
}

.product-list-view .product-actions>a {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.product-list-view .product-actions a span {
  display: inline-block;
}

.product-grid-view .product-info-availability {
  display: none;
}

.product-grid-view .product-info {
  padding: 5px 0 10px 0;
}

.product-grid-view .product-info-desc {
  display: none;
}

.product-grid-view .product-actions {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 45px;
  display: none;
  padding: 0 5px;
}

.product-grid-view .product-actions>a.btn:not(.btn-primary):hover,
.product-grid-view .product-actions>a.btn:not(.btn-primary):hover .svg-icon {
  background-color: var(--primary-color);
  border-color: transparent;
  border-inline-end-color: #ccc;
  border-inline-start-color: #ccc;
  color: var(--white);
  fill: var(--white) !important;
}

.product-grid-view .product-actions a.btn-default {
  color: var(--primary-text);
  width: 20%;
}

.product-grid-view .product-actions a.btn-primary {
  width: 40%;
  border: 1px solid var(--primary-color);
}

.product-grid-view .product-actions a.btn-primary:hover {
  border-radius: 0 4px 4px 0 !important;
}

.product-grid-view .product-actions a span {
  display: none;
}

.product-grid-view:hover .product-actions {
  display: block;
  z-index: 2;
}

.product-grid-view .product-info-price {
  font-size: 18px;
}

.product-grid-view .product-info-price .old-price {
  margin-inline-start: 5px;
  font-size: 16px;
}

a.ship_to {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--dark);
}

a.ship_to:hover {
  color: var(--dark);
  border-bottom: 1px solid var(--primary-color);
}

.product-img-wrap {
  position: relative;
  /*height: 100%;*/
  overflow: hidden;
  margin-bottom: 10px;
}

.product-img-primary,
.product-img-alt,
.product-img {
  width: 100%;
  display: block;
  transition: var(--transition);
  z-index: 1;
}

.product-img-alt {
  position: absolute;
  right: 0;
  top: 0;
}

.product-img-alt {
  transform: translate3d(101%, 0, 0);
}

.product-img-wrap:hover .product-img-alt {
  transform: translate3d(0, 0, 0);
}

.product-img-wrap:hover .product-img-primary {
  transform: translate3d(-100%, 0, 0);
}

.product-info {
  padding: 5px 0px;
  position: relative;
}

.product-info-seller-name {
  font-size: var(--font-size);
  text-decoration: none;
}

.product-info-title {
  margin: 5px 0px;
  line-height: 1.2em;
  font-weight: 400;
}

.small-carousel .product-info-title {
  font-size: var(--font-size-sm);
  height: 31px;
}

.product-info-desc {
  display: block;
  font-size: var(--font-size);
  color: var(--dark);
}

.product-info-price {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1em;
}

.price-fractional {
  display: inline-block;
  top: 0.25em !important;
  font-size: 70%;
  line-height: 0.7em;
  margin-inline-start: 2px;
  vertical-align: top;
}

.product-info-price span.old-price {
  font-size: 20px;
  font-weight: 400;
  /*margin-inline-end: 7px;*/
  color: var(--secondary-text) !important;
  text-decoration: line-through !important;
}

.product-info-price span.old-prices {
  font-size: 20px;
  font-weight: 400;
  /*margin-inline-end: 7px;*/
  color: var(--secondary-text) !important;
  text-decoration: line-through !important;
}

.product-single .product-info {
  padding-top: 0;
}

.product-single .product-info-title {
  margin: 10px 0;
  font-size: var(--font-size-xl);
}

.product-single .product-info-title a {
  color: inherit;
}

.product-single .product-info-title a:hover {
  color: var(--primary-color);
}

.product-single .product-info-price {
  margin: 15px 0px;
}

.product-single ul.product-info-feature-labels {
  display: inline-block;
  list-style: none;
  margin: 13px auto;
  font-size: var(--font-size-sm);
}

.product-single ul.product-info-feature-labels li {
  display: inline;
  padding: 4px 7px;
  color: var(--white);
  background-color: var(--red);
  font-weight: 100;
  text-transform: uppercase;
}

.product-info-price .percent-off {
  display: none;
  margin-inline-start: 10px;
  padding: 4px 7px;
  color: var(--white);
  background-color: var(--red);
  font-size: 0.5em;
  font-weight: 100;
  line-height: 0.5em;
  text-transform: uppercase;
}

.product-single .product-info-price .percent-off {
  display: unset;
}

/* Listing/grid card discount badge. Deliberately its own class, not a reuse
   of .percent-off: that one is toggled by scripts/product_page.blade.php's
   itemWrapper.find('.percent-off') for the PDP's quantity-tier price, and a
   shared class name would let that JS match these static card badges too on
   any page that renders both (e.g. related-products under the PDP). */
.product-info-discount-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

table .product-info-price .percent-off {
  display: block;
  padding: 7px;
  margin: 7px;
}

.product-info .btn-link {
  padding-inline-start: 0px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.product-info .product-info-availability span,
.product-info .product-info-condition span,
.seller-info-opens span {
  color: var(--secondary-text);
}

.product-info .product-info-condition sup {
  color: var(--secondary-text);
}

.product-info .product-info-condition sup .tooltip {
  min-width: 300px;
}

.product-qty-wrapper {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.product-info-qty-item {
  float: left;
  /*margin-inline-end: 10px;*/
  border-radius: 4px;
  border: 1px solid var(--gray);
  overflow: hidden;
}

.product-info-qty {
  background: var(--white);
  height: 33px;
  width: 32px;
  line-height: 33px;
  float: left;
  display: block;
  text-align: center;
  padding: 0;
  border: none;
}

.product-info-qty:focus {
  outline: none;
}

.product-info-qty-input {
  border-inline-start: 1px solid var(--gray);
  border-inline-end: 1px solid var(--gray);
  width: 45px;
}

.product-qty-wrapper .available-qty-count {
  margin-inline-start: 10px;
  line-height: 33px;
  vertical-align: middle;
  font-style: italic;
  color: var(--secondary-text);
}

.product-single .product-info-options .row {
  margin-bottom: 15px;
}

.modal-content .product-single .product-info-options .row {
  margin-bottom: 10px;
}

.product-single .product-info-options .row#order-total-row span {
  line-height: 21px;
  font-weight: 400;
}

.product-single .product-info-options #product-info-shipping-detail,
.product-single .product-info-options .info-label {
  display: inline;
  font-size: var(--font-size);
}

.product-single .product-info-options #delivery-time {
  display: block;
  color: var(--secondary-text);
  font-size: var(--font-size-sm);
}

.product-single .product-info-options .qtt-label {
  line-height: 33px;
}

.product-single .product-info-options .row.product-attribute {
  margin-bottom: 20px;
}

.product-info-options .color-option {
  width: 26px;
  height: 26px;
  display: inline-block;
}

.product-info-labels {
  position: absolute;
  top: 10px;
  left: -1px;
  color: var(--white);
  font-size: 11px;
  list-style: none;
  text-transform: uppercase;
  z-index: 2;
}

.product-info-labels>li {
  display: table;
  color: var(--white);
  background: var(--red);
  padding: 4px 7px;
  line-height: 1em;
  margin-bottom: 5px;
  border-radius: 0 15px 15px 0;
  box-shadow: var(--box-shadow);
}

.product-page-right-section {
  border-inline-start: 1px solid var(--light);
}

.share > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6px;
}

.share a {
  display: inline-block;
  min-width: 26px;
  max-width: 30px;
  padding: 3px 6px;
  text-align: center;
  color: var(--maroon);
  outline: 1px solid var(--secondary-text);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.share a:hover {
  background: var(--primary-color);
  color: var(--white);
}

.product-info-rating {
  display: inline-block;
  padding: 0;
  overflow: hidden;
  font-size: var(--font-size-lg);
  line-height: 17px;
  min-height: 21px;
  color: var(--primary-light);
}

.rating-count {
  display: inline-block;
  margin-top: -2px;
  font-size: var(--font-size-sm);
  color: var(--secondary-text);
  vertical-align: middle;
}

.feedback-stars span.response {
  color: var(--primary-color);
  font-size: 0.65em;
  margin: 5px 20px 0;
}

/*@media screen and (min-width: 720px) and (max-width: 1024) {
  .flash-deal-product-inner{
    margin-bottom: 30px !important;
  }
}*/

.sidebar-product-list {
  list-style: none;
  padding: 0;
  overflow: hidden;
}

.sidebar-product-list>li {
  border-bottom: 1px solid #e6e6e6;
}

.sidebar-product-list>li:last-child {
  border-bottom: none;
}

.sidebar-product-list .product-widget {
  border-radius: 0;
  box-shadow: none;
  padding: 5px;
}

.sidebar-product-list .product-widget:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.sidebar-product-list .product-img-wrap {
  float: left;
  width: 35%;
  max-width: 100px;
  margin: 0;
}

.sidebar-product-list .product-info {
  float: left;
  width: 65%;
  padding: 5px 0px 0px 10px !important;
}

.sidebar-product-list .product-info-title {
  letter-spacing: unset;
  text-decoration: none;
}

/****** End Sidebar Product List ******/
/****** Quick View Modal ******/
#quickViewModal .close {
  height: 36px;
  width: 36px;
  font-weight: lighter;
  font-size: 3em;
}

#quickViewModal .product-single {
  margin-top: 25px;
}

.product-list-wrapper .product .product-link,
.product-widget .product-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 4;
  text-indent: 99999;
}

.product-widget .product-link:focus,
.product-widget .product-link:active {
  outline: 0 !important;
}

.product-widget .product-info {
  padding: 5px 3px;
}

.product-widget .product-info-title {
  font-size: 13px;
  max-height: 2.5em;
  -webkit-line-clamp: 2;
}

.product-widget .product-info-price {
  font-size: var(--font-size-lg);
}

.product-widget .product-info-price span.old-price {
  font-size: var(--font-size) !important;
}

.product-widget .product-info-price span.old-prices {
  font-size: var(--font-size) !important;
}

.product-widget .product-info-rating {
  font-size: var(--font-size-lg);
}

.offered-product-widget {
  display: block;
  height: 150px;
  width: 100%;
  margin: 15px 0;
}

.offered-product-widget-img {
  display: block;
  float: left;
  height: 150px;
  width: auto;
  border-radius: 0px;
}

.offered-product-widget-img img {
  height: 100%;
  width: auto;
}

.offered-product-widget-content {
  padding: 5px 10px;
  margin-inline-start: 160px;
  height: 150px;
}

.offered-product-widget h2 {
  margin-top: 0;
  font-weight: 400;
  font-size: var(--font-size-xxl);
}

.offered-product-widget-text {
  display: block;
  font-size: var(--font-size);
}

@media screen and (max-width: 375px) {
  .product-widget .product-info-rating {
    font-size: 11px;
    line-height: 11px;
    min-height: 11px;
  }

  .product-widget .product-info-title {
    font-size: var(--font-size-sm);
  }

  .product-widget .product-info-price {
    font-size: var(--font-size-sm);
  }

  .product-single .product-info-price {
    margin-top: 13px;
  }
}

#width_tmp_select {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.dynamic-shipping-rates {
  cursor: pointer;
}

.dynamic-shipping-rates i.fa-caret-square-o-down {
  color: var(--secondary-text);
  margin-inline-start: 3px;
}

.owl-carousel:not(.owl-loaded) {
  opacity: 0;
  visibility: hidden;
}

.product-carousel:hover .owl-nav .owl-next,
.product-carousel:hover .owl-nav .owl-prev,
.big-carousel:hover .owl-nav .owl-next,
.big-carousel:hover .owl-nav .owl-prev,
.small-carousel:hover .owl-nav .owl-next,
.small-carousel:hover .owl-nav .owl-prev,
.featured-categories:hover .owl-nav .owl-next,
.featured-categories:hover .owl-nav .owl-prev {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  transform: var(--transition);
  box-shadow: var(--box-shadow);
  background-color: var(--gray);
}

.owl-nav button:focus,
.owl-nav button:active {
  outline: 0 !important;
  outline-offset: 0 !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.owl-nav button span {
  font-size: var(--font-size-xxl);
}

.owl-nav button:hover span {
  color: var(--white);
  /* background: var(--gray); */
}

.owl-nav button.owl-prev {
  transform: translate3d(-8px, 0, 0);
  left: 0;
}

.owl-nav button.owl-next {
  transform: translate3d(8px, 0, 0);
  right: 0;
}

.owl-nav button {
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  background: none;
  transition: var(--transition);
  font-size: var(--font-size-xl);
  position: absolute;
  top: 25%;
  width: 40px;
  height: 99px;
  color: var(--secondary-text);
  margin-top: -20px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
}

.carousel-img-only {
  margin-bottom: 10px;
}

.carousel-img-only .owl-nav button {
  top: 38%;
}

.small-carousel.carousel-img-only .owl-nav button {
  top: 23%;
}

.owl-dots {
  display: none;
}

.outline-effect {
  transition: var(--transition);
}

.outline-effect:hover {
  outline: 3px double var(--gray);
  outline-offset: -15px;
}

.container.w-full>.row>[class^="col-"],
.row.featured>[class^="col-"] {
  padding-inline-start: 7.5px;
  padding-inline-end: 7.5px;
  margin-bottom: 15px;
}

@media (min-width: 992px) {
  .row.featured>[class^="col-"]:first-child {
    padding-inline-start: 0px;
  }

  .row.featured>[class^="col-"]:last-child {
    padding-inline-end: 0px;
  }
}

.container.w-full>.row>[class^="col-"]:first-child {
  padding-inline-start: 15px;
}

.container.w-full>.row>[class^="col-"]:last-child {
  padding-inline-end: 15px;
}

.container.w-full>.row>.col-md-12,
.row.featured>.col-md-12 {
  padding-inline-start: 0px;
  padding-inline-end: 0px;
}

.cover-img-wrapper {
  position: relative;
  color: var(--white);
  background-color: var(--primary-text);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 200px;
  /* max-height: 400px; */
  width: 100%;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
}

.cover-img-wrapper::before {
  position: absolute;
  content: '';
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: -1;
}

.page-cover-caption {
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  z-index: 2;
}

/* .brand-cover-img-wrapper .page-cover-caption,
.store-cover-img-wrapper .page-cover-caption {
  left: unset;
  width: 100%;
  text-align: center !important;
} */

.page-cover-title {
  font-size: var(--font-size-xxl);
  display: block;
  /*margin: 5px 0px;*/
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 1px 2px var(--gray);
  letter-spacing: 2px;
}

.page-cover-title a {
  color: inherit;
}

.best-under {
  margin-bottom: 20px;
}

.selectBoxIt.ship_to {
  width: 250px !important;
}

.selectBoxIt.ship_to span {
  color: var(--dark);
}

.shopping-cart-wrapper {
  border: 1px solid var(--gray);
}

.shopping-cart-wrapper a {
  color: inherit;
}

.shopping-cart-wrapper a:hover {
  color: var(--primary-color);
}

.shopping-cart-wrapper.selected {
  padding-top: 10px !important;
  background-color: var(--light) !important;
  box-shadow: var(--box-shadow);
}

.shopping-cart-wrapper .logo-wrapper img.vendor-logo {
  width: 100px;
  max-height: 50px;
  object-fit: cover;
  object-position: center;
}

.shopping-cart-wrapper .cart-payment-options .form-group label {
  font-size: var(--font-size);
  letter-spacing: 0.6px;
  color: var(--primary-text);
  margin-bottom: 7px;
}

.shopping-cart-wrapper .cart-payment-options .form-group .checked+span,
.shopping-cart-wrapper .cart-payment-options .form-group label:hover {
  color: var(--primary-color);
  letter-spacing: 0.8px;
}

.shopping-cart-wrapper .form-control,
.shopping-cart-wrapper .input-group-btn button {
  height: 44px;
}

.checkout-area .shopping-cart-wrapper textarea.form-control {
  min-height: 120px;
}

.shopping-cart-wrapper .input-group .address_title {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.shopping-cart-header {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 5px 0 10px 0;
}

.shopping-cart-header .deliver-to {
  font-size: var(--font-size-lg);
  padding: 2px 5px;
}

.shopping-cart-header .deliver-to a {
  background-color: var(--light);
  padding: 3px 8px;
  color: var(--primary-color);
  border: none;
  transform: var(--transition);
}

.shopping-cart-header .deliver-to a:hover {
  color: var(--primary-text);
}

.shopping-cart-item-table {
  margin-bottom: 0px;
}

.profile-body .tab-pane #filterBtn {top: -16px}
.tab-pane .product-2nd-parent {
  margin: 15px 0 0 !important;
}

/* Carts Page */
.shopping-cart-item-table>tfoot>tr>td,
.shopping-cart-item-table>thead>tr>th {
  font-weight: 400;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--light);
  text-transform: uppercase;
}

.shopping-cart-summary:not(.checkout-area .shopping-cart-summary) {margin-bottom: 75px;}

.shopping-cart-summary ul {
  list-style: none;
  margin: 20px 0;
}

.shopping-cart-summary>li {
  padding: 10px;
  overflow: hidden;
}

.shopping-cart-summary>li>span {
  float: left;
  width: 50%;
}

.shopping-cart-summary>li>span.badge.badge-dark {
  width: auto;
  margin: 5px;
}

.shopping-cart-summary>li>span:last-child {
  text-align: right;
  text-transform: capitalize;
}

.shopping-cart-summary u {
  cursor: pointer;
}

.shopping-cart-summary>li {
  letter-spacing: 1px;
  border-bottom: 1px solid var(--light);
}

.shopping-cart-summary>li a {
  color: var(--primary-text);
}

.shopping-cart-summary>li .small {
  display: block;
}

.shopping-cart-item-table>tbody>tr>td {
  vertical-align: middle;
  padding: 5px;
  border-top: 1px solid var(--light);
}

.shopping-cart-item-table>thead>tr>th:last-child,
.shopping-cart-item-table>tbody>tr>td:last-child {
  padding: 0;
  width: 18px;
}

.shopping-cart-item-table>tfoot>tr>td {
  padding: 10px 5px;
  border-bottom: none;
}

.shopping-cart-summary>li:last-child {
  border-bottom: none;
  border-top: 1px solid var(--gray);
  font-weight: 500;
  font-size: var(--font-size-xxl);
  color: var(--primary-color);
}

.shopping-cart-wrapper .side-widget .cart-checkout-btns {
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.shopping-cart-wrapper .side-widget button {
  padding: 10px 30px;
  font-weight: 500;
}

.cart-item-tr img.item-img {
  width: 80px;
  height: 80px;
}

.table-shopping-qty {
  width: 35px;
}

.cart-item-remove {
  color: var(--secondary-text);
}

.shopping-cart-total {
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  text-align: right;
}

.widget-title {
  position: relative;
  font-size: 14px;
  margin: 15px 0;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
}

.side-widget h3.cart-summary-title {
  position: relative;
  font-size: var(--font-size);
  margin: 15px 10px 10px;
  font-weight: 500;
  font-size: var(--font-size-lg);
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
}

.side-widget h3.cart-summary-title span {
  position: relative;
  background: var(--light);
  padding-inline-end: 10px;
  margin: 0 0 20px;
  z-index: 1;
}

.side-widget h3.cart-summary-title:after {
  position: absolute;
  content: "";
  top: 7px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--primary-color);
}

ul.key-feature-list {
  padding-inline-start: 10px;
}

ul.key-feature-list li {
  margin: 0px 0px 5px 28px;
  font-size: var(--font-size);
  color: var(--primary-text);
}

ul.key-feature-list li i {
  margin: 0 5px 0 -25px;
  /* font-weight: 600; */
  color: var(--primary-color);
}

.popover {
  border-radius: 0 !important;
  max-width: 550px;
}

.popover-content {
  padding: 5px;
}

.popover-title {
  color: var(--dark);
  font-weight: 300;
}

.popover #item-shipping-options-table {
  min-width: 430px;
}

@media screen and (max-width: 720px) {
  .popover #item-shipping-options-table {
    min-width: 100%;
  }
}

.popover-form table tr:last-child {
  border-bottom: 1px solid var(--gray);
}

.popover-form table tr td {
  color: var(--secondary-text);
  vertical-align: middle;
}

.popover-form .text-muted {
  color: #888 !important;
}

.popover-form .radio,
.popover-form .checkbox {
  margin: 0;
}

.popover-form .radio label,
.popover-form .checkbox label {
  padding-inline-start: 20px;
  margin-bottom: 0px;
  color: var(--secondary-text);
}

#payment-instructions>span>p:first-child {
  display: inline !important;
}

/******* Checkout page ********/
.customer-address-list .address-list-item {
  position: relative;
  cursor: pointer;
  color: var(--secondary-text);
  font-size: 13px;
  padding: 11px;
  min-height: 160px;
  border: 3px solid #efefef;
  margin-bottom: 4px;
}

.customer-address-list .address-list-item address {
  margin-bottom: 0px;
}

.customer-address-list .address-list-item.selected {
  border: 3px solid #428bca;
  background-color: var(--light);
  color: var(--primary-text);
  transition: var(--transition);
}

.customer-address-list .address-list-item.has-error {
  border-style: dashed;
  border-color: #a94442;
}

.address-list-item input[type="radio"].ship-to-address {
  position: absolute;
  top: 3px;
  right: 9px;
}

.warehouse-address-list .address-list-item {
  position: relative;
  cursor: pointer;
  color: var(--secondary-text);
  font-size: 13px;
  padding: 11px;
  min-height: 160px;
  border: 3px solid #efefef;
  margin-bottom: 4px;
}

.warehouse-address-list .address-list-item address {
  margin-bottom: 0px;
}

.warehouse-address-list .address-list-item.selected {
  border: 3px solid #428bca;
  background-color: var(--light);
  color: var(--primary-text);
  transition: var(--transition);
}

.warehouse-address-list .address-list-item.has-error {
  border-style: dashed;
  border-color: #a94442;
}

.address-list-item input[type="radio"].warehouse_id {
  position: absolute;
  top: 3px;
  right: 9px;
}
/******* Footer ********/
.main-footer {
  background-color: #e8e8e8;
  color: var(--secondary-text);
  font-size: 13px;
  padding: 20px 0 10px;
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
}

.main-footer h3 {
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--primary-text);
  margin-bottom: 10px;
}

.footer-subscribe-form h3 {
  font-weight: 200;
}

.footer-subscribe-form .footer-subscribe-input {
  width: 240px;
  padding: 5px;
  height: 32px;
  font-size: var(--font-size-sm);
  font-weight: 400;
  background-color: var(--white);
  border: 1px solid var(--gray);
}

.footer-subscribe-form .footer-subscribe-submit {
  height: 32px;
  min-width: 100px;
  margin: 0;
  padding: 0 15px;
  font-size: 13px;
  color: var(--white);
  border: 0;
  background-color: #e62e04;
}

.footer-subscribe-input:active,
.footer-subscribe-input:focus,
.footer-subscribe-submit:active,
.footer-subscribe-submit:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
}

.footer-subscribe-form .tips {
  margin: 10px 0 0 0;
  font-size: var(--font-size-sm);
}

.footer-social-networks {
  padding-top: 5px;
  margin-bottom: 10px;
  vertical-align: top;
}

ul.footer-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.footer-social-list>li {
  float: left;
  margin-inline-end: 8px;
}

.footer-social-list>li .fa {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--white);
}

.footer-social-list>li .fa.fa-facebook {
  background: #46629e;
}

.footer-social-list>li .fa.fa-twitter {
  background: #55acee;
}

.footer-social-list>li .fa.fa-pinterest {
  background: #cd2129;
}

.footer-social-list>li .fa.fa-instagram {
  background: #457399;
}

.footer-social-list>li .fa.fa-google-plus {
  background: #dd4b39;
}

.footer-social-list>li .fa.fa-youtube {
  background: #ff0000;
}

.footer-social-list li a:hover {
  background: #282828;
  text-decoration: none;
}

.footer-link-list {
  padding-inline-start: 0px;
  margin-bottom: 10px;
}

.footer-link-list li {
  margin: 0;
  list-style: none;
  line-height: 24px;
}

.footer-link-list li a {
  color: var(--secondary-text);
  font-size: var(--font-size-sm);
}

@media screen and (max-width: 375px) {
  .footer-subscribe-form .footer-subscribe-input {
    width: 169px;
  }
}

/* Helper Footer */
.user-helper-footer {
  position: relative;
  background: #262626;
  color: var(--white);
  padding-top: 30px;
  border-top: 2px solid var(--secondary-text);
}

.contact-info .media,
.contact-info .media .media-body h4 {
  color: var(--primary-text);
  font-size: var(--font-size-lg) !important;
  font-weight: lighter !important;
  letter-spacing: 1px;
}

.contact-info .media>.pull-left {
  padding-inline-end: 5px;
}

.contact-info .media .media-body h4 {
  margin-top: 0px;
}

/* Coupon Cards */
.customer-coupon-lists,
.customer-gift-card-lists {
  padding: 0 10px;
}

.customer-coupon-lists .coupon-item,
.customer-gift-card-lists .gift-card-item {
  display: block;
  color: var(--light);
  min-height: 30px;
  text-align: center;
  background: #ff6600;
  padding: 12px 0;
  border-radius: var(--border-radius);
}

.customer-coupon-value,
.customer-gift-card-value {
  display: block;
  font-size: 24px;
}

.customer-coupon-lists .customer-coupons-limit {
  display: block;
  font-size: 9px;
}

.customer-coupons-expired .coupon-item,
.customer-gift-card-expired .gift-card-item {
  background: var(--secondary-text);
}

.customer-coupons-expired .coupon-item,
.customer-gift-card-expired .gift-card-item {
  color: var(--secondary-text);
}

/*
 * Component: Info Box
 */
.info-box {
  display: block;
  min-height: 90px;
  background: var(--white);
  width: 100%;
  box-shadow: var(--box-shadow);
  border-radius: 0px;
  margin-bottom: 15px;
}

.info-box-icon {
  border-radius: 0px;
  display: block;
  float: left;
  height: 90px;
  width: 90px;
  text-align: center;
  font-size: 45px;
  line-height: 90px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.2);
}

.info-box-content {
  padding: 15px 5px 15px 10px;
  font-weight: lighter;
  letter-spacing: 1px;
  margin-inline-start: 90px;
}

.info-box[class*="bg-"] a {
  color: var(--primary-text) !important;
}

.info-box-number {
  display: block;
  font-size: 30px;
}

.info-box-text {
  display: block;
  font-size: var(--font-size);
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
  text-overflow: ellipsis;
}

/* notice box */
.notice {
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid transparent;
  border-inline-start: 6px solid #7f7f84;
  margin-bottom: 10px;
}

.notice-sm {
  padding: 10px;
  font-size: 80%;
}

.notice-lg {
  padding: 35px;
  font-size: large;
}

.notice-success {
  border-color: #80d651;
}

.notice-success>strong {
  color: #80d651;
}

.notice-info {
  border-color: #45abcd;
}

.notice-info>strong {
  color: #45abcd;
}

.notice-warning {
  border-color: #feaf20;
}

.notice-warning>strong {
  color: #feaf20;
}

.notice-danger {
  border-color: #d73814;
}

.notice-danger>strong {
  color: #d73814;
}

/*
 * Blog styles
 */
h1.blog-post-title {
  margin: 15px 0;
  font-size: 36px;
  line-height: 1.1;
}

h1.blog-post-title a {
  color: var(--primary-text);
  text-decoration: none;
}

.blog-post-excerpt {
  font-size: var(--font-size);
  line-height: 1.5;
  font-weight: 300;
  color: #727272;
}

.blog-post-body {
  font-size: var(--font-size-lg);
  line-height: 1.4em;
}

.blog-post-body p {
  margin-bottom: 30px;
}

.blog-post iframe,
.blog-post p img,
.blog-post img {
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 20px 0;
}

.blog-post-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: var(--font-size);
  color: #7a7a7a;
  font-style: italic;
  margin-bottom: 15px;
}

.blog-post-meta>li {
  float: left;
  margin-inline-end: 5px;
  padding-inline-end: 10px;
  position: relative;
}

.blog-sidebar-section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
}

.widget-title-sm {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 9px;
}

.blog-sidebar-posts>li h5 {
  font-size: var(--font-size-lg);
  font-weight: 100;
  line-height: 1.1;
  margin-bottom: 0px;
  letter-spacing: 1;
}

.blog-sidebar-posts>li h5 a {
  text-decoration: none;
  color: #474747;
}

.blog-sidebar-tags {
  list-style: none;
  padding: 0;
  overflow: hidden;
}

.blog-sidebar-tags>li {
  float: left;
  margin-inline-end: 7px;
  margin-bottom: 7px;
}

.blog-sidebar-tags>li>a {
  text-decoration: none;
  display: inline-block;
  font-size: var(--font-size-sm);
  padding: 3px 10px;
  background: var(--white);
  color: var(--primary-text);
  border: 1px solid #727272;
  border-radius: 15px;
}

.comments-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  margin-bottom: 25px;
  overflow: hidden;
}

.comment .comment-author {
  float: left;
  margin-inline-end: 10px;
}

.comment .comment-author img {
  border-radius: 50%;
}

.comment .comment-author-name {
  font-size: 13px;
  color: #727272;
  margin: 0;
}

.comment .comment-inner {
  display: table;
}

.comment .comment-content {
  margin: 3px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e6e6e6;
}

/*
 * Shop Profile modal widget
 */
.box-widget {
  border: none;
  position: relative;
  margin-bottom: 20px;
}

.widget-shop .widget-shop-header {
  padding: 22px;
  margin-bottom: 10px;
  height: 120px;
  border-radius: 0px;
  color: var(--white) !important;
  opacity: 0.9;
  background-size: 100% 120px;
  background-repeat: no-repeat;
  background-color: #00a7d0 !important;
}

.widget-shop .widget-shop-name {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: var(--font-size-xxl);
  font-weight: 300;
  text-shadow: var(--box-shadow);
}

.widget-shop .widget-shop-image {
  position: absolute;
  display: flex;
  height: 100px;
  background-color: var(--white);
  border-radius: 50%;
  top: 65px;
  left: 50%;
  margin-inline-start: -50px;
}

.widget-shop .widget-shop-image>img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.description-block {
  display: block;
  margin: 10px 0;
  text-align: center;
  font-weight: 100;
}

.description-block>.description-header {
  padding: 0;
  font-weight: 400;
  font-size: var(--font-size-lg);
}

.description-block>.description-text {
  text-transform: uppercase;
}

.category-banner-img-wrapper .banner {
  margin-bottom: 10px;
  padding: 20px 10px;
  background-color: var(--primary-text);
  color: var(--white);
}

.form-btn {
  display: inline-block !important;
}

.message-inbox td,
.message-inbox a:not(.btn) {
  color: var(--primary-text);
}

.message-inbox img.seller-info-logo {
  max-width: 35px;
  max-height: 35px;
  margin-inline-end: 5px;
}

.message-inbox .mailbox-subject {
  color: #6e6e6e;
}

.message-inbox .mailbox-subject span {
  color: var(--primary-text);
  font-weight: 600;
}

.dashboard-section table td {
  line-height: 34px !important;
}

.dashboard-section table .label {
  margin-top: 10px;
}

.account-sidebar-nav li:not(:last-child) {
  border-bottom: 1px solid var(--light);
}

.account-sidebar-nav li.active {
  background: var(--primary-color);
  color: var(--white);
}

.account-sidebar-nav li a {
  display: block;
  line-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
  color: inherit;
  transition: var(--transition);
}

.account-sidebar-nav li:not(.active):hover a {
  color: var(--primary-color);
  letter-spacing: 0.3px;
}

.account-sidebar-nav li a i {
  margin-inline-end: 5px;
}

.account-sidebar-nav-title {
  display: none;
}

.my-info-details {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  background: var(--light);
  border-top: 0;
  color: var(--secondary-text);
}

.my-info-details ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
}

.my-info-details li.devider {
  color: var(--primary-color);
}

.my-info-details span.v {
  color: var(--primary-color);
  font-size: var(--font-size-xxl);
  height: 24px;
  line-height: 24px;
  display: block;
}

.my-info-details span {
  display: inline-block;
  margin: 0 auto 5px;
  width: 100%;
  text-align: center;
  color: var(--primary-text);
}

.my-info-container .me-info-block {
  height: 66px;
}

.my-info-container .my-photo-block {
  float: left;
  width: 70px;
  position: relative;
}

.my-info-container .my-photo-block img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.my-info-container .my-info {
  float: left;
  margin-inline-start: 10px;
}

.my-info-container .my-info .name span {
  font-size: var(--font-size-xl);
}

.my-info-container .my-info .messages {
  float: left;
  color: var(--secondary-text);
}

.simplecolorpicker.inline {
  display: inline-block;
}

.simplecolorpicker span {
  margin: 0 10px 0 0;
}

.simplecolorpicker.icon,
.simplecolorpicker span.color {
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
  box-shadow: var(--box-shadow);
}

.simplecolorpicker.icon:after,
.simplecolorpicker span.color:after {
  content: "\00a0\00a0\00a0\00a0";
  /* Spaces */
}

.simplecolorpicker span.color:hover,
.simplecolorpicker span.color[data-selected] {
  box-shadow: inset 0 0 0 2px #ff6600, inset 0 0 0 3px var(--white);
}

.simplecolorpicker span.color:focus,
.simplecolorpicker span.color:active {
  outline: none;
}

/* Select to radio button */
.radioSelectContainer {
  margin-top: -15px;
}

.radioSelectContainer>select {
  display: none;
}

.radioSelectContainer>label {
  display: inline-block;
  margin-inline-start: 0px !important;
  margin-bottom: 5px !important;
  margin-inline-end: 9px;
  cursor: pointer;
  height: 32px;
  line-height: 32px !important;
  border-radius: 4px;
  box-shadow: var(--box-shadow);
  white-space: nowrap;
}

.radioSelectContainer>label>span {
  padding: 0px 10px;
  text-align: center;
  display: block;
  font-weight: normal;
}

.radioSelectContainer>label>input {
  position: absolute;
  z-index: -9999;
}

.radioSelectContainer>label>span:hover,
.radioSelectContainer>label>span.highlight,
.radioSelectContainer>label>span.selected {
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 2px var(--primary-color);
}

.radioSelectContainer>label>span.deselect {
  box-shadow: inset 0 0 0 2px var(--gray) !important;
}

.vertical-helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.deal-of-day-slider-item img,
.slick-slide img {
  width: 100%;
  background-color: var(--white);
  border-radius: var(--border-radius);
}

.slick-dots li button:before {
  content: none;
}

.header-nav-items .menu-link i.menu-icon {
  margin: 0 7px 2px 0;
  font-weight: normal;
  font-size: unset;
}

.thumb-lists .card-box {
  border-radius: var(--border-radius);
}

.thumb-lists .card-box:hover {
  border-color: var(--primary-color);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.thumb-lists .card-box:hover h4 {
  color: var(--primary-color);
  letter-spacing: 0.2px;
}

.thumb-lists h4 {
  font-weight: 400;
}

.thumb-lists a {
  text-decoration: none;
  color: inherit;
}

.thumb-lists img:not(.verified-badge) {
  vertical-align: middle;
  border-radius: 50%;
  max-height: 110px;
  max-width: 110px;
}

.thumb-list-name img {
  width: 20px;
  height: 20px;
}

.thumb-lists .btn-default:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

@media screen and (max-width: 720px) {
  .flash-deal-product-inner {
    margin-bottom: 10px !important;
  }

  .flash-deal-product-name h3 {
    margin: 0 15px 15px 15px !important;
    /* font-size: var(--font-size-xxl) !important; */
  }

  .cover-img-wrapper {
    min-height: 100px;
    max-height: 250px;
  }
}

.page-cover-desc {padding-inline: 20px;margin-top: 10px;}

@media screen and (max-width: 375px) {
  .product-cat-list-text {
    top: 20px;
    left: 30px;
  }

  .page-cover-title {
    font-size: var(--font-size-lg);
  }

  .page-cover-desc {
    font-size: 13px;
  }

  .shopping-cart-wrapper .cart-summary-title {
    margin-top: 15px !important;
  }

  .product-info-rating {
    min-height: 11px;
  }

  .product-info-seller-name {
    font-size: var(--font-size-sm);
  }

  .product-info-title {
    margin: unset;
    font-size: var(--font-size-lg);
  }

  .product-info-price {
    margin-top: 16px !important;
    font-size: 23px;
  }

  .product-info .product-info-availability,
  .product-info .product-info-condition {
    font-size: var(--font-size);
    color: #067d62 !important;
  }

  .product-info .product-info-condition #item_condition,
  .product-info .product-info-condition sup {
    font-weight: 400 !important;
  }

  .product-single ul.product-info-feature-labels {
    display: block;
    margin-bottom: 16px;
  }

  .share a {
    width: 33px;
    height: 30px;
    line-height: 30px;
  }

  .product-single .product-info-options #summary-total {
    font-size: 24px;
  }

  #buy-now-btn {
    display: block;
    margin-bottom: 10px;
  }

  #product-desc-section iframe {
    height: auto !important;
  }

  #product-desc-section img {
    width: 100% !important;
    height: auto !important;
    margin: 10px auto !important;
  }

  .banner-content-title {
    margin-bottom: 5px;
  }

  .banner-content-left,
  .banner-content-right {
    top: 15% !important;
  }

  .ei-slider-thumbs,
  .banner-content-text {
    display: none !important;
  }

  .banner-content-btn {
    margin: 10px 0 !important;
  }

  .banner-content-btn a {
    padding: 8px 20px !important;
    font-size: 13px;
  }
}

.slick-dots {
  position: absolute;
  bottom: 0px;
}

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

.slick-dots li button {
  position: relative;
  width: 40px;
  height: 3px;
  padding: 0px;
  background-color: var(--gray);
  border-radius: var(--border-radius-3);
  opacity: 0.25;
}

.slick-dots li.slick-active button {
  background-color: var(--light);
  opacity: 0.75;
}

@media screen and (max-width: 991px) {
  .slick-dots {
    display: none !important;
  }
}

.flash-deal {
  padding-top: 25px;
}

.flash-deal .sell-header-title {
  display: flex;
  align-items: center;
}

.flash-deal-product {
  background: #fffff5;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  padding: 15px;
  overflow: hidden;
  margin-top: 10px;
}

.flash-deal-product-inner {
  display: flex;
  flex-wrap: wrap;
  /* padding: 15px 0px; */
}

.flash-deal-product-image {
  position: relative;
  width: 250px;
}

.flash-deal-product-image img {
  width: 100%;
  display: block;
}

.flash-deal-product-details {
  width: calc(100% - 250px);
  padding: 0 5px;
}

.flash-deal-product-name {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--primary-text);
  font-size: var(--font-size-xl);
  font-weight: normal;
}

.flash-deal-product-price {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}

.flash-deal-product-price span {
  display: block;
}

.flash-deal-product-price .currant-price {
  font-weight: 500;
  font-size: var(--font-size-xl);
  color: var(--primary-color);
}

.flash-deal-product-price .old-price {
  font-weight: normal;
  font-size: 18;
  color: var(--secondary-text);
  text-decoration: line-through;
}

.flash-deal-product-price .offer {
  color: var(--light);
  background: #ef0d0d;
  border-radius: var(--border-radius-3);
  padding: 3px 10px;
}

.flash-deal-product-description p {
  height: 78px;
  overflow: hidden;
  text-align: justify;
}

.flash-deal-product-rating {
  display: flex;
  margin: 10px 0px;
}

.flash-deal-product-rating a {
  color: var(--primary-light);
  font-size: var(--font-size-lg);
  margin-inline-end: 10px;
}

.flash-deal-product-availability {
  display: flex;
  margin-bottom: 10px;
}

.flash-deal-product-availability span {
  color: var(--secondary-text);
}

.flash-deal-product-availability p {
  margin-inline-start: 10px;
}

.flash-deal-product-sell-time h3 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px 15px;
  margin-top: 15px;
  width: 100%;
  color: var(--red);
  background: var(--light);
  font-size: var(--font-size);
  font-weight: normal;
  border-radius: var(--border-radius);
}

.flash-deal-product-sell-time h3 .spacing {
  margin: 0px 10px;
}

.flash-deal-product-sell-time h3 span {
  text-align: center;
}

.flash-deal-product-badge {
  position: absolute;
  top: 15px;
  left: 0;
}

.flash-deal-product-badge span {
  font-size: var(--font-size);
  color: var(--primary-text);
  padding: 2px 8px;
  border-radius: var(--border-radius-3);
  outline: 1px solid var(--primary-dark);
}

.flash-deal-product-utility {
  margin-top: 15px;
  transition: var(--transition);
}

.flash-deal-product-utility .button {
  background: var(--light);
  color: var(--primary-text);
  font-weight: 500;
  display: inline-block;
  text-align: center;
  padding: 8px 15px;
  margin-inline-end: 5px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.flash-deal-product-utility .button:hover {
  background-color: var(--primary-dark);
  color: var(--white);
}

.flash-sell-timer {
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.flash-sell-timer-time {
  padding: 5px 20px;
  color: var(--light);
  background-color: var(--primary-color);
}

.flashSellBg {
  display: none;
}

.fbs-total {
  font-size: 14px;
  font-weight: 500;
  word-spacing: 3px;
  letter-spacing: .04rem;
  text-transform: uppercase;
}

@media screen and (max-width: 991px) {
  .flash-deal {
    padding-top: 0px;
  }

  .flash-deal .sell-header {
    display: block;
  }

  .flash-deal .flash-sell-timer {
    width: 100%;
    margin: 0;
    display: flex;
    padding-top: 10px;
  }

  .flash-deal-product {
    margin-top: 30px;
    padding: 5px;
  }

  .flash-deal .best-deal-arrow {
    float: right;
    margin-top: -85px;
  }
}

/*@media screen and (max-width: 991px) and (max-width: 420px) {*/
/*  .flash-deal .flash-sell-timer {*/
/*    display: block;*/
/*    padding: 5px 0 0 0;*/
/*  }*/

/*  .flash-deal-product-name {*/
/*    padding: 0 10px;*/
/*  }*/

/*  .flash-deal-product-details {*/
/*    padding: 10px;*/
/*  }*/
/*}*/

@media screen and (max-width: 1199px) {
  .flash-deal-product-inner {
    display: block;
    width: 100%;
  }

  .flash-deal-product-image {
    margin: 0 auto;
  }

  .flash-deal-product-details {
    width: 100%;
  }

  .flash-deal-product-sell-time h3 {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .flash-deal-product-utility {
    display: flex;
    margin-bottom: 10px;
    justify-content: center;
  }
}

.sell-header {
  display: flex;
  margin-bottom: 15px;
}

.sell-header a {
  color: inherit;
  font-size: var(--font-size-xl);
}

.sell-header-title {
  margin-inline-end: 10px;
}

.sell-header-title h2 {
  color: var(--primary-text);
  font-size: var(--font-size-xxl);
  line-height: 32px;
  letter-spacing: 0.9px;
  text-transform: capitalize;
  font-weight: 400;
}

.sell-header-title h2::after,
.product-list-col-header .sell-header-title::after {
  content: '';
  display: block;
  width: 55%;
  height: 2px;
  background: var(--primary-color);
  transition: width 500ms;
}

.sell-header-title h2:hover::after,
.product-list-col-header .sell-header-title:hover::after {
  width: 100%;
}

.sell-header-title i {
  color: var(--primary-color);
}

.sell-header img.brand-logo {
  max-width: 120px;
}

@media screen and (max-width: 991px) {
  .sell-header {
    justify-content: space-between;
  }

  .sell-header img.seller-info-logo {
    width: 60px;
  }
}

@media screen and (max-width: 1199px) {
  .sell-header-title h2 {
    font-size: var(--font-size-xl);
    line-height: 28px;
  }
}

.product-deal-header {
  max-height: 25px;
  max-width: 480px;
  min-width: 400px;
  padding-left: 110px;
  overflow: hidden;
  background-image: url('/images/flash_sale.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.product-deal-header .flash-sell-timer-time {
  color: var(--red);
}

.product-deal-header .ends_in_text {
  color: var(--primary-text);
}

@media screen and (max-width: 359px) {
  .product-deal-header {
    margin-inline-end: 0;
  }
}

.header-line {
  display: flex;
  align-items: center;
  flex: 1;
  opacity: 0;
}

@media screen and (max-width: 991px) {
  .header-line {
    display: none;
  }
}

.header-line span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--secondary-text);
}

@media screen and (max-width: 991px) {
  .best-deal-col {
    padding-bottom: 0;
  }
}

.best-deal-arrow {
  margin-inline-start: 10px;
}

.best-deal-arrow ul {
  display: flex;
  align-items: center;
  height: 100%;
}

.best-deal-arrow ul li {
  margin: 0px 5px;
}

.feature-items button.slick-prev,
.feature-items button.slick-next,
.best-deal-arrow ul .slider-arrow {
  width: 35px;
  height: 35px;
  background: none;
  text-align: center;
  color: var(--secondary-text);
  border: 1px solid var(--light);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}

.feature-items button.slick-prev:hover,
.feature-items button.slick-next:hover,
.best-deal-arrow ul .slider-arrow:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.feature-items button.slick-prev:hover:before,
.feature-items button.slick-next:hover:before {
  color: var(--white);
}

.deal-of-day {
  background: var(--dark);
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.deal-of-day-inner {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.deal-of-day-slider {
  width: 280px;
}

.deal-of-day-slider .slick-dots {
  bottom: -35px;
}

.deal-of-day-label {
  position: absolute;
  top: -25px;
  right: -85px;
  width: 200px;
  height: 80px;
  padding-top: 35px;
  color: var(--dark);
  background: var(--yellow);
  font-weight: bold;
  font-size: 1.25em;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* z-index: 2; */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.deal-of-day-details {
  width: calc(100% - 280px);
  padding-inline-start: 30px;
  padding-inline-end: 0px;
}
/* .deal-of-day-details {
  padding: 0 0px;
} */
.deal-of-day-details-name a {
  display: block;
  overflow: hidden;
  line-height: 1.2em;
  color: var(--light);
  font-weight: 400;
  font-size: var(--font-size-xl);
}

.deal-of-day-details-name a:hover {
  color: var(--primary-color);
}

.deal-of-day-details-price {
  margin: 10px 0px;
}

.deal-of-day-details-price p {
  display: flex;
  align-items: center;
}

.deal-of-day-details-price .regular-price {
  color: var(--primary-color);
  font-size: var(--font-size-xxl);
  font-weight: 500;
}

.deal-of-day-details-price .old-price {
  font-weight: normal;
  font-size: var(--font-size-lg);
  text-decoration-line: line-through;
  color: var(--secondary-text);
  margin-inline-start: 10px;
}

.deal-of-day-details-description {
  margin: 15px 0px;
}

.deal-of-day-details-description p {
  color: var(--light);
}

.deal-of-day-details-list h3 {
  color: var(--primary-color);
  font-size: var(--font-size-lg);
  margin: 15px 0 10px;
}

.deal-of-day-details-list li {
  margin-top: 5px;
  color: var(--light);
}

.deal-of-day-details-list li i {
  color: var(--yellow);
  margin-inline-end: 6px;
}

.deal-of-day .deal-of-day-btns a {
  color: var(--primary-color);
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  transition: var(--transition);
}

.deal-of-day .deal-of-day-btns .sc-add-to-cart,
.deal-of-day .deal-of-day-btns .sc-add-to-cart span {
  line-height: 38px;
  background-color: var(--yellow);
  color: var(--black);
  font-size: var(--font-size-lg);
  text-align: center;
  padding: 0px 25px;
  margin-inline-end: 10px;
  border-radius: var(--border-radius-3);
  transition: var(--transition);
}

.deal-of-day .deal-of-day-btns a:hover {
  color: var(--light);
}

.deal-of-day .deal-of-day-btns .sc-add-to-cart:hover,
.deal-of-day .deal-of-day-btns .sc-add-to-cart:hover span {
  background-color: var(--primary-dark);
  color: var(--white);
}

@media screen and (max-width: 991px) {
  .deal-of-day {
    padding: 30px 20px;
    margin-bottom: 30px;
  }

  .deal-of-day-label {
    height: 50px;
    padding-inline-start: 20px;
    font-size: var(--font-size-sm);
  }

  .deal-of-day-details-name a {
    font-size: 19px;
  }

  .deal-of-day-details-price .regular-price {
    font-size: var(--font-size-sm);
  }

  .deal-of-day-details-price .old-price {
    font-size: var(--font-size);
    margin-inline-start: 7px;
  }

  .deal-of-day-details-description p {
    display: 14px;
  }

  .deal-of-day-details-list {
    display: none;
  }
  #profile-container .profile-header .profile-info {
    padding: 15px 15px 15px 15px !important;
  }
}

@media screen and (max-width: 767px) {
  .deal-of-day-inner {
    display: block;
    width: 100%;
  }

  .deal-of-day-slider .slick-dots {
    bottom: -45px;
  }

  .deal-of-day-slider {
    width: 100%;
    margin-bottom: 30px !important;
  }

  .deal-of-day-slider img {
    margin: 0 auto;
  }

  .deal-of-day-details {
    width: 100%;
    padding: 0 0px;
  }
}

.best-seller-item {
  padding: 7px 0px;
  margin: 3px 2px;
  outline: 1px solid transparent;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.best-seller-item .box-inner {
  display: flex;
  flex-wrap: wrap;
}

.best-seller-item:hover {
  outline: 1px solid var(--primary-color);
  cursor: pointer;
}

.best-seller-item:hover .best-seller-item-name {
  opacity: 0.6;
}

.best-seller-item:hover .best-seller-item-price,
.best-seller-item:hover .best-seller-item-rating {
  visibility: hidden;
}

.featured-vendors-cards .best-seller-item.border-animate {
  padding-inline: 5px;
  margin-top: 30px;
  box-shadow: 0 0 6px -3px rgba(0,0,0,.2);
}

.featured-vendors-cards .best-seller-item .best-seller-item-utility,
.featured-vendors-cards .best-seller-item .best-seller-item-name,
.featured-vendors-cards .best-seller-item .best-seller-item-price,
.featured-vendors-cards .best-seller-item .best-seller-item-rating {transition: all .2s linear !important;}

.best-seller-item-image {
  width: 90px;
}

.best-seller-item-image img {
  display: block;
  width: 100%;
}

.best-seller-item-details {
  width: calc(100% - 95px);
  padding-inline-start: 15px;
  position: relative;
}

.best-seller-item-name a {
  height: 40px;
  overflow: hidden;
  color: inherit;
  display: block;
}

.best-seller-item-name a:hover {
  color: var(--primary-color);
}

.best-seller-item-rating {
  display: flex;
}

.best-seller-item-rating a {
  color: var(--primary-light);
  margin-inline-end: 5px;
  font-size: var(--font-size-sm);
}

.best-seller-item-price {
  display: flex;
  align-items: center;
}

.best-seller-item-price .regular-price {
  color: var(--primary-color);
  font-weight: bold;
  font-size: var(--font-size-lg);
}

.best-seller-item-price .old-price {
  font-weight: normal;
  font-size: var(--font-size);
  color: var(--secondary-text);
  text-decoration: line-through;
  margin-inline-start: 10px;
}

.best-seller-item-utility {
  display: flex;
  flex-direction: column;
  position: absolute;
  visibility: hidden;
  left: 15px;
  bottom: -20px;
  width: 95%;
  padding-top: 10px;
  background: var(--white);
  transition: bottom 400ms ease;
  z-index: -1;
}

.best-seller-item:hover .best-seller-item-utility {
  visibility: visible;
  bottom: 0px;
  z-index: 1;
}

.best-seller-item-utility .box-action-price {
  display: flex;
}

.best-seller-item-utility .horizon-btns {
  display: flex;
  justify-content: space-evenly;
}

.best-seller-item-utility .button {
  display: block;
  padding: 7px 15px;
  text-align: center;
  color: var(--primary-text);
  background-color: var(--light);
  border-radius: var(--border-radius);
  /* transition: var(--transition); */
}

.best-seller-item-utility .button-cart {
  padding: 7px 30px;
  background-color: var(--primary-color);
  color: var(--white);
}

@media screen and (max-width: 1199px) {
  .best-seller-item-utility .button-cart {
    padding: 6px 20px;
  }
}

.best-seller-item-utility .button:hover {
  background-color: var(--primary-dark);
  color: var(--white);
}

@media screen and (max-width: 991px) {
  .product-list-col {
    margin-top: 20px;
  }
}

.product-list-col-product {
  margin-top: 20px;
}

.product-cat-list-item {
  text-align: center;
}

.product-cat-list-item:hover .product-cat-list-text {
  color: var(--primary-color);
}

.product-cat-list-item img {
  border-radius: var(--border-radius);
}

.product-cat-list-text {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--primary-text);
}

@media screen and (max-width: 991px) {
  .product-cat-list-text {
    font-size: var(--font-size-lg);
    line-height: 22px;
  }
}

/* Hover annimations */
.border-animate {
  position: relative;
  outline: none !important;
  border: 1px solid transparent;
  transition: var(--transition);
}

.border-animate:before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  top: -1px;
  left: -1px;
  background: var(--primary-color);
  border-radius: 6px;
  -web-kit-transition: 600ms width ease 100ms;
  transition: 600ms width ease 100ms;
}

.border-animate:hover:before {
  width: calc(100% + 1px);
  -web-kit-transition: 600ms width ease 100ms;
  transition: 600ms width ease 100ms;
}

.border-animate:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  top: -1px;
  right: -1px;
  background: var(--primary-color);
  border-radius: 6px;
  -web-kit-transition: 600ms height ease 100ms;
  transition: 600ms height ease 100ms;
}

.border-animate:hover:after {
  height: calc(100% + 1px);
  -web-kit-transition: 600ms height ease 100ms;
  transition: 600ms height ease 100ms;
}

.border-animate .box-inner:after {
  position: absolute;
  width: 0;
  height: 1px;
  content: "";
  bottom: -1px;
  right: -1px;
  background: var(--primary-color);
  border-radius: 6px;
  -web-kit-transition: 600ms width ease 100ms;
  transition: 600ms width ease 100ms;
}

.border-animate:hover .box-inner:after {
  width: calc(100% + 1px);
  -web-kit-transition: 600ms width ease 100ms;
  transition: 600ms width ease 100ms;
}

.border-animate .box-inner:before {
  position: absolute;
  width: 1px;
  height: 0;
  content: "";
  bottom: -1px;
  left: -1px;
  background: var(--primary-color);
  border-radius: 6px;
  -web-kit-transition: 600ms height ease 100ms;
  transition: 600ms height ease 100ms;
}

.border-animate:hover .box-inner:before {
  height: calc(100% + 1px);
  -web-kit-transition: 600ms height ease 100ms;
  transition: 600ms height ease 100ms;
}

/* End Hover annimations */

.feature .best-deal-arrow {
  padding-inline-end: 100px;
}

@media screen and (max-width: 991px) {
  .feature .best-deal-arrow {
    padding: 0;
  }
}

@media screen and (max-width: 991px) {
  .feature .sell-header {
    display: block;
  }
}

.feature-tabs {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

@media screen and (max-width: 1199px) {
  .feature-tabs {
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

@media screen and (max-width: 991px) {
  .feature-tabs {
    padding: 6px 0;
    overflow-x: auto;
  }
}

.feature-tabs ul {
  display: flex;
}

.feature-tabs ul li {
  display: flex;
  /* align-items: center; */
  border: 1px solid var(--gray);
  padding: 2px 15px;
  margin-inline-end: 15px;
  border-radius: var(--border-radius);
  letter-spacing: 0.5px;
}

@media screen and (max-width: 991px) {
  .feature-tabs ul li {
    font-size: var(--font-size);
    line-height: 24px;
  }
}

.feature-tabs ul li:hover {
  color: var(--primary-color);
  /* border-bottom: 2px solid var(--light); */
  border-color: var(--primary-color);
}

.feature-tabs ul li.active {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: var(--box-shadow);
}

@media screen and (max-width: 991px) {
  .feature-tabs ul li.active {
    font-size: var(--font-size-lg);
    line-height: 24px;
  }
}

.feature-items-inner {
  display: flex;
}

.feature-items-inner:not(:first-child) {
  display: none;
}

.recent-header {
  padding-bottom: 26px;
}

.feature-brand-header {
  padding-bottom: 26px;
}

.feature-brand-content img.img-thumbnail {
  padding: 2px;
  border-radius: var(--border-radius);
}

.feature-brand-content img.img-thumbnail:hover {
  border-color: var(--primary-color);
  box-shadow: var(--box-shadow);
}

.best-under img {
  height: 200px;
}

.best-under-items-inner {
  display: flex;
}

.best-deals {
  padding-top: 0;
}

.best-deals-items-price {
  justify-content: center;
}

.best-deals-items-inner {
  display: flex;
}

.best-deals-img-left {
  padding-top: 45px;
  display: flex;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
}

.best-deals-img-right {
  padding-top: 45px;
  display: flex;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
  justify-content: flex-end;
}

.flashdeal-items-inner {
  display: flex;
}

.footer {
  background-color: var(--dark);
}

.footer-newsletter-box {
  padding: 38px 0;
  border-bottom: 1px solid var(--primary-dark);
}

@media screen and (max-width: 991px) {
  .footer-newsletter-box {
    padding: 30px 0;
  }
}

.footer-newsletter-box-content {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .footer-newsletter-box-content {
    padding-bottom: 20px;
  }
}

.footer-newsletter-box-icon {
  padding-inline-end: 20px;
}

@media screen and (max-width: 991px) {
  .footer-newsletter-box-icon {
    padding-inline-end: 10px;
  }
}

.footer-newsletter-box-text {
  color: var(--light);
}

.footer-newsletter-box-text h3 {
  font-weight: 600;
  text-transform: capitalize;
}

.footer-newsletter-box-text p {
  font-weight: 300;
}

@media screen and (max-width: 991px) {
  .footer-newsletter-box-text p {
    padding-top: 5px;
    font-size: var(--font-size-sm);
    line-height: 18px;
  }
}

.footer-newsletter-box-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-newsletter-box-form form {
  width: 100%;
}

.footer-newsletter-box-form-box {
  background-color: var(--white);
  border-radius: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-newsletter-box-form-box input {
  width: calc(100% - 140px);
  border-radius: 40px;
  border: none;
  font-weight: 400;
  font-size: var(--font-size);
  padding: 16px 0 16px 33px;
  color: var(--primary-text);
}

.footer-newsletter-box-form-box input::placeholder {
  color: var(--secondary-text);
}

@media screen and (max-width: 991px) {
  .footer-newsletter-box-form-box input {
    padding: 10px 0 10px 20px;
    width: 100%;
  }
}

.footer-newsletter-box-form-box button {
  background: var(--primary-color);
  border-radius: 40px;
  padding: 16px 38px;
  border: none;
  outline: none;
  color: var(--light);
  font-weight: 500;
  letter-spacing: 0.6px;
  transition: var(--transition);
}

.footer-newsletter-box-form-box button:hover {
  background-color: var(--primary-dark);
  color: var(--light);
}

@media screen and (max-width: 991px) {
  .footer-newsletter-box-form-box button {
    font-size: var(--font-size);
    padding: 10px 20px;
  }
}

.footer-content {
  padding: 40px 0 60px;
}

.footer-content .footer-brand-info i {
  padding: 6px 10px 0 0;
  width: 20px;
  color: var(--primary-color);
}

.footer-content-box-inner {
  padding-top: 5px;
}

.footer-logo img {
  max-width: 160px;
  margin-bottom: 15px;
}

.footer-content-box-inner a,
.footer-content-box-inner p {
  line-height: 22px;
  color: var(--secondary-text);
  transition: var(--transition);
}

.footer-content-box-inner a:hover {
  color: var(--primary-color);
}

.footer-content-box-title {
  padding: 5px 0 8px 0;
}

.footer-content-box-title h3 {
  font-size: var(--font-size-lg);
  color: var(--light);
}

.footer-content-box-links a {
  color: var(--secondary-text);
  line-height: 22px;
  transition: var(--transition);
}

.footer-content-box-links a:hover {
  color: var(--primary-color);
  border-bottom: 1px solid var(--light);
}

@media screen and (max-width: 991px) {
  .footer-content {
    padding: 20px 0;
    padding-bottom: 10px;
  }

  .footer-content-box {
    padding-bottom: 20px;
  }

  .footer-content-box-inner p,
  .footer-content-box-inner a {
    font-size: var(--font-size-sm);
    line-height: 16px;
  }

  .footer-content-box-title {
    padding-bottom: 7px;
  }

  .footer-content-box-title h3 {
    font-size: var(--font-size-lg);
    line-height: 22px;
  }

  .footer-content-box-links a {
    font-size: var(--font-size-sm);
    line-height: 16px;
  }
}

.footer-content-box-social ul {
  display: flex;
  flex-wrap: wrap;
}

.footer-content-box-social li {
  padding-inline-end: 8px;
  padding-bottom: 5px;
}

.footer-content-box-social a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.footer-content-box-social li a,
.footer-content-box-social li i {
  padding-inline-end: 0px;
  color: var(--primary-text);
}

@media screen and (max-width: 991px) {
  .footer-content-box-social a {
    width: 25px;
    height: 25px;
    font-size: var(--font-size-sm);
  }
}

.footer-content-box-social a:hover {
  background-color: var(--primary-color);
  color: var(--light);
}

.footer-content-box-social a:hover i,
.footer-content-box-social a:hover span {
  color: var(--light);
}

/* Copyright */
.copyright-area {
  background: var(--black);
  color: var(--white);
  box-shadow: var(--box-shadow);
  position: relative;
}

.copyright-text {
  float: right;
}

.copyright-area .links-list {
  list-style: none;
  margin: 15px 0;
  padding: 0;
}

.copyright-area .links-list>li {
  display: inline-block;
  margin-inline-end: 10px;
  font-size: var(--font-size);
  color: var(--secondary-text);
}

.copyright-area .links-list>li>a {
  color: var(--secondary-text);
  text-decoration: none;
  transition: var(--transition);
}

.copyright-area .links-list>li>a:hover {
  color: var(--primary-color);
}

.language {
  padding-bottom: 30px;
}

.language-modal {
  text-align: center;
  width: 400px;
  padding: 50px;
  border-radius: 15px;
  display: none;
}

.language-modal-select {
  padding: 20px 0;
}

.language-modal select {
  font-weight: normal;
  font-size: var(--font-size-lg);
  line-height: 22px;
  color: var(--secondary-text);
  border: 1px solid var(--secondary-text);
  outline: none;
  padding: 5px 10px;
  border-radius: 10px;
  width: 100%;
  max-width: 300px;
  cursor: pointer;
}

@media screen and (max-width: 991px) {
  .language-modal select {
    max-width: 200px;
  }
}

.slick-arrow {
  background: none;
  border: none;
  width: 35px;
  height: 35px;
  text-align: center;
  color: var(--secondary-text);
  cursor: pointer;
  border: 1px solid var(--secondary-text);
  border-radius: 50%;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slick-arrow:hover {
  background-color: var(--primary-dark);
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border: 1px solid transparent;
}

@media screen and (max-width: 320px) {
  .slick-arrow {
    width: 30px;
    height: 30px;
  }
  .d-xs-none {
    display: none;
  }
  .header-utility ul li {
    margin: 0 6px;
  }
  .flash-sell-timer-time {
    padding: 5px 5px;
    font-size: 12px;
  }
  .header-logo img {
    height: 25px;
  }
  .deal-of-day .deal-of-day-btns a {
    margin-inline-start: 0px !important;
  }
  .sc-product-item .product-single {
    margin-inline-start: 10px;
  }
  .product-single .btn {
    font-size: 15px;
  }
  #zcart_chat .chat {
    width: 190px !important;
  }
  #profile-container .profile-body .tab-content {
    margin: 0;
    padding: 0;
  }
  #profile-container .profile-body .container-fluid {
    margin: 0;
    padding: 0;
  }
  #profile-container .profile-body .best-seller-item-utility .button {
    padding: 4px 4px;
  }
  .cover-img-wrapper {
    min-height: 50px;
  }

  .no-gutters {
    margin: 0;
    padding: 0;
  }
  .best-seller-item-utility .button {
    padding: 3px 6px !important;
  }
}

.slick-prev {
  top: -30px;
  right: 50px;
  left: unset !important;
}

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

  .feature-items button.slick-prev,
  .feature-items button.slick-next {
    margin-top: 20px !important;
  }

  .slick-prev {
    top: -95px;
  }
}

@media screen and (max-width: 320px) {
  .slick-prev {
    right: 40px;
  }
}

.slick-prev:hover:before {
  color: var(--primary-color);
}

.slick-next {
  display: flex;
  align-items: center;
  justify-content: center;
  top: -30px;
  right: 0px;
}

@media screen and (max-width: 991px) {
  .slick-next {
    top: -95px;
  }
}

.slick-next:hover:before {
  color: var(--primary-color);
}

.slick-prev::before {
  content: "";
  font-size: var(--font-size-lg);
  color: var(--primary-text);
  font-family: "Font Awesome 5 Pro";
}

.slick-next::before {
  content: "";
  font-size: var(--font-size-lg);
  color: var(--primary-text);
  font-family: "Font Awesome 5 Pro";
}

.main-menu {
  display: none;
}

@media screen and (max-width: 991px) {
  .main-menu {
    display: block;
  }
  .flash-deal-product-image {
    width: auto;
  }
  .sc-product-item .product-single {
    margin-inline-start: 10px;
  }
}

.main-menu-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  padding: 10px;
  border-top: 1px dashed rgba(0,0,0,.3);
}

.main-menu-bottom-box {
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  column-gap: 10px;
}

.main-menu-bottom-item {flex: 1}

.main-menu-bottom a {
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 12px 0;
  border-radius: 8px;
  box-shadow: 0 0 9px -5px rgba(0, 0, 0, .6);
}

.main-menu-bottom a img {
  width: 20px;
}

.main-menu-bottom a i {
  font-size: var(--font-size-xl);
  color: var(--primary-color);
}

.main-menu-bottom span {
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: 16px;
  color: var(--primary-color);
}

.main-menu-top {
  background: var(--white);
  position: fixed;
  z-index: 2001;
  width: 300px;
  top: 0;
  transform: translateX(-100%);
  border-bottom: 1px dashed rgba(0,0,0,.3);
  transition: all 250ms linear;
}

.main-menu-top-box {
  padding: 12px 0;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
  gap: 10px;
}

.main-menu-top a.dd-selected {padding: 0;}
.main-menu-top a {
  color: var(--primary-text);
  position: relative;
}

.main-menu-top a img {
  width: 25px;
}

.main-menu-top a i {
  font-size: var(--font-size-xxl);
}

.main-menu-top a .badge {
  width: 16px;
  height: 16px;
  line-height: 16px;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  background: var(--primary-color);
  color: var(--light);

  font-weight: bold;
  font-size: var(--font-size-sm);
  margin: 0px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#languageChange .dd-options {
  white-space: nowrap;
  width: 130px !important;
  left: -3px;
  top: 27px;
}

#languageChange .dd-options > li > a > img {margin-inline-end: 10px;}

#currencyChange .dd-options {
  left: 0;
  top: 27px;
}

#currencyChange:not(.main-menu-top #currencyChange) {width: 100px !important;}
#mobile-lang:not(.main-menu-top #mobile-lang) {width: 130px !important;}
.main-menu-top #currencyChange .dd-options {
  top: 31px !important;
}
.main-menu-top #mobile-lang .dd-options {
  left: -10px;
  top: 30px !important;
}

#languageChange:not(.rtl #languageChange) .dd-select > .dd-selected > .dd-selected-image {margin-inline-start: 5px;}

.main-menu-top #mobile-lang label {margin: 1px 0 0 !important;}

.mobile-mega-menu {
  z-index: 2000;
  width: 300px;
  position: fixed;
  background-color: var(--white);
  top: 113px;
  bottom: 80px;
  min-height: initial !important;
}

.mobile-mega-menu .next-button,
.mobile-mega-menu .back-button {
  background: var(--light) !important;
  width: unset !important;
}

.mobile-mega-menu .next-button:hover,
.mobile-mega-menu .back-button:hover {
  transform: translateX(0);
}

.mobile-mega-menu .next-button {
  position: absolute;
  width: 100% !important;
  left: -25px;
  text-align: right !important;
  padding: 0;
  height: 100%;
  z-index: 1;
  /* line-height: 46px; */
  background: none !important;
}

.mobile-mega-menu ul li a.has-next-button {
  width: 90% !important;
}

.mobile-mega-menu .back-button {
  text-indent: 0px !important;
  color: var(--primary-text) !important;
  width: 100% !important;
}

.mobile-mega-menu .back-button i {
  padding: 0px 5px;
}

.mobile-mega-menu .arrow {
  visibility: unset !important;
  color: var(--primary-text);
}

.mobile-mega-menu .close-button {
  background-color: var(--primary-color) !important;
  color: var(--primary-text) !important;
  display: none !important;
}

.mobile-mega-menu .close-button:hover {
  transform: translateX(0);
}

.mobile-mega-menu.open {
  background-color: var(--white);
  position: fixed;
}

#currency {
  background-color: transparent;
  outline: 0;
  cursor: pointer;
}

#mobile-lang .dd-select {
  width: 90% !important;
}

@media screen and (max-width: 991px) {
  ul.dd-options {
    top: unset !important;
    background: white !important;
  }
}

.dd-options.dd-click-off-close {
  border: none !important;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  box-sizing: border-box;
}

.dd-option {
  color: var(--primary-text);
  font-weight: 100;
  border: none !important;
  background: var(--white) !important;
}

label {
  display: inline-block;
  margin-bottom: 0px;
  line-height: 18px !important;
  margin-inline-start: 10px;
}

label:hover {
  cursor: pointer;
  color: var(--primary-color);
}

.dd-select {
  border-radius: 2px;
  border: none !important;
  position: relative;
  cursor: pointer;
  background-color: transparent !important;
}

.dd-option label {
  float: left;
  /* display: inline-block; */
  margin-bottom: 0px;
  line-height: 10px !important;
  margin-inline-start: 0px;
  font-weight: 500;
}

.dd-option label:hover {
  letter-spacing: 0.3px;
}

.dd-pointer {
  right: 0px !important;
}

.dd-image-right {
  float: right;
  margin-inline-end: 15px;
  margin-inline-start: 5px;
  margin-top: 2px;
}

label.dd-selected-text {
  font-weight: normal !important;
}

.dd-selected-image {
  max-width: 16px !important;
}

.dd-option-image {
  max-width: 16px !important;
}

.dd-option-text {
  cursor: pointer;
}

.form-group {
  margin-bottom: 0px;
}

.dd-dropdown,
.dd-pointer-down {
  font-size: var(--font-size-sm);
  color: var(--secondary-text) !important;
}

li.language {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

li.currency {
  padding-inline-start: 0 !important;
}

.main-menu-nav li {
  position: relative;
  z-index: 9;
  background: var(--white);
  overflow: hidden !important;
}

.main-menu-nav li:first-child {
  z-index: -5;
  display: none;
  margin-top: 50px;
}

.mobile-mega-menu ul li a {
  width: calc(100% - 50px);
  font-size: var(--font-size);
  color: var(--primary-text);
  border: none;
  background-color: var(--white);
  font-weight: 500;
  transition: var(--transition);
  width: unset;
  padding: 12px 20px;
}

.mobile-mega-menu ul li a:hover {
  transform: translateX(5px);
}

.mobile-mega-menu ul li a.next-button {
  display: flex;
  align-items: center;
  justify-content: end;
}

.mobile-mega-menu .main-menu-top-item ul li a {
  width: 80%;
  padding: 10px;
}

select.category {
  position: relative;
  cursor: pointer;
}

select.category::before {
  position: absolute;
  content: "";
  top: 0px;
  right: 0px;
}

.main-menu-top-item > a > i {font-size: 14px;}
.main-menu-top-item > a > i.fa-user {font-size: 14px;}

.mm-log {width: calc(100% - 20px);order: 3}

.mm-acount,
.mm-acount + .mm-log,
.mm-lang,
.main-menu-top .currency {
  width: calc(50% - 15px);
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  padding: 10px;
}

.mm-lang {order: 1}
.main-menu-top li.currency {order: 2;padding-inline-start: 8px !important;}
.mm-acount {order: 3}
.mm-log {order: 4}

.mm-acount, .mm-log {padding: 0 !important;}
.mm-acount a, .mm-log a {
  padding: 10px;
  color: var(--white);
  background: var(--primary-color);
  border-radius: 4px;
}
.mm-acount a i, .mm-log a i {
  margin-inline-end: 5px;
  margin-bottom: 0;
}

.mm-acount a p, .mm-log a p {
  font-size: 13px;
}

.close-sidebar {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
}

.close-sidebar strong {
  width: 55px;
  height: 69px;
  font-size: var(--font-size-xxl);
  color: var(--primary-color);
  float: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(300px, -1px);
  background: var(--white);
  border-radius: 0 0 8px 0;
}

.close-sidebar.active {
  transition: all .25s ease .25s;
  visibility: visible;
  opacity: 1;
}

.sidebar.active {
  transform: translateX(0px);
}

.overflow {
  overflow-y: hidden;
}

@media screen and (max-width: 991px) {
  .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
}

.best-seller-slider,
.slick-slider {
  visibility: hidden;
}

.slick-initialized.slick-slider {
  visibility: visible;
}

.featured-categories {
  padding: 0 10px;
  overflow-x: clip;
}

.featured-categories .featured-category {
  position: relative;
}

.featured-categories .featured-category figure {
  margin: 3px 0 0;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  outline: 3px double transparent;
  box-shadow: 0 0 0 #000;
  transition: all .3s ease;
}

.featured-categories .featured-category figure:hover {
  outline: 3px double var(--primary-color);
  box-shadow: var(--box-shadow);
}

.featured-categories .featured-category figure:after {
  border-radius: 50%;
}

.featured-categories .featured-category figure img {
  border-radius: 50%;
}

.featured-categories .featured-category .featured-category-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: -3px;
  width: 100%;
  background: var(--white);
  align-items: center;
  padding: 5px 0 0 !important;
}

.featured-categories .featured-category .featured-category-text h3 {
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all .3s ease;
}

.featured-category:hover .featured-category-text h3 {
  color: var(--primary-color);
}

.featured-categories .featured-category .featured-category-text span {
  font-size: 13px;
  font-weight: 600;
  border-top: 1px solid rgba(0,0,0,.13);
  color: var(--secondary-text);
  margin-top: 5px;
  padding-top: 2px;
}

.product-info-price-new {
  color: var(--primary-color);
}

.items-slider {
  flex-shrink: 0;
  flex-basis: 226px;
}

.items-slider:hover .box-title,
.items-slider:hover .box-price,
.items-slider:hover .box-ratting {
  visibility: hidden;
}

/* jQzoom start*/
.zoomPad {
  position: relative;
  float: left;
  cursor: default;
  background-color: var(--white);
  border: 1px solid var(--light);
  z-index: 1;
}

.zoomPad:hover {
  z-index: 3;
}

.zoomPad>img {
  width: 100%;
}

.zoomPreload {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 49px;
  padding: 8px;
  color: var(--dark);
  font-size: var(--font-size-sm);
  text-align: center;
  text-decoration: none;
  background-color: var(--white);
  background-position: 43px 30px;
  border: 1px solid var(--gray);
  /* font-family: var(--primary-font); */
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 110;
}

.zoomPup {
  position: absolute;
  overflow: hidden;
  background-color: var(--white);
  opacity: 0.3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  cursor: pointer;
  z-index: 101;
}

.zoomWindow {
  background-color: var(--white);
  position: absolute;
  left: 101% !important;
  top: 0;
  height: auto;
}

.zoomWrapperImage {
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: var(--box-shadow);
  z-index: 110;
}

.zoomWrapperImage img {
  max-width: unset;
  max-height: unset;
}

.jqzoom-thumbs-strip {
  position: relative;
}

.jqzoom-thumbs {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  /* `safe` keeps the row centred while it fits and switches to start-aligned
     once it overflows, so the first thumbnail never becomes unreachable. */
  justify-content: safe center;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0;
}

.jqzoom-thumbs::-webkit-scrollbar {
  display: none;
}

.jqzoom-thumbs>li {
  margin: 3px;
  padding: 3px;
  flex: 0 0 60px;
  border: 2px solid var(--light);
}

.jqzoom-thumbs-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  font-size: 12px;
  color: var(--secondary-text);
  cursor: pointer;
}

.jqzoom-thumbs-nav:hover {
  color: var(--primary-color);
}

.jqzoom-thumbs-nav--prev {
  inset-inline-start: 0;
}

.jqzoom-thumbs-nav--next {
  inset-inline-end: 0;
}

.jqzoom-thumbs-strip.is-scrollable .jqzoom-thumbs-nav {
  display: flex;
}

.jqzoom-thumbs-strip.is-scrollable .jqzoom-thumbs {
  padding-inline: 32px;
}

.jqzoom-thumbs>li:has(a.zoomThumbActive),
.jqzoom-thumbs>li.active {
  border-color: var(--primary-color);
  box-shadow: var(--box-shadow);
}

.jqzoom-thumbs>li:hover {
  border-color: var(--secondary-text);
}

.jqzoom-thumbs>li>a {
  width: 100%;
  height: 100%;
  display: block;
}

.jqzoom-thumbs>li>a>img {
  width: 100%;
  background: var(--white);
}

#product-desc-section h3 {
  font-size: 20px;
  margin-bottom: 10px;
  border-width: 10px;
}

#product-desc-section .tab-content>.tab-pane.active {
  min-height: 300px;
}

#product-desc-section .tab-content>.tab-pane.active {
  text-align: justify;
}

@media screen and (max-width: 991px) {
  .featured-categories .featured-category .featured-category-text h3 {
    font-size: 14px;
  }

  .featured-categories .featured-category .featured-category-text span {
    font-size: 12px;
  }
}

/*# sourceMappingURL=newtheme.css.map */
#header-main.headerSticky {
  position: fixed;
  /* top is set inline by the STICKY HEADER script (app.js) -- .top-nav and
     .site-switcher now stack above it in the same sticky group, and their
     heights (topNav hidden below 992px) vary, so a fixed 0 here would sit
     header-main underneath them instead of below them. */
  width: 100%;
  background: var(--white);
  box-shadow: var(--box-shadow);
  z-index: 998;
}

/* Same sticky group as #header-main.headerSticky above -- .top-nav (utility
   links) and .site-switcher (DP Mart network pills) now scroll with it
   instead of scrolling away, matching Flipkart's header. `top` for both is
   set inline by app.js, since it depends on .top-nav's actual height
   (0 on mobile, where it's display:none). */
.top-nav.headerSticky,
.site-switcher.headerSticky {
  position: fixed;
  width: 100%;
  background: var(--white);
  z-index: 998;
}

.headerSticky1 {
  position: fixed;
  background: var(--white);
  width: 100%;
  z-index: 100;
  top: 0;
}

.headerSticky2 {
  position: fixed;
  width: 100%;
  z-index: 9;
  top: 86px;
  box-shadow: var(--box-shadow);
}

.dn {
  display: none;
}

.main-menu.mobile-mega-menu {
  overflow: auto !important;
}

.main-menu-bottom,
.main-menu-top {
  display: none;
}

/* Media Queries */
@media (min-width: 992px) and (max-width: 1199px) {
  .my-info-details li {
    width: 19% !important;
  }

  .navbar-search {
    width: 100%;
  }

  .page-header .nav-breadcrumb {
    font-size: 100% !important;
  }

  #content-wrapper section {
    margin: 0 0 20px 0 !important;
  }

  .user-avatar-section form .form-group.mx-4 {
    margin-inline-start: 0 !important;
  }

  .user-avatar-section form button {
    margin-inline-start: -126px;
  }

  .nav-tabs>li>a {
    border-inline-start: none;
  }
}

@media (max-width: 991px) {
  .main-menu-top {display: block;}
  .main-menu-bottom {
    display: block;
    width: 300px;
    z-index: 2001;
    position: fixed;
    bottom: 0;
    transform: translateX(-100%);
    transition: all 250ms linear;
  }


  .main-menu.mobile-mega-menu.open~.main-menu-bottom,
  .main-menu.mobile-mega-menu.open~.main-menu-top {
    transform: translateX(0%);
  }

  .page-cover-caption {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .navbar-search {
    width: 100%;
  }

  .navbar-form {
    margin-bottom: 10px !important;
  }

  .page-header {
    margin: 15px 0 0;
  }

  .page-header .nav-breadcrumb {
    font-size: 100% !important;
  }

  .close-sidebar .col-md-2 .nopadding {
    width: 30% !important;
  }

  .my-info-container .my-info-box {
    padding: 15px 15px 40px;
  }

  .my-info-container .my-info-box .pull-right {
    margin-top: 10px;
  }

  .my-info-container .my-info-details li {
    width: 33%;
  }

  .my-info-container .my-info-details li:nth-of-type(3) {
    background: url(../img/nav_division.png) no-repeat;
  }

  #product-desc-section .nav-tabs>li.active>a {
    padding: 18px 10px !important;
    background-color: var(--gray);
  }

  #product-desc-section .nav-tabs>li>a {
    padding: 15px 6px !important;
  }

  .nav-tabs>li>a {
    border-inline-start: none;
  }

  .banner-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .my-info-container .my-info-details li {
    width: 33% !important;
  }

  .my-info-container .my-info-details li:nth-of-type(3) {
    background: url(../img/nav_division.png) no-repeat;
  }
}

@media (max-width: 767px) {
  .container.w-full .col-sm-3.bg-light {
    margin-top: 25px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .col-lg-12.col-12 .banner-overlay-text p {
    margin-bottom: 0;
  }

  .navbar-form {
    margin-bottom: 10px !important;
  }

  .page-header {
    margin: 15px 0 0;
  }

  .page-header .nav-breadcrumb {
    font-size: 100% !important;
  }

  .my-info-container .my-info-box {
    padding: 15px 15px 35px;
  }

  .my-info-container .my-info-box .pull-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .my-info-container .my-info-details li {
    width: 33% !important;
  }

  .my-info-container .my-info-details li:nth-of-type(3) {
    background: url(../img/nav_division.png) no-repeat;
  }

  .user-avatar-section form .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #product-desc-section .nav-tabs>li.active>a {
    padding: 18px 10px !important;
    background-color: var(--light);
  }

  #product-desc-section .nav-tabs>li>a {
    padding: 15px 5px !important;
    border-inline-start: 1px solid var(--gray) !important;
  }

  #summary-total {
    font-size: var(--font-size-xl) !important;
  }

  .nav-tabs>li>a {
    border-inline-start: none;
  }

  .banner-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .my-info-container .my-info-details li {
    width: 33% !important;
  }

  .my-info-container .my-info-details li:nth-of-type(3) {
    background: url(../img/nav_division.png) no-repeat;
  }
}

@media (max-width: 575px) {
  .openSection {
    height: 100%;
  }

  .col-md-2 .section-title {
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid var(--dark);
  }

  .col-md-2 .section-title::after {
    content: "+";
    font-size: var(--font-size-lg);
  }

  .col-md-2.active .section-title::after {
    content: "-";
    font-size: var(--font-size-lg);
  }

  .col-md-2 .section-title h4 {
    font-size: var(--font-size-lg);
  }

  .account-sidebar-nav li.active a {
    background: #bac1ca;
    color: black !important;
  }

  .account-sidebar-nav {

    height: 0;
    overflow: hidden;
    transition: var(--transition);
    border: 0;
  }

  .account-sidebar-nav-title {
    display: block;
  }

  .accorHeight {
    height: 330px;
  }

  .col-md-2 .section-title.active ::after {
    content: "-";
  }

  .page-header {
    margin: 15px 0 0;
  }

  .page-header .nav-breadcrumb {
    font-size: 100% !important;
  }

  .my-info-container .my-info-box .pull-right {
    margin-top: 10px !important;
  }

  .my-info-container .my-info-details li {
    width: 33% !important;
  }

  .my-info-container .my-info-details li:nth-of-type(3) {
    background: url(../img/nav_division.png) no-repeat;
  }

  .headerSticky .header-search {
    display: none;
  }

  .search-box .search-box-button button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-search-submit i.fa-search {
    margin: 0 !important;
  }

  section {
    margin: 0 0 20px 0 !important;
  }

  .footer-newsletter-box-form-box button {
    margin-inline-end: -1px;
  }

  .footer-newsletter-box-form-box input {
    padding: 10px 10px;
  }

  .tab-content form {
    width: 94%;
    margin: 0 auto;
  }

  .user-avatar-section img {
    width: 96%;
  }

  #product-desc-section .nav-tabs>li.active>a {
    padding: 15px 3px !important;
    margin-inline-end: 3px;
    border-inline-start: 1px solid var(--gray);
  }

  #product-desc-section .nav-tabs>li>a {
    padding: 12px 5px !important;
    font-size: 13px !important;
    text-transform: none !important;
  }

  .deal-of-day-details-price .regular-price {
    font-size: var(--font-size-xl) !important;
  }

  .deal-of-day-details-price .old-price {
    font-size: var(--font-size-xl) !important;
  }

  #summary-total {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 425px) and (max-width: 575px) {
  .my-info-container .my-info-box {
    padding: 15px 15px 50px !important;
  }

  #product-desc-section .nav-tabs>li>a {
    padding: 12px 5px !important;
    font-size: var(--font-size) !important;
    text-transform: none !important;
    border-inline-end: 1px solid var(--gray) !important;
    border-top: 1px solid var(--gray) !important;
    border-inline-start: 1px solid var(--gray) !important;
  }

  .nav-tabs>li>a {
    font-size: var(--font-size) !important;
    text-transform: none !important;
    border-inline-end: 1px solid var(--gray) !important;
    border-top: 1px solid var(--gray) !important;
    border-inline-start: 1px solid var(--gray) !important;
  }

  .box-action {
    padding: 0 10px;
  }

  .box-action a {
    padding: 5px;
    margin-inline-end: 3px;
  }
}

@media (max-width: 424px) {
  .my-info-container .my-info-box {
    padding: 15px 15px 90px !important;
    margin-bottom: 10px;
  }

  .my-info-container .my-info-box .pull-right {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .pull-right .btn {
    margin-bottom: 5px;
  }

  #product-desc-section .nav-tabs>li>a {
    padding: 12px 5px !important;
    font-size: var(--font-size-sm) !important;
    text-transform: none !important;
    border-inline-end: 1px solid var(--gray) !important;
    border-top: 1px solid var(--gray) !important;
    border-inline-start: 1px solid var(--gray);
  }

  #product-desc-section .nav-tabs>li.active>a {
    padding: 15px 5px !important;
    margin-inline-end: 3px;
    border-inline-start: 1px solid var(--gray);
  }

  .nav-tabs>li>a {
    padding: 12px 17px !important;
    font-size: var(--font-size) !important;
    text-transform: none !important;
    border-inline-end: 1px solid var(--gray) !important;
    border-top: 1px solid var(--gray) !important;
    border: none;
    border-inline-start: 1px solid var(--gray);
  }

  .nav-tabs>li.active>a {
    padding: 15px 14px !important;
    margin-inline-end: 3px;
    border-inline-start: 1px solid var(--gray);
  }

  .box-action {
    padding: 0 12px;
  }

  .box-action a {
    padding: 5px;
    margin-inline-end: 7px;
  }
  .px-xs-1 {
    padding-inline-start: .5rem !important;
    padding-inline-end: .5rem !important;
  }
  #all-checkout-section .btn {
    padding-inline-start: .5rem !important;
    padding-inline-end: .5rem !important;
  }
  .d-xs-none {
    display: none;
  }
}

@media (max-width: 375px) {
  #product-desc-section .nav-tabs {
    display: flex;
  }

  #product-desc-section .nav-tabs>li.active>a {
    padding: 15px 14px !important;
    border-inline-start: 1px solid var(--gray);
  }

  .nav-tabs {
    display: flex;
  }

  .nav-tabs>li>a {
    padding: 12px 12px !important;
    font-size: var(--font-size-sm) !important;
    text-transform: none !important;
    border-inline-end: 1px solid var(--gray) !important;
    border-top: 1px solid var(--gray) !important;
    border: none;
    border-inline-start: 1px solid var(--gray);
  }

  .nav-tabs>li.active>a {
    padding: 15px 14px !important;
    border-inline-start: 1px solid var(--gray);
  }

  .box-action {
    padding: 0 9px;
  }

  .box-action a {
    padding: 5px;
    margin-inline-end: 5px;
  }
}

@media (max-width: 363px) {
  .cart-item-tr .product-info-qty-item {
    display: flex;
    flex-direction: column-reverse;
  }

  .cart-item-tr .product-info-qty-item button {
    width: 100%;
  }

  .cart-item-tr td:nth-of-type(4) {
    display: flex;
    justify-content: center;
  }

  .shopping-cart-item-table thead tr th:nth-of-type(4) {
    text-align: center;
  }

  .shopping-cart-item-table tbody tr:nth-of-type(1) td:nth-of-type(4) {
    border-top: none;
  }

  .cart-item-tr .product-info-qty-item input {
    border-inline-start: none;
    border-inline-end: none;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
  }
}

/* slider responsive */
@media (min-width: 1500px) {
  .ei-slider-large li img {
    margin-top: 0 !important;
  }

  .ei-slider {
    height: 450px;
  }
}

@media (min-width: 1100px) and (max-width: 1299px) {
  .ei-slider-large li img {
    margin-top: 0 !important;
  }

  .ei-slider {
    height: 300px;
  }
}

@media (min-width: 1300px) and (max-width: 1499px) {
  .ei-slider-large li img {
    margin-top: 0 !important;
  }

  .ei-slider {
    height: 350px;
  }
}

iframe.customer-map {
  height: 200px;
  width: 250px;
}

/* product compare style */
@media(max-width: 991px) {.comparisonContainer > .container {max-width: 100% !important;margin-bottom: 15px;}}

.comparison-table {
  width: 100%;
  font-size: .875rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar
}

.comparison-btns .wrap-svg svg {
  fill: #fff;
}

.comparison-btns > a {
  padding-block: 4px 3px;
  padding-inline-end: 10px;
  opacity: 0.9;
  transition: all .3s ease;
}

.clearbtn {background: var(--primary-dark)}
.addbtn {background: var(--primary-color);}

.comparison-btns > a > i {
  width: 40px;
  display: block;
  padding-block: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-inline-end: 2px solid rgba(255,255,255,.2);
  color: #fff !important;
}
.comparison-btns > a > span {
  text-align: start;
  color: #fff !important;
  display: inline-block;
  padding-inline-start: 10px;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .03rem;
}

.comparison-btns > a:hover {opacity: 1}

.comparison-table table {
  min-width: 41rem;
  table-layout: fixed
}

.comparison-table table tbody+tbody {
  border-top-width: 1px
}

.comparison-table .table-bordered thead td {
  border-bottom-width: 1px
}


.comparison-table > .table > thead > tr,
.comparison-table > .table > tbody > tr,
.comparison-table > .table > tfoot > tr,
.comparison-table > .table > thead > tr,
.comparison-table > .table > tbody > tr,
.comparison-table > .table > tfoot > tr {
  display: flex;
  flex-wrap: nowrap;
}

.comparison-table > .table > thead > tr > th,
.comparison-table > .table > tbody > tr > th,
.comparison-table > .table > tfoot > tr > th,
.comparison-table > .table > thead > tr > td,
.comparison-table > .table > tbody > tr > td,
.comparison-table > .table > tfoot > tr > td {
  -ms-flex-preferred-size: 220px;
  flex-basis: 220px;
  min-width: 220px;
  white-space: wrap;
}

.comparison-table .comparison-items {
  display: flex !important;
  background: #fff;
}

.comparison-table .comparison-item {
  position: relative;
  padding: .875rem .75rem 1.125rem;
  background-color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.comparison-key > th {
  background: var(--primary-color);
  color: var(--white);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 4px !important;
  word-spacing: 2px;
}

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

.seller-logo > img {
  max-width: 75px;
}


.compare-filter .nice-select {
  width: 100%;
  margin-block: 5px;
}

.compare-filter .nice-select .list {
  max-height: 500px;
}

.comparison-table .comparison-item .comparison-item-thumb {
  display: block;
  width: 5rem;
  margin-inline-end: auto;
  margin-bottom: .75rem;
  margin-inline-start: auto
}

.comparison-table .comparison-item .comparison-item-thumb>img {
  display: block;
  width: 100%
}

.comparison-table .comparison-item .comparison-item-title {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  color: var(--dark);
  font-weight: normal;
  text-decoration: none
}

.comparison-table .comparison-item .btn {
  margin: 0
}

.comparison-table .comparison-item .remove-item {
  display: block;
  position: absolute;
  top: -.3125rem;
  right: -.3125rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background-color: #f44336;
  color: var(--white);
  text-align: center;
  cursor: pointer
}

.comparison-table .comparison-item .remove-item .feather {
  width: .875rem;
  height: .875rem
}

.bg-secondary-mod {
  background-color: var(--light) !important;
}

/*add to cart design modify for add product comparison feature(12/22)*/
.product-actions .btn-group .add-to-card-mod {
  width: 25% !important;
}

.primary-nav-category .menu-link {
  padding: 8px 0;
}

@media screen and (max-width: 575px) {
  .search-box-input input {
    width: 90%;
  }
}

/* Flash deal and progressbar for product details page */
.sold-qtt-progress {
  margin: 15px 0;
}

.sold-qtt-progress .progress {
  float: right;
  height: 18px;
  width: 100%;
  border-radius: 50px;
  background: var(--gray);
  box-shadow: inset 0 10px 10px rgba(244, 245, 250, 0.9);
}

.sold-qtt-progress .sold-qtt-label {
  position: absolute;
  left: 35%;
  line-height: 16px;
  font-style: italic;
  text-shadow: 0.3px 0.6px 2px rgba(244, 245, 250, 0.9);
}

.sold-qtt-progress .progress .progress-bar {
  background-color: var(--primary-color);
  animation: reverse progress-bar-stripes 500ms linear infinite, animate-positive 2s;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}

.box-action-vertical {
  padding: 10px;
  height: auto;
  white-space: nowrap;
  position: absolute;
  right: -20px;
  top: 0px;
  z-index: 99;
  opacity: 0;
  transition: var(--transition);
}

.box-action-vertical a {
  display: block;
  padding: 7px 8px;
  margin-bottom: 5px;
  text-align: center;
  color: var(--primary-text);
  background-color: var(--light);
  border-radius: var(--border-radius);
}

.box-action-vertical a:hover,
.box-action-vertical a:hover .svg-icon {
  color: var(--white);
  fill: var(--white);
  background-color: var(--primary-color);
}

.box:hover .box-action-vertical {
  right: 0px;
  opacity: 1;
}

.box-action .box-cart {
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}

.box-action .box-cart a {
  display: block;
  font-weight: 500;
}

.card-box {
  padding: 15px;
  border-radius: var(--border-radius-3);
  border: 1px solid #ededf2;
}

.card-box .thumb-lg {
  height: 88px;
  width: 88px;
}

.card-box .social-links li a {
  border-radius: 50%;
  color: rgba(121, 121, 121, .8);
  display: inline-block;
  height: 30px;
  line-height: 27px;
  border: 2px solid rgba(121, 121, 121, .5);
  text-align: center;
  width: 30px
}

.rounded-circle {
  border-radius: 50%;
}

#profile-container .container {
  max-width: none !important;
}

#profile-container .header-information.less {
  max-height: 64px !important;
  overflow: hidden;
}

#profile-container .profile-header,
#profile-container .profile-body {
  margin: 0 10px;
}

#profile-container .profile-header {
  min-height: 175px;
  /* margin-bottom: -6px; */
}

#profile-container .profile-header .thumbnail {
  width: 120px;
  height: 120px;
}

#profile-container .profile-header .thumbnail img {
  border-radius: 50%;
}

#profile-container .profile-header .profile-info {
  min-height: 175px;
  padding-block: 15px;
  padding-inline: 0 30px;
}

#profile-container .profile-header .profile-info .header-fullname {
  /* display: inline-block; */
  margin-top: 5px;
  font-size: var(--font-size-lg);
}

#profile-container .profile-header .contact-seller-btn {
  float: right;
}

#profile-container .profile-header .profile-info .seller-location {
  position: absolute;
  color: var(--primary-color);
  top: 20px;
  right: 30px;
}

#profile-container .profile-header .profile-info .header-information {
  /* line-height: 23px; */
  margin: 10px 0;
  text-align: justify;
  color: var(--secondary-text);
}

#profile-container .profile-header .profile-stats {
  min-height: 175px;
  border-inline-start: 1px solid var(--light);
}

#profile-container .profile-header .profile-stats .stats-col .stats-title {
  display: block;
  margin: 0 auto;
  text-align: center;
}

#profile-container .profile-header .profile-stats .stats-col .stats-value {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: var(--primary-color);
}

#profile-container .profile-header .profile-stats .stats-col:not(:last-child) {
  border-inline-end: 1px solid var(--light);
}

#profile-container .profile-header .profile-stats .stats-col {
  padding: 20px 0;
  text-align: center;
}

#profile-container .profile-header .profile-stats .inlinestats-col:not(:last-child) {
  border-inline-end: 1px solid var(--light);
}

#profile-container .profile-header .profile-stats .inlinestats-col {
  padding-top: 15px;
  text-align: center;
  /* font-family: 'Roboto', 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; */
  border-top: 1px solid var(--light);
  min-height: 55px;
}

#profile-container .profile-header .profile-stats i {
  color: var(--primary-color);
}

.pink {
  color: var(--pink) !important;
}

#profile-container .nav-tabs>li>a {
  padding: 10px 25px;
  margin-top: -10px;
  border-radius: 0;
  border: none;
  text-decoration: none;
}

#profile-container .nav-tabs>li:hover:not(.active) a {
  background-color: var(--white);
  color: var(--primary-color);
  padding-bottom: 0;
}

#profile-container .profile-body .tab-content {
  min-height: 400px;
}

#profile-container .profile-body .product-info-rating {
  margin-top: 5px;
  font-size: var(--font-size);
}

#profile-container .profile-body .nav-tabs {
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

#profile-container .profile-body .nav-tabs>li.active {
  border: none;
  border-bottom: 2px solid var(--primary-color);
  margin-bottom: 0;
}

#profile-container .profile-body .html-content h3 {
  font-size: var(--font-size-xxl);
  margin-bottom: 10px;
}

#profile-container .tab-content {
  border: 1px solid var(--light);
  padding: 0;
  border: none;
}

.auth-modal {
  margin-top: 60px !important;
  text-align: center;
}

.auth-modal .modal-icon img {
  border-radius: 50%;
  width: 110px;
  margin: -65px 0 10px 0;
  background-color: var(--white);
  padding: 5px;
}
@media screen and (max-width: 991px) {
  #profile-container .profile-body {
    margin-top: 20px !important;
  }
  #profile-container .nav-tabs>li>a {
    padding: 5px !important;
  }
  .cover-img-wrapper img {
    height: 100%;
  }

  .main-menu-top-item .dd-container {padding-top: 0;}
  .main-menu-top-item .dd-selected {
    width: auto !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 !important;
  }
}

/* custom media query */

@media(max-width: 1399px) {
  .checkout-area {padding-inline: 15px;}
  .checkout-area > .container {max-width: 100%;}
  .deal-of-day .deal-of-day-btns .sc-add-to-cart {padding: 0px 5px 0 15px;}
  .deal-of-day .deal-of-day-btns .sc-add-to-cart span {padding: 0px 5px 0 15px;}
}
@media(max-width: 1250px) {
  .best-seller-item-utility .button-cart span {display: none !important;}
}
@media screen and (max-width: 1199px) {
  .top-nav-left h3 {
    display: none;
  }
  .best-seller-item .box-inner {
    flex-direction: column;
  }

  .best-seller-item .best-seller-item-image {
    width: 100%;
  }

  .best-seller-item .best-seller-item-details {
    width: 100%;
  }

  .dod-section-wrapper .best-seller-slider .sl.slick-slide {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }

  .best-seller-slider .best-seller-item {
    -ms-flex-preferred-size: 22%;
    flex-basis: 22%;
    margin: 0;
  }
  .best-seller-item-utility {left: 5px;}
  .best-seller-item-utility .horizon-btns {
    column-gap: 3px;
  }
  .best-seller-item-utility .horizon-btns > a {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    padding: 7px 0 !important;
  }
  .product-list-col {border: none}
  .product-list-col .best-seller-item {
    border: 1px solid var(--light);
    margin-bottom: 20px;
  }
  .category-single-page {
    max-width: calc(100% - 30px);
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .product-list-wrapper .product.product-list-view {padding-block: 0;}
  .product-list-view .product-info {width: 52%;}
  .lg-100 {max-width: 100% !important;}
  .header-nav-items a {padding: 12px 10px;}
  .featured-vendors-cards .best-seller-item:hover .best-seller-item-name,
  .featured-vendors-cards .best-seller-item:hover .best-seller-item-price,
  .featured-vendors-cards .best-seller-item:hover .best-seller-item-rating {visibility: hidden;opacity: 0;}
  .featured-vendors-cards .best-seller-item.border-animate {
    box-shadow: 0 0 8px -3px rgba(0,0,0,.2);
    padding-inline: 0px;
}
}
@media(max-width: 991px) {
    #header-main {
      padding: 10px 0;
     }
    #header-main > .container {
      max-width: 100%;
    }

    .wrapper.searching::before {
      transition: all .3s ease 0s;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      visibility: visible;
      opacity: 1;
    }

    .global-search {
      position: fixed;
      z-index: 999;
      width: calc(100% - 30px);
      top: 80px;
      left: 15px;
      padding: 0;
      display: none;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: start;
      align-items: flex-start;
      visibility: hidden;
      opacity: 0;
      top: 50px;
      transition: all .3s ease 0s;
    }
    .global-search.open {
      transition: all .3s ease .15s;
      top: 120px;
      visibility: visible;
      opacity: 1;
    }

    .header-search {
      border-radius: 4px;
      background: #fff;
      width: 100%;
      position: relative;
    }

    .header-search > form {
      width: calc(100% - 20px) !important;
      float: none !important;
    }

    .exit-search {
      display: -ms-flexbox !important;
      display: flex !important;
    }

    .hot-words a {
      padding: 5px;
    }

    .overlay {display: none;}
    .search-btn {display: block;}

    .dod-section-wrapper .best-seller-slider .sl.slick-slide {gap: 15px;}
    .md-100 {max-width: 100% !important;}
    :is(.banner-block, .featured-category-section, .flash-deal, .feature, .best-deal, .product-type, .feature-brand, .top-rated, .best-deals, .best-under, #all-categories-wrapper) > .container  {max-width: 100% !important;}
    #all-categories-wrapper {
      width: calc(100% - 30px);
      margin: 20px auto 0;
    }
    .product-list-wrapper > .border {border: none !important}
    .category-filters {display: none}
    #filterBtn {
      display: block;
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: -29px;
      z-index: 29;
    }
    .single-product-desc .frequently-bought-section .sidebar-product-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 15px;
    }
    .single-product-desc .frequently-bought-section .sidebar-product-list .best-seller-item-image {
      height: 60%;
    }
    .single-product-desc .frequently-bought-section .sidebar-product-list .best-seller-item-image img {
      width: initial;
      max-width: 100%;
    }
    .single-product-desc .frequently-bought-section .sidebar-product-list .best-seller-item-details {
      height: 40%;
    }

    .feature-items .slick-arrow {top: -50px;}
    .single-product-desc #product-desc-section .nav-tabs.nav-justified {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      gap: 15px;
    }

    .single-product-desc #product-desc-section .nav-tabs.nav-justified li {
      width: auto !important;
      display: block !important;
    }
    .single-product-desc #product-desc-section .nav-tabs.nav-justified li a {
      padding: 8px 12px !important;
      border: 1px solid var(--gray) !important;
      border-radius: 8px;
      top: unset !important;
    }
    #profile-container .profile-header .profile-stats {
      min-height: auto;
      border-top: 1px solid var(--light);
      border-inline-start: none;
    }
    #profile-container .profile-body .nav-tabs li a {font-size: 15px;}
    .trending-items-area .sell-header-title h2::after {width: 5%}
    .trending-items-area .sell-header-title h2:hover::after {width: 15%}
    .trending-items-area .sell-header-title {margin-bottom: 15px}
    .trending-items-area .feature-items .slick-arrow {
      position: absolute;
      top: -74px;
      right: 0;
    }
    .trending-items-area .feature-items .slick-arrow.slick-prev {right: 40px;}
    .featured-vendors-cards .best-seller-item.border-animate {box-shadow: 0 0 7px -3px rgba(0,0,0,.15);}
    .deal-of-day .deal-of-day-btns .sc-add-to-cart span {padding: 0px 5px;}
}
@media (max-width: 767px) {
  .sm-100 {max-width: 100% !important;}
  .dod-section-wrapper .best-seller-slider .sl.slick-slide {gap: 30px;}
  .best-seller-slider .best-seller-item {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }
  :is(.neckbands, .account-section) > .container {max-width: 100% !important;}
  .account-section .account-sidebar-nav {margin-inline: 15px;}
  .account-section .product-list-wrapper .product {margin-inline-start: 0;}

  .feature .sell-header .feature-tabs ul > li > a {font-size: 14px}
  .product-list-view .product-info {width: 62%;}
  .product-list-view .product-img-wrap {width: 34%;}
  .product-list-view .product-actions {
    top: 0;
    right: -5px;
    opacity: 0;
    background: var(--white);
    height: 100%;
    width: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    visibility: hidden;
    z-index: 4;
    transition: all .3s ease;
  }

  .product-list-view:hover .product-actions {
    visibility: visible;
    opacity: 1;
    right: 0;
  }

  .account-section .product-actions button >span,
  .product-list-view .product-actions > a > span {display: none;}
  .product-list-view .product-actions > a,
  .account-section .product-actions button {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product-list-view .product-actions > a:not(.add-to-card-mod) i {transform: translateY(2px);}
  .product-list-view .product-actions > a.add-to-card-mod {border: none}
  .sc-product-item .product-single {margin-inline-start: 0}
  .product-page-right-section {border-inline-start: none}


  /* .account-section .product-actions a >span,
  .account-section .product-actions button >span {display: none;} */

  #profile-container .profile-body .nav-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    border: none !important;
  }

  #profile-container .profile-body .nav-tabs li {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    max-width: auto !important;
    width: auto !important;
    margin: 0 !important;
    border: none !important
  }

  #profile-container .profile-body .nav-tabs li a {
    font-size: 14px;
    padding: 3px 15px !important;
    border-radius: 16px;
    border: 1px solid var(--light) !important;
    display: block;
  }

  #profile-container .profile-body .nav-tabs li.active a {border: 1px solid var(--primary-color) !important;}
  #profile-container .profile-body .nav-tabs li.active,
  #profile-container .profile-body .nav-tabs li.active a,
  #profile-container .profile-body .nav-tabs li a {margin: 0 !important;top: 0;}
  .search-category-select {max-width: 225px}
  .trending-items-area .feature-items .slick-arrow {top: -118px}
  .featured-vendors-cards .best-seller-item.border-animate {box-shadow: none;}
  .addNewAddrs {margin-bottom: 50px !important;}
  .frequently-bought-section .box:hover .box-action {bottom: 5px}
  .deal-of-day .deal-of-day-btns .sc-add-to-cart {padding: 0 15px;}
}
@media (max-width: 575px) {
  .dod-section-wrapper .best-seller-slider {margin-top: 15px;}
  .dod-section-wrapper .best-seller-slider .sl.slick-slide .best-seller-item:hover .best-seller-item-name {opacity: 0;}
  .dod-section-wrapper .best-seller-slider .sl.slick-slide {gap: 15px;}
  .best-seller-slider .best-seller-item {
    -ms-flex-preferred-size: 48%;
    flex-basis: 48%;
  }

  .product-list-col-product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
  }

  .product-list-col-product .best-seller-item-details {
    padding-inline: 10px;
  }

  .product-list-col .best-seller-item {
    width: 47%;
    margin-bottom: 0;
  }
   .sell-header {margin-bottom: 0;}
   .product-2nd-parent {
    -webkit-column-gap: .5rem;
       -moz-column-gap: .5rem;
            column-gap: .5rem;
   }
   .product-list-view .product-img-wrap {
    float: none;
    width: 100%;
    margin: 0;
  }

  .list-view-card,
  .categoryCard {
    -ms-flex-preferred-size: calc(50% - .25rem) !important;
    flex-basis: calc(50% - .25rem) !important;
    max-width: calc(50% - .25rem) !important;
  }

   .product-list-wrapper .product.product-list-view,
   .product-list-view .product-info {
    height: 100%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .product-list-wrapper .product {
    padding-bottom: 0;
    margin: 0;
  }
  .product-list-wrapper .product .product-info-title {
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    overflow: visible;
  }
  .product-list-view .product-info,
  .product-list-view .product-info-feature-list {
    margin-bottom: 0;
  }
  .product-list-view .product-info {
    float: none;
    width: 100%;
    height: 50%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .shopping-cart-header {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .deliver-to {margin-top: 15px;}
  .product-list-view:not(.product-actions .product-list-view) .product-actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    top: calc(100% - 80px);
    right: 0;
    background: rgba(255,255,255,.5);
    height: 50px;
    width: 100%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .product-list-view:not(.product-actions .product-list-view):hover .product-actions {
    top: calc(100% - 60px);
  }

  .sp-btns a {
    padding: 6px 10px;
    font-size: 16px;
  }
  .single-product-desc .frequently-bought-section .sidebar-product-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .cart-footer,
  .cart-footer .text-right {
    text-align: center !important
  }

  .cart-footer .btn {
    min-width: 225px;
    max-width: 100%;
    margin-bottom: 10px;
    display: block;
    margin-inline: auto;
  }

  .cart-footer .btn i {
    width: 30px;
  }

  .account-section .product-list-wrapper .product .product-img-wrap {border-inline-end: none !important;}
  #profile-container .profile-body .nav-tabs {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .frequently-bought-section .btn-lg.add-to-card-now-btn.sc-add-to-cart {
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 600;
  }
  .frequently-bought-section .box-ratting ul,
  .frequently-bought-section .box-price {justify-content: center;}
  .frequently-bought-section .box.border-animate {
    text-align: center;
    max-width: 100%;
    width: 320px;
    margin-inline: auto;
    margin-bottom: 10px;
    border-radius: 0;
    padding-bottom: 5px;
  }

  .brand-list-area .card-box {
    max-width: 100%;
    width: 320px;
    margin-inline: auto;
  }
  .trending-items-area .sell-header-title h2::after {width: 10%}
  .trending-items-area .sell-header-title h2:hover::after {width: 25%}
  .featured-vendors-cards .best-seller-item.border-animate {margin-top: 0;}
  .trending-items-area .feature-items .slick-arrow {top: -104px}
  .product-2nd-parent > .pr-0 {padding-inline-start: 0 !important}
  .top-promo-banner img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .fbs-total,
  .fbs-total > .text-secondary {display: block !important}
  .fbs-total {margin-top: 10px !important}
  .fbs-total > .btn-sm.sc-add-to-cart.ml-3 {margin: 10px 0 0 !important;}
  .frequently-bought-section .box .box-action {
    opacity: 0;
    visibility: hidden;
    padding-top: 10px;
    transition: all .3s ease;
  }
  .frequently-bought-section .box:hover .box-action {
    bottom: 10px;
    visibility: visible;
    opacity: 1;
  }
  .flash-deal .flash-sell-timer {margin-bottom: 15px;}
  .comparison-table > .table > thead > tr > th,
  .comparison-table > .table > tbody > tr > th,
  .comparison-table > .table > tfoot > tr > th,
  .comparison-table > .table > thead > tr > td,
  .comparison-table > .table > tbody > tr > td,
  .comparison-table > .table > tfoot > tr > td {
    -ms-flex-preferred-size: calc(50% - 15px);
    flex-basis: calc(50% - 15px);
    min-width: calc(50% - 15px);
  }
}

@media (max-width: 520px) {
  .featured-vendors-cards .feature .sell-header .feature-tabs ul > li {padding: 0 6px;margin-bottom: 6px !important;}
}

@media (max-width: 475px) {
  .category-grp-wrapper .col-6.col-md-4.col-lg-3.pl-1.pr-3.my-2 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-inline: 0 !important;
  }
}
@media (max-width: 500px) {
  .product-list-col .best-seller-item {
    width: 46%;
  }

  .fbrnd-card {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 450px) {
  .list-view-card {
    -ms-flex-preferred-size: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .product-deal-header {
    max-height: auto !important;
    max-width: auto !important;
    min-width: auto !important;
    width: auto !important;
    padding-inline-start: 0;
    overflow: visible;
    background-image: none !important;
    text-align: center;
    margin: 10px 0 20px !important;
  }

  .product-deal-header .ends_in_text {
    display: block;
    font-weight: 600;
    word-spacing: 3px;
  }
  .flashSellBg {display: inline-block;}
}

@media (max-width: 414px) {
  .dod-section-wrapper .best-seller-slider .sl.slick-slide {gap: 5px;}
  .dod-section-wrapper .best-seller-slider .sl.slick-slide .best-seller-item {
    -ms-flex-preferred-size: 48%;
    flex-basis: 48%;
  }

  .single-product-desc #product-desc-section .nav-tabs.nav-justified {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
  }

  .shopping-cart-header.flex-column .col-6 {
    -ms-flex-preferred-size: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }

  .shopping-cart-header.flex-column .col-6 .deliver-to {float: none;}
  .global-search {
    width: calc(100% - 10px);
    left: 5px;
  }
  .global-search .header-search {padding-inline: 10px;}
  .global-search .header-search > form {width: calc(100% - 10px) !important}
  .global-search .search-box-button {margin: 0;}
  .global-search .search-box-button button {
    width: 42px;
    border-radius: 0;
  }

  #return-policy-tab {padding-inline: 15px;}
  .trending-items-area .feature-items .slick-arrow {top: -151px}
  .featured-categories .featured-category .featured-category-text h3 {font-size: 12px}
  .featured-categories .featured-category .featured-category-text span {
    font-weight: 400;
    border-top: none;
    padding-top: 0;
    margin-top: 3px;
  }
}
@media (max-width: 390px) {
  .flash-deal-area .flash-deal-product-utility a span.d-sm-none {display: none !important;}
  .flash-deal-area .flash-sell-timer {flex-direction: column}
  .flash-deal-area .flash-sell-timer > span {margin: 10px 0 !important}
  .flash-deal-area .flash-deal .best-deal-arrow {margin-top: -122px}
}
@media (max-width: 380px) {
  .product-list-col .best-seller-item {width: 100%}
  .product-list-col-product {
    max-width: 100%;
    margin-inline: auto;
    width: 260px;
  }
  .share > span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .sp-btns a {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .sp-btns a + a {margin-top: 10px;}
  .sp-btns a#buy-now-btn {margin-bottom: 0;}
  .sp-btns a i {margin-inline-end: 10px;}
  .featured-vendors-cards .best-seller-item.border-animate {box-shadow: none;border: none}
}
@media (max-width: 360px) {
  .close-sidebar strong {
    width: 30px;
    height: 30px;
    font-size: 16px;
    transform: translate(295px, -1px);
  }
}
@media (max-width: 350px) {
  .checkout-btns >a + a {margin-top: 10px;}
  .checkout-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .top-promo-banner img {
    height: auto;
    object-position: center;
  }
}
@media (min-width: 380px) {
  .header-utility ul li + li {margin-inline-start: 15px;}
  .header-menu-toggler {margin-inline-start: 5px;}
}
@media (min-width: 576px) {
  .header-logo {
    margin-inline-start: 0;
  }
}
@media (min-width: 992px) {
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .header-search {padding: 0;}
}

#zcart-js-theme-select.theme-select {display: none;}

.mobile-mega-menu,
.main-menu-top,
.main-menu-bottom,
.close-sidebar {display: none !important;}

.mobile-mega-menu.open,
.main-menu.mobile-mega-menu.open~.main-menu-bottom,
.main-menu.mobile-mega-menu.open~.main-menu-top,
.close-sidebar.active {display: block !important;}

/* ------------------------------------------------------------------
 * Category group strip
 * Compact icon + label bar under the primary nav, on every page.
 * Rendered by theme::nav.category_strip (see nav/main.blade.php).
 * Deliberately outside .primary-nav, which is display:none below 992px —
 * this strip stays visible on mobile and scrolls horizontally there.
 * ------------------------------------------------------------------ */
.category-strip {
  background: var(--bg-color);
  border-bottom: 1px solid var(--gray);
}

.category-strip-list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-strip-list::-webkit-scrollbar {
  display: none;
}

.category-strip-item {
  flex: 1 0 auto;
  min-width: 0;
}

.category-strip-item>a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 5px 6px;
  min-width: 72px;
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.category-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 3px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  transition: background-color .15s ease;
}

.category-strip-label {
  max-width: 62px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-strip-item>a:hover {
  color: var(--primary-color);
}

.category-strip-item>a:hover .category-strip-icon {
  background: var(--light);
}

/* The leading "For You" entry is always accented, as in the reference. */
.category-strip-item:first-child .category-strip-label {
  color: var(--primary-color);
}

.category-strip-item.is-active>a {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.category-strip-item.is-active .category-strip-label {
  font-weight: 700;
}

.category-strip-item.is-active .category-strip-icon {
  background: var(--light);
}

@media screen and (max-width: 991px) {
  .category-strip .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .category-strip-item>a {
    min-width: 64px;
    padding: 8px 4px 5px;
  }

  .category-strip-icon {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .category-strip-label {
    max-width: 56px;
    font-size: 11px;
  }
}

/* The theme sets `a:hover, a, a span { color: #0066c0 }` globally, which targets
   the spans directly and so beats the colour inherited from the anchor. Force the
   strip's own spans to follow their link instead. */
.category-strip-item>a .category-strip-label,
.category-strip-item>a .category-strip-icon {
  color: inherit;
}

.category-strip-item:first-child>a .category-strip-label {
  color: var(--primary-color);
}

/* ------------------------------------------------------------------
 * Site switcher
 * Pill row linking the five independent storefronts that make up
 * dpmart.in. Rendered by theme::nav.site_switcher, included from
 * nav/main.blade.php between .top-nav and #header-main.
 * Sits outside .primary-nav (display:none below 992px), so it stays
 * visible on mobile. Below 992px the row WRAPS rather than scrolling —
 * all five sites must be visible on a phone (2026-08-26); the desktop
 * row still scrolls if it ever overflows.
 * Colours come from the theme variables so the dark variant
 * (style.css:54) recolours the active pill for free.
 * ------------------------------------------------------------------ */
.site-switcher {
  background: var(--bg-color);
  border-bottom: 1px solid var(--gray);
}

.site-switcher-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-switcher-list::-webkit-scrollbar {
  display: none;
}

.site-switcher-item {
  flex: 0 0 auto;
}

.site-switcher-item>a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  /* Outlined at rest, filled when current: the selected site then differs by
     more than hue, which colour alone would not give a colour-blind visitor.
     Tokens rather than the two one-off greys this used to hardcode. */
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.site-switcher-icon {
  font-size: 15px;
  opacity: .85;
}

.site-switcher-item>a:hover {
  background: var(--light);
  border-color: var(--site-color, var(--primary-color));
  color: var(--site-color, var(--primary-color));
}

.site-switcher-item>a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Active = the site you are currently on. Solid brand orange, white text, and a
   soft brand-tinted lift so it reads as raised out of the row. */
.site-switcher-item.is-active>a {
  background: var(--site-color, var(--primary-color));
  border-color: var(--site-color, var(--primary-color));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}

.site-switcher-item.is-active>a .site-switcher-icon {
  opacity: 1;
}

.site-switcher-item.is-active>a:hover {
  /* No per-site "dark" variant exists, so the current pill darkens by overlay
     rather than by a second colour per site. */
  background: var(--site-color, var(--primary-color));
  border-color: var(--site-color, var(--primary-color));
  color: #fff;
  filter: brightness(.92);
}

/* The theme sets `a:hover, a, a span { color: #0066c0 }` globally, which targets
   the spans directly and so beats the colour inherited from the anchor. Force the
   switcher's own label and icon to follow their link instead. This is the same
   trap the category strip hits — see the note at the end of its block. */
.site-switcher-item>a .site-switcher-label {
  color: inherit;
}

/* The icon carries the site's own colour at rest — the labels stay neutral, so
   the row reads as a set rather than as five coloured words. On the current
   site the pill is already filled, so the icon inherits white. */
.site-switcher-item>a .site-switcher-icon {
  color: var(--site-color, inherit);
}

.site-switcher-item.is-active>a .site-switcher-icon {
  color: inherit;
}

@media screen and (max-width: 991px) {
  .site-switcher .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* All five sites have to be visible on a phone, so the row wraps instead of
     scrolling: a scrolling row hides whatever does not fit behind a gesture
     nothing signposts. Wrapping only happens when they genuinely do not fit —
     on a tablet the five still sit on one line. */
  .site-switcher-list {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    gap: 6px;
    padding: 6px 0;
  }

  .site-switcher-item>a {
    padding: 6px 13px;
    font-size: 12px;
  }

  .site-switcher-icon {
    font-size: 14px;
  }
}

/* Phones: all five on ONE line, icon kept (owner, 2026-08-26). Side by side the
   five icon+label pills need ~395px against ~344px of usable row on a 360px
   device. Stacking them costs height instead of width: each pill is then only as
   wide as its label, and the icon still shows. `column` keeps the markup's own
   order — icon on top, text underneath. */
@media screen and (max-width: 575px) {
  .site-switcher-list {
    flex-wrap: nowrap;
    gap: 2px;
  }

  /* Five equal columns filling the row, so the pills stop being ragged
     label-width lozenges and read as one set of shortcuts. */
  .site-switcher-item {
    flex: 1 1 0;
    min-width: 0;
  }

  /* No border, no fill: at this size the outlined-pill treatment fights the
     stacked layout. The icon disc carries the shape and the accent instead. */
  .site-switcher-item>a {
    flex-direction: column;
    gap: 5px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 10.5px;
    min-width: 0;
  }

  .site-switcher-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--light);
    font-size: 13px;
    opacity: 1;
  }

  /* Ellipsis is the last resort on a very narrow device: a long name truncates
     rather than widening its column. */
  .site-switcher-item>a .site-switcher-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Current site: the disc fills with the site's colour and the label takes it
     too. The desktop pill's fill, border and shadow are all cancelled here. */
  .site-switcher-item.is-active>a,
  .site-switcher-item.is-active>a:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    filter: none;
    color: var(--site-color, var(--primary-color));
  }

  .site-switcher-item.is-active>a .site-switcher-icon {
    background: var(--site-color, var(--primary-color));
    color: #fff;
  }
}

/* ==========================================================================
   COMPACT CATEGORY TILES  (2026-08-05)

   Applies SITE-WIDE to every category tile row (owner: "do the same for all
   site", 2026-08-05). There are exactly two live rows, and both are covered
   because these selectors match the shared classes:

     - theme::sections.featured_category-new  -> homepage  (index.blade.php:18)
     - theme::sections.category_tiles         -> category group page,
                                                 sub-group page, landing pages

   An earlier revision scoped this behind a .featured-category-section--compact
   modifier to spare the homepage. That modifier has been REMOVED — do not
   reintroduce it; the two rows are meant to look the same now.

   Note the homepage tile has one extra element the others do not: a listings
   count <span> after the <h3> (featured_category-new.blade.php:26). It flows
   under the label and keeps its existing border-top divider (style.css:8114).

   Every selector below is deliberately IDENTICAL in specificity to the base
   rule it overrides (style.css:8059-8121) and wins purely on source order,
   being at the end of the file. Consequence: these must stay at the end. The
   h3 rule sets no font-size, so the existing responsive steps (15px -> 14px at
   <=991px -> 12px at the small breakpoint) still apply.

   Owl's own config is NOT touched — see
   docs/analysis/category-browse-navigation.md §7.5 for why (a retune froze the
   carousel and was reverted).
   ========================================================================== */

/* Fixed circle size. Without this the tile has no size of its own and simply
   stretches to whatever width Owl gives its slot (~212px on a 1320px container),
   which is what made these rows look oversized. Auto side margins keep the
   circle centred now that it is narrower than its slot. */
.featured-categories .featured-category figure {
  max-width: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* A square box is what makes border-radius:50% an actual circle. Category cover
   images are not reliably square (the placeholder category_cover.jpg is a
   1280x200 banner), so without object-fit they render as a flat ellipse at a
   fixed width. */
.featured-categories .featured-category figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Label below the circle instead of overlaying its bottom edge. The base rule
   absolutely positions this at bottom:-3px on a white background; static flow
   is what puts it underneath. The !important matches the base rule's own
   !important on padding. */
.featured-categories .featured-category .featured-category-text {
  position: static;
  background: transparent;
  padding: 8px 0 0 !important;
}

/* Two-line cap. Now that the label is in normal flow, a long category name
   ("Switch Switch Accesseries") would wrap to three or four lines at 100px wide
   and leave the row ragged. min-height reserves the second line so every tile
   in the row aligns whether its name wraps or not. */
.featured-categories .featured-category .featured-category-text h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
  word-break: break-word;
  /* The parent is a centring flex column, which shrink-wraps this box — that
     centres a one-line label on its own but leaves a wrapped two-line label
     ragged. Full width + text-align centres both lines. */
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   CATEGORY SCROLL STRIP  (2026-08-05)

   Replaces the Owl carousel on the category-browse tile rows (category group,
   sub-group, CMS landing) with a native horizontally-scrolling strip of small
   rounded-square tiles. The homepage is NOT affected — it renders a different
   blade (sections/featured_category-new) and keeps its Owl carousel, its 100px
   circles, its arrows and its autoplay.

   WHY NOT A CAROUSEL: Owl has no "fewer items than slots" guard. With
   loop:true it clones tiles to fill empty slots, so a group with 5 sub-groups
   shows each twice. With loop:false, app.js:1841 computes
   maximum = items.length - settings.items clamped at 0, so a short row gets no
   scrollable range and the arrows die — that is the "slider is not working"
   report from the earlier attempt. Neither is fixable by tuning the item
   counts. See docs/analysis/category-browse-navigation.md §7.6 and §8.

   SELF-SUFFICIENT BY DESIGN: every rule here overrides the BASE rules at
   style.css:8059-8121 directly. It deliberately does NOT rely on the COMPACT
   CATEGORY TILES block above, which is scoped site-wide today but may later be
   narrowed to the homepage.

   SPECIFICITY, NOT SOURCE ORDER: .category-strip sits on the same element as
   .featured-categories, so these selectors carry one more class than the base
   rules and win on specificity. Unlike the COMPACT block, this one does not
   have to stay last in the file.
   ========================================================================== */

/* The base rule sets overflow-x: clip (style.css:8060), which would make the
   strip unscrollable. This must override it.

   padding is 4px 10px, not the base rule's 0 10px: the base .featured-category
   figure:hover (style.css:8078) paints a 3px double outline plus a box-shadow
   outside the border box, and with no vertical padding and overflow-y:hidden
   here, that ring was clipped top and bottom. 4px top/bottom gives it room. */
.featured-categories.category-tile-strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 10px;
}

.featured-categories.category-tile-strip::-webkit-scrollbar {
  display: none;
}

/* Fixed-width tiles that never shrink. margin-right is used rather than flex
   `gap`, which has no support floor at all, so it degrades nowhere.
   Note this is NOT because `gap` has an older floor than the rest of this
   block: `aspect-ratio` below needs Android WebView 88+ / Safari 15+, newer
   than `gap`'s WebView 84+ / Safari 14.1+, so any device too old for `gap`
   is also too old for `aspect-ratio`. The real reason is how each degrades
   when unsupported: `gap` missing collapses every tile's spacing to zero
   (tiles touching, visibly broken), whereas `aspect-ratio` missing just
   leaves the tile at its natural image ratio inside a fixed width (ragged
   tile heights — untidy but legible). The risks are not comparable, so the
   belt-and-braces `margin-right` stays even though the `gap` floor it guards
   against is no stricter than `aspect-ratio`'s. */
.featured-categories.category-tile-strip .featured-category {
  flex: 0 0 auto;
  width: 62px;
  margin-right: 14px;
}

.featured-categories.category-tile-strip .featured-category:last-child {
  margin-right: 0;
}

/* Rounded square instead of the base circle. max-width:none defeats the 100px
   cap the COMPACT block applies, so the tile width above is the only lever.
   overflow:hidden is what actually clips the image to the rounded corners. */
.featured-categories.category-tile-strip .featured-category figure {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.featured-categories.category-tile-strip .featured-category figure:after {
  border-radius: 10px;
}

/* The base rule rounds the image itself to 50%; the figure now does the
   clipping, so the image is square and simply fills it. */
.featured-categories.category-tile-strip .featured-category figure img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

/* The base rule absolutely positions this label across the bottom of the tile
   on a white background. Static flow puts it underneath instead. Set here
   rather than inherited from the COMPACT block, so this strip stands alone. */
.featured-categories.category-tile-strip .featured-category .featured-category-text {
  position: static;
  background: transparent;
  padding: 6px 0 0 !important;
}

/* Single-line label with an ellipsis, matching the reference. The COMPACT
   block makes this a -webkit-box with a 2-line clamp; display:block and
   line-clamp:unset must undo that first, or white-space:nowrap has no effect
   and no ellipsis appears. Base font-size is 15px, far too large for a 62px
   tile — it would truncate most names to about five characters. */
.featured-categories.category-tile-strip .featured-category .featured-category-text h3 {
  display: block;
  -webkit-line-clamp: unset;
  min-height: 0;
  width: 100%;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

@media (min-width: 576px) {
  .featured-categories.category-tile-strip .featured-category {
    width: 72px;
  }
}

@media (min-width: 992px) {
  .featured-categories.category-tile-strip .featured-category {
    width: 78px;
  }

  .featured-categories.category-tile-strip .featured-category .featured-category-text h3 {
    font-size: 12px;
  }
}

/* Physical margins flip meaning under direction:rtl (body.rtl, style.css:387).
   Without this every gap collapses and the tiles touch. margin-inline-end would
   be cleaner but is Chrome 87+, newer than the WebView floor this block targets. */
body.rtl .featured-categories.category-tile-strip .featured-category {
  margin-right: 0;
  margin-left: 14px;
}

body.rtl .featured-categories.category-tile-strip .featured-category:last-child {
  margin-left: 0;
}

/* ==========================================================================
   Carton / wholesale purchase mode switch
   Hand-edited: this theme has no build step (see CLAUDE.md).
   ========================================================================== */
.carton-mode {
  margin-bottom: 12px;
}

.carton-mode-switch {
  display: flex;
  align-items: center;
  background: #f2f3f5;
  border-radius: 40px;
  padding: 4px;
  margin-bottom: 10px;
}

.carton-mode-btn {
  position: relative;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  border-radius: 40px;
  padding: 8px 16px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.carton-mode-btn.active {
  background: #111;
  color: #fff;
}

/* The knob is a real control sitting between the two labels, not a decoration
   drawn off one of them: clicking it flips to the other mode, while the labels
   still select directly. `is-carton` on the switch is set by
   scripts/carton_mode.blade.php, because CSS cannot key off a later sibling's
   state. */
.carton-mode-knob {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 16px;
  margin: 0 4px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #d5d8dd;
  cursor: pointer;
  transition: background-color .15s ease;
}

.carton-mode-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: left .15s ease;
}

.carton-mode-switch.is-carton .carton-mode-knob {
  background: #111;
}

.carton-mode-switch.is-carton .carton-mode-knob::after {
  left: 14px;
}

/* Listing with no pack size or no tiers yet: the switch looks and behaves like
   any other, it just reveals the coming-soon note instead of carton prices. */
.carton-mode-unavailable .carton-mode-switch {
  margin-bottom: 6px;
}

.carton-coming-soon {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-align: right;
  padding-right: 16px;
}

.carton-price-summary {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.carton-price-summary-item {
  display: flex;
  flex-direction: column;
}

.carton-price-label {
  font-size: 12px;
  color: #6b7280;
  line-height: 1;
}

.carton-price-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.carton-price-value small {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}

.carton-price-dash {
  padding: 0 10px 4px;
  color: #6b7280;
}

.carton-pack-note {
  flex-basis: 100%;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.carton-tier-table {
  margin-top: 10px;
}

.carton-tier-table .js-carton-tier-row {
  cursor: pointer;
}

.carton-tier-table .js-carton-tier-row.active {
  background-color: #f2f3f5;
  font-weight: 600;
}

.js-piece-tier-row {
  cursor: pointer;
}

.hero-carousel-section {
  margin: 12px 0 20px;
}

.hero-carousel .hero-carousel-item {
  display: block;
  border-radius: 6px;
  overflow: hidden;
}

/* 1440x350 is what the uploaded hero artwork actually is: every slide measures
   between 3.66 and 5.0 wide, clustered on 4.11. The old 27/20 (1.35) came from
   the three-up layout, where each tile was a third of the row; at one slide per
   row it cropped a wide banner into a near-square and threw most of it away. */
.hero-carousel .hero-carousel-img {
  width: 100%;
  aspect-ratio: 1440 / 350;
  object-fit: cover;
  display: block;
}

.hero-carousel .owl-dots {
  text-align: center;
  margin-top: 10px;
}

.hero-carousel .owl-dots .owl-dot span {
  width: 7px;
  height: 7px;
  margin: 0 3px;
  background: #d0d5dd;
  display: block;
  border-radius: 50%;
  transition: background .2s ease;
}

.hero-carousel .owl-dots .owl-dot.active span {
  background: #6b7280;
}

@media (max-width: 767px) {
  .hero-carousel-section {
    margin: 8px 0 14px;
  }

  /* A 4.11 banner across a 390px phone is only ~84px tall — faithful to the
     artwork but too small to read, so the box is deliberately taller than the
     source and object-fit: cover centre-crops the sides. This is a workaround
     for there being no mobile artwork: no slider has a mobile_image, so
     sections/slider_mobile falls back to the desktop file every time. Upload
     2:1 mobile banners and this rule stops cropping anything. */
  .hero-carousel .hero-carousel-img {
    aspect-ratio: 2 / 1;
  }
}

/* Mobile bottom tab bar
   Hidden on desktop; shown <= 991px, the same breakpoint that reveals
   .search-btn in the header. Sits below .wrapper::before (z-index 998) so the
   search overlay dims it, and below the mega menu (2000/2001). */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 997;
  background: var(--white);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-bar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 2px;
  color: #6b7280;
  text-align: center;
}

.mobile-bottom-bar-item:hover,
.mobile-bottom-bar-item:focus {
  color: #6b7280;
  text-decoration: none;
}

.mobile-bottom-bar-item.active {
  color: var(--primary-color);
}

.mobile-bottom-bar-item i {
  font-size: 19px;
  line-height: 1;
}

.mobile-bottom-bar-item > span {
  font-size: 11px;
  line-height: 1;
}

.mobile-bottom-bar-icon {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.mobile-bottom-bar-icon .badge {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 16px;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1;
  background: var(--primary-color);
  color: var(--white);
  border-radius: 10px;
}

@media (max-width: 991px) {
  .mobile-bottom-bar {
    display: flex;
  }

  /* The drawer carries its own bottom row (.main-menu-bottom, z-index 2001);
     showing both would stack two bars. Same sibling pattern the drawer's own
     rules use, which is why the bar is a sibling of .main-menu. */
  .main-menu.mobile-mega-menu.open ~ .mobile-bottom-bar {
    display: none;
  }

  .wrapper {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* Wishlist and share, floating over the product image */
.product-media {
  position: relative;
}

.product-media-actions {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-media-action {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  /* Bordered and shadowed harder than the theme default: these sit on top of a
     product photo that is usually white, and a plain white circle disappears
     into it. */
  border: 1px solid var(--gray);
  /* Brand colour at rest so the glyph carries the eye, not just the ring. The
     hover state below still inverts to a filled button. */
  color: var(--primary-color);
  font-size: var(--font-size-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: var(--transition);
}

.product-media-action:hover,
.product-media-action:focus {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

#shareModal .share {
  margin-top: 4px;
}

/* Availability / condition / rating on one line under the title */
.product-info-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-bottom: 6px;
}

.product-info-meta > * + *::before {
  content: "\00b7";
  margin-inline-end: 8px;
  color: var(--gray);
}

.product-info-meta .product-info-rating {
  font-size: var(--font-size);
  line-height: 1;
  min-height: 0;
}

/* Availability / condition, over the top-left of the product image */
.product-media-badges {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.product-media-badges > div {
  padding: 2px 10px;
  border-radius: var(--border-radius);
  background: var(--white);
  /* Same treatment as .product-media-action: these two layers float over the
     same white product photo, so they carry the same ring, shadow and colour. */
  border: 1px solid var(--gray);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-color);
}

/* Listing-card badge slot -- distinct from .product-info-labels (existing
   getLabels() tags, top-left, uniform red pills) and .product-media-badges
   (condition chip, also top-left): placed top-right instead so none of the
   three collide. Capped at 2 by the blade template, not this CSS.
   docs/superpowers/plans/2026-09-14-product-badges.md. */
.product-badges {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.product-badge {
  padding: 3px 10px;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  white-space: nowrap;
}

.product-badge--wholesale {
  background: var(--blue);
}

.product-badge--bestseller {
  background: var(--primary-color);
}

.product-badge--new-arrival {
  background: var(--green);
}

/* Uniform product image box: every listing image occupies the same square,
   contained and centred, so the page does not resize between images. */
.product-media > a,
.product-media .zoomPad {
  display: block;
  float: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--white);
}

.product-media .product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-info-meta .product-info-availability span {
  color: #067d62;
  font-weight: 500;
}

/* Rating chip: 4.1 * | 8 Reviews */
.product-rating-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--border-radius-3);
  background: var(--light);
  font-size: var(--font-size-sm);
  color: var(--primary-text);
}

.product-rating-chip:hover,
.product-rating-chip:focus {
  color: var(--primary-text);
  background: var(--gray);
}

.product-rating-chip-score {
  font-weight: 700;
  white-space: nowrap;
}

.product-rating-chip-score i {
  margin-inline-start: 3px;
  font-size: var(--font-size-xs);
  color: #067d62;
}

.product-rating-chip-count {
  margin-inline-start: 8px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--gray);
  color: var(--secondary-text);
  white-space: nowrap;
}

/* The chip carries its own box, so it needs no dot in front of it. */
.product-info-meta > .product-rating-chip::before {
  content: none;
}

/* Wholesale enquiry pair: WhatsApp is the instant route and carries the weight,
   Contact Seller is the quieter form route. They share the row and go full
   width on a narrow screen without a media query. */
.product-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-contact-actions > .btn {
  flex: 1 1 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--border-radius);
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}

.btn-whatsapp {
  background: #25d366;
  border: 1px solid #25d366;
  color: var(--white);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background: #1da851;
  border-color: #1da851;
  color: var(--white);
}

.btn-whatsapp i {
  font-size: var(--font-size-lg);
}

/* White on the tinted box, not tinted itself: two peach surfaces on top of each
   other would merge and the button would stop reading as a control. Still a step
   below Add to Cart — that one is a filled orange gradient, and a second solid
   orange button beside it would compete. Fills on hover to confirm it is live. */
.btn-contact-seller {
  background: var(--white);
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
}

.btn-contact-seller:hover,
.btn-contact-seller:focus {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

/* Phones and tablets: search, account and cart are in the fixed bottom tab bar,
   so the header stops repeating them. Compare and wishlist stay — the bar has
   no tab for either. Same 991px breakpoint the bar itself uses.
   Hidden, never removed: app.js queries `.search-btn span` and binds to it with
   no null check, so taking it out of the DOM would throw and kill the rest of
   that file. */
@media (max-width: 991px) {
  .header-utility .search-btn,
  .header-utility .header-utility-account,
  .header-utility .header-utility-cart {
    display: none;
  }
}

/* Flash-deal discount beside the price. Inline-block + nowrap so it moves as a
   unit if the column is too narrow, instead of breaking "(50% Off)" apart. */
/* The PDP price line: price, strikethrough and the % Off chip on one baseline.
   Scoped to .js-piece-pricing so listing cards, which reuse .product-info-price,
   keep their own inline flow. Laid out with flex + gap rather than margins so
   that when it does have to wrap — a very long total on a narrow phone — the
   parts wrap as whole units and stay aligned, instead of the chip dangling
   under the price on its own. */
.js-piece-pricing .product-info-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.product-info-price .product-info-discount {
  display: inline-block;
  font-size: var(--font-size);
  font-weight: 500;
  line-height: 1;
  color: var(--red);
  white-space: nowrap;
}

/* The empty <span class="old-prices"> the blade always emits would otherwise
   take a flex slot and add a gap before the chip. */
.js-piece-pricing .product-info-price > span:empty {
  display: none;
}

/* Generic horizontal scroll strip. Same behaviour as the product thumbnail
   strip: native overflow, arrows only while there is something to scroll.
   `safe center` keeps a short row centred without stranding its first item once
   the row overflows. */
.scroll-strip {
  position: relative;
  /* The PDP wraps this in a `.sidebar-product-list.flex-sm-row` flex parent, so
     the strip must claim the row and be allowed to shrink below its content
     width — without min-width:0 a flex item refuses to, and the row would
     overflow its parent instead of scrolling. */
  width: 100%;
  min-width: 0;
}

.scroll-strip__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.scroll-strip__row::-webkit-scrollbar {
  display: none;
}

.scroll-strip__item {
  flex: 0 0 160px;
  text-align: center;
  /* A column so the add-to-cart button can be pushed to the bottom: the cards
     stretch to the tallest, and without this the buttons sit at whatever height
     the content above them happens to end. */
  display: flex;
  flex-direction: column;
}

/* Uniform image box. `.recent-items-img` carries no height of its own, so a
   wide product shot and a tall one produced different card heights and pushed
   every row below them out of line. Scoped to the strip — the class is used by
   other sections too. */
.scroll-strip__item .recent-items-img {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-strip__item .recent-items-img img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.scroll-strip__item .btn {
  margin-top: auto;
}

.scroll-strip__item--wide {
  flex-basis: 200px;
}

.scroll-strip__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  font-size: 13px;
  color: var(--secondary-text);
  cursor: pointer;
}

.scroll-strip__nav:hover {
  color: var(--primary-color);
}

.scroll-strip__nav--prev {
  inset-inline-start: 0;
}

.scroll-strip__nav--next {
  inset-inline-end: 0;
}

.scroll-strip.is-scrollable .scroll-strip__nav {
  display: flex;
}

.scroll-strip.is-scrollable .scroll-strip__row {
  padding-inline: 36px;
}

/* Technical details: a two-column spec list, not a data grid. Labels read from
   the start edge so a long one wraps as a normal phrase instead of a ragged
   right-aligned block, and the label column is wide enough to hold the longest
   of them. The per-cell inline `width: 65%` this table used to carry is gone —
   an inline width can only be beaten with !important, so it was removed from
   the markup instead. */
.technical-details th,
.technical-details td {
  padding: 10px 14px;
  vertical-align: top;
}

.technical-details th {
  width: 38%;
  min-width: 130px;
  font-weight: 600;
  text-align: start;
  color: var(--primary-text);
}

.technical-details td {
  color: var(--secondary-text);
}

@media (max-width: 575px) {
  .technical-details th {
    width: 45%;
    min-width: 0;
  }
}

/* Product image zoom (scripts.product_zoom). The magnifier is drawn inside the
   image frame, so nothing overlays the price and buy column the way jQZoom's
   .zoomWindow did. Those rules are left above, simply no longer generated. */
.product-media > a {
  position: relative;
  cursor: zoom-in;
}

.product-media-zoom {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  background-color: var(--white);
  background-repeat: no-repeat;
  transition: opacity .15s ease;
  /* Under the badges and the wishlist/share buttons, which sit at 5. */
  z-index: 2;
}

.product-media-zoom.is-active {
  opacity: 1;
}

/* Viewer.js collects its sources from real <img> nodes, so the gallery stays
   rendered and out of sight rather than display:none. */
.product-media-gallery {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* The prompt and the contact buttons in one panel, tinted so the whole block
   reads as an offer rather than page furniture. Kept to the palest step of the
   brand colour: this sits directly under the price and Add to Cart, and a
   saturated panel there would pull attention off the buy button.
   
   The tint is MIXED from --primary-color rather than hard-coded, because this
   theme ships :root[theme='dark'] and :root[theme='blue'] variants that redefine
   both --primary-color and --white; a literal peach would stay peach on a dark
   page. The plain declarations above each mix are the fallback for browsers
   without color-mix, which then get a neutral themed box. */
.contact-seller-box {
  padding: 14px;
  border-radius: var(--border-radius);
  border: 1px solid var(--gray);
  border-color: color-mix(in srgb, var(--primary-color) 32%, var(--white));
  background: var(--light);
  background: color-mix(in srgb, var(--primary-color) 6%, var(--white));
}

@media (max-width: 575px) {
  .contact-seller-box {
    padding: 12px;
  }
}

/* The line above the Contact Seller button. Quiet on purpose — it is a prompt
   for the button, not a banner competing with it. */
.contact-seller-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--secondary-text);
}

.contact-seller-note i {
  margin-top: 3px;
  color: var(--primary-color);
}

.contact-seller-note strong {
  color: var(--primary-text);
  font-weight: 600;
}

/* Subject is pre-picked by whichever enquiry button opened the modal --
   locked so the sender can't pick a different one than the button promised.
   Still a plain, submittable <select> (not [disabled]); scripts.product_page
   blocks mousedown/keydown on it instead. */
.js-subject-locked {
  background-color: var(--light);
  cursor: not-allowed;
}

/* Cancel / return item picker. The rows were plain inline flow, so the product
   image rendered at its natural size — S3 ignores the ?p= size argument, so the
   'tiny' request still returns the original file. Size lives here instead. */
.cancel-items-list .list-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cancel-item-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-3);
}

.cancel-item-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.cancel-items-list .badge {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* Dashboard table thumbnails. These <img>s carried no size at all and relied on
   the ?p= size argument, which S3 ignores — so the original file came back and
   rendered at its natural width, stretching the Orders and Wishlist rows. Same
   cause as the cancel/return item picker. */
.dashboard-section .dashboard-shop-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
}

.dashboard-section .dashboard-wish-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin-inline-end: 10px;
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-3);
}

/* The row's fixed 34px line-height is what the text needs, not the 40px thumb
   beside it — let the cell breathe instead of clipping. */
.dashboard-section table td {
  vertical-align: middle;
}

/* Header delivery location. One line: where we will deliver. The desktop copy
   sits in .top-nav; .delivery-location-bar is the mobile strip, because .top-nav
   is display:none below 992px. */
.delivery-location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-text);
  text-decoration: none;
  line-height: 1.25;
}

.delivery-location:hover,
.delivery-location:focus {
  color: var(--primary-color);
  text-decoration: none;
}

.delivery-location-icon {
  font-size: 16px;
  color: var(--primary-color);
}

.delivery-location-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.delivery-location-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Not-set reads as the call to action Flipkart uses, not as a value. */
.delivery-location-cta {
  color: var(--primary-color);
}

.delivery-location-caret {
  font-size: 14px;
  color: var(--secondary-text);
}

.delivery-location-value {
  max-width: 260px;
}

.delivery-location-bar {
  border-top: 1px solid var(--light);
  padding: 8px 0 10px;
}

.delivery-location-bar .delivery-location-value {
  max-width: none;
}

.delivery-location-bar .delivery-location-text {
  flex: 1 1 auto;
}

/* Picker */
.delivery-location-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-3);
}

.delivery-location-search i {
  color: var(--secondary-text);
}

.delivery-location-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--primary-text);
}

.delivery-location-search input::-webkit-search-cancel-button {
  display: none;
}

.delivery-location-search-clear {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--secondary-text);
  cursor: pointer;
}

.delivery-location-locate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 600;
  color: var(--primary-color);
}

.delivery-location-locate:hover,
.delivery-location-locate:focus {
  color: var(--primary-color);
  text-decoration: underline;
}

#deliveryLocationResults {
  margin-top: 8px;
}

.delivery-location-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.delivery-location-add {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  white-space: nowrap;
}

.delivery-location-list {
  max-height: 220px;
  overflow-y: auto;
}

.delivery-location-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--border-radius-3);
  color: var(--primary-text);
}

.delivery-location-item:hover,
.delivery-location-item:focus {
  background: var(--light);
  color: var(--primary-text);
  text-decoration: none;
}

.delivery-location-item i {
  margin-top: 3px;
  color: var(--secondary-text);
}

.delivery-location-item span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.delivery-location-item small {
  color: var(--secondary-text);
}

.delivery-location-empty {
  margin: 0;
  padding: 10px 8px;
  font-size: var(--font-size-sm);
  color: var(--secondary-text);
}

.delivery-location-divider {
  margin: 16px 0;
  border-top: 1px solid var(--light);
}

/* Account menu on the header person icon. Replaces the "Logout" link that used
   to sit in .top-nav, which is display:none below 992px -- this row is not. */
.header-utility-account {
  position: relative;
}

.account-menu {
  min-width: 210px;
  padding: 6px 0;
  border: 1px solid var(--light);
  border-radius: var(--border-radius-3);
  /* #header-main sits at z-index 10; clear it and the sticky bars below. */
  z-index: 1030;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.account-menu-greeting {
  display: block;
  padding: 6px 14px 8px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu .dropdown-item {
  /* This theme bundles Bootstrap 3 (li>a dropdowns), which has no
     .dropdown-item rule at all -- that class is Bootstrap 4/5. Without an
     explicit display:block, these <a> tags default to inline, wrapping
     side by side instead of stacking one per row. */
  display: block;
  width: 100%;
  white-space: nowrap;
  padding: 7px 14px;
  font-size: var(--font-size-sm);
  color: var(--primary-text);
}

.account-menu .dropdown-item:hover,
.account-menu .dropdown-item:focus {
  background: var(--light);
  color: var(--primary-color);
}

.account-menu .dropdown-item i {
  width: 18px;
  margin-inline-end: 6px;
  text-align: center;
}

.account-menu-logout,
.account-menu-logout:hover,
.account-menu-logout:focus {
  color: #d93025;
}

/* Sign out sits apart from the navigation above it. */
.account-sidebar-nav li.account-sidebar-logout {
  border-top: 1px solid var(--gray);
}

.account-sidebar-nav li.account-sidebar-logout a {
  color: #d93025;
}

.account-sidebar-nav li.account-sidebar-logout:hover a {
  color: #d93025;
}

/* How much of the wallet balance to spend. Shipping-charge-advance orders only,
   and only when the balance exceeds the advance -- otherwise both options spend
   the same amount and the choice is noise. */
.wallet-mode-choice {
  margin: 8px 0 4px 22px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--light);
}

.wallet-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: normal;
  cursor: pointer;
}

.wallet-mode-option input {
  margin-top: 4px;
}

.wallet-mode-option span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.wallet-mode-option strong {
  font-size: var(--font-size-sm);
  color: var(--primary-text);
}

.wallet-mode-option small {
  color: var(--secondary-text);
}

/* Per-method note under a payment option. Replaces the permanent prepaid banner
   that used to sit above the whole list: the offer now appears against the
   method it applies to, only while that method is selected. */
.payment-method-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 2px 22px;
  padding: 8px 10px;
  border-radius: var(--border-radius-3);
  line-height: 1.35;
}

.payment-method-note i {
  margin-top: 2px;
}

.payment-method-note span {
  display: flex;
  flex-direction: column;
}

.payment-method-note strong {
  font-size: var(--font-size-sm);
}

.payment-method-note small {
  color: var(--secondary-text);
}

/* Owner's own shorthand for this content used a leading "*" on every line,
   title included -- added as ::before rather than baked into the lang
   strings, so the bullet doesn't need to travel through translations. */
.payment-method-note strong::before,
.payment-method-note small::before {
  content: '* ';
}

.payment-method-note--success {
  background: #eafff0;
  border: 1px solid #00b050;
}

.payment-method-note--success strong,
.payment-method-note--success i {
  color: #0a7a2f;
}

.payment-method-note--offer {
  background: #fff6e8;
  border: 1px solid #f0a500;
}

.payment-method-note--offer strong,
.payment-method-note--offer i {
  color: #a86a00;
}

.payment-method-note--info {
  background: var(--light);
  border: 1px solid var(--gray);
}

.payment-method-note--info strong,
.payment-method-note--info i {
  color: var(--primary-text);
}

/* Offered but not serviceable. Selectable, with the reason revealed on select. */
.payment-method-note--muted {
  padding: 4px 0 0;
  margin-block-end: 0;
}

.payment-method-unavailable .payment-method-note--muted small,
.payment-method-unavailable .payment-method-note--muted i {
  color: var(--secondary-text);
}

#pay-now-btn.disabled,
#pay-now-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* B2B verification. Revealed with the B2B method, so it reads as one panel
   rather than loose fields trailing the payment list. Vars, not fixed colours:
   the dark and alt palettes redefine --light and --primary-text. */
.b2b-verification-wrap {
  margin-left: 22px;
  padding: 12px 14px;
  background: var(--light);
  border: 1px solid var(--gray);
  border-left: 3px solid var(--primary-text);
  border-radius: var(--border-radius-3);
}

.b2b-verification-wrap .widget-title {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-text);
}

.b2b-verification-wrap .b2b-type-option {
  margin-right: 4px;
}

.b2b-verification-wrap label {
  font-size: var(--font-size-sm);
}

/* Direct child only: the Number/Upload Document labels further down are
   nested one level deeper inside .b2b-fields and must stay block (each above
   its own input). Overrides the global .form-group label { display: block; }
   (style.css:1742) so Aadhaar/GST sit on one line instead of stacking. */
.b2b-verification-wrap > .form-group label {
  display: inline-block;
}

/* The shared .iradio_minimal-blue skin's unchecked icon (sprite -100px 0,
   appjs.blade.php's global iCheck init) is a very thin, low-contrast gray
   ring -- correct and working, just hard to see. Scoped to this panel only,
   not the skin itself, since every other radio/checkbox site-wide uses it.
   Excludes .hover/.checked -- those sprite states are already a bold blue
   ring/fill and don't need it. */
.b2b-verification-wrap .iradio_minimal-blue:not(.hover):not(.checked) {
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--secondary-text) inset;
}

/* "Provide at least one" wasn't landing as "pick one, not both" with just a
   field label reading "OR ...". A divider between the two fields reads as an
   either/or choice the way inline text didn't. */
.b2b-or-divider {
  display: flex;
  align-items: center;
  color: var(--secondary-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin: 2px 0 12px;
}

.b2b-or-divider::before,
.b2b-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--gray);
}

.b2b-or-divider::before {
  margin-right: 8px;
}

.b2b-or-divider::after {
  margin-left: 8px;
}

/* "I agree with the Product Upgrade terms" wrapped to two lines under the
   global .form-group label uppercase + letter-spacing (style.css:1737) --
   the extra two words don't fit the sidebar width once stretched that way.
   Full ancestor chain in the selector, not just .form-group: this checkbox
   sits inside .shopping-cart-wrapper .cart-payment-options, which already
   carries its own higher-specificity `.form-group label { font-size:
   var(--font-size) }` (style.css:4843) that would otherwise win over a
   shorter selector and silently ignore the font-size override here.
   15px doesn't fit the ~217px sidebar column on one line (checked live --
   scrollWidth 284px vs 217px available); owner chose readability over a
   strict single line, so no white-space: nowrap here -- it wraps instead of
   clipping off the page edge. */
.shopping-cart-wrapper .cart-payment-options .form-group label.agree-terms-label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
}

/* Retail Offers / Wholesale Offers. The suffix is dropped on small screens so
   the two-up switch keeps its labels on one line. */
@media (max-width: 767px) {
  .carton-mode-btn-suffix {
    display: none;
  }
}

/* Tier saving, shared by both tier tables and the add-to-cart badge. */
.tier-discount {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--border-radius-3);
  background: #eafff0;
  border: 1px solid #00b050;
  color: #0a7a2f;
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
}

.js-qty-discount {
  margin-left: 8px;
  vertical-align: middle;
}

/* Guidance tiers for a listing with no prices set yet. */
.tier-placeholder {
  margin-top: 8px;
  margin-bottom: 8px;
}

.tier-placeholder table {
  margin-bottom: 0;
}

/* Quote Request (RFQ) wizard modal, ?v=40. The trigger's own styling
   (.header-utility-quote-request, the icon-only search-row button) was
   removed 2026-09-14 along with that button -- the modal itself, styled
   below, is unaffected; .top-nav's "Share Your Requirement" link is a plain
   .image-icon like its neighbours and needs none of this. */
.qr-progress {
  gap: 8px;
}
.qr-progress-step {
  flex: 1;
  text-align: center;
  opacity: .5;
}
.qr-progress-step.active,
.qr-progress-step.done {
  opacity: 1;
}
.qr-progress-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--gray);
  font-size: 13px;
  margin-bottom: 4px;
}
.qr-progress-step.active .qr-progress-circle {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.qr-progress-step.done .qr-progress-circle {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--white);
}
.qr-progress-label {
  display: block;
  font-size: 12px;
}
.qr-step {
  display: none;
}
.qr-step.active {
  display: block;
}

/* The header stops carrying what the bottom bar or the menu already provides.
   Hidden, never removed: app.js binds these by selector at load, and the
   hamburger shares `.main-menu-toggle` with the bar's Categories tab, which is
   what keeps opening the menu once the header copy is out of sight.
   Same 991px breakpoint the bar itself uses. */
@media (max-width: 991px) {
  .header-menu-toggler,
  .header-utility .header-utility-compare,
  .header-utility .header-utility-wishlist {
    display: none;
  }
}

/* PDP mobile sticky action bar (Retail/Wholesale + Add to Cart + Buy Now).
   bottom: 60px, not 0 -- .mobile-bottom-bar (this file, ~line 10923) already
   occupies the very bottom of the screen at every width below 991px; this
   bar sits directly above it rather than covering it. The three buttons
   here are proxies (scripts.product_page), not duplicates of the real
   controls -- see the comment in contents/product_page.blade.php for why. */
.pdp-sticky-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: 999;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--white);
  border-top: 1px solid var(--gray);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
}

@media (max-width: 991px) {
  .pdp-sticky-bar {
    display: flex;
  }
}

.pdp-sticky-bar-mode {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--gray);
  border-radius: var(--border-radius-3);
  overflow: hidden;
}

.pdp-sticky-mode-btn {
  border: none;
  background: var(--white);
  color: var(--secondary-text);
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  white-space: nowrap;
}

.pdp-sticky-mode-btn.active {
  background: var(--primary-color);
  color: var(--white);
}

.pdp-sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--border-radius-3);
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: 12px;
}

.pdp-sticky-btn--cart {
  flex: 0 0 auto;
  width: 44px;
  background: var(--light);
  color: var(--primary-text);
  font-size: var(--font-size-lg);
}

.pdp-sticky-btn--buy {
  flex: 1;
  background: var(--primary-color);
  color: var(--white);
}