/* =========================================================
   Cosmicspill — Shop layer (/shop/)
   Loads only on the "Shop landing" template. Colors, fonts and
   spacing come from theme.json presets, so the storefront stays
   in the same midnight-cosmic system as the blog.
   ========================================================= */

.cs-shop {
	--cs-line: rgba(180, 170, 255, 0.14);
	--cs-line-strong: rgba(180, 170, 255, 0.28);
	--cs-card: rgba(24, 22, 48, 0.55);
	/* Small print: the old faint (#736f96) sat at 4.1:1, just under AA.
	   The palette's faint is now #8f8bb3 — 6:1 on every shop surface. */
	--cs-faint: var(--wp--preset--color--faint, #8f8bb3);
	--cs-ink: #1a1233;
	--cs-shadow: 0 22px 60px -24px rgba(90, 70, 220, 0.55);
	--cs-radius: 18px;
	position: relative;
	font-size: clamp(16px, 1rem + 0.15vw, 17px);
	line-height: 1.7;
}

.cs-shop-wrap {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.cs-shop :where(h1, h2, h3, h4) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.12;
	margin: 0;
}

.cs-shop p { margin: 0; }
.cs-shop a { color: var(--wp--preset--color--indigo-2); text-decoration: none; }
.cs-shop a:hover { color: var(--wp--preset--color--gold); }
.cs-shop ul { margin: 0; padding: 0; list-style: none; }
.cs-shop strong { color: var(--wp--preset--color--contrast); font-weight: 600; }

/* Anchor targets clear the sticky header. */
.cs-shop [id] { scroll-margin-top: 96px; }
.cs-shop-anchor { display: block; position: relative; top: -96px; height: 0; }

/* ---- Shared type -------------------------------------- */
.cs-shop-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 10px !important;
}
.cs-shop-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.6rem !important;
}
.cs-shop-h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.cs-shop-intro { color: var(--wp--preset--color--muted); max-width: 62ch; margin-top: 8px !important; }
.cs-shop-small { font-size: 0.88rem; color: var(--cs-faint); }
.cs-shop-fineprint {
	margin-top: 1.5rem !important;
	font-size: 0.88rem;
	color: var(--cs-faint);
	max-width: 70ch;
}
.cs-shop-spec {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-faint);
}
.cs-shop-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	font-variant-numeric: tabular-nums;
}
.cs-shop-price s { margin-right: 0.3em; font-size: 0.62em; color: var(--cs-faint); }

/* ---- Buttons ------------------------------------------ */
.cs-shop .cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}
.cs-shop .cs-btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.02rem; }
.cs-shop .cs-btn--gold {
	background: var(--wp--preset--gradient--gold-grad);
	color: #241705;
	box-shadow: 0 14px 34px -12px rgba(233, 192, 121, 0.85);
}
/* The cosmic gradient runs from indigo into gold, so it carries dark ink
   rather than white: white text on the light end of the gradient only
   reaches 2.2:1, the ink reads at 5.4:1 or better across the whole sweep. */
.cs-shop .cs-btn--cosmic {
	background: var(--wp--preset--gradient--cosmic);
	color: var(--cs-ink);
	box-shadow: 0 12px 30px -10px rgba(124, 108, 255, 0.75);
}
.cs-shop .cs-btn--outline,
.cs-shop .cs-btn--ghost {
	border: 1px solid var(--cs-line-strong);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}
.cs-shop .cs-btn--ghost { background: rgba(124, 108, 255, 0.10); }
.cs-shop .cs-btn--gold:hover,
.cs-shop .cs-btn--cosmic:hover { transform: translateY(-2px); filter: brightness(1.05); color: #241705; }
.cs-shop .cs-btn--cosmic:hover { color: var(--cs-ink); }
.cs-shop .cs-btn--outline:hover,
.cs-shop .cs-btn--ghost:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--indigo); color: var(--wp--preset--color--contrast); }
.cs-shop .cs-btn:active { transform: translateY(0); }
.cs-shop .cs-btn:focus-visible { outline: 2px solid var(--wp--preset--color--indigo-2); outline-offset: 3px; }

/* ---- Cosmic panels ------------------------------------ */
.cs-shop-cosmos {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: #0b0a1c;
	background-image:
		radial-gradient(85% 120% at 12% -5%, rgba(139, 123, 255, 0.75), transparent 58%),
		radial-gradient(95% 95% at 105% 108%, rgba(196, 157, 255, 0.60), transparent 55%),
		radial-gradient(60% 80% at 82% 8%, rgba(233, 192, 121, 0.35), transparent 55%),
		linear-gradient(135deg, #191333, #0c0a1e);
}
.cs-shop-cosmos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		radial-gradient(1.6px 1.6px at 18% 26%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 62% 58%, #fff, transparent),
		radial-gradient(1.6px 1.6px at 82% 22%, #fff, transparent),
		radial-gradient(1.1px 1.1px at 38% 78%, rgba(255, 255, 255, 0.85), transparent),
		radial-gradient(1.3px 1.3px at 72% 82%, #fff, transparent);
	opacity: 0.9;
	pointer-events: none;
}
.cs-shop-cosmos > * { position: relative; z-index: 1; }
.cs-shop-glyph {
	position: absolute;
	right: 0.02em;
	bottom: -0.28em;
	z-index: 2;
	font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols2", var(--wp--preset--font-family--display);
	font-size: 7rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	font-variant-emoji: text;
}

/* ---- Drifting sky (shop only, behind the content) ----- */
.cs-shop-sky {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.cs-shop-sky span {
	position: absolute;
	height: 2px;
	border-radius: 2px;
	opacity: 0;
	animation: cs-shoot 34s linear infinite;
}
.cs-shop-sky span:nth-child(1) { top: 8%; left: -12%; width: 160px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95)); animation-delay: 6s; }
.cs-shop-sky span:nth-child(2) { top: 36%; left: 18%; width: 120px; background: linear-gradient(90deg, transparent, rgba(245, 216, 158, 0.95)); animation-duration: 47s; animation-delay: 23s; }
.cs-shop-sky span:nth-child(3) { top: 64%; left: 4%; width: 190px; background: linear-gradient(90deg, transparent, rgba(196, 157, 255, 0.95)); animation-duration: 61s; animation-delay: 44s; }
@keyframes cs-shoot {
	0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg) scaleX(0.3); }
	1.5% { opacity: 1; }
	7% { opacity: 0; transform: translate3d(540px, 210px, 0) rotate(18deg) scaleX(1); }
	100% { opacity: 0; transform: translate3d(540px, 210px, 0) rotate(18deg) scaleX(1); }
}

/* ---- Hero --------------------------------------------- */
.cs-shop-hero {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	padding-top: clamp(20px, 3vw, 40px);
	padding-bottom: clamp(28px, 4vw, 56px);
}
.cs-shop-hero__copy { max-width: 34ch; }
.cs-shop-hero__title {
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}
.cs-shop-hero__lead {
	margin-top: 16px !important;
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.cs-shop-hero__cta {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.cs-shop-meta {
	margin-top: 18px !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cs-shop-meta__status {
	display: inline-block;
	margin-right: 8px;
	padding: 3px 10px;
	border: 1px solid rgba(233, 192, 121, 0.45);
	border-radius: 999px;
	color: var(--wp--preset--color--gold);
}
.cs-shop-hero__art {
	position: relative;
	z-index: 0;
	border-radius: 24px;
	padding: 22px;
	box-shadow: 0 22px 60px -24px rgba(90, 70, 220, 0.55);
}
.cs-shop-hero__frame {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 40px -18px rgba(8, 7, 15, 0.8);
}
.cs-shop-hero__frame img { display: block; width: 100%; height: auto; }

/* ---- Sections ----------------------------------------- */
.cs-shop-section { margin-top: clamp(32px, 5vw, 72px); }

/* ---- Product cards ------------------------------------ */
.cs-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	gap: 1.25rem;
	margin-top: clamp(20px, 3vw, 32px);
}
.cs-shop-card {
	display: flex;
	flex-direction: column;
	background: var(--cs-card);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow);
	overflow: hidden;
	transition: transform 0.18s ease, border-color 0.18s ease;
}
.cs-shop-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--indigo); }
.cs-shop-card__art {
	position: relative;
	aspect-ratio: 16 / 9;
	min-height: 150px;
}
.cs-shop-card__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cs-shop-badge {
	position: absolute;
	left: 1.1rem;
	top: 1.1rem;
	z-index: 2;
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border: 1px solid rgba(233, 192, 121, 0.45);
	border-radius: 999px;
	background: rgba(10, 9, 26, 0.72);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.cs-shop-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
	padding: 1.15rem 1.25rem 1.35rem;
}
.cs-shop-card__title { font-size: 1.32rem; line-height: 1.25; hyphens: auto; }
.cs-shop-card__desc { color: var(--wp--preset--color--muted); }
.cs-shop-card__inside {
	margin-top: 0.4rem;
	border-top: 1px solid var(--cs-line);
	padding-top: 0.9rem;
}
.cs-shop-list {
	display: grid;
	gap: 0.5rem;
	font-size: 0.98rem;
	color: var(--wp--preset--color--muted);
}
.cs-shop-card__foot {
	margin-top: auto;
	padding-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	flex-wrap: wrap;
}
.cs-shop-card__soon {
	flex: 1 1 100%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs-faint);
}
.cs-shop-card__note { font-size: 0.88rem; color: var(--cs-faint); }

/* ---- Bundle strip ------------------------------------- */
.cs-shop-bundle {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid rgba(233, 192, 121, 0.4);
	border-radius: var(--cs-radius);
	background: var(--wp--preset--gradient--cosmic-soft);
	box-shadow: 0 22px 60px -30px rgba(233, 192, 121, 0.38);
}
.cs-shop-bundle__title { font-family: var(--wp--preset--font-family--display); font-size: 1.32rem; font-weight: 600; }
.cs-shop-bundle__text { color: var(--wp--preset--color--muted); margin-top: 4px !important; }
.cs-shop-bundle__buy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- Free band + launch band -------------------------- */
.cs-shop-free,
.cs-shop-list-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
	border-radius: 24px;
	padding: clamp(1.5rem, 4vw, 3rem);
}
.cs-shop-free {
	background: var(--wp--preset--gradient--cosmic-soft);
	border: 1px solid rgba(180, 170, 255, 0.22);
}
.cs-shop-free__copy { max-width: 42ch; color: var(--wp--preset--color--muted); }
.cs-shop-free__copy .cs-shop-h2 { margin-bottom: 12px !important; color: var(--wp--preset--color--contrast); }
.cs-shop-list-band { box-shadow: var(--cs-shadow); }
.cs-shop-list-band__copy { max-width: 38ch; color: rgba(255, 255, 255, 0.86); }
.cs-shop-list-band__copy .cs-shop-h2 { margin-bottom: 12px !important; color: #fff; }
.cs-shop-list-band .cs-shop-small { color: rgba(255, 255, 255, 0.78); }
.cs-shop-list-band .cs-shop-small a { color: rgba(255, 255, 255, 0.78); text-decoration: underline; }

/* Signup form (shared styles live in theme.css; these are shop sizes). */
.cs-shop-form { max-width: 460px; }
.cs-shop-form__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cs-shop-list-band .cs-shop-form__label { color: rgba(255, 255, 255, 0.8); }
.cs-shop .cs-form { gap: 8px; }
.cs-shop .cs-form input[type="email"] {
	flex: 1 1 200px;
	min-height: 54px;
	padding: 0 18px;
	background: rgba(8, 7, 15, 0.6);
	border-color: var(--cs-line-strong);
}
.cs-shop .cs-form button {
	min-height: 54px;
	padding: 0 26px;
	font-size: 1rem;
	box-shadow: 0 14px 34px -12px rgba(233, 192, 121, 0.85);
}
.cs-shop .cs-form-msg { max-width: 460px; }
.cs-shop-form + .cs-shop-small { display: block; margin-top: 14px; }

/* ---- Buyer notes -------------------------------------- */
.cs-shop-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 24px;
	margin-top: clamp(28px, 4vw, 48px);
	padding-top: clamp(20px, 3vw, 32px);
	border-top: 1px solid var(--cs-line);
	font-size: 0.9rem;
	color: var(--cs-faint);
}
.cs-shop-notes > div { max-width: 46ch; }
.cs-shop-notes a { color: var(--wp--preset--color--indigo-2); }

/* ---- Sticky buy bar (phones) -------------------------- */
.cs-shop-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
	background: rgba(8, 7, 15, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid var(--cs-line);
	transform: translateY(110%);
	transition: transform 0.24s ease;
}
.cs-shop-bar[hidden] { display: none; }
.cs-shop-bar__main { flex: 1; min-height: 52px; font-size: 1rem; }
.cs-shop-bar__free { min-height: 52px; padding: 0 18px; font-size: 0.9rem; }

@media (max-width: 719px) {
	.cs-shop-bar:not([hidden]) { display: flex; }
	.cs-shop-bar.is-visible { transform: translateY(0); }
	/* Room for the bar so it never covers the last line of the page. */
	.cs-shop:has(.cs-shop-bar:not([hidden])) .cs-shop-notes { padding-bottom: 84px; }
}

/* ---- Layout steps ------------------------------------- */
@media (min-width: 900px) {
	.cs-shop-hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
	.cs-shop-free__form,
	.cs-shop-list-band__form { justify-self: end; width: 100%; }
}

@media (max-width: 600px) {
	.cs-shop-glyph { font-size: 4.5rem; }
	.cs-shop-hero__art { padding: 14px; border-radius: 20px; }
	.cs-shop-card__title { font-size: 1.2rem; }
	.cs-shop .cs-form input[type="email"],
	.cs-shop .cs-form button { flex: 1 1 100%; }
	.cs-shop-card__foot { gap: 0.6rem; }
	.cs-shop-card__foot .cs-btn { flex: 1 1 100%; }
}

@media (max-width: 360px) {
	.cs-shop-bar { padding-inline: 12px; gap: 6px; }
	.cs-shop-bar__main { font-size: 0.92rem; padding: 0 12px; }
	.cs-shop-bar__free { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-shop-sky span { animation: none; }
	.cs-shop .cs-btn,
	.cs-shop-card { transition: none; }
	.cs-shop .cs-btn:hover,
	.cs-shop-card:hover { transform: none; }
	.cs-shop-bar { transition: none; }
}

/* ---- Print -------------------------------------------- */
@media print {
	.cs-shop-sky,
	.cs-shop-bar { display: none !important; }
	.cs-shop { color: #000; }
}