/*!
 * ANTELYX components (Phase 2). Builds on the tokens in ant-direct.css.
 *
 *  1. Supporting tokens
 *  2. Buttons for PHP-rendered markup (.ad-button)
 *  3. Cards and grids (species, product, post)
 *  4. Badges, status pills, notes
 *  5. Filters, chips, pagination
 *  6. Ant Finder
 *  7. Forms
 *  8. Callouts
 *  9. Header: announcement bar, mega menu, mobile menu
 * 10. Breadcrumbs
 * 11. Shop and product page
 */

/* ---------------------------------------------------------------------------
 * 1. Supporting tokens (muted natural greens)
 * ------------------------------------------------------------------------- */
:root {
	--ad-sage: #e3eae2;
	--ad-moss: #5d7a66;
}
body {
	--ad-sage: var(--e-global-color-adsage, #e3eae2);
	--ad-moss: var(--e-global-color-admoss, #5d7a66);
}

/* ---------------------------------------------------------------------------
 * 2. Buttons for PHP-rendered markup (same look as the Elementor variants)
 * ------------------------------------------------------------------------- */
.ad-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--ad-radius-sm);
	font-family: var(--ad-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
body .ad-button.ad-button--primary {
	background-color: var(--ad-amber);
	border-color: var(--ad-amber);
	color: var(--ad-ink);
}
body .ad-button.ad-button--primary:hover,
body .ad-button.ad-button--primary:focus {
	background-color: color-mix(in srgb, var(--ad-amber) 80%, #ffffff);
	border-color: color-mix(in srgb, var(--ad-amber) 80%, #ffffff);
	color: var(--ad-ink);
}
body .ad-button.ad-button--secondary {
	background-color: transparent;
	border-color: var(--ad-forest);
	color: var(--ad-forest);
}
body .ad-button.ad-button--secondary:hover,
body .ad-button.ad-button--secondary:focus {
	background-color: var(--ad-forest);
	border-color: var(--ad-forest);
	color: var(--ad-white);
}
body .ad-button.ad-button--utility {
	background-color: var(--ad-forest);
	border-color: var(--ad-forest);
	color: var(--ad-white);
}
body .ad-button.ad-button--utility:hover,
body .ad-button.ad-button--utility:focus {
	background-color: var(--ad-forest-light);
	border-color: var(--ad-forest-light);
	color: var(--ad-white);
}
body .ad-button.ad-button--quiet {
	background-color: transparent;
	border-color: transparent;
	color: var(--ad-forest);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body .ad-button.ad-button--quiet:hover,
body .ad-button.ad-button--quiet:focus { color: var(--ad-forest-light); }
body .ad-dark .ad-button.ad-button--quiet { color: var(--ad-bone); }
@media (max-width: 767px) {
	.ad-button { min-height: 52px; }
}

/* ---------------------------------------------------------------------------
 * 3. Cards and grids
 * ------------------------------------------------------------------------- */
.ad-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ad-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
	.ad-grid,
	.ad-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-grid--3-tablet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.ad-grid,
	.ad-grid--2,
	.ad-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

.ad-card--species,
.ad-card--product,
.ad-card--post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ad-card--species:hover,
.ad-card--product:hover,
.ad-card--post:hover,
.ad-card--species:focus-within,
.ad-card--product:focus-within,
.ad-card--post:focus-within {
	border-color: color-mix(in srgb, var(--ad-forest) 40%, var(--ad-line));
	box-shadow: var(--ad-shadow-lift);
}
.ad-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--ad-sand);
}
.ad-card__media--4x3 { aspect-ratio: 4 / 3; }
.ad-card__media--1x1 { aspect-ratio: 1 / 1; }
.ad-card__media--16x9 { aspect-ratio: 16 / 9; }
.ad-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ad-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.5rem 1.5rem;
}
.ad-card__title {
	margin: 0;
	font-family: var(--ad-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.008em;
}
body .ad-card .ad-card__title a { color: var(--ad-forest-deep); text-decoration: none; }
body .ad-card .ad-card__title a:hover,
body .ad-card .ad-card__title a:focus { color: var(--ad-forest-light); text-decoration: underline; text-underline-offset: 0.2em; }
.ad-card__title--sans {
	font-family: var(--ad-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}
.ad-card__eyebrow { margin: 0; font-size: 1rem; color: var(--ad-ink-muted); }
.ad-card__common { margin: -0.25rem 0 0; font-size: 0.9375rem; color: var(--ad-ink-muted); }
.ad-card__summary { margin: 0; font-size: 0.9375rem; color: var(--ad-ink-muted); }
.ad-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--ad-ink-muted);
}
.ad-card__category {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ad-copper);
}
.ad-card__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0;
}
.ad-card__offer .ad-price { font-size: 1.125rem; }
.ad-card__offer--hero { margin: 0.25rem 0 0.5rem; }
.ad-card__offer--hero .ad-price { font-size: 1.5rem; }
.ad-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.5rem;
}
.ad-card--post .ad-card__title { font-size: 1.25rem; }

/* ---------------------------------------------------------------------------
 * 4. Badges, status pills, notes
 * ------------------------------------------------------------------------- */
.ad-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.2rem 0.65rem;
	border-radius: var(--ad-radius-pill);
	background-color: var(--ad-forest-deep);
	color: var(--ad-bone);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.ad-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.15rem 0.65rem 0.15rem 0.55rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-pill);
	background-color: var(--ad-bone);
	color: var(--ad-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
}
.ad-status::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--ad-moss);
}
.ad-status--limited::before { background-color: var(--ad-amber); border-radius: 2px; transform: rotate(45deg); }
.ad-status--out::before,
.ad-status--none::before,
.ad-status--demo::before,
.ad-status--manual::before { background-color: transparent; border: 2px solid var(--ad-ink-muted); }
.ad-note {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--ad-amber);
	border-radius: 0 var(--ad-radius-sm) var(--ad-radius-sm) 0;
	background-color: var(--ad-bone);
	color: var(--ad-ink);
	font-size: 0.9375rem;
}
.ad-empty-state {
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-bone);
	text-align: center;
}
.ad-empty-state p { margin: 0 0 1rem; }

/* ---------------------------------------------------------------------------
 * 5. Filters, chips, pagination
 * ------------------------------------------------------------------------- */
.ad-filters {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr);
	gap: 1rem 1.25rem;
	align-items: end;
	padding: 1.5rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-white);
}
.ad-filters__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ad-filters__field label { font-size: 0.8125rem; font-weight: 700; color: var(--ad-ink-muted); }
.ad-filters__field input,
.ad-filters__field select { width: 100%; }
.ad-filters__actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
@media (max-width: 1279px) {
	.ad-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-filters__field--search { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.ad-filters { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
}
.ad-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
body .ad-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-pill);
	background-color: var(--ad-white);
	color: var(--ad-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
body .ad-chip:hover,
body .ad-chip:focus { border-color: var(--ad-forest); color: var(--ad-forest); }
body .ad-chip.ad-chip--active {
	border-color: var(--ad-forest);
	background-color: var(--ad-forest);
	color: var(--ad-white);
}
body .ad-chip.ad-chip--active:hover,
body .ad-chip.ad-chip--active:focus { background-color: var(--ad-forest-light); border-color: var(--ad-forest-light); color: var(--ad-white); }
.ad-results__count { margin: 0 0 0.75rem; font-weight: 600; color: var(--ad-ink-muted); }
.ad-pagination { margin-top: 2rem; }
.ad-pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
body .ad-pagination a {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-ink);
	font-weight: 600;
	text-decoration: none;
}
body .ad-pagination a[aria-current="page"] { border-color: var(--ad-forest); background-color: var(--ad-forest); color: var(--ad-white); }

/* ---------------------------------------------------------------------------
 * 6. Ant Finder (questionnaire; native radios, no JavaScript)
 * ------------------------------------------------------------------------- */
.ad-finder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 2.5rem;
}
.ad-finder__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ad-finder__group legend {
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: var(--ad-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ad-forest-deep);
}
.ad-finder__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ad-choice { position: relative; display: inline-flex; margin: 0; font-weight: 600; }
.ad-choice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.ad-choice span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 1.5px solid var(--ad-line);
	border-radius: var(--ad-radius-pill);
	background-color: var(--ad-white);
	color: var(--ad-ink);
	font-size: 0.9375rem;
	line-height: 1.2;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ad-choice:hover span { border-color: var(--ad-forest); }
.ad-choice input:checked + span {
	border-color: var(--ad-forest);
	background-color: var(--ad-forest);
	color: var(--ad-white);
}
.ad-choice input:focus-visible + span {
	outline: 3px solid var(--ad-focus);
	outline-offset: 2px;
}
.ad-finder__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ad-finder__note { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; color: var(--ad-ink-muted); }
@media (max-width: 767px) {
	.ad-finder { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ---------------------------------------------------------------------------
 * 7. Forms
 * ------------------------------------------------------------------------- */
.ad-form { display: grid; gap: 1.25rem; }
.ad-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 599px) { .ad-form__row { grid-template-columns: minmax(0, 1fr); } }
.ad-form__field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ad-form__field input,
.ad-form__field select,
.ad-form__field textarea { width: 100%; }
.ad-form__req { color: var(--ad-danger); }
.ad-form__error { margin: 0; color: var(--ad-danger); font-size: 0.875rem; font-weight: 600; }
.ad-form [aria-invalid="true"] { border-color: var(--ad-danger); }
.ad-check { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 500; }
.ad-check input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: 0.2rem; accent-color: var(--ad-forest); }
.ad-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ad-form-message { padding: 1rem 1.25rem; border-radius: var(--ad-radius-sm); border: 1px solid var(--ad-line); background-color: var(--ad-bone); }
.ad-form-message p { margin: 0; }
.ad-form-message--success { border-color: var(--ad-moss); background-color: var(--ad-sage); }
.ad-form-message--error { border-color: var(--ad-danger); background-color: #fbeeec; }

/* ---------------------------------------------------------------------------
 * 8. Callouts (information still to be confirmed)
 * ------------------------------------------------------------------------- */
.ad-callout {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--ad-moss);
	border-radius: var(--ad-radius-sm);
	background-color: var(--ad-sage);
}
.ad-callout p { margin: 0; font-size: 0.9375rem; }
.ad-callout__tag {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 0.1rem 0.6rem;
	border-radius: var(--ad-radius-pill);
	background-color: var(--ad-forest);
	color: var(--ad-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 9. Header
 * ------------------------------------------------------------------------- */
/* Announcement bar: an Elementor template shown in Astra's above-header row */
.ast-above-header-bar .elementor-widget-text-editor,
.ast-above-header-bar .elementor-widget-text-editor p {
	margin: 0;
	color: var(--ad-bone);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-align: center;
}
.ast-above-header-bar .elementor-widget-text-editor a { color: var(--ad-bone); text-decoration: underline; text-underline-offset: 0.2em; }
.ast-above-header-bar .e-con { padding: 0; }
.ast-above-header-bar .ast-builder-html-element { width: 100%; }

/* Header search field */
.ast-search-menu-icon .search-field,
.ast-search-box .search-field {
	min-height: 44px;
	border-radius: var(--ad-radius-sm);
}

/* The desktop mega menu (a menu item with the class ad-mega) is styled in section 12. */

/* Mobile menu (Astra dropdown or off-canvas): expandable sections, generous tap targets */
.ast-header-break-point .main-header-bar-navigation .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-link,
.ast-mobile-popup-drawer .ast-mobile-header-content .menu-link {
	padding-block: 0.85rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ad-ink);
}
.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-link,
.ast-mobile-popup-drawer .sub-menu .menu-link {
	padding-block: 0.65rem;
	font-size: 1rem;
	font-weight: 500;
}
.ast-header-break-point .main-header-bar-navigation .sub-menu .sub-menu .menu-link,
.ast-mobile-popup-drawer .sub-menu .sub-menu .menu-link { font-size: 0.9375rem; color: var(--ad-ink-muted); }
.ast-header-break-point .main-header-bar-navigation .main-header-menu { border-top: 1px solid var(--ad-line); }
.ast-header-break-point .main-header-bar-navigation .menu-item,
.ast-mobile-popup-drawer .menu-item { border-bottom: 1px solid var(--ad-line); }
.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item:last-child { border-bottom: 0; }
/* The Elementor Kit styles every <button> as a CTA; the submenu expanders are plain icon buttons. */
body .ast-header-break-point .ast-menu-toggle,
body .ast-mobile-popup-drawer .ast-menu-toggle,
body.ast-header-break-point .ast-menu-toggle {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--ad-ink);
}
body.ast-header-break-point .ast-menu-toggle:hover,
body.ast-header-break-point .ast-menu-toggle:focus { background-color: transparent; color: var(--ad-forest); }

/* ---------------------------------------------------------------------------
 * 10. Breadcrumbs (Rank Math)
 * ------------------------------------------------------------------------- */
.ad-breadcrumbs {
	border-bottom: 1px solid var(--ad-line);
	background-color: var(--ad-bone);
}
.rank-math-breadcrumb {
	margin: 0;
	padding: 0.7rem 0;
	font-size: 0.8125rem;
	color: var(--ad-ink-muted);
}
.rank-math-breadcrumb a { color: var(--ad-forest); text-decoration: underline; text-underline-offset: 0.2em; }
.rank-math-breadcrumb .separator { margin-inline: 0.4rem; }
.ad-breadcrumbs .ad-breadcrumbs__inner { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ---------------------------------------------------------------------------
 * 11. Shop and product page
 * ------------------------------------------------------------------------- */
.ad-shop-filters { display: grid; gap: 0.5rem 2.5rem; grid-template-columns: repeat(2, auto); justify-content: start; margin-bottom: 1.5rem; }
.ad-shop-filters__label { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ad-copper); }
@media (max-width: 767px) { .ad-shop-filters { grid-template-columns: minmax(0, 1fr); } }

/* Product loops (WooCommerce shop and categories) as cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-white);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	border-color: color-mix(in srgb, var(--ad-forest) 40%, var(--ad-line));
	box-shadow: var(--ad-shadow-lift);
}
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .ad-loop-sci,
.woocommerce ul.products li.product .ad-loop-status {
	padding-inline: 1.25rem;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap { padding-bottom: 1.25rem; }
.woocommerce ul.products li.product .ad-loop-sci { display: block; margin-bottom: 0.15rem; color: var(--ad-ink-muted); }
.woocommerce ul.products li.product .ad-loop-status { display: block; margin: 0.35rem 0 0.75rem; }
.woocommerce ul.products li.product a img { border-radius: 0; }
.woocommerce ul.products li.product .ast-loop-product__link { display: block; }

/* Single product */
.ad-product-sci {
	margin: 0 0 0.5rem;
	font-family: var(--ad-font-display);
	font-size: 1.25rem;
	color: var(--ad-ink-muted);
}
.ad-product-sci a { color: inherit; text-decoration: none; }
.ad-product-sci a:hover,
.ad-product-sci a:focus { color: var(--ad-forest); text-decoration: underline; text-underline-offset: 0.2em; }
.ad-product-sci__common { margin-left: 0.5rem; font-family: var(--ad-font-body); font-size: 0.9375rem; }
.ad-product-status { margin: 0.25rem 0 1rem; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.woocommerce div.product form.cart .variations { flex: 1 1 100%; margin-bottom: 0.5rem; }
.woocommerce div.product form.cart .variations select { min-width: 12rem; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding-block: 0.4rem; }
.woocommerce div.product form.cart .single_variation_wrap { flex: 1 1 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.woocommerce .single_add_to_cart_button.ad-buy-now,
.woocommerce a.button.ad-buy-now {
	border-color: var(--ad-amber);
	background-color: var(--ad-amber);
	color: var(--ad-ink);
}
.woocommerce .single_add_to_cart_button.ad-buy-now:hover,
.woocommerce .single_add_to_cart_button.ad-buy-now:focus {
	border-color: color-mix(in srgb, var(--ad-amber) 80%, #ffffff);
	background-color: color-mix(in srgb, var(--ad-amber) 80%, #ffffff);
	color: var(--ad-ink);
}
.ad-product-block { margin-top: 1.5rem; }
.ad-species-box {
	clear: both;
	margin: 2.5rem 0;
	padding: 1.75rem 2rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-bone);
}
.ad-species-box .ad-eyebrow { margin: 0 0 0.35rem; }
.ad-species-box__title { margin: 0 0 0.75rem; font-size: 1.75rem; }
body .ad-species-box__title a { color: var(--ad-forest-deep); text-decoration: none; }
.ad-species-box__sub { margin: 1rem 0 0.25rem; font-size: 1rem; }
.ad-species-box p { max-width: 62ch; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 700; }

/* ===========================================================================
 * PHASE 3A
 * 12. Desktop mega menu
 * 13. Mobile menu buttons
 * 14. Image collage (home hero and species pages)
 * 15. Direct inquiry (dialog, product call to action)
 * 16. Skeleton loading components
 * 17. Species page and shop extras
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 12. Desktop mega menu
 * A top level item with the class ad-mega opens a panel. Its children are the
 * columns (headings with links below), the item with ad-mega__feature is the
 * Elementor card, ad-mega__strip is a one-line row of shortcuts. A closed panel is
 * display:none, so nothing inside it can be hovered or clicked; ad-nav.js opens the panel of
 * the one item the pointer or the keyboard is on (class is-open, with a short hover intent).
 * Without the script the panel still opens on :hover and :focus-within.
 * ------------------------------------------------------------------------- */
@media (min-width: 922px) {
	.ast-primary-header-bar { position: relative; }
	.ast-desktop .main-header-menu > .menu-item.ad-mega { position: static; }

	.ast-desktop .main-header-menu > .ad-mega > .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		display: none;
		grid-template-columns: var(--ad-mega-cols, repeat(3, minmax(0, 1fr)));
		align-items: start;
		gap: 1.5rem 2.25rem;
		width: min(var(--ad-mega-w, 900px), calc(100vw - 48px));
		margin: 0;
		padding: 2rem 2.25rem 2.25rem;
		border: 1px solid var(--ad-line);
		border-top: 3px solid var(--ad-forest);
		border-radius: 0 0 var(--ad-radius-md) var(--ad-radius-md);
		background-color: var(--ad-white);
		box-shadow: 0 30px 60px -28px rgb(15 45 36 / 0.42), 0 6px 16px -8px rgb(15 45 36 / 0.14);
		transform: translate(-50%, 0);
	}
	/* Keeps the panel open while the pointer crosses the small gap under the bar. */
	.ast-desktop .main-header-menu > .ad-mega > .sub-menu::before {
		content: "";
		position: absolute;
		top: -16px;
		right: 0;
		left: 0;
		height: 16px;
	}
	/* Open: only the item the script marked (pointer with a short intent delay, or keyboard focus). */
	.ast-desktop .main-header-menu > .ad-mega.is-open > .sub-menu {
		display: grid;
		animation: ad-mega-in 0.16s ease both;
	}
	/* Without the script: hover and keyboard focus. */
	html:not(.ad-nav-js) .ast-desktop .main-header-menu > .ad-mega:hover > .sub-menu,
	html:not(.ad-nav-js) .ast-desktop .main-header-menu > .ad-mega:focus-within > .sub-menu {
		display: grid;
		animation: ad-mega-in 0.16s ease both;
	}
	@keyframes ad-mega-in {
		from { opacity: 0; transform: translate(-50%, 8px); }
		to { opacity: 1; transform: translate(-50%, 0); }
	}

	/* Column: heading, then links */
	.ast-desktop .ad-mega > .sub-menu > .menu-item { display: block; margin: 0; padding: 0; }
	.ast-desktop .ad-mega > .sub-menu > .menu-item > .menu-link {
		padding: 0 0 0.7rem;
		margin: 0 0 0.4rem;
		border-bottom: 1px solid var(--ad-line);
		border-radius: 0;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ad-copper);
	}
	.ast-desktop .ad-mega > .sub-menu > .menu-item > .menu-link:hover,
	.ast-desktop .ad-mega > .sub-menu > .menu-item > .menu-link:focus { background: none; color: var(--ad-forest); }

	.ast-desktop .ad-mega .sub-menu .sub-menu {
		position: static;
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
	.ast-desktop .ad-mega .sub-menu .sub-menu .menu-item { break-inside: avoid; }
	.ast-desktop .ad-mega .sub-menu .sub-menu .menu-link {
		display: flex;
		align-items: center;
		margin-inline: -0.65rem;
		padding: 0.42rem 0.65rem;
		border-radius: var(--ad-radius-sm);
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1.35;
		color: var(--ad-ink);
		transition: background-color 0.12s ease, color 0.12s ease;
	}
	.ast-desktop .ad-mega .sub-menu .sub-menu .menu-item:hover > .menu-link,
	.ast-desktop .ad-mega .sub-menu .sub-menu .menu-link:focus { background-color: var(--ad-bone); color: var(--ad-forest); }
	.ast-desktop .main-header-menu .ad-mega .sub-menu .menu-item > .menu-link > .dropdown-menu-toggle,
	.ast-desktop .main-header-menu .ad-mega .sub-menu .menu-item > .menu-link > .ast-icon,
	.ast-desktop .main-header-menu .ad-mega .sub-menu .ast-menu-toggle { display: none !important; }
	.ast-desktop .ad-mega__cols-2 > .sub-menu { column-count: 2; column-gap: 1.5rem; }

	/* Strip: a heading and a row of shortcuts */
	.ast-desktop .ad-mega > .sub-menu > .ad-mega__strip {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 0.25rem 1.5rem;
		padding-top: 1.1rem;
		border-top: 1px solid var(--ad-line);
	}
	.ast-desktop .ad-mega > .sub-menu > .ad-mega__strip > .menu-link { margin: 0; padding: 0; border: 0; white-space: nowrap; }
	.ast-desktop .ad-mega > .sub-menu > .ad-mega__strip > .sub-menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
	.ast-desktop .ad-mega > .sub-menu > .ad-mega__strip .menu-link { margin-inline: 0; }

	/* Feature card (an Elementor template) */
	.ast-desktop .ad-mega > .sub-menu > .ad-mega__feature { display: block; }
	.ad-mega-feature { height: 100%; }
	.ad-mega-feature .elementor,
	.ad-mega-feature .e-con { height: 100%; margin: 0; }
	.ad-mega-feature .ad-mega-card { min-height: 100%; overflow: hidden; border-radius: var(--ad-radius-md); }
	.ad-mega-feature .elementor-widget:not(:last-child) { margin-bottom: 0; }
	.ad-mega-feature a { text-decoration: none; }

	/* The four menus */
	.ast-desktop .ad-mega--shop > .sub-menu { --ad-mega-w: 900px; --ad-mega-cols: minmax(0, 0.8fr) minmax(0, 1.5fr) 300px; }
	.ast-desktop .ad-mega--shop > .sub-menu > .ad-mega__feature { grid-column: 3; grid-row: 1 / span 2; }
	.ast-desktop .ad-mega--atlas > .sub-menu { --ad-mega-w: 1140px; --ad-mega-cols: repeat(4, minmax(0, 1fr)) 330px; }
	.ast-desktop .ad-mega--atlas > .sub-menu > .ad-mega__feature { grid-column: 5; grid-row: 1 / span 2; }
	.ast-desktop .ad-mega--atlas > .sub-menu > .ad-mega__strip { grid-column: 1 / 5; grid-row: 2; }
	.ast-desktop .ad-mega--learn > .sub-menu { --ad-mega-w: 880px; --ad-mega-cols: repeat(3, minmax(0, 1fr)) 270px; }
	.ast-desktop .ad-mega--learn > .sub-menu > .ad-mega__feature { grid-column: 4; grid-row: 1; }
	.ast-desktop .ad-mega--support > .sub-menu { --ad-mega-w: 780px; --ad-mega-cols: minmax(0, 1fr) minmax(0, 1fr) 300px; }
	.ast-desktop .ad-mega--support > .sub-menu > .ad-mega__feature { grid-column: 3; grid-row: 1; }
}
/* Narrow desktops and tablets in landscape: columns only, no feature card. */
@media (min-width: 922px) and (max-width: 1199px) {
	.ast-desktop .ad-mega > .sub-menu > .ad-mega__feature { display: none; }
	.ast-desktop .ad-mega--shop > .sub-menu { --ad-mega-cols: minmax(0, 0.8fr) minmax(0, 1.5fr); }
	.ast-desktop .ad-mega--atlas > .sub-menu { --ad-mega-cols: repeat(4, minmax(0, 1fr)); }
	.ast-desktop .ad-mega--learn > .sub-menu { --ad-mega-cols: repeat(3, minmax(0, 1fr)); }
	.ast-desktop .ad-mega--support > .sub-menu { --ad-mega-cols: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 922px) and (prefers-reduced-motion: reduce) {
	.ast-desktop .main-header-menu > .ad-mega.is-open > .sub-menu,
	html:not(.ad-nav-js) .ast-desktop .main-header-menu > .ad-mega:hover > .sub-menu,
	html:not(.ad-nav-js) .ast-desktop .main-header-menu > .ad-mega:focus-within > .sub-menu { animation: none; }
}

/* Featured species rows inside the Ant Atlas menu (compact visual cards) */
.ad-mega-species { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.ad-mega-species li { margin: 0; padding: 0; }
body .ad-mega-species__item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
	padding: 0.5rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-white);
	color: var(--ad-ink);
	text-decoration: none;
	transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
body .ad-mega-species__item:hover,
body .ad-mega-species__item:focus {
	border-color: color-mix(in srgb, var(--ad-forest) 45%, var(--ad-line));
	box-shadow: var(--ad-shadow-lift);
	transform: translateY(-1px);
}
.ad-mega-species__media { display: block; overflow: hidden; border-radius: 10px; background-color: var(--ad-sand); aspect-ratio: 4 / 3; }
.ad-mega-species__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-mega-species__text { display: grid; gap: 0.1rem; min-width: 0; }
.ad-mega-species__text .ad-sci { font-family: var(--ad-font-display); font-size: 1.0625rem; line-height: 1.25; color: var(--ad-forest-deep); }
.ad-mega-species__common { font-size: 0.8125rem; color: var(--ad-ink-muted); }
.ad-mega-species__meta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ad-copper); }
.ad-mega-species__empty { margin: 0; font-size: 0.875rem; color: var(--ad-ink-muted); }

/* ---------------------------------------------------------------------------
 * 13. Mobile menu buttons (the mobile menu is its own, simpler menu)
 * ------------------------------------------------------------------------- */
body.ast-header-break-point .main-header-bar-navigation .menu-item.ad-menu-cta { padding: 0.75rem 1rem 0; border-bottom: 0; }
body.ast-header-break-point .main-header-bar-navigation .menu-item.ad-menu-cta:last-child { padding-bottom: 1.25rem; }
body.ast-header-break-point .main-header-bar-navigation .ad-menu-cta > .menu-link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0.8rem 1rem;
	line-height: 1.3;
	border: 2px solid var(--ad-amber);
	border-radius: var(--ad-radius-sm);
	background-color: var(--ad-amber);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	color: var(--ad-ink);
}
body.ast-header-break-point .main-header-bar-navigation .ad-menu-cta--whatsapp > .menu-link {
	border-color: var(--ad-forest);
	background-color: transparent;
	color: var(--ad-forest);
}
/* A section that only expands (its own address is "#") reads as a toggle, not a link. */
.ast-header-break-point .main-header-bar-navigation .menu-item-has-children > .menu-link[href="#"] { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * 14. Image collage: one large 16:9 image, two supporting images beside it.
 * Used by the home hero (three Elementor Image widgets) and by species pages
 * (three images from the species record). It never depends on all three images
 * being present, and it is a deliberate mobile layout, not a shrunken desktop one.
 * ------------------------------------------------------------------------- */
.ad-collage,
.elementor .e-con.ad-collage {
	--ad-collage-main: 2.66fr;
	display: grid;
	grid-template-columns: minmax(0, var(--ad-collage-main)) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	width: 100%;
	padding: 0;
}
.ad-collage__item {
	position: relative;
	min-width: 0;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-sand);
}
.elementor .elementor-widget-image.ad-collage__item { width: auto; max-width: none; margin: 0; }
.ad-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; }
.ad-collage__item--2 { grid-column: 2; grid-row: 1; }
.ad-collage__item--3 { grid-column: 2; grid-row: 2; }
.ad-collage__item img,
.elementor-widget-image.ad-collage__item img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}
.ad-collage__item--1 img { height: auto; aspect-ratio: 16 / 9; }
.ad-collage__item--2 img,
.ad-collage__item--3 img { position: absolute; inset: 0; }
.elementor-widget-image.ad-collage__item .elementor-widget-container { height: 100%; }
.elementor-widget-image.ad-collage__item--2 .elementor-widget-container,
.elementor-widget-image.ad-collage__item--3 .elementor-widget-container { position: static; }

/* One or two images: the collage regroups instead of leaving holes. */
.ad-collage--n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.ad-collage--n1 .ad-collage__item--1 { grid-row: 1; }
.ad-collage--n2 .ad-collage__item--2 { grid-row: 1 / span 2; }
/* Elementor hero: keyed on which image widgets still exist (they carry ad-collage__item--1/2/3), so it
 * also works inside the editor, where extra helper elements would confuse child counting. */
.ad-collage:not(:has(> .ad-collage__item--2)):not(:has(> .ad-collage__item--3)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.ad-collage:not(:has(> .ad-collage__item--2)):not(:has(> .ad-collage__item--3)) > .ad-collage__item--1 { grid-row: 1; }
.ad-collage:has(> .ad-collage__item--2):not(:has(> .ad-collage__item--3)) > .ad-collage__item--2 { grid-row: 1 / span 2; }
.ad-collage:has(> .ad-collage__item--3):not(:has(> .ad-collage__item--2)) > .ad-collage__item--3 { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 767px) {
	.ad-collage,
	.elementor .e-con.ad-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto;
		gap: 10px;
	}
	.ad-collage__item--1 { grid-column: 1 / -1; grid-row: 1; }
	.ad-collage__item--2 { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
	.ad-collage__item--3 { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }
	.ad-collage--n1 .ad-collage__item--1 { grid-column: 1 / -1; }
	.ad-collage--n2 .ad-collage__item--2 { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 21 / 9; }
	.ad-collage:has(> .ad-collage__item--2):not(:has(> .ad-collage__item--3)) > .ad-collage__item--2 { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 21 / 9; }
	.ad-collage:has(> .ad-collage__item--3):not(:has(> .ad-collage__item--2)) > .ad-collage__item--3 { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 21 / 9; }
}

/* Home hero: the image column keeps the collage above the fold on wide screens. */
.ad-hero .ad-collage { align-self: center; }

/* Species page hero */
.ad-species-hero .ad-collage { --ad-collage-main: 2.2fr; }

/* ---------------------------------------------------------------------------
 * 15. Direct inquiry: dialog, product page call to action, contact options
 * ------------------------------------------------------------------------- */
html.ad-modal-open { overflow: hidden; }
.ad-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.ad-modal:target,
.ad-modal.is-open { display: flex; }
.ad-js .ad-modal:target:not(.is-open) { display: none; }
.ad-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgb(15 45 36 / 0.62);
	cursor: default;
}
.ad-modal__panel {
	position: relative;
	width: min(600px, 100%);
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	padding: 2.25rem 2.25rem 2rem;
	border-radius: 16px;
	background-color: var(--ad-white);
	box-shadow: 0 40px 80px -30px rgb(15 45 36 / 0.55);
	overscroll-behavior: contain;
}
body .ad-modal__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ad-ink);
	text-decoration: none;
}
body .ad-modal__close:hover,
body .ad-modal__close:focus { background-color: var(--ad-bone); color: var(--ad-forest); }
.ad-inquiry__title { margin: 0 2rem 0.5rem 0; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); color: var(--ad-forest-deep); }
.ad-inquiry__head > p:last-child,
.ad-inquiry__head .elementor-widget:last-child { margin-bottom: 0; }
.ad-inquiry__head .e-con { padding: 0; }
.ad-inquiry__head .elementor-widget:not(:last-child) { margin-bottom: 0.6rem; }
.ad-inquiry__about {
	display: grid;
	gap: 0.15rem;
	margin: 1.1rem 0 1.25rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--ad-amber);
	border-radius: 0 var(--ad-radius-sm) var(--ad-radius-sm) 0;
	background-color: var(--ad-bone);
	font-size: 0.875rem;
	color: var(--ad-ink-muted);
}
.ad-inquiry__about strong { font-size: 0.9375rem; color: var(--ad-ink); }
.ad-inquiry__about[hidden],
.ad-inquiry__head[hidden],
.ad-inquiry-form[hidden],
.ad-inquiry__done[hidden] { display: none; }
.ad-inquiry-form .ad-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.ad-inquiry__done { padding: 0.5rem 0 0; }
.ad-inquiry__done .ad-button { margin-top: 0.5rem; }
@media (max-width: 599px) {
	.ad-modal { align-items: flex-end; padding: 0.5rem; }
	.ad-modal__panel { max-height: calc(100dvh - 1rem); padding: 1.5rem 1.25rem 1.25rem; border-radius: 16px 16px 12px 12px; }
	.ad-inquiry-form .ad-form__row { grid-template-columns: minmax(0, 1fr); }
	.ad-inquiry-form .ad-form__actions .ad-button--primary { flex: 1 1 100%; }
}

/* Contact options (email, WhatsApp, phone): only what the owner has entered */
.ad-contact-options { display: grid; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.ad-contact-options__label { display: inline-block; min-width: 5.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ad-copper); }
.ad-contact-options--pending { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--ad-ink-muted); }

/* "Ask About This Colony" beside the price and Add to Cart */
.ad-inquiry-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 1rem 0 0.25rem; }
.ad-inquiry-cta .e-con,
.ad-inquiry-cta .elementor { margin: 0; padding: 0; }
.ad-inquiry-cta .elementor-widget:not(:last-child) { margin-bottom: 0; }
.ad-inquiry-cta .elementor-widget-container { margin: 0; }
.ad-inquiry-cta--unavailable {
	padding: 1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--ad-amber) 55%, var(--ad-line));
	border-radius: var(--ad-radius-md);
	background-color: color-mix(in srgb, var(--ad-amber) 9%, var(--ad-white));
}
.ad-link-quiet,
body .ad-link-quiet { font-size: 0.9375rem; font-weight: 700; color: var(--ad-forest); text-decoration: underline; text-underline-offset: 0.2em; }
body .ad-link-quiet:hover,
body .ad-link-quiet:focus { color: var(--ad-forest-light); }

/* ---------------------------------------------------------------------------
 * 16. Skeleton loading components (quiet neutral blocks, no framework)
 * ------------------------------------------------------------------------- */
.ad-skel {
	--ad-skel-a: #e8e5da;
	--ad-skel-b: #f4f2ea;
	display: block;
	border-radius: 6px;
	background-color: var(--ad-skel-a);
	background-image: linear-gradient(100deg, var(--ad-skel-a) 32%, var(--ad-skel-b) 50%, var(--ad-skel-a) 68%);
	background-repeat: no-repeat;
	background-size: 250% 100%;
	background-position: 150% 0;
	animation: ad-skel-shimmer 1.7s ease-in-out infinite;
}
@keyframes ad-skel-shimmer { to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
	.ad-skel { animation: none; background-image: none; }
}
.ad-skel--line { height: 0.8rem; }
.ad-skel--title { height: 1.3rem; }
.ad-skel--h1 { height: 2.1rem; }
.ad-skel--price { height: 1.1rem; }
.ad-skel--pill { height: 1.6rem; border-radius: 999px; }
.ad-skel--button { width: 9.5rem; height: 48px; border-radius: var(--ad-radius-sm); }
.ad-skel--field { width: 100%; height: 48px; border-radius: var(--ad-radius-sm); }
.ad-skel--fact { height: 3.4rem; border-radius: var(--ad-radius-sm); }
.ad-skel--block { width: 100%; border-radius: 0; }
.ad-skel--4x3 { aspect-ratio: 4 / 3; }
.ad-skel--1x1 { aspect-ratio: 1 / 1; }
.ad-skel--16x9 { aspect-ratio: 16 / 9; }
.ad-skeleton--card { overflow: hidden; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-md); background-color: var(--ad-white); }
.ad-skeleton__body { display: grid; gap: 0.7rem; padding: 1.25rem; align-content: start; }
.ad-skeleton__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ad-skeleton__row > .ad-skel--line { flex: 0 0 auto; }
.ad-skeleton--result { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 0.9rem; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-md); background-color: var(--ad-white); }
.ad-skeleton--result .ad-skeleton__body { padding: 0; }
.ad-skeleton--result .ad-skel--thumb { border-radius: 10px; }
.ad-skeleton-list { display: grid; gap: 0.9rem; }
.ad-skeleton--detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.ad-skeleton--detail .ad-skeleton__body { padding: 0; }
.ad-skeleton__gallery { display: grid; gap: 0.75rem; }
.ad-skeleton__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.ad-skeleton__thumbs .ad-skel { border-radius: 10px; }
.ad-skeleton__gallery > .ad-skel { border-radius: var(--ad-radius-md); }
.ad-skeleton--species { display: grid; gap: 2rem; }
.ad-skeleton__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.ad-skeleton__hero .ad-skeleton__body { padding: 0; }
.ad-skeleton__hero > .ad-skel { border-radius: var(--ad-radius-md); }
.ad-skeleton__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.ad-skeleton__blocks { display: grid; gap: 0.7rem; max-width: 46rem; }
.ad-skeleton--results { display: grid; gap: 1rem; }
@media (max-width: 767px) {
	.ad-skeleton--detail,
	.ad-skeleton__hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.ad-skeleton__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-skeleton--result { grid-template-columns: 96px minmax(0, 1fr); }
}
/* The skeleton replaces the old results only while a request is really in flight. */
.ad-results.is-loading > :not(.ad-skeleton-holder):not(template) { display: none; }
.ad-results[aria-busy="true"] { min-height: 12rem; }
.ad-skeleton-gallery__section { margin-block: 2rem 3rem; }

/* ---------------------------------------------------------------------------
 * 17. Species page and shop extras
 * ------------------------------------------------------------------------- */
.ad-species-header__alt { margin: 0 0 0.85rem; font-size: 0.9375rem; color: var(--ad-ink-muted); }
.ad-species-notice { margin: 0 0 1.25rem; max-width: 62ch; }
.ad-species-text p,
.ad-species-text__block p { max-width: 66ch; margin: 0 0 1em; }
.ad-species-text p:last-child { margin-bottom: 0; }
.ad-species-text__pending { margin: 0; max-width: 62ch; font-style: italic; color: var(--ad-ink-muted); }
.ad-facts--care,
.ad-facts--identification,
.ad-facts--colony,
.ad-facts--behaviour { margin-top: 1.25rem; }
/* Fact lists inside the narrower content column of a section fit their own width. */
.elementor .ad-facts--care,
.elementor .ad-facts--identification,
.elementor .ad-facts--colony,
.elementor .ad-facts--behaviour { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
/* One or two facts: a compact box instead of a mostly empty row. */
.ad-facts.ad-facts--few { display: inline-grid; grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); width: fit-content; max-width: 100%; }
.elementor .ad-facts.ad-facts--few { grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); }
.ad-sources { margin: 0; padding-left: 1.15rem; font-size: 0.9rem; color: var(--ad-ink-muted); }
.ad-sources li { margin-bottom: 0.3rem; }
.ad-sources a { color: var(--ad-forest); }

/* Species FAQ: native details elements styled like the Elementor accordion */
.ad-faq-list { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.ad-faq-list__item { border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); background-color: var(--ad-white); }
.ad-faq-list__item > summary {
	position: relative;
	padding: 1rem 3rem 1rem 1.15rem;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
.ad-faq-list__item > summary::-webkit-details-marker { display: none; }
.ad-faq-list__item > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1.1rem;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ad-forest);
}
.ad-faq-list__item[open] > summary::after { content: "\2212"; }
.ad-faq-list__item > p { margin: 0; padding: 0 1.15rem 1.15rem; max-width: 66ch; color: var(--ad-ink-muted); }
.ad-related-guides__title { margin: 0 0 1.5rem; }
/* The sources section disappears when a species has no sources. */
.ad-species-sources:not(:has(.ad-sources)) { display: none; }

/* Text-style Elementor button (third action next to a primary and a secondary one). */
.elementor-widget-button.ad-btn--quiet .elementor-button {
	padding-inline: 0.5rem;
	border-color: transparent;
	background-color: transparent;
	color: var(--ad-forest);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.elementor-widget-button.ad-btn--quiet .elementor-button:hover,
.elementor-widget-button.ad-btn--quiet .elementor-button:focus {
	border-color: transparent;
	background-color: transparent;
	color: var(--ad-forest-light);
}

/* Shop and category filter chips */
.ad-shop-filterbar { border-bottom: 1px solid var(--ad-line); background-color: var(--ad-bone); }
.ad-shop-filterbar__inner { width: min(1240px, 100% - 48px); margin-inline: auto; padding: 1.25rem 0 0.5rem; }
.ad-shop-filterbar .ad-shop-filters { margin-bottom: 0.75rem; }

/* ===========================================================================
 * PHASE 3A.5
 * 18. Sticky header
 * 19. Contact as its own menu item
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 18. Sticky header
 * The whole header is "position: sticky" (no script needed for that), the announcement strip
 * with the language switcher included: both stay at the top while the page scrolls. ad-header.js measures that height, adds "is-stuck" once the bar
 * has reached the top (a compact bar with a soft shadow) and freezes the header's own
 * height, so shrinking the bar never moves the page. It never hides the header on scroll.
 * ------------------------------------------------------------------------- */
:root { --ad-sticky-gap: 24px; }
html { scroll-padding-top: calc(72px + var(--ad-announce-h, 0px) + var(--ad-sticky-gap)); }
body.admin-bar { --ad-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --ad-adminbar: 46px; } }
@media (max-width: 600px) { body.admin-bar { --ad-adminbar: 0px; } } /* the admin bar scrolls away here */
html:has(body.admin-bar) { scroll-padding-top: calc(72px + var(--ad-announce-h, 0px) + var(--ad-sticky-gap) + var(--ad-adminbar, 0px)); }

body #masthead.site-header {
	position: sticky;
	top: var(--ad-adminbar, 0px); /* the announcement strip with the language switcher stays too */
	z-index: 900;
}
/* JS present: keep the header's layout height constant while the bar shrinks. The header
   itself lets clicks through, only the bars are clickable. */
html.ad-sticky-ready body #masthead.site-header {
	height: var(--ad-header-h);
	pointer-events: none;
}
html.ad-sticky-ready #masthead > * { pointer-events: auto; }
/* The frozen box is taller than the compact bar: the strip under the bar is transparent. */
html.ad-sticky-ready #masthead #ast-desktop-header,
html.ad-sticky-ready #masthead #ast-mobile-header { align-self: start; }

body #masthead .ast-primary-header-bar,
body #masthead .ast-above-header-bar {
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
body #masthead .site-primary-header-wrap,
body #masthead .ast-primary-header-bar .ast-builder-grid-row { transition: min-height 0.2s ease; }
body #masthead .site-title,
body #masthead .custom-logo { transition: font-size 0.2s ease, max-height 0.2s ease; }

body #masthead.is-stuck .ast-primary-header-bar {
	background-color: rgb(255 255 255 / 0.97);
	box-shadow: 0 10px 24px -16px rgb(15 45 36 / 0.5), 0 1px 0 var(--ad-line);
}
@supports (backdrop-filter: blur(6px)) {
	body #masthead.is-stuck .ast-primary-header-bar {
		background-color: rgb(255 255 255 / 0.9);
		backdrop-filter: saturate(1.3) blur(10px);
	}
}
body #masthead.is-stuck .site-primary-header-wrap,
body #masthead.is-stuck .ast-primary-header-bar.site-primary-header-wrap,
body #masthead.is-stuck .ast-primary-header-bar .ast-builder-grid-row { min-height: 60px; }
body #masthead.is-stuck .ast-primary-header-bar { min-height: 60px; }
/* Desktop: Astra sizes the menu rows with a line height equal to the header height. */
body.ast-desktop #masthead.is-stuck .main-header-menu > .menu-item { line-height: 60px; }
body.ast-desktop #masthead.is-stuck .site-branding { padding-block: 8px; }
body.ast-desktop #masthead.is-stuck .site-header-primary-section-right .ast-builder-layout-element { min-height: 60px; }
body.ast-desktop #masthead.is-stuck .site-header-primary-section-right .ast-site-header-cart { height: 60px; min-height: 0; }
body #masthead.is-stuck .site-title a { font-size: 0.9em; }
body #masthead.is-stuck .custom-logo { max-height: 40px; width: auto; }
body #masthead.ad-measuring * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	body #masthead .ast-primary-header-bar,
	body #masthead .site-primary-header-wrap,
	body #masthead .site-title,
	body #masthead .custom-logo { transition: none; }
}

/* Mobile: the dropdown opens under the bar, scrolls inside itself when the menu is taller
   than the screen (the height is set by ad-header.js) and never scrolls the page behind. */
body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 24px 40px -24px rgb(15 45 36 / 0.45);
}

/* ---------------------------------------------------------------------------
 * 19. Contact as its own menu item (desktop: a quiet outlined pill after the menus)
 * ------------------------------------------------------------------------- */
@media (min-width: 922px) {
	.ast-desktop .main-header-menu > .menu-item.ad-nav-contact { display: flex; align-items: center; }
	.ast-desktop .main-header-menu > .menu-item.ad-nav-contact > .menu-link {
		height: auto;
		margin-left: 0.5rem;
		padding: 0.45rem 1.1rem;
		border: 1.5px solid var(--ad-forest);
		border-radius: var(--ad-radius-pill);
		line-height: 1.5;
		color: var(--ad-forest);
	}
	.ast-desktop .main-header-menu > .menu-item.ad-nav-contact > .menu-link:hover,
	.ast-desktop .main-header-menu > .menu-item.ad-nav-contact > .menu-link:focus,
	.ast-desktop .main-header-menu > .menu-item.ad-nav-contact.current-menu-item > .menu-link {
		background-color: var(--ad-forest);
		color: var(--ad-white);
	}
}

/* ===========================================================================
 * 20. Species page on tablets and phones (jump links, accordions, rails)
 * ========================================================================= */

/* "On this page": tablets and phones only, sticky under the compact header. */
.ad-jump[hidden] { display: none; }
.ad-jump__scroll {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ad-jump__scroll::-webkit-scrollbar { display: none; }
.ad-jump__list { display: flex; gap: 0.5rem; margin: 0; padding: 0.6rem 20px; list-style: none; white-space: nowrap; }
.ad-jump__list li { margin: 0; }
.ad-jump__list a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0.95rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-pill);
	background-color: var(--ad-white);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ad-ink);
	text-decoration: none;
}
.ad-jump__list a:hover,
.ad-jump__list a:focus-visible { border-color: var(--ad-forest); color: var(--ad-forest); }
.ad-jump__list a[aria-current="true"] { border-color: var(--ad-forest); background-color: var(--ad-forest); color: var(--ad-white); }

@media (min-width: 1024px) {
	.elementor .e-con.ad-jump-section { display: none; }
}
@media (max-width: 1023px) {
	.elementor .e-con.ad-jump-section {
		position: sticky;
		top: calc(var(--ad-adminbar, 0px) + var(--ad-announce-h, 0px) + 61px);
		z-index: 800;
		padding: 0;
		border-bottom: 1px solid var(--ad-line);
		background-color: rgb(255 255 255 / 0.97);
	}
	.elementor .e-con.ad-jump-section:has(.ad-jump[hidden]) { display: none; }
	/* Anchors land below the header and the jump links. */
	html:has(.ad-jump:not([hidden])) { scroll-padding-top: calc(61px + 56px + var(--ad-announce-h, 0px) + var(--ad-adminbar, 0px)); }
}

/* Facts: two columns on phones; a long value takes the full row. */
@media (max-width: 599px) {
	.ad-facts,
	.elementor .ad-facts--care,
	.elementor .ad-facts--identification,
	.elementor .ad-facts--colony,
	.elementor .ad-facts--behaviour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-facts__item { padding: 0.7rem 0.85rem; }
	.ad-facts dt { letter-spacing: 0.06em; }
	.ad-facts dd { font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }
	.ad-facts__item--wide { grid-column: 1 / -1; }
}

/* Hero: the third, text-style action is in the jump links on phones. */
@media (max-width: 767px) {
	.ad-species-hero .elementor-widget-button.ad-btn--quiet { display: none; }
}

/* Accordion sections (script adds .ad-acc--on on phones; without the script nothing changes). */
.ad-acc__body[hidden] { display: none !important; }
@media (max-width: 767px) {
	.elementor .e-con.ad-acc--on { padding-block: 0.25rem; }
	.elementor .e-con.ad-acc--on > .e-con-inner { padding-block: 0; }
	.ad-acc--on .ad-acc__head { width: 100%; }
	body .elementor .ad-acc--on .ad-acc__toggle {
		all: unset;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		min-height: 56px;
		padding-block: 0.6rem;
		cursor: pointer;
		font: inherit;
		color: inherit;
		-webkit-tap-highlight-color: transparent;
	}
	body .elementor .ad-acc--on .ad-acc__toggle:focus-visible {
		outline: 3px solid var(--ad-focus);
		outline-offset: 2px;
		border-radius: var(--ad-radius-sm);
	}
	.ad-acc__icon {
		flex: none;
		width: 0.6rem;
		height: 0.6rem;
		border-right: 2.5px solid var(--ad-forest);
		border-bottom: 2.5px solid var(--ad-forest);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.18s ease;
	}
	.ad-acc__toggle[aria-expanded="true"] .ad-acc__icon { transform: translateY(2px) rotate(-135deg); }
	.ad-acc--on .ad-acc__body { padding-bottom: 1.25rem; }
}

/* Shortened introduction (script adds .ad-fold--on on phones). */
@media (max-width: 767px) {
	.ad-fold--on:not(.is-open) {
		position: relative;
		max-height: 11.5rem;
		overflow: hidden;
	}
	.ad-fold--on:not(.is-open)::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 4rem;
		background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--ad-white));
		pointer-events: none;
	}
	body .elementor .ad-fold__more {
		all: unset;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 0.25rem;
		cursor: pointer;
		font-weight: 700;
		color: var(--ad-forest);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
	body .elementor .ad-fold__more:focus-visible { outline: 3px solid var(--ad-focus); outline-offset: 2px; }
}

/* Related species and guides: a swipeable row instead of a long stack on phones. */
@media (max-width: 767px) {
	#related-species .ad-grid,
	#guides .e-con.e-grid {
		display: flex !important;
		gap: 1rem;
		margin-inline: -20px;
		padding: 0 20px 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	#related-species .ad-grid > *,
	#guides .e-con.e-grid > * {
		flex: 0 0 min(80%, 19rem);
		scroll-snap-align: start;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ad-acc__icon { transition: none; }
}

/* ---------------------------------------------------------------------------
 * 21. Language switcher (header slot, desktop and mobile). GTranslate "language codes" widget:
 *     EN | DE | PL. Empty, and not even a gap, if the translation plugin is off.
 * ------------------------------------------------------------------------- */
.ast-header-html-2:not(:has(.ad-lang)) { display: none; }
.ad-lang .gtranslate_wrapper { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; padding: 0; }
.ad-lang .gtranslate_wrapper a.glink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	min-height: 40px;
	padding: 0 0.3rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--ad-ink-muted);
	text-decoration: none;
	border-radius: var(--ad-radius-sm);
}
.ad-lang .gtranslate_wrapper a.glink { gap: 0.35rem; }
.ad-lang .gtranslate_wrapper a.glink img { display: block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35); }
.ad-lang .gtranslate_wrapper a.glink span { line-height: 1; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.ad-lang .gtranslate_wrapper a.glink img { flex: none; }
.ad-lang .gtranslate_wrapper a.glink:not(.gt-current-lang) img { opacity: 0.85; }
.ad-lang .gtranslate_wrapper a.glink:hover,
.ad-lang .gtranslate_wrapper a.glink:focus-visible { color: var(--ad-forest); }
.ad-lang .gtranslate_wrapper a.glink:focus-visible { outline: 2px solid var(--ad-focus); outline-offset: 1px; }
.ad-lang .gtranslate_wrapper a.glink.gt-current-lang {
	color: var(--ad-forest);
	text-decoration: underline;
	text-decoration-color: var(--ad-amber);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}
@media (max-width: 767.98px) {
	.ad-lang .gtranslate_wrapper a.glink { min-width: 0; min-height: 44px; padding: 0 0.25rem; gap: 0.25rem; font-size: 0.75rem; letter-spacing: 0.02em; }
	.ad-lang .gtranslate_wrapper a.glink img { width: 16px; height: 16px; }
	.ast-above-header-bar .ad-announce .elementor-widget-text-editor p { font-size: 0.75rem; line-height: 1.3; }
}
/* The language switcher lives in the strip above the header (desktop and mobile): cream on forest. */
.ast-above-header-bar .ad-lang .gtranslate_wrapper a.glink { color: var(--ad-cream, #F5F3EC); min-height: 34px; font-size: 0.8125rem; }
.ast-above-header-bar .ad-lang .gtranslate_wrapper a.glink:hover,
.ast-above-header-bar .ad-lang .gtranslate_wrapper a.glink:focus-visible { color: var(--ad-amber); }
.ast-above-header-bar .ad-lang .gtranslate_wrapper a.glink.gt-current-lang { color: var(--ad-amber); text-decoration-color: var(--ad-amber); }
.ast-above-header-bar .ad-lang .gtranslate_wrapper a.glink:focus-visible { outline-color: var(--ad-amber); }
@media (max-width: 921.98px) {
	/* Announcement text left, language codes right; the empty left column is dropped. */
	.ast-mobile-header-wrap .ast-above-header-bar .ast-builder-grid-row { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 0.5rem; }
	.ast-mobile-header-wrap .ast-above-header-bar .site-header-above-section-left { display: none; }
	.ast-mobile-header-wrap .ast-above-header-bar .site-header-above-section-center { justify-content: flex-start; text-align: left; }
	.ast-mobile-header-wrap .ast-above-header-bar .ad-announce .elementor-widget-text-editor { text-align: left; }
	.ast-mobile-header-wrap .ast-above-header-bar .ad-lang .gtranslate_wrapper a.glink { min-height: 36px; }
}
@media (max-width: 767.98px) {
	/* Short announcement on phones. */
	.ad-announce__long { display: none; }
}
/* ===========================================================================
 * PHASE 3A.6
 * 22. Quantity control, cart and shop calls to action, test-mode notices
 * ========================================================================= */

/* Quantity: "-" [ 2 ] "+" (script adds the buttons; the plain field works without it). */
.quantity.ad-qty { display: inline-flex; align-items: stretch; }
.ad-qty input.qty {
	width: 3.25rem;
	min-height: 44px;
	margin: 0;
	border-inline: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.ad-qty input.qty::-webkit-outer-spin-button,
.ad-qty input.qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
body .ad-qty .ad-qty__btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	border: 1px solid var(--ad-line-strong, #c9c2b3);
	background-color: var(--ad-white);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ad-forest);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
body .ad-qty .ad-qty__btn:first-of-type { border-radius: var(--ad-radius-sm) 0 0 var(--ad-radius-sm); }
body .ad-qty .ad-qty__btn:last-of-type { border-radius: 0 var(--ad-radius-sm) var(--ad-radius-sm) 0; }
body .ad-qty .ad-qty__btn:hover:not(:disabled) { background-color: var(--ad-bone); }
body .ad-qty .ad-qty__btn:focus-visible { outline: 3px solid var(--ad-focus); outline-offset: 1px; position: relative; }
body .ad-qty .ad-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Cart: a remove control that is easy to hit. */
.woocommerce-cart-form a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 1.25rem;
}
.woocommerce-cart-form td.product-remove { width: 3rem; }

/* Grid card: the quiet "Ask" link under the button. */
.woocommerce ul.products li.product .ad-loop-ask {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Help strip below the shop grid (Elementor template "AD | Help strip"). */
.ad-help-strip-wrap { margin-top: 3rem; }

/* ---------------------------------------------------------------------------
 * 23. Compact species and colony cards (.ad-sp, .ad-cp) and their grid (.ad-grid--auto)
 * One design for the Atlas, featured and related species and the colonies of a species.
 * The grid fits as many ~15.5rem cards as the width allows (four on a wide desktop, three on
 * a laptop, two on a tablet, one on a phone); every card in a row has the same height and the
 * actions sit on the same line. The description is capped: the details live on the species page.
 * ------------------------------------------------------------------------- */
.ad-grid.ad-grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: 1.25rem;
}
@media (max-width: 599px) {
	.ad-grid.ad-grid--auto { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
.ad-status--enquire::before { background-color: transparent; border: 2px solid var(--ad-ink-muted); }

.ad-sp__media,
.ad-cp__media {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--ad-sand);
}
.ad-sp__media { aspect-ratio: 2 / 1; }
.ad-cp__media { aspect-ratio: 4 / 3; }
.ad-sp__media img,
.ad-cp__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-sp .ad-badge,
.ad-cp .ad-badge { top: 0.6rem; left: 0.6rem; }

body .ad-sp .ad-sp__body,
body .ad-cp .ad-cp__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.85rem 1rem 1rem;
}
body .ad-sp .ad-sp__sci,
body .ad-cp .ad-cp__title {
	margin: 0;
	font-family: var(--ad-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.008em;
}
body .ad-cp .ad-cp__title { font-family: var(--ad-font-body); font-size: 1rem; font-weight: 700; line-height: 1.3; }
body .ad-sp .ad-sp__sci a,
body .ad-cp .ad-cp__title a { color: var(--ad-forest-deep); text-decoration: none; }
body .ad-sp .ad-sp__sci a:hover,
body .ad-sp .ad-sp__sci a:focus-visible,
body .ad-cp .ad-cp__title a:hover,
body .ad-cp .ad-cp__title a:focus-visible { color: var(--ad-forest-light); text-decoration: underline; text-underline-offset: 0.2em; }
body .ad-sp .ad-sp__common,
body .ad-cp .ad-cp__eyebrow { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ad-ink-muted); }
body .ad-sp .ad-sp__desc {
	display: -webkit-box;
	margin: 0.2rem 0 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ad-ink);
}
body .ad-sp .ad-sp__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 0.75rem; margin: 0.4rem 0 0; }
body .ad-sp .ad-sp__facts > div { min-width: 0; }
body .ad-sp .ad-sp__facts > div:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
body .ad-sp .ad-sp__facts dt {
	margin: 0;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ad-copper);
}
body .ad-sp .ad-sp__facts dd { margin: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ad-ink); }
body .ad-sp .ad-sp__offer,
body .ad-cp .ad-cp__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.6rem;
	margin: 0.4rem 0 0;
}
.ad-sp__offer .ad-price,
.ad-cp__offer .ad-price { font-size: 1.0625rem; }
body .ad-sp .ad-sp__actions,
body .ad-cp .ad-cp__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 0.4rem;
	margin: auto 0 0;
	padding-top: 0.6rem;
}
body .ad-sp .ad-sp__actions .ad-button { width: 100%; justify-content: center; }
body .ad-sp .ad-sp__actions .ad-button,
body .ad-cp .ad-cp__actions .ad-button { min-height: 38px; padding: 0.4rem 0.85rem; font-size: 0.8125rem; }
body .ad-sp__link {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ad-forest);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body .ad-sp__link:hover,
body .ad-sp__link:focus-visible { color: var(--ad-forest-light); }
/* Colony card: the button takes the row, the quiet links sit under it. */
body .ad-cp .ad-cp__actions .ad-button { flex: 1 1 100%; justify-content: center; }
.ad-cp .added_to_cart { flex: 1 1 100%; font-size: 0.8125rem; font-weight: 700; }
/* Species page: "View Available Colonies" only when colonies are listed for the species. */
body.single-species:not(.ad-has-colonies) .ad-btn--colonies { display: none; }

/* Shop grid: our status pill says "Currently unavailable"; Astra's own overlay would cover the name.
   The on-card cart button keeps a 44 px touch target. */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock { display: none; }
.woocommerce ul.products li.product .ast-on-card-button { min-width: 44px; min-height: 44px; }

.woocommerce-cart-form a.remove { width: 44px; height: 44px; }

/* Card secondary links: a comfortable tap height. */
body .ad-sp__link { display: inline-flex; align-items: center; min-height: 32px; }

/* Checkout: WooCommerce hides the country and state selects (select2) by shrinking them to 1 px, but
   Astra puts "transition: all .2s" on selects, so for a fifth of a second they are still full width and
   the page can flash a horizontal scrollbar on desktop. No transition on the hidden originals. */
.select2-hidden-accessible { transition: none !important; }

/* 24. ANTELYX logo. The wordmark is wider than the old text title, so between 922 and 1199 px (where the
   menu is tightest) the logo scales with the screen so the menu never wraps: the space left after the menu
   (about 630 px) and the icons goes to the logo, from 140 px up to the Customizer width of 250 px. Below
   1100 px the menu links also get slightly tighter padding. Phones use 140 px, so the menu button never
   leaves the screen at 360 px. */
@media (min-width: 922px) and (max-width: 1099.98px) {
	body #masthead .site-logo-img .custom-logo-link img { width: clamp(140px, calc(100vw - 815px), 250px); height: auto; }
	body #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 0.55em; padding-right: 0.55em; }
}
@media (min-width: 1100px) and (max-width: 1399.98px) {
	body #masthead .site-logo-img .custom-logo-link img { width: clamp(190px, calc(100vw - 905px), 308px); height: auto; }
}

/* ---------------------------------------------------------------------------
 * 25. "Ask ANTELYX": the main conversion button.
 *     One look everywhere: PHP-rendered buttons (.ad-button.ad-ask), the Elementor button class
 *     .ad-btn--ask, and the shop grid. Gold fill with dark text (about 8:1), a chat icon so it never
 *     reads as a plain link, and a hover that inverts to forest green with gold text and border, which
 *     also works on dark sections. Cards keep it compact; the product page and species page make it larger.
 * ------------------------------------------------------------------------- */
body .ad-button.ad-ask,
body .elementor-widget-button.ad-btn--ask .elementor-button,
.woocommerce ul.products li.product a.ad-ask {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 48px;
	padding: 0.75rem 1.4rem;
	background-color: var(--ad-amber);
	border: 2px solid var(--ad-amber);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-forest-deep);
	font-family: var(--ad-font-body);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 18px -10px rgb(15 45 36 / 0.7);
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
body .ad-button.ad-ask::before,
body .elementor-widget-button.ad-btn--ask .elementor-button::before,
.woocommerce ul.products li.product a.ad-ask::before {
	content: "";
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9.2L5 21.5V18H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM7 8.2v1.6h10V8.2H7zm0 3.6v1.6h7v-1.6H7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9.2L5 21.5V18H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM7 8.2v1.6h10V8.2H7zm0 3.6v1.6h7v-1.6H7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .ad-button.ad-ask:hover,
body .ad-button.ad-ask:focus-visible,
body .elementor-widget-button.ad-btn--ask .elementor-button:hover,
body .elementor-widget-button.ad-btn--ask .elementor-button:focus-visible,
.woocommerce ul.products li.product a.ad-ask:hover,
.woocommerce ul.products li.product a.ad-ask:focus-visible {
	background-color: var(--ad-forest-deep);
	border-color: var(--ad-amber);
	color: var(--ad-amber);
}
body .ad-button.ad-ask:focus-visible,
body .elementor-widget-button.ad-btn--ask .elementor-button:focus-visible,
.woocommerce ul.products li.product a.ad-ask:focus-visible {
	outline: 3px solid var(--ad-focus);
	outline-offset: 2px;
}
@media (max-width: 767px) {
	body .ad-button.ad-ask,
	body .elementor-widget-button.ad-btn--ask .elementor-button { min-height: 52px; }
}

/* Species and colony cards: two compact buttons side by side (View + Ask). */
body .ad-sp .ad-sp__actions,
body .ad-cp .ad-cp__actions {
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	justify-items: stretch;
	align-items: stretch;
	gap: 0.45rem;
}
body .ad-sp .ad-sp__actions .ad-button,
body .ad-cp .ad-cp__actions .ad-button {
	width: 100%;
	min-height: 42px;
	padding: 0.4rem 0.3rem;
	gap: 0.4em;
	letter-spacing: 0;
	font-size: 0.8rem;
	box-shadow: none;
}
body .ad-sp .ad-sp__actions .ad-button.ad-ask,
body .ad-cp .ad-cp__actions .ad-button.ad-ask { box-shadow: 0 6px 14px -9px rgb(15 45 36 / 0.7); }
body .ad-sp .ad-sp__actions .ad-button.ad-ask::before,
body .ad-cp .ad-cp__actions .ad-button.ad-ask::before { width: 1em; height: 1em; }
body .ad-cp .ad-cp__actions .add_to_cart_button,
body .ad-cp .ad-cp__actions .added_to_cart { grid-column: 1 / -1; }

/* Shop grid (WooCommerce loop): a full-width button under Add to Cart. */
.woocommerce ul.products li.product a.ad-ask.ad-loop-ask {
	display: flex;
	width: 100%;
	margin-top: 0.6rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

/* Product page: the Ask button right under the price and Add to Cart, large and not boxed in a link row. */
.ad-inquiry-cta { gap: 0.75rem 1.25rem; margin: 1.1rem 0 0.4rem; }
.ad-inquiry-cta .elementor-widget-button.ad-btn--ask .elementor-button,
.ad-inquiry-cta a.ad-ask { min-height: 52px; font-size: 1rem; }
.ad-inquiry-cta .elementor-widget-button { width: auto; }
.ad-inquiry-cta--unavailable { background-color: var(--ad-bone); border-color: var(--ad-line); }

/* "No colonies listed" on a species page: the sentence and a real button. */
.ad-empty__action { margin: 0.9rem 0 0; }

/* Grids whose tiles can be hidden (empty categories, topics) flow by content: no empty row is left behind. */
.e-con.e-grid.ad-grid-flow { grid-template-rows: none !important; grid-auto-rows: auto; }

/* Phones: the species hero shows the Ask button before the (long) verification notice, so the main action is in the first screen. The notice stays in the hero, just after the buttons. */
@media (max-width: 767.98px) {
	.elementor-widget-shortcode:has(.ad-species-notice) { order: 10; }
}

/* ===========================================================================
 * ZERO-BUDGET FINALISATION
 * 27. Knowledge Center articles (single posts): facts list, tables, call to action
 * ========================================================================= */
.ad-article-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: 0.85rem 1.25rem;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-bone);
}
.ad-article-facts > div { min-width: 0; }
.ad-article-facts dt {
	margin: 0 0 0.15rem;
	color: var(--ad-ink-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.ad-article-facts dd { margin: 0; font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.entry-content .wp-block-table { margin: 0 0 1.5rem; overflow-x: auto; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { padding: 0.6rem 0.8rem; border: 1px solid var(--ad-line); text-align: left; vertical-align: top; }
.entry-content .wp-block-table thead th { background-color: var(--ad-bone); font-weight: 700; }
.ad-article-cta {
	margin: 2.5rem 0 0;
	padding: 1.75rem 1.5rem;
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-forest-deep);
	color: #faf9f6;
	text-align: center;
}
.single-post .entry-content .ad-article-cta h2 { margin: 0 0 0.6rem; color: #faf9f6; font-size: 1.5rem; }
.single-post .entry-content .ad-article-cta p { margin: 0 0 1rem; color: #faf9f6; }
.entry-content .ad-article-cta .ad-article-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }
.entry-content .ad-article-cta a.ad-button--secondary { border: 2px solid #faf9f6; background: transparent; color: #faf9f6; text-decoration: none; }
.entry-content .ad-article-cta a.ad-button--secondary:hover,
.entry-content .ad-article-cta a.ad-button--secondary:focus-visible { background: #faf9f6; color: var(--ad-forest-deep); }
.entry-content .ad-article-cta a.ad-ask { text-decoration: none; }
.single-post .entry-content h2 { margin-top: 2rem; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); }
.single-post .entry-content h3 { margin-top: 1.5rem; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }

/* Owner-to-confirm markers inside the business and legal pages: impossible to miss until replaced. */
mark.ad-verify {
	padding: 0.05em 0.35em;
	border-radius: 4px;
	background-color: #fff1b8;
	color: #1a1a1a;
	box-shadow: inset 0 -2px 0 #d4af37;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* German and Polish labels are longer than the English ones: while the page is translated the desktop menu is a
   little tighter, so it stays on one row. (GTranslate puts "translated-ltr" on <html> while a language is on.) */
@media (min-width: 922px) {
	html.translated-ltr body #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 0.45rem; padding-right: 0.45rem; font-size: 0.9375rem; }
}
@media (min-width: 1100px) and (max-width: 1199.98px) {
	html.translated-ltr body #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.875rem; }
}
@media (min-width: 922px) and (max-width: 1099.98px) {
	html.translated-ltr body #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 0.15rem; padding-right: 0.15rem; font-size: 0.78rem; }
}

/* ---------------------------------------------------------------------------
 * 28. Shop sidebar with filters (shop, ant type pages, product search)
 * ------------------------------------------------------------------------- */
.ad-filter-panel {
	padding: 1rem 1.1rem 1.15rem;
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius-md);
	background-color: var(--ad-white);
}
.ad-filter-panel summary {
	display: none;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}
.ad-filter-panel summary::-webkit-details-marker { display: none; }
.ad-filter-panel__active { color: var(--ad-copper); }
.ad-filter-search { display: grid; gap: 0.4rem; margin: 0 0 1.1rem; }
.ad-filter-search input[type="search"] { box-sizing: border-box; width: 100%; min-height: 42px; padding: 0.4rem 0.7rem; border: 1px solid var(--ad-field-border); border-radius: var(--ad-radius-sm); font-size: 0.9375rem; }
.ad-filter-search .ad-button { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 42px; padding: 0.4rem 0.8rem; }
.ad-filter-panel .ad-shop-filters { display: block; margin: 0; padding: 0; }
.ad-filter-group { margin: 0 0 1.1rem; }
.ad-filter-group__title { margin: 0 0 0.35rem; color: var(--ad-ink-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ad-filter-list { margin: 0; padding: 0; list-style: none; }
.ad-filter-list li { margin: 0; }
.ad-filter-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 38px;
	padding: 0.3rem 0.6rem;
	border-left: 3px solid transparent;
	border-radius: 0 var(--ad-radius-sm) var(--ad-radius-sm) 0;
	color: var(--ad-ink);
	font-size: 0.9375rem;
	text-decoration: none;
}
.ad-filter-link:hover,
.ad-filter-link:focus-visible { background-color: var(--ad-bone); color: var(--ad-forest); }
.ad-filter-link:focus-visible { outline: 2px solid var(--ad-focus); outline-offset: 1px; }
.ad-filter-link.is-active { border-left-color: var(--ad-amber); background-color: var(--ad-bone); color: var(--ad-forest-deep); font-weight: 700; }
.ad-filter-link__count { color: var(--ad-ink-muted); font-size: 0.8125rem; font-weight: 600; }
.ad-filter-clear { margin: 0.25rem 0 0; font-size: 0.9375rem; }
@media (min-width: 922px) {
	body.ast-left-sidebar #secondary { width: 280px; padding-right: 1.25rem; }
	body.ast-left-sidebar #primary { width: calc(100% - 280px); }
	.ast-left-sidebar #secondary .ad-filter-panel { position: sticky; top: calc(var(--ad-announce-h, 0px) + 6.5rem); }
}
@media (max-width: 921.98px) {
	/* Filters first, collapsed into one button, then the products. */
	body.ast-left-sidebar .site-content > .ast-container { flex-direction: column !important; }
	body.ast-left-sidebar #secondary { width: 100%; margin: 0 0 1rem; padding: 0; border: 0; }
	body.ast-left-sidebar #primary { width: 100%; }
	.ad-filter-panel { padding: 0.5rem 0.9rem; }
	.ad-filter-panel summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
	.ad-filter-panel summary::after { content: "+"; font-size: 1.4rem; line-height: 1; }
	.ad-filter-panel details[open] > summary::after { content: "\2212"; }
	.ad-filter-panel details[open] > summary { margin-bottom: 0.5rem; }
}