/**
 * store.css — Store-view-only styles, split out of public.css.
 * public/assets/css/store.css
 *
 * Loaded (conditionally) by Skin only when the page HAS a store
 * ($storeEnabled || $storeHasItems), i.e. whenever the store panel is
 * server-rendered into the DOM. It is NOT gated on currentView === 'store':
 * public.js switches feed ↔ store in place, so a visitor who lands on the
 * feed and toggles Store must not hit an unstyled panel.
 *
 * Everything shared between feed and store stays in public.css:
 * .pub-cta*, .pub-cta-checkout, .pub-badge*, .pub-goods-carousel*,
 * .pub-poster* (container/image/text/typography), and the feed event
 * block (.pub-event-badge/meta/sub/location). Only store-specific
 * selectors live here.
 */

/* ── Store toggle ─────────────────────────────────── */
.pub-store-toggle-wrap {
	display: inline-flex;
	justify-content: center;
	margin-top: 0;
	padding-left: var(--space-1-5);
	flex-shrink: 0;
}

.pub-store-toggle {
	gap: var(--space-1);
	padding: var(--space-2-5) var(--space-3-5);
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-yellow);
	color: var(--color-on-brand);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	opacity: 1;
}

.pub-store-toggle:hover,
.pub-store-toggle:focus-visible {
	background: var(--color-on-brand);
	color: var(--color-yellow);
	transform: none;
	opacity: 1;
}

.pub-store-toggle:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

.pub-store-toggle.is-active {
	background: var(--color-yellow);
	color: var(--color-on-brand);
}

.pub-store-toggle span {
	font-size: inherit;
	line-height: 1;
}

.pub-store-toggle i {
	font-size: var(--text-md);
	line-height: 1;
}

/* ── Store panel + paused state ───────────────────── */
.pub-store-panel {
	margin-top: var(--space-3);
}

.pub-store-paused {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	max-width: var(--block-max);
	margin: var(--space-8) auto;
	padding: var(--space-8) var(--space-6);
	border: var(--line-thin) solid var(--color-sage-border);
	border-radius: var(--radius-2xl);
	background: var(--color-sage);
	color: var(--color-header-text);
	box-shadow: var(--shadow-card-soft);
	text-align: center;
}

.pub-store-paused > i {
	font-size: var(--icon-xl);
	line-height: 1;
}

.pub-store-paused h1,
.pub-store-paused p {
	margin: 0;
	color: var(--color-header-text);
}

.pub-store-paused h1 {
	font-family: var(--font-ui);
	font-size: var(--text-xl);
	line-height: 1.2;
}

.pub-store-paused p {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: 1.5;
}

.pub-store-paused a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	background: var(--color-yellow);
	color: var(--color-header-text);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--shadow-card-soft);
	transition: background var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.pub-store-paused a:hover,
.pub-store-paused a:focus-visible {
	background: var(--color-header-text);
	color: var(--color-yellow);
	transform: translateY(calc(-1 * var(--space-0-5)));
}

[data-theme="dark"] .pub-store-paused {
	border-color: var(--color-yellow);
	background: var(--color-yellow);
}

/* ── Seller header ────────────────────────────────── */
.pub-store-seller-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: 0 0 var(--space-4);
	margin: 0 0 var(--space-6);
	border-bottom: var(--line-thin) solid var(--color-border);
}

.pub-store-seller {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	flex: 1;
}

.pub-store-seller-avatar-wrap,
.pub-store-seller-avatar {
	width: calc(var(--space-4) + var(--space-4) + var(--space-2));
	height: calc(var(--space-4) + var(--space-4) + var(--space-2));
	flex-shrink: 0;
}

.pub-store-seller-avatar {
	object-fit: cover;
	border: var(--line-thin) solid var(--color-border);
}
.pub-store-seller-avatar--fallback {
	border-radius: var(--radius-full);
	background: var(--color-surface-alt);
	color: var(--color-ink-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--icon-s);
}

.pub-store-seller-avatar-wrap .pub-verified-pip {
	width: var(--space-4);
	height: var(--space-4);
	font-size: var(--text-2xs);
	border-width: var(--line-thin);
}

.pub-store-seller-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.pub-store-seller-topline {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
}

.pub-store-seller-topline .pub-contact-row {
	gap: 0;
}

.pub-store-seller-topline .pub-contact-default {
	color: var(--color-ink-muted);
}

.pub-store-seller-name {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--font-ui);
	font-size: var(--text-lg);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--color-ink);
}

.pub-store-summary {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

.pub-store-seller-bio {
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
}

.pub-store-back {
	height: calc(var(--space-4) + var(--space-4));
	border-radius: var(--radius-full);
	border: var(--line-thin) solid var(--color-border-dim);
	border-color: var(--color-dim);
	background: transparent;
	color: var(--color-mid);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	box-sizing: border-box;
	padding: 0 var(--space-3);
	text-decoration: none;
	flex-shrink: 0;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.pub-store-back i {
	font-size: 1rem;
	line-height: 1;
}

.pub-store-back:hover {
	color: var(--color-bg);
	border-color: var(--color-ink);
	background: var(--color-ink);
}

/* ── Store card (stretched link + hover) ──────────── */
.pub-store-card-link {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* The stretched anchor fills the card so the whole surface is clickable
	   without JS. The Buy CTA below sits at z-index: 1 to stay independently
	   clickable above it. */
}

.pub-store-card-link:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* ── Store detail ─────────────────────────────────── */
.pub-store-detail-shell {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pub-store-detail {
	display: flex;
	flex-direction: column;
	border: var(--line-thin) solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.pub-store-detail-media {
	position: relative;
	background: var(--color-surface-raised);
}

.pub-store-detail-media .pub-store-chip {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
}

.pub-store-detail-media .pub-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
}

.pub-store-detail-carousel-wrap .pub-goods-carousel {
	aspect-ratio: var(--ratio-store-media);
}

.pub-store-detail-fallback {
	aspect-ratio: var(--ratio-store-media);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink-muted);
	font-size: var(--icon-store-empty);
}

.pub-store-detail-hero {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-store-media);
	object-fit: cover;
}

/* Event detail, no poster image: flat yellow media zone with the eyebrow
   pill row on top and the title centered below. */
.pub-store-detail-event-hero {
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	aspect-ratio: var(--ratio-store-media);
	padding: var(--space-5);
	overflow: hidden;
}

.pub-store-detail-event-hero:not([data-style]) {
	background: var(--color-yellow);
	color: var(--color-header-text);
}

.pub-store-detail-event-hero-title {
	margin-block: auto;
	font-family: var(--font-title);
	font-size: clamp(var(--text-xl), 10cqi, 3.5rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: inherit;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pub-store-detail-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
}

.pub-store-detail-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.pub-store-detail-title-wrap {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.pub-store-detail-kicker {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-mid);
}

.pub-store-detail-title {
	font-family: var(--font-ui);
	font-size: var(--text-xl);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-ink);
}

.pub-store-detail-price {
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-mid);
	white-space: nowrap;
}

.pub-store-detail-meta {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-mid);
	line-height: 1.4;
}

.pub-store-detail-desc {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	line-height: 1.5;
	color: var(--color-ink);
}

.pub-store-detail-specs {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.pub-store-detail-spec {
	padding: var(--space-2) var(--space-3);
	border: var(--line-thin) solid var(--color-border-dim);
	border-radius: var(--radius-lg);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	line-height: 1.45;
	color: var(--color-mid);
}

/* Detail actions share the grid-card split-button layout; the Buy pill
   still grows to fill, the bag circle stays fixed. No width override —
   the .pub-store-actions base rule handles flex sizing. */
.pub-store-detail-actions .pub-cta-checkout {
	margin-top: 0;
}

/* Goods store detail — featured density (hero + title + price + dual CTAs). */
.pub-store-detail--featured {
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.pub-store-detail--featured .pub-store-detail-body {
	gap: var(--space-4);
	padding: var(--space-5);
}

.pub-store-detail--featured .pub-store-detail-title {
	font-size: var(--text-xl);
	line-height: 1.15;
}

.pub-store-detail--featured .pub-store-detail-price {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-ink);
}

.pub-store-detail--featured .pub-store-detail-desc {
	font-size: var(--text-sm);
	line-height: 1.45;
}

.pub-store-detail--featured .pub-store-detail-actions {
	margin-top: var(--space-1);
	padding-top: var(--space-1);
}

/* Feed disclosure reuses the real Store detail hierarchy inside the outer
   product card. Remove only the duplicate shell so this reads as one card. */
.pub-goods-expanded-store .pub-store-detail-shell {
	gap: 0;
}

.pub-goods-expanded-store .pub-store-detail,
.pub-goods-expanded-store .pub-store-detail--featured {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pub-goods-expanded-store .pub-store-detail-actions {
	display: block;
}

.pub-goods-expanded-store .pub-goods-store-link {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0;
	justify-content: center;
}


/* ── Store grid + card body ───────────────────────── */
.pub-store-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3-5);
}

.pub-store-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--line-thin) solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-card-soft);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* Goods grid density — tighter type/media than event posters. */
.pub-store-card--goods .pub-store-media {
	aspect-ratio: 1 / 1;
}

/* Text-only posters need the same square media footprint as product imagery;
   image-backed event posters retain the established landscape ratio. */
.pub-store-card--event .pub-store-media:has(.pub-poster-text) {
	aspect-ratio: 1 / 1;
}

.pub-store-card--goods .pub-store-body {
	gap: var(--space-1-5);
	padding: var(--space-2-5);
}

.pub-store-card--goods .pub-store-title {
	font-size: var(--text-sm);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pub-store-card--goods .pub-store-price {
	margin-top: var(--space-0-75);
	font-size: var(--text-base);
	color: var(--color-ink);
}

.pub-store-card--goods .pub-store-actions {
	padding-top: var(--space-0-75);
}

.pub-store-card--goods .pub-store-actions {
	--store-action-size: calc(var(--space-6) + var(--space-1));
}


.pub-store-card:has(.pub-store-card-link:hover),
.pub-store-card:has(.pub-store-card-link:focus-visible) {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
	border-color: var(--color-border-dim);
}

.pub-store-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pub-store-body {
	position: relative;
	z-index: 2;
}

.pub-store-actions {
	position: relative;
	z-index: 3;
}

.pub-store-media {
	position: relative;
	aspect-ratio: var(--ratio-store-media);
	background: var(--color-surface-raised);
	overflow: hidden;
	/* Media holds no interactive content — let clicks fall through to the
	   card's stretched link so the entire card is tappable. */
	pointer-events: none;
}

.pub-store-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pub-store-image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink-muted);
	font-size: var(--icon-store-empty);
}

.pub-store-media .pub-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	box-shadow: var(--shadow-card-soft);
}

.pub-store-chip {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
	padding: var(--space-1-5) var(--space-2-5);
	border-radius: var(--radius-full);
	background: var(--color-overlay-light);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0;
}

.pub-store-chip--event {
	background: var(--color-overlay-dark);
	color: var(--color-on-dark);
}

.pub-store-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
}

.pub-store-head {
	display: block;
}

.pub-store-title-wrap {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-0-75);
}

.pub-store-title {
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-ink);
}

.pub-store-meta {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-mid);
	line-height: 1.4;
}

.pub-store-price {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-mid);
	white-space: nowrap;
}

.pub-store-desc {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	line-height: 1.35;
	color: var(--color-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Store actions — split button (Buy pill + Bag circle) ───────────
   Two controls sharing one ink/yellow pairing read in opposite
   directions (see docs/linkee-buy-button-component-spec.md §1):
     - Primary Buy:   ink bg, yellow text at rest → inverts to yellow/ink
     - Secondary Bag: yellow bg, ink icon at rest → inverts to ink/yellow
   The pair (bg, fg) is ONE value — both colors move together every
   state, or contrast breaks (§3). The bag circle is icon-only, so it
   needs aria-label (markup) and a thin border for legibility on light
   cards (§7). Free/RSVP items never render the bag toggle.
   ─────────────────────────────────────────────────────────────────── */
.pub-store-actions {
	--store-action-size: calc(var(--space-4) + var(--space-4) + var(--space-1));
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-1);
}

/* Primary Buy pill — dominant, fills the row's remaining width. */
.pub-store-actions .pub-cta-checkout {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	height: var(--store-action-size);
	padding-block: 0;
	margin-top: 0;
	transition: background var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.pub-store-actions .pub-cta-checkout:focus-visible {
	outline: none;
	background: var(--color-on-brand);
	color: var(--color-on-dark);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sage-border) 20%, transparent);
}

.pub-store-actions .pub-cta-checkout:not(:disabled):active {
	background: var(--color-yellow);
	color: var(--color-on-brand);
	transform: scale(0.97);
}

/* Added state keeps Buy available, but yields the wide slot to quantity. */
.pub-store-actions .pub-cta-checkout.is-compact {
	flex: 0 0 auto;
	width: var(--store-action-size);
	height: var(--store-action-size);
	padding: 0;
}

.pub-store-actions .pub-cta-checkout.is-compact .pub-cta-label {
	display: none;
}

.pub-store-actions .pub-cta-checkout.is-compact > .ti {
	font-size: calc(var(--icon-m) + var(--space-1));
}

/* Secondary bag toggle — icon-only yellow circle, fixed square.
   On hover it inverts to ink bg / yellow icon, crossing into the Buy
   pill's resting state. After Add it yields its slot to quantity. */
.pub-store-actions .pub-store-bag-toggle {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--store-action-size);
	height: var(--store-action-size);
	padding: 0;
	margin-top: 0;
	border-radius: var(--radius-full);
	border: var(--line-thin) solid var(--color-border);
	background: var(--color-yellow);
	color: var(--color-on-brand);
	cursor: pointer;
	font-family: inherit;
	transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.pub-store-actions .pub-store-bag-toggle > .ti {
	font-size: calc(var(--icon-m) + var(--space-1));
	line-height: 1;
}

.pub-store-actions .pub-store-bag-toggle:focus-visible {
	outline: none;
	background: var(--color-yellow);
	color: var(--color-on-brand);
	border-color: var(--color-border);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sage-border) 20%, transparent);
}

.pub-store-actions .pub-store-bag-toggle:active {
	background: var(--color-on-brand);
	color: var(--color-yellow);
	border-color: var(--color-on-brand);
	transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
	.pub-store-actions .pub-cta-checkout:not(:disabled):hover {
		background: var(--color-yellow);
		color: var(--color-on-brand);
	}

	.pub-store-actions .pub-store-bag-toggle:hover {
		background: var(--color-on-brand);
		color: var(--color-yellow);
		border-color: var(--color-on-brand);
	}
}

/* ── Card quantity stepper (spec §9) ─────────────────
   Add-to-bag expands into the yellow slot while Buy becomes compact.
   Decrementing 1 reaches 0 and removes the line. */
.pub-store-actions .pub-store-qty {
	display: grid;
	grid-template-columns: repeat(3, minmax(var(--space-4), 1fr)) calc(var(--icon-l) + var(--space-1));
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
	margin-top: 0;
	padding: 0 var(--space-2);
	height: var(--store-action-size);
	border-radius: var(--radius-full);
	border: var(--line-thin) solid var(--color-border);
	background: var(--color-yellow);
	color: var(--color-on-brand);
	box-sizing: border-box;
}

.pub-store-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(var(--space-4) + var(--space-2));
	flex-shrink: 0;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	color: inherit;
	font-family: var(--font-mono);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--duration-fast) ease;
}

.pub-store-qty-btn:hover,
.pub-store-qty-btn:focus-visible {
	background: color-mix(in srgb, var(--color-on-brand) 10%, transparent);
}

.pub-store-qty-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sage-border) 20%, transparent);
}

.pub-store-qty-btn:active {
	transform: scale(0.92);
}

.pub-store-qty-btn:disabled {
	cursor: default;
	opacity: .45;
}

.pub-store-qty-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(var(--icon-l) + var(--space-1));
	height: 100%;
	padding: 0;
	margin-left: 0;
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pub-store-qty-remove > .ti {
	font-size: calc(var(--icon-m) + var(--space-1));
	line-height: 1;
}

.pub-store-qty-remove:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sage-border) 20%, transparent);
}

.pub-store-qty-remove:active {
	transform: scale(0.92);
}

.pub-store-qty-val {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	min-width: var(--space-4);
}

/* Author display rules beat the UA [hidden] rule. */
.pub-store-actions .pub-store-bag-toggle[hidden],
.pub-store-actions .pub-store-qty[hidden] {
	display: none;
}

/* Floating checkout pool — fixed above the viewport bottom while the store view is
   up. The [hidden] guard is required: the display:flex rule would
   otherwise beat the UA hidden style. */
.pub-page {
	padding-bottom: calc(10rem + var(--store-bag-reserve, var(--space-0)));
}

.pub-store-bag-bar {
	position: fixed;
	left: 50%;
	bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: var(--space-4);
	row-gap: var(--space-1);
	width: min(calc(100% - (var(--space-4) * 2)), var(--store-max));
	padding: var(--space-3) var(--space-4);
	transform: translateX(-50%);
	box-sizing: border-box;
	border: var(--line-thin) solid var(--color-sage-border);
	border-radius: var(--radius-xl);
	background: var(--color-sage);
	box-shadow: var(--shadow-card-soft);
}

.pub-store-bag-bar[hidden] {
	display: none;
}

/* Itemized line summary (spec §10): "2× Item a" first, then total below. */
.pub-store-bag-items {
	grid-column: 1;
	grid-row: 1;
	display: block;
	min-width: 0;
	margin-top: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pub-store-bag-items:empty {
	display: none;
}

.pub-store-bag-item {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-mid);
	line-height: 1.3;
}

.pub-store-bag-item + .pub-store-bag-item::before {
	content: ", ";
}

.pub-store-bag-total {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--font-mono);
	font-size: var(--text-md);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-mid);
}

.pub-store-bag-full {
	grid-column: 1 / -1;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-mid);
}

.pub-store-bag-full[hidden] {
	display: none;
}

.pub-store-bag-actions {
	grid-column: 2;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.pub-store-bag-actions .pub-cta {
	margin-top: 0;
}

.pub-store-bag-checkout {
	min-height: calc(var(--space-4) + var(--space-4) + var(--space-1));
	padding-inline: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-on-brand);
	color: var(--color-on-dark);
}

.pub-store-bag-clear {
	border: none;
	background: none;
	cursor: pointer;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink-muted);
	text-decoration: underline;
}

/* The mockup's full action row needs a full-width card on phones; two
   columns cannot fit compact Buy + quantity + the checked-bag control. */
@media (max-width: 600px) {
	.pub-store-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Desktop store layout ─────────────────────────── */
@media (min-width: 900px) {
	.pub-goods-expanded-store .pub-store-detail-media > .pub-goods-carousel-wrap {
		position: absolute;
		inset: 0;
	}

	.pub-goods-expanded-store .pub-goods-carousel {
		height: 100%;
		aspect-ratio: auto;
	}

	.pub-goods-expanded-store .pub-store-detail-head {
		flex-wrap: wrap;
		padding-inline-end: var(--control-compact-h);
	}

	.pub-page--store {
		max-width: var(--store-max);
	}

	.pub-store-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Product detail: media left, info right */
	.pub-store-detail {
		flex-direction: row;
	}

	.pub-store-detail-media {
		flex: 0 0 50%;
		min-width: 0;
	}

	.pub-store-detail-body {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	/* Cap poster height inside the store panel only. Do not use bare
	   `.pub-poster` — store.css loads on the feed route whenever the page
	   has a store, and an unscoped rule breaks feed 3/4 on desktop. */
	.pub-store-panel .pub-poster {
		max-height: 72vh;
	}
}

@media (min-width: 1200px) {
	.pub-page--store {
		max-width: var(--store-max-wide);
	}

	.pub-store-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ── Event poster (store grid + detail) ───────────── */
/* Events carry variable-length content — release the 3/4 poster lock in
   text mode only; image mode keeps a landscape card for photo posters. */
.pub-event-poster.pub-poster-text { aspect-ratio: auto; padding: var(--space-6) var(--space-5); }
.pub-event-poster.pub-poster-image { aspect-ratio: 4 / 3; }
.pub-event-poster .pub-poster-scrim { padding: var(--space-5); }
.pub-event-poster.pub-poster-image .pub-poster-scrim {
    background: linear-gradient(rgba(0,0,0,.22) 0%, transparent 40%, rgba(0,0,0,.78) 100%);
}
.pub-event-poster .pub-cta { align-self: flex-start; width: auto; }
.pub-event-poster.pub-poster-text .pub-poster-caption { color: inherit; opacity: .75; }
.pub-event-poster.pub-poster-image .pub-poster-caption,
.pub-event-poster.pub-poster-image .pub-poster-eyebrow { color: var(--color-on-dark); opacity: .85; }

/* Event FREE pill renders bare (no eyebrow wrapper): the grid inherits the
   goods badge spot via .pub-store-media .pub-badge; detail contexts pin it
   the same way. */
.pub-store-detail-media > .pub-badge,
.pub-store-detail-event-hero > .pub-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	box-shadow: var(--shadow-card-soft);
}

/* Store event card body: the date/time/location line under the poster. */
.pub-store-event-line {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
	margin-bottom: var(--space-2);
}

/* Store grid: the poster fills the media zone, capped to the goods ratio.
   Padding matches the card body (space-3) so the title aligns with the meta
   text below and the FREE pill insets exactly like the goods badge. The
   media zone is a size container so the text-poster title scales with the
   card width. */
.pub-store-media {
	container-type: inline-size;
}

.pub-store-media .pub-event-poster {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
	padding: var(--space-3);
}

.pub-store-media .pub-poster-text .pub-poster-title {
	flex: 0 0 auto;
	margin-block: auto;
	font-size: clamp(var(--text-md), 13cqi, 2.5rem);
	line-height: 0.9;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pub-store-media .pub-poster-image .pub-poster-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}