/*
 * Atomware Toolkit – Hoeksfontein: species page parts (shortcodes [atk_species_*]).
 * Port of the approved mockup (mockups/species.html: .sphero, .crumb, .buy__top, .pn, .chip),
 * every selector scoped with the atk-sp prefix. Only site colours: black, white, gold #CC9933,
 * gold tint #FAF5EB. Fonts: the Elementor kit (Primary = Playfair Display, Text = Montserrat).
 */
.atk-sp-hero,
.atk-sp-buyhead,
.atk-sp-pn,
.atk-sp-chip,
.atk-buybox,
.atk-h2,
.atk-desc,
#enquire {
	--atk-sp-gold: #CC9933;
	--atk-sp-tint: #FAF5EB;
	--atk-sp-ink-2: rgba(0, 0, 0, .74);
	--atk-sp-line: rgba(0, 0, 0, .12);
	--atk-sp-serif: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, serif;
	--atk-sp-sans: var(--e-global-typography-text-font-family, "Montserrat"), system-ui, sans-serif;
	box-sizing: border-box;
}

.atk-sp-hero *,
.atk-sp-pn *,
.atk-sp-buyhead * { box-sizing: border-box; }

/* ---------- Header ---------- */
.atk-sp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 540px;
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: var(--atk-sp-sans);
}

.atk-sp-hero__media { position: absolute; inset: 0; margin: 0; }

.atk-sp-hero .atk-sp-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--atk-sp-focus, 30% 40%);
	border: 0;
	border-radius: 0;
}

.atk-sp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(270deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, 0) 75%);
	pointer-events: none;
}

.atk-sp-hero--noimg::after { display: none; }

.atk-sp-hero__wrap {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: calc(1200px + 2 * var(--atk-sp-gutter, 24px));
	margin: 0 auto;
	padding: 0 var(--atk-sp-gutter, 24px);
}

.atk-sp-hero__in { width: min(520px, 100%); padding: 72px 0; }

.atk-sp-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font: 400 14px/1.4 var(--atk-sp-sans);
	color: rgba(255, 255, 255, .82);
}

.atk-sp-crumb a,
.atk-sp-crumb span { display: inline-flex; align-items: center; min-height: 44px; }

.atk-sp-crumb a { color: #fff; text-decoration: none; }

.atk-sp-crumb a:hover,
.atk-sp-crumb a:focus-visible { color: #fff; text-decoration: underline; }

.atk-sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font: 600 13px/1.4 var(--atk-sp-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--atk-sp-gold);
}

.atk-sp-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--atk-sp-gold); }

.atk-sp-hero .atk-sp-hero__title {
	margin: 0 0 10px;
	font-family: var(--atk-sp-serif);
	font-size: clamp(44px, 5vw, 76px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: balance;
}

.atk-sp-hero .atk-sp-hero__sci {
	margin: 0 0 22px;
	font: italic 500 22px/1.4 var(--atk-sp-serif);
	color: var(--atk-sp-gold);
}

.atk-sp-hero .atk-sp-hero__tag {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .25);
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
}

/* Tagline as H2 ([atk_species_tagline tag="h2"]) inherits the site's H2 style. */
.atk-sp-tagline { margin: 0; }

/* ---------- Buy box head ---------- */
.atk-sp-buyhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	font-family: var(--atk-sp-sans);
}

.atk-sp-buyhead__cat {
	font: 600 12px/1.4 var(--atk-sp-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--atk-sp-ink-2);
}

.atk-sp-buyhead .atk-sp-buyhead__lead {
	max-width: 260px;
	margin: 8px 0 0;
	font: 600 24px/1.3 var(--atk-sp-serif);
	color: #000;
}

.atk-sp-buyhead .atk-sp-buyhead__cut {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	object-fit: contain;
	border: 0;
	border-radius: 0;
}

/* ---------- Previous / next ---------- */
.atk-sp-pn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--atk-sp-line);
	border-bottom: 1px solid var(--atk-sp-line);
	font-family: var(--atk-sp-sans);
}

.atk-sp-pn .atk-sp-pn__link {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 36px 32px 36px 0;
	color: #000;
	text-decoration: none;
}

.atk-sp-pn .atk-sp-pn__link + .atk-sp-pn__link,
.atk-sp-pn--single .atk-sp-pn__link--next {
	justify-content: flex-end;
	text-align: right;
	padding: 36px 0 36px 32px;
}

.atk-sp-pn .atk-sp-pn__link + .atk-sp-pn__link { border-left: 1px solid var(--atk-sp-line); }

.atk-sp-pn--single .atk-sp-pn__link--next { grid-column: 2; }

.atk-sp-pn .atk-sp-pn__img { flex: 0 0 96px; width: 96px; height: 96px; object-fit: contain; border: 0; border-radius: 0; }

.atk-sp-pn small {
	display: block;
	margin-bottom: 8px;
	font: 600 12px/1 var(--atk-sp-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--atk-sp-ink-2);
}

.atk-sp-pn b { font: 600 26px/1.2 var(--atk-sp-serif); }

.atk-sp-pn .atk-sp-pn__link:hover b,
.atk-sp-pn .atk-sp-pn__link:focus-visible b { color: var(--atk-sp-gold); }

/* ---------- Enquiry chip ---------- */
.atk-sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 8px 14px;
	background: var(--atk-sp-tint);
	font: 600 14px/1.4 var(--atk-sp-sans);
	color: #000;
}

.atk-sp-chip .atk-sp-chip__img { width: 32px; height: 32px; object-fit: contain; border: 0; border-radius: 0; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.atk-sp-hero { display: block; min-height: 0; --atk-sp-gutter: 20px; }
	/* 4:5 crop of the image, the title block BELOW it on black (no text over the animal). */
	.atk-sp-hero__media { position: relative; inset: auto; aspect-ratio: 4 / 5; }
	.atk-sp-hero::after { display: none; }
	.atk-sp-hero__wrap { display: block; }
	.atk-sp-hero__in { padding: 32px 0 40px; }
	.atk-sp-crumb { margin-bottom: 16px; }
	.atk-sp-hero .atk-sp-hero__title { font-size: 44px; }
	.atk-sp-hero .atk-sp-hero__sci { font-size: 20px; margin-bottom: 16px; }
	.atk-sp-hero .atk-sp-hero__tag { font-size: 17px; padding-top: 16px; }

	.atk-sp-pn { grid-template-columns: 1fr; }
	.atk-sp-pn .atk-sp-pn__link,
	.atk-sp-pn .atk-sp-pn__link + .atk-sp-pn__link,
	.atk-sp-pn--single .atk-sp-pn__link--next {
		grid-column: auto;
		justify-content: flex-start;
		text-align: left;
		padding: 24px 0;
		border-left: 0;
	}
	.atk-sp-pn .atk-sp-pn__link + .atk-sp-pn__link { border-top: 1px solid var(--atk-sp-line); }
	.atk-sp-pn .atk-sp-pn__link--next { flex-direction: row-reverse; justify-content: flex-end; } /* cut-out first, like the previous link */
	.atk-sp-pn .atk-sp-pn__img { flex-basis: 72px; width: 72px; height: 72px; }
	.atk-sp-pn b { font-size: 22px; }
}

/* ==========================================================================
 * Hooks used by Web's species template (library 8416, live on templates 45, 3251, 7667).
 * Classes set in Elementor (Advanced > CSS Classes): atk-buybox (buy box column), atk-incl (the
 * "included" icon lists), atk-h2 (Shortcode widget with [atk_species_tagline tag="h2"]), atk-desc
 * (Shortcode widget with [atk_species_description]); section ID enquire (enquiry form section).
 * ========================================================================== */

/* (a) Buy box sticks below the header on desktop. align-self: a stretched flex column cannot stick. */
@media (min-width: 1025px) {
	.elementor-column.atk-buybox,
	.atk-buybox {
		position: sticky;
		top: 112px;
		align-self: flex-start;
	}
}

/* (b) Included-list bullets become diamonds. */
.atk-incl .elementor-icon-list-icon i,
.atk-incl .elementor-icon-list-icon svg {
	transform: rotate(45deg);
}

/* (c) Enquiry form fields 52px tall, like the mockup (.field input/select). */
#enquire .elementor-field,
#enquire select.elementor-field-textual {
	min-height: 52px;
}
#enquire textarea.elementor-field { min-height: 140px; }

/* (d) Tagline H2 (Playfair 600, clamp 32-48px) and description (Montserrat 17px / 16px, 1.7). */
.atk-h2 .atk-sp-tagline,
.atk-h2 .elementor-shortcode {
	margin: 0;
	font-family: var(--atk-sp-serif);
	font-weight: 600;
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.12;
	color: #000;
}
.atk-h2 .elementor-shortcode > .atk-sp-tagline { font-size: inherit; }
.atk-desc .atk-sp-desc,
.atk-desc .atk-sp-desc p,
.atk-desc .atk-sp-desc li {
	font-family: var(--atk-sp-sans);
	font-size: 17px;
	line-height: 1.7;
}
.atk-desc .atk-sp-desc > :first-child { margin-top: 0; }
.atk-desc .atk-sp-desc > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.atk-desc .atk-sp-desc,
	.atk-desc .atk-sp-desc p,
	.atk-desc .atk-sp-desc li { font-size: 16px; }
}

/* (e) Long values (e.g. a URL in scientific_name) wrap inside the buy box instead of overflowing. */
.atk-buybox .elementor-column,
.atk-buybox .elementor-widget,
.atk-buybox .elementor-widget-container {
	min-width: 0;
}
.atk-buybox .elementor-widget-text-editor,
.atk-buybox .elementor-widget-text-editor .elementor-widget-container,
.atk-buybox .atk-sp-hero__sci {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* (f) Hoeksfontein Package Builder control (product-bridge.js replaces the .builderhkfn "Add to package"
 * button with .hpb-bridge > .hpb-bridge__row > .hpb-qty [- n +] + button.hpb-btn--primary "Select").
 * Restyled only inside .atk-buybox, as the mockup's gold full-width button with a qty stepper beside it.
 * HPB's own CSS uses !important, so these do too (with one class more specificity). Behaviour untouched. */
.atk-buybox .hpb-bridge-host,
.atk-buybox .elementor-widget.builderhkfn {
	width: 100% !important;
	margin: 0 !important;
}
.atk-buybox .hpb-bridge { width: 100%; font-family: var(--atk-sp-sans); }
.atk-buybox .hpb-bridge .hpb-bridge__row {
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
}
.atk-buybox .hpb-bridge .hpb-qty {
	flex: 0 0 auto;
	height: 52px;
	gap: 0;
	border: 1.5px solid #000;
	border-radius: 2px;
	background: #fff !important;
	box-sizing: border-box;
}
.atk-buybox .hpb-bridge .hpb-btn--icon {
	width: 34px !important;
	min-width: 34px !important;
	height: 100% !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #000 !important;
	font: 500 20px/1 var(--atk-sp-sans) !important;
}
.atk-buybox .hpb-bridge .hpb-btn--icon:hover,
.atk-buybox .hpb-bridge .hpb-btn--icon:focus-visible { color: var(--atk-sp-gold) !important; }
.atk-buybox .hpb-bridge .hpb-qty__val {
	min-width: 22px;
	font: 600 16px/1 var(--atk-sp-sans);
	color: #000 !important;
}
.atk-buybox .hpb-bridge .hpb-btn--primary {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	height: 52px !important;
	min-height: 52px !important;
	padding: 0 16px !important;
	gap: 10px !important;
	border: 1.5px solid var(--atk-sp-gold) !important;
	border-radius: 2px !important;
	background: var(--atk-sp-gold) !important;
	color: #000 !important;
	font: 600 14px/1 var(--atk-sp-sans) !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.atk-buybox .hpb-bridge .hpb-btn--primary:hover,
.atk-buybox .hpb-bridge .hpb-btn--primary:focus-visible {
	background: #000 !important;
	border-color: #000 !important;
	color: var(--atk-sp-gold) !important;
}
.atk-buybox .hpb-bridge .hpb-btn--primary .hpb-ico {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
}
/* "Added": keep HPB's green meaning, same shape. */
.atk-buybox .hpb-bridge .hpb-btn--added,
.atk-buybox .hpb-bridge .hpb-btn--added:hover,
.atk-buybox .hpb-bridge .hpb-btn--added:focus-visible {
	background: #2f9e44 !important;
	border-color: #2f9e44 !important;
	color: #fff !important;
}
.atk-buybox .hpb-bridge .hpb-bridge__link {
	font: 600 13px/1.4 var(--atk-sp-sans);
	color: #000 !important;
}
.atk-buybox .hpb-bridge .hpb-bridge__link:hover { color: var(--atk-sp-gold) !important; }

/* (g) Price on request (1.1.7). For a product without a price the module prints
 * <span class="atk-sp-por">Price on request</span> in the Product Price widget (woocommerce_empty_price_html,
 * only for the page's own product, never when a price exists). Inside .atk-buybox the price row then shows only
 * that line: the "Trophy price" label column and the "USD" heading are hidden, the price column runs full width.
 * Rows without .atk-sp-por (every product with a price) match none of these selectors. */
.atk-sp-por {
	font-family: var(--atk-sp-sans, "Montserrat", system-ui, sans-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--atk-sp-gold, #CC9933);
}
.atk-buybox .elementor-inner-section:has(.atk-sp-por) .elementor-widget-heading {
	display: none;
}
.atk-buybox .elementor-inner-section:has(.atk-sp-por) > .elementor-container > .elementor-column:not(:has(.atk-sp-por)) {
	display: none;
}
.atk-buybox .elementor-inner-section:has(.atk-sp-por) > .elementor-container > .elementor-column:has(.atk-sp-por) {
	width: 100%;
}
.atk-buybox .elementor-inner-section:has(.atk-sp-por) > .elementor-container > .elementor-column > .elementor-widget-wrap {
	justify-content: flex-start;
}
.atk-buybox .elementor-inner-section .elementor-widget.elementor-widget-woocommerce-product-price:has(.atk-sp-por) {
	width: 100%;
	max-width: 100%;
	align-self: center;
	text-align: left;
}
.atk-buybox .elementor-inner-section .elementor-widget-woocommerce-product-price .price:has(.atk-sp-por) {
	margin: 0;
	font-size: 20px; /* the price's own 38px/1em line box would add space above the 20px text */
	line-height: 1.2;
}

/* (h) Empty buy box fact rows (1.1.7). Staging markup: an empty ACF value prints no widget at all, so the value
 * column keeps an .elementor-widget-wrap with only whitespace (e.g. Axis Deer, Scientific name / Mass). A row
 * (inner section with a label heading and two or more columns) is hidden when its first or last column holds no
 * widget, or when a value widget's container is :empty (no whitespace either). :has() cannot be nested inside :has(),
 * so "column without a widget" is written as :not(:has(column > wrap > element)). A value printed as plain text
 * (Kudu: "Tragelaphus strepsiceros" directly in the text-editor container) keeps its widget, so nothing matches.
 * One rule per selector: a browser that rejects one selector still applies the others. */
.atk-buybox .elementor-inner-section:has(.elementor-widget-heading):has(> .elementor-container > .elementor-column + .elementor-column):not(:has(> .elementor-container > .elementor-column:last-child > .elementor-widget-wrap > .elementor-element)) {
	display: none;
}
.atk-buybox .elementor-inner-section:has(.elementor-widget-heading):has(> .elementor-container > .elementor-column + .elementor-column):not(:has(> .elementor-container > .elementor-column:first-child > .elementor-widget-wrap > .elementor-element)) {
	display: none;
}
.atk-buybox .elementor-inner-section:has(.elementor-widget-heading):has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .elementor-widget-container:empty) {
	display: none;
}

/* (i) QA fixes (1.1.8, qa/qa-20261009.md #4, #16, #17). Appended; the rules above are unchanged. */
/* #4 "Price on request": gold text on white was 2.57:1. Black text (21:1) with a gold rule as the accent. */
.atk-sp-por {
	display: inline-block;
	padding-left: 12px;
	border-left: 3px solid var(--atk-sp-gold, #CC9933);
	color: #000;
}
/* #16 Package Builder qty stepper inside the buy box: "−" and "+" were 34px wide; 44 x 52px tap targets now. */
.atk-buybox .hpb-bridge .hpb-btn--icon {
	width: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
}
/* #17 Breadcrumb: the links took 10px from the theme at 390px; same 14px as the rest of the trail, and each link
 * is padded to a 44px-wide target (the negative margin keeps the trail where it was). */
.atk-sp-hero .atk-sp-crumb a {
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 -8px;
	padding: 0 8px;
	font-size: 14px;
	line-height: 1.4;
}
@media (max-width: 767px) {
	.atk-sp-hero .atk-sp-crumb,
	.atk-sp-hero .atk-sp-crumb a,
	.atk-sp-hero .atk-sp-crumb span { font-size: 14px; }
}