/* ========== Popup Layout (rounded, clean) ========== */
.w2wasp-opened{ overflow:hidden; }

.w2wasp{ position:fixed; inset:0; z-index:999999; display:block; }
.w2wasp[aria-hidden="true"]{ display:none; }
.w2wasp__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.SearchWrap {width:600px}
/* Dialog */
.w2wasp__dialog{
    position: absolute;
    z-index: 1;
    max-width: 980px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    padding: 18px 20px 22px;
    display: inline-flex;
    padding: 40px 37px 40px 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border-radius: var(--Cards-Radius-Medium, 60px);
    background: var(--Surface-Base, #FFF);
    margin: auto;
    width: 52%;
    left: 24%;
	    top: 15%;
    overflow: hidden;
}
.w2wasp__dialog .w2wasp__section .product-card {
	gap:16px;
}
.content-box{
	display: flex;
    flex-direction: column;
    height: 400px;
    overflow: auto;
    width: 100%;
    overflow-x: hidden;
}
/* Top bar: search input + search btn + close */
.w2wasp__top{ display:flex; align-items:center; gap:12px;width:100%; }
.w2wasp__searchbar{
	display: flex;
    width: 100%;
    padding-left: 20px;
    justify-content: space-between;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #30A67F;
	color: rgba(54, 54, 53, 0.50);
	font-family: "Noto Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.w2wasp__input{ 
	flex:1; 
	border:none; 
	background:transparent;
	border: 0px !important;
	background: #fff !important;	
	color: rgba(54, 54, 53, 0.50);
	font-family: "Noto Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-left: 8px;
}
.w2wasp__submit{
	display: flex;
    padding: 17px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
	border-radius: var(--buttons-nav-radius-medium, 32px);
    background: var(--Fill-On-Surface-Primary, #30A67F);
	color: var(--Text-On-Brand-Primary, #E6F4EF);
    text-align: center;
	font-family: "Noto Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 640;
	line-height: 24px; 
	letter-spacing: 0.2px;
}
.w2wasp__close{
display: flex;
width: 60px;
height: 60px;
padding: 17px 30px;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: 32px;
border: 1px solid #444441;	
font-size: 24px;	
background: transparent;	
}

/* Recent */
.w2wasp__recent{ margin-top:12px; display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; flex-direction:column;}
.w2wasp__recent-label{ 
color: #7C7C7A;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
letter-spacing: 0.2px;
}
.w2wasp__recent-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.w2wasp__muted{ color:#aaa; padding:6px 0; }
.w2wasp-chip{
display: flex;
padding: 7px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 20px;
border: 1px solid #363635;	
color: #363635;
text-align: center;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
letter-spacing: 0.2px;	
background:transparent;	
}
.w2wasp-chip button{
    border: 0px;
    background: transparent;
    padding: 0;	
color: #363635;
text-align: center;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
letter-spacing: 0.2px;		
}

/* Sections */
.w2wasp__section{
	width:100%;
}
.w2wasp__section-title{ 
color: #7C7C7A;
text-align: center;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
letter-spacing: 0.2px;
margin-bottom: 8px;	
}

/* Grid */
.w2wasp__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
@media (max-width: 900px){
  .w2wasp__dialog{ 
	    width: 90%;
        margin: auto;
        left: 6%;
	    display: flex;
	    padding: 24px 16px;
	    flex-direction: column;
	    align-items: flex-start;
	    gap: 40px; 
	    border-radius: 20px;
        background: #FFF;
}
  .w2wasp__grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Card */
.w2wasp-card{ border:1px solid #eee; border-radius:18px; overflow:hidden; background:#fff; transition:transform .15s ease; }
.w2wasp-card:hover{ transform:translateY(-2px); }
.w2wasp-link{ text-decoration:none; color:inherit; display:block; }
.w2wasp-thumb{ aspect-ratio:1/1; background:#f3f3f3; display:flex; align-items:center; justify-content:center; }
.w2wasp-thumb img{ width:100%; height:100%; object-fit:cover; }
.w2wasp-content{ padding:10px; display:flex; flex-direction:column; }
.w2wasp-name{ font-size:15px; font-weight:600; line-height:1.35; margin:0; }
.w2wasp-price{ margin-top:6px; font-weight:700; font-size:14px; color:#222; }

/* Trigger button (header) */
.w2wasp-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid #e2e2e2; background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; }
.w2wasp-btn__icon{ font-size:16px; }
/* Default: hide nothing */
.sm-hidden { display: flex; }
.lg-hidden { display: flex; }

/* Small devices (max 767px) me sm-hidden ko hide karo */
@media (max-width: 980px){
	.w2wasp__submit{
		padding: 7px 20px;
		font-size: 16px;
		line-height: 21px;
	}
	header#masthead.fixed .SearchWrap{
		top: 6px;
	}
}
@media (max-width: 767px) {
  .sm-hidden { display: none !important; }
	.w2wasp__searchbox{
		float: right;
		display: flex;
		padding: 12px;
        align-items: center;
        gap: 160px;
        border-radius: 100%;
        border: 1px solid #30A67F;
        width: 40px;
        height: 40px;
	}
	.w2wasp__searchbar2{
		display: flex;
		width: 100%;
		padding: 8px;
		justify-content: space-between;
		align-items: center;
		border-radius: 40px;
		border: 1px solid #30A67F;
		color: rgba(54, 54, 53, 0.50);
		font-family: "Noto Sans";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}	
	.w2wasp__submit{
		display: flex;
        height: 32px;
        padding: 8px 10px;
        justify-content: center;
        align-items: center;
        gap: 6.4px;
	}
	.w2wasp__close{
		display: flex;
		width: 48px;
		height: 48px;
		padding: 13.6px 22px;
		justify-content: center;
		align-items: center;
		gap: 6.4px;
		aspect-ratio: 1/1;
		border-radius: 38.4px;
		border: 0.8px solid #FF3B30;	
		color: #FF3B30;
	}
}

/* Large devices (min 768px) me lg-hidden ko hide karo */
@media (min-width: 768px) {
  .lg-hidden { display: none !important; }
}