/*
Homepage hero + trending grid layout, plus the promo bar and footer credit.
Mobile-first: base rules target phones, min-width media queries scale up.
*/

/* Storefront's own base stylesheet hardcodes a WooCommerce-purple focus
   outline: `a:focus, input:focus, textarea:focus, button:focus { outline:
   2px solid #7f54b3 }`. That's a real element-selector rule, so it beats a
   plain `*:focus` reset on specificity no matter the load order — hence
   !important here, the only reliable way to override a parent theme's
   hardcoded rule short of matching its exact selector list forever.
   Mouse clicks stay silent; keyboard navigation still gets a clear,
   on-brand outline via :focus-visible. */
*:focus {
	outline: none !important;
}

*:focus-visible {
	outline: 2px solid var(--snapkit-color-accent) !important;
	outline-offset: 3px;
}

/* Browsers show :focus-visible on text-like fields even for a plain mouse
   click (unlike buttons/links, where it's keyboard-only) — a hard 2px
   outline box reads as jarring there. Swap in a soft glow instead so
   clicking into search/quantity/checkout fields still gives feedback
   without looking like a cut-off rectangle. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none !important;
	border-color: var(--snapkit-color-accent) !important;
	box-shadow: 0 0 0 3px rgba(255, 90, 60, 0.15) !important;
}

/* Scroll-triggered reveal — classes applied by assets/js/scroll-reveal.js
   via IntersectionObserver, not by any template/hook, so this is a no-op on
   any page whose selectors don't match. Values (translateY(5rem)/0.6s ease
   fade for sections, scale(1.1)->1 for card images) match the mechanism
   confirmed live on savelle.store's own product grid and section reveals —
   without this, every section renders fully-formed on load and the page
   reads as a static document instead of one that responds as you scroll. */
.snapkit-reveal {
	opacity: 0;
	transform: translateY(5rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.snapkit-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

.snapkit-reveal-zoom {
	animation: none;
	opacity: 0;
	transform: scale(1.08);
}

.snapkit-reveal-zoom.is-revealed {
	opacity: 1;
	animation: snapkit-zoom-fade 0.8s ease forwards;
}

@keyframes snapkit-zoom-fade {
	from {
		opacity: 0;
		transform: scale(1.08);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.snapkit-reveal,
	.snapkit-reveal-zoom {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

/* Persistent quick-nav strip (Home / Shop / Trending) — fixed so it stays
   visible while scrolling in either direction. It's removed from normal
   flow, so its rendered height must be compensated with top padding on the
   header immediately below it (see .snapkit-quick-nav-offset). */
.snapkit-quick-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--snapkit-space-md);
	background-color: var(--snapkit-color-charcoal);
	padding: var(--snapkit-space-xs) var(--snapkit-space-sm);
	/* Whatever scrolls underneath this fixed bar — hero, marquee, anything —
	   can share its exact charcoal background, which otherwise fuses into one
	   undifferentiated block with no visible edge. A shadow keeps the bar
	   reading as a distinct layer regardless of what's beneath it. */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.snapkit-quick-nav__links {
	display: flex;
	flex: 1;
	justify-content: center;
	gap: var(--snapkit-space-md);
}

.snapkit-quick-nav a {
	color: var(--snapkit-color-base);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}

.snapkit-quick-nav a:hover,
.snapkit-quick-nav a:focus-visible {
	color: var(--snapkit-color-accent);
}

/* WOOCS renders its own dropdown widget markup/CSS — override just enough
   to sit cleanly in our slim dark bar instead of its default light-theme
   box, without fighting its internal layout. */
.snapkit-quick-nav__currency {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	max-height: 1.75rem;
	overflow: visible;
}

.snapkit-quick-nav__currency .woocs_pull_left,
.snapkit-quick-nav__currency #woocs_currency_switcher {
	margin: 0 !important;
}

.snapkit-quick-nav__currency .woocs_flags_dropdown .woocs_selected_currency,
.snapkit-quick-nav__currency .dd-select .dd-selected {
	display: flex !important;
	align-items: center;
	background: var(--snapkit-color-base) !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
	color: var(--snapkit-color-text) !important;
	font-size: 0.8125rem !important;
	padding: 0.25rem 0.5rem !important;
	min-height: 0 !important;
}

/* Text stays readable (dark on the switcher's own light background) in
   both the closed selector and the opened options list; the flag icon is
   kept, only the "European Euro"-style subtitle is dropped so the switcher
   stays as compact as the nav links next to it. */
.snapkit-quick-nav__currency .dd-selected-text,
.snapkit-quick-nav__currency .dd-option-text {
	color: var(--snapkit-color-text) !important;
	font-weight: 600;
}

.snapkit-quick-nav__currency .dd-selected-image,
.snapkit-quick-nav__currency .dd-option-image {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 2px;
}

.snapkit-quick-nav__currency .dd-selected-description,
.snapkit-quick-nav__currency .dd-option-description {
	display: none !important;
}

/* WordPress's own admin toolbar is also `position: fixed; top: 0` with a
   z-index (99999) higher than ours, so for a logged-in store owner it sits
   directly on top of our bar and hides it entirely. Drop below it instead
   of fighting its z-index — same breakpoint WP core itself uses to shrink
   the toolbar from 32px to 46px on small screens. */
.admin-bar .snapkit-quick-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .snapkit-quick-nav {
		top: 46px;
	}
}

/* Compensates the space .snapkit-quick-nav no longer occupies in normal
   flow now that it's fixed. Applied to the header (the element that used
   to sit directly below it) so nothing on the page renders hidden
   underneath the fixed bar. */
.site-header {
	margin-top: 2.75rem;
	background-color: var(--snapkit-color-base);
	border-bottom: 1px solid var(--snapkit-color-border);
}

/* Header re-skin — CSS only, no header.php override. Storefront's own
   nav/cart markup already inherits the new body font via the cascade; this
   fills in the color/weight treatment the parent theme's defaults don't
   know about (plain gray nav links, no accent on the cart icon). */

/* Text wordmark, replacing a raster logo image that pre-dated this rebrand
   and never matched the terracotta/editorial palette (multi-colour
   gradient icon, no relation to the new tokens). With no custom logo set,
   Storefront falls back to its own plain-text `.site-title` markup — this
   just gives that fallback the same weight/tracking treatment as the
   button labels elsewhere, instead of leaving it at browser defaults. */
.site-branding .site-title a {
	/* Storefront's own Customizer "Header Text Color" feature prints its CSS
	   as a late, un-enqueued <style> block in wp_head — it lands after every
	   linked stylesheet regardless of our own dependency order, so equal
	   specificity isn't enough here; same situation as the global :focus
	   override above. */
	color: var(--snapkit-color-charcoal) !important;
	font-family: var(--snapkit-font-heading);
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.5rem;
	/* Storefront's own global reset sets overflow-wrap: break-word, and
	   .site-branding is a narrow Storefront-owned column (a fixed-percentage
	   float shared with the nav, not sized for a full text wordmark) — at
	   wide viewports it measured just 231px, narrower than "COOKNOLOGY" needs
	   at any of the sizes tried above 26px. Combined, the wordmark was
	   breaking mid-word ("COOKNOLOG" / "Y" — confirmed live via screenshot)
	   instead of just being tight. nowrap is the permanent backstop: even if
	   some other viewport width pinches the column further, the wordmark
	   will now overflow the box on one line rather than ever split a word. */
	white-space: nowrap;
}

.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
	color: var(--snapkit-color-accent);
}

@media (min-width: 768px) {
	.site-branding .site-title a {
		/* Was 2rem (32px) — measured live at a 1600px viewport, the actual
		   .site-branding column is only 231px wide (Storefront pinches it to
		   21.7% of the row at wide breakpoints to make room for the nav),
		   and "COOKNOLOGY" at 32px bold uppercase needs ~248px, which is what
		   caused the mid-word wrap. 26px needs ~204px — comfortable margin
		   under 231px, confirmed via direct text measurement, not a guess. */
		font-size: 1.625rem;
	}
}

.main-navigation a {
	font-weight: 600;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	color: var(--snapkit-color-accent);
}

.site-header-cart .cart-contents,
.site-header-cart .cart-contents:hover {
	color: var(--snapkit-color-text);
}

.site-header-cart .cart-contents:hover {
	color: var(--snapkit-color-accent);
}

.site-search input[type="search"] {
	border-radius: var(--snapkit-radius-button);
}

.site-search button[type="submit"] {
	color: var(--snapkit-color-accent);
}

/* Storefront's own mobile-only account/search/cart bar — stock parent-theme
   chrome that predates the rebrand and never picked up the new tokens:
   default white-on-dark border/shadow meant for a dark bar, no relation to
   the new tokens now that the background itself is overridden below.
   Its border/shadow live in the parent's WooCommerce stylesheet, which is
   registered by a WooCommerce-integration class that enqueues later than
   our own files regardless of our declared dependency chain — !important
   is the reliable way to win that, same reasoning as the :focus override
   at the top of this file. */
.storefront-handheld-footer-bar {
	background-color: var(--snapkit-color-base);
	border-top: 1px solid var(--snapkit-color-border) !important;
	box-shadow: none !important;
}

.storefront-handheld-footer-bar ul li > a {
	border-right-color: var(--snapkit-color-border) !important;
}

.storefront-handheld-footer-bar a {
	color: var(--snapkit-color-charcoal);
}

.storefront-handheld-footer-bar a:hover,
.storefront-handheld-footer-bar a:focus {
	color: var(--snapkit-color-accent);
}

.storefront-handheld-footer-bar .count {
	background-color: var(--snapkit-color-accent);
	color: var(--snapkit-color-base);
	border-radius: 50%;
}

.snapkit-hero {
	position: relative;
	overflow: hidden;
}

.snapkit-hero__slides {
	list-style: none;
	margin: 0;
	padding: 0;
}

.snapkit-hero__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

/* Single-slide (no carousel): renders as a plain block in normal flow —
   visually and behaviorally identical to the old static hero. */
.snapkit-hero:not(.snapkit-hero--carousel) .snapkit-hero__slide {
	flex-direction: column;
}

/* Carousel (2+ slides): slides stack via absolute positioning + opacity
   crossfade, so the container needs its own explicit height since
   absolutely-positioned children don't contribute to parent height. */
.snapkit-hero--carousel {
	min-height: 60vh;
}

.snapkit-hero--carousel .snapkit-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.snapkit-hero--carousel .snapkit-hero__slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.snapkit-hero__content {
	padding: var(--snapkit-space-lg) var(--snapkit-space-sm);
	text-align: center;
	max-width: 640px;
}

.snapkit-hero__slide[style*="background-image"] .snapkit-hero__content {
	color: #fff;
}

.snapkit-hero__slide[style*="background-image"] .snapkit-hero__subheadline {
	color: rgba(255, 255, 255, 0.85);
}

.snapkit-hero__headline {
	font-size: 1.75rem;
	margin: 0 0 var(--snapkit-space-xs);
}

.snapkit-hero__subheadline {
	color: var(--snapkit-color-text-muted);
	margin: 0 0 var(--snapkit-space-md);
}

.snapkit-hero__cta {
	display: inline-block;
	padding: var(--snapkit-space-xs) var(--snapkit-space-md);
	font-weight: 600;
	text-decoration: none;
}

.snapkit-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--snapkit-space-sm);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.snapkit-hero__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	border: 1px solid #fff;
	background-color: rgba(255, 255, 255, 0.4);
	padding: 0;
	cursor: pointer;
}

.snapkit-hero__dot.is-active {
	background-color: #fff;
}

/* Scrolling marquee band, directly under the hero — takes over the "thin
   strip" role the old trust bar used to have. Content is duplicated once in
   the markup (front-page.php) for a seamless wrap; pure CSS animation, no
   JS. Reuses the same snapkit_trust_1..4 values already trusted/approved
   elsewhere rather than introducing new marketing copy. */
.snapkit-marquee {
	overflow: hidden;
	background-color: var(--snapkit-color-charcoal);
	padding: 0.625rem 0;
}

.snapkit-marquee__track {
	display: flex;
	width: max-content;
	animation: snapkit-marquee-scroll 22s linear infinite;
}

.snapkit-marquee__set {
	display: flex;
	flex-shrink: 0;
}

.snapkit-marquee__item {
	color: #fff;
	font-family: var(--snapkit-font-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
	padding: 0 var(--snapkit-space-md);
}

.snapkit-marquee__item:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.25);
}

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

.snapkit-marquee:hover .snapkit-marquee__track,
.snapkit-marquee:focus-within .snapkit-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.snapkit-marquee__track {
		animation: none;
	}
}

/* Trust icon grid — bigger, more editorial version of the old thin strip.
   Icons are inlined SVGs (assets/images/icons/) using currentColor so they
   always match the label text without a separate color variant per icon. */
.snapkit-trust-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--snapkit-space-md) var(--snapkit-space-sm);
	list-style: none;
	margin: 0;
	max-width: var(--snapkit-max-width);
	padding: var(--snapkit-space-lg) var(--snapkit-space-sm);
}

.snapkit-trust-grid li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.snapkit-trust-grid__icon {
	display: flex;
	color: var(--snapkit-color-accent);
}

.snapkit-trust-grid__icon svg {
	width: 2rem;
	height: 2rem;
}

.snapkit-trust-grid__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--snapkit-color-text);
}

/* Promo countdown banner — only ever rendered for a real, still-future
   end-datetime (see inc/homepage-countdown.php), so unlike a decorative/
   perpetual countdown this one is allowed to use the "urgency" secondary
   accent color honestly. */
.snapkit-countdown {
	background-color: var(--snapkit-color-accent-secondary);
	color: #fff;
	text-align: center;
	padding: var(--snapkit-space-md) var(--snapkit-space-sm);
}

.snapkit-countdown__label {
	margin: 0 0 var(--snapkit-space-sm);
	font-family: var(--snapkit-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.9375rem;
}

.snapkit-countdown__clock {
	display: flex;
	justify-content: center;
	gap: var(--snapkit-space-sm);
	margin-bottom: var(--snapkit-space-sm);
}

.snapkit-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3rem;
}

.snapkit-countdown__value {
	font-family: var(--snapkit-font-heading);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
}

.snapkit-countdown__name {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.snapkit-countdown__cta {
	display: inline-block;
	background-color: #fff;
	color: var(--snapkit-color-accent-secondary);
}

.snapkit-category-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--snapkit-space-sm);
	max-width: var(--snapkit-max-width);
	margin: 0 auto;
	padding: var(--snapkit-space-md) var(--snapkit-space-sm);
}

.snapkit-category-nav__item {
	position: relative;
	display: block;
	border-radius: var(--snapkit-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.snapkit-category-nav__item:hover,
.snapkit-category-nav__item:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.snapkit-category-nav__media {
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--snapkit-color-base-alt);
	overflow: hidden;
}

.snapkit-category-nav__item:hover .snapkit-category-nav__media img {
	transform: scale(1.08);
}

/* "View All" tile has no photo — a plain accent-bordered card with the
   label centered, same footprint as the photo tiles next to it. */
.snapkit-category-nav__item--view-all {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--snapkit-color-accent);
	box-shadow: none;
}

.snapkit-category-nav__item--view-all .snapkit-category-nav__label {
	position: static;
	background: none;
	color: var(--snapkit-color-accent);
	padding: 0;
}

.snapkit-category-nav__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.snapkit-category-nav__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--snapkit-space-sm);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	color: #fff;
	font-family: var(--snapkit-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
}

.snapkit-spotlight {
	display: flex;
	flex-direction: column;
	max-width: var(--snapkit-max-width);
	margin: var(--snapkit-space-lg) auto;
	padding: 0 var(--snapkit-space-sm);
	gap: var(--snapkit-space-md);
}

.snapkit-spotlight__media img {
	width: 100%;
	height: auto;
	border-radius: var(--snapkit-radius);
	display: block;
}

.snapkit-spotlight__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.snapkit-spotlight__eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--snapkit-color-accent);
	margin-bottom: var(--snapkit-space-xs);
}

.snapkit-spotlight__title {
	font-size: 1.75rem;
	margin: 0 0 var(--snapkit-space-sm);
}

.snapkit-spotlight__excerpt ul {
	list-style: none;
	margin: 0 0 var(--snapkit-space-md);
	padding: 0;
}

.snapkit-spotlight__excerpt ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.snapkit-spotlight__excerpt ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--snapkit-color-accent);
	font-weight: 700;
}

.snapkit-spotlight__cta {
	align-self: flex-start;
	display: inline-block;
	padding: var(--snapkit-space-xs) var(--snapkit-space-md);
	font-weight: 700;
	text-decoration: none;
}

.snapkit-story {
	background-color: var(--snapkit-color-charcoal);
	color: var(--snapkit-color-base);
	padding: var(--snapkit-space-lg) var(--snapkit-space-sm);
	margin-top: var(--snapkit-space-lg);
}

.snapkit-story__heading {
	text-align: center;
	color: var(--snapkit-color-base);
	margin: 0 0 var(--snapkit-space-md);
}

.snapkit-story__pillars {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--snapkit-max-width);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--snapkit-space-md);
	text-align: center;
}

.snapkit-story__pillars li {
	font-size: 1rem;
	font-weight: 500;
	opacity: 0.9;
}

.snapkit-faq {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--snapkit-space-lg) var(--snapkit-space-sm);
}

.snapkit-faq__heading {
	text-align: center;
	margin-bottom: var(--snapkit-space-md);
}

.snapkit-faq__item {
	border-bottom: 1px solid var(--snapkit-color-border);
	padding: var(--snapkit-space-sm) 0;
}

.snapkit-faq__question {
	cursor: pointer;
	font-family: var(--snapkit-font-heading);
	font-weight: 700;
	list-style: none;
}

.snapkit-faq__question::-webkit-details-marker {
	display: none;
}

.snapkit-faq__question::after {
	content: "+";
	float: right;
	font-weight: 400;
}

.snapkit-faq__item[open] .snapkit-faq__question::after {
	content: "\2212";
}

.snapkit-faq__answer {
	margin: var(--snapkit-space-xs) 0 0;
	color: var(--snapkit-color-text-muted);
}

.snapkit-reviews {
	max-width: var(--snapkit-max-width);
	margin: 0 auto;
	padding: var(--snapkit-space-lg) var(--snapkit-space-sm);
}

.snapkit-reviews__heading {
	text-align: center;
	margin-bottom: var(--snapkit-space-md);
}

.snapkit-reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--snapkit-space-md);
}

.snapkit-reviews__card {
	padding: var(--snapkit-space-md);
	background-color: var(--snapkit-color-base-alt);
}

.snapkit-reviews__stars {
	color: var(--snapkit-color-accent);
	letter-spacing: 0.1em;
	margin-bottom: var(--snapkit-space-xs);
}

.snapkit-reviews__text {
	margin: 0 0 var(--snapkit-space-sm);
}

.snapkit-reviews__author {
	margin: 0;
	font-weight: 600;
	font-size: 0.875rem;
}

.snapkit-reviews__product {
	font-weight: 400;
	color: var(--snapkit-color-text-muted);
}

@media (min-width: 768px) {
	.snapkit-reviews__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.snapkit-story__intro {
	max-width: 640px;
	margin: 0 auto var(--snapkit-space-md);
	text-align: center;
	opacity: 0.9;
}

.snapkit-story__cta {
	display: block;
	width: max-content;
	margin: var(--snapkit-space-md) auto 0;
	color: var(--snapkit-color-base);
	border-bottom: 1px solid currentColor;
	font-weight: 600;
	text-decoration: none;
}

.snapkit-story__cta:hover,
.snapkit-story__cta:focus-visible {
	color: var(--snapkit-color-accent-secondary);
}

.snapkit-trending {
	max-width: var(--snapkit-max-width);
	margin: 0 auto;
	padding: var(--snapkit-space-lg) var(--snapkit-space-sm);
}

.snapkit-trending__title {
	text-align: center;
	margin-bottom: var(--snapkit-space-md);
}

/* Horizontally-scrollable product carousel — overrides Storefront's own
   percentage-width grid columns (.site-main ul.products.columns-4 li.product
   {width:22.05%}) with !important, since both selectors tie on specificity
   and a load-order-only win is too fragile to rely on (see the *:focus
   comment above for the same lesson learned once already on this theme). */
.snapkit-carousel {
	margin: 0 calc(var(--snapkit-space-sm) * -1);
	padding: 0 var(--snapkit-space-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.snapkit-carousel ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--snapkit-space-sm);
}

.snapkit-carousel ul.products li.product {
	width: 70% !important;
	max-width: 260px;
	flex: 0 0 auto !important;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.snapkit-carousel ul.products li.product {
		width: 32% !important;
	}
}

@media (min-width: 900px) {
	.snapkit-carousel ul.products li.product {
		width: 23% !important;
	}
}

.site-info {
	text-align: center;
	padding: var(--snapkit-space-sm);
	color: var(--snapkit-color-text-muted);
}

.site-info a {
	color: inherit;
}

@media (min-width: 768px) {
	.snapkit-hero__content {
		max-width: 640px;
		margin: 0 auto;
		padding: var(--snapkit-space-xl) var(--snapkit-space-sm);
	}

	.snapkit-hero__headline {
		font-size: 2.5rem;
	}

	.snapkit-trust-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.snapkit-category-nav {
		grid-template-columns: repeat(4, 1fr);
	}

	.snapkit-spotlight {
		flex-direction: row;
		align-items: center;
	}

	.snapkit-spotlight__media,
	.snapkit-spotlight__content {
		width: 50%;
	}

	/* Was 2.25rem (36px) — bigger than the actual section headings around it
	   ("Trending Now", "Why Cooknology" both render at 32px) and even the
	   site wordmark itself. A single featured product's name outranking the
	   page's own structural headings breaks the hierarchy the rest of the
	   page relies on to read as intentional; capped to match the section
	   headings instead of exceeding them. */
	.snapkit-spotlight__title {
		font-size: 2rem;
	}

	.snapkit-story__pillars {
		grid-template-columns: repeat(3, 1fr);
	}
}