/* ==========================================================================
   AFFANECOM - Featured departments bento

   Elementor containers are flex only; a tile that spans two rows needs real
   CSS grid, so the row container is re-declared as a grid here and each tile
   is placed by name. Elementor also writes width:100% onto every child
   container, which is released below.
   ========================================================================== */

.affan-bento.e-con{
	display:grid !important;
	grid-template-columns:repeat(3,minmax(0,1fr));
	grid-template-rows:auto auto auto;
	grid-template-areas:
		"tall  a  b"
		"tall  c  d"
		"wide  .  .";
	gap:22px !important;
	padding:0 !important;
	align-items:stretch;
}

.affan-bento.e-con > .e-con{
	width:auto !important;
	max-width:none !important;
	margin:0 !important;
}

.affan-dept--tall{ grid-area:tall; }
.affan-dept--a{    grid-area:a; }
.affan-dept--b{    grid-area:b; }
.affan-dept--c{    grid-area:c; }
.affan-dept--d{    grid-area:d; }
.affan-dept--wide{ grid-area:wide; }

/* Tile ------------------------------------------------------------------- */
.affan-dept.e-con{
	position:relative;
	display:flex !important;
	flex-direction:column !important;
	justify-content:flex-end !important;
	align-items:flex-start !important;
	gap:0 !important;
	min-height:300px;
	padding:30px !important;
	border-radius:16px !important;
	overflow:hidden;
	isolation:isolate;
	background-size:cover !important;
	background-position:center center !important;
	background-repeat:no-repeat !important;
	transition:transform .26s cubic-bezier(.22,.61,.36,1),
	           box-shadow .26s cubic-bezier(.22,.61,.36,1);
}
.affan-dept--tall.e-con{ min-height:622px; }

/* Legibility wash. Text sits above it via z-index on the widgets. */
.affan-dept.e-con::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background:linear-gradient(180deg,
		rgba(37,37,37,0) 32%,
		rgba(37,37,37,.42) 62%,
		rgba(37,37,37,.82) 100%);
	transition:opacity .26s ease;
	pointer-events:none;
}
.affan-dept .elementor-widget{
	position:relative;
	z-index:1;
	margin-bottom:0 !important;
	width:100% !important;
}

.affan-dept:hover,
.affan-dept:focus-within{
	transform:translateY(-5px);
	box-shadow:0 18px 40px rgba(37,37,37,.20);
}
.affan-dept:hover::after{ opacity:.88; }

/* Tile contents ---------------------------------------------------------- */
.affan-dept .elementor-widget-heading{ margin-bottom:0 !important; }
.affan-dept .elementor-widget-heading .elementor-heading-title{
	color:#fff !important;
	text-shadow:0 1px 12px rgba(37,37,37,.34);
}
.affan-dept .elementor-widget-text-editor{ margin-top:6px !important; }
.affan-dept .elementor-widget-text-editor p{
	margin:0 !important;
	color:rgba(255,255,255,.86) !important;
	text-shadow:0 1px 10px rgba(37,37,37,.34);
}
.affan-dept .elementor-widget-text-editor + .elementor-widget-text-editor{
	margin-top:16px !important;
}

.affan-deptlink{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:#F9964A !important;
	font-family:"Inter",sans-serif;
	font-size:.8rem;
	font-weight:800;
	letter-spacing:.11em;
	text-transform:uppercase;
	text-decoration:none !important;
	text-shadow:0 1px 10px rgba(37,37,37,.5);
}
.affan-deptlink span{
	display:inline-block;
	transition:transform .18s ease;
}
.affan-dept:hover .affan-deptlink span{ transform:translateX(5px); }

/* Whole-tile click target.
   Elementor's container Link control emits no anchor on the front end, so the
   Shop now link is stretched over the tile instead. One real anchor, keyboard
   reachable, with the department name in its accessible label. */
.affan-deptlink{ position:static; }
.affan-deptlink::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	border-radius:16px;
}
.affan-deptlink:focus-visible{ outline:none; }
.affan-deptlink:focus-visible::after{
	outline:3px solid #F47C20;
	outline-offset:-3px;
}
.affan-sr{
	position:absolute !important;
	width:1px; height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}

/* Section header --------------------------------------------------------- */
.affan-depts-head{
	text-align:center;
}
.affan-depts-head .elementor-widget{ margin-bottom:0 !important; }
.affan-depts-head .elementor-widget-heading + .elementor-widget-heading{ margin-top:12px !important; }
.affan-depts-head .elementor-widget-text-editor{ margin-top:14px !important; }
.affan-depts-head .elementor-widget-text-editor p{
	margin:0 auto !important;
	max-width:58ch;
}

/* Layout down the sizes -------------------------------------------------- */
@media (max-width:1024px){
	.affan-bento.e-con{
		grid-template-columns:repeat(2,minmax(0,1fr));
		grid-template-areas:
			"tall  a"
			"tall  b"
			"c     d"
			"wide  wide";
	}
	.affan-dept.e-con{ min-height:260px; }
	.affan-dept--tall.e-con{ min-height:542px; }
}
@media (max-width:640px){
	.affan-bento.e-con{
		grid-template-columns:minmax(0,1fr);
		grid-template-areas:
			"tall" "a" "b" "c" "d" "wide";
		gap:14px !important;
	}
	.affan-dept.e-con,
	.affan-dept--tall.e-con{
		min-height:230px;
		padding:24px !important;
	}
}

@media (prefers-reduced-motion:reduce){
	.affan-dept.e-con{ transition:none; }
	.affan-dept:hover{ transform:none; }
	.affan-dept:hover .affan-deptlink span{ transform:none; }
}