/*--------------------------------------------------------------
PREMIUM MAIN HEADER
--------------------------------------------------------------*/

.site-header{

    width:100%;
    background:#ffffff;
    border-bottom:1px solid var(--color-border);
    position:relative;
    z-index:999;


}

.header-wrapper{

    display:grid;

    grid-template-columns:260px 1fr 260px;

    align-items:center;

    /*justify-content:space-between;*/

    min-height:110px;

    gap:30px;

}

/*--------------------------------------------------------------
LOGO
--------------------------------------------------------------*/

.site-logo{

    display:flex;
    
    align-items:center;
    
}

.site-logo img{

    width:auto;

    max-height:75px;

    transition:.3s ease;

}

/*--------------------------------------------------------------
NAVIGATION
--------------------------------------------------------------*/

.main-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

}

.primary-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:48px;

    list-style:none;

    margin:0;

    padding:0;

}

.primary-menu li{

    margin:0;

    padding:0;

}

.primary-menu a{

    font-size:15px;

    font-weight:500;

    letter-spacing:.5px;

    color:var(--color-dark);

    transition:.3s ease;

}

.primary-menu a:hover{

    color:var(--color-primary);

}

/*--------------------------------------------------------------
HEADER ACTIONS
--------------------------------------------------------------*/

.header-actions{

    display:flex;
    
    justify-content:flex-end;

    align-items:center;

    gap: 18px;

}

.header-icon{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    transition:.3s ease;

}

.header-icon:hover{

    background: #f7f7f7;

}

.header-icon img{

    width:22px;

    height:22px;

}

.cart-icon{

    position:relative;

}

.cart-count{

    position:absolute;

    top:3px;

    right:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#111111;

    color:#ffffff;

    font-size:10px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.header-wishlist{
    position:relative;
}

.putushart-wishlist-count{
    position:absolute;

    top:3px;
    right:3px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#111111;
    color:#ffffff;

    font-size:10px;

    display:flex;
    align-items:center;
    justify-content:center;
}


/*==============================================================
PUTUSHART PREMIUM HEADER SYSTEM V2
==============================================================*/

/* Fixed Header */

.site-header.header-fixed{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:9999;

    background:#ffffff;

    animation:headerSlideDown .35s ease;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* Admin Bar */

body.admin-bar .site-header.header-fixed{

    top:32px;

}

@media(max-width:782px){

    body.admin-bar .site-header.header-fixed{

        top:46px;

    }

}

/* Smooth Header */

.site-header{

    transition:

        min-height .30s ease,

        box-shadow .30s ease,

        background .30s ease;

}

/* Wrapper */

.site-header.header-fixed .header-wrapper{

    min-height:90px;

}

/* Logo */

.site-header .site-logo img{

    transition:transform .30s ease;

}

.site-header.header-fixed .site-logo img{

    transform:scale(.92);

}

/* Navigation */

.site-header .primary-menu{

    transition:gap .30s ease;

}

.site-header.header-fixed .primary-menu{

    gap:42px;

}

/* Header Actions */

.site-header .header-actions{

    transition:gap .30s ease;

}

.site-header.header-fixed .header-actions{

    gap:16px;

}

/* Animation */

@keyframes headerSlideDown{

    from{

        transform:translateY(-100%);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

/*==============================================================
AJAX CART BADGE
==============================================================*/

.cart-count-wrapper{

    position:absolute;

    top:3px;

    right:3px;

}

/*--------------------------------------------------------------
Account Dropdown
--------------------------------------------------------------*/

.putushart-account-menu{
    position:relative;
    display:flex;
    align-items:center;
}

.putushart-account-toggle{
    border:0;
    background:transparent;
    cursor:pointer;
}

.putushart-account-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    right:0;

    width:260px;
    padding:14px;

    background:#ffffff;
    border:1px solid #ece7e1;
    border-radius:14px;

    box-shadow:0 14px 34px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index:9999;
}

.putushart-account-menu.is-open
.putushart-account-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.putushart-account-dropdown__customer,
.putushart-account-dropdown__guest{
    display:flex;
    flex-direction:column;
    gap:4px;

    padding:6px 8px 12px;
    margin-bottom:8px;

    border-bottom:1px solid #eee9e4;
}

.putushart-account-dropdown__customer strong,
.putushart-account-dropdown__guest strong{
    font-size:15px;
    color:#222;
}

.putushart-account-dropdown__customer span,
.putushart-account-dropdown__guest span{
    font-size:13px;
    color:#777;
    word-break:break-word;
}

.putushart-account-dropdown > a{
    display:block;

    padding:10px 8px;

    color:#222;
    text-decoration:none;
    font-size:14px;

    border-radius:8px;
}

.putushart-account-dropdown > a:hover{
    background:#f7f4ef;
}

.putushart-account-dropdown
.putushart-account-logout{
    color:#c62828;
}

/*--------------------------------------------------------------
Account Dropdown - 320px Fix
--------------------------------------------------------------*/

@media (max-width: 360px){

    .putushart-account-dropdown{
        position:fixed;

        top:72px;
        left:12px;
        right:12px;

        width:auto;
        max-width:none;

        margin:0;

        transform:translateY(-6px);
    }

    .putushart-account-menu.is-open
    .putushart-account-dropdown{
        transform:translateY(0);
    }
}

/*--------------------------------------------------------------
PUTUSHART Custom Header Tooltips
--------------------------------------------------------------*/

.header-icon[data-tooltip]{
	position:relative;
}

.header-icon[data-tooltip]::after{
	content:attr(data-tooltip);

	position:absolute;
	top:calc(100% + 10px);
	left:50%;
	transform:translate(-50%, -3px);

	padding:6px 11px;

	background:#f4edf9;
	color:#70498f;

	border:1px solid #e4d6ed;
	border-radius:8px;

	font-size:12px;
	font-weight:500;
	line-height:1.2;
	white-space:nowrap;

	box-shadow:0 5px 14px rgba(0,0,0,.08);

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:
		opacity .18s ease,
		transform .18s ease;

	z-index:10000;
}

.header-icon[data-tooltip]:hover::after,
.header-icon[data-tooltip]:focus-visible::after{
	opacity:1;
	visibility:visible;
	transform:translate(-50%, 0);
}

/* ==========================================================
   PUTUSHART CART NOTIFICATION
   ========================================================== */

.putushart-cart-notification{
    position: fixed;
    top: 88px;
    right: 28px;

    background: #111;
    color: #fff;

    padding: 12px 18px;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;

    box-shadow: 0 8px 25px rgba(0,0,0,0.18);

    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    pointer-events: none;
}

.putushart-cart-notification.is-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Small pointer towards header/cart area */

.putushart-cart-notification::before{
    content: "";
    position: absolute;

    top: -6px;
    right: 24px;

    width: 12px;
    height: 12px;

    background: #111;
    transform: rotate(45deg);
}


/* Mobile */

@media (max-width: 576px){

    .putushart-cart-notification{
        top: 78px;
        right: 12px;
        left: 12px;

        text-align: center;
    }

    .putushart-cart-notification::before{
        right: 28px;
    }
}

/* =========================================================
   PUTUSHART — WISHLIST HEADER NOTIFICATION
========================================================= */

.putushart-wishlist-notification {
    position: absolute;
    top: calc(100% + 22px);
    right: -18px;

    width: max-content;
    max-width: 300px;

    padding: 13px 18px;

    background: #111;
    color: #fff;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;

    border-radius: 7px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 99999;

    pointer-events: none;
}


/* Small arrow */

.putushart-wishlist-notification::before {
    content: "";

    position: absolute;

    top: -7px;
    right: 20px;

    width: 14px;
    height: 14px;

    background: #111;

    transform: rotate(45deg);
}


/* Visible state */

.putushart-wishlist-notification.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}