/* ============================================================
   EG Store — Extras
   1. Hero product mosaic (home hero only)
   2. Header mini-cart dropdown
   3. Back-to-top button
   4. Micro-polish
   ============================================================ */

/* ============================================================
   1. Hero product mosaic
   The hero card holds several small product tiles packed next to
   each other: one featured tile (2x2) + small tiles around it.
   Scoped to .eg-hero so the rest of the store is untouched.
   ============================================================ */
.eg-hero .eg-card.eg-mosaic{
	display:grid!important;
	grid-template-columns:repeat(3,minmax(0,1fr));
	grid-template-rows:repeat(3,minmax(0,1fr));
	gap:10px!important;
	padding:14px!important;
	aspect-ratio:1/1;
	width:100%;
	max-width:520px;
	margin-inline:auto;
	align-content:stretch;
}
.eg-hero .eg-card.eg-mosaic > .elementor-element{
	width:100%!important;
	max-width:100%!important;
	min-width:0;
	margin:0!important;
}
.eg-hero .eg-card.eg-mosaic .elementor-widget-image{
	max-width:none!important;
	margin:0!important;
	height:100%;
}
.eg-hero .eg-card.eg-mosaic .elementor-widget-container,
.eg-hero .eg-card.eg-mosaic .elementor-image{height:100%}
.eg-hero .eg-card.eg-mosaic .elementor-image a{
	display:block;
	height:100%;
	border-radius:14px;
	overflow:hidden;
	background:var(--eg-ivory,#F7F5F0);
}
.eg-hero .eg-card.eg-mosaic img{
	display:block;
	width:100%!important;
	height:100%!important;
	aspect-ratio:auto!important;
	object-fit:cover;
	border-radius:14px!important;
	box-shadow:0 12px 24px rgba(11,46,44,.16)!important;
	transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s ease;
}
.eg-hero .eg-card.eg-mosaic > .elementor-element.egm-main{
	grid-column:span 2;
	grid-row:span 2;
}
.eg-hero .eg-card.eg-mosaic .egm-main .elementor-image a,
.eg-hero .eg-card.eg-mosaic .egm-main img{border-radius:18px!important}
.eg-hero .eg-card.eg-mosaic .elementor-image a:hover img{
	transform:scale(1.06);
	box-shadow:0 18px 34px rgba(11,46,44,.26)!important;
}
.eg-hero .eg-card.eg-mosaic .elementor-image a:focus-visible{
	outline:2px solid var(--eg-gold,#C8A45C);
	outline-offset:2px;
}
@media (max-width:640px){
	.eg-hero .eg-card.eg-mosaic{gap:8px!important;padding:10px!important}
}

/* ============================================================
   2. Header mini-cart dropdown
   ============================================================ */
.egh-cart-wrap{position:relative;display:flex;align-items:center}
.egh-cart-pop{
	position:absolute;
	top:calc(100% + 12px);
	inset-inline-end:0;
	width:346px;
	background:#fff;
	border:1px solid var(--eg-border,#E7E3DA);
	border-radius:20px;
	box-shadow:0 30px 66px rgba(15,61,58,.2);
	padding:4px;
	opacity:0;
	visibility:hidden;
	translate:0 -8px;
	transition:opacity .22s ease,translate .22s ease,visibility .22s ease;
	z-index:70;
}
.egh-cart-wrap:hover .egh-cart-pop,
.egh-cart-wrap:focus-within .egh-cart-pop{opacity:1;visibility:visible;translate:0 0}
.egh-cart-pop-caret{
	position:absolute;
	top:-7px;
	inset-inline-end:30px;
	width:13px;height:13px;
	background:#fff;
	border-inline-start:1px solid var(--eg-border,#E7E3DA);
	border-block-start:1px solid var(--eg-border,#E7E3DA);
	transform:rotate(45deg);
	border-start-start-radius:3px;
}
.egh-cart-pop-in{padding:12px 14px 14px;font-family:var(--eg-font,inherit)}
.egh-cart-pop .widget_shopping_cart_content{position:relative}
.egh-cart-pop .woocommerce-mini-cart{
	list-style:none;margin:0;padding:0;
	max-height:320px;overflow-y:auto;overscroll-behavior:contain;
}
.egh-cart-pop .woocommerce-mini-cart-item{
	display:flex;gap:11px;align-items:flex-start;
	padding:11px 4px;
	border-bottom:1px solid var(--eg-border,#E7E3DA);
}
.egh-cart-pop .woocommerce-mini-cart-item:last-child{border-bottom:0}
.egh-cart-pop .woocommerce-mini-cart-item img{
	width:54px!important;height:54px!important;
	margin:0!important;float:none!important;
	border-radius:12px;object-fit:cover;
	border:1px solid var(--eg-border,#E7E3DA);
}
.egh-cart-pop .woocommerce-mini-cart-item a{
	color:var(--eg-ink,#14201E);
	font-family:var(--eg-font-head,'Cairo',sans-serif);
	font-weight:600;font-size:13.5px;line-height:1.55;
	text-decoration:none;
}
.egh-cart-pop .woocommerce-mini-cart-item a:hover{color:var(--eg-primary,#0F3D3A)}
.egh-cart-pop .woocommerce-mini-cart-item .quantity{
	display:block;color:var(--eg-muted,#6C7A76);font-size:12.5px;margin-top:2px;
}
.egh-cart-pop .woocommerce-mini-cart-item .remove{
	color:#C0392B!important;
	font-size:19px;line-height:1;
	text-decoration:none;
	order:2;
	margin-inline-start:auto;
	align-self:flex-start;
}
.egh-cart-pop .woocommerce-mini-cart__total{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin:10px 0 0;padding:12px 4px;
	border-top:1px solid var(--eg-border,#E7E3DA);
	font-family:var(--eg-font-head,'Cairo',sans-serif);
	font-weight:800;font-size:15px;color:var(--eg-primary,#0F3D3A);
}
.egh-cart-pop .woocommerce-mini-cart__buttons{
	display:flex;gap:8px;flex-wrap:wrap;margin:0;
}
.egh-cart-pop .woocommerce-mini-cart__buttons a{
	flex:1 1 auto;text-align:center;
	padding:11px 14px;border-radius:999px;
	background:var(--eg-ivory,#F7F5F0);
	border:1px solid var(--eg-border,#E7E3DA);
	color:var(--eg-primary,#0F3D3A);
	font-family:var(--eg-font-head,'Cairo',sans-serif);
	font-weight:700;font-size:13.5px;
	text-decoration:none;
	transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.egh-cart-pop .woocommerce-mini-cart__buttons a.checkout{
	background:linear-gradient(135deg,#155049,#0F3D3A);
	border-color:transparent;color:#fff;
}
.egh-cart-pop .woocommerce-mini-cart__buttons a:hover{
	transform:translateY(-2px);
	background:var(--eg-gold,#C8A45C);
	border-color:transparent;color:#14201E;
}
.egh-cart-pop .woocommerce-mini-cart__buttons a.checkout:hover{color:#132A28}
.egh-cart-pop .woocommerce-mini-cart__empty-message{
	margin:0;padding:20px 10px;text-align:center;
	color:var(--eg-muted,#6C7A76);font-size:14px;
}
@media (hover:none),(max-width:1080px){
	.egh-cart-pop{display:none!important}
}

/* ============================================================
   3. Back-to-top button
   ============================================================ */
.eg-totop{
	position:fixed;
	inset-inline-end:22px;
	bottom:22px;
	z-index:9001;
	width:50px;height:50px;
	display:grid;place-items:center;
	padding:0;border:0;border-radius:50%;
	background:linear-gradient(135deg,#155049,#0F3D3A);
	color:#fff;
	cursor:pointer;
	box-shadow:0 16px 34px rgba(15,61,58,.32);
	opacity:0;visibility:hidden;translate:0 16px;
	transition:opacity .28s ease,translate .28s ease,visibility .28s ease,background .25s ease,box-shadow .25s ease,color .25s ease;
}
.eg-totop.is-on{opacity:1;visibility:visible;translate:0 0}
.eg-totop:hover{
	background:linear-gradient(135deg,#E0C078,#C8A45C);
	color:#132A28;
	box-shadow:0 20px 42px rgba(200,164,92,.45);
	translate:0 -3px;
}
.eg-totop:active{translate:0 0}
.eg-totop:focus-visible{outline:2px solid var(--eg-gold,#C8A45C);outline-offset:3px}
.eg-totop svg{
	width:22px;height:22px;
	fill:none;stroke:currentColor;
	stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:640px){
	.eg-totop{inset-inline-end:14px;bottom:14px;width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
	.eg-totop{transition:opacity .01s ease,visibility .01s ease}
}

/* ============================================================
   4. Micro-polish
   ============================================================ */
.egh-count.is-bump{animation:egBump .5s cubic-bezier(.2,.8,.3,1)}
@keyframes egBump{
	0%{transform:scale(1)}
	35%{transform:scale(1.4)}
	100%{transform:scale(1)}
}
.egm-tile img{will-change:transform}

/* ============================================================
   5. Hero layout — copy on the RIGHT, product mosaic on the LEFT
   Rebuilt as a 2-column grid so the two columns never overlap
   (auto margins used to push the card over the copy's text).
   ============================================================ */
.eg-hero > .e-con-inner{
	display:grid!important;
	grid-template-columns:minmax(0,1fr) 520px;
	align-items:center;
	gap:40px 48px;
}
.eg-hero .eg-hero-copy{
	display:flex!important;
	flex-direction:column;
	gap:20px!important;
	width:auto!important;
	max-width:none!important;
	min-width:0;
}
.eg-hero .eg-card.eg-mosaic{
	margin-inline:0!important;
	width:100%!important;
	justify-self:center;
}
/* the -40% badge must sit on the outer (left) edge of the card,
   never on top of the copy */
.eg-hero .eg-card:after{right:auto!important;inset-inline-end:-14px!important}
@media (max-width:1024px){
	.eg-hero > .e-con-inner{grid-template-columns:minmax(0,1fr);gap:32px 0}
	.eg-hero .eg-card.eg-mosaic{max-width:520px}
}

/* ============================================================
   6. Header search — perfectly centred between logo and actions
   ============================================================ */
@media (min-width:1081px){
	.egh-shell.egh-main-in{
		display:grid!important;
		grid-template-columns:1fr minmax(0,min(620px,calc(100% - 760px))) 1fr;
		column-gap:20px;
		align-items:center;
	}
	.egh-search{width:100%;min-width:0;max-width:none;margin-inline:0}
	.egh-logo{justify-self:start}
	.egh-acts{justify-self:end}
}