:root{
	--accent-color: #0d9488;
	--contrast-color: #fff;
	--default-color:#5a6577;
	--surface-color:#fff;
	--nav-dropdown-background-color: #fff;
	--heading-color:#10243d;
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1420px;
    }
}
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}
a:hover,a:visited,a:focus{
	color:var(--heading-color);
}
.btn-primary:hover, .btn-primary:active,.btn-primary:focus{
	background: color-mix(in srgb, var(--accent-color), #000 15%) !important;
	border-color: color-mix(in srgb, var(--accent-color), #000 15%) !important;
	outline:0
}
.btn-primary,.btn-primary:visited{
	background:var(--accent-color);
	border-color:var(--accent-color);
	color:var(--contrast-color)
}
.btn-outline-primary,.btn-outline-primary:visited{
	border-color: color-mix(in srgb, var(--accent-color), #000 15%) !important;
	color:var(--accent-color);
}
.btn-outline-primary:hover,.btn-outline-primary:active,.btn-outline-primary:focus{
	background:var(--accent-color) !important;
	border-color:var(--accent-color) !important;
	color:var(--contrast-color)!important
}


body{
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size:14px;
  color:#000
}
header .main-header {
    border-bottom: 1px solid #e5e5e7;
    padding-bottom: 10px;
}
a{text-decoration:none}

header div#search span.search-icon-left {
    position: absolute;
    left: 10px;
    z-index: 10;
}
header div#search{
    align-items: center;	
	position:relative
}
header div#search .btn {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
    padding: 4px 10px;
    font-size: 12px;
}
header div#search input {
    background: #f0f0f5;
    border-radius: 8px;
    cursor: text;
    display: flex;
    gap: 2px;
    outline: 1px solid transparent;
    transition: .2s ease;
	width:100%;
	border-color:transparent;
	    padding-left: 35px;
}

.caption h4 {
    font-size: 16px;
    font-weight: 300;
}

header .action-btn i.bi{
	font-size:18px
}
header .action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--default-color);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    transition: all 0.2s ease;
}
header .action-btn .badge-count {
    position: absolute;
    top: 2px;
    left: 24px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
header .action-btn:hover {
    background-color:  color-mix(in srgb, var(--default-color), transparent 95%);
    color: var(--accent-color);
}
header  .cart-flyout {
  min-width: 370px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0 10px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: var(--surface-color);
  right: 0;
  left: auto;
  margin-top: 8px;
  overflow: hidden;
}

@media (max-width: 576px) {
  header  .cart-flyout {
    min-width: 300px;
  }
}

header  .cart-flyout .flyout-top {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

header  .cart-flyout .flyout-top h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

header  .cart-flyout .flyout-top .items-label {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  padding: 2px 10px;
  border-radius: 12px;
}

header  .cart-flyout .flyout-items {
  max-height: 300px;
  overflow-y: auto;
}

header  .cart-flyout .flyout-items .flyout-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 20px;
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}

header  .cart-flyout .flyout-items .flyout-item:last-child {
  border-bottom: none;
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-details {
  flex: 1;
  min-width: 0;
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-details h6 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-details .item-option {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 4px;
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-details .item-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-details .item-bottom .item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
}

header  .cart-flyout .flyout-items .flyout-item .flyout-item-details .item-bottom .item-qty {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

header  .cart-flyout .flyout-items .flyout-item .item-dismiss {
  background: none;
  border: none;
  padding: 4px;
  color: color-mix(in srgb, var(--default-color), transparent 65%);
  cursor: pointer;
  transition: color 0.2s ease;
  flex-shrink: 0;
  border-radius: 4px;
}

header  .cart-flyout .flyout-items .flyout-item .item-dismiss:hover {
  color: #dc3545;
  background-color: color-mix(in srgb, #dc3545, transparent 94%);
}

header  .cart-flyout .flyout-items .flyout-item .item-dismiss i {
  font-size: 14px;
}

header  .cart-flyout .flyout-bottom {
  padding: 16px 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

header  .cart-flyout .flyout-bottom .subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--default-color);
}

header  .cart-flyout .flyout-bottom .subtotal-row .subtotal-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--heading-color);
}

header  .cart-flyout .flyout-bottom .btn-proceed {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  transition: background 0.2s ease;
}

header  .cart-flyout .flyout-bottom .btn-proceed:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

header  .cart-flyout .flyout-bottom .link-viewbag {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-color);
  transition: color 0.2s ease;
}

header  .cart-flyout .flyout-bottom .link-viewbag:hover {
  color: color-mix(in srgb, var(--accent-color), black 15%);
}


header .other-flayout {
  min-width: 288px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0 10px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: var(--surface-color);
  margin-top: 8px;
  overflow: hidden;
}

header .other-flayout .flyout-header {
  padding: 20px 20px 12px;
}

header .other-flayout .flyout-header h6 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

header .other-flayout .flyout-header p {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

header .other-flayout .flyout-actions {
  padding: 0 20px 16px;
  display: flex;
  gap: 8px;
}

header .other-flayout .flyout-actions .btn-primary-action {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s ease;
}

header .other-flayout .flyout-actions .btn-primary-action:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

header .other-flayout .flyout-actions .btn-outline-action {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: transparent;
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

header .other-flayout .flyout-actions .btn-outline-action:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

header .other-flayout .flyout-links {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 8px 0;
}

header .other-flayout .flyout-links a, 
header .other-flayout .flyout-links button.currency-select, 
header .other-flayout .flyout-links button.language-select{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--default-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

header .other-flayout .flyout-links a i {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  width: 20px;
  text-align: center;
  transition: color 0.2s ease;
}

header .other-flayout .flyout-links a:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--accent-color);
}

header .other-flayout .flyout-links a:hover i {
  color: var(--accent-color);
}
header div#logo img {
    /* max-height: 30px; */
}
header div#logo {
    align-items: center;
    display: flex;
    height: 100%;
}
header .utility-links {
  display: flex;
  align-items: center;
  gap: 0;
}

header .utility-links .utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

header .utility-links .utility-link i {
  font-size: 13px;
}

header .utility-links .utility-link:hover {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 14px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:first-child a {
    padding-left: 0;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    margin-left: 20px;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* Products Mega Menu 1 - Desktop */
@media (min-width: 1200px) {
  .navmenu .products-megamenu-1 {
    position: static;
    /*  Hide Desktop Mega Menu 1 in Desktop */
    /* Bootstrap Tabs Navigation */
    /* Tab Content */
  }

  .navmenu .products-megamenu-1 .mobile-megamenu {
    display: none;
  }

  .navmenu .products-megamenu-1 .desktop-megamenu,
  .navmenu .products-megamenu-1 .active,
  .navmenu .products-megamenu-1 .active:focus {
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .products-megamenu-1 .desktop-megamenu {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    border-radius: 6px;
    z-index: 99;
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
  }

  .navmenu .products-megamenu-1:hover>.desktop-megamenu {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .products-megamenu-1 .megamenu-tabs {
    margin-bottom: 15px;
  }

  .navmenu .products-megamenu-1 .megamenu-tabs .nav-tabs {
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .products-megamenu-1 .megamenu-tabs .nav-tabs .nav-item {
    margin-bottom: 0;
  }

  .navmenu .products-megamenu-1 .megamenu-tabs .nav-tabs .nav-link {
    border: none;
    padding: 10px 20px;
    color: var(--nav-dropdown-color);
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s;
    background-color: transparent;
    border-bottom: 2px solid transparent;
  }

  .navmenu .products-megamenu-1 .megamenu-tabs .nav-tabs .nav-link:hover {
    color: var(--nav-dropdown-hover-color);
    border-color: transparent;
  }

  .navmenu .products-megamenu-1 .megamenu-tabs .nav-tabs .nav-link.active {
    color: var(--accent-color);
    background-color: transparent;
    border-bottom: 2px solid var(--accent-color);
  }

  .navmenu .products-megamenu-1 .megamenu-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    /* Hide scrollbar for Chrome, Safari and Opera */
    /* Category Grid */
    /* Product Grid */
  }

  .navmenu .products-megamenu-1 .megamenu-content::-webkit-scrollbar {
    width: 5px;
  }

  .navmenu .products-megamenu-1 .megamenu-content::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--default-color), transparent 95%);
    border-radius: 10px;
  }

  .navmenu .products-megamenu-1 .megamenu-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--default-color), transparent 80%);
    border-radius: 10px;
  }

  .navmenu .products-megamenu-1 .megamenu-content .tab-content {
    display: none;
  }

  .navmenu .products-megamenu-1 .megamenu-content .tab-content.active {
    display: block;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column {
    background-color: color-mix(in srgb, var(--surface-color), var(--accent-color) 3%);
    border-radius: 8px;
    padding: 15px;
    transition: 0.3s;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column h4 {
    color: var(--heading-color);
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    position: relative;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column h4:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul li {
    margin-bottom: 10px;
    background-color: none !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start !important;
    width: 100%;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul li:last-child {
    margin-bottom: 0;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul li a {
    color: var(--nav-dropdown-color);
    font-size: 14px;
    transition: 0.3s;
    padding: 0 0 0 20px;
    display: block;
    position: relative;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul li a:before {
    content: "\f285";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 12px;
    color: var(--accent-color);
    opacity: 0.7;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul li a:hover {
    color: var(--nav-dropdown-hover-color);
    transform: translateX(3px);
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column ul li a:hover:before {
    opacity: 1;
  }

  .navmenu .products-megamenu-1 .megamenu-content .category-grid .category-column .active {
    background-color: none;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 10px;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card {
    background-color: var(--surface-color);
    overflow: hidden;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card:hover .product-image img {
    transform: scale(1.1);
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-image {
    height: 160px;
    position: relative;
    overflow: hidden;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-image .badge-new,
  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-image .badge-sale {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    z-index: 1;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-image .badge-new {
    background-color: #28a745;
    color: white;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-image .badge-sale {
    background-color: #dc3545;
    color: white;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-info {
    padding: 15px;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-info h5 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-info .price {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-info .price .original-price {
    text-decoration: line-through;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-right: 5px;
    font-weight: normal;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-info .btn-view {
    display: inline-block;
    padding: 5px 12px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    transition: 0.3s;
  }

  .navmenu .products-megamenu-1 .megamenu-content .product-grid .product-card .product-info .btn-view:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }
}

/* Products Mega Menu 1 - Mobile */
@media (max-width: 1199px) {
  .navmenu .products-megamenu-1 {
    /* Hide Desktop Mega Menu 1 in Mobile */
  }

  .navmenu .products-megamenu-1 .desktop-megamenu {
    display: none;
  }

  .navmenu .products-megamenu-1 .mobile-megamenu {
    position: static;
    display: none;
    z-index: 99;
    padding: 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
    border-radius: 4px;
    overflow: hidden;
  }

  .navmenu .products-megamenu-1 .mobile-megamenu li {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .products-megamenu-1 .mobile-megamenu li:last-child {
    border-bottom: none;
  }

  .navmenu .products-megamenu-1 .mobile-megamenu li a {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--nav-dropdown-color);
    font-size: 15px;
    transition: 0.3s;
  }

  .navmenu .products-megamenu-1 .mobile-megamenu li a:hover {
    color: var(--nav-dropdown-hover-color);
    background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  }

  .navmenu .products-megamenu-1 .mobile-megamenu li ul {
    padding: 0;
  }

  .navmenu .products-megamenu-1 .mobile-megamenu.dropdown-active {
    display: block;
  }
}

/* Products Mega Menu 2 - Desktop */
@media (min-width: 1200px) {
  .navmenu .products-megamenu-2 {
    position: static;
    /* Hide Mobile Mega Menu in Desktop */
    /* Tabs Navigation */
    /* Tab Content */
  }

  .navmenu .products-megamenu-2 .mobile-megamenu {
    display: none;
  }

  .navmenu .products-megamenu-2 .desktop-megamenu,
  .navmenu .products-megamenu-2 .active,
  .navmenu .products-megamenu-2 .active:focus {
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .products-megamenu-2 .desktop-megamenu {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    border-radius: 6px;
    z-index: 99;
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
  }

  .navmenu .products-megamenu-2:hover>.desktop-megamenu {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .products-megamenu-2 .megamenu-tabs {
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .products-megamenu-2 .megamenu-tabs .nav-tabs {
    border-bottom: none;
    display: flex;
    justify-content: center;
  }

  .navmenu .products-megamenu-2 .megamenu-tabs .nav-tabs .nav-item {
    margin: 0;
  }

  .navmenu .products-megamenu-2 .megamenu-tabs .nav-tabs .nav-link {
    border: none;
    padding: 15px 30px;
    color: var(--nav-dropdown-color);
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    background-color: transparent;
    border-bottom: 2px solid transparent;
    letter-spacing: 0.5px;
  }

  .navmenu .products-megamenu-2 .megamenu-tabs .nav-tabs .nav-link:hover {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .products-megamenu-2 .megamenu-tabs .nav-tabs .nav-link.active {
    color: var(--accent-color);
    background-color: transparent;
    border-bottom: 2px solid var(--accent-color);
  }

  .navmenu .products-megamenu-2 .megamenu-content {
    flex: 1;
    overflow-y: auto;
    /* Hide scrollbar for Chrome, Safari and Opera */
    /* Category Layout */
    /* Categories Section */
    /* Featured Section */
  }

  .navmenu .products-megamenu-2 .megamenu-content::-webkit-scrollbar {
    width: 5px;
  }

  .navmenu .products-megamenu-2 .megamenu-content::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--default-color), transparent 95%);
    border-radius: 10px;
  }

  .navmenu .products-megamenu-2 .megamenu-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--default-color), transparent 80%);
    border-radius: 10px;
  }

  .navmenu .products-megamenu-2 .megamenu-content .tab-pane {
    padding: 25px;
  }

  .navmenu .products-megamenu-2 .megamenu-content .category-layout {
    display: flex;
    gap: 30px;
  }

  .navmenu .products-megamenu-2 .megamenu-content .categories-section {
    flex: 1;
    /* Category Headers */
    /* Category Links */
  }

  .navmenu .products-megamenu-2 .megamenu-content .categories-section .category-headers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 15px;
  }

  .navmenu .products-megamenu-2 .megamenu-content .categories-section .category-headers h4 {
    color: var(--heading-color);
    font-size: 16px;
    font-weight: 600;
    position: relative;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }
  
	.navmenu .products-megamenu-2 .megamenu-content .categories-section .category-links .link-row ul {
		column-count: 3;
		column-gap: 20px;
	}
	.navmenu .products-megamenu-2 .megamenu-content .categories-section .category-links .link-row ul li {
		break-inside: avoid;
	}

  .navmenu .products-megamenu-2 .megamenu-content .categories-section .category-links .link-row a {
    color: var(--nav-dropdown-color);
    font-size: 14px;
    transition: 0.3s;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
  }

  .navmenu .products-megamenu-2 .megamenu-content .categories-section .category-links .link-row a:hover {
    color: var(--nav-dropdown-hover-color);
    transform: translateX(3px);
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section {
    width: 300px;
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image {
    position: relative;
    height: 100%;
    background-color: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image .featured-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image .featured-content h3 {
    color: var(--heading-color);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image .featured-content .btn-shop {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
    width: fit-content;
  }

  .navmenu .products-megamenu-2 .megamenu-content .featured-section .featured-image .featured-content .btn-shop:hover {
    background-color: color-mix(in srgb, var(--accent-color), black 15%);
    transform: translateY(-2px);
  }
}

/* Products Mega Menu 2 - Mobile */
@media (max-width: 1199px) {
  .navmenu .products-megamenu-2 {
    /* Hide Desktop Mega Menu in Mobile */
  }

  .navmenu .products-megamenu-2 .desktop-megamenu {
    display: none;
  }

  .navmenu .products-megamenu-2 .mobile-megamenu {
    position: static;
    display: none;
    z-index: 99;
    padding: 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
    border-radius: 4px;
    overflow: hidden;
  }

  .navmenu .products-megamenu-2 .mobile-megamenu li {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .products-megamenu-2 .mobile-megamenu li:last-child {
    border-bottom: none;
  }

  .navmenu .products-megamenu-2 .mobile-megamenu li a {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--nav-dropdown-color);
    font-size: 15px;
    transition: 0.3s;
  }

  .navmenu .products-megamenu-2 .mobile-megamenu li a:hover {
    color: var(--nav-dropdown-hover-color);
    background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  }

  .navmenu .products-megamenu-2 .mobile-megamenu li ul {
    padding: 0;
  }

  .navmenu .products-megamenu-2 .mobile-megamenu.dropdown-active {
    display: block;
  }
}


.section-title {
    text-align: center;
    padding-bottom: 30px;
    position: relative;
}
.section-title h3 {
    font-size: 28px;
    font-weight: 700;
    padding-bottom: 20px;
    position: relative;
}
.section-title h3::after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.section-title h3:before {
    content: "";
    position: absolute;
    display: block;
    width: 160px;
    height: 1px;
    background: 
 color-mix(in srgb, var(--default-color), transparent 60%);
    left: 0;
    right: 0;
    bottom: 1px;
    margin: auto;
}

.product-thumb {
    background: var(--surface-color);
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 8px;
    /* overflow: hidden; */
	position:relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.product-thumb .product-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: 
 color-mix(in srgb, var(--default-color), transparent 96%);
}
.product-thumb .product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.product-thumb .badge-label.discount {
    background: 
 color-mix(in srgb, #dc2626, transparent 90%);
    color: #dc2626;
    border-color: 
 color-mix(in srgb, #dc2626, transparent 70%);
}
.product-thumb .badges {
	position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
	flex-direction: column;
    gap: 10px;
}
.product-thumb .badge-label {
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    background: 
 color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    border: 1px solid
 color-mix(in srgb, var(--accent-color), transparent 70%);
}
.product-thumb .action-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.product-thumb .action-overlay .action-btn:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--accent-color);
}
.product-thumb .action-overlay .action-btn {
    width: 36px;
    height: 36px;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 85%);
    background: var(--surface-color);
    color: var(--default-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}
.product-thumb:hover .action-overlay {
    opacity: 1;
}
.product-thumb .product-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-thumb .product-meta .category-tag {
    font-size: 12px;
    font-weight: 500;
    color: 
 color-mix(in srgb, var(--default-color), transparent 40%);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-thumb .product-meta .rating-group i {
    color: #f59e0b;
    font-size: 12px;
}
.product-thumb .product-meta .rating-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--default-color);
}
.product-thumb .product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.product-thumb .product-title a {
    color: var(--heading-color);
    transition: color 0.2s ease;
}
.product-thumb .product-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.product-thumb .product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid
 color-mix(in srgb, var(--default-color), transparent 90%);
}
.product-thumb .product-footer .cart-btn:hover {
    background: 
 color-mix(in srgb, var(--accent-color), transparent 15%);
    color: var(--contrast-color);
}
.product-thumb .product-footer .cart-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--accent-color);
    border:1px solid var(--accent-color);
    color: var(--contrast-color);
    font-size: 16px;
    transition: background 0.2s ease;
	outline:0
}
.product-thumb .product-footer .product-price .original {
    font-size: 13px;
    font-weight: 400;
    color: 
 color-mix(in srgb, var(--default-color), transparent 50%);
    text-decoration: line-through;
    margin-right: 6px;
}
.product-thumb .product-footer .product-price .current {
    color: var(--accent-color);
}
.product-thumb .product-footer .product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--heading-color);
}
.product-thumb:hover {
    border-color: 
 color-mix(in srgb, var(--default-color), transparent 80%);
    box-shadow: 0 4px 12px 
 color-mix(in srgb, var(--default-color), transparent 90%);
}
.product-thumb:hover .product-media img {
    transform: scale(1.03);
}
.product-thumb .product-footer .product-price span.price-tax {
    font-size: 13px;
    font-weight: 100;
    display: block;
}
.product-thumb .product-attributes {
    padding: 10px 15px;
}
.product-thumb .product-attributes .attr-heading {
    font-weight: 600;
    color: var(--heading-color);
    font-size: 13px;
}
.product-thumb .product-attributes .attr-value {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.product-thumb:hover .product-attributes {
	display:block;
}
.product-thumb .product-attributes {
	display:none;
    padding: 10px 15px;
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0px;
    width: 100%;
    background: #fff;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 8px;
	box-shadow:0 4px 12px 
 color-mix(in srgb, var(--default-color), transparent 90%)
}

/*
* FOOTER
*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
  border-top:1px solid #eee;
  margin-top: 40px;
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 60px 0;
}

.footer .footer-newsletter h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer .footer-newsletter p {
  font-size: 16px;
  margin-bottom: 30px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .footer-newsletter .newsletter-form {
  max-width: 550px;
  margin: 0 auto;
  position: relative;
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  height: 54px;
  border-radius: 4px;
  padding: 10px 25px;
  width: 100%;
  color: var(--default-color);
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.footer .footer-newsletter .newsletter-form input[type=email]::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.footer .footer-newsletter .newsletter-form button {
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transition: all 0.3s ease;
  border-radius: 4px;
  padding: 0 30px;
  font-weight: 600;
  font-size: 15px;
}

.footer .footer-newsletter .newsletter-form button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-main {
  padding: 70px 0 0px;
}

.footer .footer-main .footer-widget {
  margin-bottom: 30px;
}

.footer .footer-main .footer-widget .logo {
  display: inline-block;
  margin-bottom: 20px;
}

.footer .footer-main .footer-widget .logo span {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--heading-font);
}

.footer .footer-main .footer-widget p {
  margin-bottom: 20px;
  line-height: 1.7;
}

.footer .footer-main .footer-widget h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
}

.footer .footer-main .footer-widget h5 {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.footer .footer-main .footer-contact .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: flex-start;
}

.footer .footer-main .footer-contact .contact-item i {
  color: var(--accent-color);
  font-size: 18px;
  margin-right: 12px;
  margin-top: 3px;
}

.footer .footer-main .footer-contact .contact-item span {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.5;
}

.footer .footer-main .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-main .footer-links li {
  margin-bottom: 12px;
}

.footer .footer-main .footer-links a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
  display: inline-block;
}

.footer .footer-main .footer-links a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer .footer-main .footer-links a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--accent-color);
  transition: all 0.3s ease;
}

.footer .footer-main .footer-links a:hover:before {
  width: 100%;
}

.footer .footer-main .app-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.footer .footer-main .app-buttons .app-btn {
  display: flex;
  align-items: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.footer .footer-main .app-buttons .app-btn i {
  font-size: 20px;
  margin-right: 8px;
}

.footer .footer-main .app-buttons .app-btn span {
  font-size: 13px;
  font-weight: 500;
}

.footer .footer-main .app-buttons .app-btn:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
  color: var(--contrast-color);
}

.footer .footer-main .social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer .footer-main .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer .footer-main .social-icons a:hover {
  background-color: var(--accent-color);
  transform: rotate(360deg);
  color: var(--contrast-color);
}

.footer .footer-bottom {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 25px 0;
}

.footer .footer-bottom .payment-methods {
  display: flex;
  align-items: center;
}

.footer .footer-bottom .payment-methods span {
  margin-right: 15px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.footer .payment-methods .payment-icons {
  display: flex;
  gap: 12px;
}

.footer  .payment-methods .payment-icons i {
  font-size: 22px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: color 0.3s ease;
}

.footer  .payment-methods .payment-icons i:hover {
  color: var(--accent-color);
}

.footer .footer-bottom .copyright {
  padding-top: 10px;
}

.footer .footer-bottom .copyright p {
  margin-bottom: 0;
}

.footer .footer-bottom .copyright p strong {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.footer .footer-bottom .credits {
  text-align: center;
  padding-top: 5px;
}

.footer .footer-bottom .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px 0 15px 0;
}

.footer .footer-bottom .legal-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 13px;
  transition: color 0.3s ease;
}

.footer .footer-bottom .legal-links a:hover {
  color: var(--accent-color);
}

@media (max-width: 991.98px) {
  .footer .footer-newsletter {
    padding: 50px 0;
  }

  .footer .footer-newsletter h2 {
    font-size: 28px;
  }

  .footer .footer-main {
    padding: 60px 0 0px;
  }
}

@media (max-width: 767.98px) {
  .footer .footer-newsletter {
    padding: 40px 0;
  }

  .footer .footer-newsletter h2 {
    font-size: 24px;
  }

  .footer .footer-newsletter p {
    font-size: 15px;
  }

  .footer .footer-newsletter .newsletter-form button {
    padding: 0 20px;
    font-size: 14px;
  }

  .footer .footer-bottom .payment-methods {
    justify-content: center;
    margin-bottom: 15px;
  }

  .footer .footer-bottom .copyright {
    text-align: center;
  }

  .footer .app-buttons {
    justify-content: center;
  }

  .footer .social-icons {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*
* Category 
*/

.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 25px 0;
    position: relative;
}
.light-background {
    --background-color: #f4f7f6;
    --surface-color: #ffffff;
}
.page-title h1 {
    font-size: 24px;
    font-weight: 700;
}
.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}
.page-title .breadcrumbs ol li+li {
    padding-left: 10px;
}
.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: 
 color-mix(in srgb, var(--default-color), transparent 70%);
}
div#product-category .product-layout {
    margin-bottom: 1.25rem;
}
.swiper-viewport.without-borders {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.swiper-viewport.without-borders .swiper-button-next:before,
.swiper-viewport.without-borders .swiper-button-prev:before{
	display:none
}
.swiper-viewport .swiper-button-prev,
.swiper-viewport .swiper-button-next {
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
    width: 27px;
    height: 27px;
    line-height: 18px;
}
h3.text-refine {
    color: #5a6577;
    font-size: 1.5rem;
    font-weight: 400;
}
/**
* Category module widget
*/
.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 600;
  padding: 0 0 0 10px;
  margin: 0 0 20px 0;
  border-left: 4px solid var(--accent-color);
}

.widget-item {
  margin-bottom: 30px;
  background-color: color-mix(in srgb, var(--default-color), transparent 98%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  border-radius: 5px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Product Categories Widget Widget
--------------------------------------------------------------*/
.product-categories-widget .category-tree {
  margin-top: 1rem;
}

.product-categories-widget .category-tree .category-item {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 0.75rem 0;
}

.product-categories-widget .category-tree .category-item:last-child {
  border-bottom: none;
}

.product-categories-widget .category-tree .category-item .category-header {
  cursor: pointer;
  transition: all 0.3s;
}

.product-categories-widget .category-tree .category-item .category-header:hover .category-link {
  color: var(--accent-color);
}

.product-categories-widget .category-tree .category-item .category-header:hover .category-toggle {
  color: var(--accent-color);
}

.product-categories-widget .category-tree .category-item .category-link {
  color: var(--default-color);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}

.product-categories-widget .category-tree .category-item .category-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: color 0.3s;
}

.product-categories-widget .category-tree .category-item .category-toggle .bi-chevron-up {
  display: none;
}

.product-categories-widget .category-tree .category-item .category-header:not(.collapsed) .category-toggle .bi-chevron-down {
  display: none;
}

.product-categories-widget .category-tree .category-item .category-header:not(.collapsed) .category-toggle .bi-chevron-up {
  display: inline;
}

.product-categories-widget .category-tree .category-item .subcategory-list li {
  padding: 0.5rem 0;
}

.product-categories-widget .category-tree .category-item .subcategory-list li:first-child {
  padding-top: 0.75rem;
}

.product-categories-widget .category-tree .category-item .subcategory-list li:last-child {
  padding-bottom: 0;
}

.product-categories-widget .category-tree .category-item .subcategory-list .subcategory-link {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.product-categories-widget .category-tree .category-item .subcategory-list .subcategory-link:hover {
  color: var(--accent-color);
}

@media (max-width: 767.98px) {
  .product-categories-widget .category-tree .category-item {
    padding: 0.625rem 0;
  }

  .product-categories-widget .category-tree .category-item .subcategory-list li {
    padding: 0.4rem 0;
  }
}
.product-categories-widget li.active a, .product-categories-widget a.category-link.active {
    color: var(--accent-color) !important;
}
.form-select {
    width: 100%;
    height: 40px;
    padding: 8px 32px 8px 12px;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 75%);
    border-radius: 6px;
    background-color: var(--background-color);
    font-size: 14px;
    font-weight: 400;
    color: var(--default-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-pagination {
    padding-top: 0;
}
section, .section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 90px;
    overflow: clip;
}
.category-pagination .pagination-bar {
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 8px;
    padding: 12px 24px;
    background-color: var(--surface-color);
    box-shadow: 0 1px 2px 
 color-mix(in srgb, var(--default-color), transparent 95%);
}
.category-pagination .results-label {
    font-size: 14px;
    color: 
 color-mix(in srgb, var(--default-color), transparent 40%);
    font-weight: 400;
    line-height: 1.5;
}
.category-pagination ul.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-pagination ul.pagination .active span{color:#fff}
.category-pagination ul.pagination .active {
    background-color: var(--accent-color);
    color: #fff;
    font-weight: 600;
    border-color: var(--accent-color);
	 border-radius: 6px;
}
.category-pagination ul.pagination a, .category-pagination ul.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--default-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.category-pagination ul.pagination a:hover:not(.active) {
    background-color: 
 color-mix(in srgb, var(--default-color), transparent 95%);
    border-color: 
 color-mix(in srgb, var(--default-color), transparent 85%);
}

/*
* Product page
**/
.product-details .image-showcase .main-image-container {
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  aspect-ratio: 1;
}

.product-details .image-showcase .main-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: crosshair;
}

.product-details .image-showcase .main-image-container .discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #dc2626;
  color: var(--contrast-color);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  letter-spacing: 0.3px;
}

.product-details .image-showcase .main-image-container .image-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--default-color);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 3px color-mix(in srgb, #000, transparent 92%);
}

.product-details .image-showcase .main-image-container .image-nav-btn.prev-image {
  left: 12px;
}

.product-details .image-showcase .main-image-container .image-nav-btn.next-image {
  right: 12px;
}

.product-details .image-showcase .main-image-container .image-nav-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.product-details .image-showcase .main-image-container .image-nav-btn i {
  font-size: 14px;
}

.product-details .image-showcase .main-image-container:hover .image-nav-btn {
  opacity: 1;
}

.product-details .image-showcase .thumb-strip {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.product-details .image-showcase .thumb-strip .thumb-cell {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.product-details .image-showcase .thumb-strip .thumb-cell:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.product-details .image-showcase .thumb-strip .thumb-cell.active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.product-details .image-showcase .thumb-strip .thumb-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details .product-detail-card {
  padding: 24px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, #000, transparent 95%);
}

@media (max-width: 992px) {
  .product-details .product-detail-card {
    padding: 20px;
  }
}

.product-details .product-detail-card .detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.product-details .product-detail-card .detail-header .type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.product-details .product-detail-card .detail-header .stock-indicator {
  font-size: 12px;
  font-weight: 500;
  color: #16a34a;
}

.product-details .product-detail-card .detail-header .stock-indicator i {
  font-size: 6px;
  vertical-align: middle;
  margin-right: 4px;
}

.product-details .product-detail-card .product-heading {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

@media (min-width: 1200px) {
  .product-details .product-detail-card .product-heading {
    font-size: 1.625rem;
  }
}

.product-details .product-detail-card .review-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13px;
}

.product-details .product-detail-card .review-summary .stars-inline {
  display: flex;
  gap: 1px;
}

.product-details .product-detail-card .review-summary .stars-inline i {
  color: #f59e0b;
  font-size: 13px;
}

.product-details .product-detail-card .review-summary .score-text {
  font-weight: 600;
  color: var(--heading-color);
}

.product-details .product-detail-card .review-summary .divider-dot {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.product-details .product-detail-card .review-summary .reviews-anchor {
  color: var(--accent-color);
  font-size: 13px;
}

.product-details .product-detail-card .review-summary .reviews-anchor:hover {
  text-decoration: underline;
}

.product-details .product-detail-card .review-summary .units-left {
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.product-details .product-detail-card .pricing-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 16px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.product-details .product-detail-card .pricing-area .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-details .product-detail-card .pricing-area .price-now {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.product-details .product-detail-card .pricing-area .price-was {
  font-size: 0.95rem;
  text-decoration: line-through;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.product-details .product-detail-card .pricing-area .save-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: color-mix(in srgb, #16a34a, transparent 90%);
  color: #16a34a;
  border: 1px solid color-mix(in srgb, #16a34a, transparent 70%);
}

.product-details .product-detail-card .summary-text {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 16px;
}

.product-details .product-detail-card .separator {
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 16px;
}

.product-details .product-detail-card .variant-picker {
  margin-bottom: 20px;
}

.product-details .product-detail-card .variant-picker .picker-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.product-details .product-detail-card .variant-picker .picker-label .chosen-variant {
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.product-details .product-detail-card .variant-picker .color-dots {
  display: flex;
  gap: 8px;
}

.product-details .product-detail-card .variant-picker .color-dots .dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.product-details .product-detail-card .variant-picker .color-dots .dot i {
  color: var(--contrast-color);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-shadow: 0 1px 2px color-mix(in srgb, #000, transparent 50%);
}

.product-details .product-detail-card .variant-picker .color-dots .dot:hover {
  transform: scale(1.1);
}

.product-details .product-detail-card .variant-picker .color-dots .dot.active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.product-details .product-detail-card .variant-picker .color-dots .dot.active i {
  opacity: 1;
}

.product-details .product-detail-card .action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 576px) {
  .product-details .product-detail-card .action-row {
    flex-wrap: wrap;
  }
}

.product-details .product-detail-card .action-row .quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-color);
}

.product-details .product-detail-card .action-row .quantity-selector .quantity-btn {
  width: 36px;
  height: 40px;
  background: none;
  border: none;
  color: var(--default-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.product-details .product-detail-card .action-row .quantity-selector .quantity-btn:hover {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}

.product-details .product-detail-card .action-row .quantity-selector .quantity-input {
  width: 44px;
  height: 40px;
  text-align: center;
  border: none;
  background: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--heading-color);
}

.product-details .product-detail-card .action-row .quantity-selector .quantity-input:focus {
  outline: none;
}

.product-details .product-detail-card .action-row .primary-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s ease;
}

.product-details .product-detail-card .action-row .primary-action-btn:hover {
  background: color-mix(in srgb, var(--accent-color), #000 15%);
}

.product-details .product-detail-card .action-row .primary-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.product-details .product-detail-card .action-row .wishlist-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 6px;
  background: var(--surface-color);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  padding: 0;
  transition: all 0.2s ease;
}

.product-details .product-detail-card .action-row .wishlist-toggle:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: color-mix(in srgb, #dc2626, transparent 95%);
}

.product-details .product-detail-card .action-row .wishlist-toggle i {
  font-size: 16px;
}

.product-details .product-detail-card .checkout-now-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  color: var(--default-color);
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.product-details .product-detail-card .checkout-now-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.product-details .product-detail-card .guarantee-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  overflow: hidden;
}

.product-details .product-detail-card .guarantee-bar .guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.product-details .product-detail-card .guarantee-bar .guarantee-item:nth-child(2n) {
  border-right: none;
}

.product-details .product-detail-card .guarantee-bar .guarantee-item:nth-child(n+3) {
  border-bottom: none;
}

.product-details .product-detail-card .guarantee-bar .guarantee-item i {
  color: var(--accent-color);
  font-size: 16px;
  flex-shrink: 0;
}

.product-details .info-tabs {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, #000, transparent 95%);
  /* overflow: hidden; */
}

.product-details .info-tabs .tab-nav {
  display: flex;
  /* background: color-mix(in srgb, var(--default-color), transparent 97%); */
  background: #fafafb;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 0;
  margin: 0;
  list-style: none;
  position:sticky;
  top:0px;
  
}

.product-details .info-tabs .tab-nav .nav-link {
  padding: 14px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: -1px;
}

@media (max-width: 576px) {
  .product-details .info-tabs .tab-nav .nav-link {
    padding: 10px 14px;
    font-size: 13px;
  }
}

.product-details .info-tabs .tab-nav .nav-link:hover {
  color: var(--heading-color);
}

.product-details .info-tabs .tab-nav .nav-link.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background: var(--surface-color);
}

.product-details .info-tabs .tab-content .tab-pane {
  padding: 32px;
}

@media (max-width: 768px) {
  .product-details .info-tabs .tab-content .tab-pane {
    padding: 20px;
  }
}

.product-details .info-tabs .desc-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.product-details .info-tabs .desc-content>.row>.col-lg-8>p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 24px;
}

.product-details .info-tabs .desc-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 16px;
}

.product-details .info-tabs .desc-content .highlight-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background: var(--surface-color);
  transition: all 0.2s ease;
  height: 100%;
}

.product-details .info-tabs .desc-content .highlight-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, #000, transparent 94%);
}

.product-details .info-tabs .desc-content .highlight-card>i {
  font-size: 24px;
  color: var(--accent-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.product-details .info-tabs .desc-content .highlight-card h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.product-details .info-tabs .desc-content .highlight-card p {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin: 0;
  line-height: 1.5;
}

.product-details .info-tabs .desc-content .included-box {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

.product-details .info-tabs .desc-content .included-box h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 16px;
}

.product-details .info-tabs .desc-content .included-box h4 i {
  color: var(--accent-color);
  margin-right: 6px;
}

.product-details .info-tabs .desc-content .included-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-details .info-tabs .desc-content .included-box ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.product-details .info-tabs .desc-content .included-box ul li:last-child {
  border-bottom: none;
}

.product-details .info-tabs .desc-content .included-box ul li i {
  color: #16a34a;
  font-size: 14px;
}

.product-details .info-tabs .specs-content .spec-block h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--accent-color);
}

.product-details .info-tabs .specs-content .spec-block .data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 6px;
  overflow: hidden;
}

.product-details .info-tabs .specs-content .spec-block .data-table tr {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.product-details .info-tabs .specs-content .spec-block .data-table tr:last-child {
  border-bottom: none;
}

.product-details .info-tabs .specs-content .spec-block .data-table tr:nth-child(even) {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
}

.product-details .info-tabs .specs-content .spec-block .data-table tr td {
  padding: 8px 12px;
  font-size: 13px;
}

.product-details .info-tabs .specs-content .spec-block .data-table tr td:first-child {
  font-weight: 500;
  color: var(--heading-color);
  width: 45%;
}

.product-details .info-tabs .specs-content .spec-block .data-table tr td:last-child {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.product-details .info-tabs .feedback-content .rating-overview {
  text-align: center;
  padding: 24px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.product-details .info-tabs .feedback-content .rating-overview .big-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1;
  margin-bottom: 8px;
}

.product-details .info-tabs .feedback-content .rating-overview .star-row {
  margin-bottom: 8px;
}

.product-details .info-tabs .feedback-content .rating-overview .star-row i {
  color: #f59e0b;
  font-size: 16px;
  margin: 0 1px;
}

.product-details .info-tabs .feedback-content .rating-overview .count-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-bottom: 16px;
}

.product-details .info-tabs .feedback-content .rating-overview .review-cta {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  transition: background 0.2s ease;
}

.product-details .info-tabs .feedback-content .rating-overview .review-cta:hover {
  background: color-mix(in srgb, var(--accent-color), #000 15%);
}

.product-details .info-tabs .feedback-content .distribution-chart {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row:last-child {
  margin-bottom: 0;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row .dist-label {
  width: 36px;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: flex;
  align-items: center;
  gap: 3px;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row .dist-label i {
  font-size: 10px;
  color: #f59e0b;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row .dist-track {
  flex: 1;
  height: 8px;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 4px;
  overflow: hidden;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row .dist-track .dist-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.product-details .info-tabs .feedback-content .distribution-chart .dist-row .dist-count {
  width: 28px;
  text-align: right;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--surface-color);
  transition: all 0.2s ease;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, #000, transparent 94%);
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top .avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top .entry-meta {
  flex: 1;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top .entry-meta strong {
  display: block;
  font-size: 14px;
  color: var(--heading-color);
  margin-bottom: 2px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top .entry-meta .meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top .entry-meta .meta-line .inline-stars i {
  color: #f59e0b;
  font-size: 11px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-top .entry-meta .meta-line .entry-date {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry p {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.65;
  margin-bottom: 12px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-actions {
  display: flex;
  gap: 8px;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-actions .action-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.product-details .info-tabs .feedback-content .reviews-list .review-entry .entry-actions .action-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.product-details .info-tabs .feedback-content .reviews-list .load-wrap {
  text-align: center;
  margin-top: 20px;
}

.product-details .info-tabs .feedback-content .reviews-list .load-wrap .load-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  color: var(--default-color);
  padding: 10px 32px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
}

.product-details .info-tabs .feedback-content .reviews-list .load-wrap .load-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.product-details .drift-zoom-pane {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  box-shadow: 0 4px 12px color-mix(in srgb, #000, transparent 88%);
}

.product-details .drift-zoom-pane.drift-opening {
  animation: fadeZoomIn 180ms ease-out;
}

.product-details .drift-zoom-pane.drift-closing {
  animation: fadeZoomOut 180ms ease-in;
}

@keyframes fadeZoomIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeZoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}
.product-details .product-detail-card .detail-header .stock-indicator.outstock {
    color: #F44336;
}
.product-details .discounts span.discount-item {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
}
.product-details .discounts h4, .text-options {
    font-size: 1.25rem;
    font-weight: 400;
}
.product-details .discounts {
    margin-bottom: 16px;
    padding: 16px;
    background: 
 color-mix(in srgb, var(--default-color), transparent 97%);
    border-radius: 8px;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 90%);
}
.product-details .product-code-data {
    display: flex;
    gap: 15px;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 90%);
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
}
.product-code-data > p {
    margin: 0px;
}
.product-code-data > p:last-child:after {
	display:none
}
.product-code-data > p:after {
    content: '|';
    padding-left: 14px;
    color: #ddd;
}

#writeReview .rating-stars { display: inline-flex; flex-direction: row-reverse; }
#writeReview .rating-stars input { display: none; } /* Hide radio inputs */
#writeReview .rating-stars label { font-size: 2rem; color: #dee2e6; cursor: pointer; } /* Default gray */
#writeReview .rating-stars input:checked ~ label,
#writeReview .rating-stars label:hover,
#writeReview .rating-stars label:hover ~ label { color: #f59e0b; } /* Warning yellow */
.required label.control-label:before {
    content: '*';
    color: red;
    padding-right: 2px;
}
.product-details .product-detail-card {
    position: sticky;
    top: -250px;
    bottom: 0px;
}

.form-section .section-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}
.form-section .section-label .label-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: 
 color-mix(in srgb, var(--accent-color), transparent 92%);
    color: var(--accent-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.form-section .section-label h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
    letter-spacing: -0.01em;
}
.form-section .section-label p {
    margin: 2px 0 0;
    font-size: 14px;
    color: 
 color-mix(in srgb, var(--default-color), transparent 40%);
}
.form-section .section-fields .field-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--heading-color);
    margin-bottom: 6px;
}
.form-section .section-fields .field-group .form-control{
    height: 40px;
    padding: 8px 12px;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 75%);
    border-radius: 6px;
    font-size: 14px;
    color: var(--default-color);
    background-color: var(--surface-color);
    transition: all 0.2s ease;
}
.alert-cart.show-alert {
	top:25px;
	transition:all .4s ease
}
.alert-cart {
    position: fixed;
    top: -100px;
    max-width: 450px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    border-radius: 20px;
    box-shadow: 0px 10px 30px #00000026;
    padding: 15px 30px;
	transition:all .4s ease;
	display:flex;
	gap:15px;
	align-items: center;
}
.alert.alert-success.alert-cart a {
	color:#fff
}
.alert.alert-success.alert-cart {
    background: #8BC34A;
    border-color: #8BC34A;
    color: #fff;
}
.search-field input {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 36px;
    border: 1px solid
 color-mix(in srgb, var(--default-color), transparent 75%);
    border-radius: 6px;
    background-color: var(--background-color);
    font-size: 14px;
    color: var(--default-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-field i {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: 
 color-mix(in srgb, var(--default-color), transparent 50%);
}
.search-field {
    position: relative;
    display: flex;
    align-items: center;
}
.btn-link,.btn-link:hover,.btn-link:active,.btn-link:visited{
	color:var(--heading-color);
	text-decoration: none;
}

.contact-page .info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-page .info-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact-page .info-card .info-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-page .info-card .info-card-icon i {
  font-size: 20px;
  color: var(--accent-color);
}

.contact-page .info-card .info-card-body h5 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.contact-page .info-card .info-card-body p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 2px;
  line-height: 1.6;
}

.contact-page .info-card .info-card-body p:last-child {
  margin-bottom: 0;
}

.contact-page .form-card {
  padding: 32px;
  border-radius: 8px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
}

.contact-page .form-card .form-card-header {
  margin-bottom: 24px;
}

.contact-page .form-card .form-card-header h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.contact-page .form-card .form-card-header p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  line-height: 1.6;
  margin-bottom: 0;
}

.contact-page .form-card .form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.contact-page .form-card .form-control {
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
  color: var(--default-color);
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-page .form-card .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.contact-page .form-card .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact-page .form-card textarea.form-control {
  height: auto;
  min-height: 120px;
  resize: none;
}

.contact-page .form-card .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.contact-page .form-card .btn-submit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.contact-page .form-card .btn-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact-page .form-card .btn-submit:active {
  transform: scale(0.98);
}

.contact-page .map-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  height: 280px;
  margin-bottom: 16px;
}

.contact-page .map-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-page .connect-card {
  padding: 24px;
  border-radius: 8px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
}

.contact-page .connect-card h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.contact-page .connect-card p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  line-height: 1.6;
  margin-bottom: 16px;
}

.contact-page .connect-card .social-row {
  display: flex;
  gap: 8px;
}

.contact-page .connect-card .social-row a {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  transition: all 0.2s ease;
}

.contact-page .connect-card .social-row a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.contact-page .connect-card .social-row a:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

@media (max-width: 992px) {
  .contact-page .form-card {
    padding: 24px;
  }

  .contact-page .map-card {
    height: 240px;
  }
}

@media (max-width: 768px) {
  .contact-page .form-card {
    padding: 24px 20px;
  }

  .contact-page .form-card .form-card-header h3 {
    font-size: 18px;
  }

  .contact-page .map-card {
    height: 200px;
  }
}

@media (max-width: 576px) {
  .contact-page .info-card {
    padding: 20px;
  }

  .contact-page .form-card {
    padding: 20px 16px;
  }

  .contact-page .form-card .btn-submit {
    width: 100%;
  }

  .contact-page .connect-card {
    padding: 20px;
  }

  .contact-page .map-card {
    height: 180px;
  }
}

/* my account page */

.account .sidebar-panel {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  position: sticky;
  top: 100px;
}

.account .sidebar-panel .profile-block {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.account .sidebar-panel .profile-block .profile-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.account .sidebar-panel .profile-block .profile-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.account .sidebar-panel .profile-block .profile-stats .stat-block {
  text-align: center;
}

.account .sidebar-panel .profile-block .profile-stats .stat-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--accent-color);
  line-height: 1.2;
}

.account .sidebar-panel .profile-block .profile-stats .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  font-weight: 500;
}

.account .sidebar-panel .sidebar-nav {
  padding: 8px;
}

.account .sidebar-panel .sidebar-nav .nav-item {
  margin-bottom: 2px;
}

.account .sidebar-panel .sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  transition: all 0.2s ease;
}

.account .sidebar-panel .sidebar-nav .nav-link i {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.account .sidebar-panel .sidebar-nav .nav-link:hover {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--default-color);
}

.account .sidebar-panel .sidebar-nav .nav-link.active {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  font-weight: 600;
}

.account .sidebar-panel .sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account .sidebar-panel .sidebar-footer .sidebar-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: color 0.2s ease;
}

.account .sidebar-panel .sidebar-footer .sidebar-action:hover {
  color: var(--accent-color);
}

.account .sidebar-panel .sidebar-footer .sidebar-action.logout {
  color: #ef4444;
}

.account .sidebar-panel .sidebar-footer .sidebar-action.logout:hover {
  color: #dc2626;
}

.account .content-area .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.account .content-area .content-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.account .content-area .content-header .header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.account .content-area .content-header .header-actions .search-field {
  position: relative;
}

.account .content-area .content-header .header-actions .search-field i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--default-color), transparent 55%);
  font-size: 14px;
}

.account .content-area .content-header .header-actions .search-field input {
  width: 200px;
  height: 40px;
  padding: 8px 12px 8px 36px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 6px;
  font-size: 14px;
  color: var(--default-color);
  background: var(--surface-color);
  transition: all 0.2s ease;
}

.account .content-area .content-header .header-actions .search-field input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.account .content-area .content-header .header-actions .search-field input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.account .btn-primary {
  height: 40px;
  padding: 0 24px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.account .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.account .btn-primary:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.account .btn-primary.btn-sm {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

.account .btn-secondary {
  height: 40px;
  padding: 0 24px;
  background: transparent;
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.account .btn-secondary:hover {
  background: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.account .btn-secondary.btn-sm {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

.account .btn-ghost {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.account .btn-ghost:hover {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--default-color);
}

.account .btn-success {
  height: 40px;
  padding: 0 24px;
  background: color-mix(in srgb, #16a34a, transparent 92%);
  color: #16a34a;
  border: 1px solid color-mix(in srgb, #16a34a, transparent 75%);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.account .btn-success:hover {
  background: color-mix(in srgb, #16a34a, transparent 85%);
}

.account .btn-danger {
  height: 40px;
  padding: 0 24px;
  background: color-mix(in srgb, #dc2626, transparent 92%);
  color: #dc2626;
  border: 1px solid color-mix(in srgb, #dc2626, transparent 75%);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.account .btn-danger:hover {
  background: color-mix(in srgb, #dc2626, transparent 85%);
}

.account .btn-remove {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #dc2626, transparent 75%);
  background: color-mix(in srgb, #dc2626, transparent 95%);
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.account .btn-remove:hover {
  background: #dc2626;
  color: #fff;
}

.account .filter-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 6px;
  background: var(--surface-color);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--default-color);
  transition: all 0.2s ease;
}

.account .filter-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.account .action-link {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  transition: all 0.2s ease;
}

.account .action-link:hover {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--accent-color);
}

.account .action-link.danger {
  color: #dc2626;
}

.account .action-link.danger:hover {
  background: color-mix(in srgb, #dc2626, transparent 94%);
}

.account .action-link.accent {
  color: var(--accent-color);
}

.account .action-link.accent:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.account .orders-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.account .orders-grid .order-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.2s ease;
}

.account .orders-grid .order-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 92%);
}

.account .orders-grid .order-card .order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.account .orders-grid .order-card .order-card-top .order-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account .orders-grid .order-card .order-card-top .order-id {
  font-weight: 600;
  font-family: var(--heading-font);
  font-size: 14px;
  letter-spacing: -0.01em;
}

.account .orders-grid .order-card .order-card-top .order-date {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.account .orders-grid .order-card .order-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.account .orders-grid .order-card .order-card-body .order-images {
  display: flex;
  gap: 6px;
}

.account .orders-grid .order-card .order-card-body .order-images img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.account .orders-grid .order-card .order-card-body .order-images .more-items {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.account .orders-grid .order-card .order-card-body .order-summary {
  text-align: right;
}

.account .orders-grid .order-card .order-card-body .order-summary .item-count {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.account .orders-grid .order-card .order-card-body .order-summary .order-amount {
  display: block;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--heading-font);
  letter-spacing: -0.01em;
}

.account .orders-grid .order-card .order-card-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
}

.account .orders-grid .order-card .status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
}

.account .orders-grid .order-card .status-tag.default {
  background: color-mix(in srgb, #0ea5e9, transparent 90%);
  color: #0ea5e9;
  border: 1px solid color-mix(in srgb, #0ea5e9, transparent 70%);
}

.account .orders-grid .order-card .status-tag.success {
  background: color-mix(in srgb, #16a34a, transparent 90%);
  color: #16a34a;
  border: 1px solid color-mix(in srgb, #16a34a, transparent 70%);
}

.account .orders-grid .order-card .status-tag.cancelled {
  background: color-mix(in srgb, #dc2626, transparent 90%);
  color: #dc2626;
  border: 1px solid color-mix(in srgb, #dc2626, transparent 70%);
}

.account .tracker-panel,
.account .details-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.account .step-tracker {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 8px;
}

.account .step-tracker::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: color-mix(in srgb, var(--default-color), transparent 88%);
}

.account .step-tracker .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

.account .step-tracker .step .step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 82%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.account .step-tracker .step .step-icon i {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.account .step-tracker .step .step-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.account .step-tracker .step .step-time {
  font-size: 11px;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
  text-align: center;
}

.account .step-tracker .step.done .step-icon {
  background: #16a34a;
  border-color: #16a34a;
}

.account .step-tracker .step.done .step-icon i {
  color: #fff;
}

.account .step-tracker .step.current .step-icon {
  background: #f97316;
  border-color: #f97316;
}

.account .step-tracker .step.current .step-icon i {
  color: #fff;
}

.account .step-tracker .step.current .step-name {
  color: #f97316;
  font-weight: 600;
}

.account .tracking-id {
  margin-top: 16px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 6px;
  font-size: 13px;
}

.account .tracking-id .tracking-code {
  font-family: var(--heading-font);
  font-weight: 600;
}

.account .details-panel .info-group {
  margin-bottom: 20px;
}

.account .details-panel .info-group:last-child {
  margin-bottom: 0;
}

.account .details-panel .info-group h5 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.account .details-panel .info-group p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.account .details-panel .info-group p.text-muted-custom {
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-top: 4px;
}

.account .details-panel .info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  font-size: 14px;
}

.account .details-panel .info-row .info-label {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.account .details-panel .info-row .info-value {
  font-weight: 500;
}

.account .details-panel .line-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  border-radius: 6px;
  margin-bottom: 6px;
}

.account .details-panel .line-item:last-child {
  margin-bottom: 0;
}

.account .details-panel .line-item img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
}

.account .details-panel .line-item .line-item-detail {
  flex: 1;
  min-width: 0;
}

.account .details-panel .line-item .line-item-detail h6 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
}

.account .details-panel .line-item .line-item-detail span {
  font-size: 11px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.account .details-panel .line-item .line-item-price {
  font-weight: 600;
  font-size: 13px;
  font-family: var(--heading-font);
  flex-shrink: 0;
}

.account .details-panel .total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.account .details-panel .total-row.final {
  border-top: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 700;
  color: var(--accent-color);
}

.account .pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.account .pagination-bar button {
  min-width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background: var(--surface-color);
  font-size: 14px;
  font-weight: 500;
  color: var(--default-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.account .pagination-bar button:hover:not(:disabled) {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.account .pagination-bar button.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.account .pagination-bar button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.account .pagination-bar .pg-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
}

.account .pagination-bar .pg-numbers span {
  color: color-mix(in srgb, var(--default-color), transparent 55%);
  padding: 0 4px;
}

.account .pagination-bar .pg-btn {
  border: none;
  background: transparent;
}

.account .wishlist-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  overflow: hidden;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.account .wishlist-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 92%);
}

.account .wishlist-card.unavailable {
  opacity: 0.65;
}

.account .wishlist-card .wishlist-img {
  position: relative;
}

.account .wishlist-card .wishlist-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.account .wishlist-card .wishlist-img .sale-badge,
.account .wishlist-card .wishlist-img .soldout-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.account .wishlist-card .wishlist-img .sale-badge {
  background: #dc2626;
  color: #fff;
}

.account .wishlist-card .wishlist-img .soldout-badge {
  background: #6b7280;
  color: #fff;
}

.account .wishlist-card .wishlist-info {
  padding: 16px;
  flex: 1;
}

.account .wishlist-card .wishlist-info .wishlist-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.account .wishlist-card .wishlist-info .price-group {
  margin-top: 8px;
}

.account .wishlist-card .wishlist-info .price-group .current-price {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.account .wishlist-card .wishlist-info .price-group .old-price {
  font-size: 13px;
  text-decoration: line-through;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-left: 6px;
}

.account .wishlist-card .wishlist-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.account .rating-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.account .rating-row i {
  color: #f59e0b;
  font-size: 13px;
}

.account .rating-row span {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-left: 4px;
}

.account .payment-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.2s ease;
  height: 100%;
}

.account .payment-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 92%);
}

.account .payment-card.is-primary {
  border-color: var(--accent-color);
}

.account .payment-card .payment-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.account .payment-card .payment-card-header>i {
  font-size: 28px;
  color: var(--accent-color);
}

.account .payment-card .payment-card-header .card-badges {
  display: flex;
  gap: 6px;
}

.account .payment-card .payment-card-header .card-badges span {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.account .payment-card .payment-card-header .card-badges .badge-primary {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
}

.account .payment-card .payment-card-header .card-badges .badge-neutral {
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.account .payment-card .payment-card-number {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.account .payment-card .payment-card-expiry {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-bottom: 16px;
}

.account .payment-card .payment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.account .reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account .reviews-list .review-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  display: flex;
  gap: 16px;
  transition: all 0.2s ease;
}

.account .reviews-list .review-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 92%);
}

.account .reviews-list .review-card .review-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.account .reviews-list .review-card .review-card-right {
  flex: 1;
  min-width: 0;
}

.account .reviews-list .review-card .review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.account .reviews-list .review-card .review-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.account .reviews-list .review-card .review-header .review-date {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  flex-shrink: 0;
  margin-left: 12px;
}

.account .reviews-list .review-card .review-text {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.account .reviews-list .review-card .review-actions {
  display: flex;
  gap: 4px;
}

.account .address-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.2s ease;
  height: 100%;
}

.account .address-card:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color), transparent 92%);
}

.account .address-card.is-primary {
  border-color: var(--accent-color);
}

.account .address-card .address-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.account .address-card .address-card-header .address-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.account .address-card .address-card-header .address-icon i {
  font-size: 18px;
  color: var(--accent-color);
}

.account .address-card .address-card-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.account .address-card .address-card-header .primary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account .address-card .address-card-body {
  margin-bottom: 16px;
}

.account .address-card .address-card-body p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.account .address-card .address-card-body .contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account .address-card .address-card-body .contact-info span {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.account .address-card .address-card-body .contact-info span i {
  font-size: 14px;
}

.account .address-card .address-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.account .settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account .settings-list .settings-section {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 95%);
}

.account .settings-list .settings-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

.account .settings-list .settings-section h3 i {
  font-size: 18px;
  color: var(--accent-color);
}

.account .settings-list .settings-section.danger-zone {
  border-color: color-mix(in srgb, #dc2626, transparent 75%);
}

.account .settings-list .settings-section.danger-zone h3 {
  color: #dc2626;
}

.account .settings-list .settings-section.danger-zone h3 i {
  color: #dc2626;
}

.account .settings-list .settings-section.danger-zone .danger-content p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.account .settings-list .settings-form .form-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.account .settings-list .settings-form .form-control {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 6px;
  font-size: 14px;
  color: var(--default-color);
  background: var(--surface-color);
  transition: all 0.2s ease;
}

.account .settings-list .settings-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.account .settings-list .settings-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.account .settings-list .settings-form .form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.account .settings-list .switch-list .switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.account .settings-list .switch-list .switch-row:first-child {
  padding-top: 0;
}

.account .settings-list .switch-list .switch-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.account .settings-list .switch-list .switch-row .switch-info {
  margin-right: 16px;
}

.account .settings-list .switch-list .switch-row .switch-info h4 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 500;
}

.account .settings-list .switch-list .switch-row .switch-info p {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.account .settings-list .switch-list .switch-row .form-check {
  margin: 0;
  min-height: auto;
}

.account .settings-list .switch-list .switch-row .form-check .form-check-input {
  width: 2.75rem;
  height: 1.375rem;
  margin: 0;
}

.account .settings-list .switch-list .switch-row .form-check .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.account .settings-list .switch-list .switch-row .form-check .form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

@media (max-width: 992px) {
  .account .sidebar-panel {
    position: static;
    margin-bottom: 24px;
  }

  .account .sidebar-panel .profile-block {
    padding: 20px;
  }

  .account .sidebar-panel .sidebar-nav .nav {
    flex-direction: row !important;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 8px;
    gap: 4px;
  }

  .account .sidebar-panel .sidebar-nav .nav::-webkit-scrollbar {
    display: none;
  }

  .account .sidebar-panel .sidebar-nav .nav .nav-link {
    white-space: nowrap;
    padding: 8px 14px;
  }

  .account .sidebar-panel .sidebar-nav .nav .nav-link span {
    display: inline;
  }

  .account .sidebar-panel .sidebar-footer {
    flex-direction: row;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .account .content-area .content-header .header-actions {
    width: 100%;
  }

  .account .content-area .content-header .header-actions .search-field {
    flex: 1;
  }

  .account .content-area .content-header .header-actions .search-field input {
    width: 100%;
  }

  .account .sidebar-panel .sidebar-nav .nav-link {
    padding: 8px 10px;
    font-size: 13px;
  }

  .account .sidebar-panel .sidebar-nav .nav-link span {
    display: none;
  }

  .account .sidebar-panel .sidebar-nav .nav-link i {
    font-size: 18px;
  }

  .account .step-tracker .step .step-name {
    font-size: 10px;
  }

  .account .step-tracker .step .step-time {
    display: none;
  }

  .account .step-tracker .step .step-icon {
    width: 28px;
    height: 28px;
  }

  .account .step-tracker .step .step-icon i {
    font-size: 12px;
  }

  .account .review-card {
    flex-direction: column;
  }

  .account .review-card .review-header {
    flex-direction: column;
    gap: 4px;
  }

  .account .review-card .review-header .review-date {
    margin-left: 0;
  }
}
button.close {
    background: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    color: #444;
}
.live-search{position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #ddd;z-index:2;display:none}
@media (min-width:768px) and (max-width:992px) {
.mobile-header .mob_cur_here > div{display:inline-block}
}
@media (max-width:992px) {
.live-search{max-height:350px;overflow-y:auto}
}
.live-search > ul{padding:0;list-style:none}
.live-search > ul > li a{color:var(--heading-color)}
.live-search > ul > li{border-bottom:1px solid #dddddd61}
.live-search > ul > li .product-name{padding:10px;margin-left:15px;display:inline-block;max-width:calc(100% - 77px)}
.live-search > ul > li .product-image{display:inline-block;float:left;margin-left:10px}
.live-search a.view-all-results{text-align:center;display:block;font-size:.7rem;font-weight:600;color:var(--heading-color)}
.live-search .live-cats,.live-search .live-news{padding:10px;border-top:1px solid #ddd}
.live-search .live-news h4,.live-search .live-cats h4{font-size:.75rem;font-weight:600;color:#444}
.live-search .live-news .res,.live-search .live-cats .res{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;width:100%}
.live-search .live-news .res a.item i.bi,.live-search .live-cats .res a.item i.bi{padding-left:5px}
.live-search .live-news .res a.item,.live-search .live-cats .res a.item{display:flex;width:100%;padding:0;margin:5px 0;font-size:.95rem;align-items:center}
.live-search .live-news .res img{max-width:36px;border-radius:5px;margin-right:8px}
.bootstrap-datetimepicker-widget li.collapse.in {
    display: block;
}
body .swiper-button-prev:before{
	content: "\f12f";
	font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 1.75rem;
}
body .swiper-button-next:before{
	content: "\f138";
	font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 1.75rem;
}
body .swiper-viewport .swiper-button-prev, body .swiper-viewport .swiper-button-next{
	border:none;
	background:transparent
}
.swiper-pagination-bullet-active {
    width: 15px;
    transition: all .4s ease;
}
@media (min-width: 768px) {
    body .swiper-viewport:hover .swiper-button-next {
        opacity: 0.7;
        right: 15px;
    }
}
header .other-flayout a.add-phone {
    display: table;
}
.product-layout.product-list .product-thumb {
    display: flex;
    align-items: self-start;
    flex-direction: row;
}
.product-layout.product-list .product-thumb .product-media {
    width: 30%;
}
.product-layout.product-list .product-thumb h4.product-title {
    font-size: 18px;
}
@media (max-width:568px){
.product-layout.product-list .product-thumb .product-media {
    width: 23%;
}
}
@media (max-width:768px){
header .main-header .row {
    gap: 15px;
}
header div#logo {
    justify-content: center;
    margin-top: 20px;
}
.nav-top {
    display: none;
}
body .menu-trigger-outer{display:inline-flex}
header .main-header .col-sm-3.justify-content-end {
    justify-content: space-between !important;
}
.mobilemenu .mobile-logo {
    max-width: 60%;
    padding: 20px;
    display: block;
    margin: auto;
}
.mobilemenu .js-mobilemenu--li-with-child i.bi {
    display: none;
}
.mobilemenu .js-mobilemenu--li-with-child .desktop-megamenu {
    display: none;
}
.mobilemenu .mobile-menu-bottom .top-links {
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #ddd;
}
.mobilemenu .mobile-menu-bottom .top-links a {
    display: block;
    padding: 10px 0px;
}
.mobilemenu .mobile-menu-bottom .menu-social {
    padding: 10px 10px 10px 20px;
}
.mobilemenu .mobile-menu-bottom .menu-social .social-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.mobilemenu .mobile-menu-bottom .menu-social .social-icons a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--default-color), transparent 90%);
    color: var(--default-color);
    font-size: 16px;
    transition: all 0.3s ease;
}

.mobilemenu .mobile-menu-top .currency-language .action-btn{
	position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--default-color);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    transition: all 0.2s ease;
}
.currency-language {
    padding: 0px 10px;
	display: flex;
        gap: 10px;
}


}
.img-responsive{
	width:100%;
	max-width:100%;
}
.menu-trigger-outer{display:none}
.top-message {
    display: flex;
    padding: 5px 10px;
    background: #f0f0f5;
    border-bottom: 1px solid #ddd;
    gap: 15px;
    align-items: center;
    justify-content: center;
}
.swiper-viewport.border-none{
	box-shadow:none;
	border:0
}

/*--------------------------------------------------------------
# Cart Section
--------------------------------------------------------------*/
.cart .cart-table {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--surface-color);
}

.cart .table-head {
  padding: 12px 24px;
  padding-right: 56px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
}

.cart .cart-item {
  position: relative;
  padding: 20px 24px;
  padding-right: 56px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: background-color 0.2s ease;
}

.cart .cart-item:last-child {
  border-bottom: none;
}

.cart .cart-item:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 98%);
}

.cart .cart-item .remove-btn {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart .cart-item .remove-btn:hover {
  background-color: color-mix(in srgb, #dc3545, transparent 90%);
  color: #dc3545;
}

.cart .cart-item .remove-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.cart .cart-item .product-img {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.cart .cart-item .product-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cart .cart-item .product-meta .product-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
  line-height: 1.3;
}

.cart .cart-item .product-meta .product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.cart .cart-item .product-meta .product-tags .tag-item {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.cart .cart-item .product-meta .discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background-color: color-mix(in srgb, #28a745, transparent 90%);
  color: #28a745;
  border: 1px solid color-mix(in srgb, #28a745, transparent 70%);
}

.cart .cart-item .price-col .current-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  display: block;
}

.cart .cart-item .price-col .original-price {
  font-size: 12px;
  text-decoration: line-through;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
  display: block;
}

.cart .cart-item .quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-radius: 6px;
  overflow: hidden;
}

.cart .cart-item .quantity-selector .quantity-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--default-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart .cart-item .quantity-selector .quantity-btn:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.cart .cart-item .quantity-selector .quantity-btn:focus {
  outline: none;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.cart .cart-item .quantity-selector .quantity-input {
  width: 36px;
  height: 32px;
  text-align: center;
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
}

.cart .cart-item .quantity-selector .quantity-input:focus {
  outline: none;
}

.cart .cart-item .quantity-selector .quantity-input::-webkit-inner-spin-button,
.cart .cart-item .quantity-selector .quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart .cart-item .row-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .cart .cart-item {
    padding-right: 48px;
  }

  .cart .cart-item .remove-btn {
    top: 16px;
    right: 8px;
    transform: none;
  }

  .cart .cart-item .price-col .current-price,
  .cart .cart-item .price-col .row-total,
  .cart .cart-item .total-col .current-price,
  .cart .cart-item .total-col .row-total {
    font-size: 13px;
  }
}

.cart .cart-actions {
  margin-top: 16px;
  padding: 8px 0;
}

.cart .cart-actions .action-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cart .cart-actions .action-link i {
  transition: transform 0.2s ease;
}

.cart .cart-actions .action-link:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.cart .cart-actions .action-link:hover i {
  transform: translateX(-3px);
}

.cart .cart-actions .action-clear {
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: 1px solid color-mix(in srgb, #dc3545, transparent 50%);
  color: #dc3545;
  padding: 6px 16px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart .cart-actions .action-clear:hover {
  background-color: #dc3545;
  color: var(--contrast-color);
  border-color: #dc3545;
}

.cart .cart-actions .action-clear:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc3545, transparent 80%);
}

.cart .summary-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 6.5rem;
}

.cart .summary-card .summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.cart .summary-card .summary-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--heading-color);
}

.cart .summary-card .summary-header .items-count {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.cart .summary-card .summary-body {
  padding: 24px;
}

.cart .summary-card .coupon-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.cart .summary-card .coupon-section .coupon-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.cart .summary-card .coupon-section .input-group .form-control {
  height: 40px;
  border-radius: 6px 0 0 6px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  font-size: 14px;
  padding: 8px 12px;
  color: var(--default-color);
  background-color: var(--surface-color);
}

.cart .summary-card .coupon-section .input-group .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.cart .summary-card .coupon-section .input-group .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.cart .summary-card .coupon-section .input-group .coupon-btn {
  border-radius: 0 6px 6px 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  transition: background 0.2s ease;
}

.cart .summary-card .coupon-section .input-group .coupon-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
}

.cart .summary-card .coupon-section .input-group .coupon-btn:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.cart .summary-card .summary-lines {
  margin-bottom: 16px;
}

.cart .summary-card .summary-lines .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.cart .summary-card .summary-lines .summary-row .label-text {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.cart .summary-card .summary-lines .summary-row .value-text {
  font-weight: 600;
  color: var(--heading-color);
}

.cart .summary-card .summary-lines .summary-row.discount-row .value-text {
  color: #28a745;
}

.cart .summary-card .summary-lines .shipping-options {
  padding: 8px 0 8px 4px;
}

.cart .summary-card .summary-lines .shipping-options .form-check {
  margin-bottom: 6px;
}

.cart .summary-card .summary-lines .shipping-options .form-check .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.cart .summary-card .summary-lines .shipping-options .form-check .form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.cart .summary-card .summary-lines .shipping-options .form-check .form-check-label {
  font-size: 13px;
  color: var(--default-color);
}

.cart .summary-card .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-bottom: 16px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.cart .summary-card .summary-total span:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
}

.cart .summary-card .summary-total .total-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.cart .summary-card .proceed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease;
  margin-bottom: 20px;
}

.cart .summary-card .proceed-btn i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.cart .summary-card .proceed-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  color: var(--contrast-color);
}

.cart .summary-card .proceed-btn:hover i {
  transform: translateX(3px);
}

.cart .summary-card .proceed-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.cart .summary-card .payment-info {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.cart .summary-card .payment-info .payment-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 8px;
  display: block;
}

.cart .summary-card .payment-info .payment-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.cart .summary-card .payment-info .payment-icons i {
  font-size: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
  transition: color 0.2s ease;
}

.cart .summary-card .payment-info .payment-icons i:hover {
  color: var(--accent-color);
}

@media (max-width: 992px) {
  .cart .summary-card {
    position: static;
  }
} 
.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
    border: 1px solid #eee;
    text-align: center;
    padding: 10px 15px;
    margin-bottom: 15px;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.product-thumb .product-footer.without-desc {
    margin-top: 0px;
    padding-top: 6px;
}
.row > .product-layout {
    margin-bottom: 1.2rem;
}

.float-left{float:left}
.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail-inner {
    width: 100%;
    height: 100%;
    min-height: 70px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #111;
    color: #fff;

    border-radius: 4px;
}

.video-thumbnail-inner i {
    font-size: 28px;
    line-height: 1;
}

.video-thumbnail-inner span {
    margin-top: 5px;
    font-size: 11px;
    text-transform: uppercase;
}

.main-product-video {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000;
}

.main-product-video video {
    display: block;

    width: 100%;
    height: 100%;

    max-height: 600px;

    object-fit: contain;
}

.video-zoom-btn {
    position: absolute;

    right: 15px;
    bottom: 15px;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 4px;

    background: rgba(0, 0, 0, .65);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;
}

.video-zoom-btn:hover {
    background: rgba(0, 0, 0, .85);
}