/* ==========================================================================
   Azan Baby Care - interface pass, 2026-09-18
   Loaded last, after brand.css, azan-fixes.css and azan-final-qa.css.

   Every rule is scoped to a class that sits on one specific element, so no
   other part of the site is affected. Backups of everything this pass touched
   live in wp-content/uploads/azan-backups/2026-09-18-ui-pass/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Announcement bar
   Cash on Delivery on the left, delivery promise and social links on the
   right, both centred on the same baseline at every width.
   -------------------------------------------------------------------------- */

.elementor .e-con.azan-topbar__inner > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	width: 100%;
}

.elementor .e-con.azan-topbar__right {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	min-width: 0;
	padding: 0;
}

.azan-topbar .elementor-icon-list-items,
.azan-topbar .elementor-icon-list-item {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.azan-topbar .elementor-icon-list-item > span,
.azan-topbar .elementor-icon-list-text {
	line-height: 1.4;
}

.azan-topbar .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.azan-topbar .elementor-icon-list-icon svg,
.azan-topbar .elementor-icon-list-icon i {
	display: block;
}

@media (max-width: 1024px) {
	.elementor .e-con.azan-topbar__inner > .e-con-inner {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.elementor .e-con.azan-topbar__right {
		justify-content: center;
	}
}

@media (max-width: 600px) {
	.azan-topbar .elementor-icon-list-text {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   2. Header search
   One pill: the field and the orange button share a single bordered shell,
   the button sits inset on the right, and the field background never changes
   between rest, hover, focus and filled states.
   -------------------------------------------------------------------------- */

.elementor .azan-search.elementor-widget {
	width: 100%;
	min-width: 0;
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper {
	width: 100%;
	margin: 0;
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container {
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 4px 0 0;
	background-color: var(--azan-surface, #FFF7EE);
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-pill, 999px);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container:hover {
	border-color: #DCD3C8;
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container:focus-within {
	border-color: var(--azan-sky, #4FC3EE);
	box-shadow: 0 0 0 3px rgba(79, 195, 238, 0.25);
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container .hfe-search-form__input,
.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container .hfe-search-form__input:hover,
.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container .hfe-search-form__input:focus {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0 6px 0 20px;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	color: var(--azan-ink, #123A56);
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.elementor .azan-search.elementor-widget .hfe-search-form__input::placeholder {
	color: #5F7C8E;
	opacity: 1;
}

.elementor .azan-search.elementor-widget .hfe-search-form__input::-webkit-search-cancel-button {
	display: none;
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container .hfe-search-submit {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--azan-radius-pill, 999px);
	background-color: var(--azan-accent, #F7941E);
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: none;
	line-height: 1;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.elementor .azan-search.elementor-widget .hfe-search-form__container .hfe-search-submit i,
.elementor .azan-search.elementor-widget .hfe-search-form__container .hfe-search-submit svg {
	display: block;
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
	color: inherit;
	fill: currentColor;
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container .hfe-search-submit:hover {
	background-color: var(--azan-accent-dark, #E07E08);
}

.elementor .azan-search.elementor-widget .hfe-search-button-wrapper .hfe-search-form__container .hfe-search-submit:active {
	transform: scale(0.94);
}

.elementor .azan-search.elementor-widget .hfe-search-form__container .hfe-search-submit:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}

/* The reset control sits just inside the button, not on top of it. */
.elementor .azan-search.elementor-widget .hfe-search-form__container button#clear-with-button {
	right: 52px;
	margin: 0;
	padding: 0 6px;
	color: var(--azan-muted, #5F7C8E);
	font-size: 13px;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* The live results panel lines up with the pill. */
.azan-search .azan-search-panel {
	top: calc(100% + 8px);
}

/* --------------------------------------------------------------------------
   3. Account and cart controls
   Two 44px circles with identical padding, alignment and states.
   -------------------------------------------------------------------------- */

.elementor .azan-icon-account.elementor-widget,
.elementor .azan-icon-cart.elementor-widget {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
}

.elementor .azan-icon-account.elementor-widget .elementor-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.elementor .azan-icon-account.elementor-widget .elementor-icon-wrapper .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--azan-radius-pill, 999px);
	background-color: transparent;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.elementor .azan-icon-account.elementor-widget .elementor-icon-wrapper .elementor-icon:hover {
	background-color: var(--azan-surface, #FFF7EE);
	border-color: var(--azan-line, #EBE4DC);
}

.elementor .azan-icon-cart.elementor-widget .hfe-site-header-cart,
.elementor .azan-icon-cart.elementor-widget .hfe-site-header-cart-li,
.elementor .azan-icon-cart.elementor-widget .hfe-menu-cart__toggle {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.elementor .azan-icon-cart.elementor-widget .hfe-menu-cart__toggle .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--azan-radius-pill, 999px);
	background-color: transparent;
	box-shadow: none;
	overflow: visible;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.elementor .azan-icon-cart.elementor-widget .hfe-menu-cart__toggle .elementor-button:hover {
	background-color: var(--azan-surface, #FFF7EE);
	border-color: var(--azan-line, #EBE4DC);
}

.elementor .azan-icon-cart.elementor-widget .hfe-menu-cart__toggle .elementor-button-text {
	display: none;
}

.elementor .azan-icon-cart.elementor-widget .hfe-menu-cart__toggle .elementor-button-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	line-height: 1;
}

/* Count badge: clear of the icon, fully inside the header, never clipped. */
.elementor .azan-icon-cart.elementor-widget .hfe-menu-cart__toggle .elementor-button-icon[data-counter]:before {
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
	border-radius: var(--azan-radius-pill, 999px);
	background-color: var(--azan-berry, #E63B26);
	color: #FFFFFF;
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 11px;
	font-weight: 700;
	box-shadow: 0 0 0 2px #FFFFFF;
}

.elementor .azan-icon-account.elementor-widget a:focus-visible,
.elementor .azan-icon-account.elementor-widget .elementor-icon:focus-visible,
.elementor .azan-icon-cart.elementor-widget .elementor-button:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Shop by Age navigation
   -------------------------------------------------------------------------- */

.hfe-nav-menu li.menu-item-has-children {
	position: relative;
}

/* A transparent bridge over the gap between the item and its dropdown, so the
   pointer can travel down without the menu closing underneath it. */
.hfe-nav-menu li.menu-item-has-children > ul.sub-menu:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.hfe-nav-menu li.menu-item-has-children:focus-within > ul.sub-menu {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.hfe-nav-menu ul.sub-menu {
	box-shadow: 0 16px 34px rgba(18, 58, 86, 0.12);
	overflow: hidden;
}

.hfe-nav-menu ul.sub-menu li.azan-age-item > a.hfe-sub-menu-item {
	font-variant-numeric: tabular-nums;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.hfe-nav-menu a:focus-visible,
.hfe-nav-menu .sub-menu a:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: -3px;
}

/* Mobile and tablet: the submenu is an expandable panel under its parent. */
@media (max-width: 1024px) {
	.hfe-nav-menu li.menu-item-has-children > ul.sub-menu:before {
		display: none;
	}

	/* The toggle marks the open panel with .sub-menu-open and sets
	   aria-expanded on its control. Honour either, so the panel is really
	   visible once it has been expanded. */
	.hfe-nav-menu li.menu-item-has-children > ul.sub-menu.sub-menu-open,
	.hfe-nav-menu li.menu-item-has-children > a[aria-expanded="true"] + ul.sub-menu,
	.hfe-nav-menu li.menu-item-has-children > .hfe-has-submenu-container.sub-menu-active + ul.sub-menu {
		opacity: 1;
		visibility: visible;
		height: auto;
		overflow: visible;
	}

	.hfe-nav-menu__layout-vertical .sub-menu li a.hfe-sub-menu-item,
	.hfe-nav-menu .sub-menu li a.hfe-sub-menu-item {
		padding-left: 28px;
	}

	.hfe-nav-menu .sub-menu-toggle,
	.hfe-nav-menu .hfe-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   5. Hero slideshow
   One responsive height for every slide, arrows in their own side gutters and
   dots in their own bottom band, so no control ever sits on the heading, the
   call to action or the product image.
   -------------------------------------------------------------------------- */

.azan-hero {
	--azan-hero-media: 380px;
	--azan-hero-min: 400px;
	--azan-hero-gutter: 62px;
	--azan-hero-dots: 52px;

	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0 var(--azan-hero-gutter) var(--azan-hero-dots);
	overflow: visible;
}

/* Every slide occupies the same grid cell, so the track is always as tall as
   the tallest slide and the banner keeps one height whatever is showing. The
   inactive slides are hidden with visibility, which also takes their links out
   of the tab order, rather than with display, which would collapse them. */
.azan-hero:not(.is-slide-mode) .azan-hero__track {
	display: grid;
	grid-template-areas: "azan-hero-slide";
	align-items: stretch;
	min-height: var(--azan-hero-min);
}

.azan-hero:not(.is-slide-mode) .azan-hero__track > .azan-hero__slide {
	grid-area: azan-hero-slide;
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.azan-hero:not(.is-slide-mode) .azan-hero__track > .azan-hero__slide.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.azan-hero__track {
	min-height: var(--azan-hero-min);
}

.azan-hero__slide {
	min-height: var(--azan-hero-min);
}

.azan-hero__inner {
	min-height: var(--azan-hero-min);
	align-items: center;
}

.azan-hero__content {
	justify-content: center;
}

/* Fixed media box: its height never depends on the image, so the banner does
   not resize between slides and nothing shifts while images load. */
.azan-hero .azan-hero__media {
	flex: 1 1 54%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--azan-hero-media);
	min-height: var(--azan-hero-media);
	background-color: #FFFFFF;
	border-radius: var(--azan-radius-lg, 28px);
	overflow: hidden;
}

/* contain keeps the whole product visible: nothing is stretched and nothing
   important is cropped away. */
.azan-hero .azan-hero__media .azan-hero__img {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: var(--azan-radius-lg, 28px);
}

/* Arrows live in the gutters, never over the content or the image. */
.azan-hero .azan-hero__nav.azan-hero__nav {
	position: absolute;
	top: 0;
	bottom: var(--azan-hero-dots);
	margin-block: auto;
	width: 44px;
	height: 44px;
	border-radius: var(--azan-radius-pill, 999px);
	border: 1px solid var(--azan-line, #EBE4DC);
	background-color: #FFFFFF;
	color: var(--azan-ink, #123A56);
	box-shadow: 0 4px 14px rgba(18, 58, 86, 0.10);
	transform: none;
	z-index: 4;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.azan-hero .azan-hero__nav.azan-hero__nav--prev {
	left: 4px;
}

.azan-hero .azan-hero__nav.azan-hero__nav--next {
	right: 4px;
}

.azan-hero .azan-hero__nav.azan-hero__nav svg {
	width: 18px;
	height: 18px;
}

.azan-hero .azan-hero__nav.azan-hero__nav:hover {
	background-color: var(--azan-accent, #F7941E);
	border-color: var(--azan-accent, #F7941E);
	color: #FFFFFF;
	transform: scale(1.06);
}

.azan-hero .azan-hero__nav.azan-hero__nav:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}

/* Dots keep their own band under the slide. */
.azan-hero .azan-hero__dots {
	left: 0;
	right: 0;
	bottom: 16px;
	align-items: center;
	gap: 9px;
	z-index: 4;
}

.azan-hero .azan-hero__dots .azan-hero__dot.azan-hero__dot {
	width: 10px;
	height: 10px;
	background-color: rgba(18, 58, 86, 0.22);
}

.azan-hero .azan-hero__dots .azan-hero__dot.azan-hero__dot:hover {
	background-color: rgba(18, 58, 86, 0.42);
}

.azan-hero .azan-hero__dots .azan-hero__dot.azan-hero__dot.is-active {
	width: 28px;
	background-color: var(--azan-accent, #F7941E);
}

.azan-hero .azan-hero__dots .azan-hero__dot.azan-hero__dot:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 3px;
}

@media (max-width: 1200px) {
	.azan-hero {
		--azan-hero-media: 330px;
		--azan-hero-min: 420px;
		--azan-hero-gutter: 56px;
	}
}

@media (max-width: 1024px) {
	.azan-hero {
		--azan-hero-media: 300px;
		--azan-hero-min: 440px;
		--azan-hero-gutter: 52px;
	}

	.azan-hero__heading {
		font-size: 38px;
	}
}

/* Phones: the arrows join the dots in the bottom band instead of hiding. */
@media (max-width: 767px) {
	.azan-hero {
		--azan-hero-media: 230px;
		--azan-hero-min: 0px;
		--azan-hero-gutter: 0px;
		--azan-hero-dots: 66px;
	}

	.azan-hero__track,
	.azan-hero__slide,
	.azan-hero__inner {
		min-height: 500px;
	}

	/* Stacked layout: the media keeps its own declared height instead of
	   stretching to fill the column. */
	.azan-hero .azan-hero__media {
		flex: 0 0 auto;
		width: 100%;
	}

	.azan-hero .azan-hero__media,
	.azan-hero .azan-hero__media .azan-hero__img {
		border-radius: var(--azan-radius-md, 16px);
	}

	.azan-hero .azan-hero__nav.azan-hero__nav {
		display: inline-flex;
		top: auto;
		bottom: 12px;
		margin-block: 0;
		width: 40px;
		height: 40px;
	}

	.azan-hero .azan-hero__nav.azan-hero__nav--prev {
		left: 2px;
	}

	.azan-hero .azan-hero__nav.azan-hero__nav--next {
		right: 2px;
	}

	.azan-hero .azan-hero__dots {
		bottom: 26px;
	}
}

@media (max-width: 430px) {
	.azan-hero {
		--azan-hero-media: 205px;
	}

	.azan-hero__track,
	.azan-hero__slide,
	.azan-hero__inner {
		min-height: 478px;
	}
}

/* --------------------------------------------------------------------------
   6. Shop by category
   Four equal circles, evenly distributed, with the name and the picture in
   one clickable target.
   -------------------------------------------------------------------------- */

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

.elementor .e-con.azan-cat-grid > .e-con {
	width: auto;
	max-width: 100%;
	min-width: 0;
	padding: 0;
}

.elementor .azan-cat-card.elementor-widget {
	position: relative;
	width: 100%;
	max-width: 100%;
	transition: transform 0.22s ease;
}

.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper .elementor-image-box-img {
	width: 190px;
	max-width: 100%;
	height: 190px;
	margin: 0 auto;
	border-radius: var(--azan-radius-pill, 999px);
	overflow: hidden;
	background-color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(18, 58, 86, 0.07);
	transition: box-shadow 0.22s ease;
}

.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper .elementor-image-box-img a {
	display: block;
	width: 100%;
	height: 100%;
}

.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper .elementor-image-box-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--azan-radius-pill, 999px);
	display: block;
	transition: transform 0.3s ease;
}

/* The picture, the name and the space between them are one link. */
.elementor .azan-cat-card.elementor-widget .elementor-image-box-img a:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.elementor .azan-cat-card.elementor-widget .elementor-image-box-title {
	margin: 0;
}

.elementor .azan-cat-card.elementor-widget .elementor-image-box-title a {
	text-decoration: none;
}

.elementor .azan-cat-card.elementor-widget:hover {
	transform: translateY(-4px);
}

.elementor .azan-cat-card.elementor-widget:hover .elementor-image-box-img {
	box-shadow: 0 16px 32px rgba(18, 58, 86, 0.16);
}

.elementor .azan-cat-card.elementor-widget:hover .elementor-image-box-img img {
	transform: scale(1.05);
}

.elementor .azan-cat-card.elementor-widget:focus-within .elementor-image-box-img {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .azan-cat-card.elementor-widget,
	.elementor .azan-cat-card.elementor-widget .elementor-image-box-img img {
		transition: none;
	}

	.elementor .azan-cat-card.elementor-widget:hover {
		transform: none;
	}

	.elementor .azan-cat-card.elementor-widget:hover .elementor-image-box-img img {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.elementor .e-con.azan-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 24px;
	}

	.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper .elementor-image-box-img {
		width: 160px;
		height: 160px;
	}
}

@media (max-width: 767px) {
	.elementor .e-con.azan-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper .elementor-image-box-img {
		width: 140px;
		height: 140px;
	}
}

@media (max-width: 360px) {
	.elementor .e-con.azan-cat-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.elementor .azan-cat-card.elementor-widget .elementor-image-box-wrapper .elementor-image-box-img {
		width: 150px;
		height: 150px;
	}
}

/* --------------------------------------------------------------------------
   7. Service benefits band
   A light blue band with white cards, clearly separate from the cream footer.
   -------------------------------------------------------------------------- */

.elementor .e-con.azan-benefits {
	border-top: 1px solid rgba(18, 58, 86, 0.06);
	border-bottom: 1px solid rgba(18, 58, 86, 0.08);
}

.elementor .e-con.azan-feature-row > .e-con-inner {
	align-items: stretch;
}

.elementor .e-con.azan-feature-row > .e-con-inner > .e-con.azan-feature {
	align-items: center;
	height: 100%;
	padding: 18px 18px 19px;
	background-color: #FFFFFF;
	border: 1px solid rgba(18, 58, 86, 0.05);
	border-radius: var(--azan-radius-md, 16px);
	box-shadow: 0 2px 10px rgba(18, 58, 86, 0.05);
}

.elementor .e-con.azan-feature .azan-feature__icon .elementor-icon {
	border-radius: var(--azan-radius-pill, 999px);
}

.elementor .e-con.azan-feature > .e-con.azan-feature__text {
	align-self: center;
}

.elementor .e-con.azan-feature__text .elementor-widget-text-editor p {
	line-height: 1.55;
}

@media (max-width: 767px) {
	.elementor .e-con.azan-feature-row > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.elementor .e-con.azan-feature-row > .e-con-inner > .e-con.azan-feature {
		padding: 14px;
	}
}

@media (max-width: 430px) {
	.elementor .e-con.azan-feature-row > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
		gap: 12px;
	}
}

/* --------------------------------------------------------------------------
   8. Footer newsletter
   One column: label, field and button start and end at the same place.
   -------------------------------------------------------------------------- */

.azan-newsletter .elementor-shortcode,
.azan-newsletter .hostinger-reach-block-subscription-form-wrapper,
.azan-newsletter .hostinger-reach-block-subscription-form {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.azan-newsletter .hostinger-reach-block-form-fields {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.azan-newsletter .hostinger-reach-block-form-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.azan-newsletter .hostinger-reach-block-form-field label {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--azan-ink, #123A56);
}

.azan-newsletter .hostinger-reach-block-form-field label .required {
	color: var(--azan-berry, #E63B26);
}

.azan-newsletter .hostinger-reach-block-form-field input[type="email"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 18px;
	background-color: #FFFFFF;
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-pill, 999px);
	color: var(--azan-ink, #123A56);
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 15px;
	line-height: 1.4;
}

.azan-newsletter .hostinger-reach-block-form-field input[type="email"]:focus {
	border-color: var(--azan-sky, #4FC3EE);
	outline: none;
	box-shadow: 0 0 0 3px rgba(79, 195, 238, 0.25);
}

.azan-newsletter .hostinger-reach-block-submit {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--azan-radius-pill, 999px);
	background-color: var(--azan-accent, #F7941E) !important;
	color: #FFFFFF !important;
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.azan-newsletter .hostinger-reach-block-submit:hover {
	background-color: var(--azan-accent-dark, #E07E08) !important;
}

.azan-newsletter .hostinger-reach-block-submit:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}

.azan-newsletter .reach-subscription-message {
	width: 100%;
	margin-top: 10px;
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 14px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Footer contact
   -------------------------------------------------------------------------- */

.elementor .e-con.azan-footer-getintouch {
	gap: 14px;
}

.azan-chat-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	box-shadow: none;
	transition: background-color 0.18s ease, transform 0.15s ease;
}

.azan-chat-btn .elementor-button:hover {
	transform: translateY(-1px);
}

.azan-chat-btn .elementor-button-icon svg,
.azan-chat-btn .elementor-button-icon i {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

.azan-chat-btn .elementor-button:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}

.azan-footer-contact .elementor-icon-list-item {
	align-items: flex-start;
}

/* --------------------------------------------------------------------------
   10. Floating chat controls
   Identical circles, official marks, generous tap targets, clear of the
   scroll to top control and of the footer.
   -------------------------------------------------------------------------- */

.azan-fab.azan-fab--v2 {
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	gap: 12px;
	z-index: 9990;
}

.azan-fab--v2 .azan-fab__btn.azan-fab__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
	padding: 0;
	border: 0;
	border-radius: var(--azan-radius-pill, 999px);
	box-shadow: 0 8px 22px rgba(18, 58, 86, 0.22);
	color: #FFFFFF;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.azan-fab--v2 .azan-fab__glyph {
	display: block;
	width: 26px;
	height: 26px;
}

.azan-fab--v2 .azan-fab__btn--whatsapp.azan-fab__btn--whatsapp {
	background-color: #25D366;
}

.azan-fab--v2 .azan-fab__btn--whatsapp.azan-fab__btn--whatsapp:hover {
	background-color: #1EBE57;
}

.azan-fab--v2 .azan-fab__btn--messenger.azan-fab__btn--messenger {
	background-color: #0084FF;
	background-image: linear-gradient(145deg, #00B2FF 0%, #006AFF 100%);
}

.azan-fab--v2 .azan-fab__btn--messenger.azan-fab__btn--messenger:hover {
	background-image: linear-gradient(145deg, #00A2E8 0%, #0059DB 100%);
}

.azan-fab--v2 .azan-fab__btn--top.azan-fab__btn--top {
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	background-color: #FFFFFF;
	background-image: none;
	color: var(--azan-ink, #123A56);
	border: 1px solid var(--azan-line, #EBE4DC);
	box-shadow: 0 6px 16px rgba(18, 58, 86, 0.14);
}

.azan-fab--v2 .azan-fab__btn--top.azan-fab__btn--top .azan-fab__glyph {
	width: 21px;
	height: 21px;
}

.azan-fab--v2 .azan-fab__btn--top.azan-fab__btn--top:hover {
	background-color: var(--azan-accent, #F7941E);
	border-color: var(--azan-accent, #F7941E);
	color: #FFFFFF;
}

.azan-fab--v2 .azan-fab__btn.azan-fab__btn:hover,
.azan-fab--v2 .azan-fab__btn.azan-fab__btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(18, 58, 86, 0.26);
}

.azan-fab--v2 .azan-fab__btn.azan-fab__btn:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 3px;
}

.azan-fab--v2 .azan-fab__tip {
	right: calc(100% + 12px);
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
	.azan-fab--v2 .azan-fab__btn.azan-fab__btn,
	.azan-fab--v2 .azan-fab__btn.azan-fab__btn:hover,
	.azan-fab--v2 .azan-fab__btn.azan-fab__btn:focus-visible {
		transform: none;
		transition: none;
	}
}

@media (max-width: 767px) {
	.azan-fab.azan-fab--v2 {
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
	}

	.azan-fab--v2 .azan-fab__btn.azan-fab__btn {
		width: 50px;
		height: 50px;
		min-width: 50px;
		min-height: 50px;
	}

	.azan-fab--v2 .azan-fab__btn--top.azan-fab__btn--top {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Keep the stack clear of the product page contact row on phones. */
@media (max-width: 767px) {
	body.single-product .azan-product-contact__row {
		padding-right: 70px;
	}
}

/* --------------------------------------------------------------------------
   11. Age group filter on the shop
   Every group is listed, including the ones nothing carries yet.
   -------------------------------------------------------------------------- */

.azan-age-filter__chip.is-empty {
	opacity: 0.55;
}

.azan-age-filter__chip.is-empty:hover {
	opacity: 1;
}

.azan-age-empty {
	margin: 8px 0 28px;
	padding: 24px;
	background-color: var(--azan-surface, #FFF7EE);
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-md, 16px);
	text-align: center;
}

.azan-age-empty__title {
	margin: 0 0 6px;
	font-family: var(--azan-font-head, "Fredoka", sans-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--azan-ink, #123A56);
}

.azan-age-empty__text {
	margin: 0 0 14px;
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--azan-muted, #5F7C8E);
}

.azan-age-empty__link {
	display: inline-block;
	padding: 11px 22px;
	background-color: var(--azan-accent, #F7941E);
	color: #FFFFFF;
	border-radius: var(--azan-radius-pill, 999px);
	font-family: var(--azan-font-body, "Nunito Sans", sans-serif);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.azan-age-empty__link:hover {
	background-color: var(--azan-accent-dark, #E07E08);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   12. Nothing may push the page sideways.
   -------------------------------------------------------------------------- */

.azan-hero,
.azan-hero__inner,
.azan-hero__content,
.azan-hero__media,
.elementor .e-con.azan-cat-grid,
.elementor .e-con.azan-feature-row {
	max-width: 100%;
	min-width: 0;
}