/* ==========================================================================
   Azan Baby Care - scoped layout fixes
   Added 2026-09-12. Backups of the files and Elementor data touched alongside
   this change live in wp-content/uploads/azan-backups/2026-09-12-fixes/.

   Everything here is scoped to a class that is set on the specific Elementor
   element it belongs to, so no other section of the site is affected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Feature row: Fast delivery / Real support / Honest pricing / Secure payment

   Cause of the break: the row direction container sets
   --container-widget-flex-grow:1, which makes Elementor's
   --container-widget-width resolve to calc((1 - 1) * 100%) = 0. The icon
   widget wrapper therefore computed to width:0 and the 41px icon spilled out
   of its own box and sat on top of the heading next to it.

   Fix: give the row real equal columns, and give each item a plain flex row
   with a fixed, non shrinking icon box in normal document flow.
   No absolute positioning and no negative margins are used.
   -------------------------------------------------------------------------- */

.elementor .e-con.azan-feature-row > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 24px;
	align-items: start;
	width: 100%;
}

.elementor .e-con.azan-feature-row > .e-con-inner > .e-con.azan-feature {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 12px;
	width: auto;
	max-width: 100%;
	min-width: 0;
	padding: 0;
}

/* Elementor sets --flex-wrap-mobile:wrap on each item, which would drop the text
   below the icon on phones. Keep the icon and the text on one line at every width. */
.elementor .e-con.azan-feature.azan-feature {
	flex-wrap: nowrap;
}

/* Icon: fixed 40px box, never shrinks, stays in flow. */
.elementor .e-con.azan-feature > .elementor-widget.azan-feature__icon {
	flex: 0 0 40px;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	align-self: flex-start;
	margin: 0;
}

.elementor .e-con.azan-feature > .elementor-widget.azan-feature__icon > .elementor-widget-container,
.elementor .e-con.azan-feature .azan-feature__icon .elementor-icon-wrapper {
	width: 40px;
	height: 40px;
	line-height: 0;
}

.elementor .e-con.azan-feature .azan-feature__icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.elementor .e-con.azan-feature .azan-feature__icon .elementor-icon svg {
	width: 18px;
	height: 18px;
}

/* Heading and description live in one text wrapper that takes the rest of the row. */
.elementor .e-con.azan-feature > .e-con.azan-feature__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: 100%;
	padding: 0;
}

.elementor .e-con.azan-feature__text > .elementor-widget {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.elementor .e-con.azan-feature__text .elementor-heading-title {
	margin: 0;
}

.elementor .e-con.azan-feature__text .elementor-widget-text-editor p {
	margin: 0;
}

/* Tablet: two columns. */
@media (max-width: 1024px) {
	.elementor .e-con.azan-feature-row > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 24px;
	}
}

/* Small mobile: one column. */
@media (max-width: 767px) {
	.elementor .e-con.azan-feature-row > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

/* --------------------------------------------------------------------------
   2. Parent favourites product grid: 4 on desktop, 2 on tablet, 1 on small
   mobile. Scoped to the Parent favourites shortcode widget only, so the shop
   archive and the On sale this week row keep their own layout.

   The column count is set by grid-template-columns, not by the number of
   products, so any number of cards wraps correctly.
   -------------------------------------------------------------------------- */

.elementor .azan-favourites .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	max-width: 100%;
}

.elementor .azan-favourites .woocommerce ul.products li.product {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	float: none;
	clear: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* One image ratio for every card, contained so nothing is stretched or cropped. */
.elementor .azan-favourites .woocommerce ul.products li.product .azan-card__media {
	aspect-ratio: 1 / 1;
	width: 100%;
}

.elementor .azan-favourites .woocommerce ul.products li.product .azan-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* The button stays pinned to the bottom so card bottoms line up. */
.elementor .azan-favourites .woocommerce ul.products li.product .azan-card__btn {
	margin-top: auto;
}

@media (max-width: 1024px) {
	.elementor .azan-favourites .woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.elementor .azan-favourites .woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   3. Floating contact stack clearance (added 2026-09-12 with the contact
   details update). On phones the stack sits in a 44px column at the right
   edge. Nothing interactive may run underneath it, so the full width buttons
   in the product page contact row stop short of that column.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	body.single-product .azan-product-contact__row {
		padding-right: 64px;
	}

	/* The stack owns the right edge, so the product gallery zoom control moves
	   to the left on phones. On a short screen the two otherwise sit on top of
	   each other. */
	.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		right: auto;
		left: 16px;
	}
}

/* While the mobile navigation is open, the stack must not sit on top of the
   menu items. The toggle carries aria-expanded, so no script is needed.
   Browsers without :has() simply keep today's behaviour. */
body:has(.hfe-nav-menu__toggle[aria-expanded="true"]) .azan-fab {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}