/*
 * Storefront visual language — deliberately mirrors the existing
 * dark/glass/blue-purple design tokens already established in
 * starwaypay-wallet's Wallet Center / Star Mart (`wallet-center.css`,
 * `--swp-wc-*` tokens). Recreated independently here under a `--stc-`
 * prefix — no files/code shared between the two plugins.
 */

#starway-catalog-storefront-root {
	--stc-bg: #0b0e1a;
	--stc-card-bg: rgba(255, 255, 255, 0.06);
	--stc-border: rgba(255, 255, 255, 0.12);
	--stc-accent: #7c5cff;
	--stc-accent-2: #4f8dfd;
	--stc-text: #f2f2f7;
	--stc-muted: #a3a8c2;

	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	color: var(--stc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.stc-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	align-items: start;

	/* Fades in once a Category is picked (owner-requested 2026-07-15) --
	   render() adds .is-visible on the next frame after this is painted. */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s ease, transform .4s ease;
}

.stc-layout.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Category picker -- the gate a first-time visitor sees before the shop
   itself appears. */
.stc-picker {
	max-width: 900px;
	margin: 72px auto;
	padding: 0 16px;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .26s ease, transform .26s ease;
}

.stc-picker.stc-fade-out {
	opacity: 0;
	transform: translateY(-10px);
}

.stc-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
	max-width: 820px;
	margin: 0 auto;
	text-align: left;
}

/* Floating glass "station" cards (owner-requested 2026-07-16, chosen after
   reviewing 3 design directions) -- each bobs gently at its own phase (see
   the nth-child animation-delay rules below) so the row doesn't move as
   one rigid block, and lifts/glows further on hover. */
.stc-picker-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 26px 24px;
	border-radius: 22px;
	background: var(--stc-card-bg);
	border: 1px solid var(--stc-border);
	backdrop-filter: blur(14px);
	cursor: pointer;
	color: var(--stc-text);
	font: inherit;
	text-align: left;
	animation: stc-picker-float 6s ease-in-out infinite;
	transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.stc-picker-card:hover, .stc-picker-card:focus-visible {
	transform: translateY(-10px) scale(1.02);
	border-color: var(--stc-card-glow);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 50px -12px var(--stc-card-glow-shadow);
	outline: none;
	animation-play-state: paused;
}

.stc-picker-card:active {
	transform: translateY(-4px) scale(0.99);
}

.stc-picker-card-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--stc-card-glow), var(--stc-card-glow-2));
	box-shadow: 0 8px 20px -6px var(--stc-card-glow-shadow);
	flex-shrink: 0;
}

.stc-picker-card-icon .stc-cat-icon {
	width: 26px;
	height: 26px;
}

.stc-picker-card-icon .stc-cat-icon-default {
	color: #fff;
}

.stc-picker-card-icon .stc-cat-icon-default svg {
	width: 24px;
	height: 24px;
}

.stc-picker-card-name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* 5 accent stops along the site's existing blue-purple gradient, cycled by
   index (see storefront.js) -- works for any number of categories. */
.stc-accent-0 { --stc-card-glow: #3b82f6; --stc-card-glow-2: #4f6bfa; --stc-card-glow-shadow: rgba(59,130,246,0.45); animation-delay: 0s; }
.stc-accent-1 { --stc-card-glow: #4f6bfa; --stc-card-glow-2: #7c5cff; --stc-card-glow-shadow: rgba(79,107,250,0.45); animation-delay: 0.6s; }
.stc-accent-2 { --stc-card-glow: #7c5cff; --stc-card-glow-2: #9333ea; --stc-card-glow-shadow: rgba(124,92,255,0.45); animation-delay: 1.2s; }
.stc-accent-3 { --stc-card-glow: #9333ea; --stc-card-glow-2: #a855f7; --stc-card-glow-shadow: rgba(147,51,234,0.45); animation-delay: 1.8s; }
.stc-accent-4 { --stc-card-glow: #a855f7; --stc-card-glow-2: #9333ea; --stc-card-glow-shadow: rgba(168,85,247,0.45); animation-delay: 2.4s; }

@keyframes stc-picker-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
	.stc-picker-card { animation: none; }
}

.stc-picker-btn-all {
	background: linear-gradient(135deg, var(--stc-accent), var(--stc-accent-2));
	border: none;
	color: #fff;
}

.stc-picker-btn-all:hover {
	background: linear-gradient(135deg, var(--stc-accent), var(--stc-accent-2));
	filter: brightness(1.1);
}

@media ( max-width: 782px ) {
	.stc-layout {
		grid-template-columns: 1fr;
	}
}

.stc-cat-nav {
	background: var(--stc-card-bg);
	border: 1px solid var(--stc-border);
	border-radius: 16px;
	padding: 12px;
	backdrop-filter: blur(12px);
	position: sticky;
	top: 32px;
}

.stc-cat-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--stc-text);
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 4px;
	cursor: pointer;
	background: transparent;
	border: none;
	width: 100%;
	text-align: left;
}

.stc-cat-link:hover {
	background: rgba(255, 255, 255, 0.06);
}

.stc-cat-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 5px;
	object-fit: cover;
}

.stc-cat-icon-default {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--stc-muted);
}

.stc-cat-icon-default svg {
	width: 16px;
	height: 16px;
}

.stc-cat-link.is-active .stc-cat-icon-default {
	color: #fff;
}

.stc-cat-link.is-active {
	background: linear-gradient(135deg, var(--stc-accent), var(--stc-accent-2));
	color: #fff;
	font-weight: 600;
}

.stc-cat-link.is-sub {
	padding-left: 26px;
	font-size: 13px;
	opacity: 0.85;
}

.stc-cat-nav-arrow {
	display: none;
	margin-left: auto;
	transition: transform 0.2s ease;
}

/* Mobile drawer (owner-requested 2026-07-16): only the active category
   shows by default, with a small arrow hinting there is more underneath.
   Tapping it (see storefront.js) adds .is-expanded to reveal the rest of
   the list. Same breakpoint the layout itself already switches to a
   single column at, so the drawer only appears once the sidebar is no
   longer sitting next to the grid anyway. */
@media ( max-width: 782px ) {
	.stc-cat-link.is-active .stc-cat-nav-arrow {
		display: inline-block;
	}

	.stc-cat-nav:not(.is-expanded) .stc-cat-link:not(.is-active) {
		display: none;
	}

	.stc-cat-nav.is-expanded .stc-cat-link.is-active .stc-cat-nav-arrow {
		transform: rotate(180deg);
	}
}

.stc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

/* Owner-reported 2026-07-19: auto-fill's 180px minimum only fits ONE
   card per row on a phone-width screen (e.g. ~340px of usable content
   width after padding) -- force a real 3-per-row grid instead, matching
   the app's own product grid. Tablet/desktop widths already get 3+
   columns naturally from the auto-fill rule above, so this is scoped to
   phone widths only. */
@media ( max-width: 600px ) {
	.stc-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		/* Owner-requested 2026-07-19: full-bleed edge to edge on mobile,
		   no side gutter -- breaks out of the root container's 16px
		   left/right padding (line ~20) with matching negative margins,
		   then adds it back as padding so cards don't touch the literal
		   screen edge, only the wasted OUTER whitespace goes away. */
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.stc-card {
		padding: 8px;
		gap: 4px;
	}

	.stc-card-name {
		font-size: 13px;
		line-height: 1.25;
	}
}

.stc-card {
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--stc-border);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.stc-card:hover {
	border-color: var(--stc-accent-2);
	transform: translateY(-2px);
}

/* Owner-reported 2026-07-19: aspect-ratio-on-the-img approach looked
   squished on mobile -- padding-trick square container instead, which
   guarantees a true 1:1 square in every browser regardless of
   aspect-ratio support/quirks (the image itself is absolutely
   positioned to fill it, see .stc-card-img below). */
.stc-card-img-wrap {
	position: relative;
	width: 100%;
	padding-top: 100%;
	border-radius: 8px;
	margin-bottom: 8px;
	overflow: hidden;
}

.stc-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only the "no image uploaded" placeholder gets the gradient fill --
   a real <img> keeps a transparent background so PNGs with transparency
   (e.g. logo icons) show through as actually transparent instead of a
   colored mask behind them. */
.stc-card-img-placeholder {
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.25), rgba(79, 141, 253, 0.25));
}

.stc-card-name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.stc-empty {
	color: var(--stc-muted);
	padding: 40px 0;
	text-align: center;
	grid-column: 1 / -1;
}

/*
 * 2026-07-26: this whole file was built for the site's dark-by-default
 * background (see the docblock at the top) -- the near-white text/borders/
 * card tints all assumed a dark canvas behind them. The site now defaults
 * to a light theme for non-entitled visitors (mu-plugins/starway-default-
 * light-theme.php), and this Storefront component never got its own
 * light-theme pass. Redefining the same custom properties this file
 * already uses everywhere is enough to re-theme it without touching every
 * individual selector -- plus a couple of hardcoded (non-variable) colors
 * that need their own override.
 */
body.swc-light-default #starway-catalog-storefront-root {
	--stc-card-bg: #f7f8fc;
	--stc-border: rgba(20, 25, 60, 0.12);
	--stc-text: #182B43;
	--stc-muted: #5a6b85;
}

body.swc-light-default .stc-picker-card:hover,
body.swc-light-default .stc-picker-card:focus-visible {
	background: rgba(20, 25, 60, 0.05);
}

body.swc-light-default .stc-cat-link:hover {
	background: rgba(20, 25, 60, 0.05);
}

body.swc-light-default .stc-card {
	background: #ffffff;
}