/* =========================
HEART (SHOP)
========================= */

.wl-heart{
position:absolute;
top:14px;
right:14px;

width:38px;
height:38px;

background:#eee;
border-radius:50%;

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

cursor:pointer;
z-index:20;
}

.products .product{
position:relative;
}

.wl-heart-fa{
font-size:18px;
color:#999;
transition:color .2s ease;
}

.wl-heart:hover .wl-heart-fa,
.wl-product-wishlist:hover .wl-heart-fa{
color:#d32f2f;
}

.wl-active .wl-heart-fa{
color:#d32f2f;
}


/* =========================
TABLE
========================= */

.wl-table{
width:100%;
border-collapse:collapse;
text-align:center;
}

.wl-table td{
padding:12px;
border-bottom:1px solid #eee;
vertical-align:middle;
}

/* IMAGE */

.wl-table img{
width:60px;
height:60px;
object-fit:cover;
border-radius:6px;
margin:auto;
display:block;
}

/* PRODUCT */

.wl-product-link{
text-decoration:none;
color:#333;
font-weight:500;
transition:color .2s ease;
}

.wl-product-link:hover{
color:#d32f2f;
}

/* PRICE */

.wl-price{
font-weight:600;
}

/* ADD TO CART */

.wl-cart .button{
padding:8px 14px;
font-size:13px;
}

/* REMOVE BUTTON */

.wl-remove-btn,
.wl-drawer-remove{
width:28px;
height:28px;

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

border-radius:50%;
border:1px solid #ddd;
background:#fff;

font-size:14px;
color:#999;

cursor:pointer;
transition:all .2s ease;
}

.wl-remove-btn:hover,
.wl-drawer-remove:hover{
background:#d32f2f;
color:#fff;
border-color:#d32f2f;
}


/* =========================
POPUP
========================= */

.wl-popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

background:#111;
color:#fff;

padding:20px 26px;
border-radius:6px;

display:none;
z-index:9999;
text-align:center;

animation:wlPopup .25s ease;
}

@keyframes wlPopup{
from{opacity:0; transform:translate(-50%,-60%) scale(.95);}
to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

.wl-popup-link{
color:#fff;
font-weight:600;
text-decoration:none;
}

.wl-popup-link:hover{
color:#aaa;
}


/* =========================
DRAWER
========================= */

#wl-drawer{
position:fixed;
top:0;
right:0;
width:100%;
height:100%;
pointer-events:none;
z-index:9999;
}

.wl-drawer-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.35);
opacity:0;
transition:opacity .3s;
}

.wl-drawer-panel{
position:absolute;
right:-420px;
top:0;
width:420px;
height:100%;

background:#fff;
box-shadow:-6px 0 20px rgba(0,0,0,.15);

display:flex;
flex-direction:column;
transition:right .35s ease;
}

#wl-drawer.wl-open{
pointer-events:auto;
}

#wl-drawer.wl-open .wl-drawer-overlay{
opacity:1;
}

#wl-drawer.wl-open .wl-drawer-panel{
right:0;
}

/* drawer content */

.wl-drawer-body{
padding:15px;
overflow:auto;
}

.wl-drawer-list{
list-style:none;
margin:0;
padding:0;
}

.wl-drawer-item{
display:flex;
align-items:center;
gap:12px;
padding:12px 0;
border-bottom:1px solid #eee;
}

.wl-drawer-item img{
width:55px;
height:55px;
object-fit:contain;
}

.wl-drawer-name{
flex:1;
font-size:14px;
color:#333;
}

.wl-drawer-name:hover{
color:#d32f2f;
}


/* =========================
HEADER ICON
========================= */

.wl-counter{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:20px;
cursor:pointer;
margin-right:18px;
}

.wl-heart-icon{
font-size:22px;
color:#ccc;
transition:color .2s;
}

.wl-counter:hover .wl-heart-icon{
color:#d32f2f;
}

.wl-counter-badge{
position:absolute;
top:-10px;
right:-12px;

width:18px;
height:18px;

background:#d32f2f;
color:#fff;

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

border-radius:50%;
font-size:10px;
}


/* =========================
MOBILE (CARD LAYOUT)
========================= */

@media (max-width: 768px){

.wl-table,
.wl-table tbody,
.wl-table tr,
.wl-table td{
display:block;
width:100%;
}

.wl-table tr{
border:1px solid #eee;
border-radius:10px;
padding:18px;
margin-bottom:18px;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.wl-table td{
text-align:center;
border:none;
padding:6px 0;
}

.wl-table img{
width:95px;
height:95px;
object-fit:contain;
}

.wl-product-link{
font-size:15px;
margin:6px 0;
}

.wl-table td:nth-child(4),
.wl-table td:nth-child(5){
display:inline-block;
}

.wl-remove-btn{
margin-left:10px;
}

/* =========================
MOBILE: REMOVE ICON TOP RIGHT
========================= */

@media (max-width: 768px){

/* make card relative */

.wl-table tr{
position:relative;
}

/* position remove icon */

.wl-remove-btn{
position:absolute;
top:10px;
right:10px;

margin:0; /* remove previous centering */
}

/* slightly smaller for mobile */

.wl-remove-btn{
width:26px;
height:26px;
font-size:13px;
}

}

}


/* =========================
LOGIN POPUP
========================= */

#wl-login-popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:9999;
}

.wl-login-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
}

.wl-login-modal{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

background:#fff;
padding:28px;
border-radius:10px;
width:90%;
max-width:340px;
text-align:center;
}

.wl-login-actions{
display:flex;
gap:10px;
justify-content:center;
margin-top:15px;
}

.wl-login-btn{
background:#111;
color:#fff;
padding:8px 14px;
border-radius:20px;
text-decoration:none;
}

.wl-login-btn:hover{
	color:#ccc;
}

.wl-register-btn{
border:1px solid #ccc;
padding:8px 14px;
border-radius:20px;
text-decoration:none;
color:#333;
}

/* =========================
FIX WISHLIST BADGE IN GNOC MENU
========================= */

/* keep icon tight */

#gnocc-panel .wl-counter{
margin-top:8px;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto !important;
}

/* fix badge position */

#gnocc-panel .wl-counter-badge{
position:absolute;
top:5px;
right:-6px;
transform:scale(0.95);
}

/* prevent menu stretching the icon */

#gnocc-panel a .wl-counter{
display:inline-flex !important;
}

/* =========================
DRAWER FOOTER LINK
========================= */

.wl-drawer-footer{
padding:18px 20px;
text-align:left; /* looks more premium than center */
}

.wl-drawer-link{
display:inline-block;

font-size:15px;
font-weight:600;

color:#000;
text-decoration:none;

padding:6px 0;

transition:color .2s ease;
}

.wl-drawer-link:hover{
color:#888;
}

/* =========================
DRAWER HEADER
========================= */

.wl-drawer-header{
display:flex;
justify-content:space-between;
align-items:center;

padding:18px 20px;

border-bottom:1px solid #eee;

font-size:16px;
font-weight:600;

color:#000;
}

.wl-drawer-title{
font-weight:600;
color:#000;
}

.wl-drawer-close{
font-size:20px;
cursor:pointer;
color:#000;
}

/* =========================
LOGIN POPUP CLOSE BUTTON
========================= */

.wl-login-modal{
position:relative; /* IMPORTANT for positioning */
}

/* CLOSE BUTTON */

.wl-login-close{
position:absolute;
top:12px;
right:14px;

font-size:22px; /* bigger */
line-height:1;

cursor:pointer;
color:#333;

transition:all .2s ease;
}

/* HOVER */

.wl-login-close:hover{
color:#d32f2f;
transform:scale(1.1);
}

/* =========================
CENTER REMOVE ICON (DESKTOP)
========================= */

/* ensure column is centered */

.wl-table td:last-child{
text-align:center;
vertical-align:middle;
}

/* center the button itself */

.wl-remove-btn{
margin:0 auto;            /* horizontal center */
display:flex;             /* needed for centering X */
align-items:center;
justify-content:center;
}

/* POPUP LAYOUT FIX */

.wl-popup-inner{
display:flex;
flex-direction:column;   /* stack vertically */
align-items:center;
gap:8px;
}

/* LINK BELOW TEXT */

.wl-popup-link{
display:block;
margin-top:4px;
}

/* REMOVE TEXT SPACING ISSUES */

.menu-wishlist > a{
display:flex;
align-items:center;
}

/* ICON */

.wl-menu-link{
display:inline-flex;
align-items:center;
}

/* HEART */

.wl-heart-icon{
font-size:20px;
color:#ccc;
transition:color .2s;
}

.wl-menu-link:hover .wl-heart-icon{
color:#d32f2f;
}

/* BADGE */

.wl-counter-badge{
position:absolute;
top:-8px;
right:-10px;
}