/* ==========================================================================
   AFFANECOM - responsive corrections
   Loaded last so it can settle conflicts between the component stylesheets
   and Elementor's own per-device output.
   ========================================================================== */

/* Global overflow guard ---------------------------------------------------
   clip rather than hidden: overflow-x:hidden creates a scroll container and
   silently breaks position:sticky further up the tree. */
html,
body{
	overflow-x:clip;
	max-width:100%;
}
img,
video,
iframe,
table{
	max-width:100%;
}

/* Hero trust strip --------------------------------------------------------
   Elementor switches icon-box to its "top" position on mobile, which stacks
   the glyph above the label. These stay side by side at every width. */
.affan-hero-trust .elementor-icon-box-wrapper{
	flex-direction:row !important;
	align-items:center !important;
}
.affan-hero-trust .elementor-icon-box-icon{
	margin:0 !important;
}
@media (max-width:767px){
	.affan-hero-trust .elementor-icon-box-wrapper{
		justify-content:center !important;
		gap:10px;
	}
	.affan-hero-trust .elementor-icon-box-title{
		font-size:14.5px !important;
		white-space:normal;
	}
	.affan-hero-trust .elementor-icon svg,
	.affan-hero-trust .elementor-icon i{
		width:17px;
		height:17px;
		font-size:17px;
	}
}

/* Hero call to action -----------------------------------------------------
   Full-width buttons on a phone: a centred pill is a small tap target and
   the two buttons read as unrelated when they sit at different widths. */
@media (max-width:600px){
	.affan-hero-cta{
		width:100% !important;
		flex-direction:column !important;
		align-items:stretch !important;
	}
	.affan-hero-cta .elementor-widget-button{ width:100% !important; }
	.affan-hero-cta .elementor-button{
		width:100%;
		justify-content:center;
	}
}

/* Section rhythm ----------------------------------------------------------
   The desktop 34px gap between a section header and its grid is too generous
   once everything is stacked. */
@media (max-width:767px){
	.affan-sec > .e-con-inner > .elementor-widget-text-editor + .e-con,
	.affan-sec > .e-con-inner > .elementor-widget-text-editor + .elementor-widget-shortcode,
	.affan-sec > .e-con-inner > .elementor-widget-heading + .e-con,
	.affan-sec > .e-con-inner > .e-con + .elementor-widget-shortcode{
		margin-top:22px !important;
	}
}

/* Headings ----------------------------------------------------------------
   Long department and section names need to break rather than force the page
   wider than the viewport. */
@media (max-width:600px){
	h1,h2,h3,
	.elementor-heading-title{
		overflow-wrap:break-word;
		hyphens:auto;
	}
}

/* Product grid ------------------------------------------------------------ */
@media (max-width:400px){
	.woocommerce ul.products,
	ul.products{
		grid-template-columns:minmax(0,1fr) !important;
	}
}

/* Footer ------------------------------------------------------------------ */
@media (max-width:900px){
	.affan-footer__inner{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
		gap:30px !important;
		padding:38px 20px 28px !important;
	}
}
@media (max-width:560px){
	.affan-footer__inner{
		grid-template-columns:minmax(0,1fr) !important;
		gap:26px !important;
	}
	.affan-footer__bar{
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
		text-align:left;
	}
}

/* Contact sidebar ---------------------------------------------------------
   The address and email are long unbroken strings that would otherwise push
   the card wider than the screen. */
@media (max-width:600px){
	.affan-ct-row .elementor-icon-box-description,
	.affan-ct-row .elementor-icon-box-description a,
	.affan-office-addr{
		overflow-wrap:anywhere;
	}
	.affan-ct-card.e-con{ padding:24px 20px !important; }
}

/* Floating controls -------------------------------------------------------
   Keep the WhatsApp button and back-to-top clear of the last section's
   content on short screens. */
@media (max-width:600px){
	body{ padding-bottom:0; }
	.affan-cta.e-con{ margin-bottom:8px; }
}

/* Tap targets ------------------------------------------------------------- */
@media (hover:none){
	.affan-f-links a,
	.affan-crumbs a{
		display:inline-block;
		padding-block:2px;
	}
}

/* ==========================================================================
   Mobile sliders
   Stacked cards make these sections extremely tall on a phone. Below 768px
   they become horizontal scroll-snap carousels.

   CSS scroll-snap rather than a JS carousel: native momentum scrolling, no
   library, keyboard and screen-reader scrollable, and it degrades to a plain
   scrolling row if snap is unsupported. The rules carry !important because
   the stacked rules they replace in affan-footer.css are !important too.
   ========================================================================== */
@media (max-width:767px){

	/* .affan-hero-trustrow is handled by affan-marquee.css once the script
	   upgrades it; these snap rules are its pre-script fallback. */
	.affan-trust-row,
	.affan-hero-trustrow:not([data-affan-marquee="1"]){
		display:flex !important;
		flex-direction:row !important;
		flex-wrap:nowrap !important;
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scroll-padding-left:16px;

		/* Bleed to the screen edges so a partial next card is visible, which is
		   what tells people the row scrolls. */
		margin-left:-16px !important;
		margin-right:-16px !important;
		padding-left:16px !important;
		padding-right:16px !important;

		scrollbar-width:none;
		-ms-overflow-style:none;
	}
	.affan-trust-row::-webkit-scrollbar,
	.affan-hero-trustrow::-webkit-scrollbar{
		display:none;
	}

	/* Buying from us / Why shoppers choose AFFANECOM */
	.affan-trust-row{
		gap:14px !important;
		padding-bottom:4px !important;
		align-items:stretch !important;
	}
	.affan-trust-row > .affan-trust-card,
	.affan-trust-row--3 > .affan-trust-card{
		flex:0 0 80% !important;
		max-width:80% !important;
		min-width:0 !important;
		scroll-snap-align:start;
		padding:24px 22px 26px !important;
	}

	/* Hero strip: pills sized to their own content. */
	.affan-hero-trustrow:not([data-affan-marquee="1"]){
		gap:10px !important;
		justify-content:flex-start !important;
		padding-top:18px !important;
		padding-bottom:2px !important;
	}
	.affan-hero-trustrow:not([data-affan-marquee="1"]) > .elementor-widget{
		flex:0 0 auto !important;
		width:auto !important;
		scroll-snap-align:start;
	}
	.affan-hero-trust .elementor-icon-box-wrapper{
		justify-content:flex-start !important;
		white-space:nowrap;
	}
	.affan-hero-trust .elementor-icon-box-title{
		white-space:nowrap;
	}

	/* The scroll container must be reachable and visible when focused. */
	.affan-trust-row:focus-visible,
	.affan-hero-trustrow:focus-visible{
		outline:3px solid #F47C20;
		outline-offset:2px;
	}
}

/* Snap animation is motion; honour the preference. */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
	.affan-trust-row,
	.affan-hero-trustrow{
		scroll-snap-type:none;
		scroll-behavior:auto;
	}
}

/* ==========================================================================
   Two-column layouts on tablet and mobile

   affan-cols.css pins each Elementor child container to a percentage width
   with !important, because Elementor never emits flex-basis of its own. Its
   @media (max-width:1024px) block was left empty, so those percentages held
   all the way down and About and Contact rendered as ~215px columns on a
   phone. This releases them. Trust cards are excluded: they have their own
   two-up and slider rules.
   ========================================================================== */
@media (max-width:1024px){
	.affan-col:not(.affan-trust-card):not(.affan-stat){
		flex:1 1 100% !important;
		max-width:100% !important;
		width:100% !important;
	}

	/* Image before copy. On a narrow screen the picture sets the context for
	   the text that follows, and a wall of prose before any visual is a poor
	   first impression. */
	.affan-media-first{
		order:-1 !important;
	}

	/* Stat band: four across becomes two by two rather than four stacked
	   rows, which would run to nearly a full screen on its own. */
	.affan-stat{
		flex:1 1 calc(50% - 14px) !important;
		max-width:calc(50% - 14px) !important;
		width:auto !important;
	}

	/* The fill column's image no longer needs to match a tall text column. */
	.affan-col--fill > .elementor-widget-image img{
		min-height:0 !important;
		max-height:340px !important;
		height:auto !important;
		width:100% !important;
		aspect-ratio:16/10 !important;
		object-fit:cover;
	}

	/* Rows that held two columns need their gap back once stacked. */
	.affan-col:not(.affan-trust-card) + .affan-col:not(.affan-trust-card){
		margin-top:26px !important;
	}
}

/* Contact: the sidebar sits under the form rather than beside it. */
@media (max-width:1024px){
	.affan-ct-side.e-con{
		margin-top:20px !important;
	}
	.affan-ct-formcard .wpforms-field-container{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media (max-width:700px){
	.affan-ct-formcard .wpforms-field-container{
		grid-template-columns:minmax(0,1fr);
	}
}

/* About: the process timeline reads better with less indent on a phone. */
@media (max-width:600px){
	.affan-step{
		padding-left:18px !important;
	}
	.affan-stat{
		flex:1 1 calc(50% - 10px) !important;
		max-width:calc(50% - 10px) !important;
	}
}

/* ==========================================================================
   Stat band

   The earlier .affan-stat rule was losing to affan-cols.css, which pins these
   containers by element ID: `.elementor-element.elementor-element-ab00012` is
   two classes, `.affan-stat` is one, and specificity beats source order.
   Matching that weight with `.elementor-element.affan-stat` lets source order
   decide, and affan-responsive.css loads later.
   ========================================================================== */
.affan-statrow.e-con{
	justify-content:center !important;
	align-items:stretch !important;
	flex-wrap:wrap !important;
	text-align:center;
}

.elementor-element.affan-stat{
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
	text-align:center !important;
}
.affan-stat .elementor-widget{
	width:100% !important;
	margin-bottom:0 !important;
}
.affan-stat .elementor-heading-title,
.affan-stat .elementor-widget-text-editor,
.affan-stat .elementor-widget-text-editor p{
	text-align:center !important;
	margin-left:auto !important;
	margin-right:auto !important;
}
/* "7-Day" was breaking across two lines and pushing that cell out of line. */
.affan-stat .elementor-widget-heading .elementor-heading-title{
	white-space:nowrap;
}
.affan-stat .elementor-widget-heading + .elementor-widget-text-editor{
	margin-top:6px !important;
}

@media (max-width:1024px){
	.elementor-element.affan-stat{
		flex:0 0 calc(50% - 14px) !important;
		max-width:calc(50% - 14px) !important;
		width:auto !important;
	}
	.affan-statrow.e-con{
		row-gap:30px !important;
		column-gap:28px !important;
	}
}

@media (max-width:420px){
	.elementor-element.affan-stat{
		flex:0 0 calc(50% - 10px) !important;
		max-width:calc(50% - 10px) !important;
	}
	.affan-statrow.e-con{
		row-gap:24px !important;
		column-gap:20px !important;
	}
}

/* Stat band on phones: one per row rather than two by two.
   Tablet keeps the 2x2 from the block above, where there is width for it. */
@media (max-width:767px){
	.elementor-element.affan-stat{
		flex:0 0 100% !important;
		max-width:100% !important;
		width:100% !important;
	}
	.affan-statrow.e-con{
		flex-direction:column !important;
		align-items:center !important;
		row-gap:26px !important;
	}
	/* Hairline between rows so four centred blocks read as a list rather than
	   floating text. */
	.elementor-element.affan-stat + .affan-stat{
		padding-top:26px !important;
		border-top:1px solid rgba(255,255,255,.12);
	}
}

@media (max-width:420px){
	.elementor-element.affan-stat{
		flex:0 0 100% !important;
		max-width:100% !important;
	}
}