/* Jonath's 0.10.1 release corrections.
 * This file intentionally loads last. Desktop and mobile rules are separated
 * so a phone correction cannot change the desktop layout again.
 */

.filter-backdrop[hidden],
.jak-overlay[hidden],
.jak-directory-overlay[hidden],
[hidden] {
	display: none !important;
}

/* Shared component corrections. */
.archive-product-image > span {
	top: 14px !important;
	left: 14px !important;
	width: auto !important;
	max-width: calc(100% - 28px) !important;
	padding: 8px 13px !important;
	border: 1px solid rgba(255,255,255,.16) !important;
	border-radius: 999px !important;
	background: #090a0c !important;
	color: #fff !important;
	line-height: 1 !important;
}

.archive-product-image,
.archive-product-image > a {
	position: relative !important;
	display: block !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	overflow: hidden !important;
	background: #fff !important;
}

.archive-product-image > a > img,
.archive-product-image img.wp-post-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	filter: none !important;
}

.archive-product-copy {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.archive-product-meta,
.archive-product-rating {
	min-height: 0 !important;
	margin: 0 !important;
}

.archive-product-rating {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.archive-product-copy > a,
.archive-product-copy h3 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.archive-product-meta .is-in-stock,
.jak-quick-view__stock.is-in-stock,
.stock-in { color: #8fe628 !important; }
.archive-product-meta .is-low-stock,
.jak-quick-view__stock.is-low-stock,
.stock-low { color: #ff9f2f !important; }
.archive-product-meta .is-out-of-stock,
.jak-quick-view__stock.is-out-of-stock,
.stock-out { color: #ff5967 !important; }

.jak-guide-tabs,
.jak-blog-tabs,
.jak-livestock-animal-tabs {
	display: flex !important;
	gap: 8px !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
}

.jak-guide-tabs::-webkit-scrollbar,
.jak-blog-tabs::-webkit-scrollbar,
.jak-livestock-animal-tabs::-webkit-scrollbar { display: none !important; }

.jak-guide-tabs a,
.jak-blog-tabs a,
.jak-livestock-animal-tabs a,
.archive-animal-types a,
.archive-view-switcher button {
	width: auto !important;
	min-height: 40px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	padding: 0 16px !important;
	border: 1px solid rgba(255,44,145,.5) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #ff2c91 !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	letter-spacing: .05em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
}

.jak-guide-tabs a:is(:hover,.is-active),
.jak-blog-tabs a:is(:hover,.is-active),
.jak-livestock-animal-tabs a:is(:hover,.is-active),
.archive-animal-types a:is(:hover,.is-active),
.archive-view-switcher button:is(:hover,.active) {
	background: #ff2c91 !important;
	color: #090a0c !important;
}

.jak-guide-hub__tools form > div,
.jak-blog-search > div {
	display: grid !important;
	grid-template-columns: minmax(0,1fr) 54px !important;
}

.jak-guide-hub__tools button,
.jak-blog-search button {
	display: grid !important;
	grid-column: auto !important;
	place-items: center !important;
}

.jak-content-card__media,
.jak-content-card__media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.jak-content-card__media { aspect-ratio: 4 / 3 !important; overflow: hidden !important; }
.jak-content-card__media img { object-fit: cover !important; object-position: center !important; }

.livestock-image {
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
}

.livestock-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

.hero-arrows button {
	position: relative !important;
	display: grid !important;
	place-items: center !important;
	border-radius: 50% !important;
}

.hero-arrows button:hover { border-color: #ff2c91 !important; background: #ff2c91 !important; color: #090a0c !important; }

.hero-progress-ring {
	position: absolute !important;
	inset: -4px !important;
	pointer-events: none !important;
	border-radius: 50% !important;
	background: conic-gradient(#ff2c91 var(--hero-progress,0turn),rgba(255,255,255,.16) 0) !important;
	-webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)) !important;
	mask: radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)) !important;
}

.hero-section.is-counting .hero-progress-ring { animation: jak-hero-progress 5s linear infinite !important; }
@keyframes jak-hero-progress { to { --hero-progress: 1turn; } }
@property --hero-progress { syntax: '<angle>'; inherits: false; initial-value: 0turn; }
@media (prefers-reduced-motion:reduce) { .hero-progress-ring { display:none !important; } }

/* Desktop and tablet. */
@media (min-width: 768px) {
	.department-grid {
		display: grid !important;
		grid-template-columns: repeat(4,minmax(0,1fr)) !important;
		grid-template-rows: none !important;
		grid-auto-flow: row !important;
		grid-auto-rows: auto !important;
		gap: 16px !important;
	}

	.department-card,
	.department-card:last-child {
		position: relative !important;
		grid-column: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 4 / 5 !important;
	}

	.archive-product-grid,
	body.jonaths-commerce .archive-product-grid,
	body.jonaths-commerce .archive-product-grid[data-layout],
	.archive-product-grid[data-layout="grid"],
	.archive-product-grid.product-grid,
	.jak-product-rail .archive-product-grid {
		display: grid !important;
		grid-template-columns: repeat(4,minmax(0,1fr)) !important;
		gap: 16px !important;
	}

	body.jonaths-commerce .archive-product-grid[data-layout="list"],
	.archive-product-grid[data-layout="list"] {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	body.jonaths-commerce .archive-product-grid[data-layout="list"] .archive-product-card,
	.archive-product-grid[data-layout="list"] .archive-product-card {
		display: grid !important;
		grid-template-columns: 240px minmax(0,1fr) !important;
		min-height: 240px !important;
	}

	.archive-product-grid[data-layout="list"] .archive-product-image {
		width: 240px !important;
		height: 240px !important;
		aspect-ratio: 1 / 1 !important;
		border-radius: 0 !important;
	}

	.archive-product-grid[data-layout="list"] .archive-product-copy {
		min-width: 0 !important;
		padding: 24px !important;
	}

	.archive-product-grid[data-layout="list"] .archive-product-copy h3 {
		min-height: 0 !important;
		font-size: 28px !important;
	}

	.jak-guide-hub__hero,
	.jak-blog-archive > header { margin-bottom: 34px !important; }

	.jak-guide-hub__tools {
		display: grid !important;
		grid-template-columns: minmax(420px,720px) auto !important;
		align-items: end !important;
		justify-content: space-between !important;
		gap: 24px !important;
	}

	.jak-blog-tools {
		display: grid !important;
		grid-template-columns: minmax(420px,720px) !important;
		justify-content: center !important;
		margin-bottom: 18px !important;
	}

	.jak-guide-tabs,
	.jak-blog-tabs { justify-content: flex-end !important; margin-bottom: 18px !important; }

	.jak-livestock-controlbar {
		display: grid !important;
		grid-template-columns: minmax(0,auto) minmax(280px,1fr) auto !important;
		align-items: end !important;
		gap: 14px !important;
	}

	.jak-livestock-filters {
		display: flex !important;
		align-items: end !important;
		gap: 9px !important;
	}

	.jak-livestock-animal-tabs { justify-content: flex-end !important; margin: 0 !important; }
	.jak-livestock-view { display: flex !important; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.department-grid,
	.archive-product-grid,
	body.jonaths-commerce .archive-product-grid,
	body.jonaths-commerce .archive-product-grid[data-layout],
	.archive-product-grid[data-layout="grid"],
	.archive-product-grid.product-grid,
	.jak-product-rail .archive-product-grid,
	.jak-livestock-results .jak-content-cards {
		grid-template-columns: repeat(3,minmax(0,1fr)) !important;
	}
}

/* Phone-only rules. */
@media (max-width: 767px) {
	.announcement,
	.announcement-inner { min-height: 27px !important; }
	.announcement-inner { font-size: 8px !important; }

	.site-header .header-main {
		height: 64px !important;
		min-height: 64px !important;
		grid-template-columns: 36px minmax(0,1fr) 76px !important;
		gap: 7px !important;
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}

	.site-header .header-main > .wordmark--image {
		width: min(172px,48vw) !important;
		height: 54px !important;
		justify-self: center !important;
		align-items: center !important;
	}

	.site-header .wordmark--image img {
		width: 100% !important;
		height: 100% !important;
		max-height: 54px !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	.jak-mobile-menu__account a,
	.jak-mobile-menu__account button {
		width: 100% !important;
		min-height: 43px !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		padding: 0 14px !important;
		border: 1px solid var(--line) !important;
		border-radius: 11px !important;
		background: transparent !important;
		color: var(--ink) !important;
		font: inherit !important;
		text-align: left !important;
	}

	.jak-mobile-menu__account :is(a,button) svg {
		width: 20px !important;
		height: 20px !important;
		flex: 0 0 20px !important;
	}

	.department-grid {
		display: grid !important;
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
		grid-template-rows: none !important;
		grid-auto-rows: auto !important;
		gap: 10px !important;
	}

	.department-card,
	.department-card:last-child {
		position: relative !important;
		grid-column: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 4 / 5 !important;
	}

	.department-card img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	.archive-product-grid,
	body.jonaths-commerce .archive-product-grid,
	body.jonaths-commerce .archive-product-grid[data-layout],
	.archive-product-grid[data-layout="grid"],
	.archive-product-grid.product-grid,
	.jak-product-rail .archive-product-grid,
	.jak-livestock-results .jak-content-cards {
		display: grid !important;
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
		gap: 10px !important;
	}

	.archive-product-copy { gap: 3px !important; padding: 11px !important; }
	.archive-product-image > span { top: 9px !important; left: 9px !important; padding: 7px 10px !important; }

	body.jonaths-commerce .archive-product-grid[data-layout="list"],
	.archive-product-grid[data-layout="list"] {
		grid-template-columns: 1fr !important;
	}

	.archive-product-grid[data-layout="list"] .archive-product-card {
		display: grid !important;
		grid-template-columns: 112px minmax(0,1fr) !important;
		min-height: 168px !important;
	}

	.archive-product-grid[data-layout="list"] .archive-product-image {
		width: 112px !important;
		height: 100% !important;
		min-height: 168px !important;
		aspect-ratio: auto !important;
	}

	.archive-product-grid[data-layout="list"] .archive-product-copy h3 { min-height: 0 !important; }
	.archive-product-grid[data-layout="list"] .archive-quick-view { display: none !important; }

	.jak-guide-hub__hero,
	.jak-blog-archive > header { margin-bottom: 24px !important; }

	.jak-guide-hub__tools,
	.jak-blog-tools {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	.jak-guide-hub__tools > a {
		grid-row: 1 !important;
		justify-self: end !important;
		max-width: 210px !important;
		font-size: 12px !important;
		line-height: 1.25 !important;
		text-align: right !important;
	}

	.jak-guide-hub__tools > form { grid-row: 2 !important; }

	.jak-guide-hub__tools form > div,
	.jak-blog-search > div { grid-template-columns: minmax(0,1fr) 48px !important; }

	.jak-guide-hub__tools button,
	.jak-blog-search button {
		width: 48px !important;
		min-width: 48px !important;
		border-radius: 0 12px 12px 0 !important;
	}

	.jak-guide-tabs,
	.jak-blog-tabs { justify-content: flex-start !important; margin-bottom: 14px !important; }

	.jak-guide-tabs a,
	.jak-blog-tabs a { min-height: 38px !important; padding: 0 14px !important; }

	.jak-guide-hub .jak-content-cards,
	.jak-blog-hub .jak-content-cards {
		display: grid !important;
		grid-template-columns: minmax(0,680px) !important;
		justify-content: center !important;
		gap: 14px !important;
	}

	.jak-guide-hub .jak-content-card,
	.jak-blog-hub .jak-content-card { width: 100% !important; margin-inline: auto !important; }

	.jak-livestock-controlbar {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.jak-livestock-filters {
		display: grid !important;
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
		gap: 8px !important;
	}

	.jak-livestock-animal-tabs { grid-row: 1 !important; justify-content: flex-start !important; }
	.jak-livestock-view { display: flex !important; }

	.lead-section--footer { padding-block: 34px !important; }
	.lead-section--footer .lead-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
	.lead-section--footer h2 { font-size: clamp(34px,10vw,48px) !important; line-height: .92 !important; }
	.lead-section--footer .lead-form { height: 52px !important; padding-left: 12px !important; }
	.lead-section--footer .lead-form button { padding: 0 13px !important; }

	.footer-actions {
		display: grid !important;
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
		gap: 8px !important;
	}

	.footer-actions a { width: 100% !important; min-width: 0 !important; justify-content: center !important; }
	.footer-menu-group { width: 100% !important; }

	.jak-faq-category-cards { display: none !important; }
	.jak-faq-search,
	.jak-faq-groups,
	.jak-faq-groups > section { width: 100% !important; max-width: none !important; }
	.jak-faq-groups { gap: 16px !important; }
	.jak-faq-groups details { margin: 0 0 10px !important; }
}