/*
Theme Name: Astra Child (Native)
Template: astra
Description: Native Gutenberg/PHP header, footer, and homepage template - no Elementor Theme Builder dependency.
Version: 1.0.0
Author: abestever
Text Domain: astra-child
*/

/* Header logo (Elementor's own theme-site-logo widget, kept live - not
   part of this stylesheet's own markup) - a bit smaller than its native
   185x78px per request. */
.elementor-location-header img.wp-image-523 {
	width: 150px !important;
	height: auto !important;
}

:root {
	/* Matches the Elementor Header's own boxed container width (1140px,
	   confirmed identical on production - an Elementor Kit setting, not
	   something this stylesheet controls) so this stylesheet's homepage/
	   archive/blog sections line up with the header above them instead of
	   drifting to Astra's separate 1200px theme container width. The
	   Elementor Footer uses a third, wider width (1220px) of its own -
	   pre-existing on production too, left as-is since nothing here
	   controls it either. */
	--site-max-width: 1140px;
	--site-accent: #b08967;
	--site-accent-hover: #a67f5e;
	/* Elementor Footer's own boxed width (1220px by its widget settings,
	   pre-existing on production too) - narrowed via the override below to
	   this same 1140px so it lines up with the header and this stylesheet's
	   own sections instead of running wider than everything else. */
	/* Header/footer are the original Elementor Header #3345 / Footer #564
	   (kept live, not replaced - see header.php/footer.php removal), which
	   ships its own fixed-header body padding via the site's existing
	   Custom CSS (post 16: body{padding-top:97.66px}, matching the header's
	   original 78px-tall logo). Shrinking that logo to 150x63px below
	   (a ~15px shorter header) made post 16's own padding-top too tall for
	   the header's new real height, opening a gap between the header and
	   whatever sits right below it (the sticky category subnav, most
	   visibly, since it stuck at the OLD taller offset while the header
	   itself had already gotten shorter above it). Overriding both the
	   body padding-top and this stylesheet's own --header-height here
	   (rather than editing post 16 itself, which is the site's own
	   pre-existing content, not this theme's) keeps the fix self-contained
	   to the actual cause - the logo resize - and easy to revert together
	   with it. 82.66px desktop = measured new header height; 75.86px
	   mobile is the same proportional reduction applied to the original
	   89.66px mobile value (not separately re-measured against the
	   original CSS's own percentage-based mobile logo sizing). */
	--header-height: 82.66px;
}

body {
	padding-top: var(--header-height) !important;
}

@media (max-width: 767px) {
	:root {
		--header-height: 75.86px;
	}
}

/* The site's existing Elementor Header (#3345, kept live - see above) adds
   an ast-icon/icon-arrow SVG to EVERY nav menu item's markup, including
   leaf items inside a dropdown (e.g. "Bird Food"/"Bird Accessories" under
   "Bird") that have no further children of their own - present in the raw
   markup on production too, just visually redundant there since it's a
   generic toggle icon meant only for items that actually open a further
   submenu. This site's menu is only ever two levels deep, so every icon
   inside a dropdown's own <ul> is always on a leaf item - safe to hide
   unconditionally at that level, no need to special-case anything. Top-
   level items (Bird/Cat/Dog/Horse's own arrow, one level up) are untouched.
   Keying off Elementor/Astra's real markup class (not something added by
   this stylesheet) so it stays correct if the menu is edited later. */
.elementor-nav-menu--dropdown .icon-arrow {
	display: none;
}

a:focus {
	outline: none;
}

a,
button {
	touch-action: manipulation;
}

/* Sticky category sub-nav at the top of Blog/category/search listing pages. */
.home-category-subnav {
	position: sticky;
	top: var(--header-height);
	z-index: 500;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 24px;
}

.home-category-subnav ul {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 20px;
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 24px;
}

@media (max-width: 767px) {
	.home-category-subnav ul {
		/* Centering a horizontally-scrollable row clips its own start on
		   most browsers once the items are wider than the viewport (the
		   scroll container's "center" math doesn't leave room to scroll
		   back to the true first item) - left-aligned instead here, same
		   as before, so every category stays reachable by scrolling. */
		justify-content: flex-start;
		gap: 16px;
	}

	.home-category-subnav a {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

.home-category-subnav a {
	display: inline-block;
	padding: 14px 0;
	color: #111218;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.home-category-subnav a:hover,
.home-category-subnav a.is-active {
	color: var(--site-accent);
	border-bottom-color: var(--site-accent);
}

.home-hero-row {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 30px 20px;
	display: grid;
	grid-template-columns: 30fr 70fr;
	gap: 30px;
	align-items: start;
}

@media (max-width: 767px) {
	.home-hero-row {
		grid-template-columns: 1fr;
	}
}

.home-hero-row__col {
	min-width: 0;
}

.home-hero-row__new-updated h2 {
	font-size: 28px;
	font-weight: 700;
	color: #22242F;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--site-accent);
}

.home-hero-row__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.home-hero-row__list li {
	margin: 0 0 12px;
}

.home-hero-row__list a {
	color: #111218;
	text-decoration: none;
	font-weight: 600;
}

.home-hero-row__list a:hover {
	color: var(--site-accent);
	text-decoration: underline;
}

.home-hero-row__see-everything {
	display: inline-block;
	border: 1px solid var(--site-accent);
	color: var(--site-accent);
	padding: 10px 24px;
	text-decoration: none;
	font-size: 15px;
}

.home-hero-row__see-everything:hover {
	background: var(--site-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.home-slideshow {
	position: relative;
}

.home-slideshow__slide {
	display: none;
}

.home-slideshow__slide.is-active {
	display: block;
}

.home-slideshow__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.home-slideshow__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-slideshow__body {
	padding: 16px 0;
}

.home-slideshow__badge {
	display: inline-block;
	background: #eee;
	color: #555;
	font-size: 13px;
	padding: 4px 10px;
	margin-bottom: 10px;
}

.home-slideshow__title {
	font-size: 28px;
	font-weight: 700;
	color: #22242F;
	margin: 0 0 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.home-slideshow__excerpt {
	font-size: 15px;
	color: #555;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-category-section {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 30px 20px;
}

/* Category/tag archive pages (and the Blog page, ID 575, which reuses this
   same section markup) already get 20px left/right padding one level up,
   on .ast-container itself (see the ".archive .site-content > .ast-container"
   rule further down, and the ".page:not(.home)..." rule which also matches
   the Blog page since it's a plain page under the hood) - .home-category-
   section's own 20px on top of that doubled it to 40px total. Zeroed here,
   archive/blog pages only (the homepage's own .home-category-section
   instances, which sit inside a .ast-container with no padding of its own,
   still need their full 20px). The Blog page doesn't get a body class of
   ".blog" (it's a custom page-blog.php template, not the site's Reading-
   settings "posts page"), so it's targeted by its page ID instead. */
.archive .home-category-section,
.page-id-575 .home-category-section {
	padding-left: 0;
	padding-right: 0;
}

.home-category-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	border-top: 3px solid var(--site-accent);
	padding-top: 16px;
}

.home-category-section__header--no-divider {
	border-top: none;
	padding-top: 0;
}

.home-category-section__header h2 {
	font-size: 32px;
	font-weight: 700;
	color: #22242F;
	margin: 0;
}

.home-category-section__header a {
	font-size: 14px;
	color: var(--site-accent);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.home-category-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.home-category-section__header h2 {
		font-size: 24px;
	}

	.home-category-section__header a {
		width: 100%;
	}
}

.home-listing-subtitle {
	font-size: 15px;
	font-weight: 600;
	color: #666;
	margin: 0 0 8px;
}

.home-listing-description {
	font-size: 15px;
	color: #45485F;
	margin: 0 0 20px;
	max-width: 800px;
}

.home-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px;
}

.home-post-grid--listing {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
	.home-post-grid--listing {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 921px) {
	.home-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 544px) {
	.home-post-grid {
		grid-template-columns: 1fr;
	}
}

.home-post-card {
	background-color: #f6f6f6;
	box-shadow: 0 1px 25px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.home-post-card:hover {
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	}
}

.home-post-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.home-post-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-post-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.home-post-card__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-post-card__title a {
	color: #111218;
	text-decoration: none;
}

.home-post-card__excerpt {
	font-size: 14px;
	color: #45485F;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-post-card__readmore {
	margin-top: auto;
	align-self: flex-start;
	color: var(--site-accent);
	background-color: transparent;
	border: none;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.home-post-card__readmore:hover {
	color: var(--site-accent-hover);
	text-decoration: underline;
}

.home-latest-post-row {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 30px 20px;
}

.home-latest-post-row__main {
	min-width: 0;
}

.home-latest-post {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e5e5;
}

.home-latest-post__body {
	min-width: 0;
}

.home-latest-post:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

@media (max-width: 544px) {
	.home-latest-post {
		grid-template-columns: 1fr;
	}
}

.home-latest-post__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.home-latest-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 799px) {
	#secondary {
		display: none;
	}
}

/* The Elementor Footer (#564, kept live) lays out each of its rows (above/
   primary/below) in its own .elementor-container, independently boxed at
   1220px by that widget's own settings - wider than the header (1140px)
   and this stylesheet's own sections above it. Narrowing every one of
   those rows to the same 1140px here (rather than editing the Footer
   template itself) keeps the fix in one place, reversible, and automatic
   for any row Elementor adds later - percentage-width columns (LINKS/ALL
   CATEGORIES/FOLLOW US ON are each a plain 25%) redistribute themselves
   inside whatever width their row container ends up with, so narrowing
   the container is enough on its own to pull them back in from the wider
   1220px spacing to line up under the narrower header/content above. */
.elementor-location-footer .elementor-container {
	max-width: var(--site-max-width) !important;
}

/* The footer's primary row (Logo/description, LINKS, ALL CATEGORIES,
   FOLLOW US ON) is 4 Elementor columns forced to a fixed 25% width each -
   fine for the Logo/description column (element -23d5f72), which genuinely
   needs the space for its wrapped paragraph text, but LINKS/ALL CATEGORIES/
   FOLLOW US ON (-96a6948/-cb2304d/-d5cc9a7 - these element IDs are stable,
   generated once by Elementor for this specific template and unchanged
   unless someone edits it in the Elementor editor) only need as much width
   as their own short link list/icon row actually takes, leaving a large
   empty strip on the right of each column's own reserved 25% share (most
   visible after the last column's few social icons). Switching just those
   3 columns from fixed 25% to shrink-to-content, combined with the row's
   own justify-content:space-between, keeps the Logo column pinned to the
   left at its original width (unlike an earlier version of this rule that
   shrank ALL 4 columns including Logo - that let its paragraph text stop
   wrapping and overflow hugely, since flex items default to min-width:auto
   in a nowrap row) while LINKS/ALL CATEGORIES/FOLLOW US ON pack together
   and the group's own right edge lines up with the row's right edge. */
.elementor-location-footer .elementor-container:has(> .elementor-column.elementor-col-25) {
	justify-content: space-between;
}

/* A true shrink-to-content width (flex-basis:auto) fought with the site's
   own existing Custom CSS (post 16: ".footer-nav-menu ... li{width:100%}",
   there to stack LINKS into one link per line inside a *fixed*-width
   column) - with no fixed width left to be 100% of, the browser's auto-
   width calc went circular and, combined with Logo's own flex-shrink
   pulling it down to make room, squeezed the Logo column to ~100px and
   its paragraph down to single words per line. Fixed pixel widths (each
   comfortably wider than its own content - "DISCLAIMER"/"ALL CATEGORIES"/
   the 4 social icons) sidestep that circularity entirely and leave Logo's
   own column untouched at its original 25%. */
.elementor-location-footer .elementor-element-96a6948,
.elementor-location-footer .elementor-element-cb2304d,
.elementor-location-footer .elementor-element-d5cc9a7 {
	width: 200px !important;
	min-width: 0 !important;
	max-width: none !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: 200px !important;
}

/* Footer bottom row's Privacy Policy / Terms & Condition links (Elementor
   icon-list widget 8cfe9ef) - a middle-dot separator between them, same
   idea as the widget's own existing space_between gap either side of it. */
.elementor-element-8cfe9ef .elementor-icon-list-item + .elementor-icon-list-item::before {
	content: "\00B7";
	margin-right: 28px;
	color: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

/* "Latest Posts" list under the footer's LINKS column ([recent_post_links]
   shortcode - see functions.php) - same list-reset/link-color/spacing as
   the nav-menu items directly above it, so the two blocks read as one
   continuous list rather than visibly different components stacked
   together. */
.footer-recent-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-recent-links li {
	margin: 0 0 8px;
}

.footer-recent-links a {
	color: var(--site-accent-hover);
	text-decoration: none;
	font-size: 16px;
}

.footer-recent-links a:hover {
	color: var(--site-accent);
	text-decoration: underline;
}

/* Footer: rendered entirely by Astra core's own footer-builder (astra_footer()
   in footer.php) using its native styling - no custom footer CSS needed. */
.site-footer {
	background-color: #f7f7f7;
	border-top: 1px solid #e5e5e5;
}

.site-below-footer-wrap .ast-builder-grid-row {
	border-top: 1px solid #e5e5e5;
	padding-top: 24px;
}

/* The footer is the kept-live Elementor Footer template (#564), rendered
   via .elementor-location-footer, not Astra's own #colophon builder markup
   - #colophon doesn't exist on the page at all, so a prior "#colophon a"/
   "#colophon a:hover" rule here silently matched nothing and every footer
   link (Amazon Disclaimer body links, LINKS/CATEGORIES nav items, Powered
   by, Privacy Policy/Terms & Condition) had no hover state. Scoped to the
   real wrapper instead, and excludes the social icons (.elementor-icon),
   which get their own hover treatment below since they're colored circular
   buttons, not text links. */
.elementor-location-footer a:not(.elementor-icon):hover {
	color: var(--site-accent-hover);
	text-decoration: underline;
}

.elementor-location-footer .elementor-icon {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.elementor-location-footer .elementor-icon:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

@media (max-width: 544px) {
	.ast-footer-row-mobile-stack .ast-builder-grid-row-container-inner {
		grid-template-columns: repeat(2, 1fr) !important;
		text-align: left !important;
	}

	.ast-footer-row-mobile-stack .ast-builder-footer-grid-column {
		text-align: left !important;
	}
}

/* Astra's own dynamic CSS caps .archive/.search/.blog body contexts at
   blog-max-width (1000px, set in the Customizer) via the same
   ".site-content > .ast-container" selector at the same 922px breakpoint -
   this repeats that selector list so ours wins on source order (both are
   plain class selectors of equal specificity) regardless of whether
   Astra's inline <style> block happens to be output before or after this
   stylesheet in <head>. */
.single-post .site-content > .ast-container,
.page .site-content > .ast-container,
.archive .site-content > .ast-container,
.search .site-content > .ast-container,
.blog .site-content > .ast-container {
	max-width: var(--site-max-width);
}

.page:not(.home):not(.astra-child-plain-page) .site-content > .ast-container,
.archive .site-content > .ast-container,
.search .site-content > .ast-container,
.blog .site-content > .ast-container {
	padding-left: 20px;
	padding-right: 20px;
}

/* Single posts get no side padding here (unlike page/archive/search/blog
   above) - #primary is a flex child of .ast-container and sizes against
   its content box, so 20px+20px padding here was quietly eating 40px off
   the 1140px .single-post-layout expects to fill (810 + 30 + 300),
   leaving only 1100px and pushing the sticky ad column past the visible
   edge. .single-post-layout's own children (the 810px article, the 300px
   ad) provide their own spacing/margins instead. Astra's own core CSS
   (not this stylesheet) is what actually applies that 20px+20px by
   default on every .ast-container regardless of page type - overriding
   it back to 0 here, rather than just not re-adding it above, is what's
   actually needed to cancel it out for this one context. */
.single-post .site-content > .ast-container,
.astra-child-plain-page .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
}

/* Astra's own single-post/page article element (.ast-article-single)
   carries a separate responsive left/right padding of its own (86.71px at
   this viewport, computed from a percentage-based Customizer setting, not
   a fixed value) - zeroing it here too so .single-post-layout's own 810px
   article column actually starts flush at the container's left edge
   instead of being pushed in by an extra ~87px on each side. */
.single-post .ast-article-single,
.astra-child-plain-page .ast-article-single {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.page .entry-title {
	font-size: 42px;
	font-weight: 700;
	color: var(--site-accent);
}

/* Bottom breathing room below a plain page's content (About, Privacy
   Policy, Terms & Condition, Disclaimer, etc.) - the last paragraph
   otherwise runs right up against the footer with no gap at all. */
.page.page-template-default .entry-content {
	padding-bottom: 60px;
}

/* Astra wraps a single post's content in several nested divs on the way
   down to .entry-content, at least two of which (the article itself, and
   an inner ".ast-post-format-*" wrapper one level above entry-content) are
   each narrower than #primary's own 1100-1140px - Astra's "single-width"
   Customizer setting, expressed as a percentage rather than a fixed value,
   so each successive wrapper compounds slightly narrower than the last
   (measured: #primary 1100px -> article 1100px -> .ast-post-format-*
   927px -> .entry-content 927px). Fine for plain article prose, but it
   was clipping .single-post-layout's own 810+30+300=1140 row and pushing
   the sticky ad column out past the visible edge. Single posts' entire
   content is that layout row now (see the_content filter in functions.php),
   so every one of those wrappers just needs to match the full 1140px
   they're already sitting inside rather than independently narrowing it
   further - width:100% (not a second independent max-width) is what
   actually stops each one from re-imposing its own percentage-based
   narrowing on top of the next. */
.single-post #primary,
.single-post .ast-article-single,
.single-post .site-main,
.single-post [class*="ast-post-format-"],
.single-post .entry-content,
.astra-child-plain-page #primary,
.astra-child-plain-page .ast-article-single,
.astra-child-plain-page .site-main,
.astra-child-plain-page [class*="ast-post-format-"],
.astra-child-plain-page .entry-content {
	max-width: var(--site-max-width);
	width: 100%;
}

/* Product image + "See price on amazon" button, produced by the Step 1
   Elementor-to-Gutenberg content migration (wp:group.product-cta wrapping
   the image + buttons block pulled from each product's own 2-column
   image/button section) - fixed 500x500 image on the left, button filling
   the remaining width on the right, vertically centered against it.
   The Gutenberg Group block (product-cta's own outer div) nests its real
   children one level deeper inside .wp-block-group__inner-container - the
   flex row has to be applied there too, or the image/button (children of
   that inner div, not of .product-cta itself) never actually see it and
   just stack as normal block content instead of sitting side by side. */
.product-cta,
.product-cta > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 24px 0;
}

.product-cta .wp-block-image {
	flex: 0 0 500px;
	margin: 0;
}

.product-cta .wp-block-image img {
	width: 500px;
	height: 500px;
	object-fit: cover;
	display: block;
}

.product-cta .wp-block-buttons {
	flex: 1 1 auto;
	margin: 0;
}

.product-cta .wp-block-button {
	width: 100%;
}

.product-cta .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	padding: 16px 12px !important;
	background-color: var(--site-accent) !important;
	border-color: var(--site-accent) !important;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-cta .wp-block-button__link:hover {
	filter: brightness(1.1);
}

@media (max-width: 700px) {
	.product-cta,
	.product-cta > .wp-block-group__inner-container {
		flex-wrap: wrap;
	}

	.product-cta .wp-block-image {
		flex-basis: 100%;
	}

	.product-cta .wp-block-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.product-cta .wp-block-buttons {
		flex-basis: 100%;
	}
}

/* Single-post 2-column layout (810px article + 300px sticky ad, 30px gap -
   see the_content filter in functions.php that wraps entry-content in this
   markup). 810 + 30 + 300 = 1140, matching --site-max-width, so the row
   fills the same content width used everywhere else on the site with no
   left/right slack. */
.single-post-layout {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.single-post-layout__main {
	flex: 0 0 810px;
	min-width: 0;
	box-sizing: border-box;
	background-color: #fff;
	padding: 24px 30px;
}

/* Astra renders the post title/meta (.entry-header) as a sibling of
   .entry-content, above where the_content filter in functions.php wraps
   things into .single-post-layout - so it sat outside that wrapper's own
   810px/padding entirely, full-width with no side padding of its own
   (title text touching the left edge). Matching its left/right padding to
   .single-post-layout__main here keeps the title aligned with the content
   below it - kept transparent (not the same white card background as
   .single-post-layout__main) per request, so only the image/text content
   below sits on white, not the title area itself. */
.single-post .entry-header,
.astra-child-plain-page .entry-header {
	max-width: 810px;
	box-sizing: border-box;
	padding: 24px 30px 0;
}

/* Amazon disclosure directly under the title/meta (astra_single_header_bottom
   hook in functions.php, posts only - not plain pages) - same width/
   left-right padding as .entry-header above it so it lines up, no white
   background/top padding of its own so it reads as part of the same
   transparent strip above the white content card below, not the first
   item inside that card. */
.single-post-disclosure {
	max-width: 810px;
	box-sizing: border-box;
	padding: 0 30px;
}

.single-post-disclosure .amazon-disclosure {
	margin: 16px 0 0;
}

/* Astra's comments_template() call is also a sibling of .entry-content
   (like .entry-header above), rendered after the article closes - same
   full-width/no-padding issue, fixed the same way: constrained to the
   810px left column with matching side padding and a white background so
   it reads as a continuation of the article card instead of a full-width
   strip below it. Plain pages rarely have comments enabled, but this
   covers it if one ever does. */
.single-post .comments-area,
.astra-child-plain-page .comments-area {
	max-width: 810px;
	box-sizing: border-box;
	background-color: #fff;
	padding: 24px 30px;
}

/* Astra's post-navigation (Previous/Next Post) is the same kind of
   entry-content sibling as .entry-header/.comments-area above - same fix. */
.single-post .post-navigation {
	max-width: 810px;
	box-sizing: border-box;
	background-color: #fff;
	padding: 24px 30px;
}

/* "Related Products" - appended to the end of a single post's own content
   (see the_content filter in functions.php), so it's already inside
   .single-post-layout__main's 810px/white/30px-padding box and needs no
   width/background of its own - just its internal 2-column grid. */
.related-products {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid #e5e5e5;
}

.related-products__title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 20px;
}

.related-products__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 500px) {
	.related-products__grid {
		grid-template-columns: 1fr;
	}
}

.related-products__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.related-products__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-products__card-title {
	font-size: 17px;
	font-weight: 700;
	margin: 12px 0 6px;
}

.related-products__card-title a {
	color: #111218;
	text-decoration: none;
}

.related-products__card-title a:hover {
	color: var(--site-accent);
}

.related-products__card-cat {
	display: inline-block;
	font-size: 14px;
	color: var(--site-accent);
	text-decoration: none;
}

.related-products__card-cat:hover {
	text-decoration: underline;
}

/* Astra's own single-post article styling ("ast-blog-single-style-1")
   gives .ast-article-single a white background across its own full width
   (1140px - both the 810px content column AND the 300px ad column, plus
   the 30px gap between them) - background-color:transparent here leaves
   that to .single-post-layout__main and .entry-header alone, each
   independently already scoped to just the 810px left column. */
/* Astra's own matching rule is scoped to ".ast-separate-container
   .ast-article-single:not(.ast-related-post)" - .ast-separate-container
   is a class on <body> itself (a "container layout" setting), same as
   .single-post, not a separate ancestor wrapping it - "body.single-post
   .ast-article-single" (compound class on body, no space) is what
   actually matches; ".single-post .ast-separate-container ..." (space
   between them) was requiring .ast-separate-container to be a descendant
   of some other .single-post element, which never exists, so that
   earlier version of this rule silently matched nothing at all. */
body.single-post .ast-article-single:not(.ast-related-post) {
	background-color: transparent !important;
}

/* Astra's own default top spacing above a single post's title - #primary's
   52px margin-top (page-level breathing room) plus .ast-article-single's
   own separate 69.42px padding-top (originally the inside-the-white-card
   padding for its now-transparent background above) - stacked with this
   stylesheet's own 24px .entry-header padding-top, that added up to
   145px of empty space above the title. Both were sized for a page
   without .single-post-layout's own 810px card immediately below doing
   the actual framing now; reduced together here rather than removed
   outright, so there's still some clearance below the fixed header. */
.single-post #primary {
	margin-top: 20px !important;
}

.single-post .ast-article-single {
	padding-top: 0 !important;
}

.single-post-layout__ad {
	flex: 0 0 300px;
	position: sticky;
	/* var(--header-height), not a hardcoded 97.66px - this was still the
	   pre-logo-resize header height (see --header-height's own 82.66px
	   fix); no +20px extra offset per request, sits flush against the
	   header's real bottom edge like everything else does now. */
	top: var(--header-height);
}

@media (max-width: 799px) {
	.single-post-layout {
		flex-direction: column;
	}

	.single-post-layout__main,
	.single-post-layout__ad {
		flex-basis: auto;
		width: 100%;
	}

	.single-post-layout__ad {
		position: static;
	}
}

/* Sticky rotating text ad, 300x500 (matches the ad column's own width) -
   placeholder slides (see functions.php) standing in for a real ad
   creative until one exists; swap the slide text or this whole block for
   an actual asset whenever one is supplied. */
.ad-loop-slider {
	position: relative;
	width: 300px;
	height: 500px;
	background: var(--site-accent);
	overflow: hidden;
}

.ad-loop-slider__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.ad-loop-slider__slide.is-active {
	opacity: 1;
}

.ad-loop-slider__slide p {
	margin: 0;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}

/* Smooth fade-in/out slideshow replacing runs of 2+ full-size images
   stacked back to back in an article's own content (see
   about-slideshow.php - a one-off script run against the About page's own
   content, not a site-wide conversion; other posts didn't have this
   pattern). Fixed aspect-ratio + object-fit:cover keeps the box a
   reasonable height regardless of how tall the original photos are
   (several ran to 1000px+ tall stacked one after another). */
.content-slideshow {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f2f2f2;
	margin: 24px 0;
}

.content-slideshow__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.content-slideshow__slide.is-active {
	opacity: 1;
}

.content-slideshow__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.entry-content .wp-block-button__link {
	background-color: var(--site-accent) !important;
	color: #fff !important;
	border-color: var(--site-accent) !important;
	border-radius: 4px !important;
}

.entry-content .wp-block-button__link:hover {
	filter: brightness(1.1);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .wp-block-heading {
	margin-top: 30px;
}

/* Standard spacing below every image in the article body (the hero/first
   image included) and its wrapping figure - core Gutenberg image blocks
   carry no bottom margin of their own by default, so an image sitting
   directly above a paragraph (or another image, as in the product-cta
   pairs) had no visible gap between them at all. */
.entry-content .wp-block-image,
.entry-content figure {
	margin-top: 24px;
	margin-bottom: 24px;
}

#ast-scroll-top {
	background-color: var(--site-accent) !important;
}

.entry-content a {
	color: var(--site-accent);
}

.entry-content a:hover {
	color: var(--site-accent-hover);
}

.navigation.pagination {
	margin-top: 30px;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #e0e0e0;
	color: #111218;
	text-decoration: none;
	font-size: 14px;
}

.navigation.pagination .page-numbers.current {
	background-color: var(--site-accent);
	color: #fff;
	border-color: var(--site-accent);
}

.navigation.pagination .page-numbers:hover {
	border-color: var(--site-accent);
}

.site-browse-categories {
	margin-bottom: 24px;
}

.site-browse-categories h3 {
	margin: 0 0 0.5em;
}

.site-browse-categories ul {
	list-style: disc;
	padding-left: 1.5em;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5em;
}

.site-browse-categories li {
	margin: 0.2em 0;
}

.site-browse-categories a {
	text-decoration: underline;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}