:root {
    --site-bg-color: rgb(255, 255, 255);
  }



@keyframes soft-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.animate-soft-bounce {
  animation: soft-bounce 2s ease-in-out infinite;
}

  body {
    background-color: var(--site-bg-color);
    
  }
  
header {
  margin-bottom: -1px;
}
  

  .bg-dynamic {
    background-color: rgb(255, 255, 255);
  }

  .bg-dynamic1 {
    background-color: #333230;
    /*background-color: #382a1f;*/
  }
/* ===============================
   1️⃣ Hide caret everywhere by default
   =============================== */
/* Only hide caret in contenteditable or other text nodes, not all elements */
[contenteditable]:not(input):not(textarea) {
  caret-color: transparent;
}

/* ===============================
   2️⃣ Style all input/textarea fields
   =============================== */
input, textarea {
  caret-color: black;                 /* visible caret */
  overflow: visible;                  /* prevent caret from being clipped */
  position: relative;                 /* stacking context for proper rendering */
  line-height: 1.2;                   /* ensures caret height matches text */
  font-size: 1rem;                    /* adjust if needed */

  width: 100%;                        /* full width */
  
  /* Tailwind focus ring for inputs */
  outline: none;

}

.dynamic-text {
  color: white; /* default */
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* adds contrast on light backgrounds */
}

/* Optional: override for dynamically injected inputs (like popups) */
#popup-container input,
#popup-container textarea {
  caret-color: black;
  overflow: hidden;
  position: relative;
}



.hr-dynamic  {
  border-color: #ffffff;
  background-color: var(--site-bg-color);
  height: 2px;
}

.bg-rgb-dark {
  /*background-color: rgb(162, 214, 190);*/
  /*background-color: #ff9248;*/
    background-color: #333230;
}

/* STATIC fade images */

.fade-img {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.fade-img.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}


/* DYNAMIC reveal cards */
.reveal-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-card.is-revealed {
  opacity: 1;
  transform: none;
}


@keyframes bounce-whatsapp {
  0%, 100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); } /* change -8px for subtler/stronger bounce */
}

.animate-bounce-whatsapp {
  animation: bounce-whatsapp 1.5s ease-in-out infinite;
}

/* smooth movement when we change bottom */
#whatsapp-btn {
  transition: bottom 0.22s ease;
  z-index: 9999; /* keep it above footer */
}

/* optional: ensure animation is fully off when we remove class */
#whatsapp-btn.animate-disabled {
  animation: none !important;
}

.add-to-cart-btn {
  color: #ffffff;
  background-color: #dbc697;
  border: 1px solid #dbc697;
  transition: background-color 0.3s ease;
}

.add-to-cart-btn:hover {
  background-color: #ffb38a;
}

/* Shared warm glass UI, matching the refreshed home page palette. */
:root {
  --site-bg-color: #f3ece3;
  --site-bg-top: #f7f0e8;
  --site-bg-mid: #f3ece3;
  --site-bg-bottom: #efe8df;
  --site-ink: #5e4734;
  --site-ink-soft: rgba(94, 71, 52, 0.72);
  --site-panel: rgba(244, 235, 224, 0.84);
  --site-panel-soft: rgba(238, 227, 214, 0.76);
  --site-border: rgba(193, 164, 136, 0.24);
  --site-shadow: 0 18px 42px rgba(13, 10, 32, 0.16);
  --site-shadow-soft: 0 12px 28px rgba(13, 10, 32, 0.1);
  --site-accent: #8c6a4a;
  --site-accent-strong: #5c4733;
  --site-button: #dbc697;
  --site-button-hover: #ffb38a;
}

body {
  color: var(--site-ink);
  background:
    radial-gradient(circle at top left, rgba(255, 233, 205, 0.22) 0%, transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(255, 214, 178, 0.18) 0%, transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255, 245, 230, 0.18) 0%, transparent 28%),
    linear-gradient(180deg, var(--site-bg-top) 0%, var(--site-bg-mid) 58%, var(--site-bg-bottom) 100%);
  background-attachment: fixed;
}

html,
body,
#page-content {
  background-color: var(--site-bg-mid) !important;
}

#page-content {
  background:
    radial-gradient(circle at top left, rgba(255, 233, 205, 0.22) 0%, transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(255, 214, 178, 0.18) 0%, transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255, 245, 230, 0.18) 0%, transparent 28%),
    linear-gradient(180deg, var(--site-bg-top) 0%, var(--site-bg-mid) 58%, var(--site-bg-bottom) 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 120px),
    linear-gradient(rgba(255,255,255,0.05) 0 1px, transparent 1px 120px);
  opacity: 0.2;
  z-index: -2;
}

.bg-dynamic,
.bg-dynamic1 {
  background: transparent;
}

.bg-rgb-dark,
header.bg-rgb-dark {
  position: relative !important;
  top: auto !important;
  width: min(98.5%, 1720px);
  margin: 1rem auto 1.5rem;
  border-radius: 28px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(249, 241, 231, 0.72)),
    rgba(245, 236, 225, 0.7) !important;
  border: 1px solid var(--site-border);
  color: var(--site-accent);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

header.bg-rgb-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), transparent 30%, transparent 65%, rgba(255, 239, 224, 0.1)),
    radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 28%);
}

header.bg-rgb-dark > * {
  position: relative;
  z-index: 1;
}

header.bg-rgb-dark a,
header.bg-rgb-dark button,
header.bg-rgb-dark span {
  color: var(--site-accent) !important;
}

header.bg-rgb-dark a:hover,
header.bg-rgb-dark button:hover {
  color: var(--site-accent-strong) !important;
}

header.bg-rgb-dark img[src*="/logo/main.jpg"] {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(191, 162, 134, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 10px 22px rgba(89, 66, 46, 0.1);
  padding: 0.3rem;
}

header.bg-rgb-dark:not(.home-fixed-header) a[href="/"] {
  position: relative;
  align-items: center;
}

header.bg-rgb-dark:not(.home-fixed-header) a[href="/"] > span {
  display: inline-block;
  min-width: 14rem;
  font-size: 1.8rem !important;
  font-weight: 700;
  line-height: 1.08;
  color: var(--site-accent) !important;
  white-space: nowrap;
}

header.bg-rgb-dark:not(.home-fixed-header) a[href="/"] > span::before,
header.bg-rgb-dark:not(.home-fixed-header) a[href="/"] > span::after {
  content: none;
}

header.bg-rgb-dark nav a,
header.bg-rgb-dark nav button,
#login-btn-desktop,
#login-btn-mobile,
#username-btn,
#username-btn-mobile {
  border: 1px solid rgba(196, 166, 138, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.22));
  box-shadow: 0 8px 18px rgba(13, 10, 32, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.22s ease, opacity 0.22s ease, color 0.22s ease;
}

header.bg-rgb-dark nav a:hover,
header.bg-rgb-dark nav button:hover,
#login-btn-desktop:hover,
#login-btn-mobile:hover,
#username-btn:hover,
#username-btn-mobile:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

header.bg-rgb-dark input,
header.bg-rgb-dark #mobileSearchDropdown,
header.bg-rgb-dark .search-form ul,
header.bg-rgb-dark #dropdown-menu,
header.bg-rgb-dark #dropdown-menu-mobile,
header.bg-rgb-dark #burgerMenu,
header.bg-rgb-dark #categoriesSubmenu {
  color: rgba(89, 66, 46, 0.94) !important;
  background: #f6ede2 !important;
  border-color: rgba(196, 166, 138, 0.3) !important;
  box-shadow: 0 18px 40px rgba(10, 8, 26, 0.12);
}

header.bg-rgb-dark input::placeholder {
  color: rgba(94, 71, 52, 0.58);
}

#burgerBtn,
.burgerBtnMobile,
header.bg-rgb-dark form button,
header.bg-rgb-dark a[href*="cart"] {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.26));
  border: 1px solid rgba(196, 166, 138, 0.24);
  box-shadow: 0 10px 22px rgba(13, 10, 32, 0.12);
}

#burgerBtn,
.burgerBtnMobile {
  width: 3.65rem;
  height: 3.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

header.bg-rgb-dark .search-form {
  width: min(20rem, 24vw) !important;
}

header.bg-rgb-dark input {
  min-height: 2.65rem;
}

#burgerBtn img,
.burgerBtnMobile img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(650%) hue-rotate(345deg) brightness(95%) contrast(90%);
}

#cart-count,
#cart-count-mobile,
#wishlist-count {
  background: #dc3545 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(228, 44, 73, 0.34);
}

.hr-dynamic,
hr {
  border-color: rgba(193, 164, 136, 0.22) !important;
  background-color: transparent !important;
}

section.bg-dynamic,
section.py-12,
main > .bg-white,
main .bg-white.border,
aside.bg-white,
#product-list > .bg-white,
.reveal-card {
  background: linear-gradient(180deg, var(--site-panel), var(--site-panel-soft)) !important;
  border-color: rgba(193, 164, 136, 0.2) !important;
  box-shadow: var(--site-shadow-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

section h1,
section h2,
main h1,
main h2,
main h3,
#product-list h3 {
  color: var(--site-ink) !important;
}

p,
label,
select,
main li,
.text-gray-600,
.text-gray-700,
.text-gray-800 {
  color: var(--site-ink-soft) !important;
}

.text-blue-600,
.text-green-600 {
  color: var(--site-accent) !important;
}

select,
textarea,
input:not([type="range"]) {
  border-color: rgba(196, 166, 138, 0.32) !important;
  background: rgba(255,255,255,0.72) !important;
  color: rgba(89, 66, 46, 0.94) !important;
}

.add-to-cart-btn,
.buy-now,
button.bg-black,
a.bg-black {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-button), var(--site-button-hover)) !important;
  border: 1px solid rgba(196, 166, 138, 0.42) !important;
  box-shadow: 0 10px 22px rgba(89, 66, 46, 0.12);
}

.add-to-cart-btn:hover,
.buy-now:hover,
button.bg-black:hover,
a.bg-black:hover {
  opacity: 0.9;
}

.add-to-cart,
button.bg-gray-200 {
  color: var(--site-accent-strong) !important;
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(196, 166, 138, 0.3) !important;
}

.bg-dynamic.flex.justify-center button {
  color: var(--site-accent-strong) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(245, 236, 225, 0.7)) !important;
  border: 1px solid rgba(196, 166, 138, 0.26);
}

.bg-dynamic.flex.justify-center.py-6 {
  background:
    linear-gradient(180deg, rgba(243, 236, 227, 0.96), rgba(239, 232, 223, 0.96)) !important;
}

footer.bg-gray-800 {
  width: min(98.5%, 1720px);
  margin: 2rem auto 1.5rem !important;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(241, 231, 219, 0.88), rgba(234, 223, 210, 0.78)) !important;
  border: 1px solid rgba(193, 164, 136, 0.2);
  color: var(--site-accent) !important;
  box-shadow: 0 -12px 36px rgba(13, 10, 32, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

footer.bg-gray-800 a,
footer.bg-gray-800 div,
footer.bg-gray-800 span {
  color: var(--site-accent) !important;
}

footer.bg-gray-800 a:hover,
footer.bg-gray-800 span:hover {
  color: var(--site-accent-strong) !important;
}

footer.bg-gray-800 .bg-white {
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(196, 166, 138, 0.2);
}

@media (max-width: 767px) {
  header.bg-rgb-dark {
    width: min(96%, 1720px);
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 24px;
  }

  header.bg-rgb-dark > .md\:hidden:first-of-type {
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  header.bg-rgb-dark > .md\:hidden:first-of-type a[href="/"] {
    margin-right: 0;
  }

  header.bg-rgb-dark:not(.home-fixed-header) a[href="/"] > span {
    min-width: 0;
    font-size: 1.22rem !important;
  }

  header.bg-rgb-dark nav a,
  header.bg-rgb-dark nav button,
  #login-btn-mobile,
  #username-btn-mobile {
    padding: 0.42rem 0.62rem;
  }

  header.bg-rgb-dark .md\:hidden img[src*="/logo/main.jpg"] {
    width: 3.5rem;
    height: 3.5rem;
  }

  #burgerBtn,
  .burgerBtnMobile {
    width: 2.9rem;
    height: 2.9rem;
  }

  footer.bg-gray-800 {
    width: min(96%, 1720px);
    margin-bottom: 1rem !important;
    border-radius: 24px;
  }
}

/* Exact shared navbar/footer skin from the refreshed home page. */
.home-fixed-header {
  position: relative !important;
  z-index: 20;
  width: min(98.5%, 1720px) !important;
  margin: 1rem auto 0 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(181, 149, 118, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(249, 241, 231, 0.72)),
    rgba(245, 236, 225, 0.7) !important;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow: 0 24px 60px rgba(13, 10, 32, 0.3) !important;
  overflow: visible;
}

.home-fixed-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), transparent 30%, transparent 65%, rgba(255, 239, 224, 0.1)),
    radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 28%);
  opacity: 1;
}

.home-fixed-header > * {
  position: relative;
  z-index: 1;
}

.home-fixed-header a,
.home-fixed-header button,
.home-fixed-header span,
.home-fixed-header p {
  color: #8c6a4a !important;
}

.home-fixed-header input {
  color: rgba(89, 66, 46, 0.94) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250, 245, 239, 0.82)) !important;
  border-color: rgba(196, 166, 138, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 10px 24px rgba(13, 10, 32, 0.1);
}

.home-fixed-header #dropdown-menu,
.home-fixed-header #dropdown-menu-mobile,
.home-fixed-header #categoriesSubmenu,
.home-fixed-header #burgerMenu {
  color: rgba(26, 20, 39, 0.95) !important;
  background: #f6ede2 !important;
  border: 1px solid rgba(189, 159, 130, 0.3) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 18px 40px rgba(10, 8, 26, 0.18) !important;
}

.home-fixed-header #burgerMenu a,
.home-fixed-header #categoriesSubmenu a,
.home-fixed-header #dropdown-menu a,
.home-fixed-header #dropdown-menu button,
.home-fixed-header #dropdown-menu-mobile a,
.home-fixed-header #dropdown-menu-mobile button,
.home-fixed-header #categoriesToggle {
  color: #5c4733 !important;
}

.home-fixed-header nav a,
.home-fixed-header nav button,
.home-fixed-header #login-btn-desktop,
.home-fixed-header #login-btn-mobile,
.home-fixed-header #username-btn,
.home-fixed-header #username-btn-mobile {
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.58rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 166, 138, 0.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.22)) !important;
  box-shadow: 0 8px 18px rgba(13, 10, 32, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.home-fixed-header nav a:hover,
.home-fixed-header nav button:hover,
.home-fixed-header #login-btn-desktop:hover,
.home-fixed-header #login-btn-mobile:hover,
.home-fixed-header #username-btn:hover,
.home-fixed-header #username-btn-mobile:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.home-fixed-header #burgerBtn,
.home-fixed-header .burgerBtnMobile,
.home-fixed-header form button,
.home-fixed-header a[href*="Cart/cart.html"],
.home-fixed-header a[href="/cart"] {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.26)) !important;
  border: 1px solid rgba(196, 166, 138, 0.24) !important;
  box-shadow: 0 10px 22px rgba(13, 10, 32, 0.14) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-fixed-header #burgerBtn,
.home-fixed-header .burgerBtnMobile {
  width: auto;
  height: auto;
  padding: 0.55rem;
}

.home-fixed-header #burgerBtn img,
.home-fixed-header .burgerBtnMobile img {
  opacity: 0.92;
  filter: brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(650%) hue-rotate(345deg) brightness(95%) contrast(90%);
}

.home-fixed-header .search-form {
  border-radius: 999px;
  width: 16rem !important;
}

.home-fixed-header .search-form ul {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(196, 166, 138, 0.24) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247, 240, 231, 0.9)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.home-fixed-header img[src*="/logo/main.jpg"] {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(72, 56, 41, 0.18), rgba(72, 56, 41, 0.08));
  border: 1px solid rgba(191, 162, 134, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 10px 22px rgba(89, 66, 46, 0.1) !important;
  padding: 0.3rem;
}

.home-fixed-header #cart-count,
.home-fixed-header #cart-count-mobile,
.home-fixed-header #wishlist-count {
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(228, 44, 73, 0.34);
}

footer.bg-gray-800 {
  width: min(98.5%, 1720px) !important;
  margin: 1.75rem auto 1.5rem !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(241, 231, 219, 0.82), rgba(234, 223, 210, 0.68)) !important;
  border: 1px solid rgba(193, 164, 136, 0.18) !important;
  box-shadow: 0 16px 36px rgba(13, 10, 32, 0.18) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

footer.bg-gray-800,
footer.bg-gray-800 a {
  color: var(--site-ink) !important;
}

footer.bg-gray-800 .bg-white {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.14)) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 767px) {
  .home-fixed-header {
    width: calc(100% - 10px) !important;
    margin-top: 0.45rem !important;
    border-radius: 24px !important;
  }

  .home-fixed-header .md\:hidden img[src*="/logo/main.jpg"] {
    width: 3.5rem;
    height: 3.5rem;
  }

  .home-fixed-header .search-form {
    width: 100% !important;
  }

  footer.bg-gray-800 {
    width: calc(100% - 10px) !important;
  }
}

/* Polished account and hamburger menus. */
.home-fixed-header #dropdown-menu,
.home-fixed-header #dropdown-menu-mobile {
  width: max-content !important;
  min-width: 12.5rem !important;
  padding: 0.35rem !important;
  border-radius: 26px !important;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 250, 244, 0.96), rgba(246, 237, 226, 0.94)) !important;
  border: 1px solid rgba(196, 166, 138, 0.34) !important;
  box-shadow: 0 22px 48px rgba(13, 10, 32, 0.18) !important;
}

.home-fixed-header #dropdown-menu a,
.home-fixed-header #dropdown-menu button,
.home-fixed-header #dropdown-menu-mobile a,
.home-fixed-header #dropdown-menu-mobile button {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.78rem 1rem !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #5c4733 !important;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.home-fixed-header #dropdown-menu a:hover,
.home-fixed-header #dropdown-menu button:hover,
.home-fixed-header #dropdown-menu-mobile a:hover,
.home-fixed-header #dropdown-menu-mobile button:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(239, 229, 216, 0.62)) !important;
  transform: none;
  opacity: 1;
}

.home-fixed-header #user-dropdown-desktop,
.home-fixed-header #user-dropdown-mobile {
  z-index: 80;
}

.home-fixed-header #dropdown-menu {
  right: 0;
  top: calc(100% + 0.55rem);
}

.home-fixed-header #dropdown-menu-mobile {
  left: 50% !important;
  transform: translateX(-50%);
  top: calc(100% + 0.5rem);
}

.home-fixed-header #burgerMenu {
  border-radius: 24px !important;
  padding: 0.35rem !important;
  overflow: hidden;
}

.home-fixed-header #burgerMenu > a,
.home-fixed-header #burgerMenu > button,
.home-fixed-header #categoriesSubmenu a {
  border-radius: 18px;
}

@media (max-width: 1024px) {
  .home-fixed-header .hidden.md\:flex {
    gap: 1rem;
  }

  .home-fixed-header .hidden.md\:flex > .flex:first-child {
    gap: 1.25rem;
  }

  .home-fixed-header nav {
    gap: 0.65rem;
  }

  .home-fixed-header nav a,
  .home-fixed-header nav button,
  .home-fixed-header #login-btn-desktop,
  .home-fixed-header #username-btn {
    padding: 0.52rem 0.72rem;
    font-size: 0.95rem;
  }

  .home-fixed-header .search-form {
    width: 13.5rem !important;
  }
}

@media (max-width: 767px) {
  .home-fixed-header > .md\:hidden:first-child {
    gap: 0.75rem;
  }

  .home-fixed-header > .md\:hidden:first-child a[href="/"] {
    min-width: 0;
    margin-right: 0;
  }

  .home-fixed-header > .md\:hidden:first-child a[href="/"] span {
    max-width: calc(100vw - 8rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1rem, 5vw, 1.25rem) !important;
  }

  .home-fixed-header nav.md\:hidden {
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .home-fixed-header nav.md\:hidden > .flex {
    gap: 0.65rem;
    margin-left: 0;
    margin-right: 0;
  }

  .home-fixed-header nav.md\:hidden a,
  .home-fixed-header nav.md\:hidden button,
  .home-fixed-header #login-btn-mobile,
  .home-fixed-header #username-btn-mobile {
    font-size: 0.86rem;
    padding: 0.42rem 0.56rem;
  }

  .home-fixed-header #dropdown-menu-mobile {
    min-width: min(12rem, calc(100vw - 2rem)) !important;
  }

  .home-fixed-header #mobileSearchDropdown {
    border-radius: 20px;
    margin: 0 0.6rem 0.75rem;
    width: auto !important;
  }

  .home-fixed-header #burgerMenu {
    right: 0.75rem;
    width: min(14rem, calc(100vw - 1.5rem));
  }
}

/* Force the shared navbar into a true mobile layout, even when page CSS fights Tailwind. */
@media (max-width: 767px) {
  .home-fixed-header {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1rem !important;
    border-radius: 0 0 24px 24px !important;
    gap: 0;
  }

  .home-fixed-header > .hidden.md\:flex {
    display: none !important;
  }

  .home-fixed-header > .md\:hidden:first-child,
  .home-fixed-header nav.md\:hidden {
    display: flex !important;
  }

  .home-fixed-header > .md\:hidden:first-child {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.72rem 0.8rem !important;
  }

  .home-fixed-header > .md\:hidden:first-child a[href="/"] {
    flex: 1 1 auto;
    max-width: calc(100% - 3.2rem);
  }

  .home-fixed-header > .md\:hidden:first-child a[href="/"] img {
    flex: 0 0 auto;
  }

  .home-fixed-header nav.md\:hidden {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.55rem;
    column-gap: 0.55rem;
    padding: 0.35rem 0.8rem 0.8rem !important;
  }

  .home-fixed-header nav.md\:hidden > .flex {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .home-fixed-header nav.md\:hidden > .flex:first-child {
    justify-content: flex-start;
  }

  .home-fixed-header nav.md\:hidden > .flex:last-child {
    justify-content: flex-end;
  }

  .home-fixed-header #mobileSearchBtn,
  .home-fixed-header nav.md\:hidden a[href*="Cart"],
  .home-fixed-header nav.md\:hidden a[href="/cart"] {
    min-width: 2.45rem;
    min-height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .home-fixed-header #mobileSearchBtn svg,
  .home-fixed-header #mobileSearchDropdown button svg {
    color: #8c6a4a !important;
    stroke: #8c6a4a !important;
    opacity: 1 !important;
  }

  .home-fixed-header #mobileSearchDropdown {
    width: calc(100% - 1.6rem) !important;
    margin: 0 auto 0.85rem !important;
    padding: 0.62rem !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.7), rgba(246, 237, 226, 0.7)) !important;
    border: 1px solid rgba(196, 166, 138, 0.26);
    box-shadow: 0 14px 28px rgba(13, 10, 32, 0.12);
  }

  .home-fixed-header #mobileSearchDropdown.hidden {
    display: none !important;
  }

  .home-fixed-header #mobileSearchDropdown:not(.hidden) {
    display: block !important;
  }

  .home-fixed-header #mobileSearchDropdown .search-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  .home-fixed-header #mobileSearchDropdown input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    height: 2.65rem;
    padding-left: 2.55rem !important;
    color: rgba(89, 66, 46, 0.94) !important;
    background: rgba(255,255,255,0.92) !important;
  }

  .home-fixed-header #mobileSearchDropdown input::placeholder {
    color: rgba(92, 71, 51, 0.58) !important;
  }

  .home-fixed-header #suggestionsMobile {
    z-index: 90;
    background: rgba(255,255,255,0.96) !important;
  }

  .home-fixed-header #burgerMenu {
    left: 0.8rem !important;
    right: 0.8rem !important;
    width: auto !important;
    max-height: min(70vh, 32rem);
    overflow-y: auto !important;
    border-radius: 24px !important;
  }

  .home-fixed-header #categoriesSubmenu {
    max-height: 22rem;
    overflow-y: auto;
  }
}

@media (min-width: 768px) {
  .home-fixed-header > .hidden.md\:flex {
    display: flex !important;
  }

  .home-fixed-header > .md\:hidden:first-child,
  .home-fixed-header nav.md\:hidden,
  .home-fixed-header #mobileSearchDropdown {
    display: none !important;
  }
}