/* ===== SIDEBAR CATEGORIES MENU ===== */

/* Container for each category row */
.menu-item {
    position: relative;
}

/* Sidebar links */
.sidebar-item {
    transition: all 0.2s ease-in-out;
}

/* Hover effect on category links */
.menu-item:hover>.sidebar-item {
    background-color: #FFF7ED !important;
    /* light orange accent background */
    color: #FF6B00 !important;
    /* orange accent text color */
}

/* Move arrow on hover */
.menu-item:hover .sidebar-arrow {
    transform: translateX(4px);
    color: #FF6B00 !important;
}

/* Mega Menu container */
.mega-menu {
    position: absolute;
    left: 100%;
    top: 0;
    width: 720px;
    min-height: 100%;
    background-color: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 0 16px 16px 16px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    z-index: 100;
    display: none;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show Mega Menu on hover */
.menu-item:hover .mega-menu {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* Mega Menu Grid Layout (columns) */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Column styles */
.mega-menu-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Column Header (Level 2 Category) */
.mega-menu-column h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1F2A44;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 0.25rem;
}

.mega-menu-column h4 a {
    color: #1F2A44;
    transition: color 0.2s;
}

.mega-menu-column h4 a:hover {
    color: #FF6B00;
}

/* Level 3 items list */
.mega-menu-column ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mega-menu-column ul li a {
    font-size: 13px;
    color: #64748B;
    transition: all 0.2s;
}

.mega-menu-column ul li a:hover {
    color: #FF6B00;
    padding-left: 2px;
}

/* ===== PRODUCT FAVORITE BUTTON ===== */

.product-favorite:not(.text-red-500):hover {
    background-color: #ffffff;
    border-color: transparent;
}

.product-favorite:not(.text-red-500):hover i,
.product-favorite:not(.text-red-500):hover svg {
    color: #ef4444;
    stroke: #ef4444;
}

/* ===== HIDE BANNER BLOCKS ===== */
.masters-banner,
.features-strip {
    display: none !important;
}

/* ===== GLOBAL RESPONSIVENESS LIMIT ===== */
html, body {
    min-width: 320px;
    overflow-x: hidden;
}