/**
 * Anees Product Grid
 */

.apg {
	--apg-cols: 3;
	--apg-gap-x: 20px;
	--apg-gap-y: 26px;
	--apg-sidebar-w: 270px;
	--apg-sidebar-gap: 32px;

	--apg-accent: #3a5826;
	--apg-ink: #3a5826;
	--apg-muted: #9aa2a6;
	--apg-line: #eaeaea;

	--apg-panel-bg: #f7f5f0;
	--apg-panel-radius: 14px;
	--apg-panel-pad-y: 28px;
	--apg-panel-pad-x: 26px;

	--apg-search-w: 520px;
	--apg-fs: 1;
	--apg-opt-line: #e4e0d6;

	--apg-card-radius: 16px;
	--apg-card-ratio: 1;
	--apg-card-bg: #f3f1ec;

	--apg-badge-bg: #3a5826;
	--apg-badge-color: #fff;

	--apg-wave-h: 34%;
	--apg-wave-curve: 26%;
	--apg-blend-angle: 160deg;
	--apg-img-zoom: 1.06;

	--apg-filters-title: var(--apg-ink);
	--apg-clear-color: var(--apg-muted);
	--apg-group-color: var(--apg-muted);
	--apg-option-color: var(--apg-ink);
	--apg-option-sub-color: var(--apg-muted);
	--apg-check-border: #d9dcda;
	--apg-check-bg: var(--apg-accent);
	--apg-check-tick: #fff;

	color: var(--apg-ink);
	position: relative;
}

.apg *,
.apg *::before,
.apg *::after {
	box-sizing: border-box;
}

.apg .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Toolbar */

.apg-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--apg-line);
}

.apg-toolbar-start {
	display: flex;
	align-items: center;
	min-width: 0;
}

.apg-tabs {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: -17px;
}

.apg-tab {
	font-size: calc(13px * var(--apg-fs));
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apg-muted);
	text-decoration: none;
	padding-bottom: 14px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.apg-tab:hover,
.apg-tab:focus-visible {
	color: var(--apg-ink);
}

.apg-tab.is-active {
	color: var(--apg-ink);
	border-bottom-color: var(--apg-ink);
}

.apg-search {
	position: relative;
	/*
	 * A fixed length, not min(..., 100%). The middle grid track is sized from
	 * its content, so a percentage width here is circular: browsers resolve it
	 * as auto during track sizing and the declared width is thrown away, which
	 * made the width control do nothing.
	 */
	width: var(--apg-search-w);
	max-width: 100%;
	justify-self: center;
}

/*
 * Off-centre placements drop the three-track grid for a flex row, so the
 * search can lead while the tabs keep their place beside it.
 */
.apg-toolbar--search-start,
.apg-toolbar--search-end {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 12px;
}

.apg-toolbar--search-start .apg-search {
	order: 1;
	justify-self: auto;
}

.apg-toolbar--search-start .apg-toolbar-start {
	order: 2;
}

.apg-toolbar--search-start .apg-toolbar-end {
	order: 3;
	margin-inline-start: auto;
}

.apg-toolbar--search-end .apg-toolbar-start {
	order: 1;
}

.apg-toolbar--search-end .apg-search {
	order: 2;
	margin-inline-start: auto;
	justify-self: auto;
}

.apg-toolbar--search-end .apg-toolbar-end {
	order: 3;
}

/* With no tabs the empty track would still take a share of the row. */
.apg-toolbar--search-start .apg-toolbar-start:empty,
.apg-toolbar--search-end .apg-toolbar-start:empty {
	display: none;
}

.apg-search--empty {
	width: 0;
}

.apg-search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	color: var(--apg-muted);
	pointer-events: none;
}

.apg-search-input {
	width: 100%;
	height: 40px;
	padding: 0 16px 0 38px;
	font-size: calc(14px * var(--apg-fs));
	color: var(--apg-ink);
	background: #fff;
	border: 1px solid var(--apg-line);
	border-radius: 999px;
	outline: none;
	transition: border-color 0.15s ease;
}

.apg-search-input::placeholder {
	color: var(--apg-muted);
}

.apg-search-input:focus {
	border-color: var(--apg-accent);
}

.apg-toolbar-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	min-width: 0;
}

/* The short rule between the result count and the sort control. */
.apg-toolbar-rule {
	width: 18px;
	height: 1px;
	flex: none;
	background: var(--apg-line);
}

.apg-count {
	font-size: calc(14px * var(--apg-fs));
	color: var(--apg-muted);
	white-space: nowrap;
}

.apg-sort {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: calc(14px * var(--apg-fs));
	color: var(--apg-muted);
}

.apg-sort-label {
	white-space: nowrap;
}

.apg-sort-select {
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--apg-ink);
	cursor: pointer;
	padding-inline-end: 2px;

	/* A select is as wide as its widest option, so the box would keep the
	   width of "Price: High to Low" whatever is showing, and the native
	   arrow would sit at the far end of it. The script narrows it to the
	   selected option; this is the cap it works inside, and the native
	   version of the same thing where the browser supports it. */
	max-width: 100%;
	field-sizing: content;
}

.apg-views {
	display: flex;
	align-items: center;
	gap: 4px;
}

.apg-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--apg-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.apg-view svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.apg-view:hover {
	color: var(--apg-ink);
}

.apg-view.is-active {
	background: var(--apg-ink);
	color: #fff;
}

.apg-mobile-filters {
	display: none;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 14px;
	font-size: calc(13px * var(--apg-fs));
	font-weight: 600;
	color: var(--apg-ink);
	background: transparent;
	border: 1px solid var(--apg-line);
	border-radius: 999px;
	cursor: pointer;
}

.apg-mobile-filters svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------- Layout */

.apg-body {
	display: grid;
	grid-template-columns: var(--apg-sidebar-w) minmax(0, 1fr);
	gap: var(--apg-sidebar-gap);
	align-items: stretch;
	padding-top: 34px;
}

.apg-sidebar {
	min-width: 0;
}

.apg-sidebar .apg-filters {
	height: 100%;
}

.apg--no-sidebar .apg-body {
	grid-template-columns: minmax(0, 1fr);
}

.apg-content {
	min-width: 0;
	transition: opacity 0.18s ease;
}

.apg.is-loading .apg-content {
	opacity: 0.45;
	pointer-events: none;
}

/* ------------------------------------------------------------------ Sidebar */

.apg-filters {
	background: var(--apg-panel-bg);
	border-radius: var(--apg-panel-radius);
	padding: var(--apg-panel-pad-y) var(--apg-panel-pad-x);
}

.apg-filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--apg-opt-line);
}

.apg-filters-title {
	font-size: calc(16px * var(--apg-fs));
	font-weight: 700;
	color: var(--apg-filters-title);
}

.apg-clear {
	font-size: calc(13px * var(--apg-fs));
	color: var(--apg-clear-color);
	text-decoration: none;
	cursor: pointer;
}

.apg-clear:hover {
	color: var(--apg-ink);
	text-decoration: underline;
}

.apg-clear.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.apg-group {
	padding: 20px 0 0;
}

.apg-group:first-of-type {
	padding-top: 16px;
}

.apg-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 10px;
	border: 0;
	background: transparent;
	font-size: calc(12px * var(--apg-fs));
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--apg-group-color);
	cursor: pointer;
	text-align: left;
}

.apg-group-head--static {
	cursor: default;
}

.apg-toggle {
	position: relative;
	width: 11px;
	height: 11px;
	flex: none;
}

.apg-toggle::before,
.apg-toggle::after {
	content: '';
	position: absolute;
	background: currentColor;
}

.apg-toggle::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 1.5px;
	margin-top: -0.75px;
}

.apg-toggle::after {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1.5px;
	margin-left: -0.75px;
	transition: transform 0.2s ease;
}

.apg-group.is-open .apg-toggle::after {
	transform: scaleY(0);
}

.apg-group-body {
	display: none;
}

.apg-group.is-open .apg-group-body {
	display: block;
}

.apg-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 0;
	border-bottom: 1px solid var(--apg-opt-line);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.apg-opt:hover .apg-opt-name {
	opacity: 0.7;
}

.apg-opt.is-empty {
	opacity: 0.4;
	cursor: not-allowed;
}

.apg-opt-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.apg-opt-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.apg-opt-name {
	font-size: calc(15px * var(--apg-fs));
	font-weight: 500;
	color: var(--apg-option-color);
	line-height: 1.25;
}

.apg-opt-sub {
	font-size: calc(12px * var(--apg-fs));
	color: var(--apg-option-sub-color);
	line-height: 1.2;
}

.apg-opt-count {
	font-size: calc(12px * var(--apg-fs));
	color: var(--apg-muted);
}

.apg-opt-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	flex: none;
	border: 1px solid var(--apg-check-border);
	border-radius: 50%;
	background: #fff;
	color: transparent;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.apg-opt-mark svg {
	width: 11px;
	height: 11px;
}

.apg-opt-input:checked ~ .apg-opt-mark {
	background: var(--apg-check-bg);
	border-color: var(--apg-check-bg);
	color: var(--apg-check-tick);
}

.apg-opt-input:focus-visible ~ .apg-opt-mark {
	outline: 2px solid var(--apg-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- Grid */

.apg-grid {
	display: grid;
	gap: var(--apg-gap-y) var(--apg-gap-x);
}

.apg-grid--grid {
	grid-template-columns: repeat(var(--apg-cols), minmax(0, 1fr));
}

.apg-grid--list {
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.apg-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.apg-card-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border-radius: var(--apg-card-radius);
	background: var(--apg-card-bg);
	overflow: hidden;
	aspect-ratio: 1 / var(--apg-card-ratio);
}

.apg-card-media--blend {
	background-image: linear-gradient(
		var(--apg-blend-angle),
		var(--apg-card-bg) 0%,
		var(--apg-card-bg-2, var(--apg-card-bg)) 100%
	);
}

/*
 * The curved band of the second colour along the bottom of the card. On hover
 * it grows past the top edge and flattens, so the card fills with the second
 * colour. Inset horizontally so the ellipse's edges stay off-screen.
 */
.apg-card-wave {
	position: absolute;
	left: -12%;
	right: -12%;
	bottom: 0;
	height: var(--apg-wave-h);
	background: var(--apg-card-bg-2, var(--apg-card-bg));
	border-radius: 50% 50% 0 0 / var(--apg-wave-curve) var(--apg-wave-curve) 0 0;
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.apg-card:hover .apg-card-wave,
.apg-card:focus-within .apg-card-wave {
	height: 130%;
	border-radius: 0;
}

.apg-card-media img,
.apg-card-media .apg-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	position: relative;
	z-index: 1;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.apg-card:hover .apg-card-media img,
.apg-card:focus-within .apg-card-media img {
	transform: scale(var(--apg-img-zoom));
}

.apg-badge {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	padding: 5px 12px;
	font-size: calc(12px * var(--apg-fs));
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--apg-badge-color);
	background: var(--apg-badge-bg);
	border-radius: 999px;
	white-space: nowrap;
}

.apg-card-body {
	padding-top: 13px;
}

.apg .apg-eyebrow {
	font-family: inherit;
	margin: 0 0 4px;
	font-size: calc(12px * var(--apg-fs));
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--apg-muted);
}

.apg .apg-title {
	font-family: inherit;
	margin: 0 0 6px;
	font-size: calc(19px * var(--apg-fs));
	font-weight: 700;
	line-height: 1.25;
}

.apg-title a {
	color: var(--apg-ink);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.apg-title a:hover,
.apg-title a:focus-visible {
	opacity: 0.7;
}

.apg .apg-price {
	font-family: inherit;
	margin: 0 0 6px;
	font-size: calc(15px * var(--apg-fs));
	color: var(--apg-ink);
}

.apg-price del {
	color: var(--apg-muted);
	margin-right: 5px;
}

.apg .apg-more {
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: calc(14px * var(--apg-fs));
	font-weight: 600;
	color: var(--apg-accent);
	text-decoration: none;
}

.apg-more svg {
	width: 12px;
	height: 9px;
	transition: transform 0.2s ease;
}

.apg-more:hover svg {
	transform: translateX(3px);
}

/* The same arrow, mirrored. Its nudge on hover is written after the
   mirror so it still travels the way the arrow points. */
.apg-more--left svg {
	transform: scaleX(-1);
}

.apg-more--left:hover svg {
	transform: scaleX(-1) translateX(3px);
}

/* List view */

.apg-grid--list .apg-card {
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--apg-line);
}

.apg-grid--list .apg-card-media {
	width: 150px;
	flex: none;
	aspect-ratio: 1 / 1;
}

.apg-grid--list .apg-card-body {
	padding-top: 0;
}

/* -------------------------------------------------------- Empty + paginate */

.apg-empty {
	padding: 60px 20px;
	text-align: center;
}

.apg-empty-title {
	margin: 0 0 10px;
	font-size: calc(16px * var(--apg-fs));
	font-weight: 600;
	color: var(--apg-ink);
}

.apg-empty-reset {
	font-size: 12px;
	color: var(--apg-accent);
}

.apg-debug {
	max-width: 720px;
	margin: 28px auto 0;
	padding: 16px 18px;
	text-align: left;
	background: #fff8e5;
	border: 1px solid #f0d9a0;
	border-radius: 10px;
	font-size: 12px;
	color: #6b5a2a;
}

.apg-debug-title {
	margin: 0 0 8px;
	font-weight: 700;
}

.apg-debug table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 12px;
}

.apg-debug th,
.apg-debug td {
	padding: 4px 6px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #f0e3c2;
}

.apg-debug th {
	width: 45%;
	font-weight: 600;
}

.apg-debug pre {
	margin: 0;
	padding: 10px;
	overflow-x: auto;
	background: #fffdf7;
	border: 1px solid #f0e3c2;
	border-radius: 6px;
	font-size: 11px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.apg-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 36px;
}

.apg-load-more {
	height: 40px;
	padding: 0 28px;
	font-size: calc(13px * var(--apg-fs));
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--apg-ink);
	background: transparent;
	border: 1px solid var(--apg-ink);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.apg-load-more:hover {
	background: var(--apg-ink);
	color: #fff;
}

.apg-load-more[disabled] {
	opacity: 0.4;
	cursor: default;
}

.apg-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	font-size: calc(13px * var(--apg-fs));
	color: var(--apg-ink);
	text-decoration: none;
	border-radius: 8px;
}

.apg-page.is-active {
	background: var(--apg-ink);
	color: #fff;
}

.apg-apply {
	margin-top: 16px;
	padding: 10px 22px;
	cursor: pointer;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	/*
	 * Every placement collapses to a single column here. The off-centre
	 * variants are flex rather than grid, so grid-template-columns alone would
	 * leave them wrapping into a cramped row.
	 */
	.apg-toolbar,
	.apg-toolbar--search-start,
	.apg-toolbar--search-end {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.apg-toolbar .apg-search,
	.apg-toolbar--search-start .apg-search,
	.apg-toolbar--search-end .apg-search {
		order: 1;
		width: 100%;
		max-width: none;
		margin: 0;
		justify-self: stretch;
	}

	.apg-toolbar .apg-toolbar-start,
	.apg-toolbar--search-start .apg-toolbar-start,
	.apg-toolbar--search-end .apg-toolbar-start {
		order: 2;
	}

	.apg-toolbar .apg-toolbar-end,
	.apg-toolbar--search-start .apg-toolbar-end,
	.apg-toolbar--search-end .apg-toolbar-end {
		order: 3;
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.apg-tabs {
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	.apg-mobile-filters {
		display: inline-flex;
	}

	.apg-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.apg--has-sidebar .apg-sidebar {
		display: none;
	}

	.apg--has-sidebar.is-filters-open .apg-sidebar {
		display: block;
	}

	.apg-toolbar-end {
		width: 100%;
		justify-content: space-between;
		gap: 10px;
	}

	.apg-toolbar-rule {
		display: none;
	}

	/*
	 * A single column on phones unless the widget says otherwise. Set as the
	 * variable, not the grid property, so an explicit choice in Elementor still
	 * wins on the strength of its own selector.
	 */
	.apg {
		--apg-cols: 1;
	}

	/* These must never wrap onto two lines inside the row. */
	.apg-mobile-filters,
	.apg-count,
	.apg-sort,
	.apg-sort-label {
		white-space: nowrap;
		flex: none;
	}

	.apg-sort-select {
		max-width: 120px;
	}

	.apg-tabs {
		width: 100%;
		gap: 18px;
		overflow-x: auto;
	}

	.apg-grid--list .apg-card {
		flex-direction: column;
		align-items: stretch;
	}

	.apg-grid--list .apg-card-media {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apg *,
	.apg *::before,
	.apg *::after {
		transition-duration: 0.01ms !important;
	}

	.apg-card:hover .apg-card-media img,
	.apg-card:focus-within .apg-card-media img {
		transform: none;
	}
}

/* ============================================================ Product gallery
 *
 * Single-product companion to the grid card: the same two product colours and
 * the same curved wave, so the product page matches its card.
 */

.apg-gallery {
	--apg-gallery-radius: 18px;
	--apg-gallery-ratio: 1;
	--apg-thumb-size: 92px;
	--apg-thumb-gap: 12px;
	--apg-thumb-radius: 10px;
	--apg-thumb-active: #3a5826;
	--apg-thumb-active-w: 2px;

	--apg-card-bg: #f3f1ec;
	--apg-wave-h: 34%;
	--apg-wave-curve: 26%;

	display: flex;
	flex-direction: column;
	gap: var(--apg-thumb-gap);
}

.apg-gallery *,
.apg-gallery *::before,
.apg-gallery *::after {
	box-sizing: border-box;
}

.apg-gallery--thumbs-left {
	flex-direction: row-reverse;
	align-items: flex-start;
}

.apg-gallery-main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
	padding: 40px;
	border-radius: var(--apg-gallery-radius);
	background: var(--apg-card-bg);
	overflow: hidden;
	aspect-ratio: 1 / var(--apg-gallery-ratio);
}

.apg-gallery-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* Thumbnails */

.apg-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--apg-thumb-gap);
}

.apg-gallery--thumbs-left .apg-gallery-thumbs {
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	flex: none;
}

.apg-gallery-thumb {
	position: relative;
	width: var(--apg-thumb-size);
	height: var(--apg-thumb-size);
	flex: none;
	padding: 8px;
	border: var(--apg-thumb-active-w) solid transparent;
	border-radius: var(--apg-thumb-radius);
	background: var(--apg-card-bg);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.apg-gallery-thumb:hover {
	opacity: 0.85;
}

.apg-gallery-thumb.is-active {
	border-color: var(--apg-thumb-active);
}

.apg-gallery-thumb:focus-visible {
	outline: 2px solid var(--apg-thumb-active);
	outline-offset: 2px;
}

.apg-gallery-thumb-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* The thumbnails carry the same two colours as the main image. */
.apg-gallery-thumb .apg-card-wave {
	transition: none;
}

@media (max-width: 767px) {
	.apg-gallery--thumbs-left {
		flex-direction: column;
	}

	.apg-gallery--thumbs-left .apg-gallery-thumbs {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ========================================================== Product accordion */

.apg-accordion {
	--apg-acc-bg: #fff;
	--apg-acc-line: #e6e6e6;
	--apg-acc-radius: 12px;
	--apg-acc-title: #3a5826;
	--apg-acc-body: inherit;
	--apg-acc-gap: 14px;
	--apg-acc-outer-radius: var(--apg-acc-radius);
	--apg-acc-outer-bg: transparent;
	--apg-acc-outer-line: transparent;
	--apg-acc-outer-bw: 0px;
	--apg-acc-outer-pad: 0px;
	--apg-acc-open-border: #3a5826;
	--apg-acc-icon-bg: #3a5826;
	--apg-acc-icon-color: #fff;
	--apg-acc-head-bg: transparent;
	--apg-acc-open-bg: #e2f4fd;
	--apg-acc-open-body-bg: #fff;
	--apg-acc-open-title: var(--apg-acc-title);

	background: var(--apg-acc-bg);
	border: 1px solid var(--apg-acc-line);
	border-radius: var(--apg-acc-outer-radius);
	overflow: hidden;
}

.apg-accordion *,
.apg-accordion *::before,
.apg-accordion *::after {
	box-sizing: border-box;
}

.apg-accordion--joined .apg-acc-item + .apg-acc-item {
	border-top: 1px solid var(--apg-acc-line);
}

.apg-accordion--cards {
	display: flex;
	flex-direction: column;
	gap: var(--apg-acc-gap);
	background: var(--apg-acc-outer-bg);
	border: var(--apg-acc-outer-bw) solid var(--apg-acc-outer-line);
	border-radius: var(--apg-acc-outer-radius);
	padding: var(--apg-acc-outer-pad);
	overflow: visible;
}

.apg-accordion--cards .apg-acc-item {
	background: var(--apg-acc-bg);
	border: 1px solid var(--apg-acc-line);
	border-radius: var(--apg-acc-radius);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.apg-accordion--cards .apg-acc-item.is-open {
	border-color: var(--apg-acc-open-border);
}

/* Round toggle, filled once the panel is open. */
.apg-acc-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
}

.apg-accordion--icon-circle .apg-acc-item.is-open .apg-acc-icon-wrap {
	background: var(--apg-acc-icon-bg);
	color: var(--apg-acc-icon-color);
}

.apg-accordion--icon-plain .apg-acc-icon-wrap {
	width: auto;
	height: auto;
}

.apg-acc-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.apg-acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 20px;
	border: 0;
	background: var(--apg-acc-head-bg);
	/* A button's text does not inherit alignment, so it has to be set. Start
	   rather than left, or an Arabic question's last line flushes to the
	   wrong edge. The widget can override it. */
	text-align: var(--apg-acc-align, start);
	cursor: pointer;
	color: var(--apg-acc-title);
	transition: background 0.2s ease, color 0.2s ease;
}

.apg-acc-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--apg-acc-title);
	flex: 1;
	min-width: 0;
}

.apg-acc-icon {
	width: 14px;
	height: 14px;
	flex: none;
	transition: transform 0.25s ease;
}

.apg-acc-item.is-open .apg-acc-icon {
	transform: rotate(180deg);
}

/* Open panel. */

.apg-acc-item.is-open .apg-acc-head {
	background: var(--apg-acc-open-bg);
	color: var(--apg-acc-open-title);
}

.apg-acc-item.is-open .apg-acc-title {
	color: var(--apg-acc-open-title);
}

.apg-acc-item.is-open .apg-acc-body {
	background: var(--apg-acc-open-body-bg);
}

.apg-acc-body {
	/* The top was left to the first child's own margin, but that margin is
	   stripped just below so the panel does not open with a ragged gap. With
	   both gone the content sat against the header. */
	padding: 18px 20px 20px;
	color: var(--apg-acc-body);
}

.apg-acc-body[hidden] {
	display: none;
}

.apg-acc-content > *:first-child {
	margin-top: 0;
}

.apg-acc-content > *:last-child {
	margin-bottom: 0;
}

.apg-acc-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 12px;
}

.apg-acc-content th,
.apg-acc-content td {
	padding: 8px 10px;
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--apg-acc-line);
}

.apg-acc-content th {
	font-weight: 600;
}

/* The line under the whole accordion, e.g. "For Animal Use." */

.apg-acc-note {
	margin: 18px 0 0;
	font-family: var(--apg-acc-note-font, "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif);
	font-size: calc(13px * var(--apg-fs, 1));
	line-height: 1.6;
	color: var(--apg-muted, #6b6b6b);
	text-align: start;
}

.apg-acc-note > *:first-child {
	margin-top: 0;
}

.apg-acc-note > *:last-child {
	margin-bottom: 0;
}

/*
 * The note is set in Noto Sans Arabic on every page, English and Arabic, as
 * the client asked. The plugin loads the family itself, with the accordion,
 * so it never falls back to whatever the browser has. The rule is on the note
 * alone, one class deep, so a font chosen in Elementor, which targets the note
 * with the widget's own class in front, still wins.
 */

/* A two column label and value table: the label column takes a fixed share
   so the values line up down the page. Only row headers, because giving
   every header 45% leaves the third column of a wider table almost nothing
   and it wraps a word at a time. */
.apg-acc-content th[scope="row"] {
	width: 45%;
}

/* Column headings are left to size themselves. Forcing them not to wrap
   pushes a three column table wider than the panel it sits in. */

/* ============================================================= Product button */

.apg-btn-wrap {
	display: flex;
}

.apg-btn {
	--apg-btn-bg: #3a5826;
	--apg-btn-bg-hover: #2c4220;
	--apg-btn-color: #fff;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 32px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--apg-btn-color);
	background: var(--apg-btn-bg);
	border: 0;
	border-radius: 30px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.apg-btn--full {
	width: 100%;
}

/* The waiting state: the same button, but nothing happens when it is pressed,
   so it says so by being quiet rather than inviting. */
.apg-btn--soon {
	--apg-btn-bg: #e8e8e4;
	--apg-btn-color: #6b6b6b;

	cursor: default;
}

a.apg-btn:hover,
a.apg-btn:focus-visible {
	background: var(--apg-btn-bg-hover);
	color: var(--apg-btn-color-hover, var(--apg-btn-color));
}

.apg-btn-arrow {
	width: 15px;
	height: 11px;
	flex: none;
	transition: transform 0.2s ease;
}

a.apg-btn:hover .apg-btn-arrow {
	transform: translateX(3px);
}

/* The same arrow, mirrored. Its nudge on hover is written after the
   mirror so it still travels the way the arrow points. */
.apg-btn-arrow--left {
	transform: scaleX(-1);
}

a.apg-btn:hover .apg-btn-arrow--left {
	transform: scaleX(-1) translateX(3px);
}

/* ========================================================= Related products */

.apg-related {
	--apg-card-ratio: 0.78;
}

.apg-related-heading {
	margin: 0 0 28px;
	font-size: calc(28px * var(--apg-fs));
	font-weight: 700;
	line-height: 1.2;
	color: #3a5826;
}

/* ======================================================== Product description */

.apg-description > *:first-child {
	margin-top: 0;
}

.apg-description > *:last-child {
	margin-bottom: 0;
}

/* ======================================================= Product variations */

.apg-variations {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.apg-var-label {
	margin: 0 0 10px;
	font-size: calc(14px * var(--apg-fs, 1));
	font-weight: 700;
	line-height: 1.3;
	color: #3a5826;
	text-align: start;
}

.apg-var-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.apg-var-box {
	min-width: 84px;
	margin: 0;
	padding: 10px 20px;
	border: 1.5px solid #dfe5da;
	border-radius: 14px;
	background: #fff;
	color: #3a5826;
	font: inherit;
	font-size: calc(15px * var(--apg-fs, 1));
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.apg-var-box:hover {
	border-color: #3a5826;
}

.apg-var-box.is-active {
	border-color: #3a5826;
	background: #3a5826;
	color: #fff;
}

.apg-var-box:focus-visible {
	outline: 2px solid #3a5826;
	outline-offset: 2px;
}

.apg-var-box.is-unavailable {
	opacity: 0.4;
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	.apg-var-box {
		transition: none;
	}
}

/* ======================================================= Product term line */

.apg-term-line {
	margin: 0 0 6px;
	font-size: calc(13px * var(--apg-fs, 1));
	font-weight: 700;
	line-height: 1.3;
	color: #3a5826;
}

.apg-term-line a {
	color: inherit;
	text-decoration: none;
}

.apg-term-line a:hover {
	opacity: 0.7;
}

/* ========================================================= Segmented switcher */

.apg-switch-wrap {
	display: flex;
}

.apg-switch {
	--apg-switch-bg: #fff;
	--apg-switch-border: #e6e6e6;
	--apg-switch-color: #3a5826;
	--apg-switch-active-bg: #3a5826;
	--apg-switch-active-color: #fff;
	--apg-switch-h: 48px;
	--apg-switch-radius: 30px;

	display: flex;
	max-width: 100%;
	background: var(--apg-switch-bg);
	border: 1px solid var(--apg-switch-border);
	border-radius: var(--apg-switch-radius);
	overflow: hidden;
}

.apg-switch-item {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: var(--apg-switch-h);
	padding: 0 24px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--apg-switch-color);
	transition: background 0.2s ease, color 0.2s ease;

	/*
	 * Square by default. Only the outer corners are rounded, so the selected
	 * half fills its side of the track and meets the other half on a straight
	 * edge, instead of floating inside as a smaller pill.
	 */
	border-radius: 0;
}

.apg-switch-item:first-child {
	border-radius: var(--apg-switch-radius) 0 0 var(--apg-switch-radius);
}

.apg-switch-item:last-child {
	border-radius: 0 var(--apg-switch-radius) var(--apg-switch-radius) 0;
}

.apg-switch-item:only-child {
	border-radius: var(--apg-switch-radius);
}

.apg-switch-item:hover {
	color: var(--apg-switch-color);
	opacity: 0.75;
}

.apg-switch-item.is-active,
.apg-switch-item.is-active:hover {
	background: var(--apg-switch-active-bg);
	color: var(--apg-switch-active-color);
	opacity: 1;
}

/* ============================================================== Feature list */

.apg-features {
	--apg-feat-cols: 1;
	--apg-feat-icon: 44px;
	--apg-feat-gap: 18px;
	--apg-feat-row-gap: 34px;

	display: grid;
	grid-template-columns: repeat(var(--apg-feat-cols), minmax(0, 1fr));
	gap: var(--apg-feat-row-gap) var(--apg-feat-gap);
}

.apg-feature {
	display: flex;
	gap: var(--apg-feat-gap);
	align-items: flex-start;
}

.apg-features--icon-top .apg-feature {
	flex-direction: column;
}

.apg-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--apg-feat-icon);
	height: var(--apg-feat-icon);
	flex: none;
	color: #3a5826;
}

.apg-feature-icon svg,
.apg-feature-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.apg-feature-icon i {
	font-size: calc(var(--apg-feat-icon) * 0.8);
	line-height: 1;
}

.apg-feature-body {
	min-width: 0;
}

.apg-feature-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #3a5826;
}

.apg-feature-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5b6b52;
}

/* =================================================================== Marquee */

.apg-marquee {
	--apg-mq-bg: #3a5826;
	--apg-mq-color: #fff;
	--apg-mq-gap: 60px;
	--apg-mq-duration: 30s;
	--apg-mq-img-h: 34px;

	overflow: hidden;
	padding: 14px 0;
	background: var(--apg-mq-bg);

	/* The track is twice the band's width and overflows it, and the loop
	   works by shifting it half its width. That relies on the track
	   hanging off the right. On a right-to-left page it anchors to the
	   right instead and hangs off the left, so the same shift walks it
	   out of the band and leaves empty space behind it.

	   Every item in the track is the same one repeated, so their order
	   carries no meaning and the band can simply be pinned left-to-right.
	   The item below puts the page's own direction back for its text. */
	direction: ltr;
}

[dir="rtl"] .apg-marquee-item,
.rtl .apg-marquee-item {
	direction: rtl;
}

.apg-marquee-track {
	display: flex;
	align-items: center;
	gap: var(--apg-mq-gap);
	width: max-content;
	padding-right: var(--apg-mq-gap);
	animation: apg-marquee var(--apg-mq-duration) linear infinite;
}

.apg-marquee--reverse .apg-marquee-track {
	animation-direction: reverse;
}

.apg-marquee--pause:hover .apg-marquee-track {
	animation-play-state: paused;
}

.apg-marquee-item {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: var(--apg-mq-color);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.apg-marquee-item img {
	display: block;
	height: var(--apg-mq-img-h);
	width: auto;
}

@keyframes apg-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.apg-marquee-track {
		animation: none;
	}
}

/* =============================================================== Shape image */

.apg-shape-wrap {
	display: flex;
}

.apg-shape {
	--apg-shape-ratio: 1;
	--apg-shape-bg: #5b2e2e;
	--apg-shape-x: 12px;
	--apg-shape-y: 12px;
	--apg-shape-rot: 0deg;

	position: relative;
	width: 100%;
	aspect-ratio: 1 / var(--apg-shape-ratio);
	transform: rotate(var(--apg-shape-rot));
}

/* The offset silhouette sitting behind the photo. */
.apg-shape-back {
	position: absolute;
	inset: 0;
	background: var(--apg-shape-bg);
	transform: translate(var(--apg-shape-x), var(--apg-shape-y));
	-webkit-mask: var(--apg-shape-mask) center / contain no-repeat;
	mask: var(--apg-shape-mask) center / contain no-repeat;
}

.apg-shape-img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask: var(--apg-shape-mask) center / contain no-repeat;
	mask: var(--apg-shape-mask) center / contain no-repeat;
}

.apg-shape--paw {
	--apg-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='27' cy='24' r='17'/%3E%3Ccircle cx='63' cy='19' r='16'/%3E%3Ccircle cx='88' cy='45' r='13'/%3E%3Ccircle cx='12' cy='55' r='13'/%3E%3Cellipse cx='52' cy='69' rx='33' ry='29'/%3E%3C/g%3E%3C/svg%3E");
}

.apg-shape--blob {
	--apg-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M52 2c19 0 33 9 40 24s5 33-4 46-24 24-41 22S16 82 8 68-1 36 9 23 33 2 52 2z'/%3E%3C/svg%3E");
}

.apg-shape--flower {
	--apg-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='26' r='24'/%3E%3Ccircle cx='26' cy='44' r='24'/%3E%3Ccircle cx='74' cy='44' r='24'/%3E%3Ccircle cx='36' cy='72' r='24'/%3E%3Ccircle cx='64' cy='72' r='24'/%3E%3Ccircle cx='50' cy='52' r='26'/%3E%3C/g%3E%3C/svg%3E");
}

.apg-shape--circle {
	--apg-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23000'/%3E%3C/svg%3E");
}

.apg-shape--squircle {
	--apg-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='28' fill='%23000'/%3E%3C/svg%3E");
}

/* ============================================================ Shape divider */

.apg-divider {
	--apg-div-color: #fff;
	--apg-div-h: 28px;
	--apg-div-tile: 64px;

	position: relative;
	width: 100%;
	height: var(--apg-div-h);
	background: var(--apg-div-color);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--apg-div-tile) 100%;
	mask-size: var(--apg-div-tile) 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

.apg-divider--flip {
	transform: scaleX(-1);
}

/* Pulled onto the edge of whichever container it sits in. */
.apg-divider--at-top {
	margin-top: calc(var(--apg-div-h) * -1);
}

.apg-divider--at-bottom {
	margin-bottom: calc(var(--apg-div-h) * -1);
}

.apg-divider--scallop-up {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 V10 A10 10 0 0 1 20 10 V20 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 V10 A10 10 0 0 1 20 10 V20 Z' fill='%23000'/%3E%3C/svg%3E");
}

.apg-divider--scallop-down {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H20 V10 A10 10 0 0 1 0 10 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H20 V10 A10 10 0 0 1 0 10 Z' fill='%23000'/%3E%3C/svg%3E");
}

.apg-divider--wave {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 V10 Q10 0 20 10 T40 10 V20 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 V10 Q10 0 20 10 T40 10 V20 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ==================================================================== Navbar */

.apg-nav {
	--apg-nav-bg: #fff;
	--apg-nav-radius: 44px;
	--apg-nav-color: #4a4a4a;
	--apg-nav-hover: #3a5826;
	--apg-nav-active: #3a5826;
	--apg-nav-active-weight: 700;
	--apg-nav-gap: 30px;
	--apg-nav-logo-h: 38px;
	--apg-nav-lang-color: #3a5826;
	--apg-nav-lang-border: #3a5826;
	--apg-nav-lang-bg: transparent;
	--apg-nav-lang-hover-bg: #3a5826;
	--apg-nav-lang-hover-color: #fff;
	--apg-nav-lang-radius: 20px;
	--apg-nav-toggle: #3a5826;
	--apg-nav-break: 1024px;
}

/*
 * Breathing room for a bar sitting in the flow. Deliberately on the widget and
 * not on the header container: while the bar floats, container padding would
 * reserve height and show as a band above the hero.
 */
.apg-nav:not(.apg-nav--overlay) {
	padding: 20px 16px;
}

.apg-nav *,
.apg-nav *::before,
.apg-nav *::after {
	box-sizing: border-box;
}

.apg-nav-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 34px;
	background: var(--apg-nav-bg);
	border-radius: var(--apg-nav-radius);
}

.apg-nav-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	color: var(--apg-nav-active);
	font-weight: 800;
	font-size: 22px;
}

.apg-nav-logo img {
	display: block;
	height: var(--apg-nav-logo-h);
	width: auto;
	max-width: none;
}

/* Menu + language button share the middle, so the menu can sit centred. */
.apg-nav-panel {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 24px;
	min-width: 0;
}

.apg-nav-list {
	display: flex;
	align-items: center;
	gap: var(--apg-nav-gap);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.apg-nav-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.apg-nav-list a {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	color: var(--apg-nav-color);
	transition: color 0.15s ease;
	white-space: nowrap;
}

.apg-nav-list a:hover,
.apg-nav-list a:focus-visible {
	color: var(--apg-nav-hover);
}

.apg-nav-list .current-menu-item > a,
.apg-nav-list .current_page_item > a,
.apg-nav-list .current-menu-ancestor > a,
.apg-nav-list .current-menu-parent > a {
	color: var(--apg-nav-active);
	font-weight: var(--apg-nav-active-weight);
}

/* Second level */
.apg-nav-list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 190px;
	margin: 10px 0 0;
	padding: 10px 0;
	list-style: none;
	background: var(--apg-nav-bg);
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.apg-nav-list li:hover > .sub-menu,
.apg-nav-list li:focus-within > .sub-menu {
	display: block;
}

.apg-nav-list .sub-menu a {
	display: block;
	padding: 8px 18px;
	white-space: normal;
}

/* The language control, either a single button or a menu holding a
   translation plugin's switcher. Both wear the same pill: only the
   top level does, so a switcher's other languages drop down as plain
   links rather than a stack of buttons. */
.apg-nav-lang,
.apg-nav-lang-list > li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 7px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: var(--apg-nav-lang-color);
	background: var(--apg-nav-lang-bg);
	border: 1px solid var(--apg-nav-lang-border);
	border-radius: var(--apg-nav-lang-radius);
	transition: background 0.18s ease, color 0.18s ease;
}

.apg-nav-lang:hover,
.apg-nav-lang:focus-visible,
.apg-nav-lang-list > li > a:hover,
.apg-nav-lang-list > li > a:focus-visible {
	background: var(--apg-nav-lang-hover-bg);
	color: var(--apg-nav-lang-hover-color);
}

.apg-nav-lang-menu {
	flex: none;
}

.apg-nav-lang-list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apg-nav-lang-list > li {
	position: relative;
}

/* A flag image the switcher supplies, kept to the size of the text. */
.apg-nav-lang-list a img {
	display: inline-block;
	width: auto;
	height: 1em;
	margin-inline-end: 6px;
	vertical-align: -0.1em;
}

/* The remaining languages. Hung from the right, because the button sits
   at the end of the bar and a left-aligned panel would run off screen. */
.apg-nav-lang-list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	z-index: 20;
	min-width: 150px;
	margin: 10px 0 0;
	padding: 10px 0;
	list-style: none;
	background: var(--apg-nav-bg);
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.apg-nav-lang-list li:hover > .sub-menu,
.apg-nav-lang-list li:focus-within > .sub-menu {
	display: block;
}

.apg-nav-lang-list .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--apg-nav-color);
}

.apg-nav-lang-list .sub-menu a:hover,
.apg-nav-lang-list .sub-menu a:focus-visible {
	color: var(--apg-nav-hover);
}

/* Hamburger */
.apg-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.apg-nav-toggle span {
	display: block;
	height: 2px;
	width: 22px;
	margin: 0 auto;
	border-radius: 2px;
	background: var(--apg-nav-toggle);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.apg-nav.is-open .apg-nav-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.apg-nav.is-open .apg-nav-toggle span:nth-child(2) {
	opacity: 0;
}

.apg-nav.is-open .apg-nav-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/*
 * Collapsed layout. The breakpoint is a widget setting, so this uses a
 * container-independent media query driven by a class the script adds rather
 * than a fixed width.
 */
.apg-nav--collapsed .apg-nav-toggle {
	display: flex;
}

.apg-nav--collapsed .apg-nav-inner {
	flex-wrap: wrap;
	row-gap: 0;
}

/* Collapsed, the first row holds only the logo and the hamburger, and both
   are flex:none, so without this they sit together against one edge with the
   rest of the bar empty. The panel below is a full-width row of its own and
   is not affected. Logical, so it holds on the Arabic side too. */
.apg-nav--collapsed .apg-nav-toggle {
	margin-inline-start: auto;
}

.apg-nav--collapsed .apg-nav-panel {
	display: none;
	flex: 0 0 100%;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	padding-top: 18px;
}

.apg-nav--collapsed.is-open .apg-nav-panel {
	display: flex;
}

.apg-nav--collapsed .apg-nav-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	width: 100%;
}

.apg-nav--collapsed .apg-nav-list a {
	display: block;
	width: 100%;
	padding: 4px 0;
}

.apg-nav--collapsed .apg-nav-list .sub-menu {
	position: static;
	display: block;
	margin: 8px 0 0 14px;
	padding: 0;
	box-shadow: none;
	background: transparent;
}

.apg-nav--collapsed .apg-nav-lang,
.apg-nav--collapsed .apg-nav-lang-menu {
	align-self: flex-start;
}

/* On a phone the panel is a column, so the languages sit open under the
   button instead of hanging off the right edge where there is no room. */
.apg-nav--collapsed .apg-nav-lang-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.apg-nav--collapsed .apg-nav-lang-list .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	margin: 8px 0 0 14px;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.apg-nav--collapsed .apg-nav-lang-list .sub-menu a {
	padding: 4px 0;
}

/* ================================================== Responsive, small screens
 *
 * Everything above already scales through its own custom properties and the
 * Elementor responsive controls. These are the tightening-up rules that only
 * make sense on a narrow screen.
 */

@media (max-width: 767px) {
	/* Accordion + FAQ */
	.apg-acc-head {
		padding: 16px 16px;
		gap: 12px;
	}

	.apg-acc-title {
		font-size: calc(15px * var(--apg-fs, 1));
	}

	.apg-acc-body {
		padding: 14px 16px 16px;
	}

	.apg-acc-content table,
	.apg-description table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.apg-acc-icon-wrap {
		width: 26px;
		height: 26px;
	}

	/* Related products */
	.apg-related-heading {
		font-size: calc(22px * var(--apg-fs, 1));
		margin-bottom: 20px;
	}

	/* Segmented switcher */
	.apg-switch {
		width: 100% !important;
	}

	.apg-switch-item {
		padding: 0 12px;
		font-size: 12px;
		letter-spacing: 0.03em;
	}

	/* Buttons stretch, so a thumb can hit them */
	.apg-btn {
		width: 100%;
	}

	.apg-btn-wrap {
		width: 100%;
	}

	/* Feature list */
	.apg-features {
		grid-template-columns: minmax(0, 1fr);
	}

	.apg-feature-title {
		font-size: 16px;
	}

	/* Marquee */
	.apg-marquee {
		--apg-mq-gap: 34px;
	}

	/* Shape image */
	.apg-shape {
		--apg-shape-x: 8px;
		--apg-shape-y: 8px;
	}

	/* Product gallery */
	.apg-gallery-main {
		padding: 22px;
	}

	.apg-gallery {
		--apg-thumb-size: 68px;
	}

	/* Product page text */
	.apg-term-line {
		font-size: calc(12px * var(--apg-fs, 1));
	}
}

@media (max-width: 480px) {
	.apg-switch-item {
		font-size: 11px;
		padding: 0 8px;
	}

	.apg-gallery {
		--apg-thumb-size: 58px;
	}

	.apg-related-heading {
		font-size: calc(20px * var(--apg-fs, 1));
	}
}

/* ============================================ Related products, swipe on phones
 *
 * The next card is left partly visible so the row reads as scrollable without
 * needing arrows or dots.
 *
 * No -webkit-overflow-scrolling here. It has done nothing since iOS 13, where
 * momentum scrolling became the default, and the layer it used to force is a
 * known source of stale pixels: the row stays painted over the next page after
 * tapping a card in it.
 */

.apg-related {
	--apg-peek: 78%;
}

@media (max-width: 767px) {
	.apg-related--swipe .apg-grid {
		display: flex;
		gap: var(--apg-gap-x);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.apg-related--swipe .apg-grid::-webkit-scrollbar {
		display: none;
	}

	.apg-related--swipe .apg-card {
		flex: 0 0 var(--apg-peek);
		scroll-snap-align: start;
	}

	/*
	 * Let the row bleed to the screen edge even when the section has padding,
	 * so the peeking card is cut by the viewport rather than floating.
	 */
	.apg-related--swipe .apg-grid {
		margin-inline: calc(var(--apg-related-bleed, 0px) * -1);
		padding-inline: var(--apg-related-bleed, 0px);
	}
}

/* --------------------------------------------------- Navbar, transparent state
 *
 * Set per page in the Header box, so one shared header can sit over a hero on
 * some pages and stay solid on the rest.
 */

.apg-nav--transparent {
	--apg-nav-bg: var(--apg-nav-t-bg, transparent);
	--apg-nav-color: var(--apg-nav-t-color, #fff);
	--apg-nav-hover: var(--apg-nav-t-hover, #fff);
	--apg-nav-active: var(--apg-nav-t-active, #fff);
	--apg-nav-lang-color: var(--apg-nav-t-lang-color, #fff);
	--apg-nav-lang-border: var(--apg-nav-t-lang-border, #fff);
	--apg-nav-lang-bg: transparent;
	--apg-nav-toggle: var(--apg-nav-t-toggle, #fff);
}

/* The Elementor box-shadow control targets the inner bar, so it has to be
   overridden here rather than simply left unset. */
.apg-nav--flat .apg-nav-inner {
	box-shadow: none;
}

/* The collapsed panel needs a surface of its own: menu links in white on a
   clear background are unreadable once the bar drops onto the page. */
.apg-nav--transparent.apg-nav--collapsed.is-open .apg-nav-inner {
	background: var(--apg-nav-t-panel-bg, rgba(0, 0, 0, 0.55));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------ Navbar, floating over
 *
 * The bar keeps its own colour; it is simply lifted out of the flow so the
 * section below starts at the top of the page and shows around it.
 */

.apg-nav--overlay {
	position: absolute;
	top: var(--apg-nav-top, 20px);
	left: 0;
	right: 0;
	z-index: var(--apg-nav-z, 20);
}

/*
 * The wrapper Elementor puts around the widget still occupies a row once the
 * bar itself is absolutely placed, which shows as a band above the section
 * below. Collapse it, and neutralise the padding and min-height a header
 * container usually carries so the hero can start at the very top.
 */
.apg-nav-host {
	position: static;
	height: 0;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.apg-nav-host > .elementor-widget-container {
	height: 0;
}

/* The container the header sits in, when it holds nothing but this bar. */
.elementor-element:has( > .elementor-widget-container > .apg-nav--overlay ),
.e-con:has( > .apg-nav-host ),
.elementor-section:has( .apg-nav-host ) {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 0;
}