/*
 * Shopolyst UI layer.
 *
 * Realises the active design's raised dials (variance 0.5, motion 0.6) on top of
 * the brand stylesheet: scroll reveals, hover depth, a sticky header, richer
 * collection and product cards. Everything animates transform/opacity only, and
 * every motion collapses under prefers-reduced-motion.
 */

:root {
	--sp-ease: cubic-bezier(.22, .61, .36, 1);
	--sp-ease-out: cubic-bezier(.16, 1, .3, 1);
	--sp-lift: 0 10px 28px -12px rgba(60, 34, 22, .28);
	--sp-lift-strong: 0 18px 42px -16px rgba(60, 34, 22, .34);
	--sp-header-h: 72px;
}

/* =========================================================================
   1. Scroll reveal
   ========================================================================= */

[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity .7s var(--sp-ease-out), transform .7s var(--sp-ease-out);
	will-change: opacity, transform;
}

[data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Children of a revealed row arrive in sequence rather than all at once. */
[data-reveal-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .6s var(--sp-ease-out), transform .6s var(--sp-ease-out);
}

[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .05s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .10s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .15s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .20s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .25s; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: .30s; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: .35s; }
[data-reveal-stagger].is-in > *:nth-child(n+9) { transition-delay: .40s; }

/* =========================================================================
   2. Header — sticky, shrinking, hides going down and returns going up
   ========================================================================= */

.ct-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--sp-bg);
	transition: transform .38s var(--sp-ease), box-shadow .3s ease, background-color .3s ease;
}

body.sp-scrolled .ct-header { box-shadow: 0 1px 0 var(--sp-border), 0 8px 24px -20px rgba(60, 34, 22, .4); }
body.sp-hide-header .ct-header { transform: translate3d(0, -100%, 0); }

body.sp-scrolled .ct-header [data-row="middle"] { --height: 62px; }

.ct-header a { transition: color .18s ease; }

/* Underline that draws in from the left on nav hover. */
.ct-header nav .menu > li > a {
	position: relative;
}

.ct-header nav .menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 1.5px;
	background: var(--sp-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--sp-ease);
}

.ct-header nav .menu > li > a:hover::after,
.ct-header nav .menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* =========================================================================
   3. Announcement strip — rotating messages
   ========================================================================= */

.sp-announcement {
	position: relative;
	overflow: hidden;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0 16px;
}

.sp-announcement__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translate3d(0, 100%, 0);
	transition: opacity .5s var(--sp-ease), transform .5s var(--sp-ease);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-announcement__slide.is-on { opacity: 1; transform: none; }
.sp-announcement__slide.is-off { opacity: 0; transform: translate3d(0, -100%, 0); }

@media (max-width: 600px) {
	.sp-announcement { height: 34px; }
	.sp-announcement__slide { font-size: 11.5px; }
}

/* =========================================================================
   4. Buttons — fill sweep, and a real pressed state
   ========================================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.elementor-button,
.sp-about__cta,
.wc-block-components-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .18s var(--sp-ease), box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.woocommerce a.button::before,
.woocommerce button.button::before,
.elementor-button::before,
.sp-about__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sp-ink);
	transform: translate3d(0, 100%, 0);
	transition: transform .34s var(--sp-ease);
}

.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.elementor-button:hover::before,
.sp-about__cta:hover::before { transform: none; }

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.elementor-button:hover,
.sp-about__cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--sp-lift);
	border-color: var(--sp-ink);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.elementor-button:active { transform: translateY(0); box-shadow: none; }

/* The disabled buy button must not pretend to be interactive. */
.woocommerce div.product form.cart .button.disabled:hover {
	transform: none;
	box-shadow: none;
}

.woocommerce div.product form.cart .button.disabled::before { display: none; }

/* =========================================================================
   5. Collection tiles — name over the image, zoom on hover
   ========================================================================= */

.woocommerce ul.products li.product-category { position: relative; }

.woocommerce ul.products li.product-category > a {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sp-ink);
}

.woocommerce ul.products li.product-category > a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 8, 7, .78) 0%, rgba(10, 8, 7, .28) 42%, rgba(10, 8, 7, 0) 72%);
	transition: opacity .4s var(--sp-ease);
	z-index: 1;
}

.woocommerce ul.products li.product-category > a img {
	transition: transform .7s var(--sp-ease-out), filter .5s ease;
	display: block;
}

.woocommerce ul.products li.product-category > a:hover img { transform: scale(1.07); }
.woocommerce ul.products li.product-category > a:hover::after { opacity: .82; }

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 16px 16px 15px;
	color: #FFFFFF !important;
	font-family: var(--theme-font-family);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .01em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
	transform: translate3d(0, 0, 0);
	transition: transform .35s var(--sp-ease);
}

.woocommerce ul.products li.product-category > a:hover .woocommerce-loop-category__title {
	transform: translate3d(0, -4px, 0);
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	display: block;
	background: transparent;
	color: rgba(255, 255, 255, .72) !important;
	font-weight: 400;
	font-size: 12px;
	padding: 3px 0 0;
	letter-spacing: .04em;
}

/* =========================================================================
   6. Product cards — second photo on hover, lift, quick add
   ========================================================================= */

.woocommerce ul.products li.product {
	position: relative;
	transition: transform .35s var(--sp-ease), box-shadow .35s ease;
	padding-bottom: 4px;
}

.woocommerce ul.products li.product:not(.product-category):hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-lift);
	z-index: 2;
}

.woocommerce ul.products li.product:not(.product-category) .ct-media-container,
.sp-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sp-surface);
}

.woocommerce ul.products li.product:not(.product-category) img {
	transition: transform .8s var(--sp-ease-out), opacity .45s var(--sp-ease);
}

.woocommerce ul.products li.product:not(.product-category):hover img { transform: scale(1.05); }

/* The gallery's first extra photo, cross-faded in over the main one. */
.sp-card__media { display: block; }

.sp-card__media img.sp-card__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.02);
	pointer-events: none;
}

li.product:hover .sp-card__media img.sp-card__hover { opacity: 1; transform: scale(1.05); }
li.product:hover .sp-card__media img:not(.sp-card__hover) { opacity: 0; }

/* Loop buy button rides up over the image on hover. */
.woocommerce ul.products li.product .button {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	margin: 0;
	text-align: center;
	font-size: 13px;
	padding: 12px 14px;
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity .3s var(--sp-ease), transform .3s var(--sp-ease), background-color .25s ease;
	pointer-events: none;
}

.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product .button:focus-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.woocommerce ul.products li.product .button.loading { opacity: 1; transform: none; }
.woocommerce ul.products li.product .added_to_cart { display: none; }

@media (hover: none) {
	/* Touch has no hover: keep the buy button permanently visible instead. */
	.woocommerce ul.products li.product .button {
		position: static;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		margin-top: 10px;
	}
	li.product:hover .sp-card__media img.sp-card__hover { opacity: 0; }
	li.product:hover .sp-card__media img:not(.sp-card__hover) { opacity: 1; }
}

/* Sale badge sits over the media, and nudges on hover. */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	transition: transform .3s var(--sp-ease);
}

.woocommerce ul.products li.product:hover .onsale { transform: translateY(-2px); }

.woocommerce ul.products li.product .woocommerce-loop-product__title { transition: color .2s ease; }
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--sp-accent); }

/* =========================================================================
   7. Trust marquee
   ========================================================================= */

.sp-marquee {
	background: var(--sp-ink);
	color: #FFFFFF;
	overflow: hidden;
	padding: 15px 0;
	--sp-marquee-duration: 34s;
}

.sp-marquee__track {
	display: flex;
	width: max-content;
	animation: sp-marquee var(--sp-marquee-duration) linear infinite;
}

.sp-marquee:hover .sp-marquee__track { animation-play-state: paused; }

.sp-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 34px;
	font-family: var(--theme-font-family);
	font-size: 14px;
	letter-spacing: .02em;
	white-space: nowrap;
}

.sp-marquee__item svg { flex: none; color: var(--sp-highlight); }

@keyframes sp-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================================
   8. Product page — sticky buy bar
   ========================================================================= */

.sp-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9500;
	background: var(--sp-bg);
	border-top: 1px solid var(--sp-border);
	box-shadow: 0 -8px 30px -22px rgba(60, 34, 22, .5);
	transform: translate3d(0, 110%, 0);
	transition: transform .4s var(--sp-ease);
}

.sp-buybar.is-on { transform: none; }

.sp-buybar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.sp-buybar__thumb { width: 46px; height: 46px; object-fit: cover; flex: none; }

.sp-buybar__name {
	font-family: var(--theme-font-family);
	font-size: 14px;
	line-height: 1.3;
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-buybar__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-buybar__price del { color: var(--sp-muted); font-weight: 400; margin-right: 6px; }
.sp-buybar__price ins { text-decoration: none; }

.sp-buybar__cta {
	background: var(--sp-accent);
	color: #FFFFFF;
	font-family: var(--theme-font-family);
	font-weight: 700;
	font-size: 14px;
	padding: 13px 26px;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	transition: background-color .2s ease, transform .18s var(--sp-ease);
}

.sp-buybar__cta:hover { background: var(--sp-accent-hover); color: #FFFFFF; transform: translateY(-1px); }

@media (max-width: 700px) {
	.sp-buybar__name, .sp-buybar__thumb { display: none; }
	.sp-buybar__inner { padding: 9px 14px; gap: 12px; }
	.sp-buybar__cta { flex: 1; text-align: center; }
	.sp-cart { bottom: 84px; }
}

/* =========================================================================
   9. Cart badge pop
   ========================================================================= */

.sp-cart { transition: transform .25s var(--sp-ease), border-color .2s ease, color .2s ease; }
.sp-cart:hover { transform: translateY(-2px); }
.sp-cart__count { transition: transform .3s var(--sp-ease-out); }
.sp-cart.is-bumped .sp-cart__count { animation: sp-pop .45s var(--sp-ease-out); }

@keyframes sp-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

/* =========================================================================
   10. Gallery polish
   ========================================================================= */

.sp-gallery__main { transition: opacity .3s var(--sp-ease), transform .5s var(--sp-ease-out); }
.sp-gallery__main.is-swapping { opacity: 0; }
.sp-gallery__thumb { transition: border-color .2s ease, transform .25s var(--sp-ease); }
.sp-gallery__thumb:hover { transform: translateY(-2px); }

.sp-lightbox img { animation: sp-zoom-in .35s var(--sp-ease-out); }

@keyframes sp-zoom-in {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================================
   11. Hero — full-bleed with overlapping type
   ========================================================================= */

.sp-hero {
	position: relative;
	min-height: 560px;
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--sp-ink);
}

.sp-hero__media { position: absolute; inset: 0; z-index: 0; }

.sp-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.06);
	animation: sp-hero-settle 1.6s var(--sp-ease-out) forwards;
}

@keyframes sp-hero-settle { to { transform: scale(1); } }

.sp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 8, 7, .86) 0%, rgba(10, 8, 7, .62) 42%, rgba(10, 8, 7, .12) 78%);
}

.sp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 88px 20px;
	width: 100%;
}

.sp-hero__eyebrow {
	display: inline-block;
	font-family: var(--theme-font-family);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sp-highlight);
	margin-bottom: 16px;
}

.sp-hero h1 {
	font-family: var(--theme-headings-font-family);
	font-size: clamp(38px, 5.4vw, 68px);
	line-height: 1.04;
	color: #FFFFFF;
	margin: 0 0 18px;
	max-width: 15ch;
	text-wrap: balance;
}

.sp-hero p {
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
    line-height: 1.6;
	max-width: 46ch;
	margin: 0 0 28px;
}

.sp-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.sp-hero__cta,
.sp-hero__cta--ghost {
	display: inline-block;
	font-family: var(--theme-font-family);
	font-weight: 700;
	font-size: 15px;
	padding: 16px 32px;
	transition: transform .2s var(--sp-ease), background-color .25s ease, color .25s ease;
}

.sp-hero__cta { background: var(--sp-accent); color: #FFFFFF; }
.sp-hero__cta:hover { background: #FFFFFF; color: var(--sp-ink); transform: translateY(-2px); text-decoration: none; }

.sp-hero__cta--ghost { color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .45); }
.sp-hero__cta--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.08); color: #FFFFFF; transform: translateY(-2px); text-decoration: none; }

@media (max-width: 700px) {
	.sp-hero { min-height: 470px; }
	.sp-hero__inner { padding: 56px 18px; }
	.sp-hero p { font-size: 15.5px; }
	.sp-hero__actions { gap: 10px; }
	.sp-hero__cta, .sp-hero__cta--ghost { padding: 14px 24px; font-size: 14px; flex: 1; text-align: center; }
}

/* =========================================================================
   12. Section headings with a rule that draws itself
   ========================================================================= */

.sp-sectionhead { display: flex; align-items: baseline; gap: 18px; }
.sp-sectionhead__rule { flex: 1; height: 1px; background: var(--sp-border); transform-origin: left; }
[data-reveal] .sp-sectionhead__rule { transform: scaleX(0); transition: transform .9s var(--sp-ease-out) .15s; }
[data-reveal].is-in .sp-sectionhead__rule { transform: scaleX(1); }

/* =========================================================================
   13. Reduced motion — everything settles instantly, nothing is hidden
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal],
	[data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }

	.sp-marquee__track { animation: none; transform: none; }
	.sp-hero__media img { animation: none; transform: none; }
	.woocommerce ul.products li.product .button { opacity: 1; transform: none; pointer-events: auto; position: static; margin-top: 10px; }
	.sp-buybar { transition: none; }
}

/* =========================================================================
   14. Hero buttons — the theme's global link colour was winning over these,
   which rendered the label in the accent on an accent ground (invisible).
   ========================================================================= */

.sp-hero .sp-hero__cta,
.sp-hero a.sp-hero__cta {
	color: #FFFFFF !important;
	background: var(--sp-accent);
	text-decoration: none;
}

.sp-hero .sp-hero__cta:hover,
.sp-hero a.sp-hero__cta:hover {
	color: var(--sp-ink) !important;
	background: #FFFFFF;
}

.sp-hero .sp-hero__cta--ghost,
.sp-hero a.sp-hero__cta--ghost {
	color: #FFFFFF !important;
	text-decoration: none;
}

.sp-hero .sp-hero__cta--ghost:hover,
.sp-hero a.sp-hero__cta--ghost:hover { color: #FFFFFF !important; }

.sp-hero__eyebrow { color: var(--sp-highlight) !important; }

/* Same guard for the footer's links, which sit on the dark ground. */
.sp-footer a { text-decoration: none; }
.sp-footer .sp-footer__by a { color: var(--sp-accent); }
.sp-footer .sp-footer__by a:hover { color: var(--sp-highlight); }

/* On a narrow viewport the hero's horizontal gradient covers the whole frame,
   so the photograph never shows. Run it vertically instead: image at the top,
   type on the darkened lower half. */
@media (max-width: 700px) {
	.sp-hero__media::after {
		background: linear-gradient(180deg,
			rgba(10, 8, 7, .30) 0%,
			rgba(10, 8, 7, .58) 38%,
			rgba(10, 8, 7, .88) 72%,
			rgba(10, 8, 7, .94) 100%);
	}

	.sp-hero { align-items: end; }
	.sp-hero__inner { padding-top: 120px; padding-bottom: 42px; }
	.sp-hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: 18ch; }
}