:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #03c4a1;
  --secondary: #edf1ff;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #ffffff;
  --dark: #1c1c1c;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* ============ HEADER THEME VARIABLES ============ */
  --header-primary: #48c479;
  /* Primary green for buttons/hover */
  --header-primary-hover: #3db36a;
  /* Darker green for hover states */
  --header-background: #ffffff;
  /* Header background color */
  --header-text-dark: #333333;
  /* Dark text color */
  --header-text-muted: #999999;
  /* Muted/placeholder text */
  --header-border-light: #e0e0e0;
  /* Light border color */
  --header-border-subtle: #f0f0f0;
  /* Very subtle border */
  --header-shadow: rgba(0, 0, 0, 0.08);
  /* Box shadow color */
  --header-shadow-hover: rgba(72, 196, 121, 0.3);
  /* Green shadow for hover */
  --header-badge-bg: #ff4444;
  /* Badge background (cart/wishlist count) */
  --header-icon-size: 20px;
  /* Default icon size */
  --header-search-max-width: 450px;
  /* Search bar max width */
  --header-transition-speed: 0.3s;
  /* Animation speed */
}

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

html {
  font-family: var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
  /* Prevents horizontal scrolling */
  width: 100%;
  /* Ensures the width doesn't exceed 100% */
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

#space {
  margin-top: 30%;
}

body {
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  font-size: 0.8rem;
  color: #6f6f6f;
  text-align: left;
  background-color: #fff;
  overflow-x: hidden;
  width: 100%;
}

/* site-ticker: continuously scrolling info/specs strip ─────────────── */
.site-ticker {
  width: 100%;
  overflow: hidden;
  background: var(--trust-bar-bg, #ff8c00);
  padding: 8px 0;
  white-space: nowrap;
  position: relative;
}

.site-ticker-track {
  display: inline-flex;
  width: max-content;
  animation: site-ticker-scroll 25s linear infinite;
}

.site-ticker:hover .site-ticker-track {
  animation-play-state: paused;
}

.site-ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 1.5rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.site-ticker-item::after {
  content: '\2022';
  margin-left: 1.5rem;
  opacity: 0.6;
}

@keyframes site-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .site-ticker-item {
    font-size: 12px;
    padding: 0 1rem;
  }
  .site-ticker-item::after {
    margin-left: 1rem;
  }
}

/* announcement-bar section  */

.announcement-bar {
  background: linear-gradient(135deg, #2e69e9 0%, #4cbfe2 100%);
  color: #ffffff !important;
  text-align: center;
  position: relative;
  top: 0;
  width: 100%;
  /* z-index: 9999; */
  font-size: 14px;
  box-sizing: border-box;
  padding: 2px 20px;
  overflow: hidden;
  animation: slideInFromBottom 0.5s ease-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Modal Open State: Fix Layout Shift and Dimming */
body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

body.modal-open .announcement-bar,
body.modal-open .cashify-header,
body.modal-open .sticky-header,
body.modal-open .category-navbar,
body.modal-open .bottom-icons {
  z-index: 1030 !important;
  /* Below backdrop (1040) */
}

/* Category menu styles moved to dedicated section */

.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1050 !important;
}


/* Animated shine effect */
.announcement-bar::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 70%);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.announcement-bar p {
  color: #ffffff !important;
  margin: 0;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  font-size: 1.1em;
  display: none !important;
}

.announcement-bar p.active {
  display: block !important;
}

/* Shimmering text animation */
@keyframes shimmerText {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.announcement-item {
  font-size: 14px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  letter-spacing: 0.8px;
  display: none;
  animation: fadeInUp 0.5s ease;
}

.announcement-item.active {
  display: block !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulsing border effect */
.announcement-bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ebebe9, #f4f4f2, #c6bc83);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scaleX(1);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.02);
  }
}

/* Mobile Screens */
@media (max-width: 480px) {
  .announcement-bar {
    font-size: 12px;
    padding: 2px 15px;
  }

  .announcement-item {
    font-size: 12px;
  }

  .announcement-bar p {
    font-size: 1em;
  }
}

/* Tablet Screens */
@media (min-width: 481px) and (max-width: 768px) {
  .announcement-bar {
    font-size: 14px;
    padding: 2px 18px;
  }

  .announcement-item {
    font-size: 14px;
  }
}

/* Laptop Screens */
@media (min-width: 769px) and (max-width: 1024px) {
  .announcement-bar {
    font-size: 16px;
    padding: 2px 5px;
  }

  .announcement-item {
    font-size: 16px;
  }
}

/* Desktop Screens */
@media (min-width: 1025px) {
  .announcement-bar {
    font-size: 18px;
    /* padding: 14px 24px; */
  }

  .announcement-item {
    font-size: 18px;
  }
}

/* Header section  */

header {
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.logo img {
  width: 40px;
  height: auto;
  transition: transform 0.3s;
}

.logo img:hover {
  transform: scale(1.1);
}

.search-bar {
  display: none;
  flex-direction: row;
  align-items: center;
  width: 100%;
  transition: all 0.3s ease;
}

.search-bar input {
  width: 0;
  padding: 10px 20px;
  border: 2px solid #007bff;
  border-radius: 30px;
  font-size: 16px;
  outline: none;
  transition:
    width 0.3s ease,
    padding 0.3s ease;
}

.search-bar input:focus {
  border-color: #0056b3;
}

.search-bar input::placeholder {
  color: #888;
  font-style: italic;
}

.search-bar .close-btn {
  margin-left: 10px;
  cursor: pointer;
  font-size: 20px;
  color: #007bff;
}

.search-bar .close-btn:hover {
  color: #0056b3;
}

.icons {
  display: flex;
  gap: 20px;
  align-items: center;
}

.icons .icon {
  font-size: 26px;
  text-decoration: none;
  color: #333;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.icons .icon:hover {
  color: #007bff;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .header-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .logo img {
    width: 40px;
    margin-right: 10px;
  }

  .icons {
    display: none;
  }

  .search-icon {
    font-size: 26px;
    color: #007bff;
    cursor: pointer;
    display: block;
  }

  .bottom-icons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 2px solid #ddd;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 1000;
  }

  .bottom-icons .icon {
    font-size: 24px;
    color: #333;
  }

  .bottom-icons .icon:hover {
    color: #007bff;
  }
}

@media (min-width: 768px) {
  .bottom-icons {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-bar input {
    max-width: 300px;
  }

  .icons .icon {
    font-size: 30px;
  }
}

@media (min-width: 1024px) {
  .search-bar input {
    max-width: 400px;
  }
}

.bottom-icons .icon {
  font-size: 24px;
  color: #333;
  position: relative;
}

.bottom-icons .icon:not(:last-child) {
  padding-right: 10%;
}

.bottom-icons .icon:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #ccc;
  margin-left: 10px;
}

.sticky-header {
  position: sticky;
  /* Sticks to the top of the viewport */
  top: 0 !important;
  z-index: 1001;
  width: 100%;
  transition: background-color 0.3s ease-in-out;
  height: auto;
  min-height: 50px;
}

/* Content Section */

.content {
  padding-top: 0px;
  /* Add padding to account for the sticky header */
}

/* For screens smaller than 768px (mobile devices) */
@media (max-width: 767px) {

  /* Ensure the icons and content are aligned properly */
  .sticky-header .row {
    flex-wrap: wrap;
    /* Allow wrapping if content overflows */
  }

  /* Resize the icons to fit better */
  .sticky-header .user-icons a img {
    width: 25px;
    /* Resize icons for mobile */
    height: 25px;
  }

  /* Ensure the logo remains a good size */
  .sticky-header .col-6 img {
    height: 40px;
    /* Adjust logo size */
  }

  /* Adjust search input field and icon on small screens */
  .sticky-header .search-box {
    max-width: 250px;
    /* Reduce the width of the search box */
  }
}

.fade:not(.show) {
  opacity: 0;
}

.modal {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  border-radius: 10px;
}

.fade {
  transition: opacity 0.15s linear;
}

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

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  /* background-color: rgba(0, 0, 0, 0.85) !important; */
  /* Strong dark overlay */
  /* backdrop-filter: blur(10px); */
  /* Modern blur effect */
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: min-content;
  content: "";
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 450px;
  /* Constrain width for a better card look */
  margin: 1.75rem auto;
  pointer-events: none;
  transition: transform 0.3s ease-out;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: none;
  outline: 0;
  border-radius: 15px;
  /* Softer corners */
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  /* Deep shadow for depth */
}

.modal-header {
  padding: 0;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  color: var(--bg-color);
}

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

a {
  color: var(--bg-color);
  text-decoration: none;
  background-color: transparent;
}

a {
  text-decoration: none !important;
}

h3,
h5 {
  font-size: 15px;
}

/* 
h5,
.h5 {
    font-size: 1.25rem;
} */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--font-color);
}

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

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

button,
[type="button"],
[type="reset"],
[type="submit"]
/* -webkit-appearance: button; */

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

button,
select {
  text-transform: none;
}

button,
input {
  overflow: visible;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  border-radius: 0;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  border-radius: 10px;
}

.tab-content>.tab-pane {
  display: none;
}

.modal-body .form-group {
  margin-bottom: 10px;
  color: rgb(21, 20, 20);
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.form-group {
  margin-bottom: 1rem;
}

.form-control-logreg {
  display: block;
  width: 100%;
  height: 50px;
  /* Standardize height */
  padding: 0.75rem 1.2rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  background-color: #f8f9fa;
  /* Slightly off-white background */
  background-clip: padding-box;
  border: 1px solid #e1e7ec;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

.form-control-logreg:focus {
  background-color: #fff;
  border-color: var(--primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(3, 196, 161, 0.15);
  /* Primary glow */
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.mt-4,
.my-4 {
  margin-top: 1rem !important;
}

label {
  display: inline-block;
  padding: 5px;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-primary {
  color: var(--button-font-color);
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.btn {
  display: inline-block;
  font-weight: 400;
  /* color: #6F6F6F; */
  text-align: center;
  vertical-align: middle;
  user-select: none;
  /* background-color: white; */
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 10px;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

p {
  margin-top: 0;
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.modal-header ul {
  border: none;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

h4,
.h4 {
  font-size: 1.5rem;
}

@media (max-width: 1200px) {

  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

pre,
code,
kbd,
samp {
  font-family:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 1em;
}

[hidden] {
  display: none !important;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #edf1ff;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

@media only screen and (max-width: 768px) {
  .carousel-offer {
    width: 100%;
  }

  .carousel-offer-btn {
    margin: 30% 30% 0% 40%;
    border-radius: 10px;
  }

  .form-control {
    margin-left: 15px;
  }
}

h6,
.h6 {
  font-size: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #edf1ff;
}

.modal-footer>* {
  margin: 0.15rem;
}

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

  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

@media only screen and (max-width: 576px) {
  .carousel-offer {
    width: 100%;
    height: 10%;
    margin-left: 0px !important;
  }

  .form-control {
    margin-left: 15px;
  }

  .topbarseller {
    margin-top: 15px;
    margin-left: 5%;
  }

  .carousel-offer-btn {
    margin-left: 30%;
    margin-right: 30%;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: min-content;
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {

  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.modal-header .closelm {
  padding: 10px 15px;
}

.modal-header ul li {
  margin: 0;
}

.modal-header ul li a {
  border: none;
  border-radius: 0;
}

.modal-header ul li.active a {
  color: #e12f27;
}

.modal-header ul li a:hover {
  border: none;
}

.modal-header ul li a span {
  margin-left: 10px;
}

.tab-content>.active {
  display: block;
}

/* General Styles for Dropdown Container */
/* ============================================
   DROPDOWN MENU - MODERN MINIMAL DESIGN
   ============================================ */

/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
  float: left;
}

/* Dropdown Content Styling */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff !important;
  box-shadow:
    0 20px 60px rgba(181, 139, 139, 0.12),
    0 8px 20px rgba(190, 155, 155, 0.08);
  display: none;
  z-index: 1050;
  /* higher than banners */
  border-radius: 16px;
  padding: 12px;
  min-width: fit-content;
  white-space: nowrap;
  overflow: visible;
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.dropdown-content.visible {
  display: block;
}

/* Custom Scrollbar */
.dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}

/* Dropdown Links */
.dropdown-content a {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
  color: #475569;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

/* Hover Background on Hover */
.dropdown-content a::before {
  display: none;
}

.dropdown-content a:hover {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
}

.dropdown-content a:hover::before {
  display: none;
}

/* Active Link Style */
.dropdown-content a:active {
  background: #f1f5f9;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Arrow Rotation */
.arrow {
  display: inline-block;
  color: #64748b;
}

.dropdown:hover .arrow {
  color: #214db5;
}

/* Subcategory Container */
.sub-subcategory-container {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #ffffff !important;
  box-shadow:
    0 20px 60px rgba(203, 168, 168, 0.12),
    0 8px 20px rgba(179, 153, 153, 0.08);
  z-index: 1050;
  /* Higher than banners */
  border-radius: 16px;
  display: none;
  padding: 12px;
  min-width: 100px;
  width: max-content;
  white-space: nowrap;
  margin-left: 0px;
  /* Aligned tight to parent */
  border: 1px solid rgba(226, 232, 240, 0.6);
}

/* Show Sub-Subcategories on Hover */
.subcategory-item:hover .sub-subcategory-container {
  display: block !important;
}

/* Styling for Links in Subcategory Container */
.sub-subcategory-container a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #33598e;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
}

.sub-subcategory-container a::after {
  display: none;
}

.sub-subcategory-container a:hover {
  background: #f8fafc;
  color: #1741a5;
}

.sub-subcategory-container a:hover::after {
  display: none;
}

/* Ripple Effect removed */
.dropdown-content a:active::after,
.sub-subcategory-container a:active::after {
  display: none;
}

/* Staggered Fade In Animation removed to make dropdown instant */

/* Hover Glow Effect */
.dropdown:hover {
  filter: drop-shadow(0 4px 12px rgba(36, 59, 112, 0.1));
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Small Devices (Mobile) */
@media (max-width: 576px) {
  .dropdown-content {
    width: 100%;
    max-width: 320px;
    border-radius: 20px;
    padding: 16px;
  }

  .dropdown-content a {
    padding: 14px 20px;
    font-size: 1rem;
  }

  .sub-subcategory-container {
    min-width: fit-content;
    white-space: nowrap;
    border-radius: 20px;
  }

  .sub-subcategory-container a {
    padding: 12px 18px;
    font-size: 0.95rem;
  }
}

/* Tablets and Small Devices */
@media (max-width: 992px) {
  .dropdown-content {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 360px;
  }

  .sub-subcategory-container {
    left: 0;
    top: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .dropdown:hover .dropdown-content {
    visibility: visible;
    display: block;
  }

  .dropdown .dropbtn {
    display: block;
    width: 100%;
  }

  .dropdown-content {
    width: 100%;
  }

  /* Touch-friendly spacing */
  .dropdown-content a,
  .sub-subcategory-container a {
    padding: 14px 20px;
  }
}

/* Desktop Optimization */
@media (min-width: 993px) {
  .dropdown-content {
    min-width: fit-content;
    white-space: nowrap;
  }

  .sub-subcategory-container {
    min-width: fit-content;
    white-space: nowrap;
  }


}

/* Large Desktop */
@media (min-width: 1200px) {
  .dropdown-content {
    min-width: fit-content;
    white-space: nowrap;
    padding: 14px;
  }

  .dropdown-content a {
    padding: 14px 20px;
    font-size: 1rem;
  }

  .sub-subcategory-container {
    min-width: fit-content;
    white-space: nowrap;
    padding: 14px;
  }
}

/* ============================================
   ACCESSIBILITY & FOCUS STATES
   ============================================ */

.dropdown-content a:focus,
.sub-subcategory-container a:focus {
  outline: 3px solid rgba(15, 23, 42, 0.3);
  outline-offset: 2px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Keyboard Navigation Support */
.dropdown-content a:focus-visible,
.sub-subcategory-container a:focus-visible {
  box-shadow: 0 0 0 4px rgba(52, 81, 149, 0.15);
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {

  .dropdown-content,
  .sub-subcategory-container {
    background-color: #d3def0;
    border-color: rgba(71, 85, 105, 0.4);
  }

  .dropdown-content a,
  .sub-subcategory-container a {
    color: #040a11;
  }

  .dropdown-content a:hover,
  .sub-subcategory-container a:hover {
    background: linear-gradient(135deg, #1667d9 0%, #284064 100%);
    color: #f8fafc;
  }

  .dropdown-content::-webkit-scrollbar-track {
    background: #3e61b2;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .dropdown-content,
  .sub-subcategory-container {
    transition:
      opacity 0.01ms,
      visibility 0.01ms;
  }

  .arrow {
    transition: none;
  }
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  /* padding-right: 15px;
  padding-left: 15px; */
  margin-right: auto;
  margin-left: auto;
}

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

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 10px;
  padding-left: 0px;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.bg-light {
  background-color: #f6f6f6 !important;
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
  /* padding: 0.25rem 0.75rem; */
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
}

.collapse:not(.show) {
  display: none;
}

@media (max-width: 768px) {
  .navbar-collapse {
    /* position: fixed; */
    /* top: 200px;  */
    left: 10px;
    height: auto;
    width: 80%;
    /* background-color: #f8f9fa; */
    overflow: scroll;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1050;
  }

  .navbar-collapse.show {
    transform: translateX(0);
  }

  .mobile-arrow {
    display: inline;
  }

  .nav-item .dropbtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-item .mobile-arrow {
    order: 2;
    /* Move the arrow to the right */
  }

  .nav-item .category-name {
    order: 1;
    /* Keep the category name on the left */
  }
}

.justify-content-between {
  justify-content: space-between !important;
}

@media (max-width: 576px) {
  .topbarseller {
    display: block;
    text-align: center;
    margin: 20px 0;
  }

  .topbarseller a {
    display: block;
    margin-bottom: 10px;
  }

  .navbar-nav {
    width: 100%;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {

  /* Adjust styles for tablets */
  .navbar-nav {
    margin-top: 10px;
    /* Increase top margin for mobile navigation */
  }
}

@media (max-width: 768px) {

  .col-lg-3,
  .col-lg-5,
  .col-lg-6 {
    width: 100%;
    margin-bottom: 15px;
  }
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link {
    padding: 5px 0px;
  }
}

.navbar-light .navbar-nav .nav-link {
  padding: 10px 10px;
  color: var(--font-color);
  outline: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  /* padding: 14px 16px; */
  /* background-color: #f6f6f6; */
  font-family: inherit;
  margin: 1;
  /* position: fixed; */
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.d-none {
  display: none !important;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-sm-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-sm-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-sm-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-sm-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-sm-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-sm-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-sm-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-sm-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-sm-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-sm-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.33333%;
  }

  .offset-sm-2 {
    margin-left: 16.66667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.33333%;
  }

  .offset-sm-5 {
    margin-left: 41.66667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.33333%;
  }

  .offset-sm-8 {
    margin-left: 66.66667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.33333%;
  }

  .offset-sm-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-md-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-md-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-md-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-md-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-md-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-md-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-md-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-md-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-md-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.33333%;
  }

  .offset-md-2 {
    margin-left: 16.66667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.33333%;
  }

  .offset-md-5 {
    margin-left: 41.66667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.33333%;
  }

  .offset-md-8 {
    margin-left: 66.66667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.33333%;
  }

  .offset-md-11 {
    margin-left: 91.66667%;
  }
}

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

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .m-lg-n1 {
    margin: -0.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }

  .m-lg-n2 {
    margin: -0.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .m-lg-n5 {
    margin: -3rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.7rem;
    padding-left: 0.7rem;
  }

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid,
  .navbar-expand-lg>.container-sm,
  .navbar-expand-lg>.container-md,
  .navbar-expand-lg>.container-lg,
  .navbar-expand-lg>.container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-lg-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-lg-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-lg-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-lg-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-lg-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-lg-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-lg-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-lg-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 80%;
  }

  .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-lg-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.33333%;
  }

  .offset-lg-2 {
    margin-left: 16.66667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.33333%;
  }

  .offset-lg-5 {
    margin-left: 41.66667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.33333%;
  }

  .offset-lg-8 {
    margin-left: 66.66667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.33333%;
  }

  .offset-lg-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 15px !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 15px !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 15px !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 15px !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 15px !important;
  }

  .m-xl-n1 {
    margin: -0.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }

  .m-xl-n2 {
    margin: -0.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xl-n5 {
    margin: -3rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

/* Popup styles */
.popup {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black background with opacity */
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* Popup content */
.popup-content {
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 90%;
  /* Restrict width on smaller screens */
  max-height: 90%;
  /* Restrict height on smaller screens */
  overflow: auto;
  /* Enable scrolling if content overflows */
}

/* Image inside popup */
.popup-content img {
  width: 100%;
  /* Make the image responsive */
  height: auto;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Keeps the aspect ratio */
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.adv-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  color: #333333;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  line-height: 1;
  padding-bottom: 3px;
  /* Visual alignment for times symbol */
}

.adv-close-btn:hover {
  background-color: #f8f9fa;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive Design: Mobile First */

/* Styles for tablets and larger screens */
@media (min-width: 768px) {
  .popup-content {
    max-width: 600px;
    padding: 20px;
  }

  .popup-content img {
    max-width: 500px;
    max-height: 500px;
  }
}

@media (min-width: 1024px) {
  .popup-content {
    max-width: 800px;
  }

  .popup-content img {
    max-width: 700px;
    max-height: 700px;
  }
}

.pt-5,
.py-5 {
  padding-top: 1rem !important;
}

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

.mb-4,
.my-4 {
  margin-bottom: 0.5rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Large Screen Styles */
@media (min-width: 768px) {
  .products {
    margin-left: 250px;
    /* Keep space for filter on large screens */
  }

  .filter-container {
    display: flex;
    flex-direction: row;
  }

  .filter-sidebar {
    display: block;
    /* Always show filter sidebar */
    position: relative;
    width: 200px;
    box-shadow: none;
    transform: none;
    padding-right: 10px !important;
  }

  .card {
    flex: 1 1 calc(33.33% - 30px);
  }
}

.card {
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  overflow: hidden;
  transition: height 0.3s ease;
  /* Transition for smooth height changes */
  /* width:225px; */
  /* height: 500px; */
}

.cardprod {
  /* height: 350px; */
  /* border: 1px solid #03c4a1; */
  /* border: 3px solid #03c4a1; */
  /* border-radius: 12px; */
  padding: 1px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: var(--bordersize) solid var(--bordercolor);
}

.card-header_prod {
  position: relative;
  overflow: hidden;
}

.card-header_prod {
  text-align: center;
  height: 350px;
}

.p-0 {
  padding: 0 !important;
}

.position-relative {
  position: relative !important;
}

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

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

.product-img {
  position: relative;
  /* height: 400px; */
  overflow: hidden;
  /* object-fit:contain; */
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: var(--bordersize) solid var(--bordercolor);
}

.pt-4,
.py-4 {
  padding-top: 1rem !important;
}

.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.wishlist-icon {
  display: inline-block;
  padding: 5px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.wishlist-icon i {
  font-size: 15px;
}

.wishlist-icon.active i {
  color: rgb(230, 6, 59) !important;
}

/* ── Product card badges: wishlist heart (top-left) & tag/label (top-right) ──
   These two elements previously relied on plain float:left / float:right with a
   fixed inline font-size, which caused the tag text to overlap the heart icon
   on narrow (mobile) cards. Pulling both out of normal flow with absolute
   positioning guarantees they can never collide, and the tag now shrinks and
   truncates instead of overflowing on small screens. */
.card-header_prod > .card-body:first-child {
  float: none !important;
  margin-left: 0 !important;
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 0 !important;
}

h2[align="right"] {
  float: none !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 2;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 8px;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3px;
}

@media (max-width: 480px) {
  h2[align="right"] {
    font-size: 10px !important;
    padding: 2px 6px;
    max-width: 55%;
    top: 6px !important;
    right: 6px !important;
  }

  .card-header_prod > .card-body:first-child {
    top: 6px;
    left: 6px;
  }

  .wishlist-icon {
    padding: 3px;
  }

  .wishlist-icon i {
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  h2[align="right"] {
    font-size: 9px !important;
    padding: 1px 5px;
    max-width: 50%;
  }
}

.cat-item .cat-img img,
.product-item .product-img img {
  transition: 0.5s;
}

.product-img img {
  object-fit: contain;
  text-align: center;

  /* width: 300px; */
  height: 300px;
  /* height: 320px;    */
}

.img-fluid {
  max-width: 100%;
  height: auto;
  transition: 0.6s linear;
  /* padding: 10vh; */
}

img {
  vertical-align: middle;
  border-style: none;
}

.section-title {
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  font-weight: bold;
  color: var(--bg-color);
}

@media (max-width: 1200px) {

  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
}

h2,
.h2 {
  font-size: 2rem;
}

.section-title::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: transparent;
}

.section-title span {
  position: relative;
  background: transparent;
  z-index: 1;
}

.card-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  gap: 15px;
  /* Optional: space between cards */
  /* padding-left: 10% !important;
    padding-right: 10% !important; */
  /* position: relative;  */
  justify-content: center;
  align-items: center;
}

.card-container::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for better UX */
}

.card-container .card {
  flex: 0 0 auto;
  /* Prevent shrinking, allow wrapping */
  width: 306px;
  /* Set card width */
}

.card-container .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}

.card-container1 {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  gap: 15px;
  /* Optional: space between cards */
  /* padding-left: 0% !important; */
  /* padding-righ t: 0% !important; */
  /* position: relative;  */
  justify-content: center;
  align-items: center;
}

.card-container1::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for better UX */
}

.card-container1 .card {
  flex: 0 0 auto;
  /* Prevent shrinking, allow wrapping */
  width: 306px;
  /* Set card width */
}

.card-container1 .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}

.card-container2 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  gap: 15px;
  /* Optional: space between cards */
  /* padding-left: 10% !important; */
  /* padding-right: 10% !important; */
  /* position: relative;  */
  scroll-snap-type: x mandatory;
  /* Snap scrolling for better UX (optional) */
  padding-bottom: 1rem;
  /* Optional padding for better visuals */
}

.card-container2 .product-item {
  scroll-snap-align: start;
  /* Ensure cards snap properly (optional) */
  flex: 0 0 auto;
  /* Prevent shrinking of cards */
  width: 230px;
  /* Adjust card width */
}

.card-container2::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for better UX */
}

.card-container2 .card {
  flex: 0 0 auto;
  /* Prevent shrinking, allow wrapping */
  width: 306px;
  /* Set card width */
}

.card-container2 .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel :where(.card, .img) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel .card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 8px;
  display: flex;
  cursor: pointer;
  padding-bottom: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.card .img {
  background: green;
  border-radius: 50%;
}

.card .img img {
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
}

@media screen and (max-width: 900px) {
  .card-container .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 768px) {
  .card-container {
    padding-left: 0% !important;
    padding-right: 0% !important;
    justify-content: unset;
    /* Removes centering */
    align-items: unset;
    /* Removes centering */
  }
}

@media screen and (max-width: 600px) {
  .card-container .carousel {
    grid-auto-columns: 100%;
  }
}

#addcart {
  /* width: 80%; */
  cursor: pointer;
  margin-bottom: 0.75rem;
  /* padding-top: 12.5px; */
}

.add_to_cart:hover,
.buy_now:hover {
  background-color: var(--bg-color);
  color: white;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0;
  margin: 15px;
}

.add_to_cart,
.buy_now {
  width: 150px;
  color: white;
  border: 2px solid white;
  background-color: var(--bg-color);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.btn-info {
  color: var(--button-font-color);
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.btn-info:hover {
  color: var(--button-font-color);
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.btn-info:focus,
.btn-info.focus {
  color: var(--button-font-color);
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-info.disabled,
.btn-info:disabled {
  color: var(--button-font-color);
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: var(--button-font-color);
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.overlay-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.card-header_prod:hover .overlay-blur {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.card-header_prod:hover .overlay {
  opacity: 1;
}

.card-header_prod .btn {
  width: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  margin-bottom: 5px;
  color: black;
  pointer-events: auto;
}

#productModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* Black background with opacity */
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* #productModal img{
    width: 100%;
    height: 100%;
} */

#productModal.modal-body {
  display: flex;
  align-items: center;
}

#productModal .modal-content {
  top: 100;
  /* width: 700px; */
}

#productModal .modal-img-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .modal-img-container img {
    max-width: 100%;
    max-height: 100%;
} */
#productModal .modal-details {
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* .d-flex {
  display: flex;
} */

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

figure {
  /* margin: 0 0 1rem; */
}

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

.bg-secondary {
  background-color: var(--footerbgcolor);
}

.pr-3 {
  padding-right: 1rem !important;
}

.mb-5 {
  margin-bottom: 2px;
}

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

a.text-primary:hover,
a.text-primary:focus {
  color: #ba6a62 !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

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

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.align-items-center {
  align-items: center !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

/* Scoped to .footer-custom: this was previously a bare ".fab, .fas"
   selector with no scoping, so it colored every solid/brand FontAwesome
   icon on the page with the footer's text color -- including the header's
   cart/wishlist/profile icons, which is why they were invisible
   (var(--footerfontcolor) resolves to white, same as a light header
   background). The intent was always footer social/contact icons only. */
.footer-custom .fab,
.footer-custom .fas {
  color: var(--footerfontcolor) !important;
}

.border-light {
  border-color: #ffffff !important;
}

.font-weight-semi-bold {
  font-weight: 600;
}

.mb-0,
.my-0 {
  /* display: flex; */
  margin-bottom: 0 !important;
  /* margin-right: 180px; */
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

@media (max-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

.offer img {
  position: absolute;
  max-width: 50%;
  max-height: 90%;
  bottom: 0;
}

.offer .text-md-right img {
  left: 0;
}

.offer .text-md-left img {
  right: 0;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.btn-light {
  text-align: center;
  color: var(--button-font-color);
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.px-3 {
  background-color: white;
  padding-right: 1rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

@media (max-width: 768px) {
  .input-group {
    /* width: 100%; */
    flex-direction: column;
    /* Adjust layout for mobile if needed */
  }

  #product_quantity {
    width: 60px;
    /* Adjust the input field size for mobile */
  }
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* width: 100%; */
}

.input-group>.form-control,
.input-group>.form-control-plaintext,
.input-group>.custom-select,
.input-group>.custom-file {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  /* min-width: 0; */
  margin-bottom: 0;
  height: 100%;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

#searchbtn {
  position: absolute;
  right: 10px;
  /* Adjust as needed */
  top: 15%;
  /* transform: translateY(-50%); */
  z-index: 1000;
  /* Ensure button appears above search box */
}

.suggestions-container {
  position: absolute;
  top: 100%;
  /* Immediately below the input */
  left: 0;
  right: 0;
  /* Cover full width of parent */
  width: 100%;
  /* EXACT width of parent */
  background: var(--header-background, #fff);
  border: 1px solid var(--header-border-light, #ccc);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
  z-index: 2001;
  box-shadow: 0 8px 16px var(--header-shadow, rgba(0, 0, 0, 0.1));
}

@media (max-width: 768px) {
  .search-wrapper {
    width: 100%;
  }
}

/* Suggestion item */
.suggestions-container div {
  padding: 8px 12px;
  cursor: pointer;
}

.suggestions-container div:hover {
  background-color: #f0f0f0;
}

/* General Reset */
body {
  margin: 0;
  font-family: var(--font-family, Arial, sans-serif);
  background-color: #fff;
}

.carousel {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background-color: #000;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
  display: none;
}

.carousel-item.active {
  display: block;
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 24px;
  z-index: 1000;
  border-radius: 50%;
}

.carousel-control.prev {
  left: 10px;
}

.carousel-control.next {
  right: 10px;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.carousel-indicators .indicator {
  width: 20px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  cursor: pointer;
}

.carousel-indicators .indicator.active {
  background-color: #fff;
}

@media (min-width: 768px) {
  .carousel-item img {
    height: 400px;
    object-fit: cover;
  }

  .carousel-control {
    padding: 15px 20px;
    font-size: 28px;
  }

  .carousel-indicators .indicator {
    width: 30px;
    height: 7px;
  }

  #view_more1 {
    display: none;
  }

  .offer {
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media (max-width: 768px) {

  #nextBtn,
  #prevBtn {
    display: none;
  }

  #view_more1 {
    display: block;
  }

  .offer {
    padding-left: 0%;
    padding-right: 0%;
  }
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  /* Fixed white icon on the site's button-accent color (not --bg-color/
     --button-font-color) — those are the admin's page-background and body
     text colors, and reusing them here made the icon invisible (black on
     black) whenever an admin picked a dark page background. */
  color: #fff;
  background-color: var(--btn-bg, #ff6b00);
  z-index: 1001;
}

/* The site-wide ".fas { color: var(--footerfontcolor) !important; }" rule
   (meant for footer social icons) outranks the plain `color` above via
   !important — this specific override is needed to actually win. */
#btn-back-to-top i {
  color: #fff !important;
}

.filter-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.filter-sidebar {
  /* width: 10%; */
  /* background-color: #f4f4f4; */
  /* padding: 20px; */
  /* border-right: 1px solid #ccc; */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  /* z-index:999; */
}

.border-bottom {
  border-bottom: 1px solid #edf1ff !important;
}

.price-input-container {
  width: 100%;
}

.price-input {
  /* width: 50%;  */
  font-size: 12px;
  color: #555;
  width: 100%;
  display: flex;
  margin: 30px 0 35px;
  /* display: flex; */
  flex-wrap: wrap;
}

.price-field input {
  flex: 1;
  height: 35px;
  max-width: 45%;
  /* font-size: 11px;  */
  font-family: "DM Sans", sans-serif;
  border-radius: 9px;
  text-align: center;
  border: 0px;
  background: #e4e4e4;
}

.price-input .separator {
  width: 20%;
  display: flex;
  font-size: 19px;
  align-items: center;
  justify-content: center;
}

.slider-container {
  width: 100%;
  height: 6px;
  position: relative;
  background: #555;
  border-radius: 5px;
}

.slider-container .price-slider {
  height: 100%;
  left: 5%;
  right: 5%;
  position: absolute;
  border-radius: 5px;
  background: var(--bg-color);
}

.range-input {
  position: relative;
}

.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  background: none;
  top: -5px;
  pointer-events: none;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #007bff;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #007bff;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.filter-btn {
  position: fixed;
  bottom: 72px; /* above the bottom nav bar */
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-color, #00ccff);
  color: #fff;
  border: none;
  padding: 10px 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 100;
  display: none; /* hidden on desktop */
  white-space: nowrap;
  align-items: center;
  gap: 6px;
}

.filter-btn:hover {
  background-color: #00ccff;
}

.row1 {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  height: auto;
  border-radius: 2px;
  /* border-bottom: 1px solid rgba(128,128,128,0.5); */
  /* padding: 5px; */
}

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  /* color-adjust: exact; */
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.filter-options label {
  cursor: pointer;
  color: #555;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

/* Small Screen Styles */
@media (max-width: 768px) {
  .filter-btn {
    display: block;
  }

  .filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 85vw);
    height: 100%;
    background-color: #fff;
    padding: 20px;
    display: block;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    z-index: 2000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-sidebar.active {
    transform: translateX(0) !important;
    display: block !important;
  }

  .products {
    margin-left: 0;
    /* Full width products in small screens */
  }

  .card-container1 {
    padding-left: 10% !important;
  }

  /* .card {
      flex: 1 1 100%;
    } */
}

@media (max-width: 768px) {
  /* 2-column product grid on mobile — matching home page cards */
  .card-container1 {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .card-container1 .card {
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .card-container1 .card-header,
  .card-container1 .card-header_prod {
    height: 170px !important;
    max-width: 100% !important;
    border: none !important;
    border-right: none !important;
    text-align: center;
  }

  .card-container1 .card-body {
    flex: 1 !important;
    padding: 8px 10px !important;
  }

  .card-container1 img.cardimg {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    margin-right: 0 !important;
  }

  /* gallery div takes full width */
  #gallery {
    width: 100% !important;
  }
}

.filter-sidebar.active {
  display: block;
  /* Above the sticky header (1010) and bottom nav (1050) so its own close
     button and content aren't hidden underneath them */
  z-index: 2000;
  overflow: scroll;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 10;
  width: auto;
  margin: 0;
}

.indicators button {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicators button.active {
  background: #00ccff;
  width: 30px;
  border-radius: 6px;
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
}

button.prev {
  left: -48px;
}

button.next {
  right: 10px;
}

/* Slider visibility rules removed for unified slider */

div.stars {
  width: 270px;
  display: inline-block;
}

.mt-200 {
  margin-top: 200px;
}

input.star {
  display: none;
}

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: var(--bg-color);
  transition: all 0.2s;
}

input.star:checked~label.star:before {
  content: "\f005";
  color: var(--bg-color);
  transition: all 0.25s;
}

input.star-5:checked~label.star:before {
  color: var(--bg-color);
  text-shadow: 0 0 20px black;
}

input.star-1:checked~label.star:before {
  color: #f62;
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: "\f006";
  font-family: FontAwesome;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #ba8b00 !important;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.product-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: black;
}

.product-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.slider-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  height: auto;
  /* Ensure the wrapper adjusts to content */
}

.slider-main-image {
  flex: 1;
  max-width: 500px;
  max-height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  /* Align content vertically */
}

.slider-main-image img {
  width: 100%;
  height: 100%;
  /* Ensure the main image takes the full height of the container */
  object-fit: contain;
}

.thumbnail-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 30%;
  /* Thumbnails will take up 30% */
  height: 100%;
  /* Match the height of the main image container */
  justify-content: center;
  /* Center thumbnails vertically */
  align-items: center;
  /* Center thumbnails horizontally */
}

.thumbnail-container img {
  width: 50%;
  height: 100px;
  /* object-fit: cover; */
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.thumbnail-container img:hover {
  transform: scale(1.1);
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
}

.control-btn {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: #0056b3;
}

/* Hide thumbnail-container on small screens */
.slider-indicators {
  display: block;
  margin-top: 10px;
  text-align: center;
}

.slider-indicators button {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #007bff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-indicators button.active {
  background-color: #0056b3;
}

/* Media query for screens > 451px: Show thumbnails on the left and main image on the right */
@media (min-width: 452px) {
  .slider-wrapper {
    flex-direction: row;
    /* Thumbnails on left, main image on right */
  }

  .thumbnail-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 30%;
    /* Thumbnails take up 30% */
  }

  .slider-main-image {
    flex: 1;
    width: 60%;
    /* Main image takes up 60% */
  }

  .slider-indicators {
    display: none;
    /* Hide indicators on large screens */
  }
}

/* Media query for screens ≤ 451px: Show indicators below the screen */
@media (max-width: 451px) {
  .slider-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
    /* To place it below the image */
  }

  .thumbnail-container {
    display: none;
  }

  .slider-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .slider-main-image {
    width: 100%;
  }
}

.rating-container {
  display: flex;
  gap: 5px;
}

.rating-container p {
  font-size: 16px;
  font-weight: 500;
  color: #868588 !important;
}

.star {
  font-size: 16px;
  color: #ddd;
  /* Light gray for empty stars */
  cursor: pointer;
}

.star.filled {
  color: gold;
  /* Gold color for filled stars */
}

.pricing-container {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Add space between elements */
}

.price {
  font-size: 1.5rem;
}

.price {
  font-weight: bold;
  color: black;
  /* Highlight the actual price in black */
}

.mrp {
  font-size: 1.3rem;
  /* Make MRP slightly smaller */
  text-decoration: line-through;
  /* Add a strike-through for MRP */
  color: #999;
  /* Lighter gray for MRP */
}

.discount {
  font-size: 1rem;
  /* Make discount text smaller */
  color: white;
  /* White text color */
  background-color: red;
  /* Red background color for discount */
  font-weight: bold;
  padding: 2px 4px;
  /* Add padding around the discount text */
  border-radius: 20px;
  /* Rounded corners for the discount box */
  border: 2px solid red;
  /* Optional: Add a border to enhance visibility */
}

.tax-included {
  font-weight: bold;
  font-size: 1rem;
  /* Make discount text smaller */
}

/* Styling for the quantity section */
.quantity-container {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Space between the quantity input and buttons */
  font-family: Arial, sans-serif;
  /* Clean and simple font */
}

/* Quantity label */
.quantity-label {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  /* Dark gray for text */
  margin-right: 10px;
  /* Space between label and buttons */
}

/* Quantity input box */
.quantity-input {
  width: 50px;
  height: 35px;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 8px;
  /* Rounded corners for a soft look */
  border: 1px solid #ddd;
  /* Light border color */
  padding: 5px;
  font-weight: bold;
  /* Bold text for the number */
  background-color: #f9f9f9;
  /* Light background for input */
}

/* Styling for the quantity buttons (+/-) */
.quantity-btn {
  background-color: var(--bg-color);
  /* Green button for a fresh look */
  color: var(--button-font-color);
  border: none;
  border-radius: 50%;
  /* Circular button design */
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  /* Larger font for easy readability */
}

/* Hover effect for the quantity buttons */
.quantity-btn:hover {
  background-color: rgb(0, 204, 255);
  /* Darker green on hover */
}

/* Focused input box effect */
.quantity-input:focus {
  outline: none;
  border-color: rgb(0, 204, 255);
  /* Highlight border when focused */
  background-color: #e9f7fe;
  /* Light blue background */
}

/* Container for both buttons */
.buttons-container {
  display: flex;
  justify-content: flex-start;
  /* Space between buttons */
  gap: 20px;
  /* Optional: space between buttons */
  padding: 10px;
}

/* Styling for buttons */
.add-to-cart,
.buy-now {
  width: auto;
  min-width: 150px;
  /* Both buttons take up roughly half the width */
  padding: 12px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.add-to-cart {
  background-color: var(--bg-color);
  /* Green button for a fresh look */
  color: var(--button-font-color);
}

.buy-now {
  background-color: var(--bg-color);
  /* Green button for a fresh look */
  color: var(--button-font-color);
}

/* Hover effects for buttons */
.btn:hover {
  opacity: 0.8;
}

/* Sticky buttons at the bottom for screen width <= 768px */
@media (max-width: 767px) {
  .buttons-container {
    position: fixed;
    bottom: 45;
    left: 0;
    width: 100%;
    background-color: white;
    /* Ensure background color to avoid transparency issues */
    z-index: 1000;
    /* Ensure the buttons are above other content */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* Add slight shadow for a floating effect */
  }

  .btn {
    width: 45%;
    /* Maintain button size */
  }

  #btn-back-to-top {
    width: auto;
  }
}

/* Styling for the guarantees section */
.guarantees-section {
  padding: 20px;
  text-align: center;
  /* Center the text and icons */
  /* background-color: #f4f4f4; */
}

.guarantees-section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

/* Container to hold the guarantee items */
.guarantees-container {
  display: flex;
  justify-content: space-around;
  /* Distribute the items evenly in a row */
  gap: 20px;
  /* Optional: space between items */
}

/* Individual guarantee item styling */
.guarantee {
  text-align: center;
}

.guarantee-icon {
  width: 25px;
  height: 25px;
  margin-bottom: 10px;
  /* Space between icon and text */
}

.guarantee p {
  font-size: 0.9rem;
  color: #555;
}

/* Responsive Design: Stack the guarantees vertically on smaller screens */
@media (max-width: 767px) {
  .guarantees-container {
    align-items: center;
    /* Center the items */
  }

  .guarantee {
    margin-bottom: 20px;
    /* Space between items when stacked */
  }

  .guarantee p {
    font-size: 1rem;
    /* Adjust font size for smaller screens */
  }
}

/* Tabs Section */
.tabs-section {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

/* Base styling for the tabs container */
.tabs {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
  justify-content: space-between;
  /* Distribute buttons evenly */
  gap: 10px;
  /* Add space between buttons */
  margin: 20px 0;
}

/* Styling for individual tab buttons */
.tab-button {
  flex: 1;
  /* Allow equal space for all buttons */
  min-width: 150px;
  /* Ensure buttons don't shrink too small */
  padding: 10px 15px;
  text-align: center;
  font-size: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.tab-button:hover {
  background-color: var(--bg-color);
  /* Green button for a fresh look - Updated to white font */
  color: #fff !important;
}

.tab-button.active {
  background-color: var(--bg-color);
  /* Green button for a fresh look - Updated to white font */
  color: #fff !important;
}

.tab-content {
  padding: 20px;
}

/* Tab Panels */
.tab-panel {
  display: none;
  /* Hide all panels by default */
}

.tab-panel.active {
  display: block;
}

/* Product Description & More Information Styling */
h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
}

li {
  font-size: 1rem;
  /* margin-bottom: 8px; */
  color: #555;
}

/* Review Form Styling */
.review-form {
  margin-top: 20px;
}

textarea {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: none;
}

.star-rating {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.star-rating label {
  font-size: 1.5rem;
  cursor: pointer;
  color: #f39c12;
}

.star-rating input[type="radio"] {
  display: none;
}

.submit-review {
  margin-top: 15px;
  padding: 12px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-review:hover {
  background-color: #218838;
}

/* Responsive Design */
@media (max-width: 768px) {
  .tabs {
    justify-content: center;
    /* Center the buttons */
  }

  .tab-button {
    flex: 0 1 calc(33.333% - 10px);
    /* 3 buttons per row with gap */
  }
}

@media (max-width: 576px) {
  .tab-button {
    flex: 0 1 calc(50% - 10px);
    /* 2 buttons per row with gap */
  }
}

@media (max-width: 400px) {
  .tab-button {
    flex: 0 1 100%;
    /* 1 button per row */
  }
}

/* Styling for review section */
.review-form {
  margin-top: 20px;
}

textarea {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: none;
}

.star-rating {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.star-rating label {
  font-size: 1.5rem;
  cursor: pointer;
  color: #f39c12;
}

.star-rating input[type="radio"] {
  display: none;
}

.submit-review {
  margin-top: 15px;
  padding: 12px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-review:hover {
  background-color: #218838;
}

/* Styling for displaying reviews */
#reviews-container {
  margin-top: 30px;
}

.review-item {
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.review-stars {
  font-size: 1.2rem;
  color: #f39c12;
}

.review-text {
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
  margin-top: 10px;
}

.review-author {
  font-size: 0.9rem;
  color: #555;
  margin-top: 10px;
}

#review-panel {
  max-width: 1000px;
  margin: 0 auto;
  /* display: flex;  */
  /* flex-direction: row; */
  align-items: center;
}

/* Responsive Design */
@media (max-width: 767px) {
  .star-rating label {
    font-size: 1.2rem;
  }
}

/* Responsive Design */
@media (min-width: 991px) {
  .product-slider {
    width: 50%;
  }

  .product_details {
    width: 50%;
  }

  .product-details {
    flex-direction: row;
  }

  .product-name {
    display: none;
  }

  .product-name1 {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
  }

  .rating-container {
    padding-top: 15px;
  }

  .pricing-container {
    padding-top: 15px;
  }

  .tax-included {
    padding-top: 15px;
  }

  .quantity-container {
    padding-top: 15px;
  }

  .buttons-container {
    padding-top: 15px;
  }
}

@media (max-width: 767px) {
  .product-name1 {
    display: none;
  }
}

@media (min-width: 1200px) {
  /* .product-details {
  margin: 0 auto; 
  display: flex; 
  flex-direction: row;
  align-items: center; 
} */
}

#reviewformbtn {
  background-color: rgb(0, 204, 255);
  /* Green for Add to Cart */
  color: white;
}

.container-fluid {
  position: relative;
  /* Make this container the positioning context */
  padding: 20px;
}

.scroll-button {
  position: absolute;
  /* Position relative to the parent container */
  top: 50%;
  /* Vertically center within the parent container */
  transform: translateY(-50%);
  /* Adjust for exact centering */
  z-index: 10;
  /* Ensure buttons appear above content */
  background-color: rgba(0, 0, 0, 0.5);
  /* Optional: Semi-transparent background */
  color: white;
  /* Button text color */
  border: none;
  /* No border */
  border-radius: 50%;
  /* Optional: Rounded buttons */
  padding: 10px;
  cursor: pointer;
}

.scroll-button.left {
  left: 10px;
  /* Adjust position on the left side */
}

.scroll-button.right {
  right: 10px;
  /* Adjust position on the right side */
}

#scrollContainer {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* For smooth scrolling */
  padding-bottom: 10px;
  /* Avoid hiding content due to scrollbars */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Base styles (for small screens, e.g., mobile) */
.zoom-container {
  display: flex;
  flex-direction: column;
  /* Stack containers vertically */
  gap: 10px;
  /* Reduced gap for small screens */
}

.main-image-container {
  width: 100%;
  /* Full width on mobile */
  /* border: 1px solid #ddd; */
  cursor: crosshair;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zoomed-image-container {
  width: 100%;
  /* Full width for zoomed container */
  height: 300px;
  /* Match the main image height */
  /* border: 2px solid #ccc; */
  display: none;
  /* Hidden by default */
  background-repeat: no-repeat;
  background-size: 900px 900px;
  /* Adjust zoom level for smaller screens */
  z-index: 999;
}

/* Tablet screens (min-width: 600px) */
@media (min-width: 600px) {
  .zoom-container {
    gap: 15px;
    /* Increase gap slightly */
  }

  .main-image-container,
  .zoomed-image-container {
    height: 500px;
    /* Increase height for tablets */
  }

  .zoomed-image-container {
    background-size: 1000px 1000px;
    /* Adjust zoom level for better resolution */
  }
}

/* Desktop screens (min-width: 1024px) */
@media (min-width: 1024px) {
  .main-image-container {
    width: 400px;
    /* Fixed width for desktop */
    height: 400px;
    /* Fixed height for desktop */
  }

  .zoomed-image-container {
    width: 400px;
    /* Match main image dimensions */
    height: 400px;
    background-size: 1200px 1200px;
    /* Higher zoom for desktops */
  }

  .zoom-container {
    gap: 20px;
    /* Wider gap for desktops */
    flex-direction: row;
    /* Stack containers vertically */
  }
}

/* Desktop screens (min-width: 1024px) */
@media (min-width: 1500px) {
  .main-image-container {
    width: 500px;
    /* Fixed width for desktop */
    height: 500px;
    /* Fixed height for desktop */
  }

  .zoomed-image-container {
    width: 500px;
    /* Match main image dimensions */
    height: 500px;
    background-size: 1200px 1200px;
    /* Higher zoom for desktops */
  }

  .zoom-container {
    gap: 20px;
    /* Wider gap for desktops */
    flex-direction: row;
    /* Stack containers vertically */
  }
}

.required {
  color: red;
  margin-left: 5px;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

textarea.form-control {
  height: auto;
}

textarea {
  overflow: auto;
  resize: vertical;
}

select {
  word-wrap: normal;
}

.border-secondary {
  border-color: #edf1ff !important;
}

.text-white {
  color: #fff !important;
}

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: var(--bg-color);
  background-color: var(--bg-color);
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: none;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #f8f0ef;
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: white;
  border-color: white;
}

.custom-control-input[disabled]~.custom-control-label,
.custom-control-input:disabled~.custom-control-label {
  color: #6c757d;
}

.custom-control-input[disabled]~.custom-control-label::before,
.custom-control-input:disabled~.custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
  border-color: var(--bg-color);
  background-color: var(--bg-color);
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(209, 156, 151, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
  background-color: rgba(209, 156, 151, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(209, 156, 151, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition:
    transform 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(209, 156, 151, 0.5);
}

.card-footer {
  padding: 0.25rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

@media (max-width: 767px) {
  .cod {
    font-size: 25px;
  }

  .proceed_payment {
    width: auto;
  }

  #coupon_apply,
  #coupon_remove {
    width: auto;
  }

  #coupon_input {
    flex-direction: row;
  }

  #couponcode {
    width: 60%;
  }
}

@media (min-width: 768px) {
  .cod {
    font-size: 50px;
  }

  #coupon_input {
    flex-direction: row;
  }

  #couponcode {
    width: 60%;
  }
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.border-0 {
  border: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

.h-100 {
  height: 100% !important;
}

.justify-content-center {
  justify-content: center !important;
}

.position-absolute {
  position: absolute !important;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

@media screen and (max-width: 767px) {
  #closeFilterSidebar {
    font-size: 30px;
    /* Adjust size of the cross symbol */
    background: transparent;
    /* No background */
    border: none;
    /* No border */
    color: black;
    /* White color for the cross */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    position: absolute;
    top: 10px;
    right: 20px;
    display: block;
  }

  /* Hover effect for close button */
  #closeFilterSidebar:hover {
    color: #ff0000;
    /* Red color on hover */
  }

  .nav-link-wrapper {
    display: flex;
    /* Use flexbox for horizontal alignment */
    align-items: center;
    /* Vertically align items in the same row */
    gap: 100px;
    /* Add space between the link and the arrow */
  }
}

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

  .nav-link-wrapper {
    display: flex;
    /* Use flexbox for horizontal alignment */
    align-items: center;
    /* Vertically align items in the same row */
    gap: 0px;
    /* Add space between the link and the arrow */
  }
}

.nav-link {
  flex: 1;
  /* Ensure the link takes up remaining space if needed */
  text-decoration: none;
  /* Remove underline from the link */
  color: inherit;
  /* Inherit text color */
}

.down-arrow-wrapper {
  display: flex;
  /* Ensure the arrow remains inline */
  align-items: center;
  cursor: pointer;
  /* Add a pointer cursor for the arrow */
}

#viewmoredropbtn {
  /* theme colour on a light menu; the readable (white) menu text on a dark one */
  color: var(--cat-nav-text, var(--bg-color)) !important;
}

.warning-message {
  display: none;
  /* Hidden by default */
  background-color: #ffe4e1;
  /* Light red background for warning */
  color: #d9534f;
  /* Strong red text for warning */
  border: 1px solid #d9534f;
  /* Border to match text color */
  border-radius: 5px;
  /* Rounded corners */
  padding: 10px;
  /* Add spacing inside the box */
  margin: 10px 0;
  /* Add some space around the warning */
  font-weight: bold;
  /* Emphasize text */
  text-align: center;
  /* Center the message */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Subtle shadow for depth */
}

body {
  margin: 0;
  font-family: var(--font-family, Arial, sans-serif);
  position: relative;
}

.share-container {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  margin-left: 15px;
  z-index: 1000;
  vertical-align: middle;
}

.share-button {
  /* background-color: #007bff; */
  color: white;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.share-button:hover {
  /* background-color: #0056b3; */
}

.icon {
  width: 24px;
  height: 24px;
}

.social-icons {
  display: none;
  /* Hidden by default, toggled to flex by JS */
  flex-direction: row;
  /* Align images horizontally */
  gap: 12px;
  /* Space between the images */
  white-space: nowrap;
  align-items: center;
}

.social-icons a {
  display: inline-block;
  /* Ensure the links wrap around the images */
}

.social-icons img {
  width: 20px;
  /* Adjust the size of the images */
  height: 20px;
  border-radius: 50%;
  /* Make the images circular (if needed) */
  transition: transform 0.3s ease;
  /* Add a hover effect */
}

.social-icons img:hover {
  transform: scale(1.1);
  /* Slight zoom effect on hover */
}

#codfee {
  display: none !important;
}

.pincode-input-container {
  /* margin: 20px auto; */
  max-width: 350px;
  font-family: Arial, sans-serif;
}

#loader {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Checkout Wizard Styles */
.checkout-wizard {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
}

.stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  position: relative;
}

.stepper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e9ecef;
  z-index: 1;
  transform: translateY(-50%);
}

.step-indicator {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 0 10px;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
  text-align: center;
}

.step-indicator.active {
  color: #007bff;
}

.step-indicator .circle {
  width: 30px;
  height: 30px;
  background: #e9ecef;
  color: #6c757d;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.step-indicator.active .circle {
  background: #007bff;
  color: #fff;
}

.step-content {
  display: none;
  animation: fadeIn 0.5s;
}

.step-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.btn-nav {
  min-width: 120px;
}

/* Checkout Summary Styles - Premium Design */
.summary-item {
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.summary-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.summary-product-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.summary-product-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: #2c3e50;
  line-height: 1.4;
}

.summary-price {
  font-weight: 700;
  color: #007bff;
  font-size: 1.2rem;
}

.summary-divider {
  border-top: 1px dashed #ced4da;
  margin: 25px 0;
}

.summary-total-box {
  background: #f8f9fa;
  color: #333;
  padding: 15px 20px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.summary-total-box h5 {
  color: #555;
}

.summary-total-box h4 {
  color: #333 !important;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Force order summary rows to be side-by-side (label left, value right) */
#discount_product .d-flex.justify-content-between {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

/* Checkout Step Title Styling */
.checkout-step-title {
  text-align: center;
  font-weight: 700;
  color: #333;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 15px;
}

.checkout-step-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #007bff;
  border-radius: 2px;
}

/* Responsive Styles for Checkout Wizard */
@media (max-width: 768px) {
  .checkout-wizard {
    padding: 15px;
    margin-top: 15px;
  }

  .stepper {
    font-size: 0.8rem;
  }

  .step-indicator {
    padding: 0 5px;
  }

  .step-indicator .circle {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .summary-item {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .summary-product-img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .summary-price {
    margin-top: 10px;
    align-self: flex-end;
  }

  .payment-option-card {
    width: 45% !important;
    /* 2 columns on mobile */
    margin: 5px !important;
  }

  .btn-nav {
    width: 100%;
    margin-bottom: 10px;
  }

  /* Reverse button order on mobile for better UX (Next on top) */
  .d-flex.justify-content-between {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .d-flex.justify-content-between>button {
    width: 100%;
  }
}

/* ============================================
   ORDER SUCCESSFUL PAGE STYLES
   ============================================ */

.success-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 40px;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.success-icon-container {
  width: 80px;
  height: 80px;
  background: #28a745;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
  animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.success-icon {
  color: #fff;
  font-size: 40px;
}

.order-title {
  color: #2c3e50;
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 28px;
}

.order-subtitle {
  color: #7f8c8d;
  margin-bottom: 30px;
  font-size: 16px;
}

.order-details-box {
  background: #f1f3f5;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  text-align: left;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 1px dashed #d1d8dd;
  padding-bottom: 15px;
}

.detail-row:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.detail-label {
  color: #6c757d;
  font-weight: 500;
}

.detail-value {
  color: #2c3e50;
  font-weight: 700;
  word-break: break-all;
}

.btn-shop {
  background: linear-gradient(45deg, #007bff, #0056b3);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  transition: transform 0.2s;
}

.btn-shop:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  color: white;
}

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

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

/* ============================================
   CHECKOUT PAGE STYLES
   ============================================ */

.checkout-sticky-sidebar {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 90px;
  /* Adjust based on header height */
  z-index: 95;
}

/* Ensure container has overflow visible for sticky to work if needed, 
   but be careful not to break other layouts. 
   Bootstrap's row/col usually handle this fine unless parent has overflow:hidden.
*/

@media (max-width: 991px) {
  .checkout-sticky-sidebar {
    position: static;
    margin-top: 30px;
  }
}

/* Hide COD fee by default - show when COD payment is selected */
#codfee {
  display: none !important;
}

/* Checkout form group styling improvements */
.checkout-step-title {
  text-align: left;
}

.checkout-step-title::after {
  left: 0;
  transform: none;
}

/* ---- Column Alignment Fix ---- */
/* Ensure both columns start at the same top position */
#checkoutForm>.row {
  align-items: flex-start;
}

/* ---- Payment Method Cards Fix ---- */
/* Force the payment cards wrapper to be flex so cards sit side-by-side */
.d-flex.flex-wrap.justify-content-center:has(.payment-option-card) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px;
}

.payment-option-card {
  width: auto !important;
  min-width: 100px !important;
  max-width: calc(50% - 12px);
  height: auto !important;
  min-height: 80px;
  flex: 1 1 calc(50% - 12px);
  padding: 12px 10px !important;
  border-radius: 10px !important;
  border: 2px solid #e9ecef !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  cursor: pointer;
  margin: 4px !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.payment-option-card:hover {
  border-color: #007bff !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15) !important;
}

/* Highlight selected payment card */
.payment-option-card:has(input:checked) {
  border-color: #007bff !important;
  background-color: #f0f7ff !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}

.payment-option-card label {
  cursor: pointer;
}

.payment-option-card .gateway-icon {
  width: 60% !important;
  height: 40px !important;
  object-fit: contain;
}

/* Coupon input + Apply button alignment */
.input-group .btn {
  display: flex;
  align-items: center;
}

/* Payment Total Display */
.payment-total-display {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  border: 2px dashed #007bff;
}

.payment-total-display h3 {
  font-size: 1.75rem;
}

/* =========================================
   Premium Cart UI Styles
   ========================================= */

/* Cart Item Card */
.cart-item-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* Soft premium shadow */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
}

.cart-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.cart-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Image Section */
.cart-item-image {
  flex: 0 0 100px;
  margin-right: 20px;
  position: relative;
}

.cart-item-image img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  /* OR cover depending on preference, contain is safer for products */
  border-radius: 8px;
  background-color: #f8f9fa;
  /* Light grey bg for transparent images */
  padding: 5px;
}

/* Details Section */
.cart-item-details {
  flex: 1;
  min-width: 200px;
  /* Ensure it doesn't squish too much */
  padding-right: 15px;
}

.cart-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
  display: block;
  text-decoration: none;
  transition: color 0.2s;
}

.cart-item-title:hover {
  color: var(--primary);
  /* Use primary color from variables */
}

.cart-item-meta {
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 3px;
  line-height: 1.4;
}

.cart-item-meta span {
  font-weight: 500;
  color: #555;
}

/* Actions Section (Quantity & Price) */
.cart-item-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  /* Space between quantity and price */
  justify-content: flex-end;
}

/* Quantity Controls */
.quantity-container-modern {
  display: inline-flex;
  align-items: center;
  background: #f1f3f5;
  border-radius: 30px;
  /* Pill shape */
  padding: 5px;
}

.quantity-btn-modern {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.quantity-btn-modern:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.1);
}

.quantity-input-modern {
  width: 45px;
  background: transparent;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: #333;
  -moz-appearance: textfield;
  appearance: textfield;
  /* Remove arrows Firefox */
}

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

.price-current {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
}

.price-unit {
  display: block;
  font-size: 0.75rem;
  color: #95a5a6;
  margin-top: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cart-item-row {
    align-items: flex-start;
  }

  .cart-item-image {
    flex: 0 0 80px;
    margin-right: 15px;
  }

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

  .cart-item-actions {
    width: 100%;
    margin-top: 15px;
    justify-content: space-between;
    /* Spread quantity and price */
  }

  .cart-item-price {
    text-align: right;
  }
}

/* Small Mobile Screens */
@media (max-width: 576px) {
  .cart-item-card {
    padding: 15px;
  }

  .cart-item-image {
    flex: 0 0 70px;
    margin-right: 12px;
  }

  .cart-item-image img {
    width: 70px;
    height: 70px;
  }

  .cart-item-title {
    font-size: 1rem;
    padding-right: 20px;
    /* Space for remove button */
  }

  .cart-item-actions {
    margin-top: 12px;
  }

  .quantity-btn-modern {
    width: 36px;
    /* Larger touch target */
    height: 36px;
  }

  .quantity-input-modern {
    font-size: 1.1rem;
  }

  /* Fix for Summary Overlap */
  .summary h6,
  .summary small {
    font-size: 0.9rem;
    /* Smaller font */
  }

  .d-flex.justify-content-between.mb-3 {
    margin-bottom: 0.5rem !important;
    /* Reduce gap */
  }

  .input-group-append button {
    padding: 5px 10px;
    font-size: 0.85rem;
  }
}

/* ============================================================
   MODERN HEADER STYLES (Cashify-Style)
   ============================================================ */

/* Main Header Container */
.site-header {
  background: var(--header-background);
  box-shadow: 0 2px 8px var(--header-shadow);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo Section */
.site-header__logo {
  flex: 0 0 auto;
}

.site-header__logo img {
  height: 35px;
  max-width: 160px;
  transition: opacity var(--header-transition-speed) ease;
}

.site-header__logo img:hover {
  opacity: 0.85;
}

/* Search Bar Container */
.site-header__search {
  flex: 1;
  max-width: var(--header-search-max-width);
  margin: 0 30px;
  position: relative;
}

/* Search Input Wrapper */
.search-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--header-background);
  border: 1px solid var(--header-border-light);
  border-radius: 8px;
  padding: 10px 16px;
  transition: all var(--header-transition-speed) ease;
}

.search-input-wrapper:focus-within {
  border-color: var(--header-primary);
  box-shadow: 0 0 0 3px rgba(72, 196, 121, 0.1);
}

.search-input-wrapper i {
  color: var(--header-text-muted);
  font-size: 16px;
  margin-right: 12px;
}

.search-input-wrapper input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  color: var(--header-text-dark);
  background: transparent;
  width: 100%;
}

.search-input-wrapper input::placeholder {
  color: var(--header-text-muted);
}

/* Search Suggestions Dropdown */
.site-header__search .suggestions-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--header-background);
  border: 1px solid var(--header-border-light);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 2001;
  box-shadow: 0 8px 16px var(--header-shadow);
}

.site-header__search .suggestions-container div {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--header-text-dark);
  border-bottom: 1px solid var(--header-border-subtle);
}

.site-header__search .suggestions-container div:last-child {
  border-bottom: none;
}

.site-header__search .suggestions-container div:hover {
  background: #f8f9fa;
  color: var(--header-primary);
}

/* Right Section - Icons & Actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Header Icon Links */
.header-action-icon {
  color: var(--header-text-dark);
  font-size: var(--header-icon-size);
  cursor: pointer;
  transition: all var(--header-transition-speed) ease;
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-action-icon:hover {
  color: var(--header-primary);
  transform: scale(1.1);
  text-decoration: none;
}

/* Badge for Cart/Wishlist Count */
.header-action-icon .count-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--header-badge-bg);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}

/* Primary Action Button (Login/Logout) */
.header-action-btn {
  background: var(--header-primary);
  color: white !important;
  border: none;
  border-radius: 20px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--header-transition-speed) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header-action-btn:hover {
  background: var(--header-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--header-shadow-hover);
  text-decoration: none;
  color: white !important;
}

/* Navigation Bar Below Header */
.site-navbar {
  background: var(--header-background);
  border-top: 1px solid var(--header-border-subtle);
  padding: 0 20px;
}

.site-navbar .nav-link {
  color: var(--header-text-dark) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 14px 16px !important;
  transition: color var(--header-transition-speed) ease;
}

.site-navbar .nav-link:hover {
  color: var(--header-primary) !important;
}

.site-navbar .dropdown-content {
  background: var(--header-background);
  border: 1px solid var(--header-border-light);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  top: 100%;
  min-width: fit-content;
  white-space: nowrap;
}

.site-navbar .dropdown-content a {
  color: var(--header-text-dark);
  padding: 10px 16px;
  font-size: 14px;
}

.site-navbar .dropdown-content a:hover {
  background: #f8f9fa;
  color: var(--header-primary);
}

/* Mobile Bottom Icons Bar */
.mobile-bottom-bar {
  background: var(--header-background) !important;
  box-shadow: 0 -2px 8px var(--header-shadow);
  background-image: none !important;
}

.mobile-bottom-bar .header-action-icon {
  color: var(--header-text-dark);
  font-size: 20px;
}

.mobile-bottom-bar .header-action-icon:hover {
  color: var(--header-primary);
}

/* Header Bar Override */
.header-bar {
  background: var(--header-background) !important;
  background-image: none !important;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .site-header__search {
    display: none;
  }

  .site-header {
    padding: 10px 15px;
  }

  .site-header__actions {
    gap: 15px;
  }

  .header-action-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* Legacy Class Support - Maps old classes to new styles */
.cashify-header {
  background: var(--header-background);
  box-shadow: 0 2px 8px var(--header-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2000;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Header heights depending on logo orientation on desktop */
@media (min-width: 769px) {
  .cashify-header.header-logo-landscape {
    height: 70px;
    padding: 0 20px;
  }
  .cashify-header.header-logo-square {
    height: 95px; /* keep the navbar height at the max */
    padding: 0 20px;
  }
  .cashify-header.header-logo-favicon {
    height: 70px;
    padding: 0 20px;
  }
}

.cashify-header .logo-section {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px; /* Equalized spacing on the side of the logo */
  margin: 0;
  box-sizing: border-box;
}

.cashify-header .logo-section a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cashify-header .logo-section img {
  height: 80px;
  width: auto;
  transition: transform 0.3s ease;
  object-fit: contain;
}

.cashify-header .logo-section img.logo-landscape {
  max-height: 75px; /* Shorter for reduced header height */
  max-width: 180px;
}

.cashify-header .logo-section img.logo-square {
  max-height: 80px; /* Max height for square */
  max-width: 80px;
}

.cashify-header .logo-section img.logo-favicon {
  max-height: 40px;
  max-width: 40px;
}

.cashify-header .logo-section img:hover {
  transform: scale(1.05);
}

.cashify-search-wrapper {
  flex: 1;
  max-width: var(--header-search-max-width);
  margin: 0 30px;
  position: relative;
}

.cashify-search {
  display: flex;
  align-items: center;
  background: var(--header-background);
  border: 1px solid #206db4;
  border-radius: 8px;
  padding: 10px 16px;
  transition: all var(--header-transition-speed) ease;
}

.cashify-search:focus-within {
  border-color: var(--header-primary);
  box-shadow: 0 0 0 3px rgba(72, 196, 121, 0.1);
}

/* When suggestions are visible, remove bottom border radius */
.cashify-search-wrapper.has-suggestions .cashify-search {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.cashify-search i {
  color: var(--header-text-muted);
  font-size: 16px;
  margin-right: 12px;
}

.cashify-search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  color: var(--header-text-dark);
  background: transparent;
  width: 100%;
}

.cashify-search input::placeholder {
  color: var(--header-text-muted);
}

/* Fix suggestions container position for cashify search */
.cashify-search-wrapper .suggestions-container {
  position: absolute;
  top: 100%;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: var(--header-background);
  border: 1px solid var(--header-border-light);
  border-top: 1px solid #eee;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 2001;
  box-shadow: 0 8px 16px var(--header-shadow);
}

.cashify-search-wrapper .suggestions-container div {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--header-text-dark);
  border-bottom: 1px solid var(--header-border-subtle, #f5f5f5);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cashify-search-wrapper .suggestions-container div:last-child {
  border-bottom: none;
}

.cashify-search-wrapper .suggestions-container div:hover {
  background: #f8f9fa;
  color: var(--header-primary);
}

.cashify-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: 24px;
}

.cashify-icon {
  color: var(--header-text-dark);
  font-size: var(--header-icon-size);
  cursor: pointer;
  transition: all var(--header-transition-speed) ease;
  position: relative;
  text-decoration: none;
}

.cashify-icon:hover {
  color: var(--header-primary);
}

.cashify-icon .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--header-badge-bg);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
}

/* Dynamic Branding Custom Icons (Desktop) */
.header-custom-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.cashify-icon:hover .header-custom-icon,
.cashify-login-btn:hover .header-custom-icon {
  transform: scale(1.15);
  filter: brightness(1.1);
}

/* Dynamic Branding Custom Icons (Mobile Bottom Bar) */
.header-custom-icon-mobile {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.header-icon-link:hover .header-custom-icon-mobile {
  transform: scale(1.1);
}

.cashify-login-btn {
  background: #ef8b33;
  color: white !important;
  border: none;
  border-radius: 20px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--header-transition-speed) ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cashify-login-btn:hover {
  background: #dc6f10;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--header-shadow-hover);
  text-decoration: none;
  color: white !important;
}

/* Mobile Bottom Icons */
.bottom-icons {
  background: var(--header-background) !important;
  box-shadow: 0 -2px 8px var(--header-shadow);
  background-image: none !important;
}

.bottom-icons .header-icon {
  color: var(--header-text-dark);
  font-size: 20px;
}

.bottom-icons .header-icon:hover {
  color: var(--header-primary);
}

/* Legacy header icon classes */
.header-icon {
  color: var(--header-text-dark);
  font-size: var(--header-icon-size);
  transition: all var(--header-transition-speed) ease;
  cursor: pointer;
}

.header-icon:hover {
  color: var(--header-primary);
  transform: scale(1.1);
}

.header-icon-link {
  position: relative;
  text-decoration: none;
}

.header-icon-link .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--header-badge-bg);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
}

/* Responsive hide for search wrapper */
@media (max-width: 768px) {
  .cashify-header {
    padding: 10px 15px;
    flex-wrap: wrap; /* Enable wrapping for two-row header layout */
  }

  .cashify-header .logo-section {
    order: 1;
    flex: 0 0 auto;
    padding: 0;
    margin-right: auto; /* Push hamburger to the opposite corner */
  }

  .cashify-header .logo-section img {
    margin-left: 0;
  }

  .cashify-header .logo-section img.logo-landscape {
    max-height: 50px;
    max-width: 150px;
  }

  .cashify-header .logo-section img.logo-square {
    max-height: 55px;
    max-width: 55px;
  }

  .cashify-header .logo-section img.logo-favicon {
    max-height: 32px;
    max-width: 32px;
  }

  /* Navbar Toggler (Hamburger) - Order 2 (Far right side) */
  .cashify-header .navbar-toggler {
    order: 2;
    display: block !important;
    margin-left: auto;
    margin-right: 0;
    padding: 8px;
    border: none;
    background: transparent;
  }

  /* Hide right desktop icon wrapper completely on mobile to clean up top row space */
  .cashify-right {
    display: none !important;
  }

  /* Search bar is positioned down (takes full width of second row) */
  .cashify-search-wrapper {
    order: 3;
    display: block !important;
    position: relative;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-basis: 100%;
  }

  .cashify-search-wrapper.mobile-active {
    display: block !important;
    animation: slideDown 0.3s ease-out;
  }

  .mobile-search-trigger {
    display: none !important;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (min-width: 769px) {
  .mobile-search-trigger {
    display: none !important;
  }
}

.sticky-header {
  position: sticky;
  top: 0;
  /* Must stay above .category-navbar (z-index: 1000) so header overlays like
     the search-suggestions dropdown aren't covered by the nav row below it. */
  z-index: 1010;
}

/* ============================================================
   CATEGORY NAVIGATION - ECOMMERCE STYLE
   ============================================================ */

/* Category Navigation Bar */
.category-navbar {
  background: var(--header-background);
  border-top: 1px solid var(--header-border-subtle, #f0f0f0);
  border-bottom: 1px solid var(--header-border-subtle, #f0f0f0);
  padding: 0;
  position: relative;
  z-index: 999;
  overflow: visible;
}

/* Redundant category styles removed to resolve conflicts and allow dropdowns to open correctly. */


.image-caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
}

/* Utility class to hide elements on mobile only */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Utility classes for display control */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
}

/* Ensure navbar toggler icon has dimensions if bootstrap is missing */
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

/* Hide dropdown arrow on mobile as per user request */
@media (max-width: 768px) {

  .down-arrow-wrapper,
  .mobile-arrow,
  .arrow {
    display: none !important;
  }
}

@media (max-width: 768px) {

  /* Card container padding on mobile as per user request */
  .card-container {
    padding: 5px !important;
  }
}

/* ============================================================
   CART NOTIFICATION
   ============================================================ */
.cart-notif {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  min-width: 320px;
  max-width: 450px;
  transition: top 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  pointer-events: none;
}

.cart-notif.show {
  top: 20px;
  pointer-events: auto;
}

.cart-notif-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

/* SUCCESS MODE (Default) */
.cart-notif.notif-success .cart-notif-inner {
  border-left: 4px solid #22c55e;
}

.cart-notif.notif-success .cart-notif-icon {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.cart-notif.notif-success .cart-notif-progress {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* DANGER MODE (Removals) */
.cart-notif.notif-danger .cart-notif-inner {
  border-left: 4px solid #fe0000;
}

.cart-notif.notif-danger .cart-notif-icon {
  background: linear-gradient(135deg, #fe0000, #dc0000);
}

.cart-notif.notif-danger .cart-notif-progress {
  background: linear-gradient(90deg, #fe0000, #dc0000);
}

.cart-notif-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cartNotifPop 0.4s ease 0.3s both;
}

@keyframes cartNotifPop {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.2);
  }

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

.cart-notif-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cart-notif-title {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}

.cart-notif-product {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-notif-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #aaa;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.cart-notif-close:hover {
  color: #333;
}

.cart-notif-progress {
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 0 0 12px 12px;
  margin: 0 2px;
  width: 100%;
  transform-origin: left;
  animation: none;
}

.cart-notif.show .cart-notif-progress {
  animation: cartNotifShrink 2s linear forwards;
}

@keyframes cartNotifShrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* ============================================================
   PREMIUM SWEETALERT2 STYLES
   ============================================================ */
.swal-premium-popup {
  border-radius: 20px !important;
  padding: 2rem !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.swal-premium-toast {
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border-left: 5px solid #fe0000 !important;
  padding: 12px 18px !important;
  min-width: 320px !important;
}

.swal2-container.swal2-top.swal2-backdrop-hide {
  padding-top: 10px !important;
}

.swal2-popup.swal2-toast .swal2-title {
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 5px !important;
}

.swal2-popup.swal2-toast .swal2-icon {
  margin-right: 10px !important;
}

.swal-premium-toast-success {
  border-left-color: #22c55e !important;
}

.swal-premium-toast-error {
  border-left-color: #fe0000 !important;
}

.swal2-title {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.swal2-html-container {
  color: #666 !important;
  font-size: 15px !important;
}

.swal2-confirm.swal-premium-button {
  background-color: #fe0000 !important;
  border-radius: 10px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(254, 0, 0, 0.2) !important;
}

.swal2-cancel.swal-premium-button-cancel {
  border-radius: 10px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
}

.swal2-timer-progress-bar {
  background: #fe0000 !important;
}

/* Category Navigation Bar (Added from style230226.css) */
.category-navbar {
  background: var(--header-background);
  border-top: 1px solid var(--header-border-subtle, #f0f0f0);
  border-bottom: 1px solid var(--header-border-subtle, #f0f0f0);
  padding: 0;
}

.category-navbar .navbar {
  background: transparent !important;
  padding: 0;
  margin: 0;
}

.category-navbar .navbar-nav,
.category-navbar .menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: inherit; /* controlled by inline style from admin setting */
  overflow: visible !important;
}

/* Admin-configurable alignment utility — added to support right/left/center */
.category-navbar .menu.justify-content-end   { justify-content: flex-end !important; }
.category-navbar .menu.justify-content-start { justify-content: flex-start !important; }
.category-navbar .menu.justify-content-center{ justify-content: center !important; }

.category-navbar .dropdown,
.category-navbar .category-item {
  position: relative;
}

.category-navbar .nav-item {
  position: relative;
}

.category-navbar .nav-link,
.category-navbar .nav-link-wrapper a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  color: var(--header-text-dark) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.category-navbar .nav-link:hover,
.category-navbar .nav-link-wrapper a:hover {
  color: #EF8B33 !important;
  background: rgba(239, 139, 51, 0.05);
}

/* Top-level category links follow the menu background: --cat-nav-text is set
   (white) by head.php when the configured menu colour is dark, and is simply
   undefined for light backgrounds, so those keep the original dark text.
   Targets only the top-level links (a.nav-link.dropbtn) — dropdown/sub-menu
   links sit on their own light panel and keep their dark text. */
.category-navbar a.nav-link.dropbtn {
  color: var(--cat-nav-text, var(--header-text-dark)) !important;
}
.category-navbar a.nav-link.dropbtn:hover {
  color: var(--cat-nav-hover, #EF8B33) !important;
}

.category-navbar .dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  width: max-content;
  background: var(--header-background);
  border: 1px solid var(--header-border-light);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 1000;
  padding: 8px 0;
}

.category-navbar .dropdown:hover .dropdown-content,
.category-navbar .dropdown-content.visible {
  display: block !important;
}

.category-navbar .dropdown-content a {
  display: block;
  padding: 14px 20px;
  color: var(--header-text-dark);
  font-size: 14px;
  text-decoration: none;
  transition: none;
  white-space: nowrap;
}

.category-navbar .dropdown-content a:hover {
  background: rgba(239, 139, 51, 0.08);
  color: #EF8B33;
}

.category-navbar .menulist,
.category-navbar .subcategory-item {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible !important;
}

.category-navbar .subcategory-item {
  position: relative;
}

.category-navbar .subcategory-item>.nav-link-wrapper>a,
.category-navbar .sub-subcategory-container a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 160px;
  width: 100%;
  padding: 14px 20px !important;
  color: var(--header-text-dark) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.category-navbar .subcategory-item>.nav-link-wrapper>a:hover,
.category-navbar .subcategory-item:hover>.nav-link-wrapper>a,
.category-navbar .sub-subcategory-container a:hover {
  background: rgba(239, 139, 51, 0.08) !important;
  color: #EF8B33 !important;
}

.category-navbar .sub-subcategory-container {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 160px;
  width: max-content;
  background: var(--header-background) !important;
  border: 1px solid var(--header-border-light);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 1001;
  padding: 8px 0;
  margin-left: -1px;
  white-space: nowrap;
}

.category-navbar .subcategory-item:hover .sub-subcategory-container {
  display: block !important;
}

.category-navbar .sub-subcategory-container a b,
.category-navbar .subcategory-item>.nav-link-wrapper>a b {
  font-weight: 700;
}

/* Reverse dropdown alignment for items near the right edge */
.category-navbar .dropdown.dropdown-reverse .dropdown-content {
  left: auto;
  right: 0;
}

.category-navbar .dropdown.dropdown-reverse .sub-subcategory-container {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: -1px;
  /* Slight overlap for better hover transition */
}

/* Flip the arrow for reverse dropdowns */
.category-navbar .dropdown.dropdown-reverse .submenu-arrow {
  transform: rotate(180deg);
}
/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS OVERHAUL
   Targets: Homepage, Header, Slider, Products, Footer, Categories
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Header ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Logo — smaller on mobile */
  .cashify-header .logo-section {
    padding: 0 8px 0 0;
  }
  .cashify-header .logo-section img {
    max-height: 44px !important;
    width: auto;
  }
  /* Search bar — full width below logo row */
  .cashify-search {
    border-radius: 10px;
    height: 40px;
  }
  .cashify-search input {
    font-size: 13px;
  }
  /* Hamburger better touch target */
  .cashify-header .navbar-toggler {
    padding: 10px 12px;
    margin-left: 8px;
  }
  /* Ensure bottom nav doesn't overlap content
     On product detail page, there's also a sticky-cta above it, so 130px total.
     For other pages, 68px is enough for just the bottom nav bar. */
  body {
    padding-bottom: 68px;
  }
}

/* ── 2. Announcement bar ────────────────────────────────────────── */
@media (max-width: 480px) {
  .announcement-bar {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ── 3. Hero Slider ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Full-width slider on mobile (no side offer banner) */
  #slider-col {
    padding-right: 0 !important;
  }
  .offer-banner-col {
    display: none !important; /* Hide side offer banners on mobile */
  }
  #slider1 .slide {
    min-height: 180px;
  }
  .unified-slider-img {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
  /* Slider caption — smaller text */
  .image-caption h4 {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .image-caption h3 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  .image-caption .btn {
    padding: 6px 16px !important;
    font-size: 12px !important;
  }
  /* Slider nav buttons */
  .slider-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
}

/* ── 4. Section Titles ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-title {
    font-size: 18px !important;
  }
  .section-title span {
    padding: 0 10px !important;
  }
  /* Section spacing */
  .container-fluid.pt-5 {
    padding-top: 24px !important;
  }
  .container-fluid.pt-5.mt-4 {
    margin-top: 0 !important;
  }
}

/* ── 5. Offer / Ad Banners (mid-page) ───────────────────────────── */
@media (max-width: 767px) {
  .offer {
    padding: 12px !important;
  }
  .offer img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    margin-bottom: 10px !important;
  }
  .offer .text-md-right,
  .offer .text-md-left {
    text-align: center !important;
  }
  /* Row with offer images — stack vertically */
  .offer .row > [class*="col-"] {
    margin-bottom: 12px;
  }
}

/* ── 6. Product Card Scroll Container ──────────────────────────── */
@media (max-width: 767px) {
  /* Horizontal scroll for product rows — 2 cards visible with scroll hint */
  #home_card_container,
  #sec1_card_container,
  #sec2_card_container,
  #sec3_card_container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    scrollbar-width: none;
  }
  #home_card_container::-webkit-scrollbar,
  #sec1_card_container::-webkit-scrollbar,
  #sec2_card_container::-webkit-scrollbar,
  #sec3_card_container::-webkit-scrollbar { display:none; }

  #home_card_container .cardprod,
  #sec1_card_container .cardprod,
  #sec2_card_container .cardprod,
  #sec3_card_container .cardprod {
    flex: 0 0 46% !important;
    min-width: 150px !important;
    max-width: 200px !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }
  /* View All button — full width */
  .container-fluid .btn-info {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px;
    text-align: center;
  }
}

/* ── 7. Category Nav ────────────────────────────────────────────── */
@media (max-width: 991px) {
  .category-navbar {
    display: none !important; /* Replaced by mobile drawer */
  }
}

/* ── 8. Bottom Navigation Bar ───────────────────────────────────── */
@media (max-width: 768px) {
  .bottom-icons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
  }
  .bottom-icons .icon,
  .bottom-icons .header-icon-link {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 11px;
    gap: 3px;
    padding: 4px 0 !important;
    text-decoration: none !important;
    color: #374151 !important;
  }
  .bottom-icons .header-icon,
  .bottom-icons .header-custom-icon-mobile {
    font-size: 20px;
    width: 22px;
    height: 22px;
  }
  .bottom-icons .badge {
    top: -4px !important;
    right: 6px !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
  }

  /* Clear the fixed bottom nav bar so the back-to-top button doesn't overlap it */
  #btn-back-to-top {
    bottom: 76px;
  }
}

/* ── 9. Trust / Stats Orange Bar (uniquefooter) ─────────────────── */
@media (max-width: 576px) {
  .icons-row {
    gap: 8px !important;
    padding: 0 10px !important;
  }
  .icon-item {
    flex: 0 0 calc(50% - 8px) !important;
    min-width: 140px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .stat-number {
    font-size: 14px !important;
  }
  .stat-label {
    font-size: 10px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  .icon-circle {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .icon-circle img {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ── 10. Main Footer ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-custom {
    padding-top: 28px !important;
    padding-bottom: 100px !important; /* space for fixed bottom nav */
  }
  /* Stack columns */
  .footer-custom .row > [class*="col-"] {
    margin-bottom: 24px;
  }
  .footer-brand-text {
    font-size: 18px !important;
  }
  /* Newsletter inputs full width */
  .footer-input {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ── 11. Product detail page ────────────────────────────────────── */
@media (max-width: 767px) {
  .detail-layout, .product-layout {
    flex-direction: column !important;
  }
  .detail-images {
    width: 100% !important;
  }
  .detail-info {
    width: 100% !important;
    padding: 16px !important;
  }
  .product-price {
    font-size: 22px !important;
  }
  .trust-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .trust-item p {
    font-size: 10px !important;
  }
  .policy-cards {
    flex-direction: column !important;
  }
  .policy-card {
    width: 100% !important;
    min-width: unset !important;
  }
  /* Sticky Add to Cart bar */
  .btn-cart {
    width: 100% !important;
  }
}

/* ── 12. Cart Page ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .cart-item {
    flex-wrap: wrap !important;
  }
  .cart-item-img {
    width: 80px !important;
    height: 80px !important;
  }
  .cart-item-details {
    width: calc(100% - 100px) !important;
  }
  .cart-summary {
    width: 100% !important;
    margin-top: 16px;
  }
}

/* ── 13. Checkout Page ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .co-grid {
    flex-direction: column !important;
  }
  .co-left, .co-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .co-right {
    order: -1; /* Show order summary first on mobile */
    margin-bottom: 16px;
  }
}

/* ── 14. General utility ────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Prevent horizontal scroll from overflowing sections */
  .container-fluid {
    overflow-x: hidden;
  }
  /* Fix Bootstrap row negative margins on mobile */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Padding adjustments */
  .px-4, .px-5 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Modal full-screen on mobile */
  .login-register-form .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .login-register-form .modal-content {
    border-radius: 0 !important;
    min-height: 100vh !important;
  }
}

/* ── 15. Your Orders page ───────────────────────────────────────── */
@media (max-width: 767px) {
  .order-card {
    padding: 12px !important;
  }
  .order-card-header {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .order-product-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .order-product-img {
    width: 70px !important;
    height: 70px !important;
  }
  .btn-modern {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}


/* ── 16. Product category listing ───────────────────────────────── */
@media (max-width: 767px) {
  /* Filter sidebar: hidden by default, shown via .active class from JS */
  .filter-sidebar:not(.active) {
    transform: translateX(-100%) !important;
    pointer-events: none;
  }
  /* Product gallery full width on mobile */
  #gallery {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPREHENSIVE FRONTEND RESPONSIVE AUDIT — ALL PAGES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cart Page ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cart-grid {
    grid-template-columns: 1fr !important;
  }
  .cart-summary-col { order: -1; }
  .cart-item-card {
    gap: 10px;
    padding: 12px;
  }
  .cart-item-img {
    width: 70px !important;
    height: 70px !important;
  }
  .cart-item-name { font-size: 13px; }
  .cart-item-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Coupon row in cart */
  .coupon-row {
    flex-direction: column !important;
    gap: 8px;
  }
  .coupon-input, .coupon-apply, .coupon-remove {
    width: 100% !important;
    border-radius: 8px !important;
  }
}

/* ── Checkout Page ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .co-grid {
    flex-direction: column !important;
    gap: 16px;
  }
  .co-left, .co-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Order summary first on mobile */
  .co-right { order: -1; }
  /* Step indicator */
  .co-steps { flex-wrap: wrap; gap: 6px; }
  /* Address form */
  .co-row { flex-direction: column !important; gap: 12px; }
  .co-row > .f-group { width: 100% !important; }
  /* Payment methods */
  .pay-method-options { flex-direction: column; gap: 8px; }
  /* Place Order button */
  #finalSubmitBtn {
    width: 100% !important;
    font-size: 15px;
    padding: 14px !important;
  }
}

/* ── Payment Page ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pay-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .pay-right { order: -1; }
  .pay-card {
    padding: 16px !important;
  }
  .pay-card input[type="text"],
  .pay-card input[type="email"],
  .pay-card input[type="number"] {
    width: 100% !important;
    box-sizing: border-box;
  }
  .info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Your Orders Page ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .order-history-page .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-title { font-size: 22px !important; }
  .order-tabs {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .order-tabs::-webkit-scrollbar { display: none; }
  .order-card {
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  .order-card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .header-info-item { font-size: 12px; }
  .product-row {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
  }
  .product-image {
    width: 80px !important;
    height: 80px !important;
  }
  .product-details { flex: 1; min-width: 0; }
  .order-actions {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .btn-modern {
    flex: 1;
    text-align: center;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  /* Progress timeline */
  .progress-steps {
    overflow-x: auto;
    padding-bottom: 8px;
  }
}

/* ── Wishlist Page ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wishlist-header {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .wishlist-header-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .wishlist-card {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px !important;
    align-items: flex-start;
  }
  .wl-img-wrap {
    width: 90px !important;
    height: 90px !important;
    flex-shrink: 0;
  }
  .wl-details { flex: 1; min-width: 0; }
  .wl-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── Return & Exchange Page ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .ret-grid, .exc-grid {
    grid-template-columns: 1fr !important;
  }
  .ret-card, .exc-card {
    padding: 14px !important;
  }
  .ret-actions, .exc-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ret-actions button,
  .exc-actions button {
    width: 100% !important;
  }
  /* Timeline */
  .timeline-step {
    font-size: 12px;
  }
}

/* ── Profile / User Profile Page ────────────────────────────────────── */
@media (max-width: 767px) {
  .profile-grid,
  .user-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .profile-sidebar {
    width: 100% !important;
    position: static !important;
  }
  .profile-avatar-wrap {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 12px;
  }
  .profile-form .row { margin: 0; }
  .profile-form .col-md-6 {
    padding: 0 !important;
    margin-bottom: 12px;
  }
}

/* ── User Address Page ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .address-grid {
    grid-template-columns: 1fr !important;
  }
  .address-card {
    padding: 14px !important;
  }
  .address-card-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ── User Dashboard Page ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .grid-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
    gap: 12px;
  }
  .gitem1 {
    width: 100% !important;
    border-radius: 10px !important;
  }
  .gitem2 {
    width: 100% !important;
  }
  /* Order list inside dashboard */
  .gitem2 .product-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ── Support Page ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .container.d-flex {
    padding: 16px !important;
    min-height: auto !important;
  }
  .ansh {
    width: 100% !important;
    padding: 0 !important;
  }
  .ansh .form-group { margin-bottom: 14px; }
  .ansh .form-control {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  .ansh .btn { width: 100% !important; }
}

/* ── Contact Page ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-wrapper {
    flex-direction: column !important;
    padding: 16px !important;
    gap: 24px;
  }
  .contact-header,
  .contact-form-container {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .contact-methods { padding: 0 !important; }
  .method-item {
    padding: 12px 0 !important;
    gap: 10px !important;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100% !important;
    font-size: 14px !important;
  }
  .contact-hero {
    padding: 16px !important;
    min-height: auto !important;
  }
}

/* ── Login & Security Page ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .loginandsecurity .container,
  #loginandsecurity-form {
    padding: 16px !important;
    max-width: 100% !important;
  }
  .btn-primary, .btn-otp {
    width: 100% !important;
    padding: 12px !important;
  }
  .form-control {
    font-size: 14px !important;
  }
}

/* ── Payment Success / Failure Pages ────────────────────────────────── */
@media (max-width: 600px) {
  .payment-success-wrap,
  .payment-failure-wrap {
    padding: 24px 16px !important;
    margin: 16px !important;
  }
  .success-icon, .failure-icon {
    font-size: 48px !important;
  }
  .order-details-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Search Results (your_orders search) ────────────────────────────── */
@media (max-width: 600px) {
  .search-wrapper {
    width: 100% !important;
  }
  #search-box {
    width: 100% !important;
    font-size: 14px !important;
  }
}

/* ── List / Offer Detail / Slider Detail Pages ──────────────────────── */
@media (max-width: 767px) {
  /* list.php — same as product_category but simpler */
  #list .row {
    flex-direction: column !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #list #gallery {
    width: 100% !important;
  }
  /* Offer detail */
  .offer-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Forgot Password Page ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .forgot-password-container {
    margin: 16px !important;
    padding: 24px 16px !important;
    border-radius: 10px !important;
  }
  .forgot-password-container .form-control {
    width: 100% !important;
    font-size: 14px !important;
  }
  .forgot-password-container .btn {
    width: 100% !important;
  }
}

/* ── Global Mobile Typography & Spacing ─────────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
  h4 { font-size: 15px !important; }
  h5 { font-size: 14px !important; }

  /* Smaller section padding */
  section, .section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Full-width buttons everywhere on smallest screens */
  .container > .btn,
  .container-fluid > .btn {
    display: block;
    width: 100%;
  }
  /* Tables — allow horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
  }
  /* Forms */
  .form-control, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
  /* Modals */
  .modal-dialog {
    margin: 8px !important;
  }
  .modal-body {
    padding: 16px !important;
  }
}

/* ── Fix iOS input zoom ─────────────────────────────────────────────── */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
  select,
  textarea,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="tel"] {
    font-size: 16px !important;
  }
}

/* ── Fix horizontal overflow globally ──────────────────────────────── */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * { box-sizing: border-box; }
  img { max-width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN-CONFIGURABLE COLOR VARIABLES
   All values driven by Design Center → Colors & Typography
   ═══════════════════════════════════════════════════════════════ */

/* ── Page / Section Background ─────────────────────────────── */
body {
    background-color: var(--section-bg, #f9fafb) !important;
}

/* ── Header / Nav Background ────────────────────────────────── */
.cashify-header,
.cashify-nav,
.header-wrap,
nav.navbar {
    background-color: var(--nav-bg, #ffffff) !important;
}

/* ── Product Card Background ────────────────────────────────── */
.card,
.cardprod .card,
.card-container1 .card,
.product-card,
.cardprod {
    background-color: var(--card-bg, #ffffff) !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-info,
.btn-primary,
.cashify-login-btn,
.add-to-cart-btn,
.btn-cart,
.btn-buy,
.btn-checkout,
.btn-modern,
button[type="submit"].btn {
    background-color: var(--btn-bg, #ff6b00) !important;
    border-color: var(--btn-bg, #ff6b00) !important;
}
.btn-info:hover,
.btn-primary:hover,
.cashify-login-btn:hover,
.btn-cart:hover,
.btn-buy:hover,
.btn-checkout:hover {
    filter: brightness(0.9);
    background-color: var(--btn-bg, #ff6b00) !important;
    border-color: var(--btn-bg, #ff6b00) !important;
}

/* ── Trust Bar (Orange Strip) ───────────────────────────────── */
#uniquefooter {
    background: var(--trust-bar-bg, linear-gradient(135deg, #ff8c00 0%, #ff5e00 100%)) !important;
}

/* ── Category Navigation Menu Background ────────────────────── */
.category-navbar,
.category-nav,
.cat-navbar,
.cashify-nav,
nav.category-menu,
.navbar-category,
#category-nav {
    background-color: var(--cat-nav-bg, #ffffff) !important;
}

/* card background is handled by .cardprod in modern-card.css */

/* ── Fix: Footer background correctly targeted ───────────────── */
.footer-custom,
footer,
#footer,
.footer-wrap,
.footer-bottom {
    background-color: var(--footerbgcolor, #111111) !important;
}

/* ── Fix: Category nav background correctly targeted ─────────── */
.cashify-nav .container-fluid,
.cashify-nav .row,
.cashify-nav,
.category-navbar,
#category-nav-bar {
    background-color: var(--cat-nav-bg, #ffffff) !important;
}