/* ================================================================
   CYBERPUERTA-STYLE HEADER
   Replicates CyberPuerta.mx topbar design, interactivity & UX
   ================================================================ */

/* ---- CSS Variables ---- */
:root {
    --cp-primary: #E30613;
    --cp-primary-dark: #b8050f;
    --cp-primary-light: #fde8e9;
    --cp-orange: #E30613;
    --cp-orange-dark: #b8050f;
    --cp-text: #333333;
    --cp-text-light: #666666;
    --cp-text-muted: #999999;
    --cp-bg-white: #ffffff;
    --cp-bg-light: #f5f5f5;
    --cp-border: #e0e0e0;
    --cp-border-light: #eeeeee;
    --cp-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --cp-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
    --cp-radius: 4px;
    --cp-transition: 0.2s ease;
    --cp-header-height-main: 64px;
    --cp-header-height-nav: 42px;
    --cp-megamenu-width-left: 240px;
}

/* ---- Hide original header elements ---- */
/* Amazy theme overrides */
.header_topbar_area,
.header_top_area,
.main_header_area {
    display: none !important;
}

/* Default theme overrides - hide old submenu */
.sub_menu,
.promotion_bar {
    display: none !important;
}

/* Reset default theme header wrapper */
.header_part.cp-header-wrapper {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* ---- Override Bootstrap global a:hover { color: #0056b3 !important } ---- */
.cp-header-main a:hover,
.cp-header-main a:focus {
    color: var(--cp-primary) !important;
    text-decoration: none !important;
}

.cp-header-logo:hover,
.cp-header-logo:focus {
    color: inherit !important;
}

.cp-header-auth__link:hover,
.cp-header-auth__link:focus {
    color: var(--cp-primary) !important;
}

.cp-header-cart:hover,
.cp-header-cart:focus {
    color: var(--cp-text) !important;
    text-decoration: none !important;
}

.cp-header-cart:hover .cp-header-cart__label,
.cp-header-cart:hover .cp-header-cart__sublabel {
    color: var(--cp-primary) !important;
}

.cp-header-icon-btn:hover {
    color: var(--cp-primary) !important;
}

/* Nav bar links (white on red) */
.cp-header-nav a:hover,
.cp-header-nav a:focus {
    text-decoration: none !important;
}

.cp-header-quicklinks__link:hover,
.cp-header-quicklinks__link:focus {
    color: #ffffff !important;
}

.cp-header-nav__icon-link:hover {
    color: #ffffff !important;
}

/* Mega menu links */
.cp-megamenu a:hover,
.cp-megamenu a:focus {
    color: var(--cp-primary) !important;
    text-decoration: none !important;
}

.cp-megamenu__cat-item.active a,
.cp-megamenu__cat-item a:hover {
    color: var(--cp-primary) !important;
}

.cp-megamenu__sub-link:hover {
    color: var(--cp-primary) !important;
}

/* Auth dropdown */
.cp-auth-dropdown__btn--login:hover {
    color: #ffffff !important;
}

.cp-auth-dropdown__btn--register:hover {
    color: var(--cp-text) !important;
}

.cp-auth-dropdown__list li a:hover {
    color: var(--cp-primary) !important;
}

.cp-auth-dropdown__footer a:hover {
    color: #dc3545 !important;
}

/* Mobile menu */
.cp-mobile-menu a:hover {
    color: var(--cp-primary) !important;
    text-decoration: none !important;
}

.cp-mobile-menu__auth-btn:hover {
    color: #ffffff !important;
}

.cp-mobile-menu__auth-btn--alt:hover {
    color: var(--cp-text) !important;
}

/* ================================================================
   ROW 1: MAIN HEADER (Logo + Search + Auth + Cart)
   ================================================================ */
.cp-header-main {
    background: var(--cp-bg-white);
    border-bottom: 1px solid var(--cp-border-light);
    padding: 10px 0;
    position: relative;
    z-index: 1001;
}

.cp-header-main__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--cp-header-height-main);
}

/* Logo */
.cp-header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cp-header-logo img {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* Search Bar */
.cp-header-search {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.cp-header-search__form {
    display: flex;
    align-items: center;
    position: relative;
}

.cp-header-search__input {
    width: 100%;
    height: 42px;
    padding: 0 50px 0 16px;
    border: 2px solid var(--cp-border);
    border-radius: var(--cp-radius);
    font-size: 14px;
    color: var(--cp-text);
    background: var(--cp-bg-white);
    outline: none;
    transition: border-color var(--cp-transition);
}

.cp-header-search__input::placeholder {
    color: var(--cp-text-muted);
}

.cp-header-search__input:focus {
    border-color: var(--cp-primary);
}

.cp-header-search__btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 42px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-orange);
    color: white;
    border: none;
    border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
    cursor: pointer;
    transition: background var(--cp-transition);
}

.cp-header-search__btn:hover {
    background: var(--cp-orange-dark);
}

.cp-header-search__btn svg {
    width: 20px;
    height: 20px;
}

/* Live Search Results */
.cp-live-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-top: none;
    border-radius: 0 0 var(--cp-radius) var(--cp-radius);
    box-shadow: var(--cp-shadow);
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.cp-header-search__input:focus~.cp-live-search,
.cp-live-search:hover {
    display: block;
}

/* Auth Section */
.cp-header-auth {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--cp-radius);
    cursor: pointer;
    transition: background var(--cp-transition);
    border: 1px solid var(--cp-border);
    text-decoration: none;
}

.cp-header-auth:hover {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary);
}

.cp-header-auth__icon {
    color: var(--cp-primary);
    display: flex;
    align-items: center;
}

.cp-header-auth__icon svg {
    width: 24px;
    height: 24px;
}

.cp-header-auth__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cp-header-auth__label {
    font-size: 12px;
    color: var(--cp-text-light);
}

.cp-header-auth__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text);
    text-decoration: none;
    transition: color var(--cp-transition);
    white-space: nowrap;
}

.cp-header-auth__link:hover {
    color: var(--cp-primary);
}

/* Cart */
.cp-header-cart {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--cp-radius);
    text-decoration: none;
    transition: background var(--cp-transition);
    border: 1px solid var(--cp-border);
}

.cp-header-cart:hover {
    background: var(--cp-primary-light);
    border-color: var(--cp-primary);
    text-decoration: none;
}

.cp-header-cart__icon {
    position: relative;
    color: var(--cp-primary);
    display: flex;
    align-items: center;
}

.cp-header-cart__icon svg {
    width: 24px;
    height: 24px;
}

.cp-header-cart__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--cp-orange);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.cp-header-cart__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cp-header-cart__label {
    font-size: 12px;
    color: var(--cp-text-light);
}

.cp-header-cart__sublabel {
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text);
}


/* ================================================================
   ROW 2: NAVIGATION BAR
   ================================================================ */
.cp-header-nav {
    background: var(--cp-primary);
    border-bottom: 1px solid var(--cp-primary-dark);
    position: relative;
    z-index: 1000;
}

.cp-header-nav__inner {
    display: flex;
    align-items: center;
    height: var(--cp-header-height-nav);
    gap: 0;
}

/* Categories Dropdown */
.cp-categories-dropdown {
    position: relative;
    flex-shrink: 0;
}

.cp-categories-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: var(--cp-header-height-nav);
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all var(--cp-transition);
    white-space: nowrap;
}

.cp-categories-dropdown__toggle:hover,
.cp-categories-dropdown.open .cp-categories-dropdown__toggle {
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.cp-categories-dropdown__toggle svg {
    flex-shrink: 0;
}

.cp-categories-dropdown__chevron {
    transition: transform var(--cp-transition);
}

.cp-categories-dropdown.open .cp-categories-dropdown__chevron {
    transform: rotate(180deg);
}


/* ================================================================
   MEGA MENU
   ================================================================ */
.cp-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 700px;
    max-width: 900px;
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-top: 3px solid var(--cp-primary);
    border-radius: 0 0 var(--cp-radius) var(--cp-radius);
    box-shadow: var(--cp-shadow-lg);
    z-index: 1100;
    flex-direction: row;
}

.cp-categories-dropdown.open .cp-megamenu {
    display: flex;
}

/* Left: Category List */
.cp-megamenu__categories {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    width: var(--cp-megamenu-width-left);
    min-width: var(--cp-megamenu-width-left);
    border-right: 1px solid var(--cp-border-light);
    background: var(--cp-bg-white);
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for categories */
.cp-megamenu__categories::-webkit-scrollbar {
    width: 4px;
}

.cp-megamenu__categories::-webkit-scrollbar-track {
    background: transparent;
}

.cp-megamenu__categories::-webkit-scrollbar-thumb {
    background: var(--cp-border);
    border-radius: 2px;
}

.cp-megamenu__cat-item a {
    display: flex;
    align-items: center;
    padding: 9px 12px 9px 16px;
    font-size: 13px;
    color: var(--cp-primary);
    text-decoration: none;
    transition: all 0.15s ease;
    gap: 8px;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
}

.cp-megamenu__cat-item a i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--cp-primary);
}

.cp-megamenu__cat-item a span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-megamenu__arrow {
    flex-shrink: 0;
    color: var(--cp-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cp-megamenu__cat-item:hover .cp-megamenu__arrow,
.cp-megamenu__cat-item.active .cp-megamenu__arrow {
    opacity: 1;
    color: var(--cp-primary);
}

.cp-megamenu__cat-item:hover a,
.cp-megamenu__cat-item.active a {
    background: var(--cp-primary-light);
    color: var(--cp-primary-dark);
}

.cp-megamenu__cat-item.active a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cp-primary);
    border-radius: 0 2px 2px 0;
}

/* Right: Subcategories Panel */
.cp-megamenu__subcategories {
    display: none;
    flex: 1;
    padding: 16px 20px;
    min-height: 300px;
    animation: cpFadeIn 0.15s ease;
}

.cp-megamenu__subcategories.active {
    display: block;
}

@keyframes cpFadeIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

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

.cp-megamenu__sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cp-border-light);
}

.cp-megamenu__sub-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cp-text);
    text-decoration: none;
    transition: color var(--cp-transition);
}

.cp-megamenu__sub-title:hover {
    color: var(--cp-primary);
}

.cp-megamenu__popular-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-text);
}

.cp-megamenu__sub-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

.cp-megamenu__sub-col {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.cp-megamenu__sub-link {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    color: var(--cp-text-light);
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.cp-megamenu__sub-link:hover {
    color: var(--cp-primary);
    padding-left: 4px;
}

.cp-megamenu__sub-link--hidden {
    display: none;
}

.cp-megamenu__sub-link--hidden.cp-show {
    display: block;
}

.cp-megamenu__show-more-wrap {
    width: 100%;
    margin-top: 8px;
}

.cp-megamenu__show-more {
    background: none;
    border: none;
    color: var(--cp-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    transition: color var(--cp-transition);
}

.cp-megamenu__show-more:hover {
    color: var(--cp-primary-dark);
}


/* Breadcrumb */
.cp-header-breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 13px;
    color: var(--cp-text-light);
    overflow: hidden;
    white-space: nowrap;
}

.cp-header-breadcrumb a {
    color: var(--cp-text-light);
    text-decoration: none;
    transition: color var(--cp-transition);
}

.cp-header-breadcrumb a:hover {
    color: var(--cp-primary);
}

.cp-header-breadcrumb .cp-breadcrumb-sep {
    margin: 0 8px;
    color: var(--cp-text-muted);
    font-size: 11px;
}

.cp-header-breadcrumb .cp-breadcrumb-current {
    color: var(--cp-text);
    font-weight: 500;
}


/* Nav Right */
.cp-header-nav__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.cp-header-nav__icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    transition: all var(--cp-transition);
}

.cp-header-nav__icon-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}


/* Locale Dropdown */
.cp-header-locale {
    position: relative;
}

.cp-header-locale__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--cp-radius);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all var(--cp-transition);
    font-size: 13px;
}

.cp-header-locale__btn:hover,
.cp-header-locale.open .cp-header-locale__btn {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.cp-header-locale__chevron {
    transition: transform var(--cp-transition);
}

.cp-header-locale.open .cp-header-locale__chevron {
    transform: rotate(180deg);
}

.cp-header-locale__panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
    padding: 16px;
    min-width: 220px;
    z-index: 1100;
}

.cp-header-locale.open .cp-header-locale__panel {
    display: block;
}

.cp-header-locale__section {
    margin-bottom: 12px;
}

.cp-header-locale__section label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cp-text-muted);
    margin-bottom: 4px;
}

.cp-header-locale__select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    font-size: 13px;
    background: var(--cp-bg-white);
    color: var(--cp-text);
}

.cp-header-locale__save {
    width: 100%;
    padding: 8px;
    background: var(--cp-primary);
    color: white;
    border: none;
    border-radius: var(--cp-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cp-transition);
}

.cp-header-locale__save:hover {
    background: var(--cp-primary-dark);
}


/* ================================================================
   STICKY HEADER BEHAVIOR
   ================================================================ */
.cp-header-main.cp-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    box-shadow: var(--cp-shadow);
    animation: cpSlideDown 0.3s ease;
}

.cp-header-main.cp-sticky+.cp-header-nav {
    margin-top: calc(var(--cp-header-height-main) + 20px);
}

.cp-header-nav.cp-sticky {
    position: fixed;
    top: calc(var(--cp-header-height-main) + 20px);
    left: 0;
    right: 0;
    z-index: 1049;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

@keyframes cpSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Desktop sticky: both rows stick together */
body.cp-header-is-sticky .cp-header-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    box-shadow: var(--cp-shadow);
    animation: cpSlideDown 0.25s ease;
}

body.cp-header-is-sticky .cp-header-nav {
    position: fixed;
    top: calc(var(--cp-header-height-main) + 20px);
    left: 0;
    right: 0;
    z-index: 1049;
}

body.cp-header-is-sticky .cp-header-spacer {
    display: block;
    height: calc(var(--cp-header-height-main) + 20px + var(--cp-header-height-nav));
}


/* ================================================================
   OVERLAY (when mega menu is open)
   ================================================================ */
.cp-megamenu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    animation: cpFadeOverlay 0.2s ease;
}

.cp-megamenu-overlay.active {
    display: block;
}

@keyframes cpFadeOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* General overlay (for mobile menu) */
.cp-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2050;
    animation: cpFadeOverlay 0.2s ease;
}

.cp-overlay.active {
    display: block;
}


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

/* Tablet */
@media (max-width: 991px) {
    .cp-header-main__inner {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 0;
        gap: 8px;
    }

    .cp-header-logo {
        order: 1;
    }

    .cp-header-auth {
        order: 2;
        margin-left: auto;
        padding: 6px 10px;
    }

    .cp-header-cart {
        order: 3;
        padding: 6px 10px;
    }

    .cp-header-search {
        order: 4;
        max-width: 100%;
        flex-basis: 100%;
    }

    .cp-header-auth__text {
        display: none;
    }

    .cp-header-cart__text {
        display: none;
    }

    .cp-megamenu {
        min-width: 100%;
        max-width: 100%;
        left: 0;
    }

    .cp-megamenu__categories {
        width: 200px;
        min-width: 200px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .cp-header-logo img {
        height: 30px;
        max-width: 120px;
    }

    .cp-header-search__input {
        height: 38px;
        font-size: 13px;
    }

    .cp-header-search__btn {
        height: 38px;
        width: 40px;
    }

    .cp-header-auth {
        padding: 4px 8px;
        border: none;
    }

    .cp-header-cart {
        padding: 4px 8px;
        border: none;
    }

    .cp-categories-dropdown__toggle {
        font-size: 13px;
        padding: 0 12px;
        gap: 6px;
    }

    .cp-categories-dropdown__toggle span {
        display: inline;
    }

    .cp-header-nav__right {
        display: none;
    }

    .cp-megamenu {
        position: fixed;
        top: 0 !important;
        left: 0;
        right: 0;
        bottom: 0;
        min-width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-top: none;
        border-radius: 0;
        flex-direction: column;
        overflow-y: auto;
    }

    .cp-megamenu__categories {
        width: 100%;
        min-width: 100%;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--cp-border-light);
    }

    .cp-megamenu__subcategories {
        width: 100%;
    }

    .cp-megamenu__sub-grid {
        flex-direction: column;
        gap: 0;
    }

    .cp-megamenu__sub-col {
        min-width: 100%;
    }

    /* Mobile back button for subcategories */
    .cp-megamenu__mobile-back {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--cp-primary);
        border-bottom: 1px solid var(--cp-border-light);
        cursor: pointer;
        background: var(--cp-primary-light);
    }

    .cp-megamenu__mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        position: absolute;
        top: 8px;
        right: 8px;
        background: none;
        border: none;
        color: var(--cp-text);
        cursor: pointer;
        font-size: 20px;
        z-index: 10;
    }
}

@media (min-width: 576px) {

    .cp-megamenu__mobile-back,
    .cp-megamenu__mobile-close {
        display: none;
    }
}


/* ================================================================
   ORIGINAL HEADER OVERRIDES
   Hide the original AmazCart/Default header elements
   ================================================================ */

/* Hide original amazy header elements */
header.amazcartui_header .header_area .header_topbar_area,
header.amazcartui_header .header_area .header_top_area,
header.amazcartui_header .header_area .main_header_area,
header.amazcartui_header .mobile_menu {
    display: none !important;
}

header.amazcartui_header .header_area {
    padding: 0;
    background: transparent;
}

header.amazcartui_header #sticky-header {
    background: transparent;
}

/* Hide original default theme elements that may still render */
#top_bar.sub_menu {
    display: none !important;
}

/* Container for the new header */
.cp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header auth dropdown */
.cp-header-auth {
    position: relative;
}

.cp-header-auth__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-lg);
    z-index: 1200;
    overflow: hidden;
}

.cp-header-auth:hover .cp-header-auth__dropdown {
    display: block;
}

.cp-auth-dropdown__actions {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
}

.cp-auth-dropdown__btn {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--cp-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--cp-transition);
}

.cp-auth-dropdown__btn--login {
    background: var(--cp-primary);
    color: white;
}

.cp-auth-dropdown__btn--login:hover {
    background: var(--cp-primary-dark);
    color: white;
}

.cp-auth-dropdown__btn--register {
    background: var(--cp-bg-light);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
}

.cp-auth-dropdown__btn--register:hover {
    background: var(--cp-border);
    color: var(--cp-text);
}

.cp-auth-dropdown__header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--cp-text);
    border-bottom: 1px solid var(--cp-border-light);
    background: var(--cp-bg-light);
}

.cp-auth-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.cp-auth-dropdown__list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--cp-text);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--cp-transition);
}

.cp-auth-dropdown__list li a:hover {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.cp-auth-dropdown__list li a i {
    font-size: 15px;
    color: var(--cp-text-muted);
    width: 18px;
    text-align: center;
}

.cp-auth-dropdown__footer {
    padding: 8px 16px 12px;
    border-top: 1px solid var(--cp-border-light);
}

.cp-auth-dropdown__footer a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cp-text-light);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--cp-transition);
}

.cp-auth-dropdown__footer a:hover {
    color: #dc3545;
}

/* Wishlist icon button */
.cp-header-icon-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--cp-radius);
    color: var(--cp-text-light);
    text-decoration: none;
    transition: all var(--cp-transition);
    position: relative;
}

.cp-header-icon-btn:hover {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.cp-header-icon-btn__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--cp-orange);
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Notifications bell */
.cp-header-notif {
    flex-shrink: 0;
    position: relative;
}

.cp-header-notif__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    border-radius: var(--cp-radius);
    color: var(--cp-text-light);
    cursor: pointer;
    position: relative;
    transition: all var(--cp-transition);
}

.cp-header-notif__btn:hover {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.cp-header-notif__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--cp-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0 4px;
    line-height: 1;
}

.cp-header-notif__panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    background: var(--cp-bg-white);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-lg);
    z-index: 1200;
    overflow: hidden;
}

.cp-header-notif.open .cp-header-notif__panel {
    display: block;
}

.cp-header-notif__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cp-border-light);
    background: var(--cp-bg-light);
}

.cp-header-notif__header span {
    font-weight: 600;
    font-size: 14px;
    color: var(--cp-text);
}

.cp-header-notif__header a {
    font-size: 12px;
    color: var(--cp-primary);
    text-decoration: none !important;
}

.cp-header-notif__header a:hover {
    text-decoration: underline !important;
    color: var(--cp-primary) !important;
}

.cp-header-notif__list {
    max-height: 260px;
    overflow-y: auto;
}

.cp-header-notif__item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--cp-border-light);
    text-decoration: none !important;
    transition: background var(--cp-transition);
}

.cp-header-notif__item:hover {
    background: var(--cp-primary-light);
}

.cp-header-notif__item p {
    margin: 0;
    font-size: 13px;
    color: var(--cp-text);
    line-height: 1.4;
}

.cp-header-notif__item:hover p {
    color: var(--cp-primary) !important;
}

.cp-header-notif__empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--cp-text-muted);
}

.cp-header-notif__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--cp-border-light);
    background: var(--cp-bg-light);
}

.cp-header-notif__footer a {
    font-size: 12px;
    font-weight: 500;
    color: var(--cp-primary);
    text-decoration: none !important;
}

.cp-header-notif__footer a:hover {
    text-decoration: underline !important;
    color: var(--cp-primary) !important;
}

/* Quick links row */
.cp-header-quicklinks {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    margin-left: 16px;
}

.cp-header-quicklinks__link {
    padding: 4px 10px;
    font-size: 13px;
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--cp-radius);
    transition: all var(--cp-transition);
    white-space: nowrap;
    font-weight: 500;
}

.cp-header-quicklinks__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

/* Mobile menu styles */
.cp-mobile-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: var(--cp-bg-white);
    z-index: 2100;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: var(--cp-shadow-lg);
}

.cp-mobile-menu.active {
    left: 0;
}

.cp-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--cp-border-light);
}

.cp-mobile-menu__header .cp-header-logo img {
    height: 32px;
}

.cp-mobile-menu__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cp-text);
    padding: 4px;
}

.cp-mobile-menu__search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cp-border-light);
}

.cp-mobile-menu__search .cp-header-search__form {
    position: relative;
}

.cp-mobile-menu__search .cp-header-search__input {
    width: 100%;
    height: 38px;
    padding: 0 42px 0 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    font-size: 14px;
}

.cp-mobile-menu__search .cp-header-search__btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 38px;
    width: 38px;
}

.cp-mobile-menu__nav {
    padding: 8px 0;
    border-bottom: 1px solid var(--cp-border-light);
}

.cp-mobile-menu__nav a {
    display: block;
    padding: 10px 16px;
    color: var(--cp-text);
    text-decoration: none;
    font-size: 14px;
    transition: background var(--cp-transition);
}

.cp-mobile-menu__nav a:hover {
    background: var(--cp-primary-light);
}

.cp-mobile-menu__categories {
    padding: 12px 16px;
}

.cp-mobile-menu__categories h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cp-text-muted);
    margin-bottom: 8px;
}

.cp-mobile-cat {
    position: relative;
    border-bottom: 1px solid var(--cp-border-light);
}

.cp-mobile-cat__title {
    display: block;
    padding: 10px 30px 10px 0;
    color: var(--cp-text);
    text-decoration: none;
    font-size: 14px;
}

.cp-mobile-cat__toggle {
    position: absolute;
    right: 0;
    top: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--cp-text-muted);
    transition: transform 0.2s;
}

.cp-mobile-cat__toggle.open svg {
    transform: rotate(180deg);
}

.cp-mobile-cat__subs {
    display: none;
    padding: 0 0 8px 16px;
}

.cp-mobile-cat__subs.open {
    display: block;
}

.cp-mobile-cat__subs a {
    display: block;
    padding: 6px 0;
    color: var(--cp-text-light);
    text-decoration: none;
    font-size: 13px;
}

.cp-mobile-cat__subs a:hover {
    color: var(--cp-primary);
}

.cp-mobile-menu__footer {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--cp-border-light);
}

.cp-mobile-menu__auth-btn {
    display: block;
    text-align: center;
    padding: 10px;
    background: var(--cp-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--cp-radius);
    font-size: 14px;
    font-weight: 600;
}

.cp-mobile-menu__auth-btn:hover {
    background: var(--cp-primary-dark);
    color: white;
}

.cp-mobile-menu__auth-btn--alt {
    background: var(--cp-bg-light);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
}

.cp-mobile-menu__auth-btn--alt:hover {
    background: var(--cp-border);
    color: var(--cp-text);
}

/* Desktop hide mobile hamburger trigger (shown via JS in nav) */
.cp-hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
}

@media (max-width: 768px) {
    .cp-hamburger-btn {
        display: flex;
        align-items: center;
    }

    .cp-header-quicklinks {
        display: none;
    }
}

@media (max-width: 575px) {

    .cp-header-auth__text,
    .cp-header-cart__text,
    .cp-header-icon-btn,
    .cp-header-notif {
        display: none;
    }

    .cp-header-main__inner {
        gap: 10px;
    }

    .cp-header-auth {
        padding: 6px 10px;
    }
}