/* ============================================================
   Value4Kart — Blue Theme Override
   Applies blue theme to everything EXCEPT top header & main header
   ============================================================ */

/* ----------------------------------------------------------
   1. Override primary color variable site-wide
   ---------------------------------------------------------- */
:root {
    --primary-color: #1a56db !important;
    --semi-primary-color: #1a56db1a !important;
    --hover-bg-color: #1e429f !important;
    --hover-color: #ffffff !important;
}

/* ----------------------------------------------------------
   2. Navigation bar (header-bottom) — full blue
   ---------------------------------------------------------- */
.header {
    background-color: #1a56db !important;
}

.header .first-list,
.header .header-menu-nav a,
.header [style*="color"] {
    color: #ffffff !important;
}

.header .active-border-bottom {
    border-bottom-color: #ffffff !important;
    color: #ffffff !important;
}

.header .first-dropdown,
.header .child-dropdown,
.header .menu.dropdown-enable {
    background-color: #ffffff !important;
}

.header .first-dropdown a,
.header .child-dropdown a,
.header .menu.dropdown-enable a {
    color: #1a56db !important;
}

.header .first-dropdown li:hover,
.header .child-dropdown li:hover {
    background-color: #1a56db !important;
}

.header .first-dropdown li:hover a,
.header .child-dropdown li:hover a {
    color: #ffffff !important;
}

.header .group-category>div {
    background-color: #1e429f !important;
    color: #ffffff !important;
}

.header .group-category>div svg path {
    fill: #ffffff !important;
}

.header .category-menu-wrapper {
    background-color: #ffffff !important;
}

.header .categories-menu:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.header .test-click {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.header .test-click svg path,
.header .test-click svg rect,
.header .test-click svg circle {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* ----------------------------------------------------------
   3. Primary color utility classes
   ---------------------------------------------------------- */
.primary-bg-color {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.primary-bg-color * {
    color: #ffffff !important;
}

.primary-bg-hover:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.primary-bg-hover:hover * {
    color: #ffffff !important;
}

.primary-text-color {
    color: #1a56db !important;
}

.primary-text-hover:hover {
    color: #1a56db !important;
}

.primary-border-color {
    border-color: #1a56db !important;
}

.primary-border-hover:hover {
    border-color: #1a56db !important;
}

.semi-primary-bg-color {
    background-color: #1a56db1a !important;
}

/* ----------------------------------------------------------
   4. Product card badges — force white text on blue bg
   ---------------------------------------------------------- */
p.primary-bg-color,
div.primary-bg-color,
span.primary-bg-color,
a.primary-bg-color,
.primary-bg-color.z-20,
.primary-bg-color.z-30 {
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   5. Product card icon buttons — white icon/text on hover
   ---------------------------------------------------------- */
.primary-bg-hover:hover svg path,
.primary-bg-hover:hover svg rect,
.primary-bg-hover:hover svg circle,
.primary-bg-hover:hover svg polygon {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.primary-bg-hover:hover svg path[stroke] {
    stroke: #ffffff !important;
}

/* ----------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------- */
.btn-primary,
button.btn-primary,
.site-btn,
.add-to-cart-btn,
.buy-now-btn,
[class*="primary-btn"],
.checkout-btn {
    background-color: #1a56db !important;
    border-color: #1a56db !important;
    color: #ffffff !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.site-btn:hover,
.add-to-cart-btn:hover {
    background-color: #1e429f !important;
    border-color: #1e429f !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   7. Tabs & section headings
   ---------------------------------------------------------- */
.active-border {
    border-bottom-color: #1a56db !important;
}

.c-tab-nav-marker {
    background-color: #1a56db !important;
}

.active.dot {
    background: #1a56db !important;
}

/* ----------------------------------------------------------
   8. Sidebar category menu hover (left category panel)
   ---------------------------------------------------------- */
.categories-menu:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.category-hover:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   9. Slider arrows
   ---------------------------------------------------------- */
.prev:hover,
.next:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   10. Dropdown hover items
   ---------------------------------------------------------- */
.dropdown .dropdown-menu li:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   11. Footer & misc
   ---------------------------------------------------------- */
.cool-link:hover {
    color: #1a56db !important;
}

.bg-reds-3 {
    background-color: #dc2626 !important;
}

.footer-subscribe-btn,
[class*="subscribe"] button {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

#sidenavCart .bg-primary,
.cart-header-bg {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.pagination .active a,
.pagination .active span,
.page-item.active .page-link {
    background-color: #1a56db !important;
    border-color: #1a56db !important;
    color: #ffffff !important;
}

.search-border:focus-within {
    border-color: #1a56db !important;
    box-shadow: 0 0 0 2px #1a56db33 !important;
}

/* ----------------------------------------------------------
   12. TOP CATEGORIES — alternating blue / yellow on hover
       1st, 3rd, 5th... = blue  |  2nd, 4th, 6th... = yellow
   ---------------------------------------------------------- */

/* Reset primary-bg-hover inside category grid so nth-child rules win */
.grid a .t-img.primary-bg-hover:hover {
    background-color: transparent !important;
}

/* Odd cards → blue background */
.grid a:nth-child(odd) .t-img.primary-bg-hover:hover {
    background-color: #1a56db !important;
}

/* Even cards → yellow background */
.grid a:nth-child(even) .t-img.primary-bg-hover:hover {
    background-color: #FCCA19 !important;
}

/* Text/icon colour on odd (blue) hovered cards → white */
.grid a:nth-child(odd) .t-img.primary-bg-hover:hover p,
.grid a:nth-child(odd) .t-img.primary-bg-hover:hover span,
.grid a:nth-child(odd) .t-img.primary-bg-hover:hover .text-gray-12 {
    color: #ffffff !important;
}

/* Text/icon colour on even (yellow) hovered cards → dark */
.grid a:nth-child(even) .t-img.primary-bg-hover:hover p,
.grid a:nth-child(even) .t-img.primary-bg-hover:hover span,
.grid a:nth-child(even) .t-img.primary-bg-hover:hover .text-gray-12 {
    color: #1a1a1a !important;
}

/* Category name text at bottom of card (always visible, not in hover overlay) */
.grid a .t-img p.text-gray-12 {
    color: #2c2c2c !important;
}

/* ----------------------------------------------------------
   13. Footer links — yellow (#FCCA19) on hover, not orange
   ---------------------------------------------------------- */

/* Override Tailwind hover:text-orange-500 with yellow */
footer .hover\:text-orange-500:hover,
section footer a:hover li,
section footer a:hover span {
    color: #FCCA19 !important;
}

/* Social icon circles in footer — keep their own bg, DON'T override */
footer .social-transition.primary-bg-hover:hover {
    background-color: #1a56db !important;
    /* keep blue for social icons */
}

/* ----------------------------------------------------------
   14. Messages chat widget — white text, blue background
   ---------------------------------------------------------- */

/* Override the chat widget background variable */
.chat-parent-container {
    --chat-background: #1a56db !important;
}

/* The floating Messages toggle button */
.chat-toggle-button {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

/* Messages text label */
.chat-toggle-button span {
    color: #ffffff !important;
}

/* Chat icon SVG inside the button — white */
.chat-toggle-button .chat-message-icon path {
    fill: #ffffff !important;
}

/* Chat panel header */
.chat-view-header {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.chat-view-header span,
.chat-view-header .chat-message-icon path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.chat-view-close-button svg path {
    fill: #ffffff !important;
}

/* ============================================================
   BRANDS SECTION — Professional Blue/Yellow Gradient Cards
   ============================================================ */

/* ----------------------------------------------------------
   Shared card base styles
   ---------------------------------------------------------- */
.flex.flex-col.md\:flex-row.mt-2.md\:mt-5.md\:gap-x-29p a.relative.h-36,
.flex.flex-col.md\:flex-row.mt-2.md\:mt-5.md\:gap-x-29p a.relative.h-36.md\:h-80,
.grid.grid-cols-2 a>div.border.rounded-md {
    border: none !important;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

/* ----------------------------------------------------------
   Large featured brand card (left, tall)
   Blue → Yellow diagonal gradient
   ---------------------------------------------------------- */
a.relative.h-36.md\:h-80.md\:w-1\/4.border.rounded-md {
    background: linear-gradient(135deg, #1a56db 0%, #2563eb 40%, #FCCA19 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.25) !important;
    overflow: hidden;
    position: relative;
    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

/* Subtle decorative circle — top-right */
a.relative.h-36.md\:h-80.md\:w-1\/4.border.rounded-md::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(252, 202, 25, 0.18);
    pointer-events: none;
}

/* Subtle decorative circle — bottom-left */
a.relative.h-36.md\:h-80.md\:w-1\/4.border.rounded-md::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

a.relative.h-36.md\:h-80.md\:w-1\/4.border.rounded-md:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 32px rgba(26, 86, 219, 0.35) !important;
}

/* ----------------------------------------------------------
   Small brand grid cards — alternating gradient directions
   ---------------------------------------------------------- */

/* All small cards — shared base */
.grid.grid-cols-2 a>div.border.rounded-md,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a>div.border.rounded-md {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(26, 86, 219, 0.12) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
    position: relative;
    overflow: hidden;
}

/* Odd small cards → blue-dominant gradient */
.grid.grid-cols-2 a:nth-child(odd)>div.border.rounded-md,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a:nth-child(odd)>div.border.rounded-md {
    background: linear-gradient(145deg, #e8f0fe 0%, #bfcfff 45%, #e8f7ff 100%) !important;
}

/* Even small cards → yellow-dominant gradient */
.grid.grid-cols-2 a:nth-child(even)>div.border.rounded-md,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a:nth-child(even)>div.border.rounded-md {
    background: linear-gradient(145deg, #fffbe6 0%, #fef3b4 45%, #fff8d6 100%) !important;
}

/* Hover lift on small cards */
.grid.grid-cols-2 a:hover>div.border.rounded-md,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a:hover>div.border.rounded-md {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(26, 86, 219, 0.20) !important;
}

/* Decorative shimmer top-right on small cards */
.grid.grid-cols-2 a>div.border.rounded-md::after,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a>div.border.rounded-md::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(26, 86, 219, 0.07);
    pointer-events: none;
}

/* ----------------------------------------------------------
   Brand images — ensure they pop on the gradient backgrounds
   ---------------------------------------------------------- */
a.relative.h-36.md\:h-80.md\:w-1\/4.border.rounded-md img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) !important;
    position: relative;
    z-index: 1;
}

.grid.grid-cols-2 a>div.border.rounded-md img,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a>div.border.rounded-md img {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.10)) !important;
    position: relative;
    z-index: 1;
    transition: transform 0.28s ease !important;
}

.grid.grid-cols-2 a:hover>div.border.rounded-md img,
.grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 a:hover>div.border.rounded-md img {
    transform: scale(1.06) !important;
}

/* ============================================================
   NAV LAYOUT — Flipkart-style horizontal category bar below navbar
   + Horizontal dropdown for nav menu items
   ============================================================ */

/* ----------------------------------------------------------
   1. Navbar (.header) — blue bar, no overflow clipping
   ---------------------------------------------------------- */
.header {
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
}

/* Ensure nav-wrap and its parents don't clip dropdowns */
#nav-wrap,
#nav-wrap>div,
.header>div,
.header>div>div {
    overflow: visible !important;
}

/* Fix profile image size in header */
.md\\:hidden .h-9.w-9,
.md\\:hidden img.h-9.w-9 {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: cover !important;
}

/* Fix profile dropdown positioning and z-index */
#header-account-btn {
    position: relative !important;
    z-index: 60 !important;
}

/* Profile dropdown menu - ensure it appears above content */
#header-account-btn+div {
    z-index: 99999 !important;
    position: absolute !important;
}

/* Profile image container - prevent overflow */
#header-account-btn .relative {
    position: relative !important;
    overflow: visible !important;
}

/* Fix profile image positioning to prevent overlap */
#header-account-btn img {
    position: relative !important;
    z-index: 60 !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

/* Ensure header container doesn't clip profile */
.header .flex.justify-end {
    overflow: visible !important;
    position: relative !important;
    z-index: 60 !important;
}

/* Profile button container */
#header-account-btn {
    overflow: visible !important;
}

/* Constrain profile image within header bounds */
.header .relative[x-data] {
    position: relative !important;
}

/* Profile dropdown should appear above but not overlap when closed */
.header .relative[x-data]>div[x-show] {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 99999 !important;
}

/* Reduce profile image size to prevent overlap */
#header-account-btn img.h-22 {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

/* Profile button container - ensure proper spacing */
#header-account_btn {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure header section properly contains all elements */
section.sticky.top-0.z-40 {
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
    max-height: none !important;
}

/* Ensure main content doesn't overlap header */
main,
.main-content,
.content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
}

/* Header layout wrapper - ensure it doesn't overflow */
.layout-wrapper.px-4 {
    overflow: visible !important;
    position: relative !important;
}

/* Profile list item - ensure it stays within header */
.header ul.flex li {
    position: relative !important;
    z-index: 60 !important;
}

/* Ensure header has proper height to contain profile */
.header {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: visible !important;
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    isolation: isolate !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}

/* Override max-h-24 constraint on header section */
section.sticky.top-0.z-40.max-h-24 {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: visible !important;
    background-color: #ffffff !important;
    z-index: 9999 !important;
    position: relative !important;
    isolation: isolate !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure main content has proper margin to account for header */
main,
.main-content,
.content-section {

    position: relative !important;
    z-index: 1 !important;
}

/* Ensure header creates a new stacking context */
section.sticky.top-0.z-40 {
    transform: translateZ(0) !important;
}

/* Ensure main content has proper spacing from header */
body {
    padding-top: 0 !important;
}

/* Add spacing after header */
.header+*,
section.sticky.top-0.z-40+* {
    margin-top: 10px !important;
}

/* Ensure header content is properly contained */
.header>div {
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure main content stays below header */
main,
.content-wrapper,
.container,
.layout-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* Add margin to main content to prevent overlap */
main {
    margin-top: 80px !important;
}

/* Ensure header background covers any overlap */
section.sticky.top-0.z-40 {
    background-color: #ffffff !important;
    padding-bottom: 5px !important;
}

/* Profile container - ensure proper positioning */
.header .relative[x-data] {
    position: relative !important;
    overflow: visible !important;
}

/* Profile image - ensure it doesn't extend beyond header */
#header-account-btn img {
    display: block !important;
}

/* Profile button - ensure proper containment */
#header-account-btn {
    position: relative !important;
    display: block !important;
}

/* Profile flex container - ensure proper alignment */
#header-account-btn .flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Profile image wrapper - constrain size */
#header-account-btn .flex.justify-center {
    width: 32px !important;
    height: 32px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Profile image - specific targeting from blade file */
#header-account-btn .h-22.w-22 {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin-top: 2px !important;
}

/* Profile slot icon container */
#header-account-btn [slot="icon"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Profile button padding adjustment */
#header-account-btn.md\:px-2.lg\:px-0 {
    padding: 8px 0 !important;
}

/* Profile list item - ensure proper spacing */
.header ul.flex li.hidden.md\:block.ml-5 {
    position: relative !important;
    z-index: 60 !important;
    margin-left: 20px !important;
}

/* Aggressive profile containment */
.header ul.flex li {
    position: relative !important;
    overflow: visible !important;
}

/* Profile flex col container */
.header ul.flex li .flex.flex-col {
    position: relative !important;
    overflow: visible !important;
}

/* Profile image - match size of other header icons (24px) */
#header-account-btn img {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}

/* Profile image rounded-full - same 24px */
#header-account-btn img.rounded-full {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

/* Profile image wrapper - correct size to fit 24px image */
#header-account-btn .flex.justify-center {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    overflow: visible !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Profile button - consistent with other header icon buttons */
#header-account-btn {
    position: relative !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-block !important;
}

/* Profile label text */
#header-account-btn p {
    font-size: 10px !important;
    line-height: 1 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Profile container - static positioning */
.header .relative[x-data] {
    position: static !important;
}

/* Profile dropdown - absolute positioning only when open */
.header .relative[x-data]>div[x-show] {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Target specific dropdown classes from blade file */
.absolute.ltr\\:right-0.rtl\\:left-0.top-full.mt-2.w-48.bg-white.border.border-gray-100.rounded-lg.shadow-xl.z-50.py-1.origin-top-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Target dropdown with style attribute */
.header .relative[x-data]>div[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Profile dropdown - show only when Alpine.js sets it to visible */
.header .relative[x-data]>div[x-show][style*="display: block"],
.header .relative[x-data]>div[x-show].block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
}

/* Force hide all dropdowns by default */
.header .relative[x-data]>div {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Only show when explicitly marked as visible */
.header .relative[x-data]>div[x-show].block,
.header .relative[x-data]>div[x-show][style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Profile container - ensure it doesn't expand */
.header .relative[x-data] {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    height: 30px !important;
    max-height: 30px !important;
    width: auto !important;
    overflow: visible !important;
}

/* Profile dropdown - position outside container */
.header .relative[x-data]>div[x-show] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* Force hide any dropdown with style display none */
.header .relative[x-data]>div[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Ensure header has enough height */
.header {
    height: auto !important;
    min-height: 70px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
    overflow: visible !important;
}

/* Header section - ensure proper height */
section.sticky.top-0.z-40 {
    height: auto !important;
    min-height: 70px !important;
    overflow: visible !important;
}

/* Layout wrapper - ensure proper spacing */
.layout-wrapper.px-4 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Profile list item - allow overflow for dropdowns and natural height */
.header ul.flex li.hidden.md\:block.ml-5 {
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

/* Profile flex col - align content nicely without clipping */
.header ul.flex li .flex.flex-col.justify-center.items-center {
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Profile slot icon - center the icon inside 24px box matching others */
.header ul.flex li [slot="icon"] {
    height: 24px !important;
    max-height: 24px !important;
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Profile image - final override: 22px to match other icons */
#header-account-btn img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
}

/* ============================================================
   SEARCH PRODUCTS PAGE — Enhanced UI with existing colors
   ============================================================ */

/* Search page container */
#item-filter-container-desktop {
    background-color: #f8fafc !important;
    min-height: 100vh;
}

/* Main body background */
body {
    background-color: #f8fafc !important;
}

/* Breadcrumb styling */
#item-filter-container-desktop .bread-hover a {
    color: #1a56db !important;
    transition: color 0.2s ease;
}

#item-filter-container-desktop .bread-hover a:hover {
    color: #1e429f !important;
    text-decoration: underline;
}

/* Filter sidebar - enhanced styling */
#filter_box_result,
#filter_box {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e8f0fe !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(26, 86, 219, 0.08) !important;
    transition: box-shadow 0.3s ease !important;
}

#filter_box_result:hover,
#filter_box:hover {
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.12) !important;
}

/* Filter section headers */
#filter_box_result .border-one h3,
#filter_box .border-one h3 {
    color: #1a56db !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #1a56db1a !important;
    padding-bottom: 8px !important;
}

/* Clear All button */
.reset_all,
.clear_all {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reset_all:hover,
.clear_all:hover {
    color: #1a56db !important;
}

.reset_all:hover svg path,
.clear_all:hover svg path {
    fill: #1a56db !important;
}

/* Category links */
.cate-hover a {
    transition: all 0.2s ease !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

.cate-hover a:hover {
    background-color: #1a56db1a !important;
    color: #1a56db !important;
}

.cate-hover a.text-color-black {
    color: #1a56db !important;
    font-weight: 600 !important;
}

/* Price range inputs */
.min_desktop,
.max_desktop {
    border-color: #e8f0fe !important;
    transition: all 0.2s ease !important;
}

.min_desktop:focus,
.max_desktop:focus {
    border-color: #1a56db !important;
    box-shadow: 0 0 0 3px #1a56db1a !important;
}

/* Update button */
.button-update {
    background-color: #1a56db !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.button-update:hover {
    background-color: #1e429f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25) !important;
}

/* Checkbox styling */
.option-checkbox,
.item-brand {
    accent-color: #1a56db !important;
}

.option-checkbox:checked+label,
.item-brand:checked+label {
    color: #1a56db !important;
    font-weight: 600 !important;
}

/* Color checkbox labels */
.c-check label {
    transition: color 0.2s ease !important;
}

.c-check input:checked+label {
    color: #1a56db !important;
}

/* Star ratings */
.radio-star {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.radio-star:hover {
    transform: scale(1.1) !important;
}

.radio-star.star-color {
    color: #FCCA19 !important;
}

/* Sort by dropdown */
.filter-dropdown .select {
    border-color: #e8f0fe !important;
    transition: all 0.2s ease !important;
}

.filter-dropdown:hover .select {
    border-color: #1a56db !important;
}

.filter-dropdown .dropdown-menu li {
    transition: all 0.2s ease !important;
}

.filter-dropdown .dropdown-menu li:hover {
    background-color: #1a56db1a !important;
}

.filter-dropdown .dropdown-menu li.primary-bg-color {
    background-color: #1a56db !important;
}

/* Showing dropdown */
.showing-width .select {
    border-color: #e8f0fe !important;
    transition: all 0.2s ease !important;
}

.showing-width:hover .select {
    border-color: #1a56db !important;
}

.showing-width .dropdown-menu li {
    transition: all 0.2s ease !important;
}

.showing-width .dropdown-menu li:hover {
    background-color: #1a56db1a !important;
}

.showing-width .dropdown-menu li.primary-bg-color {
    background-color: #1a56db !important;
}

/* Grid/List view toggle buttons */
button {
    transition: all 0.2s ease !important;
}

button:hover {
    background-color: #1a56db1a !important;
    color: #1a56db !important;
}

button.text-gray-10 {
    color: #1a56db !important;
    background-color: #1a56db1a !important;
}

/* Product cards */
.product-result .grid>div {
    transition: all 0.3s ease !important;
    border: 1px solid #e8f0fe !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.product-result .grid>div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(26, 86, 219, 0.15) !important;
    border-color: #1a56db !important;
}

/* Product image container */
.rev-img {
    transition: all 0.3s ease !important;
}

.product-result .grid>div:hover .rev-img {
    transform: scale(1.05) !important;
}

/* Filter button (mobile) */
.filt {
    background: linear-gradient(135deg, #1a56db 0%, #1e429f 100%) !important;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3) !important;
    transition: all 0.2s ease !important;
}

.filt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(26, 86, 219, 0.4) !important;
}

/* See All links */
.add a {
    color: #1a56db !important;
    transition: all 0.2s ease !important;
}

.add a:hover {
    color: #1e429f !important;
    text-decoration: underline !important;
}

/* Found total items text */
#found_total_item {
    color: #1a56db !important;
    font-weight: 600 !important;
}

/* Pagination */
.pagination .page-link {
    color: #1a56db !important;
    border-color: #e8f0fe !important;
    transition: all 0.2s ease !important;
}

.pagination .page-link:hover {
    background-color: #1a56db1a !important;
    border-color: #1a56db !important;
}

.pagination .page-item.active .page-link {
    background-color: #1a56db !important;
    border-color: #1a56db !important;
}

/* Loader animation */
.res-loader svg {
    stroke: #1a56db !important;
}

.res-loader svg circle {
    stroke: #1a56db !important;
}

.res-loader svg path {
    fill: #1a56db !important;
}

/* Expand/Collapse sections */
.show-details {
    transition: max-height 0.3s ease !important;
}

/* Search results count badge */
#found_total_item::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #FCCA19;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Mobile filter overlay */
.filter-mobile {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #item-filter-container-desktop {
        padding: 16px !important;
    }

    .product-result .grid {
        gap: 12px !important;
    }
}

/* ============================================================
   HEADER TOP BAR — Vertical marquee animation for center text
   ============================================================ */

.marquee-container {
    position: relative;
    width: 100%;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Fix dropdown z-index issue */
.lang-dropdown {
    z-index: 9999 !important;
    position: relative !important;
}

.dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
    min-width: 120px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 0 !important;
}

/* Ensure dropdown appears below the button */
.lang-dropdown .dropdown-menu {
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
}

.rtl .lang-dropdown .dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

.animate-marquee {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
}

.animate-marquee p {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fade-slide 8s infinite;
}

.animate-marquee p:nth-child(1) {
    animation-delay: 0s;
}

.animate-marquee p:nth-child(2) {
    animation-delay: 2s;
}

.animate-marquee p:nth-child(3) {
    animation-delay: 4s;
}

.animate-marquee p:nth-child(4) {
    animation-delay: 6s;
}

@keyframes fade-slide {

    0%,
    20% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(10px);
    }

    25%,
    45% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    50%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-10px);
    }
}

/* ============================================================
   CART PAGE — Enhanced UI with existing colors
   ============================================================ */

/* Cart page container */
#cart-details-container {
    background-color: #f8fafc !important;
}

/* Cart items container - main white box */
#cart-items {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.1) !important;
    border: 2px solid #e8f0fe !important;
    padding: 24px !important;
}

/* Select All box */
#selecAllBox {
    background: linear-gradient(135deg, #1a56db 0%, #1e429f 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    padding: 16px 20px !important;
}

#selecAllBox:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.3) !important;
}

#selecAllBox label span {
    color: #ffffff !important;
}

#selecAllBox button {
    color: #ffffff !important;
}

#selecAllBox button svg path {
    fill: #ffffff !important;
}

/* Vendor box */
.vendor-parent {
    border: 2px solid #e8f0fe !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
}

.vendor-parent:hover {
    box-shadow: 0 8px 30px rgba(26, 86, 219, 0.15) !important;
    border-color: #1a56db !important;
    transform: translateY(-2px) !important;
}

/* Vendor area/shop box */
.vendor-area {
    background: linear-gradient(135deg, #1a56db 0%, #1e429f 100%) !important;
    border: none !important;
    padding: 16px 20px !important;
}

.vendor-area span {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.vendor-area p {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Cart item header */
.cart-item-header {
    border-bottom: 2px solid #e8f0fe !important;
    transition: all 0.3s ease !important;
    padding: 20px !important;
}

.cart-item-header:hover {
    background-color: #f0f7ff !important;
    border-bottom-color: #1a56db !important;
}

/* Product image container */
.cart-item-header .check-bg div {
    border: 3px solid #e8f0fe !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.1) !important;
}

.cart-item-header:hover .check-bg div {
    border-color: #1a56db !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.2) !important;
}

/* Product name link */
.cart-item-header h3 a {
    color: #1a56db !important;
    transition: color 0.2s ease !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.cart-item-header h3 a:hover {
    color: #1e429f !important;
    text-decoration: underline !important;
}

/* Product price */
.cart-item-price {
    color: #1a56db !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* Quantity controls */
.cart-page-item-qty-dec,
.cart-page-item-qty-inc {
    background-color: #f8fafc !important;
    border: 2px solid #e8f0fe !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}

.cart-page-item-qty-dec:hover,
.cart-page-item-qty-inc:hover {
    background-color: #1a56db !important;
    border-color: #1a56db !important;
    transform: scale(1.1) !important;
}

.cart-page-item-qty-dec:hover svg path,
.cart-page-item-qty-inc:hover svg path {
    fill: #ffffff !important;
}

.cart-item-quantity {
    background-color: #ffffff !important;
    border: 2px solid #e8f0fe !important;
    border-left: none !important;
    border-right: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* Delete button */
.delete-cart-item {
    transition: all 0.2s ease !important;
    color: #1a56db !important;
}

.delete-cart-item:hover {
    color: #dc2626 !important;
    transform: scale(1.1) !important;
}

.delete-cart-item:hover svg path {
    fill: #dc2626 !important;
}

/* Wishlist button */
.wishlist {
    transition: all 0.2s ease !important;
}

.wishlist:hover {
    color: #FCCA19 !important;
    transform: scale(1.1) !important;
}

.wishlist.color_fill svg {
    fill: #FCCA19 !important;
    stroke: #FCCA19 !important;
}

/* Checkbox styling */
.form-checkbox {
    accent-color: #1a56db !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.form-checkbox:checked {
    background-color: #1a56db !important;
}

/* Order steps */
.order-steps {
    margin-bottom: 20px !important;
}

.order-steps .step {
    background-color: #e8f0fe !important;
    color: #1a56db !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
}

.order-steps .step.active {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

/* Breadcrumb */
.layout-wrapper nav ol li a {
    color: #1a56db !important;
    transition: color 0.2s ease !important;
}

.layout-wrapper nav ol li a:hover {
    color: #1e429f !important;
    text-decoration: underline !important;
}

/* Coupon message */
#couponMsg {
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
}

/* Cart summary section (right side) */
.cart-summary {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 2px solid #e8f0fe !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.1) !important;
    padding: 24px !important;
}

/* Checkout button */
.checkout-btn {
    background: linear-gradient(135deg, #1a56db 0%, #1e429f 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.2) !important;
}

.checkout-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(26, 86, 219, 0.4) !important;
}

/* Continue shopping button */
.continue-shopping {
    border: 2px solid #1a56db !important;
    color: #1a56db !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.continue-shopping:hover {
    background-color: #1a56db !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3) !important;
}

/* Price summary rows */
.summary-row {
    border-bottom: 2px solid #e8f0fe !important;
    padding: 16px 0 !important;
}

.summary-row:last-child {
    border-bottom: none !important;
}

.summary-row .label {
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.summary-row .value {
    color: #1a56db !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.summary-row.total .value {
    color: #1a56db !important;
    font-weight: 800 !important;
    font-size: 24px !important;
}

/* Empty cart message */
.empty-cart {
    text-align: center !important;
    padding: 60px 20px !important;
}

.empty-cart h3 {
    color: #1a56db !important;
    margin-bottom: 20px !important;
}

/* Responsive cart adjustments */
@media (max-width: 768px) {
    #cart-items {
        border-radius: 8px !important;
    }

    .vendor-parent {
        border-radius: 8px !important;
    }

    #selecAllBox {
        border-radius: 6px !important;
    }
}

/* ----------------------------------------------------------
   2. CATEGORY BAR — pure white bar BELOW the blue navbar
      Flipkart style: icon on top, label below, blue underline on hover
   ---------------------------------------------------------- */

/* Hide the "≡ Categories" button — not needed in Flipkart style */
.group-category>div:first-child {
    display: none !important;
}

/* The group-category container — full width, white background */
.group-category {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
}

/* Override Tailwind's scale-0 (hidden by default) — always show */
.category-menu-wrapper {
    /* reset all transform/scale hiding */
    transform: none !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;

    /* layout */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    z-index: 40 !important;
    display: block !important;
    overflow: visible !important;
}

/* Inner accordion wrapper → horizontal scroll container */
.category-menu-wrapper .accordion-homepage-wrapper {
    overflow: visible !important;
}

/* ============================================================
   NEW HEADER SEARCH BAR — Location + Search Input Component
   ============================================================ */

.new-header-search-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 48px;
    width: 100%;
    min-width: 0;
}

/* Location Section */
.new-header-location {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    padding: 0 16px;
    background: #f5f5f5;
    height: 100%;
    border-right: 1px solid #e5e5e5;
    cursor: pointer;
    transition: background 0.2s ease;
    min-width: 160px;
    flex-shrink: 0;
}

.new-header-location:hover {
    background: #ebebeb;
}

.location-icon {
    flex-shrink: 0;
    margin-right: 8px;
}

.location-text {
    color: #1a56db;
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
    white-space: nowrap;
}

.dropdown-arrow {
    flex-shrink: 0;
}

/* Search Input Section */
.new-header-search-input-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex: 1;
    height: 100%;
    position: relative;
    min-width: 0;
}

.new-header-search-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 14px;
    color: #2c2c2c;
    background: transparent;
    min-width: 0;
}

.new-header-search-input::placeholder {
    color: #a0a0a0;
}

.new-header-search-input:focus {
    outline: none;
}

/* Search Button */
.new-header-search-button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    background: #FCCA19;
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.new-header-search-button:hover {
    background: #e5b815;
}

.new-header-search-button:active {
    background: #d4a812;
}

/* Responsive Design */
@media (max-width: 768px) {
    .new-header-search-bar {
        height: 44px;
    }

    .new-header-location {
        min-width: 120px;
        padding: 0 12px;
    }

    .location-text {
        font-size: 13px;
    }

    .new-header-search-input {
        font-size: 13px;
        padding: 0 12px;
    }

    .new-header-search-button {
        width: 44px;
    }
}

.category-menu-wrapper .accordion-homepage-wrapper .menu-full-details {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.category-menu-wrapper .accordion-homepage-wrapper .menu-full-details::-webkit-scrollbar {
    display: none !important;
}

/* Each category item — flex column, centered */
.category-menu-wrapper li.category-list-decoration {
    border: none !important;
    border-bottom: none !important;
    flex: 0 0 auto !important;
    list-style: none !important;
    display: flex !important;
    align-items: stretch !important;
}

/* The button wrapper */
.category-menu-wrapper li.category-list-decoration>button {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
}

/* The primary-bg-hover div inside button */
.category-menu-wrapper li .primary-bg-hover {
    background: transparent !important;
}

/* The actual link row — make it a vertical column */
.category-menu-wrapper .categories-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 96px !important;
    height: 80px !important;
    padding: 8px 4px 0 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border-bottom: 3px solid transparent !important;
    transition: border-color 0.15s, color 0.15s !important;
    gap: 4px !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Icon container */
.category-menu-wrapper .categories-menu>div.flex.justify-center.items-center {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
}

.category-menu-wrapper .categories-menu .h-5.w-5 {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.category-menu-wrapper .categories-menu .h-5.w-5 img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Category name label */
.category-menu-wrapper .categories-menu span.text-sm {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-align: center !important;
    color: #333333 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    max-width: 88px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Hover state — blue underline + blue text (Flipkart style) */
.category-menu-wrapper .categories-menu:hover {
    background: transparent !important;
    border-bottom: 3px solid #1a56db !important;
    color: #1a56db !important;
    margin-left: 0 !important;
}

.category-menu-wrapper .categories-menu:hover span.text-sm {
    color: #1a56db !important;
}

/* Hide the right-arrow chevron */
.category-menu-wrapper .categories-menu .neg-transition-scale,
.category-menu-wrapper .categories-menu>div.flex.items-center.justify-between>span:last-child {
    display: none !important;
}

/* The justify-between div — switch to column for icon+label */
.category-menu-wrapper .categories-menu .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
}

/* Hide "See All Categories" button */
.category-menu-wrapper .expand-button {
    display: none !important;
}

/* ----------------------------------------------------------
   3. Make the header layout: nav row on top, category bar below
      by making the outer flex column
   ---------------------------------------------------------- */
.header>div.layout-wrapper.px-4 {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

/* Nav links row — normal height, horizontal padding */
.header>div.layout-wrapper.px-4>div.flex.justify-between {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
    min-height: 56px !important;
}

/* Category bar — second row, full width white */
.header>div.layout-wrapper.px-4>div.group.group-category {
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* xl:px-0 override */
@media (min-width: 1280px) {
    .header>div.layout-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .header>div.layout-wrapper.px-4>div.flex.justify-between {
        padding: 0 0 !important;
    }
}

/* ----------------------------------------------------------
   4. Nav menu — horizontal dropdown (tiles side by side)
   ---------------------------------------------------------- */
ul.header-menu-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    gap: 4px !important;
}

.header-menu-nav>li.first-dropdown-li {
    position: relative !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;


    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
    padding: 10px 6px !important;
    z-index: 1000 !important;
    border: none !important;
    list-style: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* Ensure horizontal-dropdown also shows on hover */
.header-menu-nav>li.first-dropdown-li:hover>ul.first-dropdown.horizontal-dropdown {
    transform: translateX(-50%) scaleY(1) !important;
    opacity: 1 !important;
    pointer-events: all !important;
    visibility: visible !important;
    display: flex !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li {
    border: none !important;
    flex: 0 0 auto !important;
    min-width: 130px !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li .menuss-hover {
    display: block !important;
    color: #333333 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover>button>div,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover .primary-bg-hover {
    background-color: #1a56db !important;
    border-radius: 6px !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover span {
    color: #ffffff !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li .neg-transition-scale {
    display: none !important;
}

/* ----------------------------------------------------------
   5. Filter page sidebar — completely untouched
   ---------------------------------------------------------- */

/* ============================================================
   FLIPKART CATEGORY BAR — with multi-level flyout submenus
   ============================================================ */

/* CRITICAL: allow flyout panels to overflow the sticky header */
section>.header,
.header {
    overflow: visible !important;
    max-height: none !important;
}

/* The sticky <section> wrapping the header also clips — fix it */
.header,
.header~*,
section.sticky,
.sticky,
section {
    overflow: visible !important;
}

/* Container strip */
.flipkart-category-bar {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 9990;
    overflow: visible !important;
}

/* Scrollable inner row */
.flipkart-cat-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 4px;
}

.flipkart-cat-inner::-webkit-scrollbar {
    display: none;
}

/* Each category wrapper — position context for flyout */
.flipkart-cat-item-wrap {
    position: relative;
    flex: 0 0 auto;
}

/* The visible icon+label tile */
.flipkart-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    padding: 10px 4px 0 4px;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: border-color 0.15s ease;
    cursor: pointer;
    gap: 6px;
}

.flipkart-cat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.flipkart-cat-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.flipkart-cat-label {
    font-size: 11.5px;
    font-weight: 500;
    color: #212121;
    text-align: center;
    line-height: 1.2;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding-bottom: 8px;
    transition: color 0.18s ease, font-weight 0.18s ease;
}

/* ── Hover: only blue label, no underline, no background ── */
.flipkart-cat-item-wrap:hover>.flipkart-cat-item {
    border-bottom-color: transparent;
}

.flipkart-cat-item-wrap:hover>.flipkart-cat-item .flipkart-cat-icon {
    border-radius: 4px;
}

.flipkart-cat-item-wrap:hover>.flipkart-cat-item .flipkart-cat-label {
    color: #1a56db;
    font-weight: 600;
}

/* ── Active (clicked): same rectangular faded blue gradient stays on ── */
.flipkart-cat-item.fk-active {
    border-bottom-color: #1a56db;
}

.flipkart-cat-item.fk-active .flipkart-cat-icon {
    background: linear-gradient(to bottom, rgba(37, 99, 235, 0.35) 0%, rgba(96, 165, 250, 0.10) 70%, transparent 100%);
    border-radius: 4px;
}

.flipkart-cat-item.fk-active .flipkart-cat-label {
    color: #1a56db;
    font-weight: 600;
}

/* Active (clicked) category tile — persistent blue underline + label color */
.flipkart-cat-item.fk-active {
    border-bottom-color: #1a56db;
}

.flipkart-cat-item.fk-active .flipkart-cat-label {
    color: #1a56db;
    font-weight: 600;
}

/* ── Level-1 flyout (drops below the bar) ── */
.fk-flyout-l1 {
    display: none;
    position: fixed;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    border-top: 2px solid #1a56db;
    z-index: 99999;
    padding: 4px 0;
}

/* flyout visibility is controlled entirely by JS (fk-flyout.js) */

/* ── Shared flyout row ── */
.fk-flyout-row {
    position: relative;
}

.fk-flyout-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 13px;
    color: #212121 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    gap: 8px;
    background: transparent !important;
}

.fk-flyout-link span {
    flex: 1;
}

.fk-flyout-link svg {
    flex-shrink: 0;
    color: #878787;
}

.fk-flyout-row:hover>.fk-flyout-link {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

.fk-flyout-row:hover>.fk-flyout-link span {
    color: #ffffff !important;
}

.fk-flyout-row:hover>.fk-flyout-link svg path {
    fill: #ffffff !important;
}

/* ── Level-2 flyout (right of L1) ── */
.fk-flyout-l2 {
    display: none;
    position: absolute;
    top: -4px;
    left: 100%;
    min-width: 210px;
    background: #ffffff;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.12);
    border-top: 2px solid #1a56db;
    z-index: 100000;
    padding: 4px 0;
}

.fk-flyout-row.has-children:hover>.fk-flyout-l2 {
    display: block;
}

/* ── Level-3 flyout (right of L2) ── */
.fk-flyout-l3 {
    display: none;
    position: absolute;
    top: -4px;
    left: 100%;
    min-width: 200px;
    background: #ffffff;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.10);
    border-top: 2px solid #1a56db;
    z-index: 100001;
    padding: 4px 0;
}

.fk-flyout-row.has-children:hover>.fk-flyout-l3 {
    display: block;
}

.fk-flyout-l1,
.fk-flyout-l2,
.fk-flyout-l3 {
    pointer-events: all;
}

/* ============================================================
   NAVBAR — white background
   ============================================================ */
.header {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Nav links text — dark on white */
.header .first-list,
.header .header-menu-nav a,
.header #nav-wrap a {
    color: #212121 !important;
}

/* Download Our App button on white navbar */
.header .test-click {
    background-color: #ffffff !important;
    color: #212121 !important;
}

.header .test-click svg path,
.header .test-click svg rect,
.header .test-click svg circle {
    stroke: #212121 !important;
    fill: #212121 !important;
}

/* ============================================================
   BANNER — one slide at a time, image fills its set height
   ============================================================ */
.slideshow-container {
    height: 500px !important;
    overflow: hidden !important;
}

/* The banner image: respect the CMS-configured height, fill without distortion */
.hero-slide-img,
.custom-swiper .hero-slide-img,
.custom-swiper-full .hero-slide-img,
.custom-swiper .other-slider-images,
.custom-swiper-full .other-slider-images {
    display: block !important;
    width: 100% !important;
    height: 500px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Swiper container must clip overflow so inactive slides are hidden */
.custom-swiper.swiper,
.custom-swiper-full.swiper,
.slider1.swiper {
    height: auto !important;
    overflow: hidden !important;
}

/* Swiper wrapper height follows the active slide */
.custom-swiper .swiper-wrapper,
.custom-swiper-full .swiper-wrapper {
    height: auto !important;
}

/* Each slide: clip its content so nothing bleeds into adjacent slides */
.custom-swiper .swiper-slide,
.custom-swiper-full .swiper-slide {
    height: auto !important;
    overflow: hidden !important;
    /* For fade effect — non-active slides must be fully invisible */
    opacity: 0;
    pointer-events: none;
}

.custom-swiper .swiper-slide.swiper-slide-active,
.custom-swiper-full .swiper-slide.swiper-slide-active {
    opacity: 1;
    pointer-events: auto;
}

/* Prevent banner from sliding under the header */
.layout-wrapper>.w-full.-mt-2 {
    margin-top: 0 !important;
}

/* Download Our App dropdown — above the category bar */
.test-drop {
    z-index: 99999 !important;
}

/* ============================================================
   NAV BAR — remove scrollbar + vertical dropdown with side submenus
   ============================================================ */

/* 1. Remove the scrollbar from the nav ul */
ul.header-menu-nav.custom-border {
    overflow: visible !important;
    white-space: normal !important;
    flex-wrap: nowrap !important;
}

ul.header-menu-nav.custom-border::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
}

#nav-wrap {
    overflow: visible !important;
}

#nav-wrap::-webkit-scrollbar {
    display: none !important;
}

/* 2. Nav first-level dropdown — vertical list, drops below nav item */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    transition: opacity 0.15s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* VERTICAL layout — like the contact page sidebar */
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    min-width: 200px !important;
    max-width: 220px !important;
    width: 200px !important;

    background: #ffffff !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
    border-top: 2px solid #1a56db !important;
    padding: 4px 0 !important;
    z-index: 9999 !important;
}

/* Show on hover */
.header-menu-nav>li.first-dropdown-li:hover>ul.first-dropdown {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: none !important;
}

/* L1 dropdown items — full width rows */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li {
    width: 100% !important;
    min-width: unset !important;
    flex: unset !important;
    border-bottom: 1px solid #f5f5f5 !important;
    position: relative !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li .menuss-hover {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #212121 !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    width: 100% !important;
}

/* Show the right arrow chevron for items with children */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li .neg-transition-scale {
    display: inline-block !important;
}

/* Hover row */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover>button>div,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover .primary-bg-hover {
    background-color: #1a56db !important;
    border-radius: 0 !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover>a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover span {
    color: #ffffff !important;
}

/* 3. L2 child dropdown — opens to the RIGHT of L1 item */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown {
    display: none !important;
    flex-direction: unset !important;
    position: absolute !important;
    top: -2px !important;
    left: 100% !important;
    min-width: 190px !important;
    width: 190px !important;
    background: #ffffff !important;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.12) !important;
    border-top: 2px solid #1a56db !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 4px 0 !important;
    z-index: 10000 !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li:hover>ul.child-dropdown {
    display: block !important;
}

/* L2 items */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li {
    border-bottom: 1px solid #f5f5f5 !important;
    position: relative !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li .menuss-hover {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #212121 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li:hover .primary-bg-hover,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li:hover>button>div {
    background-color: #1a56db !important;
    border-radius: 0 !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li:hover a,
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li:hover span {
    color: #ffffff !important;
}

/* L2 child dropdown (L3) — opens further right */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li>ul.child-dropdown {
    display: none !important;
    position: absolute !important;
    top: -2px !important;
    left: 100% !important;
    min-width: 180px !important;
    background: #ffffff !important;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.10) !important;
    border-top: 2px solid #1a56db !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 4px 0 !important;
    z-index: 10001 !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown>li>ul.child-dropdown>li:hover>ul.child-dropdown {
    display: block !important;
}

/* Override to make first-dropdown horizontal for Pages */
.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown {
    display: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-width: unset !important;
    max-width: none !important;
    width: max-content !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
    z-index: 9999 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.header-menu-nav>li.first-dropdown-li:hover>ul.first-dropdown.horizontal-dropdown {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li {
    width: auto !important;
    min-width: unset !important;
    flex: unset !important;
    border-bottom: none !important;
    border-right: 1px solid #dfdfdf !important;
    position: relative !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li:last-child {
    border-right: none !important;
}

/* RTL Support */
html[dir="rtl"] .header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li {
    border-right: none !important;
    border-left: 1px solid #dfdfdf !important;
}

html[dir="rtl"] .header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li:last-child {
    border-left: none !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li button {
    width: auto !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li a {
    width: auto !important;
    display: block !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li .menuss-hover {
    padding: 10px 20px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li .menuss-hover span {
    width: auto !important;
    white-space: nowrap !important;
}

.header-menu-nav>li.first-dropdown-li>ul.first-dropdown.horizontal-dropdown>li .menuss-hover:hover {
    margin: 0 !important;
}

/* Glassmorphism card */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Center login page with gradient background */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a56db 0%, #2563eb 40%, #FCCA19 100%);
    padding: 2rem;
}

/* ============================================================
   PRODUCT CARD — Hover Actions Bar (Bottom-Center Fix)
   Forces the wishlist/compare/quickview bar to appear
   horizontally centered at the bottom of the product image.
   ============================================================ */

/* Outer wrapper: absolute, bottom-center */
.product-hover>div[class*="absolute"][class*="bottom"],
.product-hover>div[class*="absolute"] {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
    width: max-content !important;
    z-index: 30 !important;
}

/* Inner row: force horizontal flex layout */
.product-hover>div[class*="absolute"]>div,
.product-hover>div[class*="absolute"][class*="bottom"]>div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    padding: 2px 4px !important;
    gap: 0 !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

/* Individual action buttons — ensure they stay inline */
.product-hover>div[class*="absolute"]>div>button,
.product-hover>div[class*="absolute"]>div>a,
.product-hover>div[class*="absolute"]>div>div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 8px !important;
}

/* Fix submenu hover color to be white and background to be blue */
.v4k-mega-menu a:hover,
.v4k-mega-col ul li a:hover,
.header .header-menu-nav .v4k-mega-col ul li a:hover,
.header #nav-wrap .v4k-mega-col ul li a:hover {
    color: #ffffff !important;
    background-color: #1a56db !important;
}

/* ==========================================================
   Product Modal & Page Button Styles (Add to Cart & Buy Now)
   ========================================================== */

/* Add to Cart button default state */
.add-to-cart button,
#item-add-to-cart button {
    background-color: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.add-to-cart button *,
#item-add-to-cart button *,
.add-to-cart button span,
#item-add-to-cart button span {
    color: #1d4ed8 !important;
    fill: #1d4ed8 !important;
    transition: all 0.25s ease-in-out !important;
}

.add-to-cart button svg,
#item-add-to-cart button svg,
.add-to-cart button svg path,
#item-add-to-cart button svg path {
    color: #1d4ed8 !important;
    fill: #1d4ed8 !important;
    transition: all 0.25s ease-in-out !important;
}

/* Add to Cart button hover state */
.add-to-cart:hover button,
.add-to-cart button:hover,
#item-add-to-cart:hover button,
#item-add-to-cart button:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35) !important;
}

.add-to-cart:hover button *,
.add-to-cart button:hover *,
#item-add-to-cart:hover button *,
#item-add-to-cart button:hover *,
.add-to-cart:hover button span,
.add-to-cart button:hover span,
#item-add-to-cart:hover button span,
#item-add-to-cart button:hover span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.add-to-cart:hover button svg,
.add-to-cart button:hover svg,
#item-add-to-cart:hover button svg,
#item-add-to-cart button:hover svg,
.add-to-cart:hover button svg path,
.add-to-cart button:hover svg path,
#item-add-to-cart:hover button svg path,
#item-add-to-cart button:hover svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Buy Now button default state */
.buy-now-btn button,
#item-buy-now button {
    background-color: #1e293b !important;
    border: 1.5px solid #1e293b !important;
    color: #ffffff !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.buy-now-btn button *,
#item-buy-now button *,
.buy-now-btn button span,
#item-buy-now button span {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: all 0.25s ease-in-out !important;
}

.buy-now-btn button svg,
#item-buy-now button svg,
.buy-now-btn button svg path,
#item-buy-now button svg path,
.buy-now-btn button svg g,
#item-buy-now button svg g,
.buy-now-btn button svg circle,
#item-buy-now button svg circle {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: all 0.25s ease-in-out !important;
}

/* Buy Now button hover state */
.buy-now-btn:hover button,
.buy-now-btn button:hover,
#item-buy-now:hover button,
#item-buy-now button:hover {
    background-color: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35) !important;
}

.buy-now-btn:hover button *,
.buy-now-btn button:hover *,
#item-buy-now:hover button *,
#item-buy-now button:hover *,
.buy-now-btn:hover button span,
.buy-now-btn button:hover span,
#item-buy-now:hover button span,
#item-buy-now button:hover span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.buy-now-btn:hover button svg,
.buy-now-btn button:hover svg,
#item-buy-now:hover button svg,
#item-buy-now button:hover svg,
.buy-now-btn:hover button svg path,
.buy-now-btn button:hover svg path,
#item-buy-now:hover button svg path,
#item-buy-now button:hover svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}